People \u2013 Real Life<\/title>\n <style>\n * {\n box-sizing: border-box;\n }\n\n body {\n font-family: Arial, sans-serif;\n background-color: #f4f6f8;\n margin: 0;\n padding: 0;\n display: flex;\n flex-direction: column;\n min-height: 100vh;\n }\n\n .menu {\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: 800px;\n flex: 1;\n }\n\n .image-container {\n flex: 1;\n text-align: center;\n margin-bottom: 15px;\n }\n .image-container img {\n width: 100%;\n height: auto;\n max-height: 300px;\n object-fit: cover;\n border-radius: 15px;\n box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);\n }\n .sentence-text {\n margin: 10px 0;\n font-weight: bold;\n color: #333;\n font-size: 16px;\n }\n .word-box {\n margin-top: 10px;\n padding: 10px;\n background-color: #fff;\n border: 2px solid #28a745;\n border-radius: 8px;\n box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);\n font-size: 16px;\n font-weight: bold;\n color: #28a745;\n text-align: left;\n max-height: 250px;\n overflow-y: auto;\n }\n\n .chat-container {\n background-color: #28a745;\n border-radius: 15px;\n box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);\n border: 3px solid #007bff;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n height: auto;\n max-height: 500px;\n flex: 1;\n }\n .chat-header {\n background-color: #1e7e34;\n color: #fff;\n padding: 12px;\n text-align: center;\n border-bottom: 1px solid #155724;\n position: relative;\n }\n .chat-header h2 {\n margin: 0;\n font-size: 18px;\n }\n .chat-header .loader {\n position: absolute;\n right: 20px;\n top: 50%;\n transform: translateY(-50%);\n display: none;\n }\n .chat-messages {\n padding: 12px;\n overflow-y: auto;\n flex: 1;\n background-color: #fff;\n max-height: 300px;\n }\n .message {\n margin-bottom: 10px;\n padding: 10px;\n border-radius: 6px;\n font-size: 14px;\n line-height: 1.5;\n }\n .user-message {\n background-color: #ffc107;\n color: #fff;\n text-align: right;\n }\n .bot-message {\n background-color: #17a2b8;\n color: #fff;\n text-align: left;\n }\n\n .chat-input {\n display: flex;\n align-items: center;\n background-color: #c3e6cb;\n padding: 10px;\n justify-content: space-between;\n flex-wrap: wrap;\n }\n .send-button, .stop-button {\n background-color: #17a2b8;\n color: #fff;\n font-weight: bold;\n border: none;\n border-radius: 5px;\n padding: 12px 16px;\n cursor: pointer;\n transition: background-color 0.3s;\n flex: 1;\n margin: 6px;\n max-width: 150px;\n font-size: 16px;\n }\n .stop-button {\n background-color: #dc3545;\n }\n .send-button:hover,\n .stop-button:hover,\n .send-button:focus,\n .stop-button:focus {\n background-color: #218838;\n outline: none;\n }\n\n .voice-selection {\n margin: 10px 0;\n width: 100%;\n max-width: 300px;\n }\n .voice-selection label {\n display: block;\n margin-bottom: 5px;\n font-weight: bold;\n color: #333;\n }\n .voice-selection select {\n width: 100%;\n padding: 8px;\n border-radius: 5px;\n border: 1px solid #ccc;\n font-size: 14px;\n }\n\n .loader {\n border: 4px solid #f3f3f3;\n border-top: 4px solid #17a2b8;\n border-radius: 50%;\n width: 20px;\n height: 20px;\n animation: spin 2s linear infinite;\n display: inline-block;\n margin-left: 10px;\n }\n @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 {\n max-height: 200px;\n }\n .chat-header h2 {\n font-size: 20px;\n }\n .message {\n font-size: 15px;\n }\n .send-button, .stop-button {\n font-size: 18px;\n padding: 14px 20px;\n max-width: 200px;\n }\n }\n\n @media (max-width: 768px) {\n .chat-header h2 {\n font-size: 16px;\n }\n .message {\n font-size: 14px;\n }\n .send-button, .stop-button {\n font-size: 16px;\n padding: 12px 16px;\n max-width: 150px;\n }\n .word-box {\n font-size: 15px;\n }\n .voice-selection select {\n font-size: 14px;\n }\n }\n\n @media only screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {\n .chat-header h2 {\n font-size: 18px;\n }\n .send-button, .stop-button {\n padding: 14px 18px;\n font-size: 16px;\n }\n .message {\n font-size: 14px;\n }\n .word-box {\n font-size: 16px;\n }\n }\n <\/style>\n<\/head>\n<body>\n \n <div class=\"menu\">\n <a href=\"https:\/\/i-cte.org\/robot\/people-conversation\/\">Conversation<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/people-vocabulary\/\">Vocabulary<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/people-real-life\/\">Real Life<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/people-describing-pictures\/\">Describing Pictures<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/people-reading-comprehension\/\">Reading<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/people-listening\/\">Listening<\/a>\n <\/div>\n\n <div class=\"container\">\n <div class=\"image-chat-wrapper\">\n <div class=\"image-container\">\n <img decoding=\"async\" src=\"https:\/\/i-cte.org\/robot\/wp-content\/uploads\/2025\/05\/DALL\u00b7E-2025-05-27-23.14.34-A-highly-realistic-human-like-female-robot-in-a-modern-classroom-created-for-a-website-banner.-She-has-human-like-features-natural-skin-tone-brigh.webp\" alt=\"Robot teacher asking about people\">\n <div class=\"sentence-text\">\n Use all the words in each list to describe a person. Listen and answer in full sentences.\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>People \u2013 Real Life<\/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:<\/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\/people-conversation\/\">Conversation<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/people-vocabulary\/\">Vocabulary<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/people-real-life\/\">Real Life<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/people-describing-pictures\/\">Describing Pictures<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/people-reading-comprehension\/\">Reading<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/people-listening\/\">Listening<\/a>\n <\/div>\n\n<script>\n \/\/ All vocabulary from the picture:\n\n const questions = [\n {\n label: \"Conversation 1\",\n person: \"your brother\",\n promptIntro: \"First, let\u2019s talk about your brother.\",\n english: \"Can you describe your brother? Say what he is like and what he looks like.\",\n words: [\n \"brother\",\n \"friendly\",\n \"interesting\",\n \"medium height\",\n \"a mustache\",\n \"middle-aged\"\n ],\n keywords: [\n \"brother\",\n \"friendly\",\n \"interesting\",\n \"medium height\",\n \"mustache\",\n \"a mustache\",\n \"middle-aged\"\n ],\n exampleAnswer:\n \"My brother is friendly and interesting. He is medium height, he has a mustache, and he is middle-aged.\"\n },\n {\n label: \"Conversation 2\",\n person: \"your best friend\",\n promptIntro: \"Now, let\u2019s talk about your best friend.\",\n english: \"Can you describe your best friend? Say what he or she is like and what he or she looks like.\",\n words: [\n \"best friend\",\n \"shy\",\n \"kind\",\n \"fairly short\",\n \"curly brown hair\",\n \"thin\"\n ],\n keywords: [\n \"best friend\",\n \"shy\",\n \"kind\",\n \"fairly short\",\n \"curly brown hair\",\n \"thin\"\n ],\n exampleAnswer:\n \"My best friend is shy but kind. He or she is fairly short, has curly brown hair, and is thin.\"\n },\n {\n label: \"Conversation 3\",\n person: \"your boyfriend\",\n promptIntro: \"Finally, let\u2019s describe your boyfriend, or an imaginary boyfriend.\",\n english: \"Can you describe your boyfriend? Say what he is like and what he looks like.\",\n words: [\n \"boyfriend\",\n \"polite\",\n \"hard-working\",\n \"tall\",\n \"short black hair\",\n \"good-looking\"\n ],\n keywords: [\n \"boyfriend\",\n \"polite\",\n \"hard-working\",\n \"tall\",\n \"short black hair\",\n \"good-looking\"\n ],\n exampleAnswer:\n \"My boyfriend is polite and hard-working. He is tall, has short black hair, and he is good-looking.\"\n }\n ];\n\n const positiveFeedback = [\n \"Great job! You used the adjectives very well.\",\n \"Well done! That description sounds natural.\",\n \"Excellent! You used a lot of the new words.\",\n \"Very good. Your answer is clear and detailed.\",\n \"Fantastic! Nice description of the person.\",\n \"You\u2019re describing people very well. Keep going!\",\n \"Nice! You used several words from the list.\"\n ];\n\n const constructiveFeedback = [\n \"Try to use more of the words from the list, for example: friendly, interesting, medium height, or a mustache.\",\n \"Can you add both personality and appearance? For example: shy and kind, fairly short, curly brown hair, thin.\",\n \"Please use full sentences with he is or she is.\",\n \"Try to say what the person is like and what they look like.\",\n \"Include more words from the list, such as tall, short black hair, or good-looking.\",\n \"Make your answer longer: two or three sentences are better.\",\n \"Try using the pattern: He\u2019s \u2026 and \u2026 . He\u2019s \u2026 and he has \u2026 .\"\n ];\n\n const pronunciationFeedback = [\n \"Good job! Practice saying \u201cmiddle-aged\u201d clearly.\",\n \"Nice answer! Try repeating \u201ccurly brown hair\u201d.\",\n \"Well spoken! Focus on the phrase \u201cshort black hair\u201d.\",\n \"Great effort! Repeat: \u201cHe\u2019s polite and hard-working.\u201d\",\n \"Very good! Try saying \u201cHe\u2019s tall and good-looking\u201d smoothly.\"\n ];\n\n const stopKeywords = [\"goodbye\", \"good bye\", \"bye\", \"bye-bye\", \"byebye\"];\n\n let currentQuestionIndex = 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 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 currentQuestionIndex = 0;\n clearWordBox();\n startLesson();\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 greetUser() {\n const greeting =\n \"Hello! In this lesson we will make three short conversations about people using words like brother, friendly, curly brown hair, and good-looking. Click Start to begin.\";\n appendMessage(greeting, \"bot\");\n showSynthesisLoader(true);\n sayText(greeting, \"en-US\").then(() => showSynthesisLoader(false));\n }\n\n function startLesson() {\n if (!isLessonActive) return;\n\n if (currentQuestionIndex < questions.length) {\n const q = questions[currentQuestionIndex];\n const number = currentQuestionIndex + 1;\n\n clearWordBox();\n addSentenceToBox(q.label);\n addSentenceToBox(\"Talk about: \" + q.person);\n addSentenceToBox(\"Use ALL these words:\");\n q.words.forEach(w => addSentenceToBox(\"\u2022 \" + w));\n addSentenceToBox(\"Example answer:\");\n addSentenceToBox(q.exampleAnswer);\n\n const intro = `${q.label}. ${q.promptIntro} Use all the words from the list.`;\n const questionText = `Conversation ${number}. ${q.english}`;\n\n appendMessage(q.label + \" \u2013 describing \" + q.person, \"bot\");\n appendMessage(questionText, \"bot\");\n\n showSynthesisLoader(true);\n const toSay = `${q.promptIntro} Here are the words: ${q.words.join(\", \")}. ${q.english}`;\n sayText(toSay, \"en-US\").then(() => {\n showSynthesisLoader(false);\n listenUserResponse(q);\n });\n } else {\n endLesson(false);\n }\n }\n\n function listenUserResponse(question) {\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 let feedbackMessage = \"\";\n const grammarFeedback = checkGrammar(formattedInput);\n\n if (grammarFeedback) {\n feedbackMessage = grammarFeedback;\n } else {\n const feedbackType = analyzeResponse(formattedInput, question.keywords);\n if (feedbackType === \"pronunciation\") {\n feedbackMessage =\n pronunciationFeedback[Math.floor(Math.random() * pronunciationFeedback.length)];\n } else if (feedbackType === \"positive\") {\n feedbackMessage = positiveFeedback[Math.floor(Math.random() * positiveFeedback.length)];\n } else {\n feedbackMessage =\n constructiveFeedback[Math.floor(Math.random() * constructiveFeedback.length)];\n }\n }\n\n appendMessage(feedbackMessage, \"bot\");\n showSynthesisLoader(true);\n sayText(feedbackMessage, \"en-US\").then(() => {\n showSynthesisLoader(false);\n currentQuestionIndex++;\n setTimeout(startLesson, 2500);\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 and try again.\";\n }\n\n appendMessage(msg, \"bot\");\n\n const retryMessage = \"Let's try that conversation again.\";\n appendMessage(retryMessage, \"bot\");\n showSynthesisLoader(true);\n sayText(retryMessage, \"en-US\").then(() => {\n showSynthesisLoader(false);\n setTimeout(() => listenUserResponse(question), 2500);\n });\n };\n }\n\n function analyzeResponse(userInput, keywords) {\n const text = userInput.toLowerCase();\n for (let keyword of keywords) {\n if (text.includes(keyword.toLowerCase())) {\n if (\n keyword.toLowerCase().includes(\"curly brown hair\") ||\n keyword.toLowerCase().includes(\"short black hair\") ||\n keyword.toLowerCase().includes(\"middle-aged\")\n ) {\n return \"pronunciation\";\n }\n return \"positive\";\n }\n }\n return \"constructive\";\n }\n\n \/\/ Simple grammar help for describing people\n function checkGrammar(userInput) {\n const lower = userInput.toLowerCase();\n\n if (lower.includes(\"he is have a mustache\")) {\n return 'You can say: \"He is medium height and he has a mustache.\"';\n }\n if (lower.includes(\"he is curly brown hair\") || lower.includes(\"she is curly brown hair\")) {\n return 'You can say: \"He has curly brown hair.\" or \"She has curly brown hair.\"';\n }\n if (lower.includes(\"he is short black hair\")) {\n return 'You can say: \"He has short black hair.\"';\n }\n if (lower.includes(\"he very hard working\")) {\n return 'You can say: \"He is very hard-working.\"';\n }\n if (lower.includes(\"he is a thin\") || lower.includes(\"she is a thin\")) {\n return 'You can say: \"He is thin.\" or \"She is thin.\" (no a).';\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\"\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 practicing conversations about people. Goodbye!\";\n } else {\n message = \"Well done! You finished all three conversations. Keep practicing describing people!\";\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","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":175,"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-332","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\/332","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=332"}],"version-history":[{"count":2,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/posts\/332\/revisions"}],"predecessor-version":[{"id":343,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/posts\/332\/revisions\/343"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/media\/175"}],"wp:attachment":[{"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/media?parent=332"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/categories?post=332"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/tags?post=332"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":332,"date":"2025-11-25T15:18:36","date_gmt":"2025-11-25T15:18:36","guid":{"rendered":"https:\/\/i-cte.org\/robot\/?p=332"},"modified":"2025-11-25T15:28:14","modified_gmt":"2025-11-25T15:28:14","slug":"people-real-life","status":"publish","type":"post","link":"https:\/\/i-cte.org\/robot\/people-real-life\/","title":{"rendered":"People \u2013 Real Life"},"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 People \u2013 Real Life<\/title>\n <style>\n * {\n box-sizing: border-box;\n }\n\n body {\n font-family: Arial, sans-serif;\n background-color: #f4f6f8;\n margin: 0;\n padding: 0;\n display: flex;\n flex-direction: column;\n min-height: 100vh;\n }\n\n .menu {\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: 800px;\n flex: 1;\n }\n\n .image-container {\n flex: 1;\n text-align: center;\n margin-bottom: 15px;\n }\n .image-container img {\n width: 100%;\n height: auto;\n max-height: 300px;\n object-fit: cover;\n border-radius: 15px;\n box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);\n }\n .sentence-text {\n margin: 10px 0;\n font-weight: bold;\n color: #333;\n font-size: 16px;\n }\n .word-box {\n margin-top: 10px;\n padding: 10px;\n background-color: #fff;\n border: 2px solid #28a745;\n border-radius: 8px;\n box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);\n font-size: 16px;\n font-weight: bold;\n color: #28a745;\n text-align: left;\n max-height: 250px;\n overflow-y: auto;\n }\n\n .chat-container {\n background-color: #28a745;\n border-radius: 15px;\n box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);\n border: 3px solid #007bff;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n height: auto;\n max-height: 500px;\n flex: 1;\n }\n .chat-header {\n background-color: #1e7e34;\n color: #fff;\n padding: 12px;\n text-align: center;\n border-bottom: 1px solid #155724;\n position: relative;\n }\n .chat-header h2 {\n margin: 0;\n font-size: 18px;\n }\n .chat-header .loader {\n position: absolute;\n right: 20px;\n top: 50%;\n transform: translateY(-50%);\n display: none;\n }\n .chat-messages {\n padding: 12px;\n overflow-y: auto;\n flex: 1;\n background-color: #fff;\n max-height: 300px;\n }\n .message {\n margin-bottom: 10px;\n padding: 10px;\n border-radius: 6px;\n font-size: 14px;\n line-height: 1.5;\n }\n .user-message {\n background-color: #ffc107;\n color: #fff;\n text-align: right;\n }\n .bot-message {\n background-color: #17a2b8;\n color: #fff;\n text-align: left;\n }\n\n .chat-input {\n display: flex;\n align-items: center;\n background-color: #c3e6cb;\n padding: 10px;\n justify-content: space-between;\n flex-wrap: wrap;\n }\n .send-button, .stop-button {\n background-color: #17a2b8;\n color: #fff;\n font-weight: bold;\n border: none;\n border-radius: 5px;\n padding: 12px 16px;\n cursor: pointer;\n transition: background-color 0.3s;\n flex: 1;\n margin: 6px;\n max-width: 150px;\n font-size: 16px;\n }\n .stop-button {\n background-color: #dc3545;\n }\n .send-button:hover,\n .stop-button:hover,\n .send-button:focus,\n .stop-button:focus {\n background-color: #218838;\n outline: none;\n }\n\n .voice-selection {\n margin: 10px 0;\n width: 100%;\n max-width: 300px;\n }\n .voice-selection label {\n display: block;\n margin-bottom: 5px;\n font-weight: bold;\n color: #333;\n }\n .voice-selection select {\n width: 100%;\n padding: 8px;\n border-radius: 5px;\n border: 1px solid #ccc;\n font-size: 14px;\n }\n\n .loader {\n border: 4px solid #f3f3f3;\n border-top: 4px solid #17a2b8;\n border-radius: 50%;\n width: 20px;\n height: 20px;\n animation: spin 2s linear infinite;\n display: inline-block;\n margin-left: 10px;\n }\n @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 {\n max-height: 200px;\n }\n .chat-header h2 {\n font-size: 20px;\n }\n .message {\n font-size: 15px;\n }\n .send-button, .stop-button {\n font-size: 18px;\n padding: 14px 20px;\n max-width: 200px;\n }\n }\n\n @media (max-width: 768px) {\n .chat-header h2 {\n font-size: 16px;\n }\n .message {\n font-size: 14px;\n }\n .send-button, .stop-button {\n font-size: 16px;\n padding: 12px 16px;\n max-width: 150px;\n }\n .word-box {\n font-size: 15px;\n }\n .voice-selection select {\n font-size: 14px;\n }\n }\n\n @media only screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {\n .chat-header h2 {\n font-size: 18px;\n }\n .send-button, .stop-button {\n padding: 14px 18px;\n font-size: 16px;\n }\n .message {\n font-size: 14px;\n }\n .word-box {\n font-size: 16px;\n }\n }\n <\/style>\n<\/head>\n<body>\n \n <div class=\"menu\">\n <a href=\"https:\/\/i-cte.org\/robot\/people-conversation\/\">Conversation<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/people-vocabulary\/\">Vocabulary<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/people-real-life\/\">Real Life<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/people-describing-pictures\/\">Describing Pictures<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/people-reading-comprehension\/\">Reading<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/people-listening\/\">Listening<\/a>\n <\/div>\n\n <div class=\"container\">\n <div class=\"image-chat-wrapper\">\n <div class=\"image-container\">\n <img decoding=\"async\" src=\"https:\/\/i-cte.org\/robot\/wp-content\/uploads\/2025\/05\/DALL\u00b7E-2025-05-27-23.14.34-A-highly-realistic-human-like-female-robot-in-a-modern-classroom-created-for-a-website-banner.-She-has-human-like-features-natural-skin-tone-brigh.webp\" alt=\"Robot teacher asking about people\">\n <div class=\"sentence-text\">\n Use all the words in each list to describe a person. Listen and answer in full sentences.\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>People \u2013 Real Life<\/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:<\/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\/people-conversation\/\">Conversation<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/people-vocabulary\/\">Vocabulary<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/people-real-life\/\">Real Life<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/people-describing-pictures\/\">Describing Pictures<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/people-reading-comprehension\/\">Reading<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/people-listening\/\">Listening<\/a>\n <\/div>\n\n<script>\n \/\/ All vocabulary from the picture:\n\n const questions = [\n {\n label: \"Conversation 1\",\n person: \"your brother\",\n promptIntro: \"First, let\u2019s talk about your brother.\",\n english: \"Can you describe your brother? Say what he is like and what he looks like.\",\n words: [\n \"brother\",\n \"friendly\",\n \"interesting\",\n \"medium height\",\n \"a mustache\",\n \"middle-aged\"\n ],\n keywords: [\n \"brother\",\n \"friendly\",\n \"interesting\",\n \"medium height\",\n \"mustache\",\n \"a mustache\",\n \"middle-aged\"\n ],\n exampleAnswer:\n \"My brother is friendly and interesting. He is medium height, he has a mustache, and he is middle-aged.\"\n },\n {\n label: \"Conversation 2\",\n person: \"your best friend\",\n promptIntro: \"Now, let\u2019s talk about your best friend.\",\n english: \"Can you describe your best friend? Say what he or she is like and what he or she looks like.\",\n words: [\n \"best friend\",\n \"shy\",\n \"kind\",\n \"fairly short\",\n \"curly brown hair\",\n \"thin\"\n ],\n keywords: [\n \"best friend\",\n \"shy\",\n \"kind\",\n \"fairly short\",\n \"curly brown hair\",\n \"thin\"\n ],\n exampleAnswer:\n \"My best friend is shy but kind. He or she is fairly short, has curly brown hair, and is thin.\"\n },\n {\n label: \"Conversation 3\",\n person: \"your boyfriend\",\n promptIntro: \"Finally, let\u2019s describe your boyfriend, or an imaginary boyfriend.\",\n english: \"Can you describe your boyfriend? Say what he is like and what he looks like.\",\n words: [\n \"boyfriend\",\n \"polite\",\n \"hard-working\",\n \"tall\",\n \"short black hair\",\n \"good-looking\"\n ],\n keywords: [\n \"boyfriend\",\n \"polite\",\n \"hard-working\",\n \"tall\",\n \"short black hair\",\n \"good-looking\"\n ],\n exampleAnswer:\n \"My boyfriend is polite and hard-working. He is tall, has short black hair, and he is good-looking.\"\n }\n ];\n\n const positiveFeedback = [\n \"Great job! You used the adjectives very well.\",\n \"Well done! That description sounds natural.\",\n \"Excellent! You used a lot of the new words.\",\n \"Very good. Your answer is clear and detailed.\",\n \"Fantastic! Nice description of the person.\",\n \"You\u2019re describing people very well. Keep going!\",\n \"Nice! You used several words from the list.\"\n ];\n\n const constructiveFeedback = [\n \"Try to use more of the words from the list, for example: friendly, interesting, medium height, or a mustache.\",\n \"Can you add both personality and appearance? For example: shy and kind, fairly short, curly brown hair, thin.\",\n \"Please use full sentences with he is or she is.\",\n \"Try to say what the person is like and what they look like.\",\n \"Include more words from the list, such as tall, short black hair, or good-looking.\",\n \"Make your answer longer: two or three sentences are better.\",\n \"Try using the pattern: He\u2019s \u2026 and \u2026 . He\u2019s \u2026 and he has \u2026 .\"\n ];\n\n const pronunciationFeedback = [\n \"Good job! Practice saying \u201cmiddle-aged\u201d clearly.\",\n \"Nice answer! Try repeating \u201ccurly brown hair\u201d.\",\n \"Well spoken! Focus on the phrase \u201cshort black hair\u201d.\",\n \"Great effort! Repeat: \u201cHe\u2019s polite and hard-working.\u201d\",\n \"Very good! Try saying \u201cHe\u2019s tall and good-looking\u201d smoothly.\"\n ];\n\n const stopKeywords = [\"goodbye\", \"good bye\", \"bye\", \"bye-bye\", \"byebye\"];\n\n let currentQuestionIndex = 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 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 currentQuestionIndex = 0;\n clearWordBox();\n startLesson();\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 greetUser() {\n const greeting =\n \"Hello! In this lesson we will make three short conversations about people using words like brother, friendly, curly brown hair, and good-looking. Click Start to begin.\";\n appendMessage(greeting, \"bot\");\n showSynthesisLoader(true);\n sayText(greeting, \"en-US\").then(() => showSynthesisLoader(false));\n }\n\n function startLesson() {\n if (!isLessonActive) return;\n\n if (currentQuestionIndex < questions.length) {\n const q = questions[currentQuestionIndex];\n const number = currentQuestionIndex + 1;\n\n clearWordBox();\n addSentenceToBox(q.label);\n addSentenceToBox(\"Talk about: \" + q.person);\n addSentenceToBox(\"Use ALL these words:\");\n q.words.forEach(w => addSentenceToBox(\"\u2022 \" + w));\n addSentenceToBox(\"Example answer:\");\n addSentenceToBox(q.exampleAnswer);\n\n const intro = `${q.label}. ${q.promptIntro} Use all the words from the list.`;\n const questionText = `Conversation ${number}. ${q.english}`;\n\n appendMessage(q.label + \" \u2013 describing \" + q.person, \"bot\");\n appendMessage(questionText, \"bot\");\n\n showSynthesisLoader(true);\n const toSay = `${q.promptIntro} Here are the words: ${q.words.join(\", \")}. ${q.english}`;\n sayText(toSay, \"en-US\").then(() => {\n showSynthesisLoader(false);\n listenUserResponse(q);\n });\n } else {\n endLesson(false);\n }\n }\n\n function listenUserResponse(question) {\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 let feedbackMessage = \"\";\n const grammarFeedback = checkGrammar(formattedInput);\n\n if (grammarFeedback) {\n feedbackMessage = grammarFeedback;\n } else {\n const feedbackType = analyzeResponse(formattedInput, question.keywords);\n if (feedbackType === \"pronunciation\") {\n feedbackMessage =\n pronunciationFeedback[Math.floor(Math.random() * pronunciationFeedback.length)];\n } else if (feedbackType === \"positive\") {\n feedbackMessage = positiveFeedback[Math.floor(Math.random() * positiveFeedback.length)];\n } else {\n feedbackMessage =\n constructiveFeedback[Math.floor(Math.random() * constructiveFeedback.length)];\n }\n }\n\n appendMessage(feedbackMessage, \"bot\");\n showSynthesisLoader(true);\n sayText(feedbackMessage, \"en-US\").then(() => {\n showSynthesisLoader(false);\n currentQuestionIndex++;\n setTimeout(startLesson, 2500);\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 and try again.\";\n }\n\n appendMessage(msg, \"bot\");\n\n const retryMessage = \"Let's try that conversation again.\";\n appendMessage(retryMessage, \"bot\");\n showSynthesisLoader(true);\n sayText(retryMessage, \"en-US\").then(() => {\n showSynthesisLoader(false);\n setTimeout(() => listenUserResponse(question), 2500);\n });\n };\n }\n\n function analyzeResponse(userInput, keywords) {\n const text = userInput.toLowerCase();\n for (let keyword of keywords) {\n if (text.includes(keyword.toLowerCase())) {\n if (\n keyword.toLowerCase().includes(\"curly brown hair\") ||\n keyword.toLowerCase().includes(\"short black hair\") ||\n keyword.toLowerCase().includes(\"middle-aged\")\n ) {\n return \"pronunciation\";\n }\n return \"positive\";\n }\n }\n return \"constructive\";\n }\n\n \/\/ Simple grammar help for describing people\n function checkGrammar(userInput) {\n const lower = userInput.toLowerCase();\n\n if (lower.includes(\"he is have a mustache\")) {\n return 'You can say: \"He is medium height and he has a mustache.\"';\n }\n if (lower.includes(\"he is curly brown hair\") || lower.includes(\"she is curly brown hair\")) {\n return 'You can say: \"He has curly brown hair.\" or \"She has curly brown hair.\"';\n }\n if (lower.includes(\"he is short black hair\")) {\n return 'You can say: \"He has short black hair.\"';\n }\n if (lower.includes(\"he very hard working\")) {\n return 'You can say: \"He is very hard-working.\"';\n }\n if (lower.includes(\"he is a thin\") || lower.includes(\"she is a thin\")) {\n return 'You can say: \"He is thin.\" or \"She is thin.\" (no a).';\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\"\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 practicing conversations about people. Goodbye!\";\n } else {\n message = \"Well done! You finished all three conversations. Keep practicing describing people!\";\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","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":175,"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-332","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\/332","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=332"}],"version-history":[{"count":2,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/posts\/332\/revisions"}],"predecessor-version":[{"id":343,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/posts\/332\/revisions\/343"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/media\/175"}],"wp:attachment":[{"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/media?parent=332"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/categories?post=332"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/tags?post=332"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}