| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>CareerMap: Personal Career Guidance Platform</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <script> |
| tailwind.config = { |
| theme: { |
| extend: { |
| colors: { |
| primary: '#E63946', |
| secondary: '#457B9D', |
| accent: '#1D3557', |
| light: '#F1FAEE', |
| background: '#A8DADC', |
| dark: '#1D3557' |
| } |
| } |
| } |
| } |
| </script> |
| <style> |
| .progress-bar { |
| transition: width 0.5s ease-in-out; |
| } |
| .question-card { |
| transition: transform 0.3s ease, box-shadow 0.3s ease; |
| } |
| .question-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
| } |
| .slider-thumb::-webkit-slider-thumb { |
| -webkit-appearance: none; |
| width: 25px; |
| height: 25px; |
| border-radius: 50%; |
| background: #1D3557; |
| cursor: pointer; |
| } |
| .pathway-card { |
| perspective: 1000px; |
| } |
| .pathway-inner { |
| transition: transform 0.6s; |
| transform-style: preserve-3d; |
| } |
| .pathway-card:hover .pathway-inner { |
| transform: rotateY(10deg) rotateX(5deg); |
| } |
| .subject-table { |
| display: grid; |
| grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); |
| gap: 1.5rem; |
| } |
| @media (max-width: 768px) { |
| .subject-table { |
| grid-template-columns: 1fr; |
| } |
| } |
| .tab-button { |
| transition: all 0.3s ease; |
| } |
| .tab-button:hover { |
| background-image: linear-gradient(to right, #457B9D, #1D3557); |
| } |
| .tabs-container { |
| position: relative; |
| } |
| .active-tab-indicator { |
| position: absolute; |
| bottom: 0; |
| height: 4px; |
| background-color: #E63946; |
| transition: left 0.3s ease, width 0.3s ease; |
| } |
| .intelligence-icon { |
| width: 60px; |
| height: 60px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| border-radius: 12px; |
| background: linear-gradient(135deg, #1D3557, #457B9D); |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); |
| } |
| .career-card { |
| transition: all 0.3s ease; |
| } |
| .career-card:hover { |
| transform: scale(1.05); |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
| } |
| .kenya-flag-theme { |
| background: linear-gradient(to bottom, |
| #000 33%, |
| #C1272D 33%, 66%, |
| #FFF 66%); |
| background-size: 100% 300%; |
| animation: flagAnimation 3s ease infinite alternate; |
| } |
| @keyframes flagAnimation { |
| 0% { background-position: 0 0; } |
| 100% { background-position: 0 100%; } |
| } |
| .page-transition { |
| animation: fadeIn 0.5s ease-in; |
| } |
| @keyframes fadeIn { |
| from { opacity: 0; transform: translateY(20px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
| </style> |
| </head> |
| <body class="bg-light min-h-screen"> |
| |
| <header class="bg-accent text-white shadow-xl"> |
| <div class="container mx-auto px-4 py-5 flex flex-col md:flex-row justify-between items-center"> |
| <div class="flex items-center space-x-3"> |
| <div class="bg-primary p-3 rounded-xl"> |
| <i class="fas fa-map-marked-alt text-2xl"></i> |
| </div> |
| <h1 class="text-2xl md:text-3xl font-bold">CareerMap</h1> |
| </div> |
| |
| <nav class="mt-4 md:mt-0"> |
| <ul class="flex flex-wrap justify-center gap-2 md:gap-6"> |
| <li><button onclick="showPage('home')" class="px-4 py-2 rounded-full bg-primary hover:bg-red-600 transition">Home</button></li> |
| <li><button onclick="startTest()" class="px-4 py-2 rounded-full hover:bg-secondary transition">Aptitude Test</button></li> |
| <li><button onclick="showPage('careers')" class="px-4 py-2 rounded-full hover:bg-secondary transition">Explore Careers</button></li> |
| <li><button onclick="showPage('subjects')" class="px-4 py-2 rounded-full hover:bg-secondary transition">Subject Combos</button></li> |
| </ul> |
| </nav> |
| </div> |
| </header> |
| |
| |
| <main class="container mx-auto px-4 py-8" id="content"> |
| |
| <div id="home" class="page-transition"> |
| <div class="text-center mb-12"> |
| <h2 class="text-3xl md:text-4xl font-bold mb-4 text-dark">Discover Your Career Pathway</h2> |
| <p class="text-lg text-gray-700 max-w-2xl mx-auto">Tailored guidance based on your unique strengths and Kenya's CBC curriculum. Find your ideal career path today.</p> |
| </div> |
| |
| |
| <div class="bg-gradient-to-r from-accent to-secondary rounded-2xl p-8 text-white mb-12"> |
| <div class="flex flex-col md:flex-row items-center"> |
| <div class="md:w-1/2 mb-8 md:mb-0"> |
| <h3 class="text-2xl md:text-3xl font-bold mb-4">Unlock Your Potential</h3> |
| <p class="mb-6">Our intelligent assessment analyzes your strengths across 9 intelligences to match you with ideal career pathways based on Kenya's CBC education system.</p> |
| <button onclick="startTest()" class="bg-primary hover:bg-red-600 px-6 py-3 rounded-full font-semibold transition"> |
| Start Your Aptitude Test <i class="fas fa-arrow-right ml-2"></i> |
| </button> |
| </div> |
| <div class="md:w-1/2 flex justify-center"> |
| <div class="bg-white rounded-full p-2"> |
| <div class="bg-gray-200 border-2 border-dashed rounded-xl w-64 h-64 flex items-center justify-center text-gray-500"> |
| <i class="fas fa-user-graduate text-5xl"></i> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16"> |
| <div class="bg-white rounded-xl shadow-lg p-6 flex flex-col items-center text-center"> |
| <div class="bg-primary text-white p-4 rounded-full mb-4"> |
| <i class="fas fa-brain text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-2">Multiple Intelligences</h3> |
| <p>Discover your unique strengths across 9 intelligence types to understand how you learn and work best.</p> |
| </div> |
| |
| <div class="bg-white rounded-xl shadow-lg p-6 flex flex-col items-center text-center"> |
| <div class="bg-secondary text-white p-4 rounded-full mb-4"> |
| <i class="fas fa-graduation-cap text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-2">CBC Aligned</h3> |
| <p>Career pathways perfectly matched to Kenya's Competency-Based Curriculum framework.</p> |
| </div> |
| |
| <div class="bg-white rounded-xl shadow-lg p-6 flex flex-col items-center text-center"> |
| <div class="bg-accent text-white p-4 rounded-full mb-4"> |
| <i class="fas fa-road text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-2">Clear Roadmap</h3> |
| <p>Get subject combination recommendations and career progression steps for your chosen path.</p> |
| </div> |
| </div> |
| |
| |
| <div class="mb-16"> |
| <h3 class="text-2xl font-bold mb-6 text-dark">How the Aptitude Test Works</h3> |
| <div class="bg-white rounded-xl shadow-md p-6 max-w-2xl mx-auto"> |
| <div class="flex items-center mb-4"> |
| <div class="intelligence-icon text-white"> |
| <i class="fas fa-music text-xl"></i> |
| </div> |
| <div class="ml-4"> |
| <h4 class="font-bold text-lg">Musical Intelligence</h4> |
| <p class="text-gray-600">Sensitivity to rhythm, tone, and melody</p> |
| </div> |
| </div> |
| |
| <div class="space-y-4"> |
| <div> |
| <p class="mb-2">How sensitive are you to rhythm, tone, and melody?</p> |
| <div class="flex items-center space-x-2"> |
| <span class="text-sm">Low</span> |
| <input type="range" min="0" max="10" value="7" class="w-full slider-thumb"> |
| <span class="text-sm">High</span> |
| </div> |
| </div> |
| |
| <div> |
| <p class="mb-2">Do you enjoy singing, playing an instrument, or composing music?</p> |
| <div class="flex flex-wrap gap-2 mt-2"> |
| <button class="px-4 py-2 rounded-full bg-gray-200 text-sm">Not at all</button> |
| <button class="px-4 py-2 rounded-full bg-gray-200 text-sm">A little</button> |
| <button class="px-4 py-2 rounded-full bg-secondary text-white text-sm">Moderately</button> |
| <button class="px-4 py-2 rounded-full bg-gray-200 text-sm">A lot</button> |
| <button class="px-4 py-2 rounded-full bg-gray-200 text-sm">Very much</button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div id="test" class="hidden page-transition"> |
| |
| </div> |
| |
| |
| <div id="results" class="hidden page-transition"> |
| |
| </div> |
| |
| |
| <div id="careers" class="hidden page-transition"> |
| <h2 class="text-3xl font-bold mb-8 text-dark">Career Pathways Explorer</h2> |
| |
| <div class="tabs-container mb-8"> |
| <div class="flex flex-wrap gap-2 mb-6"> |
| <button onclick="switchCareerTab('stem')" class="tab-button bg-secondary text-white px-6 py-2 rounded-t-lg">STEM Pathway</button> |
| <button onclick="switchCareerTab('social')" class="tab-button bg-primary text-white px-6 py-2 rounded-t-lg">Social Sciences</button> |
| <button onclick="switchCareerTab('arts')" class="tab-button bg-accent text-white px-6 py-2 rounded-t-lg">Arts & Sports</button> |
| </div> |
| <div id="active-tab-indicator" class="active-tab-indicator" style="width: 120px; left: 0px;"></div> |
| </div> |
| |
| <div id="stem-careers"> |
| <div class="bg-white rounded-xl shadow-md p-6 mb-8"> |
| <div class="flex items-start"> |
| <div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16" style="min-width: 4rem;"></div> |
| <div class="ml-4"> |
| <h3 class="text-2xl font-bold mb-2">Science, Technology, Engineering & Mathematics</h3> |
| <p class="text-gray-700 mb-4">This pathway is for students passionate about scientific inquiry, technological innovation, problem-solving, and mathematical reasoning.</p> |
| </div> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-8"> |
| <div class="pathway-card"> |
| <div class="pathway-inner bg-gray-50 rounded-xl p-5 border border-gray-200"> |
| <h4 class="font-bold text-lg mb-3 flex items-center"> |
| <span class="mr-2 text-secondary"><i class="fas fa-flask"></i></span> |
| Pure Sciences |
| </h4> |
| <ul class="space-y-2"> |
| <li class="flex items-center"><span class="mr-2 text-green-500"><i class="fas fa-check-circle"></i></span> Science Researcher</li> |
| <li class="flex items-center"><span class="mr-2 text-green-500"><i class="fas fa-check-circle"></i></span> Physicist</li> |
| <li class="flex items-center"><span class="mr-2 text-green-500"><i class="fas fa-check-circle"></i></span> Chemist</li> |
| <li class="flex items-center"><span class="mr-2 text-green-500"><i class="fas fa-check-circle"></i></span> Biologist</li> |
| </ul> |
| </div> |
| </div> |
| |
| <div class="pathway-card"> |
| <div class="pathway-inner bg-gray-50 rounded-xl p-5 border border-gray-200"> |
| <h4 class="font-bold text-lg mb-3 flex items-center"> |
| <span class="mr-2 text-secondary"><i class="fas fa-microchip"></i></span> |
| Career & Technology |
| </h4> |
| <ul class="space-y-2"> |
| <li class="flex items-center"><span class="mr-2 text-green-500"><i class="fas fa-check-circle"></i></span> Software Developer</li> |
| <li class="flex items-center"><span class="mr-2 text-green-500"><i class="fas fa-check-circle"></i></span> Data Scientist</li> |
| <li class="flex items-center"><span class="mr-2 text-green-500"><i class="fas fa-check-circle"></i></span> Cybersecurity Analyst</li> |
| <li class="flex items-center"><span class="mr-2 text-green-500"><i class="fas fa-check-circle"></i></span> Web Developer</li> |
| </ul> |
| </div> |
| </div> |
| |
| <div class="pathway-card"> |
| <div class="pathway-inner bg-gray-50 rounded-xl p-5 border border-gray-200"> |
| <h4 class="font-bold text-lg mb-3 flex items-center"> |
| <span class="mr-2 text-secondary"><i class="fas fa-tools"></i></span> |
| Engineering |
| </h4> |
| <ul class="space-y-2"> |
| <li class="flex items-center"><span class="mr-2 text-green-500"><i class="fas fa-check-circle"></i></span> Industrial Engineer</li> |
| <li class="flex items-center"><span class="mr-2 text-green-500"><i class="fas fa-check-circle"></i></span> Civil Engineer</li> |
| <li class="flex items-center"><span class="mr-2 text-green-500"><i class="fas fa-check-circle"></i></span> Electrical Engineer</li> |
| <li class="flex items-center"><span class="mr-2 text-green-500"><i class="fas fa-check-circle"></i></span> Mechanical Engineer</li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div id="social-careers" class="hidden"> |
| <div class="bg-white rounded-xl shadow-md p-6 mb-8"> |
| <div class="flex items-start"> |
| <div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16" style="min-width: 4rem;"></div> |
| <div class="ml-4"> |
| <h3 class="text-2xl font-bold mb-2">Social Sciences</h3> |
| <p class="text-gray-700 mb-4">For students interested in human behavior, societies, cultures, and governance. Cultivates analytical skills and understanding of social structures.</p> |
| </div> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-8"> |
| <div class="pathway-card"> |
| <div class="pathway-inner bg-gray-50 rounded-xl p-5 border border-gray-200"> |
| <h4 class="font-bold text-lg mb-3 flex items-center"> |
| <span class="mr-2 text-primary"><i class="fas fa-book"></i></span> |
| Humanities |
| </h4> |
| <ul class="space-y-2"> |
| <li class="flex items-center"><span class="mr-2 text-green-500"><i class="fas fa-check-circle"></i></span> Historian</li> |
| <li class="flex items-center"><span class="mr-2 text-green-500"><i class="fas fa-check-circle"></i></span> Philosopher</li> |
| <li class="flex items-center"><span class="mr-2 text-green-500"><i class="fas fa-check-circle"></i></span> Anthropologist</li> |
| <li class="flex items-center"><span class="mr-2 text-green-500"><i class="fas fa-check-circle"></i></span> Legal Researcher</li> |
| </ul> |
| </div> |
| </div> |
| |
| <div class="pathway-card"> |
| <div class="pathway-inner bg-gray-50 rounded-xl p-5 border border-gray-200"> |
| <h4 class="font-bold text-lg mb-3 flex items-center"> |
| <span class="mr-2 text-primary"><i class="fas fa-language"></i></span> |
| Languages |
| </h4> |
| <ul class="space-y-2"> |
| <li class="flex items-center"><span class="mr-2 text-green-500"><i class="fas fa-check-circle"></i></span> Translator</li> |
| <li class="flex items-center"><span class="mr-2 text-green-500"><i class="fas fa-check-circle"></i></span> Journalist</li> |
| <li class="flex items-center"><span class="mr-2 text-green-500"><i class="fas fa-check-circle"></i></span> Editor</li> |
| <li class="flex items-center"><span class="mr-2 text-green-500"><i class="fas fa-check-circle"></i></span> Language Teacher</li> |
| </ul> |
| </div> |
| </div> |
| |
| <div class="pathway-card"> |
| <div class="pathway-inner bg-gray-50 rounded-xl p-5 border border-gray-200"> |
| <h4 class="font-bold text-lg mb-3 flex items-center"> |
| <span class="mr-2 text-primary"><i class="fas fa-briefcase"></i></span> |
| Business Studies |
| </h4> |
| <ul class="space-y-2"> |
| <li class="flex items-center"><span class="mr-2 text-green-500"><i class="fas fa-check-circle"></i></span> Entrepreneur</li> |
| <li class="flex items-center"><span class="mr-2 text-green-500"><i class="fas fa-check-circle"></i></span> Financial Analyst</li> |
| <li class="flex items-center"><span class="mr-2 text-green-500"><i class="fas fa-check-circle"></i></span> Marketing Specialist</li> |
| <li class="flex items-center"><span class="mr-2 text-green-500"><i class="fas fa-check-circle"></i></span> Human Resources</li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div id="subjects" class="hidden page-transition"> |
| <h2 class="text-3xl font-bold mb-8 text-dark">Senior School Subject Combinations</h2> |
| |
| <div class="bg-white rounded-xl shadow-md p-6 mb-8"> |
| <p class="text-gray-700 mb-6">This section lists the various subject combinations available in Kenyan Senior Schools under the CBC, along with their corresponding pathways.</p> |
| |
| <div class="subject-table"> |
| |
| </div> |
| </div> |
| </div> |
| </main> |
| |
| |
| <footer class="bg-accent text-white py-8"> |
| <div class="container mx-auto px-4"> |
| <div class="flex flex-col md:flex-row justify-between items-center"> |
| <div class="mb-6 md:mb-0"> |
| <div class="flex items-center mb-4"> |
| <div class="bg-primary p-2 rounded-lg"> |
| <i class="fas fa-map-marked-alt text-xl"></i> |
| </div> |
| <h3 class="text-xl font-bold ml-2">CareerMap</h3> |
| </div> |
| <p class="text-gray-300">Personalized career guidance aligned with Kenya's CBC curriculum</p> |
| </div> |
| |
| <div> |
| <ul class="flex space-x-4"> |
| <li><a href="#" class="text-gray-300 hover:text-white"><i class="fab fa-facebook text-xl"></i></a></li> |
| <li><a href="#" class="text-gray-300 hover:text-white"><i class="fab fa-twitter text-xl"></i></a></li> |
| <li><a href="#" class="text-gray-300 hover:text-white"><i class="fab fa-instagram text-xl"></i></a></li> |
| </ul> |
| </div> |
| </div> |
| |
| <div class="border-t border-gray-700 mt-6 pt-6 text-center text-gray-400"> |
| <p>© 2023 CareerMap. All rights reserved.</p> |
| </div> |
| </div> |
| </footer> |
| |
| <script> |
| // Sample data |
| const intelligencesData = [ |
| { |
| name: 'Musical Intelligence', |
| description: 'Sensitive to rhythm, tone, and melody; enjoys listening to and creating music.', |
| questions: [ |
| {text: "How sensitive are you to rhythm, tone, and melody?", type: "slider"}, |
| {text: "Do you enjoy singing, playing an instrument, or composing music?", type: "radio", options: ["Not at all", "A little", "Moderately", "A lot", "Very much"]}, |
| {text: "How easily can you recall tunes and songs accurately?", type: "slider"}, |
| {text: "Are you good at identifying differences in pitch, rhythm, and melody?", type: "radio", options: ["Not at all", "Somewhat", "Moderately", "Very", "Extremely"]} |
| ] |
| }, |
| { |
| name: 'Logical-Mathematical Intelligence', |
| description: 'Enjoys problem-solving and puzzles; thrives on logic puzzles, strategy games, or math problems. Thinks in abstract and logical patterns.', |
| questions: [ |
| {text: "How much do you enjoy solving complex problems or puzzles?", type: "slider"}, |
| {text: "Do you find it easy to identify patterns and relationships?", type: "radio", options: ["Rarely", "Sometimes", "Often", "Very Often", "Always"]}, |
| {text: "How strong are your reasoning and critical thinking skills in analyzing situations?", type: "slider"}, |
| {text: "Do you enjoy conducting experiments or exploring scientific ideas?", type: "radio", options: ["Strongly Dislike", "Dislike", "Neutral", "Enjoy", "Strongly Enjoy"]} |
| ] |
| }, |
| { |
| name: 'Linguistic Intelligence', |
| description: 'Enjoys reading and writing; prefers books, storytelling, and has a rich vocabulary.', |
| questions: [ |
| {text: "How much do you enjoy reading, writing, and storytelling?", type: "slider"}, |
| {text: "Are you skilled at articulating your thoughts clearly and persuasively?", type: "radio", options: ["Not at all", "Somewhat", "Moderately", "Very", "Extremely"]}, |
| {text: "Do you enjoy word games and puzzles like crosswords or Scrabble?", type: "radio", options: ["Strongly Dislike", "Dislike", "Neutral", "Enjoy", "Strongly Enjoy"]}, |
| {text: "How easily do you remember names, places, and trivia?", type: "slider"} |
| ] |
| } |
| ]; |
| |
| const careerPathwaysData = [ |
| { |
| name: 'STEM Pathway', |
| description: 'This pathway is tailored for students passionate about scientific inquiry, technological innovation, problem-solving, and mathematical reasoning. It prepares learners for careers in rapidly evolving technical and scientific fields.', |
| subPathways: [ |
| { |
| name: 'Pure Sciences', |
| careers: ['Science Researcher', 'Scientist', 'Mathematician', 'Physicist', 'Chemist', 'Biologist', 'Environmentalist'] |
| }, |
| { |
| name: 'Applied Sciences', |
| careers: ['Agricultural Scientist', 'Actuarial Scientist', 'Agricultural Engineer', 'Computer Engineer', 'Food Scientist', 'Technologist', 'Geoscientist'] |
| }, |
| { |
| name: 'Career and Technology Studies', |
| careers: ['Software Developer', 'Web Developer', 'Data Scientist', 'Cybersecurity Analyst', 'Network Administrator', 'Systems Analyst', 'User Experience (UX) Designer'] |
| } |
| ] |
| }, |
| { |
| name: 'Social Sciences Pathway', |
| description: 'This pathway is for students interested in human behavior, societies, cultures, and governance. It cultivates analytical skills, empathy, and an understanding of social structures.', |
| subPathways: [ |
| { |
| name: 'Business Studies', |
| careers: ['Entrepreneur', 'Accountant', 'Financial Analyst', 'Business Manager', 'Marketing Specialist', 'Human Resources Manager', 'Business Analyst'] |
| }, |
| { |
| name: 'Languages', |
| careers: ['Translator', 'Interpreter', 'Writer', 'Editor', 'Journalist', 'Language Teacher', 'Copywriter'] |
| }, |
| { |
| name: 'Humanities', |
| careers: ['Historian', 'Archaeologist', 'Philosopher', 'Ethicist', 'Anthropologist', 'Sociologist', 'Legal Researcher'] |
| } |
| ] |
| } |
| ]; |
| |
| const subjectCombinations = [ |
| {sNo: "1", pathway: "ARTS & SPORTS", track: "ARTS", subjects: ["Fine Arts", "Theatre & Film", "Arabic"]}, |
| {sNo: "47", pathway: "ARTS & SPORTS", track: "SPORTS & RECREATION", subjects: ["Sports & Recreation", "Biology", "Arabic"]}, |
| {sNo: "73", pathway: "SOCIAL SCIENCES", track: "HUMANTIES & BUSINESS STUDIES", subjects: ["Business Studies", "History & Citizenship", "Arabic"]}, |
| {sNo: "210", pathway: "STEM", track: "APPLIED SCIENCES", subjects: ["Agriculture", "Business studies", "Aviation"]}, |
| {sNo: "304", pathway: "STEM", track: "PURE SCIENCES", subjects: ["Advanced Mathematics", "Biology", "Agriculture"]} |
| ]; |
| |
| // App state |
| const appState = { |
| currentPage: 'home', |
| currentQuestionIndex: 0, |
| answers: {}, |
| results: [] |
| }; |
| |
| // Page navigation |
| function showPage(pageId) { |
| document.querySelectorAll('.page-transition').forEach(el => el.classList.add('hidden')); |
| document.getElementById(pageId).classList.remove('hidden'); |
| appState.currentPage = pageId; |
| } |
| |
| function switchCareerTab(tabId) { |
| document.querySelectorAll('#stem-careers, #social-careers').forEach(el => el.classList.add('hidden')); |
| document.getElementById(`${tabId}-careers`).classList.remove('hidden'); |
| |
| // Update tab indicator position |
| const tabIndex = ['stem', 'social', 'arts'].indexOf(tabId); |
| const indicator = document.getElementById('active-tab-indicator'); |
| indicator.style.width = '120px'; |
| indicator.style.left = `${tabIndex * 120}px`; |
| } |
| |
| // Start the test |
| function startTest() { |
| appState.currentQuestionIndex = 0; |
| appState.answers = {}; |
| renderTest(); |
| showPage('test'); |
| } |
| |
| // Render test page |
| function renderTest() { |
| const testPage = document.getElementById('test'); |
| if (!testPage) return; |
| |
| const intelligence = intelligencesData[appState.currentQuestionIndex]; |
| const questionsHTML = intelligence.questions.map((question, qIndex) => { |
| return renderQuestion(question, qIndex, intelligence.name); |
| }).join(''); |
| |
| // Calculate progress |
| const progress = Math.round((appState.currentQuestionIndex + 1) / intelligencesData.length * 100); |
| |
| testPage.innerHTML = ` |
| <div class="max-w-3xl mx-auto"> |
| <div class="flex justify-between items-center mb-6"> |
| <h2 class="text-3xl font-bold text-dark">Aptitude Test</h2> |
| <div class="text-lg text-gray-600"> |
| ${appState.currentQuestionIndex + 1} of ${intelligencesData.length} |
| </div> |
| </div> |
| |
| <div class="mb-6"> |
| <div class="w-full bg-gray-200 rounded-full h-4 mb-1"> |
| <div class="progress-bar bg-secondary h-4 rounded-full" style="width: ${progress}%"></div> |
| </div> |
| </div> |
| |
| <div class="bg-white rounded-xl shadow-md p-6 mb-8 question-card"> |
| <div class="flex items-center mb-6"> |
| <div class="intelligence-icon text-white"> |
| <i class="fas fa-${getIntelligenceIcon(intelligence.name)}"></i> |
| </div> |
| <div class="ml-4"> |
| <h3 class="text-2xl font-bold">${intelligence.name}</h3> |
| <p class="text-gray-600">${intelligence.description}</p> |
| </div> |
| </div> |
| |
| <div class="space-y-8"> |
| ${questionsHTML} |
| </div> |
| </div> |
| |
| <div class="flex justify-between"> |
| <button onclick="handlePrevQuestion()" class="px-6 py-3 bg-gray-300 text-gray-800 rounded-lg hover:bg-gray-400 transition ${appState.currentQuestionIndex === 0 ? 'opacity-50 cursor-not-allowed' : ''}" ${appState.currentQuestionIndex === 0 ? 'disabled' : ''}> |
| <i class="fas fa-arrow-left mr-2"></i> Previous |
| </button> |
| |
| ${appState.currentQuestionIndex === intelligencesData.length - 1 ? |
| `<button onclick="calculateResults()" class="px-6 py-3 bg-primary text-white rounded-lg hover:bg-red-600 transition">See Results</button>` : |
| `<button onclick="handleNextQuestion()" class="px-6 py-3 bg-primary text-white rounded-lg hover:bg-red-600 transition">Next <i class="fas fa-arrow-right ml-2"></i></button>` |
| } |
| </div> |
| </div> |
| `; |
| } |
| |
| // Render a question (either slider or radio) |
| function renderQuestion(question, qIndex, intelligenceName) { |
| if (question.type === 'slider') { |
| return ` |
| <div> |
| <p class="font-medium mb-4 text-gray-800">${question.text}</p> |
| <div class="flex items-center space-x-4"> |
| <span class="text-sm text-gray-600">Not at all</span> |
| <input type="range" min="0" max="10" value="${getAnswer(intelligenceName, qIndex) || 0}" |
| oninput="updateAnswer(${qIndex}, ${JSON.stringify(intelligenceName).replace(/"/g, '"')}, this.value)" |
| class="w-full slider-thumb"> |
| <span class="text-sm text-gray-600">Extremely</span> |
| </div> |
| <div class="text-right mt-1 text-sm font-medium text-secondary">${getAnswer(intelligenceName, qIndex) || 0}/10</div> |
| </div> |
| `; |
| } else if (question.type === 'radio') { |
| return ` |
| <div> |
| <p class="font-medium mb-4 text-gray-800">${question.text}</p> |
| <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-5 gap-2"> |
| ${question.options.map((option, idx) => ` |
| <button onclick="updateAnswer(${qIndex}, ${JSON.stringify(intelligenceName).replace(/"/g, '"')}, ${JSON.stringify(option).replace(/"/g, '"')})" |
| class="py-3 px-4 rounded-lg text-sm font-medium ${isOptionSelected(intelligenceName, qIndex, option) ? |
| 'bg-secondary text-white' : 'bg-gray-100 hover:bg-gray-200 text-gray-800'}"> |
| ${option} |
| </button> |
| `).join('')} |
| </div> |
| </div> |
| `; |
| } |
| return ''; |
| } |
| |
| // Get intelligence icon |
| function getIntelligenceIcon(name) { |
| if (name.includes('Musical')) return 'music'; |
| if (name.includes('Logical') || name.includes('Mathematical')) return 'calculator'; |
| if (name.includes('Linguistic')) return 'language'; |
| if (name.includes('Bodily')) return 'running'; |
| if (name.includes('Spatial')) return 'draw-polygon'; |
| if (name.includes('Interpersonal')) return 'user-friends'; |
| if (name.includes('Intrapersonal')) return 'user'; |
| if (name.includes('Naturalistic')) return 'leaf'; |
| if (name.includes('Existential')) return 'question'; |
| return 'brain'; |
| } |
| |
| // Answer handling |
| function getAnswer(intelligenceName, qIndex) { |
| return appState.answers[intelligenceName]?.[qIndex]; |
| } |
| |
| function isOptionSelected(intelligenceName, qIndex, option) { |
| return appState.answers[intelligenceName]?.[qIndex] === option; |
| } |
| |
| function updateAnswer(qIndex, intelligenceName, value) { |
| if (!appState.answers[intelligenceName]) { |
| appState.answers[intelligenceName] = {}; |
| } |
| appState.answers[intelligenceName][qIndex] = value; |
| |
| // Re-render the current question |
| const testPage = document.getElementById('test'); |
| if (testPage && appState.currentPage === 'test') { |
| renderTest(); |
| } |
| } |
| |
| // Question navigation |
| function handlePrevQuestion() { |
| if (appState.currentQuestionIndex > 0) { |
| appState.currentQuestionIndex--; |
| renderTest(); |
| } |
| } |
| |
| function handleNextQuestion() { |
| if (appState.currentQuestionIndex < intelligencesData.length - 1) { |
| appState.currentQuestionIndex++; |
| renderTest(); |
| } |
| } |
| |
| // Calculate results |
| function calculateResults() { |
| // Simplified result calculation |
| appState.results = [ |
| { name: 'Logical-Mathematical Intelligence', score: 92 }, |
| { name: 'Linguistic Intelligence', score: 87 }, |
| { name: 'Musical Intelligence', score: 78 } |
| ]; |
| |
| renderResults(); |
| showPage('results'); |
| } |
| |
| // Render results page |
| function renderResults() { |
| const resultsPage = document.getElementById('results'); |
| if (!resultsPage) return; |
| |
| const resultsHTML = appState.results.map((result, idx) => ` |
| <div class="bg-white rounded-xl shadow-md p-6 mb-6"> |
| <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between mb-4"> |
| <div class="flex items-center mb-4 sm:mb-0"> |
| <div class="bg-${idx === 0 ? 'primary' : idx === 1 ? 'secondary' : 'accent'} text-white p-3 rounded-lg mr-4"> |
| <i class="fas fa-${getIntelligenceIcon(result.name)} text-xl"></i> |
| </div> |
| <h3 class="text-xl font-bold">${result.name}</h3> |
| </div> |
| <div class="bg-gray-100 px-4 py-2 rounded-full font-bold text-dark"> |
| ${result.score}% |
| </div> |
| </div> |
| |
| <div class="mb-4"> |
| <p>${getIntelligenceDescription(result.name)}</p> |
| </div> |
| |
| <div class="mt-4"> |
| <h4 class="font-semibold text-lg mb-2">Suggested Career Pathways:</h4> |
| <ul class="grid grid-cols-1 md:grid-cols-3 gap-2"> |
| ${getCareersForIntelligence(result.name).map(career => ` |
| <li class="bg-gray-50 p-3 rounded-lg text-center font-medium career-card"> |
| ${career} |
| </li> |
| `).join('')} |
| </ul> |
| </div> |
| </div> |
| `).join(''); |
| |
| resultsPage.innerHTML = ` |
| <div class="max-w-3xl mx-auto"> |
| <h2 class="text-3xl font-bold text-dark mb-6">Your Aptitude Results</h2> |
| |
| <div class="mb-10 text-center"> |
| <div class="inline-flex items-center bg-primary bg-opacity-10 px-6 py-4 rounded-full mb-6"> |
| <i class="fas fa-star text-yellow-500 text-2xl mr-3"></i> |
| <p class="text-lg text-dark font-medium">Based on your responses, here are your top intelligence areas</p> |
| </div> |
| <div class="bg-gradient-to-r from-accent to-secondary h-2 rounded-full"></div> |
| </div> |
| |
| ${resultsHTML} |
| |
| <div class="flex flex-wrap justify-center gap-4 mt-12"> |
| <button onclick="showPage('careers')" class="px-6 py-3 bg-accent text-white rounded-lg hover:bg-indigo-800 transition"> |
| Explore Career Paths <i class="fas fa-road ml-2"></i> |
| </button> |
| <button onclick="startTest()" class="px-6 py-3 bg-secondary text-white rounded-lg hover:bg-blue-700 transition"> |
| Retake Test <i class="fas fa-redo ml-2"></i> |
| </button> |
| <button onclick="showPage('subjects')" class="px-6 py-3 bg-gray-700 text-white rounded-lg hover:bg-gray-800 transition"> |
| View Subject Combos <i class="fas fa-book ml-2"></i> |
| </button> |
| </div> |
| </div> |
| `; |
| } |
| |
| // Helper functions |
| function getIntelligenceDescription(name) { |
| if (name.includes('Musical')) return 'You have a strong sensitivity to rhythm, tone, and melody. You likely enjoy creating or appreciating music and can easily recall tunes.'; |
| if (name.includes('Logical')) return 'You excel in problem-solving, abstract thinking, and mathematical reasoning. You likely enjoy puzzles, strategy games, and scientific concepts.'; |
| if (name.includes('Linguistic')) return 'You have strong verbal abilities, enjoy reading and writing, and have a rich vocabulary. You likely excel in storytelling and word games.'; |
| return 'Description not available'; |
| } |
| |
| function getCareersForIntelligence(name) { |
| if (name.includes('Musical')) return ['Musician', 'Composer', 'Music Teacher', 'Sound Engineer']; |
| if (name.includes('Logical')) return ['Data Scientist', 'Software Developer', 'Engineer', 'Mathematician']; |
| if (name.includes('Linguistic')) return ['Writer', 'Journalist', 'Translator', 'Editor']; |
| return ['Career options not available']; |
| } |
| |
| // Render subject combinations on page display |
| document.getElementById('subjects').addEventListener('DOMContentLoaded', renderSubjects); |
| |
| function renderSubjects() { |
| const container = document.querySelector('.subject-table'); |
| if (!container) return; |
| |
| container.innerHTML = subjectCombinations.map(subject => ` |
| <div class="bg-gray-50 rounded-xl p-5 border border-gray-200"> |
| <div class="flex justify-between items-start mb-3"> |
| <span class="px-3 py-1 rounded-full text-xs font-medium |
| ${subject.pathway === 'STEM' ? 'bg-secondary text-white' : |
| subject.pathway === 'SOCIAL SCIENCES' ? 'bg-primary text-white' : |
| subject.pathway === 'ARTS & SPORTS' ? 'bg-accent text-white' : 'bg-gray-300'}"> |
| ${subject.pathway} |
| </span> |
| <span class="text-gray-500 text-sm">${subject.sNo}</span> |
| </div> |
| <h4 class="font-bold mb-2">${subject.track}</h4> |
| <ul class="mt-3 space-y-2"> |
| ${subject.subjects.map(sub => ` |
| <li class="flex items-center"> |
| <i class="fas fa-bookmark text-xs text-secondary mr-2"></i> |
| ${sub} |
| </li> |
| `).join('')} |
| </ul> |
| </div> |
| `).join(''); |
| } |
| |
| // Initialize tab positions |
| document.addEventListener('DOMContentLoaded', () => { |
| renderSubjects(); |
| switchCareerTab('stem'); |
| }); |
| </script> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Araptoo/cbc" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
