462 lines
15 KiB
HTML
462 lines
15 KiB
HTML
<style>
|
|
.fake {
|
|
background-image: url(img/bg11.jpg);
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
background-size: cover;
|
|
}
|
|
|
|
.hr-style {
|
|
opacity: 1;
|
|
width: 40%;
|
|
}
|
|
|
|
.content-cards {
|
|
width: 100%;
|
|
}
|
|
|
|
.dislike-indicator {
|
|
top: 50%;
|
|
left: 20px;
|
|
transform: translateY(-50%);
|
|
z-index: 10;
|
|
opacity: 0;
|
|
}
|
|
|
|
.like-indicator {
|
|
top: 50%;
|
|
right: 20px;
|
|
transform: translateY(-50%);
|
|
z-index: 10;
|
|
opacity: 0;
|
|
}
|
|
|
|
.indicator-circle {
|
|
width: 60px;
|
|
height: 60px;
|
|
font-size: 24px;
|
|
}
|
|
|
|
.gradient-bg {
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 1;
|
|
}
|
|
|
|
.gradient-left {
|
|
left: 0;
|
|
top: 10%;
|
|
width: 50%;
|
|
height: 80%;
|
|
background: #925c8d;
|
|
background: linear-gradient(270deg, rgba(146, 92, 141, 1) 0%, rgba(146, 92, 141, 0) 100%);
|
|
}
|
|
|
|
.gradient-right {
|
|
right: 0;
|
|
top: 10%;
|
|
width: 50%;
|
|
height: 80%;
|
|
background: #6c9d7a;
|
|
background: linear-gradient(90deg, rgba(108, 157, 122, 1) 0%, rgba(108, 157, 122, 0) 100%);
|
|
}
|
|
|
|
.bg-image {
|
|
z-index: 2;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.bg-image-left {
|
|
left: 20px;
|
|
bottom: 60px;
|
|
}
|
|
|
|
.bg-image-right {
|
|
right: 20px;
|
|
bottom: 60px;
|
|
}
|
|
|
|
.bg-image img {
|
|
width: 220px;
|
|
height: auto;
|
|
}
|
|
|
|
.card-stack {
|
|
position: relative;
|
|
width: 326px;
|
|
height: 326px;
|
|
margin: 0 auto;
|
|
z-index: 5;
|
|
}
|
|
|
|
.tinder-card {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
cursor: grab;
|
|
transition: transform 0.3s ease;
|
|
user-select: none;
|
|
}
|
|
|
|
.tinder-card img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
border-radius: 10px;
|
|
}
|
|
</style>
|
|
<div class="page-sco py-2 py-md-0 h-100">
|
|
<div class="container h-100">
|
|
<div class="row justify-content-center align-items-center h-100">
|
|
<div class="col-12">
|
|
<div class="row justify-content-center">
|
|
<div class="col-10 mb-2 animate__animated animate__bounceInDown">
|
|
<h2 class="text-center fw-bold text-primary">Características del sitio de salida</h2>
|
|
<hr class="border border-3 border-verde-oscuro hr-style mx-auto my-0" />
|
|
</div>
|
|
<div class="col-12 px-0 mb-1 animate__animated animate__lightSpeedInLeft" id="col-instrucciones">
|
|
<div class="card bg-white border-0 my-2 rounded-0 bg-custom px-3 py-2 text-center">
|
|
<div class="d-flex justify-content-center align-items-center flex-row gap-2">
|
|
<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>
|
|
</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">
|
|
<div class="d-flex justify-content-center align-items-center gap-2 flex-row indicadores-avance"></div>
|
|
</div>
|
|
<div class="col-12">
|
|
<div class="position-relative content-cards text-center">
|
|
<!-- Like/Dislike indicators -->
|
|
<div class="position-absolute dislike-indicator" id="dislike-indicator">
|
|
<div class="bg-danger text-white rounded-circle d-flex align-items-center justify-content-center indicator-circle">✕</div>
|
|
<div class="text-danger fw-bold mt-2">NO SANO</div>
|
|
</div>
|
|
<div class="position-absolute like-indicator" id="like-indicator">
|
|
<div class="bg-success text-white rounded-circle d-flex align-items-center justify-content-center indicator-circle">✓</div>
|
|
<div class="text-success fw-bold mt-2">SANO</div>
|
|
</div>
|
|
|
|
<!-- Degradados de fondo -->
|
|
<div class="position-absolute w-100 h-100 gradient-bg">
|
|
<div class="position-absolute gradient-left"></div>
|
|
<div class="position-absolute gradient-right"></div>
|
|
</div>
|
|
|
|
<!-- Imágenes de fondo -->
|
|
<div class="position-absolute bg-image bg-image-left">
|
|
<img src="img/11.nosano.png" alt="No Sano" />
|
|
</div>
|
|
<div class="position-absolute bg-image bg-image-right">
|
|
<img src="img/11.sano.png" alt="Sano" />
|
|
</div>
|
|
|
|
<div id="card-stack" class="card-stack">
|
|
<div data-index="0" class="tinder-card">
|
|
<img src="img/11.0.png" alt="Imagen 1" />
|
|
</div>
|
|
<div data-index="1" class="tinder-card">
|
|
<img src="img/11.1.png" alt="Imagen 2" />
|
|
</div>
|
|
<div data-index="2" class="tinder-card">
|
|
<img src="img/11.2.png" alt="Imagen 3" />
|
|
</div>
|
|
<div data-index="3" class="tinder-card">
|
|
<img src="img/11.3.png" alt="Imagen 4" />
|
|
</div>
|
|
<div data-index="4" class="tinder-card">
|
|
<img src="img/11.4.png" alt="Imagen 5" />
|
|
</div>
|
|
<div data-index="5" class="tinder-card">
|
|
<img src="img/11.5.png" alt="Imagen 6" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<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>
|
|
<div class="row justify-content-center">
|
|
<div class="col-12 text-center mb-2">
|
|
<h3 class="text-secondary-dark fw-bold">Ten en cuenta que…</h3>
|
|
</div>
|
|
<div class="col-12 text-center">
|
|
<p class="mb-0">En caso de alguna complicación, se debe acudir a la unidad de diálisis.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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');
|
|
|
|
const respuestasCorrectas = ['true', 'true', 'false', 'false', 'false'];
|
|
|
|
function shuffleArray(array) {
|
|
for (let i = array.length - 1; i > 0; i--) {
|
|
const j = Math.floor(Math.random() * (i + 1));
|
|
[array[i], array[j]] = [array[j], array[i]];
|
|
}
|
|
return array;
|
|
}
|
|
|
|
// Shuffle cards and answers
|
|
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 shuffledAnswers = [];
|
|
shuffledData.forEach((item, index) => {
|
|
item.element.style.zIndex = shuffledData.length - index;
|
|
stack.appendChild(item.element);
|
|
shuffledAnswers[index] = item.answer;
|
|
});
|
|
|
|
let currentCardIndex = 0;
|
|
let userAnswers = [];
|
|
let isProcessing = false;
|
|
let isDragging = false;
|
|
let startX = 0;
|
|
let startY = 0;
|
|
let currentX = 0;
|
|
let currentY = 0;
|
|
|
|
function initTinderCards() {
|
|
const currentCard = shuffledData[currentCardIndex]?.element;
|
|
if (!currentCard) return;
|
|
|
|
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;
|
|
startX = touch.clientX;
|
|
startY = touch.clientY;
|
|
|
|
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);
|
|
}
|
|
|
|
function handleMove(e) {
|
|
if (!isDragging || isProcessing) return;
|
|
e.preventDefault();
|
|
|
|
const touch = e.type === 'touchmove' ? e.touches[0] : e;
|
|
currentX = touch.clientX - startX;
|
|
currentY = touch.clientY - startY;
|
|
|
|
const card = shuffledData[currentCardIndex]?.element;
|
|
if (!card) return;
|
|
|
|
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');
|
|
|
|
if (currentX > 50) {
|
|
likeIndicator.style.opacity = Math.min(1, (currentX - 50) / 100);
|
|
dislikeIndicator.style.opacity = 0;
|
|
} else if (currentX < -50) {
|
|
dislikeIndicator.style.opacity = Math.min(1, (Math.abs(currentX) - 50) / 100);
|
|
likeIndicator.style.opacity = 0;
|
|
} else {
|
|
likeIndicator.style.opacity = 0;
|
|
dislikeIndicator.style.opacity = 0;
|
|
}
|
|
}
|
|
|
|
function handleEnd(e) {
|
|
if (!isDragging || isProcessing) return;
|
|
isDragging = false;
|
|
|
|
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';
|
|
|
|
const likeIndicator = document.getElementById('like-indicator');
|
|
const dislikeIndicator = document.getElementById('dislike-indicator');
|
|
|
|
likeIndicator.style.opacity = 0;
|
|
dislikeIndicator.style.opacity = 0;
|
|
|
|
if (Math.abs(currentX) > 100) {
|
|
isProcessing = true;
|
|
const isLike = currentX > 0;
|
|
const correctAnswer = shuffledAnswers[currentCardIndex] === 'true';
|
|
const isCorrect = (isLike && correctAnswer) || (!isLike && !correctAnswer);
|
|
|
|
animateCardOut(card, isLike, isCorrect);
|
|
processSwipe(isLike, isCorrect);
|
|
} else {
|
|
card.style.transform = '';
|
|
}
|
|
|
|
currentX = 0;
|
|
currentY = 0;
|
|
}
|
|
|
|
function animateCardOut(card, isLike, isCorrect) {
|
|
if (isCorrect) {
|
|
const direction = isLike ? 1 : -1;
|
|
card.style.transform = `translateX(${direction * 400}px) rotate(${direction * 30}deg)`;
|
|
card.style.opacity = '0';
|
|
|
|
setTimeout(() => {
|
|
card.style.display = 'none';
|
|
nextCard();
|
|
}, 300);
|
|
} else {
|
|
// Animación de rebote para respuesta incorrecta
|
|
card.style.transform = 'scale(0.95)';
|
|
setTimeout(() => {
|
|
card.style.transform = '';
|
|
isProcessing = false;
|
|
}, 200);
|
|
}
|
|
}
|
|
|
|
function nextCard() {
|
|
currentCardIndex++;
|
|
updateProgress();
|
|
if (currentCardIndex < shuffledData.length) {
|
|
initTinderCards();
|
|
isProcessing = false;
|
|
}
|
|
}
|
|
|
|
initTinderCards();
|
|
|
|
function processSwipe(isLike, isCorrect) {
|
|
if (isCorrect) {
|
|
feedbackcorrect.play();
|
|
|
|
userAnswers.push({
|
|
cardIndex: currentCardIndex,
|
|
userAnswer: isLike,
|
|
isCorrect: true,
|
|
});
|
|
|
|
if (currentCardIndex + 1 >= shuffledAnswers.length) {
|
|
setTimeout(() => {
|
|
updateProgress();
|
|
showResults();
|
|
}, 500);
|
|
}
|
|
} else {
|
|
feedbackincorrect.play();
|
|
// No avanzar, permitir reintentar
|
|
}
|
|
}
|
|
|
|
function updateProgress() {
|
|
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;';
|
|
|
|
if (i < userAnswers.length) {
|
|
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.innerHTML = (i + 1).toString();
|
|
} else {
|
|
indicator.style.cssText += 'background-color: #E0E0E0; border-radius: 50%; color: #999; font-size: 18px; font-weight: bold;';
|
|
indicator.innerHTML = (i + 1).toString();
|
|
}
|
|
|
|
indicators.appendChild(indicator);
|
|
}
|
|
}
|
|
|
|
function showResults() {
|
|
// Ocultar instrucciones
|
|
document.getElementById('col-instrucciones').style.display = 'none';
|
|
|
|
const resultHTML = `
|
|
<div class="text-center">
|
|
<h3>¡Actividad completada!</h3>
|
|
<p>¡Todas las respuestas fueron correctas!</p>
|
|
</div>
|
|
`;
|
|
checkAllCompleted();
|
|
document.querySelector('.content-cards').innerHTML = resultHTML;
|
|
CourseNav.setSlideVisited(true);
|
|
}
|
|
|
|
function checkAllCompleted() {
|
|
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',
|
|
},
|
|
confirmButtonText: 'Cerrar',
|
|
showConfirmButton: true,
|
|
allowOutsideClick: false,
|
|
allowEscapeKey: false,
|
|
backdrop: 'rgba(65, 60, 60, .95)',
|
|
width: '35em',
|
|
didClose: () => {
|
|
CourseNav.setSlideVisited();
|
|
},
|
|
});
|
|
}
|
|
|
|
// Initialize progress indicators
|
|
updateProgress();
|
|
});
|
|
</script>
|