Theme 2 – Psychology and Sociology<\/title>\n <style>\n \/* Reset and Base Styles *\/\n * {\n box-sizing: border-box;\n }\n\n body {\n font-family: Arial, sans-serif;\n background-color: #ffffff;\n margin: 0;\n padding: 0;\n display: flex;\n flex-direction: column; \/* Stack elements vertically by default *\/\n min-height: 100vh;\n }\n\n \/* Menu Styles *\/\n .menu {\n width: 100%;\n background-color: #2e86de; \/* Blue for education *\/\n padding: 10px; \/* Slightly increased padding for touch *\/\n text-align: center;\n box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);\n margin-bottom: 10px; \/* Reduced margin for better spacing *\/\n overflow-x: auto;\n white-space: nowrap;\n }\n .menu a {\n color: #fff;\n text-decoration: none;\n margin: 0 10px; \/* Increased margin for better touch targets *\/\n font-weight: bold;\n font-size: 14px; \/* Slightly increased font for readability *\/\n display: inline-block;\n }\n .menu a:hover,\n .menu a:focus {\n text-decoration: underline;\n outline: 2px dashed #fff;\n outline-offset: 4px;\n }\n\n \/* Container Styles *\/\n .container {\n display: flex;\n flex-direction: column; \/* Stack elements vertically on mobile *\/\n align-items: center;\n padding: 10px; \/* Increased padding for better spacing *\/\n box-sizing: border-box;\n flex: 1 0 auto;\n width: 100%;\n }\n\n \/* Image and Chat Containers *\/\n .image-chat-wrapper {\n display: flex;\n flex-direction: column;\n width: 100%;\n max-width: 800px; \/* Increased max-width for landscape *\/\n flex: 1;\n }\n\n \/* Image Container Styles *\/\n .image-container {\n flex: 1;\n text-align: center;\n margin-bottom: 15px; \/* Reduced margin *\/\n }\n .image-container img {\n width: 100%;\n height: auto;\n max-height: 300px; \/* Set a maximum height *\/\n object-fit: cover;\n border-radius: 15px; \/* Reduced border-radius *\/\n box-shadow: 0 0 8px rgba(0, 0, 0, 0.1); \/* Reduced shadow *\/\n }\n .sentence-text {\n margin: 10px 0; \/* Increased margin for better spacing *\/\n font-weight: bold;\n color: #333;\n font-size: 16px; \/* Increased font size for readability *\/\n }\n .word-box {\n margin-top: 10px; \/* Increased margin *\/\n padding: 10px; \/* Increased padding *\/\n background-color: #fff;\n border: 2px solid #2e86de; \/* Updated border color *\/\n border-radius: 8px; \/* Reduced border-radius *\/\n box-shadow: 0 0 8px rgba(0, 0, 0, 0.1); \/* Reduced shadow *\/\n font-size: 16px; \/* Maintain readability *\/\n font-weight: bold;\n color: #2e86de; \/* Updated text color *\/\n text-align: left;\n max-height: 250px; \/* Maintain max-height *\/\n overflow-y: auto;\n }\n\n \/* Chat Container Styles *\/\n .chat-container {\n background-color: #2e86de; \/* Updated color *\/\n border-radius: 15px; \/* Reduced border-radius *\/\n box-shadow: 0 0 8px rgba(0, 0, 0, 0.1); \/* Reduced shadow *\/\n overflow: hidden;\n display: flex;\n flex-direction: column;\n height: auto; \/* Removed fixed height *\/\n max-height: 500px; \/* Set a reasonable max-height *\/\n flex: 1;\n }\n .chat-header {\n background-color: #1b4f72; \/* Darker shade for header *\/\n color: #fff;\n padding: 12px; \/* Increased padding for better touch *\/\n text-align: center;\n border-bottom: 1px solid #0e2143; \/* Updated border color *\/\n }\n .chat-header h2 {\n margin: 0;\n font-size: 18px; \/* Increased font size for readability *\/\n }\n .chat-messages {\n padding: 12px; \/* Increased padding *\/\n overflow-y: auto;\n flex: 1;\n background-color: #fff;\n max-height: 300px; \/* Maintain max-height *\/\n }\n .message {\n margin-bottom: 10px; \/* Increased margin *\/\n padding: 10px; \/* Increased padding *\/\n border-radius: 6px; \/* Slightly increased border-radius *\/\n font-size: 14px; \/* Increased font size for readability *\/\n line-height: 1.5;\n }\n .user-message {\n background-color: #27ae60;\n color: #fff;\n text-align: right;\n }\n .bot-message {\n background-color: #2980b9;\n color: #fff;\n text-align: left;\n }\n\n \/* Chat Input Styles *\/\n .chat-input {\n display: flex;\n align-items: center;\n background-color: #a3e106;\n padding: 10px; \/* Increased padding *\/\n justify-content: space-between;\n }\n .send-button, .stop-button {\n background-color: #17c686;\n color: #fff;\n font-weight: bold;\n border: none;\n border-radius: 5px;\n padding: 12px 16px; \/* Increased padding for touch *\/\n cursor: pointer;\n transition: background-color 0.3s;\n flex: 1;\n margin: 0 6px; \/* Increased margin for better spacing *\/\n max-width: 150px; \/* Increased max-width for longer labels *\/\n font-size: 16px; \/* Increased font size for readability *\/\n }\n .stop-button {\n background-color: #c86722;\n }\n .send-button:hover,\n .stop-button:hover,\n .send-button:focus,\n .stop-button:focus {\n background-color: #45a049;\n outline: none;\n }\n\n \/* Loader Styles *\/\n .loader {\n border: 4px solid #f3f3f3;\n border-top: 4px solid #2980b9; \/* Updated color *\/\n border-radius: 50%;\n width: 20px;\n height: 20px;\n animation: spin 2s linear infinite;\n display: inline-block;\n margin-left: 10px;\n }\n\n @keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n }\n\n \/* Responsive Design Adjustments *\/\n\n \/* Portrait Mode *\/\n @media (orientation: portrait) {\n .image-chat-wrapper {\n flex-direction: column;\n }\n .image-container, .chat-container {\n width: 100%;\n max-width: 100%;\n }\n }\n\n \/* Landscape Mode *\/\n @media (orientation: landscape) and (min-width: 600px) {\n .image-chat-wrapper {\n flex-direction: row;\n justify-content: space-between;\n }\n .image-container, .chat-container {\n width: 48%;\n max-width: 48%;\n }\n .word-box {\n max-height: 200px;\n }\n .chat-header h2 {\n font-size: 20px;\n }\n .message {\n font-size: 15px;\n }\n .send-button, .stop-button {\n font-size: 18px;\n padding: 14px 20px;\n max-width: 200px;\n }\n }\n\n \/* General Mobile Responsiveness *\/\n @media (max-width: 768px) {\n .chat-header h2 {\n font-size: 16px;\n }\n .message {\n font-size: 14px;\n }\n .send-button, .stop-button {\n font-size: 16px;\n padding: 12px 16px;\n max-width: 150px;\n }\n .word-box {\n font-size: 15px;\n }\n }\n\n \/* Samsung Android Specific Adjustments *\/\n @media only screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {\n \/* Adjust font sizes and button sizes for high-density screens *\/\n .chat-header h2 {\n font-size: 18px; \/* Increased font size *\/\n }\n .send-button, .stop-button {\n padding: 14px 18px; \/* Adjusted padding *\/\n font-size: 16px; \/* Adjusted font size *\/\n }\n .message {\n font-size: 14px; \/* Adjusted font size *\/\n }\n .word-box {\n font-size: 16px; \/* Adjusted font size *\/\n }\n .chat-input input {\n font-size: 16px; \/* Adjusted font size *\/\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"menu\">\n <a href=\"https:\/\/phamho.com\/book\/2024\/09\/23\/theme-1-systems-of-education\/\">Systems of education<\/a>\n <a href=\"https:\/\/phamho.com\/book\/2024\/09\/23\/theme-2-psychology-and-sociology\/\">Psychology and sociology<\/a>\n <a href=\"https:\/\/phamho.com\/book\/2024\/09\/23\/theme-3-work-business\/\">Work & Business<\/a>\n <a href=\"https:\/\/phamho.com\/book\/2024\/09\/23\/theme-4-science-and-nature\/\">Science and Nature<\/a>\n <a href=\"https:\/\/phamho.com\/book\/2024\/09\/23\/theme-5-physical-world\/\">Physical World<\/a>\n <\/div>\n\n <div class=\"container\">\n <div class=\"image-chat-wrapper\">\n <div class=\"image-container\">\n <img decoding=\"async\" src=\"https:\/\/phamho.com\/book\/wp-content\/uploads\/2024\/09\/DALL\u00b7E-2024-09-23-16.19.55-A-futuristic-classroom-setting-where-a-robot-is-teaching-an-IELTS-speaking-class.-The-robot-stands-at-the-front-of-the-room-gesturing-toward-a-digita.webp\" alt=\"Lesson Teacher\">\n <div class=\"sentence-text\">Look at the sentences in this box<\/div>\n <div id=\"word-box\" class=\"word-box\">\n \n <\/div>\n <\/div>\n <div class=\"chat-container\">\n <div class=\"chat-header\">\n <h2>Theme 2 – Psychology and Sociology<\/h2>\n <\/div>\n <div class=\"chat-messages\" id=\"chat-messages\">\n \n <\/div>\n <div class=\"chat-input\">\n \n <button id=\"start-btn\" class=\"send-button\" aria-label=\"Start Lesson\">Start<\/button>\n <button id=\"stop-btn\" class=\"stop-button\" aria-label=\"Stop Lesson\">Stop<\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n \/\/ Define the questions with expected keywords and model answers\n const questions = [\n { \n english: \"How would you describe yourself?\", \n keywords: [\"describe\", \"outgoing\", \"thoughtful\", \"personality\", \"traits\", \"characteristics\"],\n answer: \"I would describe myself as an outgoing and thoughtful person. I enjoy meeting new people and always strive to understand others.\"\n },\n { \n english: \"In which ways are you similar to your friends?\", \n keywords: [\"similar\", \"friends\", \"shared interests\", \"love for reading\", \"traveling\", \"honesty\", \"loyalty\"],\n answer: \"I share a love for reading and traveling with my friends. We also value honesty and loyalty in our relationships.\"\n },\n { \n english: \"Are you similar to or different from your brother\/sister\/father\/mother?\", \n keywords: [\"similar\", \"different\", \"siblings\", \"family\", \"traits\", \"personality\"],\n answer: \"I am quite different from my sister; while she is very artistic, I am more analytical and enjoy solving problems.\"\n },\n { \n english: \"What do you think a true friend should be like?\", \n keywords: [\"true friend\", \"trustworthy\", \"supportive\", \"understanding\", \"acceptance\", \"loyalty\"],\n answer: \"A true friend should be trustworthy, supportive, and understanding. They should accept you for who you are and stand by you during tough times.\"\n },\n { \n english: \"When do you like being on your own?\", \n keywords: [\"on my own\", \"alone\", \"concentrate\", \"studies\", \"reflect\", \"personal goals\"],\n answer: \"I like being on my own when I need to concentrate on my studies or when I want to reflect on my personal goals.\"\n },\n { \n english: \"When do you like being with others?\", \n keywords: [\"with others\", \"social gatherings\", \"collaborate\", \"group projects\", \"share ideas\", \"connections\"],\n answer: \"I enjoy being with others during social gatherings and when collaborating on group projects. It's great to share ideas and build connections.\"\n },\n { \n english: \"Can people change their behavior or personality?\", \n keywords: [\"change\", \"behavior\", \"personality\", \"self-awareness\", \"dedicated effort\"],\n answer: \"Yes, I believe people can change their behavior and even aspects of their personality through self-awareness and dedicated effort.\"\n },\n { \n english: \"Can you list some good behavior of students in schools?\", \n keywords: [\"good behavior\", \"students\", \"schools\", \"respectful\", \"completing assignments\", \"participating\", \"helping others\"],\n answer: \"Good behavior includes being respectful to teachers and peers, completing assignments on time, participating actively in class, and helping others.\"\n },\n { \n english: \"Can you list some bad behavior of students in schools?\", \n keywords: [\"bad behavior\", \"students\", \"schools\", \"disrupting\", \"disrespectful\", \"bullying\", \"ignoring rules\"],\n answer: \"Bad behavior involves disrupting classes, being disrespectful, not completing assignments, bullying, and ignoring school rules.\"\n },\n { \n english: \"What can you do to improve your behavior?\", \n keywords: [\"improve behavior\", \"personal goals\", \"self-discipline\", \"feedback\", \"reflection\"],\n answer: \"To improve my behavior, I can set personal goals, practice self-discipline, seek feedback from others, and reflect on my actions regularly.\"\n }\n ];\n\n \/\/ Define positive, constructive, and pronunciation feedback arrays\n const positiveFeedback = [\n \"Great job!\",\n \"Well done!\",\n \"Excellent response!\",\n \"Very well.\",\n \"Your answer was clear and concise.\",\n \"Fantastic!\",\n \"You're doing great!\",\n \"That's a good answer.\"\n ];\n\n const constructiveFeedback = [\n \"Try to include more details related to the question.\",\n \"Could you provide more specific information?\",\n \"Consider mentioning related activities or reasons.\",\n \"Adding relevant keywords can improve your answer.\",\n \"Think about elaborating on your response.\",\n \"Including examples would be helpful.\",\n \"Try to relate your answer to the topic more closely.\",\n \"Expanding your answer will make it better.\",\n \"Providing more context can enhance your response.\",\n \"Think about why or how to add depth to your answer.\"\n ];\n\n \/\/ Define pronunciation feedback messages\n const pronunciationFeedback = [\n \"Your pronunciation is clear, but try to emphasize key words for better clarity.\",\n \"Good job! To improve, pay attention to the pronunciation of 'student' and 'Computer Science'.\",\n \"Well spoken! Consider slowing down to ensure each word is pronounced accurately.\",\n \"Excellent! For even better clarity, try to articulate 'Business Administration' more distinctly.\",\n \"Great effort! Focus on the 'th' sound in words like 'with' and 'this'.\"\n ];\n\n \/\/ Define stop keywords\n const stopKeywords = [\"goodbye\", \"good bye\", \"bye\", \"bye-bye\", \"byebye\"];\n\n let currentQuestionIndex = 0;\n let recognition;\n\n const speechSynthesisSupported = 'speechSynthesis' in window;\n const speechRecognitionSupported = window.SpeechRecognition || window.webkitSpeechRecognition;\n\n let voices = [];\n\n function loadVoices() {\n voices = window.speechSynthesis.getVoices();\n if (voices.length === 0) {\n \/\/ Some browsers load voices asynchronously\n window.speechSynthesis.onvoiceschanged = () => {\n voices = window.speechSynthesis.getVoices();\n console.log(\"Voices loaded:\", voices);\n };\n } else {\n console.log(\"Voices loaded:\", voices);\n }\n }\n\n loadVoices();\n\n window.onload = function() {\n if (speechSynthesisSupported) {\n \/\/ Delay greeting to ensure voices are loaded\n setTimeout(() => greetUser(), 500); \n } else {\n appendMessage(\"Sorry, your browser does not support speech synthesis.\", \"bot\");\n }\n\n if (!speechRecognitionSupported) {\n appendMessage(\"Sorry, your browser does not support speech recognition.\", \"bot\");\n }\n\n \/\/ Handle Start Button Click\n document.getElementById('start-btn').onclick = function() {\n if (!speechSynthesisSupported) {\n appendMessage(\"Speech synthesis is not supported in your browser.\", \"bot\");\n return;\n }\n if (speechRecognitionSupported) {\n currentQuestionIndex = 0;\n clearWordBox();\n startLesson();\n } else {\n appendMessage(\"Speech recognition is not supported in your browser.\", \"bot\");\n }\n };\n\n \/\/ Handle Stop Button Click\n document.getElementById('stop-btn').onclick = function() {\n if (recognition) {\n recognition.stop();\n }\n endLesson(true);\n };\n };\n\n function greetUser() {\n const greeting = \"Hello! Welcome to the Practice Speaking about Psychology and Sociology. In this lesson, you will listen to each question carefully and provide your own answers. After each response, the correct answer will be displayed in the box. Additionally, I'll provide some tips to help improve your pronunciation. Are you ready? Click Start to begin the lesson!\";\n appendMessage(greeting, 'bot');\n sayText(greeting, \"en-US\");\n }\n\n function startLesson() {\n if (currentQuestionIndex < questions.length) {\n const question = questions[currentQuestionIndex];\n const questionNumber = currentQuestionIndex + 1;\n const questionText = `Question ${questionNumber}: '${question.english}'`;\n\n appendMessage(questionText, 'bot');\n addSentenceToBox(`Q${questionNumber}: ${question.english}`); \/\/ Add question to word box\n sayText(`Question ${questionNumber}: ${question.english}`, \"en-US\");\n\n \/\/ Listen for user response after a short delay to ensure the question has been spoken\n setTimeout(() => listenUserResponse(question), 5000);\n } else {\n endLesson();\n }\n }\n\n function listenUserResponse(question) {\n recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();\n recognition.lang = 'en-US';\n recognition.interimResults = false;\n recognition.maxAlternatives = 1;\n\n recognition.start();\n\n recognition.onresult = function(event) {\n let userInput = event.results[0][0].transcript.trim();\n userInput = normalizeAndFormatUserInput(userInput); \/\/ Normalize input and format\n appendMessage(userInput, 'user');\n\n \/\/ Check for stop keywords\n if (checkStopKeywords(userInput.toLowerCase())) {\n endLesson(true);\n return;\n }\n\n \/\/ Analyze user input for keywords\n const feedbackType = analyzeResponse(userInput, question.keywords);\n\n if (feedbackType === \"positive\") {\n const positiveMessage = positiveFeedback[Math.floor(Math.random() * positiveFeedback.length)];\n appendMessage(positiveMessage, 'bot');\n sayText(positiveMessage, 'en-US');\n } else if (feedbackType === \"pronunciation\") {\n const pronunciationMessage = pronunciationFeedback[Math.floor(Math.random() * pronunciationFeedback.length)];\n appendMessage(pronunciationMessage, 'bot');\n sayText(pronunciationMessage, 'en-US');\n } else {\n const constructiveMessage = constructiveFeedback[Math.floor(Math.random() * constructiveFeedback.length)];\n appendMessage(constructiveMessage, 'bot');\n sayText(constructiveMessage, 'en-US');\n }\n\n \/\/ Display the model answer in the word box without speaking it\n const modelAnswer = `Answer: ${question.answer}`;\n addSentenceToBox(modelAnswer);\n \/\/ Removed: sayText(`Your answer should be: ${question.answer}`, \"en-US\");\n\n currentQuestionIndex++; \/\/ Move to next question\n setTimeout(startLesson, 3000); \/\/ Ask next question after 3 seconds\n };\n\n recognition.onspeechend = function() {\n recognition.stop();\n };\n\n recognition.onerror = function(event) {\n appendMessage('Error: ' + event.error, 'bot');\n const retryMessage = \"Let's try that question again.\";\n appendMessage(retryMessage, 'bot');\n sayText(retryMessage, 'en-US');\n setTimeout(() => askSameQuestion(question), 3000); \/\/ Retry the same question\n };\n }\n\n function askSameQuestion(question) {\n const questionNumber = currentQuestionIndex + 1;\n const questionText = `Let's try again: '${question.english}'`;\n\n appendMessage(questionText, 'bot');\n sayText(`Question ${questionNumber}: ${question.english}`, \"en-US\");\n\n addSentenceToBox(`Q${questionNumber}: ${question.english}`); \/\/ Re-add question to word box\n setTimeout(() => listenUserResponse(question), 5000); \/\/ Listen to the response again\n }\n\n function analyzeResponse(userInput, keywords) {\n \/\/ Convert user input to lowercase for case-insensitive matching\n const lowerCaseInput = userInput.toLowerCase();\n\n \/\/ Check if any keyword is present in the user input\n for (let keyword of keywords) {\n if (lowerCaseInput.includes(keyword.toLowerCase())) {\n \/\/ Simulate pronunciation feedback for specific keywords\n if (keyword.toLowerCase().includes(\"student\") || keyword.toLowerCase().includes(\"education\")) {\n return \"pronunciation\";\n }\n return \"positive\";\n }\n }\n\n return \"constructive\";\n }\n\n function checkStopKeywords(userInput) {\n \/\/ Build a regex pattern with word boundaries and ignore case\n let pattern = new RegExp('\\\\b(' + stopKeywords.join('|') + ')\\\\b', 'i');\n return pattern.test(userInput);\n }\n\n function normalizeAndFormatUserInput(text) {\n \/\/ Replace \"i\" with \"I\" and capitalize the first letter of the sentence\n let normalized = text.replace(\/\\bi\\b\/g, \"I\");\n\n \/\/ Format the sentence: capitalize first letter, add a period or question mark as needed\n return formatSentence(normalized);\n }\n\n function formatSentence(text) {\n \/\/ Capitalize the first letter\n text = text.charAt(0).toUpperCase() + text.slice(1);\n\n \/\/ Check if it's a question or a statement\n const questionWords = ['who', 'what', 'where', 'when', 'why', 'how', 'is', 'are', 'do', 'does', 'can', 'should', 'will', 'would'];\n const firstWord = text.split(\" \")[0].toLowerCase();\n\n \/\/ Add question mark if it's a question, otherwise add a period\n if (questionWords.includes(firstWord) && !text.endsWith('?')) {\n text += '?';\n } else if (!text.endsWith('.') && !text.endsWith('?')) {\n text += '.';\n }\n\n return text;\n }\n\n function addSentenceToBox(sentence) {\n const wordBox = document.getElementById('word-box');\n const sentenceElement = document.createElement('div');\n sentenceElement.innerText = sentence;\n wordBox.appendChild(sentenceElement);\n wordBox.scrollTop = wordBox.scrollHeight;\n }\n\n function clearWordBox() {\n const wordBox = document.getElementById('word-box');\n wordBox.innerHTML = \"\";\n }\n\n function endLesson(userStopped = false) {\n \/\/ Cancel any ongoing speech synthesis\n if (speechSynthesisSupported) {\n window.speechSynthesis.cancel();\n }\n\n let message;\n if (userStopped) {\n message = \"Thank you for practicing! Goodbye!\";\n } else {\n message = \"Well done! You've completed all the questions. Keep practicing!\";\n }\n appendMessage(message, \"bot\");\n sayText(message, \"en-US\");\n }\n\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 voice once voices are loaded\n if (voices.length === 0) {\n \/\/ If voices are not loaded yet, wait for them\n window.speechSynthesis.onvoiceschanged = () => {\n voices = window.speechSynthesis.getVoices();\n selectVoice(utterance, lang);\n utterance.onend = function() {\n if (callback) callback();\n };\n window.speechSynthesis.speak(utterance);\n };\n } else {\n selectVoice(utterance, lang);\n utterance.onend = function() {\n if (callback) callback();\n };\n window.speechSynthesis.speak(utterance);\n }\n }\n\n function selectVoice(utterance, lang) {\n \/\/ Prioritize specific high-quality voices available on Android\n const preferredVoiceNames = [\n 'Google US English',\n 'Google UK English Female',\n 'Google UK English Male',\n 'Google US English Female',\n 'Google US English Male'\n ];\n\n \/\/ Try to find a preferred voice first\n let selectedVoice = voices.find(voice => preferredVoiceNames.includes(voice.name));\n\n \/\/ If no preferred voice is found, fallback to any 'en-US' voice\n if (!selectedVoice) {\n selectedVoice = voices.find(voice => voice.lang === lang && voice.name.toLowerCase().includes('english')) ||\n voices.find(voice => voice.lang.startsWith('en'));\n }\n\n if (selectedVoice) {\n utterance.voice = selectedVoice;\n console.log(`Selected voice: ${selectedVoice.name}`);\n } else {\n console.warn(\"No suitable English voice found. Using default voice.\");\n }\n }\n\n function appendMessage(text, sender) {\n const messageContainer = document.getElementById('chat-messages');\n const messageElement = document.createElement('div');\n messageElement.classList.add('message');\n messageElement.classList.add(sender === 'bot' ? 'bot-message' : 'user-message');\n messageElement.innerText = text;\n messageContainer.appendChild(messageElement);\n messageContainer.scrollTop = messageContainer.scrollHeight;\n }\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Theme 2 – Psychology and Sociology Systems of education Psychology and sociology Work & Business Science and Nature Physical World Look at the sentences in this box Theme 2 – Psychology and Sociology Start Stop<\/p>\n","protected":false},"author":1,"featured_media":1699,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[28,34,27,41],"tags":[],"class_list":["post-1701","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-adults","category-robots","category-speaking","category-speaking-1"],"featured_image_src":"https:\/\/phamho.com\/book\/wp-content\/uploads\/2024\/09\/DALL\u00b7E-2024-09-23-16.19.55-A-futuristic-classroom-setting-where-a-robot-is-teaching-an-IELTS-speaking-class.-The-robot-stands-at-the-front-of-the-room-gesturing-toward-a-digita-1024x585.webp","blog_images":{"medium":"https:\/\/phamho.com\/book\/wp-content\/uploads\/2024\/09\/DALL\u00b7E-2024-09-23-16.19.55-A-futuristic-classroom-setting-where-a-robot-is-teaching-an-IELTS-speaking-class.-The-robot-stands-at-the-front-of-the-room-gesturing-toward-a-digita-300x171.webp","large":"https:\/\/phamho.com\/book\/wp-content\/uploads\/2024\/09\/DALL\u00b7E-2024-09-23-16.19.55-A-futuristic-classroom-setting-where-a-robot-is-teaching-an-IELTS-speaking-class.-The-robot-stands-at-the-front-of-the-room-gesturing-toward-a-digita-1024x585.webp"},"ams_acf":[],"_links":{"self":[{"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/posts\/1701","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=1701"}],"version-history":[{"count":2,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/posts\/1701\/revisions"}],"predecessor-version":[{"id":1712,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/posts\/1701\/revisions\/1712"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/media\/1699"}],"wp:attachment":[{"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/media?parent=1701"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/categories?post=1701"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/tags?post=1701"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":1701,"date":"2024-09-23T09:30:09","date_gmt":"2024-09-23T09:30:09","guid":{"rendered":"https:\/\/phamho.com\/book\/?p=1701"},"modified":"2024-09-23T09:41:56","modified_gmt":"2024-09-23T09:41:56","slug":"theme-2-psychology-and-sociology","status":"publish","type":"post","link":"https:\/\/phamho.com\/book\/theme-2-psychology-and-sociology\/","title":{"rendered":"Theme 2 \u2013 Psychology and sociology"},"content":{"rendered":"\n\n\n\n \n \n Theme 2 – Psychology and Sociology<\/title>\n <style>\n \/* Reset and Base Styles *\/\n * {\n box-sizing: border-box;\n }\n\n body {\n font-family: Arial, sans-serif;\n background-color: #ffffff;\n margin: 0;\n padding: 0;\n display: flex;\n flex-direction: column; \/* Stack elements vertically by default *\/\n min-height: 100vh;\n }\n\n \/* Menu Styles *\/\n .menu {\n width: 100%;\n background-color: #2e86de; \/* Blue for education *\/\n padding: 10px; \/* Slightly increased padding for touch *\/\n text-align: center;\n box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);\n margin-bottom: 10px; \/* Reduced margin for better spacing *\/\n overflow-x: auto;\n white-space: nowrap;\n }\n .menu a {\n color: #fff;\n text-decoration: none;\n margin: 0 10px; \/* Increased margin for better touch targets *\/\n font-weight: bold;\n font-size: 14px; \/* Slightly increased font for readability *\/\n display: inline-block;\n }\n .menu a:hover,\n .menu a:focus {\n text-decoration: underline;\n outline: 2px dashed #fff;\n outline-offset: 4px;\n }\n\n \/* Container Styles *\/\n .container {\n display: flex;\n flex-direction: column; \/* Stack elements vertically on mobile *\/\n align-items: center;\n padding: 10px; \/* Increased padding for better spacing *\/\n box-sizing: border-box;\n flex: 1 0 auto;\n width: 100%;\n }\n\n \/* Image and Chat Containers *\/\n .image-chat-wrapper {\n display: flex;\n flex-direction: column;\n width: 100%;\n max-width: 800px; \/* Increased max-width for landscape *\/\n flex: 1;\n }\n\n \/* Image Container Styles *\/\n .image-container {\n flex: 1;\n text-align: center;\n margin-bottom: 15px; \/* Reduced margin *\/\n }\n .image-container img {\n width: 100%;\n height: auto;\n max-height: 300px; \/* Set a maximum height *\/\n object-fit: cover;\n border-radius: 15px; \/* Reduced border-radius *\/\n box-shadow: 0 0 8px rgba(0, 0, 0, 0.1); \/* Reduced shadow *\/\n }\n .sentence-text {\n margin: 10px 0; \/* Increased margin for better spacing *\/\n font-weight: bold;\n color: #333;\n font-size: 16px; \/* Increased font size for readability *\/\n }\n .word-box {\n margin-top: 10px; \/* Increased margin *\/\n padding: 10px; \/* Increased padding *\/\n background-color: #fff;\n border: 2px solid #2e86de; \/* Updated border color *\/\n border-radius: 8px; \/* Reduced border-radius *\/\n box-shadow: 0 0 8px rgba(0, 0, 0, 0.1); \/* Reduced shadow *\/\n font-size: 16px; \/* Maintain readability *\/\n font-weight: bold;\n color: #2e86de; \/* Updated text color *\/\n text-align: left;\n max-height: 250px; \/* Maintain max-height *\/\n overflow-y: auto;\n }\n\n \/* Chat Container Styles *\/\n .chat-container {\n background-color: #2e86de; \/* Updated color *\/\n border-radius: 15px; \/* Reduced border-radius *\/\n box-shadow: 0 0 8px rgba(0, 0, 0, 0.1); \/* Reduced shadow *\/\n overflow: hidden;\n display: flex;\n flex-direction: column;\n height: auto; \/* Removed fixed height *\/\n max-height: 500px; \/* Set a reasonable max-height *\/\n flex: 1;\n }\n .chat-header {\n background-color: #1b4f72; \/* Darker shade for header *\/\n color: #fff;\n padding: 12px; \/* Increased padding for better touch *\/\n text-align: center;\n border-bottom: 1px solid #0e2143; \/* Updated border color *\/\n }\n .chat-header h2 {\n margin: 0;\n font-size: 18px; \/* Increased font size for readability *\/\n }\n .chat-messages {\n padding: 12px; \/* Increased padding *\/\n overflow-y: auto;\n flex: 1;\n background-color: #fff;\n max-height: 300px; \/* Maintain max-height *\/\n }\n .message {\n margin-bottom: 10px; \/* Increased margin *\/\n padding: 10px; \/* Increased padding *\/\n border-radius: 6px; \/* Slightly increased border-radius *\/\n font-size: 14px; \/* Increased font size for readability *\/\n line-height: 1.5;\n }\n .user-message {\n background-color: #27ae60;\n color: #fff;\n text-align: right;\n }\n .bot-message {\n background-color: #2980b9;\n color: #fff;\n text-align: left;\n }\n\n \/* Chat Input Styles *\/\n .chat-input {\n display: flex;\n align-items: center;\n background-color: #a3e106;\n padding: 10px; \/* Increased padding *\/\n justify-content: space-between;\n }\n .send-button, .stop-button {\n background-color: #17c686;\n color: #fff;\n font-weight: bold;\n border: none;\n border-radius: 5px;\n padding: 12px 16px; \/* Increased padding for touch *\/\n cursor: pointer;\n transition: background-color 0.3s;\n flex: 1;\n margin: 0 6px; \/* Increased margin for better spacing *\/\n max-width: 150px; \/* Increased max-width for longer labels *\/\n font-size: 16px; \/* Increased font size for readability *\/\n }\n .stop-button {\n background-color: #c86722;\n }\n .send-button:hover,\n .stop-button:hover,\n .send-button:focus,\n .stop-button:focus {\n background-color: #45a049;\n outline: none;\n }\n\n \/* Loader Styles *\/\n .loader {\n border: 4px solid #f3f3f3;\n border-top: 4px solid #2980b9; \/* Updated color *\/\n border-radius: 50%;\n width: 20px;\n height: 20px;\n animation: spin 2s linear infinite;\n display: inline-block;\n margin-left: 10px;\n }\n\n @keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n }\n\n \/* Responsive Design Adjustments *\/\n\n \/* Portrait Mode *\/\n @media (orientation: portrait) {\n .image-chat-wrapper {\n flex-direction: column;\n }\n .image-container, .chat-container {\n width: 100%;\n max-width: 100%;\n }\n }\n\n \/* Landscape Mode *\/\n @media (orientation: landscape) and (min-width: 600px) {\n .image-chat-wrapper {\n flex-direction: row;\n justify-content: space-between;\n }\n .image-container, .chat-container {\n width: 48%;\n max-width: 48%;\n }\n .word-box {\n max-height: 200px;\n }\n .chat-header h2 {\n font-size: 20px;\n }\n .message {\n font-size: 15px;\n }\n .send-button, .stop-button {\n font-size: 18px;\n padding: 14px 20px;\n max-width: 200px;\n }\n }\n\n \/* General Mobile Responsiveness *\/\n @media (max-width: 768px) {\n .chat-header h2 {\n font-size: 16px;\n }\n .message {\n font-size: 14px;\n }\n .send-button, .stop-button {\n font-size: 16px;\n padding: 12px 16px;\n max-width: 150px;\n }\n .word-box {\n font-size: 15px;\n }\n }\n\n \/* Samsung Android Specific Adjustments *\/\n @media only screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {\n \/* Adjust font sizes and button sizes for high-density screens *\/\n .chat-header h2 {\n font-size: 18px; \/* Increased font size *\/\n }\n .send-button, .stop-button {\n padding: 14px 18px; \/* Adjusted padding *\/\n font-size: 16px; \/* Adjusted font size *\/\n }\n .message {\n font-size: 14px; \/* Adjusted font size *\/\n }\n .word-box {\n font-size: 16px; \/* Adjusted font size *\/\n }\n .chat-input input {\n font-size: 16px; \/* Adjusted font size *\/\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"menu\">\n <a href=\"https:\/\/phamho.com\/book\/2024\/09\/23\/theme-1-systems-of-education\/\">Systems of education<\/a>\n <a href=\"https:\/\/phamho.com\/book\/2024\/09\/23\/theme-2-psychology-and-sociology\/\">Psychology and sociology<\/a>\n <a href=\"https:\/\/phamho.com\/book\/2024\/09\/23\/theme-3-work-business\/\">Work & Business<\/a>\n <a href=\"https:\/\/phamho.com\/book\/2024\/09\/23\/theme-4-science-and-nature\/\">Science and Nature<\/a>\n <a href=\"https:\/\/phamho.com\/book\/2024\/09\/23\/theme-5-physical-world\/\">Physical World<\/a>\n <\/div>\n\n <div class=\"container\">\n <div class=\"image-chat-wrapper\">\n <div class=\"image-container\">\n <img decoding=\"async\" src=\"https:\/\/phamho.com\/book\/wp-content\/uploads\/2024\/09\/DALL\u00b7E-2024-09-23-16.19.55-A-futuristic-classroom-setting-where-a-robot-is-teaching-an-IELTS-speaking-class.-The-robot-stands-at-the-front-of-the-room-gesturing-toward-a-digita.webp\" alt=\"Lesson Teacher\">\n <div class=\"sentence-text\">Look at the sentences in this box<\/div>\n <div id=\"word-box\" class=\"word-box\">\n \n <\/div>\n <\/div>\n <div class=\"chat-container\">\n <div class=\"chat-header\">\n <h2>Theme 2 – Psychology and Sociology<\/h2>\n <\/div>\n <div class=\"chat-messages\" id=\"chat-messages\">\n \n <\/div>\n <div class=\"chat-input\">\n \n <button id=\"start-btn\" class=\"send-button\" aria-label=\"Start Lesson\">Start<\/button>\n <button id=\"stop-btn\" class=\"stop-button\" aria-label=\"Stop Lesson\">Stop<\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n \/\/ Define the questions with expected keywords and model answers\n const questions = [\n { \n english: \"How would you describe yourself?\", \n keywords: [\"describe\", \"outgoing\", \"thoughtful\", \"personality\", \"traits\", \"characteristics\"],\n answer: \"I would describe myself as an outgoing and thoughtful person. I enjoy meeting new people and always strive to understand others.\"\n },\n { \n english: \"In which ways are you similar to your friends?\", \n keywords: [\"similar\", \"friends\", \"shared interests\", \"love for reading\", \"traveling\", \"honesty\", \"loyalty\"],\n answer: \"I share a love for reading and traveling with my friends. We also value honesty and loyalty in our relationships.\"\n },\n { \n english: \"Are you similar to or different from your brother\/sister\/father\/mother?\", \n keywords: [\"similar\", \"different\", \"siblings\", \"family\", \"traits\", \"personality\"],\n answer: \"I am quite different from my sister; while she is very artistic, I am more analytical and enjoy solving problems.\"\n },\n { \n english: \"What do you think a true friend should be like?\", \n keywords: [\"true friend\", \"trustworthy\", \"supportive\", \"understanding\", \"acceptance\", \"loyalty\"],\n answer: \"A true friend should be trustworthy, supportive, and understanding. They should accept you for who you are and stand by you during tough times.\"\n },\n { \n english: \"When do you like being on your own?\", \n keywords: [\"on my own\", \"alone\", \"concentrate\", \"studies\", \"reflect\", \"personal goals\"],\n answer: \"I like being on my own when I need to concentrate on my studies or when I want to reflect on my personal goals.\"\n },\n { \n english: \"When do you like being with others?\", \n keywords: [\"with others\", \"social gatherings\", \"collaborate\", \"group projects\", \"share ideas\", \"connections\"],\n answer: \"I enjoy being with others during social gatherings and when collaborating on group projects. It's great to share ideas and build connections.\"\n },\n { \n english: \"Can people change their behavior or personality?\", \n keywords: [\"change\", \"behavior\", \"personality\", \"self-awareness\", \"dedicated effort\"],\n answer: \"Yes, I believe people can change their behavior and even aspects of their personality through self-awareness and dedicated effort.\"\n },\n { \n english: \"Can you list some good behavior of students in schools?\", \n keywords: [\"good behavior\", \"students\", \"schools\", \"respectful\", \"completing assignments\", \"participating\", \"helping others\"],\n answer: \"Good behavior includes being respectful to teachers and peers, completing assignments on time, participating actively in class, and helping others.\"\n },\n { \n english: \"Can you list some bad behavior of students in schools?\", \n keywords: [\"bad behavior\", \"students\", \"schools\", \"disrupting\", \"disrespectful\", \"bullying\", \"ignoring rules\"],\n answer: \"Bad behavior involves disrupting classes, being disrespectful, not completing assignments, bullying, and ignoring school rules.\"\n },\n { \n english: \"What can you do to improve your behavior?\", \n keywords: [\"improve behavior\", \"personal goals\", \"self-discipline\", \"feedback\", \"reflection\"],\n answer: \"To improve my behavior, I can set personal goals, practice self-discipline, seek feedback from others, and reflect on my actions regularly.\"\n }\n ];\n\n \/\/ Define positive, constructive, and pronunciation feedback arrays\n const positiveFeedback = [\n \"Great job!\",\n \"Well done!\",\n \"Excellent response!\",\n \"Very well.\",\n \"Your answer was clear and concise.\",\n \"Fantastic!\",\n \"You're doing great!\",\n \"That's a good answer.\"\n ];\n\n const constructiveFeedback = [\n \"Try to include more details related to the question.\",\n \"Could you provide more specific information?\",\n \"Consider mentioning related activities or reasons.\",\n \"Adding relevant keywords can improve your answer.\",\n \"Think about elaborating on your response.\",\n \"Including examples would be helpful.\",\n \"Try to relate your answer to the topic more closely.\",\n \"Expanding your answer will make it better.\",\n \"Providing more context can enhance your response.\",\n \"Think about why or how to add depth to your answer.\"\n ];\n\n \/\/ Define pronunciation feedback messages\n const pronunciationFeedback = [\n \"Your pronunciation is clear, but try to emphasize key words for better clarity.\",\n \"Good job! To improve, pay attention to the pronunciation of 'student' and 'Computer Science'.\",\n \"Well spoken! Consider slowing down to ensure each word is pronounced accurately.\",\n \"Excellent! For even better clarity, try to articulate 'Business Administration' more distinctly.\",\n \"Great effort! Focus on the 'th' sound in words like 'with' and 'this'.\"\n ];\n\n \/\/ Define stop keywords\n const stopKeywords = [\"goodbye\", \"good bye\", \"bye\", \"bye-bye\", \"byebye\"];\n\n let currentQuestionIndex = 0;\n let recognition;\n\n const speechSynthesisSupported = 'speechSynthesis' in window;\n const speechRecognitionSupported = window.SpeechRecognition || window.webkitSpeechRecognition;\n\n let voices = [];\n\n function loadVoices() {\n voices = window.speechSynthesis.getVoices();\n if (voices.length === 0) {\n \/\/ Some browsers load voices asynchronously\n window.speechSynthesis.onvoiceschanged = () => {\n voices = window.speechSynthesis.getVoices();\n console.log(\"Voices loaded:\", voices);\n };\n } else {\n console.log(\"Voices loaded:\", voices);\n }\n }\n\n loadVoices();\n\n window.onload = function() {\n if (speechSynthesisSupported) {\n \/\/ Delay greeting to ensure voices are loaded\n setTimeout(() => greetUser(), 500); \n } else {\n appendMessage(\"Sorry, your browser does not support speech synthesis.\", \"bot\");\n }\n\n if (!speechRecognitionSupported) {\n appendMessage(\"Sorry, your browser does not support speech recognition.\", \"bot\");\n }\n\n \/\/ Handle Start Button Click\n document.getElementById('start-btn').onclick = function() {\n if (!speechSynthesisSupported) {\n appendMessage(\"Speech synthesis is not supported in your browser.\", \"bot\");\n return;\n }\n if (speechRecognitionSupported) {\n currentQuestionIndex = 0;\n clearWordBox();\n startLesson();\n } else {\n appendMessage(\"Speech recognition is not supported in your browser.\", \"bot\");\n }\n };\n\n \/\/ Handle Stop Button Click\n document.getElementById('stop-btn').onclick = function() {\n if (recognition) {\n recognition.stop();\n }\n endLesson(true);\n };\n };\n\n function greetUser() {\n const greeting = \"Hello! Welcome to the Practice Speaking about Psychology and Sociology. In this lesson, you will listen to each question carefully and provide your own answers. After each response, the correct answer will be displayed in the box. Additionally, I'll provide some tips to help improve your pronunciation. Are you ready? Click Start to begin the lesson!\";\n appendMessage(greeting, 'bot');\n sayText(greeting, \"en-US\");\n }\n\n function startLesson() {\n if (currentQuestionIndex < questions.length) {\n const question = questions[currentQuestionIndex];\n const questionNumber = currentQuestionIndex + 1;\n const questionText = `Question ${questionNumber}: '${question.english}'`;\n\n appendMessage(questionText, 'bot');\n addSentenceToBox(`Q${questionNumber}: ${question.english}`); \/\/ Add question to word box\n sayText(`Question ${questionNumber}: ${question.english}`, \"en-US\");\n\n \/\/ Listen for user response after a short delay to ensure the question has been spoken\n setTimeout(() => listenUserResponse(question), 5000);\n } else {\n endLesson();\n }\n }\n\n function listenUserResponse(question) {\n recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();\n recognition.lang = 'en-US';\n recognition.interimResults = false;\n recognition.maxAlternatives = 1;\n\n recognition.start();\n\n recognition.onresult = function(event) {\n let userInput = event.results[0][0].transcript.trim();\n userInput = normalizeAndFormatUserInput(userInput); \/\/ Normalize input and format\n appendMessage(userInput, 'user');\n\n \/\/ Check for stop keywords\n if (checkStopKeywords(userInput.toLowerCase())) {\n endLesson(true);\n return;\n }\n\n \/\/ Analyze user input for keywords\n const feedbackType = analyzeResponse(userInput, question.keywords);\n\n if (feedbackType === \"positive\") {\n const positiveMessage = positiveFeedback[Math.floor(Math.random() * positiveFeedback.length)];\n appendMessage(positiveMessage, 'bot');\n sayText(positiveMessage, 'en-US');\n } else if (feedbackType === \"pronunciation\") {\n const pronunciationMessage = pronunciationFeedback[Math.floor(Math.random() * pronunciationFeedback.length)];\n appendMessage(pronunciationMessage, 'bot');\n sayText(pronunciationMessage, 'en-US');\n } else {\n const constructiveMessage = constructiveFeedback[Math.floor(Math.random() * constructiveFeedback.length)];\n appendMessage(constructiveMessage, 'bot');\n sayText(constructiveMessage, 'en-US');\n }\n\n \/\/ Display the model answer in the word box without speaking it\n const modelAnswer = `Answer: ${question.answer}`;\n addSentenceToBox(modelAnswer);\n \/\/ Removed: sayText(`Your answer should be: ${question.answer}`, \"en-US\");\n\n currentQuestionIndex++; \/\/ Move to next question\n setTimeout(startLesson, 3000); \/\/ Ask next question after 3 seconds\n };\n\n recognition.onspeechend = function() {\n recognition.stop();\n };\n\n recognition.onerror = function(event) {\n appendMessage('Error: ' + event.error, 'bot');\n const retryMessage = \"Let's try that question again.\";\n appendMessage(retryMessage, 'bot');\n sayText(retryMessage, 'en-US');\n setTimeout(() => askSameQuestion(question), 3000); \/\/ Retry the same question\n };\n }\n\n function askSameQuestion(question) {\n const questionNumber = currentQuestionIndex + 1;\n const questionText = `Let's try again: '${question.english}'`;\n\n appendMessage(questionText, 'bot');\n sayText(`Question ${questionNumber}: ${question.english}`, \"en-US\");\n\n addSentenceToBox(`Q${questionNumber}: ${question.english}`); \/\/ Re-add question to word box\n setTimeout(() => listenUserResponse(question), 5000); \/\/ Listen to the response again\n }\n\n function analyzeResponse(userInput, keywords) {\n \/\/ Convert user input to lowercase for case-insensitive matching\n const lowerCaseInput = userInput.toLowerCase();\n\n \/\/ Check if any keyword is present in the user input\n for (let keyword of keywords) {\n if (lowerCaseInput.includes(keyword.toLowerCase())) {\n \/\/ Simulate pronunciation feedback for specific keywords\n if (keyword.toLowerCase().includes(\"student\") || keyword.toLowerCase().includes(\"education\")) {\n return \"pronunciation\";\n }\n return \"positive\";\n }\n }\n\n return \"constructive\";\n }\n\n function checkStopKeywords(userInput) {\n \/\/ Build a regex pattern with word boundaries and ignore case\n let pattern = new RegExp('\\\\b(' + stopKeywords.join('|') + ')\\\\b', 'i');\n return pattern.test(userInput);\n }\n\n function normalizeAndFormatUserInput(text) {\n \/\/ Replace \"i\" with \"I\" and capitalize the first letter of the sentence\n let normalized = text.replace(\/\\bi\\b\/g, \"I\");\n\n \/\/ Format the sentence: capitalize first letter, add a period or question mark as needed\n return formatSentence(normalized);\n }\n\n function formatSentence(text) {\n \/\/ Capitalize the first letter\n text = text.charAt(0).toUpperCase() + text.slice(1);\n\n \/\/ Check if it's a question or a statement\n const questionWords = ['who', 'what', 'where', 'when', 'why', 'how', 'is', 'are', 'do', 'does', 'can', 'should', 'will', 'would'];\n const firstWord = text.split(\" \")[0].toLowerCase();\n\n \/\/ Add question mark if it's a question, otherwise add a period\n if (questionWords.includes(firstWord) && !text.endsWith('?')) {\n text += '?';\n } else if (!text.endsWith('.') && !text.endsWith('?')) {\n text += '.';\n }\n\n return text;\n }\n\n function addSentenceToBox(sentence) {\n const wordBox = document.getElementById('word-box');\n const sentenceElement = document.createElement('div');\n sentenceElement.innerText = sentence;\n wordBox.appendChild(sentenceElement);\n wordBox.scrollTop = wordBox.scrollHeight;\n }\n\n function clearWordBox() {\n const wordBox = document.getElementById('word-box');\n wordBox.innerHTML = \"\";\n }\n\n function endLesson(userStopped = false) {\n \/\/ Cancel any ongoing speech synthesis\n if (speechSynthesisSupported) {\n window.speechSynthesis.cancel();\n }\n\n let message;\n if (userStopped) {\n message = \"Thank you for practicing! Goodbye!\";\n } else {\n message = \"Well done! You've completed all the questions. Keep practicing!\";\n }\n appendMessage(message, \"bot\");\n sayText(message, \"en-US\");\n }\n\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 voice once voices are loaded\n if (voices.length === 0) {\n \/\/ If voices are not loaded yet, wait for them\n window.speechSynthesis.onvoiceschanged = () => {\n voices = window.speechSynthesis.getVoices();\n selectVoice(utterance, lang);\n utterance.onend = function() {\n if (callback) callback();\n };\n window.speechSynthesis.speak(utterance);\n };\n } else {\n selectVoice(utterance, lang);\n utterance.onend = function() {\n if (callback) callback();\n };\n window.speechSynthesis.speak(utterance);\n }\n }\n\n function selectVoice(utterance, lang) {\n \/\/ Prioritize specific high-quality voices available on Android\n const preferredVoiceNames = [\n 'Google US English',\n 'Google UK English Female',\n 'Google UK English Male',\n 'Google US English Female',\n 'Google US English Male'\n ];\n\n \/\/ Try to find a preferred voice first\n let selectedVoice = voices.find(voice => preferredVoiceNames.includes(voice.name));\n\n \/\/ If no preferred voice is found, fallback to any 'en-US' voice\n if (!selectedVoice) {\n selectedVoice = voices.find(voice => voice.lang === lang && voice.name.toLowerCase().includes('english')) ||\n voices.find(voice => voice.lang.startsWith('en'));\n }\n\n if (selectedVoice) {\n utterance.voice = selectedVoice;\n console.log(`Selected voice: ${selectedVoice.name}`);\n } else {\n console.warn(\"No suitable English voice found. Using default voice.\");\n }\n }\n\n function appendMessage(text, sender) {\n const messageContainer = document.getElementById('chat-messages');\n const messageElement = document.createElement('div');\n messageElement.classList.add('message');\n messageElement.classList.add(sender === 'bot' ? 'bot-message' : 'user-message');\n messageElement.innerText = text;\n messageContainer.appendChild(messageElement);\n messageContainer.scrollTop = messageContainer.scrollHeight;\n }\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Theme 2 – Psychology and Sociology Systems of education Psychology and sociology Work & Business Science and Nature Physical World Look at the sentences in this box Theme 2 – Psychology and Sociology Start Stop<\/p>\n","protected":false},"author":1,"featured_media":1699,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[28,34,27,41],"tags":[],"class_list":["post-1701","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-adults","category-robots","category-speaking","category-speaking-1"],"featured_image_src":"https:\/\/phamho.com\/book\/wp-content\/uploads\/2024\/09\/DALL\u00b7E-2024-09-23-16.19.55-A-futuristic-classroom-setting-where-a-robot-is-teaching-an-IELTS-speaking-class.-The-robot-stands-at-the-front-of-the-room-gesturing-toward-a-digita-1024x585.webp","blog_images":{"medium":"https:\/\/phamho.com\/book\/wp-content\/uploads\/2024\/09\/DALL\u00b7E-2024-09-23-16.19.55-A-futuristic-classroom-setting-where-a-robot-is-teaching-an-IELTS-speaking-class.-The-robot-stands-at-the-front-of-the-room-gesturing-toward-a-digita-300x171.webp","large":"https:\/\/phamho.com\/book\/wp-content\/uploads\/2024\/09\/DALL\u00b7E-2024-09-23-16.19.55-A-futuristic-classroom-setting-where-a-robot-is-teaching-an-IELTS-speaking-class.-The-robot-stands-at-the-front-of-the-room-gesturing-toward-a-digita-1024x585.webp"},"ams_acf":[],"_links":{"self":[{"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/posts\/1701","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=1701"}],"version-history":[{"count":2,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/posts\/1701\/revisions"}],"predecessor-version":[{"id":1712,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/posts\/1701\/revisions\/1712"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/media\/1699"}],"wp:attachment":[{"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/media?parent=1701"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/categories?post=1701"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/phamho.com\/book\/wp-json\/wp\/v2\/tags?post=1701"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}