Practice Speaking 3-5 years old<\/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 3-5 years old<\/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 \/\/ 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 \/\/ Interview questions for kids aged 3-5\n var questions = [\n \"Can you introduce yourself? What's your name?\",\n \"How old are you?\",\n \"What's your favorite toy?\",\n \"What do you like to do for fun?\",\n \"Can you tell me about your favorite animal?\",\n \"What's your favorite color and why?\",\n \"Do you like playing outside? What's your favorite game to play outside?\",\n \"Can you tell me about your best friend?\",\n \"What's your favorite story or book?\",\n \"Do you have any pets? Tell me about them.\",\n \"What's your favorite snack?\",\n \"What is your favorite thing to draw or color?\",\n \"Can you sing your favorite song for me?\",\n \"What do you like to watch on TV?\",\n \"What's your favorite cartoon character?\",\n \"What's the best thing about going to the park?\",\n \"Do you like to play games? What's your favorite game to play?\",\n \"What's the most fun thing you've done recently?\",\n \"Do you have a favorite holiday or celebration?\",\n \"What do you want to be when you grow up?\",\n \"If you could be any animal, what would you be and why?\",\n \"What's your favorite thing to do with your family?\",\n \"Do you like to help around the house? What's your favorite chore?\",\n \"What's your favorite ice cream flavor?\",\n \"If you could go anywhere in the world, where would you go and why?\"\n ];\n\n \/\/ Start the interview when the page loads\n window.onload = function () {\n var greeting = \"Hello! Welcome to the Practice Speaking for 3 to 5 year-old kids. Are you ready? Let's get started.\";\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","protected":false},"excerpt":{"rendered":"<p>Practice Speaking 3-5 years old Practice Speaking 3-5 years old Talk Send<\/p>\n","protected":false},"author":1,"featured_media":1328,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[29,27],"tags":[],"class_list":["post-1327","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-kids","category-speaking"],"featured_image_src":"https:\/\/phamho.com\/book\/wp-content\/uploads\/2024\/06\/DALL\u00b7E-2024-06-07-13.02.30-A-friendly-humanoid-robot-in-a-classroom-designed-to-help-kids-learn-English.-The-robot-has-a-sleek-modern-design-with-smooth-white-surfaces-and-ge-1024x585.webp","blog_images":{"medium":"https:\/\/phamho.com\/book\/wp-content\/uploads\/2024\/06\/DALL\u00b7E-2024-06-07-13.02.30-A-friendly-humanoid-robot-in-a-classroom-designed-to-help-kids-learn-English.-The-robot-has-a-sleek-modern-design-with-smooth-white-surfaces-and-ge-300x171.webp","large":"https:\/\/phamho.com\/book\/wp-content\/uploads\/2024\/06\/DALL\u00b7E-2024-06-07-13.02.30-A-friendly-humanoid-robot-in-a-classroom-designed-to-help-kids-learn-English.-The-robot-has-a-sleek-modern-design-with-smooth-white-surfaces-and-ge-1024x585.webp"},"ams_acf":[],"_links":{"self":[{"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/posts\/1327","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=1327"}],"version-history":[{"count":2,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/posts\/1327\/revisions"}],"predecessor-version":[{"id":1372,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/posts\/1327\/revisions\/1372"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/media\/1328"}],"wp:attachment":[{"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/media?parent=1327"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/categories?post=1327"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/tags?post=1327"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":1327,"date":"2024-06-07T06:06:06","date_gmt":"2024-06-07T06:06:06","guid":{"rendered":"https:\/\/phamho.com\/book\/?p=1327"},"modified":"2024-06-07T12:58:12","modified_gmt":"2024-06-07T12:58:12","slug":"practice-english-for-3-5-year-old-kids","status":"publish","type":"post","link":"https:\/\/phamho.com\/book\/practice-english-for-3-5-year-old-kids\/","title":{"rendered":"Practice English for 3-5 year-old Kids"},"content":{"rendered":"\n\n\n\n \n \n Practice Speaking 3-5 years old<\/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 3-5 years old<\/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 \/\/ 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 \/\/ Interview questions for kids aged 3-5\n var questions = [\n \"Can you introduce yourself? What's your name?\",\n \"How old are you?\",\n \"What's your favorite toy?\",\n \"What do you like to do for fun?\",\n \"Can you tell me about your favorite animal?\",\n \"What's your favorite color and why?\",\n \"Do you like playing outside? What's your favorite game to play outside?\",\n \"Can you tell me about your best friend?\",\n \"What's your favorite story or book?\",\n \"Do you have any pets? Tell me about them.\",\n \"What's your favorite snack?\",\n \"What is your favorite thing to draw or color?\",\n \"Can you sing your favorite song for me?\",\n \"What do you like to watch on TV?\",\n \"What's your favorite cartoon character?\",\n \"What's the best thing about going to the park?\",\n \"Do you like to play games? What's your favorite game to play?\",\n \"What's the most fun thing you've done recently?\",\n \"Do you have a favorite holiday or celebration?\",\n \"What do you want to be when you grow up?\",\n \"If you could be any animal, what would you be and why?\",\n \"What's your favorite thing to do with your family?\",\n \"Do you like to help around the house? What's your favorite chore?\",\n \"What's your favorite ice cream flavor?\",\n \"If you could go anywhere in the world, where would you go and why?\"\n ];\n\n \/\/ Start the interview when the page loads\n window.onload = function () {\n var greeting = \"Hello! Welcome to the Practice Speaking for 3 to 5 year-old kids. Are you ready? Let's get started.\";\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","protected":false},"excerpt":{"rendered":"<p>Practice Speaking 3-5 years old Practice Speaking 3-5 years old Talk Send<\/p>\n","protected":false},"author":1,"featured_media":1328,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[29,27],"tags":[],"class_list":["post-1327","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-kids","category-speaking"],"featured_image_src":"https:\/\/phamho.com\/book\/wp-content\/uploads\/2024\/06\/DALL\u00b7E-2024-06-07-13.02.30-A-friendly-humanoid-robot-in-a-classroom-designed-to-help-kids-learn-English.-The-robot-has-a-sleek-modern-design-with-smooth-white-surfaces-and-ge-1024x585.webp","blog_images":{"medium":"https:\/\/phamho.com\/book\/wp-content\/uploads\/2024\/06\/DALL\u00b7E-2024-06-07-13.02.30-A-friendly-humanoid-robot-in-a-classroom-designed-to-help-kids-learn-English.-The-robot-has-a-sleek-modern-design-with-smooth-white-surfaces-and-ge-300x171.webp","large":"https:\/\/phamho.com\/book\/wp-content\/uploads\/2024\/06\/DALL\u00b7E-2024-06-07-13.02.30-A-friendly-humanoid-robot-in-a-classroom-designed-to-help-kids-learn-English.-The-robot-has-a-sleek-modern-design-with-smooth-white-surfaces-and-ge-1024x585.webp"},"ams_acf":[],"_links":{"self":[{"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/posts\/1327","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=1327"}],"version-history":[{"count":2,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/posts\/1327\/revisions"}],"predecessor-version":[{"id":1372,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/posts\/1327\/revisions\/1372"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/media\/1328"}],"wp:attachment":[{"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/media?parent=1327"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/categories?post=1327"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/tags?post=1327"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}