Theme 3: Arts and Media<\/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 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 \/* Adjust font sizes and button sizes for high-density screens *\/\n .chat-header h2 {\n font-size: 18px; \/* Increased font size *\/\n }\n .send-button, .stop-button {\n padding: 14px 18px; \/* Adjusted padding *\/\n font-size: 16px; \/* Adjusted font size *\/\n }\n .message {\n font-size: 14px; \/* Adjusted font size *\/\n }\n .word-box {\n font-size: 16px; \/* Adjusted font size *\/\n }\n .chat-input input {\n font-size: 16px; \/* Adjusted font size *\/\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"menu\">\n <a href=\"https:\/\/i-cte.org\/robot\/culture-and-civilization\/\">Culture and Civilization<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/technology\/\">Technology<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/arts-and-media\/\">Arts and Media<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/sports-and-leisure\/\">Sports and Leisure<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/nutrition-and-health\/\">Nutrition and Health<\/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-13-18.46.33-A-single-small-academic-themed-robot-instructor-designed-to-teach-in-a-classroom.-The-robot-is-knee-high-sleek-and-professional-looking-wearing-dig-1.webp\" alt=\"Food Image\">\n <div class=\"sentence-text\">Listen to the questions and respond accordingly.<\/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>Arts and Media – Part 3: Discussion<\/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<div class=\"menu\">\n <a href=\"https:\/\/i-cte.org\/robot\/arts-and-media\/\">Arts and Media<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/arts-and-media-part-1\/\">Part 1<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/arts-and-media-part-2\/\">Part 2<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/arts-and-media-part-3\/\">Part 3<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/sports-and-leisure\/\">Sports and Leisure<\/a>\n <\/div>\n <script>\n\/\/ Define the questions for \"Arts and Media - Part 3: Discussion\"\nconst questions = [\n {\n english: \"Do you think people will use social media more or less in the future?\",\n keywords: [\"social media\", \"more\", \"less\", \"future\"],\n answer: \"I think people will use social media more in the future because technology keeps improving and more people are using it for communication and entertainment.\"\n },\n {\n english: \"Should advertisers be allowed to advertise to children?\",\n keywords: [\"advertisers\", \"allowed\", \"advertise\", \"children\"],\n answer: \"I think advertisers should be careful when advertising to children because they are easily influenced. There should be rules to protect children from harmful advertising.\"\n }\n];\n\n \/\/ Define positive, constructive, and pronunciation feedback arrays\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're doing great!\",\n \"That's a good answer.\"\n ];\n\n const constructiveFeedback = [\n \"Try to include more details related to the question.\",\n \"Could you provide more specific information?\",\n \"Consider mentioning related activities or reasons.\",\n \"Adding relevant keywords can improve your answer.\",\n \"Think about elaborating on your response.\",\n \"Including examples would be helpful.\",\n \"Try to relate your answer to the topic more closely.\",\n \"Expanding your answer will make it better.\",\n \"Providing more context can enhance your response.\",\n \"Think about why or how to add depth to your answer.\"\n ];\n\n \/\/ Define pronunciation feedback messages\n const pronunciationFeedback = [\n \"Your pronunciation is clear, but try to emphasize key words for better clarity.\",\n \"Good job! To improve, pay attention to the pronunciation of 'vegetables' and 'restaurant'.\",\n \"Well spoken! Consider slowing down to ensure each word is pronounced accurately.\",\n \"Excellent! For even better clarity, try to articulate 'breakfast' and 'favorite' more distinctly.\",\n \"Great effort! Focus on the 'th' sound in words like 'with' and 'they'.\"\n ];\n\n \/\/ Define 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; \/\/ Add a flag for recognition status\n\n const speechSynthesisSupported = 'speechSynthesis' in window;\n const speechRecognitionSupported = window.SpeechRecognition || window.webkitSpeechRecognition;\n\n let voices = [];\n let selectedVoice = null; \/\/ To store the user's selected voice\n\n \/\/ Desired Voices: 4 Natural Native Voices\n const desiredVoiceNames = [\n 'Google US English', \/\/ en-US Male\n 'Google US English Female', \/\/ en-US Female\n 'Google UK English Male', \/\/ en-GB Male\n 'Google UK English Female' \/\/ en-GB Female\n ];\n\n \/\/ Initialize the application\n function initialize() {\n loadVoices();\n\n if (speechSynthesisSupported) {\n \/\/ Delay greeting to ensure voices are loaded\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 \/\/ Handle Start Button Click\n document.getElementById('start-btn').onclick = function() {\n if (isLessonActive) return; \/\/ Prevent multiple starts\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 \/\/ Handle Stop Button Click\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 \/\/ Load voices and populate the voice selection dropdown\n function loadVoices() {\n voices = window.speechSynthesis.getVoices();\n if (voices.length === 0) {\n \/\/ Some browsers load voices asynchronously\n window.speechSynthesis.onvoiceschanged = () => {\n voices = window.speechSynthesis.getVoices();\n populateVoiceList();\n };\n } else {\n populateVoiceList();\n }\n }\n\n \/\/ Populate the voice selection dropdown with desired voices\n function populateVoiceList() {\n const voiceSelect = document.getElementById('voice-select');\n voiceSelect.innerHTML = ''; \/\/ Clear existing options\n\n \/\/ Filter voices to include only the desired ones\n const filteredVoices = voices.filter(voice => desiredVoiceNames.includes(voice.name));\n\n if (filteredVoices.length === 0) {\n \/\/ If no desired voices are found, inform the user\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 \/\/ Populate the dropdown with the filtered voices\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 \/\/ Set a default selected voice if available\n if (filteredVoices.length > 0) {\n voiceSelect.selectedIndex = 0;\n selectedVoice = filteredVoices[0];\n }\n\n \/\/ Listen for voice selection changes\n voiceSelect.onchange = () => {\n const selectedIndex = voiceSelect.value;\n selectedVoice = filteredVoices[selectedIndex];\n console.log(`Selected voice: ${selectedVoice.name}`);\n };\n }\n\n \/\/ Greet the user at the beginning of the lesson\n function greetUser() {\nconst greeting = \"Hello! Welcome to the Practice Speaking about Arts and Media. PART 3: The teacher will ask you one or two questions on the same topic. Are you ready? Click Start to begin the discussion!\";\n\n appendMessage(greeting, 'bot');\n showSynthesisLoader(true);\n sayText(greeting, \"en-US\").then(() => {\n showSynthesisLoader(false);\n });\n }\n\n \/\/ Start the lesson by asking the first question\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 \/\/ Listen for the user's verbal response\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 \/\/ Show listening indicator\n showRecognitionLoader(true);\n appendMessage(\"Listening...\", \"bot\");\n speechRecognitionActive = true; \/\/ set the flag\n\n recognition.start();\n\n recognition.onresult = function(event) {\n if (!speechRecognitionActive) return; \/\/ prevent action after stop\n\n const userInput = event.results[0][0].transcript.trim();\n const formattedInput = normalizeAndFormatUserInput(userInput);\n appendMessage(formattedInput, 'user');\n\n \/\/ Hide listening indicator\n showRecognitionLoader(false);\n speechRecognitionActive = false; \/\/ Reset the flag\n\n \/\/ Check for stop keywords first\n if (checkStopKeywords(formattedInput.toLowerCase())) {\n endLesson(true);\n return;\n }\n\n \/\/ Analyze user input for feedback\n let feedbackMessage = \"\";\n const grammarFeedback = checkGrammar(formattedInput); \/\/ Check Grammar first\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 \/\/ Proceed to next question after a delay\n currentQuestionIndex++;\n setTimeout(() => {\n startLesson();\n }, 3000); \/\/ 3-second delay\n });\n };\n\n recognition.onspeechend = function() {\n if (speechRecognitionActive) {\n recognition.stop(); \/\/ Stop recognition when speech ends\n speechRecognitionActive = false; \/\/ Reset the flag\n showRecognitionLoader(false); \/\/ Hide the loader if the speech ended naturally\n }\n };\n\n recognition.onerror = function(event) {\n \/\/ Hide listening indicator\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 \/\/ Clear previous messages\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 \/\/ Retry the same question after a delay\n setTimeout(() => {\n listenUserResponse(question);\n }, 3000); \/\/ 3-second delay\n });\n };\n }\n\n \/\/ Ask the same question again in case of an error\n function askSameQuestion(question) {\n const questionNumber = currentQuestionIndex + 1;\n const questionText = `Let's try again: ${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 listenUserResponse(question);\n });\n }\n\n \/\/ Analyze the user's response and determine feedback type\n function analyzeResponse(userInput, keywords) {\n const lowerCaseInput = userInput.toLowerCase();\n for (let keyword of keywords) {\n if (lowerCaseInput.includes(keyword.toLowerCase())) {\n \/\/ Simulate pronunciation feedback for specific keywords\n if (keyword.toLowerCase().includes(\"vegetables\") || keyword.toLowerCase().includes(\"restaurant\") || keyword.toLowerCase().includes(\"breakfast\") || keyword.toLowerCase().includes(\"favorite\")) {\n return \"pronunciation\";\n }\n return \"positive\";\n }\n }\n return \"constructive\";\n }\n\n\n \/\/ Check for simple grammar errors, specifically plural vs. singular \"is\/are\" with \"best friend\"\n function checkGrammar(userInput) {\n const lowerCaseInput = userInput.toLowerCase();\n const pluralFriendsPattern = \/my best friend is (\\w+)(?: and (\\w+))?\/; \/\/ Match \"my best friend is [name] and [name]\"\n const singleFriendPattern = \/my best friends are (\\w+)(?: and (\\w+))?\/; \/\/ Match \"my best friends are [name] and [name]\"\n\n let match;\n\n if ((match = lowerCaseInput.match(pluralFriendsPattern)) && match[2]) {\n const corrected = `You mean, \"My best friends are ${match[1]} and ${match[2]}\"?`;\n return corrected;\n }\n if ((match = lowerCaseInput.match(singleFriendPattern)) && !match[2]) {\n const corrected = `You mean, \"My best friend is ${match[1]}\"?`;\n return corrected;\n }\n\n return null; \/\/ No grammar issues detected\n }\n\n\n \/\/ Check if the user's input contains any stop keywords\n function checkStopKeywords(userInput) {\n const pattern = new RegExp('\\\\b(' + stopKeywords.join('|') + ')\\\\b', 'i');\n return pattern.test(userInput);\n }\n\n \/\/ Normalize and format the user's input\n function normalizeAndFormatUserInput(text) {\n let normalized = text.replace(\/\\bi\\b\/g, \"I\");\n return formatSentence(normalized);\n }\n\n \/\/ Format the sentence by capitalizing and adding punctuation\n function formatSentence(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 \/\/ Add a sentence to the word box\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 \/\/ Clear the word box\n function clearWordBox() {\n const wordBox = document.getElementById('word-box');\n wordBox.innerHTML = \"\";\n }\n\n \/\/ End the lesson\n function endLesson(userStopped = false) {\n \/\/ Cancel any ongoing speech synthesis\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've completed all the questions. Keep practicing!\";\n }\n appendMessage(message, \"bot\");\n showSynthesisLoader(true);\n sayText(message, \"en-US\").then(() => {\n showSynthesisLoader(false);\n });\n }\n\n \/\/ Speak the given text using speech synthesis and return a Promise that resolves when speaking is done\n function sayText(text, lang) {\n return new Promise((resolve, reject) => {\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 \/\/ Use the selected voice if available\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(); \/\/ Resolve to continue the flow even if there's an error\n };\n\n window.speechSynthesis.speak(utterance);\n });\n }\n\n \/\/ Append a message to the chat\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 \/\/ Show or hide the speech synthesis loader\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'; \/\/ Default speaking color\n }\n }\n\n \/\/ Show or hide the speech recognition loader\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'; \/\/ Change color to indicate listening\n } else {\n loader.style.display = 'none';\n }\n }\n\n \/\/ Initialize the application once the DOM is fully loaded\n window.onload = initialize;\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Theme 3: Arts and Media Culture and Civilization Technology Arts and Media Sports and Leisure Nutrition and Health Listen to<\/p>\n","protected":false},"author":1,"featured_media":87,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"colormag_page_layout":"default_layout","footnotes":""},"categories":[8,5],"tags":[],"class_list":["post-86","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-arts","category-chatbot"],"_links":{"self":[{"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/posts\/86","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=86"}],"version-history":[{"count":1,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/posts\/86\/revisions"}],"predecessor-version":[{"id":88,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/posts\/86\/revisions\/88"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/media\/87"}],"wp:attachment":[{"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/media?parent=86"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/categories?post=86"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/tags?post=86"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":86,"date":"2025-05-27T09:21:17","date_gmt":"2025-05-27T09:21:17","guid":{"rendered":"https:\/\/i-cte.org\/robot\/?p=86"},"modified":"2025-05-27T09:21:17","modified_gmt":"2025-05-27T09:21:17","slug":"arts-and-media-part-3","status":"publish","type":"post","link":"https:\/\/i-cte.org\/robot\/arts-and-media-part-3\/","title":{"rendered":"Arts and Media \u2013 Part 3"},"content":{"rendered":"\n\n\n\n \n \n Theme 3: Arts and Media<\/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 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 \/* Adjust font sizes and button sizes for high-density screens *\/\n .chat-header h2 {\n font-size: 18px; \/* Increased font size *\/\n }\n .send-button, .stop-button {\n padding: 14px 18px; \/* Adjusted padding *\/\n font-size: 16px; \/* Adjusted font size *\/\n }\n .message {\n font-size: 14px; \/* Adjusted font size *\/\n }\n .word-box {\n font-size: 16px; \/* Adjusted font size *\/\n }\n .chat-input input {\n font-size: 16px; \/* Adjusted font size *\/\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"menu\">\n <a href=\"https:\/\/i-cte.org\/robot\/culture-and-civilization\/\">Culture and Civilization<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/technology\/\">Technology<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/arts-and-media\/\">Arts and Media<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/sports-and-leisure\/\">Sports and Leisure<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/nutrition-and-health\/\">Nutrition and Health<\/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-13-18.46.33-A-single-small-academic-themed-robot-instructor-designed-to-teach-in-a-classroom.-The-robot-is-knee-high-sleek-and-professional-looking-wearing-dig-1.webp\" alt=\"Food Image\">\n <div class=\"sentence-text\">Listen to the questions and respond accordingly.<\/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>Arts and Media – Part 3: Discussion<\/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<div class=\"menu\">\n <a href=\"https:\/\/i-cte.org\/robot\/arts-and-media\/\">Arts and Media<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/arts-and-media-part-1\/\">Part 1<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/arts-and-media-part-2\/\">Part 2<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/arts-and-media-part-3\/\">Part 3<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/sports-and-leisure\/\">Sports and Leisure<\/a>\n <\/div>\n <script>\n\/\/ Define the questions for \"Arts and Media - Part 3: Discussion\"\nconst questions = [\n {\n english: \"Do you think people will use social media more or less in the future?\",\n keywords: [\"social media\", \"more\", \"less\", \"future\"],\n answer: \"I think people will use social media more in the future because technology keeps improving and more people are using it for communication and entertainment.\"\n },\n {\n english: \"Should advertisers be allowed to advertise to children?\",\n keywords: [\"advertisers\", \"allowed\", \"advertise\", \"children\"],\n answer: \"I think advertisers should be careful when advertising to children because they are easily influenced. There should be rules to protect children from harmful advertising.\"\n }\n];\n\n \/\/ Define positive, constructive, and pronunciation feedback arrays\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're doing great!\",\n \"That's a good answer.\"\n ];\n\n const constructiveFeedback = [\n \"Try to include more details related to the question.\",\n \"Could you provide more specific information?\",\n \"Consider mentioning related activities or reasons.\",\n \"Adding relevant keywords can improve your answer.\",\n \"Think about elaborating on your response.\",\n \"Including examples would be helpful.\",\n \"Try to relate your answer to the topic more closely.\",\n \"Expanding your answer will make it better.\",\n \"Providing more context can enhance your response.\",\n \"Think about why or how to add depth to your answer.\"\n ];\n\n \/\/ Define pronunciation feedback messages\n const pronunciationFeedback = [\n \"Your pronunciation is clear, but try to emphasize key words for better clarity.\",\n \"Good job! To improve, pay attention to the pronunciation of 'vegetables' and 'restaurant'.\",\n \"Well spoken! Consider slowing down to ensure each word is pronounced accurately.\",\n \"Excellent! For even better clarity, try to articulate 'breakfast' and 'favorite' more distinctly.\",\n \"Great effort! Focus on the 'th' sound in words like 'with' and 'they'.\"\n ];\n\n \/\/ Define 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; \/\/ Add a flag for recognition status\n\n const speechSynthesisSupported = 'speechSynthesis' in window;\n const speechRecognitionSupported = window.SpeechRecognition || window.webkitSpeechRecognition;\n\n let voices = [];\n let selectedVoice = null; \/\/ To store the user's selected voice\n\n \/\/ Desired Voices: 4 Natural Native Voices\n const desiredVoiceNames = [\n 'Google US English', \/\/ en-US Male\n 'Google US English Female', \/\/ en-US Female\n 'Google UK English Male', \/\/ en-GB Male\n 'Google UK English Female' \/\/ en-GB Female\n ];\n\n \/\/ Initialize the application\n function initialize() {\n loadVoices();\n\n if (speechSynthesisSupported) {\n \/\/ Delay greeting to ensure voices are loaded\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 \/\/ Handle Start Button Click\n document.getElementById('start-btn').onclick = function() {\n if (isLessonActive) return; \/\/ Prevent multiple starts\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 \/\/ Handle Stop Button Click\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 \/\/ Load voices and populate the voice selection dropdown\n function loadVoices() {\n voices = window.speechSynthesis.getVoices();\n if (voices.length === 0) {\n \/\/ Some browsers load voices asynchronously\n window.speechSynthesis.onvoiceschanged = () => {\n voices = window.speechSynthesis.getVoices();\n populateVoiceList();\n };\n } else {\n populateVoiceList();\n }\n }\n\n \/\/ Populate the voice selection dropdown with desired voices\n function populateVoiceList() {\n const voiceSelect = document.getElementById('voice-select');\n voiceSelect.innerHTML = ''; \/\/ Clear existing options\n\n \/\/ Filter voices to include only the desired ones\n const filteredVoices = voices.filter(voice => desiredVoiceNames.includes(voice.name));\n\n if (filteredVoices.length === 0) {\n \/\/ If no desired voices are found, inform the user\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 \/\/ Populate the dropdown with the filtered voices\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 \/\/ Set a default selected voice if available\n if (filteredVoices.length > 0) {\n voiceSelect.selectedIndex = 0;\n selectedVoice = filteredVoices[0];\n }\n\n \/\/ Listen for voice selection changes\n voiceSelect.onchange = () => {\n const selectedIndex = voiceSelect.value;\n selectedVoice = filteredVoices[selectedIndex];\n console.log(`Selected voice: ${selectedVoice.name}`);\n };\n }\n\n \/\/ Greet the user at the beginning of the lesson\n function greetUser() {\nconst greeting = \"Hello! Welcome to the Practice Speaking about Arts and Media. PART 3: The teacher will ask you one or two questions on the same topic. Are you ready? Click Start to begin the discussion!\";\n\n appendMessage(greeting, 'bot');\n showSynthesisLoader(true);\n sayText(greeting, \"en-US\").then(() => {\n showSynthesisLoader(false);\n });\n }\n\n \/\/ Start the lesson by asking the first question\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 \/\/ Listen for the user's verbal response\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 \/\/ Show listening indicator\n showRecognitionLoader(true);\n appendMessage(\"Listening...\", \"bot\");\n speechRecognitionActive = true; \/\/ set the flag\n\n recognition.start();\n\n recognition.onresult = function(event) {\n if (!speechRecognitionActive) return; \/\/ prevent action after stop\n\n const userInput = event.results[0][0].transcript.trim();\n const formattedInput = normalizeAndFormatUserInput(userInput);\n appendMessage(formattedInput, 'user');\n\n \/\/ Hide listening indicator\n showRecognitionLoader(false);\n speechRecognitionActive = false; \/\/ Reset the flag\n\n \/\/ Check for stop keywords first\n if (checkStopKeywords(formattedInput.toLowerCase())) {\n endLesson(true);\n return;\n }\n\n \/\/ Analyze user input for feedback\n let feedbackMessage = \"\";\n const grammarFeedback = checkGrammar(formattedInput); \/\/ Check Grammar first\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 \/\/ Proceed to next question after a delay\n currentQuestionIndex++;\n setTimeout(() => {\n startLesson();\n }, 3000); \/\/ 3-second delay\n });\n };\n\n recognition.onspeechend = function() {\n if (speechRecognitionActive) {\n recognition.stop(); \/\/ Stop recognition when speech ends\n speechRecognitionActive = false; \/\/ Reset the flag\n showRecognitionLoader(false); \/\/ Hide the loader if the speech ended naturally\n }\n };\n\n recognition.onerror = function(event) {\n \/\/ Hide listening indicator\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 \/\/ Clear previous messages\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 \/\/ Retry the same question after a delay\n setTimeout(() => {\n listenUserResponse(question);\n }, 3000); \/\/ 3-second delay\n });\n };\n }\n\n \/\/ Ask the same question again in case of an error\n function askSameQuestion(question) {\n const questionNumber = currentQuestionIndex + 1;\n const questionText = `Let's try again: ${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 listenUserResponse(question);\n });\n }\n\n \/\/ Analyze the user's response and determine feedback type\n function analyzeResponse(userInput, keywords) {\n const lowerCaseInput = userInput.toLowerCase();\n for (let keyword of keywords) {\n if (lowerCaseInput.includes(keyword.toLowerCase())) {\n \/\/ Simulate pronunciation feedback for specific keywords\n if (keyword.toLowerCase().includes(\"vegetables\") || keyword.toLowerCase().includes(\"restaurant\") || keyword.toLowerCase().includes(\"breakfast\") || keyword.toLowerCase().includes(\"favorite\")) {\n return \"pronunciation\";\n }\n return \"positive\";\n }\n }\n return \"constructive\";\n }\n\n\n \/\/ Check for simple grammar errors, specifically plural vs. singular \"is\/are\" with \"best friend\"\n function checkGrammar(userInput) {\n const lowerCaseInput = userInput.toLowerCase();\n const pluralFriendsPattern = \/my best friend is (\\w+)(?: and (\\w+))?\/; \/\/ Match \"my best friend is [name] and [name]\"\n const singleFriendPattern = \/my best friends are (\\w+)(?: and (\\w+))?\/; \/\/ Match \"my best friends are [name] and [name]\"\n\n let match;\n\n if ((match = lowerCaseInput.match(pluralFriendsPattern)) && match[2]) {\n const corrected = `You mean, \"My best friends are ${match[1]} and ${match[2]}\"?`;\n return corrected;\n }\n if ((match = lowerCaseInput.match(singleFriendPattern)) && !match[2]) {\n const corrected = `You mean, \"My best friend is ${match[1]}\"?`;\n return corrected;\n }\n\n return null; \/\/ No grammar issues detected\n }\n\n\n \/\/ Check if the user's input contains any stop keywords\n function checkStopKeywords(userInput) {\n const pattern = new RegExp('\\\\b(' + stopKeywords.join('|') + ')\\\\b', 'i');\n return pattern.test(userInput);\n }\n\n \/\/ Normalize and format the user's input\n function normalizeAndFormatUserInput(text) {\n let normalized = text.replace(\/\\bi\\b\/g, \"I\");\n return formatSentence(normalized);\n }\n\n \/\/ Format the sentence by capitalizing and adding punctuation\n function formatSentence(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 \/\/ Add a sentence to the word box\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 \/\/ Clear the word box\n function clearWordBox() {\n const wordBox = document.getElementById('word-box');\n wordBox.innerHTML = \"\";\n }\n\n \/\/ End the lesson\n function endLesson(userStopped = false) {\n \/\/ Cancel any ongoing speech synthesis\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've completed all the questions. Keep practicing!\";\n }\n appendMessage(message, \"bot\");\n showSynthesisLoader(true);\n sayText(message, \"en-US\").then(() => {\n showSynthesisLoader(false);\n });\n }\n\n \/\/ Speak the given text using speech synthesis and return a Promise that resolves when speaking is done\n function sayText(text, lang) {\n return new Promise((resolve, reject) => {\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 \/\/ Use the selected voice if available\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(); \/\/ Resolve to continue the flow even if there's an error\n };\n\n window.speechSynthesis.speak(utterance);\n });\n }\n\n \/\/ Append a message to the chat\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 \/\/ Show or hide the speech synthesis loader\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'; \/\/ Default speaking color\n }\n }\n\n \/\/ Show or hide the speech recognition loader\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'; \/\/ Change color to indicate listening\n } else {\n loader.style.display = 'none';\n }\n }\n\n \/\/ Initialize the application once the DOM is fully loaded\n window.onload = initialize;\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Theme 3: Arts and Media Culture and Civilization Technology Arts and Media Sports and Leisure Nutrition and Health Listen to<\/p>\n","protected":false},"author":1,"featured_media":87,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"colormag_page_layout":"default_layout","footnotes":""},"categories":[8,5],"tags":[],"class_list":["post-86","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-arts","category-chatbot"],"_links":{"self":[{"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/posts\/86","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=86"}],"version-history":[{"count":1,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/posts\/86\/revisions"}],"predecessor-version":[{"id":88,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/posts\/86\/revisions\/88"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/media\/87"}],"wp:attachment":[{"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/media?parent=86"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/categories?post=86"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/tags?post=86"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}