Besins/Ogestan_Drossagyn_Papilocare
3
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

template casi listo

Browse Source
This commit is contained in:
David Martinez 2025-12-08 15:48:26 -06:00
parent b7dece13eb
commit 352fdff6e4
2 changed files with 170 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

203
OgestanPlus/contenido/01.html
View File

@ -24,7 +24,7 @@
<h1 class="text-primary amor">y Empatía</h1>
</div>
<div class="w-100 position-relative">
<div class="btn btn-begin animate__animated animate__pulse animate__infinite py-2" data-sec="1">
<div id="wrap-comenzar" class="btn btn-begin animate__animated animate__pulse animate__infinite py-2">
Comenzar
</div>
</div>
@ -34,42 +34,179 @@
</div>
</div>
</div>
<div id="sec1" class="page-sco back1 bg-primary" style="display: none;">
<div class="container">
<div class="row justify-content-center align-items-center">
<div class="col-12">
<div class="row justify-content-center align-items-center">
<div class="col-7 col-md-5 text-center mb-3">
<img src="img/01.0.png" class="img-fluid floating" />
</div>
<div class="col-12 col-md-7 mb-3 text-center">
<h3 class="amor text-gris-1 fw-light">Bienvenido al curso:</h3>
<div class="position-relative w-100 text-center mb-2">
<h1 class="amor fw-bold text-rosa-claro mb-0">Orientación al Cliente</h1>
<img src="img/adorno1.png" class="img-fluid">
</div>
<div class="position-relative w-100 mb-4">
<h1 class="text-primary amor">y Empatía</h1>
</div>
<!-- <div class="w-100 position-relative">
<div class="btn btn-begin animate__animated animate__pulse animate__infinite py-2">
Comenzar
</div>
</div> -->
</div>
</div>
</div>
</div>
</div>
</div>
<script>
$(function () {
"use strict";
$(".btn-begin").click(function () {
const secNumber = $(this).data('sec');
gotoSection(secNumber);
});
if (!CourseNav.isVisited() || CourseNav.isDebug()) {
tour();
} else {
showIntro();
}
function showIntro() {
$("#wrap-comenzar").removeClass("disabled");
$('.personaje').addClass('animate__animated animate__pulse');
}
/**
* Inicia un tour interactivo que guía al usuario a través de las funcionalidades del curso.
* Utiliza la biblioteca driver.js para crear el tour y define acciones específicas para
* varios pasos, como abrir o cerrar el menú lateral, controlar el audio, y más.
*/
function tour() {
// Crear una instancia del tour utilizando driver.js
const driver = window.driver.js.driver;
const showButtons = ["next", "previous", "close"];
// Definir los pasos del tour
const driverObj = driver({
showProgress: false, // No mostrar el progreso del tour
allowClose: true, // Permitir cerrar el tour
disableActiveInteraction: true, // Deshabilitar la interacción activa durante el tour
showButtons: showButtons, // Mostrar botones de navegación
onNextClick: () => {
CourseNav.soundClick(); // Reproducir sonido al hacer clic en "Siguiente"
driverObj.moveNext();
},
onPrevClick: () => {
CourseNav.soundClick(); // Reproducir sonido al hacer clic en "Anterior"
driverObj.movePrevious();
},
steps: [
{
popover: {
title: "Bienvenido",
description: "Este tour te mostrará las funcionalidades de nuestro curso.",
},
},
{
element: "#coursenav-audio-control",
popover: {
title: "Control de Audio",
description: "Con este botón puedes silenciar el audio.",
},
},
{
element: "#menu-toggle",
popover: {
title: "Menú de Navegación",
description: "Usa este botón para abrir y cerrar el menú de navegación lateral.",
},
onHighlightStarted: () => {
CourseNav.closeSidebar();
},
},
{
element: ".offcanvas-body",
popover: {
title: "Contenido",
description: "Aquí encontrarás el contenido del curso.",
side: "top",
align: "start",
},
onHighlightStarted: () => {
if (!$('.toggle-icon').first().find('i').hasClass('fa-square-chevron-down')) {
$('.toggle-icon').first().click();
}
CourseNav.openSidebar();
},
},
{
element: "#wrap-progress-course",
popover: {
title: "Barra de Progreso",
description: "Esta barra muestra tu progreso en el curso.",
},
onHighlightStarted: () => {
if (!$('.toggle-icon').first().find('i').hasClass('fa-square-chevron-down')) {
$('.toggle-icon').first().click();
}
CourseNav.openSidebar();
},
},
{
element: "#coursenav-prev-btn",
popover: {
title: "Botón Anterior",
description: "Usa este botón para regresar al tema anterior.",
},
onHighlightStarted: () => {
// Acción específica cuando se resalta este paso
CourseNav.closeSidebar();
},
},
{
element: "#coursenav-next-btn",
popover: {
title: "Botón Siguiente",
description: "Usa este botón para avanzar al tema siguiente.",
},
/* onDeselected: () => {
document.getElementById("btn-glossary").style.display = "block";
}, */
},
/* {
element: "#btn-glossary",
popover: {
title: "Botón Detalle de contenido",
description: "Cuando veas este icono, da clic para profundizar en el detalle del contenido de esta capacitación.",
},
onDeselected: () => {
$("#btn-glossary").hide();
},
}, */
{
element: "#wrap-comenzar",
popover: {
title: "Acciones",
description: "Realiza diferentes acciones dando clic en los botones con animación de pulso.",
},
},
{
popover: {
title: "¡Buena suerte!",
description: "Esperamos que tengas la mejor experiencia en este curso.",
},
},
],
onDestroyStarted: () => {
// Manejar la destrucción del tour
if (driverObj.hasNextStep()) {
// Verificar si hay más pasos en el tour
if (confirm("¿Salir de tutorial?")) {
driverObj.destroy();
showIntro();
}
} else {
// No hay más pasos, destruir el tour sin preguntar
driverObj.destroy();
showIntro();
}
// Seleccionar todos los elementos con las clases swal2-shown y swal2-height-auto
var elements = document.querySelectorAll(".swal2-shown, .swal2-height-auto");
// Recorrer todos los elementos seleccionados y quitar las clases
elements.forEach(function (element) {
element.classList.remove("swal2-shown", "swal2-height-auto");
});
// Seleccionar todos los elementos con el atributo aria-hidden="true"
var elements = document.querySelectorAll('[aria-hidden="true"]');
// Recorrer todos los elementos seleccionados y quitar el atributo
elements.forEach(function (element) {
element.removeAttribute("aria-hidden");
});
},
doneBtnText: "Finalizar", // Texto del botón para finalizar el tour
closeBtnText: "Cerrar", // Texto del botón para cerrar el tour
nextBtnText: "Siguiente", // Texto del botón para ir al siguiente paso
prevBtnText: "Anterior", // Texto del botón para ir al paso anterior
progressText: "{{current}} de {{total}}", // Texto para mostrar el progreso del tour
});
// Iniciar el tour
driverObj.drive();
}
});
</script>

0
OgestanPlus/contenido/02.html Normal file
View File