Practice Speaking – Family<\/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 – Family<\/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 \/\/ Interview questions for kids aged 12-14 about family members\nvar questions = [\n \"Can you tell me about your family? How many members are there?\",\n \"What do your parents do for a living?\",\n \"Do you have any siblings? What are their names and ages?\",\n \"What activities do you enjoy doing with your family?\",\n \"Can you describe a typical day in your household?\",\n \"What's your favorite family tradition and why?\",\n \"Do you have any relatives who live far away? How do you stay in touch with them?\",\n \"What are some things you admire about your parents?\",\n \"How do you and your siblings spend time together?\",\n \"Can you share a memorable family vacation or trip?\",\n \"What chores or tasks do you help with at home?\",\n \"Do you have any pets that you consider part of the family? Tell me about them.\",\n \"How does your family celebrate birthdays and other special occasions?\",\n \"What's your favorite meal that a family member cooks?\",\n \"Do you have any grandparents or elderly relatives you are close to? What do you enjoy doing with them?\",\n \"Can you tell me about a time when your family supported you in something important?\",\n \"What's a funny or interesting story about a family member?\",\n \"How do your family members encourage you to pursue your hobbies or interests?\",\n \"What are some family activities or traditions that you would like to continue in the future?\",\n \"How does your family celebrate holidays and festivals?\",\n \"Do you have a favorite family game or activity? What is it?\",\n \"Can you describe a time when you and your family worked together on a project or task?\",\n \"How do you show appreciation for your family members?\",\n \"What's a lesson or value that your parents or guardians have taught you?\",\n \"What qualities do you appreciate most about each of your family members?\",\n \"How does your family handle conflicts or disagreements?\",\n \"Do you have a favorite place to go with your family? Why do you like it?\"\n];\n\n\n \/\/ Start the interview when the page loads\n window.onload = function () {\n var greeting = \"Hello! Welcome to the Practice Speaking about family. 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 – Family Practice Speaking – Family Talk Send<\/p>\n","protected":false},"author":1,"featured_media":1409,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[28,27,30],"tags":[],"class_list":["post-1366","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-adults","category-speaking","category-young-learners"],"featured_image_src":"https:\/\/phamho.com\/book\/wp-content\/uploads\/2024\/06\/DALL\u00b7E-2024-06-09-13.38.16-A-family-speaking-to-one-another-in-a-cozy-living-room.-The-family-consists-of-a-mother-father-teenage-daughter-and-a-young-son.-They-are-sitting-o-1024x585.webp","blog_images":{"medium":"https:\/\/phamho.com\/book\/wp-content\/uploads\/2024\/06\/DALL\u00b7E-2024-06-09-13.38.16-A-family-speaking-to-one-another-in-a-cozy-living-room.-The-family-consists-of-a-mother-father-teenage-daughter-and-a-young-son.-They-are-sitting-o-300x171.webp","large":"https:\/\/phamho.com\/book\/wp-content\/uploads\/2024\/06\/DALL\u00b7E-2024-06-09-13.38.16-A-family-speaking-to-one-another-in-a-cozy-living-room.-The-family-consists-of-a-mother-father-teenage-daughter-and-a-young-son.-They-are-sitting-o-1024x585.webp"},"ams_acf":[],"_links":{"self":[{"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/posts\/1366","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=1366"}],"version-history":[{"count":2,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/posts\/1366\/revisions"}],"predecessor-version":[{"id":1410,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/posts\/1366\/revisions\/1410"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/media\/1409"}],"wp:attachment":[{"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/media?parent=1366"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/categories?post=1366"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/tags?post=1366"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":1366,"date":"2024-06-07T12:47:26","date_gmt":"2024-06-07T12:47:26","guid":{"rendered":"https:\/\/phamho.com\/book\/?p=1366"},"modified":"2024-06-09T06:38:44","modified_gmt":"2024-06-09T06:38:44","slug":"practice-speaking-family","status":"publish","type":"post","link":"https:\/\/phamho.com\/book\/practice-speaking-family\/","title":{"rendered":"Practice Speaking – Family"},"content":{"rendered":"\n\n\n\n \n \n Practice Speaking – Family<\/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 – Family<\/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 \/\/ Interview questions for kids aged 12-14 about family members\nvar questions = [\n \"Can you tell me about your family? How many members are there?\",\n \"What do your parents do for a living?\",\n \"Do you have any siblings? What are their names and ages?\",\n \"What activities do you enjoy doing with your family?\",\n \"Can you describe a typical day in your household?\",\n \"What's your favorite family tradition and why?\",\n \"Do you have any relatives who live far away? How do you stay in touch with them?\",\n \"What are some things you admire about your parents?\",\n \"How do you and your siblings spend time together?\",\n \"Can you share a memorable family vacation or trip?\",\n \"What chores or tasks do you help with at home?\",\n \"Do you have any pets that you consider part of the family? Tell me about them.\",\n \"How does your family celebrate birthdays and other special occasions?\",\n \"What's your favorite meal that a family member cooks?\",\n \"Do you have any grandparents or elderly relatives you are close to? What do you enjoy doing with them?\",\n \"Can you tell me about a time when your family supported you in something important?\",\n \"What's a funny or interesting story about a family member?\",\n \"How do your family members encourage you to pursue your hobbies or interests?\",\n \"What are some family activities or traditions that you would like to continue in the future?\",\n \"How does your family celebrate holidays and festivals?\",\n \"Do you have a favorite family game or activity? What is it?\",\n \"Can you describe a time when you and your family worked together on a project or task?\",\n \"How do you show appreciation for your family members?\",\n \"What's a lesson or value that your parents or guardians have taught you?\",\n \"What qualities do you appreciate most about each of your family members?\",\n \"How does your family handle conflicts or disagreements?\",\n \"Do you have a favorite place to go with your family? Why do you like it?\"\n];\n\n\n \/\/ Start the interview when the page loads\n window.onload = function () {\n var greeting = \"Hello! Welcome to the Practice Speaking about family. 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 – Family Practice Speaking – Family Talk Send<\/p>\n","protected":false},"author":1,"featured_media":1409,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[28,27,30],"tags":[],"class_list":["post-1366","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-adults","category-speaking","category-young-learners"],"featured_image_src":"https:\/\/phamho.com\/book\/wp-content\/uploads\/2024\/06\/DALL\u00b7E-2024-06-09-13.38.16-A-family-speaking-to-one-another-in-a-cozy-living-room.-The-family-consists-of-a-mother-father-teenage-daughter-and-a-young-son.-They-are-sitting-o-1024x585.webp","blog_images":{"medium":"https:\/\/phamho.com\/book\/wp-content\/uploads\/2024\/06\/DALL\u00b7E-2024-06-09-13.38.16-A-family-speaking-to-one-another-in-a-cozy-living-room.-The-family-consists-of-a-mother-father-teenage-daughter-and-a-young-son.-They-are-sitting-o-300x171.webp","large":"https:\/\/phamho.com\/book\/wp-content\/uploads\/2024\/06\/DALL\u00b7E-2024-06-09-13.38.16-A-family-speaking-to-one-another-in-a-cozy-living-room.-The-family-consists-of-a-mother-father-teenage-daughter-and-a-young-son.-They-are-sitting-o-1024x585.webp"},"ams_acf":[],"_links":{"self":[{"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/posts\/1366","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=1366"}],"version-history":[{"count":2,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/posts\/1366\/revisions"}],"predecessor-version":[{"id":1410,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/posts\/1366\/revisions\/1410"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/media\/1409"}],"wp:attachment":[{"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/media?parent=1366"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/categories?post=1366"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/tags?post=1366"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}