La Aventura de Aitana \ud83d\udc96<\/title>\n<style>\n :root{\n --bg1:#fff3fb;\n --bg2:#eef8ff;\n --card:#ffffffee;\n --text:#3b3151;\n --pink:#ff6fae;\n --purple:#8c6cff;\n --blue:#56b7ff;\n --green:#54c889;\n --yellow:#ffd45c;\n --danger:#ff6b7a;\n }\n *{box-sizing:border-box}\n body{\n margin:0;\n min-height:100vh;\n font-family:\"Trebuchet MS\", system-ui, sans-serif;\n color:var(--text);\n background:\n radial-gradient(circle at 15% 15%, #ffe2f1 0 10%, transparent 11%),\n radial-gradient(circle at 85% 20%, #dff2ff 0 10%, transparent 11%),\n linear-gradient(135deg,var(--bg1),var(--bg2));\n overflow-x:hidden;\n }\n .wrap{\n width:min(980px,94vw);\n margin:0 auto;\n padding:24px 0 40px;\n }\n .topbar{\n display:grid;\n grid-template-columns:1fr auto auto;\n gap:12px;\n align-items:center;\n margin-bottom:18px;\n }\n .title{\n font-size:clamp(25px,4vw,42px);\n font-weight:900;\n letter-spacing:-1px;\n color:#7448c8;\n text-shadow:0 2px #fff;\n }\n .pill{\n background:#fff;\n border:3px solid #f0e6ff;\n box-shadow:0 8px 20px #614c8c18;\n border-radius:999px;\n padding:10px 15px;\n font-weight:900;\n white-space:nowrap;\n }\n .money{color:#15885a}\n .stars{color:#db9d00}\n .card{\n background:var(--card);\n border:3px solid #fff;\n border-radius:28px;\n box-shadow:0 18px 50px #6b5b8d20;\n padding:22px;\n }\n .screen{display:none}\n .screen.active{display:block}\n .hero{\n text-align:center;\n padding:20px 12px 8px;\n }\n .hero .emoji{\n font-size:74px;\n animation:float 2.2s ease-in-out infinite;\n }\n @keyframes float{\n 50%{transform:translateY(-8px)}\n }\n h1,h2,h3{margin:8px 0}\n .muted{opacity:.72}\n .btn{\n border:0;\n border-radius:18px;\n padding:14px 20px;\n font-size:17px;\n font-weight:900;\n cursor:pointer;\n transition:.18s;\n box-shadow:0 8px 0 #00000012;\n }\n .btn:hover{transform:translateY(-2px)}\n .btn:active{transform:translateY(3px); box-shadow:0 3px 0 #00000012}\n .btn-main{\n background:linear-gradient(135deg,var(--pink),var(--purple));\n color:white;\n }\n .btn-soft{\n background:#f5f0ff;\n color:#6f50bd;\n }\n .tables{\n display:grid;\n grid-template-columns:repeat(5,1fr);\n gap:10px;\n margin:18px 0;\n }\n .table-choice{\n background:#fff;\n border:3px solid #e9dcff;\n border-radius:16px;\n padding:13px 5px;\n text-align:center;\n font-size:20px;\n font-weight:900;\n cursor:pointer;\n transition:.18s;\n }\n .table-choice:hover{transform:scale(1.04)}\n .table-choice.selected{\n background:linear-gradient(135deg,#ffdded,#e9e1ff);\n border-color:#b99dff;\n color:#6b46c1;\n }\n .game-grid{\n display:grid;\n grid-template-columns:1.35fr .65fr;\n gap:18px;\n }\n .question-box{\n min-height:360px;\n display:flex;\n flex-direction:column;\n justify-content:center;\n align-items:center;\n text-align:center;\n }\n .level{\n font-weight:900;\n color:#876cc5;\n }\n .question{\n font-size:clamp(48px,9vw,90px);\n font-weight:1000;\n margin:16px 0 18px;\n color:#4f3d74;\n }\n .answer{\n width:min(260px,80%);\n font-size:34px;\n text-align:center;\n padding:12px;\n border:4px solid #dfd1ff;\n border-radius:18px;\n outline:none;\n color:#4f3d74;\n font-weight:900;\n }\n .answer:focus{border-color:#9f7cff; box-shadow:0 0 0 6px #9f7cff18}\n .feedback{\n min-height:42px;\n margin:12px 0 0;\n font-size:19px;\n font-weight:900;\n }\n .side{\n display:flex;\n flex-direction:column;\n gap:14px;\n }\n .mini{\n background:#fff;\n border-radius:22px;\n padding:17px;\n border:2px solid #efe7ff;\n }\n .progress{\n height:18px;\n background:#efe9f8;\n border-radius:99px;\n overflow:hidden;\n margin-top:8px;\n }\n .progress > div{\n height:100%;\n width:0;\n background:linear-gradient(90deg,#ff88ba,#8c6cff,#56b7ff);\n transition:.35s;\n }\n .pig{\n font-size:64px;\n text-align:center;\n }\n .reward-pop{\n position:fixed;\n inset:0;\n pointer-events:none;\n display:flex;\n justify-content:center;\n align-items:center;\n font-size:46px;\n font-weight:1000;\n color:#179364;\n opacity:0;\n transform:scale(.7);\n text-shadow:0 3px white;\n }\n .reward-pop.show{\n animation:pop .85s ease;\n }\n @keyframes pop{\n 0%{opacity:0; transform:scale(.5) translateY(20px)}\n 30%{opacity:1; transform:scale(1.2) translateY(0)}\n 100%{opacity:0; transform:scale(1) translateY(-70px)}\n }\n .summary{\n text-align:center;\n padding:20px 10px;\n }\n .big-money{\n font-size:54px;\n color:#179364;\n font-weight:1000;\n margin:10px 0;\n }\n .badge{\n display:inline-block;\n padding:8px 12px;\n border-radius:999px;\n background:#fff3cb;\n color:#9c6c00;\n font-weight:900;\n margin:4px;\n }\n .footer-note{\n text-align:center;\n margin-top:14px;\n font-size:13px;\n opacity:.65;\n }\n .sparkle{\n position:fixed;\n z-index:-1;\n opacity:.28;\n font-size:28px;\n }\n\n\n .answer-actions{\n display:flex;\n gap:10px;\n justify-content:center;\n flex-wrap:wrap;\n margin-top:14px;\n }\n .help-options{\n width:min(520px,94%);\n display:none;\n grid-template-columns:repeat(3,1fr);\n gap:10px;\n margin-top:14px;\n }\n .help-options.show{display:grid}\n .help-choice{\n border:3px solid #dcd0ff;\n background:#fff;\n border-radius:18px;\n padding:14px 8px;\n font-size:24px;\n font-weight:1000;\n color:#5d4790;\n cursor:pointer;\n transition:.18s;\n }\n .help-choice:hover{\n transform:translateY(-2px);\n border-color:#9f7cff;\n }\n .help-choice.correct{\n background:#e8fff3;\n border-color:#54c889;\n color:#17724d;\n }\n .help-choice.wrong{\n background:#fff0f2;\n border-color:#ff7f90;\n color:#b83e52;\n }\n\n .support-box{\n width:min(520px,94%);\n margin-top:14px;\n padding:16px;\n border-radius:20px;\n background:#fff8dd;\n border:3px solid #ffe08a;\n text-align:left;\n display:none;\n }\n .support-box.show{display:block}\n .support-title{\n font-size:20px;\n font-weight:1000;\n color:#9a6b00;\n margin-bottom:8px;\n text-align:center;\n }\n .support-line{\n font-size:18px;\n line-height:1.5;\n margin:6px 0;\n }\n .mini-table{\n display:grid;\n grid-template-columns:repeat(5,1fr);\n gap:6px;\n margin-top:10px;\n }\n .mini-table div{\n background:white;\n border:2px solid #ffe3a1;\n border-radius:10px;\n padding:7px 4px;\n text-align:center;\n font-weight:900;\n }\n\n @media(max-width:760px){\n .topbar{grid-template-columns:1fr 1fr}\n .title{grid-column:1\/-1;text-align:center}\n .game-grid{grid-template-columns:1fr}\n .tables{grid-template-columns:repeat(3,1fr)}\n .question-box{min-height:320px}\n }\n<\/style>\n<\/head>\n<body>\n<div class=\"sparkle\" style=\"left:4%;top:18%\">\u2b50<\/div>\n<div class=\"sparkle\" style=\"right:6%;top:28%\">\ud83c\udf08<\/div>\n<div class=\"sparkle\" style=\"left:8%;bottom:10%\">\u2728<\/div>\n<div class=\"sparkle\" style=\"right:10%;bottom:8%\">\ud83d\udc96<\/div>\n\n<div class=\"wrap\">\n <div class=\"topbar\">\n <div class=\"title\">\ud83c\udf1f La Aventura de Aitana<\/div>\n <div class=\"pill stars\">\u2b50 <span id=\"starsTop\">0<\/span><\/div>\n <div class=\"pill money\">\ud83d\udc37 $<span id=\"moneyTop\">0<\/span> pesos<\/div>\n <\/div>\n\n <div class=\"card screen active\" id=\"startScreen\">\n <div class=\"hero\">\n <div class=\"emoji\">\ud83d\udc67\ud83c\udf92\u2728<\/div>\n <h1>\u00a1Aitana, aprende y gana monedas!<\/h1>\n <p class=\"muted\">Aitana, cada respuesta correcta te da una recompensa de <b>$1 a $5 pesos<\/b> para tu alcanc\u00eda virtual. \ud83d\udc96<\/p>\n\n <h3>Elige las tablas que quieres practicar:<\/h3>\n <div class=\"tables\" id=\"tables\"><\/div>\n\n <div style=\"display:flex;gap:10px;justify-content:center;flex-wrap:wrap\">\n <button class=\"btn btn-soft\" id=\"selectAll\">Seleccionar todas<\/button>\n <button class=\"btn btn-main\" id=\"startBtn\">\u00a1Comenzar aventura! \ud83d\ude80<\/button>\n <button class=\"btn btn-soft\" id=\"resetProgressBtn\">Reiniciar ejercicios \ud83d\udcda<\/button>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"screen\" id=\"gameScreen\">\n <div class=\"game-grid\">\n <div class=\"card question-box\">\n <div class=\"level\">Reto <span id=\"roundNow\">1<\/span> \u2022 sin repetir hasta aprender<\/div>\n <div class=\"question\" id=\"question\">3 \u00d7 4 = ?<\/div>\n <input id=\"answer\" class=\"answer\" type=\"number\" inputmode=\"numeric\" autocomplete=\"off\" placeholder=\"?\" \/>\n <div class=\"answer-actions\">\n <button class=\"btn btn-main\" id=\"checkBtn\">Comprobar \u2705<\/button>\n <button class=\"btn btn-soft\" id=\"helpBtn\">Mostrar ayuda \ud83d\udca1<\/button>\n <\/div>\n <div class=\"help-options\" id=\"helpOptions\"><\/div>\n <div class=\"feedback\" id=\"feedback\"><\/div>\n <div class=\"support-box\" id=\"supportBox\">\n <div class=\"support-title\">\ud83d\udcda Material de apoyo para Aitana<\/div>\n <div class=\"support-line\" id=\"supportAddition\"><\/div>\n <div class=\"support-line\" id=\"supportTip\"><\/div>\n <div class=\"mini-table\" id=\"supportTable\"><\/div>\n <\/div>\n <\/div>\n\n <div class=\"side\">\n <div class=\"mini\">\n <b>\ud83c\udfc1 Progreso<\/b>\n <div class=\"progress\"><div id=\"progressBar\"><\/div><\/div>\n <div style=\"margin-top:8px\"><span id=\"correctCount\">0<\/span> correctas<\/div>\n <\/div>\n <div class=\"mini\">\n <div class=\"pig\">\ud83d\udc37<\/div>\n <div style=\"text-align:center\">\n <b>Mi alcanc\u00eda<\/b>\n <div style=\"font-size:30px;font-weight:1000;color:#179364\">$<span id=\"moneySide\">0<\/span><\/div>\n <div class=\"muted\">pesos ganados<\/div>\n <\/div>\n <\/div>\n <div class=\"mini\">\n <b>\ud83d\udca1 Pista<\/b>\n <p id=\"hint\" class=\"muted\" style=\"margin-bottom:0\">Piensa en sumar el mismo n\u00famero varias veces.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"card screen\" id=\"endScreen\">\n <div class=\"summary\">\n <div style=\"font-size:78px\">\ud83c\udfc6\ud83c\udf89<\/div>\n <h1>\u00a1Aitana, misi\u00f3n cumplida! \ud83c\udf89<\/h1>\n <p>Terminaste tus retos. Los ejercicios dif\u00edciles se repiten hasta aprenderlos.<\/p>\n <div class=\"big-money\">\ud83d\udc37 $<span id=\"finalMoney\">0<\/span> pesos<\/div>\n <div id=\"badges\"><\/div>\n <p id=\"finalText\" style=\"font-size:20px;font-weight:900\"><\/p>\n <button class=\"btn btn-main\" id=\"againBtn\">Jugar otra vez \ud83d\udd04<\/button>\n <button class=\"btn btn-soft\" id=\"resetBtn\" style=\"margin-left:8px\">Vaciar alcanc\u00eda<\/button>\n <\/div>\n <\/div>\n\n <div class=\"footer-note\">\n Juego educativo. La recompensa mostrada es un contador virtual para que un adulto decida c\u00f3mo entregarla.\n <\/div>\n<\/div>\n\n<div class=\"reward-pop\" id=\"rewardPop\">+$3 \ud83d\udcb0<\/div>\n\n<script>\n(() => {\n const $ = (id) => document.getElementById(id);\n\n let selectedTables = new Set([2,3,4,5]);\n let round = 1;\n let correct = 0;\n let money = Number(localStorage.getItem(\"tablaMoney\") || 0);\n let stars = Number(localStorage.getItem(\"tablaStars\") || 0);\n let current = {a:2,b:2,result:4};\n let locked = false;\n let helpVisible = false;\n let completedQuestions = new Set(JSON.parse(localStorage.getItem(\"aitanaCompletedQuestions\") || \"[]\"));\n let sessionQuestions = [];\n\n function updateTotals(){\n $(\"moneyTop\").textContent = money;\n $(\"moneySide\").textContent = money;\n $(\"starsTop\").textContent = stars;\n localStorage.setItem(\"tablaMoney\", money);\n localStorage.setItem(\"tablaStars\", stars);\n }\n\n function beep(type=\"ok\"){\n try{\n const AudioCtx = window.AudioContext || window.webkitAudioContext;\n const ctx = new AudioCtx();\n const o = ctx.createOscillator();\n const g = ctx.createGain();\n o.connect(g); g.connect(ctx.destination);\n o.type = \"sine\";\n o.frequency.value = type===\"ok\" ? 660 : 220;\n g.gain.setValueAtTime(0.08, ctx.currentTime);\n g.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.22);\n o.start();\n o.stop(ctx.currentTime + 0.22);\n }catch(e){}\n }\n\n function buildTables(){\n const box = $(\"tables\");\n box.innerHTML = \"\";\n for(let n=1;n<=10;n++){\n const b = document.createElement(\"button\");\n b.className = \"table-choice\" + (selectedTables.has(n) ? \" selected\" : \"\");\n b.textContent = \"Tabla \" + n;\n b.onclick = () => {\n if(selectedTables.has(n)) selectedTables.delete(n);\n else selectedTables.add(n);\n if(selectedTables.size === 0) selectedTables.add(n);\n buildTables();\n };\n box.appendChild(b);\n }\n }\n\n function showScreen(id){\n document.querySelectorAll(\".screen\").forEach(s => s.classList.remove(\"active\"));\n $(id).classList.add(\"active\");\n }\n\n function makeKey(a,b){\n return `${a}x${b}`;\n }\n\n function saveCompleted(){\n localStorage.setItem(\"aitanaCompletedQuestions\", JSON.stringify([...completedQuestions]));\n }\n\n function buildQuestionPool(){\n const pool = [];\n [...selectedTables].forEach(a => {\n for(let b=1;b<=10;b++){\n const key = makeKey(a,b);\n if(!completedQuestions.has(key)){\n pool.push({a,b,result:a*b,key});\n }\n }\n });\n return pool;\n }\n\n function buildSupport(a,b){\n const addition = Array(b).fill(a).join(\" + \");\n $(\"supportAddition\").innerHTML = `<b>${a} \u00d7 ${b}<\/b> significa sumar ${a}, ${b} veces:<br>${addition} = <b>${a*b}<\/b>`;\n $(\"supportTip\").textContent = `Truco: cuenta de ${a} en ${a}: ${Array.from({length:b},(_,i)=>a*(i+1)).join(\", \")}.`;\n const table = $(\"supportTable\");\n table.innerHTML = \"\";\n for(let i=1;i<=10;i++){\n const cell = document.createElement(\"div\");\n cell.textContent = `${a}\u00d7${i}=${a*i}`;\n table.appendChild(cell);\n }\n $(\"supportBox\").classList.add(\"show\");\n }\n\n\n function shuffle(arr){\n for(let i=arr.length-1;i>0;i--){\n const j = Math.floor(Math.random()*(i+1));\n [arr[i],arr[j]] = [arr[j],arr[i]];\n }\n return arr;\n }\n\n function buildHelpOptions(){\n const correctAnswer = current.result;\n const distractors = new Set();\n\n \/\/ Build believable nearby answers, avoiding duplicates and negatives.\n const candidates = [\n correctAnswer + current.a,\n correctAnswer - current.a,\n correctAnswer + current.b,\n correctAnswer - current.b,\n correctAnswer + 1,\n correctAnswer - 1,\n correctAnswer + 2,\n correctAnswer - 2\n ].filter(n => n >= 0 && n !== correctAnswer);\n\n shuffle(candidates);\n for(const n of candidates){\n distractors.add(n);\n if(distractors.size >= 2) break;\n }\n\n while(distractors.size < 2){\n const n = Math.max(0, correctAnswer + Math.floor(Math.random()*9)-4);\n if(n !== correctAnswer) distractors.add(n);\n }\n\n const choices = shuffle([correctAnswer, ...distractors]);\n const box = $(\"helpOptions\");\n box.innerHTML = \"\";\n\n choices.forEach(value => {\n const btn = document.createElement(\"button\");\n btn.className = \"help-choice\";\n btn.textContent = value;\n btn.onclick = () => chooseHelpAnswer(value, btn);\n box.appendChild(btn);\n });\n\n helpVisible = true;\n box.classList.add(\"show\");\n $(\"helpBtn\").textContent = \"Ocultar ayuda \ud83d\ude48\";\n }\n\n function hideHelpOptions(){\n helpVisible = false;\n $(\"helpOptions\").classList.remove(\"show\");\n $(\"helpBtn\").textContent = \"Mostrar ayuda \ud83d\udca1\";\n }\n\n function requeueCurrent(){\n const key = current.key || makeKey(current.a,current.b);\n if(!completedQuestions.has(key)){\n \/\/ Insert later, not immediately, so Aitana sees other exercises first.\n const item = {a:current.a,b:current.b,result:current.result,key};\n const insertAt = Math.min(\n sessionQuestions.length,\n Math.max(2, Math.floor(sessionQuestions.length * 0.6))\n );\n sessionQuestions.splice(insertAt, 0, item);\n }\n }\n\n function markCorrectAndReward(){\n const reward = Math.floor(Math.random()*5)+1;\n money += reward;\n stars += 1;\n correct += 1;\n completedQuestions.add(current.key || makeKey(current.a,current.b));\n saveCompleted();\n updateTotals();\n $(\"correctCount\").textContent = correct;\n $(\"feedback\").textContent = `\u00a1Muy bien, Aitana! \ud83c\udf89 Ganaste $${reward} pesos`;\n $(\"feedback\").style.color = \"#179364\";\n $(\"supportBox\").classList.remove(\"show\");\n rewardAnimation(reward);\n beep(\"ok\");\n }\n\n function chooseHelpAnswer(value, btn){\n if(locked) return;\n locked = true;\n $(\"answer\").disabled = true;\n $(\"checkBtn\").disabled = true;\n $(\"helpBtn\").disabled = true;\n\n const buttons = [...document.querySelectorAll(\".help-choice\")];\n\n if(value === current.result){\n btn.classList.add(\"correct\");\n markCorrectAndReward();\n\n setTimeout(() => {\n if(round >= 10 && sessionQuestions.length === 0) finishGame();\n else{\n round++;\n newQuestion();\n }\n }, 1200);\n }else{\n btn.classList.add(\"wrong\");\n buttons.forEach(b => {\n if(Number(b.textContent) === current.result) b.classList.add(\"correct\");\n });\n\n money = Math.max(0, money - 1);\n updateTotals();\n $(\"feedback\").textContent = `Esa no era, Aitana. Se descont\u00f3 $1 peso. Esta pregunta volver\u00e1 m\u00e1s adelante.`;\n $(\"feedback\").style.color = \"#d65367\";\n buildSupport(current.a,current.b);\n requeueCurrent();\n beep(\"bad\");\n\n setTimeout(() => {\n round++;\n newQuestion();\n }, 3200);\n }\n }\n\n function newQuestion(){\n locked = false;\n helpVisible = false;\n $(\"helpBtn\").disabled = false;\n $(\"helpBtn\").textContent = \"Mostrar ayuda \ud83d\udca1\";\n $(\"helpOptions\").classList.remove(\"show\");\n $(\"helpOptions\").innerHTML = \"\";\n\n if(sessionQuestions.length === 0){\n sessionQuestions = buildQuestionPool();\n }\n\n if(sessionQuestions.length === 0){\n $(\"finalMoney\").textContent = money;\n $(\"badges\").innerHTML = '<span class=\"badge\">\ud83c\udfc6 \u00a1Todas completadas!<\/span>';\n $(\"finalText\").textContent = \"Aitana ya termin\u00f3 todos los ejercicios de las tablas seleccionadas. Puedes elegir otras tablas o reiniciar los ejercicios.\";\n showScreen(\"endScreen\");\n return;\n }\n\n const idx = Math.floor(Math.random()*sessionQuestions.length);\n current = sessionQuestions.splice(idx,1)[0];\n\n $(\"question\").textContent = `${current.a} \u00d7 ${current.b} = ?`;\n $(\"answer\").value = \"\";\n $(\"answer\").disabled = false;\n $(\"checkBtn\").disabled = false;\n $(\"feedback\").textContent = \"\";\n $(\"supportBox\").classList.remove(\"show\");\n $(\"roundNow\").textContent = round;\n $(\"progressBar\").style.width = (Math.min(round-1,10)\/10*100) + \"%\";\n $(\"hint\").textContent = `Pista: ${current.a} \u00d7 ${current.b} significa sumar ${current.a}, ${current.b} veces.`;\n setTimeout(()=>$(\"answer\").focus(),100);\n }\n\n function rewardAnimation(amount){\n const el = $(\"rewardPop\");\n el.textContent = `+$${amount} \ud83d\udcb0`;\n el.classList.remove(\"show\");\n void el.offsetWidth;\n el.classList.add(\"show\");\n }\n\n function checkAnswer(){\n if(locked) return;\n const val = Number($(\"answer\").value);\n if($(\"answer\").value.trim()===\"\"){\n $(\"feedback\").textContent = \"Escribe tu respuesta \ud83d\ude0a\";\n $(\"feedback\").style.color = \"#8c6cff\";\n return;\n }\n\n locked = true;\n $(\"answer\").disabled = true;\n $(\"checkBtn\").disabled = true;\n $(\"helpBtn\").disabled = true;\n\n if(val === current.result){\n markCorrectAndReward();\n\n $(\"progressBar\").style.width = (Math.min(round,10)\/10*100) + \"%\";\n\n setTimeout(() => {\n if(round >= 10 && sessionQuestions.length === 0) finishGame();\n else{\n round++;\n newQuestion();\n }\n }, 1200);\n }else{\n money = Math.max(0, money - 1);\n updateTotals();\n $(\"feedback\").textContent = `Casi, Aitana \ud83d\ude0a Se descont\u00f3 $1 peso. Esta pregunta volver\u00e1 m\u00e1s adelante.`;\n $(\"feedback\").style.color = \"#d65367\";\n buildSupport(current.a,current.b);\n requeueCurrent();\n beep(\"bad\");\n\n $(\"progressBar\").style.width = (Math.min(round,10)\/10*100) + \"%\";\n\n setTimeout(() => {\n round++;\n newQuestion();\n }, 3500);\n }\n }\n\n function finishGame(){\n $(\"finalMoney\").textContent = money;\n const badges = $(\"badges\");\n badges.innerHTML = \"\";\n let text = \"\";\n if(correct === 10){\n badges.innerHTML = '<span class=\"badge\">\ud83c\udf1f Maestra de tablas<\/span><span class=\"badge\">\ud83d\udc51 10\/10<\/span>';\n text = \"\u00a1Perfecto, Aitana! Respondiste todo correctamente.\";\n }else if(correct >= 8){\n badges.innerHTML = '<span class=\"badge\">\ud83e\udd84 S\u00faper matem\u00e1tica<\/span>';\n text = `\u00a1Excelente, Aitana! Tuviste ${correct} de 10 correctas.`;\n }else if(correct >= 6){\n badges.innerHTML = '<span class=\"badge\">\ud83c\udf08 Gran avance<\/span>';\n text = `\u00a1Vas muy bien, Aitana! Tuviste ${correct} de 10 correctas.`;\n }else{\n badges.innerHTML = '<span class=\"badge\">\ud83d\udc96 Nunca te rindas<\/span>';\n text = `Aitana, hoy practicaste mucho. Tuviste ${correct} de 10 correctas.`;\n }\n $(\"finalText\").textContent = text;\n showScreen(\"endScreen\");\n }\n\n $(\"selectAll\").onclick = () => {\n selectedTables = new Set([1,2,3,4,5,6,7,8,9,10]);\n buildTables();\n };\n\n $(\"startBtn\").onclick = () => {\n round = 1;\n correct = 0;\n sessionQuestions = [];\n $(\"correctCount\").textContent = 0;\n\n const remaining = buildQuestionPool().length;\n if(remaining === 0){\n alert(\"Aitana ya complet\u00f3 todos los ejercicios de las tablas seleccionadas. Elige otras tablas o pulsa \u201cReiniciar ejercicios\u201d.\");\n return;\n }\n\n showScreen(\"gameScreen\");\n newQuestion();\n };\n\n\n $(\"helpBtn\").onclick = () => {\n if(locked) return;\n if(helpVisible) hideHelpOptions();\n else buildHelpOptions();\n };\n\n $(\"checkBtn\").onclick = checkAnswer;\n $(\"answer\").addEventListener(\"keydown\", (e)=>{\n if(e.key===\"Enter\") checkAnswer();\n });\n\n\n $(\"resetProgressBtn\").onclick = () => {\n if(confirm(\"\u00bfQuieres permitir que Aitana vuelva a practicar todos los ejercicios desde el principio?\")){\n completedQuestions.clear();\n sessionQuestions = [];\n localStorage.removeItem(\"aitanaCompletedQuestions\");\n alert(\"\u00a1Listo! Todos los ejercicios vuelven a estar disponibles. \ud83d\udcda\");\n }\n };\n\n $(\"againBtn\").onclick = () => {\n showScreen(\"startScreen\");\n };\n\n $(\"resetBtn\").onclick = () => {\n if(confirm(\"\u00bfSeguro que quieres vaciar la alcanc\u00eda virtual?\")){\n money = 0;\n stars = 0;\n updateTotals();\n $(\"finalMoney\").textContent = 0;\n }\n };\n\n buildTables();\n updateTotals();\n})();\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>La Aventura de Aitana \ud83d\udc96 \u2b50 \ud83c\udf08 \u2728 \ud83d\udc96 \ud83c\udf1f La Aventura de Aitana \u2b50 0 \ud83d\udc37 $0 pesos \ud83d\udc67\ud83c\udf92\u2728 \u00a1Aitana, aprende y gana monedas! Aitana, cada respuesta correcta te da una recompensa de $1 a $5 pesos para tu alcanc\u00eda virtual. \ud83d\udc96 Elige las tablas que quieres practicar: Seleccionar todas \u00a1Comenzar aventura! \ud83d\ude80 Reiniciar […]<\/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-20126","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/tpvking.com\/index.php?rest_route=\/wp\/v2\/pages\/20126","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tpvking.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tpvking.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tpvking.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tpvking.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=20126"}],"version-history":[{"count":3,"href":"https:\/\/tpvking.com\/index.php?rest_route=\/wp\/v2\/pages\/20126\/revisions"}],"predecessor-version":[{"id":20129,"href":"https:\/\/tpvking.com\/index.php?rest_route=\/wp\/v2\/pages\/20126\/revisions\/20129"}],"wp:attachment":[{"href":"https:\/\/tpvking.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=20126"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":20126,"date":"2026-08-28T05:20:35","date_gmt":"2026-08-28T05:20:35","guid":{"rendered":"https:\/\/tpvking.com\/?page_id=20126"},"modified":"2026-08-28T05:36:35","modified_gmt":"2026-08-28T05:36:35","slug":"aitana","status":"publish","type":"page","link":"https:\/\/tpvking.com\/?page_id=20126","title":{"rendered":"aitana"},"content":{"rendered":"\n\n\n\n\n\nLa Aventura de Aitana \ud83d\udc96<\/title>\n<style>\n :root{\n --bg1:#fff3fb;\n --bg2:#eef8ff;\n --card:#ffffffee;\n --text:#3b3151;\n --pink:#ff6fae;\n --purple:#8c6cff;\n --blue:#56b7ff;\n --green:#54c889;\n --yellow:#ffd45c;\n --danger:#ff6b7a;\n }\n *{box-sizing:border-box}\n body{\n margin:0;\n min-height:100vh;\n font-family:\"Trebuchet MS\", system-ui, sans-serif;\n color:var(--text);\n background:\n radial-gradient(circle at 15% 15%, #ffe2f1 0 10%, transparent 11%),\n radial-gradient(circle at 85% 20%, #dff2ff 0 10%, transparent 11%),\n linear-gradient(135deg,var(--bg1),var(--bg2));\n overflow-x:hidden;\n }\n .wrap{\n width:min(980px,94vw);\n margin:0 auto;\n padding:24px 0 40px;\n }\n .topbar{\n display:grid;\n grid-template-columns:1fr auto auto;\n gap:12px;\n align-items:center;\n margin-bottom:18px;\n }\n .title{\n font-size:clamp(25px,4vw,42px);\n font-weight:900;\n letter-spacing:-1px;\n color:#7448c8;\n text-shadow:0 2px #fff;\n }\n .pill{\n background:#fff;\n border:3px solid #f0e6ff;\n box-shadow:0 8px 20px #614c8c18;\n border-radius:999px;\n padding:10px 15px;\n font-weight:900;\n white-space:nowrap;\n }\n .money{color:#15885a}\n .stars{color:#db9d00}\n .card{\n background:var(--card);\n border:3px solid #fff;\n border-radius:28px;\n box-shadow:0 18px 50px #6b5b8d20;\n padding:22px;\n }\n .screen{display:none}\n .screen.active{display:block}\n .hero{\n text-align:center;\n padding:20px 12px 8px;\n }\n .hero .emoji{\n font-size:74px;\n animation:float 2.2s ease-in-out infinite;\n }\n @keyframes float{\n 50%{transform:translateY(-8px)}\n }\n h1,h2,h3{margin:8px 0}\n .muted{opacity:.72}\n .btn{\n border:0;\n border-radius:18px;\n padding:14px 20px;\n font-size:17px;\n font-weight:900;\n cursor:pointer;\n transition:.18s;\n box-shadow:0 8px 0 #00000012;\n }\n .btn:hover{transform:translateY(-2px)}\n .btn:active{transform:translateY(3px); box-shadow:0 3px 0 #00000012}\n .btn-main{\n background:linear-gradient(135deg,var(--pink),var(--purple));\n color:white;\n }\n .btn-soft{\n background:#f5f0ff;\n color:#6f50bd;\n }\n .tables{\n display:grid;\n grid-template-columns:repeat(5,1fr);\n gap:10px;\n margin:18px 0;\n }\n .table-choice{\n background:#fff;\n border:3px solid #e9dcff;\n border-radius:16px;\n padding:13px 5px;\n text-align:center;\n font-size:20px;\n font-weight:900;\n cursor:pointer;\n transition:.18s;\n }\n .table-choice:hover{transform:scale(1.04)}\n .table-choice.selected{\n background:linear-gradient(135deg,#ffdded,#e9e1ff);\n border-color:#b99dff;\n color:#6b46c1;\n }\n .game-grid{\n display:grid;\n grid-template-columns:1.35fr .65fr;\n gap:18px;\n }\n .question-box{\n min-height:360px;\n display:flex;\n flex-direction:column;\n justify-content:center;\n align-items:center;\n text-align:center;\n }\n .level{\n font-weight:900;\n color:#876cc5;\n }\n .question{\n font-size:clamp(48px,9vw,90px);\n font-weight:1000;\n margin:16px 0 18px;\n color:#4f3d74;\n }\n .answer{\n width:min(260px,80%);\n font-size:34px;\n text-align:center;\n padding:12px;\n border:4px solid #dfd1ff;\n border-radius:18px;\n outline:none;\n color:#4f3d74;\n font-weight:900;\n }\n .answer:focus{border-color:#9f7cff; box-shadow:0 0 0 6px #9f7cff18}\n .feedback{\n min-height:42px;\n margin:12px 0 0;\n font-size:19px;\n font-weight:900;\n }\n .side{\n display:flex;\n flex-direction:column;\n gap:14px;\n }\n .mini{\n background:#fff;\n border-radius:22px;\n padding:17px;\n border:2px solid #efe7ff;\n }\n .progress{\n height:18px;\n background:#efe9f8;\n border-radius:99px;\n overflow:hidden;\n margin-top:8px;\n }\n .progress > div{\n height:100%;\n width:0;\n background:linear-gradient(90deg,#ff88ba,#8c6cff,#56b7ff);\n transition:.35s;\n }\n .pig{\n font-size:64px;\n text-align:center;\n }\n .reward-pop{\n position:fixed;\n inset:0;\n pointer-events:none;\n display:flex;\n justify-content:center;\n align-items:center;\n font-size:46px;\n font-weight:1000;\n color:#179364;\n opacity:0;\n transform:scale(.7);\n text-shadow:0 3px white;\n }\n .reward-pop.show{\n animation:pop .85s ease;\n }\n @keyframes pop{\n 0%{opacity:0; transform:scale(.5) translateY(20px)}\n 30%{opacity:1; transform:scale(1.2) translateY(0)}\n 100%{opacity:0; transform:scale(1) translateY(-70px)}\n }\n .summary{\n text-align:center;\n padding:20px 10px;\n }\n .big-money{\n font-size:54px;\n color:#179364;\n font-weight:1000;\n margin:10px 0;\n }\n .badge{\n display:inline-block;\n padding:8px 12px;\n border-radius:999px;\n background:#fff3cb;\n color:#9c6c00;\n font-weight:900;\n margin:4px;\n }\n .footer-note{\n text-align:center;\n margin-top:14px;\n font-size:13px;\n opacity:.65;\n }\n .sparkle{\n position:fixed;\n z-index:-1;\n opacity:.28;\n font-size:28px;\n }\n\n\n .answer-actions{\n display:flex;\n gap:10px;\n justify-content:center;\n flex-wrap:wrap;\n margin-top:14px;\n }\n .help-options{\n width:min(520px,94%);\n display:none;\n grid-template-columns:repeat(3,1fr);\n gap:10px;\n margin-top:14px;\n }\n .help-options.show{display:grid}\n .help-choice{\n border:3px solid #dcd0ff;\n background:#fff;\n border-radius:18px;\n padding:14px 8px;\n font-size:24px;\n font-weight:1000;\n color:#5d4790;\n cursor:pointer;\n transition:.18s;\n }\n .help-choice:hover{\n transform:translateY(-2px);\n border-color:#9f7cff;\n }\n .help-choice.correct{\n background:#e8fff3;\n border-color:#54c889;\n color:#17724d;\n }\n .help-choice.wrong{\n background:#fff0f2;\n border-color:#ff7f90;\n color:#b83e52;\n }\n\n .support-box{\n width:min(520px,94%);\n margin-top:14px;\n padding:16px;\n border-radius:20px;\n background:#fff8dd;\n border:3px solid #ffe08a;\n text-align:left;\n display:none;\n }\n .support-box.show{display:block}\n .support-title{\n font-size:20px;\n font-weight:1000;\n color:#9a6b00;\n margin-bottom:8px;\n text-align:center;\n }\n .support-line{\n font-size:18px;\n line-height:1.5;\n margin:6px 0;\n }\n .mini-table{\n display:grid;\n grid-template-columns:repeat(5,1fr);\n gap:6px;\n margin-top:10px;\n }\n .mini-table div{\n background:white;\n border:2px solid #ffe3a1;\n border-radius:10px;\n padding:7px 4px;\n text-align:center;\n font-weight:900;\n }\n\n @media(max-width:760px){\n .topbar{grid-template-columns:1fr 1fr}\n .title{grid-column:1\/-1;text-align:center}\n .game-grid{grid-template-columns:1fr}\n .tables{grid-template-columns:repeat(3,1fr)}\n .question-box{min-height:320px}\n }\n<\/style>\n<\/head>\n<body>\n<div class=\"sparkle\" style=\"left:4%;top:18%\">\u2b50<\/div>\n<div class=\"sparkle\" style=\"right:6%;top:28%\">\ud83c\udf08<\/div>\n<div class=\"sparkle\" style=\"left:8%;bottom:10%\">\u2728<\/div>\n<div class=\"sparkle\" style=\"right:10%;bottom:8%\">\ud83d\udc96<\/div>\n\n<div class=\"wrap\">\n <div class=\"topbar\">\n <div class=\"title\">\ud83c\udf1f La Aventura de Aitana<\/div>\n <div class=\"pill stars\">\u2b50 <span id=\"starsTop\">0<\/span><\/div>\n <div class=\"pill money\">\ud83d\udc37 $<span id=\"moneyTop\">0<\/span> pesos<\/div>\n <\/div>\n\n <div class=\"card screen active\" id=\"startScreen\">\n <div class=\"hero\">\n <div class=\"emoji\">\ud83d\udc67\ud83c\udf92\u2728<\/div>\n <h1>\u00a1Aitana, aprende y gana monedas!<\/h1>\n <p class=\"muted\">Aitana, cada respuesta correcta te da una recompensa de <b>$1 a $5 pesos<\/b> para tu alcanc\u00eda virtual. \ud83d\udc96<\/p>\n\n <h3>Elige las tablas que quieres practicar:<\/h3>\n <div class=\"tables\" id=\"tables\"><\/div>\n\n <div style=\"display:flex;gap:10px;justify-content:center;flex-wrap:wrap\">\n <button class=\"btn btn-soft\" id=\"selectAll\">Seleccionar todas<\/button>\n <button class=\"btn btn-main\" id=\"startBtn\">\u00a1Comenzar aventura! \ud83d\ude80<\/button>\n <button class=\"btn btn-soft\" id=\"resetProgressBtn\">Reiniciar ejercicios \ud83d\udcda<\/button>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"screen\" id=\"gameScreen\">\n <div class=\"game-grid\">\n <div class=\"card question-box\">\n <div class=\"level\">Reto <span id=\"roundNow\">1<\/span> \u2022 sin repetir hasta aprender<\/div>\n <div class=\"question\" id=\"question\">3 \u00d7 4 = ?<\/div>\n <input id=\"answer\" class=\"answer\" type=\"number\" inputmode=\"numeric\" autocomplete=\"off\" placeholder=\"?\" \/>\n <div class=\"answer-actions\">\n <button class=\"btn btn-main\" id=\"checkBtn\">Comprobar \u2705<\/button>\n <button class=\"btn btn-soft\" id=\"helpBtn\">Mostrar ayuda \ud83d\udca1<\/button>\n <\/div>\n <div class=\"help-options\" id=\"helpOptions\"><\/div>\n <div class=\"feedback\" id=\"feedback\"><\/div>\n <div class=\"support-box\" id=\"supportBox\">\n <div class=\"support-title\">\ud83d\udcda Material de apoyo para Aitana<\/div>\n <div class=\"support-line\" id=\"supportAddition\"><\/div>\n <div class=\"support-line\" id=\"supportTip\"><\/div>\n <div class=\"mini-table\" id=\"supportTable\"><\/div>\n <\/div>\n <\/div>\n\n <div class=\"side\">\n <div class=\"mini\">\n <b>\ud83c\udfc1 Progreso<\/b>\n <div class=\"progress\"><div id=\"progressBar\"><\/div><\/div>\n <div style=\"margin-top:8px\"><span id=\"correctCount\">0<\/span> correctas<\/div>\n <\/div>\n <div class=\"mini\">\n <div class=\"pig\">\ud83d\udc37<\/div>\n <div style=\"text-align:center\">\n <b>Mi alcanc\u00eda<\/b>\n <div style=\"font-size:30px;font-weight:1000;color:#179364\">$<span id=\"moneySide\">0<\/span><\/div>\n <div class=\"muted\">pesos ganados<\/div>\n <\/div>\n <\/div>\n <div class=\"mini\">\n <b>\ud83d\udca1 Pista<\/b>\n <p id=\"hint\" class=\"muted\" style=\"margin-bottom:0\">Piensa en sumar el mismo n\u00famero varias veces.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"card screen\" id=\"endScreen\">\n <div class=\"summary\">\n <div style=\"font-size:78px\">\ud83c\udfc6\ud83c\udf89<\/div>\n <h1>\u00a1Aitana, misi\u00f3n cumplida! \ud83c\udf89<\/h1>\n <p>Terminaste tus retos. Los ejercicios dif\u00edciles se repiten hasta aprenderlos.<\/p>\n <div class=\"big-money\">\ud83d\udc37 $<span id=\"finalMoney\">0<\/span> pesos<\/div>\n <div id=\"badges\"><\/div>\n <p id=\"finalText\" style=\"font-size:20px;font-weight:900\"><\/p>\n <button class=\"btn btn-main\" id=\"againBtn\">Jugar otra vez \ud83d\udd04<\/button>\n <button class=\"btn btn-soft\" id=\"resetBtn\" style=\"margin-left:8px\">Vaciar alcanc\u00eda<\/button>\n <\/div>\n <\/div>\n\n <div class=\"footer-note\">\n Juego educativo. La recompensa mostrada es un contador virtual para que un adulto decida c\u00f3mo entregarla.\n <\/div>\n<\/div>\n\n<div class=\"reward-pop\" id=\"rewardPop\">+$3 \ud83d\udcb0<\/div>\n\n<script>\n(() => {\n const $ = (id) => document.getElementById(id);\n\n let selectedTables = new Set([2,3,4,5]);\n let round = 1;\n let correct = 0;\n let money = Number(localStorage.getItem(\"tablaMoney\") || 0);\n let stars = Number(localStorage.getItem(\"tablaStars\") || 0);\n let current = {a:2,b:2,result:4};\n let locked = false;\n let helpVisible = false;\n let completedQuestions = new Set(JSON.parse(localStorage.getItem(\"aitanaCompletedQuestions\") || \"[]\"));\n let sessionQuestions = [];\n\n function updateTotals(){\n $(\"moneyTop\").textContent = money;\n $(\"moneySide\").textContent = money;\n $(\"starsTop\").textContent = stars;\n localStorage.setItem(\"tablaMoney\", money);\n localStorage.setItem(\"tablaStars\", stars);\n }\n\n function beep(type=\"ok\"){\n try{\n const AudioCtx = window.AudioContext || window.webkitAudioContext;\n const ctx = new AudioCtx();\n const o = ctx.createOscillator();\n const g = ctx.createGain();\n o.connect(g); g.connect(ctx.destination);\n o.type = \"sine\";\n o.frequency.value = type===\"ok\" ? 660 : 220;\n g.gain.setValueAtTime(0.08, ctx.currentTime);\n g.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.22);\n o.start();\n o.stop(ctx.currentTime + 0.22);\n }catch(e){}\n }\n\n function buildTables(){\n const box = $(\"tables\");\n box.innerHTML = \"\";\n for(let n=1;n<=10;n++){\n const b = document.createElement(\"button\");\n b.className = \"table-choice\" + (selectedTables.has(n) ? \" selected\" : \"\");\n b.textContent = \"Tabla \" + n;\n b.onclick = () => {\n if(selectedTables.has(n)) selectedTables.delete(n);\n else selectedTables.add(n);\n if(selectedTables.size === 0) selectedTables.add(n);\n buildTables();\n };\n box.appendChild(b);\n }\n }\n\n function showScreen(id){\n document.querySelectorAll(\".screen\").forEach(s => s.classList.remove(\"active\"));\n $(id).classList.add(\"active\");\n }\n\n function makeKey(a,b){\n return `${a}x${b}`;\n }\n\n function saveCompleted(){\n localStorage.setItem(\"aitanaCompletedQuestions\", JSON.stringify([...completedQuestions]));\n }\n\n function buildQuestionPool(){\n const pool = [];\n [...selectedTables].forEach(a => {\n for(let b=1;b<=10;b++){\n const key = makeKey(a,b);\n if(!completedQuestions.has(key)){\n pool.push({a,b,result:a*b,key});\n }\n }\n });\n return pool;\n }\n\n function buildSupport(a,b){\n const addition = Array(b).fill(a).join(\" + \");\n $(\"supportAddition\").innerHTML = `<b>${a} \u00d7 ${b}<\/b> significa sumar ${a}, ${b} veces:<br>${addition} = <b>${a*b}<\/b>`;\n $(\"supportTip\").textContent = `Truco: cuenta de ${a} en ${a}: ${Array.from({length:b},(_,i)=>a*(i+1)).join(\", \")}.`;\n const table = $(\"supportTable\");\n table.innerHTML = \"\";\n for(let i=1;i<=10;i++){\n const cell = document.createElement(\"div\");\n cell.textContent = `${a}\u00d7${i}=${a*i}`;\n table.appendChild(cell);\n }\n $(\"supportBox\").classList.add(\"show\");\n }\n\n\n function shuffle(arr){\n for(let i=arr.length-1;i>0;i--){\n const j = Math.floor(Math.random()*(i+1));\n [arr[i],arr[j]] = [arr[j],arr[i]];\n }\n return arr;\n }\n\n function buildHelpOptions(){\n const correctAnswer = current.result;\n const distractors = new Set();\n\n \/\/ Build believable nearby answers, avoiding duplicates and negatives.\n const candidates = [\n correctAnswer + current.a,\n correctAnswer - current.a,\n correctAnswer + current.b,\n correctAnswer - current.b,\n correctAnswer + 1,\n correctAnswer - 1,\n correctAnswer + 2,\n correctAnswer - 2\n ].filter(n => n >= 0 && n !== correctAnswer);\n\n shuffle(candidates);\n for(const n of candidates){\n distractors.add(n);\n if(distractors.size >= 2) break;\n }\n\n while(distractors.size < 2){\n const n = Math.max(0, correctAnswer + Math.floor(Math.random()*9)-4);\n if(n !== correctAnswer) distractors.add(n);\n }\n\n const choices = shuffle([correctAnswer, ...distractors]);\n const box = $(\"helpOptions\");\n box.innerHTML = \"\";\n\n choices.forEach(value => {\n const btn = document.createElement(\"button\");\n btn.className = \"help-choice\";\n btn.textContent = value;\n btn.onclick = () => chooseHelpAnswer(value, btn);\n box.appendChild(btn);\n });\n\n helpVisible = true;\n box.classList.add(\"show\");\n $(\"helpBtn\").textContent = \"Ocultar ayuda \ud83d\ude48\";\n }\n\n function hideHelpOptions(){\n helpVisible = false;\n $(\"helpOptions\").classList.remove(\"show\");\n $(\"helpBtn\").textContent = \"Mostrar ayuda \ud83d\udca1\";\n }\n\n function requeueCurrent(){\n const key = current.key || makeKey(current.a,current.b);\n if(!completedQuestions.has(key)){\n \/\/ Insert later, not immediately, so Aitana sees other exercises first.\n const item = {a:current.a,b:current.b,result:current.result,key};\n const insertAt = Math.min(\n sessionQuestions.length,\n Math.max(2, Math.floor(sessionQuestions.length * 0.6))\n );\n sessionQuestions.splice(insertAt, 0, item);\n }\n }\n\n function markCorrectAndReward(){\n const reward = Math.floor(Math.random()*5)+1;\n money += reward;\n stars += 1;\n correct += 1;\n completedQuestions.add(current.key || makeKey(current.a,current.b));\n saveCompleted();\n updateTotals();\n $(\"correctCount\").textContent = correct;\n $(\"feedback\").textContent = `\u00a1Muy bien, Aitana! \ud83c\udf89 Ganaste $${reward} pesos`;\n $(\"feedback\").style.color = \"#179364\";\n $(\"supportBox\").classList.remove(\"show\");\n rewardAnimation(reward);\n beep(\"ok\");\n }\n\n function chooseHelpAnswer(value, btn){\n if(locked) return;\n locked = true;\n $(\"answer\").disabled = true;\n $(\"checkBtn\").disabled = true;\n $(\"helpBtn\").disabled = true;\n\n const buttons = [...document.querySelectorAll(\".help-choice\")];\n\n if(value === current.result){\n btn.classList.add(\"correct\");\n markCorrectAndReward();\n\n setTimeout(() => {\n if(round >= 10 && sessionQuestions.length === 0) finishGame();\n else{\n round++;\n newQuestion();\n }\n }, 1200);\n }else{\n btn.classList.add(\"wrong\");\n buttons.forEach(b => {\n if(Number(b.textContent) === current.result) b.classList.add(\"correct\");\n });\n\n money = Math.max(0, money - 1);\n updateTotals();\n $(\"feedback\").textContent = `Esa no era, Aitana. Se descont\u00f3 $1 peso. Esta pregunta volver\u00e1 m\u00e1s adelante.`;\n $(\"feedback\").style.color = \"#d65367\";\n buildSupport(current.a,current.b);\n requeueCurrent();\n beep(\"bad\");\n\n setTimeout(() => {\n round++;\n newQuestion();\n }, 3200);\n }\n }\n\n function newQuestion(){\n locked = false;\n helpVisible = false;\n $(\"helpBtn\").disabled = false;\n $(\"helpBtn\").textContent = \"Mostrar ayuda \ud83d\udca1\";\n $(\"helpOptions\").classList.remove(\"show\");\n $(\"helpOptions\").innerHTML = \"\";\n\n if(sessionQuestions.length === 0){\n sessionQuestions = buildQuestionPool();\n }\n\n if(sessionQuestions.length === 0){\n $(\"finalMoney\").textContent = money;\n $(\"badges\").innerHTML = '<span class=\"badge\">\ud83c\udfc6 \u00a1Todas completadas!<\/span>';\n $(\"finalText\").textContent = \"Aitana ya termin\u00f3 todos los ejercicios de las tablas seleccionadas. Puedes elegir otras tablas o reiniciar los ejercicios.\";\n showScreen(\"endScreen\");\n return;\n }\n\n const idx = Math.floor(Math.random()*sessionQuestions.length);\n current = sessionQuestions.splice(idx,1)[0];\n\n $(\"question\").textContent = `${current.a} \u00d7 ${current.b} = ?`;\n $(\"answer\").value = \"\";\n $(\"answer\").disabled = false;\n $(\"checkBtn\").disabled = false;\n $(\"feedback\").textContent = \"\";\n $(\"supportBox\").classList.remove(\"show\");\n $(\"roundNow\").textContent = round;\n $(\"progressBar\").style.width = (Math.min(round-1,10)\/10*100) + \"%\";\n $(\"hint\").textContent = `Pista: ${current.a} \u00d7 ${current.b} significa sumar ${current.a}, ${current.b} veces.`;\n setTimeout(()=>$(\"answer\").focus(),100);\n }\n\n function rewardAnimation(amount){\n const el = $(\"rewardPop\");\n el.textContent = `+$${amount} \ud83d\udcb0`;\n el.classList.remove(\"show\");\n void el.offsetWidth;\n el.classList.add(\"show\");\n }\n\n function checkAnswer(){\n if(locked) return;\n const val = Number($(\"answer\").value);\n if($(\"answer\").value.trim()===\"\"){\n $(\"feedback\").textContent = \"Escribe tu respuesta \ud83d\ude0a\";\n $(\"feedback\").style.color = \"#8c6cff\";\n return;\n }\n\n locked = true;\n $(\"answer\").disabled = true;\n $(\"checkBtn\").disabled = true;\n $(\"helpBtn\").disabled = true;\n\n if(val === current.result){\n markCorrectAndReward();\n\n $(\"progressBar\").style.width = (Math.min(round,10)\/10*100) + \"%\";\n\n setTimeout(() => {\n if(round >= 10 && sessionQuestions.length === 0) finishGame();\n else{\n round++;\n newQuestion();\n }\n }, 1200);\n }else{\n money = Math.max(0, money - 1);\n updateTotals();\n $(\"feedback\").textContent = `Casi, Aitana \ud83d\ude0a Se descont\u00f3 $1 peso. Esta pregunta volver\u00e1 m\u00e1s adelante.`;\n $(\"feedback\").style.color = \"#d65367\";\n buildSupport(current.a,current.b);\n requeueCurrent();\n beep(\"bad\");\n\n $(\"progressBar\").style.width = (Math.min(round,10)\/10*100) + \"%\";\n\n setTimeout(() => {\n round++;\n newQuestion();\n }, 3500);\n }\n }\n\n function finishGame(){\n $(\"finalMoney\").textContent = money;\n const badges = $(\"badges\");\n badges.innerHTML = \"\";\n let text = \"\";\n if(correct === 10){\n badges.innerHTML = '<span class=\"badge\">\ud83c\udf1f Maestra de tablas<\/span><span class=\"badge\">\ud83d\udc51 10\/10<\/span>';\n text = \"\u00a1Perfecto, Aitana! Respondiste todo correctamente.\";\n }else if(correct >= 8){\n badges.innerHTML = '<span class=\"badge\">\ud83e\udd84 S\u00faper matem\u00e1tica<\/span>';\n text = `\u00a1Excelente, Aitana! Tuviste ${correct} de 10 correctas.`;\n }else if(correct >= 6){\n badges.innerHTML = '<span class=\"badge\">\ud83c\udf08 Gran avance<\/span>';\n text = `\u00a1Vas muy bien, Aitana! Tuviste ${correct} de 10 correctas.`;\n }else{\n badges.innerHTML = '<span class=\"badge\">\ud83d\udc96 Nunca te rindas<\/span>';\n text = `Aitana, hoy practicaste mucho. Tuviste ${correct} de 10 correctas.`;\n }\n $(\"finalText\").textContent = text;\n showScreen(\"endScreen\");\n }\n\n $(\"selectAll\").onclick = () => {\n selectedTables = new Set([1,2,3,4,5,6,7,8,9,10]);\n buildTables();\n };\n\n $(\"startBtn\").onclick = () => {\n round = 1;\n correct = 0;\n sessionQuestions = [];\n $(\"correctCount\").textContent = 0;\n\n const remaining = buildQuestionPool().length;\n if(remaining === 0){\n alert(\"Aitana ya complet\u00f3 todos los ejercicios de las tablas seleccionadas. Elige otras tablas o pulsa \u201cReiniciar ejercicios\u201d.\");\n return;\n }\n\n showScreen(\"gameScreen\");\n newQuestion();\n };\n\n\n $(\"helpBtn\").onclick = () => {\n if(locked) return;\n if(helpVisible) hideHelpOptions();\n else buildHelpOptions();\n };\n\n $(\"checkBtn\").onclick = checkAnswer;\n $(\"answer\").addEventListener(\"keydown\", (e)=>{\n if(e.key===\"Enter\") checkAnswer();\n });\n\n\n $(\"resetProgressBtn\").onclick = () => {\n if(confirm(\"\u00bfQuieres permitir que Aitana vuelva a practicar todos los ejercicios desde el principio?\")){\n completedQuestions.clear();\n sessionQuestions = [];\n localStorage.removeItem(\"aitanaCompletedQuestions\");\n alert(\"\u00a1Listo! Todos los ejercicios vuelven a estar disponibles. \ud83d\udcda\");\n }\n };\n\n $(\"againBtn\").onclick = () => {\n showScreen(\"startScreen\");\n };\n\n $(\"resetBtn\").onclick = () => {\n if(confirm(\"\u00bfSeguro que quieres vaciar la alcanc\u00eda virtual?\")){\n money = 0;\n stars = 0;\n updateTotals();\n $(\"finalMoney\").textContent = 0;\n }\n };\n\n buildTables();\n updateTotals();\n})();\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>La Aventura de Aitana \ud83d\udc96 \u2b50 \ud83c\udf08 \u2728 \ud83d\udc96 \ud83c\udf1f La Aventura de Aitana \u2b50 0 \ud83d\udc37 $0 pesos \ud83d\udc67\ud83c\udf92\u2728 \u00a1Aitana, aprende y gana monedas! Aitana, cada respuesta correcta te da una recompensa de $1 a $5 pesos para tu alcanc\u00eda virtual. \ud83d\udc96 Elige las tablas que quieres practicar: Seleccionar todas \u00a1Comenzar aventura! \ud83d\ude80 Reiniciar […]<\/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-20126","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/tpvking.com\/index.php?rest_route=\/wp\/v2\/pages\/20126","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tpvking.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tpvking.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tpvking.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tpvking.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=20126"}],"version-history":[{"count":3,"href":"https:\/\/tpvking.com\/index.php?rest_route=\/wp\/v2\/pages\/20126\/revisions"}],"predecessor-version":[{"id":20129,"href":"https:\/\/tpvking.com\/index.php?rest_route=\/wp\/v2\/pages\/20126\/revisions\/20129"}],"wp:attachment":[{"href":"https:\/\/tpvking.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=20126"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}