{"id":740,"date":"2026-03-04T11:24:35","date_gmt":"2026-03-04T11:24:35","guid":{"rendered":"https:\/\/i-cte.org\/robot\/?p=740"},"modified":"2026-03-05T04:18:53","modified_gmt":"2026-03-05T04:18:53","slug":"ai-basics-for-teachers","status":"publish","type":"post","link":"https:\/\/i-cte.org\/robot\/ai-basics-for-teachers\/","title":{"rendered":"AI Basics for Teachers"},"content":{"rendered":"\n<!-- \u2705 ICTE Teacher Micro-Lesson \u2014 AI Basics for Teachers (FULL, WP-safe single block, Multi-speaker Google Voices)\n     Adds inside \"AI Concepts\" section:\n     (1) Reading text\n     (2) Comprehension MCQs with options + scoring\n     (3) Examples (classroom prompt examples + student policy examples)\n-->\n<div id=\"icte-ai-basics\">\n\n  <!-- \u2705 TOP MENU -->\n  <nav class=\"icte-menu\" aria-label=\"AI basics lesson navigation\">\n    <a href=\"#\" class=\"is-current\" data-view=\"conversation\">Conversation<\/a>\n    <a href=\"#\" data-view=\"concepts\">AI Concepts<\/a>\n    <a href=\"#\" data-view=\"tools\">Common AI Tools<\/a>\n    <a href=\"#\" data-view=\"safety\">Classroom-safe Use<\/a>\n    <a href=\"#\" data-view=\"listening\">Listening<\/a>\n    <a href=\"#\" data-view=\"tasks\">Mini Tasks<\/a>\n    <a href=\"#\" data-view=\"research\">Research Support<\/a>\n    <a href=\"#\" data-view=\"progress\">Progress<\/a>\n  <\/nav>\n\n  <section class=\"icte-shell\" aria-label=\"ICTE AI basics practice\">\n\n    <!-- \u2705 Header -->\n    <header class=\"icte-hero\">\n      <div class=\"icte-hero__text\">\n        <h2>AI Basics for Teachers<\/h2>\n        <p class=\"muted\">\n          Understand <b>what AI can\/can\u2019t do<\/b>, explore <b>common tools<\/b> (chatbots, translation, voice),\n          and apply <b>classroom-safe use<\/b>. Includes a <b>two-speaker Google Voices<\/b> listening dialogue.\n        <\/p>\n      <\/div>\n\n      <div class=\"icte-hero__controls\">\n        <div class=\"icte-pill\">\n          <span class=\"dot\" id=\"icteMicDot\" aria-hidden=\"true\"><\/span>\n          <span id=\"icteMicStatus\">Mic: Off<\/span>\n        <\/div>\n\n        <div class=\"icte-row\">\n          <button class=\"btn\" id=\"icteStartVoice\" type=\"button\">Start Voice<\/button>\n          <button class=\"btn ghost\" id=\"icteStopVoice\" type=\"button\">Stop<\/button>\n        <\/div>\n\n        <!-- \u2705 Multi-speaker Google Voices -->\n        <div class=\"grid2\" style=\"margin-top:10px;\">\n          <label class=\"icte-label\">\n            Speaker A (Google)\n            <select id=\"voiceA\" class=\"icte-select\" aria-label=\"Speaker A voice\"><\/select>\n          <\/label>\n\n          <label class=\"icte-label\">\n            Speaker B (Google)\n            <select id=\"voiceB\" class=\"icte-select\" aria-label=\"Speaker B voice\"><\/select>\n          <\/label>\n        <\/div>\n\n        <div class=\"icte-small muted\">\n          Tip: In Chrome\/Edge you often see \u201cGoogle \u2026\u201d voices. If you don\u2019t see voices yet, click once on the page and wait 2\u20133 seconds.\n        <\/div>\n      <\/div>\n    <\/header>\n\n    <!-- \u2705 Views -->\n    <main class=\"icte-main\">\n\n      <!-- ===================== -->\n      <!-- \u2705 1) CONVERSATION -->\n      <!-- ===================== -->\n      <section class=\"view is-active\" data-view=\"conversation\" aria-label=\"Conversation practice\">\n        <div class=\"card\">\n          <div class=\"card-h\">\n            <h3>1) Conversation (Voice Interactive)<\/h3>\n            <div class=\"card-actions\">\n              <button class=\"btn mini\" type=\"button\" data-say=\"conv-instr\">\ud83d\udd0a Read instructions<\/button>\n              <button class=\"btn mini ghost\" type=\"button\" id=\"convReset\">Reset<\/button>\n            <\/div>\n          <\/div>\n\n          <p class=\"muted\">\n            Speak or type your answers. The goal is to explain AI in <b>teacher-friendly language<\/b>,\n            identify <b>safe classroom use<\/b>, and avoid over-trusting AI.\n          <\/p>\n\n          <div class=\"chat\" id=\"convChat\" aria-live=\"polite\" aria-label=\"Conversation chat log\"><\/div>\n\n          <div class=\"chatbar\">\n            <input id=\"convText\" class=\"input\" type=\"text\" placeholder=\"Type your answer (optional)...\" autocomplete=\"off\" \/>\n            <button class=\"btn\" id=\"convSend\" type=\"button\">Send<\/button>\n            <button class=\"btn ghost\" id=\"convHear\" type=\"button\">\ud83d\udd0a Read last question<\/button>\n          <\/div>\n\n          <div class=\"muted icte-small\">\n            Target moves: define AI simply, give 1 classroom example, name 1 risk (hallucination\/bias\/privacy), and a safety rule.\n          <\/div>\n        <\/div>\n      <\/section>\n\n      <!-- ===================== -->\n      <!-- \u2705 2) AI CONCEPTS (UPDATED) -->\n      <!-- ===================== -->\n      <section class=\"view\" data-view=\"concepts\" aria-label=\"AI concepts\">\n        <div class=\"card\">\n          <div class=\"card-h\">\n            <h3>2) AI Concepts (Reading + Comprehension + Examples)<\/h3>\n            <div class=\"card-actions\">\n              <button class=\"btn mini\" type=\"button\" data-say=\"concepts-instr\">\ud83d\udd0a Read instructions<\/button>\n              <button class=\"btn mini ghost\" type=\"button\" id=\"conceptReadBtn\">\ud83d\udd0a Read the text<\/button>\n              <button class=\"btn mini ghost\" type=\"button\" id=\"conceptQuizCheck\">Check answers<\/button>\n            <\/div>\n          <\/div>\n\n          <div class=\"note\">\n            <b>Simple definition:<\/b> AI tools predict likely text\/audio\/images from patterns in data.\n            They can be helpful, but they can also be wrong.\n          <\/div>\n\n          <!-- \u2705 (1) Reading text -->\n          <article class=\"reading\" id=\"conceptReading\" aria-label=\"Reading text about AI basics\">\n            <div class=\"reading-title\">Reading: AI basics for teachers<\/div>\n\n            <div class=\"reading-p\">\n              <b>1<\/b> Many teachers use AI tools to save time, but it is important to understand what AI is doing.\n              Most modern AI tools do not \u201cthink\u201d like humans. They generate responses by predicting what is likely to come next,\n              based on patterns from large amounts of training data.\n            <\/div>\n\n            <div class=\"reading-p\">\n              <b>2<\/b> AI can be very useful for low-risk tasks. For example, it can draft a lesson plan, create example sentences,\n              suggest discussion questions, summarize a text, or help you rewrite instructions in simpler language.\n              These are good starting points, especially for busy teachers.\n            <\/div>\n\n            <div class=\"reading-p\">\n              <b>3<\/b> However, AI can also make mistakes. It may \u201challucinate,\u201d meaning it can produce information that sounds confident but is not true.\n              It can also show bias, repeat stereotypes, or give unsafe suggestions if prompts are unclear.\n              Teachers should not assume AI output is correct without checking.\n            <\/div>\n\n            <div class=\"reading-p\">\n              <b>4<\/b> Classroom-safe use means teachers set rules. A basic rule is: do not share personal student data.\n              Another rule is: verify important facts and references using trusted sources.\n              When AI is used for assessment, teachers should ask students to show their process (drafts, notes, reflections) to reduce overreliance.\n            <\/div>\n\n            <div class=\"reading-p\">\n              <b>5<\/b> The best mindset is: AI is a helpful assistant, not the teacher.\n              It can help you prepare materials and support learning, but professional judgment belongs to teachers.\n              Good practice is to be transparent with students about how AI is allowed and how it is not allowed.\n            <\/div>\n          <\/article>\n\n          <!-- \u2705 (2) Comprehension MCQs -->\n          <h4 class=\"h4\" style=\"margin-top:12px;\">Comprehension check (choose the best answer)<\/h4>\n          <div id=\"conceptQuiz\" class=\"stack\"><\/div>\n          <div class=\"feedback\" id=\"conceptFb\" aria-live=\"polite\"><\/div>\n\n          <!-- \u2705 (3) Examples -->\n          <h4 class=\"h4\" style=\"margin-top:14px;\">Examples (copy &#038; adapt)<\/h4>\n\n          <div class=\"grid2\">\n            <div class=\"qitem\">\n              <div class=\"qtext\">Example 1 \u2014 Safe lesson-plan prompt (no-code)<\/div>\n              <pre class=\"pre\" id=\"aiEx1\"><\/pre>\n            <\/div>\n\n            <div class=\"qitem\">\n              <div class=\"qtext\">Example 2 \u2014 Speaking practice prompt (CEFR + constraints)<\/div>\n              <pre class=\"pre\" id=\"aiEx2\"><\/pre>\n            <\/div>\n          <\/div>\n\n          <div class=\"grid2\" style=\"margin-top:12px;\">\n            <div class=\"qitem\">\n              <div class=\"qtext\">Example 3 \u2014 Student AI-use policy (short)<\/div>\n              <pre class=\"pre\" id=\"aiEx3\"><\/pre>\n            <\/div>\n\n            <div class=\"qitem\">\n              <div class=\"qtext\">Example 4 \u2014 Fact-check rule for teachers<\/div>\n              <pre class=\"pre\" id=\"aiEx4\"><\/pre>\n            <\/div>\n          <\/div>\n\n          <div class=\"qitem\" style=\"margin-top:12px;\">\n            <div class=\"qtext\">Bad \u2192 Better prompt (safer + clearer)<\/div>\n            <pre class=\"pre\" id=\"aiBadBetter\"><\/pre>\n          <\/div>\n\n        <\/div>\n      <\/section>\n\n      <!-- ===================== -->\n      <!-- \u2705 3) COMMON AI TOOLS -->\n      <!-- ===================== -->\n      <section class=\"view\" data-view=\"tools\" aria-label=\"Common AI tools\">\n        <div class=\"card\">\n          <div class=\"card-h\">\n            <h3>3) Common AI Tools (No-code)<\/h3>\n            <div class=\"card-actions\">\n              <button class=\"btn mini\" type=\"button\" data-say=\"tools-instr\">\ud83d\udd0a Read instructions<\/button>\n              <button class=\"btn mini ghost\" type=\"button\" id=\"toolsReset\">Reset<\/button>\n            <\/div>\n          <\/div>\n\n          <p class=\"muted\">\n            Match tool types to classroom uses.\n          <\/p>\n\n          <div class=\"grid2\">\n            <div>\n              <h4 class=\"h4\">A) Matching<\/h4>\n              <div id=\"toolMatch\" class=\"stack\"><\/div>\n              <button class=\"btn\" id=\"toolsCheck\" type=\"button\">Check<\/button>\n              <div class=\"feedback\" id=\"toolsFb\" aria-live=\"polite\"><\/div>\n            <\/div>\n\n            <div>\n              <h4 class=\"h4\">B) Use it (Best tool)<\/h4>\n              <div id=\"toolUse\" class=\"stack\"><\/div>\n              <button class=\"btn\" id=\"toolUseCheck\" type=\"button\">Check<\/button>\n              <div class=\"feedback\" id=\"toolUseFb\" aria-live=\"polite\"><\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/section>\n\n      <!-- ===================== -->\n      <!-- \u2705 4) CLASSROOM SAFE USE -->\n      <!-- ===================== -->\n      <section class=\"view\" data-view=\"safety\" aria-label=\"Classroom safety\">\n        <div class=\"card\">\n          <div class=\"card-h\">\n            <h3>4) Classroom-safe Use (Checklist)<\/h3>\n            <div class=\"card-actions\">\n              <button class=\"btn mini\" type=\"button\" data-say=\"safety-instr\">\ud83d\udd0a Read instructions<\/button>\n              <button class=\"btn mini ghost\" type=\"button\" id=\"safetyScore\">Score<\/button>\n            <\/div>\n          <\/div>\n\n          <p class=\"muted\">\n            Tick what you will do in your classroom. This creates a \u201csafe-use contract\u201d you can copy into your syllabus.\n          <\/p>\n\n          <div id=\"safeList\" class=\"stack\"><\/div>\n          <div class=\"feedback\" id=\"safeFb\" aria-live=\"polite\"><\/div>\n\n          <div class=\"note\" style=\"margin-top:12px;\">\n            <b>Simple rule:<\/b> AI can help you draft and brainstorm, but <b>you<\/b> verify facts, sources, and final decisions.\n          <\/div>\n        <\/div>\n      <\/section>\n\n      <!-- ===================== -->\n      <!-- \u2705 5) LISTENING (2 voices) -->\n      <!-- ===================== -->\n      <section class=\"view\" data-view=\"listening\" aria-label=\"Two-speaker listening\">\n        <div class=\"card\">\n          <div class=\"card-h\">\n            <h3>5) Listening (Two Google Voices) \u2014 \u201cAI in a real classroom\u201d<\/h3>\n            <div class=\"card-actions\">\n              <button class=\"btn mini\" type=\"button\" data-say=\"list-instr\">\ud83d\udd0a Read instructions<\/button>\n              <button class=\"btn mini\" type=\"button\" id=\"listenPlay\">\u25b6\ufe0f Play dialogue<\/button>\n              <button class=\"btn mini ghost\" type=\"button\" id=\"listenStop\">\u23f9 Stop<\/button>\n            <\/div>\n          <\/div>\n\n          <p class=\"muted\">\n            Click <b>Play dialogue<\/b>. Listen and choose the best answers.\n            (The voices will alternate automatically: Speaker A then Speaker B.)\n          <\/p>\n\n          <div id=\"listenQ\" class=\"stack\"><\/div>\n          <button class=\"btn\" id=\"listenCheck\" type=\"button\">Check<\/button>\n          <div class=\"feedback\" id=\"listenFb\" aria-live=\"polite\"><\/div>\n        <\/div>\n      <\/section>\n\n      <!-- ===================== -->\n      <!-- \u2705 6) MINI TASKS -->\n      <!-- ===================== -->\n      <section class=\"view\" data-view=\"tasks\" aria-label=\"Mini tasks\">\n        <div class=\"card\">\n          <div class=\"card-h\">\n            <h3>6) Mini Tasks (Do this tomorrow)<\/h3>\n            <div class=\"card-actions\">\n              <button class=\"btn mini\" type=\"button\" data-say=\"tasks-instr\">\ud83d\udd0a Read instructions<\/button>\n              <button class=\"btn mini ghost\" type=\"button\" id=\"tasksCheck\">Check<\/button>\n            <\/div>\n          <\/div>\n\n          <div id=\"taskSet\" class=\"stack\"><\/div>\n          <div class=\"feedback\" id=\"tasksFb\" aria-live=\"polite\"><\/div>\n        <\/div>\n      <\/section>\n\n      <!-- ===================== -->\n      <!-- \u2705 7) RESEARCH SUPPORT -->\n      <!-- ===================== -->\n      <section class=\"view\" data-view=\"research\" aria-label=\"AI for research support\">\n        <div class=\"card\">\n          <div class=\"card-h\">\n            <h3>7) Using AI to support teacher research (Responsible workflow)<\/h3>\n            <div class=\"card-actions\">\n              <button class=\"btn mini\" type=\"button\" data-say=\"research-instr\">\ud83d\udd0a Read instructions<\/button>\n              <button class=\"btn mini ghost\" type=\"button\" id=\"researchScore\">Score<\/button>\n            <\/div>\n          <\/div>\n\n          <p class=\"muted\">\n            Choose the safest research workflow actions.\n          <\/p>\n\n          <div id=\"researchSet\" class=\"stack\"><\/div>\n          <div class=\"feedback\" id=\"researchFb\" aria-live=\"polite\"><\/div>\n        <\/div>\n      <\/section>\n\n      <!-- ===================== -->\n      <!-- \u2705 8) PROGRESS -->\n      <!-- ===================== -->\n      <section class=\"view\" data-view=\"progress\" aria-label=\"Progress tracking\">\n        <div class=\"card\">\n          <div class=\"card-h\">\n            <h3>Progress<\/h3>\n            <div class=\"card-actions\">\n              <button class=\"btn mini ghost\" type=\"button\" id=\"progressReset\">Clear progress<\/button>\n            <\/div>\n          <\/div>\n\n          <div class=\"progress-grid\">\n            <div class=\"pbox\">\n              <div class=\"pnum\" id=\"pDone\">0<\/div>\n              <div class=\"muted\">Activities completed<\/div>\n            <\/div>\n            <div class=\"pbox\">\n              <div class=\"pnum\" id=\"pScore\">0%<\/div>\n              <div class=\"muted\">Average score<\/div>\n            <\/div>\n            <div class=\"pbox\">\n              <div class=\"pnum\" id=\"pKeyMoves\">0<\/div>\n              <div class=\"muted\">Key moves used<\/div>\n            <\/div>\n          <\/div>\n\n          <div class=\"note\">\n            Completion is saved in your browser (local storage). If you change device\/browser, progress resets.\n          <\/div>\n\n          <h4 class=\"h4\">Key Moves Bank<\/h4>\n          <div class=\"bank\" id=\"movesBank\"><\/div>\n        <\/div>\n      <\/section>\n\n    <\/main>\n  <\/section>\n\n  <style>\n    \/* ===== WP-SAFE STYLES (scoped) ===== *\/\n    #icte-ai-basics *{ box-sizing:border-box; }\n    #icte-ai-basics{\n      --green:#28a745;\n      --dark:#132018;\n      --card:#ffffff;\n      --muted:#6b7280;\n      --line:#e5e7eb;\n      --shadow:0 8px 24px rgba(17,24,39,.08);\n      --radius:16px;\n      font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\n      color:#111827;\n    }\n    #icte-ai-basics .icte-menu{\n      width:100%;\n      background:var(--green);\n      padding:10px 12px;\n      text-align:center;\n      overflow-x:auto;\n      white-space:nowrap;\n      position:sticky;\n      top:0;\n      z-index:999;\n      box-shadow:0 2px 10px rgba(0,0,0,.12);\n      border-radius:12px;\n      margin-bottom:12px;\n    }\n    #icte-ai-basics .icte-menu a{\n      display:inline-block;\n      color:#fff;\n      text-decoration:none;\n      font-weight:900;\n      padding:8px 10px;\n      border-radius:999px;\n      margin:0 3px;\n      opacity:.92;\n      transition:.15s;\n    }\n    #icte-ai-basics .icte-menu a:hover{ opacity:1; background:rgba(255,255,255,.14); }\n    #icte-ai-basics .icte-menu a.is-current{ background:#fff; color:var(--dark); opacity:1; }\n\n    #icte-ai-basics .icte-shell{ max-width:1100px; margin:0 auto; }\n    #icte-ai-basics .icte-hero{\n      display:grid;\n      grid-template-columns: 1.15fr .85fr;\n      gap:14px;\n      background:linear-gradient(135deg,#e9fff0, #ffffff);\n      border:1px solid var(--line);\n      border-radius:var(--radius);\n      padding:16px;\n      box-shadow:var(--shadow);\n      margin-bottom:14px;\n    }\n    @media (max-width: 920px){ #icte-ai-basics .icte-hero{ grid-template-columns:1fr; } }\n    #icte-ai-basics h2{ margin:0 0 6px 0; font-size:22px; }\n    #icte-ai-basics .muted{ color:var(--muted); }\n\n    #icte-ai-basics .icte-hero__controls{\n      border-left:1px dashed var(--line);\n      padding-left:14px;\n    }\n    @media (max-width: 920px){\n      #icte-ai-basics .icte-hero__controls{ border-left:none; padding-left:0; border-top:1px dashed var(--line); padding-top:12px; }\n    }\n\n    #icte-ai-basics .icte-row{ display:flex; gap:8px; flex-wrap:wrap; }\n    #icte-ai-basics .icte-label{ display:block; font-size:12px; font-weight:900; margin-top:8px; }\n    #icte-ai-basics .icte-select{\n      width:100%;\n      padding:10px 10px;\n      border:1px solid var(--line);\n      border-radius:12px;\n      background:#fff;\n      outline:none;\n      margin-top:6px;\n    }\n\n    #icte-ai-basics .icte-pill{\n      display:flex; align-items:center; gap:8px;\n      padding:10px 12px;\n      border:1px solid var(--line);\n      border-radius:999px;\n      background:#fff;\n      margin-bottom:10px;\n      font-weight:900;\n    }\n    #icte-ai-basics .dot{\n      width:10px; height:10px; border-radius:50%;\n      background:#9ca3af;\n      box-shadow:0 0 0 4px rgba(156,163,175,.18);\n    }\n    #icte-ai-basics .dot.on{\n      background:#22c55e;\n      box-shadow:0 0 0 4px rgba(34,197,94,.18);\n    }\n\n    #icte-ai-basics .btn{\n      border:none;\n      padding:10px 12px;\n      border-radius:12px;\n      background:var(--green);\n      color:#fff;\n      font-weight:900;\n      cursor:pointer;\n      transition:.15s;\n    }\n    #icte-ai-basics .btn:hover{ filter:brightness(.95); transform:translateY(-1px); }\n    #icte-ai-basics .btn:active{ transform:translateY(0); }\n    #icte-ai-basics .btn.ghost{\n      background:#fff;\n      color:#111827;\n      border:1px solid var(--line);\n    }\n    #icte-ai-basics .btn.mini{ padding:8px 10px; border-radius:10px; font-size:13px; }\n    #icte-ai-basics .icte-small{ font-size:12px; }\n\n    #icte-ai-basics .card{\n      background:var(--card);\n      border:1px solid var(--line);\n      border-radius:var(--radius);\n      padding:14px;\n      box-shadow:var(--shadow);\n      margin-bottom:14px;\n    }\n    #icte-ai-basics .card-h{\n      display:flex; gap:10px; align-items:flex-start; justify-content:space-between;\n      border-bottom:1px solid var(--line);\n      padding-bottom:10px;\n      margin-bottom:10px;\n    }\n    #icte-ai-basics .card-h h3{ margin:0; font-size:18px; }\n    #icte-ai-basics .card-actions{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }\n\n    #icte-ai-basics .view{ display:none; }\n    #icte-ai-basics .view.is-active{ display:block; }\n\n    #icte-ai-basics .chat{\n      background:#0b1220;\n      color:#e5e7eb;\n      border-radius:14px;\n      padding:12px;\n      min-height:220px;\n      max-height:420px;\n      overflow:auto;\n      border:1px solid rgba(255,255,255,.08);\n    }\n    #icte-ai-basics .msg{ margin:10px 0; display:flex; gap:10px; align-items:flex-start; }\n    #icte-ai-basics .who{\n      min-width:84px;\n      font-weight:900;\n      font-size:12px;\n      color:#93c5fd;\n      text-transform:uppercase;\n      letter-spacing:.06em;\n    }\n    #icte-ai-basics .bubble{\n      flex:1;\n      background:rgba(255,255,255,.06);\n      padding:10px 10px;\n      border-radius:12px;\n      line-height:1.45;\n      border:1px solid rgba(255,255,255,.06);\n      white-space:pre-line;\n    }\n    #icte-ai-basics .msg.user .who{ color:#86efac; }\n    #icte-ai-basics .msg.user .bubble{ background:rgba(34,197,94,.10); border-color:rgba(34,197,94,.18); }\n\n    #icte-ai-basics .chatbar{\n      margin-top:10px;\n      display:flex;\n      gap:8px;\n      align-items:center;\n    }\n    #icte-ai-basics .input{\n      flex:1;\n      padding:12px 12px;\n      border:1px solid var(--line);\n      border-radius:12px;\n      outline:none;\n    }\n    #icte-ai-basics .textarea{\n      width:100%;\n      padding:12px;\n      border:1px solid var(--line);\n      border-radius:12px;\n      outline:none;\n      resize:vertical;\n    }\n\n    #icte-ai-basics .grid2{\n      display:grid;\n      grid-template-columns:1fr 1fr;\n      gap:14px;\n      margin-top:10px;\n    }\n    @media (max-width: 920px){ #icte-ai-basics .grid2{ grid-template-columns:1fr; } }\n\n    #icte-ai-basics .stack{ display:flex; flex-direction:column; gap:10px; }\n    #icte-ai-basics .h4{ margin:0 0 6px 0; font-size:15px; }\n    #icte-ai-basics .qitem{\n      padding:10px;\n      border:1px solid var(--line);\n      border-radius:14px;\n      background:#fafafa;\n    }\n    #icte-ai-basics .qtext{ font-weight:900; margin-bottom:8px; }\n\n    #icte-ai-basics .feedback{\n      margin-top:10px;\n      padding:10px 12px;\n      border-radius:14px;\n      border:1px solid var(--line);\n      background:#f9fafb;\n      font-weight:800;\n      display:none;\n      white-space:pre-line;\n    }\n    #icte-ai-basics .feedback.ok{ display:block; border-color:rgba(34,197,94,.35); background:#ecfdf5; }\n    #icte-ai-basics .feedback.bad{ display:block; border-color:rgba(239,68,68,.35); background:#fef2f2; }\n\n    #icte-ai-basics .note{\n      background:#eff6ff;\n      border:1px solid rgba(59,130,246,.22);\n      padding:10px 12px;\n      border-radius:14px;\n      margin:10px 0;\n    }\n\n    #icte-ai-basics .reading{\n      border:1px solid var(--line);\n      border-radius:14px;\n      padding:12px;\n      background:#fff;\n      margin-top:10px;\n    }\n    #icte-ai-basics .reading-title{ font-weight:900; margin-bottom:8px; }\n    #icte-ai-basics .reading-p{ padding:8px 0; border-top:1px dashed var(--line); }\n    #icte-ai-basics .reading-p:first-of-type{ border-top:none; }\n\n    #icte-ai-basics .progress-grid{\n      display:grid;\n      grid-template-columns:repeat(3,1fr);\n      gap:12px;\n      margin-top:10px;\n      margin-bottom:10px;\n    }\n    @media (max-width: 920px){ #icte-ai-basics .progress-grid{ grid-template-columns:1fr; } }\n    #icte-ai-basics .pbox{\n      border:1px solid var(--line);\n      border-radius:16px;\n      background:#fff;\n      padding:12px;\n      text-align:center;\n      box-shadow:var(--shadow);\n    }\n    #icte-ai-basics .pnum{ font-size:28px; font-weight:1000; }\n\n    #icte-ai-basics .bank{\n      border:1px solid var(--line);\n      border-radius:14px;\n      padding:12px;\n      background:#fff;\n      display:flex;\n      flex-wrap:wrap;\n      gap:8px;\n    }\n    #icte-ai-basics .tag{\n      border:1px solid var(--line);\n      background:#f9fafb;\n      padding:6px 10px;\n      border-radius:999px;\n      font-weight:900;\n      font-size:13px;\n    }\n\n    #icte-ai-basics .pre{\n      white-space:pre-wrap;\n      background:#0b1220;\n      color:#e5e7eb;\n      border-radius:12px;\n      padding:12px;\n      border:1px solid rgba(255,255,255,.08);\n      overflow:auto;\n      font-size:13px;\n      line-height:1.45;\n    }\n\n    #icte-ai-basics .opt{\n      display:flex;\n      gap:10px;\n      align-items:flex-start;\n      padding:8px 10px;\n      border:1px solid var(--line);\n      border-radius:12px;\n      background:#fff;\n    }\n  <\/style>\n\n  <script>\n    (function(){\n      const root = document.getElementById('icte-ai-basics');\n      if(!root) return;\n\n      \/* =========================\n         Helpers\n      ========================= *\/\n      const qs = (sel, el=root) => el.querySelector(sel);\n      const qsa = (sel, el=root) => Array.from(el.querySelectorAll(sel));\n      const clamp = (n,min,max)=>Math.max(min,Math.min(max,n));\n      const norm = (s)=> (s||\"\").toString().trim();\n      const lower = (s)=> norm(s).toLowerCase();\n      const esc = (s)=> (s||\"\").replace(\/[&<>\"']\/g, m=>({ \"&\":\"&amp;\",\"<\":\"&lt;\",\">\":\"&gt;\",'\"':\"&quot;\",\"'\":\"&#039;\" }[m]));\n      const shuffle = (arr)=> arr.map(v=>({v, r:Math.random()})).sort((a,b)=>a.r-b.r).map(o=>o.v);\n\n      \/* =========================\n         Navigation\n      ========================= *\/\n      const navLinks = qsa('.icte-menu a');\n      const views = qsa('.view');\n      function showView(name){\n        views.forEach(v=> v.classList.toggle('is-active', v.getAttribute('data-view')===name));\n        navLinks.forEach(a=> a.classList.toggle('is-current', a.getAttribute('data-view')===name));\n        window.scrollTo({top: root.offsetTop - 10, behavior:'smooth'});\n      }\n      navLinks.forEach(a=>{\n        a.addEventListener('click', (e)=>{\n          e.preventDefault();\n          const v = a.getAttribute('data-view');\n          if(v) showView(v);\n        });\n      });\n\n      \/* =========================\n         Multi-speaker Google Voices (SpeechSynthesis)\n      ========================= *\/\n      const voiceASelect = qs('#voiceA');\n      const voiceBSelect = qs('#voiceB');\n\n      let allVoices = [];\n      let googleVoicesEN = [];\n      let voiceA = null;\n      let voiceB = null;\n\n      function isEnglish(v){\n        const l = (v.lang||\"\").toLowerCase();\n        return l.startsWith(\"en\");\n      }\n      function isGoogle(v){\n        const n = (v.name||\"\").toLowerCase();\n        return n.includes(\"google\");\n      }\n\n      function loadVoices(){\n        if(!window.speechSynthesis) return;\n        allVoices = speechSynthesis.getVoices() || [];\n        const google = allVoices.filter(v => isEnglish(v) && isGoogle(v));\n        const english = allVoices.filter(v => isEnglish(v));\n        googleVoicesEN = google.length ? google : english;\n\n        const buildSelect = (sel, list) => {\n          sel.innerHTML = \"\";\n          list.forEach((v,i)=>{\n            const opt = document.createElement('option');\n            opt.value = String(i);\n            opt.textContent = `${v.name} (${v.lang})`;\n            sel.appendChild(opt);\n          });\n        };\n\n        buildSelect(voiceASelect, googleVoicesEN);\n        buildSelect(voiceBSelect, googleVoicesEN);\n\n        voiceA = googleVoicesEN[0] || null;\n        voiceB = googleVoicesEN[1] || googleVoicesEN[0] || null;\n\n        voiceASelect.value = \"0\";\n        voiceBSelect.value = String(Math.max(0, googleVoicesEN.indexOf(voiceB)));\n\n        voiceASelect.onchange = ()=>{\n          const idx = parseInt(voiceASelect.value,10);\n          voiceA = googleVoicesEN[idx] || voiceA;\n        };\n        voiceBSelect.onchange = ()=>{\n          const idx = parseInt(voiceBSelect.value,10);\n          voiceB = googleVoicesEN[idx] || voiceB;\n        };\n      }\n\n      if(window.speechSynthesis){\n        loadVoices();\n        speechSynthesis.onvoiceschanged = loadVoices;\n      }\n\n      function stopSpeak(){ if(window.speechSynthesis) speechSynthesis.cancel(); }\n\n      function speakAs(role, text, opts){\n        const t = norm(text);\n        if(!t || !window.speechSynthesis) return Promise.resolve();\n        const o = opts || {};\n        const u = new SpeechSynthesisUtterance(t);\n        if(role === \"A\" && voiceA) u.voice = voiceA;\n        if(role === \"B\" && voiceB) u.voice = voiceB;\n        u.rate = o.rate ?? 1.02;\n        u.pitch = o.pitch ?? 1.0;\n        u.volume = o.volume ?? 1.0;\n        return new Promise(resolve=>{\n          u.onend = resolve;\n          u.onerror = resolve;\n          speechSynthesis.speak(u);\n        });\n      }\n\n      async function speakDialogue(lines){\n        stopSpeak();\n        for(const line of lines){\n          await speakAs(line.role, line.text);\n        }\n      }\n\n      \/* =========================\n         Mic Speech Recognition (ASR)\n      ========================= *\/\n      const micDot = qs('#icteMicDot');\n      const micStatus = qs('#icteMicStatus');\n      const btnStartVoice = qs('#icteStartVoice');\n      const btnStopVoice = qs('#icteStopVoice');\n\n      let recognition = null;\n      let listening = false;\n      let lastPromptSpoken = \"\";\n\n      function setMicUI(on){\n        listening = on;\n        micDot.classList.toggle('on', on);\n        micStatus.textContent = on ? \"Mic: Listening\u2026\" : \"Mic: Off\";\n      }\n\n      function initRecognition(){\n        const SR = window.SpeechRecognition || window.webkitSpeechRecognition;\n        if(!SR) return null;\n        const r = new SR();\n        r.lang = 'en-US';\n        r.continuous = true;\n        r.interimResults = false;\n        r.maxAlternatives = 1;\n        return r;\n      }\n\n      function startListening(){\n        if(listening) return;\n        recognition = recognition || initRecognition();\n        if(!recognition){\n          alert(\"Speech Recognition is not available in this browser. Use Chrome\/Edge, or type your answers.\");\n          return;\n        }\n        recognition.onresult = (e)=>{\n          const res = e.results[e.results.length - 1];\n          const transcript = res && res[0] ? res[0].transcript : \"\";\n          handleVoiceTranscript(transcript);\n        };\n        recognition.onerror = ()=> setMicUI(false);\n        recognition.onend = ()=>{ if(listening){ try{ recognition.start(); }catch(_){ } } };\n        setMicUI(true);\n        try{ recognition.start(); }catch(_){ }\n      }\n\n      function stopListening(){\n        setMicUI(false);\n        try{ recognition && recognition.stop(); }catch(_){ }\n      }\n\n      btnStartVoice.addEventListener('click', startListening);\n      btnStopVoice.addEventListener('click', stopListening);\n\n      \/* =========================\n         Progress (localStorage)\n      ========================= *\/\n      const LS_KEY = \"icte_ai_basics_progress_v2\";\n      const progress = JSON.parse(localStorage.getItem(LS_KEY) || \"{}\");\n\n      function saveProgress(){ localStorage.setItem(LS_KEY, JSON.stringify(progress)); renderProgress(); }\n      function markDone(key, scorePct){\n        progress[key] = { done:true, score: clamp(scorePct,0,100), ts: Date.now() };\n        saveProgress();\n      }\n      function resetProgress(){ localStorage.removeItem(LS_KEY); location.reload(); }\n      qs('#progressReset').addEventListener('click', resetProgress);\n\n      \/* =========================\n         Key Moves Bank (for progress)\n      ========================= *\/\n      const keyMoves = [\n        {k:\"define_ai\", label:\"Defines AI simply\"},\n        {k:\"example\", label:\"Gives classroom example\"},\n        {k:\"risk\", label:\"Names a risk (hallucination\/bias\/privacy)\"},\n        {k:\"verify\", label:\"Verifies with sources\"},\n        {k:\"privacy\", label:\"Avoids personal data\"},\n        {k:\"transparent\", label:\"Explains AI use to students\"},\n        {k:\"cite\", label:\"Checks citations \/ references\"}\n      ];\n      qs('#movesBank').innerHTML = keyMoves.map(m=>`<span class=\"tag\">${esc(m.label)}<\/span>`).join(\"\");\n\n      function addMove(key){\n        progress._moves = progress._moves || {};\n        progress._moves[key] = true;\n        saveProgress();\n      }\n\n      function renderProgress(){\n        const items = Object.values(progress).filter(p=>p && p.done);\n        const done = items.length;\n        const avg = done ? Math.round(items.reduce((s,p)=>s+(p.score||0),0)\/done) : 0;\n        qs('#pDone').textContent = String(done);\n        qs('#pScore').textContent = String(avg) + \"%\";\n        qs('#pKeyMoves').textContent = String(Object.keys(progress._moves || {}).length);\n      }\n\n      \/* =========================\n         Instruction TTS map\n      ========================= *\/\n      const SAY = {\n        \"conv-instr\": \"Conversation. Explain what AI can and cannot do. Give one classroom example. Name one risk like hallucination, bias, or privacy. Then give one safety rule.\",\n        \"concepts-instr\": \"AI Concepts. Read the text, answer the comprehension questions, and study the examples.\",\n        \"tools-instr\": \"Tools. Match common AI tool types to classroom uses. Then choose the best tool for each situation.\",\n        \"safety-instr\": \"Safety. Tick the classroom safe-use checklist. Click score to see your readiness level.\",\n        \"list-instr\": \"Listening. Click play dialogue to hear two teachers talking. Answer the comprehension questions. The voices will alternate automatically.\",\n        \"tasks-instr\": \"Mini Tasks. Write short answers. Keep them practical and classroom-ready.\",\n        \"research-instr\": \"Research Support. Choose the safest actions for literature review, data work, and writing. Always verify sources.\"\n      };\n      qsa('[data-say]').forEach(btn=>{\n        btn.addEventListener('click', async ()=>{\n          const k = btn.getAttribute('data-say');\n          if(SAY[k]) await speakAs(\"A\", SAY[k]);\n        });\n      });\n\n      \/* =========================\n         1) Conversation engine\n      ========================= *\/\n      const convChat = qs('#convChat');\n      const convText = qs('#convText');\n      const convSend = qs('#convSend');\n      const convHear = qs('#convHear');\n      const convReset = qs('#convReset');\n\n      let convStep = 0;\n      const convSteps = [\n        { bot: \"In one sentence, what is AI? Explain it to a teacher who is new to AI.\",\n          check: (a)=> a.length >= 12,\n          tips: \"Keep it simple: AI predicts likely answers based on patterns; it can help but can be wrong.\"\n        },\n        { bot: \"Give one thing AI CAN do for teaching (a practical example).\",\n          check: (a)=> a.length >= 10 && \/(lesson|quiz|feedback|rubric|worksheet|examples|summarize|translate)\/i.test(a),\n          tips: \"Example: AI can generate a quick quiz or simplify a reading.\"\n        },\n        { bot: \"Give one thing AI CANNOT do reliably (or a limitation).\",\n          check: (a)=> a.length >= 10 && \/(always|guarantee|perfect|cannot|can't|wrong|hallucination|fabricate)\/i.test(a),\n          tips: \"Example: AI can fabricate facts\/citations; it cannot guarantee correctness.\"\n        },\n        { bot: \"Name one classroom risk: hallucination, bias, privacy, plagiarism, or overreliance. Explain briefly.\",\n          check: (a)=> \/(hallucination|bias|privacy|plagiarism|overreliance|cheat|fabricate)\/i.test(a),\n          tips: \"Choose one risk and explain in one short sentence.\"\n        },\n        { bot: \"Now give one safety rule you will use with students.\",\n          check: (a)=> a.length >= 10 && \/(verify|check|sources|no personal|privacy|cite|disclose|teacher approval)\/i.test(a),\n          tips: \"Example: Verify important claims with sources; don\u2019t upload personal student data.\"\n        }\n      ];\n\n      function addMsg(who, text){\n        const div = document.createElement('div');\n        div.className = 'msg ' + (who==='You' ? 'user' : 'bot');\n        div.innerHTML = `<div class=\"who\">${esc(who)}<\/div><div class=\"bubble\">${esc(text)}<\/div>`;\n        convChat.appendChild(div);\n        convChat.scrollTop = convChat.scrollHeight;\n      }\n\n      async function botAsk(){\n        const step = convSteps[convStep];\n        if(!step){\n          addMsg(\"Coach\",\"Nice work. You covered definition, example, limitation, risk, and a safety rule.\");\n          addMove(\"define_ai\"); addMove(\"example\"); addMove(\"risk\"); addMove(\"privacy\"); addMove(\"verify\");\n          markDone(\"conversation\", 100);\n          await speakAs(\"A\",\"Nice work. You covered definition, example, limitation, risk, and a safety rule.\");\n          return;\n        }\n        addMsg(\"Coach\", step.bot);\n        lastPromptSpoken = step.bot;\n        await speakAs(\"A\", step.bot);\n      }\n\n      function scoreAnswer(a){\n        const step = convSteps[convStep];\n        const ok = step.check(norm(a));\n        const msg = ok ? \"\u2705 Good. Clear and practical.\" : \"\u26a0\ufe0f Try again. \" + step.tips;\n        return {ok, msg};\n      }\n\n      async function handleConversationInput(text){\n        const a = norm(text);\n        if(!a) return;\n        addMsg(\"You\", a);\n\n        if(\/ai\/i.test(a) && a.length>=10) addMove(\"define_ai\");\n        if(\/lesson|quiz|feedback|rubric|worksheet|translate|summarize\/i.test(a)) addMove(\"example\");\n        if(\/hallucination|bias|privacy|plagiarism|overreliance|fabricate\/i.test(a)) addMove(\"risk\");\n        if(\/verify|check|sources|cite\/i.test(a)) addMove(\"verify\");\n        if(\/privacy|no personal|student data|consent\/i.test(a)) addMove(\"privacy\");\n        if(\/cite|reference|doi\/i.test(a)) addMove(\"cite\");\n        if(\/tell students|disclose|transparent\/i.test(a)) addMove(\"transparent\");\n\n        progress._text = (progress._text||\"\") + \" \" + a;\n        saveProgress();\n\n        const {ok, msg} = scoreAnswer(a);\n        addMsg(\"Coach\", msg);\n        await speakAs(\"A\", msg);\n\n        if(ok){\n          convStep++;\n          setTimeout(()=>{ botAsk(); }, 350);\n        }else{\n          setTimeout(()=>{ speakAs(\"A\",\"Please try again. \" + convSteps[convStep].bot); }, 350);\n        }\n      }\n\n      convSend.addEventListener('click', ()=> { handleConversationInput(convText.value); convText.value=\"\"; });\n      convText.addEventListener('keydown', (e)=>{\n        if(e.key === \"Enter\"){ e.preventDefault(); handleConversationInput(convText.value); convText.value=\"\"; }\n      });\n      convHear.addEventListener('click', ()=> speakAs(\"A\", lastPromptSpoken || \"No question yet.\"));\n      convReset.addEventListener('click', ()=>{\n        convChat.innerHTML = \"\";\n        convStep = 0;\n        addMsg(\"Coach\",\"Ready. Start voice (optional) and answer.\");\n        botAsk();\n      });\n\n      addMsg(\"Coach\",\"Ready. Start voice (optional) and answer.\");\n      botAsk();\n\n      function activeViewName(){\n        const v = qs('.view.is-active');\n        return v ? v.getAttribute('data-view') : \"conversation\";\n      }\n\n      function handleVoiceTranscript(t){\n        const text = norm(t);\n        if(!text) return;\n\n        const v = activeViewName();\n        if(v === \"conversation\"){ handleConversationInput(text); return; }\n        if(v === \"tasks\"){\n          const tas = qsa('[data-task-answer]');\n          const target = tas.find(x => !norm(x.value)) || tas[0];\n          if(target){\n            target.value = (target.value ? (target.value + \" \") : \"\") + text;\n            speakAs(\"A\",\"I heard: \" + text);\n          }\n          return;\n        }\n        if(v === \"research\"){\n          const tas = qsa('[data-research-answer]');\n          const target = tas.find(x => !norm(x.value)) || tas[0];\n          if(target){\n            target.value = (target.value ? (target.value + \" \") : \"\") + text;\n            speakAs(\"A\",\"I heard: \" + text);\n          }\n          return;\n        }\n        speakAs(\"A\",\"I heard: \" + text);\n      }\n\n      \/* =========================\n         (NEW) Concepts reading + quiz + examples\n      ========================= *\/\n      const conceptReadBtn = qs('#conceptReadBtn');\n      if(conceptReadBtn){\n        conceptReadBtn.addEventListener('click', ()=>{\n          const parts = qsa('#conceptReading .reading-p').map(p=>p.textContent).join(\" \");\n          speakAs(\"A\", \"Reading. \" + parts);\n        });\n      }\n\n      const conceptQuiz = qs('#conceptQuiz');\n      const conceptFb = qs('#conceptFb');\n\n      const conceptItems = [\n        { q:\"1) How do most AI tools generate responses?\",\n          ans:\"By predicting likely outputs from patterns in data\",\n          opts:[\n            \"By predicting likely outputs from patterns in data\",\n            \"By thinking exactly like humans\",\n            \"By reading the teacher\u2019s mind\",\n            \"By always using verified sources\"\n          ]\n        },\n        { q:\"2) Which is a good low-risk use of AI for teachers?\",\n          ans:\"Drafting lesson ideas or example questions\",\n          opts:[\n            \"Submitting AI output as final grades with no review\",\n            \"Drafting lesson ideas or example questions\",\n            \"Sharing student private data to personalize answers\",\n            \"Copying AI references without checking\"\n          ]\n        },\n        { q:\"3) What does \u201challucination\u201d mean in AI?\",\n          ans:\"Confident-sounding information that may be false\",\n          opts:[\n            \"A perfectly correct answer every time\",\n            \"Confident-sounding information that may be false\",\n            \"A student speaking mistake\",\n            \"A grammar rule\"\n          ]\n        },\n        { q:\"4) Which classroom-safe rule is BEST?\",\n          ans:\"Do not share personal student data; verify important facts\",\n          opts:[\n            \"Do not share personal student data; verify important facts\",\n            \"Always trust AI because it sounds confident\",\n            \"Use AI to replace teacher judgment\",\n            \"Never tell students when AI is used\"\n          ]\n        },\n        { q:\"5) What is the best mindset for teachers?\",\n          ans:\"AI is an assistant; teachers make final decisions\",\n          opts:[\n            \"AI is an assistant; teachers make final decisions\",\n            \"AI should decide the assessment results\",\n            \"AI always knows what students need\",\n            \"AI removes the need for lesson objectives\"\n          ]\n        }\n      ];\n\n      function renderConceptQuiz(){\n        if(!conceptQuiz) return;\n        conceptQuiz.innerHTML = conceptItems.map((it)=>{\n          const options = ['<option value=\"\">Choose\u2026<\/option>']\n            .concat(it.opts.map(o=>`<option value=\"${esc(o)}\">${esc(o)}<\/option>`))\n            .join(\"\");\n          return `\n            <div class=\"qitem\">\n              <div class=\"qtext\">${esc(it.q)}<\/div>\n              <select class=\"icte-select\" data-ans=\"${esc(it.ans)}\">${options}<\/select>\n            <\/div>\n          `;\n        }).join(\"\");\n      }\n      renderConceptQuiz();\n\n      qs('#conceptQuizCheck').addEventListener('click', ()=>{\n        const sels = qsa('#conceptQuiz select');\n        let correct = 0;\n        sels.forEach(s=>{\n          const ok = s.value === s.getAttribute('data-ans');\n          s.style.borderColor = ok ? \"rgba(34,197,94,.6)\" : \"rgba(239,68,68,.6)\";\n          if(ok) correct++;\n        });\n        const pct = Math.round((correct \/ sels.length) * 100);\n        conceptFb.className = \"feedback \" + (pct>=70 ? \"ok\":\"bad\");\n        conceptFb.textContent = `Score: ${correct}\/${sels.length} (${pct}%).`;\n        markDone(\"concepts_reading\", pct);\n      });\n\n      \/\/ Examples\n      qs('#aiEx1').textContent =\n`ROLE: You are an expert EFL teacher.\nTASK: Draft a 45-minute lesson plan on \u201cWhat AI can\/can\u2019t do\u201d for B1 learners.\nMUST: include warm-up, guided practice, pair speaking task, wrap-up; include 8 target phrases; include answer key.\nMUST NOT: include sensitive topics; do not ask for student personal data.\nFORMAT: Table: Stage | Time | Procedure | Materials.\nQUALITY: Keep language B1 and practical.`;\n\n      qs('#aiEx2').textContent =\n`ROLE: You are a speaking coach.\nLEVEL: CEFR B1.\nTASK: Create 10 speaking questions about AI tools teachers use (chatbots, translation, voice).\nMUST: include word bank (10 items) + 2 model answers.\nMUST NOT: make claims that require citations.\nFORMAT: Questions + word bank + model answers.`;\n\n      qs('#aiEx3').textContent =\n`Student AI-use policy (example):\n1) You may use AI to brainstorm and check language.\n2) You must write your final answer yourself and explain your process.\n3) Do not submit AI text as your final work.\n4) Never share personal data (full names, IDs, private records).`;\n\n      qs('#aiEx4').textContent =\n`Teacher fact-check rule (example):\nIf AI gives a \u201cfact,\u201d I will verify it with trusted sources.\nIf AI suggests a reference, I will check it exists (e.g., Google Scholar) before citing it.`;\n\n      qs('#aiBadBetter').textContent =\n`BAD:\n\u201cMake an AI lesson.\u201d\n\nBETTER (safer):\nROLE: You are an expert teacher.\nCONTEXT: B1 class, 45 minutes, 30 students.\nTASK: Create a lesson on what AI can\/can\u2019t do.\nMUST: include 8 key terms + simple definitions; include one safety checklist; include 10 discussion questions.\nMUST NOT: include personal student data; do not invent citations.\nFORMAT: Table + answer key.`;\n\n      \/* =========================\n         3) Tools matching + use it\n      ========================= *\/\n      const toolMatch = qs('#toolMatch');\n      const toolsFb = qs('#toolsFb');\n      const toolUse = qs('#toolUse');\n      const toolUseFb = qs('#toolUseFb');\n\n      const toolPairs = shuffle([\n        {word:\"Chatbot (text)\", def:\"Brainstorm lesson ideas, draft feedback, generate examples\"},\n        {word:\"Translator\", def:\"Support multilingual learners; quick drafts (must verify nuance)\"},\n        {word:\"Text-to-Speech (TTS)\", def:\"Create listening practice; read passages aloud\"},\n        {word:\"Speech-to-Text (STT)\", def:\"Transcribe speaking tasks; support reflection\"},\n        {word:\"Image generator\", def:\"Create visuals for prompts, role cards, scenarios (avoid sensitive images)\"},\n        {word:\"Summarizer\", def:\"Make short notes from long readings (verify accuracy)\"}\n      ]);\n\n      function renderToolMatch(){\n        const defs = shuffle(toolPairs.map(x=>x.def));\n        toolMatch.innerHTML = toolPairs.map((x,i)=>{\n          const options = ['<option value=\"\">Choose\u2026<\/option>']\n            .concat(defs.map(d=>`<option value=\"${esc(d)}\">${esc(d)}<\/option>`))\n            .join(\"\");\n          return `\n            <div class=\"qitem\">\n              <div class=\"qtext\">${i+1}) <b>${esc(x.word)}<\/b><\/div>\n              <select class=\"icte-select\" data-ans=\"${esc(x.def)}\">${options}<\/select>\n            <\/div>\n          `;\n        }).join(\"\");\n      }\n      renderToolMatch();\n\n      qs('#toolsCheck').addEventListener('click', ()=>{\n        const sels = qsa('#toolMatch select');\n        let correct = 0;\n        sels.forEach(s=>{\n          const ok = s.value === s.getAttribute('data-ans');\n          s.style.borderColor = ok ? \"rgba(34,197,94,.6)\" : \"rgba(239,68,68,.6)\";\n          if(ok) correct++;\n        });\n        const pct = Math.round((correct \/ sels.length) * 100);\n        toolsFb.className = \"feedback \" + (pct>=70 ? \"ok\":\"bad\");\n        toolsFb.textContent = `Score: ${correct}\/${sels.length} (${pct}%).`;\n        markDone(\"tools_match\", pct);\n      });\n\n      const toolUseItems = [\n        {q:\"You want a listening audio from your reading text.\", ans:\"Text-to-Speech (TTS)\"},\n        {q:\"You want a quick first draft of feedback comments for student writing.\", ans:\"Chatbot (text)\"},\n        {q:\"You want to transcribe students\u2019 speaking practice.\", ans:\"Speech-to-Text (STT)\"},\n        {q:\"You need bilingual support for a newcomer student.\", ans:\"Translator\"},\n        {q:\"You want a short summary of a long policy document.\", ans:\"Summarizer\"}\n      ];\n\n      function renderToolUse(){\n        const bank = shuffle([\"Chatbot (text)\",\"Translator\",\"Text-to-Speech (TTS)\",\"Speech-to-Text (STT)\",\"Image generator\",\"Summarizer\"]);\n        toolUse.innerHTML = toolUseItems.map((it,i)=>{\n          const opts = ['<option value=\"\">Choose\u2026<\/option>']\n            .concat(bank.map(w=>`<option value=\"${esc(w)}\">${esc(w)}<\/option>`)).join(\"\");\n          return `\n            <div class=\"qitem\">\n              <div class=\"qtext\">${i+1}) ${esc(it.q)}<\/div>\n              <select class=\"icte-select\" data-ans=\"${esc(it.ans)}\">${opts}<\/select>\n            <\/div>\n          `;\n        }).join(\"\");\n      }\n      renderToolUse();\n\n      qs('#toolUseCheck').addEventListener('click', ()=>{\n        const sels = qsa('#toolUse select');\n        let correct = 0;\n        sels.forEach(s=>{\n          const ok = s.value === s.getAttribute('data-ans');\n          s.style.borderColor = ok ? \"rgba(34,197,94,.6)\" : \"rgba(239,68,68,.6)\";\n          if(ok) correct++;\n        });\n        const pct = Math.round((correct \/ sels.length) * 100);\n        toolUseFb.className = \"feedback \" + (pct>=70 ? \"ok\":\"bad\");\n        toolUseFb.textContent = `Score: ${correct}\/${sels.length} (${pct}%).`;\n        markDone(\"tools_use\", pct);\n      });\n\n      qs('#toolsReset').addEventListener('click', ()=>{\n        renderToolMatch();\n        renderToolUse();\n        toolsFb.style.display=\"none\";\n        toolUseFb.style.display=\"none\";\n      });\n\n      \/* =========================\n         4) Safety checklist\n      ========================= *\/\n      const safeList = qs('#safeList');\n      const safeFb = qs('#safeFb');\n\n      const safeItems = [\n        {id:\"no_personal\", text:\"I will not paste student personal data (full names, IDs, private records) into AI tools.\"},\n        {id:\"verify\", text:\"I will verify important facts with trusted sources (books, articles, official websites).\"},\n        {id:\"cite\", text:\"If AI suggests references, I will check that they really exist (e.g., Google Scholar) before using them.\"},\n        {id:\"disclose\", text:\"I will tell students when and how AI is allowed (and when it is not).\"},\n        {id:\"bias\", text:\"I will check for bias and unfair suggestions (stereotypes, one-sided examples).\"},\n        {id:\"learning_goal\", text:\"I will use AI to support learning goals, not to replace student thinking.\"},\n        {id:\"assessment\", text:\"For graded work, I will set clear rules (allowed\/forbidden) and require drafts\/reflection.\"}\n      ];\n\n      safeList.innerHTML = safeItems.map(x=>`\n        <label class=\"qitem\" style=\"display:flex; gap:10px; align-items:flex-start;\">\n          <input type=\"checkbox\" id=\"${esc(x.id)}\" \/>\n          <span><b>${esc(x.text)}<\/b><\/span>\n        <\/label>\n      `).join(\"\");\n\n      qs('#safetyScore').addEventListener('click', ()=>{\n        const checked = safeItems.filter(x => qs(\"#\"+x.id).checked).length;\n        const pct = Math.round((checked \/ safeItems.length) * 100);\n        safeFb.className = \"feedback \" + (pct>=70 ? \"ok\":\"bad\");\n        safeFb.textContent = `Safety readiness: ${checked}\/${safeItems.length} (${pct}%).`;\n        markDone(\"safety\", pct);\n      });\n\n      \/* =========================\n         5) Listening \u2014 Two-speaker dialogue\n      ========================= *\/\n      const listenFb = qs('#listenFb');\n      const listenQ = qs('#listenQ');\n\n      const dialogue2 = [\n        {role:\"A\", text:\"I\u2019m new to AI. Is it safe to use in class?\"},\n        {role:\"B\", text:\"It can be safe if we set rules. AI can help draft tasks, but it can also make mistakes.\"},\n        {role:\"A\", text:\"So what should teachers do first?\"},\n        {role:\"B\", text:\"Start with low-risk uses: brainstorm lesson ideas, generate examples, or create a listening script. Then verify important facts.\"},\n        {role:\"A\", text:\"What about student privacy?\"},\n        {role:\"B\", text:\"Don\u2019t paste personal student data. Use anonymized samples, and explain to students when AI is allowed.\"},\n        {role:\"A\", text:\"How do we prevent plagiarism?\"},\n        {role:\"B\", text:\"Require process evidence: drafts, reflections, and citations. Teach students to use AI as a support, not a substitute.\"}\n      ];\n\n      const listenItems = [\n        {q:\"1) What is the first recommended approach?\", ans:\"Low-risk uses first\"},\n        {q:\"2) What must teachers do with important facts?\", ans:\"Verify them\"},\n        {q:\"3) What should NOT be pasted into AI tools?\", ans:\"Personal student data\"},\n        {q:\"4) One strategy to reduce plagiarism is to require\u2026\", ans:\"Drafts and reflection\"}\n      ];\n\n      function renderListenQ(){\n        const options = {\n          \"Low-risk uses first\":[\"Low-risk uses first\",\"High-stakes grading first\",\"No rules needed\"],\n          \"Verify them\":[\"Trust them completely\",\"Verify them\",\"Never check\"],\n          \"Personal student data\":[\"Personal student data\",\"Public news headlines\",\"A lesson objective\"],\n          \"Drafts and reflection\":[\"Only a final answer\",\"Drafts and reflection\",\"No citations\"]\n        };\n        listenQ.innerHTML = listenItems.map((it,i)=>{\n          const opts = ['<option value=\"\">Choose\u2026<\/option>']\n            .concat((options[it.ans]||[it.ans]).map(o=>`<option value=\"${esc(o)}\">${esc(o)}<\/option>`)).join(\"\");\n          return `\n            <div class=\"qitem\">\n              <div class=\"qtext\">${esc(it.q)}<\/div>\n              <select class=\"icte-select\" data-ans=\"${esc(it.ans)}\">${opts}<\/select>\n            <\/div>\n          `;\n        }).join(\"\");\n      }\n      renderListenQ();\n\n      qs('#listenPlay').addEventListener('click', async ()=>{\n        if(googleVoicesEN.length >= 2 && voiceA === voiceB){\n          voiceB = googleVoicesEN.find(v => v !== voiceA) || voiceB;\n          voiceBSelect.value = String(googleVoicesEN.indexOf(voiceB));\n        }\n        await speakDialogue(dialogue2);\n      });\n\n      qs('#listenStop').addEventListener('click', stopSpeak);\n\n      qs('#listenCheck').addEventListener('click', ()=>{\n        const sels = qsa('#listenQ select');\n        let correct = 0;\n        sels.forEach(s=>{\n          const ok = s.value === s.getAttribute('data-ans');\n          s.style.borderColor = ok ? \"rgba(34,197,94,.6)\" : \"rgba(239,68,68,.6)\";\n          if(ok) correct++;\n        });\n        const pct = Math.round((correct \/ sels.length) * 100);\n        listenFb.className = \"feedback \" + (pct>=70 ? \"ok\":\"bad\");\n        listenFb.textContent = `Score: ${correct}\/${sels.length} (${pct}%).`;\n        markDone(\"listening\", pct);\n      });\n\n      \/* =========================\n         6) Mini tasks\n      ========================= *\/\n      const taskSet = qs('#taskSet');\n      const tasksFb = qs('#tasksFb');\n\n      const tasks = [\n        {id:\"t1\", prompt:\"Write a 1-sentence rule for students about AI use in your class.\"},\n        {id:\"t2\", prompt:\"Write a 1-sentence prompt you would give an AI chatbot to generate a 10-item quiz (include level + topic).\"},\n        {id:\"t3\", prompt:\"Write a 1-sentence reminder for yourself: what must you verify before using AI output?\"},\n        {id:\"t4\", prompt:\"Write a 2-sentence micro-policy about privacy (what students must not share).\"}\n      ];\n\n      taskSet.innerHTML = tasks.map((t,i)=>`\n        <div class=\"qitem\">\n          <div class=\"qtext\">${i+1}) ${esc(t.prompt)}<\/div>\n          <textarea class=\"textarea\" rows=\"2\" data-task-answer=\"${esc(t.id)}\" placeholder=\"Write here...\"><\/textarea>\n        <\/div>\n      `).join(\"\");\n\n      qs('#tasksCheck').addEventListener('click', ()=>{\n        const tas = qsa('[data-task-answer]');\n        let filled = 0;\n        tas.forEach(ta => { if(norm(ta.value).length >= 12) filled++; });\n        const pct = Math.round((filled \/ tas.length) * 100);\n        tasksFb.className = \"feedback \" + (pct>=70 ? \"ok\":\"bad\");\n        tasksFb.textContent = `Completion: ${filled}\/${tas.length} (${pct}%).`;\n        markDone(\"tasks\", pct);\n      });\n\n      \/* =========================\n         7) Research support\n      ========================= *\/\n      const researchSet = qs('#researchSet');\n      const researchFb = qs('#researchFb');\n\n      const researchItems = [\n        { q:\"1) Literature review: best AI use?\",\n          ans:\"Generate keywords and search strings, then verify sources\",\n          opts:[\n            \"Copy AI-made references directly into your paper\",\n            \"Generate keywords and search strings, then verify sources\",\n            \"Skip reading articles; use AI summaries only\"\n          ]\n        },\n        { q:\"2) Citations: safest rule?\",\n          ans:\"Only cite sources you have checked yourself\",\n          opts:[\n            \"Cite anything AI suggests\",\n            \"Only cite sources you have checked yourself\",\n            \"Use random DOIs to look academic\"\n          ]\n        },\n        { q:\"3) Data: what is appropriate to share with AI?\",\n          ans:\"Anonymized excerpts or synthetic examples\",\n          opts:[\n            \"Student names and private records\",\n            \"Anonymized excerpts or synthetic examples\",\n            \"Passwords and IDs\"\n          ]\n        },\n        { q:\"4) Writing: best workflow?\",\n          ans:\"Draft with AI, revise yourself, then check originality and references\",\n          opts:[\n            \"Ask AI to write everything and submit it unchanged\",\n            \"Draft with AI, revise yourself, then check originality and references\",\n            \"Never edit; AI is always right\"\n          ]\n        }\n      ];\n\n      researchSet.innerHTML = researchItems.map((it,i)=>{\n        const options = ['<option value=\"\">Choose\u2026<\/option>']\n          .concat(it.opts.map(o=>`<option value=\"${esc(o)}\">${esc(o)}<\/option>`))\n          .join(\"\");\n        return `\n          <div class=\"qitem\">\n            <div class=\"qtext\">${esc(it.q)}<\/div>\n            <select class=\"icte-select\" data-ans=\"${esc(it.ans)}\">${options}<\/select>\n            <textarea class=\"textarea\" rows=\"2\" data-research-answer=\"r${i}\" placeholder=\"Optional: write your own safe practice example...\"><\/textarea>\n          <\/div>\n        `;\n      }).join(\"\");\n\n      qs('#researchScore').addEventListener('click', ()=>{\n        const sels = qsa('#researchSet select');\n        let correct = 0;\n        sels.forEach(s=>{\n          const ok = s.value === s.getAttribute('data-ans');\n          s.style.borderColor = ok ? \"rgba(34,197,94,.6)\" : \"rgba(239,68,68,.6)\";\n          if(ok) correct++;\n        });\n        const pct = Math.round((correct \/ sels.length) * 100);\n        researchFb.className = \"feedback \" + (pct>=70 ? \"ok\":\"bad\");\n        researchFb.textContent = `Score: ${correct}\/${sels.length} (${pct}%).`;\n        markDone(\"research\", pct);\n      });\n\n      \/* =========================\n         Final init\n      ========================= *\/\n      renderProgress();\n\n    })();\n  <\/script>\n\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Conversation AI Concepts Common AI Tools Classroom-safe Use Listening Mini Tasks Research Support Progress AI Basics for Teachers Understand what<\/p>\n","protected":false},"author":1,"featured_media":741,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"colormag_page_layout":"default_layout","footnotes":""},"categories":[53,45],"tags":[],"class_list":["post-740","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ai-basics","category-ai-for-teachers"],"_links":{"self":[{"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/posts\/740","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=740"}],"version-history":[{"count":4,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/posts\/740\/revisions"}],"predecessor-version":[{"id":779,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/posts\/740\/revisions\/779"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/media\/741"}],"wp:attachment":[{"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/media?parent=740"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/categories?post=740"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/tags?post=740"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}