{"id":1358,"date":"2024-06-07T07:17:43","date_gmt":"2024-06-07T07:17:43","guid":{"rendered":"https:\/\/phamho.com\/book\/?p=1358"},"modified":"2024-06-09T05:56:39","modified_gmt":"2024-06-09T05:56:39","slug":"practice-speaking-daily-routines","status":"publish","type":"post","link":"https:\/\/phamho.com\/book\/practice-speaking-daily-routines\/","title":{"rendered":"Practice Speaking &#8211; Daily Routines"},"content":{"rendered":"\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Practice Speaking &#8211; Daily Routines<\/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 &#8211; Daily Routines<\/div>\n        <div class=\"chat-messages\" id=\"chat-messages\">\n            <!-- Chat messages will be added here dynamically -->\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 daily routines\nvar questions = [\n    \"What time do you usually wake up?\",\n    \"Do you have a morning routine?\",\n    \"What do you like to have for breakfast?\",\n    \"Do you exercise regularly?\",\n    \"What's the first thing you do after waking up?\",\n    \"Do you make your bed every day?\",\n    \"How do you get to school or work?\",\n    \"What time do you usually have lunch?\",\n    \"Do you take any breaks during the day?\",\n    \"What's your favorite part of your daily routine?\",\n    \"Do you have a favorite snack you eat every day?\",\n    \"Do you watch TV or read after school\/work?\",\n    \"Do you have any hobbies you do daily?\",\n    \"What time do you usually have dinner?\",\n    \"Do you cook your own meals?\",\n    \"Do you spend time with family or friends in the evening?\",\n    \"What time do you usually go to bed?\",\n    \"Do you have a nighttime routine?\",\n    \"Do you prepare for the next day the night before?\",\n    \"Do you check your phone or computer before bed?\",\n    \"Do you journal or write daily?\",\n    \"Do you meditate or practice mindfulness?\",\n    \"Do you listen to music or podcasts daily?\",\n    \"Do you plan your day in advance?\",\n    \"Do you drink coffee or tea every day?\"\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 your Daily Routines. 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 &#8211; Daily Routines Practice Speaking &#8211; Daily Routines Talk Send<\/p>\n","protected":false},"author":1,"featured_media":1359,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[28,27,30],"tags":[],"class_list":["post-1358","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-14.16.54-Two-friendly-humanoid-robots-discussing-with-each-other.-Both-robots-have-a-sleek-modern-design-with-smooth-white-surfaces-and-gentle-curves.-Their-1024x585.webp","blog_images":{"medium":"https:\/\/phamho.com\/book\/wp-content\/uploads\/2024\/06\/DALL\u00b7E-2024-06-07-14.16.54-Two-friendly-humanoid-robots-discussing-with-each-other.-Both-robots-have-a-sleek-modern-design-with-smooth-white-surfaces-and-gentle-curves.-Their-300x171.webp","large":"https:\/\/phamho.com\/book\/wp-content\/uploads\/2024\/06\/DALL\u00b7E-2024-06-07-14.16.54-Two-friendly-humanoid-robots-discussing-with-each-other.-Both-robots-have-a-sleek-modern-design-with-smooth-white-surfaces-and-gentle-curves.-Their-1024x585.webp"},"ams_acf":[],"_links":{"self":[{"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/posts\/1358","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=1358"}],"version-history":[{"count":2,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/posts\/1358\/revisions"}],"predecessor-version":[{"id":1406,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/posts\/1358\/revisions\/1406"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/media\/1359"}],"wp:attachment":[{"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/media?parent=1358"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/categories?post=1358"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/tags?post=1358"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}