Making Invitations \u2013 Appointment Book<\/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 \/* Voice + buttons area *\/\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\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\/having-fun-conversation\/\">Conversation<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/having-fun-vocabulary\/\">Vocabulary<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/having-fun-real-life\/\">Real Life<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/having-fun-describing-pictures\/\">Describing Pictures<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/having-fun-reading-comprehension\/\">Reading<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/having-fun-listening\/\">Listening<\/a>\n <\/div>\n\n <div class=\"container\">\n <div class=\"image-chat-wrapper\">\n <div class=\"image-container\">\n \n <img decoding=\"async\" src=\"https:\/\/i-cte.org\/robot\/wp-content\/uploads\/2025\/11\/Screenshot-2025-11-25-at-3.50.08-PM.png\" alt=\"People doing different activities like watching a movie, playing sports, and going to a club\">\n <div class=\"sentence-text\">\n Look at your activity picture. I\u2019ll ask about different days. Tell me your plans using the present continuous, then I\u2019ll invite you to do something!\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>Making Invitations \u2013 Appointment Book<\/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 <div class=\"menu\">\n <a href=\"https:\/\/i-cte.org\/robot\/having-fun-conversation\/\">Conversation<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/having-fun-vocabulary\/\">Vocabulary<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/having-fun-real-life\/\">Real Life<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/having-fun-describing-pictures\/\">Describing Pictures<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/having-fun-reading-comprehension\/\">Reading<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/having-fun-listening\/\">Listening<\/a>\n <\/div>\n\n<script>\n \/\/ Each \"invitation\" round: day\/time + activity vocabulary + model\n const rounds = [\n {\n label: \"Invitation 1 \u2013 Tuesday night\",\n day: \"Tuesday night\",\n question:\n \"Are you doing anything on Tuesday night?\",\n followUp:\n \"If you are free, you can say something like: I\u2019m seeing a movie. If you are busy, say what you are doing.\",\n vocab: [\"see a movie\", \"go to the movies\", \"go to the movie theater\", \"watch a film\"],\n exampleAnswer:\n \"On Tuesday night I\u2019m seeing a movie at the theater.\",\n inviteIdea: \"Do you want to see a movie with me on Tuesday night?\"\n },\n {\n label: \"Invitation 2 \u2013 Wednesday afternoon\",\n day: \"Wednesday afternoon\",\n question:\n \"What are you doing on Wednesday afternoon?\",\n followUp:\n \"You can use activities like playing basketball or going jogging.\",\n vocab: [\"play basketball\", \"go jogging\", \"go running\", \"practice yoga\"],\n exampleAnswer:\n \"On Wednesday afternoon I\u2019m playing basketball with my friends.\",\n inviteIdea: \"Maybe we can play basketball together on Wednesday afternoon.\"\n },\n {\n label: \"Invitation 3 \u2013 Friday night\",\n day: \"Friday night\",\n question:\n \"What are you doing on Friday night?\",\n followUp:\n \"You can talk about going to a club or dancing.\",\n vocab: [\"go to a club\", \"go dancing\", \"listen to music\"],\n exampleAnswer:\n \"On Friday night I\u2019m going to a club with some friends.\",\n inviteIdea: \"Would you like to go to a club with me on Friday night?\"\n },\n {\n label: \"Invitation 4 \u2013 Saturday morning\",\n day: \"Saturday morning\",\n question:\n \"What are you doing on Saturday morning?\",\n followUp:\n \"Maybe you are playing tennis, doing karate, or going hiking.\",\n vocab: [\"play tennis\", \"play golf\", \"do karate\", \"go hiking\"],\n exampleAnswer:\n \"On Saturday morning I\u2019m playing tennis at the sports center.\",\n inviteIdea: \"How about playing tennis together on Saturday morning?\"\n },\n {\n label: \"Invitation 5 \u2013 Saturday night\",\n day: \"Saturday night\",\n question:\n \"What are you doing on Saturday night?\",\n followUp:\n \"You can talk about having a barbecue, eating pizza, or going to a restaurant.\",\n vocab: [\"have a barbecue\", \"eat pizza\", \"go to a restaurant\"],\n exampleAnswer:\n \"On Saturday night I\u2019m having a barbecue with my family.\",\n inviteIdea: \"Do you want to come to a barbecue on Saturday night?\"\n },\n {\n label: \"Invitation 6 \u2013 Sunday afternoon\",\n day: \"Sunday afternoon\",\n question:\n \"What are you doing on Sunday afternoon?\",\n followUp:\n \"Maybe you are going to the park, having a picnic, or just relaxing.\",\n vocab: [\"have a picnic\", \"relax in the park\", \"go for a walk\", \"meet friends\"],\n exampleAnswer:\n \"On Sunday afternoon I\u2019m having a picnic in the park.\",\n inviteIdea: \"Would you like to have a picnic with me on Sunday afternoon?\"\n },\n {\n label: \"Challenge \u2013 Your own invitation\",\n day: \"any day\",\n question:\n \"Now choose any day and make your own invitation. Tell me your plan and then invite me.\",\n followUp:\n \"Use two sentences: one about your plan, and one invitation, for example: I\u2019m playing tennis on Saturday. Do you want to play with me?\",\n vocab: [\"What are you doing\", \"Do you want to\", \"How about\", \"Let\u2019s\"],\n exampleAnswer:\n \"On Thursday evening I\u2019m going to a concert. Do you want to go with me?\",\n inviteIdea: \"\"\n }\n ];\n\n const positiveFeedback = [\n \"Great! You used a good sentence with the present continuous.\",\n \"Nice work! Your answer sounds natural.\",\n \"Excellent! You used the day and an activity very clearly.\",\n \"Very good. That\u2019s a clear plan in your appointment book.\",\n \"Fantastic! Your invitation language is very natural.\",\n \"Nice sentence! You\u2019re using I\u2019m doing \/ I\u2019m going very well.\"\n ];\n\n const constructiveFeedback = [\n \"Try to use the present continuous for plans, for example: I\u2019m playing basketball, I\u2019m seeing a movie.\",\n \"Remember to say the day as well, for example: On Friday night I\u2019m going to a club.\",\n \"Can you make a longer answer? Add who you are with or where you are going.\",\n \"Include one of the activity words from the green box to make your plan clearer.\",\n \"Try to add an invitation sentence like: Do you want to \u2026? or How about \u2026?\"\n ];\n\n const grammarFeedbackPatterns = [\n {\n match: \"i play basketball on\",\n message: 'For future plans, say: \"I\u2019m playing basketball on \u2026\" instead of \"I play basketball on \u2026\".'\n },\n {\n match: \"i go to the movies on\",\n message: 'You can say: \"I\u2019m going to the movies on \u2026\" or \"I\u2019m seeing a movie on \u2026\".'\n },\n {\n match: \"i have a barbecue on\",\n message: 'For a plan, say: \"I\u2019m having a barbecue on \u2026\".'\n },\n {\n match: \"i do karate on\",\n message: 'Try: \"I\u2019m doing karate on \u2026\" when you talk about a plan.'\n },\n {\n match: \"i will going\",\n message: 'Say: \"I will go \u2026\" or \"I\u2019m going \u2026\", but not \"will going\".'\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 loadVoices();\n\n fillInitialWordBox();\n\n if (speechSynthesisSupported) {\n setTimeout(greetUser, 500);\n } else {\n appendMessage(\"Sorry, your browser does not support speech synthesis.\", \"bot\");\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 const option = document.createElement(\"option\");\n option.value = \"\";\n option.textContent = \"No desired voices available\";\n voiceSelect.appendChild(option);\n voiceSelect.disabled = true;\n return;\n }\n\n filteredVoices.forEach((voice, index) => {\n const option = document.createElement(\"option\");\n option.value = index;\n option.textContent = `${voice.name} (${voice.lang})`;\n voiceSelect.appendChild(option);\n });\n\n voiceSelect.selectedIndex = 0;\n selectedVoice = filteredVoices[0];\n\n voiceSelect.onchange = () => {\n const selectedIndex = voiceSelect.value;\n selectedVoice = filteredVoices[selectedIndex];\n };\n }\n\n function fillInitialWordBox() {\n clearWordBox();\n addSentenceToBox(\"Useful phrases for invitations and plans:\");\n addSentenceToBox(\"\u2022 Are you doing anything on Tuesday night?\");\n addSentenceToBox(\"\u2022 What are you doing on Saturday?\");\n addSentenceToBox(\"\u2022 I\u2019m seeing a movie.\");\n addSentenceToBox(\"\u2022 I\u2019m playing basketball.\");\n addSentenceToBox(\"\u2022 I\u2019m going to a club.\");\n addSentenceToBox(\"\u2022 I\u2019m having a barbecue.\");\n addSentenceToBox(\"\u2022 Do you want to \u2026?\");\n addSentenceToBox(\"\u2022 How about \u2026?\");\n addSentenceToBox(\"\u2022 Let\u2019s go to the movies.\");\n }\n\n function greetUser() {\n const greeting =\n \"Hello! In this activity we will practise making invitations and talking about your plans. Use sentences like: I\u2019m seeing a movie on Tuesday night. Then you can invite me: Do you want to see a movie with me? 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 addSentenceToBox(\"Day \/ time: \" + round.day);\n addSentenceToBox(\"Question: \" + round.question);\n addSentenceToBox(\"Useful activity words:\");\n round.vocab.forEach(v => addSentenceToBox(\"\u2022 \" + v));\n addSentenceToBox(\"Example answer:\");\n addSentenceToBox(round.exampleAnswer);\n if (round.inviteIdea) {\n addSentenceToBox(\"Example invitation:\");\n addSentenceToBox(round.inviteIdea);\n }\n\n appendMessage(round.label + \" \u2013 \" + round.day, \"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 }\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 use the day?\n if (lower.includes(\"tuesday\") || lower.includes(\"wednesday\") ||\n lower.includes(\"friday\") || lower.includes(\"saturday\") ||\n lower.includes(\"sunday\") || round.day === \"any day\") {\n feedbackParts.push(\"Good, you mentioned the day or time.\");\n } else if (round.day !== \"any day\") {\n feedbackParts.push(\"Try to say the day too, for example: On \" + round.day + \" I\u2019m \u2026\");\n }\n\n \/\/ Did they use an activity?\n let usedActivity = false;\n for (const phrase of round.vocab) {\n const simple = phrase.toLowerCase().split(\/[.,]\/)[0];\n if (lower.includes(simple.split(\" \")[0])) {\n usedActivity = true;\n break;\n }\n }\n\n if (usedActivity) {\n feedbackParts.push(positiveFeedback[Math.floor(Math.random() * positiveFeedback.length)]);\n } else {\n feedbackParts.push(constructiveFeedback[Math.floor(Math.random() * constructiveFeedback.length)]);\n }\n\n \/\/ Check for invitation language\n if (lower.includes(\"do you want\") || lower.includes(\"how about\") || lower.includes(\"let's\")) {\n feedbackParts.push(\"Nice invitation! That sounds polite and friendly.\");\n } else if (round.day !== \"any day\") {\n feedbackParts.push(\"Next time, add an invitation, for example: Do you want to \" +\n (round.vocab[0] || \"do something\") + \" with me?\");\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\n if (lower.includes(\"i am go to\") || lower.includes(\"i am going to go to to\")) {\n return 'You can say: \"I\u2019m going to go to the movies\" or \"I\u2019m going to the movies\", but not \"I am go to\".';\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 practising invitations today. Goodbye!\";\n } else {\n message = \"Well done! You finished all the invitations. Keep using these questions 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;\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":252,"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-362","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\/362","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=362"}],"version-history":[{"count":1,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/posts\/362\/revisions"}],"predecessor-version":[{"id":363,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/posts\/362\/revisions\/363"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/media\/252"}],"wp:attachment":[{"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/media?parent=362"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/categories?post=362"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/tags?post=362"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":362,"date":"2025-11-25T15:52:39","date_gmt":"2025-11-25T15:52:39","guid":{"rendered":"https:\/\/i-cte.org\/robot\/?p=362"},"modified":"2025-11-25T15:52:39","modified_gmt":"2025-11-25T15:52:39","slug":"having-fun-describing-pictures","status":"publish","type":"post","link":"https:\/\/i-cte.org\/robot\/having-fun-describing-pictures\/","title":{"rendered":"Having fun – 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.<\/p>\n\n\n\n\n\n\n \n \n Making Invitations \u2013 Appointment Book<\/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 \/* Voice + buttons area *\/\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\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\/having-fun-conversation\/\">Conversation<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/having-fun-vocabulary\/\">Vocabulary<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/having-fun-real-life\/\">Real Life<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/having-fun-describing-pictures\/\">Describing Pictures<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/having-fun-reading-comprehension\/\">Reading<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/having-fun-listening\/\">Listening<\/a>\n <\/div>\n\n <div class=\"container\">\n <div class=\"image-chat-wrapper\">\n <div class=\"image-container\">\n \n <img decoding=\"async\" src=\"https:\/\/i-cte.org\/robot\/wp-content\/uploads\/2025\/11\/Screenshot-2025-11-25-at-3.50.08-PM.png\" alt=\"People doing different activities like watching a movie, playing sports, and going to a club\">\n <div class=\"sentence-text\">\n Look at your activity picture. I\u2019ll ask about different days. Tell me your plans using the present continuous, then I\u2019ll invite you to do something!\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>Making Invitations \u2013 Appointment Book<\/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 <div class=\"menu\">\n <a href=\"https:\/\/i-cte.org\/robot\/having-fun-conversation\/\">Conversation<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/having-fun-vocabulary\/\">Vocabulary<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/having-fun-real-life\/\">Real Life<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/having-fun-describing-pictures\/\">Describing Pictures<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/having-fun-reading-comprehension\/\">Reading<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/having-fun-listening\/\">Listening<\/a>\n <\/div>\n\n<script>\n \/\/ Each \"invitation\" round: day\/time + activity vocabulary + model\n const rounds = [\n {\n label: \"Invitation 1 \u2013 Tuesday night\",\n day: \"Tuesday night\",\n question:\n \"Are you doing anything on Tuesday night?\",\n followUp:\n \"If you are free, you can say something like: I\u2019m seeing a movie. If you are busy, say what you are doing.\",\n vocab: [\"see a movie\", \"go to the movies\", \"go to the movie theater\", \"watch a film\"],\n exampleAnswer:\n \"On Tuesday night I\u2019m seeing a movie at the theater.\",\n inviteIdea: \"Do you want to see a movie with me on Tuesday night?\"\n },\n {\n label: \"Invitation 2 \u2013 Wednesday afternoon\",\n day: \"Wednesday afternoon\",\n question:\n \"What are you doing on Wednesday afternoon?\",\n followUp:\n \"You can use activities like playing basketball or going jogging.\",\n vocab: [\"play basketball\", \"go jogging\", \"go running\", \"practice yoga\"],\n exampleAnswer:\n \"On Wednesday afternoon I\u2019m playing basketball with my friends.\",\n inviteIdea: \"Maybe we can play basketball together on Wednesday afternoon.\"\n },\n {\n label: \"Invitation 3 \u2013 Friday night\",\n day: \"Friday night\",\n question:\n \"What are you doing on Friday night?\",\n followUp:\n \"You can talk about going to a club or dancing.\",\n vocab: [\"go to a club\", \"go dancing\", \"listen to music\"],\n exampleAnswer:\n \"On Friday night I\u2019m going to a club with some friends.\",\n inviteIdea: \"Would you like to go to a club with me on Friday night?\"\n },\n {\n label: \"Invitation 4 \u2013 Saturday morning\",\n day: \"Saturday morning\",\n question:\n \"What are you doing on Saturday morning?\",\n followUp:\n \"Maybe you are playing tennis, doing karate, or going hiking.\",\n vocab: [\"play tennis\", \"play golf\", \"do karate\", \"go hiking\"],\n exampleAnswer:\n \"On Saturday morning I\u2019m playing tennis at the sports center.\",\n inviteIdea: \"How about playing tennis together on Saturday morning?\"\n },\n {\n label: \"Invitation 5 \u2013 Saturday night\",\n day: \"Saturday night\",\n question:\n \"What are you doing on Saturday night?\",\n followUp:\n \"You can talk about having a barbecue, eating pizza, or going to a restaurant.\",\n vocab: [\"have a barbecue\", \"eat pizza\", \"go to a restaurant\"],\n exampleAnswer:\n \"On Saturday night I\u2019m having a barbecue with my family.\",\n inviteIdea: \"Do you want to come to a barbecue on Saturday night?\"\n },\n {\n label: \"Invitation 6 \u2013 Sunday afternoon\",\n day: \"Sunday afternoon\",\n question:\n \"What are you doing on Sunday afternoon?\",\n followUp:\n \"Maybe you are going to the park, having a picnic, or just relaxing.\",\n vocab: [\"have a picnic\", \"relax in the park\", \"go for a walk\", \"meet friends\"],\n exampleAnswer:\n \"On Sunday afternoon I\u2019m having a picnic in the park.\",\n inviteIdea: \"Would you like to have a picnic with me on Sunday afternoon?\"\n },\n {\n label: \"Challenge \u2013 Your own invitation\",\n day: \"any day\",\n question:\n \"Now choose any day and make your own invitation. Tell me your plan and then invite me.\",\n followUp:\n \"Use two sentences: one about your plan, and one invitation, for example: I\u2019m playing tennis on Saturday. Do you want to play with me?\",\n vocab: [\"What are you doing\", \"Do you want to\", \"How about\", \"Let\u2019s\"],\n exampleAnswer:\n \"On Thursday evening I\u2019m going to a concert. Do you want to go with me?\",\n inviteIdea: \"\"\n }\n ];\n\n const positiveFeedback = [\n \"Great! You used a good sentence with the present continuous.\",\n \"Nice work! Your answer sounds natural.\",\n \"Excellent! You used the day and an activity very clearly.\",\n \"Very good. That\u2019s a clear plan in your appointment book.\",\n \"Fantastic! Your invitation language is very natural.\",\n \"Nice sentence! You\u2019re using I\u2019m doing \/ I\u2019m going very well.\"\n ];\n\n const constructiveFeedback = [\n \"Try to use the present continuous for plans, for example: I\u2019m playing basketball, I\u2019m seeing a movie.\",\n \"Remember to say the day as well, for example: On Friday night I\u2019m going to a club.\",\n \"Can you make a longer answer? Add who you are with or where you are going.\",\n \"Include one of the activity words from the green box to make your plan clearer.\",\n \"Try to add an invitation sentence like: Do you want to \u2026? or How about \u2026?\"\n ];\n\n const grammarFeedbackPatterns = [\n {\n match: \"i play basketball on\",\n message: 'For future plans, say: \"I\u2019m playing basketball on \u2026\" instead of \"I play basketball on \u2026\".'\n },\n {\n match: \"i go to the movies on\",\n message: 'You can say: \"I\u2019m going to the movies on \u2026\" or \"I\u2019m seeing a movie on \u2026\".'\n },\n {\n match: \"i have a barbecue on\",\n message: 'For a plan, say: \"I\u2019m having a barbecue on \u2026\".'\n },\n {\n match: \"i do karate on\",\n message: 'Try: \"I\u2019m doing karate on \u2026\" when you talk about a plan.'\n },\n {\n match: \"i will going\",\n message: 'Say: \"I will go \u2026\" or \"I\u2019m going \u2026\", but not \"will going\".'\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 loadVoices();\n\n fillInitialWordBox();\n\n if (speechSynthesisSupported) {\n setTimeout(greetUser, 500);\n } else {\n appendMessage(\"Sorry, your browser does not support speech synthesis.\", \"bot\");\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 const option = document.createElement(\"option\");\n option.value = \"\";\n option.textContent = \"No desired voices available\";\n voiceSelect.appendChild(option);\n voiceSelect.disabled = true;\n return;\n }\n\n filteredVoices.forEach((voice, index) => {\n const option = document.createElement(\"option\");\n option.value = index;\n option.textContent = `${voice.name} (${voice.lang})`;\n voiceSelect.appendChild(option);\n });\n\n voiceSelect.selectedIndex = 0;\n selectedVoice = filteredVoices[0];\n\n voiceSelect.onchange = () => {\n const selectedIndex = voiceSelect.value;\n selectedVoice = filteredVoices[selectedIndex];\n };\n }\n\n function fillInitialWordBox() {\n clearWordBox();\n addSentenceToBox(\"Useful phrases for invitations and plans:\");\n addSentenceToBox(\"\u2022 Are you doing anything on Tuesday night?\");\n addSentenceToBox(\"\u2022 What are you doing on Saturday?\");\n addSentenceToBox(\"\u2022 I\u2019m seeing a movie.\");\n addSentenceToBox(\"\u2022 I\u2019m playing basketball.\");\n addSentenceToBox(\"\u2022 I\u2019m going to a club.\");\n addSentenceToBox(\"\u2022 I\u2019m having a barbecue.\");\n addSentenceToBox(\"\u2022 Do you want to \u2026?\");\n addSentenceToBox(\"\u2022 How about \u2026?\");\n addSentenceToBox(\"\u2022 Let\u2019s go to the movies.\");\n }\n\n function greetUser() {\n const greeting =\n \"Hello! In this activity we will practise making invitations and talking about your plans. Use sentences like: I\u2019m seeing a movie on Tuesday night. Then you can invite me: Do you want to see a movie with me? 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 addSentenceToBox(\"Day \/ time: \" + round.day);\n addSentenceToBox(\"Question: \" + round.question);\n addSentenceToBox(\"Useful activity words:\");\n round.vocab.forEach(v => addSentenceToBox(\"\u2022 \" + v));\n addSentenceToBox(\"Example answer:\");\n addSentenceToBox(round.exampleAnswer);\n if (round.inviteIdea) {\n addSentenceToBox(\"Example invitation:\");\n addSentenceToBox(round.inviteIdea);\n }\n\n appendMessage(round.label + \" \u2013 \" + round.day, \"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 }\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 use the day?\n if (lower.includes(\"tuesday\") || lower.includes(\"wednesday\") ||\n lower.includes(\"friday\") || lower.includes(\"saturday\") ||\n lower.includes(\"sunday\") || round.day === \"any day\") {\n feedbackParts.push(\"Good, you mentioned the day or time.\");\n } else if (round.day !== \"any day\") {\n feedbackParts.push(\"Try to say the day too, for example: On \" + round.day + \" I\u2019m \u2026\");\n }\n\n \/\/ Did they use an activity?\n let usedActivity = false;\n for (const phrase of round.vocab) {\n const simple = phrase.toLowerCase().split(\/[.,]\/)[0];\n if (lower.includes(simple.split(\" \")[0])) {\n usedActivity = true;\n break;\n }\n }\n\n if (usedActivity) {\n feedbackParts.push(positiveFeedback[Math.floor(Math.random() * positiveFeedback.length)]);\n } else {\n feedbackParts.push(constructiveFeedback[Math.floor(Math.random() * constructiveFeedback.length)]);\n }\n\n \/\/ Check for invitation language\n if (lower.includes(\"do you want\") || lower.includes(\"how about\") || lower.includes(\"let's\")) {\n feedbackParts.push(\"Nice invitation! That sounds polite and friendly.\");\n } else if (round.day !== \"any day\") {\n feedbackParts.push(\"Next time, add an invitation, for example: Do you want to \" +\n (round.vocab[0] || \"do something\") + \" with me?\");\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\n if (lower.includes(\"i am go to\") || lower.includes(\"i am going to go to to\")) {\n return 'You can say: \"I\u2019m going to go to the movies\" or \"I\u2019m going to the movies\", but not \"I am go to\".';\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 practising invitations today. Goodbye!\";\n } else {\n message = \"Well done! You finished all the invitations. Keep using these questions 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;\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":252,"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-362","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\/362","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=362"}],"version-history":[{"count":1,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/posts\/362\/revisions"}],"predecessor-version":[{"id":363,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/posts\/362\/revisions\/363"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/media\/252"}],"wp:attachment":[{"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/media?parent=362"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/categories?post=362"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/tags?post=362"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}