{"id":786,"date":"2026-02-03T22:59:37","date_gmt":"2026-02-03T22:59:37","guid":{"rendered":"https:\/\/cuentoskecuentan.com\/?page_id=786"},"modified":"2026-09-03T16:07:57","modified_gmt":"2026-09-03T16:07:57","slug":"1030-2","status":"publish","type":"page","link":"https:\/\/cuentoskecuentan.com\/?page_id=786","title":{"rendered":"1030"},"content":{"rendered":"\n<p class=\"has-larger-font-size\">1030<\/p>\n\n\n\n<iframe loading=\"lazy\" src=\"https:\/\/drive.google.com\/file\/d\/1RwyGrnTZbmwc5DKIw3V_yCquDxAbQwox\/preview\" width=\"640\" height=\"480\"><\/iframe>\n\n\n\n<div id=\"wb1030-app\">\n\n<style>\n#wb1030-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#wb1030-app *{\n  box-sizing:border-box;\n}\n\n#wb1030-app .wb-top{\n  text-align:center;\n  padding:18px 10px 28px;\n}\n\n#wb1030-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#wb1030-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#wb1030-app .wb-section{\n  margin-top:32px;\n}\n\n#wb1030-app .wb-section-head{\n  display:flex;\n  align-items:center;\n  gap:12px;\n  margin-bottom:16px;\n}\n\n#wb1030-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#wb1030-app .wb-section-title{\n  margin:0;\n  color:var(--purple-dark);\n  font-size:25px;\n}\n\n#wb1030-app .wb-instruction{\n  color:var(--muted);\n  font-size:15px;\n  margin:3px 0 0;\n}\n\n#wb1030-app .wb-tabs{\n  display:flex;\n  flex-wrap:wrap;\n  gap:9px;\n  margin-bottom:18px;\n}\n\n#wb1030-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#wb1030-app .wb-tab.active{\n  background:var(--purple);\n  color:#fff;\n}\n\n#wb1030-app .wb-word-grid{\n  display:grid;\n  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));\n  gap:13px;\n}\n\n#wb1030-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#wb1030-app .wb-word-card:hover{\n  border-color:var(--purple);\n  transform:translateY(-2px);\n}\n\n#wb1030-app .wb-word{\n  font-size:23px;\n  font-weight:800;\n  color:var(--purple-dark);\n  margin-bottom:12px;\n}\n\n#wb1030-app .wb-card-buttons{\n  display:flex;\n  gap:7px;\n  flex-wrap:wrap;\n}\n\n#wb1030-app button{\n  font-family:inherit;\n}\n\n#wb1030-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#wb1030-app .wb-hear{\n  background:var(--purple);\n  color:#fff;\n}\n\n#wb1030-app .wb-meaning-btn{\n  background:var(--purple-light);\n  color:var(--purple);\n}\n\n#wb1030-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#wb1030-app .wb-practice-box{\n  border:2px solid var(--border);\n  border-radius:20px;\n  padding:22px;\n  background:#fff;\n}\n\n#wb1030-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#wb1030-app .wb-progress{\n  color:var(--muted);\n  font-weight:700;\n}\n\n#wb1030-app .wb-score{\n  color:var(--purple);\n  font-weight:800;\n}\n\n#wb1030-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#wb1030-app .wb-big-word{\n  color:var(--purple);\n  font-size:32px;\n  display:block;\n  margin-top:7px;\n}\n\n#wb1030-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#wb1030-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#wb1030-app .wb-option:hover{\n  border-color:var(--purple);\n  background:var(--purple-light);\n}\n\n#wb1030-app .wb-option.correct{\n  background:var(--ok);\n  border-color:#6db57d;\n  color:var(--ok-text);\n}\n\n#wb1030-app .wb-option.wrong{\n  background:var(--bad);\n  border-color:#dd8e8e;\n  color:var(--bad-text);\n}\n\n#wb1030-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#wb1030-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#wb1030-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#wb1030-app .wb-main-btn:hover{\n  background:var(--purple-dark);\n}\n\n#wb1030-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#wb1030-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#wb1030-app .wb-listen-big:hover{\n  transform:scale(1.04);\n}\n\n#wb1030-app .wb-write-wrap{\n  max-width:570px;\n  margin:0 auto;\n}\n\n#wb1030-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#wb1030-app .wb-input:focus{\n  border-color:var(--purple);\n}\n\n#wb1030-app .wb-round-complete{\n  text-align:center;\n  padding:25px 10px;\n}\n\n#wb1030-app .wb-round-complete h3{\n  color:var(--purple);\n  font-size:28px;\n  margin:0 0 10px;\n}\n\n#wb1030-app .wb-round-complete p{\n  font-size:18px;\n  color:var(--muted);\n}\n\n#wb1030-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  #wb1030-app .wb-options{\n    grid-template-columns:1fr;\n  }\n\n  #wb1030-app .wb-practice-box{\n    padding:17px 13px;\n  }\n\n  #wb1030-app .wb-question{\n    font-size:20px;\n  }\n\n  #wb1030-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 1030\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    <button\n      class=\"wb-tab\"\n      data-group=\"set4\">\n      Set 4\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 this 40-word 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:\"week\",\n  meaning:\"semana\",\n  set:\"set1\"\n},\n\n{\n  word:\"street\",\n  meaning:\"calle\",\n  set:\"set1\"\n},\n\n{\n  word:\"sweet\",\n  meaning:\"dulce\",\n  set:\"set1\"\n},\n\n{\n  word:\"meet\",\n  meaning:\"conocer \/ encontrarse\",\n  set:\"set1\"\n},\n\n{\n  word:\"green\",\n  meaning:\"verde\",\n  set:\"set1\"\n},\n\n{\n  word:\"seen\",\n  meaning:\"visto\",\n  set:\"set1\"\n},\n\n{\n  word:\"screen\",\n  meaning:\"pantalla\",\n  set:\"set1\"\n},\n\n{\n  word:\"free\",\n  meaning:\"libre \/ gratis\",\n  set:\"set1\"\n},\n\n{\n  word:\"feed\",\n  meaning:\"alimentar\",\n  set:\"set1\"\n},\n\n{\n  word:\"seed\",\n  meaning:\"semilla\",\n  set:\"set1\"\n},\n\n\/* SET 2 *\/\n\n{\n  word:\"weed\",\n  meaning:\"maleza\",\n  set:\"set2\"\n},\n\n{\n  word:\"creep\",\n  meaning:\"arrastrarse \/ moverse sigilosamente\",\n  set:\"set2\"\n},\n\n{\n  word:\"deep\",\n  meaning:\"profundo\",\n  set:\"set2\"\n},\n\n{\n  word:\"clean\",\n  meaning:\"limpio \/ limpiar\",\n  set:\"set2\"\n},\n\n{\n  word:\"dear\",\n  meaning:\"querido \/ querida\",\n  set:\"set2\"\n},\n\n{\n  word:\"near\",\n  meaning:\"cerca\",\n  set:\"set2\"\n},\n\n{\n  word:\"eagle\",\n  meaning:\"\u00e1guila\",\n  set:\"set2\"\n},\n\n{\n  word:\"east\",\n  meaning:\"este\",\n  set:\"set2\"\n},\n\n{\n  word:\"even\",\n  meaning:\"incluso \/ par\",\n  set:\"set2\"\n},\n\n{\n  word:\"ever\",\n  meaning:\"alguna vez\",\n  set:\"set2\"\n},\n\n\/* SET 3 *\/\n\n{\n  word:\"every\",\n  meaning:\"cada \/ todos\",\n  set:\"set3\"\n},\n\n{\n  word:\"evil\",\n  meaning:\"malvado \/ maldad\",\n  set:\"set3\"\n},\n\n{\n  word:\"heat\",\n  meaning:\"calor\",\n  set:\"set3\"\n},\n\n{\n  word:\"leave\",\n  meaning:\"salir \/ dejar\",\n  set:\"set3\"\n},\n\n{\n  word:\"sea\",\n  meaning:\"mar\",\n  set:\"set3\"\n},\n\n{\n  word:\"season\",\n  meaning:\"estaci\u00f3n \/ temporada\",\n  set:\"set3\"\n},\n\n{\n  word:\"reason\",\n  meaning:\"raz\u00f3n\",\n  set:\"set3\"\n},\n\n{\n  word:\"real\",\n  meaning:\"real \/ verdadero\",\n  set:\"set3\"\n},\n\n{\n  word:\"speak\",\n  meaning:\"hablar\",\n  set:\"set3\"\n},\n\n{\n  word:\"stream\",\n  meaning:\"arroyo \/ corriente\",\n  set:\"set3\"\n},\n\n\/* SET 4 *\/\n\n{\n  word:\"meat\",\n  meaning:\"carne\",\n  set:\"set4\"\n},\n\n{\n  word:\"neat\",\n  meaning:\"ordenado \/ limpio\",\n  set:\"set4\"\n},\n\n{\n  word:\"seat\",\n  meaning:\"asiento\",\n  set:\"set4\"\n},\n\n{\n  word:\"because\",\n  meaning:\"porque\",\n  set:\"set4\"\n},\n\n{\n  word:\"become\",\n  meaning:\"convertirse \/ llegar a ser\",\n  set:\"set4\"\n},\n\n{\n  word:\"before\",\n  meaning:\"antes\",\n  set:\"set4\"\n},\n\n{\n  word:\"begin\",\n  meaning:\"comenzar\",\n  set:\"set4\"\n},\n\n{\n  word:\"behind\",\n  meaning:\"detr\u00e1s de\",\n  set:\"set4\"\n},\n\n{\n  word:\"belong\",\n  meaning:\"pertenecer\",\n  set:\"set4\"\n},\n\n{\n  word:\"between\",\n  meaning:\"entre\",\n  set:\"set4\"\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    \"#wb1030-app .wb-tab\"\n  )\n  .forEach(\n    button =>{\n\n\n      button.addEventListener(\n        \"click\",\n        function(){\n\n\n          document\n            .querySelectorAll(\n              \"#wb1030-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\n\n\n\n\n\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>1030 Wordbuilding 1030 Listen, learn, and practice your spelling words. 1 Explore the words Select a word to hear it and discover its meaning. All [&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-786","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/cuentoskecuentan.com\/index.php?rest_route=\/wp\/v2\/pages\/786","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=786"}],"version-history":[{"count":6,"href":"https:\/\/cuentoskecuentan.com\/index.php?rest_route=\/wp\/v2\/pages\/786\/revisions"}],"predecessor-version":[{"id":1878,"href":"https:\/\/cuentoskecuentan.com\/index.php?rest_route=\/wp\/v2\/pages\/786\/revisions\/1878"}],"wp:attachment":[{"href":"https:\/\/cuentoskecuentan.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=786"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}