Quiz

English Literature Quiz body { font-family: Arial, sans-serif; line-height: 1.6; color: #333; max-width: 600px; margin: 0 auto; padding: 20px; } .quiz-container { background-color: #f4f4f4; border-radius: 8px; padding: 20px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } h1, h2 { text-align: center; color: #2c3e50; } .question { font-weight: bold; margin-bottom: 10px; } .options { margin-bottom: 20px; } .option { display: block; margin-bottom: 10px; } button { display: block; width: 100%; padding: 10px; background-color: #3498db; color: white; border: none; border-radius: 4px; font-size: 16px; cursor: pointer; margin-top: 10px; } button:hover { background-color: #2980b9; } button:disabled { background-color: #bdc3c7; cursor: not-allowed; } #result, #answers { text-align: center; font-size: 18px; font-weight: bold; margin-top: 20px; } .answer-review { background-color: #fff; border: 1px solid #ddd; border-radius: 4px; padding: 10px; margin-bottom: 10px; } .correct { color: #27ae60; } .incorrect { color: #c0392b; } English Literature Quiz

Submit Answer const quizData = [ { question: "Beowulf belongs to:", options: ["Old English period", "Middle English period", "Renaissance period", "Victorian period"], answer: "Old English period" }, { question: "Grendel is believed to be the descendant of the:", options: ["Danes", "Geats", "Swedes", "Cain"], answer: "Cain" }, { question: "Which of the following is NOT a characteristic of Old English literature?", options: ["Alliterative verse", "Emphasis on heroic themes", "Use of rhyme", "Oral tradition"], answer: "Use of rhyme" }, { question: "John Dryden described a major English poet as \"a rough diamond, and must first be polished ere he shines....\"", options: ["Geoffrey Chaucer", "John Gower", "George Herbert", "Robert Herrick"], answer: "Geoffrey Chaucer" }, { question: "Chaucer satirizes the Monk because the Monk:", options: [ "is too concerned with courtesy and matters of etiquette", "cheats the poor peasants by selling them false religious relics", "courts favour of wealthy people but spends no time with poor people", "spends too much time hunting and too little time on religious duty" ], answer: "spends too much time hunting and too little time on religious duty" }, { question: "Which of the following arrangements of poets is in the correct chronological order?", options: [ "Geoffrey Chaucer, William Langland, John Gower", "William Langland, Geoffrey Chaucer, John Gower", "Layamon, William Langland, William Dunbar", "John Gower, William Langland, Geoffrey Chaucer" ], answer: "Layamon, William Langland, William Dunbar" }, { question: "Piers Plowman, the major work of William Langland, is:", options: [ "An allegory with a complex variety of religious themes", "A collection of lyrical poems", "A satirical romance", "A morality play" ], answer: "An allegory with a complex variety of religious themes" } ]; let currentQuestion = 0; let score = 0; let userAnswers = []; const questionEl = document.getElementById('question'); const optionsEl = document.getElementById('options'); const submitBtn = document.getElementById('submit'); const quizEl = document.getElementById('quiz'); const resultEl = document.getElementById('result'); const answersEl = document.getElementById('answers'); function loadQuestion() { const question = quizData[currentQuestion]; questionEl.textContent = `${currentQuestion + 1}. ${question.question}`; optionsEl.innerHTML = ''; question.options.forEach((option, index) => { const radio = document.createElement('input'); radio.type = 'radio'; radio.name = 'answer'; radio.value = option; radio.id = `option${index}`; const label = document.createElement('label'); label.htmlFor = `option${index}`; label.textContent = option; const optionContainer = document.createElement('div'); optionContainer.classList.add('option'); optionContainer.appendChild(radio); optionContainer.appendChild(label); optionsEl.appendChild(optionContainer); }); submitBtn.disabled = true; } function selectOption() { submitBtn.disabled = false; } function submitAnswer() { const selectedOption = document.querySelector('input[name="answer"]:checked'); if (selectedOption) { const answer = selectedOption.value; userAnswers.push(answer); if (answer === quizData[currentQuestion].answer) { score++; } currentQuestion++; if (currentQuestion < quizData.length) { loadQuestion(); } else { showResult(); } } } function showResult() { quizEl.style.display = 'none'; resultEl.innerHTML = `<h2>Quiz Results</h2><p>You scored ${score} out of ${quizData.length}!</p>`; answersEl.innerHTML = '<h2>Answer Review</h2>'; quizData.forEach((question, index) => { const userAnswer = userAnswers[index]; const isCorrect = userAnswer === question.answer; const answerReview = document.createElement('div'); answerReview.classList.add('answer-review'); answerReview.innerHTML = ` <p><strong>Question ${index + 1}:</strong> ${question.question}</p> <p class="${isCorrect ? 'correct' : 'incorrect'}">Your answer: ${userAnswer}</p> <p class="correct">Correct answer: ${question.answer}</p> `; answersEl.appendChild(answerReview); }); const restartBtn = document.createElement('button'); restartBtn.textContent = 'Restart Quiz'; restartBtn.onclick = restartQuiz; answersEl.appendChild(restartBtn); } function restartQuiz() { currentQuestion = 0; score = 0; userAnswers = []; quizEl.style.display = 'block'; resultEl.innerHTML = ''; answersEl.innerHTML = ''; loadQuestion(); } loadQuestion(); optionsEl.addEventListener('change', selectOption); submitBtn.addEventListener('click', submitAnswer);

The post Quiz first appeared on Ronald Hadrian.