DM n°1: Réalisation d’un quiz de chimie

On trouvera le dossier molécules à cette adresse : Molécules

1ère étape : Affichage d’une image sur une page html

***********************************************
<html>
<head>
<meta charset="utf-8" />
<title> Quiz chimie</title>
</head>
<body>

<img id="image" src="molecules/molecule1.png">

</body>
</html>

***********************************************

2ième étape : Affichage d’une image aléatoire sur une page html

***********************************************
<html>
<head>
<meta charset="utf-8" />
<title> Quiz chimie</title>
</head>
<body>

<img id="image">
<script type="text/javascript">
var i=Math.floor(Math.random()*10)+1;
console.log(i);
molecule=document.getElementById('image');

molecule.src="molecules/molecule"+i+".png";

</script>
</body>
</html>

***********************************************

3ième étape : lier une image de molécule à son nom

***********************************************
<html>
<head>
<meta charset="utf-8" />
<title> Quiz chimie</title>
</head>
<body>

<img id="image">
Nom de la molécule : <span id="nom"></span> <script type="text/javascript"> var liste_molecules=["éthanoate de butyle","butan-1-ol","acide propanoïque","butanamide","N-éthyl-3-méthylpentanamide","pentan-2-ol","3-méthyl-pentan-2-one","3-méthylpent-2-ène","pentan-3-amine","2-méthylpentan-3-ol"]; var i=Math.floor(Math.random()*10)+1; console.log(i); molecule=document.getElementById('image'); molecule.src="molecules/molecule"+i+".png"; var nom=liste_molecules[i-1]; document.getElementById("nom").innerHTML = nom; </script> </body> </html>

***********************************************

4ième étape : comparer le nom de la molécule au nom rentré dans un input

<html>
<head>
<meta charset="utf-8" />
<title> Quiz chimie</title>
</head>
<body>

<img id="image">
Votre proposition : <input id="proposition" value=""/>
Nom de la molécule : <span id="nom"></span>
Commentaire : <span id="commentaire"></span> <script type="text/javascript"> var nom=""; var liste_molecules=["éthanoate de butyle","butan-1-ol","acide propanoïque","butanamide","N-éthyl-3-méthylpentanamide","pentan-2-ol","3-méthyl-pentan-2-one","3-méthylpent-2-ène","pentan-3-amine","2-méthylpentan-3-ol"]; var i=Math.floor(Math.random()*10)+1; console.log(i); molecule=document.getElementById('image'); molecule.src="molecules/molecule"+i+".png"; nom=liste_molecules[i-1]; document.getElementById("nom").innerHTML = nom; var comparaison = function() { if (element.value==nom) { document.getElementById("commentaire").innerHTML = "Félicitations"; } else { document.getElementById("commentaire").innerHTML = "Erreur"; } } var setupEvents = function() { element=document.getElementById("proposition"); element.addEventListener("change",comparaison);//on ajoute un "écouteur" sur l'input qui est déclenché lors d'un changement et appelle la fonction comparaison. } window.addEventListener("load", setupEvents);//Lorsque la page est chargée, on met en place les événements, cette ligne doit être placée à la fin. </script> </body> </html>

***********************************************

Travail à poursuivre:

1) (5 pts) on veut maintenant que la liste des 10 questions soit tirée au sort dès le début du jeu pour éviter les répétitions ; on pourra utiliser l'Algorithme de mélange de tableau

2) (3 pts) on veut que l'utilisateur puisse jouer en continu, on affiche le numéro de la question sous la forme 1/10

3) (1 pt) la barre d'input redevient vierge à chaque nouvelle question

4) (2 pts) on veut qu'un score soit attribué au joueur au fur et à mesure sous la forme 1/10

5) (3 pts) on veut que l'utilisateur puisse voir ses erreurs à la fin d'une session avec l'apparition d'un bouton "voir mes erreurs" et la disparition de l'input.

6) (2 pts) toute idée d'amélioration dans le fonctionnement sera appréciée

7) (4 pts) on améliorera enfin la présentation en jouant sur le css de la page pour atteindre le résultat ci-dessous :

Indications:

- Utiliser la console en écrivant des console.log(variable) pour suivre la valeur d'une variable et vérifier que tout fonctionne correctement.

- Il est important au départ de déclarer les variables globales ; par exemple, écrire var nom="" au début fait de nom une variable globale qui pourra être utilisée dans toutes les fonctions que vous allez créer.

- Pour ajouter une valeur à une liste, utilisez la fonction liste.push(valeur)

- Pour cacher un bouton : document.getElementById("button").style.visibility="hidden" et le montrer : document.getElementById("button").style.visibility="visible".