Compare commits
27 Commits
1bb1258c16
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
 david.martinez
|
d7f88756a1 | ||
|
david.martinez
|
a35b242584 | ||
|
david.martinez
|
4929e1364a | ||
|
david.martinez
|
2e304d7a99 | ||
|
david.martinez
|
0be4d028e1 | ||
|
david.martinez
|
8dd25c3b23 | ||
|
david.martinez
|
f9d1a5fe1a | ||
|
david.martinez
|
af4158164a | ||
|
david.martinez
|
c55b51c0fc | ||
|
david.martinez
|
2d50926186 | ||
 David-Mtz-Gaytan
|
ad525b20be | ||
|
david.martinez
|
1ba071b1db | ||
|
david.martinez
|
30965d3c90 | ||
|
david.martinez
|
0941a6c52b | ||
|
david.martinez
|
88d38ade56 | ||
|
david.martinez
|
a9abdba4ba | ||
|
david.martinez
|
1be82dd149 | ||
|
david.martinez
|
61e208390d | ||
|
david.martinez
|
033d85e792 | ||
|
david.martinez
|
85630e41ca | ||
|
david.martinez
|
5e71e889f1 | ||
|
david.martinez
|
ad9b4d5999 | ||
|
david.martinez
|
c986a98259 | ||
|
david.martinez
|
172b8450e4 | ||
 salvador.martinez
|
b4f834f46e | ||
|
salvador.martinez
|
dc52a83add | ||
|
david.martinez
|
d3a6461a3a |
@@ -0,0 +1,6 @@
|
|||||||
|
{
|
||||||
|
"htmlWhitespaceSensitivity": "css",
|
||||||
|
"printWidth": 300,
|
||||||
|
"tabWidth": 2,
|
||||||
|
"singleQuote": true
|
||||||
|
}
|
||||||
+198
@@ -0,0 +1,198 @@
|
|||||||
|
{
|
||||||
|
"useCourseNav.getStudentName": {
|
||||||
|
"prefix": "cn.getStudentName",
|
||||||
|
"body": [
|
||||||
|
"CourseNav.getStudentName(${1})"
|
||||||
|
],
|
||||||
|
"description": "CourseNav: getStudentName"
|
||||||
|
},
|
||||||
|
"useCourseNav.getLessonLocation": {
|
||||||
|
"prefix": "cn.getLessonLocation",
|
||||||
|
"body": [
|
||||||
|
"CourseNav.getLessonLocation(${1})"
|
||||||
|
],
|
||||||
|
"description": "CourseNav: getLessonLocation"
|
||||||
|
},
|
||||||
|
"useCourseNav.setLessonLocation": {
|
||||||
|
"prefix": "cn.setLessonLocation",
|
||||||
|
"body": [
|
||||||
|
"CourseNav.setLessonLocation(${1})"
|
||||||
|
],
|
||||||
|
"description": "CourseNav: setLessonLocation"
|
||||||
|
},
|
||||||
|
"useCourseNav.getLessonStatus": {
|
||||||
|
"prefix": "cn.getLessonStatus",
|
||||||
|
"body": [
|
||||||
|
"CourseNav.getLessonStatus(${1})"
|
||||||
|
],
|
||||||
|
"description": "CourseNav: getLessonStatus"
|
||||||
|
},
|
||||||
|
"useCourseNav.setLessonStatus": {
|
||||||
|
"prefix": "cn.setLessonStatus",
|
||||||
|
"body": [
|
||||||
|
"CourseNav.setLessonStatus(${1})"
|
||||||
|
],
|
||||||
|
"description": "CourseNav: setLessonStatus"
|
||||||
|
},
|
||||||
|
"useCourseNav.getScore": {
|
||||||
|
"prefix": "cn.getScore",
|
||||||
|
"body": [
|
||||||
|
"CourseNav.getScore(${1})"
|
||||||
|
],
|
||||||
|
"description": "CourseNav: getScore"
|
||||||
|
},
|
||||||
|
"useCourseNav.setScore": {
|
||||||
|
"prefix": "cn.setScore",
|
||||||
|
"body": [
|
||||||
|
"CourseNav.setScore(${1})"
|
||||||
|
],
|
||||||
|
"description": "CourseNav: setScore"
|
||||||
|
},
|
||||||
|
"useCourseNav.getSuspendData": {
|
||||||
|
"prefix": "cn.getSuspendData",
|
||||||
|
"body": [
|
||||||
|
"CourseNav.getSuspendData(${1})"
|
||||||
|
],
|
||||||
|
"description": "CourseNav: getSuspendData"
|
||||||
|
},
|
||||||
|
"useCourseNav.setSuspendData": {
|
||||||
|
"prefix": "cn.setSuspendData",
|
||||||
|
"body": [
|
||||||
|
"CourseNav.setSuspendData(${1})"
|
||||||
|
],
|
||||||
|
"description": "CourseNav: setSuspendData"
|
||||||
|
},
|
||||||
|
"useCourseNav.createSound": {
|
||||||
|
"prefix": "cn.createSound",
|
||||||
|
"body": [
|
||||||
|
"CourseNav.createSound(${1})"
|
||||||
|
],
|
||||||
|
"description": "CourseNav: createSound"
|
||||||
|
},
|
||||||
|
"useCourseNav.setSlideVisited": {
|
||||||
|
"prefix": "cn.setSlideVisited",
|
||||||
|
"body": [
|
||||||
|
"CourseNav.setSlideVisited(${1})"
|
||||||
|
],
|
||||||
|
"description": "CourseNav: setSlideVisited"
|
||||||
|
},
|
||||||
|
"useCourseNav.soundClick": {
|
||||||
|
"prefix": "cn.soundClick",
|
||||||
|
"body": [
|
||||||
|
"CourseNav.soundClick(${1})"
|
||||||
|
],
|
||||||
|
"description": "CourseNav: soundClick"
|
||||||
|
},
|
||||||
|
"useCourseNav.isVisited": {
|
||||||
|
"prefix": "cn.isVisited",
|
||||||
|
"body": [
|
||||||
|
"CourseNav.isVisited(${1})"
|
||||||
|
],
|
||||||
|
"description": "CourseNav: isVisited"
|
||||||
|
},
|
||||||
|
"useCourseNav.nextSlide": {
|
||||||
|
"prefix": "cn.nextSlide",
|
||||||
|
"body": [
|
||||||
|
"CourseNav.nextSlide(${1})"
|
||||||
|
],
|
||||||
|
"description": "CourseNav: nextSlide"
|
||||||
|
},
|
||||||
|
"useCourseNav.save": {
|
||||||
|
"prefix": "cn.save",
|
||||||
|
"body": [
|
||||||
|
"CourseNav.save(${1})"
|
||||||
|
],
|
||||||
|
"description": "CourseNav: save"
|
||||||
|
},
|
||||||
|
"useCourseNav.reload": {
|
||||||
|
"prefix": "cn.reload",
|
||||||
|
"body": [
|
||||||
|
"CourseNav.reload(${1})"
|
||||||
|
],
|
||||||
|
"description": "CourseNav: reload"
|
||||||
|
},
|
||||||
|
"useCourseNav.gotoSlide": {
|
||||||
|
"prefix": "cn.gotoSlide",
|
||||||
|
"body": [
|
||||||
|
"CourseNav.gotoSlide(${1})"
|
||||||
|
],
|
||||||
|
"description": "CourseNav: gotoSlide"
|
||||||
|
},
|
||||||
|
"useCourseNav.isCompletedSlideIndex": {
|
||||||
|
"prefix": "cn.isCompletedSlideIndex",
|
||||||
|
"body": [
|
||||||
|
"CourseNav.isCompletedSlideIndex(${1})"
|
||||||
|
],
|
||||||
|
"description": "CourseNav: isCompletedSlideIndex"
|
||||||
|
},
|
||||||
|
"useCourseNav.getCurrentSlide": {
|
||||||
|
"prefix": "cn.getCurrentSlide",
|
||||||
|
"body": [
|
||||||
|
"CourseNav.getCurrentSlide(${1})"
|
||||||
|
],
|
||||||
|
"description": "CourseNav: getCurrentSlide"
|
||||||
|
},
|
||||||
|
"useCourseNav.prevSlide": {
|
||||||
|
"prefix": "cn.prevSlide",
|
||||||
|
"body": [
|
||||||
|
"CourseNav.prevSlide(${1})"
|
||||||
|
],
|
||||||
|
"description": "CourseNav: prevSlide"
|
||||||
|
},
|
||||||
|
"useCourseNav.resetCourse": {
|
||||||
|
"prefix": "cn.resetCourse",
|
||||||
|
"body": [
|
||||||
|
"CourseNav.resetCourse(${1})"
|
||||||
|
],
|
||||||
|
"description": "CourseNav: resetCourse"
|
||||||
|
},
|
||||||
|
"useCourseNav.adjustMainContentHeight": {
|
||||||
|
"prefix": "cn.adjustMainContentHeight",
|
||||||
|
"body": [
|
||||||
|
"CourseNav.adjustMainContentHeight(${1})"
|
||||||
|
],
|
||||||
|
"description": "CourseNav: adjustMainContentHeight"
|
||||||
|
},
|
||||||
|
"useCourseNav.markSlidesAsVisited": {
|
||||||
|
"prefix": "cn.markSlidesAsVisited",
|
||||||
|
"body": [
|
||||||
|
"CourseNav.markSlidesAsVisited(${1})"
|
||||||
|
],
|
||||||
|
"description": "CourseNav: markSlidesAsVisited"
|
||||||
|
},
|
||||||
|
"useCourseNav.updateProgressBar": {
|
||||||
|
"prefix": "cn.updateProgressBar",
|
||||||
|
"body": [
|
||||||
|
"CourseNav.updateProgressBar(${1})"
|
||||||
|
],
|
||||||
|
"description": "CourseNav: updateProgressBar"
|
||||||
|
},
|
||||||
|
"useCourseNav.completarLeccion": {
|
||||||
|
"prefix": "cn.completarLeccion",
|
||||||
|
"body": [
|
||||||
|
"CourseNav.completarLeccion(${1})"
|
||||||
|
],
|
||||||
|
"description": "CourseNav: completarLeccion"
|
||||||
|
},
|
||||||
|
"useCourseNav.audioController": {
|
||||||
|
"prefix": "cn.audio",
|
||||||
|
"body": [
|
||||||
|
"CourseNav.audioController"
|
||||||
|
],
|
||||||
|
"description": "CourseNav: controlador de audio"
|
||||||
|
},
|
||||||
|
"useCourseNav.getScormData": {
|
||||||
|
"prefix": "cn.getScormData",
|
||||||
|
"body": [
|
||||||
|
"CourseNav.getScormData('${1:key}')"
|
||||||
|
],
|
||||||
|
"description": "CourseNav: Obtiene valor de SCORM/sessionStorage"
|
||||||
|
},
|
||||||
|
"useCourseNav.setScormData": {
|
||||||
|
"prefix": "cn.setScormData",
|
||||||
|
"body": [
|
||||||
|
"CourseNav.setScormData('${1:key}', ${2:value})"
|
||||||
|
],
|
||||||
|
"description": "CourseNav: Guarda valor en SCORM/sessionStorage"
|
||||||
|
}
|
||||||
|
}
|
||||||
Vendored
+61
@@ -0,0 +1,61 @@
|
|||||||
|
{
|
||||||
|
"🎵 Reproducir sonido con createSound": {
|
||||||
|
"prefix": "howl-play",
|
||||||
|
"body": [
|
||||||
|
"const sonido = createSound('audio/$1.mp3');",
|
||||||
|
"stopAllSoundsAndPlay(sonido);"
|
||||||
|
],
|
||||||
|
"description": "Crea y reproduce un sonido con utilidades Howler"
|
||||||
|
},
|
||||||
|
|
||||||
|
"🔇 Silenciar todos los sonidos": {
|
||||||
|
"prefix": "howl-mute-on",
|
||||||
|
"body": [
|
||||||
|
"setGlobalMute(true);"
|
||||||
|
],
|
||||||
|
"description": "Silencia todos los sonidos con Howler"
|
||||||
|
},
|
||||||
|
|
||||||
|
"🔊 Activar todos los sonidos": {
|
||||||
|
"prefix": "howl-mute-off",
|
||||||
|
"body": [
|
||||||
|
"setGlobalMute(false);"
|
||||||
|
],
|
||||||
|
"description": "Activa todos los sonidos con Howler"
|
||||||
|
},
|
||||||
|
|
||||||
|
"🔁 Detener todos los sonidos": {
|
||||||
|
"prefix": "howl-stop",
|
||||||
|
"body": [
|
||||||
|
"stopAllSounds();"
|
||||||
|
],
|
||||||
|
"description": "Detiene todos los sonidos activos"
|
||||||
|
},
|
||||||
|
|
||||||
|
"🎚️ Ajustar volumen global": {
|
||||||
|
"prefix": "howl-volume",
|
||||||
|
"body": [
|
||||||
|
"setGlobalVolume($1); // valor entre 0.0 y 1.0"
|
||||||
|
],
|
||||||
|
"description": "Controlar volumen global con Howler"
|
||||||
|
},
|
||||||
|
|
||||||
|
"🕵️ Verificar si un sonido está reproduciéndose": {
|
||||||
|
"prefix": "howl-is-playing",
|
||||||
|
"body": [
|
||||||
|
"if (isPlaying(sonido)) {",
|
||||||
|
" console.log('Está reproduciendo');",
|
||||||
|
"} else {",
|
||||||
|
" console.log('No está sonando');",
|
||||||
|
"}"
|
||||||
|
],
|
||||||
|
"description": "Verifica si un sonido está activo"
|
||||||
|
},
|
||||||
|
"🎵 crear sonido con createSound": {
|
||||||
|
"prefix": "newsound",
|
||||||
|
"body": [
|
||||||
|
"createSound('audio/$1.mp3');",
|
||||||
|
],
|
||||||
|
"description": "Crea un sonido con utilidades Howler"
|
||||||
|
},
|
||||||
|
}
|
||||||
Vendored
+111
@@ -0,0 +1,111 @@
|
|||||||
|
{
|
||||||
|
// Place your curso workspace snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and
|
||||||
|
// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope
|
||||||
|
// is left empty or omitted, the snippet gets applied to all languages. The prefix is what is
|
||||||
|
// used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
|
||||||
|
// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders.
|
||||||
|
// Placeholders with the same ids are connected.
|
||||||
|
// Example:
|
||||||
|
// "Print to console": {
|
||||||
|
// "scope": "javascript,typescript",
|
||||||
|
// "prefix": "log",
|
||||||
|
// "body": [
|
||||||
|
// "console.log('$1');",
|
||||||
|
// "$2"
|
||||||
|
// ],
|
||||||
|
// "description": "Log output to console"
|
||||||
|
// }
|
||||||
|
"Nuevo sco": {
|
||||||
|
"scope": "html",
|
||||||
|
"prefix": "sco",
|
||||||
|
"body": [
|
||||||
|
"<style></style>",
|
||||||
|
"<section class='page-sco py-md-4 py-2'></section>",
|
||||||
|
"<script>",
|
||||||
|
" $(function () {",
|
||||||
|
" 'use strict';",
|
||||||
|
" });",
|
||||||
|
"</script>",
|
||||||
|
],
|
||||||
|
"description": "sco"
|
||||||
|
},
|
||||||
|
"Mitad bs5": {
|
||||||
|
"scope": "html",
|
||||||
|
"prefix": "md",
|
||||||
|
"body": [
|
||||||
|
"<div class=\"container-xxl\">",
|
||||||
|
" <div class=\"row justify-content-center\">",
|
||||||
|
" <div class=\"col-12 col-md-6\"></div>",
|
||||||
|
" <div class=\"col-12 col-md-6\"></div>",
|
||||||
|
" </div>",
|
||||||
|
"</div>"
|
||||||
|
],
|
||||||
|
"description": "mitad"
|
||||||
|
},
|
||||||
|
"Mitad cols": {
|
||||||
|
"scope": "html",
|
||||||
|
"prefix": "mcol",
|
||||||
|
"body": [
|
||||||
|
|
||||||
|
" <div class=\"row justify-content-center\">",
|
||||||
|
" <div class=\"col-12 col-md-6\"></div>",
|
||||||
|
" <div class=\"col-12 col-md-6\"></div>",
|
||||||
|
" </div>"
|
||||||
|
],
|
||||||
|
"description": "mitad"
|
||||||
|
},
|
||||||
|
"bs5 sm (min-width: 576px)": {
|
||||||
|
"prefix": "bs5mq-sm",
|
||||||
|
"body": [
|
||||||
|
"@media (min-width: 576px) {",
|
||||||
|
" $0",
|
||||||
|
"}"
|
||||||
|
],
|
||||||
|
"description": "Bootstrap 5 media query sm (≥576px)"
|
||||||
|
},
|
||||||
|
"bs5 md (min-width: 768px)": {
|
||||||
|
"prefix": "bs5mq-md",
|
||||||
|
"body": [
|
||||||
|
"@media (min-width: 768px) {",
|
||||||
|
" $0",
|
||||||
|
"}"
|
||||||
|
],
|
||||||
|
"description": "Bootstrap 5 media query md (≥768px)"
|
||||||
|
},
|
||||||
|
"bs5 lg (min-width: 992px)": {
|
||||||
|
"prefix": "bs5mq-lg",
|
||||||
|
"body": [
|
||||||
|
"@media (min-width: 992px) {",
|
||||||
|
" $0",
|
||||||
|
"}"
|
||||||
|
],
|
||||||
|
"description": "Bootstrap 5 media query lg (≥992px)"
|
||||||
|
},
|
||||||
|
"bs5 xl (min-width: 1200px)": {
|
||||||
|
"prefix": "bs5mq-xl",
|
||||||
|
"body": [
|
||||||
|
"@media (min-width: 1200px) {",
|
||||||
|
" $0",
|
||||||
|
"}"
|
||||||
|
],
|
||||||
|
"description": "Bootstrap 5 media query xl (≥1200px)"
|
||||||
|
},
|
||||||
|
"bs5 xxl (min-width: 1400px)": {
|
||||||
|
"prefix": "bs5mq-xxl",
|
||||||
|
"body": [
|
||||||
|
"@media (min-width: 1400px) {",
|
||||||
|
" $0",
|
||||||
|
"}"
|
||||||
|
],
|
||||||
|
"description": "Bootstrap 5 media query xxl (≥1400px)"
|
||||||
|
},
|
||||||
|
"bs5 card simple":{
|
||||||
|
"prefix": "bs5card",
|
||||||
|
"body": [
|
||||||
|
"<div class=\"card custom-card\">",
|
||||||
|
" <div class=\"card-body\"></div>",
|
||||||
|
"</div>",
|
||||||
|
],
|
||||||
|
"description": "Card simple"
|
||||||
|
}
|
||||||
|
}
|
||||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
+43
-15
@@ -1,64 +1,92 @@
|
|||||||
{
|
{
|
||||||
"title": "Nombre del curso",
|
"title": "Vantive",
|
||||||
"modules": [
|
"modules": [
|
||||||
{
|
{
|
||||||
"title": "Introducción",
|
"title": "Contenido",
|
||||||
"topics": [
|
"topics": [
|
||||||
{
|
{
|
||||||
"title": "Portada",
|
"title": "Portada",
|
||||||
"content": "contenido/01.html"
|
"content": "contenido/01.html"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"title": "Portada",
|
"title": "¿Qué son los riñones?",
|
||||||
"content": "contenido/02.html"
|
"content": "contenido/02.html"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"title": "Navegación",
|
"title": "¿Cuál es el tratamiento?",
|
||||||
"content": "contenido/03.html"
|
"content": "contenido/03.html"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"title": "Navegación",
|
"title": "Tipos de diálisis",
|
||||||
"content": "contenido/04.html"
|
"content": "contenido/04.html"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"title": "Navegación",
|
"title": "¿Cómo funciona la diálisis peritoneal? - Glucosa",
|
||||||
"content": "contenido/05.html"
|
"content": "contenido/05.html"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"title": "Navegación",
|
"title": "¿Cómo funciona la diálisis peritoneal?",
|
||||||
"content": "contenido/06.html"
|
"content": "contenido/06.html"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"title": "Navegación",
|
"title": "Tipos de diálisis peritoneal",
|
||||||
"content": "contenido/07.html"
|
"content": "contenido/07.html"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"title": "Navegación",
|
"title": "¿Qué necesito para poder realizar la Diálisis Peritoneal Continua Ambulatoria (DPCA)?",
|
||||||
"content": "contenido/08.html"
|
"content": "contenido/08.html"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"title": "Navegación",
|
"title": "¿Qué necesito para poder realizar la Diálisis Peritoneal Automatizada (DPA)?",
|
||||||
"content": "contenido/09.html"
|
"content": "contenido/09.html"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"title": "Navegación",
|
"title": "¿Qué es un catéter?",
|
||||||
"content": "contenido/10.html"
|
"content": "contenido/10.html"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"title": "Navegación",
|
"title": "¿Qué es un catéter?",
|
||||||
"content": "contenido/11.html"
|
"content": "contenido/11.html"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"title": "Navegación",
|
"title": "Cuidados del sitio de salida y complicaciones",
|
||||||
"content": "contenido/12.html"
|
"content": "contenido/12.html"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"title": "Navegación",
|
"title": "Lavado de manos y uso correcto de cubrebocas",
|
||||||
"content": "contenido/13.html"
|
"content": "contenido/13.html"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"title": "Navegación",
|
"title": "Lavado de manos y uso correcto de cubrebocas",
|
||||||
"content": "contenido/14.html"
|
"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"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Referencias",
|
||||||
|
"content": "contenido/20.html"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|||||||
+58
-40
@@ -1,53 +1,71 @@
|
|||||||
<style>
|
<style>
|
||||||
.fake {
|
.fake {
|
||||||
background-image: url(img/bg00.jpg);
|
background-image: url(img/bg00.jpg);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-position: center;
|
background-position: center;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
}
|
}
|
||||||
|
|
||||||
.w-container {
|
.w-container {
|
||||||
background-image: url(img/w-xx1.png);
|
background-image: url(img/w-xx1.png);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-position: left;
|
background-position: left;
|
||||||
background-size: 100% auto;
|
background-size: 100% auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.btn-comenzar {
|
||||||
|
border-radius: 20px;
|
||||||
|
border-bottom-left-radius: 0;
|
||||||
|
border-bottom-right-radius: 0;
|
||||||
|
border: 0;
|
||||||
|
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
<div class='page-sco py-2 py-md-4 h-100'>
|
<div class="page-sco py-2 py-md-4 h-100">
|
||||||
<div class='container h-100'>
|
<div class="container h-100">
|
||||||
<div class='row justify-content-center align-items-center h-100'>
|
<div class="row justify-content-center align-items-center h-100">
|
||||||
<div class='col-12 w-container'>
|
<div class="col-12 w-container">
|
||||||
<div class='row justify-content-center'>
|
<div class="row justify-content-center">
|
||||||
<div class="col-11">
|
<div class="col-11">
|
||||||
<div class="row justify-content-center align-items-center">
|
<div class="row justify-content-center align-items-center">
|
||||||
<div class="col-8">
|
<div class="col-8">
|
||||||
<h1 class="text-white fw-bold">INDUCCIÓN AL PACIENTE EN<br>DIÁLISIS PERIOTONIAL <span
|
<h1 class="text-white fw-bold animate__animated animate__lightSpeedInLeft">
|
||||||
class="fw-bold text-verde-ceniza">>>></span></h1>
|
INDUCCIÓN AL PROGRAMA DE
|
||||||
<p class="text-white">Pioneros en el cuidado de la enfermedad renal crónica</p>
|
<br />
|
||||||
</div>
|
DIÁLISIS PERITONEAL
|
||||||
<div class="col-4">
|
<span class="fw-bold text-verde-ceniza">>>></span>
|
||||||
<img src="img/0.1.png" class="img-fluid" alt="" />
|
</h1>
|
||||||
</div>
|
<p class="text-white animate__animated animate__lightSpeedInLeft">Extender vidas <span class="text-verde-ceniza">>>></span> Expandir posibilidades</p>
|
||||||
</div>
|
<div class="w-100 position-relative mt-3 animate__animated animate__zoomIn">
|
||||||
</div>
|
<button class="btn bg-white text-verde-oscuro btn-comenzar animate__animated animate__pulse animate__infinite">
|
||||||
<!-- <div class="col-10 text-center">
|
<h4 class="my-0 fw-bold">Comenzar</h4>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-4">
|
||||||
|
<img src="img/0.1.png" class="img-fluid" alt="" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- <div class="col-10 text-center">
|
||||||
<button class="btn btn-verde-oscuro btn-comenzar">
|
<button class="btn btn-verde-oscuro btn-comenzar">
|
||||||
<h4 class="my-0 fw-bold">Comenzar</h4>
|
<h4 class="my-0 fw-bold">Comenzar</h4>
|
||||||
</button>
|
</button>
|
||||||
</div> -->
|
</div> -->
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<script>
|
<script>
|
||||||
$(function () {
|
$(function () {
|
||||||
'use strict';
|
'use strict';
|
||||||
$('.wrap-course-content').addClass('fake');
|
$('.wrap-course-content').addClass('fake');
|
||||||
CourseNav.setSlideVisited();
|
CourseNav.setSlideVisited();
|
||||||
|
|
||||||
// $('.btn-comenzar').on('click', function () {
|
$('.btn-comenzar').on('click', function () {
|
||||||
// CourseNav.nextSlide();
|
CourseNav.nextSlide();
|
||||||
// });
|
$(this).removeClass('animate__animated animate__pulse animate__infinite');
|
||||||
});
|
});
|
||||||
</script>
|
});
|
||||||
|
</script>
|
||||||
|
|||||||
+11
-5
@@ -106,19 +106,27 @@
|
|||||||
width: 16px !important;
|
width: 16px !important;
|
||||||
height: 16px !important;
|
height: 16px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.perso {
|
||||||
|
top: 111px;
|
||||||
|
left: 70px;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
<div class='page-sco py-2 py-md-4 h-100'>
|
<div class='page-sco py-2 py-md-4 h-100'>
|
||||||
<div class='container h-100'>
|
<div class='container h-100'>
|
||||||
<div class='row justify-content-center align-items-center h-100'>
|
<div class='row justify-content-center align-items-center h-100'>
|
||||||
<div class='col-12'>
|
<div class='col-12'>
|
||||||
<div class='row justify-content-center'>
|
<div class='row justify-content-center'>
|
||||||
|
<div class="position-absolute perso">
|
||||||
|
<img src="img/2.2.png" alt="Riñones" class="img-fluid">
|
||||||
|
</div>
|
||||||
<div class="col-10 text-center">
|
<div class="col-10 text-center">
|
||||||
<h2 class="text-primary fw-bold">¿Qué son los riñones?</h2>
|
<h2 class="text-primary fw-bold">¿Qué son los riñones?</h2>
|
||||||
<hr class="border border-3 border-verde-oscuro hr-style mx-auto my-0 mb-3">
|
<hr class="border border-3 border-verde-oscuro hr-style mx-auto my-0 mb-3">
|
||||||
</div>
|
</div>
|
||||||
<div class="col-12">
|
<div class="col-12">
|
||||||
<div class="row justify-content-end">
|
<div class="row justify-content-end">
|
||||||
<div class="col-10 px-0">
|
<div class="col-9 px-0">
|
||||||
<div class="card border-0 bg-custom">
|
<div class="card border-0 bg-custom">
|
||||||
<div class="card-body d-flex flex-row justify-content-between align-items-center">
|
<div class="card-body d-flex flex-row justify-content-between align-items-center">
|
||||||
<img src="img/2.1.png" alt="Riñones" class="img-fluid mx-3">
|
<img src="img/2.1.png" alt="Riñones" class="img-fluid mx-3">
|
||||||
@@ -134,16 +142,14 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="col-12 my-2">
|
<div class="col-12 my-2">
|
||||||
<div class="row justify-content-center align-items-center">
|
<div class="row justify-content-center align-items-center">
|
||||||
<div class="col-3">
|
<div class="col-3"></div>
|
||||||
<img src="img/2.2.png" alt="Riñones" class="img-fluid">
|
|
||||||
</div>
|
|
||||||
<div class="col-6">
|
<div class="col-6">
|
||||||
<div class="main-video bg-primary rounded">
|
<div class="main-video bg-primary rounded">
|
||||||
<div
|
<div
|
||||||
class="video-custom rounded overflow-hidden border-0 border-primary shadow-sm position-relative">
|
class="video-custom rounded overflow-hidden border-0 border-primary shadow-sm position-relative">
|
||||||
<video id="customVideo" class="w-100 h-100" preload="metadata"
|
<video id="customVideo" class="w-100 h-100" preload="metadata"
|
||||||
poster="img/poster.png" playsinline>
|
poster="img/poster.png" playsinline>
|
||||||
<source src="video/demo.mp4" type="video/mp4">
|
<source src="video/Rotafolio_Vantive_Completo.mp4" type="video/mp4">
|
||||||
Tu navegador no soporta el elemento de video.
|
Tu navegador no soporta el elemento de video.
|
||||||
</video>
|
</video>
|
||||||
<div class="video-controls justify-content-between align-items-center"
|
<div class="video-controls justify-content-between align-items-center"
|
||||||
|
|||||||
+46
-44
@@ -12,11 +12,12 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.bg-custom {
|
.bg-custom {
|
||||||
background: #f0f4f2;
|
background: rgba(214, 227, 218, 0.8);
|
||||||
}
|
}
|
||||||
|
|
||||||
.bg-custom-transparent {
|
.bg-custom-transparent {
|
||||||
background: rgba(240, 244, 242, 0.6);
|
background: transparent;
|
||||||
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.drop-card {
|
.drop-card {
|
||||||
@@ -43,25 +44,27 @@
|
|||||||
max-width: 40%;
|
max-width: 40%;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<div class='page-sco py-2 py-md-4 h-100'>
|
<div class="page-sco py-2 py-md-4 h-100">
|
||||||
<div class='container h-100'>
|
<div class="container h-100">
|
||||||
<div class='row justify-content-center align-items-center h-100'>
|
<div id="drag-drop-activity" class="row justify-content-center align-items-center h-100" style="overflow: hidden">
|
||||||
<div class='col-12'>
|
<div class="col-12">
|
||||||
<div class='row justify-content-center'>
|
<div class="row justify-content-center">
|
||||||
<div class="col-10 mb-2">
|
<div class="col-10 mb-2">
|
||||||
<h2 class="text-center fw-bold text-primary">¿Cuál es el tratamiento?</h2>
|
<h2 class="text-center fw-bold text-primary">¿Cuál es el tratamiento<sup class="fw-bold">1,4</sup>?</h2>
|
||||||
<hr class="border border-3 border-verde-oscuro hr-style mx-auto my-0">
|
<hr class="border border-3 border-verde-oscuro hr-style mx-auto my-0" />
|
||||||
</div>
|
</div>
|
||||||
<div class="col-12 px-0">
|
<div class="col-12 px-0">
|
||||||
<div class="card border-0 my-2 rounded-0 bg-custom shadow p-3 text-center">
|
<div class="card bg-custom border-0 my-2 rounded-0 shadow p-3 text-center">
|
||||||
<div class="d-flex justify-content-center align-items-center flex-row">
|
<div class="d-flex justify-content-center align-items-center flex-row">
|
||||||
<img src="img/3.1.png" class="img-fluid mx-3">
|
<img src="img/3.1.png" class="img-fluid mx-3" />
|
||||||
<p class="mb-0"><strong>Instrucciones:</strong> Relaciona las imágenes de la columna A con la terapia a
|
<p class="mb-0"><strong>Instrucciones:</strong> Relaciona las imágenes con la terapia a la que corresponden.</p>
|
||||||
la que corresponden en la columna B.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="drag-drop-activity" class="col-12">
|
<div class="col-12 text-center mb-3">
|
||||||
|
<p class="small mb-0">"Estos son casos hipotéticos basados en las referencias bibliográficas."</p>
|
||||||
|
</div>
|
||||||
|
<div class="col-12">
|
||||||
<div class="row justify-content-center">
|
<div class="row justify-content-center">
|
||||||
<div class="col-12">
|
<div class="col-12">
|
||||||
<div id="content-drags" class="d-flex flex-row justify-content-center gap-3"></div>
|
<div id="content-drags" class="d-flex flex-row justify-content-center gap-3"></div>
|
||||||
@@ -70,18 +73,18 @@
|
|||||||
<div class="card bg-transparent border-0 rounded-0 shadow-none p-0">
|
<div class="card bg-transparent border-0 rounded-0 shadow-none p-0">
|
||||||
<div class="d-flex flex-row justify-content-center gap-3">
|
<div class="d-flex flex-row justify-content-center gap-3">
|
||||||
<div class="content-enfermedad text-center">
|
<div class="content-enfermedad text-center">
|
||||||
<div class="card rounded bg-custom-transparent border-0 shadow px-3 py-2 mt-2">
|
<div class="card rounded bg-custom-transparent border-0 shadow-none px-3 py-2 mt-2">
|
||||||
<img src="img/3.2.png" class="img-fluid">
|
<img src="img/3.2.png" class="img-fluid" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="content-enfermedad text-center">
|
<div class="content-enfermedad text-center">
|
||||||
<div class="card rounded bg-custom-transparent border-0 shadow px-3 py-2 mt-2">
|
<div class="card rounded bg-custom-transparent border-0 shadow-none px-3 py-2 mt-2">
|
||||||
<img src="img/3.3.png" class="img-fluid">
|
<img src="img/3.3.png" class="img-fluid" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="content-enfermedad text-center">
|
<div class="content-enfermedad text-center">
|
||||||
<div class="card rounded bg-custom-transparent border-0 shadow px-3 py-2 mt-2">
|
<div class="card rounded bg-custom-transparent border-0 shadow-none px-3 py-2 mt-2">
|
||||||
<img src="img/3.4.png" class="img-fluid">
|
<img src="img/3.4.png" class="img-fluid" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -97,8 +100,8 @@
|
|||||||
<div class="d-none">
|
<div class="d-none">
|
||||||
<div id="pop0">
|
<div id="pop0">
|
||||||
<div class="container-fluid">
|
<div class="container-fluid">
|
||||||
<div class=" w-100 text-center">
|
<div class="w-100 text-center">
|
||||||
<img src="img/3.5.png" class="img-fluid">
|
<img src="img/3.5.png" class="img-fluid" />
|
||||||
</div>
|
</div>
|
||||||
<div class="row justify-content-center">
|
<div class="row justify-content-center">
|
||||||
<div class="col-12 text-center mb-2">
|
<div class="col-12 text-center mb-2">
|
||||||
@@ -113,7 +116,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<script>
|
<script>
|
||||||
$(function () {
|
$(function () {
|
||||||
"use strict";
|
'use strict';
|
||||||
$('.wrap-course-content').addClass('fake');
|
$('.wrap-course-content').addClass('fake');
|
||||||
|
|
||||||
let questions;
|
let questions;
|
||||||
@@ -132,9 +135,9 @@
|
|||||||
xhr.onload = function (e) {
|
xhr.onload = function (e) {
|
||||||
var arrayBuffer = xhr.response;
|
var arrayBuffer = xhr.response;
|
||||||
var data = new Uint8Array(arrayBuffer);
|
var data = new Uint8Array(arrayBuffer);
|
||||||
var workbook = XLSX.read(data, { type: "array" });
|
var workbook = XLSX.read(data, { type: 'array' });
|
||||||
var result = {};
|
var result = {};
|
||||||
workbook.SheetNames.forEach(sheetName => {
|
workbook.SheetNames.forEach((sheetName) => {
|
||||||
var sheet = workbook.Sheets[sheetName];
|
var sheet = workbook.Sheets[sheetName];
|
||||||
result[sheetName] = XLSX.utils.sheet_to_json(sheet);
|
result[sheetName] = XLSX.utils.sheet_to_json(sheet);
|
||||||
});
|
});
|
||||||
@@ -144,13 +147,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
function procesarPreguntas(data) {
|
function procesarPreguntas(data) {
|
||||||
const preguntas = data.map(fila => {
|
const preguntas = data.map((fila) => {
|
||||||
const opciones = [];
|
const opciones = [];
|
||||||
Object.keys(fila).forEach(key => {
|
Object.keys(fila).forEach((key) => {
|
||||||
if (key.startsWith('opcion')) {
|
if (key.startsWith('opcion')) {
|
||||||
opciones.push({
|
opciones.push({
|
||||||
text: fila[key].trim(),
|
text: fila[key].trim(),
|
||||||
correct: key === 'opcion_c'
|
correct: key === 'opcion_c',
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
@@ -158,7 +161,7 @@
|
|||||||
pregunta: fila.pregunta.trim(),
|
pregunta: fila.pregunta.trim(),
|
||||||
opciones: opciones,
|
opciones: opciones,
|
||||||
retroalimentacion_correcta: fila.retroalimentacion_correcta.trim(),
|
retroalimentacion_correcta: fila.retroalimentacion_correcta.trim(),
|
||||||
retroalimentacion_incorrecta: fila.retroalimentacion_incorrecta.trim()
|
retroalimentacion_incorrecta: fila.retroalimentacion_incorrecta.trim(),
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
return preguntas;
|
return preguntas;
|
||||||
@@ -183,13 +186,13 @@
|
|||||||
// Crear todas las respuestas en #content-drags
|
// Crear todas las respuestas en #content-drags
|
||||||
let allOptions = [];
|
let allOptions = [];
|
||||||
questions.forEach((question, index) => {
|
questions.forEach((question, index) => {
|
||||||
question.opciones.forEach(opcion => {
|
question.opciones.forEach((opcion) => {
|
||||||
allOptions.push({ text: opcion.text, index: index });
|
allOptions.push({ text: opcion.text, index: index });
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
allOptions = shuffleArray(allOptions);
|
allOptions = shuffleArray(allOptions);
|
||||||
allOptions.forEach(option => {
|
allOptions.forEach((option) => {
|
||||||
const dragDiv = `<div class="card card-drag bg-verde-oscuro border-0 rounded-0 shadow-none px-3 py-2 text-white text-center" data-drag="${option.index}">${option.text}</div>`;
|
const dragDiv = `<div class="card card-drag bg-verde-oscuro border-0 rounded-0 shadow-none px-3 py-2 text-white text-center" data-drag="${option.index}">${option.text}</div>`;
|
||||||
$('#content-drags').append(dragDiv);
|
$('#content-drags').append(dragDiv);
|
||||||
});
|
});
|
||||||
@@ -199,8 +202,8 @@
|
|||||||
$('.card-drag').draggable({
|
$('.card-drag').draggable({
|
||||||
revert: 'invalid',
|
revert: 'invalid',
|
||||||
revertDuration: 300,
|
revertDuration: 300,
|
||||||
containment: "#drag-drop-activity",
|
/* containment: "#drag-drop-activity", */
|
||||||
cursor: "grabbing",
|
cursor: 'grabbing',
|
||||||
start: function (event, ui) {
|
start: function (event, ui) {
|
||||||
$(this).css('z-index', 1000);
|
$(this).css('z-index', 1000);
|
||||||
ui.position.left = 0;
|
ui.position.left = 0;
|
||||||
@@ -216,7 +219,7 @@
|
|||||||
},
|
},
|
||||||
stop: function (event, ui) {
|
stop: function (event, ui) {
|
||||||
$(this).css('z-index', 1);
|
$(this).css('z-index', 1);
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
$('.drop-card').droppable({
|
$('.drop-card').droppable({
|
||||||
@@ -240,28 +243,27 @@
|
|||||||
bad.play();
|
bad.play();
|
||||||
ui.helper.draggable('option', 'revert', true);
|
ui.helper.draggable('option', 'revert', true);
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function Completed() {
|
function Completed() {
|
||||||
const html = $("#pop0").html();
|
const html = $('#pop0').html();
|
||||||
Swal.fire({
|
Swal.fire({
|
||||||
html: html,
|
html: html,
|
||||||
target: "body",
|
target: document.getElementById('wrap-course-content'),
|
||||||
customClass: {
|
customClass: {
|
||||||
popup: 'pop_html_style border border-3 border-primary rounded-4',
|
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'
|
confirmButton: 'btn text-white bg-primary amor fw-semibold animate__animated animate__pulse animate__infinite',
|
||||||
},
|
},
|
||||||
confirmButtonText: "Cerrar",
|
confirmButtonText: 'Cerrar',
|
||||||
showConfirmButton: true,
|
showConfirmButton: true,
|
||||||
allowOutsideClick: false,
|
allowOutsideClick: false,
|
||||||
allowEscapeKey: false,
|
allowEscapeKey: false,
|
||||||
focusConfirm: false,
|
focusConfirm: false,
|
||||||
backdrop: "rgba(65, 60, 60, .95)",
|
backdrop: 'rgba(65, 60, 60, .95)',
|
||||||
width: "35em",
|
width: '35em',
|
||||||
didOpen: () => {
|
didOpen: () => {},
|
||||||
},
|
|
||||||
didClose: () => {
|
didClose: () => {
|
||||||
CourseNav.audioController.stopAudio();
|
CourseNav.audioController.stopAudio();
|
||||||
//CourseNav.soundClick();
|
//CourseNav.soundClick();
|
||||||
@@ -275,7 +277,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
readExcelFile(urlExcelFile, function (data) {
|
readExcelFile(urlExcelFile, function (data) {
|
||||||
const hojaDatos = data["DragAndDrop"];
|
const hojaDatos = data['DragAndDrop'];
|
||||||
questions = procesarPreguntas(hojaDatos);
|
questions = procesarPreguntas(hojaDatos);
|
||||||
CreateDragAndDrop();
|
CreateDragAndDrop();
|
||||||
initializeDragAndDrop();
|
initializeDragAndDrop();
|
||||||
|
|||||||
+47
-58
@@ -16,8 +16,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.bg-custom-transparent {
|
.bg-custom-transparent {
|
||||||
background: rgba(242, 232, 222, .76);
|
background: rgba(242, 232, 222, 0.76);
|
||||||
background: linear-gradient(to bottom, rgba(242, 232, 222, .6) 0%, rgba(240, 244, 242, .9) 100%);
|
background: linear-gradient(to bottom, rgba(242, 232, 222, 0.6) 0%, rgba(240, 244, 242, 0.9) 100%);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* .bg-custom-transparent img {
|
/* .bg-custom-transparent img {
|
||||||
@@ -72,25 +72,27 @@
|
|||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
} */
|
} */
|
||||||
</style>
|
</style>
|
||||||
<div class='page-sco py-2 py-md-4 h-100'>
|
<div class="page-sco py-2 py-md-4 h-100">
|
||||||
<div class='container h-100'>
|
<div class="container h-100">
|
||||||
<div class='row justify-content-center align-items-center h-100'>
|
<div id="drag-drop-activity" class="row justify-content-center align-items-center h-100" style="overflow: hidden">
|
||||||
<div class='col-12'>
|
<div class="col-12">
|
||||||
<div class='row justify-content-center'>
|
<div class="row justify-content-center">
|
||||||
<div class="col-10 mb-2">
|
<div class="col-10 mb-2">
|
||||||
<h2 class="text-center fw-bold text-primary">Tipos de diálisis</h2>
|
<h2 class="text-center fw-bold text-primary">Tipos de diálisis</h2>
|
||||||
<hr class="border border-3 border-verde-oscuro hr-style mx-auto my-0">
|
<hr class="border border-3 border-verde-oscuro hr-style mx-auto my-0" />
|
||||||
</div>
|
</div>
|
||||||
<div class="col-7 px-0">
|
<div class="col-7 px-0">
|
||||||
<div class="card border-0 my-2 rounded bg-secondary shadow p-3 text-center">
|
<div class="card border-0 my-2 rounded bg-secondary shadow p-3 text-center">
|
||||||
<div class="d-flex justify-content-center align-items-center flex-row">
|
<div class="d-flex justify-content-center align-items-center flex-row">
|
||||||
<img src="img/2.1.png" class="img-fluid mx-3">
|
<img src="img/2.1.png" class="img-fluid mx-3" />
|
||||||
<p class="mb-0"><strong>Instrucciones:</strong> Toma los nombres en la caja y arrástralos hacia el lugar
|
<p class="mb-0"><strong>Instrucciones:</strong> Toma los nombres y arrástralos hacia el lugar que les corresponda en las imágenes.</p>
|
||||||
que les corresponda en las imágenes.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="drag-drop-activity" class="col-12">
|
<div class="col-12 text-center mb-3">
|
||||||
|
<p class="small mb-0">"Estos son casos hipotéticos basados en las referencias bibliográficas."</p>
|
||||||
|
</div>
|
||||||
|
<div class="col-12">
|
||||||
<div class="row justify-content-center">
|
<div class="row justify-content-center">
|
||||||
<div class="col-12 mb-3">
|
<div class="col-12 mb-3">
|
||||||
<div class="card bg-transparent border-0 rounded-0 shadow-none p-0">
|
<div class="card bg-transparent border-0 rounded-0 shadow-none p-0">
|
||||||
@@ -98,12 +100,10 @@
|
|||||||
<div class="content-enfermedad text-center">
|
<div class="content-enfermedad text-center">
|
||||||
<div class="card rounded bg-custom-transparent border-0 shadow px-3 py-2 mt-2 text-center">
|
<div class="card rounded bg-custom-transparent border-0 shadow px-3 py-2 mt-2 text-center">
|
||||||
<div class="card-header bg-transparent">
|
<div class="card-header bg-transparent">
|
||||||
<img src="img/4.1.png" class="img-fluid">
|
<img src="img/4.1.png" class="img-fluid" />
|
||||||
</div>
|
</div>
|
||||||
<div class="w-100 form-append bg-secondary-light d-flex flex-row border-0 rounded">
|
<div class="w-100 form-append bg-secondary-light d-flex flex-row border-0 rounded">
|
||||||
<div class="bg-secondary text-white fw-bold py-2 px-2">
|
<div class="bg-secondary text-white fw-bold py-2 px-2">1</div>
|
||||||
1
|
|
||||||
</div>
|
|
||||||
<div class="option w-100"></div>
|
<div class="option w-100"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -111,12 +111,10 @@
|
|||||||
<div class="content-enfermedad text-center">
|
<div class="content-enfermedad text-center">
|
||||||
<div class="card rounded bg-custom-transparent border-0 shadow px-3 py-2 mt-2 text-center">
|
<div class="card rounded bg-custom-transparent border-0 shadow px-3 py-2 mt-2 text-center">
|
||||||
<div class="card-header bg-transparent">
|
<div class="card-header bg-transparent">
|
||||||
<img src="img/4.2.png" class="img-fluid">
|
<img src="img/4.2.png" class="img-fluid" />
|
||||||
</div>
|
</div>
|
||||||
<div class="w-100 form-append bg-secondary-light d-flex flex-row border-0 rounded">
|
<div class="w-100 form-append bg-secondary-light d-flex flex-row border-0 rounded">
|
||||||
<div class="bg-secondary text-white fw-bold py-2 px-2">
|
<div class="bg-secondary text-white fw-bold py-2 px-2">2</div>
|
||||||
2
|
|
||||||
</div>
|
|
||||||
<div class="option w-100"></div>
|
<div class="option w-100"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -124,12 +122,10 @@
|
|||||||
<div class="content-enfermedad text-center">
|
<div class="content-enfermedad text-center">
|
||||||
<div class="card rounded bg-custom-transparent border-0 shadow px-3 py-2 mt-2 text-center">
|
<div class="card rounded bg-custom-transparent border-0 shadow px-3 py-2 mt-2 text-center">
|
||||||
<div class="card-header bg-transparent">
|
<div class="card-header bg-transparent">
|
||||||
<img src="img/4.3.png" class="img-fluid">
|
<img src="img/4.3.png" class="img-fluid" />
|
||||||
</div>
|
</div>
|
||||||
<div class="w-100 form-append bg-secondary-light d-flex flex-row border-0 rounded">
|
<div class="w-100 form-append bg-secondary-light d-flex flex-row border-0 rounded">
|
||||||
<div class="bg-secondary text-white fw-bold py-2 px-2">
|
<div class="bg-secondary text-white fw-bold py-2 px-2">3</div>
|
||||||
3
|
|
||||||
</div>
|
|
||||||
<div class="option w-100"></div>
|
<div class="option w-100"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -137,12 +133,10 @@
|
|||||||
<div class="content-enfermedad text-center">
|
<div class="content-enfermedad text-center">
|
||||||
<div class="card rounded bg-custom-transparent border-0 shadow px-3 py-2 mt-2 text-center">
|
<div class="card rounded bg-custom-transparent border-0 shadow px-3 py-2 mt-2 text-center">
|
||||||
<div class="card-header bg-transparent">
|
<div class="card-header bg-transparent">
|
||||||
<img src="img/4.4.png" class="img-fluid">
|
<img src="img/4.4.png" class="img-fluid" />
|
||||||
</div>
|
</div>
|
||||||
<div class="w-100 form-append bg-secondary-light d-flex flex-row border-0 rounded">
|
<div class="w-100 form-append bg-secondary-light d-flex flex-row border-0 rounded">
|
||||||
<div class="bg-secondary text-white fw-bold py-2 px-2">
|
<div class="bg-secondary text-white fw-bold py-2 px-2">4</div>
|
||||||
4
|
|
||||||
</div>
|
|
||||||
<div class="option w-100"></div>
|
<div class="option w-100"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -163,8 +157,8 @@
|
|||||||
<div class="d-none">
|
<div class="d-none">
|
||||||
<div id="pop0">
|
<div id="pop0">
|
||||||
<div class="container-fluid">
|
<div class="container-fluid">
|
||||||
<div class=" w-100 text-center">
|
<div class="w-100 text-center">
|
||||||
<img src="img/3.5.png" class="img-fluid">
|
<img src="img/3.5.png" class="img-fluid" />
|
||||||
</div>
|
</div>
|
||||||
<div class="row justify-content-center">
|
<div class="row justify-content-center">
|
||||||
<div class="col-12 text-center mb-2">
|
<div class="col-12 text-center mb-2">
|
||||||
@@ -179,7 +173,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<script>
|
<script>
|
||||||
$(function () {
|
$(function () {
|
||||||
"use strict";
|
'use strict';
|
||||||
$('.wrap-course-content').addClass('fake');
|
$('.wrap-course-content').addClass('fake');
|
||||||
|
|
||||||
let questions;
|
let questions;
|
||||||
@@ -198,9 +192,9 @@
|
|||||||
xhr.onload = function (e) {
|
xhr.onload = function (e) {
|
||||||
var arrayBuffer = xhr.response;
|
var arrayBuffer = xhr.response;
|
||||||
var data = new Uint8Array(arrayBuffer);
|
var data = new Uint8Array(arrayBuffer);
|
||||||
var workbook = XLSX.read(data, { type: "array" });
|
var workbook = XLSX.read(data, { type: 'array' });
|
||||||
var result = {};
|
var result = {};
|
||||||
workbook.SheetNames.forEach(sheetName => {
|
workbook.SheetNames.forEach((sheetName) => {
|
||||||
var sheet = workbook.Sheets[sheetName];
|
var sheet = workbook.Sheets[sheetName];
|
||||||
result[sheetName] = XLSX.utils.sheet_to_json(sheet);
|
result[sheetName] = XLSX.utils.sheet_to_json(sheet);
|
||||||
});
|
});
|
||||||
@@ -210,13 +204,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
function procesarPreguntas(data) {
|
function procesarPreguntas(data) {
|
||||||
const preguntas = data.map(fila => {
|
const preguntas = data.map((fila) => {
|
||||||
const opciones = [];
|
const opciones = [];
|
||||||
Object.keys(fila).forEach(key => {
|
Object.keys(fila).forEach((key) => {
|
||||||
if (key.startsWith('opcion')) {
|
if (key.startsWith('opcion')) {
|
||||||
opciones.push({
|
opciones.push({
|
||||||
text: fila[key].trim(),
|
text: String(fila[key]).trim(),
|
||||||
correct: key === 'opcion_c'
|
correct: key === 'opcion_c',
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
@@ -224,7 +218,7 @@
|
|||||||
pregunta: fila.pregunta.trim(),
|
pregunta: fila.pregunta.trim(),
|
||||||
opciones: opciones,
|
opciones: opciones,
|
||||||
retroalimentacion_correcta: fila.retroalimentacion_correcta.trim(),
|
retroalimentacion_correcta: fila.retroalimentacion_correcta.trim(),
|
||||||
retroalimentacion_incorrecta: fila.retroalimentacion_incorrecta.trim()
|
retroalimentacion_incorrecta: fila.retroalimentacion_incorrecta.trim(),
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
return preguntas;
|
return preguntas;
|
||||||
@@ -249,14 +243,14 @@
|
|||||||
// Crear todas las respuestas en #content-drags
|
// Crear todas las respuestas en #content-drags
|
||||||
let allOptions = [];
|
let allOptions = [];
|
||||||
questions.forEach((question, index) => {
|
questions.forEach((question, index) => {
|
||||||
question.opciones.forEach(opcion => {
|
question.opciones.forEach((opcion) => {
|
||||||
allOptions.push({ text: opcion.text, index: index });
|
allOptions.push({ text: opcion.text, index: index });
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
allOptions = shuffleArray(allOptions);
|
allOptions = shuffleArray(allOptions);
|
||||||
allOptions.forEach(option => {
|
allOptions.forEach((option) => {
|
||||||
const dragDiv = `<div class="card card-drag bg-verde-oscuro border-0 shadow-none px-3 py-2 text-white text-center" data-drag="${option.index}">${option.text}</div>`;
|
const dragDiv = `<div class="card card-drag bg-verde-oscuro border-0 shadow-none px-3 py-2 text-white text-center" data-drag="${option.index}"><p class="mb-0">${option.text}</p></div>`;
|
||||||
$('#content-drags').append(dragDiv);
|
$('#content-drags').append(dragDiv);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@@ -265,8 +259,8 @@
|
|||||||
$('.card-drag').draggable({
|
$('.card-drag').draggable({
|
||||||
revert: 'invalid',
|
revert: 'invalid',
|
||||||
revertDuration: 300,
|
revertDuration: 300,
|
||||||
containment: "#drag-drop-activity",
|
/* containment: "#drag-drop-activity", */
|
||||||
cursor: "grabbing",
|
cursor: 'grabbing',
|
||||||
start: function (event, ui) {
|
start: function (event, ui) {
|
||||||
$(this).css('z-index', 1000);
|
$(this).css('z-index', 1000);
|
||||||
ui.position.left = 0;
|
ui.position.left = 0;
|
||||||
@@ -282,7 +276,7 @@
|
|||||||
},
|
},
|
||||||
stop: function (event, ui) {
|
stop: function (event, ui) {
|
||||||
$(this).css('z-index', 1);
|
$(this).css('z-index', 1);
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
$('.drop-card').droppable({
|
$('.drop-card').droppable({
|
||||||
@@ -306,28 +300,27 @@
|
|||||||
bad.play();
|
bad.play();
|
||||||
ui.helper.draggable('option', 'revert', true);
|
ui.helper.draggable('option', 'revert', true);
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function Completed() {
|
function Completed() {
|
||||||
const html = $("#pop0").html();
|
const html = $('#pop0').html();
|
||||||
Swal.fire({
|
Swal.fire({
|
||||||
html: html,
|
html: html,
|
||||||
target: "body",
|
target: document.getElementById('wrap-course-content'),
|
||||||
customClass: {
|
customClass: {
|
||||||
popup: 'pop_html_style border border-3 border-primary rounded-4',
|
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'
|
confirmButton: 'btn text-white bg-primary amor fw-semibold animate__animated animate__pulse animate__infinite',
|
||||||
},
|
},
|
||||||
confirmButtonText: "Cerrar",
|
confirmButtonText: 'Cerrar',
|
||||||
showConfirmButton: true,
|
showConfirmButton: true,
|
||||||
allowOutsideClick: false,
|
allowOutsideClick: false,
|
||||||
allowEscapeKey: false,
|
allowEscapeKey: false,
|
||||||
focusConfirm: false,
|
focusConfirm: false,
|
||||||
backdrop: "rgba(65, 60, 60, .95)",
|
backdrop: 'rgba(65, 60, 60, .95)',
|
||||||
width: "35em",
|
width: '35em',
|
||||||
didOpen: () => {
|
didOpen: () => {},
|
||||||
},
|
|
||||||
didClose: () => {
|
didClose: () => {
|
||||||
CourseNav.audioController.stopAudio();
|
CourseNav.audioController.stopAudio();
|
||||||
//CourseNav.soundClick();
|
//CourseNav.soundClick();
|
||||||
@@ -341,14 +334,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
readExcelFile(urlExcelFile, function (data) {
|
readExcelFile(urlExcelFile, function (data) {
|
||||||
const hojaDatos = data["DragAndDrop"];
|
const hojaDatos = data['DragAndDrop'];
|
||||||
questions = procesarPreguntas(hojaDatos);
|
questions = procesarPreguntas(hojaDatos);
|
||||||
CreateDragAndDrop();
|
CreateDragAndDrop();
|
||||||
initializeDragAndDrop();
|
initializeDragAndDrop();
|
||||||
//igualarAlturaBgCustomTransparent();
|
//igualarAlturaBgCustomTransparent();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
// Ajustar altura de todos los elementos .bg-custom-transparent al más alto
|
// Ajustar altura de todos los elementos .bg-custom-transparent al más alto
|
||||||
function igualarAlturaBgCustomTransparent() {
|
function igualarAlturaBgCustomTransparent() {
|
||||||
var maxHeight = 0;
|
var maxHeight = 0;
|
||||||
@@ -362,8 +354,5 @@
|
|||||||
|
|
||||||
/* $(window).on('resize', igualarAlturaBgCustomTransparent);
|
/* $(window).on('resize', igualarAlturaBgCustomTransparent);
|
||||||
igualarAlturaBgCustomTransparent(); */
|
igualarAlturaBgCustomTransparent(); */
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
+50
-48
@@ -13,8 +13,8 @@
|
|||||||
|
|
||||||
.drop-card {
|
.drop-card {
|
||||||
border: 3px dashed var(--bs-primary);
|
border: 3px dashed var(--bs-primary);
|
||||||
width: 56px;
|
width: 80px;
|
||||||
height: 56px;
|
height: 80px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* .content-enfermedad {
|
/* .content-enfermedad {
|
||||||
@@ -22,13 +22,13 @@
|
|||||||
} */
|
} */
|
||||||
|
|
||||||
.content-enfermedad img {
|
.content-enfermedad img {
|
||||||
height: 250px;
|
height: 240px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-drag {
|
.card-drag {
|
||||||
cursor: grab;
|
cursor: grab;
|
||||||
width: 50px;
|
width: 75px;
|
||||||
height: 50px;
|
height: 75px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-drag img {
|
.card-drag img {
|
||||||
@@ -47,24 +47,27 @@
|
|||||||
max-width: 40%;
|
max-width: 40%;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<div class='page-sco py-2 py-md-4 h-100'>
|
<div class="page-sco py-2 py-md-4 h-100">
|
||||||
<div class='container h-100'>
|
<div class="container h-100">
|
||||||
<div class='row justify-content-center align-items-center h-100'>
|
<div class="row justify-content-center align-items-center h-100" style="overflow: hidden">
|
||||||
<div class='col-12'>
|
<div class="col-12">
|
||||||
<div class='row justify-content-center'>
|
<div id="drag-drop-activity" class="row justify-content-center">
|
||||||
<div class="col-11">
|
<div class="col-11">
|
||||||
<h2 class="text-center fw-bold text-primary">¿Cómo funciona la diálisis peritoneal?</h2>
|
<h2 class="text-center fw-bold text-primary">¿Cómo funciona la diálisis peritoneal?<sup class="fw-bold">1,2,4,5</sup></h2>
|
||||||
<hr class="border border-3 border-verde-oscuro hr-style mx-auto my-0">
|
<hr class="border border-3 border-verde-oscuro hr-style mx-auto my-0" />
|
||||||
<h3 class="text-verde-oscuro fw-bold"><span class="text-lila-claro">></span> Glucosa</h3>
|
<!-- <h3 class="text-verde-oscuro fw-bold"><span class="text-lila-claro">></span> Glucosa</h3> -->
|
||||||
</div>
|
</div>
|
||||||
<div class="col-12 mb-3">
|
<div class="col-12">
|
||||||
<div class="card border-0 my-2 rounded bg-secondary shadow p-3 text-center">
|
<div class="card border-0 my-2 rounded bg-secondary shadow p-3 text-center">
|
||||||
<div class="d-flex justify-content-center align-items-center flex-row">
|
<div class="d-flex justify-content-center align-items-center flex-row">
|
||||||
<img src="img/2.1.png" class="img-fluid mx-3">
|
<img src="img/2.1.png" class="img-fluid mx-3" />
|
||||||
<p class="mb-0"><strong>Instrucciones:</strong> Observa los tapones, cada uno tiene un color que indica la concentración de su solución. Tu tarea es arrastrarlos hacia la solución que les corresponde.</p>
|
<p class="mb-0"><strong>Instrucciones:</strong> Observa los tapones, cada uno tiene un color que indica la concentración de su solución. Tu tarea es arrastrarlos hacia la solución que les corresponde.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="col-12 text-center mb-3">
|
||||||
|
<p class="small mb-0">"Estos son casos hipotéticos basados en las referencias bibliográficas."</p>
|
||||||
|
</div>
|
||||||
<div class="col-12 mb-3">
|
<div class="col-12 mb-3">
|
||||||
<div id="content-drags" class="d-flex flex-row justify-content-center gap-3"></div>
|
<div id="content-drags" class="d-flex flex-row justify-content-center gap-3"></div>
|
||||||
</div>
|
</div>
|
||||||
@@ -72,23 +75,23 @@
|
|||||||
<div class="card bg-transparent border-0 rounded-0 shadow-none p-0">
|
<div class="card bg-transparent border-0 rounded-0 shadow-none p-0">
|
||||||
<div class="d-flex flex-row justify-content-center gap-3">
|
<div class="d-flex flex-row justify-content-center gap-3">
|
||||||
<div class="content-enfermedad text-center">
|
<div class="content-enfermedad text-center">
|
||||||
<div class="card rounded bg-custom-transparent border-0 shadow px-3 py-2 my-3">
|
<div class="card rounded bg-custom-transparent border-0 shadow px-3 py-2 my-2">
|
||||||
<img src="img/5.1a.png" class="img-fluid">
|
<img src="img/5.1a.png" class="img-fluid" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="content-enfermedad text-center">
|
<div class="content-enfermedad text-center">
|
||||||
<div class="card rounded bg-custom-transparent border-0 shadow px-3 py-2 my-3">
|
<div class="card rounded bg-custom-transparent border-0 shadow px-3 py-2 my-2">
|
||||||
<img src="img/5.2a.png" class="img-fluid">
|
<img src="img/5.2a.png" class="img-fluid" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="content-enfermedad text-center">
|
<div class="content-enfermedad text-center">
|
||||||
<div class="card rounded bg-custom-transparent border-0 shadow px-3 py-2 my-3">
|
<div class="card rounded bg-custom-transparent border-0 shadow px-3 py-2 my-2">
|
||||||
<img src="img/5.3a.png" class="img-fluid">
|
<img src="img/5.3a.png" class="img-fluid" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="content-enfermedad text-center">
|
<div class="content-enfermedad text-center">
|
||||||
<div class="card rounded bg-custom-transparent border-0 shadow px-3 py-2 my-3">
|
<div class="card rounded bg-custom-transparent border-0 shadow px-3 py-2 my-2">
|
||||||
<img src="img/5.4a.png" class="img-fluid">
|
<img src="img/5.4a.png" class="img-fluid" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -102,8 +105,8 @@
|
|||||||
<div class="d-none">
|
<div class="d-none">
|
||||||
<div id="pop0">
|
<div id="pop0">
|
||||||
<div class="container-fluid">
|
<div class="container-fluid">
|
||||||
<div class=" w-100 text-center">
|
<div class="w-100 text-center">
|
||||||
<img src="img/3.5.png" class="img-fluid">
|
<img src="img/3.5.png" class="img-fluid" />
|
||||||
</div>
|
</div>
|
||||||
<div class="row justify-content-center">
|
<div class="row justify-content-center">
|
||||||
<div class="col-12 text-center mb-2">
|
<div class="col-12 text-center mb-2">
|
||||||
@@ -136,9 +139,9 @@
|
|||||||
xhr.onload = function (e) {
|
xhr.onload = function (e) {
|
||||||
var arrayBuffer = xhr.response;
|
var arrayBuffer = xhr.response;
|
||||||
var data = new Uint8Array(arrayBuffer);
|
var data = new Uint8Array(arrayBuffer);
|
||||||
var workbook = XLSX.read(data, { type: "array" });
|
var workbook = XLSX.read(data, { type: 'array' });
|
||||||
var result = {};
|
var result = {};
|
||||||
workbook.SheetNames.forEach(sheetName => {
|
workbook.SheetNames.forEach((sheetName) => {
|
||||||
var sheet = workbook.Sheets[sheetName];
|
var sheet = workbook.Sheets[sheetName];
|
||||||
result[sheetName] = XLSX.utils.sheet_to_json(sheet);
|
result[sheetName] = XLSX.utils.sheet_to_json(sheet);
|
||||||
});
|
});
|
||||||
@@ -148,13 +151,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
function procesarPreguntas(data) {
|
function procesarPreguntas(data) {
|
||||||
const preguntas = data.map(fila => {
|
const preguntas = data.map((fila) => {
|
||||||
const opciones = [];
|
const opciones = [];
|
||||||
Object.keys(fila).forEach(key => {
|
Object.keys(fila).forEach((key) => {
|
||||||
if (key.startsWith('opcion')) {
|
if (key.startsWith('opcion')) {
|
||||||
opciones.push({
|
opciones.push({
|
||||||
text: fila[key].trim(),
|
text: fila[key].trim(),
|
||||||
correct: key === 'opcion_c'
|
correct: key === 'opcion_c',
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
@@ -162,7 +165,7 @@
|
|||||||
pregunta: fila.pregunta.trim(),
|
pregunta: fila.pregunta.trim(),
|
||||||
opciones: opciones,
|
opciones: opciones,
|
||||||
retroalimentacion_correcta: fila.retroalimentacion_correcta.trim(),
|
retroalimentacion_correcta: fila.retroalimentacion_correcta.trim(),
|
||||||
retroalimentacion_incorrecta: fila.retroalimentacion_incorrecta.trim()
|
retroalimentacion_incorrecta: fila.retroalimentacion_incorrecta.trim(),
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
return preguntas;
|
return preguntas;
|
||||||
@@ -187,13 +190,13 @@
|
|||||||
// Crear todas las respuestas en #content-drags
|
// Crear todas las respuestas en #content-drags
|
||||||
let allOptions = [];
|
let allOptions = [];
|
||||||
questions.forEach((question, index) => {
|
questions.forEach((question, index) => {
|
||||||
question.opciones.forEach(opcion => {
|
question.opciones.forEach((opcion) => {
|
||||||
allOptions.push({ text: opcion.text, index: index });
|
allOptions.push({ text: opcion.text, index: index });
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
allOptions = shuffleArray(allOptions);
|
allOptions = shuffleArray(allOptions);
|
||||||
allOptions.forEach(option => {
|
allOptions.forEach((option) => {
|
||||||
const dragDiv = `<div class="card card-drag bg-transparent border border-2 border-secondary rounded-0 shadow-none text-white text-center" data-drag="${option.index}">${option.text}</div>`;
|
const dragDiv = `<div class="card card-drag bg-transparent border border-2 border-secondary rounded-0 shadow-none text-white text-center" data-drag="${option.index}">${option.text}</div>`;
|
||||||
$('#content-drags').append(dragDiv);
|
$('#content-drags').append(dragDiv);
|
||||||
});
|
});
|
||||||
@@ -203,24 +206,24 @@
|
|||||||
$('.card-drag').draggable({
|
$('.card-drag').draggable({
|
||||||
revert: 'invalid',
|
revert: 'invalid',
|
||||||
revertDuration: 300,
|
revertDuration: 300,
|
||||||
containment: "#drag-drop-activity",
|
cursor: 'grabbing',
|
||||||
cursor: "grabbing",
|
|
||||||
start: function (event, ui) {
|
start: function (event, ui) {
|
||||||
$(this).css('z-index', 1000);
|
$(this).css('z-index', 1000);
|
||||||
ui.position.left = 0;
|
ui.position.left = 0;
|
||||||
ui.position.top = 0;
|
ui.position.top = 0;
|
||||||
},
|
},
|
||||||
drag: function (event, ui) {
|
drag: function (event, ui) {
|
||||||
|
var scale = parseFloat($('.wrap-course-content').css('transform').split('(')[1]) || 1;
|
||||||
var changeLeft = ui.position.left - ui.originalPosition.left;
|
var changeLeft = ui.position.left - ui.originalPosition.left;
|
||||||
var newLeft = ui.originalPosition.left + changeLeft;
|
var newLeft = ui.originalPosition.left + changeLeft / scale;
|
||||||
var changeTop = ui.position.top - ui.originalPosition.top;
|
var changeTop = ui.position.top - ui.originalPosition.top;
|
||||||
var newTop = ui.originalPosition.top + changeTop;
|
var newTop = ui.originalPosition.top + changeTop / scale;
|
||||||
ui.position.left = newLeft;
|
ui.position.left = newLeft;
|
||||||
ui.position.top = newTop;
|
ui.position.top = newTop;
|
||||||
},
|
},
|
||||||
stop: function (event, ui) {
|
stop: function (event, ui) {
|
||||||
$(this).css('z-index', 1);
|
$(this).css('z-index', 1);
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
$('.drop-card').droppable({
|
$('.drop-card').droppable({
|
||||||
@@ -244,28 +247,27 @@
|
|||||||
bad.play();
|
bad.play();
|
||||||
ui.helper.draggable('option', 'revert', true);
|
ui.helper.draggable('option', 'revert', true);
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function Completed() {
|
function Completed() {
|
||||||
const html = $("#pop0").html();
|
const html = $('#pop0').html();
|
||||||
Swal.fire({
|
Swal.fire({
|
||||||
html: html,
|
html: html,
|
||||||
target: "body",
|
target: document.getElementById('wrap-course-content'),
|
||||||
customClass: {
|
customClass: {
|
||||||
popup: 'pop_html_style border border-3 border-primary rounded-4',
|
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'
|
confirmButton: 'btn text-white bg-primary amor fw-semibold animate__animated animate__pulse animate__infinite',
|
||||||
},
|
},
|
||||||
confirmButtonText: "Cerrar",
|
confirmButtonText: 'Cerrar',
|
||||||
showConfirmButton: true,
|
showConfirmButton: true,
|
||||||
allowOutsideClick: false,
|
allowOutsideClick: false,
|
||||||
allowEscapeKey: false,
|
allowEscapeKey: false,
|
||||||
focusConfirm: false,
|
focusConfirm: false,
|
||||||
backdrop: "rgba(65, 60, 60, .95)",
|
backdrop: 'rgba(65, 60, 60, .95)',
|
||||||
width: "35em",
|
width: '35em',
|
||||||
didOpen: () => {
|
didOpen: () => {},
|
||||||
},
|
|
||||||
didClose: () => {
|
didClose: () => {
|
||||||
CourseNav.audioController.stopAudio();
|
CourseNav.audioController.stopAudio();
|
||||||
//CourseNav.soundClick();
|
//CourseNav.soundClick();
|
||||||
@@ -279,7 +281,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
readExcelFile(urlExcelFile, function (data) {
|
readExcelFile(urlExcelFile, function (data) {
|
||||||
const hojaDatos = data["DragAndDrop"];
|
const hojaDatos = data['DragAndDrop'];
|
||||||
questions = procesarPreguntas(hojaDatos);
|
questions = procesarPreguntas(hojaDatos);
|
||||||
CreateDragAndDrop();
|
CreateDragAndDrop();
|
||||||
initializeDragAndDrop();
|
initializeDragAndDrop();
|
||||||
|
|||||||
+54
-30
@@ -15,24 +15,26 @@
|
|||||||
width: 23%;
|
width: 23%;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<div class='page-sco py-2 py-md-4 h-100'>
|
<div class="page-sco py-2 py-md-4 h-100">
|
||||||
<div class='container h-100'>
|
<div class="container h-100">
|
||||||
<div class='row justify-content-center align-items-center h-100'>
|
<div class="row justify-content-center align-items-center h-100">
|
||||||
<div class='col-12'>
|
<div class="col-12">
|
||||||
<div class='row justify-content-center'>
|
<div class="row justify-content-center">
|
||||||
<div class="col-11 mb-2">
|
<div class="col-11 mb-2">
|
||||||
<h2 class="text-center fw-bold text-primary">¿Cómo funciona la diálisis peritoneal?</h2>
|
<h2 class="text-center fw-bold text-primary">¿Cómo funciona la diálisis peritoneal?<sup class="fw-bold">1,2,4,6</sup></h2>
|
||||||
<hr class="border border-3 border-verde-oscuro hr-style mx-auto my-0">
|
<hr class="border border-3 border-verde-oscuro hr-style mx-auto my-0" />
|
||||||
</div>
|
</div>
|
||||||
<div class="col-9 mb-3">
|
<div class="col-9 mb-2">
|
||||||
<div class="card border-0 my-2 rounded bg-secondary shadow p-3 text-center">
|
<div class="card border-0 my-2 rounded bg-secondary shadow p-3 text-center">
|
||||||
<div class="d-flex justify-content-center align-items-center flex-row">
|
<div class="d-flex justify-content-center align-items-center flex-row">
|
||||||
<img src="img/2.1.png" class="img-fluid mx-3">
|
<img src="img/2.1.png" class="img-fluid mx-3" />
|
||||||
<p class="mb-0"><strong>Instrucciones:</strong> Arrastre los pasos del recambio para
|
<p class="mb-0"><strong>Instrucciones:</strong> Arrastra los pasos del recambio para colocarlos en el orden correcto.</p>
|
||||||
colocarlos en el orden correcto.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="col-12 text-center mb-3">
|
||||||
|
<p class="small mb-0">"Estos son casos hipotéticos basados en las referencias bibliográficas."</p>
|
||||||
|
</div>
|
||||||
<div class="col-12">
|
<div class="col-12">
|
||||||
<div id="activity1" class="my-4">
|
<div id="activity1" class="my-4">
|
||||||
<div id="sortable-cards" class="d-flex flex-row gap-3 justify-content-center flex-wrap">
|
<div id="sortable-cards" class="d-flex flex-row gap-3 justify-content-center flex-wrap">
|
||||||
@@ -48,8 +50,8 @@
|
|||||||
<div class="d-none">
|
<div class="d-none">
|
||||||
<div id="pop0">
|
<div id="pop0">
|
||||||
<div class="container-fluid">
|
<div class="container-fluid">
|
||||||
<div class=" w-100 text-center">
|
<div class="w-100 text-center">
|
||||||
<img src="img/3.5.png" class="img-fluid">
|
<img src="img/3.5.png" class="img-fluid" />
|
||||||
</div>
|
</div>
|
||||||
<div class="row justify-content-center">
|
<div class="row justify-content-center">
|
||||||
<div class="col-12 text-center mb-2">
|
<div class="col-12 text-center mb-2">
|
||||||
@@ -64,7 +66,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<script>
|
<script>
|
||||||
$(function () {
|
$(function () {
|
||||||
"use strict";
|
'use strict';
|
||||||
$('.wrap-course-content').addClass('fake');
|
$('.wrap-course-content').addClass('fake');
|
||||||
|
|
||||||
// Función para mezclar array (algoritmo Fisher-Yates)
|
// Función para mezclar array (algoritmo Fisher-Yates)
|
||||||
@@ -77,38 +79,56 @@
|
|||||||
return shuffled;
|
return shuffled;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// const imgNums = ['img/06.0.png', 'img/06.1.png', 'img/06.2.png'];
|
||||||
|
|
||||||
// Crear y mezclar las tarjetas
|
// Crear y mezclar las tarjetas
|
||||||
function createShuffledCards() {
|
function createShuffledCards() {
|
||||||
const cards = [1, 2, 3];
|
const cards = [1, 2, 3];
|
||||||
const shuffledCards = shuffleArray(cards);
|
let shuffledCards;
|
||||||
|
do {
|
||||||
|
shuffledCards = shuffleArray(cards);
|
||||||
|
} while (shuffledCards[0] === 1 && shuffledCards[1] === 2 && shuffledCards[2] === 3);
|
||||||
const container = $('#sortable-cards');
|
const container = $('#sortable-cards');
|
||||||
|
|
||||||
// Limpiar contenedor
|
// Limpiar contenedor
|
||||||
container.empty();
|
container.empty();
|
||||||
|
|
||||||
// Crear tarjetas mezcladas
|
// Crear tarjetas mezcladas
|
||||||
shuffledCards.forEach(number => {
|
shuffledCards.forEach((number, index) => {
|
||||||
const cardHtml = `
|
const cardHtml = `
|
||||||
<div class="card border-0 card-sort bg-verde-claro text-white fw-bold text-center"
|
<div class="card border-0 card-sort bg-transparent text-white fw-bold text-center shadow-none"
|
||||||
data-order="${number}"
|
data-order="${number}"
|
||||||
style="cursor:grab;">
|
style="cursor:grab;">
|
||||||
<div class="card-body px-0 py-0">
|
|
||||||
|
<div class="card-body bg-verde-claro px-0 py-0">
|
||||||
<img src="img/5.${number}b.png" class="img-fluid">
|
<img src="img/5.${number}b.png" class="img-fluid">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
container.append(cardHtml);
|
container.append(cardHtml);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Actualizar números después de crear las tarjetas
|
||||||
|
// updateCardNumbers();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Actualizar números mostrados según posición actual
|
||||||
|
// function updateCardNumbers() {
|
||||||
|
// $('#sortable-cards .card-sort').each(function (index) {
|
||||||
|
// $(this).find('.nums img').attr('src', imgNums[index]);
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
|
||||||
// Verificar si las tarjetas están en orden correcto
|
// Verificar si las tarjetas están en orden correcto
|
||||||
function checkOrder() {
|
function checkOrder() {
|
||||||
let correct = true;
|
let correct = true;
|
||||||
$('#sortable-cards .card-sort').each(function (index) {
|
$('#sortable-cards .card-sort').each(function (index) {
|
||||||
if ($(this).data('order') === index + 1) {
|
if ($(this).data('order') === index + 1) {
|
||||||
$(this).removeClass('bg-verde-claro').addClass('bg-verde-pasto');
|
$(this).find('.card-body').removeClass('bg-verde-claro').addClass('bg-verde-pasto');
|
||||||
|
$(this).addClass('locked').css('cursor', 'default');
|
||||||
} else {
|
} else {
|
||||||
$(this).removeClass('bg-verde-pasto').addClass('bg-verde-claro');
|
$(this).find('.card-body').removeClass('bg-verde-pasto').addClass('bg-verde-claro');
|
||||||
|
$(this).removeClass('locked').css('cursor', 'grab');
|
||||||
correct = false;
|
correct = false;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
@@ -124,28 +144,29 @@
|
|||||||
containment: '#activity1',
|
containment: '#activity1',
|
||||||
cursor: 'grabbing',
|
cursor: 'grabbing',
|
||||||
tolerance: 'pointer',
|
tolerance: 'pointer',
|
||||||
helper: "clone",
|
helper: 'clone',
|
||||||
cursorAt: { top: 50, left: 50 },
|
cursorAt: { top: 50, left: 50 },
|
||||||
|
cancel: '.locked',
|
||||||
update: function (event, ui) {
|
update: function (event, ui) {
|
||||||
|
// updateCardNumbers();
|
||||||
if (checkOrder()) {
|
if (checkOrder()) {
|
||||||
$('#sortable-cards').sortable('disable');
|
$('#sortable-cards').sortable('disable');
|
||||||
const html = $("#pop0").html();
|
const html = $('#pop0').html();
|
||||||
Swal.fire({
|
Swal.fire({
|
||||||
html: html,
|
html: html,
|
||||||
target: "body",
|
target: document.getElementById('wrap-course-content'),
|
||||||
customClass: {
|
customClass: {
|
||||||
popup: 'pop_html_style border border-3 border-primary rounded-4',
|
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'
|
confirmButton: 'btn text-white bg-primary amor fw-semibold animate__animated animate__pulse animate__infinite',
|
||||||
},
|
},
|
||||||
confirmButtonText: "Cerrar",
|
confirmButtonText: 'Cerrar',
|
||||||
showConfirmButton: true,
|
showConfirmButton: true,
|
||||||
allowOutsideClick: false,
|
allowOutsideClick: false,
|
||||||
allowEscapeKey: false,
|
allowEscapeKey: false,
|
||||||
focusConfirm: false,
|
focusConfirm: false,
|
||||||
backdrop: "rgba(65, 60, 60, .95)",
|
backdrop: 'rgba(65, 60, 60, .95)',
|
||||||
width: "35em",
|
width: '35em',
|
||||||
didOpen: () => {
|
didOpen: () => {},
|
||||||
},
|
|
||||||
didClose: () => {
|
didClose: () => {
|
||||||
CourseNav.audioController.stopAudio();
|
CourseNav.audioController.stopAudio();
|
||||||
//CourseNav.soundClick();
|
//CourseNav.soundClick();
|
||||||
@@ -159,6 +180,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
start: function (event, ui) {
|
start: function (event, ui) {
|
||||||
|
if (ui.item.hasClass('locked')) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
ui.item.addClass('ui-sortable-helper');
|
ui.item.addClass('ui-sortable-helper');
|
||||||
if (ui.position) {
|
if (ui.position) {
|
||||||
ui.position.left = 0;
|
ui.position.left = 0;
|
||||||
@@ -177,7 +201,7 @@
|
|||||||
},
|
},
|
||||||
stop: function (event, ui) {
|
stop: function (event, ui) {
|
||||||
ui.item.removeClass('ui-sortable-helper');
|
ui.item.removeClass('ui-sortable-helper');
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
// Hacer las tarjetas arrastrables
|
// Hacer las tarjetas arrastrables
|
||||||
|
|||||||
+61
-56
@@ -12,7 +12,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.bg-custom {
|
.bg-custom {
|
||||||
box-shadow: 0 0 10px rgba(0, 0, 0, .5);
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-answer {
|
.btn-answer {
|
||||||
@@ -43,7 +43,7 @@
|
|||||||
|
|
||||||
.content-medidor {
|
.content-medidor {
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
box-shadow: 0 0 12px rgba(0, 0, 0, .5);
|
box-shadow: 0 0 12px rgba(0, 0, 0, 0.5);
|
||||||
border-radius: 40px;
|
border-radius: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -53,8 +53,8 @@
|
|||||||
grid-template-columns: repeat(6, 1fr);
|
grid-template-columns: repeat(6, 1fr);
|
||||||
grid-template-rows: auto;
|
grid-template-rows: auto;
|
||||||
gap: 0;
|
gap: 0;
|
||||||
background: #E7E7E7;
|
background: #e7e7e7;
|
||||||
background: linear-gradient(to left, #E7E7E7 0%, #C3C3C3 100%);
|
background: linear-gradient(to left, #e7e7e7 0%, #c3c3c3 100%);
|
||||||
border-radius: 40px;
|
border-radius: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -78,8 +78,8 @@
|
|||||||
.med_style:first-child {
|
.med_style:first-child {
|
||||||
border-top-left-radius: 40px;
|
border-top-left-radius: 40px;
|
||||||
border-bottom-left-radius: 40px;
|
border-bottom-left-radius: 40px;
|
||||||
background: #DF0000;
|
background: #df0000;
|
||||||
background: linear-gradient(to top, #DF0000 0%, #4F0700 100%);
|
background: linear-gradient(to top, #df0000 0%, #4f0700 100%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.med_style:nth-child(2),
|
.med_style:nth-child(2),
|
||||||
@@ -118,22 +118,24 @@
|
|||||||
left: 10px;
|
left: 10px;
|
||||||
transition: left 0.5s ease;
|
transition: left 0.5s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
<div class='page-sco py-2 py-md-4 h-100'>
|
<div class="page-sco py-2 py-md-4 h-100">
|
||||||
<div class='container h-100'>
|
<div class="container h-100">
|
||||||
<div class='row justify-content-center align-items-center h-100'>
|
<div class="row justify-content-center align-items-center h-100">
|
||||||
<div class='col-12'>
|
<div class="col-12">
|
||||||
<div class='row justify-content-center'>
|
<div class="row justify-content-center">
|
||||||
<div class="col-10 mb-2">
|
<div class="col-10 mb-2">
|
||||||
<h2 class="text-center fw-bold text-primary">Tipos de diálisis peritoneal</h2>
|
<h2 class="text-center fw-bold text-primary">Tipos de diálisis peritoneal</h2>
|
||||||
<hr class="border border-3 border-verde-oscuro hr-style mx-auto my-0">
|
<hr class="border border-3 border-verde-oscuro hr-style mx-auto my-0" />
|
||||||
</div>
|
</div>
|
||||||
<div class="col-12 px-0 mb-3">
|
<div class="col-12 px-0 mb-3">
|
||||||
<div class="card bg-white border-0 my-2 rounded-0 bg-custom p-3 text-center">
|
<div class="card bg-white border-0 my-2 rounded-0 bg-custom p-3 text-center">
|
||||||
<div class="d-flex justify-content-center align-items-center flex-row">
|
<div class="d-flex justify-content-center align-items-center flex-row">
|
||||||
<img src="img/3.1.png" class="img-fluid mx-3">
|
<img src="img/3.1.png" class="img-fluid mx-3" />
|
||||||
<p class="mb-0"><strong>Instrucciones:</strong> Presiona cada ícono, lee con atención las oraciones que se presentan acerca de los tipos de diálisis y determina si son falsas o verdaderas para llenar el medidor de salud del paciente.</p>
|
<p class="mb-0">
|
||||||
|
<strong>Instrucciones:</strong> Presiona cada ícono, lee con atención las oraciones que se presentan acerca de los tipos de diálisis y determina si son falsas o verdaderas.
|
||||||
|
<!-- para llenar el medidor de salud del paciente. -->
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -141,7 +143,7 @@
|
|||||||
<div class="row justify-content-center align-items-center">
|
<div class="row justify-content-center align-items-center">
|
||||||
<div class="col-12 text-center mb-5">
|
<div class="col-12 text-center mb-5">
|
||||||
<div class="content-medidor p-2 d-inline-flex flex-row justify-content-center align-items-center gap-3">
|
<div class="content-medidor p-2 d-inline-flex flex-row justify-content-center align-items-center gap-3">
|
||||||
<img src="img/07.7.png" class="img-fluid">
|
<img src="img/07.7.png" class="img-fluid" />
|
||||||
<div class="termometro p-1">
|
<div class="termometro p-1">
|
||||||
<div id="#med0" class="med_style"></div>
|
<div id="#med0" class="med_style"></div>
|
||||||
<div id="#med1" class="med_style"></div>
|
<div id="#med1" class="med_style"></div>
|
||||||
@@ -150,28 +152,28 @@
|
|||||||
<div id="#med4" class="med_style"></div>
|
<div id="#med4" class="med_style"></div>
|
||||||
<div id="#med5" class="med_style"></div>
|
<div id="#med5" class="med_style"></div>
|
||||||
<div id="indicador" class="indicador-med d-flex flex-row justify-content-center align-items-center">
|
<div id="indicador" class="indicador-med d-flex flex-row justify-content-center align-items-center">
|
||||||
<img src="img/07.5.png" class="img-fluid">
|
<img src="img/07.5.png" class="img-fluid" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<img src="img/07.6.png" class="img-fluid">
|
<img src="img/07.6.png" class="img-fluid" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-12">
|
<div class="col-12">
|
||||||
<div class="d-flex flex-row justify-content-center align-items-center gap-3">
|
<div class="d-flex flex-row justify-content-center align-items-center gap-3">
|
||||||
<div class="object-btn text-center d-inline-block animate__animated animate__pulse animate__infinite" data-obj="0">
|
<div class="object-btn text-center d-inline-block animate__animated animate__pulse animate__infinite" data-obj="0">
|
||||||
<img src="img/07.0.png" class="img-fluid">
|
<img src="img/07.4.png" class="img-fluid" />
|
||||||
</div>
|
</div>
|
||||||
<div class="object-btn text-center d-inline-block animate__animated animate__pulse animate__infinite" data-obj="1">
|
<div class="object-btn text-center d-inline-block animate__animated animate__pulse animate__infinite" data-obj="1">
|
||||||
<img src="img/07.1.png" class="img-fluid">
|
<img src="img/07.3.png" class="img-fluid" />
|
||||||
</div>
|
</div>
|
||||||
<div class="object-btn text-center d-inline-block animate__animated animate__pulse animate__infinite" data-obj="2">
|
<div class="object-btn text-center d-inline-block animate__animated animate__pulse animate__infinite" data-obj="2">
|
||||||
<img src="img/07.2.png" class="img-fluid">
|
<img src="img/07.2.png" class="img-fluid" />
|
||||||
</div>
|
</div>
|
||||||
<div class="object-btn text-center d-inline-block animate__animated animate__pulse animate__infinite" data-obj="3">
|
<div class="object-btn text-center d-inline-block animate__animated animate__pulse animate__infinite" data-obj="3">
|
||||||
<img src="img/07.3.png" class="img-fluid">
|
<img src="img/07.1.png" class="img-fluid" style="max-width: 223px" />
|
||||||
</div>
|
</div>
|
||||||
<div class="object-btn text-center d-inline-block animate__animated animate__pulse animate__infinite" data-obj="4">
|
<div class="object-btn text-center d-inline-block animate__animated animate__pulse animate__infinite" data-obj="4">
|
||||||
<img src="img/07.4.png" class="img-fluid">
|
<img src="img/07.0.png" class="img-fluid" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -187,16 +189,19 @@
|
|||||||
<div class="container-fluid">
|
<div class="container-fluid">
|
||||||
<div class="row justify-content-center align-items-center">
|
<div class="row justify-content-center align-items-center">
|
||||||
<div id="txt-question" class="col-12 text-center text-verde-oscuro fw-bold mb-3"></div>
|
<div id="txt-question" class="col-12 text-center text-verde-oscuro fw-bold mb-3"></div>
|
||||||
<div class="col-12">
|
<div class="col-12 mb-3">
|
||||||
<div id="txt-answers" class="d-flex flex-row justify-content-center align-items-center gap-3"></div>
|
<div id="txt-answers" class="d-flex flex-row justify-content-center align-items-center gap-3"></div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="col-12 text-center">
|
||||||
|
<p class="small mb-0">"Estos son casos hipotéticos basados en las referencias bibliográficas."</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="pop0">
|
<div id="pop0">
|
||||||
<div class="container-fluid">
|
<div class="container-fluid">
|
||||||
<div class=" w-100 text-center">
|
<div class="w-100 text-center">
|
||||||
<img src="img/3.5.png" class="img-fluid">
|
<img src="img/3.5.png" class="img-fluid" />
|
||||||
</div>
|
</div>
|
||||||
<div class="row justify-content-center">
|
<div class="row justify-content-center">
|
||||||
<div class="col-12 text-center mb-2">
|
<div class="col-12 text-center mb-2">
|
||||||
@@ -211,7 +216,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<script>
|
<script>
|
||||||
$(function () {
|
$(function () {
|
||||||
"use strict";
|
'use strict';
|
||||||
$('.wrap-course-content').addClass('fake');
|
$('.wrap-course-content').addClass('fake');
|
||||||
|
|
||||||
let questions;
|
let questions;
|
||||||
@@ -223,7 +228,7 @@
|
|||||||
const bad = CourseNav.createSound('audio/feedback-incorrect.mpeg');
|
const bad = CourseNav.createSound('audio/feedback-incorrect.mpeg');
|
||||||
const good = CourseNav.createSound('audio/feedback-correct.mpeg');
|
const good = CourseNav.createSound('audio/feedback-correct.mpeg');
|
||||||
|
|
||||||
const urlExcelFile = 'verdadero_falso.xlsx';
|
const urlExcelFile = 'Actividades_Rotafolio_Vantive.xlsx';
|
||||||
|
|
||||||
function readExcelFile(url, callback) {
|
function readExcelFile(url, callback) {
|
||||||
var xhr = new XMLHttpRequest();
|
var xhr = new XMLHttpRequest();
|
||||||
@@ -232,9 +237,9 @@
|
|||||||
xhr.onload = function (e) {
|
xhr.onload = function (e) {
|
||||||
var arrayBuffer = xhr.response;
|
var arrayBuffer = xhr.response;
|
||||||
var data = new Uint8Array(arrayBuffer);
|
var data = new Uint8Array(arrayBuffer);
|
||||||
var workbook = XLSX.read(data, { type: "array" });
|
var workbook = XLSX.read(data, { type: 'array' });
|
||||||
var result = {};
|
var result = {};
|
||||||
workbook.SheetNames.forEach(sheetName => {
|
workbook.SheetNames.forEach((sheetName) => {
|
||||||
var sheet = workbook.Sheets[sheetName];
|
var sheet = workbook.Sheets[sheetName];
|
||||||
result[sheetName] = XLSX.utils.sheet_to_json(sheet);
|
result[sheetName] = XLSX.utils.sheet_to_json(sheet);
|
||||||
});
|
});
|
||||||
@@ -244,21 +249,21 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
function procesarPreguntas(data) {
|
function procesarPreguntas(data) {
|
||||||
const preguntas = data.map(fila => {
|
const preguntas = data.map((fila) => {
|
||||||
const opciones = [];
|
const opciones = [];
|
||||||
Object.keys(fila).forEach(key => {
|
Object.keys(fila).forEach((key) => {
|
||||||
if (key.startsWith('opcion')) {
|
if (key.startsWith('opcion')) {
|
||||||
opciones.push({
|
opciones.push({
|
||||||
text: fila[key].trim(),
|
text: String(fila[key]).trim(),
|
||||||
correct: key === 'opcion_c'
|
correct: key === 'opcion_c',
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
return {
|
return {
|
||||||
pregunta: fila.pregunta.trim(),
|
pregunta: String(fila.pregunta).trim(),
|
||||||
opciones: opciones,
|
opciones: opciones,
|
||||||
retroalimentacion_correcta: fila.retroalimentacion_correcta ? fila.retroalimentacion_correcta.trim() : '',
|
retroalimentacion_correcta: fila.retroalimentacion_correcta ? fila.retroalimentacion_correcta.trim() : '',
|
||||||
retroalimentacion_incorrecta: fila.retroalimentacion_incorrecta ? fila.retroalimentacion_incorrecta.trim() : ''
|
retroalimentacion_incorrecta: fila.retroalimentacion_incorrecta ? fila.retroalimentacion_incorrecta.trim() : '',
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
return preguntas;
|
return preguntas;
|
||||||
@@ -273,9 +278,9 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Cargar preguntas al inicio
|
// Cargar preguntas al inicio
|
||||||
readExcelFile(urlExcelFile, function(data) {
|
readExcelFile(urlExcelFile, function (data) {
|
||||||
const sheetData = data[Object.keys(data)[0]];
|
const hojaDatos = data['Diapositiva 7'];
|
||||||
questions = procesarPreguntas(sheetData);
|
questions = procesarPreguntas(hojaDatos);
|
||||||
});
|
});
|
||||||
|
|
||||||
$('.object-btn').click(function (e) {
|
$('.object-btn').click(function (e) {
|
||||||
@@ -289,25 +294,25 @@
|
|||||||
});
|
});
|
||||||
|
|
||||||
function showRandomQuestion() {
|
function showRandomQuestion() {
|
||||||
// Seleccionar pregunta aleatoria
|
// Seleccionar pregunta en orden secuencial
|
||||||
const randomIndex = Math.floor(Math.random() * questions.length);
|
currentQuestion = questions[currentQuestionIndex];
|
||||||
currentQuestion = questions[randomIndex];
|
currentQuestionIndex = (currentQuestionIndex + 1) % questions.length;
|
||||||
|
|
||||||
const html = $("#pops-questions").html();
|
const html = $('#pops-questions').html();
|
||||||
Swal.fire({
|
Swal.fire({
|
||||||
html: html,
|
html: html,
|
||||||
target: "body",
|
target: document.getElementById('wrap-course-content'),
|
||||||
customClass: {
|
customClass: {
|
||||||
popup: 'pop_html_style border border-3 border-primary rounded-4',
|
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'
|
confirmButton: 'btn text-white bg-primary amor fw-semibold animate__animated animate__pulse animate__infinite',
|
||||||
},
|
},
|
||||||
confirmButtonText: "Cerrar",
|
confirmButtonText: 'Cerrar',
|
||||||
showConfirmButton: false,
|
showConfirmButton: false,
|
||||||
allowOutsideClick: false,
|
allowOutsideClick: false,
|
||||||
allowEscapeKey: false,
|
allowEscapeKey: false,
|
||||||
focusConfirm: false,
|
focusConfirm: false,
|
||||||
backdrop: "rgba(65, 60, 60, .95)",
|
backdrop: 'rgba(65, 60, 60, .95)',
|
||||||
width: "45em",
|
width: '45em',
|
||||||
didOpen: () => {
|
didOpen: () => {
|
||||||
displayQuestion();
|
displayQuestion();
|
||||||
},
|
},
|
||||||
@@ -339,7 +344,7 @@
|
|||||||
txtAnswers.html(answersHtml);
|
txtAnswers.html(answersHtml);
|
||||||
|
|
||||||
// Event listener para respuestas
|
// Event listener para respuestas
|
||||||
contentSwal.find('.btn-answer').click(function() {
|
contentSwal.find('.btn-answer').click(function () {
|
||||||
isCorrectAnswer = $(this).data('correct');
|
isCorrectAnswer = $(this).data('correct');
|
||||||
$(this).addClass('selected');
|
$(this).addClass('selected');
|
||||||
if (isCorrectAnswer) {
|
if (isCorrectAnswer) {
|
||||||
@@ -366,23 +371,23 @@
|
|||||||
|
|
||||||
if (totalButtons === completedButtons) {
|
if (totalButtons === completedButtons) {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
const html = $("#pop0").html();
|
const html = $('#pop0').html();
|
||||||
Swal.fire({
|
Swal.fire({
|
||||||
html: html,
|
html: html,
|
||||||
target: "body",
|
target: document.getElementById('wrap-course-content'),
|
||||||
customClass: {
|
customClass: {
|
||||||
popup: 'pop_html_style border border-3 border-primary rounded-4',
|
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'
|
confirmButton: 'btn text-white bg-primary amor fw-semibold animate__animated animate__pulse animate__infinite',
|
||||||
},
|
},
|
||||||
confirmButtonText: "Cerrar",
|
confirmButtonText: 'Cerrar',
|
||||||
showConfirmButton: true,
|
showConfirmButton: true,
|
||||||
allowOutsideClick: false,
|
allowOutsideClick: false,
|
||||||
allowEscapeKey: false,
|
allowEscapeKey: false,
|
||||||
backdrop: "rgba(65, 60, 60, .95)",
|
backdrop: 'rgba(65, 60, 60, .95)',
|
||||||
width: "35em",
|
width: '35em',
|
||||||
didClose: () => {
|
didClose: () => {
|
||||||
CourseNav.setSlideVisited();
|
CourseNav.setSlideVisited();
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
}, 250);
|
}, 250);
|
||||||
}
|
}
|
||||||
|
|||||||
+7
-4
@@ -53,6 +53,9 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="col-12 text-center mb-2">
|
||||||
|
<p class="small mb-0">"Estos son casos hipotéticos basados en las referencias bibliográficas."</p>
|
||||||
|
</div>
|
||||||
<div class="col-12">
|
<div class="col-12">
|
||||||
<di class="tablero d-flex flex-column justify-content-center align-items-center gap-2">
|
<di class="tablero d-flex flex-column justify-content-center align-items-center gap-2">
|
||||||
<div class="row-questions custom-grid" id="row-questions">
|
<div class="row-questions custom-grid" id="row-questions">
|
||||||
@@ -166,14 +169,14 @@
|
|||||||
<div id="retro-pop">
|
<div id="retro-pop">
|
||||||
<div class="container-fluid">
|
<div class="container-fluid">
|
||||||
<div class=" w-100 text-center">
|
<div class=" w-100 text-center">
|
||||||
<img src="img/3.5.png" class="img-fluid">
|
<img src="img/08.7.png" class="img-fluid">
|
||||||
</div>
|
</div>
|
||||||
<div class="row justify-content-center">
|
<div class="row justify-content-center">
|
||||||
<div class="col-12 text-center mb-2">
|
<div class="col-12 text-center mb-2">
|
||||||
<h3 class="text-secondary-dark fw-bold">¡Bien hecho!</h3>
|
<h3 class="text-secondary-dark fw-bold">¡Recuerda!</h3>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-12 text-center">
|
<div class="col-12 text-center">
|
||||||
<p class="mb-0">Has concluido la actividad.</p>
|
<p class="mb-0">Siempre debes lavar tus manos de acuerdo con la técnica de la OMS antes de empezar cualquier terapia<sup class="fw-bold">2,7,8</sup>.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -289,7 +292,7 @@
|
|||||||
const html = $("#retro-pop").html();
|
const html = $("#retro-pop").html();
|
||||||
Swal.fire({
|
Swal.fire({
|
||||||
html: html,
|
html: html,
|
||||||
target: "body",
|
target: document.getElementById('wrap-course-content'),
|
||||||
customClass: {
|
customClass: {
|
||||||
popup: 'pop_html_style border border-3 border-primary rounded-4',
|
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'
|
confirmButton: 'btn text-white bg-primary amor fw-semibold animate__animated animate__pulse animate__infinite'
|
||||||
|
|||||||
+52
-49
@@ -34,119 +34,122 @@
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<div class='page-sco py-2 py-md-0 h-100'>
|
<div class="page-sco py-2 py-md-0 h-100">
|
||||||
<div class='container h-100'>
|
<div class="container h-100">
|
||||||
<div class='row justify-content-center align-items-center h-100'>
|
<div class="row justify-content-center align-items-center h-100">
|
||||||
<div class='col-12'>
|
<div class="col-12">
|
||||||
<div class='row justify-content-center'>
|
<div class="row justify-content-center">
|
||||||
<div class="col-10 mb-2">
|
<div class="col-10 mb-2">
|
||||||
<h2 class="text-center fw-bold text-primary">¿Qué necesito para poder realizar la Diálisis Peritoneal Automatizada (DPA)?</h2>
|
<h2 class="text-center fw-bold text-primary">¿Qué necesito para poder realizar la Diálisis Peritoneal Automatizada (DPA)?</h2>
|
||||||
<hr class="border border-3 border-verde-oscuro hr-style mx-auto my-0">
|
<hr class="border border-3 border-verde-oscuro hr-style mx-auto my-0" />
|
||||||
</div>
|
</div>
|
||||||
<div class="col-9 mb-1">
|
<div class="col-9 mb-1">
|
||||||
<div class="card border-0 my-2 rounded-15 bg-custom shadow p-3 py-2 text-center">
|
<div class="card border-0 my-2 rounded-15 bg-custom shadow p-3 py-2 text-center">
|
||||||
<div class="d-flex justify-content-center align-items-center flex-row">
|
<div class="d-flex justify-content-center align-items-center flex-row">
|
||||||
<img src="img/3.1.png" class="img-fluid mx-3">
|
<img src="img/3.1.png" class="img-fluid mx-3" />
|
||||||
<p class="mb-0"><strong>Instrucciones:</strong> Da clic en los elementos para descubrir cuáles son necesarios para realizar la DPA.</p>
|
<p class="mb-0"><strong>Instrucciones:</strong> Da clic en los elementos para descubrir cuáles son necesarios para realizar la DPA.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="col-12 text-center mb-3">
|
||||||
|
<p class="small mb-0">"Estos son casos hipotéticos basados en las referencias bibliográficas."</p>
|
||||||
|
</div>
|
||||||
<div class="col-12">
|
<div class="col-12">
|
||||||
<div class="tablero">
|
<div class="tablero">
|
||||||
<div class="card-container2" data-correct="0">
|
<div class="card-container2" data-correct="0">
|
||||||
<div class="front">
|
<div class="front">
|
||||||
<img src="img/09.0.png" class="img-fluid">
|
<img src="img/09.0.png" class="img-fluid" />
|
||||||
</div>
|
</div>
|
||||||
<div class="back">
|
<div class="back">
|
||||||
<img src="img/09.12.png" class="img-fluid">
|
<img src="img/09.12.png" class="img-fluid" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-container2" data-correct="1">
|
<div class="card-container2" data-correct="1">
|
||||||
<div class="front">
|
<div class="front">
|
||||||
<img src="img/09.1.png" class="img-fluid">
|
<img src="img/09.1.png" class="img-fluid" />
|
||||||
</div>
|
</div>
|
||||||
<div class="back">
|
<div class="back">
|
||||||
<img src="img/09.13.png" class="img-fluid">
|
<img src="img/09.13.png" class="img-fluid" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-container2" data-correct="0">
|
<div class="card-container2" data-correct="0">
|
||||||
<div class="front">
|
<div class="front">
|
||||||
<img src="img/09.2.png" class="img-fluid">
|
<img src="img/09.2.png" class="img-fluid" />
|
||||||
</div>
|
</div>
|
||||||
<div class="back">
|
<div class="back">
|
||||||
<img src="img/09.12.png" class="img-fluid">
|
<img src="img/09.12.png" class="img-fluid" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-container2" data-correct="0">
|
<div class="card-container2" data-correct="0">
|
||||||
<div class="front">
|
<div class="front">
|
||||||
<img src="img/09.3.png" class="img-fluid">
|
<img src="img/09.3.png" class="img-fluid" />
|
||||||
</div>
|
</div>
|
||||||
<div class="back">
|
<div class="back">
|
||||||
<img src="img/09.12.png" class="img-fluid">
|
<img src="img/09.12.png" class="img-fluid" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-container2" data-correct="1">
|
<div class="card-container2" data-correct="1">
|
||||||
<div class="front">
|
<div class="front">
|
||||||
<img src="img/09.4.png" class="img-fluid">
|
<img src="img/09.4.png" class="img-fluid" />
|
||||||
</div>
|
</div>
|
||||||
<div class="back">
|
<div class="back">
|
||||||
<img src="img/09.13.png" class="img-fluid">
|
<img src="img/09.13.png" class="img-fluid" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-container2" data-correct="0">
|
<div class="card-container2" data-correct="0">
|
||||||
<div class="front">
|
<div class="front">
|
||||||
<img src="img/09.5.png" class="img-fluid">
|
<img src="img/09.5.png" class="img-fluid" />
|
||||||
</div>
|
</div>
|
||||||
<div class="back">
|
<div class="back">
|
||||||
<img src="img/09.12.png" class="img-fluid">
|
<img src="img/09.12.png" class="img-fluid" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-container2" data-correct="0">
|
<div class="card-container2" data-correct="0">
|
||||||
<div class="front">
|
<div class="front">
|
||||||
<img src="img/09.6.png" class="img-fluid">
|
<img src="img/09.6.png" class="img-fluid" />
|
||||||
</div>
|
</div>
|
||||||
<div class="back">
|
<div class="back">
|
||||||
<img src="img/09.12.png" class="img-fluid">
|
<img src="img/09.12.png" class="img-fluid" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-container2" data-correct="0">
|
<div class="card-container2" data-correct="0">
|
||||||
<div class="front">
|
<div class="front">
|
||||||
<img src="img/09.7.png" class="img-fluid">
|
<img src="img/09.7.png" class="img-fluid" />
|
||||||
</div>
|
</div>
|
||||||
<div class="back">
|
<div class="back">
|
||||||
<img src="img/09.12.png" class="img-fluid">
|
<img src="img/09.12.png" class="img-fluid" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-container2" data-correct="0">
|
<div class="card-container2" data-correct="0">
|
||||||
<div class="front">
|
<div class="front">
|
||||||
<img src="img/09.8.png" class="img-fluid">
|
<img src="img/09.8.png" class="img-fluid" />
|
||||||
</div>
|
</div>
|
||||||
<div class="back">
|
<div class="back">
|
||||||
<img src="img/09.12.png" class="img-fluid">
|
<img src="img/09.12.png" class="img-fluid" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-container2" data-correct="1">
|
<div class="card-container2" data-correct="1">
|
||||||
<div class="front">
|
<div class="front">
|
||||||
<img src="img/09.9.png" class="img-fluid">
|
<img src="img/09.9.png" class="img-fluid" />
|
||||||
</div>
|
</div>
|
||||||
<div class="back">
|
<div class="back">
|
||||||
<img src="img/09.13.png" class="img-fluid">
|
<img src="img/09.13.png" class="img-fluid" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-container2" data-correct="1">
|
<div class="card-container2" data-correct="1">
|
||||||
<div class="front">
|
<div class="front">
|
||||||
<img src="img/09.10.png" class="img-fluid">
|
<img src="img/09.10.png" class="img-fluid" />
|
||||||
</div>
|
</div>
|
||||||
<div class="back">
|
<div class="back">
|
||||||
<img src="img/09.13.png" class="img-fluid">
|
<img src="img/09.13.png" class="img-fluid" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-container2" data-correct="1">
|
<div class="card-container2" data-correct="1">
|
||||||
<div class="front">
|
<div class="front">
|
||||||
<img src="img/09.11.png" class="img-fluid">
|
<img src="img/09.11.png" class="img-fluid" />
|
||||||
</div>
|
</div>
|
||||||
<div class="back">
|
<div class="back">
|
||||||
<img src="img/09.13.png" class="img-fluid">
|
<img src="img/09.13.png" class="img-fluid" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -159,15 +162,15 @@
|
|||||||
<div class="d-none">
|
<div class="d-none">
|
||||||
<div id="pop0">
|
<div id="pop0">
|
||||||
<div class="container-fluid">
|
<div class="container-fluid">
|
||||||
<div class=" w-100 text-center">
|
<div class="w-100 text-center">
|
||||||
<img src="img/09.14.png" class="img-fluid">
|
<img src="img/09.14.png" class="img-fluid" />
|
||||||
</div>
|
</div>
|
||||||
<div class="row justify-content-center">
|
<div class="row justify-content-center">
|
||||||
<div class="col-12 text-center mb-2">
|
<div class="col-12 text-center mb-2">
|
||||||
<h3 class="text-secondary-dark fw-bold">¡Recuerda!</h3>
|
<h3 class="text-secondary-dark fw-bold">¡Recuerda!</h3>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-12 text-center">
|
<div class="col-12 text-center">
|
||||||
<p class="mb-0">Siempre debes lavar tus manos antes de empezar cualquier terapia.</p>
|
<p class="mb-0">Siempre debes lavar tus manos de acuerdo con la técnica de la OMS antes de empezar cualquier terapia.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -175,14 +178,14 @@
|
|||||||
</div>
|
</div>
|
||||||
<script>
|
<script>
|
||||||
$(function () {
|
$(function () {
|
||||||
"use strict";
|
'use strict';
|
||||||
$('.wrap-course-content').addClass('fake');
|
$('.wrap-course-content').addClass('fake');
|
||||||
const flip_sound = CourseNav.createSound('audio/flip.mp3');
|
const flip_sound = CourseNav.createSound('audio/flip.mp3');
|
||||||
const feedbackcorrect = CourseNav.createSound('audio/feedback-correct.mpeg');
|
const feedbackcorrect = CourseNav.createSound('audio/feedback-correct.mpeg');
|
||||||
const feedbackincorrect = CourseNav.createSound('audio/feedback-incorrect.mpeg');
|
const feedbackincorrect = CourseNav.createSound('audio/feedback-incorrect.mpeg');
|
||||||
|
|
||||||
$(".card-container2").flip({
|
$('.card-container2').flip({
|
||||||
trigger: 'manual' // Control manual del volteo
|
trigger: 'manual', // Control manual del volteo
|
||||||
});
|
});
|
||||||
|
|
||||||
function shuffleArray(array) {
|
function shuffleArray(array) {
|
||||||
@@ -197,18 +200,18 @@
|
|||||||
const tablero = document.querySelector('.tablero');
|
const tablero = document.querySelector('.tablero');
|
||||||
const cards = Array.from(tablero.querySelectorAll('.card-container2'));
|
const cards = Array.from(tablero.querySelectorAll('.card-container2'));
|
||||||
const shuffledCards = shuffleArray(cards);
|
const shuffledCards = shuffleArray(cards);
|
||||||
shuffledCards.forEach(card => tablero.appendChild(card));
|
shuffledCards.forEach((card) => tablero.appendChild(card));
|
||||||
|
|
||||||
$(".card-container2").click(function (e) {
|
$('.card-container2').click(function (e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
const $card = $(this);
|
const $card = $(this);
|
||||||
if ($card.hasClass('disabled')) return;
|
if ($card.hasClass('disabled')) return;
|
||||||
flip_sound.play();
|
flip_sound.play();
|
||||||
$card.flip(true);
|
$card.flip(true);
|
||||||
if($card.data('correct') == '0') {
|
if ($card.data('correct') == '0') {
|
||||||
CourseNav.audioController.stopAllSoundsAndPlay(feedbackcorrect);
|
CourseNav.audioController.stopAllSoundsAndPlay(feedbackcorrect);
|
||||||
$card.addClass('disabled');
|
$card.addClass('disabled');
|
||||||
}else{
|
} else {
|
||||||
CourseNav.audioController.stopAllSoundsAndPlay(feedbackincorrect);
|
CourseNav.audioController.stopAllSoundsAndPlay(feedbackincorrect);
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
$card.flip(false);
|
$card.flip(false);
|
||||||
@@ -225,24 +228,24 @@
|
|||||||
|
|
||||||
function checkAllCompleted() {
|
function checkAllCompleted() {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
const html = $("#pop0").html();
|
const html = $('#pop0').html();
|
||||||
Swal.fire({
|
Swal.fire({
|
||||||
html: html,
|
html: html,
|
||||||
target: "body",
|
target: document.getElementById('wrap-course-content'),
|
||||||
customClass: {
|
customClass: {
|
||||||
popup: 'pop_html_style border border-3 border-primary rounded-4',
|
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'
|
confirmButton: 'btn text-white bg-primary amor fw-semibold animate__animated animate__pulse animate__infinite',
|
||||||
},
|
},
|
||||||
confirmButtonText: "Cerrar",
|
confirmButtonText: 'Cerrar',
|
||||||
showConfirmButton: true,
|
showConfirmButton: true,
|
||||||
allowOutsideClick: false,
|
allowOutsideClick: false,
|
||||||
allowEscapeKey: false,
|
allowEscapeKey: false,
|
||||||
backdrop: "rgba(65, 60, 60, .95)",
|
backdrop: 'rgba(65, 60, 60, .95)',
|
||||||
width: "35em",
|
width: '35em',
|
||||||
didClose: () => {
|
didClose: () => {
|
||||||
CourseNav.setSlideVisited();
|
CourseNav.setSlideVisited();
|
||||||
$(".card-container2").addClass('disabled');
|
$('.card-container2').addClass('disabled');
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
}, 250);
|
}, 250);
|
||||||
}
|
}
|
||||||
|
|||||||
+9
-9
@@ -17,19 +17,19 @@
|
|||||||
width: 60%;
|
width: 60%;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<div class='page-sco py-2 py-md-0 h-100'>
|
<div class="page-sco py-2 py-md-0 h-100">
|
||||||
<div class='container h-100'>
|
<div class="container h-100">
|
||||||
<div class='row justify-content-center align-items-center h-100'>
|
<div class="row justify-content-center align-items-center h-100">
|
||||||
<div class='col-12 ps-0'>
|
<div class="col-12 ps-0">
|
||||||
<div class='row justify-content-center align-items-center'>
|
<div class="row justify-content-center align-items-center">
|
||||||
<div class="col-5 animate__animated animate__lightSpeedInLeft">
|
<div class="col-5 animate__animated animate__lightSpeedInLeft">
|
||||||
<div class="card card-style bg-verde-oscuro ps-5 pr-3 py-3 border-0 text-center">
|
<div class="card card-style bg-verde-oscuro ps-5 pr-3 py-3 border-0 text-center">
|
||||||
<h2 class="text-white fw-bold">¿Qué es un catéter?</h2>
|
<h2 class="text-white fw-bold">¿Qué es un catéter<sup>1,4,8,9</sup>?</h2>
|
||||||
<hr class="hr-style border border-3 border-verde-ceniza hr-style mx-auto my-0">
|
<hr class="hr-style border border-3 border-verde-ceniza hr-style mx-auto my-0" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-7 text-center animate__animated animate__zoomIn">
|
<div class="col-7 text-center animate__animated animate__zoomIn">
|
||||||
<img src="img/10.0.png" class="img-fluid">
|
<img src="img/10.0.png" class="img-fluid" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -38,7 +38,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<script>
|
<script>
|
||||||
$(function () {
|
$(function () {
|
||||||
"use strict";
|
'use strict';
|
||||||
$('.wrap-course-content').addClass('fake');
|
$('.wrap-course-content').addClass('fake');
|
||||||
CourseNav.setSlideVisited();
|
CourseNav.setSlideVisited();
|
||||||
});
|
});
|
||||||
|
|||||||
+58
-58
@@ -120,14 +120,14 @@
|
|||||||
<img src="img/3.1.png" class="img-fluid mx-3" />
|
<img src="img/3.1.png" class="img-fluid mx-3" />
|
||||||
<div class="parrafos text-start">
|
<div class="parrafos text-start">
|
||||||
<p class="mb-2"><strong>Instrucciones:</strong> Observa las imágenes del sitio de salida que se presentan en las tarjetas.</p>
|
<p class="mb-2"><strong>Instrucciones:</strong> Observa las imágenes del sitio de salida que se presentan en las tarjetas.</p>
|
||||||
<p class="mb-0">
|
<p class="mb-0">Si consideras que se encuentra sano, desliza la tarjeta a la <strong class="text-verde-pino">derecha</strong>. Si crees que no está sano, desliza la tarjeta a la <strong class="text-verde-pino">izquierda</strong>.</p>
|
||||||
Si consideras que se encuentra sano, desliza la tarjeta a la <strong class="text-verde-pino">derecha</strong>. Si crees que no está sano,
|
|
||||||
desliza la tarjeta a la <strong class="text-verde-pino">izquierda</strong>.
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="col-12 text-center mb-3">
|
||||||
|
<p class="small mb-0">"Estos son casos hipotéticos basados en las referencias bibliográficas."</p>
|
||||||
|
</div>
|
||||||
<div class="col-12">
|
<div class="col-12">
|
||||||
<div class="row justify-content-center">
|
<div class="row justify-content-center">
|
||||||
<div class="col-12 mb-2">
|
<div class="col-12 mb-2">
|
||||||
@@ -191,8 +191,8 @@
|
|||||||
<div class="d-none">
|
<div class="d-none">
|
||||||
<div id="pop0">
|
<div id="pop0">
|
||||||
<div class="container-fluid">
|
<div class="container-fluid">
|
||||||
<div class=" w-100 text-center">
|
<div class="w-100 text-center">
|
||||||
<img src="img/3.5.png" class="img-fluid">
|
<img src="img/3.5.png" class="img-fluid" />
|
||||||
</div>
|
</div>
|
||||||
<div class="row justify-content-center">
|
<div class="row justify-content-center">
|
||||||
<div class="col-12 text-center mb-2">
|
<div class="col-12 text-center mb-2">
|
||||||
@@ -207,12 +207,12 @@
|
|||||||
</div>
|
</div>
|
||||||
<script>
|
<script>
|
||||||
$(function () {
|
$(function () {
|
||||||
"use strict";
|
'use strict';
|
||||||
$(".wrap-course-content").addClass("fake");
|
$('.wrap-course-content').addClass('fake');
|
||||||
const feedbackcorrect = CourseNav.createSound("audio/feedback-correct.mpeg");
|
const feedbackcorrect = CourseNav.createSound('audio/feedback-correct.mpeg');
|
||||||
const feedbackincorrect = CourseNav.createSound("audio/feedback-incorrect.mpeg");
|
const feedbackincorrect = CourseNav.createSound('audio/feedback-incorrect.mpeg');
|
||||||
|
|
||||||
const respuestasCorrectas = ["true", "true", "false", "false", "false"];
|
const respuestasCorrectas = ['true', 'true', 'false', 'false', 'false'];
|
||||||
|
|
||||||
function shuffleArray(array) {
|
function shuffleArray(array) {
|
||||||
for (let i = array.length - 1; i > 0; i--) {
|
for (let i = array.length - 1; i > 0; i--) {
|
||||||
@@ -223,15 +223,15 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Shuffle cards and answers
|
// Shuffle cards and answers
|
||||||
const cards = Array.from(document.querySelectorAll(".tinder-card"));
|
const cards = Array.from(document.querySelectorAll('.tinder-card'));
|
||||||
const cardsData = cards.map((card, index) => ({
|
const cardsData = cards.map((card, index) => ({
|
||||||
element: card,
|
element: card,
|
||||||
answer: respuestasCorrectas[index],
|
answer: respuestasCorrectas[index],
|
||||||
}));
|
}));
|
||||||
|
|
||||||
const shuffledData = shuffleArray(cardsData);
|
const shuffledData = shuffleArray(cardsData);
|
||||||
const stack = document.getElementById("card-stack");
|
const stack = document.getElementById('card-stack');
|
||||||
stack.innerHTML = "";
|
stack.innerHTML = '';
|
||||||
|
|
||||||
const shuffledAnswers = [];
|
const shuffledAnswers = [];
|
||||||
shuffledData.forEach((item, index) => {
|
shuffledData.forEach((item, index) => {
|
||||||
@@ -253,33 +253,33 @@
|
|||||||
const currentCard = shuffledData[currentCardIndex]?.element;
|
const currentCard = shuffledData[currentCardIndex]?.element;
|
||||||
if (!currentCard) return;
|
if (!currentCard) return;
|
||||||
|
|
||||||
currentCard.addEventListener("mousedown", handleStart, { passive: false });
|
currentCard.addEventListener('mousedown', handleStart, { passive: false });
|
||||||
currentCard.addEventListener("touchstart", handleStart, { passive: false });
|
currentCard.addEventListener('touchstart', handleStart, { passive: false });
|
||||||
}
|
}
|
||||||
|
|
||||||
function handleStart(e) {
|
function handleStart(e) {
|
||||||
if (isProcessing) return;
|
if (isProcessing) return;
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
isDragging = true;
|
isDragging = true;
|
||||||
const touch = e.type === "touchstart" ? e.touches[0] : e;
|
const touch = e.type === 'touchstart' ? e.touches[0] : e;
|
||||||
startX = touch.clientX;
|
startX = touch.clientX;
|
||||||
startY = touch.clientY;
|
startY = touch.clientY;
|
||||||
|
|
||||||
const card = e.target.closest(".tinder-card");
|
const card = e.target.closest('.tinder-card');
|
||||||
card.style.transition = "none";
|
card.style.transition = 'none';
|
||||||
card.style.cursor = "grabbing";
|
card.style.cursor = 'grabbing';
|
||||||
|
|
||||||
document.addEventListener("mousemove", handleMove, { passive: false });
|
document.addEventListener('mousemove', handleMove, { passive: false });
|
||||||
document.addEventListener("touchmove", handleMove, { passive: false });
|
document.addEventListener('touchmove', handleMove, { passive: false });
|
||||||
document.addEventListener("mouseup", handleEnd);
|
document.addEventListener('mouseup', handleEnd);
|
||||||
document.addEventListener("touchend", handleEnd);
|
document.addEventListener('touchend', handleEnd);
|
||||||
}
|
}
|
||||||
|
|
||||||
function handleMove(e) {
|
function handleMove(e) {
|
||||||
if (!isDragging || isProcessing) return;
|
if (!isDragging || isProcessing) return;
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
|
||||||
const touch = e.type === "touchmove" ? e.touches[0] : e;
|
const touch = e.type === 'touchmove' ? e.touches[0] : e;
|
||||||
currentX = touch.clientX - startX;
|
currentX = touch.clientX - startX;
|
||||||
currentY = touch.clientY - startY;
|
currentY = touch.clientY - startY;
|
||||||
|
|
||||||
@@ -289,8 +289,8 @@
|
|||||||
const rotation = currentX * 0.1;
|
const rotation = currentX * 0.1;
|
||||||
card.style.transform = `translate(${currentX}px, ${currentY}px) rotate(${rotation}deg)`;
|
card.style.transform = `translate(${currentX}px, ${currentY}px) rotate(${rotation}deg)`;
|
||||||
|
|
||||||
const likeIndicator = document.getElementById("like-indicator");
|
const likeIndicator = document.getElementById('like-indicator');
|
||||||
const dislikeIndicator = document.getElementById("dislike-indicator");
|
const dislikeIndicator = document.getElementById('dislike-indicator');
|
||||||
|
|
||||||
if (currentX > 50) {
|
if (currentX > 50) {
|
||||||
likeIndicator.style.opacity = Math.min(1, (currentX - 50) / 100);
|
likeIndicator.style.opacity = Math.min(1, (currentX - 50) / 100);
|
||||||
@@ -308,19 +308,19 @@
|
|||||||
if (!isDragging || isProcessing) return;
|
if (!isDragging || isProcessing) return;
|
||||||
isDragging = false;
|
isDragging = false;
|
||||||
|
|
||||||
document.removeEventListener("mousemove", handleMove);
|
document.removeEventListener('mousemove', handleMove);
|
||||||
document.removeEventListener("touchmove", handleMove);
|
document.removeEventListener('touchmove', handleMove);
|
||||||
document.removeEventListener("mouseup", handleEnd);
|
document.removeEventListener('mouseup', handleEnd);
|
||||||
document.removeEventListener("touchend", handleEnd);
|
document.removeEventListener('touchend', handleEnd);
|
||||||
|
|
||||||
const card = shuffledData[currentCardIndex]?.element;
|
const card = shuffledData[currentCardIndex]?.element;
|
||||||
if (!card) return;
|
if (!card) return;
|
||||||
|
|
||||||
card.style.transition = "transform 0.3s ease";
|
card.style.transition = 'transform 0.3s ease';
|
||||||
card.style.cursor = "grab";
|
card.style.cursor = 'grab';
|
||||||
|
|
||||||
const likeIndicator = document.getElementById("like-indicator");
|
const likeIndicator = document.getElementById('like-indicator');
|
||||||
const dislikeIndicator = document.getElementById("dislike-indicator");
|
const dislikeIndicator = document.getElementById('dislike-indicator');
|
||||||
|
|
||||||
likeIndicator.style.opacity = 0;
|
likeIndicator.style.opacity = 0;
|
||||||
dislikeIndicator.style.opacity = 0;
|
dislikeIndicator.style.opacity = 0;
|
||||||
@@ -328,13 +328,13 @@
|
|||||||
if (Math.abs(currentX) > 100) {
|
if (Math.abs(currentX) > 100) {
|
||||||
isProcessing = true;
|
isProcessing = true;
|
||||||
const isLike = currentX > 0;
|
const isLike = currentX > 0;
|
||||||
const correctAnswer = shuffledAnswers[currentCardIndex] === "true";
|
const correctAnswer = shuffledAnswers[currentCardIndex] === 'true';
|
||||||
const isCorrect = (isLike && correctAnswer) || (!isLike && !correctAnswer);
|
const isCorrect = (isLike && correctAnswer) || (!isLike && !correctAnswer);
|
||||||
|
|
||||||
animateCardOut(card, isLike, isCorrect);
|
animateCardOut(card, isLike, isCorrect);
|
||||||
processSwipe(isLike, isCorrect);
|
processSwipe(isLike, isCorrect);
|
||||||
} else {
|
} else {
|
||||||
card.style.transform = "";
|
card.style.transform = '';
|
||||||
}
|
}
|
||||||
|
|
||||||
currentX = 0;
|
currentX = 0;
|
||||||
@@ -345,17 +345,17 @@
|
|||||||
if (isCorrect) {
|
if (isCorrect) {
|
||||||
const direction = isLike ? 1 : -1;
|
const direction = isLike ? 1 : -1;
|
||||||
card.style.transform = `translateX(${direction * 400}px) rotate(${direction * 30}deg)`;
|
card.style.transform = `translateX(${direction * 400}px) rotate(${direction * 30}deg)`;
|
||||||
card.style.opacity = "0";
|
card.style.opacity = '0';
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
card.style.display = "none";
|
card.style.display = 'none';
|
||||||
nextCard();
|
nextCard();
|
||||||
}, 300);
|
}, 300);
|
||||||
} else {
|
} else {
|
||||||
// Animación de rebote para respuesta incorrecta
|
// Animación de rebote para respuesta incorrecta
|
||||||
card.style.transform = "scale(0.95)";
|
card.style.transform = 'scale(0.95)';
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
card.style.transform = "";
|
card.style.transform = '';
|
||||||
isProcessing = false;
|
isProcessing = false;
|
||||||
}, 200);
|
}, 200);
|
||||||
}
|
}
|
||||||
@@ -395,23 +395,23 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
function updateProgress() {
|
function updateProgress() {
|
||||||
const indicators = document.querySelector(".indicadores-avance");
|
const indicators = document.querySelector('.indicadores-avance');
|
||||||
indicators.innerHTML = "";
|
indicators.innerHTML = '';
|
||||||
|
|
||||||
for (let i = 0; i < shuffledAnswers.length; i++) {
|
for (let i = 0; i < shuffledAnswers.length; i++) {
|
||||||
const indicator = document.createElement("div");
|
const indicator = document.createElement('div');
|
||||||
indicator.style.cssText = "width: 40px; height: 40px; margin: 0 8px; display: flex; align-items: center; justify-content: center;";
|
indicator.style.cssText = 'width: 40px; height: 40px; margin: 0 8px; display: flex; align-items: center; justify-content: center;';
|
||||||
|
|
||||||
if (i < userAnswers.length) {
|
if (i < userAnswers.length) {
|
||||||
const img = document.createElement("img");
|
const img = document.createElement('img');
|
||||||
img.style.cssText = "width: 100%; height: 100%;";
|
img.style.cssText = 'width: 100%; height: 100%;';
|
||||||
img.src = "img/11.good.png";
|
img.src = 'img/11.check.png';
|
||||||
indicator.appendChild(img);
|
indicator.appendChild(img);
|
||||||
} else if (i === currentCardIndex) {
|
} else if (i === currentCardIndex) {
|
||||||
indicator.style.cssText += "background-color: #2196F3; border-radius: 50%; color: white; font-size: 18px; font-weight: bold;";
|
indicator.style.cssText += 'background-color: #2196F3; border-radius: 50%; color: white; font-size: 18px; font-weight: bold;';
|
||||||
indicator.innerHTML = (i + 1).toString();
|
indicator.innerHTML = (i + 1).toString();
|
||||||
} else {
|
} else {
|
||||||
indicator.style.cssText += "background-color: #E0E0E0; border-radius: 50%; color: #999; font-size: 18px; font-weight: bold;";
|
indicator.style.cssText += 'background-color: #E0E0E0; border-radius: 50%; color: #999; font-size: 18px; font-weight: bold;';
|
||||||
indicator.innerHTML = (i + 1).toString();
|
indicator.innerHTML = (i + 1).toString();
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -421,7 +421,7 @@
|
|||||||
|
|
||||||
function showResults() {
|
function showResults() {
|
||||||
// Ocultar instrucciones
|
// Ocultar instrucciones
|
||||||
document.getElementById("col-instrucciones").style.display = "none";
|
document.getElementById('col-instrucciones').style.display = 'none';
|
||||||
|
|
||||||
const resultHTML = `
|
const resultHTML = `
|
||||||
<div class="text-center">
|
<div class="text-center">
|
||||||
@@ -430,25 +430,25 @@
|
|||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
checkAllCompleted();
|
checkAllCompleted();
|
||||||
document.querySelector(".content-cards").innerHTML = resultHTML;
|
document.querySelector('.content-cards').innerHTML = resultHTML;
|
||||||
CourseNav.setSlideVisited(true);
|
CourseNav.setSlideVisited(true);
|
||||||
}
|
}
|
||||||
|
|
||||||
function checkAllCompleted() {
|
function checkAllCompleted() {
|
||||||
const html = $("#pop0").html();
|
const html = $('#pop0').html();
|
||||||
Swal.fire({
|
Swal.fire({
|
||||||
html: html,
|
html: html,
|
||||||
target: document.getElementById('wrap-course-content'),
|
target: document.getElementById('wrap-course-content'),
|
||||||
customClass: {
|
customClass: {
|
||||||
popup: "pop_html_style border border-3 border-primary rounded-4",
|
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",
|
confirmButton: 'btn text-white bg-primary amor fw-semibold animate__animated animate__pulse animate__infinite',
|
||||||
},
|
},
|
||||||
confirmButtonText: "Cerrar",
|
confirmButtonText: 'Cerrar',
|
||||||
showConfirmButton: true,
|
showConfirmButton: true,
|
||||||
allowOutsideClick: false,
|
allowOutsideClick: false,
|
||||||
allowEscapeKey: false,
|
allowEscapeKey: false,
|
||||||
backdrop: "rgba(65, 60, 60, .95)",
|
backdrop: 'rgba(65, 60, 60, .95)',
|
||||||
width: "35em",
|
width: '35em',
|
||||||
didClose: () => {
|
didClose: () => {
|
||||||
CourseNav.setSlideVisited();
|
CourseNav.setSlideVisited();
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -0,0 +1,272 @@
|
|||||||
|
<style>
|
||||||
|
.fake {
|
||||||
|
background-image: url(img/bg12.jpg);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center;
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hr-style {
|
||||||
|
opacity: 1;
|
||||||
|
width: 80%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-respuesta {
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div 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-12">
|
||||||
|
<div class="row justify-content-center">
|
||||||
|
<div class="col-10 mb-2">
|
||||||
|
<h2 class="text-center fw-bold text-primary">Cuidados del sitio de salida y complicaciones</h2>
|
||||||
|
<hr class="border border-3 border-verde-oscuro hr-style mx-auto my-0" />
|
||||||
|
</div>
|
||||||
|
<div class="col-10 px-0 mb-1 col-instrucciones">
|
||||||
|
<div class="card bg-lila-claro border-0 my-2 rounded-4 bg-custom px-3 py-2 text-center">
|
||||||
|
<div class="d-flex justify-content-center align-items-center flex-row">
|
||||||
|
<img src="img/12.3.png" class="img-fluid mx-3" />
|
||||||
|
<p class="mb-0 text-white text-start">Lee lo que opinan dos doctores sobre los cuidados del sitio de salida y las complicaciones que pueden surgir si no se hacen correctamente. Analiza cuidadosamente sus argumentos y elige quién tiene la razón.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-12 text-center mb-3">
|
||||||
|
<p class="small mb-0">"Estos son casos hipotéticos basados en las referencias bibliográficas."</p>
|
||||||
|
</div>
|
||||||
|
<div class="col-12 col-actividad">
|
||||||
|
<div class="row justify-content-center">
|
||||||
|
<div class="col-12 mb-2">
|
||||||
|
<div class="d-flex justify-content-center align-items-center gap-2 flex-row indicadores-avance"></div>
|
||||||
|
</div>
|
||||||
|
<div class="col-12">
|
||||||
|
<div id="puzzle-versus" class="d-flex flex-row justify-content-center gap-2"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="d-none">
|
||||||
|
<div id="pop0">
|
||||||
|
<div class="container-fluid">
|
||||||
|
<div class="w-100 text-center">
|
||||||
|
<img src="img/3.5.png" class="img-fluid" />
|
||||||
|
</div>
|
||||||
|
<div class="row justify-content-center">
|
||||||
|
<div class="col-12 text-center mb-2">
|
||||||
|
<h3 class="text-secondary-dark fw-bold">¡Bien hecho!</h3>
|
||||||
|
</div>
|
||||||
|
<div class="col-12 text-center">
|
||||||
|
<p class="mb-0">Has concluido la actividad.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
$(function () {
|
||||||
|
'use strict';
|
||||||
|
$('.wrap-course-content').addClass('fake');
|
||||||
|
const feedbackcorrect = CourseNav.createSound('audio/feedback-correct.mpeg');
|
||||||
|
const feedbackincorrect = CourseNav.createSound('audio/feedback-incorrect.mpeg');
|
||||||
|
|
||||||
|
const imgPerso = ['img/12.0.png', 'img/12.1.png'];
|
||||||
|
const urlExcelFile = 'Actividades_Rotafolio_Vantive.xlsx';
|
||||||
|
let versusData;
|
||||||
|
let currentQuestionIndex = 0;
|
||||||
|
|
||||||
|
function readExcelFile(url, callback) {
|
||||||
|
var xhr = new XMLHttpRequest();
|
||||||
|
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) => {
|
||||||
|
var sheet = workbook.Sheets[sheetName];
|
||||||
|
result[sheetName] = XLSX.utils.sheet_to_json(sheet);
|
||||||
|
});
|
||||||
|
callback(result);
|
||||||
|
};
|
||||||
|
xhr.send();
|
||||||
|
}
|
||||||
|
|
||||||
|
function shuffleArray(array) {
|
||||||
|
for (let i = array.length - 1; i > 0; i--) {
|
||||||
|
const j = Math.floor(Math.random() * (i + 1));
|
||||||
|
[array[i], array[j]] = [array[j], array[i]];
|
||||||
|
}
|
||||||
|
return array;
|
||||||
|
}
|
||||||
|
|
||||||
|
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() : '',
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
|
||||||
|
function createIndicators(total) {
|
||||||
|
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',
|
||||||
|
});
|
||||||
|
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 = $('<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');
|
||||||
|
|
||||||
|
if (!versusData || currentQuestionIndex >= versusData.length) {
|
||||||
|
console.log('No hay más datos disponibles');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const data = versusData[currentQuestionIndex];
|
||||||
|
console.log('Pregunta actual:', data);
|
||||||
|
|
||||||
|
const shuffledImages = shuffleArray([...imgPerso]);
|
||||||
|
const responses = [data.opcion, data.opcion_c];
|
||||||
|
const randomOrder = Math.random() < 0.5;
|
||||||
|
|
||||||
|
const leftResponse = randomOrder ? responses[0] : responses[1];
|
||||||
|
const rightResponse = randomOrder ? responses[1] : responses[0];
|
||||||
|
const leftIsCorrect = randomOrder ? false : true; // opcion_c es la correcta
|
||||||
|
|
||||||
|
const structure = `
|
||||||
|
<div class="btn-respuesta" 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;"><p class="mb-0">${leftResponse || ''}</p></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<img src="img/12.2.png" class="img-fluid mx-2">
|
||||||
|
<div class="btn-respuesta" 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;"><p class="mb-0">${rightResponse || ''}</p></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
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');
|
||||||
|
|
||||||
|
if (isCorrect) {
|
||||||
|
feedbackcorrect.play();
|
||||||
|
currentQuestionIndex++;
|
||||||
|
updateIndicators();
|
||||||
|
|
||||||
|
container.addClass('animate__animated animate__zoomOut');
|
||||||
|
|
||||||
|
if (currentQuestionIndex >= versusData.length) {
|
||||||
|
setTimeout(() => showResults(), 700);
|
||||||
|
} else {
|
||||||
|
setTimeout(() => {
|
||||||
|
container.removeClass('animate__animated animate__zoomOut');
|
||||||
|
createVersusStructure();
|
||||||
|
}, 500);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
feedbackincorrect.play();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function showResults() {
|
||||||
|
$('.col-actividad').hide();
|
||||||
|
$('.col-instrucciones').html('');
|
||||||
|
const resultHTML = `
|
||||||
|
<div class="text-center animate__animated animate__zoomIn">
|
||||||
|
<h3 class="text-primary fw-bold">¡Actividad completada!</h3>
|
||||||
|
<p class="text-secondary">¡Todas las respuestas fueron correctas!</p>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
$('.col-instrucciones').html(resultHTML);
|
||||||
|
setTimeout(() => checkAllCompleted(), 300);
|
||||||
|
}
|
||||||
|
|
||||||
|
function checkAllCompleted() {
|
||||||
|
setTimeout(() => {
|
||||||
|
const html = $('#pop0').html();
|
||||||
|
Swal.fire({
|
||||||
|
html: html,
|
||||||
|
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',
|
||||||
|
},
|
||||||
|
confirmButtonText: 'Cerrar',
|
||||||
|
showConfirmButton: true,
|
||||||
|
allowOutsideClick: false,
|
||||||
|
allowEscapeKey: false,
|
||||||
|
backdrop: 'rgba(65, 60, 60, .95)',
|
||||||
|
width: '35em',
|
||||||
|
didClose: () => {
|
||||||
|
CourseNav.setSlideVisited();
|
||||||
|
$('.card-container2').addClass('disabled');
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}, 250);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Cargar datos del Excel
|
||||||
|
readExcelFile(urlExcelFile, function (data) {
|
||||||
|
const hojaDatos = data['Diapositiva 14'];
|
||||||
|
versusData = procesarPreguntas(hojaDatos);
|
||||||
|
console.log('Datos cargados:', versusData);
|
||||||
|
createIndicators(versusData.length);
|
||||||
|
createVersusStructure();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,61 @@
|
|||||||
|
<style>
|
||||||
|
.fake {
|
||||||
|
background-image: url(img/bg07.jpg);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center;
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hr-style {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-style {
|
||||||
|
background-color: rgba(182, 143, 178, 0.31);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div 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-12 px-0">
|
||||||
|
<div class="row justify-content-center">
|
||||||
|
<div class="col-10 mb-4 px-4 animate__animated animate__bounceInDown text-center">
|
||||||
|
<div class="position-relative d-inline-block">
|
||||||
|
<h2 class="text-center fw-bold text-primary">
|
||||||
|
Lavado de manos de acuerdo con la técnica de la <br />
|
||||||
|
OMS y uso correcto de cubrebocas<sup class="fw-bold">12</sup>
|
||||||
|
</h2>
|
||||||
|
<hr class="border border-3 border-verde-oscuro hr-style mx-auto my-0" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-12 px-0">
|
||||||
|
<div class="card card-style border-0 rounded-0 shadow-none py-3 px-4">
|
||||||
|
<div class="row justify-content-center">
|
||||||
|
<div class="col-10">
|
||||||
|
<div class="row justify-content-center align-items-center">
|
||||||
|
<div class="col-4 text-center animate__animated animate__flipInX">
|
||||||
|
<img src="img/13.0.png" class="img-fluid" />
|
||||||
|
</div>
|
||||||
|
<div class="col-4 text-center animate__animated animate__zoomIn animate__delay-1s">
|
||||||
|
<img src="img/13.1.png" class="img-fluid" />
|
||||||
|
</div>
|
||||||
|
<div class="col-4 text-center animate__animated animate__rotateInDownRight animate__delay-2s">
|
||||||
|
<img src="img/13.2.png" class="img-fluid" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
$(function () {
|
||||||
|
'use strict';
|
||||||
|
$('.wrap-course-content').addClass('fake');
|
||||||
|
CourseNav.setSlideVisited();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,219 @@
|
|||||||
|
<style>
|
||||||
|
.fake {
|
||||||
|
background-image: url(img/bg07.jpg);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center;
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hr-style {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-grid {
|
||||||
|
position: relative;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(6, 1fr);
|
||||||
|
grid-template-rows: repeat(2, 1fr);
|
||||||
|
gap: 15px;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
max-width: 1320px; /* Esto limita el ancho total */
|
||||||
|
margin: 0 auto;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.img-sotable {
|
||||||
|
cursor: move;
|
||||||
|
}
|
||||||
|
|
||||||
|
.img-sotable.disabled {
|
||||||
|
pointer-events: none;
|
||||||
|
background-color: #84a816;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sortable-placeholder {
|
||||||
|
background-color: rgba(132, 168, 22, 0.3);
|
||||||
|
border: 2px dashed #84a816;
|
||||||
|
visibility: visible !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div 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-12">
|
||||||
|
<div class="row justify-content-center" id="activity1">
|
||||||
|
<div class="col-10 mb-2 text-center">
|
||||||
|
<div class="position-relative d-inline-block">
|
||||||
|
<h2 class="text-center fw-bold text-primary">
|
||||||
|
Técnica correcta para higiene de manos <br />
|
||||||
|
de acuerdo con la técnica de la OMS<sup class="fw-bold">12</sup>
|
||||||
|
</h2>
|
||||||
|
<hr class="border border-3 border-verde-oscuro hr-style mx-auto my-0" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-10 px-0 mb-1 col-instrucciones">
|
||||||
|
<div class="card bg-lila-rosa border-0 my-2 rounded-4 bg-custom px-3 py-2 text-center">
|
||||||
|
<div class="d-flex justify-content-center align-items-center flex-row">
|
||||||
|
<img src="img/14.12.png" class="img-fluid mx-3" />
|
||||||
|
<p class="mb-0 text-start">Arrastra los pasos del lavado de manos para colocarlos en el orden correcto.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-12 text-center mb-2">
|
||||||
|
<p class="small mb-0">"Estos son casos hipotéticos basados en las referencias bibliográficas."</p>
|
||||||
|
</div>
|
||||||
|
<div class="col-12 col-actividad" style="overflow: hidden">
|
||||||
|
<div class="custom-grid">
|
||||||
|
<div class="img-sotable" data-order="0">
|
||||||
|
<img src="img/14.0.png" class="img-fluid" />
|
||||||
|
</div>
|
||||||
|
<div class="img-sotable" data-order="1">
|
||||||
|
<img src="img/14.1.png" class="img-fluid" />
|
||||||
|
</div>
|
||||||
|
<div class="img-sotable" data-order="2">
|
||||||
|
<img src="img/14.2.png" class="img-fluid" />
|
||||||
|
</div>
|
||||||
|
<div class="img-sotable" data-order="3">
|
||||||
|
<img src="img/14.3.png" class="img-fluid" />
|
||||||
|
</div>
|
||||||
|
<div class="img-sotable" data-order="4">
|
||||||
|
<img src="img/14.4.png" class="img-fluid" />
|
||||||
|
</div>
|
||||||
|
<div class="img-sotable" data-order="5">
|
||||||
|
<img src="img/14.5.png" class="img-fluid" />
|
||||||
|
</div>
|
||||||
|
<div class="img-sotable" data-order="6">
|
||||||
|
<img src="img/14.6.png" class="img-fluid" />
|
||||||
|
</div>
|
||||||
|
<div class="img-sotable" data-order="7">
|
||||||
|
<img src="img/14.7.png" class="img-fluid" />
|
||||||
|
</div>
|
||||||
|
<div class="img-sotable" data-order="8">
|
||||||
|
<img src="img/14.8.png" class="img-fluid" />
|
||||||
|
</div>
|
||||||
|
<div class="img-sotable" data-order="9">
|
||||||
|
<img src="img/14.9.png" class="img-fluid" />
|
||||||
|
</div>
|
||||||
|
<div class="img-sotable" data-order="10">
|
||||||
|
<img src="img/14.10.png" class="img-fluid" />
|
||||||
|
</div>
|
||||||
|
<div class="img-sotable" data-order="11">
|
||||||
|
<img src="img/14.11.png" class="img-fluid" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="d-none">
|
||||||
|
<div id="pop0">
|
||||||
|
<div class="container-fluid">
|
||||||
|
<div class="w-100 text-center">
|
||||||
|
<img src="img/14.13.png" class="img-fluid" />
|
||||||
|
</div>
|
||||||
|
<div class="row justify-content-center">
|
||||||
|
<!-- <div class="col-12 text-center mb-2">
|
||||||
|
<h3 class="text-secondary-dark fw-bold">¡Bien hecho!</h3>
|
||||||
|
</div> -->
|
||||||
|
<div class="col-12 text-center">
|
||||||
|
<p>Una vez secas, <strong class="text-verde-ceniza">tus manos son seguras.</strong></p>
|
||||||
|
<p class="mb-0">
|
||||||
|
El procedimiento tiene una duración total de
|
||||||
|
<strong class="text-verde-ceniza">40-60 segundos.</strong>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
$(function () {
|
||||||
|
'use strict';
|
||||||
|
$('.wrap-course-content').addClass('fake');
|
||||||
|
|
||||||
|
const bad = CourseNav.createSound('audio/feedback-incorrect.mpeg');
|
||||||
|
const good = CourseNav.createSound('audio/feedback-correct.mpeg');
|
||||||
|
|
||||||
|
function shuffleArray(array) {
|
||||||
|
for (let i = array.length - 1; i > 0; i--) {
|
||||||
|
const j = Math.floor(Math.random() * (i + 1));
|
||||||
|
[array[i], array[j]] = [array[j], array[i]];
|
||||||
|
}
|
||||||
|
return array;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Shuffle elements
|
||||||
|
const $sortables = $('.img-sotable');
|
||||||
|
const shuffled = shuffleArray($sortables.toArray());
|
||||||
|
$('.custom-grid').empty().append(shuffled);
|
||||||
|
|
||||||
|
// Initialize sortable
|
||||||
|
$('.custom-grid').sortable({
|
||||||
|
items: '.img-sotable',
|
||||||
|
containment: '.wrap-course-content',
|
||||||
|
cursor: 'grabbing',
|
||||||
|
tolerance: 'pointer',
|
||||||
|
forceHelperSize: true,
|
||||||
|
forcePlaceholderSize: true,
|
||||||
|
placeholder: 'sortable-placeholder',
|
||||||
|
distance: 5,
|
||||||
|
sort: function (event, ui) {
|
||||||
|
var scale = parseFloat($('.wrap-course-content').css('transform').split('(')[1]) || 1;
|
||||||
|
var mouseX = event.pageX;
|
||||||
|
var mouseY = event.pageY;
|
||||||
|
ui.helper.css({
|
||||||
|
left: (mouseX - ui.helper.parent().offset().left) / scale - ui.helper.width() / 2,
|
||||||
|
top: (mouseY - ui.helper.parent().offset().top) / scale - ui.helper.height() / 2,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
update: function () {
|
||||||
|
checkOrder();
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
function checkOrder() {
|
||||||
|
const $items = $('.custom-grid .img-sotable');
|
||||||
|
let isCorrect = true;
|
||||||
|
|
||||||
|
$items.each(function (index) {
|
||||||
|
if (parseInt($(this).data('order')) !== index) {
|
||||||
|
isCorrect = false;
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if (isCorrect) {
|
||||||
|
good.play();
|
||||||
|
$('.custom-grid').sortable('disable');
|
||||||
|
checkAllCompleted();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function checkAllCompleted() {
|
||||||
|
setTimeout(() => {
|
||||||
|
const html = $('#pop0').html();
|
||||||
|
Swal.fire({
|
||||||
|
html: html,
|
||||||
|
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',
|
||||||
|
},
|
||||||
|
confirmButtonText: 'Cerrar',
|
||||||
|
showConfirmButton: true,
|
||||||
|
allowOutsideClick: false,
|
||||||
|
allowEscapeKey: false,
|
||||||
|
backdrop: 'rgba(65, 60, 60, .95)',
|
||||||
|
width: '35em',
|
||||||
|
didClose: () => {
|
||||||
|
CourseNav.setSlideVisited();
|
||||||
|
$('.img-sotable').addClass('disabled');
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}, 250);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,277 @@
|
|||||||
|
<style>
|
||||||
|
.fake {
|
||||||
|
background-image: url(img/bg13.jpg);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center;
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hr-style {
|
||||||
|
opacity: 1;
|
||||||
|
width: 30%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-grid {
|
||||||
|
position: relative;
|
||||||
|
display: grid;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
grid-template-columns: 75% 25%;
|
||||||
|
grid-template-rows: auto;
|
||||||
|
gap: 0;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-drops-container {
|
||||||
|
position: relative;
|
||||||
|
display: grid;
|
||||||
|
width: 100%;
|
||||||
|
grid-template-columns: repeat(4, 1fr);
|
||||||
|
grid-template-rows: auto;
|
||||||
|
gap: 10px;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-card {
|
||||||
|
position: relative;
|
||||||
|
height: 50px;
|
||||||
|
width: 80%;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.drop-card {
|
||||||
|
position: relative;
|
||||||
|
width: 230px;
|
||||||
|
height: 230px;
|
||||||
|
background-color: #c0d2cd;
|
||||||
|
border: 2px dashed #85a89d;
|
||||||
|
border-radius: 15px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.drag-card-container {
|
||||||
|
position: relative;
|
||||||
|
background-color: #e3ece8;
|
||||||
|
border-radius: 15px;
|
||||||
|
border: 2px dashed #72256b;
|
||||||
|
width: 240px;
|
||||||
|
height: 240px;
|
||||||
|
margin: 0 auto;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.drag-option {
|
||||||
|
cursor: move;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="page-sco py-2 py-md-0 h-100">
|
||||||
|
<div class="container h-100">
|
||||||
|
<div class="row justify-content-center h-100">
|
||||||
|
<div id="drag-drop-activity" class="col-12 h-100" style="overflow: hidden">
|
||||||
|
<div class="content-grid">
|
||||||
|
<div class="content-drops w-100 h-100">
|
||||||
|
<div class="row justify-content-center align-items-center h-100">
|
||||||
|
<div class="col-12">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-10 mb-2 animate__animated animate__bounceInDown">
|
||||||
|
<h2 class="text-center fw-bold text-primary">Técnica Aséptica</h2>
|
||||||
|
<hr class="border border-3 border-verde-oscuro hr-style mx-auto my-0" />
|
||||||
|
</div>
|
||||||
|
<div class="col-10 px-0 mb-3 animate__animated animate__lightSpeedInLeft" id="col-instrucciones">
|
||||||
|
<div class="card bg-primary border-0 my-2 rounded-15 bg-custom ps-4 pe-3 py-2 text-center">
|
||||||
|
<div class="d-flex justify-content-center align-items-center flex-row gap-2">
|
||||||
|
<img src="img/2.1.png" class="img-fluid mx-3" />
|
||||||
|
<p class="mb-0 text-start text-white"><strong>Instrucciones:</strong> 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.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-12 text-center mb-3">
|
||||||
|
<p class="small mb-0">"Estos son casos hipotéticos basados en las referencias bibliográficas."</p>
|
||||||
|
</div>
|
||||||
|
<div class="col-12">
|
||||||
|
<div class="grid-drops-container">
|
||||||
|
<div class="position-relative d-flex flex-column justify-content-center gap-2">
|
||||||
|
<div class="drop-card" data-drop="0"></div>
|
||||||
|
<div class="card text-card bg-verde-oscuro text-white border-0 rounded-15 px-3 py-2">
|
||||||
|
<div class="row justify-content-center align-items-center h-100">
|
||||||
|
<div class="col-12 text-center">Estéril</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="position-relative d-flex flex-column justify-content-center gap-2">
|
||||||
|
<div class="drop-card" data-drop="1"></div>
|
||||||
|
<div class="card text-card bg-verde-oscuro text-white border-0 rounded-15 px-3 py-2">
|
||||||
|
<div class="row justify-content-center align-items-center h-100">
|
||||||
|
<div class="col-12 text-center">Desinfectado</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="position-relative d-flex flex-column justify-content-center gap-2">
|
||||||
|
<div class="drop-card" data-drop="2"></div>
|
||||||
|
<div class="card text-card bg-verde-oscuro text-white border-0 rounded-15 px-3 py-2">
|
||||||
|
<div class="row justify-content-center align-items-center h-100">
|
||||||
|
<div class="col-12 text-center">Limpio</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="position-relative d-flex flex-column justify-content-center gap-2">
|
||||||
|
<div class="drop-card" data-drop="3"></div>
|
||||||
|
<div class="card text-card bg-verde-oscuro text-white border-0 rounded-15 px-3 py-2">
|
||||||
|
<div class="row justify-content-center align-items-center h-100">
|
||||||
|
<div class="col-12 text-center">Sucio/Contaminado</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="content-drags w-100 h-100">
|
||||||
|
<div class="row justify-content-end align-items-center h-100">
|
||||||
|
<div class="col-10 pe-4">
|
||||||
|
<div class="row justify-content-center">
|
||||||
|
<div class="col-12">
|
||||||
|
<div class="drag-card-container d-flex justify-content-center align-items-center flex-row"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="d-none">
|
||||||
|
<div id="pop0">
|
||||||
|
<div class="container-fluid">
|
||||||
|
<div class="w-100 text-center">
|
||||||
|
<img src="img/3.5.png" class="img-fluid" />
|
||||||
|
</div>
|
||||||
|
<div class="row justify-content-center">
|
||||||
|
<div class="col-12 text-center mb-2">
|
||||||
|
<h3 class="text-secondary-dark fw-bold">¡Bien hecho!</h3>
|
||||||
|
</div>
|
||||||
|
<div class="col-12 text-center">
|
||||||
|
<p class="mb-0">Has concluido la actividad.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
$(function () {
|
||||||
|
'use strict';
|
||||||
|
$('.wrap-course-content').addClass('fake');
|
||||||
|
const bad = CourseNav.createSound('audio/feedback-incorrect.mpeg');
|
||||||
|
const good = CourseNav.createSound('audio/feedback-correct.mpeg');
|
||||||
|
const changeDrag = [
|
||||||
|
'<div class="drag-option" data-drag="0"><img src="img/15.0.png" class="img-fluid"></div>',
|
||||||
|
'<div class="drag-option" data-drag="1"><img src="img/15.1.png" class="img-fluid"></div>',
|
||||||
|
'<div class="drag-option" data-drag="2"><img src="img/15.2.png" class="img-fluid"></div>',
|
||||||
|
'<div class="drag-option" data-drag="3"><img src="img/15.3.png" class="img-fluid"></div>',
|
||||||
|
];
|
||||||
|
|
||||||
|
function shuffleArray(array) {
|
||||||
|
for (let i = array.length - 1; i > 0; i--) {
|
||||||
|
const j = Math.floor(Math.random() * (i + 1));
|
||||||
|
[array[i], array[j]] = [array[j], array[i]];
|
||||||
|
}
|
||||||
|
return array;
|
||||||
|
}
|
||||||
|
|
||||||
|
const shuffled = shuffleArray([...changeDrag]);
|
||||||
|
let currentIndex = 0;
|
||||||
|
|
||||||
|
function showNextDrag() {
|
||||||
|
if (currentIndex < shuffled.length) {
|
||||||
|
const $newDrag = $(shuffled[currentIndex]);
|
||||||
|
$('.drag-card-container').append($newDrag);
|
||||||
|
|
||||||
|
$newDrag.draggable({
|
||||||
|
revert: 'invalid',
|
||||||
|
revertDuration: 300,
|
||||||
|
cursor: 'grabbing',
|
||||||
|
start: function (event, ui) {
|
||||||
|
$(this).css('z-index', 1000);
|
||||||
|
ui.position.left = 0;
|
||||||
|
ui.position.top = 0;
|
||||||
|
},
|
||||||
|
drag: function (event, ui) {
|
||||||
|
var scale = parseFloat($('.wrap-course-content').css('transform').split('(')[1]) || 1;
|
||||||
|
var changeLeft = ui.position.left - ui.originalPosition.left;
|
||||||
|
var newLeft = ui.originalPosition.left + changeLeft / scale;
|
||||||
|
var changeTop = ui.position.top - ui.originalPosition.top;
|
||||||
|
var newTop = ui.originalPosition.top + changeTop / scale;
|
||||||
|
ui.position.left = newLeft;
|
||||||
|
ui.position.top = newTop;
|
||||||
|
},
|
||||||
|
stop: function (event, ui) {
|
||||||
|
$(this).css('z-index', 1);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
currentIndex++;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
$('.drop-card').droppable({
|
||||||
|
accept: '.drag-option',
|
||||||
|
tolerance: 'intersect',
|
||||||
|
drop: function (event, ui) {
|
||||||
|
const dragData = ui.helper.data('drag');
|
||||||
|
const dropData = $(this).data('drop');
|
||||||
|
|
||||||
|
if (dragData == dropData) {
|
||||||
|
good.play();
|
||||||
|
ui.helper.css({ position: 'static', top: 'auto', left: 'auto' }).appendTo(this);
|
||||||
|
ui.helper.draggable('disable');
|
||||||
|
$(this).droppable('disable');
|
||||||
|
|
||||||
|
showNextDrag();
|
||||||
|
|
||||||
|
if ($('.drop-card:not(.ui-droppable-disabled)').length === 0) {
|
||||||
|
checkAllCompleted();
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
bad.play();
|
||||||
|
ui.helper.draggable('option', 'revert', true);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
function checkAllCompleted() {
|
||||||
|
setTimeout(() => {
|
||||||
|
const html = $('#pop0').html();
|
||||||
|
Swal.fire({
|
||||||
|
html: html,
|
||||||
|
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',
|
||||||
|
},
|
||||||
|
confirmButtonText: 'Cerrar',
|
||||||
|
showConfirmButton: true,
|
||||||
|
allowOutsideClick: false,
|
||||||
|
allowEscapeKey: false,
|
||||||
|
backdrop: 'rgba(65, 60, 60, .95)',
|
||||||
|
width: '35em',
|
||||||
|
didClose: () => {
|
||||||
|
CourseNav.setSlideVisited();
|
||||||
|
$('.drag-option').addClass('disabled');
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}, 250);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Show first drag element
|
||||||
|
showNextDrag();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,279 @@
|
|||||||
|
<style>
|
||||||
|
.fake {
|
||||||
|
background-image: url(img/bg03.jpg);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center;
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hr-style {
|
||||||
|
opacity: 1;
|
||||||
|
width: 25%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-inst {
|
||||||
|
background-color: #e3ece8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-answer {
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 10px;
|
||||||
|
box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.letter {
|
||||||
|
background-color: #6c9d7a;
|
||||||
|
border-radius: 10px;
|
||||||
|
border-top-right-radius: 0;
|
||||||
|
border-bottom-right-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-answer.selected {
|
||||||
|
background-color: #d9c5d7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-answer.selected .letter {
|
||||||
|
background-color: #925c8d;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-answer:hover {
|
||||||
|
background-color: #d9c5d7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-answer:hover .letter {
|
||||||
|
background-color: #925c8d;
|
||||||
|
}
|
||||||
|
|
||||||
|
#svg-container {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
#svg-container svg {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.piece-puzzle {
|
||||||
|
transition: all 0.5s ease;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div 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-12">
|
||||||
|
<div class="row justify-content-center">
|
||||||
|
<div class="col-10 mb-2 animate__animated animate__bounceInDown">
|
||||||
|
<h2 class="text-center fw-bold text-primary">Control de líquidos</h2>
|
||||||
|
<hr class="border border-3 border-verde-oscuro hr-style mx-auto my-0" />
|
||||||
|
</div>
|
||||||
|
<div class="col-12 px-0 mb-3 animate__animated animate__lightSpeedInLeft" id="col-instrucciones">
|
||||||
|
<div class="card bg-inst border-0 my-2 rounded-0 bg-custom ps-4 pe-3 py-2 text-center">
|
||||||
|
<div class="d-flex justify-content-center align-items-center flex-row gap-2">
|
||||||
|
<img src="img/3.1.png" class="img-fluid mx-3" />
|
||||||
|
<p class="mb-0 text-start"><strong>Instrucciones:</strong> 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.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-12">
|
||||||
|
<div class="row justify-content-center align-items-center">
|
||||||
|
<div class="col-4 text-center">
|
||||||
|
<div id="svg-container"></div>
|
||||||
|
</div>
|
||||||
|
<div class="col-7 col-actividad">
|
||||||
|
<div id="card-content-quiz-rompecabezas" class="card bg-white border-0 rounded-15 p-3 card-content-quiz animate__animated animate__zoomIn" style="box-shadow: 0 0 12px rgba(0, 0, 0, 0.5)">
|
||||||
|
<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 content-answers mb-3"></div>
|
||||||
|
<div class="col-12 text-center">
|
||||||
|
<p class="small mb-0">"Estos son casos hipotéticos basados en las referencias bibliográficas."</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="d-none">
|
||||||
|
<div id="pop0">
|
||||||
|
<div class="container-fluid">
|
||||||
|
<div class="w-100 text-center">
|
||||||
|
<img src="img/3.5.png" class="img-fluid" />
|
||||||
|
</div>
|
||||||
|
<div class="row justify-content-center">
|
||||||
|
<div class="col-12 text-center mb-2">
|
||||||
|
<h3 class="text-secondary-dark fw-bold">¡Bien hecho!</h3>
|
||||||
|
</div>
|
||||||
|
<div class="col-12 text-center">
|
||||||
|
<p class="mb-0">Has concluido la actividad.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
$(function () {
|
||||||
|
'use strict';
|
||||||
|
$('.wrap-course-content').addClass('fake');
|
||||||
|
let questions;
|
||||||
|
let currentQuestionIndex = 0;
|
||||||
|
let currentQuestion;
|
||||||
|
let correctQuestions = 0;
|
||||||
|
const bad = CourseNav.createSound('audio/feedback-incorrect.mpeg');
|
||||||
|
const good = CourseNav.createSound('audio/feedback-correct.mpeg');
|
||||||
|
|
||||||
|
function loadSVG() {
|
||||||
|
$.get(
|
||||||
|
'img/puzzle.svg',
|
||||||
|
function (data) {
|
||||||
|
var svg = $(data).find('svg');
|
||||||
|
$('#svg-container').html(svg);
|
||||||
|
// Remove width and height attributes to make SVG responsive
|
||||||
|
svg.removeAttr('width').removeAttr('height');
|
||||||
|
|
||||||
|
// Ocultar elementos con id que inicie con 'pz' y agregar clase 'piece-puzzle'
|
||||||
|
svg.find('[id^="pz"]').hide().addClass('piece-puzzle');
|
||||||
|
},
|
||||||
|
'xml',
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const urlExcelFile = 'Actividades_Rotafolio_Vantive.xlsx';
|
||||||
|
|
||||||
|
function readExcelFile(url, callback) {
|
||||||
|
var xhr = new XMLHttpRequest();
|
||||||
|
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) => {
|
||||||
|
var sheet = workbook.Sheets[sheetName];
|
||||||
|
result[sheetName] = XLSX.utils.sheet_to_json(sheet);
|
||||||
|
});
|
||||||
|
callback(result);
|
||||||
|
};
|
||||||
|
xhr.send();
|
||||||
|
}
|
||||||
|
|
||||||
|
function procesarPreguntas(data) {
|
||||||
|
const preguntas = data.map((fila) => {
|
||||||
|
const opciones = [];
|
||||||
|
Object.keys(fila).forEach((key) => {
|
||||||
|
if (key.startsWith('opcion')) {
|
||||||
|
opciones.push({
|
||||||
|
text: String(fila[key]).trim(),
|
||||||
|
correct: key === 'opcion_c',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return {
|
||||||
|
pregunta: String(fila.pregunta).trim(),
|
||||||
|
opciones: opciones,
|
||||||
|
retroalimentacion_correcta: fila.retroalimentacion_correcta.trim(),
|
||||||
|
retroalimentacion_incorrecta: fila.retroalimentacion_incorrecta.trim(),
|
||||||
|
};
|
||||||
|
});
|
||||||
|
return preguntas;
|
||||||
|
}
|
||||||
|
|
||||||
|
function shuffleArray(array) {
|
||||||
|
for (let i = array.length - 1; i > 0; i--) {
|
||||||
|
const j = Math.floor(Math.random() * (i + 1));
|
||||||
|
[array[i], array[j]] = [array[j], array[i]];
|
||||||
|
}
|
||||||
|
return array;
|
||||||
|
}
|
||||||
|
|
||||||
|
function displayQuestion() {
|
||||||
|
if (currentQuestionIndex < questions.length) {
|
||||||
|
currentQuestion = questions[currentQuestionIndex];
|
||||||
|
$('.txt-question').html(currentQuestion.pregunta);
|
||||||
|
|
||||||
|
$('.content-answers').empty();
|
||||||
|
|
||||||
|
// Shuffle answers for current question
|
||||||
|
const shuffledAnswers = shuffleArray([...currentQuestion.opciones]);
|
||||||
|
|
||||||
|
shuffledAnswers.forEach((opcion, index) => {
|
||||||
|
const answerHtml = `
|
||||||
|
<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>
|
||||||
|
<div class="txt-answer ps-3">${opcion.text}</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
$('.content-answers').append(answerHtml);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function initializeAnswers() {
|
||||||
|
$('#card-content-quiz-rompecabezas').on('click', '.btn-answer', function () {
|
||||||
|
const isCorrect = $(this).data('correct');
|
||||||
|
|
||||||
|
if (isCorrect) {
|
||||||
|
CourseNav.audioController.stopAllSoundsAndPlay(good);
|
||||||
|
correctQuestions++;
|
||||||
|
|
||||||
|
$(`#pz${correctQuestions - 1}`).show();
|
||||||
|
|
||||||
|
currentQuestionIndex++;
|
||||||
|
|
||||||
|
if (currentQuestionIndex < questions.length) {
|
||||||
|
$('.card-content-quiz').removeClass('animate__zoomIn').addClass('animate__zoomOut');
|
||||||
|
setTimeout(() => {
|
||||||
|
$('.card-content-quiz').removeClass('animate__zoomOut').addClass('animate__zoomIn');
|
||||||
|
displayQuestion();
|
||||||
|
}, 500);
|
||||||
|
} else {
|
||||||
|
$('.col-actividad').hide();
|
||||||
|
setTimeout(() => {
|
||||||
|
checkAllCompleted();
|
||||||
|
}, 300);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
CourseNav.audioController.stopAllSoundsAndPlay(bad);
|
||||||
|
}
|
||||||
|
|
||||||
|
$('.btn-answer').off('click');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function checkAllCompleted() {
|
||||||
|
setTimeout(() => {
|
||||||
|
const html = $('#pop0').html();
|
||||||
|
Swal.fire({
|
||||||
|
html: html,
|
||||||
|
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',
|
||||||
|
},
|
||||||
|
confirmButtonText: 'Cerrar',
|
||||||
|
showConfirmButton: true,
|
||||||
|
allowOutsideClick: false,
|
||||||
|
allowEscapeKey: false,
|
||||||
|
backdrop: 'rgba(65, 60, 60, .95)',
|
||||||
|
width: '35em',
|
||||||
|
didClose: () => {
|
||||||
|
CourseNav.setSlideVisited();
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}, 250);
|
||||||
|
}
|
||||||
|
|
||||||
|
readExcelFile(urlExcelFile, function (data) {
|
||||||
|
const hojaDatos = data['Diapositiva 17'];
|
||||||
|
questions = shuffleArray(procesarPreguntas(hojaDatos));
|
||||||
|
loadSVG();
|
||||||
|
displayQuestion();
|
||||||
|
initializeAnswers();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,218 @@
|
|||||||
|
<style>
|
||||||
|
.fake {
|
||||||
|
background-image: url(img/bg01.jpg);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center;
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hr-style {
|
||||||
|
opacity: 1;
|
||||||
|
width: 15%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-drop {
|
||||||
|
position: relative;
|
||||||
|
background-color: #85a89d;
|
||||||
|
border-radius: 12px;
|
||||||
|
height: 63px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.num {
|
||||||
|
background-color: #115742;
|
||||||
|
border-radius: 12px;
|
||||||
|
border-top-right-radius: 0;
|
||||||
|
border-bottom-right-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-drag {
|
||||||
|
background: #b68fb2;
|
||||||
|
background: linear-gradient(to right, #b68fb2 0%, #925c8d 100%);
|
||||||
|
border-radius: 12px;
|
||||||
|
border-top-left-radius: 0;
|
||||||
|
border-bottom-left-radius: 0;
|
||||||
|
width: 280px;
|
||||||
|
cursor: grab;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-drag:active {
|
||||||
|
cursor: grabbing;
|
||||||
|
}
|
||||||
|
|
||||||
|
.obj-drop {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div 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" style="overflow: hidden">
|
||||||
|
<div class="col-12">
|
||||||
|
<div class="row justify-content-center">
|
||||||
|
<div class="col-10 mb-2">
|
||||||
|
<h2 class="text-center fw-bold text-primary">Registros</h2>
|
||||||
|
<hr class="border border-3 border-verde-oscuro hr-style mx-auto my-0" />
|
||||||
|
</div>
|
||||||
|
<div class="col-10 px-0 mb-1">
|
||||||
|
<div class="card bg-verde-gris border-0 my-2 rounded-4 bg-custom p-3 text-center">
|
||||||
|
<div class="d-flex justify-content-center align-items-center flex-row">
|
||||||
|
<img src="img/08.0.png" class="img-fluid mx-3" />
|
||||||
|
<p class="mb-0"><strong>Instrucciones:</strong> Toma los tipos de terapia que se presentan y arrástralos hacia el registro que les corresponde.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-12 text-center mb-3">
|
||||||
|
<p class="small mb-0">"Estos son casos hipotéticos basados en las referencias bibliográficas."</p>
|
||||||
|
</div>
|
||||||
|
<div class="col-12" id="drag-drop-activity">
|
||||||
|
<div class="row justify-content-center align-items-center">
|
||||||
|
<div class="col-4 col-drags">
|
||||||
|
<div class="d-flex justify-content-center align-items-center flex-column gap-3 content-drags">
|
||||||
|
<div class="btn-drag px-3 py-2 text-start" data-drag="0">
|
||||||
|
<p class="mb-0 text-white">Diálisis Peritoneal Continua Ambulatoria <strong>(DPCA)</strong></p>
|
||||||
|
</div>
|
||||||
|
<div class="btn-drag px-3 py-2 text-start" data-drag="1">
|
||||||
|
<p class="mb-0 text-white">Diálisis Peritoneal Automatizada <strong>(DPA)</strong></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-7">
|
||||||
|
<div class="row justify-content-center">
|
||||||
|
<div class="col-12">
|
||||||
|
<div class="row justify-content-center align-items-center">
|
||||||
|
<div class="col-6 text-center">
|
||||||
|
<img src="img/17.0.png" class="img-fluid mb-3" /><br />
|
||||||
|
<div class="content-drop d-flex flex-row align-items-center gap-0">
|
||||||
|
<div class="num d-flex justify-content-center align-items-center px-3 text-white fw-bold h-100"><h3 class="mb-0">0</h3></div>
|
||||||
|
<div class="obj-drop" data-drop="0"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-6 text-center">
|
||||||
|
<img src="img/17.1.png" class="img-fluid mb-3" /><br />
|
||||||
|
<div class="content-drop d-flex flex-row align-items-center gap-0">
|
||||||
|
<div class="num d-flex justify-content-center align-items-center px-3 text-white fw-bold h-100"><h3 class="mb-0">1</h3></div>
|
||||||
|
<div class="obj-drop" data-drop="1"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="d-none">
|
||||||
|
<div id="pop0">
|
||||||
|
<div class="container-fluid">
|
||||||
|
<div class="w-100 text-center">
|
||||||
|
<img src="img/17.2.png" class="img-fluid" />
|
||||||
|
</div>
|
||||||
|
<div class="row justify-content-center">
|
||||||
|
<div class="col-12 text-center mb-2">
|
||||||
|
<h3 class="text-secondary-dark fw-bold">¡No lo olvides!</h3>
|
||||||
|
</div>
|
||||||
|
<div class="col-12 text-center">
|
||||||
|
<p class="mb-0">Siempre que acudas a la unidad de diálisis, debes llevarlos.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
$(function () {
|
||||||
|
'use strict';
|
||||||
|
$('.wrap-course-content').addClass('fake');
|
||||||
|
const bad = CourseNav.createSound('audio/feedback-incorrect.mpeg');
|
||||||
|
const good = CourseNav.createSound('audio/feedback-correct.mpeg');
|
||||||
|
|
||||||
|
function shuffleArray(array) {
|
||||||
|
for (let i = array.length - 1; i > 0; i--) {
|
||||||
|
const j = Math.floor(Math.random() * (i + 1));
|
||||||
|
[array[i], array[j]] = [array[j], array[i]];
|
||||||
|
}
|
||||||
|
return array;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Shuffle btn-drag elements
|
||||||
|
const $dragElements = $('.btn-drag');
|
||||||
|
const shuffled = shuffleArray($dragElements.toArray());
|
||||||
|
$('.content-drags').empty().append(shuffled);
|
||||||
|
|
||||||
|
$('.btn-drag').draggable({
|
||||||
|
revert: 'invalid',
|
||||||
|
revertDuration: 300,
|
||||||
|
cursor: 'grabbing',
|
||||||
|
start: function (event, ui) {
|
||||||
|
$(this).css('z-index', 1000);
|
||||||
|
ui.position.left = 0;
|
||||||
|
ui.position.top = 0;
|
||||||
|
},
|
||||||
|
drag: function (event, ui) {
|
||||||
|
var scale = parseFloat($('.wrap-course-content').css('transform').split('(')[1]) || 1;
|
||||||
|
var changeLeft = ui.position.left - ui.originalPosition.left;
|
||||||
|
var newLeft = ui.originalPosition.left + changeLeft / scale;
|
||||||
|
var changeTop = ui.position.top - ui.originalPosition.top;
|
||||||
|
var newTop = ui.originalPosition.top + changeTop / scale;
|
||||||
|
ui.position.left = newLeft;
|
||||||
|
ui.position.top = newTop;
|
||||||
|
},
|
||||||
|
stop: function (event, ui) {
|
||||||
|
$(this).css('z-index', 1);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
$('.obj-drop').droppable({
|
||||||
|
accept: '.btn-drag',
|
||||||
|
tolerance: 'pointer',
|
||||||
|
drop: function (event, ui) {
|
||||||
|
const dragData = ui.helper.data('drag');
|
||||||
|
const dropData = $(this).data('drop');
|
||||||
|
|
||||||
|
if (dragData == dropData) {
|
||||||
|
CourseNav.audioController.stopAllSoundsAndPlay(good);
|
||||||
|
ui.helper.css({ position: 'static', top: 'auto', left: 'auto' }).appendTo(this);
|
||||||
|
ui.helper.draggable('disable');
|
||||||
|
$(this).droppable('disable');
|
||||||
|
|
||||||
|
// Verificar si todos están completados
|
||||||
|
if ($('.obj-drop:not(.ui-droppable-disabled)').length === 0) {
|
||||||
|
Completed();
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
CourseNav.audioController.stopAllSoundsAndPlay(bad);
|
||||||
|
ui.helper.draggable('option', 'revert', true);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
function Completed() {
|
||||||
|
$('.col-drags').hide();
|
||||||
|
const html = $('#pop0').html();
|
||||||
|
Swal.fire({
|
||||||
|
html: html,
|
||||||
|
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',
|
||||||
|
},
|
||||||
|
confirmButtonText: 'Cerrar',
|
||||||
|
showConfirmButton: true,
|
||||||
|
allowOutsideClick: false,
|
||||||
|
allowEscapeKey: false,
|
||||||
|
focusConfirm: false,
|
||||||
|
backdrop: 'rgba(65, 60, 60, .95)',
|
||||||
|
width: '35em',
|
||||||
|
didOpen: () => {},
|
||||||
|
didClose: () => {
|
||||||
|
CourseNav.audioController.stopAudio();
|
||||||
|
CourseNav.setSlideVisited();
|
||||||
|
$('.obj-drop').addClass('disabled');
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,365 @@
|
|||||||
|
<style>
|
||||||
|
.fake {
|
||||||
|
background-image: url(img/bg03.jpg);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center;
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hr-style {
|
||||||
|
opacity: 1;
|
||||||
|
width: 23%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-inst {
|
||||||
|
background-color: #e3ece8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.med_style {
|
||||||
|
position: relative;
|
||||||
|
width: 35px;
|
||||||
|
height: 35px;
|
||||||
|
background: #4d4d4d;
|
||||||
|
border: 4px solid #808080;
|
||||||
|
box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.med_style.visited {
|
||||||
|
background: #8eba1f;
|
||||||
|
background: linear-gradient(to right, #8eba1f 0%, #105742 100%);
|
||||||
|
border: 4px solid #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pop_html_style.padd_perso .swal2-html-container {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.object-btn {
|
||||||
|
cursor: pointer;
|
||||||
|
position: relative;
|
||||||
|
width: 19%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-answer {
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 10px;
|
||||||
|
box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
|
||||||
|
width: 95%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.letter {
|
||||||
|
background-color: #6c9d7a;
|
||||||
|
border-radius: 10px;
|
||||||
|
border-top-right-radius: 0;
|
||||||
|
border-bottom-right-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-answer.selected {
|
||||||
|
background-color: #d9c5d7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-answer.selected .letter {
|
||||||
|
background-color: #925c8d;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-answer:hover {
|
||||||
|
background-color: #d9c5d7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-answer:hover .letter {
|
||||||
|
background-color: #925c8d;
|
||||||
|
}
|
||||||
|
|
||||||
|
.object-btn.completed::before {
|
||||||
|
content: url(img/18.5.png);
|
||||||
|
position: absolute;
|
||||||
|
top: 65px;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.phone-numbers {
|
||||||
|
pointer-events: none !important;
|
||||||
|
user-select: text;
|
||||||
|
-webkit-user-select: text;
|
||||||
|
-moz-user-select: text;
|
||||||
|
-ms-user-select: text;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div 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-12">
|
||||||
|
<div class="row justify-content-center">
|
||||||
|
<div class="col-10 mb-2 animate__animated animate__bounceInDown">
|
||||||
|
<h2 class="text-center fw-bold text-primary">Consejos útiles</h2>
|
||||||
|
<hr class="border border-3 border-verde-oscuro hr-style mx-auto my-0" />
|
||||||
|
</div>
|
||||||
|
<div class="col-8 px-0 mb-3 animate__animated animate__lightSpeedInLeft" id="col-instrucciones">
|
||||||
|
<div class="card bg-inst border-0 my-2 rounded-3 bg-custom ps-4 pe-3 py-2 text-center">
|
||||||
|
<div class="d-flex justify-content-center align-items-center flex-row gap-2">
|
||||||
|
<img src="img/3.1.png" class="img-fluid mx-3" />
|
||||||
|
<p class="mb-0 text-start"><strong>Instrucciones:</strong> Da clic en cada una de las salas y contesta la pregunta correspondiente al tema para ganar los puntos.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="actividad-objects" class="col-12">
|
||||||
|
<div class="row justify-content-center align-items-center">
|
||||||
|
<div class="col-12 text-center mb-3">
|
||||||
|
<div class="content-medidor bg-white rounded-5 p-3 d-inline-flex flex-row justify-content-center align-items-center gap-3">
|
||||||
|
<h4 class="mb-0 fw-bold text-verde-pino">Puntos:</h4>
|
||||||
|
<div class="grids-med d-flex flex-row justify-content-center align-items-center gap-3">
|
||||||
|
<div id="#med0" class="med_style"></div>
|
||||||
|
<div id="#med1" class="med_style"></div>
|
||||||
|
<div id="#med2" class="med_style"></div>
|
||||||
|
<div id="#med3" class="med_style"></div>
|
||||||
|
<div id="#med4" class="med_style"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-11">
|
||||||
|
<div class="d-flex flex-row justify-content-center gap-2">
|
||||||
|
<div class="object-btn text-center d-inline-block" data-obj="0">
|
||||||
|
<img src="img/18.0.png" class="img-fluid mb-2 animate__animated animate__pulse animate__infinite" /><br />
|
||||||
|
<h4 class="fw-bold text-center text-primary">Sala: Estilo de vida</h4>
|
||||||
|
</div>
|
||||||
|
<div class="object-btn text-center d-inline-block" data-obj="1">
|
||||||
|
<img src="img/18.1.png" class="img-fluid mb-2 animate__animated animate__pulse animate__infinite" /><br />
|
||||||
|
<h4 class="fw-bold text-center text-primary">Sala: Desecho de residuos</h4>
|
||||||
|
</div>
|
||||||
|
<div class="object-btn text-center d-inline-block" data-obj="2">
|
||||||
|
<img src="img/18.2.png" class="img-fluid mb-2 animate__animated animate__pulse animate__infinite" /><br />
|
||||||
|
<h4 class="fw-bold text-center text-primary">Sala: Entrega domiciliaria</h4>
|
||||||
|
</div>
|
||||||
|
<div class="object-btn text-center d-inline-block" data-obj="3">
|
||||||
|
<img src="img/18.3.png" class="img-fluid mb-2 animate__animated animate__pulse animate__infinite" /><br />
|
||||||
|
<h4 class="fw-bold text-center text-primary">Sala: Soporte técnico</h4>
|
||||||
|
<h4 class="mb-0 text-primary fw-bold phone-numbers">
|
||||||
|
777 329 6162 <br />
|
||||||
|
777 160 7199
|
||||||
|
</h4>
|
||||||
|
</div>
|
||||||
|
<div class="object-btn text-center d-inline-block" data-obj="4">
|
||||||
|
<img src="img/18.4.png" class="img-fluid mb-2 animate__animated animate__pulse animate__infinite" /><br />
|
||||||
|
<h4 class="fw-bold text-center text-primary">Sala: Reportes</h4>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="d-none">
|
||||||
|
<div id="pops-questions">
|
||||||
|
<div class="container-fluid px-0" style="overflow: hidden; border-top-left-radius: 12px; border-top-right-radius: 12px">
|
||||||
|
<div class="row justify-content-center align-items-center">
|
||||||
|
<div class="col-12 text-center mb-3 img-pregunta bg-secondary"></div>
|
||||||
|
<div id="txt-question" class="col-12 text-center text-verde-oscuro fw-bold mb-3 px-4"></div>
|
||||||
|
<div class="col-12 px-4 mb-3">
|
||||||
|
<div id="txt-answers" class="d-flex flex-column justify-content-center align-items-center gap-3 text-start"></div>
|
||||||
|
</div>
|
||||||
|
<div class="col-12 text-center">
|
||||||
|
<p class="small mb-0">"Estos son casos hipotéticos basados en las referencias bibliográficas."</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="pop0">
|
||||||
|
<div class="container-fluid">
|
||||||
|
<div class="w-100 text-center">
|
||||||
|
<img src="img/3.5.png" class="img-fluid" />
|
||||||
|
</div>
|
||||||
|
<div class="row justify-content-center">
|
||||||
|
<div class="col-12 text-center mb-2">
|
||||||
|
<h3 class="text-secondary-dark fw-bold">¡Bien hecho!</h3>
|
||||||
|
</div>
|
||||||
|
<div class="col-12 text-center">
|
||||||
|
<p class="mb-0">Has concluido la actividad.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
$(function () {
|
||||||
|
'use strict';
|
||||||
|
$('.wrap-course-content').addClass('fake');
|
||||||
|
let questions;
|
||||||
|
let currentQuestionIndex = 0;
|
||||||
|
let currentQuestion;
|
||||||
|
let correctQuestions = 0;
|
||||||
|
const bad = CourseNav.createSound('audio/feedback-incorrect.mpeg');
|
||||||
|
const good = CourseNav.createSound('audio/feedback-correct.mpeg');
|
||||||
|
const imganesPop = ['<img src="img/18.0.png" class="img-fluid">', '<img src="img/18.1.png" class="img-fluid">', '<img src="img/18.2.png" class="img-fluid">', '<img src="img/18.3.png" class="img-fluid">', '<img src="img/18.4.png" class="img-fluid">'];
|
||||||
|
|
||||||
|
const urlExcelFile = 'Actividades_Rotafolio_Vantive.xlsx';
|
||||||
|
|
||||||
|
function readExcelFile(url, callback) {
|
||||||
|
var xhr = new XMLHttpRequest();
|
||||||
|
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) => {
|
||||||
|
var sheet = workbook.Sheets[sheetName];
|
||||||
|
result[sheetName] = XLSX.utils.sheet_to_json(sheet);
|
||||||
|
});
|
||||||
|
callback(result);
|
||||||
|
};
|
||||||
|
xhr.send();
|
||||||
|
}
|
||||||
|
|
||||||
|
function procesarPreguntas(data) {
|
||||||
|
const preguntas = data.map((fila) => {
|
||||||
|
const opciones = [];
|
||||||
|
Object.keys(fila).forEach((key) => {
|
||||||
|
if (key.startsWith('opcion')) {
|
||||||
|
opciones.push({
|
||||||
|
text: fila[key].trim(),
|
||||||
|
correct: key === 'opcion_c',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return {
|
||||||
|
pregunta: fila.pregunta.trim(),
|
||||||
|
opciones: opciones,
|
||||||
|
retroalimentacion_correcta: fila.retroalimentacion_correcta ? fila.retroalimentacion_correcta.trim() : '',
|
||||||
|
retroalimentacion_incorrecta: fila.retroalimentacion_incorrecta ? fila.retroalimentacion_incorrecta.trim() : '',
|
||||||
|
};
|
||||||
|
});
|
||||||
|
return preguntas;
|
||||||
|
}
|
||||||
|
|
||||||
|
function shuffleArray(array) {
|
||||||
|
for (let i = array.length - 1; i > 0; i--) {
|
||||||
|
const j = Math.floor(Math.random() * (i + 1));
|
||||||
|
[array[i], array[j]] = [array[j], array[i]];
|
||||||
|
}
|
||||||
|
return array;
|
||||||
|
}
|
||||||
|
|
||||||
|
let currentObjectBtn;
|
||||||
|
let isCorrectAnswer = false;
|
||||||
|
|
||||||
|
readExcelFile(urlExcelFile, function (data) {
|
||||||
|
const hojaDatos = data['Diapositiva 20'];
|
||||||
|
questions = procesarPreguntas(hojaDatos);
|
||||||
|
|
||||||
|
// Enable click handlers after questions are loaded
|
||||||
|
$('.object-btn').click(function (e) {
|
||||||
|
e.preventDefault();
|
||||||
|
if ($(this).hasClass('disabled')) return;
|
||||||
|
CourseNav.soundClick();
|
||||||
|
currentObjectBtn = $(this);
|
||||||
|
showRandomQuestion();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
function showRandomQuestion() {
|
||||||
|
// Seleccionar pregunta por índice del botón
|
||||||
|
const objIndex = currentObjectBtn.data('obj');
|
||||||
|
currentQuestion = questions[objIndex];
|
||||||
|
|
||||||
|
const html = $('#pops-questions').html();
|
||||||
|
Swal.fire({
|
||||||
|
html: html,
|
||||||
|
target: document.getElementById('wrap-course-content'),
|
||||||
|
customClass: {
|
||||||
|
popup: 'pop_html_style padd_perso border border-3 border-primary rounded-4',
|
||||||
|
confirmButton: 'btn text-white bg-primary amor fw-semibold animate__animated animate__pulse animate__infinite',
|
||||||
|
},
|
||||||
|
confirmButtonText: 'Cerrar',
|
||||||
|
showConfirmButton: false,
|
||||||
|
allowOutsideClick: false,
|
||||||
|
allowEscapeKey: false,
|
||||||
|
focusConfirm: false,
|
||||||
|
backdrop: 'rgba(65, 60, 60, .95)',
|
||||||
|
width: '50em',
|
||||||
|
didOpen: () => {
|
||||||
|
displayQuestion();
|
||||||
|
},
|
||||||
|
didClose: () => {
|
||||||
|
//CourseNav.audioController.stopAudio();
|
||||||
|
checkAllCompleted();
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function displayQuestion() {
|
||||||
|
const objIndex = currentObjectBtn.data('obj');
|
||||||
|
const container = Swal.getHtmlContainer();
|
||||||
|
|
||||||
|
$(container).find('.img-pregunta').html(imganesPop[objIndex]);
|
||||||
|
$(container).find('#txt-question').html(`<p class="fw-bold">${currentQuestion.pregunta}</p>`);
|
||||||
|
|
||||||
|
const shuffledAnswers = shuffleArray([...currentQuestion.opciones]);
|
||||||
|
let answersHTML = '';
|
||||||
|
|
||||||
|
shuffledAnswers.forEach((opcion, index) => {
|
||||||
|
answersHTML += `<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>
|
||||||
|
<div class="txt-answer ps-3">${opcion.text}</div>
|
||||||
|
</div>`;
|
||||||
|
});
|
||||||
|
|
||||||
|
$(container).find('#txt-answers').html(answersHTML);
|
||||||
|
|
||||||
|
$(container)
|
||||||
|
.find('.btn-answer')
|
||||||
|
.click(function () {
|
||||||
|
const isCorrect = $(this).data('correct');
|
||||||
|
handleAnswer(isCorrect);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleAnswer(isCorrect) {
|
||||||
|
if (isCorrect) {
|
||||||
|
CourseNav.audioController.stopAllSoundsAndPlay(good);
|
||||||
|
correctQuestions++;
|
||||||
|
|
||||||
|
// Marcar medidor como visitado
|
||||||
|
$(`.med_style:eq(${correctQuestions - 1})`).addClass('visited');
|
||||||
|
|
||||||
|
// Marcar botón como disabled
|
||||||
|
currentObjectBtn.addClass('disabled completed');
|
||||||
|
currentObjectBtn.find('img').removeClass('animate__pulse animate__infinite');
|
||||||
|
|
||||||
|
Swal.close();
|
||||||
|
} else {
|
||||||
|
CourseNav.audioController.stopAllSoundsAndPlay(bad);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function checkAllCompleted() {
|
||||||
|
if (correctQuestions >= 5) {
|
||||||
|
setTimeout(() => {
|
||||||
|
const html = $('#pop0').html();
|
||||||
|
Swal.fire({
|
||||||
|
html: html,
|
||||||
|
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',
|
||||||
|
},
|
||||||
|
confirmButtonText: 'Cerrar',
|
||||||
|
showConfirmButton: true,
|
||||||
|
allowOutsideClick: false,
|
||||||
|
allowEscapeKey: false,
|
||||||
|
backdrop: 'rgba(65, 60, 60, .95)',
|
||||||
|
width: '35em',
|
||||||
|
didClose: () => {
|
||||||
|
CourseNav.setSlideVisited();
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}, 250);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,58 @@
|
|||||||
|
<style>
|
||||||
|
.text-info {
|
||||||
|
position: absolute;
|
||||||
|
width: 65%;
|
||||||
|
height: 100%;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hr-style {
|
||||||
|
opacity: 1;
|
||||||
|
width: 70%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div 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-12 px-0'>
|
||||||
|
<div class='row'>
|
||||||
|
<div class="col-11 px-0">
|
||||||
|
<div class="d-inline-block position-relative">
|
||||||
|
<img src="img/19.0.webp" class="img-fluid">
|
||||||
|
<div class="text-info">
|
||||||
|
<div class="row justify-content-center align-items-center h-100">
|
||||||
|
<div class="col-9">
|
||||||
|
<div class="row justify-content-center">
|
||||||
|
<div class="col-12 mb-3 animate__animated animate__bounceInDown">
|
||||||
|
<div class="d-flex flex-row align-items-center gap-3">
|
||||||
|
<h1 class="text-white fw-bold">¡Felicidades!</h1>
|
||||||
|
<img src="img/19.1.png" class="img-fluid">
|
||||||
|
</div>
|
||||||
|
<hr class="border border-3 border-secondary hr-style my-0">
|
||||||
|
</div>
|
||||||
|
<div class="col-12 mb-3 animate__animated animate__lightSpeedInLeft animate__delay-1s">
|
||||||
|
<h2 class="text-verde-claro">Has terminado las actividades de la</h2>
|
||||||
|
<h2 class="text-white fw-bold">Inducción al programa de Diálisis Peritoneal.</h2>
|
||||||
|
</div>
|
||||||
|
<div class="col-12 animate__animated animate__zoomIn animate__delay-2s">
|
||||||
|
<p class="text-white mb-0">¡Tu esfuerzo marca la diferencia!</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
$(function () {
|
||||||
|
"use strict";
|
||||||
|
$('body').addClass('fake');
|
||||||
|
CourseNav.setSlideVisited();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,62 @@
|
|||||||
|
<style>
|
||||||
|
.fake {
|
||||||
|
background-image: url(img/bg05.jpg);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center;
|
||||||
|
background-size: cover;
|
||||||
|
background-attachment: fixed;
|
||||||
|
}
|
||||||
|
|
||||||
|
ol > li {
|
||||||
|
margin-bottom: 0.6rem;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="page-sco 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 align-content-center">
|
||||||
|
<div class="col-12">
|
||||||
|
<h1 class="fw-bold text-primary text-center">Referencias</h1>
|
||||||
|
<ol class="mb-0">
|
||||||
|
<li>International Society for Peritoneal Dialysis (ISPD). Peritoneal dialysis-related definitions and description of technique. Perit Dial Int. 2020;40(3):244–253.</li>
|
||||||
|
<li>International Society for Peritoneal Dialysis (ISPD). Teaching peritoneal dialysis to patients and caregivers: position paper. Perit Dial Int. 2025;45(1):3–19.</li>
|
||||||
|
<li>National Kidney Foundation. Hemodialysis. Am J Kidney Dis. 2015;66(5):884–930.</li>
|
||||||
|
<li>Kidney Disease: Improving Global Outcomes (KDIGO). KDIGO clinical practice guideline for the evaluation and management of chronic kidney disease. Kidney Int. 2024;105(Suppl 4):S1–S150.</li>
|
||||||
|
<li>Blake PG, Jain AK. Icodextrin as an osmotic agent in peritoneal dialysis. Kidney Int. 2002;62(Suppl 81):S38–S44.</li>
|
||||||
|
<li>Kidney Disease: Improving Global Outcomes (KDIGO). Krediet RT. The peritoneal membrane in peritoneal dialysis: physiology and pathophysiology. Nat Rev Nephrol. 2014;10(7):366–374.</li>
|
||||||
|
<li>Kidney Disease: Improving Global Outcomes (KDIGO). World Health Organization (WHO). WHO guidelines on hand hygiene in health care. Geneva: WHO; 2009.</li>
|
||||||
|
<li>International Society for Peritoneal Dialysis (ISPD). Catheter-related infection recommendations: 2023 update. Perit Dial Int. 2023;43(1):1–21.</li>
|
||||||
|
<li>Crabtree JH. Selected best demonstrated practices in peritoneal dialysis access. Kidney Int Suppl. 2006;(103):S27–S37</li>
|
||||||
|
<li>International Society for Peritoneal Dialysis (ISPD). Teaching peritoneal dialysis to patients and caregivers: position paper. Perit Dial Int. 2025;45(1):3–19.</li>
|
||||||
|
<li>International Society for Peritoneal Dialysis (ISPD). Peritonitis recommendations: 2022 update. Perit Dial Int. 2022;42(2):110–153.</li>
|
||||||
|
<li>World Health Organization (WHO). WHO guidelines on hand hygiene in health care. Geneva: WHO; 2009.</li>
|
||||||
|
<li>National Kidney Foundation. KDOQI Clinical Practice Guideline for Nutrition in CKD. Am J Kidney Dis. 2020;76(3 Suppl 1):S1–S107.</li>
|
||||||
|
<li>Kidney Disease: Improving Global Outcomes (KDIGO). KDIGO clinical practice guideline for anemia in chronic kidney disease. Kidney Int Suppl. 2021;11(4):1–115.</li>
|
||||||
|
<li>idney Disease: Improving Global Outcomes (KDIGO). CKD–Mineral and Bone Disorder guideline. Kidney Int Suppl. 2017;7(1):1–59.</li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
$(function () {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
$('.wrap-course-content').addClass('fake');
|
||||||
|
|
||||||
|
gsap.from('ol > li', {
|
||||||
|
y: 40,
|
||||||
|
opacity: 0,
|
||||||
|
duration: 0.5,
|
||||||
|
stagger: 0.08,
|
||||||
|
ease: 'power2.out',
|
||||||
|
});
|
||||||
|
|
||||||
|
CourseNav.setSlideVisited();
|
||||||
|
CourseNav.setLessonStatus('completed');
|
||||||
|
CourseNav.save();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,464 @@
|
|||||||
|
<style>
|
||||||
|
.fake {
|
||||||
|
background-image: url('img/bg11.jpg');
|
||||||
|
background-size: cover;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wruleta.spinning {
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#spin-btn {
|
||||||
|
border: none;
|
||||||
|
color: white;
|
||||||
|
padding: 15px 30px;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: bold;
|
||||||
|
border-radius: 12px;
|
||||||
|
cursor: pointer;
|
||||||
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
#spin-btn:hover {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
#spin-btn:disabled {
|
||||||
|
opacity: 0.6;
|
||||||
|
cursor: not-allowed;
|
||||||
|
transform: none;
|
||||||
|
}
|
||||||
|
.avance {
|
||||||
|
width: calc(100% / 6);
|
||||||
|
}
|
||||||
|
.avance img {
|
||||||
|
width: 70%;
|
||||||
|
aspect-ratio: 16 / 9;
|
||||||
|
object-fit: contain;
|
||||||
|
filter: grayscale(1);
|
||||||
|
transition: all 0.5s ease-in-out;
|
||||||
|
}
|
||||||
|
.avance img.visited {
|
||||||
|
filter: grayscale(0);
|
||||||
|
}
|
||||||
|
.no-overflow {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Estilos para SweetAlert de preguntas */
|
||||||
|
.swal2-popup {
|
||||||
|
border-radius: 20px !important;
|
||||||
|
border: 4px solid #28a745 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.swal2-title {
|
||||||
|
color: #2c5530 !important;
|
||||||
|
font-weight: bold !important;
|
||||||
|
font-size: 1.3rem !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.opcion-btn {
|
||||||
|
background: #f8f9fa !important;
|
||||||
|
color: #333 !important;
|
||||||
|
border: 1px solid #dee2e6 !important;
|
||||||
|
border-radius: 8px !important;
|
||||||
|
padding: 12px 20px !important;
|
||||||
|
margin-bottom: 10px !important;
|
||||||
|
font-weight: 500 !important;
|
||||||
|
position: relative !important;
|
||||||
|
transition: all 0.3s ease !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.opcion-btn:hover,
|
||||||
|
.opcion-btn:focus,
|
||||||
|
.opcion-btn.selected {
|
||||||
|
transform: translateY(-2px) !important;
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.opcion-btn::before {
|
||||||
|
content: attr(data-letter) !important;
|
||||||
|
position: absolute !important;
|
||||||
|
left: 0px !important;
|
||||||
|
top: 0% !important;
|
||||||
|
background: #28a745 !important;
|
||||||
|
color: white !important;
|
||||||
|
width: 28px !important;
|
||||||
|
height: 100% !important;
|
||||||
|
border-radius: 6px 0px 0px 6px !important;
|
||||||
|
display: flex !important;
|
||||||
|
align-items: center !important;
|
||||||
|
justify-content: center !important;
|
||||||
|
font-weight: bold !important;
|
||||||
|
font-size: 14px !important;
|
||||||
|
transition: background-color 0.3s ease !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.opcion-btn:hover::before,
|
||||||
|
.opcion-btn.selected::before {
|
||||||
|
background: #8e44ad !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.opcion-btn span {
|
||||||
|
margin-left: 35px !important;
|
||||||
|
text-align: left !important;
|
||||||
|
display: block !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pop_html_style {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.pop_html_style {
|
||||||
|
width: 700px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="page-sco py-2 py-md-0 h-100">
|
||||||
|
<div class="container h-100 m-0 g-0 p-0">
|
||||||
|
<div class="row justify-content-center align-items-center h-100 m-0 g-0 p-0">
|
||||||
|
<div class="col-12 m-0 g-0 p-0">
|
||||||
|
<div class="row justify-content-center m-0 g-0 p-0 animate__animated animate__fadeInDown">
|
||||||
|
<div class="col-7 mb-3">
|
||||||
|
<h2 class="text-center fw-bold text-primary">Alimentación y medicación</h2>
|
||||||
|
<hr class="border border-3 border-verde-oscuro hr-style mx-auto my-0" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row animate__animated animate__slideInLeft">
|
||||||
|
<div class="col-7">
|
||||||
|
<div class="d-flex flex-row align-items-center bg-morado-claro py-3 text-white rounded-15" style="border-radius: 15px; border-top-left-radius: 0; border-bottom-left-radius: 0">
|
||||||
|
<div class="mx-3">
|
||||||
|
<img src="img/2.1.png" alt="" class="img-fluid" />
|
||||||
|
</div>
|
||||||
|
<div><b>Instrucciones:</b> Da clic en la ruleta y contesta correctamente la pregunta acerca de la alimentación o medicación en diálisis peritoneal para ganar los puntos.</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<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">
|
||||||
|
<div class="row justify-content-center">
|
||||||
|
<div class="col-4 text-center">
|
||||||
|
<img src="img/ruleta/per1.png" alt="" class="img-fluid" />
|
||||||
|
</div>
|
||||||
|
<div class="col-8 text-white text-center">
|
||||||
|
<h4>Puntos acumulados:</h4>
|
||||||
|
<h2 class="puntos">0</h2>
|
||||||
|
<div class="card flat">
|
||||||
|
<img src="img/ruleta/progress.png" alt="" class="img-fluid" />
|
||||||
|
<div class="wavance position-absolute d-flex flex-row align-items-center justify-content-start w-100" style="top: 22%">
|
||||||
|
<div class="avance"><img src="img/ruleta/pr.png" class="img-fluid" alt="" /></div>
|
||||||
|
<div class="avance"><img src="img/ruleta/pr.png" class="img-fluid" alt="" /></div>
|
||||||
|
<div class="avance"><img src="img/ruleta/pr.png" class="img-fluid" alt="" /></div>
|
||||||
|
<div class="avance"><img src="img/ruleta/pr.png" class="img-fluid" alt="" /></div>
|
||||||
|
<div class="avance"><img src="img/ruleta/pr.png" class="img-fluid" alt="" /></div>
|
||||||
|
<div class="avance"><img src="img/ruleta/pr.png" class="img-fluid" alt="" /></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="position-relative w-100">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-12 text-center">
|
||||||
|
<div class="mt-3">
|
||||||
|
<button id="spin-btn" class="bg-verde-oscuro text-white border border-4 border-white animate__animated animate__pulse animate__infinite">¡GIRAR RULETA!</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-4 text-center" style="margin-top: -30px">
|
||||||
|
<div class="card flat justify-content-center align-items-center d-inline-flex">
|
||||||
|
<div class="indicador position-absolute start-50 translate-middle-x" style="z-index: 9999 !important; top: -1em">
|
||||||
|
<img src="img/ruleta/indicador.png" alt="" style="transform: rotate(90deg)" />
|
||||||
|
</div>
|
||||||
|
<div class="wruleta z-2" id="ruleta-wheel">
|
||||||
|
<img src="img/ruleta/ruleta.png" alt="" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="d-none">
|
||||||
|
<div id="pop0">
|
||||||
|
<div class="container-fluid">
|
||||||
|
<div class="w-100 text-center">
|
||||||
|
<img src="img/3.5.png" class="img-fluid" />
|
||||||
|
</div>
|
||||||
|
<div class="row justify-content-center">
|
||||||
|
<div class="col-12 text-center mb-2">
|
||||||
|
<h3 class="text-secondary-dark fw-bold">¡Bien hecho!</h3>
|
||||||
|
</div>
|
||||||
|
<div class="col-12 text-center">
|
||||||
|
<p class="mb-0">Has concluido la actividad.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
$(function () {
|
||||||
|
'use strict';
|
||||||
|
$('.wrap-course-content').addClass('fake');
|
||||||
|
// Puntajes de la ruleta en orden horario (empezando desde arriba)
|
||||||
|
const puntajes = [100, 200, 300, 400, 500, 600, 700, 600, 500, 400, 300, 200];
|
||||||
|
let isSpinning = false;
|
||||||
|
let totalPuntos = 0;
|
||||||
|
let rotacionActual = 0;
|
||||||
|
let girosRealizados = 0;
|
||||||
|
const maxGiros = 6;
|
||||||
|
|
||||||
|
const ruletaWheel = document.getElementById('ruleta-wheel');
|
||||||
|
const spinBtn = document.getElementById('spin-btn');
|
||||||
|
const puntosDisplay = document.querySelector('.puntos');
|
||||||
|
const avanceImages = document.querySelectorAll('.avance img');
|
||||||
|
|
||||||
|
function girarRuleta() {
|
||||||
|
if (isSpinning || girosRealizados >= maxGiros) return;
|
||||||
|
|
||||||
|
isSpinning = true;
|
||||||
|
spinBtn.disabled = true;
|
||||||
|
spinBtn.classList.remove('animate__animated', 'animate__pulse', 'animate__infinite');
|
||||||
|
ruletaWheel.classList.add('spinning');
|
||||||
|
document.getElementById('coursenav-main-content').classList.add('no-overflow');
|
||||||
|
// Mínimo 3 vueltas + ángulo aleatorio (siempre hacia la derecha)
|
||||||
|
const vueltas = 3 + Math.random() * 2; // 3-5 vueltas
|
||||||
|
const anguloFinal = Math.random() * 360;
|
||||||
|
const rotacionTotal = rotacionActual + vueltas * 360 + anguloFinal;
|
||||||
|
|
||||||
|
// Aplicar rotación
|
||||||
|
ruletaWheel.style.transform = `rotate(${rotacionTotal}deg)`;
|
||||||
|
rotacionActual = rotacionTotal;
|
||||||
|
|
||||||
|
// Calcular puntaje después de la animación
|
||||||
|
setTimeout(() => {
|
||||||
|
const anguloNormalizado = rotacionActual % 360;
|
||||||
|
const segmento = Math.floor((anguloNormalizado + 15) / 30) % 12;
|
||||||
|
const puntajeObtenido = puntajes[segmento];
|
||||||
|
// Remover puntos automáticos - solo se ganan si responde correctamente
|
||||||
|
|
||||||
|
// Mostrar pregunta
|
||||||
|
setTimeout(() => {
|
||||||
|
mostrarPregunta(puntajeObtenido);
|
||||||
|
}, 500);
|
||||||
|
}, 4000);
|
||||||
|
}
|
||||||
|
|
||||||
|
spinBtn.addEventListener('click', girarRuleta);
|
||||||
|
|
||||||
|
const bad = CourseNav.createSound('audio/feedback-incorrect.mpeg');
|
||||||
|
const good = CourseNav.createSound('audio/feedback-correct.mpeg');
|
||||||
|
|
||||||
|
const urlExcelFile = 'Actividades_Rotafolio_Vantive.xlsx';
|
||||||
|
|
||||||
|
function readExcelFile(url, callback) {
|
||||||
|
var xhr = new XMLHttpRequest();
|
||||||
|
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) => {
|
||||||
|
var sheet = workbook.Sheets[sheetName];
|
||||||
|
result[sheetName] = XLSX.utils.sheet_to_json(sheet);
|
||||||
|
});
|
||||||
|
callback(result);
|
||||||
|
};
|
||||||
|
xhr.send();
|
||||||
|
}
|
||||||
|
|
||||||
|
function procesarPreguntas(data) {
|
||||||
|
const preguntas = data.map((fila) => {
|
||||||
|
const opciones = [];
|
||||||
|
Object.keys(fila).forEach((key) => {
|
||||||
|
if (key.startsWith('opcion')) {
|
||||||
|
opciones.push({
|
||||||
|
text: fila[key].trim(),
|
||||||
|
correct: key === 'opcion_c',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return {
|
||||||
|
pregunta: fila.pregunta.trim(),
|
||||||
|
opciones: opciones,
|
||||||
|
retroalimentacion_correcta: fila.retroalimentacion_correcta ? fila.retroalimentacion_correcta.trim() : '',
|
||||||
|
retroalimentacion_incorrecta: fila.retroalimentacion_incorrecta ? fila.retroalimentacion_incorrecta.trim() : '',
|
||||||
|
};
|
||||||
|
});
|
||||||
|
return preguntas;
|
||||||
|
}
|
||||||
|
|
||||||
|
function shuffleArray(array) {
|
||||||
|
for (let i = array.length - 1; i > 0; i--) {
|
||||||
|
const j = Math.floor(Math.random() * (i + 1));
|
||||||
|
[array[i], array[j]] = [array[j], array[i]];
|
||||||
|
}
|
||||||
|
return array;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Variables para preguntas
|
||||||
|
let questions = [];
|
||||||
|
let preguntasUsadas = [];
|
||||||
|
|
||||||
|
function mostrarPregunta(puntajeEnJuego) {
|
||||||
|
if (questions.length === 0) {
|
||||||
|
console.error('No hay preguntas cargadas');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Seleccionar pregunta aleatoria no usada
|
||||||
|
const preguntasDisponibles = questions.filter((_, index) => !preguntasUsadas.includes(index));
|
||||||
|
if (preguntasDisponibles.length === 0) {
|
||||||
|
preguntasUsadas = []; // Reiniciar si se agotaron
|
||||||
|
}
|
||||||
|
|
||||||
|
const preguntaIndex = Math.floor(Math.random() * preguntasDisponibles.length);
|
||||||
|
const pregunta = preguntasDisponibles[preguntaIndex];
|
||||||
|
const originalIndex = questions.indexOf(pregunta);
|
||||||
|
preguntasUsadas.push(originalIndex);
|
||||||
|
|
||||||
|
// Crear HTML para opciones
|
||||||
|
let opcionesHTML = '';
|
||||||
|
pregunta.opciones.forEach((opcion, index) => {
|
||||||
|
const letra = String.fromCharCode(97 + index); // 97 = 'a'
|
||||||
|
opcionesHTML += `<button class="opcion-btn d-block w-100" data-correct="${opcion.correct}" data-letter="${letra}"><span>${opcion.text}</span></button>`;
|
||||||
|
});
|
||||||
|
|
||||||
|
Swal.fire({
|
||||||
|
title: pregunta.pregunta,
|
||||||
|
html: `<div class="text-start mb-3">${opcionesHTML}</div>
|
||||||
|
<div class="col-12 text-center">
|
||||||
|
<p class="small mb-0">"Estos son casos hipotéticos basados en las referencias bibliográficas."</p>
|
||||||
|
</div>
|
||||||
|
`,
|
||||||
|
showConfirmButton: false,
|
||||||
|
allowOutsideClick: false,
|
||||||
|
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',
|
||||||
|
},
|
||||||
|
didOpen: () => {
|
||||||
|
document.querySelectorAll('.opcion-btn').forEach((btn) => {
|
||||||
|
btn.addEventListener('mouseenter', () => {
|
||||||
|
btn.classList.add('selected');
|
||||||
|
});
|
||||||
|
btn.addEventListener('mouseleave', () => {
|
||||||
|
btn.classList.remove('selected');
|
||||||
|
});
|
||||||
|
btn.addEventListener('click', (e) => {
|
||||||
|
const target = e.target.closest('.opcion-btn');
|
||||||
|
const esCorrecta = target.dataset.correct === 'true';
|
||||||
|
manejarRespuesta(esCorrecta, puntajeEnJuego, pregunta);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function manejarRespuesta(esCorrecta, puntajeEnJuego, pregunta) {
|
||||||
|
if (esCorrecta) {
|
||||||
|
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}`,
|
||||||
|
icon: 'success',
|
||||||
|
target: document.getElementById('wrap-course-content'),
|
||||||
|
confirmButtonText: 'Continuar',
|
||||||
|
}).then(() => {
|
||||||
|
finalizarTurno();
|
||||||
|
if (girosRealizados < maxGiros) {
|
||||||
|
spinBtn.classList.add('animate__animated', 'animate__pulse', 'animate__infinite');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
CourseNav.audioController.stopAllSoundsAndPlay(bad);
|
||||||
|
// Solo sonido, el usuario puede seguir intentando
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function finalizarTurno() {
|
||||||
|
isSpinning = false;
|
||||||
|
document.getElementById('coursenav-main-content').classList.remove('no-overflow');
|
||||||
|
|
||||||
|
if (girosRealizados >= maxGiros) {
|
||||||
|
spinBtn.disabled = true;
|
||||||
|
spinBtn.textContent = '¡Juego Completado!';
|
||||||
|
CourseNav.setSlideVisited();
|
||||||
|
setTimeout(() => {
|
||||||
|
Completed();
|
||||||
|
}, 300);
|
||||||
|
} else {
|
||||||
|
spinBtn.disabled = false;
|
||||||
|
spinBtn.textContent = `¡GIRAR RULETA! (${maxGiros - girosRealizados} restantes)`;
|
||||||
|
}
|
||||||
|
|
||||||
|
ruletaWheel.classList.remove('spinning');
|
||||||
|
}
|
||||||
|
|
||||||
|
function Completed() {
|
||||||
|
const html = $('#pop0').html();
|
||||||
|
Swal.fire({
|
||||||
|
html: html,
|
||||||
|
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',
|
||||||
|
},
|
||||||
|
confirmButtonText: 'Cerrar',
|
||||||
|
showConfirmButton: true,
|
||||||
|
allowOutsideClick: false,
|
||||||
|
allowEscapeKey: false,
|
||||||
|
focusConfirm: false,
|
||||||
|
backdrop: 'rgba(65, 60, 60, .95)',
|
||||||
|
width: '35em',
|
||||||
|
didOpen: () => {},
|
||||||
|
didClose: () => {
|
||||||
|
CourseNav.audioController.stopAudio();
|
||||||
|
CourseNav.setSlideVisited();
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
// Cargar preguntas de "Diapositiva 19"
|
||||||
|
readExcelFile(urlExcelFile, function (data) {
|
||||||
|
const sheetData = data['Diapositiva 19'];
|
||||||
|
if (sheetData) {
|
||||||
|
questions = procesarPreguntas(sheetData);
|
||||||
|
console.log('Preguntas cargadas de Diapositiva 19:', questions);
|
||||||
|
} else {
|
||||||
|
console.error('No se encontró la hoja "Diapositiva 19"');
|
||||||
|
console.log('Hojas disponibles:', Object.keys(data));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
Vendored
+1
-1
File diff suppressed because one or more lines are too long
+3
-1
@@ -8,6 +8,7 @@ $outline-color: #ffa300 !default;
|
|||||||
html {
|
html {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
*,
|
*,
|
||||||
*::before,
|
*::before,
|
||||||
@@ -25,6 +26,7 @@ body {
|
|||||||
font-family: 'Arial', sans-serif;
|
font-family: 'Arial', sans-serif;
|
||||||
line-height: 1.3;
|
line-height: 1.3;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
> header,
|
> header,
|
||||||
> footer {
|
> footer {
|
||||||
@@ -428,7 +430,7 @@ $transition-time: 0.3s !default;
|
|||||||
}
|
}
|
||||||
|
|
||||||
#coursenav-main-content {
|
#coursenav-main-content {
|
||||||
height: 100%;
|
height: calc(100% - 85px);
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
}
|
}
|
||||||
.stepper {
|
.stepper {
|
||||||
|
|||||||
+3
-1
@@ -1,6 +1,7 @@
|
|||||||
html {
|
html {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
*,
|
*,
|
||||||
@@ -18,6 +19,7 @@ body {
|
|||||||
font-family: "Arial", sans-serif;
|
font-family: "Arial", sans-serif;
|
||||||
line-height: 1.3;
|
line-height: 1.3;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
body > header,
|
body > header,
|
||||||
body > footer {
|
body > footer {
|
||||||
@@ -411,7 +413,7 @@ body > main {
|
|||||||
}
|
}
|
||||||
|
|
||||||
#coursenav-main-content {
|
#coursenav-main-content {
|
||||||
height: 100%;
|
height: calc(100% - 85px);
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Vendored
+1
-1
File diff suppressed because one or more lines are too long
@@ -13,6 +13,7 @@ $custom-colors: (
|
|||||||
'verde-pasto': #84a816,
|
'verde-pasto': #84a816,
|
||||||
'verde-claro': #d6e3da,
|
'verde-claro': #d6e3da,
|
||||||
'verde-gris': #cadcd4,
|
'verde-gris': #cadcd4,
|
||||||
|
'verde2': #d3e0d7,
|
||||||
'lila-claro': #905c8b,
|
'lila-claro': #905c8b,
|
||||||
'morado-claro': #915c8c,
|
'morado-claro': #915c8c,
|
||||||
'gris': #959595,
|
'gris': #959595,
|
||||||
|
|||||||
@@ -73,6 +73,7 @@
|
|||||||
--bs-verde-pasto: #84a816;
|
--bs-verde-pasto: #84a816;
|
||||||
--bs-verde-claro: #d6e3da;
|
--bs-verde-claro: #d6e3da;
|
||||||
--bs-verde-gris: #cadcd4;
|
--bs-verde-gris: #cadcd4;
|
||||||
|
--bs-verde2: #d3e0d7;
|
||||||
--bs-lila-claro: #905c8b;
|
--bs-lila-claro: #905c8b;
|
||||||
--bs-morado-claro: #915c8c;
|
--bs-morado-claro: #915c8c;
|
||||||
--bs-gris: #959595;
|
--bs-gris: #959595;
|
||||||
@@ -102,6 +103,7 @@
|
|||||||
--bs-verde-pasto-rgb: 132, 168, 22;
|
--bs-verde-pasto-rgb: 132, 168, 22;
|
||||||
--bs-verde-claro-rgb: 214, 227, 218;
|
--bs-verde-claro-rgb: 214, 227, 218;
|
||||||
--bs-verde-gris-rgb: 202, 220, 212;
|
--bs-verde-gris-rgb: 202, 220, 212;
|
||||||
|
--bs-verde2-rgb: 211, 224, 215;
|
||||||
--bs-lila-claro-rgb: 144, 92, 139;
|
--bs-lila-claro-rgb: 144, 92, 139;
|
||||||
--bs-morado-claro-rgb: 145, 92, 140;
|
--bs-morado-claro-rgb: 145, 92, 140;
|
||||||
--bs-gris-rgb: 149, 149, 149;
|
--bs-gris-rgb: 149, 149, 149;
|
||||||
@@ -3339,6 +3341,23 @@ textarea.form-control-lg {
|
|||||||
--bs-btn-disabled-border-color: #cadcd4;
|
--bs-btn-disabled-border-color: #cadcd4;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.btn-verde2 {
|
||||||
|
--bs-btn-color: #000;
|
||||||
|
--bs-btn-bg: #d3e0d7;
|
||||||
|
--bs-btn-border-color: #d3e0d7;
|
||||||
|
--bs-btn-hover-color: #000;
|
||||||
|
--bs-btn-hover-bg: #dae5dd;
|
||||||
|
--bs-btn-hover-border-color: #d7e3db;
|
||||||
|
--bs-btn-focus-shadow-rgb: 179, 190, 183;
|
||||||
|
--bs-btn-active-color: #000;
|
||||||
|
--bs-btn-active-bg: #dce6df;
|
||||||
|
--bs-btn-active-border-color: #d7e3db;
|
||||||
|
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||||
|
--bs-btn-disabled-color: #000;
|
||||||
|
--bs-btn-disabled-bg: #d3e0d7;
|
||||||
|
--bs-btn-disabled-border-color: #d3e0d7;
|
||||||
|
}
|
||||||
|
|
||||||
.btn-lila-claro {
|
.btn-lila-claro {
|
||||||
--bs-btn-color: #fff;
|
--bs-btn-color: #fff;
|
||||||
--bs-btn-bg: #905c8b;
|
--bs-btn-bg: #905c8b;
|
||||||
@@ -3832,6 +3851,23 @@ textarea.form-control-lg {
|
|||||||
--bs-gradient: none;
|
--bs-gradient: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.btn-outline-verde2 {
|
||||||
|
--bs-btn-color: #d3e0d7;
|
||||||
|
--bs-btn-border-color: #d3e0d7;
|
||||||
|
--bs-btn-hover-color: #000;
|
||||||
|
--bs-btn-hover-bg: #d3e0d7;
|
||||||
|
--bs-btn-hover-border-color: #d3e0d7;
|
||||||
|
--bs-btn-focus-shadow-rgb: 211, 224, 215;
|
||||||
|
--bs-btn-active-color: #000;
|
||||||
|
--bs-btn-active-bg: #d3e0d7;
|
||||||
|
--bs-btn-active-border-color: #d3e0d7;
|
||||||
|
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||||
|
--bs-btn-disabled-color: #d3e0d7;
|
||||||
|
--bs-btn-disabled-bg: transparent;
|
||||||
|
--bs-btn-disabled-border-color: #d3e0d7;
|
||||||
|
--bs-gradient: none;
|
||||||
|
}
|
||||||
|
|
||||||
.btn-outline-lila-claro {
|
.btn-outline-lila-claro {
|
||||||
--bs-btn-color: #905c8b;
|
--bs-btn-color: #905c8b;
|
||||||
--bs-btn-border-color: #905c8b;
|
--bs-btn-border-color: #905c8b;
|
||||||
@@ -5657,6 +5693,15 @@ textarea.form-control-lg {
|
|||||||
color: #414644;
|
color: #414644;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.alert-verde2 {
|
||||||
|
--bs-alert-color: #545a56;
|
||||||
|
--bs-alert-bg: #f6f9f7;
|
||||||
|
--bs-alert-border-color: #f2f6f3;
|
||||||
|
}
|
||||||
|
.alert-verde2 .alert-link {
|
||||||
|
color: #434845;
|
||||||
|
}
|
||||||
|
|
||||||
.alert-lila-claro {
|
.alert-lila-claro {
|
||||||
--bs-alert-color: #563753;
|
--bs-alert-color: #563753;
|
||||||
--bs-alert-bg: #e9dee8;
|
--bs-alert-bg: #e9dee8;
|
||||||
@@ -6340,6 +6385,20 @@ textarea.form-control-lg {
|
|||||||
border-color: #515855;
|
border-color: #515855;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.list-group-item-verde2 {
|
||||||
|
color: #545a56;
|
||||||
|
background-color: #f6f9f7;
|
||||||
|
}
|
||||||
|
.list-group-item-verde2.list-group-item-action:hover, .list-group-item-verde2.list-group-item-action:focus {
|
||||||
|
color: #545a56;
|
||||||
|
background-color: #dde0de;
|
||||||
|
}
|
||||||
|
.list-group-item-verde2.list-group-item-action.active {
|
||||||
|
color: #ffffff;
|
||||||
|
background-color: #545a56;
|
||||||
|
border-color: #545a56;
|
||||||
|
}
|
||||||
|
|
||||||
.list-group-item-lila-claro {
|
.list-group-item-lila-claro {
|
||||||
color: #563753;
|
color: #563753;
|
||||||
background-color: #e9dee8;
|
background-color: #e9dee8;
|
||||||
@@ -8035,6 +8094,11 @@ textarea.form-control-lg {
|
|||||||
background-color: RGBA(202, 220, 212, var(--bs-bg-opacity, 1)) !important;
|
background-color: RGBA(202, 220, 212, var(--bs-bg-opacity, 1)) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.text-bg-verde2 {
|
||||||
|
color: #000 !important;
|
||||||
|
background-color: RGBA(211, 224, 215, var(--bs-bg-opacity, 1)) !important;
|
||||||
|
}
|
||||||
|
|
||||||
.text-bg-lila-claro {
|
.text-bg-lila-claro {
|
||||||
color: #fff !important;
|
color: #fff !important;
|
||||||
background-color: RGBA(144, 92, 139, var(--bs-bg-opacity, 1)) !important;
|
background-color: RGBA(144, 92, 139, var(--bs-bg-opacity, 1)) !important;
|
||||||
@@ -8232,6 +8296,13 @@ textarea.form-control-lg {
|
|||||||
color: #d5e3dd !important;
|
color: #d5e3dd !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.link-verde2 {
|
||||||
|
color: #d3e0d7 !important;
|
||||||
|
}
|
||||||
|
.link-verde2:hover, .link-verde2:focus {
|
||||||
|
color: #dce6df !important;
|
||||||
|
}
|
||||||
|
|
||||||
.link-lila-claro {
|
.link-lila-claro {
|
||||||
color: #905c8b !important;
|
color: #905c8b !important;
|
||||||
}
|
}
|
||||||
@@ -8804,6 +8875,11 @@ textarea.form-control-lg {
|
|||||||
border-color: rgba(var(--bs-verde-gris-rgb), var(--bs-border-opacity)) !important;
|
border-color: rgba(var(--bs-verde-gris-rgb), var(--bs-border-opacity)) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.border-verde2 {
|
||||||
|
--bs-border-opacity: 1;
|
||||||
|
border-color: rgba(var(--bs-verde2-rgb), var(--bs-border-opacity)) !important;
|
||||||
|
}
|
||||||
|
|
||||||
.border-lila-claro {
|
.border-lila-claro {
|
||||||
--bs-border-opacity: 1;
|
--bs-border-opacity: 1;
|
||||||
border-color: rgba(var(--bs-lila-claro-rgb), var(--bs-border-opacity)) !important;
|
border-color: rgba(var(--bs-lila-claro-rgb), var(--bs-border-opacity)) !important;
|
||||||
@@ -9766,6 +9842,11 @@ textarea.form-control-lg {
|
|||||||
color: rgba(var(--bs-verde-gris-rgb), var(--bs-text-opacity)) !important;
|
color: rgba(var(--bs-verde-gris-rgb), var(--bs-text-opacity)) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.text-verde2 {
|
||||||
|
--bs-text-opacity: 1;
|
||||||
|
color: rgba(var(--bs-verde2-rgb), var(--bs-text-opacity)) !important;
|
||||||
|
}
|
||||||
|
|
||||||
.text-lila-claro {
|
.text-lila-claro {
|
||||||
--bs-text-opacity: 1;
|
--bs-text-opacity: 1;
|
||||||
color: rgba(var(--bs-lila-claro-rgb), var(--bs-text-opacity)) !important;
|
color: rgba(var(--bs-lila-claro-rgb), var(--bs-text-opacity)) !important;
|
||||||
@@ -9952,6 +10033,11 @@ textarea.form-control-lg {
|
|||||||
background-color: rgba(var(--bs-verde-gris-rgb), var(--bs-bg-opacity)) !important;
|
background-color: rgba(var(--bs-verde-gris-rgb), var(--bs-bg-opacity)) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.bg-verde2 {
|
||||||
|
--bs-bg-opacity: 1;
|
||||||
|
background-color: rgba(var(--bs-verde2-rgb), var(--bs-bg-opacity)) !important;
|
||||||
|
}
|
||||||
|
|
||||||
.bg-lila-claro {
|
.bg-lila-claro {
|
||||||
--bs-bg-opacity: 1;
|
--bs-bg-opacity: 1;
|
||||||
background-color: rgba(var(--bs-lila-claro-rgb), var(--bs-bg-opacity)) !important;
|
background-color: rgba(var(--bs-lila-claro-rgb), var(--bs-bg-opacity)) !important;
|
||||||
|
|||||||
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 312 KiB After Width: | Height: | Size: 237 KiB |
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 63 KiB After Width: | Height: | Size: 16 KiB |
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 50 KiB After Width: | Height: | Size: 13 KiB |
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 6.5 KiB After Width: | Height: | Size: 3.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 32 KiB After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 33 KiB After Width: | Height: | Size: 31 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 34 KiB After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 30 KiB After Width: | Height: | Size: 33 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 27 KiB After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.3 KiB After Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.8 KiB After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.7 KiB After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 467 B After Width: | Height: | Size: 304 B |
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 9.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.4 KiB After Width: | Height: | Size: 3.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.8 KiB After Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 4.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 7.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.3 KiB After Width: | Height: | Size: 8.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 8.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.4 KiB After Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 23 KiB After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 4.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 81 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.1 KiB After Width: | Height: | Size: 3.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 50 KiB After Width: | Height: | Size: 47 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 40 KiB After Width: | Height: | Size: 9.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 39 KiB After Width: | Height: | Size: 9.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 40 KiB After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 40 KiB After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 32 KiB After Width: | Height: | Size: 9.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 96 KiB After Width: | Height: | Size: 50 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 42 KiB After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 34 KiB After Width: | Height: | Size: 8.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 38 KiB After Width: | Height: | Size: 9.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 38 KiB After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 40 KiB After Width: | Height: | Size: 8.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 36 KiB After Width: | Height: | Size: 38 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 42 KiB After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 40 KiB After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 268 KiB After Width: | Height: | Size: 283 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 53 KiB After Width: | Height: | Size: 91 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 55 KiB After Width: | Height: | Size: 101 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 54 KiB After Width: | Height: | Size: 111 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 61 KiB After Width: | Height: | Size: 106 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 57 KiB After Width: | Height: | Size: 99 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 54 KiB After Width: | Height: | Size: 57 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 860 B |
Binary file not shown.
|
Before Width: | Height: | Size: 3.4 KiB After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.0 KiB After Width: | Height: | Size: 888 B |
Binary file not shown.
|
Before Width: | Height: | Size: 3.2 KiB After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.8 KiB After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 368 B |
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.7 KiB |
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user