<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Titi Visual Quest 💗</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap 5 CDN -->
<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: 1.05rem;
}
.correct {
background-color: #cfffda !important;
border-color: #9be9b5 !important;
}
.wrong {
background-color: #ffd1d1 !important;
border-color: #ffb1b1 !important;
}
.topic-pill {
background: #ffbde0;
color: #5a0040;
display: inline-block;
padding: 4px 10px;
border-radius: 999px;
font-size: .7rem;
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 shadow-lg border-0 rounded-4">
<div class="card-body">
<h1 class="hk-title h4 text-center mb-2">🌸 Titi Visual Quest 🌸</h1>
<p class="text-center mb-3">Hello Kitty x K-Pop School</p>
<div class="mb-3">
<div class="progress" role="progressbar" aria-label="Progreso" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
<div id="progressBar" class="progress-bar bg-danger" style="width: 0%"></div>
</div>
</div>
<span id="topic" class="topic-pill">Tema</span>
<h2 id="question" class="h5 mb-3">Pregunta aquí</h2>
<div id="options" class="d-grid gap-2 mb-3"></div>
<button id="nextBtn" class="btn btn-lg btn-pink w-100 d-none" style="background:#ff8bc9;">✨ Siguiente</button>
<p id="feedback" class="fw-bold mt-3 min-vh-1"></p>
<p id="score" class="small text-muted mb-0"></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">Eres una idol de las mates 🩷</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" onclick="restartGame()">Volver a jugar</button>
</div>
</div>
</div>
</div>
<!-- Bootstrap JS (para el modal) -->
<script src="https://cdn.jsdelivr.net/npm/
[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script>
// mismas preguntas visuales + temario
const questions = [
{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:"Números", q:"23 → el 2 vale…", opts:["20","2","200"], a:0},
{topic:"Números", q:"45 → el 5 es…", opts:["unidades","decenas","mes"], a:0},
{topic:"Ciencias", q:"Para vivir necesitamos…", opts:["💧 agua","📺 tv","🧸 juguete"], a:0},
{topic:"Planta", q:"Parte que está abajo:", opts:["🌱 raíz","🌸 flor","🍃 hoja"], a:0},
{topic:"Planta", q:"Parte verde que hace comida:", opts:["🍃 hoja","🌸 flor","🌱 raíz"], a:0},
{topic:"Estaciones", q:"¿Invierno?", opts:["☃️","🌸","☀️"], a:0},
{topic:"Estaciones", q:"¿Primavera?", opts:["🌸","🍁","❄️"], a:0},
{topic:"Estaciones", q:"¿Verano?", opts:["☀️","🎃","☃️"], a:0},
{topic:"Luna", q:"Luna llena:", opts:["🌕","🌘","🌒"], a:0},
{topic:"Calendario", q:"¿Qué usamos para día/mes?", opts:["📅 calendario","🧃","🧸"], a:0},
{topic:"Mates", q:"2 + 3 = ?", opts:["5","4","6"], a:0},
{topic:"Mates", q:"7 − 2 = ?", opts:["5","4","3"], a:0},
{topic:"Cortesía", q:"Palabra amable:", opts:["Gracias","Oye tú","Quita"], a:0},
{topic:"Pregunta", q:"Para preguntar usamos…", opts:["¿ ?","¡ !","..."], a:0},
{topic:"México", q:"Fiesta 🇲🇽 independencia:", opts:["16 sep","24 dic","10 may"], a:0},
{topic:"Cultura", q:"La ofrenda es para…", opts:["💐 recordar","😴 dormir","🏃 correr"], a:0},
{topic:"Comida", q:"Platillo de México:", opts:["🌮","🍟","🍣"], a:0}
];
let current = 0;
let score = 0;
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 goodMsgs = ["🌈 ¡Muy bien, Titi!","🎀 ¡Respuesta kawaii!","💖 ¡Eres genial!"];
const badMsgs = ["💫 Casi casi","🌸 No pasa nada","🩵 La de arriba era"];
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 option-btn btn-light";
btn.innerHTML = `<span class="me-2">${opt}</span>`;
btn.onclick = () => checkAnswer(idx);
optsEl.appendChild(btn);
});
scoreEl.textContent = "Puntaje: " + score + " / " + questions.length;
progressEl.textContent = "Pregunta " + (current+1) + " de " + questions.length;
progressBar.style.width = ((current)/questions.length)*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 + " / " + questions.length;
if (current < questions.length - 1) {
nextBtn.classList.remove("d-none");
} else {
// final
progressBar.style.width = "100%";
document.getElementById("finalScore").textContent =
"Sacaste " + score + " de " + questions.length + " ⭐";
finishModal.show();
}
}
nextBtn.addEventListener("click", () => {
current++;
loadQuestion();
});
function restartGame() {
current = 0;
score = 0;
finishModal.hide();
loadQuestion();
}
window.restartGame = restartGame; // para el botón del modal
loadQuestion();
</script>
</body>
</html>