{"id":1612,"date":"2026-06-10T17:07:10","date_gmt":"2026-06-10T17:07:10","guid":{"rendered":"https:\/\/cuentoskecuentan.com\/?page_id=1612"},"modified":"2026-06-10T17:49:14","modified_gmt":"2026-06-10T17:49:14","slug":"1073-2","status":"publish","type":"page","link":"https:\/\/cuentoskecuentan.com\/?page_id=1612","title":{"rendered":"1073"},"content":{"rendered":"\n<iframe loading=\"lazy\" src=\"https:\/\/drive.google.com\/file\/d\/1bywu5-C1PoUKJUB9iAznqytmhDk2rzPf\/preview\" width=\"640\" height=\"480\"><\/iframe>\n\n\n\n<div class=\"vocabBoxLeft793d7a\">\n  <div class=\"vocabCardLeft793d7a\">\n\n    <div id=\"wordLeft793d7a\" class=\"wordLeft793d7a\"><\/div>\n    <div id=\"meaningLeft793d7a\" class=\"meaningLeft793d7a\"><\/div>\n\n    <div class=\"navLeft793d7a\">\n      <button onclick=\"prevLeft793d7a()\">&#x25c0; Anterior<\/button>\n      <button onclick=\"nextLeft793d7a()\">Siguiente &#x25b6;<\/button>\n    <\/div>\n\n  <\/div>\n<\/div>\n\n<style>\n.vocabBoxLeft793d7a{\n  max-width: 320px;\n  margin: 20px 0;\n}\n\n.vocabCardLeft793d7a{\n  border: 2px solid #793d7a;\n  border-radius: 10px;\n  padding: 18px;\n  background: #fff;\n  text-align: center;\n}\n\n.wordLeft793d7a{\n  font-size: 26px;\n  font-weight: bold;\n  color: #793d7a;\n  margin-bottom: 10px;\n}\n\n.meaningLeft793d7a{\n  font-size: 18px;\n  color: #333;\n  margin-bottom: 18px;\n}\n\n.navLeft793d7a{\n  display: flex;\n  justify-content: space-between;\n}\n\n.navLeft793d7a button{\n  background: #793d7a;\n  color: #fff;\n  border: none;\n  padding: 6px 12px;\n  border-radius: 6px;\n  font-size: 14px;\n  cursor: pointer;\n}\n<\/style>\n\n<script>\n(function(){\n\n  var vocabLeft793d7a = [\n    {w:\"leak\", m:\"fuga \/ filtraci\u00f3n\"},\n    {w:\"veil\", m:\"velo\"},\n    {w:\"beech\", m:\"haya (\u00e1rbol)\"},\n    {w:\"slay\", m:\"matar \/ vencer\"},\n    {w:\"beat\", m:\"golpear\"},\n    {w:\"prey\", m:\"presa\"},\n    {w:\"stake\", m:\"estaca \/ apuesta\"},\n    {w:\"seize\", m:\"apoderarse de\"},\n    {w:\"pain\", m:\"dolor\"},\n    {w:\"waste\", m:\"desperdiciar\"},\n    {w:\"feet\", m:\"pies\"},\n    {w:\"sail\", m:\"vela \/ navegar\"},\n    {w:\"peel\", m:\"pelar\"},\n    {w:\"break\", m:\"romper\"},\n    {w:\"flee\", m:\"huir\"},\n    {w:\"raise\", m:\"levantar\"},\n    {w:\"phase\", m:\"fase\"},\n    {w:\"weigh\", m:\"pesar\"},\n    {w:\"pail\", m:\"cubo \/ balde\"},\n    {w:\"reed\", m:\"junco\"},\n    {w:\"straight\", m:\"recto\"},\n    {w:\"piece\", m:\"pieza\"},\n    {w:\"meat\", m:\"carne\"},\n    {w:\"accurate\", m:\"preciso\"},\n    {w:\"relic\", m:\"reliquia\"},\n    {w:\"decline\", m:\"declinar \/ disminuir\"},\n    {w:\"cord\", m:\"cord\u00f3n\"},\n    {w:\"prick\", m:\"pinchar\"},\n    {w:\"affect\", m:\"afectar\"},\n    {w:\"caravan\", m:\"caravana\"},\n    {w:\"focus\", m:\"enfoque\"},\n    {w:\"ache\", m:\"dolor persistente\"},\n    {w:\"cleanse\", m:\"limpiar \/ purificar\"},\n    {w:\"accuse\", m:\"acusar\"},\n    {w:\"knock\", m:\"golpear\"},\n    {w:\"flicker\", m:\"titilar \/ parpadear\"},\n    {w:\"welcome\", m:\"bienvenido\"},\n    {w:\"detect\", m:\"detectar\"},\n    {w:\"socket\", m:\"enchufe \/ casquillo\"},\n    {w:\"craft\", m:\"oficio \/ artesan\u00eda\"},\n    {w:\"aspect\", m:\"aspecto\"},\n    {w:\"suck\", m:\"chupar\"},\n    {w:\"traffic\", m:\"tr\u00e1fico\"},\n    {w:\"colossal\", m:\"colosal\"},\n    {w:\"doctrine\", m:\"doctrina\"},\n    {w:\"duct\", m:\"conducto\"},\n    {w:\"dictionary\", m:\"diccionario\"},\n    {w:\"agreement\", m:\"acuerdo\"},\n    {w:\"believe\", m:\"creer\"},\n    {w:\"relief\", m:\"alivio\"},\n    {w:\"plague\", m:\"plaga\"},\n    {w:\"picnic\", m:\"d\u00eda de campo\"},\n    {w:\"color\", m:\"color\"},\n    {w:\"reign\", m:\"reinado\"},\n    {w:\"generation\", m:\"generaci\u00f3n\"},\n    {w:\"victim\", m:\"v\u00edctima\"},\n    {w:\"obtain\", m:\"obtener\"},\n    {w:\"bathe\", m:\"ba\u00f1arse\"},\n    {w:\"topic\", m:\"tema\"},\n    {w:\"indicate\", m:\"indicar\"},\n    {w:\"dangerous\", m:\"peligroso\"},\n    {w:\"accomplish\", m:\"lograr\"},\n    {w:\"occupy\", m:\"ocupar\"},\n    {w:\"academy\", m:\"academia\"},\n    {w:\"scene\", m:\"escena\"}\n  ];\n\n  var posLeft793d7a = 0;\n\n  function renderLeft793d7a(){\n    document.getElementById(\"wordLeft793d7a\").innerHTML = vocabLeft793d7a[posLeft793d7a].w;\n    document.getElementById(\"meaningLeft793d7a\").innerHTML = vocabLeft793d7a[posLeft793d7a].m;\n  }\n\n  window.nextLeft793d7a = function(){\n    posLeft793d7a++;\n    if(posLeft793d7a >= vocabLeft793d7a.length){\n      posLeft793d7a = 0;\n    }\n    renderLeft793d7a();\n  };\n\n  window.prevLeft793d7a = function(){\n    posLeft793d7a--;\n    if(posLeft793d7a < 0){\n      posLeft793d7a = vocabLeft793d7a.length - 1;\n    }\n    renderLeft793d7a();\n  };\n\n  renderLeft793d7a();\n\n})();\n<\/script>\n\n\n\n<div class=\"vocabBox793d7a\">\n  <div class=\"vocabCard793d7a\">\n\n    <div class=\"meaning793d7a\" id=\"meaning793d7a\"><\/div>\n\n    <input\n      type=\"text\"\n      id=\"input793d7a\"\n      class=\"input793d7a\"\n      placeholder=\"Escribe la palabra en ingl\u00e9s\"\n    >\n\n    <div class=\"buttons793d7a\">\n      <button onclick=\"check793d7a()\">Revisar<\/button>\n      <button onclick=\"next793d7a()\">Siguiente<\/button>\n    <\/div>\n\n    <div id=\"feedback793d7a\" class=\"feedback793d7a\"><\/div>\n\n  <\/div>\n<\/div>\n\n<style>\n.vocabBox793d7a{\n  max-width:300px;\n  margin:20px 0;\n}\n\n.vocabCard793d7a{\n  border:2px solid #793d7a;\n  border-radius:10px;\n  padding:16px;\n  background:#fff;\n  text-align:center;\n}\n\n.meaning793d7a{\n  font-size:18px;\n  margin-bottom:12px;\n}\n\n.input793d7a{\n  width:100%;\n  padding:8px;\n  font-size:16px;\n  border:1.5px solid #793d7a;\n  border-radius:6px;\n  margin-bottom:10px;\n  box-sizing:border-box;\n}\n\n.buttons793d7a{\n  display:flex;\n  justify-content:space-between;\n  margin-bottom:8px;\n}\n\n.buttons793d7a button{\n  background:#793d7a;\n  color:white;\n  border:none;\n  border-radius:6px;\n  padding:6px 10px;\n  font-size:14px;\n  cursor:pointer;\n}\n\n.feedback793d7a{\n  min-height:18px;\n  font-size:14px;\n}\n\n.ok793d7a{\n  color:#2e7d32;\n}\n\n.no793d7a{\n  color:#c62828;\n}\n<\/style>\n\n<script>\n(function(){\n\n  var vocab793d7a = [\n    {w:\"leak\", m:\"fuga \/ filtraci\u00f3n\"},\n    {w:\"veil\", m:\"velo\"},\n    {w:\"beech\", m:\"haya (\u00e1rbol)\"},\n    {w:\"slay\", m:\"matar \/ vencer\"},\n    {w:\"beat\", m:\"golpear\"},\n    {w:\"prey\", m:\"presa\"},\n    {w:\"stake\", m:\"estaca \/ apuesta\"},\n    {w:\"seize\", m:\"apoderarse de\"},\n    {w:\"pain\", m:\"dolor\"},\n    {w:\"waste\", m:\"desperdiciar\"},\n    {w:\"feet\", m:\"pies\"},\n    {w:\"sail\", m:\"vela \/ navegar\"},\n    {w:\"peel\", m:\"pelar\"},\n    {w:\"break\", m:\"romper\"},\n    {w:\"flee\", m:\"huir\"},\n    {w:\"raise\", m:\"levantar\"},\n    {w:\"phase\", m:\"fase\"},\n    {w:\"weigh\", m:\"pesar\"},\n    {w:\"pail\", m:\"cubo \/ balde\"},\n    {w:\"reed\", m:\"junco\"},\n    {w:\"straight\", m:\"recto\"},\n    {w:\"piece\", m:\"pieza\"},\n    {w:\"meat\", m:\"carne\"},\n    {w:\"accurate\", m:\"preciso\"},\n    {w:\"relic\", m:\"reliquia\"},\n    {w:\"decline\", m:\"declinar \/ disminuir\"},\n    {w:\"cord\", m:\"cord\u00f3n\"},\n    {w:\"prick\", m:\"pinchar\"},\n    {w:\"affect\", m:\"afectar\"},\n    {w:\"caravan\", m:\"caravana\"},\n    {w:\"focus\", m:\"enfoque\"},\n    {w:\"ache\", m:\"dolor persistente\"},\n    {w:\"cleanse\", m:\"limpiar \/ purificar\"},\n    {w:\"accuse\", m:\"acusar\"},\n    {w:\"knock\", m:\"golpear\"},\n    {w:\"flicker\", m:\"titilar \/ parpadear\"},\n    {w:\"welcome\", m:\"bienvenido\"},\n    {w:\"detect\", m:\"detectar\"},\n    {w:\"socket\", m:\"enchufe \/ casquillo\"},\n    {w:\"craft\", m:\"oficio \/ artesan\u00eda\"},\n    {w:\"aspect\", m:\"aspecto\"},\n    {w:\"suck\", m:\"chupar\"},\n    {w:\"traffic\", m:\"tr\u00e1fico\"},\n    {w:\"colossal\", m:\"colosal\"},\n    {w:\"doctrine\", m:\"doctrina\"},\n    {w:\"duct\", m:\"conducto\"},\n    {w:\"dictionary\", m:\"diccionario\"},\n    {w:\"agreement\", m:\"acuerdo\"},\n    {w:\"believe\", m:\"creer\"},\n    {w:\"relief\", m:\"alivio\"},\n    {w:\"plague\", m:\"plaga\"},\n    {w:\"picnic\", m:\"d\u00eda de campo\"},\n    {w:\"color\", m:\"color\"},\n    {w:\"reign\", m:\"reinado\"},\n    {w:\"generation\", m:\"generaci\u00f3n\"},\n    {w:\"victim\", m:\"v\u00edctima\"},\n    {w:\"obtain\", m:\"obtener\"},\n    {w:\"bathe\", m:\"ba\u00f1arse\"},\n    {w:\"topic\", m:\"tema\"},\n    {w:\"indicate\", m:\"indicar\"},\n    {w:\"dangerous\", m:\"peligroso\"},\n    {w:\"accomplish\", m:\"lograr\"},\n    {w:\"occupy\", m:\"ocupar\"},\n    {w:\"academy\", m:\"academia\"},\n    {w:\"scene\", m:\"escena\"}\n  ];\n\n  var pos793d7a = 0;\n\n  function render793d7a(){\n    document.getElementById(\"meaning793d7a\").innerHTML =\n      vocab793d7a[pos793d7a].m;\n  }\n\n  window.check793d7a = function(){\n\n    var user =\n      document.getElementById(\"input793d7a\")\n      .value\n      .toLowerCase()\n      .trim();\n\n    var correct =\n      vocab793d7a[pos793d7a].w\n      .toLowerCase();\n\n    var fb =\n      document.getElementById(\"feedback793d7a\");\n\n    if(user === correct){\n\n      fb.innerHTML = \"&#x2705; \u00a1Correcto!\";\n      fb.className =\n        \"feedback793d7a ok793d7a\";\n\n    }else{\n\n      fb.innerHTML =\n        \"&#x274c; Intenta otra vez\";\n\n      fb.className =\n        \"feedback793d7a no793d7a\";\n\n    }\n\n  };\n\n  window.next793d7a = function(){\n\n    pos793d7a++;\n\n    if(pos793d7a >= vocab793d7a.length){\n      pos793d7a = 0;\n    }\n\n    render793d7a();\n\n    document.getElementById(\"input793d7a\").value = \"\";\n\n    document.getElementById(\"feedback793d7a\").innerHTML = \"\";\n\n    document.getElementById(\"feedback793d7a\").className =\n      \"feedback793d7a\";\n\n  };\n\n  render793d7a();\n\n})();\n<\/script>\n\n\n\n<div class=\"listenBox793d7a\">\n  <div class=\"listenCard793d7a\">\n\n    <h3>Escucha y selecciona la palabra correcta<\/h3>\n\n    <button class=\"playBtn793d7a\" onclick=\"playWord793d7a()\">\n      &#x25b6; Escuchar\n    <\/button>\n\n    <div id=\"options793d7a\" class=\"options793d7a\"><\/div>\n\n    <div id=\"feedback793d7a\" class=\"feedback793d7a\"><\/div>\n\n    <button class=\"nextBtn793d7a\" onclick=\"next793d7a()\">\n      Siguiente\n    <\/button>\n\n  <\/div>\n<\/div>\n\n<style>\n.listenBox793d7a{\n  max-width:520px;\n  margin:20px 0;\n  font-family:Arial;\n}\n\n.listenCard793d7a{\n  border:2px solid #793d7a;\n  border-radius:14px;\n  padding:20px;\n  background:white;\n  text-align:left;\n}\n\n.listenCard793d7a h3{\n  color:#793d7a;\n  margin-bottom:18px;\n  text-align:left;\n}\n\n.playBtn793d7a,\n.nextBtn793d7a{\n  background:#793d7a;\n  color:white;\n  border:none;\n  border-radius:10px;\n  padding:10px 18px;\n  font-size:16px;\n  cursor:pointer;\n  margin:8px 8px 8px 0;\n  transition:.2s;\n}\n\n.playBtn793d7a:hover,\n.nextBtn793d7a:hover{\n  transform:scale(1.03);\n}\n\n.options793d7a{\n  display:grid;\n  grid-template-columns:1fr 1fr;\n  gap:12px;\n  margin-top:20px;\n}\n\n.option793d7a{\n  border:2px solid #793d7a;\n  border-radius:10px;\n  padding:12px;\n  cursor:pointer;\n  background:#faf5fb;\n  font-size:18px;\n  transition:.2s;\n  text-align:left;\n}\n\n.option793d7a:hover{\n  transform:scale(1.03);\n}\n\n.correct793d7a{\n  background:#dcedc8;\n  border-color:#4caf50;\n}\n\n.wrong793d7a{\n  background:#ffcdd2;\n  border-color:#e53935;\n}\n\n.feedback793d7a{\n  margin-top:18px;\n  min-height:24px;\n  font-size:18px;\n  font-weight:bold;\n  color:#793d7a;\n  text-align:left;\n}\n\n@media(max-width:600px){\n\n  .options793d7a{\n    grid-template-columns:1fr;\n  }\n\n}\n<\/style>\n\n<script>\n(function(){\n\nconst vocab793d7a = [\n\"leak\",\n\"veil\",\n\"beech\",\n\"slay\",\n\"beat\",\n\"prey\",\n\"stake\",\n\"seize\",\n\"pain\",\n\"waste\",\n\"feet\",\n\"sail\",\n\"peel\",\n\"break\",\n\"flee\",\n\"raise\",\n\"phase\",\n\"weigh\",\n\"pail\",\n\"reed\",\n\"straight\",\n\"piece\",\n\"meat\",\n\"accurate\",\n\"relic\",\n\"decline\",\n\"cord\",\n\"prick\",\n\"affect\",\n\"caravan\",\n\"focus\",\n\"ache\",\n\"cleanse\",\n\"accuse\",\n\"knock\",\n\"flicker\",\n\"welcome\",\n\"detect\",\n\"socket\",\n\"craft\",\n\"aspect\",\n\"suck\",\n\"traffic\",\n\"colossal\",\n\"doctrine\",\n\"duct\",\n\"dictionary\",\n\"agreement\",\n\"believe\",\n\"relief\",\n\"plague\",\n\"picnic\",\n\"color\",\n\"reign\",\n\"generation\",\n\"victim\",\n\"obtain\",\n\"bathe\",\n\"topic\",\n\"indicate\",\n\"dangerous\",\n\"accomplish\",\n\"occupy\",\n\"academy\",\n\"scene\"\n];\n\nlet currentWord = \"\";\nlet answered = false;\n\nfunction shuffle(arr){\n  return arr.sort(()=>Math.random()-0.5);\n}\n\nfunction generateQuestion(){\n\n  answered = false;\n\n  currentWord =\n    vocab793d7a[\n      Math.floor(Math.random()*vocab793d7a.length)\n    ];\n\n  let options = [currentWord];\n\n  while(options.length < 4){\n\n    let random =\n      vocab793d7a[\n        Math.floor(Math.random()*vocab793d7a.length)\n      ];\n\n    if(!options.includes(random)){\n      options.push(random);\n    }\n  }\n\n  options = shuffle(options);\n\n  let html = \"\";\n\n  options.forEach(word=>{\n\n    html += `\n      <div class=\"option793d7a\"\n           onclick=\"choose793d7a(this,'${word}')\">\n           ${word}\n      <\/div>\n    `;\n  });\n\n  document.getElementById(\"options793d7a\").innerHTML = html;\n\n  document.getElementById(\"feedback793d7a\").innerHTML = \"\";\n}\n\nwindow.playWord793d7a = function(){\n\n  let utter =\n    new SpeechSynthesisUtterance(currentWord);\n\n  utter.lang = \"en-US\";\n  utter.rate = 0.85;\n\n  speechSynthesis.cancel();\n  speechSynthesis.speak(utter);\n}\n\nwindow.choose793d7a = function(el,word){\n\n  if(answered) return;\n\n  answered = true;\n\n  if(word === currentWord){\n\n    el.classList.add(\"correct793d7a\");\n\n    document.getElementById(\"feedback793d7a\").innerHTML =\n      \"&#x2705; \u00a1Correcto!\";\n\n  } else {\n\n    el.classList.add(\"wrong793d7a\");\n\n    document.getElementById(\"feedback793d7a\").innerHTML =\n      \"&#x274c; Intenta otra vez\";\n\n    document.querySelectorAll(\".option793d7a\").forEach(btn=>{\n\n      if(btn.innerText === currentWord){\n        btn.classList.add(\"correct793d7a\");\n      }\n\n    });\n  }\n}\n\nwindow.next793d7a = function(){\n  generateQuestion();\n}\n\ngenerateQuestion();\n\n})();\n<\/script>\n\n\n\n<div class=\"matchBox793d7a\">\n  <div class=\"matchCard793d7a\">\n\n    <h3>Relaciona cada palabra con su significado<\/h3>\n\n    <div class=\"gameArea793d7a\">\n\n      <svg id=\"lines793d7a\"><\/svg>\n\n      <div class=\"column793d7a\" id=\"words793d7a\"><\/div>\n\n      <div class=\"column793d7a\" id=\"meanings793d7a\"><\/div>\n\n    <\/div>\n\n    <div id=\"feedback793d7a\" class=\"feedback793d7a\"><\/div>\n\n  <\/div>\n<\/div>\n\n<style>\n.matchBox793d7a{\n  max-width:850px;\n  margin:20px 0;\n}\n\n.matchCard793d7a{\n  border:2px solid #793d7a;\n  border-radius:16px;\n  padding:20px;\n  background:white;\n  font-family:Arial;\n  position:relative;\n}\n\n.matchCard793d7a h3{\n  color:#793d7a;\n  margin-bottom:20px;\n}\n\n.gameArea793d7a{\n  position:relative;\n  display:flex;\n  justify-content:space-between;\n  gap:50px;\n}\n\n.column793d7a{\n  width:45%;\n  z-index:2;\n}\n\n.item793d7a{\n  background:#faf5fb;\n  border:2px solid #793d7a;\n  border-radius:12px;\n  padding:12px;\n  margin:12px 0;\n  font-size:17px;\n  cursor:pointer;\n  transition:.2s;\n  user-select:none;\n}\n\n.item793d7a:hover{\n  transform:scale(1.02);\n}\n\n.selected793d7a{\n  background:#ead7ea;\n  border-color:#5d245e;\n}\n\n.correct793d7a{\n  background:#dcedc8;\n  border-color:#4caf50;\n}\n\n.wrong793d7a{\n  background:#ffd6d6;\n  border-color:#e53935;\n}\n\n.feedback793d7a{\n  margin-top:20px;\n  font-size:18px;\n  color:#793d7a;\n  font-weight:bold;\n}\n\n#lines793d7a{\n  position:absolute;\n  top:0;\n  left:0;\n  width:100%;\n  height:100%;\n  pointer-events:none;\n  z-index:1;\n}\n\n.line793d7a{\n  stroke:#793d7a;\n  stroke-width:3;\n}\n\n@media(max-width:700px){\n\n  .gameArea793d7a{\n    gap:20px;\n  }\n\n  .item793d7a{\n    font-size:15px;\n    padding:10px;\n  }\n\n}\n<\/style>\n\n<script>\n(function(){\n\nconst vocab793d7a = [\n{w:\"leak\",m:\"fuga \/ filtraci\u00f3n\"},\n{w:\"veil\",m:\"velo\"},\n{w:\"beech\",m:\"haya (\u00e1rbol)\"},\n{w:\"slay\",m:\"matar \/ vencer\"},\n{w:\"beat\",m:\"golpear\"},\n{w:\"prey\",m:\"presa\"},\n{w:\"stake\",m:\"estaca \/ apuesta\"},\n{w:\"seize\",m:\"apoderarse de\"},\n{w:\"pain\",m:\"dolor\"},\n{w:\"waste\",m:\"desperdiciar\"},\n{w:\"feet\",m:\"pies\"},\n{w:\"sail\",m:\"vela \/ navegar\"},\n{w:\"peel\",m:\"pelar\"},\n{w:\"break\",m:\"romper\"},\n{w:\"flee\",m:\"huir\"},\n{w:\"raise\",m:\"levantar\"},\n{w:\"phase\",m:\"fase\"},\n{w:\"weigh\",m:\"pesar\"},\n{w:\"pail\",m:\"cubo \/ balde\"},\n{w:\"reed\",m:\"junco\"},\n{w:\"straight\",m:\"recto\"},\n{w:\"piece\",m:\"pieza\"},\n{w:\"meat\",m:\"carne\"},\n{w:\"accurate\",m:\"preciso\"},\n{w:\"relic\",m:\"reliquia\"},\n{w:\"decline\",m:\"declinar \/ disminuir\"},\n{w:\"cord\",m:\"cord\u00f3n\"},\n{w:\"prick\",m:\"pinchar\"},\n{w:\"affect\",m:\"afectar\"},\n{w:\"caravan\",m:\"caravana\"},\n{w:\"focus\",m:\"enfoque\"},\n{w:\"ache\",m:\"dolor persistente\"},\n{w:\"cleanse\",m:\"limpiar \/ purificar\"},\n{w:\"accuse\",m:\"acusar\"},\n{w:\"knock\",m:\"golpear\"},\n{w:\"flicker\",m:\"titilar \/ parpadear\"},\n{w:\"welcome\",m:\"bienvenido\"},\n{w:\"detect\",m:\"detectar\"},\n{w:\"socket\",m:\"enchufe \/ casquillo\"},\n{w:\"craft\",m:\"oficio \/ artesan\u00eda\"},\n{w:\"aspect\",m:\"aspecto\"},\n{w:\"suck\",m:\"chupar\"},\n{w:\"traffic\",m:\"tr\u00e1fico\"},\n{w:\"colossal\",m:\"colosal\"},\n{w:\"doctrine\",m:\"doctrina\"},\n{w:\"duct\",m:\"conducto\"},\n{w:\"dictionary\",m:\"diccionario\"},\n{w:\"agreement\",m:\"acuerdo\"},\n{w:\"believe\",m:\"creer\"},\n{w:\"relief\",m:\"alivio\"},\n{w:\"plague\",m:\"plaga\"},\n{w:\"picnic\",m:\"d\u00eda de campo\"},\n{w:\"color\",m:\"color\"},\n{w:\"reign\",m:\"reinado\"},\n{w:\"generation\",m:\"generaci\u00f3n\"},\n{w:\"victim\",m:\"v\u00edctima\"},\n{w:\"obtain\",m:\"obtener\"},\n{w:\"bathe\",m:\"ba\u00f1arse\"},\n{w:\"topic\",m:\"tema\"},\n{w:\"indicate\",m:\"indicar\"},\n{w:\"dangerous\",m:\"peligroso\"},\n{w:\"accomplish\",m:\"lograr\"},\n{w:\"occupy\",m:\"ocupar\"},\n{w:\"academy\",m:\"academia\"},\n{w:\"scene\",m:\"escena\"}\n];\n\nlet block = 0;\nlet correct = 0;\nlet selectedWord = null;\n\nfunction shuffle(arr){\n  return [...arr].sort(()=>Math.random()-0.5);\n}\n\nfunction render(){\n\n  correct = 0;\n  selectedWord = null;\n\n  const start = block * 6;\n\n  let chunk = vocab793d7a.slice(start,start+6);\n\n  if(chunk.length < 6){\n    block = 0;\n    chunk = vocab793d7a.slice(0,6);\n  }\n\n  let words = shuffle([...chunk]);\n  let meanings = shuffle([...chunk]);\n\n  const wordsHTML = words.map(item=>`\n    <div class=\"item793d7a word793d7a\"\n         data-word=\"${item.w}\">\n      ${item.w}\n    <\/div>\n  `).join(\"\");\n\n  const meaningsHTML = meanings.map(item=>`\n    <div class=\"item793d7a meaning793d7a\"\n         data-match=\"${item.w}\">\n      ${item.m}\n    <\/div>\n  `).join(\"\");\n\n  document.getElementById(\"words793d7a\").innerHTML = wordsHTML;\n  document.getElementById(\"meanings793d7a\").innerHTML = meaningsHTML;\n  document.getElementById(\"feedback793d7a\").innerHTML = \"\";\n  document.getElementById(\"lines793d7a\").innerHTML = \"\";\n\n  addEvents();\n}\n\nfunction addEvents(){\n\n  const words = document.querySelectorAll(\".word793d7a\");\n  const meanings = document.querySelectorAll(\".meaning793d7a\");\n\n  words.forEach(word=>{\n\n    word.addEventListener(\"click\",()=>{\n\n      if(word.classList.contains(\"correct793d7a\")) return;\n\n      words.forEach(w=>w.classList.remove(\"selected793d7a\"));\n\n      word.classList.add(\"selected793d7a\");\n      selectedWord = word;\n\n    });\n\n  });\n\n  meanings.forEach(meaning=>{\n\n    meaning.addEventListener(\"click\",()=>{\n\n      if(!selectedWord) return;\n\n      if(meaning.classList.contains(\"correct793d7a\")) return;\n\n      const selected = selectedWord.dataset.word;\n      const match = meaning.dataset.match;\n\n      if(selected === match){\n\n        selectedWord.classList.remove(\"selected793d7a\");\n\n        selectedWord.classList.add(\"correct793d7a\");\n        meaning.classList.add(\"correct793d7a\");\n\n        drawLine(selectedWord, meaning);\n\n        selectedWord.style.pointerEvents = \"none\";\n        meaning.style.pointerEvents = \"none\";\n\n        correct++;\n\n        selectedWord = null;\n\n        if(correct === 6){\n\n          document.getElementById(\"feedback793d7a\").innerHTML =\n          \"\u00a1Excelente! Siguiente bloque...\";\n\n          setTimeout(()=>{\n\n            block++;\n            render();\n\n          },1500);\n        }\n\n      }else{\n\n        meaning.classList.add(\"wrong793d7a\");\n        selectedWord.classList.add(\"wrong793d7a\");\n\n        setTimeout(()=>{\n\n          meaning.classList.remove(\"wrong793d7a\");\n          selectedWord.classList.remove(\"wrong793d7a\");\n          selectedWord.classList.remove(\"selected793d7a\");\n\n          selectedWord = null;\n\n        },600);\n      }\n\n    });\n\n  });\n\n}\n\nfunction drawLine(el1, el2){\n\n  const svg = document.getElementById(\"lines793d7a\");\n  const container = document.querySelector(\".gameArea793d7a\");\n\n  const rect1 = el1.getBoundingClientRect();\n  const rect2 = el2.getBoundingClientRect();\n  const parentRect = container.getBoundingClientRect();\n\n  const x1 = rect1.right - parentRect.left;\n  const y1 = rect1.top + rect1.height\/2 - parentRect.top;\n\n  const x2 = rect2.left - parentRect.left;\n  const y2 = rect2.top + rect2.height\/2 - parentRect.top;\n\n  const line = document.createElementNS(\n    \"http:\/\/www.w3.org\/2000\/svg\",\n    \"line\"\n  );\n\n  line.setAttribute(\"x1\", x1);\n  line.setAttribute(\"y1\", y1);\n  line.setAttribute(\"x2\", x2);\n  line.setAttribute(\"y2\", y2);\n  line.setAttribute(\"class\", \"line793d7a\");\n\n  svg.appendChild(line);\n}\n\nrender();\n\n})();\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>&#x25c0; Anterior Siguiente &#x25b6; Revisar Siguiente Escucha y selecciona la palabra correcta &#x25b6; Escuchar Siguiente Relaciona cada palabra con su significado<\/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-1612","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/cuentoskecuentan.com\/index.php?rest_route=\/wp\/v2\/pages\/1612","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=1612"}],"version-history":[{"count":4,"href":"https:\/\/cuentoskecuentan.com\/index.php?rest_route=\/wp\/v2\/pages\/1612\/revisions"}],"predecessor-version":[{"id":1618,"href":"https:\/\/cuentoskecuentan.com\/index.php?rest_route=\/wp\/v2\/pages\/1612\/revisions\/1618"}],"wp:attachment":[{"href":"https:\/\/cuentoskecuentan.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1612"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}