Population Quiz \u00b7 EPJA \u00b7 con imagen<\/title>\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n font-family: 'Segoe UI', Roboto, system-ui, sans-serif;\n }\n body {\n background: linear-gradient(145deg, #f2f6fc 0%, #dce6f0 100%);\n min-height: 100vh;\n padding: 30px 20px;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n .container {\n max-width: 950px;\n width: 100%;\n background: rgba(255,255,255,0.92);\n backdrop-filter: blur(6px);\n border-radius: 48px;\n padding: 35px 40px;\n box-shadow: 0 20px 40px rgba(0,20,40,0.2);\n border: 1px solid rgba(255,255,255,0.6);\n }\n h1 {\n font-size: 2.2rem;\n color: #0b2a3b;\n border-bottom: 3px solid #b6c9db;\n padding-bottom: 16px;\n margin-bottom: 20px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n flex-wrap: wrap;\n }\n h1 small {\n font-size: 1rem;\n font-weight: 400;\n background: #1d4f6e;\n color: white;\n padding: 6px 22px;\n border-radius: 60px;\n }\n .header-image {\n width: 100%;\n border-radius: 28px;\n margin-bottom: 25px;\n border: 2px solid #cbdbe9;\n background: #e8eff8;\n padding: 10px;\n text-align: center;\n }\n .header-image img {\n max-width: 100%;\n height: auto;\n border-radius: 18px;\n display: block;\n margin: 0 auto;\n }\n .header-image .caption {\n margin-top: 8px;\n font-size: 0.9rem;\n color: #3a5b70;\n }\n .question {\n background: #f5f9ff;\n border-radius: 24px;\n padding: 18px 24px;\n margin-bottom: 14px;\n border-left: 6px solid #2a5e7a;\n box-shadow: 0 2px 8px rgba(0,0,0,0.02);\n }\n .question p {\n font-weight: 600;\n color: #0b2a3b;\n font-size: 1.05rem;\n margin-bottom: 12px;\n }\n .options {\n display: flex;\n flex-wrap: wrap;\n gap: 12px 28px;\n align-items: center;\n }\n .options label {\n display: flex;\n align-items: center;\n gap: 8px;\n background: white;\n padding: 5px 18px 5px 12px;\n border-radius: 60px;\n border: 1px solid #cedae9;\n cursor: pointer;\n transition: 0.15s;\n font-size: 0.95rem;\n }\n .options label:hover {\n background: #e2ebf7;\n border-color: #6d8db0;\n }\n input[type=\"radio\"] {\n accent-color: #2a5e7a;\n width: 17px;\n height: 17px;\n cursor: pointer;\n }\n .btn-submit {\n background: #1d4f6e;\n border: none;\n color: white;\n font-size: 1.3rem;\n font-weight: 600;\n padding: 16px 28px;\n border-radius: 80px;\n width: 100%;\n cursor: pointer;\n transition: 0.2s;\n box-shadow: 0 8px 18px -6px #1f4b66;\n margin-top: 10px;\n }\n .btn-submit:hover {\n background: #0e3b55;\n transform: scale(1.01);\n }\n .btn-submit:active {\n transform: scale(0.97);\n }\n .feedback-area {\n margin-top: 30px;\n background: #ffffffd9;\n backdrop-filter: blur(4px);\n border-radius: 32px;\n padding: 22px 28px;\n border: 1px solid #bcd0e3;\n display: none;\n }\n .feedback-area.show {\n display: block;\n animation: fadeSlide 0.4s ease;\n }\n @keyframes fadeSlide {\n 0% { opacity: 0; transform: translateY(12px); }\n 100% { opacity: 1; transform: translateY(0); }\n }\n .result-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n flex-wrap: wrap;\n margin-bottom: 14px;\n }\n .score-badge {\n background: #1f4f6b;\n color: white;\n padding: 10px 30px;\n border-radius: 60px;\n font-size: 2rem;\n font-weight: 700;\n letter-spacing: 1px;\n }\n .grade-box {\n background: #dce8f5;\n padding: 10px 28px;\n border-radius: 60px;\n font-weight: 600;\n color: #0c3045;\n font-size: 1.1rem;\n }\n .grade-box span {\n background: #0c3045;\n color: white;\n padding: 4px 18px;\n border-radius: 40px;\n margin-left: 6px;\n }\n .detail-list {\n margin: 12px 0 16px 0;\n max-height: 220px;\n overflow-y: auto;\n background: #f3f8ff;\n padding: 12px 18px;\n border-radius: 20px;\n font-size: 0.95rem;\n }\n .detail-item {\n padding: 4px 0;\n }\n .detail-item.correct { color: #0d6b2b; }\n .detail-item.wrong { color: #a12424; }\n .detail-item.empty { color: #6f7d8c; }\n .recomendaciones {\n background: #e3edfa;\n padding: 16px 22px;\n border-radius: 24px;\n border-left: 8px solid #256481;\n }\n .recomendaciones h4 {\n color: #0b3349;\n margin-bottom: 4px;\n }\n .recomendaciones ul {\n padding-left: 22px;\n color: #113344;\n line-height: 1.5;\n }\n .footnote {\n margin-top: 12px;\n font-size: 0.9rem;\n color: #3b5f78;\n text-align: right;\n }\n .correct-answer {\n background: #d4edda;\n border-left: 6px solid #1f8b4c;\n }\n .wrong-answer {\n background: #f8dddd;\n border-left: 6px solid #b34141;\n }\n .neutral-answer {\n background: #f5f9ff;\n }\n @media (max-width: 600px) {\n .container { padding: 20px; }\n h1 { font-size: 1.7rem; }\n .options { gap: 8px; }\n .options label { padding: 4px 12px; font-size: 0.9rem; }\n }\n <\/style>\n<\/head>\n<body>\n<div class=\"container\">\n\n <h1>\n \ud83c\udf0d Population Evolution\n <small>EPJA \u00b7 2\u00b0-3\u00b0 Medio<\/small>\n <\/h1>\n\n \n <div class=\"header-image\">\n <img decoding=\"async\" src=\"https:\/\/teacherjm.com\/epja\/wp-content\/uploads\/2026\/07\/descarga-12.jpg\" \n alt=\"World Population Evolution Chart\" \n onerror=\"this.style.display='none'; this.parentElement.innerHTML='<p style=\\'padding:20px; color:#6f8da0;\\'>\u26a0\ufe0f Image not available. Please check your internet connection.<\/p>‘;”>\n <div class=\"caption\">\ud83d\udcca World Population (millions) \u00b7 1950\u20132020<\/div>\n <\/div>\n\n \n <div id=\"questionsContainer\"><\/div>\n\n <button class=\"btn-submit\" id=\"submitBtn\">\u2705 Check answers \u00b7 Get grade<\/button>\n\n \n <div class=\"feedback-area\" id=\"feedbackArea\">\n <div class=\"result-header\">\n <div class=\"score-badge\" id=\"scoreDisplay\">0%<\/div>\n <div class=\"grade-box\" id=\"gradeDisplay\">\ud83d\udcca Nota: <span>\u2014<\/span><\/div>\n <\/div>\n <div id=\"summaryMsg\" style=\"font-weight:500; color:#1b4057; margin-bottom:8px;\"><\/div>\n <div class=\"detail-list\" id=\"detailList\"><\/div>\n <div class=\"recomendaciones\">\n <h4>\ud83d\udcc8 Recommendations<\/h4>\n <ul id=\"recommendationsList\">\n <li>Answer all questions to get personalized feedback.<\/li>\n <\/ul>\n <\/div>\n <div class=\"footnote\">\u2728 EPJA \u00b7 Population data analysis<\/div>\n <\/div>\n\n<\/div>\n\n<script>\n (function() {\n \/\/ ---------- 10 PREGUNTAS (basadas en la imagen) ----------\n const questions = [\n {\n q: '1. What was the population of China in 1950?',\n opts: ['a) 500 million', 'b) 550 million', 'c) 600 million', 'd) 650 million'],\n correct: 1\n },\n {\n q: '2. In which year did India\u2019s population reach 600 million?',\n opts: ['a) 1985', 'b) 1990', 'c) 1995', 'd) 2000'],\n correct: 1\n },\n {\n q: '3. How much did the USA population increase from 1950 to 1970?',\n opts: ['a) 20 million', 'b) 30 million', 'c) 40 million', 'd) 50 million'],\n correct: 2 \/\/ 150 \u2192 190 = 40\n },\n {\n q: '4. Which country had the smallest population in 1960?',\n opts: ['a) Brazil', 'b) Nigeria', 'c) USA', 'd) India'],\n correct: 1 \/\/ Nigeria 30\n },\n {\n q: '5. What was Brazil\\'s population in 1980?',\n opts: ['a) 70 million', 'b) 75 million', 'c) 80 million', 'd) 85 million'],\n correct: 2 \/\/ 80\n },\n {\n q: '6. Between 1970 and 1990, China\\'s population increased by:',\n opts: ['a) 150 million', 'b) 200 million', 'c) 250 million', 'd) 300 million'],\n correct: 1 \/\/ 750 \u2192 950 = 200\n },\n {\n q: '7. In which year did Nigeria\u2019s population surpass 80 million?',\n opts: ['a) 2005', 'b) 2010', 'c) 2015', 'd) 2020'],\n correct: 1 \/\/ 80 in 2010\n },\n {\n q: '8. Which country\u2019s population doubled between 1950 and 2000?',\n opts: ['a) China', 'b) India', 'c) USA', 'd) Nigeria'],\n correct: 3 \/\/ Nigeria: 20 \u2192 70 (more than double)\n },\n {\n q: '9. What was the total population of the USA and Brazil in 1975?',\n opts: ['a) 250 million', 'b) 260 million', 'c) 275 million', 'd) 290 million'],\n correct: 2 \/\/ 200 + 75 = 275\n },\n {\n q: '10. According to the table, which country had the most people in 2020?',\n opts: ['a) China', 'b) India', 'c) USA', 'd) Brazil'],\n correct: 0 \/\/ China 1250\n }\n ];\n\n const totalQuestions = questions.length;\n let userAnswers = new Array(totalQuestions).fill(null);\n\n \/\/ ---------- RENDER ----------\n function renderQuestions() {\n const container = document.getElementById('questionsContainer');\n let html = '';\n questions.forEach((q, index) => {\n const optionsHTML = q.opts.map((opt, optIndex) => `\n <label>\n <input type=\"radio\" name=\"q${index}\" value=\"${optIndex}\" data-index=\"${index}\">\n ${opt}\n <\/label>\n `).join('');\n html += `\n <div class=\"question neutral-answer\" id=\"qContainer${index}\">\n <p>${q.q}<\/p>\n <div class=\"options\">${optionsHTML}<\/div>\n <\/div>\n `;\n });\n container.innerHTML = html;\n }\n\n \/\/ ---------- CAPTURAR RESPUESTAS ----------\n function captureAnswers() {\n document.querySelectorAll('input[type=\"radio\"]').forEach(radio => {\n radio.addEventListener('change', function() {\n const index = parseInt(this.dataset.index);\n const value = parseInt(this.value);\n if (!isNaN(index) && !isNaN(value)) {\n userAnswers[index] = value;\n }\n });\n });\n }\n\n \/\/ ---------- FEEDBACK ----------\n function showFeedback() {\n const feedbackArea = document.getElementById('feedbackArea');\n const scoreDisplay = document.getElementById('scoreDisplay');\n const gradeDisplay = document.getElementById('gradeDisplay');\n const summaryMsg = document.getElementById('summaryMsg');\n const detailList = document.getElementById('detailList');\n const recommendationsList = document.getElementById('recommendationsList');\n\n let answeredCount = 0, correctCount = 0;\n const details = [];\n\n for (let i = 0; i < totalQuestions; i++) {\n const userAns = userAnswers[i];\n const question = questions[i];\n const container = document.getElementById(`qContainer${i}`);\n if (!container) continue;\n\n container.classList.remove('correct-answer', 'wrong-answer', 'neutral-answer');\n\n if (userAns === null || userAns === undefined) {\n container.classList.add('neutral-answer');\n details.push({ text: `\u2753 Q${i+1}: Not answered`, type: 'empty' });\n } else {\n answeredCount++;\n const isCorrect = (userAns === question.correct);\n if (isCorrect) {\n correctCount++;\n container.classList.add('correct-answer');\n details.push({ text: `\u2705 Q${i+1}: Correct`, type: 'correct' });\n } else {\n container.classList.add('wrong-answer');\n const correctText = question.opts[question.correct];\n details.push({ text: `\u274c Q${i+1}: Incorrect (correct: ${correctText})`, type: 'wrong' });\n }\n }\n }\n\n \/\/ Porcentaje y nota (escala 1.0 a 7.0)\n const percentage = answeredCount === 0 ? 0 : Math.round((correctCount \/ totalQuestions) * 100);\n const grade = answeredCount === 0 ? 1.0 : Math.round(((correctCount \/ totalQuestions) * 6 + 1) * 10) \/ 10;\n\n scoreDisplay.textContent = `${percentage}%`;\n gradeDisplay.innerHTML = `\ud83d\udcca Nota: <span>${grade.toFixed(1)}<\/span>`;\n\n if (answeredCount === 0) {\n summaryMsg.textContent = '\u26a0\ufe0f You have not answered any questions. Please complete the quiz.';\n } else {\n const rest = totalQuestions - answeredCount;\n let msg = `You answered ${answeredCount} out of ${totalQuestions}. `;\n msg += rest > 0 ? `You missed ${rest} question(s). ` : '\ud83c\udf89 You answered all! ';\n summaryMsg.textContent = msg;\n }\n\n detailList.innerHTML = details.map(d => \n `<div class=\"detail-item ${d.type}\">${d.text}<\/div>`\n ).join('');\n\n let recommendations = [];\n if (grade >= 6.0) {\n recommendations = [\n '\ud83c\udf1f Excellent! You have a great understanding of population trends.',\n '\ud83d\udcca Compare growth rates between countries for deeper analysis.',\n '\ud83c\udf0d Research the social factors behind these changes.'\n ];\n } else if (grade >= 5.0) {\n recommendations = [\n '\ud83d\udcc8 Good work! Review the data for 1970-1990 carefully.',\n '\ud83d\udd22 Practice calculating differences between years.',\n '\ud83d\udcdd Focus on the fastest-growing countries.'\n ];\n } else if (grade >= 4.0) {\n recommendations = [\n '\ud83d\udcd6 Study the table column by column.',\n '\ud83e\uddee Practice simple subtraction to find increases.',\n '\ud83d\udccc Pay attention to years and matching values.'\n ];\n } else {\n recommendations = [\n '\ud83d\udd04 Read the table again, identify each country\\'s row.',\n '\ud83d\udcdd Write the key numbers for each decade.',\n '\ud83d\udc68\u200d\ud83c\udfeb Ask your teacher for help with data tables.'\n ];\n }\n recommendationsList.innerHTML = recommendations.map(r => `<li>${r}<\/li>`).join('');\n\n feedbackArea.classList.add('show');\n }\n\n \/\/ ---------- INIT ----------\n renderQuestions();\n captureAnswers();\n\n document.getElementById('submitBtn').addEventListener('click', function() {\n showFeedback();\n document.getElementById('feedbackArea').scrollIntoView({ behavior: 'smooth', block: 'center' });\n });\n\n })();\n<\/script>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Population Quiz \u00b7 EPJA \u00b7 con imagen \ud83c\udf0d Population Evolution EPJA \u00b7 2\u00b0-3\u00b0 Medio<\/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-749","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/teacherjm.com\/epja\/wp-json\/wp\/v2\/pages\/749","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=749"}],"version-history":[{"count":1,"href":"https:\/\/teacherjm.com\/epja\/wp-json\/wp\/v2\/pages\/749\/revisions"}],"predecessor-version":[{"id":750,"href":"https:\/\/teacherjm.com\/epja\/wp-json\/wp\/v2\/pages\/749\/revisions\/750"}],"wp:attachment":[{"href":"https:\/\/teacherjm.com\/epja\/wp-json\/wp\/v2\/media?parent=749"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":749,"date":"2026-07-24T20:42:45","date_gmt":"2026-07-24T20:42:45","guid":{"rendered":"https:\/\/teacherjm.com\/epja\/?page_id=749"},"modified":"2026-07-24T20:42:45","modified_gmt":"2026-07-24T20:42:45","slug":"749-2","status":"publish","type":"page","link":"https:\/\/teacherjm.com\/epja\/749-2\/","title":{"rendered":""},"content":{"rendered":"\n\n\n\n \n \n Population Quiz \u00b7 EPJA \u00b7 con imagen<\/title>\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n font-family: 'Segoe UI', Roboto, system-ui, sans-serif;\n }\n body {\n background: linear-gradient(145deg, #f2f6fc 0%, #dce6f0 100%);\n min-height: 100vh;\n padding: 30px 20px;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n .container {\n max-width: 950px;\n width: 100%;\n background: rgba(255,255,255,0.92);\n backdrop-filter: blur(6px);\n border-radius: 48px;\n padding: 35px 40px;\n box-shadow: 0 20px 40px rgba(0,20,40,0.2);\n border: 1px solid rgba(255,255,255,0.6);\n }\n h1 {\n font-size: 2.2rem;\n color: #0b2a3b;\n border-bottom: 3px solid #b6c9db;\n padding-bottom: 16px;\n margin-bottom: 20px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n flex-wrap: wrap;\n }\n h1 small {\n font-size: 1rem;\n font-weight: 400;\n background: #1d4f6e;\n color: white;\n padding: 6px 22px;\n border-radius: 60px;\n }\n .header-image {\n width: 100%;\n border-radius: 28px;\n margin-bottom: 25px;\n border: 2px solid #cbdbe9;\n background: #e8eff8;\n padding: 10px;\n text-align: center;\n }\n .header-image img {\n max-width: 100%;\n height: auto;\n border-radius: 18px;\n display: block;\n margin: 0 auto;\n }\n .header-image .caption {\n margin-top: 8px;\n font-size: 0.9rem;\n color: #3a5b70;\n }\n .question {\n background: #f5f9ff;\n border-radius: 24px;\n padding: 18px 24px;\n margin-bottom: 14px;\n border-left: 6px solid #2a5e7a;\n box-shadow: 0 2px 8px rgba(0,0,0,0.02);\n }\n .question p {\n font-weight: 600;\n color: #0b2a3b;\n font-size: 1.05rem;\n margin-bottom: 12px;\n }\n .options {\n display: flex;\n flex-wrap: wrap;\n gap: 12px 28px;\n align-items: center;\n }\n .options label {\n display: flex;\n align-items: center;\n gap: 8px;\n background: white;\n padding: 5px 18px 5px 12px;\n border-radius: 60px;\n border: 1px solid #cedae9;\n cursor: pointer;\n transition: 0.15s;\n font-size: 0.95rem;\n }\n .options label:hover {\n background: #e2ebf7;\n border-color: #6d8db0;\n }\n input[type=\"radio\"] {\n accent-color: #2a5e7a;\n width: 17px;\n height: 17px;\n cursor: pointer;\n }\n .btn-submit {\n background: #1d4f6e;\n border: none;\n color: white;\n font-size: 1.3rem;\n font-weight: 600;\n padding: 16px 28px;\n border-radius: 80px;\n width: 100%;\n cursor: pointer;\n transition: 0.2s;\n box-shadow: 0 8px 18px -6px #1f4b66;\n margin-top: 10px;\n }\n .btn-submit:hover {\n background: #0e3b55;\n transform: scale(1.01);\n }\n .btn-submit:active {\n transform: scale(0.97);\n }\n .feedback-area {\n margin-top: 30px;\n background: #ffffffd9;\n backdrop-filter: blur(4px);\n border-radius: 32px;\n padding: 22px 28px;\n border: 1px solid #bcd0e3;\n display: none;\n }\n .feedback-area.show {\n display: block;\n animation: fadeSlide 0.4s ease;\n }\n @keyframes fadeSlide {\n 0% { opacity: 0; transform: translateY(12px); }\n 100% { opacity: 1; transform: translateY(0); }\n }\n .result-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n flex-wrap: wrap;\n margin-bottom: 14px;\n }\n .score-badge {\n background: #1f4f6b;\n color: white;\n padding: 10px 30px;\n border-radius: 60px;\n font-size: 2rem;\n font-weight: 700;\n letter-spacing: 1px;\n }\n .grade-box {\n background: #dce8f5;\n padding: 10px 28px;\n border-radius: 60px;\n font-weight: 600;\n color: #0c3045;\n font-size: 1.1rem;\n }\n .grade-box span {\n background: #0c3045;\n color: white;\n padding: 4px 18px;\n border-radius: 40px;\n margin-left: 6px;\n }\n .detail-list {\n margin: 12px 0 16px 0;\n max-height: 220px;\n overflow-y: auto;\n background: #f3f8ff;\n padding: 12px 18px;\n border-radius: 20px;\n font-size: 0.95rem;\n }\n .detail-item {\n padding: 4px 0;\n }\n .detail-item.correct { color: #0d6b2b; }\n .detail-item.wrong { color: #a12424; }\n .detail-item.empty { color: #6f7d8c; }\n .recomendaciones {\n background: #e3edfa;\n padding: 16px 22px;\n border-radius: 24px;\n border-left: 8px solid #256481;\n }\n .recomendaciones h4 {\n color: #0b3349;\n margin-bottom: 4px;\n }\n .recomendaciones ul {\n padding-left: 22px;\n color: #113344;\n line-height: 1.5;\n }\n .footnote {\n margin-top: 12px;\n font-size: 0.9rem;\n color: #3b5f78;\n text-align: right;\n }\n .correct-answer {\n background: #d4edda;\n border-left: 6px solid #1f8b4c;\n }\n .wrong-answer {\n background: #f8dddd;\n border-left: 6px solid #b34141;\n }\n .neutral-answer {\n background: #f5f9ff;\n }\n @media (max-width: 600px) {\n .container { padding: 20px; }\n h1 { font-size: 1.7rem; }\n .options { gap: 8px; }\n .options label { padding: 4px 12px; font-size: 0.9rem; }\n }\n <\/style>\n<\/head>\n<body>\n<div class=\"container\">\n\n <h1>\n \ud83c\udf0d Population Evolution\n <small>EPJA \u00b7 2\u00b0-3\u00b0 Medio<\/small>\n <\/h1>\n\n \n <div class=\"header-image\">\n <img decoding=\"async\" src=\"https:\/\/teacherjm.com\/epja\/wp-content\/uploads\/2026\/07\/descarga-12.jpg\" \n alt=\"World Population Evolution Chart\" \n onerror=\"this.style.display='none'; this.parentElement.innerHTML='<p style=\\'padding:20px; color:#6f8da0;\\'>\u26a0\ufe0f Image not available. Please check your internet connection.<\/p>‘;”>\n <div class=\"caption\">\ud83d\udcca World Population (millions) \u00b7 1950\u20132020<\/div>\n <\/div>\n\n \n <div id=\"questionsContainer\"><\/div>\n\n <button class=\"btn-submit\" id=\"submitBtn\">\u2705 Check answers \u00b7 Get grade<\/button>\n\n \n <div class=\"feedback-area\" id=\"feedbackArea\">\n <div class=\"result-header\">\n <div class=\"score-badge\" id=\"scoreDisplay\">0%<\/div>\n <div class=\"grade-box\" id=\"gradeDisplay\">\ud83d\udcca Nota: <span>\u2014<\/span><\/div>\n <\/div>\n <div id=\"summaryMsg\" style=\"font-weight:500; color:#1b4057; margin-bottom:8px;\"><\/div>\n <div class=\"detail-list\" id=\"detailList\"><\/div>\n <div class=\"recomendaciones\">\n <h4>\ud83d\udcc8 Recommendations<\/h4>\n <ul id=\"recommendationsList\">\n <li>Answer all questions to get personalized feedback.<\/li>\n <\/ul>\n <\/div>\n <div class=\"footnote\">\u2728 EPJA \u00b7 Population data analysis<\/div>\n <\/div>\n\n<\/div>\n\n<script>\n (function() {\n \/\/ ---------- 10 PREGUNTAS (basadas en la imagen) ----------\n const questions = [\n {\n q: '1. What was the population of China in 1950?',\n opts: ['a) 500 million', 'b) 550 million', 'c) 600 million', 'd) 650 million'],\n correct: 1\n },\n {\n q: '2. In which year did India\u2019s population reach 600 million?',\n opts: ['a) 1985', 'b) 1990', 'c) 1995', 'd) 2000'],\n correct: 1\n },\n {\n q: '3. How much did the USA population increase from 1950 to 1970?',\n opts: ['a) 20 million', 'b) 30 million', 'c) 40 million', 'd) 50 million'],\n correct: 2 \/\/ 150 \u2192 190 = 40\n },\n {\n q: '4. Which country had the smallest population in 1960?',\n opts: ['a) Brazil', 'b) Nigeria', 'c) USA', 'd) India'],\n correct: 1 \/\/ Nigeria 30\n },\n {\n q: '5. What was Brazil\\'s population in 1980?',\n opts: ['a) 70 million', 'b) 75 million', 'c) 80 million', 'd) 85 million'],\n correct: 2 \/\/ 80\n },\n {\n q: '6. Between 1970 and 1990, China\\'s population increased by:',\n opts: ['a) 150 million', 'b) 200 million', 'c) 250 million', 'd) 300 million'],\n correct: 1 \/\/ 750 \u2192 950 = 200\n },\n {\n q: '7. In which year did Nigeria\u2019s population surpass 80 million?',\n opts: ['a) 2005', 'b) 2010', 'c) 2015', 'd) 2020'],\n correct: 1 \/\/ 80 in 2010\n },\n {\n q: '8. Which country\u2019s population doubled between 1950 and 2000?',\n opts: ['a) China', 'b) India', 'c) USA', 'd) Nigeria'],\n correct: 3 \/\/ Nigeria: 20 \u2192 70 (more than double)\n },\n {\n q: '9. What was the total population of the USA and Brazil in 1975?',\n opts: ['a) 250 million', 'b) 260 million', 'c) 275 million', 'd) 290 million'],\n correct: 2 \/\/ 200 + 75 = 275\n },\n {\n q: '10. According to the table, which country had the most people in 2020?',\n opts: ['a) China', 'b) India', 'c) USA', 'd) Brazil'],\n correct: 0 \/\/ China 1250\n }\n ];\n\n const totalQuestions = questions.length;\n let userAnswers = new Array(totalQuestions).fill(null);\n\n \/\/ ---------- RENDER ----------\n function renderQuestions() {\n const container = document.getElementById('questionsContainer');\n let html = '';\n questions.forEach((q, index) => {\n const optionsHTML = q.opts.map((opt, optIndex) => `\n <label>\n <input type=\"radio\" name=\"q${index}\" value=\"${optIndex}\" data-index=\"${index}\">\n ${opt}\n <\/label>\n `).join('');\n html += `\n <div class=\"question neutral-answer\" id=\"qContainer${index}\">\n <p>${q.q}<\/p>\n <div class=\"options\">${optionsHTML}<\/div>\n <\/div>\n `;\n });\n container.innerHTML = html;\n }\n\n \/\/ ---------- CAPTURAR RESPUESTAS ----------\n function captureAnswers() {\n document.querySelectorAll('input[type=\"radio\"]').forEach(radio => {\n radio.addEventListener('change', function() {\n const index = parseInt(this.dataset.index);\n const value = parseInt(this.value);\n if (!isNaN(index) && !isNaN(value)) {\n userAnswers[index] = value;\n }\n });\n });\n }\n\n \/\/ ---------- FEEDBACK ----------\n function showFeedback() {\n const feedbackArea = document.getElementById('feedbackArea');\n const scoreDisplay = document.getElementById('scoreDisplay');\n const gradeDisplay = document.getElementById('gradeDisplay');\n const summaryMsg = document.getElementById('summaryMsg');\n const detailList = document.getElementById('detailList');\n const recommendationsList = document.getElementById('recommendationsList');\n\n let answeredCount = 0, correctCount = 0;\n const details = [];\n\n for (let i = 0; i < totalQuestions; i++) {\n const userAns = userAnswers[i];\n const question = questions[i];\n const container = document.getElementById(`qContainer${i}`);\n if (!container) continue;\n\n container.classList.remove('correct-answer', 'wrong-answer', 'neutral-answer');\n\n if (userAns === null || userAns === undefined) {\n container.classList.add('neutral-answer');\n details.push({ text: `\u2753 Q${i+1}: Not answered`, type: 'empty' });\n } else {\n answeredCount++;\n const isCorrect = (userAns === question.correct);\n if (isCorrect) {\n correctCount++;\n container.classList.add('correct-answer');\n details.push({ text: `\u2705 Q${i+1}: Correct`, type: 'correct' });\n } else {\n container.classList.add('wrong-answer');\n const correctText = question.opts[question.correct];\n details.push({ text: `\u274c Q${i+1}: Incorrect (correct: ${correctText})`, type: 'wrong' });\n }\n }\n }\n\n \/\/ Porcentaje y nota (escala 1.0 a 7.0)\n const percentage = answeredCount === 0 ? 0 : Math.round((correctCount \/ totalQuestions) * 100);\n const grade = answeredCount === 0 ? 1.0 : Math.round(((correctCount \/ totalQuestions) * 6 + 1) * 10) \/ 10;\n\n scoreDisplay.textContent = `${percentage}%`;\n gradeDisplay.innerHTML = `\ud83d\udcca Nota: <span>${grade.toFixed(1)}<\/span>`;\n\n if (answeredCount === 0) {\n summaryMsg.textContent = '\u26a0\ufe0f You have not answered any questions. Please complete the quiz.';\n } else {\n const rest = totalQuestions - answeredCount;\n let msg = `You answered ${answeredCount} out of ${totalQuestions}. `;\n msg += rest > 0 ? `You missed ${rest} question(s). ` : '\ud83c\udf89 You answered all! ';\n summaryMsg.textContent = msg;\n }\n\n detailList.innerHTML = details.map(d => \n `<div class=\"detail-item ${d.type}\">${d.text}<\/div>`\n ).join('');\n\n let recommendations = [];\n if (grade >= 6.0) {\n recommendations = [\n '\ud83c\udf1f Excellent! You have a great understanding of population trends.',\n '\ud83d\udcca Compare growth rates between countries for deeper analysis.',\n '\ud83c\udf0d Research the social factors behind these changes.'\n ];\n } else if (grade >= 5.0) {\n recommendations = [\n '\ud83d\udcc8 Good work! Review the data for 1970-1990 carefully.',\n '\ud83d\udd22 Practice calculating differences between years.',\n '\ud83d\udcdd Focus on the fastest-growing countries.'\n ];\n } else if (grade >= 4.0) {\n recommendations = [\n '\ud83d\udcd6 Study the table column by column.',\n '\ud83e\uddee Practice simple subtraction to find increases.',\n '\ud83d\udccc Pay attention to years and matching values.'\n ];\n } else {\n recommendations = [\n '\ud83d\udd04 Read the table again, identify each country\\'s row.',\n '\ud83d\udcdd Write the key numbers for each decade.',\n '\ud83d\udc68\u200d\ud83c\udfeb Ask your teacher for help with data tables.'\n ];\n }\n recommendationsList.innerHTML = recommendations.map(r => `<li>${r}<\/li>`).join('');\n\n feedbackArea.classList.add('show');\n }\n\n \/\/ ---------- INIT ----------\n renderQuestions();\n captureAnswers();\n\n document.getElementById('submitBtn').addEventListener('click', function() {\n showFeedback();\n document.getElementById('feedbackArea').scrollIntoView({ behavior: 'smooth', block: 'center' });\n });\n\n })();\n<\/script>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Population Quiz \u00b7 EPJA \u00b7 con imagen \ud83c\udf0d Population Evolution EPJA \u00b7 2\u00b0-3\u00b0 Medio<\/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-749","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/teacherjm.com\/epja\/wp-json\/wp\/v2\/pages\/749","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=749"}],"version-history":[{"count":1,"href":"https:\/\/teacherjm.com\/epja\/wp-json\/wp\/v2\/pages\/749\/revisions"}],"predecessor-version":[{"id":750,"href":"https:\/\/teacherjm.com\/epja\/wp-json\/wp\/v2\/pages\/749\/revisions\/750"}],"wp:attachment":[{"href":"https:\/\/teacherjm.com\/epja\/wp-json\/wp\/v2\/media?parent=749"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}