// AQUÍ TU DATA (El JSON que tú subirás como administrador)
const quizData = {
“question”: “¿Cuál de las siguientes capas de la pared intestinal es la principal responsable de regir los movimientos gastrointestinales?”,
“answerOptions”: [
{
“text”: “La mucosa, a través de la muscularis mucosae.”,
“rationale”: “La muscularis mucosae produce plegamientos en la mucosa, pero no controla el movimiento peristáltico principal del intestino.”,
“isCorrect”: false
},
{
“text”: “La serosa, que provee la superficie externa.”,
“rationale”: “La serosa es la capa más externa y tiene una función de recubrimiento y protección, no de control motor.”,
“isCorrect”: false
},
{
“text”: “El plexo mientérico (de Auerbach), situado entre las capas musculares.”,
“rationale”: “El plexo mientérico rige sobre todo los movimientos gastrointestinales, controlando la actividad motora.”,
“isCorrect”: true
},
{
“text”: “El plexo submucoso (de Meissner), localizado en la submucosa.”,
“rationale”: “Este plexo se ocupa principalmente de la secreción y flujo sanguíneo local, no del movimiento peristáltico general.”,
“isCorrect”: false
}
],
“hint”: “Piense en cuál de los dos plexos nerviosos entéricos se encuentra directamente entre las capas musculares responsables de la propulsión.”
};
// Lógica de renderizado
function renderQuiz(data) {
document.getElementById(‘quiz-question’).innerText = data.question;
const optionsContainer = document.getElementById(‘quiz-options’);
const hintBtn = document.getElementById(‘hint-btn’);
const hintText = document.getElementById(‘hint-text’);
// Configurar pista
if(data.hint) {
hintBtn.style.display = ‘inline-block’;
hintText.innerText = data.hint;
hintBtn.onclick = () => { hintText.style.display = hintText.style.display === ‘none’ ? ‘block’ : ‘none’; };
}
// Generar opciones
data.answerOptions.forEach((option, index) => {
const btn = document.createElement(‘button’);
btn.innerText = option.text;
btn.style.cssText = ‘text-align: left; padding: 12px; border: 1px solid #ccc; background: white; border-radius: 6px; cursor: pointer; transition: all 0.3s;’;
// Contenedor para la retroalimentación
const rationaleDiv = document.createElement(‘div’);
rationaleDiv.style.cssText = ‘display: none; padding: 10px; margin-top: 5px; font-size: 0.9em; border-radius: 4px;’;
btn.onclick = () => {
// Mostrar si es correcto o incorrecto
if(option.isCorrect) {
btn.style.background = ‘#d4edda’;
btn.style.borderColor = ‘#c3e6cb’;
rationaleDiv.style.background = ‘#e9f7ef’;
rationaleDiv.style.color = ‘#155724’;
rationaleDiv.innerHTML = ‘
✅ Correcto: ‘ + option.rationale;
} else {
btn.style.background = ‘#f8d7da’;
btn.style.borderColor = ‘#f5c6cb’;
rationaleDiv.style.background = ‘#fbeeed’;
rationaleDiv.style.color = ‘#721c24’;
rationaleDiv.innerHTML = ‘
❌ Incorrecto: ‘ + option.rationale;
}
rationaleDiv.style.display = ‘block’;
// Deshabilitar este botón tras click (opcional)
btn.disabled = true;
};
const wrapper = document.createElement(‘div’);
wrapper.appendChild(btn);
wrapper.appendChild(rationaleDiv);
optionsContainer.appendChild(wrapper);
});
}
// Inicializar
renderQuiz(quizData);