This commit is contained in:
2025-10-06 19:38:34 -06:00
parent d596116ab0
commit 20ad0bdb2b
43 changed files with 1444 additions and 42 deletions
+48 -24
View File
@@ -15,6 +15,14 @@
background-attachment: fixed;
}
.fake2 {
background-image: url(img/bg03.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-attachment: fixed;
}
.btn-comenzar {
border-radius: 20px;
border-bottom-left-radius: 0;
@@ -67,7 +75,7 @@
.termometro {
position: relative;
display: grid;
grid-template-columns: repeat(10, 1fr);
grid-template-columns: repeat(11, 1fr);
grid-template-rows: auto;
gap: 0;
background: #E7E7E7;
@@ -83,7 +91,7 @@
height: 30px;
}
.med_style:nth-child(10) {
.med_style:nth-child(11) {
border-top-right-radius: 40px;
border-bottom-right-radius: 40px;
border-left: 0;
@@ -106,7 +114,8 @@
.med_style:nth-child(6),
.med_style:nth-child(7),
.med_style:nth-child(8),
.med_style:nth-child(9) {
.med_style:nth-child(9),
.med_style:nth-child(10) {
border-left: 0;
}
@@ -150,6 +159,11 @@
/* background: linear-gradient(to top, #aaff00 0%, #4e8600 100%); */
}
.med_style:nth-child(10) {
background: #7FCB00;
/* background: linear-gradient(to top, #aaff00 0%, #4e8600 100%); */
}
.indicador-med {
position: absolute;
width: 60px;
@@ -159,6 +173,10 @@
left: 10px;
transition: left 0.5s ease;
}
.btn-reintentar {
cursor: pointer;
}
</style>
<div id="inicio" class='page-sco py-2 py-md-0 h-100'>
<div class='container h-100'>
@@ -246,16 +264,17 @@
class="content-medidor p-2 d-inline-flex flex-row justify-content-center align-items-center gap-3">
<img src="img/16.1.png" class="img-fluid">
<div class="termometro p-1">
<div id="#med0" class="med_style"></div>
<div id="#med1" class="med_style"></div>
<div id="#med2" class="med_style"></div>
<div id="#med3" class="med_style"></div>
<div id="#med4" class="med_style"></div>
<div id="#med5" class="med_style"></div>
<div id="#med6" class="med_style"></div>
<div id="#med7" class="med_style"></div>
<div id="#med8" class="med_style"></div>
<div id="#med9" class="med_style"></div>
<div id="med0" class="med_style"></div>
<div id="med1" class="med_style"></div>
<div id="med2" class="med_style"></div>
<div id="med3" class="med_style"></div>
<div id="med4" class="med_style"></div>
<div id="med5" class="med_style"></div>
<div id="med6" class="med_style"></div>
<div id="med7" class="med_style"></div>
<div id="med8" class="med_style"></div>
<div id="med9" class="med_style"></div>
<div id="med10" class="med_style"></div>
<div id="indicador"
class="indicador-med d-flex flex-row justify-content-center align-items-center">
<img src="img/16.2.png" class="img-fluid">
@@ -491,10 +510,6 @@
},
didClose: () => {
CourseNav.audioController.stopAudio();
if (currentObjectBtn) {
// currentObjectBtn.addClass('completed disabled');
checkAllCompleted();
}
},
});
}
@@ -518,7 +533,7 @@
} else if (opcion.text.toLowerCase().includes('verdadero')) {
icono = '<i class="fa-solid fa-check text-success me-2"></i>';
}
answersHtml += `<div class="btn-answer text-white p-2 px-3" data-correct="${opcion.correct}">${icono}${opcion.text}</div>`;
});
@@ -550,6 +565,8 @@
correctQuestions++;
}
CourseNav.audioController.stopAllSoundsAndPlay(isCorrect ? good : bad);
Swal.fire({
target: document.getElementById('wrap-course-content'),
imageUrl: isCorrect ? 'img/good.png' : 'img/bad.png',
@@ -564,18 +581,22 @@
width: "35em",
didOpen: () => {
moveIndicator();
if (currentObjectBtn) {
currentObjectBtn.addClass(isCorrect ? 'good' : 'bad');
}
},
didClose: () => {
// continuarJuego();
checkAllCompleted();
}
});
}
function moveIndicator() {
const positions = ['left: 90px', 'left: 170px', 'left: 250px', 'left: 330px', 'left: 410px', 'left: 493px', 'left: 573px', 'left: 652px', 'left: 736px'];
if (correctQuestions <= 9) {
$('#indicador').attr('style', positions[correctQuestions - 1]);
const positions = ['left: 90px', 'left: 170px', 'left: 250px', 'left: 330px', 'left: 410px', 'left: 493px', 'left: 573px', 'left: 652px', 'left: 736px', 'left: 816px'];
if (correctQuestions > 0 && correctQuestions <= 10) {
const position = Math.min(correctQuestions - 1, 9);
$('#indicador').attr('style', positions[position]);
}
}
@@ -588,8 +609,11 @@
const porcentaje = (correctQuestions / questions.length) * 100;
const aprobado = porcentaje >= 60;
$('.wrap-course-content').addClass('fake2').removeClass('fake1');
CourseNav.setSlideVisited();
if (aprobado) {
CourseNav.setSlideVisited();
$('#desarrollo').hide();
$('#cierre').show();
} else {
@@ -601,4 +625,4 @@
}
}
});
</script>
</script>