{"id":1651,"date":"2026-06-24T16:20:29","date_gmt":"2026-06-24T16:20:29","guid":{"rendered":"https:\/\/cuentoskecuentan.com\/?page_id=1651"},"modified":"2026-06-24T16:20:46","modified_gmt":"2026-06-24T16:20:46","slug":"sumas-y-restas-pre-algebra","status":"publish","type":"page","link":"https:\/\/cuentoskecuentan.com\/?page_id=1651","title":{"rendered":"Sumas y restas pre \u00e1lgebra"},"content":{"rendered":"\n<div class=\"mathApp793d7a\">\n  <div class=\"card793d7a\">\n\n    <h2>Balanzas Matem\u00e1ticas<\/h2>\n\n    <p class=\"subtitle793d7a\">\n      Descubre cu\u00e1nto vale cada figura\n    <\/p>\n\n    <div class=\"levelBox793d7a\">\n      <button class=\"levelBtn793d7a active793d7a\" data-level=\"beginner\">Nivel 1<\/button>\n      <button class=\"levelBtn793d7a\" data-level=\"intermediate\">Nivel 2<\/button>\n      <button class=\"levelBtn793d7a\" data-level=\"advanced\">Nivel 3<\/button>\n    <\/div>\n\n    <div class=\"progressWrap793d7a\">\n      <div class=\"progressBar793d7a\" id=\"progress793d7a\"><\/div>\n    <\/div>\n\n    <div class=\"progressText793d7a\" id=\"progressText793d7a\">Ejercicio 1 de 10<\/div>\n\n    <div class=\"problemBox793d7a\">\n\n      <div class=\"keywordBox793d7a\">\n        <strong>Reto:<\/strong>\n        <span id=\"keywords793d7a\"><\/span>\n      <\/div>\n\n      <div class=\"problem793d7a\" id=\"problem793d7a\"><\/div>\n\n      <div class=\"question793d7a\" id=\"questionBox793d7a\"><\/div>\n\n      <div class=\"options793d7a\" id=\"options793d7a\"><\/div>\n\n      <button class=\"hintBtn793d7a\" id=\"hintBtn793d7a\">Ver pista<\/button>\n\n      <button class=\"checkBtn793d7a\" id=\"checkBtn793d7a\">Revisar respuesta<\/button>\n\n      <div class=\"feedback793d7a\" id=\"feedback793d7a\"><\/div>\n\n    <\/div>\n\n    <div class=\"score793d7a\" id=\"score793d7a\">Puntaje: 0 \/ 0<\/div>\n\n    <button class=\"nextBtn793d7a\" id=\"nextBtn793d7a\" style=\"display:none;\">\n      Siguiente reto\n    <\/button>\n\n  <\/div>\n<\/div>\n\n<style>\n.mathApp793d7a{\n  font-family:Arial,sans-serif;\n  display:flex;\n  justify-content:center;\n  padding:20px;\n}\n\n.card793d7a{\n  width:100%;\n  max-width:760px;\n  background:white;\n  border-radius:20px;\n  padding:25px;\n  box-shadow:0 8px 25px rgba(0,0,0,0.15);\n  border-top:10px solid #793d7a;\n}\n\n.card793d7a h2{\n  text-align:center;\n  color:#793d7a;\n}\n\n.subtitle793d7a{\n  text-align:center;\n  color:#666;\n  margin-bottom:25px;\n}\n\n.levelBox793d7a{\n  display:flex;\n  gap:10px;\n  justify-content:center;\n  flex-wrap:wrap;\n  margin-bottom:20px;\n}\n\n.levelBtn793d7a{\n  padding:12px 18px;\n  border:none;\n  border-radius:12px;\n  background:#eee;\n  cursor:pointer;\n  font-weight:bold;\n  transition:0.3s;\n}\n\n.levelBtn793d7a:hover{\n  transform:scale(1.05);\n}\n\n.active793d7a{\n  background:#793d7a;\n  color:white;\n}\n\n.progressWrap793d7a{\n  width:100%;\n  height:22px;\n  background:#eee;\n  border-radius:20px;\n  overflow:hidden;\n  margin-bottom:10px;\n}\n\n.progressBar793d7a{\n  height:100%;\n  width:10%;\n  background:#793d7a;\n  transition:0.4s;\n}\n\n.progressText793d7a{\n  text-align:center;\n  font-weight:bold;\n  margin-bottom:25px;\n  color:#555;\n}\n\n.problemBox793d7a{\n  background:#faf7fa;\n  border-radius:18px;\n  padding:25px;\n}\n\n.keywordBox793d7a{\n  background:#f0dff0;\n  padding:12px;\n  border-radius:12px;\n  margin-bottom:20px;\n  color:#793d7a;\n  font-size:18px;\n}\n\n.problem793d7a{\n  background:white;\n  border-radius:18px;\n  padding:20px;\n  font-size:32px;\n  line-height:1.8;\n  text-align:center;\n  margin-bottom:20px;\n}\n\n.equation793d7a{\n  margin:8px 0;\n}\n\n.question793d7a{\n  text-align:center;\n  font-size:24px;\n  color:#793d7a;\n  font-weight:bold;\n  margin-bottom:20px;\n}\n\n.options793d7a{\n  display:grid;\n  grid-template-columns:repeat(4,1fr);\n  gap:12px;\n  margin-bottom:20px;\n}\n\n.option793d7a{\n  background:white;\n  border:3px solid #ddd;\n  border-radius:14px;\n  padding:18px;\n  font-size:28px;\n  font-weight:bold;\n  cursor:pointer;\n  transition:0.3s;\n}\n\n.option793d7a:hover{\n  transform:scale(1.05);\n  border-color:#793d7a;\n}\n\n.selected793d7a{\n  border-color:#793d7a;\n  background:#f4d8f4;\n}\n\n.hintBtn793d7a{\n  width:100%;\n  padding:15px;\n  border:none;\n  border-radius:12px;\n  background:#e7d3e7;\n  color:#793d7a;\n  font-size:18px;\n  font-weight:bold;\n  cursor:pointer;\n  margin-bottom:15px;\n}\n\n.checkBtn793d7a,\n.nextBtn793d7a{\n  width:100%;\n  padding:15px;\n  border:none;\n  border-radius:12px;\n  background:#793d7a;\n  color:white;\n  font-size:18px;\n  font-weight:bold;\n  cursor:pointer;\n  transition:0.3s;\n}\n\n.checkBtn793d7a:hover,\n.nextBtn793d7a:hover{\n  transform:translateY(-2px);\n}\n\n.feedback793d7a{\n  margin-top:20px;\n  background:white;\n  border-radius:14px;\n  padding:18px;\n  line-height:1.8;\n  font-size:18px;\n}\n\n.hintBox793d7a{\n  background:#f8eef8;\n  border-left:5px solid #793d7a;\n  padding:15px;\n  border-radius:10px;\n}\n\n.good793d7a{\n  color:green;\n  font-size:22px;\n  font-weight:bold;\n}\n\n.bad793d7a{\n  color:crimson;\n  font-size:22px;\n  font-weight:bold;\n}\n\n.score793d7a{\n  text-align:center;\n  font-size:22px;\n  margin-top:25px;\n  color:#793d7a;\n  font-weight:bold;\n}\n\n@media(max-width:600px){\n  .problem793d7a{\n    font-size:26px;\n  }\n\n  .options793d7a{\n    grid-template-columns:repeat(2,1fr);\n  }\n}\n<\/style>\n\n<script>\nfunction rand793d7a(min,max){\n  return Math.floor(Math.random()*(max-min+1))+min;\n}\n\nfunction shuffle793d7a(array){\n  return array.sort(()=>Math.random()-0.5);\n}\n\nfunction makeProblem793d7a(equations, question, answer, options, clue, hint, explanation){\n  return {equations, question, answer, options, clue, hint, explanation};\n}\n\nconst figures793d7a = [\"&#x1f34e;\",\"&#x2b50;\",\"&#x1f388;\",\"&#x1f36a;\",\"&#x1f9c3;\",\"&#x1f381;\",\"&#x1f436;\",\"&#x1f338;\",\"&#x26bd;\",\"&#x1f98b;\"];\n\nfunction getFigures793d7a(count){\n  let copy = shuffle793d7a([...figures793d7a]);\n  return copy.slice(0,count);\n}\n\nconst levels793d7a = {\n\nbeginner:[\n\n  () => {\n    let f = getFigures793d7a(1)[0];\n    let value = rand793d7a(2,9);\n    let total = value * 2;\n\n    return makeProblem793d7a(\n      [`${f} + ${f} = ${total}`],\n      `\u00bfCu\u00e1nto vale ${f}?`,\n      value,\n      shuffle793d7a([value, value+1, value+2, value-1].filter(n=>n>0)),\n      \"Una figura tiene un valor escondido.\",\n      \"Las dos figuras valen lo mismo. Piensa: \u00bfqu\u00e9 n\u00famero sumado consigo mismo da el resultado?\",\n      `${f} vale ${value}, porque ${value} + ${value} = ${total}.`\n    );\n  },\n\n  () => {\n    let f = getFigures793d7a(1)[0];\n    let value = rand793d7a(2,6);\n    let total = value * 3;\n\n    return makeProblem793d7a(\n      [`${f} + ${f} + ${f} = ${total}`],\n      `\u00bfCu\u00e1nto vale ${f}?`,\n      value,\n      shuffle793d7a([value, value+2, value+3, value-1].filter(n=>n>0)),\n      \"La misma figura se repite tres veces.\",\n      \"Las tres figuras tienen el mismo valor. Busca qu\u00e9 n\u00famero repetido tres veces da el total.\",\n      `${f} vale ${value}, porque ${value} + ${value} + ${value} = ${total}.`\n    );\n  },\n\n  () => {\n    let f = getFigures793d7a(1)[0];\n    let value = rand793d7a(4,10);\n    let total = value + value;\n\n    return makeProblem793d7a(\n      [`${f} + ${f} = ${total}`],\n      `Encuentra el valor de ${f}`,\n      value,\n      shuffle793d7a([value, value-2, value+2, value+4].filter(n=>n>0)),\n      \"Busca la mitad del total.\",\n      \"Si hay dos figuras iguales, puedes partir el total en dos partes iguales.\",\n      `${f} vale ${value}, porque la mitad de ${total} es ${value}.`\n    );\n  }\n\n],\n\nintermediate:[\n\n  () => {\n    let [a,b] = getFigures793d7a(2);\n    let valueA = rand793d7a(3,8);\n    let valueB = rand793d7a(2,9);\n\n    return makeProblem793d7a(\n      [\n        `${a} + ${a} = ${valueA*2}`,\n        `${a} + ${b} = ${valueA+valueB}`\n      ],\n      `\u00bfCu\u00e1nto vale ${b}?`,\n      valueB,\n      shuffle793d7a([valueB, valueB+1, valueB+3, valueB-1].filter(n=>n>0)),\n      \"Primero descubre una figura. Luego usa esa respuesta.\",\n      `Primero encuentra cu\u00e1nto vale ${a}. Despu\u00e9s usa ese valor en la segunda l\u00ednea.`,\n      `${a} vale ${valueA}. Entonces ${valueA} + ${b} = ${valueA+valueB}. Por eso ${b} vale ${valueB}.`\n    );\n  },\n\n  () => {\n    let [a,b] = getFigures793d7a(2);\n    let valueA = rand793d7a(2,7);\n    let valueB = rand793d7a(2,8);\n\n    return makeProblem793d7a(\n      [\n        `${a} + ${a} + ${a} = ${valueA*3}`,\n        `${a} + ${b} = ${valueA+valueB}`\n      ],\n      `\u00bfCu\u00e1nto vale ${b}?`,\n      valueB,\n      shuffle793d7a([valueB, valueB+2, valueB+4, valueB-1].filter(n=>n>0)),\n      \"Una respuesta te ayuda a encontrar la otra.\",\n      `Primero descubre ${a}. Luego observa cu\u00e1nto falta para llegar al resultado de la segunda l\u00ednea.`,\n      `${a} vale ${valueA}. Entonces ${valueA} + ${b} = ${valueA+valueB}. Por eso ${b} vale ${valueB}.`\n    );\n  },\n\n  () => {\n    let [a,b] = getFigures793d7a(2);\n    let valueA = rand793d7a(4,9);\n    let valueB = rand793d7a(1,6);\n\n    return makeProblem793d7a(\n      [\n        `${a} + ${a} = ${valueA*2}`,\n        `${a} - ${b} = ${valueA-valueB}`\n      ],\n      `\u00bfCu\u00e1nto vale ${b}?`,\n      valueB,\n      shuffle793d7a([valueB, valueB+1, valueB+3, valueB+5]),\n      \"Ahora tambi\u00e9n puede aparecer una resta.\",\n      `Primero descubre ${a}. Despu\u00e9s piensa qu\u00e9 n\u00famero se le quit\u00f3 para llegar al resultado.`,\n      `${a} vale ${valueA}. Como ${valueA} - ${valueB} = ${valueA-valueB}, ${b} vale ${valueB}.`\n    );\n  }\n\n],\n\nadvanced:[\n\n  () => {\n    let [a,b,c] = getFigures793d7a(3);\n    let valueA = rand793d7a(3,7);\n    let valueB = rand793d7a(2,8);\n    let valueC = rand793d7a(1,7);\n\n    return makeProblem793d7a(\n      [\n        `${a} + ${a} = ${valueA*2}`,\n        `${a} + ${b} = ${valueA+valueB}`,\n        `${b} + ${c} = ${valueB+valueC}`\n      ],\n      `\u00bfCu\u00e1nto vale ${c}?`,\n      valueC,\n      shuffle793d7a([valueC, valueC+1, valueC+3, valueC+5].filter(n=>n>0)),\n      \"Resuelve una figura a la vez.\",\n      `Primero encuentra ${a}. Luego encuentra ${b}. Al final usa ${b} para descubrir ${c}.`,\n      `${a} vale ${valueA}. ${b} vale ${valueB}. Entonces ${valueB} + ${c} = ${valueB+valueC}. Por eso ${c} vale ${valueC}.`\n    );\n  },\n\n  () => {\n    let [a,b,c] = getFigures793d7a(3);\n    let valueA = rand793d7a(2,6);\n    let valueB = rand793d7a(3,9);\n    let valueC = rand793d7a(2,8);\n\n    return makeProblem793d7a(\n      [\n        `${a} + ${a} + ${a} = ${valueA*3}`,\n        `${a} + ${b} = ${valueA+valueB}`,\n        `${b} - ${c} = ${valueB-valueC}`\n      ],\n      `\u00bfCu\u00e1nto vale ${c}?`,\n      valueC,\n      shuffle793d7a([valueC, valueC+2, valueC+4, valueC-1].filter(n=>n>0)),\n      \"El reto combina suma y resta.\",\n      `Primero descubre ${a}. Despu\u00e9s descubre ${b}. Luego mira cu\u00e1nto se resta para llegar al \u00faltimo resultado.`,\n      `${a} vale ${valueA}. ${b} vale ${valueB}. Como ${valueB} - ${valueC} = ${valueB-valueC}, ${c} vale ${valueC}.`\n    );\n  },\n\n  () => {\n    let [a,b,c] = getFigures793d7a(3);\n    let valueA = rand793d7a(2,5);\n    let valueB = rand793d7a(2,7);\n    let valueC = rand793d7a(1,6);\n\n    return makeProblem793d7a(\n      [\n        `${a} \u00d7 2 = ${valueA*2}`,\n        `${a} + ${b} = ${valueA+valueB}`,\n        `${b} + ${c} = ${valueB+valueC}`\n      ],\n      `\u00bfCu\u00e1nto vale ${c}?`,\n      valueC,\n      shuffle793d7a([valueC, valueC+1, valueC+3, valueC+4].filter(n=>n>0)),\n      \"Tambi\u00e9n puede aparecer una multiplicaci\u00f3n sencilla.\",\n      `Si ${a} multiplicado por 2 da el resultado, encuentra ${a}. Luego sigue resolviendo en orden.`,\n      `${a} vale ${valueA}. ${b} vale ${valueB}. Entonces ${b} + ${c} = ${valueB+valueC}, por eso ${c} vale ${valueC}.`\n    );\n  }\n\n]\n\n};\n\nlet level793d7a = \"beginner\";\nlet current793d7a;\nlet selected793d7a = \"\";\nlet score793d7a = 0;\nlet total793d7a = 0;\nlet question793d7a = 1;\n\nconst problemEl793d7a = document.getElementById(\"problem793d7a\");\nconst questionBox793d7a = document.getElementById(\"questionBox793d7a\");\nconst optionsEl793d7a = document.getElementById(\"options793d7a\");\nconst feedbackEl793d7a = document.getElementById(\"feedback793d7a\");\nconst scoreEl793d7a = document.getElementById(\"score793d7a\");\nconst nextBtn793d7a = document.getElementById(\"nextBtn793d7a\");\nconst progress793d7a = document.getElementById(\"progress793d7a\");\nconst progressText793d7a = document.getElementById(\"progressText793d7a\");\nconst keywords793d7a = document.getElementById(\"keywords793d7a\");\nconst hintBtn793d7a = document.getElementById(\"hintBtn793d7a\");\n\nfunction newProblem793d7a(){\n\n  let arr = levels793d7a[level793d7a];\n  current793d7a = arr[rand793d7a(0,arr.length-1)]();\n  selected793d7a = \"\";\n\n  problemEl793d7a.innerHTML =\n    current793d7a.equations\n    .map(eq=>`<div class=\"equation793d7a\">${eq}<\/div>`)\n    .join(\"\");\n\n  questionBox793d7a.innerHTML = current793d7a.question;\n  keywords793d7a.innerHTML = current793d7a.clue;\n\n  optionsEl793d7a.innerHTML = \"\";\n\n  shuffle793d7a([...current793d7a.options]).forEach(option=>{\n    let btn = document.createElement(\"button\");\n    btn.className = \"option793d7a\";\n    btn.innerHTML = option;\n\n    btn.addEventListener(\"click\",()=>{\n      document.querySelectorAll(\".option793d7a\")\n      .forEach(b=>b.classList.remove(\"selected793d7a\"));\n\n      btn.classList.add(\"selected793d7a\");\n      selected793d7a = Number(option);\n    });\n\n    optionsEl793d7a.appendChild(btn);\n  });\n\n  feedbackEl793d7a.innerHTML = \"\";\n  nextBtn793d7a.style.display = \"none\";\n\n  updateProgress793d7a();\n\n}\n\nfunction updateProgress793d7a(){\n  let percent = (question793d7a \/ 10) * 100;\n  progress793d7a.style.width = percent + \"%\";\n  progressText793d7a.innerHTML = `Ejercicio ${question793d7a} de 10`;\n}\n\nhintBtn793d7a.addEventListener(\"click\",()=>{\n  feedbackEl793d7a.innerHTML = `\n    <div class=\"hintBox793d7a\">\n      <strong>Pista:<\/strong><br><br>\n      ${current793d7a.hint}\n    <\/div>\n  `;\n});\n\ndocument.getElementById(\"checkBtn793d7a\").addEventListener(\"click\",()=>{\n\n  if(selected793d7a === \"\"){\n    feedbackEl793d7a.innerHTML =\n    `<div class=\"bad793d7a\">Elige una respuesta primero.<\/div>`;\n    return;\n  }\n\n  total793d7a++;\n\n  if(selected793d7a === current793d7a.answer){\n\n    score793d7a++;\n\n    feedbackEl793d7a.innerHTML = `\n      <div class=\"good793d7a\">\u00a1Muy bien!<\/div>\n      <div>${current793d7a.explanation}<\/div>\n    `;\n\n  }else{\n\n    feedbackEl793d7a.innerHTML = `\n      <div class=\"bad793d7a\">Casi. Vamos paso por paso.<\/div>\n      <div>${current793d7a.explanation}<\/div>\n    `;\n\n  }\n\n  scoreEl793d7a.innerHTML =\n    `Puntaje: ${score793d7a} \/ ${total793d7a}`;\n\n  nextBtn793d7a.style.display = \"block\";\n\n});\n\nnextBtn793d7a.addEventListener(\"click\",()=>{\n\n  question793d7a++;\n\n  if(question793d7a > 10){\n\n    problemEl793d7a.innerHTML = \"Terminaste el juego.\";\n    questionBox793d7a.innerHTML = \"\";\n    keywords793d7a.innerHTML = \"-\";\n    optionsEl793d7a.innerHTML = \"\";\n\n    feedbackEl793d7a.innerHTML =\n      `Puntaje final: ${score793d7a} \/ 10`;\n\n    document.getElementById(\"checkBtn793d7a\").style.display = \"none\";\n    hintBtn793d7a.style.display = \"none\";\n\n    nextBtn793d7a.innerHTML = \"Jugar otra vez\";\n    nextBtn793d7a.style.display = \"block\";\n\n    nextBtn793d7a.onclick = ()=>{\n\n      score793d7a = 0;\n      total793d7a = 0;\n      question793d7a = 1;\n\n      scoreEl793d7a.innerHTML = \"Puntaje: 0 \/ 0\";\n\n      document.getElementById(\"checkBtn793d7a\").style.display = \"block\";\n      hintBtn793d7a.style.display = \"block\";\n\n      nextBtn793d7a.innerHTML = \"Siguiente reto\";\n      nextBtn793d7a.onclick = null;\n\n      newProblem793d7a();\n\n    };\n\n    return;\n\n  }\n\n  newProblem793d7a();\n\n});\n\ndocument.querySelectorAll(\".levelBtn793d7a\").forEach(btn=>{\n\n  btn.addEventListener(\"click\",()=>{\n\n    document.querySelectorAll(\".levelBtn793d7a\")\n    .forEach(b=>b.classList.remove(\"active793d7a\"));\n\n    btn.classList.add(\"active793d7a\");\n\n    level793d7a = btn.dataset.level;\n\n    score793d7a = 0;\n    total793d7a = 0;\n    question793d7a = 1;\n\n    scoreEl793d7a.innerHTML = \"Puntaje: 0 \/ 0\";\n\n    document.getElementById(\"checkBtn793d7a\").style.display = \"block\";\n    hintBtn793d7a.style.display = \"block\";\n    nextBtn793d7a.innerHTML = \"Siguiente reto\";\n\n    newProblem793d7a();\n\n  });\n\n});\n\nnewProblem793d7a();\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Balanzas Matem\u00e1ticas Descubre cu\u00e1nto vale cada figura Nivel 1 Nivel 2 Nivel 3 Ejercicio 1 de 10 Reto: Ver pista Revisar respuesta Puntaje: 0 \/ [&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-1651","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/cuentoskecuentan.com\/index.php?rest_route=\/wp\/v2\/pages\/1651","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=1651"}],"version-history":[{"count":2,"href":"https:\/\/cuentoskecuentan.com\/index.php?rest_route=\/wp\/v2\/pages\/1651\/revisions"}],"predecessor-version":[{"id":1655,"href":"https:\/\/cuentoskecuentan.com\/index.php?rest_route=\/wp\/v2\/pages\/1651\/revisions\/1655"}],"wp:attachment":[{"href":"https:\/\/cuentoskecuentan.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1651"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}