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

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

Browse Source
This commit is contained in:
david.martinez
2026-06-10 23:15:23 -06:00
parent 86391ea412
commit 447954b520
21 changed files with 1095 additions and 1110 deletions
Download Patch File Download Diff File Expand all files Collapse all files
contenido/06.html
+106 -91
View File
@@ -54,35 +54,43 @@
background-position: center;
}
</style>
<div id="inicio" class='page-sco py-2 py-md-0 h-100'>
<div class='container h-100'>
<div class='row justify-content-center align-items-center h-100'>
<div class='col-11'>
<div class='row justify-content-center'>
<div id="inicio" class="page-sco py-2 py-md-0 h-100">
<div class="container h-100">
<div class="row justify-content-center align-items-center h-100">
<div class="col-11">
<div class="row justify-content-center">
<div class="col-12 text-center animate__animated animate__bounceInDown">
<div class="position-relative d-inline-block">
<h2 class="text-primary mb-1 fw-bold">Acceso peritoneal y sus cuidados</h2>
<hr class="border border-2 border-verde-oscuro hr-style my-0 mb-3 opacity-100">
<hr class="border border-2 border-verde-oscuro hr-style my-0 mb-3 opacity-100" />
</div>
</div>
<div class="col-12">
<div class="row justify-content-center align-items-center">
<div class="col-4 text-center animate__animated animate__zoomIn">
<img src="img/06.0.png" class="img-fluid">
<img src="img/06.0.png" class="img-fluid" />
</div>
<div class="col-6">
<div class="card bg-white border-0 rounded-3 p-0 bx-shadow">
<div class="p-3 pb-0 position-relative mb-3 w-100 animate__animated animate__flipInX">
<p class="mb-0">El sitio de salida (SS) es <strong class="text-lila-claro">la piel que rodea su catéter</strong> y requiere de cuidados continuos para
mantenerse en óptimas condiciones, permitiendo que su terapia se desarrolle de forma segura.</p>
<p class="mb-0">
El sitio de salida (SS) es el área de
<strong class="text-lila-claro">la piel por donde emerge el catéter</strong> peritoneal y requiere
cuidados continuos de higiene y vigilancia para la prevención de complicaciones locales.<sup
class="fw-bold"
>4</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">
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">Descubramos más acerca de estos cuidados.</p>
</div>
<div class="position-relative w-100 text-center animate__animated animate__zoomIn animate__delay-2s">
<div
class="btn-comenzar bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite">
class="btn-comenzar bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite"
>
<h5 class="text-white fw-bold mb-0">COMENZAR ACTIVIDAD</h5>
</div>
</div>
@@ -95,15 +103,15 @@
</div>
</div>
</div>
<div id="desarrollo" class='page-sco py-2 py-md-0 h-100' style="display: none;">
<div class='container h-100'>
<div class='row justify-content-center align-items-center h-100'>
<div class='col-11'>
<div class='row justify-content-center'>
<div id="desarrollo" class="page-sco py-2 py-md-0 h-100" style="display: none">
<div class="container h-100">
<div class="row justify-content-center align-items-center h-100">
<div class="col-11">
<div class="row justify-content-center">
<div class="col-10 text-center">
<div class="position-relative d-inline-block">
<h2 class="text-primary mb-1 fw-bold">Acceso peritoneal y sus cuidados</h2>
<hr class="border border-2 border-verde-oscuro hr-style my-0 mb-3 opacity-100">
<hr class="border border-2 border-verde-oscuro hr-style my-0 mb-3 opacity-100" />
</div>
</div>
<div class="col-10 mb-3">
@@ -111,8 +119,11 @@
<div class="row justify-content-center">
<div class="col-10">
<div class="d-flex flex-row justify-content-center align-items-center gap-3">
<img src="img/book2.png" class="img-fluid">
<p class="mb-0"><strong>Instrucciones:</strong> Lea lo que opinan dos doctores sobre los cuidados del sitio de salida. Analice sus argumentos y elija quién tiene la razón.</p>
<img src="img/book2.png" class="img-fluid" />
<p class="mb-0">
<strong>Instrucciones:</strong> Lea lo que opinan dos doctores sobre los cuidados del sitio de
salida. Analice sus argumentos y elija quién tiene la razón.
</p>
</div>
</div>
</div>
@@ -133,27 +144,28 @@
</div>
</div>
</div>
<div id="cierre" class='page-sco py-2 py-md-0 h-100' style="display: none;">
<div class='container h-100'>
<div class='row justify-content-center align-items-center h-100'>
<div class='col-12'>
<div id="cierre" class="page-sco py-2 py-md-0 h-100" style="display: none">
<div class="container h-100">
<div class="row justify-content-center align-items-center h-100">
<div class="col-12">
<div class="row justify-content-center">
<div class="col-12 text-center mb-3">
<img src="img/cierre_actividad.png" class="img-fluid">
<img src="img/cierre_actividad.png" class="img-fluid" />
</div>
<div class="col-12 mb-3 text-center">
<div class="position-relative d-inline-block">
<h2 class="text-primary mb-1 fw-bold">Acceso peritoneal y sus cuidados</h2>
<hr class="border border-2 border-verde-oscuro hr-style my-0 opacity-100">
<hr class="border border-2 border-verde-oscuro hr-style my-0 opacity-100" />
</div>
</div>
<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()">
onclick="CourseNav.reload()"
>
<h5 class="text-white fw-bold mb-0">Reintentar</h5>
</div>
</div>
@@ -165,7 +177,7 @@
<script>
$(function () {
"use strict";
$('.wrap-course-content').addClass('fake');
$(".wrap-course-content").addClass("fake");
let questions;
let currentQuestionIndex = 0;
@@ -174,30 +186,30 @@
let maxQuestions = 5;
let currentFichaIndex = 0;
let questionResults = [];
const bad = CourseNav.createSound('audio/feedback-incorrect.mpeg');
const good = CourseNav.createSound('audio/feedback-correct.mpeg');
const bad = CourseNav.createSound("audio/feedback-incorrect.mpeg");
const good = CourseNav.createSound("audio/feedback-correct.mpeg");
const imgPerso = ['img/06.1.png', 'img/06.2.png'];
const urlExcelFile = 'Actividades_Manual_Vantive.xlsx';
const imgPerso = ["img/06.1.png", "img/06.2.png"];
const urlExcelFile = "Actividades_Manual_Vantive.xlsx";
$('.btn-comenzar').click(function (e) {
$(".btn-comenzar").click(function (e) {
e.preventDefault();
CourseNav.soundClick();
$('.wrap-course-content').addClass('fake1').removeClass('fake');
$('#inicio').hide();
$('#desarrollo').show();
$(".wrap-course-content").addClass("fake1").removeClass("fake");
$("#inicio").hide();
$("#desarrollo").show();
});
function readExcelFile(url, callback) {
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'arraybuffer';
xhr.open("GET", url, true);
xhr.responseType = "arraybuffer";
xhr.onload = function (e) {
var arrayBuffer = xhr.response;
var data = new Uint8Array(arrayBuffer);
var workbook = XLSX.read(data, { type: "array" });
var result = {};
workbook.SheetNames.forEach(sheetName => {
workbook.SheetNames.forEach((sheetName) => {
var sheet = workbook.Sheets[sheetName];
result[sheetName] = XLSX.utils.sheet_to_json(sheet);
});
@@ -215,22 +227,22 @@
}
function procesarPreguntas(data) {
return data.map(fila => ({
pregunta: fila.pregunta ? String(fila.pregunta).trim() : '',
opcion: fila.opcion ? String(fila.opcion).trim() : '',
opcion_c: fila.opcion_c ? String(fila.opcion_c).trim() : ''
return data.map((fila) => ({
pregunta: fila.pregunta ? String(fila.pregunta).trim() : "",
opcion: fila.opcion ? String(fila.opcion).trim() : "",
opcion_c: fila.opcion_c ? String(fila.opcion_c).trim() : "",
}));
}
function createIndicators(total) {
const container = $('.indicadores-avance');
const container = $(".indicadores-avance");
container.empty();
for (let i = 0; i < total; i++) {
const circle = $('<div class="indicator-circle"></div>');
circle.css({
'background-color': i === 0 ? '#2196F3' : '#E0E0E0'
"background-color": i === 0 ? "#2196F3" : "#E0E0E0",
});
circle.attr('data-index', i);
circle.attr("data-index", i);
container.append(circle);
}
}
@@ -251,92 +263,95 @@
<div class="btn-respuesta animate__animated animate__zoomIn" data-correct="${leftIsCorrect}">
<div class="d-flex flex-column justify-content-center align-items-center gap-0">
<img src="${shuffledImages[0]}" alt="personaje" style="z-index:1;">
<div class="card bg-verde-ceniza border-0 shadow rounded-15 pt-5 px-3 pb-3 text-center text-respuesta text-white" style="margin-top: -60px;">${leftResponse || ''}</div>
<div class="card bg-verde-ceniza border-0 shadow rounded-15 pt-5 px-3 pb-3 text-center text-respuesta text-white" style="margin-top: -60px;">${leftResponse || ""}</div>
</div>
</div>
<img src="img/06.3.png" class="img-fluid mx-2 animate__animated animate__zoomIn">
<div class="btn-respuesta animate__animated animate__zoomIn" data-correct="${!leftIsCorrect}">
<div class="d-flex flex-column justify-content-center align-items-center gap-0">
<img src="${shuffledImages[1]}" alt="personaje" style="z-index:1;">
<div class="card bg-verde-ceniza border-0 shadow rounded-15 pt-5 px-3 pb-3 text-center text-respuesta text-white" style="margin-top: -60px;">${rightResponse || ''}</div>
<div class="card bg-verde-ceniza border-0 shadow rounded-15 pt-5 px-3 pb-3 text-center text-respuesta text-white" style="margin-top: -60px;">${rightResponse || ""}</div>
</div>
</div>
`;
$('#puzzle-versus').removeClass('animate__animated animate__zoomOut').html(structure);
$("#puzzle-versus").removeClass("animate__animated animate__zoomOut").html(structure);
updateIndicators();
initializeAnswers();
}
function updateIndicators() {
$('.indicator-circle').each(function(index) {
$(".indicator-circle").each(function (index) {
if (index < currentQuestionIndex && questionResults[index] !== undefined) {
const isCorrect = questionResults[index];
$(this).css({
'background-color': 'transparent',
'background-image': `url(img/${isCorrect ? 'checkG' : 'checkB'}.png)`
"background-color": "transparent",
"background-image": `url(img/${isCorrect ? "checkG" : "checkB"}.png)`,
});
} else if (index === currentQuestionIndex) {
$(this).css({
'background-color': '#2196F3',
'background-image': 'none'
"background-color": "#2196F3",
"background-image": "none",
});
} else {
$(this).css({
'background-color': '#E0E0E0',
'background-image': 'none'
"background-color": "#E0E0E0",
"background-image": "none",
});
}
});
}
function initializeAnswers() {
$('.btn-respuesta').off('click').on('click', function() {
const isCorrect = $(this).data('correct');
$(".btn-respuesta")
.off("click")
.on("click", function () {
const isCorrect = $(this).data("correct");
CourseNav.audioController.stopAllSoundsAndPlay(isCorrect ? good : bad);
CourseNav.audioController.stopAllSoundsAndPlay(isCorrect ? good : bad);
if (isCorrect) {
correctQuestions++;
}
questionResults[currentQuestionIndex] = isCorrect;
Swal.fire({
target: document.getElementById('wrap-course-content'),
imageUrl: isCorrect ? 'img/good.png' : 'img/bad.png',
showConfirmButton: true,
customClass: {
popup: 'pop_retros bg-transparent border-0 rounded-0 shadow-none',
confirmButton: 'btn text-primary bg-lila-rosa amor fw-semibold animate__animated animate__pulse animate__infinite'
},
confirmButtonText: "Cerrar",
backdrop: "rgba(65, 60, 60, .95)",
width: "35em",
didClose: () => {
$('#puzzle-versus').addClass('animate__animated animate__zoomOut');
setTimeout(() => {
currentQuestionIndex++;
if (currentQuestionIndex < maxQuestions && currentQuestionIndex < questions.length) {
createVersusStructure();
} else {
finishActivity();
}
}, 500);
if (isCorrect) {
correctQuestions++;
}
questionResults[currentQuestionIndex] = isCorrect;
Swal.fire({
target: document.getElementById("wrap-course-content"),
imageUrl: isCorrect ? "img/good.png" : "img/bad.png",
showConfirmButton: true,
customClass: {
popup: "pop_retros bg-transparent border-0 rounded-0 shadow-none",
confirmButton:
"btn text-primary bg-lila-rosa amor fw-semibold animate__animated animate__pulse animate__infinite",
},
confirmButtonText: "Cerrar",
backdrop: "rgba(65, 60, 60, .95)",
width: "35em",
didClose: () => {
$("#puzzle-versus").addClass("animate__animated animate__zoomOut");
setTimeout(() => {
currentQuestionIndex++;
if (currentQuestionIndex < maxQuestions && currentQuestionIndex < questions.length) {
createVersusStructure();
} else {
finishActivity();
}
}, 500);
},
});
});
});
}
function finishActivity() {
const totalQuestions = Math.min(maxQuestions, questions.length);
const percentage = (correctQuestions / totalQuestions) * 100;
$('.wrap-course-content').addClass('fake2').removeClass('fake1');
$('#desarrollo').hide();
$('#cierre').show();
$(".wrap-course-content").addClass("fake2").removeClass("fake1");
$("#desarrollo").hide();
$("#cierre").show();
if (percentage < 80) {
$('.col-reintentar').show();
$(".col-reintentar").show();
}
CourseNav.setSlideVisited();