Listening \u2013 Steve\u2019s Life in Canada<\/title>\n <style>\n * { box-sizing: border-box; }\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 {\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 {\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 10px;\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: 900px;\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: 260px;\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: 15px;\n font-weight: bold;\n color: #28a745;\n text-align: left;\n max-height: 220px;\n overflow-y: auto;\n }\n\n .audio-player { margin-top: 10px; }\n .audio-player audio { width: 100%; }\n\n .script-button {\n margin-top: 8px;\n background-color: #17a2b8;\n color: #fff;\n border: none;\n border-radius: 5px;\n padding: 8px 12px;\n font-size: 14px;\n font-weight: bold;\n cursor: pointer;\n }\n .script-button:hover,\n .script-button:focus {\n background-color: #138496;\n outline: none;\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: 620px;\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: 440px;\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 .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 { background-color: #dc3545; }\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 @keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n }\n\n .short-answer-input {\n width: 100%;\n max-width: 280px;\n padding: 4px 6px;\n font-size: 13px;\n border-radius: 4px;\n border: 1px solid #ccc;\n }\n\n .mc-question {\n margin-top: 6px;\n padding: 6px;\n border-radius: 4px;\n }\n .mc-options label {\n display: inline-block;\n margin-right: 10px;\n cursor: pointer;\n }\n\n .correct { background-color: #d4edda !important; }\n .incorrect { background-color: #f8d7da !important; }\n .unanswered { background-color: #fff3cd !important; }\n\n @media (orientation: portrait) {\n .image-chat-wrapper { flex-direction: column; }\n .image-container, .chat-container {\n width: 100%;\n max-width: 100%;\n }\n }\n @media (orientation: landscape) and (min-width: 700px) {\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 }\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 \n <img decoding=\"async\" src=\"http:\/\/asiacall.info\/wp-content\/uploads\/2025\/12\/Screenshot-2025-12-03-at-12.04.24-PM.png\"\n alt=\"Steve talking about life in Canada\">\n <div class=\"sentence-text\">\n Listen to Steve talk about life in Canada after moving from Taiwan. Then answer the questions.\n <\/div>\n\n <div class=\"audio-player\">\n \n <audio id=\"steve-audio\" controls>\n <source src=\"\/mnt\/data\/BTP_L1_SB_083.mp3\" type=\"audio\/mpeg\">\n Your browser does not support the audio element.\n <\/audio>\n <\/div>\n\n <button id=\"play-script-btn\" class=\"script-button\" type=\"button\">\n Play Script (Robot Voices)\n <\/button>\n\n <div id=\"word-box\" class=\"word-box\">\n PART 1 \u2013 Answer the questions.<br>\n 1. Did Steve want to move to Canada with his parents?<br>\n 2. Which college did he go to?<br>\n 3. Why did Vancouver seem similar to Taiwan?<br><br>\n PART 2 \u2013 Listen again and circle the correct answers (a, b, or c).\n <\/div>\n <\/div>\n\n <div class=\"chat-container\">\n <div class=\"chat-header\">\n <h2>Listening \u2013 Steve in Canada<\/h2>\n <div class=\"loader\" id=\"synthesis-loader\"><\/div>\n <\/div>\n <div class=\"chat-messages\" id=\"chat-messages\"><\/div>\n <div class=\"chat-input\">\n <div class=\"voice-selection\">\n <label for=\"voice-select\">Choose Voice for Feedback:<\/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 Listening \u2013 Steve in Canada\n ============================ *\/\n\n\/* Script: Interviewer = I, Steve = S *\/\nconst listeningScript = `I: Can you tell me about your life, Steve? Er \u2026 where are you from?\nS: I was born in Taipei, Taiwan \u2013 in 1988 and I grew up there. I loved it. I still have a lot of friends there.\nI: And so \u2026 when did you come to Canada?\nS: My family moved here in 2006, when I was 18.\nI: Why did your family come here?\nS: We had relatives here, and my parents wanted to retire. But I didn\u2019t want to come here! I wanted to stay in Taipei.\nI: So you weren\u2019t very happy!\nS: No!\nI: What did you do when you arrived here?\nS: I went to the University of British Columbia and \u2026 I really liked it. The people were friendly \u2026 the weather was good \u2026 I thought Vancouver was great. I discovered that there\u2019s Chinese TV and radio here, and Chinese newspapers. It didn\u2019t seem very different from home in some ways.\nI: And after you graduated from college, what did you do?\nS: Jo, that\u2019s my girlfriend, and I got married.\nI: Congratulations!\nS: Thanks. Then I got a job at a computer company.\nI: That\u2019s great.\nS: And we had a baby boy, two months ago.\nI: Wow. What a life!`;\n\n\/* PART 1 \u2013 short-answer questions *\/\nconst part1Questions = [\n {\n id: 1,\n text: \"1) Did Steve want to move to Canada with his parents?\",\n keywordSetsCorrect: [[\"no\"], [\"didn't want\"], [\"did not want\"]],\n isYesNo: true,\n expectedYes: false\n },\n {\n id: 2,\n text: \"2) Which college did he go to?\",\n keywordSetsCorrect: [[\"university of british columbia\"], [\"british columbia university\"]]\n },\n {\n id: 3,\n text: \"3) Why did Vancouver seem similar to Taiwan?\",\n keywordSetsCorrect: [\n [\"chinese\", \"tv\"],\n [\"chinese\", \"radio\"],\n [\"chinese\", \"newspapers\"],\n [\"lots of chinese\"],\n [\"many chinese people\"]\n ]\n }\n];\n\n\/* PART 2 \u2013 multiple choice *\/\nconst part2Questions = [\n {\n id: 1,\n text: \"1) When was Steve born?\",\n options: {\n a: \"1978\",\n b: \"1988\",\n c: \"1998\"\n },\n correct: \"b\"\n },\n {\n id: 2,\n text: \"2) How old was he when his family moved to Canada?\",\n options: {\n a: \"19\",\n b: \"20\",\n c: \"18\"\n },\n correct: \"c\"\n },\n {\n id: 3,\n text: \"3) Why did his parents want to move there?\",\n options: {\n a: \"to start a new life\",\n b: \"to begin a new business\",\n c: \"to retire\"\n },\n correct: \"c\"\n },\n {\n id: 4,\n text: \"4) What did he do after he graduated from college?\",\n options: {\n a: \"he returned to Taiwan\",\n b: \"he went on vacation\",\n c: \"he got married\"\n },\n correct: \"c\"\n },\n {\n id: 5,\n text: \"5) Where did he get a job?\",\n options: {\n a: \"at a college\",\n b: \"at a Chinese radio station\",\n c: \"at a computer company\"\n },\n correct: \"c\"\n },\n {\n id: 6,\n text: \"6) What happened two months ago?\",\n options: {\n a: \"he got a new job\",\n b: \"he had a son\",\n c: \"he got a divorce\"\n },\n correct: \"b\"\n }\n];\n\nconst summaryMessages = [\n \"Nice listening! Keep going.\",\n \"Good job. Listen 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 Steve\u2019s story.\",\n \"Very good! Your answers match the audio quite well.\"\n];\n\n\/* Speech synthesis *\/\nconst speechSynthesisSupported = \"speechSynthesis\" in window;\nlet voices = [];\nlet selectedVoice = null;\nlet interviewerVoice = null;\nlet steveVoice = 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\/* ========== INIT ========== *\/\n\nfunction initialize() {\n loadVoices();\n\n if (!speechSynthesisSupported) {\n appendMessage(\"Sorry, your browser does not support speech synthesis.\", \"bot\");\n }\n\n document.getElementById(\"start-btn\").onclick = checkAnswers;\n document.getElementById(\"stop-btn\").onclick = stopSpeaking;\n document.getElementById(\"play-script-btn\").onclick = playScript;\n\n buildTasks();\n\n const intro =\n \"First, listen to Steve talk about moving from Taiwan to Canada. Then listen again and answer the questions.\";\n appendMessage(intro, \"bot\");\n if (speechSynthesisSupported) {\n showSynthesisLoader(true);\n sayText(intro, \"en-US\").then(() => showSynthesisLoader(false));\n }\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 chooseDialogueVoices(filteredVoices) {\n interviewerVoice =\n filteredVoices.find(v => \/male\/i.test(v.name)) ||\n filteredVoices.find(v => \/UK English Male\/i.test(v.name)) ||\n filteredVoices[0];\n\n steveVoice =\n filteredVoices.find(v => v !== interviewerVoice && \/female\/i.test(v.name)) ||\n filteredVoices.find(v => v !== interviewerVoice) ||\n interviewerVoice;\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(v =>\n desiredVoiceNames.includes(v.name) || v.lang.startsWith(\"en-\")\n );\n\n if (filteredVoices.length === 0) {\n const option = document.createElement(\"option\");\n option.value = \"\";\n option.textContent = \"Default browser voice\";\n voiceSelect.appendChild(option);\n voiceSelect.disabled = true;\n return;\n }\n\n filteredVoices.forEach((v, index) => {\n const option = document.createElement(\"option\");\n option.value = index;\n option.textContent = `${v.name} (${v.lang})`;\n voiceSelect.appendChild(option);\n });\n\n voiceSelect.selectedIndex = 0;\n selectedVoice = filteredVoices[0];\n\n chooseDialogueVoices(filteredVoices);\n\n voiceSelect.onchange = () => {\n const idx = voiceSelect.value;\n selectedVoice = filteredVoices[idx];\n };\n}\n\n\/* ========== BUILD UI ========== *\/\n\nfunction buildTasks() {\n const chat = document.getElementById(\"chat-messages\");\n chat.innerHTML = \"\";\n\n \/\/ PART 1\n const p1Title = document.createElement(\"h3\");\n p1Title.textContent = \"PART 1 \u2013 Answer the questions.\";\n p1Title.style.margin = \"4px 0\";\n p1Title.style.fontSize = \"16px\";\n chat.appendChild(p1Title);\n\n part1Questions.forEach(q => {\n const wrapper = document.createElement(\"div\");\n wrapper.style.marginBottom = \"6px\";\n wrapper.id = `p1-q${q.id}`;\n\n const label = document.createElement(\"label\");\n label.textContent = q.text;\n label.style.display = \"block\";\n label.style.marginBottom = \"2px\";\n\n const input = document.createElement(\"input\");\n input.type = \"text\";\n input.className = \"short-answer-input\";\n input.id = `p1-input-${q.id}`;\n\n wrapper.appendChild(label);\n wrapper.appendChild(input);\n chat.appendChild(wrapper);\n });\n\n \/\/ PART 2\n const p2Title = document.createElement(\"h3\");\n p2Title.textContent = \"PART 2 \u2013 Circle the correct answers (a, b, or c).\";\n p2Title.style.marginTop = \"10px\";\n p2Title.style.fontSize = \"16px\";\n chat.appendChild(p2Title);\n\n part2Questions.forEach(q => {\n const block = document.createElement(\"div\");\n block.className = \"mc-question\";\n block.id = `p2-q${q.id}`;\n\n const qText = document.createElement(\"div\");\n qText.textContent = q.text;\n block.appendChild(qText);\n\n const optionsDiv = document.createElement(\"div\");\n optionsDiv.className = \"mc-options\";\n\n [\"a\", \"b\", \"c\"].forEach(letter => {\n const optLabel = document.createElement(\"label\");\n\n const radio = document.createElement(\"input\");\n radio.type = \"radio\";\n radio.name = `p2-${q.id}`;\n radio.value = letter;\n radio.style.marginRight = \"4px\";\n\n optLabel.appendChild(radio);\n optLabel.appendChild(document.createTextNode(` ${letter}) ${q.options[letter]}`));\n optionsDiv.appendChild(optLabel);\n });\n\n block.appendChild(optionsDiv);\n chat.appendChild(block);\n });\n}\n\n\/* ========== CHECK ANSWERS ========== *\/\n\nfunction matchesKeywordSets(answer, keywordSets) {\n const text = answer.toLowerCase();\n if (!text) return false;\n return keywordSets.some(set =>\n set.every(kw => text.includes(kw.toLowerCase()))\n );\n}\n\nfunction checkAnswers() {\n let score = 0;\n let unanswered = 0;\n const totalPart1 = part1Questions.length;\n const totalPart2 = part2Questions.length;\n\n \/\/ reset styles\n part1Questions.forEach(q => {\n const wrapper = document.getElementById(`p1-q${q.id}`);\n wrapper.classList.remove(\"correct\",\"incorrect\",\"unanswered\");\n });\n part2Questions.forEach(q => {\n const block = document.getElementById(`p2-q${q.id}`);\n block.classList.remove(\"correct\",\"incorrect\",\"unanswered\");\n });\n\n \/\/ PART 1\n part1Questions.forEach(q => {\n const input = document.getElementById(`p1-input-${q.id}`);\n const wrapper = document.getElementById(`p1-q${q.id}`);\n const value = input.value.trim();\n if (!value) {\n unanswered++;\n wrapper.classList.add(\"unanswered\");\n return;\n }\n\n let correct = matchesKeywordSets(value, q.keywordSetsCorrect);\n\n \/\/ simple Yes\/No override if defined\n if (q.isYesNo) {\n const text = value.toLowerCase();\n const isYes = text.startsWith(\"y\");\n const isNo = text.startsWith(\"n\");\n if (isYes || isNo) {\n correct = (!q.expectedYes && isNo) || (q.expectedYes && isYes);\n }\n }\n\n if (correct) {\n score++;\n wrapper.classList.add(\"correct\");\n } else {\n wrapper.classList.add(\"incorrect\");\n }\n });\n\n \/\/ PART 2\n part2Questions.forEach(q => {\n const block = document.getElementById(`p2-q${q.id}`);\n const selected = document.querySelector(`input[name=\"p2-${q.id}\"]:checked`);\n\n if (!selected) {\n unanswered++;\n block.classList.add(\"unanswered\");\n return;\n }\n\n if (selected.value === q.correct) {\n score++;\n block.classList.add(\"correct\");\n } else {\n block.classList.add(\"incorrect\");\n }\n });\n\n const totalItems = totalPart1 + totalPart2;\n const resultMessage =\n `You got ${score} out of ${totalItems} items correct.` +\n (unanswered > 0 ? ` (${unanswered} item(s) not answered.)` : \"\");\n\n appendMessage(resultMessage, \"bot\");\n\n let extra;\n if (score === totalItems && unanswered === 0) {\n extra = \"Perfect score! \" + positiveMessages[Math.floor(Math.random() * positiveMessages.length)];\n } else if (score >= Math.round(totalItems * 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\/* ========== SCRIPT PLAYER WITH TWO VOICES (I & S) ========== *\/\n\nfunction playScript() {\n if (!speechSynthesisSupported) {\n appendMessage(\"Your browser cannot play the script with robot voices.\", \"bot\");\n return;\n }\n if (!interviewerVoice || !steveVoice) {\n appendMessage(\"Voices are still loading. Please wait a moment and try again.\", \"bot\");\n loadVoices();\n return;\n }\n\n stopSpeaking();\n showSynthesisLoader(true);\n\n const lines = listeningScript.split(\"\\n\").map(l => l.trim()).filter(l => l.length > 0);\n\n function speakLine(index) {\n if (index >= lines.length) {\n showSynthesisLoader(false);\n return;\n }\n\n let line = lines[index];\n let voiceForLine = selectedVoice || voices[0];\n let text = line;\n\n if (line.startsWith(\"I:\")) {\n text = line.replace(\/^I:\\s*\/, \"\");\n voiceForLine = interviewerVoice || voiceForLine;\n } else if (line.startsWith(\"S:\")) {\n text = line.replace(\/^S:\\s*\/, \"\");\n voiceForLine = steveVoice || voiceForLine;\n }\n\n const utterance = new SpeechSynthesisUtterance(text);\n utterance.lang = \"en-US\";\n utterance.rate = 1.0;\n utterance.pitch = 1.0;\n utterance.voice = voiceForLine;\n\n utterance.onend = () => speakLine(index + 1);\n utterance.onerror = () => speakLine(index + 1);\n\n window.speechSynthesis.speak(utterance);\n }\n\n speakLine(0);\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 if (selectedVoice) utterance.voice = selectedVoice;\n\n utterance.onend = () => resolve();\n utterance.onerror = () => resolve();\n\n window.speechSynthesis.speak(utterance);\n });\n}\n\n\/* ========== UI HELPERS ========== *\/\n\nfunction appendMessage(text, sender) {\n const container = document.getElementById(\"chat-messages\");\n const el = document.createElement(\"div\");\n el.classList.add(\"message\", \"bot-message\");\n el.innerText = text;\n container.appendChild(el);\n container.scrollTop = container.scrollHeight;\n}\n\nfunction showSynthesisLoader(show) {\n const loader = document.getElementById(\"synthesis-loader\");\n loader.style.display = show ? \"inline-block\" : \"none\";\n if (show) loader.style.borderTop = \"4px solid #17a2b8\";\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":189,"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-401","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\/401","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=401"}],"version-history":[{"count":1,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/posts\/401\/revisions"}],"predecessor-version":[{"id":402,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/posts\/401\/revisions\/402"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/media\/189"}],"wp:attachment":[{"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/media?parent=401"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/categories?post=401"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/tags?post=401"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":401,"date":"2025-12-03T06:49:37","date_gmt":"2025-12-03T06:49:37","guid":{"rendered":"https:\/\/i-cte.org\/robot\/?p=401"},"modified":"2025-12-03T06:49:37","modified_gmt":"2025-12-03T06:49:37","slug":"life-stories-listening","status":"publish","type":"post","link":"https:\/\/i-cte.org\/robot\/life-stories-listening\/","title":{"rendered":"Life Stories – Listening"},"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 Listening \u2013 Steve\u2019s Life in Canada<\/title>\n <style>\n * { box-sizing: border-box; }\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 {\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 {\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 10px;\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: 900px;\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: 260px;\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: 15px;\n font-weight: bold;\n color: #28a745;\n text-align: left;\n max-height: 220px;\n overflow-y: auto;\n }\n\n .audio-player { margin-top: 10px; }\n .audio-player audio { width: 100%; }\n\n .script-button {\n margin-top: 8px;\n background-color: #17a2b8;\n color: #fff;\n border: none;\n border-radius: 5px;\n padding: 8px 12px;\n font-size: 14px;\n font-weight: bold;\n cursor: pointer;\n }\n .script-button:hover,\n .script-button:focus {\n background-color: #138496;\n outline: none;\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: 620px;\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: 440px;\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 .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 { background-color: #dc3545; }\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 @keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n }\n\n .short-answer-input {\n width: 100%;\n max-width: 280px;\n padding: 4px 6px;\n font-size: 13px;\n border-radius: 4px;\n border: 1px solid #ccc;\n }\n\n .mc-question {\n margin-top: 6px;\n padding: 6px;\n border-radius: 4px;\n }\n .mc-options label {\n display: inline-block;\n margin-right: 10px;\n cursor: pointer;\n }\n\n .correct { background-color: #d4edda !important; }\n .incorrect { background-color: #f8d7da !important; }\n .unanswered { background-color: #fff3cd !important; }\n\n @media (orientation: portrait) {\n .image-chat-wrapper { flex-direction: column; }\n .image-container, .chat-container {\n width: 100%;\n max-width: 100%;\n }\n }\n @media (orientation: landscape) and (min-width: 700px) {\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 }\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 \n <img decoding=\"async\" src=\"http:\/\/asiacall.info\/wp-content\/uploads\/2025\/12\/Screenshot-2025-12-03-at-12.04.24-PM.png\"\n alt=\"Steve talking about life in Canada\">\n <div class=\"sentence-text\">\n Listen to Steve talk about life in Canada after moving from Taiwan. Then answer the questions.\n <\/div>\n\n <div class=\"audio-player\">\n \n <audio id=\"steve-audio\" controls>\n <source src=\"\/mnt\/data\/BTP_L1_SB_083.mp3\" type=\"audio\/mpeg\">\n Your browser does not support the audio element.\n <\/audio>\n <\/div>\n\n <button id=\"play-script-btn\" class=\"script-button\" type=\"button\">\n Play Script (Robot Voices)\n <\/button>\n\n <div id=\"word-box\" class=\"word-box\">\n PART 1 \u2013 Answer the questions.<br>\n 1. Did Steve want to move to Canada with his parents?<br>\n 2. Which college did he go to?<br>\n 3. Why did Vancouver seem similar to Taiwan?<br><br>\n PART 2 \u2013 Listen again and circle the correct answers (a, b, or c).\n <\/div>\n <\/div>\n\n <div class=\"chat-container\">\n <div class=\"chat-header\">\n <h2>Listening \u2013 Steve in Canada<\/h2>\n <div class=\"loader\" id=\"synthesis-loader\"><\/div>\n <\/div>\n <div class=\"chat-messages\" id=\"chat-messages\"><\/div>\n <div class=\"chat-input\">\n <div class=\"voice-selection\">\n <label for=\"voice-select\">Choose Voice for Feedback:<\/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 Listening \u2013 Steve in Canada\n ============================ *\/\n\n\/* Script: Interviewer = I, Steve = S *\/\nconst listeningScript = `I: Can you tell me about your life, Steve? Er \u2026 where are you from?\nS: I was born in Taipei, Taiwan \u2013 in 1988 and I grew up there. I loved it. I still have a lot of friends there.\nI: And so \u2026 when did you come to Canada?\nS: My family moved here in 2006, when I was 18.\nI: Why did your family come here?\nS: We had relatives here, and my parents wanted to retire. But I didn\u2019t want to come here! I wanted to stay in Taipei.\nI: So you weren\u2019t very happy!\nS: No!\nI: What did you do when you arrived here?\nS: I went to the University of British Columbia and \u2026 I really liked it. The people were friendly \u2026 the weather was good \u2026 I thought Vancouver was great. I discovered that there\u2019s Chinese TV and radio here, and Chinese newspapers. It didn\u2019t seem very different from home in some ways.\nI: And after you graduated from college, what did you do?\nS: Jo, that\u2019s my girlfriend, and I got married.\nI: Congratulations!\nS: Thanks. Then I got a job at a computer company.\nI: That\u2019s great.\nS: And we had a baby boy, two months ago.\nI: Wow. What a life!`;\n\n\/* PART 1 \u2013 short-answer questions *\/\nconst part1Questions = [\n {\n id: 1,\n text: \"1) Did Steve want to move to Canada with his parents?\",\n keywordSetsCorrect: [[\"no\"], [\"didn't want\"], [\"did not want\"]],\n isYesNo: true,\n expectedYes: false\n },\n {\n id: 2,\n text: \"2) Which college did he go to?\",\n keywordSetsCorrect: [[\"university of british columbia\"], [\"british columbia university\"]]\n },\n {\n id: 3,\n text: \"3) Why did Vancouver seem similar to Taiwan?\",\n keywordSetsCorrect: [\n [\"chinese\", \"tv\"],\n [\"chinese\", \"radio\"],\n [\"chinese\", \"newspapers\"],\n [\"lots of chinese\"],\n [\"many chinese people\"]\n ]\n }\n];\n\n\/* PART 2 \u2013 multiple choice *\/\nconst part2Questions = [\n {\n id: 1,\n text: \"1) When was Steve born?\",\n options: {\n a: \"1978\",\n b: \"1988\",\n c: \"1998\"\n },\n correct: \"b\"\n },\n {\n id: 2,\n text: \"2) How old was he when his family moved to Canada?\",\n options: {\n a: \"19\",\n b: \"20\",\n c: \"18\"\n },\n correct: \"c\"\n },\n {\n id: 3,\n text: \"3) Why did his parents want to move there?\",\n options: {\n a: \"to start a new life\",\n b: \"to begin a new business\",\n c: \"to retire\"\n },\n correct: \"c\"\n },\n {\n id: 4,\n text: \"4) What did he do after he graduated from college?\",\n options: {\n a: \"he returned to Taiwan\",\n b: \"he went on vacation\",\n c: \"he got married\"\n },\n correct: \"c\"\n },\n {\n id: 5,\n text: \"5) Where did he get a job?\",\n options: {\n a: \"at a college\",\n b: \"at a Chinese radio station\",\n c: \"at a computer company\"\n },\n correct: \"c\"\n },\n {\n id: 6,\n text: \"6) What happened two months ago?\",\n options: {\n a: \"he got a new job\",\n b: \"he had a son\",\n c: \"he got a divorce\"\n },\n correct: \"b\"\n }\n];\n\nconst summaryMessages = [\n \"Nice listening! Keep going.\",\n \"Good job. Listen 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 Steve\u2019s story.\",\n \"Very good! Your answers match the audio quite well.\"\n];\n\n\/* Speech synthesis *\/\nconst speechSynthesisSupported = \"speechSynthesis\" in window;\nlet voices = [];\nlet selectedVoice = null;\nlet interviewerVoice = null;\nlet steveVoice = 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\/* ========== INIT ========== *\/\n\nfunction initialize() {\n loadVoices();\n\n if (!speechSynthesisSupported) {\n appendMessage(\"Sorry, your browser does not support speech synthesis.\", \"bot\");\n }\n\n document.getElementById(\"start-btn\").onclick = checkAnswers;\n document.getElementById(\"stop-btn\").onclick = stopSpeaking;\n document.getElementById(\"play-script-btn\").onclick = playScript;\n\n buildTasks();\n\n const intro =\n \"First, listen to Steve talk about moving from Taiwan to Canada. Then listen again and answer the questions.\";\n appendMessage(intro, \"bot\");\n if (speechSynthesisSupported) {\n showSynthesisLoader(true);\n sayText(intro, \"en-US\").then(() => showSynthesisLoader(false));\n }\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 chooseDialogueVoices(filteredVoices) {\n interviewerVoice =\n filteredVoices.find(v => \/male\/i.test(v.name)) ||\n filteredVoices.find(v => \/UK English Male\/i.test(v.name)) ||\n filteredVoices[0];\n\n steveVoice =\n filteredVoices.find(v => v !== interviewerVoice && \/female\/i.test(v.name)) ||\n filteredVoices.find(v => v !== interviewerVoice) ||\n interviewerVoice;\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(v =>\n desiredVoiceNames.includes(v.name) || v.lang.startsWith(\"en-\")\n );\n\n if (filteredVoices.length === 0) {\n const option = document.createElement(\"option\");\n option.value = \"\";\n option.textContent = \"Default browser voice\";\n voiceSelect.appendChild(option);\n voiceSelect.disabled = true;\n return;\n }\n\n filteredVoices.forEach((v, index) => {\n const option = document.createElement(\"option\");\n option.value = index;\n option.textContent = `${v.name} (${v.lang})`;\n voiceSelect.appendChild(option);\n });\n\n voiceSelect.selectedIndex = 0;\n selectedVoice = filteredVoices[0];\n\n chooseDialogueVoices(filteredVoices);\n\n voiceSelect.onchange = () => {\n const idx = voiceSelect.value;\n selectedVoice = filteredVoices[idx];\n };\n}\n\n\/* ========== BUILD UI ========== *\/\n\nfunction buildTasks() {\n const chat = document.getElementById(\"chat-messages\");\n chat.innerHTML = \"\";\n\n \/\/ PART 1\n const p1Title = document.createElement(\"h3\");\n p1Title.textContent = \"PART 1 \u2013 Answer the questions.\";\n p1Title.style.margin = \"4px 0\";\n p1Title.style.fontSize = \"16px\";\n chat.appendChild(p1Title);\n\n part1Questions.forEach(q => {\n const wrapper = document.createElement(\"div\");\n wrapper.style.marginBottom = \"6px\";\n wrapper.id = `p1-q${q.id}`;\n\n const label = document.createElement(\"label\");\n label.textContent = q.text;\n label.style.display = \"block\";\n label.style.marginBottom = \"2px\";\n\n const input = document.createElement(\"input\");\n input.type = \"text\";\n input.className = \"short-answer-input\";\n input.id = `p1-input-${q.id}`;\n\n wrapper.appendChild(label);\n wrapper.appendChild(input);\n chat.appendChild(wrapper);\n });\n\n \/\/ PART 2\n const p2Title = document.createElement(\"h3\");\n p2Title.textContent = \"PART 2 \u2013 Circle the correct answers (a, b, or c).\";\n p2Title.style.marginTop = \"10px\";\n p2Title.style.fontSize = \"16px\";\n chat.appendChild(p2Title);\n\n part2Questions.forEach(q => {\n const block = document.createElement(\"div\");\n block.className = \"mc-question\";\n block.id = `p2-q${q.id}`;\n\n const qText = document.createElement(\"div\");\n qText.textContent = q.text;\n block.appendChild(qText);\n\n const optionsDiv = document.createElement(\"div\");\n optionsDiv.className = \"mc-options\";\n\n [\"a\", \"b\", \"c\"].forEach(letter => {\n const optLabel = document.createElement(\"label\");\n\n const radio = document.createElement(\"input\");\n radio.type = \"radio\";\n radio.name = `p2-${q.id}`;\n radio.value = letter;\n radio.style.marginRight = \"4px\";\n\n optLabel.appendChild(radio);\n optLabel.appendChild(document.createTextNode(` ${letter}) ${q.options[letter]}`));\n optionsDiv.appendChild(optLabel);\n });\n\n block.appendChild(optionsDiv);\n chat.appendChild(block);\n });\n}\n\n\/* ========== CHECK ANSWERS ========== *\/\n\nfunction matchesKeywordSets(answer, keywordSets) {\n const text = answer.toLowerCase();\n if (!text) return false;\n return keywordSets.some(set =>\n set.every(kw => text.includes(kw.toLowerCase()))\n );\n}\n\nfunction checkAnswers() {\n let score = 0;\n let unanswered = 0;\n const totalPart1 = part1Questions.length;\n const totalPart2 = part2Questions.length;\n\n \/\/ reset styles\n part1Questions.forEach(q => {\n const wrapper = document.getElementById(`p1-q${q.id}`);\n wrapper.classList.remove(\"correct\",\"incorrect\",\"unanswered\");\n });\n part2Questions.forEach(q => {\n const block = document.getElementById(`p2-q${q.id}`);\n block.classList.remove(\"correct\",\"incorrect\",\"unanswered\");\n });\n\n \/\/ PART 1\n part1Questions.forEach(q => {\n const input = document.getElementById(`p1-input-${q.id}`);\n const wrapper = document.getElementById(`p1-q${q.id}`);\n const value = input.value.trim();\n if (!value) {\n unanswered++;\n wrapper.classList.add(\"unanswered\");\n return;\n }\n\n let correct = matchesKeywordSets(value, q.keywordSetsCorrect);\n\n \/\/ simple Yes\/No override if defined\n if (q.isYesNo) {\n const text = value.toLowerCase();\n const isYes = text.startsWith(\"y\");\n const isNo = text.startsWith(\"n\");\n if (isYes || isNo) {\n correct = (!q.expectedYes && isNo) || (q.expectedYes && isYes);\n }\n }\n\n if (correct) {\n score++;\n wrapper.classList.add(\"correct\");\n } else {\n wrapper.classList.add(\"incorrect\");\n }\n });\n\n \/\/ PART 2\n part2Questions.forEach(q => {\n const block = document.getElementById(`p2-q${q.id}`);\n const selected = document.querySelector(`input[name=\"p2-${q.id}\"]:checked`);\n\n if (!selected) {\n unanswered++;\n block.classList.add(\"unanswered\");\n return;\n }\n\n if (selected.value === q.correct) {\n score++;\n block.classList.add(\"correct\");\n } else {\n block.classList.add(\"incorrect\");\n }\n });\n\n const totalItems = totalPart1 + totalPart2;\n const resultMessage =\n `You got ${score} out of ${totalItems} items correct.` +\n (unanswered > 0 ? ` (${unanswered} item(s) not answered.)` : \"\");\n\n appendMessage(resultMessage, \"bot\");\n\n let extra;\n if (score === totalItems && unanswered === 0) {\n extra = \"Perfect score! \" + positiveMessages[Math.floor(Math.random() * positiveMessages.length)];\n } else if (score >= Math.round(totalItems * 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\/* ========== SCRIPT PLAYER WITH TWO VOICES (I & S) ========== *\/\n\nfunction playScript() {\n if (!speechSynthesisSupported) {\n appendMessage(\"Your browser cannot play the script with robot voices.\", \"bot\");\n return;\n }\n if (!interviewerVoice || !steveVoice) {\n appendMessage(\"Voices are still loading. Please wait a moment and try again.\", \"bot\");\n loadVoices();\n return;\n }\n\n stopSpeaking();\n showSynthesisLoader(true);\n\n const lines = listeningScript.split(\"\\n\").map(l => l.trim()).filter(l => l.length > 0);\n\n function speakLine(index) {\n if (index >= lines.length) {\n showSynthesisLoader(false);\n return;\n }\n\n let line = lines[index];\n let voiceForLine = selectedVoice || voices[0];\n let text = line;\n\n if (line.startsWith(\"I:\")) {\n text = line.replace(\/^I:\\s*\/, \"\");\n voiceForLine = interviewerVoice || voiceForLine;\n } else if (line.startsWith(\"S:\")) {\n text = line.replace(\/^S:\\s*\/, \"\");\n voiceForLine = steveVoice || voiceForLine;\n }\n\n const utterance = new SpeechSynthesisUtterance(text);\n utterance.lang = \"en-US\";\n utterance.rate = 1.0;\n utterance.pitch = 1.0;\n utterance.voice = voiceForLine;\n\n utterance.onend = () => speakLine(index + 1);\n utterance.onerror = () => speakLine(index + 1);\n\n window.speechSynthesis.speak(utterance);\n }\n\n speakLine(0);\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 if (selectedVoice) utterance.voice = selectedVoice;\n\n utterance.onend = () => resolve();\n utterance.onerror = () => resolve();\n\n window.speechSynthesis.speak(utterance);\n });\n}\n\n\/* ========== UI HELPERS ========== *\/\n\nfunction appendMessage(text, sender) {\n const container = document.getElementById(\"chat-messages\");\n const el = document.createElement(\"div\");\n el.classList.add(\"message\", \"bot-message\");\n el.innerText = text;\n container.appendChild(el);\n container.scrollTop = container.scrollHeight;\n}\n\nfunction showSynthesisLoader(show) {\n const loader = document.getElementById(\"synthesis-loader\");\n loader.style.display = show ? \"inline-block\" : \"none\";\n if (show) loader.style.borderTop = \"4px solid #17a2b8\";\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":189,"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-401","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\/401","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=401"}],"version-history":[{"count":1,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/posts\/401\/revisions"}],"predecessor-version":[{"id":402,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/posts\/401\/revisions\/402"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/media\/189"}],"wp:attachment":[{"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/media?parent=401"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/categories?post=401"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/tags?post=401"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}