jeremy.ducourthial
/
3.01-QCM_MuscuMaths_Test
forked from jade.van_brabandt/3.01-QCM_MuscuMaths
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat : lien Chrono/ProgressBar

Browse Source
master
Maxence GUITARD 1 year ago
parent ee851475c2
commit 2fb925ddd4
4 changed files with 111 additions and 5 deletions
Show Stats Download Patch File Download Diff File

9
Website/css/progressBar.css
Unescape View File

@ -0,0 +1,9 @@
.progress {
position: relative;
}
.progress img {
position: absolute;
height: 16px;
width: auto;
}

73
Website/js/progressBar.js
Unescape View File

@ -0,0 +1,73 @@
import { tempsExport } from "./scriptChrono.js";
$(document).ready(function() {
var timerId, percent;
percent = 0;
var isPaused = false;
// reset progress bar
percent = 0;
//$('#test').attr('disabled', true);
$('#load').css('width', '0px');
$('#load').addClass('progress-bar-striped active');
$('#rocket').show();
timerId = setInterval(function() {
if(!isPaused){
// increment progress bar
percent += 1/12;
$('#load').css('width', percent + '%');
$('#load').html(percent + '%');
$('#rocket').css('left','calc('+percent+'% - 19px');
if(percent>= 100){
clearInterval(timerId);
$('#load').removeClass('progress-bar-striped active');
$('#load').addClass('bg-danger');
$('#repondbien').attr('disabled', true);
$('#load').html('Finish');
$('#rocket').hide();
}
}
}, 250);
function wait(ms){
var start = new Date().getTime();
var end = start;
while(end < start + ms) {
end = new Date().getTime();
}
}
$('#repondbien').click(function() {
if (tempsExport <= 6000) {
percent += 12;
} else if (tempsExport > 6000 && tempsExport <= 12000) {
percent += 11;
} else if (tempsExport > 12000 && tempsExport <= 18000) {
percent += 10;
} else if (tempsExport > 18000 && tempsExport <= 24000) {
percent += 9;
} else {
percent += 8;
}
$('#repondbien').attr('disabled', false);
$('#load').css('width', '0px');
$('#load').addClass('progress-bar-striped active');
$('#load').removeClass('bg-danger');
$('#load').css('width', percent + '%');
$('#load').html(percent + '%');
})
$('#repondmal').click(function() {
isPaused = true;
$('#repondmal').attr('disabled', false);
//$('#load').css('width', percent+'px');
$('#load').addClass('progress-bar-striped active');
$('#load').removeClass('bg-danger');
wait(3000);
console.log("test");
isPaused = false;
})
})

9
Website/js/scriptChrono.js
Unescape View File

@ -1,3 +1,4 @@
let tempsExport = 0;
const dureeQuiz = 30; // Durée du quiz en secondes const dureeQuiz = 30; // Durée du quiz en secondes
const aiguilleElement = document.getElementById("aiguille"); const aiguilleElement = document.getElementById("aiguille");
const fondElement = document.getElementById("fond"); const fondElement = document.getElementById("fond");
@ -5,18 +6,23 @@ const dureeQuiz = 30; // Durée du quiz en secondes
let debutAnimation; let debutAnimation;
const animationDuration = 30 * 1000; // Durée de l'animation en millisecondes const animationDuration = 30 * 1000; // Durée de l'animation en millisecondes
function mettreAJourTempsExport(newTemps) {
tempsExport = newTemps;
}
function mettreAJourAiguille(timestamp) { function mettreAJourAiguille(timestamp) {
if (!debutAnimation) { if (!debutAnimation) {
debutAnimation = timestamp; debutAnimation = timestamp;
} }
const tempsEcoule = timestamp - debutAnimation; const tempsEcoule = timestamp - debutAnimation;
mettreAJourTempsExport(tempsEcoule);
const pourcentageTempsEcoule = tempsEcoule / animationDuration; const pourcentageTempsEcoule = tempsEcoule / animationDuration;
const rotationDeg = pourcentageTempsEcoule * 360; const rotationDeg = pourcentageTempsEcoule * 360;
aiguilleElement.style.transform = `rotate(${rotationDeg}deg)`; aiguilleElement.style.transform = `rotate(${rotationDeg}deg)`;
// Mettez à jour le fond en fonction de la position de l'aiguille // Mettez à jour le fond en fonction de la position de l'aiguille
fondElement.style.background = `conic-gradient(red 0%, red ${rotationDeg}deg, #4b4b4b ${rotationDeg}deg, #4b4b4b 360deg)`; fondElement.style.background = `conic-gradient(red 0%, red ${rotationDeg}deg, #4b4b4b ${rotationDeg}deg, #4b4b4b 360deg)`;
if (tempsEcoule < animationDuration) { if (tempsEcoule < animationDuration) {
requestAnimationFrame(mettreAJourAiguille); requestAnimationFrame(mettreAJourAiguille);
} else { } else {
@ -26,3 +32,4 @@ const dureeQuiz = 30; // Durée du quiz en secondes
} }
} }
requestAnimationFrame(mettreAJourAiguille); requestAnimationFrame(mettreAJourAiguille);
export {tempsExport};

21
Website/templates/multijoueur.twig
Unescape View File

@ -1,12 +1,14 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="fr"> <html lang="fr">
<html>
<head> <head>
<meta charset=utf-8> <meta charset=utf-8>
<title>Math'Educ</title> <title>Math'Educ</title>
<link rel="stylesheet" href="css/global.css"> <link rel="stylesheet" href="css/global.css">
<link rel="stylesheet" href="css/chrono.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"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head> </head>
@ -19,7 +21,19 @@
</div> </div>
<div id="fond"></div> <div id="fond"></div>
</div> </div>
<script src="js/scriptChrono.js"></script>
<div class="container py-3">
<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="container text-center text-white"> <div class="container text-center text-white">
<div class="container border border-white rounded mt-5"> <div class="container border border-white rounded mt-5">
@ -69,4 +83,7 @@
</div> </div>
</div> </div>
</div> </div>
<script type="module" src="js/scriptChrono.js"></script>
<script type="module" src="js/progressBar.js"></script>
</body> </body>
<html>
Write Preview
Loading…
Cancel
Save