jade.van_brabandt
/
3.01-QCM_MuscuMaths
5
1
Fork 1
Code Issues 4 Pull Requests 1 Packages Projects 8 Releases Wiki Activity

style : ajout des progressBar multi
continuous-integration/drone/push Build is passing Details

Browse Source
pull/37/head
Maxence GUITARD 1 year ago
parent 96ab357679
commit ffff595705
2 changed files with 120 additions and 63 deletions
Show Stats Download Patch File Download Diff File

103
Website/templates/multiplayer.twig
Unescape View File

@ -1,28 +1,34 @@
<!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">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<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 id="chrono" class="container mx-5 my-4 position-relative">
<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="container py-3">
<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%">
@ -30,60 +36,111 @@
<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>
{# <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">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident fuga cum soluta iure libero! Ullam, expedita excepturi! Odio distinctio quos quasi commodi libero ratione corrupti, unde iste explicabo suscipit consequatur ipsum! Id beatae corrupti ipsa totam deserunt, vel tenetur, iusto quaerat asperiores veritatis quidem! Vel dolorem recusandae necessitatibus ullam laborum!
{{ 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="reponse" id="reponse1" autocomplete="off">
<label class="btn fs-2 container text-white" for="reponse1" style="background-color:blue;">
Lorem, ipsum.
<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="reponse" id="reponse2" autocomplete="off">
<label class="btn fs-2 container text-white" for="reponse2" style="background-color:green;">
Lorem, ipsum.
<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="reponse" id="reponse3" autocomplete="off">
<label class="btn fs-2 container text-white" for="reponse3" style="background-color:red;">
Lorem, ipsum.
<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="reponse" id="reponse4" autocomplete="off">
<label class="btn fs-2 container text-white" for="reponse4" style="background-color:orange;">
Lorem, ipsum.
<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" class="fs-2 btn btn-success btn-lg">
Valider
<button type="button" id="passerButton" class="fs-2 btn btn-danger btn-lg">
Passer
</button>
</div>
<div class="col-1 pt-5">
<button type="button" class="fs-2 btn btn-danger btn-lg">
Passer
<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>

6
Website/templates/themeChoice.twig
Unescape View File

@ -12,13 +12,13 @@
<body id="bodyStyle">
<form action="/verifySingleplayer" method="post">
<div class="text-center" style="padding-top: 30vh">
<div class="text-center" style="padding-top: 6vh">
<h1 style="color: white; font-size: 50px">Difficulte :</h1>
<input type="radio" class="btn-check" name="difficulty" id="Facile" value="1">
<label class="btn btn-outline-success fs-1" for="Facile" style="margin-right: 20px">Facile</label>
<input type="radio" class="btn-check" name="difficulty" id="Moyen" value="2">
<label class="btn btn-outline-warning fs-1" for="Moyen" style="margin-right: 20px">Moyen</label>
<input type="radio" class="btn-check" name="difficulty" id="Toutes" value="2">
<label class="btn btn-outline-warning fs-1" for="Toutes" style="margin-right: 20px">Toutes</label>
<input type="radio" class="btn-check" name="difficulty" id="Difficile" value="3">
<label class="btn btn-outline-danger fs-1" for="Difficile">Difficile</label>

Write Preview
Loading…
Cancel
Save