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
+26 -41
View File
@@ -89,17 +89,18 @@
<div class="col-12 text-center mb-3 animate__animated animate__flipInX">
<p>
La gran ventaja que le ofrece la DP es que se trata de un tratamiento
<strong class="text-lila-claro">domiciliario</strong>, sin embargo, es necesario que
acuda a todas sus consultas de seguimiento y lleve todos sus estudios de laboratorio y
registros del tratamiento que le solicite el personal de salud.
<strong class="text-lila-claro">domiciliario</strong>, sin embargo, es necesario que acuda a todas sus
consultas de seguimiento y lleve todos sus estudios de laboratorio y registros del tratamiento que le
solicite el personal de salud.
</p>
<p>
La diálisis peritoneal es una modalidad de tratamiento que puede realizarse en el domicilio. Se recomienda
acudir a las consultas de seguimiento y llevar los estudios de laboratorio y registros del tratamiento que
solicite el personal de salud.<sup class="fw-bold">8</sup>
</p>
</div>
<div
class="col-12 text-center animate__animated animate__lightSpeedInLeft animate__delay-1s mb-3"
>
<div
class="d-inline-block px-3 py-2 bg-verde-claro rounded-3 text-verde-oscuro fw-bold"
>
<div class="col-12 text-center animate__animated animate__lightSpeedInLeft animate__delay-1s mb-3">
<div class="d-inline-block px-3 py-2 bg-verde-claro rounded-3 text-verde-oscuro fw-bold">
Un aspecto importante a tomar en cuenta es el consumo y balance de líquidos.
</div>
</div>
@@ -136,9 +137,9 @@
<div class="d-flex flex-row justify-content-center align-items-center gap-3">
<img src="img/book0.png" class="img-fluid" />
<p class="mb-0">
<strong>Instrucciones:</strong> Lea cada una de las preguntas acerca del
control de líquidos y conteste correctamente. Por cada acierto obtendrá una
pieza del rompecabezas, el reto es descubrir la imagen oculta.
<strong>Instrucciones:</strong> Lea cada una de las preguntas acerca del control de líquidos y
conteste correctamente. Por cada acierto obtendrá una pieza del rompecabezas, el reto es descubrir
la imagen oculta.
</p>
</div>
</div>
@@ -156,9 +157,7 @@
class="card bg-white border-0 rounded-15 p-3 card-content-quiz animate__animated animate__zoomIn bx-shadow"
>
<div class="row justify-content-center">
<div
class="col-12 text-center fw-bold text-verde-oscuro txt-question mb-3"
></div>
<div class="col-12 text-center fw-bold text-verde-oscuro txt-question mb-3"></div>
<div class="col-12 content-answers"></div>
</div>
</div>
@@ -190,10 +189,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()"
@@ -231,7 +227,7 @@
// Ocultar elementos con id que inicie con 'pz' y agregar clase 'piece-puzzle'
svg.find('[id^="pz"]').hide().addClass("piece-puzzle");
},
"xml"
"xml",
);
}
@@ -275,7 +271,7 @@
});
return {
pregunta: fila.pregunta.trim(),
opciones: opciones,
opciones: shuffleArray(opciones),
retroalimentacion_correcta: fila.retroalimentacion_correcta.trim(),
retroalimentacion_incorrecta: fila.retroalimentacion_incorrecta.trim(),
};
@@ -299,24 +295,13 @@
return;
}
$("#card-content-quiz-rompecabezas").hide();
currentQuestion = questions[currentQuestionIndex];
$(".txt-question").text(currentQuestion.pregunta);
$(".txt-question").html(currentQuestion.pregunta);
const answersContainer = $(".content-answers");
answersContainer.empty();
setTimeout(() => {
$("#card-content-quiz-rompecabezas")
.removeClass("animate__zoomIn")
.addClass("animate__zoomIn")
.show();
}, 100);
const shuffledOpciones = shuffleArray([...currentQuestion.opciones]);
shuffledOpciones.forEach((opcion, index) => {
currentQuestion.opciones.forEach((opcion, index) => {
const btn =
$(`<div class="position-relative d-flex flex-row align-items-center gap-0 mb-2 btn-answer" data-correct="${opcion.correct}">
<div class="d-flex flex-row justify-content-center align-items-center letter text-white text-center p-3">${String.fromCharCode(97 + index)}</div>
@@ -330,10 +315,6 @@
$(".btn-answer").off("click").css("pointer-events", "none");
if (isCorrect) {
correctQuestions++;
}
CourseNav.audioController.stopAllSoundsAndPlay(isCorrect ? good : bad);
showFeedback(isCorrect);
});
@@ -354,9 +335,14 @@
width: "35em",
didClose: () => {
if (isCorrect) {
correctQuestions++;
showPuzzlePiece();
currentQuestionIndex++;
$("#card-content-quiz-rompecabezas").hide();
setTimeout(() => {
$("#card-content-quiz-rompecabezas").removeClass("animate__zoomIn").addClass("animate__zoomIn").show();
}, 100);
}
currentQuestionIndex++;
displayQuestion();
},
});
@@ -386,8 +372,7 @@
readExcelFile(urlExcelFile, function (data) {
const hojaDatos = data["Diapositiva 22"];
const preguntasProcesadas = shuffleArray(procesarPreguntas(hojaDatos));
questions =
maxQuestions === -1 ? preguntasProcesadas : preguntasProcesadas.slice(0, maxQuestions);
questions = maxQuestions === -1 ? preguntasProcesadas : preguntasProcesadas.slice(0, maxQuestions);
loadSVG();
setTimeout(() => {
displayQuestion();