218 lines
7.6 KiB
HTML
218 lines
7.6 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Modo Práctica - Balotario Licencia A-I{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="text-center mb-4">
|
|
<h2 class="fw-bold text-success">
|
|
<i class="fas fa-dumbbell me-2"></i>
|
|
Modo Práctica
|
|
</h2>
|
|
<p class="text-muted">Practica con preguntas aleatorias y recibe retroalimentación inmediata</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">Configuración de Práctica</h6>
|
|
<button class="btn btn-sm btn-outline-success" id="new-session">
|
|
<i class="fas fa-refresh me-1"></i>Nueva Sesión
|
|
</button>
|
|
</div>
|
|
<div class="row g-3">
|
|
<div class="col-md-6">
|
|
<label class="form-label">Número de preguntas:</label>
|
|
<select class="form-select" id="question-count">
|
|
<option value="10">10 preguntas</option>
|
|
<option value="20" selected>20 preguntas</option>
|
|
<option value="30">30 preguntas</option>
|
|
<option value="50">50 preguntas</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label"> </label>
|
|
<button class="btn btn-success w-100" id="start-practice">
|
|
<i class="fas fa-play me-1"></i>Comenzar Práctica
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="card stats-enhanced">
|
|
<div class="card-body text-center position-relative">
|
|
<h6 class="text-white mb-3">Estadísticas de Sesión</h6>
|
|
<div class="row g-2">
|
|
<div class="col-6 col-sm-4">
|
|
<div class="stats-number" id="session-correct">0</div>
|
|
<small class="d-block">Correctas</small>
|
|
</div>
|
|
<div class="col-6 col-sm-4">
|
|
<div class="stats-number" id="session-incorrect">0</div>
|
|
<small class="d-block">Incorrectas</small>
|
|
</div>
|
|
<div class="col-12 col-sm-4">
|
|
<div class="stats-number" id="session-accuracy">0%</div>
|
|
<small class="d-block">Precisión</small>
|
|
</div>
|
|
</div>
|
|
<div class="mt-3">
|
|
<div class="progress" style="height: 8px;">
|
|
<div class="progress-bar bg-light" id="session-progress" style="width: 0%"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="loading" class="loading">
|
|
<div class="spinner"></div>
|
|
</div>
|
|
|
|
<div id="practice-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">
|
|
<div>
|
|
<span class="badge bg-primary fs-6" id="question-counter">1 de 20</span>
|
|
</div>
|
|
<div class="d-flex gap-2">
|
|
<button class="btn btn-outline-secondary" id="skip-question">
|
|
<i class="fas fa-forward me-2"></i>Saltar
|
|
</button>
|
|
<button class="btn btn-success" id="next-question" style="display: none;">
|
|
Siguiente<i class="fas fa-chevron-right ms-2"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="practice-complete" class="text-center" style="display: none;">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<i class="fas fa-trophy fa-4x text-warning mb-4"></i>
|
|
<h3 class="mb-3">¡Práctica Completada!</h3>
|
|
<div class="row justify-content-center">
|
|
<div class="col-md-8">
|
|
<div class="row text-center mb-4">
|
|
<div class="col-4">
|
|
<h4 class="text-success" id="final-correct">0</h4>
|
|
<p class="mb-0">Correctas</p>
|
|
</div>
|
|
<div class="col-4">
|
|
<h4 class="text-danger" id="final-incorrect">0</h4>
|
|
<p class="mb-0">Incorrectas</p>
|
|
</div>
|
|
<div class="col-4">
|
|
<h4 class="text-primary" id="final-accuracy">0%</h4>
|
|
<p class="mb-0">Precisión</p>
|
|
</div>
|
|
</div>
|
|
<div class="progress mb-4" style="height: 20px;">
|
|
<div class="progress-bar bg-success" id="final-progress" style="width: 0%"></div>
|
|
</div>
|
|
<div class="d-flex gap-2 justify-content-center">
|
|
<button class="btn btn-success" id="practice-again">
|
|
<i class="fas fa-redo me-2"></i>Practicar de Nuevo
|
|
</button>
|
|
<a href="/" class="btn btn-outline-primary">
|
|
<i class="fas fa-home me-2"></i>Volver al Inicio
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="welcome-message" class="text-center">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<i class="fas fa-play-circle fa-4x text-success mb-4"></i>
|
|
<h4>¡Listo para Practicar!</h4>
|
|
<p class="text-muted">Configura tu sesión de práctica y comienza a responder preguntas aleatorias.</p>
|
|
<p class="small text-muted">
|
|
<i class="fas fa-lightbulb me-1"></i>
|
|
Tip: Recibirás retroalimentación inmediata después de cada respuesta.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
/* Mobile-specific improvements for session statistics */
|
|
@media (max-width: 576px) {
|
|
.stats-enhanced .card-body {
|
|
padding: 1rem 0.75rem;
|
|
}
|
|
|
|
.stats-enhanced h6 {
|
|
font-size: 0.9rem;
|
|
margin-bottom: 1rem !important;
|
|
}
|
|
|
|
.stats-number {
|
|
font-size: 1.5rem !important;
|
|
font-weight: bold;
|
|
line-height: 1.2;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.stats-enhanced small {
|
|
font-size: 0.75rem;
|
|
opacity: 0.9;
|
|
line-height: 1.1;
|
|
}
|
|
|
|
.stats-enhanced .row {
|
|
margin: 0 -0.25rem;
|
|
}
|
|
|
|
.stats-enhanced .row > div {
|
|
padding: 0.5rem 0.25rem;
|
|
}
|
|
|
|
/* Better spacing for the accuracy stat when it's full width */
|
|
.stats-enhanced .col-12 {
|
|
margin-top: 0.5rem;
|
|
padding-top: 0.75rem;
|
|
border-top: 1px solid rgba(255,255,255,0.2);
|
|
}
|
|
}
|
|
|
|
/* Tablet improvements */
|
|
@media (min-width: 577px) and (max-width: 768px) {
|
|
.stats-enhanced .stats-number {
|
|
font-size: 1.75rem;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.stats-enhanced small {
|
|
font-size: 0.8rem;
|
|
}
|
|
}
|
|
|
|
/* General stats number styling */
|
|
.stats-number {
|
|
font-size: 2rem;
|
|
font-weight: bold;
|
|
color: white;
|
|
text-shadow: 0 1px 3px rgba(0,0,0,0.3);
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<script>
|
|
// Practice mode is now handled by the PracticeMode module
|
|
// The module auto-initializes when the DOM is ready
|
|
console.log('Practice mode template loaded - using modular JavaScript');
|
|
</script>
|
|
{% endblock %}
|