ÿþ<!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 - JEE Mathematics</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: #9c27b0; --secondary-color: #7b1fa2; --accent-color: #e91e63; --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%, #fce4ec 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(156, 39, 176, 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(156, 39, 176, 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(233, 30, 99, 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(156, 39, 176, 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; } /* Mathematics 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(156, 39, 176, 0.05); box-shadow: 0 10px 25px rgba(156, 39, 176, 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 - JEE Mathematics</h1> <!-- Subject Selection Screen --> <div id="subject-selection"> <h2>Select Your Subject</h2> <!-- Mathematics Subject Card --> <div class="subject-card" id="mathematics-card"> <div class="subject-icon"><i class="fas fa-calculator"></i></div> <div class="subject-title">Mathematics</div> <div class="subject-description">Master the language of numbers, shapes, and patterns</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 Mathematics, Achieve Your JEE 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 Mathematics</h2> <p>Select one chapter to include in your JEE Mathematics 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">Mathematics</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 JEE Mathematics 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 JEE Mathematics Exam</button> </center> </div> <!-- Results Screen (Hidden Initially) --> <div id="results" class="hidden"></div> <div id="summary" class="hidden"></div> </div> <script> // Updated Mathematics chapters for JEE const subjects = { Mathematics: [ "Chapter 1: Sets", "Chapter 2: Relations and Functions", "Chapter 3: Trigonometric Functions", "Chapter 4: Complex Number and Quadratic Equations", "Chapter 5: Linear Inequalities", "Chapter 6: Permutations and Combinations", "Chapter 7: Binomial Theorem", "Chapter 8: Sequences and Series", "Chapter 9: Straight Lines", "Chapter 10: Conic Sections", "Chapter 11: Introduction to Three Dimensional Geometry", "Chapter 12: Limits and Derivatives", "Chapter 13: Statistics", "Chapter 14: Probability", "Chapter 15: Relations and Functions", "Chapter 16: Inverse Trigonometric Functions", "Chapter 17: Matrices", "Chapter 18: Determinants", "Chapter 19: Continuity and Differentiability", "Chapter 20: Application of Derivatives", "Chapter 21: Integrals", "Chapter 22: Applications of Integrals", "Chapter 23: Differential Equations", "Chapter 24: Vector Algebra", "Chapter 25: Three Dimensional Geometry", "Chapter 26: Linear Programming", "Chapter 27: Probability" ] }; // Sample questions for Mathematics chapters const questions = { "Chapter 1: Sets": [ { question: "If A = {1, 2, 3} and B = {2, 3, 4}, then A *" B is:", options: ["{1, 2, 3}", "{2, 3, 4}", "{1, 2, 3, 4}", "{2, 3}"], answer: "{1, 2, 3, 4}" }, { question: "The number of subsets of a set containing n elements is:", options: ["n", "n²", "2 ", "2n"], answer: "2 " }, { question: "If A and B are two sets such that n(A) = 20, n(B) = 30 and n(A *" B) = 40, then n(A )" B) is:", options: ["10", "20", "30", "40"], answer: "10" }, { question: "Which of the following is an empty set?", options: ["{x: x is a real number and x² = -1}", "{x: x is an integer and x² = 4}", "{x: x is a natural number and x < 1}", "Both A and C"], answer: "Both A and C" }, { question: "If A = {1, 2, 3} and B = {3, 4, 5}, then A - B is:", options: ["{1, 2}", "{3}", "{4, 5}", "{1, 2, 3, 4, 5}"], answer: "{1, 2}" }, { question: "The set of all subsets of a set A is called:", options: ["Power set", "Universal set", "Complement set", "Proper set"], answer: "Power set" }, { question: "If A and B are disjoint sets, then A )" B is:", options: ["A", "B", "Empty set", "Universal set"], answer: "Empty set" }, { question: "The set {x: x " R, -1 < x < 1} in interval notation is:", options: ["(-1, 1)", "[-1, 1]", "(-1, 1]", "(-1, 1)"], answer: "(-1, 1)" }, { question: "If A †" B, then A *" B is equal to:", options: ["A", "B", "A )" B", "Universal set"], answer: "B" }, { question: "The number of elements in the power set of {1, 2, 3} is:", options: ["3", "6", "8", "9"], answer: "8" } ], "Chapter 2: Relations and Functions": [ { question: "A relation R from A to B is:", options: ["A subset of A × B", "A subset of B × A", "A subset of A", "A subset of B"], answer: "A subset of A × B" }, { question: "Which of the following relations is a function?", options: ["{(1,2), (1,3), (2,4)}", "{(1,2), (2,3), (3,4)}", "{(1,2), (2,2), (3,2)}", "Both B and C"], answer: "Both B and C" }, { question: "The domain of the function f(x) = "(4 - x²) is:", options: ["(-", ")", "(-2, 2)", "[-2, 2]", "(-", -2] *" [2, ")"], answer: "[-2, 2]" }, { question: "If f(x) = x² and g(x) = 2x + 1, then f(g(x)) is:", options: ["2x² + 1", "4x² + 4x + 1", "x² + 2x + 1", "4x² + 1"], answer: "4x² + 4x + 1" }, { question: "A function f: A ’! B is one-one if:", options: ["f(a) = f(b) Ò! a = b", "a = b Ò! f(a) = f(b)", "f(a) `" f(b) for all a, b", "Range = Codomain"], answer: "f(a) = f(b) Ò! a = b" } ], "Chapter 3: Trigonometric Functions": [ { question: "The value of sin(À/3) is:", options: ["1/2", ""3/2", "1/"2", ""3"], answer: ""3/2" }, { question: "If sin¸ = 3/5, then cos¸ is:", options: ["4/5", "3/4", "5/4", "4/3"], answer: "4/5" }, { question: "The period of tan x is:", options: ["À", "2À", "À/2", "4À"], answer: "À" }, { question: "sin²¸ + cos²¸ is equal to:", options: ["0", "1", "sin2¸", "cos2¸"], answer: "1" }, { question: "The value of sin(75°) is:", options: ["("6 + "2)/4", "("6 - "2)/4", "("3 + 1)/2"2", "("3 - 1)/2"2"], answer: "("6 + "2)/4" } ], "Chapter 4: Complex Number and Quadratic Equations": [ { question: "The value of i² is:", options: ["1", "-1", "i", "-i"], answer: "-1" }, { question: "The real part of 3 + 4i is:", options: ["3", "4", "5", "7"], answer: "3" }, { question: "The roots of the equation x² + x + 1 = 0 are:", options: ["Real and equal", "Real and distinct", "Complex", "None of these"], answer: "Complex" }, { question: "The modulus of 3 + 4i is:", options: ["3", "4", "5", "7"], answer: "5" }, { question: "If z = 2 + 3i, then its conjugate is:", options: ["2 - 3i", "-2 + 3i", "-2 - 3i", "3 + 2i"], answer: "2 - 3i" } ] // 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 mathematicsCard = document.getElementById('mathematics-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 mathematicsCard.addEventListener('click', () => { mathematicsCard.classList.add('selected'); subjectNextBtn.classList.remove('hidden'); selectedSubject = 'Mathematics'; }); 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>JEE Mathematics 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>