diff --git a/config.json b/config.json index 67005dc..2a12c85 100644 --- a/config.json +++ b/config.json @@ -1,64 +1,88 @@ { - "title": "Nombre del curso", + "title": "Vantive", "modules": [ { - "title": "Introducción", + "title": "Contenido", "topics": [ { "title": "Portada", - "content": "contenido/ruleta.html" + "content": "contenido/01.html" }, { - "title": "Portada", + "title": "¿Qué son los riñones?", "content": "contenido/02.html" }, { - "title": "Navegación", + "title": "¿Cuál es el tratamiento?", "content": "contenido/03.html" }, { - "title": "Navegación", + "title": "Tipos de diálisis", "content": "contenido/04.html" }, { - "title": "Navegación", + "title": "¿Cómo funciona la diálisis peritoneal? - Glucosa", "content": "contenido/05.html" }, { - "title": "Navegación", + "title": "¿Cómo funciona la diálisis peritoneal?", "content": "contenido/06.html" }, { - "title": "Navegación", + "title": "Tipos de diálisis peritoneal", "content": "contenido/07.html" }, { - "title": "Navegación", + "title": "¿Qué necesito para poder realizar la Diálisis Peritoneal Continua Ambulatoria (DPCA)?", "content": "contenido/08.html" }, { - "title": "Navegación", + "title": "¿Qué necesito para poder realizar la Diálisis Peritoneal Automatizada (DPA)?", "content": "contenido/09.html" }, { - "title": "Navegación", + "title": "¿Qué es un catéter?", "content": "contenido/10.html" }, { - "title": "Navegación", + "title": "¿Qué es un catéter?", "content": "contenido/11.html" }, { - "title": "Navegación", + "title": "Cuidados del sitio de salida y complicaciones", "content": "contenido/12.html" }, { - "title": "Navegación", + "title": "Lavado de manos y uso correcto de cubrebocas", "content": "contenido/13.html" }, { - "title": "Navegación", + "title": "Lavado de manos y uso correcto de cubrebocas", "content": "contenido/14.html" + }, + { + "title": "Técnica Aséptica", + "content": "contenido/15.html" + }, + { + "title": "Control de líquidos", + "content": "contenido/16.html" + }, + { + "title": "Alimentación y medicación", + "content": "contenido/17.html" + }, + { + "title": "Registros", + "content": "contenido/ruleta.html" + }, + { + "title": "Consejos útiles", + "content": "contenido/18.html" + }, + { + "title": "Despedida", + "content": "contenido/19.html" } ] } diff --git a/contenido/03.html b/contenido/03.html index 3ace70e..5fd11e5 100644 --- a/contenido/03.html +++ b/contenido/03.html @@ -248,7 +248,7 @@ const html = $("#pop0").html(); Swal.fire({ html: html, - target: "body", + target: document.getElementById('wrap-course-content'), customClass: { popup: 'pop_html_style border border-3 border-primary rounded-4', confirmButton: 'btn text-white bg-primary amor fw-semibold animate__animated animate__pulse animate__infinite' diff --git a/contenido/04.html b/contenido/04.html index a16b3e6..e533345 100644 --- a/contenido/04.html +++ b/contenido/04.html @@ -314,7 +314,7 @@ const html = $("#pop0").html(); Swal.fire({ html: html, - target: "body", + target: document.getElementById('wrap-course-content'), customClass: { popup: 'pop_html_style border border-3 border-primary rounded-4', confirmButton: 'btn text-white bg-primary amor fw-semibold animate__animated animate__pulse animate__infinite' diff --git a/contenido/05.html b/contenido/05.html index 11dc408..6be109d 100644 --- a/contenido/05.html +++ b/contenido/05.html @@ -252,7 +252,7 @@ const html = $("#pop0").html(); Swal.fire({ html: html, - target: "body", + target: document.getElementById('wrap-course-content'), customClass: { popup: 'pop_html_style border border-3 border-primary rounded-4', confirmButton: 'btn text-white bg-primary amor fw-semibold animate__animated animate__pulse animate__infinite' diff --git a/contenido/06.html b/contenido/06.html index 6a6a1f7..b57360a 100644 --- a/contenido/06.html +++ b/contenido/06.html @@ -132,7 +132,7 @@ const html = $("#pop0").html(); Swal.fire({ html: html, - target: "body", + target: document.getElementById('wrap-course-content'), customClass: { popup: 'pop_html_style border border-3 border-primary rounded-4', confirmButton: 'btn text-white bg-primary amor fw-semibold animate__animated animate__pulse animate__infinite' diff --git a/contenido/07.html b/contenido/07.html index 790ab46..5728bab 100644 --- a/contenido/07.html +++ b/contenido/07.html @@ -296,7 +296,7 @@ const html = $("#pops-questions").html(); Swal.fire({ html: html, - target: "body", + target: document.getElementById('wrap-course-content'), customClass: { popup: 'pop_html_style border border-3 border-primary rounded-4', confirmButton: 'btn text-white bg-primary amor fw-semibold animate__animated animate__pulse animate__infinite' @@ -369,7 +369,7 @@ const html = $("#pop0").html(); Swal.fire({ html: html, - target: "body", + target: document.getElementById('wrap-course-content'), customClass: { popup: 'pop_html_style border border-3 border-primary rounded-4', confirmButton: 'btn text-white bg-primary amor fw-semibold animate__animated animate__pulse animate__infinite' diff --git a/contenido/08.html b/contenido/08.html index 6b0939e..bfcf7a2 100644 --- a/contenido/08.html +++ b/contenido/08.html @@ -289,7 +289,7 @@ const html = $("#retro-pop").html(); Swal.fire({ html: html, - target: "body", + target: document.getElementById('wrap-course-content'), customClass: { popup: 'pop_html_style border border-3 border-primary rounded-4', confirmButton: 'btn text-white bg-primary amor fw-semibold animate__animated animate__pulse animate__infinite' diff --git a/contenido/09.html b/contenido/09.html index 6581f16..feb897f 100644 --- a/contenido/09.html +++ b/contenido/09.html @@ -228,7 +228,7 @@ const html = $("#pop0").html(); Swal.fire({ html: html, - target: "body", + target: document.getElementById('wrap-course-content'), customClass: { popup: 'pop_html_style border border-3 border-primary rounded-4', confirmButton: 'btn text-white bg-primary amor fw-semibold animate__animated animate__pulse animate__infinite' diff --git a/contenido/11.html b/contenido/11.html index 51f0d55..6544017 100644 --- a/contenido/11.html +++ b/contenido/11.html @@ -405,7 +405,7 @@ if (i < userAnswers.length) { const img = document.createElement("img"); img.style.cssText = "width: 100%; height: 100%;"; - img.src = "img/11.good.png"; + img.src = "img/11.check.png"; indicator.appendChild(img); } else if (i === currentCardIndex) { indicator.style.cssText += "background-color: #2196F3; border-radius: 50%; color: white; font-size: 18px; font-weight: bold;"; diff --git a/contenido/12.html b/contenido/12.html index a663dd9..671805d 100644 --- a/contenido/12.html +++ b/contenido/12.html @@ -12,7 +12,20 @@ } .btn-respuesta { - max-width: 500px; + max-width: 550px; + cursor: pointer; + } + + .indicator-circle { + width: 40px; + height: 40px; + margin: 0px 8px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + font-size: 18px; + font-weight: bold; }
@@ -24,7 +37,7 @@

Cuidados del sitio de salida y complicaciones

-
+
@@ -33,8 +46,15 @@
-
-
+
+
+
+
+
+
+
+
+
@@ -96,6 +116,37 @@ return array; } + function createIndicators(total) { + const container = $('.indicadores-avance'); + container.empty(); + for (let i = 0; i < total; i++) { + const circle = $('
'); + circle.css({ + 'background-color': i === 0 ? '#2196F3' : '#E0E0E0' + }); + circle.attr('data-index', i); + container.append(circle); + } + } + + function updateIndicators() { + $('.indicator-circle').each(function(index) { + const $this = $(this); + if (index < currentQuestionIndex) { + $this.empty(); + const img = $('').attr({ + 'src': 'img/11.check.png', + 'style': 'width: 100%; height: 100%;' + }); + $this.append(img); + } else if (index === currentQuestionIndex) { + $this.css('background-color', '#2196F3').empty(); + } else { + $this.css('background-color', '#E0E0E0').empty(); + } + }); + } + function createVersusStructure() { const container = $('#puzzle-versus'); @@ -119,19 +170,24 @@
personaje -
${leftResponse || ''}
+
${leftResponse || ''}
- +
personaje -
${rightResponse || ''}
+
${rightResponse || ''}
`; container.html(structure); + container.addClass('animate__animated animate__zoomIn'); + + setTimeout(() => { + container.removeClass('animate__animated animate__zoomIn'); + }, 1000); $('.btn-respuesta').click(function() { const isCorrect = $(this).data('correct'); @@ -139,11 +195,17 @@ if (isCorrect) { feedbackcorrect.play(); currentQuestionIndex++; + updateIndicators(); + + container.addClass('animate__animated animate__zoomOut'); if (currentQuestionIndex >= versusData.length) { - checkAllCompleted(); + setTimeout(() => showResults(), 700); } else { - setTimeout(() => createVersusStructure(), 1000); + setTimeout(() => { + container.removeClass('animate__animated animate__zoomOut'); + createVersusStructure(); + }, 500); } } else { feedbackincorrect.play(); @@ -151,12 +213,25 @@ }); } + function showResults() { + $('.col-actividad').hide(); + $('.col-instrucciones').html(''); + const resultHTML = ` +
+

¡Actividad completada!

+

¡Todas las respuestas fueron correctas!

+
+ `; + $('.col-instrucciones').html(resultHTML); + setTimeout(() => checkAllCompleted(), 300); + } + function checkAllCompleted() { setTimeout(() => { const html = $("#pop0").html(); Swal.fire({ html: html, - target: "body", + target: document.getElementById('wrap-course-content'), customClass: { popup: 'pop_html_style border border-3 border-primary rounded-4', confirmButton: 'btn text-white bg-primary amor fw-semibold animate__animated animate__pulse animate__infinite' @@ -180,6 +255,7 @@ const sheetData = data[Object.keys(data)[0]]; versusData = sheetData; console.log('Datos cargados:', versusData); + createIndicators(versusData.length); createVersusStructure(); }); }); diff --git a/contenido/13.html b/contenido/13.html new file mode 100644 index 0000000..994b821 --- /dev/null +++ b/contenido/13.html @@ -0,0 +1,57 @@ + +
+
+
+
+
+
+

Lavado de manos y uso correcto de cubrebocas

+
+
+
+
+
+
+
+
+ +
+
+ +
+
+ +
+
+
+
+
+
+
+
+
+
+
+ diff --git a/contenido/14.html b/contenido/14.html new file mode 100644 index 0000000..da71037 --- /dev/null +++ b/contenido/14.html @@ -0,0 +1,191 @@ + +
+
+
+
+
+
+

Técnica correcta para higiene de manos

+
+
+
+
+
+ +

Arrastra los pasos del lavado de manos para colocarlos en el orden correcto.

+
+
+
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+

Una vez secas, tus manos son seguras.

+

El procedimiento tiene una duración total de 40-60 segundos.

+
+
+
+
+
+ diff --git a/contenido/15.html b/contenido/15.html new file mode 100644 index 0000000..3c6c804 --- /dev/null +++ b/contenido/15.html @@ -0,0 +1,280 @@ + +
+
+
+
+
+
+
+
+
+
+

Técnica Aséptica

+
+
+
+
+
+ +

Instrucciones: Observa los objetos en las tarjetas y arrástralas hacia la categoría + correcta para clasificarlas según su nivel de + limpieza: Estéril, Desinfectado, Limpio o Sucio. +

+
+
+
+
+
+
+
+
+
+
+ Estéril +
+
+
+
+
+
+
+
+
+ Desinfectado +
+
+
+
+
+
+
+
+
+ Limpio +
+
+
+
+
+
+
+
+
+ Sucio/Contaminado +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+

¡Bien hecho!

+
+
+

Has concluido la actividad.

+
+
+
+
+
+ diff --git a/contenido/16.html b/contenido/16.html new file mode 100644 index 0000000..8eb7730 --- /dev/null +++ b/contenido/16.html @@ -0,0 +1,278 @@ + +
+
+
+
+
+
+

Control de líquidos

+
+
+
+
+
+ +

Instrucciones: Lee cada una de las preguntas acerca del control de líquidos y contesta correctamente. Por cada acierto obtendrás una + pieza del rompecabezas, el reto es descubrir la imagen oculta.

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+

¡Bien hecho!

+
+
+

Has concluido la actividad.

+
+
+
+
+
+ diff --git a/contenido/17.html b/contenido/17.html new file mode 100644 index 0000000..2c45188 --- /dev/null +++ b/contenido/17.html @@ -0,0 +1,216 @@ + +
+
+
+
+
+
+

Registros

+
+
+
+
+
+ +

Instrucciones: Toma los tipos de terapia que se presentan en la caja y arrástralos hacia el registro que les corresponde.

+
+
+
+
+
+
+
+
+

Diálisis Peritoneal Continua Ambulatoria (DPCA)

+
+
+

Diálisis Peritoneal Automatizada (DPA)

+
+
+
+
+
+
+
+
+
+
+

0

+
+
+
+
+
+
+

1

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+

¡No lo olvides!

+
+
+

Siempre que acudas a la unidad de diálisis, debes llevarlos.

+
+
+
+
+
+ diff --git a/contenido/18.html b/contenido/18.html new file mode 100644 index 0000000..89bf75c --- /dev/null +++ b/contenido/18.html @@ -0,0 +1,347 @@ + +
+
+
+
+
+
+

Consejos útiles

+
+
+
+
+
+ +

Instrucciones: Da clic en cada una de las salas y contesta la pregunta correspondiente al tema para ganar los puntos.

+
+
+
+
+
+
+
+

Puntos:

+
+
+
+
+
+
+
+
+
+
+
+
+
+

Sala: Estilo de vida

+
+
+
+

Sala: Desecho de residuos

+
+
+
+

Sala: Entrega domiciliaria

+
+
+
+

Sala: Soporte técnico

+
+
+
+

Sala: Reportes

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+

¡Bien hecho!

+
+
+

Has concluido la actividad.

+
+
+
+
+
+ diff --git a/contenido/19.html b/contenido/19.html new file mode 100644 index 0000000..8899310 --- /dev/null +++ b/contenido/19.html @@ -0,0 +1,58 @@ + +
+
+
+
+
+
+
+ +
+
+
+
+
+
+

¡Felicidades!

+ +
+
+
+
+

Has terminado las actividades de la

+

Inducción al paciente en Diálisis Peritoneal.

+
+
+

¡Tu esfuerzo marca la diferencia!

+
+
+
+
+
+
+
+
+
+
+
+
+ diff --git a/contenido/ruleta.html b/contenido/ruleta.html index c3bd053..ae459ef 100644 --- a/contenido/ruleta.html +++ b/contenido/ruleta.html @@ -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 @@
-
+

Alimentación y medicación

-
+
@@ -149,7 +153,7 @@
-
+
@@ -160,7 +164,7 @@

0

-
+
@@ -170,10 +174,14 @@
-
-
- -
+
+
+
+
+
+
+
+
@@ -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)`; diff --git a/img/13.0.png b/img/13.0.png new file mode 100644 index 0000000..e2609fe Binary files /dev/null and b/img/13.0.png differ diff --git a/img/13.1.png b/img/13.1.png new file mode 100644 index 0000000..a0fc287 Binary files /dev/null and b/img/13.1.png differ diff --git a/img/13.2.png b/img/13.2.png new file mode 100644 index 0000000..dee2a03 Binary files /dev/null and b/img/13.2.png differ diff --git a/img/14.0.png b/img/14.0.png new file mode 100644 index 0000000..cd03a86 Binary files /dev/null and b/img/14.0.png differ diff --git a/img/14.1.png b/img/14.1.png new file mode 100644 index 0000000..2cba4be Binary files /dev/null and b/img/14.1.png differ diff --git a/img/14.10.png b/img/14.10.png new file mode 100644 index 0000000..e1723ef Binary files /dev/null and b/img/14.10.png differ diff --git a/img/14.11.png b/img/14.11.png new file mode 100644 index 0000000..ed88a25 Binary files /dev/null and b/img/14.11.png differ diff --git a/img/14.12.png b/img/14.12.png new file mode 100644 index 0000000..73b523b Binary files /dev/null and b/img/14.12.png differ diff --git a/img/14.13.png b/img/14.13.png new file mode 100644 index 0000000..562ca94 Binary files /dev/null and b/img/14.13.png differ diff --git a/img/14.2.png b/img/14.2.png new file mode 100644 index 0000000..91f4266 Binary files /dev/null and b/img/14.2.png differ diff --git a/img/14.3.png b/img/14.3.png new file mode 100644 index 0000000..1aed7d3 Binary files /dev/null and b/img/14.3.png differ diff --git a/img/14.4.png b/img/14.4.png new file mode 100644 index 0000000..dcba44d Binary files /dev/null and b/img/14.4.png differ diff --git a/img/14.5.png b/img/14.5.png new file mode 100644 index 0000000..cbb3e93 Binary files /dev/null and b/img/14.5.png differ diff --git a/img/14.6.png b/img/14.6.png new file mode 100644 index 0000000..faaf251 Binary files /dev/null and b/img/14.6.png differ diff --git a/img/14.7.png b/img/14.7.png new file mode 100644 index 0000000..a612e47 Binary files /dev/null and b/img/14.7.png differ diff --git a/img/14.8.png b/img/14.8.png new file mode 100644 index 0000000..efaf4cf Binary files /dev/null and b/img/14.8.png differ diff --git a/img/14.9.png b/img/14.9.png new file mode 100644 index 0000000..11118d3 Binary files /dev/null and b/img/14.9.png differ diff --git a/img/15.0.png b/img/15.0.png new file mode 100644 index 0000000..a1750e8 Binary files /dev/null and b/img/15.0.png differ diff --git a/img/15.1.png b/img/15.1.png new file mode 100644 index 0000000..bfbd487 Binary files /dev/null and b/img/15.1.png differ diff --git a/img/15.2.png b/img/15.2.png new file mode 100644 index 0000000..be266fd Binary files /dev/null and b/img/15.2.png differ diff --git a/img/15.3.png b/img/15.3.png new file mode 100644 index 0000000..2eb380d Binary files /dev/null and b/img/15.3.png differ diff --git a/img/17.0.png b/img/17.0.png new file mode 100644 index 0000000..bbe9595 Binary files /dev/null and b/img/17.0.png differ diff --git a/img/17.1.png b/img/17.1.png new file mode 100644 index 0000000..6d48601 Binary files /dev/null and b/img/17.1.png differ diff --git a/img/17.2.png b/img/17.2.png new file mode 100644 index 0000000..9a04dbb Binary files /dev/null and b/img/17.2.png differ diff --git a/img/18.0.png b/img/18.0.png new file mode 100644 index 0000000..d02adcb Binary files /dev/null and b/img/18.0.png differ diff --git a/img/18.1.png b/img/18.1.png new file mode 100644 index 0000000..f95157b Binary files /dev/null and b/img/18.1.png differ diff --git a/img/18.2.png b/img/18.2.png new file mode 100644 index 0000000..bc221d7 Binary files /dev/null and b/img/18.2.png differ diff --git a/img/18.3.png b/img/18.3.png new file mode 100644 index 0000000..73e239b Binary files /dev/null and b/img/18.3.png differ diff --git a/img/18.4.png b/img/18.4.png new file mode 100644 index 0000000..4f28f78 Binary files /dev/null and b/img/18.4.png differ diff --git a/img/18.5.png b/img/18.5.png new file mode 100644 index 0000000..3b05396 Binary files /dev/null and b/img/18.5.png differ diff --git a/img/19.0.webp b/img/19.0.webp new file mode 100644 index 0000000..d8ace90 Binary files /dev/null and b/img/19.0.webp differ diff --git a/img/19.1.png b/img/19.1.png new file mode 100644 index 0000000..09c1174 Binary files /dev/null and b/img/19.1.png differ diff --git a/img/bg13.jpg b/img/bg13.jpg new file mode 100644 index 0000000..d6506db Binary files /dev/null and b/img/bg13.jpg differ diff --git a/img/puzzle.svg b/img/puzzle.svg new file mode 100644 index 0000000..b128cf4 --- /dev/null +++ b/img/puzzle.svg @@ -0,0 +1,160 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/imsmanifest.xml b/imsmanifest.xml index 6619fdf..b1c9d4a 100644 --- a/imsmanifest.xml +++ b/imsmanifest.xml @@ -4,9 +4,9 @@ - CLIENTE CURSO + Vantive - CURSO + Rotafolio ADL SCORM