{"id":1472,"date":"2024-09-01T14:21:34","date_gmt":"2024-09-01T14:21:34","guid":{"rendered":"https:\/\/phamho.com\/book\/?p=1472"},"modified":"2024-09-01T14:51:46","modified_gmt":"2024-09-01T14:51:46","slug":"spanish-7","status":"publish","type":"post","link":"https:\/\/phamho.com\/book\/spanish-7\/","title":{"rendered":"Spanish 7"},"content":{"rendered":"\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Spanish 7 &#8211; Introductions<\/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\/08\/163abc3a-5b10-4eb5-9562-b9ad98ada23d.webp\" alt=\"Spanish Lesson Robot\">\n            <div id=\"word-box\" class=\"word-box\">\n                <!-- The learned Spanish words will be displayed here -->\n            <\/div>\n        <\/div>\n        <div class=\"chat-container\">\n            <div class=\"chat-header\">\n                <h2>Spanish 7 &#8211; Introductions<\/h2>\n            <\/div>\n            <div class=\"chat-messages\" id=\"chat-messages\">\n                <!-- Messages will appear here -->\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 introductions = [\n            {\n                english: [\n                    \"Hello, my name is Bella.\",\n                    \"I am 7 years old.\",\n                    \"I study in grade 2.\",\n                    \"I have a brother, Bubu.\"\n                ],\n                spanish: [\n                    \"Hola me llamo bella\",\n                    \"Tengo siete a\u00f1os\",\n                    \"Estudio en el grado dos\",\n                    \"Tengo un hermano bubu\"\n                ]\n            },\n            {\n                english: [\n                    \"Hello, I am Bella.\",\n                    \"There are four people in my family.\",\n                    \"My daddy is a professor of English.\",\n                    \"My mother is a lecturer of English.\",\n                    \"My brother is 14 years old.\",\n                    \"He studies in grade 8.\"\n                ],\n                spanish: [\n                    \"Hola soy Bella\",\n                    \"Hay cuatro personas en mi familia\",\n                    \"Mi pap\u00e1 es profesor de ingl\u00e9s\",\n                    \"Mi mam\u00e1 es profesora de ingl\u00e9s\",\n                    \"Mi hermano tiene catorce a\u00f1os\",\n                    \"Estudia en el grado ocho\"\n                ]\n            }\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 currentSentenceIndex = 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.\";\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            currentSentenceIndex = 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 sentence\n            continueLesson();\n        }\n\n        function continueLesson() {\n            const currentIntro = introductions[currentPhraseIndex];\n            const englishSentence = currentIntro.english[currentSentenceIndex];\n            const spanishSentence = currentIntro.spanish[currentSentenceIndex];\n\n            const explanation = `The Spanish translation for '${englishSentence}' is... ${spanishSentence}`;\n            appendMessage(explanation, 'bot');\n            addWordToBox(spanishSentence); \/\/ Add the current Spanish sentence to the word box\n            sayText(`The Spanish translation for '${englishSentence}' is`, \"en-US\");\n            setTimeout(() => {\n                sayText(spanishSentence, \"es-ES\");\n                sayText(spanishSentence, \"es-ES\");\n            }, 1000);\n            setTimeout(() => listenUserResponse(spanishSentence), 5000);\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[currentSentenceIndex % positiveFeedback.length];\n                    sayText(feedback.english, 'en-US');\n                    sayText(feedback.spanish, 'es-ES');\n                    appendMessage(feedback.english + \" \" + feedback.spanish, 'bot');\n                    currentSentenceIndex++;\n\n                    if (currentSentenceIndex < introductions[currentPhraseIndex].english.length) {\n                        setTimeout(startLesson, 1000); \/\/ Move to the next sentence\n                    } else {\n                        currentPhraseIndex++;\n                        currentSentenceIndex = 0;\n                        if (currentPhraseIndex < introductions.length) {\n                            setTimeout(startLesson, 1000); \/\/ Move to the next introduction\n                        } else {\n                            sayGoodbye(); \/\/ End of lesson\n                        }\n                    }\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                        setTimeout(() => {\n                            sayText(expectedResponse, 'es-ES');\n                            sayText(expectedResponse, 'es-ES');\n                        }, 1000);\n                        setTimeout(() => listenUserResponse(expectedResponse), 2000);\n                    } else {\n                        appendMessage(`Let's move on to the next sentence.`, 'bot');\n                        sayText(\"Let's move on to the next sentence.\", \"en-US\");\n                        sayText(\"Pasemos a la siguiente frase.\", \"es-ES\");\n                        currentSentenceIndex++;\n                        if (currentSentenceIndex < introductions[currentPhraseIndex].english.length) {\n                            setTimeout(startLesson, 1000); \/\/ Move to the next sentence\n                        } else {\n                            currentPhraseIndex++;\n                            currentSentenceIndex = 0;\n                            if (currentPhraseIndex < introductions.length) {\n                                setTimeout(startLesson, 1000); \/\/ Move to the next introduction\n                            } else {\n                                sayGoodbye(); \/\/ End of lesson\n                            }\n                        }\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            \n            \/\/ Set slower rate for Spanish speech\n            if (lang === \"es-ES\") {\n                utterance.rate = 0.5;  \/\/ Slower speech rate for Spanish\n            } else {\n                utterance.rate = 1;  \/\/ Normal rate for English\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 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 7 &#8211; Introductions Lesson 1 Lesson 2 Lesson 3 Lesson 4 Lesson 5 Lesson 6 Lesson 7 Spanish 7 &#8211; Introductions Start Lesson Stop<\/p>\n","protected":false},"author":1,"featured_media":1344,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[33],"tags":[],"class_list":["post-1472","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\/iPad-1024x585.webp","blog_images":{"medium":"https:\/\/phamho.com\/book\/wp-content\/uploads\/2024\/06\/iPad-300x171.webp","large":"https:\/\/phamho.com\/book\/wp-content\/uploads\/2024\/06\/iPad-1024x585.webp"},"ams_acf":[],"_links":{"self":[{"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/posts\/1472","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=1472"}],"version-history":[{"count":7,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/posts\/1472\/revisions"}],"predecessor-version":[{"id":1486,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/posts\/1472\/revisions\/1486"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/media\/1344"}],"wp:attachment":[{"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/media?parent=1472"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/categories?post=1472"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/tags?post=1472"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}