60 lines
2.4 KiB
HTML
60 lines
2.4 KiB
HTML
{% extends "base.html" %}
|
||
{% block title %}Jugar - Multiplic-a-t{% endblock %}
|
||
|
||
{% block body %}
|
||
<div class="row justify-content-center">
|
||
<div class="col-md-6">
|
||
<div class="card shadow-sm">
|
||
<div class="card-body">
|
||
<h3 class="card-title mb-4 text-center">¡Pon a prueba tus multiplicaciones!</h3>
|
||
|
||
<!-- Temporizador: texto + barra de progreso -->
|
||
<div class="mb-3">
|
||
<span id="tiempo-texto" class="fs-5">60 segundos restantes</span>
|
||
<div class="progress mt-1">
|
||
<div id="barra-tiempo" class="progress-bar bg-success" role="progressbar"
|
||
style="width: 100%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="60">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Contador de aciertos -->
|
||
<div class="mb-3">
|
||
<span class="fs-6">Aciertos: <span id="contador-aciertos">0</span></span>
|
||
</div>
|
||
|
||
<!-- Enunciado de la multiplicación -->
|
||
<div class="mb-3">
|
||
<label for="input-respuesta" class="form-label fs-5" id="enunciado">¿Cuánto es 0 × 0?</label>
|
||
<input type="number" id="input-respuesta" class="form-control" autocomplete="off" />
|
||
</div>
|
||
|
||
<!-- Mensaje de feedback (correcto/incorrecto) -->
|
||
<div id="feedback" class="mb-3" style="min-height: 1.5em;"></div>
|
||
|
||
<!-- Botón oculto inicialmente, para reiniciar o ver ranking -->
|
||
<div id="boton-final" class="text-center mt-4 d-none">
|
||
<button id="ver-ranking" class="btn btn-primary">Ver Ranking</button>
|
||
<button id="jugar-otra" class="btn btn-secondary ms-2">Jugar otra vez</button>
|
||
</div>
|
||
|
||
<!-- Formulario para que el usuario escriba nombre si entra en top 10 -->
|
||
<div id="form-nombre" class="mt-4 d-none">
|
||
<p class="mb-2">¡Felicidades! Entraste en el Top 10. Escribe tu nombre:</p>
|
||
<div class="input-group">
|
||
<input type="text" id="input-nombre" class="form-control" maxlength="20" />
|
||
<button id="guardar-nombre" class="btn btn-success">Guardar</button>
|
||
</div>
|
||
<div id="mensaje-guardar" class="mt-2"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{% endblock %}
|
||
|
||
{% block scripts %}
|
||
<!-- Importar el archivo JS que contiene la lógica del juego -->
|
||
<script src="{{ url_for('static', filename='js/game.js') }}"></script>
|
||
{% endblock %}
|
||
|