{"id":1710,"date":"2026-08-19T03:17:58","date_gmt":"2026-08-19T03:17:58","guid":{"rendered":"https:\/\/cuentoskecuentan.com\/?page_id=1710"},"modified":"2026-08-19T03:18:36","modified_gmt":"2026-08-19T03:18:36","slug":"my-english-key-2-1a1","status":"publish","type":"page","link":"https:\/\/cuentoskecuentan.com\/?page_id=1710","title":{"rendered":"My English Key 2 1A1"},"content":{"rendered":"\n<!--\nMY ENGLISH KEY \u00b7 STARTER 1\nLESSON 2 \u00b7 MY SCHOOL THINGS \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-l2-ckc\">\n<style>\n#mek-l2-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  --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-l2-ckc *{box-sizing:border-box}\n#mek-l2-ckc button,#mek-l2-ckc input,#mek-l2-ckc select{font:inherit}\n#mek-l2-ckc button{touch-action:manipulation}\n\n#mek-l2-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-l2-ckc .top{\n  position:relative;\n  padding:27px 29px 23px;\n  background:\n    radial-gradient(circle at 92% 20%,rgba(246,199,68,.22) 0 54px,transparent 55px),\n    radial-gradient(circle at 82% 87%,rgba(121,61,122,.08) 0 78px,transparent 79px),\n    linear-gradient(135deg,#fff 0%,#fff 67%,#fbf6fc 100%);\n  border-bottom:5px solid var(--yellow);\n  overflow:hidden;\n}\n#mek-l2-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-l2-ckc .brandrow{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap}\n#mek-l2-ckc .ckc{font-weight:900;color:var(--purple);font-size:20px}\n#mek-l2-ckc .ckc .ke{display:inline-block;background:var(--yellow);color:var(--purple-dark);padding:1px 6px;border-radius:8px;transform:rotate(-3deg)}\n#mek-l2-ckc .keybrand{font-weight:900;color:var(--purple);font-size:18px}\n#mek-l2-ckc .keybrand b{color:var(--yellow)}\n#mek-l2-ckc h2{margin:14px 0 4px;color:var(--purple);font-size:clamp(32px,5vw,50px);line-height:1.04}\n#mek-l2-ckc .subtitle{margin:0;color:var(--gray);font-size:18px;max-width:760px}\n#mek-l2-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\/* PROGRESS PATH *\/\n#mek-l2-ckc .pathwrap{padding:18px 20px;background:var(--lilac);border-bottom:1px solid #e7dbe9;overflow-x:auto}\n#mek-l2-ckc .path{display:grid;grid-template-columns:repeat(7,minmax(92px,1fr));gap:6px;position:relative;min-width:690px}\n#mek-l2-ckc .path:before{content:\"\";position:absolute;left:6%;right:6%;top:21px;border-top:3px dashed var(--purple-mid);z-index:0}\n#mek-l2-ckc .step{position:relative;z-index:1;text-align:center}\n#mek-l2-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-l2-ckc .step.active .dot,#mek-l2-ckc .step.done .dot{background:var(--purple);color:#fff;border-color:var(--purple)}\n#mek-l2-ckc .step.done .dot{font-size:0}\n#mek-l2-ckc .step.done .dot:after{content:\"\u2713\";font-size:20px}\n#mek-l2-ckc .step.locked{opacity:.42}\n#mek-l2-ckc .step small{font-weight:900;color:var(--purple-dark);font-size:12px}\n\n#mek-l2-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-l2-ckc .pill{padding:7px 12px;border-radius:999px;background:var(--purple);color:#fff;font-weight:900}\n#mek-l2-ckc .pill.yellow{background:var(--yellow);color:var(--purple-dark)}\n#mek-l2-ckc .content{padding:25px}\n#mek-l2-ckc .screen{display:none}\n#mek-l2-ckc .screen.active{display:block}\n\n\/* STORY \/ CHARACTER IDENTITY *\/\n#mek-l2-ckc .guide{display:grid;grid-template-columns:92px 1fr;gap:16px;align-items:center;margin-bottom:18px}\n#mek-l2-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-l2-ckc .avatar.purple{background:var(--lilac-2);border-color:var(--purple)}\n#mek-l2-ckc .avatar.gray{background:#F0EFF1;border-color:#9B929D}\n#mek-l2-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-l2-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-l2-ckc .card{border:2px solid #E7DBE9;border-radius:23px;padding:20px;margin:14px 0;background:#fff}\n#mek-l2-ckc .card.yellow{background:var(--yellow-soft);border-color:#EFD873}\n#mek-l2-ckc .card.lilac{background:var(--lilac);border-color:#DCC9DF}\n#mek-l2-ckc .card h3{margin:0 0 9px;color:var(--purple);font-size:26px}\n#mek-l2-ckc .muted{color:var(--gray);margin-top:0}\n#mek-l2-ckc .storypaper{\n  background:#fff;\n  border:2px dashed var(--purple-mid);\n  border-radius:20px;\n  padding:19px;\n  font-size:18px;\n  position:relative;\n}\n#mek-l2-ckc .storypaper:after{content:\"\u2661\";position:absolute;right:16px;bottom:8px;color:var(--yellow);font-size:30px}\n#mek-l2-ckc .storypaper strong{color:var(--purple)}\n#mek-l2-ckc .valuecorner{\n  margin-top:14px;\n  display:grid;\n  grid-template-columns:55px 1fr;\n  gap:12px;\n  align-items:center;\n  background:var(--yellow-soft);\n  border-left:6px solid var(--yellow);\n  border-radius:16px;\n  padding:13px 15px;\n}\n#mek-l2-ckc .valueicon{font-size:35px;text-align:center}\n#mek-l2-ckc .valuecorner b{color:var(--purple-dark)}\n\n#mek-l2-ckc .actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:11px}\n#mek-l2-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-l2-ckc .btn:hover{transform:translateY(-1px)}\n#mek-l2-ckc .btn:disabled{opacity:.43;cursor:not-allowed;transform:none}\n#mek-l2-ckc .primary{background:var(--purple);color:#fff}\n#mek-l2-ckc .yellowbtn{background:var(--yellow);color:var(--purple-dark)}\n#mek-l2-ckc .soft{background:var(--lilac-2);color:var(--purple-dark)}\n#mek-l2-ckc .green{background:var(--green);color:#fff}\n#mek-l2-ckc .red{background:var(--red);color:#fff}\n#mek-l2-ckc .blue{background:var(--blue);color:#fff}\n\n#mek-l2-ckc .questiongrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}\n#mek-l2-ckc .question{border:2px solid #E7DBE9;border-radius:18px;padding:15px;background:#fff}\n#mek-l2-ckc .question b{display:block;color:var(--purple-dark);font-size:18px;margin-bottom:9px}\n#mek-l2-ckc .choices{display:flex;gap:8px;flex-wrap:wrap}\n#mek-l2-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-l2-ckc .choice.correct{background:var(--green-soft);border-color:var(--green);color:#2E6C4E}\n#mek-l2-ckc .choice.wrong{background:var(--red-soft);border-color:var(--red);color:#8B3E49}\n\n#mek-l2-ckc .objectgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}\n#mek-l2-ckc .objectcard{\n  text-align:center;background:#fff;border:2px solid #E6D9E8;border-radius:19px;padding:15px;\n  position:relative;overflow:hidden\n}\n#mek-l2-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-l2-ckc .objecticon{font-size:48px;line-height:1.05}\n#mek-l2-ckc .objectword{font-size:22px;font-weight:900;color:var(--purple-dark);margin:7px 0}\n#mek-l2-ckc .objectcard.done{border-color:var(--green);background:#FBFFFD}\n\n#mek-l2-ckc .distancegrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}\n#mek-l2-ckc .distancecard{border:2px solid #E5D8E7;border-radius:19px;padding:16px;background:#fff}\n#mek-l2-ckc .distancevisual{\n  min-height:115px;border-radius:16px;background:linear-gradient(135deg,var(--lilac),#fff);\n  display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:10px;position:relative\n}\n#mek-l2-ckc .distancevisual .thing{font-size:48px}\n#mek-l2-ckc .distancevisual .hand{font-size:32px}\n#mek-l2-ckc .distancevisual.far .thing{font-size:31px;transform:translateX(35px);opacity:.83}\n#mek-l2-ckc .distancevisual.far .hand{transform:translateX(-28px)}\n#mek-l2-ckc .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-l2-ckc .model{\n  margin-top:11px;border-left:6px solid var(--yellow);background:var(--lilac);border-radius:12px;\n  padding:12px 14px;color:var(--purple-dark);font-weight:900;font-size:19px\n}\n\n#mek-l2-ckc .tobegrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}\n#mek-l2-ckc .tobecard{border:2px solid #E5D8E7;border-radius:17px;padding:14px;background:#fff}\n#mek-l2-ckc .tobecard strong{display:block;color:var(--purple);font-size:21px}\n#mek-l2-ckc .tobecard span{color:var(--gray)}\n#mek-l2-ckc .tobecard.done{background:var(--green-soft);border-color:var(--green)}\n\n#mek-l2-ckc .dialogue{\n  border:2px solid #E5D8E7;border-radius:20px;background:#fff;padding:16px;\n}\n#mek-l2-ckc .line{display:grid;grid-template-columns:78px 1fr;gap:8px;padding:8px 0;border-bottom:1px dashed #E1D3E3}\n#mek-l2-ckc .line:last-child{border-bottom:0}\n#mek-l2-ckc .who{font-weight:900;color:var(--purple)}\n#mek-l2-ckc .line.leo .who{color:#4D78A5}\n#mek-l2-ckc .dialogue-builder{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px;margin-top:14px}\n#mek-l2-ckc label{font-weight:900;color:var(--purple-dark)}\n#mek-l2-ckc select,#mek-l2-ckc input{\n  width:100%;margin-top:6px;border:2px solid #D9C7DC;border-radius:12px;padding:11px 12px;background:#fff\n}\n#mek-l2-ckc select:focus,#mek-l2-ckc input:focus{outline:3px solid rgba(246,199,68,.34);border-color:var(--purple)}\n\n#mek-l2-ckc .rec{margin-top:14px;padding:15px;border:2px dashed var(--purple);border-radius:18px;background:#fff}\n#mek-l2-ckc .recstatus{min-height:24px;margin-top:8px;font-weight:900;color:var(--purple-dark)}\n#mek-l2-ckc audio{width:100%;margin-top:10px}\n#mek-l2-ckc .unlock{margin-top:14px;padding:12px 14px;border-radius:14px;background:var(--lilac);color:var(--purple-dark);font-weight:800}\n#mek-l2-ckc .feedback{margin-top:12px;padding:12px 14px;border-radius:14px;font-weight:800;display:none}\n#mek-l2-ckc .feedback.show{display:block}\n#mek-l2-ckc .feedback.ok{background:var(--green-soft);color:#2E6C4F}\n#mek-l2-ckc .feedback.try{background:var(--yellow-soft);color:#74590E}\n\n#mek-l2-ckc .missiongrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}\n#mek-l2-ckc .mission{\n  border:2px solid #E5D8E7;border-radius:18px;padding:15px;background:#fff\n}\n#mek-l2-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-l2-ckc .mission strong{color:var(--purple-dark);font-size:18px}\n#mek-l2-ckc .checkrow{display:grid;gap:9px;margin-top:13px}\n#mek-l2-ckc .selfcheck{\n  display:flex;gap:10px;align-items:center;border:2px solid #E5D8E7;border-radius:14px;padding:10px 12px;background:#fff;\n  cursor:pointer;font-weight:800\n}\n#mek-l2-ckc .selfcheck input{width:auto;margin:0;transform:scale(1.25)}\n\n#mek-l2-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-l2-ckc .finish.show{display:block}\n#mek-l2-ckc .finish .big{font-size:52px;line-height:1}\n#mek-l2-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-l2-ckc .footerbrand{text-align:center;padding:16px;background:var(--purple);color:#fff;font-weight:900}\n#mek-l2-ckc .footerbrand span{color:var(--yellow)}\n\n@media(max-width:800px){\n  #mek-l2-ckc .questiongrid,#mek-l2-ckc .objectgrid,#mek-l2-ckc .distancegrid,\n  #mek-l2-ckc .tobegrid,#mek-l2-ckc .dialogue-builder,#mek-l2-ckc .missiongrid{grid-template-columns:1fr}\n  #mek-l2-ckc .guide{grid-template-columns:70px 1fr}\n  #mek-l2-ckc .avatar{width:66px;height:66px;font-size:35px}\n  #mek-l2-ckc .content{padding:16px}\n  #mek-l2-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 2 \u00b7 My School Things<\/h2>\n    <p class=\"subtitle\">A longer speaking adventure: school objects, <b>this \/ that<\/b> and the verb <b>to be<\/b>.<\/p>\n    <div class=\"identity-note\">&#x1f511; Story \u00b7 play \u00b7 speak \u00b7 grow with purpose<\/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>Words<\/small><\/div>\n      <div class=\"step locked\" data-step=\"3\"><div class=\"dot\">3<\/div><small>This \/ That<\/small><\/div>\n      <div class=\"step locked\" data-step=\"4\"><div class=\"dot\">4<\/div><small>To Be<\/small><\/div>\n      <div class=\"step locked\" data-step=\"5\"><div class=\"dot\">5<\/div><small>Questions<\/small><\/div>\n      <div class=\"step locked\" data-step=\"6\"><div class=\"dot\">6<\/div><small>Dialogue<\/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=\"l2pts\">0<\/span> points<\/div>\n    <div class=\"pill\">&#x1f511; Step <span id=\"l2level\">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 purple\">&#x1f467;&#x1f3fb;<\/div>\n        <div class=\"speech\"><strong>Keyla says:<\/strong> \u201cEvery Cuentos ke Cuentan adventure begins with a little story. Listen first!\u201d<\/div>\n      <\/div>\n\n      <div class=\"card lilac\">\n        <h3>1. The mystery of the purple backpack<\/h3>\n        <div class=\"storypaper\" id=\"storyText\">\n          <strong>Keyla and Leo are getting ready for class.<\/strong>\n          Misu finds a purple backpack near Keyla.\n          \u201c<strong>This is my backpack<\/strong>,\u201d says Keyla.\n          Leo points to a book across the room.\n          \u201c<strong>That is my book<\/strong>,\u201d says Leo.\n          Misu sits next to a pencil case. Everyone smiles. It is time to learn!\n        <\/div>\n        <div class=\"actions\">\n          <button class=\"btn yellowbtn listen\" data-text=\"Keyla and Leo are getting ready for class. Misu finds a purple backpack near Keyla. This is my backpack, says Keyla. Leo points to a book across the room. That is my book, says Leo. Misu sits next to a pencil case. Everyone smiles. It is time to learn!\">&#x1f50a; Listen to the story<\/button>\n          <button class=\"btn primary\" id=\"storyHeard\">&#x1f442; I listened<\/button>\n        <\/div>\n\n        <div class=\"valuecorner\">\n          <div class=\"valueicon\">&#x1f49b;<\/div>\n          <div><b>Value corner \u00b7 Gratitude<\/b><br>We take care of the things God gives us to learn, grow and help others.<\/div>\n        <\/div>\n      <\/div>\n\n      <div class=\"card\">\n        <h3>Story check<\/h3>\n        <p class=\"muted\">Choose the answer. Listen again if you need help.<\/p>\n        <div class=\"questiongrid\">\n          <div class=\"question story-q\" data-ok=\"0\">\n            <b>1. What is near Keyla?<\/b>\n            <div class=\"choices\">\n              <button class=\"choice\" data-correct=\"1\">a backpack<\/button>\n              <button class=\"choice\">a chair<\/button>\n            <\/div>\n          <\/div>\n          <div class=\"question story-q\" data-ok=\"0\">\n            <b>2. What is across the room?<\/b>\n            <div class=\"choices\">\n              <button class=\"choice\" data-correct=\"1\">Leo\u2019s book<\/button>\n              <button class=\"choice\">Misu<\/button>\n            <\/div>\n          <\/div>\n        <\/div>\n        <div class=\"unlock\" id=\"unlockStory\">&#x1f512; Listen to the story and answer both questions.<\/div>\n        <div class=\"actions\"><button class=\"btn primary next\" data-next=\"2\" id=\"nextStory\" disabled>School words \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 gray\">&#x1f431;<\/div>\n        <div class=\"speech\"><strong>Misu found six school things!<\/strong> Listen, repeat and collect all six little keys.<\/div>\n      <\/div>\n\n      <div class=\"card yellow\">\n        <h3>2. School things<\/h3>\n        <p class=\"muted\">Listen to each word and say it aloud.<\/p>\n        <div class=\"objectgrid\">\n          <div class=\"objectcard\" data-worddone=\"0\"><div class=\"objecticon\">&#x1f58a;&#xfe0f;<\/div><div class=\"objectword\">pen<\/div><div class=\"actions\"><button class=\"btn yellowbtn listen\" data-text=\"pen\">&#x1f50a;<\/button><button class=\"btn primary word-said\">&#x1f3a4; I said it<\/button><\/div><\/div>\n          <div class=\"objectcard\" data-worddone=\"0\"><div class=\"objecticon\">&#x1f4d8;<\/div><div class=\"objectword\">book<\/div><div class=\"actions\"><button class=\"btn yellowbtn listen\" data-text=\"book\">&#x1f50a;<\/button><button class=\"btn primary word-said\">&#x1f3a4; I said it<\/button><\/div><\/div>\n          <div class=\"objectcard\" data-worddone=\"0\"><div class=\"objecticon\">&#x1f392;<\/div><div class=\"objectword\">backpack<\/div><div class=\"actions\"><button class=\"btn yellowbtn listen\" data-text=\"backpack\">&#x1f50a;<\/button><button class=\"btn primary word-said\">&#x1f3a4; I said it<\/button><\/div><\/div>\n          <div class=\"objectcard\" data-worddone=\"0\"><div class=\"objecticon\">&#x270f;&#xfe0f;<\/div><div class=\"objectword\">pencil<\/div><div class=\"actions\"><button class=\"btn yellowbtn listen\" data-text=\"pencil\">&#x1f50a;<\/button><button class=\"btn primary word-said\">&#x1f3a4; I said it<\/button><\/div><\/div>\n          <div class=\"objectcard\" data-worddone=\"0\"><div class=\"objecticon\">&#x1f5c3;&#xfe0f;<\/div><div class=\"objectword\">desk<\/div><div class=\"actions\"><button class=\"btn yellowbtn listen\" data-text=\"desk\">&#x1f50a;<\/button><button class=\"btn primary word-said\">&#x1f3a4; I said it<\/button><\/div><\/div>\n          <div class=\"objectcard\" data-worddone=\"0\"><div class=\"objecticon\">&#x1fa91;<\/div><div class=\"objectword\">chair<\/div><div class=\"actions\"><button class=\"btn yellowbtn listen\" data-text=\"chair\">&#x1f50a;<\/button><button class=\"btn primary word-said\">&#x1f3a4; I said it<\/button><\/div><\/div>\n        <\/div>\n        <div class=\"unlock\" id=\"unlockWords\">&#x1f512; Say all 6 words to continue.<\/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=\"nextWords\" disabled>This or That \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 purple\">&#x1f467;&#x1f3fb;<\/div>\n        <div class=\"speech\"><strong>Keyla says:<\/strong> \u201cIf it is near me, I say <em>this<\/em>. If it is farther away, I say <em>that<\/em>.\u201d<\/div>\n      <\/div>\n\n      <div class=\"card\">\n        <h3>3. This or That?<\/h3>\n        <p class=\"muted\">Look at the distance. Choose <b>This<\/b> or <b>That<\/b>. Then say the complete sentence.<\/p>\n        <div class=\"distancegrid\">\n          <div class=\"distancecard td-card\" data-answer=\"this\" data-object=\"pencil\" data-done=\"0\">\n            <span class=\"tag\">NEAR<\/span>\n            <div class=\"distancevisual\"><span class=\"hand\">&#x1f932;<\/span><span class=\"thing\">&#x270f;&#xfe0f;<\/span><\/div>\n            <div class=\"choices\"><button class=\"choice td-choice\" data-val=\"this\">This<\/button><button class=\"choice td-choice\" data-val=\"that\">That<\/button><\/div>\n            <div class=\"model td-model\">Choose first.<\/div>\n            <div class=\"actions\"><button class=\"btn yellowbtn td-listen\" disabled>&#x1f50a; Listen<\/button><button class=\"btn primary td-said\" disabled>&#x1f3a4; I said it<\/button><\/div>\n          <\/div>\n\n          <div class=\"distancecard td-card\" data-answer=\"that\" data-object=\"backpack\" data-done=\"0\">\n            <span class=\"tag\">FAR<\/span>\n            <div class=\"distancevisual far\"><span class=\"hand\">&#x1f449;<\/span><span class=\"thing\">&#x1f392;<\/span><\/div>\n            <div class=\"choices\"><button class=\"choice td-choice\" data-val=\"this\">This<\/button><button class=\"choice td-choice\" data-val=\"that\">That<\/button><\/div>\n            <div class=\"model td-model\">Choose first.<\/div>\n            <div class=\"actions\"><button class=\"btn yellowbtn td-listen\" disabled>&#x1f50a; Listen<\/button><button class=\"btn primary td-said\" disabled>&#x1f3a4; I said it<\/button><\/div>\n          <\/div>\n\n          <div class=\"distancecard td-card\" data-answer=\"this\" data-object=\"book\" data-done=\"0\">\n            <span class=\"tag\">NEAR<\/span>\n            <div class=\"distancevisual\"><span class=\"hand\">&#x1f932;<\/span><span class=\"thing\">&#x1f4d8;<\/span><\/div>\n            <div class=\"choices\"><button class=\"choice td-choice\" data-val=\"this\">This<\/button><button class=\"choice td-choice\" data-val=\"that\">That<\/button><\/div>\n            <div class=\"model td-model\">Choose first.<\/div>\n            <div class=\"actions\"><button class=\"btn yellowbtn td-listen\" disabled>&#x1f50a; Listen<\/button><button class=\"btn primary td-said\" disabled>&#x1f3a4; I said it<\/button><\/div>\n          <\/div>\n\n          <div class=\"distancecard td-card\" data-answer=\"that\" data-object=\"chair\" data-done=\"0\">\n            <span class=\"tag\">FAR<\/span>\n            <div class=\"distancevisual far\"><span class=\"hand\">&#x1f449;<\/span><span class=\"thing\">&#x1fa91;<\/span><\/div>\n            <div class=\"choices\"><button class=\"choice td-choice\" data-val=\"this\">This<\/button><button class=\"choice td-choice\" data-val=\"that\">That<\/button><\/div>\n            <div class=\"model td-model\">Choose first.<\/div>\n            <div class=\"actions\"><button class=\"btn yellowbtn td-listen\" disabled>&#x1f50a; Listen<\/button><button class=\"btn primary td-said\" disabled>&#x1f3a4; I said it<\/button><\/div>\n          <\/div>\n        <\/div>\n        <div class=\"feedback\" id=\"tdFeedback\"><\/div>\n        <div class=\"unlock\" id=\"unlockTD\">&#x1f512; Complete the 4 cards and say each sentence.<\/div>\n        <div class=\"actions\"><button class=\"btn soft next\" data-next=\"2\">\u2190 Words<\/button><button class=\"btn primary next\" data-next=\"4\" id=\"nextTD\" disabled>Verb to be \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\">&#x1f466;&#x1f3fb;<\/div>\n        <div class=\"speech\"><strong>Leo says:<\/strong> \u201cNow we need our helper verb: <em>to be<\/em>. Listen to the whole family!\u201d<\/div>\n      <\/div>\n\n      <div class=\"card lilac\">\n        <h3>4. The verb TO BE<\/h3>\n        <p class=\"muted\">Listen and repeat each form. The examples help you hear it in a real sentence.<\/p>\n        <div class=\"tobegrid\">\n          <div class=\"tobecard\" data-tobedone=\"0\"><strong>I am<\/strong><span>I am a student.<\/span><div class=\"actions\"><button class=\"btn yellowbtn listen\" data-text=\"I am. I am a student.\">&#x1f50a;<\/button><button class=\"btn primary tobe-said\">&#x1f3a4; Say it<\/button><\/div><\/div>\n          <div class=\"tobecard\" data-tobedone=\"0\"><strong>You are<\/strong><span>You are my friend.<\/span><div class=\"actions\"><button class=\"btn yellowbtn listen\" data-text=\"You are. You are my friend.\">&#x1f50a;<\/button><button class=\"btn primary tobe-said\">&#x1f3a4; Say it<\/button><\/div><\/div>\n          <div class=\"tobecard\" data-tobedone=\"0\"><strong>He is<\/strong><span>He is Leo.<\/span><div class=\"actions\"><button class=\"btn yellowbtn listen\" data-text=\"He is. He is Leo.\">&#x1f50a;<\/button><button class=\"btn primary tobe-said\">&#x1f3a4; Say it<\/button><\/div><\/div>\n          <div class=\"tobecard\" data-tobedone=\"0\"><strong>She is<\/strong><span>She is Keyla.<\/span><div class=\"actions\"><button class=\"btn yellowbtn listen\" data-text=\"She is. She is Keyla.\">&#x1f50a;<\/button><button class=\"btn primary tobe-said\">&#x1f3a4; Say it<\/button><\/div><\/div>\n          <div class=\"tobecard\" data-tobedone=\"0\"><strong>It is<\/strong><span>It is a book.<\/span><div class=\"actions\"><button class=\"btn yellowbtn listen\" data-text=\"It is. It is a book.\">&#x1f50a;<\/button><button class=\"btn primary tobe-said\">&#x1f3a4; Say it<\/button><\/div><\/div>\n          <div class=\"tobecard\" data-tobedone=\"0\"><strong>We are<\/strong><span>We are students.<\/span><div class=\"actions\"><button class=\"btn yellowbtn listen\" data-text=\"We are. We are students.\">&#x1f50a;<\/button><button class=\"btn primary tobe-said\">&#x1f3a4; Say it<\/button><\/div><\/div>\n          <div class=\"tobecard\" data-tobedone=\"0\"><strong>They are<\/strong><span>They are friends.<\/span><div class=\"actions\"><button class=\"btn yellowbtn listen\" data-text=\"They are. They are friends.\">&#x1f50a;<\/button><button class=\"btn primary tobe-said\">&#x1f3a4; Say it<\/button><\/div><\/div>\n        <\/div>\n        <div class=\"unlock\" id=\"unlockToBe\">&#x1f512; Repeat all 7 forms.<\/div>\n        <div class=\"actions\"><button class=\"btn soft next\" data-next=\"3\">\u2190 This \/ That<\/button><button class=\"btn primary next\" data-next=\"5\" id=\"nextToBe\" disabled>Question game \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 asks:<\/strong> \u201cIs this a pencil? Is that a chair? Answer with a full English sentence!\u201d<\/div>\n      <\/div>\n\n      <div class=\"card yellow\">\n        <h3>5. Yes or No?<\/h3>\n        <p class=\"muted\">Choose the answer. Then listen and repeat the complete response.<\/p>\n        <div class=\"questiongrid\">\n          <div class=\"question yn-q\" data-ok=\"0\" data-text=\"Yes, it is. This is a pencil.\">\n            <b>&#x270f;&#xfe0f; Is this a pencil?<\/b>\n            <div class=\"choices\"><button class=\"choice\" data-correct=\"1\">Yes, it is.<\/button><button class=\"choice\">No, it isn\u2019t.<\/button><\/div>\n            <div class=\"actions\"><button class=\"btn yellowbtn yn-listen\" disabled>&#x1f50a; Listen to answer<\/button><button class=\"btn primary yn-said\" disabled>&#x1f3a4; I said it<\/button><\/div>\n          <\/div>\n\n          <div class=\"question yn-q\" data-ok=\"0\" data-text=\"No, it isn't. That is a backpack.\">\n            <b>&#x1f392; Is that a book?<\/b>\n            <div class=\"choices\"><button class=\"choice\">Yes, it is.<\/button><button class=\"choice\" data-correct=\"1\">No, it isn\u2019t.<\/button><\/div>\n            <div class=\"actions\"><button class=\"btn yellowbtn yn-listen\" disabled>&#x1f50a; Listen to answer<\/button><button class=\"btn primary yn-said\" disabled>&#x1f3a4; I said it<\/button><\/div>\n          <\/div>\n\n          <div class=\"question yn-q\" data-ok=\"0\" data-text=\"Yes, it is. That is a chair.\">\n            <b>&#x1fa91; Is that a chair?<\/b>\n            <div class=\"choices\"><button class=\"choice\" data-correct=\"1\">Yes, it is.<\/button><button class=\"choice\">No, it isn\u2019t.<\/button><\/div>\n            <div class=\"actions\"><button class=\"btn yellowbtn yn-listen\" disabled>&#x1f50a; Listen to answer<\/button><button class=\"btn primary yn-said\" disabled>&#x1f3a4; I said it<\/button><\/div>\n          <\/div>\n\n          <div class=\"question yn-q\" data-ok=\"0\" data-text=\"No, it isn't. This is a pen.\">\n            <b>&#x1f58a;&#xfe0f; Is this a desk?<\/b>\n            <div class=\"choices\"><button class=\"choice\">Yes, it is.<\/button><button class=\"choice\" data-correct=\"1\">No, it isn\u2019t.<\/button><\/div>\n            <div class=\"actions\"><button class=\"btn yellowbtn yn-listen\" disabled>&#x1f50a; Listen to answer<\/button><button class=\"btn primary yn-said\" disabled>&#x1f3a4; I said it<\/button><\/div>\n          <\/div>\n        <\/div>\n        <div class=\"feedback\" id=\"ynFeedback\"><\/div>\n        <div class=\"unlock\" id=\"unlockYN\">&#x1f512; Answer and say all 4 responses.<\/div>\n        <div class=\"actions\"><button class=\"btn soft next\" data-next=\"4\">\u2190 To Be<\/button><button class=\"btn primary next\" data-next=\"6\" id=\"nextYN\" disabled>Build a dialogue \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 purple\">&#x1f467;&#x1f3fb;<\/div>\n        <div class=\"speech\"><strong>Keyla says:<\/strong> \u201cLet\u2019s make our own mini-dialogue. Choose the distance, the object and the answer.\u201d<\/div>\n      <\/div>\n\n      <div class=\"card\">\n        <h3>6. Build a conversation<\/h3>\n        <div class=\"dialogue-builder\">\n          <label>Distance\n            <select id=\"dlgDistance\">\n              <option value=\"\">Choose<\/option>\n              <option value=\"this\">near \u00b7 this<\/option>\n              <option value=\"that\">far \u00b7 that<\/option>\n            <\/select>\n          <\/label>\n          <label>School thing\n            <select id=\"dlgObject\">\n              <option value=\"\">Choose<\/option>\n              <option value=\"pen\">pen<\/option>\n              <option value=\"book\">book<\/option>\n              <option value=\"backpack\">backpack<\/option>\n              <option value=\"pencil\">pencil<\/option>\n              <option value=\"desk\">desk<\/option>\n              <option value=\"chair\">chair<\/option>\n            <\/select>\n          <\/label>\n          <label>Answer\n            <select id=\"dlgAnswer\">\n              <option value=\"\">Choose<\/option>\n              <option value=\"yes\">Yes<\/option>\n              <option value=\"no\">No<\/option>\n            <\/select>\n          <\/label>\n        <\/div>\n        <div class=\"actions\"><button class=\"btn yellowbtn\" id=\"buildDialogue\">&#x2728; Build my dialogue<\/button><\/div>\n\n        <div class=\"dialogue\" id=\"dialogueBox\">\n          <div class=\"line\"><div class=\"who\">Keyla<\/div><div>What is ____?<\/div><\/div>\n          <div class=\"line leo\"><div class=\"who\">Leo<\/div><div>____ is a ____.<\/div><\/div>\n          <div class=\"line\"><div class=\"who\">Keyla<\/div><div>Is ____ a ____?<\/div><\/div>\n          <div class=\"line leo\"><div class=\"who\">Leo<\/div><div>____.<\/div><\/div>\n        <\/div>\n\n        <div class=\"actions\">\n          <button class=\"btn soft\" id=\"listenDialogue\">&#x1f50a; Listen to dialogue<\/button>\n          <button class=\"btn green\" id=\"dialogueSaid\">&#x1f3ad; I practiced both parts<\/button>\n        <\/div>\n\n        <div class=\"unlock\" id=\"unlockDialogue\">&#x1f512; Build the dialogue and practice both voices.<\/div>\n        <div class=\"actions\"><button class=\"btn soft next\" data-next=\"5\">\u2190 Questions<\/button><button class=\"btn primary next\" data-next=\"7\" id=\"nextDialogue\" disabled>Final mission \u2192<\/button><\/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> \u201cFinal mission! No clicking answers now. Use your voice and your English Key.\u201d<\/div>\n      <\/div>\n\n      <div class=\"card lilac\">\n        <h3>7. Classroom reporter \u00b7 Final speaking mission<\/h3>\n        <p class=\"muted\">Complete the five speaking missions. You may listen to each prompt, but try to answer without reading a model.<\/p>\n\n        <div class=\"missiongrid\">\n          <div class=\"mission speak-mission\" data-missiondone=\"0\">\n            <div class=\"mnum\">1<\/div>\n            <strong>Point to something near you and say: \u201cThis is\u2026\u201d<\/strong>\n            <div class=\"actions\"><button class=\"btn yellowbtn listen\" data-text=\"Point to something near you. Say, This is...\">&#x1f50a; Prompt<\/button><button class=\"btn primary mission-done\">&#x1f3a4; Done<\/button><\/div>\n          <\/div>\n\n          <div class=\"mission speak-mission\" data-missiondone=\"0\">\n            <div class=\"mnum\">2<\/div>\n            <strong>Point to something far from you and say: \u201cThat is\u2026\u201d<\/strong>\n            <div class=\"actions\"><button class=\"btn yellowbtn listen\" data-text=\"Point to something far from you. Say, That is...\">&#x1f50a; Prompt<\/button><button class=\"btn primary mission-done\">&#x1f3a4; Done<\/button><\/div>\n          <\/div>\n\n          <div class=\"mission speak-mission\" data-missiondone=\"0\">\n            <div class=\"mnum\">3<\/div>\n            <strong>Name three school things in English.<\/strong>\n            <div class=\"actions\"><button class=\"btn yellowbtn listen\" data-text=\"Name three school things in English.\">&#x1f50a; Prompt<\/button><button class=\"btn primary mission-done\">&#x1f3a4; Done<\/button><\/div>\n          <\/div>\n\n          <div class=\"mission speak-mission\" data-missiondone=\"0\">\n            <div class=\"mnum\">4<\/div>\n            <strong>Ask one question: \u201cIs this\u2026?\u201d or \u201cIs that\u2026?\u201d<\/strong>\n            <div class=\"actions\"><button class=\"btn yellowbtn listen\" data-text=\"Ask one question. Is this...? Or, Is that...?\">&#x1f50a; Prompt<\/button><button class=\"btn primary mission-done\">&#x1f3a4; Done<\/button><\/div>\n          <\/div>\n\n          <div class=\"mission speak-mission\" data-missiondone=\"0\">\n            <div class=\"mnum\">5<\/div>\n            <strong>Answer your question: \u201cYes, it is.\u201d or \u201cNo, it isn\u2019t.\u201d<\/strong>\n            <div class=\"actions\"><button class=\"btn yellowbtn listen\" data-text=\"Answer your question. Yes, it is. Or, No, it isn't.\">&#x1f50a; Prompt<\/button><button class=\"btn primary mission-done\">&#x1f3a4; Done<\/button><\/div>\n          <\/div>\n\n          <div class=\"mission\">\n            <div class=\"mnum\">\u2605<\/div>\n            <strong>Bonus: say a sentence with \u201cWe are\u201d or \u201cThey are\u201d.<\/strong>\n            <div class=\"actions\"><button class=\"btn yellowbtn listen\" data-text=\"Bonus. Say a sentence with, We are, or, They are.\">&#x1f50a; Prompt<\/button><\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <div class=\"card yellow\">\n        <h3>&#x1f399;&#xfe0f; Record your final speaking<\/h3>\n        <p class=\"muted\">Talk about school things for about 20\u201340 seconds. Try to use <b>this<\/b>, <b>that<\/b> and <b>to be<\/b>.<\/p>\n        <div class=\"rec\">\n          <div class=\"actions\">\n            <button class=\"btn red startRec\">\u25cf Start recording<\/button>\n            <button class=\"btn soft stopRec\" disabled>\u25a0 Stop<\/button>\n          <\/div>\n          <div class=\"recstatus\" aria-live=\"polite\"><\/div>\n          <audio class=\"playback\" controls hidden><\/audio>\n        <\/div>\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-check\"> I used <b>this<\/b> for something near.<\/label>\n          <label class=\"selfcheck\"><input type=\"checkbox\" class=\"final-check\"> I used <b>that<\/b> for something far.<\/label>\n          <label class=\"selfcheck\"><input type=\"checkbox\" class=\"final-check\"> I used the verb <b>to be<\/b>.<\/label>\n          <label class=\"selfcheck\"><input type=\"checkbox\" class=\"final-check\"> I spoke clearly and listened to myself.<\/label>\n        <\/div>\n        <div class=\"unlock\" id=\"unlockFinal\">&#x1f512; Complete the 5 missions and your self-check.<\/div>\n        <div class=\"actions\"><button class=\"btn soft next\" data-next=\"6\">\u2190 Dialogue<\/button><button class=\"btn green\" id=\"finishL2\" disabled>\u2605 Finish my adventure<\/button><\/div>\n\n        <div class=\"finish\" id=\"finishBoxL2\">\n          <div class=\"big\">&#x1f511;&#x1f49c;&#x1f31f;<\/div>\n          <h3>You used your English Key!<\/h3>\n          <p>You listened to a story, learned school words, practiced <b>this \/ that<\/b>, used <b>to be<\/b>, asked questions and spoke in English.<\/p>\n          <div class=\"badge\">Cuentos ke Cuentan \u00b7 Speaking Explorer<\/div>\n          <p><strong>Total: <span id=\"finalPtsL2\">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-l2-ckc');\n  if(!root)return;\n\n  let pts=0, unlocked=1;\n  const ptsEl=root.querySelector('#l2pts');\n  const levelEl=root.querySelector('#l2level');\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  root.querySelectorAll('.next').forEach(b=>b.addEventListener('click',()=>show(+b.dataset.next)));\n\n  \/\/ STEP 1\n  let storyHeard=false;\n  root.querySelector('#storyHeard').addEventListener('click',function(){\n    if(!storyHeard){\n      storyHeard=true;addPts(2);\n      this.textContent='\u2605 Story heard';\n      this.className='btn green';\n      checkStory();\n    }\n  });\n\n  root.querySelectorAll('.story-q .choice').forEach(b=>{\n    b.addEventListener('click',()=>{\n      const q=b.closest('.story-q');\n      if(q.dataset.ok==='1')return;\n      if(b.dataset.correct==='1'){\n        q.dataset.ok='1';addPts(2);\n        b.classList.add('correct');\n        q.querySelectorAll('.choice').forEach(x=>x.disabled=true);\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-q')].every(q=>q.dataset.ok==='1');\n    if(storyHeard&&done){\n      unlockStep(2);\n      root.querySelector('#nextStory').disabled=false;\n      root.querySelector('#unlockStory').textContent='&#x1f511; The school-words step is unlocked!';\n    }\n  }\n\n  \/\/ STEP 2\n  let wordsDone=0;\n  root.querySelectorAll('.word-said').forEach(b=>{\n    b.addEventListener('click',()=>{\n      const card=b.closest('.objectcard');\n      if(card.dataset.worddone==='1')return;\n      card.dataset.worddone='1';card.classList.add('done');\n      wordsDone++;addPts(1);\n      b.textContent='\u2605 Collected';\n      b.className='btn green word-said';\n      if(wordsDone===6){\n        unlockStep(3);\n        root.querySelector('#nextWords').disabled=false;\n        root.querySelector('#unlockWords').textContent='&#x1f511; You collected all 6 school-word keys!';\n      }\n    });\n  });\n\n  \/\/ STEP 3 THIS \/ THAT\n  let tdSaid=0;\n  root.querySelectorAll('.td-card').forEach(card=>{\n    const model=card.querySelector('.td-model');\n    const listen=card.querySelector('.td-listen');\n    const said=card.querySelector('.td-said');\n    const answer=card.dataset.answer;\n    const object=card.dataset.object;\n    const article=\/^[aeiou]\/i.test(object)?'an':'a';\n    const sentence=answer.charAt(0).toUpperCase()+answer.slice(1)+' is '+article+' '+object+'.';\n\n    card.querySelectorAll('.td-choice').forEach(b=>{\n      b.addEventListener('click',()=>{\n        if(card.dataset.chosen==='1')return;\n        if(b.dataset.val===answer){\n          card.dataset.chosen='1';b.classList.add('correct');addPts(2);\n          card.querySelectorAll('.td-choice').forEach(x=>x.disabled=true);\n          model.textContent=sentence;\n          listen.disabled=false;said.disabled=false;\n          listen.onclick=()=>speak(sentence);\n          const fb=root.querySelector('#tdFeedback');\n          fb.className='feedback show ok';fb.textContent='Great! Now say the whole sentence.';\n        }else{\n          b.classList.add('wrong');\n          const fb=root.querySelector('#tdFeedback');\n          fb.className='feedback show try';\n          fb.textContent='Look at the distance: near = this, far = that.';\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';tdSaid++;addPts(1);\n      said.textContent='\u2605 Said';\n      said.className='btn green td-said';\n      if(tdSaid===4){\n        unlockStep(4);\n        root.querySelector('#nextTD').disabled=false;\n        root.querySelector('#unlockTD').textContent='&#x1f511; Verb TO BE unlocked!';\n      }\n    });\n  });\n\n  \/\/ STEP 4 TO BE\n  let toBeDone=0;\n  root.querySelectorAll('.tobe-said').forEach(b=>{\n    b.addEventListener('click',()=>{\n      const card=b.closest('.tobecard');\n      if(card.dataset.tobedone==='1')return;\n      card.dataset.tobedone='1';card.classList.add('done');\n      toBeDone++;addPts(1);\n      b.textContent='\u2605 Done';b.className='btn green tobe-said';\n      if(toBeDone===7){\n        unlockStep(5);\n        root.querySelector('#nextToBe').disabled=false;\n        root.querySelector('#unlockToBe').textContent='&#x1f511; Question game unlocked!';\n      }\n    });\n  });\n\n  \/\/ STEP 5 YES \/ NO\n  let ynSaid=0;\n  root.querySelectorAll('.yn-q').forEach(q=>{\n    const listen=q.querySelector('.yn-listen');\n    const said=q.querySelector('.yn-said');\n    const full=q.dataset.text;\n\n    q.querySelectorAll('.choice').forEach(b=>{\n      b.addEventListener('click',()=>{\n        if(q.dataset.answered==='1')return;\n        if(b.dataset.correct==='1'){\n          q.dataset.answered='1';b.classList.add('correct');addPts(2);\n          q.querySelectorAll('.choice').forEach(x=>x.disabled=true);\n          listen.disabled=false;said.disabled=false;\n          listen.onclick=()=>speak(full);\n          const fb=root.querySelector('#ynFeedback');\n          fb.className='feedback show ok';fb.textContent='Correct. Now say the complete answer.';\n        }else{\n          b.classList.add('wrong');\n          const fb=root.querySelector('#ynFeedback');\n          fb.className='feedback show try';fb.textContent='Look at the object and try again.';\n          setTimeout(()=>b.classList.remove('wrong'),700);\n        }\n      });\n    });\n\n    said.addEventListener('click',()=>{\n      if(q.dataset.answered!=='1'||q.dataset.ok==='1')return;\n      q.dataset.ok='1';ynSaid++;addPts(1);\n      said.textContent='\u2605 Said';said.className='btn green yn-said';\n      if(ynSaid===4){\n        unlockStep(6);\n        root.querySelector('#nextYN').disabled=false;\n        root.querySelector('#unlockYN').textContent='&#x1f511; Dialogue builder unlocked!';\n      }\n    });\n  });\n\n  \/\/ STEP 6 DIALOGUE\n  const dist=root.querySelector('#dlgDistance');\n  const obj=root.querySelector('#dlgObject');\n  const ans=root.querySelector('#dlgAnswer');\n  const box=root.querySelector('#dialogueBox');\n  let dialogueText='', dialogueReady=false, dialogueDone=false;\n\n  function makeDialogue(){\n    if(!dist.value||!obj.value||!ans.value){\n      root.querySelector('#unlockDialogue').textContent='Choose distance, school thing and answer first.';\n      return false;\n    }\n    const d=dist.value;\n    const word=obj.value;\n    const article=\/^[aeiou]\/i.test(word)?'an':'a';\n    const cap=d.charAt(0).toUpperCase()+d.slice(1);\n    const response=ans.value==='yes'?'Yes, it is.':'No, it isn\u2019t.';\n    const lines=[\n      ['Keyla','What is '+d+'?'],\n      ['Leo',cap+' is '+article+' '+word+'.'],\n      ['Keyla','Is '+d+' '+article+' '+word+'?'],\n      ['Leo',response]\n    ];\n    box.innerHTML=lines.map((l,i)=>'<div class=\"line '+(i%2?'leo':'')+'\"><div class=\"who\">'+l[0]+'<\/div><div>'+l[1]+'<\/div><\/div>').join('');\n    dialogueText=lines.map(l=>l[1]).join(' ');\n    dialogueReady=true;\n    root.querySelector('#unlockDialogue').textContent='\u2713 Dialogue ready. Listen, then practice Keyla AND Leo.';\n    addPts(dialogueDone?0:2);\n    return true;\n  }\n\n  root.querySelector('#buildDialogue').addEventListener('click',makeDialogue);\n  root.querySelector('#listenDialogue').addEventListener('click',()=>{\n    if(makeDialogue())speak(dialogueText);\n  });\n\n  root.querySelector('#dialogueSaid').addEventListener('click',function(){\n    if(!dialogueReady){\n      root.querySelector('#unlockDialogue').textContent='Build your dialogue first.';\n      return;\n    }\n    if(dialogueDone)return;\n    dialogueDone=true;addPts(4);\n    unlockStep(7);\n    root.querySelector('#nextDialogue').disabled=false;\n    root.querySelector('#unlockDialogue').textContent='&#x1f511; Final speaking mission unlocked!';\n    this.textContent='\u2605 Dialogue practiced';\n    this.disabled=true;\n  });\n\n  \/\/ STEP 7 MISSIONS\n  let missionsDone=0;\n  root.querySelectorAll('.mission-done').forEach(b=>{\n    b.addEventListener('click',()=>{\n      const m=b.closest('.speak-mission');\n      if(m.dataset.missiondone==='1')return;\n      m.dataset.missiondone='1';missionsDone++;addPts(2);\n      b.textContent='\u2605 Done';b.className='btn green mission-done';\n      checkFinal();\n    });\n  });\n\n  root.querySelectorAll('.final-check').forEach(c=>c.addEventListener('change',checkFinal));\n\n  function checkFinal(){\n    const checks=[...root.querySelectorAll('.final-check')].filter(c=>c.checked).length;\n    if(missionsDone===5&&checks===4){\n      root.querySelector('#finishL2').disabled=false;\n      root.querySelector('#unlockFinal').textContent='&#x1f511; Your final badge is ready!';\n    }else{\n      root.querySelector('#finishL2').disabled=true;\n      root.querySelector('#unlockFinal').textContent='Complete the 5 missions and all 4 self-checks.';\n    }\n  }\n\n  \/\/ RECORDING\n  let recorder=null,stream=null,chunks=[];\n  root.querySelector('.startRec').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 English!';\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('.stopRec').disabled=false;\n    }catch(e){\n      status.textContent='Please allow microphone access to record your voice.';\n    }\n  });\n\n  root.querySelector('.stopRec').addEventListener('click',function(){\n    if(recorder&&recorder.state==='recording')recorder.stop();\n    this.disabled=true;\n    root.querySelector('.startRec').disabled=false;\n  });\n\n  root.querySelector('#finishL2').addEventListener('click',function(){\n    addPts(5);\n    root.querySelector('#finalPtsL2').textContent=pts;\n    root.querySelector('#finishBoxL2').classList.add('show');\n    root.querySelector('.step[data-step=\"7\"]').classList.add('done');\n    root.querySelector('#unlockFinal').textContent='&#x1f49c; 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 2 \u00b7 My School Things A longer speaking adventure: school objects, this \/ that [&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-1710","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/cuentoskecuentan.com\/index.php?rest_route=\/wp\/v2\/pages\/1710","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=1710"}],"version-history":[{"count":2,"href":"https:\/\/cuentoskecuentan.com\/index.php?rest_route=\/wp\/v2\/pages\/1710\/revisions"}],"predecessor-version":[{"id":1714,"href":"https:\/\/cuentoskecuentan.com\/index.php?rest_route=\/wp\/v2\/pages\/1710\/revisions\/1714"}],"wp:attachment":[{"href":"https:\/\/cuentoskecuentan.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1710"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}