Drossagyn curso completo
This commit is contained in:
@@ -0,0 +1,281 @@
|
||||
<style>
|
||||
.back0 {
|
||||
background-image: url(img/bg00.jpg);
|
||||
background-size: cover;
|
||||
background-position: 20% 100%;
|
||||
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);
|
||||
}
|
||||
|
||||
@media(min-width: 768px) {
|
||||
.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-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-white fw-bolder">¡Bienvenido a <br> Drossagyn<sup>®</sup>!</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 p-2">
|
||||
<div class="inside-card px-3 py-2">Comenzar</div>
|
||||
</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 card-back0 border-0 rounded-3 shadow-none px-3 py-2 text-green-1">
|
||||
<p><strong>Bienvenido al curso de Drossagyn<sup>®</sup></strong>, donde conocerás de manera sencilla y práctica todo lo
|
||||
necesario para dominar este producto y usar esa información en tus conversaciones diarias con profesionales de la
|
||||
salud.</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="mb-0 animate__animated animate__zoomIn animate__delay-2s">Al terminar este recorrido, <strong>tú podrás reconocer, explicar y usar con seguridad</strong> la información clave
|
||||
sobre Drossagyn<sup>®</sup>:<br />cómo está formulado, cómo actúa, cómo se usa, qué precauciones requiere y cómo se
|
||||
compara con otras alternativas del mercado.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(function () {
|
||||
"use strict";
|
||||
|
||||
const audioh00 = CourseNav.createSound('audio/audioh00.mp3');
|
||||
const audioh01 = CourseNav.createSound('audio/audioh01.mp3');
|
||||
|
||||
audioh00.on('end',function(){
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(audioh01);
|
||||
$('.apa0').show();
|
||||
});
|
||||
|
||||
audioh01.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,287 @@
|
||||
<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;
|
||||
}
|
||||
|
||||
.hr-style {
|
||||
border-top: 3px solid #fff;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.anim0 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.shadow-externo {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: auto 50px;
|
||||
background-image: url(img/02.2.png);
|
||||
background-repeat: no-repeat;
|
||||
background-position: 100% 100%;
|
||||
background-size: 100% 100%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.cid0 .swiper-wrapper {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.btn-slide-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: 4px solid rgba(14, 28, 98, .3);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.circ_interno {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
border-radius: 100%;
|
||||
background: #dcdcdc;
|
||||
}
|
||||
|
||||
.btn-slide-circ:hover .circ_interno {
|
||||
background: #006EAB;
|
||||
background: linear-gradient(to left, #006EAB 0%, #00928E 100%);
|
||||
}
|
||||
|
||||
.btn-slide-circ.selected .circ_interno {
|
||||
background: #006EAB;
|
||||
background: linear-gradient(to right, #006EAB 0%, #00928E 100%);
|
||||
|
||||
}
|
||||
|
||||
.content-swiper {
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
@media(min-width: 991px) {
|
||||
.shadow-externo {
|
||||
grid-template-columns: auto 50px;
|
||||
grid-template-rows: 1fr;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.content-swiper {
|
||||
height: max-content;
|
||||
}
|
||||
|
||||
.cid0 {
|
||||
height: clamp(350px, 40vh, 400px);
|
||||
}
|
||||
}
|
||||
</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 anim0'>
|
||||
<div class='row justify-content-center align-items-center'>
|
||||
<div class="col-7 col-md-4 text-center order-2 order-md-1 animate__animated animate__zoomIn">
|
||||
<img src="img/02.0.png" class="img-fluid">
|
||||
</div>
|
||||
<div class="col-12 col-md-7 col-lg-6 order-1 order-md-2" data-sal="zoom-in">
|
||||
<div class="position-relative d-inline-block">
|
||||
<hr class="m-0 mb-2 hr-style">
|
||||
<h2 class="text-secondary fw-bold">¿Qué es Drossagyn<sup>®</sup>?</h2>
|
||||
<p class="mb-2 animate__animated animate__lightSpeedInRight animate__delay-2s">Drossagyn<sup>®</sup> es una crema vaginal a base de <strong>estriol</strong>, diseñada para aliviar y restaurar el
|
||||
tejido afectado por la deficiencia estrogénica.</p>
|
||||
<hr class="m-0 mb-2 hr-style">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="position-relative w-100 bg-white apa0 pt-3" style="display: none;">
|
||||
<div class="container">
|
||||
<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"
|
||||
data-audio="audioh03"
|
||||
>
|
||||
<img src="img/nSec.png" class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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 anim1'>
|
||||
<div class="row justify-content-center align-items-center">
|
||||
<div class="col-12 col-lg-9">
|
||||
<div class="shadow-externo rounded-3 px-4 py-5 p-lg-5">
|
||||
<div class="position-relative content-swiper">
|
||||
<div class="swiper cid0">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-7 col-md-5 text-center mb-3 mb-md-0">
|
||||
<img src="img/02.1.png" class="img-fluid">
|
||||
</div>
|
||||
<div class="col-12 col-md-7">
|
||||
<h4 class="fw-bold text-green-1">Forma Farmacéutica y formulación</h4>
|
||||
<p>Principio activo: <strong>Estriol</strong></p>
|
||||
<p>Forma farmacéutica : <strong>Crema</strong></p>
|
||||
<p>Formulación:</p>
|
||||
<p>Cada 100 gramos contienen:</p>
|
||||
<ul class="mb-0">
|
||||
<li><strong>Estriol</strong> 50mg</li>
|
||||
<li>Excipiente cbp 100g</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-7 col-md-5 text-center mb-3 mb-md-0">
|
||||
<img src="img/02.1.png" class="img-fluid">
|
||||
</div>
|
||||
<div class="col-12 col-md-7">
|
||||
<h4 class="fw-bold text-green-1">Presentación Comercial</h4>
|
||||
<p class="mb-0">Caja de cartón con un <strong>tubo de 50g</strong>, equivalente a <strong>3 meses</strong> de tratamiento con
|
||||
aplicador e instructivo anexo.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-12 col-md-6 mb-2">
|
||||
<h4 class="fw-bold text-green-1">Indicaciones</h4>
|
||||
<p>En el tratamiento de <strong>alteraciones relacionadas con la deficiencia de estrógenos</strong>, tales como:</p>
|
||||
<ul class="mb-0">
|
||||
<li>Vaginitis</li>
|
||||
<li>Vulvitis</li>
|
||||
<li>Prurito vulvar y vaginal</li>
|
||||
<li>Craurosis (atrofia progresiva crónica de la piel y mucosa vulvar)</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-12 col-md-6">
|
||||
<ul class="mb-0">
|
||||
<li>Secreciones</li>
|
||||
<li>Úlceras por presión en pacientes que utilizan pesario</li>
|
||||
<li>Facilitar la discriminación en los frotis vaginales difíciles de evaluar</li>
|
||||
<li>Pre y post tratamiento de cirugía vaginal</li>
|
||||
<li>Tratamiento coadyuvante en las infecciones vaginales</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="position-relative d-flex flex-lg-column justify-content-center align-items-center mx-auto gap-4 mt-3 mt-lg-0">
|
||||
<div class="btn-slide-circ selected completed" data-slide="0">
|
||||
<div class="circ_interno"></div>
|
||||
</div>
|
||||
<div class="btn-slide-circ animate__animated animate__pulse animate__infinite" data-slide="1">
|
||||
<div class="circ_interno"></div>
|
||||
</div>
|
||||
<div class="btn-slide-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";
|
||||
|
||||
const audioh02 = CourseNav.createSound('audio/audioh02.mp3');
|
||||
const audioh03 = CourseNav.createSound('audio/audioh03.mp3');
|
||||
|
||||
const paths = [
|
||||
"audio/audioh03.mp3",
|
||||
"audio/audioh04.mp3",
|
||||
"audio/audioh05.mp3"
|
||||
];
|
||||
let audios = [];
|
||||
paths.forEach(function (element) {
|
||||
audios.push(CourseNav.createSound(element));
|
||||
});
|
||||
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(audioh02);
|
||||
|
||||
audioh02.on('play', function () {
|
||||
$('.anim0').show();
|
||||
});
|
||||
|
||||
audioh02.on('end', function () {
|
||||
$('.apa0').show();
|
||||
//$('.btn-slide-circ').first().click();
|
||||
});
|
||||
|
||||
$('.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();
|
||||
}
|
||||
});
|
||||
|
||||
const mySwiper = new Swiper(".cid0", {
|
||||
effect: "slide",
|
||||
autoHeight: true,
|
||||
slidesPerView: 1,
|
||||
spaceBetween: 10,
|
||||
direction: 'horizontal',
|
||||
breakpoints: {
|
||||
991: {
|
||||
direction: 'vertical',
|
||||
autoHeight: false
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$('.btn-slide-circ').click(function () {
|
||||
CourseNav.soundClick();
|
||||
const slideIndex = $(this).data('slide');
|
||||
mySwiper.slideTo(slideIndex);
|
||||
$(this).removeClass('animate__animated animate__pulse animate__infinite');
|
||||
$('.btn-slide-circ').removeClass('selected');
|
||||
$(this).addClass('selected completed');
|
||||
|
||||
if ($('.btn-slide-circ.completed').length === $('.btn-slide-circ').length) {
|
||||
CourseNav.setSlideVisited();
|
||||
}
|
||||
|
||||
if (audios[slideIndex]) {
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(audios[slideIndex]);
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,157 @@
|
||||
<style>
|
||||
.fake {
|
||||
background-image: url(img/bg04.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 #fff;
|
||||
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-secondary fw-bold">Mecanismo de acción</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-green-1"></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,238 @@
|
||||
<style>
|
||||
.back0 {
|
||||
background-image: url(img/bg05.jpg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
#svg-container {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
#svg-container svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.btn_svg {
|
||||
cursor: pointer;
|
||||
transform-box: content-box;
|
||||
/* transform-origin: center !important; */
|
||||
}
|
||||
|
||||
.anim0 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.xactive {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.texts {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</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 anim0'>
|
||||
<div class='row justify-content-center align-items-center'>
|
||||
<div class="col-12 mb-3 text-center animate__animated animate__zoomIn">
|
||||
<h2 class="fw-bold text-secondary mb-0">Dosis y vía de administración</h2>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-lg-5 animate__animated animate__zoomIn">
|
||||
<div class="row justify-content-center align-items-center">
|
||||
<div class="col-3 col-md-5 text-center">
|
||||
<img src="img/04.0.png" class="img-fluid">
|
||||
</div>
|
||||
<div class="col-5 col-md-7 col-lg-6 col-xl-5 text-center">
|
||||
<div id="svg-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="col-hide" class="col-12 col-md-6 col-lg-7 d-none d-md-block animate__animated animate__zoomIn">
|
||||
<div id="txt1" class="texts position-relative w-100">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-7 col-md-9 text-center mb-3">
|
||||
<img src="img/04.1.png" class="img-fluid">
|
||||
</div>
|
||||
<div class="col-12 text-center">
|
||||
<p class="mb-0">Vía de administración: <strong>Vaginal</strong></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="txt2" class="texts position-relative w-100">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 text-center text-md-start mb-3">
|
||||
<p class="fw-bold">Dosificación</p>
|
||||
<p class="mb-0">1 dosis = 1 gr de crema = 0.5 mg de Estriol</p>
|
||||
</div>
|
||||
<div class="col-12 mb-3">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-6 text-center">
|
||||
<img src="img/04.2.png" class="img-fluid mb-2"><br>
|
||||
<p class="mb-0">1gr de crema x las noches.</p>
|
||||
</div>
|
||||
<div class="col-6 text-center">
|
||||
<img src="img/04.3.png" class="img-fluid mb-2"><br>
|
||||
<p class="mb-0">1gr de crema 2 a 3 veces x semana, hasta que los síntomas desaparezcan.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 text-center text-md-start">
|
||||
<p class="mb-0">Esta dosificación puede mantenerse <strong>hasta un máximo de </strong><strong>3 meses.</strong></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="txt3" class="texts position-relative w-100">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 text-center text-md-start mb-3">
|
||||
<p class="fw-bold">Tratamiento a largo plazo</p>
|
||||
<ul class="mb-0 text-start">
|
||||
<li>Tras 2 a 3 meses de uso continuo, realizar un <strong>descanso de 4 semanas</strong>.</li>
|
||||
<li>Después de la pausa, evaluar si es necesario reiniciar el tratamiento.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-7 col-md-12 text-center text-md-end">
|
||||
<img src="img/04.4.png" class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(function () {
|
||||
"use strict";
|
||||
$('body').addClass('fake');
|
||||
|
||||
const audioh06 = CourseNav.createSound('audio/audioh06.mp3');
|
||||
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(audioh06);
|
||||
|
||||
audioh06.on('play', function () {
|
||||
loadSVG();
|
||||
$('.anim0').show();
|
||||
$('#text1').show();
|
||||
});
|
||||
|
||||
const paths = [
|
||||
"audio/audioh06.mp3",
|
||||
"audio/audioh07.mp3",
|
||||
"audio/audioh08.mp3"
|
||||
];
|
||||
let audios = [];
|
||||
paths.forEach(function (element) {
|
||||
audios.push(CourseNav.createSound(element));
|
||||
});
|
||||
|
||||
// Function to load the SVG file and insert it into the container
|
||||
function loadSVG() {
|
||||
$.get('img/04.5.svg', function (data) {
|
||||
var svg = $(data).find('svg');
|
||||
$('#svg-container').html(svg);
|
||||
// Remove width and height attributes to make SVG responsive
|
||||
svg.removeAttr('width').removeAttr('height');
|
||||
attachClickHandlers(); // Attach click handlers after SVG is loaded
|
||||
animateButtons();
|
||||
// Enable first button after SVG is loaded
|
||||
setTimeout(() => {
|
||||
$('#xbtn0').addClass('completed').removeClass('disabled animate__animated animate__pulse animate__infinite');
|
||||
$('#xbtn0').find('.xnormal').hide();
|
||||
$('#xbtn0').find('.xactive').show();
|
||||
$('#txt1').show();
|
||||
$("#xbtn1").removeClass('disabled');
|
||||
// Abrir el primer popup automáticamente en móviles
|
||||
if ($("#col-hide").css('display') == 'none') {
|
||||
mobilePop('#txt1');
|
||||
}
|
||||
}, 100);
|
||||
}, 'xml');
|
||||
}
|
||||
|
||||
// Function to handle click events
|
||||
function handleButtonClick(buttonId, textId, audioIndex, nextButtonId) {
|
||||
$(buttonId).addClass("animate__animated animate__pulse animate__infinite btn_svg disabled");
|
||||
$(buttonId).click(function () {
|
||||
CourseNav.soundClick();
|
||||
// Detener todas las animaciones activas
|
||||
gsap.globalTimeline.clear();
|
||||
// Hide all text sections
|
||||
$('.texts').hide();
|
||||
// Show the selected text section
|
||||
gsap.fromTo(textId, { opacity: 0, y: 20 }, { opacity: 1, y: 0, duration: 0.5, display: 'block' });
|
||||
$(buttonId).removeClass('animate__animated animate__pulse animate__infinite').addClass('completed');
|
||||
$('.xactive').hide();
|
||||
$('.xnormal').show();
|
||||
$(buttonId).find('.xnormal').hide();
|
||||
$(buttonId).find('.xactive').show();
|
||||
// Play the corresponding audio
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(audios[audioIndex]);
|
||||
|
||||
if ($("#col-hide").css('display') == 'none') {
|
||||
mobilePop(textId);
|
||||
}
|
||||
|
||||
// Habilitar el siguiente botón después de hacer clic
|
||||
if (nextButtonId) {
|
||||
$(nextButtonId).removeClass('disabled');
|
||||
}
|
||||
|
||||
objectIsCompleted();
|
||||
});
|
||||
}
|
||||
|
||||
function objectIsCompleted() {
|
||||
if ($(".btn_svg").length === $(".btn_svg.completed").length) {
|
||||
CourseNav.setSlideVisited();
|
||||
}
|
||||
}
|
||||
|
||||
// Attach click handlers to SVG buttons
|
||||
function attachClickHandlers() {
|
||||
handleButtonClick('#xbtn0', '#txt1', 0, '#xbtn1');
|
||||
handleButtonClick('#xbtn1', '#txt2', 1, '#xbtn2');
|
||||
handleButtonClick('#xbtn2', '#txt3', 2);
|
||||
// Add more buttons as needed
|
||||
}
|
||||
|
||||
function mobilePop(textId) {
|
||||
Swal.fire({
|
||||
html: $(textId).html(),
|
||||
target: 'body',
|
||||
customClass: {
|
||||
popup: 'pop-type0 bg-transparent p-0',
|
||||
htmlContainer: 'html-pop-style p-3',
|
||||
confirmButton: 'btn btn-begin pop-button-confirm text-white fw-bold animate__animated animate__pulse animate__infinite p-2'
|
||||
},
|
||||
confirmButtonText: '<div class="inside-card px-4 py-2">Cerrar</div>',
|
||||
allowOutsideClick: false,
|
||||
allowEscapeKey: false,
|
||||
focusConfirm: false,
|
||||
backdrop: "rgba(14, 28, 98, .8)",
|
||||
heightAuto: false,
|
||||
willClose: () => { CourseNav.audioController.stopAudio(); }
|
||||
});
|
||||
}
|
||||
|
||||
// Function to animate buttons with GSAP
|
||||
function animateButtons() {
|
||||
const buttons = ['#xbtn0', '#xbtn1', '#xbtn2'];
|
||||
buttons.forEach((button, index) => {
|
||||
gsap.from(button, {
|
||||
opacity: 0,
|
||||
y: -20,
|
||||
duration: 0.5,
|
||||
delay: index * 0.2
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,72 @@
|
||||
<style>
|
||||
.back0 {
|
||||
background-image: url(img/bg06.jpg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.anim0 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.overflow-perso {
|
||||
overflow-y: hidden;
|
||||
}
|
||||
</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 anim0'>
|
||||
<div class='row justify-content-center'>
|
||||
<div class="col-12 text-center mb-3 animate__animated animate__bounceInDown">
|
||||
<h2 class="fw-bold text-secondary mb-0">Eficacia de Drossagyn<sup>®</sup></h2>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="row justify-content-center align-items-center">
|
||||
<div class="col-7 col-md-5 text-center mb-3 mb-md-0 animate__animated animate__zoomIn">
|
||||
<img src="img/05.0.png" class="img-fluid">
|
||||
</div>
|
||||
<div class="col-12 col-md-7 col-mod overflow-perso">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 mb-3">
|
||||
<ul class="mb-0">
|
||||
<li class="animate__animated animate__bounceInUp"><strong>Alivio eficaz</strong> de la sequedad vaginal y disuria.</li>
|
||||
<li class="animate__animated animate__bounceInUp animate__delay-9s"><strong>Restaura</strong> el epitelio y mejora la lubricación de la mucosa vaginal.</li>
|
||||
<li class="animate__animated animate__bounceInUp animate__delay-18s"><strong>Restablece el equilibrio</strong> de la microbiota vaginal.</li>
|
||||
<li class="animate__animated animate__bounceInUp animate__delay-25s">Tiene <strong>efecto local</strong> en el epitelio de la vulva, la vagina y el cuello uterino. No posee efecto
|
||||
proliferativo en el endometrio.</li>
|
||||
<li class="animate__animated animate__bounceInUp animate__delay-34s"><strong>Mayor rapidez en el alivio</strong> de los <strong>síntomas</strong> y menos efectos secundarios vs. ECE.
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-7 col-md-8 text-center animate__animated animate__zoomIn animate__delay-1s">
|
||||
<img src="img/05.1.png" class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(function () {
|
||||
"use strict";
|
||||
|
||||
const audioh09 = CourseNav.createSound('audio/audioh09.mp3');
|
||||
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(audioh09);
|
||||
|
||||
audioh09.on('play',function(){
|
||||
$('.anim0').show();
|
||||
});
|
||||
|
||||
audioh09.on('end',function(){
|
||||
CourseNav.setSlideVisited();
|
||||
$('.col-mod').removeClass('overflow-perso');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,376 @@
|
||||
<style>
|
||||
.back0 {
|
||||
background-image: url(img/bg07.jpg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.grid-custom {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.col-span {
|
||||
width: 40%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.footer-span {
|
||||
margin-top: -50px;
|
||||
}
|
||||
|
||||
.info {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.anim0 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.img-back {
|
||||
max-width: 240px;
|
||||
right: 3%;
|
||||
}
|
||||
|
||||
@media(min-width: 768px) {
|
||||
.col-span {
|
||||
width: 25%;
|
||||
}
|
||||
}
|
||||
|
||||
@media(min-width: 991px) {
|
||||
.col-span {
|
||||
width: calc(20% - 16px);
|
||||
}
|
||||
}
|
||||
</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 anim0'>
|
||||
<div class='row justify-content-center'>
|
||||
<div class="col-12 mb-3 text-center animate__animated animate__bounceInDown">
|
||||
<h2 class="fw-bold text-secondary">Seguridad y Consideraciones de Uso</h2>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="grid-custom">
|
||||
<div class="col-span" data-popid="#pop0">
|
||||
<div class="d-flex flex-column justify-content-center align-items-center w-100">
|
||||
<div class="header-span">
|
||||
<div class="div-text d-inline-block position-relative">
|
||||
<img src="img/06.0.png" class="img-fluid">
|
||||
<div class="info">
|
||||
<h4 class="fw-medium text-center text-secondary">¿Cuándo NO debe usarse?</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-span" style="z-index: 1;">
|
||||
<img src="img/06.1.png" class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span" data-popid="#pop1">
|
||||
<div class="d-flex flex-column justify-content-center align-items-center w-100">
|
||||
<div class="header-span" style="z-index: 1;">
|
||||
<img src="img/06.2.png" class="img-fluid">
|
||||
</div>
|
||||
<div class="footer-span">
|
||||
<div class="div-text d-inline-block position-relative">
|
||||
<img src="img/06.11.png" class="img-fluid">
|
||||
<div class="info">
|
||||
<h4 class="fw-medium text-center text-secondary">Usar con precaución en…</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span" data-popid="#pop2">
|
||||
<div class="d-flex flex-column justify-content-center align-items-center w-100">
|
||||
<div class="header-span">
|
||||
<div class="div-text d-inline-block position-relative">
|
||||
<img src="img/06.0.png" class="img-fluid">
|
||||
<div class="info">
|
||||
<h4 class="fw-medium text-center text-secondary">Restricciones importantes</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-span" style="z-index: 1;">
|
||||
<img src="img/06.3.png" class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span" data-popid="#pop3">
|
||||
<div class="d-flex flex-column justify-content-center align-items-center w-100">
|
||||
<div class="header-span" style="z-index: 1;">
|
||||
<img src="img/06.4.png" class="img-fluid">
|
||||
</div>
|
||||
<div class="footer-span">
|
||||
<div class="div-text d-inline-block position-relative">
|
||||
<img src="img/06.11.png" class="img-fluid">
|
||||
<div class="info">
|
||||
<h4 class="fw-medium text-center text-secondary">Reacciones que pueden aparecer</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span" data-popid="#pop4">
|
||||
<div class="d-flex flex-column justify-content-center align-items-center w-100">
|
||||
<div class="header-span">
|
||||
<div class="div-text d-inline-block position-relative">
|
||||
<img src="img/06.0.png" class="img-fluid">
|
||||
<div class="info">
|
||||
<h4 class="fw-medium text-center text-secondary">Medicamentos que pueden interactuar</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-span" style="z-index: 1;">
|
||||
<img src="img/06.5.png" class="img-fluid">
|
||||
</div>
|
||||
</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">
|
||||
<div class="col-12">
|
||||
<div class="card bg-transparent border-0 rounded-0 shadow-none p-4 position-relative">
|
||||
<div class="position-relative w-100 z-1">
|
||||
<h3 class="fw-medium text-md-start text-green-1">Contraindicaciones</h3>
|
||||
<ul class="text-start">
|
||||
<li><strong>Hiper sensibilidad al estriol</strong>, o a cualquier componente de la fórmula.</li>
|
||||
<li>Embarazo y lactancia.</li>
|
||||
<li>Posterior al <strong>tratamiento de sangrado vaginal</strong> por causas desconocidas.</li>
|
||||
<li>Hiperplasia endometrial.</li>
|
||||
<li>Endometriosis (incluyendo sospecha).</li>
|
||||
<li>Hiperplasia endometrial.</li>
|
||||
<li>En caso de<strong> tumor estrógenos-dependiente</strong> existente, anterior o ante la sospecha de su existencia,
|
||||
tanto en endometrio como en glándula mamaria.</li>
|
||||
</ul>
|
||||
<p class="mb-0"><em>En cualquiera de estos escenarios, el producto debe evitarse por completo.</em></p>
|
||||
</div>
|
||||
<div class="position-absolute img-back h-100 top-0 d-flex justify-content-center align-items-center">
|
||||
<div class="position-relative w-100 text-center">
|
||||
<img src="img/06.6.png" class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="pop1">
|
||||
<div class="container-fluid">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12">
|
||||
<div class="card bg-transparent border-0 rounded-0 shadow-none p-4 position-relative">
|
||||
<div class="position-relative w-100 z-1">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 mb-3 text-md-start">
|
||||
<h3 class="fw-medium text-md-start text-green-1 mb-0">Contraindicaciones</h3>
|
||||
</div>
|
||||
<div class="col-12 text-md-start mb-3">
|
||||
<p class="mb-0">Se debe tener un monitoreo especial a pacientes con:</p>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 mb-2 mb-md-0">
|
||||
<ul class="mb-0 text-start">
|
||||
<li>Insuficiencia hepática grave</li>
|
||||
<li>Enfermedad grave del miocardio</li>
|
||||
<li>Insuficiencia renal</li>
|
||||
<li>Epilepsia</li>
|
||||
<li>Migraña</li>
|
||||
<li>Diabetes mellitus</li>
|
||||
<li>Hiperlipidemia</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-12 col-md-6">
|
||||
<ul class="mb-0 text-start">
|
||||
<li>Hipertensión</li>
|
||||
<li>Porfiria</li>
|
||||
<li>Pacientes con urticaria severa</li>
|
||||
<li>Erupción vesicular</li>
|
||||
<li>Otosclerosis</li>
|
||||
<li>Tromboflebitis</li>
|
||||
<li>Enfermedad tromboembólica</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-12 text-center mt-3">
|
||||
<p class="mb-0"><em>En estos casos, es indispensable el seguimiento profesional.</em></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="position-absolute img-back h-100 top-0 d-flex justify-content-center align-items-center">
|
||||
<div class="position-relative w-100 text-center">
|
||||
<img src="img/06.7.png" class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="pop2">
|
||||
<div class="container-fluid">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12">
|
||||
<div class="card bg-transparent border-0 rounded-0 shadow-none p-4 py-5 position-relative">
|
||||
<div class="position-relative w-100 z-1 py-5">
|
||||
<h3 class="fw-medium text-md-start text-green-1">Restricciones de uso</h3>
|
||||
<p class="text-md-start">No debe administrarse en el <strong>embarazo</strong>, ni durante el período de <strong>lactancia.</strong></p>
|
||||
<p class="mb-0"><em>Estas restricciones están claramente establecidas para evitar riesgos innecesarios.</em></p>
|
||||
</div>
|
||||
<div class="position-absolute img-back h-100 top-0 d-flex justify-content-center align-items-center">
|
||||
<div class="position-relative w-100 text-center">
|
||||
<img src="img/06.8.png" class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="pop3">
|
||||
<div class="container-fluid">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12">
|
||||
<div class="card bg-transparent border-0 rounded-0 shadow-none p-4 position-relative">
|
||||
<div class="position-relative w-100 z-1">
|
||||
<h3 class="fw-medium text-md-start text-green-1">Reacciones secundarias y adversas</h3>
|
||||
<ul class="text-start">
|
||||
<li>Mareos, dolores de cabeza.</li>
|
||||
<li>Nausea y/o vómito.</li>
|
||||
<li>Ligera mastalgia.</li>
|
||||
</ul>
|
||||
<p><em>Todas las posibles reacciones adversas mencionadas, pueden llegar a suceder en los primeros días de tratamiento y
|
||||
tienden a desaparecer a los pocos días.</em></p>
|
||||
<p class="mb-0"><em>Frecuencia: (ocasional -<1/100, ≥1/1000 )</em></p>
|
||||
</div>
|
||||
<div class="position-absolute img-back h-100 top-0 d-flex justify-content-center align-items-center">
|
||||
<div class="position-relative w-100 text-center">
|
||||
<img src="img/06.9.png" class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="pop4">
|
||||
<div class="container-fluid">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12">
|
||||
<div class="card bg-transparent border-0 rounded-0 shadow-none p-4 position-relative">
|
||||
<div class="position-relative w-100 z-1">
|
||||
<h3 class="fw-medium text-md-start text-green-1">Interacciones medicamentosas</h3>
|
||||
<p class="text-md-start">Algunos medicamentos pueden aumentar la acción de los estrógenos, como:</p>
|
||||
<ul class="text-start">
|
||||
<li>Barbitúricos</li>
|
||||
<li>Hidantoínas</li>
|
||||
<li>Carbamazepinas</li>
|
||||
<li>Rifampicina</li>
|
||||
</ul>
|
||||
<p><em>La existencia de interacción por vía cutánea es muy poco probable, debido a su acción </em></p>
|
||||
<p class="mb-0"><em>local = SEGURIDAD</em></p>
|
||||
</div>
|
||||
<div class="position-absolute img-back h-100 top-0 d-flex justify-content-center align-items-center">
|
||||
<div class="position-relative w-100 text-center">
|
||||
<img src="img/06.10.png" class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(function () {
|
||||
"use strict";
|
||||
|
||||
$('.col-span').addClass('disabled');
|
||||
|
||||
const audioh10 = CourseNav.createSound('audio/audioh10.mp3');
|
||||
|
||||
const paths = [
|
||||
"audio/audioh11.mp3",
|
||||
"audio/audioh12.mp3",
|
||||
"audio/audioh13.mp3",
|
||||
"audio/audioh14.mp3",
|
||||
"audio/audioh15.mp3"
|
||||
];
|
||||
let audios = [];
|
||||
paths.forEach(function (element) {
|
||||
audios.push(CourseNav.createSound(element));
|
||||
});
|
||||
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(audioh10);
|
||||
|
||||
audioh10.on('play',function(){
|
||||
$('.anim0').show();
|
||||
gsap.fromTo('.col-span',
|
||||
{ opacity: 0, rotationY: -90 },
|
||||
{ opacity: 1, rotationY: 0, duration: 1, stagger: 0.7 }
|
||||
);
|
||||
});
|
||||
|
||||
audioh10.on('end',function(){
|
||||
$('.col-span').addClass('animate__animated animate__pulse animate__infinite').removeClass('disabled');
|
||||
});
|
||||
|
||||
$('.col-span').click(function (e) {
|
||||
e.preventDefault();
|
||||
$(this).removeClass('animate__animated animate__pulse animate__infinite').addClass('completed');
|
||||
const index = $('.col-span').index(this);
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(audios[index]);
|
||||
const html = $($(this).data('popid')).html();
|
||||
Swal.fire({
|
||||
html: html,
|
||||
target: "body",
|
||||
customClass: {
|
||||
popup: 'pop-type0 bg-transparent p-0',
|
||||
htmlContainer: 'html-pop-style2 p-3',
|
||||
confirmButton: 'btn btn-begin pop-button-confirm text-white fw-bold animate__animated animate__pulse animate__infinite p-2'
|
||||
},
|
||||
confirmButtonText: '<div class="inside-card px-4 py-2">Cerrar</div>',
|
||||
showConfirmButton: true,
|
||||
allowOutsideClick: false,
|
||||
allowEscapeKey: false,
|
||||
focusConfirm: false,
|
||||
backdrop: "rgba(201, 224, 221, .8)",
|
||||
width: "70em",
|
||||
heightAuto: false,
|
||||
didOpen: () => {
|
||||
document.body.style.paddingRight = '';
|
||||
},
|
||||
didClose: () => {
|
||||
document.body.style.paddingRight = '';
|
||||
CourseNav.audioController.stopAudio();
|
||||
if ($('.col-span').length == $('.col-span.completed').length) {
|
||||
CourseNav.setSlideVisited();
|
||||
}
|
||||
},
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,242 @@
|
||||
<style>
|
||||
.back0 {
|
||||
background-image: url(img/bg03.jpg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.shadow-vx {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.cid1 .swiper-wrapper {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.bg-adorno {
|
||||
background-image: url(img/07.6.png);
|
||||
background-repeat: no-repeat;
|
||||
background-position: 100% 100%;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.bg-adorno {
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
.btn-arrow {
|
||||
max-width: 40px;
|
||||
}
|
||||
|
||||
.anim0 {
|
||||
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 anim0'>
|
||||
<div class='row justify-content-center'>
|
||||
<div class="col-12 mb-3 text-center animate__animated animate__zoomIn">
|
||||
<h2 class="fw-bold text-secondary">Competidores</h2>
|
||||
<p><strong>A continuación, podrás explorar los competidores de Drossagyn<sup>®</sup>.</strong></p>
|
||||
<p class="mb-0 animate__animated animate__lightSpeedInLeft animate__delay-4s">Conocerlos te ayudará a entender mejor el panorama del mercado y las opciones que suelen encontrarse en la práctica
|
||||
clínica.</p>
|
||||
</div>
|
||||
<div class="col-12 apa0" style="display: none;">
|
||||
<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/07.4.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 bg-transparent border-0 rounded-0 shadow-none px-3 py-4">
|
||||
<div class="row justify-content-center align-items-center py-2">
|
||||
<div class="col-7 col-md-4 col-lg-5 text-center mb-3 mb-lg-0">
|
||||
<img src="img/07.0.png" class="img-fluid">
|
||||
</div>
|
||||
<div class="col-12 col-md-8 col-lg-6">
|
||||
<p><strong>Producto:</strong> Ovestin<sup>®</sup></p>
|
||||
<p><strong>Principio activo:</strong> Estriol</p>
|
||||
<p><strong>Presentación:</strong></p>
|
||||
<ul>
|
||||
<li>Caja con 15 óvulos</li>
|
||||
<li>Caja con tubo de 15g de crema</li>
|
||||
</ul>
|
||||
<p><strong>Dosis:</strong></p>
|
||||
<ul>
|
||||
<li>1 aplicación de 0.5mg al día las primeras semanas</li>
|
||||
<li>1 óvulo de 0.5mg al día</li>
|
||||
</ul>
|
||||
<p class="mb-0"><strong>Laboratorio:</strong> Aspen</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<div class="card bg-adorno bg-transparent border-0 rounded-0 shadow-none px-3 py-4">
|
||||
<div class="row justify-content-center align-items-center py-2">
|
||||
<div class="col-7 col-md-4 col-lg-5 text-center mb-3 mb-lg-0">
|
||||
<img src="img/07.1.png" class="img-fluid">
|
||||
</div>
|
||||
<div class="col-12 col-md-8 col-lg-6">
|
||||
<p><strong>Producto:</strong> Premarin<sup>®</sup></p>
|
||||
<p><strong>Principio activo:</strong> Estrógenos conjugados de origen equino</p>
|
||||
<p><strong>Presentación:</strong></p>
|
||||
<ul>
|
||||
<li>Tubo con 43g de crema</li>
|
||||
</ul>
|
||||
<p><strong>Dosis:</strong></p>
|
||||
<ul>
|
||||
<li>1 aplicación de 0.5mg dos veces por semana o 3 semanas continuas</li>
|
||||
</ul>
|
||||
<p class="mb-0"><strong>Laboratorio:</strong> Pfizer</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<div class="card bg-adorno bg-transparent border-0 rounded-0 shadow-none px-3 py-4">
|
||||
<div class="row justify-content-center align-items-center py-2">
|
||||
<div class="col-7 col-md-4 col-lg-5 text-center mb-3 mb-lg-0">
|
||||
<img src="img/07.2.png" class="img-fluid">
|
||||
</div>
|
||||
<div class="col-12 col-md-8 col-lg-6">
|
||||
<p><strong>Producto:</strong> Premone<sup>®</sup></p>
|
||||
<p><strong>Principio activo:</strong> Estrógenos conjugados de origen equino</p>
|
||||
<p><strong>Presentación:</strong></p>
|
||||
<ul>
|
||||
<li>Tubo con 43g de crema</li>
|
||||
</ul>
|
||||
<p><strong>Dosis:</strong></p>
|
||||
<ul>
|
||||
<li>1 aplicación de 0.5mg a 2mg por día</li>
|
||||
<li>Por periodos de 3 a 6 meses</li>
|
||||
</ul>
|
||||
<p class="mb-0"><strong>Laboratorio:</strong> Italmex</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<div class="card bg-adorno bg-transparent border-0 rounded-0 shadow-none px-3 py-4">
|
||||
<div class="row justify-content-center align-items-center py-2">
|
||||
<div class="col-7 col-md-4 col-lg-5 text-center mb-3 mb-lg-0">
|
||||
<img src="img/07.3.png" class="img-fluid">
|
||||
</div>
|
||||
<div class="col-12 col-md-8 col-lg-6">
|
||||
<p><strong>Producto:</strong> Tromodil<sup>®</sup></p>
|
||||
<p><strong>Principio activo:</strong> Estrógenos conjugados de origen equino</p>
|
||||
<p><strong>Presentación:</strong></p>
|
||||
<ul>
|
||||
<li>Tubo con 43g de crema</li>
|
||||
</ul>
|
||||
<p><strong>Dosis:</strong></p>
|
||||
<ul>
|
||||
<li>1 aplicación de 0.5mg a 2mg por día</li>
|
||||
<li>Por periodos de 3 a 6 meses</li>
|
||||
</ul>
|
||||
<p class="mb-0"><strong>Laboratorio:</strong> Siegfried Rhein</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="btn-next btn-arrow d-inline-block order-2 order-lg-3 animate__animated animate__pulse animate__infinite">
|
||||
<img src="img/07.5.png" class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(function () {
|
||||
"use strict";
|
||||
$('body').addClass('fake');
|
||||
|
||||
const audioh16 = CourseNav.createSound('audio/audioh16.mp3');
|
||||
|
||||
const paths = [
|
||||
"audio/audioh16a.mp3",
|
||||
"audio/audioh16b.mp3",
|
||||
"audio/audioh16c.mp3",
|
||||
"audio/audioh16d.mp3"
|
||||
];
|
||||
let audios = [];
|
||||
paths.forEach(function (element) {
|
||||
audios.push(CourseNav.createSound(element));
|
||||
});
|
||||
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(audioh16);
|
||||
|
||||
audioh16.on('play',function(){
|
||||
$('.anim0').show();
|
||||
});
|
||||
|
||||
audioh16.on('end',function(){
|
||||
$('.apa0').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,653 @@
|
||||
<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-desarrollo.jpg");
|
||||
}
|
||||
|
||||
.fakecierre {
|
||||
background-image: url("img/actividad/fondo-cierre.jpg");
|
||||
}
|
||||
|
||||
.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: #DD3352;
|
||||
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: #DD3352 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 #DD3352 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-image: url(img/actividad/soporte-pregunta-xs.png);
|
||||
background-repeat: no-repeat;
|
||||
background-position: 100% 100%;
|
||||
background-size: 100% 100%;
|
||||
/* 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);
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.option-btn {
|
||||
transition: all .3s ease-in-out;
|
||||
color: #010068;
|
||||
}
|
||||
|
||||
.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: 1fr;
|
||||
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;
|
||||
}
|
||||
|
||||
.trophy img {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* @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: 360px auto;
|
||||
} */
|
||||
|
||||
/* .bg-pass {
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
.bg-fail {
|
||||
background-image: none;
|
||||
} */
|
||||
|
||||
.glass {
|
||||
background-image: url(img/actividad/soporte-pregunta.png);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@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 p-2 animate__animated animate__pulse animate__infinite disabled"
|
||||
id="btn-comenzar">
|
||||
<div class="inside-card px-3 py-2">Comenzar</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page-sco page-activity full-height" 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-purple-3">¿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 text-secondary rounded-3 shadow" style="background-color: rgba(0, 146, 142, .3);">
|
||||
<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" id="cierre" style="display: none;">
|
||||
<div class="grid-cierre">
|
||||
<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">
|
||||
<div class="row">
|
||||
<div class="col-12 text-center animate__animated animate__fadeInLeft passed" style="display: none;">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 text-center mb-5">
|
||||
<img src="img/actividad/bannerbien.png" class="img-fluid">
|
||||
</div>
|
||||
<div class="col-12 col-md-8">
|
||||
<div class="d-inline-block position-relative">
|
||||
<hr class="m-0 mb-2 opacity-100 border-top-2 text-green-1">
|
||||
<h1 class="fw-bold text-secondary">¡Excelente trabajo!</h1>
|
||||
<p class="mb-0">Este tipo de análisis te ayudará a responder con seguridad ante las objeciones más comunes.</p>
|
||||
<hr class="m-0 mt-2 opacity-100 border-top-2 text-green-1">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 text-center animate__animated animate__fadeInLeft failed" style="display: none;">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 text-center mb-5">
|
||||
<img src="img/actividad/bannermal.png" class="img-fluid">
|
||||
</div>
|
||||
<div class="col-12 col-md-8">
|
||||
<h1 class="fw-bold text-secondary">¡Tú puedes lograrlo!</h1>
|
||||
<p class="mb-0">No te preocupes, esta es una gran oportunidad para reforzar el concepto. Inténtalo de nuevo para
|
||||
familiarizarte mejor
|
||||
con la respuesta correcta.</p>
|
||||
<div class="w-100 text-center mt-3">
|
||||
<div class="btn btn-begin text-white fw-bold p-2 animate__animated animate__pulse animate__infinite"
|
||||
onclick="CourseNav.reload()">
|
||||
<div class="inside-card px-3 py-2">Volver a intentar</div>
|
||||
</div>
|
||||
</div>
|
||||
</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/audioh17.mp3'),
|
||||
"instrucciones": CourseNav.createSound('audio/audioh18.mp3'),
|
||||
"correcto": CourseNav.createSound('audio/audioh19.mp3'),
|
||||
"incorrecto": CourseNav.createSound('audio/audioh20.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 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-0">
|
||||
<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 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(201, 224, 221, .8)",
|
||||
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-secondary">${feedback}</p>
|
||||
</div>`;
|
||||
|
||||
if (isCorrect) {
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(audios.fc);
|
||||
} else {
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(audios.fi);
|
||||
}
|
||||
|
||||
Swal.fire({
|
||||
html: html,
|
||||
showConfirmButton: true,
|
||||
confirmButtonText: '<div class="inside-card px-4 py-2">Cerrar</div>',
|
||||
backdrop: "rgba(201, 224, 221, .95)",
|
||||
showCloseButton: false,
|
||||
target: "body",
|
||||
heightAuto: false,
|
||||
customClass: {
|
||||
popup: 'w-32em pop-retro',
|
||||
confirmButton: 'btn btn-begin pop-button-confirm text-white fw-bold animate__animated animate__pulse animate__infinite p-2'
|
||||
},
|
||||
/* 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,67 @@
|
||||
<style>
|
||||
.back0 {
|
||||
background-image: url(img/bg03.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-secondary fw-bold">¡Felicidades!</h1>
|
||||
<hr class="m-0 text-secondary border-top-perso">
|
||||
</div>
|
||||
<div class="card card-perso p-3 shadow-none rounded-4 border-0 animate__animated animate__flipInY animate__delay-1s">
|
||||
<p class="mb-0">Has concluido el módulo de Drossagyn<sup>®</sup> y ahora cuentas con los elementos esenciales para comunicar su uso, eficacia y
|
||||
seguridad con mayor claridad.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-9 col-md-6 text-center">
|
||||
<img src="img/09.0.png" class="img-fluid floating">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(function () {
|
||||
"use strict";
|
||||
$('body').addClass('fake');
|
||||
const audioh21 = CourseNav.createSound('audio/audioh21.mp3');
|
||||
CourseNav.audioController.stopAllSoundsAndPlay(audioh21);
|
||||
audioh21.on('play', function () {
|
||||
$('.anim0').show();
|
||||
});
|
||||
audioh21.on("end", function () {
|
||||
CourseNav.completeLesson();
|
||||
});
|
||||
CourseNav.setSlideVisited();
|
||||
CourseNav.completeLesson();
|
||||
});
|
||||
</script>
|
||||
Reference in New Issue
Block a user