Literary Theory Quiz body { font-family: 'Inter', sans-serif; } .quiz-card { transform: perspective(1000px) rotateY(0deg); transition: transform 0.6s; transform-style: preserve-3d; } .quiz-card.flipping { transform: rotateY(180deg); } .hidden { display: none; } /* Custom radio button styles */ .custom-radio { appearance: none; -webkit-appearance: none; height: 1.5rem; width: 1.5rem; border-radius: 50%; border: 2px solid #cbd5e1; /* gray-300 */ transition: all 0.2s ease-in-out; cursor: pointer; position: relative; top: 4px; } .custom-radio:checked { border-color: #4f46e5; /* indigo-600 */ background-color: #4f46e5; /* indigo-600 */ } .custom-radio:checked::after { content: ''; position: absolute; top: 50%; left: 50%; width: 0.75rem; height: 0.75rem; border-radius: 50%; background: white; transform: translate(-50%, -50%); } .result-item.correct { border-left: 4px solid #10b981; /* green-500 */ } .result-item.incorrect { border-left: 4px solid #ef4444; /* red-500 */ } Literary Theory Quiz

Please enter your name to begin.

Start Quiz

Please enter your name.

Question /

Previous Next Submit Quiz Completed!

Here’s how you did.

Your Score

%

out of correct

Try Again Review Your Answers const quizData = [ { question: "According to Northrop Frye's theory, what does 'Structural Criticism' focus on?", options: [ "The social and cultural background of the text", "The internal pattern and symbols within the text itself", "The author's personal life and experiences", "The historical timeline of when the text was written" ], answer: "The internal pattern and symbols within the text itself" }, { question: "Carl Jung's concept of the 'collective unconscious' is described as:", options: [ "An author's unique set of memories and symbols", "The hidden meaning an author consciously places in a story", "A personal reservoir of an individual's forgotten experiences", "A shared reservoir of myths and symbols inherited by all humanity" ], answer: "A shared reservoir of myths and symbols inherited by all humanity" }, { question: "In Frye's framework, what does the 'rhythm' of a story represent?", options: [ "The deeper meaning and verbal structure", "The narrative flow and sequence of events over time", "The recurring symbols found across cultures", "The static, spatial pattern of the work" ], answer: "The narrative flow and sequence of events over time" }, { question: "Which of the following pairings is associated with the 'Tragic Vision' of archetypes?", options: [ "Human: Hero", "Animal: Lamb", "Vegetable: Garden", "Mineral: Desert" ], answer: "Mineral: Desert" }, { question: "Frye's theory suggests that all stories are built on a cycle that mirrors nature. Which literary cycle corresponds to the 'Sunset' and 'Autumn' phases?", options: [ "The myth of the hero's birth and creation", "The myth of paradise and sacred marriage", "The myth of the hero's fall, sacrifice, and isolation", "The myth of chaos, floods, and the hero's defeat" ], answer: "The myth of the hero's fall, sacrifice, and isolation" } ]; // DOM Elements const nameContainer = document.getElementById('name-container'); const quizContainer = document.getElementById('quiz-container'); const resultsContainer = document.getElementById('results-container'); const startBtn = document.getElementById('start-btn'); const nameInput = document.getElementById('name'); const nameError = document.getElementById('name-error'); const questionNumberEl = document.getElementById('question-number'); const totalQuestionsEl = document.getElementById('total-questions'); const questionTextEl = document.getElementById('question-text'); const optionsContainerEl = document.getElementById('options-container'); const progressBar = document.getElementById('progress-bar'); const prevBtn = document.getElementById('prev-btn'); const nextBtn = document.getElementById('next-btn'); const submitBtn = document.getElementById('submit-btn'); const resultHeadingEl = document.getElementById('result-heading'); const scoreEl = document.getElementById('score'); const correctCountEl = document.getElementById('correct-count'); const totalCountEl = document.getElementById('total-count'); const answersSummaryEl = document.getElementById('answers-summary'); const restartBtn = document.getElementById('restart-btn'); // State variables let currentQuestionIndex = 0; let userAnswers = new Array(quizData.length).fill(null); let userName = ''; // Event Listeners startBtn.addEventListener('click', startQuiz); nameInput.addEventListener('keyup', (event) => { if(event.key === 'Enter') { startQuiz(); } }); nextBtn.addEventListener('click', nextQuestion); prevBtn.addEventListener('click', prevQuestion); submitBtn.addEventListener('click', showResults); restartBtn.addEventListener('click', restartQuiz); function startQuiz() { userName = nameInput.value.trim(); if (userName) { nameContainer.classList.add('hidden'); quizContainer.classList.remove('hidden'); loadQuestion(); } else { nameError.classList.remove('hidden'); } } function loadQuestion() { const questionData = quizData[currentQuestionIndex]; // Flip animation const quizCard = document.querySelector('.quiz-card'); quizCard.classList.add('flipping'); setTimeout(() => { questionNumberEl.textContent = currentQuestionIndex 1; totalQuestionsEl.textContent = quizData.length; questionTextEl.textContent = questionData.question; optionsContainerEl.innerHTML = ''; questionData.options.forEach((option, index) => { const optionId = `q${currentQuestionIndex}-option${index}`; const isChecked = userAnswers[currentQuestionIndex] === option; const optionElement = document.createElement('label'); optionElement.htmlFor = optionId; optionElement.className = 'block p-4 border border-slate-200 rounded-lg cursor-pointer hover:bg-indigo-50 transition'; optionElement.innerHTML = ` <input type="radio" name="question${currentQuestionIndex}" id="${optionId}" value="${option}" class="custom-radio" ${isChecked ? 'checked' : ''}> <span class="ml-3 text-slate-700">${option}</span> `; optionsContainerEl.appendChild(optionElement); optionElement.querySelector('input').addEventListener('change', (e) => { userAnswers[currentQuestionIndex] = e.target.value; }); }); updateNavigation(); updateProgressBar(); quizCard.classList.remove('flipping'); }, 300); } function updateNavigation() { prevBtn.classList.toggle('hidden', currentQuestionIndex === 0); nextBtn.classList.toggle('hidden', currentQuestionIndex === quizData.length - 1); submitBtn.classList.toggle('hidden', currentQuestionIndex !== quizData.length - 1); } function updateProgressBar() { const progressPercentage = ((currentQuestionIndex 1) / quizData.length) * 100; progressBar.style.width = `${progressPercentage}%`; } function nextQuestion() { if (currentQuestionIndex < quizData.length - 1) { currentQuestionIndex ; loadQuestion(); } } function prevQuestion() { if (currentQuestionIndex > 0) { currentQuestionIndex--; loadQuestion(); } } function showResults() { let correctAnswers = 0; quizData.forEach((question, index) => { if (userAnswers[index] === question.answer) { correctAnswers ; } }); const scorePercentage = Math.round((correctAnswers / quizData.length) * 100); quizContainer.classList.add('hidden'); resultsContainer.classList.remove('hidden'); resultHeadingEl.textContent = `Well done, ${userName}!`; scoreEl.textContent = scorePercentage; correctCountEl.textContent = correctAnswers; totalCountEl.textContent = quizData.length; displayAnswersSummary(); } function displayAnswersSummary() { answersSummaryEl.innerHTML = '<h3 class="text-xl font-bold text-slate-800 text-center">Review Your Answers</h3>'; // Clear previous summary quizData.forEach((question, index) => { const userAnswer = userAnswers[index]; const correctAnswer = question.answer; const isCorrect = userAnswer === correctAnswer; const summaryItem = document.createElement('div'); summaryItem.className = `result-item bg-white p-5 rounded-lg shadow-sm ${isCorrect ? 'correct' : 'incorrect'}`; let userAnswerHtml = ''; if (userAnswer) { userAnswerHtml = `<p class="text-slate-700 text-sm">Your answer: <span class="font-semibold ${isCorrect ? 'text-green-700' : 'text-red-700'}">${userAnswer}</span></p>`; } else { userAnswerHtml = `<p class="text-slate-700 text-sm"><span class="font-semibold text-red-700">You did not answer this question.</span></p>`; } const correctAnswerHtml = !isCorrect ? `<p class="text-slate-700 text-sm mt-1">Correct answer: <span class="font-semibold text-green-700">${correctAnswer}</span></p>` : ''; summaryItem.innerHTML = ` <p class="font-semibold text-slate-800 mb-2">Q${index 1}: ${question.question}</p> ${userAnswerHtml} ${correctAnswerHtml} `; answersSummaryEl.appendChild(summaryItem); }); } function restartQuiz() { currentQuestionIndex = 0; userAnswers.fill(null); userName = ''; nameInput.value = ''; resultsContainer.classList.add('hidden'); nameError.classList.add('hidden'); nameContainer.classList.remove('hidden'); }

The post Archetypes quiz first appeared on Ronald Hadrian.