Quiz Ingl\u00e9s Elemental \u00b7 20 preguntas<\/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, #f5f7fa 0%, #e9edf5 100%);\n min-height: 100vh;\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 20px;\n }\n .quiz-container {\n max-width: 950px;\n width: 100%;\n background: rgba(255, 255, 255, 0.85);\n backdrop-filter: blur(8px);\n border-radius: 48px;\n padding: 30px 35px;\n box-shadow: 0 20px 40px rgba(0, 20, 40, 0.25);\n border: 1px solid rgba(255, 255, 255, 0.5);\n transition: 0.25s ease;\n }\n h1 {\n font-size: 2.1rem;\n font-weight: 700;\n color: #0b2a3b;\n display: flex;\n align-items: center;\n gap: 12px;\n border-bottom: 3px dashed #b6c9db;\n padding-bottom: 18px;\n margin-bottom: 25px;\n }\n h1 small {\n font-size: 1rem;\n font-weight: 400;\n color: #3a5b70;\n margin-left: auto;\n background: #dce6f0;\n padding: 6px 18px;\n border-radius: 60px;\n letter-spacing: 0.3px;\n }\n\n \/* TABS *\/\n .tabs {\n display: flex;\n gap: 8px;\n margin-bottom: 25px;\n flex-wrap: wrap;\n }\n .tab-btn {\n background: #dce6f0;\n border: none;\n padding: 12px 28px;\n border-radius: 60px;\n font-weight: 600;\n font-size: 1rem;\n color: #1c4057;\n cursor: pointer;\n transition: 0.2s;\n box-shadow: 0 2px 4px rgba(0,0,0,0.02);\n flex: 1 0 auto;\n max-width: 200px;\n text-align: center;\n }\n .tab-btn:hover {\n background: #c4d3e8;\n transform: translateY(-2px);\n }\n .tab-btn.active {\n background: #1d4f6e;\n color: white;\n box-shadow: 0 6px 12px rgba(20, 50, 70, 0.25);\n }\n .tab-content {\n display: none;\n animation: fadeTab 0.3s ease;\n }\n .tab-content.active {\n display: block;\n }\n @keyframes fadeTab {\n 0% { opacity: 0.4; transform: translateY(6px); }\n 100% { opacity: 1; transform: translateY(0); }\n }\n\n .section {\n margin-bottom: 20px;\n }\n .section-title {\n font-weight: 600;\n font-size: 1.2rem;\n color: #1c4057;\n background: #d0ddee;\n display: inline-block;\n padding: 6px 22px;\n border-radius: 40px;\n letter-spacing: -0.2px;\n margin-bottom: 18px;\n }\n .question {\n background: #f2f6fe;\n border-radius: 24px;\n padding: 18px 22px;\n margin-bottom: 14px;\n border-left: 6px solid #6487a8;\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.02);\n }\n .question p {\n font-weight: 500;\n color: #0b2a3b;\n font-size: 1.05rem;\n margin-bottom: 12px;\n }\n .options {\n display: flex;\n flex-wrap: wrap;\n gap: 14px 30px;\n align-items: center;\n }\n .options label {\n display: flex;\n align-items: center;\n gap: 8px;\n background: white;\n padding: 6px 18px 6px 12px;\n border-radius: 60px;\n border: 1px solid #cedae9;\n cursor: pointer;\n transition: 0.15s;\n font-size: 0.98rem;\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 .reading-text {\n background: #eef3fb;\n padding: 20px 24px;\n border-radius: 28px;\n margin: 10px 0 20px 0;\n border: 1px solid #cbdbe9;\n color: #1a3343;\n font-size: 1rem;\n line-height: 1.6;\n }\n .reading-text p {\n margin-bottom: 8px;\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 letter-spacing: 0.5px;\n box-shadow: 0 10px 18px -8px rgba(20, 50, 70, 0.3);\n margin-top: 12px;\n }\n .btn-submit:hover {\n background: #0e3b55;\n transform: scale(1.01);\n box-shadow: 0 12px 24px -6px #1f4b66;\n }\n .btn-submit:active {\n transform: scale(0.97);\n }\n .feedback-area {\n margin-top: 32px;\n background: #ffffffd9;\n backdrop-filter: blur(4px);\n border-radius: 32px;\n padding: 22px 28px;\n border: 1px solid #bcd0e3;\n transition: 0.3s;\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: 18px;\n }\n .score-badge {\n background: #1f4f6b;\n color: white;\n padding: 10px 26px;\n border-radius: 60px;\n font-size: 2rem;\n font-weight: 700;\n letter-spacing: 1px;\n line-height: 1;\n }\n .level-box {\n background: #dce8f5;\n padding: 12px 24px;\n border-radius: 60px;\n font-weight: 600;\n color: #0c3045;\n }\n .level-box span {\n background: #0c3045;\n color: white;\n padding: 4px 14px;\n border-radius: 40px;\n margin-left: 8px;\n }\n .recomendaciones {\n background: #e3edfa;\n padding: 18px 22px;\n border-radius: 24px;\n margin-top: 20px;\n border-left: 8px solid #256481;\n }\n .recomendaciones h4 {\n color: #0b3349;\n margin-bottom: 6px;\n }\n .recomendaciones ul {\n padding-left: 22px;\n color: #113344;\n line-height: 1.6;\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: #f2f6fe;\n }\n .feedback-detail-item {\n padding: 4px 0;\n font-size: 0.95rem;\n }\n .feedback-detail-item.correct { color: #0d6b2b; }\n .feedback-detail-item.wrong { color: #a12424; }\n .feedback-detail-item.empty { color: #6f7d8c; }\n\n .progress-text {\n font-size: 0.9rem;\n color: #3a5b70;\n text-align: right;\n margin-top: 6px;\n }\n\n @media (max-width: 600px) {\n .quiz-container { padding: 20px; }\n h1 { font-size: 1.7rem; flex-wrap: wrap; }\n .options { gap: 10px; }\n .options label { padding: 4px 12px; font-size: 0.9rem; }\n .tab-btn { padding: 10px 16px; font-size: 0.9rem; max-width: 100%; flex: 1; }\n }\n <\/style>\n<\/head>\n<body>\n<div class=\"quiz-container\" id=\"quizApp\">\n <h1>\n \ud83d\udcd8 English Basic\n <small>20 preguntas<\/small>\n <\/h1>\n\n \n <div class=\"tabs\" id=\"tabHeaders\">\n <button class=\"tab-btn active\" data-tab=\"tabGrammar\">\ud83d\udccc Grammar<\/button>\n <button class=\"tab-btn\" data-tab=\"tabReading\">\ud83d\udcd6 Reading<\/button>\n <button class=\"tab-btn\" data-tab=\"tabFeedback\">\ud83d\udcca Feedback<\/button>\n <\/div>\n\n \n <div class=\"tab-content active\" id=\"tabGrammar\">\n <div class=\"section\">\n <div class=\"section-title\">\ud83d\udccc Grammar \u00b7 elementary (14)<\/div>\n <div id=\"grammarQuestions\"><\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"tab-content\" id=\"tabReading\">\n <div class=\"section\">\n <div class=\"section-title\">\ud83d\udcd6 Reading comprehension (6)<\/div>\n <div class=\"reading-text\">\n <p><strong>My daily routine<\/strong><\/p>\n <p>Hello! I’m Emma. I get up at 7:00 a.m. and I have breakfast with my family. I usually drink orange juice and eat toast. Then I go to school by bus. My school is big and I love my English teacher, Mrs. Clark. She speaks very clearly and she is kind. In the afternoon, I do my homework and I play with my dog, Max. At 8:00 p.m. I have dinner with my parents. I go to bed at 10:30 p.m. I always read a book before sleeping.<\/p>\n <\/div>\n <div id=\"readingQuestions\"><\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"tab-content\" id=\"tabFeedback\">\n <div class=\"feedback-area show\" id=\"feedbackAreaStatic\" style=\"display:block; margin-top:0;\">\n <div class=\"result-header\">\n <div class=\"score-badge\" id=\"scoreDisplay\">0%<\/div>\n <div class=\"level-box\" id=\"levelDisplay\">\ud83d\udcca Nivel: <span>\u2014<\/span><\/div>\n <\/div>\n <div id=\"detailedFeedback\" style=\"margin-bottom: 10px; font-weight: 500; color: #1b4057;\"><\/div>\n <div id=\"feedbackDetailList\" style=\"margin: 12px 0 16px 0; max-height: 260px; overflow-y: auto; background: #f3f8ff; padding: 12px 16px; border-radius: 20px; font-size: 0.95rem;\"><\/div>\n <div class=\"recomendaciones\" id=\"recomendacionesBox\">\n <h4>\ud83d\udcc8 Recomendaciones para mejorar<\/h4>\n <ul id=\"recomendacionesList\">\n <li>Completa el quiz para ver sugerencias personalizadas.<\/li>\n <\/ul>\n <\/div>\n <div class=\"footnote\">\u2728 Feedback basado en tus respuestas<\/div>\n <\/div>\n <\/div>\n\n \n <button class=\"btn-submit\" id=\"submitBtn\">\u2705 Check & get feedback<\/button>\n\n<\/div>\n\n<script>\n (function() {\n \/\/ ---------- DATA: 20 preguntas (14 Grammar + 6 Reading) ----------\n const grammarQuestions = [\n { id: 'g1', text: 'She _______ to school every day.', options: ['go', 'goes', 'going', 'gone'], correct: 1 },\n { id: 'g2', text: 'We _______ a new car last week.', options: ['buy', 'bought', 'buyed', 'buys'], correct: 1 },\n { id: 'g3', text: '_______ you like pizza?', options: ['Does', 'Do', 'Are', 'Is'], correct: 1 },\n { id: 'g4', text: 'My sister _______ reading a book now.', options: ['am', 'are', 'is', 'be'], correct: 2 },\n { id: 'g5', text: 'I _______ a student. I study English.', options: ['am', 'is', 'are', 'be'], correct: 0 },\n { id: 'g6', text: 'They _______ to the park yesterday.', options: ['walk', 'walked', 'walks', 'walking'], correct: 1 },\n { id: 'g7', text: 'He _______ breakfast at 8 o\\'clock every morning.', options: ['have', 'has', 'having', 'had'], correct: 1 },\n { id: 'g8', text: '_______ she speak Spanish?', options: ['Does', 'Do', 'Is', 'Are'], correct: 0 },\n { id: 'g9', text: 'We _______ going to the cinema tonight.', options: ['am', 'is', 'are', 'be'], correct: 2 },\n { id: 'g10', text: 'I _______ my homework yesterday.', options: ['do', 'did', 'does', 'done'], correct: 1 },\n { id: 'g11', text: '_______ you like ice-cream?', options: ['Does', 'Do', 'Is', 'Are'], correct: 1 },\n { id: 'g12', text: 'My parents _______ in a hospital.', options: ['work', 'works', 'working', 'worked'], correct: 0 },\n { id: 'g13', text: 'She _______ to music right now.', options: ['listen', 'listens', 'is listening', 'listened'], correct: 2 },\n { id: 'g14', text: 'They _______ not at home yesterday.', options: ['was', 'were', 'are', 'is'], correct: 1 }\n ];\n\n const readingQuestions = [\n { id: 'r1', text: 'What does Emma usually drink for breakfast?', options: ['Milk', 'Orange juice', 'Coffee', 'Tea'], correct: 1 },\n { id: 'r2', text: 'What is the name of Emma\\'s teacher?', options: ['Mrs. Smith', 'Mrs. Clark', 'Miss Emma', 'Mr. Max'], correct: 1 },\n { id: 'r3', text: 'What time does Emma go to bed?', options: ['9:30 p.m.', '10:00 p.m.', '10:30 p.m.', '11:00 p.m.'], correct: 2 },\n { id: 'r4', text: 'What does Emma do before sleeping?', options: ['Watch TV', 'Read a book', 'Play with Max', 'Study English'], correct: 1 },\n { id: 'r5', text: 'How does Emma go to school?', options: ['By car', 'By bus', 'Walking', 'By bike'], correct: 1 },\n { id: 'r6', text: 'What time does Emma have dinner?', options: ['7:00 p.m.', '8:00 p.m.', '9:00 p.m.', '10:00 p.m.'], correct: 1 }\n ];\n\n const allQuestions = [...grammarQuestions, ...readingQuestions];\n const totalQuestions = allQuestions.length;\n let userAnswers = new Array(totalQuestions).fill(null);\n\n \/\/ ---------- RENDER ----------\n function renderQuestions() {\n const grammarContainer = document.getElementById('grammarQuestions');\n const readingContainer = document.getElementById('readingQuestions');\n\n grammarContainer.innerHTML = grammarQuestions.map((q, index) => {\n return buildQuestionHTML(q, index);\n }).join('');\n\n const offset = grammarQuestions.length;\n readingContainer.innerHTML = readingQuestions.map((q, index) => {\n const realIndex = offset + index;\n return buildQuestionHTML(q, realIndex);\n }).join('');\n }\n\n function buildQuestionHTML(q, index) {\n const optionsHTML = q.options.map((opt, optIndex) => {\n return `\n <label>\n <input type=\"radio\" name=\"q${index}\" value=\"${optIndex}\" data-index=\"${index}\">\n ${opt}\n <\/label>\n `;\n }).join('');\n\n return `\n <div class=\"question neutral-answer\" id=\"qContainer${index}\">\n <p>${index+1}. ${q.text}<\/p>\n <div class=\"options\">${optionsHTML}<\/div>\n <\/div>\n `;\n }\n\n \/\/ ---------- CAPTURAR RESPUESTAS ----------\n function captureAnswers() {\n const radios = document.querySelectorAll('input[type=\"radio\"]');\n radios.forEach(radio => {\n radio.addEventListener('change', function(e) {\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 \/\/ ---------- TABS ----------\n function initTabs() {\n const tabs = document.querySelectorAll('.tab-btn');\n const contents = {\n tabGrammar: document.getElementById('tabGrammar'),\n tabReading: document.getElementById('tabReading'),\n tabFeedback: document.getElementById('tabFeedback')\n };\n\n tabs.forEach(tab => {\n tab.addEventListener('click', function() {\n tabs.forEach(t => t.classList.remove('active'));\n this.classList.add('active');\n Object.values(contents).forEach(c => c.classList.remove('active'));\n const target = this.dataset.tab;\n if (contents[target]) {\n contents[target].classList.add('active');\n }\n });\n });\n }\n\n \/\/ ---------- FEEDBACK ----------\n function showFeedback() {\n const feedbackTab = document.querySelector('.tab-btn[data-tab=\"tabFeedback\"]');\n if (feedbackTab) feedbackTab.click();\n\n const scoreDisplay = document.getElementById('scoreDisplay');\n const levelDisplay = document.getElementById('levelDisplay');\n const detailedFeedback = document.getElementById('detailedFeedback');\n const recomendacionesList = document.getElementById('recomendacionesList');\n const feedbackDetailList = document.getElementById('feedbackDetailList');\n\n let answeredCount = 0;\n let correctCount = 0;\n const detailItems = [];\n\n for (let i = 0; i < totalQuestions; i++) {\n const userAns = userAnswers[i];\n const question = allQuestions[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 detailItems.push({ text: `\u2753 Pregunta ${i+1}: sin responder`, type: 'empty' });\n } else {\n answeredCount++;\n const isCorrect = (userAns === question.correct);\n if (isCorrect) {\n correctCount++;\n container.classList.add('correct-answer');\n detailItems.push({ text: `\u2705 Pregunta ${i+1}: correcta`, type: 'correct' });\n } else {\n container.classList.add('wrong-answer');\n const correctText = question.options[question.correct];\n detailItems.push({ text: `\u274c Pregunta ${i+1}: incorrecta (respuesta: \"${correctText}\")`, type: 'wrong' });\n }\n }\n }\n\n const percentage = answeredCount === 0 ? 0 : Math.round((correctCount \/ totalQuestions) * 100);\n scoreDisplay.textContent = `${percentage}%`;\n\n let nivelActual = '';\n let nivelAlcanzable = '';\n let recomendaciones = [];\n\n if (percentage >= 90) {\n nivelActual = 'A2 (Elemental alto)';\n nivelAlcanzable = 'B1 (Pre-intermedio)';\n recomendaciones = [\n '\ud83c\udf1f \u00a1Excelente! Tienes una base s\u00f3lida. Practica con textos un poco m\u00e1s largos.',\n '\ud83d\udcdd Empieza a usar tiempos verbales como \"present perfect\" y \"past continuous\".',\n '\ud83c\udfa7 Escucha podcasts en ingl\u00e9s con subt\u00edtulos para mejorar comprensi\u00f3n auditiva.',\n '\ud83d\udcd6 Lee noticias en ingl\u00e9s simplificado (News in Levels).'\n ];\n } else if (percentage >= 70) {\n nivelActual = 'A1 (Elemental)';\n nivelAlcanzable = 'A2 (Elemental alto)';\n recomendaciones = [\n '\ud83d\udcd8 Repasa los verbos irregulares y las conjugaciones en presente y pasado.',\n '\ud83d\udcd6 Lee textos cortos todos los d\u00edas y subraya las palabras que no conozcas.',\n '\u270d\ufe0f Escribe 5 frases diarias sobre tu rutina para practicar estructura.',\n '\ud83c\udfaf Practica con ejercicios de \"present continuous\" y \"simple past\".'\n ];\n } else if (percentage >= 50) {\n nivelActual = 'A0 (Principiante)';\n nivelAlcanzable = 'A1 (Elemental)';\n recomendaciones = [\n '\ud83d\udd24 Dedica 20 minutos al d\u00eda a vocabulario b\u00e1sico (familia, comida, acciones).',\n '\ud83c\udfaf Practica el verbo \"to be\" y los pronombres personales.',\n '\ud83d\udcda Usa aplicaciones como Duolingo o Busuu para reforzar desde cero.',\n '\ud83d\udd04 Escucha canciones infantiles en ingl\u00e9s con letra.'\n ];\n } else {\n nivelActual = 'A0 (Principiante bajo)';\n nivelAlcanzable = 'A0+ (Principiante)';\n recomendaciones = [\n '\ud83d\udd04 Vuelve a repasar el abecedario y los n\u00fameros en ingl\u00e9s.',\n '\ud83d\uddbc\ufe0f Asocia im\u00e1genes con palabras: animales, objetos, colores.',\n '\ud83e\uddd8 No te desanimes, empieza con frases muy cortas y escucha canciones infantiles.',\n '\ud83d\udcdd Escribe 3 palabras nuevas cada d\u00eda con su significado.'\n ];\n }\n\n levelDisplay.innerHTML = `\ud83d\udcca Nivel actual: <span>${nivelActual}<\/span> \u00b7 Meta: ${nivelAlcanzable}`;\n\n feedbackDetailList.innerHTML = detailItems.map(item => \n `<div class=\"feedback-detail-item ${item.type}\">${item.text}<\/div>`\n ).join('');\n\n recomendacionesList.innerHTML = recomendaciones.map(r => `<li>${r}<\/li>`).join('');\n\n if (answeredCount === 0) {\n detailedFeedback.textContent = '\u26a0\ufe0f No has respondido ninguna pregunta. Intenta completar el quiz.';\n } else {\n const restantes = totalQuestions - answeredCount;\n let msg = `Respondiste ${answeredCount} de ${totalQuestions} preguntas. `;\n msg += restantes > 0 ? `Te faltan ${restantes} por responder. ` : '\u00a1Completaste todas! ';\n detailedFeedback.textContent = msg;\n }\n }\n\n \/\/ ---------- INIT ----------\n renderQuestions();\n captureAnswers();\n initTabs();\n\n document.getElementById('submitBtn').addEventListener('click', function() {\n showFeedback();\n const feedbackTab = document.querySelector('.tab-btn[data-tab=\"tabFeedback\"]');\n if (feedbackTab) feedbackTab.click();\n });\n\n })();\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Quiz Ingl\u00e9s Elemental \u00b7 20 preguntas \ud83d\udcd8 English Basic 20 preguntas \ud83d\udccc Grammar \ud83d\udcd6 Reading \ud83d\udcca Feedback \ud83d\udccc Grammar \u00b7 elementary (14) \ud83d\udcd6 Reading comprehension (6) My daily routine Hello! I’m Emma. I get up at 7:00 a.m. and I have breakfast with my family. I usually drink orange juice and eat toast. Then I […]<\/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-732","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/teacherjm.com\/epja\/wp-json\/wp\/v2\/pages\/732","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=732"}],"version-history":[{"count":1,"href":"https:\/\/teacherjm.com\/epja\/wp-json\/wp\/v2\/pages\/732\/revisions"}],"predecessor-version":[{"id":734,"href":"https:\/\/teacherjm.com\/epja\/wp-json\/wp\/v2\/pages\/732\/revisions\/734"}],"wp:attachment":[{"href":"https:\/\/teacherjm.com\/epja\/wp-json\/wp\/v2\/media?parent=732"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":732,"date":"2026-07-24T17:51:09","date_gmt":"2026-07-24T17:51:09","guid":{"rendered":"https:\/\/teacherjm.com\/epja\/?page_id=732"},"modified":"2026-07-24T17:51:09","modified_gmt":"2026-07-24T17:51:09","slug":"732-2","status":"publish","type":"page","link":"https:\/\/teacherjm.com\/epja\/732-2\/","title":{"rendered":""},"content":{"rendered":"\n\n\n\n \n \n Quiz Ingl\u00e9s Elemental \u00b7 20 preguntas<\/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, #f5f7fa 0%, #e9edf5 100%);\n min-height: 100vh;\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 20px;\n }\n .quiz-container {\n max-width: 950px;\n width: 100%;\n background: rgba(255, 255, 255, 0.85);\n backdrop-filter: blur(8px);\n border-radius: 48px;\n padding: 30px 35px;\n box-shadow: 0 20px 40px rgba(0, 20, 40, 0.25);\n border: 1px solid rgba(255, 255, 255, 0.5);\n transition: 0.25s ease;\n }\n h1 {\n font-size: 2.1rem;\n font-weight: 700;\n color: #0b2a3b;\n display: flex;\n align-items: center;\n gap: 12px;\n border-bottom: 3px dashed #b6c9db;\n padding-bottom: 18px;\n margin-bottom: 25px;\n }\n h1 small {\n font-size: 1rem;\n font-weight: 400;\n color: #3a5b70;\n margin-left: auto;\n background: #dce6f0;\n padding: 6px 18px;\n border-radius: 60px;\n letter-spacing: 0.3px;\n }\n\n \/* TABS *\/\n .tabs {\n display: flex;\n gap: 8px;\n margin-bottom: 25px;\n flex-wrap: wrap;\n }\n .tab-btn {\n background: #dce6f0;\n border: none;\n padding: 12px 28px;\n border-radius: 60px;\n font-weight: 600;\n font-size: 1rem;\n color: #1c4057;\n cursor: pointer;\n transition: 0.2s;\n box-shadow: 0 2px 4px rgba(0,0,0,0.02);\n flex: 1 0 auto;\n max-width: 200px;\n text-align: center;\n }\n .tab-btn:hover {\n background: #c4d3e8;\n transform: translateY(-2px);\n }\n .tab-btn.active {\n background: #1d4f6e;\n color: white;\n box-shadow: 0 6px 12px rgba(20, 50, 70, 0.25);\n }\n .tab-content {\n display: none;\n animation: fadeTab 0.3s ease;\n }\n .tab-content.active {\n display: block;\n }\n @keyframes fadeTab {\n 0% { opacity: 0.4; transform: translateY(6px); }\n 100% { opacity: 1; transform: translateY(0); }\n }\n\n .section {\n margin-bottom: 20px;\n }\n .section-title {\n font-weight: 600;\n font-size: 1.2rem;\n color: #1c4057;\n background: #d0ddee;\n display: inline-block;\n padding: 6px 22px;\n border-radius: 40px;\n letter-spacing: -0.2px;\n margin-bottom: 18px;\n }\n .question {\n background: #f2f6fe;\n border-radius: 24px;\n padding: 18px 22px;\n margin-bottom: 14px;\n border-left: 6px solid #6487a8;\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.02);\n }\n .question p {\n font-weight: 500;\n color: #0b2a3b;\n font-size: 1.05rem;\n margin-bottom: 12px;\n }\n .options {\n display: flex;\n flex-wrap: wrap;\n gap: 14px 30px;\n align-items: center;\n }\n .options label {\n display: flex;\n align-items: center;\n gap: 8px;\n background: white;\n padding: 6px 18px 6px 12px;\n border-radius: 60px;\n border: 1px solid #cedae9;\n cursor: pointer;\n transition: 0.15s;\n font-size: 0.98rem;\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 .reading-text {\n background: #eef3fb;\n padding: 20px 24px;\n border-radius: 28px;\n margin: 10px 0 20px 0;\n border: 1px solid #cbdbe9;\n color: #1a3343;\n font-size: 1rem;\n line-height: 1.6;\n }\n .reading-text p {\n margin-bottom: 8px;\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 letter-spacing: 0.5px;\n box-shadow: 0 10px 18px -8px rgba(20, 50, 70, 0.3);\n margin-top: 12px;\n }\n .btn-submit:hover {\n background: #0e3b55;\n transform: scale(1.01);\n box-shadow: 0 12px 24px -6px #1f4b66;\n }\n .btn-submit:active {\n transform: scale(0.97);\n }\n .feedback-area {\n margin-top: 32px;\n background: #ffffffd9;\n backdrop-filter: blur(4px);\n border-radius: 32px;\n padding: 22px 28px;\n border: 1px solid #bcd0e3;\n transition: 0.3s;\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: 18px;\n }\n .score-badge {\n background: #1f4f6b;\n color: white;\n padding: 10px 26px;\n border-radius: 60px;\n font-size: 2rem;\n font-weight: 700;\n letter-spacing: 1px;\n line-height: 1;\n }\n .level-box {\n background: #dce8f5;\n padding: 12px 24px;\n border-radius: 60px;\n font-weight: 600;\n color: #0c3045;\n }\n .level-box span {\n background: #0c3045;\n color: white;\n padding: 4px 14px;\n border-radius: 40px;\n margin-left: 8px;\n }\n .recomendaciones {\n background: #e3edfa;\n padding: 18px 22px;\n border-radius: 24px;\n margin-top: 20px;\n border-left: 8px solid #256481;\n }\n .recomendaciones h4 {\n color: #0b3349;\n margin-bottom: 6px;\n }\n .recomendaciones ul {\n padding-left: 22px;\n color: #113344;\n line-height: 1.6;\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: #f2f6fe;\n }\n .feedback-detail-item {\n padding: 4px 0;\n font-size: 0.95rem;\n }\n .feedback-detail-item.correct { color: #0d6b2b; }\n .feedback-detail-item.wrong { color: #a12424; }\n .feedback-detail-item.empty { color: #6f7d8c; }\n\n .progress-text {\n font-size: 0.9rem;\n color: #3a5b70;\n text-align: right;\n margin-top: 6px;\n }\n\n @media (max-width: 600px) {\n .quiz-container { padding: 20px; }\n h1 { font-size: 1.7rem; flex-wrap: wrap; }\n .options { gap: 10px; }\n .options label { padding: 4px 12px; font-size: 0.9rem; }\n .tab-btn { padding: 10px 16px; font-size: 0.9rem; max-width: 100%; flex: 1; }\n }\n <\/style>\n<\/head>\n<body>\n<div class=\"quiz-container\" id=\"quizApp\">\n <h1>\n \ud83d\udcd8 English Basic\n <small>20 preguntas<\/small>\n <\/h1>\n\n \n <div class=\"tabs\" id=\"tabHeaders\">\n <button class=\"tab-btn active\" data-tab=\"tabGrammar\">\ud83d\udccc Grammar<\/button>\n <button class=\"tab-btn\" data-tab=\"tabReading\">\ud83d\udcd6 Reading<\/button>\n <button class=\"tab-btn\" data-tab=\"tabFeedback\">\ud83d\udcca Feedback<\/button>\n <\/div>\n\n \n <div class=\"tab-content active\" id=\"tabGrammar\">\n <div class=\"section\">\n <div class=\"section-title\">\ud83d\udccc Grammar \u00b7 elementary (14)<\/div>\n <div id=\"grammarQuestions\"><\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"tab-content\" id=\"tabReading\">\n <div class=\"section\">\n <div class=\"section-title\">\ud83d\udcd6 Reading comprehension (6)<\/div>\n <div class=\"reading-text\">\n <p><strong>My daily routine<\/strong><\/p>\n <p>Hello! I’m Emma. I get up at 7:00 a.m. and I have breakfast with my family. I usually drink orange juice and eat toast. Then I go to school by bus. My school is big and I love my English teacher, Mrs. Clark. She speaks very clearly and she is kind. In the afternoon, I do my homework and I play with my dog, Max. At 8:00 p.m. I have dinner with my parents. I go to bed at 10:30 p.m. I always read a book before sleeping.<\/p>\n <\/div>\n <div id=\"readingQuestions\"><\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"tab-content\" id=\"tabFeedback\">\n <div class=\"feedback-area show\" id=\"feedbackAreaStatic\" style=\"display:block; margin-top:0;\">\n <div class=\"result-header\">\n <div class=\"score-badge\" id=\"scoreDisplay\">0%<\/div>\n <div class=\"level-box\" id=\"levelDisplay\">\ud83d\udcca Nivel: <span>\u2014<\/span><\/div>\n <\/div>\n <div id=\"detailedFeedback\" style=\"margin-bottom: 10px; font-weight: 500; color: #1b4057;\"><\/div>\n <div id=\"feedbackDetailList\" style=\"margin: 12px 0 16px 0; max-height: 260px; overflow-y: auto; background: #f3f8ff; padding: 12px 16px; border-radius: 20px; font-size: 0.95rem;\"><\/div>\n <div class=\"recomendaciones\" id=\"recomendacionesBox\">\n <h4>\ud83d\udcc8 Recomendaciones para mejorar<\/h4>\n <ul id=\"recomendacionesList\">\n <li>Completa el quiz para ver sugerencias personalizadas.<\/li>\n <\/ul>\n <\/div>\n <div class=\"footnote\">\u2728 Feedback basado en tus respuestas<\/div>\n <\/div>\n <\/div>\n\n \n <button class=\"btn-submit\" id=\"submitBtn\">\u2705 Check & get feedback<\/button>\n\n<\/div>\n\n<script>\n (function() {\n \/\/ ---------- DATA: 20 preguntas (14 Grammar + 6 Reading) ----------\n const grammarQuestions = [\n { id: 'g1', text: 'She _______ to school every day.', options: ['go', 'goes', 'going', 'gone'], correct: 1 },\n { id: 'g2', text: 'We _______ a new car last week.', options: ['buy', 'bought', 'buyed', 'buys'], correct: 1 },\n { id: 'g3', text: '_______ you like pizza?', options: ['Does', 'Do', 'Are', 'Is'], correct: 1 },\n { id: 'g4', text: 'My sister _______ reading a book now.', options: ['am', 'are', 'is', 'be'], correct: 2 },\n { id: 'g5', text: 'I _______ a student. I study English.', options: ['am', 'is', 'are', 'be'], correct: 0 },\n { id: 'g6', text: 'They _______ to the park yesterday.', options: ['walk', 'walked', 'walks', 'walking'], correct: 1 },\n { id: 'g7', text: 'He _______ breakfast at 8 o\\'clock every morning.', options: ['have', 'has', 'having', 'had'], correct: 1 },\n { id: 'g8', text: '_______ she speak Spanish?', options: ['Does', 'Do', 'Is', 'Are'], correct: 0 },\n { id: 'g9', text: 'We _______ going to the cinema tonight.', options: ['am', 'is', 'are', 'be'], correct: 2 },\n { id: 'g10', text: 'I _______ my homework yesterday.', options: ['do', 'did', 'does', 'done'], correct: 1 },\n { id: 'g11', text: '_______ you like ice-cream?', options: ['Does', 'Do', 'Is', 'Are'], correct: 1 },\n { id: 'g12', text: 'My parents _______ in a hospital.', options: ['work', 'works', 'working', 'worked'], correct: 0 },\n { id: 'g13', text: 'She _______ to music right now.', options: ['listen', 'listens', 'is listening', 'listened'], correct: 2 },\n { id: 'g14', text: 'They _______ not at home yesterday.', options: ['was', 'were', 'are', 'is'], correct: 1 }\n ];\n\n const readingQuestions = [\n { id: 'r1', text: 'What does Emma usually drink for breakfast?', options: ['Milk', 'Orange juice', 'Coffee', 'Tea'], correct: 1 },\n { id: 'r2', text: 'What is the name of Emma\\'s teacher?', options: ['Mrs. Smith', 'Mrs. Clark', 'Miss Emma', 'Mr. Max'], correct: 1 },\n { id: 'r3', text: 'What time does Emma go to bed?', options: ['9:30 p.m.', '10:00 p.m.', '10:30 p.m.', '11:00 p.m.'], correct: 2 },\n { id: 'r4', text: 'What does Emma do before sleeping?', options: ['Watch TV', 'Read a book', 'Play with Max', 'Study English'], correct: 1 },\n { id: 'r5', text: 'How does Emma go to school?', options: ['By car', 'By bus', 'Walking', 'By bike'], correct: 1 },\n { id: 'r6', text: 'What time does Emma have dinner?', options: ['7:00 p.m.', '8:00 p.m.', '9:00 p.m.', '10:00 p.m.'], correct: 1 }\n ];\n\n const allQuestions = [...grammarQuestions, ...readingQuestions];\n const totalQuestions = allQuestions.length;\n let userAnswers = new Array(totalQuestions).fill(null);\n\n \/\/ ---------- RENDER ----------\n function renderQuestions() {\n const grammarContainer = document.getElementById('grammarQuestions');\n const readingContainer = document.getElementById('readingQuestions');\n\n grammarContainer.innerHTML = grammarQuestions.map((q, index) => {\n return buildQuestionHTML(q, index);\n }).join('');\n\n const offset = grammarQuestions.length;\n readingContainer.innerHTML = readingQuestions.map((q, index) => {\n const realIndex = offset + index;\n return buildQuestionHTML(q, realIndex);\n }).join('');\n }\n\n function buildQuestionHTML(q, index) {\n const optionsHTML = q.options.map((opt, optIndex) => {\n return `\n <label>\n <input type=\"radio\" name=\"q${index}\" value=\"${optIndex}\" data-index=\"${index}\">\n ${opt}\n <\/label>\n `;\n }).join('');\n\n return `\n <div class=\"question neutral-answer\" id=\"qContainer${index}\">\n <p>${index+1}. ${q.text}<\/p>\n <div class=\"options\">${optionsHTML}<\/div>\n <\/div>\n `;\n }\n\n \/\/ ---------- CAPTURAR RESPUESTAS ----------\n function captureAnswers() {\n const radios = document.querySelectorAll('input[type=\"radio\"]');\n radios.forEach(radio => {\n radio.addEventListener('change', function(e) {\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 \/\/ ---------- TABS ----------\n function initTabs() {\n const tabs = document.querySelectorAll('.tab-btn');\n const contents = {\n tabGrammar: document.getElementById('tabGrammar'),\n tabReading: document.getElementById('tabReading'),\n tabFeedback: document.getElementById('tabFeedback')\n };\n\n tabs.forEach(tab => {\n tab.addEventListener('click', function() {\n tabs.forEach(t => t.classList.remove('active'));\n this.classList.add('active');\n Object.values(contents).forEach(c => c.classList.remove('active'));\n const target = this.dataset.tab;\n if (contents[target]) {\n contents[target].classList.add('active');\n }\n });\n });\n }\n\n \/\/ ---------- FEEDBACK ----------\n function showFeedback() {\n const feedbackTab = document.querySelector('.tab-btn[data-tab=\"tabFeedback\"]');\n if (feedbackTab) feedbackTab.click();\n\n const scoreDisplay = document.getElementById('scoreDisplay');\n const levelDisplay = document.getElementById('levelDisplay');\n const detailedFeedback = document.getElementById('detailedFeedback');\n const recomendacionesList = document.getElementById('recomendacionesList');\n const feedbackDetailList = document.getElementById('feedbackDetailList');\n\n let answeredCount = 0;\n let correctCount = 0;\n const detailItems = [];\n\n for (let i = 0; i < totalQuestions; i++) {\n const userAns = userAnswers[i];\n const question = allQuestions[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 detailItems.push({ text: `\u2753 Pregunta ${i+1}: sin responder`, type: 'empty' });\n } else {\n answeredCount++;\n const isCorrect = (userAns === question.correct);\n if (isCorrect) {\n correctCount++;\n container.classList.add('correct-answer');\n detailItems.push({ text: `\u2705 Pregunta ${i+1}: correcta`, type: 'correct' });\n } else {\n container.classList.add('wrong-answer');\n const correctText = question.options[question.correct];\n detailItems.push({ text: `\u274c Pregunta ${i+1}: incorrecta (respuesta: \"${correctText}\")`, type: 'wrong' });\n }\n }\n }\n\n const percentage = answeredCount === 0 ? 0 : Math.round((correctCount \/ totalQuestions) * 100);\n scoreDisplay.textContent = `${percentage}%`;\n\n let nivelActual = '';\n let nivelAlcanzable = '';\n let recomendaciones = [];\n\n if (percentage >= 90) {\n nivelActual = 'A2 (Elemental alto)';\n nivelAlcanzable = 'B1 (Pre-intermedio)';\n recomendaciones = [\n '\ud83c\udf1f \u00a1Excelente! Tienes una base s\u00f3lida. Practica con textos un poco m\u00e1s largos.',\n '\ud83d\udcdd Empieza a usar tiempos verbales como \"present perfect\" y \"past continuous\".',\n '\ud83c\udfa7 Escucha podcasts en ingl\u00e9s con subt\u00edtulos para mejorar comprensi\u00f3n auditiva.',\n '\ud83d\udcd6 Lee noticias en ingl\u00e9s simplificado (News in Levels).'\n ];\n } else if (percentage >= 70) {\n nivelActual = 'A1 (Elemental)';\n nivelAlcanzable = 'A2 (Elemental alto)';\n recomendaciones = [\n '\ud83d\udcd8 Repasa los verbos irregulares y las conjugaciones en presente y pasado.',\n '\ud83d\udcd6 Lee textos cortos todos los d\u00edas y subraya las palabras que no conozcas.',\n '\u270d\ufe0f Escribe 5 frases diarias sobre tu rutina para practicar estructura.',\n '\ud83c\udfaf Practica con ejercicios de \"present continuous\" y \"simple past\".'\n ];\n } else if (percentage >= 50) {\n nivelActual = 'A0 (Principiante)';\n nivelAlcanzable = 'A1 (Elemental)';\n recomendaciones = [\n '\ud83d\udd24 Dedica 20 minutos al d\u00eda a vocabulario b\u00e1sico (familia, comida, acciones).',\n '\ud83c\udfaf Practica el verbo \"to be\" y los pronombres personales.',\n '\ud83d\udcda Usa aplicaciones como Duolingo o Busuu para reforzar desde cero.',\n '\ud83d\udd04 Escucha canciones infantiles en ingl\u00e9s con letra.'\n ];\n } else {\n nivelActual = 'A0 (Principiante bajo)';\n nivelAlcanzable = 'A0+ (Principiante)';\n recomendaciones = [\n '\ud83d\udd04 Vuelve a repasar el abecedario y los n\u00fameros en ingl\u00e9s.',\n '\ud83d\uddbc\ufe0f Asocia im\u00e1genes con palabras: animales, objetos, colores.',\n '\ud83e\uddd8 No te desanimes, empieza con frases muy cortas y escucha canciones infantiles.',\n '\ud83d\udcdd Escribe 3 palabras nuevas cada d\u00eda con su significado.'\n ];\n }\n\n levelDisplay.innerHTML = `\ud83d\udcca Nivel actual: <span>${nivelActual}<\/span> \u00b7 Meta: ${nivelAlcanzable}`;\n\n feedbackDetailList.innerHTML = detailItems.map(item => \n `<div class=\"feedback-detail-item ${item.type}\">${item.text}<\/div>`\n ).join('');\n\n recomendacionesList.innerHTML = recomendaciones.map(r => `<li>${r}<\/li>`).join('');\n\n if (answeredCount === 0) {\n detailedFeedback.textContent = '\u26a0\ufe0f No has respondido ninguna pregunta. Intenta completar el quiz.';\n } else {\n const restantes = totalQuestions - answeredCount;\n let msg = `Respondiste ${answeredCount} de ${totalQuestions} preguntas. `;\n msg += restantes > 0 ? `Te faltan ${restantes} por responder. ` : '\u00a1Completaste todas! ';\n detailedFeedback.textContent = msg;\n }\n }\n\n \/\/ ---------- INIT ----------\n renderQuestions();\n captureAnswers();\n initTabs();\n\n document.getElementById('submitBtn').addEventListener('click', function() {\n showFeedback();\n const feedbackTab = document.querySelector('.tab-btn[data-tab=\"tabFeedback\"]');\n if (feedbackTab) feedbackTab.click();\n });\n\n })();\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Quiz Ingl\u00e9s Elemental \u00b7 20 preguntas \ud83d\udcd8 English Basic 20 preguntas \ud83d\udccc Grammar \ud83d\udcd6 Reading \ud83d\udcca Feedback \ud83d\udccc Grammar \u00b7 elementary (14) \ud83d\udcd6 Reading comprehension (6) My daily routine Hello! I’m Emma. I get up at 7:00 a.m. and I have breakfast with my family. I usually drink orange juice and eat toast. Then I […]<\/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-732","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/teacherjm.com\/epja\/wp-json\/wp\/v2\/pages\/732","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=732"}],"version-history":[{"count":1,"href":"https:\/\/teacherjm.com\/epja\/wp-json\/wp\/v2\/pages\/732\/revisions"}],"predecessor-version":[{"id":734,"href":"https:\/\/teacherjm.com\/epja\/wp-json\/wp\/v2\/pages\/732\/revisions\/734"}],"wp:attachment":[{"href":"https:\/\/teacherjm.com\/epja\/wp-json\/wp\/v2\/media?parent=732"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}