1let filteredQuestions = []; 2let currentQuestionIndex = 0; 3let score = 0; 4let detailedResults = []; // Store answers and correctness 5 6// Initialize the application after DOM content is loaded 7document.addEventListener('DOMContentLoaded', () => { 8 const startButton = document.getElementById('start-button'); 9 const skipButton = document.getElementById('skip-button'); 10 const nextButton = document.getElementById('next-button'); 11 12 if (startButton) startButton.addEventListener('click', startTest); 13 if (skipButton) skipButton.addEventListener('click', skipQuestion); 14 if (nextButton) nextButton.addEventListener('click', handleNext); 15}); 16 17function startTest() { 18 const questionCountInput = document.getElementById('question-count-input'); 19 const questionCount = parseInt(questionCountInput.value) || originalQuestions.length; 20 21 // Prepare questions 22 filteredQuestions = shuffleArray(repeatQuestions(originalQuestions, questionCount)); 23 currentQuestionIndex = 0; 24 score = 0; 25 detailedResults = []; 26 27 // Display the test interface 28 document.getElementById('welcome-screen').style.display = 'none'; 29 document.getElementById('test-container').style.display = 'block'; 30 31 showNextQuestion(); 32} 33 34function repeatQuestions(questions, count) { 35 const repeated = []; 36 while (repeated.length < count) { 37 repeated.push(...questions); 38 } 39 return repeated.slice(0, count); 40} 41 42function shuffleArray(array) { 43 for (let i = array.length - 1; i > 0; i--) { 44 const j = Math.floor(Math.random() * (i + 1)); 45 [array[i], array[j]] = [array[j], array[i]]; 46 } 47 return array; 48} 49 50function showNextQuestion() { 51 if (currentQuestionIndex >= filteredQuestions.length) { 52 showSummary(); 53 return; 54 } 55 56 const question = filteredQuestions[currentQuestionIndex]; 57 document.getElementById('question-text').innerText = question.question; 58 59 const answersContainer = document.getElementById('answers-container'); 60 answersContainer.innerHTML = ''; 61 62 question.answers.forEach((answer, index) => { 63 const button = document.createElement('button'); 64 button.className = 'button'; 65 button.innerText = answer; 66 button.addEventListener('click', () => handleAnswer(index)); 67 answersContainer.appendChild(button); 68 }); 69 70 document.getElementById('next-button').style.display = 'none'; 71} 72 73function handleAnswer(selectedIndex) { 74 const question = filteredQuestions[currentQuestionIndex]; 75 const answersContainer = document.getElementById('answers-container'); 76 const nextButton = document.getElementById('next-button'); 77 78 // Highlight correct and incorrect answers 79 answersContainer.childNodes.forEach((button, index) => { 80 if (index === question.correct) { 81 button.style.backgroundColor = 'green'; // Correct answer 82 } else if (index === selectedIndex) { 83 button.style.backgroundColor = 'red'; // Incorrect answer 84 } 85 button.disabled = true; // Disable all buttons after answering 86 }); 87 88 // Record result 89 detailedResults.push({ 90 question: question.question, 91 answers: question.answers, 92 correct: question.correct, 93 selected: selectedIndex, 94 isCorrect: selectedIndex === question.correct, 95 }); 96 97 if (selectedIndex === question.correct) { 98 score++; 99 } 100 101 nextButton.style.display = 'inline-block'; // Show "Next" button 102} 103 104function skipQuestion() { 105 const question = filteredQuestions[currentQuestionIndex]; 106 107 // Record skipped question 108 detailedResults.push({ 109 question: question.question, 110 answers: question.answers, 111 correct: question.correct, 112 selected: null, 113 isCorrect: false, 114 }); 115 116 currentQuestionIndex++; 117 showNextQuestion(); 118} 119 120function handleNext() { 121 currentQuestionIndex++; 122 showNextQuestion(); 123} 124 125function showSummary() { 126 document.getElementById('test-container').style.display = 'none'; 127 128 const summaryContainer = document.getElementById('summary-container'); 129 const detailedSummary = document.getElementById('detailed-summary'); 130 131 summaryContainer.style.display = 'block'; 132 detailedSummary.innerHTML = ''; 133 134 // Generate summary content 135 let summaryHTML = `<h2>Summary of Results</h2>`; 136 for (let i = 0; i < detailedResults.length; i++) { 137 const result = detailedResults[i]; 138 let answersHTML = ''; 139 140 for (let j = 0; j < result.answers.length; j++) { 141 const answer = result.answers[j]; 142 let color = 'black'; 143 144 if (j === result.correct) { 145 color = 'green'; // Highlight correct answer 146 } else if (j === result.selected) { 147 color = 'red'; // Highlight incorrect answer 148 } 149 150 answersHTML += `<li style="color: ${color};">${answer}</li>`; 151 } 152 153 summaryHTML += ` 154 <div class="result-item"> 155 <h3>Question ${i + 1}: ${result.question}</h3> 156 <ul>${answersHTML}</ul> 157 <p><strong>Your Answer:</strong> ${ 158 result.selected !== null 159 ? result.answers[result.selected] 160 : 'Skipped' 161 }</p> 162 <p style="color: ${ 163 result.isCorrect ? 'green' : 'red' 164 }; font-weight: bold;">${result.isCorrect ? 'Correct' : 'Incorrect'}</p> 165 </div> 166 `; 167 } 168 169 summaryHTML += `<p><strong>Final Score:</strong> ${score}/${filteredQuestions.length}</p>`; 170 summaryHTML += `<button class="button" onclick="location.reload()">Restart</button>`; 171 172 detailedSummary.innerHTML = summaryHTML; 173} 174