Korean Interaction – 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 \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 \n <div class=\"container\">\n \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 \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 \n <\/select>\n <\/div>\n <\/div>\n\n \n <div class=\"chat-container\">\n <div class=\"chat-header\">\n <h2>Korean Interaction – Family<\/h2>\n <\/div>\n <div class=\"chat-messages\" id=\"chat-messages\">\n \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 \n <script>\n \/\/ Array of \"Do You Like\" Questions\n const doYouLikeQuestions = [\n { \n question: \"\ub2f9\uc2e0\uc740 \uac00\uc871\uacfc \uc5bc\ub9c8\ub098 \uc790\uc8fc \uc5f0\ub77d\ud558\ub098\uc694?\", \n translation: \"How often do you keep in touch with your family?\", \n type: \"wh\",\n keywords: [\"\uc5bc\ub9c8\ub098\", \"\uc790\uc8fc\", \"\uc5f0\ub77d\ud558\ub098\uc694\"], \n sampleAnswer: \"\uc800\ub294 \uac00\uc871\uacfc \ub9e4\uc77c \uc5f0\ub77d\ud569\ub2c8\ub2e4.\",\n sampleTranslation: \"I keep in touch with my family every day.\"\n },\n { \n question: \"\ub2f9\uc2e0\uc740 \ubd80\ubaa8\ub2d8\uacfc \ud568\uaed8 \uc0b4\uace0 \uc788\ub098\uc694?\", \n translation: \"Are you living with your parents?\", \n type: \"yesno\",\n keywords: [\"\ubd80\ubaa8\ub2d8\", \"\ud568\uaed8\", \"\uc0b4\uace0 \uc788\ub098\uc694\"], \n sampleAnswer: \"\uc544\ub2c8\uc694, \uc800\ub294 \ubd80\ubaa8\ub2d8\uacfc \ud568\uaed8 \uc0b4\uace0 \uc788\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4.\",\n sampleTranslation: \"No, I am not living with my parents.\"\n },\n { \n question: \"\ub2f9\uc2e0\uc740 \ud615\uc81c\ub97c \uc88b\uc544\ud558\ub098\uc694?\", \n translation: \"Do you like your siblings?\", \n type: \"like\",\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\uc758 \uac00\uc871\uc740 \uc5b4\ub514\uc5d0 \uc0ac\ub098\uc694?\", \n translation: \"Where does your family live?\", \n type: \"wh\",\n keywords: [\"\uac00\uc871\", \"\uc5b4\ub514\uc5d0\", \"\uc0ac\ub098\uc694\"], \n sampleAnswer: \"\uc800\uc758 \uac00\uc871\uc740 \uc11c\uc6b8\uc5d0 \uc0bd\ub2c8\ub2e4.\",\n sampleTranslation: \"My family lives in Seoul.\"\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 type: \"like\",\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 \uc790\uc8fc \ubc29\ubb38\ud558\ub098\uc694?\", \n translation: \"Do you visit your parents often?\", \n type: \"yesno\",\n keywords: [\"\ubd80\ubaa8\ub2d8\", \"\ubc29\ubb38\ud558\ub098\uc694\"], \n sampleAnswer: \"\ub124, \uc800\ub294 \ubd80\ubaa8\ub2d8\uc744 \uc790\uc8fc \ubc29\ubb38\ud569\ub2c8\ub2e4.\",\n sampleTranslation: \"Yes, I visit my parents often.\"\n },\n { \n question: \"\ub2f9\uc2e0\uc758 \uac00\uc871\uc740 \uba87 \uba85\uc785\ub2c8\uae4c?\", \n translation: \"How many members are in your family?\", \n type: \"wh\",\n keywords: [\"\uac00\uc871\", \"\uba87 \uba85\"], \n sampleAnswer: \"\uc81c \uac00\uc871\uc740 \ub124 \uba85\uc785\ub2c8\ub2e4.\",\n sampleTranslation: \"There are four members in my family.\"\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 Interaction – 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 Interaction – Family Submit Start Lesson Stop<\/p>\n","protected":false},"author":1,"featured_media":394,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[46,45,34],"tags":[],"class_list":["post-1763","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\/2023\/02\/hif.jpg","blog_images":{"medium":"https:\/\/phamho.com\/book\/wp-content\/uploads\/2023\/02\/hif-300x200.jpg","large":"https:\/\/phamho.com\/book\/wp-content\/uploads\/2023\/02\/hif.jpg"},"ams_acf":[],"_links":{"self":[{"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/posts\/1763","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=1763"}],"version-history":[{"count":1,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/posts\/1763\/revisions"}],"predecessor-version":[{"id":1764,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/posts\/1763\/revisions\/1764"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/media\/394"}],"wp:attachment":[{"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/media?parent=1763"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/categories?post=1763"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/tags?post=1763"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":1763,"date":"2024-09-30T07:10:32","date_gmt":"2024-09-30T07:10:32","guid":{"rendered":"https:\/\/phamho.com\/book\/?p=1763"},"modified":"2024-09-30T07:11:43","modified_gmt":"2024-09-30T07:11:43","slug":"korean-interaction-family","status":"publish","type":"post","link":"https:\/\/phamho.com\/book\/korean-interaction-family\/","title":{"rendered":"Korean Interaction – Family"},"content":{"rendered":"\n\n\n\n \n Korean Interaction – 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 \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 \n <div class=\"container\">\n \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 \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 \n <\/select>\n <\/div>\n <\/div>\n\n \n <div class=\"chat-container\">\n <div class=\"chat-header\">\n <h2>Korean Interaction – Family<\/h2>\n <\/div>\n <div class=\"chat-messages\" id=\"chat-messages\">\n \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 \n <script>\n \/\/ Array of \"Do You Like\" Questions\n const doYouLikeQuestions = [\n { \n question: \"\ub2f9\uc2e0\uc740 \uac00\uc871\uacfc \uc5bc\ub9c8\ub098 \uc790\uc8fc \uc5f0\ub77d\ud558\ub098\uc694?\", \n translation: \"How often do you keep in touch with your family?\", \n type: \"wh\",\n keywords: [\"\uc5bc\ub9c8\ub098\", \"\uc790\uc8fc\", \"\uc5f0\ub77d\ud558\ub098\uc694\"], \n sampleAnswer: \"\uc800\ub294 \uac00\uc871\uacfc \ub9e4\uc77c \uc5f0\ub77d\ud569\ub2c8\ub2e4.\",\n sampleTranslation: \"I keep in touch with my family every day.\"\n },\n { \n question: \"\ub2f9\uc2e0\uc740 \ubd80\ubaa8\ub2d8\uacfc \ud568\uaed8 \uc0b4\uace0 \uc788\ub098\uc694?\", \n translation: \"Are you living with your parents?\", \n type: \"yesno\",\n keywords: [\"\ubd80\ubaa8\ub2d8\", \"\ud568\uaed8\", \"\uc0b4\uace0 \uc788\ub098\uc694\"], \n sampleAnswer: \"\uc544\ub2c8\uc694, \uc800\ub294 \ubd80\ubaa8\ub2d8\uacfc \ud568\uaed8 \uc0b4\uace0 \uc788\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4.\",\n sampleTranslation: \"No, I am not living with my parents.\"\n },\n { \n question: \"\ub2f9\uc2e0\uc740 \ud615\uc81c\ub97c \uc88b\uc544\ud558\ub098\uc694?\", \n translation: \"Do you like your siblings?\", \n type: \"like\",\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\uc758 \uac00\uc871\uc740 \uc5b4\ub514\uc5d0 \uc0ac\ub098\uc694?\", \n translation: \"Where does your family live?\", \n type: \"wh\",\n keywords: [\"\uac00\uc871\", \"\uc5b4\ub514\uc5d0\", \"\uc0ac\ub098\uc694\"], \n sampleAnswer: \"\uc800\uc758 \uac00\uc871\uc740 \uc11c\uc6b8\uc5d0 \uc0bd\ub2c8\ub2e4.\",\n sampleTranslation: \"My family lives in Seoul.\"\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 type: \"like\",\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 \uc790\uc8fc \ubc29\ubb38\ud558\ub098\uc694?\", \n translation: \"Do you visit your parents often?\", \n type: \"yesno\",\n keywords: [\"\ubd80\ubaa8\ub2d8\", \"\ubc29\ubb38\ud558\ub098\uc694\"], \n sampleAnswer: \"\ub124, \uc800\ub294 \ubd80\ubaa8\ub2d8\uc744 \uc790\uc8fc \ubc29\ubb38\ud569\ub2c8\ub2e4.\",\n sampleTranslation: \"Yes, I visit my parents often.\"\n },\n { \n question: \"\ub2f9\uc2e0\uc758 \uac00\uc871\uc740 \uba87 \uba85\uc785\ub2c8\uae4c?\", \n translation: \"How many members are in your family?\", \n type: \"wh\",\n keywords: [\"\uac00\uc871\", \"\uba87 \uba85\"], \n sampleAnswer: \"\uc81c \uac00\uc871\uc740 \ub124 \uba85\uc785\ub2c8\ub2e4.\",\n sampleTranslation: \"There are four members in my family.\"\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 Interaction – 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 Interaction – Family Submit Start Lesson Stop<\/p>\n","protected":false},"author":1,"featured_media":394,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[46,45,34],"tags":[],"class_list":["post-1763","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\/2023\/02\/hif.jpg","blog_images":{"medium":"https:\/\/phamho.com\/book\/wp-content\/uploads\/2023\/02\/hif-300x200.jpg","large":"https:\/\/phamho.com\/book\/wp-content\/uploads\/2023\/02\/hif.jpg"},"ams_acf":[],"_links":{"self":[{"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/posts\/1763","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=1763"}],"version-history":[{"count":1,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/posts\/1763\/revisions"}],"predecessor-version":[{"id":1764,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/posts\/1763\/revisions\/1764"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/media\/394"}],"wp:attachment":[{"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/media?parent=1763"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/categories?post=1763"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/tags?post=1763"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}