actualizacion de super indices, cambios de imagenes y textos. Asi como funcionabilidad de actividades
This commit is contained in:
+34
-40
@@ -133,7 +133,7 @@
|
||||
</div>
|
||||
<div class="col-5 text-center mb-3 animate__animated animate__flipInX">
|
||||
<div class="card bg-white border-0 rounded-3 p-3 pb-0 bx-shadow">
|
||||
<p>
|
||||
<!-- <p>
|
||||
<b class="text-lila-claro">La alimentación</b> balanceada es muy importante. Como
|
||||
parte de su tratamiento <b class="text-lila-claro">se debe personalizar</b> con base
|
||||
en sus necesidades.
|
||||
@@ -142,6 +142,14 @@
|
||||
También, es necesario
|
||||
<strong class="text-lila-claro">mantener un estilo de vida activo </strong>para el
|
||||
buen funcionamiento de músculos, huesos y corazón.
|
||||
</p> -->
|
||||
<p>
|
||||
<b class="text-lila-claro">La alimentación</b> balanceada forma parte del manejo de la enfermedad y
|
||||
<b class="text-lila-claro">puede personalizarse</b> de acuerdo con las necesidades del paciente.
|
||||
</p>
|
||||
<p>
|
||||
Asimismo, se recomienda <strong class="text-lila-claro">mantener un estilo de vida activo</strong> para
|
||||
favorecer el funcionamiento de músculos, huesos y sistema cardiovascular.<sup class="fw-bold">1</sup>
|
||||
</p>
|
||||
<div class="w-100 position-relative text-center">
|
||||
<div
|
||||
@@ -179,22 +187,15 @@
|
||||
<div class="col-8">
|
||||
<div
|
||||
class="card bg-verde-claro border-0 bx-shadow py-2 px-3"
|
||||
style="
|
||||
border-radius: 15px;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
"
|
||||
style="border-radius: 15px; border-top-left-radius: 0; border-bottom-left-radius: 0"
|
||||
>
|
||||
<div class="row justify-content-start">
|
||||
<div class="col-12">
|
||||
<div
|
||||
class="d-flex flex-row justify-content-center align-items-center gap-3 ps-4"
|
||||
>
|
||||
<div class="d-flex flex-row justify-content-center align-items-center gap-3 ps-4">
|
||||
<img src="img/book1.png" class="img-fluid" />
|
||||
<p class="mb-0">
|
||||
<strong>Instrucciones:</strong> Dé clic en la ruleta y conteste
|
||||
correctamente la pregunta acerca de su alimentación o actividad física
|
||||
para ganar los puntos.
|
||||
<strong>Instrucciones:</strong> Dé clic en la ruleta y conteste correctamente la pregunta
|
||||
acerca de su alimentación o actividad física para ganar los puntos.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -204,9 +205,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-11">
|
||||
<div
|
||||
class="row justify-content-center align-items-center animate__animated animate__slideInRight"
|
||||
>
|
||||
<div class="row justify-content-center align-items-center animate__animated animate__slideInRight">
|
||||
<div class="col-6">
|
||||
<div class="card custom-card bg-secondary border-0 shadow">
|
||||
<div class="card-body">
|
||||
@@ -305,10 +304,7 @@
|
||||
<div class="col-12 text-center mb-3">
|
||||
<h4 class="text-secondary fw-bold">Ha concluido la actividad.</h4>
|
||||
</div>
|
||||
<div
|
||||
class="col-12 text-center col-reintentar animate__animated animate__zoomIn"
|
||||
style="display: none"
|
||||
>
|
||||
<div class="col-12 text-center col-reintentar animate__animated animate__zoomIn" style="display: none">
|
||||
<div
|
||||
class="btn-reintentar rounded-3 bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite"
|
||||
onclick="CourseNav.reload()"
|
||||
@@ -411,10 +407,8 @@
|
||||
});
|
||||
return {
|
||||
pregunta: fila.pregunta.trim(),
|
||||
opciones: opciones,
|
||||
retroalimentacion_correcta: fila.retroalimentacion_correcta
|
||||
? fila.retroalimentacion_correcta.trim()
|
||||
: "",
|
||||
opciones: shuffleArray(opciones),
|
||||
retroalimentacion_correcta: fila.retroalimentacion_correcta ? fila.retroalimentacion_correcta.trim() : "",
|
||||
retroalimentacion_incorrecta: fila.retroalimentacion_incorrecta
|
||||
? fila.retroalimentacion_incorrecta.trim()
|
||||
: "",
|
||||
@@ -438,11 +432,10 @@
|
||||
|
||||
const indiceAleatorio = Math.floor(Math.random() * questions.length);
|
||||
const preguntaAleatoria = questions[indiceAleatorio];
|
||||
questions.splice(indiceAleatorio, 1); // Eliminar la pregunta usada
|
||||
const opcionesBarajadas = shuffleArray([...preguntaAleatoria.opciones]);
|
||||
questions.splice(indiceAleatorio, 1);
|
||||
|
||||
let opcionesHTML = "";
|
||||
opcionesBarajadas.forEach((opcion, index) => {
|
||||
preguntaAleatoria.opciones.forEach((opcion, index) => {
|
||||
opcionesHTML += `<div class="position-relative d-flex flex-row align-items-center gap-0 mb-2 btn-answer" data-correct="${opcion.correct}" data-puntos="${puntajeEnJuego}">
|
||||
<div class="d-flex flex-row justify-content-center align-items-center letter text-white text-center p-3">${String.fromCharCode(97 + index)}</div>
|
||||
<div class="txt-answer ps-3">${opcion.text}</div>
|
||||
@@ -468,37 +461,38 @@
|
||||
backdrop: "rgba(65, 60, 60, .95)",
|
||||
width: "50em",
|
||||
didOpen: () => {
|
||||
$(".btn-answer").click(function () {
|
||||
function handleAnswer() {
|
||||
const isCorrect = $(this).data("correct") === true;
|
||||
const puntos = $(this).data("puntos");
|
||||
|
||||
$(".btn-answer").off("click").css("pointer-events", "none");
|
||||
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(isCorrect ? good : bad);
|
||||
|
||||
if (isCorrect) {
|
||||
$(this).addClass("bg-success text-white");
|
||||
totalPuntos += puntos;
|
||||
actualizarPuntos(true);
|
||||
setTimeout(() => {
|
||||
Swal.close();
|
||||
mostrarFeedback(preguntaAleatoria);
|
||||
}, 500);
|
||||
} else {
|
||||
actualizarPuntos(false);
|
||||
$(this).addClass("bg-danger text-white");
|
||||
//$('.btn-answer[data-correct="true"]').addClass('bg-success text-white');
|
||||
setTimeout(() => {
|
||||
$(this).removeClass("bg-danger text-white");
|
||||
$(".btn-answer").css("pointer-events", "").on("click", handleAnswer);
|
||||
}, 600);
|
||||
}
|
||||
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(isCorrect ? good : bad);
|
||||
|
||||
setTimeout(() => {
|
||||
Swal.close();
|
||||
mostrarFeedback(isCorrect, preguntaAleatoria);
|
||||
}, 500);
|
||||
});
|
||||
}
|
||||
$(".btn-answer").on("click", handleAnswer);
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function mostrarFeedback(isCorrect, pregunta) {
|
||||
function mostrarFeedback(pregunta) {
|
||||
Swal.fire({
|
||||
target: document.getElementById("wrap-course-content"),
|
||||
imageUrl: isCorrect ? "img/good.png" : "img/bad.png",
|
||||
imageUrl: "img/good.png",
|
||||
showConfirmButton: true,
|
||||
customClass: {
|
||||
popup: "pop_retros bg-transparent border-0 rounded-0 shadow-none",
|
||||
|
||||
Reference in New Issue
Block a user