{"id":1735,"date":"2026-08-19T04:27:22","date_gmt":"2026-08-19T04:27:22","guid":{"rendered":"https:\/\/cuentoskecuentan.com\/?page_id=1735"},"modified":"2026-08-19T04:31:57","modified_gmt":"2026-08-19T04:31:57","slug":"my-english-key-1a1-lesson-5","status":"publish","type":"page","link":"https:\/\/cuentoskecuentan.com\/?page_id=1735","title":{"rendered":"My English Key 1A1: Lesson 5"},"content":{"rendered":"\n<!--\nMY ENGLISH KEY \u00b7 STARTER 1\nLESSON 5 \u00b7 REVIEW TIME! \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-l5-final\">\n<style>\n#mek-l5-final{\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  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-l5-final *{box-sizing:border-box}\n#mek-l5-final button,#mek-l5-final input,#mek-l5-final select{font:inherit}\n#mek-l5-final button{touch-action:manipulation}\n#mek-l5-final .book{\n  background:#fff;border:3px solid var(--purple);border-radius:32px;\n  overflow:hidden;box-shadow:0 16px 38px rgba(84,43,87,.16)\n}\n#mek-l5-final .top{\n  position:relative;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);overflow:hidden\n}\n#mek-l5-final .top:after{\n  content:\"\u2605  \u2661  &#x1f511;\";position:absolute;right:25px;bottom:12px;\n  color:var(--purple);font-size:20px;letter-spacing:8px;opacity:.72\n}\n#mek-l5-final .brandrow{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap}\n#mek-l5-final .ckc{font-weight:900;color:var(--purple);font-size:20px}\n#mek-l5-final .ckc .ke{display:inline-block;background:var(--yellow);color:var(--purple-dark);padding:1px 6px;border-radius:8px;transform:rotate(-3deg)}\n#mek-l5-final .keybrand{font-weight:900;color:var(--purple);font-size:18px}\n#mek-l5-final .keybrand b{color:var(--yellow)}\n#mek-l5-final h2{margin:14px 0 4px;color:var(--purple);font-size:clamp(32px,5vw,50px);line-height:1.04}\n#mek-l5-final .subtitle{margin:0;color:var(--gray);font-size:18px;max-width:840px}\n#mek-l5-final .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-l5-final .pathwrap{padding:18px 20px;background:var(--lilac);border-bottom:1px solid #e7dbe9;overflow-x:auto}\n#mek-l5-final .path{display:grid;grid-template-columns:repeat(7,minmax(98px,1fr));gap:6px;position:relative;min-width:735px}\n#mek-l5-final .path:before{content:\"\";position:absolute;left:6%;right:6%;top:21px;border-top:3px dashed var(--purple-mid);z-index:0}\n#mek-l5-final .step{position:relative;z-index:1;text-align:center}\n#mek-l5-final .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-l5-final .step.active .dot,#mek-l5-final .step.done .dot{background:var(--purple);color:#fff;border-color:var(--purple)}\n#mek-l5-final .step.done .dot{font-size:0}\n#mek-l5-final .step.done .dot:after{content:\"\u2713\";font-size:20px}\n#mek-l5-final .step.locked{opacity:.42}\n#mek-l5-final .step small{font-weight:900;color:var(--purple-dark);font-size:12px}\n#mek-l5-final .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-l5-final .pill{padding:7px 12px;border-radius:999px;background:var(--purple);color:#fff;font-weight:900}\n#mek-l5-final .pill.yellow{background:var(--yellow);color:var(--purple-dark)}\n#mek-l5-final .content{padding:25px}\n#mek-l5-final .screen{display:none}\n#mek-l5-final .screen.active{display:block}\n\n\/* CHARACTER \/ STORY *\/\n#mek-l5-final .guide{display:grid;grid-template-columns:92px 1fr;gap:16px;align-items:center;margin-bottom:18px}\n#mek-l5-final .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-l5-final .avatar.purple{background:var(--lilac-2);border-color:var(--purple)}\n#mek-l5-final .avatar.gray{background:#F0EFF1;border-color:#9B929D}\n#mek-l5-final .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-l5-final .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-l5-final .card{border:2px solid #E7DBE9;border-radius:23px;padding:20px;margin:14px 0;background:#fff}\n#mek-l5-final .card.yellow{background:var(--yellow-soft);border-color:#EFD873}\n#mek-l5-final .card.lilac{background:var(--lilac);border-color:#DCC9DF}\n#mek-l5-final .card.blue{background:var(--blue-soft);border-color:#cadbe9}\n#mek-l5-final .card h3{margin:0 0 9px;color:var(--purple);font-size:26px}\n#mek-l5-final .muted{color:var(--gray);margin-top:0}\n#mek-l5-final .storypaper{\n  background:#fff;border:2px dashed var(--purple-mid);border-radius:20px;padding:19px;font-size:18px;position:relative\n}\n#mek-l5-final .storypaper:after{content:\"\u2605\";position:absolute;right:16px;bottom:8px;color:var(--yellow);font-size:28px}\n#mek-l5-final .storypaper strong{color:var(--purple)}\n#mek-l5-final .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-l5-final .valueicon{font-size:35px;text-align:center}\n#mek-l5-final .valuecorner b{color:var(--purple-dark)}\n\n#mek-l5-final .actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:11px}\n#mek-l5-final .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-l5-final .btn:hover{transform:translateY(-1px)}\n#mek-l5-final .btn:disabled{opacity:.43;cursor:not-allowed;transform:none}\n#mek-l5-final .primary{background:var(--purple);color:#fff}\n#mek-l5-final .yellowbtn{background:var(--yellow);color:var(--purple-dark)}\n#mek-l5-final .soft{background:var(--lilac-2);color:var(--purple-dark)}\n#mek-l5-final .green{background:var(--green);color:#fff}\n#mek-l5-final .red{background:var(--red);color:#fff}\n#mek-l5-final .bluebtn{background:var(--blue);color:#fff}\n\n#mek-l5-final .questiongrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}\n#mek-l5-final .question{border:2px solid #E7DBE9;border-radius:18px;padding:15px;background:#fff}\n#mek-l5-final .question b{display:block;color:var(--purple-dark);font-size:18px;margin-bottom:9px}\n#mek-l5-final .choices{display:flex;gap:8px;flex-wrap:wrap}\n#mek-l5-final .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-l5-final .choice.correct{background:var(--green-soft);border-color:var(--green);color:#2E6C4E}\n#mek-l5-final .choice.wrong{background:var(--red-soft);border-color:var(--red);color:#8B3E49}\n#mek-l5-final .unlock{margin-top:14px;padding:12px 14px;border-radius:14px;background:var(--lilac);color:var(--purple-dark);font-weight:800}\n#mek-l5-final .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\/* REVIEW MISSIONS *\/\n#mek-l5-final .missionstack{display:grid;gap:14px;margin-top:14px}\n#mek-l5-final .reviewmission{\n  border:2px solid #E5D8E7;border-radius:20px;padding:16px;background:#fff\n}\n#mek-l5-final .reviewmission.done{border-color:var(--green);background:var(--green-soft)}\n#mek-l5-final .reviewmission h4{margin:0 0 8px;color:var(--purple);font-size:20px}\n#mek-l5-final .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#mek-l5-final .minirow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}\n#mek-l5-final label{font-weight:900;color:var(--purple-dark)}\n#mek-l5-final input,#mek-l5-final select{\n  width:100%;margin-top:6px;border:2px solid #D9C7DC;border-radius:12px;padding:11px 12px;background:#fff\n}\n#mek-l5-final input:focus,#mek-l5-final select:focus{outline:3px solid rgba(246,199,68,.34);border-color:var(--purple)}\n#mek-l5-final .stationtag{\n  display:inline-block;background:var(--purple);color:#fff;border-radius:999px;padding:5px 10px;font-weight:900;font-size:13px;margin-bottom:8px\n}\n#mek-l5-final .iconrow{font-size:43px;letter-spacing:4px;margin:7px 0}\n#mek-l5-final .dialogue{\n  border:2px solid #E5D8E7;border-radius:20px;background:#fff;padding:16px\n}\n#mek-l5-final .line{display:grid;grid-template-columns:78px 1fr;gap:8px;padding:8px 0;border-bottom:1px dashed #E1D3E3}\n#mek-l5-final .line:last-child{border-bottom:0}\n#mek-l5-final .who{font-weight:900;color:var(--purple)}\n#mek-l5-final .line.leo .who{color:var(--blue)}\n\n\/* FINAL *\/\n#mek-l5-final .finalgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}\n#mek-l5-final .finalmission{border:2px solid #E5D8E7;border-radius:18px;padding:15px;background:#fff}\n#mek-l5-final .finalmission.done{background:var(--green-soft);border-color:var(--green)}\n#mek-l5-final .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-l5-final .rec{margin-top:14px;padding:15px;border:2px dashed var(--purple);border-radius:18px;background:#fff}\n#mek-l5-final .recstatus{min-height:24px;margin-top:8px;font-weight:900;color:var(--purple-dark)}\n#mek-l5-final audio{width:100%;margin-top:10px}\n#mek-l5-final .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-l5-final .finish.show{display:block}\n#mek-l5-final .finish .big{font-size:52px;line-height:1}\n#mek-l5-final .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-l5-final .footerbrand{text-align:center;padding:16px;background:var(--purple);color:#fff;font-weight:900}\n#mek-l5-final .footerbrand span{color:var(--yellow)}\n\n@media(max-width:820px){\n  #mek-l5-final .questiongrid,#mek-l5-final .finalgrid,#mek-l5-final .minirow{grid-template-columns:1fr}\n  #mek-l5-final .guide{grid-template-columns:70px 1fr}\n  #mek-l5-final .avatar{width:66px;height:66px;font-size:35px}\n  #mek-l5-final .content{padding:16px}\n  #mek-l5-final .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 5 \u00b7 Review Time!<\/h2>\n  <p class=\"subtitle\">A complete speaking review of Lessons 1\u20134: personal information, school things, family, possessives, singular\/plural and demonstratives.<\/p>\n  <div class=\"identity-note\">&#x1f511; Remember \u00b7 connect \u00b7 speak \u00b7 celebrate what you can do<\/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>Me &#038; English<\/small><\/div>\n    <div class=\"step locked\" data-step=\"3\"><div class=\"dot\">3<\/div><small>School Things<\/small><\/div>\n    <div class=\"step locked\" data-step=\"4\"><div class=\"dot\">4<\/div><small>My Family<\/small><\/div>\n    <div class=\"step locked\" data-step=\"5\"><div class=\"dot\">5<\/div><small>One \/ Many<\/small><\/div>\n    <div class=\"step locked\" data-step=\"6\"><div class=\"dot\">6<\/div><small>All About Me<\/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=\"l5pts\">0<\/span> points<\/div>\n  <div class=\"pill\">&#x1f511; Step <span id=\"l5level\">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> \u201cToday is Review Time! Four little keys are hidden in everything you already learned. Let\u2019s see how much English you can use.\u201d<\/div>\n  <\/div>\n\n  <div class=\"card lilac\">\n    <h3>1. The four little keys<\/h3>\n    <div class=\"storypaper\">\n      Keyla, Leo and Misu arrive at class and find four golden keys.\n      The first key says, \u201c<strong>Hello! My name is Keyla.<\/strong>\u201d\n      The second key is next to a backpack: \u201c<strong>This is my backpack.<\/strong>\u201d\n      The third key shows a family photo: \u201c<strong>Her name is Ana.<\/strong>\u201d\n      The fourth key is beside two books: \u201c<strong>These are books.<\/strong>\u201d\n      Leo smiles. \u201cWe already know these words!\u201d\n      Misu meows happily. It is time to use all their English together.\n    <\/div>\n    <div class=\"actions\">\n      <button class=\"btn yellowbtn listen\" data-text=\"Keyla, Leo and Misu arrive at class and find four golden keys. The first key says, Hello! My name is Keyla. The second key is next to a backpack. This is my backpack. The third key shows a family photo. Her name is Ana. The fourth key is beside two books. These are books. Leo smiles. We already know these words! Misu meows happily. It is time to use all their English together.\">&#x1f50a; Listen to the story<\/button>\n    <\/div>\n\n    <div class=\"valuecorner\">\n      <div class=\"valueicon\">&#x1f331;<\/div>\n      <div><b>Value corner \u00b7 Perseverance<\/b><br>Learning grows little by little. We can thank God for what we have learned and keep practicing with patience.<\/div>\n    <\/div>\n  <\/div>\n\n  <div class=\"card\">\n    <h3>3 Story Missions<\/h3>\n    <p class=\"muted\">Complete the three questions. Listening is helpful, but it does not block your progress.<\/p>\n\n    <div class=\"missionstack\">\n      <div class=\"reviewmission story-m5\" data-id=\"1\" data-done=\"0\">\n        <h4>Mission 1<\/h4>\n        <b>Which sentence introduces a person?<\/b>\n        <div class=\"choices\"><button class=\"choice\" data-correct=\"1\">My name is Keyla.<\/button><button class=\"choice\">These are books.<\/button><\/div>\n      <\/div>\n      <div class=\"reviewmission story-m5\" data-id=\"2\" data-done=\"0\">\n        <h4>Mission 2<\/h4>\n        <b>Which sentence talks about one school thing?<\/b>\n        <div class=\"choices\"><button class=\"choice\" data-correct=\"1\">This is my backpack.<\/button><button class=\"choice\">Her name is Ana.<\/button><\/div>\n      <\/div>\n      <div class=\"reviewmission story-m5\" data-id=\"3\" data-done=\"0\">\n        <h4>Mission 3<\/h4>\n        <b>Which sentence talks about many things?<\/b>\n        <div class=\"choices\"><button class=\"choice\">That is a book.<\/button><button class=\"choice\" data-correct=\"1\">These are books.<\/button><\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"progressbig\">&#x2b50; Story missions completed: <span id=\"storyProgress5\">0<\/span>\/3<\/div>\n    <div class=\"unlock\" id=\"unlockStory5\">&#x1f512; Complete the 3 story missions.<\/div>\n    <div class=\"actions\"><button class=\"btn primary next\" data-next=\"2\" id=\"nextStory5\" disabled>Review Station 1 \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> \u201cStation 1: Me and My English. Three missions only. Reach 3\/3 and the next station opens.\u201d<\/div>\n  <\/div>\n\n  <div class=\"card yellow\">\n    <span class=\"stationtag\">REVIEW STATION 1<\/span>\n    <h3>2. Me and My English<\/h3>\n\n    <div class=\"missionstack\">\n      <div class=\"reviewmission\" id=\"s2m1\">\n        <h4>Mission 1 \u00b7 Greeting<\/h4>\n        <b>Choose the best greeting.<\/b>\n        <div class=\"choices\">\n          <button class=\"choice s2choice\" data-mission=\"1\" data-val=\"hello\">Hello!<\/button>\n          <button class=\"choice s2choice\" data-mission=\"1\" data-val=\"books\">Books!<\/button>\n        <\/div>\n        <div class=\"model\" id=\"s2model1\">Choose first.<\/div>\n        <div class=\"actions\"><button class=\"btn yellowbtn\" id=\"s2listen1\" disabled>&#x1f50a; Listen<\/button><button class=\"btn primary\" id=\"s2done1\" disabled>&#x1f3a4; I said it<\/button><\/div>\n      <\/div>\n\n      <div class=\"reviewmission\" id=\"s2m2\">\n        <h4>Mission 2 \u00b7 Name + TO BE<\/h4>\n        <b>I ___ Leo.<\/b>\n        <div class=\"choices\">\n          <button class=\"choice s2choice\" data-mission=\"2\" data-val=\"am\">am<\/button>\n          <button class=\"choice s2choice\" data-mission=\"2\" data-val=\"is\">is<\/button>\n          <button class=\"choice s2choice\" data-mission=\"2\" data-val=\"are\">are<\/button>\n        <\/div>\n        <div class=\"model\" id=\"s2model2\">Choose first.<\/div>\n        <div class=\"actions\"><button class=\"btn yellowbtn\" id=\"s2listen2\" disabled>&#x1f50a; Listen<\/button><button class=\"btn primary\" id=\"s2done2\" disabled>&#x1f3a4; I said it<\/button><\/div>\n      <\/div>\n\n      <div class=\"reviewmission\" id=\"s2m3\">\n        <h4>Mission 3 \u00b7 Personal question<\/h4>\n        <b>How old are you?<\/b>\n        <div class=\"choices\">\n          <button class=\"choice s2choice\" data-mission=\"3\" data-val=\"age\">I am eight years old.<\/button>\n          <button class=\"choice s2choice\" data-mission=\"3\" data-val=\"name\">My name is Leo.<\/button>\n        <\/div>\n        <div class=\"model\" id=\"s2model3\">Choose first.<\/div>\n        <div class=\"actions\"><button class=\"btn yellowbtn\" id=\"s2listen3\" disabled>&#x1f50a; Listen<\/button><button class=\"btn primary\" id=\"s2done3\" disabled>&#x1f3a4; I said it<\/button><\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"progressbig\">&#x1f64b; Station 1 completed: <span id=\"s2progress\">0<\/span>\/3<\/div>\n    <div class=\"unlock\" id=\"unlockS2\">&#x1f512; Complete the 3 missions.<\/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=\"nextS2\" disabled>School Things \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> \u201cStation 2: school things. Use this, that and the words you already know.\u201d<\/div>\n  <\/div>\n\n  <div class=\"card\">\n    <span class=\"stationtag\">REVIEW STATION 2<\/span>\n    <h3>3. My School Things<\/h3>\n\n    <div class=\"missionstack\">\n      <div class=\"reviewmission\" id=\"s3m1\">\n        <h4>Mission 1 \u00b7 Vocabulary<\/h4>\n        <div class=\"iconrow\">&#x1f392;<\/div>\n        <b>What is this?<\/b>\n        <div class=\"choices\"><button class=\"choice s3choice\" data-mission=\"1\" data-val=\"backpack\">backpack<\/button><button class=\"choice s3choice\" data-mission=\"1\" data-val=\"chair\">chair<\/button><\/div>\n        <div class=\"model\" id=\"s3model1\">Choose first.<\/div>\n        <div class=\"actions\"><button class=\"btn yellowbtn\" id=\"s3listen1\" disabled>&#x1f50a; Listen<\/button><button class=\"btn primary\" id=\"s3done1\" disabled>&#x1f3a4; I said it<\/button><\/div>\n      <\/div>\n\n      <div class=\"reviewmission\" id=\"s3m2\">\n        <h4>Mission 2 \u00b7 Near<\/h4>\n        <div class=\"iconrow\">&#x1f932; &#x270f;&#xfe0f;<\/div>\n        <b>Choose the correct sentence.<\/b>\n        <div class=\"choices\"><button class=\"choice s3choice\" data-mission=\"2\" data-val=\"this\">This is a pencil.<\/button><button class=\"choice s3choice\" data-mission=\"2\" data-val=\"that\">That is a pencil.<\/button><\/div>\n        <div class=\"model\" id=\"s3model2\">Choose first.<\/div>\n        <div class=\"actions\"><button class=\"btn yellowbtn\" id=\"s3listen2\" disabled>&#x1f50a; Listen<\/button><button class=\"btn primary\" id=\"s3done2\" disabled>&#x1f3a4; I said it<\/button><\/div>\n      <\/div>\n\n      <div class=\"reviewmission\" id=\"s3m3\">\n        <h4>Mission 3 \u00b7 Far<\/h4>\n        <div class=\"iconrow\">&#x1f449; &#x1f4d8;<\/div>\n        <b>Choose the correct sentence.<\/b>\n        <div class=\"choices\"><button class=\"choice s3choice\" data-mission=\"3\" data-val=\"this\">This is my book.<\/button><button class=\"choice s3choice\" data-mission=\"3\" data-val=\"that\">That is my book.<\/button><\/div>\n        <div class=\"model\" id=\"s3model3\">Choose first.<\/div>\n        <div class=\"actions\"><button class=\"btn yellowbtn\" id=\"s3listen3\" disabled>&#x1f50a; Listen<\/button><button class=\"btn primary\" id=\"s3done3\" disabled>&#x1f3a4; I said it<\/button><\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"progressbig\">&#x1f392; Station 2 completed: <span id=\"s3progress\">0<\/span>\/3<\/div>\n    <div class=\"unlock\" id=\"unlockS3\">&#x1f512; Complete the 3 missions.<\/div>\n    <div class=\"actions\"><button class=\"btn soft next\" data-next=\"2\">\u2190 Me &#038; English<\/button><button class=\"btn primary next\" data-next=\"4\" id=\"nextS3\" disabled>My Family \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 gray\">&#x1f431;<\/div>\n    <div class=\"speech\"><strong>Misu says:<\/strong> \u201cStation 3: family and possessive adjectives. Three missions. Nothing extra blocks the next step.\u201d<\/div>\n  <\/div>\n\n  <div class=\"card lilac\">\n    <span class=\"stationtag\">REVIEW STATION 3<\/span>\n    <h3>4. My Family<\/h3>\n\n    <div class=\"missionstack\">\n      <div class=\"reviewmission\" id=\"s4m1\">\n        <h4>Mission 1 \u00b7 Her<\/h4>\n        <b>Ana is a woman. ___ name is Ana.<\/b>\n        <div class=\"choices\"><button class=\"choice s4choice\" data-mission=\"1\" data-val=\"her\">Her<\/button><button class=\"choice s4choice\" data-mission=\"1\" data-val=\"his\">His<\/button><\/div>\n        <div class=\"model\" id=\"s4model1\">Choose first.<\/div>\n        <div class=\"actions\"><button class=\"btn yellowbtn\" id=\"s4listen1\" disabled>&#x1f50a; Listen<\/button><button class=\"btn primary\" id=\"s4done1\" disabled>&#x1f3a4; I said it<\/button><\/div>\n      <\/div>\n\n      <div class=\"reviewmission\" id=\"s4m2\">\n        <h4>Mission 2 \u00b7 His<\/h4>\n        <b>Ezekiel is a boy. ___ name is Ezekiel.<\/b>\n        <div class=\"choices\"><button class=\"choice s4choice\" data-mission=\"2\" data-val=\"her\">Her<\/button><button class=\"choice s4choice\" data-mission=\"2\" data-val=\"his\">His<\/button><\/div>\n        <div class=\"model\" id=\"s4model2\">Choose first.<\/div>\n        <div class=\"actions\"><button class=\"btn yellowbtn\" id=\"s4listen2\" disabled>&#x1f50a; Listen<\/button><button class=\"btn primary\" id=\"s4done2\" disabled>&#x1f3a4; I said it<\/button><\/div>\n      <\/div>\n\n      <div class=\"reviewmission\" id=\"s4m3\">\n        <h4>Mission 3 \u00b7 Our<\/h4>\n        <b>Keyla and Leo say: \u201cMisu is ___ friend.\u201d<\/b>\n        <div class=\"choices\"><button class=\"choice s4choice\" data-mission=\"3\" data-val=\"our\">our<\/button><button class=\"choice s4choice\" data-mission=\"3\" data-val=\"their\">their<\/button><\/div>\n        <div class=\"model\" id=\"s4model3\">Choose first.<\/div>\n        <div class=\"actions\"><button class=\"btn yellowbtn\" id=\"s4listen3\" disabled>&#x1f50a; Listen<\/button><button class=\"btn primary\" id=\"s4done3\" disabled>&#x1f3a4; I said it<\/button><\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"progressbig\">&#x1f468;&#x200d;&#x1f469;&#x200d;&#x1f467;&#x200d;&#x1f466; Station 3 completed: <span id=\"s4progress\">0<\/span>\/3<\/div>\n    <div class=\"unlock\" id=\"unlockS4\">&#x1f512; Complete the 3 missions.<\/div>\n    <div class=\"actions\"><button class=\"btn soft next\" data-next=\"3\">\u2190 School Things<\/button><button class=\"btn primary next\" data-next=\"5\" id=\"nextS4\" disabled>One or Many \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 purple\">&#x1f467;&#x1f3fb;<\/div>\n    <div class=\"speech\"><strong>Keyla says:<\/strong> \u201cStation 4: one or many. Remember: this\/that for one, these\/those for many.\u201d<\/div>\n  <\/div>\n\n  <div class=\"card yellow\">\n    <span class=\"stationtag\">REVIEW STATION 4<\/span>\n    <h3>5. One or Many?<\/h3>\n\n    <div class=\"missionstack\">\n      <div class=\"reviewmission\" id=\"s5m1\">\n        <h4>Mission 1 \u00b7 ONE + NEAR<\/h4>\n        <div class=\"iconrow\">&#x1f932; &#x1f4d8;<\/div>\n        <div class=\"choices\"><button class=\"choice s5choice\" data-mission=\"1\" data-val=\"this\">This is a book.<\/button><button class=\"choice s5choice\" data-mission=\"1\" data-val=\"these\">These are books.<\/button><\/div>\n        <div class=\"model\" id=\"s5model1\">Choose first.<\/div>\n        <div class=\"actions\"><button class=\"btn yellowbtn\" id=\"s5listen1\" disabled>&#x1f50a; Listen<\/button><button class=\"btn primary\" id=\"s5done1\" disabled>&#x1f3a4; I said it<\/button><\/div>\n      <\/div>\n\n      <div class=\"reviewmission\" id=\"s5m2\">\n        <h4>Mission 2 \u00b7 MANY + NEAR<\/h4>\n        <div class=\"iconrow\">&#x1f932; &#x270f;&#xfe0f;&#x270f;&#xfe0f;<\/div>\n        <div class=\"choices\"><button class=\"choice s5choice\" data-mission=\"2\" data-val=\"this\">This is a pencil.<\/button><button class=\"choice s5choice\" data-mission=\"2\" data-val=\"these\">These are pencils.<\/button><\/div>\n        <div class=\"model\" id=\"s5model2\">Choose first.<\/div>\n        <div class=\"actions\"><button class=\"btn yellowbtn\" id=\"s5listen2\" disabled>&#x1f50a; Listen<\/button><button class=\"btn primary\" id=\"s5done2\" disabled>&#x1f3a4; I said it<\/button><\/div>\n      <\/div>\n\n      <div class=\"reviewmission\" id=\"s5m3\">\n        <h4>Mission 3 \u00b7 MANY + FAR<\/h4>\n        <div class=\"iconrow\">&#x1f449; &#x1f392;&#x1f392;<\/div>\n        <div class=\"choices\"><button class=\"choice s5choice\" data-mission=\"3\" data-val=\"that\">That is a backpack.<\/button><button class=\"choice s5choice\" data-mission=\"3\" data-val=\"those\">Those are backpacks.<\/button><\/div>\n        <div class=\"model\" id=\"s5model3\">Choose first.<\/div>\n        <div class=\"actions\"><button class=\"btn yellowbtn\" id=\"s5listen3\" disabled>&#x1f50a; Listen<\/button><button class=\"btn primary\" id=\"s5done3\" disabled>&#x1f3a4; I said it<\/button><\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"progressbig\">&#x270f;&#xfe0f;&#x270f;&#xfe0f; Station 4 completed: <span id=\"s5progress\">0<\/span>\/3<\/div>\n    <div class=\"unlock\" id=\"unlockS5\">&#x1f512; Complete the 3 missions.<\/div>\n    <div class=\"actions\"><button class=\"btn soft next\" data-next=\"4\">\u2190 My Family<\/button><button class=\"btn primary next\" data-next=\"6\" id=\"nextS5\" disabled>All About Me \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> \u201cNow combine what you know. Complete exactly THREE All About Me missions. When the counter reaches 3\/3, Final Speaking opens automatically.\u201d<\/div>\n  <\/div>\n\n  <div class=\"card\">\n    <h3>6. All About Me \u00b7 3 Production Missions<\/h3>\n    <p class=\"muted\">\n      Complete the three cards. You may press <b>Build<\/b> first, or press <b>I said it<\/b> after filling the information.\n      There are no hidden requirements.\n    <\/p>\n\n    <div class=\"missionstack\">\n\n      <div class=\"reviewmission\" id=\"s6m1\">\n        <h4>Mission 1 \u00b7 Introduce yourself<\/h4>\n        <div class=\"minirow\">\n          <label>Name\n            <input id=\"reviewName5\" maxlength=\"28\" placeholder=\"e.g. Ana\">\n          <\/label>\n          <label>Age\n            <select id=\"reviewAge5\">\n              <option value=\"\">Choose<\/option>\n              <option>6<\/option><option>7<\/option><option>8<\/option><option>9<\/option>\n              <option>10<\/option><option>11<\/option><option>12<\/option><option>13<\/option>\n            <\/select>\n          <\/label>\n        <\/div>\n\n        <div class=\"model\" id=\"s6model1\">Hello! My name is ____. I am ____ years old.<\/div>\n\n        <div class=\"actions\">\n          <button class=\"btn yellowbtn\" id=\"s6build1\">&#x2728; Build<\/button>\n          <button class=\"btn soft\" id=\"s6listen1\" disabled>&#x1f50a; Listen<\/button>\n          <button class=\"btn primary\" id=\"s6done1\">&#x1f3a4; I said it<\/button>\n        <\/div>\n      <\/div>\n\n      <div class=\"reviewmission\" id=\"s6m2\">\n        <h4>Mission 2 \u00b7 Talk about family<\/h4>\n        <div class=\"minirow\">\n          <label>Family member\n            <select id=\"reviewFamily5\">\n              <option value=\"\">Choose<\/option>\n              <option value=\"mother\">mother<\/option>\n              <option value=\"father\">father<\/option>\n              <option value=\"sister\">sister<\/option>\n              <option value=\"brother\">brother<\/option>\n            <\/select>\n          <\/label>\n          <label>Name\n            <input id=\"reviewFamilyName5\" maxlength=\"28\" placeholder=\"e.g. Ana\">\n          <\/label>\n        <\/div>\n\n        <div class=\"model\" id=\"s6model2\">This is my ____. His\/Her name is ____.<\/div>\n\n        <div class=\"actions\">\n          <button class=\"btn yellowbtn\" id=\"s6build2\">&#x2728; Build<\/button>\n          <button class=\"btn soft\" id=\"s6listen2\" disabled>&#x1f50a; Listen<\/button>\n          <button class=\"btn primary\" id=\"s6done2\">&#x1f3a4; I said it<\/button>\n        <\/div>\n      <\/div>\n\n      <div class=\"reviewmission\" id=\"s6m3\">\n        <h4>Mission 3 \u00b7 Show and Tell<\/h4>\n        <div class=\"minirow\">\n          <label>Number\n            <select id=\"reviewNumber5\">\n              <option value=\"\">Choose<\/option>\n              <option value=\"one\">one<\/option>\n              <option value=\"many\">many<\/option>\n            <\/select>\n          <\/label>\n          <label>Object\n            <select id=\"reviewObject5\">\n              <option value=\"\">Choose<\/option>\n              <option value=\"book\">book<\/option>\n              <option value=\"pencil\">pencil<\/option>\n              <option value=\"pen\">pen<\/option>\n              <option value=\"backpack\">backpack<\/option>\n            <\/select>\n          <\/label>\n        <\/div>\n\n        <div class=\"model\" id=\"s6model3\">Choose one or many and an object.<\/div>\n\n        <div class=\"actions\">\n          <button class=\"btn yellowbtn\" id=\"s6build3\">&#x2728; Build<\/button>\n          <button class=\"btn soft\" id=\"s6listen3\" disabled>&#x1f50a; Listen<\/button>\n          <button class=\"btn primary\" id=\"s6done3\">&#x1f3a4; I said it<\/button>\n        <\/div>\n      <\/div>\n\n    <\/div>\n\n    <div class=\"progressbig\">\n      &#x1f31f; All About Me completed: <span id=\"s6progress\">0<\/span>\/3\n    <\/div>\n\n    <div class=\"card blue\" style=\"margin-top:16px\">\n      <h3 style=\"font-size:22px\">&#x1f3ad; Build my dialogue<\/h3>\n      <p class=\"muted\">\n        This dialogue uses the information you entered above.\n        <b>It is optional and does not block Step 7.<\/b>\n      <\/p>\n\n      <div class=\"actions\">\n        <button class=\"btn yellowbtn\" id=\"buildReviewDialogue5\">&#x2728; Build my dialogue<\/button>\n        <button class=\"btn bluebtn\" id=\"listenReviewDialogue5\" disabled>&#x1f50a; Listen to dialogue<\/button>\n      <\/div>\n\n      <div class=\"dialogue\" id=\"reviewDialogue5\" style=\"margin-top:12px\">\n        <div class=\"line\"><div class=\"who\">Keyla<\/div><div>Hello! What is your name?<\/div><\/div>\n        <div class=\"line leo\"><div class=\"who\">You<\/div><div>My name is ________.<\/div><\/div>\n        <div class=\"line\"><div class=\"who\">Keyla<\/div><div>How old are you?<\/div><\/div>\n        <div class=\"line leo\"><div class=\"who\">You<\/div><div>I am ________ years old.<\/div><\/div>\n        <div class=\"line\"><div class=\"who\">Keyla<\/div><div>Tell me about your family.<\/div><\/div>\n        <div class=\"line leo\"><div class=\"who\">You<\/div><div>This is my ________.<\/div><\/div>\n        <div class=\"line\"><div class=\"who\">Keyla<\/div><div>Show me a school thing.<\/div><\/div>\n        <div class=\"line leo\"><div class=\"who\">You<\/div><div>This is \/ These are my ________.<\/div><\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"unlock\" id=\"unlockS6\">&#x1f512; Complete Mission 1, Mission 2 and Mission 3.<\/div>\n\n    <div class=\"actions\">\n      <button class=\"btn soft next\" data-next=\"5\">\u2190 One or Many<\/button>\n      <button class=\"btn primary next\" data-next=\"7\" id=\"nextS6\" disabled>Final Speaking \u2192<\/button>\n    <\/div>\n  <\/div>\n<\/section>\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> \u201cYou reached the final review! Complete five speaking missions. Nothing else is required to finish.\u201d<\/div>\n  <\/div>\n\n  <div class=\"card lilac\">\n    <h3>7. Final Review Challenge<\/h3>\n    <p class=\"muted\">Complete all five speaking missions. The recorder is optional practice.<\/p>\n\n    <div class=\"finalgrid\">\n      <div class=\"finalmission final-m5\" data-done=\"0\">\n        <div class=\"mnum\">1<\/div><strong>Introduce yourself: name + age.<\/strong>\n        <div class=\"actions\"><button class=\"btn yellowbtn listen\" data-text=\"Introduce yourself. Say your name and age.\">&#x1f50a; Prompt<\/button><button class=\"btn primary finalDone5\">&#x1f3a4; Done<\/button><\/div>\n      <\/div>\n\n      <div class=\"finalmission final-m5\" data-done=\"0\">\n        <div class=\"mnum\">2<\/div><strong>Say one sentence about a school thing using this or that.<\/strong>\n        <div class=\"actions\"><button class=\"btn yellowbtn listen\" data-text=\"Say one sentence about a school thing using this or that.\">&#x1f50a; Prompt<\/button><button class=\"btn primary finalDone5\">&#x1f3a4; Done<\/button><\/div>\n      <\/div>\n\n      <div class=\"finalmission final-m5\" data-done=\"0\">\n        <div class=\"mnum\">3<\/div><strong>Talk about one person in your family using my + his\/her.<\/strong>\n        <div class=\"actions\"><button class=\"btn yellowbtn listen\" data-text=\"Talk about one person in your family. Use my and his or her.\">&#x1f50a; Prompt<\/button><button class=\"btn primary finalDone5\">&#x1f3a4; Done<\/button><\/div>\n      <\/div>\n\n      <div class=\"finalmission final-m5\" data-done=\"0\">\n        <div class=\"mnum\">4<\/div><strong>Say one plural sentence using these or those.<\/strong>\n        <div class=\"actions\"><button class=\"btn yellowbtn listen\" data-text=\"Say one plural sentence using these or those.\">&#x1f50a; Prompt<\/button><button class=\"btn primary finalDone5\">&#x1f3a4; Done<\/button><\/div>\n      <\/div>\n\n      <div class=\"finalmission final-m5\" data-done=\"0\">\n        <div class=\"mnum\">5<\/div><strong>Ask one question in English and answer it.<\/strong>\n        <div class=\"actions\"><button class=\"btn yellowbtn listen\" data-text=\"Ask one question in English and answer it.\">&#x1f50a; Prompt<\/button><button class=\"btn primary finalDone5\">&#x1f3a4; Done<\/button><\/div>\n      <\/div>\n\n      <div class=\"finalmission\">\n        <div class=\"mnum\">\u2605<\/div><strong>Bonus: give a 30-second \u201cAll About Me\u201d presentation.<\/strong>\n        <div class=\"actions\"><button class=\"btn yellowbtn listen\" data-text=\"Bonus. Give a thirty second All About Me presentation.\">&#x1f50a; Prompt<\/button><\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"progressbig\">&#x1f3c6; Final missions completed: <span id=\"finalProgress5\">0<\/span>\/5<\/div>\n  <\/div>\n\n  <div class=\"card yellow\">\n    <h3>&#x1f399;&#xfe0f; Optional final recording<\/h3>\n    <p class=\"muted\">Record your \u201cAll About Me\u201d presentation and listen to yourself.<\/p>\n    <div class=\"rec\">\n      <div class=\"actions\"><button class=\"btn red startRec5\">\u25cf Start recording<\/button><button class=\"btn soft stopRec5\" disabled>\u25a0 Stop<\/button><\/div>\n      <div class=\"recstatus\" aria-live=\"polite\"><\/div>\n      <audio class=\"playback\" controls hidden><\/audio>\n    <\/div>\n  <\/div>\n\n  <div class=\"card\">\n    <div class=\"unlock\" id=\"unlockFinal5\">&#x1f512; Complete the 5 final speaking missions.<\/div>\n    <div class=\"actions\"><button class=\"btn soft next\" data-next=\"6\">\u2190 All About Me<\/button><button class=\"btn green\" id=\"finishL5\" disabled>\u2605 Finish Review Time!<\/button><\/div>\n\n    <div class=\"finish\" id=\"finishBoxL5\">\n      <div class=\"big\">&#x1f511;&#x1f49c;&#x1f3c6;<\/div>\n      <h3>Review Time complete!<\/h3>\n      <p>You connected your English from Lessons 1\u20134 and used it to talk about yourself, school things, family and one or many objects.<\/p>\n      <div class=\"badge\">Cuentos ke Cuentan \u00b7 English Key Reviewer<\/div>\n      <p><strong>Total: <span id=\"finalPtsL5\">0<\/span> points<\/strong><\/p>\n    <\/div>\n  <\/div>\n<\/section>\n\n<\/main>\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-l5-final');\n  if(!root)return;\n\n  let pts=0, unlocked=1;\n  const ptsEl=root.querySelector('#l5pts');\n  const levelEl=root.querySelector('#l5level');\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';u.rate=.80;u.pitch=1.04;\n    window.speechSynthesis.speak(u);\n  }\n\n  root.querySelectorAll('.listen').forEach(b=>b.addEventListener('click',()=>speak(b.dataset.text)));\n\n  function unlockStep(n){\n    if(n>unlocked)unlocked=n;\n    root.querySelectorAll('.step').forEach(s=>{\n      const k=Number(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  root.querySelectorAll('.next').forEach(b=>b.addEventListener('click',()=>show(Number(b.dataset.next))));\n\n  \/\/ Generic 3-mission multiple-choice station creator.\n  function setupThreeMissionStation(config){\n    const completed=new Set();\n\n    config.answers.forEach((answer,index)=>{\n      const mission=index+1;\n      const card=root.querySelector('#'+config.prefix+'m'+mission);\n      const buttons=card.querySelectorAll('.'+config.choiceClass);\n      const model=root.querySelector('#'+config.prefix+'model'+mission);\n      const listenBtn=root.querySelector('#'+config.prefix+'listen'+mission);\n      const doneBtn=root.querySelector('#'+config.prefix+'done'+mission);\n      const sentence=config.sentences[index];\n\n      buttons.forEach(btn=>{\n        btn.addEventListener('click',()=>{\n          if(card.dataset.answered==='1'||completed.has(mission))return;\n          if(btn.dataset.val===answer){\n            card.dataset.answered='1';\n            btn.classList.add('correct');\n            buttons.forEach(x=>x.disabled=true);\n            model.textContent=sentence;\n            listenBtn.disabled=false;\n            doneBtn.disabled=false;\n            addPts(2);\n          }else{\n            btn.classList.add('wrong');\n            setTimeout(()=>btn.classList.remove('wrong'),700);\n          }\n        });\n      });\n\n      listenBtn.addEventListener('click',()=>speak(sentence));\n\n      doneBtn.addEventListener('click',()=>{\n        if(card.dataset.answered!=='1'||completed.has(mission))return;\n        completed.add(mission);\n        card.classList.add('done');\n        doneBtn.textContent='\u2605 Mission complete';\n        doneBtn.disabled=true;\n        addPts(2);\n\n        root.querySelector('#'+config.progressId).textContent=completed.size;\n\n        if(completed.size===3){\n          unlockStep(config.nextStep);\n          root.querySelector('#'+config.nextButtonId).disabled=false;\n          root.querySelector('#'+config.unlockId).textContent='&#x1f511; 3\/3 complete. Next step unlocked!';\n        }else{\n          const left=3-completed.size;\n          root.querySelector('#'+config.unlockId).textContent='\u2713 Great! Complete '+left+' more mission'+(left===1?'':'s')+'.';\n        }\n      });\n    });\n  }\n\n  \/\/ STEP 1: exactly 3 story missions.\n  const storyCompleted=new Set();\n  root.querySelectorAll('.story-m5').forEach(card=>{\n    card.querySelectorAll('.choice').forEach(btn=>{\n      btn.addEventListener('click',()=>{\n        if(card.dataset.done==='1')return;\n        if(btn.dataset.correct==='1'){\n          card.dataset.done='1';\n          btn.classList.add('correct');\n          card.querySelectorAll('.choice').forEach(x=>x.disabled=true);\n          card.classList.add('done');\n          const id=Number(card.dataset.id);\n          storyCompleted.add(id);\n          addPts(2);\n          root.querySelector('#storyProgress5').textContent=storyCompleted.size;\n          if(storyCompleted.size===3){\n            unlockStep(2);\n            root.querySelector('#nextStory5').disabled=false;\n            root.querySelector('#unlockStory5').textContent='&#x1f511; 3\/3 complete. Review Station 1 unlocked!';\n          }\n        }else{\n          btn.classList.add('wrong');\n          setTimeout(()=>btn.classList.remove('wrong'),700);\n        }\n      });\n    });\n  });\n\n  \/\/ STEP 2\n  setupThreeMissionStation({\n    prefix:'s2',\n    choiceClass:'s2choice',\n    answers:['hello','am','age'],\n    sentences:['Hello! Nice to meet you.','I am Leo.','I am eight years old.'],\n    progressId:'s2progress',\n    unlockId:'unlockS2',\n    nextButtonId:'nextS2',\n    nextStep:3\n  });\n\n  \/\/ STEP 3\n  setupThreeMissionStation({\n    prefix:'s3',\n    choiceClass:'s3choice',\n    answers:['backpack','this','that'],\n    sentences:['This is a backpack.','This is a pencil.','That is my book.'],\n    progressId:'s3progress',\n    unlockId:'unlockS3',\n    nextButtonId:'nextS3',\n    nextStep:4\n  });\n\n  \/\/ STEP 4\n  setupThreeMissionStation({\n    prefix:'s4',\n    choiceClass:'s4choice',\n    answers:['her','his','our'],\n    sentences:['Her name is Ana.','His name is Ezekiel.','Misu is our friend.'],\n    progressId:'s4progress',\n    unlockId:'unlockS4',\n    nextButtonId:'nextS4',\n    nextStep:5\n  });\n\n  \/\/ STEP 5\n  setupThreeMissionStation({\n    prefix:'s5',\n    choiceClass:'s5choice',\n    answers:['this','these','those'],\n    sentences:['This is a book.','These are pencils.','Those are backpacks.'],\n    progressId:'s5progress',\n    unlockId:'unlockS5',\n    nextButtonId:'nextS5',\n    nextStep:6\n  });\n\n  \/\/ STEP 6 - THREE ROBUST PRODUCTION MISSIONS + DYNAMIC DIALOGUE\n  const s6Completed=new Set();\n  const s6Sentences={1:'',2:'',3:''};\n\n  function pluralize5(word){\n    return word+'s';\n  }\n\n  function updateS6Progress(){\n    root.querySelector('#s6progress').textContent=s6Completed.size;\n\n    if(s6Completed.size===3){\n      unlockStep(7);\n      root.querySelector('#nextS6').disabled=false;\n      root.querySelector('#unlockS6').textContent='&#x1f511; 3\/3 complete. Final Speaking unlocked!';\n    }else{\n      const left=3-s6Completed.size;\n      root.querySelector('#unlockS6').textContent=\n        '\u2713 Complete '+left+' more mission'+(left===1?'':'s')+' to unlock Final Speaking.';\n    }\n  }\n\n  function markS6Complete(id){\n    if(s6Completed.has(id))return;\n\n    s6Completed.add(id);\n    const card=root.querySelector('#s6m'+id);\n    const done=root.querySelector('#s6done'+id);\n\n    card.classList.add('done');\n    done.textContent='\u2605 Mission complete';\n    done.disabled=true;\n    addPts(3);\n\n    updateS6Progress();\n    buildReviewDialogue5(false);\n  }\n\n  function buildMission1(){\n    const name=root.querySelector('#reviewName5').value.trim();\n    const age=root.querySelector('#reviewAge5').value;\n\n    if(!name||!age){\n      root.querySelector('#s6model1').textContent='Complete your name and age first.';\n      root.querySelector('#s6listen1').disabled=true;\n      s6Sentences[1]='';\n      return false;\n    }\n\n    s6Sentences[1]='Hello! My name is '+name+'. I am '+age+' years old.';\n    root.querySelector('#s6model1').textContent=s6Sentences[1];\n    root.querySelector('#s6listen1').disabled=false;\n    return true;\n  }\n\n  function buildMission2(){\n    const relation=root.querySelector('#reviewFamily5').value;\n    const familyName=root.querySelector('#reviewFamilyName5').value.trim();\n\n    if(!relation||!familyName){\n      root.querySelector('#s6model2').textContent='Choose a family member and type a name first.';\n      root.querySelector('#s6listen2').disabled=true;\n      s6Sentences[2]='';\n      return false;\n    }\n\n    const female=(relation==='mother'||relation==='sister');\n    const possessive=female?'Her':'His';\n\n    s6Sentences[2]='This is my '+relation+'. '+possessive+' name is '+familyName+'.';\n    root.querySelector('#s6model2').textContent=s6Sentences[2];\n    root.querySelector('#s6listen2').disabled=false;\n    return true;\n  }\n\n  function buildMission3(){\n    const number=root.querySelector('#reviewNumber5').value;\n    const object=root.querySelector('#reviewObject5').value;\n\n    if(!number||!object){\n      root.querySelector('#s6model3').textContent='Choose one or many and an object first.';\n      root.querySelector('#s6listen3').disabled=true;\n      s6Sentences[3]='';\n      return false;\n    }\n\n    s6Sentences[3]=number==='one'\n      ? 'This is my '+object+'.'\n      : 'These are my '+pluralize5(object)+'.';\n\n    root.querySelector('#s6model3').textContent=s6Sentences[3];\n    root.querySelector('#s6listen3').disabled=false;\n    return true;\n  }\n\n  \/\/ Build buttons\n  root.querySelector('#s6build1').addEventListener('click',()=>{\n    if(buildMission1())buildReviewDialogue5(false);\n  });\n  root.querySelector('#s6build2').addEventListener('click',()=>{\n    if(buildMission2())buildReviewDialogue5(false);\n  });\n  root.querySelector('#s6build3').addEventListener('click',()=>{\n    if(buildMission3())buildReviewDialogue5(false);\n  });\n\n  \/\/ Listen buttons\n  root.querySelector('#s6listen1').addEventListener('click',()=>{\n    if(!s6Sentences[1])buildMission1();\n    if(s6Sentences[1])speak(s6Sentences[1]);\n  });\n  root.querySelector('#s6listen2').addEventListener('click',()=>{\n    if(!s6Sentences[2])buildMission2();\n    if(s6Sentences[2])speak(s6Sentences[2]);\n  });\n  root.querySelector('#s6listen3').addEventListener('click',()=>{\n    if(!s6Sentences[3])buildMission3();\n    if(s6Sentences[3])speak(s6Sentences[3]);\n  });\n\n  \/\/ \"I said it\" buttons validate current fields directly.\n  \/\/ This removes the old hidden-state problem: Build is helpful, but not required.\n  root.querySelector('#s6done1').addEventListener('click',()=>{\n    if(buildMission1())markS6Complete(1);\n  });\n  root.querySelector('#s6done2').addEventListener('click',()=>{\n    if(buildMission2())markS6Complete(2);\n  });\n  root.querySelector('#s6done3').addEventListener('click',()=>{\n    if(buildMission3())markS6Complete(3);\n  });\n\n  function buildReviewDialogue5(showMessage){\n    const name=root.querySelector('#reviewName5').value.trim() || '________';\n    const age=root.querySelector('#reviewAge5').value || '________';\n    const relation=root.querySelector('#reviewFamily5').value || 'family member';\n    const familyName=root.querySelector('#reviewFamilyName5').value.trim() || '________';\n    const number=root.querySelector('#reviewNumber5').value;\n    const object=root.querySelector('#reviewObject5').value || 'school thing';\n\n    const female=(relation==='mother'||relation==='sister');\n    const possessive=female?'Her':'His';\n\n    let objectSentence='This is my '+object+'.';\n    if(number==='many'){\n      objectSentence='These are my '+pluralize5(object)+'.';\n    }\n\n    const dialogueHTML=\n      '<div class=\"line\"><div class=\"who\">Keyla<\/div><div>Hello! What is your name?<\/div><\/div>'+\n      '<div class=\"line leo\"><div class=\"who\">You<\/div><div>My name is '+name+'.<\/div><\/div>'+\n      '<div class=\"line\"><div class=\"who\">Keyla<\/div><div>How old are you?<\/div><\/div>'+\n      '<div class=\"line leo\"><div class=\"who\">You<\/div><div>I am '+age+' years old.<\/div><\/div>'+\n      '<div class=\"line\"><div class=\"who\">Keyla<\/div><div>Tell me about your family.<\/div><\/div>'+\n      '<div class=\"line leo\"><div class=\"who\">You<\/div><div>This is my '+relation+'. '+possessive+' name is '+familyName+'.<\/div><\/div>'+\n      '<div class=\"line\"><div class=\"who\">Keyla<\/div><div>Show me a school thing.<\/div><\/div>'+\n      '<div class=\"line leo\"><div class=\"who\">You<\/div><div>'+objectSentence+'<\/div><\/div>';\n\n    root.querySelector('#reviewDialogue5').innerHTML=dialogueHTML;\n\n    const dialogueText=\n      'Keyla: Hello! What is your name? '+\n      'You: My name is '+name+'. '+\n      'Keyla: How old are you? '+\n      'You: I am '+age+' years old. '+\n      'Keyla: Tell me about your family. '+\n      'You: This is my '+relation+'. '+possessive+' name is '+familyName+'. '+\n      'Keyla: Show me a school thing. '+\n      'You: '+objectSentence;\n\n    root.querySelector('#listenReviewDialogue5').dataset.dialogue=dialogueText;\n    root.querySelector('#listenReviewDialogue5').disabled=false;\n\n    if(showMessage){\n      root.querySelector('#unlockS6').textContent=\n        s6Completed.size===3\n        ? '&#x1f511; Dialogue ready. Final Speaking is already unlocked!'\n        : '\u2713 Dialogue built. Remember: only the 3 missions unlock Final Speaking.';\n    }\n  }\n\n  root.querySelector('#buildReviewDialogue5').addEventListener('click',()=>{\n    buildReviewDialogue5(true);\n  });\n\n  root.querySelector('#listenReviewDialogue5').addEventListener('click',function(){\n    if(!this.dataset.dialogue){\n      buildReviewDialogue5(false);\n    }\n    speak(this.dataset.dialogue);\n  });\n\n  \/\/ Keep dialogue synchronized when the student changes information.\n  [\n    '#reviewName5','#reviewAge5','#reviewFamily5',\n    '#reviewFamilyName5','#reviewNumber5','#reviewObject5'\n  ].forEach(selector=>{\n    root.querySelector(selector).addEventListener('change',()=>buildReviewDialogue5(false));\n    root.querySelector(selector).addEventListener('input',()=>buildReviewDialogue5(false));\n  });\n\n  updateS6Progress();\n\n\n\/\/ STEP 7: five explicit missions; no self-check dependency.\n  let finalDone=0;\n  root.querySelectorAll('.finalDone5').forEach(btn=>{\n    btn.addEventListener('click',()=>{\n      const card=btn.closest('.final-m5');\n      if(card.dataset.done==='1')return;\n      card.dataset.done='1';\n      card.classList.add('done');\n      finalDone++;\n      addPts(2);\n      btn.textContent='\u2605 Done';\n      btn.className='btn green finalDone5';\n      root.querySelector('#finalProgress5').textContent=finalDone;\n\n      if(finalDone===5){\n        root.querySelector('#finishL5').disabled=false;\n        root.querySelector('#unlockFinal5').textContent='&#x1f511; 5\/5 complete. You can finish Review Time!';\n      }\n    });\n  });\n\n  \/\/ Optional recording\n  let recorder=null,stream=null,chunks=[];\n  root.querySelector('.startRec5').addEventListener('click',async function(){\n    const status=root.querySelector('.recstatus');\n    if(!navigator.mediaDevices||!navigator.mediaDevices.getUserMedia||!window.MediaRecorder){\n      status.textContent='Microphone recording is not available in this browser.';\n      return;\n    }\n    try{\n      stream=await navigator.mediaDevices.getUserMedia({audio:true});\n      chunks=[];\n      recorder=new MediaRecorder(stream);\n      recorder.ondataavailable=e=>{if(e.data.size)chunks.push(e.data)};\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 presentation!';\n        if(stream)stream.getTracks().forEach(t=>t.stop());\n      };\n      recorder.start();\n      status.textContent='\u25cf Recording\u2026 Speak clearly and take your time.';\n      this.disabled=true;\n      root.querySelector('.stopRec5').disabled=false;\n    }catch(e){\n      status.textContent='Please allow microphone access to record your voice.';\n    }\n  });\n\n  root.querySelector('.stopRec5').addEventListener('click',function(){\n    if(recorder&&recorder.state==='recording')recorder.stop();\n    this.disabled=true;\n    root.querySelector('.startRec5').disabled=false;\n  });\n\n  root.querySelector('#finishL5').addEventListener('click',function(){\n    if(finalDone!==5)return;\n    addPts(5);\n    root.querySelector('#finalPtsL5').textContent=pts;\n    root.querySelector('#finishBoxL5').classList.add('show');\n    root.querySelector('.step[data-step=\"7\"]').classList.add('done');\n    root.querySelector('#unlockFinal5').textContent='&#x1f49c; Review adventure complete!';\n    this.disabled=true;\n  });\n})();\n<\/script>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Cuentos ke Cuentan \u2661 My English Key \u00b7 Starter 1 Lesson 5 \u00b7 Review Time! A complete speaking review of Lessons 1\u20134: personal information, school [&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-1735","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/cuentoskecuentan.com\/index.php?rest_route=\/wp\/v2\/pages\/1735","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=1735"}],"version-history":[{"count":3,"href":"https:\/\/cuentoskecuentan.com\/index.php?rest_route=\/wp\/v2\/pages\/1735\/revisions"}],"predecessor-version":[{"id":1740,"href":"https:\/\/cuentoskecuentan.com\/index.php?rest_route=\/wp\/v2\/pages\/1735\/revisions\/1740"}],"wp:attachment":[{"href":"https:\/\/cuentoskecuentan.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1735"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}