Spanish – daily conversations?<\/title>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> \n <style>\n \/* Base Styles *\/\n body {\n font-family: Arial, sans-serif;\n background-color: #ffffff;\n margin: 0;\n padding: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 100vh; \/* Changed from fixed height to min-height for better responsiveness *\/\n flex-direction: column;\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 margin-bottom: 20px;\n overflow-x: auto; \/* Allows horizontal scrolling if menu items exceed screen width *\/\n white-space: nowrap;\n }\n .menu a {\n color: #fff;\n text-decoration: none;\n margin: 0 10px; \/* Reduced margin for better spacing on smaller screens *\/\n font-weight: bold;\n font-size: 16px; \/* Increased font size for readability on mobile *\/\n display: inline-block;\n padding: 8px 12px; \/* Added padding for larger touch targets *\/\n }\n .menu a:hover {\n text-decoration: underline;\n }\n .container {\n display: flex;\n flex-direction: column; \/* Stack elements vertically on mobile *\/\n align-items: center;\n width: 90%; \/* Use percentage for better responsiveness *\/\n max-width: 800px; \/* Limit maximum width for larger screens *\/\n }\n .image-container {\n text-align: center;\n margin-bottom: 20px;\n }\n .image-container img {\n width: 100%; \/* Ensure image scales with container *\/\n height: auto;\n border-radius: 20px;\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n object-fit: cover; \/* Ensures the image covers the container without distortion *\/\n }\n .sentence-text {\n margin: 10px 0;\n font-weight: bold;\n color: #333;\n font-size: 18px; \/* Increased font size for better visibility *\/\n text-align: center; \/* Center align text on mobile *\/\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: 16px; \/* Adjusted font size for readability *\/\n font-weight: bold;\n color: #026c96;\n text-align: left;\n max-height: 300px;\n overflow-y: auto;\n width: 100%; \/* Ensure it takes full width of the container *\/\n }\n .voice-selection {\n margin-top: 20px;\n width: 100%;\n text-align: center;\n }\n .voice-selection label {\n display: block;\n margin-bottom: 8px;\n font-size: 16px;\n color: #333;\n }\n .voice-selection select {\n width: 80%;\n max-width: 400px;\n padding: 8px 12px;\n font-size: 16px;\n border: 2px solid #026c96;\n border-radius: 5px;\n background-color: #ffffff;\n color: #026c96;\n cursor: pointer;\n box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);\n }\n .voice-selection select:focus {\n outline: none;\n border-color: #d97b0f;\n box-shadow: 0 0 5px rgba(217, 123, 15, 0.5);\n }\n\n .chat-container {\n width: 100%; \/* Full width on mobile *\/\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: 15px; \/* Increased padding for touch areas *\/\n text-align: center;\n border-bottom: 1px solid #69010a;\n }\n .chat-header h2 {\n margin: 0;\n font-size: 20px; \/* Increased font size for better readability *\/\n }\n .chat-messages {\n padding: 15px;\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: 16px; \/* Adjusted font size for readability *\/\n line-height: 1.5;\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 flex-direction: column; \/* Stack buttons vertically on smaller screens *\/\n align-items: stretch;\n background-color: #a3e106;\n padding: 10px;\n }\n .chat-input button {\n background-color: #17c686;\n color: #fff;\n font-weight: bold;\n border: none;\n border-radius: 5px;\n padding: 12px 20px;\n cursor: pointer;\n transition: background-color 0.3s;\n margin: 5px 0; \/* Vertical spacing between buttons *\/\n font-size: 16px; \/* Increased font size for touch readability *\/\n }\n .chat-input .stop-button {\n background-color: #c86722;\n }\n .chat-input button:hover {\n opacity: 0.9; \/* Subtle feedback on hover *\/\n }\n\n \/* Responsive Adjustments *\/\n @media (min-width: 600px) {\n .container {\n flex-direction: row; \/* Side-by-side layout *\/\n justify-content: center;\n align-items: flex-start;\n }\n .image-container {\n width: 50%;\n margin-right: 20px;\n }\n .chat-container {\n width: 50%;\n }\n .chat-input {\n flex-direction: row; \/* Horizontal layout for buttons *\/\n justify-content: space-between;\n }\n .chat-input button {\n margin: 0 5px; \/* Horizontal spacing *\/\n flex: 1; \/* Equal width buttons *\/\n }\n .voice-selection select {\n width: 60%;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"menu\">\n <a href=\"https:\/\/phamho.com\/book\/2024\/09\/30\/spanish-do-you-like\/\">Do you like?<\/a>\n <a href=\"https:\/\/phamho.com\/book\/2024\/10\/01\/spanish-do-you-have\/\">Do you have?<\/a>\n <a href=\"https:\/\/phamho.com\/book\/2024\/10\/01\/spanish-can-you\/\">Can you?<\/a>\n <a href=\"https:\/\/phamho.com\/book\/2024\/10\/01\/spanish-simple-conversations\/\">Simple conversations<\/a> \n <a href=\"https:\/\/phamho.com\/book\/2024\/10\/01\/spanish-daily-conversations\/\">Daily Conversations<\/a> \n <a href=\"https:\/\/phamho.com\/book\/2024\/09\/30\/spanish-family\/\">Family<\/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\/08\/8d7efe04-a355-4214-a6cb-48d660b80124.webp\" alt=\"Lesson Robot\">\n <div class=\"sentence-text\">See the questions and answers in this box<\/div>\n <div id=\"word-box\" class=\"word-box\">\n \n <\/div>\n \n <div class=\"voice-selection\">\n <label for=\"voice-select\"><strong>Choose Spanish Voice:<\/strong><\/label>\n <select id=\"voice-select\">\n <option value=\"\">Loading voices…<\/option>\n <\/select>\n <\/div>\n <\/div>\n <div class=\"chat-container\">\n <div class=\"chat-header\"> \n <h2>Spanish – daily conversations?<\/h2>\n <\/div>\n <div class=\"chat-messages\" id=\"chat-messages\">\n \n <\/div>\n <div class=\"chat-input\">\n <button id=\"start-btn\" class=\"send-button\">Start Lesson<\/button>\n <button id=\"stop-btn\" class=\"stop-button\" disabled>Stop<\/button>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n \/\/ Feature detection for Speech Recognition\n const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;\n const isSpeechRecognitionSupported = SpeechRecognition !== undefined;\n let recognition;\n if (isSpeechRecognitionSupported) {\n recognition = new SpeechRecognition();\n recognition.lang = 'es-ES';\n recognition.interimResults = false;\n recognition.maxAlternatives = 1;\n } else {\n alert('Your browser does not support speech recognition. Please use a compatible browser like Firefox for Android.');\n }\n\n \/\/ Check for Speech Synthesis support\n const speechSynthesisSupported = 'speechSynthesis' in window;\n\n \/\/ Updated Questions data focusing on likes and dislikes\n const questions = [\n {\n question: \"\u00bfTe gusta leer?\",\n translation: \"Do you like reading?\",\n keywords: [\"me gusta\", \"leer\"],\n sampleAnswer: \"S\u00ed, me gusta leer.\",\n sampleTranslation: \"Yes, I like reading.\"\n},\n{\n question: \"\u00bfPrefieres t\u00e9 o caf\u00e9?\",\n translation: \"Do you prefer tea or coffee?\",\n keywords: [\"prefiero\", \"t\u00e9\", \"caf\u00e9\"],\n sampleAnswer: \"Prefiero el caf\u00e9.\",\n sampleTranslation: \"I prefer coffee.\"\n},\n{\n question: \"\u00bfHace buen tiempo hoy?\",\n translation: \"Is the weather nice today?\",\n keywords: [\"hace buen tiempo\", \"hoy\"],\n sampleAnswer: \"S\u00ed, hace buen tiempo hoy.\",\n sampleTranslation: \"Yes, the weather is nice today.\"\n},\n{\n question: \"\u00bfTienes hermanos?\",\n translation: \"Do you have siblings?\",\n keywords: [\"tengo hermanos\"],\n sampleAnswer: \"S\u00ed, tengo dos hermanos.\",\n sampleTranslation: \"Yes, I have two siblings.\"\n},\n{\n question: \"\u00bfTrabajas o estudias?\",\n translation: \"Do you work or study?\",\n keywords: [\"trabajo\", \"estudio\"],\n sampleAnswer: \"Estudio en la universidad.\",\n sampleTranslation: \"I study at the university.\"\n},\n{\n question: \"\u00bfQu\u00e9 haces los fines de semana?\",\n translation: \"What do you do on weekends?\",\n keywords: [\"fines de semana\", \"hago\"],\n sampleAnswer: \"Me gusta salir con amigos.\",\n sampleTranslation: \"I like going out with friends.\"\n},\n{\n question: \"\u00bfCu\u00e1l es tu color favorito?\",\n translation: \"What is your favorite color?\",\n keywords: [\"color favorito\"],\n sampleAnswer: \"Mi color favorito es azul.\",\n sampleTranslation: \"My favorite color is blue.\"\n},\n{\n question: \"\u00bfTienes mascotas?\",\n translation: \"Do you have pets?\",\n keywords: [\"tengo mascotas\"],\n sampleAnswer: \"S\u00ed, tengo un perro.\",\n sampleTranslation: \"Yes, I have a dog.\"\n},\n{\n question: \"\u00bfTe gusta la m\u00fasica?\",\n translation: \"Do you like music?\",\n keywords: [\"me gusta\", \"m\u00fasica\"],\n sampleAnswer: \"S\u00ed, me encanta la m\u00fasica.\",\n sampleTranslation: \"Yes, I love music.\"\n},\n{\n question: \"\u00bfTe gustan las pel\u00edculas?\",\n translation: \"Do you like movies?\",\n keywords: [\"me gustan\", \"pel\u00edculas\"],\n sampleAnswer: \"S\u00ed, me gustan las pel\u00edculas de acci\u00f3n.\",\n sampleTranslation: \"Yes, I like action movies.\"\n},\n{\n question: \"\u00bfPracticas alg\u00fan deporte?\",\n translation: \"Do you play any sports?\",\n keywords: [\"practico\", \"deporte\"],\n sampleAnswer: \"S\u00ed, practico f\u00fatbol.\",\n sampleTranslation: \"Yes, I play soccer.\"\n},\n{\n question: \"\u00bfLees libros?\",\n translation: \"Do you read books?\",\n keywords: [\"leo\", \"libros\"],\n sampleAnswer: \"S\u00ed, leo novelas.\",\n sampleTranslation: \"Yes, I read novels.\"\n},\n{\n question: \"\u00bfTe gusta cocinar?\",\n translation: \"Do you like cooking?\",\n keywords: [\"me gusta\", \"cocinar\"],\n sampleAnswer: \"S\u00ed, me gusta cocinar platos italianos.\",\n sampleTranslation: \"Yes, I like cooking Italian dishes.\"\n},\n{\n question: \"\u00bfTe gusta viajar?\",\n translation: \"Do you like traveling?\",\n keywords: [\"me gusta\", \"viajar\"],\n sampleAnswer: \"S\u00ed, me gusta viajar a diferentes pa\u00edses.\",\n sampleTranslation: \"Yes, I like traveling to different countries.\"\n},\n{\n question: \"\u00bfTe gusta usar la computadora?\",\n translation: \"Do you like using the computer?\",\n keywords: [\"me gusta\", \"usar\", \"computadora\"],\n sampleAnswer: \"S\u00ed, me gusta usar la computadora para trabajar.\",\n sampleTranslation: \"Yes, I like using the computer for work.\"\n},\n{\n question: \"\u00bfTe gusta ir de compras?\",\n translation: \"Do you like shopping?\",\n keywords: [\"me gusta\", \"ir de compras\"],\n sampleAnswer: \"S\u00ed, me gusta ir de compras los s\u00e1bados.\",\n sampleTranslation: \"Yes, I like shopping on Saturdays.\"\n},\n{\n question: \"\u00bfTienes muchos amigos?\",\n translation: \"Do you have many friends?\",\n keywords: [\"tengo\", \"muchos amigos\"],\n sampleAnswer: \"S\u00ed, tengo muchos amigos en la universidad.\",\n sampleTranslation: \"Yes, I have many friends at university.\"\n},\n{\n question: \"\u00bfCu\u00e1l es tu comida favorita?\",\n translation: \"What is your favorite food?\",\n keywords: [\"comida favorita\"],\n sampleAnswer: \"Mi comida favorita es la pizza.\",\n sampleTranslation: \"My favorite food is pizza.\"\n},\n{\n question: \"\u00bfTe levantas temprano?\",\n translation: \"Do you get up early?\",\n keywords: [\"me levanto temprano\"],\n sampleAnswer: \"S\u00ed, me levanto temprano todos los d\u00edas.\",\n sampleTranslation: \"Yes, I get up early every day.\"\n},\n{\n question: \"\u00bfHablas otros idiomas?\",\n translation: \"Do you speak other languages?\",\n keywords: [\"hablo\", \"otros idiomas\"],\n sampleAnswer: \"S\u00ed, hablo ingl\u00e9s y franc\u00e9s.\",\n sampleTranslation: \"Yes, I speak English and French.\"\n}\n \n ];\n\n let currentQuestionIndex = 0;\n let repeatAttempts = 0;\n const stopKeywords = [\"adi\u00f3s\", \"chao\", \"bye\", \"bye bye\", \"goodbye\", \"stop\"];\n let lessonStarted = false;\n let voicesLoaded = false;\n let selectedVoice = null; \/\/ To store the user's selected voice\n\n \/\/ DOM Elements\n const voiceSelect = document.getElementById('voice-select');\n const startBtn = document.getElementById('start-btn');\n const stopBtn = document.getElementById('stop-btn');\n\n window.addEventListener('load', function() {\n if (speechSynthesisSupported) {\n loadVoices();\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\n function loadVoices() {\n const voices = window.speechSynthesis.getVoices();\n\n if (voices.length !== 0) {\n populateVoiceList();\n } else {\n \/\/ Some browsers load voices asynchronously\n window.speechSynthesis.onvoiceschanged = populateVoiceList;\n }\n }\n\n function populateVoiceList() {\n const voices = window.speechSynthesis.getVoices().filter(voice => voice.lang.startsWith('es'));\n\n \/\/ Define preferred native Spanish voice names\n const preferredSpanishVoiceNames = [\n 'Google espa\u00f1ol', \/\/ Common in Chrome\n 'Microsoft Helena - Spanish (Spain)', \/\/ Common in Windows\n 'Microsoft Sabina - Spanish (Mexico)', \/\/ Common in Windows\n 'Apple Mar\u00eda', \/\/ Common in macOS\n 'Apple Satu' \/\/ Another common in macOS\n ];\n\n \/\/ Filter voices to include only preferred native voices\n let nativeSpanishVoices = voices.filter(voice => preferredSpanishVoiceNames.includes(voice.name));\n\n \/\/ If fewer than 5 native voices are found, fill the remaining slots with other Spanish voices\n if (nativeSpanishVoices.length < 5) {\n const additionalVoices = voices.filter(voice => !preferredSpanishVoiceNames.includes(voice.name));\n nativeSpanishVoices = nativeSpanishVoices.concat(additionalVoices.slice(0, 5 - nativeSpanishVoices.length));\n }\n\n \/\/ Limit to 5 voices\n nativeSpanishVoices = nativeSpanishVoices.slice(0, 5);\n\n voiceSelect.innerHTML = ''; \/\/ Clear existing options\n\n if (nativeSpanishVoices.length === 0) {\n \/\/ If no native voices are found, inform the user\n voiceSelect.innerHTML = '<option value=\"\">No native Spanish voices available<\/option>';\n selectedVoice = null;\n greetUser();\n return;\n }\n\n nativeSpanishVoices.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 default voice if available\n if (nativeSpanishVoices.length > 0) {\n selectedVoice = nativeSpanishVoices[0];\n voiceSelect.value = '0';\n greetUser();\n } else {\n greetUser();\n }\n\n console.log('Available native Spanish voices:', nativeSpanishVoices.map(v => v.name).join(', '));\n }\n\n \/\/ Handle voice selection\n voiceSelect.addEventListener('change', function() {\n const selectedIndex = parseInt(this.value, 10);\n const voices = window.speechSynthesis.getVoices().filter(voice => voice.lang.startsWith('es'));\n\n \/\/ Define preferred native Spanish voice names\n const preferredSpanishVoiceNames = [\n 'Google espa\u00f1ol', \/\/ Common in Chrome\n 'Microsoft Helena - Spanish (Spain)', \/\/ Common in Windows\n 'Microsoft Sabina - Spanish (Mexico)', \/\/ Common in Windows\n 'Apple Mar\u00eda', \/\/ Common in macOS\n 'Apple Satu' \/\/ Another common in macOS\n ];\n\n \/\/ Filter voices to include only preferred native voices\n let nativeSpanishVoices = voices.filter(voice => preferredSpanishVoiceNames.includes(voice.name));\n\n \/\/ If fewer than 5 native voices are found, fill the remaining slots with other Spanish voices\n if (nativeSpanishVoices.length < 5) {\n const additionalVoices = voices.filter(voice => !preferredSpanishVoiceNames.includes(voice.name));\n nativeSpanishVoices = nativeSpanishVoices.concat(additionalVoices.slice(0, 5 - nativeSpanishVoices.length));\n }\n\n \/\/ Limit to 5 voices\n nativeSpanishVoices = nativeSpanishVoices.slice(0, 5);\n\n if (nativeSpanishVoices[selectedIndex]) {\n selectedVoice = nativeSpanishVoices[selectedIndex];\n console.log(`Selected voice: ${selectedVoice.name}`);\n } else {\n selectedVoice = null;\n }\n });\n\n function greetUser() {\n const greeting = \"\u00a1Bienvenido! En esta lecci\u00f3n, te har\u00e9 20 preguntas sencillas en espa\u00f1ol. Haz clic en 'Start Lesson' para empezar.\";\n appendMessage(greeting, 'bot');\n sayText(greeting, 'es', true);\n }\n\n startBtn.addEventListener('click', function() {\n if (!isSpeechRecognitionSupported) {\n alert('Speech recognition is not supported in your browser. The lesson cannot proceed.');\n return;\n }\n if (lessonStarted) {\n alert('La lecci\u00f3n ya ha comenzado.');\n return;\n }\n currentQuestionIndex = 0;\n repeatAttempts = 0;\n lessonStarted = true;\n startLesson();\n \/\/ Disable the start button to prevent multiple starts\n startBtn.disabled = true;\n stopBtn.disabled = false;\n });\n\n stopBtn.addEventListener('click', function() {\n endLesson(true); \/\/ User stopped the lesson\n \/\/ Re-enable the start button\n startBtn.disabled = false;\n this.disabled = true;\n });\n\n function startLesson() {\n if (currentQuestionIndex < questions.length) {\n const questionObj = questions[currentQuestionIndex];\n const formattedQuestion = formatSentence(questionObj.question);\n\n appendMessage(`Pregunta: '${formattedQuestion}'`, 'bot');\n addQuestionToBox(formattedQuestion, questionObj.translation, questionObj.sampleAnswer, questionObj.sampleTranslation);\n\n \/\/ Say the question in Spanish twice\n sayText(formattedQuestion, \"es\", false, function() {\n sayText(formattedQuestion, \"es\", false, function() {\n \/\/ Prompt user to answer\n listenUserResponse(questionObj);\n });\n });\n } else {\n endLesson();\n }\n }\n\n function listenUserResponse(questionObj) {\n recognition.start();\n appendMessage(\"Escuchando tu respuesta...\", 'bot'); \/\/ Inform the user that listening has started\n\n recognition.onresult = function(event) {\n let userInput = event.results[0][0].transcript.trim();\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 processUserResponse(userInput, questionObj);\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 se detect\u00f3 habla. Por favor, intenta de nuevo.';\n break;\n case 'audio-capture':\n errorMessage = 'Acceso al micr\u00f3fono denegado. Por favor, verifica tus configuraciones.';\n break;\n case 'not-allowed':\n errorMessage = 'Permiso para usar el micr\u00f3fono denegado.';\n break;\n default:\n errorMessage = 'Ocurri\u00f3 un error: ' + event.error;\n }\n appendMessage(errorMessage, 'bot');\n sayText(errorMessage, 'es', true);\n };\n }\n\n function processUserResponse(userInput, questionObj) {\n \/\/ Normalize user's response\n let normalizedUserInput = normalizeSentence(userInput);\n normalizedUserInput = normalizeNumbers(normalizedUserInput);\n\n \/\/ Normalize keywords\n let normalizedKeywords = questionObj.keywords.map(keyword => normalizeNumbers(normalizeSentence(keyword)));\n\n \/\/ Check for keywords in the user's response\n let keywordsFound = normalizedKeywords.filter(keyword => normalizedUserInput.includes(keyword));\n\n if (keywordsFound.length === normalizedKeywords.length) {\n const positiveMessage = \"\u00a1Excelente! Tu respuesta es muy buena.\";\n appendMessage(positiveMessage, 'bot');\n sayText(positiveMessage, 'es', true);\n repeatAttempts = 0; \/\/ Reset attempts counter\n currentQuestionIndex++;\n setTimeout(startLesson, 2000); \/\/ Move to next question after 2 seconds\n } else {\n repeatAttempts++;\n if (repeatAttempts < 2) {\n const missingKeywords = questionObj.keywords.filter((keyword, index) => !normalizedUserInput.includes(normalizedKeywords[index]));\n const correctionMessage = `No escuch\u00e9 las palabras: ${missingKeywords.join(', ')}. Por favor, intenta de nuevo.`;\n appendMessage(correctionMessage, 'bot');\n sayText(correctionMessage, 'es', true);\n setTimeout(() => listenUserResponse(questionObj), 2000); \/\/ Give the user another chance\n } else {\n \/\/ Provide sample answer\n const sampleAnswerMessage = `No te preocupes. Aqu\u00ed tienes una respuesta de ejemplo: '${questionObj.sampleAnswer}'.`;\n appendMessage(sampleAnswerMessage, 'bot');\n sayText(\"No te preocupes. Aqu\u00ed tienes una respuesta de ejemplo.\", 'es', true, () => {\n sayText(questionObj.sampleAnswer, 'es', false, () => {\n \/\/ Proceed to the next question\n repeatAttempts = 0;\n currentQuestionIndex++;\n setTimeout(startLesson, 2000);\n });\n });\n }\n }\n }\n\n function addQuestionToBox(question, translation, sampleAnswer, sampleTranslation) {\n const wordBox = document.getElementById('word-box');\n const questionElement = document.createElement('div');\n questionElement.innerHTML = `<strong>P:<\/strong> '${question}' - '${translation}'<br><strong>R:<\/strong> '${sampleAnswer}' - '${sampleTranslation}'`;\n wordBox.appendChild(questionElement);\n wordBox.scrollTop = wordBox.scrollHeight;\n }\n\n function endLesson(userStopped = false) {\n lessonStarted = false;\n let message;\n if (userStopped) {\n message = \"\u00a1Gracias por participar! Espero que hayas disfrutado la lecci\u00f3n.\";\n } else {\n message = \"\u00a1Bien hecho! Has respondido todas las preguntas sobre gustos. \u00a1Sigue practicando!\";\n }\n appendMessage(message, \"bot\");\n sayText(message, \"es\", true);\n \/\/ Re-enable the start button and disable stop button\n startBtn.disabled = false;\n stopBtn.disabled = true;\n }\n\n function sayText(text, lang, preferFemale, callback) {\n if (!speechSynthesisSupported) return;\n const utterance = new SpeechSynthesisUtterance(text);\n utterance.lang = lang;\n\n \/\/ Adjust rate and pitch for Spanish to improve naturalness\n if (lang.startsWith('es')) {\n utterance.rate = 0.9; \/\/ Slightly slower\n utterance.pitch = 1.1; \/\/ Slightly higher pitch\n } else {\n utterance.rate = 1.0;\n utterance.pitch = 1.0;\n }\n\n \/\/ Use the selected voice if available\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 \/\/ Capitalize the first letter and ensure proper punctuation at the end\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 \/\/ Ensure question marks at the beginning and end if it's a question\n if (!formattedSentence.startsWith('\u00bf') && formattedSentence.endsWith('?')) {\n formattedSentence = '\u00bf' + formattedSentence;\n } else if (!formattedSentence.endsWith('.')) {\n formattedSentence += '.';\n }\n\n return formattedSentence;\n }\n\n function normalizeSentence(sentence) {\n \/\/ Remove punctuation and convert to lowercase for comparison\n return sentence.replace(\/[.,!?\u00bf\u00a1]\/g, '').toLowerCase().trim();\n }\n\n function normalizeNumbers(text) {\n \/\/ Map number words to digits (updated for possible number usage)\n const numberWords = {\n 'cero': 0,\n 'uno': 1,\n 'una': 1,\n 'dos': 2,\n 'tres': 3,\n 'cuatro': 4,\n 'cinco': 5,\n 'seis': 6,\n 'siete': 7,\n 'ocho': 8,\n 'nueve': 9,\n 'diez': 10\n \/\/ Add more numbers as needed\n };\n\n \/\/ Regular expression to match numbers in words\n const numberPattern = new RegExp('\\\\b(' + Object.keys(numberWords).join('|') + ')\\\\b', 'gi');\n\n text = text.replace(numberPattern, function(match) {\n match = match.toLowerCase();\n if (numberWords[match] !== undefined) {\n return numberWords[match].toString();\n }\n return match;\n });\n\n return text;\n }\n\n <\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>Spanish – daily conversations? Do you like? Do you have? Can you? Simple conversations Daily Conversations Family See the questions and answers in this box Choose Spanish Voice: Loading voices… Spanish – daily conversations? Start Lesson Stop<\/p>\n","protected":false},"author":1,"featured_media":1396,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[38,42,34,33],"tags":[],"class_list":["post-1779","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-activities","category-interaction","category-robots","category-spanish"],"featured_image_src":"https:\/\/phamho.com\/book\/wp-content\/uploads\/2024\/06\/DALL\u00b7E-2024-06-09-12.04.15-A-group-of-secondary-school-girls-and-boys-talking-in-a-school-hallway.-The-students-are-wearing-school-uniforms-with-girls-in-skirts-and-boys-in-tro-1024x585.webp","blog_images":{"medium":"https:\/\/phamho.com\/book\/wp-content\/uploads\/2024\/06\/DALL\u00b7E-2024-06-09-12.04.15-A-group-of-secondary-school-girls-and-boys-talking-in-a-school-hallway.-The-students-are-wearing-school-uniforms-with-girls-in-skirts-and-boys-in-tro-300x171.webp","large":"https:\/\/phamho.com\/book\/wp-content\/uploads\/2024\/06\/DALL\u00b7E-2024-06-09-12.04.15-A-group-of-secondary-school-girls-and-boys-talking-in-a-school-hallway.-The-students-are-wearing-school-uniforms-with-girls-in-skirts-and-boys-in-tro-1024x585.webp"},"ams_acf":[],"_links":{"self":[{"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/posts\/1779","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=1779"}],"version-history":[{"count":2,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/posts\/1779\/revisions"}],"predecessor-version":[{"id":1781,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/posts\/1779\/revisions\/1781"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/media\/1396"}],"wp:attachment":[{"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/media?parent=1779"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/categories?post=1779"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/tags?post=1779"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":1779,"date":"2024-10-01T14:27:14","date_gmt":"2024-10-01T14:27:14","guid":{"rendered":"https:\/\/phamho.com\/book\/?p=1779"},"modified":"2024-10-01T14:28:55","modified_gmt":"2024-10-01T14:28:55","slug":"spanish-daily-conversations","status":"publish","type":"post","link":"https:\/\/phamho.com\/book\/spanish-daily-conversations\/","title":{"rendered":"Spanish – Daily Conversations"},"content":{"rendered":"\n\n\n\n \n Spanish – daily conversations?<\/title>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> \n <style>\n \/* Base Styles *\/\n body {\n font-family: Arial, sans-serif;\n background-color: #ffffff;\n margin: 0;\n padding: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 100vh; \/* Changed from fixed height to min-height for better responsiveness *\/\n flex-direction: column;\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 margin-bottom: 20px;\n overflow-x: auto; \/* Allows horizontal scrolling if menu items exceed screen width *\/\n white-space: nowrap;\n }\n .menu a {\n color: #fff;\n text-decoration: none;\n margin: 0 10px; \/* Reduced margin for better spacing on smaller screens *\/\n font-weight: bold;\n font-size: 16px; \/* Increased font size for readability on mobile *\/\n display: inline-block;\n padding: 8px 12px; \/* Added padding for larger touch targets *\/\n }\n .menu a:hover {\n text-decoration: underline;\n }\n .container {\n display: flex;\n flex-direction: column; \/* Stack elements vertically on mobile *\/\n align-items: center;\n width: 90%; \/* Use percentage for better responsiveness *\/\n max-width: 800px; \/* Limit maximum width for larger screens *\/\n }\n .image-container {\n text-align: center;\n margin-bottom: 20px;\n }\n .image-container img {\n width: 100%; \/* Ensure image scales with container *\/\n height: auto;\n border-radius: 20px;\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n object-fit: cover; \/* Ensures the image covers the container without distortion *\/\n }\n .sentence-text {\n margin: 10px 0;\n font-weight: bold;\n color: #333;\n font-size: 18px; \/* Increased font size for better visibility *\/\n text-align: center; \/* Center align text on mobile *\/\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: 16px; \/* Adjusted font size for readability *\/\n font-weight: bold;\n color: #026c96;\n text-align: left;\n max-height: 300px;\n overflow-y: auto;\n width: 100%; \/* Ensure it takes full width of the container *\/\n }\n .voice-selection {\n margin-top: 20px;\n width: 100%;\n text-align: center;\n }\n .voice-selection label {\n display: block;\n margin-bottom: 8px;\n font-size: 16px;\n color: #333;\n }\n .voice-selection select {\n width: 80%;\n max-width: 400px;\n padding: 8px 12px;\n font-size: 16px;\n border: 2px solid #026c96;\n border-radius: 5px;\n background-color: #ffffff;\n color: #026c96;\n cursor: pointer;\n box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);\n }\n .voice-selection select:focus {\n outline: none;\n border-color: #d97b0f;\n box-shadow: 0 0 5px rgba(217, 123, 15, 0.5);\n }\n\n .chat-container {\n width: 100%; \/* Full width on mobile *\/\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: 15px; \/* Increased padding for touch areas *\/\n text-align: center;\n border-bottom: 1px solid #69010a;\n }\n .chat-header h2 {\n margin: 0;\n font-size: 20px; \/* Increased font size for better readability *\/\n }\n .chat-messages {\n padding: 15px;\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: 16px; \/* Adjusted font size for readability *\/\n line-height: 1.5;\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 flex-direction: column; \/* Stack buttons vertically on smaller screens *\/\n align-items: stretch;\n background-color: #a3e106;\n padding: 10px;\n }\n .chat-input button {\n background-color: #17c686;\n color: #fff;\n font-weight: bold;\n border: none;\n border-radius: 5px;\n padding: 12px 20px;\n cursor: pointer;\n transition: background-color 0.3s;\n margin: 5px 0; \/* Vertical spacing between buttons *\/\n font-size: 16px; \/* Increased font size for touch readability *\/\n }\n .chat-input .stop-button {\n background-color: #c86722;\n }\n .chat-input button:hover {\n opacity: 0.9; \/* Subtle feedback on hover *\/\n }\n\n \/* Responsive Adjustments *\/\n @media (min-width: 600px) {\n .container {\n flex-direction: row; \/* Side-by-side layout *\/\n justify-content: center;\n align-items: flex-start;\n }\n .image-container {\n width: 50%;\n margin-right: 20px;\n }\n .chat-container {\n width: 50%;\n }\n .chat-input {\n flex-direction: row; \/* Horizontal layout for buttons *\/\n justify-content: space-between;\n }\n .chat-input button {\n margin: 0 5px; \/* Horizontal spacing *\/\n flex: 1; \/* Equal width buttons *\/\n }\n .voice-selection select {\n width: 60%;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"menu\">\n <a href=\"https:\/\/phamho.com\/book\/2024\/09\/30\/spanish-do-you-like\/\">Do you like?<\/a>\n <a href=\"https:\/\/phamho.com\/book\/2024\/10\/01\/spanish-do-you-have\/\">Do you have?<\/a>\n <a href=\"https:\/\/phamho.com\/book\/2024\/10\/01\/spanish-can-you\/\">Can you?<\/a>\n <a href=\"https:\/\/phamho.com\/book\/2024\/10\/01\/spanish-simple-conversations\/\">Simple conversations<\/a> \n <a href=\"https:\/\/phamho.com\/book\/2024\/10\/01\/spanish-daily-conversations\/\">Daily Conversations<\/a> \n <a href=\"https:\/\/phamho.com\/book\/2024\/09\/30\/spanish-family\/\">Family<\/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\/08\/8d7efe04-a355-4214-a6cb-48d660b80124.webp\" alt=\"Lesson Robot\">\n <div class=\"sentence-text\">See the questions and answers in this box<\/div>\n <div id=\"word-box\" class=\"word-box\">\n \n <\/div>\n \n <div class=\"voice-selection\">\n <label for=\"voice-select\"><strong>Choose Spanish Voice:<\/strong><\/label>\n <select id=\"voice-select\">\n <option value=\"\">Loading voices…<\/option>\n <\/select>\n <\/div>\n <\/div>\n <div class=\"chat-container\">\n <div class=\"chat-header\"> \n <h2>Spanish – daily conversations?<\/h2>\n <\/div>\n <div class=\"chat-messages\" id=\"chat-messages\">\n \n <\/div>\n <div class=\"chat-input\">\n <button id=\"start-btn\" class=\"send-button\">Start Lesson<\/button>\n <button id=\"stop-btn\" class=\"stop-button\" disabled>Stop<\/button>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n \/\/ Feature detection for Speech Recognition\n const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;\n const isSpeechRecognitionSupported = SpeechRecognition !== undefined;\n let recognition;\n if (isSpeechRecognitionSupported) {\n recognition = new SpeechRecognition();\n recognition.lang = 'es-ES';\n recognition.interimResults = false;\n recognition.maxAlternatives = 1;\n } else {\n alert('Your browser does not support speech recognition. Please use a compatible browser like Firefox for Android.');\n }\n\n \/\/ Check for Speech Synthesis support\n const speechSynthesisSupported = 'speechSynthesis' in window;\n\n \/\/ Updated Questions data focusing on likes and dislikes\n const questions = [\n {\n question: \"\u00bfTe gusta leer?\",\n translation: \"Do you like reading?\",\n keywords: [\"me gusta\", \"leer\"],\n sampleAnswer: \"S\u00ed, me gusta leer.\",\n sampleTranslation: \"Yes, I like reading.\"\n},\n{\n question: \"\u00bfPrefieres t\u00e9 o caf\u00e9?\",\n translation: \"Do you prefer tea or coffee?\",\n keywords: [\"prefiero\", \"t\u00e9\", \"caf\u00e9\"],\n sampleAnswer: \"Prefiero el caf\u00e9.\",\n sampleTranslation: \"I prefer coffee.\"\n},\n{\n question: \"\u00bfHace buen tiempo hoy?\",\n translation: \"Is the weather nice today?\",\n keywords: [\"hace buen tiempo\", \"hoy\"],\n sampleAnswer: \"S\u00ed, hace buen tiempo hoy.\",\n sampleTranslation: \"Yes, the weather is nice today.\"\n},\n{\n question: \"\u00bfTienes hermanos?\",\n translation: \"Do you have siblings?\",\n keywords: [\"tengo hermanos\"],\n sampleAnswer: \"S\u00ed, tengo dos hermanos.\",\n sampleTranslation: \"Yes, I have two siblings.\"\n},\n{\n question: \"\u00bfTrabajas o estudias?\",\n translation: \"Do you work or study?\",\n keywords: [\"trabajo\", \"estudio\"],\n sampleAnswer: \"Estudio en la universidad.\",\n sampleTranslation: \"I study at the university.\"\n},\n{\n question: \"\u00bfQu\u00e9 haces los fines de semana?\",\n translation: \"What do you do on weekends?\",\n keywords: [\"fines de semana\", \"hago\"],\n sampleAnswer: \"Me gusta salir con amigos.\",\n sampleTranslation: \"I like going out with friends.\"\n},\n{\n question: \"\u00bfCu\u00e1l es tu color favorito?\",\n translation: \"What is your favorite color?\",\n keywords: [\"color favorito\"],\n sampleAnswer: \"Mi color favorito es azul.\",\n sampleTranslation: \"My favorite color is blue.\"\n},\n{\n question: \"\u00bfTienes mascotas?\",\n translation: \"Do you have pets?\",\n keywords: [\"tengo mascotas\"],\n sampleAnswer: \"S\u00ed, tengo un perro.\",\n sampleTranslation: \"Yes, I have a dog.\"\n},\n{\n question: \"\u00bfTe gusta la m\u00fasica?\",\n translation: \"Do you like music?\",\n keywords: [\"me gusta\", \"m\u00fasica\"],\n sampleAnswer: \"S\u00ed, me encanta la m\u00fasica.\",\n sampleTranslation: \"Yes, I love music.\"\n},\n{\n question: \"\u00bfTe gustan las pel\u00edculas?\",\n translation: \"Do you like movies?\",\n keywords: [\"me gustan\", \"pel\u00edculas\"],\n sampleAnswer: \"S\u00ed, me gustan las pel\u00edculas de acci\u00f3n.\",\n sampleTranslation: \"Yes, I like action movies.\"\n},\n{\n question: \"\u00bfPracticas alg\u00fan deporte?\",\n translation: \"Do you play any sports?\",\n keywords: [\"practico\", \"deporte\"],\n sampleAnswer: \"S\u00ed, practico f\u00fatbol.\",\n sampleTranslation: \"Yes, I play soccer.\"\n},\n{\n question: \"\u00bfLees libros?\",\n translation: \"Do you read books?\",\n keywords: [\"leo\", \"libros\"],\n sampleAnswer: \"S\u00ed, leo novelas.\",\n sampleTranslation: \"Yes, I read novels.\"\n},\n{\n question: \"\u00bfTe gusta cocinar?\",\n translation: \"Do you like cooking?\",\n keywords: [\"me gusta\", \"cocinar\"],\n sampleAnswer: \"S\u00ed, me gusta cocinar platos italianos.\",\n sampleTranslation: \"Yes, I like cooking Italian dishes.\"\n},\n{\n question: \"\u00bfTe gusta viajar?\",\n translation: \"Do you like traveling?\",\n keywords: [\"me gusta\", \"viajar\"],\n sampleAnswer: \"S\u00ed, me gusta viajar a diferentes pa\u00edses.\",\n sampleTranslation: \"Yes, I like traveling to different countries.\"\n},\n{\n question: \"\u00bfTe gusta usar la computadora?\",\n translation: \"Do you like using the computer?\",\n keywords: [\"me gusta\", \"usar\", \"computadora\"],\n sampleAnswer: \"S\u00ed, me gusta usar la computadora para trabajar.\",\n sampleTranslation: \"Yes, I like using the computer for work.\"\n},\n{\n question: \"\u00bfTe gusta ir de compras?\",\n translation: \"Do you like shopping?\",\n keywords: [\"me gusta\", \"ir de compras\"],\n sampleAnswer: \"S\u00ed, me gusta ir de compras los s\u00e1bados.\",\n sampleTranslation: \"Yes, I like shopping on Saturdays.\"\n},\n{\n question: \"\u00bfTienes muchos amigos?\",\n translation: \"Do you have many friends?\",\n keywords: [\"tengo\", \"muchos amigos\"],\n sampleAnswer: \"S\u00ed, tengo muchos amigos en la universidad.\",\n sampleTranslation: \"Yes, I have many friends at university.\"\n},\n{\n question: \"\u00bfCu\u00e1l es tu comida favorita?\",\n translation: \"What is your favorite food?\",\n keywords: [\"comida favorita\"],\n sampleAnswer: \"Mi comida favorita es la pizza.\",\n sampleTranslation: \"My favorite food is pizza.\"\n},\n{\n question: \"\u00bfTe levantas temprano?\",\n translation: \"Do you get up early?\",\n keywords: [\"me levanto temprano\"],\n sampleAnswer: \"S\u00ed, me levanto temprano todos los d\u00edas.\",\n sampleTranslation: \"Yes, I get up early every day.\"\n},\n{\n question: \"\u00bfHablas otros idiomas?\",\n translation: \"Do you speak other languages?\",\n keywords: [\"hablo\", \"otros idiomas\"],\n sampleAnswer: \"S\u00ed, hablo ingl\u00e9s y franc\u00e9s.\",\n sampleTranslation: \"Yes, I speak English and French.\"\n}\n \n ];\n\n let currentQuestionIndex = 0;\n let repeatAttempts = 0;\n const stopKeywords = [\"adi\u00f3s\", \"chao\", \"bye\", \"bye bye\", \"goodbye\", \"stop\"];\n let lessonStarted = false;\n let voicesLoaded = false;\n let selectedVoice = null; \/\/ To store the user's selected voice\n\n \/\/ DOM Elements\n const voiceSelect = document.getElementById('voice-select');\n const startBtn = document.getElementById('start-btn');\n const stopBtn = document.getElementById('stop-btn');\n\n window.addEventListener('load', function() {\n if (speechSynthesisSupported) {\n loadVoices();\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\n function loadVoices() {\n const voices = window.speechSynthesis.getVoices();\n\n if (voices.length !== 0) {\n populateVoiceList();\n } else {\n \/\/ Some browsers load voices asynchronously\n window.speechSynthesis.onvoiceschanged = populateVoiceList;\n }\n }\n\n function populateVoiceList() {\n const voices = window.speechSynthesis.getVoices().filter(voice => voice.lang.startsWith('es'));\n\n \/\/ Define preferred native Spanish voice names\n const preferredSpanishVoiceNames = [\n 'Google espa\u00f1ol', \/\/ Common in Chrome\n 'Microsoft Helena - Spanish (Spain)', \/\/ Common in Windows\n 'Microsoft Sabina - Spanish (Mexico)', \/\/ Common in Windows\n 'Apple Mar\u00eda', \/\/ Common in macOS\n 'Apple Satu' \/\/ Another common in macOS\n ];\n\n \/\/ Filter voices to include only preferred native voices\n let nativeSpanishVoices = voices.filter(voice => preferredSpanishVoiceNames.includes(voice.name));\n\n \/\/ If fewer than 5 native voices are found, fill the remaining slots with other Spanish voices\n if (nativeSpanishVoices.length < 5) {\n const additionalVoices = voices.filter(voice => !preferredSpanishVoiceNames.includes(voice.name));\n nativeSpanishVoices = nativeSpanishVoices.concat(additionalVoices.slice(0, 5 - nativeSpanishVoices.length));\n }\n\n \/\/ Limit to 5 voices\n nativeSpanishVoices = nativeSpanishVoices.slice(0, 5);\n\n voiceSelect.innerHTML = ''; \/\/ Clear existing options\n\n if (nativeSpanishVoices.length === 0) {\n \/\/ If no native voices are found, inform the user\n voiceSelect.innerHTML = '<option value=\"\">No native Spanish voices available<\/option>';\n selectedVoice = null;\n greetUser();\n return;\n }\n\n nativeSpanishVoices.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 default voice if available\n if (nativeSpanishVoices.length > 0) {\n selectedVoice = nativeSpanishVoices[0];\n voiceSelect.value = '0';\n greetUser();\n } else {\n greetUser();\n }\n\n console.log('Available native Spanish voices:', nativeSpanishVoices.map(v => v.name).join(', '));\n }\n\n \/\/ Handle voice selection\n voiceSelect.addEventListener('change', function() {\n const selectedIndex = parseInt(this.value, 10);\n const voices = window.speechSynthesis.getVoices().filter(voice => voice.lang.startsWith('es'));\n\n \/\/ Define preferred native Spanish voice names\n const preferredSpanishVoiceNames = [\n 'Google espa\u00f1ol', \/\/ Common in Chrome\n 'Microsoft Helena - Spanish (Spain)', \/\/ Common in Windows\n 'Microsoft Sabina - Spanish (Mexico)', \/\/ Common in Windows\n 'Apple Mar\u00eda', \/\/ Common in macOS\n 'Apple Satu' \/\/ Another common in macOS\n ];\n\n \/\/ Filter voices to include only preferred native voices\n let nativeSpanishVoices = voices.filter(voice => preferredSpanishVoiceNames.includes(voice.name));\n\n \/\/ If fewer than 5 native voices are found, fill the remaining slots with other Spanish voices\n if (nativeSpanishVoices.length < 5) {\n const additionalVoices = voices.filter(voice => !preferredSpanishVoiceNames.includes(voice.name));\n nativeSpanishVoices = nativeSpanishVoices.concat(additionalVoices.slice(0, 5 - nativeSpanishVoices.length));\n }\n\n \/\/ Limit to 5 voices\n nativeSpanishVoices = nativeSpanishVoices.slice(0, 5);\n\n if (nativeSpanishVoices[selectedIndex]) {\n selectedVoice = nativeSpanishVoices[selectedIndex];\n console.log(`Selected voice: ${selectedVoice.name}`);\n } else {\n selectedVoice = null;\n }\n });\n\n function greetUser() {\n const greeting = \"\u00a1Bienvenido! En esta lecci\u00f3n, te har\u00e9 20 preguntas sencillas en espa\u00f1ol. Haz clic en 'Start Lesson' para empezar.\";\n appendMessage(greeting, 'bot');\n sayText(greeting, 'es', true);\n }\n\n startBtn.addEventListener('click', function() {\n if (!isSpeechRecognitionSupported) {\n alert('Speech recognition is not supported in your browser. The lesson cannot proceed.');\n return;\n }\n if (lessonStarted) {\n alert('La lecci\u00f3n ya ha comenzado.');\n return;\n }\n currentQuestionIndex = 0;\n repeatAttempts = 0;\n lessonStarted = true;\n startLesson();\n \/\/ Disable the start button to prevent multiple starts\n startBtn.disabled = true;\n stopBtn.disabled = false;\n });\n\n stopBtn.addEventListener('click', function() {\n endLesson(true); \/\/ User stopped the lesson\n \/\/ Re-enable the start button\n startBtn.disabled = false;\n this.disabled = true;\n });\n\n function startLesson() {\n if (currentQuestionIndex < questions.length) {\n const questionObj = questions[currentQuestionIndex];\n const formattedQuestion = formatSentence(questionObj.question);\n\n appendMessage(`Pregunta: '${formattedQuestion}'`, 'bot');\n addQuestionToBox(formattedQuestion, questionObj.translation, questionObj.sampleAnswer, questionObj.sampleTranslation);\n\n \/\/ Say the question in Spanish twice\n sayText(formattedQuestion, \"es\", false, function() {\n sayText(formattedQuestion, \"es\", false, function() {\n \/\/ Prompt user to answer\n listenUserResponse(questionObj);\n });\n });\n } else {\n endLesson();\n }\n }\n\n function listenUserResponse(questionObj) {\n recognition.start();\n appendMessage(\"Escuchando tu respuesta...\", 'bot'); \/\/ Inform the user that listening has started\n\n recognition.onresult = function(event) {\n let userInput = event.results[0][0].transcript.trim();\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 processUserResponse(userInput, questionObj);\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 se detect\u00f3 habla. Por favor, intenta de nuevo.';\n break;\n case 'audio-capture':\n errorMessage = 'Acceso al micr\u00f3fono denegado. Por favor, verifica tus configuraciones.';\n break;\n case 'not-allowed':\n errorMessage = 'Permiso para usar el micr\u00f3fono denegado.';\n break;\n default:\n errorMessage = 'Ocurri\u00f3 un error: ' + event.error;\n }\n appendMessage(errorMessage, 'bot');\n sayText(errorMessage, 'es', true);\n };\n }\n\n function processUserResponse(userInput, questionObj) {\n \/\/ Normalize user's response\n let normalizedUserInput = normalizeSentence(userInput);\n normalizedUserInput = normalizeNumbers(normalizedUserInput);\n\n \/\/ Normalize keywords\n let normalizedKeywords = questionObj.keywords.map(keyword => normalizeNumbers(normalizeSentence(keyword)));\n\n \/\/ Check for keywords in the user's response\n let keywordsFound = normalizedKeywords.filter(keyword => normalizedUserInput.includes(keyword));\n\n if (keywordsFound.length === normalizedKeywords.length) {\n const positiveMessage = \"\u00a1Excelente! Tu respuesta es muy buena.\";\n appendMessage(positiveMessage, 'bot');\n sayText(positiveMessage, 'es', true);\n repeatAttempts = 0; \/\/ Reset attempts counter\n currentQuestionIndex++;\n setTimeout(startLesson, 2000); \/\/ Move to next question after 2 seconds\n } else {\n repeatAttempts++;\n if (repeatAttempts < 2) {\n const missingKeywords = questionObj.keywords.filter((keyword, index) => !normalizedUserInput.includes(normalizedKeywords[index]));\n const correctionMessage = `No escuch\u00e9 las palabras: ${missingKeywords.join(', ')}. Por favor, intenta de nuevo.`;\n appendMessage(correctionMessage, 'bot');\n sayText(correctionMessage, 'es', true);\n setTimeout(() => listenUserResponse(questionObj), 2000); \/\/ Give the user another chance\n } else {\n \/\/ Provide sample answer\n const sampleAnswerMessage = `No te preocupes. Aqu\u00ed tienes una respuesta de ejemplo: '${questionObj.sampleAnswer}'.`;\n appendMessage(sampleAnswerMessage, 'bot');\n sayText(\"No te preocupes. Aqu\u00ed tienes una respuesta de ejemplo.\", 'es', true, () => {\n sayText(questionObj.sampleAnswer, 'es', false, () => {\n \/\/ Proceed to the next question\n repeatAttempts = 0;\n currentQuestionIndex++;\n setTimeout(startLesson, 2000);\n });\n });\n }\n }\n }\n\n function addQuestionToBox(question, translation, sampleAnswer, sampleTranslation) {\n const wordBox = document.getElementById('word-box');\n const questionElement = document.createElement('div');\n questionElement.innerHTML = `<strong>P:<\/strong> '${question}' - '${translation}'<br><strong>R:<\/strong> '${sampleAnswer}' - '${sampleTranslation}'`;\n wordBox.appendChild(questionElement);\n wordBox.scrollTop = wordBox.scrollHeight;\n }\n\n function endLesson(userStopped = false) {\n lessonStarted = false;\n let message;\n if (userStopped) {\n message = \"\u00a1Gracias por participar! Espero que hayas disfrutado la lecci\u00f3n.\";\n } else {\n message = \"\u00a1Bien hecho! Has respondido todas las preguntas sobre gustos. \u00a1Sigue practicando!\";\n }\n appendMessage(message, \"bot\");\n sayText(message, \"es\", true);\n \/\/ Re-enable the start button and disable stop button\n startBtn.disabled = false;\n stopBtn.disabled = true;\n }\n\n function sayText(text, lang, preferFemale, callback) {\n if (!speechSynthesisSupported) return;\n const utterance = new SpeechSynthesisUtterance(text);\n utterance.lang = lang;\n\n \/\/ Adjust rate and pitch for Spanish to improve naturalness\n if (lang.startsWith('es')) {\n utterance.rate = 0.9; \/\/ Slightly slower\n utterance.pitch = 1.1; \/\/ Slightly higher pitch\n } else {\n utterance.rate = 1.0;\n utterance.pitch = 1.0;\n }\n\n \/\/ Use the selected voice if available\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 \/\/ Capitalize the first letter and ensure proper punctuation at the end\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 \/\/ Ensure question marks at the beginning and end if it's a question\n if (!formattedSentence.startsWith('\u00bf') && formattedSentence.endsWith('?')) {\n formattedSentence = '\u00bf' + formattedSentence;\n } else if (!formattedSentence.endsWith('.')) {\n formattedSentence += '.';\n }\n\n return formattedSentence;\n }\n\n function normalizeSentence(sentence) {\n \/\/ Remove punctuation and convert to lowercase for comparison\n return sentence.replace(\/[.,!?\u00bf\u00a1]\/g, '').toLowerCase().trim();\n }\n\n function normalizeNumbers(text) {\n \/\/ Map number words to digits (updated for possible number usage)\n const numberWords = {\n 'cero': 0,\n 'uno': 1,\n 'una': 1,\n 'dos': 2,\n 'tres': 3,\n 'cuatro': 4,\n 'cinco': 5,\n 'seis': 6,\n 'siete': 7,\n 'ocho': 8,\n 'nueve': 9,\n 'diez': 10\n \/\/ Add more numbers as needed\n };\n\n \/\/ Regular expression to match numbers in words\n const numberPattern = new RegExp('\\\\b(' + Object.keys(numberWords).join('|') + ')\\\\b', 'gi');\n\n text = text.replace(numberPattern, function(match) {\n match = match.toLowerCase();\n if (numberWords[match] !== undefined) {\n return numberWords[match].toString();\n }\n return match;\n });\n\n return text;\n }\n\n <\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>Spanish – daily conversations? Do you like? Do you have? Can you? Simple conversations Daily Conversations Family See the questions and answers in this box Choose Spanish Voice: Loading voices… Spanish – daily conversations? Start Lesson Stop<\/p>\n","protected":false},"author":1,"featured_media":1396,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[38,42,34,33],"tags":[],"class_list":["post-1779","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-activities","category-interaction","category-robots","category-spanish"],"featured_image_src":"https:\/\/phamho.com\/book\/wp-content\/uploads\/2024\/06\/DALL\u00b7E-2024-06-09-12.04.15-A-group-of-secondary-school-girls-and-boys-talking-in-a-school-hallway.-The-students-are-wearing-school-uniforms-with-girls-in-skirts-and-boys-in-tro-1024x585.webp","blog_images":{"medium":"https:\/\/phamho.com\/book\/wp-content\/uploads\/2024\/06\/DALL\u00b7E-2024-06-09-12.04.15-A-group-of-secondary-school-girls-and-boys-talking-in-a-school-hallway.-The-students-are-wearing-school-uniforms-with-girls-in-skirts-and-boys-in-tro-300x171.webp","large":"https:\/\/phamho.com\/book\/wp-content\/uploads\/2024\/06\/DALL\u00b7E-2024-06-09-12.04.15-A-group-of-secondary-school-girls-and-boys-talking-in-a-school-hallway.-The-students-are-wearing-school-uniforms-with-girls-in-skirts-and-boys-in-tro-1024x585.webp"},"ams_acf":[],"_links":{"self":[{"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/posts\/1779","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=1779"}],"version-history":[{"count":2,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/posts\/1779\/revisions"}],"predecessor-version":[{"id":1781,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/posts\/1779\/revisions\/1781"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/media\/1396"}],"wp:attachment":[{"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/media?parent=1779"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/categories?post=1779"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/tags?post=1779"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}