Quiz \u00b7 Modales + WH \u00b7 Lectura<\/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, #f0f4fe 0%, #e2eaf5 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: 1000px;\n width: 100%;\n background: rgba(255, 255, 255, 0.88);\n backdrop-filter: blur(8px);\n border-radius: 48px;\n padding: 30px 35px;\n box-shadow: 0 20px 40px rgba(0, 20, 40, 0.2);\n border: 1px solid rgba(255, 255, 255, 0.5);\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 .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 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 .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 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 .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 }\n .feedback-area {\n background: #ffffffd9;\n backdrop-filter: blur(4px);\n border-radius: 32px;\n padding: 22px 28px;\n border: 1px solid #bcd0e3;\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 \/* Estilos lecci\u00f3n *\/\n .lesson-box {\n background: #e8f0fa;\n border-radius: 28px;\n padding: 22px 26px;\n margin-bottom: 24px;\n border: 1px solid #c5d7ec;\n }\n .lesson-box h3 {\n color: #0b2a3b;\n margin-bottom: 10px;\n font-size: 1.2rem;\n }\n .lesson-box .grammar-item {\n background: white;\n padding: 14px 18px;\n border-radius: 18px;\n margin-bottom: 12px;\n box-shadow: 0 2px 6px rgba(0,0,0,0.03);\n border-left: 5px solid #2a5e7a;\n }\n .grammar-item strong {\n color: #1a4f6e;\n }\n .grammar-item .example {\n color: #2a5e7a;\n font-style: italic;\n background: #eef4fc;\n padding: 4px 12px;\n border-radius: 30px;\n display: inline-block;\n margin-top: 4px;\n }\n\n \/* Reading *\/\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.7;\n }\n .reading-text p {\n margin-bottom: 8px;\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 .lesson-box { padding: 16px; }\n }\n <\/style>\n<\/head>\n<body>\n<div class=\"quiz-container\">\n <h1>\n \u26a1 Modal Verbs & WH-words\n <small>25 preguntas \u00b7 autoevaluaci\u00f3n<\/small>\n <\/h1>\n\n \n <div class=\"tabs\">\n <button class=\"tab-btn active\" data-tab=\"tabGrammar\">\ud83d\udcd8 Gram\u00e1tica<\/button>\n <button class=\"tab-btn\" data-tab=\"tabExercises\">\ud83d\udcdd Ejercicios<\/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-title\">\ud83d\udcd8 Modal Verbs & WH-words \u00b7 explicaci\u00f3n<\/div>\n \n <div class=\"lesson-box\">\n <h3>\ud83d\udd39 WH-words (Palabras interrogativas)<\/h3>\n <div class=\"grammar-item\"><strong>Who<\/strong> \u2014 \u00bfqui\u00e9n? <br><span class=\"example\">Ej: <em>Who is your teacher?<\/em><\/span><\/div>\n <div class=\"grammar-item\"><strong>What<\/strong> \u2014 \u00bfqu\u00e9? \/ \u00bfcu\u00e1l? <br><span class=\"example\">Ej: <em>What is your name?<\/em><\/span><\/div>\n <div class=\"grammar-item\"><strong>Where<\/strong> \u2014 \u00bfd\u00f3nde? <br><span class=\"example\">Ej: <em>Where do you live?<\/em><\/span><\/div>\n <div class=\"grammar-item\"><strong>When<\/strong> \u2014 \u00bfcu\u00e1ndo? <br><span class=\"example\">Ej: <em>When does the movie start?<\/em><\/span><\/div>\n <div class=\"grammar-item\"><strong>Why<\/strong> \u2014 \u00bfpor qu\u00e9? <br><span class=\"example\">Ej: <em>Why are you sad?<\/em><\/span><\/div>\n <div class=\"grammar-item\"><strong>How<\/strong> \u2014 \u00bfc\u00f3mo? <br><span class=\"example\">Ej: <em>How do you go to school?<\/em><\/span><\/div>\n <div class=\"grammar-item\"><strong>Whose<\/strong> \u2014 \u00bfde qui\u00e9n? <br><span class=\"example\">Ej: <em>Whose bag is this?<\/em><\/span><\/div>\n <div class=\"grammar-item\"><strong>Which<\/strong> \u2014 \u00bfcu\u00e1l? (entre opciones) <br><span class=\"example\">Ej: <em>Which color do you prefer?<\/em><\/span><\/div>\n <div class=\"grammar-item\"><strong>How far<\/strong> \u2014 \u00bfa qu\u00e9 distancia? <br><span class=\"example\">Ej: <em>How far is the station?<\/em><\/span><\/div>\n <div class=\"grammar-item\"><strong>How long<\/strong> \u2014 \u00bfcu\u00e1nto tiempo? <br><span class=\"example\">Ej: <em>How long have you lived here?<\/em><\/span><\/div>\n <div class=\"grammar-item\"><strong>How often<\/strong> \u2014 \u00bfcon qu\u00e9 frecuencia? <br><span class=\"example\">Ej: <em>How often do you exercise?<\/em><\/span><\/div>\n <div class=\"grammar-item\"><strong>What time<\/strong> \u2014 \u00bfa qu\u00e9 hora? <br><span class=\"example\">Ej: <em>What time is the meeting?<\/em><\/span><\/div>\n <div class=\"grammar-item\"><strong>How old<\/strong> \u2014 \u00bfqu\u00e9 edad? <br><span class=\"example\">Ej: <em>How old are you?<\/em><\/span><\/div>\n <\/div>\n\n <div class=\"lesson-box\">\n <h3>\ud83d\udd38 Modal Verbs (verbos modales)<\/h3>\n <div class=\"grammar-item\"><strong>Can<\/strong> \u2014 poder \/ saber <br><span class=\"example\">Ej: <em>I can swim.<\/em> \/ <em>Can you help me?<\/em><\/span><\/div>\n <div class=\"grammar-item\"><strong>Must<\/strong> \u2014 deber \/ obligaci\u00f3n <br><span class=\"example\">Ej: <em>You must wear a seatbelt.<\/em><\/span><\/div>\n <div class=\"grammar-item\"><strong>Should<\/strong> \u2014 deber\u00eda (consejo) <br><span class=\"example\">Ej: <em>You should study more.<\/em><\/span><\/div>\n <div class=\"grammar-item\"><strong>May<\/strong> \u2014 poder (permiso \/ posibilidad) <br><span class=\"example\">Ej: <em>May I come in?<\/em> \/ <em>It may rain.<\/em><\/span><\/div>\n <div class=\"grammar-item\"><strong>Might<\/strong> \u2014 podr\u00eda (posibilidad menos segura) <br><span class=\"example\">Ej: <em>I might go to the party.<\/em><\/span><\/div>\n <div class=\"grammar-item\"><strong>Will<\/strong> \u2014 futuro \/ voluntad <br><span class=\"example\">Ej: <em>I will help you.<\/em> \/ <em>Will you marry me?<\/em><\/span><\/div>\n <div class=\"grammar-item\"><strong>Ought to<\/strong> \u2014 deber\u00eda (similar a should) <br><span class=\"example\">Ej: <em>You ought to see a doctor.<\/em><\/span><\/div>\n <div class=\"grammar-item\"><strong>Have to<\/strong> \u2014 tener que (obligaci\u00f3n externa) <br><span class=\"example\">Ej: <em>I have to work tomorrow.<\/em><\/span><\/div>\n <div class=\"grammar-item\"><strong>Shall<\/strong> \u2014 sugerencia \/ ofrecimiento <br><span class=\"example\">Ej: <em>Shall we go?<\/em><\/span><\/div>\n <div class=\"grammar-item\"><strong>Would<\/strong> \u2014 condicional \/ cortes\u00eda <br><span class=\"example\">Ej: <em>Would you like some coffee?<\/em><\/span><\/div>\n <\/div>\n\n <div class=\"lesson-box\">\n <h3>\ud83d\udccc Uso pr\u00e1ctico en preguntas<\/h3>\n <div class=\"grammar-item\">\n <strong>Estructura con WH-words:<\/strong> WH-word + verbo auxiliar + sujeto + verbo principal…<br>\n <span class=\"example\">Ej: <em>How far is the station?<\/em> \/ <em>What time does the movie start?<\/em><\/span>\n <\/div>\n <div class=\"grammar-item\">\n <strong>Modales en preguntas:<\/strong> Modal + sujeto + verbo infinitivo…<br>\n <span class=\"example\">Ej: <em>Can you help me?<\/em> \/ <em>Should we call her?<\/em> \/ <em>Will you come?<\/em><\/span>\n <\/div>\n <div style=\"background: #d4e2f5; border-radius: 16px; padding: 12px 16px; margin-top: 10px;\">\n <p style=\"color: #0b2a3b; font-weight: 500;\">\ud83d\udca1 <strong>Recuerda:<\/strong> Los modales no cambian con la persona (no se a\u00f1ade -s). Despu\u00e9s de un modal, el verbo va en infinitivo sin “to” (excepto “have to” y “ought to”).<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"tab-content\" id=\"tabExercises\">\n <div class=\"section-title\">\ud83d\udcdd Ejercicios \u00b7 25 preguntas<\/div>\n\n \n <div class=\"reading-text\">\n <p><strong>\ud83d\udcd6 A day in the life of Tom<\/strong><\/p>\n <p>Tom is a student. He <strong>has to<\/strong> wake up early every day because his school starts at 8 a.m. He <strong>can<\/strong> speak two languages: English and French. He usually has breakfast with his family. Tom’s mother always says: “<em>You <strong>ought to<\/strong> eat healthy food<\/em>“.<\/p>\n <p>After school, Tom <strong>can<\/strong> play video games, but he <strong>must<\/strong> do his homework first. His father often asks: “<em><strong>Where<\/strong> are your books?<\/em>” or “<em><strong>Why<\/strong> are you so late?<\/em>“. Tom loves sports, and he <strong>can<\/strong> play football very well. On weekends, he <strong>may<\/strong> go to the park with his friends.<\/p>\n <p>At night, Tom usually reads a book. His mother always tells him: “<em>You <strong>should<\/strong> sleep early<\/em>“. Tom goes to bed at 10 p.m. He thinks: “<em><strong>What<\/strong> will I do tomorrow?<\/em>“<\/p>\n <p>Tom’s school is 2 kilometers from his house, and he <strong>has to<\/strong> walk there every day. He <strong>might<\/strong> get a bike for his birthday. His sister often asks: “<em><strong>How old<\/strong> is your teacher?<\/em>” and “<em><strong>How long<\/strong> is the school day?<\/em>“<\/p>\n <\/div>\n\n <div id=\"allQuestionsContainer\"><\/div>\n <\/div>\n\n \n <div class=\"tab-content\" id=\"tabFeedback\">\n <div class=\"feedback-area\">\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 Autoevaluaci\u00f3n \u00b7 Feedback detallado<\/div>\n <\/div>\n <\/div>\n\n <button class=\"btn-submit\" id=\"submitBtn\">\u2705 Corregir y ver feedback<\/button>\n<\/div>\n\n<script>\n (function() {\n \/\/ ---------- 25 PREGUNTAS (20 generales + 5 de lectura) ----------\n const allQuestionsData = [\n \/\/ WH-words (12)\n { id: 'q1', text: '_______ is your best friend?', options: ['Who', 'What', 'Where', 'When'], correct: 0 },\n { id: 'q2', text: '_______ do you go to the gym?', options: ['How often', 'How much', 'How many', 'How long'], correct: 0 },\n { id: 'q3', text: '_______ is the nearest supermarket?', options: ['Where', 'What', 'Who', 'Which'], correct: 0 },\n { id: 'q4', text: '_______ book is this?', options: ['Whose', 'Who\\'s', 'Which', 'What'], correct: 0 },\n { id: 'q5', text: '_______ do you prefer: coffee or tea?', options: ['Which', 'What', 'Who', 'Whose'], correct: 0 },\n { id: 'q6', text: '_______ is that woman over there?', options: ['Who', 'What', 'Where', 'Whose'], correct: 0 },\n { id: 'q7', text: '_______ do you usually have lunch?', options: ['What time', 'How often', 'How much', 'Where'], correct: 0 },\n { id: 'q8', text: '_______ is the station from here?', options: ['How far', 'How long', 'How often', 'How old'], correct: 0 },\n { id: 'q9', text: '_______ have you lived in this city?', options: ['How long', 'How far', 'How often', 'How old'], correct: 0 },\n { id: 'q10', text: '_______ do you visit your grandparents?', options: ['How often', 'How long', 'How far', 'How old'], correct: 0 },\n { id: 'q11', text: '_______ is the meeting?', options: ['What time', 'How often', 'How long', 'How far'], correct: 0 },\n { id: 'q12', text: '_______ is your sister?', options: ['How old', 'How long', 'How far', 'How often'], correct: 0 },\n \/\/ Modal verbs (8)\n { id: 'q13', text: 'You _______ wear a seatbelt in the car.', options: ['must', 'can', 'may', 'would'], correct: 0 },\n { id: 'q14', text: 'She _______ speak three languages.', options: ['can', 'must', 'should', 'would'], correct: 0 },\n { id: 'q15', text: 'We _______ arrive late, the meeting starts at 9.', options: ['mustn\\'t', 'don\\'t have to', 'couldn\\'t', 'might not'], correct: 0 },\n { id: 'q16', text: '_______ you help me with this?', options: ['Can', 'Must', 'Should', 'Would'], correct: 0 },\n { id: 'q17', text: 'You _______ smoke here; it\\'s prohibited.', options: ['must not', 'don\\'t have to', 'may not', 'could not'], correct: 0 },\n { id: 'q18', text: 'I _______ finish this project today, it\\'s urgent.', options: ['must', 'can', 'may', 'will'], correct: 0 },\n { id: 'q19', text: '_______ I use your phone, please?', options: ['Can', 'Must', 'Should', 'Will'], correct: 0 },\n { id: 'q20', text: 'You _______ eat too much sugar, it\\'s unhealthy.', options: ['shouldn\\'t', 'don\\'t have to', 'can\\'t', 'won\\'t'], correct: 0 },\n \/\/ READING COMPREHENSION (5 preguntas sobre el texto)\n { id: 'q21', text: 'What time does Tom\\'s school start?', options: ['7 a.m.', '8 a.m.', '9 a.m.', '10 a.m.'], correct: 1 },\n { id: 'q22', text: 'How many languages can Tom speak?', options: ['One', 'Two', 'Three', 'Four'], correct: 1 },\n { id: 'q23', text: 'What does Tom\\'s mother say about food?', options: ['Eat healthy', 'Eat fast food', 'Eat pizza', 'Eat sweets'], correct: 0 },\n { id: 'q24', text: 'What must Tom do before playing video games?', options: ['Watch TV', 'Do homework', 'Eat dinner', 'Sleep'], correct: 1 },\n { id: 'q25', text: 'How far is Tom\\'s school from his house?', options: ['1 km', '2 km', '3 km', '4 km'], correct: 1 }\n ];\n\n const totalQuestions = allQuestionsData.length;\n let userAnswers = new Array(totalQuestions).fill(null);\n\n \/\/ ---------- RENDER ----------\n function renderAllQuestions() {\n const container = document.getElementById('allQuestionsContainer');\n container.innerHTML = allQuestionsData.map((q, index) => buildQuestionHTML(q, index)).join('');\n }\n\n function buildQuestionHTML(q, index) {\n const optionsHTML = q.options.map((opt, optIndex) => `\n <label>\n <input type=\"radio\" name=\"q${index}\" value=\"${optIndex}\" data-index=\"${index}\">\n ${opt}\n <\/label>\n `).join('');\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 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 \/\/ ---------- TABS ----------\n function initTabs() {\n const tabs = document.querySelectorAll('.tab-btn');\n const contents = {\n tabGrammar: document.getElementById('tabGrammar'),\n tabExercises: document.getElementById('tabExercises'),\n tabFeedback: document.getElementById('tabFeedback')\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]) contents[target].classList.add('active');\n });\n });\n }\n\n \/\/ ---------- FEEDBACK ----------\n function showFeedback() {\n document.querySelector('.tab-btn[data-tab=\"tabFeedback\"]')?.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, correctCount = 0;\n const detailItems = [];\n\n for (let i = 0; i < totalQuestions; i++) {\n const userAns = userAnswers[i];\n const question = allQuestionsData[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 (correcta: \"${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 = '', nivelAlcanzable = '', recomendaciones = [];\n\n if (percentage >= 90) {\n nivelActual = 'B1 (Intermedio bajo)';\n nivelAlcanzable = 'B1+ (Intermedio)';\n recomendaciones = [\n '\ud83c\udf1f \u00a1Excelente! Dominas los modales y las WH-words, incluyendo los nuevos.',\n '\ud83d\udcd8 Ahora trabaja con \"should have\", \"might have\" y condicionales.',\n '\ud83c\udfa7 Escucha entrevistas en ingl\u00e9s para identificar WH-words en contexto.'\n ];\n } else if (percentage >= 70) {\n nivelActual = 'A2 (Elemental alto)';\n nivelAlcanzable = 'B1 (Intermedio bajo)';\n recomendaciones = [\n '\ud83d\udcd6 Repasa la diferencia entre \"must\" y \"have to\", y \"may\" vs \"might\".',\n '\u270d\ufe0f Escribe 5 preguntas con WH-words cada d\u00eda.',\n '\ud83c\udfaf Practica con ejercicios de \"modal verbs\" en contexto.'\n ];\n } else if (percentage >= 50) {\n nivelActual = 'A1 (Elemental)';\n nivelAlcanzable = 'A2 (Elemental alto)';\n recomendaciones = [\n '\ud83d\udd24 Memoriza las WH-words: Who, What, Where, When, Why, How, y las nuevas.',\n '\ud83d\udcda Estudia los modales b\u00e1sicos: can, must, should, may, have to.',\n '\ud83d\udd04 Haz ejercicios de completar frases con modales.'\n ];\n } else {\n nivelActual = 'A0 (Principiante)';\n nivelAlcanzable = 'A1 (Elemental)';\n recomendaciones = [\n '\ud83d\udd04 Empieza con lo b\u00e1sico: aprende las WH-words con ejemplos.',\n '\ud83d\udcdd Practica \"can\", \"must\" y \"have to\" en frases simples.',\n '\ud83e\uddd8 No te preocupes, todos empezamos desde cero. Escucha canciones infantiles.'\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 renderAllQuestions();\n captureAnswers();\n initTabs();\n\n document.getElementById('submitBtn').addEventListener('click', function() {\n showFeedback();\n });\n\n })();\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Quiz \u00b7 Modales + WH \u00b7 Lectura \u26a1 Modal Verbs & WH-words 25 preguntas \u00b7 autoevaluaci\u00f3n \ud83d\udcd8 Gram\u00e1tica \ud83d\udcdd Ejercicios \ud83d\udcca Feedback \ud83d\udcd8 Modal Verbs & WH-words \u00b7 explicaci\u00f3n \ud83d\udd39 WH-words (Palabras interrogativas) Who \u2014 \u00bfqui\u00e9n? Ej: Who is your teacher? What \u2014 \u00bfqu\u00e9? \/ \u00bfcu\u00e1l? Ej: What is your name? Where \u2014 \u00bfd\u00f3nde? Ej: […]<\/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-738","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/teacherjm.com\/epja\/wp-json\/wp\/v2\/pages\/738","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=738"}],"version-history":[{"count":1,"href":"https:\/\/teacherjm.com\/epja\/wp-json\/wp\/v2\/pages\/738\/revisions"}],"predecessor-version":[{"id":739,"href":"https:\/\/teacherjm.com\/epja\/wp-json\/wp\/v2\/pages\/738\/revisions\/739"}],"wp:attachment":[{"href":"https:\/\/teacherjm.com\/epja\/wp-json\/wp\/v2\/media?parent=738"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":738,"date":"2026-07-24T18:08:49","date_gmt":"2026-07-24T18:08:49","guid":{"rendered":"https:\/\/teacherjm.com\/epja\/?page_id=738"},"modified":"2026-07-24T18:08:49","modified_gmt":"2026-07-24T18:08:49","slug":"738-2","status":"publish","type":"page","link":"https:\/\/teacherjm.com\/epja\/738-2\/","title":{"rendered":""},"content":{"rendered":"\n\n\n\n \n \n Quiz \u00b7 Modales + WH \u00b7 Lectura<\/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, #f0f4fe 0%, #e2eaf5 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: 1000px;\n width: 100%;\n background: rgba(255, 255, 255, 0.88);\n backdrop-filter: blur(8px);\n border-radius: 48px;\n padding: 30px 35px;\n box-shadow: 0 20px 40px rgba(0, 20, 40, 0.2);\n border: 1px solid rgba(255, 255, 255, 0.5);\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 .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 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 .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 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 .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 }\n .feedback-area {\n background: #ffffffd9;\n backdrop-filter: blur(4px);\n border-radius: 32px;\n padding: 22px 28px;\n border: 1px solid #bcd0e3;\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 \/* Estilos lecci\u00f3n *\/\n .lesson-box {\n background: #e8f0fa;\n border-radius: 28px;\n padding: 22px 26px;\n margin-bottom: 24px;\n border: 1px solid #c5d7ec;\n }\n .lesson-box h3 {\n color: #0b2a3b;\n margin-bottom: 10px;\n font-size: 1.2rem;\n }\n .lesson-box .grammar-item {\n background: white;\n padding: 14px 18px;\n border-radius: 18px;\n margin-bottom: 12px;\n box-shadow: 0 2px 6px rgba(0,0,0,0.03);\n border-left: 5px solid #2a5e7a;\n }\n .grammar-item strong {\n color: #1a4f6e;\n }\n .grammar-item .example {\n color: #2a5e7a;\n font-style: italic;\n background: #eef4fc;\n padding: 4px 12px;\n border-radius: 30px;\n display: inline-block;\n margin-top: 4px;\n }\n\n \/* Reading *\/\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.7;\n }\n .reading-text p {\n margin-bottom: 8px;\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 .lesson-box { padding: 16px; }\n }\n <\/style>\n<\/head>\n<body>\n<div class=\"quiz-container\">\n <h1>\n \u26a1 Modal Verbs & WH-words\n <small>25 preguntas \u00b7 autoevaluaci\u00f3n<\/small>\n <\/h1>\n\n \n <div class=\"tabs\">\n <button class=\"tab-btn active\" data-tab=\"tabGrammar\">\ud83d\udcd8 Gram\u00e1tica<\/button>\n <button class=\"tab-btn\" data-tab=\"tabExercises\">\ud83d\udcdd Ejercicios<\/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-title\">\ud83d\udcd8 Modal Verbs & WH-words \u00b7 explicaci\u00f3n<\/div>\n \n <div class=\"lesson-box\">\n <h3>\ud83d\udd39 WH-words (Palabras interrogativas)<\/h3>\n <div class=\"grammar-item\"><strong>Who<\/strong> \u2014 \u00bfqui\u00e9n? <br><span class=\"example\">Ej: <em>Who is your teacher?<\/em><\/span><\/div>\n <div class=\"grammar-item\"><strong>What<\/strong> \u2014 \u00bfqu\u00e9? \/ \u00bfcu\u00e1l? <br><span class=\"example\">Ej: <em>What is your name?<\/em><\/span><\/div>\n <div class=\"grammar-item\"><strong>Where<\/strong> \u2014 \u00bfd\u00f3nde? <br><span class=\"example\">Ej: <em>Where do you live?<\/em><\/span><\/div>\n <div class=\"grammar-item\"><strong>When<\/strong> \u2014 \u00bfcu\u00e1ndo? <br><span class=\"example\">Ej: <em>When does the movie start?<\/em><\/span><\/div>\n <div class=\"grammar-item\"><strong>Why<\/strong> \u2014 \u00bfpor qu\u00e9? <br><span class=\"example\">Ej: <em>Why are you sad?<\/em><\/span><\/div>\n <div class=\"grammar-item\"><strong>How<\/strong> \u2014 \u00bfc\u00f3mo? <br><span class=\"example\">Ej: <em>How do you go to school?<\/em><\/span><\/div>\n <div class=\"grammar-item\"><strong>Whose<\/strong> \u2014 \u00bfde qui\u00e9n? <br><span class=\"example\">Ej: <em>Whose bag is this?<\/em><\/span><\/div>\n <div class=\"grammar-item\"><strong>Which<\/strong> \u2014 \u00bfcu\u00e1l? (entre opciones) <br><span class=\"example\">Ej: <em>Which color do you prefer?<\/em><\/span><\/div>\n <div class=\"grammar-item\"><strong>How far<\/strong> \u2014 \u00bfa qu\u00e9 distancia? <br><span class=\"example\">Ej: <em>How far is the station?<\/em><\/span><\/div>\n <div class=\"grammar-item\"><strong>How long<\/strong> \u2014 \u00bfcu\u00e1nto tiempo? <br><span class=\"example\">Ej: <em>How long have you lived here?<\/em><\/span><\/div>\n <div class=\"grammar-item\"><strong>How often<\/strong> \u2014 \u00bfcon qu\u00e9 frecuencia? <br><span class=\"example\">Ej: <em>How often do you exercise?<\/em><\/span><\/div>\n <div class=\"grammar-item\"><strong>What time<\/strong> \u2014 \u00bfa qu\u00e9 hora? <br><span class=\"example\">Ej: <em>What time is the meeting?<\/em><\/span><\/div>\n <div class=\"grammar-item\"><strong>How old<\/strong> \u2014 \u00bfqu\u00e9 edad? <br><span class=\"example\">Ej: <em>How old are you?<\/em><\/span><\/div>\n <\/div>\n\n <div class=\"lesson-box\">\n <h3>\ud83d\udd38 Modal Verbs (verbos modales)<\/h3>\n <div class=\"grammar-item\"><strong>Can<\/strong> \u2014 poder \/ saber <br><span class=\"example\">Ej: <em>I can swim.<\/em> \/ <em>Can you help me?<\/em><\/span><\/div>\n <div class=\"grammar-item\"><strong>Must<\/strong> \u2014 deber \/ obligaci\u00f3n <br><span class=\"example\">Ej: <em>You must wear a seatbelt.<\/em><\/span><\/div>\n <div class=\"grammar-item\"><strong>Should<\/strong> \u2014 deber\u00eda (consejo) <br><span class=\"example\">Ej: <em>You should study more.<\/em><\/span><\/div>\n <div class=\"grammar-item\"><strong>May<\/strong> \u2014 poder (permiso \/ posibilidad) <br><span class=\"example\">Ej: <em>May I come in?<\/em> \/ <em>It may rain.<\/em><\/span><\/div>\n <div class=\"grammar-item\"><strong>Might<\/strong> \u2014 podr\u00eda (posibilidad menos segura) <br><span class=\"example\">Ej: <em>I might go to the party.<\/em><\/span><\/div>\n <div class=\"grammar-item\"><strong>Will<\/strong> \u2014 futuro \/ voluntad <br><span class=\"example\">Ej: <em>I will help you.<\/em> \/ <em>Will you marry me?<\/em><\/span><\/div>\n <div class=\"grammar-item\"><strong>Ought to<\/strong> \u2014 deber\u00eda (similar a should) <br><span class=\"example\">Ej: <em>You ought to see a doctor.<\/em><\/span><\/div>\n <div class=\"grammar-item\"><strong>Have to<\/strong> \u2014 tener que (obligaci\u00f3n externa) <br><span class=\"example\">Ej: <em>I have to work tomorrow.<\/em><\/span><\/div>\n <div class=\"grammar-item\"><strong>Shall<\/strong> \u2014 sugerencia \/ ofrecimiento <br><span class=\"example\">Ej: <em>Shall we go?<\/em><\/span><\/div>\n <div class=\"grammar-item\"><strong>Would<\/strong> \u2014 condicional \/ cortes\u00eda <br><span class=\"example\">Ej: <em>Would you like some coffee?<\/em><\/span><\/div>\n <\/div>\n\n <div class=\"lesson-box\">\n <h3>\ud83d\udccc Uso pr\u00e1ctico en preguntas<\/h3>\n <div class=\"grammar-item\">\n <strong>Estructura con WH-words:<\/strong> WH-word + verbo auxiliar + sujeto + verbo principal…<br>\n <span class=\"example\">Ej: <em>How far is the station?<\/em> \/ <em>What time does the movie start?<\/em><\/span>\n <\/div>\n <div class=\"grammar-item\">\n <strong>Modales en preguntas:<\/strong> Modal + sujeto + verbo infinitivo…<br>\n <span class=\"example\">Ej: <em>Can you help me?<\/em> \/ <em>Should we call her?<\/em> \/ <em>Will you come?<\/em><\/span>\n <\/div>\n <div style=\"background: #d4e2f5; border-radius: 16px; padding: 12px 16px; margin-top: 10px;\">\n <p style=\"color: #0b2a3b; font-weight: 500;\">\ud83d\udca1 <strong>Recuerda:<\/strong> Los modales no cambian con la persona (no se a\u00f1ade -s). Despu\u00e9s de un modal, el verbo va en infinitivo sin “to” (excepto “have to” y “ought to”).<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"tab-content\" id=\"tabExercises\">\n <div class=\"section-title\">\ud83d\udcdd Ejercicios \u00b7 25 preguntas<\/div>\n\n \n <div class=\"reading-text\">\n <p><strong>\ud83d\udcd6 A day in the life of Tom<\/strong><\/p>\n <p>Tom is a student. He <strong>has to<\/strong> wake up early every day because his school starts at 8 a.m. He <strong>can<\/strong> speak two languages: English and French. He usually has breakfast with his family. Tom’s mother always says: “<em>You <strong>ought to<\/strong> eat healthy food<\/em>“.<\/p>\n <p>After school, Tom <strong>can<\/strong> play video games, but he <strong>must<\/strong> do his homework first. His father often asks: “<em><strong>Where<\/strong> are your books?<\/em>” or “<em><strong>Why<\/strong> are you so late?<\/em>“. Tom loves sports, and he <strong>can<\/strong> play football very well. On weekends, he <strong>may<\/strong> go to the park with his friends.<\/p>\n <p>At night, Tom usually reads a book. His mother always tells him: “<em>You <strong>should<\/strong> sleep early<\/em>“. Tom goes to bed at 10 p.m. He thinks: “<em><strong>What<\/strong> will I do tomorrow?<\/em>“<\/p>\n <p>Tom’s school is 2 kilometers from his house, and he <strong>has to<\/strong> walk there every day. He <strong>might<\/strong> get a bike for his birthday. His sister often asks: “<em><strong>How old<\/strong> is your teacher?<\/em>” and “<em><strong>How long<\/strong> is the school day?<\/em>“<\/p>\n <\/div>\n\n <div id=\"allQuestionsContainer\"><\/div>\n <\/div>\n\n \n <div class=\"tab-content\" id=\"tabFeedback\">\n <div class=\"feedback-area\">\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 Autoevaluaci\u00f3n \u00b7 Feedback detallado<\/div>\n <\/div>\n <\/div>\n\n <button class=\"btn-submit\" id=\"submitBtn\">\u2705 Corregir y ver feedback<\/button>\n<\/div>\n\n<script>\n (function() {\n \/\/ ---------- 25 PREGUNTAS (20 generales + 5 de lectura) ----------\n const allQuestionsData = [\n \/\/ WH-words (12)\n { id: 'q1', text: '_______ is your best friend?', options: ['Who', 'What', 'Where', 'When'], correct: 0 },\n { id: 'q2', text: '_______ do you go to the gym?', options: ['How often', 'How much', 'How many', 'How long'], correct: 0 },\n { id: 'q3', text: '_______ is the nearest supermarket?', options: ['Where', 'What', 'Who', 'Which'], correct: 0 },\n { id: 'q4', text: '_______ book is this?', options: ['Whose', 'Who\\'s', 'Which', 'What'], correct: 0 },\n { id: 'q5', text: '_______ do you prefer: coffee or tea?', options: ['Which', 'What', 'Who', 'Whose'], correct: 0 },\n { id: 'q6', text: '_______ is that woman over there?', options: ['Who', 'What', 'Where', 'Whose'], correct: 0 },\n { id: 'q7', text: '_______ do you usually have lunch?', options: ['What time', 'How often', 'How much', 'Where'], correct: 0 },\n { id: 'q8', text: '_______ is the station from here?', options: ['How far', 'How long', 'How often', 'How old'], correct: 0 },\n { id: 'q9', text: '_______ have you lived in this city?', options: ['How long', 'How far', 'How often', 'How old'], correct: 0 },\n { id: 'q10', text: '_______ do you visit your grandparents?', options: ['How often', 'How long', 'How far', 'How old'], correct: 0 },\n { id: 'q11', text: '_______ is the meeting?', options: ['What time', 'How often', 'How long', 'How far'], correct: 0 },\n { id: 'q12', text: '_______ is your sister?', options: ['How old', 'How long', 'How far', 'How often'], correct: 0 },\n \/\/ Modal verbs (8)\n { id: 'q13', text: 'You _______ wear a seatbelt in the car.', options: ['must', 'can', 'may', 'would'], correct: 0 },\n { id: 'q14', text: 'She _______ speak three languages.', options: ['can', 'must', 'should', 'would'], correct: 0 },\n { id: 'q15', text: 'We _______ arrive late, the meeting starts at 9.', options: ['mustn\\'t', 'don\\'t have to', 'couldn\\'t', 'might not'], correct: 0 },\n { id: 'q16', text: '_______ you help me with this?', options: ['Can', 'Must', 'Should', 'Would'], correct: 0 },\n { id: 'q17', text: 'You _______ smoke here; it\\'s prohibited.', options: ['must not', 'don\\'t have to', 'may not', 'could not'], correct: 0 },\n { id: 'q18', text: 'I _______ finish this project today, it\\'s urgent.', options: ['must', 'can', 'may', 'will'], correct: 0 },\n { id: 'q19', text: '_______ I use your phone, please?', options: ['Can', 'Must', 'Should', 'Will'], correct: 0 },\n { id: 'q20', text: 'You _______ eat too much sugar, it\\'s unhealthy.', options: ['shouldn\\'t', 'don\\'t have to', 'can\\'t', 'won\\'t'], correct: 0 },\n \/\/ READING COMPREHENSION (5 preguntas sobre el texto)\n { id: 'q21', text: 'What time does Tom\\'s school start?', options: ['7 a.m.', '8 a.m.', '9 a.m.', '10 a.m.'], correct: 1 },\n { id: 'q22', text: 'How many languages can Tom speak?', options: ['One', 'Two', 'Three', 'Four'], correct: 1 },\n { id: 'q23', text: 'What does Tom\\'s mother say about food?', options: ['Eat healthy', 'Eat fast food', 'Eat pizza', 'Eat sweets'], correct: 0 },\n { id: 'q24', text: 'What must Tom do before playing video games?', options: ['Watch TV', 'Do homework', 'Eat dinner', 'Sleep'], correct: 1 },\n { id: 'q25', text: 'How far is Tom\\'s school from his house?', options: ['1 km', '2 km', '3 km', '4 km'], correct: 1 }\n ];\n\n const totalQuestions = allQuestionsData.length;\n let userAnswers = new Array(totalQuestions).fill(null);\n\n \/\/ ---------- RENDER ----------\n function renderAllQuestions() {\n const container = document.getElementById('allQuestionsContainer');\n container.innerHTML = allQuestionsData.map((q, index) => buildQuestionHTML(q, index)).join('');\n }\n\n function buildQuestionHTML(q, index) {\n const optionsHTML = q.options.map((opt, optIndex) => `\n <label>\n <input type=\"radio\" name=\"q${index}\" value=\"${optIndex}\" data-index=\"${index}\">\n ${opt}\n <\/label>\n `).join('');\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 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 \/\/ ---------- TABS ----------\n function initTabs() {\n const tabs = document.querySelectorAll('.tab-btn');\n const contents = {\n tabGrammar: document.getElementById('tabGrammar'),\n tabExercises: document.getElementById('tabExercises'),\n tabFeedback: document.getElementById('tabFeedback')\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]) contents[target].classList.add('active');\n });\n });\n }\n\n \/\/ ---------- FEEDBACK ----------\n function showFeedback() {\n document.querySelector('.tab-btn[data-tab=\"tabFeedback\"]')?.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, correctCount = 0;\n const detailItems = [];\n\n for (let i = 0; i < totalQuestions; i++) {\n const userAns = userAnswers[i];\n const question = allQuestionsData[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 (correcta: \"${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 = '', nivelAlcanzable = '', recomendaciones = [];\n\n if (percentage >= 90) {\n nivelActual = 'B1 (Intermedio bajo)';\n nivelAlcanzable = 'B1+ (Intermedio)';\n recomendaciones = [\n '\ud83c\udf1f \u00a1Excelente! Dominas los modales y las WH-words, incluyendo los nuevos.',\n '\ud83d\udcd8 Ahora trabaja con \"should have\", \"might have\" y condicionales.',\n '\ud83c\udfa7 Escucha entrevistas en ingl\u00e9s para identificar WH-words en contexto.'\n ];\n } else if (percentage >= 70) {\n nivelActual = 'A2 (Elemental alto)';\n nivelAlcanzable = 'B1 (Intermedio bajo)';\n recomendaciones = [\n '\ud83d\udcd6 Repasa la diferencia entre \"must\" y \"have to\", y \"may\" vs \"might\".',\n '\u270d\ufe0f Escribe 5 preguntas con WH-words cada d\u00eda.',\n '\ud83c\udfaf Practica con ejercicios de \"modal verbs\" en contexto.'\n ];\n } else if (percentage >= 50) {\n nivelActual = 'A1 (Elemental)';\n nivelAlcanzable = 'A2 (Elemental alto)';\n recomendaciones = [\n '\ud83d\udd24 Memoriza las WH-words: Who, What, Where, When, Why, How, y las nuevas.',\n '\ud83d\udcda Estudia los modales b\u00e1sicos: can, must, should, may, have to.',\n '\ud83d\udd04 Haz ejercicios de completar frases con modales.'\n ];\n } else {\n nivelActual = 'A0 (Principiante)';\n nivelAlcanzable = 'A1 (Elemental)';\n recomendaciones = [\n '\ud83d\udd04 Empieza con lo b\u00e1sico: aprende las WH-words con ejemplos.',\n '\ud83d\udcdd Practica \"can\", \"must\" y \"have to\" en frases simples.',\n '\ud83e\uddd8 No te preocupes, todos empezamos desde cero. Escucha canciones infantiles.'\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 renderAllQuestions();\n captureAnswers();\n initTabs();\n\n document.getElementById('submitBtn').addEventListener('click', function() {\n showFeedback();\n });\n\n })();\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Quiz \u00b7 Modales + WH \u00b7 Lectura \u26a1 Modal Verbs & WH-words 25 preguntas \u00b7 autoevaluaci\u00f3n \ud83d\udcd8 Gram\u00e1tica \ud83d\udcdd Ejercicios \ud83d\udcca Feedback \ud83d\udcd8 Modal Verbs & WH-words \u00b7 explicaci\u00f3n \ud83d\udd39 WH-words (Palabras interrogativas) Who \u2014 \u00bfqui\u00e9n? Ej: Who is your teacher? What \u2014 \u00bfqu\u00e9? \/ \u00bfcu\u00e1l? Ej: What is your name? Where \u2014 \u00bfd\u00f3nde? Ej: […]<\/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-738","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/teacherjm.com\/epja\/wp-json\/wp\/v2\/pages\/738","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=738"}],"version-history":[{"count":1,"href":"https:\/\/teacherjm.com\/epja\/wp-json\/wp\/v2\/pages\/738\/revisions"}],"predecessor-version":[{"id":739,"href":"https:\/\/teacherjm.com\/epja\/wp-json\/wp\/v2\/pages\/738\/revisions\/739"}],"wp:attachment":[{"href":"https:\/\/teacherjm.com\/epja\/wp-json\/wp\/v2\/media?parent=738"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}