<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>🩷 Examen Kawaii de Titi – 40 reactivos</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/
[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
body{
background:linear-gradient(180deg,#ffe1f3,#fff);
font-family:"Comic Sans MS",system-ui,sans-serif;
}
.hk-title{color:#ff5fa2;}
.option-btn{text-align:left;font-size:1rem;}
.correct{background:#cfffda !important;border-color:#a9f3bf !important;}
.wrong{background:#ffd1d1 !important;border-color:#ffb4b4 !important;}
.topic-pill{
background:#ffbde0;color:#5a0040;padding:3px 12px;border-radius:999px;
font-size:.7rem;display:inline-block;margin-bottom:.5rem;
}
</style>
</head>
<body class="py-4">
<div class="container">
<div class="row justify-content-center">
<div class="col-11 col-md-6">
<div class="card rounded-4 shadow border-0">
<div class="card-body">
<h1 class="hk-title h4 text-center mb-2">🩷 Examen Kawaii de Titi 🩷</h1>
<p class="text-center mb-3">2.º de primaria · Nov–Dic · escuela federal</p>
<!-- Progreso -->
<div class="progress mb-3">
<div id="progressBar" class="progress-bar bg-danger" style="width:0%"></div>
</div>
<span id="topic" class="topic-pill">Tema</span>
<h2 id="question" class="h5 mb-3">Pregunta</h2>
<div id="options" class="d-grid gap-2 mb-3"></div>
<button id="nextBtn" class="btn w-100 d-none" style="background:#ff8bc9;">Siguiente ✨</button>
<p id="feedback" class="fw-bold mt-3"></p>
<p id="score" class="small text-muted"></p>
<p id="progressText" class="small text-muted"></p>
</div>
</div>
</div>
</div>
</div>
<!-- Modal final -->
<div class="modal fade" id="finishModal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content rounded-4">
<div class="modal-header">
<h5 class="modal-title">🎉 ¡Terminaste, Titi!</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
</div>
<div class="modal-body">
<p id="finalScore">Resultado</p>
<p class="small text-muted mb-0">Puedes volver a hacerlo para sacar 100 🩷</p>
</div>
<div class="modal-footer">
<button class="btn btn-primary" onclick="restartExam()">Volver a empezar</button>
</div>
</div>
</div>
</div>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/
[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script>
// 40 reactivos basados en tus fotos (sin operaciones)
const questions = [
// 1-4 figuras / recursos
{topic:"Figuras", q:"¿Cuál es el círculo?", opts:["🔴","🔺","🟦"], a:0},
{topic:"Figuras", q:"¿Cuál es el triángulo?", opts:["🔺","🟣","⚪"], a:0},
{topic:"Figuras", q:"¿Cuál tiene 4 lados?", opts:["🟦","🔺","⚪"], a:0},
{topic:"Ciencias", q:"Los seres vivos necesitan…", opts:["💧 agua y comida","🎮 videojuegos","📺 tele"], a:0},
// 5-10 planta, estaciones, luna
{topic:"Planta", q:"Parte que está bajo la tierra:", opts:["🌱 raíz","🌸 flor","🍃 hoja"], a:0},
{topic:"Planta", q:"Parte que hace comida con el sol:", opts:["🍃 hoja","🌱 raíz","🌸 flor"], a:0},
{topic:"Estaciones", q:"¿En qué estación hace frío?", opts:["❄️ invierno","☀️ verano","🌸 primavera"], a:0},
{topic:"Estaciones", q:"¿En qué estación hay flores?", opts:["🌸 primavera","🍁 otoño","❄️ invierno"], a:0},
{topic:"Luna", q:"Luna llena es…", opts:["🌕","🌑","🌓"], a:0},
{topic:"Calendario", q:"¿Qué usamos para saber el día?", opts:["📅 calendario","🧃 jugo","🧸 peluche"], a:0},
// 11-20 Lenguajes (lista 1)
{topic:"Signos de interrogación", q:"¿Cuál está bien?", opts:["¿Cómo estás?","¡Cómo estás!","Como estas"], a:0},
{topic:"Sinónimos", q:"Sinónimo de 'feliz':", opts:["contento","mojado","tarde"], a:0},
{topic:"Sinónimos", q:"Sinónimo de 'casa':", opts:["hogar","luna","flor"], a:0},
{topic:"Oraciones", q:"Oración correcta:", opts:["La niña lee un cuento.","Cuento lee niña la.","Lee niña cuento la."], a:0},
{topic:"Reglamento", q:"En un reglamento se escribe…", opts:["lo que sí/no se puede","un mito","una receta"], a:0},
{topic:"Reglas", q:"Regla de salón:", opts:["levantar la mano","gritar","empujar"], a:0},
{topic:"Cortesía", q:"Frase amable:", opts:["por favor","quítate","cállate"], a:0},
{topic:"Emociones", q:"Si lloro estoy…", opts:["triste","durmiendo","saltando"], a:0},
{topic:"Alegría", q:"Me da alegría…", opts:["jugar con amigos","romper la tarea","pelear"], a:0},
{topic:"Conflictos", q:"Si me peleo debo…", opts:["hablar y pedir perdón","pegar más","quitarle sus cosas"], a:0},
// 21-28 Lenguajes (leyendas, mitos, diptongos)
{topic:"Leyendas", q:"Una leyenda es…", opts:["relato antiguo de un lugar","una suma","una regla de salón"], a:0},
{topic:"Mitos", q:"Un mito explica…", opts:["algo con dioses o seres","el calendario","las plantas"], a:0},
{topic:"Diptongos", q:"¿Cuál tiene diptongo?", opts:["cielo","sol","casa"], a:0},
{topic:"Diptongos", q:"¿Cuál tiene diptongo?", opts:["tierra","sol","mesa"], a:0},
{topic:"Comprensión", q:"Si leo un cuento debo…", opts:["entender qué pasó","solo ver dibujos","romperlo"], a:0},
{topic:"Signos", q:"Los signos ¿ ? sirven para…", opts:["hacer preguntas","gritar","sumar"], a:0},
{topic:"Verbos en reglamento", q:"Verbo de reglamento:", opts:["respetar","pintura","nube"], a:0},
{topic:"Normas", q:"¿Cuál es una norma de cortesía?", opts:["decir gracias","burlarse","quitar el lugar"], a:0},
// 29-40 Ética, naturaleza y sociedad
{topic:"Niños Héroes", q:"Los Niños Héroes…", opts:["defendieron a México","bailaron k-pop","fueron astronautas"], a:0},
{topic:"Independencia", q:"Independencia de México:", opts:["16 de septiembre","5 de mayo","24 de diciembre"], a:0},
{topic:"Descubrimiento de América", q:"Llegó en 1492:", opts:["Cristóbal Colón","Benito Juárez","Miguel Hidalgo"], a:0},
{topic:"ONU", q:"La ONU busca…", opts:["paz entre países","vender dulces","hacer tarea"], a:0},
{topic:"Patrimonio cultural", q:"Es patrimonio cultural…", opts:["algo valioso que cuidamos","solo juguetes","solo deportes"], a:0},
{topic:"Manifestaciones culturales", q:"Son manifestaciones culturales…", opts:["fiestas y tradiciones","hacer planas","limpiar pupitre"], a:0},
{topic:"Danzas regionales", q:"Las danzas regionales son de…", opts:["cada estado de México","solo Corea","solo la ONU"], a:0},
{topic:"Ofrenda", q:"Ponemos ofrenda para…", opts:["recordar a los que murieron","medir cosas","aprender sumas"], a:0},
{topic:"Platillos típicos", q:"Platillo típico de México:", opts:["🌮","🍟","🍣"], a:0},
{topic:"Calendario", q:"En el calendario vemos…", opts:["días y meses","recetas","cuentos"], a:0},
{topic:"Recursos", q:"Las plantas necesitan…", opts:["🌞 sol, 💧 agua, 🌱 tierra","tele y celular","pintura"], a:0},
{topic:"Estaciones", q:"¿Cuántas estaciones del año hay?", opts:["4","3","5"], a:0}
];
let current = 0;
let score = 0;
const total = questions.length;
const topicEl = document.getElementById("topic");
const qEl = document.getElementById("question");
const optsEl = document.getElementById("options");
const fbEl = document.getElementById("feedback");
const scoreEl = document.getElementById("score");
const progressEl = document.getElementById("progressText");
const nextBtn = document.getElementById("nextBtn");
const progressBar = document.getElementById("progressBar");
const finishModal = new bootstrap.Modal(document.getElementById('finishModal'));
const finalScore = document.getElementById("finalScore");
const goodMsgs = ["🌈 ¡Muy bien, Titi!","🎀 ¡Respuesta kawaii!","💖 ¡Eres genial!","🩷 ¡Súper!"];
const badMsgs = ["💫 Casi casi","🌸 No pasa nada","🩵 La correcta era esa","✨ Intenta la que sigue"];
function loadQuestion() {
const q = questions[current];
topicEl.textContent = q.topic;
qEl.textContent = (current + 1) + ". " + q.q;
optsEl.innerHTML = "";
fbEl.textContent = "";
q.opts.forEach((opt, idx) => {
const btn = document.createElement("button");
btn.className = "btn btn-light option-btn";
btn.innerHTML = opt;
btn.onclick = () => checkAnswer(idx);
optsEl.appendChild(btn);
});
scoreEl.textContent = "Puntaje: " + score + " / " + total;
progressEl.textContent = "Pregunta " + (current + 1) + " de " + total;
progressBar.style.width = (current / total) * 100 + "%";
nextBtn.classList.add("d-none");
}
function checkAnswer(selected) {
const q = questions[current];
const buttons = optsEl.querySelectorAll("button");
buttons.forEach((b, i) => {
b.disabled = true;
if (i === q.a) b.classList.add("correct");
if (i === selected && selected !== q.a) b.classList.add("wrong");
});
if (selected === q.a) {
score++;
fbEl.textContent = goodMsgs[Math.floor(Math.random()*goodMsgs.length)];
} else {
fbEl.textContent = badMsgs[Math.floor(Math.random()*badMsgs.length)] + " ✅ " + q.opts[q.a];
}
scoreEl.textContent = "Puntaje: " + score + " / " + total;
if (current < total - 1) {
nextBtn.classList.remove("d-none");
} else {
progressBar.style.width = "100%";
finalScore.textContent = "Sacaste " + score + " de " + total + " 🩷";
finishModal.show();
}
}
nextBtn.addEventListener("click", () => {
current++;
loadQuestion();
});
function restartExam() {
current = 0;
score = 0;
finishModal.hide();
loadQuestion();
}
window.restartExam = restartExam;
loadQuestion();
</script>
</body>
</html>