update
This commit is contained in:
parent
b234ae0d22
commit
0fdda4320f
@ -14,6 +14,15 @@
|
||||
.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'>
|
||||
@ -25,7 +34,7 @@
|
||||
<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 p-3 text-center">
|
||||
<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">
|
||||
@ -41,7 +50,33 @@
|
||||
<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"></div>
|
||||
<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>
|
||||
@ -54,5 +89,51 @@
|
||||
$(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;
|
||||
});
|
||||
|
||||
const swiper = new Swiper('.persoSwiper', {
|
||||
effect: 'cards',
|
||||
grabCursor: true,
|
||||
centeredSlides: true,
|
||||
slidesPerView: 'auto',
|
||||
initialSlide: 0,
|
||||
cardsEffect: {
|
||||
slideShadows: false,
|
||||
perSlideOffset: 10,
|
||||
perSlideRotate: 2,
|
||||
},
|
||||
on: {
|
||||
slideChange: function () {
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
170
contenido/11_fixed.html
Normal file
170
contenido/11_fixed.html
Normal file
@ -0,0 +1,170 @@
|
||||
<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>
|
||||
BIN
img/11.0.png
Normal file
BIN
img/11.0.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
BIN
img/11.1.png
Normal file
BIN
img/11.1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 60 KiB |
BIN
img/11.2.png
Normal file
BIN
img/11.2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
BIN
img/11.3.png
Normal file
BIN
img/11.3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 65 KiB |
BIN
img/11.4.png
Normal file
BIN
img/11.4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 61 KiB |
BIN
img/11.5.png
Normal file
BIN
img/11.5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 59 KiB |
Loading…
x
Reference in New Issue
Block a user