Population Evolution Quiz \u00b7 EPJA<\/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 .image-placeholder {\n background: #e8eff8;\n border-radius: 24px;\n padding: 18px 22px;\n margin-bottom: 28px;\n border: 2px dashed #6487a8;\n text-align: center;\n font-size: 0.95rem;\n color: #1a4057;\n }\n .image-placeholder table {\n margin: 10px auto;\n border-collapse: collapse;\n font-size: 0.8rem;\n background: white;\n border-radius: 16px;\n overflow: hidden;\n box-shadow: 0 4px 10px rgba(0,0,0,0.05);\n }\n .image-placeholder th, .image-placeholder td {\n padding: 6px 12px;\n border: 1px solid #cbdbe9;\n text-align: center;\n }\n .image-placeholder th {\n background: #1d4f6e;\n color: white;\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 .image-placeholder table { font-size: 0.65rem; }\n .image-placeholder th, .image-placeholder td { padding: 4px 6px; }\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=\"image-placeholder\">\n <p><strong>\ud83d\udcca World Population (millions) \u00b7 1950\u20132020<\/strong><\/p>\n <table>\n <thead>\n <tr><th>Year<\/th><th>China<\/th><th>India<\/th><th>USA<\/th><th>Brazil<\/th><th>Nigeria<\/th><\/tr>\n <\/thead>\n <tbody>\n <tr><td>1950<\/td><td>550<\/td><td>380<\/td><td>150<\/td><td>50<\/td><td>20<\/td><\/tr>\n <tr><td>1955<\/td><td>600<\/td><td>420<\/td><td>160<\/td><td>55<\/td><td>25<\/td><\/tr>\n <tr><td>1960<\/td><td>650<\/td><td>450<\/td><td>170<\/td><td>60<\/td><td>30<\/td><\/tr>\n <tr><td>1965<\/td><td>700<\/td><td>480<\/td><td>180<\/td><td>65<\/td><td>35<\/td><\/tr>\n <tr><td>1970<\/td><td>750<\/td><td>500<\/td><td>190<\/td><td>70<\/td><td>40<\/td><\/tr>\n <tr><td>1975<\/td><td>800<\/td><td>520<\/td><td>200<\/td><td>75<\/td><td>45<\/td><\/tr>\n <tr><td>1980<\/td><td>850<\/td><td>550<\/td><td>210<\/td><td>80<\/td><td>50<\/td><\/tr>\n <tr><td>1985<\/td><td>900<\/td><td>580<\/td><td>220<\/td><td>85<\/td><td>55<\/td><\/tr>\n <tr><td>1990<\/td><td>950<\/td><td>600<\/td><td>230<\/td><td>90<\/td><td>60<\/td><\/tr>\n <tr><td>1995<\/td><td>1000<\/td><td>620<\/td><td>240<\/td><td>95<\/td><td>65<\/td><\/tr>\n <tr><td>2000<\/td><td>1050<\/td><td>650<\/td><td>250<\/td><td>100<\/td><td>70<\/td><\/tr>\n <tr><td>2005<\/td><td>1100<\/td><td>680<\/td><td>260<\/td><td>105<\/td><td>75<\/td><\/tr>\n <tr><td>2010<\/td><td>1150<\/td><td>700<\/td><td>270<\/td><td>110<\/td><td>80<\/td><\/tr>\n <tr><td>2015<\/td><td>1200<\/td><td>720<\/td><td>280<\/td><td>115<\/td><td>85<\/td><\/tr>\n <tr><td>2020<\/td><td>1250<\/td><td>740<\/td><td>290<\/td><td>120<\/td><td>90<\/td><\/tr>\n <\/tbody>\n <\/table>\n <p style=\"margin-top: 8px; font-size: 0.85rem; color: #3a5b70;\">*Population in millions. Data for educational purposes.<\/p>\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 ----------\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 to 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 to 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 \/\/ USA 200 + Brazil 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 \/\/ Mensaje resumen\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 \/\/ Detalle\n detailList.innerHTML = details.map(d => \n `<div class=\"detail-item ${d.type}\">${d.text}<\/div>`\n ).join('');\n\n \/\/ Recomendaciones seg\u00fan nota\n let recommendations = [];\n if (grade >= 6.0) {\n recommendations = [\n '\ud83c\udf1f Excellent work! You understand population trends very well.',\n '\ud83d\udcca Try to compare growth rates between countries.',\n '\ud83c\udf0d Research why populations grow differently in each region.'\n ];\n } else if (grade >= 5.0) {\n recommendations = [\n '\ud83d\udcc8 Good job! Review the data for the 1970-1990 period.',\n '\ud83d\udd22 Practice reading tables and calculating differences.',\n '\ud83d\udcdd Focus on the countries with the fastest growth.'\n ];\n } else if (grade >= 4.0) {\n recommendations = [\n '\ud83d\udcd6 Study the table carefully. Look at each column separately.',\n '\ud83e\uddee Practice subtraction to find population increases.',\n '\ud83d\udccc Pay attention to the years and the corresponding values.'\n ];\n } else {\n recommendations = [\n '\ud83d\udd04 Re-read the table and identify each country\\'s color\/row.',\n '\ud83d\udcdd Write down the key populations for each decade.',\n '\ud83d\udc68\u200d\ud83c\udfeb Ask your teacher for help with reading 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 \/\/ Scroll al feedback\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 Evolution Quiz \u00b7 EPJA \ud83c\udf0d Population Evolution EPJA \u00b7 2\u00b0-3\u00b0 Medio \ud83d\udcca World Population (millions) \u00b7 1950\u20132020 Year China India USA Brazil Nigeria 1950 550 380 150 50 20 1955 600 420 160 55 25 1960 650 450 170 60 30 1965 700 480 180 65 35 1970 750 500 190 70 40 1975 […]<\/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-743","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/teacherjm.com\/epja\/wp-json\/wp\/v2\/pages\/743","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=743"}],"version-history":[{"count":1,"href":"https:\/\/teacherjm.com\/epja\/wp-json\/wp\/v2\/pages\/743\/revisions"}],"predecessor-version":[{"id":744,"href":"https:\/\/teacherjm.com\/epja\/wp-json\/wp\/v2\/pages\/743\/revisions\/744"}],"wp:attachment":[{"href":"https:\/\/teacherjm.com\/epja\/wp-json\/wp\/v2\/media?parent=743"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":743,"date":"2026-07-24T20:33:52","date_gmt":"2026-07-24T20:33:52","guid":{"rendered":"https:\/\/teacherjm.com\/epja\/?page_id=743"},"modified":"2026-07-24T20:33:52","modified_gmt":"2026-07-24T20:33:52","slug":"743-2","status":"publish","type":"page","link":"https:\/\/teacherjm.com\/epja\/743-2\/","title":{"rendered":""},"content":{"rendered":"\n\n\n\n \n \n Population Evolution Quiz \u00b7 EPJA<\/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 .image-placeholder {\n background: #e8eff8;\n border-radius: 24px;\n padding: 18px 22px;\n margin-bottom: 28px;\n border: 2px dashed #6487a8;\n text-align: center;\n font-size: 0.95rem;\n color: #1a4057;\n }\n .image-placeholder table {\n margin: 10px auto;\n border-collapse: collapse;\n font-size: 0.8rem;\n background: white;\n border-radius: 16px;\n overflow: hidden;\n box-shadow: 0 4px 10px rgba(0,0,0,0.05);\n }\n .image-placeholder th, .image-placeholder td {\n padding: 6px 12px;\n border: 1px solid #cbdbe9;\n text-align: center;\n }\n .image-placeholder th {\n background: #1d4f6e;\n color: white;\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 .image-placeholder table { font-size: 0.65rem; }\n .image-placeholder th, .image-placeholder td { padding: 4px 6px; }\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=\"image-placeholder\">\n <p><strong>\ud83d\udcca World Population (millions) \u00b7 1950\u20132020<\/strong><\/p>\n <table>\n <thead>\n <tr><th>Year<\/th><th>China<\/th><th>India<\/th><th>USA<\/th><th>Brazil<\/th><th>Nigeria<\/th><\/tr>\n <\/thead>\n <tbody>\n <tr><td>1950<\/td><td>550<\/td><td>380<\/td><td>150<\/td><td>50<\/td><td>20<\/td><\/tr>\n <tr><td>1955<\/td><td>600<\/td><td>420<\/td><td>160<\/td><td>55<\/td><td>25<\/td><\/tr>\n <tr><td>1960<\/td><td>650<\/td><td>450<\/td><td>170<\/td><td>60<\/td><td>30<\/td><\/tr>\n <tr><td>1965<\/td><td>700<\/td><td>480<\/td><td>180<\/td><td>65<\/td><td>35<\/td><\/tr>\n <tr><td>1970<\/td><td>750<\/td><td>500<\/td><td>190<\/td><td>70<\/td><td>40<\/td><\/tr>\n <tr><td>1975<\/td><td>800<\/td><td>520<\/td><td>200<\/td><td>75<\/td><td>45<\/td><\/tr>\n <tr><td>1980<\/td><td>850<\/td><td>550<\/td><td>210<\/td><td>80<\/td><td>50<\/td><\/tr>\n <tr><td>1985<\/td><td>900<\/td><td>580<\/td><td>220<\/td><td>85<\/td><td>55<\/td><\/tr>\n <tr><td>1990<\/td><td>950<\/td><td>600<\/td><td>230<\/td><td>90<\/td><td>60<\/td><\/tr>\n <tr><td>1995<\/td><td>1000<\/td><td>620<\/td><td>240<\/td><td>95<\/td><td>65<\/td><\/tr>\n <tr><td>2000<\/td><td>1050<\/td><td>650<\/td><td>250<\/td><td>100<\/td><td>70<\/td><\/tr>\n <tr><td>2005<\/td><td>1100<\/td><td>680<\/td><td>260<\/td><td>105<\/td><td>75<\/td><\/tr>\n <tr><td>2010<\/td><td>1150<\/td><td>700<\/td><td>270<\/td><td>110<\/td><td>80<\/td><\/tr>\n <tr><td>2015<\/td><td>1200<\/td><td>720<\/td><td>280<\/td><td>115<\/td><td>85<\/td><\/tr>\n <tr><td>2020<\/td><td>1250<\/td><td>740<\/td><td>290<\/td><td>120<\/td><td>90<\/td><\/tr>\n <\/tbody>\n <\/table>\n <p style=\"margin-top: 8px; font-size: 0.85rem; color: #3a5b70;\">*Population in millions. Data for educational purposes.<\/p>\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 ----------\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 to 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 to 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 \/\/ USA 200 + Brazil 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 \/\/ Mensaje resumen\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 \/\/ Detalle\n detailList.innerHTML = details.map(d => \n `<div class=\"detail-item ${d.type}\">${d.text}<\/div>`\n ).join('');\n\n \/\/ Recomendaciones seg\u00fan nota\n let recommendations = [];\n if (grade >= 6.0) {\n recommendations = [\n '\ud83c\udf1f Excellent work! You understand population trends very well.',\n '\ud83d\udcca Try to compare growth rates between countries.',\n '\ud83c\udf0d Research why populations grow differently in each region.'\n ];\n } else if (grade >= 5.0) {\n recommendations = [\n '\ud83d\udcc8 Good job! Review the data for the 1970-1990 period.',\n '\ud83d\udd22 Practice reading tables and calculating differences.',\n '\ud83d\udcdd Focus on the countries with the fastest growth.'\n ];\n } else if (grade >= 4.0) {\n recommendations = [\n '\ud83d\udcd6 Study the table carefully. Look at each column separately.',\n '\ud83e\uddee Practice subtraction to find population increases.',\n '\ud83d\udccc Pay attention to the years and the corresponding values.'\n ];\n } else {\n recommendations = [\n '\ud83d\udd04 Re-read the table and identify each country\\'s color\/row.',\n '\ud83d\udcdd Write down the key populations for each decade.',\n '\ud83d\udc68\u200d\ud83c\udfeb Ask your teacher for help with reading 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 \/\/ Scroll al feedback\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 Evolution Quiz \u00b7 EPJA \ud83c\udf0d Population Evolution EPJA \u00b7 2\u00b0-3\u00b0 Medio \ud83d\udcca World Population (millions) \u00b7 1950\u20132020 Year China India USA Brazil Nigeria 1950 550 380 150 50 20 1955 600 420 160 55 25 1960 650 450 170 60 30 1965 700 480 180 65 35 1970 750 500 190 70 40 1975 […]<\/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-743","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/teacherjm.com\/epja\/wp-json\/wp\/v2\/pages\/743","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=743"}],"version-history":[{"count":1,"href":"https:\/\/teacherjm.com\/epja\/wp-json\/wp\/v2\/pages\/743\/revisions"}],"predecessor-version":[{"id":744,"href":"https:\/\/teacherjm.com\/epja\/wp-json\/wp\/v2\/pages\/743\/revisions\/744"}],"wp:attachment":[{"href":"https:\/\/teacherjm.com\/epja\/wp-json\/wp\/v2\/media?parent=743"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}