Afficher graphique à la FIN d'un quizz

kendreamss Messages postés 1 Date d'inscription   Statut Membre Dernière intervention   -  
BidGate Messages postés 3 Date d'inscription   Statut Membre Dernière intervention   -
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.
A voir également:

2 réponses

nulenmathe Messages postés 425 Date d'inscription   Statut Membre Dernière intervention   152
 
En rajoutant un event ?
0
Kendreamss
 
C'est quoi? Connait ça se passe tu peux développer stp
0
nulenmathe Messages postés 425 Date d'inscription   Statut Membre Dernière intervention   152
 
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   Statut Membre Dernière intervention  
 
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