You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
67 lines
2.6 KiB
67 lines
2.6 KiB
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Wiki Fantasy : Quiz</title>
|
|
<link id="favicon" rel="icon" href="../../images/iconeSombre.ico"> <!-- Par défaut sombre -->
|
|
<link rel="stylesheet" href="../../public/styles/styleQuiz.css">
|
|
<script defer src="../../public/script/theme-toggle.js"></script>
|
|
<script>
|
|
// Timer pour 5 minutes
|
|
var timeLeft = 300;
|
|
function countdown() {
|
|
var timerDisplay = document.getElementById("timer");
|
|
if (timeLeft <= 0) {
|
|
document.getElementById("quizForm").submit();
|
|
} else {
|
|
timerDisplay.innerHTML = timeLeft + " seconds left";
|
|
timeLeft -= 1;
|
|
setTimeout(countdown, 1000);
|
|
}
|
|
}
|
|
window.onload = countdown;
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div class="header">
|
|
<div class="nav">
|
|
<a href="../favorite.html"><img src="../../images/coeur.svg" alt="coeur" width="67px" height="67px" onmousedown="return false"></a>
|
|
<img id="theme-icon" src="../../images/light.svg" alt="toggle theme" width="72px" height="37px" onmousedown="return false" onclick="toggleTheme()">
|
|
<img src="../../images/quizz.svg" alt="quizz" width="51px" height="82px" onmousedown="return false">
|
|
</div>
|
|
<div class="logo">
|
|
<img src="../../images/WIKIFANTASY.png" alt="Logo" width="227px" height="106px" onmousedown="return false">
|
|
</div>
|
|
<div class="user">
|
|
<img src="../../images/user_dark.png" alt="user" width="70px" height="70px" onmousedown="return false">
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<h1>▶ Quiz ◀</h1>
|
|
<div class="quiz">
|
|
<h2> {{ question.question }} </h2>
|
|
<a id="timer"> 300 seconds left .. </a>
|
|
|
|
<form id="quizForm" method="POST">
|
|
<div class="answers">
|
|
<button class="answer" name="answera" value="A-{{ id }}">
|
|
{{ question.answera }}
|
|
</button>
|
|
<button class="answer" name="answerb" value="B-{{ id }}">
|
|
{{ question.answerb }}
|
|
</button>
|
|
<button class="answer" name="answerc" value="C-{{ id }}">
|
|
{{ question.answerc }}
|
|
</button>
|
|
<button class="answer" name="answerd" value="D-{{ id }}">
|
|
{{ question.answerd }}
|
|
</button>
|
|
</div>
|
|
<input type="hidden" name="action" value="canswer">
|
|
</form>
|
|
</div>
|
|
</body>
|
|
</html>
|