97 lines
4.7 KiB
HTML
97 lines
4.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="es">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>OpoQuizTiny - Copilot</title>
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<style>
|
|
body { font-family: system-ui, sans-serif; margin: 0; padding: 2em; background: #f8f9fa; }
|
|
h1 { font-size: 2em; margin-bottom: 0.5em; }
|
|
.file-input { margin-bottom: 1em; }
|
|
.json-list { background: #fff; border: 1px solid #ccc; padding: 1em; border-radius: 6px; margin-top: 1em; }
|
|
pre { background: #f4f4f4; padding: 1em; border-radius: 4px; overflow-x: auto; }
|
|
.error { color: #b00; margin-top: 1em; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>OpoQuizTiny <small style="font-size:0.5em;">(Copilot Fase 2)</small></h1>
|
|
<form id="jsonForm" class="file-input">
|
|
<label for="jsonFiles">Cargar archivos JSON de temario:</label>
|
|
<input type="file" id="jsonFiles" name="jsonFiles" accept=".json" multiple>
|
|
</form>
|
|
<form id="configForm" class="config-form">
|
|
<label for="numQuestions">Número de preguntas:</label>
|
|
<input type="number" id="numQuestions" name="numQuestions" min="1" max="50" value="10">
|
|
<label for="questionType">Tipo de preguntas:</label>
|
|
<select id="questionType" name="questionType">
|
|
<option value="vf">Verdadero/Falso</option>
|
|
<option value="single">Opción única</option>
|
|
<option value="multi">Multiselección</option>
|
|
</select>
|
|
<label for="numAnswers">Número de respuestas por pregunta:</label>
|
|
<input type="number" id="numAnswers" name="numAnswers" min="2" max="10" value="4">
|
|
<label for="jsonSelect">Seleccionar temario cargado:</label>
|
|
<select id="jsonSelect" name="jsonSelect" multiple></select>
|
|
<button type="submit">Guardar configuración</button>
|
|
</form>
|
|
<div id="configSummary" class="config-summary" style="display:none;"></div>
|
|
<div id="output" class="json-list"></div>
|
|
<div id="error" class="error"></div>
|
|
<script>
|
|
let loadedJsons = {};
|
|
document.getElementById('jsonFiles').addEventListener('change', function (e) {
|
|
const files = Array.from(e.target.files);
|
|
const output = document.getElementById('output');
|
|
const error = document.getElementById('error');
|
|
const jsonSelect = document.getElementById('jsonSelect');
|
|
output.innerHTML = '';
|
|
error.textContent = '';
|
|
jsonSelect.innerHTML = '';
|
|
loadedJsons = {};
|
|
if (!files.length) return;
|
|
files.forEach(file => {
|
|
const reader = new FileReader();
|
|
reader.onload = function(evt) {
|
|
try {
|
|
const json = JSON.parse(evt.target.result);
|
|
loadedJsons[file.name] = json;
|
|
output.innerHTML += `<h3>${file.name}</h3><pre>${JSON.stringify(json, null, 4)}</pre>`;
|
|
const option = document.createElement('option');
|
|
option.value = file.name;
|
|
option.textContent = file.name;
|
|
jsonSelect.appendChild(option);
|
|
} catch (err) {
|
|
error.textContent = `Error en "${file.name}": ${err.message}`;
|
|
}
|
|
};
|
|
reader.onerror = function() {
|
|
error.textContent = `No se pudo leer el archivo "${file.name}".`;
|
|
};
|
|
reader.readAsText(file, 'utf-8');
|
|
});
|
|
});
|
|
document.getElementById('configForm').addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
const numQuestions = document.getElementById('numQuestions').value;
|
|
const questionType = document.getElementById('questionType').value;
|
|
const numAnswers = document.getElementById('numAnswers').value;
|
|
const jsonSelect = document.getElementById('jsonSelect');
|
|
const selectedJsons = Array.from(jsonSelect.selectedOptions).map(opt => opt.value);
|
|
const configSummary = document.getElementById('configSummary');
|
|
if (selectedJsons.length === 0) {
|
|
configSummary.style.display = 'none';
|
|
alert('Selecciona al menos un temario cargado.');
|
|
return;
|
|
}
|
|
configSummary.innerHTML = `<strong>Configuración guardada:</strong><br>
|
|
Número de preguntas: ${numQuestions}<br>
|
|
Tipo de preguntas: ${questionType}<br>
|
|
Número de respuestas: ${numAnswers}<br>
|
|
Temarios seleccionados: ${selectedJsons.join(', ')}`;
|
|
configSummary.style.display = 'block';
|
|
// Aquí se prepararía la estructura interna para la generación del quiz
|
|
// window.quizConfig = { numQuestions, questionType, numAnswers, selectedJsons };
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |