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

CC aplicado

Browse Source
This commit is contained in:
David Martinez 2025-09-25 13:03:23 -06:00
parent ad9b4d5999
commit 5e71e889f1
33 changed files with 241 additions and 154 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
Actividades_Rotafolio_Vantive.xlsx
View File

Binary file not shown.

14
contenido/02.html
View File

@ -106,19 +106,27 @@
width: 16px !important;
height: 16px !important;
}
.perso {
top: 111px;
left: 70px;
}
</style>
<div class='page-sco py-2 py-md-4 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="position-absolute perso">
<img src="img/2.2.png" alt="Riñones" class="img-fluid">
</div>
<div class="col-10 text-center">
<h2 class="text-primary fw-bold">¿Qué son los riñones?</h2>
<hr class="border border-3 border-verde-oscuro hr-style mx-auto my-0 mb-3">
</div>
<div class="col-12">
<div class="row justify-content-end">
<div class="col-10 px-0">
<div class="col-9 px-0">
<div class="card border-0 bg-custom">
<div class="card-body d-flex flex-row justify-content-between align-items-center">
<img src="img/2.1.png" alt="Riñones" class="img-fluid mx-3">
@ -134,9 +142,7 @@
</div>
<div class="col-12 my-2">
<div class="row justify-content-center align-items-center">
<div class="col-3">
<img src="img/2.2.png" alt="Riñones" class="img-fluid">
</div>
<div class="col-3"></div>
<div class="col-6">
<div class="main-video bg-primary rounded">
<div

16
contenido/03.html
View File

@ -12,11 +12,12 @@
}
.bg-custom {
background: #f0f4f2;
background: rgba(214, 227, 218, .8);
}
.bg-custom-transparent {
background: rgba(240, 244, 242, 0.6);
background: transparent;
box-shadow: none;
}
.drop-card {
@ -53,11 +54,10 @@
<hr class="border border-3 border-verde-oscuro hr-style mx-auto my-0">
</div>
<div class="col-12 px-0">
<div class="card border-0 my-2 rounded-0 bg-custom shadow p-3 text-center">
<div class="card bg-custom border-0 my-2 rounded-0 shadow p-3 text-center">
<div class="d-flex justify-content-center align-items-center flex-row">
<img src="img/3.1.png" class="img-fluid mx-3">
<p class="mb-0"><strong>Instrucciones:</strong> Relaciona las imágenes de la columna A con la terapia a
la que corresponden en la columna B.</p>
<p class="mb-0"><strong>Instrucciones:</strong> Relaciona las imágenes con la terapia a la que corresponden.</p>
</div>
</div>
</div>
@ -70,17 +70,17 @@
<div class="card bg-transparent border-0 rounded-0 shadow-none p-0">
<div class="d-flex flex-row justify-content-center gap-3">
<div class="content-enfermedad text-center">
<div class="card rounded bg-custom-transparent border-0 shadow px-3 py-2 mt-2">
<div class="card rounded bg-custom-transparent border-0 shadow-none px-3 py-2 mt-2">
<img src="img/3.2.png" class="img-fluid">
</div>
</div>
<div class="content-enfermedad text-center">
<div class="card rounded bg-custom-transparent border-0 shadow px-3 py-2 mt-2">
<div class="card rounded bg-custom-transparent border-0 shadow-none px-3 py-2 mt-2">
<img src="img/3.3.png" class="img-fluid">
</div>
</div>
<div class="content-enfermedad text-center">
<div class="card rounded bg-custom-transparent border-0 shadow px-3 py-2 mt-2">
<div class="card rounded bg-custom-transparent border-0 shadow-none px-3 py-2 mt-2">
<img src="img/3.4.png" class="img-fluid">
</div>
</div>

3
contenido/04.html
View File

@ -85,8 +85,7 @@
<div class="card border-0 my-2 rounded bg-secondary shadow p-3 text-center">
<div class="d-flex justify-content-center align-items-center flex-row">
<img src="img/2.1.png" class="img-fluid mx-3">
<p class="mb-0"><strong>Instrucciones:</strong> Toma los nombres en la caja y arrástralos hacia el lugar
que les corresponda en las imágenes.</p>
<p class="mb-0"><strong>Instrucciones:</strong> Toma los nombres y arrástralos hacia el lugar que les corresponda en las imágenes.</p>
</div>
</div>
</div>

2
contenido/05.html
View File

@ -51,7 +51,7 @@
<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 id="drag-drop-activity" class='row justify-content-center'>
<div class="col-11">
<h2 class="text-center fw-bold text-primary">¿Cómo funciona la diálisis peritoneal?</h2>
<hr class="border border-3 border-verde-oscuro hr-style mx-auto my-0">

21
contenido/06.html
View File

@ -28,8 +28,7 @@
<div class="card border-0 my-2 rounded bg-secondary shadow p-3 text-center">
<div class="d-flex justify-content-center align-items-center flex-row">
<img src="img/2.1.png" class="img-fluid mx-3">
<p class="mb-0"><strong>Instrucciones:</strong> Arrastre los pasos del recambio para
colocarlos en el orden correcto.</p>
<p class="mb-0"><strong>Instrucciones:</strong> Arrastra los pasos del recambio para colocarlos en el orden correcto.</p>
</div>
</div>
</div>
@ -77,22 +76,28 @@
return shuffled;
}
const imgNums = ['img/06.0.png', 'img/06.1.png', 'img/06.2.png'];
// Crear y mezclar las tarjetas
function createShuffledCards() {
const cards = [1, 2, 3];
const shuffledCards = shuffleArray(cards);
let shuffledCards;
do {
shuffledCards = shuffleArray(cards);
} while (shuffledCards[0] === 1 && shuffledCards[1] === 2 && shuffledCards[2] === 3);
const container = $('#sortable-cards');
// Limpiar contenedor
container.empty();
// Crear tarjetas mezcladas
shuffledCards.forEach(number => {
shuffledCards.forEach((number, index) => {
const cardHtml = `
<div class="card border-0 card-sort bg-verde-claro text-white fw-bold text-center"
<div class="card border-0 card-sort bg-transparent text-white fw-bold text-center shadow-none"
data-order="${number}"
style="cursor:grab;">
<div class="card-body px-0 py-0">
<div class='position-relative w-100 nums'><img src="${imgNums[number-1]}" class="img-fluid"></div>
<div class="card-body bg-verde-claro px-0 py-0">
<img src="img/5.${number}b.png" class="img-fluid">
</div>
</div>
@ -106,9 +111,9 @@
let correct = true;
$('#sortable-cards .card-sort').each(function (index) {
if ($(this).data('order') === index + 1) {
$(this).removeClass('bg-verde-claro').addClass('bg-verde-pasto');
$(this).find('.card-body').removeClass('bg-verde-claro').addClass('bg-verde-pasto');
} else {
$(this).removeClass('bg-verde-pasto').addClass('bg-verde-claro');
$(this).find('.card-body').removeClass('bg-verde-pasto').addClass('bg-verde-claro');
correct = false;
}
});

20
contenido/07.html
View File

@ -159,19 +159,19 @@
<div class="col-12">
<div class="d-flex flex-row justify-content-center align-items-center gap-3">
<div class="object-btn text-center d-inline-block animate__animated animate__pulse animate__infinite" data-obj="0">
<img src="img/07.0.png" class="img-fluid">
<img src="img/07.4.png" class="img-fluid">
</div>
<div class="object-btn text-center d-inline-block animate__animated animate__pulse animate__infinite" data-obj="1">
<img src="img/07.1.png" class="img-fluid">
<img src="img/07.3.png" class="img-fluid">
</div>
<div class="object-btn text-center d-inline-block animate__animated animate__pulse animate__infinite" data-obj="2">
<img src="img/07.2.png" class="img-fluid">
</div>
<div class="object-btn text-center d-inline-block animate__animated animate__pulse animate__infinite" data-obj="3">
<img src="img/07.3.png" class="img-fluid">
<img src="img/07.1.png" class="img-fluid">
</div>
<div class="object-btn text-center d-inline-block animate__animated animate__pulse animate__infinite" data-obj="4">
<img src="img/07.4.png" class="img-fluid">
<img src="img/07.0.png" class="img-fluid">
</div>
</div>
</div>
@ -223,7 +223,7 @@
const bad = CourseNav.createSound('audio/feedback-incorrect.mpeg');
const good = CourseNav.createSound('audio/feedback-correct.mpeg');
const urlExcelFile = 'verdadero_falso.xlsx';
const urlExcelFile = 'Actividades_Rotafolio_Vantive.xlsx';
function readExcelFile(url, callback) {
var xhr = new XMLHttpRequest();
@ -274,8 +274,8 @@
// Cargar preguntas al inicio
readExcelFile(urlExcelFile, function(data) {
const sheetData = data[Object.keys(data)[0]];
questions = procesarPreguntas(sheetData);
const hojaDatos = data["Diapositiva 7"];
questions = procesarPreguntas(hojaDatos);
});
$('.object-btn').click(function (e) {
@ -289,9 +289,9 @@
});
function showRandomQuestion() {
// Seleccionar pregunta aleatoria
const randomIndex = Math.floor(Math.random() * questions.length);
currentQuestion = questions[randomIndex];
// Seleccionar pregunta en orden secuencial
currentQuestion = questions[currentQuestionIndex];
currentQuestionIndex = (currentQuestionIndex + 1) % questions.length;
const html = $("#pops-questions").html();
Swal.fire({

29
contenido/12.html
View File

@ -8,7 +8,7 @@
.hr-style {
opacity: 1;
width: 40%;
width: 80%;
}
.btn-respuesta {
@ -41,8 +41,7 @@
<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">
<p class="mb-0 text-white text-start">Lee lo que opinan dos doctores sobre los cuidados del sitio de salida y las complicaciones que pueden surgir si no se
hace correctamente. Analiza cuidadosamente sus argumentos y elige quién tiene la razón.</p>
<p class="mb-0 text-white text-start">Lee lo que opinan dos doctores sobre los cuidados del sitio de salida y las complicaciones que pueden surgir si no se hacen correctamente. Analiza cuidadosamente sus argumentos y elige quién tiene la razón.</p>
</div>
</div>
</div>
@ -86,7 +85,7 @@
const feedbackincorrect = CourseNav.createSound('audio/feedback-incorrect.mpeg');
const imgPerso = ['img/12.0.png','img/12.1.png'];
const urlExcelFile = 'versus.xlsx';
const urlExcelFile = 'Actividades_Rotafolio_Vantive.xlsx';
let versusData;
let currentQuestionIndex = 0;
@ -116,6 +115,14 @@
return array;
}
function procesarPreguntas(data) {
return data.map(fila => ({
pregunta: fila.pregunta ? String(fila.pregunta).trim() : '',
opcion: fila.opcion ? String(fila.opcion).trim() : '',
opcion_c: fila.opcion_c ? String(fila.opcion_c).trim() : ''
}));
}
function createIndicators(total) {
const container = $('.indicadores-avance');
container.empty();
@ -164,20 +171,20 @@
const leftResponse = randomOrder ? responses[0] : responses[1];
const rightResponse = randomOrder ? responses[1] : responses[0];
const leftIsCorrect = randomOrder ? true : false; // opcion_c es la correcta
const leftIsCorrect = randomOrder ? false : true; // opcion_c es la correcta
const structure = `
<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 text-white">${leftResponse || ''}</div>
<img src="${shuffledImages[0]}" alt="personaje" style="z-index:1;">
<div class="card bg-verde-ceniza border-0 shadow rounded-15 pt-5 px-3 pb-3 text-center text-respuesta text-white" style="margin-top: -60px;">${leftResponse || ''}</div>
</div>
</div>
<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 text-white">${rightResponse || ''}</div>
<img src="${shuffledImages[1]}" alt="personaje" style="z-index:1;">
<div class="card bg-verde-ceniza border-0 shadow rounded-15 pt-5 px-3 pb-3 text-center text-respuesta text-white" style="margin-top: -60px;">${rightResponse || ''}</div>
</div>
</div>
`;
@ -252,8 +259,8 @@
// Cargar datos del Excel
readExcelFile(urlExcelFile, function(data) {
const sheetData = data[Object.keys(data)[0]];
versusData = sheetData;
const hojaDatos = data["Diapositiva 14"];
versusData = procesarPreguntas(hojaDatos);
console.log('Datos cargados:', versusData);
createIndicators(versusData.length);
createVersusStructure();

5
contenido/14.html
View File

@ -30,7 +30,7 @@
.img-sotable.disabled {
pointer-events: none;
opacity: 0.7;
background-color: #84a816;
}
</style>
<div class='page-sco py-2 py-md-0 h-100'>
@ -50,7 +50,7 @@
</div>
</div>
</div>
<div class="col-12 col-actividad">
<div class="col-12 col-actividad" style="overflow: hidden;">
<div class="custom-grid">
<div class="img-sotable" data-order="0">
<img src="img/14.0.png" class="img-fluid">
@ -137,6 +137,7 @@
// Initialize sortable
$('.custom-grid').sortable({
items: '.img-sotable',
containment: ".wrap-course-content",
cursor: 'grabbing',
tolerance: 'pointer',
helper: "clone",

5
contenido/16.html
View File

@ -215,10 +215,7 @@
CourseNav.audioController.stopAllSoundsAndPlay(good);
correctQuestions++;
// Show puzzle piece only for first 3 questions
if (correctQuestions <= 3) {
$(`#pz${correctQuestions - 1}`).show();
}
currentQuestionIndex++;
@ -229,8 +226,6 @@
displayQuestion();
}, 500);
} else {
// Show remaining pieces and hide col-actividad
$('#pz3,#pz4').show();
$('.col-actividad').hide();
setTimeout(() => {
checkAllCompleted();

2
contenido/17.html
View File

@ -57,7 +57,7 @@
<div class="card bg-verde-gris border-0 my-2 rounded-4 bg-custom p-3 text-center">
<div class="d-flex justify-content-center align-items-center flex-row">
<img src="img/08.0.png" class="img-fluid mx-3">
<p class="mb-0"><strong>Instrucciones:</strong> Toma los tipos de terapia que se presentan en la caja y arrástralos hacia el registro que les corresponde.</p>
<p class="mb-0"><strong>Instrucciones:</strong> Toma los tipos de terapia que se presentan y arrástralos hacia el registro que les corresponde.</p>
</div>
</div>
</div>

3
contenido/18.html
View File

@ -37,6 +37,7 @@
.object-btn {
cursor: pointer;
position: relative;
width: 19%;
}
.btn-answer {
@ -110,7 +111,7 @@
</div>
</div>
<div class="col-11">
<div class="d-flex flex-row justify-content-center align-items-center gap-4">
<div class="d-flex flex-row justify-content-center gap-2">
<div class="object-btn text-center d-inline-block" data-obj="0">
<img src="img/18.0.png" class="img-fluid mb-2 animate__animated animate__pulse animate__infinite"><br>
<h4 class="fw-bold text-center text-primary">Sala: Estilo de vida</h4>

19
contenido/ruleta.html
View File

@ -160,8 +160,8 @@
<img src="img/ruleta/per1.png" alt="" class="img-fluid" />
</div>
<div class="col-8 text-white text-center">
<p class="display-6">Puntos acumulados:</p>
<p class="puntos">0</p>
<h4>Puntos acumulados:</h4>
<h2 class="puntos">0</h2>
<div class="card flat">
<img src="img/ruleta/progress.png" alt="" class="img-fluid" />
<div class="wavance position-absolute d-flex flex-row align-items-center justify-content-start w-100" style="top: 22%">
@ -181,7 +181,7 @@
<div class="row">
<div class="col-12 text-center">
<div class="mt-3">
<button id="spin-btn" class="bg-verde-oscuro text-white border border-4 border-white">¡GIRAR RULETA!</button>
<button id="spin-btn" class="bg-verde-oscuro text-white border border-4 border-white animate__animated animate__pulse animate__infinite">¡GIRAR RULETA!</button>
</div>
</div>
</div>
@ -241,6 +241,7 @@
isSpinning = true;
spinBtn.disabled = true;
spinBtn.classList.remove("animate__animated", "animate__pulse", "animate__infinite");
ruletaWheel.classList.add("spinning");
document.getElementById("coursenav-main-content").classList.add("no-overflow");
// Mínimo 3 vueltas + ángulo aleatorio (siempre hacia la derecha)
@ -394,13 +395,15 @@
icon: "success",
target: document.getElementById('wrap-course-content'),
confirmButtonText: "Continuar",
}).then(() => finalizarTurno());
}).then(() => {
finalizarTurno();
if (girosRealizados < maxGiros) {
spinBtn.classList.add("animate__animated", "animate__pulse", "animate__infinite");
}
});
} else {
CourseNav.audioController.stopAllSoundsAndPlay(bad);
// Solo sonido, sin popup - no cuenta como intento
setTimeout(() => {
finalizarTurno();
}, 1000);
// Solo sonido, el usuario puede seguir intentando
}
}

2
css/style.min.css vendored
View File

File diff suppressed because one or more lines are too long

4
css/style.scss
View File

@ -8,6 +8,7 @@ $outline-color: #ffa300 !default;
html {
box-sizing: border-box;
height: 100%;
overflow: hidden;
}
*,
*::before,
@ -25,6 +26,7 @@ body {
font-family: 'Arial', sans-serif;
line-height: 1.3;
font-size: 18px;
overflow: hidden;
> header,
> footer {
@ -428,7 +430,7 @@ $transition-time: 0.3s !default;
}
#coursenav-main-content {
height: 100%;
height: calc(100% - 85px);
overflow-x: hidden;
}
.stepper {

4
css/stylee.css
View File

@ -1,6 +1,7 @@
html {
box-sizing: border-box;
height: 100%;
overflow: hidden;
}
*,
@ -18,6 +19,7 @@ body {
font-family: "Arial", sans-serif;
line-height: 1.3;
font-size: 18px;
overflow: hidden;
}
body > header,
body > footer {
@ -411,7 +413,7 @@ body > main {
}
#coursenav-main-content {
height: 100%;
height: calc(100% - 85px);
overflow-x: hidden;
}

BIN
img/06.0.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB

BIN
img/06.1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.5 KiB

BIN
img/06.2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.9 KiB

BIN
img/09.14.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 26 KiB

After

Width:  |  Height:  |  Size: 50 KiB

BIN
img/18.0.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 33 KiB

BIN
img/18.1.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 33 KiB

BIN
img/18.2.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.5 KiB

After

Width:  |  Height:  |  Size: 22 KiB

BIN
img/18.3.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 36 KiB

BIN
img/18.4.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8.3 KiB

After

Width:  |  Height:  |  Size: 25 KiB

BIN
img/3.2.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 68 KiB

BIN
img/3.3.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 47 KiB

BIN
img/3.4.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 78 KiB

223
img/puzzle.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.4 MiB

After

Width:  |  Height:  |  Size: 2.6 MiB

11
js/coursenav.js
View File

@ -361,21 +361,16 @@ var CourseNav = (function (COURSE_CONFIG) {
const idx = courseData.contentArray.findIndex((c) => c.content === item.content && c.title === item.title);
link.dataset.coursenavindex = idx;
link.dataset.coursenavvisited = idx >= 0 && courseData.contentArray[idx].visited;
link.dataset.coursenavvisited = "true";
wdiv.appendChild(link);
link.addEventListener("click", () => {
CLICK_SOUND.play();
const index = parseInt(link.dataset.coursenavindex, 10);
if (index >= 0) {
if (DEBUG || courseData.contentArray[index].visited) {
currentIndex = index;
closeSidebar();
loadContent();
} else {
closeSidebar();
showLockedContentWarning();
}
} else {
const toggle = wdiv.querySelector(".toggle-icon");
toggle && toggle.click();
@ -504,8 +499,8 @@ var CourseNav = (function (COURSE_CONFIG) {
const idx = parseInt(link.dataset.coursenavindex, 10);
const item = courseData.contentArray[idx];
if (item) {
link.dataset.coursenavvisited = item.visited;
item.visited ? link.classList.add("visited") : link.classList.remove("visited");
link.dataset.coursenavvisited = "true";
link.classList.add("visited");
}
});
}

2
js/coursenav.min.js vendored
View File

File diff suppressed because one or more lines are too long

BIN
verdadero_falso.xlsx
View File

Binary file not shown.

BIN
versus.xlsx
View File

Binary file not shown.