ÿþ<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Routera Online Exam - NEET Biology</title> <link href="logo1.jpg" rel="icon"> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> <style> :root { --primary-color: #2e7d32; --secondary-color: #1b5e20; --accent-color: #7cb342; --light-color: #f8f9fa; --dark-color: #212529; --success-color: #4bb543; --danger-color: #ff3333; --warning-color: #ffcc00; } * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Poppins', sans-serif; } body { background: linear-gradient(135deg, #f5f7fa 0%, #e8f5e9 100%); min-height: 100vh; padding: 20px; } .hidden { display: none; } .container { background-color: #fff; padding: 30px; border-radius: 15px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); width: 100%; max-width: 1000px; margin: 20px auto; transition: all 0.3s ease; } h1, h2, h3, h4 { color: var(--dark-color); margin-bottom: 20px; } h1 { text-align: center; color: var(--primary-color); font-size: 2.2rem; margin-bottom: 30px; position: relative; padding-bottom: 10px; } h1::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 100px; height: 3px; background: var(--accent-color); border-radius: 3px; } h2 { font-size: 1.5rem; color: var(--secondary-color); } select, input[type="checkbox"], input[type="radio"] { margin-right: 10px; } select { width: 100%; padding: 12px 15px; border: 2px solid #ddd; border-radius: 8px; font-size: 1rem; transition: all 0.3s; margin-bottom: 20px; } select:focus { border-color: var(--primary-color); outline: none; box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.2); } label { display: inline-flex; align-items: center; margin-bottom: 12px; cursor: pointer; transition: all 0.2s; padding: 8px 12px; border-radius: 8px; } label:hover { background-color: rgba(46, 125, 50, 0.05); } input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; accent-color: var(--primary-color); } .btn { padding: 12px 25px; border: none; background-color: var(--primary-color); color: white; border-radius: 8px; cursor: pointer; font-size: 1rem; font-weight: 500; transition: all 0.3s; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); display: inline-block; text-align: center; margin: 10px 5px; } .btn:hover { background-color: var(--secondary-color); transform: translateY(-2px); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); } .btn:active { transform: translateY(0); } .btn-secondary { background-color: #6c757d; } .btn-secondary:hover { background-color: #5a6268; } .btn-danger { background-color: var(--danger-color); } .btn-danger:hover { background-color: #e60000; } .btn-success { background-color: var(--success-color); } .btn-success:hover { background-color: #3aa33e; } .navigation-buttons { display: flex; justify-content: space-between; margin-top: 30px; } .question { margin-bottom: 25px; padding: 20px; background-color: #f8f9fa; border-radius: 10px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); } .question p { font-size: 1.1rem; margin-bottom: 15px; font-weight: 500; color: var(--dark-color); } .option { display: flex; align-items: center; margin-bottom: 10px; padding: 10px 15px; border-radius: 8px; background-color: white; border: 1px solid #eee; transition: all 0.2s; } .option:hover { border-color: var(--accent-color); background-color: rgba(124, 179, 66, 0.05); } .option input[type="radio"]:checked + label { font-weight: 600; color: var(--primary-color); } #timer { font-size: 1.3rem; font-weight: 600; padding: 10px 20px; background-color: var(--dark-color); color: white; border-radius: 50px; display: inline-block; margin-bottom: 20px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); } #time.warning { color: var(--warning-color); animation: pulse 1s infinite; } #time.danger { color: var(--danger-color); animation: pulse 0.5s infinite; } @keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } } .divider { height: 2px; background: linear-gradient(to right, transparent, var(--accent-color), transparent); margin: 20px 0; border: none; } .results-card { background-color: white; border-radius: 15px; padding: 30px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); margin-bottom: 30px; text-align: center; } .score { font-size: 3rem; font-weight: 700; color: var(--primary-color); margin: 20px 0; } .progress-container { width: 100%; height: 20px; background-color: #e9ecef; border-radius: 10px; margin: 20px 0; overflow: hidden; } .progress-bar { height: 100%; background: linear-gradient(to right, var(--accent-color), var(--primary-color)); border-radius: 10px; transition: width 0.5s ease; } .summary-item { margin-bottom: 30px; padding: 20px; background-color: white; border-radius: 10px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); } .correct-answer { color: var(--success-color); font-weight: 600; } .user-correct { color: var(--success-color); font-weight: 600; } .user-incorrect { color: var(--danger-color); font-weight: 600; text-decoration: line-through; } .chapter-selection-container { background-color: white; padding: 25px; border-radius: 15px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); margin-bottom: 30px; } .chapter-list { columns: 2; column-gap: 30px; } .marks-list { background-color: #f8f9fa; padding: 20px; border-radius: 10px; margin: 20px 0; } .marks-list label { display: block; margin-bottom: 15px; padding: 15px; background-color: white; border-radius: 8px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); transition: all 0.3s; } .marks-list label:hover { transform: translateX(5px); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); } /* Graphics Section */ .graphics-section { display: flex; flex-wrap: wrap; justify-content: space-around; margin: 30px 0; gap: 20px; } .graphic-card { background: white; border-radius: 10px; padding: 20px; width: 150px; text-align: center; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); transition: transform 0.3s; } .graphic-card:hover { transform: translateY(-5px); } .graphic-icon { font-size: 2.5rem; color: var(--primary-color); margin-bottom: 10px; } .graphic-title { font-size: 0.9rem; font-weight: 500; color: var(--dark-color); } .slogan { text-align: center; font-size: 1.2rem; font-style: italic; color: var(--secondary-color); margin: 30px 0; padding: 15px; background: rgba(46, 125, 50, 0.1); border-radius: 8px; border-left: 4px solid var(--primary-color); } /* Exam Type Selection */ .exam-type-selection { background-color: white; padding: 25px; border-radius: 15px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); margin-top: 20px; } /* Selected Chapters Display */ .selected-chapters-display { background-color: #f8f9fa; padding: 15px; border-radius: 8px; margin: 15px 0; } .selected-chapter { display: inline-block; background-color: var(--primary-color); color: white; padding: 5px 10px; border-radius: 15px; margin: 5px; font-size: 0.9rem; } /* Next Button for Chapter Selection */ .chapter-next-btn { text-align: center; margin-top: 20px; } /* Biology Subject Card */ .subject-card { background: white; border-radius: 15px; padding: 30px; text-align: center; box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; cursor: pointer; margin: 20px auto; max-width: 400px; border: 3px solid transparent; } .subject-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); } .subject-card.selected { border-color: var(--primary-color); background: rgba(46, 125, 50, 0.05); box-shadow: 0 10px 25px rgba(46, 125, 50, 0.2); } .subject-icon { font-size: 4rem; color: var(--primary-color); margin-bottom: 15px; } .subject-title { font-size: 1.5rem; font-weight: 600; color: var(--dark-color); margin-bottom: 10px; } .subject-description { font-size: 1rem; color: #666; margin-bottom: 15px; } /* Question Navigation */ .question-navigation { display: flex; justify-content: center; margin: 20px 0; flex-wrap: wrap; gap: 8px; } .question-nav-btn { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--primary-color); background: white; color: var(--primary-color); font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; } .question-nav-btn:hover { background: var(--primary-color); color: white; } .question-nav-btn.active { background: var(--primary-color); color: white; } .question-nav-btn.answered { background: var(--success-color); border-color: var(--success-color); color: white; } /* Responsive styles */ @media (max-width: 768px) { .container { padding: 20px; } h1 { font-size: 1.8rem; } .chapter-list { columns: 1; } .navigation-buttons { flex-direction: column; } .btn { width: 100%; margin: 5px 0; } .question { padding: 15px; } .graphics-section { gap: 10px; } .graphic-card { width: 120px; padding: 15px; } } @media (max-width: 480px) { body { padding: 10px; } .container { padding: 15px; } h1 { font-size: 1.5rem; } .score { font-size: 2rem; } .graphic-card { width: 100px; padding: 10px; } .graphic-icon { font-size: 2rem; } } </style> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4930137336556867" crossorigin="anonymous"></script> <!-- Google tag (gtag.js) --> <script async src="https://www.googletagmanager.com/gtag/js?id=G-KMZ9RJ62EY"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-KMZ9RJ62EY'); </script> </head> <body> <div class="container"> <h1>Routera Online Exam - NEET Biology</h1> <!-- Subject Selection Screen --> <div id="subject-selection"> <h2>Select Your Subject</h2> <!-- Biology Subject Card --> <div class="subject-card" id="biology-card"> <div class="subject-icon"><i class="fas fa-dna"></i></div> <div class="subject-title">Biology</div> <div class="subject-description">Explore the science of life, from molecular mechanisms to ecosystems</div> </div> <!-- Graphics Section --> <div class="graphics-section"> <div class="graphic-card"> <div class="graphic-icon"><i class="fas fa-brain"></i></div> <div class="graphic-title">Concept Testing</div> </div> <div class="graphic-card"> <div class="graphic-icon"><i class="fas fa-stopwatch"></i></div> <div class="graphic-title">Timed Exams</div> </div> <div class="graphic-card"> <div class="graphic-icon"><i class="fas fa-chart-line"></i></div> <div class="graphic-title">Performance Analysis</div> </div> <div class="graphic-card"> <div class="graphic-icon"><i class="fas fa-book"></i></div> <div class="graphic-title">Chapter-wise</div> </div> <div class="graphic-card"> <div class="graphic-icon"><i class="fas fa-trophy"></i></div> <div class="graphic-title">Competitive Edge</div> </div> </div> <div class="slogan"> "Test Your Knowledge, Master Biology, Achieve Your Goals" </div> <!-- Next Button (Hidden Initially) --> <div class="chapter-next-btn hidden" id="subject-next-btn"> <button id="subject-next" class="btn">Next</button> </div> </div> <!-- Chapter Selection (Hidden Initially) --> <div id="chapter-selection" class="hidden"> <div class="chapter-selection-container"> <h2>Select Chapter for Biology</h2> <p>Select one chapter to include in your exam</p> <hr class="divider"> <div id="chapter-list" class="chapter-list"></div> </div> <div class="chapter-next-btn"> <button id="chapter-next" class="btn">Next</button> </div> </div> <!-- Exam Configuration (Hidden Initially) --> <div id="exam-configuration" class="hidden"> <div class="selected-chapters-display"> <h3>Selected Subject: <span id="display-subject">Biology</span></h3> <h4>Selected Chapter:</h4> <div id="selected-chapters-list"></div> </div> <div class="exam-type-selection"> <h2>Select Exam Type</h2> <div class="marks-list"> <label><input type="radio" name="exam-type" value="10" checked> TEST TYPE I - 10 Questions, 10 Minutes, 10 Marks</label> <label><input type="radio" name="exam-type" value="20"> TEST TYPE II - 15 Questions, 15 Minutes, 15 Marks</label> <label><input type="radio" name="exam-type" value="30"> TEST TYPE III - 20 Questions, 20 Minutes, 20 Marks</label> </div> <center> <button id="load-quiz" class="btn btn-success">Start Exam</button> </center> </div> </div> <!-- Exam Screen (Hidden Initially) --> <div id="exam-screen" class="hidden"> <center> <div id="timer"> <i class="fas fa-clock"></i> Time remaining: <span id="time"></span> </div> </center> <div id="quiz"></div> <!-- Question Navigation --> <div id="question-navigation" class="question-navigation"></div> <div class="navigation-buttons"> <button id="previous" class="btn btn-secondary">Previous</button> <button id="next" class="btn btn-secondary">Next</button> </div> <center> <button id="submit" class="btn btn-danger">Submit Exam</button> </center> </div> <!-- Results Screen (Hidden Initially) --> <div id="results" class="hidden"></div> <div id="summary" class="hidden"></div> </div> <script> // Updated Biology chapters const subjects = { Biology: [ "Chapter 1: The Living World", "Chapter 2: Biological Classification", "Chapter 3: Plant Kingdom", "Chapter 4: Animal Kingdom", "Chapter 5: Morphology of Flowering Plants", "Chapter 6: Anatomy of Flowering Plants", "Chapter 7: Structural Organisation in Animals", "Chapter 8: Cell:The Unit of Life", "Chapter 9: Biomolecules", "Chapter 10: Cell Cycle and Cell Division", "Chapter 11: Photosynthesis in Higher Plants", "Chapter 12: Respiration In Plants", "Chapter 13: Plant Growth and Development", "Chapter 14: Breathing and Exchange of Gases", "Chapter 15: Body Fluids and Circulation", "Chapter 16: Excretory Products and their Elimination", "Chapter 17: Locomotion and Movements", "Chapter 18: Neural Control and Coordination", "Chapter 19: Chemical Coordination and Integration", "Chapter 20: Sexual reproduction in flowering plants", "Chapter 21: Human Reproduction", "Chapter 22: Reproductive health", "Chapter 23: Principles of Inheritance and Variation", "Chapter 24: Molecular basis of Inheritance", "Chapter 25: Evolution", "Chapter 26: Human Health and Disease", "Chapter 27: Microbes in human welfare", "Chapter 28: Biotechnology:Principles and processes", "Chapter 29: Biotechnology and its Applications", "Chapter 30: Organisms and Populations", "Chapter 31: Ecosystem", "Chapter 32: Biodiversity and its conservation" ] }; // Sample questions for Biology chapters const questions = { "Chapter 1: The Living World": [ { question: "Which of the following is not a characteristic of living organisms?", options: ["Growth", "Reproduction", "Metabolism", "Cellular organization"], answer: "Reproduction" }, { question: "The basic unit of classification is:", options: ["Species", "Genus", "Family", "Order"], answer: "Species" }, { question: "Binomial nomenclature was introduced by:", options: ["Linnaeus", "Darwin", "Haeckel", "Whittaker"], answer: "Linnaeus" }, { question: "Which of the following is a taxon?", options: ["Homo sapiens", "Mammalia", "Panthera", "All of the above"], answer: "All of the above" }, { question: "The term 'systematics' refers to the study of:", options: ["Classification of organisms", "Diversity of organisms", "Evolutionary relationships", "All of the above"], answer: "All of the above" }, { question: "Which of the following is the correct sequence of taxonomic categories?", options: ["Class ’! Order ’! Family ’! Genus", "Order ’! Class ’! Family ’! Genus", "Family ’! Order ’! Class ’! Genus", "Genus ’! Family ’! Order ’! Class"], answer: "Class ’! Order ’! Family ’! Genus" }, { question: "The term 'New Systematics' was introduced by:", options: ["Julian Huxley", "Carolus Linnaeus", "Ernst Mayr", "G. L. Stebbins"], answer: "Julian Huxley" }, { question: "Which of the following is not a part of the five-kingdom classification?", options: ["Monera", "Protista", "Fungi", "Bacteria"], answer: "Bacteria" }, { question: "The term 'species' was defined by:", options: ["John Ray", "Carolus Linnaeus", "Charles Darwin", "Ernst Mayr"], answer: "John Ray" }, { question: "Which of the following is an example of a genus?", options: ["Sapiens", "Homo", "Mammalia", "Primates"], answer: "Homo" } ], "Chapter 2: Biological Classification": [ { question: "Who proposed the five-kingdom classification?", options: ["R.H. Whittaker", "Carolus Linnaeus", "Ernst Haeckel", "John Ray"], answer: "R.H. Whittaker" }, { question: "Which kingdom includes organisms that are prokaryotic?", options: ["Monera", "Protista", "Fungi", "Plantae"], answer: "Monera" }, { question: "Which of the following is not a characteristic of kingdom Monera?", options: ["Prokaryotic cells", "Cell wall present", "Membrane-bound organelles", "Unicellular organization"], answer: "Membrane-bound organelles" }, { question: "Which kingdom includes organisms that are eukaryotic and primarily aquatic?", options: ["Protista", "Fungi", "Plantae", "Animalia"], answer: "Protista" }, { question: "Which of the following is a characteristic of kingdom Fungi?", options: ["Autotrophic nutrition", "Cell wall made of chitin", "Motile organisms", "Prokaryotic cells"], answer: "Cell wall made of chitin" }, { question: "Which kingdom includes multicellular, eukaryotic organisms with cell walls made of cellulose?", options: ["Plantae", "Fungi", "Protista", "Animalia"], answer: "Plantae" }, { question: "Which of the following is not a characteristic of kingdom Animalia?", options: ["Multicellular organization", "Heterotrophic nutrition", "Cell walls present", "Eukaryotic cells"], answer: "Cell walls present" }, { question: "Which kingdom includes organisms that can be both autotrophic and heterotrophic?", options: ["Protista", "Monera", "Fungi", "Plantae"], answer: "Protista" }, { question: "Which of the following is an example of kingdom Monera?", options: ["Bacteria", "Amoeba", "Mushroom", "Fern"], answer: "Bacteria" }, { question: "Which kingdom includes organisms that are decomposers?", options: ["Fungi", "Plantae", "Animalia", "Protista"], answer: "Fungi" } ], "Chapter 3: Plant Kingdom": [ { question: "Which of the following is not a division of the plant kingdom?", options: ["Thallophyta", "Bryophyta", "Pteridophyta", "Gymnosperms"], answer: "Gymnosperms" }, { question: "Which division includes the simplest plants with no differentiation into root, stem, and leaves?", options: ["Thallophyta", "Bryophyta", "Pteridophyta", "Spermatophyta"], answer: "Thallophyta" }, { question: "Which division is known as the amphibians of the plant kingdom?", options: ["Bryophyta", "Pteridophyta", "Gymnosperms", "Angiosperms"], answer: "Bryophyta" }, { question: "Which division includes plants with vascular tissues but no seeds?", options: ["Pteridophyta", "Bryophyta", "Thallophyta", "Spermatophyta"], answer: "Pteridophyta" }, { question: "Which division includes plants with naked seeds?", options: ["Gymnosperms", "Angiosperms", "Pteridophyta", "Bryophyta"], answer: "Gymnosperms" }, { question: "Which division includes flowering plants?", options: ["Angiosperms", "Gymnosperms", "Pteridophyta", "Bryophyta"], answer: "Angiosperms" }, { question: "Which of the following is an example of Bryophyta?", options: ["Moss", "Fern", "Pine", "Rose"], answer: "Moss" }, { question: "Which of the following is an example of Pteridophyta?", options: ["Fern", "Moss", "Pine", "Rose"], answer: "Fern" }, { question: "Which of the following is an example of Gymnosperms?", options: ["Pine", "Fern", "Moss", "Rose"], answer: "Pine" }, { question: "Which of the following is an example of Angiosperms?", options: ["Rose", "Fern", "Moss", "Pine"], answer: "Rose" } ] // Add more chapters with questions as needed }; // DOM elements const subjectSelection = document.getElementById('subject-selection'); const chapterSelection = document.getElementById('chapter-selection'); const examConfiguration = document.getElementById('exam-configuration'); const examScreen = document.getElementById('exam-screen'); const resultsScreen = document.getElementById('results'); const summaryScreen = document.getElementById('summary'); const biologyCard = document.getElementById('biology-card'); const subjectNextBtn = document.getElementById('subject-next-btn'); const subjectNext = document.getElementById('subject-next'); const chapterList = document.getElementById('chapter-list'); const chapterNext = document.getElementById('chapter-next'); const displaySubject = document.getElementById('display-subject'); const selectedChaptersList = document.getElementById('selected-chapters-list'); const loadQuiz = document.getElementById('load-quiz'); const quizContainer = document.getElementById('quiz'); const questionNavigation = document.getElementById('question-navigation'); const previousBtn = document.getElementById('previous'); const nextBtn = document.getElementById('next'); const submitBtn = document.getElementById('submit'); const timerDisplay = document.getElementById('time'); // Variables let selectedSubject = ''; let selectedChapters = []; let currentQuestion = 0; let userAnswers = []; let timer; let timeLeft; let examType = 10; // Default to 10 questions let allQuestions = []; // Store all questions for the exam // Event Listeners biologyCard.addEventListener('click', () => { biologyCard.classList.add('selected'); subjectNextBtn.classList.remove('hidden'); selectedSubject = 'Biology'; }); subjectNext.addEventListener('click', () => { subjectSelection.classList.add('hidden'); chapterSelection.classList.remove('hidden'); populateChapterList(); }); chapterNext.addEventListener('click', () => { if (selectedChapters.length === 0) { alert('Please select at least one chapter'); return; } chapterSelection.classList.add('hidden'); examConfiguration.classList.remove('hidden'); displaySelectedChapters(); }); loadQuiz.addEventListener('click', () => { examConfiguration.classList.add('hidden'); examScreen.classList.remove('hidden'); examType = parseInt(document.querySelector('input[name="exam-type"]:checked').value); startExam(); }); previousBtn.addEventListener('click', () => { if (currentQuestion > 0) { currentQuestion--; showQuestion(); } }); nextBtn.addEventListener('click', () => { if (currentQuestion < examType - 1) { currentQuestion++; showQuestion(); } }); submitBtn.addEventListener('click', () => { clearInterval(timer); showResults(); }); // Functions function populateChapterList() { chapterList.innerHTML = ''; subjects[selectedSubject].forEach(chapter => { const label = document.createElement('label'); const input = document.createElement('input'); input.type = 'radio'; input.name = 'chapter'; input.value = chapter; input.addEventListener('change', (e) => { if (e.target.checked) { selectedChapters = [chapter]; } }); label.appendChild(input); label.appendChild(document.createTextNode(chapter)); chapterList.appendChild(label); }); } function displaySelectedChapters() { selectedChaptersList.innerHTML = ''; selectedChapters.forEach(chapter => { const span = document.createElement('span'); span.className = 'selected-chapter'; span.textContent = chapter; selectedChaptersList.appendChild(span); }); } function startExam() { // Get questions from selected chapters allQuestions = []; selectedChapters.forEach(chapter => { if (questions[chapter]) { allQuestions = allQuestions.concat(questions[chapter]); } }); // Shuffle and select required number of questions allQuestions = shuffleArray(allQuestions).slice(0, examType); // Initialize user answers userAnswers = new Array(allQuestions.length).fill(null); // Start timer timeLeft = examType * 60; // 1 minute per question startTimer(); // Create question navigation createQuestionNavigation(); // Display first question currentQuestion = 0; showQuestion(); } function createQuestionNavigation() { questionNavigation.innerHTML = ''; for (let i = 0; i < examType; i++) { const btn = document.createElement('div'); btn.className = 'question-nav-btn'; if (i === 0) btn.classList.add('active'); btn.textContent = i + 1; btn.addEventListener('click', () => { currentQuestion = i; showQuestion(); }); questionNavigation.appendChild(btn); } } function showQuestion() { quizContainer.innerHTML = ''; const question = allQuestions[currentQuestion]; const questionDiv = document.createElement('div'); questionDiv.className = 'question'; const questionText = document.createElement('p'); questionText.textContent = `${currentQuestion + 1}. ${question.question}`; questionDiv.appendChild(questionText); question.options.forEach((option, index) => { const optionDiv = document.createElement('div'); optionDiv.className = 'option'; const input = document.createElement('input'); input.type = 'radio'; input.name = 'answer'; input.value = option; input.id = `option-${index}`; input.checked = userAnswers[currentQuestion] === option; input.addEventListener('change', () => { userAnswers[currentQuestion] = option; updateQuestionNavigation(); }); const label = document.createElement('label'); label.htmlFor = `option-${index}`; label.textContent = option; optionDiv.appendChild(input); optionDiv.appendChild(label); questionDiv.appendChild(optionDiv); }); quizContainer.appendChild(questionDiv); // Update navigation buttons previousBtn.disabled = currentQuestion === 0; nextBtn.disabled = currentQuestion === examType - 1; // Update question navigation updateQuestionNavigation(); } function updateQuestionNavigation() { const navButtons = questionNavigation.querySelectorAll('.question-nav-btn'); navButtons.forEach((btn, index) => { btn.classList.remove('active', 'answered'); if (index === currentQuestion) { btn.classList.add('active'); } if (userAnswers[index] !== null) { btn.classList.add('answered'); } }); } function startTimer() { timer = setInterval(() => { timeLeft--; updateTimerDisplay(); if (timeLeft <= 0) { clearInterval(timer); showResults(); } }, 1000); updateTimerDisplay(); } function updateTimerDisplay() { const minutes = Math.floor(timeLeft / 60); const seconds = timeLeft % 60; timerDisplay.textContent = `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`; // Add warning classes based on time left timerDisplay.className = ''; if (timeLeft <= 300) { // 5 minutes timerDisplay.classList.add('danger'); } else if (timeLeft <= 600) { // 10 minutes timerDisplay.classList.add('warning'); } } function showResults() { examScreen.classList.add('hidden'); resultsScreen.classList.remove('hidden'); // Calculate score let score = 0; allQuestions.forEach((question, index) => { if (userAnswers[index] === question.answer) { score++; } }); const percentage = (score / examType) * 100; // Display results resultsScreen.innerHTML = ` <div class="results-card"> <h2>Exam Results</h2> <div class="score">${score}/${examType}</div> <div class="progress-container"> <div class="progress-bar" style="width: ${percentage}%"></div> </div> <p>You scored ${score} out of ${examType} questions (${percentage.toFixed(1)}%)</p> <button id="view-summary" class="btn">View Detailed Summary</button> </div> `; document.getElementById('view-summary').addEventListener('click', () => { showSummary(); }); } function showSummary() { resultsScreen.classList.add('hidden'); summaryScreen.classList.remove('hidden'); let summaryHTML = '<h2>Detailed Summary</h2>'; allQuestions.forEach((question, index) => { const userAnswer = userAnswers[index]; const isCorrect = userAnswer === question.answer; summaryHTML += ` <div class="summary-item"> <p><strong>Question ${index + 1}:</strong> ${question.question}</p> <p><strong>Your Answer:</strong> <span class="${isCorrect ? 'user-correct' : 'user-incorrect'}"> ${userAnswer || 'Not answered'} </span> </p> <p><strong>Correct Answer:</strong> <span class="correct-answer">${question.answer}</span> </p> </div> `; }); summaryScreen.innerHTML = summaryHTML; } // Utility function to shuffle array function shuffleArray(array) { for (let i = array.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [array[i], array[j]] = [array[j], array[i]]; } return array; } </script> </body> </html>