Having fun – Reading Comprehension (E-mails A\u2013D)<\/title>\n <style>\n \/* Reset and Base Styles *\/\n * {\n box-sizing: border-box;\n }\n\n body {\n font-family: Arial, sans-serif;\n background-color: #f4f6f8;\n margin: 0;\n padding: 0;\n display: flex;\n flex-direction: column;\n min-height: 100vh;\n }\n\n \/* Menu Styles *\/\n .menu {\n width: 100%;\n background-color: #28a745;\n padding: 10px;\n text-align: center;\n box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);\n margin-bottom: 10px;\n overflow-x: auto;\n white-space: nowrap;\n }\n .menu a {\n color: #fff;\n text-decoration: none;\n margin: 0 10px;\n font-weight: bold;\n font-size: 14px;\n display: inline-block;\n }\n .menu a:hover,\n .menu a:focus {\n text-decoration: underline;\n outline: 2px dashed #fff;\n outline-offset: 4px;\n }\n\n \/* Container Styles *\/\n .container {\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 10px;\n box-sizing: border-box;\n flex: 1 0 auto;\n width: 100%;\n }\n\n \/* Image and Chat Containers *\/\n .image-chat-wrapper {\n display: flex;\n flex-direction: column;\n width: 100%;\n max-width: 800px;\n flex: 1;\n }\n\n \/* Image Container Styles *\/\n .image-container {\n flex: 1;\n text-align: center;\n margin-bottom: 15px;\n }\n .image-container img {\n width: 100%;\n height: auto;\n max-height: 300px;\n object-fit: cover;\n border-radius: 15px;\n box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);\n }\n .sentence-text {\n margin: 10px 0;\n font-weight: bold;\n color: #333;\n font-size: 16px;\n }\n .word-box {\n margin-top: 10px;\n padding: 10px;\n background-color: #fff;\n border: 2px solid #28a745;\n border-radius: 8px;\n box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);\n font-size: 16px;\n font-weight: bold;\n color: #28a745;\n text-align: left;\n max-height: 250px;\n overflow-y: auto;\n }\n\n \/* Chat Container Styles *\/\n .chat-container {\n background-color: #28a745;\n border-radius: 15px;\n box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);\n border: 3px solid #007bff;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n height: auto;\n max-height: 500px;\n flex: 1;\n }\n .chat-header {\n background-color: #1e7e34;\n color: #fff;\n padding: 12px;\n text-align: center;\n border-bottom: 1px solid #155724;\n position: relative;\n }\n .chat-header h2 {\n margin: 0;\n font-size: 18px;\n }\n .chat-header .loader {\n position: absolute;\n right: 20px;\n top: 50%;\n transform: translateY(-50%);\n display: none;\n }\n .chat-messages {\n padding: 12px;\n overflow-y: auto;\n flex: 1;\n background-color: #fff;\n max-height: 300px;\n }\n .message {\n margin-bottom: 10px;\n padding: 10px;\n border-radius: 6px;\n font-size: 14px;\n line-height: 1.5;\n }\n .user-message {\n background-color: #ffc107;\n color: #fff;\n text-align: right;\n }\n .bot-message {\n background-color: #17a2b8;\n color: #fff;\n text-align: left;\n }\n\n \/* Chat Input Styles *\/\n .chat-input {\n display: flex;\n align-items: center;\n background-color: #c3e6cb;\n padding: 10px;\n justify-content: space-between;\n flex-wrap: wrap;\n }\n .send-button, .stop-button {\n background-color: #17a2b8;\n color: #fff;\n font-weight: bold;\n border: none;\n border-radius: 5px;\n padding: 12px 16px;\n cursor: pointer;\n transition: background-color 0.3s;\n flex: 1;\n margin: 6px;\n max-width: 150px;\n font-size: 16px;\n }\n .stop-button {\n background-color: #dc3545;\n }\n .send-button:hover,\n .stop-button:hover,\n .send-button:focus,\n .stop-button:focus {\n background-color: #218838;\n outline: none;\n }\n\n \/* Voice Selection Styles *\/\n .voice-selection {\n margin: 10px 0;\n width: 100%;\n max-width: 300px;\n }\n .voice-selection label {\n display: block;\n margin-bottom: 5px;\n font-weight: bold;\n color: #333;\n }\n .voice-selection select {\n width: 100%;\n padding: 8px;\n border-radius: 5px;\n border: 1px solid #ccc;\n font-size: 14px;\n }\n\n \/* Loader Styles *\/\n .loader {\n border: 4px solid #f3f3f3;\n border-top: 4px solid #17a2b8;\n border-radius: 50%;\n width: 20px;\n height: 20px;\n animation: spin 2s linear infinite;\n display: inline-block;\n margin-left: 10px;\n }\n\n @keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n }\n\n \/* Responsive *\/\n\n @media (orientation: portrait) {\n .image-chat-wrapper {\n flex-direction: column;\n }\n .image-container, .chat-container {\n width: 100%;\n max-width: 100%;\n }\n }\n\n @media (orientation: landscape) and (min-width: 600px) {\n .image-chat-wrapper {\n flex-direction: row;\n justify-content: space-between;\n }\n .image-container, .chat-container {\n width: 48%;\n max-width: 48%;\n }\n .word-box {\n max-height: 200px;\n }\n .chat-header h2 {\n font-size: 20px;\n }\n .message {\n font-size: 15px;\n }\n .send-button, .stop-button {\n font-size: 18px;\n padding: 14px 20px;\n max-width: 200px;\n }\n }\n\n @media (max-width: 768px) {\n .chat-header h2 {\n font-size: 16px;\n }\n .message {\n font-size: 14px;\n }\n .send-button, .stop-button {\n font-size: 16px;\n padding: 12px 16px;\n max-width: 150px;\n }\n .word-box {\n font-size: 15px;\n }\n .voice-selection select {\n font-size: 14px;\n }\n }\n\n @media only screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {\n .chat-header h2 {\n font-size: 18px;\n }\n .send-button, .stop-button {\n padding: 14px 18px;\n font-size: 16px;\n }\n .message {\n font-size: 14px;\n }\n .word-box {\n font-size: 16px;\n }\n .chat-input input {\n font-size: 16px;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"menu\">\n <a href=\"https:\/\/i-cte.org\/robot\/having-fun-conversation\/\">Conversation<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/having-fun-vocabulary\/\">Vocabulary<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/having-fun-real-life\/\">Real Life<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/having-fun-describing-pictures\/\">Describing Pictures<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/having-fun-reading-comprehension\/\">Reading<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/having-fun-listening\/\">Listening<\/a>\n <\/div>\n\n <div class=\"container\">\n <div class=\"image-chat-wrapper\">\n <div class=\"image-container\">\n <img decoding=\"async\" src=\"https:\/\/i-cte.org\/robot\/wp-content\/uploads\/2025\/05\/DALL\u00b7E-2025-05-25-11.26.38-A-futuristic-classroom-with-a-humanoid-robot-teaching-languages-to-a-group-of-diverse-students.-The-robot-has-a-sleek-white-and-silver-metallic-body-1-1.webp\" alt=\"Four e-mails A to D about invitations to different events\">\n <div class=\"sentence-text\">\n Read the e-mails (A\u2013D). Match each one with a subject and then write T, F, or N.\n <\/div>\n <div id=\"word-box\" class=\"word-box\">\n \n <\/div>\n <\/div>\n <div class=\"chat-container\">\n <div class=\"chat-header\">\n <h2>Having fun – Reading \u2013 E-mails A\u2013D<\/h2>\n <div class=\"loader\" id=\"synthesis-loader\"><\/div>\n <\/div>\n <div class=\"chat-messages\" id=\"chat-messages\">\n \n <\/div>\n <div class=\"chat-input\">\n <div class=\"voice-selection\">\n <label for=\"voice-select\">Choose Voice:<\/label>\n <select id=\"voice-select\" aria-label=\"Select Voice\">\n <option value=\"\">Loading voices…<\/option>\n <\/select>\n <\/div>\n <button id=\"start-btn\" class=\"send-button\" aria-label=\"Check Answers\">Check Answers<\/button>\n <button id=\"stop-btn\" class=\"stop-button\" aria-label=\"Stop Voice\">Stop Voice<\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"menu\">\n <a href=\"https:\/\/i-cte.org\/robot\/having-fun-conversation\/\">Conversation<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/having-fun-vocabulary\/\">Vocabulary<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/having-fun-real-life\/\">Real Life<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/having-fun-describing-pictures\/\">Describing Pictures<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/having-fun-reading-comprehension\/\">Reading<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/having-fun-listening\/\">Listening<\/a>\n <\/div>\n\n<script>\n\/* ============================\n Reading: E-mails A\u2013D\n ============================ *\/\n\nconst emails = [\n {\n id: \"A\",\n to: \"Helen\",\n from: \"Simon\",\n text: `Dear Helen,\nWould you like to go to a concert on Saturday?\nI have two tickets for Las Ramblas \u2013 they\u2019re a great Spanish rock group. They\u2019re playing at the Union Hall downtown. Please reply a.s.a.p.\nSimon`\n },\n {\n id: \"B\",\n to: \"Pat\",\n from: \"Lenny\",\n text: `Hello Pat,\nHow are you? Are you studying hard? I\u2019m having a party on Sunday night. It\u2019s my birthday! Would you like to come? Please say yes! See you then!\nLenny`\n },\n {\n id: \"C\",\n to: \"Martin\",\n from: \"Nobu\",\n text: `Hi Martin,\nThe new James Bond movie is showing next week. Do you want to go? I think I can get free tickets because my friend works at the movie theater. How about next weekend?\nNobu`\n },\n {\n id: \"D\",\n to: \"Lisa\",\n from: \"Mandy\",\n text: `Hi Lisa,\nJames wants to go to a ball game on Friday night, but I hate baseball so I\u2019m not going! Do you want to go out for dinner? Maybe we can go to the new Italian restaurant on Park Avenue?\nMandy`\n }\n];\n\nconst subjects = [\n { id: 1, text: \"Sunday at 8:00 p.m.\" },\n { id: 2, text: \"Do you like rock?\" },\n { id: 3, text: \"How about pizza?\" },\n { id: 4, text: \"Free movie tickets!\" }\n];\n\n\/\/ Correct subject for each email (using the numbers above)\nconst subjectAnswers = {\n \"A\": 2, \/\/ rock concert\n \"B\": 1, \/\/ Sunday party\n \"C\": 4, \/\/ free movie tickets\n \"D\": 3 \/\/ pizza \/ Italian restaurant\n};\n\n\/* Part 2 \u2013 T\/F\/N statements *\/\nconst statementsTFN = [\n {\n id: 1,\n text: \"The tickets for Las Ramblas are expensive.\",\n correct: \"n\"\n },\n {\n id: 2,\n text: \"It\u2019s Lenny\u2019s birthday on Sunday.\",\n correct: \"t\"\n },\n {\n id: 3,\n text: \"Helen is working on Saturday.\",\n correct: \"n\"\n },\n {\n id: 4,\n text: \"Pat is studying hard these days.\",\n correct: \"n\"\n },\n {\n id: 5,\n text: \"Nobu\u2019s friend is an actor.\",\n correct: \"n\"\n },\n {\n id: 6,\n text: \"Mandy is watching baseball on Friday.\",\n correct: \"f\"\n }\n];\n\nconst summaryMessages = [\n \"Nice reading! Keep going.\",\n \"Good job. Read the e-mails again and try to improve your score.\",\n \"You\u2019re doing well. Practice this activity again later.\"\n];\n\nconst positiveMessages = [\n \"Excellent comprehension!\",\n \"Great work! You understood the main ideas.\",\n \"Very good! Your answers match the e-mails.\"\n];\n\n\/\/ Speech synthesis\nconst speechSynthesisSupported = \"speechSynthesis\" in window;\nlet voices = [];\nlet selectedVoice = null;\n\nconst desiredVoiceNames = [\n \"Google US English\",\n \"Google US English Female\",\n \"Google UK English Male\",\n \"Google UK English Female\"\n];\n\n\/* ========== INITIALIZE ========== *\/\n\nfunction initialize() {\n loadVoices();\n\n if (!speechSynthesisSupported) {\n appendMessage(\"Sorry, your browser does not support speech synthesis.\", \"bot\");\n }\n\n const startBtn = document.getElementById(\"start-btn\");\n startBtn.textContent = \"Check Answers\";\n startBtn.onclick = checkAnswers;\n\n const stopBtn = document.getElementById(\"stop-btn\");\n stopBtn.textContent = \"Stop Voice\";\n stopBtn.onclick = stopSpeaking;\n\n showEmailsOnLeft();\n renderTasks();\n}\n\n\/* ========== VOICE LOADING ========== *\/\n\nfunction loadVoices() {\n if (!speechSynthesisSupported) return;\n voices = window.speechSynthesis.getVoices();\n if (voices.length === 0) {\n window.speechSynthesis.onvoiceschanged = () => {\n voices = window.speechSynthesis.getVoices();\n populateVoiceList();\n };\n } else {\n populateVoiceList();\n }\n}\n\nfunction populateVoiceList() {\n const voiceSelect = document.getElementById(\"voice-select\");\n voiceSelect.innerHTML = \"\";\n\n if (!speechSynthesisSupported) {\n const option = document.createElement(\"option\");\n option.value = \"\";\n option.textContent = \"No voices available\";\n voiceSelect.appendChild(option);\n voiceSelect.disabled = true;\n return;\n }\n\n const filteredVoices = voices.filter((voice) =>\n desiredVoiceNames.includes(voice.name)\n );\n\n if (filteredVoices.length === 0) {\n const option = document.createElement(\"option\");\n option.value = \"\";\n option.textContent = \"Default voice\";\n voiceSelect.appendChild(option);\n voiceSelect.disabled = true;\n return;\n }\n\n filteredVoices.forEach((voice, index) => {\n const option = document.createElement(\"option\");\n option.value = index;\n option.textContent = `${voice.name} (${voice.lang})`;\n voiceSelect.appendChild(option);\n });\n\n if (filteredVoices.length > 0) {\n voiceSelect.selectedIndex = 0;\n selectedVoice = filteredVoices[0];\n }\n\n voiceSelect.onchange = () => {\n const selectedIndex = voiceSelect.value;\n selectedVoice = filteredVoices[selectedIndex];\n };\n}\n\n\/* ========== EMAIL + TASKS UI ========== *\/\n\nfunction showEmailsOnLeft() {\n clearWordBox();\n addSentenceToBox(\"E-mails A\u2013D:\");\n addSentenceToBox(\"\");\n\n emails.forEach((mail) => {\n addSentenceToBox(\"E-mail \" + mail.id + \" (To: \" + mail.to + \", From: \" + mail.from + \"):\");\n mail.text.split(\"\\n\").forEach((line) => addSentenceToBox(line));\n addSentenceToBox(\"\"); \/\/ blank line between e-mails\n });\n\n const greeting =\n \"Read the e-mails in the box. Then match each e-mail with the correct subject and write T, F, or N for the sentences.\";\n\n appendMessage(greeting, \"bot\");\n if (speechSynthesisSupported) {\n const combinedText = emails\n .map((m) => \"E-mail \" + m.id + \". \" + m.text)\n .join(\" \");\n showSynthesisLoader(true);\n sayText(greeting, \"en-US\")\n .then(() => sayText(combinedText, \"en-US\"))\n .then(() => {\n showSynthesisLoader(false);\n });\n }\n}\n\nfunction renderTasks() {\n const chatContainer = document.getElementById(\"chat-messages\");\n chatContainer.innerHTML = \"\";\n\n \/* Part 1 \u2013 Match subjects *\/\n const part1Title = document.createElement(\"h3\");\n part1Title.textContent = \"Part 1 \u2013 Match each e-mail (A\u2013D) with a subject.\";\n part1Title.style.margin = \"4px 0\";\n part1Title.style.fontSize = \"16px\";\n chatContainer.appendChild(part1Title);\n\n const part1Instr = document.createElement(\"p\");\n part1Instr.textContent = \"Choose 1\u20134 from the list.\";\n chatContainer.appendChild(part1Instr);\n\n const subjectList = document.createElement(\"ol\");\n subjects.forEach((subj) => {\n const li = document.createElement(\"li\");\n li.textContent = subj.text;\n subjectList.appendChild(li);\n });\n chatContainer.appendChild(subjectList);\n\n [\"A\", \"B\", \"C\", \"D\"].forEach((letter) => {\n const block = document.createElement(\"div\");\n block.style.marginBottom = \"8px\";\n\n const label = document.createElement(\"label\");\n label.htmlFor = `subject-${letter}`;\n label.textContent = `E-mail ${letter}:`;\n block.appendChild(label);\n\n const select = document.createElement(\"select\");\n select.id = `subject-${letter}`;\n select.style.marginLeft = \"8px\";\n select.style.padding = \"4px\";\n\n const emptyOpt = document.createElement(\"option\");\n emptyOpt.value = \"\";\n emptyOpt.textContent = \"--\";\n select.appendChild(emptyOpt);\n\n subjects.forEach((subj) => {\n const opt = document.createElement(\"option\");\n opt.value = subj.id;\n opt.textContent = `${subj.id} \u2013 ${subj.text}`;\n select.appendChild(opt);\n });\n\n block.appendChild(select);\n\n const feedback = document.createElement(\"div\");\n feedback.id = `subject-feedback-${letter}`;\n feedback.style.fontSize = \"13px\";\n feedback.style.marginTop = \"2px\";\n block.appendChild(feedback);\n\n chatContainer.appendChild(block);\n });\n\n \/* Part 2 \u2013 T \/ F \/ N *\/\n const part2Title = document.createElement(\"h3\");\n part2Title.textContent = \"Part 2 \u2013 Write T (true), F (false), or N (not in text).\";\n part2Title.style.marginTop = \"12px\";\n part2Title.style.fontSize = \"16px\";\n chatContainer.appendChild(part2Title);\n\n const table = document.createElement(\"table\");\n table.style.width = \"100%\";\n table.style.borderCollapse = \"collapse\";\n table.style.marginTop = \"10px\";\n table.style.fontSize = \"14px\";\n\n const headerRow = document.createElement(\"tr\");\n [\"Sentence\", \"T\", \"F\", \"N\"].forEach((head) => {\n const th = document.createElement(\"th\");\n th.textContent = head;\n th.style.borderBottom = \"1px solid #ccc\";\n th.style.padding = \"4px\";\n th.style.textAlign = head === \"Sentence\" ? \"left\" : \"center\";\n headerRow.appendChild(th);\n });\n table.appendChild(headerRow);\n\n statementsTFN.forEach((stmt) => {\n const row = document.createElement(\"tr\");\n row.id = `row-${stmt.id}`;\n\n const textCell = document.createElement(\"td\");\n textCell.textContent = stmt.text;\n textCell.style.padding = \"4px\";\n textCell.style.verticalAlign = \"top\";\n row.appendChild(textCell);\n\n [\"t\", \"f\", \"n\"].forEach((value) => {\n const cell = document.createElement(\"td\");\n cell.style.textAlign = \"center\";\n cell.style.padding = \"4px\";\n\n const label = document.createElement(\"label\");\n label.style.cursor = \"pointer\";\n\n const input = document.createElement(\"input\");\n input.type = \"radio\";\n input.name = `q${stmt.id}`;\n input.value = value;\n input.style.marginRight = \"4px\";\n\n label.appendChild(input);\n label.appendChild(document.createTextNode(\"\"));\n cell.appendChild(label);\n row.appendChild(cell);\n });\n\n table.appendChild(row);\n });\n\n chatContainer.appendChild(table);\n}\n\n\/* ========== CHECK ANSWERS ========== *\/\n\nfunction checkAnswers() {\n \/\/ Part 1 \u2013 subjects\n let subScore = 0;\n let subTotal = 4;\n let subUnanswered = 0;\n\n [\"A\", \"B\", \"C\", \"D\"].forEach((letter) => {\n const select = document.getElementById(`subject-${letter}`);\n const feedback = document.getElementById(`subject-feedback-${letter}`);\n if (!select || !feedback) return;\n\n const val = select.value;\n if (!val) {\n subUnanswered++;\n feedback.textContent = \"Please choose a subject.\";\n feedback.style.color = \"#856404\"; \/\/ yellow\/brown\n select.style.borderColor = \"#ffeeba\";\n return;\n }\n\n if (parseInt(val, 10) === subjectAnswers[letter]) {\n subScore++;\n const correctText = subjects.find((s) => s.id === subjectAnswers[letter]).text;\n feedback.textContent = \"Correct: \" + correctText;\n feedback.style.color = \"#155724\";\n select.style.borderColor = \"#28a745\";\n } else {\n const correctText = subjects.find((s) => s.id === subjectAnswers[letter]).text;\n feedback.textContent = \"Not quite. The best subject is: \" + correctText;\n feedback.style.color = \"#721c24\";\n select.style.borderColor = \"#dc3545\";\n }\n });\n\n \/\/ Part 2 \u2013 T\/F\/N\n let tfScore = 0;\n let tfTotal = statementsTFN.length;\n let tfUnanswered = 0;\n\n statementsTFN.forEach((stmt) => {\n const row = document.getElementById(`row-${stmt.id}`);\n if (row) row.style.backgroundColor = \"\";\n\n const selected = document.querySelector(`input[name=\"q${stmt.id}\"]:checked`);\n\n if (!selected) {\n tfUnanswered++;\n if (row) row.style.backgroundColor = \"#fff3cd\"; \/\/ light yellow\n return;\n }\n\n if (selected.value === stmt.correct) {\n tfScore++;\n if (row) row.style.backgroundColor = \"#d4edda\"; \/\/ light green\n } else {\n if (row) row.style.backgroundColor = \"#f8d7da\"; \/\/ light red\n }\n });\n\n const resultMessage =\n `Part 1: You got ${subScore} out of ${subTotal} correct.` +\n (subUnanswered > 0 ? ` (${subUnanswered} e-mail(s) not answered.) ` : \" \") +\n `Part 2: You got ${tfScore} out of ${tfTotal} correct.` +\n (tfUnanswered > 0 ? ` (${tfUnanswered} sentence(s) not answered.)` : \"\");\n\n appendMessage(resultMessage, \"bot\");\n\n const totalScore = subScore + tfScore;\n const totalQuestions = subTotal + tfTotal;\n let extra;\n\n if (totalScore === totalQuestions && subUnanswered === 0 && tfUnanswered === 0) {\n extra = \"Perfect score! \" + positiveMessages[Math.floor(Math.random() * positiveMessages.length)];\n } else if (totalScore >= Math.round(totalQuestions * 0.7)) {\n extra = positiveMessages[Math.floor(Math.random() * positiveMessages.length)];\n } else {\n extra = summaryMessages[Math.floor(Math.random() * summaryMessages.length)];\n }\n\n appendMessage(extra, \"bot\");\n\n if (speechSynthesisSupported) {\n showSynthesisLoader(true);\n sayText(resultMessage + \" \" + extra, \"en-US\").then(() => {\n showSynthesisLoader(false);\n });\n }\n}\n\n\/* ========== SPEECH HELPERS ========== *\/\n\nfunction stopSpeaking() {\n if (speechSynthesisSupported) {\n window.speechSynthesis.cancel();\n showSynthesisLoader(false);\n }\n}\n\nfunction sayText(text, lang) {\n return new Promise((resolve) => {\n if (!speechSynthesisSupported) {\n resolve();\n return;\n }\n const utterance = new SpeechSynthesisUtterance(text);\n utterance.lang = lang;\n utterance.rate = 1.0;\n utterance.pitch = 1.0;\n\n if (selectedVoice) {\n utterance.voice = selectedVoice;\n }\n\n utterance.onend = function () {\n resolve();\n };\n utterance.onerror = function () {\n resolve();\n };\n\n window.speechSynthesis.speak(utterance);\n });\n}\n\n\/* ========== GENERIC UI HELPERS ========== *\/\n\nfunction appendMessage(text, sender) {\n const messageContainer = document.getElementById(\"chat-messages\");\n const messageElement = document.createElement(\"div\");\n messageElement.classList.add(\"message\");\n messageElement.classList.add(sender === \"bot\" ? \"bot-message\" : \"user-message\");\n messageElement.innerText = text;\n messageContainer.appendChild(messageElement);\n messageContainer.scrollTop = messageContainer.scrollHeight;\n}\n\nfunction addSentenceToBox(sentence) {\n const wordBox = document.getElementById(\"word-box\");\n const sentenceElement = document.createElement(\"div\");\n sentenceElement.innerText = sentence;\n wordBox.appendChild(sentenceElement);\n wordBox.scrollTop = wordBox.scrollHeight;\n}\n\nfunction clearWordBox() {\n const wordBox = document.getElementById(\"word-box\");\n wordBox.innerHTML = \"\";\n}\n\nfunction showSynthesisLoader(show) {\n const loader = document.getElementById(\"synthesis-loader\");\n loader.style.display = show ? \"inline-block\" : \"none\";\n if (show) {\n loader.style.borderTop = \"4px solid #17a2b8\";\n }\n}\n\nwindow.onload = initialize;\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>This Robot is used for practicing English at level A2. In order to interact with this Robot smoothly, please use<\/p>\n","protected":false},"author":1,"featured_media":182,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"colormag_page_layout":"default_layout","footnotes":""},"categories":[18,5],"tags":[],"class_list":["post-357","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-a2","category-chatbot"],"_links":{"self":[{"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/posts\/357","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/comments?post=357"}],"version-history":[{"count":2,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/posts\/357\/revisions"}],"predecessor-version":[{"id":359,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/posts\/357\/revisions\/359"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/media\/182"}],"wp:attachment":[{"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/media?parent=357"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/categories?post=357"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/tags?post=357"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":357,"date":"2025-11-25T15:40:55","date_gmt":"2025-11-25T15:40:55","guid":{"rendered":"https:\/\/i-cte.org\/robot\/?p=357"},"modified":"2025-11-25T15:45:36","modified_gmt":"2025-11-25T15:45:36","slug":"having-fun-reading-comprehension","status":"publish","type":"post","link":"https:\/\/i-cte.org\/robot\/having-fun-reading-comprehension\/","title":{"rendered":"Having fun – Reading Comprehension"},"content":{"rendered":"\n

This Robot is used for practicing English at level A2. In order to interact with this Robot smoothly, please use a laptop, desktop, or iPad. Do not use Smartphones.<\/p>\n\n\n\n\n\n\n \n \n Having fun – Reading Comprehension (E-mails A\u2013D)<\/title>\n <style>\n \/* Reset and Base Styles *\/\n * {\n box-sizing: border-box;\n }\n\n body {\n font-family: Arial, sans-serif;\n background-color: #f4f6f8;\n margin: 0;\n padding: 0;\n display: flex;\n flex-direction: column;\n min-height: 100vh;\n }\n\n \/* Menu Styles *\/\n .menu {\n width: 100%;\n background-color: #28a745;\n padding: 10px;\n text-align: center;\n box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);\n margin-bottom: 10px;\n overflow-x: auto;\n white-space: nowrap;\n }\n .menu a {\n color: #fff;\n text-decoration: none;\n margin: 0 10px;\n font-weight: bold;\n font-size: 14px;\n display: inline-block;\n }\n .menu a:hover,\n .menu a:focus {\n text-decoration: underline;\n outline: 2px dashed #fff;\n outline-offset: 4px;\n }\n\n \/* Container Styles *\/\n .container {\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 10px;\n box-sizing: border-box;\n flex: 1 0 auto;\n width: 100%;\n }\n\n \/* Image and Chat Containers *\/\n .image-chat-wrapper {\n display: flex;\n flex-direction: column;\n width: 100%;\n max-width: 800px;\n flex: 1;\n }\n\n \/* Image Container Styles *\/\n .image-container {\n flex: 1;\n text-align: center;\n margin-bottom: 15px;\n }\n .image-container img {\n width: 100%;\n height: auto;\n max-height: 300px;\n object-fit: cover;\n border-radius: 15px;\n box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);\n }\n .sentence-text {\n margin: 10px 0;\n font-weight: bold;\n color: #333;\n font-size: 16px;\n }\n .word-box {\n margin-top: 10px;\n padding: 10px;\n background-color: #fff;\n border: 2px solid #28a745;\n border-radius: 8px;\n box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);\n font-size: 16px;\n font-weight: bold;\n color: #28a745;\n text-align: left;\n max-height: 250px;\n overflow-y: auto;\n }\n\n \/* Chat Container Styles *\/\n .chat-container {\n background-color: #28a745;\n border-radius: 15px;\n box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);\n border: 3px solid #007bff;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n height: auto;\n max-height: 500px;\n flex: 1;\n }\n .chat-header {\n background-color: #1e7e34;\n color: #fff;\n padding: 12px;\n text-align: center;\n border-bottom: 1px solid #155724;\n position: relative;\n }\n .chat-header h2 {\n margin: 0;\n font-size: 18px;\n }\n .chat-header .loader {\n position: absolute;\n right: 20px;\n top: 50%;\n transform: translateY(-50%);\n display: none;\n }\n .chat-messages {\n padding: 12px;\n overflow-y: auto;\n flex: 1;\n background-color: #fff;\n max-height: 300px;\n }\n .message {\n margin-bottom: 10px;\n padding: 10px;\n border-radius: 6px;\n font-size: 14px;\n line-height: 1.5;\n }\n .user-message {\n background-color: #ffc107;\n color: #fff;\n text-align: right;\n }\n .bot-message {\n background-color: #17a2b8;\n color: #fff;\n text-align: left;\n }\n\n \/* Chat Input Styles *\/\n .chat-input {\n display: flex;\n align-items: center;\n background-color: #c3e6cb;\n padding: 10px;\n justify-content: space-between;\n flex-wrap: wrap;\n }\n .send-button, .stop-button {\n background-color: #17a2b8;\n color: #fff;\n font-weight: bold;\n border: none;\n border-radius: 5px;\n padding: 12px 16px;\n cursor: pointer;\n transition: background-color 0.3s;\n flex: 1;\n margin: 6px;\n max-width: 150px;\n font-size: 16px;\n }\n .stop-button {\n background-color: #dc3545;\n }\n .send-button:hover,\n .stop-button:hover,\n .send-button:focus,\n .stop-button:focus {\n background-color: #218838;\n outline: none;\n }\n\n \/* Voice Selection Styles *\/\n .voice-selection {\n margin: 10px 0;\n width: 100%;\n max-width: 300px;\n }\n .voice-selection label {\n display: block;\n margin-bottom: 5px;\n font-weight: bold;\n color: #333;\n }\n .voice-selection select {\n width: 100%;\n padding: 8px;\n border-radius: 5px;\n border: 1px solid #ccc;\n font-size: 14px;\n }\n\n \/* Loader Styles *\/\n .loader {\n border: 4px solid #f3f3f3;\n border-top: 4px solid #17a2b8;\n border-radius: 50%;\n width: 20px;\n height: 20px;\n animation: spin 2s linear infinite;\n display: inline-block;\n margin-left: 10px;\n }\n\n @keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n }\n\n \/* Responsive *\/\n\n @media (orientation: portrait) {\n .image-chat-wrapper {\n flex-direction: column;\n }\n .image-container, .chat-container {\n width: 100%;\n max-width: 100%;\n }\n }\n\n @media (orientation: landscape) and (min-width: 600px) {\n .image-chat-wrapper {\n flex-direction: row;\n justify-content: space-between;\n }\n .image-container, .chat-container {\n width: 48%;\n max-width: 48%;\n }\n .word-box {\n max-height: 200px;\n }\n .chat-header h2 {\n font-size: 20px;\n }\n .message {\n font-size: 15px;\n }\n .send-button, .stop-button {\n font-size: 18px;\n padding: 14px 20px;\n max-width: 200px;\n }\n }\n\n @media (max-width: 768px) {\n .chat-header h2 {\n font-size: 16px;\n }\n .message {\n font-size: 14px;\n }\n .send-button, .stop-button {\n font-size: 16px;\n padding: 12px 16px;\n max-width: 150px;\n }\n .word-box {\n font-size: 15px;\n }\n .voice-selection select {\n font-size: 14px;\n }\n }\n\n @media only screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {\n .chat-header h2 {\n font-size: 18px;\n }\n .send-button, .stop-button {\n padding: 14px 18px;\n font-size: 16px;\n }\n .message {\n font-size: 14px;\n }\n .word-box {\n font-size: 16px;\n }\n .chat-input input {\n font-size: 16px;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"menu\">\n <a href=\"https:\/\/i-cte.org\/robot\/having-fun-conversation\/\">Conversation<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/having-fun-vocabulary\/\">Vocabulary<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/having-fun-real-life\/\">Real Life<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/having-fun-describing-pictures\/\">Describing Pictures<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/having-fun-reading-comprehension\/\">Reading<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/having-fun-listening\/\">Listening<\/a>\n <\/div>\n\n <div class=\"container\">\n <div class=\"image-chat-wrapper\">\n <div class=\"image-container\">\n <img decoding=\"async\" src=\"https:\/\/i-cte.org\/robot\/wp-content\/uploads\/2025\/05\/DALL\u00b7E-2025-05-25-11.26.38-A-futuristic-classroom-with-a-humanoid-robot-teaching-languages-to-a-group-of-diverse-students.-The-robot-has-a-sleek-white-and-silver-metallic-body-1-1.webp\" alt=\"Four e-mails A to D about invitations to different events\">\n <div class=\"sentence-text\">\n Read the e-mails (A\u2013D). Match each one with a subject and then write T, F, or N.\n <\/div>\n <div id=\"word-box\" class=\"word-box\">\n \n <\/div>\n <\/div>\n <div class=\"chat-container\">\n <div class=\"chat-header\">\n <h2>Having fun – Reading \u2013 E-mails A\u2013D<\/h2>\n <div class=\"loader\" id=\"synthesis-loader\"><\/div>\n <\/div>\n <div class=\"chat-messages\" id=\"chat-messages\">\n \n <\/div>\n <div class=\"chat-input\">\n <div class=\"voice-selection\">\n <label for=\"voice-select\">Choose Voice:<\/label>\n <select id=\"voice-select\" aria-label=\"Select Voice\">\n <option value=\"\">Loading voices…<\/option>\n <\/select>\n <\/div>\n <button id=\"start-btn\" class=\"send-button\" aria-label=\"Check Answers\">Check Answers<\/button>\n <button id=\"stop-btn\" class=\"stop-button\" aria-label=\"Stop Voice\">Stop Voice<\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"menu\">\n <a href=\"https:\/\/i-cte.org\/robot\/having-fun-conversation\/\">Conversation<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/having-fun-vocabulary\/\">Vocabulary<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/having-fun-real-life\/\">Real Life<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/having-fun-describing-pictures\/\">Describing Pictures<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/having-fun-reading-comprehension\/\">Reading<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/having-fun-listening\/\">Listening<\/a>\n <\/div>\n\n<script>\n\/* ============================\n Reading: E-mails A\u2013D\n ============================ *\/\n\nconst emails = [\n {\n id: \"A\",\n to: \"Helen\",\n from: \"Simon\",\n text: `Dear Helen,\nWould you like to go to a concert on Saturday?\nI have two tickets for Las Ramblas \u2013 they\u2019re a great Spanish rock group. They\u2019re playing at the Union Hall downtown. Please reply a.s.a.p.\nSimon`\n },\n {\n id: \"B\",\n to: \"Pat\",\n from: \"Lenny\",\n text: `Hello Pat,\nHow are you? Are you studying hard? I\u2019m having a party on Sunday night. It\u2019s my birthday! Would you like to come? Please say yes! See you then!\nLenny`\n },\n {\n id: \"C\",\n to: \"Martin\",\n from: \"Nobu\",\n text: `Hi Martin,\nThe new James Bond movie is showing next week. Do you want to go? I think I can get free tickets because my friend works at the movie theater. How about next weekend?\nNobu`\n },\n {\n id: \"D\",\n to: \"Lisa\",\n from: \"Mandy\",\n text: `Hi Lisa,\nJames wants to go to a ball game on Friday night, but I hate baseball so I\u2019m not going! Do you want to go out for dinner? Maybe we can go to the new Italian restaurant on Park Avenue?\nMandy`\n }\n];\n\nconst subjects = [\n { id: 1, text: \"Sunday at 8:00 p.m.\" },\n { id: 2, text: \"Do you like rock?\" },\n { id: 3, text: \"How about pizza?\" },\n { id: 4, text: \"Free movie tickets!\" }\n];\n\n\/\/ Correct subject for each email (using the numbers above)\nconst subjectAnswers = {\n \"A\": 2, \/\/ rock concert\n \"B\": 1, \/\/ Sunday party\n \"C\": 4, \/\/ free movie tickets\n \"D\": 3 \/\/ pizza \/ Italian restaurant\n};\n\n\/* Part 2 \u2013 T\/F\/N statements *\/\nconst statementsTFN = [\n {\n id: 1,\n text: \"The tickets for Las Ramblas are expensive.\",\n correct: \"n\"\n },\n {\n id: 2,\n text: \"It\u2019s Lenny\u2019s birthday on Sunday.\",\n correct: \"t\"\n },\n {\n id: 3,\n text: \"Helen is working on Saturday.\",\n correct: \"n\"\n },\n {\n id: 4,\n text: \"Pat is studying hard these days.\",\n correct: \"n\"\n },\n {\n id: 5,\n text: \"Nobu\u2019s friend is an actor.\",\n correct: \"n\"\n },\n {\n id: 6,\n text: \"Mandy is watching baseball on Friday.\",\n correct: \"f\"\n }\n];\n\nconst summaryMessages = [\n \"Nice reading! Keep going.\",\n \"Good job. Read the e-mails again and try to improve your score.\",\n \"You\u2019re doing well. Practice this activity again later.\"\n];\n\nconst positiveMessages = [\n \"Excellent comprehension!\",\n \"Great work! You understood the main ideas.\",\n \"Very good! Your answers match the e-mails.\"\n];\n\n\/\/ Speech synthesis\nconst speechSynthesisSupported = \"speechSynthesis\" in window;\nlet voices = [];\nlet selectedVoice = null;\n\nconst desiredVoiceNames = [\n \"Google US English\",\n \"Google US English Female\",\n \"Google UK English Male\",\n \"Google UK English Female\"\n];\n\n\/* ========== INITIALIZE ========== *\/\n\nfunction initialize() {\n loadVoices();\n\n if (!speechSynthesisSupported) {\n appendMessage(\"Sorry, your browser does not support speech synthesis.\", \"bot\");\n }\n\n const startBtn = document.getElementById(\"start-btn\");\n startBtn.textContent = \"Check Answers\";\n startBtn.onclick = checkAnswers;\n\n const stopBtn = document.getElementById(\"stop-btn\");\n stopBtn.textContent = \"Stop Voice\";\n stopBtn.onclick = stopSpeaking;\n\n showEmailsOnLeft();\n renderTasks();\n}\n\n\/* ========== VOICE LOADING ========== *\/\n\nfunction loadVoices() {\n if (!speechSynthesisSupported) return;\n voices = window.speechSynthesis.getVoices();\n if (voices.length === 0) {\n window.speechSynthesis.onvoiceschanged = () => {\n voices = window.speechSynthesis.getVoices();\n populateVoiceList();\n };\n } else {\n populateVoiceList();\n }\n}\n\nfunction populateVoiceList() {\n const voiceSelect = document.getElementById(\"voice-select\");\n voiceSelect.innerHTML = \"\";\n\n if (!speechSynthesisSupported) {\n const option = document.createElement(\"option\");\n option.value = \"\";\n option.textContent = \"No voices available\";\n voiceSelect.appendChild(option);\n voiceSelect.disabled = true;\n return;\n }\n\n const filteredVoices = voices.filter((voice) =>\n desiredVoiceNames.includes(voice.name)\n );\n\n if (filteredVoices.length === 0) {\n const option = document.createElement(\"option\");\n option.value = \"\";\n option.textContent = \"Default voice\";\n voiceSelect.appendChild(option);\n voiceSelect.disabled = true;\n return;\n }\n\n filteredVoices.forEach((voice, index) => {\n const option = document.createElement(\"option\");\n option.value = index;\n option.textContent = `${voice.name} (${voice.lang})`;\n voiceSelect.appendChild(option);\n });\n\n if (filteredVoices.length > 0) {\n voiceSelect.selectedIndex = 0;\n selectedVoice = filteredVoices[0];\n }\n\n voiceSelect.onchange = () => {\n const selectedIndex = voiceSelect.value;\n selectedVoice = filteredVoices[selectedIndex];\n };\n}\n\n\/* ========== EMAIL + TASKS UI ========== *\/\n\nfunction showEmailsOnLeft() {\n clearWordBox();\n addSentenceToBox(\"E-mails A\u2013D:\");\n addSentenceToBox(\"\");\n\n emails.forEach((mail) => {\n addSentenceToBox(\"E-mail \" + mail.id + \" (To: \" + mail.to + \", From: \" + mail.from + \"):\");\n mail.text.split(\"\\n\").forEach((line) => addSentenceToBox(line));\n addSentenceToBox(\"\"); \/\/ blank line between e-mails\n });\n\n const greeting =\n \"Read the e-mails in the box. Then match each e-mail with the correct subject and write T, F, or N for the sentences.\";\n\n appendMessage(greeting, \"bot\");\n if (speechSynthesisSupported) {\n const combinedText = emails\n .map((m) => \"E-mail \" + m.id + \". \" + m.text)\n .join(\" \");\n showSynthesisLoader(true);\n sayText(greeting, \"en-US\")\n .then(() => sayText(combinedText, \"en-US\"))\n .then(() => {\n showSynthesisLoader(false);\n });\n }\n}\n\nfunction renderTasks() {\n const chatContainer = document.getElementById(\"chat-messages\");\n chatContainer.innerHTML = \"\";\n\n \/* Part 1 \u2013 Match subjects *\/\n const part1Title = document.createElement(\"h3\");\n part1Title.textContent = \"Part 1 \u2013 Match each e-mail (A\u2013D) with a subject.\";\n part1Title.style.margin = \"4px 0\";\n part1Title.style.fontSize = \"16px\";\n chatContainer.appendChild(part1Title);\n\n const part1Instr = document.createElement(\"p\");\n part1Instr.textContent = \"Choose 1\u20134 from the list.\";\n chatContainer.appendChild(part1Instr);\n\n const subjectList = document.createElement(\"ol\");\n subjects.forEach((subj) => {\n const li = document.createElement(\"li\");\n li.textContent = subj.text;\n subjectList.appendChild(li);\n });\n chatContainer.appendChild(subjectList);\n\n [\"A\", \"B\", \"C\", \"D\"].forEach((letter) => {\n const block = document.createElement(\"div\");\n block.style.marginBottom = \"8px\";\n\n const label = document.createElement(\"label\");\n label.htmlFor = `subject-${letter}`;\n label.textContent = `E-mail ${letter}:`;\n block.appendChild(label);\n\n const select = document.createElement(\"select\");\n select.id = `subject-${letter}`;\n select.style.marginLeft = \"8px\";\n select.style.padding = \"4px\";\n\n const emptyOpt = document.createElement(\"option\");\n emptyOpt.value = \"\";\n emptyOpt.textContent = \"--\";\n select.appendChild(emptyOpt);\n\n subjects.forEach((subj) => {\n const opt = document.createElement(\"option\");\n opt.value = subj.id;\n opt.textContent = `${subj.id} \u2013 ${subj.text}`;\n select.appendChild(opt);\n });\n\n block.appendChild(select);\n\n const feedback = document.createElement(\"div\");\n feedback.id = `subject-feedback-${letter}`;\n feedback.style.fontSize = \"13px\";\n feedback.style.marginTop = \"2px\";\n block.appendChild(feedback);\n\n chatContainer.appendChild(block);\n });\n\n \/* Part 2 \u2013 T \/ F \/ N *\/\n const part2Title = document.createElement(\"h3\");\n part2Title.textContent = \"Part 2 \u2013 Write T (true), F (false), or N (not in text).\";\n part2Title.style.marginTop = \"12px\";\n part2Title.style.fontSize = \"16px\";\n chatContainer.appendChild(part2Title);\n\n const table = document.createElement(\"table\");\n table.style.width = \"100%\";\n table.style.borderCollapse = \"collapse\";\n table.style.marginTop = \"10px\";\n table.style.fontSize = \"14px\";\n\n const headerRow = document.createElement(\"tr\");\n [\"Sentence\", \"T\", \"F\", \"N\"].forEach((head) => {\n const th = document.createElement(\"th\");\n th.textContent = head;\n th.style.borderBottom = \"1px solid #ccc\";\n th.style.padding = \"4px\";\n th.style.textAlign = head === \"Sentence\" ? \"left\" : \"center\";\n headerRow.appendChild(th);\n });\n table.appendChild(headerRow);\n\n statementsTFN.forEach((stmt) => {\n const row = document.createElement(\"tr\");\n row.id = `row-${stmt.id}`;\n\n const textCell = document.createElement(\"td\");\n textCell.textContent = stmt.text;\n textCell.style.padding = \"4px\";\n textCell.style.verticalAlign = \"top\";\n row.appendChild(textCell);\n\n [\"t\", \"f\", \"n\"].forEach((value) => {\n const cell = document.createElement(\"td\");\n cell.style.textAlign = \"center\";\n cell.style.padding = \"4px\";\n\n const label = document.createElement(\"label\");\n label.style.cursor = \"pointer\";\n\n const input = document.createElement(\"input\");\n input.type = \"radio\";\n input.name = `q${stmt.id}`;\n input.value = value;\n input.style.marginRight = \"4px\";\n\n label.appendChild(input);\n label.appendChild(document.createTextNode(\"\"));\n cell.appendChild(label);\n row.appendChild(cell);\n });\n\n table.appendChild(row);\n });\n\n chatContainer.appendChild(table);\n}\n\n\/* ========== CHECK ANSWERS ========== *\/\n\nfunction checkAnswers() {\n \/\/ Part 1 \u2013 subjects\n let subScore = 0;\n let subTotal = 4;\n let subUnanswered = 0;\n\n [\"A\", \"B\", \"C\", \"D\"].forEach((letter) => {\n const select = document.getElementById(`subject-${letter}`);\n const feedback = document.getElementById(`subject-feedback-${letter}`);\n if (!select || !feedback) return;\n\n const val = select.value;\n if (!val) {\n subUnanswered++;\n feedback.textContent = \"Please choose a subject.\";\n feedback.style.color = \"#856404\"; \/\/ yellow\/brown\n select.style.borderColor = \"#ffeeba\";\n return;\n }\n\n if (parseInt(val, 10) === subjectAnswers[letter]) {\n subScore++;\n const correctText = subjects.find((s) => s.id === subjectAnswers[letter]).text;\n feedback.textContent = \"Correct: \" + correctText;\n feedback.style.color = \"#155724\";\n select.style.borderColor = \"#28a745\";\n } else {\n const correctText = subjects.find((s) => s.id === subjectAnswers[letter]).text;\n feedback.textContent = \"Not quite. The best subject is: \" + correctText;\n feedback.style.color = \"#721c24\";\n select.style.borderColor = \"#dc3545\";\n }\n });\n\n \/\/ Part 2 \u2013 T\/F\/N\n let tfScore = 0;\n let tfTotal = statementsTFN.length;\n let tfUnanswered = 0;\n\n statementsTFN.forEach((stmt) => {\n const row = document.getElementById(`row-${stmt.id}`);\n if (row) row.style.backgroundColor = \"\";\n\n const selected = document.querySelector(`input[name=\"q${stmt.id}\"]:checked`);\n\n if (!selected) {\n tfUnanswered++;\n if (row) row.style.backgroundColor = \"#fff3cd\"; \/\/ light yellow\n return;\n }\n\n if (selected.value === stmt.correct) {\n tfScore++;\n if (row) row.style.backgroundColor = \"#d4edda\"; \/\/ light green\n } else {\n if (row) row.style.backgroundColor = \"#f8d7da\"; \/\/ light red\n }\n });\n\n const resultMessage =\n `Part 1: You got ${subScore} out of ${subTotal} correct.` +\n (subUnanswered > 0 ? ` (${subUnanswered} e-mail(s) not answered.) ` : \" \") +\n `Part 2: You got ${tfScore} out of ${tfTotal} correct.` +\n (tfUnanswered > 0 ? ` (${tfUnanswered} sentence(s) not answered.)` : \"\");\n\n appendMessage(resultMessage, \"bot\");\n\n const totalScore = subScore + tfScore;\n const totalQuestions = subTotal + tfTotal;\n let extra;\n\n if (totalScore === totalQuestions && subUnanswered === 0 && tfUnanswered === 0) {\n extra = \"Perfect score! \" + positiveMessages[Math.floor(Math.random() * positiveMessages.length)];\n } else if (totalScore >= Math.round(totalQuestions * 0.7)) {\n extra = positiveMessages[Math.floor(Math.random() * positiveMessages.length)];\n } else {\n extra = summaryMessages[Math.floor(Math.random() * summaryMessages.length)];\n }\n\n appendMessage(extra, \"bot\");\n\n if (speechSynthesisSupported) {\n showSynthesisLoader(true);\n sayText(resultMessage + \" \" + extra, \"en-US\").then(() => {\n showSynthesisLoader(false);\n });\n }\n}\n\n\/* ========== SPEECH HELPERS ========== *\/\n\nfunction stopSpeaking() {\n if (speechSynthesisSupported) {\n window.speechSynthesis.cancel();\n showSynthesisLoader(false);\n }\n}\n\nfunction sayText(text, lang) {\n return new Promise((resolve) => {\n if (!speechSynthesisSupported) {\n resolve();\n return;\n }\n const utterance = new SpeechSynthesisUtterance(text);\n utterance.lang = lang;\n utterance.rate = 1.0;\n utterance.pitch = 1.0;\n\n if (selectedVoice) {\n utterance.voice = selectedVoice;\n }\n\n utterance.onend = function () {\n resolve();\n };\n utterance.onerror = function () {\n resolve();\n };\n\n window.speechSynthesis.speak(utterance);\n });\n}\n\n\/* ========== GENERIC UI HELPERS ========== *\/\n\nfunction appendMessage(text, sender) {\n const messageContainer = document.getElementById(\"chat-messages\");\n const messageElement = document.createElement(\"div\");\n messageElement.classList.add(\"message\");\n messageElement.classList.add(sender === \"bot\" ? \"bot-message\" : \"user-message\");\n messageElement.innerText = text;\n messageContainer.appendChild(messageElement);\n messageContainer.scrollTop = messageContainer.scrollHeight;\n}\n\nfunction addSentenceToBox(sentence) {\n const wordBox = document.getElementById(\"word-box\");\n const sentenceElement = document.createElement(\"div\");\n sentenceElement.innerText = sentence;\n wordBox.appendChild(sentenceElement);\n wordBox.scrollTop = wordBox.scrollHeight;\n}\n\nfunction clearWordBox() {\n const wordBox = document.getElementById(\"word-box\");\n wordBox.innerHTML = \"\";\n}\n\nfunction showSynthesisLoader(show) {\n const loader = document.getElementById(\"synthesis-loader\");\n loader.style.display = show ? \"inline-block\" : \"none\";\n if (show) {\n loader.style.borderTop = \"4px solid #17a2b8\";\n }\n}\n\nwindow.onload = initialize;\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>This Robot is used for practicing English at level A2. In order to interact with this Robot smoothly, please use<\/p>\n","protected":false},"author":1,"featured_media":182,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"colormag_page_layout":"default_layout","footnotes":""},"categories":[18,5],"tags":[],"class_list":["post-357","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-a2","category-chatbot"],"_links":{"self":[{"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/posts\/357","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/comments?post=357"}],"version-history":[{"count":2,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/posts\/357\/revisions"}],"predecessor-version":[{"id":359,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/posts\/357\/revisions\/359"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/media\/182"}],"wp:attachment":[{"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/media?parent=357"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/categories?post=357"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/tags?post=357"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}