Carrera Creador IA · Nivel 9 de 9 · 9-15 añosPRO

Tu mini-quiz interactivo

Botón + decisión if + opciones: tu propio juego de preguntas.

Tu Carrera · 0 de 9 nivelesse hacen en orden

Paso 1 de 6

Tu propio quiz, de cero

Hoy juntas todo: un botón que reacciona (N2), una decisión if (N3) y varias opciones. El <script> ya tiene la lógica; tú la llenas.

👉 Lee el código y reconoce el `if`. Dale Siguiente.

📖 Este paso es solo leer — toca “Siguiente”.

🌐 En inglés

function = bloque de código que se ejecuta al llamarloargument = el dato que le pasas (aquí: 1, 2 o 3)compare = ver si dos cosas son iguales (===)

💡 Esto que vas a escribir tú, también se lo puedes pedir a una IA. Aquí aprendes cómo funciona el código por dentro — y en “De idea a app” aprendes a pedírselo bien a la IA.

tu código · index.html

<!doctype html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <title></title>
  <style>
    body{font-family:system-ui,sans-serif;background:;color:#e8e8f0;min-height:100vh;margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:24px}
    h1{font-size:30px;color:}
    button{font-size:17px;padding:11px 18px;margin:4px;border:0;border-radius:12px;cursor:pointer;background:#4dffd6;color:#07080f;font-weight:700}
    #out{font-size:22px;font-weight:800;min-height:30px}
  </style>
</head>
<body>
  <div style="font-size:60px"></div>
  <h1>¿Cuál es la capital de Colombia?</h1>
  <div>
    <button onclick="responder(1)"></button>
    <button onclick="responder(2)"></button>
    <button onclick="responder(3)"></button>
  </div>
  <p id="out">Elige una respuesta</p>
  <script>
    // La opcion correcta la decides TU (1, 2 o 3).
    var correcta = ;
    var _v = 0;
    function responder(n){
      var out = document.getElementById('out');
      if (n === correcta) {
        out.textContent = "Correcto! Eres una maquina";
        _v++;
        try{parent.postMessage({aik:'meta',valor:_v},'*')}catch(e){}
      } else {
        out.textContent = "Casi! Intenta otra vez";
      }
    }
  </script>
  <p style="opacity:.5;font-size:13px">Hecho por mi - Academia IA Kids</p>
</body>
</html>

tu web en vivo · 15 etiquetas

← Nivel 8 Volver al inicio de la Carrera →