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

Update: Adiccionales M2

Browse Source
This commit is contained in:
andres.sanjuan 2025-12-12 14:59:22 -06:00
parent 7d85a01b74
commit 53685a2201
6 changed files with 22 additions and 1116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

260
Ogestan_andractiv/contenido/02.bak.html
View File

@ -1,260 +0,0 @@
<style>
.back0 {
background-image: url(img/bg02.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.shadow-externo {
box-shadow: 0 0 10px rgba(0, 0, 0, .5);
}
.gradient-card {
background: #C1C902;
background: linear-gradient(to right, #C1C902 0%, #006EAB 100%);
}
.cid0 .swiper-wrapper {
box-sizing: border-box;
}
.btn-circ {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
border-radius: 100%;
background: #F2F2F2;
background: linear-gradient(to bottom, #F2F2F2 11%, #BDCCD4 100%);
outline: 8px solid rgba(14, 28, 98, .3);
cursor: pointer;
}
.circ_interno {
width: 34px;
height: 34px;
border-radius: 100%;
background: #dcdcdc;
}
.btn-circ:hover .circ_interno {
background: #DD3352;
background: linear-gradient(to top, #DD3352 11%, #FEA968 100%);
}
.btn-circ.selected .circ_interno {
background: #DD3352;
background: linear-gradient(to top, #DD3352 11%, #FEA968 100%);
}
.custom-grid {
position: relative;
display: grid;
width: 100%;
justify-content: center;
align-items: center;
grid-template-columns: 1fr;
grid-template-rows: auto;
gap: 20px;
}
.anim0 {
display: none;
}
@media(min-width: 768px) {
.text-t {
max-width: 25%;
margin-right: 3%;
}
.text-t1 {
flex: 1;
}
.custom-flx {
max-width: 70%;
}
.text-2 {
flex: 1;
max-width: 70%;
text-align: center;
}
}
</style>
<div class='page-sco back0 py-3 py-md-4'>
<div class='container'>
<div class='row justify-content-center align-items-center'>
<div class='col-12'>
<div class='row justify-content-center'>
<div class="col-12 mb-3 text-center anim0 animate__animated animate__lightSpeedInLeft">
<h2 class="text-primary fw-bold">La familia OGestan<sup>®</sup>: lo esencial para el proceso de fertilidad, embarazo y lactancia</h2>
</div>
<div class="col-12 col-lg-10 apa0 animate__animated animate__zoomIn" style="display: none;">
<div class="shadow-externo rounded-3">
<div class="swiper cid0">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="card gradient-card border-0 rounded-3 shadow-none p-2">
<div class="card-body bg-white border-0 rounded-3 shadow-none px-3 pt-3 pb-0">
<div class="row justify-content-center align-items-center">
<div class="col-6 col-md-4 text-center order-2 order-md-1">
<img src="img/02.0.png" class="img-fluid">
</div>
<div class="col-12 col-md-8 order-1 order-md-2 mb-3 mb-md-0">
<div class="row justify-content-center">
<div class="col-12 mb-3">
<p class="mb-0">OGestan<sup>®</sup> acompaña a la mujer —y también al hombre— durante todo el proceso reproductivo:</p>
</div>
<div class="col-8 col-md-7 col-lg-12 text-center mb-3">
<img src="img/02.1.png" class="img-fluid">
</div>
<div class="col-12 text-center">
<p class="mb-0">Preconcepción y 1er trimestre de embarazo.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="card gradient-card border-0 rounded-3 shadow-none p-2">
<div class="card-body bg-white border-0 rounded-3 shadow-none px-3 pt-3 pb-0">
<div class="row justify-content-center align-items-center">
<div class="col-6 col-md-4 text-center order-2 order-md-1">
<img src="img/02.2.png" class="img-fluid">
</div>
<div class="col-12 col-md-8 order-1 order-md-2 mb-3 mb-md-0">
<div class="row justify-content-center">
<div class="col-8 col-md-7 col-lg-12 text-center mb-3">
<img src="img/02.3.png" class="img-fluid">
</div>
<div class="col-12 text-center">
<p class="mb-0">2do trimestre, 3er trimestre y lactancia (hasta los 6 meses de lactancia).</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="card gradient-card border-0 rounded-3 shadow-none p-2">
<div class="card-body bg-white border-0 rounded-3 shadow-none px-3 py-3">
<div class="row justify-content-center align-items-center">
<div class="col-12">
<div class="custom-grid">
<div class="d-flex flex-wrap justify-content-center align-items-center gap-2">
<div class="text-t">
<p class="mb-0 fw-bold text-pink">Fertilidad Femenina</p>
</div>
<div class="d-flex custom-flx flex-fill gap-2 justify-content-center text-center">
<div class="text-t1">
<p>1er trimestre de <br> embarazo</p>
<img src="img/02.1.png" class="img-fluid">
</div>
<div class="text-t1">
<p>2do trimestre de <br> embarazo hasta lactancia</p>
<img src="img/02.3.png" class="img-fluid">
</div>
</div>
</div>
<div class="position-relative w-100">
<img src="img/02.4" class="img-fluid">
</div>
<div class="d-flex flex-wrap justify-content-center align-items-center gap-2">
<div class="text-t">
<p class="mb-0 fw-bold text-pink">Fertilidad masculina</p>
</div>
<div class="text-2 d-flex justify-content-center">
<div class="col-7 col-md-6 col-lg-8 text-center">
<img src="img/02.5.png" class="img-fluid">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="position-relative w-100 mt-3">
<div class="d-flex justify-content-center align-items-center gap-4">
<div class="btn-circ animate__animated animate__pulse animate__infinite" data-slide="0">
<div class="circ_interno"></div>
</div>
<div class="btn-circ animate__animated animate__pulse animate__infinite" data-slide="1">
<div class="circ_interno"></div>
</div>
<div class="btn-circ animate__animated animate__pulse animate__infinite" data-slide="2">
<div class="circ_interno"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
$(function () {
"use strict";
$('body').addClass('fake');
const audiom02a = CourseNav.createSound('audio/audiom02a.mp3');
CourseNav.audioController.stopAllSoundsAndPlay(audiom02a);
audiom02a.on('play', function () {
$('.anim0').show();
});
audiom02a.on('end',function(){
$('.apa0').show();
$('.btn-circ').first().click();
});
const paths = [
"audio/audiom02b.mp3",
"audio/audiom03.mp3",
"audio/audiom04.mp3"
];
let audios = [];
paths.forEach(function (element) {
audios.push(CourseNav.createSound(element));
});
const mySwiper = new Swiper(".cid0", {
effect: "slide",
autoHeight: true,
slidesPerView: 1,
spaceBetween: 10
});
$('.btn-circ').click(function(){
CourseNav.soundClick();
const slideIndex = $(this).data('slide');
mySwiper.slideTo(slideIndex);
$(this).removeClass('animate__animated animate__pulse animate__infinite');
$('.btn-circ').removeClass('selected');
$(this).addClass('selected completed');
if($('.btn-circ.completed').length === $('.btn-circ').length){
CourseNav.setSlideVisited();
}
if(audios[slideIndex]){
CourseNav.audioController.stopAllSoundsAndPlay(audios[slideIndex]);
}
});
});
</script>

110
Ogestan_andractiv/contenido/03.bak.html
View File

@ -1,110 +0,0 @@
<style>
.back0 {
background-image: url(img/bg03.jpg);
background-size: cover;
background-position: 12% 100%;
background-repeat: no-repeat;
}
.back1 {
background-image: url(img/bg04.jpg);
background-size: cover;
background-position: 12% 100%;
background-repeat: no-repeat;
}
.text-card {
background-color: rgba(255, 255, 255, .7);
border-radius: 15px;
box-shadow: 0 0 8px rgba(0, 0, 0, .5);
}
.anim0 {
display: none;
}
@media(min-width: 768px) {
.back0 {
background-position: 28% 100%;
}
.text-card {
background-color: transparent;
border-radius: 0;
box-shadow: none;
}
}
</style>
<div class='page-sco'>
<div class="sec_i0 back0 py-2 py-md-4 flex-fill d-flex flex-column justify-content-center align-items-center">
<div class='container'>
<div class='row justify-content-center align-items-center'>
<div class='col-12'>
<div class='row justify-content-center justify-content-md-end mb-3'>
<div class="col-12 col-md-7 col-lg-6 text-center anim0" data-sal="slide-down">
<div class="d-inline-block position-relative">
<hr class="m-0 mb-2 opacity-100 border-top-2 text-white">
<div class="text-card p-2 p-md-0">
<h2 class="text-primary fw-bold">¿Qué es OGestan<sup>®</sup> Plus?</h2>
<p class="mb-0"><strong>OGestan<sup class="fw-bolder">®</sup> Plus</strong> es un suplemento alimenticio
en cápsulas, con aceite de pescado vitaminas y minerales. Forma parte de la
línea OGestan<sup>®</sup>, enfocada en acompañar a la madre y al bebé en su desarrollo.</p>
</div>
<hr class="m-0 mt-2 opacity-100 border-top-2 text-white">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="sec_i1 py-2 py-md-4" style="display: none;">
<div class="container">
<div class="row justify-content-center">
<div class="col-12">
<div class="row justify-content-center">
<div class="col-12 text-center">
<div class="btn-next-section d-inline-block animate__animated animate__pulse animate__infinite" data-sec="sec1">
<img src="img/nSec.png" class="img-fluid">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="sec1" class='page-sco py-2 py-md-4 back1'>
<div class="container">
<div class="row justify-content-center align-items-center">
<div class="col-12">
<div class="row justify-content-center"></div>
</div>
</div>
</div>
</div>
<script>
$(function () {
"use strict";
$('body').addClass('fake');
const audiom05 = CourseNav.createSound('audio/audiom05.mp3');
CourseNav.audioController.stopAllSoundsAndPlay(audiom05);
audiom05.on('play',function(){
$('.anim0').show();
});
audiom05.on('end',function(){
$('.sec_i1').show();
CourseNav.setSlideVisited();
});
$('.btn-next-section').click(function(){
CourseNav.soundClick();
$(this).removeClass('animate__animated animate__pulse animate__infinite');
gotoSection($(this).data('sec'));
});
});
</script>

8
Ogestan_andractiv/contenido/03.html
View File

@ -181,6 +181,7 @@
.swiper {
overflow: visible;
}
content: "";
display: block;
width: 60%;
@ -229,6 +230,10 @@
padding: 0px;
}
.mySwiper .swiper-slide-active img {
transform: scale(1.2);
}
}
</style>
<div class="w-100 page-sco back0 h-100 pt-4 pt-md-0" id="sco15">
@ -453,7 +458,8 @@
<div class="card w-100 bg-white border-custom">
<div class="card-body py-md-5 px-md-5">
<h3 class="text-blue-4 fw-semibold">Vitamina D</h3>
<p>Mejora la <b class="text-orange-1">calidad</b> del semen y la <b class="text-orange-1">fertilidad
<p>Mejora la <b class="text-orange-1">calidad</b> del
semen y la <b class="text-orange-1">fertilidad
masculina</b>.</p>
</div>
</div>

4
Ogestan_andractiv/contenido/06.html
View File

@ -116,7 +116,7 @@
</style>
<div class="w-100 page-sco back0 h-100 p-0">
<div class="full-screen">
<div class="eletxt">
<div class="eletxt my-3 my-md-0">
<div class="w-100 text-center mt-md-4 mt-2 animate__animated animate__fadeInDown">
<h2 class="fw-semibold text-blue-4"><span class="bg-white border-3 rounded-15 border border-blue-7 py-2 px-4">Competidores</span></h2>
</div>
@ -175,7 +175,7 @@
<div class="row justify-content-center align-items-center">
<div class="col-12 col-md-10 col-xl-8 text-center">
<ul class="text-start custom-li">
<li>Fabricantes <b class="text-orange-1"> establecidos, ni reconocidos</b> en México.</li>
<li>Fabricantes <b class="text-orange-1"> no establecidos, ni reconocidos</b> en México.</li>
<li>Venta sólo por E-commerce y enviados desde el extranjero.</li>
<li><b class="text-orange-1">Sin permisos</b> por la autoridad mexicana.</li>
<li><b class="text-orange-1">Sin respaldo</b> o soporte científico.</li>

730
Ogestan_andractiv/contenido/07.bak.html
View File

@ -1,730 +0,0 @@
<style>
.fake {
background-image: url("img/actividad/inicio.webp");
background-position: center bottom;
background-repeat: no-repeat;
background-size: cover;
}
.fake-activity {
background-image: url("img/actividad/desarrollo.webp");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.fake-closing {
background-image: url("img/actividad/inicio.webp");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.fake-max-attempts {
background-image: url("img/actividad/inicio.webp");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.page-activity {
display: none;
}
.swal-instructions,
.pieces-card {
background: transparent;
box-shadow: none;
border: none;
border-radius: 0px !important;
}
#inicio {
display: flex;
}
.option-btn {
width: 100%;
height: max-content;
margin-bottom: 1em;
text-align: center;
cursor: pointer;
text-align: center;
border: solid 0px var(--bs-rosa-claro);
border-radius: 10px;
padding: 5px;
background: #ffffffe8;
box-shadow: 15px 9px 0px 3px #b7bcbe;
display: flex;
justify-content: center;
align-items: center;
}
.option-btn:hover i {
color: var(--bs-secondary);
}
.option-btn.selected {
background: var(--bs-secondary);
color: #fff;
}
.results {
text-align: center;
}
.results h2 {
margin-bottom: 20px;
}
.custom-card {
/* background: linear-gradient(180deg, #ffffff 0%, #c0b9c8 100%); */
border-radius: 15px;
border: solid 2px #fff;
}
.visualFeedback {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
position: relative;
}
.piece {
cursor: pointer;
/*display: flex;*/
/*align-items: end;*/
}
.list-options {
display: flex;
justify-content: space-around;
}
.list-options li {
display: inline-flex;
align-items: center;
}
.piece.completed img {
/* filter: grayscale(100%); */
}
.custom-hr {
border: 1px solid #ff5733;
/* Cambia #ff5733 por el color que desees */
}
.pop_course {
width: 80%;
}
.feedback {
display: none;
}
.option-btn img {
width: 100px;
}
.swal2-popup {
box-shadow: none !important;
}
@media (min-width: 768px) {
/* .fake {
background-image: url("img/actividad/bg25.1.webp");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
} */
.option-btn {
text-align: center;
}
.option-btn {
width: 100%;
height: 200px;
}
.piece {
max-width: 100px;
}
.visualFeedback {
bottom: 0px;
}
.pieces-wrap {
transform: translate(0px, 40px);
z-index: 50;
position: relative;
}
.pop_course {
width: 30%;
}
}
</style>
<div class="page-sco page-activity h-100" id="inicio">
<div class="container">
<div class="row justify-content-center align-items-md-center align-items-center">
<div class="col-12">
<div class="row justify-content-center align-items-center">
<div class="col-7 col-md-6 text-center animate__animated animate__bounceInLeft">
<div class="row justify-content-center align-items-center">
<div class="col-12 col-md-9">
<img src="img/actividad/0.webp" class="img-fluid" loading="lazy" alt="" />
</div>
</div>
</div>
<div class="col-12 col-md-6 pt-4 pt-md-0 animate__animated animate__bounceInRight">
<div class="card custom-card bg-white border-0">
<div class="card-body text-center">
<h1 class="text-primary fw-bold">¿Quién está diciendo la verdad?</h1>
<p>En esta actividad podrás practicar cómo responder
<b>objeciones</b> y elegir quién da la respuesta correcta.
</p>
<p>Prepárate para afinar tu criterio y tomar la mejor decisión.</p>
</div>
</div>
<div class="w-100 my-md-3 my-2 text-center"><button class="btn btn-primary disable"
id="btn-comenzar">Comenzar</button></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="page-sco page-activity h-100" id="desarrollo" style="display: none;">
<div class="container-fluid h-100">
<div class="row justify-content-center align-items-center align-items-md-start h-100">
<div class="col-12 col-md-12 px-0 bg-gris text-white intro">
<div class="row justify-content-center align-items-center my-2 my-md-4 mx-3">
<div class="col-12 col-md-10">
<p><b>Instrucciones:</b> Lee la respuesta de los dos representantes sobre una objeción. Analiza
cuidadosamente sus argumentos y elige quién tiene la razón.</p>
</div>
</div>
</div>
<div class="col-12 col-md-12 pt-0 pt-md-2">
<div class="row justify-content-center align-items-center">
<div class="col-11 col-md-10 mb-md-3">
<div class="card custom-card flat pieces-card d-block d-md-block mb-md-3">
<div class="card-body w-100 py-2">
<div id="quiz-container"></div>
</div>
</div>
</div>
<div class="d-none d-md-block" id="row-x"></div>
<div class="col-12 col-md-5">
<div class="row justify-content-center align-items-center">
<div class="piece col-2 col-md-2" data-piece="1">
<img src="img/actividad/checked.webp" class="img-fluid" loading="lazy" alt="" />
</div>
<div class="piece col-2 col-md-2" data-piece="2">
<img src="img/actividad/checked.webp" class="img-fluid" loading="lazy" alt="" />
</div>
<div class="piece col-2 col-md-2" data-piece="3">
<img src="img/actividad/checked.webp" class="img-fluid" loading="lazy" alt="" />
</div>
<div class="piece col-2 col-md-2" data-piece="4">
<img src="img/actividad/checked.webp" class="img-fluid" loading="lazy" alt="" />
</div>
<div class="piece col-2 col-md-2" data-piece="5">
<img src="img/actividad/checked.webp" class="img-fluid" loading="lazy" alt="" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="page-sco page-activity h-100" id="cierre" style="display: none;">
<div class="container h-100">
<div class="row justify-content-center align-items-center h-100">
<div class="col-12 col-md-10">
<div class="row justify-content-center align-items-center">
<div class="col-12 col-md-6">
<div class="card bg-white">
<div class="card-body">
<div class="passed text-center feedback">
<h1 class="text-rosa-claro fw-bold">¡Muy bien!</h1>
<p>Has demostrado una excelente comprensión del programa Tutoría Campo.</p>
<p>Tu capacidad para <b>distinguir</b> entre información correcta y confusiones
comunes es clave para
aplicar este conocimiento con claridad y seguridad.</p>
</div>
<div class="failed text-center feedback">
<h1 class="text-rosa-claro fw-bold">¿Te confundiste?</h1>
<p>Te invitamos a intentarlo una vez más para reforzar lo aprendido y mejorar tu
resultado. </p>
<p class="text-center fw-bold text-primary">¡Tú puedes!</p>
</div>
<div class="without-attempts text-center feedback">
<p>Revisa nuevamente el contenido y responde la actividad cuando estés preparado.
</p>
</div>
</div>
</div>
<div class="row justify-content-center failed feedback my-3">
<div class="col-12 col-md-12 text-center">
<button
class="btn btn-mango animate__animated animate__pulse animate__infinite waves-effect"
id="reintentar">Volver a intentar</button>
</div>
</div>
<div class="row justify-content-center without-attempts feedback my-3">
<div class="col-12 col-md-12 text-center">
<button id="reiniciar"
class="btn btn-mango animate__animated animate__pulse animate__infinite waves-effect">Reiniciar</button>
</div>
</div>
</div>
<div class="col-12 col-md-6 text-center">
<div class="row justify-content-center">
<div class="col-7 col-md-10 my-2 my-md-0 text-center">
<img src="img/actividad/correct.webp" class="img-fluid passed feedback">
<img src="img/actividad/failed.webp" class="img-fluid failed feedback">
<img src="img/actividad/attempts.webp" class="img-fluid without-attempts feedback">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="js/QuizManager.min.js"></script>
<script>
$(document).ready(async function () {
// Configuración inicial
$("body").addClass("fake");
//Configuracion de audio
const audios = {
fondo: CourseNav.createSound("audio/FastTalkin.mp3"),
introduction: CourseNav.createSound("audio/audioh23.mp3"),
instruccions: CourseNav.createSound("audio/audioh24.mp3"),
correct: CourseNav.createSound("audio/audioh25.mp3"),
incorrect: CourseNav.createSound("audio/audioh26.mp3"),
attemptLimitReached: CourseNav.createSound("audio/audioh27.mp3"),
feedbackIncorrect: CourseNav.createSound("audio/feedback-incorrect.mp3"),
feedbackCorrect: CourseNav.createSound("audio/feedback-correct.mp3"),
// videogame: CourseNav.createSound("audio/video-game.mp3"),
openQuestion: CourseNav.createSound("audio/open-question.mp3"),
gameover: CourseNav.createSound("audio/game-over.mp3"),
};
// Configuración de las páginas
const pageActivity = ".page-activity";
const pageStart = "#inicio";
const pageDevelopment = "#desarrollo";
const pageSummary = "#cierre";
//Configuracion Instrucciones
let InstructionsPop = false;
// Crear instancia de QuizManager
const quizManager = new QuizManager({
excelFileUrl: "Quiz.xlsx",
mandatoryFields: {
question: "pregunta",
correctFeedback: "retroalimentacion_correcta",
incorrectFeedback: "retroalimentacion_incorrecta",
},
optionPrefix: "opcion", // Prefijo para las opciones
randomizeQuestions: true, // Habilitar preguntas aleatorias
randomizeOptions: false, // Habilitar opciones aleatorias
passingScore: 80, // Puntaje mínimo aprobatorio
defaultWeight: 1, // Ponderación por defecto
maxAttempts: 3, // Intentos máximos por defecto
specialOptions: ["Ninguna de las anteriores", "Todas las anteriores"], // Textos especiales
maxQuestions: 5, // Limitar a 5 preguntas
});
// Configurar intentos iniciales con validación desde el LMS
const attempt = !isNaN(CourseNav.getLessonLocation()) ? Number(CourseNav.getLessonLocation()) : 0;
// Establecer los intentos iniciales
quizManager.setAttempts(attempt);
// Cargar las preguntas al inicio
await loadAndStartQuiz();
audios.instruccions.on("end", function () {
if (InstructionsPop) {
$('.swal-confirm').addClass('animate__animated animate__pulse animate__infinite');
} else {
$('.piece[data-piece="1"]').click();
if (!$('#row-x').is(':visible')) {
$('.intro').hide();
}
}
});
// Manejar clic en el botón "Comenzar"
$("#btn-comenzar").click(function () {
const maxAttempts = quizManager.config.maxAttempts || Infinity; // Obtener intentos máximos
const attemptsMade = quizManager.getAttempts(); // Intentos realizados
$("body").removeClass("fake").addClass("fake-activity");
// if (!quizManager.hasReachedMaxAttempts()) {
$(pageActivity).hide();
$(pageDevelopment).show();
// Incrementar los intentos y guardar en el LMS
quizManager.incrementAttempts();
CourseNav.setLessonLocation(quizManager.getAttempts());
$(".piece").addClass("disabled");
$(".piece").first().removeClass("disabled");
// Mostrar instrucciones siempre en un pop de swal js y reproducir audio al abrir el pop
if (InstructionsPop) {
Swal.fire({
html: "<div class=''><h4>Instrucciones</h4><p class='w-100 text-start'>Da clic en cada ícono para leer las preguntas y elige las respuestas correctas. Si respondes correctamente, podrás atrapar al espía.</p><div class='col-12'><div class='row justify-content-center'><div class='col-5 col-md-2'><img src='img/25.1.webp' class='img-fluid'></div><div class='col-5 col-md-2'><img src='img/25.2.webp' class='img-fluid'></div><div class='col-5 col-md-2 my-2 my-md-0'><img src='img/25.3.webp' class='img-fluid'></div><div class='col-5 col-md-2 my-2 my-md-0'><img src='img/25.4.webp' class='img-fluid'></div></div></div></div>",
confirmButtonText: "Aceptar",
customClass: "swal-instructions",
didOpen: () => {
CourseNav.audioController.stopAllSoundsAndPlay(audios.instruccions);
},
didClose: () => {
CourseNav.audioController.stopAudio();
audios.fondo.loop(true).volume(0.2).play();
},
});
} else {
CourseNav.audioController.stopAllSoundsAndPlay(audios.instruccions);
}
// } else {
// Mostrar mensaje si se alcanzó el límite de intentos
// const maxAttemptsTxt = maxAttempts === Infinity ? "&infin;" : maxAttempts;
// Swal.fire({
// icon: "error",
// title: "¡Límite de intentos alcanzado!",
// html: `
// <p>Has alcanzado el límite de intentos.</p>
// <p><strong>Intentos realizados:</strong> ${attemptsMade}</p>
// <p><strong>Intentos permitidos:</strong> ${maxAttemptsTxt}</p>
// `,
// confirmButtonText: "Aceptar",
// }).then(() => {
// CourseNav.resetCourse();
// });
// }
});
/**
* Carga las preguntas desde el archivo Excel y muestra el inicio.
*/
async function loadAndStartQuiz() {
try {
await quizManager.loadQuestionsFromExcel();
//console.table(quizManager.getAllRenderData());
$("#loader-course360").hide();
} catch (error) {
//console.error("Error al cargar las preguntas:", error);
$("#loader-course360").hide(); // Asegurarse de ocultar el loader en caso de error
}
}
/**
* Renderiza la pregunta actual en un contenedor específico o en un Swal.
* @param {string} containerSelector - Selector del contenedor donde se renderizará la pregunta.
* @param {boolean} [useSwal=false] - Si es `true`, muestra la pregunta en un Swal en lugar del contenedor.
*/
function renderQuestion(containerSelector, useSwal) {
const questionData = quizManager.getRenderData();
if (questionData) {
const questionHtml = `
<p id="question-text" class="card bg-white text-center fw-bold py-4 px-3">${questionData.text}</p>
<ul class="list-unstyled list-options row justify-content-center align-items-center">
<li class="col-12 col-md-5 d-flex justify-content-center">
<div class="option-btn d-flex flex-row flex-md-column justify-content-center" data-correct="${questionData.options[0].isCorrect}">
${questionData.options[0].text}
</div>
</li>
<li class="col-12 col-md-2 d-flex justify-content-center align-items-center">
<img src="img/actividad/vs.webp" alt="Versus" class="img-fluid" style="max-height:80px;">
</li>
<li class="col-12 col-md-5 d-flex justify-content-center">
<div class="option-btn d-flex flex-row flex-md-column justify-content-center" data-correct="${questionData.options[1].isCorrect}">
${questionData.options[1].text}
</div>
</li>
</ul>
<div class="w-100 d-none justify-content-center">
<button id="validate-btn" class="btn btn-primary mt-3">Validar</button>
</div>
`;
if (useSwal) {
// Mostrar la pregunta en un Swal
Swal.fire({
html: questionHtml,
showConfirmButton: false,
customClass: { popup: "swal-question-popup" },
didOpen: () => {
const swalContent = Swal.getHtmlContainer(); // Obtiene el contenedor HTML actual de Swal
// Eliminar cualquier controlador anterior para evitar duplicados
$(swalContent)
.find(".option-btn")
.off("click")
.on("click", function () {
$("#validate-btn").addClass("animate__animated animate__pulse animate__infinite");
if (questionData.multiple) {
$(this).toggleClass("selected");
} else {
$(swalContent).find(".option-btn").removeClass("selected");
$(this).addClass("selected");
}
});
// Manejar clic en el botón de validación
$(swalContent)
.find("#validate-btn")
.off("click")
.on("click", function () {
validateAnswers(containerSelector, true);
});
},
});
} else {
// Renderizar pregunta en el contenedor HTML
$(containerSelector).html(questionHtml);
// Eliminar cualquier controlador anterior en el contenedor antes de agregar nuevos
$(containerSelector).off("click", ".option-btn");
$(containerSelector).off("click", "#validate-btn");
// Manejar clic en las opciones
$(containerSelector).on("click", ".option-btn", function () {
$("#validate-btn").addClass("animate__animated animate__pulse animate__infinite");
if (questionData.multiple) {
$(this).toggleClass("selected");
$('#validate-btn').click();
} else {
$(containerSelector).find(".option-btn").removeClass("selected");
$(this).addClass("selected");
$('#validate-btn').click();
}
});
// Manejar clic en el botón de validación
$(containerSelector).on("click", "#validate-btn", function () {
validateAnswers(containerSelector, false);
});
}
}
}
/**
* Valida las respuestas seleccionadas por el usuario.
* @param {string} containerSelector - Selector del contenedor donde se renderiza la pregunta.
* @param {boolean} useSwal - Si es `true`, las preguntas se muestran en un Swal.
*/
function validateAnswers(containerSelector, useSwal) {
const questionData = quizManager.getRenderData();
const selectedOptions = $(containerSelector).find(".option-btn.selected");
const selectedIndexes = selectedOptions.map((index, element) => $(element).parent().index()).get();
if (questionData.multiple) {
// Validar selección múltiple
const correctIndexes = questionData.options
.map((option, index) => option.isCorrect ? index : -1)
.filter(index => index !== -1);
const allCorrectSelected = correctIndexes.every(index => selectedIndexes.includes(index)) &&
selectedIndexes.every(index => correctIndexes.includes(index));
if (allCorrectSelected) {
handleFeedback(true, questionData.correctFeedback || "¡Correcto!", containerSelector, useSwal);
} else {
handleFeedback(false, questionData.incorrectFeedback || "Incorrecto", containerSelector, useSwal);
}
} else {
// Validar selección única
const isCorrect = selectedOptions.length === 1 && selectedOptions.data("correct");
const feedback = isCorrect
? questionData.correctFeedback || "¡Correcto!"
: questionData.incorrectFeedback || "Incorrecto";
handleFeedback(isCorrect, feedback, containerSelector, useSwal);
}
}
/**
* Maneja la retroalimentación de la respuesta del usuario y realiza acciones posteriores.
* @param {boolean} isCorrect - Indica si la respuesta del usuario es correcta.
* @param {string} feedback - El texto de retroalimentación que se mostrará.
* @param {string} containerSelector - Selector del contenedor o Swal para renderizar la siguiente pregunta.
* @param {boolean} useSwal - Si es `true`, las preguntas se muestran en un Swal.
*/
function handleFeedback(isCorrect, feedback, containerSelector, useSwal) {
quizManager.answerCurrentQuestion(isCorrect); // Registra respuesta
let imageSwal = "";
// const imagesArrayRetro = ["img/actividad/1_esposas.gif", "img/actividad/2_numero.gif", "img/actividad/3_uniformee.gif", "img/actividad/4_celda.gif"];
if (isCorrect) {
// const questionIndex = quizManager.currentQuestionIndex; // Obtener el número de la pregunta actual
// imageSwal = imagesArrayRetro[questionIndex % imagesArrayRetro.length]; // Mostrar la imagen correspondiente
imageSwal = "img/actividad/correcto.gif";
} else {
imageSwal = "img/actividad/incorrecto.gif";
}
var html = `<img src="${imageSwal}" class="img-fluid" alt="Feedback Image">`;
Swal.fire({
html: html,
showCloseButton: true,
showCancelButton: false,
showConfirmButton: false,
allowOutsideClick: false,
allowEscapeKey: false,
allowEnterKey: false,
target: $('.mainsco')[0],
backdrop: "rgba(25,25,26,.85)",
background: "transparent",
customClass: { popup: 'pop_course' },
willOpen: function () { },
didOpen: function () {
updateVisualFeedback(isCorrect); // Actualiza visualización
$("#validate-btn").removeClass("animate__animated animate__pulse animate__infinite");
$(".swal2-close").css("height", "2.2em");
},
didRender: function () { },
didClose: function () {
//audios.fondo.loop(true).volume(0.2).play();
// Simular clic en la siguiente pieza disponible (pregunta)
$("#quiz-container").html("");
const time = isCorrect ? 100 : 100;
setTimeout(() => {
if ($(".piece").length == $(".piece.completed").length) {
renderResults("#resume-container");
} else {
quizManager.getNextQuestion();
$(".piece.disabled").first().removeClass("disabled");
$(".piece:not(.completed):not(.disabled)").first().click();
}
}, time);
},
willClose: function () { }
});
}
/**
* Renderiza los resultados finales en un contenedor específico.
* @param {string} containerSelector - Selector del contenedor donde se renderizarán los resultados.
*/
function renderResults(containerSelector) {
CourseNav.audioController.stopAudio();
$(pageActivity).hide();
$(pageSummary).show();
const summary = quizManager.getSummary();
const maxAttempts = quizManager.config.maxAttempts || Infinity; // Intentos máximos desde la configuración
const maxAttemptsTxt = maxAttempts === Infinity ? "&infin;" : maxAttempts;
if (summary.passed) {
$("body").removeClass("fake-activity").addClass("fake-closing");
$(".passed").show();
CourseNav.audioController.stopAllSoundsAndPlay(audios.correct);
// audios.videogame.volume(0.2);
// audios.videogame.play();
CourseNav.setSlideVisited();
} else {
if (quizManager.getAttempts() >= maxAttempts) {
$("body").removeClass("fake-activity").addClass("fake-max-attempts");
$(".without-attempts").show();
CourseNav.audioController.stopAllSoundsAndPlay(audios.attemptLimitReached);
} else {
$("body").removeClass("fake-activity").addClass("fake-closing");
$(".failed").show();
CourseNav.audioController.stopAllSoundsAndPlay(audios.incorrect);
audios.gameover.volume(0.2);
audios.gameover.play();
}
}
}
/**
* Actualiza la retroalimentación visual y muestra la siguiente pregunta o resultados finales.
* @param {boolean} isCorrect - Indica si la respuesta del usuario es correcta.
*/
function updateVisualFeedback(isCorrect) {
// const imagesArray = ["img/actividad/01.png", "img/actividad/02.png", "img/actividad/03.png"];
const lastState = $(".visualFeedback").html();
if (isCorrect) {
const correctAnswersCount = quizManager.currentQuestionIndex;
//CourseNav.audioController.stopAllSoundsAndPlay(audios.feedbackCorrect);
audios.feedbackCorrect.play();
// Cambia la imagen de la pieza actual agregando la 'a' antes del formato
const $currentPiece = $(".piece").eq(correctAnswersCount);
const $img = $currentPiece.find("img");
const src = $img.attr("src");
// Reemplaza el nombre del archivo por el mismo nombre con 'a' antes de la extensión
const newSrc = src.replace(/(\.[a-z]+)$/i, 'a$1');
$img.attr("src", newSrc);
} else {
// Mostrar la retroalimentación incorrecta
//$(".visualFeedback").html(`<img src="img/actividad/error.gif" class="img-fluid">`);
//CourseNav.audioController.stopAllSoundsAndPlay(audios.feedbackIncorrect);
audios.feedbackIncorrect.play();
}
}
// Iniciar audio de introducción
audios.introduction.on("end", function () {
$("#btn-comenzar").removeClass("disabled").addClass("animate__animated animate__pulse animate__infinite");
});
CourseNav.audioController.stopAllSoundsAndPlay(audios.introduction);
// Manejar clic en las piezas
$(".piece").click(function () {
if ($(this).hasClass("completed") || $(this).hasClass("disabled")) return;
const piece = $(this).data("piece");
$(this).find("img").removeClass("animate__animated animate__pulse animate__infinite");
let containerSelector = "#quiz-container";
let useSwal = false;
// Validar si el contenedor de preguntas está visible
if (!$('.pieces-card').is(':visible')) {
containerSelector = ".swal-question-popup";
useSwal = false;
}
if (!allPiecesCompleted()) {
$(this).addClass("completed");
//CourseNav.audioController.stopAllSoundsAndPlay(audios.openQuestion);
audios.openQuestion.play();
renderQuestion(containerSelector, useSwal); // Renderizar la siguiente pregunta
} else {
renderResults("#resume-container"); // Mostrar resultados finales
}
});
// Validar si todas las piezas han sido completadas
function allPiecesCompleted() {
return $(".piece").length === $(".piece.completed").length;
}
// Reiniciar el curso
$("#reiniciar").click(function () {
CourseNav.resetCourse();
});
// Reintentar el curso
$("#reintentar").click(function () {
CourseNav.reload();
});
});
</script>

2
Ogestan_andractiv/contenido/08.html
View File

@ -41,7 +41,7 @@
que sabes y continúa fortaleciendo tu preparación.</p>
<p class="mb-0 text-blue-4 animate__animated animate__fadeInUp animate__delay-15s">
¡<strong>¡Lo estás haciendo excelente!</strong></p>
<strong>¡Lo estás haciendo excelente!</strong></p>
</div>
<div class="col-7 col-md-5 text-center animate__animated animate__zoomIn">
<img src="img/celebracion.png" alt="Celebración" class="img-fluid floating">