{"id":11539,"date":"2026-08-22T16:30:30","date_gmt":"2026-08-22T13:30:30","guid":{"rendered":"https:\/\/lingualand.gr\/new\/exercises\/b-junior-listening-01-b-junior-listening-how-old-are-they\/"},"modified":"2026-08-22T17:02:51","modified_gmt":"2026-08-22T14:02:51","slug":"b-junior-listening-01-b-junior-listening-how-old-are-they","status":"publish","type":"page","link":"https:\/\/lingualand.gr\/new\/exercises\/b-junior-listening-01-b-junior-listening-how-old-are-they\/","title":{"rendered":"B Junior Listening \u2013 How Old Are They?"},"content":{"rendered":"<!-- lingualand-listening-access:bj:lesson:start -->\n<div id=\"accessGate-lesson-bj\" class=\"lingualand-listening-access-gate\" style=\"min-height:320px;display:grid;place-items:center;padding:20px;background:#eef3f8;color:#172033;font-family:Arial,sans-serif\"><form id=\"accessForm-lesson-bj\" style=\"width:min(420px,100%);background:#fff;border-radius:14px;padding:24px;box-shadow:0 4px 16px #243a8f22\"><h4 style=\"margin:0 0 10px;color:#243a8f;font-size:1.45rem\">B Junior Listening Access<\/h4><p style=\"margin:0 0 16px\">Enter your access key to open the exercises.<\/p><input id=\"accessKey-lesson-bj\" type=\"password\" autocomplete=\"off\" style=\"width:100%;padding:12px;border:1px solid #aab3c2;border-radius:9px;font-size:1rem\" aria-label=\"Access key\"><button type=\"submit\" style=\"margin-top:14px;width:100%;padding:12px;border:0;border-radius:9px;background:#243a8f;color:white;font-weight:bold;cursor:pointer\">Open exercises<\/button><div id=\"accessMessage-lesson-bj\" style=\"min-height:22px;margin-top:12px;color:#b91c1c;font-weight:bold\" aria-live=\"polite\"><\/div><\/form><\/div><div id=\"exerciseApp-lesson-bj\" hidden><!-- lingualand-listening-exercise:bj:1:start -->\n<div class=\"lingualand-bj-listening-exercise-page\" style=\"max-width:1100px;margin:20px auto;\"><iframe title=\"B Junior Listening \u2013 How Old Are They?\" srcdoc=\"&lt;!DOCTYPE html&gt;\n&lt;html lang=&quot;en&quot;&gt;\n&lt;head&gt;\n  &lt;meta charset=&quot;UTF-8&quot;&gt;\n  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;\n  &lt;title&gt;B Junior Listening \u2013 How Old Are They?&lt;\/title&gt;\n  &lt;style&gt;\n    :root {\n      --navy: #23395d;\n      --blue: #3e78b2;\n      --pale: #eef6ff;\n      --gold: #f5b942;\n      --green: #27864a;\n      --red: #c43d3d;\n      --ink: #243044;\n    }\n\n    * { box-sizing: border-box; }\n\n    body {\n      margin: 0;\n      min-height: 100vh;\n      font-family: Arial, Helvetica, sans-serif;\n      color: var(--ink);\n      background: linear-gradient(145deg, #eaf5ff, #fff8e7);\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      padding: 24px;\n    }\n\n    .card {\n      width: min(760px, 100%);\n      background: #fff;\n      border-radius: 24px;\n      box-shadow: 0 16px 45px rgba(35, 57, 93, 0.15);\n      overflow: hidden;\n    }\n\n    header {\n      background: var(--navy);\n      color: #fff;\n      padding: 24px 28px;\n      text-align: center;\n    }\n\n    .brand {\n      margin: 0 0 6px;\n      color: var(--gold);\n      font-weight: 800;\n      letter-spacing: 1.5px;\n      text-transform: uppercase;\n      font-size: 0.85rem;\n    }\n\n    h1 { margin: 0; font-size: clamp(1.55rem, 4vw, 2.2rem); }\n    header p { margin: 8px 0 0; opacity: 0.9; }\n\n    main { padding: 28px; }\n\n    .instructions {\n      background: var(--pale);\n      border-left: 5px solid var(--blue);\n      padding: 15px 18px;\n      border-radius: 10px;\n      margin-bottom: 20px;\n      line-height: 1.5;\n    }\n\n    .player {\n      display: flex;\n      flex-wrap: wrap;\n      gap: 10px;\n      align-items: center;\n      margin-bottom: 24px;\n    }\n\n    button {\n      border: 0;\n      border-radius: 11px;\n      padding: 12px 18px;\n      font-size: 1rem;\n      font-weight: 700;\n      cursor: pointer;\n      transition: transform 0.15s, opacity 0.15s;\n    }\n\n    button:hover { transform: translateY(-1px); }\n    button:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }\n    .listen { color: #fff; background: var(--blue); }\n    .stop { color: var(--navy); background: #e8edf4; }\n    .check { color: #fff; background: var(--green); }\n    .reset { color: var(--navy); background: #e8edf4; }\n    #status { font-weight: 700; color: var(--blue); }\n\n    .questions { display: grid; gap: 12px; }\n\n    .question {\n      display: grid;\n      grid-template-columns: 42px 1fr minmax(110px, 160px) 28px;\n      gap: 12px;\n      align-items: center;\n      padding: 14px 16px;\n      border: 2px solid #e8edf4;\n      border-radius: 14px;\n      transition: border-color 0.2s, background 0.2s;\n    }\n\n    .number {\n      width: 36px;\n      height: 36px;\n      border-radius: 50%;\n      display: grid;\n      place-items: center;\n      background: var(--gold);\n      color: var(--navy);\n      font-weight: 800;\n    }\n\n    .name { font-size: 1.08rem; font-weight: 700; }\n\n    select {\n      width: 100%;\n      padding: 10px;\n      border: 2px solid #cfd8e6;\n      border-radius: 9px;\n      background: #fff;\n      color: var(--ink);\n      font-size: 1rem;\n    }\n\n    .feedback { font-size: 1.25rem; font-weight: 900; text-align: center; }\n    .question.correct { border-color: var(--green); background: #effbf3; }\n    .question.wrong { border-color: var(--red); background: #fff2f2; }\n    .question.correct .feedback { color: var(--green); }\n    .question.wrong .feedback { color: var(--red); }\n\n    .actions {\n      display: flex;\n      gap: 10px;\n      justify-content: center;\n      margin-top: 24px;\n    }\n\n    #result {\n      min-height: 34px;\n      margin: 18px 0 0;\n      text-align: center;\n      font-size: 1.15rem;\n      font-weight: 800;\n    }\n\n    footer {\n      color: #718096;\n      text-align: center;\n      font-size: 0.82rem;\n      padding: 0 20px 20px;\n    }\n\n    @media (max-width: 540px) {\n      main { padding: 20px; }\n      .question { grid-template-columns: 40px 1fr 26px; }\n      .question select { grid-column: 2 \/ 3; }\n      .feedback { grid-column: 3; grid-row: 1 \/ 3; }\n      .actions { flex-direction: column; }\n      .actions button { width: 100%; }\n    }\n  &lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n  &lt;section class=&quot;card&quot;&gt;\n    &lt;header&gt;\n      &lt;p class=&quot;brand&quot;&gt;Lingualand \u00b7 Est. 1972&lt;\/p&gt;\n      &lt;h1&gt;How Old Are They?&lt;\/h1&gt;\n      &lt;p&gt;B Junior \u00b7 Listening Exercise 1&lt;\/p&gt;\n    &lt;\/header&gt;\n\n    &lt;main&gt;\n      &lt;div class=&quot;instructions&quot;&gt;\n        &lt;strong&gt;Listen carefully.&lt;\/strong&gt; Choose the correct age for each child.\n        You can listen more than once.\n      &lt;\/div&gt;\n\n      &lt;div class=&quot;player&quot;&gt;\n        &lt;button class=&quot;listen&quot; id=&quot;listenBtn&quot; type=&quot;button&quot;&gt;\u25b6 Listen&lt;\/button&gt;\n        &lt;button class=&quot;stop&quot; id=&quot;stopBtn&quot; type=&quot;button&quot; disabled&gt;\u25a0 Stop&lt;\/button&gt;\n        &lt;span id=&quot;status&quot; aria-live=&quot;polite&quot;&gt;Ready to listen&lt;\/span&gt;\n      &lt;\/div&gt;\n\n      &lt;div class=&quot;questions&quot; id=&quot;questions&quot;&gt;\n        &lt;div class=&quot;question&quot; data-answer=&quot;8&quot;&gt;\n          &lt;span class=&quot;number&quot;&gt;1&lt;\/span&gt;&lt;span class=&quot;name&quot;&gt;Lucy&lt;\/span&gt;\n          &lt;select aria-label=&quot;Lucy's age&quot;&gt;\n            &lt;option value=&quot;&quot;&gt;Choose...&lt;\/option&gt;&lt;option&gt;6&lt;\/option&gt;&lt;option&gt;7&lt;\/option&gt;&lt;option&gt;8&lt;\/option&gt;&lt;option&gt;9&lt;\/option&gt;&lt;option&gt;10&lt;\/option&gt;&lt;option&gt;11&lt;\/option&gt;\n          &lt;\/select&gt;&lt;span class=&quot;feedback&quot; aria-live=&quot;polite&quot;&gt;&lt;\/span&gt;\n        &lt;\/div&gt;\n        &lt;div class=&quot;question&quot; data-answer=&quot;9&quot;&gt;\n          &lt;span class=&quot;number&quot;&gt;2&lt;\/span&gt;&lt;span class=&quot;name&quot;&gt;Ben&lt;\/span&gt;\n          &lt;select aria-label=&quot;Ben's age&quot;&gt;\n            &lt;option value=&quot;&quot;&gt;Choose...&lt;\/option&gt;&lt;option&gt;6&lt;\/option&gt;&lt;option&gt;7&lt;\/option&gt;&lt;option&gt;8&lt;\/option&gt;&lt;option&gt;9&lt;\/option&gt;&lt;option&gt;10&lt;\/option&gt;&lt;option&gt;11&lt;\/option&gt;\n          &lt;\/select&gt;&lt;span class=&quot;feedback&quot; aria-live=&quot;polite&quot;&gt;&lt;\/span&gt;\n        &lt;\/div&gt;\n        &lt;div class=&quot;question&quot; data-answer=&quot;10&quot;&gt;\n          &lt;span class=&quot;number&quot;&gt;3&lt;\/span&gt;&lt;span class=&quot;name&quot;&gt;Sophie&lt;\/span&gt;\n          &lt;select aria-label=&quot;Sophie's age&quot;&gt;\n            &lt;option value=&quot;&quot;&gt;Choose...&lt;\/option&gt;&lt;option&gt;6&lt;\/option&gt;&lt;option&gt;7&lt;\/option&gt;&lt;option&gt;8&lt;\/option&gt;&lt;option&gt;9&lt;\/option&gt;&lt;option&gt;10&lt;\/option&gt;&lt;option&gt;11&lt;\/option&gt;\n          &lt;\/select&gt;&lt;span class=&quot;feedback&quot; aria-live=&quot;polite&quot;&gt;&lt;\/span&gt;\n        &lt;\/div&gt;\n        &lt;div class=&quot;question&quot; data-answer=&quot;7&quot;&gt;\n          &lt;span class=&quot;number&quot;&gt;4&lt;\/span&gt;&lt;span class=&quot;name&quot;&gt;Alex&lt;\/span&gt;\n          &lt;select aria-label=&quot;Alex's age&quot;&gt;\n            &lt;option value=&quot;&quot;&gt;Choose...&lt;\/option&gt;&lt;option&gt;6&lt;\/option&gt;&lt;option&gt;7&lt;\/option&gt;&lt;option&gt;8&lt;\/option&gt;&lt;option&gt;9&lt;\/option&gt;&lt;option&gt;10&lt;\/option&gt;&lt;option&gt;11&lt;\/option&gt;\n          &lt;\/select&gt;&lt;span class=&quot;feedback&quot; aria-live=&quot;polite&quot;&gt;&lt;\/span&gt;\n        &lt;\/div&gt;\n        &lt;div class=&quot;question&quot; data-answer=&quot;11&quot;&gt;\n          &lt;span class=&quot;number&quot;&gt;5&lt;\/span&gt;&lt;span class=&quot;name&quot;&gt;Emma&lt;\/span&gt;\n          &lt;select aria-label=&quot;Emma's age&quot;&gt;\n            &lt;option value=&quot;&quot;&gt;Choose...&lt;\/option&gt;&lt;option&gt;6&lt;\/option&gt;&lt;option&gt;7&lt;\/option&gt;&lt;option&gt;8&lt;\/option&gt;&lt;option&gt;9&lt;\/option&gt;&lt;option&gt;10&lt;\/option&gt;&lt;option&gt;11&lt;\/option&gt;\n          &lt;\/select&gt;&lt;span class=&quot;feedback&quot; aria-live=&quot;polite&quot;&gt;&lt;\/span&gt;\n        &lt;\/div&gt;\n      &lt;\/div&gt;\n\n      &lt;div class=&quot;actions&quot;&gt;\n        &lt;button class=&quot;check&quot; id=&quot;checkBtn&quot; type=&quot;button&quot;&gt;Check answers&lt;\/button&gt;\n        &lt;button class=&quot;reset&quot; id=&quot;resetBtn&quot; type=&quot;button&quot;&gt;Try again&lt;\/button&gt;\n      &lt;\/div&gt;\n      &lt;p id=&quot;result&quot; aria-live=&quot;polite&quot;&gt;&lt;\/p&gt;\n    &lt;\/main&gt;\n\n    &lt;footer&gt;Listening text is hidden during the activity.&lt;\/footer&gt;\n  &lt;\/section&gt;\n\n  &lt;script&gt;\n    const listeningText = [\n      &quot;Hi! I'm Lucy. I'm eight years old. My sister is ten, and we go to the same school.&quot;,\n      &quot;Hello! My name's Ben. My birthday is today, and now I'm nine! My best friend is eight.&quot;,\n      &quot;Hi! I'm Sophie. I'm ten years old. I have a little brother. He's only six.&quot;,\n      &quot;Hello! I'm Alex. I'm seven, but my cousin Tom is eleven. We often play football together.&quot;,\n      &quot;Hi! My name's Emma. I'm eleven years old. My sister and I have the same birthday, but she's thirteen.&quot;\n    ].join(&quot; ... &quot;);\n\n    const listenBtn = document.getElementById(&quot;listenBtn&quot;);\n    const stopBtn = document.getElementById(&quot;stopBtn&quot;);\n    const status = document.getElementById(&quot;status&quot;);\n    const result = document.getElementById(&quot;result&quot;);\n    const rows = [...document.querySelectorAll(&quot;.question&quot;)];\n\n    function speakListening() {\n      if (!(&quot;speechSynthesis&quot; in window)) {\n        status.textContent = &quot;Audio is not supported in this browser.&quot;;\n        return;\n      }\n      speechSynthesis.cancel();\n      const utterance = new SpeechSynthesisUtterance(listeningText);\n      utterance.lang = &quot;en-GB&quot;;\n      utterance.rate = 0.82;\n      utterance.pitch = 1;\n      const englishVoice = speechSynthesis.getVoices().find(voice =&gt; voice.lang.startsWith(&quot;en-GB&quot;))\n        || speechSynthesis.getVoices().find(voice =&gt; voice.lang.startsWith(&quot;en&quot;));\n      if (englishVoice) utterance.voice = englishVoice;\n      utterance.onstart = () =&gt; {\n        status.textContent = &quot;Listening...&quot;;\n        listenBtn.disabled = true;\n        stopBtn.disabled = false;\n      };\n      utterance.onend = utterance.onerror = () =&gt; {\n        status.textContent = &quot;Ready to listen again&quot;;\n        listenBtn.disabled = false;\n        stopBtn.disabled = true;\n      };\n      speechSynthesis.speak(utterance);\n    }\n\n    listenBtn.addEventListener(&quot;click&quot;, speakListening);\n    stopBtn.addEventListener(&quot;click&quot;, () =&gt; {\n      speechSynthesis.cancel();\n      status.textContent = &quot;Stopped&quot;;\n      listenBtn.disabled = false;\n      stopBtn.disabled = true;\n    });\n\n    document.getElementById(&quot;checkBtn&quot;).addEventListener(&quot;click&quot;, () =&gt; {\n      let score = 0;\n      let unanswered = 0;\n      rows.forEach(row =&gt; {\n        const select = row.querySelector(&quot;select&quot;);\n        const feedback = row.querySelector(&quot;.feedback&quot;);\n        row.classList.remove(&quot;correct&quot;, &quot;wrong&quot;);\n        if (!select.value) {\n          unanswered++;\n          feedback.textContent = &quot;?&quot;;\n          return;\n        }\n        const correct = select.value === row.dataset.answer;\n        row.classList.add(correct ? &quot;correct&quot; : &quot;wrong&quot;);\n        feedback.textContent = correct ? &quot;\u2713&quot; : &quot;\u2717&quot;;\n        if (correct) score++;\n      });\n\n      if (unanswered) {\n        result.textContent = `Please answer all the questions. (${unanswered} left)`;\n        result.style.color = &quot;#c27a00&quot;;\n      } else if (score === rows.length) {\n        result.textContent = &quot;Excellent! 5 \/ 5 \u2b50&quot;;\n        result.style.color = &quot;#27864a&quot;;\n      } else {\n        result.textContent = `Your score: ${score} \/ 5. Listen again and try once more!`;\n        result.style.color = &quot;#23395d&quot;;\n      }\n    });\n\n    document.getElementById(&quot;resetBtn&quot;).addEventListener(&quot;click&quot;, () =&gt; {\n      speechSynthesis.cancel();\n      rows.forEach(row =&gt; {\n        row.querySelector(&quot;select&quot;).value = &quot;&quot;;\n        row.querySelector(&quot;.feedback&quot;).textContent = &quot;&quot;;\n        row.classList.remove(&quot;correct&quot;, &quot;wrong&quot;);\n      });\n      result.textContent = &quot;&quot;;\n      status.textContent = &quot;Ready to listen&quot;;\n      listenBtn.disabled = false;\n      stopBtn.disabled = true;\n    });\n\n    window.addEventListener(&quot;beforeunload&quot;, () =&gt; speechSynthesis.cancel());\n  &lt;\/script&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n\" style=\"width:100%;min-height:1850px;border:0;border-radius:8px;background:#f8fafc;display:block;\" loading=\"eager\" allow=\"autoplay\"><\/iframe><\/div>\n<!-- lingualand-listening-exercise:bj:1:end --><\/div><script>(function(){const expectedHash=\"54c6e6001970489b11bc97cf0986b7b9f1684d10c293be936a975466a86f94b1\";const storageKey=\"lingualandListeningAccess:bj\";const form=document.getElementById(\"accessForm-lesson-bj\"),keyInput=document.getElementById(\"accessKey-lesson-bj\"),msg=document.getElementById(\"accessMessage-lesson-bj\"),gate=document.getElementById(\"accessGate-lesson-bj\"),app=document.getElementById(\"exerciseApp-lesson-bj\");async function sha256(text){const bytes=new TextEncoder().encode(text);const digest=await crypto.subtle.digest(\"SHA-256\",bytes);return Array.from(new Uint8Array(digest)).map(b=>b.toString(16).padStart(2,\"0\")).join(\"\");}function deny(text){msg.textContent=text;app.hidden=true;gate.style.display=\"grid\";}function allow(){try{sessionStorage.setItem(storageKey,\"1\");}catch(e){} gate.style.display=\"none\";app.hidden=false;keyInput.value=\"\";}try{if(sessionStorage.getItem(storageKey)===\"1\") allow();}catch(e){}form.addEventListener(\"submit\",async function(e){e.preventDefault();const entered=keyInput.value.trim();if(!entered){deny(\"Please enter the access key.\");return;}try{const hash=await sha256(entered);if(hash===expectedHash){allow();}else{deny(\"Incorrect access key.\");}}catch(err){deny(\"Access check is unavailable in this browser.\");}});})();<\/script>\n<!-- lingualand-listening-access:bj:lesson:end -->","protected":false},"excerpt":{"rendered":"<p>B Junior Listening Access Enter your access key to open the exercises. Open exercises<\/p>\n","protected":false},"author":7,"featured_media":0,"parent":9619,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"ngg_post_thumbnail":0,"footnotes":""},"class_list":["post-11539","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/lingualand.gr\/new\/wp-json\/wp\/v2\/pages\/11539","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lingualand.gr\/new\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/lingualand.gr\/new\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/lingualand.gr\/new\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/lingualand.gr\/new\/wp-json\/wp\/v2\/comments?post=11539"}],"version-history":[{"count":1,"href":"https:\/\/lingualand.gr\/new\/wp-json\/wp\/v2\/pages\/11539\/revisions"}],"predecessor-version":[{"id":11570,"href":"https:\/\/lingualand.gr\/new\/wp-json\/wp\/v2\/pages\/11539\/revisions\/11570"}],"up":[{"embeddable":true,"href":"https:\/\/lingualand.gr\/new\/wp-json\/wp\/v2\/pages\/9619"}],"wp:attachment":[{"href":"https:\/\/lingualand.gr\/new\/wp-json\/wp\/v2\/media?parent=11539"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}