Last Vacations \u2013 Did and Didn\u2019t Do<\/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: 320px;\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: 260px;\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: 520px;\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\n .chat-messages {\n padding: 12px;\n overflow-y: auto;\n flex: 1;\n background-color: #fff;\n max-height: 320px;\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 flex-wrap: wrap;\n justify-content: center;\n }\n\n .voice-selection {\n margin: 10px 0;\n width: 100%;\n max-width: 100%;\n margin-bottom: 10px;\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 .send-button,\n .stop-button {\n background-color: #17a2b8;\n color: #fff;\n font-weight: bold;\n border: none;\n border-radius: 5px;\n cursor: pointer;\n transition: background-color 0.3s;\n flex: 0 0 calc(50% - 12px);\n max-width: calc(50% - 12px);\n margin: 6px;\n font-size: 18px;\n padding: 14px 0;\n }\n .stop-button { 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 .stop-button:hover,\n .stop-button:focus {\n background-color: #c82333;\n }\n\n @media (max-width: 480px) {\n .send-button,\n .stop-button {\n flex: 0 0 100%;\n max-width: 100%;\n }\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 @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 { max-height: 220px; }\n .chat-header h2 { font-size: 20px; }\n .message { font-size: 15px; }\n }\n\n @media (max-width: 768px) {\n .chat-header h2 { font-size: 16px; }\n .message { font-size: 14px; }\n .word-box { font-size: 15px; }\n .voice-selection select { font-size: 14px; }\n }\n <\/style>\n<\/head>\n<body>\n \n <div class=\"menu\">\n <a href=\"https:\/\/i-cte.org\/robot\/vacation-conversation\/\">Conversation<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/vacation-vocabulary\/\">Vocabulary<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/vacation-real-life\/\">Real Life<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/vacation-describing-pictures\/\">Describing Pictures<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/vacation-reading-comprehension\/\">Reading<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/vacation-listening\/\">Listening<\/a>\n <\/div>\n\n <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\/10.png\"\n alt=\"Naoko, Jos\u00e9, Lance and Tina on their last vacations\">\n <div class=\"sentence-text\">\n Look at the picture. Talk about what Naoko, Jos\u00e9, Lance and Tina did (\u2713) and didn\u2019t do (\u2717) on their last vacations.\n <\/div>\n <div id=\"word-box\" class=\"word-box\"><\/div>\n <\/div>\n\n <div class=\"chat-container\">\n <div class=\"chat-header\">\n <h2>Last Vacations \u2013 Did and Didn\u2019t Do<\/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 (US \/ UK):<\/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=\"Start Lesson\">Start<\/button>\n <button id=\"stop-btn\" class=\"stop-button\" aria-label=\"Stop Lesson\">Stop<\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"menu\">\n <a href=\"https:\/\/i-cte.org\/robot\/vacation-conversation\/\">Conversation<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/vacation-vocabulary\/\">Vocabulary<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/vacation-real-life\/\">Real Life<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/vacation-describing-pictures\/\">Describing Pictures<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/vacation-reading-comprehension\/\">Reading<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/vacation-listening\/\">Listening<\/a>\n <\/div>\n\n<script>\n \/\/ Rounds: each person\u2019s vacation\n const rounds = [\n {\n label: \"Naoko \u2013 Paris\",\n name: \"Naoko\",\n place: \"Paris, France\",\n duration: \"one week\",\n question:\n \"Tell me about Naoko\u2019s last vacation. Where did she go and how long did she stay?\",\n followUp:\n \"Then talk about two things she did and one thing she didn\u2019t do. Use the simple past: She went\u2026, She stayed\u2026, She visited\u2026, She didn\u2019t\u2026.\",\n did: [\n \"visited the Louvre Museum\",\n \"stayed in Paris for a week\",\n \"ate at Michelle\u2019s restaurant\",\n \"went to see the Eiffel Tower\"\n ],\n didnt: [\n \"didn\u2019t visit the old castle\",\n \"didn\u2019t go on a boat tour on the river\"\n ],\n exampleAnswer:\n \"On her last vacation, Naoko went to France. She stayed in Paris for a week. She visited the Louvre Museum and ate at Michelle\u2019s restaurant, but she didn\u2019t visit the old castle.\"\n },\n {\n label: \"Jos\u00e9 \u2013 Vancouver\",\n name: \"Jos\u00e9\",\n place: \"Vancouver, Canada\",\n duration: \"two weeks\",\n question:\n \"Now talk about Jos\u00e9\u2019s vacation. Where did he go and how long did he stay?\",\n followUp:\n \"Say two things he did and one thing he didn\u2019t do. Use: He went\u2026, He stayed\u2026, He went skiing\u2026, He didn\u2019t\u2026.\",\n did: [\n \"went skiing in the mountains\",\n \"went on a boat trip\",\n \"visited the city center\"\n ],\n didnt: [\n \"didn\u2019t stay at home\",\n \"didn\u2019t go to another country\"\n ],\n exampleAnswer:\n \"Jos\u00e9 went to Vancouver in Canada. He stayed there for two weeks. He went skiing in the mountains and took a boat trip, but he didn\u2019t go to another country.\"\n },\n {\n label: \"Lance \u2013 Koh Samui\",\n name: \"Lance\",\n place: \"Koh Samui, Thailand\",\n duration: \"six days\",\n question:\n \"Let\u2019s talk about Lance. Where did he go and how long did he stay?\",\n followUp:\n \"Then talk about two things he did and one thing he didn\u2019t do. Use: He went\u2026, He stayed\u2026, He went snorkeling\u2026, He didn\u2019t\u2026.\",\n did: [\n \"relaxed on the beach\",\n \"went snorkeling in the sea\",\n \"rode an elephant\"\n ],\n didnt: [\n \"didn\u2019t go to a big city\",\n \"didn\u2019t visit a museum\"\n ],\n exampleAnswer:\n \"Lance went to Koh Samui in Thailand. He stayed there for six days. He relaxed on the beach and went snorkeling, but he didn\u2019t visit a museum.\"\n },\n {\n label: \"Tina \u2013 Kyoto\",\n name: \"Tina\",\n place: \"Kyoto, Japan\",\n duration: \"three days\",\n question:\n \"Now tell me about Tina\u2019s vacation. Where did she go and how long did she stay?\",\n followUp:\n \"Say two things she did and one thing she didn\u2019t do. Use: She went\u2026, She stayed\u2026, She visited\u2026, She didn\u2019t\u2026.\",\n did: [\n \"visited temples and shrines\",\n \"took a boat ride on the river\",\n \"went shopping at the market\"\n ],\n didnt: [\n \"didn\u2019t stay for a long time\",\n \"didn\u2019t go to the beach\"\n ],\n exampleAnswer:\n \"Tina went to Kyoto in Japan. She stayed there for three days. She visited temples and took a boat ride, but she didn\u2019t go to the beach.\"\n },\n {\n label: \"Challenge \u2013 True or false\",\n name: \"Challenge\",\n place: \"\",\n duration: \"\",\n question:\n \"Challenge time! Make a true or false sentence about one of these vacations.\",\n followUp:\n \"For example: Jos\u00e9 went to Vancouver for three weeks. Then imagine your partner says: That\u2019s wrong! He went for two weeks. Now make your own sentence.\",\n did: [],\n didnt: [],\n exampleAnswer:\n \"Naoko went to Paris for one week. Jos\u00e9 went to Vancouver for two weeks.\"\n }\n ];\n\n const positiveFeedback = [\n \"Great! You used clear sentences in the simple past.\",\n \"Nice work! Your answer sounds natural.\",\n \"Excellent! You used the place, the time and some activities.\",\n \"Very good. That\u2019s a clear description of the vacation.\",\n \"Fantastic! You used did and didn\u2019t very well.\",\n \"Nice sentence! Your simple past verbs are correct.\"\n ];\n\n const constructiveFeedback = [\n \"Try to use the simple past, for example: went, stayed, visited, didn\u2019t go.\",\n \"Remember to say where the person went and how long they stayed.\",\n \"Can you make a longer answer? Add one more thing they did.\",\n \"Try to use did or didn\u2019t, for example: He didn\u2019t visit the museum.\",\n \"Include one of the green box activities to make your answer clearer.\"\n ];\n\n \/\/ grammar feedback for common mistakes\n const grammarFeedbackPatterns = [\n {\n match: \"didn't went\",\n message: 'Remember: after \"didn\u2019t\" use the base form: \"didn\u2019t go\", not \"didn\u2019t went\".'\n },\n {\n match: \"did not went\",\n message: 'Say: \"did not go\", not \"did not went\".'\n },\n {\n match: \"didn't visited\",\n message: 'Say: \"didn\u2019t visit\", not \"didn\u2019t visited\".'\n },\n {\n match: \"did not visited\",\n message: 'Say: \"did not visit\", not \"did not visited\".'\n },\n {\n match: \"he go to\",\n message: 'For the past, say: \"he went to\", not \"he go to\".'\n },\n {\n match: \"she go to\",\n message: 'For the past, say: \"she went to\", not \"she go to\".'\n }\n ];\n\n const stopKeywords = [\"goodbye\",\"good bye\",\"bye\",\"bye-bye\",\"byebye\"];\n\n let currentRoundIndex = 0;\n let recognition;\n let isLessonActive = false;\n let speechRecognitionActive = false;\n\n const speechSynthesisSupported = \"speechSynthesis\" in window;\n const speechRecognitionSupported = window.SpeechRecognition || window.webkitSpeechRecognition;\n\n let voices = [];\n let selectedVoice = null;\n\n const desiredVoiceNames = [\n \"Google US English\",\n \"Google US English Female\",\n \"Google UK English Male\",\n \"Google UK English Female\"\n ];\n\n function initialize() {\n if (speechSynthesisSupported) {\n loadVoices();\n } else {\n appendMessage(\"Sorry, your browser does not support speech synthesis.\", \"bot\");\n }\n\n fillInitialWordBox();\n\n if (speechSynthesisSupported) {\n setTimeout(greetUser, 500);\n }\n\n if (!speechRecognitionSupported) {\n appendMessage(\"Sorry, your browser does not support speech recognition.\", \"bot\");\n }\n\n document.getElementById(\"start-btn\").onclick = function() {\n if (isLessonActive) return;\n\n if (!speechSynthesisSupported) {\n appendMessage(\"Speech synthesis is not supported in your browser.\", \"bot\");\n return;\n }\n if (!speechRecognitionSupported) {\n appendMessage(\"Speech recognition is not supported in your browser.\", \"bot\");\n return;\n }\n\n isLessonActive = true;\n currentRoundIndex = 0;\n startRound();\n };\n\n document.getElementById(\"stop-btn\").onclick = function() {\n if (recognition && speechRecognitionActive) {\n recognition.stop();\n speechRecognitionActive = false;\n }\n endLesson(true);\n };\n }\n\n function loadVoices() {\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\n function populateVoiceList() {\n const voiceSelect = document.getElementById(\"voice-select\");\n voiceSelect.innerHTML = \"\";\n\n const filteredVoices = voices.filter(v => desiredVoiceNames.includes(v.name));\n\n if (filteredVoices.length === 0) {\n \/\/ Fallback: all English voices, or all voices if none\n const englishVoices = voices.filter(v => v.lang && v.lang.startsWith(\"en\"));\n const list = englishVoices.length ? englishVoices : voices;\n\n list.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 voiceSelect.disabled = list.length === 0;\n selectedVoice = list[0] || null;\n\n voiceSelect.onchange = () => {\n const idx = parseInt(voiceSelect.value, 10);\n selectedVoice = list[idx];\n };\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 voiceSelect.selectedIndex = 0;\n selectedVoice = filteredVoices[0];\n\n voiceSelect.onchange = () => {\n const idx = parseInt(voiceSelect.value, 10);\n selectedVoice = filteredVoices[idx];\n };\n }\n\n function fillInitialWordBox() {\n clearWordBox();\n addSentenceToBox(\"Useful language for last vacations:\");\n addSentenceToBox(\"\u2022 On his \/ her last vacation, \u2026 went to \u2026\");\n addSentenceToBox(\"\u2022 He \/ She stayed there for \u2026 days \/ weeks.\");\n addSentenceToBox(\"\u2022 He \/ She visited \u2026\");\n addSentenceToBox(\"\u2022 He \/ She went \u2026\");\n addSentenceToBox(\"\u2022 He \/ She didn\u2019t visit \u2026\");\n addSentenceToBox(\"\u2022 He \/ She didn\u2019t go \u2026\");\n addSentenceToBox(\"Challenge: Make true or false sentences, for example:\");\n addSentenceToBox(\"\u2022 Jos\u00e9 went to Vancouver for three weeks.\");\n addSentenceToBox(\"\u2022 That\u2019s wrong! He went for two weeks.\");\n }\n\n function greetUser() {\n const greeting =\n \"Hello! In this activity we will talk about last vacations. \" +\n \"Look at Naoko, Jos\u00e9, Lance and Tina. Say where they went, how long they stayed, \" +\n \"what they did and what they didn\u2019t do. Click Start to begin.\";\n appendMessage(greeting, \"bot\");\n showSynthesisLoader(true);\n sayText(greeting, \"en-US\").then(() => showSynthesisLoader(false));\n }\n\n function startRound() {\n if (!isLessonActive) return;\n\n if (currentRoundIndex >= rounds.length) {\n endLesson(false);\n return;\n }\n\n const round = rounds[currentRoundIndex];\n\n clearWordBox();\n addSentenceToBox(round.label);\n if (round.place) addSentenceToBox(\"Place: \" + round.place);\n if (round.duration) addSentenceToBox(\"Time: \" + round.duration);\n addSentenceToBox(\"Useful ideas (did):\");\n round.did.forEach(v => addSentenceToBox(\"\u2022 \" + v));\n if (round.didt && round.didt.length > 0) {\n \/\/ (not used, but kept in case)\n }\n if (round.diddnt && round.diddnt.length > 0) {\n \/\/ (not used)\n }\n if (round.diddnt) {\n \/\/ nothing\n }\n if (round.dont) {\n \/\/ nothing\n }\n if (round.didnt && round.didnt.length > 0) {\n addSentenceToBox(\"Useful ideas (didn\u2019t):\");\n round.didnt.forEach(v => addSentenceToBox(\"\u2022 \" + v));\n }\n addSentenceToBox(\"Example answer:\");\n addSentenceToBox(round.exampleAnswer);\n\n appendMessage(round.label, \"bot\");\n appendMessage(round.question + \" \" + round.followUp, \"bot\");\n\n showSynthesisLoader(true);\n const speakText = `${round.label}. ${round.question} ${round.followUp}`;\n sayText(speakText, \"en-US\").then(() => {\n showSynthesisLoader(false);\n listenForAnswer(round);\n });\n }\n\n function listenForAnswer(round) {\n if (!speechRecognitionSupported) return;\n\n recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();\n recognition.lang = \"en-US\";\n recognition.interimResults = false;\n recognition.maxAlternatives = 1;\n\n showRecognitionLoader(true);\n appendMessage(\"Listening...\", \"bot\");\n speechRecognitionActive = true;\n recognition.start();\n\n recognition.onresult = function(event) {\n if (!speechRecognitionActive) return;\n\n const userInput = event.results[0][0].transcript.trim();\n const formattedInput = normalizeAndFormatUserInput(userInput);\n\n appendMessage(formattedInput, \"user\");\n addSentenceToBox(\"Your answer: \" + formattedInput);\n\n showRecognitionLoader(false);\n speechRecognitionActive = false;\n\n if (checkStopKeywords(formattedInput.toLowerCase())) {\n endLesson(true);\n return;\n }\n\n const feedback = buildFeedback(formattedInput, round);\n appendMessage(feedback, \"bot\");\n showSynthesisLoader(true);\n sayText(feedback, \"en-US\").then(() => {\n showSynthesisLoader(false);\n currentRoundIndex++;\n setTimeout(startRound, 2600);\n });\n };\n\n recognition.onspeechend = function() {\n if (speechRecognitionActive) {\n recognition.stop();\n speechRecognitionActive = false;\n showRecognitionLoader(false);\n }\n };\n\n recognition.onerror = function(event) {\n showRecognitionLoader(false);\n speechRecognitionActive = false;\n let msg = \"Error: \" + event.error;\n\n if (event.error === \"not-allowed\") {\n msg = \"Microphone access was not allowed. Please allow microphone access in your browser settings and try again.\";\n } else if (event.error === \"no-speech\") {\n msg = \"I didn\u2019t hear anything. Please try speaking a bit louder or closer to the microphone.\";\n }\n\n appendMessage(msg, \"bot\");\n\n const retryMessage = \"Let\u2019s try that question again.\";\n appendMessage(retryMessage, \"bot\");\n showSynthesisLoader(true);\n sayText(retryMessage, \"en-US\").then(() => {\n showSynthesisLoader(false);\n setTimeout(() => listenForAnswer(round), 2500);\n });\n };\n }\n\n function buildFeedback(userInput, round) {\n const lower = userInput.toLowerCase();\n const feedbackParts = [];\n\n \/\/ Grammar feedback\n const grammarMessage = checkGrammar(lower);\n if (grammarMessage) {\n feedbackParts.push(grammarMessage);\n }\n\n \/\/ Did they mention the place or duration?\n if (round.place && (lower.includes(\"paris\") || lower.includes(\"france\") ||\n lower.includes(\"vancouver\") || lower.includes(\"canada\") ||\n lower.includes(\"koh samui\") || lower.includes(\"thailand\") ||\n lower.includes(\"kyoto\") || lower.includes(\"japan\"))) {\n feedbackParts.push(\"Good, you mentioned the place.\");\n } else if (round.place) {\n feedbackParts.push(\"Try to say where \" + round.name + \" went.\");\n }\n\n if (lower.includes(\"week\") || lower.includes(\"weeks\") ||\n lower.includes(\"day\") || lower.includes(\"days\")) {\n feedbackParts.push(\"Nice! You talked about how long the vacation was.\");\n } else if (round.duration) {\n feedbackParts.push(\"Remember to say how long \" + round.name + \" stayed.\");\n }\n\n \/\/ Did they use did\/didn't?\n if (lower.includes(\"didn't\") || lower.includes(\"did not\")) {\n feedbackParts.push(\"Great! You used didn\u2019t correctly.\");\n } else if (round.name !== \"Challenge\") {\n feedbackParts.push(\"Try to add one sentence with didn\u2019t, for example: \" +\n round.name + \" didn\u2019t \" + (round.didnt[0] || \"do one activity\") + \".\");\n }\n\n \/\/ Simple past verbs\n if (lower.includes(\"went\") || lower.includes(\"stayed\") ||\n lower.includes(\"visited\") || lower.includes(\"took\") ||\n lower.includes(\"relaxed\")) {\n feedbackParts.push(\n positiveFeedback[Math.floor(Math.random() * positiveFeedback.length)]\n );\n } else {\n feedbackParts.push(\n constructiveFeedback[Math.floor(Math.random() * constructiveFeedback.length)]\n );\n }\n\n return feedbackParts.join(\" \");\n }\n\n function checkGrammar(lower) {\n for (const pattern of grammarFeedbackPatterns) {\n if (lower.includes(pattern.match)) {\n return pattern.message;\n }\n }\n return null;\n }\n\n function checkStopKeywords(userInput) {\n const pattern = new RegExp(\"\\\\b(\" + stopKeywords.join(\"|\") + \")\\\\b\", \"i\");\n return pattern.test(userInput);\n }\n\n function normalizeAndFormatUserInput(text) {\n let normalized = text.replace(\/\\bi\\b\/g, \"I\");\n return formatSentence(normalized);\n }\n\n function formatSentence(text) {\n if (!text) return text;\n text = text.charAt(0).toUpperCase() + text.slice(1);\n\n const questionWords = [\n \"who\",\"what\",\"where\",\"when\",\"why\",\"how\",\n \"is\",\"are\",\"do\",\"does\",\"can\",\"should\",\"will\",\"would\",\"did\"\n ];\n const firstWord = text.split(\" \")[0].toLowerCase();\n\n if (questionWords.includes(firstWord) && !text.endsWith(\"?\")) {\n text += \"?\";\n } else if (!text.endsWith(\".\") && !text.endsWith(\"?\")) {\n text += \".\";\n }\n\n return text;\n }\n\n function addSentenceToBox(sentence) {\n const box = document.getElementById(\"word-box\");\n const div = document.createElement(\"div\");\n div.innerText = sentence;\n box.appendChild(div);\n box.scrollTop = box.scrollHeight;\n }\n\n function clearWordBox() {\n document.getElementById(\"word-box\").innerHTML = \"\";\n }\n\n function endLesson(userStopped = false) {\n if (speechSynthesisSupported) {\n window.speechSynthesis.cancel();\n }\n if (recognition && speechRecognitionActive) {\n recognition.stop();\n speechRecognitionActive = false;\n }\n\n isLessonActive = false;\n\n let message;\n if (userStopped) {\n message = \"Thank you for talking about the vacations today. Goodbye!\";\n } else {\n message = \"Well done! You finished all the rounds. Keep practising did and didn\u2019t with your classmates.\";\n }\n appendMessage(message, \"bot\");\n showSynthesisLoader(true);\n sayText(message, \"en-US\").then(() => showSynthesisLoader(false));\n }\n\n function 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 || \"en-US\";\n utterance.rate = 1.0;\n utterance.pitch = 1.0;\n\n if (selectedVoice) {\n utterance.voice = selectedVoice;\n }\n\n utterance.onend = () => resolve();\n utterance.onerror = () => resolve();\n\n window.speechSynthesis.speak(utterance);\n });\n }\n\n function appendMessage(text, sender) {\n const container = 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 container.appendChild(messageElement);\n container.scrollTop = container.scrollHeight;\n }\n\n function 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\n function showRecognitionLoader(show) {\n const loader = document.getElementById(\"synthesis-loader\");\n if (show) {\n loader.style.display = \"inline-block\";\n loader.style.borderTop = \"4px solid #ffc107\";\n } else {\n loader.style.display = \"none\";\n }\n }\n\n window.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":137,"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-382","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\/382","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=382"}],"version-history":[{"count":1,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/posts\/382\/revisions"}],"predecessor-version":[{"id":383,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/posts\/382\/revisions\/383"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/media\/137"}],"wp:attachment":[{"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/media?parent=382"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/categories?post=382"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/tags?post=382"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":382,"date":"2025-12-03T06:16:07","date_gmt":"2025-12-03T06:16:07","guid":{"rendered":"https:\/\/i-cte.org\/robot\/?p=382"},"modified":"2025-12-03T06:16:07","modified_gmt":"2025-12-03T06:16:07","slug":"vacation-describing-pictures","status":"publish","type":"post","link":"https:\/\/i-cte.org\/robot\/vacation-describing-pictures\/","title":{"rendered":"Vacation – Describing Pictures"},"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 Last Vacations \u2013 Did and Didn\u2019t Do<\/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: 320px;\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: 260px;\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: 520px;\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\n .chat-messages {\n padding: 12px;\n overflow-y: auto;\n flex: 1;\n background-color: #fff;\n max-height: 320px;\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 flex-wrap: wrap;\n justify-content: center;\n }\n\n .voice-selection {\n margin: 10px 0;\n width: 100%;\n max-width: 100%;\n margin-bottom: 10px;\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 .send-button,\n .stop-button {\n background-color: #17a2b8;\n color: #fff;\n font-weight: bold;\n border: none;\n border-radius: 5px;\n cursor: pointer;\n transition: background-color 0.3s;\n flex: 0 0 calc(50% - 12px);\n max-width: calc(50% - 12px);\n margin: 6px;\n font-size: 18px;\n padding: 14px 0;\n }\n .stop-button { 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 .stop-button:hover,\n .stop-button:focus {\n background-color: #c82333;\n }\n\n @media (max-width: 480px) {\n .send-button,\n .stop-button {\n flex: 0 0 100%;\n max-width: 100%;\n }\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 @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 { max-height: 220px; }\n .chat-header h2 { font-size: 20px; }\n .message { font-size: 15px; }\n }\n\n @media (max-width: 768px) {\n .chat-header h2 { font-size: 16px; }\n .message { font-size: 14px; }\n .word-box { font-size: 15px; }\n .voice-selection select { font-size: 14px; }\n }\n <\/style>\n<\/head>\n<body>\n \n <div class=\"menu\">\n <a href=\"https:\/\/i-cte.org\/robot\/vacation-conversation\/\">Conversation<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/vacation-vocabulary\/\">Vocabulary<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/vacation-real-life\/\">Real Life<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/vacation-describing-pictures\/\">Describing Pictures<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/vacation-reading-comprehension\/\">Reading<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/vacation-listening\/\">Listening<\/a>\n <\/div>\n\n <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\/10.png\"\n alt=\"Naoko, Jos\u00e9, Lance and Tina on their last vacations\">\n <div class=\"sentence-text\">\n Look at the picture. Talk about what Naoko, Jos\u00e9, Lance and Tina did (\u2713) and didn\u2019t do (\u2717) on their last vacations.\n <\/div>\n <div id=\"word-box\" class=\"word-box\"><\/div>\n <\/div>\n\n <div class=\"chat-container\">\n <div class=\"chat-header\">\n <h2>Last Vacations \u2013 Did and Didn\u2019t Do<\/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 (US \/ UK):<\/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=\"Start Lesson\">Start<\/button>\n <button id=\"stop-btn\" class=\"stop-button\" aria-label=\"Stop Lesson\">Stop<\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"menu\">\n <a href=\"https:\/\/i-cte.org\/robot\/vacation-conversation\/\">Conversation<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/vacation-vocabulary\/\">Vocabulary<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/vacation-real-life\/\">Real Life<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/vacation-describing-pictures\/\">Describing Pictures<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/vacation-reading-comprehension\/\">Reading<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/vacation-listening\/\">Listening<\/a>\n <\/div>\n\n<script>\n \/\/ Rounds: each person\u2019s vacation\n const rounds = [\n {\n label: \"Naoko \u2013 Paris\",\n name: \"Naoko\",\n place: \"Paris, France\",\n duration: \"one week\",\n question:\n \"Tell me about Naoko\u2019s last vacation. Where did she go and how long did she stay?\",\n followUp:\n \"Then talk about two things she did and one thing she didn\u2019t do. Use the simple past: She went\u2026, She stayed\u2026, She visited\u2026, She didn\u2019t\u2026.\",\n did: [\n \"visited the Louvre Museum\",\n \"stayed in Paris for a week\",\n \"ate at Michelle\u2019s restaurant\",\n \"went to see the Eiffel Tower\"\n ],\n didnt: [\n \"didn\u2019t visit the old castle\",\n \"didn\u2019t go on a boat tour on the river\"\n ],\n exampleAnswer:\n \"On her last vacation, Naoko went to France. She stayed in Paris for a week. She visited the Louvre Museum and ate at Michelle\u2019s restaurant, but she didn\u2019t visit the old castle.\"\n },\n {\n label: \"Jos\u00e9 \u2013 Vancouver\",\n name: \"Jos\u00e9\",\n place: \"Vancouver, Canada\",\n duration: \"two weeks\",\n question:\n \"Now talk about Jos\u00e9\u2019s vacation. Where did he go and how long did he stay?\",\n followUp:\n \"Say two things he did and one thing he didn\u2019t do. Use: He went\u2026, He stayed\u2026, He went skiing\u2026, He didn\u2019t\u2026.\",\n did: [\n \"went skiing in the mountains\",\n \"went on a boat trip\",\n \"visited the city center\"\n ],\n didnt: [\n \"didn\u2019t stay at home\",\n \"didn\u2019t go to another country\"\n ],\n exampleAnswer:\n \"Jos\u00e9 went to Vancouver in Canada. He stayed there for two weeks. He went skiing in the mountains and took a boat trip, but he didn\u2019t go to another country.\"\n },\n {\n label: \"Lance \u2013 Koh Samui\",\n name: \"Lance\",\n place: \"Koh Samui, Thailand\",\n duration: \"six days\",\n question:\n \"Let\u2019s talk about Lance. Where did he go and how long did he stay?\",\n followUp:\n \"Then talk about two things he did and one thing he didn\u2019t do. Use: He went\u2026, He stayed\u2026, He went snorkeling\u2026, He didn\u2019t\u2026.\",\n did: [\n \"relaxed on the beach\",\n \"went snorkeling in the sea\",\n \"rode an elephant\"\n ],\n didnt: [\n \"didn\u2019t go to a big city\",\n \"didn\u2019t visit a museum\"\n ],\n exampleAnswer:\n \"Lance went to Koh Samui in Thailand. He stayed there for six days. He relaxed on the beach and went snorkeling, but he didn\u2019t visit a museum.\"\n },\n {\n label: \"Tina \u2013 Kyoto\",\n name: \"Tina\",\n place: \"Kyoto, Japan\",\n duration: \"three days\",\n question:\n \"Now tell me about Tina\u2019s vacation. Where did she go and how long did she stay?\",\n followUp:\n \"Say two things she did and one thing she didn\u2019t do. Use: She went\u2026, She stayed\u2026, She visited\u2026, She didn\u2019t\u2026.\",\n did: [\n \"visited temples and shrines\",\n \"took a boat ride on the river\",\n \"went shopping at the market\"\n ],\n didnt: [\n \"didn\u2019t stay for a long time\",\n \"didn\u2019t go to the beach\"\n ],\n exampleAnswer:\n \"Tina went to Kyoto in Japan. She stayed there for three days. She visited temples and took a boat ride, but she didn\u2019t go to the beach.\"\n },\n {\n label: \"Challenge \u2013 True or false\",\n name: \"Challenge\",\n place: \"\",\n duration: \"\",\n question:\n \"Challenge time! Make a true or false sentence about one of these vacations.\",\n followUp:\n \"For example: Jos\u00e9 went to Vancouver for three weeks. Then imagine your partner says: That\u2019s wrong! He went for two weeks. Now make your own sentence.\",\n did: [],\n didnt: [],\n exampleAnswer:\n \"Naoko went to Paris for one week. Jos\u00e9 went to Vancouver for two weeks.\"\n }\n ];\n\n const positiveFeedback = [\n \"Great! You used clear sentences in the simple past.\",\n \"Nice work! Your answer sounds natural.\",\n \"Excellent! You used the place, the time and some activities.\",\n \"Very good. That\u2019s a clear description of the vacation.\",\n \"Fantastic! You used did and didn\u2019t very well.\",\n \"Nice sentence! Your simple past verbs are correct.\"\n ];\n\n const constructiveFeedback = [\n \"Try to use the simple past, for example: went, stayed, visited, didn\u2019t go.\",\n \"Remember to say where the person went and how long they stayed.\",\n \"Can you make a longer answer? Add one more thing they did.\",\n \"Try to use did or didn\u2019t, for example: He didn\u2019t visit the museum.\",\n \"Include one of the green box activities to make your answer clearer.\"\n ];\n\n \/\/ grammar feedback for common mistakes\n const grammarFeedbackPatterns = [\n {\n match: \"didn't went\",\n message: 'Remember: after \"didn\u2019t\" use the base form: \"didn\u2019t go\", not \"didn\u2019t went\".'\n },\n {\n match: \"did not went\",\n message: 'Say: \"did not go\", not \"did not went\".'\n },\n {\n match: \"didn't visited\",\n message: 'Say: \"didn\u2019t visit\", not \"didn\u2019t visited\".'\n },\n {\n match: \"did not visited\",\n message: 'Say: \"did not visit\", not \"did not visited\".'\n },\n {\n match: \"he go to\",\n message: 'For the past, say: \"he went to\", not \"he go to\".'\n },\n {\n match: \"she go to\",\n message: 'For the past, say: \"she went to\", not \"she go to\".'\n }\n ];\n\n const stopKeywords = [\"goodbye\",\"good bye\",\"bye\",\"bye-bye\",\"byebye\"];\n\n let currentRoundIndex = 0;\n let recognition;\n let isLessonActive = false;\n let speechRecognitionActive = false;\n\n const speechSynthesisSupported = \"speechSynthesis\" in window;\n const speechRecognitionSupported = window.SpeechRecognition || window.webkitSpeechRecognition;\n\n let voices = [];\n let selectedVoice = null;\n\n const desiredVoiceNames = [\n \"Google US English\",\n \"Google US English Female\",\n \"Google UK English Male\",\n \"Google UK English Female\"\n ];\n\n function initialize() {\n if (speechSynthesisSupported) {\n loadVoices();\n } else {\n appendMessage(\"Sorry, your browser does not support speech synthesis.\", \"bot\");\n }\n\n fillInitialWordBox();\n\n if (speechSynthesisSupported) {\n setTimeout(greetUser, 500);\n }\n\n if (!speechRecognitionSupported) {\n appendMessage(\"Sorry, your browser does not support speech recognition.\", \"bot\");\n }\n\n document.getElementById(\"start-btn\").onclick = function() {\n if (isLessonActive) return;\n\n if (!speechSynthesisSupported) {\n appendMessage(\"Speech synthesis is not supported in your browser.\", \"bot\");\n return;\n }\n if (!speechRecognitionSupported) {\n appendMessage(\"Speech recognition is not supported in your browser.\", \"bot\");\n return;\n }\n\n isLessonActive = true;\n currentRoundIndex = 0;\n startRound();\n };\n\n document.getElementById(\"stop-btn\").onclick = function() {\n if (recognition && speechRecognitionActive) {\n recognition.stop();\n speechRecognitionActive = false;\n }\n endLesson(true);\n };\n }\n\n function loadVoices() {\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\n function populateVoiceList() {\n const voiceSelect = document.getElementById(\"voice-select\");\n voiceSelect.innerHTML = \"\";\n\n const filteredVoices = voices.filter(v => desiredVoiceNames.includes(v.name));\n\n if (filteredVoices.length === 0) {\n \/\/ Fallback: all English voices, or all voices if none\n const englishVoices = voices.filter(v => v.lang && v.lang.startsWith(\"en\"));\n const list = englishVoices.length ? englishVoices : voices;\n\n list.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 voiceSelect.disabled = list.length === 0;\n selectedVoice = list[0] || null;\n\n voiceSelect.onchange = () => {\n const idx = parseInt(voiceSelect.value, 10);\n selectedVoice = list[idx];\n };\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 voiceSelect.selectedIndex = 0;\n selectedVoice = filteredVoices[0];\n\n voiceSelect.onchange = () => {\n const idx = parseInt(voiceSelect.value, 10);\n selectedVoice = filteredVoices[idx];\n };\n }\n\n function fillInitialWordBox() {\n clearWordBox();\n addSentenceToBox(\"Useful language for last vacations:\");\n addSentenceToBox(\"\u2022 On his \/ her last vacation, \u2026 went to \u2026\");\n addSentenceToBox(\"\u2022 He \/ She stayed there for \u2026 days \/ weeks.\");\n addSentenceToBox(\"\u2022 He \/ She visited \u2026\");\n addSentenceToBox(\"\u2022 He \/ She went \u2026\");\n addSentenceToBox(\"\u2022 He \/ She didn\u2019t visit \u2026\");\n addSentenceToBox(\"\u2022 He \/ She didn\u2019t go \u2026\");\n addSentenceToBox(\"Challenge: Make true or false sentences, for example:\");\n addSentenceToBox(\"\u2022 Jos\u00e9 went to Vancouver for three weeks.\");\n addSentenceToBox(\"\u2022 That\u2019s wrong! He went for two weeks.\");\n }\n\n function greetUser() {\n const greeting =\n \"Hello! In this activity we will talk about last vacations. \" +\n \"Look at Naoko, Jos\u00e9, Lance and Tina. Say where they went, how long they stayed, \" +\n \"what they did and what they didn\u2019t do. Click Start to begin.\";\n appendMessage(greeting, \"bot\");\n showSynthesisLoader(true);\n sayText(greeting, \"en-US\").then(() => showSynthesisLoader(false));\n }\n\n function startRound() {\n if (!isLessonActive) return;\n\n if (currentRoundIndex >= rounds.length) {\n endLesson(false);\n return;\n }\n\n const round = rounds[currentRoundIndex];\n\n clearWordBox();\n addSentenceToBox(round.label);\n if (round.place) addSentenceToBox(\"Place: \" + round.place);\n if (round.duration) addSentenceToBox(\"Time: \" + round.duration);\n addSentenceToBox(\"Useful ideas (did):\");\n round.did.forEach(v => addSentenceToBox(\"\u2022 \" + v));\n if (round.didt && round.didt.length > 0) {\n \/\/ (not used, but kept in case)\n }\n if (round.diddnt && round.diddnt.length > 0) {\n \/\/ (not used)\n }\n if (round.diddnt) {\n \/\/ nothing\n }\n if (round.dont) {\n \/\/ nothing\n }\n if (round.didnt && round.didnt.length > 0) {\n addSentenceToBox(\"Useful ideas (didn\u2019t):\");\n round.didnt.forEach(v => addSentenceToBox(\"\u2022 \" + v));\n }\n addSentenceToBox(\"Example answer:\");\n addSentenceToBox(round.exampleAnswer);\n\n appendMessage(round.label, \"bot\");\n appendMessage(round.question + \" \" + round.followUp, \"bot\");\n\n showSynthesisLoader(true);\n const speakText = `${round.label}. ${round.question} ${round.followUp}`;\n sayText(speakText, \"en-US\").then(() => {\n showSynthesisLoader(false);\n listenForAnswer(round);\n });\n }\n\n function listenForAnswer(round) {\n if (!speechRecognitionSupported) return;\n\n recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();\n recognition.lang = \"en-US\";\n recognition.interimResults = false;\n recognition.maxAlternatives = 1;\n\n showRecognitionLoader(true);\n appendMessage(\"Listening...\", \"bot\");\n speechRecognitionActive = true;\n recognition.start();\n\n recognition.onresult = function(event) {\n if (!speechRecognitionActive) return;\n\n const userInput = event.results[0][0].transcript.trim();\n const formattedInput = normalizeAndFormatUserInput(userInput);\n\n appendMessage(formattedInput, \"user\");\n addSentenceToBox(\"Your answer: \" + formattedInput);\n\n showRecognitionLoader(false);\n speechRecognitionActive = false;\n\n if (checkStopKeywords(formattedInput.toLowerCase())) {\n endLesson(true);\n return;\n }\n\n const feedback = buildFeedback(formattedInput, round);\n appendMessage(feedback, \"bot\");\n showSynthesisLoader(true);\n sayText(feedback, \"en-US\").then(() => {\n showSynthesisLoader(false);\n currentRoundIndex++;\n setTimeout(startRound, 2600);\n });\n };\n\n recognition.onspeechend = function() {\n if (speechRecognitionActive) {\n recognition.stop();\n speechRecognitionActive = false;\n showRecognitionLoader(false);\n }\n };\n\n recognition.onerror = function(event) {\n showRecognitionLoader(false);\n speechRecognitionActive = false;\n let msg = \"Error: \" + event.error;\n\n if (event.error === \"not-allowed\") {\n msg = \"Microphone access was not allowed. Please allow microphone access in your browser settings and try again.\";\n } else if (event.error === \"no-speech\") {\n msg = \"I didn\u2019t hear anything. Please try speaking a bit louder or closer to the microphone.\";\n }\n\n appendMessage(msg, \"bot\");\n\n const retryMessage = \"Let\u2019s try that question again.\";\n appendMessage(retryMessage, \"bot\");\n showSynthesisLoader(true);\n sayText(retryMessage, \"en-US\").then(() => {\n showSynthesisLoader(false);\n setTimeout(() => listenForAnswer(round), 2500);\n });\n };\n }\n\n function buildFeedback(userInput, round) {\n const lower = userInput.toLowerCase();\n const feedbackParts = [];\n\n \/\/ Grammar feedback\n const grammarMessage = checkGrammar(lower);\n if (grammarMessage) {\n feedbackParts.push(grammarMessage);\n }\n\n \/\/ Did they mention the place or duration?\n if (round.place && (lower.includes(\"paris\") || lower.includes(\"france\") ||\n lower.includes(\"vancouver\") || lower.includes(\"canada\") ||\n lower.includes(\"koh samui\") || lower.includes(\"thailand\") ||\n lower.includes(\"kyoto\") || lower.includes(\"japan\"))) {\n feedbackParts.push(\"Good, you mentioned the place.\");\n } else if (round.place) {\n feedbackParts.push(\"Try to say where \" + round.name + \" went.\");\n }\n\n if (lower.includes(\"week\") || lower.includes(\"weeks\") ||\n lower.includes(\"day\") || lower.includes(\"days\")) {\n feedbackParts.push(\"Nice! You talked about how long the vacation was.\");\n } else if (round.duration) {\n feedbackParts.push(\"Remember to say how long \" + round.name + \" stayed.\");\n }\n\n \/\/ Did they use did\/didn't?\n if (lower.includes(\"didn't\") || lower.includes(\"did not\")) {\n feedbackParts.push(\"Great! You used didn\u2019t correctly.\");\n } else if (round.name !== \"Challenge\") {\n feedbackParts.push(\"Try to add one sentence with didn\u2019t, for example: \" +\n round.name + \" didn\u2019t \" + (round.didnt[0] || \"do one activity\") + \".\");\n }\n\n \/\/ Simple past verbs\n if (lower.includes(\"went\") || lower.includes(\"stayed\") ||\n lower.includes(\"visited\") || lower.includes(\"took\") ||\n lower.includes(\"relaxed\")) {\n feedbackParts.push(\n positiveFeedback[Math.floor(Math.random() * positiveFeedback.length)]\n );\n } else {\n feedbackParts.push(\n constructiveFeedback[Math.floor(Math.random() * constructiveFeedback.length)]\n );\n }\n\n return feedbackParts.join(\" \");\n }\n\n function checkGrammar(lower) {\n for (const pattern of grammarFeedbackPatterns) {\n if (lower.includes(pattern.match)) {\n return pattern.message;\n }\n }\n return null;\n }\n\n function checkStopKeywords(userInput) {\n const pattern = new RegExp(\"\\\\b(\" + stopKeywords.join(\"|\") + \")\\\\b\", \"i\");\n return pattern.test(userInput);\n }\n\n function normalizeAndFormatUserInput(text) {\n let normalized = text.replace(\/\\bi\\b\/g, \"I\");\n return formatSentence(normalized);\n }\n\n function formatSentence(text) {\n if (!text) return text;\n text = text.charAt(0).toUpperCase() + text.slice(1);\n\n const questionWords = [\n \"who\",\"what\",\"where\",\"when\",\"why\",\"how\",\n \"is\",\"are\",\"do\",\"does\",\"can\",\"should\",\"will\",\"would\",\"did\"\n ];\n const firstWord = text.split(\" \")[0].toLowerCase();\n\n if (questionWords.includes(firstWord) && !text.endsWith(\"?\")) {\n text += \"?\";\n } else if (!text.endsWith(\".\") && !text.endsWith(\"?\")) {\n text += \".\";\n }\n\n return text;\n }\n\n function addSentenceToBox(sentence) {\n const box = document.getElementById(\"word-box\");\n const div = document.createElement(\"div\");\n div.innerText = sentence;\n box.appendChild(div);\n box.scrollTop = box.scrollHeight;\n }\n\n function clearWordBox() {\n document.getElementById(\"word-box\").innerHTML = \"\";\n }\n\n function endLesson(userStopped = false) {\n if (speechSynthesisSupported) {\n window.speechSynthesis.cancel();\n }\n if (recognition && speechRecognitionActive) {\n recognition.stop();\n speechRecognitionActive = false;\n }\n\n isLessonActive = false;\n\n let message;\n if (userStopped) {\n message = \"Thank you for talking about the vacations today. Goodbye!\";\n } else {\n message = \"Well done! You finished all the rounds. Keep practising did and didn\u2019t with your classmates.\";\n }\n appendMessage(message, \"bot\");\n showSynthesisLoader(true);\n sayText(message, \"en-US\").then(() => showSynthesisLoader(false));\n }\n\n function 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 || \"en-US\";\n utterance.rate = 1.0;\n utterance.pitch = 1.0;\n\n if (selectedVoice) {\n utterance.voice = selectedVoice;\n }\n\n utterance.onend = () => resolve();\n utterance.onerror = () => resolve();\n\n window.speechSynthesis.speak(utterance);\n });\n }\n\n function appendMessage(text, sender) {\n const container = 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 container.appendChild(messageElement);\n container.scrollTop = container.scrollHeight;\n }\n\n function 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\n function showRecognitionLoader(show) {\n const loader = document.getElementById(\"synthesis-loader\");\n if (show) {\n loader.style.display = \"inline-block\";\n loader.style.borderTop = \"4px solid #ffc107\";\n } else {\n loader.style.display = \"none\";\n }\n }\n\n window.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":137,"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-382","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\/382","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=382"}],"version-history":[{"count":1,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/posts\/382\/revisions"}],"predecessor-version":[{"id":383,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/posts\/382\/revisions\/383"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/media\/137"}],"wp:attachment":[{"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/media?parent=382"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/categories?post=382"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/tags?post=382"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}