Spanish 4 – Numbers & Dates<\/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 justify-content: center;\n align-items: center;\n height: 100vh;\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 }\n .menu a {\n color: #fff;\n text-decoration: none;\n margin: 0 15px;\n font-weight: bold;\n }\n .menu a:hover {\n text-decoration: underline;\n }\n .container {\n display: flex;\n align-items: flex-start;\n }\n .image-container {\n margin-right: 20px;\n text-align: center;\n }\n .image-container img {\n max-width: 300px;\n height: auto;\n border-radius: 20px;\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n }\n .word-box {\n margin-top: 20px;\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 max-width: 400px;\n background-color: #026c96;\n border-radius: 20px;\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n overflow: hidden;\n }\n .chat-header {\n background-color: #d97b0f;\n color: #fff;\n padding: 10px;\n text-align: center;\n border-bottom: 1px solid #69010a;\n }\n .chat-messages {\n padding: 10px;\n overflow-y: auto;\n max-height: 300px;\n }\n .message {\n margin-bottom: 10px;\n padding: 10px;\n border-radius: 5px;\n }\n .user-message {\n background-color: #4caf50;\n color: #fff;\n text-align: right;\n }\n .bot-message {\n background-color: #2196f3;\n color: #080900;\n text-align: left;\n }\n .chat-input {\n display: flex;\n align-items: center;\n background-color: #a3e106;\n padding: 10px;\n justify-content: space-between;\n }\n .send-button {\n background-color: #17c686;\n color: #fff;\n font-weight: bold;\n border: none;\n border-radius: 5px;\n padding: 8px 15px;\n cursor: pointer;\n transition: background-color 0.3s;\n }\n .talk-button {\n background-color: #c86722;\n color: #fff;\n border: none;\n font-weight: bold;\n border-radius: 5px;\n padding: 8px 15px;\n cursor: pointer;\n transition: background-color 0.3s;\n }\n .send-button:hover,\n .talk-button:hover {\n background-color: #45a049;\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"menu\">\n <a href=\"https:\/\/phamho.com\/book\/category\/spanish\/\">Lesson 1<\/a>\n <a href=\"https:\/\/phamho.com\/book\/2024\/08\/11\/learn-spanish-2\/\">Lesson 2<\/a>\n <a href=\"https:\/\/phamho.com\/book\/2024\/09\/01\/spanish-3\/\">Lesson 3<\/a>\n <a href=\"https:\/\/phamho.com\/book\/2024\/09\/01\/spanish-4\/\">Lesson 4<\/a>\n <a href=\"https:\/\/phamho.com\/book\/2024\/09\/01\/spanish-5\/\">Lesson 5<\/a>\n <a href=\"https:\/\/phamho.com\/book\/2024\/09\/01\/spanish-6\/\">Lesson 6<\/a>\n<a href=\"https:\/\/phamho.com\/book\/2024\/09\/01\/spanish-7\/\">Lesson 7<\/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\/06\/DALL\u00b7E-2024-06-09-11.32.53-A-6-year-old-girl-talking-to-a-7-year-old-boy-in-a-bright-and-cheerful-classroom.-The-girl-has-long-brown-hair-and-is-wearing-a-pink-dress-while-the-.webp\" alt=\"Spanish Lesson Robot\">\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 4 – Numbers & Dates<\/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=\"talk-button\">Stop<\/button>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n const phrases = [\n { english: \"One\", spanish: \"Uno\" },\n { english: \"Two\", spanish: \"Dos\" },\n { english: \"Three\", spanish: \"Tres\" },\n { english: \"Four\", spanish: \"Cuatro\" },\n { english: \"Five\", spanish: \"Cinco\" },\n { english: \"Six\", spanish: \"Seis\" },\n { english: \"Seven\", spanish: \"Siete\" },\n { english: \"Eight\", spanish: \"Ocho\" },\n { english: \"Nine\", spanish: \"Nueve\" },\n { english: \"Ten\", spanish: \"Diez\" },\n { english: \"Eleven\", spanish: \"Once\" },\n { english: \"Twelve\", spanish: \"Doce\" },\n { english: \"Thirteen\", spanish: \"Trece\" },\n { english: \"Fourteen\", spanish: \"Catorce\" },\n { english: \"Fifteen\", spanish: \"Quince\" },\n { english: \"Sixteen\", spanish: \"Diecis\u00e9is\" },\n { english: \"Seventeen\", spanish: \"Diecisiete\" },\n { english: \"Eighteen\", spanish: \"Dieciocho\" },\n { english: \"Nineteen\", spanish: \"Diecinueve\" },\n { english: \"Twenty\", spanish: \"Veinte\" },\n \n { english: \"Today\", spanish: \"Hoy\" },\n { english: \"Tomorrow\", spanish: \"Ma\u00f1ana\" },\n { english: \"Yesterday\", spanish: \"Ayer\" },\n { english: \"Week\", spanish: \"Semana\" },\n { english: \"Month\", spanish: \"Mes\" },\n { english: \"Year\", spanish: \"A\u00f1o\" },\n { english: \"Monday\", spanish: \"Lunes\" },\n { english: \"Tuesday\", spanish: \"Martes\" },\n { english: \"Wednesday\", spanish: \"Mi\u00e9rcoles\" },\n { english: \"Thursday\", spanish: \"Jueves\" },\n { english: \"Friday\", spanish: \"Viernes\" },\n { english: \"Saturday\", spanish: \"S\u00e1bado\" },\n { english: \"Sunday\", spanish: \"Domingo\" },\n ];\n\n const positiveFeedback = [\n { english: \"Correct!\", spanish: \"\u00a1Correcto!\" },\n { english: \"Well done!\", spanish: \"\u00a1Muy bien!\" },\n { english: \"Perfect!\", spanish: \"\u00a1Perfecto!\" }\n ];\n\n let currentPhraseIndex = 0;\n let recognition;\n let correctionCount = 0;\n\n window.onload = function() {\n greetUser();\n };\n\n function greetUser() {\n const greetingEnglish = \"Hello! Welcome to the Spanish learning session. Click Start Lesson to learn Spanish\";\n const greetingSpanish = \"\u00a1Hola! Bienvenido a la sesi\u00f3n de aprendizaje de espa\u00f1ol.\";\n appendMessage(greetingEnglish, 'bot');\n sayText(greetingEnglish, \"en-US\");\n setTimeout(() => {\n appendMessage(greetingSpanish, 'bot');\n sayText(greetingSpanish, \"es-ES\");\n }, 3000);\n }\n\n document.getElementById('start-btn').onclick = function() {\n currentPhraseIndex = 0;\n startLesson();\n };\n\n document.getElementById('stop-btn').onclick = function() {\n if (recognition) {\n recognition.stop();\n }\n sayGoodbye();\n };\n\n function startLesson() {\n correctionCount = 0; \/\/ Reset correction count for each new phrase\n continueLesson();\n }\n\n function continueLesson() {\n if (currentPhraseIndex < phrases.length) {\n const phrase = phrases[currentPhraseIndex];\n const explanation = `The Spanish word for '${phrase.english}' is... ${phrase.spanish}`;\n appendMessage(explanation, 'bot');\n addWordToBox(phrase.spanish); \/\/ Add the current Spanish word to the word box\n sayText(`The Spanish word for '${phrase.english}' is`, \"en-US\");\n setTimeout(() => sayText(phrase.spanish, \"es-ES\"), 1000);\n setTimeout(() => sayText(phrase.spanish, \"es-ES\"), 3000);\n setTimeout(() => listenUserResponse(phrase.spanish), 5000);\n } else {\n sayGoodbye();\n }\n }\n\n function listenUserResponse(expectedResponse) {\n recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();\n recognition.lang = 'es-ES';\n recognition.interimResults = false;\n recognition.maxAlternatives = 1;\n\n recognition.start();\n\n recognition.onresult = function(event) {\n const userInput = event.results[0][0].transcript.toLowerCase();\n appendMessage(`Dijiste: ${userInput}`, 'user');\n\n if (userInput === expectedResponse.toLowerCase()) {\n const feedback = positiveFeedback[currentPhraseIndex % positiveFeedback.length];\n sayText(feedback.english, 'en-US');\n sayText(feedback.spanish, 'es-ES');\n appendMessage(feedback.english + \" \" + feedback.spanish, 'bot');\n currentPhraseIndex++;\n setTimeout(startLesson, 1000);\n } else if (userInput === \"adi\u00f3s\" || userInput === \"bye\" || userInput === \"bye bye\") {\n recognition.stop();\n sayGoodbye();\n } else {\n correctionCount++;\n if (correctionCount < 3) {\n const correctionMessageEnglish = `You are not correct. The pronunciation is...`;\n sayText(correctionMessageEnglish, \"en-US\");\n appendMessage(correctionMessageEnglish, 'bot');\n setTimeout(() => sayText(expectedResponse, 'es-ES'), 1000);\n setTimeout(() => listenUserResponse(expectedResponse), 2000);\n } else {\n appendMessage(`Let's move on to the next phrase.`, 'bot');\n sayText(\"Let's move on to the next phrase.\", \"en-US\");\n sayText(\"Pasemos a la siguiente frase.\", \"es-ES\");\n currentPhraseIndex++;\n setTimeout(startLesson, 1000);\n }\n }\n };\n\n recognition.onspeechend = function() {\n recognition.stop();\n };\n\n recognition.onerror = function(event) {\n appendMessage('Ocurri\u00f3 un error en el reconocimiento: ' + event.error, 'bot');\n startLesson();\n };\n }\n\n function sayGoodbye() {\n const goodbyeMessageEnglish = \"Great job! You've completed the lesson. Goodbye and have a wonderful day!\";\n const goodbyeMessageSpanish = \"\u00a1Excelente trabajo! Has completado la lecci\u00f3n. \u00a1Adi\u00f3s y que tengas un maravilloso d\u00eda!\";\n sayText(goodbyeMessageEnglish, \"en-US\");\n sayText(goodbyeMessageSpanish, \"es-ES\");\n appendMessage(goodbyeMessageEnglish + \" \" + goodbyeMessageSpanish, 'bot');\n }\n\n function sayText(text, lang) {\n const utterance = new SpeechSynthesisUtterance(text);\n utterance.lang = lang;\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 addWordToBox(word) {\n const wordBox = document.getElementById('word-box');\n const wordElement = document.createElement('div');\n wordElement.innerText = word;\n wordBox.appendChild(wordElement);\n }\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Spanish 4 – Numbers & Dates Lesson 1 Lesson 2 Lesson 3 Lesson 4 Lesson 5 Lesson 6 Lesson 7 Spanish 4 – Numbers & Dates Start Lesson Stop<\/p>\n","protected":false},"author":1,"featured_media":1367,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[33],"tags":[],"class_list":["post-1454","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-spanish"],"featured_image_src":"https:\/\/phamho.com\/book\/wp-content\/uploads\/2024\/06\/DALL\u00b7E-2024-06-07-19.46.52-A-beautiful-woman-talking-to-a-friendly-humanoid-robot.-The-woman-has-a-warm-smile-long-brown-hair-and-is-dressed-in-casual-stylish-clothing.-She--1024x585.webp","blog_images":{"medium":"https:\/\/phamho.com\/book\/wp-content\/uploads\/2024\/06\/DALL\u00b7E-2024-06-07-19.46.52-A-beautiful-woman-talking-to-a-friendly-humanoid-robot.-The-woman-has-a-warm-smile-long-brown-hair-and-is-dressed-in-casual-stylish-clothing.-She--300x171.webp","large":"https:\/\/phamho.com\/book\/wp-content\/uploads\/2024\/06\/DALL\u00b7E-2024-06-07-19.46.52-A-beautiful-woman-talking-to-a-friendly-humanoid-robot.-The-woman-has-a-warm-smile-long-brown-hair-and-is-dressed-in-casual-stylish-clothing.-She--1024x585.webp"},"ams_acf":[],"_links":{"self":[{"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/posts\/1454","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=1454"}],"version-history":[{"count":4,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/posts\/1454\/revisions"}],"predecessor-version":[{"id":1482,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/posts\/1454\/revisions\/1482"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/media\/1367"}],"wp:attachment":[{"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/media?parent=1454"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/categories?post=1454"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/tags?post=1454"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":1454,"date":"2024-09-01T09:10:09","date_gmt":"2024-09-01T09:10:09","guid":{"rendered":"https:\/\/phamho.com\/book\/?p=1454"},"modified":"2024-09-01T14:44:46","modified_gmt":"2024-09-01T14:44:46","slug":"spanish-4","status":"publish","type":"post","link":"https:\/\/phamho.com\/book\/spanish-4\/","title":{"rendered":"Spanish 4"},"content":{"rendered":"\n\n\n\n \n \n Spanish 4 – Numbers & Dates<\/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 justify-content: center;\n align-items: center;\n height: 100vh;\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 }\n .menu a {\n color: #fff;\n text-decoration: none;\n margin: 0 15px;\n font-weight: bold;\n }\n .menu a:hover {\n text-decoration: underline;\n }\n .container {\n display: flex;\n align-items: flex-start;\n }\n .image-container {\n margin-right: 20px;\n text-align: center;\n }\n .image-container img {\n max-width: 300px;\n height: auto;\n border-radius: 20px;\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n }\n .word-box {\n margin-top: 20px;\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 max-width: 400px;\n background-color: #026c96;\n border-radius: 20px;\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n overflow: hidden;\n }\n .chat-header {\n background-color: #d97b0f;\n color: #fff;\n padding: 10px;\n text-align: center;\n border-bottom: 1px solid #69010a;\n }\n .chat-messages {\n padding: 10px;\n overflow-y: auto;\n max-height: 300px;\n }\n .message {\n margin-bottom: 10px;\n padding: 10px;\n border-radius: 5px;\n }\n .user-message {\n background-color: #4caf50;\n color: #fff;\n text-align: right;\n }\n .bot-message {\n background-color: #2196f3;\n color: #080900;\n text-align: left;\n }\n .chat-input {\n display: flex;\n align-items: center;\n background-color: #a3e106;\n padding: 10px;\n justify-content: space-between;\n }\n .send-button {\n background-color: #17c686;\n color: #fff;\n font-weight: bold;\n border: none;\n border-radius: 5px;\n padding: 8px 15px;\n cursor: pointer;\n transition: background-color 0.3s;\n }\n .talk-button {\n background-color: #c86722;\n color: #fff;\n border: none;\n font-weight: bold;\n border-radius: 5px;\n padding: 8px 15px;\n cursor: pointer;\n transition: background-color 0.3s;\n }\n .send-button:hover,\n .talk-button:hover {\n background-color: #45a049;\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"menu\">\n <a href=\"https:\/\/phamho.com\/book\/category\/spanish\/\">Lesson 1<\/a>\n <a href=\"https:\/\/phamho.com\/book\/2024\/08\/11\/learn-spanish-2\/\">Lesson 2<\/a>\n <a href=\"https:\/\/phamho.com\/book\/2024\/09\/01\/spanish-3\/\">Lesson 3<\/a>\n <a href=\"https:\/\/phamho.com\/book\/2024\/09\/01\/spanish-4\/\">Lesson 4<\/a>\n <a href=\"https:\/\/phamho.com\/book\/2024\/09\/01\/spanish-5\/\">Lesson 5<\/a>\n <a href=\"https:\/\/phamho.com\/book\/2024\/09\/01\/spanish-6\/\">Lesson 6<\/a>\n<a href=\"https:\/\/phamho.com\/book\/2024\/09\/01\/spanish-7\/\">Lesson 7<\/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\/06\/DALL\u00b7E-2024-06-09-11.32.53-A-6-year-old-girl-talking-to-a-7-year-old-boy-in-a-bright-and-cheerful-classroom.-The-girl-has-long-brown-hair-and-is-wearing-a-pink-dress-while-the-.webp\" alt=\"Spanish Lesson Robot\">\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 4 – Numbers & Dates<\/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=\"talk-button\">Stop<\/button>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n const phrases = [\n { english: \"One\", spanish: \"Uno\" },\n { english: \"Two\", spanish: \"Dos\" },\n { english: \"Three\", spanish: \"Tres\" },\n { english: \"Four\", spanish: \"Cuatro\" },\n { english: \"Five\", spanish: \"Cinco\" },\n { english: \"Six\", spanish: \"Seis\" },\n { english: \"Seven\", spanish: \"Siete\" },\n { english: \"Eight\", spanish: \"Ocho\" },\n { english: \"Nine\", spanish: \"Nueve\" },\n { english: \"Ten\", spanish: \"Diez\" },\n { english: \"Eleven\", spanish: \"Once\" },\n { english: \"Twelve\", spanish: \"Doce\" },\n { english: \"Thirteen\", spanish: \"Trece\" },\n { english: \"Fourteen\", spanish: \"Catorce\" },\n { english: \"Fifteen\", spanish: \"Quince\" },\n { english: \"Sixteen\", spanish: \"Diecis\u00e9is\" },\n { english: \"Seventeen\", spanish: \"Diecisiete\" },\n { english: \"Eighteen\", spanish: \"Dieciocho\" },\n { english: \"Nineteen\", spanish: \"Diecinueve\" },\n { english: \"Twenty\", spanish: \"Veinte\" },\n \n { english: \"Today\", spanish: \"Hoy\" },\n { english: \"Tomorrow\", spanish: \"Ma\u00f1ana\" },\n { english: \"Yesterday\", spanish: \"Ayer\" },\n { english: \"Week\", spanish: \"Semana\" },\n { english: \"Month\", spanish: \"Mes\" },\n { english: \"Year\", spanish: \"A\u00f1o\" },\n { english: \"Monday\", spanish: \"Lunes\" },\n { english: \"Tuesday\", spanish: \"Martes\" },\n { english: \"Wednesday\", spanish: \"Mi\u00e9rcoles\" },\n { english: \"Thursday\", spanish: \"Jueves\" },\n { english: \"Friday\", spanish: \"Viernes\" },\n { english: \"Saturday\", spanish: \"S\u00e1bado\" },\n { english: \"Sunday\", spanish: \"Domingo\" },\n ];\n\n const positiveFeedback = [\n { english: \"Correct!\", spanish: \"\u00a1Correcto!\" },\n { english: \"Well done!\", spanish: \"\u00a1Muy bien!\" },\n { english: \"Perfect!\", spanish: \"\u00a1Perfecto!\" }\n ];\n\n let currentPhraseIndex = 0;\n let recognition;\n let correctionCount = 0;\n\n window.onload = function() {\n greetUser();\n };\n\n function greetUser() {\n const greetingEnglish = \"Hello! Welcome to the Spanish learning session. Click Start Lesson to learn Spanish\";\n const greetingSpanish = \"\u00a1Hola! Bienvenido a la sesi\u00f3n de aprendizaje de espa\u00f1ol.\";\n appendMessage(greetingEnglish, 'bot');\n sayText(greetingEnglish, \"en-US\");\n setTimeout(() => {\n appendMessage(greetingSpanish, 'bot');\n sayText(greetingSpanish, \"es-ES\");\n }, 3000);\n }\n\n document.getElementById('start-btn').onclick = function() {\n currentPhraseIndex = 0;\n startLesson();\n };\n\n document.getElementById('stop-btn').onclick = function() {\n if (recognition) {\n recognition.stop();\n }\n sayGoodbye();\n };\n\n function startLesson() {\n correctionCount = 0; \/\/ Reset correction count for each new phrase\n continueLesson();\n }\n\n function continueLesson() {\n if (currentPhraseIndex < phrases.length) {\n const phrase = phrases[currentPhraseIndex];\n const explanation = `The Spanish word for '${phrase.english}' is... ${phrase.spanish}`;\n appendMessage(explanation, 'bot');\n addWordToBox(phrase.spanish); \/\/ Add the current Spanish word to the word box\n sayText(`The Spanish word for '${phrase.english}' is`, \"en-US\");\n setTimeout(() => sayText(phrase.spanish, \"es-ES\"), 1000);\n setTimeout(() => sayText(phrase.spanish, \"es-ES\"), 3000);\n setTimeout(() => listenUserResponse(phrase.spanish), 5000);\n } else {\n sayGoodbye();\n }\n }\n\n function listenUserResponse(expectedResponse) {\n recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();\n recognition.lang = 'es-ES';\n recognition.interimResults = false;\n recognition.maxAlternatives = 1;\n\n recognition.start();\n\n recognition.onresult = function(event) {\n const userInput = event.results[0][0].transcript.toLowerCase();\n appendMessage(`Dijiste: ${userInput}`, 'user');\n\n if (userInput === expectedResponse.toLowerCase()) {\n const feedback = positiveFeedback[currentPhraseIndex % positiveFeedback.length];\n sayText(feedback.english, 'en-US');\n sayText(feedback.spanish, 'es-ES');\n appendMessage(feedback.english + \" \" + feedback.spanish, 'bot');\n currentPhraseIndex++;\n setTimeout(startLesson, 1000);\n } else if (userInput === \"adi\u00f3s\" || userInput === \"bye\" || userInput === \"bye bye\") {\n recognition.stop();\n sayGoodbye();\n } else {\n correctionCount++;\n if (correctionCount < 3) {\n const correctionMessageEnglish = `You are not correct. The pronunciation is...`;\n sayText(correctionMessageEnglish, \"en-US\");\n appendMessage(correctionMessageEnglish, 'bot');\n setTimeout(() => sayText(expectedResponse, 'es-ES'), 1000);\n setTimeout(() => listenUserResponse(expectedResponse), 2000);\n } else {\n appendMessage(`Let's move on to the next phrase.`, 'bot');\n sayText(\"Let's move on to the next phrase.\", \"en-US\");\n sayText(\"Pasemos a la siguiente frase.\", \"es-ES\");\n currentPhraseIndex++;\n setTimeout(startLesson, 1000);\n }\n }\n };\n\n recognition.onspeechend = function() {\n recognition.stop();\n };\n\n recognition.onerror = function(event) {\n appendMessage('Ocurri\u00f3 un error en el reconocimiento: ' + event.error, 'bot');\n startLesson();\n };\n }\n\n function sayGoodbye() {\n const goodbyeMessageEnglish = \"Great job! You've completed the lesson. Goodbye and have a wonderful day!\";\n const goodbyeMessageSpanish = \"\u00a1Excelente trabajo! Has completado la lecci\u00f3n. \u00a1Adi\u00f3s y que tengas un maravilloso d\u00eda!\";\n sayText(goodbyeMessageEnglish, \"en-US\");\n sayText(goodbyeMessageSpanish, \"es-ES\");\n appendMessage(goodbyeMessageEnglish + \" \" + goodbyeMessageSpanish, 'bot');\n }\n\n function sayText(text, lang) {\n const utterance = new SpeechSynthesisUtterance(text);\n utterance.lang = lang;\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 addWordToBox(word) {\n const wordBox = document.getElementById('word-box');\n const wordElement = document.createElement('div');\n wordElement.innerText = word;\n wordBox.appendChild(wordElement);\n }\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Spanish 4 – Numbers & Dates Lesson 1 Lesson 2 Lesson 3 Lesson 4 Lesson 5 Lesson 6 Lesson 7 Spanish 4 – Numbers & Dates Start Lesson Stop<\/p>\n","protected":false},"author":1,"featured_media":1367,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[33],"tags":[],"class_list":["post-1454","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-spanish"],"featured_image_src":"https:\/\/phamho.com\/book\/wp-content\/uploads\/2024\/06\/DALL\u00b7E-2024-06-07-19.46.52-A-beautiful-woman-talking-to-a-friendly-humanoid-robot.-The-woman-has-a-warm-smile-long-brown-hair-and-is-dressed-in-casual-stylish-clothing.-She--1024x585.webp","blog_images":{"medium":"https:\/\/phamho.com\/book\/wp-content\/uploads\/2024\/06\/DALL\u00b7E-2024-06-07-19.46.52-A-beautiful-woman-talking-to-a-friendly-humanoid-robot.-The-woman-has-a-warm-smile-long-brown-hair-and-is-dressed-in-casual-stylish-clothing.-She--300x171.webp","large":"https:\/\/phamho.com\/book\/wp-content\/uploads\/2024\/06\/DALL\u00b7E-2024-06-07-19.46.52-A-beautiful-woman-talking-to-a-friendly-humanoid-robot.-The-woman-has-a-warm-smile-long-brown-hair-and-is-dressed-in-casual-stylish-clothing.-She--1024x585.webp"},"ams_acf":[],"_links":{"self":[{"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/posts\/1454","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=1454"}],"version-history":[{"count":4,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/posts\/1454\/revisions"}],"predecessor-version":[{"id":1482,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/posts\/1454\/revisions\/1482"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/media\/1367"}],"wp:attachment":[{"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/media?parent=1454"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/categories?post=1454"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/tags?post=1454"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}