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

completo

Browse Source
This commit is contained in:
David Martinez
2025-09-24 22:51:53 -06:00
parent b4f834f46e
commit 172b8450e4
53 changed files with 1758 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files
contenido/12.html
+86 -10
View File
@@ -12,7 +12,20 @@
}
.btn-respuesta {
max-width: 500px;
max-width: 550px;
cursor: pointer;
}
.indicator-circle {
width: 40px;
height: 40px;
margin: 0px 8px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
font-size: 18px;
font-weight: bold;
}
</style>
<div class='page-sco py-2 py-md-0 h-100'>
@@ -24,7 +37,7 @@
<h2 class="text-center fw-bold text-primary">Cuidados del sitio de salida y complicaciones</h2>
<hr class="border border-3 border-verde-oscuro hr-style mx-auto my-0">
</div>
<div class="col-10 px-0 mb-1">
<div class="col-10 px-0 mb-1 col-instrucciones">
<div class="card bg-lila-claro border-0 my-2 rounded-4 bg-custom px-3 py-2 text-center">
<div class="d-flex justify-content-center align-items-center flex-row">
<img src="img/12.3.png" class="img-fluid mx-3">
@@ -33,8 +46,15 @@
</div>
</div>
</div>
<div class="col-12">
<div id="puzzle-versus" class="d-flex flex-row justify-content-center align-items-center gap-2"></div>
<div class="col-12 col-actividad">
<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 id="puzzle-versus" class="d-flex flex-row justify-content-center gap-2"></div>
</div>
</div>
</div>
</div>
</div>
@@ -96,6 +116,37 @@
return array;
}
function createIndicators(total) {
const container = $('.indicadores-avance');
container.empty();
for (let i = 0; i < total; i++) {
const circle = $('<div class="indicator-circle"></div>');
circle.css({
'background-color': i === 0 ? '#2196F3' : '#E0E0E0'
});
circle.attr('data-index', i);
container.append(circle);
}
}
function updateIndicators() {
$('.indicator-circle').each(function(index) {
const $this = $(this);
if (index < currentQuestionIndex) {
$this.empty();
const img = $('<img>').attr({
'src': 'img/11.check.png',
'style': 'width: 100%; height: 100%;'
});
$this.append(img);
} else if (index === currentQuestionIndex) {
$this.css('background-color', '#2196F3').empty();
} else {
$this.css('background-color', '#E0E0E0').empty();
}
});
}
function createVersusStructure() {
const container = $('#puzzle-versus');
@@ -119,19 +170,24 @@
<div class="btn-respuesta" data-correct="${leftIsCorrect}">
<div class="d-flex flex-column justify-content-center align-items-center gap-0">
<img src="${shuffledImages[0]}" alt="personaje">
<div class="card bg-verde-ceniza border-0 shadow rounded-15 pt-5 px-3 pb-3 text-center text-respuesta">${leftResponse || ''}</div>
<div class="card bg-verde-ceniza border-0 shadow rounded-15 pt-5 px-3 pb-3 text-center text-respuesta text-white">${leftResponse || ''}</div>
</div>
</div>
<img src="img/12.2.png" class="img-fluid">
<img src="img/12.2.png" class="img-fluid mx-2">
<div class="btn-respuesta" data-correct="${!leftIsCorrect}">
<div class="d-flex flex-column justify-content-center align-items-center gap-0">
<img src="${shuffledImages[1]}" alt="personaje">
<div class="card bg-verde-ceniza border-0 shadow rounded-15 pt-5 px-3 pb-3 text-center text-respuesta">${rightResponse || ''}</div>
<div class="card bg-verde-ceniza border-0 shadow rounded-15 pt-5 px-3 pb-3 text-center text-respuesta text-white">${rightResponse || ''}</div>
</div>
</div>
`;
container.html(structure);
container.addClass('animate__animated animate__zoomIn');
setTimeout(() => {
container.removeClass('animate__animated animate__zoomIn');
}, 1000);
$('.btn-respuesta').click(function() {
const isCorrect = $(this).data('correct');
@@ -139,11 +195,17 @@
if (isCorrect) {
feedbackcorrect.play();
currentQuestionIndex++;
updateIndicators();
container.addClass('animate__animated animate__zoomOut');
if (currentQuestionIndex >= versusData.length) {
checkAllCompleted();
setTimeout(() => showResults(), 700);
} else {
setTimeout(() => createVersusStructure(), 1000);
setTimeout(() => {
container.removeClass('animate__animated animate__zoomOut');
createVersusStructure();
}, 500);
}
} else {
feedbackincorrect.play();
@@ -151,12 +213,25 @@
});
}
function showResults() {
$('.col-actividad').hide();
$('.col-instrucciones').html('');
const resultHTML = `
<div class="text-center animate__animated animate__zoomIn">
<h3 class="text-primary fw-bold">¡Actividad completada!</h3>
<p class="text-secondary">¡Todas las respuestas fueron correctas!</p>
</div>
`;
$('.col-instrucciones').html(resultHTML);
setTimeout(() => checkAllCompleted(), 300);
}
function checkAllCompleted() {
setTimeout(() => {
const html = $("#pop0").html();
Swal.fire({
html: html,
target: "body",
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'
@@ -180,6 +255,7 @@
const sheetData = data[Object.keys(data)[0]];
versusData = sheetData;
console.log('Datos cargados:', versusData);
createIndicators(versusData.length);
createVersusStructure();
});
});