Vacation – Reading Comprehension<\/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-chat-wrapper {\n display: flex;\n flex-direction: column;\n width: 100%;\n max-width: 800px;\n flex: 1;\n }\n\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 {\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 {\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 {\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 {\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 @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\/vacation-conversation\/\">Conversation<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/vacation-vocabulary\/\">Vocabulary<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/vacation-real-life\/\">Real Life<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/vacation-describing-pictures\/\">Describing Pictures<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/vacation-reading-comprehension\/\">Reading<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/vacation-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\/11\/6.webp\" alt=\"Travel blog about a trip to Rio, Buzios and Iguazu Falls\">\n <div class=\"sentence-text\">\n Read Fatma\u2019s travel blog about her vacation in Brazil. How did she enjoy her trip?\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>Vacation – Reading Comprehension<\/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\/vacation-conversation\/\">Conversation<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/vacation-vocabulary\/\">Vocabulary<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/vacation-real-life\/\">Real Life<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/vacation-describing-pictures\/\">Describing Pictures<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/vacation-reading-comprehension\/\">Reading<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/vacation-listening\/\">Listening<\/a>\n <\/div>\n\n<script>\n\/* ============================\n Travel Blog \u2013 Reading for opinions\n ============================ *\/\n\nconst blogText = `Day 1\nWell, here I am in Rio ... finally. The flight from Istanbul took over 26 hours (changing in Dubai). Terrible! I am so tired ...\n\nDay 3\nWhat a fantastic city! I\u2019m having a great time. We had a guided tour around the city on our first morning. It\u2019s a really big, busy, noisy place.\nI love it! In the afternoon, some people went to Ipanema beach, but I went sightseeing and visited the National History Museum and the Imperial Palace. Yesterday, we went to Tijuca National Park and took a train ride through the forest. The people here are really friendly.\n\nDay 4\nThis morning, we went up Sugarloaf Mountain \u2013 the view was amazing.\n\nDay 7\nI\u2019m in Buzios now. After the noise of Rio, it was good to have a lazy day and relax by the beach yesterday. It wasn\u2019t crowded at all. This morning, we went on a boat with a glass bottom to see all the fish, and I tried scuba diving for the first time.\n\nDay 10\nI arrived in Iguazu two days ago. We flew here on a small plane \u2026 exciting. The hotel isn\u2019t so good, but the trip to Iguazu Falls was wonderful. The tour guide gave us a lot of interesting information as we walked along the river. Tomorrow, it\u2019s my flight home!`;\n\n\/* Part 1 \u2013 T\/F statements *\/\nconst statementsTF = [\n {\n id: 1,\n text: \"She enjoyed the journey to Rio.\",\n correct: \"f\"\n },\n {\n id: 2,\n text: \"She thought Buzios was very busy.\",\n correct: \"f\"\n },\n {\n id: 3,\n text: \"The flight to Iguazu was boring.\",\n correct: \"f\"\n },\n {\n id: 4,\n text: \"She didn\u2019t like the hotel in Iguazu.\",\n correct: \"t\"\n },\n {\n id: 5,\n text: \"The tour at Iguazu Falls was interesting.\",\n correct: \"t\"\n }\n];\n\n\/* Part 2 \u2013 adjectives and what they describe *\/\nconst adjectiveItems = [\n {\n id: \"amazing\",\n word: \"amazing\",\n correct: \"view\"\n },\n {\n id: \"busy\",\n word: \"busy\",\n correct: \"rio\"\n },\n {\n id: \"fantastic\",\n word: \"fantastic\",\n correct: \"rio\"\n },\n {\n id: \"friendly\",\n word: \"friendly\",\n correct: \"people\"\n },\n {\n id: \"wonderful\",\n word: \"wonderful\",\n correct: \"iguazuTrip\"\n }\n];\n\nconst adjectiveOptions = [\n { value: \"rio\", label: \"the city of Rio\" },\n { value: \"buzios\", label: \"Buzios\" },\n { value: \"view\", label: \"the view from Sugarloaf Mountain\" },\n { value: \"people\", label: \"the people in Brazil\" },\n { value: \"iguazuTrip\", label: \"the trip to Iguazu Falls\" },\n { value: \"hotel\", label: \"the hotel in Iguazu\" }\n];\n\nconst summaryMessages = [\n \"Nice reading! Keep going.\",\n \"Good job. Read the blog 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 Fatma\u2019s opinions.\",\n \"Very good! Your answers match the travel blog.\"\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\/* ========== INITIALISE ========== *\/\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 showBlogOnLeft();\n renderTasks();\n}\n\n\/* ========== VOICES ========== *\/\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\/* ========== BLOG + TASKS UI ========== *\/\n\nfunction showBlogOnLeft() {\n clearWordBox();\n addSentenceToBox(\"Fatma\u2019s travel blog:\");\n addSentenceToBox(\"\");\n\n blogText.split(\"\\n\").forEach((line) => addSentenceToBox(line));\n\n const greeting =\n \"Read Fatma\u2019s travel blog about her vacation in Brazil. Then decide if the sentences are true or false and match the adjectives with what they describe.\";\n\n appendMessage(greeting, \"bot\");\n if (speechSynthesisSupported) {\n showSynthesisLoader(true);\n sayText(greeting, \"en-US\")\n .then(() => sayText(blogText, \"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 T\/F *\/\n const part1Title = document.createElement(\"h3\");\n part1Title.textContent = \"Part 1 \u2013 Write T (true) or F (false).\";\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 T or F for each statement.\";\n chatContainer.appendChild(part1Instr);\n\n const tfTable = document.createElement(\"table\");\n tfTable.style.width = \"100%\";\n tfTable.style.borderCollapse = \"collapse\";\n tfTable.style.marginTop = \"10px\";\n tfTable.style.fontSize = \"14px\";\n\n const tfHeaderRow = document.createElement(\"tr\");\n [\"Sentence\", \"T\", \"F\"].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 tfHeaderRow.appendChild(th);\n });\n tfTable.appendChild(tfHeaderRow);\n\n statementsTF.forEach((stmt) => {\n const row = document.createElement(\"tr\");\n row.id = `tf-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\"].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 = `tf${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 tfTable.appendChild(row);\n });\n\n chatContainer.appendChild(tfTable);\n\n \/* Part 2 \u2013 adjectives *\/\n const part2Title = document.createElement(\"h3\");\n part2Title.textContent = \"Part 2 \u2013 Who or what do these words describe?\";\n part2Title.style.marginTop = \"12px\";\n part2Title.style.fontSize = \"16px\";\n chatContainer.appendChild(part2Title);\n\n const part2Instr = document.createElement(\"p\");\n part2Instr.textContent = \"Choose the best answer from the list.\";\n chatContainer.appendChild(part2Instr);\n\n adjectiveItems.forEach((item) => {\n const block = document.createElement(\"div\");\n block.style.marginBottom = \"8px\";\n\n const label = document.createElement(\"label\");\n label.htmlFor = `adj-${item.id}`;\n label.textContent = item.word + \":\";\n block.appendChild(label);\n\n const select = document.createElement(\"select\");\n select.id = `adj-${item.id}`;\n select.style.marginLeft = \"8px\";\n select.style.padding = \"4px\";\n\n const emptyOpt = document.createElement(\"option\");\n emptyOpt.value = \"\";\n emptyOpt.textContent = \"-- choose --\";\n select.appendChild(emptyOpt);\n\n adjectiveOptions.forEach((optObj) => {\n const opt = document.createElement(\"option\");\n opt.value = optObj.value;\n opt.textContent = optObj.label;\n select.appendChild(opt);\n });\n\n block.appendChild(select);\n\n const feedback = document.createElement(\"div\");\n feedback.id = `adj-feedback-${item.id}`;\n feedback.style.fontSize = \"13px\";\n feedback.style.marginTop = \"2px\";\n block.appendChild(feedback);\n\n chatContainer.appendChild(block);\n });\n}\n\n\/* ========== CHECK ANSWERS ========== *\/\n\nfunction checkAnswers() {\n \/* Part 1 *\/\n let tfScore = 0;\n let tfTotal = statementsTF.length;\n let tfUnanswered = 0;\n\n statementsTF.forEach((stmt) => {\n const row = document.getElementById(`tf-row-${stmt.id}`);\n if (row) row.style.backgroundColor = \"\";\n\n const selected = document.querySelector(`input[name=\"tf${stmt.id}\"]:checked`);\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 \/* Part 2 *\/\n let adjScore = 0;\n let adjTotal = adjectiveItems.length;\n let adjUnanswered = 0;\n\n adjectiveItems.forEach((item) => {\n const select = document.getElementById(`adj-${item.id}`);\n const feedback = document.getElementById(`adj-feedback-${item.id}`);\n if (!select || !feedback) return;\n\n const val = select.value;\n if (!val) {\n adjUnanswered++;\n feedback.textContent = \"Please choose an answer.\";\n feedback.style.color = \"#856404\";\n select.style.borderColor = \"#ffeeba\";\n return;\n }\n\n if (val === item.correct) {\n adjScore++;\n feedback.textContent = \"Correct!\";\n feedback.style.color = \"#155724\";\n select.style.borderColor = \"#28a745\";\n } else {\n const correctLabel =\n adjectiveOptions.find((opt) => opt.value === item.correct)?.label || \"\";\n feedback.textContent = \"Not quite. It describes \" + correctLabel + \".\";\n feedback.style.color = \"#721c24\";\n select.style.borderColor = \"#dc3545\";\n }\n });\n\n const resultMessage =\n `Part 1: You got ${tfScore} out of ${tfTotal} correct.` +\n (tfUnanswered > 0 ? ` (${tfUnanswered} sentence(s) not answered.) ` : \" \") +\n `Part 2: You got ${adjScore} out of ${adjTotal} correct.` +\n (adjUnanswered > 0 ? ` (${adjUnanswered} word(s) not answered.)` : \"\");\n\n appendMessage(resultMessage, \"bot\");\n\n const totalScore = tfScore + adjScore;\n const totalQuestions = tfTotal + adjTotal;\n let extra;\n\n if (totalScore === totalQuestions && tfUnanswered === 0 && adjUnanswered === 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\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":87,"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-378","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\/378","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=378"}],"version-history":[{"count":1,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/posts\/378\/revisions"}],"predecessor-version":[{"id":379,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/posts\/378\/revisions\/379"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/media\/87"}],"wp:attachment":[{"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/media?parent=378"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/categories?post=378"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/tags?post=378"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":378,"date":"2025-12-03T06:06:50","date_gmt":"2025-12-03T06:06:50","guid":{"rendered":"https:\/\/i-cte.org\/robot\/?p=378"},"modified":"2025-12-03T06:06:50","modified_gmt":"2025-12-03T06:06:50","slug":"vacation-reading-comprehension","status":"publish","type":"post","link":"https:\/\/i-cte.org\/robot\/vacation-reading-comprehension\/","title":{"rendered":"Vacation – 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, though they are sometimes fine. It depends on the updated browsers and Internet connection.<\/p>\n\n\n\n\n\n\n \n \n Vacation – Reading Comprehension<\/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-chat-wrapper {\n display: flex;\n flex-direction: column;\n width: 100%;\n max-width: 800px;\n flex: 1;\n }\n\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 {\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 {\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 {\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 {\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 @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\/vacation-conversation\/\">Conversation<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/vacation-vocabulary\/\">Vocabulary<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/vacation-real-life\/\">Real Life<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/vacation-describing-pictures\/\">Describing Pictures<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/vacation-reading-comprehension\/\">Reading<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/vacation-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\/11\/6.webp\" alt=\"Travel blog about a trip to Rio, Buzios and Iguazu Falls\">\n <div class=\"sentence-text\">\n Read Fatma\u2019s travel blog about her vacation in Brazil. How did she enjoy her trip?\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>Vacation – Reading Comprehension<\/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\/vacation-conversation\/\">Conversation<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/vacation-vocabulary\/\">Vocabulary<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/vacation-real-life\/\">Real Life<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/vacation-describing-pictures\/\">Describing Pictures<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/vacation-reading-comprehension\/\">Reading<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/vacation-listening\/\">Listening<\/a>\n <\/div>\n\n<script>\n\/* ============================\n Travel Blog \u2013 Reading for opinions\n ============================ *\/\n\nconst blogText = `Day 1\nWell, here I am in Rio ... finally. The flight from Istanbul took over 26 hours (changing in Dubai). Terrible! I am so tired ...\n\nDay 3\nWhat a fantastic city! I\u2019m having a great time. We had a guided tour around the city on our first morning. It\u2019s a really big, busy, noisy place.\nI love it! In the afternoon, some people went to Ipanema beach, but I went sightseeing and visited the National History Museum and the Imperial Palace. Yesterday, we went to Tijuca National Park and took a train ride through the forest. The people here are really friendly.\n\nDay 4\nThis morning, we went up Sugarloaf Mountain \u2013 the view was amazing.\n\nDay 7\nI\u2019m in Buzios now. After the noise of Rio, it was good to have a lazy day and relax by the beach yesterday. It wasn\u2019t crowded at all. This morning, we went on a boat with a glass bottom to see all the fish, and I tried scuba diving for the first time.\n\nDay 10\nI arrived in Iguazu two days ago. We flew here on a small plane \u2026 exciting. The hotel isn\u2019t so good, but the trip to Iguazu Falls was wonderful. The tour guide gave us a lot of interesting information as we walked along the river. Tomorrow, it\u2019s my flight home!`;\n\n\/* Part 1 \u2013 T\/F statements *\/\nconst statementsTF = [\n {\n id: 1,\n text: \"She enjoyed the journey to Rio.\",\n correct: \"f\"\n },\n {\n id: 2,\n text: \"She thought Buzios was very busy.\",\n correct: \"f\"\n },\n {\n id: 3,\n text: \"The flight to Iguazu was boring.\",\n correct: \"f\"\n },\n {\n id: 4,\n text: \"She didn\u2019t like the hotel in Iguazu.\",\n correct: \"t\"\n },\n {\n id: 5,\n text: \"The tour at Iguazu Falls was interesting.\",\n correct: \"t\"\n }\n];\n\n\/* Part 2 \u2013 adjectives and what they describe *\/\nconst adjectiveItems = [\n {\n id: \"amazing\",\n word: \"amazing\",\n correct: \"view\"\n },\n {\n id: \"busy\",\n word: \"busy\",\n correct: \"rio\"\n },\n {\n id: \"fantastic\",\n word: \"fantastic\",\n correct: \"rio\"\n },\n {\n id: \"friendly\",\n word: \"friendly\",\n correct: \"people\"\n },\n {\n id: \"wonderful\",\n word: \"wonderful\",\n correct: \"iguazuTrip\"\n }\n];\n\nconst adjectiveOptions = [\n { value: \"rio\", label: \"the city of Rio\" },\n { value: \"buzios\", label: \"Buzios\" },\n { value: \"view\", label: \"the view from Sugarloaf Mountain\" },\n { value: \"people\", label: \"the people in Brazil\" },\n { value: \"iguazuTrip\", label: \"the trip to Iguazu Falls\" },\n { value: \"hotel\", label: \"the hotel in Iguazu\" }\n];\n\nconst summaryMessages = [\n \"Nice reading! Keep going.\",\n \"Good job. Read the blog 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 Fatma\u2019s opinions.\",\n \"Very good! Your answers match the travel blog.\"\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\/* ========== INITIALISE ========== *\/\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 showBlogOnLeft();\n renderTasks();\n}\n\n\/* ========== VOICES ========== *\/\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\/* ========== BLOG + TASKS UI ========== *\/\n\nfunction showBlogOnLeft() {\n clearWordBox();\n addSentenceToBox(\"Fatma\u2019s travel blog:\");\n addSentenceToBox(\"\");\n\n blogText.split(\"\\n\").forEach((line) => addSentenceToBox(line));\n\n const greeting =\n \"Read Fatma\u2019s travel blog about her vacation in Brazil. Then decide if the sentences are true or false and match the adjectives with what they describe.\";\n\n appendMessage(greeting, \"bot\");\n if (speechSynthesisSupported) {\n showSynthesisLoader(true);\n sayText(greeting, \"en-US\")\n .then(() => sayText(blogText, \"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 T\/F *\/\n const part1Title = document.createElement(\"h3\");\n part1Title.textContent = \"Part 1 \u2013 Write T (true) or F (false).\";\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 T or F for each statement.\";\n chatContainer.appendChild(part1Instr);\n\n const tfTable = document.createElement(\"table\");\n tfTable.style.width = \"100%\";\n tfTable.style.borderCollapse = \"collapse\";\n tfTable.style.marginTop = \"10px\";\n tfTable.style.fontSize = \"14px\";\n\n const tfHeaderRow = document.createElement(\"tr\");\n [\"Sentence\", \"T\", \"F\"].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 tfHeaderRow.appendChild(th);\n });\n tfTable.appendChild(tfHeaderRow);\n\n statementsTF.forEach((stmt) => {\n const row = document.createElement(\"tr\");\n row.id = `tf-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\"].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 = `tf${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 tfTable.appendChild(row);\n });\n\n chatContainer.appendChild(tfTable);\n\n \/* Part 2 \u2013 adjectives *\/\n const part2Title = document.createElement(\"h3\");\n part2Title.textContent = \"Part 2 \u2013 Who or what do these words describe?\";\n part2Title.style.marginTop = \"12px\";\n part2Title.style.fontSize = \"16px\";\n chatContainer.appendChild(part2Title);\n\n const part2Instr = document.createElement(\"p\");\n part2Instr.textContent = \"Choose the best answer from the list.\";\n chatContainer.appendChild(part2Instr);\n\n adjectiveItems.forEach((item) => {\n const block = document.createElement(\"div\");\n block.style.marginBottom = \"8px\";\n\n const label = document.createElement(\"label\");\n label.htmlFor = `adj-${item.id}`;\n label.textContent = item.word + \":\";\n block.appendChild(label);\n\n const select = document.createElement(\"select\");\n select.id = `adj-${item.id}`;\n select.style.marginLeft = \"8px\";\n select.style.padding = \"4px\";\n\n const emptyOpt = document.createElement(\"option\");\n emptyOpt.value = \"\";\n emptyOpt.textContent = \"-- choose --\";\n select.appendChild(emptyOpt);\n\n adjectiveOptions.forEach((optObj) => {\n const opt = document.createElement(\"option\");\n opt.value = optObj.value;\n opt.textContent = optObj.label;\n select.appendChild(opt);\n });\n\n block.appendChild(select);\n\n const feedback = document.createElement(\"div\");\n feedback.id = `adj-feedback-${item.id}`;\n feedback.style.fontSize = \"13px\";\n feedback.style.marginTop = \"2px\";\n block.appendChild(feedback);\n\n chatContainer.appendChild(block);\n });\n}\n\n\/* ========== CHECK ANSWERS ========== *\/\n\nfunction checkAnswers() {\n \/* Part 1 *\/\n let tfScore = 0;\n let tfTotal = statementsTF.length;\n let tfUnanswered = 0;\n\n statementsTF.forEach((stmt) => {\n const row = document.getElementById(`tf-row-${stmt.id}`);\n if (row) row.style.backgroundColor = \"\";\n\n const selected = document.querySelector(`input[name=\"tf${stmt.id}\"]:checked`);\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 \/* Part 2 *\/\n let adjScore = 0;\n let adjTotal = adjectiveItems.length;\n let adjUnanswered = 0;\n\n adjectiveItems.forEach((item) => {\n const select = document.getElementById(`adj-${item.id}`);\n const feedback = document.getElementById(`adj-feedback-${item.id}`);\n if (!select || !feedback) return;\n\n const val = select.value;\n if (!val) {\n adjUnanswered++;\n feedback.textContent = \"Please choose an answer.\";\n feedback.style.color = \"#856404\";\n select.style.borderColor = \"#ffeeba\";\n return;\n }\n\n if (val === item.correct) {\n adjScore++;\n feedback.textContent = \"Correct!\";\n feedback.style.color = \"#155724\";\n select.style.borderColor = \"#28a745\";\n } else {\n const correctLabel =\n adjectiveOptions.find((opt) => opt.value === item.correct)?.label || \"\";\n feedback.textContent = \"Not quite. It describes \" + correctLabel + \".\";\n feedback.style.color = \"#721c24\";\n select.style.borderColor = \"#dc3545\";\n }\n });\n\n const resultMessage =\n `Part 1: You got ${tfScore} out of ${tfTotal} correct.` +\n (tfUnanswered > 0 ? ` (${tfUnanswered} sentence(s) not answered.) ` : \" \") +\n `Part 2: You got ${adjScore} out of ${adjTotal} correct.` +\n (adjUnanswered > 0 ? ` (${adjUnanswered} word(s) not answered.)` : \"\");\n\n appendMessage(resultMessage, \"bot\");\n\n const totalScore = tfScore + adjScore;\n const totalQuestions = tfTotal + adjTotal;\n let extra;\n\n if (totalScore === totalQuestions && tfUnanswered === 0 && adjUnanswered === 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\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":87,"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-378","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\/378","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=378"}],"version-history":[{"count":1,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/posts\/378\/revisions"}],"predecessor-version":[{"id":379,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/posts\/378\/revisions\/379"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/media\/87"}],"wp:attachment":[{"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/media?parent=378"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/categories?post=378"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/tags?post=378"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}