Compteur de bonne réponse

sbsimon62360 Messages postés 7 Date d'inscription   Statut Membre Dernière intervention   -  
sbsimon62360 Messages postés 7 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour les internautes !
Je suis nouveau sur CCM et j'ai besoin de vous !
Pour résumer , je suis en TS et j'ai pris ISN en spé ( en gros c'est de la programmation sur PC) .
Avec un camarade , nous avons un projet à réaliser pour le bac .
Le sujet est : Code de la route .
Nous avons bien avancé , mais notre problème est le suivant :
il nous faut intégrer un compteur de bonne réponse puis a la fin du programme faire "les stats " .
Nous ne savons pas comment réaliser cela ! De plus nous avons un code a respecter et/ou a savoir expliquer correctement . Nous ne savons pas comment sélectionner une réponse ... Je vous joints le code ( sans les photos elles s'affichent correctement ) !

Merci beaucoup !

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"[http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd]">
<html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>page modele HTML</title>
  
  </head>
  <body>
 




<div id="chrono">30</div> <!-- Le d?part est ? trente secondes -->
  <img id="picture" src='0.jpg' height="500" width="1000"/>
   <div id="question1">La vitesse maximum autoris?e est:</div>
   <div id="reponse1">50 km/h</div>
   <div id="reponse2">70 km/h</div>
   <div id="reponse3">90 km/h</div>
   <div class="bouton"id="lElementQueJeVeux">suivant</div>
 
   <script type="text/javascript"> //Timer chrono d?but
 var lancer=function(){
  timer= window.setInterval(affiche,1000); //Le timer change toutes les 1000msecondes -->1secondes
 }
 var affiche=function(){
 
  if (compteur==-1){
   window.clearInterval(timer);
 
  }
  else{
   var elt=document.getElementById("chrono");
   elt.innerHTML=compteur;
   compteur=compteur-1; //? chaque 1000msecondes de pass?e, le timer enl?ve 1 seconde
  }
 
 }

 
 var action = function () {
window.clearInterval(timer); //arret du timer
compteur=30;//reinitalisation du compteur

var elt = document.getElementById("picture"); //chargement de l'image
elt.src=tabimg[j].src;

var elt1=document.getElementById("question1"); // chargement de la question
elt1.innerHTML=tabquest[j];

var eltrep1=document.getElementById("reponse1");
eltrep1.innerHTML=tabrep1[j];

var eltrep1=document.getElementById("reponse2");
eltrep1.innerHTML=tabrep2[j];

var eltrep1=document.getElementById("reponse3");
eltrep1.innerHTML=tabrep3[j];
j=j+1;

lancer();




}

  var setupEvents = function ()  {

  // abonnement de la fonction action pour l'?l?ment d'id lElementQueJeVeux en r?action ? un click
  var unElement = document.getElementById("lElementQueJeVeux");
  unElement.addEventListener("click",action);
 lancer();//appel de la fonction lancer au chargement de la page
  // ... on r?p?te le m?me sch?ma ici si on veut mettre en place d'autres abonnements
}



// ----------------------------------------
/* Documentation de la fonction action


*/// D?but progvar timer;var compteur=29; //Le chrono d?marre lui ? 29 secondesvar j=1;// Tableau IMGvar tabimg=new Array;tabimg[0]=new Image();tabimg[0].src='1.jpg';tabimg[1]=new Image();tabimg[1].src="2.jpg";tabimg[2]=new Image();tabimg[2].src="3.jpg";tabimg[3]=new Image();tabimg[3].src="4.jpg";tabimg[4]=new Image();tabimg[4].src="5.jpg";// Tableau Questionvar tabquest=new Array(" ","Dans cette situation :","Pour aller ? Evry , je me positionne :","Dans cette situation , je me deplace ? :","Que dois-je faire ?");// Reponse 1var tabrep1= new Array(" ","Je suis prioritaire","A droite","30 km/h"," Je fais un appel de phares ");// Reponse 2var tabrep2= new Array(" ","Je ne suis pas prioritaire","Au milieu","40 km/h","Je klaxonne");// Reponse 3var tabrep3= new Array(" ","Personne n'est prioritaire","A gauche","50 km/h","Je m'?carte");// pour appeler la fonction ci-dessus quans la page est charg?ewindow.addEventListener("load",setupEvents);            </script>       </body></html>
A voir également:

1 réponse

jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
Bonjour,

En règle générale on place, sur les quizz, des bouton radio ou des cases à cocher.
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_radio
http://www.lehtml.com/htmlplus/fmbox.htm

Bien sûr... tu peux tout de même utiliser les div (ou n'importe quel autre élément html...) mais pour détecter le choix de l'utilisateur.. il te faudra utiliser la méthode ONCLICK
http://www.startyourdev.com/html/evenement-html-onclick



0
sbsimon62360 Messages postés 7 Date d'inscription   Statut Membre Dernière intervention  
 
Bonjour Jordan ,
J'aimerai savoir comment faire en sorte pour positionner le bouton a coté de chaque question ( je débute , et j'ai vraiment du mal ).
Si ça ne vous dérange pas serait il possible que vous me montrer la méthode a partir de mon code .
Merci pour votre réponse !
0