Practice Speaking – English for School<\/title>\n <style>\n body {\n font-family: Arial, sans-serif;\n background-color: #ffffff;\n margin: 0;\n padding: 0;\n }\n .chat-container {\n max-width: 400px;\n border: 2px;\n margin: 50px auto;\n background-color: #026c96;\n border-radius: 20px;\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n overflow: hidden;\n }\n .chat-header {\n background-color: #d97b0f;\n color: #fff;\n padding: 10px;\n text-align: center;\n border-bottom: 1px solid #69010a;\n }\n .chat-messages {\n padding: 10px;\n overflow-y: auto;\n max-height: 300px;\n border: 2px;\n }\n .message {\n margin-bottom: 10px;\n padding: 10px;\n border-radius: 5px;\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: #080900;\n text-align: left;\n }\n .chat-input {\n display: flex;\n align-items: center;\n background-color: #a3e106;\n padding: 10px;\n }\n .input-field {\n flex: 1;\n border: 1px;\n border-radius: 5px;\n padding: 8px;\n margin-right: 10px;\n }\n .send-button {\n background-color: #17c686;\n color: #fff;\n font-weight: bold;\n border: none;\n border-radius: 5px;\n padding: 8px 15px;\n margin-left: 3px;\n cursor: pointer;\n transition: background-color 0.3s;\n }\n .talk-button {\n background-color: #c86722;\n color: #fff;\n border: none;\n font-weight: bold;\n border-radius: 5px;\n padding: 8px 15px;\n cursor: pointer;\n transition: background-color 0.3s;\n }\n .send-button:hover,\n .talk-button:hover {\n background-color: #45a049;\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"chat-container\">\n <div class=\"chat-header\">Practice Speaking – English for School<\/div>\n <div class=\"chat-messages\" id=\"chat-messages\">\n \n <\/div>\n <div class=\"chat-input\">\n <input type=\"text\" class=\"input-field\" id=\"user-input\" placeholder=\"Type your message...\">\n <button class=\"talk-button\" onclick=\"startSpeechRecognition()\">Talk<\/button>\n <button class=\"send-button\" onclick=\"sendMessage()\">Send<\/button>\n <\/div>\n <\/div>\n\n <script>\n \/\/ Initialize the speech recognition object\n var recognition = new webkitSpeechRecognition();\n recognition.lang = \"en-US\";\n recognition.continuous = false;\n recognition.interimResults = false;\n\n \/\/ Initialize MediaRecorder object\n let mediaRecorder;\n\n \/\/ Function to add messages to the chat\n function addMessage(message, isUser) {\n var chatMessages = document.getElementById(\"chat-messages\");\n var messageElement = document.createElement(\"div\");\n messageElement.className = \"message \" + (isUser ? \"user-message\" : \"bot-message\");\n messageElement.textContent = message;\n chatMessages.appendChild(messageElement);\n chatMessages.scrollTop = chatMessages.scrollHeight; \/\/ Auto scroll to bottom\n }\n\n \/\/ Function to process user's response\n function processResponse(userResponse) {\n \/\/ Repeat user's input\n var repeatResponse = \"You said: \" + userResponse;\n addMessage(userResponse, true); \/\/ Show the user's response\n addMessage(repeatResponse, false);\n speak(repeatResponse); \/\/ Speak the repeated response\n\n \/\/ Check if the user's response contains goodbye keywords\n const goodbyeKeywords = [\"goodbye\", \"byebye\", \"bye\"];\n if (goodbyeKeywords.some(keyword => userResponse.toLowerCase().includes(keyword))) {\n var endMessage = \"Thank you for talking with me! Goodbye!\";\n addMessage(endMessage, false);\n speak(endMessage);\n return; \/\/ End the conversation\n }\n\n \/\/ Move to the next question or interaction after a delay\n setTimeout(function() {\n if (questions.length > 0) {\n var nextQuestion = questions.shift();\n addMessage(nextQuestion, false);\n speak(nextQuestion); \/\/ Speak the next question\n setTimeout(startSpeechRecognition, 2000); \/\/ Delay before starting speech recognition\n } else {\n var endMessage = \"Thank you for talking with me! Have a great day!\";\n addMessage(endMessage, false);\n speak(endMessage);\n }\n }, 2000);\n }\n\n \/\/ Function to start speech recognition\n function startSpeechRecognition() {\n navigator.mediaDevices.getUserMedia({ audio: true })\n .then(stream => {\n mediaRecorder = new MediaRecorder(stream);\n mediaRecorder.start();\n\n mediaRecorder.onstop = (e) => {\n const audioData = e.data[0]; \/\/ Get the audio blob\n processAudioData(audioData);\n };\n\n recognition.start();\n recognition.onresult = function (event) {\n const userResponse = event.results[0][0].transcript;\n processResponse(userResponse);\n mediaRecorder.stop(); \/\/ Stop recording after the transcript is received\n };\n })\n .catch(err => {\n console.error('Error accessing microphone:', err);\n });\n }\n\n \/\/ Process the audio blob\n function processAudioData(audioData) {\n fetch('\/recognize', {\n method: 'POST',\n headers: { 'Content-Type': 'audio\/wav' },\n body: audioData\n })\n .then(response => response.json())\n .then(data => {\n processResponse(data.text); \/\/ Pass the recognized text to your chatbot\n })\n .catch(err => {\n console.error('Error sending audio to server:', err);\n });\n }\n\n \/\/ Function to speak text\n function speak(text) {\n var utterance = new SpeechSynthesisUtterance(text);\n utterance.lang = \"en-US\";\n window.speechSynthesis.speak(utterance);\n }\n\n \/\/ Function to send user's typed message\n function sendMessage() {\n var userInput = document.getElementById(\"user-input\").value;\n if (userInput.trim() !== \"\") {\n addMessage(userInput, true);\n processResponse(userInput); \/\/ Process user's response\n document.getElementById(\"user-input\").value = \"\"; \/\/ Clear input field after sending message\n }\n }\n\n \/\/ Simple conversation questions for kids aged 12-14\n var questions = [\n \"What's your name?\",\n\"How are you?\",\n\"What grade are you in?\",\n\"Which school do you attend?\",\n\"What's your favorite subject?\",\n\"Do you have any siblings?\",\n\"What's your favorite book?\",\n\"What do you like to do for fun?\",\n\"What's your favorite sport?\",\n\"Do you play any musical instruments?\",\n\"Who's your best friend?\",\n\"What's your favorite movie?\",\n\"Do you have any pets?\",\n\"What's your favorite color?\",\n\"Do you enjoy art classes?\",\n\"What's your favorite food?\",\n\"Do you prefer reading or writing?\",\n\"What's your favorite season?\",\n\"Do you like science experiments?\",\n\"Who's your favorite teacher?\",\n\"What's your favorite hobby?\",\n\"Do you enjoy math puzzles?\",\n\"What's your favorite game?\",\n\"Do you like drawing?\",\n\"What's your favorite holiday?\",\n\"Do you enjoy singing?\",\n\"What's your favorite TV show?\",\n\"Do you have a favorite artist?\",\n\"What's your favorite animal?\",\n\"Do you enjoy outdoor activities?\",\n ];\n\n \/\/ Start the interview when the page loads\n window.onload = function () {\n var greeting = \"Hello! Welcome to the Practice Speaking with English for School. Are you ready?\";\n addMessage(greeting, false);\n speak(greeting);\n\n let startTimeout = setTimeout(() => {\n if (questions.length > 0) {\n const firstQuestion = questions.shift();\n addMessage(firstQuestion, false);\n speak(firstQuestion);\n startSpeechRecognition();\n }\n }, 5000);\n\n const talkButton = document.querySelector('.talk-button');\n talkButton.addEventListener('click', () => {\n clearTimeout(startTimeout);\n if (questions.length > 0) {\n const firstQuestion = questions.shift();\n addMessage(firstQuestion, false);\n speak(firstQuestion);\n startSpeechRecognition();\n }\n });\n };\n <\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>Practice Speaking – English for School Practice Speaking – English for School Talk Send<\/p>\n","protected":false},"author":1,"featured_media":1385,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[28,29,27,30],"tags":[],"class_list":["post-1384","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-adults","category-kids","category-speaking","category-young-learners"],"featured_image_src":"https:\/\/phamho.com\/book\/wp-content\/uploads\/2024\/06\/DALL\u00b7E-2024-06-09-11.08.10-Two-girls-practicing-speaking-English-in-a-classroom.-The-classroom-has-a-whiteboard-with-some-English-sentences-written-on-it-desks-and-chairs-arran-1024x585.webp","blog_images":{"medium":"https:\/\/phamho.com\/book\/wp-content\/uploads\/2024\/06\/DALL\u00b7E-2024-06-09-11.08.10-Two-girls-practicing-speaking-English-in-a-classroom.-The-classroom-has-a-whiteboard-with-some-English-sentences-written-on-it-desks-and-chairs-arran-300x171.webp","large":"https:\/\/phamho.com\/book\/wp-content\/uploads\/2024\/06\/DALL\u00b7E-2024-06-09-11.08.10-Two-girls-practicing-speaking-English-in-a-classroom.-The-classroom-has-a-whiteboard-with-some-English-sentences-written-on-it-desks-and-chairs-arran-1024x585.webp"},"ams_acf":[],"_links":{"self":[{"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/posts\/1384","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=1384"}],"version-history":[{"count":1,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/posts\/1384\/revisions"}],"predecessor-version":[{"id":1386,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/posts\/1384\/revisions\/1386"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/media\/1385"}],"wp:attachment":[{"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/media?parent=1384"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/categories?post=1384"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/tags?post=1384"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":1384,"date":"2024-06-09T04:16:51","date_gmt":"2024-06-09T04:16:51","guid":{"rendered":"https:\/\/phamho.com\/book\/?p=1384"},"modified":"2024-06-09T04:16:53","modified_gmt":"2024-06-09T04:16:53","slug":"practice-speaking-english-for-school","status":"publish","type":"post","link":"https:\/\/phamho.com\/book\/practice-speaking-english-for-school\/","title":{"rendered":"Practice Speaking – English for School"},"content":{"rendered":"\n\n\n\n \n \n Practice Speaking – English for School<\/title>\n <style>\n body {\n font-family: Arial, sans-serif;\n background-color: #ffffff;\n margin: 0;\n padding: 0;\n }\n .chat-container {\n max-width: 400px;\n border: 2px;\n margin: 50px auto;\n background-color: #026c96;\n border-radius: 20px;\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n overflow: hidden;\n }\n .chat-header {\n background-color: #d97b0f;\n color: #fff;\n padding: 10px;\n text-align: center;\n border-bottom: 1px solid #69010a;\n }\n .chat-messages {\n padding: 10px;\n overflow-y: auto;\n max-height: 300px;\n border: 2px;\n }\n .message {\n margin-bottom: 10px;\n padding: 10px;\n border-radius: 5px;\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: #080900;\n text-align: left;\n }\n .chat-input {\n display: flex;\n align-items: center;\n background-color: #a3e106;\n padding: 10px;\n }\n .input-field {\n flex: 1;\n border: 1px;\n border-radius: 5px;\n padding: 8px;\n margin-right: 10px;\n }\n .send-button {\n background-color: #17c686;\n color: #fff;\n font-weight: bold;\n border: none;\n border-radius: 5px;\n padding: 8px 15px;\n margin-left: 3px;\n cursor: pointer;\n transition: background-color 0.3s;\n }\n .talk-button {\n background-color: #c86722;\n color: #fff;\n border: none;\n font-weight: bold;\n border-radius: 5px;\n padding: 8px 15px;\n cursor: pointer;\n transition: background-color 0.3s;\n }\n .send-button:hover,\n .talk-button:hover {\n background-color: #45a049;\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"chat-container\">\n <div class=\"chat-header\">Practice Speaking – English for School<\/div>\n <div class=\"chat-messages\" id=\"chat-messages\">\n \n <\/div>\n <div class=\"chat-input\">\n <input type=\"text\" class=\"input-field\" id=\"user-input\" placeholder=\"Type your message...\">\n <button class=\"talk-button\" onclick=\"startSpeechRecognition()\">Talk<\/button>\n <button class=\"send-button\" onclick=\"sendMessage()\">Send<\/button>\n <\/div>\n <\/div>\n\n <script>\n \/\/ Initialize the speech recognition object\n var recognition = new webkitSpeechRecognition();\n recognition.lang = \"en-US\";\n recognition.continuous = false;\n recognition.interimResults = false;\n\n \/\/ Initialize MediaRecorder object\n let mediaRecorder;\n\n \/\/ Function to add messages to the chat\n function addMessage(message, isUser) {\n var chatMessages = document.getElementById(\"chat-messages\");\n var messageElement = document.createElement(\"div\");\n messageElement.className = \"message \" + (isUser ? \"user-message\" : \"bot-message\");\n messageElement.textContent = message;\n chatMessages.appendChild(messageElement);\n chatMessages.scrollTop = chatMessages.scrollHeight; \/\/ Auto scroll to bottom\n }\n\n \/\/ Function to process user's response\n function processResponse(userResponse) {\n \/\/ Repeat user's input\n var repeatResponse = \"You said: \" + userResponse;\n addMessage(userResponse, true); \/\/ Show the user's response\n addMessage(repeatResponse, false);\n speak(repeatResponse); \/\/ Speak the repeated response\n\n \/\/ Check if the user's response contains goodbye keywords\n const goodbyeKeywords = [\"goodbye\", \"byebye\", \"bye\"];\n if (goodbyeKeywords.some(keyword => userResponse.toLowerCase().includes(keyword))) {\n var endMessage = \"Thank you for talking with me! Goodbye!\";\n addMessage(endMessage, false);\n speak(endMessage);\n return; \/\/ End the conversation\n }\n\n \/\/ Move to the next question or interaction after a delay\n setTimeout(function() {\n if (questions.length > 0) {\n var nextQuestion = questions.shift();\n addMessage(nextQuestion, false);\n speak(nextQuestion); \/\/ Speak the next question\n setTimeout(startSpeechRecognition, 2000); \/\/ Delay before starting speech recognition\n } else {\n var endMessage = \"Thank you for talking with me! Have a great day!\";\n addMessage(endMessage, false);\n speak(endMessage);\n }\n }, 2000);\n }\n\n \/\/ Function to start speech recognition\n function startSpeechRecognition() {\n navigator.mediaDevices.getUserMedia({ audio: true })\n .then(stream => {\n mediaRecorder = new MediaRecorder(stream);\n mediaRecorder.start();\n\n mediaRecorder.onstop = (e) => {\n const audioData = e.data[0]; \/\/ Get the audio blob\n processAudioData(audioData);\n };\n\n recognition.start();\n recognition.onresult = function (event) {\n const userResponse = event.results[0][0].transcript;\n processResponse(userResponse);\n mediaRecorder.stop(); \/\/ Stop recording after the transcript is received\n };\n })\n .catch(err => {\n console.error('Error accessing microphone:', err);\n });\n }\n\n \/\/ Process the audio blob\n function processAudioData(audioData) {\n fetch('\/recognize', {\n method: 'POST',\n headers: { 'Content-Type': 'audio\/wav' },\n body: audioData\n })\n .then(response => response.json())\n .then(data => {\n processResponse(data.text); \/\/ Pass the recognized text to your chatbot\n })\n .catch(err => {\n console.error('Error sending audio to server:', err);\n });\n }\n\n \/\/ Function to speak text\n function speak(text) {\n var utterance = new SpeechSynthesisUtterance(text);\n utterance.lang = \"en-US\";\n window.speechSynthesis.speak(utterance);\n }\n\n \/\/ Function to send user's typed message\n function sendMessage() {\n var userInput = document.getElementById(\"user-input\").value;\n if (userInput.trim() !== \"\") {\n addMessage(userInput, true);\n processResponse(userInput); \/\/ Process user's response\n document.getElementById(\"user-input\").value = \"\"; \/\/ Clear input field after sending message\n }\n }\n\n \/\/ Simple conversation questions for kids aged 12-14\n var questions = [\n \"What's your name?\",\n\"How are you?\",\n\"What grade are you in?\",\n\"Which school do you attend?\",\n\"What's your favorite subject?\",\n\"Do you have any siblings?\",\n\"What's your favorite book?\",\n\"What do you like to do for fun?\",\n\"What's your favorite sport?\",\n\"Do you play any musical instruments?\",\n\"Who's your best friend?\",\n\"What's your favorite movie?\",\n\"Do you have any pets?\",\n\"What's your favorite color?\",\n\"Do you enjoy art classes?\",\n\"What's your favorite food?\",\n\"Do you prefer reading or writing?\",\n\"What's your favorite season?\",\n\"Do you like science experiments?\",\n\"Who's your favorite teacher?\",\n\"What's your favorite hobby?\",\n\"Do you enjoy math puzzles?\",\n\"What's your favorite game?\",\n\"Do you like drawing?\",\n\"What's your favorite holiday?\",\n\"Do you enjoy singing?\",\n\"What's your favorite TV show?\",\n\"Do you have a favorite artist?\",\n\"What's your favorite animal?\",\n\"Do you enjoy outdoor activities?\",\n ];\n\n \/\/ Start the interview when the page loads\n window.onload = function () {\n var greeting = \"Hello! Welcome to the Practice Speaking with English for School. Are you ready?\";\n addMessage(greeting, false);\n speak(greeting);\n\n let startTimeout = setTimeout(() => {\n if (questions.length > 0) {\n const firstQuestion = questions.shift();\n addMessage(firstQuestion, false);\n speak(firstQuestion);\n startSpeechRecognition();\n }\n }, 5000);\n\n const talkButton = document.querySelector('.talk-button');\n talkButton.addEventListener('click', () => {\n clearTimeout(startTimeout);\n if (questions.length > 0) {\n const firstQuestion = questions.shift();\n addMessage(firstQuestion, false);\n speak(firstQuestion);\n startSpeechRecognition();\n }\n });\n };\n <\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>Practice Speaking – English for School Practice Speaking – English for School Talk Send<\/p>\n","protected":false},"author":1,"featured_media":1385,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[28,29,27,30],"tags":[],"class_list":["post-1384","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-adults","category-kids","category-speaking","category-young-learners"],"featured_image_src":"https:\/\/phamho.com\/book\/wp-content\/uploads\/2024\/06\/DALL\u00b7E-2024-06-09-11.08.10-Two-girls-practicing-speaking-English-in-a-classroom.-The-classroom-has-a-whiteboard-with-some-English-sentences-written-on-it-desks-and-chairs-arran-1024x585.webp","blog_images":{"medium":"https:\/\/phamho.com\/book\/wp-content\/uploads\/2024\/06\/DALL\u00b7E-2024-06-09-11.08.10-Two-girls-practicing-speaking-English-in-a-classroom.-The-classroom-has-a-whiteboard-with-some-English-sentences-written-on-it-desks-and-chairs-arran-300x171.webp","large":"https:\/\/phamho.com\/book\/wp-content\/uploads\/2024\/06\/DALL\u00b7E-2024-06-09-11.08.10-Two-girls-practicing-speaking-English-in-a-classroom.-The-classroom-has-a-whiteboard-with-some-English-sentences-written-on-it-desks-and-chairs-arran-1024x585.webp"},"ams_acf":[],"_links":{"self":[{"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/posts\/1384","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=1384"}],"version-history":[{"count":1,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/posts\/1384\/revisions"}],"predecessor-version":[{"id":1386,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/posts\/1384\/revisions\/1386"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/media\/1385"}],"wp:attachment":[{"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/media?parent=1384"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/categories?post=1384"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/tags?post=1384"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}