{"id":1361,"date":"2024-06-07T07:21:55","date_gmt":"2024-06-07T07:21:55","guid":{"rendered":"https:\/\/phamho.com\/book\/?p=1361"},"modified":"2024-06-09T05:58:13","modified_gmt":"2024-06-09T05:58:13","slug":"ielts-interviews","status":"publish","type":"post","link":"https:\/\/phamho.com\/book\/ielts-interviews\/","title":{"rendered":"IELTs Interviews"},"content":{"rendered":"\n<p>Ch\u00e0o c\u00e1c b\u1ea1n!<\/p>\n\n\n\n<p>C\u00e1c b\u1ea1n c\u00f3 mu\u1ed1n th\u1ef1c t\u1eadp thi n\u00f3i IELTs kh\u00f4ng?<\/p>\n\n\n\n<p>C\u00e1c b\u1ea1n th\u1eed tr\u1ea3 l\u1eddi c\u00e1c c\u00e2u h\u1ecfi c\u1ee7a Chatbot v\u1ec1 \u0111\u1ec1 thi n\u00f3i nh\u00e9!<\/p>\n\n\n\n<p>Ch\u00fa \u00fd: N\u1ebfu ch\u1edd l\u00e2u ko th\u1ea5y h\u1ecfi, c\u00e1c b\u1ea1n b\u1ea5m v\u00e0o Talk r\u1ed3i m\u1edbi n\u00f3i nh\u00e9.<\/p>\n\n\n\n<p>Enjoy it!<\/p>\n\n\n\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>IELTs Interview<\/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        padding: 10px;\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\">IELTS Interview<\/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\n          type=\"text\"\n          class=\"input-field\"\n          id=\"user-input\"\n          placeholder=\"Type your message...\"\n        \/>\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      \/\/ ... (Your previous JavaScript code here, including functions)\n\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 =\n          \"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        \/\/ Simulate chatbot logic (for demonstration)\n        var botResponse;\n        if (questions.length > 0) {\n          botResponse =\n            \"You said: \" + userResponse + \". Thanks for your response. Here's the next question: \" +\n            questions.shift();\n          addMessage(userResponse, true); \/\/ Show the user's response\n          addMessage(botResponse, false);\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          \/\/ Speak bot response\n          speak(botResponse);\n          \/\/ Start speech recognition for the next question\n          setTimeout(startSpeechRecognition, 2000); \/\/ Delay before starting speech recognition (for demonstration)\n        } else {\n          botResponse =\n            \"Thank you for participating in the interview. Have a great day!\";\n          addMessage(userResponse, true);\n          addMessage(botResponse, false);\n          \/\/ Speak bot response\n          speak(botResponse);\n        }\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\n            \/\/ Start recording\n            mediaRecorder.start();\n\n            \/\/ Event listener for when the recording is complete\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        \/\/ Send the audioData to your server-side proxy using fetch\n        fetch('\/recognize', {\n          method: 'POST',\n          headers: { 'Content-Type': 'audio\/wav' }, \/\/ Adjust based on your server's setup\n          body: audioData\n        })\n          .then(response => response.json())\n          .then(data => {\n            \/\/ ... (Handle the recognized text)\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        console.log(\"Speaking:\", text); \/\/ Debugging statement\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          \/\/ Process user's response\n          processResponse(userInput);\n          document.getElementById(\"user-input\").value = \"\"; \/\/ Clear input field after sending message\n        }\n      }\n\n      \/\/ Start the interview when the page loads\n      window.onload = function () {\n        \/\/ Greeting\n        var greeting =\n          \"Hello! Welcome to the IELTS interview. Let's get started.\";\n        addMessage(greeting, false);\n        speak(greeting);\n\n        \/\/ Set a timeout to start the first question automatically\n        let startTimeout = setTimeout(() => {\n          const firstQuestion = questions.shift(); \/\/ Get the first question\n          addMessage(firstQuestion, false); \/\/ Display the question in the chat\n          speak(firstQuestion); \/\/ Speak the question\n          startSpeechRecognition(); \/\/ Start listening for the user's response\n        }, 5000); \/\/ Delay of 5 seconds \n\n        \/\/ Allow the user to click \"Talk\" to start the interview manually\n        const talkButton = document.querySelector('.talk-button');\n        talkButton.addEventListener('click', () => {\n          clearTimeout(startTimeout); \/\/ Clear the auto-start timeout\n          const firstQuestion = questions.shift(); \/\/ Get the first question\n          addMessage(firstQuestion, false); \/\/ Display the question in the chat\n          speak(firstQuestion); \/\/ Speak the question\n          startSpeechRecognition(); \/\/ Start listening for the user's response\n        });\n      };\n\n      \/\/ Interview questions\n      var questions = [\n        \"Can you introduce yourself and tell me a little bit about your background?\",\n        \"What do you consider your greatest achievement so far?\",\n        \"What are your strengths and weaknesses?\",\n        \"How do you handle stress and pressure?\",\n        \"Tell me about a time when you faced a difficult situation and how you handled it?\",\n        \"Why do you want to study or work in an English-speaking country?\",\n        \"How do you plan to improve your English skills for the IELTS exam?\",\n        \"What strategies do you use for each section of the IELTS exam (Listening, Reading, Writing, Speaking)?\",\n        \"What do you think is the most challenging part of the IELTS exam for you?\",\n        \"How do you manage your time during the IELTS exam?\",\n        \"What are your long-term goals and how do you think achieving a good score on the IELTS exam will help you achieve them?\",\n        \"Do you have any questions about the IELTS exam or studying abroad?\",\n        \"What do you hope to accomplish after taking the IELTS exam?\",\n        \"How do you plan to celebrate once you've completed the IELTS exam?\",\n        \"Do you have any final thoughts or anything else you'd like to share?\"\n      ];\n    <\/script>\n  <\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Ch\u00e0o c\u00e1c b\u1ea1n! C\u00e1c b\u1ea1n c\u00f3 mu\u1ed1n th\u1ef1c t\u1eadp thi n\u00f3i IELTs kh\u00f4ng? C\u00e1c b\u1ea1n th\u1eed tr\u1ea3 l\u1eddi c\u00e1c c\u00e2u h\u1ecfi c\u1ee7a Chatbot v\u1ec1 \u0111\u1ec1 thi n\u00f3i nh\u00e9! Ch\u00fa \u00fd: N\u1ebfu ch\u1edd l\u00e2u ko th\u1ea5y h\u1ecfi, c\u00e1c b\u1ea1n b\u1ea5m v\u00e0o Talk r\u1ed3i m\u1edbi n\u00f3i nh\u00e9. Enjoy it! IELTs Interview IELTS Interview Talk Send<\/p>\n","protected":false},"author":1,"featured_media":1362,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[28,27,30],"tags":[],"class_list":["post-1361","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.52-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.52-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.52-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\/1361","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=1361"}],"version-history":[{"count":4,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/posts\/1361\/revisions"}],"predecessor-version":[{"id":1407,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/posts\/1361\/revisions\/1407"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/media\/1362"}],"wp:attachment":[{"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/media?parent=1361"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/categories?post=1361"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/tags?post=1361"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}