OgestanPre curso completo
This commit is contained in:
@@ -0,0 +1,307 @@
|
||||
<style>
|
||||
.back0 {
|
||||
background-image: url(img/bg00s.jpg);
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.back1 {
|
||||
background-image: url(img/bg01.jpg);
|
||||
background-size: cover;
|
||||
background-position: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.card-back0 {
|
||||
background-color: rgba(189, 204, 212, .3);
|
||||
}
|
||||
|
||||
.grid-custom {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: auto 1fr;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@media(min-width: 768px) {
|
||||
.back0 {
|
||||
background-image: url(img/bg00.jpg);
|
||||
background-position: 30% 100%;
|
||||
}
|
||||
}
|
||||
</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 justify-content-center justify-content-md-end">
|
||||
<div class="col-12 col-md-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-primary fw-bolder">¡Bienvenido a OGestan<sup>®</sup> Pré!</h1>
|
||||
<hr class="m-0 mt-2 opacity-100 border-top-2 text-white">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 text-center mb-3 mb-md-0" 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 px-3 py-1">
|
||||
Comenzar
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-7 text-center d-block d-md-none">
|
||||
<img src="img/01.0.png" class="img-fluid">
|
||||
</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="grid-custom flex-fill">
|
||||
<div class="part0 w-100 d-flex flex-column justify-content-center h-100 align-items-center py-3 py-md-4" style="background-color: rgba(201, 124, 187, .5);">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 col-md-10 col-lg-9" data-sal="slide-right">
|
||||
<div class="card bg-transparent border-0 rounded-0 shadow-none py-2 px-0 text-secondary">
|
||||
<p class="mb-0">Gracias por formar parte de esta sesión dedicada a <strong>OGestan<sup>® </sup>Pré</strong>, una herramienta esencial
|
||||
para acompañar a las mujeres en el momento más importante de su vida reproductiva.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="part1 w-100 d-flex flex-column justify-content-center align-items-center h-100">
|
||||
<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 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.1.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-purple-1 fw-medium">¿Qué aprenderás hoy?</h2>
|
||||
<p class="mb-0">Al finalizar este módulo, <strong class="text-blue-1">podrás identificar y explicar</strong> los elementos fundamentales de
|
||||
OGestan<sup>®</sup> Pré, incluyendo qué es, a quién está dirigido, cuáles son sus beneficios y cómo se diferencia de
|
||||
la competencia, para comunicar su valor clínico y comercial de manera más efectiva.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(function () {
|
||||
"use strict";
|
||||
|
||||
const audiom00 = CourseNav.createSound('audio/audiom00.mp3');
|
||||
const audiom01 = CourseNav.createSound('audio/audiom01.mp3');
|
||||
|
||||
audiom00.on('end',function(){
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(audiom01);
|
||||
$('.apa0').show();
|
||||
});
|
||||
|
||||
audiom01.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(audiom00);
|
||||
$(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,288 @@
|
||||
<style>
|
||||
.back0 {
|
||||
background-image: url(img/bg02.jpg);
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.back1 {
|
||||
background-image: url(img/bg03.jpg);
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.apa0 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.grid-containter-expandible {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 540px;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.expandible-card {
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
flex: 0 0 80px;
|
||||
transition: flex 0.5s ease, height 0.5s ease;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, .5);
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.expandible-card.selected {
|
||||
flex: 1;
|
||||
height: 360px;
|
||||
}
|
||||
|
||||
.expandible-content {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: 80px 1fr;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.e-col-r {
|
||||
display: none;
|
||||
border-top-right-radius: 1rem;
|
||||
border-bottom-right-radius: 1rem;
|
||||
border-bottom-left-radius: 1rem;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.e-col-l img {
|
||||
max-width: 20%;
|
||||
}
|
||||
|
||||
.expandible-card.selected .e-col-r {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@media(min-width: 768px) {
|
||||
.grid-containter-expandible {
|
||||
flex-direction: row;
|
||||
height: 510px;
|
||||
}
|
||||
|
||||
.expandible-card {
|
||||
width: 90px;
|
||||
height: 100%;
|
||||
flex: 0 0 90px;
|
||||
}
|
||||
|
||||
.expandible-card.selected {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.expandible-content {
|
||||
grid-template-columns: 90px 1fr;
|
||||
grid-template-rows: auto;
|
||||
}
|
||||
|
||||
.e-col-l img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.e-col-r {
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media(min-width: 991px) {
|
||||
.grid-containter-expandible {
|
||||
height: 430px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div class='page-sco py-2 py-md-4 back0'>
|
||||
<div class='container'>
|
||||
<div class='row justify-content-center align-items-center'>
|
||||
<div class='col-12 apa0'>
|
||||
<div class='row justify-content-center'>
|
||||
<div class="col-12 text-white animate__animated animate__lightSpeedInLeft">
|
||||
<h2 class="text-pink-3 fw-bold text-center text-md-start">¿Qué es OGestan<sup class="text-pink-3">®</sup> Pré?</h2>
|
||||
<p class="animate__animated animate__zoomIn"><strong>OGestan</strong><sup><strong>® </strong></sup><strong>Pré</strong> es un <strong>suplemento alimenticio en
|
||||
cápsulas</strong> que combina <strong>L-</strong><strong>metilfolato</strong><strong>, folato, vitaminas y
|
||||
minerales</strong>, diseñado especialmente para acompañar las necesidades nutricionales de <strong>todas las mujeres
|
||||
en edad fértil</strong> y durante el <strong>primer trimestre del embarazo</strong>.</p>
|
||||
<p class="mb-0 animate__animated animate__lightSpeedInLeft animate__delay-15s">Su fórmula está orientada a brindar apoyo en las etapas más tempranas del desarrollo, cuando la suplementación es
|
||||
clave para lograr una concepción saludable.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-100 py-3 py-md-4 text-center next-action bg-white" style="display: none;">
|
||||
<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 id="sec1" class='page-sco py-2 py-md-4 back1' 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">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12">
|
||||
<div class="grid-containter-expandible">
|
||||
<!--Expandible 1-->
|
||||
<div class="expandible-card bg-pink-1 animate__animated animate__pulse animate__infinite">
|
||||
<div class="expandible-content">
|
||||
<div
|
||||
class="e-col-l punta0 position-relative w-100 h-100 d-flex flex-row justify-content-center align-items-center align-items-md-end">
|
||||
<img src="img/02.3.png" class="img-fluid">
|
||||
</div>
|
||||
<div
|
||||
class="e-col-r position-relative w-100 h-100 flex-row justify-content-center align-items-center px-3 py-2 bg-pink-1">
|
||||
<div class="col-12">
|
||||
<div class="row justify-content-center align-items-center">
|
||||
<div class="col-12 col-lg-6 text-white mb-3 mb-lg-0">
|
||||
<h3 class="fw-bold">Presentación Comercial</h3>
|
||||
<p class="mb-0">Caja de cartón con <strong>30 cápsulas de 1.278gr.</strong> cada una.</p>
|
||||
</div>
|
||||
<div class="col-5 col-md-5 col-lg-6 text-center">
|
||||
<img src="img/02.0.png" class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--Expandible 2-->
|
||||
<div class="expandible-card bg-blue-1 animate__animated animate__pulse animate__infinite">
|
||||
<div class="expandible-content">
|
||||
<div
|
||||
class="e-col-l punta1 position-relative w-100 h-100 d-flex flex-row justify-content-center align-items-center align-items-md-end">
|
||||
<img src="img/02.4.png" class="img-fluid">
|
||||
</div>
|
||||
<div
|
||||
class="e-col-r position-relative w-100 h-100 flex-row justify-content-center align-items-center px-3 py-2 bg-blue-1">
|
||||
<div class="col-12">
|
||||
<div class="row justify-content-center align-items-center">
|
||||
<div class="col-12 col-lg-6 text-white mb-3 mb-lg-0">
|
||||
<h3 class="fw-bold">Indicación</h3>
|
||||
<p class="mb-0">OGestan<sup>®</sup> Pré está indicado como <strong>suplemento alimenticio para todas las mujeres en edad
|
||||
fértil</strong> y durante el <strong>1er trimestre del embarazo</strong>.</p>
|
||||
</div>
|
||||
<div class="col-5 col-md-5 col-lg-6 text-center">
|
||||
<img src="img/02.1.png" class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--Expandible 3-->
|
||||
<div class="expandible-card bg-primary animate__animated animate__pulse animate__infinite">
|
||||
<div class="expandible-content">
|
||||
<div
|
||||
class="e-col-l punta2 position-relative w-100 h-100 d-flex flex-row justify-content-center align-items-center align-items-md-end">
|
||||
<img src="img/02.5.png" class="img-fluid">
|
||||
</div>
|
||||
<div
|
||||
class="e-col-r position-relative w-100 h-100 flex-row justify-content-center align-items-center px-3 py-2 bg-primary">
|
||||
<div class="col-12">
|
||||
<div class="row justify-content-center align-items-center">
|
||||
<div class="col-12 col-lg-6 text-white mb-3 mb-lg-0">
|
||||
<h3 class="fw-bold">Modo de Empleo</h3>
|
||||
<ul class="mb-0 bul0">
|
||||
<li>Se recomienda ingerir <strong>1 cápsula al día</strong>, junto con alguno de los alimentos del día.</li>
|
||||
<li><strong>No exceder</strong> la porción máxima recomendada.</li>
|
||||
<li>Uso recomendado a partir de los <strong>18 años</strong>.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-5 col-md-5 col-lg-6 text-center">
|
||||
<img src="img/02.2.png" class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(function () {
|
||||
"use strict";
|
||||
|
||||
const audiom02 = CourseNav.createSound('audio/audiom02.mp3');
|
||||
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(audiom02);
|
||||
|
||||
const paths = [
|
||||
"audio/audiom03.mp3",
|
||||
"audio/audiom04.mp3",
|
||||
"audio/audiom05.mp3"
|
||||
];
|
||||
let audios = [];
|
||||
paths.forEach(function (element) {
|
||||
audios.push(CourseNav.createSound(element));
|
||||
});
|
||||
|
||||
audiom02.on('play',function(){
|
||||
$('.apa0').show();
|
||||
});
|
||||
|
||||
audiom02.on('end',function(){
|
||||
$('.next-action').show();
|
||||
});
|
||||
|
||||
$('.btn-next-section').click(function () {
|
||||
$(this).removeClass('animate__animated animate__pulse animate__infinite');
|
||||
gotoSection($(this).data('sec'));
|
||||
$(this).parent().hide();
|
||||
|
||||
const audioName = $(this).data('audio');
|
||||
if (audioName) {
|
||||
setTimeout(() => {
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(eval(audioName));
|
||||
}, 500);
|
||||
} else {
|
||||
CourseNav.soundClick();
|
||||
}
|
||||
|
||||
// Autoclic en el primer expandible-card después del scroll
|
||||
setTimeout(() => {
|
||||
const firstCard = $('.expandible-card').first();
|
||||
firstCard.trigger('click');
|
||||
}, 600);
|
||||
});
|
||||
|
||||
$('.expandible-card').click(function () {
|
||||
if ($(this).hasClass('selected')) return;
|
||||
const cards = $('.expandible-card');
|
||||
const selectedIndex = $(this).index();
|
||||
cards.removeClass('selected');
|
||||
$(this).addClass('selected completed');
|
||||
$(this).removeClass('animate__animated animate__pulse animate__infinite');
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(audios[selectedIndex]);
|
||||
|
||||
if (cards.length === $('.expandible-card.completed').length) {
|
||||
CourseNav.setSlideVisited();
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,348 @@
|
||||
<style>
|
||||
.back0 {
|
||||
background-image: url(img/bg04.jpg);
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.back1 {
|
||||
background-image: url(img/bg04.jpg);
|
||||
background-size: cover;
|
||||
background-position: bottom center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.text-info-p {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.bg-grp {
|
||||
background: #6D2778;
|
||||
background: linear-gradient(to left, #6D2778 0%, #CB198E 100%);
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, .5);
|
||||
}
|
||||
|
||||
.bg-textss {
|
||||
background-color: #fff;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.group-class:nth-child(2) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.group-class:nth-child(1) {
|
||||
width: 45%;
|
||||
}
|
||||
|
||||
.hand-move {
|
||||
display: none;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 0 auto;
|
||||
z-index: 10;
|
||||
animation: moveLeftRight 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.apa0, .apa1, .apa2, .apa3 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.bg-color {
|
||||
background-color: rgba(201, 124, 187, .5);
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, .5);
|
||||
}
|
||||
|
||||
@keyframes moveLeftRight {
|
||||
0% {
|
||||
transform: translateX(-20px);
|
||||
}
|
||||
50% {
|
||||
transform: translateX(20px);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(-20px);
|
||||
}
|
||||
}
|
||||
|
||||
@media(min-width: 768px) {
|
||||
.group-class:nth-child(1) {
|
||||
width: 30%;
|
||||
}
|
||||
}
|
||||
|
||||
@media(min-width: 991px) {
|
||||
.group-class:nth-child(2) {
|
||||
width: 65%;
|
||||
padding-right: 2rem;
|
||||
}
|
||||
|
||||
.group-class:nth-child(1) {
|
||||
max-width: 30%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div class='page-sco py-2 py-md-0 back0'>
|
||||
<div class='container'>
|
||||
<div class='row justify-content-center align-items-center'>
|
||||
<div class='col-12 apa0'>
|
||||
<div class='row justify-content-center'>
|
||||
<div class="col-12 mb-3 text-center animate__animated animate__bounceInDown">
|
||||
<h2 class="text-primary fw-bold mb-0">Componentes y sus beneficios</h2>
|
||||
</div>
|
||||
<div class="col-12 col-xl-10 apa1 animate__animated animate__zoomIn">
|
||||
<div class="content-slides p-2">
|
||||
<div class="body-slides p-3">
|
||||
<div
|
||||
class="flex-content-swiper d-flex flex-wrap justify-content-center align-items-center gap-2 gap-md-3 gap-lg-2 text-center text-lg-start">
|
||||
<div id="decoImg" class="decoracion-img group-class position-relative text-center disabled">
|
||||
<div class="hand-move position-absolute">
|
||||
<i class="fa-solid fa-hand-back-point-down fa-rotate-180 display-3 fw-bolder text-blue-1"></i>
|
||||
</div>
|
||||
<div class="swiper sw-cards">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide">
|
||||
<img src="img/03.0.png" class="img-fluid">
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<img src="img/03.1.png" class="img-fluid">
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<img src="img/03.2.png" class="img-fluid">
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<img src="img/03.3.png" class="img-fluid">
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<img src="img/03.4.png" class="img-fluid">
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<img src="img/03.5.png" class="img-fluid">
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<img src="img/03.6.png" class="img-fluid">
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<img src="img/03.7.png" class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group-class bg-grp mb-2 mb-lg-0 p-2">
|
||||
<div id="texts" class="texts-parent bg-textss px-3 py-5">
|
||||
<div class="text-info-p text-center animate__animated animate__zoomIn">
|
||||
<p class="mb-0">Disminuye potencialmente el <strong class="text-secondary">riesgo de defectos en el tubo
|
||||
neural</strong></p>
|
||||
</div>
|
||||
<div class="text-info-p text-center animate__animated animate__zoomIn">
|
||||
<p class="mb-0">Ayuda a desarrollar <strong class="text-secondary">huesos fuertes</strong>. Modula el <strong
|
||||
class="text-secondary">sistema inmune</strong> y
|
||||
la
|
||||
<strong class="text-secondary">secreción de insulina</strong>.
|
||||
</p>
|
||||
</div>
|
||||
<div class="text-info-p text-center animate__animated animate__zoomIn">
|
||||
<p class="mb-0">Actúa sobre el <strong class="text-secondary">metabolismo de aminoácidos</strong>, la <strong
|
||||
class="text-secondary">glucosa</strong> y los
|
||||
<strong class="text-secondary">lípidos</strong>.
|
||||
</p>
|
||||
</div>
|
||||
<div class="text-info-p text-center animate__animated animate__zoomIn">
|
||||
<p class="mb-0">Apoya en la <strong class="text-secondary">formación de glóbulos rojos</strong> y <strong
|
||||
class="text-secondary">previene la anemia</strong>.
|
||||
</p>
|
||||
</div>
|
||||
<div class="text-info-p text-center animate__animated animate__zoomIn">
|
||||
<p class="mb-0">Actúa como <strong class="text-secondary">antioxidante</strong>, ayuda a <strong
|
||||
class="text-secondary">combatir infecciones</strong> y apoya
|
||||
la
|
||||
<strong class="text-secondary">absorción del hierro</strong>.
|
||||
</p>
|
||||
</div>
|
||||
<div class="text-info-p text-center animate__animated animate__zoomIn">
|
||||
<p class="mb-0">Actúa como <strong class="text-secondary">antioxidante</strong> y <strong
|
||||
class="text-secondary">facilita la implantación</strong> del óvulo
|
||||
fecundado.</p>
|
||||
</div>
|
||||
<div class="text-info-p text-center animate__animated animate__zoomIn">
|
||||
<p class="mb-0"><strong class="text-secondary">Madura los ovocitos</strong> y apoya el <strong
|
||||
class="text-secondary">cierre del tubo neural</strong> en las
|
||||
primeras etapas del desarrollo.</p>
|
||||
</div>
|
||||
<div class="text-info-p text-center animate__animated animate__zoomIn">
|
||||
<p class="mb-0">Reduce el <strong class="text-secondary">tiempo de preconcepción</strong>. Tiene efecto <strong
|
||||
class="text-secondary">antiinflamatorio y
|
||||
antioxidante</strong>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-100 py-3 py-md-4 text-center next-action bg-white" style="display: none;">
|
||||
<div class="btn-next-section d-inline-block animate__animated animate__pulse animate__infinite" data-sec="sec1"
|
||||
data-audio="audiom15"
|
||||
>
|
||||
<img src="img/nSec.png" class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="sec1" class='page-sco py-2 py-md-4 back1' style="display: none;">
|
||||
<div class='container'>
|
||||
<div class='row justify-content-center align-items-center'>
|
||||
<div class='col-12 apa2'>
|
||||
<div class='row justify-content-center'>
|
||||
<div class="col-12 col-lg-10">
|
||||
<div class="card bg-color border-0 rounded-4 p-3">
|
||||
<div class="row justify-content-center align-items-center">
|
||||
<div class="col-7 col-md-5 text-center order-2 order-md-1 animate__animated animate__flipInY">
|
||||
<img src="img/03.8.png" class="img-fluid">
|
||||
</div>
|
||||
<div class="col-12 col-md-7 col-lg-6 order-1 order-md-2 mb-3 mb-md-0 animate__animated animate__lightSpeedInRight">
|
||||
<p>Para todas las mujeres en <strong class="text-secondary">edad fértil</strong>, y en el <strong
|
||||
class="text-secondary">1er trimestre del embarazo</strong>. la
|
||||
suplementación con una combinación como la de <strong class="text-secondary">OGestan<sup>® </sup>Pré</strong> aporta
|
||||
</p>
|
||||
<ul class="apa3">
|
||||
<li class="animate__animated animate__fadeInUp animate__delay-5s">La <strong class="text-secondary">forma activa del ácido fólico</strong>.</li>
|
||||
<li class="animate__animated animate__fadeInUp animate__delay-10s">Un <strong class="text-secondary">aumento en la probabilidad de la concepción</strong>.</li>
|
||||
<li class="animate__animated animate__fadeInUp animate__delay-12s">Una <strong class="text-secondary">mayor probabilidad de embarazo a término</strong>.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(function () {
|
||||
"use strict";
|
||||
|
||||
const audiom06 = CourseNav.createSound('audio/audiom06.mp3');
|
||||
const audiom15 = CourseNav.createSound('audio/audiom15.mp3');
|
||||
const audiom16 = CourseNav.createSound('audio/audiom16.mp3');
|
||||
|
||||
const audios = [
|
||||
CourseNav.createSound('audio/audiom07.mp3'),
|
||||
CourseNav.createSound('audio/audiom08.mp3'),
|
||||
CourseNav.createSound('audio/audiom09.mp3'),
|
||||
CourseNav.createSound('audio/audiom10.mp3'),
|
||||
CourseNav.createSound('audio/audiom11.mp3'),
|
||||
CourseNav.createSound('audio/audiom12.mp3'),
|
||||
CourseNav.createSound('audio/audiom13.mp3'),
|
||||
CourseNav.createSound('audio/audiom14.mp3'),
|
||||
];
|
||||
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(audiom06);
|
||||
|
||||
audiom06.on('play',function(){
|
||||
$('.apa0').show();
|
||||
});
|
||||
|
||||
audiom15.on('play', function () {
|
||||
$('.apa2').show();
|
||||
});
|
||||
|
||||
audiom15.on('end', function () {
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(audiom16);
|
||||
$('.apa3').show();
|
||||
});
|
||||
|
||||
audiom16.on('end',function(){
|
||||
CourseNav.setSlideVisited();
|
||||
});
|
||||
|
||||
let currentIndex = 0;
|
||||
const textElements = $('.text-info-p');
|
||||
let swiper;
|
||||
|
||||
$('.btn-next-section').click(function () {
|
||||
$(this).removeClass('animate__animated animate__pulse animate__infinite');
|
||||
gotoSection($(this).data('sec'));
|
||||
$(this).parent().hide();
|
||||
|
||||
const audioName = $(this).data('audio');
|
||||
if (audioName) {
|
||||
setTimeout(() => {
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(eval(audioName));
|
||||
}, 500);
|
||||
} else {
|
||||
CourseNav.soundClick();
|
||||
}
|
||||
});
|
||||
|
||||
// Función para cambiar a un slide específico
|
||||
function goToSlide(index) {
|
||||
if (index >= 0 && index < audios.length) {
|
||||
currentIndex = index;
|
||||
|
||||
// Ocultar todos los textos y mostrar el correspondiente
|
||||
textElements.hide();
|
||||
$(textElements[currentIndex]).show();
|
||||
|
||||
// Reproducir audio correspondiente
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(audios[currentIndex]);
|
||||
}
|
||||
}
|
||||
|
||||
audiom06.on('end', function () {
|
||||
$('.apa1').show();
|
||||
|
||||
// Inicializar Swiper después de mostrar el elemento
|
||||
swiper = new Swiper('.sw-cards', {
|
||||
effect: 'cards',
|
||||
grabCursor: true,
|
||||
centeredSlides: true,
|
||||
slidesPerView: 'auto',
|
||||
threshold: 5,
|
||||
shortSwipes: true,
|
||||
longSwipes: true,
|
||||
longSwipesRatio: 0.2,
|
||||
longSwipesMs: 200,
|
||||
followFinger: true,
|
||||
allowTouchMove: true,
|
||||
touchRatio: 1.5,
|
||||
touchAngle: 45,
|
||||
cardsEffect: {
|
||||
perSlideOffset: 6,
|
||||
perSlideRotate: 2,
|
||||
rotate: true,
|
||||
slideShadows: false,
|
||||
},
|
||||
on: {
|
||||
touchStart: function () {
|
||||
$('.hand-move').hide();
|
||||
},
|
||||
slideChange: function () {
|
||||
const newIndex = this.activeIndex;
|
||||
if (newIndex < audios.length) {
|
||||
goToSlide(newIndex);
|
||||
if (newIndex === audios.length - 1) {
|
||||
$('.next-action').show();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Mostrar primer texto y reproducir primer audio
|
||||
$(textElements[0]).show();
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(audios[0]);
|
||||
$('.decoracion-img').removeClass('disabled');
|
||||
$('.hand-move').show();
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,157 @@
|
||||
<style>
|
||||
.fake {
|
||||
background-image: url(img/bg05.jpg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.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: linear-gradient(180deg, #634577, #813e70);
|
||||
border-radius: 10px;
|
||||
box-shadow: 0px 0px 10px 0px #d0f0ff;
|
||||
}
|
||||
|
||||
#video {
|
||||
z-index: 99;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
|
||||
.play-button-container button {
|
||||
pointer-events: all;
|
||||
border: none;
|
||||
background: none;
|
||||
border: solid 3px #6a217f;
|
||||
padding: 10px 18px !important;
|
||||
border-radius: 90px;
|
||||
}
|
||||
|
||||
h1 .fa-regular {
|
||||
background: linear-gradient(45deg, #ffffff, #ffffff);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
font-weight: 500;
|
||||
left: 0px;
|
||||
position: relative;
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
|
||||
@media(min-width: 768px) {
|
||||
.content-gls {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.play-button-container button {
|
||||
pointer-events: all;
|
||||
border: none;
|
||||
background: none;
|
||||
border: solid 8px #fff;
|
||||
padding: 15px 30px !important;
|
||||
border-radius: 90px;
|
||||
}
|
||||
|
||||
h1 .fa-regular {
|
||||
background: linear-gradient(45deg, #ffffff, #ffffff);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
font-weight: 500;
|
||||
left: 10px;
|
||||
position: relative;
|
||||
font-size: 111px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div class='page-sco'>
|
||||
<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 text-center animate__animated animate__rotateInDownRight">
|
||||
<h2 class="my-0 text-pink-1 fw-bold">Información Nutricional</h2>
|
||||
</div>
|
||||
<div class="col-12 col-md-10 col-lg-6 animate__animated animate__zoomIn my-3">
|
||||
<div class="w-100">
|
||||
<div class="ratio ratio-16x9">
|
||||
<video id="video" class="embed-responsive-item" controls autoplay poster="video/poster.jpg">
|
||||
<source src="video/dummy.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">
|
||||
<h1 class="my-0"><i class="fa-regular fa-play fa-3x text-primary"></i></h1>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(function () {
|
||||
"use strict";
|
||||
$('.page-sco').addClass('fake');
|
||||
$('#scroll-indicator').css('display', 'none');
|
||||
|
||||
|
||||
setTimeout(function () {
|
||||
$("#btn_video").removeClass("disabled");
|
||||
$(".i0").show();
|
||||
}, 200);
|
||||
|
||||
var video = document.getElementById("video");
|
||||
var btnVideo = document.getElementById("btn_video");
|
||||
|
||||
video.play();
|
||||
video.addEventListener("play", function () {
|
||||
$(".play-button-container").hide(); // Ocultar el contenedor de botón de reproducción
|
||||
});
|
||||
// Evitar la reproducción del video al hacer clic end 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 () {
|
||||
$('.i0').hide();
|
||||
CourseNav.setSlideVisited();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,272 @@
|
||||
<style>
|
||||
.back0 {
|
||||
background-image: url(img/bg06.jpg);
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.shadow-vx {
|
||||
max-width: 100%;
|
||||
box-shadow: 0 0 15px rgba(0,0,0,.5);
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.cid1 .swiper-wrapper {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.bg-adorno {
|
||||
background: rgba(255,255,255,.1);
|
||||
background: linear-gradient(to right, rgba(255,255,255,.1) 0%, rgba(255,255,255,.4) 100%);
|
||||
border: 3px solid #fff;
|
||||
}
|
||||
|
||||
.btn-arrow {
|
||||
max-width: 85px;
|
||||
}
|
||||
|
||||
.apa0, .apa1 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media(min-width: 991px) {
|
||||
.shadow-vx {
|
||||
max-width: 76%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div class='page-sco py-2 py-md-4 back0'>
|
||||
<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 apa0 animate__animated animate__fadeInDown">
|
||||
<h2 class="fw-bold text-blue-1">Competidores</h2>
|
||||
</div>
|
||||
<div class="col-12 apa1 animate__animated animate__zoomIn">
|
||||
<div class="d-flex flex-wrap flex-md-row justify-content-center align-items-center gap-2">
|
||||
<div class="btn-prev btn-arrow d-inline-block order-2 order-lg-1 me-5 me-lg-0">
|
||||
<img src="img/05.7.png" class="img-fluid">
|
||||
</div>
|
||||
<div class="position-relative shadow-vx flex-fill order-1 order-lg-2 rounded-3">
|
||||
<div class="swiper cid1">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide visited completed">
|
||||
<div class="card bg-adorno px-3 py-4">
|
||||
<div class="row justify-content-center align-items-center py-2">
|
||||
<div class="col-12 col-md-8 col-lg-7 col-xl-6 mb-3 mb-lg-0">
|
||||
<h3 class="fw-medium text-purple-1">A.F. Valdecasas </h3>
|
||||
<ul class="mb-0 bul1">
|
||||
<li>Fórmula basada <strong class="text-secondary">solo en ácido fólico</strong>.</li>
|
||||
<li>Ofrece un soporte <strong class="text-secondary">muy limitado para la preconcepción</strong>.</li>
|
||||
<li><strong class="text-secondary">No incluye antioxidantes ni minerales esenciales</strong>.</li>
|
||||
<li><strong class="text-secondary">No cubre</strong> las necesidades nutrimentales del <strong class="text-secondary">primer trimestre</strong>.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-7 col-md-4 col-lg-5 col-xl-4 text-center">
|
||||
<img src="img/05.0.png" class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<div class="card bg-adorno px-3 py-4">
|
||||
<div class="row justify-content-center align-items-center py-2">
|
||||
<div class="col-12 col-md-8 col-lg-7 col-xl-6 mb-3 mb-lg-0">
|
||||
<h3 class="fw-medium text-purple-1">Cilocid</h3>
|
||||
<ul class="mb-0 bul1">
|
||||
<li>Enfocado en <strong class="text-secondary">ácido fólico tradicional</strong>.</li>
|
||||
<li>Opción accesible, pero <strong class="text-secondary">con formulación reducida</strong>.</li>
|
||||
<li><strong class="text-secondary">Carece de vitaminas antioxidantes y minerales clave</strong>.</li>
|
||||
<li>Su soporte es <strong class="text-secondary">insuficiente</strong> para preconcepción y embarazo temprano.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-7 col-md-4 col-lg-5 col-xl-4 text-center">
|
||||
<img src="img/05.1.png" class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<div class="card bg-adorno px-3 py-4">
|
||||
<div class="row justify-content-center align-items-center py-2">
|
||||
<div class="col-12 col-md-8 col-lg-7 col-xl-6 mb-3 mb-lg-0">
|
||||
<h3 class="fw-medium text-purple-1">FoliVital</h3>
|
||||
<ul class="mb-0 bul1">
|
||||
<li>Producto centrado en <strong class="text-secondary">ácido fólico únicamente</strong>.</li>
|
||||
<li>Carece de un <strong class="text-secondary">perfil completo de vitaminas y minerales</strong>.</li>
|
||||
<li>Proporciona apoyo <strong class="text-secondary">limitado al desarrollo temprano</strong>.</li>
|
||||
<li>Menos adecuado para <strong class="text-secondary">las necesidades específicas del embarazo inicial</strong>.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-7 col-md-4 col-lg-5 col-xl-4 text-center">
|
||||
<img src="img/05.2.png" class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<div class="card bg-adorno px-3 py-4">
|
||||
<div class="row justify-content-center align-items-center py-2">
|
||||
<div class="col-12 col-md-8 col-lg-7 col-xl-6 mb-3 mb-lg-0">
|
||||
<h3 class="fw-medium text-purple-1">Bebistan</h3>
|
||||
<ul class="mb-0 bul1">
|
||||
<li>Multivitamínico general con <strong class="text-secondary">composición básica</strong>.</li>
|
||||
<li>No está formulado para <strong class="text-secondary">preconcepción ni primer trimestre</strong>.</li>
|
||||
<li>Su perfil nutrimental es <strong class="text-secondary">limitado frente a fórmulas completas</strong>.</li>
|
||||
<li>No cubre requerimientos <strong class="text-secondary">críticos del desarrollo temprano</strong>.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-7 col-md-4 col-lg-5 col-xl-4 text-center">
|
||||
<img src="img/05.3.png" class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<div class="card bg-adorno px-3 py-4">
|
||||
<div class="row justify-content-center align-items-center py-2">
|
||||
<div class="col-12 col-md-8 col-lg-7 col-xl-6 mb-3 mb-lg-0">
|
||||
<h3 class="fw-medium text-purple-1">reGenesis Max</h3>
|
||||
<ul class="mb-0 bul1">
|
||||
<li>Enfocado en embarazo, pero <strong class="text-secondary">variable en su composición</strong>.</li>
|
||||
<li>Puede incluir omegas, aunque <strong class="text-secondary">no de forma consistente</strong>.</li>
|
||||
<li><strong class="text-secondary">No integra complejo B completo, antioxidantes ni minerales esenciales</strong>.</li>
|
||||
<li>Su aporte es <strong class="text-secondary">menos específico</strong> para el inicio del embarazo.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-7 col-md-4 col-lg-5 col-xl-4 text-center">
|
||||
<img src="img/05.4.png" class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<div class="card bg-adorno px-3 py-4">
|
||||
<div class="row justify-content-center align-items-center py-2">
|
||||
<div class="col-12 col-md-8 col-lg-7 col-xl-6 mb-3 mb-lg-0">
|
||||
<h3 class="fw-medium text-purple-1">Previta Mom</h3>
|
||||
<ul class="mb-0 bul1">
|
||||
<li>Suplemento prenatal con <strong class="text-secondary">perfil general</strong> de vitaminas y minerales.</li>
|
||||
<li>Puede tener <strong class="text-secondary">menor diversidad de nutrimentos</strong> frente a opciones más completas.</li>
|
||||
<li><strong class="text-secondary">Limitado en antioxidantes</strong> y algunos minerales clave.</li>
|
||||
<li>No está optimizado específicamente para <strong class="text-secondary">preconcepción y primer trimestre</strong>.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-7 col-md-4 col-lg-5 col-xl-4 text-center">
|
||||
<img src="img/05.5.png" class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<div class="card bg-adorno px-3 py-4">
|
||||
<div class="row justify-content-center align-items-center py-2">
|
||||
<div class="col-12 col-md-8 col-lg-7 col-xl-6 mb-3 mb-lg-0">
|
||||
<h3 class="fw-medium text-purple-1">Nocele</h3>
|
||||
<ul class="mb-0 bul1">
|
||||
<li>Basado principalmente en <strong class="text-secondary">ácido fólico y nutrimentos básicos</strong>.</li>
|
||||
<li>Su fórmula es <strong class="text-secondary">limitada para cubrir necesidades metabólicas complejas</strong>.</li>
|
||||
<li><strong class="text-secondary">No incluye antioxidantes ni complejo B completo</strong>.</li>
|
||||
<li>Proporciona un soporte <strong class="text-secondary">menos integral</strong> para el periodo preconcepcional y las primeras semanas.
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-7 col-md-4 col-lg-5 col-xl-4 text-center">
|
||||
<img src="img/05.6.png" class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-next btn-arrow rounded-circle d-inline-block order-2 order-lg-3 animate__animated animate__pulse animate__infinite">
|
||||
<img src="img/05.8.png" class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(function () {
|
||||
"use strict";
|
||||
|
||||
const audiom17 = CourseNav.createSound('audio/audiom17.mp3');
|
||||
|
||||
const paths = [
|
||||
"audio/audiom18.mp3",
|
||||
"audio/audiom19.mp3",
|
||||
"audio/audiom20.mp3",
|
||||
"audio/audiom21.mp3",
|
||||
"audio/audiom22.mp3",
|
||||
"audio/audiom23.mp3",
|
||||
"audio/audiom24.mp3"
|
||||
];
|
||||
let audios = [];
|
||||
paths.forEach(function (element) {
|
||||
audios.push(CourseNav.createSound(element));
|
||||
});
|
||||
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(audiom17);
|
||||
|
||||
audiom17.on('play', function () {
|
||||
$('.apa0').show();
|
||||
});
|
||||
|
||||
audiom17.on('end', function () {
|
||||
$('.apa1').show();
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(audios[0]);
|
||||
});
|
||||
|
||||
const mySwiper = new Swiper(".cid1", {
|
||||
effect: "slide",
|
||||
autoHeight: true,
|
||||
slidesPerView: 1, // Mobile: 1 slide a la vez
|
||||
spaceBetween: 20,
|
||||
navigation: {
|
||||
nextEl: '.btn-next',
|
||||
prevEl: '.btn-prev',
|
||||
},
|
||||
on: {
|
||||
init: function () {
|
||||
// Ocultar prev en el primer slide
|
||||
$('.btn-prev').css('opacity', '.5').addClass('disabled');
|
||||
},
|
||||
slideChange: function () {
|
||||
const activeIndex = this.activeIndex;
|
||||
const slides = this.slides;
|
||||
const totalSlides = this.slides.length;
|
||||
|
||||
// Controlar opacidad y clase disabled de botones
|
||||
if (activeIndex === 0) {
|
||||
$('.btn-prev').css('opacity', '.5').addClass('disabled');
|
||||
} else {
|
||||
$('.btn-prev').css('opacity', '1').removeClass('disabled');
|
||||
}
|
||||
|
||||
if (activeIndex === totalSlides - 1) {
|
||||
$('.btn-next').css('opacity', '.5').addClass('disabled');
|
||||
} else {
|
||||
$('.btn-next').css('opacity', '1').removeClass('disabled');
|
||||
}
|
||||
|
||||
slides[activeIndex].classList.add("visited", "completed");
|
||||
|
||||
const completedSlides = $(".cid1 .swiper-slide.completed").length;
|
||||
|
||||
if (completedSlides == totalSlides) {
|
||||
$('.btn-next').removeClass('animate__animated animate__pulse animate__infinite');
|
||||
CourseNav.setSlideVisited();
|
||||
}
|
||||
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(audios[activeIndex]);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,634 @@
|
||||
<script src="js/QuizManager.min.js"></script>
|
||||
|
||||
<style>
|
||||
.fake {
|
||||
background-image: url("img/actividad/fondo-inicio.jpg");
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
.fakedesarrollo {
|
||||
background-image: url("img/actividad/fondo-inicio.jpg");
|
||||
}
|
||||
|
||||
.fakecierre {
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
.page-activity {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#inicio {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#quiz-container {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
|
||||
.results {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.results h2 {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
|
||||
.swal2-popup.swal2-show.pop-retro {
|
||||
background-color: transparent !important;
|
||||
background: transparent !important;
|
||||
border-radius: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.custom-card {
|
||||
border-radius: 15px;
|
||||
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
|
||||
}
|
||||
|
||||
#desarrollo {
|
||||
min-height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.trophy img {
|
||||
|
||||
max-width: 85%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
|
||||
.asesor {
|
||||
margin-top: 0;
|
||||
max-width: 70px;
|
||||
}
|
||||
|
||||
.pregunta {
|
||||
color: var(--bs-primary);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* ============================================================================================================================
|
||||
== PINCHED SPEECH BUBBLE (more CSS3)
|
||||
** ============================================================================================================================ */
|
||||
|
||||
.pinched {
|
||||
position: relative;
|
||||
padding: 15px;
|
||||
margin: 50px 0 3em;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
background: #333;
|
||||
/* css3 */
|
||||
-webkit-border-radius: 10px;
|
||||
-moz-border-radius: 10px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
/* creates a rectangle of the colour wanted for the pointy bit */
|
||||
.pinched:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -20px;
|
||||
left: 50%;
|
||||
width: 100px;
|
||||
height: 20px;
|
||||
margin: 0 0 0 -50px;
|
||||
background: #333;
|
||||
}
|
||||
|
||||
.bubble {
|
||||
position: relative;
|
||||
background: #cd188e;
|
||||
color: #FFFFFF;
|
||||
box-shadow: 5px 7px 7px -1px rgba(221 51 82 / 30%);
|
||||
text-align: center;
|
||||
border-radius: 15px;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
.bubble:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 0;
|
||||
z-index: 1;
|
||||
border-style: solid;
|
||||
border-color: #cd188e transparent;
|
||||
border-width: 0 20px 20px;
|
||||
top: -20px;
|
||||
left: 50%;
|
||||
margin-left: -20px;
|
||||
}
|
||||
|
||||
/* En pantallas md (>=768px) mostrar el triángulo apuntando hacia la izquierda */
|
||||
@media (min-width: 768px) {
|
||||
.bubble:after {
|
||||
/* Hacer el triángulo hacia la izquierda: color en el borde derecho */
|
||||
border-color: transparent #cd188e transparent transparent;
|
||||
/* top right bottom left */
|
||||
border-width: 20px 20px 20px 0;
|
||||
/* Colocar el triángulo centrado verticalmente y fuera a la izquierda */
|
||||
top: 50%;
|
||||
left: -18px;
|
||||
margin-left: 0;
|
||||
margin-top: -20px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.glass {
|
||||
/* From https://css.glass */
|
||||
background: #242d5d;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
|
||||
backdrop-filter: blur(5px);
|
||||
-webkit-backdrop-filter: blur(5px);
|
||||
border: 1px solid rgba(24, 53, 104, 0.3);
|
||||
}
|
||||
|
||||
.option-btn {
|
||||
transition: all .3s ease-in-out;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.option-btn:hover {
|
||||
transform: scale(.9);
|
||||
box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset !important;
|
||||
border: 5px solid #DD3352 !important;
|
||||
}
|
||||
|
||||
.bannerend {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
object-fit: cover;
|
||||
aspect-ratio: 16/5;
|
||||
max-height: 45dvh;
|
||||
|
||||
}
|
||||
|
||||
.grid-cierre {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: 60% auto;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bg-pass {
|
||||
background-image: url(img/actividad/bannerbien.jpg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: 50% 100%;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.bg-fail {
|
||||
background-image: url(img/actividad/bannermal.jpg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: 50% 100%;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
@media(min-width: 768px) {
|
||||
.trophy {
|
||||
max-width: 45px;
|
||||
}
|
||||
}
|
||||
|
||||
@media(min-width: 991px) {
|
||||
.bg-pass {
|
||||
background-position: 100% 100%;
|
||||
}
|
||||
|
||||
.bg-fail {
|
||||
background-position: 100% 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.asesor {
|
||||
margin-top: -90px;
|
||||
max-width: 200px;
|
||||
}
|
||||
|
||||
.bannerend {
|
||||
object-position: bottom center;
|
||||
max-height: 65dvh;
|
||||
}
|
||||
|
||||
.img-w-perso {
|
||||
max-width: 65%;
|
||||
}
|
||||
|
||||
.grid-cierre {
|
||||
grid-template-rows: 458px auto;
|
||||
}
|
||||
|
||||
.bg-pass {
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
.bg-fail {
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media(min-width: 1400px) {
|
||||
.m-h {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div class="page-sco full-height page-activity" id="inicio">
|
||||
<div class="container-xxl">
|
||||
<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-6 col-sm-6 col-md-6 col-xl-4 text-center mt-md-0 mt-4">
|
||||
<img src="img/actividad/avatar-inicio.png" class="img-fluid floating">
|
||||
</div>
|
||||
<div class="col-12 col-sm-12 col-md-6 col-xl-6">
|
||||
<div class="card custom-card animate__animated animate__fadeInRightBig p-md-4 p-2">
|
||||
<div class="card-body text-center">
|
||||
<h1 class="text-primary fw-bold">
|
||||
¿Quién está diciendo la verdad?
|
||||
</h1>
|
||||
En esta actividad podrás practicar cómo responder <span class="fw-bold text-primary">objeciones</span> y
|
||||
elegir quién da la respuesta correcta.<br><br>Prepárate para afinar tu criterio y tomar la mejor
|
||||
decisión.
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-100 text-center animate__animated animate__slideInDown mt-3">
|
||||
<div
|
||||
class="btn btn-begin text-white fw-bold py-1 px-3 animate__animated animate__pulse animate__infinite disabled"
|
||||
id="btn-comenzar">
|
||||
Comenzar
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page-sco page-activity full-height py-2 pt-md-3" id="desarrollo" style="display: none;">
|
||||
|
||||
<div class="container-xl">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-12">
|
||||
|
||||
<div class="row align-items-center justify-content-center">
|
||||
<div class="col-12 text-center">
|
||||
<h2 class="fw-medium text-primary">¿Quién está diciendo la verdad?</h2>
|
||||
</div>
|
||||
<div class="col-12 col-md-8 ins_act">
|
||||
<div class="text-center w-100 d-inline-block p-md-3 p-1 bg-purple-2 text-white rounded-3 shadow">
|
||||
<strong>Instrucciones: </strong>Lee la respuesta de los dos representantes sobre una objeción. Analiza
|
||||
cuidadosamente sus argumentos y elige quién tiene la razón.</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-8 col-lg-6">
|
||||
<div class="d-flex gap-3 justify-content-center mt-3">
|
||||
<div class="trophy text-center"> <img src="img/actividad/tocheck.png" alt=""> </div>
|
||||
<div class="trophy text-center"> <img src="img/actividad/tocheck.png" alt=""> </div>
|
||||
<div class="trophy text-center"> <img src="img/actividad/tocheck.png" alt=""> </div>
|
||||
<div class="trophy text-center"> <img src="img/actividad/tocheck.png" alt=""> </div>
|
||||
<div class="trophy text-center"> <img src="img/actividad/tocheck.png" alt=""> </div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-9 col-lg-8 col-xl-10 actividad_show" style="display: none;">
|
||||
<div id="quiz-container" class="mt-3 w-100">
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="page-sco page-activity full-height bg-pink-4" id="cierre" style="display: none;">
|
||||
<div class="grid-cierre">
|
||||
<div class="part1-cierre h-100 d-flex flex-column justify-content-center">
|
||||
<div class="flex-fill w-100 h-100 bg-pass passed" style="display: none;">
|
||||
<img src="img/actividad/bannerbien.jpg" class="img-fluid w-100 d-none d-xl-block m-h">
|
||||
</div>
|
||||
<div class="flex-fill w-100 h-100 bg-fail failed" style="display: none;">
|
||||
<img src="img/actividad/bannermal.jpg" class="img-fluid w-100 d-none d-xl-block m-h">
|
||||
</div>
|
||||
</div>
|
||||
<div class="part2-cierre h-100 d-flex flex-column justify-content-center align-items-center py-2">
|
||||
<div class="container">
|
||||
<div class="row align-items-center justify-content-center pt-2">
|
||||
<div class="col-12 col-md-8">
|
||||
<div class="row">
|
||||
<div class="col-12 text-center animate__animated animate__fadeInLeft passed" style="display: none;">
|
||||
<h1 class="fw-bold text-pink-1">¡Excelente trabajo!</h1>
|
||||
<p class="mb-0">Has demostrado un gran dominio del contenido de <strong class="text-primary">OGestan</strong><sup><strong class="text-primary">®
|
||||
</strong></sup><strong class="text-primary">Pré</strong>, sigue con esta seguridad y continúa avanzando en tu
|
||||
preparación.</p>
|
||||
</div>
|
||||
<div class="col-12 text-center animate__animated animate__fadeInLeft failed" style="display: none;">
|
||||
<h1 class="fw-bold text-pink-1">¡Tú puedes lograrlo!</h1>
|
||||
<p>Repasa nuevamente la información de OGestan® Pré y vuelve a intentarlo.</p>
|
||||
<div class="w-100 text-center">
|
||||
<div class="btn btn-begin text-white fw-bold py-1 px-3 animate__animated animate__pulse animate__infinite"
|
||||
onclick="CourseNav.reload()">
|
||||
Volver a intentar
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(document).ready(async function () {
|
||||
// Configuración inicial
|
||||
$(".page-sco").addClass("fake");
|
||||
$("#loader-course360").show();
|
||||
// Configuración de las páginas
|
||||
const pageActivity = ".page-activity";
|
||||
const pageStart = "#inicio";
|
||||
const pageDevelopment = "#desarrollo";
|
||||
const pageSummary = "#cierre";
|
||||
const audios = {
|
||||
"inicio": CourseNav.createSound('audio/audiom25.mp3'),
|
||||
"instrucciones": CourseNav.createSound('audio/audiom26.mp3'),
|
||||
"correcto": CourseNav.createSound('audio/audiom27.mp3'),
|
||||
"incorrecto": CourseNav.createSound('audio/audiom28.mp3'),
|
||||
"fc": CourseNav.createSound('audio/feedback-correct.mp3'),
|
||||
"fi": CourseNav.createSound('audio/feedback-incorrect.mp3')
|
||||
}
|
||||
audios.inicio.on("end", function () {
|
||||
$("#btn-comenzar").removeClass("disabled");
|
||||
});
|
||||
audios.instrucciones.on("end", function () {
|
||||
$(".btn-open-question").removeClass("disabled grayscale");
|
||||
$('.ins_act').hide();
|
||||
$('.actividad_show').show();
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
// Crear instancia de QuizManager
|
||||
const quizManager = new QuizManager({
|
||||
excelFileUrl: "manejoDeObjeciones.xlsx",
|
||||
mandatoryFields: {
|
||||
question: "pregunta",
|
||||
correctOption: "opcion_c",
|
||||
correctFeedback: "retroalimentacion_correcta",
|
||||
incorrectFeedback: "retroalimentacion_incorrecta",
|
||||
},
|
||||
optionPrefix: "opcion", // Prefijo para las opciones
|
||||
randomizeQuestions: true, // Habilitar preguntas aleatorias
|
||||
randomizeOptions: true, // Habilitar opciones aleatorias
|
||||
passingScore: 80, // Puntaje mínimo aprobatorio
|
||||
defaultWeight: 1, // Ponderación por defecto
|
||||
maxAttempts: Infinity, // Intentos máximos por defecto
|
||||
maxQuestions: 5, // Obtener solo 5 preguntas
|
||||
specialOptions: ["Ninguna de las anteriores", "Todas las anteriores"], // Textos especiales
|
||||
});
|
||||
// Configurar intentos iniciales con validación desde el LMS
|
||||
const attempt = !isNaN(CourseNav.getLessonLocation()) ? Number(CourseNav.getLessonLocation()) : 0;
|
||||
console.log("Intento actual obtenido del LMS:", attempt);
|
||||
quizManager.setAttempts(attempt);
|
||||
if (attempt < 1) {
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(audios.inicio);
|
||||
} else {
|
||||
$("#btn-comenzar").removeClass("disabled");
|
||||
}
|
||||
|
||||
// Cargar las preguntas al inicio
|
||||
await loadAndStartQuiz();
|
||||
// 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
|
||||
if (!quizManager.hasReachedMaxAttempts()) {
|
||||
$(pageActivity).hide();
|
||||
$(pageDevelopment).addClass('d-flex');
|
||||
// Incrementar los intentos y guardar en el LMS
|
||||
quizManager.incrementAttempts();
|
||||
CourseNav.setLessonLocation(quizManager.getAttempts());
|
||||
$(".page-sco").addClass('fakedesarrollo');
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(audios.instrucciones);
|
||||
// Renderizar la primera pregunta
|
||||
renderQuestion("#quiz-container", false);
|
||||
} 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.log("Preguntas cargadas exitosamente.");
|
||||
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 = false) {
|
||||
const questionData = quizManager.getRenderData();
|
||||
if (questionData) {
|
||||
|
||||
const questionHtml = `<div class="row justify-content-center align-items-center">
|
||||
<div class="col-12 text-center mb-3">
|
||||
<div class="row align-items-center justify-content-center">
|
||||
<div class="col-4 col-md-3 text-center mb-3 mb-md-0"><img src="img/actividad/medico.png" class="img-fluid animate__animated animate__flipInY" alt=""></div>
|
||||
<div class="col-12 col-md-9 text-center"><div class="w-100 pregunta bubble">${questionData.text}</div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-xl-5 animate__animated animate__fadeInLeft">
|
||||
<div class="card glass border-0 rounded-15 shadow option-btn cursor p-1 p-md-3" data-correct="${questionData.options[0].isCorrect}">
|
||||
<div class="card-body text-center d-inline-flex flex-xl-column flex-row justify-content-center align-items-center p-1 p-md-3">
|
||||
<img src="img/actividad/atenciona.png" class="img-fluid asesor" alt="">
|
||||
<div class="w-100 opcion text-md-center text-start">${questionData.options[0].text}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-xl-2 text-center animate__animated animate__bounceIn animate__delay-1s my-2 my-md-3">
|
||||
<img src="img/actividad/vs.png" class="img-fluid d-xl-inline-block d-none img-w-perso" alt="">
|
||||
<img src="img/actividad/vsmd.png" class="img-fluid d-xl-none d-inline-block" alt="">
|
||||
</div>
|
||||
<div class="col-12 col-xl-5 animate__animated animate__fadeInRight">
|
||||
<div class="card glass border-0 rounded-15 shadow option-btn cursor p-1 p-md-3" data-correct="${questionData.options[1].isCorrect}">
|
||||
<div class="card-body text-center d-inline-flex flex-xl-column flex-row justify-content-center align-items-center p-1 p-md-3">
|
||||
<img src="img/actividad/atencionb.png" class="img-fluid asesor" alt="">
|
||||
<div class="w-100 opcion text-md-center text-start">${questionData.options[1].text}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
|
||||
|
||||
if (useSwal) {
|
||||
// Mostrar la pregunta en un Swal
|
||||
Swal.fire({
|
||||
html: questionHtml,
|
||||
showConfirmButton: false,
|
||||
customClass: { popup: "swal-question-popup" },
|
||||
backdrop: "rgba(65, 60, 60, .95)",
|
||||
showDenyButton: false,
|
||||
showCancelButton: false,
|
||||
allowOutsideClick: false,
|
||||
allowEscapeKey: false,
|
||||
focusConfirm: false,
|
||||
target: "body",
|
||||
didOpen: () => {
|
||||
//document.body.style.paddingRight = '';
|
||||
//document.body.classList.remove('swal2-height-auto');
|
||||
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 () {
|
||||
const isCorrect = $(this).data("correct") === "true";
|
||||
const feedback = isCorrect
|
||||
? questionData.correctFeedback || "¡Correcto!"
|
||||
: questionData.incorrectFeedback || "Incorrecto";
|
||||
handleFeedback(isCorrect, feedback, containerSelector, true); // Usar función para manejar retroalimentación
|
||||
});
|
||||
},
|
||||
});
|
||||
} 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");
|
||||
// Manejar clic en las opciones
|
||||
$(containerSelector).on("click", ".option-btn", function () {
|
||||
const isCorrect = $(this).data("correct") === true;
|
||||
const feedback = isCorrect
|
||||
? questionData.correctFeedback || "¡Correcto!"
|
||||
: questionData.incorrectFeedback || "Incorrecto";
|
||||
handleFeedback(isCorrect, feedback, containerSelector, false); // Usar función para manejar retroalimentación
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
/**
|
||||
* 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) {
|
||||
const imageName = isCorrect ? 'retrobien.png' : 'retromal.png';
|
||||
|
||||
const html = `<div class="text-center w-100 overflow-hidden">
|
||||
<img src="img/actividad/${imageName}" class="img-fluid animate__animated animate__flipInY">
|
||||
<p class="text-white">${feedback}</p>
|
||||
</div>`;
|
||||
|
||||
if (isCorrect) {
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(audios.fc);
|
||||
} else {
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(audios.fi);
|
||||
}
|
||||
|
||||
Swal.fire({
|
||||
html: html,
|
||||
showConfirmButton: true,
|
||||
confirmButtonText: "Cerrar",
|
||||
backdrop: "rgba(106, 33, 127, .9)",
|
||||
showCloseButton: false,
|
||||
target: "body",
|
||||
heightAuto: false,
|
||||
customClass: {
|
||||
popup: 'w-32em pop-retro',
|
||||
confirmButton: 'btn btn-begin text-white fw-bold py-1 animate__animated animate__pulse animate__infinite'
|
||||
},
|
||||
/* didOpen: () => {
|
||||
document.body.style.paddingRight = '';
|
||||
document.body.classList.remove('swal2-height-auto');
|
||||
}, */
|
||||
}).then(() => {
|
||||
updateVisualFeedback(isCorrect); // Actualiza visualización
|
||||
quizManager.answerCurrentQuestion(isCorrect); // Registra respuesta
|
||||
// Mostrar siguiente pregunta o resultados finales
|
||||
if (quizManager.hasMoreQuestions()) {
|
||||
quizManager.getNextQuestion();
|
||||
renderQuestion(containerSelector, false); // Renderizar la siguiente pregunta
|
||||
} else {
|
||||
renderResults("#resume-container"); // Mostrar resultados finales
|
||||
}
|
||||
});
|
||||
}
|
||||
/**
|
||||
* Renderiza los resultados finales en un contenedor específico.
|
||||
* @param {string} containerSelector - Selector del contenedor donde se renderizarán los resultados.
|
||||
*/
|
||||
function renderResults(containerSelector) {
|
||||
|
||||
$(pageActivity).hide().removeClass("d-flex");
|
||||
$(pageSummary).show().addClass("d-flex");
|
||||
$(".page-sco").addClass("fakecierre");
|
||||
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) {
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(audios.correcto);
|
||||
$(".passed").show();
|
||||
CourseNav.setSlideVisited();
|
||||
} else {
|
||||
$(".failed").show();
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(audios.incorrecto);
|
||||
}
|
||||
}
|
||||
function updateVisualFeedback(isCorrect) {
|
||||
if (isCorrect) {
|
||||
$(".trophy").eq(quizManager.currentQuestionIndex).addClass("win");
|
||||
$(".trophy").eq(quizManager.currentQuestionIndex).find("img").attr('src', 'img/actividad/check.png').addClass("win");
|
||||
} else {
|
||||
$(".trophy").eq(quizManager.currentQuestionIndex).find("img").attr('src', 'img/actividad/uncheck.png');
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,70 @@
|
||||
<style>
|
||||
.back0 {
|
||||
background-image: url(img/bg05.jpg);
|
||||
background-size: cover;
|
||||
background-position: top center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.border-top-perso {
|
||||
border-top: 3px solid;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.anim0 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.card-perso {
|
||||
background-color: rgba(242, 235, 215, .8);
|
||||
}
|
||||
|
||||
/* @media(min-width: 991px) {
|
||||
.back0 {
|
||||
background-image: url(img/bg07.jpg);
|
||||
background-position: 68% 100%;
|
||||
}
|
||||
} */
|
||||
</style>
|
||||
<div class='page-sco py-3 py-md-4 back0'>
|
||||
<div class='container'>
|
||||
<div class='row justify-content-center align-items-center'>
|
||||
<div class='col-12 anim0'>
|
||||
<div class='row justify-content-center align-items-center'>
|
||||
<div class="col-12 col-md-10 col-lg-6 animate__animated animate__bounceInDown text-center text-lg-start">
|
||||
<div class="position-relative d-inline-block mb-3">
|
||||
<h1 class="text-primary fw-bold">¡Felicidades por concluir este módulo!</h1>
|
||||
<!-- <hr class="m-0 text-secondary border-top-perso"> -->
|
||||
</div>
|
||||
<div
|
||||
class="card bg-transparent border-0 rounded-0 shadow-none p-0 animate__animated animate__flipInY animate__delay-3s">
|
||||
<p>OGestan<sup>®</sup> Pré no es solo un suplemento: es una guía que respalda los procesos más delicados y significativos del inicio
|
||||
de la vida, y tú ahora tienes el conocimiento para comunicarlo con confianza.</p>
|
||||
<p class="fw-bold text-blue-1 animate__animated animate__lightSpeedInLeft animate__delay-14s">Tu preparación es parte de cada comienzo.</p>
|
||||
<p class="fw-bold text-blue-1 animate__animated animate__lightSpeedInLeft animate__delay-17s">Sigamos avanzando juntos.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-9 col-md-6 text-center">
|
||||
<img src="img/07.0.png" class="img-fluid floating">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(function () {
|
||||
"use strict";
|
||||
$('body').addClass('fake');
|
||||
const audiom29 = CourseNav.createSound('audio/audiom29.mp3');
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(audiom29);
|
||||
audiom29.on('play', function () {
|
||||
$('.anim0').show();
|
||||
});
|
||||
audiom29.on("end", function () {
|
||||
CourseNav.completeLesson();
|
||||
});
|
||||
CourseNav.setSlideVisited();
|
||||
CourseNav.completeLesson();
|
||||
});
|
||||
</script>
|
||||
Reference in New Issue
Block a user