WEBVTT

00:00:01.834 --> 00:00:02.780
Dans cet exemple,

00:00:02.780 --> 00:00:05.753
tu utiliseras la structure if else 

00:00:05.753 --> 00:00:08.709
pour écrire le code d'une question à choix multiples. 

00:00:10.008 --> 00:00:13.315
Le programme pose à l'utilisatrice ou l'utilisateur une question

00:00:13.375 --> 00:00:16.813
et elle ou il répond à la question parmi un choix de réponses.

00:00:17.834 --> 00:00:19.524
Dans mon exemple, je pose la question

00:00:19.524 --> 00:00:22.341
« Toronto est-elle la capitale de l’Ontario? ». 

00:00:23.557 --> 00:00:26.800
Je regarde rapidement avec toi la structure de ma page HTML.

00:00:26.800 --> 00:00:30.643
Remarque qu'il s'agit de la même structure que l’exemple précédent

00:00:30.643 --> 00:00:32.336
avec l'âge pour conduire.

00:00:33.028 --> 00:00:34.723
Le nom des éléments a changé

00:00:34.783 --> 00:00:36.905
pour mieux représenter le contexte de la page.

00:00:38.405 --> 00:00:41.787
Porte ton attention sur les balises input du code HTML.

00:00:43.333 --> 00:00:47.020
Le type radio permet de sélectionner une option parmi un choix.

00:00:48.600 --> 00:00:51.537
Les choix d’une même question doivent avoir le même nom.

00:00:52.373 --> 00:00:56.366
Par exemple, si on veut avoir une seconde question sur la même page,

00:00:56.366 --> 00:00:59.876
il faut un nom pour les options de la première question

00:00:59.876 --> 00:01:03.845
et un autre nom distinct pour la deuxième question.

00:01:05.033 --> 00:01:06.715
Je peux sélectionner une option par défaut

00:01:06.775 --> 00:01:09.781
en ajoutant checked à l’intérieur de la balise,

00:01:09.781 --> 00:01:12.834
mais ceci dans seulement l’une des deux options.

00:01:13.601 --> 00:01:16.909
J’ai également spécifié un id pour chacune des options.

00:01:18.983 --> 00:01:22.389
Le CSS est exactement le même que dans l’exemple précédent.

00:01:22.719 --> 00:01:25.914
J'ai du code pour l'apparence du texte en général

00:01:25.914 --> 00:01:27.910
et pour la classe page. 

00:01:31.636 --> 00:01:33.636
Je regarde ce que le programme doit accomplir.

00:01:34.592 --> 00:01:36.591
Si la personne choisit l'option oui,

00:01:36.591 --> 00:01:40.133
alors je dois afficher le message bonne réponse,

00:01:40.133 --> 00:01:43.964
sinon je dois afficher le message mauvaise réponse.

00:01:44.428 --> 00:01:46.428
Il s'agit clairement d'une situation

00:01:46.488 --> 00:01:48.637
où tu dois afficher 2 messages distincts 

00:01:48.697 --> 00:01:50.332
à partir de la même condition.

00:01:51.332 --> 00:01:52.578
J’ouvre la page dans Brackets.

00:01:53.828 --> 00:01:56.327
Le programme doit agir lorsque l’on appuie sur le bouton.

00:01:57.273 --> 00:02:02.774
Donc, à l’intérieur de la balise de mon bouton, je vais insérer :

00:02:02.774 --> 00:02:10.208
onclick="corrige()".

00:02:11.141 --> 00:02:13.833
Je procède au bas de ma page 

00:02:13.833 --> 00:02:17.438
et j’insère un ‹script› d'ouverture et de fermeture,

00:02:17.882 --> 00:02:21.230
dans lequel j’écris la définition de ma fonction.

00:02:22.981 --> 00:02:26.980
function corrige( ) { };

00:02:29.823 --> 00:02:32.323
Dans mon accolade, je commence par le commentaire

00:02:32.323 --> 00:02:41.951
 // Cherche les objets de la question et du message

00:02:46.200 --> 00:02:47.951
J’ajoute ensuite une variable :

00:02:47.951 --> 00:03:03.900
var reponseOui= document.getElementById("reponseOui");

00:03:05.389 --> 00:03:09.389
Remarque qu'il n'y a pas .value à la fin de cette ligne de code.

00:03:10.390 --> 00:03:11.760
Je ne veux pas chercher sa valeur,

00:03:11.820 --> 00:03:15.431
je la connais; la valeur de cette option est toujours oui.

00:03:16.429 --> 00:03:18.979
Je veux plutôt savoir si l'option est sélectionnée ou non.

00:03:20.229 --> 00:03:23.928
Le code reponseOui.checked==true

00:03:23.988 --> 00:03:27.165
si l'option est sélectionnée et dans le cas contraire,

00:03:27.415 --> 00:03:29.498
la valeur sera false.

00:03:32.945 --> 00:03:36.695
J’ajoute ensuite une autre variable, que j’appelle message,

00:03:36.695 --> 00:03:40.331
qui va contenir l’élément dans lequel le message doit s’afficher.

00:03:40.331 --> 00:03:49.529
var message= document.getElementById("message");

00:03:56.414 --> 00:03:59.618
La prochaine étape est d’indiquer 

00:03:59.648 --> 00:04:04.906
// Affiche le message selon la réponse

00:04:10.612 --> 00:04:14.112
Et je vais maintenant entrer la structure de ma condition avec :

00:04:14.112 --> 00:04:20.515
if ( ) { } else { };

00:04:23.210 --> 00:04:25.845
J’écris maintenant la condition qui est :

00:04:25.845 --> 00:04:35.035
reponseOui.checked==true

00:04:36.000 --> 00:04:39.164
Comme la propriété checked est déjà égale à vrai ou faux,

00:04:39.164 --> 00:04:42.406
et qu’une condition est soit true ou false,

00:04:42.406 --> 00:04:46.334
je peux simplement écrire reponseOui.checked.

00:04:49.200 --> 00:04:52.217
Si la condition reponseOui.checked est vraie,

00:04:52.217 --> 00:04:55.904
alors JavaScript exécutera le premier bloc de code.

00:04:56.975 --> 00:04:57.917
Dans le cas contraire,

00:04:57.977 --> 00:05:01.172
si reponseOui.checked est égale à false,

00:05:01.172 --> 00:05:04.613
alors JavaScript va exécuter la section else.

00:05:06.767 --> 00:05:09.693
J’insère le premier message dans le cas où la condition est vraie,

00:05:10.444 --> 00:05:25.063
donc : message.innerHTML = "Bravo tu as la bonne réponse."; 

00:05:26.406 --> 00:05:30.575
J’ajoute également le message pour la deuxième possibilité :

00:05:30.575 --> 00:05:41.582
message.innerHTML = "Malheureusement c'est une mauvaise réponse."; 

00:05:53.150 --> 00:05:54.985
Je vais copier le code pour terminer ma fonction.

00:05:56.500 --> 00:06:00.188
Ce code affiche la page dans laquelle doit être affiché mon message.

00:06:01.786 --> 00:06:05.039
Il dit au bloc dans lequel se trouve la question de Toronto

00:06:05.099 --> 00:06:07.962
de disparaitre, et ensuite,

00:06:07.962 --> 00:06:11.844
le bloc dans lequel apparaît le message, de devenir visible.

00:06:14.162 --> 00:06:17.537
Je peux vérifier mon programme à l’intérieur d’un navigateur Internet

00:06:17.597 --> 00:06:19.540
et je m’assure qu’il ne contient pas d’erreur.

00:06:22.392 --> 00:06:24.358
Si tu te rappelles, dans mon exemple initial,

00:06:24.418 --> 00:06:26.855
j'avais une image qui accompagnait mon message.

00:06:28.230 --> 00:06:29.480
En fait, mon image,

00:06:29.540 --> 00:06:32.753
je peux l’insérer directement à l’intérieur de inner.HTML.

00:06:32.813 --> 00:06:36.280
Je dois juste m’assurer que mon image se trouve dans le même dossier

00:06:36.340 --> 00:06:37.553
que ma page Web.

00:06:41.500 --> 00:06:46.119
Donc, à la fin du message, j'ajoute ‹br› pour un saut de ligne

00:06:46.119 --> 00:06:59.815
et ‹img src="bravo.jpg" width="100" height="100"›.

00:07:03.284 --> 00:07:06.465
Si tu remarques, les guillemets doubles causent un problème.

00:07:07.500 --> 00:07:10.911
C’est que le code de mon image utilise des guillemets doubles

00:07:10.911 --> 00:07:14.435
et mon message complet contenu dans inner.HTML 

00:07:14.495 --> 00:07:16.602
utilise également ces guillemets doubles.

00:07:16.602 --> 00:07:19.100
L’un entre donc en conflit avec l’autre.

00:07:19.426 --> 00:07:20.927
Une façon de régler le conflit

00:07:20.927 --> 00:07:24.831
est d’ajouter des barres obliques en avant des guillemets doubles

00:07:24.891 --> 00:07:28.086
de mon étiquette ou de ma balise img.

00:07:31.284 --> 00:07:33.362
Pour l’image à l’intérieur de mon deuxième message,

00:07:33.362 --> 00:07:35.604
je vais utiliser une deuxième méthode.

00:07:35.604 --> 00:07:42.808
Je vais faire mon retour de ligne et ensuite mon image img src,

00:07:42.808 --> 00:07:45.286
mais cette fois-ci, au lieu d’utiliser des guillemets doubles, 

00:07:45.286 --> 00:07:48.508
en HTML, on peut utiliser des guillemets simples.

00:07:49.014 --> 00:07:51.252
Donc, je vais placer le nom de l’image,

00:07:51.252 --> 00:07:58.972
dans ce cas-ci, mauvaise.jpg à l’intérieur de ces guillemets.

00:08:00.682 --> 00:08:05.302
Je vais terminer en ajoutant une largeur et une hauteur à mon image

00:08:05.302 --> 00:08:11.983
en ajoutant width à 100 pour la largeur

00:08:12.043 --> 00:08:18.844
et height à 100 pixels pour la hauteur.

00:08:18.844 --> 00:08:21.938
Je fais la même chose avec la première image.

00:08:24.347 --> 00:08:27.528
Cette fois-ci, je vais utiliser l’option avec les guillemets doubles 

00:08:27.588 --> 00:08:28.458
avec la barre oblique.

00:08:30.145 --> 00:08:36.146
J’ajuste la largeur et la hauteur.

00:08:38.815 --> 00:08:42.786
J'enregistre et je regarde le résultat final dans le navigateur.

00:08:44.750 --> 00:08:45.685
Dans cet exemple,

00:08:45.745 --> 00:08:48.427
j'ai une question qui comporte seulement deux choix de réponse.

00:08:48.427 --> 00:08:49.858
Comme prochaine étape,

00:08:49.918 --> 00:08:52.648
modifie la question pour obtenir un choix multiple 

00:08:52.708 --> 00:08:54.392
contenant plusieurs choix de réponses

00:08:54.392 --> 00:08:56.871
et fais les modifications nécessaires dans le code.