{"id":1576,"date":"2024-09-16T05:32:19","date_gmt":"2024-09-16T05:32:19","guid":{"rendered":"https:\/\/phamho.com\/book\/?p=1576"},"modified":"2024-09-16T05:41:11","modified_gmt":"2024-09-16T05:41:11","slug":"spanish-verb-like","status":"publish","type":"post","link":"https:\/\/phamho.com\/book\/spanish-verb-like\/","title":{"rendered":"Spanish Verb &#8211; Like"},"content":{"rendered":"\n<!DOCTYPE html>\n<html lang=\"es\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Spanish Verb &#8211; Like<\/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        .sentence-text {\n            margin: 10px 0;\n            font-weight: bold;\n            color: #333;\n        }\n        .word-box {\n            margin-top: 10px;\n            padding: 10px;\n            background-color: #fff;\n            border: 2px solid #026c96;\n            border-radius: 10px;\n            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n            font-size: 18px;\n            font-weight: bold;\n            color: #026c96;\n            text-align: left;\n            max-height: 300px;\n            overflow-y: auto;\n        }\n        .chat-container {\n            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        .stop-button {\n            background-color: #c86722;\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    <\/style>\n<\/head>\n<body>\n    <div class=\"menu\">\n      <a href=\"https:\/\/phamho.com\/book\/2024\/09\/16\/spanish-verb-like\/\">Like<\/a>\n      <a href=\"https:\/\/phamho.com\/book\/2024\/09\/16\/spanish-verb-go\/\">Go<\/a>\n      <a href=\"https:\/\/phamho.com\/book\/2024\/09\/16\/spanish-verb-do\/\">Do<\/a>\n      <a href=\"https:\/\/phamho.com\/book\/2024\/09\/16\/spanish-verb-make\/\">Make<\/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=\"Lecci\u00f3n Robot\">\n            <div class=\"sentence-text\">Look at the box below<\/div>\n            <div id=\"word-box\" class=\"word-box\">\n                <!-- Learned sentences will be displayed here -->\n            <\/div>\n        <\/div>\n        <div class=\"chat-container\">\n            <div class=\"chat-header\">\n                <h2>Spanish Verb &#8211; Like<\/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=\"stop-button\">Stop<\/button>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <script>\n    const sentences = [\n        { sentence: \"Me gusta el caf\u00e9.\", translation: \"I like coffee.\" },\n        { sentence: \"Me gusta la leche.\", translation: \"I like milk.\" },\n        { sentence: \"Me gustan las hamburguesas.\", translation: \"I like hamburgers.\" },\n        { sentence: \"Me gusta el t\u00e9.\", translation: \"I like tea.\" },\n        { sentence: \"Me gustan las frutas.\", translation: \"I like fruits.\" },\n        { sentence: \"Me gusta el queso.\", translation: \"I like cheese.\" },\n        { sentence: \"Me gusta la ensalada.\", translation: \"I like salad.\" },\n        { sentence: \"Me gusta el helado.\", translation: \"I like ice cream.\" },\n        { sentence: \"Me gusta el chocolate.\", translation: \"I like chocolate.\" },\n        { sentence: \"Me gustan las papas fritas.\", translation: \"I like french fries.\" }\n    ];\n\n    let currentSentenceIndex = 0;\n    let repeatAttempts = 0;\n    let recognition;\n\n    const stopKeywords = [\"adi\u00f3s\", \"goodbye\", \"good bye\", \"bye\", \"bye bye\", \"byebye\", \"hasta luego\", \"chao\"];\n\n    window.onload = function() {\n        window.speechSynthesis.onvoiceschanged = () => {\n            greetUser();\n        };\n\n        if (window.speechSynthesis.getVoices().length !== 0) {\n            greetUser();\n        }\n    };\n\n    function greetUser() {\n        const greeting = \"Welcome! In this lesson, you will learn 10 sentences expressing things you like in Spanish. I will say each sentence twice, and then you will repeat. Are you ready? Click Start Lesson to begin.\";\n        appendMessage(greeting, 'bot');\n        sayText(greeting, 'en');\n    }\n\n    document.getElementById('start-btn').onclick = function() {\n        currentSentenceIndex = 0;\n        repeatAttempts = 0;\n        startLesson();\n    };\n\n    document.getElementById('stop-btn').onclick = function() {\n        endLesson(true); \/\/ Stop the lesson when \"Stop Lesson\" button is clicked\n    };\n\n    function startLesson() {\n        if (currentSentenceIndex < sentences.length) {\n            const sentence = sentences[currentSentenceIndex].sentence;\n            const translation = sentences[currentSentenceIndex].translation;\n\n            appendMessage(`'${sentence}' - '${translation}'`, 'bot');\n            addSentenceToBox(sentence, translation);\n            sayText(sentence, \"es\");\n            setTimeout(() => sayText(sentence, \"es\"), 1500); \/\/ Say the sentence twice\n\n            setTimeout(() => {\n                const repeatMessage = `Ahora repite despu\u00e9s de m\u00ed: '${sentence}'`;\n                appendMessage(repeatMessage, 'bot');\n                sayText(repeatMessage, \"es\");\n                listenUserResponse(sentence);\n            }, 3000);\n        } else {\n            endLesson();\n        }\n    }\n\n    function listenUserResponse(expectedSentence) {\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            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            const normalizedInput = userInput.toLowerCase().replace(\/[\\s\u00bf?!.,]+\/g, '');\n            const normalizedExpected = expectedSentence.toLowerCase().replace(\/[\\s\u00bf?!.,]+\/g, '');\n\n            if (normalizedInput === normalizedExpected) {\n                const positiveMessage = \"Perfect! Let's move on.\";\n                appendMessage(positiveMessage, 'bot');\n                sayText(positiveMessage, 'en'); \/\/ Feedback in English\n                repeatAttempts = 0; \/\/ Reset the attempts counter\n                currentSentenceIndex++;\n                setTimeout(startLesson, 2000); \/\/ Move to next sentence after 2 seconds\n            } else {\n                repeatAttempts++;\n                if (repeatAttempts < 2) {\n                    const correctionMessage = `That's not correct. Listen again: '${expectedSentence}'. Can you say that again?`;\n                    appendMessage(correctionMessage, 'bot');\n                    sayText(\"That's not correct. Listen again:\", 'en'); \/\/ English feedback\n                    sayText(expectedSentence, 'es'); \/\/ Say the sentence in Spanish\n                    setTimeout(() => {\n                        sayText(\"Can you say that again?\", 'en'); \/\/ Prompt to repeat in English\n                        listenUserResponse(expectedSentence);\n                    }, 3000);\n                } else {\n                    const nextSentenceMessage = `You've tried twice. The correct sentence is '${expectedSentence}'. Let's move on.`;\n                    appendMessage(nextSentenceMessage, 'bot');\n                    sayText(nextSentenceMessage, 'en'); \/\/ Feedback in English\n                    repeatAttempts = 0; \/\/ Reset the attempts counter\n                    currentSentenceIndex++;\n                    setTimeout(startLesson, 2000); \/\/ Move to next sentence after 2 seconds\n                }\n            }\n        };\n\n        recognition.onspeechend = function() {\n            recognition.stop();\n        };\n\n        recognition.onerror = function(event) {\n            appendMessage('Error: ' + event.error, 'bot');\n        };\n    }\n\n    function addSentenceToBox(sentence, translation) {\n        const wordBox = document.getElementById('word-box');\n        const sentenceElement = document.createElement('div');\n        sentenceElement.innerText = `'${sentence}' - '${translation}'`;\n        wordBox.appendChild(sentenceElement);\n    }\n\n    function endLesson(userStopped = false) {\n        let message;\n        if (userStopped) {\n            message = \"Thank you for learning today! I hope you enjoyed the lesson.\";\n        } else {\n            message = \"Well done! You've learned 10 sentences expressing things you like in Spanish. Keep practicing!\";\n        }\n        appendMessage(message, \"bot\");\n        sayText(message, \"en\"); \/\/ End feedback in English\n    }\n\n    function sayText(text, lang) {\n        const utterance = new SpeechSynthesisUtterance(text);\n        utterance.lang = lang;\n        const voices = window.speechSynthesis.getVoices();\n        let selectedVoice = voices.find(voice => voice.lang === lang);\n        if (selectedVoice) {\n            utterance.voice = selectedVoice;\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.innerHTML = text;\n        messageContainer.appendChild(messageElement);\n        messageContainer.scrollTop = messageContainer.scrollHeight;\n    }\n    <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Spanish Verb &#8211; Like Like Go Do Make Look at the box below Spanish Verb &#8211; Like Start Lesson Stop<\/p>\n","protected":false},"author":1,"featured_media":1445,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[34,33,37],"tags":[],"class_list":["post-1576","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-robots","category-spanish","category-spanish-verbs"],"featured_image_src":"https:\/\/phamho.com\/book\/wp-content\/uploads\/2024\/09\/6766ad69-c270-48ed-8322-cc3844ba961e.webp","blog_images":{"medium":"https:\/\/phamho.com\/book\/wp-content\/uploads\/2024\/09\/6766ad69-c270-48ed-8322-cc3844ba961e-300x300.webp","large":"https:\/\/phamho.com\/book\/wp-content\/uploads\/2024\/09\/6766ad69-c270-48ed-8322-cc3844ba961e.webp"},"ams_acf":[],"_links":{"self":[{"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/posts\/1576","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=1576"}],"version-history":[{"count":2,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/posts\/1576\/revisions"}],"predecessor-version":[{"id":1589,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/posts\/1576\/revisions\/1589"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/media\/1445"}],"wp:attachment":[{"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/media?parent=1576"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/categories?post=1576"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/tags?post=1576"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}