{"id":1717,"date":"2026-08-19T03:39:28","date_gmt":"2026-08-19T03:39:28","guid":{"rendered":"https:\/\/cuentoskecuentan.com\/?page_id=1717"},"modified":"2026-08-19T03:43:20","modified_gmt":"2026-08-19T03:43:20","slug":"my-english-key-3-1a1","status":"publish","type":"page","link":"https:\/\/cuentoskecuentan.com\/?page_id=1717","title":{"rendered":"My english key 3 1A1"},"content":{"rendered":"\n<!--\nMY ENGLISH KEY \u00b7 STARTER 1\nLESSON 3 \u00b7 MY FAMILY \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-l3-ckc\">\n<style>\n#mek-l3-ckc{\n  --purple:#793D7A;\n  --purple-dark:#572A59;\n  --purple-mid:#A77AAA;\n  --lilac:#F7F0F8;\n  --lilac-2:#EEE2F1;\n  --yellow:#F6C744;\n  --yellow-soft:#FFF8DA;\n  --ink:#352D36;\n  --gray:#6E6670;\n  --green:#4B936C;\n  --green-soft:#E9F6EF;\n  --red:#B75968;\n  --red-soft:#FFF0F2;\n  --blue:#4D78A5;\n  --blue-soft:#EDF4FA;\n  --white:#FFFFFF;\n  max-width:1040px;\n  margin:24px auto;\n  font-family:Lato,Arial,sans-serif;\n  color:var(--ink);\n  line-height:1.45;\n}\n#mek-l3-ckc *{box-sizing:border-box}\n#mek-l3-ckc button,#mek-l3-ckc input,#mek-l3-ckc select{font:inherit}\n#mek-l3-ckc button{touch-action:manipulation}\n\n#mek-l3-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-l3-ckc .top{\n  position:relative;\n  padding:27px 29px 23px;\n  background:\n    radial-gradient(circle at 92% 18%,rgba(246,199,68,.24) 0 55px,transparent 56px),\n    radial-gradient(circle at 82% 88%,rgba(121,61,122,.08) 0 80px,transparent 81px),\n    linear-gradient(135deg,#fff 0%,#fff 67%,#fbf6fc 100%);\n  border-bottom:5px solid var(--yellow);\n  overflow:hidden;\n}\n#mek-l3-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-l3-ckc .brandrow{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap}\n#mek-l3-ckc .ckc{font-weight:900;color:var(--purple);font-size:20px}\n#mek-l3-ckc .ckc .ke{display:inline-block;background:var(--yellow);color:var(--purple-dark);padding:1px 6px;border-radius:8px;transform:rotate(-3deg)}\n#mek-l3-ckc .keybrand{font-weight:900;color:var(--purple);font-size:18px}\n#mek-l3-ckc .keybrand b{color:var(--yellow)}\n#mek-l3-ckc h2{margin:14px 0 4px;color:var(--purple);font-size:clamp(32px,5vw,50px);line-height:1.04}\n#mek-l3-ckc .subtitle{margin:0;color:var(--gray);font-size:18px;max-width:790px}\n#mek-l3-ckc .identity-note{\n  margin-top:15px;display:inline-flex;gap:8px;align-items:center;background:var(--yellow-soft);\n  border:1.5px solid #efd46f;border-radius:999px;padding:8px 14px;color:var(--purple-dark);font-weight:900;\n}\n\n\/* PATH *\/\n#mek-l3-ckc .pathwrap{padding:18px 20px;background:var(--lilac);border-bottom:1px solid #e7dbe9;overflow-x:auto}\n#mek-l3-ckc .path{display:grid;grid-template-columns:repeat(7,minmax(94px,1fr));gap:6px;position:relative;min-width:710px}\n#mek-l3-ckc .path:before{content:\"\";position:absolute;left:6%;right:6%;top:21px;border-top:3px dashed var(--purple-mid);z-index:0}\n#mek-l3-ckc .step{position:relative;z-index:1;text-align:center}\n#mek-l3-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-l3-ckc .step.active .dot,#mek-l3-ckc .step.done .dot{background:var(--purple);color:#fff;border-color:var(--purple)}\n#mek-l3-ckc .step.done .dot{font-size:0}\n#mek-l3-ckc .step.done .dot:after{content:\"\u2713\";font-size:20px}\n#mek-l3-ckc .step.locked{opacity:.42}\n#mek-l3-ckc .step small{font-weight:900;color:var(--purple-dark);font-size:12px}\n\n#mek-l3-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-l3-ckc .pill{padding:7px 12px;border-radius:999px;background:var(--purple);color:#fff;font-weight:900}\n#mek-l3-ckc .pill.yellow{background:var(--yellow);color:var(--purple-dark)}\n#mek-l3-ckc .content{padding:25px}\n#mek-l3-ckc .screen{display:none}\n#mek-l3-ckc .screen.active{display:block}\n\n\/* CHARACTER \/ STORY *\/\n#mek-l3-ckc .guide{display:grid;grid-template-columns:92px 1fr;gap:16px;align-items:center;margin-bottom:18px}\n#mek-l3-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-l3-ckc .avatar.purple{background:var(--lilac-2);border-color:var(--purple)}\n#mek-l3-ckc .avatar.gray{background:#F0EFF1;border-color:#9B929D}\n#mek-l3-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-l3-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-l3-ckc .card{border:2px solid #E7DBE9;border-radius:23px;padding:20px;margin:14px 0;background:#fff}\n#mek-l3-ckc .card.yellow{background:var(--yellow-soft);border-color:#EFD873}\n#mek-l3-ckc .card.lilac{background:var(--lilac);border-color:#DCC9DF}\n#mek-l3-ckc .card.blue{background:var(--blue-soft);border-color:#cadbe9}\n#mek-l3-ckc .card h3{margin:0 0 9px;color:var(--purple);font-size:26px}\n#mek-l3-ckc .muted{color:var(--gray);margin-top:0}\n\n#mek-l3-ckc .storypaper{\n  background:#fff;border:2px dashed var(--purple-mid);border-radius:20px;padding:19px;\n  font-size:18px;position:relative\n}\n#mek-l3-ckc .storypaper:after{content:\"\u2661\";position:absolute;right:16px;bottom:8px;color:var(--yellow);font-size:30px}\n#mek-l3-ckc .storypaper strong{color:var(--purple)}\n#mek-l3-ckc .valuecorner{\n  margin-top:14px;display:grid;grid-template-columns:55px 1fr;gap:12px;align-items:center;\n  background:var(--yellow-soft);border-left:6px solid var(--yellow);border-radius:16px;padding:13px 15px\n}\n#mek-l3-ckc .valueicon{font-size:35px;text-align:center}\n#mek-l3-ckc .valuecorner b{color:var(--purple-dark)}\n\n#mek-l3-ckc .actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:11px}\n#mek-l3-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-l3-ckc .btn:hover{transform:translateY(-1px)}\n#mek-l3-ckc .btn:disabled{opacity:.43;cursor:not-allowed;transform:none}\n#mek-l3-ckc .primary{background:var(--purple);color:#fff}\n#mek-l3-ckc .yellowbtn{background:var(--yellow);color:var(--purple-dark)}\n#mek-l3-ckc .soft{background:var(--lilac-2);color:var(--purple-dark)}\n#mek-l3-ckc .green{background:var(--green);color:#fff}\n#mek-l3-ckc .red{background:var(--red);color:#fff}\n#mek-l3-ckc .bluebtn{background:var(--blue);color:#fff}\n\n#mek-l3-ckc .questiongrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}\n#mek-l3-ckc .question{border:2px solid #E7DBE9;border-radius:18px;padding:15px;background:#fff}\n#mek-l3-ckc .question b{display:block;color:var(--purple-dark);font-size:18px;margin-bottom:9px}\n#mek-l3-ckc .choices{display:flex;gap:8px;flex-wrap:wrap}\n#mek-l3-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-l3-ckc .choice.correct{background:var(--green-soft);border-color:var(--green);color:#2E6C4E}\n#mek-l3-ckc .choice.wrong{background:var(--red-soft);border-color:var(--red);color:#8B3E49}\n\n\/* FAMILY WORDS *\/\n#mek-l3-ckc .familygrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}\n#mek-l3-ckc .familycard{\n  text-align:center;background:#fff;border:2px solid #E6D9E8;border-radius:19px;padding:15px;\n  position:relative;overflow:hidden\n}\n#mek-l3-ckc .familycard:before{\n  content:\"\";position:absolute;width:55px;height:55px;border-radius:50%;background:var(--yellow-soft);left:-18px;top:-18px\n}\n#mek-l3-ckc .familyicon{font-size:47px;line-height:1.05}\n#mek-l3-ckc .familyword{font-size:22px;font-weight:900;color:var(--purple-dark);margin:7px 0}\n#mek-l3-ckc .familycard.done{border-color:var(--green);background:#FBFFFD}\n\n\/* POSSESSIVES *\/\n#mek-l3-ckc .possgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}\n#mek-l3-ckc .posscard{border:2px solid #E5D8E7;border-radius:18px;padding:15px;background:#fff}\n#mek-l3-ckc .posscard strong{display:block;color:var(--purple);font-size:22px}\n#mek-l3-ckc .posscard .example{color:var(--gray);margin-top:3px}\n#mek-l3-ckc .posscard.done{background:var(--green-soft);border-color:var(--green)}\n#mek-l3-ckc .pronoun{display:inline-block;background:var(--yellow-soft);border:1px solid #eed36a;border-radius:999px;padding:4px 9px;margin-bottom:6px;color:var(--purple-dark);font-weight:900}\n\n#mek-l3-ckc .matchgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}\n#mek-l3-ckc .matchcard{border:2px solid #E5D8E7;border-radius:18px;padding:15px;background:#fff}\n#mek-l3-ckc .matchcard .scene{font-size:42px;margin-bottom:5px}\n#mek-l3-ckc .model{\n  margin-top:11px;border-left:6px solid var(--yellow);background:var(--lilac);\n  border-radius:12px;padding:12px 14px;color:var(--purple-dark);font-weight:900;font-size:19px\n}\n\n\/* WHO \/ DESCRIPTION *\/\n#mek-l3-ckc .whogrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}\n#mek-l3-ckc .whocard{border:2px solid #E5D8E7;border-radius:19px;padding:16px;background:#fff}\n#mek-l3-ckc .whocard .portrait{font-size:51px;text-align:center;margin-bottom:8px}\n#mek-l3-ckc .whocard.done{background:var(--green-soft);border-color:var(--green)}\n\n#mek-l3-ckc .dialogue{\n  border:2px solid #E5D8E7;border-radius:20px;background:#fff;padding:16px\n}\n#mek-l3-ckc .line{display:grid;grid-template-columns:78px 1fr;gap:8px;padding:8px 0;border-bottom:1px dashed #E1D3E3}\n#mek-l3-ckc .line:last-child{border-bottom:0}\n#mek-l3-ckc .who{font-weight:900;color:var(--purple)}\n#mek-l3-ckc .line.leo .who{color:var(--blue)}\n\n#mek-l3-ckc .builder{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px;margin-top:14px}\n#mek-l3-ckc label{font-weight:900;color:var(--purple-dark)}\n#mek-l3-ckc select,#mek-l3-ckc input{\n  width:100%;margin-top:6px;border:2px solid #D9C7DC;border-radius:12px;padding:11px 12px;background:#fff\n}\n#mek-l3-ckc select:focus,#mek-l3-ckc input:focus{outline:3px solid rgba(246,199,68,.34);border-color:var(--purple)}\n\n#mek-l3-ckc .rec{margin-top:14px;padding:15px;border:2px dashed var(--purple);border-radius:18px;background:#fff}\n#mek-l3-ckc .recstatus{min-height:24px;margin-top:8px;font-weight:900;color:var(--purple-dark)}\n#mek-l3-ckc audio{width:100%;margin-top:10px}\n#mek-l3-ckc .unlock{margin-top:14px;padding:12px 14px;border-radius:14px;background:var(--lilac);color:var(--purple-dark);font-weight:800}\n#mek-l3-ckc .feedback{margin-top:12px;padding:12px 14px;border-radius:14px;font-weight:800;display:none}\n#mek-l3-ckc .feedback.show{display:block}\n#mek-l3-ckc .feedback.ok{background:var(--green-soft);color:#2E6C4F}\n#mek-l3-ckc .feedback.try{background:var(--yellow-soft);color:#74590E}\n\n\/* FINAL *\/\n#mek-l3-ckc .missiongrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}\n#mek-l3-ckc .mission{border:2px solid #E5D8E7;border-radius:18px;padding:15px;background:#fff}\n#mek-l3-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-l3-ckc .mission strong{color:var(--purple-dark);font-size:18px}\n#mek-l3-ckc .checkrow{display:grid;gap:9px;margin-top:13px}\n#mek-l3-ckc .selfcheck{\n  display:flex;gap:10px;align-items:center;border:2px solid #E5D8E7;border-radius:14px;padding:10px 12px;\n  background:#fff;cursor:pointer;font-weight:800\n}\n#mek-l3-ckc .selfcheck input{width:auto;margin:0;transform:scale(1.25)}\n#mek-l3-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-l3-ckc .finish.show{display:block}\n#mek-l3-ckc .finish .big{font-size:52px;line-height:1}\n#mek-l3-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-l3-ckc .footerbrand{text-align:center;padding:16px;background:var(--purple);color:#fff;font-weight:900}\n#mek-l3-ckc .footerbrand span{color:var(--yellow)}\n\n@media(max-width:820px){\n  #mek-l3-ckc .questiongrid,#mek-l3-ckc .familygrid,#mek-l3-ckc .possgrid,#mek-l3-ckc .matchgrid,\n  #mek-l3-ckc .whogrid,#mek-l3-ckc .builder,#mek-l3-ckc .missiongrid{grid-template-columns:1fr}\n  #mek-l3-ckc .guide{grid-template-columns:70px 1fr}\n  #mek-l3-ckc .avatar{width:66px;height:66px;font-size:35px}\n  #mek-l3-ckc .content{padding:16px}\n  #mek-l3-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 3 \u00b7 My Family<\/h2>\n    <p class=\"subtitle\">A progressive speaking adventure with family words and possessive adjectives: <b>my, your, his, her, its, our, their<\/b>.<\/p>\n    <div class=\"identity-note\">&#x1f511; Listen \u00b7 understand \u00b7 describe \u00b7 speak with confidence<\/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>Family Words<\/small><\/div>\n      <div class=\"step locked\" data-step=\"3\"><div class=\"dot\">3<\/div><small>Possessives<\/small><\/div>\n      <div class=\"step locked\" data-step=\"4\"><div class=\"dot\">4<\/div><small>Choose &#038; Say<\/small><\/div>\n      <div class=\"step locked\" data-step=\"5\"><div class=\"dot\">5<\/div><small>Who is this?<\/small><\/div>\n      <div class=\"step locked\" data-step=\"6\"><div class=\"dot\">6<\/div><small>My Family<\/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=\"l3pts\">0<\/span> points<\/div>\n    <div class=\"pill\">&#x1f511; Step <span id=\"l3level\">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> \u201cI brought a family photo! Listen carefully. You will meet some very important people.\u201d<\/div>\n      <\/div>\n\n      <div class=\"card lilac\">\n        <h3>1. The family photo<\/h3>\n        <div class=\"storypaper\">\n          Keyla shows Leo a family photo.\n          \u201c<strong>This is my mother<\/strong>,\u201d says Keyla.\n          \u201c<strong>Her name is Ana<\/strong>,\u201d says Leo.\n          Keyla points to a boy in the picture.\n          \u201c<strong>This is my brother<\/strong>. <strong>His name is Ezekiel<\/strong>.\u201d\n          Misu jumps next to the photo.\n          \u201cAnd Misu is <strong>our cat<\/strong>,\u201d Keyla laughs.\n          Misu touches a yellow ball with his paw.\n          \u201c<strong>Its ball is yellow<\/strong>,\u201d says Leo.\n        <\/div>\n\n        <div class=\"actions\">\n          <button class=\"btn yellowbtn listen\" data-text=\"Keyla shows Leo a family photo. This is my mother, says Keyla. Her name is Ana, says Leo. Keyla points to a boy in the picture. This is my brother. His name is Ezekiel. Misu jumps next to the photo. And Misu is our cat, Keyla laughs. Misu touches a yellow ball with his paw. Its ball is yellow, says Leo.\">&#x1f50a; Listen to the story<\/button>\n          <button class=\"btn primary\" id=\"storyHeard3\">&#x1f442; I listened<\/button>\n        <\/div>\n\n        <div class=\"valuecorner\">\n          <div class=\"valueicon\">&#x1f49c;<\/div>\n          <div><b>Value corner \u00b7 Love and gratitude<\/b><br>Our families are different, and we can thank God for the people who love, care for and guide us.<\/div>\n        <\/div>\n      <\/div>\n\n      <div class=\"card\">\n        <h3>Story check<\/h3>\n        <p class=\"muted\">Choose the correct answer.<\/p>\n        <div class=\"questiongrid\">\n          <div class=\"question story-q3\" data-ok=\"0\">\n            <b>1. Who is Ana?<\/b>\n            <div class=\"choices\">\n              <button class=\"choice\" data-correct=\"1\">Keyla\u2019s mother<\/button>\n              <button class=\"choice\">Keyla\u2019s sister<\/button>\n            <\/div>\n          <\/div>\n          <div class=\"question story-q3\" data-ok=\"0\">\n            <b>2. Who is Ezekiel?<\/b>\n            <div class=\"choices\">\n              <button class=\"choice\" data-correct=\"1\">Keyla\u2019s brother<\/button>\n              <button class=\"choice\">Keyla\u2019s father<\/button>\n            <\/div>\n          <\/div>\n          <div class=\"question story-q3\" data-ok=\"0\">\n            <b>3. What is Misu?<\/b>\n            <div class=\"choices\">\n              <button class=\"choice\" data-correct=\"1\">a cat<\/button>\n              <button class=\"choice\">a dog<\/button>\n            <\/div>\n          <\/div>\n          <div class=\"question story-q3\" data-ok=\"0\">\n            <b>4. What color is Misu\u2019s ball?<\/b>\n            <div class=\"choices\">\n              <button class=\"choice\" data-correct=\"1\">yellow<\/button>\n              <button class=\"choice\">purple<\/button>\n            <\/div>\n          <\/div>\n        <\/div>\n        <div class=\"unlock\" id=\"unlockStory3\">&#x1f512; Listen and answer all 4 questions.<\/div>\n        <div class=\"actions\"><button class=\"btn primary next\" data-next=\"2\" id=\"nextStory3\" disabled>Family 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 says:<\/strong> \u201cLet\u2019s collect family-word keys. Listen and repeat every word!\u201d<\/div>\n      <\/div>\n\n      <div class=\"card yellow\">\n        <h3>2. Family words<\/h3>\n        <p class=\"muted\">Listen and repeat. These words will help you talk about your own family.<\/p>\n\n        <div class=\"familygrid\">\n          <div class=\"familycard\" data-fdone=\"0\"><div class=\"familyicon\">&#x1f469;<\/div><div class=\"familyword\">mother<\/div><div class=\"actions\"><button class=\"btn yellowbtn listen\" data-text=\"mother\">&#x1f50a;<\/button><button class=\"btn primary family-said\">&#x1f3a4; I said it<\/button><\/div><\/div>\n          <div class=\"familycard\" data-fdone=\"0\"><div class=\"familyicon\">&#x1f468;<\/div><div class=\"familyword\">father<\/div><div class=\"actions\"><button class=\"btn yellowbtn listen\" data-text=\"father\">&#x1f50a;<\/button><button class=\"btn primary family-said\">&#x1f3a4; I said it<\/button><\/div><\/div>\n          <div class=\"familycard\" data-fdone=\"0\"><div class=\"familyicon\">&#x1f467;<\/div><div class=\"familyword\">sister<\/div><div class=\"actions\"><button class=\"btn yellowbtn listen\" data-text=\"sister\">&#x1f50a;<\/button><button class=\"btn primary family-said\">&#x1f3a4; I said it<\/button><\/div><\/div>\n          <div class=\"familycard\" data-fdone=\"0\"><div class=\"familyicon\">&#x1f466;<\/div><div class=\"familyword\">brother<\/div><div class=\"actions\"><button class=\"btn yellowbtn listen\" data-text=\"brother\">&#x1f50a;<\/button><button class=\"btn primary family-said\">&#x1f3a4; I said it<\/button><\/div><\/div>\n          <div class=\"familycard\" data-fdone=\"0\"><div class=\"familyicon\">&#x1f468;&#x200d;&#x1f469;&#x200d;&#x1f467;&#x200d;&#x1f466;<\/div><div class=\"familyword\">family<\/div><div class=\"actions\"><button class=\"btn yellowbtn listen\" data-text=\"family\">&#x1f50a;<\/button><button class=\"btn primary family-said\">&#x1f3a4; I said it<\/button><\/div><\/div>\n          <div class=\"familycard\" data-fdone=\"0\"><div class=\"familyicon\">&#x1f431;<\/div><div class=\"familyword\">cat<\/div><div class=\"actions\"><button class=\"btn yellowbtn listen\" data-text=\"cat\">&#x1f50a;<\/button><button class=\"btn primary family-said\">&#x1f3a4; I said it<\/button><\/div><\/div>\n        <\/div>\n\n        <div class=\"unlock\" id=\"unlockFamilyWords\">&#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=\"nextFamilyWords\" disabled>Possessive adjectives \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> \u201cPossessive adjectives tell us who something belongs to. Listen to the whole family: my, your, his, her, its, our, their.\u201d<\/div>\n      <\/div>\n\n      <div class=\"card lilac\">\n        <h3>3. Possessive adjective keys<\/h3>\n        <p class=\"muted\">Listen, read the example and repeat the full sentence.<\/p>\n\n        <div class=\"possgrid\">\n          <div class=\"posscard\" data-pdone=\"0\"><span class=\"pronoun\">I \u2192 my<\/span><strong>my<\/strong><div class=\"example\">This is <b>my<\/b> mother.<\/div><div class=\"actions\"><button class=\"btn yellowbtn listen\" data-text=\"My. This is my mother.\">&#x1f50a;<\/button><button class=\"btn primary poss-said\">&#x1f3a4; Say it<\/button><\/div><\/div>\n          <div class=\"posscard\" data-pdone=\"0\"><span class=\"pronoun\">you \u2192 your<\/span><strong>your<\/strong><div class=\"example\">This is <b>your<\/b> book.<\/div><div class=\"actions\"><button class=\"btn yellowbtn listen\" data-text=\"Your. This is your book.\">&#x1f50a;<\/button><button class=\"btn primary poss-said\">&#x1f3a4; Say it<\/button><\/div><\/div>\n          <div class=\"posscard\" data-pdone=\"0\"><span class=\"pronoun\">he \u2192 his<\/span><strong>his<\/strong><div class=\"example\"><b>His<\/b> name is Ezekiel.<\/div><div class=\"actions\"><button class=\"btn yellowbtn listen\" data-text=\"His. His name is Ezekiel.\">&#x1f50a;<\/button><button class=\"btn primary poss-said\">&#x1f3a4; Say it<\/button><\/div><\/div>\n          <div class=\"posscard\" data-pdone=\"0\"><span class=\"pronoun\">she \u2192 her<\/span><strong>her<\/strong><div class=\"example\"><b>Her<\/b> name is Ana.<\/div><div class=\"actions\"><button class=\"btn yellowbtn listen\" data-text=\"Her. Her name is Ana.\">&#x1f50a;<\/button><button class=\"btn primary poss-said\">&#x1f3a4; Say it<\/button><\/div><\/div>\n          <div class=\"posscard\" data-pdone=\"0\"><span class=\"pronoun\">it \u2192 its<\/span><strong>its<\/strong><div class=\"example\"><b>Its<\/b> ball is yellow.<\/div><div class=\"actions\"><button class=\"btn yellowbtn listen\" data-text=\"Its. Its ball is yellow.\">&#x1f50a;<\/button><button class=\"btn primary poss-said\">&#x1f3a4; Say it<\/button><\/div><\/div>\n          <div class=\"posscard\" data-pdone=\"0\"><span class=\"pronoun\">we \u2192 our<\/span><strong>our<\/strong><div class=\"example\">Misu is <b>our<\/b> cat.<\/div><div class=\"actions\"><button class=\"btn yellowbtn listen\" data-text=\"Our. Misu is our cat.\">&#x1f50a;<\/button><button class=\"btn primary poss-said\">&#x1f3a4; Say it<\/button><\/div><\/div>\n          <div class=\"posscard\" data-pdone=\"0\"><span class=\"pronoun\">they \u2192 their<\/span><strong>their<\/strong><div class=\"example\"><b>Their<\/b> family is happy.<\/div><div class=\"actions\"><button class=\"btn yellowbtn listen\" data-text=\"Their. Their family is happy.\">&#x1f50a;<\/button><button class=\"btn primary poss-said\">&#x1f3a4; Say it<\/button><\/div><\/div>\n        <\/div>\n\n        <div class=\"unlock\" id=\"unlockPoss\">&#x1f512; Repeat all 7 possessive adjective examples.<\/div>\n        <div class=\"actions\"><button class=\"btn soft next\" data-next=\"2\">\u2190 Family words<\/button><button class=\"btn primary next\" data-next=\"4\" id=\"nextPoss\" disabled>Choose &#038; say \u2192<\/button><\/div>\n      <\/div>\n    <\/section>\n\n    <!-- STEP 4 -->\n    <section class=\"screen\" data-screen=\"4\">\n      <div class=\"guide\">\n        <div class=\"avatar purple\">&#x1f467;&#x1f3fb;<\/div>\n        <div class=\"speech\"><strong>Keyla says:<\/strong> \u201cNow choose the possessive word. But don\u2019t stop there \u2014 say the complete sentence!\u201d<\/div>\n      <\/div>\n\n      <div class=\"card\">\n        <h3>4. Choose the key and say the sentence<\/h3>\n        <p class=\"muted\">Choose the correct possessive adjective. Then listen and repeat the full sentence.<\/p>\n\n        <div class=\"matchgrid\">\n          <div class=\"matchcard poss-q\" data-answer=\"her\" data-sentence=\"Her name is Ana.\" data-done=\"0\">\n            <div class=\"scene\">&#x1f469;<\/div><b>Ana is a woman. ___ name is Ana.<\/b>\n            <div class=\"choices\"><button class=\"choice\" data-val=\"his\">his<\/button><button class=\"choice\" data-val=\"her\">her<\/button><\/div>\n            <div class=\"model\">Choose first.<\/div>\n            <div class=\"actions\"><button class=\"btn yellowbtn q-listen\" disabled>&#x1f50a; Listen<\/button><button class=\"btn primary q-said\" disabled>&#x1f3a4; Say it<\/button><\/div>\n          <\/div>\n\n          <div class=\"matchcard poss-q\" data-answer=\"his\" data-sentence=\"His name is Ezekiel.\" data-done=\"0\">\n            <div class=\"scene\">&#x1f466;<\/div><b>Ezekiel is a boy. ___ name is Ezekiel.<\/b>\n            <div class=\"choices\"><button class=\"choice\" data-val=\"his\">his<\/button><button class=\"choice\" data-val=\"her\">her<\/button><\/div>\n            <div class=\"model\">Choose first.<\/div>\n            <div class=\"actions\"><button class=\"btn yellowbtn q-listen\" disabled>&#x1f50a; Listen<\/button><button class=\"btn primary q-said\" disabled>&#x1f3a4; Say it<\/button><\/div>\n          <\/div>\n\n          <div class=\"matchcard poss-q\" data-answer=\"our\" data-sentence=\"Misu is our cat.\" data-done=\"0\">\n            <div class=\"scene\">&#x1f467;&#x1f431;&#x1f466;<\/div><b>Keyla and Ezekiel say: \u201cMisu is ___ cat.\u201d<\/b>\n            <div class=\"choices\"><button class=\"choice\" data-val=\"our\">our<\/button><button class=\"choice\" data-val=\"their\">their<\/button><\/div>\n            <div class=\"model\">Choose first.<\/div>\n            <div class=\"actions\"><button class=\"btn yellowbtn q-listen\" disabled>&#x1f50a; Listen<\/button><button class=\"btn primary q-said\" disabled>&#x1f3a4; Say it<\/button><\/div>\n          <\/div>\n\n          <div class=\"matchcard poss-q\" data-answer=\"its\" data-sentence=\"Its ball is yellow.\" data-done=\"0\">\n            <div class=\"scene\">&#x1f431;&#x26bd;<\/div><b>Misu has a ball. ___ ball is yellow.<\/b>\n            <div class=\"choices\"><button class=\"choice\" data-val=\"its\">its<\/button><button class=\"choice\" data-val=\"his\">his<\/button><\/div>\n            <div class=\"model\">Choose first.<\/div>\n            <div class=\"actions\"><button class=\"btn yellowbtn q-listen\" disabled>&#x1f50a; Listen<\/button><button class=\"btn primary q-said\" disabled>&#x1f3a4; Say it<\/button><\/div>\n          <\/div>\n\n          <div class=\"matchcard poss-q\" data-answer=\"my\" data-sentence=\"This is my mother.\" data-done=\"0\">\n            <div class=\"scene\">&#x1f467;&#x27a1;&#xfe0f;&#x1f469;<\/div><b>Keyla says: \u201cThis is ___ mother.\u201d<\/b>\n            <div class=\"choices\"><button class=\"choice\" data-val=\"my\">my<\/button><button class=\"choice\" data-val=\"your\">your<\/button><\/div>\n            <div class=\"model\">Choose first.<\/div>\n            <div class=\"actions\"><button class=\"btn yellowbtn q-listen\" disabled>&#x1f50a; Listen<\/button><button class=\"btn primary q-said\" disabled>&#x1f3a4; Say it<\/button><\/div>\n          <\/div>\n\n          <div class=\"matchcard poss-q\" data-answer=\"their\" data-sentence=\"Their family is happy.\" data-done=\"0\">\n            <div class=\"scene\">&#x1f468;&#x200d;&#x1f469;&#x200d;&#x1f467;&#x200d;&#x1f466;<\/div><b>They are together. ___ family is happy.<\/b>\n            <div class=\"choices\"><button class=\"choice\" data-val=\"our\">our<\/button><button class=\"choice\" data-val=\"their\">their<\/button><\/div>\n            <div class=\"model\">Choose first.<\/div>\n            <div class=\"actions\"><button class=\"btn yellowbtn q-listen\" disabled>&#x1f50a; Listen<\/button><button class=\"btn primary q-said\" disabled>&#x1f3a4; Say it<\/button><\/div>\n          <\/div>\n        <\/div>\n\n        <div class=\"feedback\" id=\"possFeedback\"><\/div>\n        <div class=\"unlock\" id=\"unlockChoosePoss\">&#x1f512; Complete and say all 6 sentences.<\/div>\n        <div class=\"actions\"><button class=\"btn soft next\" data-next=\"3\">\u2190 Possessives<\/button><button class=\"btn primary next\" data-next=\"5\" id=\"nextChoosePoss\" disabled>Who is this? \u2192<\/button><\/div>\n      <\/div>\n    <\/section>\n\n    <!-- STEP 5 -->\n    <section class=\"screen\" data-screen=\"5\">\n      <div class=\"guide\">\n        <div class=\"avatar gray\">&#x1f431;<\/div>\n        <div class=\"speech\"><strong>Misu says:<\/strong> \u201cFamily detective time! Answer \u2018Who is this?\u2019 with a complete sentence.\u201d<\/div>\n      <\/div>\n\n      <div class=\"card yellow\">\n        <h3>5. Who is this?<\/h3>\n        <p class=\"muted\">Choose the family relationship, then say the complete description.<\/p>\n\n        <div class=\"whogrid\">\n          <div class=\"whocard who-card\" data-answer=\"mother\" data-name=\"Ana\" data-poss=\"Her\" data-done=\"0\">\n            <div class=\"portrait\">&#x1f469;<\/div>\n            <b>Who is Ana?<\/b>\n            <div class=\"choices\"><button class=\"choice\" data-val=\"mother\">mother<\/button><button class=\"choice\" data-val=\"sister\">sister<\/button><\/div>\n            <div class=\"model\">Choose first.<\/div>\n            <div class=\"actions\"><button class=\"btn yellowbtn who-listen\" disabled>&#x1f50a; Listen<\/button><button class=\"btn primary who-said\" disabled>&#x1f3a4; I can say it<\/button><\/div>\n          <\/div>\n\n          <div class=\"whocard who-card\" data-answer=\"brother\" data-name=\"Ezekiel\" data-poss=\"His\" data-done=\"0\">\n            <div class=\"portrait\">&#x1f466;<\/div>\n            <b>Who is Ezekiel?<\/b>\n            <div class=\"choices\"><button class=\"choice\" data-val=\"brother\">brother<\/button><button class=\"choice\" data-val=\"father\">father<\/button><\/div>\n            <div class=\"model\">Choose first.<\/div>\n            <div class=\"actions\"><button class=\"btn yellowbtn who-listen\" disabled>&#x1f50a; Listen<\/button><button class=\"btn primary who-said\" disabled>&#x1f3a4; I can say it<\/button><\/div>\n          <\/div>\n\n          <div class=\"whocard who-card\" data-answer=\"cat\" data-name=\"Misu\" data-poss=\"Its\" data-done=\"0\">\n            <div class=\"portrait\">&#x1f431;<\/div>\n            <b>What is Misu?<\/b>\n            <div class=\"choices\"><button class=\"choice\" data-val=\"cat\">cat<\/button><button class=\"choice\" data-val=\"dog\">dog<\/button><\/div>\n            <div class=\"model\">Choose first.<\/div>\n            <div class=\"actions\"><button class=\"btn yellowbtn who-listen\" disabled>&#x1f50a; Listen<\/button><button class=\"btn primary who-said\" disabled>&#x1f3a4; I can say it<\/button><\/div>\n          <\/div>\n\n          <div class=\"whocard who-card generic\" data-answer=\"father\" data-name=\"Daniel\" data-poss=\"His\" data-done=\"0\">\n            <div class=\"portrait\">&#x1f468;<\/div>\n            <b>Who is Daniel?<\/b>\n            <div class=\"choices\"><button class=\"choice\" data-val=\"father\">father<\/button><button class=\"choice\" data-val=\"brother\">brother<\/button><\/div>\n            <div class=\"model\">Choose first.<\/div>\n            <div class=\"actions\"><button class=\"btn yellowbtn who-listen\" disabled>&#x1f50a; Listen<\/button><button class=\"btn primary who-said\" disabled>&#x1f3a4; I can say it<\/button><\/div>\n          <\/div>\n        <\/div>\n\n        <div class=\"unlock\" id=\"unlockWho\">&#x1f512; Solve and say all 4 family descriptions.<\/div>\n        <div class=\"actions\"><button class=\"btn soft next\" data-next=\"4\">\u2190 Choose &#038; Say<\/button><button class=\"btn primary next\" data-next=\"6\" id=\"nextWho\" disabled>Talk about my family \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> \u201cNow the English belongs to you. Build a description of someone in your family.\u201d<\/div>\n      <\/div>\n\n      <div class=\"card\">\n        <h3>6. Build your family description<\/h3>\n        <p class=\"muted\">Choose a family member and type a name. The activity will build a model for you.<\/p>\n\n        <div class=\"builder\">\n          <label>Family member\n            <select id=\"famRelation3\">\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\n          <label>Name\n            <input id=\"famName3\" maxlength=\"28\" placeholder=\"e.g. Ana\">\n          <\/label>\n\n          <label>This person is&#8230;\n            <select id=\"famGender3\">\n              <option value=\"\">Choose<\/option>\n              <option value=\"female\">female<\/option>\n              <option value=\"male\">male<\/option>\n            <\/select>\n          <\/label>\n\n          <label>One word\n            <select id=\"famWord3\">\n              <option value=\"\">Choose<\/option>\n              <option value=\"kind\">kind<\/option>\n              <option value=\"happy\">happy<\/option>\n              <option value=\"funny\">funny<\/option>\n              <option value=\"helpful\">helpful<\/option>\n            <\/select>\n          <\/label>\n        <\/div>\n\n        <div class=\"actions\"><button class=\"btn yellowbtn\" id=\"buildFamily3\">&#x2728; Build my description<\/button><\/div>\n\n        <div class=\"model\" id=\"familyModel3\">\n          This is my ________. His\/Her name is ________. He\/She is ________.\n        <\/div>\n\n        <div class=\"actions\">\n          <button class=\"btn soft\" id=\"listenFamilyModel3\">&#x1f50a; Listen to my model<\/button>\n          <button class=\"btn green\" id=\"saidFamilyModel3\">&#x1f3a4; I said it aloud<\/button>\n        <\/div>\n\n        <div class=\"card blue\" style=\"margin-top:16px\">\n          <h3 style=\"font-size:22px\">&#x1f3ad; Mini conversation<\/h3>\n          <div class=\"dialogue\" id=\"familyDialogue3\">\n            <div class=\"line\"><div class=\"who\">Keyla<\/div><div>Who is this?<\/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>What is his\/her name?<\/div><\/div>\n            <div class=\"line leo\"><div class=\"who\">You<\/div><div>His\/Her name is ________.<\/div><\/div>\n          <\/div>\n          <div class=\"actions\">\n            <button class=\"btn bluebtn\" id=\"listenFamDialogue3\">&#x1f50a; Listen to the dialogue<\/button>\n            <button class=\"btn primary\" id=\"practiceFamDialogue3\">&#x1f3ad; I practiced both parts<\/button>\n          <\/div>\n        <\/div>\n\n        <div class=\"unlock\" id=\"unlockFamilyBuild3\">&#x1f512; Build your description, say it and practice the mini conversation.<\/div>\n        <div class=\"actions\"><button class=\"btn soft next\" data-next=\"5\">\u2190 Who is this?<\/button><button class=\"btn primary next\" data-next=\"7\" id=\"nextFamilyBuild3\" disabled>Final speaking \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! Talk about your family with your own words. Your voice is the key.\u201d<\/div>\n      <\/div>\n\n      <div class=\"card lilac\">\n        <h3>7. My Family \u00b7 Final speaking mission<\/h3>\n        <p class=\"muted\">Complete the speaking missions. You can listen to the prompts, but try to answer without reading a model.<\/p>\n\n        <div class=\"missiongrid\">\n          <div class=\"mission speak-mission3\" data-done=\"0\">\n            <div class=\"mnum\">1<\/div>\n            <strong>Say: \u201cThis is my family.\u201d<\/strong>\n            <div class=\"actions\"><button class=\"btn yellowbtn listen\" data-text=\"Say: This is my family.\">&#x1f50a; Prompt<\/button><button class=\"btn primary mission-done3\">&#x1f3a4; Done<\/button><\/div>\n          <\/div>\n\n          <div class=\"mission speak-mission3\" data-done=\"0\">\n            <div class=\"mnum\">2<\/div>\n            <strong>Talk about one family member: \u201cThis is my\u2026\u201d<\/strong>\n            <div class=\"actions\"><button class=\"btn yellowbtn listen\" data-text=\"Talk about one family member. Say, This is my...\">&#x1f50a; Prompt<\/button><button class=\"btn primary mission-done3\">&#x1f3a4; Done<\/button><\/div>\n          <\/div>\n\n          <div class=\"mission speak-mission3\" data-done=\"0\">\n            <div class=\"mnum\">3<\/div>\n            <strong>Say the person\u2019s name using \u201cHis name is\u2026\u201d or \u201cHer name is\u2026\u201d<\/strong>\n            <div class=\"actions\"><button class=\"btn yellowbtn listen\" data-text=\"Say the person's name. Use, His name is, or, Her name is.\">&#x1f50a; Prompt<\/button><button class=\"btn primary mission-done3\">&#x1f3a4; Done<\/button><\/div>\n          <\/div>\n\n          <div class=\"mission speak-mission3\" data-done=\"0\">\n            <div class=\"mnum\">4<\/div>\n            <strong>Say one sentence with \u201cour\u201d or \u201ctheir\u201d.<\/strong>\n            <div class=\"actions\"><button class=\"btn yellowbtn listen\" data-text=\"Say one sentence with, our, or, their.\">&#x1f50a; Prompt<\/button><button class=\"btn primary mission-done3\">&#x1f3a4; Done<\/button><\/div>\n          <\/div>\n\n          <div class=\"mission speak-mission3\" data-done=\"0\">\n            <div class=\"mnum\">5<\/div>\n            <strong>Ask: \u201cWho is this?\u201d and answer with a complete sentence.<\/strong>\n            <div class=\"actions\"><button class=\"btn yellowbtn listen\" data-text=\"Ask: Who is this? Then answer with a complete sentence.\">&#x1f50a; Prompt<\/button><button class=\"btn primary mission-done3\">&#x1f3a4; Done<\/button><\/div>\n          <\/div>\n\n          <div class=\"mission\">\n            <div class=\"mnum\">\u2605<\/div>\n            <strong>Bonus: talk about two different family members.<\/strong>\n            <div class=\"actions\"><button class=\"btn yellowbtn listen\" data-text=\"Bonus. Talk about two different family members.\">&#x1f50a; Prompt<\/button><\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <div class=\"card yellow\">\n        <h3>&#x1f399;&#xfe0f; Record your family presentation<\/h3>\n        <p class=\"muted\">Speak for about 20\u201345 seconds. Try to use at least three possessive adjectives.<\/p>\n        <div class=\"rec\">\n          <div class=\"actions\">\n            <button class=\"btn red startRec3\">\u25cf Start recording<\/button>\n            <button class=\"btn soft stopRec3\" 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-check3\"> I used family words.<\/label>\n          <label class=\"selfcheck\"><input type=\"checkbox\" class=\"final-check3\"> I used <b>my \/ his \/ her<\/b> correctly.<\/label>\n          <label class=\"selfcheck\"><input type=\"checkbox\" class=\"final-check3\"> I tried to use <b>our \/ their \/ its<\/b>.<\/label>\n          <label class=\"selfcheck\"><input type=\"checkbox\" class=\"final-check3\"> I spoke clearly and listened to myself.<\/label>\n        <\/div>\n\n        <div class=\"unlock\" id=\"unlockFinal3\">&#x1f512; Complete the 5 missions and your self-check.<\/div>\n        <div class=\"actions\"><button class=\"btn soft next\" data-next=\"6\">\u2190 My Family<\/button><button class=\"btn green\" id=\"finishL3\" disabled>\u2605 Finish my adventure<\/button><\/div>\n\n        <div class=\"finish\" id=\"finishBoxL3\">\n          <div class=\"big\">&#x1f511;&#x1f49c;&#x1f468;&#x200d;&#x1f469;&#x200d;&#x1f467;&#x200d;&#x1f466;<\/div>\n          <h3>You used your English Key!<\/h3>\n          <p>You listened to a family story, learned family words, practiced possessive adjectives and spoke about people who are important to you.<\/p>\n          <div class=\"badge\">Cuentos ke Cuentan \u00b7 Family Storyteller<\/div>\n          <p><strong>Total: <span id=\"finalPtsL3\">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-l3-ckc');\n  if(!root)return;\n\n  let pts=0, unlocked=1;\n  const ptsEl=root.querySelector('#l3pts');\n  const levelEl=root.querySelector('#l3level');\n\n  function addPts(n){pts+=n;ptsEl.textContent=pts}\n\n  function speak(text){\n    if(!('speechSynthesis' in window)){\n      alert('Audio pronunciation is not available in this browser.');\n      return;\n    }\n    window.speechSynthesis.cancel();\n    const u=new SpeechSynthesisUtterance(text);\n    u.lang='en-US';\n    u.rate=.80;\n    u.pitch=1.04;\n    window.speechSynthesis.speak(u);\n  }\n\n  root.querySelectorAll('.listen').forEach(b=>{\n    b.addEventListener('click',()=>speak(b.dataset.text));\n  });\n\n  function unlockStep(n){\n    if(n>unlocked)unlocked=n;\n    root.querySelectorAll('.step').forEach(s=>{\n      const k=+s.dataset.step;\n      s.classList.toggle('locked',k>unlocked);\n      if(k<unlocked)s.classList.add('done');\n    });\n  }\n\n  function show(n){\n    if(n>unlocked)return;\n    root.querySelectorAll('.screen').forEach(s=>s.classList.remove('active'));\n    root.querySelector('[data-screen=\"'+n+'\"]').classList.add('active');\n    root.querySelectorAll('.step').forEach(s=>s.classList.remove('active'));\n    root.querySelector('.step[data-step=\"'+n+'\"]').classList.add('active');\n    levelEl.textContent=n;\n    root.scrollIntoView({behavior:'smooth',block:'start'});\n  }\n\n  root.querySelectorAll('.next').forEach(b=>{\n    b.addEventListener('click',()=>show(+b.dataset.next));\n  });\n\n  \/\/ STEP 1\n  let storyHeard=false;\n  root.querySelector('#storyHeard3').addEventListener('click',function(){\n    if(storyHeard)return;\n    storyHeard=true;\n    addPts(2);\n    this.textContent='\u2605 Story heard';\n    this.className='btn green';\n    checkStory();\n  });\n\n  root.querySelectorAll('.story-q3 .choice').forEach(b=>{\n    b.addEventListener('click',()=>{\n      const q=b.closest('.story-q3');\n      if(q.dataset.ok==='1')return;\n      if(b.dataset.correct==='1'){\n        q.dataset.ok='1';\n        b.classList.add('correct');\n        q.querySelectorAll('.choice').forEach(x=>x.disabled=true);\n        addPts(2);\n        checkStory();\n      }else{\n        b.classList.add('wrong');\n        setTimeout(()=>b.classList.remove('wrong'),700);\n      }\n    });\n  });\n\n  function checkStory(){\n    const done=[...root.querySelectorAll('.story-q3')].every(q=>q.dataset.ok==='1');\n    if(storyHeard&&done){\n      unlockStep(2);\n      root.querySelector('#nextStory3').disabled=false;\n      root.querySelector('#unlockStory3').textContent='&#x1f511; Family Words unlocked!';\n    }\n  }\n\n  \/\/ STEP 2\n  let familyWordsDone=0;\n  root.querySelectorAll('.family-said').forEach(b=>{\n    b.addEventListener('click',()=>{\n      const card=b.closest('.familycard');\n      if(card.dataset.fdone==='1')return;\n      card.dataset.fdone='1';\n      card.classList.add('done');\n      familyWordsDone++;\n      addPts(1);\n      b.textContent='\u2605 Collected';\n      b.className='btn green family-said';\n      if(familyWordsDone===6){\n        unlockStep(3);\n        root.querySelector('#nextFamilyWords').disabled=false;\n        root.querySelector('#unlockFamilyWords').textContent='&#x1f511; All family-word keys collected!';\n      }\n    });\n  });\n\n  \/\/ STEP 3\n  let possDone=0;\n  root.querySelectorAll('.poss-said').forEach(b=>{\n    b.addEventListener('click',()=>{\n      const card=b.closest('.posscard');\n      if(card.dataset.pdone==='1')return;\n      card.dataset.pdone='1';\n      card.classList.add('done');\n      possDone++;\n      addPts(1);\n      b.textContent='\u2605 Done';\n      b.className='btn green poss-said';\n      if(possDone===7){\n        unlockStep(4);\n        root.querySelector('#nextPoss').disabled=false;\n        root.querySelector('#unlockPoss').textContent='&#x1f511; Choose & Say unlocked!';\n      }\n    });\n  });\n\n  \/\/ STEP 4\n  let chooseSaid=0;\n  root.querySelectorAll('.poss-q').forEach(card=>{\n    const answer=card.dataset.answer;\n    const sentence=card.dataset.sentence;\n    const model=card.querySelector('.model');\n    const listen=card.querySelector('.q-listen');\n    const said=card.querySelector('.q-said');\n\n    card.querySelectorAll('.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';\n          b.classList.add('correct');\n          card.querySelectorAll('.choice').forEach(x=>x.disabled=true);\n          model.textContent=sentence;\n          listen.disabled=false;\n          said.disabled=false;\n          listen.onclick=()=>speak(sentence);\n          addPts(2);\n          const fb=root.querySelector('#possFeedback');\n          fb.className='feedback show ok';\n          fb.textContent='Correct! Now say the complete sentence.';\n        }else{\n          b.classList.add('wrong');\n          const fb=root.querySelector('#possFeedback');\n          fb.className='feedback show try';\n          fb.textContent='Think: who owns it or who are we talking about? Try again.';\n          setTimeout(()=>b.classList.remove('wrong'),700);\n        }\n      });\n    });\n\n    said.addEventListener('click',()=>{\n      if(card.dataset.chosen!=='1'||card.dataset.done==='1')return;\n      card.dataset.done='1';\n      chooseSaid++;\n      addPts(1);\n      said.textContent='\u2605 Said';\n      said.className='btn green q-said';\n      if(chooseSaid===6){\n        unlockStep(5);\n        root.querySelector('#nextChoosePoss').disabled=false;\n        root.querySelector('#unlockChoosePoss').textContent='&#x1f511; Family Detective unlocked!';\n      }\n    });\n  });\n\n  \/\/ STEP 5\n  let whoDone=0;\n  root.querySelectorAll('.who-card').forEach(card=>{\n    const answer=card.dataset.answer;\n    const name=card.dataset.name;\n    const possessive=card.dataset.poss;\n    const model=card.querySelector('.model');\n    const listen=card.querySelector('.who-listen');\n    const said=card.querySelector('.who-said');\n    let sentence='';\n\n    card.querySelectorAll('.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';\n          b.classList.add('correct');\n          card.querySelectorAll('.choice').forEach(x=>x.disabled=true);\n\n          if(answer==='cat'){\n            sentence='Misu is our cat. Its ball is yellow.';\n          }else if(card.classList.contains('generic')){\n            sentence='Daniel is the father. His name is Daniel.';\n          }else{\n            sentence='This is Keyla\u2019s '+answer+'. '+possessive+' name is '+name+'.';\n          }\n\n          model.textContent=sentence;\n          listen.disabled=false;\n          said.disabled=false;\n          listen.onclick=()=>speak(sentence);\n          addPts(2);\n        }else{\n          b.classList.add('wrong');\n          setTimeout(()=>b.classList.remove('wrong'),700);\n        }\n      });\n    });\n\n    said.addEventListener('click',()=>{\n      if(card.dataset.chosen!=='1'||card.dataset.done==='1')return;\n      card.dataset.done='1';\n      card.classList.add('done');\n      whoDone++;\n      addPts(1);\n      said.textContent='\u2605 Said';\n      said.className='btn green who-said';\n      if(whoDone===4){\n        unlockStep(6);\n        root.querySelector('#nextWho').disabled=false;\n        root.querySelector('#unlockWho').textContent='&#x1f511; My Family builder unlocked!';\n      }\n    });\n  });\n\n  \/\/ STEP 6\n  const relation=root.querySelector('#famRelation3');\n  const famName=root.querySelector('#famName3');\n  const gender=root.querySelector('#famGender3');\n  const word=root.querySelector('#famWord3');\n  const familyModel=root.querySelector('#familyModel3');\n  const familyDialogue=root.querySelector('#familyDialogue3');\n\n  let modelReady=false;\n  let modelSaid=false;\n  let dialoguePracticed=false;\n  let modelAwarded=false;\n\n  function buildFamily(){\n    const r=relation.value;\n    const n=famName.value.trim();\n    const g=gender.value;\n    const w=word.value;\n\n    if(!r||!n||!g||!w){\n      root.querySelector('#unlockFamilyBuild3').textContent='Complete all 4 boxes first.';\n      return false;\n    }\n\n    const subj=g==='female'?'She':'He';\n    const poss=g==='female'?'Her':'His';\n\n    const text='This is my '+r+'. '+poss+' name is '+n+'. '+subj+' is '+w+'.';\n    familyModel.textContent=text;\n\n    const lines=[\n      ['Keyla','Who is this?'],\n      ['You','This is my '+r+'.'],\n      ['Keyla','What is '+(g==='female'?'her':'his')+' name?'],\n      ['You',poss+' name is '+n+'.']\n    ];\n\n    familyDialogue.innerHTML=lines.map((l,i)=>\n      '<div class=\"line '+(i%2?'leo':'')+'\"><div class=\"who\">'+l[0]+'<\/div><div>'+l[1]+'<\/div><\/div>'\n    ).join('');\n\n    modelReady=true;\n    if(!modelAwarded){\n      addPts(2);\n      modelAwarded=true;\n    }\n    root.querySelector('#unlockFamilyBuild3').textContent='\u2713 Your family description is ready. Listen and practice it.';\n    checkBuildStep();\n    return true;\n  }\n\n  function currentModelText(){\n    return familyModel.textContent;\n  }\n\n  function currentDialogueText(){\n    return [...familyDialogue.querySelectorAll('.line div:last-child')].map(x=>x.textContent).join(' ');\n  }\n\n  root.querySelector('#buildFamily3').addEventListener('click',buildFamily);\n\n  root.querySelector('#listenFamilyModel3').addEventListener('click',()=>{\n    if(buildFamily())speak(currentModelText());\n  });\n\n  root.querySelector('#saidFamilyModel3').addEventListener('click',function(){\n    if(!modelReady && !buildFamily())return;\n    if(modelSaid)return;\n    modelSaid=true;\n    addPts(3);\n    this.textContent='\u2605 Description spoken';\n    this.disabled=true;\n    checkBuildStep();\n  });\n\n  root.querySelector('#listenFamDialogue3').addEventListener('click',()=>{\n    if(buildFamily())speak(currentDialogueText());\n  });\n\n  root.querySelector('#practiceFamDialogue3').addEventListener('click',function(){\n    if(!modelReady && !buildFamily())return;\n    if(dialoguePracticed)return;\n    dialoguePracticed=true;\n    addPts(3);\n    this.textContent='\u2605 Dialogue practiced';\n    this.disabled=true;\n    checkBuildStep();\n  });\n\n  function checkBuildStep(){\n    if(modelReady&&modelSaid&&dialoguePracticed){\n      unlockStep(7);\n      root.querySelector('#nextFamilyBuild3').disabled=false;\n      root.querySelector('#unlockFamilyBuild3').textContent='&#x1f511; Final speaking mission unlocked!';\n    }\n  }\n\n  \/\/ STEP 7\n  let missionsDone=0;\n  root.querySelectorAll('.mission-done3').forEach(b=>{\n    b.addEventListener('click',()=>{\n      const m=b.closest('.speak-mission3');\n      if(m.dataset.done==='1')return;\n      m.dataset.done='1';\n      missionsDone++;\n      addPts(2);\n      b.textContent='\u2605 Done';\n      b.className='btn green mission-done3';\n      checkFinal();\n    });\n  });\n\n  root.querySelectorAll('.final-check3').forEach(c=>c.addEventListener('change',checkFinal));\n\n  function checkFinal(){\n    const checks=[...root.querySelectorAll('.final-check3')].filter(c=>c.checked).length;\n    if(missionsDone===5&&checks===4){\n      root.querySelector('#finishL3').disabled=false;\n      root.querySelector('#unlockFinal3').textContent='&#x1f511; Your Family Storyteller badge is ready!';\n    }else{\n      root.querySelector('#finishL3').disabled=true;\n      root.querySelector('#unlockFinal3').textContent='Complete the 5 missions and all 4 self-checks.';\n    }\n  }\n\n  \/\/ RECORDING\n  let recorder=null,stream=null,chunks=[];\n\n  root.querySelector('.startRec3').addEventListener('click',async function(){\n    const status=root.querySelector('.recstatus');\n\n    if(!navigator.mediaDevices||!navigator.mediaDevices.getUserMedia||!window.MediaRecorder){\n      status.textContent='Microphone recording is not available in this browser.';\n      return;\n    }\n\n    try{\n      stream=await navigator.mediaDevices.getUserMedia({audio:true});\n      chunks=[];\n      recorder=new MediaRecorder(stream);\n\n      recorder.ondataavailable=e=>{\n        if(e.data.size)chunks.push(e.data);\n      };\n\n      recorder.onstop=()=>{\n        const blob=new Blob(chunks,{type:recorder.mimeType||'audio\/webm'});\n        const audio=root.querySelector('.playback');\n        audio.src=URL.createObjectURL(blob);\n        audio.hidden=false;\n        status.textContent='\u2713 Recording ready. Listen to your family presentation!';\n        if(stream)stream.getTracks().forEach(t=>t.stop());\n      };\n\n      recorder.start();\n      status.textContent='\u25cf Recording\u2026 Speak clearly and take your time.';\n      this.disabled=true;\n      root.querySelector('.stopRec3').disabled=false;\n    }catch(e){\n      status.textContent='Please allow microphone access to record your voice.';\n    }\n  });\n\n  root.querySelector('.stopRec3').addEventListener('click',function(){\n    if(recorder&&recorder.state==='recording')recorder.stop();\n    this.disabled=true;\n    root.querySelector('.startRec3').disabled=false;\n  });\n\n  root.querySelector('#finishL3').addEventListener('click',function(){\n    addPts(5);\n    root.querySelector('#finalPtsL3').textContent=pts;\n    root.querySelector('#finishBoxL3').classList.add('show');\n    root.querySelector('.step[data-step=\"7\"]').classList.add('done');\n    root.querySelector('#unlockFinal3').textContent='&#x1f49c; Adventure complete!';\n    this.disabled=true;\n  });\n\n})();\n<\/script>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Cuentos ke Cuentan \u2661 My English Key \u00b7 Starter 1 Lesson 3 \u00b7 My Family A progressive speaking adventure with family words and possessive adjectives: [&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-1717","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/cuentoskecuentan.com\/index.php?rest_route=\/wp\/v2\/pages\/1717","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=1717"}],"version-history":[{"count":2,"href":"https:\/\/cuentoskecuentan.com\/index.php?rest_route=\/wp\/v2\/pages\/1717\/revisions"}],"predecessor-version":[{"id":1721,"href":"https:\/\/cuentoskecuentan.com\/index.php?rest_route=\/wp\/v2\/pages\/1717\/revisions\/1721"}],"wp:attachment":[{"href":"https:\/\/cuentoskecuentan.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1717"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}