Skip to content

feat (programacion_reactiva): Nuevo modulo de quiz para programación reactiva #278

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
JuanNaCl wants to merge 1 commit into from
Closed

feat (programacion_reactiva): Nuevo modulo de quiz para programación reactiva #278

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions reactive/reactive_teoria/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,6 +123,7 @@ <h1>Programación Reactiva</h1>
</li>
<li><a href="#line9">Aplicaciones</a></li>
<li><a href="#line10">Referencias</a></li>
<li><a href="quiz/index.html">Quiz: Programación Reactiva</a></li>
</ul>
</nav >
</div>
Expand Down
12 changes: 12 additions & 0 deletions reactive/reactive_teoria/quiz/css/form.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
body{ font-family: Arial, Helvetica, sans-serif; background:#f8f8f8; color:#222; }
.quiz-wrap{ max-width:860px; margin:30px auto; background:#fff; padding:24px; box-shadow:0 2px 8px rgba(0,0,0,.08); }
h1{ font-size:20px; margin:0 0 12px; }
.question{ margin:14px 0; padding:10px; border-radius:4px; }
.question.correct{ background:#e6ffed; }
.question.wrong{ background:#fff3f3; }
.choices{ list-style:none; padding:0; margin:8px 0 0; }
.choices li{ margin:6px 0; }
label{ margin-left:8px; }
.controls{ margin-top:12px; }
button{ padding:8px 12px; margin-right:8px; cursor:pointer; }
.result{ margin-top:14px; font-size:16px; }
23 changes: 23 additions & 0 deletions reactive/reactive_teoria/quiz/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Quiz — Programación Reactiva</title>
<link rel="stylesheet" href="css/form.css">
</head>
<body>
<div class="quiz-wrap">
<h1>Quiz: Programación Reactiva</h1>
<div id="quiz-container"></div>
<div class="controls">
<button id="submit">Enviar respuestas</button>
<button id="restart">Reiniciar</button>
</div>
<div id="result" class="result" aria-live="polite"></div>
</div>

<script src="js/questions.js"></script>
<script src="js/quiz.js"></script>
</body>
</html>
79 changes: 79 additions & 0 deletions reactive/reactive_teoria/quiz/js/questions.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
var questions = [
{ q: "1. ¿Cuál es la definición fundamental de la programación reactiva según la presentación?",
choices: [
"A) Un paradigma basado en el almacenamiento secuencial de datos en bases de datos relacionales.",
"B) Un modelo de ejecución imperativo donde se consulta de forma constante si el estado ha cambiado.",
"C) Un paradigma de programación asíncrona orientado al flujo de datos y a la propagación del cambio.",
"D) Una extensión de la programación estructurada orientada exclusivamente al paralelismo de hardware."
], answer: 2
},
{ q: "2. En el contexto de los componentes clave, ¿cuál es la responsabilidad principal del Subscriber (Suscriptor)?",
choices: [
"A) Definir cómo se debe transformar o mutar un stream de datos.",
"B) Emitir la secuencia de eventos de manera continua a lo largo del tiempo.",
"C) Almacenar temporalmente los errores del sistema en un búfer de memoria.",
"D) Suscribirse al Observable, escuchar los eventos y reaccionar ante ellos."
], answer: 3
},
{ q: "3. ¿En qué consiste la filosofía o estrategia de propagación denominada Push (Empuje)?",
choices: [
"A) El suscriptor es quien solicita explícitamente los datos a la fuente cuando los necesita.",
"B) La fuente envía activamente los eventos a los suscriptores tan pronto como están disponibles.",
"C) El consumidor bloquea el hilo de ejecución hasta que la fuente se destruye automáticamente.",
"D) Una notificación que obliga al cliente a borrar toda su caché antes de consultar de nuevo."
], answer: 1
},
{ q: "4. Según el Manifiesto Reactivo, ¿qué característica permite que una aplicación se adapte dinámicamente a cambios en la carga de trabajo, escalando sus recursos?",
choices: ["A) Resiliente","B) Elástica","C) Responsiva","D) Orientada a Mensajes"], answer: 1
},
{ q: "5. ¿Cuál es el propósito principal del operador de control avanzado debounce?",
choices: [
"A) Esperar a que el flujo deje de emitir eventos durante un tiempo determinado antes de actuar.",
"B) Limitar la frecuencia de eventos a exactamente uno por cada intervalo fijo, ignorando los intermedios.",
"C) Cancelar la petición asíncrona anterior y lanzar una nueva inmediatamente al recibir cualquier evento.",
"D) Multiplicar el número de eventos emitidos por el Observable para duplicar el procesamiento."
], answer: 0
},
{ q: "6. ¿Qué problema crítico define el concepto de Backpressure (Contrapresión)?",
choices: [
"A) Cuando el consumidor procesa los datos más rápido de lo que el productor puede emitirlos.",
"B) Cuando un error asíncrono no es capturado y destruye toda la base de datos.",
"C) Cuando el productor emite datos más rápido de lo que el consumidor puede procesarlos.",
"D) Cuando el canal de comunicación por red se cierra abruptamente por problemas de hardware."
], answer: 2
},
{ q: "7. ¿Cómo soluciona la estrategia Drop el problema de la contrapresión?",
choices: [
"A) Almacena de forma indefinida todos los eventos en la memoria RAM hasta que se desborde.",
"B) Envía una señal al productor para que reduzca activamente su velocidad de emisión.",
"C) Duplica de inmediato los hilos de ejecución asignados al servidor para absorber la carga.",
"D) Descarta o ignora los nuevos eventos entrantes mientras el consumidor esté ocupado."
], answer: 3
},
{ q: "8. De acuerdo con la presentación, ¿qué ventaja técnica clave ofrece la programación reactiva en sistemas de alta concurrencia?",
choices: [
"A) Permite realizar operaciones CRUD de manera estrictamente secuencial y síncrona.",
"B) Al operar de forma no bloqueante y orientada a eventos, un número reducido de hilos puede manejar una gran cantidad de peticiones de forma eficiente.",
"C) Garantiza que el código sea idéntico al paradigma imperativo, facilitando las pruebas tradicionales.",
"D) Elimina por completo la necesidad de usar librerías externas o frameworks en el despliegue."
], answer: 1
},
{ q: "9. ¿Cuál es una de las desventajas documentadas al implementar este paradigma?",
choices: [
"A) Un alto consumo innecesario de almacenamiento físico en discos de estado sólido.",
"B) La imposibilidad absoluta de conectarse de forma nativa a dispositivos de Internet de las Cosas (IoT).",
"C) Una severa limitación que impide el uso de funciones lambda o flecha en el código.",
"D) Una curva de aprendizaje alta y un debugging (depuración) más complejo debido a la naturaleza asíncrona de los flujos."
], answer: 3
},
{ q: "10. ¿Qué función cumple el operador onErrorResume visto en los ejemplos prácticos?",
choices: [
"A) Detener el servidor inmediatamente y generar un volcado completo de la memoria RAM.",
"B) Forzar al cliente a reintentar la misma petición HTTP de forma infinita cada milisegundo.",
"C) Definir una estrategia de recuperación retornando un flujo alternativo (como un flujo vacío o datos por defecto) si ocurre un fallo.",
"D) Validar sintácticamente que los tipos de datos mapeados no contengan valores nulos."
], answer: 2
}
];

if (typeof module !== 'undefined' && module.exports) module.exports = questions;
49 changes: 49 additions & 0 deletions reactive/reactive_teoria/quiz/js/quiz.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
(function(){
function $(sel, ctx){ return (ctx||document).querySelector(sel); }
function create(tag, cls){ var e=document.createElement(tag); if(cls) e.className=cls; return e; }

function renderQuestion(item, idx){
var wrap = create('div','question');
var q = create('h3'); q.textContent = item.q; wrap.appendChild(q);
var ul = create('ul','choices');
item.choices.forEach(function(ch, i){
var li = create('li');
var id = 'q'+idx+'-c'+i;
var input = document.createElement('input'); input.type='radio'; input.name='q'+idx; input.id=id; input.value=i;
var label = create('label'); label.setAttribute('for', id); label.textContent = ch;
li.appendChild(input); li.appendChild(label); ul.appendChild(li);
});
wrap.appendChild(ul);
return wrap;
}

function buildQuiz(questions){
var container = $('#quiz-container'); container.innerHTML='';
questions.forEach(function(q,i){ container.appendChild(renderQuestion(q,i)); });
}

function grade(questions){
var score=0, total=questions.length;
questions.forEach(function(q,i){
var sel = document.querySelector('input[name="q'+i+'"]:checked');
var user = sel ? Number(sel.value) : null;
var row = document.querySelectorAll('#quiz-container .question')[i];
row.classList.remove('correct','wrong');
if(user === q.answer){ score++; row.classList.add('correct'); }
else { row.classList.add('wrong'); }
});
return {score: score, total: total};
}

function showResult(res){
var r = $('#result'); r.innerHTML = '<strong>Resultado:</strong> '+res.score+' / '+res.total;
}

document.addEventListener('DOMContentLoaded', function(){
if(!window.questions || !questions.length){ document.getElementById('quiz-container').textContent = 'No hay preguntas.'; return; }
buildQuiz(questions);
$('#submit').addEventListener('click', function(){ var res = grade(questions); showResult(res); });
$('#restart').addEventListener('click', function(){ buildQuiz(questions); $('#result').textContent = ''; });
});

})();