Kiara-2025/ursoIA_newton.html

## ursoIA_newton.html
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Urso IA - Leyes de Newton</title>
  <style>
    body {
      font-family: 'Segoe UI', sans-serif;
      background-color: #f0f4f8;
      margin: 0;
      padding: 0;
    }
    .chatbox {
      max-width: 600px;
      margin: 30px auto;
      background: white;
      border-radius: 15px;
      padding: 20px;
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }
    .bubble {
      background: #e0f7fa;
      padding: 10px;
      margin: 10px 0;
      border-radius: 10px;
    }
    .bubble.bot {
      text-align: left;
      background: #c8e6c9;
    }
    .bubble.user {
      text-align: right;
      background: #ffe082;
    }
    .options button {
      margin: 5px;
      padding: 8px 12px;
      border: none;
      border-radius: 10px;
      background-color: #81d4fa;
      cursor: pointer;
    }
    .hidden {
      display: none;
    }
  </style>
</head>
<body>
<div class="chatbox" id="chat">
  <div class="bubble bot">🐻 ¡Hola, soy Urso IA! Hoy vamos a hablar de las leyes de Newton... ¡no, no el de la manzana, bueno, sí, ese mismo! 🍎</div>
  <div class="bubble bot">¿Listos para entender por qué te vas de cara cuando el micro frena de golpe?</div>
  <div class="bubble bot">Primera ley: Inercia. Todo objeto quieto quiere seguir quieto... como tú los lunes por la mañana 😴</div>
  <div class="bubble bot">Segunda ley: Fuerza = masa x aceleración. Más fuerza, más aceleración... como cuando corres por tu chamba de educación física 🏃‍♀️</div>
  <div class="bubble bot">Tercera ley: A toda acción le corresponde una reacción igual y contraria. Si pateas una pared, la pared te patea de vuelta... ¡pero más fuerte! 🧱😵</div>
  <div class="bubble bot">Ahora vamos con un mini quiz para ver si captaste la jugada:</div>

  <div class="bubble bot">1️⃣ ¿Qué ley explica por qué te caes hacia adelante cuando el bus frena?</div>
  <div class="options" id="q1">
    <button onclick="respuesta(1, 'Primera')">Primera</button>
    <button onclick="respuesta(1, 'Segunda')">Segunda</button>
    <button onclick="respuesta(1, 'Tercera')">Tercera</button>
  </div>

  <div class="bubble bot hidden" id="r1"></div>

  <div class="bubble bot hidden" id="q2text">2️⃣ ¿Cuál de estas fórmulas representa la segunda ley de Newton?</div>
  <div class="options hidden" id="q2">
    <button onclick="respuesta(2, 'F = m * a')">F = m * a</button>
    <button onclick="respuesta(2, 'F = m + a')">F = m + a</button>
    <button onclick="respuesta(2, 'E = mc²')">E = mc²</button>
  </div>

  <div class="bubble bot hidden" id="r2"></div>

  <div class="bubble bot hidden" id="final">🎉 ¡Eso fue todo! Espero que ahora las leyes de Newton te suenen tan familiares como tus memes favoritos. ¡Nos vemos en la próxima clase con Urso IA! 🧸✨</div>
</div>

<script>
  let respuestas = {
    1: "Primera",
    2: "F = m * a"
  };

  function respuesta(num, seleccion) {
    document.getElementById(`q${num}`).classList.add("hidden");
    let rDiv = document.getElementById(`r${num}`);
    if (seleccion === respuestas[num]) {
      rDiv.innerText = "✅ ¡Correcto! Buen trabajo, Einstein de barrio 🙌";
    } else {
      rDiv.innerText = "❌ Casi... pero no. ¡Revisa esa ley otra vez!";
    }
    rDiv.classList.remove("hidden");

    if (num === 1) {
      document.getElementById("q2text").classList.remove("hidden");
      document.getElementById("q2").classList.remove("hidden");
    }
    if (num === 2) {
      document.getElementById("final").classList.remove("hidden");
    }
  }
</script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="es">
	<head>
	<meta charset="UTF-8">
	<title>Urso IA - Leyes de Newton</title>
	<style>
	body {
	font-family: 'Segoe UI', sans-serif;
	background-color: #f0f4f8;
	margin: 0;
	padding: 0;
	}
	.chatbox {
	max-width: 600px;
	margin: 30px auto;
	background: white;
	border-radius: 15px;
	padding: 20px;
	box-shadow: 0 0 10px rgba(0,0,0,0.1);
	}
	.bubble {
	background: #e0f7fa;
	padding: 10px;
	margin: 10px 0;
	border-radius: 10px;
	}
	.bubble.bot {
	text-align: left;
	background: #c8e6c9;
	}
	.bubble.user {
	text-align: right;
	background: #ffe082;
	}
	.options button {
	margin: 5px;
	padding: 8px 12px;
	border: none;
	border-radius: 10px;
	background-color: #81d4fa;
	cursor: pointer;
	}
	.hidden {
	display: none;
	}
	</style>
	</head>
	<body>
	<div class="chatbox" id="chat">
	<div class="bubble bot">🐻 ¡Hola, soy Urso IA! Hoy vamos a hablar de las leyes de Newton... ¡no, no el de la manzana, bueno, sí, ese mismo! 🍎</div>
	<div class="bubble bot">¿Listos para entender por qué te vas de cara cuando el micro frena de golpe?</div>
	<div class="bubble bot">Primera ley: Inercia. Todo objeto quieto quiere seguir quieto... como tú los lunes por la mañana 😴</div>
	<div class="bubble bot">Segunda ley: Fuerza = masa x aceleración. Más fuerza, más aceleración... como cuando corres por tu chamba de educación física 🏃‍♀️</div>
	<div class="bubble bot">Tercera ley: A toda acción le corresponde una reacción igual y contraria. Si pateas una pared, la pared te patea de vuelta... ¡pero más fuerte! 🧱😵</div>
	<div class="bubble bot">Ahora vamos con un mini quiz para ver si captaste la jugada:</div>

	<div class="bubble bot">1️⃣ ¿Qué ley explica por qué te caes hacia adelante cuando el bus frena?</div>
	<div class="options" id="q1">
	<button onclick="respuesta(1, 'Primera')">Primera</button>
	<button onclick="respuesta(1, 'Segunda')">Segunda</button>
	<button onclick="respuesta(1, 'Tercera')">Tercera</button>
	</div>

	<div class="bubble bot hidden" id="r1"></div>

	<div class="bubble bot hidden" id="q2text">2️⃣ ¿Cuál de estas fórmulas representa la segunda ley de Newton?</div>
	<div class="options hidden" id="q2">
	<button onclick="respuesta(2, 'F = m * a')">F = m * a</button>
	<button onclick="respuesta(2, 'F = m + a')">F = m + a</button>
	<button onclick="respuesta(2, 'E = mc²')">E = mc²</button>
	</div>

	<div class="bubble bot hidden" id="r2"></div>

	<div class="bubble bot hidden" id="final">🎉 ¡Eso fue todo! Espero que ahora las leyes de Newton te suenen tan familiares como tus memes favoritos. ¡Nos vemos en la próxima clase con Urso IA! 🧸✨</div>
	</div>

	<script>
	let respuestas = {
	1: "Primera",
	2: "F = m * a"
	};

	function respuesta(num, seleccion) {
	document.getElementById(`q${num}`).classList.add("hidden");
	let rDiv = document.getElementById(`r${num}`);
	if (seleccion === respuestas[num]) {
	rDiv.innerText = "✅ ¡Correcto! Buen trabajo, Einstein de barrio 🙌";
	} else {
	rDiv.innerText = "❌ Casi... pero no. ¡Revisa esa ley otra vez!";
	}
	rDiv.classList.remove("hidden");

	if (num === 1) {
	document.getElementById("q2text").classList.remove("hidden");
	document.getElementById("q2").classList.remove("hidden");
	}
	if (num === 2) {
	document.getElementById("final").classList.remove("hidden");
	}
	}
	</script>
	</body>
	</html>