Practice Speaking – Summer vacation<\/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 – Summer vacation<\/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 \/\/ Questions about summer vacation\nvar questions = [\n \"What do you usually do during summer vacation?\",\n \"Do you have a favorite summer vacation spot?\",\n \"Do you like going to the beach during summer?\",\n \"What's your favorite summer activity?\",\n \"Do you prefer staying home or traveling during summer vacation?\",\n \"Have you ever been to a summer camp?\",\n \"What's your favorite summer food or treat?\",\n \"Do you like swimming in pools or lakes during summer?\",\n \"What's the best summer vacation you've ever had?\",\n \"Do you enjoy having picnics during summer?\",\n \"Do you have any summer traditions?\",\n \"What's your favorite summer holiday?\",\n \"Do you like going on road trips during summer?\",\n \"Have you ever been to an amusement park during summer?\",\n \"Do you enjoy outdoor sports or activities during summer?\",\n \"What's your favorite summer memory?\",\n \"Do you like having barbecues or cookouts during summer?\",\n \"Do you ever go camping during summer vacation?\",\n \"What's your favorite summer song or music?\",\n \"Do you like watching fireworks during summer?\",\n \"Do you visit family or friends during summer vacation?\",\n \"What's your favorite summer drink?\",\n \"Do you like reading books during summer?\",\n \"What's one thing you always pack for summer vacation?\",\n \"Do you enjoy gardening or spending time in the yard during summer?\"\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 summer vacation. 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 – Summer vacation Practice Speaking – Summer vacation Talk Send<\/p>\n","protected":false},"author":1,"featured_media":1374,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[28,27,30],"tags":[],"class_list":["post-1376","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-07-20.14.37-A-friendly-humanoid-robot-traveling-in-various-settings.-The-robot-has-a-sleek-modern-design-with-smooth-white-surfaces-and-gentle-curves.-Its-face-1024x585.webp","blog_images":{"medium":"https:\/\/phamho.com\/book\/wp-content\/uploads\/2024\/06\/DALL\u00b7E-2024-06-07-20.14.37-A-friendly-humanoid-robot-traveling-in-various-settings.-The-robot-has-a-sleek-modern-design-with-smooth-white-surfaces-and-gentle-curves.-Its-face-300x171.webp","large":"https:\/\/phamho.com\/book\/wp-content\/uploads\/2024\/06\/DALL\u00b7E-2024-06-07-20.14.37-A-friendly-humanoid-robot-traveling-in-various-settings.-The-robot-has-a-sleek-modern-design-with-smooth-white-surfaces-and-gentle-curves.-Its-face-1024x585.webp"},"ams_acf":[],"_links":{"self":[{"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/posts\/1376","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=1376"}],"version-history":[{"count":2,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/posts\/1376\/revisions"}],"predecessor-version":[{"id":1412,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/posts\/1376\/revisions\/1412"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/media\/1374"}],"wp:attachment":[{"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/media?parent=1376"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/categories?post=1376"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/tags?post=1376"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":1376,"date":"2024-06-07T13:19:27","date_gmt":"2024-06-07T13:19:27","guid":{"rendered":"https:\/\/phamho.com\/book\/?p=1376"},"modified":"2024-06-09T06:42:24","modified_gmt":"2024-06-09T06:42:24","slug":"practice-speaking-summer-vacation","status":"publish","type":"post","link":"https:\/\/phamho.com\/book\/practice-speaking-summer-vacation\/","title":{"rendered":"Practice Speaking – Summer Vacation"},"content":{"rendered":"\n\n\n\n \n \n Practice Speaking – Summer vacation<\/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 – Summer vacation<\/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 \/\/ Questions about summer vacation\nvar questions = [\n \"What do you usually do during summer vacation?\",\n \"Do you have a favorite summer vacation spot?\",\n \"Do you like going to the beach during summer?\",\n \"What's your favorite summer activity?\",\n \"Do you prefer staying home or traveling during summer vacation?\",\n \"Have you ever been to a summer camp?\",\n \"What's your favorite summer food or treat?\",\n \"Do you like swimming in pools or lakes during summer?\",\n \"What's the best summer vacation you've ever had?\",\n \"Do you enjoy having picnics during summer?\",\n \"Do you have any summer traditions?\",\n \"What's your favorite summer holiday?\",\n \"Do you like going on road trips during summer?\",\n \"Have you ever been to an amusement park during summer?\",\n \"Do you enjoy outdoor sports or activities during summer?\",\n \"What's your favorite summer memory?\",\n \"Do you like having barbecues or cookouts during summer?\",\n \"Do you ever go camping during summer vacation?\",\n \"What's your favorite summer song or music?\",\n \"Do you like watching fireworks during summer?\",\n \"Do you visit family or friends during summer vacation?\",\n \"What's your favorite summer drink?\",\n \"Do you like reading books during summer?\",\n \"What's one thing you always pack for summer vacation?\",\n \"Do you enjoy gardening or spending time in the yard during summer?\"\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 summer vacation. 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 – Summer vacation Practice Speaking – Summer vacation Talk Send<\/p>\n","protected":false},"author":1,"featured_media":1374,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[28,27,30],"tags":[],"class_list":["post-1376","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-07-20.14.37-A-friendly-humanoid-robot-traveling-in-various-settings.-The-robot-has-a-sleek-modern-design-with-smooth-white-surfaces-and-gentle-curves.-Its-face-1024x585.webp","blog_images":{"medium":"https:\/\/phamho.com\/book\/wp-content\/uploads\/2024\/06\/DALL\u00b7E-2024-06-07-20.14.37-A-friendly-humanoid-robot-traveling-in-various-settings.-The-robot-has-a-sleek-modern-design-with-smooth-white-surfaces-and-gentle-curves.-Its-face-300x171.webp","large":"https:\/\/phamho.com\/book\/wp-content\/uploads\/2024\/06\/DALL\u00b7E-2024-06-07-20.14.37-A-friendly-humanoid-robot-traveling-in-various-settings.-The-robot-has-a-sleek-modern-design-with-smooth-white-surfaces-and-gentle-curves.-Its-face-1024x585.webp"},"ams_acf":[],"_links":{"self":[{"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/posts\/1376","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=1376"}],"version-history":[{"count":2,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/posts\/1376\/revisions"}],"predecessor-version":[{"id":1412,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/posts\/1376\/revisions\/1412"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/media\/1374"}],"wp:attachment":[{"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/media?parent=1376"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/categories?post=1376"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/tags?post=1376"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}