IELTS Listening Overview \u2013 ICTE Robot<\/title>\n <style>\n * { box-sizing: border-box; }\n\n body{\n font-family: Arial, sans-serif;\n background:#f4f6f8;\n margin:0;\n color:#222;\n line-height:1.55;\n }\n\n \/* \u2705 TOP NAV MENU (GREEN, STICKY, SCROLLABLE) *\/\n .icte-menu{\n width:100%;\n background:#28a745;\n padding:10px 12px;\n text-align:center;\n box-shadow:0 2px 6px rgba(0,0,0,0.12);\n overflow-x:auto;\n white-space:nowrap;\n position:sticky;\n top:0;\n z-index:999;\n }\n .icte-menu a{\n display:inline-block;\n color:#fff;\n text-decoration:none;\n font-weight:900;\n margin:0 8px;\n padding:8px 10px;\n border-radius:10px;\n transition:background .2s ease;\n }\n .icte-menu a:hover{ background:rgba(255,255,255,0.18); }\n .icte-menu a.active{ background:rgba(255,255,255,0.25); }\n\n .page-pad{ padding: 16px; }\n .container{\n max-width:1100px;\n margin:0 auto;\n background:#fff;\n border-radius:14px;\n padding:18px;\n box-shadow:0 8px 20px rgba(0,0,0,0.08);\n }\n\n h1,h2,h3{ margin:0 0 10px; color:#1f7a35; }\n .sub{ margin:0 0 14px; color:#444; }\n\n \/* \u2705 HERO *\/\n .hero{\n display:grid;\n grid-template-columns: 1.2fr 0.8fr;\n gap:14px;\n align-items:stretch;\n margin-bottom:14px;\n }\n .hero-card{\n border:1px solid #e5e7eb;\n border-radius:14px;\n padding:16px;\n background:#fff;\n box-shadow:0 2px 10px rgba(0,0,0,0.05);\n }\n .hero-badge{\n display:inline-block;\n background:#e7f7eb;\n color:#1f7a35;\n border:1px solid #bfe9c9;\n padding:6px 12px;\n border-radius:999px;\n font-weight:900;\n font-size:12px;\n margin-bottom:10px;\n }\n .hero-image{\n border-radius:14px;\n overflow:hidden;\n border:1px solid #e5e7eb;\n background:#f8fafc;\n box-shadow:0 2px 10px rgba(0,0,0,0.05);\n display:flex;\n align-items:center;\n justify-content:center;\n min-height:160px;\n }\n .hero-image img{\n width:100%;\n height:100%;\n object-fit:cover;\n display:block;\n }\n\n \/* \u2705 QUICK LINKS BAR *\/\n .quick{\n margin-top:14px;\n padding:12px;\n border-radius:14px;\n background:#f8fbff;\n border:1px solid #dbeafe;\n display:flex;\n flex-wrap:wrap;\n gap:10px;\n align-items:center;\n justify-content:space-between;\n }\n .quick .left{ font-weight:900; color:#0b5ed7; }\n .quick .links{ display:flex; flex-wrap:wrap; gap:8px; }\n .quick .links a{\n display:inline-block;\n padding:8px 10px;\n border-radius:10px;\n background:#0b5ed7;\n color:#fff;\n text-decoration:none;\n font-weight:900;\n font-size:13px;\n }\n .quick .links a:hover{ opacity:0.92; }\n\n \/* \u2705 STRATEGIES BOX (GREEN LINE STYLE) *\/\n #listening-strategies{ scroll-margin-top: 80px; }\n .strategy-box{\n max-width:1100px;\n margin: 12px auto 14px;\n background:#f4fff6;\n border:2px solid #28a745;\n border-left:8px solid #28a745;\n border-radius:12px;\n padding:14px 16px;\n box-shadow:0 2px 8px rgba(0,0,0,0.06);\n }\n .strategy-box details summary{\n cursor:pointer;\n font-weight:900;\n color:#1f7a35;\n list-style:none;\n outline:none;\n user-select:none;\n }\n .strategy-box details summary::-webkit-details-marker{ display:none; }\n .strategy-box details summary:before{\n content:\"\u25b6 \";\n display:inline-block;\n margin-right:6px;\n transform-origin:center;\n }\n .strategy-box details[open] summary:before{ content:\"\u25bc \"; }\n\n .strategy-actions{\n display:flex;\n gap:10px;\n flex-wrap:wrap;\n margin:10px 0 0;\n }\n\n .btn{\n appearance:none;\n border:0;\n border-radius:10px;\n padding:10px 12px;\n font-weight:900;\n cursor:pointer;\n }\n .btn-green{ background:#28a745; color:#fff; }\n .btn-blue{ background:#007bff; color:#fff; }\n .btn-gray{ background:#e9ecef; color:#333; }\n .btn-red{ background:#dc3545; color:#fff; }\n\n .strategy-list{ margin:10px 0 0; padding-left:18px; }\n .strategy-list li{ margin:8px 0; }\n .strategy-list ul{ margin:6px 0 0; padding-left:18px; }\n\n \/* \u2705 OVERVIEW CARDS *\/\n .section-title{\n display:flex;\n align-items:baseline;\n justify-content:space-between;\n gap:10px;\n margin-top: 6px;\n }\n .muted{ color:#555; font-size:14px; margin:0; }\n\n .cards{\n display:grid;\n grid-template-columns: repeat(3, 1fr);\n gap:14px;\n margin-top:12px;\n }\n @media (max-width: 980px){\n .hero{ grid-template-columns: 1fr; }\n .cards{ grid-template-columns: 1fr; }\n .grid{ grid-template-columns: 1fr !important; }\n }\n\n .card{\n border:1px solid #e5e7eb;\n border-radius:14px;\n padding:14px;\n background:#fff;\n box-shadow:0 2px 10px rgba(0,0,0,0.05);\n display:flex;\n flex-direction:column;\n gap:10px;\n min-height: 170px;\n }\n .card .tag{\n display:inline-block;\n width:max-content;\n font-size:12px;\n font-weight:900;\n padding:5px 10px;\n border-radius:999px;\n border:1px solid #bfe9c9;\n background:#e7f7eb;\n color:#1f7a35;\n }\n .card h3{ margin:0; font-size:18px; color:#0f5132; }\n .card p{ margin:0; color:#444; font-size:14px; }\n .card a{\n text-decoration:none;\n font-weight:900;\n color:#fff;\n background:#28a745;\n padding:10px 12px;\n border-radius:12px;\n display:inline-block;\n width:max-content;\n margin-top:auto;\n }\n .card a:hover{ opacity:0.92; }\n\n \/* \u2705 DIVIDER *\/\n .divider{\n margin:18px 0;\n border:0;\n height:1px;\n background:#e5e7eb;\n }\n\n \/* \u2705 Listening Practice block (same grid style) *\/\n .grid{\n display:grid;\n grid-template-columns: 1.2fr 1fr;\n gap:14px;\n margin-top:12px;\n }\n .panel{\n border:1px solid #e5e7eb;\n border-radius:12px;\n padding:14px;\n background:#fff;\n }\n .panel-title{\n display:flex;\n align-items:center;\n justify-content:space-between;\n gap:10px;\n margin-bottom:10px;\n }\n .pill{\n display:inline-block;\n background:#e7f7eb;\n color:#1f7a35;\n border:1px solid #bfe9c9;\n padding:4px 10px;\n border-radius:999px;\n font-weight:900;\n font-size:12px;\n }\n .toolbar{\n display:flex;\n gap:10px;\n flex-wrap:wrap;\n margin:10px 0 0;\n }\n .timer{\n font-weight:900;\n font-size:14px;\n color:#0f5132;\n background:#d1e7dd;\n border:1px solid #badbcc;\n padding:6px 10px;\n border-radius:10px;\n display:inline-block;\n }\n\n .audio-box{\n background:#fbfbff;\n border:1px solid #e5e7ff;\n border-radius:10px;\n padding:12px;\n }\n\n .q{\n border-top:1px dashed #e5e7eb;\n padding-top:12px;\n margin-top:12px;\n }\n .q:first-child{ border-top:0; padding-top:0; margin-top:0; }\n .q h4{ margin:0 0 8px; color:#0b5ed7; }\n .opt{ margin:6px 0; }\n .inline{\n display:flex;\n gap:10px;\n align-items:center;\n flex-wrap:wrap;\n margin:6px 0;\n }\n input[type=\"text\"], select{\n padding:10px 10px;\n border:1px solid #d1d5db;\n border-radius:10px;\n min-width: 220px;\n font-weight:700;\n }\n .small-note{ font-size:12px; color:#666; margin:8px 0 0; }\n\n #transcriptBox{\n display:none;\n margin-top:12px;\n background:#ffffff;\n border:2px solid #e5e7eb;\n border-radius:12px;\n padding:12px;\n white-space:pre-wrap;\n line-height:1.6;\n font-weight:700;\n color:#0f172a;\n max-height:360px;\n overflow:auto;\n }\n\n .result{\n margin-top:12px;\n padding:12px;\n border-radius:12px;\n border:1px solid #d1e7dd;\n background:#f0fff4;\n display:none;\n }\n .result.bad{\n border-color:#f5c2c7;\n background:#fff5f6;\n }\n .score{ font-weight:900; font-size:16px; margin-bottom:6px; }\n .footer{\n text-align:center;\n color:#777;\n font-size:13px;\n margin-top:18px;\n }\n <\/style>\n<\/head>\n\n<body>\n\n \n <div class=\"icte-menu\">\n <a href=\"https:\/\/i-cte.org\/robot\/ielts-listening-overview\/\">Overview<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/ielts-listening-test-2\/\">Test 2<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/ielts-listening-test-3\/\">Test 3<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/ielts-listening-test-4\/\">Test 4<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/ielts-reading-overview\/\">Reading<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/ielts-speaking-overview\/\">Speaking<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/ielts-writing-overview\/\">Writing<\/a>\n <\/div>\n\n <div class=\"page-pad\">\n <div class=\"container\">\n\n \n <div class=\"hero\">\n <div class=\"hero-card\">\n <div class=\"hero-badge\">IELTS Listening Overview<\/div>\n <h1 style=\"margin:0 0 6px;\">ICTE Robot \u2013 Listening Skills Hub<\/h1>\n <p class=\"sub\" style=\"margin:0;\">\n Practice IELTS Listening Sections 1\u20134. Use strategies first, then play the audio and answer questions.\n <\/p>\n <p style=\"margin:10px 0 0;\">\n Tip: <strong>Read questions first<\/strong> \u2192 predict answer type \u2192 listen for synonyms \u2192 write while listening.\n <\/p>\n <\/div>\n\n <div class=\"hero-image\" aria-label=\"IELTS banner\">\n <img decoding=\"async\" src=\"https:\/\/i-cte.org\/robot\/wp-content\/uploads\/2025\/12\/2.webp\" alt=\"IELTS Practice Banner\">\n <\/div>\n <\/div>\n\n \n <div class=\"quick\">\n <div class=\"left\">Quick access:<\/div>\n <div class=\"links\">\n <a href=\"#ielts-listening-practice\">Practice<\/a>\n <a href=\"#listening-strategies\">Strategies<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/ielts-listening-section-1\/\">Section 1<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/ielts-listening-section-2\/\">Section 2<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/ielts-listening-section-3\/\">Section 3<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/ielts-listening-section-4\/\">Section 4<\/a>\n <\/div>\n <\/div>\n\n \n <div class=\"strategy-box\" id=\"listening-strategies\">\n <h2 style=\"margin:0 0 8px;\">IELTS Listening Strategies (Quick & Practical)<\/h2>\n\n <details open>\n <summary>Open\/Close strategies<\/summary>\n\n <div class=\"strategy-actions\">\n <button class=\"btn btn-green\" type=\"button\" onclick=\"readStrategies()\">\ud83d\udd0a Read strategies aloud<\/button>\n <button class=\"btn btn-gray\" type=\"button\" onclick=\"stopSpeaking()\">\u23f9 Stop<\/button>\n <\/div>\n\n <div id=\"strategiesText\">\n <ol class=\"strategy-list\">\n <li><strong>Read questions first (10\u201320 seconds)<\/strong>\n <ul>\n <li>Underline keywords (names, numbers, days, places).<\/li>\n <li>Predict the answer type (number? noun? place?).<\/li>\n <\/ul>\n <\/li>\n <li><strong>Follow the order<\/strong>\n <ul>\n <li>Answers usually appear in the same order as the audio.<\/li>\n <\/ul>\n <\/li>\n <li><strong>Listen for synonyms<\/strong>\n <ul>\n <li>Audio often paraphrases the question wording.<\/li>\n <\/ul>\n <\/li>\n <li><strong>Write while listening<\/strong>\n <ul>\n <li>Don\u2019t wait\u2014write quickly, then check spelling.<\/li>\n <\/ul>\n <\/li>\n <li><strong>Watch for corrections<\/strong>\n <ul>\n <li>Speakers may change details: \u201cThursday\u2026 sorry, Friday\u201d.<\/li>\n <\/ul>\n <\/li>\n <li><strong>Check word limits<\/strong>\n <ul>\n <li>ONE WORD ONLY \/ NO MORE THAN TWO WORDS \/ etc.<\/li>\n <\/ul>\n <\/li>\n <\/ol>\n <\/div>\n <\/details>\n <\/div>\n\n \n <hr class=\"divider\">\n\n <h2 id=\"ielts-listening-practice\" style=\"margin-bottom:6px;\">IELTS Listening Practice (Template)<\/h2>\n <p class=\"sub\" style=\"margin-top:0;\">\n Use the timer, click <strong>Play Audio<\/strong> (robot reads transcript), answer questions, then click <strong>Check Answers<\/strong>.\n <\/p>\n\n <div class=\"grid\">\n\n \n <section class=\"panel\" aria-label=\"Listening audio\">\n <div class=\"panel-title\">\n <h3 style=\"margin:0;\">Listening Audio<\/h3>\n <span class=\"pill\">TTS Audio<\/span>\n <\/div>\n\n <div class=\"inline\" style=\"justify-content:space-between;\">\n <div class=\"timer\" id=\"timer\">Time: 00:00<\/div>\n <div class=\"toolbar\">\n <button class=\"btn btn-blue\" type=\"button\" onclick=\"startTimer()\">\u25b6 Start<\/button>\n <button class=\"btn btn-gray\" type=\"button\" onclick=\"pauseTimer()\">\u23f8 Pause<\/button>\n <button class=\"btn btn-gray\" type=\"button\" onclick=\"resetTimer()\">\u21ba Reset<\/button>\n <\/div>\n <\/div>\n\n <div class=\"audio-box\" style=\"margin-top:10px;\">\n <div class=\"inline\">\n <label for=\"voiceSelect\">Choose voice<\/label>\n <select id=\"voiceSelect\" aria-label=\"Choose a voice\">\n <option value=\"\">Loading voices\u2026<\/option>\n <\/select>\n <\/div>\n\n <div class=\"toolbar\">\n <button class=\"btn btn-green\" type=\"button\" onclick=\"playAudio()\">\ud83d\udd0a Play Audio<\/button>\n <button class=\"btn btn-red\" type=\"button\" onclick=\"stopSpeaking()\">\u23f9 Stop Audio<\/button>\n <button class=\"btn btn-gray\" type=\"button\" onclick=\"toggleTranscript()\">\ud83d\udcdd Show\/Hide Transcript<\/button>\n <\/div>\n\n <div class=\"toolbar\" style=\"margin-top:10px;\">\n <button class=\"btn btn-blue\" type=\"button\" onclick=\"readInstructions()\">\ud83d\udd0a Read Instructions<\/button>\n <button class=\"btn btn-blue\" type=\"button\" onclick=\"readQuestions()\">\ud83d\udd0a Read Questions<\/button>\n <\/div>\n\n <div id=\"transcriptBox\"><\/div>\n <p class=\"small-note\">Teacher tip: keep transcript hidden during the first attempt.<\/p>\n <\/div>\n <\/section>\n\n \n <section class=\"panel\" aria-label=\"Questions\">\n <div class=\"panel-title\">\n <h3 style=\"margin:0;\">Questions<\/h3>\n <span class=\"pill\">Auto-check<\/span>\n <\/div>\n\n \n <div class=\"q\">\n <h4>Instructions<\/h4>\n <p><strong>Complete the notes.<\/strong> Write <strong>ONE WORD ONLY<\/strong> for each answer.<\/p>\n <\/div>\n\n <div class=\"q\">\n <h4>Q1 (ONE WORD)<\/h4>\n <p>The excursion is a ________ cruise.<\/p>\n <div class=\"inline\">\n <input type=\"text\" id=\"q1\" placeholder=\"ONE WORD\" \/>\n <span class=\"pill\">ONE WORD<\/span>\n <\/div>\n <\/div>\n\n <div class=\"q\">\n <h4>Q2 (Multiple choice)<\/h4>\n <p>How long is the trip?<\/p>\n <div class=\"opt\"><label><input type=\"radio\" name=\"q2\" value=\"A\"> A. 30 minutes<\/label><\/div>\n <div class=\"opt\"><label><input type=\"radio\" name=\"q2\" value=\"B\"> B. 90 minutes<\/label><\/div>\n <div class=\"opt\"><label><input type=\"radio\" name=\"q2\" value=\"C\"> C. 3 hours<\/label><\/div>\n <\/div>\n\n <div class=\"q\">\n <h4>Q3 (ONE WORD)<\/h4>\n <p>The bike rental shop is called ________.<\/p>\n <div class=\"inline\">\n <input type=\"text\" id=\"q3\" placeholder=\"ONE WORD\" \/>\n <span class=\"pill\">ONE WORD<\/span>\n <\/div>\n <\/div>\n\n <div class=\"q\">\n <h4>Q4 (Dropdown)<\/h4>\n <p>The trail is described as:<\/p>\n <select id=\"q4\">\n <option value=\"\">Choose\u2026<\/option>\n <option value=\"easy\">easy<\/option>\n <option value=\"challenging\">challenging<\/option>\n <option value=\"flat\">flat<\/option>\n <\/select>\n <\/div>\n\n <div class=\"q\">\n <h4>Q5 (ONE WORD)<\/h4>\n <p>They should take a ________ kit.<\/p>\n <div class=\"inline\">\n <input type=\"text\" id=\"q5\" placeholder=\"ONE WORD\" \/>\n <span class=\"pill\">ONE WORD<\/span>\n <\/div>\n <\/div>\n\n <div class=\"toolbar\" style=\"margin-top:14px;\">\n <button class=\"btn btn-green\" type=\"button\" onclick=\"checkAnswers()\">\u2705 Check Answers<\/button>\n <button class=\"btn btn-gray\" type=\"button\" onclick=\"showAnswers()\">\ud83d\udc40 Show Answers<\/button>\n <button class=\"btn btn-gray\" type=\"button\" onclick=\"resetQuiz()\">\ud83e\uddf9 Reset<\/button>\n <\/div>\n\n <div class=\"result\" id=\"resultBox\" aria-live=\"polite\"><\/div>\n <\/section>\n <\/div>\n\n \n <div class=\"section-title\">\n <h2 style=\"margin:0;\">Choose a Listening Section<\/h2>\n <p class=\"muted\">Click a card to open that activity.<\/p>\n <\/div>\n\n <div class=\"cards\">\n <div class=\"card\">\n <span class=\"tag\">Listening<\/span>\n <h3>Section 1<\/h3>\n <p>Conversation: form \/ note completion, names, numbers, details.<\/p>\n <a href=\"https:\/\/i-cte.org\/robot\/ielts-listening-section-1\/\">Open Section 1<\/a>\n <\/div>\n\n <div class=\"card\">\n <span class=\"tag\">Listening<\/span>\n <h3>Section 2<\/h3>\n <p>Monologue: orientation \/ tour \/ instructions with key facts.<\/p>\n <a href=\"https:\/\/i-cte.org\/robot\/ielts-listening-section-2\/\">Open Section 2<\/a>\n <\/div>\n\n <div class=\"card\">\n <span class=\"tag\">Listening<\/span>\n <h3>Section 3<\/h3>\n <p>Academic discussion: multiple speakers, research planning, details.<\/p>\n <a href=\"https:\/\/i-cte.org\/robot\/ielts-listening-section-3\/\">Open Section 3<\/a>\n <\/div>\n\n <div class=\"card\">\n <span class=\"tag\">Listening<\/span>\n <h3>Section 4<\/h3>\n <p>Academic lecture: note completion, key terms, main ideas.<\/p>\n <a href=\"https:\/\/i-cte.org\/robot\/ielts-listening-section-4\/\">Open Section 4<\/a>\n <\/div>\n\n <div class=\"card\">\n <span class=\"tag\">Speaking<\/span>\n <h3>Speaking<\/h3>\n <p>Practice describing pictures and answering questions.<\/p>\n <a href=\"https:\/\/i-cte.org\/robot\/ielts-speaking-overview\/\">Open Speaking<\/a>\n <\/div>\n\n <div class=\"card\">\n <span class=\"tag\">Writing<\/span>\n <h3>Writing<\/h3>\n <p>Practice writing tasks with structure and clear grammar.<\/p>\n <a href=\"https:\/\/i-cte.org\/robot\/ielts-writing-overview\/\">Open Writing<\/a>\n <\/div>\n <\/div>\n\n <div class=\"footer\">\n © 2026 ICTE Robot. All rights reserved.\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n \/*********************************************************\n * 1) TRANSCRIPT (PASTE YOUR REAL LISTENING SCRIPT HERE)\n *********************************************************\/\n const TRANSCRIPT_TEXT = `\nSection (Template Transcript)\nSpeaker: Hello. This is a sample transcript for IELTS Listening practice.\nYou can replace this entire transcript with your real Section script.\n `.trim();\n\n const INSTRUCTIONS_TEXT =\n \"Complete the notes. Write one word only for each answer.\";\n\n const QUESTIONS_TEXT =\n \"Question 1. The excursion is a blank cruise. \" +\n \"Question 2. How long is the trip? \" +\n \"Question 3. The bike rental shop is called blank. \" +\n \"Question 4. The trail is described as blank. \" +\n \"Question 5. They should take a blank kit.\";\n\n \/*********************************************************\n * 2) ANSWER KEY (EDIT ANSWERS HERE)\n * - radio\/dropdown: put exact option value\n * - text: you can provide multiple accepted variants\n *********************************************************\/\n const ANSWER_KEY = {\n q1: [\"steamship\",\"steam\"],\n q2: \"B\",\n q3: [\"ratchesons\",\"ratcheson\"],\n q4: \"challenging\",\n q5: [\"repair\"]\n };\n\n \/*********************************************************\n * SPEECH (TTS) \u2014 voice picker + chunked speaking\n *********************************************************\/\n const voiceSelect = document.getElementById(\"voiceSelect\");\n let voices = [];\n let ttsQueue = [];\n let ttsRunning = false;\n let transcriptVisible = false;\n\n function loadVoices(){\n if(!(\"speechSynthesis\" in window)){\n voiceSelect.innerHTML = `<option value=\"\">Speech not supported<\/option>`;\n return;\n }\n voices = window.speechSynthesis.getVoices() || [];\n if(!voices.length){\n voiceSelect.innerHTML = `<option value=\"\">No voices available<\/option>`;\n return;\n }\n voiceSelect.innerHTML = \"\";\n voices.forEach((v, idx) => {\n const opt = document.createElement(\"option\");\n opt.value = String(idx);\n opt.textContent = `${v.name} (${v.lang})`;\n voiceSelect.appendChild(opt);\n });\n const firstEN = voices.findIndex(v => (v.lang||\"\").toLowerCase().startsWith(\"en\"));\n voiceSelect.value = String(firstEN >= 0 ? firstEN : 0);\n }\n\n function getVoice(){\n const idx = parseInt(voiceSelect.value || \"0\", 10);\n return voices[idx] || null;\n }\n\n if(\"speechSynthesis\" in window){\n loadVoices();\n window.speechSynthesis.onvoiceschanged = loadVoices;\n }\n\n function stopSpeaking(){\n if(\"speechSynthesis\" in window) window.speechSynthesis.cancel();\n ttsQueue = [];\n ttsRunning = false;\n }\n\n function buildQueue(text){\n const lines = (text||\"\")\n .replace(\/\\r\/g,\"\")\n .split(\"\\n\")\n .map(s=>s.trim())\n .filter(Boolean);\n\n const items = [];\n for(const line of lines){\n const chunks = line.split(\/(?<=[.!?])\\s+\/).map(s=>s.trim()).filter(Boolean);\n for(const c of chunks) items.push(c);\n items.push(\"__PAUSE__\");\n }\n return items;\n }\n\n function speakNext(){\n if(!ttsRunning) return;\n if(!ttsQueue.length){ ttsRunning=false; return; }\n\n const item = ttsQueue.shift();\n if(item === \"__PAUSE__\"){ setTimeout(speakNext, 260); return; }\n\n const u = new SpeechSynthesisUtterance(item);\n const v = getVoice();\n if(v) u.voice = v;\n u.rate = 0.95;\n u.pitch = 1.0;\n u.onend = () => setTimeout(speakNext, 120);\n u.onerror = () => setTimeout(speakNext, 120);\n window.speechSynthesis.speak(u);\n }\n\n function playAudio(){\n stopSpeaking();\n if(!(\"speechSynthesis\" in window)){\n alert(\"Speech synthesis is not supported in this browser.\");\n return;\n }\n ttsQueue = buildQueue(TRANSCRIPT_TEXT);\n ttsRunning = true;\n speakNext();\n }\n\n function speakOne(text){\n stopSpeaking();\n if(!(\"speechSynthesis\" in window)){\n alert(\"Speech synthesis is not supported in this browser.\");\n return;\n }\n const u = new SpeechSynthesisUtterance(text);\n const v = getVoice();\n if(v) u.voice = v;\n u.rate = 0.95;\n u.pitch = 1.0;\n window.speechSynthesis.speak(u);\n }\n\n function readStrategies(){\n const el = document.getElementById(\"strategiesText\");\n if(!el) return;\n speakOne(el.innerText.trim());\n }\n\n function readInstructions(){ speakOne(INSTRUCTIONS_TEXT); }\n function readQuestions(){ speakOne(QUESTIONS_TEXT); }\n\n function toggleTranscript(){\n const box = document.getElementById(\"transcriptBox\");\n transcriptVisible = !transcriptVisible;\n if(transcriptVisible){\n stopSpeaking();\n box.textContent = TRANSCRIPT_TEXT;\n box.style.display = \"block\";\n } else {\n box.textContent = \"\";\n box.style.display = \"none\";\n }\n }\n\n \/*********************************************************\n * TIMER\n *********************************************************\/\n let t = 0;\n let timerId = null;\n\n function formatTime(sec){\n const m = String(Math.floor(sec \/ 60)).padStart(2, \"0\");\n const s = String(sec % 60).padStart(2, \"0\");\n return `${m}:${s}`;\n }\n function renderTimer(){\n const el = document.getElementById(\"timer\");\n if (el) el.textContent = `Time: ${formatTime(t)}`;\n }\n function startTimer(){\n if (timerId) return;\n timerId = setInterval(() => { t++; renderTimer(); }, 1000);\n }\n function pauseTimer(){\n if (timerId){ clearInterval(timerId); timerId = null; }\n }\n function resetTimer(){\n pauseTimer();\n t = 0;\n renderTimer();\n }\n renderTimer();\n\n \/*********************************************************\n * QUIZ CHECKER\n *********************************************************\/\n function getRadioValue(name){\n const checked = document.querySelector(`input[name=\"${name}\"]:checked`);\n return checked ? checked.value : \"\";\n }\n\n function normalizeText(s){\n return (s || \"\")\n .toLowerCase()\n .trim()\n .replace(\/[^\\w\\s]\/g,\"\")\n .replace(\/\\s+\/g,\" \")\n .replace(\/^the\\s+\/,\"\");\n }\n\n function asArray(x){ return Array.isArray(x) ? x : [x]; }\n\n function checkAnswers(){\n stopSpeaking();\n\n const user = {\n q1: document.getElementById(\"q1\")?.value || \"\",\n q2: getRadioValue(\"q2\"),\n q3: document.getElementById(\"q3\")?.value || \"\",\n q4: document.getElementById(\"q4\")?.value || \"\",\n q5: document.getElementById(\"q5\")?.value || \"\"\n };\n\n let correct = 0;\n const total = Object.keys(ANSWER_KEY).length;\n const feedback = [];\n\n \/\/ Q1 (text)\n {\n const accepted = asArray(ANSWER_KEY.q1).map(normalizeText);\n const u = normalizeText(user.q1);\n if(u && accepted.includes(u)){ correct++; feedback.push(\"\u2705 Q1: Correct\"); }\n else feedback.push(`\u274c Q1: Your answer = ${user.q1 || \"(blank)\"} | Correct = ${asArray(ANSWER_KEY.q1)[0]}`);\n }\n\n \/\/ Q2 (radio)\n {\n if(user.q2 === ANSWER_KEY.q2){ correct++; feedback.push(\"\u2705 Q2: Correct\"); }\n else feedback.push(`\u274c Q2: Your answer = ${user.q2 || \"(blank)\"} | Correct = ${ANSWER_KEY.q2}`);\n }\n\n \/\/ Q3 (text)\n {\n const accepted = asArray(ANSWER_KEY.q3).map(normalizeText);\n const u = normalizeText(user.q3);\n if(u && accepted.includes(u)){ correct++; feedback.push(\"\u2705 Q3: Correct\"); }\n else feedback.push(`\u274c Q3: Your answer = ${user.q3 || \"(blank)\"} | Correct = ${asArray(ANSWER_KEY.q3)[0]}`);\n }\n\n \/\/ Q4 (dropdown)\n {\n if(user.q4 === ANSWER_KEY.q4){ correct++; feedback.push(\"\u2705 Q4: Correct\"); }\n else feedback.push(`\u274c Q4: Your answer = ${user.q4 || \"(blank)\"} | Correct = ${ANSWER_KEY.q4}`);\n }\n\n \/\/ Q5 (text)\n {\n const accepted = asArray(ANSWER_KEY.q5).map(normalizeText);\n const u = normalizeText(user.q5);\n if(u && accepted.includes(u)){ correct++; feedback.push(\"\u2705 Q5: Correct\"); }\n else feedback.push(`\u274c Q5: Your answer = ${user.q5 || \"(blank)\"} | Correct = ${asArray(ANSWER_KEY.q5)[0]}`);\n }\n\n const box = document.getElementById(\"resultBox\");\n if(!box) return;\n\n const percent = Math.round((correct \/ total) * 100);\n box.style.display = \"block\";\n box.className = \"result\" + (percent >= 70 ? \"\" : \" bad\");\n box.innerHTML = `\n <div class=\"score\">Score: ${correct}\/${total} (${percent}%)<\/div>\n <div style=\"font-size:14px;color:#333;line-height:1.6;\">${feedback.join(\"<br>\")}<\/div>\n <p class=\"small-note\"><strong>Tip:<\/strong> Check spelling + word limits carefully.<\/p>\n `;\n }\n\n function showAnswers(){\n \/\/ Fill text inputs with first accepted answer\n const q1 = document.getElementById(\"q1\");\n const q3 = document.getElementById(\"q3\");\n const q5 = document.getElementById(\"q5\");\n if(q1) q1.value = asArray(ANSWER_KEY.q1)[0] || \"\";\n if(q3) q3.value = asArray(ANSWER_KEY.q3)[0] || \"\";\n if(q5) q5.value = asArray(ANSWER_KEY.q5)[0] || \"\";\n\n \/\/ Select radio\n document.querySelectorAll('input[name=\"q2\"]').forEach(r => { r.checked = (r.value === ANSWER_KEY.q2); });\n\n \/\/ Select dropdown\n const q4 = document.getElementById(\"q4\");\n if(q4) q4.value = ANSWER_KEY.q4 || \"\";\n }\n\n function resetQuiz(){\n stopSpeaking();\n\n \/\/ clear radios\n document.querySelectorAll('input[name=\"q2\"]').forEach(r => r.checked = false);\n\n \/\/ clear inputs\n [\"q1\",\"q3\",\"q5\"].forEach(id => {\n const el = document.getElementById(id);\n if(el) el.value = \"\";\n });\n\n \/\/ reset dropdown\n const q4 = document.getElementById(\"q4\");\n if(q4) q4.value = \"\";\n\n \/\/ hide results\n const box = document.getElementById(\"resultBox\");\n if(box){ box.style.display = \"none\"; box.innerHTML = \"\"; }\n\n \/\/ timer reset\n resetTimer();\n\n \/\/ hide transcript\n if(transcriptVisible) toggleTranscript();\n }\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>IELTS Listening Overview \u2013 ICTE Robot Overview Test 2 Test 3 Test 4 Reading Speaking Writing IELTS Listening Overview ICTE<\/p>\n","protected":false},"author":1,"featured_media":441,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"colormag_page_layout":"default_layout","footnotes":""},"categories":[25,28,27],"tags":[],"class_list":["post-469","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ielts","category-listening","category-test-1"],"_links":{"self":[{"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/posts\/469","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=469"}],"version-history":[{"count":2,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/posts\/469\/revisions"}],"predecessor-version":[{"id":629,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/posts\/469\/revisions\/629"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/media\/441"}],"wp:attachment":[{"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/media?parent=469"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/categories?post=469"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/tags?post=469"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":469,"date":"2026-01-10T04:50:16","date_gmt":"2026-01-10T04:50:16","guid":{"rendered":"https:\/\/i-cte.org\/robot\/?p=469"},"modified":"2026-01-10T04:53:35","modified_gmt":"2026-01-10T04:53:35","slug":"ielts-listening-overview","status":"publish","type":"post","link":"https:\/\/i-cte.org\/robot\/ielts-listening-overview\/","title":{"rendered":"IELTs – Listening – Overview"},"content":{"rendered":"\n\n\n\n \n \n IELTS Listening Overview \u2013 ICTE Robot<\/title>\n <style>\n * { box-sizing: border-box; }\n\n body{\n font-family: Arial, sans-serif;\n background:#f4f6f8;\n margin:0;\n color:#222;\n line-height:1.55;\n }\n\n \/* \u2705 TOP NAV MENU (GREEN, STICKY, SCROLLABLE) *\/\n .icte-menu{\n width:100%;\n background:#28a745;\n padding:10px 12px;\n text-align:center;\n box-shadow:0 2px 6px rgba(0,0,0,0.12);\n overflow-x:auto;\n white-space:nowrap;\n position:sticky;\n top:0;\n z-index:999;\n }\n .icte-menu a{\n display:inline-block;\n color:#fff;\n text-decoration:none;\n font-weight:900;\n margin:0 8px;\n padding:8px 10px;\n border-radius:10px;\n transition:background .2s ease;\n }\n .icte-menu a:hover{ background:rgba(255,255,255,0.18); }\n .icte-menu a.active{ background:rgba(255,255,255,0.25); }\n\n .page-pad{ padding: 16px; }\n .container{\n max-width:1100px;\n margin:0 auto;\n background:#fff;\n border-radius:14px;\n padding:18px;\n box-shadow:0 8px 20px rgba(0,0,0,0.08);\n }\n\n h1,h2,h3{ margin:0 0 10px; color:#1f7a35; }\n .sub{ margin:0 0 14px; color:#444; }\n\n \/* \u2705 HERO *\/\n .hero{\n display:grid;\n grid-template-columns: 1.2fr 0.8fr;\n gap:14px;\n align-items:stretch;\n margin-bottom:14px;\n }\n .hero-card{\n border:1px solid #e5e7eb;\n border-radius:14px;\n padding:16px;\n background:#fff;\n box-shadow:0 2px 10px rgba(0,0,0,0.05);\n }\n .hero-badge{\n display:inline-block;\n background:#e7f7eb;\n color:#1f7a35;\n border:1px solid #bfe9c9;\n padding:6px 12px;\n border-radius:999px;\n font-weight:900;\n font-size:12px;\n margin-bottom:10px;\n }\n .hero-image{\n border-radius:14px;\n overflow:hidden;\n border:1px solid #e5e7eb;\n background:#f8fafc;\n box-shadow:0 2px 10px rgba(0,0,0,0.05);\n display:flex;\n align-items:center;\n justify-content:center;\n min-height:160px;\n }\n .hero-image img{\n width:100%;\n height:100%;\n object-fit:cover;\n display:block;\n }\n\n \/* \u2705 QUICK LINKS BAR *\/\n .quick{\n margin-top:14px;\n padding:12px;\n border-radius:14px;\n background:#f8fbff;\n border:1px solid #dbeafe;\n display:flex;\n flex-wrap:wrap;\n gap:10px;\n align-items:center;\n justify-content:space-between;\n }\n .quick .left{ font-weight:900; color:#0b5ed7; }\n .quick .links{ display:flex; flex-wrap:wrap; gap:8px; }\n .quick .links a{\n display:inline-block;\n padding:8px 10px;\n border-radius:10px;\n background:#0b5ed7;\n color:#fff;\n text-decoration:none;\n font-weight:900;\n font-size:13px;\n }\n .quick .links a:hover{ opacity:0.92; }\n\n \/* \u2705 STRATEGIES BOX (GREEN LINE STYLE) *\/\n #listening-strategies{ scroll-margin-top: 80px; }\n .strategy-box{\n max-width:1100px;\n margin: 12px auto 14px;\n background:#f4fff6;\n border:2px solid #28a745;\n border-left:8px solid #28a745;\n border-radius:12px;\n padding:14px 16px;\n box-shadow:0 2px 8px rgba(0,0,0,0.06);\n }\n .strategy-box details summary{\n cursor:pointer;\n font-weight:900;\n color:#1f7a35;\n list-style:none;\n outline:none;\n user-select:none;\n }\n .strategy-box details summary::-webkit-details-marker{ display:none; }\n .strategy-box details summary:before{\n content:\"\u25b6 \";\n display:inline-block;\n margin-right:6px;\n transform-origin:center;\n }\n .strategy-box details[open] summary:before{ content:\"\u25bc \"; }\n\n .strategy-actions{\n display:flex;\n gap:10px;\n flex-wrap:wrap;\n margin:10px 0 0;\n }\n\n .btn{\n appearance:none;\n border:0;\n border-radius:10px;\n padding:10px 12px;\n font-weight:900;\n cursor:pointer;\n }\n .btn-green{ background:#28a745; color:#fff; }\n .btn-blue{ background:#007bff; color:#fff; }\n .btn-gray{ background:#e9ecef; color:#333; }\n .btn-red{ background:#dc3545; color:#fff; }\n\n .strategy-list{ margin:10px 0 0; padding-left:18px; }\n .strategy-list li{ margin:8px 0; }\n .strategy-list ul{ margin:6px 0 0; padding-left:18px; }\n\n \/* \u2705 OVERVIEW CARDS *\/\n .section-title{\n display:flex;\n align-items:baseline;\n justify-content:space-between;\n gap:10px;\n margin-top: 6px;\n }\n .muted{ color:#555; font-size:14px; margin:0; }\n\n .cards{\n display:grid;\n grid-template-columns: repeat(3, 1fr);\n gap:14px;\n margin-top:12px;\n }\n @media (max-width: 980px){\n .hero{ grid-template-columns: 1fr; }\n .cards{ grid-template-columns: 1fr; }\n .grid{ grid-template-columns: 1fr !important; }\n }\n\n .card{\n border:1px solid #e5e7eb;\n border-radius:14px;\n padding:14px;\n background:#fff;\n box-shadow:0 2px 10px rgba(0,0,0,0.05);\n display:flex;\n flex-direction:column;\n gap:10px;\n min-height: 170px;\n }\n .card .tag{\n display:inline-block;\n width:max-content;\n font-size:12px;\n font-weight:900;\n padding:5px 10px;\n border-radius:999px;\n border:1px solid #bfe9c9;\n background:#e7f7eb;\n color:#1f7a35;\n }\n .card h3{ margin:0; font-size:18px; color:#0f5132; }\n .card p{ margin:0; color:#444; font-size:14px; }\n .card a{\n text-decoration:none;\n font-weight:900;\n color:#fff;\n background:#28a745;\n padding:10px 12px;\n border-radius:12px;\n display:inline-block;\n width:max-content;\n margin-top:auto;\n }\n .card a:hover{ opacity:0.92; }\n\n \/* \u2705 DIVIDER *\/\n .divider{\n margin:18px 0;\n border:0;\n height:1px;\n background:#e5e7eb;\n }\n\n \/* \u2705 Listening Practice block (same grid style) *\/\n .grid{\n display:grid;\n grid-template-columns: 1.2fr 1fr;\n gap:14px;\n margin-top:12px;\n }\n .panel{\n border:1px solid #e5e7eb;\n border-radius:12px;\n padding:14px;\n background:#fff;\n }\n .panel-title{\n display:flex;\n align-items:center;\n justify-content:space-between;\n gap:10px;\n margin-bottom:10px;\n }\n .pill{\n display:inline-block;\n background:#e7f7eb;\n color:#1f7a35;\n border:1px solid #bfe9c9;\n padding:4px 10px;\n border-radius:999px;\n font-weight:900;\n font-size:12px;\n }\n .toolbar{\n display:flex;\n gap:10px;\n flex-wrap:wrap;\n margin:10px 0 0;\n }\n .timer{\n font-weight:900;\n font-size:14px;\n color:#0f5132;\n background:#d1e7dd;\n border:1px solid #badbcc;\n padding:6px 10px;\n border-radius:10px;\n display:inline-block;\n }\n\n .audio-box{\n background:#fbfbff;\n border:1px solid #e5e7ff;\n border-radius:10px;\n padding:12px;\n }\n\n .q{\n border-top:1px dashed #e5e7eb;\n padding-top:12px;\n margin-top:12px;\n }\n .q:first-child{ border-top:0; padding-top:0; margin-top:0; }\n .q h4{ margin:0 0 8px; color:#0b5ed7; }\n .opt{ margin:6px 0; }\n .inline{\n display:flex;\n gap:10px;\n align-items:center;\n flex-wrap:wrap;\n margin:6px 0;\n }\n input[type=\"text\"], select{\n padding:10px 10px;\n border:1px solid #d1d5db;\n border-radius:10px;\n min-width: 220px;\n font-weight:700;\n }\n .small-note{ font-size:12px; color:#666; margin:8px 0 0; }\n\n #transcriptBox{\n display:none;\n margin-top:12px;\n background:#ffffff;\n border:2px solid #e5e7eb;\n border-radius:12px;\n padding:12px;\n white-space:pre-wrap;\n line-height:1.6;\n font-weight:700;\n color:#0f172a;\n max-height:360px;\n overflow:auto;\n }\n\n .result{\n margin-top:12px;\n padding:12px;\n border-radius:12px;\n border:1px solid #d1e7dd;\n background:#f0fff4;\n display:none;\n }\n .result.bad{\n border-color:#f5c2c7;\n background:#fff5f6;\n }\n .score{ font-weight:900; font-size:16px; margin-bottom:6px; }\n .footer{\n text-align:center;\n color:#777;\n font-size:13px;\n margin-top:18px;\n }\n <\/style>\n<\/head>\n\n<body>\n\n \n <div class=\"icte-menu\">\n <a href=\"https:\/\/i-cte.org\/robot\/ielts-listening-overview\/\">Overview<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/ielts-listening-test-2\/\">Test 2<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/ielts-listening-test-3\/\">Test 3<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/ielts-listening-test-4\/\">Test 4<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/ielts-reading-overview\/\">Reading<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/ielts-speaking-overview\/\">Speaking<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/ielts-writing-overview\/\">Writing<\/a>\n <\/div>\n\n <div class=\"page-pad\">\n <div class=\"container\">\n\n \n <div class=\"hero\">\n <div class=\"hero-card\">\n <div class=\"hero-badge\">IELTS Listening Overview<\/div>\n <h1 style=\"margin:0 0 6px;\">ICTE Robot \u2013 Listening Skills Hub<\/h1>\n <p class=\"sub\" style=\"margin:0;\">\n Practice IELTS Listening Sections 1\u20134. Use strategies first, then play the audio and answer questions.\n <\/p>\n <p style=\"margin:10px 0 0;\">\n Tip: <strong>Read questions first<\/strong> \u2192 predict answer type \u2192 listen for synonyms \u2192 write while listening.\n <\/p>\n <\/div>\n\n <div class=\"hero-image\" aria-label=\"IELTS banner\">\n <img decoding=\"async\" src=\"https:\/\/i-cte.org\/robot\/wp-content\/uploads\/2025\/12\/2.webp\" alt=\"IELTS Practice Banner\">\n <\/div>\n <\/div>\n\n \n <div class=\"quick\">\n <div class=\"left\">Quick access:<\/div>\n <div class=\"links\">\n <a href=\"#ielts-listening-practice\">Practice<\/a>\n <a href=\"#listening-strategies\">Strategies<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/ielts-listening-section-1\/\">Section 1<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/ielts-listening-section-2\/\">Section 2<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/ielts-listening-section-3\/\">Section 3<\/a>\n <a href=\"https:\/\/i-cte.org\/robot\/ielts-listening-section-4\/\">Section 4<\/a>\n <\/div>\n <\/div>\n\n \n <div class=\"strategy-box\" id=\"listening-strategies\">\n <h2 style=\"margin:0 0 8px;\">IELTS Listening Strategies (Quick & Practical)<\/h2>\n\n <details open>\n <summary>Open\/Close strategies<\/summary>\n\n <div class=\"strategy-actions\">\n <button class=\"btn btn-green\" type=\"button\" onclick=\"readStrategies()\">\ud83d\udd0a Read strategies aloud<\/button>\n <button class=\"btn btn-gray\" type=\"button\" onclick=\"stopSpeaking()\">\u23f9 Stop<\/button>\n <\/div>\n\n <div id=\"strategiesText\">\n <ol class=\"strategy-list\">\n <li><strong>Read questions first (10\u201320 seconds)<\/strong>\n <ul>\n <li>Underline keywords (names, numbers, days, places).<\/li>\n <li>Predict the answer type (number? noun? place?).<\/li>\n <\/ul>\n <\/li>\n <li><strong>Follow the order<\/strong>\n <ul>\n <li>Answers usually appear in the same order as the audio.<\/li>\n <\/ul>\n <\/li>\n <li><strong>Listen for synonyms<\/strong>\n <ul>\n <li>Audio often paraphrases the question wording.<\/li>\n <\/ul>\n <\/li>\n <li><strong>Write while listening<\/strong>\n <ul>\n <li>Don\u2019t wait\u2014write quickly, then check spelling.<\/li>\n <\/ul>\n <\/li>\n <li><strong>Watch for corrections<\/strong>\n <ul>\n <li>Speakers may change details: \u201cThursday\u2026 sorry, Friday\u201d.<\/li>\n <\/ul>\n <\/li>\n <li><strong>Check word limits<\/strong>\n <ul>\n <li>ONE WORD ONLY \/ NO MORE THAN TWO WORDS \/ etc.<\/li>\n <\/ul>\n <\/li>\n <\/ol>\n <\/div>\n <\/details>\n <\/div>\n\n \n <hr class=\"divider\">\n\n <h2 id=\"ielts-listening-practice\" style=\"margin-bottom:6px;\">IELTS Listening Practice (Template)<\/h2>\n <p class=\"sub\" style=\"margin-top:0;\">\n Use the timer, click <strong>Play Audio<\/strong> (robot reads transcript), answer questions, then click <strong>Check Answers<\/strong>.\n <\/p>\n\n <div class=\"grid\">\n\n \n <section class=\"panel\" aria-label=\"Listening audio\">\n <div class=\"panel-title\">\n <h3 style=\"margin:0;\">Listening Audio<\/h3>\n <span class=\"pill\">TTS Audio<\/span>\n <\/div>\n\n <div class=\"inline\" style=\"justify-content:space-between;\">\n <div class=\"timer\" id=\"timer\">Time: 00:00<\/div>\n <div class=\"toolbar\">\n <button class=\"btn btn-blue\" type=\"button\" onclick=\"startTimer()\">\u25b6 Start<\/button>\n <button class=\"btn btn-gray\" type=\"button\" onclick=\"pauseTimer()\">\u23f8 Pause<\/button>\n <button class=\"btn btn-gray\" type=\"button\" onclick=\"resetTimer()\">\u21ba Reset<\/button>\n <\/div>\n <\/div>\n\n <div class=\"audio-box\" style=\"margin-top:10px;\">\n <div class=\"inline\">\n <label for=\"voiceSelect\">Choose voice<\/label>\n <select id=\"voiceSelect\" aria-label=\"Choose a voice\">\n <option value=\"\">Loading voices\u2026<\/option>\n <\/select>\n <\/div>\n\n <div class=\"toolbar\">\n <button class=\"btn btn-green\" type=\"button\" onclick=\"playAudio()\">\ud83d\udd0a Play Audio<\/button>\n <button class=\"btn btn-red\" type=\"button\" onclick=\"stopSpeaking()\">\u23f9 Stop Audio<\/button>\n <button class=\"btn btn-gray\" type=\"button\" onclick=\"toggleTranscript()\">\ud83d\udcdd Show\/Hide Transcript<\/button>\n <\/div>\n\n <div class=\"toolbar\" style=\"margin-top:10px;\">\n <button class=\"btn btn-blue\" type=\"button\" onclick=\"readInstructions()\">\ud83d\udd0a Read Instructions<\/button>\n <button class=\"btn btn-blue\" type=\"button\" onclick=\"readQuestions()\">\ud83d\udd0a Read Questions<\/button>\n <\/div>\n\n <div id=\"transcriptBox\"><\/div>\n <p class=\"small-note\">Teacher tip: keep transcript hidden during the first attempt.<\/p>\n <\/div>\n <\/section>\n\n \n <section class=\"panel\" aria-label=\"Questions\">\n <div class=\"panel-title\">\n <h3 style=\"margin:0;\">Questions<\/h3>\n <span class=\"pill\">Auto-check<\/span>\n <\/div>\n\n \n <div class=\"q\">\n <h4>Instructions<\/h4>\n <p><strong>Complete the notes.<\/strong> Write <strong>ONE WORD ONLY<\/strong> for each answer.<\/p>\n <\/div>\n\n <div class=\"q\">\n <h4>Q1 (ONE WORD)<\/h4>\n <p>The excursion is a ________ cruise.<\/p>\n <div class=\"inline\">\n <input type=\"text\" id=\"q1\" placeholder=\"ONE WORD\" \/>\n <span class=\"pill\">ONE WORD<\/span>\n <\/div>\n <\/div>\n\n <div class=\"q\">\n <h4>Q2 (Multiple choice)<\/h4>\n <p>How long is the trip?<\/p>\n <div class=\"opt\"><label><input type=\"radio\" name=\"q2\" value=\"A\"> A. 30 minutes<\/label><\/div>\n <div class=\"opt\"><label><input type=\"radio\" name=\"q2\" value=\"B\"> B. 90 minutes<\/label><\/div>\n <div class=\"opt\"><label><input type=\"radio\" name=\"q2\" value=\"C\"> C. 3 hours<\/label><\/div>\n <\/div>\n\n <div class=\"q\">\n <h4>Q3 (ONE WORD)<\/h4>\n <p>The bike rental shop is called ________.<\/p>\n <div class=\"inline\">\n <input type=\"text\" id=\"q3\" placeholder=\"ONE WORD\" \/>\n <span class=\"pill\">ONE WORD<\/span>\n <\/div>\n <\/div>\n\n <div class=\"q\">\n <h4>Q4 (Dropdown)<\/h4>\n <p>The trail is described as:<\/p>\n <select id=\"q4\">\n <option value=\"\">Choose\u2026<\/option>\n <option value=\"easy\">easy<\/option>\n <option value=\"challenging\">challenging<\/option>\n <option value=\"flat\">flat<\/option>\n <\/select>\n <\/div>\n\n <div class=\"q\">\n <h4>Q5 (ONE WORD)<\/h4>\n <p>They should take a ________ kit.<\/p>\n <div class=\"inline\">\n <input type=\"text\" id=\"q5\" placeholder=\"ONE WORD\" \/>\n <span class=\"pill\">ONE WORD<\/span>\n <\/div>\n <\/div>\n\n <div class=\"toolbar\" style=\"margin-top:14px;\">\n <button class=\"btn btn-green\" type=\"button\" onclick=\"checkAnswers()\">\u2705 Check Answers<\/button>\n <button class=\"btn btn-gray\" type=\"button\" onclick=\"showAnswers()\">\ud83d\udc40 Show Answers<\/button>\n <button class=\"btn btn-gray\" type=\"button\" onclick=\"resetQuiz()\">\ud83e\uddf9 Reset<\/button>\n <\/div>\n\n <div class=\"result\" id=\"resultBox\" aria-live=\"polite\"><\/div>\n <\/section>\n <\/div>\n\n \n <div class=\"section-title\">\n <h2 style=\"margin:0;\">Choose a Listening Section<\/h2>\n <p class=\"muted\">Click a card to open that activity.<\/p>\n <\/div>\n\n <div class=\"cards\">\n <div class=\"card\">\n <span class=\"tag\">Listening<\/span>\n <h3>Section 1<\/h3>\n <p>Conversation: form \/ note completion, names, numbers, details.<\/p>\n <a href=\"https:\/\/i-cte.org\/robot\/ielts-listening-section-1\/\">Open Section 1<\/a>\n <\/div>\n\n <div class=\"card\">\n <span class=\"tag\">Listening<\/span>\n <h3>Section 2<\/h3>\n <p>Monologue: orientation \/ tour \/ instructions with key facts.<\/p>\n <a href=\"https:\/\/i-cte.org\/robot\/ielts-listening-section-2\/\">Open Section 2<\/a>\n <\/div>\n\n <div class=\"card\">\n <span class=\"tag\">Listening<\/span>\n <h3>Section 3<\/h3>\n <p>Academic discussion: multiple speakers, research planning, details.<\/p>\n <a href=\"https:\/\/i-cte.org\/robot\/ielts-listening-section-3\/\">Open Section 3<\/a>\n <\/div>\n\n <div class=\"card\">\n <span class=\"tag\">Listening<\/span>\n <h3>Section 4<\/h3>\n <p>Academic lecture: note completion, key terms, main ideas.<\/p>\n <a href=\"https:\/\/i-cte.org\/robot\/ielts-listening-section-4\/\">Open Section 4<\/a>\n <\/div>\n\n <div class=\"card\">\n <span class=\"tag\">Speaking<\/span>\n <h3>Speaking<\/h3>\n <p>Practice describing pictures and answering questions.<\/p>\n <a href=\"https:\/\/i-cte.org\/robot\/ielts-speaking-overview\/\">Open Speaking<\/a>\n <\/div>\n\n <div class=\"card\">\n <span class=\"tag\">Writing<\/span>\n <h3>Writing<\/h3>\n <p>Practice writing tasks with structure and clear grammar.<\/p>\n <a href=\"https:\/\/i-cte.org\/robot\/ielts-writing-overview\/\">Open Writing<\/a>\n <\/div>\n <\/div>\n\n <div class=\"footer\">\n © 2026 ICTE Robot. All rights reserved.\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n \/*********************************************************\n * 1) TRANSCRIPT (PASTE YOUR REAL LISTENING SCRIPT HERE)\n *********************************************************\/\n const TRANSCRIPT_TEXT = `\nSection (Template Transcript)\nSpeaker: Hello. This is a sample transcript for IELTS Listening practice.\nYou can replace this entire transcript with your real Section script.\n `.trim();\n\n const INSTRUCTIONS_TEXT =\n \"Complete the notes. Write one word only for each answer.\";\n\n const QUESTIONS_TEXT =\n \"Question 1. The excursion is a blank cruise. \" +\n \"Question 2. How long is the trip? \" +\n \"Question 3. The bike rental shop is called blank. \" +\n \"Question 4. The trail is described as blank. \" +\n \"Question 5. They should take a blank kit.\";\n\n \/*********************************************************\n * 2) ANSWER KEY (EDIT ANSWERS HERE)\n * - radio\/dropdown: put exact option value\n * - text: you can provide multiple accepted variants\n *********************************************************\/\n const ANSWER_KEY = {\n q1: [\"steamship\",\"steam\"],\n q2: \"B\",\n q3: [\"ratchesons\",\"ratcheson\"],\n q4: \"challenging\",\n q5: [\"repair\"]\n };\n\n \/*********************************************************\n * SPEECH (TTS) \u2014 voice picker + chunked speaking\n *********************************************************\/\n const voiceSelect = document.getElementById(\"voiceSelect\");\n let voices = [];\n let ttsQueue = [];\n let ttsRunning = false;\n let transcriptVisible = false;\n\n function loadVoices(){\n if(!(\"speechSynthesis\" in window)){\n voiceSelect.innerHTML = `<option value=\"\">Speech not supported<\/option>`;\n return;\n }\n voices = window.speechSynthesis.getVoices() || [];\n if(!voices.length){\n voiceSelect.innerHTML = `<option value=\"\">No voices available<\/option>`;\n return;\n }\n voiceSelect.innerHTML = \"\";\n voices.forEach((v, idx) => {\n const opt = document.createElement(\"option\");\n opt.value = String(idx);\n opt.textContent = `${v.name} (${v.lang})`;\n voiceSelect.appendChild(opt);\n });\n const firstEN = voices.findIndex(v => (v.lang||\"\").toLowerCase().startsWith(\"en\"));\n voiceSelect.value = String(firstEN >= 0 ? firstEN : 0);\n }\n\n function getVoice(){\n const idx = parseInt(voiceSelect.value || \"0\", 10);\n return voices[idx] || null;\n }\n\n if(\"speechSynthesis\" in window){\n loadVoices();\n window.speechSynthesis.onvoiceschanged = loadVoices;\n }\n\n function stopSpeaking(){\n if(\"speechSynthesis\" in window) window.speechSynthesis.cancel();\n ttsQueue = [];\n ttsRunning = false;\n }\n\n function buildQueue(text){\n const lines = (text||\"\")\n .replace(\/\\r\/g,\"\")\n .split(\"\\n\")\n .map(s=>s.trim())\n .filter(Boolean);\n\n const items = [];\n for(const line of lines){\n const chunks = line.split(\/(?<=[.!?])\\s+\/).map(s=>s.trim()).filter(Boolean);\n for(const c of chunks) items.push(c);\n items.push(\"__PAUSE__\");\n }\n return items;\n }\n\n function speakNext(){\n if(!ttsRunning) return;\n if(!ttsQueue.length){ ttsRunning=false; return; }\n\n const item = ttsQueue.shift();\n if(item === \"__PAUSE__\"){ setTimeout(speakNext, 260); return; }\n\n const u = new SpeechSynthesisUtterance(item);\n const v = getVoice();\n if(v) u.voice = v;\n u.rate = 0.95;\n u.pitch = 1.0;\n u.onend = () => setTimeout(speakNext, 120);\n u.onerror = () => setTimeout(speakNext, 120);\n window.speechSynthesis.speak(u);\n }\n\n function playAudio(){\n stopSpeaking();\n if(!(\"speechSynthesis\" in window)){\n alert(\"Speech synthesis is not supported in this browser.\");\n return;\n }\n ttsQueue = buildQueue(TRANSCRIPT_TEXT);\n ttsRunning = true;\n speakNext();\n }\n\n function speakOne(text){\n stopSpeaking();\n if(!(\"speechSynthesis\" in window)){\n alert(\"Speech synthesis is not supported in this browser.\");\n return;\n }\n const u = new SpeechSynthesisUtterance(text);\n const v = getVoice();\n if(v) u.voice = v;\n u.rate = 0.95;\n u.pitch = 1.0;\n window.speechSynthesis.speak(u);\n }\n\n function readStrategies(){\n const el = document.getElementById(\"strategiesText\");\n if(!el) return;\n speakOne(el.innerText.trim());\n }\n\n function readInstructions(){ speakOne(INSTRUCTIONS_TEXT); }\n function readQuestions(){ speakOne(QUESTIONS_TEXT); }\n\n function toggleTranscript(){\n const box = document.getElementById(\"transcriptBox\");\n transcriptVisible = !transcriptVisible;\n if(transcriptVisible){\n stopSpeaking();\n box.textContent = TRANSCRIPT_TEXT;\n box.style.display = \"block\";\n } else {\n box.textContent = \"\";\n box.style.display = \"none\";\n }\n }\n\n \/*********************************************************\n * TIMER\n *********************************************************\/\n let t = 0;\n let timerId = null;\n\n function formatTime(sec){\n const m = String(Math.floor(sec \/ 60)).padStart(2, \"0\");\n const s = String(sec % 60).padStart(2, \"0\");\n return `${m}:${s}`;\n }\n function renderTimer(){\n const el = document.getElementById(\"timer\");\n if (el) el.textContent = `Time: ${formatTime(t)}`;\n }\n function startTimer(){\n if (timerId) return;\n timerId = setInterval(() => { t++; renderTimer(); }, 1000);\n }\n function pauseTimer(){\n if (timerId){ clearInterval(timerId); timerId = null; }\n }\n function resetTimer(){\n pauseTimer();\n t = 0;\n renderTimer();\n }\n renderTimer();\n\n \/*********************************************************\n * QUIZ CHECKER\n *********************************************************\/\n function getRadioValue(name){\n const checked = document.querySelector(`input[name=\"${name}\"]:checked`);\n return checked ? checked.value : \"\";\n }\n\n function normalizeText(s){\n return (s || \"\")\n .toLowerCase()\n .trim()\n .replace(\/[^\\w\\s]\/g,\"\")\n .replace(\/\\s+\/g,\" \")\n .replace(\/^the\\s+\/,\"\");\n }\n\n function asArray(x){ return Array.isArray(x) ? x : [x]; }\n\n function checkAnswers(){\n stopSpeaking();\n\n const user = {\n q1: document.getElementById(\"q1\")?.value || \"\",\n q2: getRadioValue(\"q2\"),\n q3: document.getElementById(\"q3\")?.value || \"\",\n q4: document.getElementById(\"q4\")?.value || \"\",\n q5: document.getElementById(\"q5\")?.value || \"\"\n };\n\n let correct = 0;\n const total = Object.keys(ANSWER_KEY).length;\n const feedback = [];\n\n \/\/ Q1 (text)\n {\n const accepted = asArray(ANSWER_KEY.q1).map(normalizeText);\n const u = normalizeText(user.q1);\n if(u && accepted.includes(u)){ correct++; feedback.push(\"\u2705 Q1: Correct\"); }\n else feedback.push(`\u274c Q1: Your answer = ${user.q1 || \"(blank)\"} | Correct = ${asArray(ANSWER_KEY.q1)[0]}`);\n }\n\n \/\/ Q2 (radio)\n {\n if(user.q2 === ANSWER_KEY.q2){ correct++; feedback.push(\"\u2705 Q2: Correct\"); }\n else feedback.push(`\u274c Q2: Your answer = ${user.q2 || \"(blank)\"} | Correct = ${ANSWER_KEY.q2}`);\n }\n\n \/\/ Q3 (text)\n {\n const accepted = asArray(ANSWER_KEY.q3).map(normalizeText);\n const u = normalizeText(user.q3);\n if(u && accepted.includes(u)){ correct++; feedback.push(\"\u2705 Q3: Correct\"); }\n else feedback.push(`\u274c Q3: Your answer = ${user.q3 || \"(blank)\"} | Correct = ${asArray(ANSWER_KEY.q3)[0]}`);\n }\n\n \/\/ Q4 (dropdown)\n {\n if(user.q4 === ANSWER_KEY.q4){ correct++; feedback.push(\"\u2705 Q4: Correct\"); }\n else feedback.push(`\u274c Q4: Your answer = ${user.q4 || \"(blank)\"} | Correct = ${ANSWER_KEY.q4}`);\n }\n\n \/\/ Q5 (text)\n {\n const accepted = asArray(ANSWER_KEY.q5).map(normalizeText);\n const u = normalizeText(user.q5);\n if(u && accepted.includes(u)){ correct++; feedback.push(\"\u2705 Q5: Correct\"); }\n else feedback.push(`\u274c Q5: Your answer = ${user.q5 || \"(blank)\"} | Correct = ${asArray(ANSWER_KEY.q5)[0]}`);\n }\n\n const box = document.getElementById(\"resultBox\");\n if(!box) return;\n\n const percent = Math.round((correct \/ total) * 100);\n box.style.display = \"block\";\n box.className = \"result\" + (percent >= 70 ? \"\" : \" bad\");\n box.innerHTML = `\n <div class=\"score\">Score: ${correct}\/${total} (${percent}%)<\/div>\n <div style=\"font-size:14px;color:#333;line-height:1.6;\">${feedback.join(\"<br>\")}<\/div>\n <p class=\"small-note\"><strong>Tip:<\/strong> Check spelling + word limits carefully.<\/p>\n `;\n }\n\n function showAnswers(){\n \/\/ Fill text inputs with first accepted answer\n const q1 = document.getElementById(\"q1\");\n const q3 = document.getElementById(\"q3\");\n const q5 = document.getElementById(\"q5\");\n if(q1) q1.value = asArray(ANSWER_KEY.q1)[0] || \"\";\n if(q3) q3.value = asArray(ANSWER_KEY.q3)[0] || \"\";\n if(q5) q5.value = asArray(ANSWER_KEY.q5)[0] || \"\";\n\n \/\/ Select radio\n document.querySelectorAll('input[name=\"q2\"]').forEach(r => { r.checked = (r.value === ANSWER_KEY.q2); });\n\n \/\/ Select dropdown\n const q4 = document.getElementById(\"q4\");\n if(q4) q4.value = ANSWER_KEY.q4 || \"\";\n }\n\n function resetQuiz(){\n stopSpeaking();\n\n \/\/ clear radios\n document.querySelectorAll('input[name=\"q2\"]').forEach(r => r.checked = false);\n\n \/\/ clear inputs\n [\"q1\",\"q3\",\"q5\"].forEach(id => {\n const el = document.getElementById(id);\n if(el) el.value = \"\";\n });\n\n \/\/ reset dropdown\n const q4 = document.getElementById(\"q4\");\n if(q4) q4.value = \"\";\n\n \/\/ hide results\n const box = document.getElementById(\"resultBox\");\n if(box){ box.style.display = \"none\"; box.innerHTML = \"\"; }\n\n \/\/ timer reset\n resetTimer();\n\n \/\/ hide transcript\n if(transcriptVisible) toggleTranscript();\n }\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>IELTS Listening Overview \u2013 ICTE Robot Overview Test 2 Test 3 Test 4 Reading Speaking Writing IELTS Listening Overview ICTE<\/p>\n","protected":false},"author":1,"featured_media":441,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"colormag_page_layout":"default_layout","footnotes":""},"categories":[25,28,27],"tags":[],"class_list":["post-469","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ielts","category-listening","category-test-1"],"_links":{"self":[{"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/posts\/469","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=469"}],"version-history":[{"count":2,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/posts\/469\/revisions"}],"predecessor-version":[{"id":629,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/posts\/469\/revisions\/629"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/media\/441"}],"wp:attachment":[{"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/media?parent=469"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/categories?post=469"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/i-cte.org\/robot\/wp-json\/wp\/v2\/tags?post=469"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}