Projet : Réaliser un QCM en JavaScript
Introduction
Dans ce projet, vous allez créer des questions de QCM à partir de pages HTML et de scripts Javascript. L'objectif est que vous créiez au moins une question de QCM chacun. Ensuite, nous les regrouperons sur un site commun auquel vous aurez accès pour vous entraîner à l'épreuve de Baccalauréat.
Des aides sont données après certaines questions, lisez bien les questions jusqu'au bout avant de commencer à y répondre !
Pour se lancer, vous devez télécharger le .zip ci-dessous et le décompresser (“l'extraire”) dans un dossier adéquat :
Vous devez alors disposer de 3 fichiers : qcm.html, script.js, style.css.
Question QCM
Définissez une question de QCM pouvant être posée à l'examen du baccalauréat sur le programme de NSI de première (voir tableau ci-dessous ). La question doit avoir 4 réponses possibles dont une est bonne. Le but de ce qui suit est de modifier les fichiers fournis afin que ce soit votre question qui s'affiche à l'ouverture du fichier HTML dans un navigateur, qu'un utilisateur puisse essayer d'y répondre et qu'une réponse lui soit donnée.
N.B. : le jour du bac, une seule réponse sera possible.
|
Thèmes du programmes |
|---|
|
HTML |
|
CSS |
|
Listes en python |
|
CSV |
|
Chaînes de caractères en python |
|
Tests imbriqués Si...Alors... en python |
|
Conversion décimal / binaire |
|
Conversion décimal / hexadécimal |
|
Complément à 2 |
|
Addition de nombres binaires |
|
Systèmes d'exploitation |
|
Dichotomie |
|
Algo glouton |
|
Portes logiques |
|
Les tris |
|
JavaScript |
Partie HTML
Dans un premier temps, ouvrez le fichier HTML dans un navigateur et dans un éditeur de texte, et répondez aux questions suivantes sous forme de commentaires dans le code. Pour commenter en HTML on utilise la balise suivante :
<!-- Texte commenté -->
Pour chaque élément de la liste ci-dessous, écrivez dans quelle balise il est contenu et indiquez son attribut en commentaires de la ligne où il est créé :
-
1 : le titre de la question de QCM
-
2 : le texte de la première réponse possible
-
3 : le bouton de validation de la réponse de l'utilisateur
-
4 : l'énoncé de la question de QCM
-
5 : la case à cocher de la dernière réponse possible
Repérez la/les fonction/s JavaScript qui apparaissent dans ce code, en commentant leur nom à la fin de la/des ligne(s) où elle(s) est/sont appelée(s).
Où sont contenus les éléments de style de cette page HTML ? écrivez la réponse en commentaire à la fin de LA ligne concernée.
Repérez chaque élément permettant à l'utilisateur d’interagir avec la page par le commentaire "*" à la fin de la ligne où il est créé.
Partie JavaScript
Incluez le fichier JavaScript au fichier HTML, en insérant cette ligne au bon endroit;-)
<script src="script.js"></script>
à partir de maintenant, vous ne modifierez plus le fichier HTML.
Dans le fichier script.js, repérez la ligne qui permet d'afficher le titre au chargement de la page par un commentaire "affiche énoncé" et repérez les lignes qui permettent d'afficher les réponses possibles au chargement de la page par des commentaires "affiche réponses".
Conseil : Aide
Un commentaire en JavaScript s'écrit :
/* Texte commenté */
Modifiez des constantes dans le script pour que, au chargement de la page HTML, l'énoncé de la question et les réponses affichés soient ceux que vous avez choisis dans la partie : Question QCM.
Trouvez la fonction qui est réalisée à l'appui sur le bouton et complétez-la afin que le titre de la question devienne "Mais qui est Keyser Söze ?" lorsqu'on appuie sur le bouton.
Changez également la couleur du titre à l'appui sur le bouton (couleur au choix).
A présent, vous devez modifier le titre à l'appui sur le bouton uniquement si la première case est cochée.
Conseil : Aide
Retrouvez l'élément "boîte à cocher" dans l'HTML et son identifiant. En JavaScript, lorsque qu'une case à cocher d'identifiant "ma_case" est effectivement cochée, on a :
document.getElementById(id="ma_case").checked == true
Si elle n'est pas cochée, on a :
document.getElementById(id="ma_case").checked == falseVous pouvez vous aider de cette page : https://www.w3schools.com/js/js_comparisons.asp pour formuler
vos conditions ( if{.....} )
Sachez que les booléens true et false sont toujours équivalents et remplaçables par les valeurs 1 et 0 respectivement.
Créez une constante nommée "a_comparer" dans le script. Cette constante peut valoir 0 ou 1. Choisissez, au choix, une des deux valeurs.
Maintenant, le titre doit être modifié si et seulement si la première case est dans le même état que la constante. Vous pouvez utiliser le ET logique, regardez dans les ressources.
Partie JavaScript avancé
On souhaite à présent qu'à l'appui sur le bouton, le titre et la couleur des réponses soit modifiés en fonction de l'état de toutes les cases à cocher. Les questions suivantes vont vous guider pour parvenir à ce résultat.
Modifiez la liste "bonne_reponse" pour qu'elle contienne la réponse réelle à votre question.
Conseil : Aide
Un 0 ou un 1 correspond à une des réponses possibles :
-
0 : "ne doit pas être cochée",
-
1 : "doit être cochée",
A présent, à l'appui sur le bouton, le titre doit être modifié en fonction de toutes les cases cochées :
-
Si les cases cochées correspondent au contenu de "bonne_reponse", le titre doit être modifié par "Bonne réponse :)", en vert.
-
Sinon, il doit être modifié par "Mauvaise réponse :(" en rouge.
Complément : Aide
Vous pouvez vous aider de cette page : https://www.w3schools.com/js/js_comparisons.asp pour formuler
vos conditions (Si...Alors...), notamment pour mettre plusieurs conditions dans un Si... .
Vous pouvez également utiliser une boucle du type: for (i=0; i<4; i++) {.... }
Modifiez le code pour que, une fois la réponse donnée, le bouton permette de rejouer la question :
-
Au premier appui sur le bouton le texte du bouton doit changer et indiquer "Rejouer".
-
Au second appui sur le bouton, la page doit revenir à l'état initial.
Conseil : Aide
-
Le texte d'un bouton d'identifiant "mon_bouton" est contenu dans :
document.getElementById("mon_bouton").innerHTML
-
Créez une variable qui pourra valoir 0 ou 1 pour indiquer l'état de la page :
-
0 : "en attente de réponse" ;
-
1 : "réponse donnée, en attente de rejouer".
-
Cette variable devra être modifiée à chaque appui sur le bouton pour passer à l'état suivant.
Pour aller plus vite, plus haut, plus fort ...
Maintenant que vous avez saisi le fonctionnement du langage JS, je vous propose de réaliser un beau QCM provenant du tuto BLOG ARC OPTIMIZER