<aside> 💡

Este fichero te permite practicas las tablas de multiplicar de una manera divertida

</aside>

tablas-multiplicar_V1.html

tablas-multiplicar.html

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Práctica de Tablas</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="<https://cdn.jsdelivr.net/npm/[email protected]/dist/confetti.browser.min.js>"></script>

<style>
  :root { 
    --btn: linear-gradient(90deg, #ff5f6d, #ffc371);
    --ok: #4caf50;
    --fail: #e53935;
  }

  body {
    margin: 0; padding: 2px; min-height: 100vh;
    font-family: "Segoe UI", sans-serif;
    text-align: center;
    transition: background 0.6s;
  }

  #alerta {
    position: fixed; top: 0; width: 100%; padding: 16px 0;
    font-size: clamp(1.8rem, 5vw, 2.4rem);
    font-weight: bold; color: white; display: none; z-index: 9999;
  }

  h1 { margin-top: 20px; font-size: clamp(1.4rem, 4vw, 2rem); }

  .fila { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

  select, button.small {
    padding: 8px 12px; border-radius: 10px; border: none; font-size: 1.1rem; cursor: pointer;
  }
  select { box-shadow: inset 0 0 5px rgba(0,0,0,0.25); }
  button.small { background: var(--btn); color: white; font-weight: bold; }

  #pregunta { margin-top: 25px; font-size: clamp(4rem, 13vw, 7rem); font-weight: bold; }

  input {
    width: 70%; max-width: 300px; padding: 14px; margin-top: 18px;
    font-size: 1.6rem; border-radius: 14px; border: none; text-align: center;
    box-shadow: inset 0 0 6px rgba(0,0,0,0.25);
  }

  #btnComprobar {
    width: 70%; max-width: 300px; padding: 12px; margin-top: 15px;
    border-radius: 14px; background: var(--btn); border: none; color: white; font-weight: bold; cursor: pointer;
  }

  #contador, #racha { margin-top: 10px; font-size: 1.5rem; font-weight: bold; }

  /* Barra tiempo */
  #tiempoBarra {
    margin: 20px auto 0 auto; width: 80%; max-width: 350px; height: 14px;
    background: rgba(255,255,255,0.4); border-radius: 10px; overflow: hidden;
  }
  #tiempoRelleno { height: 100%; width: 100%; background: linear-gradient(90deg, #6eff7a, #ffeb3b); }

  .shake { animation: shake .4s; }
  @keyframes shake { 25%{transform: translateX(-6px);} 50%{transform: translateX(6px);} 75%{transform: translateX(-6px);} }

  /* MODAL */
  #modal-bg {
    position: fixed; inset: 0; background: rgba(0,0,0,0.45);
    display: none; justify-content: center; align-items: center; z-index: 10000;
  }
  #modal {
    background: white; padding: 35px; border-radius: 20px; width: 85%; max-width: 400px;
    font-size: 1.6rem; font-weight: bold;
  }
  #modal button {
    margin-top: 20px; padding: 12px 18px; border: none;
    border-radius: 12px; font-size: 1.2rem; background: var(--btn); color: white; cursor: pointer;
  }
</style>
</head>
<body>

<div id="alerta"></div>
<div id="tiempoBarra" style="display:none"><div id="tiempoRelleno"></div></div>

<h1>Tablas de Multiplicar</h1>

<div class="fila">
  <select id="tabla"></select>
  <button id="btnNuevo" class="small">Empezar</button>
</div>

<div id="pregunta">Pulsa empezar</div>

<input type="number" id="respuesta" disabled placeholder="Tu respuesta">
<button id="btnComprobar" disabled>Comprobar</button>

<div id="contador">Aciertos: 0 — Fallos: 0</div>
<div id="racha">🔥 Racha: 0</div>

<!-- selector tiempo -->
<br>
<label style="margin-top:10px; font-size:1.1rem; display:flex; justify-content:center; gap:10px; align-items:center;">
  <input type="checkbox" id="tiempoToggle" checked>
  Jugar con tiempo
</label>

<!-- MODAL FINAL -->
<div id="modal-bg">
  <div id="modal">
    <div id="finalTexto">🎉 ¡Has terminado!</div>
    <button onclick="reiniciar()">Elegir otra tabla</button>
  </div>
</div>

<script>
  const tabla=document.getElementById("tabla");
  for(let i=1;i<=12;i++) tabla.innerHTML+=`<option value="${i}">${i}</option>`;

  let a,b,ac=0,fa=0,ra=0,p=0,TOTAL=15,t;
  let modoTiempo=true;

  const tiempoToggle=document.getElementById("tiempoToggle");
  tiempoToggle.onchange=()=>modoTiempo=tiempoToggle.checked;

  const pregunta=document.getElementById("pregunta");
  const respuesta=document.getElementById("respuesta");
  const barra=document.getElementById("tiempoRelleno");
  const barraCont=document.getElementById("tiempoBarra");

  function pastel(){
    const c=["#ffd6e8","#ffe6cc","#fff7a1","#d8ffbf","#c8f1ff","#e5d8ff","#ffe3f4","#ffefcd","#f7ffc0","#d2ffd4","#d4f2ff","#eadbff"];
    document.body.style.background=c[Math.floor(Math.random()*c.length)];
  }

  function alerta(txt,col){
    const a=document.getElementById("alerta");
    a.textContent=txt; a.style.background=col; a.style.display="block";
    setTimeout(()=>a.style.display="none",1800);
  }

  function actualizar(){
    contador.textContent=`Aciertos: ${ac} — Fallos: ${fa}`;
    racha.textContent=`🔥 Racha: ${ra}`;
  }

  function tiempo(){
    barraCont.style.display="block";
    barra.style.transition="none"; barra.style.width="100%";
    setTimeout(()=>{barra.style.transition="width 15s linear"; barra.style.width="0%"},20);
    clearTimeout(t);
    t=setTimeout(()=>fallo(),15000);
  }

  function nueva(){
    if(p>=TOTAL) return fin();
    pastel();
    a=Number(tabla.value);
    b=Math.floor(Math.random()*10)+1;

    pregunta.textContent=`${a} × ${b}`;
    respuesta.value=""; respuesta.disabled=false; btnComprobar.disabled=false; respuesta.focus();

    p++;

    if(modoTiempo) tiempo();
    else { clearTimeout(t); barraCont.style.display="none"; }
  }

  function acierto(){
    ac++; ra++; actualizar();
    alerta("✅ ¡Correcto!","var(--ok)");
    confetti({particleCount:120,spread:80,origin:{y:0.6}});
    setTimeout(nueva,800);
  }

  function fallo(){
    fa++; ra=0; actualizar();
    alerta(`❌ Era ${a*b}`,"var(--fail)");
    pregunta.classList.add("shake");
    setTimeout(()=>pregunta.classList.remove("shake"),400);
    setTimeout(nueva,900);
  }

  btnComprobar.onclick=()=>{ clearTimeout(t); Number(respuesta.value)==a*b ? acierto() : fallo(); }

  btnNuevo.onclick=()=>{
    ac=fa=ra=p=0;
    actualizar();
    document.getElementById("modal-bg").style.display="none";
    nueva();
  }

  function fin(){
    respuesta.disabled=true; btnComprobar.disabled=true;
    document.getElementById("finalTexto").innerHTML=
      `🎉 ¡Has terminado!<br><br><br>✅ ${ac} correctas <br>❌ ${fa} incorrectas`;
    document.getElementById("modal-bg").style.display="flex";
  }

  function reiniciar(){ location.reload(); }
</script>
</body>
</html>