|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>Quiz</title> |
|
<link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}"> |
|
<script> |
|
function updateTimer() { |
|
const startTime = {{ session['start_time'] }} * 1000; |
|
const now = new Date().getTime(); |
|
const elapsedTime = new Date(now - startTime); |
|
const hours = elapsedTime.getUTCHours().toString().padStart(2, '0'); |
|
const minutes = elapsedTime.getUTCMinutes().toString().padStart(2, '0'); |
|
const seconds = elapsedTime.getUTCSeconds().toString().padStart(2, '0'); |
|
document.getElementById('timer').innerText = `${hours}:${minutes}:${seconds}`; |
|
} |
|
setInterval(updateTimer, 1000); |
|
</script> |
|
</head> |
|
<body onload="updateTimer()"> |
|
<h1>Question {{ question_number }} of {{ total_questions }} - {{ selected_file }} <span id="timer"></span></h1> |
|
<p>{{ question.question }}</p> |
|
<form action="{{ url_for('quiz') }}" method="post"> |
|
{% if multiple_selection %} |
|
{% for option in question.options %} |
|
<label style="display: flex; align-items: center;"> |
|
<input type="checkbox" name="answer" value="{{ loop.index }}" {% if loop.index in previous_answers %}checked{% endif %}> |
|
<span>{{ option }}</span> |
|
</label><br> |
|
{% endfor %} |
|
{% else %} |
|
{% for option in question.options %} |
|
<label style="display: flex; align-items: center;"> |
|
<input type="radio" name="answer" value="{{ loop.index }}" {% if loop.index in previous_answers %}checked{% endif %}> |
|
<span>{{ option }}</span> |
|
</label><br> |
|
{% endfor %} |
|
{% endif %} |
|
<br> |
|
{% if show_previous %} |
|
<button type="submit" name="action" value="previous">Previous</button> |
|
{% endif %} |
|
<button type="submit" name="action" value="next">Next</button> |
|
<button type="submit" name="action" value="end">End Session</button> |
|
</form> |
|
</body> |
|
</html> |
