288 lines
8.5 KiB
HTML
288 lines
8.5 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Modo Estudio - Balotario Licencia A-I{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="text-center mb-4">
|
|
<h2 class="fw-bold text-primary">
|
|
<i class="fas fa-book me-2"></i>
|
|
Modo Estudio
|
|
</h2>
|
|
<p class="text-muted">Revisa todas las preguntas con sus respuestas correctas</p>
|
|
</div>
|
|
|
|
<div class="row mb-4">
|
|
<div class="col-md-8">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="d-flex justify-content-between align-items-center mb-3">
|
|
<h6 class="mb-0">Filtros de Estudio</h6>
|
|
<button class="btn btn-sm btn-outline-primary" id="reset-filters">
|
|
<i class="fas fa-refresh me-1"></i>Resetear
|
|
</button>
|
|
</div>
|
|
<div class="row g-3">
|
|
<div class="col-md-4">
|
|
<label class="form-label">Desde pregunta:</label>
|
|
<input type="number" class="form-control" id="start-question" min="1" max="200" value="1">
|
|
</div>
|
|
<div class="col-md-4">
|
|
<label class="form-label">Hasta pregunta:</label>
|
|
<input type="number" class="form-control" id="end-question" min="1" max="200" value="200">
|
|
</div>
|
|
<div class="col-md-4">
|
|
<label class="form-label"> </label>
|
|
<button class="btn btn-primary w-100" id="apply-filters">
|
|
<i class="fas fa-filter me-1"></i>Aplicar Filtros
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="card stats-card">
|
|
<div class="card-body text-center">
|
|
<h6 class="text-white mb-3">Progreso de Estudio</h6>
|
|
<div class="row">
|
|
<div class="col-6">
|
|
<h4 class="text-white" id="current-question">1</h4>
|
|
<small>Pregunta Actual</small>
|
|
</div>
|
|
<div class="col-6">
|
|
<h4 class="text-white" id="total-questions">0</h4>
|
|
<small>Total</small>
|
|
</div>
|
|
</div>
|
|
<div class="progress mt-3">
|
|
<div class="progress-bar bg-light" id="study-progress" style="width: 0%"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="loading" class="loading">
|
|
<div class="spinner"></div>
|
|
</div>
|
|
|
|
<div id="study-content" style="display: none;">
|
|
<div class="question-card fade-in" id="question-container">
|
|
<!-- Question content is loaded here -->
|
|
</div>
|
|
|
|
<div class="d-flex justify-content-between mt-4">
|
|
<button class="btn btn-outline-secondary" id="prev-btn" disabled>
|
|
<i class="fas fa-chevron-left me-2"></i>Anterior
|
|
</button>
|
|
<div class="d-flex gap-2">
|
|
<button class="btn btn-outline-primary" id="show-answer">
|
|
<i class="fas fa-eye me-2"></i>Mostrar Respuesta
|
|
</button>
|
|
<button class="btn btn-outline-primary" id="hide-answer" style="display: none;">
|
|
<i class="fas fa-eye-slash me-2"></i>Ocultar Respuesta
|
|
</button>
|
|
</div>
|
|
<button class="btn btn-primary" id="next-btn">
|
|
Siguiente<i class="fas fa-chevron-right ms-2"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Question Navigator -->
|
|
<div class="card mt-4">
|
|
<div class="card-body">
|
|
<div class="d-flex justify-content-between align-items-center mb-3">
|
|
<h6 class="card-title mb-0">
|
|
<i class="fas fa-map me-2"></i>Navegador de Preguntas
|
|
</h6>
|
|
<div class="d-flex gap-2 align-items-center">
|
|
<small class="text-muted">Ir a:</small>
|
|
<input type="number" class="form-control form-control-sm" id="jump-to-question"
|
|
min="1" max="200" placeholder="#" style="width: 60px;">
|
|
<button class="btn btn-sm btn-outline-primary" id="jump-btn" title="Ir a pregunta">
|
|
<i class="fas fa-arrow-right"></i>
|
|
</button>
|
|
<button class="btn btn-sm btn-outline-warning" id="reset-visited-btn" title="Limpiar preguntas visitadas">
|
|
<i class="fas fa-redo"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div id="question-navigator" class="question-navigator">
|
|
<!-- Question navigation buttons will be generated here -->
|
|
</div>
|
|
<div class="mt-2 d-flex justify-content-between align-items-center">
|
|
<div class="navigator-legend">
|
|
<small class="text-muted">
|
|
<span class="badge bg-primary me-2">●</span>Actual
|
|
<span class="badge bg-success me-2 ms-2">●</span>Visitada
|
|
<span class="badge bg-outline-secondary me-2 ms-2">○</span>Pendiente
|
|
</small>
|
|
</div>
|
|
<small class="text-muted" id="navigator-progress">0 de 0 visitadas</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="no-questions" class="text-center" style="display: none;">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<i class="fas fa-exclamation-triangle fa-3x text-warning mb-3"></i>
|
|
<h5>No se encontraron preguntas</h5>
|
|
<p class="text-muted">Ajusta los filtros para ver las preguntas disponibles.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
/* Question Navigator Styles */
|
|
.question-navigator {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 4px;
|
|
max-height: 200px;
|
|
overflow-y: auto;
|
|
padding: 8px;
|
|
background: #f8f9fa;
|
|
border-radius: 8px;
|
|
border: 1px solid #dee2e6;
|
|
}
|
|
|
|
.question-nav-btn {
|
|
width: 35px;
|
|
height: 35px;
|
|
border: 1px solid #dee2e6;
|
|
background: white;
|
|
color: #6c757d;
|
|
border-radius: 6px;
|
|
font-size: 0.8rem;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.question-nav-btn:hover {
|
|
border-color: #3498db;
|
|
background: #e3f2fd;
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.question-nav-btn.current {
|
|
background: #3498db;
|
|
color: white;
|
|
border-color: #2980b9;
|
|
font-weight: bold;
|
|
box-shadow: 0 2px 4px rgba(52, 152, 219, 0.3);
|
|
}
|
|
|
|
.question-nav-btn.visited {
|
|
background: #27ae60;
|
|
color: white;
|
|
border-color: #229954;
|
|
}
|
|
|
|
.question-nav-btn.visited:hover {
|
|
background: #2ecc71;
|
|
border-color: #27ae60;
|
|
}
|
|
|
|
.navigator-legend .badge {
|
|
font-size: 0.7rem;
|
|
padding: 0.25em 0.4em;
|
|
}
|
|
|
|
/* Mobile responsive */
|
|
@media (max-width: 576px) {
|
|
.question-navigator {
|
|
max-height: 150px;
|
|
gap: 3px;
|
|
padding: 6px;
|
|
}
|
|
|
|
.question-nav-btn {
|
|
width: 30px;
|
|
height: 30px;
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
.navigator-legend {
|
|
display: none;
|
|
}
|
|
|
|
#jump-to-question {
|
|
width: 50px !important;
|
|
}
|
|
}
|
|
|
|
/* Tablet responsive */
|
|
@media (min-width: 577px) and (max-width: 768px) {
|
|
.question-navigator {
|
|
max-height: 180px;
|
|
}
|
|
|
|
.question-nav-btn {
|
|
width: 32px;
|
|
height: 32px;
|
|
}
|
|
}
|
|
|
|
/* Smooth scrolling for navigator */
|
|
.question-navigator {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
/* Jump to question input styling */
|
|
#jump-to-question {
|
|
text-align: center;
|
|
font-weight: bold;
|
|
}
|
|
|
|
#jump-to-question:focus {
|
|
border-color: #3498db;
|
|
box-shadow: 0 0 0 0.2rem rgba(52, 152, 219, 0.25);
|
|
}
|
|
|
|
/* Reset visited button styling */
|
|
#reset-visited-btn {
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
#reset-visited-btn:hover {
|
|
background: #ffc107;
|
|
border-color: #ffc107;
|
|
color: #000;
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
#reset-visited-btn:active {
|
|
transform: scale(0.95);
|
|
}
|
|
|
|
/* Mobile adjustments for navigator controls */
|
|
@media (max-width: 576px) {
|
|
.card-title {
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
#reset-visited-btn, #jump-btn {
|
|
padding: 0.25rem 0.5rem;
|
|
}
|
|
|
|
#reset-visited-btn i, #jump-btn i {
|
|
font-size: 0.8rem;
|
|
}
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<script>
|
|
// Study mode is now handled by the StudyMode module
|
|
// The module auto-initializes when the DOM is ready
|
|
console.log('Study mode template loaded - using modular JavaScript');
|
|
</script>
|
|
{% endblock %}
|