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? – Job Application<\/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\/4.webp\" 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 <!-- Learned sentences and answers will be displayed here -->\n <\/div>\n <\/div>\n <div class=\"chat-container\">\n <div class=\"chat-header\">\n <h2>What’s happening? – Job Application<\/h2>\n <div class=\"loader\" id=\"synthesis-loader\"><\/div>\n <\/div>\n <div class=\"chat-messages\" id=\"chat-messages\">\n <!-- Messages will appear here -->\n <\/div>\n <div class=\"chat-input\">\n <!-- Voice Selection Dropdown -->\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 <!-- Start and Stop Buttons -->\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 \/\/ Questions for \"What's happening?\" \u2013 using Megan & Robert vocabulary\n const questions = [\n { \n english: \"What are you doing these days? Are you looking for a job?\", \n keywords: [\"doing these days\", \"looking for a job\", \"applying\", \"job\"],\n answer: \"These days I\u2019m looking for a job. I\u2019m applying for some part-time jobs online.\"\n },\n { \n english: \"Are you applying for any jobs at the moment?\", \n keywords: [\"applying for a job\", \"application\", \"application form\", \"part-time job\"],\n answer: \"Yes, I\u2019m applying for a part-time job at the moment. I\u2019m filling out an application form right now.\"\n },\n { \n english: \"Are you filling out any application forms these days?\", \n keywords: [\"filling out\", \"application form\", \"forms\", \"job\"],\n answer: \"Yes, I\u2019m filling out a long application form. It\u2019s taking ages.\"\n },\n { \n english: \"Are you working hard these days? How are the hours?\", \n keywords: [\"working hard\", \"hours\", \"tough\", \"job\"],\n answer: \"Yes, I\u2019m working hard these days and the hours are long. My job is pretty tough.\"\n },\n { \n english: \"Are you working in a hotel or another place these days?\", \n keywords: [\"working in a hotel\", \"hotel receptionist\", \"job\", \"work\"],\n answer: \"Yes, I\u2019m working in a hotel. I\u2019m working as a hotel receptionist.\"\n },\n { \n english: \"Are you taking a break right now, or are you working?\", \n keywords: [\"taking a break\", \"break\", \"lunch hour\", \"right now\"],\n answer: \"Right now I\u2019m taking a break. It\u2019s my lunch hour so I\u2019m not working at the moment.\"\n },\n { \n english: \"Are you listening to music or the radio while you work or study?\", \n keywords: [\"listening to the radio\", \"listening to music\", \"helps me think\"],\n answer: \"Yes, I\u2019m listening to the radio while I\u2019m working. It helps me think.\"\n },\n { \n english: \"Are you going over to help any friends with their work these days?\", \n keywords: [\"come over\", \"help you\", \"helping\", \"friends\"],\n answer: \"Yes, I\u2019m going over to help my friend with his application. I\u2019m helping him fill it out.\"\n },\n { \n english: \"Are you playing any games right now?\", \n keywords: [\"playing a game\", \"right now\", \"game\"],\n answer: \"Yes, I\u2019m playing a game on my phone right now. I\u2019m just taking a short break.\"\n },\n { \n english: \"Are you enjoying your job or are you looking for a new one?\", \n keywords: [\"enjoying\", \"job\", \"looking for a job\", \"new job\"],\n answer: \"I\u2019m working hard in my job, but I\u2019m also looking for a new job these days.\"\n }\n ];\n\n \/\/ Positive feedback\n const positiveFeedback = [\n \"Great job!\",\n \"Well done!\",\n \"Excellent response!\",\n \"Very well.\",\n \"Your answer was clear and concise.\",\n \"Fantastic!\",\n \"You\u2019re using the new vocabulary very well.\",\n \"That\u2019s a good answer.\"\n ];\n\n \/\/ Constructive feedback \u2013 with unit vocabulary\n const constructiveFeedback = [\n \"Try to use the present continuous, for example: I\u2019m working, I\u2019m applying, I\u2019m taking a break.\",\n \"Could you add more details, such as where you\u2019re working or what you\u2019re doing these days?\",\n \"Consider using some of the new words like \u201capplication form\u201d, \u201cpart-time job\u201d, or \u201chotel receptionist\u201d.\",\n \"Adding time expressions like \u201cright now\u201d, \u201cat the moment\u201d, or \u201cthese days\u201d can improve your answer.\",\n \"Think about saying what you are doing, not just what you usually do.\",\n \"Including phrases like \u201cI\u2019m looking for a job\u201d or \u201cI\u2019m taking a break\u201d would be helpful.\",\n \"Try to relate your answer to work, jobs, or breaks like in Megan and Robert\u2019s conversation.\",\n \"Expanding your answer with reasons, for example why the job is tough or why it\u2019s taking ages, will make it better.\",\n \"Providing more context, such as where you\u2019re working or who you\u2019re helping, can enhance your response.\",\n \"Think about using \u201cI\u2019m working hard\u201d or \u201cI\u2019m filling out an application form\u201d to add depth to your answer.\"\n ];\n\n \/\/ Pronunciation feedback \u2013 focused on key new words\n const pronunciationFeedback = [\n \"Good job! Try to say the word \u201capplication\u201d slowly: ap-pli-CA-tion.\",\n \"Nice answer! Practice the word \u201creceptionist\u201d \u2013 re-CEP-tion-ist.\",\n \"Well spoken! Focus on the stress in \u201cpart-time job\u201d \u2013 PART-time job.\",\n \"Great effort! Pay attention to the ending of -ing words like \u201cworking\u201d and \u201capplying\u201d.\",\n \"Your pronunciation is clear. For extra practice, repeat: \u201cI\u2019m filling out an application form.\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! Welcome to the lesson 'What\u2019s happening?'. We\u2019ll practice application form, part-time job, taking a break, and working in a hotel. 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(\"application form\") || keyword.toLowerCase().includes(\"hotel receptionist\")) {\n return \"pronunciation\"; \/\/ sometimes trigger pronunciation feedback on key vocabulary\n }\n return \"positive\";\n }\n }\n return \"constructive\";\n }\n\n \/\/ Simple grammar help for present continuous with this vocabulary\n function checkGrammar(userInput) {\n const lower = userInput.toLowerCase();\n\n if (lower.includes(\"i am look for\")) {\n return 'You can say: \"I am looking for a job.\" or \"I\u2019m looking for a job.\"';\n }\n if (lower.includes(\"i am apply for\")) {\n return 'You can say: \"I am applying for a job.\" or \"I\u2019m applying for a job.\"';\n }\n if (lower.includes(\"i am fill out\") || lower.includes(\"i am filling the application\")) {\n return 'You can say: \"I am filling out an application form.\"';\n }\n if (lower.includes(\"i am work in a hotel\") || lower.includes(\"i am work at a hotel\")) {\n return 'You can say: \"I am working in a hotel.\" or \"I\u2019m working in a hotel.\"';\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 practicing! Goodbye!\";\n } else {\n message = \"Well done! You\u2019ve completed all the questions. Keep practicing this vocabulary!\";\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":288,"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-294","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\/294","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=294"}],"version-history":[{"count":3,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/posts\/294\/revisions"}],"predecessor-version":[{"id":314,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/posts\/294\/revisions\/314"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/media\/288"}],"wp:attachment":[{"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/media?parent=294"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/categories?post=294"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/tags?post=294"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}