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.
3.01-QCM_MuscuMaths/Website/templates/singleplayer.twig

82 lines
3.8 KiB

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset=utf-8>
<title>Math'Educ</title>
<link rel="stylesheet" href="../css/global.css">
<link rel="stylesheet" href="css/chrono.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</head>
<body id="bodyStyle">
<div id="chrono" class="container mx-5 my-4 position-relative">
<div id="centre"></div>
<div id="aiguille-container">
<div id="aiguille" class="aiguille"></div>
</div>
<div id="fond"></div>
</div>
<div class="container text-center text-white">
<div class="container border border-white rounded mt-5" style="background-color: #151720">
<p class="fs-2">
{{ questions[numQuestion].content }}
<br>
Question n° : {{ numQuestion+1 }}/10
</p>
</div>
<form id="FormQuestion" action="/verifQuestion" method="post">
{# Awfull Code but it's valided by the 6ème membre #}
<input type="hidden" name="numQuestion" value="{{ numQuestion }}">
{# End of Awfull Code #}
<div class="row g-5">
<div class="col pt-5">
<input type="radio" class="btn-check" name="answer" value="1" id="answer1" autocomplete="off" required>
<label class="btn fs-2 container text-white" for="answer1" style="background-color:blue;">
{{ answerss[numQuestion][0].content }}
</label>
</div>
<div class="col pt-5">
<input type="radio" class="btn-check" name="answer" value="2" id="answer2" autocomplete="off">
<label class="btn fs-2 container text-white" for="answer2" style="background-color:green;">
{{ answerss[numQuestion][1].content }}
</label>
</div>
</div>
<div class="row g-5">
<div class="col pt-5">
<input type="radio" class="btn-check" name="answer" value="3" id="answer3" autocomplete="off">
<label class="btn fs-2 container text-white" for="answer3" style="background-color:red;">
{{ answerss[numQuestion][2].content }}
</label>
</div>
<div class="col pt-5">
<input type="radio" class="btn-check" name="answer" value="4" id="answer4" autocomplete="off">
<label class="btn fs-2 container text-white" for="answer4" style="background-color:orange;">
{{ answerss[numQuestion][3].content }}
</label>
</div>
</div>
<div class="row justify-content-center">
<div class="col-1 pt-5">
<button type="button" id="passerButton" class="fs-2 btn btn-danger btn-lg">
Passer
</button>
</div>
<div class="col-1 pt-5">
<button type="submit" class="fs-2 btn btn-success btn-lg">
Valider
</button>
</div>
</div>
<p class="mt-2 fs-5 text-danger">{{ error }}</p>
</form>
</div>
<script type="module" src="js/scriptChrono.js"></script>
<script type="module" src="js/passer.js"></script>
</body>
</html>