English WH-Questions – 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, .talk-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 .talk-button {\n background-color: #c86722;\n }\n .send-button:hover,\n .talk-button:hover,\n .send-button:focus,\n .talk-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, .talk-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, .talk-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, .talk-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-yes-no-questions\/\">Yes\/No Questions<\/a>\n <a href=\"https:\/\/phamho.com\/book\/2024\/09\/16\/english-sports-wh-questions\/\">WH-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\/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\" alt=\"Lesson Robot\">\n <div class=\"sentence-text\">Look at the questions 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 WH-Questions – 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=\"talk-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: \"What is your favorite sport?\", \n keywords: [\"soccer\", \"basketball\", \"tennis\", \"swimming\", \"football\", \"baseball\", \"volleyball\", \"hockey\", \"cricket\", \"golf\"] \n },\n { \n english: \"Why do you like playing sports?\", \n keywords: [\"health\", \"fun\", \"competition\", \"teamwork\", \"challenge\", \"stress\", \"fitness\", \"friends\", \"skill\", \"enjoyment\"] \n },\n { \n english: \"When do you usually play sports?\", \n keywords: [\"morning\", \"afternoon\", \"evening\", \"weekend\", \"weekday\", \"after work\", \"after school\", \"daily\", \"weekly\", \"seasonally\"] \n },\n { \n english: \"Where do you go to exercise?\", \n keywords: [\"gym\", \"park\", \"stadium\", \"home\", \"sports club\", \"beach\", \"pool\", \"track\", \"basketball court\", \"football field\"] \n },\n { \n english: \"Who do you play sports with?\", \n keywords: [\"friends\", \"family\", \"teammates\", \"colleagues\", \"neighbors\", \"siblings\", \"partners\", \"coaches\", \"teammates\", \"schoolmates\"] \n },\n { \n english: \"How often do you practice sports?\", \n keywords: [\"daily\", \"weekly\", \"monthly\", \"occasionally\", \"regularly\", \"rarely\", \"everyday\", \"twice a week\", \"three times a week\", \"once a week\"] \n },\n { \n english: \"Which sport do you find most challenging?\", \n keywords: [\"basketball\", \"soccer\", \"tennis\", \"boxing\", \"martial arts\", \"golf\", \"swimming\", \"baseball\", \"hockey\", \"football\"] \n },\n { \n english: \"How do you stay motivated to exercise?\", \n keywords: [\"goals\", \"friends\", \"music\", \"routine\", \"variety\", \"health benefits\", \"competition\", \"rewards\", \"tracking progress\", \"inspiration\"] \n },\n { \n english: \"What sports did you play in school?\", \n keywords: [\"soccer\", \"basketball\", \"track\", \"swimming\", \"baseball\", \"volleyball\", \"hockey\", \"tennis\", \"football\", \"gymnastics\"] \n },\n { \n english: \"How has playing sports benefited you?\", \n keywords: [\"health\", \"fitness\", \"teamwork\", \"discipline\", \"stress relief\", \"confidence\", \"social skills\", \"leadership\", \"time management\", \"resilience\"] \n }\n ];\n\n \/\/ Define positive and constructive feedback arrays\n const positiveFeedback = [\n \"Great job!\",\n \"That's a good answer.\",\n \"Well done!\",\n \"Excellent!\",\n \"Good to hear!\",\n \"Nice work!\",\n \"Fantastic!\",\n \"Very good!\",\n \"Impressive!\",\n \"Keep it up!\"\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 if (speechRecognitionSupported) {\n recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();\n recognition.lang = 'en-US';\n recognition.interimResults = false;\n recognition.maxAlternatives = 1;\n }\n\n let voices = [];\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, I will ask you 10 questions. Please listen carefully and give your own answers. You can say 'goodbye' anytime to end the lesson. 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 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 \/\/ Capitalize the first letter\n normalized = normalized.charAt(0).toUpperCase() + normalized.slice(1);\n\n \/\/ Add a period if the sentence doesn't end with punctuation\n if (!normalized.endsWith('.') && !normalized.endsWith('?') && !normalized.endsWith('!')) {\n normalized += '.';\n }\n\n return normalized;\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 your learning today! I hope you enjoyed this lesson!\";\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) {\n if (!speechSynthesisSupported) return;\n\n const utterance = new SpeechSynthesisUtterance(text);\n utterance.lang = lang;\n utterance.rate = 1.0;\n utterance.pitch = 1.0;\n\n if (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 window.speechSynthesis.speak(utterance);\n };\n } else {\n selectVoice(utterance, lang);\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 WH-Questions – Sports Vocabulary Sentences Yes\/No Questions WH-Questions Interaction Look at the questions in this box English WH-Questions – Sports Start Stop<\/p>\n","protected":false},"author":1,"featured_media":1297,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[28,35,47,34,27,39],"tags":[],"class_list":["post-1624","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-adults","category-b1","category-pet","category-robots","category-speaking","category-sports"],"featured_image_src":"https:\/\/phamho.com\/book\/wp-content\/uploads\/2024\/03\/thumbnail_image_45.png","blog_images":{"medium":"https:\/\/phamho.com\/book\/wp-content\/uploads\/2024\/03\/thumbnail_image_45-300x200.png","large":"https:\/\/phamho.com\/book\/wp-content\/uploads\/2024\/03\/thumbnail_image_45.png"},"ams_acf":[],"_links":{"self":[{"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/posts\/1624","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=1624"}],"version-history":[{"count":5,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/posts\/1624\/revisions"}],"predecessor-version":[{"id":1686,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/posts\/1624\/revisions\/1686"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/media\/1297"}],"wp:attachment":[{"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/media?parent=1624"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/categories?post=1624"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/tags?post=1624"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":1624,"date":"2024-09-16T13:09:53","date_gmt":"2024-09-16T13:09:53","guid":{"rendered":"https:\/\/phamho.com\/book\/?p=1624"},"modified":"2024-10-10T03:19:44","modified_gmt":"2024-10-10T03:19:44","slug":"english-sports-wh-questions","status":"publish","type":"post","link":"https:\/\/phamho.com\/book\/english-sports-wh-questions\/","title":{"rendered":"English WH-Questions – Sports"},"content":{"rendered":"\n\n\n\n \n \n English WH-Questions – 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, .talk-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 .talk-button {\n background-color: #c86722;\n }\n .send-button:hover,\n .talk-button:hover,\n .send-button:focus,\n .talk-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, .talk-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, .talk-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, .talk-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-yes-no-questions\/\">Yes\/No Questions<\/a>\n <a href=\"https:\/\/phamho.com\/book\/2024\/09\/16\/english-sports-wh-questions\/\">WH-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\/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\" alt=\"Lesson Robot\">\n <div class=\"sentence-text\">Look at the questions 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 WH-Questions – 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=\"talk-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: \"What is your favorite sport?\", \n keywords: [\"soccer\", \"basketball\", \"tennis\", \"swimming\", \"football\", \"baseball\", \"volleyball\", \"hockey\", \"cricket\", \"golf\"] \n },\n { \n english: \"Why do you like playing sports?\", \n keywords: [\"health\", \"fun\", \"competition\", \"teamwork\", \"challenge\", \"stress\", \"fitness\", \"friends\", \"skill\", \"enjoyment\"] \n },\n { \n english: \"When do you usually play sports?\", \n keywords: [\"morning\", \"afternoon\", \"evening\", \"weekend\", \"weekday\", \"after work\", \"after school\", \"daily\", \"weekly\", \"seasonally\"] \n },\n { \n english: \"Where do you go to exercise?\", \n keywords: [\"gym\", \"park\", \"stadium\", \"home\", \"sports club\", \"beach\", \"pool\", \"track\", \"basketball court\", \"football field\"] \n },\n { \n english: \"Who do you play sports with?\", \n keywords: [\"friends\", \"family\", \"teammates\", \"colleagues\", \"neighbors\", \"siblings\", \"partners\", \"coaches\", \"teammates\", \"schoolmates\"] \n },\n { \n english: \"How often do you practice sports?\", \n keywords: [\"daily\", \"weekly\", \"monthly\", \"occasionally\", \"regularly\", \"rarely\", \"everyday\", \"twice a week\", \"three times a week\", \"once a week\"] \n },\n { \n english: \"Which sport do you find most challenging?\", \n keywords: [\"basketball\", \"soccer\", \"tennis\", \"boxing\", \"martial arts\", \"golf\", \"swimming\", \"baseball\", \"hockey\", \"football\"] \n },\n { \n english: \"How do you stay motivated to exercise?\", \n keywords: [\"goals\", \"friends\", \"music\", \"routine\", \"variety\", \"health benefits\", \"competition\", \"rewards\", \"tracking progress\", \"inspiration\"] \n },\n { \n english: \"What sports did you play in school?\", \n keywords: [\"soccer\", \"basketball\", \"track\", \"swimming\", \"baseball\", \"volleyball\", \"hockey\", \"tennis\", \"football\", \"gymnastics\"] \n },\n { \n english: \"How has playing sports benefited you?\", \n keywords: [\"health\", \"fitness\", \"teamwork\", \"discipline\", \"stress relief\", \"confidence\", \"social skills\", \"leadership\", \"time management\", \"resilience\"] \n }\n ];\n\n \/\/ Define positive and constructive feedback arrays\n const positiveFeedback = [\n \"Great job!\",\n \"That's a good answer.\",\n \"Well done!\",\n \"Excellent!\",\n \"Good to hear!\",\n \"Nice work!\",\n \"Fantastic!\",\n \"Very good!\",\n \"Impressive!\",\n \"Keep it up!\"\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 if (speechRecognitionSupported) {\n recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();\n recognition.lang = 'en-US';\n recognition.interimResults = false;\n recognition.maxAlternatives = 1;\n }\n\n let voices = [];\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, I will ask you 10 questions. Please listen carefully and give your own answers. You can say 'goodbye' anytime to end the lesson. 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 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 \/\/ Capitalize the first letter\n normalized = normalized.charAt(0).toUpperCase() + normalized.slice(1);\n\n \/\/ Add a period if the sentence doesn't end with punctuation\n if (!normalized.endsWith('.') && !normalized.endsWith('?') && !normalized.endsWith('!')) {\n normalized += '.';\n }\n\n return normalized;\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 your learning today! I hope you enjoyed this lesson!\";\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) {\n if (!speechSynthesisSupported) return;\n\n const utterance = new SpeechSynthesisUtterance(text);\n utterance.lang = lang;\n utterance.rate = 1.0;\n utterance.pitch = 1.0;\n\n if (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 window.speechSynthesis.speak(utterance);\n };\n } else {\n selectVoice(utterance, lang);\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 WH-Questions – Sports Vocabulary Sentences Yes\/No Questions WH-Questions Interaction Look at the questions in this box English WH-Questions – Sports Start Stop<\/p>\n","protected":false},"author":1,"featured_media":1297,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[28,35,47,34,27,39],"tags":[],"class_list":["post-1624","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-adults","category-b1","category-pet","category-robots","category-speaking","category-sports"],"featured_image_src":"https:\/\/phamho.com\/book\/wp-content\/uploads\/2024\/03\/thumbnail_image_45.png","blog_images":{"medium":"https:\/\/phamho.com\/book\/wp-content\/uploads\/2024\/03\/thumbnail_image_45-300x200.png","large":"https:\/\/phamho.com\/book\/wp-content\/uploads\/2024\/03\/thumbnail_image_45.png"},"ams_acf":[],"_links":{"self":[{"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/posts\/1624","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=1624"}],"version-history":[{"count":5,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/posts\/1624\/revisions"}],"predecessor-version":[{"id":1686,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/posts\/1624\/revisions\/1686"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/media\/1297"}],"wp:attachment":[{"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/media?parent=1624"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/categories?post=1624"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/tags?post=1624"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}