English Interaction – Sports<\/title>\n <style>\n \/* Reset and Base Styles *\/\n body {\n font-family: Arial, sans-serif;\n background-color: #ffffff;\n margin: 0;\n padding: 0;\n display: flex;\n flex-direction: column; \/* Stack elements vertically *\/\n min-height: 100vh;\n }\n\n \/* Menu Styles *\/\n .menu {\n width: 100%;\n background-color: #d97b0f;\n padding: 8px; \/* Slightly reduced padding *\/\n text-align: center;\n box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);\n margin-bottom: 12px; \/* Slightly reduced margin *\/\n overflow-x: auto;\n white-space: nowrap;\n }\n .menu a {\n color: #fff;\n text-decoration: none;\n margin: 0 8px; \/* Maintained for spacing *\/\n font-weight: bold;\n font-size: 13px; \/* Slightly smaller font *\/\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; \/* Stack elements vertically on mobile *\/\n align-items: center;\n padding: 8px; \/* Reduced padding *\/\n box-sizing: border-box;\n flex: 1 0 auto;\n }\n .image-container, .chat-container {\n width: 100%;\n max-width: 400px; \/* Further reduced max-width *\/\n margin-bottom: 15px; \/* Reduced margin *\/\n }\n .image-container {\n text-align: center;\n }\n .image-container img {\n width: 100%;\n height: auto;\n border-radius: 15px; \/* Reduced border-radius *\/\n box-shadow: 0 0 8px rgba(0, 0, 0, 0.1); \/* Reduced shadow *\/\n }\n .sentence-text {\n margin: 8px 0; \/* Reduced margin *\/\n font-weight: bold;\n color: #333;\n font-size: 14px; \/* Slightly reduced font size *\/\n }\n .word-box {\n margin-top: 8px; \/* Reduced margin *\/\n padding: 8px; \/* Reduced padding *\/\n background-color: #fff;\n border: 2px solid #026c96;\n border-radius: 8px; \/* Reduced border-radius *\/\n box-shadow: 0 0 8px rgba(0, 0, 0, 0.1); \/* Reduced shadow *\/\n font-size: 16px; \/* Reduced font size *\/\n font-weight: bold;\n color: #026c96;\n text-align: left;\n max-height: 250px; \/* Reduced max-height *\/\n overflow-y: auto;\n }\n\n \/* Chat Container Styles *\/\n .chat-container {\n background-color: #026c96;\n border-radius: 15px; \/* Reduced border-radius *\/\n box-shadow: 0 0 8px rgba(0, 0, 0, 0.1); \/* Reduced shadow *\/\n overflow: hidden;\n display: flex;\n flex-direction: column;\n height: auto; \/* Removed fixed height *\/\n max-height: 500px; \/* Set a reasonable max-height *\/\n }\n .chat-header {\n background-color: #d97b0f;\n color: #fff;\n padding: 8px; \/* Reduced padding *\/\n text-align: center;\n border-bottom: 1px solid #69010a;\n }\n .chat-header h2 {\n margin: 0;\n font-size: 16px; \/* Reduced font size *\/\n }\n .chat-messages {\n padding: 8px; \/* Reduced padding *\/\n overflow-y: auto;\n flex: 1;\n background-color: #fff;\n max-height: 300px; \/* Reduced max-height *\/\n }\n .message {\n margin-bottom: 8px; \/* Reduced margin *\/\n padding: 8px; \/* Reduced padding *\/\n border-radius: 4px; \/* Reduced border-radius *\/\n font-size: 13px; \/* Reduced font size *\/\n line-height: 1.4;\n }\n .user-message {\n background-color: #4caf50;\n color: #fff;\n text-align: right;\n }\n .bot-message {\n background-color: #2196f3;\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: #a3e106;\n padding: 8px; \/* Reduced padding *\/\n justify-content: space-between;\n }\n .send-button, .stop-button {\n background-color: #17c686;\n color: #fff;\n font-weight: bold;\n border: none;\n border-radius: 5px;\n padding: 10px 12px; \/* Reduced padding *\/\n cursor: pointer;\n transition: background-color 0.3s;\n flex: 1;\n margin: 0 4px; \/* Reduced margin *\/\n max-width: 100px; \/* Reduced max-width *\/\n font-size: 14px; \/* Reduced font size *\/\n }\n .stop-button {\n background-color: #c86722;\n }\n .send-button:hover,\n .stop-button:hover,\n .send-button:focus,\n .stop-button:focus {\n background-color: #45a049;\n outline: none;\n }\n\n \/* Chat Input Additional Styles *\/\n .chat-input input {\n flex: 2;\n padding: 6px; \/* Reduced padding *\/\n margin-right: 8px; \/* Reduced margin *\/\n border: 2px solid #026c96;\n border-radius: 5px;\n font-size: 14px; \/* Reduced font size *\/\n }\n\n \/* Loader Styles *\/\n .loader {\n border: 4px solid #f3f3f3;\n border-top: 4px solid #2196f3;\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 @media (max-width: 600px) {\n .menu a {\n margin: 0 5px;\n font-size: 12px;\n }\n .sentence-text {\n font-size: 14px;\n }\n .word-box {\n font-size: 14px;\n max-height: 200px;\n }\n .chat-header h2 {\n font-size: 14px;\n }\n .chat-messages {\n max-height: 200px;\n }\n .message {\n font-size: 12px;\n }\n .send-button, .stop-button {\n padding: 8px 10px;\n font-size: 12px;\n max-width: 90px;\n }\n .chat-input input {\n font-size: 14px;\n }\n }\n\n @media (max-width: 400px) {\n .menu a {\n margin: 0 3px;\n font-size: 11px;\n }\n .sentence-text {\n font-size: 13px;\n }\n .word-box {\n font-size: 13px;\n max-height: 150px;\n }\n .chat-header h2 {\n font-size: 13px;\n }\n .chat-messages {\n max-height: 150px;\n }\n .message {\n font-size: 11px;\n }\n .send-button, .stop-button {\n padding: 6px 8px;\n font-size: 11px;\n max-width: 80px;\n }\n .chat-input input {\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: 14px; \/* Further reduced if necessary *\/\n }\n .send-button, .stop-button {\n padding: 10px 14px; \/* Adjusted padding *\/\n font-size: 14px; \/* Adjusted font size *\/\n }\n .message {\n font-size: 13px; \/* Adjusted font size *\/\n }\n .word-box {\n font-size: 15px; \/* Adjusted font size *\/\n }\n .chat-input input {\n font-size: 15px; \/* Adjusted font size *\/\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"menu\">\n <a href=\"https:\/\/phamho.com\/book\/2024\/09\/15\/learn-vocabulary-sports\/\">Vocabulary<\/a>\n <a href=\"https:\/\/phamho.com\/book\/2024\/09\/16\/english-playing-sports\/\">Sentences<\/a>\n <a href=\"https:\/\/phamho.com\/book\/2024\/09\/16\/english-sports-questions\/\">Questions<\/a>\n <a href=\"https:\/\/phamho.com\/book\/2024\/09\/16\/english-sports-questions\/\">Yes\/No Questions<\/a>\n <a href=\"https:\/\/phamho.com\/book\/2024\/09\/15\/interaction-sports\/\">Interaction<\/a>\n <\/div>\n\n <div class=\"container\">\n <div class=\"image-container\">\n <img decoding=\"async\" src=\"https:\/\/phamho.com\/book\/wp-content\/uploads\/2024\/06\/Teacher4.webp\" alt=\"Lesson Robot\">\n <div class=\"sentence-text\">Look at the sentences in this box<\/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>English Interaction – Sports<\/h2>\n <\/div>\n <div class=\"chat-messages\" id=\"chat-messages\">\n \n <\/div>\n <div class=\"chat-input\">\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\n <script>\n \/\/ Define the questions with expected keywords\n const questions = [\n { \n english: \"Do you like playing sports?\", \n keywords: [\"yes\", \"like\", \"love\", \"enjoy\", \"sports\"] \n },\n { \n english: \"Would you prefer watching a sport on TV or watching a live event?\", \n keywords: [\"TV\", \"live event\", \"watching\", \"prefer\"] \n },\n { \n english: \"What types of sports would you want to try?\", \n keywords: [\"soccer\", \"basketball\", \"tennis\", \"football\", \"jogging\", \"cycling\", \"yoga\"] \n },\n { \n english: \"What would you like to do to stay healthy, go jogging or take a fitness class?\", \n keywords: [\"jogging\", \"fitness class\", \"stay healthy\"] \n },\n { \n english: \"Would you prefer to play team sports like volleyball or individual sports like running?\", \n keywords: [\"team sports\", \"volleyball\", \"individual sports\", \"running\"] \n }\n ];\n\n \/\/ Define positive and constructive feedback arrays\n const positiveFeedback = [\n \"Wonderful!\",\n \"Your pronunciation was good.\",\n \"Perfect!\",\n \"Excellent pronunciation.\"\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 const stopKeywords = [\"goodbye\", \"good bye\", \"bye\", \"bye-bye\", \"byebye\"];\n\n let currentQuestionIndex = 0;\n let recognition;\n\n const speechSynthesisSupported = 'speechSynthesis' in window;\n const speechRecognitionSupported = window.SpeechRecognition || window.webkitSpeechRecognition;\n\n let voices = [];\n\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 console.log(\"Voices loaded:\", voices);\n };\n } else {\n console.log(\"Voices loaded:\", voices);\n }\n }\n\n loadVoices();\n\n window.onload = function() {\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 (!speechSynthesisSupported) {\n appendMessage(\"Speech synthesis is not supported in your browser.\", \"bot\");\n return;\n }\n if (speechRecognitionSupported) {\n currentQuestionIndex = 0;\n startLesson();\n } else {\n appendMessage(\"Speech recognition is not supported in your browser.\", \"bot\");\n }\n };\n\n \/\/ Handle Stop Button Click\n document.getElementById('stop-btn').onclick = function() {\n if (recognition) {\n recognition.stop();\n }\n endLesson(true);\n };\n };\n\n function greetUser() {\n const greeting = \"Hello! Welcome to the Practice Speaking about Sports. In this lesson, you have to listen to each question carefully and give your own answers. Are you ready? Click Start to begin the lesson!\";\n appendMessage(greeting, 'bot');\n sayText(greeting, \"en-US\");\n }\n\n function startLesson() {\n if (currentQuestionIndex < questions.length) {\n const question = questions[currentQuestionIndex];\n const questionText = `Question ${currentQuestionIndex + 1}: '${question.english}'`;\n\n appendMessage(questionText, 'bot');\n addSentenceToBox(question.english); \/\/ Add question to word box\n sayText(question.english, \"en-US\");\n\n \/\/ Listen for user response after a short delay to ensure the question has been spoken\n setTimeout(() => listenUserResponse(question), 5000);\n } else {\n endLesson();\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 recognition.start();\n\n recognition.onresult = function(event) {\n let userInput = event.results[0][0].transcript.trim();\n userInput = normalizeAndFormatUserInput(userInput); \/\/ Normalize input and format\n appendMessage(userInput, 'user');\n\n \/\/ Check for stop keywords\n if (checkStopKeywords(userInput.toLowerCase())) {\n endLesson(true);\n return;\n }\n\n \/\/ Analyze user input for keywords\n const feedbackType = analyzeResponse(userInput, question.keywords);\n\n if (feedbackType === \"positive\") {\n const positiveMessage = positiveFeedback[Math.floor(Math.random() * positiveFeedback.length)];\n appendMessage(positiveMessage, 'bot');\n sayText(positiveMessage, 'en-US');\n } else {\n const constructiveMessage = constructiveFeedback[Math.floor(Math.random() * constructiveFeedback.length)];\n appendMessage(constructiveMessage, 'bot');\n sayText(constructiveMessage, 'en-US');\n }\n\n currentQuestionIndex++; \/\/ Move to next question\n setTimeout(startLesson, 3000); \/\/ Ask next question after 3 seconds\n };\n\n recognition.onspeechend = function() {\n recognition.stop();\n };\n\n recognition.onerror = function(event) {\n appendMessage('Error: ' + event.error, 'bot');\n const retryMessage = \"Let's try that question again.\";\n appendMessage(retryMessage, 'bot');\n sayText(retryMessage, 'en-US');\n setTimeout(() => askSameQuestion(question), 3000); \/\/ Retry the same question\n };\n }\n\n function askSameQuestion(question) {\n const questionText = `Let's try again: '${question.english}'`;\n\n appendMessage(questionText, 'bot');\n sayText(question.english, \"en-US\");\n\n setTimeout(() => listenUserResponse(question), 5000); \/\/ Listen to the response again\n }\n\n function analyzeResponse(userInput, keywords) {\n \/\/ Convert user input to lowercase for case-insensitive matching\n const lowerCaseInput = userInput.toLowerCase();\n\n \/\/ Check if any keyword is present in the user input\n for (let keyword of keywords) {\n if (lowerCaseInput.includes(keyword.toLowerCase())) {\n return \"positive\";\n }\n }\n\n return \"constructive\";\n }\n\n function checkStopKeywords(userInput) {\n \/\/ Build a regex pattern with word boundaries and ignore case\n let pattern = new RegExp('\\\\b(' + stopKeywords.join('|') + ')\\\\b', 'i');\n return pattern.test(userInput);\n }\n\n function normalizeAndFormatUserInput(text) {\n \/\/ Replace \"i\" with \"I\" and capitalize the first letter of the sentence\n let normalized = text.replace(\/\\bi\\b\/g, \"I\");\n\n \/\/ Format the sentence: capitalize first letter, add a period or question mark as needed\n return formatSentence(normalized);\n }\n\n function formatSentence(text) {\n \/\/ Capitalize the first letter\n text = text.charAt(0).toUpperCase() + text.slice(1);\n\n \/\/ Check if it's a question or a statement\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 \/\/ Add question mark if it's a question, otherwise add a period\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 }\n\n function endLesson(userStopped = false) {\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 sayText(message, \"en-US\");\n }\n\n function sayText(text, lang, callback) {\n if (!speechSynthesisSupported) {\n if (callback) callback();\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 \/\/ Select the voice once voices are loaded\n if (voices.length === 0) {\n \/\/ If voices are not loaded yet, wait for them\n window.speechSynthesis.onvoiceschanged = () => {\n voices = window.speechSynthesis.getVoices();\n selectVoice(utterance, lang);\n utterance.onend = function() {\n if (callback) callback();\n };\n window.speechSynthesis.speak(utterance);\n };\n } else {\n selectVoice(utterance, lang);\n utterance.onend = function() {\n if (callback) callback();\n };\n window.speechSynthesis.speak(utterance);\n }\n }\n\n function selectVoice(utterance, lang) {\n \/\/ Prioritize specific high-quality voices available on Android\n const preferredVoiceNames = [\n 'Google US English',\n 'Google UK English Female',\n 'Google UK English Male',\n 'Google US English Female',\n 'Google US English Male'\n ];\n\n \/\/ Try to find a preferred voice first\n let selectedVoice = voices.find(voice => preferredVoiceNames.includes(voice.name));\n\n \/\/ If no preferred voice is found, fallback to any 'en-US' voice\n if (!selectedVoice) {\n selectedVoice = voices.find(voice => voice.lang === lang && voice.name.toLowerCase().includes('english')) ||\n voices.find(voice => voice.lang.startsWith('en'));\n }\n\n if (selectedVoice) {\n utterance.voice = selectedVoice;\n console.log(`Selected voice: ${selectedVoice.name}`);\n } else {\n console.warn(\"No suitable English voice found. Using default voice.\");\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 <\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>English Interaction – Sports Vocabulary Sentences Questions Yes\/No Questions Interaction Look at the sentences in this box English Interaction – Sports Start Stop<\/p>\n","protected":false},"author":1,"featured_media":1503,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[28,35,47,34,27,30],"tags":[],"class_list":["post-1528","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-adults","category-b1","category-pet","category-robots","category-speaking","category-young-learners"],"featured_image_src":"https:\/\/phamho.com\/book\/wp-content\/uploads\/2024\/09\/DALL\u00b7E-2024-09-15-18.17.33-A-classroom-scene-where-advanced-robots-are-teaching-English-to-B1-level-students.-The-robots-have-a-humanoid-design-with-sleek-metallic-bodies-and-f.webp","blog_images":{"medium":"https:\/\/phamho.com\/book\/wp-content\/uploads\/2024\/09\/DALL\u00b7E-2024-09-15-18.17.33-A-classroom-scene-where-advanced-robots-are-teaching-English-to-B1-level-students.-The-robots-have-a-humanoid-design-with-sleek-metallic-bodies-and-f-300x300.webp","large":"https:\/\/phamho.com\/book\/wp-content\/uploads\/2024\/09\/DALL\u00b7E-2024-09-15-18.17.33-A-classroom-scene-where-advanced-robots-are-teaching-English-to-B1-level-students.-The-robots-have-a-humanoid-design-with-sleek-metallic-bodies-and-f.webp"},"ams_acf":[],"_links":{"self":[{"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/posts\/1528","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/comments?post=1528"}],"version-history":[{"count":5,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/posts\/1528\/revisions"}],"predecessor-version":[{"id":1687,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/posts\/1528\/revisions\/1687"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/media\/1503"}],"wp:attachment":[{"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/media?parent=1528"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/categories?post=1528"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/tags?post=1528"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":1528,"date":"2024-09-15T17:28:39","date_gmt":"2024-09-15T17:28:39","guid":{"rendered":"https:\/\/phamho.com\/book\/?p=1528"},"modified":"2024-10-10T03:16:34","modified_gmt":"2024-10-10T03:16:34","slug":"interaction-sports","status":"publish","type":"post","link":"https:\/\/phamho.com\/book\/interaction-sports\/","title":{"rendered":"English Interaction – Sports"},"content":{"rendered":"\n\n\n\n \n \n English Interaction – Sports<\/title>\n <style>\n \/* Reset and Base Styles *\/\n body {\n font-family: Arial, sans-serif;\n background-color: #ffffff;\n margin: 0;\n padding: 0;\n display: flex;\n flex-direction: column; \/* Stack elements vertically *\/\n min-height: 100vh;\n }\n\n \/* Menu Styles *\/\n .menu {\n width: 100%;\n background-color: #d97b0f;\n padding: 8px; \/* Slightly reduced padding *\/\n text-align: center;\n box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);\n margin-bottom: 12px; \/* Slightly reduced margin *\/\n overflow-x: auto;\n white-space: nowrap;\n }\n .menu a {\n color: #fff;\n text-decoration: none;\n margin: 0 8px; \/* Maintained for spacing *\/\n font-weight: bold;\n font-size: 13px; \/* Slightly smaller font *\/\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; \/* Stack elements vertically on mobile *\/\n align-items: center;\n padding: 8px; \/* Reduced padding *\/\n box-sizing: border-box;\n flex: 1 0 auto;\n }\n .image-container, .chat-container {\n width: 100%;\n max-width: 400px; \/* Further reduced max-width *\/\n margin-bottom: 15px; \/* Reduced margin *\/\n }\n .image-container {\n text-align: center;\n }\n .image-container img {\n width: 100%;\n height: auto;\n border-radius: 15px; \/* Reduced border-radius *\/\n box-shadow: 0 0 8px rgba(0, 0, 0, 0.1); \/* Reduced shadow *\/\n }\n .sentence-text {\n margin: 8px 0; \/* Reduced margin *\/\n font-weight: bold;\n color: #333;\n font-size: 14px; \/* Slightly reduced font size *\/\n }\n .word-box {\n margin-top: 8px; \/* Reduced margin *\/\n padding: 8px; \/* Reduced padding *\/\n background-color: #fff;\n border: 2px solid #026c96;\n border-radius: 8px; \/* Reduced border-radius *\/\n box-shadow: 0 0 8px rgba(0, 0, 0, 0.1); \/* Reduced shadow *\/\n font-size: 16px; \/* Reduced font size *\/\n font-weight: bold;\n color: #026c96;\n text-align: left;\n max-height: 250px; \/* Reduced max-height *\/\n overflow-y: auto;\n }\n\n \/* Chat Container Styles *\/\n .chat-container {\n background-color: #026c96;\n border-radius: 15px; \/* Reduced border-radius *\/\n box-shadow: 0 0 8px rgba(0, 0, 0, 0.1); \/* Reduced shadow *\/\n overflow: hidden;\n display: flex;\n flex-direction: column;\n height: auto; \/* Removed fixed height *\/\n max-height: 500px; \/* Set a reasonable max-height *\/\n }\n .chat-header {\n background-color: #d97b0f;\n color: #fff;\n padding: 8px; \/* Reduced padding *\/\n text-align: center;\n border-bottom: 1px solid #69010a;\n }\n .chat-header h2 {\n margin: 0;\n font-size: 16px; \/* Reduced font size *\/\n }\n .chat-messages {\n padding: 8px; \/* Reduced padding *\/\n overflow-y: auto;\n flex: 1;\n background-color: #fff;\n max-height: 300px; \/* Reduced max-height *\/\n }\n .message {\n margin-bottom: 8px; \/* Reduced margin *\/\n padding: 8px; \/* Reduced padding *\/\n border-radius: 4px; \/* Reduced border-radius *\/\n font-size: 13px; \/* Reduced font size *\/\n line-height: 1.4;\n }\n .user-message {\n background-color: #4caf50;\n color: #fff;\n text-align: right;\n }\n .bot-message {\n background-color: #2196f3;\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: #a3e106;\n padding: 8px; \/* Reduced padding *\/\n justify-content: space-between;\n }\n .send-button, .stop-button {\n background-color: #17c686;\n color: #fff;\n font-weight: bold;\n border: none;\n border-radius: 5px;\n padding: 10px 12px; \/* Reduced padding *\/\n cursor: pointer;\n transition: background-color 0.3s;\n flex: 1;\n margin: 0 4px; \/* Reduced margin *\/\n max-width: 100px; \/* Reduced max-width *\/\n font-size: 14px; \/* Reduced font size *\/\n }\n .stop-button {\n background-color: #c86722;\n }\n .send-button:hover,\n .stop-button:hover,\n .send-button:focus,\n .stop-button:focus {\n background-color: #45a049;\n outline: none;\n }\n\n \/* Chat Input Additional Styles *\/\n .chat-input input {\n flex: 2;\n padding: 6px; \/* Reduced padding *\/\n margin-right: 8px; \/* Reduced margin *\/\n border: 2px solid #026c96;\n border-radius: 5px;\n font-size: 14px; \/* Reduced font size *\/\n }\n\n \/* Loader Styles *\/\n .loader {\n border: 4px solid #f3f3f3;\n border-top: 4px solid #2196f3;\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 @media (max-width: 600px) {\n .menu a {\n margin: 0 5px;\n font-size: 12px;\n }\n .sentence-text {\n font-size: 14px;\n }\n .word-box {\n font-size: 14px;\n max-height: 200px;\n }\n .chat-header h2 {\n font-size: 14px;\n }\n .chat-messages {\n max-height: 200px;\n }\n .message {\n font-size: 12px;\n }\n .send-button, .stop-button {\n padding: 8px 10px;\n font-size: 12px;\n max-width: 90px;\n }\n .chat-input input {\n font-size: 14px;\n }\n }\n\n @media (max-width: 400px) {\n .menu a {\n margin: 0 3px;\n font-size: 11px;\n }\n .sentence-text {\n font-size: 13px;\n }\n .word-box {\n font-size: 13px;\n max-height: 150px;\n }\n .chat-header h2 {\n font-size: 13px;\n }\n .chat-messages {\n max-height: 150px;\n }\n .message {\n font-size: 11px;\n }\n .send-button, .stop-button {\n padding: 6px 8px;\n font-size: 11px;\n max-width: 80px;\n }\n .chat-input input {\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: 14px; \/* Further reduced if necessary *\/\n }\n .send-button, .stop-button {\n padding: 10px 14px; \/* Adjusted padding *\/\n font-size: 14px; \/* Adjusted font size *\/\n }\n .message {\n font-size: 13px; \/* Adjusted font size *\/\n }\n .word-box {\n font-size: 15px; \/* Adjusted font size *\/\n }\n .chat-input input {\n font-size: 15px; \/* Adjusted font size *\/\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"menu\">\n <a href=\"https:\/\/phamho.com\/book\/2024\/09\/15\/learn-vocabulary-sports\/\">Vocabulary<\/a>\n <a href=\"https:\/\/phamho.com\/book\/2024\/09\/16\/english-playing-sports\/\">Sentences<\/a>\n <a href=\"https:\/\/phamho.com\/book\/2024\/09\/16\/english-sports-questions\/\">Questions<\/a>\n <a href=\"https:\/\/phamho.com\/book\/2024\/09\/16\/english-sports-questions\/\">Yes\/No Questions<\/a>\n <a href=\"https:\/\/phamho.com\/book\/2024\/09\/15\/interaction-sports\/\">Interaction<\/a>\n <\/div>\n\n <div class=\"container\">\n <div class=\"image-container\">\n <img decoding=\"async\" src=\"https:\/\/phamho.com\/book\/wp-content\/uploads\/2024\/06\/Teacher4.webp\" alt=\"Lesson Robot\">\n <div class=\"sentence-text\">Look at the sentences in this box<\/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>English Interaction – Sports<\/h2>\n <\/div>\n <div class=\"chat-messages\" id=\"chat-messages\">\n \n <\/div>\n <div class=\"chat-input\">\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\n <script>\n \/\/ Define the questions with expected keywords\n const questions = [\n { \n english: \"Do you like playing sports?\", \n keywords: [\"yes\", \"like\", \"love\", \"enjoy\", \"sports\"] \n },\n { \n english: \"Would you prefer watching a sport on TV or watching a live event?\", \n keywords: [\"TV\", \"live event\", \"watching\", \"prefer\"] \n },\n { \n english: \"What types of sports would you want to try?\", \n keywords: [\"soccer\", \"basketball\", \"tennis\", \"football\", \"jogging\", \"cycling\", \"yoga\"] \n },\n { \n english: \"What would you like to do to stay healthy, go jogging or take a fitness class?\", \n keywords: [\"jogging\", \"fitness class\", \"stay healthy\"] \n },\n { \n english: \"Would you prefer to play team sports like volleyball or individual sports like running?\", \n keywords: [\"team sports\", \"volleyball\", \"individual sports\", \"running\"] \n }\n ];\n\n \/\/ Define positive and constructive feedback arrays\n const positiveFeedback = [\n \"Wonderful!\",\n \"Your pronunciation was good.\",\n \"Perfect!\",\n \"Excellent pronunciation.\"\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 const stopKeywords = [\"goodbye\", \"good bye\", \"bye\", \"bye-bye\", \"byebye\"];\n\n let currentQuestionIndex = 0;\n let recognition;\n\n const speechSynthesisSupported = 'speechSynthesis' in window;\n const speechRecognitionSupported = window.SpeechRecognition || window.webkitSpeechRecognition;\n\n let voices = [];\n\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 console.log(\"Voices loaded:\", voices);\n };\n } else {\n console.log(\"Voices loaded:\", voices);\n }\n }\n\n loadVoices();\n\n window.onload = function() {\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 (!speechSynthesisSupported) {\n appendMessage(\"Speech synthesis is not supported in your browser.\", \"bot\");\n return;\n }\n if (speechRecognitionSupported) {\n currentQuestionIndex = 0;\n startLesson();\n } else {\n appendMessage(\"Speech recognition is not supported in your browser.\", \"bot\");\n }\n };\n\n \/\/ Handle Stop Button Click\n document.getElementById('stop-btn').onclick = function() {\n if (recognition) {\n recognition.stop();\n }\n endLesson(true);\n };\n };\n\n function greetUser() {\n const greeting = \"Hello! Welcome to the Practice Speaking about Sports. In this lesson, you have to listen to each question carefully and give your own answers. Are you ready? Click Start to begin the lesson!\";\n appendMessage(greeting, 'bot');\n sayText(greeting, \"en-US\");\n }\n\n function startLesson() {\n if (currentQuestionIndex < questions.length) {\n const question = questions[currentQuestionIndex];\n const questionText = `Question ${currentQuestionIndex + 1}: '${question.english}'`;\n\n appendMessage(questionText, 'bot');\n addSentenceToBox(question.english); \/\/ Add question to word box\n sayText(question.english, \"en-US\");\n\n \/\/ Listen for user response after a short delay to ensure the question has been spoken\n setTimeout(() => listenUserResponse(question), 5000);\n } else {\n endLesson();\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 recognition.start();\n\n recognition.onresult = function(event) {\n let userInput = event.results[0][0].transcript.trim();\n userInput = normalizeAndFormatUserInput(userInput); \/\/ Normalize input and format\n appendMessage(userInput, 'user');\n\n \/\/ Check for stop keywords\n if (checkStopKeywords(userInput.toLowerCase())) {\n endLesson(true);\n return;\n }\n\n \/\/ Analyze user input for keywords\n const feedbackType = analyzeResponse(userInput, question.keywords);\n\n if (feedbackType === \"positive\") {\n const positiveMessage = positiveFeedback[Math.floor(Math.random() * positiveFeedback.length)];\n appendMessage(positiveMessage, 'bot');\n sayText(positiveMessage, 'en-US');\n } else {\n const constructiveMessage = constructiveFeedback[Math.floor(Math.random() * constructiveFeedback.length)];\n appendMessage(constructiveMessage, 'bot');\n sayText(constructiveMessage, 'en-US');\n }\n\n currentQuestionIndex++; \/\/ Move to next question\n setTimeout(startLesson, 3000); \/\/ Ask next question after 3 seconds\n };\n\n recognition.onspeechend = function() {\n recognition.stop();\n };\n\n recognition.onerror = function(event) {\n appendMessage('Error: ' + event.error, 'bot');\n const retryMessage = \"Let's try that question again.\";\n appendMessage(retryMessage, 'bot');\n sayText(retryMessage, 'en-US');\n setTimeout(() => askSameQuestion(question), 3000); \/\/ Retry the same question\n };\n }\n\n function askSameQuestion(question) {\n const questionText = `Let's try again: '${question.english}'`;\n\n appendMessage(questionText, 'bot');\n sayText(question.english, \"en-US\");\n\n setTimeout(() => listenUserResponse(question), 5000); \/\/ Listen to the response again\n }\n\n function analyzeResponse(userInput, keywords) {\n \/\/ Convert user input to lowercase for case-insensitive matching\n const lowerCaseInput = userInput.toLowerCase();\n\n \/\/ Check if any keyword is present in the user input\n for (let keyword of keywords) {\n if (lowerCaseInput.includes(keyword.toLowerCase())) {\n return \"positive\";\n }\n }\n\n return \"constructive\";\n }\n\n function checkStopKeywords(userInput) {\n \/\/ Build a regex pattern with word boundaries and ignore case\n let pattern = new RegExp('\\\\b(' + stopKeywords.join('|') + ')\\\\b', 'i');\n return pattern.test(userInput);\n }\n\n function normalizeAndFormatUserInput(text) {\n \/\/ Replace \"i\" with \"I\" and capitalize the first letter of the sentence\n let normalized = text.replace(\/\\bi\\b\/g, \"I\");\n\n \/\/ Format the sentence: capitalize first letter, add a period or question mark as needed\n return formatSentence(normalized);\n }\n\n function formatSentence(text) {\n \/\/ Capitalize the first letter\n text = text.charAt(0).toUpperCase() + text.slice(1);\n\n \/\/ Check if it's a question or a statement\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 \/\/ Add question mark if it's a question, otherwise add a period\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 }\n\n function endLesson(userStopped = false) {\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 sayText(message, \"en-US\");\n }\n\n function sayText(text, lang, callback) {\n if (!speechSynthesisSupported) {\n if (callback) callback();\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 \/\/ Select the voice once voices are loaded\n if (voices.length === 0) {\n \/\/ If voices are not loaded yet, wait for them\n window.speechSynthesis.onvoiceschanged = () => {\n voices = window.speechSynthesis.getVoices();\n selectVoice(utterance, lang);\n utterance.onend = function() {\n if (callback) callback();\n };\n window.speechSynthesis.speak(utterance);\n };\n } else {\n selectVoice(utterance, lang);\n utterance.onend = function() {\n if (callback) callback();\n };\n window.speechSynthesis.speak(utterance);\n }\n }\n\n function selectVoice(utterance, lang) {\n \/\/ Prioritize specific high-quality voices available on Android\n const preferredVoiceNames = [\n 'Google US English',\n 'Google UK English Female',\n 'Google UK English Male',\n 'Google US English Female',\n 'Google US English Male'\n ];\n\n \/\/ Try to find a preferred voice first\n let selectedVoice = voices.find(voice => preferredVoiceNames.includes(voice.name));\n\n \/\/ If no preferred voice is found, fallback to any 'en-US' voice\n if (!selectedVoice) {\n selectedVoice = voices.find(voice => voice.lang === lang && voice.name.toLowerCase().includes('english')) ||\n voices.find(voice => voice.lang.startsWith('en'));\n }\n\n if (selectedVoice) {\n utterance.voice = selectedVoice;\n console.log(`Selected voice: ${selectedVoice.name}`);\n } else {\n console.warn(\"No suitable English voice found. Using default voice.\");\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 <\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>English Interaction – Sports Vocabulary Sentences Questions Yes\/No Questions Interaction Look at the sentences in this box English Interaction – Sports Start Stop<\/p>\n","protected":false},"author":1,"featured_media":1503,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[28,35,47,34,27,30],"tags":[],"class_list":["post-1528","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-adults","category-b1","category-pet","category-robots","category-speaking","category-young-learners"],"featured_image_src":"https:\/\/phamho.com\/book\/wp-content\/uploads\/2024\/09\/DALL\u00b7E-2024-09-15-18.17.33-A-classroom-scene-where-advanced-robots-are-teaching-English-to-B1-level-students.-The-robots-have-a-humanoid-design-with-sleek-metallic-bodies-and-f.webp","blog_images":{"medium":"https:\/\/phamho.com\/book\/wp-content\/uploads\/2024\/09\/DALL\u00b7E-2024-09-15-18.17.33-A-classroom-scene-where-advanced-robots-are-teaching-English-to-B1-level-students.-The-robots-have-a-humanoid-design-with-sleek-metallic-bodies-and-f-300x300.webp","large":"https:\/\/phamho.com\/book\/wp-content\/uploads\/2024\/09\/DALL\u00b7E-2024-09-15-18.17.33-A-classroom-scene-where-advanced-robots-are-teaching-English-to-B1-level-students.-The-robots-have-a-humanoid-design-with-sleek-metallic-bodies-and-f.webp"},"ams_acf":[],"_links":{"self":[{"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/posts\/1528","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/comments?post=1528"}],"version-history":[{"count":5,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/posts\/1528\/revisions"}],"predecessor-version":[{"id":1687,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/posts\/1528\/revisions\/1687"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/media\/1503"}],"wp:attachment":[{"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/media?parent=1528"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/categories?post=1528"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/tags?post=1528"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}