{"id":1890,"date":"2026-09-16T03:13:24","date_gmt":"2026-09-16T03:13:24","guid":{"rendered":"https:\/\/cuentoskecuentan.com\/?page_id=1890"},"modified":"2026-09-16T03:20:31","modified_gmt":"2026-09-16T03:20:31","slug":"present-tense-1","status":"publish","type":"page","link":"https:\/\/cuentoskecuentan.com\/?page_id=1890","title":{"rendered":"Present tense 1"},"content":{"rendered":"\n<!--\nMY ENGLISH KEY \u00b7 DAILY ROUTINE\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-routine-1\">\n\n<style>\n#mek-routine-1{\n  --purple:#793D7A;\n  --purple-dark:#572A59;\n  --purple-mid:#A77AAA;\n  --lilac:#F7F0F8;\n  --lilac-2:#EEE2F1;\n  --yellow:#F6C744;\n  --yellow-soft:#FFF8DA;\n  --ink:#352D36;\n  --gray:#6E6670;\n  --green:#4B936C;\n  --green-soft:#E9F6EF;\n  --red:#B75968;\n  --red-soft:#FFF0F2;\n  --blue:#4D78A5;\n  --white:#FFFFFF;\n\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-routine-1 *{box-sizing:border-box}\n\n#mek-routine-1 button,\n#mek-routine-1 input,\n#mek-routine-1 select{\n  font:inherit;\n}\n\n#mek-routine-1 button{\n  touch-action:manipulation;\n}\n\n\/* BOOK *\/\n\n#mek-routine-1 .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-routine-1 .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\n#mek-routine-1 .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-routine-1 .brandrow{\n  display:flex;\n  justify-content:space-between;\n  gap:12px;\n  align-items:center;\n  flex-wrap:wrap;\n}\n\n#mek-routine-1 .ckc{\n  font-weight:900;\n  color:var(--purple);\n  font-size:20px;\n}\n\n#mek-routine-1 .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-routine-1 .keybrand{\n  font-weight:900;\n  color:var(--purple);\n  font-size:18px;\n}\n\n#mek-routine-1 .keybrand b{\n  color:var(--yellow);\n}\n\n#mek-routine-1 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-routine-1 .subtitle{\n  margin:0;\n  color:var(--gray);\n  font-size:18px;\n  max-width:820px;\n}\n\n#mek-routine-1 .identity-note{\n  margin-top:15px;\n  display:inline-flex;\n  gap:8px;\n  align-items:center;\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-routine-1 .pathwrap{\n  padding:18px 20px;\n  background:var(--lilac);\n  border-bottom:1px solid #e7dbe9;\n  overflow-x:auto;\n}\n\n#mek-routine-1 .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-routine-1 .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-routine-1 .step{\n  position:relative;\n  z-index:1;\n  text-align:center;\n}\n\n#mek-routine-1 .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-routine-1 .step.active .dot,\n#mek-routine-1 .step.done .dot{\n  background:var(--purple);\n  color:#fff;\n  border-color:var(--purple);\n}\n\n#mek-routine-1 .step.done .dot{\n  font-size:0;\n}\n\n#mek-routine-1 .step.done .dot:after{\n  content:\"\u2713\";\n  font-size:20px;\n}\n\n#mek-routine-1 .step.locked{\n  opacity:.42;\n}\n\n#mek-routine-1 .step small{\n  font-weight:900;\n  color:var(--purple-dark);\n  font-size:12px;\n}\n\n\/* STATUS *\/\n\n#mek-routine-1 .status{\n  display:flex;\n  gap:10px;\n  justify-content:flex-end;\n  align-items:center;\n  padding:12px 22px;\n  background:#fff;\n  border-bottom:1px solid #eee4ef;\n  flex-wrap:wrap;\n}\n\n#mek-routine-1 .pill{\n  padding:7px 12px;\n  border-radius:999px;\n  background:var(--purple);\n  color:#fff;\n  font-weight:900;\n}\n\n#mek-routine-1 .pill.yellow{\n  background:var(--yellow);\n  color:var(--purple-dark);\n}\n\n\/* CONTENT *\/\n\n#mek-routine-1 .content{\n  padding:25px;\n}\n\n#mek-routine-1 .screen{\n  display:none;\n}\n\n#mek-routine-1 .screen.active{\n  display:block;\n}\n\n\/* CHARACTERS *\/\n\n#mek-routine-1 .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-routine-1 .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  box-shadow:0 6px 14px rgba(90,44,92,.10);\n}\n\n#mek-routine-1 .avatar.purple{\n  background:var(--lilac-2);\n  border-color:var(--purple);\n}\n\n#mek-routine-1 .avatar.gray{\n  background:#F0EFF1;\n  border-color:#9B929D;\n}\n\n#mek-routine-1 .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-routine-1 .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-routine-1 .card{\n  border:2px solid #E7DBE9;\n  border-radius:23px;\n  padding:20px;\n  margin:14px 0;\n  background:#fff;\n}\n\n#mek-routine-1 .card.yellow{\n  background:var(--yellow-soft);\n  border-color:#EFD873;\n}\n\n#mek-routine-1 .card.lilac{\n  background:var(--lilac);\n  border-color:#DCC9DF;\n}\n\n#mek-routine-1 .card h3{\n  margin:0 0 9px;\n  color:var(--purple);\n  font-size:26px;\n}\n\n#mek-routine-1 .muted{\n  color:var(--gray);\n  margin-top:0;\n}\n\n\/* BUTTONS *\/\n\n#mek-routine-1 .actions{\n  display:flex;\n  flex-wrap:wrap;\n  gap:8px;\n  margin-top:11px;\n}\n\n#mek-routine-1 .btn{\n  border:0;\n  border-radius:14px;\n  padding:10px 14px;\n  font-weight:900;\n  cursor:pointer;\n  transition:transform .16s ease,opacity .16s ease;\n}\n\n#mek-routine-1 .btn:hover{\n  transform:translateY(-1px);\n}\n\n#mek-routine-1 .btn:disabled{\n  opacity:.43;\n  cursor:not-allowed;\n  transform:none;\n}\n\n#mek-routine-1 .primary{\n  background:var(--purple);\n  color:#fff;\n}\n\n#mek-routine-1 .yellowbtn{\n  background:var(--yellow);\n  color:var(--purple-dark);\n}\n\n#mek-routine-1 .soft{\n  background:var(--lilac-2);\n  color:var(--purple-dark);\n}\n\n#mek-routine-1 .green{\n  background:var(--green);\n  color:#fff;\n}\n\n\/* PHRASE CARDS *\/\n\n#mek-routine-1 .phrasegrid{\n  display:grid;\n  grid-template-columns:repeat(2,minmax(0,1fr));\n  gap:12px;\n}\n\n#mek-routine-1 .phrase{\n  border:2px solid #E6D9E8;\n  border-radius:19px;\n  padding:16px;\n  background:#fff;\n}\n\n#mek-routine-1 .phrase strong{\n  display:block;\n  font-size:21px;\n  color:var(--purple-dark);\n  margin-bottom:5px;\n}\n\n#mek-routine-1 .phrase .meaning{\n  color:var(--gray);\n  font-size:14px;\n}\n\n#mek-routine-1 .phrase.done{\n  border-color:var(--green);\n  background:var(--green-soft);\n}\n\n\/* QUESTIONS *\/\n\n#mek-routine-1 .questiongrid{\n  display:grid;\n  grid-template-columns:repeat(2,minmax(0,1fr));\n  gap:12px;\n}\n\n#mek-routine-1 .question{\n  border:2px solid #E7DBE9;\n  border-radius:18px;\n  padding:15px;\n  background:#fff;\n}\n\n#mek-routine-1 .question b{\n  display:block;\n  color:var(--purple-dark);\n  font-size:18px;\n  margin-bottom:9px;\n}\n\n#mek-routine-1 .choices{\n  display:flex;\n  gap:8px;\n  flex-wrap:wrap;\n}\n\n#mek-routine-1 .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-routine-1 .choice.correct{\n  background:var(--green-soft);\n  border-color:var(--green);\n  color:#2E6C4E;\n}\n\n#mek-routine-1 .choice.wrong{\n  background:var(--red-soft);\n  border-color:var(--red);\n  color:#8B3E49;\n}\n\n\/* BUILD *\/\n\n#mek-routine-1 .buildgrid{\n  display:grid;\n  grid-template-columns:repeat(2,minmax(0,1fr));\n  gap:12px;\n}\n\n#mek-routine-1 label{\n  font-weight:900;\n  color:var(--purple-dark);\n}\n\n#mek-routine-1 select,\n#mek-routine-1 input{\n  width:100%;\n  margin-top:6px;\n  border:2px solid #D9C7DC;\n  border-radius:12px;\n  padding:11px 12px;\n  background:#fff;\n}\n\n#mek-routine-1 select:focus,\n#mek-routine-1 input:focus{\n  outline:3px solid rgba(246,199,68,.34);\n  border-color:var(--purple);\n}\n\n#mek-routine-1 .model{\n  margin-top:14px;\n  border-left:6px solid var(--yellow);\n  background:var(--lilac);\n  border-radius:12px;\n  padding:14px 16px;\n  color:var(--purple-dark);\n  font-weight:900;\n  font-size:20px;\n}\n\n\/* WRITING *\/\n\n#mek-routine-1 .writingrow{\n  display:grid;\n  grid-template-columns:48px 1fr;\n  gap:10px;\n  align-items:center;\n  margin:11px 0;\n}\n\n#mek-routine-1 .wnum{\n  width:38px;\n  height:38px;\n  border-radius:50%;\n  display:grid;\n  place-items:center;\n  background:var(--purple);\n  color:#fff;\n  font-weight:900;\n}\n\n#mek-routine-1 .feedback{\n  display:none;\n  margin-top:12px;\n  padding:12px 14px;\n  border-radius:14px;\n  font-weight:800;\n}\n\n#mek-routine-1 .feedback.show{\n  display:block;\n}\n\n#mek-routine-1 .feedback.ok{\n  background:var(--green-soft);\n  color:#2E6C4F;\n}\n\n#mek-routine-1 .feedback.try{\n  background:var(--yellow-soft);\n  color:#74590E;\n}\n\n\/* UNLOCK *\/\n\n#mek-routine-1 .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-routine-1 .missiongrid{\n  display:grid;\n  grid-template-columns:repeat(2,minmax(0,1fr));\n  gap:12px;\n}\n\n#mek-routine-1 .mission{\n  border:2px solid #E5D8E7;\n  border-radius:18px;\n  padding:15px;\n  background:#fff;\n}\n\n#mek-routine-1 .mission .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-routine-1 .mission strong{\n  color:var(--purple-dark);\n  font-size:18px;\n}\n\n#mek-routine-1 .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-routine-1 .finish.show{\n  display:block;\n}\n\n#mek-routine-1 .finish .big{\n  font-size:52px;\n}\n\n#mek-routine-1 .footerbrand{\n  text-align:center;\n  padding:16px;\n  background:var(--purple);\n  color:#fff;\n  font-weight:900;\n}\n\n#mek-routine-1 .footerbrand span{\n  color:var(--yellow);\n}\n\n@media(max-width:820px){\n\n  #mek-routine-1 .phrasegrid,\n  #mek-routine-1 .questiongrid,\n  #mek-routine-1 .buildgrid,\n  #mek-routine-1 .missiongrid{\n    grid-template-columns:1fr;\n  }\n\n  #mek-routine-1 .guide{\n    grid-template-columns:70px 1fr;\n  }\n\n  #mek-routine-1 .avatar{\n    width:66px;\n    height:66px;\n    font-size:35px;\n  }\n\n  #mek-routine-1 .content{\n    padding:16px;\n  }\n\n  #mek-routine-1 .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    <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  <\/div>\n\n  <h2>My Daily Routine<\/h2>\n\n  <p class=\"subtitle\">\n    Practise daily actions, build sentences and talk about your day.\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>Words<\/small>\n    <\/div>\n\n    <div class=\"step locked\" data-step=\"2\">\n      <div class=\"dot\">2<\/div>\n      <small>Choose<\/small>\n    <\/div>\n\n    <div class=\"step locked\" data-step=\"3\">\n      <div class=\"dot\">3<\/div>\n      <small>Build<\/small>\n    <\/div>\n\n    <div class=\"step locked\" data-step=\"4\">\n      <div class=\"dot\">4<\/div>\n      <small>Write<\/small>\n    <\/div>\n\n    <div class=\"step locked\" data-step=\"5\">\n      <div class=\"dot\">5<\/div>\n      <small>Speak!<\/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=\"routinePts\">0<\/span> points\n  <\/div>\n\n  <div class=\"pill\">\n    &#x1f511; Step <span id=\"routineLevel\">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      \u201cLet\u2019s practise the actions we use to talk about our day.\n      Press Listen and repeat the sentence.\u201d\n    <\/div>\n\n  <\/div>\n\n\n  <div class=\"card lilac\">\n\n    <h3>1. Daily routine words<\/h3>\n\n    <p class=\"muted\">\n      Listen to each sentence and say it aloud.\n    <\/p>\n\n\n    <div class=\"phrasegrid\">\n\n\n      <div class=\"phrase\" data-done=\"0\">\n        <strong>&#x1f31e; wake up<\/strong>\n\n        <div class=\"model\">\n          I wake up in the morning.\n        <\/div>\n\n        <div class=\"actions\">\n          <button class=\"btn yellowbtn listen\"\n          data-text=\"I wake up in the morning.\">\n            &#x1f50a; Listen\n          <\/button>\n\n          <button class=\"btn primary phrase-said\">\n            &#x1f3a4; I said it\n          <\/button>\n        <\/div>\n      <\/div>\n\n\n      <div class=\"phrase\" data-done=\"0\">\n        <strong>&#x1f6cf;&#xfe0f; get up<\/strong>\n\n        <div class=\"model\">\n          I get up at seven o&#8217;clock.\n        <\/div>\n\n        <div class=\"actions\">\n          <button class=\"btn yellowbtn listen\"\n          data-text=\"I get up at seven o'clock.\">\n            &#x1f50a; Listen\n          <\/button>\n\n          <button class=\"btn primary phrase-said\">\n            &#x1f3a4; I said it\n          <\/button>\n        <\/div>\n      <\/div>\n\n\n      <div class=\"phrase\" data-done=\"0\">\n        <strong>&#x1f963; eat breakfast<\/strong>\n\n        <div class=\"model\">\n          I eat breakfast in the morning.\n        <\/div>\n\n        <div class=\"actions\">\n          <button class=\"btn yellowbtn listen\"\n          data-text=\"I eat breakfast in the morning.\">\n            &#x1f50a; Listen\n          <\/button>\n\n          <button class=\"btn primary phrase-said\">\n            &#x1f3a4; I said it\n          <\/button>\n        <\/div>\n      <\/div>\n\n\n      <div class=\"phrase\" data-done=\"0\">\n        <strong>&#x1f3eb; go to school<\/strong>\n\n        <div class=\"model\">\n          I go to school in the morning.\n        <\/div>\n\n        <div class=\"actions\">\n          <button class=\"btn yellowbtn listen\"\n          data-text=\"I go to school in the morning.\">\n            &#x1f50a; Listen\n          <\/button>\n\n          <button class=\"btn primary phrase-said\">\n            &#x1f3a4; I said it\n          <\/button>\n        <\/div>\n      <\/div>\n\n\n      <div class=\"phrase\" data-done=\"0\">\n        <strong>&#x1f4da; study English<\/strong>\n\n        <div class=\"model\">\n          I study English at school.\n        <\/div>\n\n        <div class=\"actions\">\n          <button class=\"btn yellowbtn listen\"\n          data-text=\"I study English at school.\">\n            &#x1f50a; Listen\n          <\/button>\n\n          <button class=\"btn primary phrase-said\">\n            &#x1f3a4; I said it\n          <\/button>\n        <\/div>\n      <\/div>\n\n\n      <div class=\"phrase\" data-done=\"0\">\n        <strong>&#x1f4d6; read a book<\/strong>\n\n        <div class=\"model\">\n          I read a book after school.\n        <\/div>\n\n        <div class=\"actions\">\n          <button class=\"btn yellowbtn listen\"\n          data-text=\"I read a book after school.\">\n            &#x1f50a; Listen\n          <\/button>\n\n          <button class=\"btn primary phrase-said\">\n            &#x1f3a4; I said it\n          <\/button>\n        <\/div>\n      <\/div>\n\n\n      <div class=\"phrase\" data-done=\"0\">\n        <strong>&#x26bd; play<\/strong>\n\n        <div class=\"model\">\n          I play after school.\n        <\/div>\n\n        <div class=\"actions\">\n          <button class=\"btn yellowbtn listen\"\n          data-text=\"I play after school.\">\n            &#x1f50a; Listen\n          <\/button>\n\n          <button class=\"btn primary phrase-said\">\n            &#x1f3a4; I said it\n          <\/button>\n        <\/div>\n      <\/div>\n\n\n      <div class=\"phrase\" data-done=\"0\">\n        <strong>&#x1f4fa; watch TV<\/strong>\n\n        <div class=\"model\">\n          I watch TV at night.\n        <\/div>\n\n        <div class=\"actions\">\n          <button class=\"btn yellowbtn listen\"\n          data-text=\"I watch TV at night.\">\n            &#x1f50a; Listen\n          <\/button>\n\n          <button class=\"btn primary phrase-said\">\n            &#x1f3a4; I said it\n          <\/button>\n        <\/div>\n      <\/div>\n\n\n    <\/div>\n\n\n    <div class=\"unlock\" id=\"unlockWords\">\n      &#x1f512; Repeat all 8 sentences.\n    <\/div>\n\n\n    <div class=\"actions\">\n      <button\n        class=\"btn primary next\"\n        data-next=\"2\"\n        id=\"nextWords\"\n        disabled>\n        Choose \u2192\n      <\/button>\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 makes each sentence correct.\u201d\n    <\/div>\n\n  <\/div>\n\n\n  <div class=\"card\">\n\n    <h3>2. Choose the correct verb<\/h3>\n\n    <div class=\"questiongrid\">\n\n\n      <div class=\"question\" data-answer=\"wake up\" data-done=\"0\">\n\n        <b>1. I _____ in the morning.<\/b>\n\n        <div class=\"choices\">\n          <button class=\"choice\">wake up<\/button>\n          <button class=\"choice\">watch<\/button>\n          <button class=\"choice\">play<\/button>\n        <\/div>\n\n      <\/div>\n\n\n      <div class=\"question\" data-answer=\"go\" data-done=\"0\">\n\n        <b>2. I _____ to school.<\/b>\n\n        <div class=\"choices\">\n          <button class=\"choice\">read<\/button>\n          <button class=\"choice\">go<\/button>\n          <button class=\"choice\">sleep<\/button>\n        <\/div>\n\n      <\/div>\n\n\n      <div class=\"question\" data-answer=\"study\" data-done=\"0\">\n\n        <b>3. I _____ English at school.<\/b>\n\n        <div class=\"choices\">\n          <button class=\"choice\">watch<\/button>\n          <button class=\"choice\">study<\/button>\n          <button class=\"choice\">play<\/button>\n        <\/div>\n\n      <\/div>\n\n\n      <div class=\"question\" data-answer=\"play\" data-done=\"0\">\n\n        <b>4. I _____ soccer after school.<\/b>\n\n        <div class=\"choices\">\n          <button class=\"choice\">sleep<\/button>\n          <button class=\"choice\">play<\/button>\n          <button class=\"choice\">go<\/button>\n        <\/div>\n\n      <\/div>\n\n\n      <div class=\"question\" data-answer=\"watch\" data-done=\"0\">\n\n        <b>5. I _____ TV at night.<\/b>\n\n        <div class=\"choices\">\n          <button class=\"choice\">watch<\/button>\n          <button class=\"choice\">read<\/button>\n          <button class=\"choice\">study<\/button>\n        <\/div>\n\n      <\/div>\n\n\n      <div class=\"question\" data-answer=\"read\" data-done=\"0\">\n\n        <b>6. I _____ a book.<\/b>\n\n        <div class=\"choices\">\n          <button class=\"choice\">read<\/button>\n          <button class=\"choice\">go<\/button>\n          <button class=\"choice\">sleep<\/button>\n        <\/div>\n\n      <\/div>\n\n\n    <\/div>\n\n\n    <div class=\"feedback\" id=\"chooseFeedback\"><\/div>\n\n\n    <div class=\"unlock\" id=\"unlockChoose\">\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 Words\n      <\/button>\n\n      <button\n        class=\"btn primary next\"\n        data-next=\"3\"\n        id=\"nextChoose\"\n        disabled>\n        Build \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      \u201cBuild your own sentence. Then listen to it and say it!\u201d\n    <\/div>\n\n  <\/div>\n\n\n  <div class=\"card yellow\">\n\n    <h3>3. Build your sentence<\/h3>\n\n    <p class=\"muted\">\n      Choose an action and a time.\n    <\/p>\n\n\n    <div class=\"buildgrid\">\n\n\n      <label>\n        Action\n\n        <select id=\"routineAction\">\n          <option value=\"\">Choose<\/option>\n          <option value=\"wake up\">wake up<\/option>\n          <option value=\"get up\">get up<\/option>\n          <option value=\"eat breakfast\">eat breakfast<\/option>\n          <option value=\"go to school\">go to school<\/option>\n          <option value=\"study English\">study English<\/option>\n          <option value=\"read a book\">read a book<\/option>\n          <option value=\"play\">play<\/option>\n          <option value=\"watch TV\">watch TV<\/option>\n        <\/select>\n      <\/label>\n\n\n      <label>\n        When?\n\n        <select id=\"routineTime\">\n          <option value=\"\">Choose<\/option>\n          <option value=\"in the morning\">in the morning<\/option>\n          <option value=\"at school\">at school<\/option>\n          <option value=\"after school\">after school<\/option>\n          <option value=\"in the afternoon\">in the afternoon<\/option>\n          <option value=\"at night\">at night<\/option>\n        <\/select>\n      <\/label>\n\n\n    <\/div>\n\n\n    <div class=\"actions\">\n\n      <button class=\"btn yellowbtn\" id=\"buildRoutine\">\n        &#x2728; Build my sentence\n      <\/button>\n\n    <\/div>\n\n\n    <div class=\"model\" id=\"routineModel\">\n      I ______ ______.\n    <\/div>\n\n\n    <div class=\"actions\">\n\n      <button\n        class=\"btn yellowbtn\"\n        id=\"listenRoutineModel\"\n        disabled>\n        &#x1f50a; Listen\n      <\/button>\n\n      <button\n        class=\"btn primary\"\n        id=\"saidRoutineModel\"\n        disabled>\n        &#x1f3a4; I said it\n      <\/button>\n\n    <\/div>\n\n\n    <div class=\"unlock\" id=\"unlockBuild\">\n      &#x1f512; Build, listen and say your sentence.\n    <\/div>\n\n\n    <div class=\"actions\">\n\n      <button class=\"btn soft next\" data-next=\"2\">\n        \u2190 Choose\n      <\/button>\n\n      <button\n        class=\"btn primary next\"\n        data-next=\"4\"\n        id=\"nextBuild\"\n        disabled>\n        Write \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      \u201cNow make the English yours. Write three true sentences about your day.\u201d\n    <\/div>\n\n  <\/div>\n\n\n  <div class=\"card\">\n\n    <h3>4. Write about you<\/h3>\n\n    <p class=\"muted\">\n      Write three complete sentences.\n    <\/p>\n\n\n    <div class=\"writingrow\">\n\n      <div class=\"wnum\">1<\/div>\n\n      <input\n        type=\"text\"\n        id=\"routineWrite1\"\n        placeholder=\"I wake up at...\">\n\n    <\/div>\n\n\n    <div class=\"writingrow\">\n\n      <div class=\"wnum\">2<\/div>\n\n      <input\n        type=\"text\"\n        id=\"routineWrite2\"\n        placeholder=\"I ... after school.\">\n\n    <\/div>\n\n\n    <div class=\"writingrow\">\n\n      <div class=\"wnum\">3<\/div>\n\n      <input\n        type=\"text\"\n        id=\"routineWrite3\"\n        placeholder=\"I ... at night.\">\n\n    <\/div>\n\n\n    <div class=\"actions\">\n\n      <button class=\"btn yellowbtn\" id=\"checkWriting\">\n        \u2713 Check my writing\n      <\/button>\n\n    <\/div>\n\n\n    <div class=\"feedback\" id=\"writingFeedback\"><\/div>\n\n\n    <div class=\"unlock\" id=\"unlockWriting\">\n      &#x1f512; Write three sentences.\n    <\/div>\n\n\n    <div class=\"actions\">\n\n      <button class=\"btn soft next\" data-next=\"3\">\n        \u2190 Build\n      <\/button>\n\n      <button\n        class=\"btn primary next\"\n        data-next=\"5\"\n        id=\"nextWriting\"\n        disabled>\n        Speak! \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      \u201cFinal mission! Listen to the model and then tell us about YOUR day.\u201d\n    <\/div>\n\n  <\/div>\n\n\n  <div class=\"card lilac\">\n\n    <h3>5. My Daily Routine \u00b7 Speaking Mission<\/h3>\n\n    <p class=\"muted\">\n      Complete the three speaking missions.\n    <\/p>\n\n\n    <div class=\"missiongrid\">\n\n\n      <div class=\"mission\">\n\n        <div class=\"mnum\">1<\/div>\n\n        <strong>Morning<\/strong>\n\n        <p>\n          Say two things you do in the morning.\n        <\/p>\n\n        <div class=\"actions\">\n\n          <button\n            class=\"btn yellowbtn listen\"\n            data-text=\"In the morning, I wake up and I eat breakfast.\">\n            &#x1f50a; Listen to a model\n          <\/button>\n\n          <button\n            class=\"btn primary final-said\">\n            &#x1f3a4; I said it\n          <\/button>\n\n        <\/div>\n\n      <\/div>\n\n\n      <div class=\"mission\">\n\n        <div class=\"mnum\">2<\/div>\n\n        <strong>After school<\/strong>\n\n        <p>\n          Say one thing you do after school.\n        <\/p>\n\n        <div class=\"actions\">\n\n          <button\n            class=\"btn yellowbtn listen\"\n            data-text=\"After school, I play soccer.\">\n            &#x1f50a; Listen to a model\n          <\/button>\n\n          <button\n            class=\"btn primary final-said\">\n            &#x1f3a4; I said it\n          <\/button>\n\n        <\/div>\n\n      <\/div>\n\n\n      <div class=\"mission\">\n\n        <div class=\"mnum\">3<\/div>\n\n        <strong>At night<\/strong>\n\n        <p>\n          Say one thing you do at night.\n        <\/p>\n\n        <div class=\"actions\">\n\n          <button\n            class=\"btn yellowbtn listen\"\n            data-text=\"At night, I read a book.\">\n            &#x1f50a; Listen to a model\n          <\/button>\n\n          <button\n            class=\"btn primary final-said\">\n            &#x1f3a4; I said it\n          <\/button>\n\n        <\/div>\n\n      <\/div>\n\n\n      <div class=\"mission\">\n\n        <div class=\"mnum\">\u2605<\/div>\n\n        <strong>My whole day<\/strong>\n\n        <p>\n          Say three sentences about your routine.\n        <\/p>\n\n        <div class=\"actions\">\n\n          <button\n            class=\"btn yellowbtn listen\"\n            data-text=\"I wake up in the morning. I go to school. I read a book at night.\">\n            &#x1f50a; Listen to a model\n          <\/button>\n\n        <\/div>\n\n      <\/div>\n\n\n    <\/div>\n\n\n    <div class=\"unlock\" id=\"unlockFinal\">\n      &#x1f512; Complete the 3 speaking missions.\n    <\/div>\n\n\n    <div class=\"finish\" id=\"routineFinish\">\n\n      <div class=\"big\">\n        &#x1f511;&#x1f31f;\n      <\/div>\n\n      <h3>\n        You found your English Key!\n      <\/h3>\n\n      <p>\n        You practised, listened, wrote and spoke about your daily routine.\n      <\/p>\n\n      <strong>\n        Total: <span id=\"routineFinalPts\">0<\/span> points\n      <\/strong>\n\n    <\/div>\n\n\n    <div class=\"actions\">\n\n      <button class=\"btn soft next\" data-next=\"4\">\n        \u2190 Write\n      <\/button>\n\n    <\/div>\n\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\n<\/div>\n\n\n<script>\n(function(){\n\n  const root=document.getElementById('mek-routine-1');\n\n  if(!root || root.dataset.ready===\"1\") return;\n\n  root.dataset.ready=\"1\";\n\n\n  \/* ----------------------------\n     BASIC STATE\n  ---------------------------- *\/\n\n  let points=0;\n  let unlocked=1;\n\n  const pointsEl=root.querySelector('#routinePts');\n  const levelEl=root.querySelector('#routineLevel');\n\n\n  function addPoints(n){\n\n    points+=n;\n\n    pointsEl.textContent=points;\n\n  }\n\n\n  \/* ----------------------------\n     AUDIO\n  ---------------------------- *\/\n\n  function speak(text){\n\n    if(!('speechSynthesis' in window)){\n\n      alert('Audio pronunciation is not available in this browser.');\n\n      return;\n\n    }\n\n    window.speechSynthesis.cancel();\n\n    const utterance=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\n  root.querySelectorAll('.listen').forEach(button=>{\n\n    button.addEventListener('click',()=>{\n\n      speak(button.dataset.text);\n\n    });\n\n  });\n\n\n  \/* ----------------------------\n     NAVIGATION\n  ---------------------------- *\/\n\n  function unlockStep(number){\n\n    if(number>unlocked){\n      unlocked=number;\n    }\n\n    root.querySelectorAll('.step').forEach(step=>{\n\n      const stepNumber=Number(step.dataset.step);\n\n      step.classList.toggle(\n        'locked',\n        stepNumber>unlocked\n      );\n\n      if(stepNumber<unlocked){\n        step.classList.add('done');\n      }\n\n    });\n\n  }\n\n\n  function showScreen(number){\n\n    if(number>unlocked) return;\n\n    root.querySelectorAll('.screen').forEach(screen=>{\n      screen.classList.remove('active');\n    });\n\n    const target=root.querySelector(\n      '[data-screen=\"'+number+'\"]'\n    );\n\n    if(target){\n      target.classList.add('active');\n    }\n\n    root.querySelectorAll('.step').forEach(step=>{\n      step.classList.remove('active');\n    });\n\n    const activeStep=root.querySelector(\n      '.step[data-step=\"'+number+'\"]'\n    );\n\n    if(activeStep){\n      activeStep.classList.add('active');\n    }\n\n    levelEl.textContent=number;\n\n    root.scrollIntoView({\n      behavior:'smooth',\n      block:'start'\n    });\n\n  }\n\n\n  root.querySelectorAll('.next').forEach(button=>{\n\n    button.addEventListener('click',()=>{\n\n      showScreen(\n        Number(button.dataset.next)\n      );\n\n    });\n\n  });\n\n\n  \/* ----------------------------\n     STEP 1\n  ---------------------------- *\/\n\n  let repeated=0;\n\n  root.querySelectorAll('.phrase-said').forEach(button=>{\n\n    button.addEventListener('click',()=>{\n\n      const phrase=button.closest('.phrase');\n\n      if(phrase.dataset.done===\"1\") return;\n\n      phrase.dataset.done=\"1\";\n      phrase.classList.add('done');\n\n      button.textContent=\"\u2713 Done\";\n      button.disabled=true;\n\n      repeated++;\n      addPoints(1);\n\n      if(repeated===8){\n\n        root.querySelector('#unlockWords').textContent=\n          '\u2713 Great! You repeated all 8 sentences.';\n\n        root.querySelector('#nextWords').disabled=false;\n\n        unlockStep(2);\n\n      }\n\n    });\n\n  });\n\n\n  \/* ----------------------------\n     STEP 2\n  ---------------------------- *\/\n\n  let chooseDone=0;\n\n  root.querySelectorAll('.question').forEach(question=>{\n\n    question.querySelectorAll('.choice').forEach(button=>{\n\n      button.addEventListener('click',()=>{\n\n        if(question.dataset.done===\"1\") return;\n\n        const answer=question.dataset.answer;\n        const selected=button.textContent.trim();\n\n        if(selected===answer){\n\n          button.classList.add('correct');\n\n          question.dataset.done=\"1\";\n\n          chooseDone++;\n\n          addPoints(2);\n\n          question.querySelectorAll('.choice').forEach(b=>{\n            b.disabled=true;\n          });\n\n        }else{\n\n          button.classList.add('wrong');\n\n          setTimeout(()=>{\n            button.classList.remove('wrong');\n          },700);\n\n        }\n\n\n        if(chooseDone===6){\n\n          const feedback=root.querySelector('#chooseFeedback');\n\n          feedback.className='feedback show ok';\n\n          feedback.textContent=\n            'Excellent! You completed all the sentences.';\n\n          root.querySelector('#unlockChoose').textContent=\n            '\u2713 Step complete.';\n\n          root.querySelector('#nextChoose').disabled=false;\n\n          unlockStep(3);\n\n        }\n\n      });\n\n    });\n\n  });\n\n\n  \/* ----------------------------\n     STEP 3\n  ---------------------------- *\/\n\n  const actionSelect=root.querySelector('#routineAction');\n  const timeSelect=root.querySelector('#routineTime');\n  const model=root.querySelector('#routineModel');\n  const listenModel=root.querySelector('#listenRoutineModel');\n  const saidModel=root.querySelector('#saidRoutineModel');\n\n  let builtSentence='';\n\n\n  root.querySelector('#buildRoutine')\n  .addEventListener('click',()=>{\n\n    const action=actionSelect.value;\n    const time=timeSelect.value;\n\n    if(!action || !time){\n\n      model.textContent=\n        'Choose an action and a time first.';\n\n      return;\n\n    }\n\n    builtSentence='I '+action+' '+time+'.';\n\n    model.textContent=builtSentence;\n\n    listenModel.disabled=false;\n    saidModel.disabled=false;\n\n  });\n\n\n  listenModel.addEventListener('click',()=>{\n\n    if(builtSentence){\n      speak(builtSentence);\n    }\n\n  });\n\n\n  saidModel.addEventListener('click',()=>{\n\n    if(!builtSentence) return;\n\n    if(saidModel.dataset.done===\"1\") return;\n\n    saidModel.dataset.done=\"1\";\n\n    saidModel.textContent='\u2713 I said it';\n\n    saidModel.disabled=true;\n\n    addPoints(3);\n\n    root.querySelector('#unlockBuild').textContent=\n      '\u2713 Great! You built and said your sentence.';\n\n    root.querySelector('#nextBuild').disabled=false;\n\n    unlockStep(4);\n\n  });\n\n\n  \/* ----------------------------\n     STEP 4\n  ---------------------------- *\/\n\n  const writingInputs=[\n    root.querySelector('#routineWrite1'),\n    root.querySelector('#routineWrite2'),\n    root.querySelector('#routineWrite3')\n  ];\n\n\n  root.querySelector('#checkWriting')\n  .addEventListener('click',()=>{\n\n    const feedback=root.querySelector('#writingFeedback');\n\n    const values=writingInputs.map(\n      input=>input.value.trim()\n    );\n\n    if(values.some(value=>value.length<4)){\n\n      feedback.className='feedback show try';\n\n      feedback.textContent=\n        'Write three complete sentences first.';\n\n      return;\n\n    }\n\n\n    const allStartWithI=values.every(value=>\n      \/^I\\s+\/i.test(value)\n    );\n\n\n    if(!allStartWithI){\n\n      feedback.className='feedback show try';\n\n      feedback.textContent=\n        'Check your sentences. Start each sentence with \u201cI\u201d.';\n\n      return;\n\n    }\n\n\n    feedback.className='feedback show ok';\n\n    feedback.textContent=\n      'Great writing! Now read your three sentences aloud.';\n\n    root.querySelector('#unlockWriting').textContent=\n      '\u2713 Writing complete.';\n\n    root.querySelector('#nextWriting').disabled=false;\n\n    addPoints(4);\n\n    unlockStep(5);\n\n  });\n\n\n  \/* ----------------------------\n     STEP 5\n  ---------------------------- *\/\n\n  let finalMissions=0;\n\n  root.querySelectorAll('.final-said')\n  .forEach(button=>{\n\n    button.addEventListener('click',()=>{\n\n      if(button.dataset.done===\"1\") return;\n\n      button.dataset.done=\"1\";\n\n      button.textContent='\u2713 I said it';\n\n      button.disabled=true;\n\n      finalMissions++;\n\n      addPoints(3);\n\n\n      if(finalMissions===3){\n\n        root.querySelector('#unlockFinal').textContent=\n          '\u2713 Speaking mission complete!';\n\n        root.querySelector('#routineFinalPts').textContent=\n          points;\n\n        root.querySelector('#routineFinish')\n          .classList.add('show');\n\n      }\n\n    });\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 My Daily Routine Practise daily actions, build sentences and talk about your day. &#x1f511; Small [&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-1890","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/cuentoskecuentan.com\/index.php?rest_route=\/wp\/v2\/pages\/1890","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=1890"}],"version-history":[{"count":3,"href":"https:\/\/cuentoskecuentan.com\/index.php?rest_route=\/wp\/v2\/pages\/1890\/revisions"}],"predecessor-version":[{"id":1895,"href":"https:\/\/cuentoskecuentan.com\/index.php?rest_route=\/wp\/v2\/pages\/1890\/revisions\/1895"}],"wp:attachment":[{"href":"https:\/\/cuentoskecuentan.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1890"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}