update
This commit is contained in:
+58
-58
@@ -120,14 +120,14 @@
|
||||
<img src="img/3.1.png" class="img-fluid mx-3" />
|
||||
<div class="parrafos text-start">
|
||||
<p class="mb-2"><strong>Instrucciones:</strong> Observa las imágenes del sitio de salida que se presentan en las tarjetas.</p>
|
||||
<p class="mb-0">
|
||||
Si consideras que se encuentra sano, desliza la tarjeta a la <strong class="text-verde-pino">derecha</strong>. Si crees que no está sano,
|
||||
desliza la tarjeta a la <strong class="text-verde-pino">izquierda</strong>.
|
||||
</p>
|
||||
<p class="mb-0">Si consideras que se encuentra sano, desliza la tarjeta a la <strong class="text-verde-pino">derecha</strong>. Si crees que no está sano, desliza la tarjeta a la <strong class="text-verde-pino">izquierda</strong>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 text-center mb-3">
|
||||
<p class="small mb-0">"Estos son casos hipotéticos basados en las referencias bibliográficas."</p>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 mb-2">
|
||||
@@ -191,8 +191,8 @@
|
||||
<div class="d-none">
|
||||
<div id="pop0">
|
||||
<div class="container-fluid">
|
||||
<div class=" w-100 text-center">
|
||||
<img src="img/3.5.png" class="img-fluid">
|
||||
<div class="w-100 text-center">
|
||||
<img src="img/3.5.png" class="img-fluid" />
|
||||
</div>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 text-center mb-2">
|
||||
@@ -207,12 +207,12 @@
|
||||
</div>
|
||||
<script>
|
||||
$(function () {
|
||||
"use strict";
|
||||
$(".wrap-course-content").addClass("fake");
|
||||
const feedbackcorrect = CourseNav.createSound("audio/feedback-correct.mpeg");
|
||||
const feedbackincorrect = CourseNav.createSound("audio/feedback-incorrect.mpeg");
|
||||
'use strict';
|
||||
$('.wrap-course-content').addClass('fake');
|
||||
const feedbackcorrect = CourseNav.createSound('audio/feedback-correct.mpeg');
|
||||
const feedbackincorrect = CourseNav.createSound('audio/feedback-incorrect.mpeg');
|
||||
|
||||
const respuestasCorrectas = ["true", "true", "false", "false", "false"];
|
||||
const respuestasCorrectas = ['true', 'true', 'false', 'false', 'false'];
|
||||
|
||||
function shuffleArray(array) {
|
||||
for (let i = array.length - 1; i > 0; i--) {
|
||||
@@ -223,15 +223,15 @@
|
||||
}
|
||||
|
||||
// Shuffle cards and answers
|
||||
const cards = Array.from(document.querySelectorAll(".tinder-card"));
|
||||
const cards = Array.from(document.querySelectorAll('.tinder-card'));
|
||||
const cardsData = cards.map((card, index) => ({
|
||||
element: card,
|
||||
answer: respuestasCorrectas[index],
|
||||
}));
|
||||
|
||||
const shuffledData = shuffleArray(cardsData);
|
||||
const stack = document.getElementById("card-stack");
|
||||
stack.innerHTML = "";
|
||||
const stack = document.getElementById('card-stack');
|
||||
stack.innerHTML = '';
|
||||
|
||||
const shuffledAnswers = [];
|
||||
shuffledData.forEach((item, index) => {
|
||||
@@ -253,33 +253,33 @@
|
||||
const currentCard = shuffledData[currentCardIndex]?.element;
|
||||
if (!currentCard) return;
|
||||
|
||||
currentCard.addEventListener("mousedown", handleStart, { passive: false });
|
||||
currentCard.addEventListener("touchstart", handleStart, { passive: false });
|
||||
currentCard.addEventListener('mousedown', handleStart, { passive: false });
|
||||
currentCard.addEventListener('touchstart', handleStart, { passive: false });
|
||||
}
|
||||
|
||||
function handleStart(e) {
|
||||
if (isProcessing) return;
|
||||
e.preventDefault();
|
||||
isDragging = true;
|
||||
const touch = e.type === "touchstart" ? e.touches[0] : e;
|
||||
const touch = e.type === 'touchstart' ? e.touches[0] : e;
|
||||
startX = touch.clientX;
|
||||
startY = touch.clientY;
|
||||
|
||||
const card = e.target.closest(".tinder-card");
|
||||
card.style.transition = "none";
|
||||
card.style.cursor = "grabbing";
|
||||
const card = e.target.closest('.tinder-card');
|
||||
card.style.transition = 'none';
|
||||
card.style.cursor = 'grabbing';
|
||||
|
||||
document.addEventListener("mousemove", handleMove, { passive: false });
|
||||
document.addEventListener("touchmove", handleMove, { passive: false });
|
||||
document.addEventListener("mouseup", handleEnd);
|
||||
document.addEventListener("touchend", handleEnd);
|
||||
document.addEventListener('mousemove', handleMove, { passive: false });
|
||||
document.addEventListener('touchmove', handleMove, { passive: false });
|
||||
document.addEventListener('mouseup', handleEnd);
|
||||
document.addEventListener('touchend', handleEnd);
|
||||
}
|
||||
|
||||
function handleMove(e) {
|
||||
if (!isDragging || isProcessing) return;
|
||||
e.preventDefault();
|
||||
|
||||
const touch = e.type === "touchmove" ? e.touches[0] : e;
|
||||
const touch = e.type === 'touchmove' ? e.touches[0] : e;
|
||||
currentX = touch.clientX - startX;
|
||||
currentY = touch.clientY - startY;
|
||||
|
||||
@@ -289,8 +289,8 @@
|
||||
const rotation = currentX * 0.1;
|
||||
card.style.transform = `translate(${currentX}px, ${currentY}px) rotate(${rotation}deg)`;
|
||||
|
||||
const likeIndicator = document.getElementById("like-indicator");
|
||||
const dislikeIndicator = document.getElementById("dislike-indicator");
|
||||
const likeIndicator = document.getElementById('like-indicator');
|
||||
const dislikeIndicator = document.getElementById('dislike-indicator');
|
||||
|
||||
if (currentX > 50) {
|
||||
likeIndicator.style.opacity = Math.min(1, (currentX - 50) / 100);
|
||||
@@ -308,19 +308,19 @@
|
||||
if (!isDragging || isProcessing) return;
|
||||
isDragging = false;
|
||||
|
||||
document.removeEventListener("mousemove", handleMove);
|
||||
document.removeEventListener("touchmove", handleMove);
|
||||
document.removeEventListener("mouseup", handleEnd);
|
||||
document.removeEventListener("touchend", handleEnd);
|
||||
document.removeEventListener('mousemove', handleMove);
|
||||
document.removeEventListener('touchmove', handleMove);
|
||||
document.removeEventListener('mouseup', handleEnd);
|
||||
document.removeEventListener('touchend', handleEnd);
|
||||
|
||||
const card = shuffledData[currentCardIndex]?.element;
|
||||
if (!card) return;
|
||||
|
||||
card.style.transition = "transform 0.3s ease";
|
||||
card.style.cursor = "grab";
|
||||
card.style.transition = 'transform 0.3s ease';
|
||||
card.style.cursor = 'grab';
|
||||
|
||||
const likeIndicator = document.getElementById("like-indicator");
|
||||
const dislikeIndicator = document.getElementById("dislike-indicator");
|
||||
const likeIndicator = document.getElementById('like-indicator');
|
||||
const dislikeIndicator = document.getElementById('dislike-indicator');
|
||||
|
||||
likeIndicator.style.opacity = 0;
|
||||
dislikeIndicator.style.opacity = 0;
|
||||
@@ -328,13 +328,13 @@
|
||||
if (Math.abs(currentX) > 100) {
|
||||
isProcessing = true;
|
||||
const isLike = currentX > 0;
|
||||
const correctAnswer = shuffledAnswers[currentCardIndex] === "true";
|
||||
const correctAnswer = shuffledAnswers[currentCardIndex] === 'true';
|
||||
const isCorrect = (isLike && correctAnswer) || (!isLike && !correctAnswer);
|
||||
|
||||
animateCardOut(card, isLike, isCorrect);
|
||||
processSwipe(isLike, isCorrect);
|
||||
} else {
|
||||
card.style.transform = "";
|
||||
card.style.transform = '';
|
||||
}
|
||||
|
||||
currentX = 0;
|
||||
@@ -345,17 +345,17 @@
|
||||
if (isCorrect) {
|
||||
const direction = isLike ? 1 : -1;
|
||||
card.style.transform = `translateX(${direction * 400}px) rotate(${direction * 30}deg)`;
|
||||
card.style.opacity = "0";
|
||||
card.style.opacity = '0';
|
||||
|
||||
setTimeout(() => {
|
||||
card.style.display = "none";
|
||||
card.style.display = 'none';
|
||||
nextCard();
|
||||
}, 300);
|
||||
} else {
|
||||
// Animación de rebote para respuesta incorrecta
|
||||
card.style.transform = "scale(0.95)";
|
||||
card.style.transform = 'scale(0.95)';
|
||||
setTimeout(() => {
|
||||
card.style.transform = "";
|
||||
card.style.transform = '';
|
||||
isProcessing = false;
|
||||
}, 200);
|
||||
}
|
||||
@@ -395,23 +395,23 @@
|
||||
}
|
||||
|
||||
function updateProgress() {
|
||||
const indicators = document.querySelector(".indicadores-avance");
|
||||
indicators.innerHTML = "";
|
||||
const indicators = document.querySelector('.indicadores-avance');
|
||||
indicators.innerHTML = '';
|
||||
|
||||
for (let i = 0; i < shuffledAnswers.length; i++) {
|
||||
const indicator = document.createElement("div");
|
||||
indicator.style.cssText = "width: 40px; height: 40px; margin: 0 8px; display: flex; align-items: center; justify-content: center;";
|
||||
const indicator = document.createElement('div');
|
||||
indicator.style.cssText = 'width: 40px; height: 40px; margin: 0 8px; display: flex; align-items: center; justify-content: center;';
|
||||
|
||||
if (i < userAnswers.length) {
|
||||
const img = document.createElement("img");
|
||||
img.style.cssText = "width: 100%; height: 100%;";
|
||||
img.src = "img/11.check.png";
|
||||
const img = document.createElement('img');
|
||||
img.style.cssText = 'width: 100%; height: 100%;';
|
||||
img.src = 'img/11.check.png';
|
||||
indicator.appendChild(img);
|
||||
} else if (i === currentCardIndex) {
|
||||
indicator.style.cssText += "background-color: #2196F3; border-radius: 50%; color: white; font-size: 18px; font-weight: bold;";
|
||||
indicator.style.cssText += 'background-color: #2196F3; border-radius: 50%; color: white; font-size: 18px; font-weight: bold;';
|
||||
indicator.innerHTML = (i + 1).toString();
|
||||
} else {
|
||||
indicator.style.cssText += "background-color: #E0E0E0; border-radius: 50%; color: #999; font-size: 18px; font-weight: bold;";
|
||||
indicator.style.cssText += 'background-color: #E0E0E0; border-radius: 50%; color: #999; font-size: 18px; font-weight: bold;';
|
||||
indicator.innerHTML = (i + 1).toString();
|
||||
}
|
||||
|
||||
@@ -421,7 +421,7 @@
|
||||
|
||||
function showResults() {
|
||||
// Ocultar instrucciones
|
||||
document.getElementById("col-instrucciones").style.display = "none";
|
||||
document.getElementById('col-instrucciones').style.display = 'none';
|
||||
|
||||
const resultHTML = `
|
||||
<div class="text-center">
|
||||
@@ -430,25 +430,25 @@
|
||||
</div>
|
||||
`;
|
||||
checkAllCompleted();
|
||||
document.querySelector(".content-cards").innerHTML = resultHTML;
|
||||
document.querySelector('.content-cards').innerHTML = resultHTML;
|
||||
CourseNav.setSlideVisited(true);
|
||||
}
|
||||
|
||||
function checkAllCompleted() {
|
||||
const html = $("#pop0").html();
|
||||
const html = $('#pop0').html();
|
||||
Swal.fire({
|
||||
html: html,
|
||||
target: document.getElementById('wrap-course-content'),
|
||||
customClass: {
|
||||
popup: "pop_html_style border border-3 border-primary rounded-4",
|
||||
confirmButton: "btn text-white bg-primary amor fw-semibold animate__animated animate__pulse animate__infinite",
|
||||
popup: 'pop_html_style border border-3 border-primary rounded-4',
|
||||
confirmButton: 'btn text-white bg-primary amor fw-semibold animate__animated animate__pulse animate__infinite',
|
||||
},
|
||||
confirmButtonText: "Cerrar",
|
||||
confirmButtonText: 'Cerrar',
|
||||
showConfirmButton: true,
|
||||
allowOutsideClick: false,
|
||||
allowEscapeKey: false,
|
||||
backdrop: "rgba(65, 60, 60, .95)",
|
||||
width: "35em",
|
||||
backdrop: 'rgba(65, 60, 60, .95)',
|
||||
width: '35em',
|
||||
didClose: () => {
|
||||
CourseNav.setSlideVisited();
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user