What’s happening? – Describing pictures<\/title>\n <style>\n \/* Reset and Base Styles *\/\n * {\n box-sizing: border-box;\n }\n\n body {\n font-family: Arial, sans-serif;\n background-color: #f4f6f8;\n margin: 0;\n padding: 0;\n display: flex;\n flex-direction: column;\n min-height: 100vh;\n }\n\n \/* Menu Styles *\/\n .menu {\n width: 100%;\n background-color: #28a745;\n padding: 10px;\n text-align: center;\n box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);\n margin-bottom: 10px;\n overflow-x: auto;\n white-space: nowrap;\n }\n .menu a {\n color: #fff;\n text-decoration: none;\n margin: 0 10px;\n font-weight: bold;\n font-size: 14px;\n display: inline-block;\n }\n .menu a:hover,\n .menu a:focus {\n text-decoration: underline;\n outline: 2px dashed #fff;\n outline-offset: 4px;\n }\n\n \/* Container Styles *\/\n .container {\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 10px;\n box-sizing: border-box;\n flex: 1 0 auto;\n width: 100%;\n }\n\n \/* Image and Chat Containers *\/\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 Styles *\/\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 Styles *\/\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; \/* blue border for chatbot *\/\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 \/* Loader Indicator *\/\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 Styles *\/\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 Styles *\/\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 Styles *\/\n .loader {\n border: 4px solid #f3f3f3;\n border-top: 4px solid #17a2b8;\n border-radius: 50%;\n width: 20px;\n height: 20px;\n animation: spin 2s linear infinite;\n display: inline-block;\n margin-left: 10px;\n }\n\n @keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n }\n\n \/* Responsive Design Adjustments *\/\n\n \/* Portrait Mode *\/\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 \/* Landscape Mode *\/\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 \/* General Mobile Responsiveness *\/\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 \/* Samsung Android Specific Adjustments *\/\n @media only screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {\n .chat-header h2 {\n font-size: 18px;\n }\n .send-button, .stop-button {\n padding: 14px 18px;\n font-size: 16px;\n }\n .message {\n font-size: 14px;\n }\n .word-box {\n font-size: 16px;\n }\n .chat-input input {\n font-size: 16px;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"menu\">\n<a href=\"https:\/\/i-cte.org\/robot\/whats-happening-conversation\/\">Conversation<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/whats-happening-vocabulary\/\">Vocabulary<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/whats-happening-real-life\/\">Real Life<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/whats-happening-describing-pictures\/\">Describing Pictures<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/whats-happening-job-application\/\">Job Application<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/whats-happening-speaking\/\">Speaking<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/whats-happening-reading-comprehension\/\">Reading<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/whats-happening-practice\/\">Practice<\/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\/11\/Picture.png\" alt=\"Robot teacher asking what's happening now\">\n <div class=\"sentence-text\">Listen to the questions about what is happening now and these days. Answer in full sentences.<\/div>\n <div id=\"word-box\" class=\"word-box\">\n \n <\/div>\n <\/div>\n <div class=\"chat-container\">\n <div class=\"chat-header\">\n <h2>What’s happening? – Describing pictures<\/h2>\n <div class=\"loader\" id=\"synthesis-loader\"><\/div>\n <\/div>\n <div class=\"chat-messages\" id=\"chat-messages\">\n \n <\/div>\n <div class=\"chat-input\">\n \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 \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\/whats-happening-conversation\/\">Conversation<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/whats-happening-vocabulary\/\">Vocabulary<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/whats-happening-real-life\/\">Real Life<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/whats-happening-describing-pictures\/\">Describing Pictures<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/whats-happening-job-application\/\">Job Application<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/whats-happening-speaking\/\">Speaking<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/whats-happening-reading-comprehension\/\">Reading<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/whats-happening-practice\/\">Practice<\/a>\n <\/div>\n<script>\n \/\/ Picture-based questions \u2013 \u201cWhat\u2019s happening in the building?\u201d\n const questions = [\n { \n english: \"Look at the top left apartment. What is the man in the bathroom doing?\", \n keywords: [\"taking a bath\", \"in the bath\", \"bathroom\"],\n answer: \"He\u2019s taking a bath.\"\n },\n { \n english: \"Look at the woman in the middle of the top floor. What is she doing?\", \n keywords: [\"doing the laundry\", \"washing the clothes\", \"washing clothes\", \"laundry\"],\n answer: \"She\u2019s doing the laundry. She\u2019s washing the clothes.\"\n },\n { \n english: \"Look at the man with the plants on the top floor. What is he doing?\", \n keywords: [\"watering the plants\", \"watering plants\", \"gardening\"],\n answer: \"He\u2019s watering the plants on the balcony.\"\n },\n { \n english: \"Look at the two kids on the right outside the building. What are they doing?\", \n keywords: [\"dancing\", \"listening to music\", \"music\"],\n answer: \"They\u2019re dancing and listening to loud music.\"\n },\n { \n english: \"Look at the family in the living room on the middle floor. What are they doing?\", \n keywords: [\"watching TV\", \"watching television\", \"watching a movie\"],\n answer: \"They\u2019re watching TV together.\"\n },\n { \n english: \"Look at the boy on the stairs in the middle of the building. What is he doing?\", \n keywords: [\"reading\", \"reading a comic\", \"reading a book\"],\n answer: \"He\u2019s sitting on the stairs and reading a comic book.\"\n },\n { \n english: \"Look at the man on the sofa with headphones. What is he doing?\", \n keywords: [\"listening to music\", \"relaxing\", \"lying on the sofa\"],\n answer: \"He\u2019s lying on the sofa and listening to music.\"\n },\n { \n english: \"Look at the woman in the bedroom on the right. What is she doing?\", \n keywords: [\"making the bed\", \"making her bed\"],\n answer: \"She\u2019s making the bed.\"\n },\n { \n english: \"Look at the two people in the kitchen on the first floor. What are they doing?\", \n keywords: [\"cooking dinner\", \"making dinner\", \"doing the dishes\", \"cooking\"],\n answer: \"They\u2019re cooking dinner and doing the dishes.\"\n },\n { \n english: \"Look at the children outside near the trees. What are they doing?\", \n keywords: [\"playing basketball\", \"playing outside\", \"basketball\"],\n answer: \"They\u2019re playing basketball in the yard.\"\n }\n ];\n\n \/\/ Positive feedback\n const positiveFeedback = [\n \"Great job!\",\n \"Well done!\",\n \"Excellent sentence!\",\n \"Very good.\",\n \"Your answer was clear and natural.\",\n \"Fantastic!\",\n \"You\u2019re using he\u2019s, she\u2019s, and they\u2019re very well.\",\n \"Nice use of the present continuous.\"\n ];\n\n \/\/ Constructive feedback \u2013 focus on he\/she\/they + -ing and picture vocab\n const constructiveFeedback = [\n \"Try to use he\u2019s, she\u2019s, or they\u2019re plus a verb with -ing. For example: She\u2019s making dinner.\",\n \"Can you include the action from the picture, like watching TV, taking a bath, or playing basketball?\",\n \"Remember to say what the person is doing now, not what they usually do.\",\n \"Try to use a full sentence, for example: He\u2019s watering the plants.\",\n \"Including words like in the kitchen, on the balcony, or in the living room will make your answer better.\",\n \"Think about the picture: What is happening right now in that room?\",\n \"Try to say: He\u2019s \u2026, She\u2019s \u2026, or They\u2019re \u2026 to describe the people.\",\n \"You can add more detail, like where they are or what they are using.\",\n \"Use the present continuous: is \/ are + verb-ing, for example: They\u2019re playing basketball.\",\n \"Make sure your sentence matches the picture exactly.\"\n ];\n\n \/\/ Pronunciation feedback \u2013 picture vocabulary\n const pronunciationFeedback = [\n \"Good job! Try to say \u201capartment\u201d clearly: a-PART-ment.\",\n \"Nice answer! Practice the phrase \u201cwatching TV\u201d smoothly.\",\n \"Well spoken! Focus on the word \u201cbasketball\u201d \u2013 BAS-ket-ball.\",\n \"Great effort! Pay attention to the -ing endings in taking, watching, and playing.\",\n \"Your pronunciation is clear. For extra practice, repeat: \u201cShe\u2019s making the bed in the bedroom.\u201d\"\n ];\n\n \/\/ Stop keywords\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(voice => desiredVoiceNames.includes(voice.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 if (filteredVoices.length > 0) {\n voiceSelect.selectedIndex = 0;\n selectedVoice = filteredVoices[0];\n }\n\n voiceSelect.onchange = () => {\n const selectedIndex = voiceSelect.value;\n selectedVoice = filteredVoices[selectedIndex];\n console.log(`Selected voice: ${selectedVoice.name}`);\n };\n }\n\n function greetUser() {\n const greeting = \"Hello! In this lesson, you will look at the big apartment picture and describe what the people are doing. Use sentences like: He\u2019s watching TV. She\u2019s making dinner. Are you ready? Click Start to begin!\";\n appendMessage(greeting, 'bot');\n showSynthesisLoader(true);\n sayText(greeting, \"en-US\").then(() => {\n showSynthesisLoader(false);\n });\n }\n\n function startLesson() {\n if (currentQuestionIndex < questions.length) {\n const question = questions[currentQuestionIndex];\n const questionNumber = currentQuestionIndex + 1;\n const questionText = `Question ${questionNumber}: ${question.english}`;\n\n appendMessage(questionText, 'bot');\n addSentenceToBox(`Q${questionNumber}: ${question.english}`);\n showSynthesisLoader(true);\n sayText(questionText, \"en-US\").then(() => {\n showSynthesisLoader(false);\n addSentenceToBox(`Answer: ${question.answer}`);\n listenUserResponse(question);\n });\n } else {\n endLesson(false);\n }\n }\n\n function listenUserResponse(question) {\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\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 appendMessage(formattedInput, 'user');\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 if (grammarFeedback) {\n feedbackMessage = grammarFeedback;\n } else {\n const feedbackType = analyzeResponse(formattedInput, question.keywords);\n if (feedbackType === \"pronunciation\") {\n feedbackMessage = 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 = 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(() => {\n startLesson();\n }, 3000);\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 errorMessage = 'Error: ' + event.error;\n\n if (event.error === 'not-allowed') {\n errorMessage = \"Microphone access was not allowed. Please allow microphone access in your browser settings and try again.\";\n }\n\n appendMessage(errorMessage, 'bot');\n\n const chatMessages = document.getElementById('chat-messages');\n chatMessages.innerHTML = '';\n\n const retryMessage = \"Let's try that question again.\";\n appendMessage(retryMessage, 'bot');\n showSynthesisLoader(true);\n sayText(retryMessage, \"en-US\").then(() => {\n showSynthesisLoader(false);\n setTimeout(() => {\n listenUserResponse(question);\n }, 3000);\n });\n };\n }\n\n \/\/ Analyze response using keywords\n function analyzeResponse(userInput, keywords) {\n const lowerCaseInput = userInput.toLowerCase();\n for (let keyword of keywords) {\n if (lowerCaseInput.includes(keyword.toLowerCase())) {\n if (keyword.toLowerCase().includes(\"basketball\") || keyword.toLowerCase().includes(\"apartment\")) {\n return \"pronunciation\"; \/\/ sometimes give pronunciation feedback on tricky words\n }\n return \"positive\";\n }\n }\n return \"constructive\";\n }\n\n \/\/ Simple grammar help: add is\/are and -ing for he\/she\/they\n function checkGrammar(userInput) {\n const lower = userInput.toLowerCase();\n\n if (lower.includes(\"he watching\")) {\n return 'Try: \"He is watching TV.\" or \"He\u2019s watching TV.\"';\n }\n if (lower.includes(\"she making\")) {\n return 'Try: \"She is making the bed.\" or \"She\u2019s making the bed.\"';\n }\n if (lower.includes(\"they playing\")) {\n return 'Try: \"They are playing basketball.\" or \"They\u2019re playing basketball.\"';\n }\n if (lower.includes(\"he take a bath\") || lower.includes(\"he taking a bath\") && !lower.includes(\"is\")) {\n return 'Try: \"He is taking a bath.\" or \"He\u2019s taking a bath.\"';\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 = ['who', 'what', 'where', 'when', 'why', 'how', 'is', 'are', 'do', 'does', 'can', 'should', 'will', 'would'];\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 wordBox = document.getElementById('word-box');\n const sentenceElement = document.createElement('div');\n sentenceElement.innerText = sentence;\n wordBox.appendChild(sentenceElement);\n wordBox.scrollTop = wordBox.scrollHeight;\n }\n\n function clearWordBox() {\n const wordBox = document.getElementById('word-box');\n wordBox.innerHTML = \"\";\n }\n\n function endLesson(userStopped = false) {\n if (speechSynthesisSupported) {\n window.speechSynthesis.cancel();\n }\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 describing the picture with me! Goodbye!\";\n } else {\n message = \"Well done! You\u2019ve described all the people in the picture. Keep practicing!\";\n }\n appendMessage(message, \"bot\");\n showSynthesisLoader(true);\n sayText(message, \"en-US\").then(() => {\n showSynthesisLoader(false);\n });\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 = function() {\n resolve();\n };\n\n utterance.onerror = function(event) {\n console.error('Speech synthesis error:', event.error);\n resolve();\n };\n\n window.speechSynthesis.speak(utterance);\n });\n }\n\n function appendMessage(text, sender) {\n const messageContainer = document.getElementById('chat-messages');\n const messageElement = document.createElement('div');\n messageElement.classList.add('message');\n messageElement.classList.add(sender === 'bot' ? 'bot-message' : 'user-message');\n messageElement.innerText = text;\n messageContainer.appendChild(messageElement);\n messageContainer.scrollTop = messageContainer.scrollHeight;\n }\n\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":292,"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-291","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\/291","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=291"}],"version-history":[{"count":2,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/posts\/291\/revisions"}],"predecessor-version":[{"id":315,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/posts\/291\/revisions\/315"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/media\/292"}],"wp:attachment":[{"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/media?parent=291"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/categories?post=291"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/tags?post=291"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":291,"date":"2025-11-21T11:47:08","date_gmt":"2025-11-21T11:47:08","guid":{"rendered":"https:\/\/i-cte.org\/robot\/?p=291"},"modified":"2025-11-25T08:10:05","modified_gmt":"2025-11-25T08:10:05","slug":"whats-happening-describing-pictures","status":"publish","type":"post","link":"https:\/\/i-cte.org\/robot\/whats-happening-describing-pictures\/","title":{"rendered":"What\u2019s happening? – 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 What’s happening? – Describing pictures<\/title>\n <style>\n \/* Reset and Base Styles *\/\n * {\n box-sizing: border-box;\n }\n\n body {\n font-family: Arial, sans-serif;\n background-color: #f4f6f8;\n margin: 0;\n padding: 0;\n display: flex;\n flex-direction: column;\n min-height: 100vh;\n }\n\n \/* Menu Styles *\/\n .menu {\n width: 100%;\n background-color: #28a745;\n padding: 10px;\n text-align: center;\n box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);\n margin-bottom: 10px;\n overflow-x: auto;\n white-space: nowrap;\n }\n .menu a {\n color: #fff;\n text-decoration: none;\n margin: 0 10px;\n font-weight: bold;\n font-size: 14px;\n display: inline-block;\n }\n .menu a:hover,\n .menu a:focus {\n text-decoration: underline;\n outline: 2px dashed #fff;\n outline-offset: 4px;\n }\n\n \/* Container Styles *\/\n .container {\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 10px;\n box-sizing: border-box;\n flex: 1 0 auto;\n width: 100%;\n }\n\n \/* Image and Chat Containers *\/\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 Styles *\/\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 Styles *\/\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; \/* blue border for chatbot *\/\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 \/* Loader Indicator *\/\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 Styles *\/\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 Styles *\/\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 Styles *\/\n .loader {\n border: 4px solid #f3f3f3;\n border-top: 4px solid #17a2b8;\n border-radius: 50%;\n width: 20px;\n height: 20px;\n animation: spin 2s linear infinite;\n display: inline-block;\n margin-left: 10px;\n }\n\n @keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n }\n\n \/* Responsive Design Adjustments *\/\n\n \/* Portrait Mode *\/\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 \/* Landscape Mode *\/\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 \/* General Mobile Responsiveness *\/\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 \/* Samsung Android Specific Adjustments *\/\n @media only screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {\n .chat-header h2 {\n font-size: 18px;\n }\n .send-button, .stop-button {\n padding: 14px 18px;\n font-size: 16px;\n }\n .message {\n font-size: 14px;\n }\n .word-box {\n font-size: 16px;\n }\n .chat-input input {\n font-size: 16px;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"menu\">\n<a href=\"https:\/\/i-cte.org\/robot\/whats-happening-conversation\/\">Conversation<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/whats-happening-vocabulary\/\">Vocabulary<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/whats-happening-real-life\/\">Real Life<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/whats-happening-describing-pictures\/\">Describing Pictures<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/whats-happening-job-application\/\">Job Application<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/whats-happening-speaking\/\">Speaking<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/whats-happening-reading-comprehension\/\">Reading<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/whats-happening-practice\/\">Practice<\/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\/11\/Picture.png\" alt=\"Robot teacher asking what's happening now\">\n <div class=\"sentence-text\">Listen to the questions about what is happening now and these days. Answer in full sentences.<\/div>\n <div id=\"word-box\" class=\"word-box\">\n \n <\/div>\n <\/div>\n <div class=\"chat-container\">\n <div class=\"chat-header\">\n <h2>What’s happening? – Describing pictures<\/h2>\n <div class=\"loader\" id=\"synthesis-loader\"><\/div>\n <\/div>\n <div class=\"chat-messages\" id=\"chat-messages\">\n \n <\/div>\n <div class=\"chat-input\">\n \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 \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\/whats-happening-conversation\/\">Conversation<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/whats-happening-vocabulary\/\">Vocabulary<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/whats-happening-real-life\/\">Real Life<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/whats-happening-describing-pictures\/\">Describing Pictures<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/whats-happening-job-application\/\">Job Application<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/whats-happening-speaking\/\">Speaking<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/whats-happening-reading-comprehension\/\">Reading<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/whats-happening-practice\/\">Practice<\/a>\n <\/div>\n<script>\n \/\/ Picture-based questions \u2013 \u201cWhat\u2019s happening in the building?\u201d\n const questions = [\n { \n english: \"Look at the top left apartment. What is the man in the bathroom doing?\", \n keywords: [\"taking a bath\", \"in the bath\", \"bathroom\"],\n answer: \"He\u2019s taking a bath.\"\n },\n { \n english: \"Look at the woman in the middle of the top floor. What is she doing?\", \n keywords: [\"doing the laundry\", \"washing the clothes\", \"washing clothes\", \"laundry\"],\n answer: \"She\u2019s doing the laundry. She\u2019s washing the clothes.\"\n },\n { \n english: \"Look at the man with the plants on the top floor. What is he doing?\", \n keywords: [\"watering the plants\", \"watering plants\", \"gardening\"],\n answer: \"He\u2019s watering the plants on the balcony.\"\n },\n { \n english: \"Look at the two kids on the right outside the building. What are they doing?\", \n keywords: [\"dancing\", \"listening to music\", \"music\"],\n answer: \"They\u2019re dancing and listening to loud music.\"\n },\n { \n english: \"Look at the family in the living room on the middle floor. What are they doing?\", \n keywords: [\"watching TV\", \"watching television\", \"watching a movie\"],\n answer: \"They\u2019re watching TV together.\"\n },\n { \n english: \"Look at the boy on the stairs in the middle of the building. What is he doing?\", \n keywords: [\"reading\", \"reading a comic\", \"reading a book\"],\n answer: \"He\u2019s sitting on the stairs and reading a comic book.\"\n },\n { \n english: \"Look at the man on the sofa with headphones. What is he doing?\", \n keywords: [\"listening to music\", \"relaxing\", \"lying on the sofa\"],\n answer: \"He\u2019s lying on the sofa and listening to music.\"\n },\n { \n english: \"Look at the woman in the bedroom on the right. What is she doing?\", \n keywords: [\"making the bed\", \"making her bed\"],\n answer: \"She\u2019s making the bed.\"\n },\n { \n english: \"Look at the two people in the kitchen on the first floor. What are they doing?\", \n keywords: [\"cooking dinner\", \"making dinner\", \"doing the dishes\", \"cooking\"],\n answer: \"They\u2019re cooking dinner and doing the dishes.\"\n },\n { \n english: \"Look at the children outside near the trees. What are they doing?\", \n keywords: [\"playing basketball\", \"playing outside\", \"basketball\"],\n answer: \"They\u2019re playing basketball in the yard.\"\n }\n ];\n\n \/\/ Positive feedback\n const positiveFeedback = [\n \"Great job!\",\n \"Well done!\",\n \"Excellent sentence!\",\n \"Very good.\",\n \"Your answer was clear and natural.\",\n \"Fantastic!\",\n \"You\u2019re using he\u2019s, she\u2019s, and they\u2019re very well.\",\n \"Nice use of the present continuous.\"\n ];\n\n \/\/ Constructive feedback \u2013 focus on he\/she\/they + -ing and picture vocab\n const constructiveFeedback = [\n \"Try to use he\u2019s, she\u2019s, or they\u2019re plus a verb with -ing. For example: She\u2019s making dinner.\",\n \"Can you include the action from the picture, like watching TV, taking a bath, or playing basketball?\",\n \"Remember to say what the person is doing now, not what they usually do.\",\n \"Try to use a full sentence, for example: He\u2019s watering the plants.\",\n \"Including words like in the kitchen, on the balcony, or in the living room will make your answer better.\",\n \"Think about the picture: What is happening right now in that room?\",\n \"Try to say: He\u2019s \u2026, She\u2019s \u2026, or They\u2019re \u2026 to describe the people.\",\n \"You can add more detail, like where they are or what they are using.\",\n \"Use the present continuous: is \/ are + verb-ing, for example: They\u2019re playing basketball.\",\n \"Make sure your sentence matches the picture exactly.\"\n ];\n\n \/\/ Pronunciation feedback \u2013 picture vocabulary\n const pronunciationFeedback = [\n \"Good job! Try to say \u201capartment\u201d clearly: a-PART-ment.\",\n \"Nice answer! Practice the phrase \u201cwatching TV\u201d smoothly.\",\n \"Well spoken! Focus on the word \u201cbasketball\u201d \u2013 BAS-ket-ball.\",\n \"Great effort! Pay attention to the -ing endings in taking, watching, and playing.\",\n \"Your pronunciation is clear. For extra practice, repeat: \u201cShe\u2019s making the bed in the bedroom.\u201d\"\n ];\n\n \/\/ Stop keywords\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(voice => desiredVoiceNames.includes(voice.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 if (filteredVoices.length > 0) {\n voiceSelect.selectedIndex = 0;\n selectedVoice = filteredVoices[0];\n }\n\n voiceSelect.onchange = () => {\n const selectedIndex = voiceSelect.value;\n selectedVoice = filteredVoices[selectedIndex];\n console.log(`Selected voice: ${selectedVoice.name}`);\n };\n }\n\n function greetUser() {\n const greeting = \"Hello! In this lesson, you will look at the big apartment picture and describe what the people are doing. Use sentences like: He\u2019s watching TV. She\u2019s making dinner. Are you ready? Click Start to begin!\";\n appendMessage(greeting, 'bot');\n showSynthesisLoader(true);\n sayText(greeting, \"en-US\").then(() => {\n showSynthesisLoader(false);\n });\n }\n\n function startLesson() {\n if (currentQuestionIndex < questions.length) {\n const question = questions[currentQuestionIndex];\n const questionNumber = currentQuestionIndex + 1;\n const questionText = `Question ${questionNumber}: ${question.english}`;\n\n appendMessage(questionText, 'bot');\n addSentenceToBox(`Q${questionNumber}: ${question.english}`);\n showSynthesisLoader(true);\n sayText(questionText, \"en-US\").then(() => {\n showSynthesisLoader(false);\n addSentenceToBox(`Answer: ${question.answer}`);\n listenUserResponse(question);\n });\n } else {\n endLesson(false);\n }\n }\n\n function listenUserResponse(question) {\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\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 appendMessage(formattedInput, 'user');\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 if (grammarFeedback) {\n feedbackMessage = grammarFeedback;\n } else {\n const feedbackType = analyzeResponse(formattedInput, question.keywords);\n if (feedbackType === \"pronunciation\") {\n feedbackMessage = 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 = 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(() => {\n startLesson();\n }, 3000);\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 errorMessage = 'Error: ' + event.error;\n\n if (event.error === 'not-allowed') {\n errorMessage = \"Microphone access was not allowed. Please allow microphone access in your browser settings and try again.\";\n }\n\n appendMessage(errorMessage, 'bot');\n\n const chatMessages = document.getElementById('chat-messages');\n chatMessages.innerHTML = '';\n\n const retryMessage = \"Let's try that question again.\";\n appendMessage(retryMessage, 'bot');\n showSynthesisLoader(true);\n sayText(retryMessage, \"en-US\").then(() => {\n showSynthesisLoader(false);\n setTimeout(() => {\n listenUserResponse(question);\n }, 3000);\n });\n };\n }\n\n \/\/ Analyze response using keywords\n function analyzeResponse(userInput, keywords) {\n const lowerCaseInput = userInput.toLowerCase();\n for (let keyword of keywords) {\n if (lowerCaseInput.includes(keyword.toLowerCase())) {\n if (keyword.toLowerCase().includes(\"basketball\") || keyword.toLowerCase().includes(\"apartment\")) {\n return \"pronunciation\"; \/\/ sometimes give pronunciation feedback on tricky words\n }\n return \"positive\";\n }\n }\n return \"constructive\";\n }\n\n \/\/ Simple grammar help: add is\/are and -ing for he\/she\/they\n function checkGrammar(userInput) {\n const lower = userInput.toLowerCase();\n\n if (lower.includes(\"he watching\")) {\n return 'Try: \"He is watching TV.\" or \"He\u2019s watching TV.\"';\n }\n if (lower.includes(\"she making\")) {\n return 'Try: \"She is making the bed.\" or \"She\u2019s making the bed.\"';\n }\n if (lower.includes(\"they playing\")) {\n return 'Try: \"They are playing basketball.\" or \"They\u2019re playing basketball.\"';\n }\n if (lower.includes(\"he take a bath\") || lower.includes(\"he taking a bath\") && !lower.includes(\"is\")) {\n return 'Try: \"He is taking a bath.\" or \"He\u2019s taking a bath.\"';\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 = ['who', 'what', 'where', 'when', 'why', 'how', 'is', 'are', 'do', 'does', 'can', 'should', 'will', 'would'];\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 wordBox = document.getElementById('word-box');\n const sentenceElement = document.createElement('div');\n sentenceElement.innerText = sentence;\n wordBox.appendChild(sentenceElement);\n wordBox.scrollTop = wordBox.scrollHeight;\n }\n\n function clearWordBox() {\n const wordBox = document.getElementById('word-box');\n wordBox.innerHTML = \"\";\n }\n\n function endLesson(userStopped = false) {\n if (speechSynthesisSupported) {\n window.speechSynthesis.cancel();\n }\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 describing the picture with me! Goodbye!\";\n } else {\n message = \"Well done! You\u2019ve described all the people in the picture. Keep practicing!\";\n }\n appendMessage(message, \"bot\");\n showSynthesisLoader(true);\n sayText(message, \"en-US\").then(() => {\n showSynthesisLoader(false);\n });\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 = function() {\n resolve();\n };\n\n utterance.onerror = function(event) {\n console.error('Speech synthesis error:', event.error);\n resolve();\n };\n\n window.speechSynthesis.speak(utterance);\n });\n }\n\n function appendMessage(text, sender) {\n const messageContainer = document.getElementById('chat-messages');\n const messageElement = document.createElement('div');\n messageElement.classList.add('message');\n messageElement.classList.add(sender === 'bot' ? 'bot-message' : 'user-message');\n messageElement.innerText = text;\n messageContainer.appendChild(messageElement);\n messageContainer.scrollTop = messageContainer.scrollHeight;\n }\n\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":292,"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-291","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\/291","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=291"}],"version-history":[{"count":2,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/posts\/291\/revisions"}],"predecessor-version":[{"id":315,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/posts\/291\/revisions\/315"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/media\/292"}],"wp:attachment":[{"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/media?parent=291"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/categories?post=291"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/tags?post=291"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}