{"id":1865,"date":"2026-09-02T19:20:10","date_gmt":"2026-09-02T19:20:10","guid":{"rendered":"https:\/\/cuentoskecuentan.com\/?page_id=1865"},"modified":"2026-09-02T19:27:08","modified_gmt":"2026-09-02T19:27:08","slug":"1050-2","status":"publish","type":"page","link":"https:\/\/cuentoskecuentan.com\/?page_id=1865","title":{"rendered":"1050"},"content":{"rendered":"\n<div id=\"wb1050-app\">\n\n<style>\n#wb1050-app{\n  --purple:#54208f;\n  --purple-dark:#3f176f;\n  --purple-light:#f5f0fa;\n  --yellow:#f2c94c;\n  --text:#29252e;\n  --muted:#746d7c;\n  --border:#dfd5ea;\n  --ok:#eaf7ed;\n  --ok-text:#23733b;\n  --bad:#fff0f0;\n  --bad-text:#a83232;\n\n  font-family: Arial, Helvetica, sans-serif;\n  color:var(--text);\n  max-width:1100px;\n  margin:0 auto;\n  padding:26px 18px 50px;\n  box-sizing:border-box;\n  background:#fff;\n}\n\n#wb1050-app *{\n  box-sizing:border-box;\n}\n\n#wb1050-app .wb-top{\n  text-align:center;\n  padding:18px 10px 28px;\n}\n\n#wb1050-app .wb-title{\n  margin:0;\n  color:var(--purple);\n  font-size:clamp(32px,5vw,52px);\n  font-weight:800;\n  letter-spacing:-1px;\n}\n\n#wb1050-app .wb-subtitle{\n  margin:8px auto 0;\n  color:var(--muted);\n  font-size:17px;\n  line-height:1.5;\n  max-width:700px;\n}\n\n#wb1050-app .wb-section{\n  margin-top:32px;\n}\n\n#wb1050-app .wb-section-head{\n  display:flex;\n  align-items:center;\n  gap:12px;\n  margin-bottom:16px;\n}\n\n#wb1050-app .wb-number{\n  width:38px;\n  height:38px;\n  min-width:38px;\n  border-radius:50%;\n  background:var(--purple);\n  color:#fff;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  font-size:19px;\n  font-weight:700;\n}\n\n#wb1050-app .wb-section-title{\n  margin:0;\n  color:var(--purple-dark);\n  font-size:25px;\n}\n\n#wb1050-app .wb-instruction{\n  color:var(--muted);\n  font-size:15px;\n  margin:3px 0 0;\n}\n\n#wb1050-app .wb-tabs{\n  display:flex;\n  flex-wrap:wrap;\n  gap:9px;\n  margin-bottom:18px;\n}\n\n#wb1050-app .wb-tab{\n  border:2px solid var(--purple);\n  color:var(--purple);\n  background:#fff;\n  border-radius:999px;\n  padding:9px 18px;\n  font-size:15px;\n  font-weight:700;\n  cursor:pointer;\n}\n\n#wb1050-app .wb-tab.active{\n  background:var(--purple);\n  color:#fff;\n}\n\n#wb1050-app .wb-word-grid{\n  display:grid;\n  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));\n  gap:13px;\n}\n\n#wb1050-app .wb-word-card{\n  border:2px solid var(--border);\n  border-radius:16px;\n  padding:16px;\n  background:#fff;\n  min-height:142px;\n  display:flex;\n  flex-direction:column;\n  justify-content:space-between;\n  transition:.2s ease;\n}\n\n#wb1050-app .wb-word-card:hover{\n  border-color:var(--purple);\n  transform:translateY(-2px);\n}\n\n#wb1050-app .wb-word{\n  font-size:23px;\n  font-weight:800;\n  color:var(--purple-dark);\n  margin-bottom:12px;\n}\n\n#wb1050-app .wb-card-buttons{\n  display:flex;\n  gap:7px;\n  flex-wrap:wrap;\n}\n\n#wb1050-app button{\n  font-family:inherit;\n}\n\n#wb1050-app .wb-small-btn{\n  border:none;\n  border-radius:10px;\n  padding:8px 10px;\n  font-size:14px;\n  font-weight:700;\n  cursor:pointer;\n}\n\n#wb1050-app .wb-hear{\n  background:var(--purple);\n  color:#fff;\n}\n\n#wb1050-app .wb-meaning-btn{\n  background:var(--purple-light);\n  color:var(--purple);\n}\n\n#wb1050-app .wb-meaning{\n  display:none;\n  margin-top:11px;\n  padding-top:10px;\n  border-top:1px solid var(--border);\n  color:#4a4450;\n  font-size:15px;\n  line-height:1.35;\n}\n\n#wb1050-app .wb-practice-box{\n  border:2px solid var(--border);\n  border-radius:20px;\n  padding:22px;\n  background:#fff;\n}\n\n#wb1050-app .wb-progress-row{\n  display:flex;\n  align-items:center;\n  justify-content:space-between;\n  gap:15px;\n  flex-wrap:wrap;\n  margin-bottom:18px;\n}\n\n#wb1050-app .wb-progress{\n  color:var(--muted);\n  font-weight:700;\n}\n\n#wb1050-app .wb-score{\n  color:var(--purple);\n  font-weight:800;\n}\n\n#wb1050-app .wb-question{\n  text-align:center;\n  font-size:23px;\n  line-height:1.4;\n  font-weight:700;\n  margin:22px auto;\n  max-width:730px;\n}\n\n#wb1050-app .wb-big-word{\n  color:var(--purple);\n  font-size:32px;\n  display:block;\n  margin-top:7px;\n}\n\n#wb1050-app .wb-options{\n  display:grid;\n  grid-template-columns:repeat(2,minmax(0,1fr));\n  gap:11px;\n  max-width:760px;\n  margin:0 auto;\n}\n\n#wb1050-app .wb-option{\n  border:2px solid var(--border);\n  border-radius:13px;\n  background:#fff;\n  color:var(--text);\n  padding:14px 12px;\n  font-size:17px;\n  font-weight:700;\n  cursor:pointer;\n  min-height:57px;\n  transition:.15s;\n}\n\n#wb1050-app .wb-option:hover{\n  border-color:var(--purple);\n  background:var(--purple-light);\n}\n\n#wb1050-app .wb-option.correct{\n  background:var(--ok);\n  border-color:#6db57d;\n  color:var(--ok-text);\n}\n\n#wb1050-app .wb-option.wrong{\n  background:var(--bad);\n  border-color:#dd8e8e;\n  color:var(--bad-text);\n}\n\n#wb1050-app .wb-feedback{\n  min-height:30px;\n  text-align:center;\n  font-weight:700;\n  margin-top:17px;\n  font-size:16px;\n}\n\n#wb1050-app .wb-action-row{\n  display:flex;\n  justify-content:center;\n  gap:10px;\n  flex-wrap:wrap;\n  margin-top:18px;\n}\n\n#wb1050-app .wb-main-btn{\n  border:none;\n  background:var(--purple);\n  color:#fff;\n  border-radius:12px;\n  padding:12px 20px;\n  font-size:16px;\n  font-weight:700;\n  cursor:pointer;\n}\n\n#wb1050-app .wb-main-btn:hover{\n  background:var(--purple-dark);\n}\n\n#wb1050-app .wb-secondary-btn{\n  border:2px solid var(--purple);\n  background:#fff;\n  color:var(--purple);\n  border-radius:12px;\n  padding:10px 18px;\n  font-size:16px;\n  font-weight:700;\n  cursor:pointer;\n}\n\n#wb1050-app .wb-listen-big{\n  width:90px;\n  height:90px;\n  border-radius:50%;\n  border:none;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  margin:18px auto;\n  background:var(--purple);\n  color:#fff;\n  font-size:34px;\n  cursor:pointer;\n  box-shadow:0 7px 18px rgba(84,32,143,.18);\n}\n\n#wb1050-app .wb-listen-big:hover{\n  transform:scale(1.04);\n}\n\n#wb1050-app .wb-write-wrap{\n  max-width:570px;\n  margin:0 auto;\n}\n\n#wb1050-app .wb-input{\n  display:block;\n  width:100%;\n  border:2px solid var(--border);\n  border-radius:13px;\n  padding:14px 15px;\n  font-size:19px;\n  text-align:center;\n  outline:none;\n}\n\n#wb1050-app .wb-input:focus{\n  border-color:var(--purple);\n}\n\n#wb1050-app .wb-round-complete{\n  text-align:center;\n  padding:25px 10px;\n}\n\n#wb1050-app .wb-round-complete h3{\n  color:var(--purple);\n  font-size:28px;\n  margin:0 0 10px;\n}\n\n#wb1050-app .wb-round-complete p{\n  font-size:18px;\n  color:var(--muted);\n}\n\n#wb1050-app .wb-note{\n  background:var(--purple-light);\n  border-radius:15px;\n  padding:14px 18px;\n  color:#50445d;\n  line-height:1.5;\n  margin-top:16px;\n  font-size:14px;\n}\n\n@media(max-width:650px){\n\n  #wb1050-app .wb-options{\n    grid-template-columns:1fr;\n  }\n\n  #wb1050-app .wb-practice-box{\n    padding:17px 13px;\n  }\n\n  #wb1050-app .wb-question{\n    font-size:20px;\n  }\n\n  #wb1050-app .wb-big-word{\n    font-size:28px;\n  }\n\n}\n<\/style>\n\n\n<div class=\"wb-top\">\n\n  <h1 class=\"wb-title\">\n    Wordbuilding 1050\n  <\/h1>\n\n  <p class=\"wb-subtitle\">\n    Listen, learn, and practice your spelling words.\n  <\/p>\n\n<\/div>\n\n\n<!-- ==========================================\n     SECTION 1\n     EXPLORE\n========================================== -->\n\n<section class=\"wb-section\">\n\n  <div class=\"wb-section-head\">\n\n    <div class=\"wb-number\">\n      1\n    <\/div>\n\n    <div>\n\n      <h2 class=\"wb-section-title\">\n        Explore the words\n      <\/h2>\n\n      <p class=\"wb-instruction\">\n        Select a word to hear it and discover its meaning.\n      <\/p>\n\n    <\/div>\n\n  <\/div>\n\n\n  <div class=\"wb-tabs\">\n\n    <button\n      class=\"wb-tab active\"\n      data-group=\"all\">\n      All words\n    <\/button>\n\n    <button\n      class=\"wb-tab\"\n      data-group=\"set1\">\n      Set 1\n    <\/button>\n\n    <button\n      class=\"wb-tab\"\n      data-group=\"set2\">\n      Set 2\n    <\/button>\n\n    <button\n      class=\"wb-tab\"\n      data-group=\"set3\">\n      Set 3\n    <\/button>\n\n  <\/div>\n\n\n  <div\n    id=\"wb-word-grid\"\n    class=\"wb-word-grid\">\n  <\/div>\n\n<\/section>\n\n\n\n<!-- ==========================================\n     SECTION 2\n========================================== -->\n\n<section class=\"wb-section\">\n\n  <div class=\"wb-section-head\">\n\n    <div class=\"wb-number\">\n      2\n    <\/div>\n\n    <div>\n\n      <h2 class=\"wb-section-title\">\n        English to Spanish\n      <\/h2>\n\n      <p class=\"wb-instruction\">\n        Choose the correct meaning.\n      <\/p>\n\n    <\/div>\n\n  <\/div>\n\n  <div\n    class=\"wb-practice-box\"\n    id=\"ex1\">\n  <\/div>\n\n<\/section>\n\n\n\n<!-- ==========================================\n     SECTION 3\n========================================== -->\n\n<section class=\"wb-section\">\n\n  <div class=\"wb-section-head\">\n\n    <div class=\"wb-number\">\n      3\n    <\/div>\n\n    <div>\n\n      <h2 class=\"wb-section-title\">\n        Spanish to English\n      <\/h2>\n\n      <p class=\"wb-instruction\">\n        Choose the correct English word.\n      <\/p>\n\n    <\/div>\n\n  <\/div>\n\n  <div\n    class=\"wb-practice-box\"\n    id=\"ex2\">\n  <\/div>\n\n<\/section>\n\n\n\n<!-- ==========================================\n     SECTION 4\n========================================== -->\n\n<section class=\"wb-section\">\n\n  <div class=\"wb-section-head\">\n\n    <div class=\"wb-number\">\n      4\n    <\/div>\n\n    <div>\n\n      <h2 class=\"wb-section-title\">\n        Listen and choose\n      <\/h2>\n\n      <p class=\"wb-instruction\">\n        Listen carefully. Which word did you hear?\n      <\/p>\n\n    <\/div>\n\n  <\/div>\n\n  <div\n    class=\"wb-practice-box\"\n    id=\"ex3\">\n  <\/div>\n\n<\/section>\n\n\n\n<!-- ==========================================\n     SECTION 5\n========================================== -->\n\n<section class=\"wb-section\">\n\n  <div class=\"wb-section-head\">\n\n    <div class=\"wb-number\">\n      5\n    <\/div>\n\n    <div>\n\n      <h2 class=\"wb-section-title\">\n        Listen and write\n      <\/h2>\n\n      <p class=\"wb-instruction\">\n        Listen to the word and type it correctly.\n      <\/p>\n\n    <\/div>\n\n  <\/div>\n\n  <div\n    class=\"wb-practice-box\"\n    id=\"ex4\">\n  <\/div>\n\n<\/section>\n\n\n\n<div class=\"wb-note\">\n\n  Each practice round uses 20 random words from the complete vocabulary list.\n  Select <strong>Practice again<\/strong> to generate a new round.\n\n<\/div>\n\n\n\n<script>\n(function(){\n\n\/* ==========================================\n   VOCABULARY\n========================================== *\/\n\nconst words = [\n\n\/* SET 1 *\/\n\n{\n  word:\"float\",\n  meaning:\"flotar\",\n  set:\"set1\"\n},\n\n{\n  word:\"grove\",\n  meaning:\"arboleda\",\n  set:\"set1\"\n},\n\n{\n  word:\"buy\",\n  meaning:\"comprar\",\n  set:\"set1\"\n},\n\n{\n  word:\"blind\",\n  meaning:\"ciego \/ sin poder ver\",\n  set:\"set1\"\n},\n\n{\n  word:\"glide\",\n  meaning:\"deslizarse suavemente\",\n  set:\"set1\"\n},\n\n{\n  word:\"cry\",\n  meaning:\"llorar\",\n  set:\"set1\"\n},\n\n{\n  word:\"flow\",\n  meaning:\"fluir\",\n  set:\"set1\"\n},\n\n{\n  word:\"hoe\",\n  meaning:\"azada \/ cavar con azada\",\n  set:\"set1\"\n},\n\n{\n  word:\"die\",\n  meaning:\"morir\",\n  set:\"set1\"\n},\n\n{\n  word:\"four\",\n  meaning:\"cuatro\",\n  set:\"set1\"\n},\n\n{\n  word:\"slow\",\n  meaning:\"lento\",\n  set:\"set1\"\n},\n\n{\n  word:\"bite\",\n  meaning:\"morder \/ mordida\",\n  set:\"set1\"\n},\n\n{\n  word:\"globe\",\n  meaning:\"globo terr\u00e1queo\",\n  set:\"set1\"\n},\n\n{\n  word:\"load\",\n  meaning:\"carga \/ cargar\",\n  set:\"set1\"\n},\n\n\n\/* SET 2 *\/\n\n{\n  word:\"drove\",\n  meaning:\"condujo \/ manej\u00f3\",\n  set:\"set2\"\n},\n\n{\n  word:\"broke\",\n  meaning:\"rompi\u00f3 \/ roto\",\n  set:\"set2\"\n},\n\n{\n  word:\"soul\",\n  meaning:\"alma\",\n  set:\"set2\"\n},\n\n{\n  word:\"glow\",\n  meaning:\"brillar \/ resplandor\",\n  set:\"set2\"\n},\n\n{\n  word:\"dough\",\n  meaning:\"masa\",\n  set:\"set2\"\n},\n\n{\n  word:\"slope\",\n  meaning:\"pendiente \/ inclinaci\u00f3n\",\n  set:\"set2\"\n},\n\n{\n  word:\"court\",\n  meaning:\"corte \/ tribunal \/ cancha\",\n  set:\"set2\"\n},\n\n{\n  word:\"bow\",\n  meaning:\"arco\",\n  set:\"set2\"\n},\n\n{\n  word:\"smoke\",\n  meaning:\"humo\",\n  set:\"set2\"\n},\n\n{\n  word:\"mind\",\n  meaning:\"mente\",\n  set:\"set2\"\n},\n\n{\n  word:\"sight\",\n  meaning:\"vista \/ visi\u00f3n\",\n  set:\"set2\"\n},\n\n{\n  word:\"tried\",\n  meaning:\"intent\u00f3 \/ probado\",\n  set:\"set2\"\n},\n\n{\n  word:\"stripe\",\n  meaning:\"raya \/ franja\",\n  set:\"set2\"\n},\n\n{\n  word:\"sneeze\",\n  meaning:\"estornudar\",\n  set:\"set2\"\n},\n\n{\n  word:\"least\",\n  meaning:\"menos \/ el menor\",\n  set:\"set2\"\n},\n\n{\n  word:\"Greek\",\n  meaning:\"griego\",\n  set:\"set2\"\n},\n\n{\n  word:\"slave\",\n  meaning:\"esclavo\",\n  set:\"set2\"\n},\n\n{\n  word:\"sleep\",\n  meaning:\"dormir \/ sue\u00f1o\",\n  set:\"set2\"\n},\n\n\n\/* SET 3 *\/\n\n{\n  word:\"Calvary\",\n  meaning:\"Calvario\",\n  set:\"set3\"\n},\n\n{\n  word:\"ministry\",\n  meaning:\"ministerio\",\n  set:\"set3\"\n},\n\n{\n  word:\"music\",\n  meaning:\"m\u00fasica\",\n  set:\"set3\"\n},\n\n{\n  word:\"huge\",\n  meaning:\"enorme\",\n  set:\"set3\"\n},\n\n{\n  word:\"liberty\",\n  meaning:\"libertad\",\n  set:\"set3\"\n},\n\n{\n  word:\"lovely\",\n  meaning:\"encantador \/ bonito\",\n  set:\"set3\"\n},\n\n{\n  word:\"celery\",\n  meaning:\"apio\",\n  set:\"set3\"\n},\n\n{\n  word:\"commune\",\n  meaning:\"comuna \/ convivir estrechamente\",\n  set:\"set3\"\n},\n\n{\n  word:\"empty\",\n  meaning:\"vac\u00edo\",\n  set:\"set3\"\n},\n\n{\n  word:\"victory\",\n  meaning:\"victoria\",\n  set:\"set3\"\n},\n\n{\n  word:\"menu\",\n  meaning:\"men\u00fa\",\n  set:\"set3\"\n},\n\n{\n  word:\"beautiful\",\n  meaning:\"hermoso \/ bello\",\n  set:\"set3\"\n},\n\n{\n  word:\"universe\",\n  meaning:\"universo\",\n  set:\"set3\"\n},\n\n{\n  word:\"pottery\",\n  meaning:\"cer\u00e1mica\",\n  set:\"set3\"\n},\n\n{\n  word:\"unusual\",\n  meaning:\"inusual \/ poco com\u00fan\",\n  set:\"set3\"\n},\n\n{\n  word:\"usually\",\n  meaning:\"usualmente \/ normalmente\",\n  set:\"set3\"\n},\n\n{\n  word:\"January\",\n  meaning:\"enero\",\n  set:\"set3\"\n},\n\n{\n  word:\"February\",\n  meaning:\"febrero\",\n  set:\"set3\"\n}\n\n];\n\n\n\n\/* ==========================================\n   PRONUNCIATION\n========================================== *\/\n\nfunction speakWord(text){\n\n  if(!(\"speechSynthesis\" in window)){\n\n    alert(\n      \"Audio is not available in this browser.\"\n    );\n\n    return;\n\n  }\n\n  window.speechSynthesis.cancel();\n\n  const utterance =\n    new SpeechSynthesisUtterance(text);\n\n  utterance.lang =\n    \"en-US\";\n\n  utterance.rate =\n    0.78;\n\n  utterance.pitch =\n    1;\n\n  utterance.volume =\n    1;\n\n\n  const voices =\n    window.speechSynthesis.getVoices();\n\n\n  const englishVoice =\n\n    voices.find(\n      voice =>\n      voice.lang === \"en-US\"\n    )\n\n    ||\n\n    voices.find(\n      voice =>\n      voice.lang &&\n      voice.lang.startsWith(\"en\")\n    );\n\n\n  if(englishVoice){\n\n    utterance.voice =\n      englishVoice;\n\n  }\n\n\n  window.speechSynthesis.speak(\n    utterance\n  );\n\n}\n\n\n\n\/* ==========================================\n   UTILITIES\n========================================== *\/\n\nfunction shuffle(array){\n\n  const copy =\n    [...array];\n\n\n  for(\n    let i = copy.length - 1;\n    i > 0;\n    i--\n  ){\n\n    const j =\n      Math.floor(\n        Math.random() * (i + 1)\n      );\n\n    [\n      copy[i],\n      copy[j]\n    ] = [\n      copy[j],\n      copy[i]\n    ];\n\n  }\n\n  return copy;\n\n}\n\n\nfunction getRandomItems(\n  array,\n  count\n){\n\n  return shuffle(array)\n    .slice(\n      0,\n      Math.min(\n        count,\n        array.length\n      )\n    );\n\n}\n\n\nfunction escapeHTML(str){\n\n  return String(str)\n\n    .replace(\n      \/&\/g,\n      \"&amp;\"\n    )\n\n    .replace(\n      \/<\/g,\n      \"&lt;\"\n    )\n\n    .replace(\n      \/>\/g,\n      \"&gt;\"\n    )\n\n    .replace(\n      \/\"\/g,\n      \"&quot;\"\n    );\n\n}\n\n\n\n\/* ==========================================\n   WORD CARDS\n========================================== *\/\n\nconst grid =\n  document.getElementById(\n    \"wb-word-grid\"\n  );\n\n\nfunction renderCards(group){\n\n  const filtered =\n\n    group === \"all\"\n\n    ? words\n\n    : words.filter(\n        item =>\n        item.set === group\n      );\n\n\n  grid.innerHTML =\n    \"\";\n\n\n  filtered.forEach(\n    (item,index)=>{\n\n\n      const card =\n        document.createElement(\n          \"div\"\n        );\n\n\n      card.className =\n        \"wb-word-card\";\n\n\n      const meaningId =\n\n        \"meaning-\" +\n\n        group +\n\n        \"-\" +\n\n        index +\n\n        \"-\" +\n\n        Math.random()\n        .toString(36)\n        .slice(2);\n\n\n      card.innerHTML = `\n\n        <div>\n\n          <div class=\"wb-word\">\n\n            ${escapeHTML(item.word)}\n\n          <\/div>\n\n\n          <div class=\"wb-card-buttons\">\n\n\n            <button\n              type=\"button\"\n              class=\"wb-small-btn wb-hear\">\n\n              &#x1f50a; Hear\n\n            <\/button>\n\n\n            <button\n              type=\"button\"\n              class=\"wb-small-btn wb-meaning-btn\">\n\n              Meaning\n\n            <\/button>\n\n\n          <\/div>\n\n\n          <div\n            class=\"wb-meaning\"\n            id=\"${meaningId}\">\n\n            ${escapeHTML(item.meaning)}\n\n          <\/div>\n\n        <\/div>\n\n      `;\n\n\n      card\n        .querySelector(\n          \".wb-hear\"\n        )\n        .addEventListener(\n          \"click\",\n          ()=>{\n\n            speakWord(\n              item.word\n            );\n\n          }\n        );\n\n\n      card\n        .querySelector(\n          \".wb-meaning-btn\"\n        )\n        .addEventListener(\n          \"click\",\n          function(){\n\n\n            const meaning =\n              document.getElementById(\n                meaningId\n              );\n\n\n            const visible =\n\n              meaning.style.display\n              ===\n              \"block\";\n\n\n            meaning.style.display =\n\n              visible\n              ?\n              \"none\"\n              :\n              \"block\";\n\n\n            this.textContent =\n\n              visible\n              ?\n              \"Meaning\"\n              :\n              \"Hide meaning\";\n\n          }\n        );\n\n\n      grid.appendChild(\n        card\n      );\n\n    }\n  );\n\n}\n\n\nrenderCards(\n  \"all\"\n);\n\n\n\ndocument\n  .querySelectorAll(\n    \"#wb1050-app .wb-tab\"\n  )\n  .forEach(\n    button =>{\n\n\n      button.addEventListener(\n        \"click\",\n        function(){\n\n\n          document\n            .querySelectorAll(\n              \"#wb1050-app .wb-tab\"\n            )\n            .forEach(\n              item =>\n              item.classList.remove(\n                \"active\"\n              )\n            );\n\n\n          this.classList.add(\n            \"active\"\n          );\n\n\n          renderCards(\n            this.dataset.group\n          );\n\n        }\n      );\n\n    }\n  );\n\n\n\n\/* ==========================================\n   MULTIPLE CHOICE ACTIVITIES\n========================================== *\/\n\nfunction createChoiceRound(\n  config\n){\n\n  const container =\n    document.getElementById(\n      config.container\n    );\n\n\n  \/*\n    20 QUESTIONS PER ROUND\n  *\/\n\n  const ROUND_SIZE =\n    20;\n\n\n  let round =\n    [];\n\n  let current =\n    0;\n\n  let score =\n    0;\n\n  let answered =\n    false;\n\n\n\n  function start(){\n\n    round =\n      getRandomItems(\n        words,\n        ROUND_SIZE\n      );\n\n\n    current =\n      0;\n\n    score =\n      0;\n\n\n    showQuestion();\n\n  }\n\n\n\n  function showQuestion(){\n\n    answered =\n      false;\n\n\n    if(\n      current >= round.length\n    ){\n\n      finish();\n\n      return;\n\n    }\n\n\n    const item =\n      round[current];\n\n\n    const distractors =\n\n      getRandomItems(\n\n        words.filter(\n          other =>\n          other.word !== item.word\n        ),\n\n        3\n\n      );\n\n\n    const optionItems =\n\n      shuffle(\n        [\n          item,\n          ...distractors\n        ]\n      );\n\n\n    container.innerHTML = `\n\n\n      <div class=\"wb-progress-row\">\n\n\n        <div class=\"wb-progress\">\n\n          Question\n          ${current + 1}\n          of\n          ${round.length}\n\n        <\/div>\n\n\n        <div class=\"wb-score\">\n\n          Score:\n          ${score}\n\n        <\/div>\n\n\n      <\/div>\n\n\n      ${\n        config.beforeQuestion\n        ?\n        config.beforeQuestion(\n          item\n        )\n        :\n        \"\"\n      }\n\n\n      <div class=\"wb-question\">\n\n        ${config.question(item)}\n\n      <\/div>\n\n\n      <div class=\"wb-options\">\n\n\n        ${\n\n          optionItems\n            .map(\n              (option,index)=>`\n\n                <button\n                  type=\"button\"\n                  class=\"wb-option\"\n                  data-index=\"${index}\">\n\n                  ${escapeHTML(\n                    config.option(\n                      option\n                    )\n                  )}\n\n                <\/button>\n\n              `\n            )\n            .join(\"\")\n\n        }\n\n\n      <\/div>\n\n\n      <div class=\"wb-feedback\">\n      <\/div>\n\n\n      <div class=\"wb-action-row\">\n\n\n        <button\n          type=\"button\"\n          class=\"wb-main-btn wb-next\"\n          style=\"display:none;\">\n\n          Next\n\n        <\/button>\n\n\n      <\/div>\n\n    `;\n\n\n\n    if(\n      config.autoSpeak\n    ){\n\n      setTimeout(\n        ()=>{\n\n          speakWord(\n            item.word\n          );\n\n        },\n        300\n      );\n\n    }\n\n\n\n    const optionButtons =\n\n      container\n        .querySelectorAll(\n          \".wb-option\"\n        );\n\n\n    const feedback =\n\n      container\n        .querySelector(\n          \".wb-feedback\"\n        );\n\n\n    const next =\n\n      container\n        .querySelector(\n          \".wb-next\"\n        );\n\n\n\n    optionButtons.forEach(\n      (button,index)=>{\n\n\n        button.addEventListener(\n          \"click\",\n          ()=>{\n\n\n            if(\n              answered\n            ){\n\n              return;\n\n            }\n\n\n            answered =\n              true;\n\n\n            const selected =\n              optionItems[index];\n\n\n            optionButtons\n              .forEach(\n                option =>{\n\n                  option.disabled =\n                    true;\n\n                }\n              );\n\n\n\n            if(\n              selected.word\n              ===\n              item.word\n            ){\n\n\n              button\n                .classList\n                .add(\n                  \"correct\"\n                );\n\n\n              feedback.textContent =\n                \"\u2713 Correct!\";\n\n\n              feedback.style.color =\n                \"var(--ok-text)\";\n\n\n              score++;\n\n\n            }else{\n\n\n              button\n                .classList\n                .add(\n                  \"wrong\"\n                );\n\n\n              const correctIndex =\n\n                optionItems\n                  .findIndex(\n                    option =>\n                    option.word\n                    ===\n                    item.word\n                  );\n\n\n              optionButtons[\n                correctIndex\n              ]\n                .classList\n                .add(\n                  \"correct\"\n                );\n\n\n              feedback.innerHTML =\n\n                `The correct answer is\n                <strong>\n                ${\n                  escapeHTML(\n                    config.option(\n                      item\n                    )\n                  )\n                }\n                <\/strong>.`;\n\n\n              feedback.style.color =\n                \"var(--bad-text)\";\n\n            }\n\n\n            next.style.display =\n              \"inline-block\";\n\n          }\n        );\n\n      }\n    );\n\n\n\n    next.addEventListener(\n      \"click\",\n      ()=>{\n\n        current++;\n\n        showQuestion();\n\n      }\n    );\n\n\n\n    if(\n      config.listenButton\n    ){\n\n      const listen =\n\n        container\n          .querySelector(\n            \".wb-listen-big\"\n          );\n\n\n      if(\n        listen\n      ){\n\n        listen.addEventListener(\n          \"click\",\n          ()=>{\n\n            speakWord(\n              item.word\n            );\n\n          }\n        );\n\n      }\n\n    }\n\n  }\n\n\n\n  function finish(){\n\n    container.innerHTML = `\n\n\n      <div class=\"wb-round-complete\">\n\n\n        <h3>\n          Round complete!\n        <\/h3>\n\n\n        <p>\n\n          You got\n\n          <strong>\n            ${score}\n          <\/strong>\n\n          out of\n\n          <strong>\n            ${round.length}\n          <\/strong>\n\n          correct.\n\n        <\/p>\n\n\n        <button\n          type=\"button\"\n          class=\"wb-main-btn wb-restart\">\n\n          Practice again\n\n        <\/button>\n\n\n      <\/div>\n\n    `;\n\n\n    container\n      .querySelector(\n        \".wb-restart\"\n      )\n      .addEventListener(\n        \"click\",\n        start\n      );\n\n  }\n\n\n  start();\n\n}\n\n\n\n\/* ==========================================\n   ACTIVITY 1\n   ENGLISH TO SPANISH\n========================================== *\/\n\ncreateChoiceRound({\n\n  container:\n    \"ex1\",\n\n  question:\n    item => `\n\n      What does\n\n      <span class=\"wb-big-word\">\n\n        ${escapeHTML(\n          item.word\n        )}\n\n      <\/span>\n\n      mean?\n\n    `,\n\n  option:\n    item =>\n    item.meaning\n\n});\n\n\n\n\/* ==========================================\n   ACTIVITY 2\n   SPANISH TO ENGLISH\n========================================== *\/\n\ncreateChoiceRound({\n\n  container:\n    \"ex2\",\n\n  question:\n    item => `\n\n      Which English word means\n\n      <span class=\"wb-big-word\">\n\n        ${escapeHTML(\n          item.meaning\n        )}\n\n      <\/span>\n\n      ?\n\n    `,\n\n  option:\n    item =>\n    item.word\n\n});\n\n\n\n\/* ==========================================\n   ACTIVITY 3\n   LISTEN AND CHOOSE\n========================================== *\/\n\ncreateChoiceRound({\n\n  container:\n    \"ex3\",\n\n\n  beforeQuestion:\n    item => `\n\n      <button\n        type=\"button\"\n        class=\"wb-listen-big\"\n        aria-label=\"Listen to the word\">\n\n        &#x1f50a;\n\n      <\/button>\n\n    `,\n\n\n  question:\n    item => `\n\n      Which word did you hear?\n\n    `,\n\n\n  option:\n    item =>\n    item.word,\n\n\n  listenButton:\n    true,\n\n\n  autoSpeak:\n    false\n\n});\n\n\n\n\/* ==========================================\n   ACTIVITY 4\n   LISTEN AND WRITE\n========================================== *\/\n\nfunction createWritingRound(){\n\n  const container =\n    document.getElementById(\n      \"ex4\"\n    );\n\n\n  \/*\n    20 QUESTIONS PER ROUND\n  *\/\n\n  const ROUND_SIZE =\n    20;\n\n\n  let round =\n    [];\n\n  let current =\n    0;\n\n  let score =\n    0;\n\n  let answered =\n    false;\n\n\n\n  function start(){\n\n    round =\n      getRandomItems(\n        words,\n        ROUND_SIZE\n      );\n\n\n    current =\n      0;\n\n    score =\n      0;\n\n\n    show();\n\n  }\n\n\n\n  function show(){\n\n    answered =\n      false;\n\n\n    if(\n      current >= round.length\n    ){\n\n      finish();\n\n      return;\n\n    }\n\n\n    const item =\n      round[current];\n\n\n\n    container.innerHTML = `\n\n\n      <div class=\"wb-progress-row\">\n\n\n        <div class=\"wb-progress\">\n\n          Question\n          ${current + 1}\n          of\n          ${round.length}\n\n        <\/div>\n\n\n        <div class=\"wb-score\">\n\n          Score:\n          ${score}\n\n        <\/div>\n\n\n      <\/div>\n\n\n\n      <button\n        type=\"button\"\n        class=\"wb-listen-big wb-write-listen\"\n        aria-label=\"Listen\">\n\n        &#x1f50a;\n\n      <\/button>\n\n\n\n      <div class=\"wb-question\">\n\n        Listen and type the word.\n\n      <\/div>\n\n\n\n      <div class=\"wb-write-wrap\">\n\n\n        <input\n          type=\"text\"\n          class=\"wb-input\"\n          autocomplete=\"off\"\n          autocapitalize=\"none\"\n          spellcheck=\"false\"\n          placeholder=\"Type the word\">\n\n\n      <\/div>\n\n\n\n      <div class=\"wb-feedback\">\n      <\/div>\n\n\n\n      <div class=\"wb-action-row\">\n\n\n        <button\n          type=\"button\"\n          class=\"wb-main-btn wb-check\">\n\n          Check\n\n        <\/button>\n\n\n        <button\n          type=\"button\"\n          class=\"wb-main-btn wb-write-next\"\n          style=\"display:none;\">\n\n          Next\n\n        <\/button>\n\n\n      <\/div>\n\n    `;\n\n\n\n    const input =\n\n      container\n        .querySelector(\n          \".wb-input\"\n        );\n\n\n    const check =\n\n      container\n        .querySelector(\n          \".wb-check\"\n        );\n\n\n    const next =\n\n      container\n        .querySelector(\n          \".wb-write-next\"\n        );\n\n\n    const feedback =\n\n      container\n        .querySelector(\n          \".wb-feedback\"\n        );\n\n\n    const listen =\n\n      container\n        .querySelector(\n          \".wb-write-listen\"\n        );\n\n\n\n    listen.addEventListener(\n      \"click\",\n      ()=>{\n\n        speakWord(\n          item.word\n        );\n\n      }\n    );\n\n\n\n    function checkAnswer(){\n\n      if(\n        answered\n      ){\n\n        return;\n\n      }\n\n\n      const response =\n\n        input.value\n          .trim()\n          .toLowerCase();\n\n\n      if(\n        !response\n      ){\n\n        feedback.textContent =\n          \"Type a word first.\";\n\n        feedback.style.color =\n          \"var(--bad-text)\";\n\n        return;\n\n      }\n\n\n      answered =\n        true;\n\n\n      const correct =\n\n        item.word\n          .toLowerCase();\n\n\n\n      if(\n        response === correct\n      ){\n\n\n        input.style.borderColor =\n          \"#6db57d\";\n\n\n        input.style.background =\n          \"var(--ok)\";\n\n\n        feedback.textContent =\n          \"\u2713 Correct!\";\n\n\n        feedback.style.color =\n          \"var(--ok-text)\";\n\n\n        score++;\n\n\n      }else{\n\n\n        input.style.borderColor =\n          \"#dd8e8e\";\n\n\n        input.style.background =\n          \"var(--bad)\";\n\n\n        feedback.innerHTML =\n\n          `The correct spelling is\n          <strong>\n          ${escapeHTML(\n            item.word\n          )}\n          <\/strong>.`;\n\n\n        feedback.style.color =\n          \"var(--bad-text)\";\n\n      }\n\n\n      input.disabled =\n        true;\n\n\n      check.style.display =\n        \"none\";\n\n\n      next.style.display =\n        \"inline-block\";\n\n    }\n\n\n\n    check.addEventListener(\n      \"click\",\n      checkAnswer\n    );\n\n\n\n    input.addEventListener(\n      \"keydown\",\n      function(event){\n\n\n        if(\n          event.key === \"Enter\"\n        ){\n\n          checkAnswer();\n\n        }\n\n      }\n    );\n\n\n\n    next.addEventListener(\n      \"click\",\n      ()=>{\n\n        current++;\n\n        show();\n\n      }\n    );\n\n  }\n\n\n\n  function finish(){\n\n    container.innerHTML = `\n\n\n      <div class=\"wb-round-complete\">\n\n\n        <h3>\n          Round complete!\n        <\/h3>\n\n\n        <p>\n\n          You spelled\n\n          <strong>\n            ${score}\n          <\/strong>\n\n          out of\n\n          <strong>\n            ${round.length}\n          <\/strong>\n\n          words correctly.\n\n        <\/p>\n\n\n        <button\n          type=\"button\"\n          class=\"wb-main-btn wb-restart\">\n\n          Practice again\n\n        <\/button>\n\n\n      <\/div>\n\n    `;\n\n\n    container\n      .querySelector(\n        \".wb-restart\"\n      )\n      .addEventListener(\n        \"click\",\n        start\n      );\n\n  }\n\n\n  start();\n\n}\n\n\n\ncreateWritingRound();\n\n\n\n\/* ==========================================\n   LOAD BROWSER VOICES\n========================================== *\/\n\nif(\n  \"speechSynthesis\" in window\n){\n\n  window\n    .speechSynthesis\n    .getVoices();\n\n\n  window\n    .speechSynthesis\n    .onvoiceschanged =\n    function(){\n\n      window\n        .speechSynthesis\n        .getVoices();\n\n    };\n\n}\n\n\n})();\n<\/script>\n\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Wordbuilding 1050 Listen, learn, and practice your spelling words. 1 Explore the words Select a word to hear it and discover its meaning. All words [&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-1865","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/cuentoskecuentan.com\/index.php?rest_route=\/wp\/v2\/pages\/1865","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=1865"}],"version-history":[{"count":3,"href":"https:\/\/cuentoskecuentan.com\/index.php?rest_route=\/wp\/v2\/pages\/1865\/revisions"}],"predecessor-version":[{"id":1870,"href":"https:\/\/cuentoskecuentan.com\/index.php?rest_route=\/wp\/v2\/pages\/1865\/revisions\/1870"}],"wp:attachment":[{"href":"https:\/\/cuentoskecuentan.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1865"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}