Valeur de cette activité : 20 points
Compétence :
Compétence :
PEPS - Le questionnaire Mathématique

A-Module 04 : JAVASCRIPT : 20 points - difficulté : 3

Le questionnaire Mathématique

Si vous avez besoin d'un éditeur d'équation mathématique en html ou mathml, veuillez utiliser : éditeur d'équations Mathml ou http://ladifference.info/math/ ou ce lien (uniquement utilisable en classe) ou utilisez firefox et l'extension FireMath

Description

IMPORTANT : avant de réaliser cette activité, vous devez avoir terminé les activités suivantes du MODULE JAVASCRIPT :
  1. * Les variables javascript : no 1647
  2. Les opérateurs : no 1645
  3. * Les fonctions : 3659
  4. * Les évènements : 1643
  5. * Les structures conditionnelles : no 1644
  6. L'objet Math: no 9145
  7. * L'objet formulaire: no 9160
  8. * Le menu dynamique : no 11995
  9. * La propriété innerHTML: no 13886

* Les apprentissages reliés à ces activités sont indispensables à la réalisation de la tâche finale.





Vous devez créer un questionnaire de mathématique de type choix de réponse qui affichera un total de 5 questions.

  1. Vous devez utiliser une seule page web.
  2. La page web devra OBLIGATOIREMENT être produite dans votre espace de téléchargement et nommée quizmath.html.
  3. Chacune des questions doit présenter un minimum de trois choix de réponses.
  4. Assurez-vous de faire varier la bonne réponse (choix A, choix B ou choix C)
  5. Les questions devront apparaître dans la page une à la fois.
  6. Si la réponse donnée à la question est bonne, alors la question suivante devra s'afficher.
  7. Si la réponse donnée à la question n'est pas bonne, alors la même question devra s'afficher avec un message indiquant que la réponse n'est pas la bonne.
  8. Un compteur de bonnes/mauvaises réponses devra apparaître dans la page.
  9. Lorsque l'utilisateur aura terminé les 10 questions alors un message devra lui apparaître lui indiquant le pointage obtenu.
  10. Chacune des questions doit s'afficher dans une couleur différente.
  11. Votre page doit contenir OBLIGATOIREMENT du code CSS.


  1. PARTIE NO 1 IMPORTANT : Cliquez le bouton 4- Accès à mon espace de téléchargement de votre portfolio
  2. IMPORTANT : Cliquez le bouton Ajouter une page avec directive en inscrivant le numéro 62668 dans le champ No de la directive

  3. Produisez la page de votre questionnaire mathématique selon les exigences formulées ci-dessus en suivant le guide suivant :
    Pistes de solutions suggérées:
    1. Créer chacune des questions dans une balise DIV identifiée par un ID distinct, contenant la propriété de style DISPLAY réglée NONE afin de masquer chacune des questions au départ.

      
<div id="question1" style="display:none;background-color:beige;">Question 1 : bla bla</div> 

<div id="question2" style="display:none;background-color:pink;">Question 2 : bla bla</div>
    2. Au début de votre page, créez toutes les fonctions javascript qui afficheront et masqueront chacune de vos questions au besoin. Exemple du code javascript : 
      
<script>

function affichequestion1(){document.getElementById('question1').style.display='block';}
function cachequestion1(){document.getElementById('question1').style.display='none';}

function affichequestion2(){document.getElementById('question2').style.display='block';}
function cachequestion2(){document.getElementById('question2').style.display='none';}

</script>

    3. Complètement au bas de la page, ajoutez le code qui affichera la Question 1.
      Exemple du code javascript : ... 
      
<script>
affichequestion1()
</script>
    4. Au dessus de ce script, ajoutez un formulaire nommé "pointage" qui contiendra :
      - un champ de type "text" nommé "message" de taille 80
      - un champ de type "text" nommé "bon" ayant comme valeur 0
      - un champ de type "text" nommé "total" ayant comme valeur 0
      - un champ de type "text" nommé "resultat" ayant comme valeur 0
      -Ajoutez à chacun de ces champs le paramètre readonly
      exemple :
      Bonne(s) réponse(s) <input type=text name=bon value=0 readonly /><br />

      Ces champs serviront plus tard pour le compteur de bonnes/mauvaises réponses.
      Notez que vous devez insérer un seul formulaire POINTAGE.

    5. Assurez-vous d'avoir bien indiqué DEVANT chacun des champs son intitulé et d'avoir bien ajouté un saut de ligne entre chacun des champs
    6. Dans la première balise DIV contenant votre question 1, (aide : Javascript Les structures conditionnelles) ajoutez :
      - le formulaire nommé "q1"
      - contenant 5 champs de type radio nommées "r1"
      - un bouton ayant la valeur correction contenant un événement onclick qui lancera la fonction javascript "correction1()"

      Répétez pour chacune des balises DIV (copiez et collez)
      ATTENTION, le nom des formulaires ainsi que le  nom des fonctions de correction doivent être différents pour chacune de vos questions (q1  q2  q3 ... r1, r2, r3 ... correction1()  correction2()   correction3() )

      exemple pour la question 1 : 
      
<form name="q1">
Choix A   : <input type=radio name="r1" value=""/><br />
Choix B :  <input type=radio name="r1" value=""/> <br />
Choix C :  <input type=radio name="r1" value=""/> <br />
Choix D :  <input type=radio name="r1" value=""/> <br />
Choix E :   <input type=radio name="r1" value=""/><br />
<input type=button value="Correction" onclick="javascript:correction1()"   />
</form>
    7. PARTIE NO 2 Ajoutez dans votre bloc javascript du haut de la page la fonction correction1()
      exemple : 
      
function correction1()
{

}
    8. Dans cette fonction de correction, il faudra :


      -Augmenter de 1 la valeur du champ total du formulaire pointage 
      
 document.pointage.total.value=eval(document.pointage.total.value)+1


      Dans le cas d'une bonne réponse :
      - affichez dans le champ MESSAGE un message "Bravo, bonne réponse!"
      - ajouter 1 au champ BON du compteur en bas de page
      - masquer la question en cours
      - afficher la question suivante

      Dans le cas d'une mauvaise réponse :

      - affichez dans le champ MESSAGE un message "Désolé, mauvaise réponse!"


      - à la fin de la fonction,
      - effectuez le calcul dans le champ RESULTAT (BON/TOTAL*100)

      pour la fonction correction1() Exemple 
       


if (document.q1.r1[2].checked)
{
...
...
...
}
else
{
...
...
...
}


    9. PARTIE NO 3 Répétez pour chacune des fonctions "correction2() correction3() ..."

    10. PARTIE NO 4 Ajoutez ensuite vos questions et vos choix de réponses
    11. Assurez-vous que pour chacune des fonctions correction1() correction2() vous avez identifié la bonne réponse
    12. Testez votre page et apportez des corrections au besoin
  4. Enregistrez votre page sous le nom quizmath.html
  5. Ajoutez une page à votre portfolio en affichant l'assistant HTML ainsi que la directive 62668
  6. Inscrivez dans le champ titre : Le questionnaire Mathématique
  7. Sélectionnez la section : MODULE JAVASCRIPT
  8. Sélectionnez la matière : informatique
  9. Inscrivez dans le champ no de la directive : 62668
  10. Inscrivez dans votre page le titre de niveau 1 : Le questionnaire Mathématique : PARTIE no ....
  11. Ajoutez un LIEN vers votre page quizmath.html
  12. Visualisez votre page et apportez des modifications au besoin.
Générateur QCM en ligne