{"id":1898,"date":"2026-09-16T03:31:48","date_gmt":"2026-09-16T03:31:48","guid":{"rendered":"https:\/\/cuentoskecuentan.com\/?page_id=1898"},"modified":"2026-09-16T04:01:40","modified_gmt":"2026-09-16T04:01:40","slug":"likes-and-dislikes","status":"publish","type":"page","link":"https:\/\/cuentoskecuentan.com\/?page_id=1898","title":{"rendered":"Present tense"},"content":{"rendered":"\n<!--\nMY ENGLISH KEY \u00b7 LESSON 2\nHE \/ SHE + VERB-S + HIS \/ HER\nCuentos ke Cuentan \u00b7 KEY by Mara Nieto\nPegar completo en un bloque HTML personalizado de WordPress.\nSin librer\u00edas externas.\n-->\n\n<div id=\"mek-family-actions\">\n\n<style>\n#mek-family-actions{\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  --white:#FFFFFF;\n\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\n#mek-family-actions *{box-sizing:border-box}\n\n#mek-family-actions button,\n#mek-family-actions input,\n#mek-family-actions select{\n  font:inherit;\n}\n\n#mek-family-actions button{\n  touch-action:manipulation;\n}\n\n\/* BOOK *\/\n\n#mek-family-actions .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\n\/* HEADER *\/\n\n#mek-family-actions .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}\n\n#mek-family-actions .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\n#mek-family-actions .brandrow{\n  display:flex;\n  justify-content:space-between;\n  align-items:center;\n  gap:12px;\n  flex-wrap:wrap;\n}\n\n#mek-family-actions .ckc{\n  font-weight:900;\n  color:var(--purple);\n  font-size:20px;\n}\n\n#mek-family-actions .ckc .ke{\n  display:inline-block;\n  background:var(--yellow);\n  color:var(--purple-dark);\n  padding:1px 6px;\n  border-radius:8px;\n  transform:rotate(-3deg);\n}\n\n#mek-family-actions .keybrand{\n  font-weight:900;\n  color:var(--purple);\n  font-size:18px;\n}\n\n#mek-family-actions .keybrand b{\n  color:var(--yellow);\n}\n\n#mek-family-actions h2{\n  margin:14px 0 4px;\n  color:var(--purple);\n  font-size:clamp(32px,5vw,50px);\n  line-height:1.04;\n}\n\n#mek-family-actions .subtitle{\n  margin:0;\n  color:var(--gray);\n  font-size:18px;\n}\n\n#mek-family-actions .identity-note{\n  margin-top:15px;\n  display:inline-flex;\n  align-items:center;\n  gap:8px;\n  background:var(--yellow-soft);\n  border:1.5px solid #efd46f;\n  border-radius:999px;\n  padding:8px 14px;\n  color:var(--purple-dark);\n  font-weight:900;\n}\n\n\/* PATH *\/\n\n#mek-family-actions .pathwrap{\n  padding:18px 20px;\n  background:var(--lilac);\n  border-bottom:1px solid #e7dbe9;\n  overflow-x:auto;\n}\n\n#mek-family-actions .path{\n  display:grid;\n  grid-template-columns:repeat(5,minmax(105px,1fr));\n  gap:6px;\n  position:relative;\n  min-width:580px;\n}\n\n#mek-family-actions .path:before{\n  content:\"\";\n  position:absolute;\n  left:8%;\n  right:8%;\n  top:21px;\n  border-top:3px dashed var(--purple-mid);\n  z-index:0;\n}\n\n#mek-family-actions .step{\n  position:relative;\n  z-index:1;\n  text-align:center;\n}\n\n#mek-family-actions .dot{\n  width:45px;\n  height:45px;\n  border-radius:50%;\n  display:grid;\n  place-items:center;\n  margin:0 auto 6px;\n  background:#fff;\n  border:3px solid var(--purple-mid);\n  color:var(--purple);\n  font-weight:900;\n}\n\n#mek-family-actions .step.active .dot,\n#mek-family-actions .step.done .dot{\n  background:var(--purple);\n  color:#fff;\n  border-color:var(--purple);\n}\n\n#mek-family-actions .step.done .dot{\n  font-size:0;\n}\n\n#mek-family-actions .step.done .dot:after{\n  content:\"\u2713\";\n  font-size:20px;\n}\n\n#mek-family-actions .step.locked{\n  opacity:.42;\n}\n\n#mek-family-actions .step small{\n  font-weight:900;\n  color:var(--purple-dark);\n  font-size:12px;\n}\n\n\/* STATUS *\/\n\n#mek-family-actions .status{\n  display:flex;\n  justify-content:flex-end;\n  gap:10px;\n  padding:12px 22px;\n  flex-wrap:wrap;\n  border-bottom:1px solid #eee4ef;\n}\n\n#mek-family-actions .pill{\n  padding:7px 12px;\n  border-radius:999px;\n  background:var(--purple);\n  color:#fff;\n  font-weight:900;\n}\n\n#mek-family-actions .pill.yellow{\n  background:var(--yellow);\n  color:var(--purple-dark);\n}\n\n\/* CONTENT *\/\n\n#mek-family-actions .content{\n  padding:25px;\n}\n\n#mek-family-actions .screen{\n  display:none;\n}\n\n#mek-family-actions .screen.active{\n  display:block;\n}\n\n\/* GUIDES *\/\n\n#mek-family-actions .guide{\n  display:grid;\n  grid-template-columns:92px 1fr;\n  gap:16px;\n  align-items:center;\n  margin-bottom:18px;\n}\n\n#mek-family-actions .avatar{\n  width:84px;\n  height:84px;\n  border-radius:50%;\n  display:grid;\n  place-items:center;\n  font-size:45px;\n  background:var(--yellow-soft);\n  border:4px solid var(--yellow);\n}\n\n#mek-family-actions .avatar.purple{\n  background:var(--lilac-2);\n  border-color:var(--purple);\n}\n\n#mek-family-actions .avatar.gray{\n  background:#F0EFF1;\n  border-color:#9B929D;\n}\n\n#mek-family-actions .speech{\n  position:relative;\n  background:#fff;\n  border:2px solid var(--purple);\n  border-radius:20px;\n  padding:14px 16px;\n  color:var(--purple-dark);\n  font-weight:800;\n}\n\n#mek-family-actions .speech:before{\n  content:\"\";\n  position:absolute;\n  left:-13px;\n  top:30px;\n  width:22px;\n  height:22px;\n  background:#fff;\n  border-left:2px solid var(--purple);\n  border-bottom:2px solid var(--purple);\n  transform:rotate(45deg);\n}\n\n\/* CARDS *\/\n\n#mek-family-actions .card{\n  border:2px solid #E7DBE9;\n  border-radius:23px;\n  padding:20px;\n  margin:14px 0;\n  background:#fff;\n}\n\n#mek-family-actions .card.lilac{\n  background:var(--lilac);\n  border-color:#DCC9DF;\n}\n\n#mek-family-actions .card.yellow{\n  background:var(--yellow-soft);\n  border-color:#EFD873;\n}\n\n#mek-family-actions .card h3{\n  margin:0 0 9px;\n  color:var(--purple);\n  font-size:26px;\n}\n\n#mek-family-actions .muted{\n  color:var(--gray);\n  margin-top:0;\n}\n\n\/* RULE *\/\n\n#mek-family-actions .rulegrid{\n  display:grid;\n  grid-template-columns:repeat(2,minmax(0,1fr));\n  gap:12px;\n}\n\n#mek-family-actions .rule{\n  background:#fff;\n  border:2px solid #E5D8E7;\n  border-radius:18px;\n  padding:18px;\n}\n\n#mek-family-actions .rule strong{\n  display:block;\n  color:var(--purple);\n  font-size:22px;\n  margin-bottom:7px;\n}\n\n#mek-family-actions .example{\n  font-weight:900;\n  color:var(--purple-dark);\n  margin-top:8px;\n}\n\n\/* BUTTONS *\/\n\n#mek-family-actions .actions{\n  display:flex;\n  flex-wrap:wrap;\n  gap:8px;\n  margin-top:12px;\n}\n\n#mek-family-actions .btn{\n  border:0;\n  border-radius:14px;\n  padding:10px 14px;\n  font-weight:900;\n  cursor:pointer;\n  transition:.16s ease;\n}\n\n#mek-family-actions .btn:hover{\n  transform:translateY(-1px);\n}\n\n#mek-family-actions .btn:disabled{\n  opacity:.43;\n  cursor:not-allowed;\n  transform:none;\n}\n\n#mek-family-actions .primary{\n  background:var(--purple);\n  color:#fff;\n}\n\n#mek-family-actions .yellowbtn{\n  background:var(--yellow);\n  color:var(--purple-dark);\n}\n\n#mek-family-actions .soft{\n  background:var(--lilac-2);\n  color:var(--purple-dark);\n}\n\n\/* QUESTIONS *\/\n\n#mek-family-actions .questiongrid{\n  display:grid;\n  grid-template-columns:repeat(2,minmax(0,1fr));\n  gap:12px;\n}\n\n#mek-family-actions .question{\n  background:#fff;\n  border:2px solid #E5D8E7;\n  border-radius:18px;\n  padding:15px;\n}\n\n#mek-family-actions .question b{\n  display:block;\n  color:var(--purple-dark);\n  font-size:18px;\n  margin-bottom:10px;\n}\n\n#mek-family-actions .choices{\n  display:flex;\n  gap:8px;\n  flex-wrap:wrap;\n}\n\n#mek-family-actions .choice{\n  border:2px solid var(--purple-mid);\n  background:#fff;\n  color:var(--purple-dark);\n  border-radius:13px;\n  padding:9px 12px;\n  font-weight:900;\n  cursor:pointer;\n}\n\n#mek-family-actions .choice.correct{\n  background:var(--green-soft);\n  border-color:var(--green);\n  color:#2E6C4E;\n}\n\n#mek-family-actions .choice.wrong{\n  background:var(--red-soft);\n  border-color:var(--red);\n  color:#8B3E49;\n}\n\n\/* SENTENCE BUILDER *\/\n\n#mek-family-actions .builder{\n  display:grid;\n  grid-template-columns:repeat(3,minmax(0,1fr));\n  gap:12px;\n}\n\n#mek-family-actions label{\n  font-weight:900;\n  color:var(--purple-dark);\n}\n\n#mek-family-actions select,\n#mek-family-actions input{\n  width:100%;\n  margin-top:6px;\n  padding:11px 12px;\n  border:2px solid #D9C7DC;\n  border-radius:12px;\n  background:#fff;\n}\n\n#mek-family-actions select:focus,\n#mek-family-actions input:focus{\n  outline:3px solid rgba(246,199,68,.34);\n  border-color:var(--purple);\n}\n\n#mek-family-actions .model{\n  margin-top:14px;\n  border-left:6px solid var(--yellow);\n  background:var(--lilac);\n  border-radius:12px;\n  padding:13px 15px;\n  color:var(--purple-dark);\n  font-weight:900;\n  font-size:20px;\n}\n\n\/* UNSCRAMBLE *\/\n\n#mek-family-actions .scramble{\n  border:2px solid #E5D8E7;\n  border-radius:18px;\n  padding:15px;\n  margin:12px 0;\n  background:#fff;\n}\n\n#mek-family-actions .wordbank{\n  display:flex;\n  flex-wrap:wrap;\n  gap:8px;\n  margin-bottom:12px;\n}\n\n#mek-family-actions .wordchip{\n  background:var(--lilac-2);\n  border:2px solid var(--purple-mid);\n  color:var(--purple-dark);\n  border-radius:12px;\n  padding:7px 10px;\n  font-weight:900;\n}\n\n#mek-family-actions .scramble input{\n  margin-top:0;\n}\n\n\/* FEEDBACK *\/\n\n#mek-family-actions .feedback{\n  display:none;\n  margin-top:12px;\n  padding:12px 14px;\n  border-radius:14px;\n  font-weight:800;\n}\n\n#mek-family-actions .feedback.show{\n  display:block;\n}\n\n#mek-family-actions .feedback.ok{\n  background:var(--green-soft);\n  color:#2E6C4F;\n}\n\n#mek-family-actions .feedback.try{\n  background:var(--yellow-soft);\n  color:#74590E;\n}\n\n#mek-family-actions .unlock{\n  margin-top:14px;\n  padding:12px 14px;\n  border-radius:14px;\n  background:var(--lilac);\n  color:var(--purple-dark);\n  font-weight:800;\n}\n\n\/* FINAL *\/\n\n#mek-family-actions .missiongrid{\n  display:grid;\n  grid-template-columns:repeat(2,minmax(0,1fr));\n  gap:12px;\n}\n\n#mek-family-actions .mission{\n  border:2px solid #E5D8E7;\n  border-radius:18px;\n  padding:16px;\n  background:#fff;\n}\n\n#mek-family-actions .mnum{\n  width:36px;\n  height:36px;\n  border-radius:50%;\n  display:grid;\n  place-items:center;\n  background:var(--yellow);\n  color:var(--purple-dark);\n  font-weight:900;\n  margin-bottom:8px;\n}\n\n#mek-family-actions .finish{\n  display:none;\n  text-align:center;\n  margin-top:18px;\n  padding:24px;\n  background:linear-gradient(180deg,#FFF9DE,#fff);\n  border:2px solid var(--yellow);\n  border-radius:23px;\n}\n\n#mek-family-actions .finish.show{\n  display:block;\n}\n\n#mek-family-actions .finish .big{\n  font-size:52px;\n}\n\n#mek-family-actions .footerbrand{\n  text-align:center;\n  padding:16px;\n  background:var(--purple);\n  color:#fff;\n  font-weight:900;\n}\n\n#mek-family-actions .footerbrand span{\n  color:var(--yellow);\n}\n\n@media(max-width:820px){\n\n  #mek-family-actions .rulegrid,\n  #mek-family-actions .questiongrid,\n  #mek-family-actions .builder,\n  #mek-family-actions .missiongrid{\n    grid-template-columns:1fr;\n  }\n\n  #mek-family-actions .guide{\n    grid-template-columns:70px 1fr;\n  }\n\n  #mek-family-actions .avatar{\n    width:66px;\n    height:66px;\n    font-size:35px;\n  }\n\n  #mek-family-actions .content{\n    padding:16px;\n  }\n\n  #mek-family-actions .top{\n    padding:22px 18px;\n  }\n}\n<\/style>\n\n\n<div class=\"book\">\n\n<header class=\"top\">\n\n  <div class=\"brandrow\">\n\n    <div class=\"ckc\">\n      Cuentos <span class=\"ke\">ke<\/span> Cuentan \u2661\n    <\/div>\n\n    <div class=\"keybrand\">\n      My English <b>Key<\/b> \u00b7 Starter 1\n    <\/div>\n\n  <\/div>\n\n  <h2>He \/ She and His \/ Her<\/h2>\n\n  <p class=\"subtitle\">\n    Describe people, their actions and the things that belong to them.\n  <\/p>\n\n  <div class=\"identity-note\">\n    &#x1f511; Small steps \u00b7 real English \u00b7 growing confidence\n  <\/div>\n\n<\/header>\n\n\n<div class=\"pathwrap\">\n\n  <div class=\"path\">\n\n    <div class=\"step active\" data-step=\"1\">\n      <div class=\"dot\">1<\/div>\n      <small>Remember<\/small>\n    <\/div>\n\n    <div class=\"step locked\" data-step=\"2\">\n      <div class=\"dot\">2<\/div>\n      <small>Verb-s<\/small>\n    <\/div>\n\n    <div class=\"step locked\" data-step=\"3\">\n      <div class=\"dot\">3<\/div>\n      <small>His \/ Her<\/small>\n    <\/div>\n\n    <div class=\"step locked\" data-step=\"4\">\n      <div class=\"dot\">4<\/div>\n      <small>Order<\/small>\n    <\/div>\n\n    <div class=\"step locked\" data-step=\"5\">\n      <div class=\"dot\">5<\/div>\n      <small>Challenge<\/small>\n    <\/div>\n\n  <\/div>\n\n<\/div>\n\n\n<div class=\"status\">\n\n  <div class=\"pill yellow\">\n    &#x2b50; <span id=\"familyPts\">0<\/span> points\n  <\/div>\n\n  <div class=\"pill\">\n    &#x1f511; Step <span id=\"familyLevel\">1<\/span>\/5\n  <\/div>\n\n<\/div>\n\n\n<main class=\"content\">\n\n\n<!-- STEP 1 -->\n\n<section class=\"screen active\" data-screen=\"1\">\n\n  <div class=\"guide\">\n\n    <div class=\"avatar purple\">&#x1f467;&#x1f3fb;<\/div>\n\n    <div class=\"speech\">\n      <strong>Keyla says:<\/strong>\n      \u201cWhen we talk about he or she, the verb changes. Look carefully!\u201d\n    <\/div>\n\n  <\/div>\n\n\n  <div class=\"card lilac\">\n\n    <h3>1. Remember the change<\/h3>\n\n    <div class=\"rulegrid\">\n\n      <div class=\"rule\">\n        <strong>&#x1f64b; I<\/strong>\n        I read every day.\n        <div class=\"example\">read<\/div>\n      <\/div>\n\n      <div class=\"rule\">\n        <strong>&#x1f467; She<\/strong>\n        She reads every day.\n        <div class=\"example\">read \u2192 reads<\/div>\n      <\/div>\n\n      <div class=\"rule\">\n        <strong>&#x1f64b; I<\/strong>\n        I watch TV.\n        <div class=\"example\">watch<\/div>\n      <\/div>\n\n      <div class=\"rule\">\n        <strong>&#x1f466; He<\/strong>\n        He watches TV.\n        <div class=\"example\">watch \u2192 watches<\/div>\n      <\/div>\n\n    <\/div>\n\n\n    <div class=\"card yellow\">\n\n      <h3 style=\"font-size:21px\">\n        Try it\n      <\/h3>\n\n      <div class=\"questiongrid\">\n\n        <div class=\"question starter\" data-answer=\"plays\">\n          <b>Leo ___ soccer.<\/b>\n          <div class=\"choices\">\n            <button class=\"choice\">play<\/button>\n            <button class=\"choice\">plays<\/button>\n          <\/div>\n        <\/div>\n\n        <div class=\"question starter\" data-answer=\"reads\">\n          <b>Keyla ___ a book.<\/b>\n          <div class=\"choices\">\n            <button class=\"choice\">reads<\/button>\n            <button class=\"choice\">read<\/button>\n          <\/div>\n        <\/div>\n\n      <\/div>\n\n    <\/div>\n\n\n    <div class=\"unlock\" id=\"unlock1\">\n      &#x1f512; Complete both examples.\n    <\/div>\n\n    <div class=\"actions\">\n\n      <button class=\"btn primary next\"\n      id=\"next1\"\n      data-next=\"2\"\n      disabled>\n        Verb-s \u2192\n      <\/button>\n\n    <\/div>\n\n  <\/div>\n\n<\/section>\n\n\n\n<!-- STEP 2 -->\n\n<section class=\"screen\" data-screen=\"2\">\n\n  <div class=\"guide\">\n\n    <div class=\"avatar\">&#x1f466;&#x1f3fb;<\/div>\n\n    <div class=\"speech\">\n      <strong>Leo says:<\/strong>\n      \u201cNow choose the verb that completes each sentence.\u201d\n    <\/div>\n\n  <\/div>\n\n\n  <div class=\"card\">\n\n    <h3>2. Choose the correct verb<\/h3>\n\n    <p class=\"muted\">\n      Pay attention to he, she and the verb ending.\n    <\/p>\n\n\n    <div class=\"questiongrid\">\n\n\n      <div class=\"question verbq\" data-answer=\"cooks\">\n        <b>1. Mom ___ dinner every day.<\/b>\n        <div class=\"choices\">\n          <button class=\"choice\">cook<\/button>\n          <button class=\"choice\">cooks<\/button>\n        <\/div>\n      <\/div>\n\n\n      <div class=\"question verbq\" data-answer=\"plays\">\n        <b>2. Leo ___ soccer after school.<\/b>\n        <div class=\"choices\">\n          <button class=\"choice\">plays<\/button>\n          <button class=\"choice\">play<\/button>\n        <\/div>\n      <\/div>\n\n\n      <div class=\"question verbq\" data-answer=\"reads\">\n        <b>3. Keyla ___ a book at night.<\/b>\n        <div class=\"choices\">\n          <button class=\"choice\">read<\/button>\n          <button class=\"choice\">reads<\/button>\n        <\/div>\n      <\/div>\n\n\n      <div class=\"question verbq\" data-answer=\"works\">\n        <b>4. Dad ___ at home.<\/b>\n        <div class=\"choices\">\n          <button class=\"choice\">works<\/button>\n          <button class=\"choice\">work<\/button>\n        <\/div>\n      <\/div>\n\n\n      <div class=\"question verbq\" data-answer=\"watches\">\n        <b>5. He ___ TV with his family.<\/b>\n        <div class=\"choices\">\n          <button class=\"choice\">watchs<\/button>\n          <button class=\"choice\">watches<\/button>\n        <\/div>\n      <\/div>\n\n\n      <div class=\"question verbq\" data-answer=\"helps\">\n        <b>6. She ___ her mother at home.<\/b>\n        <div class=\"choices\">\n          <button class=\"choice\">help<\/button>\n          <button class=\"choice\">helps<\/button>\n        <\/div>\n      <\/div>\n\n    <\/div>\n\n\n    <div class=\"feedback\" id=\"verbFeedback\"><\/div>\n\n    <div class=\"unlock\" id=\"unlock2\">\n      &#x1f512; Complete all 6 sentences.\n    <\/div>\n\n\n    <div class=\"actions\">\n\n      <button class=\"btn soft next\" data-next=\"1\">\n        \u2190 Remember\n      <\/button>\n\n      <button class=\"btn primary next\"\n      id=\"next2\"\n      data-next=\"3\"\n      disabled>\n        His \/ Her \u2192\n      <\/button>\n\n    <\/div>\n\n  <\/div>\n\n<\/section>\n\n\n\n<!-- STEP 3 -->\n\n<section class=\"screen\" data-screen=\"3\">\n\n  <div class=\"guide\">\n\n    <div class=\"avatar gray\">&#x1f431;<\/div>\n\n    <div class=\"speech\">\n      <strong>Misu says:<\/strong>\n      \u201cWhose thing is it? Use his for a boy or man and her for a girl or woman.\u201d\n    <\/div>\n\n  <\/div>\n\n\n  <div class=\"card yellow\">\n\n    <h3>3. His or her?<\/h3>\n\n\n    <div class=\"questiongrid\">\n\n\n      <div class=\"question possq\" data-answer=\"his\">\n        <b>&#x26bd; This is Leo. It is ___ ball.<\/b>\n        <div class=\"choices\">\n          <button class=\"choice\">his<\/button>\n          <button class=\"choice\">her<\/button>\n        <\/div>\n      <\/div>\n\n\n      <div class=\"question possq\" data-answer=\"her\">\n        <b>&#x1f4d6; This is Keyla. It is ___ book.<\/b>\n        <div class=\"choices\">\n          <button class=\"choice\">his<\/button>\n          <button class=\"choice\">her<\/button>\n        <\/div>\n      <\/div>\n\n\n      <div class=\"question possq\" data-answer=\"her\">\n        <b>&#x1f372; This is Mom. It is ___ kitchen.<\/b>\n        <div class=\"choices\">\n          <button class=\"choice\">her<\/button>\n          <button class=\"choice\">his<\/button>\n        <\/div>\n      <\/div>\n\n\n      <div class=\"question possq\" data-answer=\"his\">\n        <b>&#x1f4bb; This is Dad. It is ___ computer.<\/b>\n        <div class=\"choices\">\n          <button class=\"choice\">her<\/button>\n          <button class=\"choice\">his<\/button>\n        <\/div>\n      <\/div>\n\n\n      <div class=\"question possq\" data-answer=\"her\">\n        <b>&#x1f6b2; This is my sister. It is ___ bike.<\/b>\n        <div class=\"choices\">\n          <button class=\"choice\">his<\/button>\n          <button class=\"choice\">her<\/button>\n        <\/div>\n      <\/div>\n\n\n      <div class=\"question possq\" data-answer=\"his\">\n        <b>&#x1f3ae; This is my brother. It is ___ game.<\/b>\n        <div class=\"choices\">\n          <button class=\"choice\">his<\/button>\n          <button class=\"choice\">her<\/button>\n        <\/div>\n      <\/div>\n\n\n    <\/div>\n\n\n    <div class=\"unlock\" id=\"unlock3\">\n      &#x1f512; Complete all 6 sentences.\n    <\/div>\n\n\n    <div class=\"actions\">\n\n      <button class=\"btn soft next\" data-next=\"2\">\n        \u2190 Verb-s\n      <\/button>\n\n      <button class=\"btn primary next\"\n      id=\"next3\"\n      data-next=\"4\"\n      disabled>\n        Order \u2192\n      <\/button>\n\n    <\/div>\n\n  <\/div>\n\n<\/section>\n\n\n\n<!-- STEP 4 -->\n\n<section class=\"screen\" data-screen=\"4\">\n\n  <div class=\"guide\">\n\n    <div class=\"avatar purple\">&#x1f467;&#x1f3fb;<\/div>\n\n    <div class=\"speech\">\n      <strong>Keyla says:<\/strong>\n      \u201cThis one is harder. Put the words in the correct order.\u201d\n    <\/div>\n\n  <\/div>\n\n\n  <div class=\"card lilac\">\n\n    <h3>4. Unscramble the sentences<\/h3>\n\n    <p class=\"muted\">\n      Type the complete sentence.\n    <\/p>\n\n\n    <div class=\"scramble\"\n    data-answer=\"She reads her book.\">\n\n      <div class=\"wordbank\">\n        <span class=\"wordchip\">her book<\/span>\n        <span class=\"wordchip\">reads<\/span>\n        <span class=\"wordchip\">She<\/span>\n      <\/div>\n\n      <input type=\"text\"\n      placeholder=\"Write the sentence\">\n\n      <div class=\"actions\">\n        <button class=\"btn primary check-scramble\">\n          Check\n        <\/button>\n\n        <button class=\"btn yellowbtn hear-scramble\"\n        disabled>\n          &#x1f50a; Hear sentence\n        <\/button>\n      <\/div>\n\n      <div class=\"feedback\"><\/div>\n\n    <\/div>\n\n\n\n    <div class=\"scramble\"\n    data-answer=\"He plays soccer after school.\">\n\n      <div class=\"wordbank\">\n        <span class=\"wordchip\">after school<\/span>\n        <span class=\"wordchip\">soccer<\/span>\n        <span class=\"wordchip\">He<\/span>\n        <span class=\"wordchip\">plays<\/span>\n      <\/div>\n\n      <input type=\"text\"\n      placeholder=\"Write the sentence\">\n\n      <div class=\"actions\">\n        <button class=\"btn primary check-scramble\">\n          Check\n        <\/button>\n\n        <button class=\"btn yellowbtn hear-scramble\"\n        disabled>\n          &#x1f50a; Hear sentence\n        <\/button>\n      <\/div>\n\n      <div class=\"feedback\"><\/div>\n\n    <\/div>\n\n\n\n    <div class=\"scramble\"\n    data-answer=\"She helps her mother at home.\">\n\n      <div class=\"wordbank\">\n        <span class=\"wordchip\">at home<\/span>\n        <span class=\"wordchip\">her mother<\/span>\n        <span class=\"wordchip\">helps<\/span>\n        <span class=\"wordchip\">She<\/span>\n      <\/div>\n\n      <input type=\"text\"\n      placeholder=\"Write the sentence\">\n\n      <div class=\"actions\">\n        <button class=\"btn primary check-scramble\">\n          Check\n        <\/button>\n\n        <button class=\"btn yellowbtn hear-scramble\"\n        disabled>\n          &#x1f50a; Hear sentence\n        <\/button>\n      <\/div>\n\n      <div class=\"feedback\"><\/div>\n\n    <\/div>\n\n\n\n    <div class=\"scramble\"\n    data-answer=\"He watches TV with his family.\">\n\n      <div class=\"wordbank\">\n        <span class=\"wordchip\">his family<\/span>\n        <span class=\"wordchip\">He<\/span>\n        <span class=\"wordchip\">TV<\/span>\n        <span class=\"wordchip\">watches<\/span>\n        <span class=\"wordchip\">with<\/span>\n      <\/div>\n\n      <input type=\"text\"\n      placeholder=\"Write the sentence\">\n\n      <div class=\"actions\">\n        <button class=\"btn primary check-scramble\">\n          Check\n        <\/button>\n\n        <button class=\"btn yellowbtn hear-scramble\"\n        disabled>\n          &#x1f50a; Hear sentence\n        <\/button>\n      <\/div>\n\n      <div class=\"feedback\"><\/div>\n\n    <\/div>\n\n\n    <div class=\"unlock\" id=\"unlock4\">\n      &#x1f512; Correct all 4 sentences.\n    <\/div>\n\n\n    <div class=\"actions\">\n\n      <button class=\"btn soft next\" data-next=\"3\">\n        \u2190 His \/ Her\n      <\/button>\n\n      <button class=\"btn primary next\"\n      id=\"next4\"\n      data-next=\"5\"\n      disabled>\n        Challenge \u2192\n      <\/button>\n\n    <\/div>\n\n  <\/div>\n\n<\/section>\n\n\n\n<!-- STEP 5 -->\n\n<section class=\"screen\" data-screen=\"5\">\n\n  <div class=\"guide\">\n\n    <div class=\"avatar gray\">&#x1f431;<\/div>\n\n    <div class=\"speech\">\n      <strong>Misu says:<\/strong>\n      \u201cNow use everything together. Build complete sentences!\u201d\n    <\/div>\n\n  <\/div>\n\n\n  <div class=\"card\">\n\n    <h3>5. Family Sentence Challenge<\/h3>\n\n    <p class=\"muted\">\n      Choose a person, an action and the correct possessive word.\n    <\/p>\n\n\n    <div class=\"builder\">\n\n\n      <label>\n        Person\n        <select id=\"buildPerson\">\n          <option value=\"\">Choose<\/option>\n          <option value=\"Keyla|She|her\">Keyla<\/option>\n          <option value=\"Leo|He|his\">Leo<\/option>\n          <option value=\"Mom|She|her\">Mom<\/option>\n          <option value=\"Dad|He|his\">Dad<\/option>\n        <\/select>\n      <\/label>\n\n\n      <label>\n        Action\n        <select id=\"buildAction\">\n          <option value=\"\">Choose<\/option>\n          <option value=\"reads|book\">read a book<\/option>\n          <option value=\"plays with|family\">play with the family<\/option>\n          <option value=\"helps|mother\">help mother<\/option>\n          <option value=\"watches TV with|family\">watch TV with family<\/option>\n          <option value=\"works on|computer\">work on a computer<\/option>\n        <\/select>\n      <\/label>\n\n\n      <label>\n        Possessive\n        <select id=\"buildPossessive\">\n          <option value=\"\">Choose<\/option>\n          <option value=\"his\">his<\/option>\n          <option value=\"her\">her<\/option>\n        <\/select>\n      <\/label>\n\n\n    <\/div>\n\n\n    <div class=\"actions\">\n\n      <button class=\"btn yellowbtn\"\n      id=\"buildSentence\">\n        &#x2728; Build sentence\n      <\/button>\n\n    <\/div>\n\n\n    <div class=\"model\" id=\"finalModel\">\n      Choose the three parts.\n    <\/div>\n\n\n    <div class=\"feedback\" id=\"builderFeedback\"><\/div>\n\n\n    <div class=\"actions\">\n\n      <button class=\"btn yellowbtn\"\n      id=\"hearFinal\"\n      disabled>\n        &#x1f50a; Hear sentence\n      <\/button>\n\n      <button class=\"btn primary\"\n      id=\"finishMission\"\n      disabled>\n        \u2713 I can say it\n      <\/button>\n\n    <\/div>\n\n\n    <div class=\"finish\" id=\"finishBox\">\n\n      <div class=\"big\">&#x1f511;&#x1f31f;<\/div>\n\n      <h3>You found your English Key!<\/h3>\n\n      <p>\n        You used he, she, verb-s, his and her.\n      <\/p>\n\n      <strong>\n        Total: <span id=\"finalPoints\">0<\/span> points\n      <\/strong>\n\n    <\/div>\n\n  <\/div>\n\n\n  <div class=\"actions\">\n    <button class=\"btn soft next\" data-next=\"4\">\n      \u2190 Order\n    <\/button>\n  <\/div>\n\n<\/section>\n\n\n<\/main>\n\n\n<div class=\"footerbrand\">\n  Cuentos <span>ke<\/span> Cuentan \u00b7 KEY by Mara Nieto\n<\/div>\n\n<\/div>\n\n\n\n<script>\n(function(){\n\n  const root=document.getElementById('mek-family-actions');\n\n  if(!root || root.dataset.ready==='1') return;\n  root.dataset.ready='1';\n\n  let points=0;\n  let unlocked=1;\n\n  const pointsEl=root.querySelector('#familyPts');\n  const levelEl=root.querySelector('#familyLevel');\n\n\n  \/* POINTS *\/\n\n  function addPoints(n){\n    points+=n;\n    pointsEl.textContent=points;\n  }\n\n\n  \/* AUDIO SUPPORT *\/\n\n  function speak(text){\n\n    if(!('speechSynthesis' in window)){\n      alert('Audio pronunciation is not available in this browser.');\n      return;\n    }\n\n    window.speechSynthesis.cancel();\n\n    const utterance=\n      new SpeechSynthesisUtterance(text);\n\n    utterance.lang='en-US';\n    utterance.rate=.82;\n    utterance.pitch=1.04;\n\n    window.speechSynthesis.speak(utterance);\n  }\n\n\n  \/* NAVIGATION *\/\n\n  function unlockStep(n){\n\n    if(n>unlocked) unlocked=n;\n\n    root.querySelectorAll('.step').forEach(step=>{\n\n      const num=Number(step.dataset.step);\n\n      step.classList.toggle(\n        'locked',\n        num>unlocked\n      );\n\n      if(num<unlocked){\n        step.classList.add('done');\n      }\n\n    });\n\n  }\n\n\n  function showScreen(n){\n\n    if(n>unlocked) return;\n\n    root.querySelectorAll('.screen')\n      .forEach(screen=>\n        screen.classList.remove('active')\n      );\n\n    const target=\n      root.querySelector('[data-screen=\"'+n+'\"]');\n\n    if(target){\n      target.classList.add('active');\n    }\n\n    root.querySelectorAll('.step')\n      .forEach(step=>\n        step.classList.remove('active')\n      );\n\n    const pathStep=\n      root.querySelector('.step[data-step=\"'+n+'\"]');\n\n    if(pathStep){\n      pathStep.classList.add('active');\n    }\n\n    levelEl.textContent=n;\n\n    root.scrollIntoView({\n      behavior:'smooth',\n      block:'start'\n    });\n  }\n\n\n  root.querySelectorAll('.next')\n  .forEach(button=>{\n\n    button.addEventListener('click',()=>{\n\n      showScreen(\n        Number(button.dataset.next)\n      );\n\n    });\n\n  });\n\n\n  \/* GENERIC MULTIPLE CHOICE *\/\n\n  function activateQuestions(selector,total,nextButton,unlockBox,nextStep){\n\n    let completed=0;\n\n    root.querySelectorAll(selector)\n    .forEach(question=>{\n\n      question.querySelectorAll('.choice')\n      .forEach(button=>{\n\n        button.addEventListener('click',()=>{\n\n          if(question.dataset.done==='1') return;\n\n          const correct=\n            question.dataset.answer;\n\n          const selected=\n            button.textContent.trim();\n\n          if(selected===correct){\n\n            question.dataset.done='1';\n\n            button.classList.add('correct');\n\n            question.querySelectorAll('.choice')\n            .forEach(b=>b.disabled=true);\n\n            completed++;\n            addPoints(2);\n\n            if(completed===total){\n\n              root.querySelector(unlockBox)\n                .textContent='\u2713 Step complete.';\n\n              root.querySelector(nextButton)\n                .disabled=false;\n\n              unlockStep(nextStep);\n\n            }\n\n          }else{\n\n            button.classList.add('wrong');\n\n            setTimeout(()=>{\n              button.classList.remove('wrong');\n            },650);\n\n          }\n\n        });\n\n      });\n\n    });\n\n  }\n\n\n  activateQuestions(\n    '.starter',\n    2,\n    '#next1',\n    '#unlock1',\n    2\n  );\n\n\n  activateQuestions(\n    '.verbq',\n    6,\n    '#next2',\n    '#unlock2',\n    3\n  );\n\n\n  activateQuestions(\n    '.possq',\n    6,\n    '#next3',\n    '#unlock3',\n    4\n  );\n\n\n  \/* UNSCRAMBLE *\/\n\n  let scrambleDone=0;\n\n\n  function normalize(text){\n\n    return text\n      .trim()\n      .toLowerCase()\n      .replace(\/[.!?]+$\/,'')\n      .replace(\/\\s+\/g,' ');\n\n  }\n\n\n  root.querySelectorAll('.scramble')\n  .forEach(card=>{\n\n    const answer=card.dataset.answer;\n\n    const input=card.querySelector('input');\n\n    const check=\n      card.querySelector('.check-scramble');\n\n    const hear=\n      card.querySelector('.hear-scramble');\n\n    const feedback=\n      card.querySelector('.feedback');\n\n\n    check.addEventListener('click',()=>{\n\n      if(card.dataset.done==='1') return;\n\n      if(\n        normalize(input.value)===\n        normalize(answer)\n      ){\n\n        card.dataset.done='1';\n\n        input.disabled=true;\n        check.disabled=true;\n\n        hear.disabled=false;\n\n        feedback.className='feedback show ok';\n        feedback.textContent='Excellent!';\n\n        scrambleDone++;\n        addPoints(3);\n\n\n        if(scrambleDone===4){\n\n          root.querySelector('#unlock4')\n            .textContent=\n            '\u2713 All four sentences are correct.';\n\n          root.querySelector('#next4')\n            .disabled=false;\n\n          unlockStep(5);\n\n        }\n\n      }else{\n\n        feedback.className='feedback show try';\n\n        feedback.textContent=\n          'Check the word order, verb and capital letter.';\n\n      }\n\n    });\n\n\n    hear.addEventListener('click',()=>{\n\n      speak(answer);\n\n    });\n\n  });\n\n\n  \/* FINAL BUILDER *\/\n\n  const person=\n    root.querySelector('#buildPerson');\n\n  const action=\n    root.querySelector('#buildAction');\n\n  const possessive=\n    root.querySelector('#buildPossessive');\n\n  const model=\n    root.querySelector('#finalModel');\n\n  const feedback=\n    root.querySelector('#builderFeedback');\n\n  const hearFinal=\n    root.querySelector('#hearFinal');\n\n  const finish=\n    root.querySelector('#finishMission');\n\n  let finalSentence='';\n\n\n  root.querySelector('#buildSentence')\n  .addEventListener('click',()=>{\n\n    if(\n      !person.value ||\n      !action.value ||\n      !possessive.value\n    ){\n\n      feedback.className='feedback show try';\n\n      feedback.textContent=\n        'Choose all three parts first.';\n\n      return;\n\n    }\n\n\n    const personData=\n      person.value.split('|');\n\n    const name=personData[0];\n    const pronoun=personData[1];\n    const correctPossessive=personData[2];\n\n    const actionData=\n      action.value.split('|');\n\n    const verb=actionData[0];\n    const object=actionData[1];\n\n    const chosenPossessive=\n      possessive.value;\n\n\n    if(\n      chosenPossessive!==\n      correctPossessive\n    ){\n\n      feedback.className='feedback show try';\n\n      feedback.textContent=\n        'Check his \/ her. Who are you talking about?';\n\n      hearFinal.disabled=true;\n      finish.disabled=true;\n\n      return;\n\n    }\n\n\n    if(verb==='reads'){\n\n      finalSentence=\n        name+' reads '+chosenPossessive+' book.';\n\n    }\n\n    else if(verb==='plays with'){\n\n      finalSentence=\n        pronoun+' plays with '+chosenPossessive+' family.';\n\n    }\n\n    else if(verb==='helps'){\n\n      finalSentence=\n        pronoun+' helps '+chosenPossessive+' mother.';\n\n    }\n\n    else if(verb==='watches TV with'){\n\n      finalSentence=\n        pronoun+' watches TV with '+chosenPossessive+' family.';\n\n    }\n\n    else if(verb==='works on'){\n\n      finalSentence=\n        pronoun+' works on '+chosenPossessive+' computer.';\n\n    }\n\n\n    model.textContent=finalSentence;\n\n    feedback.className='feedback show ok';\n\n    feedback.textContent=\n      'Great! Read the sentence aloud.';\n\n    hearFinal.disabled=false;\n    finish.disabled=false;\n\n  });\n\n\n  hearFinal.addEventListener('click',()=>{\n\n    if(finalSentence){\n      speak(finalSentence);\n    }\n\n  });\n\n\n  finish.addEventListener('click',()=>{\n\n    if(!finalSentence) return;\n\n    if(finish.dataset.done==='1') return;\n\n    finish.dataset.done='1';\n\n    finish.textContent='\u2713 I said it';\n    finish.disabled=true;\n\n    addPoints(5);\n\n    root.querySelector('#finalPoints')\n      .textContent=points;\n\n    root.querySelector('#finishBox')\n      .classList.add('show');\n\n  });\n\n})();\n<\/script>\n\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Cuentos ke Cuentan \u2661 My English Key \u00b7 Starter 1 He \/ She and His \/ Her Describe people, their actions and the things 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-1898","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/cuentoskecuentan.com\/index.php?rest_route=\/wp\/v2\/pages\/1898","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=1898"}],"version-history":[{"count":4,"href":"https:\/\/cuentoskecuentan.com\/index.php?rest_route=\/wp\/v2\/pages\/1898\/revisions"}],"predecessor-version":[{"id":1904,"href":"https:\/\/cuentoskecuentan.com\/index.php?rest_route=\/wp\/v2\/pages\/1898\/revisions\/1904"}],"wp:attachment":[{"href":"https:\/\/cuentoskecuentan.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1898"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}