\n \n

${job.title}

\n \n

${job.description}

\n \n \n \n ${\n index === 0\n ? \"Top Match\"\n : index === 1\n ? \"Top Match\"\n : \"Top Match\"\n }\n \n\n \n

\n \n \n \n Learn More →\n \n \n \n `;\n \n card\n .querySelector(\".learn-more-btn\")\n .addEventListener(\"click\", () => {\n window.location.href = `job.html?id=${job.id}`;\n });\n \n topMatches.appendChild(card);\n });\n}\n \nfunction displayOtherJobs(jobs) {\n otherJobsList.innerHTML = \"\";\n \n jobs.forEach((job, index) => {\n const card = document.createElement(\"div\");\n \n card.className = \"career-card\";\n \n card.innerHTML = `\n \n

\n \n

${job.title}

\n \n

${job.description}

\n \n

\n \n \n \n Learn More →\n \n \n \n `;\n \n card\n .querySelector(\".learn-more-btn\")\n .addEventListener(\"click\", () => {\n window.location.href = job.link;\n });\n \n otherJobsList.appendChild(card);\n });\n}\nwindow.addEventListener(\"load\", () => {\n const saved = localStorage.getItem(\"careerResults\");\n \n if (!saved) return;\n \n const data = JSON.parse(saved);\n \n landingPage.classList.remove(\"active\");\n quizPage.classList.remove(\"active\");\n resultPage.classList.add(\"active\");\n \n renderResults(data);\n currentQuestion = 0;\n selectedAnswer = null;\n});\n \nasync function loadCareerResults(primary, secondary) {\n try {\n const response = await fetch(\n `${API_URL}?primary=${primary}&secondary=${secondary}`,\n );\n \n if (!response.ok) {\n throw new Error(\"Failed to fetch career data.\");\n }\n \n const data = await response.json();\n \n data.primary = primary;\n data.secondary = secondary;\n \n // FIX: these were never being set, so the personality\n // panel descriptions were always blank.\n data.primaryDescription = descriptions[primary];\n data.secondaryDescription = descriptions[secondary];\n \n localStorage.setItem(\n \"careerResults\",\n JSON.stringify(data),\n );\n \n renderResults(data);\n } catch (error) {\n console.error(error);\n \n topMatches.innerHTML = `\n

Unable to load careers.

Please try again later.

\n`;\n \n otherJobsList.innerHTML = \"\";\n }\n}",[170],"c1583000-f832-44ef-8d8f-ca8adf1bbb11","quiz.html","606f2bbc-84d5-11f1-9a1a-1607ee4eb77e",118,["D",1785041494390],6,"\n\n \n \n \n Quiz\n \n \n \n \n \n \n \n \n \n \n

\n\n

\n $\"Logo\"$ \n $\"Logo\"$ \n\n

Find Your Dream Career

\n\n

\n Answer a few questions to discover careers that match your\n personality.\n

\n\n \n

\n\n\n

\n\n

\n Question 1 / 7\n

\n\n\n\n

\n Question appears here\n

\n\n\n

\n\n \n

\n\n\n

\n\n

\n\n\n \n\n\n

\n\n

Your Job Matches

\n\n

\n\n\n

\n\n

\n Other Careers You May Like\n

\n\n

\n\n\n

\n\n

\n\n \n

\n \n",[178],"ac19bd89-5493-4efb-90f7-aae18d481cba","quiz.css","55957bb0-84d5-11f1-9b8a-1607ee4eb77e",119,["D",1785041504731],13,":root {\n --background: #f5f5f5;\n --grid: #eaeaff;\n --purple: #b469ff;\n --pink: #ff66bc;\n --orange: #fc6b44;\n --yellow: #ffea29;\n --green: #03d66c;\n --vibrant-blue: #6397ff;\n --medium-blue: #7eb0fc;\n --light-blue: #9fc2fd;\n --text: #1a2376;\n --retake-blue: #7eb0fc;\n}\n\n.dark-theme {\n --background: #0f1427;\n --grid: #252e50;\n --purple: #b469ff;\n --pink: #ff66bc;\n --orange: #fc6b44;\n --yellow: #ffea29;\n --green: #03d66c;\n --vibrant-blue: #4891ff;\n --medium-blue: #132542;\n --light-blue: #1b3864;\n --text: #f5f5f5;\n --retake-blue: #ebe3e3;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n font-family: \"Atkinson Hyperlegible\", sans-serif;\n}\n\nbody {\n background-color: var(--background);\n color: var(--text);\n\n transition: background-color 0.4s ease, color 0.4s ease;\n\n padding-top: 76px;\n\n background-image:\n linear-gradient(var(--grid) 1px, transparent 1px),\n linear-gradient(90deg, var(--grid) 1px, transparent 1px);\n background-size: 40px 40px;\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n min-height: 100vh;\n\n padding: 76px 20px 40px;\n}\n\n.container {\n width: 100%;\n max-width: 950px;\n}\n\n.page {\n display: none;\n animation: fade 0.4s ease;\n}\n\n.page.active {\n display: block;\n}\n\n@keyframes fade {\n from {\n opacity: 0;\n transform: translateY(15px);\n }\n\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n/* Hero */\n\n.hero {\n text-align: center;\n}\n\n.CoLogo {\n width: 500px;\n margin-bottom: -50px;\n}\n\n/* Default (Light Mode) */\n.CoLogoLight {\n display: inline-block;\n}\n\n.CoLogoDark {\n display: none;\n}\n\n/* Dark Mode */\n.dark-theme .CoLogoLight {\n display: none;\n}\n\n.dark-theme .CoLogoDark {\n display: inline-block;\n}\n\n.hero h1 {\n font-family: \"Modak\", system-ui;\n font-weight: 400;\n font-size: 40px;\n margin-bottom: 15px;\n}\n\n.hero p {\n color: var(--text);\n font-family: \"Atkinson Hyperlegible\", sans-serif;\n margin-bottom: 40px;\n font-size: 20px;\n}\n\n#start-btn {\n background: #6da7ff;\n color: white;\n\n border: none;\n\n padding: 15px 50px;\n\n border-radius: 50px;\n\n font-size: 18px;\n font-weight: 600;\n\n cursor: pointer;\n\n transition: 0.25s;\n}\n\n#start-btn:hover {\n background: #4b8df7;\n\n transform: translateY(-2px);\n}\n\n/* QUIZZZZZ */\n\n.progress-wrapper {\n margin-bottom: 35px;\n}\n\n.progress-bar {\n width: 100%;\n height: 12px;\n\n background: #d9e8ff;\n\n border-radius: 20px;\n\n overflow: hidden;\n}\n\n#progress {\n width: 0%;\n\n height: 100%;\n\n background: #6da7ff;\n\n transition: 0.3s;\n}\n\n#progress-text {\n margin-top: 10px;\n\n text-align: right;\n\n color: #6d7aa8;\n}\n\n.question-container {\n text-align: center;\n\n margin-bottom: 35px;\n}\n\n#question {\n font-family: \"Ultra\", serif;\n font-weight: 700;\n font-style: normal;\n font-size: 40px;\n}\n\n.answers {\n display: grid;\n\n grid-template-columns: repeat(3, 1fr);\n\n gap: 20px;\n}\n\n.answer-btn {\n background: white;\n border: 2px solid #b7d0ff;\n border-radius: 14px;\n padding: 25px;\n min-height: 100px;\n font-family: \"Atkinson Hyperlegible\", sans-serif;\n font-size: 24px;\n cursor: pointer;\n transition: 0.25s;\n color: #2c4177;\n}\n\n.answer-btn:hover {\n background: #eef5ff;\n\n transform: translateY(-4px);\n}\n\n.answer-btn.selected {\n background: #6da7ff;\n\n color: white;\n\n border-color: #6da7ff;\n}\n\n/* Next Button */\n\n#next-btn {\n width: 100%;\n\n margin-top: 35px;\n\n background: #6da7ff;\n\n color: white;\n\n border: none;\n\n border-radius: 40px;\n\n height: 55px;\n\n font-size: 25px;\n\n font-family: \"Ultra\", serif;\n font-weight: 700;\n\n cursor: pointer;\n\n transition: 0.25s;\n}\n\n#next-btn:hover {\n background: #4b8df7;\n}\n\n/* RESULTS PAGE */\n\n.results-layout {\n display: grid;\n margin-top: 45px;\n grid-template-columns: 330px 1fr;\n gap: 35px;\n align-items: start;\n}\n\n/* LEFT PANEL */\n\n.personality-panel {\n background: var(--background);\n\n border: 3px solid var(--medium-blue);\n\n border-radius: 14px;\n\n overflow: hidden;\n\n display: flex;\n\n flex-direction: column;\n}\n\n.personality-panel h1 {\n font-size: 35px;\n\n padding: 25px 25px 10px;\n\n color: var(--text);\n}\n\n.primary-personality,\n.secondary-personality {\n padding: 0 25px 25px;\n}\n\n.secondary-personality {\n padding-top: 0px;\n}\n\n.primary-personality h2,\n.secondary-personality h2 {\n font-size: 28px;\n\n color: var(--text);\n\n margin-bottom: 10px;\n}\n\n.secondary-personality h3 {\n color: #656ca2;\n\n margin-bottom: 10px;\n\n font-size: 22px;\n}\n\n.primary-personality p,\n.secondary-personality p {\n line-height: 1.6;\n\n font-size: 20px;\n\n color: var(--text);\n}\n\n/* Retake Button */\n\n#restart-btn {\n margin-top: auto;\n border: none;\n border-top: 3px solid var(--medium-blue);\n background: var(--background);\n color: var(--retake-blue);\n text-decoration: underline;\n font-size: 20px;\n cursor: pointer;\n padding: 4px;\n transition: 0.25s;\n}\n\n#restart-btn:hover {\n color: #6397ff;\n}\n\n/* RIGHT PANEL */\n\n.jobs-panel h1 {\n font-size: 40px;\n margin-bottom: 10px;\n\n color: var(--text);\n}\n\n.other-jobs {\n margin-top: 40px;\n}\n\n.other-jobs h2 {\n margin-bottom: 20px;\n\n font-size: 30px;\n\n color: var(--text);\n}\n\n/* Career Cards */\n\n.career-card {\n display: flex;\n\n justify-content: space-between;\n\n align-items: flex-start;\n\n background: var(--background);\n\n border: 3px solid var(--medium-blue);\n\n border-radius: 18px;\n\n padding: 20px;\n\n margin-bottom: 18px;\n\n gap: 20px;\n}\n\n.career-info {\n flex: 1;\n}\n\n.career-info h3 {\n font-size: 28px;\n\n margin-bottom: 8px;\n\n color: var(--text);\n}\n\n.career-info p {\n font-size: 18px;\n\n color: var(--text);\n\n line-height: 1.5;\n}\n\n/* Top Match Badge */\n\n.badge {\n display: inline-block;\n\n margin-top: 15px;\n\n background: var(--light-blue);\n\n color: var(--text);\n\n padding: 8px 16px;\n\n border-radius: 999px;\n\n font-size: 15px;\n\n font-weight: 600;\n}\n\n/* Learn More Button */\n\n.learn-more-btn {\n align-self: flex-end;\n\n background: none;\n\n border: none;\n\n color: var(--retake-blue);\n\n font-size: 24px;\n\n cursor: pointer;\n\n transition: 0.2s;\n\n white-space: nowrap;\n}\n\n.learn-more-btn:hover {\n color: #6397ff;\n\n transform: translateX(4px);\n}\n\n.top-match {\n border-color: var(--medium-blue);\n}\n\n@media (max-width: 900px) {\n .CoLogo {\n width: 400px;\n }\n .results-layout {\n grid-template-columns: 1fr;\n }\n\n .personality-panel {\n order: 1;\n }\n\n .jobs-panel {\n order: 2;\n }\n\n .career-card {\n flex-direction: column;\n }\n\n .learn-more-btn {\n align-self: flex-start;\n\n margin-top: 15px;\n }\n}",[186],"0a54d158-5428-4f9c-a091-a45cd800de7c",["D",1785042730384],[28],"76ffdd26-0c97-4a2f-98ca-c7a03872e094","nav.js","26c83626-7a0b-11f1-82de-1607ee4eb77e",79,["D",1784341281514],"(function () {\n const navEl = document.querySelector(\"nav\");\n if (!navEl) return;\n\n let isHovering = false;\n let hideTimer = null;\n const HIDE_DELAY = 1200;\n\n const isMobile = () => window.innerWidth <= 800;\n\n function showNav() {\n navEl.classList.remove(\"nav-hidden\");\n }\n\n function scheduleHide() {\n clearTimeout(hideTimer);\n\n if (isMobile()) {\n showNav();\n return;\n }\n\n hideTimer = setTimeout(() => {\n if (!isHovering) {\n navEl.classList.add(\"nav-hidden\");\n }\n }, HIDE_DELAY);\n }\n\n window.addEventListener(\n \"scroll\",\n () => {\n showNav();\n scheduleHide();\n },\n { passive: true },\n );\n\n navEl.addEventListener(\"mouseenter\", () => {\n if (isMobile()) return;\n isHovering = true;\n clearTimeout(hideTimer);\n showNav();\n });\n\n navEl.addEventListener(\"mouseleave\", () => {\n if (isMobile()) return;\n isHovering = false;\n scheduleHide();\n });\n\n const HOVER_ZONE_HEIGHT = 12;\n document.addEventListener(\n \"mousemove\",\n (e) => {\n if (isMobile()) return;\n\n if (e.clientY <= navEl.offsetHeight + HOVER_ZONE_HEIGHT) {\n isHovering = true;\n clearTimeout(hideTimer);\n showNav();\n } else if (isHovering) {\n isHovering = false;\n scheduleHide();\n }\n },\n { passive: true },\n );\n\n navEl.addEventListener(\"touchstart\", () => {\n if (isMobile()) return;\n isHovering = true;\n clearTimeout(hideTimer);\n showNav();\n });\n\n if (isMobile()) {\n showNav();\n } else {\n scheduleHide();\n }\n})();\n\nfunction showSidebar() {\n const sidebar = document.querySelector(\".sidebar\");\n sidebar.style.display = \"flex\";\n}\n\nfunction hideSidebar() {\n const sidebar = document.querySelector(\".sidebar\");\n sidebar.style.display = \"none\";\n}\n\nconst themeToggleBtn = document.querySelector(\".theme-toggle\");\nconst themeIcon = document.getElementById(\"theme-icon\");\n\nfunction toggleTheme() {\n themeToggleBtn.classList.add(\"flip\");\n\n setTimeout(() => {\n if (document.body.classList.contains(\"dark-theme\")) {\n document.body.classList.remove(\"dark-theme\");\n themeIcon.src = \"img/sun.png\";\n localStorage.setItem(\"theme\", \"light\");\n } else {\n document.body.classList.add(\"dark-theme\");\n themeIcon.src = \"img/moon.png\";\n localStorage.setItem(\"theme\", \"dark\");\n }\n }, 200);\n\n setTimeout(() => {\n themeToggleBtn.classList.remove(\"flip\");\n }, 400);\n}\n\nwindow.addEventListener(\"DOMContentLoaded\", () => {\n const savedTheme = localStorage.getItem(\"theme\");\n if (savedTheme === \"dark\") {\n document.body.classList.add(\"dark-theme\");\n themeIcon.src = \"img/moon.png\";\n } else {\n document.body.classList.remove(\"dark-theme\");\n themeIcon.src = \"img/sun.png\";\n }\n});",[197],"39f95511-1b53-4785-865b-0df7265b6e39","nav.css","c437e4a2-7a0a-11f1-9348-1607ee4eb77e",47,["D",1783780243700],9,":root {\n --background: #f5f5f5;\n --grid: #eaeaff;\n --purple: #b469ff;\n --pink: #ff66bc;\n --orange: #fc6b44;\n --yellow: #ffea29;\n --green: #03d66c;\n --vibrant-blue: #6397ff;\n --medium-blue: #7eb0fc;\n --light-blue: #9fc2fd;\n --text: #1a2376;\n}\n\n.dark-theme {\n --background: #0f1427;\n --grid: #252e50;\n --purple: #b469ff;\n --pink: #ff66bc;\n --orange: #fc6b44;\n --yellow: #ffea29;\n --green: #03d66c;\n --vibrant-blue: #4891ff;\n --medium-blue: #132542;\n --light-blue: #1b3864;\n --text: #f5f5f5;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n background-color: var(--background);\n color: var(--text);\n font-family: \"Inter\", sans-serif;\n transition: background-color 0.4s ease, color 0.4s ease;\n padding-top: 76px;\n}\n\nnav {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n z-index: 1000;\n background: var(--medium-blue);\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n transition: background 0.4s ease, transform 0.35s ease, opacity 0.35s ease;\n}\n\nnav.nav-hidden {\n transform: translateY(-100%);\n opacity: 0;\n pointer-events: none;\n}\n\nnav ul.main-menu {\n width: 100%;\n list-style: none;\n display: flex;\n justify-content: flex-end;\n align-items: center;\n padding: 10px 20px;\n}\n\nnav a {\n height: 100%;\n padding: 0 20px;\n text-decoration: none;\n font-size: 22px;\n font-weight: 500;\n display: flex;\n align-items: center;\n color: var(--text);\n transition: opacity 0.2s ease;\n}\n\nnav a:hover {\n opacity: 0.8;\n}\n\n.logo {\n margin-right: auto;\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.logo img {\n height: 55px;\n width: auto;\n}\n\n.logo .logo-dark {\n display: none;\n}\n\n.dark-theme .logo .logo-light {\n display: none;\n}\n\n.dark-theme .logo .logo-dark {\n display: block;\n}\n\nnav .main-menu .logo span {\n font-family: \"Ultra\", serif;\n font-weight: 400;\n font-style: normal;\n font-size: 36px;\n color: var(--text);\n}\n\n.theme-toggle {\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 15px;\n margin-left: 10px;\n}\n\n.theme-toggle img {\n width: 35px;\n height: 35px;\n}\n\n@keyframes fullSpin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n\n.theme-toggle.flip img {\n animation: fullSpin 0.4s ease-in-out;\n}\n\n.menu-button {\n display: none;\n cursor: pointer;\n padding: 0 10px;\n}\n\n.menu-button svg {\n width: 30px;\n height: 30px;\n stroke: white;\n}\n\n.sidebar {\n position: fixed;\n top: 0;\n right: 0;\n height: 100vh;\n width: 250px;\n z-index: 999;\n background-color: var(--medium-blue);\n box-shadow: -10px 0 20px rgba(0, 0, 0, 0.15);\n display: none;\n flex-direction: column;\n align-items: flex-start;\n justify-content: flex-start;\n padding: 20px;\n list-style: none;\n}\n\n.sidebar li {\n width: 100%;\n margin-bottom: 15px;\n}\n\n.sidebar a {\n width: 100%;\n font-size: 24px;\n}\n\n.close-button {\n cursor: pointer;\n border: none;\n outline: none;\n background: none;\n font-size: 45px;\n color: #ffffff;\n}\n\n@media (max-width: 800px) {\n nav.nav-hidden {\n transform: translateY(0) !important;\n opacity: 1 !important;\n pointer-events: auto !important;\n }\n\n .hideOnMobile {\n display: none;\n }\n\n .menu-button {\n display: block;\n }\n}\n\n@media (max-width: 400px) {\n .sidebar {\n width: 100%;\n }\n}",[204],"ceeb1f6b-bb65-489f-9ae2-cc4a1d0e37a2","job.html","45fe1a52-88b0-11f1-9ba2-1607ee4eb77e",123,["D",1785042633178],3,"\n\n \n \n \n Career Information\n\n \n \n \n\n \n \n \n\n \n \n\n \n\n \n\n

\n\n $\"Career$ \n

\n\n \n\n

\n $\"Cloud$ \n

\n\n \n\n

\n \n\n

\n Accountant\n

\n\n

\n They help companies keep track of their money.\n

\n\n \n\n

\n \n\n

Does this job match me?

\n\n

\n This career usually suits people with these personalities.\n

\n\n

\n \n

\n\n \n\n

Salary Expectation

\n\n

Estimated salary in Malaysia.

\n\n

\n Starting Salary\n\n

\n RM0\n

\n\n \n →\n \n\n

\n Experienced Salary\n\n

\n RM0\n

\n\n \n *Salary estimates may vary.\n \n

\n\n \n\n

Academic Pathway

\n\n

One possible route into this career.

\n\n

\n \n

\n\n \n\n

Suggested Schools

\n\n

Institutions offering related courses.

\n\n

\n\n \n\n

Start Now

\n\n

\n\n \n\n

Test Your Job Knowledge

\n\n

\n Question 1 / 3\n

\n\n

\n \n

\n\n \n

\n\n \n\n \n

\n\n \n\n \n \n",[212],"e0b112ff-31b4-4aa6-8bff-a17f60124ffe","job.css","69af80e4-88b0-11f1-b122-1607ee4eb77e",127,["D",1785042684495],":root {\n --blue: #6f97ff;\n --blue-dark: #253a86;\n --blue-light: #edf3ff;\n --border: #86a8ff;\n --grid: #dfe8ff;\n --bg: #f8fbff;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: \"Atkinson Hyperlegible\", sans-serif;\n color: var(--blue-dark);\n\n background:\n linear-gradient(var(--grid) 1px, transparent 1px),\n linear-gradient(90deg, var(--grid) 1px, transparent 1px);\n background-size: 35px 35px;\n background-color: var(--bg);\n}\n\n/*=========================\nContainer\n==========================*/\n\n.container {\n width: min(1200px, 95%);\n margin: auto;\n padding: 30px 0 80px;\n}\n\n/*=========================\nHero\n==========================*/\n\n.hero {\n background: #a8c6ff;\n border-radius: 30px;\n overflow: hidden;\n text-align: center;\n position: relative;\n}\n\n.hero-image {\n width: 260px;\n display: block;\n margin: 40px auto 10px;\n}\n\n.hero::after {\n content: \"\";\n display: block;\n height: 30px;\n background: radial-gradient(circle at 20px 0, #fff 20px, transparent 21px)\n repeat-x;\n background-size: 40px 30px;\n}\n\n.job-title {\n margin-top: 15px;\n font-size: 52px;\n font-weight: 700;\n}\n\n.job-subtitle {\n font-size: 24px;\n margin-bottom: 25px;\n}\n\n/*=========================\nInfo Grid\n==========================*/\n\n.info-grid {\n display: grid;\n grid-template-columns: 1fr 1.3fr;\n gap: 25px;\n margin-top: 35px;\n}\n\n.left-column,\n.right-column {\n display: flex;\n flex-direction: column;\n gap: 20px;\n}\n\n.card {\n background: white;\n border: 3px solid var(--border);\n border-radius: 18px;\n padding: 22px;\n}\n\n.card h2 {\n margin-bottom: 12px;\n font-size: 34px;\n}\n\n.card h3 {\n margin-top: 12px;\n font-size: 28px;\n}\n\n.card p {\n line-height: 1.5;\n font-size: 20px;\n}\n\n/*=========================\nSalary\n==========================*/\n\n.salary {\n display: flex;\n justify-content: space-around;\n align-items: center;\n margin-top: 20px;\n}\n\n.salary-box {\n text-align: center;\n}\n\n.salary-box span {\n display: block;\n font-size: 18px;\n margin-bottom: 6px;\n}\n\n.salary-box h3 {\n font-size: 48px;\n}\n\n.salary-arrow {\n font-size: 70px;\n color: var(--blue);\n}\n\n/*=========================\nPathway\n==========================*/\n\n.pathway {\n text-align: center;\n font-size: 30px;\n line-height: 1.8;\n}\n\n.pathway-arrow {\n color: var(--blue);\n font-size: 42px;\n}\n\n/*=========================\nSchools\n==========================*/\n\n.school-list {\n margin-left: 30px;\n font-size: 24px;\n}\n\n.school-list li {\n margin: 8px 0;\n}\n\n/*=========================\nKnowledge Quiz\n==========================*/\n\n.quiz-box {\n margin-top: 35px;\n}\n\n.quiz-progress {\n height: 14px;\n background: #d9e4ff;\n border-radius: 20px;\n overflow: hidden;\n margin: 18px 0 30px;\n}\n\n.quiz-progress-bar {\n width: 33%;\n height: 100%;\n background: var(--blue);\n}\n\n.quiz-question {\n font-size: 40px;\n text-align: center;\n margin-bottom: 30px;\n}\n\n.quiz-options {\n display: flex;\n flex-direction: column;\n gap: 18px;\n}\n\n.quiz-options button {\n height: 70px;\n border: 3px solid var(--border);\n background: white;\n border-radius: 15px;\n font-size: 28px;\n cursor: pointer;\n transition: 0.25s;\n}\n\n.quiz-options button:hover {\n background: var(--blue-light);\n}\n\n/*=========================\nRelated Jobs\n==========================*/\n\n.related-section {\n margin-top: 45px;\n}\n\n.related-title {\n text-align: center;\n font-size: 48px;\n margin-bottom: 25px;\n}\n\n.related-wrapper {\n display: flex;\n align-items: center;\n gap: 20px;\n}\n\n.related-jobs {\n flex: 1;\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 20px;\n}\n\n.job-card {\n background: white;\n border: 2px solid var(--border);\n border-radius: 18px;\n overflow: hidden;\n transition: 0.25s;\n}\n\n.job-card:hover {\n transform: translateY(-5px);\n}\n\n.job-card img {\n width: 100%;\n height: 180px;\n object-fit: cover;\n}\n\n.job-card-content {\n padding: 15px;\n}\n\n.job-card h3 {\n font-size: 24px;\n margin-bottom: 8px;\n}\n\n.job-card p {\n font-size: 18px;\n line-height: 1.4;\n}\n\n.learn-more {\n display: block;\n text-align: right;\n margin-top: 12px;\n color: var(--blue);\n text-decoration: none;\n font-weight: bold;\n}\n\n.arrow-button {\n width: 55px;\n height: 55px;\n border: none;\n border-radius: 50%;\n background: var(--blue);\n color: white;\n font-size: 32px;\n cursor: pointer;\n}\n\n/*=========================\nResponsive\n==========================*/\n\n@media (max-width: 1000px) {\n .info-grid {\n grid-template-columns: 1fr;\n }\n\n .related-jobs {\n grid-template-columns: 1fr;\n }\n\n .job-title {\n font-size: 40px;\n }\n\n .job-subtitle {\n font-size: 20px;\n }\n\n .quiz-question {\n font-size: 30px;\n }\n\n .salary {\n flex-direction: column;\n gap: 20px;\n }\n\n .salary-arrow {\n transform: rotate(90deg);\n }\n}",[220],"0dd90b8a-53cb-4767-9b10-f172154fb98a","index.html","d0994b24-7a09-11f1-9176-1607ee4eb77e",81,["D",1784618596698],"\n\n \n \n \n Home\n \n \n \n \n \n \n \n \n \n \n\n

\n \n

\n $\"Book\"$ \n \n $\"Line\"$ \n \n \n $\"Star\"$ \n \n \n \n \n $\"Star\"$ \n \n

Find YOUR Future Career!

\n\n \n \n\n \n

Careers

Software Engineer

\n Design, build, and maintain software applications and systems\n that power the modern world.\n

\n \n

\n\n

Graphic Designer

\n Create visual concepts and stunning designs across digital\n media, branding, and print.\n

\n \n

\n\n

Social Worker

\n Support vulnerable individuals and communities to navigate\n challenges and access the services they need.\n

\n \n

\n\n

Digital Marketer

\n Create and execute campaigns across social media, SEO, and paid\n ads to grow brands and audiences.\n

\n \n

\n\n \n

Why did we create this?

\n In this era, many people, including teenagers, don't know what to\n do with their lives. So we decided to make this to help teenagers\n and people to find the job that is most suitable for them and the\n way to reach their goal.\n

\n asset / img\n

\n\n \n

Questions You Might Ask

\n \n Is this quiz accurate?\n \n \n Do I need to sign up to use Cureer?\n \n \n What age group is Cureer for?\n \n \n Can I retake the quiz?\n \n \n What do I do with the quiz result?\n \n

\n\n \n \n\n \n

Contact us

\n $\"Curve$ \n $\"Book\"$ \n $\"Star\"$ \n\n $\"Logo\"$ \n \n\n $\"Line\"$ \n $\"Curve$ \n \n $\"Circle$ \n

\n\n \n \n",[227],"c429ae45-04fe-48fd-a29c-a68891c5d928","untitled-folder-4253","3180c81a-870f-11f1-bdfc-1607ee4eb77e",110,["D",1784863474987],"directory",[234],"f40d1020-92c4-4933-af30-50ffbcd91767","img","6c27cdd4-7a0c-11f1-b9e1-1607ee4eb77e",24,["D",1783432926352],1,[241],"pulls","branches","forks","envVars",{"_254":61,"_256":61},"connections",{"_254":61,"_255":61},"count","unfilledCount","emptyCount",{"_43":240,"_33":241,"_31":242,"_145":-5,"_41":42,"_40":243,"_147":24,"_38":329,"_13":245,"_34":238,"_36":-5,"_23":26,"_151":-5,"_274":330,"_27":331},{"_43":321,"_33":322,"_31":323,"_145":242,"_41":42,"_40":324,"_147":24,"_38":325,"_13":182,"_34":20,"_36":326,"_23":26,"_151":-5,"_274":327,"_27":328},{"_43":313,"_33":314,"_31":315,"_145":242,"_41":42,"_40":316,"_147":24,"_38":317,"_13":216,"_34":20,"_36":318,"_23":26,"_151":-5,"_274":319,"_27":320},{"_43":233,"_33":234,"_31":235,"_145":-5,"_41":42,"_40":236,"_147":26,"_38":310,"_13":61,"_34":238,"_36":-5,"_23":26,"_151":-5,"_274":311,"_27":312},{"_43":226,"_33":227,"_31":228,"_145":-5,"_41":42,"_40":229,"_147":26,"_38":307,"_13":190,"_34":20,"_36":231,"_23":26,"_151":-5,"_274":308,"_27":309},{"_43":219,"_33":220,"_31":221,"_145":-5,"_41":42,"_40":222,"_147":26,"_38":304,"_13":216,"_34":20,"_36":224,"_23":26,"_151":-5,"_274":305,"_27":306},{"_43":211,"_33":212,"_31":213,"_145":-5,"_41":42,"_40":214,"_147":26,"_38":301,"_13":216,"_34":20,"_36":217,"_23":26,"_151":-5,"_274":302,"_27":303},{"_43":203,"_33":204,"_31":205,"_145":-5,"_41":42,"_40":206,"_147":24,"_38":298,"_13":208,"_34":20,"_36":209,"_23":26,"_151":-5,"_274":299,"_27":300},{"_43":196,"_33":197,"_31":198,"_145":-5,"_41":42,"_40":199,"_147":24,"_38":295,"_13":157,"_34":35,"_36":201,"_23":26,"_151":-5,"_274":296,"_27":297},{"_43":193,"_33":28,"_31":32,"_145":-5,"_41":42,"_40":14,"_147":26,"_38":292,"_13":61,"_34":35,"_36":37,"_23":26,"_151":-5,"_274":293,"_27":294},{"_43":185,"_33":186,"_31":187,"_145":-5,"_41":42,"_40":188,"_147":26,"_38":289,"_13":190,"_34":20,"_36":191,"_23":26,"_151":-5,"_274":290,"_27":291},{"_43":177,"_33":178,"_31":179,"_145":-5,"_41":42,"_40":180,"_147":26,"_38":286,"_13":182,"_34":20,"_36":183,"_23":26,"_151":-5,"_274":287,"_27":288},{"_43":169,"_33":170,"_31":171,"_145":-5,"_41":42,"_40":172,"_147":26,"_38":283,"_13":174,"_34":35,"_36":175,"_23":26,"_151":-5,"_274":284,"_27":285},{"_43":161,"_33":162,"_31":163,"_145":-5,"_41":42,"_40":164,"_147":26,"_38":280,"_13":166,"_34":35,"_36":167,"_23":26,"_151":-5,"_274":281,"_27":282},{"_43":153,"_33":154,"_31":56,"_145":-5,"_41":42,"_40":155,"_147":24,"_38":277,"_13":157,"_34":158,"_36":159,"_23":26,"_151":-5,"_274":278,"_27":279},{"_43":142,"_33":143,"_31":144,"_145":-5,"_41":42,"_40":146,"_147":26,"_38":273,"_13":149,"_34":20,"_36":150,"_23":26,"_151":-5,"_274":275,"_27":276},["D",1784618624638],"children",[],[143],["D",1784340559739],[],[154],["D",1784618657529],[],[162],["D",1784865563279],[],[170],["D",1785041494390],[],[178],["D",1785041504731],[],[186],["D",1785042730384],[],[28],["D",1784341281514],[],[197],["D",1783780243700],[],[204],["D",1785042633178],[],[212],["D",1785042684495],[],[220],["D",1784618596698],[],[227],["D",1784863474987],[],[234],"2a8510f2-d624-4984-bb07-57f1728acfbb","star.png","3f7929b6-7d88-11f1-8829-1607ee4eb77e",57,["D",1783816034223],"https://mail.google.com/mail/u/0?ui=2&ik=8f87c42fe1&attid=0.1&permmsgid=msg-f:1870426276623248436&th=19f516c9e4af6c34&view=fimg&realattid=19f516c4fcb67a517e71&disp=thd&attbid=ANGjdJ-iDzYnEu5Eeq5xrIbZrVT6XGJ7n6YqncQyq03UdX9NlA6i7B-LBFmqunj-gMi9R6wFMHwwJxSBlhRCFJkdcfg7A1MDb7Du-zbyiA6FjYVZloyAMpKva5-ciUs&ats=2524608000000&sz=w1920-h945&auditContext=forDisplay%3Dtrue",[],[241,314],"28a7080b-990d-45b7-9a00-1d18c1e5fc78","logo.png","207696e4-7a0d-11f1-85ed-1607ee4eb77e",62,["D",1783816454922],"https://lh3.googleusercontent.com/chat_attachment/AP1Ws4t2aMk8oHRwbWZ_SunZYo2EElET1IlXN3EMnwaHWoOwooROWciTo7UdXzmHTqkuAz38rkXhiSisT3fKD1Rewrdn0atuBHUoBksIWbF3z532xkJwSsWluiSbCgEDJ6F-eFPFExf1I5VYDw1tmYRLiUhsnqBWtstGo5goHcjZJ-pS-rdhGNGEV5dSgAa5tqxGJdnsGjZaGY6ZgJv50LnIajRS5pdTLgFVdFzk1PrffQyy2eeUhSWmkMMtsL2TVnLgPVXjI_DO8Jo6tb7h8cmt8klkBBFcionYh-BY12XNW09fXwMCYxUgT272L-toSDpFbaM=w1920-h945-rw",[],[241,322],["D",1783432926352],[258,259],[241],["D",1783431759081],["D",1789494036282],{"_98":97,"_106":102},{"_98":97,"_99":100,"_101":102,"_18":54,"_103":104,"_105":26},{"_13":87,"_33":88,"_43":42,"_89":44,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":-5,"_95":45,"_96":97},"ctx",{"_80":-5,"_125":370,"_371":372,"_373":374,"_375":26,"_376":26,"_377":26,"_378":24,"_379":-5,"_380":-7,"_381":-7,"_382":61,"_383":26,"_384":26,"_385":-5,"_386":26,"_387":26,"_388":26,"_389":-5},"ENV",{"_341":342,"_343":344,"_345":88,"_346":347,"_348":349,"_350":351,"_352":353,"_354":355,"_356":357,"_358":359,"_360":361,"_362":363,"_364":365,"_366":367,"_368":369},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","fdb67791413f4386b4dbf18f354029a617f6160f","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

${job.title}

${job.title}

Unable to load careers.

Find Your Dream Career

\n Question appears here\n

Your Job Matches

\n Other Careers You May Like\n

\n Accountant\n

Does this job match me?

Salary Expectation

\n RM0\n

\n RM0\n

Academic Pathway

Suggested Schools

Start Now

Test Your Job Knowledge

\n More Jobs Like This\n

Find YOUR Future Career!

Ready to discoveryour career path?

Careers

Software Engineer

Graphic Designer

Social Worker

Digital Marketer

Why did we create this?

Questions You Might Ask

Contact us

Ready to discover
your career path?

Diff · v128