{"id":1778,"date":"2026-08-31T03:59:39","date_gmt":"2026-08-31T03:59:39","guid":{"rendered":"https:\/\/cuentoskecuentan.com\/?page_id=1778"},"modified":"2026-08-31T04:16:43","modified_gmt":"2026-08-31T04:16:43","slug":"english","status":"publish","type":"page","link":"https:\/\/cuentoskecuentan.com\/?page_id=1778","title":{"rendered":"English"},"content":{"rendered":"\n<p class=\"has-larger-font-size\"><strong>Repaso Grammar<\/strong><\/p>\n\n\n\n<div id=\"mek-have-got\">\n\n<style>\n#mek-have-got{\n  --purple:#4b169b;\n  --purple-dark:#35106f;\n  --purple-light:#f6f1fc;\n  --yellow:#f7b718;\n  --gray:#555;\n  --light:#fafafa;\n\n  max-width:1000px;\n  margin:20px auto;\n  padding:28px;\n  background:#ffffff;\n  border:2px solid var(--purple);\n  border-radius:18px;\n  font-family:Arial, Helvetica, sans-serif;\n  color:#222;\n  box-sizing:border-box;\n}\n\n#mek-have-got *{\n  box-sizing:border-box;\n}\n\n.mek-top{\n  display:flex;\n  justify-content:space-between;\n  align-items:center;\n  gap:15px;\n  margin-bottom:8px;\n}\n\n.mek-book{\n  font-size:13px;\n  font-weight:700;\n  color:var(--purple);\n}\n\n.mek-title{\n  text-align:center;\n  color:var(--purple);\n  font-size:34px;\n  font-weight:900;\n  margin:8px 0 22px;\n  letter-spacing:.3px;\n}\n\n.mek-info{\n  display:grid;\n  grid-template-columns:1fr 1fr;\n  gap:16px;\n  margin-bottom:24px;\n}\n\n.mek-info-box{\n  border:2px solid var(--purple);\n  border-radius:16px;\n  padding:16px 18px;\n  display:flex;\n  align-items:center;\n  gap:14px;\n  min-height:105px;\n}\n\n.mek-icon{\n  width:58px;\n  height:58px;\n  min-width:58px;\n  border-radius:50%;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  font-size:30px;\n  font-weight:bold;\n}\n\n.mek-icon.yellow{\n  background:var(--yellow);\n  color:white;\n}\n\n.mek-icon.purple{\n  background:var(--purple);\n  color:white;\n}\n\n.mek-info-box h3{\n  color:var(--purple);\n  margin:0 0 5px;\n  font-size:20px;\n}\n\n.mek-info-box p{\n  margin:0;\n  line-height:1.4;\n  font-size:15px;\n}\n\n.mek-section{\n  border:2px solid var(--purple);\n  border-radius:16px;\n  padding:20px;\n  margin-top:18px;\n}\n\n.mek-section-title{\n  display:flex;\n  align-items:center;\n  gap:10px;\n  color:var(--purple);\n  font-size:23px;\n  font-weight:900;\n  margin-bottom:8px;\n}\n\n.mek-number{\n  width:37px;\n  height:37px;\n  border-radius:50%;\n  background:var(--purple);\n  color:white;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  font-size:21px;\n  font-weight:bold;\n}\n\n.mek-instruction{\n  margin:5px 0 18px;\n  font-size:16px;\n}\n\n.closet-grid{\n  display:grid;\n  grid-template-columns:repeat(4,1fr);\n  gap:12px;\n}\n\n.clothing-card{\n  border:2px solid #d8c8ed;\n  border-radius:14px;\n  padding:14px 8px;\n  text-align:center;\n  background:white;\n  cursor:pointer;\n  transition:.2s;\n  user-select:none;\n}\n\n.clothing-card:hover{\n  border-color:var(--purple);\n  transform:translateY(-2px);\n}\n\n.clothing-card.selected{\n  border:3px solid var(--purple);\n  background:var(--purple-light);\n}\n\n.clothing-card .item-icon{\n  font-size:45px;\n  display:block;\n  margin-bottom:8px;\n}\n\n.clothing-card .item-name{\n  font-size:16px;\n  font-weight:700;\n}\n\n.clothing-card .selection-text{\n  font-size:13px;\n  color:#777;\n  margin-top:5px;\n}\n\n.clothing-card.selected .selection-text{\n  color:var(--purple);\n  font-weight:bold;\n}\n\n.mek-button-wrap{\n  text-align:center;\n  margin-top:20px;\n}\n\n.mek-btn{\n  border:none;\n  background:var(--purple);\n  color:white;\n  font-size:16px;\n  font-weight:bold;\n  padding:12px 25px;\n  border-radius:25px;\n  cursor:pointer;\n  transition:.2s;\n}\n\n.mek-btn:hover{\n  background:var(--purple-dark);\n}\n\n.mek-model{\n  display:grid;\n  grid-template-columns:1fr 1fr;\n  gap:15px;\n  margin-top:12px;\n}\n\n.model-box{\n  background:var(--purple-light);\n  border:1.5px solid #cdb7e8;\n  border-radius:14px;\n  padding:15px;\n  text-align:center;\n}\n\n.model-label{\n  color:var(--purple);\n  font-weight:bold;\n  margin-bottom:8px;\n}\n\n.model-sentence{\n  font-size:18px;\n  font-weight:700;\n}\n\n.sentence-row{\n  padding:14px 0;\n  border-bottom:1px solid #e6e6e6;\n}\n\n.sentence-row:last-child{\n  border-bottom:none;\n}\n\n.sentence-text{\n  font-size:17px;\n  margin-bottom:9px;\n}\n\n.answer-buttons{\n  display:flex;\n  gap:8px;\n  flex-wrap:wrap;\n}\n\n.answer-btn{\n  background:white;\n  color:var(--purple);\n  border:2px solid var(--purple);\n  border-radius:20px;\n  padding:8px 15px;\n  cursor:pointer;\n  font-weight:bold;\n}\n\n.answer-btn:hover{\n  background:var(--purple-light);\n}\n\n.answer-btn.correct{\n  background:var(--purple);\n  color:white;\n}\n\n.answer-btn.wrong{\n  opacity:.45;\n}\n\n.feedback{\n  margin-top:7px;\n  min-height:20px;\n  font-weight:bold;\n  color:var(--purple);\n}\n\n.write-grid{\n  display:grid;\n  grid-template-columns:1fr;\n  gap:12px;\n}\n\n.write-row{\n  display:flex;\n  align-items:center;\n  gap:10px;\n}\n\n.write-number{\n  color:var(--purple);\n  font-weight:bold;\n  font-size:18px;\n}\n\n.write-input{\n  flex:1;\n  border:none;\n  border-bottom:2px solid #777;\n  padding:9px 5px;\n  font-size:17px;\n  outline:none;\n}\n\n.write-input:focus{\n  border-bottom-color:var(--purple);\n}\n\n.check-box{\n  background:var(--purple-light);\n  border:2px solid var(--purple);\n  border-radius:14px;\n  padding:15px 18px;\n  margin-top:18px;\n}\n\n.check-title{\n  color:var(--purple);\n  font-size:19px;\n  font-weight:900;\n  margin-bottom:10px;\n}\n\n.check-list{\n  display:grid;\n  grid-template-columns:repeat(2,1fr);\n  gap:10px 20px;\n}\n\n.check-item{\n  display:flex;\n  align-items:center;\n  gap:8px;\n}\n\n.check-item input{\n  width:19px;\n  height:19px;\n  accent-color:var(--purple);\n}\n\n.final-result{\n  display:none;\n  margin-top:18px;\n  padding:15px;\n  border-radius:14px;\n  background:var(--purple-light);\n  color:var(--purple);\n  font-size:18px;\n  font-weight:bold;\n  text-align:center;\n}\n\n.reset-btn{\n  margin-left:8px;\n  background:white;\n  color:var(--purple);\n  border:2px solid var(--purple);\n}\n\n.mek-reminder{\n  margin-top:18px;\n  border:1.5px solid var(--yellow);\n  border-radius:14px;\n  padding:13px 18px;\n  display:flex;\n  align-items:center;\n  gap:12px;\n  font-size:16px;\n}\n\n.reminder-icon{\n  width:40px;\n  height:40px;\n  min-width:40px;\n  border-radius:50%;\n  background:var(--yellow);\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  font-weight:bold;\n  color:white;\n  font-size:22px;\n}\n\n@media(max-width:750px){\n  #mek-have-got{\n    padding:15px;\n  }\n\n  .mek-title{\n    font-size:27px;\n  }\n\n  .mek-info,\n  .mek-model{\n    grid-template-columns:1fr;\n  }\n\n  .closet-grid{\n    grid-template-columns:repeat(2,1fr);\n  }\n\n  .check-list{\n    grid-template-columns:1fr;\n  }\n}\n<\/style>\n\n<div class=\"mek-top\">\n  <div><\/div>\n  <div class=\"mek-book\">MY ENGLISH KEY &#8211; 1<\/div>\n<\/div>\n\n<div class=\"mek-title\">MY DIGITAL CLOSET<\/div>\n\n<div class=\"mek-info\">\n\n  <div class=\"mek-info-box\">\n    <div class=\"mek-icon yellow\">\u2713<\/div>\n    <div>\n      <h3>My Goal<\/h3>\n      <p>I can say what I have and what I don\u2019t have.<\/p>\n    <\/div>\n  <\/div>\n\n  <div class=\"mek-info-box\">\n    <div class=\"mek-icon purple\">A<\/div>\n    <div>\n      <h3>New Key<\/h3>\n      <p>I\u2019ve got \/ I haven\u2019t got<\/p>\n    <\/div>\n  <\/div>\n\n<\/div>\n\n<div class=\"mek-section\">\n\n  <div class=\"mek-section-title\">\n    <div class=\"mek-number\">1<\/div>\n    Choose your clothes.\n  <\/div>\n\n  <div class=\"mek-instruction\">\n    Click four things you want to put in your closet.\n  <\/div>\n\n  <div class=\"closet-grid\" id=\"closetGrid\">\n\n    <div class=\"clothing-card\" data-item=\"a T-shirt\">\n      <span class=\"item-icon\">&#x1f455;<\/span>\n      <div class=\"item-name\">T-shirt<\/div>\n      <div class=\"selection-text\">Click to choose<\/div>\n    <\/div>\n\n    <div class=\"clothing-card\" data-item=\"trousers\">\n      <span class=\"item-icon\">&#x1f456;<\/span>\n      <div class=\"item-name\">Trousers<\/div>\n      <div class=\"selection-text\">Click to choose<\/div>\n    <\/div>\n\n    <div class=\"clothing-card\" data-item=\"shoes\">\n      <span class=\"item-icon\">&#x1f45f;<\/span>\n      <div class=\"item-name\">Shoes<\/div>\n      <div class=\"selection-text\">Click to choose<\/div>\n    <\/div>\n\n    <div class=\"clothing-card\" data-item=\"a hat\">\n      <span class=\"item-icon\">&#x1f9e2;<\/span>\n      <div class=\"item-name\">Hat<\/div>\n      <div class=\"selection-text\">Click to choose<\/div>\n    <\/div>\n\n    <div class=\"clothing-card\" data-item=\"a jacket\">\n      <span class=\"item-icon\">&#x1f9e5;<\/span>\n      <div class=\"item-name\">Jacket<\/div>\n      <div class=\"selection-text\">Click to choose<\/div>\n    <\/div>\n\n    <div class=\"clothing-card\" data-item=\"socks\">\n      <span class=\"item-icon\">&#x1f9e6;<\/span>\n      <div class=\"item-name\">Socks<\/div>\n      <div class=\"selection-text\">Click to choose<\/div>\n    <\/div>\n\n    <div class=\"clothing-card\" data-item=\"a dress\">\n      <span class=\"item-icon\">&#x1f457;<\/span>\n      <div class=\"item-name\">Dress<\/div>\n      <div class=\"selection-text\">Click to choose<\/div>\n    <\/div>\n\n    <div class=\"clothing-card\" data-item=\"a backpack\">\n      <span class=\"item-icon\">&#x1f392;<\/span>\n      <div class=\"item-name\">Backpack<\/div>\n      <div class=\"selection-text\">Click to choose<\/div>\n    <\/div>\n\n  <\/div>\n\n  <div class=\"mek-button-wrap\">\n    <button class=\"mek-btn\" onclick=\"preparePractice()\">Continue<\/button>\n  <\/div>\n\n<\/div>\n\n<div class=\"mek-section\">\n\n  <div class=\"mek-section-title\">\n    <div class=\"mek-number\">2<\/div>\n    Remember the structure.\n  <\/div>\n\n  <div class=\"mek-model\">\n\n    <div class=\"model-box\">\n      <div class=\"model-label\">AFFIRMATIVE<\/div>\n      <div class=\"model-sentence\">I\u2019ve got a T-shirt.<\/div>\n    <\/div>\n\n    <div class=\"model-box\">\n      <div class=\"model-label\">NEGATIVE<\/div>\n      <div class=\"model-sentence\">I haven\u2019t got a hat.<\/div>\n    <\/div>\n\n  <\/div>\n\n<\/div>\n\n<div class=\"mek-section\" id=\"practiceSection\">\n\n  <div class=\"mek-section-title\">\n    <div class=\"mek-number\">3<\/div>\n    What have you got?\n  <\/div>\n\n  <div class=\"mek-instruction\">\n    Read each word and choose the correct sentence starter.\n  <\/div>\n\n  <div id=\"questions\">\n    Choose your clothes first and press Continue.\n  <\/div>\n\n<\/div>\n\n<div class=\"mek-section\">\n\n  <div class=\"mek-section-title\">\n    <div class=\"mek-number\">4<\/div>\n    Write about your closet.\n  <\/div>\n\n  <div class=\"mek-instruction\">\n    Write four complete sentences. Use I\u2019ve got or I haven\u2019t got.\n  <\/div>\n\n  <div class=\"write-grid\">\n\n    <div class=\"write-row\">\n      <div class=\"write-number\">1.<\/div>\n      <input class=\"write-input\" type=\"text\">\n    <\/div>\n\n    <div class=\"write-row\">\n      <div class=\"write-number\">2.<\/div>\n      <input class=\"write-input\" type=\"text\">\n    <\/div>\n\n    <div class=\"write-row\">\n      <div class=\"write-number\">3.<\/div>\n      <input class=\"write-input\" type=\"text\">\n    <\/div>\n\n    <div class=\"write-row\">\n      <div class=\"write-number\">4.<\/div>\n      <input class=\"write-input\" type=\"text\">\n    <\/div>\n\n  <\/div>\n\n  <div class=\"check-box\">\n\n    <div class=\"check-title\">Before I continue<\/div>\n\n    <div class=\"check-list\">\n\n      <label class=\"check-item\">\n        <input type=\"checkbox\">\n        I used a capital letter.\n      <\/label>\n\n      <label class=\"check-item\">\n        <input type=\"checkbox\">\n        I used the correct structure.\n      <\/label>\n\n      <label class=\"check-item\">\n        <input type=\"checkbox\">\n        I checked my vocabulary.\n      <\/label>\n\n      <label class=\"check-item\">\n        <input type=\"checkbox\">\n        I used a period.\n      <\/label>\n\n    <\/div>\n\n  <\/div>\n\n  <div class=\"mek-button-wrap\">\n    <button class=\"mek-btn\" onclick=\"finishActivity()\">Check my work<\/button>\n    <button class=\"mek-btn reset-btn\" onclick=\"resetActivity()\">Start again<\/button>\n  <\/div>\n\n  <div class=\"final-result\" id=\"finalResult\"><\/div>\n\n<\/div>\n\n<div class=\"mek-reminder\">\n  <div class=\"reminder-icon\">!<\/div>\n  <div>\n    <strong>I\u2019ve got<\/strong> tells what I have.\n    <strong>I haven\u2019t got<\/strong> tells what I don\u2019t have.\n  <\/div>\n<\/div>\n\n<\/div>\n\n<script>\n(function(){\n\nconst cards = document.querySelectorAll('#mek-have-got .clothing-card');\n\ncards.forEach(card => {\n\n  card.addEventListener('click', function(){\n\n    const selected = document.querySelectorAll(\n      '#mek-have-got .clothing-card.selected'\n    );\n\n    if(!this.classList.contains('selected') && selected.length >= 4){\n      alert('Choose only four items.');\n      return;\n    }\n\n    this.classList.toggle('selected');\n\n    const text = this.querySelector('.selection-text');\n\n    if(this.classList.contains('selected')){\n      text.textContent = 'In my closet';\n    }else{\n      text.textContent = 'Click to choose';\n    }\n\n  });\n\n});\n\nwindow.preparePractice = function(){\n\n  const allCards = [...document.querySelectorAll(\n    '#mek-have-got .clothing-card'\n  )];\n\n  const selected = allCards.filter(\n    card => card.classList.contains('selected')\n  );\n\n  if(selected.length !== 4){\n    alert('Choose four items before you continue.');\n    return;\n  }\n\n  const questions = document.getElementById('questions');\n\n  questions.innerHTML = '';\n\n  allCards.forEach((card,index) => {\n\n    const item = card.dataset.item;\n    const hasItem = card.classList.contains('selected');\n\n    const row = document.createElement('div');\n    row.className = 'sentence-row';\n\n    row.innerHTML = `\n      <div class=\"sentence-text\">\n        <strong>${index + 1}. ${item}<\/strong>\n      <\/div>\n\n      <div class=\"answer-buttons\">\n        <button class=\"answer-btn\"\n          onclick=\"checkAnswer(this,true,${hasItem})\">\n          I've got\n        <\/button>\n\n        <button class=\"answer-btn\"\n          onclick=\"checkAnswer(this,false,${hasItem})\">\n          I haven't got\n        <\/button>\n      <\/div>\n\n      <div class=\"feedback\"><\/div>\n    `;\n\n    questions.appendChild(row);\n\n  });\n\n  document.getElementById('practiceSection')\n    .scrollIntoView({behavior:'smooth'});\n\n};\n\nwindow.checkAnswer = function(button,answer,correctAnswer){\n\n  const row = button.closest('.sentence-row');\n  const buttons = row.querySelectorAll('.answer-btn');\n  const feedback = row.querySelector('.feedback');\n\n  buttons.forEach(btn => {\n    btn.classList.remove('correct','wrong');\n  });\n\n  if(answer === correctAnswer){\n\n    button.classList.add('correct');\n\n    feedback.textContent = 'Correct!';\n\n  }else{\n\n    button.classList.add('wrong');\n\n    feedback.textContent = 'Try again.';\n\n  }\n\n};\n\nwindow.finishActivity = function(){\n\n  const inputs = [...document.querySelectorAll(\n    '#mek-have-got .write-input'\n  )];\n\n  const completed = inputs.filter(\n    input => input.value.trim().length > 3\n  ).length;\n\n  const checks = [...document.querySelectorAll(\n    '#mek-have-got .check-item input'\n  )];\n\n  const checked = checks.filter(c => c.checked).length;\n\n  const result = document.getElementById('finalResult');\n\n  result.style.display = 'block';\n\n  if(completed === 4 && checked === 4){\n\n    result.textContent =\n      'Great work! You wrote, checked and improved your sentences.';\n\n  }else if(completed < 4){\n\n    result.textContent =\n      'Write all four sentences before you finish.';\n\n  }else{\n\n    result.textContent =\n      'Your sentences are ready. Now check your work carefully.';\n\n  }\n\n};\n\nwindow.resetActivity = function(){\n\n  document.querySelectorAll('#mek-have-got .clothing-card')\n    .forEach(card => {\n\n      card.classList.remove('selected');\n\n      card.querySelector('.selection-text')\n        .textContent = 'Click to choose';\n\n    });\n\n  document.querySelectorAll('#mek-have-got .write-input')\n    .forEach(input => input.value = '');\n\n  document.querySelectorAll('#mek-have-got input[type=\"checkbox\"]')\n    .forEach(input => input.checked = false);\n\n  document.getElementById('questions').innerHTML =\n    'Choose your clothes first and press Continue.';\n\n  document.getElementById('finalResult').style.display = 'none';\n\n};\n\n})();\n<\/script>\n\n\n","protected":false},"excerpt":{"rendered":"<p>Repaso Grammar MY ENGLISH KEY &#8211; 1 MY DIGITAL CLOSET \u2713 My Goal I can say what I have and what I don\u2019t have. A [&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-1778","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/cuentoskecuentan.com\/index.php?rest_route=\/wp\/v2\/pages\/1778","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=1778"}],"version-history":[{"count":7,"href":"https:\/\/cuentoskecuentan.com\/index.php?rest_route=\/wp\/v2\/pages\/1778\/revisions"}],"predecessor-version":[{"id":1796,"href":"https:\/\/cuentoskecuentan.com\/index.php?rest_route=\/wp\/v2\/pages\/1778\/revisions\/1796"}],"wp:attachment":[{"href":"https:\/\/cuentoskecuentan.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1778"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}