330 lines
13 KiB
HTML
330 lines
13 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Examen Simulado - Balotario Licencia A-I{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="text-center mb-4">
|
|
<h2 class="fw-bold text-warning">
|
|
<i class="fas fa-clipboard-check me-2"></i>
|
|
Examen Simulado
|
|
</h2>
|
|
<p class="text-muted">Simula el examen real con tiempo limitado y obtén tu calificación final</p>
|
|
</div>
|
|
|
|
<div id="exam-setup" class="row justify-content-center">
|
|
<div class="col-md-8">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h5 class="card-title text-center mb-4">
|
|
<i class="fas fa-cog me-2"></i>Configuración del Examen
|
|
</h5>
|
|
|
|
<div class="row g-4">
|
|
<div class="col-md-6">
|
|
<label class="form-label">Número de preguntas:</label>
|
|
<select class="form-select" id="exam-questions">
|
|
<option value="20">20 preguntas (Rápido)</option>
|
|
<option value="30" selected>30 preguntas (Estándar)</option>
|
|
<option value="40">40 preguntas (Completo)</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label">Tiempo límite:</label>
|
|
<select class="form-select" id="exam-time">
|
|
<option value="15">15 minutos</option>
|
|
<option value="30" selected>30 minutos</option>
|
|
<option value="45">45 minutos</option>
|
|
<option value="60">60 minutos</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="alert alert-info mt-4">
|
|
<i class="fas fa-info-circle me-2"></i>
|
|
<strong>Instrucciones:</strong>
|
|
<ul class="mb-0 mt-2">
|
|
<li>Responde todas las preguntas antes de que se acabe el tiempo</li>
|
|
<li>Puedes navegar entre preguntas usando los botones</li>
|
|
<li>Las preguntas no respondidas se marcarán como incorrectas</li>
|
|
<li>Al finalizar verás tu calificación y las respuestas correctas</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="text-center mt-4">
|
|
<button class="btn btn-warning btn-lg" id="start-exam">
|
|
<i class="fas fa-play me-2"></i>Comenzar Examen
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="exam-content" style="display: none;">
|
|
<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">
|
|
<h6 class="mb-0">
|
|
<i class="fas fa-clock me-2"></i>
|
|
Tiempo restante: <span id="timer" class="text-warning fw-bold">30:00</span>
|
|
</h6>
|
|
<div>
|
|
<span class="badge bg-warning" id="question-progress">1 de 30</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="card">
|
|
<div class="card-body text-center">
|
|
<h6 class="mb-2">Progreso</h6>
|
|
<div class="row">
|
|
<div class="col-6">
|
|
<h5 class="text-success" id="answered-count">0</h5>
|
|
<small>Respondidas</small>
|
|
</div>
|
|
<div class="col-6">
|
|
<h5 class="text-muted" id="remaining-count">30</h5>
|
|
<small>Restantes</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="question-card fade-in" id="exam-question-container">
|
|
<!-- Question content is loaded here -->
|
|
</div>
|
|
|
|
<div class="row mt-4">
|
|
<div class="col-md-8">
|
|
<div class="d-flex justify-content-between">
|
|
<button class="btn btn-outline-secondary" id="prev-exam-btn" disabled>
|
|
<i class="fas fa-chevron-left me-2"></i>Anterior
|
|
</button>
|
|
<button class="btn btn-warning" id="next-exam-btn">
|
|
Siguiente<i class="fas fa-chevron-right ms-2"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<button class="btn btn-danger w-100" id="finish-exam">
|
|
<i class="fas fa-flag-checkered me-2"></i>Finalizar Examen
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Question Navigator -->
|
|
<div class="card mt-4">
|
|
<div class="card-body">
|
|
<h6 class="card-title">Navegador de Preguntas</h6>
|
|
<div id="question-navigator" class="d-flex flex-wrap gap-2">
|
|
<!-- Navigation buttons are generated here -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="exam-results" class="text-center" style="display: none;">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div id="result-icon" class="mb-4">
|
|
<!-- Icon is generated based on result -->
|
|
</div>
|
|
<h3 class="mb-3" id="result-title">Examen Completado</h3>
|
|
|
|
<div class="row justify-content-center mb-4">
|
|
<div class="col-md-8">
|
|
<div class="row text-center">
|
|
<div class="col-3">
|
|
<h4 class="text-success" id="exam-correct">0</h4>
|
|
<p class="mb-0">Correctas</p>
|
|
</div>
|
|
<div class="col-3">
|
|
<h4 class="text-danger" id="exam-incorrect">0</h4>
|
|
<p class="mb-0">Incorrectas</p>
|
|
</div>
|
|
<div class="col-3">
|
|
<h4 class="text-muted" id="exam-unanswered">0</h4>
|
|
<p class="mb-0">Sin responder</p>
|
|
</div>
|
|
<div class="col-3">
|
|
<h4 class="text-primary" id="exam-score">0%</h4>
|
|
<p class="mb-0">Calificación</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="progress mb-4" style="height: 25px;">
|
|
<div class="progress-bar" id="exam-progress-bar" style="width: 0%"></div>
|
|
</div>
|
|
|
|
<div id="pass-message" class="alert" style="display: none;">
|
|
<!-- Pass/fail message -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="d-flex gap-2 justify-content-center">
|
|
<button class="btn btn-warning" id="retake-exam">
|
|
<i class="fas fa-redo me-2"></i>Repetir Examen
|
|
</button>
|
|
<button class="btn btn-outline-primary" id="review-answers">
|
|
<i class="fas fa-eye me-2"></i>Revisar Respuestas
|
|
</button>
|
|
<a href="/" class="btn btn-outline-secondary">
|
|
<i class="fas fa-home me-2"></i>Volver al Inicio
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="exam-review" style="display: none;">
|
|
<div class="text-center mb-4">
|
|
<h3 class="fw-bold text-primary">
|
|
<i class="fas fa-eye me-2"></i>
|
|
Revisión de Respuestas
|
|
</h3>
|
|
<p class="text-muted">Revisa tus respuestas y las correctas</p>
|
|
</div>
|
|
|
|
<div class="row mb-4">
|
|
<div class="col-md-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<h6 class="mb-0">
|
|
<span class="badge bg-success me-2" id="review-correct-count">0</span>Correctas
|
|
<span class="badge bg-danger me-2 ms-3" id="review-incorrect-count">0</span>Incorrectas
|
|
<span class="badge bg-secondary me-2 ms-3" id="review-unanswered-count">0</span>Sin responder
|
|
</h6>
|
|
<div>
|
|
<span class="badge bg-primary" id="review-progress">1 de 30</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="question-card fade-in" id="review-question-container">
|
|
<!-- Review question content is loaded here -->
|
|
</div>
|
|
|
|
<div class="row mt-4">
|
|
<div class="col-md-8">
|
|
<div class="d-flex justify-content-between">
|
|
<button class="btn btn-outline-secondary" id="prev-review-btn" disabled>
|
|
<i class="fas fa-chevron-left me-2"></i>Anterior
|
|
</button>
|
|
<button class="btn btn-primary" id="next-review-btn">
|
|
Siguiente<i class="fas fa-chevron-right ms-2"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<button class="btn btn-outline-secondary w-100" id="back-to-results">
|
|
<i class="fas fa-arrow-left me-2"></i>Volver a Resultados
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Question Navigator for Review -->
|
|
<div class="card mt-4">
|
|
<div class="card-body">
|
|
<h6 class="card-title">Navegador de Preguntas</h6>
|
|
<div class="d-flex flex-wrap gap-2 mb-3">
|
|
<span class="badge bg-success me-2">
|
|
<i class="fas fa-check me-1"></i>Correcta
|
|
</span>
|
|
<span class="badge bg-danger me-2">
|
|
<i class="fas fa-times me-1"></i>Incorrecta
|
|
</span>
|
|
<span class="badge bg-secondary me-2">
|
|
<i class="fas fa-question me-1"></i>Sin responder
|
|
</span>
|
|
</div>
|
|
<div id="review-navigator" class="d-flex flex-wrap gap-2">
|
|
<!-- Navigation buttons are generated here -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Custom confirmation modal -->
|
|
<div id="confirmModal" style="display: none;">
|
|
<div id="confirmBackdrop" style="
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0,0,0,0.5);
|
|
z-index: 1050;
|
|
"></div>
|
|
<div id="confirmDialog" style="
|
|
position: fixed;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
z-index: 1055;
|
|
background: white;
|
|
border-radius: 15px;
|
|
box-shadow: 0 15px 35px rgba(0,0,0,0.3);
|
|
min-width: 400px;
|
|
max-width: 500px;
|
|
max-height: 90vh;
|
|
overflow-y: auto;
|
|
">
|
|
<div style="
|
|
padding: 20px 25px 15px 25px;
|
|
border-bottom: 1px solid #dee2e6;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
">
|
|
<h5 style="margin: 0; color: #333;">Confirmar acción</h5>
|
|
<button id="confirmModalClose" style="
|
|
background: none;
|
|
border: none;
|
|
font-size: 24px;
|
|
cursor: pointer;
|
|
color: #666;
|
|
padding: 0;
|
|
width: 30px;
|
|
height: 30px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
">×</button>
|
|
</div>
|
|
<div style="padding: 20px 25px;">
|
|
<p id="confirm-message" style="margin: 0 0 10px 0; color: #333;">¿Estás seguro de que quieres finalizar el examen?</p>
|
|
<p style="margin: 0; color: #666; font-size: 14px;">Tienes <span id="unanswered-warning"></span> preguntas sin responder.</p>
|
|
</div>
|
|
<div style="
|
|
padding: 15px 25px 20px 25px;
|
|
border-top: 1px solid #dee2e6;
|
|
display: flex;
|
|
gap: 10px;
|
|
justify-content: flex-end;
|
|
">
|
|
<button id="confirmModalCancel" class="btn btn-secondary">Cancelar</button>
|
|
<button id="confirm-finish" class="btn btn-danger">Finalizar</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<script>
|
|
// Exam mode is now handled by the ExamMode module
|
|
// The module auto-initializes when the DOM is ready
|
|
console.log('Exam mode template loaded - using modular JavaScript');
|
|
</script>
|
|
{% endblock %}
|