Update: Base para Andractiv
This commit is contained in:
@@ -0,0 +1,281 @@
|
||||
<style>
|
||||
.back0 {
|
||||
background-image: url(img/bg00s.jpg);
|
||||
background-size: cover;
|
||||
background-position: top center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.back1 {
|
||||
background-image: url(img/bg01.jpg);
|
||||
background-size: cover;
|
||||
background-position: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
@media(min-width: 991px) {
|
||||
.back0 {
|
||||
background-image: url(img/bg00.jpg);
|
||||
background-position: center center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div class="page-sco back0 py-2 py-md-4">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center align-items-center">
|
||||
<div class="col-12">
|
||||
<div class="row">
|
||||
<div class="col-12 col-lg-7">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 mb-3 text-center" data-sal="zoom-in">
|
||||
<div class="d-inline-block position-relative">
|
||||
<hr class="m-0 mb-2 opacity-100 border-top-2 text-white">
|
||||
<h1 class="text-white fw-bolder">¡Bienvenido a <br> OGestan<sup>®</sup> Andractiv!</h1>
|
||||
<hr class="m-0 mt-2 opacity-100 border-top-2 text-white">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 text-center" data-sal="flip-up">
|
||||
<div class="w-100 position-relative">
|
||||
<div id="wrap-comenzar" data-sec="sec1"
|
||||
class="btn btn-begin text-white fw-bold animate__animated animate__pulse animate__infinite py-1">
|
||||
Comenzar
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="sec1" class="page-sco back1 py-3 py-md-4" 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">
|
||||
<!-- <div class="col-12 col-md-10 col-lg-9 mb-3" data-sal="slide-right">
|
||||
<div class="card bg-var-2 border-0 rounded-3 shadow-none px-3 py-2 text-blue-1">
|
||||
<p>Gracias por iniciar este módulo. Aquí conocerás los puntos clave de <strong>OGestan<sup>®</sup> Plus</strong>, el
|
||||
suplemento más completo para apoyar la etapa de <strong>fertilidad, embarazo y lactancia</strong>.</p>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="col-12 apa0" style="display: none;">
|
||||
<div class="row justify-content-center align-items-center">
|
||||
<div class="col-7 col-md-5 col-xl-4 text-center order-2 order-md-1" data-sal="zoom-in">
|
||||
<img src="img/01.0.png" class="img-fluid">
|
||||
</div>
|
||||
<div class="col-12 col-md-7 col-xl-5 order-1 order-md-2 mb-3 mb-md-0" data-sal="flip-left">
|
||||
<h2 class="text-secondary fw-medium">¿Qué aprenderás hoy?</h2>
|
||||
<p class="pa animate__delay-2s">En este módulo conocerás qué es <b>OGestan<sup>®</sup> Andractiv</b>,
|
||||
para quién está diseñado y cuál es su papel
|
||||
dentro
|
||||
de la fertilidad masculina. </p>
|
||||
|
||||
<p class="pa animate__delay-9s">Comprenderás su propósito como suplemento y por qué su formulación
|
||||
resulta tan importante para apoyar
|
||||
la
|
||||
<b>calidad y funcionamiento del esperma</b>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(function () {
|
||||
"use strict";
|
||||
$('.pa').addClass('animate__animated animate__flipInX');
|
||||
|
||||
const audioh00 = CourseNav.createSound('audio/audioh00.mp3');
|
||||
const audioh01 = CourseNav.createSound('audio/audioh01.mp3');
|
||||
|
||||
audioh00.on('play', function () {
|
||||
$('.apa0').show();
|
||||
});
|
||||
audioh00.on('end', function () {
|
||||
CourseNav.setSlideVisited();
|
||||
});
|
||||
|
||||
if (!CourseNav.isVisited() || CourseNav.isDebug()) {
|
||||
tour();
|
||||
} else {
|
||||
showIntro();
|
||||
}
|
||||
|
||||
function showIntro() {
|
||||
$("#wrap-comenzar").removeClass("disabled");
|
||||
}
|
||||
|
||||
$("#wrap-comenzar").click(function (e) {
|
||||
e.preventDefault();
|
||||
CourseNav.soundClick();
|
||||
gotoSection($(this).data('sec'));
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(audioh00);
|
||||
$(this).removeClass('animate__animated animate__pulse animate__infinite');
|
||||
});
|
||||
|
||||
|
||||
/**
|
||||
* 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,0 +1,260 @@
|
||||
<style>
|
||||
.back0 {
|
||||
background-image: url(img/bg02.jpg);
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.shadow-externo {
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, .5);
|
||||
}
|
||||
|
||||
.gradient-card {
|
||||
background: #C1C902;
|
||||
background: linear-gradient(to right, #C1C902 0%, #006EAB 100%);
|
||||
}
|
||||
|
||||
.cid0 .swiper-wrapper {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.btn-circ {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 100%;
|
||||
background: #F2F2F2;
|
||||
background: linear-gradient(to bottom, #F2F2F2 11%, #BDCCD4 100%);
|
||||
outline: 8px solid rgba(14, 28, 98, .3);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.circ_interno {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
border-radius: 100%;
|
||||
background: #dcdcdc;
|
||||
}
|
||||
|
||||
.btn-circ:hover .circ_interno {
|
||||
background: #DD3352;
|
||||
background: linear-gradient(to top, #DD3352 11%, #FEA968 100%);
|
||||
}
|
||||
|
||||
.btn-circ.selected .circ_interno {
|
||||
background: #DD3352;
|
||||
background: linear-gradient(to top, #DD3352 11%, #FEA968 100%);
|
||||
}
|
||||
|
||||
.custom-grid {
|
||||
position: relative;
|
||||
display: grid;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: auto;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.anim0 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media(min-width: 768px) {
|
||||
.text-t {
|
||||
max-width: 25%;
|
||||
margin-right: 3%;
|
||||
}
|
||||
|
||||
.text-t1 {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.custom-flx {
|
||||
max-width: 70%;
|
||||
}
|
||||
|
||||
.text-2 {
|
||||
flex: 1;
|
||||
max-width: 70%;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div class='page-sco back0 py-3 py-md-4'>
|
||||
<div class='container'>
|
||||
<div class='row justify-content-center align-items-center'>
|
||||
<div class='col-12'>
|
||||
<div class='row justify-content-center'>
|
||||
<div class="col-12 mb-3 text-center anim0 animate__animated animate__lightSpeedInLeft">
|
||||
<h2 class="text-primary fw-bold">La familia OGestan<sup>®</sup>: lo esencial para el proceso de fertilidad, embarazo y lactancia</h2>
|
||||
</div>
|
||||
<div class="col-12 col-lg-10 apa0 animate__animated animate__zoomIn" style="display: none;">
|
||||
<div class="shadow-externo rounded-3">
|
||||
<div class="swiper cid0">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide">
|
||||
<div class="card gradient-card border-0 rounded-3 shadow-none p-2">
|
||||
<div class="card-body bg-white border-0 rounded-3 shadow-none px-3 pt-3 pb-0">
|
||||
<div class="row justify-content-center align-items-center">
|
||||
<div class="col-6 col-md-4 text-center order-2 order-md-1">
|
||||
<img src="img/02.0.png" class="img-fluid">
|
||||
</div>
|
||||
<div class="col-12 col-md-8 order-1 order-md-2 mb-3 mb-md-0">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 mb-3">
|
||||
<p class="mb-0">OGestan<sup>®</sup> acompaña a la mujer —y también al hombre— durante todo el proceso reproductivo:</p>
|
||||
</div>
|
||||
<div class="col-8 col-md-7 col-lg-12 text-center mb-3">
|
||||
<img src="img/02.1.png" class="img-fluid">
|
||||
</div>
|
||||
<div class="col-12 text-center">
|
||||
<p class="mb-0">Preconcepción y 1er trimestre de embarazo.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<div class="card gradient-card border-0 rounded-3 shadow-none p-2">
|
||||
<div class="card-body bg-white border-0 rounded-3 shadow-none px-3 pt-3 pb-0">
|
||||
<div class="row justify-content-center align-items-center">
|
||||
<div class="col-6 col-md-4 text-center order-2 order-md-1">
|
||||
<img src="img/02.2.png" class="img-fluid">
|
||||
</div>
|
||||
<div class="col-12 col-md-8 order-1 order-md-2 mb-3 mb-md-0">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-8 col-md-7 col-lg-12 text-center mb-3">
|
||||
<img src="img/02.3.png" class="img-fluid">
|
||||
</div>
|
||||
<div class="col-12 text-center">
|
||||
<p class="mb-0">2do trimestre, 3er trimestre y lactancia (hasta los 6 meses de lactancia).</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<div class="card gradient-card border-0 rounded-3 shadow-none p-2">
|
||||
<div class="card-body bg-white border-0 rounded-3 shadow-none px-3 py-3">
|
||||
<div class="row justify-content-center align-items-center">
|
||||
<div class="col-12">
|
||||
<div class="custom-grid">
|
||||
<div class="d-flex flex-wrap justify-content-center align-items-center gap-2">
|
||||
<div class="text-t">
|
||||
<p class="mb-0 fw-bold text-pink">Fertilidad Femenina</p>
|
||||
</div>
|
||||
<div class="d-flex custom-flx flex-fill gap-2 justify-content-center text-center">
|
||||
<div class="text-t1">
|
||||
<p>1er trimestre de <br> embarazo</p>
|
||||
<img src="img/02.1.png" class="img-fluid">
|
||||
</div>
|
||||
<div class="text-t1">
|
||||
<p>2do trimestre de <br> embarazo hasta lactancia</p>
|
||||
<img src="img/02.3.png" class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="position-relative w-100">
|
||||
<img src="img/02.4" class="img-fluid">
|
||||
</div>
|
||||
<div class="d-flex flex-wrap justify-content-center align-items-center gap-2">
|
||||
<div class="text-t">
|
||||
<p class="mb-0 fw-bold text-pink">Fertilidad masculina</p>
|
||||
</div>
|
||||
<div class="text-2 d-flex justify-content-center">
|
||||
<div class="col-7 col-md-6 col-lg-8 text-center">
|
||||
<img src="img/02.5.png" class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="position-relative w-100 mt-3">
|
||||
<div class="d-flex justify-content-center align-items-center gap-4">
|
||||
<div class="btn-circ animate__animated animate__pulse animate__infinite" data-slide="0">
|
||||
<div class="circ_interno"></div>
|
||||
</div>
|
||||
<div class="btn-circ animate__animated animate__pulse animate__infinite" data-slide="1">
|
||||
<div class="circ_interno"></div>
|
||||
</div>
|
||||
<div class="btn-circ animate__animated animate__pulse animate__infinite" data-slide="2">
|
||||
<div class="circ_interno"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(function () {
|
||||
"use strict";
|
||||
$('body').addClass('fake');
|
||||
|
||||
const audiom02a = CourseNav.createSound('audio/audiom02a.mp3');
|
||||
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(audiom02a);
|
||||
|
||||
audiom02a.on('play', function () {
|
||||
$('.anim0').show();
|
||||
});
|
||||
|
||||
audiom02a.on('end',function(){
|
||||
$('.apa0').show();
|
||||
$('.btn-circ').first().click();
|
||||
});
|
||||
|
||||
const paths = [
|
||||
"audio/audiom02b.mp3",
|
||||
"audio/audiom03.mp3",
|
||||
"audio/audiom04.mp3"
|
||||
];
|
||||
let audios = [];
|
||||
paths.forEach(function (element) {
|
||||
audios.push(CourseNav.createSound(element));
|
||||
});
|
||||
|
||||
const mySwiper = new Swiper(".cid0", {
|
||||
effect: "slide",
|
||||
autoHeight: true,
|
||||
slidesPerView: 1,
|
||||
spaceBetween: 10
|
||||
});
|
||||
|
||||
$('.btn-circ').click(function(){
|
||||
CourseNav.soundClick();
|
||||
const slideIndex = $(this).data('slide');
|
||||
mySwiper.slideTo(slideIndex);
|
||||
$(this).removeClass('animate__animated animate__pulse animate__infinite');
|
||||
$('.btn-circ').removeClass('selected');
|
||||
$(this).addClass('selected completed');
|
||||
|
||||
if($('.btn-circ.completed').length === $('.btn-circ').length){
|
||||
CourseNav.setSlideVisited();
|
||||
}
|
||||
|
||||
if(audios[slideIndex]){
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(audios[slideIndex]);
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,244 @@
|
||||
<style>
|
||||
.back0 {
|
||||
background-image: url("img/bg02a.jpg");
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
.btn-pop {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.pop_lateral {
|
||||
background: linear-gradient(180deg, #003d53, #005a6f);
|
||||
}
|
||||
|
||||
|
||||
@media(min-width: 768px) {
|
||||
.content-pop-lateral {
|
||||
grid-template-rows: 1fr !important;
|
||||
}
|
||||
|
||||
.pop_lateral {
|
||||
grid-template-columns: 1fr !important;
|
||||
grid-template-rows: 75% 25% !important;
|
||||
grid-row: 1 / 1 !important;
|
||||
place-self: start !important;
|
||||
width: 75% !important;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style></style>
|
||||
<div class="page-sco back0 py-3 py-md-4">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center align-items-center">
|
||||
<div class="col-12 col-md-12">
|
||||
<div class="row justify-content-center align-items-center">
|
||||
<div class="col-12 col-md-12 mb-md-4 mb-2">
|
||||
<h2 class="text-secondary fw-medium">Introducción a OGestan<sup>®</sup> Andractiv</h2>
|
||||
<p>Para comenzar, exploraremos la información esencial de <b>OGestan<sup>®</sup> Andractiv</b>.
|
||||
Aquí
|
||||
podrás revisar su <b>nombre comercial</b>, su <b>presentación</b>, su <b>indicación</b> y su
|
||||
<b>modo
|
||||
de empleo</b>. Estos elementos forman la base del producto y te permitirán comprender
|
||||
con
|
||||
claridad qué es, cómo se utiliza y a quién está dirigido.
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-xl-5 px-md-5 my-md-3 my-2">
|
||||
<div class="card btn-pop animate__animated animate__pulse animate__infinite disabled"
|
||||
data-popid="#pop0" data-audio="0">
|
||||
<div class="card-body">
|
||||
<h3>Nombre comercial</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-xl-5 px-md-5 my-md-3 my-2">
|
||||
<div class="card btn-pop animate__animated animate__pulse animate__infinite disabled"
|
||||
data-popid="#pop1" data-audio="1">
|
||||
<div class="card-body">
|
||||
<h3>Presentación</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-xl-5 px-md-5 my-md-3 my-2">
|
||||
<div class="card btn-pop animate__animated animate__pulse animate__infinite disabled"
|
||||
data-popid="#pop2" data-audio="2">
|
||||
<div class="card-body">
|
||||
<h3>Indicación</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-xl-5 px-md-5 my-md-3 my-2">
|
||||
<div class="card btn-pop animate__animated animate__pulse animate__infinite disabled"
|
||||
data-popid="#pop3" data-audio="3">
|
||||
<div class="card-body">
|
||||
<h3>Modo de empleo</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-none">
|
||||
<div id="pop0">
|
||||
<div class="container-fluid">
|
||||
<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-12 col-md-12 col-xl-8 text-start text-white">
|
||||
<h3 class="fw-semibold">Nombre comercial</h3>
|
||||
<ul>
|
||||
<li>OGestan® Andractiv</li>
|
||||
<li>Suplemento alimenticio en cápsulas.</li>
|
||||
<li>Combinación de Antioxidantes, Vitaminas, Minerales y Omega-3 desarrollada para el
|
||||
hombre.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-12 col-md-5 col-xl-4 mt-md-4">
|
||||
<img src="img/02.1.png" class="img-fluid" alt="Nombre comercial">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="pop1">
|
||||
<div class="container-fluid">
|
||||
<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-12 col-md-12 col-xl-8 text-start text-white">
|
||||
<h3 class="fw-semibold">Presentación</h3>
|
||||
<p>Caja de cartón con <b class="text-yellow h3">30 cápsulas</b> de 1.617gr.</p>
|
||||
</div>
|
||||
<div class="col-12 col-md-5 col-xl-4 mt-md-4">
|
||||
<img src="img/02.1.png" class="img-fluid" alt="Nombre comercial">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="pop2">
|
||||
<div class="container-fluid">
|
||||
<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-12 col-md-12 col-xl-8 text-start text-white">
|
||||
<h3 class="fw-semibold">Indicación</h3>
|
||||
<p>Suplemento alimenticio, para <b class="text-yellow">complementar</b> la alimentación en
|
||||
los hombres.</p>
|
||||
</div>
|
||||
<div class="col-12 col-md-5 col-xl-4 mt-md-4">
|
||||
<img src="img/02.1.png" class="img-fluid" alt="Nombre comercial">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="pop3">
|
||||
<div class="container-fluid">
|
||||
<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-12 col-md-12 col-xl-8 text-start text-white">
|
||||
<h3 class="fw-semibold">Modo de empleo</h3>
|
||||
<p>Dosis: <b class="text-yellow">1 cápsula al día</b> con algún alimento.</p>
|
||||
<p>Edad: <b>A partir de 18 años</b>.</p>
|
||||
<p><b>No exceder</b> la dosis recomendada.</p>
|
||||
</div>
|
||||
<div class="col-12 col-md-5 col-xl-4 mt-md-4">
|
||||
<img src="img/02.1.png" class="img-fluid" alt="Nombre comercial">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(function () {
|
||||
"use strict";
|
||||
$('body').addClass('fake');
|
||||
const audioh01 = CourseNav.createSound('audio/audioh01.mp3');
|
||||
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(audioh01);
|
||||
|
||||
audioh01.on('play', function () {
|
||||
|
||||
$('.btn-pop').removeClass('disabled');
|
||||
});
|
||||
|
||||
audioh01.on('end', function () {
|
||||
$('.btn-pop').removeClass('disabled');
|
||||
});
|
||||
|
||||
const audios = [
|
||||
CourseNav.createSound('audio/audioh02.mp3'),
|
||||
CourseNav.createSound('audio/audioh03.mp3'),
|
||||
CourseNav.createSound('audio/audioh04.mp3'),
|
||||
CourseNav.createSound('audio/audioh05.mp3')
|
||||
];
|
||||
|
||||
$('.btn-pop').click(function (e) {
|
||||
e.preventDefault();
|
||||
const html = $($(this).data('popid')).html();
|
||||
const audio = $(this).data('audio');
|
||||
$(this).addClass('completed').removeClass('animate__animated animate__pulse animate__infinite');
|
||||
Swal.fire({
|
||||
html: html,
|
||||
target: "body",
|
||||
customClass: {
|
||||
container: 'p-0 content-pop-lateral',
|
||||
popup: 'pop_lateral',
|
||||
htmlContainer: 'd-flex justify-content-center align-items-center',
|
||||
actions: 'my-0',
|
||||
confirmButton: 'btn bg-primary text-white fw-semibold animate__animated animate__pulse animate__infinite'
|
||||
},
|
||||
confirmButtonText: "Cerrar",
|
||||
showConfirmButton: true,
|
||||
allowOutsideClick: false,
|
||||
allowEscapeKey: false,
|
||||
focusConfirm: false,
|
||||
backdrop: "rgba(65, 60, 60, .95)",
|
||||
grow: 'fullscreen',
|
||||
showClass: {
|
||||
popup: 'animate__animated animate__fadeInLeft animate__faster' // Animación dinámica (derecha/izquierda)
|
||||
},
|
||||
hideClass: {
|
||||
popup: 'animate__animated animate__fadeOutLeft animate__faster' // Animación de salida coherente
|
||||
},
|
||||
didOpen: () => {
|
||||
$('.swal2-confirm').show();
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(audios[audio]);
|
||||
if (CourseNav.isVisited()) {
|
||||
$('.swal2-confirm').show();
|
||||
} else {
|
||||
audios[audio].on('end', function () {
|
||||
$('.swal2-confirm').show();
|
||||
});
|
||||
}
|
||||
},
|
||||
didClose: () => {
|
||||
CourseNav.audioController.stopAudio();
|
||||
isCompleted();
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
function isCompleted() {
|
||||
if ($('.btn-pop').length == $('.btn-pop.completed').length) {
|
||||
CourseNav.setSlideVisited();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,110 @@
|
||||
<style>
|
||||
.back0 {
|
||||
background-image: url(img/bg03.jpg);
|
||||
background-size: cover;
|
||||
background-position: 12% 100%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.back1 {
|
||||
background-image: url(img/bg04.jpg);
|
||||
background-size: cover;
|
||||
background-position: 12% 100%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.text-card {
|
||||
background-color: rgba(255, 255, 255, .7);
|
||||
border-radius: 15px;
|
||||
box-shadow: 0 0 8px rgba(0, 0, 0, .5);
|
||||
}
|
||||
|
||||
.anim0 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media(min-width: 768px) {
|
||||
.back0 {
|
||||
background-position: 28% 100%;
|
||||
}
|
||||
|
||||
.text-card {
|
||||
background-color: transparent;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div class='page-sco'>
|
||||
<div class="sec_i0 back0 py-2 py-md-4 flex-fill d-flex flex-column justify-content-center align-items-center">
|
||||
<div class='container'>
|
||||
<div class='row justify-content-center align-items-center'>
|
||||
<div class='col-12'>
|
||||
<div class='row justify-content-center justify-content-md-end mb-3'>
|
||||
<div class="col-12 col-md-7 col-lg-6 text-center anim0" data-sal="slide-down">
|
||||
<div class="d-inline-block position-relative">
|
||||
<hr class="m-0 mb-2 opacity-100 border-top-2 text-white">
|
||||
<div class="text-card p-2 p-md-0">
|
||||
<h2 class="text-primary fw-bold">¿Qué es OGestan<sup>®</sup> Plus?</h2>
|
||||
<p class="mb-0"><strong>OGestan<sup class="fw-bolder">®</sup> Plus</strong> es un suplemento alimenticio
|
||||
en cápsulas, con aceite de pescado vitaminas y minerales. Forma parte de la
|
||||
línea OGestan<sup>®</sup>, enfocada en acompañar a la madre y al bebé en su desarrollo.</p>
|
||||
</div>
|
||||
<hr class="m-0 mt-2 opacity-100 border-top-2 text-white">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sec_i1 py-2 py-md-4" style="display: none;">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 text-center">
|
||||
<div class="btn-next-section d-inline-block animate__animated animate__pulse animate__infinite" data-sec="sec1">
|
||||
<img src="img/nSec.png" class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="sec1" class='page-sco py-2 py-md-4 back1'>
|
||||
<div class="container">
|
||||
<div class="row justify-content-center align-items-center">
|
||||
<div class="col-12">
|
||||
<div class="row justify-content-center"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(function () {
|
||||
"use strict";
|
||||
$('body').addClass('fake');
|
||||
const audiom05 = CourseNav.createSound('audio/audiom05.mp3');
|
||||
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(audiom05);
|
||||
|
||||
audiom05.on('play',function(){
|
||||
$('.anim0').show();
|
||||
});
|
||||
|
||||
audiom05.on('end',function(){
|
||||
$('.sec_i1').show();
|
||||
CourseNav.setSlideVisited();
|
||||
});
|
||||
|
||||
$('.btn-next-section').click(function(){
|
||||
CourseNav.soundClick();
|
||||
$(this).removeClass('animate__animated animate__pulse animate__infinite');
|
||||
gotoSection($(this).data('sec'));
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,538 @@
|
||||
<style>
|
||||
.back0 {
|
||||
background-image: url("img/bg03.jpg");
|
||||
background-position: center bottom;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.wrap-sw {
|
||||
background: rgba(0, 211, 95, 10);
|
||||
background: linear-gradient(270deg, rgba(0, 211, 95, 0.7) 0%, rgba(0, 96, 255, 0.7) 100%);
|
||||
display: none;
|
||||
}
|
||||
|
||||
.swiper-button-disabled {
|
||||
opacity: 0.8;
|
||||
filter: grayscale(1);
|
||||
}
|
||||
|
||||
.card.flat {
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.card.flat .card-body {
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.mySwiper {
|
||||
width: 100%;
|
||||
height: 100px !important;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.mySwiper .swiper-slide {
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-justify-content: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-align-items: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-flex-direction: column;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.mySwiper .swiper-slide .img-icon {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
object-fit: fill;
|
||||
}
|
||||
|
||||
.mySwiper .swiper-slide img {
|
||||
width: auto;
|
||||
height: 100px;
|
||||
object-fit: fill;
|
||||
opacity: 0.5;
|
||||
-webkit-transform: scale(0.6);
|
||||
transform: scale(0.6);
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
.mySwiper .swiper-slide-active img {
|
||||
opacity: 1;
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
object-fit: fill;
|
||||
}
|
||||
|
||||
.swiper-nav {
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex-direction: row;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
max-width: 300px;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 55;
|
||||
top: 0;
|
||||
-webkit-justify-content: space-between;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
-webkit-align-items: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.swiper-custom-button-next img,
|
||||
.swiper-custom-button-prev img {
|
||||
height: 85px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.swiper-custom-button-next {
|
||||
border-radius: 20%;
|
||||
}
|
||||
|
||||
.row-card {
|
||||
border-radius: 15px;
|
||||
background-color: rgba(255, 255, 255, .6);
|
||||
box-shadow: rgba(0, 0, 0, 0.15) 0px 15px 25px, rgba(0, 0, 0, 0.05) 0px 5px 10px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.custom-card .swiper-slide {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.btn-open-info {
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
max-width: 70px;
|
||||
border-radius: 50%;
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
.customSwiper .swiper-slide {
|
||||
height: 300px !important;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
|
||||
.swiper-custom-button-next img,
|
||||
.swiper-custom-button-prev img {
|
||||
height: 150px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.mySwiper {
|
||||
height: 200px !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.card-with-avatar {
|
||||
position: relative;
|
||||
background: linear-gradient(to right, #D4F8E8, #C0F1FF);
|
||||
border-radius: 12px;
|
||||
padding: 2rem;
|
||||
/* deja espacio para el avatar a la derecha */
|
||||
padding-right: 300px;
|
||||
overflow: visible;
|
||||
|
||||
/* para que el avatar “salga” sin recortarse */
|
||||
}
|
||||
|
||||
/* Texto dentro de la tarjeta */
|
||||
.card-body p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* El círculo que contendrá la imagen */
|
||||
.avatar-circle {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
transform: translateY(-50%);
|
||||
height: 260px;
|
||||
}
|
||||
|
||||
/* La imagen ocupa todo el círculo y se recorta */
|
||||
.avatar-circle img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
.swal2-popup.swal-fullscreen {
|
||||
align-items: center;
|
||||
height: auto !important;
|
||||
min-height: 100vh;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
.swal2-popup.swal-fullscreen .swal2-html-container {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.custom-card-swal {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
|
||||
.customSwiper .swiper-slide {
|
||||
height: 370px !important;
|
||||
}
|
||||
|
||||
.avatar-circle {
|
||||
position: relative;
|
||||
top: 0;
|
||||
transform: translateY(0px);
|
||||
max-width: 70%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.avatar-circle img {
|
||||
object-fit: scale-down;
|
||||
}
|
||||
|
||||
.mySwiper .swiper-slide-active img {
|
||||
padding: 9px;
|
||||
}
|
||||
|
||||
.card-with-avatar {
|
||||
position: relative;
|
||||
background: linear-gradient(to right, #D4F8E8, #C0F1FF);
|
||||
border-radius: 12px;
|
||||
padding: 1rem;
|
||||
/* deja espacio para el avatar a la derecha */
|
||||
padding-right: 0;
|
||||
overflow: visible;
|
||||
|
||||
/* para que el avatar “salga” sin recortarse */
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div class="w-100 page-sco back0 h-100 pt-4 pt-md-0" id="sco15">
|
||||
<div class="container-fluid g-0">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-12">
|
||||
<div class="row">
|
||||
<div class="col-12 text-center px-4 animate__animated animate__backInLeft">
|
||||
<h2 class="fw-semibold text-secondary">Componentes y beneficios</h2>
|
||||
<p>En infertilidad masculina</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center wrap-sw text-white">
|
||||
<div class="container-fluid">
|
||||
<div class="row justify-content-center align-items-center">
|
||||
<div class="col-10 col-md-12">
|
||||
<div class="card custom-card flat">
|
||||
<div class="card-body">
|
||||
<!-- Swiper -->
|
||||
<div class="swiper mySwiper">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide">
|
||||
<div class="img-icon">
|
||||
<img src="img/icon_01.png" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<div class="img-icon">
|
||||
<img src="img/icon_02.png" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<div class="img-icon">
|
||||
<img src="img/icon_03.png" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<div class="img-icon">
|
||||
<img src="img/icon_04.png" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- navegacion -->
|
||||
<div class="position-absolute mx-auto swiper-nav">
|
||||
<div class="swiper-custom-button-prev">
|
||||
<img src="img/prev.webp" alt="" />
|
||||
</div>
|
||||
<div class="swiper-custom-button-next">
|
||||
<img src="img/next.webp" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wrap-cards mt-md-0 mt-2" style="display: none">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 col-md-10 col-lg-8">
|
||||
<div class="card custom-card bg-transparent border-0 rounded-0">
|
||||
<div class="card-body py-0 bg-transparent border-0 rounded-0">
|
||||
<!-- Swiper con validación de slides visitados -->
|
||||
<div class="swiper customSwiper">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide py-3 pe-3 ps-2 text-center">
|
||||
<div class="d-flex h-100 align-items-center justify-content-center">
|
||||
<div class="card-with-avatar">
|
||||
<div class="card-body">
|
||||
<p>
|
||||
Conocimiento de tus <strong
|
||||
class="text-azul-claro">compromisos</strong>:
|
||||
diario, semanal y quincenal.
|
||||
</p>
|
||||
</div>
|
||||
<div class="avatar-circle">
|
||||
<img src="img/04.1.png" alt="Avatar ilustrado">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="swiper-slide py-3 pe-3 ps-2 text-center">
|
||||
<div class="d-flex h-100 align-items-center justify-content-center">
|
||||
<div class="card-with-avatar">
|
||||
<div class="card-body">
|
||||
<p><strong class="text-azul-claro">Grito de
|
||||
guerra</strong>: motivación para arrancar con
|
||||
fuerza.</p>
|
||||
</div>
|
||||
<div class="avatar-circle">
|
||||
<img src="img/04.2.png" alt="Avatar ilustrado">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-slide text-center">
|
||||
<div class="d-flex h-100 align-items-center justify-content-center">
|
||||
<div class="card-with-avatar">
|
||||
<div class="card-body">
|
||||
<p><strong class="text-azul-claro">Role Play</strong>:
|
||||
ejercicios para mejorar tu discurso de ventas.</p>
|
||||
</div>
|
||||
<div class="avatar-circle">
|
||||
<img src="img/04.3.png" alt="Avatar ilustrado">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-slide text-center">
|
||||
<div class="d-flex h-100 align-items-center justify-content-center">
|
||||
<div class="card-with-avatar">
|
||||
<div class="card-body">
|
||||
<p><strong class="text-azul-claro">Prospección</strong>:
|
||||
ya sea por telemarketing, cambaceo tradicional, en
|
||||
negocios o seguimiento.</p>
|
||||
</div>
|
||||
<div class="avatar-circle">
|
||||
<img src="img/04.4.png" alt="Avatar ilustrado">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(function () {
|
||||
"use strict";
|
||||
|
||||
// $("body").addClass("fake");
|
||||
const audioh06 = CourseNav.createSound("audio/audioh06.mp3");
|
||||
|
||||
let swiperIcons;
|
||||
let swiperCards;
|
||||
|
||||
audioh06.on("end", function () {
|
||||
|
||||
$(".wrap-sw").show();
|
||||
$(".wrap-cards").show();
|
||||
swiperCards = initializeSwiper(".customSwiper", onAllSlidesVisited, {
|
||||
autoHeight: false, // Ajusta la altura del contenedor al slide activo
|
||||
grabCursor: false, // Oculta el cursor de "mano" al pasar sobre el Swiper
|
||||
allowTouchMove: false, // Deshabilita el arrastre (drag)
|
||||
});
|
||||
$('.swiper-custom-button-next').addClass('animate__animated animate__pulse animate__infinite');
|
||||
swiperIcons = initializeSwiper(
|
||||
".mySwiper",
|
||||
onAllSlidesVisited,
|
||||
{
|
||||
slidesPerView: 5,
|
||||
centeredSlides: true,
|
||||
spaceBetween: 30,
|
||||
grabCursor: false,
|
||||
allowTouchMove: false, // Deshabilita el arrastre (drag)
|
||||
navigation: {
|
||||
nextEl: ".swiper-custom-button-next",
|
||||
prevEl: ".swiper-custom-button-prev",
|
||||
},
|
||||
breakpoints: {
|
||||
0: {
|
||||
slidesPerView: 2,
|
||||
spaceBetween: 20,
|
||||
},
|
||||
768: {
|
||||
slidesPerView: 5,
|
||||
spaceBetween: 30,
|
||||
},
|
||||
},
|
||||
},
|
||||
audioFiles,
|
||||
);
|
||||
// Sincronizar los Swipers
|
||||
swiperIcons.on("slideChange", function () {
|
||||
const currentIndex = swiperIcons.activeIndex;
|
||||
swiperCards.slideTo(currentIndex);
|
||||
});
|
||||
});
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(audioh06);
|
||||
const audioFiles = [
|
||||
CourseNav.createSound("audio/audio11.mp3"),
|
||||
CourseNav.createSound("audio/audio12.mp3"),
|
||||
CourseNav.createSound("audio/audio13.mp3"),
|
||||
CourseNav.createSound("audio/audio14.mp3"),
|
||||
];
|
||||
|
||||
|
||||
function onAllSlidesVisited() {
|
||||
console.log("completado");
|
||||
$('.swiper-custom-button-next').removeClass('animate__animated animate__pulse animate__infinite');
|
||||
CourseNav.setSlideVisited();
|
||||
}
|
||||
|
||||
$(".btn-open-info").click(function () {
|
||||
const $element = $(this);
|
||||
$(this).removeClass("animate__animated animate__pulse animate__infinite").addClass("visited");
|
||||
const html = $($(this).data("popid")).html();
|
||||
// Validación del audio
|
||||
let audio = null;
|
||||
const audioData = $element.data("sound");
|
||||
console.log(audioData);
|
||||
if (audioData) {
|
||||
try {
|
||||
audio = eval(audioData);
|
||||
if (audio) {
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(audio);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(`Error al evaluar el audio: ${audioData}`, error);
|
||||
}
|
||||
}
|
||||
|
||||
Swal.fire({
|
||||
html: html,
|
||||
target: "body",
|
||||
customClass: "poup_class",
|
||||
confirmButtonText: "Cerrar",
|
||||
showConfirmButton: false,
|
||||
showCloseButton: true,
|
||||
closeButtonHtml: '<span class="swal2-close-x">x</span>',
|
||||
showDenyButton: false,
|
||||
showCancelButton: false,
|
||||
allowOutsideClick: false,
|
||||
allowEscapeKey: false,
|
||||
focusConfirm: false,
|
||||
willOpen: () => {
|
||||
// $(".swal2-popup").css("padding", "0");
|
||||
// $(".swal2-popup").css("box-shadow", "none");
|
||||
// $(".swal2-container").css("padding", "0");
|
||||
// if (audio) {
|
||||
// CourseNav.audioController.stopAllSoundsAndPlay(audio);
|
||||
// }
|
||||
},
|
||||
didOpen: null,
|
||||
didRender: null,
|
||||
willClose: () => {
|
||||
CourseNav.audioController.stopAudio();
|
||||
},
|
||||
didClose: null,
|
||||
didDestroy: null,
|
||||
});
|
||||
});
|
||||
|
||||
function initializeSwiper(swiperContainer, callback, options = {}, audios = [], autoPlaySound = true) {
|
||||
const visitedSlides = new Set();
|
||||
const container = typeof swiperContainer === "string" ? document.querySelector(swiperContainer) : swiperContainer;
|
||||
const parent = container.parentElement;
|
||||
if (options.navigation && options.navigation.nextEl && options.navigation.prevEl) {
|
||||
options.navigation.nextEl = container.querySelector(options.navigation.nextEl)
|
||||
? container.querySelector(options.navigation.nextEl)
|
||||
: parent.querySelector(options.navigation.nextEl);
|
||||
options.navigation.prevEl = container.querySelector(options.navigation.prevEl)
|
||||
? container.querySelector(options.navigation.prevEl)
|
||||
: parent.querySelector(options.navigation.prevEl);
|
||||
}
|
||||
const defaultParams = {
|
||||
effect: "slide",
|
||||
loop: false,
|
||||
autoHeight: true,
|
||||
};
|
||||
|
||||
// Combina opciones personalizadas con las por defecto
|
||||
const params = {
|
||||
...defaultParams,
|
||||
...options,
|
||||
on: {
|
||||
init: function () {
|
||||
visitedSlides.add(this.activeIndex);
|
||||
if (audios.length > 0 && audios[this.activeIndex] && autoPlaySound) {
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(audios[this.activeIndex]);
|
||||
}
|
||||
},
|
||||
slideChange: function () {
|
||||
const index = this.activeIndex;
|
||||
visitedSlides.add(index);
|
||||
if (audios.length > 0) {
|
||||
CourseNav.audioController.stopAudio();
|
||||
}
|
||||
if (audios.length > 0 && audios[index]) {
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(audios[index]);
|
||||
}
|
||||
if (visitedSlides.size === this.slides.length && typeof callback === "function") {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
return new Swiper(container, params);
|
||||
}
|
||||
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,250 @@
|
||||
<style>
|
||||
.page-sco {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.foco-wrap {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.foco-img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
filter: drop-shadow(0 0 18px #fff8) drop-shadow(0 0 8px #ffe06633);
|
||||
transition: filter 0.6s cubic-bezier(.68, -0.55, .27, 1.55), transform 0.35s;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.foco-prendido {
|
||||
filter: drop-shadow(0 0 32px #fff) drop-shadow(0 0 16px #FBC518aa);
|
||||
}
|
||||
|
||||
.foco-prendido:hover,
|
||||
.foco-prendido:focus {
|
||||
filter: drop-shadow(0 0 48px #fff) drop-shadow(0 0 28px #FBC518cc) brightness(1.2);
|
||||
transform: scale(1.04) rotate(-2deg);
|
||||
}
|
||||
|
||||
.foco-apagado {
|
||||
filter: drop-shadow(0 0 6px #aaa2) grayscale(0.2);
|
||||
}
|
||||
|
||||
.foco-apagado:hover,
|
||||
.foco-apagado:focus,
|
||||
.btn-open-pop:hover {
|
||||
filter: drop-shadow(0 0 28px #fff) drop-shadow(0 0 14px #FBC51899);
|
||||
transform: scale(1.04) rotate(2deg);
|
||||
}
|
||||
|
||||
.foco-bubble {
|
||||
background: rgba(24, 24, 24, 0.7);
|
||||
color: #fff;
|
||||
border: 2px solid #fff;
|
||||
border-radius: 2rem;
|
||||
padding: 1.5rem 2rem;
|
||||
line-height: 1.45;
|
||||
box-shadow: 0 6px 28px -8px #0008;
|
||||
margin: 0.5rem 0;
|
||||
position: relative;
|
||||
transition: box-shadow 0.3s;
|
||||
display: none;
|
||||
/* Ocultar inicialmente */
|
||||
}
|
||||
|
||||
.foco-bubble.show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.foco-bubble .resalta {
|
||||
background: #FBC518;
|
||||
color: #222;
|
||||
border-radius: 0.33em;
|
||||
padding: 0 0.25em;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.foco-wrap {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.foco-img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.foco-bubble {
|
||||
|
||||
padding: 1rem 1.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.back0 {
|
||||
background-image: url('img/bg02.jpg');
|
||||
background-attachment: fixed;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
/*
|
||||
.btn-open-pop {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
font-size: 40px;
|
||||
} */
|
||||
</style>
|
||||
|
||||
<section class="page-sco back0 py-md-4 py-2">
|
||||
<!-- <div class="container-fluid">
|
||||
|
||||
</div> -->
|
||||
<div class="container-fluid px-0 my-md-5 my-xl-3 d-none" id="container3">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 col-md-10 text-white">
|
||||
<h2 class="fw-semibold">Beneficios Generales </h2>
|
||||
<p>Conoce los beneficios generales de <b>OGestan<sup>®</sup> Andractiv</b>. Descubre cómo mejora
|
||||
parámetros esenciales del semen y fortalece la fertilidad masculina.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-5 animate__animated animate__fadeInLeft">
|
||||
<!-- Foco izquierda -->
|
||||
<div class="col-6 col-md-3 d-flex justify-content-center mb-3 mb-md-0">
|
||||
<div class="foco-wrap">
|
||||
<img src="img/foco1.png" data-on="img/foco1.png" data-off="img/foco1off.png" alt="Foco encendido"
|
||||
class="foco-img" id="focoIzquierda" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- Texto derecha -->
|
||||
<div class="col-12 col-md-9">
|
||||
<div class="foco-bubble">
|
||||
Esta combinación de <b class="text-yellow">Antioxidantes, Vitaminas, Minerales y Omega–3</b> está
|
||||
diseñada para la mejora en la
|
||||
cantidad, calidad y motilidad espermática.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row align-items-center justify-content-end flex-md-row-reverse animate__animated animate__fadeInRight d-none"
|
||||
id="focoDerecha">
|
||||
<!-- Foco derecha -->
|
||||
<div class="col-6 col-md-3 d-flex justify-content-center mb-3 mb-md-0">
|
||||
<div class="foco-wrap">
|
||||
<img src="img/foco2.png" data-on="img/foco2on.png" data-off="img/foco2.png" alt="Foco apagado"
|
||||
class="foco-img foco-apagado" id="focoDerechaImg" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- Texto izquierda -->
|
||||
<div class="col-12 col-md-9">
|
||||
<div class="foco-bubble">
|
||||
<ul class="my-0">
|
||||
<li>Mejora la <b class="text-yellow">motilidad</b> de los espermatozoides.</li>
|
||||
<li>Mejora la <b class="text-yellow">morfología</b> del espermatozoide.</li>
|
||||
<li>Mejora el <b class="text-yellow">recuento</b> de espermatozoides.</li>
|
||||
<li>Mejora el <b class="text-yellow">volumen</b> del semen.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<script>
|
||||
$(function () {
|
||||
'use strict';
|
||||
|
||||
// Focos (usa IDs o clases únicas)
|
||||
const $focoIzquierda = $("#focoIzquierda");
|
||||
const $focoDerecha = $("#focoDerechaImg");
|
||||
|
||||
const audioh17 = CourseNav.createSound('audio/audioh17.mp3');
|
||||
const audioh18 = CourseNav.createSound('audio/audioh18.mp3');
|
||||
const audioh19 = CourseNav.createSound('audio/audioh19.mp3');
|
||||
|
||||
|
||||
function setFocoState($img, state) {
|
||||
// state = 'on' | 'off'
|
||||
if (!$img.length) return;
|
||||
const onSrc = $img.data("on");
|
||||
const offSrc = $img.data("off");
|
||||
if (state === 'on') {
|
||||
$img.removeClass('foco-apagado').addClass('foco-prendido');
|
||||
if (onSrc) $img.attr('src', onSrc);
|
||||
} else {
|
||||
$img.removeClass('foco-prendido').addClass('foco-apagado');
|
||||
if (offSrc) $img.attr('src', offSrc);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
setFocoState($focoIzquierda, 'off');
|
||||
setFocoState($focoDerecha, 'off');
|
||||
$focoIzquierda.removeClass('foco-prendido').addClass('foco-apagado');
|
||||
$focoDerecha.removeClass('foco-prendido').addClass('foco-apagado');
|
||||
|
||||
// Cuando termina audioh17, muestra container3 y arranca audioh18
|
||||
|
||||
audioh17.on("play", function () {
|
||||
$("#container3").removeClass("d-none");
|
||||
$("#focoDerecha").removeClass("d-none");
|
||||
});
|
||||
|
||||
audioh17.on("end", function () {
|
||||
$('.foco-img').addClass('animate__animated animate__headShake animate__infinite');
|
||||
});
|
||||
|
||||
// Funcionalidad de clic para el foco izquierdo
|
||||
$focoIzquierda.on('click', function () {
|
||||
// Mostrar su bubble correspondiente
|
||||
$(this).closest('.row').find('.foco-bubble').addClass('show');
|
||||
// Reproducir audioh18
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(audioh18);
|
||||
// Cambiar estado visual
|
||||
setFocoState($focoIzquierda, 'on');
|
||||
setFocoState($focoDerecha, 'off');
|
||||
|
||||
$(this).removeClass('animate__animated animate__headShake animate__infinite')
|
||||
});
|
||||
|
||||
// Funcionalidad de clic para el foco derecho
|
||||
$focoDerecha.on('click', function () {
|
||||
// Mostrar su bubble correspondiente
|
||||
$(this).closest('.row').find('.foco-bubble').addClass('show');
|
||||
// Reproducir audioh19
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(audioh19);
|
||||
// Cambiar estado visual
|
||||
setFocoState($focoDerecha, 'on');
|
||||
setFocoState($focoIzquierda, 'off');
|
||||
$(this).removeClass('animate__animated animate__heartBeat animate__infinite')
|
||||
});
|
||||
|
||||
// Cuando terminan los audios, marcar como visitado si ambos bubbles están visibles
|
||||
function checkCompletion() {
|
||||
const bubble1Visible = $('.foco-bubble').eq(0).hasClass('show');
|
||||
const bubble2Visible = $('.foco-bubble').eq(1).hasClass('show');
|
||||
if (bubble1Visible && bubble2Visible) {
|
||||
// Prende ambos focos al completar
|
||||
setFocoState($focoIzquierda, 'on');
|
||||
setFocoState($focoDerecha, 'on');
|
||||
// CourseNav.setSlideVisited();
|
||||
}
|
||||
}
|
||||
|
||||
audioh18.on("end", checkCompletion);
|
||||
audioh19.on("end", checkCompletion);
|
||||
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(audioh17);
|
||||
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,113 @@
|
||||
<style>
|
||||
.fake {
|
||||
background-image: url(img/bg08.webp);
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.play-button-container {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 10002;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
#video {
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
.play-button-container button {
|
||||
pointer-events: all;
|
||||
border: none;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
<div class="page-sco full-page-sco w-100 pt-2 pt-md-0">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center align-items-center">
|
||||
<div class="col-12">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 mb-3 text-center animate__animated animate__bounceInDown">
|
||||
<h1 class="fw-bold text-white text-center text-white">Me acompañó, no solo me afilió</h1>
|
||||
<p class="animate__animated animate__lightSpeedInLeft animate__delay-2s">Erika no fue
|
||||
convencida. Fue escuchada, comprendida… y eso la llevó a decir que sí.<br>
|
||||
Descubre cómo una conversación sin presión puede abrir una puerta real.</p>
|
||||
</div>
|
||||
<div class="col-12 col-md-8 col-xl-7 mt-3 mt-md-0 animate__animated animate__zoomIn">
|
||||
<div class="w-100 animate__animated animate__flipInX">
|
||||
<div class="ratio ratio-16x9">
|
||||
<video id="video" class="embed-responsive-item" controls playsinline
|
||||
poster="video/poster.png">
|
||||
<source src="video/V1 M2 - Me Acompanio, No Me Vendio_V4.mp4" type="video/mp4">
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
<div class="play-button-container">
|
||||
<button
|
||||
class="p-0 animate__animated animate__heartBeat animate__infinite waves-effect disabled"
|
||||
id="btn_video">
|
||||
<i class="fa-solid fa-play fa-3x text-white"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(function () {
|
||||
"use strict";
|
||||
$('body').addClass('fake');
|
||||
|
||||
const audioh23 = CourseNav.createSound('audio/audioh23.mp3');
|
||||
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(audioh23);
|
||||
|
||||
audioh23.on('end', function () {
|
||||
$("#btn_video").removeClass("disabled");
|
||||
});
|
||||
|
||||
var video = document.getElementById("video");
|
||||
var btnVideo = document.getElementById("btn_video");
|
||||
|
||||
// Evitar la reproducción del video al hacer clic en el botón de reproducción
|
||||
btnVideo.addEventListener("click", function (event) {
|
||||
if (!btnVideo.classList.contains("disabled")) {
|
||||
CourseNav.soundClick();
|
||||
document.getElementById("video").play();
|
||||
$(".play-button-container").hide(); // Ocultar el contenedor de botón de reproducción
|
||||
} else {
|
||||
event.stopPropagation(); // Evita que el evento de clic llegue al video
|
||||
}
|
||||
});
|
||||
|
||||
// Evitar que el video se reproduzca al hacer clic en el área de la capa
|
||||
video.addEventListener("click", function (event) {
|
||||
if (!btnVideo.classList.contains("disabled")) {
|
||||
event.preventDefault(); // Evita la acción predeterminada de reproducción del video
|
||||
}
|
||||
});
|
||||
|
||||
// Evitar la reproducción del video al hacer doble clic en cualquier parte del video
|
||||
video.addEventListener("dblclick", function (event) {
|
||||
if (!btnVideo.classList.contains("disabled")) {
|
||||
event.preventDefault(); // Evita la acción predeterminada de reproducción del video
|
||||
}
|
||||
});
|
||||
|
||||
video.addEventListener("ended", function () {
|
||||
CourseNav.setSlideVisited();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,302 @@
|
||||
<style>
|
||||
.full-screen {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: max-content;
|
||||
}
|
||||
|
||||
.wrapper-card {
|
||||
display: inline-flex;
|
||||
border-radius: 30px;
|
||||
background-color: var(--bs-gray-100);
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
-webkit-transition: background-color 0.5s ease;
|
||||
-moz-transition: background-color 0.5s ease;
|
||||
-o-transition: background-color 0.5s ease;
|
||||
transition: background-color 0.5s ease;
|
||||
}
|
||||
|
||||
[data-popid="#pop-dexeed"]:hover {
|
||||
background-color: var(--bs-azul);
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
[data-popid="#pop-otros"]:hover {
|
||||
background-color: var(--bs-rosa);
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.full-screen .middle {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.full-screen {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: auto;
|
||||
}
|
||||
|
||||
.eletxt {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
z-index: 5;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.grid-diagrama-1,
|
||||
.ajuste-grid {
|
||||
display: grid;
|
||||
justify-items: center;
|
||||
align-items: center;
|
||||
grid-template-columns: 1fr;
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
.grid-item-1:not(.arrow) {
|
||||
background-color: #edeeee;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
color: var(--bs-gris);
|
||||
font-weight: bold;
|
||||
padding: 10px;
|
||||
border-radius: 15px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.grid-item-1:not(.arrow)>img {
|
||||
margin-right: .3em;
|
||||
}
|
||||
|
||||
.grid-item-1.arrow>img {
|
||||
display: block;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.mr-custom {
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
.ajuste-titulo {
|
||||
margin-left: 10%;
|
||||
}
|
||||
|
||||
.grid-diagrama-1 {
|
||||
display: grid;
|
||||
justify-items: legacy;
|
||||
grid-template-columns: auto 30px auto;
|
||||
}
|
||||
|
||||
.ajuste-grid {
|
||||
display: grid;
|
||||
justify-items: legacy;
|
||||
grid-template-columns: auto 30px auto 30px auto;
|
||||
}
|
||||
|
||||
.grid-item-1:not(.arrow) {
|
||||
width: auto;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.grid-item-1.arrow>img {
|
||||
display: block;
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div class="w-100 page-sco h-100 p-0">
|
||||
<div class="full-screen">
|
||||
<div class="eletxt">
|
||||
<div class="w-100 text-center mt-md-4 mt-2">
|
||||
<h2 class="text-primary fw-semibold">Competidores</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="middle bg-morado bg-opacity-10 animate__animated animate__fadeInLeft"
|
||||
style="background-image: url('img/r1.webp')">
|
||||
<div data-popid="#pop-dexeed" data-audio="audioh21"
|
||||
data-backdrop="url(img/pool.webp) no-repeat center / cover"
|
||||
class="wrapper-card cursor py-3 px-5 animate__animated animate__pulse animate__infinite disabled card-shadow text-azul">
|
||||
<i class="fa-regular fa-sack"></i>
|
||||
<div>DAXEED</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="middle bg-warning bg-opacity-10 animate__animated animate__fadeInRight"
|
||||
style="background-image: url('img/l1.webp')">
|
||||
<div data-popid="#pop-otros" data-backdrop="url(img/semilla.webp) no-repeat center / cover"
|
||||
data-audio="audioh22"
|
||||
class="wrapper-card cursor py-3 px-5 animate__animated animate__pulse animate__infinite disabled card-shadow text-magenta">
|
||||
<i class="fa-regular fa-hand-holding-seedling"></i>
|
||||
<div>OTROS</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-none">
|
||||
<div id="pop-dexeed">
|
||||
<div class="d-flex justify-content-center align-items-center flex-column align-self-center">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<ul class="text-start">
|
||||
<li>Comercializado por Corne.</li>
|
||||
<li>8 componentes: antioxidantes, aminoácidos, vitaminas y zinc.</li>
|
||||
<li>No contiene Omega-3.</li>
|
||||
<li>No contiene Selenio.</li>
|
||||
<li>Ácido fólico estándar.</li>
|
||||
<li>Alto costo.</li>
|
||||
<li>Limitada disponibilidad en puntos de venta.</li>
|
||||
<li>Sin promoción médica.</li>
|
||||
<li>Presentación en sobres.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="w-100 text-center mt-4 pb-4">
|
||||
<div class="btn btn-mango text-white" onclick="Swal.close()">Cerrar</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
<div id="pop-otros">
|
||||
<div class="d-flex justify-content-center align-items-center flex-column align-self-center">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 text-center">
|
||||
<ul class="text-start">
|
||||
<li>Fabricantes no establecidos, ni reconocidos en México.</li>
|
||||
<li>Venta sólo por E-commerce y enviados desde el extranjero.</li>
|
||||
<li>Sin permisos por la autoridad mexicana.</li>
|
||||
<li>Sin respaldo o soporte científico.</li>
|
||||
<li>Calidad cuestionable.</li>
|
||||
<li>Altos costos de envío.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="w-100 text-center mt-4 pb-4">
|
||||
<div class="btn btn-mango text-white" onclick="Swal.close()">Cerrar</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(function () {
|
||||
const audioh20 = CourseNav.createSound("audio/audioh20.mp3");
|
||||
const audioh21 = CourseNav.createSound("audio/audioh21.mp3");
|
||||
const audioh22 = CourseNav.createSound("audio/audioh22.mp3");
|
||||
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(audioh20);
|
||||
audioh20.on("end", () => {
|
||||
$(".wrapper-card").removeClass("disabled");
|
||||
});
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(audioh20);
|
||||
|
||||
audioh22.on("end", function () {
|
||||
|
||||
});
|
||||
audioh21.on("end", function () {
|
||||
|
||||
});
|
||||
|
||||
$(".wrapper-card").click(function () {
|
||||
$(this).removeClass("animate__animated animate__pulse animate__infinite").addClass("visited");
|
||||
|
||||
const $element = $(this);
|
||||
|
||||
// Validación del HTML del pop-up
|
||||
const popId = $element.data("popid");
|
||||
const html = popId && $(popId).length ? $(popId).html() : "";
|
||||
|
||||
// Validación del audio
|
||||
let audio = null;
|
||||
const audioData = $element.data("audio");
|
||||
console.log(audioData);
|
||||
if (audioData) {
|
||||
try {
|
||||
audio = eval(audioData);
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(audio);
|
||||
} catch (error) {
|
||||
console.error(`Error al evaluar el audio: ${audioData}`, error);
|
||||
}
|
||||
}
|
||||
|
||||
// Validación de la clase personalizada
|
||||
const customClass = $element.data("customclass") || "";
|
||||
|
||||
const backDrop = $element.data("backdrop") ? $element.data("backdrop") : true;
|
||||
// Validación de la función onclose
|
||||
let onclose = null;
|
||||
const oncloseData = $element.data("onclose");
|
||||
if (oncloseData) {
|
||||
try {
|
||||
onclose = eval(oncloseData);
|
||||
if (typeof onclose !== "function") {
|
||||
console.warn(`El valor de onclose no es una función: ${oncloseData}`);
|
||||
onclose = null;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(`Error al evaluar onclose: ${oncloseData}`, error);
|
||||
}
|
||||
}
|
||||
|
||||
// const showConfirmButton = CourseNav.isVisited();
|
||||
|
||||
Swal.fire({
|
||||
html: html,
|
||||
target: "body",
|
||||
customClass: `pop_class`,
|
||||
showConfirmButton: false,
|
||||
showCloseButton: false,
|
||||
closeButtonHtml: "",
|
||||
showDenyButton: false,
|
||||
showCancelButton: false,
|
||||
allowOutsideClick: false,
|
||||
allowEscapeKey: false,
|
||||
focusConfirm: false,
|
||||
confirmButtonText: "Cerrar",
|
||||
customClass: {
|
||||
popup: 'pop-type0 bg-transparent p-0',
|
||||
htmlContainer: 'html-pop-style p-3',
|
||||
confirmButton: 'btn btn-begin text-white fw-bold animate__animated animate__pulse animate__infinite py-1 px-4'
|
||||
},
|
||||
// backdrop: backDrop,
|
||||
willOpen: () => {
|
||||
$('.swal2-actions').show();
|
||||
$('.swal2-confirm').show();
|
||||
|
||||
},
|
||||
didOpen: null,
|
||||
didRender: null,
|
||||
willClose: () => {
|
||||
CourseNav.audioController.stopAudio();
|
||||
},
|
||||
didClose: onclose,
|
||||
didDestroy: null,
|
||||
});
|
||||
});
|
||||
|
||||
function onAllSlidesVisited() {
|
||||
if ($(".wrapper-card").length === $(".wrapper-card.visited").length) {
|
||||
CourseNav.setSlideVisited();
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,731 @@
|
||||
<style>
|
||||
.fake {
|
||||
background-image: url("img/actividad/inicio.webp");
|
||||
background-position: center bottom;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.fake-activity {
|
||||
background-image: url("img/actividad/desarrollo.webp");
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.fake-closing {
|
||||
background-image: url("img/actividad/inicio.webp");
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.fake-max-attempts {
|
||||
background-image: url("img/actividad/inicio.webp");
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
|
||||
.page-activity {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
.swal-instructions,
|
||||
.pieces-card {
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
border-radius: 0px !important;
|
||||
}
|
||||
|
||||
#inicio {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.option-btn {
|
||||
width: 100%;
|
||||
height: max-content;
|
||||
margin-bottom: 1em;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
border: solid 0px var(--bs-rosa-claro);
|
||||
border-radius: 10px;
|
||||
padding: 5px;
|
||||
background: #ffffffe8;
|
||||
box-shadow: 15px 9px 0px 3px #b7bcbe;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.option-btn:hover i {
|
||||
color: var(--bs-secondary);
|
||||
}
|
||||
|
||||
.option-btn.selected {
|
||||
background: var(--bs-secondary);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.results {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.results h2 {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.custom-card {
|
||||
/* background: linear-gradient(180deg, #ffffff 0%, #c0b9c8 100%); */
|
||||
border-radius: 15px;
|
||||
border: solid 2px #fff;
|
||||
}
|
||||
|
||||
.visualFeedback {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.piece {
|
||||
cursor: pointer;
|
||||
/*display: flex;*/
|
||||
/*align-items: end;*/
|
||||
}
|
||||
|
||||
.list-options {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.list-options li {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.piece.completed img {
|
||||
/* filter: grayscale(100%); */
|
||||
}
|
||||
|
||||
.custom-hr {
|
||||
border: 1px solid #ff5733;
|
||||
/* Cambia #ff5733 por el color que desees */
|
||||
}
|
||||
|
||||
.pop_course {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.feedback {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.option-btn img {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.swal2-popup {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
/* .fake {
|
||||
background-image: url("img/actividad/bg25.1.webp");
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
} */
|
||||
|
||||
.option-btn {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
.option-btn {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.piece {
|
||||
max-width: 100px;
|
||||
}
|
||||
|
||||
.visualFeedback {
|
||||
bottom: 0px;
|
||||
}
|
||||
|
||||
.pieces-wrap {
|
||||
transform: translate(0px, 40px);
|
||||
z-index: 50;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.pop_course {
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="page-sco page-activity h-100" id="inicio">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center align-items-md-center align-items-center">
|
||||
<div class="col-12">
|
||||
<div class="row justify-content-center align-items-center">
|
||||
<div class="col-7 col-md-6 text-center animate__animated animate__bounceInLeft">
|
||||
<div class="row justify-content-center align-items-center">
|
||||
<div class="col-12 col-md-9">
|
||||
<img src="img/actividad/0.webp" class="img-fluid" loading="lazy" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 pt-4 pt-md-0 animate__animated animate__bounceInRight">
|
||||
<div class="card custom-card bg-white border-0">
|
||||
<div class="card-body text-center">
|
||||
<h1 class="text-primary fw-bold">¿Quién está diciendo la verdad?</h1>
|
||||
<p>En esta actividad podrás practicar cómo responder
|
||||
<b>objeciones</b> y elegir quién da la respuesta correcta.
|
||||
</p>
|
||||
|
||||
<p>Prepárate para afinar tu criterio y tomar la mejor decisión.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-100 my-md-3 my-2 text-center"><button class="btn btn-primary disable"
|
||||
id="btn-comenzar">Comenzar</button></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page-sco page-activity h-100" id="desarrollo" style="display: none;">
|
||||
<div class="container-fluid h-100">
|
||||
<div class="row justify-content-center align-items-center align-items-md-start h-100">
|
||||
<div class="col-12 col-md-12 px-0 bg-gris text-white intro">
|
||||
<div class="row justify-content-center align-items-center my-2 my-md-4 mx-3">
|
||||
<div class="col-12 col-md-10">
|
||||
<p><b>Instrucciones:</b> Lee la respuesta de los dos representantes sobre una objeción. Analiza
|
||||
cuidadosamente sus argumentos y elige quién tiene la razón.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-12 pt-0 pt-md-2">
|
||||
<div class="row justify-content-center align-items-center">
|
||||
<div class="col-11 col-md-10 mb-md-3">
|
||||
<div class="card custom-card flat pieces-card d-block d-md-block mb-md-3">
|
||||
<div class="card-body w-100 py-2">
|
||||
<div id="quiz-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-none d-md-block" id="row-x"></div>
|
||||
<div class="col-12 col-md-5">
|
||||
<div class="row justify-content-center align-items-center">
|
||||
<div class="piece col-2 col-md-2" data-piece="1">
|
||||
<img src="img/actividad/checked.webp" class="img-fluid" loading="lazy" alt="" />
|
||||
</div>
|
||||
<div class="piece col-2 col-md-2" data-piece="2">
|
||||
<img src="img/actividad/checked.webp" class="img-fluid" loading="lazy" alt="" />
|
||||
</div>
|
||||
<div class="piece col-2 col-md-2" data-piece="3">
|
||||
<img src="img/actividad/checked.webp" class="img-fluid" loading="lazy" alt="" />
|
||||
</div>
|
||||
<div class="piece col-2 col-md-2" data-piece="4">
|
||||
<img src="img/actividad/checked.webp" class="img-fluid" loading="lazy" alt="" />
|
||||
</div>
|
||||
<div class="piece col-2 col-md-2" data-piece="5">
|
||||
<img src="img/actividad/checked.webp" class="img-fluid" loading="lazy" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page-sco page-activity h-100" id="cierre" style="display: none;">
|
||||
<div class="container h-100">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-12 col-md-10">
|
||||
<div class="row justify-content-center align-items-center">
|
||||
<div class="col-12 col-md-6">
|
||||
<div class="card bg-white">
|
||||
<div class="card-body">
|
||||
<div class="passed text-center feedback">
|
||||
<h1 class="text-rosa-claro fw-bold">¡Muy bien!</h1>
|
||||
<p>Has demostrado una excelente comprensión del programa Tutoría Campo.</p>
|
||||
<p>Tu capacidad para <b>distinguir</b> entre información correcta y confusiones
|
||||
comunes es clave para
|
||||
aplicar este conocimiento con claridad y seguridad.</p>
|
||||
</div>
|
||||
<div class="failed text-center feedback">
|
||||
<h1 class="text-rosa-claro fw-bold">¿Te confundiste?</h1>
|
||||
<p>Te invitamos a intentarlo una vez más para reforzar lo aprendido y mejorar tu
|
||||
resultado. </p>
|
||||
<p class="text-center fw-bold text-primary">¡Tú puedes!</p>
|
||||
</div>
|
||||
<div class="without-attempts text-center feedback">
|
||||
<p>Revisa nuevamente el contenido y responde la actividad cuando estés preparado.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row justify-content-center failed feedback my-3">
|
||||
<div class="col-12 col-md-12 text-center">
|
||||
<button
|
||||
class="btn btn-mango animate__animated animate__pulse animate__infinite waves-effect"
|
||||
id="reintentar">Volver a intentar</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row justify-content-center without-attempts feedback my-3">
|
||||
<div class="col-12 col-md-12 text-center">
|
||||
<button id="reiniciar"
|
||||
class="btn btn-mango animate__animated animate__pulse animate__infinite waves-effect">Reiniciar</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 text-center">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-7 col-md-10 my-2 my-md-0 text-center">
|
||||
<img src="img/actividad/correct.webp" class="img-fluid passed feedback">
|
||||
<img src="img/actividad/failed.webp" class="img-fluid failed feedback">
|
||||
<img src="img/actividad/attempts.webp" class="img-fluid without-attempts feedback">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="js/QuizManager.min.js"></script>
|
||||
<script>
|
||||
$(document).ready(async function () {
|
||||
// Configuración inicial
|
||||
$("body").addClass("fake");
|
||||
//Configuracion de audio
|
||||
const audios = {
|
||||
fondo: CourseNav.createSound("audio/FastTalkin.mp3"),
|
||||
introduction: CourseNav.createSound("audio/audioh23.mp3"),
|
||||
instruccions: CourseNav.createSound("audio/audioh24.mp3"),
|
||||
correct: CourseNav.createSound("audio/audioh25.mp3"),
|
||||
incorrect: CourseNav.createSound("audio/audioh26.mp3"),
|
||||
attemptLimitReached: CourseNav.createSound("audio/audioh27.mp3"),
|
||||
feedbackIncorrect: CourseNav.createSound("audio/feedback-incorrect.mp3"),
|
||||
feedbackCorrect: CourseNav.createSound("audio/feedback-correct.mp3"),
|
||||
// videogame: CourseNav.createSound("audio/video-game.mp3"),
|
||||
openQuestion: CourseNav.createSound("audio/open-question.mp3"),
|
||||
gameover: CourseNav.createSound("audio/game-over.mp3"),
|
||||
};
|
||||
// Configuración de las páginas
|
||||
const pageActivity = ".page-activity";
|
||||
const pageStart = "#inicio";
|
||||
const pageDevelopment = "#desarrollo";
|
||||
const pageSummary = "#cierre";
|
||||
|
||||
//Configuracion Instrucciones
|
||||
let InstructionsPop = false;
|
||||
|
||||
// Crear instancia de QuizManager
|
||||
const quizManager = new QuizManager({
|
||||
excelFileUrl: "Quiz.xlsx",
|
||||
mandatoryFields: {
|
||||
question: "pregunta",
|
||||
correctFeedback: "retroalimentacion_correcta",
|
||||
incorrectFeedback: "retroalimentacion_incorrecta",
|
||||
},
|
||||
optionPrefix: "opcion", // Prefijo para las opciones
|
||||
randomizeQuestions: true, // Habilitar preguntas aleatorias
|
||||
randomizeOptions: false, // Habilitar opciones aleatorias
|
||||
passingScore: 80, // Puntaje mínimo aprobatorio
|
||||
defaultWeight: 1, // Ponderación por defecto
|
||||
maxAttempts: 3, // Intentos máximos por defecto
|
||||
specialOptions: ["Ninguna de las anteriores", "Todas las anteriores"], // Textos especiales
|
||||
maxQuestions: 5, // Limitar a 5 preguntas
|
||||
});
|
||||
|
||||
// Configurar intentos iniciales con validación desde el LMS
|
||||
const attempt = !isNaN(CourseNav.getLessonLocation()) ? Number(CourseNav.getLessonLocation()) : 0;
|
||||
|
||||
|
||||
// Establecer los intentos iniciales
|
||||
quizManager.setAttempts(attempt);
|
||||
|
||||
// Cargar las preguntas al inicio
|
||||
await loadAndStartQuiz();
|
||||
|
||||
audios.instruccions.on("end", function () {
|
||||
if (InstructionsPop) {
|
||||
$('.swal-confirm').addClass('animate__animated animate__pulse animate__infinite');
|
||||
} else {
|
||||
$('.piece[data-piece="1"]').click();
|
||||
if (!$('#row-x').is(':visible')) {
|
||||
$('.intro').hide();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Manejar clic en el botón "Comenzar"
|
||||
$("#btn-comenzar").click(function () {
|
||||
|
||||
const maxAttempts = quizManager.config.maxAttempts || Infinity; // Obtener intentos máximos
|
||||
const attemptsMade = quizManager.getAttempts(); // Intentos realizados
|
||||
$("body").removeClass("fake").addClass("fake-activity");
|
||||
// if (!quizManager.hasReachedMaxAttempts()) {
|
||||
$(pageActivity).hide();
|
||||
$(pageDevelopment).show();
|
||||
|
||||
// Incrementar los intentos y guardar en el LMS
|
||||
quizManager.incrementAttempts();
|
||||
CourseNav.setLessonLocation(quizManager.getAttempts());
|
||||
$(".piece").addClass("disabled");
|
||||
$(".piece").first().removeClass("disabled");
|
||||
// Mostrar instrucciones siempre en un pop de swal js y reproducir audio al abrir el pop
|
||||
if (InstructionsPop) {
|
||||
Swal.fire({
|
||||
html: "<div class=''><h4>Instrucciones</h4><p class='w-100 text-start'>Da clic en cada ícono para leer las preguntas y elige las respuestas correctas. Si respondes correctamente, podrás atrapar al espía.</p><div class='col-12'><div class='row justify-content-center'><div class='col-5 col-md-2'><img src='img/25.1.webp' class='img-fluid'></div><div class='col-5 col-md-2'><img src='img/25.2.webp' class='img-fluid'></div><div class='col-5 col-md-2 my-2 my-md-0'><img src='img/25.3.webp' class='img-fluid'></div><div class='col-5 col-md-2 my-2 my-md-0'><img src='img/25.4.webp' class='img-fluid'></div></div></div></div>",
|
||||
confirmButtonText: "Aceptar",
|
||||
customClass: "swal-instructions",
|
||||
didOpen: () => {
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(audios.instruccions);
|
||||
},
|
||||
didClose: () => {
|
||||
CourseNav.audioController.stopAudio();
|
||||
audios.fondo.loop(true).volume(0.2).play();
|
||||
},
|
||||
});
|
||||
} else {
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(audios.instruccions);
|
||||
}
|
||||
|
||||
// } else {
|
||||
// Mostrar mensaje si se alcanzó el límite de intentos
|
||||
// const maxAttemptsTxt = maxAttempts === Infinity ? "∞" : maxAttempts;
|
||||
// Swal.fire({
|
||||
// icon: "error",
|
||||
// title: "¡Límite de intentos alcanzado!",
|
||||
// html: `
|
||||
// <p>Has alcanzado el límite de intentos.</p>
|
||||
// <p><strong>Intentos realizados:</strong> ${attemptsMade}</p>
|
||||
// <p><strong>Intentos permitidos:</strong> ${maxAttemptsTxt}</p>
|
||||
// `,
|
||||
// confirmButtonText: "Aceptar",
|
||||
// }).then(() => {
|
||||
// CourseNav.resetCourse();
|
||||
// });
|
||||
// }
|
||||
});
|
||||
|
||||
/**
|
||||
* Carga las preguntas desde el archivo Excel y muestra el inicio.
|
||||
*/
|
||||
async function loadAndStartQuiz() {
|
||||
try {
|
||||
await quizManager.loadQuestionsFromExcel();
|
||||
//console.table(quizManager.getAllRenderData());
|
||||
$("#loader-course360").hide();
|
||||
} catch (error) {
|
||||
//console.error("Error al cargar las preguntas:", error);
|
||||
$("#loader-course360").hide(); // Asegurarse de ocultar el loader en caso de error
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Renderiza la pregunta actual en un contenedor específico o en un Swal.
|
||||
* @param {string} containerSelector - Selector del contenedor donde se renderizará la pregunta.
|
||||
* @param {boolean} [useSwal=false] - Si es `true`, muestra la pregunta en un Swal en lugar del contenedor.
|
||||
*/
|
||||
function renderQuestion(containerSelector, useSwal) {
|
||||
const questionData = quizManager.getRenderData();
|
||||
console.log(questionData);
|
||||
if (questionData) {
|
||||
const questionHtml = `
|
||||
<p id="question-text" class="card bg-white text-center fw-bold py-4 px-3">${questionData.text}</p>
|
||||
<ul class="list-unstyled list-options row justify-content-center align-items-center">
|
||||
<li class="col-12 col-md-5 d-flex justify-content-center">
|
||||
<div class="option-btn d-flex flex-row flex-md-column justify-content-center" data-correct="${questionData.options[0].isCorrect}">
|
||||
${questionData.options[0].text}
|
||||
</div>
|
||||
</li>
|
||||
<li class="col-12 col-md-2 d-flex justify-content-center align-items-center">
|
||||
<img src="img/actividad/vs.webp" alt="Versus" class="img-fluid" style="max-height:80px;">
|
||||
</li>
|
||||
<li class="col-12 col-md-5 d-flex justify-content-center">
|
||||
<div class="option-btn d-flex flex-row flex-md-column justify-content-center" data-correct="${questionData.options[1].isCorrect}">
|
||||
${questionData.options[1].text}
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="w-100 d-none justify-content-center">
|
||||
<button id="validate-btn" class="btn btn-primary mt-3">Validar</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
|
||||
if (useSwal) {
|
||||
// Mostrar la pregunta en un Swal
|
||||
Swal.fire({
|
||||
html: questionHtml,
|
||||
showConfirmButton: false,
|
||||
customClass: { popup: "swal-question-popup" },
|
||||
didOpen: () => {
|
||||
const swalContent = Swal.getHtmlContainer(); // Obtiene el contenedor HTML actual de Swal
|
||||
|
||||
// Eliminar cualquier controlador anterior para evitar duplicados
|
||||
$(swalContent)
|
||||
.find(".option-btn")
|
||||
.off("click")
|
||||
.on("click", function () {
|
||||
$("#validate-btn").addClass("animate__animated animate__pulse animate__infinite");
|
||||
if (questionData.multiple) {
|
||||
$(this).toggleClass("selected");
|
||||
} else {
|
||||
$(swalContent).find(".option-btn").removeClass("selected");
|
||||
$(this).addClass("selected");
|
||||
}
|
||||
});
|
||||
|
||||
// Manejar clic en el botón de validación
|
||||
$(swalContent)
|
||||
.find("#validate-btn")
|
||||
.off("click")
|
||||
.on("click", function () {
|
||||
validateAnswers(containerSelector, true);
|
||||
});
|
||||
},
|
||||
});
|
||||
} else {
|
||||
// Renderizar pregunta en el contenedor HTML
|
||||
$(containerSelector).html(questionHtml);
|
||||
|
||||
// Eliminar cualquier controlador anterior en el contenedor antes de agregar nuevos
|
||||
$(containerSelector).off("click", ".option-btn");
|
||||
$(containerSelector).off("click", "#validate-btn");
|
||||
|
||||
// Manejar clic en las opciones
|
||||
$(containerSelector).on("click", ".option-btn", function () {
|
||||
$("#validate-btn").addClass("animate__animated animate__pulse animate__infinite");
|
||||
if (questionData.multiple) {
|
||||
$(this).toggleClass("selected");
|
||||
$('#validate-btn').click();
|
||||
} else {
|
||||
$(containerSelector).find(".option-btn").removeClass("selected");
|
||||
$(this).addClass("selected");
|
||||
$('#validate-btn').click();
|
||||
}
|
||||
});
|
||||
|
||||
// Manejar clic en el botón de validación
|
||||
$(containerSelector).on("click", "#validate-btn", function () {
|
||||
validateAnswers(containerSelector, false);
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Valida las respuestas seleccionadas por el usuario.
|
||||
* @param {string} containerSelector - Selector del contenedor donde se renderiza la pregunta.
|
||||
* @param {boolean} useSwal - Si es `true`, las preguntas se muestran en un Swal.
|
||||
*/
|
||||
function validateAnswers(containerSelector, useSwal) {
|
||||
const questionData = quizManager.getRenderData();
|
||||
const selectedOptions = $(containerSelector).find(".option-btn.selected");
|
||||
const selectedIndexes = selectedOptions.map((index, element) => $(element).parent().index()).get();
|
||||
|
||||
if (questionData.multiple) {
|
||||
// Validar selección múltiple
|
||||
const correctIndexes = questionData.options
|
||||
.map((option, index) => option.isCorrect ? index : -1)
|
||||
.filter(index => index !== -1);
|
||||
|
||||
const allCorrectSelected = correctIndexes.every(index => selectedIndexes.includes(index)) &&
|
||||
selectedIndexes.every(index => correctIndexes.includes(index));
|
||||
|
||||
if (allCorrectSelected) {
|
||||
handleFeedback(true, questionData.correctFeedback || "¡Correcto!", containerSelector, useSwal);
|
||||
} else {
|
||||
handleFeedback(false, questionData.incorrectFeedback || "Incorrecto", containerSelector, useSwal);
|
||||
}
|
||||
} else {
|
||||
// Validar selección única
|
||||
const isCorrect = selectedOptions.length === 1 && selectedOptions.data("correct");
|
||||
const feedback = isCorrect
|
||||
? questionData.correctFeedback || "¡Correcto!"
|
||||
: questionData.incorrectFeedback || "Incorrecto";
|
||||
handleFeedback(isCorrect, feedback, containerSelector, useSwal);
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Maneja la retroalimentación de la respuesta del usuario y realiza acciones posteriores.
|
||||
* @param {boolean} isCorrect - Indica si la respuesta del usuario es correcta.
|
||||
* @param {string} feedback - El texto de retroalimentación que se mostrará.
|
||||
* @param {string} containerSelector - Selector del contenedor o Swal para renderizar la siguiente pregunta.
|
||||
* @param {boolean} useSwal - Si es `true`, las preguntas se muestran en un Swal.
|
||||
*/
|
||||
function handleFeedback(isCorrect, feedback, containerSelector, useSwal) {
|
||||
quizManager.answerCurrentQuestion(isCorrect); // Registra respuesta
|
||||
let imageSwal = "";
|
||||
// const imagesArrayRetro = ["img/actividad/1_esposas.gif", "img/actividad/2_numero.gif", "img/actividad/3_uniformee.gif", "img/actividad/4_celda.gif"];
|
||||
|
||||
if (isCorrect) {
|
||||
// const questionIndex = quizManager.currentQuestionIndex; // Obtener el número de la pregunta actual
|
||||
// imageSwal = imagesArrayRetro[questionIndex % imagesArrayRetro.length]; // Mostrar la imagen correspondiente
|
||||
imageSwal = "img/actividad/correcto.gif";
|
||||
} else {
|
||||
imageSwal = "img/actividad/incorrecto.gif";
|
||||
}
|
||||
|
||||
var html = `<img src="${imageSwal}" class="img-fluid" alt="Feedback Image">`;
|
||||
Swal.fire({
|
||||
html: html,
|
||||
showCloseButton: true,
|
||||
showCancelButton: false,
|
||||
showConfirmButton: false,
|
||||
allowOutsideClick: false,
|
||||
allowEscapeKey: false,
|
||||
allowEnterKey: false,
|
||||
target: $('.mainsco')[0],
|
||||
backdrop: "rgba(25,25,26,.85)",
|
||||
background: "transparent",
|
||||
customClass: { popup: 'pop_course' },
|
||||
willOpen: function () { },
|
||||
didOpen: function () {
|
||||
updateVisualFeedback(isCorrect); // Actualiza visualización
|
||||
$("#validate-btn").removeClass("animate__animated animate__pulse animate__infinite");
|
||||
$(".swal2-close").css("height", "2.2em");
|
||||
},
|
||||
didRender: function () { },
|
||||
didClose: function () {
|
||||
//audios.fondo.loop(true).volume(0.2).play();
|
||||
// Simular clic en la siguiente pieza disponible (pregunta)
|
||||
$("#quiz-container").html("");
|
||||
const time = isCorrect ? 100 : 100;
|
||||
setTimeout(() => {
|
||||
if ($(".piece").length == $(".piece.completed").length) {
|
||||
renderResults("#resume-container");
|
||||
} else {
|
||||
quizManager.getNextQuestion();
|
||||
$(".piece.disabled").first().removeClass("disabled");
|
||||
$(".piece:not(.completed):not(.disabled)").first().click();
|
||||
}
|
||||
}, time);
|
||||
},
|
||||
willClose: function () { }
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Renderiza los resultados finales en un contenedor específico.
|
||||
* @param {string} containerSelector - Selector del contenedor donde se renderizarán los resultados.
|
||||
*/
|
||||
function renderResults(containerSelector) {
|
||||
CourseNav.audioController.stopAudio();
|
||||
$(pageActivity).hide();
|
||||
$(pageSummary).show();
|
||||
|
||||
const summary = quizManager.getSummary();
|
||||
const maxAttempts = quizManager.config.maxAttempts || Infinity; // Intentos máximos desde la configuración
|
||||
const maxAttemptsTxt = maxAttempts === Infinity ? "∞" : maxAttempts;
|
||||
if (summary.passed) {
|
||||
$("body").removeClass("fake-activity").addClass("fake-closing");
|
||||
$(".passed").show();
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(audios.correct);
|
||||
// audios.videogame.volume(0.2);
|
||||
// audios.videogame.play();
|
||||
CourseNav.setSlideVisited();
|
||||
} else {
|
||||
if (quizManager.getAttempts() >= maxAttempts) {
|
||||
$("body").removeClass("fake-activity").addClass("fake-max-attempts");
|
||||
$(".without-attempts").show();
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(audios.attemptLimitReached);
|
||||
} else {
|
||||
$("body").removeClass("fake-activity").addClass("fake-closing");
|
||||
$(".failed").show();
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(audios.incorrect);
|
||||
audios.gameover.volume(0.2);
|
||||
audios.gameover.play();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Actualiza la retroalimentación visual y muestra la siguiente pregunta o resultados finales.
|
||||
* @param {boolean} isCorrect - Indica si la respuesta del usuario es correcta.
|
||||
*/
|
||||
function updateVisualFeedback(isCorrect) {
|
||||
|
||||
// const imagesArray = ["img/actividad/01.png", "img/actividad/02.png", "img/actividad/03.png"];
|
||||
const lastState = $(".visualFeedback").html();
|
||||
if (isCorrect) {
|
||||
const correctAnswersCount = quizManager.currentQuestionIndex;
|
||||
//CourseNav.audioController.stopAllSoundsAndPlay(audios.feedbackCorrect);
|
||||
audios.feedbackCorrect.play();
|
||||
// Cambia la imagen de la pieza actual agregando la 'a' antes del formato
|
||||
const $currentPiece = $(".piece").eq(correctAnswersCount);
|
||||
const $img = $currentPiece.find("img");
|
||||
const src = $img.attr("src");
|
||||
// Reemplaza el nombre del archivo por el mismo nombre con 'a' antes de la extensión
|
||||
const newSrc = src.replace(/(\.[a-z]+)$/i, 'a$1');
|
||||
$img.attr("src", newSrc);
|
||||
} else {
|
||||
// Mostrar la retroalimentación incorrecta
|
||||
//$(".visualFeedback").html(`<img src="img/actividad/error.gif" class="img-fluid">`);
|
||||
//CourseNav.audioController.stopAllSoundsAndPlay(audios.feedbackIncorrect);
|
||||
audios.feedbackIncorrect.play();
|
||||
}
|
||||
}
|
||||
|
||||
// Iniciar audio de introducción
|
||||
audios.introduction.on("end", function () {
|
||||
$("#btn-comenzar").removeClass("disabled").addClass("animate__animated animate__pulse animate__infinite");
|
||||
});
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(audios.introduction);
|
||||
|
||||
// Manejar clic en las piezas
|
||||
$(".piece").click(function () {
|
||||
if ($(this).hasClass("completed") || $(this).hasClass("disabled")) return;
|
||||
const piece = $(this).data("piece");
|
||||
$(this).find("img").removeClass("animate__animated animate__pulse animate__infinite");
|
||||
let containerSelector = "#quiz-container";
|
||||
let useSwal = false;
|
||||
|
||||
// Validar si el contenedor de preguntas está visible
|
||||
if (!$('.pieces-card').is(':visible')) {
|
||||
containerSelector = ".swal-question-popup";
|
||||
useSwal = false;
|
||||
}
|
||||
|
||||
if (!allPiecesCompleted()) {
|
||||
$(this).addClass("completed");
|
||||
//CourseNav.audioController.stopAllSoundsAndPlay(audios.openQuestion);
|
||||
audios.openQuestion.play();
|
||||
renderQuestion(containerSelector, useSwal); // Renderizar la siguiente pregunta
|
||||
} else {
|
||||
renderResults("#resume-container"); // Mostrar resultados finales
|
||||
}
|
||||
});
|
||||
|
||||
// Validar si todas las piezas han sido completadas
|
||||
function allPiecesCompleted() {
|
||||
return $(".piece").length === $(".piece.completed").length;
|
||||
}
|
||||
|
||||
// Reiniciar el curso
|
||||
$("#reiniciar").click(function () {
|
||||
CourseNav.resetCourse();
|
||||
});
|
||||
|
||||
// Reintentar el curso
|
||||
$("#reintentar").click(function () {
|
||||
CourseNav.reload();
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
Reference in New Issue
Block a user