Theme – Possessions<\/title>\n <style>\n \/* Reset and Base Styles *\/\n * {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n }\n\n body {\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n background-color: #f0f4f8;\n display: flex;\n flex-direction: column;\n min-height: 100vh;\n }\n\n \/* CSS Variables for Color Palette *\/\n :root {\n --orange-color: #FF8C42; \/* Warm Orange *\/\n --blue-color: #4A90E2; \/* Vibrant Blue *\/\n --green-color: #7ED321; \/* Fresh Green *\/\n --background-color: #f0f4f8; \/* Light Blue *\/\n --text-color: #333333; \/* Dark Gray *\/\n --button-hover-color: #FFA07A; \/* Light Salmon *\/\n --chat-bot-color: #4A90E2; \/* Blue *\/\n --chat-user-color: #7ED321; \/* Green *\/\n --loader-color: #FF8C42; \/* Orange *\/\n --border-color: #cccccc; \/* Light Gray *\/\n --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n }\n\n \/* Menu Styles *\/\n .menu {\n width: 100%;\n background-color: var(--orange-color);\n padding: 12px 0;\n text-align: center;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n margin-bottom: 15px;\n overflow-x: auto;\n white-space: nowrap;\n }\n .menu a {\n color: #ffffff;\n text-decoration: none;\n margin: 0 15px;\n font-size: 16px;\n display: inline-block;\n transition: color 0.3s, transform 0.3s;\n }\n .menu a:hover,\n .menu a:focus {\n color: #ffe5d9;\n transform: scale(1.05);\n outline: none;\n }\n\n \/* Container Styles *\/\n .container {\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 15px;\n box-sizing: border-box;\n flex: 1 0 auto;\n width: 100%;\n }\n\n \/* Image and Chat Containers *\/\n .image-chat-wrapper {\n display: flex;\n flex-direction: column;\n width: 100%;\n max-width: 900px;\n flex: 1;\n gap: 20px;\n }\n\n \/* Image Container Styles *\/\n .image-container {\n flex: 1;\n text-align: center;\n }\n .image-container img {\n width: 100%;\n height: auto;\n max-height: 350px;\n object-fit: cover;\n border-radius: 20px;\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);\n transition: transform 0.3s;\n }\n .image-container img:hover {\n transform: scale(1.02);\n }\n .sentence-text {\n margin: 15px 0;\n color: var(--text-color);\n font-size: 18px;\n }\n .word-box {\n margin-top: 10px;\n padding: 15px;\n background-color: #ffffff;\n border: 2px solid var(--border-color);\n border-radius: 10px;\n box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);\n font-size: 16px;\n color: var(--orange-color);\n text-align: left;\n max-height: 300px;\n overflow-y: auto;\n transition: background-color 0.3s, border-color 0.3s;\n }\n .word-box .question {\n color: var(--blue-color);\n margin-bottom: 8px;\n }\n .word-box .answer {\n color: var(--green-color);\n margin-bottom: 15px;\n }\n\n \/* Chat Container Styles *\/\n .chat-container {\n background-color: #ffffff;\n border-radius: 20px;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n overflow: hidden;\n display: flex;\n flex-direction: column;\n height: 600px;\n max-height: 600px;\n flex: 1;\n }\n .chat-header {\n background-color: var(--blue-color);\n color: #ffffff;\n padding: 16px;\n text-align: center;\n border-bottom: 2px solid var(--border-color);\n position: relative;\n font-size: 20px;\n }\n .chat-header h2 {\n margin: 0;\n }\n \/* Loader Indicator *\/\n .chat-header .loader {\n position: absolute;\n right: 25px;\n top: 50%;\n transform: translateY(-50%);\n display: none;\n }\n .chat-messages {\n padding: 20px;\n overflow-y: auto;\n flex: 1;\n background-color: #f9f9f9;\n }\n .message {\n margin-bottom: 15px;\n padding: 12px 18px;\n border-radius: 20px;\n font-size: 16px;\n line-height: 1.6;\n max-width: 80%;\n word-wrap: break-word;\n position: relative;\n }\n .user-message {\n background-color: var(--green-color);\n color: #ffffff;\n align-self: flex-end;\n border-bottom-right-radius: 0;\n }\n .bot-message {\n background-color: var(--blue-color);\n color: #ffffff;\n align-self: flex-start;\n border-bottom-left-radius: 0;\n }\n\n \/* Chat Input Styles *\/\n .chat-input {\n display: flex;\n align-items: center;\n background-color: #ffffff;\n padding: 15px;\n border-top: 2px solid var(--border-color);\n justify-content: space-between;\n flex-wrap: wrap;\n }\n .voice-selection {\n margin: 10px 0;\n width: 100%;\n max-width: 350px;\n }\n .voice-selection label {\n display: block;\n margin-bottom: 5px;\n color: var(--text-color);\n font-size: 16px;\n }\n .voice-selection select {\n width: 100%;\n padding: 10px;\n border-radius: 8px;\n border: 1px solid var(--border-color);\n font-size: 16px;\n transition: border-color 0.3s, box-shadow 0.3s;\n }\n .voice-selection select:focus {\n border-color: var(--orange-color);\n box-shadow: 0 0 5px rgba(255, 140, 66, 0.5);\n outline: none;\n }\n\n .send-button, .stop-button {\n background-color: var(--orange-color);\n color: #ffffff;\n border: none;\n border-radius: 8px;\n padding: 12px 20px;\n cursor: pointer;\n transition: background-color 0.3s, transform 0.2s;\n flex: 1;\n margin: 10px;\n max-width: 200px;\n font-size: 16px;\n }\n .stop-button {\n background-color: var(--blue-color);\n }\n .send-button:hover,\n .send-button:focus,\n .stop-button:hover,\n .stop-button:focus {\n background-color: var(--button-hover-color);\n transform: scale(1.02);\n outline: none;\n }\n\n \/* Loader Styles *\/\n .loader {\n border: 4px solid #f3f3f3;\n border-top: 4px solid var(--loader-color);\n border-radius: 50%;\n width: 24px;\n height: 24px;\n animation: spin 1.5s linear infinite;\n display: inline-block;\n margin-left: 10px;\n }\n\n @keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n }\n\n \/* Responsive Design Adjustments *\/\n\n \/* Portrait Mode *\/\n @media (orientation: portrait) {\n .image-chat-wrapper {\n flex-direction: column;\n }\n .image-container, .chat-container {\n width: 100%;\n max-width: 100%;\n }\n .chat-container {\n height: 600px;\n }\n }\n\n \/* Landscape Mode *\/\n @media (orientation: landscape) and (min-width: 700px) {\n .image-chat-wrapper {\n flex-direction: row;\n justify-content: space-between;\n }\n .image-container, .chat-container {\n width: 48%;\n max-width: 48%;\n }\n .word-box {\n max-height: 250px;\n }\n .chat-header h2 {\n font-size: 22px;\n }\n .message {\n font-size: 17px;\n }\n .send-button, .stop-button {\n font-size: 18px;\n padding: 14px 24px;\n max-width: 220px;\n }\n }\n\n \/* General Mobile Responsiveness *\/\n @media (max-width: 768px) {\n .chat-header h2 {\n font-size: 18px;\n }\n .message {\n font-size: 15px;\n }\n .send-button, .stop-button {\n font-size: 16px;\n padding: 12px 20px;\n max-width: 180px;\n }\n .word-box {\n font-size: 16px;\n }\n .voice-selection select {\n font-size: 16px;\n }\n }\n\n \/* High-Density Screens (e.g., Samsung Android Devices) *\/\n @media only screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {\n \/* Adjust font sizes and button sizes for high-density screens *\/\n .chat-header h2 {\n font-size: 20px;\n }\n .send-button, .stop-button {\n padding: 14px 22px;\n font-size: 18px;\n }\n .message {\n font-size: 16px;\n }\n .word-box {\n font-size: 17px;\n }\n .chat-input input {\n font-size: 16px;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"menu\">\n <a href=\"https:\/\/phamho.com\/book\/2024\/12\/12\/basic-general-english-people\/\">People<\/a>\n <a href=\"https:\/\/phamho.com\/book\/2024\/12\/12\/basic-general-english-possessions\/\">Possessions<\/a>\n <a href=\"https:\/\/phamho.com\/book\/2024\/12\/12\/basic-general-english-places\/\"> Places<\/a>\n <a href=\"https:\/\/phamho.com\/book\/2024\/12\/12\/basic-general-english-free-time\/\">Free Time<\/a>\n <a href=\"https:\/\/phamho.com\/book\/2024\/12\/12\/basic-general-english-food\/\">Food<\/a>\n <a href=\"https:\/\/phamho.com\/book\/2024\/12\/12\/basic-general-english-past-lives\/\">Past Lives<\/a>\n <\/div>\n\n <div class=\"container\">\n <div class=\"image-chat-wrapper\">\n <div class=\"image-container\">\n <img decoding=\"async\" src=\"https:\/\/phamho.com\/book\/wp-content\/uploads\/2024\/09\/DALL\u00b7E-2024-09-15-18.17.33-A-classroom-scene-where-advanced-robots-are-teaching-English-to-B1-level-students.-The-robots-have-a-humanoid-design-with-sleek-metallic-bodies-and-f.webp\" alt=\"Illustration representing possessions\"> \n <div class=\"sentence-text\">Listen to the questions and respond accordingly.<\/div>\n <div id=\"word-box\" class=\"word-box\">\n \n <\/div>\n <\/div>\n <div class=\"chat-container\">\n <div class=\"chat-header\">\n <h2>Theme 7 – Possessions<\/h2> \n <div class=\"loader\" id=\"synthesis-loader\"><\/div>\n <\/div>\n <div class=\"chat-messages\" id=\"chat-messages\" role=\"log\" aria-live=\"polite\">\n \n <\/div>\n <div class=\"chat-input\">\n \n <div class=\"voice-selection\">\n <label for=\"voice-select\">Choose Voice:<\/label>\n <select id=\"voice-select\" aria-label=\"Select Voice\">\n <option value=\"\">Loading voices…<\/option>\n <\/select>\n <\/div>\n \n <button id=\"start-btn\" class=\"send-button\" aria-label=\"Start Lesson\">Start<\/button>\n <button id=\"stop-btn\" class=\"stop-button\" aria-label=\"Stop Lesson\">Stop<\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n \/\/ Define the questions with expected keywords and model answers for \"Possessions\" topic\n const questions = [\n { \n english: \"Do you have a mobile phone? What color is it?\", \n keywords: [\"mobile phone\", \"color\", \"have\", \"phone\"],\n answer: \"Yes, I have a black mobile phone. It's easy to carry and matches my style.\"\n },\n { \n english: \"What is your favorite thing that you own?\", \n keywords: [\"favorite thing\", \"own\", \"favorite possession\", \"beloved\"],\n answer: \"My favorite thing is my bicycle. I love riding it during weekends.\"\n },\n { \n english: \"Do you have a computer or a laptop?\", \n keywords: [\"computer\", \"laptop\", \"have\", \"device\"],\n answer: \"Yes, I have a laptop. It helps me work and watch movies.\"\n },\n { \n english: \"What do you keep in your bag?\", \n keywords: [\"keep\", \"bag\", \"items\", \"carry\"],\n answer: \"In my bag, I carry my wallet, keys, phone, and a notebook.\"\n },\n { \n english: \"How many books do you have at home?\", \n keywords: [\"books\", \"have\", \"at home\", \"collection\"],\n answer: \"I have about 50 books at home. I enjoy reading different genres.\"\n },\n { \n english: \"Do you have a bicycle or a motorbike?\", \n keywords: [\"bicycle\", \"motorbike\", \"have\", \"vehicle\"],\n answer: \"I have a bicycle. It's eco-friendly and keeps me fit.\"\n },\n { \n english: \"What is your favorite toy or game?\", \n keywords: [\"favorite toy\", \"game\", \"enjoy\", \"play\"],\n answer: \"My favorite game is chess. It challenges my mind.\"\n },\n { \n english: \"Do you have a pet? What is its name?\", \n keywords: [\"pet\", \"have\", \"name\", \"animal\"],\n answer: \"Yes, I have a cat named Luna. She is very playful.\"\n },\n { \n english: \"What is your favorite piece of clothing?\", \n keywords: [\"favorite clothing\", \"own\", \"favorite outfit\", \"apparel\"],\n answer: \"My favorite clothing is my blue jeans. They are comfortable and stylish.\"\n },\n { \n english: \"Do you have a watch? Who gave it to you?\", \n keywords: [\"watch\", \"have\", \"gave\", \"gift\"],\n answer: \"Yes, I have a watch. My friend gave it to me last year.\"\n }\n ];\n\n \/\/ Define positive, constructive, and pronunciation feedback arrays\n const positiveFeedback = [\n \"Great job!\",\n \"Well done!\",\n \"Excellent response!\",\n \"Very well.\",\n \"Your answer was clear.\",\n \"Fantastic!\",\n \"You're doing great!\",\n \"That's a good answer.\"\n ];\n\n const constructiveFeedback = [\n \"Try to include more details.\",\n \"Could you provide more specific information?\",\n \"Consider adding reasons or examples.\",\n \"Adding relevant keywords can help.\",\n \"Think about elaborating your response.\",\n \"Including examples would be helpful.\",\n \"Try to relate your answer to the topic.\",\n \"Expanding your answer will make it better.\",\n \"Providing more context can enhance your response.\",\n \"Think about why or how to add depth.\"\n ];\n\n \/\/ Define pronunciation feedback messages\n const pronunciationFeedback = [\n \"Your pronunciation is clear, but try to emphasize key words.\",\n \"Good job! To improve, pay attention to 'mobile' and 'bicycle'.\",\n \"Well spoken! Consider slowing down for better clarity.\",\n \"Excellent! Try to articulate 'possessions' more distinctly.\",\n \"Great effort! Focus on the 'th' sound in 'with' and 'mother'.\"\n ];\n\n \/\/ Define stop keywords\n const stopKeywords = [\"goodbye\", \"good bye\", \"bye\", \"bye-bye\", \"byebye\"];\n\n let currentQuestionIndex = 0;\n let recognition;\n let isLessonActive = false;\n\n const speechSynthesisSupported = 'speechSynthesis' in window;\n const speechRecognitionSupported = window.SpeechRecognition || window.webkitSpeechRecognition;\n\n let voices = [];\n let selectedVoice = null; \/\/ To store the user's selected voice\n\n \/\/ Desired Voices: 4 Natural Native Voices\n const desiredVoiceNames = [\n 'Google US English', \/\/ en-US Male\n 'Google US English Female', \/\/ en-US Female\n 'Google UK English Male', \/\/ en-GB Male\n 'Google UK English Female' \/\/ en-GB Female\n ];\n\n \/\/ Initialize the application\n function initialize() {\n loadVoices();\n\n if (speechSynthesisSupported) {\n \/\/ Delay greeting to ensure voices are loaded\n setTimeout(() => greetUser(), 500); \n } else {\n appendMessage(\"Sorry, your browser does not support speech synthesis.\", \"bot\");\n }\n\n if (!speechRecognitionSupported) {\n appendMessage(\"Sorry, your browser does not support speech recognition.\", \"bot\");\n }\n\n \/\/ Handle Start Button Click\n document.getElementById('start-btn').onclick = function() {\n if (isLessonActive) return; \/\/ Prevent multiple starts\n\n if (!speechSynthesisSupported) {\n appendMessage(\"Speech synthesis is not supported in your browser.\", \"bot\");\n return;\n }\n if (!speechRecognitionSupported) {\n appendMessage(\"Speech recognition is not supported in your browser.\", \"bot\");\n return;\n }\n\n isLessonActive = true;\n currentQuestionIndex = 0;\n clearWordBox();\n startLesson();\n };\n\n \/\/ Handle Stop Button Click\n document.getElementById('stop-btn').onclick = function() {\n if (recognition) {\n recognition.stop();\n }\n endLesson(true);\n };\n }\n\n \/\/ Load voices and populate the voice selection dropdown\n function loadVoices() {\n voices = window.speechSynthesis.getVoices();\n if (voices.length === 0) {\n \/\/ Some browsers load voices asynchronously\n window.speechSynthesis.onvoiceschanged = () => {\n voices = window.speechSynthesis.getVoices();\n populateVoiceList();\n };\n } else {\n populateVoiceList();\n }\n }\n\n \/\/ Populate the voice selection dropdown with desired voices\n function populateVoiceList() {\n const voiceSelect = document.getElementById('voice-select');\n voiceSelect.innerHTML = ''; \/\/ Clear existing options\n\n \/\/ Filter voices to include only the desired ones\n const filteredVoices = voices.filter(voice => desiredVoiceNames.includes(voice.name));\n\n if (filteredVoices.length === 0) {\n \/\/ If no desired voices are found, inform the user\n const option = document.createElement('option');\n option.value = \"\";\n option.textContent = \"No desired voices available\";\n voiceSelect.appendChild(option);\n voiceSelect.disabled = true;\n return;\n }\n\n \/\/ Populate the dropdown with the filtered voices\n filteredVoices.forEach((voice, index) => {\n const option = document.createElement('option');\n option.value = index;\n option.textContent = `${voice.name} (${voice.lang})`;\n voiceSelect.appendChild(option);\n });\n\n \/\/ Set a default selected voice if available\n if (filteredVoices.length > 0) {\n voiceSelect.selectedIndex = 0;\n selectedVoice = filteredVoices[0];\n }\n\n \/\/ Listen for voice selection changes\n voiceSelect.onchange = () => {\n const selectedIndex = voiceSelect.value;\n selectedVoice = filteredVoices[selectedIndex];\n console.log(`Selected voice: ${selectedVoice.name}`);\n };\n }\n\n \/\/ Greet the user at the beginning of the lesson\n function greetUser() {\n const greeting = \"Hello! Welcome to the Practice Speaking about Possessions. In this lesson, you will listen to each question carefully and provide your own answers. After each response, the correct answer will be displayed in the box. Additionally, I'll provide some tips to help improve your pronunciation. Are you ready? Click Start to begin the lesson!\";\n appendMessage(greeting, 'bot');\n showSynthesisLoader(true);\n sayText(greeting, \"en-US\").then(() => {\n showSynthesisLoader(false);\n });\n }\n\n \/\/ Start the lesson by asking the first question\n function startLesson() {\n if (currentQuestionIndex < questions.length) {\n const question = questions[currentQuestionIndex];\n const questionNumber = currentQuestionIndex + 1;\n const questionText = `Question ${questionNumber}: ${question.english}`;\n\n appendMessage(questionText, 'bot');\n addSentenceToBox(`Q${questionNumber}: ${question.english}`);\n addSentenceToBox(`A${questionNumber}: ${question.answer}`); \/\/ Add model answer immediately\n showSynthesisLoader(true);\n sayText(questionText, \"en-US\").then(() => {\n showSynthesisLoader(false);\n listenUserResponse(question);\n });\n } else {\n endLesson(false);\n }\n }\n\n \/\/ Listen for the user's verbal response\n function listenUserResponse(question) {\n recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();\n recognition.lang = 'en-US';\n recognition.interimResults = false;\n recognition.maxAlternatives = 1;\n\n \/\/ Show listening indicator\n showRecognitionLoader(true);\n appendMessage(\"Listening...\", \"bot\");\n\n recognition.start();\n\n recognition.onresult = function(event) {\n const userInput = event.results[0][0].transcript.trim();\n const formattedInput = normalizeAndFormatUserInput(userInput);\n appendMessage(formattedInput, 'user');\n\n \/\/ Hide listening indicator\n showRecognitionLoader(false);\n\n \/\/ Check for stop keywords\n if (checkStopKeywords(formattedInput.toLowerCase())) {\n endLesson(true);\n return;\n }\n\n \/\/ Analyze user input for feedback\n const feedbackType = analyzeResponse(formattedInput, question.keywords);\n let feedbackMessage = \"\";\n\n if (feedbackType === \"positive\") {\n feedbackMessage = positiveFeedback[Math.floor(Math.random() * positiveFeedback.length)];\n } else if (feedbackType === \"pronunciation\") {\n feedbackMessage = pronunciationFeedback[Math.floor(Math.random() * pronunciationFeedback.length)];\n } else {\n feedbackMessage = constructiveFeedback[Math.floor(Math.random() * constructiveFeedback.length)];\n }\n\n appendMessage(feedbackMessage, 'bot');\n showSynthesisLoader(true);\n sayText(feedbackMessage, \"en-US\").then(() => {\n showSynthesisLoader(false);\n \/\/ Proceed to next question after a delay\n currentQuestionIndex++;\n setTimeout(() => {\n startLesson();\n }, 3000); \/\/ 3-second delay\n });\n };\n\n recognition.onspeechend = function() {\n recognition.stop();\n };\n\n recognition.onerror = function(event) {\n \/\/ Hide listening indicator\n showRecognitionLoader(false);\n appendMessage('Error: ' + event.error, 'bot');\n const retryMessage = \"Let's try that question again.\";\n appendMessage(retryMessage, 'bot');\n showSynthesisLoader(true);\n sayText(retryMessage, \"en-US\").then(() => {\n showSynthesisLoader(false);\n \/\/ Retry the same question after a delay\n setTimeout(() => {\n listenUserResponse(question);\n }, 3000); \/\/ 3-second delay\n });\n };\n }\n\n \/\/ Ask the same question again in case of an error\n function askSameQuestion(question) {\n const questionNumber = currentQuestionIndex + 1;\n const questionText = `Let's try again: ${question.english}`;\n\n appendMessage(questionText, 'bot');\n addSentenceToBox(`Q${questionNumber}: ${question.english}`);\n addSentenceToBox(`A${questionNumber}: ${question.answer}`); \/\/ Add model answer immediately\n showSynthesisLoader(true);\n sayText(questionText, \"en-US\").then(() => {\n showSynthesisLoader(false);\n listenUserResponse(question);\n });\n }\n\n \/\/ Analyze the user's response and determine feedback type\n function analyzeResponse(userInput, keywords) {\n const lowerCaseInput = userInput.toLowerCase();\n\n for (let keyword of keywords) {\n if (lowerCaseInput.includes(keyword.toLowerCase())) {\n \/\/ Simulate pronunciation feedback for specific keywords\n if (keyword.toLowerCase().includes(\"phone\") || keyword.toLowerCase().includes(\"computer\")) {\n return \"pronunciation\";\n }\n return \"positive\";\n }\n }\n\n return \"constructive\";\n }\n\n \/\/ Check if the user's input contains any stop keywords\n function checkStopKeywords(userInput) {\n const pattern = new RegExp('\\\\b(' + stopKeywords.join('|') + ')\\\\b', 'i');\n return pattern.test(userInput);\n }\n\n \/\/ Normalize and format the user's input\n function normalizeAndFormatUserInput(text) {\n let normalized = text.replace(\/\\bi\\b\/g, \"I\");\n return formatSentence(normalized);\n }\n\n \/\/ Format the sentence by capitalizing and adding punctuation\n function formatSentence(text) {\n text = text.charAt(0).toUpperCase() + text.slice(1);\n\n const questionWords = ['who', 'what', 'where', 'when', 'why', 'how', 'is', 'are', 'do', 'does', 'can', 'should', 'will', 'would'];\n const firstWord = text.split(\" \")[0].toLowerCase();\n\n if (questionWords.includes(firstWord) && !text.endsWith('?')) {\n text += '?';\n } else if (!text.endsWith('.') && !text.endsWith('?')) {\n text += '.';\n }\n\n return text;\n }\n\n \/\/ Add a sentence to the word box with differentiation for questions and answers\n function addSentenceToBox(sentence) {\n const wordBox = document.getElementById('word-box');\n const sentenceElement = document.createElement('div');\n\n if (sentence.startsWith('Q')) {\n sentenceElement.classList.add('question');\n } else if (sentence.startsWith('A')) {\n sentenceElement.classList.add('answer');\n }\n\n sentenceElement.innerText = sentence;\n wordBox.appendChild(sentenceElement);\n wordBox.scrollTop = wordBox.scrollHeight;\n }\n\n \/\/ Clear the word box\n function clearWordBox() {\n const wordBox = document.getElementById('word-box');\n wordBox.innerHTML = \"\";\n }\n\n \/\/ End the lesson\n function endLesson(userStopped = false) {\n \/\/ Cancel any ongoing speech synthesis\n if (speechSynthesisSupported) {\n window.speechSynthesis.cancel();\n }\n\n if (recognition) {\n recognition.stop();\n }\n\n isLessonActive = false;\n\n let message;\n if (userStopped) {\n message = \"Thank you for practicing! Goodbye!\";\n } else {\n message = \"Well done! You've completed all the questions. Keep practicing!\";\n }\n appendMessage(message, \"bot\");\n showSynthesisLoader(true);\n sayText(message, \"en-US\").then(() => {\n showSynthesisLoader(false);\n });\n }\n\n \/\/ Speak the given text using speech synthesis and return a Promise that resolves when speaking is done\n function sayText(text, lang) {\n return new Promise((resolve, reject) => {\n if (!speechSynthesisSupported) {\n resolve();\n return;\n }\n const utterance = new SpeechSynthesisUtterance(text);\n utterance.lang = lang;\n utterance.rate = 1.0;\n utterance.pitch = 1.0;\n\n \/\/ Use the selected voice if available\n if (selectedVoice) {\n utterance.voice = selectedVoice;\n }\n\n utterance.onend = function() {\n resolve();\n };\n\n utterance.onerror = function(event) {\n console.error('Speech synthesis error:', event.error);\n resolve(); \/\/ Resolve to continue the flow even if there's an error\n };\n\n window.speechSynthesis.speak(utterance);\n });\n }\n\n \/\/ Append a message to the chat\n function appendMessage(text, sender) {\n const messageContainer = document.getElementById('chat-messages');\n const messageElement = document.createElement('div');\n messageElement.classList.add('message');\n messageElement.classList.add(sender === 'bot' ? 'bot-message' : 'user-message');\n messageElement.innerText = text;\n messageContainer.appendChild(messageElement);\n messageContainer.scrollTop = messageContainer.scrollHeight;\n }\n\n \/\/ Show or hide the speech synthesis loader\n function showSynthesisLoader(show) {\n const loader = document.getElementById('synthesis-loader');\n loader.style.display = show ? 'inline-block' : 'none';\n if (show) {\n loader.style.borderTop = '4px solid var(--loader-color)'; \/\/ Default speaking color\n }\n }\n\n \/\/ Show or hide the speech recognition loader\n function showRecognitionLoader(show) {\n const loader = document.getElementById('synthesis-loader');\n if (show) {\n loader.style.display = 'inline-block';\n loader.style.borderTop = '4px solid var(--blue-color)'; \/\/ Change color to indicate listening\n } else {\n loader.style.display = 'none';\n }\n }\n\n \/\/ Initialize the application once the DOM is fully loaded\n window.onload = initialize;\n <\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>Theme – Possessions People Possessions Places Free Time Food Past Lives Listen to the questions and respond accordingly. Theme 7 – Possessions Choose Voice: Loading voices… Start Stop<\/p>\n","protected":false},"author":1,"featured_media":1409,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[48,34,27],"tags":[],"class_list":["post-1812","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-basic-general-english","category-robots","category-speaking"],"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\/1812","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=1812"}],"version-history":[{"count":3,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/posts\/1812\/revisions"}],"predecessor-version":[{"id":1828,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/posts\/1812\/revisions\/1828"}],"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=1812"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/categories?post=1812"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/tags?post=1812"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":1812,"date":"2024-12-12T04:33:05","date_gmt":"2024-12-12T04:33:05","guid":{"rendered":"https:\/\/phamho.com\/book\/?p=1812"},"modified":"2024-12-16T23:47:27","modified_gmt":"2024-12-16T23:47:27","slug":"basic-general-english-possessions","status":"publish","type":"post","link":"https:\/\/phamho.com\/book\/basic-general-english-possessions\/","title":{"rendered":"Basic General English – Possessions"},"content":{"rendered":"\n\n\n\n \n \n Theme – Possessions<\/title>\n <style>\n \/* Reset and Base Styles *\/\n * {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n }\n\n body {\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n background-color: #f0f4f8;\n display: flex;\n flex-direction: column;\n min-height: 100vh;\n }\n\n \/* CSS Variables for Color Palette *\/\n :root {\n --orange-color: #FF8C42; \/* Warm Orange *\/\n --blue-color: #4A90E2; \/* Vibrant Blue *\/\n --green-color: #7ED321; \/* Fresh Green *\/\n --background-color: #f0f4f8; \/* Light Blue *\/\n --text-color: #333333; \/* Dark Gray *\/\n --button-hover-color: #FFA07A; \/* Light Salmon *\/\n --chat-bot-color: #4A90E2; \/* Blue *\/\n --chat-user-color: #7ED321; \/* Green *\/\n --loader-color: #FF8C42; \/* Orange *\/\n --border-color: #cccccc; \/* Light Gray *\/\n --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n }\n\n \/* Menu Styles *\/\n .menu {\n width: 100%;\n background-color: var(--orange-color);\n padding: 12px 0;\n text-align: center;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n margin-bottom: 15px;\n overflow-x: auto;\n white-space: nowrap;\n }\n .menu a {\n color: #ffffff;\n text-decoration: none;\n margin: 0 15px;\n font-size: 16px;\n display: inline-block;\n transition: color 0.3s, transform 0.3s;\n }\n .menu a:hover,\n .menu a:focus {\n color: #ffe5d9;\n transform: scale(1.05);\n outline: none;\n }\n\n \/* Container Styles *\/\n .container {\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 15px;\n box-sizing: border-box;\n flex: 1 0 auto;\n width: 100%;\n }\n\n \/* Image and Chat Containers *\/\n .image-chat-wrapper {\n display: flex;\n flex-direction: column;\n width: 100%;\n max-width: 900px;\n flex: 1;\n gap: 20px;\n }\n\n \/* Image Container Styles *\/\n .image-container {\n flex: 1;\n text-align: center;\n }\n .image-container img {\n width: 100%;\n height: auto;\n max-height: 350px;\n object-fit: cover;\n border-radius: 20px;\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);\n transition: transform 0.3s;\n }\n .image-container img:hover {\n transform: scale(1.02);\n }\n .sentence-text {\n margin: 15px 0;\n color: var(--text-color);\n font-size: 18px;\n }\n .word-box {\n margin-top: 10px;\n padding: 15px;\n background-color: #ffffff;\n border: 2px solid var(--border-color);\n border-radius: 10px;\n box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);\n font-size: 16px;\n color: var(--orange-color);\n text-align: left;\n max-height: 300px;\n overflow-y: auto;\n transition: background-color 0.3s, border-color 0.3s;\n }\n .word-box .question {\n color: var(--blue-color);\n margin-bottom: 8px;\n }\n .word-box .answer {\n color: var(--green-color);\n margin-bottom: 15px;\n }\n\n \/* Chat Container Styles *\/\n .chat-container {\n background-color: #ffffff;\n border-radius: 20px;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n overflow: hidden;\n display: flex;\n flex-direction: column;\n height: 600px;\n max-height: 600px;\n flex: 1;\n }\n .chat-header {\n background-color: var(--blue-color);\n color: #ffffff;\n padding: 16px;\n text-align: center;\n border-bottom: 2px solid var(--border-color);\n position: relative;\n font-size: 20px;\n }\n .chat-header h2 {\n margin: 0;\n }\n \/* Loader Indicator *\/\n .chat-header .loader {\n position: absolute;\n right: 25px;\n top: 50%;\n transform: translateY(-50%);\n display: none;\n }\n .chat-messages {\n padding: 20px;\n overflow-y: auto;\n flex: 1;\n background-color: #f9f9f9;\n }\n .message {\n margin-bottom: 15px;\n padding: 12px 18px;\n border-radius: 20px;\n font-size: 16px;\n line-height: 1.6;\n max-width: 80%;\n word-wrap: break-word;\n position: relative;\n }\n .user-message {\n background-color: var(--green-color);\n color: #ffffff;\n align-self: flex-end;\n border-bottom-right-radius: 0;\n }\n .bot-message {\n background-color: var(--blue-color);\n color: #ffffff;\n align-self: flex-start;\n border-bottom-left-radius: 0;\n }\n\n \/* Chat Input Styles *\/\n .chat-input {\n display: flex;\n align-items: center;\n background-color: #ffffff;\n padding: 15px;\n border-top: 2px solid var(--border-color);\n justify-content: space-between;\n flex-wrap: wrap;\n }\n .voice-selection {\n margin: 10px 0;\n width: 100%;\n max-width: 350px;\n }\n .voice-selection label {\n display: block;\n margin-bottom: 5px;\n color: var(--text-color);\n font-size: 16px;\n }\n .voice-selection select {\n width: 100%;\n padding: 10px;\n border-radius: 8px;\n border: 1px solid var(--border-color);\n font-size: 16px;\n transition: border-color 0.3s, box-shadow 0.3s;\n }\n .voice-selection select:focus {\n border-color: var(--orange-color);\n box-shadow: 0 0 5px rgba(255, 140, 66, 0.5);\n outline: none;\n }\n\n .send-button, .stop-button {\n background-color: var(--orange-color);\n color: #ffffff;\n border: none;\n border-radius: 8px;\n padding: 12px 20px;\n cursor: pointer;\n transition: background-color 0.3s, transform 0.2s;\n flex: 1;\n margin: 10px;\n max-width: 200px;\n font-size: 16px;\n }\n .stop-button {\n background-color: var(--blue-color);\n }\n .send-button:hover,\n .send-button:focus,\n .stop-button:hover,\n .stop-button:focus {\n background-color: var(--button-hover-color);\n transform: scale(1.02);\n outline: none;\n }\n\n \/* Loader Styles *\/\n .loader {\n border: 4px solid #f3f3f3;\n border-top: 4px solid var(--loader-color);\n border-radius: 50%;\n width: 24px;\n height: 24px;\n animation: spin 1.5s linear infinite;\n display: inline-block;\n margin-left: 10px;\n }\n\n @keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n }\n\n \/* Responsive Design Adjustments *\/\n\n \/* Portrait Mode *\/\n @media (orientation: portrait) {\n .image-chat-wrapper {\n flex-direction: column;\n }\n .image-container, .chat-container {\n width: 100%;\n max-width: 100%;\n }\n .chat-container {\n height: 600px;\n }\n }\n\n \/* Landscape Mode *\/\n @media (orientation: landscape) and (min-width: 700px) {\n .image-chat-wrapper {\n flex-direction: row;\n justify-content: space-between;\n }\n .image-container, .chat-container {\n width: 48%;\n max-width: 48%;\n }\n .word-box {\n max-height: 250px;\n }\n .chat-header h2 {\n font-size: 22px;\n }\n .message {\n font-size: 17px;\n }\n .send-button, .stop-button {\n font-size: 18px;\n padding: 14px 24px;\n max-width: 220px;\n }\n }\n\n \/* General Mobile Responsiveness *\/\n @media (max-width: 768px) {\n .chat-header h2 {\n font-size: 18px;\n }\n .message {\n font-size: 15px;\n }\n .send-button, .stop-button {\n font-size: 16px;\n padding: 12px 20px;\n max-width: 180px;\n }\n .word-box {\n font-size: 16px;\n }\n .voice-selection select {\n font-size: 16px;\n }\n }\n\n \/* High-Density Screens (e.g., Samsung Android Devices) *\/\n @media only screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {\n \/* Adjust font sizes and button sizes for high-density screens *\/\n .chat-header h2 {\n font-size: 20px;\n }\n .send-button, .stop-button {\n padding: 14px 22px;\n font-size: 18px;\n }\n .message {\n font-size: 16px;\n }\n .word-box {\n font-size: 17px;\n }\n .chat-input input {\n font-size: 16px;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"menu\">\n <a href=\"https:\/\/phamho.com\/book\/2024\/12\/12\/basic-general-english-people\/\">People<\/a>\n <a href=\"https:\/\/phamho.com\/book\/2024\/12\/12\/basic-general-english-possessions\/\">Possessions<\/a>\n <a href=\"https:\/\/phamho.com\/book\/2024\/12\/12\/basic-general-english-places\/\"> Places<\/a>\n <a href=\"https:\/\/phamho.com\/book\/2024\/12\/12\/basic-general-english-free-time\/\">Free Time<\/a>\n <a href=\"https:\/\/phamho.com\/book\/2024\/12\/12\/basic-general-english-food\/\">Food<\/a>\n <a href=\"https:\/\/phamho.com\/book\/2024\/12\/12\/basic-general-english-past-lives\/\">Past Lives<\/a>\n <\/div>\n\n <div class=\"container\">\n <div class=\"image-chat-wrapper\">\n <div class=\"image-container\">\n <img decoding=\"async\" src=\"https:\/\/phamho.com\/book\/wp-content\/uploads\/2024\/09\/DALL\u00b7E-2024-09-15-18.17.33-A-classroom-scene-where-advanced-robots-are-teaching-English-to-B1-level-students.-The-robots-have-a-humanoid-design-with-sleek-metallic-bodies-and-f.webp\" alt=\"Illustration representing possessions\"> \n <div class=\"sentence-text\">Listen to the questions and respond accordingly.<\/div>\n <div id=\"word-box\" class=\"word-box\">\n \n <\/div>\n <\/div>\n <div class=\"chat-container\">\n <div class=\"chat-header\">\n <h2>Theme 7 – Possessions<\/h2> \n <div class=\"loader\" id=\"synthesis-loader\"><\/div>\n <\/div>\n <div class=\"chat-messages\" id=\"chat-messages\" role=\"log\" aria-live=\"polite\">\n \n <\/div>\n <div class=\"chat-input\">\n \n <div class=\"voice-selection\">\n <label for=\"voice-select\">Choose Voice:<\/label>\n <select id=\"voice-select\" aria-label=\"Select Voice\">\n <option value=\"\">Loading voices…<\/option>\n <\/select>\n <\/div>\n \n <button id=\"start-btn\" class=\"send-button\" aria-label=\"Start Lesson\">Start<\/button>\n <button id=\"stop-btn\" class=\"stop-button\" aria-label=\"Stop Lesson\">Stop<\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n \/\/ Define the questions with expected keywords and model answers for \"Possessions\" topic\n const questions = [\n { \n english: \"Do you have a mobile phone? What color is it?\", \n keywords: [\"mobile phone\", \"color\", \"have\", \"phone\"],\n answer: \"Yes, I have a black mobile phone. It's easy to carry and matches my style.\"\n },\n { \n english: \"What is your favorite thing that you own?\", \n keywords: [\"favorite thing\", \"own\", \"favorite possession\", \"beloved\"],\n answer: \"My favorite thing is my bicycle. I love riding it during weekends.\"\n },\n { \n english: \"Do you have a computer or a laptop?\", \n keywords: [\"computer\", \"laptop\", \"have\", \"device\"],\n answer: \"Yes, I have a laptop. It helps me work and watch movies.\"\n },\n { \n english: \"What do you keep in your bag?\", \n keywords: [\"keep\", \"bag\", \"items\", \"carry\"],\n answer: \"In my bag, I carry my wallet, keys, phone, and a notebook.\"\n },\n { \n english: \"How many books do you have at home?\", \n keywords: [\"books\", \"have\", \"at home\", \"collection\"],\n answer: \"I have about 50 books at home. I enjoy reading different genres.\"\n },\n { \n english: \"Do you have a bicycle or a motorbike?\", \n keywords: [\"bicycle\", \"motorbike\", \"have\", \"vehicle\"],\n answer: \"I have a bicycle. It's eco-friendly and keeps me fit.\"\n },\n { \n english: \"What is your favorite toy or game?\", \n keywords: [\"favorite toy\", \"game\", \"enjoy\", \"play\"],\n answer: \"My favorite game is chess. It challenges my mind.\"\n },\n { \n english: \"Do you have a pet? What is its name?\", \n keywords: [\"pet\", \"have\", \"name\", \"animal\"],\n answer: \"Yes, I have a cat named Luna. She is very playful.\"\n },\n { \n english: \"What is your favorite piece of clothing?\", \n keywords: [\"favorite clothing\", \"own\", \"favorite outfit\", \"apparel\"],\n answer: \"My favorite clothing is my blue jeans. They are comfortable and stylish.\"\n },\n { \n english: \"Do you have a watch? Who gave it to you?\", \n keywords: [\"watch\", \"have\", \"gave\", \"gift\"],\n answer: \"Yes, I have a watch. My friend gave it to me last year.\"\n }\n ];\n\n \/\/ Define positive, constructive, and pronunciation feedback arrays\n const positiveFeedback = [\n \"Great job!\",\n \"Well done!\",\n \"Excellent response!\",\n \"Very well.\",\n \"Your answer was clear.\",\n \"Fantastic!\",\n \"You're doing great!\",\n \"That's a good answer.\"\n ];\n\n const constructiveFeedback = [\n \"Try to include more details.\",\n \"Could you provide more specific information?\",\n \"Consider adding reasons or examples.\",\n \"Adding relevant keywords can help.\",\n \"Think about elaborating your response.\",\n \"Including examples would be helpful.\",\n \"Try to relate your answer to the topic.\",\n \"Expanding your answer will make it better.\",\n \"Providing more context can enhance your response.\",\n \"Think about why or how to add depth.\"\n ];\n\n \/\/ Define pronunciation feedback messages\n const pronunciationFeedback = [\n \"Your pronunciation is clear, but try to emphasize key words.\",\n \"Good job! To improve, pay attention to 'mobile' and 'bicycle'.\",\n \"Well spoken! Consider slowing down for better clarity.\",\n \"Excellent! Try to articulate 'possessions' more distinctly.\",\n \"Great effort! Focus on the 'th' sound in 'with' and 'mother'.\"\n ];\n\n \/\/ Define stop keywords\n const stopKeywords = [\"goodbye\", \"good bye\", \"bye\", \"bye-bye\", \"byebye\"];\n\n let currentQuestionIndex = 0;\n let recognition;\n let isLessonActive = false;\n\n const speechSynthesisSupported = 'speechSynthesis' in window;\n const speechRecognitionSupported = window.SpeechRecognition || window.webkitSpeechRecognition;\n\n let voices = [];\n let selectedVoice = null; \/\/ To store the user's selected voice\n\n \/\/ Desired Voices: 4 Natural Native Voices\n const desiredVoiceNames = [\n 'Google US English', \/\/ en-US Male\n 'Google US English Female', \/\/ en-US Female\n 'Google UK English Male', \/\/ en-GB Male\n 'Google UK English Female' \/\/ en-GB Female\n ];\n\n \/\/ Initialize the application\n function initialize() {\n loadVoices();\n\n if (speechSynthesisSupported) {\n \/\/ Delay greeting to ensure voices are loaded\n setTimeout(() => greetUser(), 500); \n } else {\n appendMessage(\"Sorry, your browser does not support speech synthesis.\", \"bot\");\n }\n\n if (!speechRecognitionSupported) {\n appendMessage(\"Sorry, your browser does not support speech recognition.\", \"bot\");\n }\n\n \/\/ Handle Start Button Click\n document.getElementById('start-btn').onclick = function() {\n if (isLessonActive) return; \/\/ Prevent multiple starts\n\n if (!speechSynthesisSupported) {\n appendMessage(\"Speech synthesis is not supported in your browser.\", \"bot\");\n return;\n }\n if (!speechRecognitionSupported) {\n appendMessage(\"Speech recognition is not supported in your browser.\", \"bot\");\n return;\n }\n\n isLessonActive = true;\n currentQuestionIndex = 0;\n clearWordBox();\n startLesson();\n };\n\n \/\/ Handle Stop Button Click\n document.getElementById('stop-btn').onclick = function() {\n if (recognition) {\n recognition.stop();\n }\n endLesson(true);\n };\n }\n\n \/\/ Load voices and populate the voice selection dropdown\n function loadVoices() {\n voices = window.speechSynthesis.getVoices();\n if (voices.length === 0) {\n \/\/ Some browsers load voices asynchronously\n window.speechSynthesis.onvoiceschanged = () => {\n voices = window.speechSynthesis.getVoices();\n populateVoiceList();\n };\n } else {\n populateVoiceList();\n }\n }\n\n \/\/ Populate the voice selection dropdown with desired voices\n function populateVoiceList() {\n const voiceSelect = document.getElementById('voice-select');\n voiceSelect.innerHTML = ''; \/\/ Clear existing options\n\n \/\/ Filter voices to include only the desired ones\n const filteredVoices = voices.filter(voice => desiredVoiceNames.includes(voice.name));\n\n if (filteredVoices.length === 0) {\n \/\/ If no desired voices are found, inform the user\n const option = document.createElement('option');\n option.value = \"\";\n option.textContent = \"No desired voices available\";\n voiceSelect.appendChild(option);\n voiceSelect.disabled = true;\n return;\n }\n\n \/\/ Populate the dropdown with the filtered voices\n filteredVoices.forEach((voice, index) => {\n const option = document.createElement('option');\n option.value = index;\n option.textContent = `${voice.name} (${voice.lang})`;\n voiceSelect.appendChild(option);\n });\n\n \/\/ Set a default selected voice if available\n if (filteredVoices.length > 0) {\n voiceSelect.selectedIndex = 0;\n selectedVoice = filteredVoices[0];\n }\n\n \/\/ Listen for voice selection changes\n voiceSelect.onchange = () => {\n const selectedIndex = voiceSelect.value;\n selectedVoice = filteredVoices[selectedIndex];\n console.log(`Selected voice: ${selectedVoice.name}`);\n };\n }\n\n \/\/ Greet the user at the beginning of the lesson\n function greetUser() {\n const greeting = \"Hello! Welcome to the Practice Speaking about Possessions. In this lesson, you will listen to each question carefully and provide your own answers. After each response, the correct answer will be displayed in the box. Additionally, I'll provide some tips to help improve your pronunciation. Are you ready? Click Start to begin the lesson!\";\n appendMessage(greeting, 'bot');\n showSynthesisLoader(true);\n sayText(greeting, \"en-US\").then(() => {\n showSynthesisLoader(false);\n });\n }\n\n \/\/ Start the lesson by asking the first question\n function startLesson() {\n if (currentQuestionIndex < questions.length) {\n const question = questions[currentQuestionIndex];\n const questionNumber = currentQuestionIndex + 1;\n const questionText = `Question ${questionNumber}: ${question.english}`;\n\n appendMessage(questionText, 'bot');\n addSentenceToBox(`Q${questionNumber}: ${question.english}`);\n addSentenceToBox(`A${questionNumber}: ${question.answer}`); \/\/ Add model answer immediately\n showSynthesisLoader(true);\n sayText(questionText, \"en-US\").then(() => {\n showSynthesisLoader(false);\n listenUserResponse(question);\n });\n } else {\n endLesson(false);\n }\n }\n\n \/\/ Listen for the user's verbal response\n function listenUserResponse(question) {\n recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();\n recognition.lang = 'en-US';\n recognition.interimResults = false;\n recognition.maxAlternatives = 1;\n\n \/\/ Show listening indicator\n showRecognitionLoader(true);\n appendMessage(\"Listening...\", \"bot\");\n\n recognition.start();\n\n recognition.onresult = function(event) {\n const userInput = event.results[0][0].transcript.trim();\n const formattedInput = normalizeAndFormatUserInput(userInput);\n appendMessage(formattedInput, 'user');\n\n \/\/ Hide listening indicator\n showRecognitionLoader(false);\n\n \/\/ Check for stop keywords\n if (checkStopKeywords(formattedInput.toLowerCase())) {\n endLesson(true);\n return;\n }\n\n \/\/ Analyze user input for feedback\n const feedbackType = analyzeResponse(formattedInput, question.keywords);\n let feedbackMessage = \"\";\n\n if (feedbackType === \"positive\") {\n feedbackMessage = positiveFeedback[Math.floor(Math.random() * positiveFeedback.length)];\n } else if (feedbackType === \"pronunciation\") {\n feedbackMessage = pronunciationFeedback[Math.floor(Math.random() * pronunciationFeedback.length)];\n } else {\n feedbackMessage = constructiveFeedback[Math.floor(Math.random() * constructiveFeedback.length)];\n }\n\n appendMessage(feedbackMessage, 'bot');\n showSynthesisLoader(true);\n sayText(feedbackMessage, \"en-US\").then(() => {\n showSynthesisLoader(false);\n \/\/ Proceed to next question after a delay\n currentQuestionIndex++;\n setTimeout(() => {\n startLesson();\n }, 3000); \/\/ 3-second delay\n });\n };\n\n recognition.onspeechend = function() {\n recognition.stop();\n };\n\n recognition.onerror = function(event) {\n \/\/ Hide listening indicator\n showRecognitionLoader(false);\n appendMessage('Error: ' + event.error, 'bot');\n const retryMessage = \"Let's try that question again.\";\n appendMessage(retryMessage, 'bot');\n showSynthesisLoader(true);\n sayText(retryMessage, \"en-US\").then(() => {\n showSynthesisLoader(false);\n \/\/ Retry the same question after a delay\n setTimeout(() => {\n listenUserResponse(question);\n }, 3000); \/\/ 3-second delay\n });\n };\n }\n\n \/\/ Ask the same question again in case of an error\n function askSameQuestion(question) {\n const questionNumber = currentQuestionIndex + 1;\n const questionText = `Let's try again: ${question.english}`;\n\n appendMessage(questionText, 'bot');\n addSentenceToBox(`Q${questionNumber}: ${question.english}`);\n addSentenceToBox(`A${questionNumber}: ${question.answer}`); \/\/ Add model answer immediately\n showSynthesisLoader(true);\n sayText(questionText, \"en-US\").then(() => {\n showSynthesisLoader(false);\n listenUserResponse(question);\n });\n }\n\n \/\/ Analyze the user's response and determine feedback type\n function analyzeResponse(userInput, keywords) {\n const lowerCaseInput = userInput.toLowerCase();\n\n for (let keyword of keywords) {\n if (lowerCaseInput.includes(keyword.toLowerCase())) {\n \/\/ Simulate pronunciation feedback for specific keywords\n if (keyword.toLowerCase().includes(\"phone\") || keyword.toLowerCase().includes(\"computer\")) {\n return \"pronunciation\";\n }\n return \"positive\";\n }\n }\n\n return \"constructive\";\n }\n\n \/\/ Check if the user's input contains any stop keywords\n function checkStopKeywords(userInput) {\n const pattern = new RegExp('\\\\b(' + stopKeywords.join('|') + ')\\\\b', 'i');\n return pattern.test(userInput);\n }\n\n \/\/ Normalize and format the user's input\n function normalizeAndFormatUserInput(text) {\n let normalized = text.replace(\/\\bi\\b\/g, \"I\");\n return formatSentence(normalized);\n }\n\n \/\/ Format the sentence by capitalizing and adding punctuation\n function formatSentence(text) {\n text = text.charAt(0).toUpperCase() + text.slice(1);\n\n const questionWords = ['who', 'what', 'where', 'when', 'why', 'how', 'is', 'are', 'do', 'does', 'can', 'should', 'will', 'would'];\n const firstWord = text.split(\" \")[0].toLowerCase();\n\n if (questionWords.includes(firstWord) && !text.endsWith('?')) {\n text += '?';\n } else if (!text.endsWith('.') && !text.endsWith('?')) {\n text += '.';\n }\n\n return text;\n }\n\n \/\/ Add a sentence to the word box with differentiation for questions and answers\n function addSentenceToBox(sentence) {\n const wordBox = document.getElementById('word-box');\n const sentenceElement = document.createElement('div');\n\n if (sentence.startsWith('Q')) {\n sentenceElement.classList.add('question');\n } else if (sentence.startsWith('A')) {\n sentenceElement.classList.add('answer');\n }\n\n sentenceElement.innerText = sentence;\n wordBox.appendChild(sentenceElement);\n wordBox.scrollTop = wordBox.scrollHeight;\n }\n\n \/\/ Clear the word box\n function clearWordBox() {\n const wordBox = document.getElementById('word-box');\n wordBox.innerHTML = \"\";\n }\n\n \/\/ End the lesson\n function endLesson(userStopped = false) {\n \/\/ Cancel any ongoing speech synthesis\n if (speechSynthesisSupported) {\n window.speechSynthesis.cancel();\n }\n\n if (recognition) {\n recognition.stop();\n }\n\n isLessonActive = false;\n\n let message;\n if (userStopped) {\n message = \"Thank you for practicing! Goodbye!\";\n } else {\n message = \"Well done! You've completed all the questions. Keep practicing!\";\n }\n appendMessage(message, \"bot\");\n showSynthesisLoader(true);\n sayText(message, \"en-US\").then(() => {\n showSynthesisLoader(false);\n });\n }\n\n \/\/ Speak the given text using speech synthesis and return a Promise that resolves when speaking is done\n function sayText(text, lang) {\n return new Promise((resolve, reject) => {\n if (!speechSynthesisSupported) {\n resolve();\n return;\n }\n const utterance = new SpeechSynthesisUtterance(text);\n utterance.lang = lang;\n utterance.rate = 1.0;\n utterance.pitch = 1.0;\n\n \/\/ Use the selected voice if available\n if (selectedVoice) {\n utterance.voice = selectedVoice;\n }\n\n utterance.onend = function() {\n resolve();\n };\n\n utterance.onerror = function(event) {\n console.error('Speech synthesis error:', event.error);\n resolve(); \/\/ Resolve to continue the flow even if there's an error\n };\n\n window.speechSynthesis.speak(utterance);\n });\n }\n\n \/\/ Append a message to the chat\n function appendMessage(text, sender) {\n const messageContainer = document.getElementById('chat-messages');\n const messageElement = document.createElement('div');\n messageElement.classList.add('message');\n messageElement.classList.add(sender === 'bot' ? 'bot-message' : 'user-message');\n messageElement.innerText = text;\n messageContainer.appendChild(messageElement);\n messageContainer.scrollTop = messageContainer.scrollHeight;\n }\n\n \/\/ Show or hide the speech synthesis loader\n function showSynthesisLoader(show) {\n const loader = document.getElementById('synthesis-loader');\n loader.style.display = show ? 'inline-block' : 'none';\n if (show) {\n loader.style.borderTop = '4px solid var(--loader-color)'; \/\/ Default speaking color\n }\n }\n\n \/\/ Show or hide the speech recognition loader\n function showRecognitionLoader(show) {\n const loader = document.getElementById('synthesis-loader');\n if (show) {\n loader.style.display = 'inline-block';\n loader.style.borderTop = '4px solid var(--blue-color)'; \/\/ Change color to indicate listening\n } else {\n loader.style.display = 'none';\n }\n }\n\n \/\/ Initialize the application once the DOM is fully loaded\n window.onload = initialize;\n <\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>Theme – Possessions People Possessions Places Free Time Food Past Lives Listen to the questions and respond accordingly. Theme 7 – Possessions Choose Voice: Loading voices… Start Stop<\/p>\n","protected":false},"author":1,"featured_media":1409,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[48,34,27],"tags":[],"class_list":["post-1812","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-basic-general-english","category-robots","category-speaking"],"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\/1812","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=1812"}],"version-history":[{"count":3,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/posts\/1812\/revisions"}],"predecessor-version":[{"id":1828,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/posts\/1812\/revisions\/1828"}],"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=1812"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/categories?post=1812"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/tags?post=1812"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}