EPJA Quiz: Liverpool \u2013 History & Culture<\/title>\n <style>\n * {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n }\n body {\n font-family: 'Segoe UI', Roboto, Arial, sans-serif;\n background: #f0f4f8;\n display: flex;\n justify-content: center;\n padding: 20px;\n min-height: 100vh;\n }\n .quiz-container {\n max-width: 900px;\n width: 100%;\n background: white;\n border-radius: 28px;\n box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);\n overflow: hidden;\n padding: 25px 30px 35px;\n transition: all 0.2s;\n }\n .quiz-header {\n margin: -25px -30px 25px -30px;\n padding: 0;\n background: #002b4a;\n color: white;\n text-align: center;\n }\n .quiz-header img {\n width: 100%;\n max-height: 220px;\n object-fit: cover;\n display: block;\n border-bottom: 5px solid #fcb913;\n }\n .quiz-header h1 {\n font-size: 1.9rem;\n padding: 20px 20px 10px;\n letter-spacing: 1px;\n font-weight: 600;\n background: #002b4a;\n }\n .quiz-header p {\n font-size: 1rem;\n padding: 0 20px 20px;\n opacity: 0.9;\n background: #002b4a;\n margin: 0;\n }\n .progress-info {\n display: flex;\n justify-content: space-between;\n align-items: center;\n background: #e9edf2;\n padding: 12px 18px;\n border-radius: 40px;\n margin-bottom: 30px;\n font-weight: 500;\n flex-wrap: wrap;\n gap: 10px;\n }\n .progress-info span {\n background: #002b4a;\n color: white;\n padding: 4px 14px;\n border-radius: 30px;\n font-size: 0.9rem;\n }\n .btn-reset {\n background: #fcb913;\n border: none;\n color: #002b4a;\n font-weight: 700;\n padding: 8px 22px;\n border-radius: 30px;\n cursor: pointer;\n font-size: 0.9rem;\n transition: 0.2s;\n border: 2px solid transparent;\n }\n .btn-reset:hover {\n background: #e0a50a;\n transform: scale(1.02);\n }\n .question-card {\n background: #fafcff;\n border-radius: 20px;\n padding: 20px 22px 12px;\n margin-bottom: 20px;\n border-left: 6px solid #fcb913;\n box-shadow: 0 2px 8px rgba(0,0,0,0.04);\n transition: 0.15s;\n }\n .question-card.correct {\n border-left-color: #1e9b4a;\n background: #f0faf3;\n }\n .question-card.incorrect {\n border-left-color: #c72a2a;\n background: #fdf0f0;\n }\n .question-text {\n font-size: 1.08rem;\n font-weight: 600;\n margin-bottom: 12px;\n color: #0b1e2e;\n }\n .options {\n display: flex;\n flex-direction: column;\n gap: 8px;\n margin-bottom: 8px;\n }\n .option {\n display: flex;\n align-items: center;\n gap: 12px;\n background: white;\n padding: 10px 16px;\n border-radius: 40px;\n border: 2px solid #dbe0e8;\n cursor: pointer;\n transition: 0.15s;\n font-weight: 500;\n }\n .option:hover:not(.disabled-option) {\n background: #eef3fa;\n border-color: #a0b3cc;\n }\n .option input[type=\"radio\"] {\n width: 18px;\n height: 18px;\n accent-color: #002b4a;\n cursor: pointer;\n flex-shrink: 0;\n }\n .option.correct-answer {\n border-color: #1e9b4a;\n background: #dff0e3;\n }\n .option.wrong-answer {\n border-color: #c72a2a;\n background: #fce4e4;\n }\n .option.disabled-option {\n opacity: 0.85;\n cursor: default;\n }\n .feedback {\n margin-top: 12px;\n padding: 12px 16px;\n border-radius: 16px;\n background: #f0f4fc;\n border-left: 5px solid #6c8db0;\n font-size: 0.95rem;\n line-height: 1.5;\n display: none;\n }\n .feedback.show {\n display: block;\n }\n .feedback strong {\n color: #002b4a;\n }\n .results-box {\n background: #002b4a;\n color: white;\n padding: 25px 20px;\n border-radius: 30px;\n text-align: center;\n margin: 30px 0 10px;\n display: none;\n box-shadow: 0 6px 0 #001a2b;\n }\n .results-box.show {\n display: block;\n }\n .results-box h2 {\n font-size: 2rem;\n margin-bottom: 5px;\n }\n .results-box .score {\n font-size: 3.8rem;\n font-weight: 800;\n color: #fcb913;\n }\n .results-box .details {\n font-size: 1.1rem;\n margin: 8px 0;\n }\n .progress-bar-container {\n width: 100%;\n background: #1a3a5a;\n border-radius: 30px;\n height: 30px;\n margin: 15px 0;\n overflow: hidden;\n position: relative;\n }\n .progress-bar-fill {\n height: 100%;\n background: linear-gradient(90deg, #fcb913, #f7d44a);\n border-radius: 30px;\n transition: width 1s ease;\n width: 0%;\n display: flex;\n align-items: center;\n justify-content: flex-end;\n padding-right: 10px;\n font-weight: 700;\n color: #002b4a;\n font-size: 0.9rem;\n }\n .remedial-section {\n background: #e9edf2;\n border-radius: 20px;\n padding: 20px;\n margin-top: 20px;\n text-align: left;\n color: #0b1e2e;\n display: none;\n }\n .remedial-section.show {\n display: block;\n }\n .remedial-section h3 {\n color: #002b4a;\n margin-bottom: 10px;\n font-size: 1.2rem;\n border-bottom: 2px solid #fcb913;\n padding-bottom: 5px;\n }\n .remedial-section ul {\n list-style: none;\n padding: 0;\n }\n .remedial-section ul li {\n padding: 8px 12px;\n margin: 5px 0;\n background: white;\n border-radius: 12px;\n border-left: 4px solid #fcb913;\n }\n .remedial-section ul li strong {\n color: #002b4a;\n }\n .btn-submit {\n background: #fcb913;\n border: none;\n color: #002b4a;\n font-weight: 700;\n font-size: 1.2rem;\n padding: 14px 30px;\n border-radius: 60px;\n cursor: pointer;\n width: 100%;\n transition: 0.2s;\n margin-top: 15px;\n border: 2px solid transparent;\n letter-spacing: 1px;\n }\n .btn-submit:hover {\n background: #e0a50a;\n transform: scale(1.01);\n }\n .btn-submit:disabled {\n opacity: 0.4;\n cursor: not-allowed;\n transform: none;\n }\n .footer-credit {\n text-align: center;\n margin-top: 20px;\n font-size: 0.8rem;\n color: #6f7d8f;\n border-top: 1px solid #dee5ed;\n padding-top: 18px;\n }\n .badge {\n display: inline-block;\n padding: 4px 14px;\n border-radius: 30px;\n font-size: 0.85rem;\n font-weight: 700;\n margin: 5px 0;\n }\n .badge-excellent { background: #1e9b4a; color: white; }\n .badge-good { background: #fcb913; color: #002b4a; }\n .badge-fair { background: #f59e0b; color: white; }\n .badge-poor { background: #c72a2a; color: white; }\n @media (max-width: 550px) {\n .quiz-container { padding: 18px; }\n .quiz-header { margin: -18px -18px 20px -18px; }\n .question-text { font-size: 1rem; }\n .option { padding: 8px 14px; }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"quiz-container\" id=\"app\">\n \n <div class=\"quiz-header\">\n <img decoding=\"async\" src=\"https:\/\/teacherjm.com\/epja\/wp-content\/uploads\/2026\/07\/liverpool.jpg\" alt=\"Liverpool skyline\" onerror=\"this.style.display='none'\">\n <h1>\ud83c\udfd9\ufe0f Liverpool: History, Culture & Geography<\/h1>\n <p>Assessment for 3rd & 4th Year EPJA \u2022 15 multiple-choice questions<\/p>\n <\/div>\n\n \n <div class=\"progress-info\">\n <span id=\"progressText\">Question 1 of 15<\/span>\n <span id=\"answeredCount\">Answered: 0<\/span>\n <button class=\"btn-reset\" id=\"resetQuiz\">\u27f3 Restart Quiz<\/button>\n <\/div>\n\n \n <div id=\"questionsContainer\"><\/div>\n\n \n <button class=\"btn-submit\" id=\"submitQuiz\">\u2705 Check my score<\/button>\n\n \n <div class=\"results-box\" id=\"resultsBox\">\n <h2>\ud83d\udcca Final Results<\/h2>\n <div class=\"score\" id=\"scorePercentage\">0%<\/div>\n \n \n <div class=\"progress-bar-container\">\n <div class=\"progress-bar-fill\" id=\"progressBarFill\">0%<\/div>\n <\/div>\n \n <div class=\"details\" id=\"scoreDetails\">0 correct answers out of 15<\/div>\n <div class=\"details\" style=\"font-size:1.4rem; background: #001a2b; padding: 8px 0; border-radius: 40px; margin: 10px 0;\">\n Grade: <span id=\"finalGrade\">1.0<\/span>\n <\/div>\n <div style=\"font-size:0.95rem; opacity:0.9; margin-top: 5px;\">\n * Chilean grading scale: 60% = 4.0\n <\/div>\n \n \n <div id=\"achievementBadge\" style=\"margin: 10px 0;\"><\/div>\n\n \n <div class=\"remedial-section\" id=\"remedialSection\">\n <h3>\ud83d\udcda Remedial Recommendations<\/h3>\n <div id=\"remedialContent\"><\/div>\n <\/div>\n <\/div>\n\n <div class=\"footer-credit\">\n Quiz designed for EPJA \u2022 Subject: English \/ Social Studies\n <\/div>\n <\/div>\n\n <script>\n (function() {\n 'use strict';\n\n \/\/ ----- QUESTION BANK (15 questions in English) -----\n const QUESTION_BANK = [\n {\n question: \"In which country is the city of Liverpool located?\",\n options: [\"Scotland\", \"Wales\", \"England\", \"Northern Ireland\"],\n correct: 2,\n category: \"Geography\",\n feedback: \"Liverpool is located in England, in the Northwest region, near the Irish Sea.\"\n },\n {\n question: \"What is the most important river that flows through Liverpool?\",\n options: [\"River Thames\", \"River Severn\", \"River Mersey\", \"River Clyde\"],\n correct: 2,\n category: \"Geography\",\n feedback: \"The River Mersey is Liverpool's most iconic river and gave rise to its port.\"\n },\n {\n question: \"Which famous music band originated in Liverpool?\",\n options: [\"The Rolling Stones\", \"The Beatles\", \"Queen\", \"Pink Floyd\"],\n correct: 1,\n category: \"Culture\",\n feedback: \"The Beatles formed in Liverpool in 1960 and are one of the most influential bands in history.\"\n },\n {\n question: \"What is the name of Liverpool's famous historic dock, a UNESCO World Heritage Site?\",\n options: [\"Albert Dock\", \"King's Dock\", \"Stanley Dock\", \"Prince's Dock\"],\n correct: 0,\n category: \"History\",\n feedback: \"Albert Dock is a dock complex opened in 1846 and today is an important cultural center.\"\n },\n {\n question: \"Which football team plays at Anfield stadium?\",\n options: [\"Everton FC\", \"Liverpool FC\", \"Tranmere Rovers\", \"Manchester United\"],\n correct: 1,\n category: \"Culture\",\n feedback: \"Liverpool FC plays at Anfield, while Everton plays at Goodison Park.\"\n },\n {\n question: \"In which century were the two Liverpool Cathedrals (Anglican and Metropolitan) built?\",\n options: [\"Both in the 19th century\", \"20th century (1904\u20131978)\", \"18th century\", \"21st century\"],\n correct: 1,\n category: \"History\",\n feedback: \"The Anglican Cathedral started in 1904 and the Metropolitan in 1962, both in the 20th century.\"\n },\n {\n question: \"What major trade contributed to Liverpool's growth in the 18th century?\",\n options: [\"Cotton trade\", \"Slave trade\", \"Coal trade\", \"Wool trade\"],\n correct: 1,\n category: \"History\",\n feedback: \"The slave trade (and later cotton) was key to Liverpool's economic expansion.\"\n },\n {\n question: \"What is the iconic building next to the River Mersey, known for its large clock?\",\n options: [\"Royal Liver Building\", \"Cunard Building\", \"Port of Liverpool Building\", \"Town Hall\"],\n correct: 0,\n category: \"Geography\",\n feedback: \"The Royal Liver Building, with its famous 'Liver Birds', is the most recognizable landmark.\"\n },\n {\n question: \"Which city is Liverpool's main historical rival in Northwest England?\",\n options: [\"London\", \"Birmingham\", \"Manchester\", \"Leeds\"],\n correct: 2,\n category: \"History\",\n feedback: \"Manchester and Liverpool have a historic industrial and football rivalry.\"\n },\n {\n question: \"What music style, besides rock, has strong roots in Liverpool?\",\n options: [\"Merseybeat\", \"Britpop\", \"Punk\", \"Glam rock\"],\n correct: 0,\n category: \"Culture\",\n feedback: \"Merseybeat was a rock and pop genre that emerged in Liverpool in the early 1960s.\"\n },\n {\n question: \"What important museum about slavery is located in Liverpool?\",\n options: [\"Museum of Slavery\", \"International Slavery Museum\", \"Maritime Museum\", \"Walker Art Gallery\"],\n correct: 1,\n category: \"History\",\n feedback: \"The International Slavery Museum is at Albert Dock and addresses Liverpool's role in the slave trade.\"\n },\n {\n question: \"Which of these is NOT a Beatles album?\",\n options: [\"Sgt. Pepper's\", \"Abbey Road\", \"The Wall\", \"Revolver\"],\n correct: 2,\n category: \"Culture\",\n feedback: \"'The Wall' is by Pink Floyd, not The Beatles.\"\n },\n {\n question: \"Which water sport is very popular on the River Mersey?\",\n options: [\"Rowing\", \"Sailing\", \"Swimming\", \"Fishing\"],\n correct: 1,\n category: \"Culture\",\n feedback: \"Sailing is very popular, with events like the famous 'Mersey River Festival'.\"\n },\n {\n question: \"What is the correct demonym for someone from Liverpool?\",\n options: [\"Liverpoolian\", \"Scouser\", \"Liverpudlian\", \"Liverpooler\"],\n correct: 2,\n category: \"Culture\",\n feedback: \"The formal demonym is 'Liverpudlian', although 'Scouser' is used informally.\"\n },\n {\n question: \"Which famous Romantic poet lived in Liverpool in the early 19th century?\",\n options: [\"William Wordsworth\", \"Samuel Taylor Coleridge\", \"John Keats\", \"Percy Shelley\"],\n correct: 0,\n category: \"History\",\n feedback: \"Wordsworth lived in Liverpool between 1806 and 1807 while working as a customs official.\"\n }\n ];\n\n \/\/ ----- GLOBAL STATE -----\n let currentQuestions = [];\n let userAnswers = [];\n let questionStatus = [];\n let quizCompleted = false;\n\n \/\/ DOM elements\n const container = document.getElementById('questionsContainer');\n const progressText = document.getElementById('progressText');\n const answeredCountSpan = document.getElementById('answeredCount');\n const submitBtn = document.getElementById('submitQuiz');\n const resetBtn = document.getElementById('resetQuiz');\n const resultsBox = document.getElementById('resultsBox');\n const scorePercentage = document.getElementById('scorePercentage');\n const scoreDetails = document.getElementById('scoreDetails');\n const finalGrade = document.getElementById('finalGrade');\n const progressBarFill = document.getElementById('progressBarFill');\n const achievementBadge = document.getElementById('achievementBadge');\n const remedialSection = document.getElementById('remedialSection');\n const remedialContent = document.getElementById('remedialContent');\n\n \/\/ ----- HELPER FUNCTIONS -----\n function shuffleArray(arr) {\n for (let i = arr.length - 1; i > 0; i--) {\n const j = Math.floor(Math.random() * (i + 1));\n [arr[i], arr[j]] = [arr[j], arr[i]];\n }\n return arr;\n }\n\n function buildShuffledQuiz() {\n const shuffled = shuffleArray([...QUESTION_BANK]);\n const selected = shuffled.slice(0, 15);\n return selected.map(q => {\n const opts = q.options.map((text, idx) => ({ text, idx }));\n const shuffledOpts = shuffleArray(opts);\n const newOptions = shuffledOpts.map(item => item.text);\n const newCorrect = shuffledOpts.findIndex(item => item.idx === q.correct);\n return {\n question: q.question,\n options: newOptions,\n correct: newCorrect,\n category: q.category,\n feedback: q.feedback\n };\n });\n }\n\n function resetQuiz() {\n currentQuestions = buildShuffledQuiz();\n userAnswers = new Array(currentQuestions.length).fill(-1);\n questionStatus = new Array(currentQuestions.length).fill('pending');\n quizCompleted = false;\n resultsBox.classList.remove('show');\n remedialSection.classList.remove('show');\n submitBtn.disabled = false;\n submitBtn.textContent = '\u2705 Check my score';\n renderQuestions();\n updateProgressAndStats();\n }\n\n function updateProgressAndStats() {\n const answered = userAnswers.filter(a => a !== -1).length;\n const total = currentQuestions.length;\n answeredCountSpan.textContent = `Answered: ${answered}`;\n let currentIdx = 0;\n for (let i = 0; i < userAnswers.length; i++) {\n if (userAnswers[i] === -1) {\n currentIdx = i;\n break;\n }\n if (i === userAnswers.length - 1) currentIdx = userAnswers.length - 1;\n }\n progressText.textContent = `Question ${currentIdx + 1} of ${total}`;\n }\n\n function renderQuestions() {\n if (!currentQuestions.length) return;\n let html = '';\n currentQuestions.forEach((q, qIndex) => {\n const selectedIdx = userAnswers[qIndex];\n const status = questionStatus[qIndex];\n let cardClass = 'question-card';\n if (status === 'correct') cardClass += ' correct';\n else if (status === 'incorrect') cardClass += ' incorrect';\n\n html += `<div class=\"${cardClass}\" data-qindex=\"${qIndex}\">`;\n html += `<div class=\"question-text\">${qIndex + 1}. ${q.question}<\/div>`;\n html += `<div class=\"options\">`;\n\n q.options.forEach((optText, optIndex) => {\n let optionClass = 'option';\n let disabledAttr = '';\n let checkedAttr = '';\n const isDisabled = quizCompleted || selectedIdx !== -1;\n if (isDisabled) optionClass += ' disabled-option';\n\n if (quizCompleted) {\n if (optIndex === q.correct) optionClass += ' correct-answer';\n if (selectedIdx === optIndex && selectedIdx !== q.correct) optionClass += ' wrong-answer';\n }\n\n if (selectedIdx === optIndex) checkedAttr = 'checked';\n\n html += `\n <label class=\"${optionClass}\">\n <input type=\"radio\" name=\"q${qIndex}\" value=\"${optIndex}\" ${checkedAttr} ${isDisabled ? 'disabled' : ''}>\n ${optText}\n <\/label>\n `;\n });\n\n html += `<\/div>`;\n let feedbackClass = 'feedback';\n if (status === 'correct' || status === 'incorrect') feedbackClass += ' show';\n if (quizCompleted && selectedIdx !== -1) feedbackClass += ' show';\n\n let feedbackText = '';\n if (quizCompleted && selectedIdx !== -1) {\n const isCorrect = (selectedIdx === q.correct);\n feedbackText = `<strong>${isCorrect ? '\u2705 Correct' : '\u274c Incorrect'}:<\/strong> ${q.feedback}`;\n } else if (status === 'correct') {\n feedbackText = `<strong>\u2705 Correct:<\/strong> ${q.feedback}`;\n } else if (status === 'incorrect') {\n feedbackText = `<strong>\u274c Incorrect:<\/strong> ${q.feedback}`;\n } else {\n if (quizCompleted && selectedIdx === -1) {\n feedbackText = `<strong>\u23f3 Unanswered:<\/strong> ${q.feedback}`;\n }\n }\n\n html += `<div class=\"${feedbackClass}\">${feedbackText}<\/div>`;\n html += `<\/div>`;\n });\n\n container.innerHTML = html;\n\n if (!quizCompleted) {\n document.querySelectorAll('.question-card input[type=\"radio\"]').forEach(radio => {\n radio.addEventListener('change', function(e) {\n if (quizCompleted) return;\n const card = this.closest('.question-card');\n const qIndex = parseInt(card.dataset.qindex);\n const selectedValue = parseInt(this.value);\n userAnswers[qIndex] = selectedValue;\n const isCorrect = (selectedValue === currentQuestions[qIndex].correct);\n questionStatus[qIndex] = isCorrect ? 'correct' : 'incorrect';\n renderQuestions();\n updateProgressAndStats();\n const allAnswered = userAnswers.every(a => a !== -1);\n if (allAnswered) {\n submitBtn.disabled = false;\n submitBtn.textContent = '\u2705 Check my score';\n }\n });\n });\n }\n\n if (quizCompleted) {\n document.querySelectorAll('.question-card input[type=\"radio\"]').forEach(r => r.disabled = true);\n }\n\n updateProgressAndStats();\n }\n\n \/\/ ----- GENERATE REMEDIAL RECOMMENDATIONS -----\n function generateRemedials(correctCount, total, categoryStats) {\n let remedials = [];\n const percentage = Math.round((correctCount \/ total) * 100);\n\n \/\/ General recommendation based on performance\n if (percentage >= 80) {\n remedials.push({\n level: 'excellent',\n text: '\ud83c\udf1f Excellent performance! You have a strong understanding of Liverpool\\'s history and culture. Consider exploring more advanced topics like the city\\'s role in the Industrial Revolution.'\n });\n } else if (percentage >= 60) {\n remedials.push({\n level: 'good',\n text: '\ud83d\udcc8 Good job! You have a solid foundation. Focus on the topics where you made mistakes to achieve mastery.'\n });\n } else if (percentage >= 40) {\n remedials.push({\n level: 'fair',\n text: '\ud83d\udcd6 You need to review some key concepts. Pay special attention to the areas where you had difficulties.'\n });\n } else {\n remedials.push({\n level: 'poor',\n text: '\ud83d\udd01 It\\'s important to review the fundamental topics about Liverpool. We recommend starting with the geography and basic history before moving to more complex topics.'\n });\n }\n\n \/\/ Category-specific recommendations\n const weakCategories = Object.keys(categoryStats).filter(cat => \n categoryStats[cat].correct \/ categoryStats[cat].total < 0.6\n );\n\n if (weakCategories.length > 0) {\n remedials.push({\n level: 'specific',\n text: `\ud83c\udfaf Focus on these areas: <strong>${weakCategories.join(', ')}<\/strong>. Review the feedback provided for each question in these categories.`\n });\n }\n\n \/\/ Specific topics to review based on incorrect answers\n let incorrectTopics = [];\n currentQuestions.forEach((q, idx) => {\n if (userAnswers[idx] !== -1 && userAnswers[idx] !== q.correct) {\n incorrectTopics.push(`- ${q.question.substring(0, 60)}...`);\n }\n });\n\n if (incorrectTopics.length > 0) {\n remedials.push({\n level: 'specific',\n text: `\ud83d\udccc Review these specific topics:<br>${incorrectTopics.slice(0, 5).join('<br>')}`\n });\n }\n\n \/\/ Study resources recommendation\n if (percentage < 60) {\n remedials.push({\n level: 'resources',\n text: '\ud83d\udcda Recommended resources: Watch documentaries about Liverpool\\'s history, visit the National Museums Liverpool website, and practice with vocabulary related to the city\\'s landmarks.'\n });\n }\n\n return remedials;\n }\n\n \/\/ ----- SHOW RESULTS WITH REMEDIALS -----\n function showResults() {\n if (quizCompleted) return;\n const allAnswered = userAnswers.every(a => a !== -1);\n if (!allAnswered) {\n alert('Please answer all questions before checking your score.');\n return;\n }\n\n quizCompleted = true;\n let correctCount = 0;\n const categoryStats = {};\n\n \/\/ Calculate results and category stats\n for (let i = 0; i < currentQuestions.length; i++) {\n const isCorrect = (userAnswers[i] === currentQuestions[i].correct);\n if (isCorrect) correctCount++;\n \n const category = currentQuestions[i].category || 'General';\n if (!categoryStats[category]) {\n categoryStats[category] = { correct: 0, total: 0 };\n }\n categoryStats[category].total++;\n if (isCorrect) categoryStats[category].correct++;\n }\n\n const total = currentQuestions.length;\n const percentage = Math.round((correctCount \/ total) * 100);\n\n \/\/ Calculate grade (Chilean scale: 60% = 4.0)\n let grade = 1.0;\n if (percentage >= 60) {\n grade = 1 + (percentage - 60) * (6 \/ 40);\n grade = Math.round(grade * 10) \/ 10;\n } else {\n grade = Math.round((1 + (percentage \/ 60) * 3) * 10) \/ 10;\n }\n if (grade > 7.0) grade = 7.0;\n if (grade < 1.0) grade = 1.0;\n\n \/\/ Display results\n scorePercentage.textContent = `${percentage}%`;\n scoreDetails.textContent = `${correctCount} correct answers out of ${total}`;\n finalGrade.textContent = grade.toFixed(1);\n \n \/\/ Animate progress bar\n setTimeout(() => {\n progressBarFill.style.width = `${percentage}%`;\n progressBarFill.textContent = `${percentage}%`;\n }, 100);\n\n \/\/ Achievement badge\n let badgeHtml = '';\n if (percentage >= 80) {\n badgeHtml = '<span class=\"badge badge-excellent\">\ud83c\udfc6 Excellent \u2013 Outstanding achievement!<\/span>';\n } else if (percentage >= 60) {\n badgeHtml = '<span class=\"badge badge-good\">\ud83d\udc4d Good \u2013 You\\'re on the right track!<\/span>';\n } else if (percentage >= 40) {\n badgeHtml = '<span class=\"badge badge-fair\">\ud83d\udcd6 Fair \u2013 Keep practicing!<\/span>';\n } else {\n badgeHtml = '<span class=\"badge badge-poor\">\ud83d\udd04 Needs improvement \u2013 Review the material!<\/span>';\n }\n achievementBadge.innerHTML = badgeHtml;\n\n \/\/ Generate and display remedial recommendations\n const remedials = generateRemedials(correctCount, total, categoryStats);\n let remedialHtml = '<ul>';\n remedials.forEach(r => {\n remedialHtml += `<li><strong>${r.level === 'excellent' ? '\ud83c\udf1f' : r.level === 'good' ? '\ud83d\udcc8' : r.level === 'fair' ? '\ud83d\udcd6' : r.level === 'poor' ? '\ud83d\udd01' : '\ud83d\udccc'} ${r.text}<\/strong><\/li>`;\n });\n remedialHtml += '<\/ul>';\n remedialContent.innerHTML = remedialHtml;\n remedialSection.classList.add('show');\n\n resultsBox.classList.add('show');\n submitBtn.disabled = true;\n submitBtn.textContent = '\u2705 Quiz completed';\n\n renderQuestions();\n resultsBox.scrollIntoView({ behavior: 'smooth', block: 'center' });\n }\n\n \/\/ ----- INITIALIZATION -----\n function initQuiz() {\n resetQuiz();\n submitBtn.addEventListener('click', showResults);\n resetBtn.addEventListener('click', function() {\n resetQuiz();\n resultsBox.scrollIntoView({ behavior: 'smooth', block: 'start' });\n });\n }\n\n initQuiz();\n })();\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>EPJA Quiz: Liverpool \u2013 History & Culture \ud83c\udfd9\ufe0f Liverpool: History, Culture & Geography Assessment for 3rd & 4th Year EPJA \u2022 15 multiple-choice questions Question 1 of 15 Answered: 0 \u27f3 Restart Quiz \u2705 Check my score \ud83d\udcca Final Results 0% 0% 0 correct answers out of 15 Grade: 1.0 * Chilean grading scale: 60% […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-637","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/teacherjm.com\/epja\/wp-json\/wp\/v2\/pages\/637","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/teacherjm.com\/epja\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/teacherjm.com\/epja\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/teacherjm.com\/epja\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/teacherjm.com\/epja\/wp-json\/wp\/v2\/comments?post=637"}],"version-history":[{"count":2,"href":"https:\/\/teacherjm.com\/epja\/wp-json\/wp\/v2\/pages\/637\/revisions"}],"predecessor-version":[{"id":639,"href":"https:\/\/teacherjm.com\/epja\/wp-json\/wp\/v2\/pages\/637\/revisions\/639"}],"wp:attachment":[{"href":"https:\/\/teacherjm.com\/epja\/wp-json\/wp\/v2\/media?parent=637"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":637,"date":"2026-07-22T02:57:58","date_gmt":"2026-07-22T02:57:58","guid":{"rendered":"https:\/\/teacherjm.com\/epja\/?page_id=637"},"modified":"2026-07-22T03:03:02","modified_gmt":"2026-07-22T03:03:02","slug":"637-2","status":"publish","type":"page","link":"https:\/\/teacherjm.com\/epja\/637-2\/","title":{"rendered":""},"content":{"rendered":"\n \n\n\n \n \n EPJA Quiz: Liverpool \u2013 History & Culture<\/title>\n <style>\n * {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n }\n body {\n font-family: 'Segoe UI', Roboto, Arial, sans-serif;\n background: #f0f4f8;\n display: flex;\n justify-content: center;\n padding: 20px;\n min-height: 100vh;\n }\n .quiz-container {\n max-width: 900px;\n width: 100%;\n background: white;\n border-radius: 28px;\n box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);\n overflow: hidden;\n padding: 25px 30px 35px;\n transition: all 0.2s;\n }\n .quiz-header {\n margin: -25px -30px 25px -30px;\n padding: 0;\n background: #002b4a;\n color: white;\n text-align: center;\n }\n .quiz-header img {\n width: 100%;\n max-height: 220px;\n object-fit: cover;\n display: block;\n border-bottom: 5px solid #fcb913;\n }\n .quiz-header h1 {\n font-size: 1.9rem;\n padding: 20px 20px 10px;\n letter-spacing: 1px;\n font-weight: 600;\n background: #002b4a;\n }\n .quiz-header p {\n font-size: 1rem;\n padding: 0 20px 20px;\n opacity: 0.9;\n background: #002b4a;\n margin: 0;\n }\n .progress-info {\n display: flex;\n justify-content: space-between;\n align-items: center;\n background: #e9edf2;\n padding: 12px 18px;\n border-radius: 40px;\n margin-bottom: 30px;\n font-weight: 500;\n flex-wrap: wrap;\n gap: 10px;\n }\n .progress-info span {\n background: #002b4a;\n color: white;\n padding: 4px 14px;\n border-radius: 30px;\n font-size: 0.9rem;\n }\n .btn-reset {\n background: #fcb913;\n border: none;\n color: #002b4a;\n font-weight: 700;\n padding: 8px 22px;\n border-radius: 30px;\n cursor: pointer;\n font-size: 0.9rem;\n transition: 0.2s;\n border: 2px solid transparent;\n }\n .btn-reset:hover {\n background: #e0a50a;\n transform: scale(1.02);\n }\n .question-card {\n background: #fafcff;\n border-radius: 20px;\n padding: 20px 22px 12px;\n margin-bottom: 20px;\n border-left: 6px solid #fcb913;\n box-shadow: 0 2px 8px rgba(0,0,0,0.04);\n transition: 0.15s;\n }\n .question-card.correct {\n border-left-color: #1e9b4a;\n background: #f0faf3;\n }\n .question-card.incorrect {\n border-left-color: #c72a2a;\n background: #fdf0f0;\n }\n .question-text {\n font-size: 1.08rem;\n font-weight: 600;\n margin-bottom: 12px;\n color: #0b1e2e;\n }\n .options {\n display: flex;\n flex-direction: column;\n gap: 8px;\n margin-bottom: 8px;\n }\n .option {\n display: flex;\n align-items: center;\n gap: 12px;\n background: white;\n padding: 10px 16px;\n border-radius: 40px;\n border: 2px solid #dbe0e8;\n cursor: pointer;\n transition: 0.15s;\n font-weight: 500;\n }\n .option:hover:not(.disabled-option) {\n background: #eef3fa;\n border-color: #a0b3cc;\n }\n .option input[type=\"radio\"] {\n width: 18px;\n height: 18px;\n accent-color: #002b4a;\n cursor: pointer;\n flex-shrink: 0;\n }\n .option.correct-answer {\n border-color: #1e9b4a;\n background: #dff0e3;\n }\n .option.wrong-answer {\n border-color: #c72a2a;\n background: #fce4e4;\n }\n .option.disabled-option {\n opacity: 0.85;\n cursor: default;\n }\n .feedback {\n margin-top: 12px;\n padding: 12px 16px;\n border-radius: 16px;\n background: #f0f4fc;\n border-left: 5px solid #6c8db0;\n font-size: 0.95rem;\n line-height: 1.5;\n display: none;\n }\n .feedback.show {\n display: block;\n }\n .feedback strong {\n color: #002b4a;\n }\n .results-box {\n background: #002b4a;\n color: white;\n padding: 25px 20px;\n border-radius: 30px;\n text-align: center;\n margin: 30px 0 10px;\n display: none;\n box-shadow: 0 6px 0 #001a2b;\n }\n .results-box.show {\n display: block;\n }\n .results-box h2 {\n font-size: 2rem;\n margin-bottom: 5px;\n }\n .results-box .score {\n font-size: 3.8rem;\n font-weight: 800;\n color: #fcb913;\n }\n .results-box .details {\n font-size: 1.1rem;\n margin: 8px 0;\n }\n .progress-bar-container {\n width: 100%;\n background: #1a3a5a;\n border-radius: 30px;\n height: 30px;\n margin: 15px 0;\n overflow: hidden;\n position: relative;\n }\n .progress-bar-fill {\n height: 100%;\n background: linear-gradient(90deg, #fcb913, #f7d44a);\n border-radius: 30px;\n transition: width 1s ease;\n width: 0%;\n display: flex;\n align-items: center;\n justify-content: flex-end;\n padding-right: 10px;\n font-weight: 700;\n color: #002b4a;\n font-size: 0.9rem;\n }\n .remedial-section {\n background: #e9edf2;\n border-radius: 20px;\n padding: 20px;\n margin-top: 20px;\n text-align: left;\n color: #0b1e2e;\n display: none;\n }\n .remedial-section.show {\n display: block;\n }\n .remedial-section h3 {\n color: #002b4a;\n margin-bottom: 10px;\n font-size: 1.2rem;\n border-bottom: 2px solid #fcb913;\n padding-bottom: 5px;\n }\n .remedial-section ul {\n list-style: none;\n padding: 0;\n }\n .remedial-section ul li {\n padding: 8px 12px;\n margin: 5px 0;\n background: white;\n border-radius: 12px;\n border-left: 4px solid #fcb913;\n }\n .remedial-section ul li strong {\n color: #002b4a;\n }\n .btn-submit {\n background: #fcb913;\n border: none;\n color: #002b4a;\n font-weight: 700;\n font-size: 1.2rem;\n padding: 14px 30px;\n border-radius: 60px;\n cursor: pointer;\n width: 100%;\n transition: 0.2s;\n margin-top: 15px;\n border: 2px solid transparent;\n letter-spacing: 1px;\n }\n .btn-submit:hover {\n background: #e0a50a;\n transform: scale(1.01);\n }\n .btn-submit:disabled {\n opacity: 0.4;\n cursor: not-allowed;\n transform: none;\n }\n .footer-credit {\n text-align: center;\n margin-top: 20px;\n font-size: 0.8rem;\n color: #6f7d8f;\n border-top: 1px solid #dee5ed;\n padding-top: 18px;\n }\n .badge {\n display: inline-block;\n padding: 4px 14px;\n border-radius: 30px;\n font-size: 0.85rem;\n font-weight: 700;\n margin: 5px 0;\n }\n .badge-excellent { background: #1e9b4a; color: white; }\n .badge-good { background: #fcb913; color: #002b4a; }\n .badge-fair { background: #f59e0b; color: white; }\n .badge-poor { background: #c72a2a; color: white; }\n @media (max-width: 550px) {\n .quiz-container { padding: 18px; }\n .quiz-header { margin: -18px -18px 20px -18px; }\n .question-text { font-size: 1rem; }\n .option { padding: 8px 14px; }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"quiz-container\" id=\"app\">\n \n <div class=\"quiz-header\">\n <img decoding=\"async\" src=\"https:\/\/teacherjm.com\/epja\/wp-content\/uploads\/2026\/07\/liverpool.jpg\" alt=\"Liverpool skyline\" onerror=\"this.style.display='none'\">\n <h1>\ud83c\udfd9\ufe0f Liverpool: History, Culture & Geography<\/h1>\n <p>Assessment for 3rd & 4th Year EPJA \u2022 15 multiple-choice questions<\/p>\n <\/div>\n\n \n <div class=\"progress-info\">\n <span id=\"progressText\">Question 1 of 15<\/span>\n <span id=\"answeredCount\">Answered: 0<\/span>\n <button class=\"btn-reset\" id=\"resetQuiz\">\u27f3 Restart Quiz<\/button>\n <\/div>\n\n \n <div id=\"questionsContainer\"><\/div>\n\n \n <button class=\"btn-submit\" id=\"submitQuiz\">\u2705 Check my score<\/button>\n\n \n <div class=\"results-box\" id=\"resultsBox\">\n <h2>\ud83d\udcca Final Results<\/h2>\n <div class=\"score\" id=\"scorePercentage\">0%<\/div>\n \n \n <div class=\"progress-bar-container\">\n <div class=\"progress-bar-fill\" id=\"progressBarFill\">0%<\/div>\n <\/div>\n \n <div class=\"details\" id=\"scoreDetails\">0 correct answers out of 15<\/div>\n <div class=\"details\" style=\"font-size:1.4rem; background: #001a2b; padding: 8px 0; border-radius: 40px; margin: 10px 0;\">\n Grade: <span id=\"finalGrade\">1.0<\/span>\n <\/div>\n <div style=\"font-size:0.95rem; opacity:0.9; margin-top: 5px;\">\n * Chilean grading scale: 60% = 4.0\n <\/div>\n \n \n <div id=\"achievementBadge\" style=\"margin: 10px 0;\"><\/div>\n\n \n <div class=\"remedial-section\" id=\"remedialSection\">\n <h3>\ud83d\udcda Remedial Recommendations<\/h3>\n <div id=\"remedialContent\"><\/div>\n <\/div>\n <\/div>\n\n <div class=\"footer-credit\">\n Quiz designed for EPJA \u2022 Subject: English \/ Social Studies\n <\/div>\n <\/div>\n\n <script>\n (function() {\n 'use strict';\n\n \/\/ ----- QUESTION BANK (15 questions in English) -----\n const QUESTION_BANK = [\n {\n question: \"In which country is the city of Liverpool located?\",\n options: [\"Scotland\", \"Wales\", \"England\", \"Northern Ireland\"],\n correct: 2,\n category: \"Geography\",\n feedback: \"Liverpool is located in England, in the Northwest region, near the Irish Sea.\"\n },\n {\n question: \"What is the most important river that flows through Liverpool?\",\n options: [\"River Thames\", \"River Severn\", \"River Mersey\", \"River Clyde\"],\n correct: 2,\n category: \"Geography\",\n feedback: \"The River Mersey is Liverpool's most iconic river and gave rise to its port.\"\n },\n {\n question: \"Which famous music band originated in Liverpool?\",\n options: [\"The Rolling Stones\", \"The Beatles\", \"Queen\", \"Pink Floyd\"],\n correct: 1,\n category: \"Culture\",\n feedback: \"The Beatles formed in Liverpool in 1960 and are one of the most influential bands in history.\"\n },\n {\n question: \"What is the name of Liverpool's famous historic dock, a UNESCO World Heritage Site?\",\n options: [\"Albert Dock\", \"King's Dock\", \"Stanley Dock\", \"Prince's Dock\"],\n correct: 0,\n category: \"History\",\n feedback: \"Albert Dock is a dock complex opened in 1846 and today is an important cultural center.\"\n },\n {\n question: \"Which football team plays at Anfield stadium?\",\n options: [\"Everton FC\", \"Liverpool FC\", \"Tranmere Rovers\", \"Manchester United\"],\n correct: 1,\n category: \"Culture\",\n feedback: \"Liverpool FC plays at Anfield, while Everton plays at Goodison Park.\"\n },\n {\n question: \"In which century were the two Liverpool Cathedrals (Anglican and Metropolitan) built?\",\n options: [\"Both in the 19th century\", \"20th century (1904\u20131978)\", \"18th century\", \"21st century\"],\n correct: 1,\n category: \"History\",\n feedback: \"The Anglican Cathedral started in 1904 and the Metropolitan in 1962, both in the 20th century.\"\n },\n {\n question: \"What major trade contributed to Liverpool's growth in the 18th century?\",\n options: [\"Cotton trade\", \"Slave trade\", \"Coal trade\", \"Wool trade\"],\n correct: 1,\n category: \"History\",\n feedback: \"The slave trade (and later cotton) was key to Liverpool's economic expansion.\"\n },\n {\n question: \"What is the iconic building next to the River Mersey, known for its large clock?\",\n options: [\"Royal Liver Building\", \"Cunard Building\", \"Port of Liverpool Building\", \"Town Hall\"],\n correct: 0,\n category: \"Geography\",\n feedback: \"The Royal Liver Building, with its famous 'Liver Birds', is the most recognizable landmark.\"\n },\n {\n question: \"Which city is Liverpool's main historical rival in Northwest England?\",\n options: [\"London\", \"Birmingham\", \"Manchester\", \"Leeds\"],\n correct: 2,\n category: \"History\",\n feedback: \"Manchester and Liverpool have a historic industrial and football rivalry.\"\n },\n {\n question: \"What music style, besides rock, has strong roots in Liverpool?\",\n options: [\"Merseybeat\", \"Britpop\", \"Punk\", \"Glam rock\"],\n correct: 0,\n category: \"Culture\",\n feedback: \"Merseybeat was a rock and pop genre that emerged in Liverpool in the early 1960s.\"\n },\n {\n question: \"What important museum about slavery is located in Liverpool?\",\n options: [\"Museum of Slavery\", \"International Slavery Museum\", \"Maritime Museum\", \"Walker Art Gallery\"],\n correct: 1,\n category: \"History\",\n feedback: \"The International Slavery Museum is at Albert Dock and addresses Liverpool's role in the slave trade.\"\n },\n {\n question: \"Which of these is NOT a Beatles album?\",\n options: [\"Sgt. Pepper's\", \"Abbey Road\", \"The Wall\", \"Revolver\"],\n correct: 2,\n category: \"Culture\",\n feedback: \"'The Wall' is by Pink Floyd, not The Beatles.\"\n },\n {\n question: \"Which water sport is very popular on the River Mersey?\",\n options: [\"Rowing\", \"Sailing\", \"Swimming\", \"Fishing\"],\n correct: 1,\n category: \"Culture\",\n feedback: \"Sailing is very popular, with events like the famous 'Mersey River Festival'.\"\n },\n {\n question: \"What is the correct demonym for someone from Liverpool?\",\n options: [\"Liverpoolian\", \"Scouser\", \"Liverpudlian\", \"Liverpooler\"],\n correct: 2,\n category: \"Culture\",\n feedback: \"The formal demonym is 'Liverpudlian', although 'Scouser' is used informally.\"\n },\n {\n question: \"Which famous Romantic poet lived in Liverpool in the early 19th century?\",\n options: [\"William Wordsworth\", \"Samuel Taylor Coleridge\", \"John Keats\", \"Percy Shelley\"],\n correct: 0,\n category: \"History\",\n feedback: \"Wordsworth lived in Liverpool between 1806 and 1807 while working as a customs official.\"\n }\n ];\n\n \/\/ ----- GLOBAL STATE -----\n let currentQuestions = [];\n let userAnswers = [];\n let questionStatus = [];\n let quizCompleted = false;\n\n \/\/ DOM elements\n const container = document.getElementById('questionsContainer');\n const progressText = document.getElementById('progressText');\n const answeredCountSpan = document.getElementById('answeredCount');\n const submitBtn = document.getElementById('submitQuiz');\n const resetBtn = document.getElementById('resetQuiz');\n const resultsBox = document.getElementById('resultsBox');\n const scorePercentage = document.getElementById('scorePercentage');\n const scoreDetails = document.getElementById('scoreDetails');\n const finalGrade = document.getElementById('finalGrade');\n const progressBarFill = document.getElementById('progressBarFill');\n const achievementBadge = document.getElementById('achievementBadge');\n const remedialSection = document.getElementById('remedialSection');\n const remedialContent = document.getElementById('remedialContent');\n\n \/\/ ----- HELPER FUNCTIONS -----\n function shuffleArray(arr) {\n for (let i = arr.length - 1; i > 0; i--) {\n const j = Math.floor(Math.random() * (i + 1));\n [arr[i], arr[j]] = [arr[j], arr[i]];\n }\n return arr;\n }\n\n function buildShuffledQuiz() {\n const shuffled = shuffleArray([...QUESTION_BANK]);\n const selected = shuffled.slice(0, 15);\n return selected.map(q => {\n const opts = q.options.map((text, idx) => ({ text, idx }));\n const shuffledOpts = shuffleArray(opts);\n const newOptions = shuffledOpts.map(item => item.text);\n const newCorrect = shuffledOpts.findIndex(item => item.idx === q.correct);\n return {\n question: q.question,\n options: newOptions,\n correct: newCorrect,\n category: q.category,\n feedback: q.feedback\n };\n });\n }\n\n function resetQuiz() {\n currentQuestions = buildShuffledQuiz();\n userAnswers = new Array(currentQuestions.length).fill(-1);\n questionStatus = new Array(currentQuestions.length).fill('pending');\n quizCompleted = false;\n resultsBox.classList.remove('show');\n remedialSection.classList.remove('show');\n submitBtn.disabled = false;\n submitBtn.textContent = '\u2705 Check my score';\n renderQuestions();\n updateProgressAndStats();\n }\n\n function updateProgressAndStats() {\n const answered = userAnswers.filter(a => a !== -1).length;\n const total = currentQuestions.length;\n answeredCountSpan.textContent = `Answered: ${answered}`;\n let currentIdx = 0;\n for (let i = 0; i < userAnswers.length; i++) {\n if (userAnswers[i] === -1) {\n currentIdx = i;\n break;\n }\n if (i === userAnswers.length - 1) currentIdx = userAnswers.length - 1;\n }\n progressText.textContent = `Question ${currentIdx + 1} of ${total}`;\n }\n\n function renderQuestions() {\n if (!currentQuestions.length) return;\n let html = '';\n currentQuestions.forEach((q, qIndex) => {\n const selectedIdx = userAnswers[qIndex];\n const status = questionStatus[qIndex];\n let cardClass = 'question-card';\n if (status === 'correct') cardClass += ' correct';\n else if (status === 'incorrect') cardClass += ' incorrect';\n\n html += `<div class=\"${cardClass}\" data-qindex=\"${qIndex}\">`;\n html += `<div class=\"question-text\">${qIndex + 1}. ${q.question}<\/div>`;\n html += `<div class=\"options\">`;\n\n q.options.forEach((optText, optIndex) => {\n let optionClass = 'option';\n let disabledAttr = '';\n let checkedAttr = '';\n const isDisabled = quizCompleted || selectedIdx !== -1;\n if (isDisabled) optionClass += ' disabled-option';\n\n if (quizCompleted) {\n if (optIndex === q.correct) optionClass += ' correct-answer';\n if (selectedIdx === optIndex && selectedIdx !== q.correct) optionClass += ' wrong-answer';\n }\n\n if (selectedIdx === optIndex) checkedAttr = 'checked';\n\n html += `\n <label class=\"${optionClass}\">\n <input type=\"radio\" name=\"q${qIndex}\" value=\"${optIndex}\" ${checkedAttr} ${isDisabled ? 'disabled' : ''}>\n ${optText}\n <\/label>\n `;\n });\n\n html += `<\/div>`;\n let feedbackClass = 'feedback';\n if (status === 'correct' || status === 'incorrect') feedbackClass += ' show';\n if (quizCompleted && selectedIdx !== -1) feedbackClass += ' show';\n\n let feedbackText = '';\n if (quizCompleted && selectedIdx !== -1) {\n const isCorrect = (selectedIdx === q.correct);\n feedbackText = `<strong>${isCorrect ? '\u2705 Correct' : '\u274c Incorrect'}:<\/strong> ${q.feedback}`;\n } else if (status === 'correct') {\n feedbackText = `<strong>\u2705 Correct:<\/strong> ${q.feedback}`;\n } else if (status === 'incorrect') {\n feedbackText = `<strong>\u274c Incorrect:<\/strong> ${q.feedback}`;\n } else {\n if (quizCompleted && selectedIdx === -1) {\n feedbackText = `<strong>\u23f3 Unanswered:<\/strong> ${q.feedback}`;\n }\n }\n\n html += `<div class=\"${feedbackClass}\">${feedbackText}<\/div>`;\n html += `<\/div>`;\n });\n\n container.innerHTML = html;\n\n if (!quizCompleted) {\n document.querySelectorAll('.question-card input[type=\"radio\"]').forEach(radio => {\n radio.addEventListener('change', function(e) {\n if (quizCompleted) return;\n const card = this.closest('.question-card');\n const qIndex = parseInt(card.dataset.qindex);\n const selectedValue = parseInt(this.value);\n userAnswers[qIndex] = selectedValue;\n const isCorrect = (selectedValue === currentQuestions[qIndex].correct);\n questionStatus[qIndex] = isCorrect ? 'correct' : 'incorrect';\n renderQuestions();\n updateProgressAndStats();\n const allAnswered = userAnswers.every(a => a !== -1);\n if (allAnswered) {\n submitBtn.disabled = false;\n submitBtn.textContent = '\u2705 Check my score';\n }\n });\n });\n }\n\n if (quizCompleted) {\n document.querySelectorAll('.question-card input[type=\"radio\"]').forEach(r => r.disabled = true);\n }\n\n updateProgressAndStats();\n }\n\n \/\/ ----- GENERATE REMEDIAL RECOMMENDATIONS -----\n function generateRemedials(correctCount, total, categoryStats) {\n let remedials = [];\n const percentage = Math.round((correctCount \/ total) * 100);\n\n \/\/ General recommendation based on performance\n if (percentage >= 80) {\n remedials.push({\n level: 'excellent',\n text: '\ud83c\udf1f Excellent performance! You have a strong understanding of Liverpool\\'s history and culture. Consider exploring more advanced topics like the city\\'s role in the Industrial Revolution.'\n });\n } else if (percentage >= 60) {\n remedials.push({\n level: 'good',\n text: '\ud83d\udcc8 Good job! You have a solid foundation. Focus on the topics where you made mistakes to achieve mastery.'\n });\n } else if (percentage >= 40) {\n remedials.push({\n level: 'fair',\n text: '\ud83d\udcd6 You need to review some key concepts. Pay special attention to the areas where you had difficulties.'\n });\n } else {\n remedials.push({\n level: 'poor',\n text: '\ud83d\udd01 It\\'s important to review the fundamental topics about Liverpool. We recommend starting with the geography and basic history before moving to more complex topics.'\n });\n }\n\n \/\/ Category-specific recommendations\n const weakCategories = Object.keys(categoryStats).filter(cat => \n categoryStats[cat].correct \/ categoryStats[cat].total < 0.6\n );\n\n if (weakCategories.length > 0) {\n remedials.push({\n level: 'specific',\n text: `\ud83c\udfaf Focus on these areas: <strong>${weakCategories.join(', ')}<\/strong>. Review the feedback provided for each question in these categories.`\n });\n }\n\n \/\/ Specific topics to review based on incorrect answers\n let incorrectTopics = [];\n currentQuestions.forEach((q, idx) => {\n if (userAnswers[idx] !== -1 && userAnswers[idx] !== q.correct) {\n incorrectTopics.push(`- ${q.question.substring(0, 60)}...`);\n }\n });\n\n if (incorrectTopics.length > 0) {\n remedials.push({\n level: 'specific',\n text: `\ud83d\udccc Review these specific topics:<br>${incorrectTopics.slice(0, 5).join('<br>')}`\n });\n }\n\n \/\/ Study resources recommendation\n if (percentage < 60) {\n remedials.push({\n level: 'resources',\n text: '\ud83d\udcda Recommended resources: Watch documentaries about Liverpool\\'s history, visit the National Museums Liverpool website, and practice with vocabulary related to the city\\'s landmarks.'\n });\n }\n\n return remedials;\n }\n\n \/\/ ----- SHOW RESULTS WITH REMEDIALS -----\n function showResults() {\n if (quizCompleted) return;\n const allAnswered = userAnswers.every(a => a !== -1);\n if (!allAnswered) {\n alert('Please answer all questions before checking your score.');\n return;\n }\n\n quizCompleted = true;\n let correctCount = 0;\n const categoryStats = {};\n\n \/\/ Calculate results and category stats\n for (let i = 0; i < currentQuestions.length; i++) {\n const isCorrect = (userAnswers[i] === currentQuestions[i].correct);\n if (isCorrect) correctCount++;\n \n const category = currentQuestions[i].category || 'General';\n if (!categoryStats[category]) {\n categoryStats[category] = { correct: 0, total: 0 };\n }\n categoryStats[category].total++;\n if (isCorrect) categoryStats[category].correct++;\n }\n\n const total = currentQuestions.length;\n const percentage = Math.round((correctCount \/ total) * 100);\n\n \/\/ Calculate grade (Chilean scale: 60% = 4.0)\n let grade = 1.0;\n if (percentage >= 60) {\n grade = 1 + (percentage - 60) * (6 \/ 40);\n grade = Math.round(grade * 10) \/ 10;\n } else {\n grade = Math.round((1 + (percentage \/ 60) * 3) * 10) \/ 10;\n }\n if (grade > 7.0) grade = 7.0;\n if (grade < 1.0) grade = 1.0;\n\n \/\/ Display results\n scorePercentage.textContent = `${percentage}%`;\n scoreDetails.textContent = `${correctCount} correct answers out of ${total}`;\n finalGrade.textContent = grade.toFixed(1);\n \n \/\/ Animate progress bar\n setTimeout(() => {\n progressBarFill.style.width = `${percentage}%`;\n progressBarFill.textContent = `${percentage}%`;\n }, 100);\n\n \/\/ Achievement badge\n let badgeHtml = '';\n if (percentage >= 80) {\n badgeHtml = '<span class=\"badge badge-excellent\">\ud83c\udfc6 Excellent \u2013 Outstanding achievement!<\/span>';\n } else if (percentage >= 60) {\n badgeHtml = '<span class=\"badge badge-good\">\ud83d\udc4d Good \u2013 You\\'re on the right track!<\/span>';\n } else if (percentage >= 40) {\n badgeHtml = '<span class=\"badge badge-fair\">\ud83d\udcd6 Fair \u2013 Keep practicing!<\/span>';\n } else {\n badgeHtml = '<span class=\"badge badge-poor\">\ud83d\udd04 Needs improvement \u2013 Review the material!<\/span>';\n }\n achievementBadge.innerHTML = badgeHtml;\n\n \/\/ Generate and display remedial recommendations\n const remedials = generateRemedials(correctCount, total, categoryStats);\n let remedialHtml = '<ul>';\n remedials.forEach(r => {\n remedialHtml += `<li><strong>${r.level === 'excellent' ? '\ud83c\udf1f' : r.level === 'good' ? '\ud83d\udcc8' : r.level === 'fair' ? '\ud83d\udcd6' : r.level === 'poor' ? '\ud83d\udd01' : '\ud83d\udccc'} ${r.text}<\/strong><\/li>`;\n });\n remedialHtml += '<\/ul>';\n remedialContent.innerHTML = remedialHtml;\n remedialSection.classList.add('show');\n\n resultsBox.classList.add('show');\n submitBtn.disabled = true;\n submitBtn.textContent = '\u2705 Quiz completed';\n\n renderQuestions();\n resultsBox.scrollIntoView({ behavior: 'smooth', block: 'center' });\n }\n\n \/\/ ----- INITIALIZATION -----\n function initQuiz() {\n resetQuiz();\n submitBtn.addEventListener('click', showResults);\n resetBtn.addEventListener('click', function() {\n resetQuiz();\n resultsBox.scrollIntoView({ behavior: 'smooth', block: 'start' });\n });\n }\n\n initQuiz();\n })();\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>EPJA Quiz: Liverpool \u2013 History & Culture \ud83c\udfd9\ufe0f Liverpool: History, Culture & Geography Assessment for 3rd & 4th Year EPJA \u2022 15 multiple-choice questions Question 1 of 15 Answered: 0 \u27f3 Restart Quiz \u2705 Check my score \ud83d\udcca Final Results 0% 0% 0 correct answers out of 15 Grade: 1.0 * Chilean grading scale: 60% […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-637","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/teacherjm.com\/epja\/wp-json\/wp\/v2\/pages\/637","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/teacherjm.com\/epja\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/teacherjm.com\/epja\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/teacherjm.com\/epja\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/teacherjm.com\/epja\/wp-json\/wp\/v2\/comments?post=637"}],"version-history":[{"count":2,"href":"https:\/\/teacherjm.com\/epja\/wp-json\/wp\/v2\/pages\/637\/revisions"}],"predecessor-version":[{"id":639,"href":"https:\/\/teacherjm.com\/epja\/wp-json\/wp\/v2\/pages\/637\/revisions\/639"}],"wp:attachment":[{"href":"https:\/\/teacherjm.com\/epja\/wp-json\/wp\/v2\/media?parent=637"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}