Spaces:

Araptoo
/

cbc

Running

File size: 38,661 Bytes

<!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 Section -->
  <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 Content -->
  <main class="container mx-auto px-4 py-8" id="content">
    <!-- Home Page -->
    <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>
      
      <!-- Hero Section -->
      <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>
      
      <!-- Key Benefits -->
      <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>
      
      <!-- Test Preview -->
      <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>
    
    <!-- Aptitude Test Page -->
    <div id="test" class="hidden page-transition">
      <!-- Test content will be rendered dynamically via JavaScript -->
    </div>
    
    <!-- Results Page -->
    <div id="results" class="hidden page-transition">
      <!-- Results content will be rendered dynamically via JavaScript -->
    </div>
    
    <!-- Careers Page -->
    <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>
    
    <!-- Subjects Page -->
    <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">
          <!-- Subject combinations will be loaded dynamically via JavaScript -->
        </div>
      </div>
    </div>
  </main>
  
  <!-- Footer -->
  <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>&copy; 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, '&quot;')}, 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, '&quot;')}, ${JSON.stringify(option).replace(/"/g, '&quot;')})"
                  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>