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.
146 lines
7.6 KiB
146 lines
7.6 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 rel="stylesheet" href="css/progressBar.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>
|
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
|
|
|
</head>
|
|
|
|
<body id="bodyStyle">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-lg-3">
|
|
<div id="chrono" class="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>
|
|
|
|
<div class="col-lg-8">
|
|
<div class="container mt-3">
|
|
<div class="row my-2">
|
|
<div class="progress">
|
|
<div class="progress-bar progress-bar-striped active progress-bar-animated" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" id="load" style="width:0%">
|
|
|
|
</div>
|
|
<img src="Media/rocket.png" id="rocket" style="left: 0px;">
|
|
</div>
|
|
|
|
{# <button type="button" id="repondbien" class="btn btn-primary mt-2" autocomplete="off">OK</button>
|
|
<button type="button" id="repondmal" class="btn btn-danger mt-2" autocomplete="off">KO</button> #}
|
|
</div>
|
|
<div class="row my-2">
|
|
<div class="progress">
|
|
<div class="progress-bar progress-bar-striped active progress-bar-animated" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" id="load" style="width:0%">
|
|
|
|
</div>
|
|
<img src="Media/rocket.png" id="rocket" style="left: 0px;">
|
|
</div>
|
|
</div>
|
|
<div class="row my-2">
|
|
<div class="progress">
|
|
<div class="progress-bar progress-bar-striped active progress-bar-animated" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" id="load" style="width:0%">
|
|
|
|
</div>
|
|
<img src="Media/rocket.png" id="rocket" style="left: 0px;">
|
|
</div>
|
|
</div>
|
|
<div class="row my-2">
|
|
<div class="progress">
|
|
<div class="progress-bar progress-bar-striped active progress-bar-animated" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" id="load" style="width:0%">
|
|
|
|
</div>
|
|
<img src="Media/rocket.png" id="rocket" style="left: 0px;">
|
|
</div>
|
|
</div>
|
|
<div class="row my-2">
|
|
<div class="progress">
|
|
<div class="progress-bar progress-bar-striped active progress-bar-animated" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" id="load" style="width:0%">
|
|
|
|
</div>
|
|
<img src="Media/rocket.png" id="rocket" style="left: 0px;">
|
|
</div>
|
|
</div>
|
|
<div class="row my-2">
|
|
<div class="progress">
|
|
<div class="progress-bar progress-bar-striped active progress-bar-animated" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" id="load" style="width:0%">
|
|
|
|
</div>
|
|
<img src="Media/rocket.png" id="rocket" style="left: 0px;">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="container text-center text-white">
|
|
<div class="container border border-white rounded mt-5">
|
|
<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="0" id="answer1" autocomplete="off" required>
|
|
<label class="btn fs-2 container text-white" for="answer1" style="background-color:blue;">
|
|
{{ questions[numQuestion]['answers'][0]['content'] }}
|
|
</label>
|
|
</div>
|
|
<div class="col pt-5">
|
|
<input type="radio" class="btn-check" name="answer" value="1" id="answer2" autocomplete="off">
|
|
<label class="btn fs-2 container text-white" for="answer2" style="background-color:green;">
|
|
{{ questions[numQuestion]['answers'][1]['content'] }}
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="row g-5">
|
|
<div class="col pt-5">
|
|
<input type="radio" class="btn-check" name="answer" value="2" id="answer3" autocomplete="off">
|
|
<label class="btn fs-2 container text-white" for="answer3" style="background-color:red;">
|
|
{{ questions[numQuestion]['answers'][2]['content'] }}
|
|
</label>
|
|
</div>
|
|
<div class="col pt-5">
|
|
<input type="radio" class="btn-check" name="answer" value="3" id="answer4" autocomplete="off">
|
|
<label class="btn fs-2 container text-white" for="answer4" style="background-color:orange;">
|
|
{{ questions[numQuestion]['answers'][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>
|
|
</form>
|
|
</div>
|
|
<script type="module" src="js/scriptChrono.js"></script>
|
|
{# <script type="module" src="js/passer.js"></script> #}
|
|
<script type="module" src="js/progressBar.js"></script>
|
|
</body>
|
|
</html>
|
|
<html> |