{"id":1907,"date":"2026-09-16T05:02:11","date_gmt":"2026-09-16T05:02:11","guid":{"rendered":"https:\/\/cuentoskecuentan.com\/?page_id=1907"},"modified":"2026-09-16T05:12:04","modified_gmt":"2026-09-16T05:12:04","slug":"singular-and-plural","status":"publish","type":"page","link":"https:\/\/cuentoskecuentan.com\/?page_id=1907","title":{"rendered":"Singular and plural"},"content":{"rendered":"\n<!--\nMY ENGLISH KEY \u00b7 SINGULAR AND PLURAL\nCuentos ke Cuentan \u00b7 KEY by Mara Nieto\n-->\n\n<div id=\"mek-sp-clear\">\n\n<style>\n#mek-sp-clear{\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\n  max-width:1050px;\n  margin:24px auto;\n  font-family:Lato,Arial,sans-serif;\n  color:var(--ink);\n  line-height:1.45;\n}\n\n#mek-sp-clear *{box-sizing:border-box}\n\n#mek-sp-clear button{\n  font:inherit;\n}\n\n#mek-sp-clear .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-sp-clear .top{\n  padding:28px;\n  border-bottom:5px solid var(--yellow);\n  background:\n    radial-gradient(circle at 92% 20%,rgba(246,199,68,.23) 0 60px,transparent 61px),\n    linear-gradient(135deg,#fff,#fbf6fc);\n}\n\n#mek-sp-clear .brandrow{\n  display:flex;\n  justify-content:space-between;\n  gap:12px;\n  flex-wrap:wrap;\n}\n\n#mek-sp-clear .ckc,\n#mek-sp-clear .keybrand{\n  color:var(--purple);\n  font-weight:900;\n}\n\n#mek-sp-clear .ke{\n  display:inline-block;\n  background:var(--yellow);\n  padding:2px 6px;\n  border-radius:8px;\n}\n\n#mek-sp-clear h2{\n  margin:14px 0 5px;\n  color:var(--purple);\n  font-size:clamp(36px,5vw,54px);\n}\n\n#mek-sp-clear .subtitle{\n  margin:0;\n  color:var(--gray);\n  font-size:18px;\n}\n\n#mek-sp-clear .note{\n  display:inline-block;\n  margin-top:13px;\n  padding:8px 14px;\n  border-radius:999px;\n  background:var(--yellow-soft);\n  color:var(--purple-dark);\n  font-weight:900;\n}\n\n\/* PATH *\/\n\n#mek-sp-clear .path{\n  display:grid;\n  grid-template-columns:repeat(5,1fr);\n  gap:7px;\n  padding:18px;\n  background:var(--lilac);\n  min-width:650px;\n}\n\n#mek-sp-clear .pathwrap{\n  overflow-x:auto;\n}\n\n#mek-sp-clear .step{\n  text-align:center;\n}\n\n#mek-sp-clear .dot{\n  width:44px;\n  height:44px;\n  margin:auto;\n  display:grid;\n  place-items:center;\n  border:3px solid var(--purple-mid);\n  border-radius:50%;\n  background:#fff;\n  color:var(--purple);\n  font-weight:900;\n}\n\n#mek-sp-clear .step.active .dot,\n#mek-sp-clear .step.done .dot{\n  background:var(--purple);\n  color:#fff;\n}\n\n#mek-sp-clear .step.done .dot{\n  font-size:0;\n}\n\n#mek-sp-clear .step.done .dot:after{\n  content:\"\u2713\";\n  font-size:20px;\n}\n\n#mek-sp-clear .step.locked{\n  opacity:.42;\n}\n\n#mek-sp-clear .step small{\n  color:var(--purple-dark);\n  font-weight:900;\n}\n\n\/* STATUS *\/\n\n#mek-sp-clear .status{\n  display:flex;\n  justify-content:flex-end;\n  flex-wrap:wrap;\n  gap:9px;\n  padding:12px 20px;\n}\n\n#mek-sp-clear .pill{\n  padding:7px 13px;\n  border-radius:999px;\n  background:var(--purple);\n  color:#fff;\n  font-weight:900;\n}\n\n#mek-sp-clear .pill.yellow{\n  background:var(--yellow);\n  color:var(--purple-dark);\n}\n\n\/* CONTENT *\/\n\n#mek-sp-clear .content{\n  padding:25px;\n}\n\n#mek-sp-clear .screen{\n  display:none;\n}\n\n#mek-sp-clear .screen.active{\n  display:block;\n}\n\n#mek-sp-clear .guide{\n  display:grid;\n  grid-template-columns:82px 1fr;\n  gap:15px;\n  align-items:center;\n  margin-bottom:18px;\n}\n\n#mek-sp-clear .avatar{\n  width:75px;\n  height:75px;\n  border:4px solid var(--yellow);\n  border-radius:50%;\n  display:grid;\n  place-items:center;\n  background:var(--yellow-soft);\n  font-size:40px;\n}\n\n#mek-sp-clear .avatar.purple{\n  border-color:var(--purple);\n  background:var(--lilac);\n}\n\n#mek-sp-clear .speech{\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-sp-clear .card{\n  margin:15px 0;\n  padding:20px;\n  border:2px solid #E5D8E7;\n  border-radius:22px;\n  background:#fff;\n}\n\n#mek-sp-clear .card.lilac{\n  background:var(--lilac);\n}\n\n#mek-sp-clear .card.yellow{\n  background:var(--yellow-soft);\n}\n\n#mek-sp-clear .card h3{\n  margin-top:0;\n  color:var(--purple);\n  font-size:26px;\n}\n\n#mek-sp-clear .muted{\n  color:var(--gray);\n}\n\n\/* GRID *\/\n\n#mek-sp-clear .grid{\n  display:grid;\n  grid-template-columns:repeat(2,minmax(0,1fr));\n  gap:12px;\n}\n\n#mek-sp-clear .question{\n  padding:16px;\n  border:2px solid #E5D8E7;\n  border-radius:18px;\n  background:#fff;\n}\n\n#mek-sp-clear .visual{\n  font-size:40px;\n  margin-bottom:8px;\n}\n\n#mek-sp-clear .questionTitle{\n  margin-bottom:10px;\n  color:var(--purple-dark);\n  font-weight:900;\n}\n\n\/* CHOICES *\/\n\n#mek-sp-clear .choices{\n  display:grid;\n  gap:7px;\n}\n\n#mek-sp-clear .choice{\n  border:2px solid var(--purple-mid);\n  border-radius:13px;\n  padding:9px 11px;\n  background:#fff;\n  color:var(--purple-dark);\n  font-weight:900;\n  cursor:pointer;\n  text-align:left;\n}\n\n#mek-sp-clear .choice.correct{\n  border-color:var(--green);\n  background:var(--green-soft);\n}\n\n#mek-sp-clear .choice.wrong{\n  border-color:var(--red);\n  background:var(--red-soft);\n}\n\n\/* BUTTONS *\/\n\n#mek-sp-clear .actions{\n  display:flex;\n  gap:8px;\n  flex-wrap:wrap;\n  margin-top:13px;\n}\n\n#mek-sp-clear .btn{\n  border:0;\n  border-radius:13px;\n  padding:10px 14px;\n  font-weight:900;\n  cursor:pointer;\n}\n\n#mek-sp-clear .primary{\n  background:var(--purple);\n  color:#fff;\n}\n\n#mek-sp-clear .listen{\n  background:var(--yellow);\n  color:var(--purple-dark);\n}\n\n#mek-sp-clear .soft{\n  background:var(--lilac-2);\n  color:var(--purple-dark);\n}\n\n#mek-sp-clear .btn:disabled{\n  opacity:.4;\n  cursor:not-allowed;\n}\n\n\/* BUILDER *\/\n\n#mek-sp-clear .task{\n  margin:12px 0;\n  padding:16px;\n  border:2px solid #E5D8E7;\n  border-radius:18px;\n  background:#fff;\n}\n\n#mek-sp-clear .instruction{\n  margin-bottom:4px;\n  color:var(--gray);\n  font-size:13px;\n  font-weight:900;\n  text-transform:uppercase;\n}\n\n#mek-sp-clear .prompt{\n  color:var(--purple-dark);\n  font-size:20px;\n  font-weight:900;\n}\n\n#mek-sp-clear .wordrow{\n  display:flex;\n  gap:8px;\n  flex-wrap:wrap;\n  margin-top:13px;\n}\n\n#mek-sp-clear .word{\n  padding:8px 12px;\n  border:2px solid var(--purple-mid);\n  border-radius:12px;\n  background:#fff;\n  color:var(--purple-dark);\n  font-weight:900;\n  cursor:pointer;\n}\n\n#mek-sp-clear .word.selected{\n  background:var(--purple);\n  color:#fff;\n}\n\n#mek-sp-clear .sentenceBox{\n  min-height:52px;\n  margin-top:12px;\n  padding:12px;\n  border:2px dashed var(--purple-mid);\n  border-radius:13px;\n  background:var(--lilac);\n  color:var(--purple-dark);\n  font-size:19px;\n  font-weight:900;\n}\n\n#mek-sp-clear .feedback{\n  display:none;\n  margin-top:10px;\n  padding:11px 13px;\n  border-radius:13px;\n  font-weight:900;\n}\n\n#mek-sp-clear .feedback.show{\n  display:block;\n}\n\n#mek-sp-clear .feedback.ok{\n  background:var(--green-soft);\n  color:#2E6C4E;\n}\n\n#mek-sp-clear .feedback.try{\n  background:var(--yellow-soft);\n  color:#74590E;\n}\n\n#mek-sp-clear .unlock{\n  margin-top:14px;\n  padding:12px;\n  border-radius:13px;\n  background:var(--lilac);\n  color:var(--purple-dark);\n  font-weight:900;\n}\n\n\/* LISTENING *\/\n\n#mek-sp-clear .listenCard{\n  text-align:center;\n  padding:20px;\n  border:2px solid #E5D8E7;\n  border-radius:20px;\n  background:#fff;\n}\n\n#mek-sp-clear .listenCard .speaker{\n  font-size:45px;\n}\n\n\/* FINAL *\/\n\n#mek-sp-clear .challenge{\n  padding:22px;\n  border:2px solid var(--yellow);\n  border-radius:21px;\n  background:var(--yellow-soft);\n  text-align:center;\n}\n\n#mek-sp-clear .challengeVisual{\n  font-size:53px;\n}\n\n#mek-sp-clear .frame{\n  display:inline-block;\n  margin:10px 0;\n  padding:8px 14px;\n  background:#fff;\n  border:2px solid var(--purple-mid);\n  border-radius:12px;\n  color:var(--purple-dark);\n  font-weight:900;\n}\n\n#mek-sp-clear .finish{\n  display:none;\n  margin-top:20px;\n  padding:22px;\n  text-align:center;\n  background:var(--yellow-soft);\n  border:2px solid var(--yellow);\n  border-radius:20px;\n}\n\n#mek-sp-clear .finish.show{\n  display:block;\n}\n\n#mek-sp-clear .footer{\n  padding:16px;\n  background:var(--purple);\n  color:#fff;\n  text-align:center;\n  font-weight:900;\n}\n\n#mek-sp-clear .footer span{\n  color:var(--yellow);\n}\n\n@media(max-width:760px){\n\n  #mek-sp-clear .grid{\n    grid-template-columns:1fr;\n  }\n\n  #mek-sp-clear .guide{\n    grid-template-columns:65px 1fr;\n  }\n\n  #mek-sp-clear .avatar{\n    width:60px;\n    height:60px;\n    font-size:32px;\n  }\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\">\nCuentos <span class=\"ke\">ke<\/span> Cuentan \u2661\n<\/div>\n\n<div class=\"keybrand\">\nMy English <b>Key<\/b> \u00b7 Starter 1\n<\/div>\n\n<\/div>\n\n<h2>Singular and Plural<\/h2>\n\n<p class=\"subtitle\">\nLook, think, listen and speak.\n<\/p>\n\n<div class=\"note\">\n&#x1f511; This is \u00b7 These are \u00b7 one \u00b7 two \u00b7 three \u00b7 four \u00b7 five\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>Choose<\/small>\n<\/div>\n\n<div class=\"step locked\" data-step=\"2\">\n<div class=\"dot\">2<\/div>\n<small>Transform<\/small>\n<\/div>\n\n<div class=\"step locked\" data-step=\"3\">\n<div class=\"dot\">3<\/div>\n<small>Detective<\/small>\n<\/div>\n\n<div class=\"step locked\" data-step=\"4\">\n<div class=\"dot\">4<\/div>\n<small>Listen<\/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=\"clearPoints\">0<\/span> points\n<\/div>\n\n<div class=\"pill\">\n&#x1f511; Step <span id=\"clearLevel\">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>\nLook at the whole sentence. More than one part may change.\n<\/div>\n\n<\/div>\n\n\n<div class=\"card lilac\">\n\n<h3>1. Which sentence is correct?<\/h3>\n\n<p class=\"muted\">\nChoose the only completely correct sentence.\n<\/p>\n\n\n<div class=\"grid\">\n\n\n<div class=\"question choiceQ\"\ndata-answer=\"These are three pencils.\">\n\n<div class=\"visual\">&#x270f;&#xfe0f; &#x270f;&#xfe0f; &#x270f;&#xfe0f;<\/div>\n\n<div class=\"choices\">\n\n<button class=\"choice\">\nThis is three pencils.\n<\/button>\n\n<button class=\"choice\">\nThese are three pencils.\n<\/button>\n\n<button class=\"choice\">\nThese is three pencil.\n<\/button>\n\n<\/div>\n\n<\/div>\n\n\n<div class=\"question choiceQ\"\ndata-answer=\"This is an eraser.\">\n\n<div class=\"visual\">&#x1f9fd;<\/div>\n\n<div class=\"choices\">\n\n<button class=\"choice\">\nThis is an eraser.\n<\/button>\n\n<button class=\"choice\">\nThese are an eraser.\n<\/button>\n\n<button class=\"choice\">\nThis are erasers.\n<\/button>\n\n<\/div>\n\n<\/div>\n\n\n<div class=\"question choiceQ\"\ndata-answer=\"These are four books.\">\n\n<div class=\"visual\">&#x1f4d5; &#x1f4d8; &#x1f4d7; &#x1f4d9;<\/div>\n\n<div class=\"choices\">\n\n<button class=\"choice\">\nThese are four books.\n<\/button>\n\n<button class=\"choice\">\nThis is four books.\n<\/button>\n\n<button class=\"choice\">\nThese are four book.\n<\/button>\n\n<\/div>\n\n<\/div>\n\n\n<div class=\"question choiceQ\"\ndata-answer=\"This is a notebook.\">\n\n<div class=\"visual\">&#x1f4d3;<\/div>\n\n<div class=\"choices\">\n\n<button class=\"choice\">\nThese are notebooks.\n<\/button>\n\n<button class=\"choice\">\nThis is a notebook.\n<\/button>\n\n<button class=\"choice\">\nThis are notebook.\n<\/button>\n\n<\/div>\n\n<\/div>\n\n<\/div>\n\n\n<div class=\"unlock\" id=\"unlockC1\">\n&#x1f512; Complete all 4.\n<\/div>\n\n\n<div class=\"actions\">\n\n<button class=\"btn primary next\"\nid=\"nextC1\"\ndata-next=\"2\"\ndisabled>\nTransform \u2192\n<\/button>\n\n<\/div>\n\n<\/div>\n\n<\/section>\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>\nBuild the new sentence. All the information you need is on the screen.\n<\/div>\n\n<\/div>\n\n\n<div class=\"card\">\n\n<h3>2. Transform<\/h3>\n\n<p class=\"muted\">\nTap the words in the correct order.\n<\/p>\n\n\n<div class=\"task buildTask\"\ndata-answer=\"These are red pencils.\">\n\n<div class=\"instruction\">\nChange to plural\n<\/div>\n\n<div class=\"prompt\">\nThis is a red pencil.\n<\/div>\n\n<div class=\"frame\">\nUse: MORE THAN ONE\n<\/div>\n\n<div class=\"wordrow\">\n<button class=\"word\">red<\/button>\n<button class=\"word\">are<\/button>\n<button class=\"word\">pencils<\/button>\n<button class=\"word\">These<\/button>\n<\/div>\n\n<div class=\"sentenceBox\"><\/div>\n\n<div class=\"actions\">\n\n<button class=\"btn soft clearWords\">\nClear\n<\/button>\n\n<button class=\"btn primary checkBuild\">\nCheck\n<\/button>\n\n<button class=\"btn listen hearBuild\" disabled>\n&#x1f50a; Listen\n<\/button>\n\n<\/div>\n\n<div class=\"feedback\"><\/div>\n\n<\/div>\n\n\n<div class=\"task buildTask\"\ndata-answer=\"This is a blue book.\">\n\n<div class=\"instruction\">\nChange to singular\n<\/div>\n\n<div class=\"prompt\">\nThese are blue books.\n<\/div>\n\n<div class=\"frame\">\nUse: ONE\n<\/div>\n\n<div class=\"wordrow\">\n<button class=\"word\">blue<\/button>\n<button class=\"word\">book<\/button>\n<button class=\"word\">This<\/button>\n<button class=\"word\">is<\/button>\n<button class=\"word\">a<\/button>\n<\/div>\n\n<div class=\"sentenceBox\"><\/div>\n\n<div class=\"actions\">\n\n<button class=\"btn soft clearWords\">\nClear\n<\/button>\n\n<button class=\"btn primary checkBuild\">\nCheck\n<\/button>\n\n<button class=\"btn listen hearBuild\" disabled>\n&#x1f50a; Listen\n<\/button>\n\n<\/div>\n\n<div class=\"feedback\"><\/div>\n\n<\/div>\n\n\n<div class=\"task buildTask\"\ndata-answer=\"These are three notebooks.\">\n\n<div class=\"instruction\">\nBuild the sentence\n<\/div>\n\n<div class=\"prompt\">\n3 + notebook\n<\/div>\n\n<div class=\"frame\">\nUse: THREE\n<\/div>\n\n<div class=\"wordrow\">\n<button class=\"word\">three<\/button>\n<button class=\"word\">notebooks<\/button>\n<button class=\"word\">are<\/button>\n<button class=\"word\">These<\/button>\n<\/div>\n\n<div class=\"sentenceBox\"><\/div>\n\n<div class=\"actions\">\n\n<button class=\"btn soft clearWords\">\nClear\n<\/button>\n\n<button class=\"btn primary checkBuild\">\nCheck\n<\/button>\n\n<button class=\"btn listen hearBuild\" disabled>\n&#x1f50a; Listen\n<\/button>\n\n<\/div>\n\n<div class=\"feedback\"><\/div>\n\n<\/div>\n\n\n<div class=\"unlock\" id=\"unlockC2\">\n&#x1f512; Complete all 3.\n<\/div>\n\n\n<div class=\"actions\">\n\n<button class=\"btn soft next\" data-next=\"1\">\n\u2190 Choose\n<\/button>\n\n<button class=\"btn primary next\"\nid=\"nextC2\"\ndata-next=\"3\"\ndisabled>\nDetective \u2192\n<\/button>\n\n<\/div>\n\n<\/div>\n\n<\/section>\n\n\n<!-- STEP 3 -->\n\n<section class=\"screen\" data-screen=\"3\">\n\n<div class=\"guide\">\n\n<div class=\"avatar purple\">&#x1f431;<\/div>\n\n<div class=\"speech\">\n<strong>Misu says:<\/strong>\nFind the sentence that fixes every mistake.\n<\/div>\n\n<\/div>\n\n\n<div class=\"card yellow\">\n\n<h3>3. Grammar Detective<\/h3>\n\n<p class=\"muted\">\nChoose the correct sentence.\n<\/p>\n\n\n<div class=\"grid\">\n\n\n<div class=\"question detectiveQ\"\ndata-answer=\"These are two pencils.\">\n\n<div class=\"questionTitle\">\n&#x274c; This are two pencil.\n<\/div>\n\n<div class=\"choices\">\n\n<button class=\"choice\">\nThese are two pencils.\n<\/button>\n\n<button class=\"choice\">\nThese is two pencils.\n<\/button>\n\n<button class=\"choice\">\nThis is two pencil.\n<\/button>\n\n<\/div>\n\n<\/div>\n\n\n<div class=\"question detectiveQ\"\ndata-answer=\"This is an eraser.\">\n\n<div class=\"questionTitle\">\n&#x274c; These is a erasers.\n<\/div>\n\n<div class=\"choices\">\n\n<button class=\"choice\">\nThese are eraser.\n<\/button>\n\n<button class=\"choice\">\nThis is an eraser.\n<\/button>\n\n<button class=\"choice\">\nThis are an eraser.\n<\/button>\n\n<\/div>\n\n<\/div>\n\n\n<div class=\"question detectiveQ\"\ndata-answer=\"These are four notebooks.\">\n\n<div class=\"questionTitle\">\n&#x274c; This is four notebook.\n<\/div>\n\n<div class=\"choices\">\n\n<button class=\"choice\">\nThese are four notebooks.\n<\/button>\n\n<button class=\"choice\">\nThis are four notebooks.\n<\/button>\n\n<button class=\"choice\">\nThese is four notebook.\n<\/button>\n\n<\/div>\n\n<\/div>\n\n\n<div class=\"question detectiveQ\"\ndata-answer=\"These are three markers.\">\n\n<div class=\"questionTitle\">\n&#x274c; These is three marker.\n<\/div>\n\n<div class=\"choices\">\n\n<button class=\"choice\">\nThis is three markers.\n<\/button>\n\n<button class=\"choice\">\nThese are three markers.\n<\/button>\n\n<button class=\"choice\">\nThese are three marker.\n<\/button>\n\n<\/div>\n\n<\/div>\n\n\n<\/div>\n\n\n<div class=\"unlock\" id=\"unlockC3\">\n&#x1f512; Solve all 4.\n<\/div>\n\n\n<div class=\"actions\">\n\n<button class=\"btn soft next\" data-next=\"2\">\n\u2190 Transform\n<\/button>\n\n<button class=\"btn primary next\"\nid=\"nextC3\"\ndata-next=\"4\"\ndisabled>\nListening \u2192\n<\/button>\n\n<\/div>\n\n<\/div>\n\n<\/section>\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>\nListen carefully. You do not need to write.\n<\/div>\n\n<\/div>\n\n\n<div class=\"card lilac\">\n\n<h3>4. Listen and choose<\/h3>\n\n<p class=\"muted\">\nPress &#x1f50a; Listen. Then choose the picture that matches the sentence.\n<\/p>\n\n\n<div class=\"listenCard listenQuestion\"\ndata-audio=\"These are three pencils.\"\ndata-answer=\"pencils\">\n\n<div class=\"speaker\">&#x1f50a;<\/div>\n\n<button class=\"btn listen playAudio\">\n&#x1f50a; Listen\n<\/button>\n\n<div class=\"choices\" style=\"margin-top:14px\">\n\n<button class=\"choice\" data-value=\"book\">\n&#x1f4d5; One book\n<\/button>\n\n<button class=\"choice\" data-value=\"pencils\">\n&#x270f;&#xfe0f; &#x270f;&#xfe0f; &#x270f;&#xfe0f; Three pencils\n<\/button>\n\n<button class=\"choice\" data-value=\"erasers\">\n&#x1f9fd; &#x1f9fd; Two erasers\n<\/button>\n\n<\/div>\n\n<\/div>\n\n\n<div class=\"listenCard listenQuestion\"\ndata-audio=\"This is an eraser.\"\ndata-answer=\"eraser\"\nstyle=\"margin-top:14px\">\n\n<div class=\"speaker\">&#x1f50a;<\/div>\n\n<button class=\"btn listen playAudio\">\n&#x1f50a; Listen\n<\/button>\n\n<div class=\"choices\" style=\"margin-top:14px\">\n\n<button class=\"choice\" data-value=\"rulers\">\n&#x1f4cf; &#x1f4cf; Two rulers\n<\/button>\n\n<button class=\"choice\" data-value=\"eraser\">\n&#x1f9fd; One eraser\n<\/button>\n\n<button class=\"choice\" data-value=\"books\">\n&#x1f4da; Three books\n<\/button>\n\n<\/div>\n\n<\/div>\n\n\n<div class=\"listenCard listenQuestion\"\ndata-audio=\"These are four notebooks.\"\ndata-answer=\"notebooks\"\nstyle=\"margin-top:14px\">\n\n<div class=\"speaker\">&#x1f50a;<\/div>\n\n<button class=\"btn listen playAudio\">\n&#x1f50a; Listen\n<\/button>\n\n<div class=\"choices\" style=\"margin-top:14px\">\n\n<button class=\"choice\" data-value=\"notebooks\">\n&#x1f4d3; &#x1f4d3; &#x1f4d3; &#x1f4d3; Four notebooks\n<\/button>\n\n<button class=\"choice\" data-value=\"notebook\">\n&#x1f4d3; One notebook\n<\/button>\n\n<button class=\"choice\" data-value=\"markers\">\n&#x1f58a;&#xfe0f; &#x1f58a;&#xfe0f; &#x1f58a;&#xfe0f; Three markers\n<\/button>\n\n<\/div>\n\n<\/div>\n\n\n<div class=\"unlock\" id=\"unlockC4\">\n&#x1f512; Complete all 3 listening questions.\n<\/div>\n\n\n<div class=\"actions\">\n\n<button class=\"btn soft next\" data-next=\"3\">\n\u2190 Detective\n<\/button>\n\n<button class=\"btn primary next\"\nid=\"nextC4\"\ndata-next=\"5\"\ndisabled>\nSpeaking Mission \u2192\n<\/button>\n\n<\/div>\n\n<\/div>\n\n<\/section>\n\n\n<!-- STEP 5 -->\n\n<section class=\"screen\" data-screen=\"5\">\n\n<div class=\"guide\">\n\n<div class=\"avatar\">&#x1f466;&#x1f3fb;<\/div>\n\n<div class=\"speech\">\n<strong>Leo says:<\/strong>\nLook at the exact clue. Say the complete sentence aloud. Then choose it.\n<\/div>\n\n<\/div>\n\n\n<div class=\"card\">\n\n<h3>5. Speaking Mission<\/h3>\n\n<p class=\"muted\">\nThe number and object are always shown. There are no hidden instructions.\n<\/p>\n\n\n<div class=\"challenge\">\n\n<div class=\"challengeVisual\" id=\"finalVisual\">\n&#x1f50d;\n<\/div>\n\n<h3 id=\"finalClue\">\nPress New Challenge\n<\/h3>\n\n<div class=\"frame\" id=\"finalInstruction\">\nSay one complete sentence.\n<\/div>\n\n\n<div class=\"actions\" style=\"justify-content:center\">\n\n<button class=\"btn listen\"\nid=\"listenClue\"\ndisabled>\n&#x1f50a; Listen to the clue\n<\/button>\n\n<\/div>\n\n\n<div class=\"choices\" id=\"finalChoices\"\nstyle=\"margin-top:15px\">\n<\/div>\n\n\n<div class=\"actions\" style=\"justify-content:center\">\n\n<button class=\"btn yellow\"\nid=\"newChallenge\"\nstyle=\"background:var(--yellow);color:var(--purple-dark)\">\n&#x1f3b2; New Challenge\n<\/button>\n\n<\/div>\n\n\n<div class=\"feedback\" id=\"finalFeedback\"><\/div>\n\n<\/div>\n\n\n<div class=\"unlock\" id=\"finalCount\">\nChallenges completed: 0 \/ 4\n<\/div>\n\n\n<div class=\"finish\" id=\"finishBox\">\n\n<div style=\"font-size:50px\">\n&#x1f511; &#x1f31f;\n<\/div>\n\n<h3>Excellent!<\/h3>\n\n<p>\nYou can recognize, transform, listen to and say singular and plural sentences.\n<\/p>\n\n<strong>\nTotal: <span id=\"finalPoints\">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 Listening\n<\/button>\n\n<\/div>\n\n<\/div>\n\n<\/section>\n\n\n<\/main>\n\n\n<div class=\"footer\">\nCuentos <span>ke<\/span> Cuentan \u00b7 KEY by Mara Nieto\n<\/div>\n\n<\/div>\n\n\n<script>\n(function(){\n\nconst root=document.getElementById('mek-sp-clear');\n\nif(!root || root.dataset.ready==='1') return;\n\nroot.dataset.ready='1';\n\nlet points=0;\nlet unlocked=1;\n\nconst pointsEl=root.querySelector('#clearPoints');\nconst levelEl=root.querySelector('#clearLevel');\n\n\nfunction addPoints(n){\n  points+=n;\n  pointsEl.textContent=points;\n}\n\n\nfunction speak(text){\n\n  if(!('speechSynthesis' in window)){\n    alert('Audio is not available in this browser.');\n    return;\n  }\n\n  speechSynthesis.cancel();\n\n  const u=new SpeechSynthesisUtterance(text);\n\n  u.lang='en-US';\n  u.rate=.80;\n  u.pitch=1.03;\n\n  speechSynthesis.speak(u);\n\n}\n\n\nfunction normalize(text){\n\n  return text\n    .trim()\n    .toLowerCase()\n    .replace(\/[.!?]\/g,'')\n    .replace(\/\\s+\/g,' ');\n\n}\n\n\nfunction unlockStep(n){\n\n  if(n>unlocked) unlocked=n;\n\n  root.querySelectorAll('.step')\n  .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\nfunction showScreen(n){\n\n  if(n>unlocked) return;\n\n  root.querySelectorAll('.screen')\n  .forEach(x=>x.classList.remove('active'));\n\n  root.querySelector(\n    '[data-screen=\"'+n+'\"]'\n  ).classList.add('active');\n\n  root.querySelectorAll('.step')\n  .forEach(x=>x.classList.remove('active'));\n\n  root.querySelector(\n    '.step[data-step=\"'+n+'\"]'\n  ).classList.add('active');\n\n  levelEl.textContent=n;\n\n  root.scrollIntoView({\n    behavior:'smooth',\n    block:'start'\n  });\n\n}\n\n\nroot.querySelectorAll('.next')\n.forEach(btn=>{\n\n  btn.addEventListener('click',()=>{\n\n    showScreen(\n      Number(btn.dataset.next)\n    );\n\n  });\n\n});\n\n\n\/* MULTIPLE CHOICE *\/\n\nfunction activateChoices(\n  selector,\n  total,\n  nextButton,\n  unlockBox,\n  nextStep\n){\n\n  let completed=0;\n\n  root.querySelectorAll(selector)\n  .forEach(q=>{\n\n    q.querySelectorAll('.choice')\n    .forEach(btn=>{\n\n      btn.addEventListener('click',()=>{\n\n        if(q.dataset.done==='1') return;\n\n        if(\n          btn.textContent.trim()===\n          q.dataset.answer\n        ){\n\n          q.dataset.done='1';\n\n          btn.classList.add('correct');\n\n          q.querySelectorAll('.choice')\n          .forEach(b=>b.disabled=true);\n\n          completed++;\n\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          btn.classList.add('wrong');\n\n          setTimeout(()=>{\n            btn.classList.remove('wrong');\n          },600);\n\n        }\n\n      });\n\n    });\n\n  });\n\n}\n\n\nactivateChoices(\n  '.choiceQ',\n  4,\n  '#nextC1',\n  '#unlockC1',\n  2\n);\n\n\nactivateChoices(\n  '.detectiveQ',\n  4,\n  '#nextC3',\n  '#unlockC3',\n  4\n);\n\n\n\/* STEP 2 BUILD *\/\n\nlet buildCompleted=0;\n\nroot.querySelectorAll('.buildTask')\n.forEach(task=>{\n\n  const selected=[];\n  const sentenceBox=\n    task.querySelector('.sentenceBox');\n\n  const feedback=\n    task.querySelector('.feedback');\n\n  task.querySelectorAll('.word')\n  .forEach(word=>{\n\n    word.addEventListener('click',()=>{\n\n      if(word.classList.contains('selected')){\n        return;\n      }\n\n      word.classList.add('selected');\n\n      selected.push(\n        word.textContent.trim()\n      );\n\n      sentenceBox.textContent=\n        selected.join(' ');\n\n    });\n\n  });\n\n\n  task.querySelector('.clearWords')\n  .addEventListener('click',()=>{\n\n    selected.length=0;\n\n    sentenceBox.textContent='';\n\n    task.querySelectorAll('.word')\n    .forEach(w=>\n      w.classList.remove('selected')\n    );\n\n    feedback.className='feedback';\n\n  });\n\n\n  task.querySelector('.checkBuild')\n  .addEventListener('click',()=>{\n\n    if(task.dataset.done==='1') return;\n\n    const answer=\n      task.dataset.answer;\n\n    if(\n      normalize(selected.join(' '))===\n      normalize(answer)\n    ){\n\n      task.dataset.done='1';\n\n      feedback.className='feedback show ok';\n\n      feedback.textContent=\n        'Correct! Listen and repeat.';\n\n      task.querySelector('.hearBuild')\n      .disabled=false;\n\n      task.querySelectorAll('.word')\n      .forEach(w=>w.disabled=true);\n\n      task.querySelector('.checkBuild')\n      .disabled=true;\n\n      buildCompleted++;\n\n      addPoints(3);\n\n      if(buildCompleted===3){\n\n        root.querySelector('#unlockC2')\n        .textContent='\u2713 Step complete.';\n\n        root.querySelector('#nextC2')\n        .disabled=false;\n\n        unlockStep(3);\n\n      }\n\n    }else{\n\n      feedback.className='feedback show try';\n\n      feedback.textContent=\n        'Check the order of all the words.';\n\n    }\n\n  });\n\n\n  task.querySelector('.hearBuild')\n  .addEventListener('click',()=>{\n\n    speak(task.dataset.answer);\n\n  });\n\n});\n\n\n\/* LISTENING *\/\n\nlet listeningCompleted=0;\n\nroot.querySelectorAll('.listenQuestion')\n.forEach(card=>{\n\n  card.querySelector('.playAudio')\n  .addEventListener('click',()=>{\n\n    speak(card.dataset.audio);\n\n  });\n\n\n  card.querySelectorAll('.choice')\n  .forEach(btn=>{\n\n    btn.addEventListener('click',()=>{\n\n      if(card.dataset.done==='1') return;\n\n      if(\n        btn.dataset.value===\n        card.dataset.answer\n      ){\n\n        card.dataset.done='1';\n\n        btn.classList.add('correct');\n\n        card.querySelectorAll('.choice')\n        .forEach(b=>b.disabled=true);\n\n        listeningCompleted++;\n\n        addPoints(3);\n\n        if(listeningCompleted===3){\n\n          root.querySelector('#unlockC4')\n          .textContent=\n          '\u2713 Listening complete.';\n\n          root.querySelector('#nextC4')\n          .disabled=false;\n\n          unlockStep(5);\n\n        }\n\n      }else{\n\n        btn.classList.add('wrong');\n\n        setTimeout(()=>{\n          btn.classList.remove('wrong');\n        },600);\n\n      }\n\n    });\n\n  });\n\n});\n\n\n\/* FINAL SPEAKING *\/\n\nconst challenges=[\n\n{\nvisual:'&#x270f;&#xfe0f; &#x270f;&#xfe0f;',\nclue:'2 pencils',\naudio:'Two pencils.',\nanswer:'These are two pencils.',\nwrong:[\n  'This is two pencils.',\n  'These are two pencil.'\n]\n},\n\n{\nvisual:'&#x1f4d5;',\nclue:'1 book',\naudio:'One book.',\nanswer:'This is a book.',\nwrong:[\n  'These are one book.',\n  'This are a book.'\n]\n},\n\n{\nvisual:'&#x1f4d3; &#x1f4d3; &#x1f4d3;',\nclue:'3 notebooks',\naudio:'Three notebooks.',\nanswer:'These are three notebooks.',\nwrong:[\n  'This is three notebooks.',\n  'These are three notebook.'\n]\n},\n\n{\nvisual:'&#x1f392; &#x1f392; &#x1f392; &#x1f392;',\nclue:'4 backpacks',\naudio:'Four backpacks.',\nanswer:'These are four backpacks.',\nwrong:[\n  'These is four backpacks.',\n  'This is four backpack.'\n]\n},\n\n{\nvisual:'&#x1f4cf;',\nclue:'1 ruler',\naudio:'One ruler.',\nanswer:'This is a ruler.',\nwrong:[\n  'These are a ruler.',\n  'This are one ruler.'\n]\n},\n\n{\nvisual:'&#x1f58a;&#xfe0f; &#x1f58a;&#xfe0f; &#x1f58a;&#xfe0f;',\nclue:'3 markers',\naudio:'Three markers.',\nanswer:'These are three markers.',\nwrong:[\n  'This is three markers.',\n  'These are three marker.'\n]\n}\n\n];\n\n\nlet current=null;\nlet finalDone=0;\n\nconst visual=\nroot.querySelector('#finalVisual');\n\nconst clue=\nroot.querySelector('#finalClue');\n\nconst choices=\nroot.querySelector('#finalChoices');\n\nconst feedback=\nroot.querySelector('#finalFeedback');\n\nconst listenClue=\nroot.querySelector('#listenClue');\n\n\nfunction shuffle(array){\n\n  return array.sort(\n    ()=>Math.random()-.5\n  );\n\n}\n\n\nroot.querySelector('#newChallenge')\n.addEventListener('click',()=>{\n\n  current=\n    challenges[\n      Math.floor(\n        Math.random()*challenges.length\n      )\n    ];\n\n  visual.textContent=\n    current.visual;\n\n  clue.textContent=\n    current.clue;\n\n  listenClue.disabled=false;\n\n  feedback.className='feedback';\n\n  choices.innerHTML='';\n\n  const all=\n    shuffle([\n      current.answer,\n      ...current.wrong\n    ]);\n\n\n  all.forEach(sentence=>{\n\n    const btn=\n      document.createElement('button');\n\n    btn.className='choice';\n\n    btn.textContent=sentence;\n\n    btn.addEventListener('click',()=>{\n\n      if(\n        sentence===\n        current.answer\n      ){\n\n        btn.classList.add('correct');\n\n        choices.querySelectorAll('button')\n        .forEach(b=>b.disabled=true);\n\n        feedback.className=\n          'feedback show ok';\n\n        feedback.textContent=\n          'Correct! Say it aloud again.';\n\n        speak(current.answer);\n\n        finalDone++;\n\n        addPoints(4);\n\n        root.querySelector('#finalCount')\n        .textContent=\n          'Challenges completed: '+\n          Math.min(finalDone,4)+\n          ' \/ 4';\n\n        if(finalDone>=4){\n\n          root.querySelector('#finishBox')\n          .classList.add('show');\n\n          root.querySelector('#finalPoints')\n          .textContent=points;\n\n        }\n\n      }else{\n\n        btn.classList.add('wrong');\n\n        setTimeout(()=>{\n          btn.classList.remove('wrong');\n        },600);\n\n      }\n\n    });\n\n    choices.appendChild(btn);\n\n  });\n\n});\n\n\nlistenClue.addEventListener('click',()=>{\n\n  if(current){\n    speak(current.audio);\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 Singular and Plural Look, think, listen and speak. &#x1f511; This is \u00b7 These are \u00b7 [&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-1907","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/cuentoskecuentan.com\/index.php?rest_route=\/wp\/v2\/pages\/1907","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=1907"}],"version-history":[{"count":4,"href":"https:\/\/cuentoskecuentan.com\/index.php?rest_route=\/wp\/v2\/pages\/1907\/revisions"}],"predecessor-version":[{"id":1913,"href":"https:\/\/cuentoskecuentan.com\/index.php?rest_route=\/wp\/v2\/pages\/1907\/revisions\/1913"}],"wp:attachment":[{"href":"https:\/\/cuentoskecuentan.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1907"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}