{"id":1541,"date":"2024-09-16T02:04:33","date_gmt":"2024-09-16T02:04:33","guid":{"rendered":"https:\/\/phamho.com\/book\/?p=1541"},"modified":"2024-09-16T04:03:55","modified_gmt":"2024-09-16T04:03:55","slug":"spanish-vocabulary-sports","status":"publish","type":"post","link":"https:\/\/phamho.com\/book\/spanish-vocabulary-sports\/","title":{"rendered":"Spanish Vocabulary &#8211; Sports"},"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>Aprender Vocabulario &#8211; Deportes<\/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-vocabulary-school\/\">School<\/a>\n      <a href=\"https:\/\/phamho.com\/book\/2024\/09\/16\/spanish-vocabulary\/\">Family<\/a>\n      <a href=\"https:\/\/phamho.com\/book\/2024\/09\/16\/spanish-vocabulary-home\/\">Home<\/a>\n      <a href=\"https:\/\/phamho.com\/book\/2024\/09\/16\/spanish-vocabulary-travel\/\">Travel<\/a>\n      <a href=\"https:\/\/phamho.com\/book\/2024\/09\/16\/spanish-vocabulary-body\/\">Body<\/a>\n      <a href=\"https:\/\/phamho.com\/book\/2024\/09\/16\/spanish-vocabulary-sports\/\">Sports<\/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\">Mira el vocabulario en esta caja<\/div>\n            <div id=\"word-box\" class=\"word-box\">\n                <!-- Learned sports-related words and meanings will be displayed here -->\n            <\/div>\n        <\/div>\n        <div class=\"chat-container\">\n            <div class=\"chat-header\">\n                <h2>Aprender Vocabulario &#8211; Deportes<\/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\"><\/button>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <script>\n    const vocabulary = [\n        { word: \"f\u00fatbol\", translation: \"football\" },\n        { word: \"baloncesto\", translation: \"basketball\" },\n        { word: \"tenis\", translation: \"tennis\" },\n        { word: \"nataci\u00f3n\", translation: \"swimming\" },\n        { word: \"ciclismo\", translation: \"cycling\" },\n        { word: \"b\u00e1dminton\", translation: \"badminton\" },\n        { word: \"correr\", translation: \"running\" },\n        { word: \"voleibol\", translation: \"volleyball\" },\n        { word: \"golf\", translation: \"golf\" },\n        { word: \"yoga\", translation: \"yoga\" },\n        { word: \"hockey\", translation: \"hockey\" },\n        { word: \"esqu\u00ed\", translation: \"skiing\" },\n        { word: \"surf\", translation: \"surfing\" },\n        { word: \"boxeo\", translation: \"boxing\" },\n        { word: \"karate\", translation: \"karate\" },\n        { word: \"tiro con arco\", translation: \"archery\" },\n        { word: \"lucha\", translation: \"wrestling\" },\n        { word: \"patineta\", translation: \"skateboarding\" },\n        { word: \"tenis de mesa\", translation: \"table tennis\" },\n        { word: \"cr\u00edquet\", translation: \"cricket\" }\n    ];\n\n    let currentWordIndex = 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 = \"\u00a1Bienvenido! En esta lecci\u00f3n vas a aprender 20 palabras sobre deportes. Dir\u00e9 cada palabra dos veces, y luego repetir\u00e1s. \u00bfEst\u00e1s listo? Haz clic en Empezar Lecci\u00f3n para comenzar.\";\n        appendMessage(greeting, 'bot');\n        sayText(greeting, 'es');\n    }\n\n    document.getElementById('start-btn').onclick = function() {\n        currentWordIndex = 0;\n        startVocabularyLesson();\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 startVocabularyLesson() {\n        if (currentWordIndex < vocabulary.length) {\n            const word = vocabulary[currentWordIndex].word;\n            const translation = vocabulary[currentWordIndex].translation;\n\n            appendMessage(`'${word}' - '${translation}'`, 'bot');\n            addWordToBox(word, translation);\n            sayText(word, \"es\");\n            setTimeout(() => sayText(word, \"es\"), 1500); \/\/ Say the word twice\n\n            setTimeout(() => {\n                const repeatMessage = `Ahora repite despu\u00e9s de m\u00ed: '${word}'`;\n                appendMessage(repeatMessage, 'bot');\n                sayText(repeatMessage, \"es\");\n                listenUserResponse(word);\n            }, 3000);\n        } else {\n            endLesson();\n        }\n    }\n\n    function listenUserResponse(expectedWord) {\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().toLowerCase();\n            appendMessage(userInput, 'user');\n\n            if (stopKeywords.includes(userInput)) {\n                endLesson(true); \/\/ User requested to stop the lesson\n                return;\n            }\n\n            if (userInput === expectedWord.toLowerCase()) {\n                const positiveMessage = \"\u00a1Muy bien! Tu pronunciaci\u00f3n es buena.\";\n                appendMessage(positiveMessage, 'bot');\n                sayText(positiveMessage, 'es');\n                currentWordIndex++;\n                setTimeout(startVocabularyLesson, 2000); \/\/ Move to next word after 2 seconds\n            } else {\n                const correctionMessage = `Eso no es correcto. Escucha otra vez: '${expectedWord}'. Ahora repite despu\u00e9s de m\u00ed.`;\n                appendMessage(correctionMessage, 'bot');\n                sayText(correctionMessage, 'es');  \/\/ Speak the correction feedback aloud\n                sayText(expectedWord, \"es\");\n                setTimeout(() => listenUserResponse(expectedWord), 3000); \/\/ Repeat the word\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 addWordToBox(word, translation) {\n        const wordBox = document.getElementById('word-box');\n        const wordElement = document.createElement('div');\n        wordElement.innerText = `'${word}' - '${translation}'`;\n        wordBox.appendChild(wordElement);\n    }\n\n    function endLesson(userStopped = false) {\n        let message;\n        if (userStopped) {\n            message = \"\u00a1Gracias por aprender hoy! Espero que hayas disfrutado la lecci\u00f3n.\";\n        } else {\n            message = \"\u00a1Bien hecho! Has aprendido 20 palabras relacionadas con deportes. \u00a1Sigue practicando!\";\n        }\n        appendMessage(message, \"bot\");\n        sayText(message, \"es\");\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>Aprender Vocabulario &#8211; Deportes School Family Home Travel Body Sports Mira el vocabulario en esta caja Aprender Vocabulario &#8211; Deportes Start Lesson<\/p>\n","protected":false},"author":1,"featured_media":1427,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[34,33,36],"tags":[],"class_list":["post-1541","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-robots","category-spanish","category-spanish-vocabulary"],"featured_image_src":"https:\/\/phamho.com\/book\/wp-content\/uploads\/2024\/08\/8d7efe04-a355-4214-a6cb-48d660b80124.webp","blog_images":{"medium":"https:\/\/phamho.com\/book\/wp-content\/uploads\/2024\/08\/8d7efe04-a355-4214-a6cb-48d660b80124-300x300.webp","large":"https:\/\/phamho.com\/book\/wp-content\/uploads\/2024\/08\/8d7efe04-a355-4214-a6cb-48d660b80124.webp"},"ams_acf":[],"_links":{"self":[{"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/posts\/1541","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=1541"}],"version-history":[{"count":5,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/posts\/1541\/revisions"}],"predecessor-version":[{"id":1569,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/posts\/1541\/revisions\/1569"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/media\/1427"}],"wp:attachment":[{"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/media?parent=1541"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/categories?post=1541"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/tags?post=1541"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}