730 lines
32 KiB
HTML
730 lines
32 KiB
HTML
<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 ? "∞" : 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 ? "∞" : 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> |