{"id":1605,"date":"2026-06-10T16:17:22","date_gmt":"2026-06-10T16:17:22","guid":{"rendered":"https:\/\/cuentoskecuentan.com\/?page_id=1605"},"modified":"2026-06-10T16:19:50","modified_gmt":"2026-06-10T16:19:50","slug":"areas-y-perimetros","status":"publish","type":"page","link":"https:\/\/cuentoskecuentan.com\/?page_id=1605","title":{"rendered":"\u00c1reas y per\u00edmetros"},"content":{"rendered":"\n<div class=\"geoApp793d7a\">\n  <div class=\"card793d7a\">\n\n    <h2>&#x1f4cf; \u00c1reas y Per\u00edmetros B\u00e1sicos<\/h2>\n    <p class=\"subtitle793d7a\">\n      Aprende a calcular \u00e1reas y per\u00edmetros paso a paso\n    <\/p>\n\n    <div class=\"formulaBox793d7a\" id=\"formula793d7a\"><\/div>\n\n    <div class=\"shapeBox793d7a\">\n      <div id=\"shape793d7a\"><\/div>\n    <\/div>\n\n    <div class=\"question793d7a\" id=\"question793d7a\"><\/div>\n\n    <input\n      type=\"number\"\n      id=\"answer793d7a\"\n      class=\"input793d7a\"\n      placeholder=\"Escribe tu respuesta\"\n    >\n\n    <button id=\"check793d7a\" class=\"btn793d7a\">\n      &#x2705; Comprobar\n    <\/button>\n\n    <div id=\"feedback793d7a\" class=\"feedback793d7a\"><\/div>\n\n    <div class=\"score793d7a\" id=\"score793d7a\">\n      Puntuaci\u00f3n: 0 \/ 0\n    <\/div>\n\n    <button id=\"next793d7a\" class=\"btn793d7a next793d7a\">\n      &#x27a1; Siguiente\n    <\/button>\n\n  <\/div>\n<\/div>\n\n<style>\n\n.geoApp793d7a{\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:700px;\n  background:white;\n  border-radius:20px;\n  padding:25px;\n  box-shadow:0 8px 25px rgba(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:20px;\n}\n\n.formulaBox793d7a{\n  background:#f5ebf5;\n  border-left:5px solid #793d7a;\n  padding:15px;\n  border-radius:12px;\n  margin-bottom:20px;\n  font-size:18px;\n}\n\n.shapeBox793d7a{\n  display:flex;\n  justify-content:center;\n  margin-bottom:20px;\n}\n\n.question793d7a{\n  font-size:24px;\n  text-align:center;\n  margin-bottom:20px;\n  color:#333;\n}\n\n.input793d7a{\n  width:100%;\n  padding:15px;\n  font-size:22px;\n  border-radius:12px;\n  border:2px solid #ccc;\n  margin-bottom:15px;\n  box-sizing:border-box;\n}\n\n.input793d7a:focus{\n  outline:none;\n  border-color:#793d7a;\n}\n\n.btn793d7a{\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  margin-bottom:15px;\n}\n\n.feedback793d7a{\n  background:#fafafa;\n  border-radius:12px;\n  padding:15px;\n  min-height:50px;\n  font-size:18px;\n}\n\n.score793d7a{\n  text-align:center;\n  font-size:22px;\n  color:#793d7a;\n  font-weight:bold;\n  margin-top:20px;\n}\n\n.good793d7a{\n  color:green;\n  font-weight:bold;\n}\n\n.bad793d7a{\n  color:crimson;\n  font-weight:bold;\n}\n\n.next793d7a{\n  display:none;\n}\n\nsvg{\n  max-width:220px;\n}\n\n@media(max-width:600px){\n\n.question793d7a{\n  font-size:20px;\n}\n\n.input793d7a{\n  font-size:18px;\n}\n\n}\n\n<\/style>\n\n<script>\n\nfunction rand793d7a(min,max){\n  return Math.floor(Math.random()*(max-min+1))+min;\n}\n\nconst activities793d7a = [\n\n{\ngenerate(){\n\nlet side=rand793d7a(2,12);\n\nreturn{\ntype:\"Per\u00edmetro\",\nanswer:side*4,\n\nformula:\"&#x1f4cf; Per\u00edmetro del cuadrado = 4 \u00d7 lado\",\n\nquestion:`Un cuadrado tiene lados de ${side} cm.<br>\u00bfCu\u00e1l es su per\u00edmetro?`,\n\nsteps:[\n`4 \u00d7 ${side}`,\n`${side*4}`\n],\n\nsvg:`\n<svg viewBox=\"0 0 200 200\">\n<rect x=\"40\" y=\"40\" width=\"120\" height=\"120\"\nfill=\"#f3e4f3\"\nstroke=\"#793d7a\"\nstroke-width=\"4\"\/>\n<text x=\"100\" y=\"30\" text-anchor=\"middle\"\nfont-size=\"18\">${side} cm<\/text>\n<\/svg>`\n};\n\n}\n},\n\n{\ngenerate(){\n\nlet w=rand793d7a(4,12);\nlet h=rand793d7a(3,10);\n\nreturn{\ntype:\"Per\u00edmetro\",\nanswer:(w+h)*2,\n\nformula:\"&#x1f4cf; Per\u00edmetro del rect\u00e1ngulo = 2 \u00d7 (largo + ancho)\",\n\nquestion:`Rect\u00e1ngulo de ${w} cm por ${h} cm.<br>\u00bfCu\u00e1l es su per\u00edmetro?`,\n\nsteps:[\n`2 \u00d7 (${w} + ${h})`,\n`${(w+h)*2}`\n],\n\nsvg:`\n<svg viewBox=\"0 0 220 160\">\n<rect x=\"30\" y=\"40\" width=\"160\" height=\"80\"\nfill=\"#f3e4f3\"\nstroke=\"#793d7a\"\nstroke-width=\"4\"\/>\n<text x=\"110\" y=\"30\" text-anchor=\"middle\"\nfont-size=\"18\">${w} cm<\/text>\n<text x=\"10\" y=\"90\"\nfont-size=\"18\">${h} cm<\/text>\n<\/svg>`\n};\n\n}\n},\n\n{\ngenerate(){\n\nlet side=rand793d7a(2,12);\n\nreturn{\ntype:\"\u00c1rea\",\nanswer:side*side,\n\nformula:\"&#x1f4d0; \u00c1rea del cuadrado = lado \u00d7 lado\",\n\nquestion:`Un cuadrado tiene lados de ${side} cm.<br>\u00bfCu\u00e1l es su \u00e1rea?`,\n\nsteps:[\n`${side} \u00d7 ${side}`,\n`${side*side}`\n],\n\nsvg:`\n<svg viewBox=\"0 0 200 200\">\n<rect x=\"40\" y=\"40\" width=\"120\" height=\"120\"\nfill=\"#f3e4f3\"\nstroke=\"#793d7a\"\nstroke-width=\"4\"\/>\n<text x=\"100\" y=\"30\" text-anchor=\"middle\"\nfont-size=\"18\">${side} cm<\/text>\n<\/svg>`\n};\n\n}\n},\n\n{\ngenerate(){\n\nlet w=rand793d7a(3,12);\nlet h=rand793d7a(3,10);\n\nreturn{\ntype:\"\u00c1rea\",\nanswer:w*h,\n\nformula:\"&#x1f4d0; \u00c1rea del rect\u00e1ngulo = largo \u00d7 ancho\",\n\nquestion:`Rect\u00e1ngulo de ${w} cm por ${h} cm.<br>\u00bfCu\u00e1l es su \u00e1rea?`,\n\nsteps:[\n`${w} \u00d7 ${h}`,\n`${w*h}`\n],\n\nsvg:`\n<svg viewBox=\"0 0 220 160\">\n<rect x=\"30\" y=\"40\" width=\"160\" height=\"80\"\nfill=\"#f3e4f3\"\nstroke=\"#793d7a\"\nstroke-width=\"4\"\/>\n<text x=\"110\" y=\"30\" text-anchor=\"middle\"\nfont-size=\"18\">${w} cm<\/text>\n<text x=\"10\" y=\"90\"\nfont-size=\"18\">${h} cm<\/text>\n<\/svg>`\n};\n\n}\n}\n\n];\n\nlet current793d7a;\nlet score793d7a=0;\nlet total793d7a=0;\n\nconst formulaEl=document.getElementById(\"formula793d7a\");\nconst shapeEl=document.getElementById(\"shape793d7a\");\nconst questionEl=document.getElementById(\"question793d7a\");\nconst answerEl=document.getElementById(\"answer793d7a\");\nconst feedbackEl=document.getElementById(\"feedback793d7a\");\nconst scoreEl=document.getElementById(\"score793d7a\");\nconst nextBtn=document.getElementById(\"next793d7a\");\n\nfunction newExercise793d7a(){\n\nlet item=\nactivities793d7a[\nrand793d7a(0,activities793d7a.length-1)\n].generate();\n\ncurrent793d7a=item;\n\nformulaEl.innerHTML=item.formula;\nshapeEl.innerHTML=item.svg;\nquestionEl.innerHTML=item.question;\n\nanswerEl.value=\"\";\nfeedbackEl.innerHTML=\"\";\nnextBtn.style.display=\"none\";\n\n}\n\ndocument.getElementById(\"check793d7a\")\n.addEventListener(\"click\",()=>{\n\nif(answerEl.value===\"\"){\nfeedbackEl.innerHTML=\n\"<span class='bad793d7a'>&#x26a0; Escribe una respuesta.<\/span>\";\nreturn;\n}\n\ntotal793d7a++;\n\nlet user=Number(answerEl.value);\n\nif(user===current793d7a.answer){\n\nscore793d7a++;\n\nfeedbackEl.innerHTML=`\n<div class=\"good793d7a\">\n&#x2705; \u00a1Correcto!\n<\/div>\n<br>\nResultado: ${current793d7a.answer}\n`;\n\n}else{\n\nfeedbackEl.innerHTML=`\n<div class=\"bad793d7a\">\n&#x274c; Incorrecto\n<\/div>\n<br>\nPaso 1: ${current793d7a.steps[0]}\n<br>\nPaso 2: ${current793d7a.steps[1]}\n<br><br>\nRespuesta correcta:\n<strong>${current793d7a.answer}<\/strong>\n`;\n\n}\n\nscoreEl.innerHTML=\n`Puntuaci\u00f3n: ${score793d7a} \/ ${total793d7a}`;\n\nnextBtn.style.display=\"block\";\n\n});\n\nnextBtn.addEventListener(\"click\",newExercise793d7a);\n\nnewExercise793d7a();\n\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>&#x1f4cf; \u00c1reas y Per\u00edmetros B\u00e1sicos Aprende a calcular \u00e1reas y per\u00edmetros paso a paso &#x2705; Comprobar Puntuaci\u00f3n: 0 \/ 0 &#x27a1; Siguiente<\/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-1605","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/cuentoskecuentan.com\/index.php?rest_route=\/wp\/v2\/pages\/1605","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=1605"}],"version-history":[{"count":2,"href":"https:\/\/cuentoskecuentan.com\/index.php?rest_route=\/wp\/v2\/pages\/1605\/revisions"}],"predecessor-version":[{"id":1609,"href":"https:\/\/cuentoskecuentan.com\/index.php?rest_route=\/wp\/v2\/pages\/1605\/revisions\/1609"}],"wp:attachment":[{"href":"https:\/\/cuentoskecuentan.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1605"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}