update
This commit is contained in:
+48
-24
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user