{"id":1459,"date":"2024-09-01T10:21:38","date_gmt":"2024-09-01T10:21:38","guid":{"rendered":"https:\/\/phamho.com\/book\/?p=1459"},"modified":"2024-09-01T14:43:41","modified_gmt":"2024-09-01T14:43:41","slug":"spanish-6","status":"publish","type":"post","link":"https:\/\/phamho.com\/book\/spanish-6\/","title":{"rendered":"Spanish 6"},"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 6 &#8211; Preferences<\/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\/09\/e89f7937-e0b6-4262-8971-4ca8d2f7d4da-2.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 6 &#8211; Preferences<\/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 phrases = [\n            { english: \"I like coffee\", spanish: \"Me gusta el caf\u00e9\" },\n            { english: \"I like tea\", spanish: \"Me gusta el t\u00e9\" },\n            { english: \"I like hamburgers\", spanish: \"Me gustan las hamburguesas\" },\n            { english: \"I like pizza\", spanish: \"Me gusta la pizza\" },\n            { english: \"I like chocolate\", spanish: \"Me gusta el chocolate\" },\n            { english: \"I like music\", spanish: \"Me gusta la m\u00fasica\" },\n            { english: \"I like movies\", spanish: \"Me gustan las pel\u00edculas\" },\n            { english: \"I like reading\", spanish: \"Me gusta leer\" },\n            { english: \"I like sports\", spanish: \"Me gustan los deportes\" },\n            { english: \"I like traveling\", spanish: \"Me gusta viajar\" },\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(() => 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                        setTimeout(() => {\n                            sayText(expectedResponse, 'es-ES');\n                        }, 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            \n            \/\/ Set slower rate for Spanish speech\n            if (lang === \"es-ES\") {\n                utterance.rate = 0.75;  \/\/ 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 6 &#8211; Preferences Lesson 1 Lesson 2 Lesson 3 Lesson 4 Lesson 5 Lesson 6 Lesson 7 Spanish 6 &#8211; Preferences Start Lesson Stop<\/p>\n","protected":false},"author":1,"featured_media":1467,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[33],"tags":[],"class_list":["post-1459","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-spanish"],"featured_image_src":"https:\/\/phamho.com\/book\/wp-content\/uploads\/2024\/09\/1cc8ad33-a235-4146-be1b-eba2698cfdc0.webp","blog_images":{"medium":"https:\/\/phamho.com\/book\/wp-content\/uploads\/2024\/09\/1cc8ad33-a235-4146-be1b-eba2698cfdc0-300x300.webp","large":"https:\/\/phamho.com\/book\/wp-content\/uploads\/2024\/09\/1cc8ad33-a235-4146-be1b-eba2698cfdc0.webp"},"ams_acf":[],"_links":{"self":[{"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/posts\/1459","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=1459"}],"version-history":[{"count":3,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/posts\/1459\/revisions"}],"predecessor-version":[{"id":1480,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/posts\/1459\/revisions\/1480"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/media\/1467"}],"wp:attachment":[{"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/media?parent=1459"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/categories?post=1459"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/tags?post=1459"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}