Spanish Sentences – Family<\/title>\n <style>\n body {\n font-family: Arial, sans-serif;\n background-color: #ffffff;\n margin: 0;\n padding: 0;\n display: flex;\n flex-direction: column; \/* Stack elements vertically *\/\n min-height: 100vh;\n }\n .menu {\n width: 100%;\n background-color: #d97b0f;\n padding: 10px;\n text-align: center;\n box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);\n flex-shrink: 0;\n overflow-x: auto;\n white-space: nowrap;\n }\n .menu a {\n color: #fff;\n text-decoration: none;\n margin: 0 8px;\n font-weight: bold;\n font-size: 14px;\n display: inline-block;\n }\n .menu a:hover {\n text-decoration: underline;\n }\n .container {\n display: flex;\n flex-wrap: wrap;\n flex: 1 0 auto;\n padding: 10px;\n box-sizing: border-box;\n justify-content: center;\n }\n .image-container, .chat-container {\n width: 100%;\n max-width: 600px;\n margin-bottom: 20px;\n }\n .image-container {\n text-align: center;\n }\n .image-container img {\n width: 100%;\n height: auto;\n border-radius: 20px;\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n }\n .sentence-text {\n margin: 10px 0;\n font-weight: bold;\n color: #333;\n font-size: 16px;\n }\n .word-box {\n margin-top: 10px;\n padding: 10px;\n background-color: #fff;\n border: 2px solid #026c96;\n border-radius: 10px;\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n font-size: 18px;\n font-weight: bold;\n color: #026c96;\n text-align: left;\n max-height: 300px;\n overflow-y: auto;\n }\n .chat-container {\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-header h2 {\n margin: 0;\n font-size: 18px;\n }\n .chat-messages {\n padding: 10px;\n overflow-y: auto;\n max-height: 300px;\n background-color: #fff;\n }\n .message {\n margin-bottom: 10px;\n padding: 10px;\n border-radius: 5px;\n font-size: 14px;\n line-height: 1.4;\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: #fff;\n text-align: left;\n }\n .chat-input {\n display: flex;\n align-items: center;\n background-color: #a3e106;\n padding: 10px;\n justify-content: center;\n }\n .send-button, .stop-button {\n background-color: #17c686;\n color: #fff;\n font-weight: bold;\n border: none;\n border-radius: 5px;\n padding: 8px 10px;\n cursor: pointer;\n transition: background-color 0.3s;\n flex: 1;\n margin: 0 5px;\n max-width: 150px;\n font-size: 14px;\n }\n .stop-button {\n background-color: #c86722;\n }\n .chat-input input {\n flex: 2;\n padding: 8px;\n margin-right: 10px;\n border: 2px solid #026c96;\n border-radius: 5px;\n font-size: 16px;\n }\n\n \/* Adjustments for smaller screens *\/\n @media (max-width: 600px) {\n .menu a {\n margin: 0 5px;\n font-size: 12px;\n }\n .sentence-text {\n font-size: 14px;\n }\n .word-box {\n font-size: 14px;\n max-height: 200px;\n }\n .chat-header h2 {\n font-size: 16px;\n }\n .chat-messages {\n max-height: 200px;\n }\n .message {\n font-size: 13px;\n }\n .send-button, .stop-button {\n padding: 6px 8px;\n font-size: 12px;\n max-width: 120px;\n }\n .chat-input input {\n font-size: 14px;\n }\n }\n @media (max-width: 400px) {\n .menu a {\n margin: 0 3px;\n font-size: 11px;\n }\n .sentence-text {\n font-size: 13px;\n }\n .word-box {\n font-size: 13px;\n max-height: 150px;\n }\n .chat-header h2 {\n font-size: 14px;\n }\n .chat-messages {\n max-height: 150px;\n }\n .message {\n font-size: 12px;\n }\n .send-button, .stop-button {\n padding: 5px 6px;\n font-size: 11px;\n max-width: 100px;\n }\n .chat-input input {\n font-size: 12px;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"menu\">\n <a href=\"https:\/\/phamho.com\/book\/2024\/09\/16\/spanish-vocabulary\/\">Vocabulary<\/a>\n <a href=\"https:\/\/phamho.com\/book\/2024\/09\/17\/spanish-sentences-family\/\">Sentences<\/a>\n <a href=\"https:\/\/phamho.com\/book\/2024\/09\/17\/spanish-yes-no-questions\/\">Yes\/No Questions<\/a>\n <a href=\"https:\/\/phamho.com\/book\/2024\/09\/17\/spanish-wh-questions-family\/\">WH Questions<\/a> \n <a href=\"https:\/\/phamho.com\/book\/2024\/09\/18\/spanish-interaction-family\/\">Internactions<\/a> \n <\/div>\n\n <div class=\"container\">\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=\"Lecci\u00f3n Robot\">\n <div class=\"sentence-text\">Mira el vocabulario en esta caja<\/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>Spanish Vocabulary – Family<\/h2>\n <\/div>\n <div class=\"chat-messages\" id=\"chat-messages\">\n \n <\/div>\n <div class=\"chat-input\">\n <input type=\"text\" id=\"user-input\" placeholder=\"Type your answer here...\" style=\"display: none;\" \/>\n <button id=\"submit-btn\" class=\"send-button\" style=\"display: none;\">Submit<\/button>\n <button id=\"start-btn\" class=\"send-button\">Start Lesson<\/button>\n <button id=\"stop-btn\" class=\"stop-button\">Stop<\/button>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n const sentences = [\n { sentence: \"Mi familia es grande.\", translation: \"My family is big.\" },\n { sentence: \"Mi padre es profesor.\", translation: \"My father is a teacher.\" },\n { sentence: \"Mi madre cocina muy bien.\", translation: \"My mother cooks very well.\" },\n { sentence: \"Tengo un hermano y una hermana.\", translation: \"I have a brother and a sister.\" },\n { sentence: \"Mi abuelo vive con nosotros.\", translation: \"My grandfather lives with us.\" },\n { sentence: \"Mi abuela tiene 70 a\u00f1os.\", translation: \"My grandmother is 70 years old.\" },\n { sentence: \"Mi hijo juega al f\u00fatbol.\", translation: \"My son plays football.\" },\n { sentence: \"Mi hija toca el piano.\", translation: \"My daughter plays the piano.\" },\n { sentence: \"Mi t\u00edo es m\u00e9dico.\", translation: \"My uncle is a doctor.\" },\n { sentence: \"Mi t\u00eda es ingeniera.\", translation: \"My aunt is an engineer.\" },\n { sentence: \"Mi primo y yo somos amigos.\", translation: \"My cousin and I are friends.\" },\n { sentence: \"Mi prima estudia en la universidad.\", translation: \"My cousin studies at the university.\" },\n { sentence: \"Mi esposo es muy amable.\", translation: \"My husband is very kind.\" },\n { sentence: \"Mi esposa es muy inteligente.\", translation: \"My wife is very intelligent.\" },\n { sentence: \"Mis padres trabajan en una empresa.\", translation: \"My parents work at a company.\" },\n { sentence: \"Mis abuelos viven en el campo.\", translation: \"My grandparents live in the countryside.\" },\n { sentence: \"Mis hermanos son menores que yo.\", translation: \"My siblings are younger than me.\" },\n { sentence: \"Mis hijos van a la escuela.\", translation: \"My children go to school.\" },\n { sentence: \"Mis primos vienen de visita.\", translation: \"My cousins are coming to visit.\" },\n { sentence: \"La familia es lo m\u00e1s importante.\", translation: \"Family is the most important thing.\" }\n ];\n\n let currentSentenceIndex = 0;\n let repeatAttempts = 0;\n let recognition;\n let isSpeechRecognitionSupported = false;\n\n const stopKeywords = [\"adi\u00f3s\", \"hasta luego\", \"chao\", \"stop\", \"bye\", \"byebye\", \"bye bye\", \"goodbye\"];\n const speechSynthesisSupported = 'speechSynthesis' in window;\n\n \/\/ Feature detection for Speech Recognition\n if (window.SpeechRecognition || window.webkitSpeechRecognition) {\n isSpeechRecognitionSupported = true;\n recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();\n recognition.lang = 'es-ES';\n recognition.interimResults = false;\n recognition.maxAlternatives = 1;\n }\n\n window.onload = function() {\n if (speechSynthesisSupported) {\n if (window.speechSynthesis.getVoices().length === 0) {\n \/\/ Voices not loaded yet, wait for the event\n window.speechSynthesis.onvoiceschanged = function() {\n greetUser();\n };\n } else {\n \/\/ Voices already loaded\n greetUser();\n }\n } else {\n alert('Sorry, your browser does not support speech synthesis. Please use a compatible browser for the best experience.');\n appendMessage('Speech synthesis not supported in your browser.', 'bot');\n }\n\n if (!isSpeechRecognitionSupported) {\n \/\/ Show text input and submit button\n document.getElementById('user-input').style.display = 'block';\n document.getElementById('submit-btn').style.display = 'block';\n }\n };\n\n function greetUser() {\n let greeting = \"Welcome! In this lesson, you will learn 20 sentences about family in Spanish. I will say each sentence twice in Spanish, and then you will repeat.\";\n if (!isSpeechRecognitionSupported) {\n greeting += \" Your browser does not support voice input, so please type your responses in the text box below.\";\n }\n greeting += \" Are you ready? Click 'Start Lesson' to begin.\";\n appendMessage(greeting, 'bot');\n sayText(greeting, 'en', true);\n }\n\n document.getElementById('start-btn').onclick = function() {\n currentSentenceIndex = 0;\n repeatAttempts = 0;\n startLesson();\n };\n\n document.getElementById('stop-btn').onclick = function() {\n endLesson(true); \/\/ Stop the lesson when \"Stop\" is clicked\n };\n\n \/\/ Handle submit button click\n document.getElementById('submit-btn').onclick = function() {\n let userInput = document.getElementById('user-input').value.trim();\n document.getElementById('user-input').value = '';\n if (userInput) {\n processUserResponse(userInput);\n }\n };\n\n \/\/ Allow pressing 'Enter' to submit the answer\n document.getElementById('user-input').addEventListener('keypress', function(event) {\n if (event.key === 'Enter') {\n event.preventDefault();\n document.getElementById('submit-btn').click();\n }\n });\n\n function startLesson() {\n if (currentSentenceIndex < sentences.length) {\n const sentenceObj = sentences[currentSentenceIndex];\n const formattedSentence = formatSentence(sentenceObj.sentence);\n const translation = sentenceObj.translation;\n\n appendMessage(`'${formattedSentence}' - '${translation}'`, 'bot');\n addSentenceToBox(formattedSentence, translation);\n\n \/\/ Say the sentence twice in Spanish\n sayText(formattedSentence, \"es\", false, function() {\n setTimeout(() => {\n sayText(formattedSentence, \"es\", false, function() {\n setTimeout(() => {\n if (isSpeechRecognitionSupported) {\n promptUserToRepeat(formattedSentence);\n } else {\n promptUserToType(formattedSentence);\n }\n }, 500);\n });\n }, 500);\n });\n } else {\n endLesson();\n }\n }\n\n function promptUserToRepeat(sentence) {\n const repeatMessage = `Now repeat after me:`;\n appendMessage(`${repeatMessage} '${sentence}'`, 'bot');\n\n sayText(repeatMessage, \"en\", true, () => {\n sayText(`'${sentence}'`, \"es\", false, () => {\n listenUserResponse(sentence);\n });\n });\n }\n\n function promptUserToType(sentence) {\n const typeMessage = `Please type the sentence '${sentence}' in the text box below.`;\n appendMessage(typeMessage, 'bot');\n sayText(typeMessage, \"en\", true);\n document.getElementById('user-input').focus();\n }\n\n function listenUserResponse(expectedSentence) {\n recognition.start();\n\n recognition.onresult = function(event) {\n let userInput = event.results[0][0].transcript.trim();\n processUserResponse(userInput, expectedSentence);\n };\n\n recognition.onspeechend = function() {\n recognition.stop();\n };\n\n recognition.onerror = function(event) {\n let errorMessage = '';\n switch(event.error) {\n case 'no-speech':\n errorMessage = 'No speech detected. Please try again.';\n break;\n case 'audio-capture':\n errorMessage = 'Microphone access denied. Please check your settings.';\n break;\n case 'not-allowed':\n errorMessage = 'Permission to use microphone denied.';\n break;\n default:\n errorMessage = 'An error occurred: ' + event.error;\n }\n appendMessage(errorMessage, 'bot');\n sayText(errorMessage, 'en', true);\n };\n }\n\n function processUserResponse(userInput, expectedSentence = sentences[currentSentenceIndex].sentence) {\n appendMessage(userInput, 'user');\n\n if (stopKeywords.includes(userInput.toLowerCase())) {\n endLesson(true); \/\/ User requested to stop the lesson\n return;\n }\n\n let normalizedUserInput = normalizeSentence(userInput);\n let normalizedExpectedSentence = normalizeSentence(expectedSentence);\n\n if (normalizedUserInput === normalizedExpectedSentence) {\n const positiveMessage = \"Great! Your pronunciation is good.\";\n appendMessage(positiveMessage, 'bot');\n sayText(positiveMessage, 'en', true);\n repeatAttempts = 0; \n currentSentenceIndex++;\n setTimeout(startLesson, 2000); \n } else {\n repeatAttempts++;\n if (repeatAttempts < 2) {\n handleIncorrectResponse(expectedSentence);\n } else {\n offerRetryOption(expectedSentence);\n }\n }\n }\n\n function handleIncorrectResponse(expectedSentence) {\n appendMessage(`That's not correct. Listen again: '${expectedSentence}' Now repeat after me.`, 'bot');\n\n sayText(\"That's not correct. Listen again:\", 'en', true, () => {\n sayText(`'${expectedSentence}'`, 'es', false, () => {\n sayText('Now repeat after me:', 'en', true, () => {\n sayText(`'${expectedSentence}'`, 'es', false, () => {\n setTimeout(() => {\n if (isSpeechRecognitionSupported) {\n listenUserResponse(expectedSentence);\n } else {\n document.getElementById('user-input').focus();\n }\n }, 500);\n });\n });\n });\n });\n }\n\n function offerRetryOption(expectedSentence) {\n const nextSentenceMessage = `You've tried twice. The correct sentence is '${expectedSentence}'. Do you want to try again? Say 'yes' to repeat or 'no' to continue.`;\n appendMessage(nextSentenceMessage, 'bot');\n\n sayText(\"You've tried twice. The correct sentence is:\", 'en', true, () => {\n sayText(`'${expectedSentence}'`, 'es', false, () => {\n sayText(\"Do you want to try again? Say 'yes' to repeat or 'no' to continue.\", 'en', true, () => {\n if (isSpeechRecognitionSupported) {\n listenForRetry(expectedSentence);\n } else {\n \/\/ For text input, assume 'no' to continue\n repeatAttempts = 0;\n currentSentenceIndex++;\n startLesson();\n }\n });\n });\n });\n }\n\n function listenForRetry(expectedSentence) {\n recognition.lang = 'en-US';\n recognition.start();\n\n recognition.onresult = function(event) {\n let userInput = event.results[0][0].transcript.trim().toLowerCase();\n appendMessage(userInput, 'user');\n\n if (userInput === 'yes') {\n repeatAttempts = 0;\n if (isSpeechRecognitionSupported) {\n listenUserResponse(expectedSentence);\n } else {\n document.getElementById('user-input').focus();\n }\n } else {\n repeatAttempts = 0;\n currentSentenceIndex++;\n startLesson();\n }\n };\n\n recognition.onspeechend = function() {\n recognition.stop();\n };\n\n recognition.onerror = function(event) {\n let errorMessage = 'An error occurred: ' + event.error;\n appendMessage(errorMessage, 'bot');\n sayText(errorMessage, 'en', true);\n };\n }\n\n function addSentenceToBox(sentence, translation) {\n const wordBox = document.getElementById('word-box');\n const sentenceElement = document.createElement('div');\n sentenceElement.innerText = `'${sentence}' - '${translation}'`;\n wordBox.appendChild(sentenceElement);\n }\n\n function endLesson(userStopped = false) {\n let message;\n if (userStopped) {\n message = \"Thank you for learning today! I hope you enjoyed the lesson.\";\n } else {\n message = \"Well done! You've learned 20 sentences related to family. Keep practicing!\";\n }\n appendMessage(message, \"bot\");\n sayText(message, \"en\", true);\n }\n\n function sayText(text, lang, preferFemale, callback) {\n if (!speechSynthesisSupported) {\n if (callback) callback();\n return;\n }\n const utterance = new SpeechSynthesisUtterance(text);\n utterance.lang = lang;\n utterance.rate = lang.startsWith('es') ? 0.9 : 1.0;\n utterance.pitch = lang.startsWith('es') ? 1.1 : 1.0;\n\n const voices = window.speechSynthesis.getVoices();\n let selectedVoice = null;\n\n const preferredVoices = {\n 'en': ['Google US English', 'Microsoft Zira Desktop', 'Alex', 'Samantha'],\n 'es': ['Google espa\u00f1ol', 'Microsoft Helena Desktop', 'Paulina']\n };\n\n const preferredVoiceNames = preferredVoices[lang.substring(0, 2)] || [];\n\n for (let voiceName of preferredVoiceNames) {\n selectedVoice = voices.find(voice => voice.name === voiceName);\n if (selectedVoice) break;\n }\n\n if (!selectedVoice) {\n selectedVoice = voices.find(voice =>\n voice.lang.startsWith(lang) &&\n (!preferFemale || voice.name.toLowerCase().includes('female') || voice.name.toLowerCase().includes('woman') || voice.gender === 'female')\n );\n }\n\n if (!selectedVoice) {\n selectedVoice = voices.find(voice => voice.lang.startsWith(lang));\n }\n\n if (selectedVoice) {\n utterance.voice = selectedVoice;\n }\n\n utterance.onend = function() {\n if (callback) callback();\n };\n\n window.speechSynthesis.speak(utterance);\n }\n\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 function formatSentence(sentence) {\n sentence = sentence.trim();\n if (sentence.length === 0) return sentence;\n let firstChar = sentence.charAt(0).toUpperCase();\n let restOfSentence = sentence.slice(1);\n let formattedSentence = firstChar + restOfSentence;\n\n if (!\/[.!?]$\/.test(formattedSentence)) {\n formattedSentence += '.';\n }\n\n return formattedSentence;\n }\n\n function normalizeSentence(sentence) {\n return sentence.replace(\/[.,!?\u00bf\u00a1]\/g, '').toLowerCase().trim();\n }\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Spanish Sentences – Family Vocabulary Sentences Yes\/No Questions WH Questions Internactions Mira el vocabulario en esta caja Spanish Vocabulary – Family Submit Start Lesson Stop<\/p>\n","protected":false},"author":1,"featured_media":1413,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[40,34,33],"tags":[],"class_list":["post-1634","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-family","category-robots","category-spanish"],"featured_image_src":"https:\/\/phamho.com\/book\/wp-content\/uploads\/2024\/06\/DALL\u00b7E-2024-06-09-13.43.22-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.43.22-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.43.22-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\/1634","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=1634"}],"version-history":[{"count":6,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/posts\/1634\/revisions"}],"predecessor-version":[{"id":1657,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/posts\/1634\/revisions\/1657"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/media\/1413"}],"wp:attachment":[{"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/media?parent=1634"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/categories?post=1634"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/tags?post=1634"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":1634,"date":"2024-09-17T01:31:49","date_gmt":"2024-09-17T01:31:49","guid":{"rendered":"https:\/\/phamho.com\/book\/?p=1634"},"modified":"2024-09-19T07:00:02","modified_gmt":"2024-09-19T07:00:02","slug":"spanish-sentences-family","status":"publish","type":"post","link":"https:\/\/phamho.com\/book\/spanish-sentences-family\/","title":{"rendered":"Spanish Sentences – Family"},"content":{"rendered":"\n\n\n\n \n Spanish Sentences – Family<\/title>\n <style>\n body {\n font-family: Arial, sans-serif;\n background-color: #ffffff;\n margin: 0;\n padding: 0;\n display: flex;\n flex-direction: column; \/* Stack elements vertically *\/\n min-height: 100vh;\n }\n .menu {\n width: 100%;\n background-color: #d97b0f;\n padding: 10px;\n text-align: center;\n box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);\n flex-shrink: 0;\n overflow-x: auto;\n white-space: nowrap;\n }\n .menu a {\n color: #fff;\n text-decoration: none;\n margin: 0 8px;\n font-weight: bold;\n font-size: 14px;\n display: inline-block;\n }\n .menu a:hover {\n text-decoration: underline;\n }\n .container {\n display: flex;\n flex-wrap: wrap;\n flex: 1 0 auto;\n padding: 10px;\n box-sizing: border-box;\n justify-content: center;\n }\n .image-container, .chat-container {\n width: 100%;\n max-width: 600px;\n margin-bottom: 20px;\n }\n .image-container {\n text-align: center;\n }\n .image-container img {\n width: 100%;\n height: auto;\n border-radius: 20px;\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n }\n .sentence-text {\n margin: 10px 0;\n font-weight: bold;\n color: #333;\n font-size: 16px;\n }\n .word-box {\n margin-top: 10px;\n padding: 10px;\n background-color: #fff;\n border: 2px solid #026c96;\n border-radius: 10px;\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n font-size: 18px;\n font-weight: bold;\n color: #026c96;\n text-align: left;\n max-height: 300px;\n overflow-y: auto;\n }\n .chat-container {\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-header h2 {\n margin: 0;\n font-size: 18px;\n }\n .chat-messages {\n padding: 10px;\n overflow-y: auto;\n max-height: 300px;\n background-color: #fff;\n }\n .message {\n margin-bottom: 10px;\n padding: 10px;\n border-radius: 5px;\n font-size: 14px;\n line-height: 1.4;\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: #fff;\n text-align: left;\n }\n .chat-input {\n display: flex;\n align-items: center;\n background-color: #a3e106;\n padding: 10px;\n justify-content: center;\n }\n .send-button, .stop-button {\n background-color: #17c686;\n color: #fff;\n font-weight: bold;\n border: none;\n border-radius: 5px;\n padding: 8px 10px;\n cursor: pointer;\n transition: background-color 0.3s;\n flex: 1;\n margin: 0 5px;\n max-width: 150px;\n font-size: 14px;\n }\n .stop-button {\n background-color: #c86722;\n }\n .chat-input input {\n flex: 2;\n padding: 8px;\n margin-right: 10px;\n border: 2px solid #026c96;\n border-radius: 5px;\n font-size: 16px;\n }\n\n \/* Adjustments for smaller screens *\/\n @media (max-width: 600px) {\n .menu a {\n margin: 0 5px;\n font-size: 12px;\n }\n .sentence-text {\n font-size: 14px;\n }\n .word-box {\n font-size: 14px;\n max-height: 200px;\n }\n .chat-header h2 {\n font-size: 16px;\n }\n .chat-messages {\n max-height: 200px;\n }\n .message {\n font-size: 13px;\n }\n .send-button, .stop-button {\n padding: 6px 8px;\n font-size: 12px;\n max-width: 120px;\n }\n .chat-input input {\n font-size: 14px;\n }\n }\n @media (max-width: 400px) {\n .menu a {\n margin: 0 3px;\n font-size: 11px;\n }\n .sentence-text {\n font-size: 13px;\n }\n .word-box {\n font-size: 13px;\n max-height: 150px;\n }\n .chat-header h2 {\n font-size: 14px;\n }\n .chat-messages {\n max-height: 150px;\n }\n .message {\n font-size: 12px;\n }\n .send-button, .stop-button {\n padding: 5px 6px;\n font-size: 11px;\n max-width: 100px;\n }\n .chat-input input {\n font-size: 12px;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"menu\">\n <a href=\"https:\/\/phamho.com\/book\/2024\/09\/16\/spanish-vocabulary\/\">Vocabulary<\/a>\n <a href=\"https:\/\/phamho.com\/book\/2024\/09\/17\/spanish-sentences-family\/\">Sentences<\/a>\n <a href=\"https:\/\/phamho.com\/book\/2024\/09\/17\/spanish-yes-no-questions\/\">Yes\/No Questions<\/a>\n <a href=\"https:\/\/phamho.com\/book\/2024\/09\/17\/spanish-wh-questions-family\/\">WH Questions<\/a> \n <a href=\"https:\/\/phamho.com\/book\/2024\/09\/18\/spanish-interaction-family\/\">Internactions<\/a> \n <\/div>\n\n <div class=\"container\">\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=\"Lecci\u00f3n Robot\">\n <div class=\"sentence-text\">Mira el vocabulario en esta caja<\/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>Spanish Vocabulary – Family<\/h2>\n <\/div>\n <div class=\"chat-messages\" id=\"chat-messages\">\n \n <\/div>\n <div class=\"chat-input\">\n <input type=\"text\" id=\"user-input\" placeholder=\"Type your answer here...\" style=\"display: none;\" \/>\n <button id=\"submit-btn\" class=\"send-button\" style=\"display: none;\">Submit<\/button>\n <button id=\"start-btn\" class=\"send-button\">Start Lesson<\/button>\n <button id=\"stop-btn\" class=\"stop-button\">Stop<\/button>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n const sentences = [\n { sentence: \"Mi familia es grande.\", translation: \"My family is big.\" },\n { sentence: \"Mi padre es profesor.\", translation: \"My father is a teacher.\" },\n { sentence: \"Mi madre cocina muy bien.\", translation: \"My mother cooks very well.\" },\n { sentence: \"Tengo un hermano y una hermana.\", translation: \"I have a brother and a sister.\" },\n { sentence: \"Mi abuelo vive con nosotros.\", translation: \"My grandfather lives with us.\" },\n { sentence: \"Mi abuela tiene 70 a\u00f1os.\", translation: \"My grandmother is 70 years old.\" },\n { sentence: \"Mi hijo juega al f\u00fatbol.\", translation: \"My son plays football.\" },\n { sentence: \"Mi hija toca el piano.\", translation: \"My daughter plays the piano.\" },\n { sentence: \"Mi t\u00edo es m\u00e9dico.\", translation: \"My uncle is a doctor.\" },\n { sentence: \"Mi t\u00eda es ingeniera.\", translation: \"My aunt is an engineer.\" },\n { sentence: \"Mi primo y yo somos amigos.\", translation: \"My cousin and I are friends.\" },\n { sentence: \"Mi prima estudia en la universidad.\", translation: \"My cousin studies at the university.\" },\n { sentence: \"Mi esposo es muy amable.\", translation: \"My husband is very kind.\" },\n { sentence: \"Mi esposa es muy inteligente.\", translation: \"My wife is very intelligent.\" },\n { sentence: \"Mis padres trabajan en una empresa.\", translation: \"My parents work at a company.\" },\n { sentence: \"Mis abuelos viven en el campo.\", translation: \"My grandparents live in the countryside.\" },\n { sentence: \"Mis hermanos son menores que yo.\", translation: \"My siblings are younger than me.\" },\n { sentence: \"Mis hijos van a la escuela.\", translation: \"My children go to school.\" },\n { sentence: \"Mis primos vienen de visita.\", translation: \"My cousins are coming to visit.\" },\n { sentence: \"La familia es lo m\u00e1s importante.\", translation: \"Family is the most important thing.\" }\n ];\n\n let currentSentenceIndex = 0;\n let repeatAttempts = 0;\n let recognition;\n let isSpeechRecognitionSupported = false;\n\n const stopKeywords = [\"adi\u00f3s\", \"hasta luego\", \"chao\", \"stop\", \"bye\", \"byebye\", \"bye bye\", \"goodbye\"];\n const speechSynthesisSupported = 'speechSynthesis' in window;\n\n \/\/ Feature detection for Speech Recognition\n if (window.SpeechRecognition || window.webkitSpeechRecognition) {\n isSpeechRecognitionSupported = true;\n recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();\n recognition.lang = 'es-ES';\n recognition.interimResults = false;\n recognition.maxAlternatives = 1;\n }\n\n window.onload = function() {\n if (speechSynthesisSupported) {\n if (window.speechSynthesis.getVoices().length === 0) {\n \/\/ Voices not loaded yet, wait for the event\n window.speechSynthesis.onvoiceschanged = function() {\n greetUser();\n };\n } else {\n \/\/ Voices already loaded\n greetUser();\n }\n } else {\n alert('Sorry, your browser does not support speech synthesis. Please use a compatible browser for the best experience.');\n appendMessage('Speech synthesis not supported in your browser.', 'bot');\n }\n\n if (!isSpeechRecognitionSupported) {\n \/\/ Show text input and submit button\n document.getElementById('user-input').style.display = 'block';\n document.getElementById('submit-btn').style.display = 'block';\n }\n };\n\n function greetUser() {\n let greeting = \"Welcome! In this lesson, you will learn 20 sentences about family in Spanish. I will say each sentence twice in Spanish, and then you will repeat.\";\n if (!isSpeechRecognitionSupported) {\n greeting += \" Your browser does not support voice input, so please type your responses in the text box below.\";\n }\n greeting += \" Are you ready? Click 'Start Lesson' to begin.\";\n appendMessage(greeting, 'bot');\n sayText(greeting, 'en', true);\n }\n\n document.getElementById('start-btn').onclick = function() {\n currentSentenceIndex = 0;\n repeatAttempts = 0;\n startLesson();\n };\n\n document.getElementById('stop-btn').onclick = function() {\n endLesson(true); \/\/ Stop the lesson when \"Stop\" is clicked\n };\n\n \/\/ Handle submit button click\n document.getElementById('submit-btn').onclick = function() {\n let userInput = document.getElementById('user-input').value.trim();\n document.getElementById('user-input').value = '';\n if (userInput) {\n processUserResponse(userInput);\n }\n };\n\n \/\/ Allow pressing 'Enter' to submit the answer\n document.getElementById('user-input').addEventListener('keypress', function(event) {\n if (event.key === 'Enter') {\n event.preventDefault();\n document.getElementById('submit-btn').click();\n }\n });\n\n function startLesson() {\n if (currentSentenceIndex < sentences.length) {\n const sentenceObj = sentences[currentSentenceIndex];\n const formattedSentence = formatSentence(sentenceObj.sentence);\n const translation = sentenceObj.translation;\n\n appendMessage(`'${formattedSentence}' - '${translation}'`, 'bot');\n addSentenceToBox(formattedSentence, translation);\n\n \/\/ Say the sentence twice in Spanish\n sayText(formattedSentence, \"es\", false, function() {\n setTimeout(() => {\n sayText(formattedSentence, \"es\", false, function() {\n setTimeout(() => {\n if (isSpeechRecognitionSupported) {\n promptUserToRepeat(formattedSentence);\n } else {\n promptUserToType(formattedSentence);\n }\n }, 500);\n });\n }, 500);\n });\n } else {\n endLesson();\n }\n }\n\n function promptUserToRepeat(sentence) {\n const repeatMessage = `Now repeat after me:`;\n appendMessage(`${repeatMessage} '${sentence}'`, 'bot');\n\n sayText(repeatMessage, \"en\", true, () => {\n sayText(`'${sentence}'`, \"es\", false, () => {\n listenUserResponse(sentence);\n });\n });\n }\n\n function promptUserToType(sentence) {\n const typeMessage = `Please type the sentence '${sentence}' in the text box below.`;\n appendMessage(typeMessage, 'bot');\n sayText(typeMessage, \"en\", true);\n document.getElementById('user-input').focus();\n }\n\n function listenUserResponse(expectedSentence) {\n recognition.start();\n\n recognition.onresult = function(event) {\n let userInput = event.results[0][0].transcript.trim();\n processUserResponse(userInput, expectedSentence);\n };\n\n recognition.onspeechend = function() {\n recognition.stop();\n };\n\n recognition.onerror = function(event) {\n let errorMessage = '';\n switch(event.error) {\n case 'no-speech':\n errorMessage = 'No speech detected. Please try again.';\n break;\n case 'audio-capture':\n errorMessage = 'Microphone access denied. Please check your settings.';\n break;\n case 'not-allowed':\n errorMessage = 'Permission to use microphone denied.';\n break;\n default:\n errorMessage = 'An error occurred: ' + event.error;\n }\n appendMessage(errorMessage, 'bot');\n sayText(errorMessage, 'en', true);\n };\n }\n\n function processUserResponse(userInput, expectedSentence = sentences[currentSentenceIndex].sentence) {\n appendMessage(userInput, 'user');\n\n if (stopKeywords.includes(userInput.toLowerCase())) {\n endLesson(true); \/\/ User requested to stop the lesson\n return;\n }\n\n let normalizedUserInput = normalizeSentence(userInput);\n let normalizedExpectedSentence = normalizeSentence(expectedSentence);\n\n if (normalizedUserInput === normalizedExpectedSentence) {\n const positiveMessage = \"Great! Your pronunciation is good.\";\n appendMessage(positiveMessage, 'bot');\n sayText(positiveMessage, 'en', true);\n repeatAttempts = 0; \n currentSentenceIndex++;\n setTimeout(startLesson, 2000); \n } else {\n repeatAttempts++;\n if (repeatAttempts < 2) {\n handleIncorrectResponse(expectedSentence);\n } else {\n offerRetryOption(expectedSentence);\n }\n }\n }\n\n function handleIncorrectResponse(expectedSentence) {\n appendMessage(`That's not correct. Listen again: '${expectedSentence}' Now repeat after me.`, 'bot');\n\n sayText(\"That's not correct. Listen again:\", 'en', true, () => {\n sayText(`'${expectedSentence}'`, 'es', false, () => {\n sayText('Now repeat after me:', 'en', true, () => {\n sayText(`'${expectedSentence}'`, 'es', false, () => {\n setTimeout(() => {\n if (isSpeechRecognitionSupported) {\n listenUserResponse(expectedSentence);\n } else {\n document.getElementById('user-input').focus();\n }\n }, 500);\n });\n });\n });\n });\n }\n\n function offerRetryOption(expectedSentence) {\n const nextSentenceMessage = `You've tried twice. The correct sentence is '${expectedSentence}'. Do you want to try again? Say 'yes' to repeat or 'no' to continue.`;\n appendMessage(nextSentenceMessage, 'bot');\n\n sayText(\"You've tried twice. The correct sentence is:\", 'en', true, () => {\n sayText(`'${expectedSentence}'`, 'es', false, () => {\n sayText(\"Do you want to try again? Say 'yes' to repeat or 'no' to continue.\", 'en', true, () => {\n if (isSpeechRecognitionSupported) {\n listenForRetry(expectedSentence);\n } else {\n \/\/ For text input, assume 'no' to continue\n repeatAttempts = 0;\n currentSentenceIndex++;\n startLesson();\n }\n });\n });\n });\n }\n\n function listenForRetry(expectedSentence) {\n recognition.lang = 'en-US';\n recognition.start();\n\n recognition.onresult = function(event) {\n let userInput = event.results[0][0].transcript.trim().toLowerCase();\n appendMessage(userInput, 'user');\n\n if (userInput === 'yes') {\n repeatAttempts = 0;\n if (isSpeechRecognitionSupported) {\n listenUserResponse(expectedSentence);\n } else {\n document.getElementById('user-input').focus();\n }\n } else {\n repeatAttempts = 0;\n currentSentenceIndex++;\n startLesson();\n }\n };\n\n recognition.onspeechend = function() {\n recognition.stop();\n };\n\n recognition.onerror = function(event) {\n let errorMessage = 'An error occurred: ' + event.error;\n appendMessage(errorMessage, 'bot');\n sayText(errorMessage, 'en', true);\n };\n }\n\n function addSentenceToBox(sentence, translation) {\n const wordBox = document.getElementById('word-box');\n const sentenceElement = document.createElement('div');\n sentenceElement.innerText = `'${sentence}' - '${translation}'`;\n wordBox.appendChild(sentenceElement);\n }\n\n function endLesson(userStopped = false) {\n let message;\n if (userStopped) {\n message = \"Thank you for learning today! I hope you enjoyed the lesson.\";\n } else {\n message = \"Well done! You've learned 20 sentences related to family. Keep practicing!\";\n }\n appendMessage(message, \"bot\");\n sayText(message, \"en\", true);\n }\n\n function sayText(text, lang, preferFemale, callback) {\n if (!speechSynthesisSupported) {\n if (callback) callback();\n return;\n }\n const utterance = new SpeechSynthesisUtterance(text);\n utterance.lang = lang;\n utterance.rate = lang.startsWith('es') ? 0.9 : 1.0;\n utterance.pitch = lang.startsWith('es') ? 1.1 : 1.0;\n\n const voices = window.speechSynthesis.getVoices();\n let selectedVoice = null;\n\n const preferredVoices = {\n 'en': ['Google US English', 'Microsoft Zira Desktop', 'Alex', 'Samantha'],\n 'es': ['Google espa\u00f1ol', 'Microsoft Helena Desktop', 'Paulina']\n };\n\n const preferredVoiceNames = preferredVoices[lang.substring(0, 2)] || [];\n\n for (let voiceName of preferredVoiceNames) {\n selectedVoice = voices.find(voice => voice.name === voiceName);\n if (selectedVoice) break;\n }\n\n if (!selectedVoice) {\n selectedVoice = voices.find(voice =>\n voice.lang.startsWith(lang) &&\n (!preferFemale || voice.name.toLowerCase().includes('female') || voice.name.toLowerCase().includes('woman') || voice.gender === 'female')\n );\n }\n\n if (!selectedVoice) {\n selectedVoice = voices.find(voice => voice.lang.startsWith(lang));\n }\n\n if (selectedVoice) {\n utterance.voice = selectedVoice;\n }\n\n utterance.onend = function() {\n if (callback) callback();\n };\n\n window.speechSynthesis.speak(utterance);\n }\n\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 function formatSentence(sentence) {\n sentence = sentence.trim();\n if (sentence.length === 0) return sentence;\n let firstChar = sentence.charAt(0).toUpperCase();\n let restOfSentence = sentence.slice(1);\n let formattedSentence = firstChar + restOfSentence;\n\n if (!\/[.!?]$\/.test(formattedSentence)) {\n formattedSentence += '.';\n }\n\n return formattedSentence;\n }\n\n function normalizeSentence(sentence) {\n return sentence.replace(\/[.,!?\u00bf\u00a1]\/g, '').toLowerCase().trim();\n }\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Spanish Sentences – Family Vocabulary Sentences Yes\/No Questions WH Questions Internactions Mira el vocabulario en esta caja Spanish Vocabulary – Family Submit Start Lesson Stop<\/p>\n","protected":false},"author":1,"featured_media":1413,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[40,34,33],"tags":[],"class_list":["post-1634","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-family","category-robots","category-spanish"],"featured_image_src":"https:\/\/phamho.com\/book\/wp-content\/uploads\/2024\/06\/DALL\u00b7E-2024-06-09-13.43.22-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.43.22-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.43.22-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\/1634","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=1634"}],"version-history":[{"count":6,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/posts\/1634\/revisions"}],"predecessor-version":[{"id":1657,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/posts\/1634\/revisions\/1657"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/media\/1413"}],"wp:attachment":[{"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/media?parent=1634"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/categories?post=1634"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/tags?post=1634"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}