English Yes\/No 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, .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-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 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 Yes\/No 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 Lesson<\/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 const questions = [\n { english: \"Do you play soccer?\", keywords: [\"yes\", \"no\", \"play\", \"soccer\", \"football\"] },\n { english: \"Do you practice basketball?\", keywords: [\"yes\", \"no\", \"practice\", \"basketball\"] },\n { english: \"Do you swim in the pool?\", keywords: [\"yes\", \"no\", \"swim\", \"pool\"] },\n { english: \"Do you run in the park?\", keywords: [\"yes\", \"run\", \"park\"] },\n { english: \"Do you go cycling?\", keywords: [\"yes\", \"go\", \"cycling\", \"bike\"] },\n { english: \"Do you play tennis?\", keywords: [\"yes\", \"play\", \"tennis\"] },\n { english: \"Do you practice martial arts?\", keywords: [\"yes\", \"no\", \"practice\", \"martial arts\", \"karate\", \"taekwondo\"] },\n { english: \"Do you do yoga?\", keywords: [\"yes\", \"do\", \"no\", \"yoga\"] },\n { english: \"Do you climb mountains?\", keywords: [\"yes\", \"no\", \"climb\", \"mountains\", \"hiking\"] },\n { english: \"Do you go hiking?\", keywords: [\"yes\", \"no\", \"go\", \"hiking\", \"walk\"] }\n ];\n\n const positiveFeedback = [\n \"Perfect.\",\n \"Your pronunciation is good.\",\n \"Wonderful.\",\n \"Excellent answer.\"\n ];\n\n const stopKeywords = [\"goodbye\", \"good bye\", \"bye\", \"bye bye\", \"byebye\"];\n\n let currentQuestionIndex = 0;\n let recognition;\n let repeatAttempts = 0;\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 repeatAttempts = 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 Lesson to begin!\";\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: '${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 \/\/ Check if user input contains any of the keywords\n const feedback = checkKeywords(userInput.toLowerCase(), question.keywords);\n if (feedback === \"positive\") {\n const positiveMessage = positiveFeedback[Math.floor(Math.random() * positiveFeedback.length)];\n appendMessage(positiveMessage, 'bot');\n sayText(positiveMessage, 'en-US');\n currentQuestionIndex++; \/\/ Move to next question\n setTimeout(startLesson, 3000); \/\/ Ask next question after 3 seconds\n repeatAttempts = 0; \/\/ Reset repeat attempts\n } else {\n repeatAttempts++;\n if (repeatAttempts < 2) {\n const negativeMessage = \"Please try again. I'll repeat the question.\";\n appendMessage(negativeMessage, 'bot');\n sayText(negativeMessage, 'en-US');\n setTimeout(() => askSameQuestion(question), 3000); \/\/ Repeat the same question\n } else {\n const nextQuestionMessage = \"You've tried twice. Let's move on to the next question.\";\n appendMessage(nextQuestionMessage, 'bot');\n sayText(nextQuestionMessage, 'en-US');\n currentQuestionIndex++;\n repeatAttempts = 0;\n setTimeout(startLesson, 3000); \/\/ Move to next question after 3 seconds\n }\n }\n };\n\n recognition.onspeechend = function() {\n recognition.stop();\n };\n\n recognition.onerror = function(event) {\n appendMessage('Error: ' + event.error, 'bot');\n repeatAttempts++;\n if (repeatAttempts < 2) {\n const retryMessage = `I didn't catch that. Please repeat: '${questions[currentQuestionIndex].english}'`;\n appendMessage(retryMessage, 'bot');\n sayText(\"I didn't catch that. Please repeat:\", 'en-US');\n sayText(questions[currentQuestionIndex].english, 'en-US');\n setTimeout(() => listenUserResponse(question), 3000); \/\/ Retry listening\n } else {\n const nextQuestionMessage = \"You've tried twice. Let's move on to the next question.\";\n appendMessage(nextQuestionMessage, 'bot');\n sayText(nextQuestionMessage, 'en-US');\n currentQuestionIndex++;\n repeatAttempts = 0;\n setTimeout(startLesson, 3000); \/\/ Move to next question after 3 seconds\n }\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 checkKeywords(userInput, keywords) {\n for (let keyword of keywords) {\n if (userInput.includes(keyword.toLowerCase())) {\n return \"positive\";\n }\n }\n return \"negative\";\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 your practice! 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 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 Yes\/No Questions – Sports Vocabulary Sentences Yes\/No Questions WH-Questions Interaction Look at the sentences in this box English Yes\/No Questions – Sports Start Lesson 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,27,39],"tags":[],"class_list":["post-1621","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-adults","category-b1","category-pet","category-speaking","category-sports"],"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\/1621","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=1621"}],"version-history":[{"count":7,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/posts\/1621\/revisions"}],"predecessor-version":[{"id":1683,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/posts\/1621\/revisions\/1683"}],"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=1621"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/categories?post=1621"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/tags?post=1621"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":1621,"date":"2024-09-16T12:39:41","date_gmt":"2024-09-16T12:39:41","guid":{"rendered":"https:\/\/phamho.com\/book\/?p=1621"},"modified":"2024-10-10T03:19:59","modified_gmt":"2024-10-10T03:19:59","slug":"english-sports-yes-no-questions","status":"publish","type":"post","link":"https:\/\/phamho.com\/book\/english-sports-yes-no-questions\/","title":{"rendered":"English Yes\/No Questions – Sports"},"content":{"rendered":"\n\n\n\n \n \n English Yes\/No 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, .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-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 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 Yes\/No 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 Lesson<\/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 const questions = [\n { english: \"Do you play soccer?\", keywords: [\"yes\", \"no\", \"play\", \"soccer\", \"football\"] },\n { english: \"Do you practice basketball?\", keywords: [\"yes\", \"no\", \"practice\", \"basketball\"] },\n { english: \"Do you swim in the pool?\", keywords: [\"yes\", \"no\", \"swim\", \"pool\"] },\n { english: \"Do you run in the park?\", keywords: [\"yes\", \"run\", \"park\"] },\n { english: \"Do you go cycling?\", keywords: [\"yes\", \"go\", \"cycling\", \"bike\"] },\n { english: \"Do you play tennis?\", keywords: [\"yes\", \"play\", \"tennis\"] },\n { english: \"Do you practice martial arts?\", keywords: [\"yes\", \"no\", \"practice\", \"martial arts\", \"karate\", \"taekwondo\"] },\n { english: \"Do you do yoga?\", keywords: [\"yes\", \"do\", \"no\", \"yoga\"] },\n { english: \"Do you climb mountains?\", keywords: [\"yes\", \"no\", \"climb\", \"mountains\", \"hiking\"] },\n { english: \"Do you go hiking?\", keywords: [\"yes\", \"no\", \"go\", \"hiking\", \"walk\"] }\n ];\n\n const positiveFeedback = [\n \"Perfect.\",\n \"Your pronunciation is good.\",\n \"Wonderful.\",\n \"Excellent answer.\"\n ];\n\n const stopKeywords = [\"goodbye\", \"good bye\", \"bye\", \"bye bye\", \"byebye\"];\n\n let currentQuestionIndex = 0;\n let recognition;\n let repeatAttempts = 0;\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 repeatAttempts = 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 Lesson to begin!\";\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: '${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 \/\/ Check if user input contains any of the keywords\n const feedback = checkKeywords(userInput.toLowerCase(), question.keywords);\n if (feedback === \"positive\") {\n const positiveMessage = positiveFeedback[Math.floor(Math.random() * positiveFeedback.length)];\n appendMessage(positiveMessage, 'bot');\n sayText(positiveMessage, 'en-US');\n currentQuestionIndex++; \/\/ Move to next question\n setTimeout(startLesson, 3000); \/\/ Ask next question after 3 seconds\n repeatAttempts = 0; \/\/ Reset repeat attempts\n } else {\n repeatAttempts++;\n if (repeatAttempts < 2) {\n const negativeMessage = \"Please try again. I'll repeat the question.\";\n appendMessage(negativeMessage, 'bot');\n sayText(negativeMessage, 'en-US');\n setTimeout(() => askSameQuestion(question), 3000); \/\/ Repeat the same question\n } else {\n const nextQuestionMessage = \"You've tried twice. Let's move on to the next question.\";\n appendMessage(nextQuestionMessage, 'bot');\n sayText(nextQuestionMessage, 'en-US');\n currentQuestionIndex++;\n repeatAttempts = 0;\n setTimeout(startLesson, 3000); \/\/ Move to next question after 3 seconds\n }\n }\n };\n\n recognition.onspeechend = function() {\n recognition.stop();\n };\n\n recognition.onerror = function(event) {\n appendMessage('Error: ' + event.error, 'bot');\n repeatAttempts++;\n if (repeatAttempts < 2) {\n const retryMessage = `I didn't catch that. Please repeat: '${questions[currentQuestionIndex].english}'`;\n appendMessage(retryMessage, 'bot');\n sayText(\"I didn't catch that. Please repeat:\", 'en-US');\n sayText(questions[currentQuestionIndex].english, 'en-US');\n setTimeout(() => listenUserResponse(question), 3000); \/\/ Retry listening\n } else {\n const nextQuestionMessage = \"You've tried twice. Let's move on to the next question.\";\n appendMessage(nextQuestionMessage, 'bot');\n sayText(nextQuestionMessage, 'en-US');\n currentQuestionIndex++;\n repeatAttempts = 0;\n setTimeout(startLesson, 3000); \/\/ Move to next question after 3 seconds\n }\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 checkKeywords(userInput, keywords) {\n for (let keyword of keywords) {\n if (userInput.includes(keyword.toLowerCase())) {\n return \"positive\";\n }\n }\n return \"negative\";\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 your practice! 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 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 Yes\/No Questions – Sports Vocabulary Sentences Yes\/No Questions WH-Questions Interaction Look at the sentences in this box English Yes\/No Questions – Sports Start Lesson 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,27,39],"tags":[],"class_list":["post-1621","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-adults","category-b1","category-pet","category-speaking","category-sports"],"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\/1621","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=1621"}],"version-history":[{"count":7,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/posts\/1621\/revisions"}],"predecessor-version":[{"id":1683,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/posts\/1621\/revisions\/1683"}],"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=1621"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/categories?post=1621"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/tags?post=1621"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}