Vantive/Rotafilio_Vantive
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
David Martinez 2025-09-23 13:37:42 -06:00
parent 0fdda4320f
commit 78dc574de5
1 changed files with 0 additions and 170 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

170
contenido/11_fixed.html
View File

@ -1,170 +0,0 @@
<style>
.fake {
background-image: url(img/bg11.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.hr-style {
opacity: 1;
width: 40%;
}
.bg-custom {
box-shadow: 0 0 10px rgba(0, 0, 0, .5);
}
.content-cards {
width: 100%;
}
.content-cards .persoSwiper {
width: 326px;
height: 326px;
}
</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">
<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">
<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">
<div class="swiper persoSwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="img/11.0.png" class="img-fluid">
</div>
<div class="swiper-slide">
<img src="img/11.1.png" class="img-fluid">
</div>
<div class="swiper-slide">
<img src="img/11.2.png" class="img-fluid">
</div>
<div class="swiper-slide">
<img src="img/11.3.png" class="img-fluid">
</div>
<div class="swiper-slide">
<img src="img/11.4.png" class="img-fluid">
</div>
<div class="swiper-slide">
<img src="img/11.5.png" class="img-fluid">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</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 slides and answers
const slides = Array.from(document.querySelectorAll('.swiper-slide'));
const slidesData = slides.map((slide, index) => ({
element: slide,
answer: respuestasCorrectas[index]
}));
const shuffledData = shuffleArray(slidesData);
const wrapper = document.querySelector('.swiper-wrapper');
wrapper.innerHTML = '';
const shuffledAnswers = [];
shuffledData.forEach((item, index) => {
wrapper.appendChild(item.element);
shuffledAnswers[index] = item.answer;
});
let startX = 0;
let currentIndex = 0;
const swiper = new Swiper('.persoSwiper', {
effect: 'cards',
grabCursor: true,
centeredSlides: true,
slidesPerView: 'auto',
initialSlide: 0,
allowTouchMove: false,
cardsEffect: {
slideShadows: false,
perSlideOffset: 10,
perSlideRotate: 2,
},
on: {
slideChange: function () {
}
}
});
const swiperEl = document.querySelector('.persoSwiper');
swiperEl.addEventListener('touchstart', (e) => {
startX = e.touches[0].clientX;
});
swiperEl.addEventListener('touchend', (e) => {
const endX = e.changedTouches[0].clientX;
const diff = startX - endX;
const threshold = 50;
if (Math.abs(diff) > threshold) {
const userAnswer = diff > 0 ? 'false' : 'true';
const correctAnswer = shuffledAnswers[currentIndex];
if (userAnswer === correctAnswer) {
CourseNav.audioController.stopAllSoundsAndPlay(feedbackcorrect);
currentIndex++;
if (currentIndex < shuffledAnswers.length) {
swiper.slideNext();
}
} else {
CourseNav.audioController.stopAllSoundsAndPlay(feedbackincorrect);
}
}
});
});
</script>