{"id":910,"date":"2026-07-29T19:44:53","date_gmt":"2026-07-29T19:44:53","guid":{"rendered":"https:\/\/teacherjm.com\/epja\/?page_id=910"},"modified":"2026-07-29T20:20:27","modified_gmt":"2026-07-29T20:20:27","slug":"910-2","status":"publish","type":"page","link":"https:\/\/teacherjm.com\/epja\/910-2\/","title":{"rendered":""},"content":{"rendered":"\n<!DOCTYPE html>\n<html lang=\"es\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Reading Comprehension &#8211; Tom&#8217;s Routine<\/title>\n    <style>\n        \/* Reset y tipograf\u00eda firme para TeacherJM *\/\n        * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', Tahoma, Arial, sans-serif; }\n        body { background-color: #f1f5f9; padding: 20px; }\n\n        \/* Contenedor ampliado horizontalmente al 150% *\/\n        .app-container { \n            display: flex; \n            max-width: 1500px; \n            height: 90vh; \n            margin: 0 auto; \n            overflow: hidden; \n            background-color: #ffffff; \n            border-radius: 12px; \n            box-shadow: 0 4px 25px rgba(0,0,0,0.1); \n        }\n\n        \/* Columnas con scroll vertical independiente *\/\n        .column { height: 100%; overflow-y: auto; padding: 40px; }\n        .left-column { flex: 1.2; background-color: #ffffff; border-right: 2px solid #e2e8f0; }\n        .right-column { flex: 1; background-color: #f8fafc; }\n\n        \/* Componentes de la lectura (Izquierda) *\/\n        .header-area { margin-bottom: 25px; border-bottom: 3px solid #0284c7; padding-bottom: 15px; }\n        .main-title { font-size: 28px; color: #0f172a; margin-bottom: 5px; }\n        .subtitle { color: #64748b; font-size: 16px; }\n        \n        .header-image { \n            width: 100%; \n            max-height: 380px; \n            object-fit: cover; \n            border-radius: 8px; \n            margin-bottom: 20px; \n            box-shadow: 0 4px 10px rgba(0,0,0,0.05);\n        }\n        \n        .reading-text { font-size: 17px; line-height: 1.8; color: #334155; }\n        .reading-text p { margin-bottom: 18px; }\n\n        \/* Componentes de la actividad (Derecha) *\/\n        .instructions-box { background-color: #f0fdf4; border-left: 4px solid #22c55e; padding: 18px; border-radius: 4px; margin-bottom: 25px; font-size: 16px; color: #166534; }\n        .question-card { background-color: #ffffff; padding: 22px; border-radius: 8px; margin-bottom: 20px; border: 1px solid #e2e8f0; transition: all 0.3s; }\n        .question-title { font-size: 17px; font-weight: 600; color: #1e293b; margin-bottom: 15px; }\n        .options-list { display: flex; flex-direction: column; gap: 12px; }\n        \n        .option-item { \n            display: flex; \n            align-items: center; \n            padding: 14px; \n            background-color: #f8fafc; \n            border: 1px solid #cbd5e1; \n            border-radius: 6px; \n            cursor: pointer; \n            font-size: 16px; \n            color: #334155; \n        }\n        .option-item:hover { background-color: #f0f6ff; border-color: #3b82f6; }\n        .option-item input[type=\"radio\"] { margin-right: 14px; width: 18px; height: 18px; accent-color: #0284c7; }\n\n        \/* Clases de validaci\u00f3n de respuestas *\/\n        .correct-answer { background-color: #d1fae5 !important; border-color: #10b981 !important; color: #065f46; }\n        .wrong-answer { background-color: #fee2e2 !important; border-color: #ef4444 !important; color: #991b1b; }\n\n        \/* Cuadro de resultados finales *\/\n        .results-box { \n            display: none; \n            background-color: #eff6ff; \n            border: 2px solid #3b82f6; \n            border-radius: 8px; \n            padding: 25px; \n            margin-bottom: 25px; \n            text-align: center; \n        }\n        .score-grade { font-size: 32px; font-weight: bold; color: #1e40af; margin-bottom: 5px; }\n        .score-percent { font-size: 20px; color: #1e3a8a; }\n\n        .btn-submit { background-color: #22c55e; color: white; border: none; padding: 18px; font-size: 18px; font-weight: bold; border-radius: 6px; cursor: pointer; width: 100%; margin-bottom: 30px; transition: background 0.2s; }\n        .btn-submit:hover { background-color: #16a34a; }\n    <\/style>\n<\/head>\n<body>\n\n    <div class=\"app-container\">\n        \n        <!-- COLUMNA IZQUIERDA: MATERIAL DE LECTURA E ENCABEZADO -->\n        <div class=\"column left-column\">\n            <div class=\"header-area\">\n                <h1 class=\"main-title\">Reading Material<\/h1>\n                <p class=\"subtitle\">Read the text carefully before answering the quiz.<\/p>\n            <\/div>\n\n            <!-- Imagen fija insertada como encabezado -->\n            <img decoding=\"async\" class=\"header-image\" src=\"https:\/\/teacherjm.com\/epja\/wp-content\/uploads\/2026\/07\/descarga-1.jpg\" alt=\"Tom waking up\">\n\n            <div class=\"reading-text\">\n                <h2 style=\"margin-bottom: 15px; color: #0f172a;\">A day in the life of Tom<\/h2>\n                <p>Tom is a student. He has to wake up early every day because his school starts at 8 a.m. He can speak two languages: English and French. He usually has breakfast with his family. Tom\u2019s mother always says: \u201cYou ought to eat healthy food\u201c.<\/p>\n                <p>After school, Tom can play video games, but he must do his homework first. His father often asks: \u201cWhere are your books?\u201d or \u201cWhy are you so late?\u201c. Tom loves sports, and he can play football very well. On weekends, he may go to the park with his friends.<\/p>\n                <p>At night, Tom usually reads a book. His mother always tells him: \u201cYou should sleep early\u201c. Tom goes to bed at 10 p.m. He thinks: \u201cWhat will I do tomorrow?\u201c<\/p>\n                <p>Tom\u2019s school is 2 kilometers from his house, and he has to walk there every day. He might get a bike for his birthday. His sister often asks: \u201cHow old is your teacher?\u201d and \u201cHow long is the school day?\u201c<\/p>\n            <\/div>\n        <\/div>\n        <!-- COLUMNA DERECHA: ACTIVIDAD DE EVALUACI\u00d3N AUTOM\u00c1TICA -->\n        <div class=\"column right-column\">\n            <div class=\"header-area\">\n                <h1 class=\"main-title\">Activity 1<\/h1>\n                <div class=\"instructions-box\">\n                    <strong>Instructions:<\/strong> Read the statements and select the correct option. Once you finish, click &#8220;Submit Activity&#8221; to see your score, grade, and percentage.\n                <\/div>\n            <\/div>\n\n            <!-- Zona de despliegue del resultado final -->\n            <div id=\"resultsBlock\" class=\"results-box\">\n                <p class=\"score-grade\" id=\"gradeLabel\">Grade: 1.0<\/p>\n                <p class=\"score-percent\" id=\"percentLabel\">Percentage of Achievement: 0%<\/p>\n                <p style=\"margin-top: 10px; color: #475569;\" id=\"correctCountLabel\">0 out of 10 correct answers.<\/p>\n            <\/div>\n\n            <form id=\"quizForm\">\n                \n                <!-- P1 -->\n                <div class=\"question-card\" id=\"card_q1\">\n                    <p class=\"question-title\">1. What is Tom&#8217;s occupation?<\/p>\n                    <div class=\"options-list\">\n                        <label class=\"option-item\"><input type=\"radio\" name=\"q1\" value=\"wrong\"> He is a teacher.<\/label>\n                        <label class=\"option-item\"><input type=\"radio\" name=\"q1\" value=\"correct\"> He is a student.<\/label>\n                        <label class=\"option-item\"><input type=\"radio\" name=\"q1\" value=\"wrong\"> He is a carpenter.<\/label>\n                    <\/div>\n                <\/div>\n\n                <!-- P2 -->\n                <div class=\"question-card\" id=\"card_q2\">\n                    <p class=\"question-title\">2. Why does Tom have to wake up early?<\/p>\n                    <div class=\"options-list\">\n                        <label class=\"option-item\"><input type=\"radio\" name=\"q2\" value=\"wrong\"> To play video games.<\/label>\n                        <label class=\"option-item\"><input type=\"radio\" name=\"q2\" value=\"wrong\"> To walk in the park.<\/label>\n                        <label class=\"option-item\"><input type=\"radio\" name=\"q2\" value=\"correct\"> Because school starts at 8 a.m.<\/label>\n                    <\/div>\n                <\/div>\n\n                <!-- P3 -->\n                <div class=\"question-card\" id=\"card_q3\">\n                    <p class=\"question-title\">3. Which languages can Tom speak?<\/p>\n                    <div class=\"options-list\">\n                        <label class=\"option-item\"><input type=\"radio\" name=\"q3\" value=\"correct\"> English and French.<\/label>\n                        <label class=\"option-item\"><input type=\"radio\" name=\"q3\" value=\"wrong\"> English and Spanish.<\/label>\n                        <label class=\"option-item\"><input type=\"radio\" name=\"q3\" value=\"wrong\"> French and German.<\/label>\n                    <\/div>\n                <\/div>\n\n                <!-- P4 -->\n                <div class=\"question-card\" id=\"card_q4\">\n                    <p class=\"question-title\">4. Who does Tom usually have breakfast with?<\/p>\n                    <div class=\"options-list\">\n                        <label class=\"option-item\"><input type=\"radio\" name=\"q4\" value=\"wrong\"> His friends from the park.<\/label>\n                        <label class=\"option-item\"><input type=\"radio\" name=\"q4\" value=\"correct\"> His family.<\/label>\n                        <label class=\"option-item\"><input type=\"radio\" name=\"q4\" value=\"wrong\"> His teacher.<\/label>\n                    <\/div>\n                <\/div>\n\n                <!-- P5 -->\n                <div class=\"question-card\" id=\"card_q5\">\n                    <p class=\"question-title\">5. What advice does Tom&#8217;s mother give about breakfast?<\/p>\n                    <div class=\"options-list\">\n                        <label class=\"option-item\"><input type=\"radio\" name=\"q5\" value=\"correct\"> &#8220;You ought to eat healthy food.&#8221;<\/label>\n                        <label class=\"option-item\"><input type=\"radio\" name=\"q5\" value=\"wrong\"> &#8220;You should sleep early.&#8221;<\/label>\n                        <label class=\"option-item\"><input type=\"radio\" name=\"q5\" value=\"wrong\"> &#8220;Where are your books?&#8221;<\/label>\n                    <\/div>\n                <\/div>\n\n                <!-- P6 -->\n                <div class=\"question-card\" id=\"card_q6\">\n                    <p class=\"question-title\">6. What must Tom do before playing video games?<\/p>\n                    <div class=\"options-list\">\n                        <label class=\"option-item\"><input type=\"radio\" name=\"q6\" value=\"wrong\"> Read a book.<\/label>\n                        <label class=\"option-item\"><input type=\"radio\" name=\"q6\" value=\"wrong\"> Clean his bedroom.<\/label>\n                        <label class=\"option-item\"><input type=\"radio\" name=\"q6\" value=\"correct\"> He must do his homework first.<\/label>\n                    <\/div>\n                <\/div>\n\n                <!-- P7 -->\n                <div class=\"question-card\" id=\"card_q7\">\n                    <p class=\"question-title\">7. Which sport can Tom play very well?<\/p>\n                    <div class=\"options-list\">\n                        <label class=\"option-item\"><input type=\"radio\" name=\"q7\" value=\"correct\"> Football.<\/label>\n                        <label class=\"option-item\"><input type=\"radio\" name=\"q7\" value=\"wrong\"> Basketball.<\/label>\n                        <label class=\"option-item\"><input type=\"radio\" name=\"q7\" value=\"wrong\"> Tennis.<\/label>\n                    <\/div>\n                <\/div>\n\n                <!-- P8 -->\n                <div class=\"question-card\" id=\"card_q8\">\n                    <p class=\"question-title\">8. Where does Tom go on weekends with his friends?<\/p>\n                    <div class=\"options-list\">\n                        <label class=\"option-item\"><input type=\"radio\" name=\"q8\" value=\"wrong\"> To the school workshop.<\/label>\n                        <label class=\"option-item\"><input type=\"radio\" name=\"q8\" value=\"correct\"> To the park.<\/label>\n                        <label class=\"option-item\"><input type=\"radio\" name=\"q8\" value=\"wrong\"> To the library.<\/label>\n                    <\/div>\n                <\/div>\n\n                <!-- P9 -->\n                <div class=\"question-card\" id=\"card_q9\">\n                    <p class=\"question-title\">9. What time does Tom go to bed?<\/p>\n                    <div class=\"options-list\">\n                        <label class=\"option-item\"><input type=\"radio\" name=\"q9\" value=\"wrong\"> At 8 p.m.<\/label>\n                        <label class=\"option-item\"><input type=\"radio\" name=\"q9\" value=\"correct\"> At 10 p.m.<\/label>\n                        <label class=\"option-item\"><input type=\"radio\" name=\"q9\" value=\"wrong\"> At 11 p.m.<\/label>\n                    <\/div>\n                <\/div>\n\n                <!-- P10 -->\n                <div class=\"question-card\" id=\"card_q10\">\n                    <p class=\"question-title\">10. How far is Tom&#8217;s school from his house?<\/p>\n                    <div class=\"options-list\">\n                        <label class=\"option-item\"><input type=\"radio\" name=\"q10\" value=\"wrong\"> 1 kilometer.<\/label>\n                        <label class=\"option-item\"><input type=\"radio\" name=\"q10\" value=\"correct\"> 2 kilometers.<\/label>\n                        <label class=\"option-item\"><input type=\"radio\" name=\"q10\" value=\"wrong\"> 5 kilometers.<\/label>\n                    <\/div>\n                <\/div>\n\n                <button type=\"submit\" class=\"btn-submit\">Submit Activity<\/button>\n            <\/form>\n        <\/div>\n    <\/div>\n\n    <script>\n        document.getElementById('quizForm').addEventListener('submit', function(e) {\n            e.preventDefault();\n\n            const totalQuestions = 10;\n            let correctCount = 0;\n\n            \/\/ Validaci\u00f3n din\u00e1mica de cada pregunta\n            for (let i = 1; i <= totalQuestions; i++) {\n                const selectedOption = document.querySelector(`input[name=\"q${i}\"]:checked`);\n                const card = document.getElementById(`card_q${i}`);\n                \n                \/\/ Limpiar estilos previos en caso de re-env\u00edo\n                card.classList.remove('correct-answer', 'wrong-answer');\n\n                if (selectedOption) {\n                    if (selectedOption.value === \"correct\") {\n                        correctCount++;\n                        card.classList.add('correct-answer');\n                    } else {\n                        card.classList.add('wrong-answer');\n                    }\n                } else {\n                    card.classList.add('wrong-answer');\n                }\n            }\n\n            \/\/ C\u00e1lculo del porcentaje de logro\n            const scorePercentage = (correctCount \/ totalQuestions) * 100;\n\n            \/\/ C\u00e1lculo de nota usando la Escala de Exigencia Chilena del 60%\n            let finalGrade = 1.0;\n            if (scorePercentage < 60) {\n                \/\/ F\u00f3rmulas para rendimiento inferior al 60%\n                finalGrade = 1.0 + (scorePercentage \/ 60) * 3.0;\n            } else {\n                \/\/ F\u00f3rmulas para rendimiento igual o superior al 60%\n                finalGrade = 4.0 + ((scorePercentage - 60) \/ 40) * 3.0;\n            }\n            \n            \/\/ Redondear a un decimal\n            finalGrade = finalGrade.toFixed(1);\n\n            \/\/ Desplegar resultados de forma visual en la zona superior de la columna derecha\n            document.getElementById('gradeLabel').innerText = `Grade: ${finalGrade}`;\n            document.getElementById('percentLabel').innerText = `Percentage of Achievement: ${Math.round(scorePercentage)}%`;\n            document.getElementById('correctCountLabel').innerText = `${correctCount} out of 10 correct answers.`;\n            \n            const resultsBlock = document.getElementById('resultsBlock');\n            resultsBlock.style.display = 'block';\n            \n            \/\/ Scroll autom\u00e1tico suave hacia la zona de resultados para que el alumno lo vea de inmediato\n            document.querySelector('.right-column').scrollTo({ top: 0, behavior: 'smooth' });\n        });\n    <\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>Reading Comprehension &#8211; Tom&#8217;s Routine Reading Material Read the text carefully before answering the quiz. A day in the life of Tom Tom is a student. He has to wake up early every day because his school starts at 8 a.m. He can speak two languages: English and French. He usually has breakfast with his [&hellip;]<\/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-910","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/teacherjm.com\/epja\/wp-json\/wp\/v2\/pages\/910","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=910"}],"version-history":[{"count":7,"href":"https:\/\/teacherjm.com\/epja\/wp-json\/wp\/v2\/pages\/910\/revisions"}],"predecessor-version":[{"id":918,"href":"https:\/\/teacherjm.com\/epja\/wp-json\/wp\/v2\/pages\/910\/revisions\/918"}],"wp:attachment":[{"href":"https:\/\/teacherjm.com\/epja\/wp-json\/wp\/v2\/media?parent=910"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}