Life Stories – 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\/life-stories-conversation\/\">Conversation<\/a>\n<a href=\"https:\/\/i-cte.org\/robot\/life-stories-vocabulary\/\">Vocabulary<\/a>\n<a href=\"https:\/\/i-cte.org\/robot\/life-stories-real-life\/\">Real Life<\/a>\n<a href=\"https:\/\/i-cte.org\/robot\/life-stories-describing-pictures\/\">Describing Pictures<\/a>\n<a href=\"https:\/\/i-cte.org\/robot\/life-stories-reading-comprehension\/\">Reading<\/a>\n<a href=\"https:\/\/i-cte.org\/robot\/life-stories-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-27-23.48.57-A-highly-realistic-human-like-female-robot-with-a-natural-human-skin-appearance-expressive-eyes-and-a-warm-friendly-smile.-She-is-teaching-English.webp\" alt=\"Biography of Kate Middleton with a photo\">\n <div class=\"sentence-text\">\n Read the biography of Kate Middleton\u2019s early life. Complete the timeline and answer the questions.\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>Life Stories – 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\/life-stories-conversation\/\">Conversation<\/a>\n<a href=\"https:\/\/i-cte.org\/robot\/life-stories-vocabulary\/\">Vocabulary<\/a>\n<a href=\"https:\/\/i-cte.org\/robot\/life-stories-real-life\/\">Real Life<\/a>\n<a href=\"https:\/\/i-cte.org\/robot\/life-stories-describing-pictures\/\">Describing Pictures<\/a>\n<a href=\"https:\/\/i-cte.org\/robot\/life-stories-reading-comprehension\/\">Reading<\/a>\n<a href=\"https:\/\/i-cte.org\/robot\/life-stories-listening\/\">Listening<\/a>\n <\/div>\n\n<script>\n\/* ============================\n Kate Middleton Biography \u2013 Intensive reading\n ============================ *\/\n\nconst bioText = `Catherine Elizabeth Middleton was born on January 9, 1982, in England. Her father, Michael, worked for an airline and her mother, Carole, was a flight attendant. In 1984, she moved with her family to Amman in Jordan because her father got a job there. Catherine, or \u201cKate\u201d as everyone called her, went to a school there from the age of three.\n\nIn September 1986, the Middletons returned to their home in the village of Bucklebury, England. This is where Kate grew up. In 1987, her mother started a mail-order company selling party items. The company became very successful and the family became multi-millionaires.\n\nKate studied hard at school and played a lot of sports. She especially enjoyed hockey and tennis. She left school in July 2000 and took a \u201cgap year\u201d, spending time in Italy and Chile. In 2001, Kate went to the University of St. Andrews in Scotland to study History of Art. It was here that she first met Prince William. They became friends and soon fell in love.\n\nShe graduated in 2005 and worked for her parents\u2019 company, Party Pieces. She also had a part-time job in London at a clothing company. Kate and William got engaged in October 2010, while they were on vacation in Kenya, and on April 29, 2011, they were married at Westminster Abbey in London. Over two billion people around the world watched the wedding. Her official title became the Duchess of Cambridge, but everyone still calls her Kate.\n\nKate and William have two children. George was born on July 22, 2013 and Charlotte on May 2, 2015.`;\n\n\/* Part 1 \u2013 timeline items *\/\nconst timelineItems = [\n {\n id: \"y1982\",\n label: \"1982 \u2013 She was ______.\",\n check: (a) => a.includes(\"born\")\n },\n {\n id: \"y1984\",\n label: \"1984 \u2013 She moved with her family to ______.\",\n check: (a) => a.includes(\"amman\") || a.includes(\"jordan\")\n },\n {\n id: \"y1986\",\n label: \"1986 \u2013 Her family returned to ______.\",\n check: (a) => a.includes(\"bucklebury\")\n },\n {\n id: \"y2000\",\n label: \"2000 \u2013 She left ______.\",\n check: (a) => a.includes(\"school\")\n },\n {\n id: \"y2000gap\",\n label: \"2000\u201301 \u2013 She travelled to ______ and ______.\",\n check: (a) => a.includes(\"italy\") && a.includes(\"chile\")\n },\n {\n id: \"y2001\",\n label: \"2001 \u2013 She went to the University of ______.\",\n check: (a) => a.includes(\"andrews\")\n },\n {\n id: \"y2005\",\n label: \"2005 \u2013 She graduated with a degree in ______.\",\n check: (a) => a.includes(\"history of art\") || (a.includes(\"art\") && a.includes(\"history\"))\n },\n {\n id: \"y2010\",\n label: \"2010 \u2013 She and William got ______.\",\n check: (a) => a.includes(\"engaged\")\n },\n {\n id: \"y2011\",\n label: \"2011 \u2013 They got ______.\",\n check: (a) => a.includes(\"married\")\n },\n {\n id: \"y2013\",\n label: \"2013 \u2013 Their son ______ was born.\",\n check: (a) => a.includes(\"george\")\n }\n];\n\n\/* Part 2 \u2013 WH questions *\/\nconst whQuestions = [\n {\n id: 1,\n question: \"Why did Kate\u2019s family move to Jordan?\",\n modelAnswer: \"Because her father got a job there.\",\n check: (a) => a.includes(\"job\") && (a.includes(\"father\") || a.includes(\"dad\"))\n },\n {\n id: 2,\n question: \"What were Kate\u2019s favorite sports at school?\",\n modelAnswer: \"Hockey and tennis.\",\n check: (a) => a.includes(\"hockey\") && a.includes(\"tennis\")\n },\n {\n id: 3,\n question: \"Where did she meet Prince William?\",\n modelAnswer: \"At the University of St. Andrews in Scotland.\",\n check: (a) => a.includes(\"university\") && a.includes(\"andrews\")\n },\n {\n id: 4,\n question: \"How old was Kate when she got married?\",\n modelAnswer: \"She was 29 years old.\",\n check: (a) => a.includes(\"29\")\n },\n {\n id: 5,\n question: \"How many people watched the wedding?\",\n modelAnswer: \"Over two billion people watched it.\",\n check: (a) => a.includes(\"two billion\") || a.includes(\"2 billion\")\n }\n];\n\nconst summaryMessages = [\n \"Nice reading! Keep going.\",\n \"Good job. Read the biography 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 text.\",\n \"Very good! Your answers match the biography.\"\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 showBioOnLeft();\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\/* ========== BIO + TASKS UI ========== *\/\n\nfunction showBioOnLeft() {\n clearWordBox();\n addSentenceToBox(\"Kate Middleton\u2019s biography:\");\n addSentenceToBox(\"\");\n\n bioText.split(\"\\n\").forEach((line) => addSentenceToBox(line));\n\n const greeting =\n \"Read Kate Middleton\u2019s biography carefully. Then complete the timeline and answer the questions.\";\n\n appendMessage(greeting, \"bot\");\n if (speechSynthesisSupported) {\n showSynthesisLoader(true);\n sayText(greeting, \"en-US\")\n .then(() => sayText(bioText, \"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 Timeline *\/\n const part1Title = document.createElement(\"h3\");\n part1Title.textContent = \"Part 1 \u2013 Complete the timeline.\";\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 = \"Write short answers (one or two words).\";\n chatContainer.appendChild(part1Instr);\n\n timelineItems.forEach((item, index) => {\n const block = document.createElement(\"div\");\n block.style.marginBottom = \"8px\";\n\n const label = document.createElement(\"label\");\n label.htmlFor = item.id;\n label.textContent = (index + 1) + \". \" + item.label;\n block.appendChild(label);\n\n const input = document.createElement(\"input\");\n input.type = \"text\";\n input.id = item.id;\n input.style.width = \"100%\";\n input.style.marginTop = \"4px\";\n input.style.padding = \"4px\";\n input.style.boxSizing = \"border-box\";\n block.appendChild(input);\n\n const feedback = document.createElement(\"div\");\n feedback.id = `tl-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 \/* Part 2 \u2013 Questions *\/\n const part2Title = document.createElement(\"h3\");\n part2Title.textContent = \"Part 2 \u2013 Answer the questions.\";\n part2Title.style.marginTop = \"12px\";\n part2Title.style.fontSize = \"16px\";\n chatContainer.appendChild(part2Title);\n\n const part2Instr = document.createElement(\"p\");\n part2Instr.textContent = \"Write complete answers in the boxes.\";\n chatContainer.appendChild(part2Instr);\n\n whQuestions.forEach((q) => {\n const block = document.createElement(\"div\");\n block.style.marginBottom = \"8px\";\n\n const label = document.createElement(\"label\");\n label.htmlFor = `wh-q${q.id}`;\n label.textContent = `${q.id}. ${q.question}`;\n block.appendChild(label);\n\n const input = document.createElement(\"input\");\n input.type = \"text\";\n input.id = `wh-q${q.id}`;\n input.style.width = \"100%\";\n input.style.marginTop = \"4px\";\n input.style.padding = \"4px\";\n input.style.boxSizing = \"border-box\";\n block.appendChild(input);\n\n const feedback = document.createElement(\"div\");\n feedback.id = `wh-feedback-${q.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 normalizeText(text) {\n return text.toLowerCase().replace(\/\\s+\/g, \" \").trim();\n}\n\nfunction checkAnswers() {\n \/* Timeline *\/\n let tlScore = 0;\n let tlTotal = timelineItems.length;\n let tlUnanswered = 0;\n\n timelineItems.forEach((item) => {\n const input = document.getElementById(item.id);\n const feedback = document.getElementById(`tl-feedback-${item.id}`);\n if (!input || !feedback) return;\n\n const userAns = input.value.trim();\n const norm = normalizeText(userAns);\n\n if (!norm) {\n tlUnanswered++;\n feedback.textContent = \"Please complete this part of the timeline.\";\n feedback.style.color = \"#856404\";\n input.style.borderColor = \"#ffeeba\";\n return;\n }\n\n if (item.check(norm)) {\n tlScore++;\n feedback.textContent = \"Correct.\";\n feedback.style.color = \"#155724\";\n input.style.borderColor = \"#28a745\";\n } else {\n feedback.textContent = \"Not quite. Check the biography again.\";\n feedback.style.color = \"#721c24\";\n input.style.borderColor = \"#dc3545\";\n }\n });\n\n \/* WH questions *\/\n let whScore = 0;\n let whTotal = whQuestions.length;\n let whUnanswered = 0;\n\n whQuestions.forEach((q) => {\n const input = document.getElementById(`wh-q${q.id}`);\n const feedback = document.getElementById(`wh-feedback-${q.id}`);\n if (!input || !feedback) return;\n\n const userAns = input.value.trim();\n const norm = normalizeText(userAns);\n\n if (!norm) {\n whUnanswered++;\n feedback.textContent = \"Please answer this question.\";\n feedback.style.color = \"#856404\";\n input.style.borderColor = \"#ffeeba\";\n return;\n }\n\n if (q.check(norm)) {\n whScore++;\n feedback.textContent = \"Correct. \" + q.modelAnswer;\n feedback.style.color = \"#155724\";\n input.style.borderColor = \"#28a745\";\n } else {\n feedback.textContent = \"Not quite. \" + q.modelAnswer;\n feedback.style.color = \"#721c24\";\n input.style.borderColor = \"#dc3545\";\n }\n });\n\n const resultMessage =\n `Timeline: You got ${tlScore} out of ${tlTotal} correct.` +\n (tlUnanswered > 0 ? ` (${tlUnanswered} item(s) not answered.) ` : \" \") +\n `Questions: You got ${whScore} out of ${whTotal} correct.` +\n (whUnanswered > 0 ? ` (${whUnanswered} question(s) not answered.)` : \"\");\n\n appendMessage(resultMessage, \"bot\");\n\n const totalScore = tlScore + whScore;\n const totalQuestions = tlTotal + whTotal;\n let extra;\n\n if (totalScore === totalQuestions && tlUnanswered === 0 && whUnanswered === 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":280,"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-399","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\/399","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=399"}],"version-history":[{"count":1,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/posts\/399\/revisions"}],"predecessor-version":[{"id":400,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/posts\/399\/revisions\/400"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/media\/280"}],"wp:attachment":[{"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/media?parent=399"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/categories?post=399"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/tags?post=399"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":399,"date":"2025-12-03T06:47:41","date_gmt":"2025-12-03T06:47:41","guid":{"rendered":"https:\/\/i-cte.org\/robot\/?p=399"},"modified":"2025-12-03T06:47:41","modified_gmt":"2025-12-03T06:47:41","slug":"life-stories-reading-comprehension","status":"publish","type":"post","link":"https:\/\/i-cte.org\/robot\/life-stories-reading-comprehension\/","title":{"rendered":"Life Stories – 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 Life Stories – 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\/life-stories-conversation\/\">Conversation<\/a>\n<a href=\"https:\/\/i-cte.org\/robot\/life-stories-vocabulary\/\">Vocabulary<\/a>\n<a href=\"https:\/\/i-cte.org\/robot\/life-stories-real-life\/\">Real Life<\/a>\n<a href=\"https:\/\/i-cte.org\/robot\/life-stories-describing-pictures\/\">Describing Pictures<\/a>\n<a href=\"https:\/\/i-cte.org\/robot\/life-stories-reading-comprehension\/\">Reading<\/a>\n<a href=\"https:\/\/i-cte.org\/robot\/life-stories-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-27-23.48.57-A-highly-realistic-human-like-female-robot-with-a-natural-human-skin-appearance-expressive-eyes-and-a-warm-friendly-smile.-She-is-teaching-English.webp\" alt=\"Biography of Kate Middleton with a photo\">\n <div class=\"sentence-text\">\n Read the biography of Kate Middleton\u2019s early life. Complete the timeline and answer the questions.\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>Life Stories – 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\/life-stories-conversation\/\">Conversation<\/a>\n<a href=\"https:\/\/i-cte.org\/robot\/life-stories-vocabulary\/\">Vocabulary<\/a>\n<a href=\"https:\/\/i-cte.org\/robot\/life-stories-real-life\/\">Real Life<\/a>\n<a href=\"https:\/\/i-cte.org\/robot\/life-stories-describing-pictures\/\">Describing Pictures<\/a>\n<a href=\"https:\/\/i-cte.org\/robot\/life-stories-reading-comprehension\/\">Reading<\/a>\n<a href=\"https:\/\/i-cte.org\/robot\/life-stories-listening\/\">Listening<\/a>\n <\/div>\n\n<script>\n\/* ============================\n Kate Middleton Biography \u2013 Intensive reading\n ============================ *\/\n\nconst bioText = `Catherine Elizabeth Middleton was born on January 9, 1982, in England. Her father, Michael, worked for an airline and her mother, Carole, was a flight attendant. In 1984, she moved with her family to Amman in Jordan because her father got a job there. Catherine, or \u201cKate\u201d as everyone called her, went to a school there from the age of three.\n\nIn September 1986, the Middletons returned to their home in the village of Bucklebury, England. This is where Kate grew up. In 1987, her mother started a mail-order company selling party items. The company became very successful and the family became multi-millionaires.\n\nKate studied hard at school and played a lot of sports. She especially enjoyed hockey and tennis. She left school in July 2000 and took a \u201cgap year\u201d, spending time in Italy and Chile. In 2001, Kate went to the University of St. Andrews in Scotland to study History of Art. It was here that she first met Prince William. They became friends and soon fell in love.\n\nShe graduated in 2005 and worked for her parents\u2019 company, Party Pieces. She also had a part-time job in London at a clothing company. Kate and William got engaged in October 2010, while they were on vacation in Kenya, and on April 29, 2011, they were married at Westminster Abbey in London. Over two billion people around the world watched the wedding. Her official title became the Duchess of Cambridge, but everyone still calls her Kate.\n\nKate and William have two children. George was born on July 22, 2013 and Charlotte on May 2, 2015.`;\n\n\/* Part 1 \u2013 timeline items *\/\nconst timelineItems = [\n {\n id: \"y1982\",\n label: \"1982 \u2013 She was ______.\",\n check: (a) => a.includes(\"born\")\n },\n {\n id: \"y1984\",\n label: \"1984 \u2013 She moved with her family to ______.\",\n check: (a) => a.includes(\"amman\") || a.includes(\"jordan\")\n },\n {\n id: \"y1986\",\n label: \"1986 \u2013 Her family returned to ______.\",\n check: (a) => a.includes(\"bucklebury\")\n },\n {\n id: \"y2000\",\n label: \"2000 \u2013 She left ______.\",\n check: (a) => a.includes(\"school\")\n },\n {\n id: \"y2000gap\",\n label: \"2000\u201301 \u2013 She travelled to ______ and ______.\",\n check: (a) => a.includes(\"italy\") && a.includes(\"chile\")\n },\n {\n id: \"y2001\",\n label: \"2001 \u2013 She went to the University of ______.\",\n check: (a) => a.includes(\"andrews\")\n },\n {\n id: \"y2005\",\n label: \"2005 \u2013 She graduated with a degree in ______.\",\n check: (a) => a.includes(\"history of art\") || (a.includes(\"art\") && a.includes(\"history\"))\n },\n {\n id: \"y2010\",\n label: \"2010 \u2013 She and William got ______.\",\n check: (a) => a.includes(\"engaged\")\n },\n {\n id: \"y2011\",\n label: \"2011 \u2013 They got ______.\",\n check: (a) => a.includes(\"married\")\n },\n {\n id: \"y2013\",\n label: \"2013 \u2013 Their son ______ was born.\",\n check: (a) => a.includes(\"george\")\n }\n];\n\n\/* Part 2 \u2013 WH questions *\/\nconst whQuestions = [\n {\n id: 1,\n question: \"Why did Kate\u2019s family move to Jordan?\",\n modelAnswer: \"Because her father got a job there.\",\n check: (a) => a.includes(\"job\") && (a.includes(\"father\") || a.includes(\"dad\"))\n },\n {\n id: 2,\n question: \"What were Kate\u2019s favorite sports at school?\",\n modelAnswer: \"Hockey and tennis.\",\n check: (a) => a.includes(\"hockey\") && a.includes(\"tennis\")\n },\n {\n id: 3,\n question: \"Where did she meet Prince William?\",\n modelAnswer: \"At the University of St. Andrews in Scotland.\",\n check: (a) => a.includes(\"university\") && a.includes(\"andrews\")\n },\n {\n id: 4,\n question: \"How old was Kate when she got married?\",\n modelAnswer: \"She was 29 years old.\",\n check: (a) => a.includes(\"29\")\n },\n {\n id: 5,\n question: \"How many people watched the wedding?\",\n modelAnswer: \"Over two billion people watched it.\",\n check: (a) => a.includes(\"two billion\") || a.includes(\"2 billion\")\n }\n];\n\nconst summaryMessages = [\n \"Nice reading! Keep going.\",\n \"Good job. Read the biography 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 text.\",\n \"Very good! Your answers match the biography.\"\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 showBioOnLeft();\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\/* ========== BIO + TASKS UI ========== *\/\n\nfunction showBioOnLeft() {\n clearWordBox();\n addSentenceToBox(\"Kate Middleton\u2019s biography:\");\n addSentenceToBox(\"\");\n\n bioText.split(\"\\n\").forEach((line) => addSentenceToBox(line));\n\n const greeting =\n \"Read Kate Middleton\u2019s biography carefully. Then complete the timeline and answer the questions.\";\n\n appendMessage(greeting, \"bot\");\n if (speechSynthesisSupported) {\n showSynthesisLoader(true);\n sayText(greeting, \"en-US\")\n .then(() => sayText(bioText, \"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 Timeline *\/\n const part1Title = document.createElement(\"h3\");\n part1Title.textContent = \"Part 1 \u2013 Complete the timeline.\";\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 = \"Write short answers (one or two words).\";\n chatContainer.appendChild(part1Instr);\n\n timelineItems.forEach((item, index) => {\n const block = document.createElement(\"div\");\n block.style.marginBottom = \"8px\";\n\n const label = document.createElement(\"label\");\n label.htmlFor = item.id;\n label.textContent = (index + 1) + \". \" + item.label;\n block.appendChild(label);\n\n const input = document.createElement(\"input\");\n input.type = \"text\";\n input.id = item.id;\n input.style.width = \"100%\";\n input.style.marginTop = \"4px\";\n input.style.padding = \"4px\";\n input.style.boxSizing = \"border-box\";\n block.appendChild(input);\n\n const feedback = document.createElement(\"div\");\n feedback.id = `tl-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 \/* Part 2 \u2013 Questions *\/\n const part2Title = document.createElement(\"h3\");\n part2Title.textContent = \"Part 2 \u2013 Answer the questions.\";\n part2Title.style.marginTop = \"12px\";\n part2Title.style.fontSize = \"16px\";\n chatContainer.appendChild(part2Title);\n\n const part2Instr = document.createElement(\"p\");\n part2Instr.textContent = \"Write complete answers in the boxes.\";\n chatContainer.appendChild(part2Instr);\n\n whQuestions.forEach((q) => {\n const block = document.createElement(\"div\");\n block.style.marginBottom = \"8px\";\n\n const label = document.createElement(\"label\");\n label.htmlFor = `wh-q${q.id}`;\n label.textContent = `${q.id}. ${q.question}`;\n block.appendChild(label);\n\n const input = document.createElement(\"input\");\n input.type = \"text\";\n input.id = `wh-q${q.id}`;\n input.style.width = \"100%\";\n input.style.marginTop = \"4px\";\n input.style.padding = \"4px\";\n input.style.boxSizing = \"border-box\";\n block.appendChild(input);\n\n const feedback = document.createElement(\"div\");\n feedback.id = `wh-feedback-${q.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 normalizeText(text) {\n return text.toLowerCase().replace(\/\\s+\/g, \" \").trim();\n}\n\nfunction checkAnswers() {\n \/* Timeline *\/\n let tlScore = 0;\n let tlTotal = timelineItems.length;\n let tlUnanswered = 0;\n\n timelineItems.forEach((item) => {\n const input = document.getElementById(item.id);\n const feedback = document.getElementById(`tl-feedback-${item.id}`);\n if (!input || !feedback) return;\n\n const userAns = input.value.trim();\n const norm = normalizeText(userAns);\n\n if (!norm) {\n tlUnanswered++;\n feedback.textContent = \"Please complete this part of the timeline.\";\n feedback.style.color = \"#856404\";\n input.style.borderColor = \"#ffeeba\";\n return;\n }\n\n if (item.check(norm)) {\n tlScore++;\n feedback.textContent = \"Correct.\";\n feedback.style.color = \"#155724\";\n input.style.borderColor = \"#28a745\";\n } else {\n feedback.textContent = \"Not quite. Check the biography again.\";\n feedback.style.color = \"#721c24\";\n input.style.borderColor = \"#dc3545\";\n }\n });\n\n \/* WH questions *\/\n let whScore = 0;\n let whTotal = whQuestions.length;\n let whUnanswered = 0;\n\n whQuestions.forEach((q) => {\n const input = document.getElementById(`wh-q${q.id}`);\n const feedback = document.getElementById(`wh-feedback-${q.id}`);\n if (!input || !feedback) return;\n\n const userAns = input.value.trim();\n const norm = normalizeText(userAns);\n\n if (!norm) {\n whUnanswered++;\n feedback.textContent = \"Please answer this question.\";\n feedback.style.color = \"#856404\";\n input.style.borderColor = \"#ffeeba\";\n return;\n }\n\n if (q.check(norm)) {\n whScore++;\n feedback.textContent = \"Correct. \" + q.modelAnswer;\n feedback.style.color = \"#155724\";\n input.style.borderColor = \"#28a745\";\n } else {\n feedback.textContent = \"Not quite. \" + q.modelAnswer;\n feedback.style.color = \"#721c24\";\n input.style.borderColor = \"#dc3545\";\n }\n });\n\n const resultMessage =\n `Timeline: You got ${tlScore} out of ${tlTotal} correct.` +\n (tlUnanswered > 0 ? ` (${tlUnanswered} item(s) not answered.) ` : \" \") +\n `Questions: You got ${whScore} out of ${whTotal} correct.` +\n (whUnanswered > 0 ? ` (${whUnanswered} question(s) not answered.)` : \"\");\n\n appendMessage(resultMessage, \"bot\");\n\n const totalScore = tlScore + whScore;\n const totalQuestions = tlTotal + whTotal;\n let extra;\n\n if (totalScore === totalQuestions && tlUnanswered === 0 && whUnanswered === 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":280,"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-399","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\/399","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=399"}],"version-history":[{"count":1,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/posts\/399\/revisions"}],"predecessor-version":[{"id":400,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/posts\/399\/revisions\/400"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/media\/280"}],"wp:attachment":[{"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/media?parent=399"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/categories?post=399"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/tags?post=399"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}