{"id":337,"date":"2025-11-25T15:17:06","date_gmt":"2025-11-25T15:17:06","guid":{"rendered":"https:\/\/i-cte.org\/robot\/?p=337"},"modified":"2025-11-25T15:26:14","modified_gmt":"2025-11-25T15:26:14","slug":"people-reading-comprehension","status":"publish","type":"post","link":"https:\/\/i-cte.org\/robot\/people-reading-comprehension\/","title":{"rendered":"People &#8211; Reading Comprehension"},"content":{"rendered":"\n<p>This Robot is used for practicing English at level A2. In order to interact with this Robot smoothly, please use a laptop, desktop, or iPad. Do not use Smartphones.<\/p>\n\n\n\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>People &#8211; Reading Comprehension<\/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: #f4f6f8;\n            margin: 0;\n            padding: 0;\n            display: flex;\n            flex-direction: column;\n            min-height: 100vh;\n        }\n\n        \/* Menu Styles *\/\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        .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        .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;\n            align-items: center;\n            padding: 10px;\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;\n            flex: 1;\n        }\n\n        \/* Image Container Styles *\/\n        .image-container {\n            flex: 1;\n            text-align: center;\n            margin-bottom: 15px;\n        }\n        .image-container img {\n            width: 100%;\n            height: auto;\n            max-height: 300px;\n            object-fit: cover;\n            border-radius: 15px;\n            box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);\n        }\n        .sentence-text {\n            margin: 10px 0;\n            font-weight: bold;\n            color: #333;\n            font-size: 16px;\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 Styles *\/\n        .chat-container {\n            background-color: #28a745;\n            border-radius: 15px;\n            box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);\n            border: 3px solid #007bff;\n            overflow: hidden;\n            display: flex;\n            flex-direction: column;\n            height: auto;\n            max-height: 500px;\n            flex: 1;\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        .chat-header h2 {\n            margin: 0;\n            font-size: 18px;\n        }\n        .chat-header .loader {\n            position: absolute;\n            right: 20px;\n            top: 50%;\n            transform: translateY(-50%);\n            display: none;\n        }\n        .chat-messages {\n            padding: 12px;\n            overflow-y: auto;\n            flex: 1;\n            background-color: #fff;\n            max-height: 300px;\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        .user-message {\n            background-color: #ffc107;\n            color: #fff;\n            text-align: right;\n        }\n        .bot-message {\n            background-color: #17a2b8;\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: #c3e6cb;\n            padding: 10px;\n            justify-content: space-between;\n            flex-wrap: wrap;\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: 6px;\n            max-width: 150px;\n            font-size: 16px;\n        }\n        .stop-button {\n            background-color: #dc3545;\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 Styles *\/\n        .voice-selection {\n            margin: 10px 0;\n            width: 100%;\n            max-width: 300px;\n        }\n        .voice-selection label {\n            display: block;\n            margin-bottom: 5px;\n            font-weight: bold;\n            color: #333;\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 Styles *\/\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 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 *\/\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            }\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            .chat-input input {\n                font-size: 16px;\n            }\n        }\n    <\/style>\n<\/head>\n<body>\n    <div class=\"menu\">\n      <a href=\"https:\/\/i-cte.org\/robot\/people-conversation\/\">Conversation<\/a>\n      <a href=\"https:\/\/i-cte.org\/robot\/people-vocabulary\/\">Vocabulary<\/a>\n      <a href=\"https:\/\/i-cte.org\/robot\/people-real-life\/\">Real Life<\/a>\n      <a href=\"https:\/\/i-cte.org\/robot\/people-describing-pictures\/\">Describing Pictures<\/a>\n      <a href=\"https:\/\/i-cte.org\/robot\/people-reading-comprehension\/\">Reading<\/a>\n      <a href=\"https:\/\/i-cte.org\/robot\/people-listening\/\">Listening<\/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:\/\/i-cte.org\/robot\/wp-content\/uploads\/2025\/11\/6.webp\" alt=\"Email window showing Clare's message about herself\">\n                <div class=\"sentence-text\">\n                    Read Clare\u2019s e-mail to her new friend. Then answer the questions and choose T, F, or N.\n                <\/div>\n                <div id=\"word-box\" class=\"word-box\">\n                    <!-- E-mail will be displayed here -->\n                <\/div>\n            <\/div>\n            <div class=\"chat-container\">\n                <div class=\"chat-header\">\n                    <h2>People &#8211; Reading Comprehension<\/h2>\n                    <div class=\"loader\" id=\"synthesis-loader\"><\/div>\n                <\/div>\n                <div class=\"chat-messages\" id=\"chat-messages\">\n                    <!-- Questions and table will go here -->\n                <\/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&#8230;<\/option>\n                        <\/select>\n                    <\/div>\n                    <button id=\"start-btn\" class=\"send-button\" aria-label=\"Check Answers\">Check Answers<\/button>\n                    <button id=\"stop-btn\" class=\"stop-button\" aria-label=\"Stop Voice\">Stop Voice<\/button>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <div class=\"menu\">\n      <a href=\"https:\/\/i-cte.org\/robot\/people-conversation\/\">Conversation<\/a>\n      <a href=\"https:\/\/i-cte.org\/robot\/people-vocabulary\/\">Vocabulary<\/a>\n      <a href=\"https:\/\/i-cte.org\/robot\/people-real-life\/\">Real Life<\/a>\n      <a href=\"https:\/\/i-cte.org\/robot\/people-describing-pictures\/\">Describing Pictures<\/a>\n      <a href=\"https:\/\/i-cte.org\/robot\/people-reading-comprehension\/\">Reading<\/a>\n      <a href=\"https:\/\/i-cte.org\/robot\/people-listening\/\">Listening<\/a>\n    <\/div>\n\n<script>\n\/* ============================\n   Reading: Clare\u2019s e-mail to Juliana\n   ============================ *\/\n\nconst letterText = `Dear Juliana,\nI\u2019m writing to tell you a little about myself. I\u2019m 19 years old, and I\u2019m a student at City College in Wellington, New Zealand. Do you know Wellington? It\u2019s the capital, and a great place!\nAnyway, I\u2019m fairly short and thin, and I have short dark hair. I can\u2019t send a picture now because I\u2019m writing this in class! I think I\u2019m friendly and outgoing, but my friends say I\u2019m lazy!\nWhat about you? Please write and tell me about yourself!\nBest wishes,\nClare`;\n\n\/* Part 1 \u2013 WH questions *\/\nconst whQuestions = [\n  {\n    id: 1,\n    question: \"Who is Clare writing to?\",\n    modelAnswer: \"She is writing to Juliana.\"\n  },\n  {\n    id: 2,\n    question: \"Why is she writing?\",\n    modelAnswer: \"She is writing to tell Juliana a little about herself \/ to introduce herself.\"\n  },\n  {\n    id: 3,\n    question: \"Where is she writing the e-mail?\",\n    modelAnswer: \"She is writing the e-mail in class.\"\n  },\n  {\n    id: 4,\n    question: \"What does she want Juliana to do?\",\n    modelAnswer: \"She wants Juliana to write and tell her about herself.\"\n  }\n];\n\n\/* Part 2 \u2013 T \/ F \/ N statements *\/\nconst statementsTFN = [\n  {\n    id: 1,\n    text: \"Clare and Juliana are best friends.\",\n    correct: \"n\"\n  },\n  {\n    id: 2,\n    text: \"They are the same age.\",\n    correct: \"n\"\n  },\n  {\n    id: 3,\n    text: \"Juliana likes Wellington.\",\n    correct: \"n\"\n  },\n  {\n    id: 4,\n    text: \"Clare has short dark hair.\",\n    correct: \"t\"\n  },\n  {\n    id: 5,\n    text: \"Clare says she\u2019s lazy.\",\n    correct: \"f\"\n  },\n  {\n    id: 6,\n    text: \"Clare thinks she\u2019s friendly.\",\n    correct: \"t\"\n  }\n];\n\nconst summaryMessages = [\n  \"Nice reading! Keep going.\",\n  \"Good job. Read the e-mail again and try to improve your score.\",\n  \"You\u2019re doing well. Practice this activity again later.\"\n];\n\nconst positiveMessages = [\n  \"Excellent comprehension!\",\n  \"Great work! You understood the main ideas.\",\n  \"Very good! Your answers match the e-mail.\"\n];\n\n\/\/ Speech synthesis\nconst speechSynthesisSupported = \"speechSynthesis\" in window;\nlet voices = [];\nlet selectedVoice = null;\n\nconst desiredVoiceNames = [\n  \"Google US English\",\n  \"Google US English Female\",\n  \"Google UK English Male\",\n  \"Google UK English Female\"\n];\n\n\/* ========== INITIALIZE ========== *\/\n\nfunction initialize() {\n  loadVoices();\n\n  if (!speechSynthesisSupported) {\n    appendMessage(\"Sorry, your browser does not support speech synthesis.\", \"bot\");\n  }\n\n  const startBtn = document.getElementById(\"start-btn\");\n  startBtn.textContent = \"Check Answers\";\n  startBtn.onclick = checkAnswers;\n\n  const stopBtn = document.getElementById(\"stop-btn\");\n  stopBtn.textContent = \"Stop Voice\";\n  stopBtn.onclick = stopSpeaking;\n\n  showEmailOnLeft();\n  renderQuestionArea();\n}\n\n\/* ========== VOICE LOADING ========== *\/\n\nfunction loadVoices() {\n  if (!speechSynthesisSupported) return;\n  voices = window.speechSynthesis.getVoices();\n  if (voices.length === 0) {\n    window.speechSynthesis.onvoiceschanged = () => {\n      voices = window.speechSynthesis.getVoices();\n      populateVoiceList();\n    };\n  } else {\n    populateVoiceList();\n  }\n}\n\nfunction populateVoiceList() {\n  const voiceSelect = document.getElementById(\"voice-select\");\n  voiceSelect.innerHTML = \"\";\n\n  if (!speechSynthesisSupported) {\n    const option = document.createElement(\"option\");\n    option.value = \"\";\n    option.textContent = \"No voices available\";\n    voiceSelect.appendChild(option);\n    voiceSelect.disabled = true;\n    return;\n  }\n\n  const filteredVoices = voices.filter((voice) =>\n    desiredVoiceNames.includes(voice.name)\n  );\n\n  if (filteredVoices.length === 0) {\n    const option = document.createElement(\"option\");\n    option.value = \"\";\n    option.textContent = \"Default voice\";\n    voiceSelect.appendChild(option);\n    voiceSelect.disabled = true;\n    return;\n  }\n\n  filteredVoices.forEach((voice, index) => {\n    const option = document.createElement(\"option\");\n    option.value = index;\n    option.textContent = `${voice.name} (${voice.lang})`;\n    voiceSelect.appendChild(option);\n  });\n\n  if (filteredVoices.length > 0) {\n    voiceSelect.selectedIndex = 0;\n    selectedVoice = filteredVoices[0];\n  }\n\n  voiceSelect.onchange = () => {\n    const selectedIndex = voiceSelect.value;\n    selectedVoice = filteredVoices[selectedIndex];\n  };\n}\n\n\/* ========== EMAIL + QUESTIONS UI ========== *\/\n\nfunction showEmailOnLeft() {\n  clearWordBox();\n  addSentenceToBox(\"Clare\u2019s e-mail:\");\n  letterText.split(\"\\n\").forEach((line) => addSentenceToBox(line));\n\n  const greeting =\n    \"Read Clare\u2019s e-mail in the box. Then answer the questions and choose T, F, or N. I will read the e-mail for you.\";\n\n  appendMessage(greeting, \"bot\");\n  if (speechSynthesisSupported) {\n    showSynthesisLoader(true);\n    sayText(greeting, \"en-US\")\n      .then(() => sayText(letterText, \"en-US\"))\n      .then(() => {\n        showSynthesisLoader(false);\n      });\n  }\n}\n\nfunction renderQuestionArea() {\n  const chatContainer = document.getElementById(\"chat-messages\");\n  chatContainer.innerHTML = \"\";\n\n  const part1Title = document.createElement(\"h3\");\n  part1Title.textContent = \"Part 1 \u2013 Answer the questions.\";\n  part1Title.style.margin = \"4px 0\";\n  part1Title.style.fontSize = \"16px\";\n  chatContainer.appendChild(part1Title);\n\n  const part1Instr = document.createElement(\"p\");\n  part1Instr.textContent = \"Write complete answers in the boxes.\";\n  chatContainer.appendChild(part1Instr);\n\n  whQuestions.forEach((q) => {\n    const block = document.createElement(\"div\");\n    block.style.marginBottom = \"8px\";\n\n    const label = document.createElement(\"label\");\n    label.htmlFor = `wh-q${q.id}`;\n    label.textContent = `${q.id}. ${q.question}`;\n    block.appendChild(label);\n\n    const input = document.createElement(\"input\");\n    input.type = \"text\";\n    input.id = `wh-q${q.id}`;\n    input.style.width = \"100%\";\n    input.style.marginTop = \"4px\";\n    input.style.padding = \"4px\";\n    input.style.boxSizing = \"border-box\";\n    block.appendChild(input);\n\n    const feedback = document.createElement(\"div\");\n    feedback.id = `wh-feedback-${q.id}`;\n    feedback.style.fontSize = \"13px\";\n    feedback.style.marginTop = \"2px\";\n    block.appendChild(feedback);\n\n    chatContainer.appendChild(block);\n  });\n\n  const part2Title = document.createElement(\"h3\");\n  part2Title.textContent = \"Part 2 \u2013 Write T (true), F (false), or N (not in text).\";\n  part2Title.style.marginTop = \"12px\";\n  part2Title.style.fontSize = \"16px\";\n  chatContainer.appendChild(part2Title);\n\n  const table = document.createElement(\"table\");\n  table.style.width = \"100%\";\n  table.style.borderCollapse = \"collapse\";\n  table.style.marginTop = \"10px\";\n  table.style.fontSize = \"14px\";\n\n  const headerRow = document.createElement(\"tr\");\n  [\"Sentence\", \"T\", \"F\", \"N\"].forEach((head) => {\n    const th = document.createElement(\"th\");\n    th.textContent = head;\n    th.style.borderBottom = \"1px solid #ccc\";\n    th.style.padding = \"4px\";\n    th.style.textAlign = head === \"Sentence\" ? \"left\" : \"center\";\n    headerRow.appendChild(th);\n  });\n  table.appendChild(headerRow);\n\n  statementsTFN.forEach((stmt) => {\n    const row = document.createElement(\"tr\");\n    row.id = `row-${stmt.id}`;\n\n    const textCell = document.createElement(\"td\");\n    textCell.textContent = stmt.text;\n    textCell.style.padding = \"4px\";\n    textCell.style.verticalAlign = \"top\";\n    row.appendChild(textCell);\n\n    [\"t\", \"f\", \"n\"].forEach((value) => {\n      const cell = document.createElement(\"td\");\n      cell.style.textAlign = \"center\";\n      cell.style.padding = \"4px\";\n\n      const label = document.createElement(\"label\");\n      label.style.cursor = \"pointer\";\n\n      const input = document.createElement(\"input\");\n      input.type = \"radio\";\n      input.name = `q${stmt.id}`;\n      input.value = value;\n      input.style.marginRight = \"4px\";\n\n      label.appendChild(input);\n      label.appendChild(document.createTextNode(\"\"));\n      cell.appendChild(label);\n      row.appendChild(cell);\n    });\n\n    table.appendChild(row);\n  });\n\n  chatContainer.appendChild(table);\n}\n\n\/* ========== CHECK ANSWERS ========== *\/\n\nfunction normalizeText(text) {\n  return text.toLowerCase().replace(\/\\s+\/g, \" \").trim();\n}\n\nfunction isWhAnswerCorrect(id, answer) {\n  const a = normalizeText(answer);\n\n  switch (id) {\n    case 1: \/\/ Juliana\n      return a.includes(\"juliana\");\n    case 2: \/\/ to tell about herself\n      return (\n        a.includes(\"tell you a little about myself\") ||\n        (a.includes(\"tell\") && a.includes(\"myself\")) ||\n        a.includes(\"about myself\") ||\n        a.includes(\"introduce myself\")\n      );\n    case 3: \/\/ in class\n      return a.includes(\"in class\") || a.includes(\"in the class\");\n    case 4: \/\/ wants her to write and tell about herself\n      return (\n        (a.includes(\"write\") && a.includes(\"about yourself\")) ||\n        (a.includes(\"write\") && a.includes(\"about you\")) ||\n        (a.includes(\"write\") && a.includes(\"tell\") && a.includes(\"yourself\"))\n      );\n    default:\n      return false;\n  }\n}\n\nfunction checkAnswers() {\n  let whScore = 0;\n  let whTotal = whQuestions.length;\n  let whUnanswered = 0;\n\n  whQuestions.forEach((q) => {\n    const input = document.getElementById(`wh-q${q.id}`);\n    const feedback = document.getElementById(`wh-feedback-${q.id}`);\n    if (!input || !feedback) return;\n\n    const userAns = input.value.trim();\n\n    if (!userAns) {\n      whUnanswered++;\n      feedback.textContent = \"Please answer this question.\";\n      feedback.style.color = \"#856404\"; \/\/ yellow\/brown\n      return;\n    }\n\n    if (isWhAnswerCorrect(q.id, userAns)) {\n      whScore++;\n      feedback.textContent = \"Correct. \" + q.modelAnswer;\n      feedback.style.color = \"#155724\"; \/\/ green\n    } else {\n      feedback.textContent = \"Not quite. \" + q.modelAnswer;\n      feedback.style.color = \"#721c24\"; \/\/ red\n    }\n  });\n\n  let tfScore = 0;\n  let tfTotal = statementsTFN.length;\n  let tfUnanswered = 0;\n\n  statementsTFN.forEach((stmt) => {\n    const row = document.getElementById(`row-${stmt.id}`);\n    if (row) row.style.backgroundColor = \"\";\n\n    const selected = document.querySelector(`input[name=\"q${stmt.id}\"]:checked`);\n\n    if (!selected) {\n      tfUnanswered++;\n      if (row) row.style.backgroundColor = \"#fff3cd\"; \/\/ light yellow\n      return;\n    }\n\n    if (selected.value === stmt.correct) {\n      tfScore++;\n      if (row) row.style.backgroundColor = \"#d4edda\"; \/\/ light green\n    } else {\n      if (row) row.style.backgroundColor = \"#f8d7da\"; \/\/ light red\n    }\n  });\n\n  const resultMessage =\n    `Part 1: You got ${whScore} out of ${whTotal} correct.` +\n    (whUnanswered > 0 ? ` (${whUnanswered} question(s) not answered.) ` : \" \") +\n    `Part 2: You got ${tfScore} out of ${tfTotal} correct.` +\n    (tfUnanswered > 0 ? ` (${tfUnanswered} sentence(s) not answered.)` : \"\");\n\n  appendMessage(resultMessage, \"bot\");\n\n  const totalScore = whScore + tfScore;\n  const totalQuestions = whTotal + tfTotal;\n  let extra;\n\n  if (totalScore === totalQuestions && whUnanswered === 0 && tfUnanswered === 0) {\n    extra = \"Perfect score! \" + positiveMessages[Math.floor(Math.random() * positiveMessages.length)];\n  } else if (totalScore >= Math.round(totalQuestions * 0.7)) {\n    extra = positiveMessages[Math.floor(Math.random() * positiveMessages.length)];\n  } else {\n    extra = summaryMessages[Math.floor(Math.random() * summaryMessages.length)];\n  }\n\n  appendMessage(extra, \"bot\");\n\n  if (speechSynthesisSupported) {\n    showSynthesisLoader(true);\n    sayText(resultMessage + \" \" + extra, \"en-US\").then(() => {\n      showSynthesisLoader(false);\n    });\n  }\n}\n\n\/* ========== SPEECH HELPERS ========== *\/\n\nfunction stopSpeaking() {\n  if (speechSynthesisSupported) {\n    window.speechSynthesis.cancel();\n    showSynthesisLoader(false);\n  }\n}\n\nfunction sayText(text, lang) {\n  return new Promise((resolve) => {\n    if (!speechSynthesisSupported) {\n      resolve();\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    if (selectedVoice) {\n      utterance.voice = selectedVoice;\n    }\n\n    utterance.onend = function () {\n      resolve();\n    };\n    utterance.onerror = function () {\n      resolve();\n    };\n\n    window.speechSynthesis.speak(utterance);\n  });\n}\n\n\/* ========== GENERIC UI HELPERS ========== *\/\n\nfunction 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\nfunction 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\nfunction clearWordBox() {\n  const wordBox = document.getElementById(\"word-box\");\n  wordBox.innerHTML = \"\";\n}\n\nfunction showSynthesisLoader(show) {\n  const loader = document.getElementById(\"synthesis-loader\");\n  loader.style.display = show ? \"inline-block\" : \"none\";\n  if (show) {\n    loader.style.borderTop = \"4px solid #17a2b8\";\n  }\n}\n\nwindow.onload = initialize;\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>This Robot is used for practicing English at level A2. In order to interact with this Robot smoothly, please use<\/p>\n","protected":false},"author":1,"featured_media":72,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"colormag_page_layout":"default_layout","footnotes":""},"categories":[18,5],"tags":[],"class_list":["post-337","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-a2","category-chatbot"],"_links":{"self":[{"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/posts\/337","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=337"}],"version-history":[{"count":2,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/posts\/337\/revisions"}],"predecessor-version":[{"id":341,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/posts\/337\/revisions\/341"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/media\/72"}],"wp:attachment":[{"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/media?parent=337"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/categories?post=337"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/tags?post=337"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}