Afficher graphique à la FIN d'un quizz

Fermé
kendreamss Messages postés 1 Date d'inscription jeudi 5 juillet 2018 Statut Membre Dernière intervention 6 juillet 2018 - Modifié le 6 juil. 2018 à 08:47
BidGate Messages postés 3 Date d'inscription dimanche 19 août 2018 Statut Membre Dernière intervention 1 mars 2019 - 19 août 2018 à 00:18
Bonjour, je suis actuellement en train de coder un questionnaire.
En js ,html et css. Je cherche à intégrer un graphique radar qu'y s'adptera au score de l'utilisateur mais surtout un graphique qui ne s'affiche uniquement lorsque celui ci à finit le quizz! C'est là ou je bloque, j'ai réussi à avoir un graphique mais qui s'affiche tout le long du quizz :/ j'ai essayé de maintes façons je n'y arrive pas.

le code js pour le quizz
//  ce code est pour le graphique que j'ai mis au debut du js    
var radarChartData = {
labels: ["ATT", "SPD", "POW"],
datasets: [ {
fillColor: "rgba(0,120,0,0.2)",
strokeColor: "rgba(0,120,0,1)",
pointColor: "rgba(10,10,10,1)",
pointStrokeColor: "#ccc",
pointHighlightFill: "#333",
pointHighlightStroke: "rgba(255,255,0,1)",
data: [
12,15,17] } ] };
    
window.onload = function(){
var ctx = document.getElementById("radarCanvas").getContext("2d");
window.myRadar = new Chart(ctx).Radar(radarChartData, {
responsive: true,
scaleStartValue: 0

}); } 
   //code pour le quizz je mets l'essentiel pour ne pas avoir trop de chose
function loadQuestion (questionIndex) {

 var q = questions[questionIndex];
 var input = document.querySelector('[name="option3"]');
 questionEl.textContent = (questionIndex + 1) + '. ' + q.question;
    
 opt1.textContent = q.option1;
 opt2.textContent = q.option2;
 opt3.textContent = q.option3;
 opt4.textContent = q.option4;
 } 
};
function loadNextQuestion () {
 var selectedOption = document.querySelector('input[type=radio]:checked');
 
 if(!selectedOption){
  alert('Please select your answer!');
  return;
 }
 var pts=selectedOption.value;
 var answer = selectedOption.value;
 if(questions[currentQuestion].answer == answer){
 
 selectedOption.checked = false;
 currentQuestion++;
 if(currentQuestion == totQuestions - 1){
  nextButton.textContent = 'Finish';
 }
 if(currentQuestion == 5){
 score2=score;
 }
 
 if(currentQuestion == totQuestions){
 
  container.style.display = 'none';
  resultCont.style.display = '';
 
  resultCont.textContent = 'Your Score: ' + score+
  return;
  }
 }
 loadQuestion(currentQuestion);
}
 
loadQuestion(currentQuestion);






EDIT : Ajout des balises de code (la coloration syntaxique).
Explications disponibles ici : ICI

Merci d'y penser dans tes prochains messages.

2 réponses

nulenmathe Messages postés 425 Date d'inscription dimanche 7 septembre 2014 Statut Membre Dernière intervention 31 juillet 2019 151
6 juil. 2018 à 00:04
En rajoutant un event ?
0
C'est quoi? Connait ça se passe tu peux développer stp
0
nulenmathe Messages postés 425 Date d'inscription dimanche 7 septembre 2014 Statut Membre Dernière intervention 31 juillet 2019 151
6 juil. 2018 à 08:54
Tu déclenche le graphique à la fin du quiiz par exemple if (quizz = "fini") {graph} ou le caché avec le css
0
BidGate Messages postés 3 Date d'inscription dimanche 19 août 2018 Statut Membre Dernière intervention 1 mars 2019
19 août 2018 à 00:18
Mon idée est que tu mettes le graphique dans un div dès le début de la page mais que tu mettes la hauteur de ce div à 0px puis lorsque l'utilisateur finit de remplir ton quizz, tu mettes la hauteur de ce div à auto
J'espère vraiment avoir aidé
0