{"id":1723,"date":"2026-08-19T03:51:06","date_gmt":"2026-08-19T03:51:06","guid":{"rendered":"https:\/\/cuentoskecuentan.com\/?page_id=1723"},"modified":"2026-08-19T04:07:45","modified_gmt":"2026-08-19T04:07:45","slug":"my-english-key-1a1-lesson-4","status":"publish","type":"page","link":"https:\/\/cuentoskecuentan.com\/?page_id=1723","title":{"rendered":"My English Key 1A1: Lesson 4"},"content":{"rendered":"\n<!--\nMY ENGLISH KEY \u00b7 STARTER 1\nLESSON 4 \u00b7 ONE OR MANY? \u00b7 SPEAKING ADVENTURE\nIdentidad: Cuentos ke Cuentan + KEY by Mara Nieto\nPegar completo en un bloque \u201cHTML personalizado\u201d de WordPress.\nSin librer\u00edas externas.\n-->\n\n<div id=\"mek-l4-ckc\">\n<style>\n#mek-l4-ckc{\n  --purple:#793D7A;\n  --purple-dark:#572A59;\n  --purple-mid:#A77AAA;\n  --lilac:#F7F0F8;\n  --lilac-2:#EEE2F1;\n  --yellow:#F6C744;\n  --yellow-soft:#FFF8DA;\n  --ink:#352D36;\n  --gray:#6E6670;\n  --green:#4B936C;\n  --green-soft:#E9F6EF;\n  --red:#B75968;\n  --red-soft:#FFF0F2;\n  --blue:#4D78A5;\n  --blue-soft:#EDF4FA;\n  --white:#FFFFFF;\n  max-width:1040px;\n  margin:24px auto;\n  font-family:Lato,Arial,sans-serif;\n  color:var(--ink);\n  line-height:1.45;\n}\n#mek-l4-ckc *{box-sizing:border-box}\n#mek-l4-ckc button,#mek-l4-ckc input,#mek-l4-ckc select{font:inherit}\n#mek-l4-ckc button{touch-action:manipulation}\n\n#mek-l4-ckc .book{\n  background:#fff;\n  border:3px solid var(--purple);\n  border-radius:32px;\n  overflow:hidden;\n  box-shadow:0 16px 38px rgba(84,43,87,.16);\n}\n#mek-l4-ckc .top{\n  position:relative;\n  padding:27px 29px 23px;\n  background:\n    radial-gradient(circle at 92% 18%,rgba(246,199,68,.24) 0 55px,transparent 56px),\n    radial-gradient(circle at 82% 88%,rgba(121,61,122,.08) 0 80px,transparent 81px),\n    linear-gradient(135deg,#fff 0%,#fff 67%,#fbf6fc 100%);\n  border-bottom:5px solid var(--yellow);\n  overflow:hidden;\n}\n#mek-l4-ckc .top:after{\n  content:\"\u2661  \u2726  &#x1f511;\";\n  position:absolute;\n  right:25px;\n  bottom:12px;\n  color:var(--purple);\n  font-size:20px;\n  letter-spacing:8px;\n  opacity:.72;\n}\n#mek-l4-ckc .brandrow{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap}\n#mek-l4-ckc .ckc{font-weight:900;color:var(--purple);font-size:20px}\n#mek-l4-ckc .ckc .ke{display:inline-block;background:var(--yellow);color:var(--purple-dark);padding:1px 6px;border-radius:8px;transform:rotate(-3deg)}\n#mek-l4-ckc .keybrand{font-weight:900;color:var(--purple);font-size:18px}\n#mek-l4-ckc .keybrand b{color:var(--yellow)}\n#mek-l4-ckc h2{margin:14px 0 4px;color:var(--purple);font-size:clamp(32px,5vw,50px);line-height:1.04}\n#mek-l4-ckc .subtitle{margin:0;color:var(--gray);font-size:18px;max-width:800px}\n#mek-l4-ckc .identity-note{\n  margin-top:15px;display:inline-flex;gap:8px;align-items:center;background:var(--yellow-soft);\n  border:1.5px solid #efd46f;border-radius:999px;padding:8px 14px;color:var(--purple-dark);font-weight:900;\n}\n\n\/* PATH *\/\n#mek-l4-ckc .pathwrap{padding:18px 20px;background:var(--lilac);border-bottom:1px solid #e7dbe9;overflow-x:auto}\n#mek-l4-ckc .path{display:grid;grid-template-columns:repeat(7,minmax(96px,1fr));gap:6px;position:relative;min-width:720px}\n#mek-l4-ckc .path:before{content:\"\";position:absolute;left:6%;right:6%;top:21px;border-top:3px dashed var(--purple-mid);z-index:0}\n#mek-l4-ckc .step{position:relative;z-index:1;text-align:center}\n#mek-l4-ckc .dot{\n  width:45px;height:45px;border-radius:50%;display:grid;place-items:center;margin:0 auto 6px;\n  background:#fff;border:3px solid var(--purple-mid);color:var(--purple);font-weight:900\n}\n#mek-l4-ckc .step.active .dot,#mek-l4-ckc .step.done .dot{background:var(--purple);color:#fff;border-color:var(--purple)}\n#mek-l4-ckc .step.done .dot{font-size:0}\n#mek-l4-ckc .step.done .dot:after{content:\"\u2713\";font-size:20px}\n#mek-l4-ckc .step.locked{opacity:.42}\n#mek-l4-ckc .step small{font-weight:900;color:var(--purple-dark);font-size:12px}\n\n#mek-l4-ckc .status{\n  display:flex;gap:10px;justify-content:flex-end;align-items:center;padding:12px 22px;\n  background:#fff;border-bottom:1px solid #eee4ef;flex-wrap:wrap\n}\n#mek-l4-ckc .pill{padding:7px 12px;border-radius:999px;background:var(--purple);color:#fff;font-weight:900}\n#mek-l4-ckc .pill.yellow{background:var(--yellow);color:var(--purple-dark)}\n#mek-l4-ckc .content{padding:25px}\n#mek-l4-ckc .screen{display:none}\n#mek-l4-ckc .screen.active{display:block}\n\n\/* CHARACTER *\/\n#mek-l4-ckc .guide{display:grid;grid-template-columns:92px 1fr;gap:16px;align-items:center;margin-bottom:18px}\n#mek-l4-ckc .avatar{\n  width:84px;height:84px;border-radius:50%;display:grid;place-items:center;font-size:45px;\n  background:var(--yellow-soft);border:4px solid var(--yellow);box-shadow:0 6px 14px rgba(90,44,92,.10)\n}\n#mek-l4-ckc .avatar.purple{background:var(--lilac-2);border-color:var(--purple)}\n#mek-l4-ckc .avatar.gray{background:#F0EFF1;border-color:#9B929D}\n#mek-l4-ckc .speech{\n  position:relative;background:#fff;border:2px solid var(--purple);border-radius:20px;padding:14px 16px;\n  color:var(--purple-dark);font-weight:800\n}\n#mek-l4-ckc .speech:before{\n  content:\"\";position:absolute;left:-13px;top:30px;width:22px;height:22px;background:#fff;\n  border-left:2px solid var(--purple);border-bottom:2px solid var(--purple);transform:rotate(45deg)\n}\n\n#mek-l4-ckc .card{border:2px solid #E7DBE9;border-radius:23px;padding:20px;margin:14px 0;background:#fff}\n#mek-l4-ckc .card.yellow{background:var(--yellow-soft);border-color:#EFD873}\n#mek-l4-ckc .card.lilac{background:var(--lilac);border-color:#DCC9DF}\n#mek-l4-ckc .card.blue{background:var(--blue-soft);border-color:#cadbe9}\n#mek-l4-ckc .card h3{margin:0 0 9px;color:var(--purple);font-size:26px}\n#mek-l4-ckc .muted{color:var(--gray);margin-top:0}\n\n#mek-l4-ckc .storypaper{\n  background:#fff;border:2px dashed var(--purple-mid);border-radius:20px;padding:19px;\n  font-size:18px;position:relative\n}\n#mek-l4-ckc .storypaper:after{content:\"\u2661\";position:absolute;right:16px;bottom:8px;color:var(--yellow);font-size:30px}\n#mek-l4-ckc .storypaper strong{color:var(--purple)}\n#mek-l4-ckc .valuecorner{\n  margin-top:14px;display:grid;grid-template-columns:55px 1fr;gap:12px;align-items:center;\n  background:var(--yellow-soft);border-left:6px solid var(--yellow);border-radius:16px;padding:13px 15px\n}\n#mek-l4-ckc .valueicon{font-size:35px;text-align:center}\n#mek-l4-ckc .valuecorner b{color:var(--purple-dark)}\n\n#mek-l4-ckc .actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:11px}\n#mek-l4-ckc .btn{\n  border:0;border-radius:14px;padding:10px 14px;font-weight:900;cursor:pointer;\n  transition:transform .16s ease,opacity .16s ease\n}\n#mek-l4-ckc .btn:hover{transform:translateY(-1px)}\n#mek-l4-ckc .btn:disabled{opacity:.43;cursor:not-allowed;transform:none}\n#mek-l4-ckc .primary{background:var(--purple);color:#fff}\n#mek-l4-ckc .yellowbtn{background:var(--yellow);color:var(--purple-dark)}\n#mek-l4-ckc .soft{background:var(--lilac-2);color:var(--purple-dark)}\n#mek-l4-ckc .green{background:var(--green);color:#fff}\n#mek-l4-ckc .red{background:var(--red);color:#fff}\n#mek-l4-ckc .bluebtn{background:var(--blue);color:#fff}\n\n#mek-l4-ckc .questiongrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}\n#mek-l4-ckc .question{border:2px solid #E7DBE9;border-radius:18px;padding:15px;background:#fff}\n#mek-l4-ckc .question b{display:block;color:var(--purple-dark);font-size:18px;margin-bottom:9px}\n#mek-l4-ckc .choices{display:flex;gap:8px;flex-wrap:wrap}\n#mek-l4-ckc .choice{\n  border:2px solid var(--purple-mid);background:#fff;color:var(--purple-dark);\n  border-radius:13px;padding:9px 12px;font-weight:900;cursor:pointer\n}\n#mek-l4-ckc .choice.correct{background:var(--green-soft);border-color:var(--green);color:#2E6C4E}\n#mek-l4-ckc .choice.wrong{background:var(--red-soft);border-color:var(--red);color:#8B3E49}\n\n\/* ONE \/ MANY *\/\n#mek-l4-ckc .objectgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}\n#mek-l4-ckc .objectcard{\n  text-align:center;background:#fff;border:2px solid #E6D9E8;border-radius:19px;padding:15px;position:relative;overflow:hidden\n}\n#mek-l4-ckc .objectcard:before{\n  content:\"\";position:absolute;width:55px;height:55px;border-radius:50%;background:var(--yellow-soft);left:-18px;top:-18px\n}\n#mek-l4-ckc .objecticon{font-size:45px;line-height:1.1;min-height:56px}\n#mek-l4-ckc .objectword{font-size:20px;font-weight:900;color:var(--purple-dark);margin:7px 0}\n#mek-l4-ckc .arrow{font-weight:900;color:var(--purple-mid);font-size:20px}\n#mek-l4-ckc .objectcard.done{border-color:var(--green);background:#FBFFFD}\n\n#mek-l4-ckc .rulebox{\n  display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center;\n  padding:16px;border-radius:18px;background:#fff;border:2px solid #E5D8E7;margin-top:12px\n}\n#mek-l4-ckc .rulecol{text-align:center}\n#mek-l4-ckc .rulecol strong{display:block;color:var(--purple);font-size:22px}\n#mek-l4-ckc .plus{font-size:28px;color:var(--yellow);font-weight:900}\n\n\/* THIS THAT THESE THOSE *\/\n#mek-l4-ckc .demoGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}\n#mek-l4-ckc .demoCard{border:2px solid #E5D8E7;border-radius:19px;padding:16px;background:#fff}\n#mek-l4-ckc .demoCard .tag{\n  display:inline-block;border-radius:999px;padding:5px 10px;background:var(--yellow-soft);\n  border:1px solid #EFD56F;color:var(--purple-dark);font-weight:900;font-size:13px\n}\n#mek-l4-ckc .visual{\n  min-height:115px;border-radius:16px;background:linear-gradient(135deg,var(--lilac),#fff);\n  display:flex;align-items:center;justify-content:center;gap:14px;margin:9px 0;position:relative\n}\n#mek-l4-ckc .visual .hand{font-size:30px}\n#mek-l4-ckc .visual .thing{font-size:44px}\n#mek-l4-ckc .visual.far .thing{font-size:31px;transform:translateX(34px);opacity:.83}\n#mek-l4-ckc .visual.far .hand{transform:translateX(-26px)}\n#mek-l4-ckc .model{\n  margin-top:11px;border-left:6px solid var(--yellow);background:var(--lilac);\n  border-radius:12px;padding:12px 14px;color:var(--purple-dark);font-weight:900;font-size:19px\n}\n\n\/* TRANSFORM *\/\n#mek-l4-ckc .transformgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}\n#mek-l4-ckc .transformcard{border:2px solid #E5D8E7;border-radius:18px;padding:15px;background:#fff}\n#mek-l4-ckc .fromline{padding:9px 11px;border-radius:12px;background:var(--blue-soft);font-weight:900;color:#365f85}\n#mek-l4-ckc .toline{margin-top:9px;padding:9px 11px;border-radius:12px;background:var(--lilac);font-weight:900;color:var(--purple-dark)}\n#mek-l4-ckc .transformcard.done{background:var(--green-soft);border-color:var(--green)}\n\n\/* BUILDER \/ BAG *\/\n#mek-l4-ckc .builder{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px;margin-top:14px}\n#mek-l4-ckc label{font-weight:900;color:var(--purple-dark)}\n#mek-l4-ckc select,#mek-l4-ckc input{\n  width:100%;margin-top:6px;border:2px solid #D9C7DC;border-radius:12px;padding:11px 12px;background:#fff\n}\n#mek-l4-ckc select:focus,#mek-l4-ckc input:focus{outline:3px solid rgba(246,199,68,.34);border-color:var(--purple)}\n\n#mek-l4-ckc .bag{\n  border:2px dashed var(--purple);border-radius:22px;padding:18px;background:#fff;position:relative;overflow:hidden\n}\n#mek-l4-ckc .bag:before{\n  content:\"&#x1f392;\";position:absolute;right:14px;bottom:-4px;font-size:76px;opacity:.12\n}\n#mek-l4-ckc .sentenceStack{display:grid;gap:10px;margin-top:12px}\n#mek-l4-ckc .sentenceChip{\n  border:2px solid #E5D8E7;border-radius:15px;padding:11px 13px;background:#fff;color:var(--purple-dark);font-weight:900\n}\n#mek-l4-ckc .sentenceChip.active{border-color:var(--yellow);background:var(--yellow-soft)}\n#mek-l4-ckc .bagmissions{display:grid;gap:14px;margin-top:14px}\n#mek-l4-ckc .bagmission{\n  border:2px solid #E5D8E7;border-radius:20px;padding:16px;background:#fff\n}\n#mek-l4-ckc .bagmission.done{border-color:var(--green);background:var(--green-soft)}\n#mek-l4-ckc .bagmission h4{margin:0 0 8px;color:var(--purple);font-size:20px}\n#mek-l4-ckc .bagmission .minirow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}\n#mek-l4-ckc .progressbig{\n  margin-top:14px;padding:13px 15px;border-radius:16px;background:var(--yellow-soft);\n  border:2px solid #EFD873;color:var(--purple-dark);font-weight:900;text-align:center\n}\n\n\n#mek-l4-ckc .dialogue{\n  border:2px solid #E5D8E7;border-radius:20px;background:#fff;padding:16px\n}\n#mek-l4-ckc .line{display:grid;grid-template-columns:78px 1fr;gap:8px;padding:8px 0;border-bottom:1px dashed #E1D3E3}\n#mek-l4-ckc .line:last-child{border-bottom:0}\n#mek-l4-ckc .who{font-weight:900;color:var(--purple)}\n#mek-l4-ckc .line.leo .who{color:var(--blue)}\n\n#mek-l4-ckc .rec{margin-top:14px;padding:15px;border:2px dashed var(--purple);border-radius:18px;background:#fff}\n#mek-l4-ckc .recstatus{min-height:24px;margin-top:8px;font-weight:900;color:var(--purple-dark)}\n#mek-l4-ckc audio{width:100%;margin-top:10px}\n#mek-l4-ckc .unlock{margin-top:14px;padding:12px 14px;border-radius:14px;background:var(--lilac);color:var(--purple-dark);font-weight:800}\n#mek-l4-ckc .feedback{margin-top:12px;padding:12px 14px;border-radius:14px;font-weight:800;display:none}\n#mek-l4-ckc .feedback.show{display:block}\n#mek-l4-ckc .feedback.ok{background:var(--green-soft);color:#2E6C4F}\n#mek-l4-ckc .feedback.try{background:var(--yellow-soft);color:#74590E}\n\n\/* FINAL *\/\n#mek-l4-ckc .missiongrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}\n#mek-l4-ckc .mission{border:2px solid #E5D8E7;border-radius:18px;padding:15px;background:#fff}\n#mek-l4-ckc .mission .mnum{\n  width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--yellow);\n  color:var(--purple-dark);font-weight:900;margin-bottom:8px\n}\n#mek-l4-ckc .mission strong{color:var(--purple-dark);font-size:18px}\n#mek-l4-ckc .checkrow{display:grid;gap:9px;margin-top:13px}\n#mek-l4-ckc .selfcheck{\n  display:flex;gap:10px;align-items:center;border:2px solid #E5D8E7;border-radius:14px;padding:10px 12px;\n  background:#fff;cursor:pointer;font-weight:800\n}\n#mek-l4-ckc .selfcheck input{width:auto;margin:0;transform:scale(1.25)}\n#mek-l4-ckc .finish{\n  display:none;text-align:center;margin-top:18px;padding:24px;background:linear-gradient(180deg,#FFF9DE,#fff);\n  border:2px solid var(--yellow);border-radius:23px\n}\n#mek-l4-ckc .finish.show{display:block}\n#mek-l4-ckc .finish .big{font-size:52px;line-height:1}\n#mek-l4-ckc .badge{\n  display:inline-block;margin-top:8px;padding:8px 15px;border-radius:999px;background:var(--purple);\n  color:#fff;font-weight:900\n}\n#mek-l4-ckc .footerbrand{text-align:center;padding:16px;background:var(--purple);color:#fff;font-weight:900}\n#mek-l4-ckc .footerbrand span{color:var(--yellow)}\n\n@media(max-width:820px){\n  #mek-l4-ckc .questiongrid,#mek-l4-ckc .objectgrid,#mek-l4-ckc .demoGrid,#mek-l4-ckc .transformgrid,\n  #mek-l4-ckc .builder,#mek-l4-ckc .missiongrid{grid-template-columns:1fr}\n  #mek-l4-ckc .rulebox{grid-template-columns:1fr}\n  #mek-l4-ckc .guide{grid-template-columns:70px 1fr}\n  #mek-l4-ckc .avatar{width:66px;height:66px;font-size:35px}\n  #mek-l4-ckc .content{padding:16px}\n  #mek-l4-ckc .top{padding:22px 18px}\n}\n<\/style>\n\n<div class=\"book\">\n  <header class=\"top\">\n    <div class=\"brandrow\">\n      <div class=\"ckc\">Cuentos <span class=\"ke\">ke<\/span> Cuentan \u2661<\/div>\n      <div class=\"keybrand\">My English <b>Key<\/b> \u00b7 Starter 1<\/div>\n    <\/div>\n    <h2>Lesson 4 \u00b7 One or Many?<\/h2>\n    <p class=\"subtitle\">A progressive speaking adventure with <b>singular and plural nouns<\/b> and the demonstratives <b>this, that, these, those<\/b>.<\/p>\n    <div class=\"identity-note\">&#x1f511; See the difference \u00b7 build the sentence \u00b7 say it aloud<\/div>\n  <\/header>\n\n  <div class=\"pathwrap\">\n    <div class=\"path\">\n      <div class=\"step active\" data-step=\"1\"><div class=\"dot\">1<\/div><small>Story<\/small><\/div>\n      <div class=\"step locked\" data-step=\"2\"><div class=\"dot\">2<\/div><small>One \/ Many<\/small><\/div>\n      <div class=\"step locked\" data-step=\"3\"><div class=\"dot\">3<\/div><small>These \/ Those<\/small><\/div>\n      <div class=\"step locked\" data-step=\"4\"><div class=\"dot\">4<\/div><small>Transform<\/small><\/div>\n      <div class=\"step locked\" data-step=\"5\"><div class=\"dot\">5<\/div><small>Look &#038; Say<\/small><\/div>\n      <div class=\"step locked\" data-step=\"6\"><div class=\"dot\">6<\/div><small>School Bag<\/small><\/div>\n      <div class=\"step locked\" data-step=\"7\"><div class=\"dot\">7<\/div><small>Speak!<\/small><\/div>\n    <\/div>\n  <\/div>\n\n  <div class=\"status\">\n    <div class=\"pill yellow\">&#x2b50; <span id=\"l4pts\">0<\/span> points<\/div>\n    <div class=\"pill\">&#x1f511; Step <span id=\"l4level\">1<\/span>\/7<\/div>\n  <\/div>\n\n  <main class=\"content\">\n\n    <!-- STEP 1 -->\n    <section class=\"screen active\" data-screen=\"1\">\n      <div class=\"guide\">\n        <div class=\"avatar gray\">&#x1f431;<\/div>\n        <div class=\"speech\"><strong>Misu says:<\/strong> \u201cOops! I found one pencil\u2026 and then MANY pencils. Can you help Keyla and Leo put everything in order?\u201d<\/div>\n      <\/div>\n\n      <div class=\"card lilac\">\n        <h3>1. Misu and the school things<\/h3>\n        <div class=\"storypaper\">\n          Keyla is getting ready for class.\n          She holds one pencil and says, \u201c<strong>This is a pencil<\/strong>.\u201d\n          Misu touches a box and many pencils roll out.\n          Leo laughs and says, \u201c<strong>These are pencils<\/strong>.\u201d\n          Across the room, Keyla sees one book.\n          \u201c<strong>That is a book<\/strong>,\u201d she says.\n          Leo points to a shelf with many books:\n          \u201c<strong>Those are books<\/strong>.\u201d\n          Together, they put the school things back in their place.\n        <\/div>\n\n        <div class=\"actions\">\n          <button class=\"btn yellowbtn listen\" data-text=\"Keyla is getting ready for class. She holds one pencil and says, This is a pencil. Misu touches a box and many pencils roll out. Leo laughs and says, These are pencils. Across the room, Keyla sees one book. That is a book, she says. Leo points to a shelf with many books. Those are books. Together, they put the school things back in their place.\">&#x1f50a; Listen to the story<\/button>\n          <button class=\"btn primary\" id=\"storyHeard4\">&#x1f442; I listened<\/button>\n        <\/div>\n\n        <div class=\"valuecorner\">\n          <div class=\"valueicon\">&#x1f31f;<\/div>\n          <div><b>Value corner \u00b7 Responsibility<\/b><br>We can take care of the things God gives us and keep our learning space in order.<\/div>\n        <\/div>\n      <\/div>\n\n      <div class=\"card\">\n        <h3>Story check<\/h3>\n        <p class=\"muted\">Choose the correct answer.<\/p>\n        <div class=\"questiongrid\">\n          <div class=\"question story-q4\" data-ok=\"0\">\n            <b>1. Keyla holds ONE\u2026<\/b>\n            <div class=\"choices\"><button class=\"choice\" data-correct=\"1\">pencil<\/button><button class=\"choice\">pencils<\/button><\/div>\n          <\/div>\n\n          <div class=\"question story-q4\" data-ok=\"0\">\n            <b>2. Many pencils are NEAR them. We say\u2026<\/b>\n            <div class=\"choices\"><button class=\"choice\" data-correct=\"1\">These are pencils.<\/button><button class=\"choice\">That is a pencil.<\/button><\/div>\n          <\/div>\n\n          <div class=\"question story-q4\" data-ok=\"0\">\n            <b>3. One book is FAR. We say\u2026<\/b>\n            <div class=\"choices\"><button class=\"choice\" data-correct=\"1\">That is a book.<\/button><button class=\"choice\">These are books.<\/button><\/div>\n          <\/div>\n\n          <div class=\"question story-q4\" data-ok=\"0\">\n            <b>4. Many books are FAR. We say\u2026<\/b>\n            <div class=\"choices\"><button class=\"choice\" data-correct=\"1\">Those are books.<\/button><button class=\"choice\">This is a book.<\/button><\/div>\n          <\/div>\n        <\/div>\n\n        <div class=\"unlock\" id=\"unlockStory4\">&#x1f512; Listen and answer all 4 questions.<\/div>\n        <div class=\"actions\"><button class=\"btn primary next\" data-next=\"2\" id=\"nextStory4\" disabled>One or many \u2192<\/button><\/div>\n      <\/div>\n    <\/section>\n\n    <!-- STEP 2 -->\n    <section class=\"screen\" data-screen=\"2\">\n      <div class=\"guide\">\n        <div class=\"avatar purple\">&#x1f467;&#x1f3fb;<\/div>\n        <div class=\"speech\"><strong>Keyla says:<\/strong> \u201cOne thing has a singular name. More than one usually adds <em>-s<\/em>. Listen and say both forms.\u201d<\/div>\n      <\/div>\n\n      <div class=\"card yellow\">\n        <h3>2. One or many?<\/h3>\n        <p class=\"muted\">Listen and repeat the singular and plural form.<\/p>\n\n        <div class=\"objectgrid\">\n          <div class=\"objectcard\" data-odone=\"0\"><div class=\"objecticon\">&#x270f;&#xfe0f; <span class=\"arrow\">\u2192<\/span> &#x270f;&#xfe0f;&#x270f;&#xfe0f;<\/div><div class=\"objectword\">pencil \u2192 pencils<\/div><div class=\"actions\"><button class=\"btn yellowbtn listen\" data-text=\"pencil, pencils\">&#x1f50a;<\/button><button class=\"btn primary object-said\">&#x1f3a4; Say both<\/button><\/div><\/div>\n          <div class=\"objectcard\" data-odone=\"0\"><div class=\"objecticon\">&#x1f4d8; <span class=\"arrow\">\u2192<\/span> &#x1f4d8;&#x1f4d8;<\/div><div class=\"objectword\">book \u2192 books<\/div><div class=\"actions\"><button class=\"btn yellowbtn listen\" data-text=\"book, books\">&#x1f50a;<\/button><button class=\"btn primary object-said\">&#x1f3a4; Say both<\/button><\/div><\/div>\n          <div class=\"objectcard\" data-odone=\"0\"><div class=\"objecticon\">&#x1f58a;&#xfe0f; <span class=\"arrow\">\u2192<\/span> &#x1f58a;&#xfe0f;&#x1f58a;&#xfe0f;<\/div><div class=\"objectword\">pen \u2192 pens<\/div><div class=\"actions\"><button class=\"btn yellowbtn listen\" data-text=\"pen, pens\">&#x1f50a;<\/button><button class=\"btn primary object-said\">&#x1f3a4; Say both<\/button><\/div><\/div>\n          <div class=\"objectcard\" data-odone=\"0\"><div class=\"objecticon\">&#x1f392; <span class=\"arrow\">\u2192<\/span> &#x1f392;&#x1f392;<\/div><div class=\"objectword\">backpack \u2192 backpacks<\/div><div class=\"actions\"><button class=\"btn yellowbtn listen\" data-text=\"backpack, backpacks\">&#x1f50a;<\/button><button class=\"btn primary object-said\">&#x1f3a4; Say both<\/button><\/div><\/div>\n          <div class=\"objectcard\" data-odone=\"0\"><div class=\"objecticon\">&#x1fa91; <span class=\"arrow\">\u2192<\/span> &#x1fa91;&#x1fa91;<\/div><div class=\"objectword\">chair \u2192 chairs<\/div><div class=\"actions\"><button class=\"btn yellowbtn listen\" data-text=\"chair, chairs\">&#x1f50a;<\/button><button class=\"btn primary object-said\">&#x1f3a4; Say both<\/button><\/div><\/div>\n          <div class=\"objectcard\" data-odone=\"0\"><div class=\"objecticon\">&#x1f5c3;&#xfe0f; <span class=\"arrow\">\u2192<\/span> &#x1f5c3;&#xfe0f;&#x1f5c3;&#xfe0f;<\/div><div class=\"objectword\">desk \u2192 desks<\/div><div class=\"actions\"><button class=\"btn yellowbtn listen\" data-text=\"desk, desks\">&#x1f50a;<\/button><button class=\"btn primary object-said\">&#x1f3a4; Say both<\/button><\/div><\/div>\n        <\/div>\n\n        <div class=\"rulebox\">\n          <div class=\"rulecol\"><strong>ONE<\/strong>book<br>pencil<br>chair<\/div>\n          <div class=\"plus\">+ s \u2192<\/div>\n          <div class=\"rulecol\"><strong>MANY<\/strong>books<br>pencils<br>chairs<\/div>\n        <\/div>\n\n        <div class=\"unlock\" id=\"unlockObjects4\">&#x1f512; Say all 6 singular\/plural pairs.<\/div>\n        <div class=\"actions\"><button class=\"btn soft next\" data-next=\"1\">\u2190 Story<\/button><button class=\"btn primary next\" data-next=\"3\" id=\"nextObjects4\" disabled>These \/ Those \u2192<\/button><\/div>\n      <\/div>\n    <\/section>\n\n    <!-- STEP 3 -->\n    <section class=\"screen\" data-screen=\"3\">\n      <div class=\"guide\">\n        <div class=\"avatar\">&#x1f466;&#x1f3fb;<\/div>\n        <div class=\"speech\"><strong>Leo says:<\/strong> \u201cNow combine NUMBER and DISTANCE: one or many, near or far.\u201d<\/div>\n      <\/div>\n\n      <div class=\"card\">\n        <h3>3. This, That, These or Those?<\/h3>\n        <p class=\"muted\">Choose the correct demonstrative, then say the whole sentence.<\/p>\n\n        <div class=\"demoGrid\">\n          <div class=\"demoCard demo-q4\" data-answer=\"this\" data-sentence=\"This is a pencil.\" data-done=\"0\">\n            <span class=\"tag\">ONE + NEAR<\/span>\n            <div class=\"visual\"><span class=\"hand\">&#x1f932;<\/span><span class=\"thing\">&#x270f;&#xfe0f;<\/span><\/div>\n            <div class=\"choices\"><button class=\"choice\" data-val=\"this\">This<\/button><button class=\"choice\" data-val=\"these\">These<\/button><\/div>\n            <div class=\"model\">Choose first.<\/div>\n            <div class=\"actions\"><button class=\"btn yellowbtn demo-listen\" disabled>&#x1f50a; Listen<\/button><button class=\"btn primary demo-said\" disabled>&#x1f3a4; Say it<\/button><\/div>\n          <\/div>\n\n          <div class=\"demoCard demo-q4\" data-answer=\"these\" data-sentence=\"These are pencils.\" data-done=\"0\">\n            <span class=\"tag\">MANY + NEAR<\/span>\n            <div class=\"visual\"><span class=\"hand\">&#x1f932;<\/span><span class=\"thing\">&#x270f;&#xfe0f;&#x270f;&#xfe0f;<\/span><\/div>\n            <div class=\"choices\"><button class=\"choice\" data-val=\"this\">This<\/button><button class=\"choice\" data-val=\"these\">These<\/button><\/div>\n            <div class=\"model\">Choose first.<\/div>\n            <div class=\"actions\"><button class=\"btn yellowbtn demo-listen\" disabled>&#x1f50a; Listen<\/button><button class=\"btn primary demo-said\" disabled>&#x1f3a4; Say it<\/button><\/div>\n          <\/div>\n\n          <div class=\"demoCard demo-q4\" data-answer=\"that\" data-sentence=\"That is a book.\" data-done=\"0\">\n            <span class=\"tag\">ONE + FAR<\/span>\n            <div class=\"visual far\"><span class=\"hand\">&#x1f449;<\/span><span class=\"thing\">&#x1f4d8;<\/span><\/div>\n            <div class=\"choices\"><button class=\"choice\" data-val=\"that\">That<\/button><button class=\"choice\" data-val=\"those\">Those<\/button><\/div>\n            <div class=\"model\">Choose first.<\/div>\n            <div class=\"actions\"><button class=\"btn yellowbtn demo-listen\" disabled>&#x1f50a; Listen<\/button><button class=\"btn primary demo-said\" disabled>&#x1f3a4; Say it<\/button><\/div>\n          <\/div>\n\n          <div class=\"demoCard demo-q4\" data-answer=\"those\" data-sentence=\"Those are books.\" data-done=\"0\">\n            <span class=\"tag\">MANY + FAR<\/span>\n            <div class=\"visual far\"><span class=\"hand\">&#x1f449;<\/span><span class=\"thing\">&#x1f4d8;&#x1f4d8;<\/span><\/div>\n            <div class=\"choices\"><button class=\"choice\" data-val=\"that\">That<\/button><button class=\"choice\" data-val=\"those\">Those<\/button><\/div>\n            <div class=\"model\">Choose first.<\/div>\n            <div class=\"actions\"><button class=\"btn yellowbtn demo-listen\" disabled>&#x1f50a; Listen<\/button><button class=\"btn primary demo-said\" disabled>&#x1f3a4; Say it<\/button><\/div>\n          <\/div>\n        <\/div>\n\n        <div class=\"feedback\" id=\"demoFeedback4\"><\/div>\n        <div class=\"unlock\" id=\"unlockDemo4\">&#x1f512; Complete and say all 4 sentences.<\/div>\n        <div class=\"actions\"><button class=\"btn soft next\" data-next=\"2\">\u2190 One \/ Many<\/button><button class=\"btn primary next\" data-next=\"4\" id=\"nextDemo4\" disabled>Transform sentences \u2192<\/button><\/div>\n      <\/div>\n    <\/section>\n\n    <!-- STEP 4 -->\n    <section class=\"screen\" data-screen=\"4\">\n      <div class=\"guide\">\n        <div class=\"avatar purple\">&#x1f467;&#x1f3fb;<\/div>\n        <div class=\"speech\"><strong>Keyla says:<\/strong> \u201cWatch how a sentence changes from ONE to MANY. Then say the new sentence.\u201d<\/div>\n      <\/div>\n\n      <div class=\"card lilac\">\n        <h3>4. Change ONE into MANY<\/h3>\n        <p class=\"muted\">Choose the correct plural sentence. Then listen and say it aloud.<\/p>\n\n        <div class=\"transformgrid\">\n          <div class=\"transformcard trans-q4\" data-answer=\"These are books.\" data-done=\"0\">\n            <div class=\"fromline\">This is a book.<\/div>\n            <div class=\"choices\" style=\"margin-top:10px\"><button class=\"choice\" data-val=\"These are books.\">These are books.<\/button><button class=\"choice\" data-val=\"These is books.\">These is books.<\/button><\/div>\n            <div class=\"toline\">ONE \u2192 MANY<\/div>\n            <div class=\"actions\"><button class=\"btn yellowbtn trans-listen\" disabled>&#x1f50a; Listen<\/button><button class=\"btn primary trans-said\" disabled>&#x1f3a4; Say it<\/button><\/div>\n          <\/div>\n\n          <div class=\"transformcard trans-q4\" data-answer=\"Those are pencils.\" data-done=\"0\">\n            <div class=\"fromline\">That is a pencil.<\/div>\n            <div class=\"choices\" style=\"margin-top:10px\"><button class=\"choice\" data-val=\"Those are pencils.\">Those are pencils.<\/button><button class=\"choice\" data-val=\"Those is pencil.\">Those is pencil.<\/button><\/div>\n            <div class=\"toline\">ONE \u2192 MANY<\/div>\n            <div class=\"actions\"><button class=\"btn yellowbtn trans-listen\" disabled>&#x1f50a; Listen<\/button><button class=\"btn primary trans-said\" disabled>&#x1f3a4; Say it<\/button><\/div>\n          <\/div>\n\n          <div class=\"transformcard trans-q4\" data-answer=\"These are my pens.\" data-done=\"0\">\n            <div class=\"fromline\">This is my pen.<\/div>\n            <div class=\"choices\" style=\"margin-top:10px\"><button class=\"choice\" data-val=\"These are my pens.\">These are my pens.<\/button><button class=\"choice\" data-val=\"This are my pens.\">This are my pens.<\/button><\/div>\n            <div class=\"toline\">ONE \u2192 MANY<\/div>\n            <div class=\"actions\"><button class=\"btn yellowbtn trans-listen\" disabled>&#x1f50a; Listen<\/button><button class=\"btn primary trans-said\" disabled>&#x1f3a4; Say it<\/button><\/div>\n          <\/div>\n\n          <div class=\"transformcard trans-q4\" data-answer=\"Those are my backpacks.\" data-done=\"0\">\n            <div class=\"fromline\">That is my backpack.<\/div>\n            <div class=\"choices\" style=\"margin-top:10px\"><button class=\"choice\" data-val=\"Those are my backpacks.\">Those are my backpacks.<\/button><button class=\"choice\" data-val=\"That are my backpacks.\">That are my backpacks.<\/button><\/div>\n            <div class=\"toline\">ONE \u2192 MANY<\/div>\n            <div class=\"actions\"><button class=\"btn yellowbtn trans-listen\" disabled>&#x1f50a; Listen<\/button><button class=\"btn primary trans-said\" disabled>&#x1f3a4; Say it<\/button><\/div>\n          <\/div>\n\n          <div class=\"transformcard trans-q4\" data-answer=\"These are chairs.\" data-done=\"0\">\n            <div class=\"fromline\">This is a chair.<\/div>\n            <div class=\"choices\" style=\"margin-top:10px\"><button class=\"choice\" data-val=\"These are chairs.\">These are chairs.<\/button><button class=\"choice\" data-val=\"These are chair.\">These are chair.<\/button><\/div>\n            <div class=\"toline\">ONE \u2192 MANY<\/div>\n            <div class=\"actions\"><button class=\"btn yellowbtn trans-listen\" disabled>&#x1f50a; Listen<\/button><button class=\"btn primary trans-said\" disabled>&#x1f3a4; Say it<\/button><\/div>\n          <\/div>\n\n          <div class=\"transformcard trans-q4\" data-answer=\"Those are desks.\" data-done=\"0\">\n            <div class=\"fromline\">That is a desk.<\/div>\n            <div class=\"choices\" style=\"margin-top:10px\"><button class=\"choice\" data-val=\"Those are desks.\">Those are desks.<\/button><button class=\"choice\" data-val=\"Those is desks.\">Those is desks.<\/button><\/div>\n            <div class=\"toline\">ONE \u2192 MANY<\/div>\n            <div class=\"actions\"><button class=\"btn yellowbtn trans-listen\" disabled>&#x1f50a; Listen<\/button><button class=\"btn primary trans-said\" disabled>&#x1f3a4; Say it<\/button><\/div>\n          <\/div>\n        <\/div>\n\n        <div class=\"feedback\" id=\"transFeedback4\"><\/div>\n        <div class=\"unlock\" id=\"unlockTrans4\">&#x1f512; Transform and say all 6 sentences.<\/div>\n        <div class=\"actions\"><button class=\"btn soft next\" data-next=\"3\">\u2190 These \/ Those<\/button><button class=\"btn primary next\" data-next=\"5\" id=\"nextTrans4\" disabled>Look &#038; Say \u2192<\/button><\/div>\n      <\/div>\n    <\/section>\n\n    <!-- STEP 5 -->\n    <section class=\"screen\" data-screen=\"5\">\n      <div class=\"guide\">\n        <div class=\"avatar gray\">&#x1f431;<\/div>\n        <div class=\"speech\"><strong>Misu says:<\/strong> \u201cNo transformation clues now! Look at NUMBER + DISTANCE and build the sentence yourself.\u201d<\/div>\n      <\/div>\n\n      <div class=\"card yellow\">\n        <h3>5. Look, choose and speak<\/h3>\n        <p class=\"muted\">Choose the best full sentence for each scene, then say it aloud.<\/p>\n\n        <div class=\"questiongrid\">\n          <div class=\"question look-q4\" data-answer=\"These are my pencils.\" data-done=\"0\">\n            <b>&#x1f932; &#x270f;&#xfe0f;&#x270f;&#xfe0f; \u00b7 MANY + NEAR<\/b>\n            <div class=\"choices\"><button class=\"choice\" data-val=\"These are my pencils.\">These are my pencils.<\/button><button class=\"choice\" data-val=\"This is my pencil.\">This is my pencil.<\/button><\/div>\n            <div class=\"actions\"><button class=\"btn yellowbtn look-listen\" disabled>&#x1f50a; Listen<\/button><button class=\"btn primary look-said\" disabled>&#x1f3a4; Say it<\/button><\/div>\n          <\/div>\n\n          <div class=\"question look-q4\" data-answer=\"Those are my books.\" data-done=\"0\">\n            <b>&#x1f449; &#x1f4d8;&#x1f4d8; \u00b7 MANY + FAR<\/b>\n            <div class=\"choices\"><button class=\"choice\" data-val=\"Those are my books.\">Those are my books.<\/button><button class=\"choice\" data-val=\"That is my book.\">That is my book.<\/button><\/div>\n            <div class=\"actions\"><button class=\"btn yellowbtn look-listen\" disabled>&#x1f50a; Listen<\/button><button class=\"btn primary look-said\" disabled>&#x1f3a4; Say it<\/button><\/div>\n          <\/div>\n\n          <div class=\"question look-q4\" data-answer=\"This is my backpack.\" data-done=\"0\">\n            <b>&#x1f932; &#x1f392; \u00b7 ONE + NEAR<\/b>\n            <div class=\"choices\"><button class=\"choice\" data-val=\"This is my backpack.\">This is my backpack.<\/button><button class=\"choice\" data-val=\"These are my backpacks.\">These are my backpacks.<\/button><\/div>\n            <div class=\"actions\"><button class=\"btn yellowbtn look-listen\" disabled>&#x1f50a; Listen<\/button><button class=\"btn primary look-said\" disabled>&#x1f3a4; Say it<\/button><\/div>\n          <\/div>\n\n          <div class=\"question look-q4\" data-answer=\"That is my chair.\" data-done=\"0\">\n            <b>&#x1f449; &#x1fa91; \u00b7 ONE + FAR<\/b>\n            <div class=\"choices\"><button class=\"choice\" data-val=\"That is my chair.\">That is my chair.<\/button><button class=\"choice\" data-val=\"Those are my chairs.\">Those are my chairs.<\/button><\/div>\n            <div class=\"actions\"><button class=\"btn yellowbtn look-listen\" disabled>&#x1f50a; Listen<\/button><button class=\"btn primary look-said\" disabled>&#x1f3a4; Say it<\/button><\/div>\n          <\/div>\n        <\/div>\n\n        <div class=\"unlock\" id=\"unlockLook4\">&#x1f512; Complete and say all 4 descriptions.<\/div>\n        <div class=\"actions\"><button class=\"btn soft next\" data-next=\"4\">\u2190 Transform<\/button><button class=\"btn primary next\" data-next=\"6\" id=\"nextLook4\" disabled>Our School Bag \u2192<\/button><\/div>\n      <\/div>\n    <\/section>\n\n    <!-- STEP 6 -->\n    <section class=\"screen\" data-screen=\"6\">\n      <div class=\"guide\">\n        <div class=\"avatar\">&#x1f466;&#x1f3fb;<\/div>\n        <div class=\"speech\"><strong>Leo says:<\/strong> \u201cThis time it is simple: complete THREE speaking missions. When the three are done, Step 7 opens automatically.\u201d<\/div>\n      <\/div>\n\n      <div class=\"card\">\n        <h3>6. Our School Bag \u00b7 3 Speaking Missions<\/h3>\n        <p class=\"muted\">\n          Complete the three cards below. Each card creates one sentence. \n          <b>You do not need to repeat cards or create extra sentences.<\/b>\n        <\/p>\n\n        <div class=\"bagmissions\">\n\n          <div class=\"bagmission\" id=\"bagMission1\">\n            <h4>Mission 1 \u00b7 ONE school thing<\/h4>\n            <p class=\"muted\">Choose one object and decide if it is near or far.<\/p>\n            <div class=\"minirow\">\n              <label>Distance\n                <select id=\"bag1Distance\">\n                  <option value=\"\">Choose<\/option>\n                  <option value=\"near\">near<\/option>\n                  <option value=\"far\">far<\/option>\n                <\/select>\n              <\/label>\n              <label>School thing\n                <select id=\"bag1Object\">\n                  <option value=\"\">Choose<\/option>\n                  <option value=\"pencil\">pencil<\/option>\n                  <option value=\"book\">book<\/option>\n                  <option value=\"pen\">pen<\/option>\n                  <option value=\"backpack\">backpack<\/option>\n                  <option value=\"chair\">chair<\/option>\n                  <option value=\"desk\">desk<\/option>\n                <\/select>\n              <\/label>\n            <\/div>\n            <div class=\"model\" id=\"bag1Model\">Example: This is my pencil.<\/div>\n            <div class=\"actions\">\n              <button class=\"btn yellowbtn\" id=\"bag1Build\">&#x2728; Build<\/button>\n              <button class=\"btn soft\" id=\"bag1Listen\" disabled>&#x1f50a; Listen<\/button>\n              <button class=\"btn primary\" id=\"bag1Done\" disabled>&#x1f3a4; I said it<\/button>\n            <\/div>\n          <\/div>\n\n          <div class=\"bagmission\" id=\"bagMission2\">\n            <h4>Mission 2 \u00b7 MANY school things NEAR you<\/h4>\n            <p class=\"muted\">Choose an object. Your sentence will use <b>These are my\u2026<\/b><\/p>\n            <label>School thing\n              <select id=\"bag2Object\">\n                <option value=\"\">Choose<\/option>\n                <option value=\"pencil\">pencils<\/option>\n                <option value=\"book\">books<\/option>\n                <option value=\"pen\">pens<\/option>\n                <option value=\"backpack\">backpacks<\/option>\n                <option value=\"chair\">chairs<\/option>\n                <option value=\"desk\">desks<\/option>\n              <\/select>\n            <\/label>\n            <div class=\"model\" id=\"bag2Model\">Example: These are my pencils.<\/div>\n            <div class=\"actions\">\n              <button class=\"btn yellowbtn\" id=\"bag2Build\">&#x2728; Build<\/button>\n              <button class=\"btn soft\" id=\"bag2Listen\" disabled>&#x1f50a; Listen<\/button>\n              <button class=\"btn primary\" id=\"bag2Done\" disabled>&#x1f3a4; I said it<\/button>\n            <\/div>\n          <\/div>\n\n          <div class=\"bagmission\" id=\"bagMission3\">\n            <h4>Mission 3 \u00b7 MANY school things FAR from you<\/h4>\n            <p class=\"muted\">Choose an object. Your sentence will use <b>Those are my\u2026<\/b><\/p>\n            <label>School thing\n              <select id=\"bag3Object\">\n                <option value=\"\">Choose<\/option>\n                <option value=\"pencil\">pencils<\/option>\n                <option value=\"book\">books<\/option>\n                <option value=\"pen\">pens<\/option>\n                <option value=\"backpack\">backpacks<\/option>\n                <option value=\"chair\">chairs<\/option>\n                <option value=\"desk\">desks<\/option>\n              <\/select>\n            <\/label>\n            <div class=\"model\" id=\"bag3Model\">Example: Those are my books.<\/div>\n            <div class=\"actions\">\n              <button class=\"btn yellowbtn\" id=\"bag3Build\">&#x2728; Build<\/button>\n              <button class=\"btn soft\" id=\"bag3Listen\" disabled>&#x1f50a; Listen<\/button>\n              <button class=\"btn primary\" id=\"bag3Done\" disabled>&#x1f3a4; I said it<\/button>\n            <\/div>\n          <\/div>\n\n        <\/div>\n\n        <div class=\"progressbig\">\n          &#x1f392; Speaking missions completed: <span id=\"bagProgress4\">0<\/span>\/3\n        <\/div>\n\n        <div class=\"card blue\" style=\"margin-top:16px\">\n          <h3 style=\"font-size:22px\">&#x1f3ad; Bonus mini dialogue<\/h3>\n          <p class=\"muted\">This dialogue is extra practice. <b>It does not block Step 7.<\/b><\/p>\n          <div class=\"dialogue\" id=\"bagDialogue4\">\n            <div class=\"line\"><div class=\"who\">Keyla<\/div><div>What are these?<\/div><\/div>\n            <div class=\"line leo\"><div class=\"who\">You<\/div><div>These are my pencils.<\/div><\/div>\n            <div class=\"line\"><div class=\"who\">Keyla<\/div><div>What are those?<\/div><\/div>\n            <div class=\"line leo\"><div class=\"who\">You<\/div><div>Those are my books.<\/div><\/div>\n          <\/div>\n          <div class=\"actions\">\n            <button class=\"btn bluebtn\" id=\"listenBagDialogue4\">&#x1f50a; Listen to dialogue<\/button>\n          <\/div>\n        <\/div>\n\n        <div class=\"unlock\" id=\"unlockBag4\">&#x1f512; Complete Mission 1, Mission 2 and Mission 3.<\/div>\n        <div class=\"actions\">\n          <button class=\"btn soft next\" data-next=\"5\">\u2190 Look &#038; Say<\/button>\n          <button class=\"btn primary next\" data-next=\"7\" id=\"nextBag4\" disabled>Final speaking \u2192<\/button>\n        <\/div>\n      <\/div>\n    <\/section>\n\n\n    <!-- STEP 7 -->\n    <section class=\"screen\" data-screen=\"7\">\n      <div class=\"guide\">\n        <div class=\"avatar gray\">&#x1f431;<\/div>\n        <div class=\"speech\"><strong>Misu says:<\/strong> \u201cFinal mission! Look around your real space. Use English to talk about ONE and MANY things.\u201d<\/div>\n      <\/div>\n\n      <div class=\"card lilac\">\n        <h3>7. One or Many? \u00b7 Final Speaking Mission<\/h3>\n        <p class=\"muted\">Complete the five missions. Use real objects around you if possible.<\/p>\n\n        <div class=\"missiongrid\">\n          <div class=\"mission speak-mission4\" data-done=\"0\">\n            <div class=\"mnum\">1<\/div>\n            <strong>Point to ONE thing near you and say: \u201cThis is\u2026\u201d<\/strong>\n            <div class=\"actions\"><button class=\"btn yellowbtn listen\" data-text=\"Point to one thing near you. Say, This is...\">&#x1f50a; Prompt<\/button><button class=\"btn primary mission-done4\">&#x1f3a4; Done<\/button><\/div>\n          <\/div>\n\n          <div class=\"mission speak-mission4\" data-done=\"0\">\n            <div class=\"mnum\">2<\/div>\n            <strong>Point to MANY things near you and say: \u201cThese are\u2026\u201d<\/strong>\n            <div class=\"actions\"><button class=\"btn yellowbtn listen\" data-text=\"Point to many things near you. Say, These are...\">&#x1f50a; Prompt<\/button><button class=\"btn primary mission-done4\">&#x1f3a4; Done<\/button><\/div>\n          <\/div>\n\n          <div class=\"mission speak-mission4\" data-done=\"0\">\n            <div class=\"mnum\">3<\/div>\n            <strong>Point to ONE thing far from you and say: \u201cThat is\u2026\u201d<\/strong>\n            <div class=\"actions\"><button class=\"btn yellowbtn listen\" data-text=\"Point to one thing far from you. Say, That is...\">&#x1f50a; Prompt<\/button><button class=\"btn primary mission-done4\">&#x1f3a4; Done<\/button><\/div>\n          <\/div>\n\n          <div class=\"mission speak-mission4\" data-done=\"0\">\n            <div class=\"mnum\">4<\/div>\n            <strong>Point to MANY things far from you and say: \u201cThose are\u2026\u201d<\/strong>\n            <div class=\"actions\"><button class=\"btn yellowbtn listen\" data-text=\"Point to many things far from you. Say, Those are...\">&#x1f50a; Prompt<\/button><button class=\"btn primary mission-done4\">&#x1f3a4; Done<\/button><\/div>\n          <\/div>\n\n          <div class=\"mission speak-mission4\" data-done=\"0\">\n            <div class=\"mnum\">5<\/div>\n            <strong>Say two plural school words and use them in sentences.<\/strong>\n            <div class=\"actions\"><button class=\"btn yellowbtn listen\" data-text=\"Say two plural school words and use them in sentences.\">&#x1f50a; Prompt<\/button><button class=\"btn primary mission-done4\">&#x1f3a4; Done<\/button><\/div>\n          <\/div>\n\n          <div class=\"mission\">\n            <div class=\"mnum\">\u2605<\/div>\n            <strong>Bonus: say \u201cThese are my\u2026\u201d AND \u201cThose are my\u2026\u201d<\/strong>\n            <div class=\"actions\"><button class=\"btn yellowbtn listen\" data-text=\"Bonus. Say, These are my... and, Those are my...\">&#x1f50a; Prompt<\/button><\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <div class=\"card yellow\">\n        <h3>&#x1f399;&#xfe0f; Record your school-things report<\/h3>\n        <p class=\"muted\">Speak for about 20\u201345 seconds. Try to use <b>this, that, these and those<\/b>.<\/p>\n\n        <div class=\"rec\">\n          <div class=\"actions\">\n            <button class=\"btn red startRec4\">\u25cf Start recording<\/button>\n            <button class=\"btn soft stopRec4\" disabled>\u25a0 Stop<\/button>\n          <\/div>\n          <div class=\"recstatus\" aria-live=\"polite\"><\/div>\n          <audio class=\"playback\" controls hidden><\/audio>\n        <\/div>\n\n        <p style=\"font-size:13px;color:var(--gray)\">The recording stays in this browser; this activity does not upload it.<\/p>\n      <\/div>\n\n      <div class=\"card\">\n        <h3>&#x1f49c; I check my speaking<\/h3>\n        <div class=\"checkrow\">\n          <label class=\"selfcheck\"><input type=\"checkbox\" class=\"final-check4\"> I know the difference between one and many.<\/label>\n          <label class=\"selfcheck\"><input type=\"checkbox\" class=\"final-check4\"> I used <b>this \/ that<\/b> for one thing.<\/label>\n          <label class=\"selfcheck\"><input type=\"checkbox\" class=\"final-check4\"> I used <b>these \/ those<\/b> for many things.<\/label>\n          <label class=\"selfcheck\"><input type=\"checkbox\" class=\"final-check4\"> I used <b>is<\/b> with singular and <b>are<\/b> with plural.<\/label>\n          <label class=\"selfcheck\"><input type=\"checkbox\" class=\"final-check4\"> I spoke clearly and listened to myself.<\/label>\n        <\/div>\n\n        <div class=\"unlock\" id=\"unlockFinal4\">&#x1f512; Complete the 5 missions and your self-check.<\/div>\n        <div class=\"actions\"><button class=\"btn soft next\" data-next=\"6\">\u2190 School Bag<\/button><button class=\"btn green\" id=\"finishL4\" disabled>\u2605 Finish my adventure<\/button><\/div>\n\n        <div class=\"finish\" id=\"finishBoxL4\">\n          <div class=\"big\">&#x1f511;&#x1f49c;&#x270f;&#xfe0f;&#x270f;&#xfe0f;<\/div>\n          <h3>You found the ONE &#038; MANY Key!<\/h3>\n          <p>You listened, changed singular sentences into plural sentences, used <b>these \/ those<\/b> and described school things with your own voice.<\/p>\n          <div class=\"badge\">Cuentos ke Cuentan \u00b7 One &#038; Many Explorer<\/div>\n          <p><strong>Total: <span id=\"finalPtsL4\">0<\/span> points<\/strong><\/p>\n        <\/div>\n      <\/div>\n    <\/section>\n\n  <\/main>\n\n  <div class=\"footerbrand\">Cuentos <span>ke<\/span> Cuentan \u2661 \u00b7 My English KEY by Mara Nieto<\/div>\n<\/div>\n\n<script>\n(function(){\n  const root=document.getElementById('mek-l4-ckc');\n  if(!root)return;\n\n  let pts=0, unlocked=1;\n  const ptsEl=root.querySelector('#l4pts');\n  const levelEl=root.querySelector('#l4level');\n\n  function addPts(n){pts+=n;ptsEl.textContent=pts}\n\n  function speak(text){\n    if(!('speechSynthesis' in window)){\n      alert('Audio pronunciation is not available in this browser.');\n      return;\n    }\n    window.speechSynthesis.cancel();\n    const u=new SpeechSynthesisUtterance(text);\n    u.lang='en-US';\n    u.rate=.80;\n    u.pitch=1.04;\n    window.speechSynthesis.speak(u);\n  }\n\n  root.querySelectorAll('.listen').forEach(b=>{\n    b.addEventListener('click',()=>speak(b.dataset.text));\n  });\n\n  function unlockStep(n){\n    if(n>unlocked)unlocked=n;\n    root.querySelectorAll('.step').forEach(s=>{\n      const k=+s.dataset.step;\n      s.classList.toggle('locked',k>unlocked);\n      if(k<unlocked)s.classList.add('done');\n    });\n  }\n\n  function show(n){\n    if(n>unlocked)return;\n    root.querySelectorAll('.screen').forEach(s=>s.classList.remove('active'));\n    root.querySelector('[data-screen=\"'+n+'\"]').classList.add('active');\n    root.querySelectorAll('.step').forEach(s=>s.classList.remove('active'));\n    root.querySelector('.step[data-step=\"'+n+'\"]').classList.add('active');\n    levelEl.textContent=n;\n    root.scrollIntoView({behavior:'smooth',block:'start'});\n  }\n\n  root.querySelectorAll('.next').forEach(b=>{\n    b.addEventListener('click',()=>show(+b.dataset.next));\n  });\n\n  \/\/ STEP 1\n  let storyHeard=false;\n\n  root.querySelector('#storyHeard4').addEventListener('click',function(){\n    if(storyHeard)return;\n    storyHeard=true;\n    addPts(2);\n    this.textContent='\u2605 Story heard';\n    this.className='btn green';\n    checkStory();\n  });\n\n  root.querySelectorAll('.story-q4 .choice').forEach(b=>{\n    b.addEventListener('click',()=>{\n      const q=b.closest('.story-q4');\n      if(q.dataset.ok==='1')return;\n\n      if(b.dataset.correct==='1'){\n        q.dataset.ok='1';\n        b.classList.add('correct');\n        q.querySelectorAll('.choice').forEach(x=>x.disabled=true);\n        addPts(2);\n        checkStory();\n      }else{\n        b.classList.add('wrong');\n        setTimeout(()=>b.classList.remove('wrong'),700);\n      }\n    });\n  });\n\n  function checkStory(){\n    const done=[...root.querySelectorAll('.story-q4')].every(q=>q.dataset.ok==='1');\n    if(storyHeard&&done){\n      unlockStep(2);\n      root.querySelector('#nextStory4').disabled=false;\n      root.querySelector('#unlockStory4').textContent='&#x1f511; One or Many unlocked!';\n    }\n  }\n\n  \/\/ STEP 2\n  let objectDone=0;\n\n  root.querySelectorAll('.object-said').forEach(b=>{\n    b.addEventListener('click',()=>{\n      const card=b.closest('.objectcard');\n      if(card.dataset.odone==='1')return;\n\n      card.dataset.odone='1';\n      card.classList.add('done');\n      objectDone++;\n      addPts(1);\n      b.textContent='\u2605 Said';\n      b.className='btn green object-said';\n\n      if(objectDone===6){\n        unlockStep(3);\n        root.querySelector('#nextObjects4').disabled=false;\n        root.querySelector('#unlockObjects4').textContent='&#x1f511; These \/ Those unlocked!';\n      }\n    });\n  });\n\n  \/\/ STEP 3\n  let demoSaid=0;\n\n  root.querySelectorAll('.demo-q4').forEach(card=>{\n    const answer=card.dataset.answer;\n    const sentence=card.dataset.sentence;\n    const model=card.querySelector('.model');\n    const listen=card.querySelector('.demo-listen');\n    const said=card.querySelector('.demo-said');\n\n    card.querySelectorAll('.choice').forEach(b=>{\n      b.addEventListener('click',()=>{\n        if(card.dataset.chosen==='1')return;\n\n        if(b.dataset.val===answer){\n          card.dataset.chosen='1';\n          b.classList.add('correct');\n          card.querySelectorAll('.choice').forEach(x=>x.disabled=true);\n          model.textContent=sentence;\n          listen.disabled=false;\n          said.disabled=false;\n          listen.onclick=()=>speak(sentence);\n          addPts(2);\n\n          const fb=root.querySelector('#demoFeedback4');\n          fb.className='feedback show ok';\n          fb.textContent='Correct! Now say the whole sentence.';\n        }else{\n          b.classList.add('wrong');\n          const fb=root.querySelector('#demoFeedback4');\n          fb.className='feedback show try';\n          fb.textContent='Check BOTH clues: one or many? near or far?';\n          setTimeout(()=>b.classList.remove('wrong'),700);\n        }\n      });\n    });\n\n    said.addEventListener('click',()=>{\n      if(card.dataset.chosen!=='1'||card.dataset.done==='1')return;\n      card.dataset.done='1';\n      demoSaid++;\n      addPts(1);\n      said.textContent='\u2605 Said';\n      said.className='btn green demo-said';\n\n      if(demoSaid===4){\n        unlockStep(4);\n        root.querySelector('#nextDemo4').disabled=false;\n        root.querySelector('#unlockDemo4').textContent='&#x1f511; Sentence transformation unlocked!';\n      }\n    });\n  });\n\n  \/\/ STEP 4\n  let transSaid=0;\n\n  root.querySelectorAll('.trans-q4').forEach(card=>{\n    const answer=card.dataset.answer;\n    const listen=card.querySelector('.trans-listen');\n    const said=card.querySelector('.trans-said');\n\n    card.querySelectorAll('.choice').forEach(b=>{\n      b.addEventListener('click',()=>{\n        if(card.dataset.chosen==='1')return;\n\n        if(b.dataset.val===answer){\n          card.dataset.chosen='1';\n          b.classList.add('correct');\n          card.querySelectorAll('.choice').forEach(x=>x.disabled=true);\n          listen.disabled=false;\n          said.disabled=false;\n          listen.onclick=()=>speak(answer);\n          addPts(2);\n\n          const fb=root.querySelector('#transFeedback4');\n          fb.className='feedback show ok';\n          fb.textContent='Great transformation! Now say the plural sentence.';\n        }else{\n          b.classList.add('wrong');\n          const fb=root.querySelector('#transFeedback4');\n          fb.className='feedback show try';\n          fb.textContent='Remember: plural uses THESE\/THOSE + ARE + plural noun.';\n          setTimeout(()=>b.classList.remove('wrong'),700);\n        }\n      });\n    });\n\n    said.addEventListener('click',()=>{\n      if(card.dataset.chosen!=='1'||card.dataset.done==='1')return;\n\n      card.dataset.done='1';\n      card.classList.add('done');\n      transSaid++;\n      addPts(1);\n      said.textContent='\u2605 Said';\n      said.className='btn green trans-said';\n\n      if(transSaid===6){\n        unlockStep(5);\n        root.querySelector('#nextTrans4').disabled=false;\n        root.querySelector('#unlockTrans4').textContent='&#x1f511; Look & Say unlocked!';\n      }\n    });\n  });\n\n  \/\/ STEP 5\n  let lookSaid=0;\n\n  root.querySelectorAll('.look-q4').forEach(card=>{\n    const answer=card.dataset.answer;\n    const listen=card.querySelector('.look-listen');\n    const said=card.querySelector('.look-said');\n\n    card.querySelectorAll('.choice').forEach(b=>{\n      b.addEventListener('click',()=>{\n        if(card.dataset.chosen==='1')return;\n\n        if(b.dataset.val===answer){\n          card.dataset.chosen='1';\n          b.classList.add('correct');\n          card.querySelectorAll('.choice').forEach(x=>x.disabled=true);\n          listen.disabled=false;\n          said.disabled=false;\n          listen.onclick=()=>speak(answer);\n          addPts(2);\n        }else{\n          b.classList.add('wrong');\n          setTimeout(()=>b.classList.remove('wrong'),700);\n        }\n      });\n    });\n\n    said.addEventListener('click',()=>{\n      if(card.dataset.chosen!=='1'||card.dataset.done==='1')return;\n\n      card.dataset.done='1';\n      lookSaid++;\n      addPts(1);\n      said.textContent='\u2605 Said';\n      said.className='btn green look-said';\n\n      if(lookSaid===4){\n        unlockStep(6);\n        root.querySelector('#nextLook4').disabled=false;\n        root.querySelector('#unlockLook4').textContent='&#x1f511; Our School Bag unlocked!';\n      }\n    });\n  });\n\n  \/\/ STEP 6 - OUR SCHOOL BAG: THREE CLEAR MISSIONS\n  const bagProgress4=root.querySelector('#bagProgress4');\n  const completedBagMissions=new Set();\n\n  function pluralize4(word){\n    return word+'s';\n  }\n\n  function completeBagMission(id,card,doneButton){\n    if(completedBagMissions.has(id))return;\n    completedBagMissions.add(id);\n    card.classList.add('done');\n    doneButton.textContent='\u2605 Mission complete';\n    doneButton.disabled=true;\n    addPts(3);\n\n    bagProgress4.textContent=completedBagMissions.size;\n\n    if(completedBagMissions.size===3){\n      unlockStep(7);\n      root.querySelector('#nextBag4').disabled=false;\n      root.querySelector('#unlockBag4').textContent='&#x1f511; All 3 missions complete. Final speaking unlocked!';\n    }else{\n      const left=3-completedBagMissions.size;\n      root.querySelector('#unlockBag4').textContent=\n        '\u2713 Great! Complete '+left+' more mission'+(left===1?'':'s')+' to unlock Step 7.';\n    }\n  }\n\n  \/\/ Mission 1: ONE, near\/far\n  const bag1Distance=root.querySelector('#bag1Distance');\n  const bag1Object=root.querySelector('#bag1Object');\n  const bag1Model=root.querySelector('#bag1Model');\n  const bag1Listen=root.querySelector('#bag1Listen');\n  const bag1Done=root.querySelector('#bag1Done');\n  const bagMission1=root.querySelector('#bagMission1');\n  let bag1Sentence='';\n\n  root.querySelector('#bag1Build').addEventListener('click',()=>{\n    if(!bag1Distance.value||!bag1Object.value){\n      bag1Model.textContent='Choose distance and school thing first.';\n      bag1Listen.disabled=true;\n      bag1Done.disabled=true;\n      return;\n    }\n    const demo=bag1Distance.value==='near'?'This':'That';\n    bag1Sentence=demo+' is my '+bag1Object.value+'.';\n    bag1Model.textContent=bag1Sentence;\n    bag1Listen.disabled=false;\n    bag1Done.disabled=completedBagMissions.has(1);\n  });\n\n  bag1Listen.addEventListener('click',()=>{\n    if(bag1Sentence)speak(bag1Sentence);\n  });\n\n  bag1Done.addEventListener('click',()=>{\n    if(!bag1Sentence){\n      bag1Model.textContent='Build the sentence first.';\n      return;\n    }\n    completeBagMission(1,bagMission1,bag1Done);\n  });\n\n  \/\/ Mission 2: MANY + NEAR = THESE\n  const bag2Object=root.querySelector('#bag2Object');\n  const bag2Model=root.querySelector('#bag2Model');\n  const bag2Listen=root.querySelector('#bag2Listen');\n  const bag2Done=root.querySelector('#bag2Done');\n  const bagMission2=root.querySelector('#bagMission2');\n  let bag2Sentence='';\n\n  root.querySelector('#bag2Build').addEventListener('click',()=>{\n    if(!bag2Object.value){\n      bag2Model.textContent='Choose a school thing first.';\n      bag2Listen.disabled=true;\n      bag2Done.disabled=true;\n      return;\n    }\n    bag2Sentence='These are my '+pluralize4(bag2Object.value)+'.';\n    bag2Model.textContent=bag2Sentence;\n    bag2Listen.disabled=false;\n    bag2Done.disabled=completedBagMissions.has(2);\n    updateBonusDialogue4();\n  });\n\n  bag2Listen.addEventListener('click',()=>{\n    if(bag2Sentence)speak(bag2Sentence);\n  });\n\n  bag2Done.addEventListener('click',()=>{\n    if(!bag2Sentence){\n      bag2Model.textContent='Build the sentence first.';\n      return;\n    }\n    completeBagMission(2,bagMission2,bag2Done);\n  });\n\n  \/\/ Mission 3: MANY + FAR = THOSE\n  const bag3Object=root.querySelector('#bag3Object');\n  const bag3Model=root.querySelector('#bag3Model');\n  const bag3Listen=root.querySelector('#bag3Listen');\n  const bag3Done=root.querySelector('#bag3Done');\n  const bagMission3=root.querySelector('#bagMission3');\n  let bag3Sentence='';\n\n  root.querySelector('#bag3Build').addEventListener('click',()=>{\n    if(!bag3Object.value){\n      bag3Model.textContent='Choose a school thing first.';\n      bag3Listen.disabled=true;\n      bag3Done.disabled=true;\n      return;\n    }\n    bag3Sentence='Those are my '+pluralize4(bag3Object.value)+'.';\n    bag3Model.textContent=bag3Sentence;\n    bag3Listen.disabled=false;\n    bag3Done.disabled=completedBagMissions.has(3);\n    updateBonusDialogue4();\n  });\n\n  bag3Listen.addEventListener('click',()=>{\n    if(bag3Sentence)speak(bag3Sentence);\n  });\n\n  bag3Done.addEventListener('click',()=>{\n    if(!bag3Sentence){\n      bag3Model.textContent='Build the sentence first.';\n      return;\n    }\n    completeBagMission(3,bagMission3,bag3Done);\n  });\n\n  function updateBonusDialogue4(){\n    const near=bag2Sentence || 'These are my pencils.';\n    const far=bag3Sentence || 'Those are my books.';\n    root.querySelector('#bagDialogue4').innerHTML=\n      '<div class=\"line\"><div class=\"who\">Keyla<\/div><div>What are these?<\/div><\/div>'+\n      '<div class=\"line leo\"><div class=\"who\">You<\/div><div>'+near+'<\/div><\/div>'+\n      '<div class=\"line\"><div class=\"who\">Keyla<\/div><div>What are those?<\/div><\/div>'+\n      '<div class=\"line leo\"><div class=\"who\">You<\/div><div>'+far+'<\/div><\/div>';\n\n    root.querySelector('#listenBagDialogue4').dataset.dialogue=\n      'Keyla: What are these? You: '+near+\n      ' Keyla: What are those? You: '+far;\n  }\n\n  updateBonusDialogue4();\n\n  root.querySelector('#listenBagDialogue4').addEventListener('click',function(){\n    speak(this.dataset.dialogue);\n  });\n\n\n  \/\/ STEP 7\n  let missionsDone=0;\n\n  root.querySelectorAll('.mission-done4').forEach(b=>{\n    b.addEventListener('click',()=>{\n      const m=b.closest('.speak-mission4');\n      if(m.dataset.done==='1')return;\n\n      m.dataset.done='1';\n      missionsDone++;\n      addPts(2);\n      b.textContent='\u2605 Done';\n      b.className='btn green mission-done4';\n      checkFinal();\n    });\n  });\n\n  root.querySelectorAll('.final-check4').forEach(c=>c.addEventListener('change',checkFinal));\n\n  function checkFinal(){\n    const checks=[...root.querySelectorAll('.final-check4')].filter(c=>c.checked).length;\n\n    if(missionsDone===5&&checks===5){\n      root.querySelector('#finishL4').disabled=false;\n      root.querySelector('#unlockFinal4').textContent='&#x1f511; Your One & Many Explorer badge is ready!';\n    }else{\n      root.querySelector('#finishL4').disabled=true;\n      root.querySelector('#unlockFinal4').textContent='Complete the 5 missions and all 5 self-checks.';\n    }\n  }\n\n  \/\/ RECORDING\n  let recorder=null,stream=null,chunks=[];\n\n  root.querySelector('.startRec4').addEventListener('click',async function(){\n    const status=root.querySelector('.recstatus');\n\n    if(!navigator.mediaDevices||!navigator.mediaDevices.getUserMedia||!window.MediaRecorder){\n      status.textContent='Microphone recording is not available in this browser.';\n      return;\n    }\n\n    try{\n      stream=await navigator.mediaDevices.getUserMedia({audio:true});\n      chunks=[];\n      recorder=new MediaRecorder(stream);\n\n      recorder.ondataavailable=e=>{\n        if(e.data.size)chunks.push(e.data);\n      };\n\n      recorder.onstop=()=>{\n        const blob=new Blob(chunks,{type:recorder.mimeType||'audio\/webm'});\n        const audio=root.querySelector('.playback');\n        audio.src=URL.createObjectURL(blob);\n        audio.hidden=false;\n        status.textContent='\u2713 Recording ready. Listen to your school-things report!';\n        if(stream)stream.getTracks().forEach(t=>t.stop());\n      };\n\n      recorder.start();\n      status.textContent='\u25cf Recording\u2026 Use this, that, these and those.';\n      this.disabled=true;\n      root.querySelector('.stopRec4').disabled=false;\n    }catch(e){\n      status.textContent='Please allow microphone access to record your voice.';\n    }\n  });\n\n  root.querySelector('.stopRec4').addEventListener('click',function(){\n    if(recorder&&recorder.state==='recording')recorder.stop();\n    this.disabled=true;\n    root.querySelector('.startRec4').disabled=false;\n  });\n\n  root.querySelector('#finishL4').addEventListener('click',function(){\n    addPts(5);\n    root.querySelector('#finalPtsL4').textContent=pts;\n    root.querySelector('#finishBoxL4').classList.add('show');\n    root.querySelector('.step[data-step=\"7\"]').classList.add('done');\n    root.querySelector('#unlockFinal4').textContent='&#x1f49c; Adventure complete!';\n    this.disabled=true;\n  });\n\n})();\n<\/script>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Cuentos ke Cuentan \u2661 My English Key \u00b7 Starter 1 Lesson 4 \u00b7 One or Many? A progressive speaking adventure with singular and plural nouns [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1723","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/cuentoskecuentan.com\/index.php?rest_route=\/wp\/v2\/pages\/1723","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cuentoskecuentan.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/cuentoskecuentan.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/cuentoskecuentan.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cuentoskecuentan.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1723"}],"version-history":[{"count":4,"href":"https:\/\/cuentoskecuentan.com\/index.php?rest_route=\/wp\/v2\/pages\/1723\/revisions"}],"predecessor-version":[{"id":1729,"href":"https:\/\/cuentoskecuentan.com\/index.php?rest_route=\/wp\/v2\/pages\/1723\/revisions\/1729"}],"wp:attachment":[{"href":"https:\/\/cuentoskecuentan.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1723"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}