actualizacion de super indices, cambios de imagenes y textos. Asi como funcionabilidad de actividades

This commit is contained in:
2026-06-10 23:15:23 -06:00
parent 86391ea412
commit 447954b520
21 changed files with 1095 additions and 1110 deletions
+39 -60
View File
@@ -94,22 +94,23 @@
<div class="col-5 text-center mb-3 animate__animated animate__flipInX">
<div class="card bg-white border-0 rounded-3 px-0 pt-2 pb-0 bx-shadow">
<div class="position-relative w-100 px-3">
<p>
Como ha visto, la enfermedad crónica de los riñones causa signos y síntomas que,
en parte, son controlados mediante la DP, sin embargo, es necesario que se apoye
de medicamentos que solo su médico puede y debe prescribir.
<!-- <p>
Como ha visto, la enfermedad crónica de los riñones causa signos y síntomas que, en parte, son
controlados mediante la DP, sin embargo, es necesario que se apoye de medicamentos que solo su médico
puede y debe prescribir.
</p> -->
<p class="mb-0">
La enfermedad renal crónica puede presentar signos y síntomas que pueden ser manejados en parte
mediante la diálisis peritoneal. El tratamiento puede incluir el uso de medicamentos prescritos por el
médico, de acuerdo con la valoración clínica.<sup class="fw-bold">1</sup>
</p>
</div>
<div
class="position-relative w-100 bg-lila-rosa text-primary px-3 py-2 mb-3 animate__animated animate__flipInX animate__delay-1s"
>
<p class="mb-0 fw-bold text-center">
Siga las recomendaciones del personal de salud.
</p>
<p class="mb-0 fw-bold text-center">Siga las recomendaciones del personal de salud.</p>
</div>
<div
class="w-100 position-relative text-center animate__animated animate__zoomIn animate__delay-2s"
>
<div class="w-100 position-relative text-center animate__animated animate__zoomIn animate__delay-2s">
<div
class="btn-comenzar bg-verde-oscuro d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite"
>
@@ -144,9 +145,8 @@
<div class="d-flex flex-row justify-content-center align-items-center gap-3">
<img src="img/book3.png" class="img-fluid" />
<p class="mb-0">
<strong>Instrucciones:</strong> Haga clic en cada tarjeta para revelar la
pregunta acerca del manejo de medicamentos que apoyan la DP. Por cada acierto
sumará puntos.
<strong>Instrucciones:</strong> Haga clic en cada tarjeta para revelar la pregunta acerca del
manejo de medicamentos que apoyan la DP. Por cada acierto sumará puntos.
</p>
</div>
</div>
@@ -166,34 +166,19 @@
</div>
<div class="col-12">
<div class="grip-jeopardy">
<div
class="btn-question-pop animate__animated animate__pulse animate__infinite"
data-puntos="100"
>
<div class="btn-question-pop animate__animated animate__pulse animate__infinite" data-puntos="100">
<img src="img/13.0.png" class="img-fluid" />
</div>
<div
class="btn-question-pop animate__animated animate__pulse animate__infinite"
data-puntos="200"
>
<div class="btn-question-pop animate__animated animate__pulse animate__infinite" data-puntos="200">
<img src="img/13.2.png" class="img-fluid" />
</div>
<div
class="btn-question-pop animate__animated animate__pulse animate__infinite"
data-puntos="50"
>
<div class="btn-question-pop animate__animated animate__pulse animate__infinite" data-puntos="50">
<img src="img/13.1.png" class="img-fluid" />
</div>
<div
class="btn-question-pop animate__animated animate__pulse animate__infinite"
data-puntos="100"
>
<div class="btn-question-pop animate__animated animate__pulse animate__infinite" data-puntos="100">
<img src="img/13.0.png" class="img-fluid" />
</div>
<div
class="btn-question-pop animate__animated animate__pulse animate__infinite"
data-puntos="50"
>
<div class="btn-question-pop animate__animated animate__pulse animate__infinite" data-puntos="50">
<img src="img/13.1.png" class="img-fluid" />
</div>
<!-- <div
@@ -240,10 +225,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()"
@@ -309,10 +291,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()
: "",
@@ -333,10 +313,9 @@
if (questionIndex >= questions.length) return;
const pregunta = questions[questionIndex];
const opcionesBarajadas = shuffleArray([...pregunta.opciones]);
let opcionesHTML = "";
opcionesBarajadas.forEach((opcion, index) => {
pregunta.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="${puntosEnJuego}">
<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 text-start ps-3">${opcion.text}</div>
@@ -362,32 +341,36 @@
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 hover").css("pointer-events", "none");
$(".btn-answer").off("click").css("pointer-events", "none");
CourseNav.audioController.stopAllSoundsAndPlay(isCorrect ? good : bad);
if (isCorrect) {
correctQuestions++;
const puntosActuales = parseInt($("#puntos").text()) + puntos;
$("#puntos").text(puntosActuales.toString().padStart(3, "0"));
setTimeout(() => {
Swal.close();
mostrarFeedback(pregunta, questionIndex);
}, 200);
} else {
setTimeout(() => {
$(".btn-answer").css("pointer-events", "").on("click", handleAnswer);
}, 600);
}
CourseNav.audioController.stopAllSoundsAndPlay(isCorrect ? good : bad);
setTimeout(() => {
Swal.close();
mostrarFeedback(isCorrect, pregunta, questionIndex);
}, 200);
});
}
$(".btn-answer").on("click", handleAnswer);
},
});
}
function mostrarFeedback(isCorrect, pregunta, questionIndex) {
function mostrarFeedback(pregunta, questionIndex) {
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",
@@ -431,11 +414,7 @@
$(".btn-question-pop").click(function () {
const index = $(this).index();
const puntosEnJuego = parseInt($(this).data("puntos"));
if (
!$(this).hasClass("completed") &&
!$(this).hasClass("disabled") &&
index < questions.length
) {
if (!$(this).hasClass("completed") && !$(this).hasClass("disabled") && index < questions.length) {
$(this).removeClass("animate__pulse animate__infinite").addClass("disabled");
CourseNav.soundClick();
mostrarPregunta(index, puntosEnJuego);