ÿþ<!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 Physics</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: #4361ee; --secondary-color: #3f37c9; --accent-color: #4cc9f0; --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%, #c3cfe2 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(67, 97, 238, 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(67, 97, 238, 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(76, 201, 240, 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(67, 97, 238, 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; } /* Physics 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(67, 97, 238, 0.05); box-shadow: 0 10px 25px rgba(67, 97, 238, 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 Physics</h1> <!-- Subject Selection Screen --> <div id="subject-selection"> <h2>Select Your Subject</h2> <!-- Physics Subject Card --> <div class="subject-card" id="physics-card"> <div class="subject-icon"><i class="fas fa-atom"></i></div> <div class="subject-title">Physics</div> <div class="subject-description">Master the fundamentals of matter, energy, and the laws governing the universe</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 Physics, 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 Physics</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">Physics</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 Physics chapters const subjects = { Physics: [ "Chapter 1: Units and Measurement", "Chapter 2: Motion in a Straight Line", "Chapter 3: Motion in a Plane", "Chapter 4: Laws of Motion", "Chapter 5: Work, Energy and Power", "Chapter 6: System of Particles and Rotational Motion", "Chapter 7: Gravitation", "Chapter 8: Mechanical Properties of Solids", "Chapter 9: Mechanical Properties of Fluids", "Chapter 10: Thermal Properties of Matter", "Chapter 11: Thermodynamics", "Chapter 12: Kinetic Theory", "Chapter 13: Oscillations", "Chapter 14: Waves", "Chapter 15: Electric Charge and Fields", "Chapter 16: Electrostatic Potential and Capacitance", "Chapter 17: Current Electricity", "Chapter 18: Moving Charges and Magnetism", "Chapter 19: Magnetism and Matter", "Chapter 20: Electromagnetic Induction", "Chapter 21: Alternating Current", "Chapter 22: Electromagnetic Wave", "Chapter 23: Ray Optics and Optical Instruments", "Chapter 24: Wave Optics", "Chapter 25: Dual Nature of Radiation and Matter", "Chapter 26: Atoms", "Chapter 27: Nuclei", "Chapter 28: Semiconductor Electronics, Materials, Devices and Simple Circuits" ] }; // Sample questions for the first chapter (you can expand this) const questions = { "Chapter 1: Units and Measurement": [ { question: "Which of the following is a fundamental unit?", options: ["Newton", "Joule", "Kilogram", "Watt"], answer: "Kilogram" }, { question: "The SI unit of electric current is:", options: ["Volt", "Ampere", "Ohm", "Coulomb"], answer: "Ampere" }, { question: "Which of the following is not a unit of length?", options: ["Parsec", "Angstrom", "Barn", "Light year"], answer: "Barn" }, { question: "The dimensional formula for force is:", options: ["[MLT^-2]", "[ML^2T^-2]", "[MLT^-1]", "[M^2LT^-2]"], answer: "[MLT^-2]" }, { question: "Which instrument is used to measure very small distances?", options: ["Vernier calipers", "Screw gauge", "Metre scale", "Tape measure"], answer: "Screw gauge" }, { question: "What is the SI unit of temperature?", options: ["Fahrenheit", "Celsius", "Kelvin", "Rankine"], answer: "Kelvin" }, { question: "Which of the following is a derived unit?", options: ["Meter", "Second", "Kilogram", "Newton"], answer: "Newton" }, { question: "The number of significant figures in 0.0025 is:", options: ["1", "2", "3", "4"], answer: "2" }, { question: "Which of the following is not a fundamental quantity?", options: ["Length", "Mass", "Time", "Force"], answer: "Force" }, { question: "The dimensional formula for power is:", options: ["[ML^2T^-3]", "[MLT^-2]", "[ML^2T^-2]", "[MLT^-1]"], answer: "[ML^2T^-3]" } ], "Chapter 2: Motion in a Straight Line": [ { question: "What is the SI unit of acceleration?", options: ["m/s", "m/s²", "m²/s", "s/m"], answer: "m/s²" }, { question: "A body is moving with uniform velocity. Its acceleration is:", options: ["Zero", "Positive", "Negative", "Variable"], answer: "Zero" }, { question: "The area under a velocity-time graph represents:", options: ["Acceleration", "Distance", "Speed", "Displacement"], answer: "Displacement" }, { question: "A ball is thrown vertically upwards. At the highest point, its velocity is:", options: ["Maximum", "Minimum", "Zero", "Undefined"], answer: "Zero" }, { question: "The equations of motion are applicable when:", options: ["Acceleration is zero", "Acceleration is constant", "Velocity is constant", "Motion is circular"], answer: "Acceleration is constant" }, { question: "A car accelerates from rest at 2 m/s². What is its velocity after 5 seconds?", options: ["2 m/s", "5 m/s", "10 m/s", "25 m/s"], answer: "10 m/s" }, { question: "Which of the following represents uniformly accelerated motion?", options: ["Free fall", "Circular motion", "Uniform circular motion", "Motion of pendulum"], answer: "Free fall" }, { question: "The slope of a distance-time graph gives:", options: ["Acceleration", "Velocity", "Displacement", "Speed"], answer: "Speed" }, { question: "A body is moving with a constant acceleration. Its velocity-time graph is a:", options: ["Straight line parallel to time axis", "Straight line with positive slope", "Parabola", "Hyperbola"], answer: "Straight line with positive slope" }, { question: "A stone is dropped from a height of 20m. The time taken to reach the ground is:", options: ["1 s", "2 s", "3 s", "4 s"], answer: "2 s" } ] // 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 physicsCard = document.getElementById('physics-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 physicsCard.addEventListener('click', () => { physicsCard.classList.add('selected'); subjectNextBtn.classList.remove('hidden'); selectedSubject = 'Physics'; }); 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>