PhD studies: Study Location and Purpose<\/title>\n <style>\n * {\n box-sizing: border-box;\n }\n\n body {\n font-family: Arial, sans-serif;\n background-color: #f4f6f8;\n margin: 0;\n padding: 0;\n display: flex;\n flex-direction: column;\n min-height: 100vh;\n }\n\n .menu {\n width: 100%;\n background-color: #28a745;\n padding: 10px;\n text-align: center;\n box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);\n margin-bottom: 10px;\n overflow-x: auto;\n white-space: nowrap;\n }\n\n .menu a {\n color: #fff;\n text-decoration: none;\n margin: 0 10px;\n font-weight: bold;\n font-size: 14px;\n display: inline-block;\n }\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 {\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 10px;\n box-sizing: border-box;\n flex: 1 0 auto;\n width: 100%;\n }\n\n .image-chat-wrapper {\n display: flex;\n flex-direction: column;\n width: 100%;\n max-width: 980px;\n flex: 1;\n gap: 16px;\n }\n\n .image-container {\n flex: 1;\n text-align: center;\n margin-bottom: 15px;\n background: #ffffff;\n border-radius: 15px;\n box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);\n padding: 14px;\n }\n\n .sentence-text {\n margin: 10px 0;\n font-weight: bold;\n color: #333;\n font-size: 16px;\n }\n\n .word-box {\n margin-top: 10px;\n padding: 10px;\n background-color: #fff;\n border: 2px solid #28a745;\n border-radius: 8px;\n box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);\n font-size: 16px;\n font-weight: bold;\n color: #28a745;\n text-align: left;\n max-height: 250px;\n overflow-y: auto;\n }\n\n .chat-container {\n background-color: #28a745;\n border-radius: 15px;\n box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);\n overflow: hidden;\n display: flex;\n flex-direction: column;\n max-height: 560px;\n flex: 1;\n }\n\n .chat-header {\n background-color: #1e7e34;\n color: #fff;\n padding: 12px;\n text-align: center;\n border-bottom: 1px solid #155724;\n position: relative;\n }\n\n .chat-header h2 {\n margin: 0;\n font-size: 18px;\n }\n\n .chat-header .loader {\n position: absolute;\n right: 20px;\n top: 50%;\n transform: translateY(-50%);\n display: none;\n }\n\n .chat-messages {\n padding: 12px;\n overflow-y: auto;\n flex: 1;\n background-color: #fff;\n max-height: 320px;\n }\n\n .message {\n margin-bottom: 10px;\n padding: 10px;\n border-radius: 6px;\n font-size: 14px;\n line-height: 1.5;\n }\n\n .user-message {\n background-color: #ffc107;\n color: #fff;\n text-align: right;\n }\n\n .bot-message {\n background-color: #17a2b8;\n color: #fff;\n text-align: left;\n }\n\n .chat-input {\n display: flex;\n align-items: center;\n background-color: #c3e6cb;\n padding: 10px;\n justify-content: space-between;\n flex-wrap: wrap;\n gap: 8px;\n }\n\n .send-button, .stop-button {\n background-color: #17a2b8;\n color: #fff;\n font-weight: bold;\n border: none;\n border-radius: 5px;\n padding: 12px 16px;\n cursor: pointer;\n transition: background-color 0.3s;\n flex: 1;\n margin: 4px;\n max-width: 160px;\n font-size: 16px;\n }\n\n .stop-button {\n background-color: #dc3545;\n }\n\n .send-button:hover,\n .stop-button:hover,\n .send-button:focus,\n .stop-button:focus {\n background-color: #218838;\n outline: none;\n }\n\n .voice-selection {\n margin: 10px 0;\n width: 100%;\n max-width: 320px;\n }\n\n .voice-selection label {\n display: block;\n margin-bottom: 5px;\n font-weight: bold;\n color: #333;\n }\n\n .voice-selection select {\n width: 100%;\n padding: 8px;\n border-radius: 5px;\n border: 1px solid #ccc;\n font-size: 14px;\n }\n\n .loader {\n border: 4px solid #f3f3f3;\n border-top: 4px solid #17a2b8;\n border-radius: 50%;\n width: 20px;\n height: 20px;\n animation: spin 1s linear infinite;\n display: inline-block;\n margin-left: 10px;\n }\n\n @keyframes spin {\n 0% { transform: translateY(-50%) rotate(0deg); }\n 100% { transform: translateY(-50%) rotate(360deg); }\n }\n\n .face-panel {\n width: 100%;\n min-height: 330px;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n background: radial-gradient(circle at center, #111 0%, #000 70%);\n border-radius: 15px;\n padding: 16px 10px;\n overflow: hidden;\n position: relative;\n }\n\n .speech-bubble {\n position: relative;\n background: white;\n color: #111;\n border-radius: 20px;\n padding: 12px 18px;\n max-width: 320px;\n opacity: 0;\n transform: translateY(10px) scale(0.92);\n transition: all 0.25s ease;\n box-shadow: 0 10px 30px rgba(255,255,255,0.08);\n margin-bottom: 12px;\n font-weight: 600;\n }\n\n .speech-bubble.visible {\n opacity: 1;\n transform: translateY(0) scale(1);\n }\n\n .speech-bubble::after {\n content: '';\n position: absolute;\n bottom: -15px;\n left: 50%;\n transform: translateX(-50%);\n border: 10px solid transparent;\n border-top-color: white;\n }\n\n .face-container {\n filter: drop-shadow(0 0 45px rgba(255,255,255,0.08));\n transition: transform 0.15s ease;\n will-change: transform;\n }\n\n .face-shell {\n transition: transform 0.2s ease;\n transform-origin: 150px 150px;\n }\n\n .eye-white,\n .pupil,\n .eyebrow,\n .mouth-path,\n .nose-path,\n .cheek,\n .tear,\n .eyelid,\n .sparkle {\n transition: all 0.18s ease;\n }\n\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 @media (orientation: landscape) and (min-width: 600px) {\n .image-chat-wrapper {\n flex-direction: row;\n justify-content: space-between;\n gap: 20px;\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 @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 .voice-selection select {\n font-size: 14px;\n }\n }\n\n @media only screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {\n .chat-header h2 {\n font-size: 18px;\n }\n .send-button, .stop-button {\n padding: 14px 18px;\n font-size: 16px;\n }\n .message {\n font-size: 14px;\n }\n .word-box {\n font-size: 16px;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"menu\">\n <a href=\"https:\/\/i-cte.org\/robot\/visa-interview\/\">Interviews<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/personal-information\/\">Personal Information<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/study-plans\/\">Study Plan<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/financial-supports\/\">Financial Supports<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/academic-background\/\">Academic Background<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/location-and-purpose\/\">Location and Purpose<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/children-information\/\">Children Information<\/a>\n <\/div>\n\n <div class=\"container\">\n <div class=\"image-chat-wrapper\">\n <div class=\"image-container\">\n\n <div class=\"face-panel\">\n <div id=\"face-speech-bubble\" class=\"speech-bubble\">\n <p id=\"face-speech-text\"><\/p>\n <\/div>\n\n <div class=\"face-container\" id=\"face-container\">\n <svg width=\"300\" height=\"300\" viewBox=\"0 0 300 300\" id=\"face-svg\" aria-label=\"Expressive face\">\n <defs>\n <radialGradient id=\"faceGlow\" cx=\"50%\" cy=\"40%\" r=\"70%\">\n <stop offset=\"0%\" stop-color=\"rgba(255,255,255,0.12)\" \/>\n <stop offset=\"100%\" stop-color=\"rgba(255,255,255,0.02)\" \/>\n <\/radialGradient>\n <radialGradient id=\"cheekGlow\" cx=\"50%\" cy=\"50%\" r=\"60%\">\n <stop offset=\"0%\" stop-color=\"rgba(255,160,160,0.8)\" \/>\n <stop offset=\"100%\" stop-color=\"rgba(255,160,160,0)\" \/>\n <\/radialGradient>\n <\/defs>\n\n <g id=\"face-shell\" class=\"face-shell\">\n <ellipse cx=\"150\" cy=\"150\" rx=\"120\" ry=\"140\" fill=\"url(#faceGlow)\" stroke=\"rgba(255,255,255,0.15)\" stroke-width=\"2\"\/>\n\n <path id=\"left-eyebrow\" class=\"eyebrow\" d=\"M 60 80 Q 90 75 120 80\" fill=\"none\" stroke=\"white\" stroke-width=\"4\" stroke-linecap=\"round\"\/>\n <path id=\"right-eyebrow\" class=\"eyebrow\" d=\"M 180 80 Q 210 75 240 80\" fill=\"none\" stroke=\"white\" stroke-width=\"4\" stroke-linecap=\"round\"\/>\n\n <ellipse id=\"left-blush\" class=\"cheek\" cx=\"70\" cy=\"165\" rx=\"24\" ry=\"12\" fill=\"url(#cheekGlow)\" opacity=\"0\"\/>\n <ellipse id=\"right-blush\" class=\"cheek\" cx=\"230\" cy=\"165\" rx=\"24\" ry=\"12\" fill=\"url(#cheekGlow)\" opacity=\"0\"\/>\n\n <g id=\"left-eye-group\">\n <ellipse id=\"left-eye-white\" class=\"eye-white\" cx=\"90\" cy=\"110\" rx=\"30\" ry=\"24\" fill=\"white\"\/>\n <ellipse id=\"left-eye-lid\" class=\"eyelid\" cx=\"90\" cy=\"110\" rx=\"30\" ry=\"0\" fill=\"black\"\/>\n <circle id=\"left-pupil\" class=\"pupil\" cx=\"90\" cy=\"110\" r=\"11.5\" fill=\"black\"\/>\n <circle id=\"left-sparkle\" class=\"sparkle\" cx=\"96\" cy=\"104\" r=\"4.2\" fill=\"white\" opacity=\"0.95\"\/>\n <\/g>\n\n <g id=\"right-eye-group\">\n <ellipse id=\"right-eye-white\" class=\"eye-white\" cx=\"210\" cy=\"110\" rx=\"30\" ry=\"24\" fill=\"white\"\/>\n <ellipse id=\"right-eye-lid\" class=\"eyelid\" cx=\"210\" cy=\"110\" rx=\"30\" ry=\"0\" fill=\"black\"\/>\n <circle id=\"right-pupil\" class=\"pupil\" cx=\"210\" cy=\"110\" r=\"11.5\" fill=\"black\"\/>\n <circle id=\"right-sparkle\" class=\"sparkle\" cx=\"216\" cy=\"104\" r=\"4.2\" fill=\"white\" opacity=\"0.95\"\/>\n <\/g>\n\n <path id=\"nose\" class=\"nose-path\" d=\"M 150 140 L 142 175 Q 150 181 158 175 L 150 140\" fill=\"none\" stroke=\"white\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n\n <path id=\"mouth\" class=\"mouth-path\" d=\"M 100 220 Q 150 232 200 220\" fill=\"none\" stroke=\"white\" stroke-width=\"5\" stroke-linecap=\"round\"\/>\n <ellipse id=\"mouth-inner\" cx=\"150\" cy=\"225\" rx=\"0\" ry=\"0\" fill=\"rgba(120,0,0,0.75)\" opacity=\"0\"\/>\n <rect id=\"teeth\" x=\"122\" y=\"220\" width=\"56\" height=\"10\" rx=\"4\" fill=\"white\" opacity=\"0\"\/>\n\n <path id=\"left-tear\" class=\"tear\" d=\"M 75 140 Q 69 160 75 171 Q 81 160 75 140\" fill=\"rgba(100,200,255,0)\" \/>\n <path id=\"right-tear\" class=\"tear\" d=\"M 225 140 Q 219 160 225 171 Q 231 160 225 140\" fill=\"rgba(100,200,255,0)\" \/>\n\n <g id=\"anger-veins\" opacity=\"0\">\n <path d=\"M 250 50 L 260 60 L 255 55 L 265 65\" stroke=\"#ff4444\" stroke-width=\"2.4\" fill=\"none\" \/>\n <\/g>\n <\/g>\n <\/svg>\n <\/div>\n <\/div>\n\n <div class=\"sentence-text\">Listen to the questions and respond accordingly.<\/div>\n <div id=\"word-box\" class=\"word-box\"><\/div>\n <\/div>\n\n <div class=\"chat-container\">\n <div class=\"chat-header\">\n <h2>Study Location and Purpose<\/h2>\n <div class=\"loader\" id=\"synthesis-loader\"><\/div>\n <\/div>\n <div class=\"chat-messages\" id=\"chat-messages\"><\/div>\n <div class=\"chat-input\">\n <div class=\"voice-selection\">\n <label for=\"voice-select\">Choose Voice:<\/label>\n <select id=\"voice-select\" aria-label=\"Select Voice\">\n <option value=\"\">Loading voices…<\/option>\n <\/select>\n <\/div>\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 <div class=\"menu\">\n <a href=\"https:\/\/i-cte.org\/robot\/visa-interview\/\">Interviews<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/personal-information\/\">Personal Information<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/study-plans\/\">Study Plan<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/financial-supports\/\">Financial Supports<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/academic-background\/\">Academic Background<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/location-and-purpose\/\">Location and Purpose<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/children-information\/\">Children Information<\/a>\n <\/div>\n\n <script>\n const questions = [\n {\n english: \"How did you know about the school?\",\n keywords: [\"know\", \"school\", \"website\", \"publications\", \"mentors\"],\n answer: \"I learned about the school through its website, research publications, and recommendations from academic mentors.\"\n },\n {\n english: \"How many schools did you apply to?\",\n keywords: [\"apply\", \"schools\", \"three\", \"applications\"],\n answer: \"I applied to three schools that align with my academic interests.\"\n },\n {\n english: \"Why did you decide to study in the United States? Why do you not continue to study in college in Vietnam?\",\n keywords: [\"study\", \"united states\", \"vietnam\", \"research facilities\", \"networking\"],\n answer: \"I chose the United States because of its advanced research facilities and global networking opportunities. I believe this environment will help me grow as a researcher.\"\n },\n {\n english: \"Why did you select this school?\",\n keywords: [\"select\", \"school\", \"program\", \"research interests\", \"resources\"],\n answer: \"I chose this school because it offers a strong PhD program aligned with my research interests and provides excellent resources for academic development.\"\n },\n {\n english: \"Why did you choose Texas State?\",\n keywords: [\"texas state\", \"campus\", \"international students\", \"community\"],\n answer: \"I chose Texas State because of its welcoming campus environment, strong support for international students, and vibrant community that encourages personal and academic growth.\"\n },\n {\n english: \"What factors influenced your decision to select this program?\",\n keywords: [\"factors\", \"faculty\", \"curriculum\", \"research collaboration\"],\n answer: \"The program\u2019s strong faculty expertise, comprehensive curriculum, and opportunities for research collaboration influenced my decision.\"\n },\n {\n english: \"Why do you think this program fits your academic goals?\",\n keywords: [\"program\", \"fit\", \"academic goals\", \"applied linguistics\", \"career\"],\n answer: \"This program matches my academic goals because it focuses on applied linguistics and language education, which are directly related to my long-term career as a researcher and professor.\"\n },\n {\n english: \"What makes this school different from the others you applied to?\",\n keywords: [\"difference\", \"school\", \"compare\", \"research\", \"partnerships\"],\n answer: \"This school stands out for its cutting-edge research in language education and strong partnerships with international institutions, which provide broader opportunities compared to other schools.\"\n },\n {\n english: \"Where will you stay in the United States?\",\n keywords: [\"stay\", \"housing\", \"apartments\", \"campus\", \"safety\"],\n answer: \"I plan to stay in university housing or nearby rental apartments near the campus for convenience and safety.\"\n },\n {\n english: \"Do you have any relatives or friends near the university?\",\n keywords: [\"relatives\", \"friends\", \"university\", \"support services\", \"adjust\"],\n answer: \"No, I do not have relatives near the university, but I am confident that the university\u2019s international student support services will help me adjust smoothly.\"\n }\n ];\n\n const positiveFeedback = [\n \"Great job. Your answer is relevant to the question.\",\n \"Well done. That was a clear response.\",\n \"Excellent. You answered confidently.\",\n \"Very good. Your response matches the question well.\",\n \"Good answer. Keep speaking clearly and naturally.\",\n \"That was strong and appropriate for an interview.\"\n ];\n\n const constructiveFeedback = [\n \"Try to give a fuller answer with one or two supporting details.\",\n \"Your answer is a good start. Add more specific information.\",\n \"Try to include a reason or an example in your response.\",\n \"Make your answer more complete by connecting it directly to the question.\",\n \"Please expand your answer a little more and sound more confident.\",\n \"Try to use complete sentences and explain your idea more clearly.\"\n ];\n\n const pronunciationFeedback = [\n \"Your answer was understandable. Try to speak a little more slowly and clearly.\",\n \"Good effort. Focus on clear pronunciation of key words.\",\n \"Well done. Try to stress the important words in your sentence.\",\n \"Your response was clear overall. Keep your pace steady.\",\n \"Nice job. Speak confidently and pronounce each word more distinctly.\"\n ];\n\n const stopKeywords = [\"goodbye\", \"good bye\", \"bye\", \"bye-bye\", \"byebye\", \"stop\", \"end lesson\"];\n\n let currentQuestionIndex = 0;\n let recognition = null;\n let isLessonActive = false;\n let speechRecognitionActive = false;\n let pendingNextQuestionTimeout = null;\n let retryCount = 0;\n const maxRetriesPerQuestion = 2;\n\n const speechSynthesisSupported = 'speechSynthesis' in window;\n const SpeechRecognitionClass = window.SpeechRecognition || window.webkitSpeechRecognition;\n const speechRecognitionSupported = !!SpeechRecognitionClass;\n\n let voices = [];\n let filteredVoices = [];\n let selectedVoice = null;\n\n \/* FACE SYSTEM *\/\n let currentEmotion = 'neutral';\n let isFaceTalking = false;\n let faceTalkTimer = null;\n let faceBubbleTimer = null;\n let blinkTimer = null;\n let saccadeTimer = null;\n let breatheRAF = null;\n\n const faceContainer = document.getElementById('face-container');\n const faceShell = document.getElementById('face-shell');\n const mouth = document.getElementById('mouth');\n const mouthInner = document.getElementById('mouth-inner');\n const teeth = document.getElementById('teeth');\n const leftEyeWhite = document.getElementById('left-eye-white');\n const rightEyeWhite = document.getElementById('right-eye-white');\n const leftLid = document.getElementById('left-eye-lid');\n const rightLid = document.getElementById('right-eye-lid');\n const leftPupil = document.getElementById('left-pupil');\n const rightPupil = document.getElementById('right-pupil');\n const leftSparkle = document.getElementById('left-sparkle');\n const rightSparkle = document.getElementById('right-sparkle');\n const leftEyebrow = document.getElementById('left-eyebrow');\n const rightEyebrow = document.getElementById('right-eyebrow');\n const leftBlush = document.getElementById('left-blush');\n const rightBlush = document.getElementById('right-blush');\n const leftTear = document.getElementById('left-tear');\n const rightTear = document.getElementById('right-tear');\n const angerVeins = document.getElementById('anger-veins');\n const faceSpeechBubble = document.getElementById('face-speech-bubble');\n const faceSpeechText = document.getElementById('face-speech-text');\n\n const emotions = {\n neutral: {\n mouth: 'M 100 220 Q 150 232 200 220',\n leftEyebrow: 'M 60 80 Q 90 75 120 80',\n rightEyebrow: 'M 180 80 Q 210 75 240 80',\n eyeRY: 24,\n blush: 0,\n tears: 0,\n anger: 0,\n teeth: 0,\n mouthInnerOpacity: 0,\n mouthInnerRx: 0,\n mouthInnerRy: 0\n },\n happy: {\n mouth: 'M 92 212 Q 150 278 208 212',\n leftEyebrow: 'M 60 75 Q 90 66 120 75',\n rightEyebrow: 'M 180 75 Q 210 66 240 75',\n eyeRY: 17,\n blush: 0.48,\n tears: 0,\n anger: 0,\n teeth: 0.92,\n mouthInnerOpacity: 0.25,\n mouthInnerRx: 24,\n mouthInnerRy: 8\n },\n sad: {\n mouth: 'M 112 240 Q 150 203 188 240',\n leftEyebrow: 'M 68 72 Q 90 88 120 76',\n rightEyebrow: 'M 180 76 Q 210 88 232 72',\n eyeRY: 15,\n blush: 0,\n tears: 0.78,\n anger: 0,\n teeth: 0,\n mouthInnerOpacity: 0,\n mouthInnerRx: 0,\n mouthInnerRy: 0\n },\n confused: {\n mouth: 'M 110 224 Q 140 230 160 221 Q 182 236 190 226',\n leftEyebrow: 'M 60 86 Q 90 68 120 80',\n rightEyebrow: 'M 180 70 Q 210 86 240 76',\n eyeRY: 22,\n blush: 0,\n tears: 0,\n anger: 0,\n teeth: 0,\n mouthInnerOpacity: 0,\n mouthInnerRx: 0,\n mouthInnerRy: 0\n }\n };\n\n function setFaceEmotion(emotion) {\n const preset = emotions[emotion] || emotions.neutral;\n currentEmotion = emotion;\n\n mouth.setAttribute('d', preset.mouth);\n leftEyebrow.setAttribute('d', preset.leftEyebrow);\n rightEyebrow.setAttribute('d', preset.rightEyebrow);\n\n leftEyeWhite.setAttribute('ry', preset.eyeRY);\n rightEyeWhite.setAttribute('ry', preset.eyeRY);\n\n leftBlush.setAttribute('opacity', preset.blush);\n rightBlush.setAttribute('opacity', preset.blush);\n\n leftTear.setAttribute('fill', `rgba(100,200,255,${preset.tears})`);\n rightTear.setAttribute('fill', `rgba(100,200,255,${preset.tears})`);\n\n angerVeins.setAttribute('opacity', preset.anger);\n teeth.setAttribute('opacity', preset.teeth);\n mouthInner.setAttribute('opacity', preset.mouthInnerOpacity);\n mouthInner.setAttribute('rx', preset.mouthInnerRx);\n mouthInner.setAttribute('ry', preset.mouthInnerRy);\n }\n\n function resetFacePupils() {\n leftPupil.setAttribute('cx', 90);\n leftPupil.setAttribute('cy', 110);\n rightPupil.setAttribute('cx', 210);\n rightPupil.setAttribute('cy', 110);\n leftSparkle.setAttribute('cx', 96);\n leftSparkle.setAttribute('cy', 104);\n rightSparkle.setAttribute('cx', 216);\n rightSparkle.setAttribute('cy', 104);\n }\n\n function blinkFace(duration = 110) {\n const currentL = parseFloat(leftEyeWhite.getAttribute('ry'));\n const currentR = parseFloat(rightEyeWhite.getAttribute('ry'));\n leftLid.setAttribute('ry', currentL + 1);\n rightLid.setAttribute('ry', currentR + 1);\n\n setTimeout(() => {\n leftLid.setAttribute('ry', 0);\n rightLid.setAttribute('ry', 0);\n }, duration);\n }\n\n function scheduleBlink() {\n clearTimeout(blinkTimer);\n const next = 1500 + Math.random() * 3500;\n blinkTimer = setTimeout(() => {\n blinkFace(90 + Math.random() * 80);\n if (Math.random() < 0.22) {\n setTimeout(() => blinkFace(70), 120);\n }\n scheduleBlink();\n }, next);\n }\n\n function idleSaccade() {\n if (isFaceTalking) return;\n const dx = (Math.random() * 2 - 1) * 4.5;\n const dy = (Math.random() * 2 - 1) * 3.2;\n\n leftPupil.setAttribute('cx', 90 + dx);\n leftPupil.setAttribute('cy', 110 + dy);\n rightPupil.setAttribute('cx', 210 + dx);\n rightPupil.setAttribute('cy', 110 + dy);\n\n leftSparkle.setAttribute('cx', 96 + dx * 0.6);\n leftSparkle.setAttribute('cy', 104 + dy * 0.6);\n rightSparkle.setAttribute('cx', 216 + dx * 0.6);\n rightSparkle.setAttribute('cy', 104 + dy * 0.6);\n }\n\n function scheduleSaccade() {\n clearTimeout(saccadeTimer);\n const next = 900 + Math.random() * 1800;\n saccadeTimer = setTimeout(() => {\n idleSaccade();\n scheduleSaccade();\n }, next);\n }\n\n function startFaceBreathing() {\n let t0 = performance.now();\n\n function frame(now) {\n const t = (now - t0) \/ 1000;\n const breathe = Math.sin(t * 1.8) * 1.8;\n const sway = Math.sin(t * 0.9) * 1.4;\n const tilt = Math.sin(t * 0.75) * 0.8;\n\n if (!isFaceTalking) {\n faceShell.setAttribute(\n 'transform',\n `translate(${sway.toFixed(2)}, ${breathe.toFixed(2)}) rotate(${tilt.toFixed(2)} 150 150)`\n );\n }\n\n breatheRAF = requestAnimationFrame(frame);\n }\n\n cancelAnimationFrame(breatheRAF);\n breatheRAF = requestAnimationFrame(frame);\n }\n\n function showFaceBubble(text, duration) {\n faceSpeechText.textContent = text;\n faceSpeechBubble.classList.add('visible');\n clearTimeout(faceBubbleTimer);\n faceBubbleTimer = setTimeout(() => {\n faceSpeechBubble.classList.remove('visible');\n }, duration + 600);\n }\n\n function stopFaceTalking() {\n isFaceTalking = false;\n clearInterval(faceTalkTimer);\n faceTalkTimer = null;\n setFaceEmotion(currentEmotion);\n }\n\n function talkingFrame(emotion) {\n const shapes = {\n neutral: [\n { d: 'M 102 220 Q 150 240 198 220', rx: 14, ry: 7, teeth: 0.1, inner: 0.25 },\n { d: 'M 96 214 Q 150 262 204 214', rx: 22, ry: 11, teeth: 0.28, inner: 0.45 },\n { d: 'M 108 224 Q 150 236 192 224', rx: 12, ry: 5, teeth: 0, inner: 0.18 }\n ],\n happy: [\n { d: 'M 92 212 Q 150 280 208 212', rx: 24, ry: 10, teeth: 0.9, inner: 0.35 },\n { d: 'M 96 216 Q 150 266 204 216', rx: 18, ry: 8, teeth: 0.75, inner: 0.28 },\n { d: 'M 88 210 Q 150 286 212 210', rx: 28, ry: 12, teeth: 1.0, inner: 0.4 }\n ],\n sad: [\n { d: 'M 112 238 Q 150 212 188 238', rx: 10, ry: 4, teeth: 0, inner: 0.1 },\n { d: 'M 108 234 Q 150 220 192 234', rx: 12, ry: 5, teeth: 0, inner: 0.14 },\n { d: 'M 114 240 Q 150 208 186 240', rx: 8, ry: 4, teeth: 0, inner: 0.08 }\n ],\n confused: [\n { d: 'M 110 224 Q 140 230 160 221 Q 182 236 190 226', rx: 10, ry: 4, teeth: 0, inner: 0.1 },\n { d: 'M 106 222 Q 140 236 162 220 Q 184 242 194 226', rx: 14, ry: 6, teeth: 0, inner: 0.18 },\n { d: 'M 112 225 Q 141 228 161 222 Q 181 234 189 225', rx: 9, ry: 4, teeth: 0, inner: 0.08 }\n ]\n };\n\n const list = shapes[emotion] || shapes.neutral;\n const chosen = list[Math.floor(Math.random() * list.length)];\n\n mouth.setAttribute('d', chosen.d);\n mouthInner.setAttribute('opacity', chosen.inner);\n mouthInner.setAttribute('rx', chosen.rx);\n mouthInner.setAttribute('ry', chosen.ry);\n teeth.setAttribute('opacity', chosen.teeth);\n\n const bobX = (Math.random() * 2 - 1) * 1.5;\n const bobY = -1.5 + Math.random() * 2.8;\n const tilt = (Math.random() * 2 - 1) * 2.2;\n\n faceShell.setAttribute(\n 'transform',\n `translate(${bobX.toFixed(2)}, ${bobY.toFixed(2)}) rotate(${tilt.toFixed(2)} 150 150)`\n );\n }\n\n function faceSpeak(text, emotion = \"neutral\", durationHint = null) {\n const clean = (text || \"\").trim();\n if (!clean) return;\n\n clearInterval(faceTalkTimer);\n isFaceTalking = true;\n setFaceEmotion(emotion);\n\n const duration = durationHint || Math.max(1800, clean.length * 75);\n showFaceBubble(clean, duration);\n\n faceTalkTimer = setInterval(() => talkingFrame(emotion), 120);\n\n setTimeout(() => {\n stopFaceTalking();\n }, duration);\n }\n\n document.addEventListener('mousemove', (e) => {\n if (isFaceTalking) return;\n\n const svg = document.getElementById('face-svg');\n const rect = svg.getBoundingClientRect();\n const centerX = rect.left + rect.width \/ 2;\n const centerY = rect.top + rect.height \/ 2;\n\n const dx = (e.clientX - centerX) \/ 45;\n const dy = (e.clientY - centerY) \/ 45;\n\n const moveX = Math.max(-5, Math.min(5, dx));\n const moveY = Math.max(-4, Math.min(4, dy));\n\n leftPupil.setAttribute('cx', 90 + moveX);\n leftPupil.setAttribute('cy', 110 + moveY);\n rightPupil.setAttribute('cx', 210 + moveX);\n rightPupil.setAttribute('cy', 110 + moveY);\n\n leftSparkle.setAttribute('cx', 96 + moveX * 0.6);\n leftSparkle.setAttribute('cy', 104 + moveY * 0.6);\n rightSparkle.setAttribute('cx', 216 + moveX * 0.6);\n rightSparkle.setAttribute('cy', 104 + moveY * 0.6);\n\n faceContainer.style.transform = `translate(${(moveX * 0.25).toFixed(2)}px, ${(moveY * 0.2).toFixed(2)}px)`;\n });\n\n document.addEventListener('mouseleave', () => {\n if (isFaceTalking) return;\n resetFacePupils();\n faceContainer.style.transform = 'translate(0px, 0px)';\n });\n\n \/* LESSON SYSTEM *\/\n\n function initialize() {\n loadVoices();\n setFaceEmotion('neutral');\n scheduleBlink();\n scheduleSaccade();\n startFaceBreathing();\n\n if (speechSynthesisSupported) {\n setTimeout(() => greetUser(), 700);\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 document.getElementById('start-btn').onclick = function() {\n if (isLessonActive) return;\n\n if (!speechSynthesisSupported) {\n appendMessage(\"Speech synthesis is not supported in your browser.\", \"bot\");\n return;\n }\n\n if (!speechRecognitionSupported) {\n appendMessage(\"Speech recognition is not supported in your browser.\", \"bot\");\n return;\n }\n\n stopAllAudioAndRecognition();\n clearPendingTimeout();\n\n isLessonActive = true;\n currentQuestionIndex = 0;\n retryCount = 0;\n clearWordBox();\n appendMessage(\"The practice session is starting now.\", \"bot\");\n startLesson();\n };\n\n document.getElementById('stop-btn').onclick = function() {\n endLesson(true);\n };\n }\n\n function loadVoices() {\n const fillVoices = () => {\n voices = window.speechSynthesis.getVoices();\n\n filteredVoices = voices.filter(v =>\n \/^en(-|_)\/i.test(v.lang) || \/english\/i.test(v.name)\n );\n\n filteredVoices.sort((a, b) => {\n const aScore = getVoicePriority(a);\n const bScore = getVoicePriority(b);\n return aScore - bScore;\n });\n\n populateVoiceList();\n };\n\n fillVoices();\n\n if (typeof speechSynthesis !== \"undefined\") {\n speechSynthesis.onvoiceschanged = fillVoices;\n }\n }\n\n function getVoicePriority(voice) {\n const name = voice.name.toLowerCase();\n if (name.includes(\"google us english\")) return 1;\n if (name.includes(\"google uk english\")) return 2;\n if (name.includes(\"microsoft\") && name.includes(\"english\")) return 3;\n if (name.includes(\"english\")) return 4;\n return 10;\n }\n\n function populateVoiceList() {\n const voiceSelect = document.getElementById('voice-select');\n voiceSelect.innerHTML = '';\n\n if (!filteredVoices.length) {\n const option = document.createElement('option');\n option.value = \"\";\n option.textContent = \"No English voices available\";\n voiceSelect.appendChild(option);\n voiceSelect.disabled = true;\n selectedVoice = null;\n return;\n }\n\n filteredVoices.forEach((voice, index) => {\n const option = document.createElement('option');\n option.value = String(index);\n option.textContent = `${voice.name} (${voice.lang})`;\n voiceSelect.appendChild(option);\n });\n\n selectedVoice = filteredVoices[0];\n voiceSelect.value = \"0\";\n voiceSelect.disabled = false;\n\n voiceSelect.onchange = () => {\n const index = parseInt(voiceSelect.value, 10);\n selectedVoice = filteredVoices[index] || filteredVoices[0];\n };\n }\n\n function greetUser() {\n const greeting = \"Hello. Welcome to the PhD Study Interview Practice. In this session, you will practice answering important questions about your study location and purpose. Click Start to begin!\";\n appendMessage(greeting, 'bot');\n faceSpeak(greeting, \"neutral\");\n showSynthesisLoader(true);\n sayText(greeting, \"en-US\").then(() => {\n showSynthesisLoader(false);\n });\n }\n\n function startLesson() {\n if (!isLessonActive) return;\n\n if (currentQuestionIndex >= questions.length) {\n endLesson(false);\n return;\n }\n\n retryCount = 0;\n askCurrentQuestion();\n }\n\n function askCurrentQuestion() {\n if (!isLessonActive) return;\n\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}`);\n addSentenceToBox(`Suggested answer: ${question.answer}`);\n\n faceSpeak(questionText, \"neutral\");\n showSynthesisLoader(true);\n sayText(questionText, \"en-US\").then(() => {\n showSynthesisLoader(false);\n listenUserResponse(question);\n });\n }\n\n function listenUserResponse(question) {\n if (!isLessonActive) return;\n\n stopRecognitionOnly();\n\n recognition = new SpeechRecognitionClass();\n recognition.lang = 'en-US';\n recognition.interimResults = false;\n recognition.continuous = false;\n recognition.maxAlternatives = 1;\n\n speechRecognitionActive = true;\n showRecognitionLoader(true);\n appendMessage(\"Listening...\", \"bot\");\n faceSpeak(\"Listening...\", \"confused\", 1400);\n\n try {\n recognition.start();\n } catch (err) {\n speechRecognitionActive = false;\n showRecognitionLoader(false);\n appendMessage(\"The microphone could not start. Please try again.\", \"bot\");\n faceSpeak(\"The microphone could not start. Please try again.\", \"sad\");\n return;\n }\n\n recognition.onresult = function(event) {\n if (!isLessonActive || !speechRecognitionActive) return;\n\n const transcript = event.results[0][0].transcript.trim();\n const formattedInput = normalizeAndFormatUserInput(transcript);\n\n speechRecognitionActive = false;\n showRecognitionLoader(false);\n\n appendMessage(formattedInput, 'user');\n\n if (checkStopKeywords(formattedInput.toLowerCase())) {\n endLesson(true);\n return;\n }\n\n const feedbackType = analyzeResponse(formattedInput, question.keywords);\n let feedbackMessage = \"\";\n let faceEmotion = \"neutral\";\n\n if (feedbackType === \"positive\") {\n feedbackMessage = pickRandom(positiveFeedback);\n faceEmotion = \"happy\";\n } else if (feedbackType === \"pronunciation\") {\n feedbackMessage = pickRandom(pronunciationFeedback);\n faceEmotion = \"neutral\";\n } else {\n feedbackMessage = pickRandom(constructiveFeedback);\n faceEmotion = \"confused\";\n }\n\n appendMessage(feedbackMessage, 'bot');\n faceSpeak(feedbackMessage, faceEmotion);\n showSynthesisLoader(true);\n sayText(feedbackMessage, \"en-US\").then(() => {\n showSynthesisLoader(false);\n\n if (!isLessonActive) return;\n\n currentQuestionIndex++;\n clearPendingTimeout();\n pendingNextQuestionTimeout = setTimeout(() => {\n startLesson();\n }, 1800);\n });\n };\n\n recognition.onspeechend = function() {\n if (speechRecognitionActive && recognition) {\n recognition.stop();\n }\n };\n\n recognition.onerror = function(event) {\n speechRecognitionActive = false;\n showRecognitionLoader(false);\n\n if (!isLessonActive) return;\n\n let errorMessage = \"\";\n\n switch (event.error) {\n case \"not-allowed\":\n errorMessage = \"Microphone access was blocked. Please allow microphone access in your browser settings and try again.\";\n appendMessage(errorMessage, 'bot');\n faceSpeak(errorMessage, \"sad\");\n break;\n\n case \"no-speech\":\n retryCount++;\n if (retryCount <= maxRetriesPerQuestion) {\n errorMessage = \"I did not hear your answer. Please try again.\";\n appendMessage(errorMessage, 'bot');\n faceSpeak(errorMessage, \"confused\");\n showSynthesisLoader(true);\n sayText(errorMessage, \"en-US\").then(() => {\n showSynthesisLoader(false);\n listenUserResponse(question);\n });\n } else {\n errorMessage = \"Let's move to the next question.\";\n appendMessage(errorMessage, 'bot');\n faceSpeak(errorMessage, \"neutral\");\n showSynthesisLoader(true);\n sayText(errorMessage, \"en-US\").then(() => {\n showSynthesisLoader(false);\n currentQuestionIndex++;\n startLesson();\n });\n }\n break;\n\n case \"audio-capture\":\n appendMessage(\"No microphone was detected. Please check your microphone and try again.\", \"bot\");\n faceSpeak(\"No microphone was detected. Please check your microphone and try again.\", \"sad\");\n break;\n\n default:\n appendMessage(\"There was a speech recognition error. Please try answering again.\", \"bot\");\n faceSpeak(\"There was a speech recognition error. Please try answering again.\", \"sad\");\n showSynthesisLoader(true);\n sayText(\"Please answer again.\", \"en-US\").then(() => {\n showSynthesisLoader(false);\n listenUserResponse(question);\n });\n break;\n }\n };\n\n recognition.onend = function() {\n speechRecognitionActive = false;\n showRecognitionLoader(false);\n };\n }\n\n function analyzeResponse(userInput, keywords) {\n const input = userInput.toLowerCase();\n\n let matchCount = 0;\n keywords.forEach(keyword => {\n if (input.includes(keyword.toLowerCase())) {\n matchCount++;\n }\n });\n\n const wordCount = input.split(\/\\s+\/).filter(Boolean).length;\n\n if (matchCount >= 2 || wordCount >= 10) return \"positive\";\n if (wordCount >= 5) return \"pronunciation\";\n return \"constructive\";\n }\n\n function checkStopKeywords(userInput) {\n const pattern = new RegExp(\"\\\\b(\" + stopKeywords.map(escapeRegex).join(\"|\") + \")\\\\b\", \"i\");\n return pattern.test(userInput);\n }\n\n function normalizeAndFormatUserInput(text) {\n let normalized = text.trim();\n normalized = normalized.replace(\/\\bi\\b\/g, \"I\");\n return formatSentence(normalized);\n }\n\n function formatSentence(text) {\n if (!text) return \"\";\n text = text.charAt(0).toUpperCase() + text.slice(1);\n if (!\/[.?!]$\/.test(text)) text += \".\";\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 stopAllAudioAndRecognition();\n isLessonActive = false;\n\n const message = userStopped\n ? \"Thank you for practicing. Goodbye.\"\n : \"Well done. You have completed all the questions. Keep practicing.\";\n\n appendMessage(message, \"bot\");\n faceSpeak(message, userStopped ? \"neutral\" : \"happy\");\n showSynthesisLoader(true);\n sayText(message, \"en-US\").then(() => {\n showSynthesisLoader(false);\n });\n }\n\n function sayText(text, lang) {\n return new Promise(resolve => {\n if (!speechSynthesisSupported) {\n resolve();\n return;\n }\n\n window.speechSynthesis.cancel();\n\n const utterance = new SpeechSynthesisUtterance(text);\n utterance.lang = lang || \"en-US\";\n utterance.rate = 1.0;\n utterance.pitch = 1.0;\n\n if (selectedVoice) {\n utterance.voice = selectedVoice;\n }\n\n utterance.onend = () => resolve();\n utterance.onerror = () => resolve();\n\n window.speechSynthesis.speak(utterance);\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\n function showSynthesisLoader(show) {\n const loader = document.getElementById('synthesis-loader');\n loader.style.display = show ? 'inline-block' : 'none';\n loader.style.borderTop = '4px solid #17a2b8';\n }\n\n function showRecognitionLoader(show) {\n const loader = document.getElementById('synthesis-loader');\n loader.style.display = show ? 'inline-block' : 'none';\n loader.style.borderTop = show ? '4px solid #ffc107' : '4px solid #17a2b8';\n }\n\n function clearPendingTimeout() {\n if (pendingNextQuestionTimeout) {\n clearTimeout(pendingNextQuestionTimeout);\n pendingNextQuestionTimeout = null;\n }\n }\n\n function stopRecognitionOnly() {\n if (recognition) {\n try {\n recognition.onresult = null;\n recognition.onerror = null;\n recognition.onend = null;\n recognition.onspeechend = null;\n recognition.stop();\n } catch (e) {}\n }\n speechRecognitionActive = false;\n showRecognitionLoader(false);\n }\n\n function stopAllAudioAndRecognition() {\n clearPendingTimeout();\n stopRecognitionOnly();\n if (speechSynthesisSupported) {\n window.speechSynthesis.cancel();\n }\n showSynthesisLoader(false);\n stopFaceTalking();\n faceSpeechBubble.classList.remove('visible');\n }\n\n function pickRandom(arr) {\n return arr[Math.floor(Math.random() * arr.length)];\n }\n\n function escapeRegex(str) {\n return str.replace(\/[.*+?^${}()|[\\]\\\\]\/g, \"\\\\$&\");\n }\n\n window.onload = initialize;\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>This Robot is used for Visa Interview practices for PhD candidates. In order to interact with this Robot smoothly, please<\/p>\n","protected":false},"author":1,"featured_media":251,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"colormag_page_layout":"default_layout","footnotes":""},"categories":[5,17,16],"tags":[],"class_list":["post-264","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-chatbot","category-phd","category-visa-interviews"],"_links":{"self":[{"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/posts\/264","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/comments?post=264"}],"version-history":[{"count":3,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/posts\/264\/revisions"}],"predecessor-version":[{"id":814,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/posts\/264\/revisions\/814"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/media\/251"}],"wp:attachment":[{"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/media?parent=264"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/categories?post=264"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/tags?post=264"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":264,"date":"2025-09-22T06:41:16","date_gmt":"2025-09-22T06:41:16","guid":{"rendered":"https:\/\/i-cte.org\/robot\/?p=264"},"modified":"2026-03-09T15:44:52","modified_gmt":"2026-03-09T15:44:52","slug":"location-and-purpose","status":"publish","type":"post","link":"https:\/\/i-cte.org\/robot\/location-and-purpose\/","title":{"rendered":"Location and Purpose"},"content":{"rendered":"\n

This Robot is used for Visa Interview practices for PhD candidates. In order to interact with this Robot smoothly, please use a laptop, desktop, or iPad. Do not use Smartphones.<\/p>\n\n\n\n\n\n\n \n \n PhD studies: Study Location and Purpose<\/title>\n <style>\n * {\n box-sizing: border-box;\n }\n\n body {\n font-family: Arial, sans-serif;\n background-color: #f4f6f8;\n margin: 0;\n padding: 0;\n display: flex;\n flex-direction: column;\n min-height: 100vh;\n }\n\n .menu {\n width: 100%;\n background-color: #28a745;\n padding: 10px;\n text-align: center;\n box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);\n margin-bottom: 10px;\n overflow-x: auto;\n white-space: nowrap;\n }\n\n .menu a {\n color: #fff;\n text-decoration: none;\n margin: 0 10px;\n font-weight: bold;\n font-size: 14px;\n display: inline-block;\n }\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 {\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 10px;\n box-sizing: border-box;\n flex: 1 0 auto;\n width: 100%;\n }\n\n .image-chat-wrapper {\n display: flex;\n flex-direction: column;\n width: 100%;\n max-width: 980px;\n flex: 1;\n gap: 16px;\n }\n\n .image-container {\n flex: 1;\n text-align: center;\n margin-bottom: 15px;\n background: #ffffff;\n border-radius: 15px;\n box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);\n padding: 14px;\n }\n\n .sentence-text {\n margin: 10px 0;\n font-weight: bold;\n color: #333;\n font-size: 16px;\n }\n\n .word-box {\n margin-top: 10px;\n padding: 10px;\n background-color: #fff;\n border: 2px solid #28a745;\n border-radius: 8px;\n box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);\n font-size: 16px;\n font-weight: bold;\n color: #28a745;\n text-align: left;\n max-height: 250px;\n overflow-y: auto;\n }\n\n .chat-container {\n background-color: #28a745;\n border-radius: 15px;\n box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);\n overflow: hidden;\n display: flex;\n flex-direction: column;\n max-height: 560px;\n flex: 1;\n }\n\n .chat-header {\n background-color: #1e7e34;\n color: #fff;\n padding: 12px;\n text-align: center;\n border-bottom: 1px solid #155724;\n position: relative;\n }\n\n .chat-header h2 {\n margin: 0;\n font-size: 18px;\n }\n\n .chat-header .loader {\n position: absolute;\n right: 20px;\n top: 50%;\n transform: translateY(-50%);\n display: none;\n }\n\n .chat-messages {\n padding: 12px;\n overflow-y: auto;\n flex: 1;\n background-color: #fff;\n max-height: 320px;\n }\n\n .message {\n margin-bottom: 10px;\n padding: 10px;\n border-radius: 6px;\n font-size: 14px;\n line-height: 1.5;\n }\n\n .user-message {\n background-color: #ffc107;\n color: #fff;\n text-align: right;\n }\n\n .bot-message {\n background-color: #17a2b8;\n color: #fff;\n text-align: left;\n }\n\n .chat-input {\n display: flex;\n align-items: center;\n background-color: #c3e6cb;\n padding: 10px;\n justify-content: space-between;\n flex-wrap: wrap;\n gap: 8px;\n }\n\n .send-button, .stop-button {\n background-color: #17a2b8;\n color: #fff;\n font-weight: bold;\n border: none;\n border-radius: 5px;\n padding: 12px 16px;\n cursor: pointer;\n transition: background-color 0.3s;\n flex: 1;\n margin: 4px;\n max-width: 160px;\n font-size: 16px;\n }\n\n .stop-button {\n background-color: #dc3545;\n }\n\n .send-button:hover,\n .stop-button:hover,\n .send-button:focus,\n .stop-button:focus {\n background-color: #218838;\n outline: none;\n }\n\n .voice-selection {\n margin: 10px 0;\n width: 100%;\n max-width: 320px;\n }\n\n .voice-selection label {\n display: block;\n margin-bottom: 5px;\n font-weight: bold;\n color: #333;\n }\n\n .voice-selection select {\n width: 100%;\n padding: 8px;\n border-radius: 5px;\n border: 1px solid #ccc;\n font-size: 14px;\n }\n\n .loader {\n border: 4px solid #f3f3f3;\n border-top: 4px solid #17a2b8;\n border-radius: 50%;\n width: 20px;\n height: 20px;\n animation: spin 1s linear infinite;\n display: inline-block;\n margin-left: 10px;\n }\n\n @keyframes spin {\n 0% { transform: translateY(-50%) rotate(0deg); }\n 100% { transform: translateY(-50%) rotate(360deg); }\n }\n\n .face-panel {\n width: 100%;\n min-height: 330px;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n background: radial-gradient(circle at center, #111 0%, #000 70%);\n border-radius: 15px;\n padding: 16px 10px;\n overflow: hidden;\n position: relative;\n }\n\n .speech-bubble {\n position: relative;\n background: white;\n color: #111;\n border-radius: 20px;\n padding: 12px 18px;\n max-width: 320px;\n opacity: 0;\n transform: translateY(10px) scale(0.92);\n transition: all 0.25s ease;\n box-shadow: 0 10px 30px rgba(255,255,255,0.08);\n margin-bottom: 12px;\n font-weight: 600;\n }\n\n .speech-bubble.visible {\n opacity: 1;\n transform: translateY(0) scale(1);\n }\n\n .speech-bubble::after {\n content: '';\n position: absolute;\n bottom: -15px;\n left: 50%;\n transform: translateX(-50%);\n border: 10px solid transparent;\n border-top-color: white;\n }\n\n .face-container {\n filter: drop-shadow(0 0 45px rgba(255,255,255,0.08));\n transition: transform 0.15s ease;\n will-change: transform;\n }\n\n .face-shell {\n transition: transform 0.2s ease;\n transform-origin: 150px 150px;\n }\n\n .eye-white,\n .pupil,\n .eyebrow,\n .mouth-path,\n .nose-path,\n .cheek,\n .tear,\n .eyelid,\n .sparkle {\n transition: all 0.18s ease;\n }\n\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 @media (orientation: landscape) and (min-width: 600px) {\n .image-chat-wrapper {\n flex-direction: row;\n justify-content: space-between;\n gap: 20px;\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 @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 .voice-selection select {\n font-size: 14px;\n }\n }\n\n @media only screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {\n .chat-header h2 {\n font-size: 18px;\n }\n .send-button, .stop-button {\n padding: 14px 18px;\n font-size: 16px;\n }\n .message {\n font-size: 14px;\n }\n .word-box {\n font-size: 16px;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"menu\">\n <a href=\"https:\/\/i-cte.org\/robot\/visa-interview\/\">Interviews<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/personal-information\/\">Personal Information<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/study-plans\/\">Study Plan<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/financial-supports\/\">Financial Supports<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/academic-background\/\">Academic Background<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/location-and-purpose\/\">Location and Purpose<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/children-information\/\">Children Information<\/a>\n <\/div>\n\n <div class=\"container\">\n <div class=\"image-chat-wrapper\">\n <div class=\"image-container\">\n\n <div class=\"face-panel\">\n <div id=\"face-speech-bubble\" class=\"speech-bubble\">\n <p id=\"face-speech-text\"><\/p>\n <\/div>\n\n <div class=\"face-container\" id=\"face-container\">\n <svg width=\"300\" height=\"300\" viewBox=\"0 0 300 300\" id=\"face-svg\" aria-label=\"Expressive face\">\n <defs>\n <radialGradient id=\"faceGlow\" cx=\"50%\" cy=\"40%\" r=\"70%\">\n <stop offset=\"0%\" stop-color=\"rgba(255,255,255,0.12)\" \/>\n <stop offset=\"100%\" stop-color=\"rgba(255,255,255,0.02)\" \/>\n <\/radialGradient>\n <radialGradient id=\"cheekGlow\" cx=\"50%\" cy=\"50%\" r=\"60%\">\n <stop offset=\"0%\" stop-color=\"rgba(255,160,160,0.8)\" \/>\n <stop offset=\"100%\" stop-color=\"rgba(255,160,160,0)\" \/>\n <\/radialGradient>\n <\/defs>\n\n <g id=\"face-shell\" class=\"face-shell\">\n <ellipse cx=\"150\" cy=\"150\" rx=\"120\" ry=\"140\" fill=\"url(#faceGlow)\" stroke=\"rgba(255,255,255,0.15)\" stroke-width=\"2\"\/>\n\n <path id=\"left-eyebrow\" class=\"eyebrow\" d=\"M 60 80 Q 90 75 120 80\" fill=\"none\" stroke=\"white\" stroke-width=\"4\" stroke-linecap=\"round\"\/>\n <path id=\"right-eyebrow\" class=\"eyebrow\" d=\"M 180 80 Q 210 75 240 80\" fill=\"none\" stroke=\"white\" stroke-width=\"4\" stroke-linecap=\"round\"\/>\n\n <ellipse id=\"left-blush\" class=\"cheek\" cx=\"70\" cy=\"165\" rx=\"24\" ry=\"12\" fill=\"url(#cheekGlow)\" opacity=\"0\"\/>\n <ellipse id=\"right-blush\" class=\"cheek\" cx=\"230\" cy=\"165\" rx=\"24\" ry=\"12\" fill=\"url(#cheekGlow)\" opacity=\"0\"\/>\n\n <g id=\"left-eye-group\">\n <ellipse id=\"left-eye-white\" class=\"eye-white\" cx=\"90\" cy=\"110\" rx=\"30\" ry=\"24\" fill=\"white\"\/>\n <ellipse id=\"left-eye-lid\" class=\"eyelid\" cx=\"90\" cy=\"110\" rx=\"30\" ry=\"0\" fill=\"black\"\/>\n <circle id=\"left-pupil\" class=\"pupil\" cx=\"90\" cy=\"110\" r=\"11.5\" fill=\"black\"\/>\n <circle id=\"left-sparkle\" class=\"sparkle\" cx=\"96\" cy=\"104\" r=\"4.2\" fill=\"white\" opacity=\"0.95\"\/>\n <\/g>\n\n <g id=\"right-eye-group\">\n <ellipse id=\"right-eye-white\" class=\"eye-white\" cx=\"210\" cy=\"110\" rx=\"30\" ry=\"24\" fill=\"white\"\/>\n <ellipse id=\"right-eye-lid\" class=\"eyelid\" cx=\"210\" cy=\"110\" rx=\"30\" ry=\"0\" fill=\"black\"\/>\n <circle id=\"right-pupil\" class=\"pupil\" cx=\"210\" cy=\"110\" r=\"11.5\" fill=\"black\"\/>\n <circle id=\"right-sparkle\" class=\"sparkle\" cx=\"216\" cy=\"104\" r=\"4.2\" fill=\"white\" opacity=\"0.95\"\/>\n <\/g>\n\n <path id=\"nose\" class=\"nose-path\" d=\"M 150 140 L 142 175 Q 150 181 158 175 L 150 140\" fill=\"none\" stroke=\"white\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n\n <path id=\"mouth\" class=\"mouth-path\" d=\"M 100 220 Q 150 232 200 220\" fill=\"none\" stroke=\"white\" stroke-width=\"5\" stroke-linecap=\"round\"\/>\n <ellipse id=\"mouth-inner\" cx=\"150\" cy=\"225\" rx=\"0\" ry=\"0\" fill=\"rgba(120,0,0,0.75)\" opacity=\"0\"\/>\n <rect id=\"teeth\" x=\"122\" y=\"220\" width=\"56\" height=\"10\" rx=\"4\" fill=\"white\" opacity=\"0\"\/>\n\n <path id=\"left-tear\" class=\"tear\" d=\"M 75 140 Q 69 160 75 171 Q 81 160 75 140\" fill=\"rgba(100,200,255,0)\" \/>\n <path id=\"right-tear\" class=\"tear\" d=\"M 225 140 Q 219 160 225 171 Q 231 160 225 140\" fill=\"rgba(100,200,255,0)\" \/>\n\n <g id=\"anger-veins\" opacity=\"0\">\n <path d=\"M 250 50 L 260 60 L 255 55 L 265 65\" stroke=\"#ff4444\" stroke-width=\"2.4\" fill=\"none\" \/>\n <\/g>\n <\/g>\n <\/svg>\n <\/div>\n <\/div>\n\n <div class=\"sentence-text\">Listen to the questions and respond accordingly.<\/div>\n <div id=\"word-box\" class=\"word-box\"><\/div>\n <\/div>\n\n <div class=\"chat-container\">\n <div class=\"chat-header\">\n <h2>Study Location and Purpose<\/h2>\n <div class=\"loader\" id=\"synthesis-loader\"><\/div>\n <\/div>\n <div class=\"chat-messages\" id=\"chat-messages\"><\/div>\n <div class=\"chat-input\">\n <div class=\"voice-selection\">\n <label for=\"voice-select\">Choose Voice:<\/label>\n <select id=\"voice-select\" aria-label=\"Select Voice\">\n <option value=\"\">Loading voices…<\/option>\n <\/select>\n <\/div>\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 <div class=\"menu\">\n <a href=\"https:\/\/i-cte.org\/robot\/visa-interview\/\">Interviews<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/personal-information\/\">Personal Information<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/study-plans\/\">Study Plan<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/financial-supports\/\">Financial Supports<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/academic-background\/\">Academic Background<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/location-and-purpose\/\">Location and Purpose<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/children-information\/\">Children Information<\/a>\n <\/div>\n\n <script>\n const questions = [\n {\n english: \"How did you know about the school?\",\n keywords: [\"know\", \"school\", \"website\", \"publications\", \"mentors\"],\n answer: \"I learned about the school through its website, research publications, and recommendations from academic mentors.\"\n },\n {\n english: \"How many schools did you apply to?\",\n keywords: [\"apply\", \"schools\", \"three\", \"applications\"],\n answer: \"I applied to three schools that align with my academic interests.\"\n },\n {\n english: \"Why did you decide to study in the United States? Why do you not continue to study in college in Vietnam?\",\n keywords: [\"study\", \"united states\", \"vietnam\", \"research facilities\", \"networking\"],\n answer: \"I chose the United States because of its advanced research facilities and global networking opportunities. I believe this environment will help me grow as a researcher.\"\n },\n {\n english: \"Why did you select this school?\",\n keywords: [\"select\", \"school\", \"program\", \"research interests\", \"resources\"],\n answer: \"I chose this school because it offers a strong PhD program aligned with my research interests and provides excellent resources for academic development.\"\n },\n {\n english: \"Why did you choose Texas State?\",\n keywords: [\"texas state\", \"campus\", \"international students\", \"community\"],\n answer: \"I chose Texas State because of its welcoming campus environment, strong support for international students, and vibrant community that encourages personal and academic growth.\"\n },\n {\n english: \"What factors influenced your decision to select this program?\",\n keywords: [\"factors\", \"faculty\", \"curriculum\", \"research collaboration\"],\n answer: \"The program\u2019s strong faculty expertise, comprehensive curriculum, and opportunities for research collaboration influenced my decision.\"\n },\n {\n english: \"Why do you think this program fits your academic goals?\",\n keywords: [\"program\", \"fit\", \"academic goals\", \"applied linguistics\", \"career\"],\n answer: \"This program matches my academic goals because it focuses on applied linguistics and language education, which are directly related to my long-term career as a researcher and professor.\"\n },\n {\n english: \"What makes this school different from the others you applied to?\",\n keywords: [\"difference\", \"school\", \"compare\", \"research\", \"partnerships\"],\n answer: \"This school stands out for its cutting-edge research in language education and strong partnerships with international institutions, which provide broader opportunities compared to other schools.\"\n },\n {\n english: \"Where will you stay in the United States?\",\n keywords: [\"stay\", \"housing\", \"apartments\", \"campus\", \"safety\"],\n answer: \"I plan to stay in university housing or nearby rental apartments near the campus for convenience and safety.\"\n },\n {\n english: \"Do you have any relatives or friends near the university?\",\n keywords: [\"relatives\", \"friends\", \"university\", \"support services\", \"adjust\"],\n answer: \"No, I do not have relatives near the university, but I am confident that the university\u2019s international student support services will help me adjust smoothly.\"\n }\n ];\n\n const positiveFeedback = [\n \"Great job. Your answer is relevant to the question.\",\n \"Well done. That was a clear response.\",\n \"Excellent. You answered confidently.\",\n \"Very good. Your response matches the question well.\",\n \"Good answer. Keep speaking clearly and naturally.\",\n \"That was strong and appropriate for an interview.\"\n ];\n\n const constructiveFeedback = [\n \"Try to give a fuller answer with one or two supporting details.\",\n \"Your answer is a good start. Add more specific information.\",\n \"Try to include a reason or an example in your response.\",\n \"Make your answer more complete by connecting it directly to the question.\",\n \"Please expand your answer a little more and sound more confident.\",\n \"Try to use complete sentences and explain your idea more clearly.\"\n ];\n\n const pronunciationFeedback = [\n \"Your answer was understandable. Try to speak a little more slowly and clearly.\",\n \"Good effort. Focus on clear pronunciation of key words.\",\n \"Well done. Try to stress the important words in your sentence.\",\n \"Your response was clear overall. Keep your pace steady.\",\n \"Nice job. Speak confidently and pronounce each word more distinctly.\"\n ];\n\n const stopKeywords = [\"goodbye\", \"good bye\", \"bye\", \"bye-bye\", \"byebye\", \"stop\", \"end lesson\"];\n\n let currentQuestionIndex = 0;\n let recognition = null;\n let isLessonActive = false;\n let speechRecognitionActive = false;\n let pendingNextQuestionTimeout = null;\n let retryCount = 0;\n const maxRetriesPerQuestion = 2;\n\n const speechSynthesisSupported = 'speechSynthesis' in window;\n const SpeechRecognitionClass = window.SpeechRecognition || window.webkitSpeechRecognition;\n const speechRecognitionSupported = !!SpeechRecognitionClass;\n\n let voices = [];\n let filteredVoices = [];\n let selectedVoice = null;\n\n \/* FACE SYSTEM *\/\n let currentEmotion = 'neutral';\n let isFaceTalking = false;\n let faceTalkTimer = null;\n let faceBubbleTimer = null;\n let blinkTimer = null;\n let saccadeTimer = null;\n let breatheRAF = null;\n\n const faceContainer = document.getElementById('face-container');\n const faceShell = document.getElementById('face-shell');\n const mouth = document.getElementById('mouth');\n const mouthInner = document.getElementById('mouth-inner');\n const teeth = document.getElementById('teeth');\n const leftEyeWhite = document.getElementById('left-eye-white');\n const rightEyeWhite = document.getElementById('right-eye-white');\n const leftLid = document.getElementById('left-eye-lid');\n const rightLid = document.getElementById('right-eye-lid');\n const leftPupil = document.getElementById('left-pupil');\n const rightPupil = document.getElementById('right-pupil');\n const leftSparkle = document.getElementById('left-sparkle');\n const rightSparkle = document.getElementById('right-sparkle');\n const leftEyebrow = document.getElementById('left-eyebrow');\n const rightEyebrow = document.getElementById('right-eyebrow');\n const leftBlush = document.getElementById('left-blush');\n const rightBlush = document.getElementById('right-blush');\n const leftTear = document.getElementById('left-tear');\n const rightTear = document.getElementById('right-tear');\n const angerVeins = document.getElementById('anger-veins');\n const faceSpeechBubble = document.getElementById('face-speech-bubble');\n const faceSpeechText = document.getElementById('face-speech-text');\n\n const emotions = {\n neutral: {\n mouth: 'M 100 220 Q 150 232 200 220',\n leftEyebrow: 'M 60 80 Q 90 75 120 80',\n rightEyebrow: 'M 180 80 Q 210 75 240 80',\n eyeRY: 24,\n blush: 0,\n tears: 0,\n anger: 0,\n teeth: 0,\n mouthInnerOpacity: 0,\n mouthInnerRx: 0,\n mouthInnerRy: 0\n },\n happy: {\n mouth: 'M 92 212 Q 150 278 208 212',\n leftEyebrow: 'M 60 75 Q 90 66 120 75',\n rightEyebrow: 'M 180 75 Q 210 66 240 75',\n eyeRY: 17,\n blush: 0.48,\n tears: 0,\n anger: 0,\n teeth: 0.92,\n mouthInnerOpacity: 0.25,\n mouthInnerRx: 24,\n mouthInnerRy: 8\n },\n sad: {\n mouth: 'M 112 240 Q 150 203 188 240',\n leftEyebrow: 'M 68 72 Q 90 88 120 76',\n rightEyebrow: 'M 180 76 Q 210 88 232 72',\n eyeRY: 15,\n blush: 0,\n tears: 0.78,\n anger: 0,\n teeth: 0,\n mouthInnerOpacity: 0,\n mouthInnerRx: 0,\n mouthInnerRy: 0\n },\n confused: {\n mouth: 'M 110 224 Q 140 230 160 221 Q 182 236 190 226',\n leftEyebrow: 'M 60 86 Q 90 68 120 80',\n rightEyebrow: 'M 180 70 Q 210 86 240 76',\n eyeRY: 22,\n blush: 0,\n tears: 0,\n anger: 0,\n teeth: 0,\n mouthInnerOpacity: 0,\n mouthInnerRx: 0,\n mouthInnerRy: 0\n }\n };\n\n function setFaceEmotion(emotion) {\n const preset = emotions[emotion] || emotions.neutral;\n currentEmotion = emotion;\n\n mouth.setAttribute('d', preset.mouth);\n leftEyebrow.setAttribute('d', preset.leftEyebrow);\n rightEyebrow.setAttribute('d', preset.rightEyebrow);\n\n leftEyeWhite.setAttribute('ry', preset.eyeRY);\n rightEyeWhite.setAttribute('ry', preset.eyeRY);\n\n leftBlush.setAttribute('opacity', preset.blush);\n rightBlush.setAttribute('opacity', preset.blush);\n\n leftTear.setAttribute('fill', `rgba(100,200,255,${preset.tears})`);\n rightTear.setAttribute('fill', `rgba(100,200,255,${preset.tears})`);\n\n angerVeins.setAttribute('opacity', preset.anger);\n teeth.setAttribute('opacity', preset.teeth);\n mouthInner.setAttribute('opacity', preset.mouthInnerOpacity);\n mouthInner.setAttribute('rx', preset.mouthInnerRx);\n mouthInner.setAttribute('ry', preset.mouthInnerRy);\n }\n\n function resetFacePupils() {\n leftPupil.setAttribute('cx', 90);\n leftPupil.setAttribute('cy', 110);\n rightPupil.setAttribute('cx', 210);\n rightPupil.setAttribute('cy', 110);\n leftSparkle.setAttribute('cx', 96);\n leftSparkle.setAttribute('cy', 104);\n rightSparkle.setAttribute('cx', 216);\n rightSparkle.setAttribute('cy', 104);\n }\n\n function blinkFace(duration = 110) {\n const currentL = parseFloat(leftEyeWhite.getAttribute('ry'));\n const currentR = parseFloat(rightEyeWhite.getAttribute('ry'));\n leftLid.setAttribute('ry', currentL + 1);\n rightLid.setAttribute('ry', currentR + 1);\n\n setTimeout(() => {\n leftLid.setAttribute('ry', 0);\n rightLid.setAttribute('ry', 0);\n }, duration);\n }\n\n function scheduleBlink() {\n clearTimeout(blinkTimer);\n const next = 1500 + Math.random() * 3500;\n blinkTimer = setTimeout(() => {\n blinkFace(90 + Math.random() * 80);\n if (Math.random() < 0.22) {\n setTimeout(() => blinkFace(70), 120);\n }\n scheduleBlink();\n }, next);\n }\n\n function idleSaccade() {\n if (isFaceTalking) return;\n const dx = (Math.random() * 2 - 1) * 4.5;\n const dy = (Math.random() * 2 - 1) * 3.2;\n\n leftPupil.setAttribute('cx', 90 + dx);\n leftPupil.setAttribute('cy', 110 + dy);\n rightPupil.setAttribute('cx', 210 + dx);\n rightPupil.setAttribute('cy', 110 + dy);\n\n leftSparkle.setAttribute('cx', 96 + dx * 0.6);\n leftSparkle.setAttribute('cy', 104 + dy * 0.6);\n rightSparkle.setAttribute('cx', 216 + dx * 0.6);\n rightSparkle.setAttribute('cy', 104 + dy * 0.6);\n }\n\n function scheduleSaccade() {\n clearTimeout(saccadeTimer);\n const next = 900 + Math.random() * 1800;\n saccadeTimer = setTimeout(() => {\n idleSaccade();\n scheduleSaccade();\n }, next);\n }\n\n function startFaceBreathing() {\n let t0 = performance.now();\n\n function frame(now) {\n const t = (now - t0) \/ 1000;\n const breathe = Math.sin(t * 1.8) * 1.8;\n const sway = Math.sin(t * 0.9) * 1.4;\n const tilt = Math.sin(t * 0.75) * 0.8;\n\n if (!isFaceTalking) {\n faceShell.setAttribute(\n 'transform',\n `translate(${sway.toFixed(2)}, ${breathe.toFixed(2)}) rotate(${tilt.toFixed(2)} 150 150)`\n );\n }\n\n breatheRAF = requestAnimationFrame(frame);\n }\n\n cancelAnimationFrame(breatheRAF);\n breatheRAF = requestAnimationFrame(frame);\n }\n\n function showFaceBubble(text, duration) {\n faceSpeechText.textContent = text;\n faceSpeechBubble.classList.add('visible');\n clearTimeout(faceBubbleTimer);\n faceBubbleTimer = setTimeout(() => {\n faceSpeechBubble.classList.remove('visible');\n }, duration + 600);\n }\n\n function stopFaceTalking() {\n isFaceTalking = false;\n clearInterval(faceTalkTimer);\n faceTalkTimer = null;\n setFaceEmotion(currentEmotion);\n }\n\n function talkingFrame(emotion) {\n const shapes = {\n neutral: [\n { d: 'M 102 220 Q 150 240 198 220', rx: 14, ry: 7, teeth: 0.1, inner: 0.25 },\n { d: 'M 96 214 Q 150 262 204 214', rx: 22, ry: 11, teeth: 0.28, inner: 0.45 },\n { d: 'M 108 224 Q 150 236 192 224', rx: 12, ry: 5, teeth: 0, inner: 0.18 }\n ],\n happy: [\n { d: 'M 92 212 Q 150 280 208 212', rx: 24, ry: 10, teeth: 0.9, inner: 0.35 },\n { d: 'M 96 216 Q 150 266 204 216', rx: 18, ry: 8, teeth: 0.75, inner: 0.28 },\n { d: 'M 88 210 Q 150 286 212 210', rx: 28, ry: 12, teeth: 1.0, inner: 0.4 }\n ],\n sad: [\n { d: 'M 112 238 Q 150 212 188 238', rx: 10, ry: 4, teeth: 0, inner: 0.1 },\n { d: 'M 108 234 Q 150 220 192 234', rx: 12, ry: 5, teeth: 0, inner: 0.14 },\n { d: 'M 114 240 Q 150 208 186 240', rx: 8, ry: 4, teeth: 0, inner: 0.08 }\n ],\n confused: [\n { d: 'M 110 224 Q 140 230 160 221 Q 182 236 190 226', rx: 10, ry: 4, teeth: 0, inner: 0.1 },\n { d: 'M 106 222 Q 140 236 162 220 Q 184 242 194 226', rx: 14, ry: 6, teeth: 0, inner: 0.18 },\n { d: 'M 112 225 Q 141 228 161 222 Q 181 234 189 225', rx: 9, ry: 4, teeth: 0, inner: 0.08 }\n ]\n };\n\n const list = shapes[emotion] || shapes.neutral;\n const chosen = list[Math.floor(Math.random() * list.length)];\n\n mouth.setAttribute('d', chosen.d);\n mouthInner.setAttribute('opacity', chosen.inner);\n mouthInner.setAttribute('rx', chosen.rx);\n mouthInner.setAttribute('ry', chosen.ry);\n teeth.setAttribute('opacity', chosen.teeth);\n\n const bobX = (Math.random() * 2 - 1) * 1.5;\n const bobY = -1.5 + Math.random() * 2.8;\n const tilt = (Math.random() * 2 - 1) * 2.2;\n\n faceShell.setAttribute(\n 'transform',\n `translate(${bobX.toFixed(2)}, ${bobY.toFixed(2)}) rotate(${tilt.toFixed(2)} 150 150)`\n );\n }\n\n function faceSpeak(text, emotion = \"neutral\", durationHint = null) {\n const clean = (text || \"\").trim();\n if (!clean) return;\n\n clearInterval(faceTalkTimer);\n isFaceTalking = true;\n setFaceEmotion(emotion);\n\n const duration = durationHint || Math.max(1800, clean.length * 75);\n showFaceBubble(clean, duration);\n\n faceTalkTimer = setInterval(() => talkingFrame(emotion), 120);\n\n setTimeout(() => {\n stopFaceTalking();\n }, duration);\n }\n\n document.addEventListener('mousemove', (e) => {\n if (isFaceTalking) return;\n\n const svg = document.getElementById('face-svg');\n const rect = svg.getBoundingClientRect();\n const centerX = rect.left + rect.width \/ 2;\n const centerY = rect.top + rect.height \/ 2;\n\n const dx = (e.clientX - centerX) \/ 45;\n const dy = (e.clientY - centerY) \/ 45;\n\n const moveX = Math.max(-5, Math.min(5, dx));\n const moveY = Math.max(-4, Math.min(4, dy));\n\n leftPupil.setAttribute('cx', 90 + moveX);\n leftPupil.setAttribute('cy', 110 + moveY);\n rightPupil.setAttribute('cx', 210 + moveX);\n rightPupil.setAttribute('cy', 110 + moveY);\n\n leftSparkle.setAttribute('cx', 96 + moveX * 0.6);\n leftSparkle.setAttribute('cy', 104 + moveY * 0.6);\n rightSparkle.setAttribute('cx', 216 + moveX * 0.6);\n rightSparkle.setAttribute('cy', 104 + moveY * 0.6);\n\n faceContainer.style.transform = `translate(${(moveX * 0.25).toFixed(2)}px, ${(moveY * 0.2).toFixed(2)}px)`;\n });\n\n document.addEventListener('mouseleave', () => {\n if (isFaceTalking) return;\n resetFacePupils();\n faceContainer.style.transform = 'translate(0px, 0px)';\n });\n\n \/* LESSON SYSTEM *\/\n\n function initialize() {\n loadVoices();\n setFaceEmotion('neutral');\n scheduleBlink();\n scheduleSaccade();\n startFaceBreathing();\n\n if (speechSynthesisSupported) {\n setTimeout(() => greetUser(), 700);\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 document.getElementById('start-btn').onclick = function() {\n if (isLessonActive) return;\n\n if (!speechSynthesisSupported) {\n appendMessage(\"Speech synthesis is not supported in your browser.\", \"bot\");\n return;\n }\n\n if (!speechRecognitionSupported) {\n appendMessage(\"Speech recognition is not supported in your browser.\", \"bot\");\n return;\n }\n\n stopAllAudioAndRecognition();\n clearPendingTimeout();\n\n isLessonActive = true;\n currentQuestionIndex = 0;\n retryCount = 0;\n clearWordBox();\n appendMessage(\"The practice session is starting now.\", \"bot\");\n startLesson();\n };\n\n document.getElementById('stop-btn').onclick = function() {\n endLesson(true);\n };\n }\n\n function loadVoices() {\n const fillVoices = () => {\n voices = window.speechSynthesis.getVoices();\n\n filteredVoices = voices.filter(v =>\n \/^en(-|_)\/i.test(v.lang) || \/english\/i.test(v.name)\n );\n\n filteredVoices.sort((a, b) => {\n const aScore = getVoicePriority(a);\n const bScore = getVoicePriority(b);\n return aScore - bScore;\n });\n\n populateVoiceList();\n };\n\n fillVoices();\n\n if (typeof speechSynthesis !== \"undefined\") {\n speechSynthesis.onvoiceschanged = fillVoices;\n }\n }\n\n function getVoicePriority(voice) {\n const name = voice.name.toLowerCase();\n if (name.includes(\"google us english\")) return 1;\n if (name.includes(\"google uk english\")) return 2;\n if (name.includes(\"microsoft\") && name.includes(\"english\")) return 3;\n if (name.includes(\"english\")) return 4;\n return 10;\n }\n\n function populateVoiceList() {\n const voiceSelect = document.getElementById('voice-select');\n voiceSelect.innerHTML = '';\n\n if (!filteredVoices.length) {\n const option = document.createElement('option');\n option.value = \"\";\n option.textContent = \"No English voices available\";\n voiceSelect.appendChild(option);\n voiceSelect.disabled = true;\n selectedVoice = null;\n return;\n }\n\n filteredVoices.forEach((voice, index) => {\n const option = document.createElement('option');\n option.value = String(index);\n option.textContent = `${voice.name} (${voice.lang})`;\n voiceSelect.appendChild(option);\n });\n\n selectedVoice = filteredVoices[0];\n voiceSelect.value = \"0\";\n voiceSelect.disabled = false;\n\n voiceSelect.onchange = () => {\n const index = parseInt(voiceSelect.value, 10);\n selectedVoice = filteredVoices[index] || filteredVoices[0];\n };\n }\n\n function greetUser() {\n const greeting = \"Hello. Welcome to the PhD Study Interview Practice. In this session, you will practice answering important questions about your study location and purpose. Click Start to begin!\";\n appendMessage(greeting, 'bot');\n faceSpeak(greeting, \"neutral\");\n showSynthesisLoader(true);\n sayText(greeting, \"en-US\").then(() => {\n showSynthesisLoader(false);\n });\n }\n\n function startLesson() {\n if (!isLessonActive) return;\n\n if (currentQuestionIndex >= questions.length) {\n endLesson(false);\n return;\n }\n\n retryCount = 0;\n askCurrentQuestion();\n }\n\n function askCurrentQuestion() {\n if (!isLessonActive) return;\n\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}`);\n addSentenceToBox(`Suggested answer: ${question.answer}`);\n\n faceSpeak(questionText, \"neutral\");\n showSynthesisLoader(true);\n sayText(questionText, \"en-US\").then(() => {\n showSynthesisLoader(false);\n listenUserResponse(question);\n });\n }\n\n function listenUserResponse(question) {\n if (!isLessonActive) return;\n\n stopRecognitionOnly();\n\n recognition = new SpeechRecognitionClass();\n recognition.lang = 'en-US';\n recognition.interimResults = false;\n recognition.continuous = false;\n recognition.maxAlternatives = 1;\n\n speechRecognitionActive = true;\n showRecognitionLoader(true);\n appendMessage(\"Listening...\", \"bot\");\n faceSpeak(\"Listening...\", \"confused\", 1400);\n\n try {\n recognition.start();\n } catch (err) {\n speechRecognitionActive = false;\n showRecognitionLoader(false);\n appendMessage(\"The microphone could not start. Please try again.\", \"bot\");\n faceSpeak(\"The microphone could not start. Please try again.\", \"sad\");\n return;\n }\n\n recognition.onresult = function(event) {\n if (!isLessonActive || !speechRecognitionActive) return;\n\n const transcript = event.results[0][0].transcript.trim();\n const formattedInput = normalizeAndFormatUserInput(transcript);\n\n speechRecognitionActive = false;\n showRecognitionLoader(false);\n\n appendMessage(formattedInput, 'user');\n\n if (checkStopKeywords(formattedInput.toLowerCase())) {\n endLesson(true);\n return;\n }\n\n const feedbackType = analyzeResponse(formattedInput, question.keywords);\n let feedbackMessage = \"\";\n let faceEmotion = \"neutral\";\n\n if (feedbackType === \"positive\") {\n feedbackMessage = pickRandom(positiveFeedback);\n faceEmotion = \"happy\";\n } else if (feedbackType === \"pronunciation\") {\n feedbackMessage = pickRandom(pronunciationFeedback);\n faceEmotion = \"neutral\";\n } else {\n feedbackMessage = pickRandom(constructiveFeedback);\n faceEmotion = \"confused\";\n }\n\n appendMessage(feedbackMessage, 'bot');\n faceSpeak(feedbackMessage, faceEmotion);\n showSynthesisLoader(true);\n sayText(feedbackMessage, \"en-US\").then(() => {\n showSynthesisLoader(false);\n\n if (!isLessonActive) return;\n\n currentQuestionIndex++;\n clearPendingTimeout();\n pendingNextQuestionTimeout = setTimeout(() => {\n startLesson();\n }, 1800);\n });\n };\n\n recognition.onspeechend = function() {\n if (speechRecognitionActive && recognition) {\n recognition.stop();\n }\n };\n\n recognition.onerror = function(event) {\n speechRecognitionActive = false;\n showRecognitionLoader(false);\n\n if (!isLessonActive) return;\n\n let errorMessage = \"\";\n\n switch (event.error) {\n case \"not-allowed\":\n errorMessage = \"Microphone access was blocked. Please allow microphone access in your browser settings and try again.\";\n appendMessage(errorMessage, 'bot');\n faceSpeak(errorMessage, \"sad\");\n break;\n\n case \"no-speech\":\n retryCount++;\n if (retryCount <= maxRetriesPerQuestion) {\n errorMessage = \"I did not hear your answer. Please try again.\";\n appendMessage(errorMessage, 'bot');\n faceSpeak(errorMessage, \"confused\");\n showSynthesisLoader(true);\n sayText(errorMessage, \"en-US\").then(() => {\n showSynthesisLoader(false);\n listenUserResponse(question);\n });\n } else {\n errorMessage = \"Let's move to the next question.\";\n appendMessage(errorMessage, 'bot');\n faceSpeak(errorMessage, \"neutral\");\n showSynthesisLoader(true);\n sayText(errorMessage, \"en-US\").then(() => {\n showSynthesisLoader(false);\n currentQuestionIndex++;\n startLesson();\n });\n }\n break;\n\n case \"audio-capture\":\n appendMessage(\"No microphone was detected. Please check your microphone and try again.\", \"bot\");\n faceSpeak(\"No microphone was detected. Please check your microphone and try again.\", \"sad\");\n break;\n\n default:\n appendMessage(\"There was a speech recognition error. Please try answering again.\", \"bot\");\n faceSpeak(\"There was a speech recognition error. Please try answering again.\", \"sad\");\n showSynthesisLoader(true);\n sayText(\"Please answer again.\", \"en-US\").then(() => {\n showSynthesisLoader(false);\n listenUserResponse(question);\n });\n break;\n }\n };\n\n recognition.onend = function() {\n speechRecognitionActive = false;\n showRecognitionLoader(false);\n };\n }\n\n function analyzeResponse(userInput, keywords) {\n const input = userInput.toLowerCase();\n\n let matchCount = 0;\n keywords.forEach(keyword => {\n if (input.includes(keyword.toLowerCase())) {\n matchCount++;\n }\n });\n\n const wordCount = input.split(\/\\s+\/).filter(Boolean).length;\n\n if (matchCount >= 2 || wordCount >= 10) return \"positive\";\n if (wordCount >= 5) return \"pronunciation\";\n return \"constructive\";\n }\n\n function checkStopKeywords(userInput) {\n const pattern = new RegExp(\"\\\\b(\" + stopKeywords.map(escapeRegex).join(\"|\") + \")\\\\b\", \"i\");\n return pattern.test(userInput);\n }\n\n function normalizeAndFormatUserInput(text) {\n let normalized = text.trim();\n normalized = normalized.replace(\/\\bi\\b\/g, \"I\");\n return formatSentence(normalized);\n }\n\n function formatSentence(text) {\n if (!text) return \"\";\n text = text.charAt(0).toUpperCase() + text.slice(1);\n if (!\/[.?!]$\/.test(text)) text += \".\";\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 stopAllAudioAndRecognition();\n isLessonActive = false;\n\n const message = userStopped\n ? \"Thank you for practicing. Goodbye.\"\n : \"Well done. You have completed all the questions. Keep practicing.\";\n\n appendMessage(message, \"bot\");\n faceSpeak(message, userStopped ? \"neutral\" : \"happy\");\n showSynthesisLoader(true);\n sayText(message, \"en-US\").then(() => {\n showSynthesisLoader(false);\n });\n }\n\n function sayText(text, lang) {\n return new Promise(resolve => {\n if (!speechSynthesisSupported) {\n resolve();\n return;\n }\n\n window.speechSynthesis.cancel();\n\n const utterance = new SpeechSynthesisUtterance(text);\n utterance.lang = lang || \"en-US\";\n utterance.rate = 1.0;\n utterance.pitch = 1.0;\n\n if (selectedVoice) {\n utterance.voice = selectedVoice;\n }\n\n utterance.onend = () => resolve();\n utterance.onerror = () => resolve();\n\n window.speechSynthesis.speak(utterance);\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\n function showSynthesisLoader(show) {\n const loader = document.getElementById('synthesis-loader');\n loader.style.display = show ? 'inline-block' : 'none';\n loader.style.borderTop = '4px solid #17a2b8';\n }\n\n function showRecognitionLoader(show) {\n const loader = document.getElementById('synthesis-loader');\n loader.style.display = show ? 'inline-block' : 'none';\n loader.style.borderTop = show ? '4px solid #ffc107' : '4px solid #17a2b8';\n }\n\n function clearPendingTimeout() {\n if (pendingNextQuestionTimeout) {\n clearTimeout(pendingNextQuestionTimeout);\n pendingNextQuestionTimeout = null;\n }\n }\n\n function stopRecognitionOnly() {\n if (recognition) {\n try {\n recognition.onresult = null;\n recognition.onerror = null;\n recognition.onend = null;\n recognition.onspeechend = null;\n recognition.stop();\n } catch (e) {}\n }\n speechRecognitionActive = false;\n showRecognitionLoader(false);\n }\n\n function stopAllAudioAndRecognition() {\n clearPendingTimeout();\n stopRecognitionOnly();\n if (speechSynthesisSupported) {\n window.speechSynthesis.cancel();\n }\n showSynthesisLoader(false);\n stopFaceTalking();\n faceSpeechBubble.classList.remove('visible');\n }\n\n function pickRandom(arr) {\n return arr[Math.floor(Math.random() * arr.length)];\n }\n\n function escapeRegex(str) {\n return str.replace(\/[.*+?^${}()|[\\]\\\\]\/g, \"\\\\$&\");\n }\n\n window.onload = initialize;\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>This Robot is used for Visa Interview practices for PhD candidates. In order to interact with this Robot smoothly, please<\/p>\n","protected":false},"author":1,"featured_media":251,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"colormag_page_layout":"default_layout","footnotes":""},"categories":[5,17,16],"tags":[],"class_list":["post-264","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-chatbot","category-phd","category-visa-interviews"],"_links":{"self":[{"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/posts\/264","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/comments?post=264"}],"version-history":[{"count":3,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/posts\/264\/revisions"}],"predecessor-version":[{"id":814,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/posts\/264\/revisions\/814"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/media\/251"}],"wp:attachment":[{"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/media?parent=264"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/categories?post=264"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/tags?post=264"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}