{"id":1761,"date":"2024-09-30T07:07:46","date_gmt":"2024-09-30T07:07:46","guid":{"rendered":"https:\/\/phamho.com\/book\/?p=1761"},"modified":"2024-09-30T07:12:15","modified_gmt":"2024-09-30T07:12:15","slug":"korean-like-question-family","status":"publish","type":"post","link":"https:\/\/phamho.com\/book\/korean-like-question-family\/","title":{"rendered":"Korean Like-Question &#8211; Family"},"content":{"rendered":"\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <title>Korean Like-Question &#8211; Family<\/title>\n    <style>\n        \/* Basic Reset *\/\n        * {\n            box-sizing: border-box;\n            margin: 0;\n            padding: 0;\n        }\n\n        body {\n            font-family: Arial, sans-serif;\n            background-color: #f0f4f8;\n            display: flex;\n            flex-direction: column;\n            min-height: 100vh;\n        }\n\n        \/* Menu Bar *\/\n        .menu {\n            width: 100%;\n            background-color: #2c3e50;\n            padding: 15px;\n            text-align: center;\n            box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n        }\n\n        .menu a {\n            color: #ecf0f1;\n            text-decoration: none;\n            margin: 0 10px;\n            font-weight: bold;\n            font-size: 16px;\n        }\n\n        .menu a:hover {\n            text-decoration: underline;\n        }\n\n        \/* Container Layout *\/\n        .container {\n            flex: 1;\n            display: flex;\n            flex-wrap: wrap;\n            padding: 20px;\n            justify-content: center;\n            align-items: flex-start;\n        }\n\n        \/* Information Section *\/\n        .info-container {\n            width: 100%;\n            max-width: 600px;\n            text-align: center;\n            margin-bottom: 20px;\n        }\n\n        .info-container img {\n            width: 100%;\n            height: auto;\n            border-radius: 15px;\n            box-shadow: 0 4px 8px rgba(0,0,0,0.1);\n        }\n\n        .question-text {\n            margin: 15px 0;\n            font-size: 18px;\n            color: #34495e;\n        }\n\n        \/* Question Box *\/\n        .question-box {\n            background-color: #ffffff;\n            border: 2px solid #2980b9;\n            border-radius: 10px;\n            padding: 15px;\n            max-height: 300px;\n            overflow-y: auto;\n            box-shadow: 0 2px 6px rgba(0,0,0,0.1);\n            text-align: left;\n        }\n\n        .question-box .question-item {\n            margin-bottom: 15px;\n        }\n\n        .question-box .question-item:last-child {\n            margin-bottom: 0;\n        }\n\n        .question-box .question-item h3 {\n            margin: 0 0 5px 0;\n            font-size: 16px;\n            color: #2c3e50;\n            cursor: pointer;\n        }\n\n        .question-box .question-item h3:hover {\n            text-decoration: underline;\n        }\n\n        .question-box .question-item p {\n            margin: 3px 0;\n            font-size: 14px;\n            color: #7f8c8d;\n        }\n\n        \/* Voice Selection *\/\n        .voice-selection {\n            margin-top: 15px;\n            text-align: center;\n        }\n\n        .voice-selection select {\n            padding: 8px;\n            font-size: 14px;\n            border-radius: 5px;\n            border: 1px solid #bdc3c7;\n            width: 80%;\n            max-width: 300px;\n        }\n\n        \/* Chat Container *\/\n        .chat-container {\n            width: 100%;\n            max-width: 600px;\n            background-color: #ffffff;\n            border-radius: 15px;\n            box-shadow: 0 4px 12px rgba(0,0,0,0.1);\n            display: flex;\n            flex-direction: column;\n            overflow: hidden;\n            margin-left: 20px;\n        }\n\n        .chat-header {\n            background-color: #2980b9;\n            color: #ffffff;\n            padding: 15px;\n            text-align: center;\n        }\n\n        .chat-header h2 {\n            margin: 0;\n            font-size: 20px;\n        }\n\n        .chat-messages {\n            flex: 1;\n            padding: 15px;\n            overflow-y: auto;\n            background-color: #ecf0f1;\n        }\n\n        .message {\n            margin-bottom: 10px;\n            padding: 10px 15px;\n            border-radius: 20px;\n            max-width: 80%;\n            word-wrap: break-word;\n            font-size: 14px;\n        }\n\n        .bot-message {\n            background-color: #3498db;\n            color: #ffffff;\n            align-self: flex-start;\n        }\n\n        .user-message {\n            background-color: #2ecc71;\n            color: #ffffff;\n            align-self: flex-end;\n        }\n\n        \/* Chat Input *\/\n        .chat-input {\n            display: flex;\n            padding: 15px;\n            background-color: #bdc3c7;\n        }\n\n        .chat-input input {\n            flex: 1;\n            padding: 10px;\n            border: none;\n            border-radius: 20px;\n            font-size: 14px;\n            outline: none;\n        }\n\n        .chat-input button {\n            margin-left: 10px;\n            padding: 10px 20px;\n            border: none;\n            border-radius: 20px;\n            background-color: #2980b9;\n            color: #ffffff;\n            font-size: 14px;\n            cursor: pointer;\n            transition: background-color 0.3s;\n        }\n\n        .chat-input button:hover {\n            background-color: #1f6391;\n        }\n\n        \/* Action Buttons for Retry and Show Answer *\/\n        .action-buttons {\n            margin-top: 10px;\n            display: flex;\n            justify-content: center;\n        }\n\n        .action-buttons button {\n            margin: 0 5px;\n            padding: 8px 12px;\n            border: none;\n            border-radius: 5px;\n            cursor: pointer;\n            color: #ffffff;\n            font-size: 14px;\n        }\n\n        .action-buttons .retry-btn {\n            background-color: #e74c3c;\n        }\n\n        .action-buttons .show-answer-btn {\n            background-color: #3498db;\n        }\n\n        \/* Responsive Design *\/\n        @media (max-width: 768px) {\n            .container {\n                flex-direction: column;\n                align-items: center;\n            }\n            .chat-container {\n                margin-left: 0;\n                margin-top: 20px;\n            }\n            .voice-selection select {\n                width: 100%;\n                max-width: none;\n            }\n        }\n    <\/style>\n<\/head>\n<body>\n    <!-- Menu Bar -->\n    <div class=\"menu\">\n      <a href=\"https:\/\/phamho.com\/book\/2024\/09\/30\/korean-vocabulary-family\/\">Vocabulary<\/a>\n      <a href=\"https:\/\/phamho.com\/book\/2024\/09\/30\/korean-sentences-family\/\">Sentences<\/a>\n      <a href=\"https:\/\/phamho.com\/book\/2024\/09\/30\/korean-yes-no-question-family\/\">Yes\/No Questions<\/a>\n      <a href=\"https:\/\/phamho.com\/book\/2024\/09\/30\/korean-wh-question-family\/\">WH-Questions<\/a>\n      <a href=\"https:\/\/phamho.com\/book\/2024\/09\/30\/korean-like-question-family\/\">Like-Questions<\/a>\n      <a href=\"https:\/\/phamho.com\/book\/2024\/09\/30\/korean-interaction-family\/\">Interactions<\/a>\n    <\/div>\n\n    <!-- Main Container -->\n    <div class=\"container\">\n        <!-- Information Section -->\n        <div class=\"info-container\">\n            <img decoding=\"async\" src=\"https:\/\/phamho.com\/book\/wp-content\/uploads\/2024\/09\/korean.jpg\" alt=\"Korean Lesson Image\">\n            <div class=\"question-text\">The current question and sample answer will appear here during the lesson.<\/div>\n            <div id=\"question-box\" class=\"question-box\">\n                <!-- Current question and sample answer will be displayed here -->\n            <\/div>\n            <div class=\"voice-selection\">\n                <label for=\"voice-select\">Choose Korean Voice:<\/label>\n                <select id=\"voice-select\" aria-label=\"Select Korean Voice\">\n                    <option value=\"\">Default<\/option>\n                    <!-- Korean voices will be populated here -->\n                <\/select>\n            <\/div>\n        <\/div>\n\n        <!-- Chat Interface -->\n        <div class=\"chat-container\">\n            <div class=\"chat-header\">\n                <h2>Korean Like-Question &#8211; Family<\/h2>\n            <\/div>\n            <div class=\"chat-messages\" id=\"chat-messages\">\n                <!-- Chat messages will appear here -->\n            <\/div>\n            <div class=\"chat-input\">\n                <input type=\"text\" id=\"user-input\" placeholder=\"Type your answer here...\" aria-label=\"User Input\" style=\"display: none;\">\n                <button id=\"submit-btn\" style=\"display: none;\">Submit<\/button>\n                <button id=\"start-btn\">Start Lesson<\/button>\n                <button id=\"stop-btn\">Stop<\/button>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <!-- JavaScript Section -->\n    <script>\n        \/\/ Array of \"Do You Like\" Questions\n        const doYouLikeQuestions = [\n        { \n                question: \"\ub2f9\uc2e0\uc740 \ud615\uc81c\ub97c \uc88b\uc544\ud558\ub098\uc694?\", \n                translation: \"Do you like your siblings?\", \n                keywords: [\"\uc88b\uc544\ud558\ub098\uc694\", \"\ud615\uc81c\"], \n                sampleAnswer: \"\ub124, \uc800\ub294 \ud615\uc81c\ub97c \uc88b\uc544\ud569\ub2c8\ub2e4.\",\n                sampleTranslation: \"Yes, I like my siblings.\"\n            },\n            { \n                question: \"\ub2f9\uc2e0\uc740 \uac00\uc871\uacfc \uc2dc\uac04\uc744 \ubcf4\ub0b4\ub294 \uac83\uc744 \uc88b\uc544\ud558\ub098\uc694?\", \n                translation: \"Do you like spending time with your family?\", \n                keywords: [\"\uc2dc\uac04\uc744 \ubcf4\ub0b4\ub294\", \"\uac00\uc871\"], \n                sampleAnswer: \"\ub124, \uac00\uc871\uacfc \uc2dc\uac04\uc744 \ubcf4\ub0b4\ub294 \uac83\uc744 \uc88b\uc544\ud569\ub2c8\ub2e4.\",\n                sampleTranslation: \"Yes, I like spending time with my family.\"\n            },\n            { \n                question: \"\ub2f9\uc2e0\uc740 \ubd80\ubaa8\ub2d8\uc744 \uc88b\uc544\ud558\ub098\uc694?\", \n                translation: \"Do you like your parents?\", \n                keywords: [\"\ubd80\ubaa8\ub2d8\", \"\uc88b\uc544\ud558\ub098\uc694\"], \n                sampleAnswer: \"\ub124, \uc800\ub294 \ubd80\ubaa8\ub2d8\uc744 \ub9e4\uc6b0 \uc88b\uc544\ud569\ub2c8\ub2e4.\",\n                sampleTranslation: \"Yes, I like my parents very much.\"\n            },\n            { \n                question: \"\ub2f9\uc2e0\uc740 \ud560\uc544\ubc84\uc9c0\ub97c \uc88b\uc544\ud558\ub098\uc694?\", \n                translation: \"Do you like your grandfather?\", \n                keywords: [\"\ud560\uc544\ubc84\uc9c0\", \"\uc88b\uc544\ud558\ub098\uc694\"], \n                sampleAnswer: \"\ub124, \ud560\uc544\ubc84\uc9c0\ub97c \uc88b\uc544\ud569\ub2c8\ub2e4.\",\n                sampleTranslation: \"Yes, I like my grandfather.\"\n            },\n            { \n                question: \"\ub2f9\uc2e0\uc740 \ud560\uba38\ub2c8\ub97c \uc88b\uc544\ud558\ub098\uc694?\", \n                translation: \"Do you like your grandmother?\", \n                keywords: [\"\ud560\uba38\ub2c8\", \"\uc88b\uc544\ud558\ub098\uc694\"], \n                sampleAnswer: \"\ub124, \ud560\uba38\ub2c8\ub97c \uc88b\uc544\ud569\ub2c8\ub2e4.\",\n                sampleTranslation: \"Yes, I like my grandmother.\"\n            },\n            { \n                question: \"\ub2f9\uc2e0\uc740 \uc0ac\ucd0c\uc744 \uc88b\uc544\ud558\ub098\uc694?\", \n                translation: \"Do you like your cousins?\", \n                keywords: [\"\uc0ac\ucd0c\", \"\uc88b\uc544\ud558\ub098\uc694\"], \n                sampleAnswer: \"\ub124, \uc800\ub294 \uc0ac\ucd0c\uc744 \uc88b\uc544\ud569\ub2c8\ub2e4.\",\n                sampleTranslation: \"Yes, I like my cousins.\"\n            },\n            { \n                question: \"\ub2f9\uc2e0\uc740 \uc0bc\ucd0c\uc744 \uc88b\uc544\ud558\ub098\uc694?\", \n                translation: \"Do you like your uncle?\", \n                keywords: [\"\uc0bc\ucd0c\", \"\uc88b\uc544\ud558\ub098\uc694\"], \n                sampleAnswer: \"\ub124, \uc0bc\ucd0c\uc744 \uc88b\uc544\ud569\ub2c8\ub2e4.\",\n                sampleTranslation: \"Yes, I like my uncle.\"\n            },\n            { \n                question: \"\ub2f9\uc2e0\uc740 \uc774\ubaa8\ub97c \uc88b\uc544\ud558\ub098\uc694?\", \n                translation: \"Do you like your aunt?\", \n                keywords: [\"\uc774\ubaa8\", \"\uc88b\uc544\ud558\ub098\uc694\"], \n                sampleAnswer: \"\ub124, \uc774\ubaa8\ub97c \uc88b\uc544\ud569\ub2c8\ub2e4.\",\n                sampleTranslation: \"Yes, I like my aunt.\"\n            },\n            { \n                question: \"\ub2f9\uc2e0\uc740 \uc870\uce74\ub97c \uc88b\uc544\ud558\ub098\uc694?\", \n                translation: \"Do you like your nieces\/nephews?\", \n                keywords: [\"\uc870\uce74\", \"\uc88b\uc544\ud558\ub098\uc694\"], \n                sampleAnswer: \"\ub124, \uc870\uce74\ub97c \uc88b\uc544\ud569\ub2c8\ub2e4.\",\n                sampleTranslation: \"Yes, I like my nieces\/nephews.\"\n            },\n            { \n                question: \"\ub2f9\uc2e0\uc740 \uac00\uc871 \ubaa8\uc784\uc744 \uc88b\uc544\ud558\ub098\uc694?\", \n                translation: \"Do you like family gatherings?\", \n                keywords: [\"\uac00\uc871 \ubaa8\uc784\", \"\uc88b\uc544\ud558\ub098\uc694\"], \n                sampleAnswer: \"\ub124, \uac00\uc871 \ubaa8\uc784\uc744 \uc88b\uc544\ud569\ub2c8\ub2e4.\",\n                sampleTranslation: \"Yes, I like family gatherings.\"\n            },\n            { \n                question: \"\ub2f9\uc2e0\uc740 \uac00\uc871 \uc5ec\ud589\uc744 \uc88b\uc544\ud558\ub098\uc694?\", \n                translation: \"Do you like family trips?\", \n                keywords: [\"\uac00\uc871 \uc5ec\ud589\", \"\uc88b\uc544\ud558\ub098\uc694\"], \n                sampleAnswer: \"\ub124, \uac00\uc871 \uc5ec\ud589\uc744 \uc88b\uc544\ud569\ub2c8\ub2e4.\",\n                sampleTranslation: \"Yes, I like family trips.\"\n            },\n            { \n                question: \"\ub2f9\uc2e0\uc740 \uac00\uc871 \uc2dd\uc0ac\ub97c \uc88b\uc544\ud558\ub098\uc694?\", \n                translation: \"Do you like family meals?\", \n                keywords: [\"\uac00\uc871 \uc2dd\uc0ac\", \"\uc88b\uc544\ud558\ub098\uc694\"], \n                sampleAnswer: \"\ub124, \uac00\uc871 \uc2dd\uc0ac\ub97c \uc88b\uc544\ud569\ub2c8\ub2e4.\",\n                sampleTranslation: \"Yes, I like family meals.\"\n            },\n            { \n                question: \"\ub2f9\uc2e0\uc740 \uac00\uc871\uacfc \uc601\ud654\ub97c \uc88b\uc544\ud558\ub098\uc694?\", \n                translation: \"Do you like watching movies with your family?\", \n                keywords: [\"\uc601\ud654\", \"\uac00\uc871\uacfc\", \"\uc88b\uc544\ud558\ub098\uc694\"], \n                sampleAnswer: \"\ub124, \uac00\uc871\uacfc \uc601\ud654\ub97c \uc88b\uc544\ud569\ub2c8\ub2e4.\",\n                sampleTranslation: \"Yes, I like watching movies with my family.\"\n            },\n            { \n                question: \"\ub2f9\uc2e0\uc740 \uac00\uc871\uacfc \uc6b4\ub3d9\uc744 \uc88b\uc544\ud558\ub098\uc694?\", \n                translation: \"Do you like exercising with your family?\", \n                keywords: [\"\uc6b4\ub3d9\", \"\uac00\uc871\uacfc\", \"\uc88b\uc544\ud558\ub098\uc694\"], \n                sampleAnswer: \"\ub124, \uac00\uc871\uacfc \uc6b4\ub3d9\uc744 \uc88b\uc544\ud569\ub2c8\ub2e4.\",\n                sampleTranslation: \"Yes, I like exercising with my family.\"\n            },\n            { \n                question: \"\ub2f9\uc2e0\uc740 \uac00\uc871\uacfc \uc5ec\ud589 \uacc4\ud68d\uc744 \uc138\uc6b0\ub294 \uac83\uc744 \uc88b\uc544\ud558\ub098\uc694?\", \n                translation: \"Do you like planning trips with your family?\", \n                keywords: [\"\uc5ec\ud589 \uacc4\ud68d\", \"\uac00\uc871\uacfc\", \"\uc88b\uc544\ud558\ub098\uc694\"], \n                sampleAnswer: \"\ub124, \uac00\uc871\uacfc \uc5ec\ud589 \uacc4\ud68d\uc744 \uc138\uc6b0\ub294 \uac83\uc744 \uc88b\uc544\ud569\ub2c8\ub2e4.\",\n                sampleTranslation: \"Yes, I like planning trips with my family.\"\n            },\n            { \n                question: \"\ub2f9\uc2e0\uc740 \uac00\uc871\uacfc \ud568\uaed8 \uc694\ub9ac\ud558\ub294 \uac83\uc744 \uc88b\uc544\ud558\ub098\uc694?\", \n                translation: \"Do you like cooking with your family?\", \n                keywords: [\"\uc694\ub9ac\", \"\uac00\uc871\uacfc\", \"\uc88b\uc544\ud558\ub098\uc694\"], \n                sampleAnswer: \"\ub124, \uac00\uc871\uacfc \ud568\uaed8 \uc694\ub9ac\ud558\ub294 \uac83\uc744 \uc88b\uc544\ud569\ub2c8\ub2e4.\",\n                sampleTranslation: \"Yes, I like cooking with my family.\"\n            },\n            { \n                question: \"\ub2f9\uc2e0\uc740 \uac00\uc871\uacfc \uac8c\uc784\uc744 \uc88b\uc544\ud558\ub098\uc694?\", \n                translation: \"Do you like playing games with your family?\", \n                keywords: [\"\uac8c\uc784\", \"\uac00\uc871\uacfc\", \"\uc88b\uc544\ud558\ub098\uc694\"], \n                sampleAnswer: \"\ub124, \uac00\uc871\uacfc \uac8c\uc784\uc744 \uc88b\uc544\ud569\ub2c8\ub2e4.\",\n                sampleTranslation: \"Yes, I like playing games with my family.\"\n            },\n            { \n                question: \"\ub2f9\uc2e0\uc740 \uac00\uc871\uacfc \ud568\uaed8 \uc0b0\ucc45\ud558\ub294 \uac83\uc744 \uc88b\uc544\ud558\ub098\uc694?\", \n                translation: \"Do you like taking walks with your family?\", \n                keywords: [\"\uc0b0\ucc45\", \"\uac00\uc871\uacfc\", \"\uc88b\uc544\ud558\ub098\uc694\"], \n                sampleAnswer: \"\ub124, \uac00\uc871\uacfc \ud568\uaed8 \uc0b0\ucc45\ud558\ub294 \uac83\uc744 \uc88b\uc544\ud569\ub2c8\ub2e4.\",\n                sampleTranslation: \"Yes, I like taking walks with my family.\"\n            },\n            { \n                question: \"\ub2f9\uc2e0\uc740 \uac00\uc871\uacfc \uc0ac\uc9c4\uc744 \ucc0d\ub294 \uac83\uc744 \uc88b\uc544\ud558\ub098\uc694?\", \n                translation: \"Do you like taking photos with your family?\", \n                keywords: [\"\uc0ac\uc9c4\uc744 \ucc0d\ub294\", \"\uac00\uc871\uacfc\", \"\uc88b\uc544\ud558\ub098\uc694\"], \n                sampleAnswer: \"\ub124, \uac00\uc871\uacfc \uc0ac\uc9c4\uc744 \ucc0d\ub294 \uac83\uc744 \uc88b\uc544\ud569\ub2c8\ub2e4.\",\n                sampleTranslation: \"Yes, I like taking photos with my family.\"\n            },\n            { \n                question: \"\ub2f9\uc2e0\uc740 \uac00\uc871\uacfc \uc74c\uc545\uc744 \ub4e3\ub294 \uac83\uc744 \uc88b\uc544\ud558\ub098\uc694?\", \n                translation: \"Do you like listening to music with your family?\", \n                keywords: [\"\uc74c\uc545\uc744 \ub4e3\ub294\", \"\uac00\uc871\uacfc\", \"\uc88b\uc544\ud558\ub098\uc694\"], \n                sampleAnswer: \"\ub124, \uac00\uc871\uacfc \uc74c\uc545\uc744 \ub4e3\ub294 \uac83\uc744 \uc88b\uc544\ud569\ub2c8\ub2e4.\",\n                sampleTranslation: \"Yes, I like listening to music with my family.\"\n            }\n\n\n        ];\n\n        let currentQuestionIndex = 0;\n        let isSpeechRecognitionSupported = false;\n        let recognition;\n\n        let waitingForRepetition = false; \/\/ Flag to track if waiting for repetition\n\n        const speechSynthesisSupported = 'speechSynthesis' in window;\n\n        let selectedVoice = null; \/\/ Variable to hold the selected voice\n\n        \/\/ Feature detection for Speech Recognition\n        if (window.SpeechRecognition || window.webkitSpeechRecognition) {\n            isSpeechRecognitionSupported = true;\n            recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();\n            recognition.lang = 'ko-KR';\n            recognition.interimResults = false;\n            recognition.maxAlternatives = 1;\n        }\n\n        \/\/ Function to populate the voice selection dropdown\n        function populateVoiceList() {\n            const voiceSelect = document.getElementById('voice-select');\n            const voices = speechSynthesis.getVoices().filter(voice => voice.lang === 'ko-KR');\n\n            \/\/ Sort voices alphabetically by name\n            voices.sort((a, b) => a.name.localeCompare(b.name));\n\n            voices.forEach((voice, index) => {\n                const option = document.createElement('option');\n                option.value = index;\n                \/\/ Attempt to infer gender from voice name\n                let gender = \"Unknown\";\n                if (\/female\/i.test(voice.name)) {\n                    gender = \"Female\";\n                } else if (\/male\/i.test(voice.name)) {\n                    gender = \"Male\";\n                }\n                option.textContent = `${voice.name} (${gender})`;\n                voiceSelect.appendChild(option);\n            });\n\n            \/\/ If no Korean voices are found, inform the user\n            if (voices.length === 0) {\n                const option = document.createElement('option');\n                option.value = \"\";\n                option.textContent = \"No Korean voices available\";\n                voiceSelect.appendChild(option);\n            }\n        }\n\n        window.onload = function() {\n            if (speechSynthesisSupported) {\n                if (window.speechSynthesis.getVoices().length === 0) {\n                    \/\/ Voices not loaded yet, wait for the event\n                    window.speechSynthesis.onvoiceschanged = function() {\n                        populateVoiceList();\n                        \/\/ No immediate greeting; user initiates with Start Lesson\n                    };\n                } else {\n                    \/\/ Voices already loaded\n                    populateVoiceList();\n                }\n            } else {\n                alert('Sorry, your browser does not support speech synthesis. Please use a compatible browser for the best experience.');\n                appendMessage('Speech synthesis not supported in your browser.', 'bot');\n            }\n\n            if (!isSpeechRecognitionSupported) {\n                \/\/ Show text input and submit button\n                document.getElementById('user-input').style.display = 'block';\n                document.getElementById('submit-btn').style.display = 'block';\n            }\n\n            \/\/ Event listener for voice selection\n            document.getElementById('voice-select').addEventListener('change', function() {\n                const selectedIndex = this.value;\n                const voices = speechSynthesis.getVoices().filter(voice => voice.lang === 'ko-KR');\n                if (selectedIndex !== \"\") {\n                    selectedVoice = voices[selectedIndex];\n                } else {\n                    selectedVoice = null; \/\/ Default voice\n                }\n            });\n        };\n\n        \/\/ Start Lesson Button Click\n        document.getElementById('start-btn').onclick = function() {\n            currentQuestionIndex = 0;\n            clearChat();\n            appendMessage(\"Lesson started! Let's begin.\", 'bot');\n            sayText(\"Lesson started! Let's begin.\", 'en', function() {\n                askCurrentQuestion();\n            });\n        };\n\n        \/\/ Stop Lesson Button Click\n        document.getElementById('stop-btn').onclick = function() {\n            endLesson(true); \/\/ Stop the lesson when \"Stop\" button is clicked\n        };\n\n        \/\/ Handle Submit Button Click (for text input)\n        document.getElementById('submit-btn').onclick = function() {\n            let userInput = document.getElementById('user-input').value.trim();\n            document.getElementById('user-input').value = '';\n            if (userInput) {\n                appendMessage(userInput, 'user');\n                if (waitingForRepetition) {\n                    \/\/ Handle repetition\n                    handleRepetition(userInput);\n                } else {\n                    evaluateResponse(userInput);\n                }\n            }\n        };\n\n        \/\/ Allow pressing 'Enter' to submit the answer (for text input)\n        document.getElementById('user-input').addEventListener('keypress', function(event) {\n            if (event.key === 'Enter') {\n                event.preventDefault();\n                document.getElementById('submit-btn').click();\n            }\n        });\n\n        \/\/ Function to Ask the Current Question\n        function askCurrentQuestion() {\n            if (currentQuestionIndex < doYouLikeQuestions.length) {\n                const questionObj = doYouLikeQuestions[currentQuestionIndex];\n                const question = questionObj.question;\n                const translation = questionObj.translation;\n\n                \/\/ Display the question in the chat\n                appendMessage(`Question ${currentQuestionIndex + 1}: ${question} (${translation})`, 'bot');\n\n                \/\/ Update the question box with the current question and sample answer\n                updateQuestionBox(questionObj, true); \/\/ Show both question and sample answer\n\n                \/\/ Speak the question twice\n                sayText(question, \"ko-KR\", function() {\n                    sayText(question, \"ko-KR\", function() {\n                        if (isSpeechRecognitionSupported) {\n                            \/\/ Prompt user to respond via voice\n                            appendMessage(\"Please provide your answer after the beep.\", 'bot');\n                            sayText(\"Please provide your answer after the beep.\", \"en\", function() {\n                                listenUserResponse();\n                            });\n                        } else {\n                            \/\/ Prompt user to respond via text\n                            appendMessage(\"Please type your answer in the text box below.\", 'bot');\n                            sayText(\"Please type your answer in the text box below.\", \"en\");\n                            \/\/ Focus the text input\n                            document.getElementById('user-input').focus();\n                        }\n                    });\n                });\n            } else {\n                endLesson();\n            }\n        }\n\n        \/\/ Function to Listen for User Response (Voice Input)\n        function listenUserResponse() {\n            recognition.lang = 'ko-KR'; \/\/ Set language to Korean\n\n            recognition.onresult = function(event) {\n                let userInput = event.results[0][0].transcript.trim();\n                appendMessage(userInput, 'user');\n                evaluateResponse(userInput);\n            };\n\n            recognition.onerror = function(event) {\n                let errorMessage = '';\n                switch(event.error) {\n                    case 'no-speech':\n                        errorMessage = 'No speech detected. Please try again or type your answer.';\n                        break;\n                    case 'audio-capture':\n                        errorMessage = 'Microphone access denied. Please check your settings or type your answer.';\n                        break;\n                    case 'not-allowed':\n                        errorMessage = 'Permission to use microphone denied.';\n                        break;\n                    default:\n                        errorMessage = 'An error occurred: ' + event.error;\n                }\n                appendMessage(errorMessage, 'bot');\n                sayText(errorMessage, 'en');\n            };\n\n            recognition.onend = function() {\n                \/\/ Recognition session ended\n            };\n\n            recognition.start();\n        }\n\n        \/\/ Function to Evaluate User Response\n        function evaluateResponse(userInput) {\n            const questionObj = doYouLikeQuestions[currentQuestionIndex];\n            const expectedAnswer = questionObj.sampleAnswer;\n            const expectedTranslation = questionObj.sampleTranslation;\n\n            \/\/ Normalize inputs for comparison\n            const normalize = (str) => str.replace(\/\\s+\/g, '').replace(\/[.,\\\/#!$%\\^&\\*;:{}=\\-_`~()]\/g,\"\").toLowerCase();\n\n            if (normalize(userInput) === normalize(expectedAnswer)) {\n                const positiveMessage = \"Great! Your answer is correct.\";\n                appendMessage(positiveMessage, 'bot');\n                sayText(positiveMessage, 'en', function() {\n                    currentQuestionIndex++;\n                    askCurrentQuestion();\n                });\n            } else {\n                \/\/ Provide the correct answer and ask the user to repeat it\n                const incorrectMessage = `Your answer is not correct. The correct answer is: ${questionObj.sampleAnswer}`;\n                appendMessage(incorrectMessage, 'bot');\n                sayText(incorrectMessage, 'en', function() {\n                    \/\/ Speak the correct answer in Korean\n                    sayText(questionObj.sampleAnswer, 'ko-KR', function() {\n                        \/\/ Prompt the user to repeat the correct answer\n                        const repeatPrompt = \"Please repeat the correct answer.\";\n                        appendMessage(repeatPrompt, 'bot');\n                        sayText(repeatPrompt, 'en', function() {\n                            if (isSpeechRecognitionSupported) {\n                                \/\/ Listen for the user's repetition via voice\n                                waitingForRepetition = true;\n                                listenForRepetition();\n                            } else {\n                                \/\/ Prompt user to type the repetition\n                                appendMessage(\"Please type the correct answer in the text box below.\", 'bot');\n                                sayText(\"Please type the correct answer in the text box below.\", 'en');\n                                \/\/ Focus the text input\n                                document.getElementById('user-input').focus();\n                                waitingForRepetition = true;\n                            }\n                        });\n                    });\n                });\n            }\n        }\n\n        \/\/ Function to Listen for User's Repetition\n        function listenForRepetition() {\n            recognition.lang = 'ko-KR'; \/\/ Set language to Korean\n\n            recognition.onresult = function(event) {\n                let userInput = event.results[0][0].transcript.trim();\n                appendMessage(userInput, 'user');\n                handleRepetition(userInput);\n            };\n\n            recognition.onerror = function(event) {\n                let errorMessage = '';\n                switch(event.error) {\n                    case 'no-speech':\n                        errorMessage = 'No speech detected. Moving on to the next question.';\n                        break;\n                    case 'audio-capture':\n                        errorMessage = 'Microphone access denied. Moving on to the next question.';\n                        break;\n                    case 'not-allowed':\n                        errorMessage = 'Permission to use microphone denied.';\n                        break;\n                    default:\n                        errorMessage = 'An error occurred: ' + event.error + '. Moving on to the next question.';\n                }\n                appendMessage(errorMessage, 'bot');\n                sayText(errorMessage, 'en', function() {\n                    waitingForRepetition = false;\n                    currentQuestionIndex++;\n                    askCurrentQuestion();\n                });\n            };\n\n            recognition.onend = function() {\n                \/\/ Recognition session ended\n            };\n\n            recognition.start();\n        }\n\n        \/\/ Function to Handle User's Repetition (for both voice and text input)\n        function handleRepetition(userInput) {\n            \/\/ Optionally check if user's repetition matches the correct answer\n            const questionObj = doYouLikeQuestions[currentQuestionIndex];\n            const expectedAnswer = questionObj.sampleAnswer;\n            const normalize = (str) => str.replace(\/\\s+\/g, '').replace(\/[.,\\\/#!$%\\^&\\*;:{}=\\-_`~()]\/g,\"\").toLowerCase();\n\n            if (normalize(userInput) === normalize(expectedAnswer)) {\n                const positiveMessage = \"Well done! Let's move on to the next question.\";\n                appendMessage(positiveMessage, 'bot');\n                sayText(positiveMessage, 'en', function() {\n                    waitingForRepetition = false;\n                    currentQuestionIndex++;\n                    askCurrentQuestion();\n                });\n            } else {\n                const encourageMessage = \"Thank you for repeating. Let's move on to the next question.\";\n                appendMessage(encourageMessage, 'bot');\n                sayText(encourageMessage, 'en', function() {\n                    waitingForRepetition = false;\n                    currentQuestionIndex++;\n                    askCurrentQuestion();\n                });\n            }\n        }\n\n        \/\/ Function to Update the Question Box with Current Question and Sample Answer\n        function updateQuestionBox(questionObj, showAnswer) {\n            const questionBox = document.getElementById('question-box');\n            questionBox.innerHTML = ''; \/\/ Clear previous content\n\n            const questionElement = document.createElement('div');\n            questionElement.classList.add('question-item');\n\n            const questionHeader = document.createElement('h3');\n            questionHeader.innerText = questionObj.question;\n            questionHeader.title = \"Click to hear the question in Korean\";\n            questionHeader.addEventListener('click', () => sayText(questionObj.question, 'ko-KR'));\n            questionElement.appendChild(questionHeader);\n\n            const translationPara = document.createElement('p');\n            translationPara.innerHTML = `<strong>Translation:<\/strong> ${questionObj.translation}`;\n            questionElement.appendChild(translationPara);\n\n            if (showAnswer) {\n                const sampleAnswerPara = document.createElement('p');\n                sampleAnswerPara.innerHTML = `<strong>Sample Answer:<\/strong> ${questionObj.sampleAnswer}`;\n                questionElement.appendChild(sampleAnswerPara);\n\n                const sampleTranslationPara = document.createElement('p');\n                sampleTranslationPara.innerHTML = `<strong>Sample Translation:<\/strong> ${questionObj.sampleTranslation}`;\n                questionElement.appendChild(sampleTranslationPara);\n            }\n\n            questionBox.appendChild(questionElement);\n        }\n\n        \/\/ Function to End the Lesson\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 completed all the 'Do You Like' questions related to family. Keep practicing!\";\n            }\n            appendMessage(message, \"bot\");\n            sayText(message, \"en\");\n        }\n\n        \/\/ Function to Speak Text Using Speech Synthesis\n        function sayText(text, lang, callback) {\n            if (!speechSynthesisSupported) {\n                if (callback) callback();\n                return;\n            }\n            const utterance = new SpeechSynthesisUtterance(text);\n            utterance.lang = lang;\n            utterance.rate = 1.0;\n            utterance.pitch = 1.0;\n\n            \/\/ Select the desired voice\n            if (lang.startsWith('ko')) {\n                if (selectedVoice) {\n                    utterance.voice = selectedVoice;\n                } else {\n                    \/\/ Filter voices to find native Korean voices\n                    const koreanVoices = speechSynthesis.getVoices().filter(voice => voice.lang === 'ko-KR');\n                    if (koreanVoices.length > 0) {\n                        \/\/ Prefer female voices for naturalness\n                        selectedVoice = koreanVoices.find(voice => \/female\/i.test(voice.name)) || koreanVoices[0];\n                        utterance.voice = selectedVoice;\n                    } else {\n                        \/\/ No native Korean voices found\n                        appendMessage(\"No native Korean voices available. Please install or enable Korean voices on your device for the best experience.\", 'bot');\n                        sayText(\"No native Korean voices available. Please install or enable Korean voices on your device for the best experience.\", 'en', callback);\n                        return;\n                    }\n                }\n            } else {\n                \/\/ For English or other languages, select the default voice\n                const voices = speechSynthesis.getVoices();\n                let selectedEnglishVoice = voices.find(voice => voice.lang === lang) || voices.find(voice => voice.lang.startsWith(lang));\n                if (selectedEnglishVoice) {\n                    utterance.voice = selectedEnglishVoice;\n                }\n            }\n\n            utterance.onend = function() {\n                if (callback) callback();\n            };\n            window.speechSynthesis.speak(utterance);\n        }\n\n        \/\/ Function to Append Messages to the Chat\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 to Clear the Chat\n        function clearChat() {\n            const messageContainer = document.getElementById('chat-messages');\n            messageContainer.innerHTML = '';\n        }\n    <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Korean Like-Question &#8211; Family Vocabulary Sentences Yes\/No Questions WH-Questions Like-Questions Interactions The current question and sample answer will appear here during the lesson. Choose Korean Voice: Default Korean Like-Question &#8211; Family Submit Start Lesson Stop<\/p>\n","protected":false},"author":1,"featured_media":1348,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[46,45,34],"tags":[],"class_list":["post-1761","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-family-korean","category-korean","category-robots"],"featured_image_src":"https:\/\/phamho.com\/book\/wp-content\/uploads\/2024\/06\/Teacher3-1024x585.webp","blog_images":{"medium":"https:\/\/phamho.com\/book\/wp-content\/uploads\/2024\/06\/Teacher3-300x171.webp","large":"https:\/\/phamho.com\/book\/wp-content\/uploads\/2024\/06\/Teacher3-1024x585.webp"},"ams_acf":[],"_links":{"self":[{"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/posts\/1761","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=1761"}],"version-history":[{"count":2,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/posts\/1761\/revisions"}],"predecessor-version":[{"id":1765,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/posts\/1761\/revisions\/1765"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/media\/1348"}],"wp:attachment":[{"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/media?parent=1761"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/categories?post=1761"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/tags?post=1761"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}