260 lines
9.9 KiB
HTML
260 lines
9.9 KiB
HTML
<style>
|
|
.fake {
|
|
background-image: url('img/mo.png');
|
|
background-size: cover;
|
|
background-position: center;
|
|
}
|
|
|
|
/* --- Contenedor de la Burbuja --- */
|
|
.speech-bubble {
|
|
position: relative;
|
|
background: #ffffff; /* Fondo blanco */
|
|
color: #333333; /* Texto oscuro para legibilidad */
|
|
border-radius: 0.5em;
|
|
padding: 1.5rem;
|
|
font-size: 1.1rem;
|
|
min-height: 120px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* Sombra para resaltar sobre el fondo */
|
|
transition: all 0.3s ease-in-out;
|
|
}
|
|
|
|
.bubble-text {
|
|
line-height: 1.5;
|
|
}
|
|
|
|
/* --- Animaciones de Personajes (Foco visual) --- */
|
|
.speaker-active {
|
|
transform: scale(1.05);
|
|
filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.2));
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.speaker-inactive {
|
|
opacity: 0.6;
|
|
transform: scale(0.95);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
/* --- COMPORTAMIENTO MOBILE (Apilamiento vertical de Bootstrap) --- */
|
|
@media (max-width: 767.98px) {
|
|
/* Apunta hacia arriba (al Médico) */
|
|
.speech-bubble-left::after {
|
|
content: '';
|
|
position: absolute;
|
|
left: 50%;
|
|
top: -20px;
|
|
transform: translateX(-50%);
|
|
border: 20px solid transparent;
|
|
border-width: 0 20px 20px 20px;
|
|
border-bottom-color: #ffffff; /* Coincide con el fondo blanco */
|
|
margin: 0;
|
|
}
|
|
|
|
/* Apunta hacia abajo (al Representante) */
|
|
.speech-bubble-right::after {
|
|
content: '';
|
|
position: absolute;
|
|
left: 50%;
|
|
top: auto;
|
|
bottom: -20px;
|
|
transform: translateX(-50%);
|
|
border: 20px solid transparent;
|
|
border-width: 20px 20px 0 20px;
|
|
border-top-color: #ffffff; /* Coincide con el fondo blanco */
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
/* --- COMPORTAMIENTO DESKTOP (md y superior) --- */
|
|
@media (min-width: 768px) {
|
|
/* Apunta hacia la izquierda */
|
|
.speech-bubble-left::after {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
top: 50%;
|
|
width: 0;
|
|
height: 0;
|
|
border: 20px solid transparent;
|
|
border-right-color: #ffffff; /* Coincide con el fondo blanco */
|
|
border-left: 0;
|
|
margin-top: -20px;
|
|
margin-left: -20px;
|
|
transform: none;
|
|
}
|
|
|
|
/* Apunta hacia la derecha */
|
|
.speech-bubble-right::after {
|
|
content: '';
|
|
position: absolute;
|
|
right: 0;
|
|
left: auto;
|
|
top: 50%;
|
|
width: 0;
|
|
height: 0;
|
|
border: 20px solid transparent;
|
|
border-left-color: #ffffff; /* Coincide con el fondo blanco */
|
|
border-right: 0;
|
|
margin-top: -20px;
|
|
margin-right: -20px;
|
|
transform: none;
|
|
}
|
|
}
|
|
</style>
|
|
</style>
|
|
|
|
<div class='page-sco py-3 py-md-4 bg-transparent'>
|
|
<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 text-center'>
|
|
<h2 class='mb-4 fw-semibold text-center'>Manejo de Objeciones</h2>
|
|
</div>
|
|
|
|
<!-- Avatar Médico -->
|
|
<div class='col-6 col-md-3 text-center'>
|
|
<img src='img/med.png' class='img-fluid speaker-inactive' alt='Médico' id="medico">
|
|
</div>
|
|
|
|
<!-- Contenedor Dinámico de Diálogo -->
|
|
<div class='col-12 col-md-6 text-center'>
|
|
<div id="dialogue-bubble" class="speech-bubble">
|
|
<div id="dialogue-text" class="bubble-text">
|
|
<!-- El texto se inyecta dinámicamente mediante JS -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Avatar Representante -->
|
|
<div class='col-6 col-md-3 text-center'>
|
|
<img src='img/rep.png' class='img-fluid speaker-inactive' alt='Representante' id="rep">
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
/**
|
|
* Módulo de Diálogo Interactivo
|
|
* Orquesta la secuencia de texto y audio, manipulando el DOM según el hablante activo.
|
|
*/
|
|
$(function () {
|
|
"use strict";
|
|
|
|
$('body').addClass('fake');
|
|
|
|
// Configuración de la secuencia del diálogo
|
|
const mo = [
|
|
{
|
|
text: "¿Por qué Ogestan Plus tiene tan poca cantidad de hierro bisglicinato?",
|
|
sound: typeof CourseNav !== 'undefined' ? CourseNav.createSound('audio/mo/0026-objecion_1_ogestanplus.mp3') : null,
|
|
img: '#medico'
|
|
},
|
|
{
|
|
text: "Doctor, comprendo que la cantidad de hierro en la formulación de Ogestan Plus llame su atención.",
|
|
sound: typeof CourseNav !== 'undefined' ? CourseNav.createSound('audio/mo/mo01.mp3') : null,
|
|
img: '#rep'
|
|
},
|
|
{
|
|
text: "Permítame compartirle que esta corresponde a la cantidad óptima que debe contener un suplemento alimenticio como lo es Ogestan Plus. Este producto no fue formulado como un medicamento para corregir una anemia ferropénica establecida ni como tratamiento de una deficiencia diagnosticada; para esos casos, por supuesto, usted requerirá esquemas terapéuticos específicos con dosis más altas según el perfil clínico de la paciente.",
|
|
sound: typeof CourseNav !== 'undefined' ? CourseNav.createSound('audio/mo/mo02.mp3') : null,
|
|
img: '#rep'
|
|
},
|
|
{
|
|
text: "Ogestan Plus está pensado como una suplementación complementaria y de mantenimiento para mujeres en etapa de embarazo e incluso en lactancia, buscando cubrir los requerimientos fisiológicos diarios al sumarse a la alimentación habitual, pero evitando la sobrecarga gastrointestinal que suele comprometer la adherencia, a diferencia de otros hierros como el sulfato ferroso, por ejemplo.",
|
|
sound: typeof CourseNav !== 'undefined' ? CourseNav.createSound('audio/mo/mo03.mp3') : null,
|
|
img: '#rep'
|
|
},
|
|
{
|
|
text: "Sabemos que la ingesta dietética recomendada de hierro durante el embarazo es de 27 mg al día.",
|
|
sound: typeof CourseNav !== 'undefined' ? CourseNav.createSound('audio/mo/mo04.mp3') : null,
|
|
img: '#rep'
|
|
},
|
|
{
|
|
text: "En una paciente sin deficiencia previa, una dieta promedio suele aportar entre 12 y 15 mg diarios.",
|
|
sound: typeof CourseNav !== 'undefined' ? CourseNav.createSound('audio/mo/mo05.mp3') : null,
|
|
img: '#rep'
|
|
},
|
|
{
|
|
text: "Por eso, al aportar 14 mg de hierro bisglicinato, Ogestan Plus permite alcanzar un total cercano a los 27-30 mg diarios, que es justamente el rango fisiológico recomendado para acompañar el embarazo de forma preventiva. Además, no se trata solo de la cantidad, sino de la forma química. ",
|
|
sound: typeof CourseNav !== 'undefined' ? CourseNav.createSound('audio/mo/mo06.mp3') : null,
|
|
img: '#rep'
|
|
},
|
|
{
|
|
text: "El hierro bisglicinato tiene una biodisponibilidad superior y una tolerancia digestiva considerablemente mejor que otras sales tradicionales, lo que favorece el apego al tratamiento por parte de las pacientes. Con Ogestan Plus estará seguro y con la tranquilidad de que sus pacientes no cursarán con síntomas gastrointestinales molestos como náusea, diarrea o estreñimiento, por mencionar algunos.",
|
|
sound: typeof CourseNav !== 'undefined' ? CourseNav.createSound('audio/mo/mo07.mp3') : null,
|
|
img: '#rep'
|
|
}
|
|
,
|
|
{
|
|
text: "Entonces, más que pensar en 'poca cantidad', la pregunta sería: ¿es la dosis fisiológicamente suficiente, bien tolerada y sostenible durante todo el embarazo? Ogestan Plus está diseñado para ofrecer justo ese equilibrio entre eficacia preventiva, biodisponibilidad y adherencia. Interesante, ¿no le parece, doctor?",
|
|
sound: typeof CourseNav !== 'undefined' ? CourseNav.createSound('audio/mo/mo08.mp3') : null,
|
|
img: '#rep'
|
|
}
|
|
];
|
|
|
|
// Caché de elementos del DOM
|
|
const $bubble = $('#dialogue-bubble');
|
|
const $text = $('#dialogue-text');
|
|
const $medico = $('#medico');
|
|
const $rep = $('#rep');
|
|
|
|
/**
|
|
* Ejecuta un nodo de diálogo recursivamente hasta finalizar el array.
|
|
* @param {number} index - Índice actual de la conversación.
|
|
*/
|
|
function playDialogueStep(index) {
|
|
// Condición de cierre: Secuencia terminada
|
|
if (index >= mo.length) {
|
|
if (typeof CourseNav !== 'undefined' && typeof CourseNav.completeLesson === 'function') {
|
|
CourseNav.setSlideVisited();
|
|
}
|
|
return;
|
|
}
|
|
|
|
const currentStep = mo[index];
|
|
|
|
// 1. Actualizar texto con transición limpia
|
|
$text.hide().html(`<p class="mb-0 m-0">${currentStep.text}</p>`).fadeIn(300);
|
|
|
|
// 2. Gestionar la orientación de la burbuja y el foco en los personajes
|
|
if (currentStep.img === '#medico') {
|
|
$bubble.removeClass('speech-bubble-right').addClass('speech-bubble-left');
|
|
$medico.removeClass('speaker-inactive').addClass('speaker-active');
|
|
$rep.removeClass('speaker-active').addClass('speaker-inactive');
|
|
} else if (currentStep.img === '#rep') {
|
|
$bubble.removeClass('speech-bubble-left').addClass('speech-bubble-right');
|
|
$rep.removeClass('speaker-inactive').addClass('speaker-active');
|
|
$medico.removeClass('speaker-active').addClass('speaker-inactive');
|
|
}
|
|
|
|
// 3. Reproducir audio e instanciar el listener recursivo
|
|
if (typeof CourseNav !== 'undefined' && CourseNav.audioController && currentStep.sound) {
|
|
CourseNav.audioController.stopAllSoundsAndPlay(currentStep.sound);
|
|
|
|
// Asumiendo que CourseNav utiliza Howler.js u otra API basada en eventos (on/once)
|
|
currentStep.sound.once("end", function () {
|
|
playDialogueStep(index + 1);
|
|
});
|
|
} else {
|
|
// Fallback para entornos de desarrollo donde el audio no esté cargado
|
|
console.warn(`[Modo Desarrollo]: Simulando delay para el audio de: ${currentStep.img}`);
|
|
setTimeout(() => {
|
|
playDialogueStep(index + 1);
|
|
}, 4000);
|
|
}
|
|
}
|
|
|
|
// Inicializar el diálogo
|
|
playDialogueStep(0);
|
|
});
|
|
</script>
|