This commit is contained in:
andres.sanjuan 2025-12-11 15:48:08 -06:00
commit 594539b531
10 changed files with 114 additions and 57 deletions

Binary file not shown.

Binary file not shown.

View File

@ -9,7 +9,7 @@
"content": "contenido/01.html"
},
{
"title": "La familia OGestan",
"title": "La familia OGestan<sup>®</sup>",
"content": "contenido/02.html"
},
{

View File

@ -165,7 +165,7 @@
</div>
</div>
<div class="position-relative w-100">
<img src="img/02.4" class="img-fluid">
<img src="img/02.4.png" class="img-fluid">
</div>
<div class="d-flex flex-wrap justify-content-center align-items-center gap-2">
<div class="text-t">

View File

@ -180,7 +180,7 @@
audiom05.on('end',function(){
$('.sec_i1').show();
CourseNav.setSlideVisited();
//CourseNav.setSlideVisited();
});
$('.btn-next-section').click(function(){

View File

@ -10,7 +10,7 @@
.back1 {
background-image: url(img/bg06.jpg);
background-repeat: no-repeat;
background-position: bottom center;
background-position: 100% 0;
background-size: cover;
}
@ -47,7 +47,7 @@
}
}
</style>
<div id="sec0" class='page-sco py-2 py-md-0 back0'>
<div id="sec0" class='page-sco py-2 pt-md-3 back0'>
<div class='container'>
<div class='row justify-content-center align-items-center'>
<div class='col-12'>

View File

@ -60,7 +60,7 @@
.trophy img {
max-width: 100%;
max-width: 85%;
height: auto;
}
@ -174,6 +174,48 @@
max-height: 45dvh;
}
.grid-cierre {
position: relative;
width: 100%;
flex: 1;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 56% auto;
justify-content: center;
align-items: center;
}
.bg-pass {
background-image: url(img/actividad/bannerbien.jpg);
background-repeat: no-repeat;
background-position: 50% 100%;
background-size: cover;
}
.bg-fail {
background-image: url(img/actividad/bannermal.jpg);
background-repeat: no-repeat;
background-position: 50% 100%;
background-size: cover;
}
@media(min-width: 768px) {
.trophy {
max-width: 45px;
}
}
@media(min-width: 991px) {
.bg-pass {
background-position: 100% 100%;
}
.bg-fail {
background-position: 100% 100%;
}
}
@media (min-width: 1200px) {
.asesor {
margin-top: -90px;
@ -183,6 +225,11 @@
object-position: bottom center;
max-height: 65dvh;
}
.img-w-perso {
max-width: 65%;
}
}
</style>
<div class="page-sco full-height page-activity" id="inicio">
@ -214,28 +261,31 @@
</div>
</div>
</div>
<div class="page-sco page-activity full-height" id="desarrollo" style="display: none;">
<div class="page-sco page-activity full-height py-2 pt-md-3" id="desarrollo" style="display: none;">
<div class="container-xl">
<div class="row align-items-center">
<div class="col-12">
<div class="row align-items-center justify-content-center">
<div class="col-12 col-md-8">
<div class="col-12 text-center">
<h2 class="fw-medium text-secondary">¿Quién está diciendo la verdad?</h2>
</div>
<div class="col-12 col-md-8 ins_act">
<div class="text-center w-100 d-inline-block p-md-3 p-1 bg-green-2 text-white rounded-3 shadow"><strong>Instrucciones: </strong>Lee la respuesta de los dos representantes sobre una objeción. Analiza
cuidadosamente sus argumentos y elige quién tiene la razón.</div>
</div>
<div class="col-12 col-md-8 col-lg-6">
<div class="row justify-content-center align-items-center my-3">
<div class="trophy col text-center"> <img src="img/actividad/tocheck.png" alt=""> </div>
<div class="trophy col text-center"> <img src="img/actividad/tocheck.png" alt=""> </div>
<div class="trophy col text-center"> <img src="img/actividad/tocheck.png" alt=""> </div>
<div class="trophy col text-center"> <img src="img/actividad/tocheck.png" alt=""> </div>
<div class="trophy col text-center"> <img src="img/actividad/tocheck.png" alt=""> </div>
<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-8">
<div id="quiz-container" class="w-100">
<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>
@ -248,34 +298,31 @@
</div>
<div class="page-sco page-activity full-height" id="cierre" style="display: none;">
<div class="container-fluid p-0 m-0 g-0 passed" style="display: none;">
<img src="img/actividad/bannerbien.jpg" class="bannerend" alt="">
<div class="row align-items-start justify-content-center pt-md-4 pt-2">
<div class="col-12 col-md-8">
<div class="container">
<div class="row">
<div class="col-12 text-center animate__animated animate__fadeInLeft">
<h1 class="fw-bold text-secondary">¡Excelente!</h1>
<p>Has identificado correctamente la mayoría de las afirmaciones.</p>
Tu dominio del contenido de <span class="text-primary fw-bold">OGestan<sup>®</sup> Plus</span> te ayudará a comunicarlo con seguridad.
</div>
</div>
</div>
</div>
<div class="grid-cierre">
<div class="part1-cierre h-100 d-flex flex-column justify-content-center">
<div class="flex-fill w-100 h-100 bg-pass passed" style="display: none;"></div>
<div class="flex-fill w-100 h-100 bg-fail failed" style="display: none;"></div>
</div>
</div>
<div class="container-fluid p-0 m-0 g-0 failed" style="display: none;">
<img src="img/actividad/bannermal.jpg" class="bannerend" alt="">
<div class="row align-items-start justify-content-center pt-md-4 pt-2">
<div class="col-12 col-md-8">
<div class="container">
<div class="row">
<div class="col-12 text-center animate__animated animate__fadeInLeft">
<h1 class="fw-bold text-secondary">¡Vas muy bien!</h1>
<p>Aún puedes mejorar tu precisión. Repasa el contenido y <span class="fw-bold text-primary">vuelve a intentarlo</span>.</p>
<div class="w-100 text-center">
<div class="btn btn-begin text-white fw-bold py-1 animate__animated animate__pulse animate__infinite" onclick="CourseNav.reload()">
Volver a intentar
<div class="part2-cierre h-100 d-flex flex-column justify-content-center align-items-center">
<div class="container">
<div class="row align-items-center justify-content-center pt-2">
<div class="col-12 col-md-8">
<div class="row">
<div class="col-12 text-center animate__animated animate__fadeInLeft passed" style="display: none;">
<h1 class="fw-bold text-purple-2">¡Excelente!</h1>
<p>Has identificado correctamente la mayoría de las afirmaciones.</p>
Tu dominio del contenido de <span class="text-primary fw-bold">OGestan<sup>®</sup> Plus</span> te ayudará a
comunicarlo con seguridad.
</div>
<div class="col-12 text-center animate__animated animate__fadeInLeft failed" style="display: none;">
<h1 class="fw-bold text-purple-2">¡Vas muy bien!</h1>
<p>Aún puedes mejorar tu precisión. Repasa el contenido y <span class="fw-bold text-primary">vuelve a
intentarlo</span>.</p>
<div class="w-100 text-center">
<div class="btn btn-begin text-white fw-bold py-1 animate__animated animate__pulse animate__infinite"
onclick="CourseNav.reload()">
Volver a intentar
</div>
</div>
</div>
</div>
@ -288,7 +335,7 @@
<script>
$(document).ready(async function () {
// Configuración inicial
$("body").addClass("fake");
$(".page-sco").addClass("fake");
$("#loader-course360").show();
// Configuración de las páginas
const pageActivity = ".page-activity";
@ -308,6 +355,8 @@
});
audios.instrucciones.on("end", function () {
$(".btn-open-question").removeClass("disabled grayscale");
$('.ins_act').hide();
$('.actividad_show').show();
});
@ -353,7 +402,7 @@
// Incrementar los intentos y guardar en el LMS
quizManager.incrementAttempts();
CourseNav.setLessonLocation(quizManager.getAttempts());
$("body").addClass('fakedesarrollo');
$(".page-sco").addClass('fakedesarrollo');
CourseNav.audioController.stopAllSoundsAndPlay(audios.instrucciones);
// Renderizar la primera pregunta
renderQuestion("#quiz-container", false);
@ -399,27 +448,27 @@
const questionData = quizManager.getRenderData();
if (questionData) {
const questionHtml = `<div class="row justify-content-center">
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-12 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-4 col-md-3 text-center mb-3 mb-md-0"><img src="img/actividad/medico.png" class="img-fluid animate__animated animate__flipInY" alt=""></div>
<div class="col-12 col-md-9 text-center"><div class="w-100 pregunta bubble">${questionData.text}</div></div>
</div>
</div>
<div class="col-12 col-xl-5 animate__animated animate__fadeInLeft">
<div class="card glass border-0 rounded-15 shadow option-btn cursor h-100 p-1 p-md-3" data-correct="${questionData.options[0].isCorrect}">
<div class="card glass border-0 rounded-15 shadow option-btn cursor p-1 p-md-3" data-correct="${questionData.options[0].isCorrect}">
<div class="card-body text-center d-inline-flex flex-xl-column flex-row justify-content-center align-items-center p-1 p-md-3">
<img src="img/actividad/atenciona.png" class="img-fluid asesor" alt="">
<div class="w-100 opcion text-md-center text-start">${questionData.options[0].text}</div>
</div>
</div>
</div>
<div class="col-12 col-xl-2 my-xl-5 my-3 text-center animate__animated animate__bounceIn animate__delay-1s">
<img src="img/actividad/vs.png" class="img-fluid d-xl-inline-block d-none" alt="">
<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 shadow option-btn cursor h-100 p-1 p-md-3" data-correct="${questionData.options[1].isCorrect}">
<div class="card glass border-0 rounded-15 shadow option-btn cursor p-1 p-md-3" data-correct="${questionData.options[1].isCorrect}">
<div class="card-body text-center d-inline-flex flex-xl-column flex-row justify-content-center align-items-center p-1 p-md-3">
<img src="img/actividad/atencionb.png" class="img-fluid asesor" alt="">
<div class="w-100 opcion text-md-center text-start">${questionData.options[1].text}</div>
@ -443,8 +492,8 @@
focusConfirm: false,
target: "body",
didOpen: () => {
document.body.style.paddingRight = '';
document.body.classList.remove('swal2-height-auto');
//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)
@ -507,10 +556,10 @@
popup: 'w-32em pop-retro',
confirmButton: 'btn btn-begin text-white fw-bold py-1 animate__animated animate__pulse animate__infinite'
},
didOpen: () => {
/* didOpen: () => {
document.body.style.paddingRight = '';
document.body.classList.remove('swal2-height-auto');
},
}, */
}).then(() => {
updateVisualFeedback(isCorrect); // Actualiza visualización
quizManager.answerCurrentQuestion(isCorrect); // Registra respuesta
@ -531,7 +580,7 @@
$(pageActivity).hide().removeClass("d-flex");
$(pageSummary).show().addClass("d-flex");
$("body").addClass("fakecierre");
$(".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 ? "&infin;" : maxAttempts;

File diff suppressed because one or more lines are too long

View File

@ -650,3 +650,7 @@ ul.bul1 {
background-position: center !important;
background-repeat: no-repeat !important;
}
body.swal2-height-auto {
height: inherit !important;
}

View File

@ -762,4 +762,8 @@ ul.bul1 {
background-size: cover !important;
background-position: center !important;
background-repeat: no-repeat !important;
}
body.swal2-height-auto {
height: inherit !important;
}