Vantive/Rotafilio_Vantive
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

completo

Browse Source
This commit is contained in:
David Martinez
2025-09-24 22:51:53 -06:00
parent b4f834f46e
commit 172b8450e4
53 changed files with 1758 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files
contenido/ruleta.html
+34 -26
View File
@@ -5,6 +5,11 @@
background-repeat: no-repeat;
}
.hr-style {
opacity: 1;
width: 52%;
}
.wruleta {
transition: transform 4s cubic-bezier(0.25, 0.1, 0.25, 1);
cursor: pointer;
@@ -15,13 +20,12 @@
}
#spin-btn {
background: linear-gradient(45deg, #ff6b6b, #ee5a24);
border: none;
color: white;
padding: 15px 30px;
font-size: 18px;
font-weight: bold;
border-radius: 50px;
border-radius: 12px;
cursor: pointer;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
@@ -129,14 +133,14 @@
<div class="row justify-content-center align-items-center h-100 m-0 g-0 p-0">
<div class="col-12 m-0 g-0 p-0">
<div class="row justify-content-center m-0 g-0 p-0 animate__animated animate__fadeInDown">
<div class="col-6 mb-2">
<div class="col-7 mb-3">
<h2 class="text-center fw-bold text-primary">Alimentación y medicación</h2>
<hr class="border border-3 border-verde-oscuro hr-style mx-auto my-0" />
</div>
</div>
<div class="row animate__animated animate__slideInLeft">
<div class="col-7">
<div class="d-flex flex-row align-items-center bg-morado-claro py-3 text-white">
<div class="d-flex flex-row align-items-center bg-morado-claro py-3 text-white rounded-15" style="border-radius: 15px; border-top-left-radius: 0; border-bottom-left-radius: 0;">
<div class="mx-3">
<img src="img/2.1.png" alt="" class="img-fluid" />
</div>
@@ -149,7 +153,7 @@
</div>
<div class="row justify-content-center align-items-center animate__animated animate__slideInRight">
<div class="col-6">
<div class="card custom-card bg-verde-pino border-0 shadow">
<div class="card custom-card bg-secondary border-0 shadow">
<div class="card-body">
<div class="row justify-content-center">
<div class="col-4 text-center">
@@ -160,7 +164,7 @@
<p class="puntos">0</p>
<div class="card flat">
<img src="img/ruleta/progress.png" alt="" class="img-fluid" />
<div class="wavance position-absolute d-flex flex-row align-items-center justify-content-start w-100" style="top: 15%">
<div class="wavance position-absolute d-flex flex-row align-items-center justify-content-start w-100" style="top: 22%">
<div class="avance"><img src="img/ruleta/pr.png" class="img-fluid" alt="" /></div>
<div class="avance"><img src="img/ruleta/pr.png" class="img-fluid" alt="" /></div>
<div class="avance"><img src="img/ruleta/pr.png" class="img-fluid" alt="" /></div>
@@ -170,10 +174,14 @@
</div>
</div>
</div>
<div class="col-12 text-center">
<div class="mt-3">
<button id="spin-btn">¡GIRAR RULETA!</button>
</div>
</div>
</div>
</div>
<div class="position-relative w-100">
<div class="row">
<div class="col-12 text-center">
<div class="mt-3">
<button id="spin-btn" class="bg-verde-oscuro text-white border border-4 border-white">¡GIRAR RULETA!</button>
</div>
</div>
</div>
@@ -251,12 +259,6 @@
const puntajeObtenido = puntajes[segmento];
// Remover puntos automáticos - solo se ganan si responde correctamente
// Marcar imagen como visitada
if (girosRealizados < maxGiros) {
avanceImages[girosRealizados].classList.add("visited");
girosRealizados++;
}
// Mostrar pregunta
setTimeout(() => {
mostrarPregunta(puntajeObtenido);
@@ -376,9 +378,16 @@
function manejarRespuesta(esCorrecta, puntajeEnJuego, pregunta) {
if (esCorrecta) {
good.play();
CourseNav.audioController.stopAllSoundsAndPlay(good);
totalPuntos += puntajeEnJuego;
puntosDisplay.textContent = totalPuntos;
// Marcar imagen como visitada solo cuando responde correctamente
if (girosRealizados < maxGiros) {
avanceImages[girosRealizados].classList.add("visited");
girosRealizados++;
}
Swal.fire({
title: "¡Correcto!",
text: `Has ganado ${puntajeEnJuego} puntos. ${pregunta.retroalimentacion_correcta}`,
@@ -387,14 +396,11 @@
confirmButtonText: "Continuar",
}).then(() => finalizarTurno());
} else {
bad.play();
Swal.fire({
title: "Incorrecto",
text: `No ganaste puntos. ${pregunta.retroalimentacion_incorrecta}`,
icon: "error",
target: document.getElementById('wrap-course-content'),
confirmButtonText: "Continuar",
}).then(() => finalizarTurno());
CourseNav.audioController.stopAllSoundsAndPlay(bad);
// Solo sonido, sin popup - no cuenta como intento
setTimeout(() => {
finalizarTurno();
}, 1000);
}
}
@@ -406,7 +412,9 @@
spinBtn.disabled = true;
spinBtn.textContent = "¡Juego Completado!";
CourseNav.setSlideVisited();
Completed();
setTimeout(() => {
Completed();
}, 300);
} else {
spinBtn.disabled = false;
spinBtn.textContent = `¡GIRAR RULETA! (${maxGiros - girosRealizados} restantes)`;