Comment créer un test à choix de réponse?Ce tutoriel est en 4 étapes :
> Nous créons la base de la page html.
> Nous créons le formulaire du test.
> Nous créons et ajuste le javascript qui va servir à donner le résultat du test.
> Nous mettons un iframe contenant la page HTML aux endroits où nous voulons utiliser le test.
Mettre un crédit vers Never-Utopia est obligatoire.
1. Base de la page HTMLPremièrement, nous doit créer une page HTML. Pour cela, on va dans :
> Panneau d'administration
> > Modules
> > > HTML & Javascript
> > > > Gestion des pages HTML
Ensuite, nous devons choisir l'option de création "Création en mode avancé (HTML)". Nous devons choisir un titre quelconque, puis s'assurer que les options suivantes sont cochées :
Voulez-vous utiliser le haut et le bas de page de votre forum ?
NONUtiliser cette page en tant que page d'accueil ?
NONDans le contenu, nous devons mettre ceci :
- Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Test</title>
<style type="text/css">
body {
margin: 0px;
}
.bloc_formulaire {
height: auto;
width: 600px;
margin: auto;
padding: 10px;
text-align: left;
position: relative;
font-family: arial;
font-size: 13px;
}
#resultats {
display: none;
}
</style>
</head>
<body>
Contenu visible de la page HTML
</body>
</html>
Et qu'est-ce qui est quoi?
| «!DOCTYPE html» et «html» | Début de la page HTML. |
| «head» | Début de la partie cachée de la page HTML. |
| «title»Titre du test«/title» | Titre de la page HTML. C'est ce qui apparaîtra comme titre de l'onglet. |
| «meta charset="UTF-8" /» | Permet les caractères spéciaux comme les "é". |
| «style type="text/css"»CSS«/style» | CSS de la page. |
| «/head» | Fin de la partie cachée de la page HTML. |
| «body» | Début du contenu visible de la page HTML. |
| «/body» | Début du contenu visible de la page HTML. |
| «/html» | Fin de la page HTML. |
À partir de cette étape, je vous recommenderais de sauvegarder régulièrement pour ne pas perdre quelque chose par erreur. FA a la désagréable habitude de considérer que "écrire un code" est la même chose que "ne rien faire" et vous ramène à la page principale si vous sauvegardez après un trop long moment.
Un truc, c'est de copier tout votre code, enregistrer, puis si ça vous ramène à la page d'accueil, retourner coller le code que vous avez copier avant avant de resauvegarder.
2. Formulaire du test.Entre les balises
«body» «/body», donc à la place du contenu visible de la page HTML, nous allons créer notre formulaire. On commence par remplacer le contenu visible par :
- Code:
<div class="bloc_formulaire">
Contenu du formulaire
</div>
Ça, c'est le bloc qui contient et met en forme le test.
Puis, avant même de penser à créer le contenu du formulaire, nous devons nous faire un plan de nos questions et de nos choix de réponses avec le groupe auquel chaque choix de réponse est associée. Si certaines questions ont un nombre différent de choix de réponse que d'autres, il y aura un ordre dans lequel il faut les placer.
Par exemple, si nous avons 4 questions qui ont 6 choix de réponse, 3 questions qui ont 5 choix de réponse et 5 questions à 4 choix de réponse, on va les mettre dans cet ordre :
> Les questions à 6 choix de réponse en premier.
> > Les questions à 5 choix de réponse ensuite.
> > > Les questions à 4 choix de réponse à la fin.
Bref, on fonctionne toujours des questions au plus grand nombre de choix de réponses au plus petit.
Dans notre cas, on va partir du principe qu'on a 5 question, dont 4 qui ont 3 choix de réponse et une qui a 2 choix de réponse.
Ensuite, on va mettre nos questions. Personnellement, j'aime bien mettre mes questions en gras. Alors on met ceci à la place du contenu du formulaire :
- Code:
<b>1. Première question</b><br />
<b>2. Deuxième question</b><br />
<b>3. Troisième question</b><br />
<b>4. Quatrième question</b><br />
<b>5. Cinquième question</b><br />
Et on continue ainsi en mettant toutes nos questions. À savoir que le «br /» à la fin de chaque question est un retour à la ligne.
Maintenant que nos questions sont mises, nous allons mettre nos choix de réponse. Comme ma 1ère question a 3 choix de réponses. Alors notre première question va devenir ainsi :
- Code:
<b>1. Quelle est votre boisson favorite ?</b><br />
<input id="choix1_question1" type="radio" name="question_1" />Premier choix de réponse<br />
<input id="choix2_question1" type="radio" name="question_1" />Deuxième choix de réponse<br />
<input id="choix3_question1" type="radio" name="question_1" />Troisième choix de réponse<br /><br />
Nous avons une balise «input» qui est une case à cocher, l'énoncé du choix de réponse, puis le «br /» qui permet le retour à la ligne à la fin de chaque choix de réponse. J'ai mis deux «br /» à la fin de mon dernier choix de réponse pour qu'il y ait un espace entre mes questions.
Dans la balise «input» de chaque choix de réponse, il y a trois éléments à faire attention.
Le
« id="choix1_question1" » du premier choix de réponse indique c'est le 1er choix de réponse de la 1ère question. Si c'était le 3ème choix de réponse de la 4ème question, cela aurait été
« id="choix3_question4" ». C'est très important parce que c'est ce qui nous permet de différencier chaque choix de réponse.
Le
« type="radio" » indique que c'est une case à cocher.
Le
« name="question1" » indique que cela appartient à la 1ère question. Cela permet aussi qu'il y ait un seul choix de réponse qui puisse être sélectionné parmi les 3 choix de réponses. Si ces choix de réponse auraient été les choix de la 2ème question, il aurait fallu mettre
« name="question2" ».
On continue comme ça pour mettre les choix de réponse à toutes nos questions.
À la suite de nos questions et de nos choix de réponse, on va mettre le bouton qui permet d'envoyer nos données :
- Code:
<button type="button" onclick="test()">Cliquez pour voir votre résultat!</button>
Le
« Cliquez pour voir votre résultat! » est la phrase qui apparaît dans le bouton. Vous pouvez le changer si vous voulez. Le
« onclick="test()" » veut dire que lorsqu'on clique sur le bouton, la fonction
"test()" (qu'on va créer dans notre javascript plus tard) va s'activer.
À la suite de note bouton, nous allons mettre la section pour nos résultats :
- Code:
<div id="resultats">
<br />
<b>Félicitation !</b>
<br />
<br />
Vous êtes <span id="resultat_fin1"></span> humain !<br />
Vous êtes <span id="resultat_fin2"></span> robot !<br />
Vous êtes <span id="resultat_fin3"></span> extraterrestre !<br />
</div>
La section des résultats est entourée par un div avec l'id "resultats". Dans le CSS, cet id avait un display "none", ce qui fait que cette section est habituellement invisible.
À l'intérieur de cette div, j'ai quelques retours à la ligne pour faire joli et un "félicitation" en gras. Cela ne sert à rien, c'est juste pour l'esthétique.
Tout à l'heure, quand nous bâtissions nos questions, nous avions dit que nous devions choisir notre nombre de question, notre nombre de choix de réponse et avec le groupe auquel chaque choix de réponse est associée. Les groupes, j'appelle ça des "fins". S'il y a trois groupes possibles, ce sera trois "fins" possibles.
Dans notre cas, il y a la fin des humains (fin1), la fin des robots (fin2) et la fin des extraterrestres (fin3).
Donc pour chaque fin, on met une petite phrase qui dit auquel groupe on appartient. Là où devrait être le résultat (5%, 12%, 15%, etc...), on met une balise «span» vide.
L'id de chaque span dépend de la fin. Pour la fin des humains (fin1), c'est
"resultat_fin1". Pour la fin des robots (fin2), c'est
"resultat_fin2". Pour la fin des extraterrestres (fin3), c'est
"resultat_fin3". Je crois que vous comprenez le principe!
Au final, cela devrait ressembler à ceci :
- Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Test</title>
<style type="text/css">
body {
margin: 0px;
}
.bloc_formulaire {
background: #000000;
height: auto;
width: 600px;
margin: auto;
padding: 10px;
color: #a3a3a3;
text-align: left;
position: relative;
font-family: arial;
font-size: 13px;
}
#resultats {
display: none;
}
</style>
</head>
<body>
<div class="bloc_formulaire">
<b>1. Première question</b><br />
<input id="choix1_question1" type="radio" name="question_1" />Premier choix de réponse (pour extraterrestre - fin3)<br />
<input id="choix2_question1" type="radio" name="question_1" />Deuxième choix de réponse (pour humain - fin1)<br />
<input id="choix3_question1" type="radio" name="question_1" />Troisième choix de réponse (pour robot - fin2)<br /><br />
<b>2. Deuxième question</b><br />
<input id="choix1_question2" type="radio" name="question_2" />Premier choix de réponse (pour humain - fin1)<br />
<input id="choix2_question2" type="radio" name="question_2" />Deuxième choix de réponse (pour extraterrestre - fin3)<br />
<input id="choix3_question2" type="radio" name="question_2" />Troisième choix de réponse (pour robot - fin2)<br /><br />
<b>3. Troisième question</b><br />
<input id="choix1_question3" type="radio" name="question_3" />Premier choix de réponse (pour robot - fin2)<br />
<input id="choix2_question3" type="radio" name="question_3" />Deuxième choix de réponse (pour humain - fin1)<br />
<input id="choix3_question3" type="radio" name="question_3" />Troisième choix de réponse (pour extraterrestre - fin3)<br /><br />
<b>4. Quatrième question</b><br />
<input id="choix1_question4" type="radio" name="question_4" />Premier choix de réponse (pour extraterrestre - fin3)<br />
<input id="choix2_question4" type="radio" name="question_4" />Deuxième choix de réponse (pour robot - fin2)<br />
<input id="choix3_question4" type="radio" name="question_4" />Troisième choix de réponse (pour humain - fin1)<br /><br />
<b>5. Cinquième question</b><br />
<input id="choix1_question5" type="radio" name="question_5" />Premier choix de réponse (pour robot et pour extraterrestre - fin2 et fin3)<br />
<input id="choix2_question5" type="radio" name="question_5" />Deuxième choix de réponse (pour humains - fin1)<br /><br />
<button id="bouton_resultat" type="button" onclick="test1()">Cliquez pour voir votre résultat!</button>
<div id="resultats">
<br />
<b>Félicitation !</b>
<br />
<br />
Vous êtes <span id="resultat_fin1"></span> humain !<br />
Vous êtes <span id="resultat_fin2"></span> robot !<br />
Vous êtes <span id="resultat_fin3"></span> extraterrestre !<br />
</div>
</div>
</body>
</html>
3. JavascriptMaintenant qu'on a le formulaire qui sert à entrer les données, c'est le temps de transformer ces données en résultats.
On commence donc par mettre ceci dans le «body» de la page HTML, juste à la suite de notre formulaire :
- Code:
<script type="text/javascript">
Contenu du script
</script>
Il s'agit d'une balise «script» qui indique que son contenu est un javascript.
D'ailleurs, à la place du contenu, nous allons commencer par mettre ceci :
- Code:
function test1(){
Contenu de la fonction test1()
}
Vous vous souvenez du bouton pour soumettre le formulaire? Celui qui avait un onclick="test1()" et que je disais qu'il allait utiliser la fonction "test1()" lorsqu'on cliquait dessus? Eh bien c'est exactement ce qu'on vient de créer.
Sauf que là, notre fonction ne fait rien. Alors on va lui ajouter du contenu :
- Code:
var choix1 = [];
var choix2 = [];
var choix3 = [];
var total = [];
Ça, c'est des tableaux. Plus précisément, c'est des tableaux qui vont contenir nos données. Par exemple, le
« var choix1 = []; » veut dire que c'est un tableau qui contient nos données relatives à tous les premiers choix de réponse de nos questions.
Du coup, si nous avions une question qui a 4 choix de réponse, il faudrait ajouter var choix4 = []; pour créer un tableau pour les quatrièmes choix de réponse. Comme nous avons au maximum 3 choix de réponse par question, nous mettons seulement
« var choix1 = []; » « var choix2 = []; » et
« var choix3 = []; ».
Enfin, le var total = []; est un tableau qui va contenir nos totaux. Cela ne vous dit rien pour le moment, mais nous allons nous en servir tout à l'heure dans nos calculs.
Pour le moment, ces tableaux sont vides. Nous devons y mettre nos données avant de pouvoir les utiliser. Du coup, nous allons utiliser ce qu'on appelle des boucles qu'on va rajouter juste à la suite de nos tableaux vides :
- Code:
for (var i = 1; i <= 5; i++) {
choix1[i] = Number(document.getElementById("choix1_question" + i).checked);
}
for (var i = 1; i <= 5; i++) {
choix2[i] = Number(document.getElementById("choix2_question" + i).checked);
}
for (var i = 1; i <= 4; i++) {
choix3[i] = Number(document.getElementById("choix3_question" + i).checked);
}
Vous le constaterez peut-être, mais il y a une boucle pour chaque choix de réponse. Ces boucles servent à aller chercher ce qu'on a entré dans le formulaire et à le mettre dans les tableaux. Les cases cochées valent 1 point et les cases non-cochées valent 0 point.
Je vais prendre la première boucle comme exemple pour vous montrer les éléments qu'on doit modifier :
- Code:
for (var i = 1; i <= 5; i++) {
choix1[i] = Number(document.getElementById("choix1_question" + i).checked);
}
Le
«i <= 5 » sert à dire combien de fois la boucle va se répéter. Comme nous avons 5 questions qui ont au moins 1 choix de réponse, nous mettons
«i <= 5 ». Si nous avions 6 questions qui ont au moins 1 choix de réponse, on aurait mis
«i <= 6 ».
D'ailleurs, c'est pour ça que pour le troisième choix de réponse, il y a
«i <= 4 ». En effet, il y a juste 4 questions qui ont au moins 3 choix de réponses.
Sinon, j'imagine que vous devinez pour le deuxième choix de réponse, les
choix1 deviennent
choix2, etc...
C'est tout pour ces boucles qui ont pris nos données et les ont trié dans nos tableaux!
Maintenant, on va aller calculer le total des points récoltés par chaque fin. Donc on ajoute ceci à la suite de nos boucles :
- Code:
total[1] = choix2[1] + choix1[2] + choix2[3] + choix3[4] + choix2[5];
total[2] = choix3[1] + choix3[2] + choix1[3] + choix2[4] + choix1[5];
total[3] = choix1[1] + choix2[2] + choix3[3] + choix1[4] + choix1[5];
var total_total = total[1] + total[2] + total[3];
Nous allons le décortiquer. Pour ça, je vais juste prendre une petite partie de la première ligne :
- Code:
total[1] = choix2[1] + choix1[2] + choix2[3] + choix3[4] + choix2[5];
Cela veut dire que :
Le total de la première fin (celle des humains)
=
choix 2 de la question 1 (choix2[1])
+
choix 1 de la question 2 (choix1[2])
+
choix 2 de la question 3 (choix2[3])
+
choix 3 de la question 4 (choix3[4])
+
choix 2 de la question 5 (choix2[5])
Je crois que tu comprends le principe, non?
Le
« total[1] » correspond au total des points de la fin1 (celle des humains).
Les choixA[B] correspondent aux choix du tableau, le A étant le numéro du choix et le B étant le numéro de la question.
D'ailleurs, il faut toujours s'assurer de mettre
; à la fin de notre addition pour indiquer qu'elle est terminée.
Quant au
« var total_total = total[1] + total[2] + total[3]; », c'est le total de tous les points. Cela nous sert à calculer nos %. Si nous avions 4 fins possibles, on aurait ajouté un
« + total[4] » à la fin.
Maintenant qu'on a terminé avec l'addition de nos points, on va passer à la suite. On doit ajouter ceci à la suite de nos totaux :
- Code:
if ((total_total - choix1[5]) != 5) {
alert("Vous devez répondre à toutes les questions !");
}
C'est une condition qui dit que s'il y a des questions qui ne sont pas répondu, il y a un message qui dit "Vous devez répondre à toutes les questions !" qui apparait.
Il s'agit de ce qu'on appelle une
condition, Si la condition est remplie, le message apparait. La condition, c'est ce qui est entre penrenthèses après le
« if » :
- Code:
((total_total - choix1[5]) != 5)
Dans notre cas, cela veut dire que si le total de tous les points du formulaire n'est pas égal à 5, le message apparaît.
Pourquoi 5? Parce que c'est notre nombre de questions. Si nous avions 7 questions, ont aurait mis 7.
Quant au
« (total_total - choix1[5]) », il s'agit du de tous les points, moins le 1er choix de la question 5 puisque ce choix donne 1 point à la fin 2 et 1 point à la fin 3. Il faut toujours soustraire les choix de réponse qui reviennent plus qu'une fois.
C'était tout pour cette alerte.
Maintenant, on passe enfin à la partie "résultat" qui s'ajoute à la suite :
- Code:
else {
document.getElementById("resultats").style.display = "block";
for (var i = 1; i <= 3; i++) {
document.getElementById("resultat_fin" + i).innerHTML = Math.round((total[i]*100/total_total)*1)/1 + "%";
}
}
Le
« else { } » indique ette partie ne s'active que si l'alerte n'est pas apparue et donc, que toutes les questions sont répondues.
Le
« document.getElementById("resultats").style.display = "block"; » fait apparaître la section des résultats.
Le reste, c'est le calcul des résultats des fins.
Il faut faire attention au
« i <= 3 ». Le 3, c'est ton nombre de fins possibles. S'il y avait eu 4 fins possibles, il aurait fallu changer le 3 pour un 4. S'il y avait eu 9 fins possibles, il aurait fallu changer le 3 pour un 9. Etc...
Au final, cela devrait ressembler à ceci :
- Code:
<script type="text/javascript">
function test1(){
var choix1 = [];
var choix2 = [];
var choix3 = [];
var total = [];
for (var i = 1; i <= 5; i++) {
choix1[i] = Number(document.getElementById("choix1_question" + i).checked);
}
for (var i = 1; i <= 5; i++) {
choix2[i] = Number(document.getElementById("choix2_question" + i).checked);
}
for (var i = 1; i <= 4; i++) {
choix3[i] = Number(document.getElementById("choix3_question" + i).checked);
}
total[1] = choix2[1] + choix1[2] + choix2[3] + choix3[4] + choix2[5];
total[2] = choix3[1] + choix3[2] + choix1[3] + choix2[4] + choix1[5];
total[3] = choix1[1] + choix2[2] + choix3[3] + choix1[4] + choix1[5];
var total_total = total[1] + total[2] + total[3];
if ((total_total - choix1[5]) != 5) {
alert("Vous devez répondre à toutes les questions !");
}
else {
document.getElementById("resultats").style.display = "block";
for (var i = 1; i <= 3; i++) {
document.getElementById("resultat_fin" + i).innerHTML = Math.round((total[i]*100/total_total)*1)/1 + "%";
}
}
}
</script>
4. IframeNous avons maintenant une page HTML contenant un test. Sauf que si on le laisse là, ce n'est pas trop utile. Alors aux endroits ou nous vondront mettre le test, on va mettre un iframe contenant le lien de notre page HTML.
Quand on enregistre une page HTML et qu'on retourne dans la gestion des pages HTML, on a, dans la deuxième colone, ce qu'on appelle "URL du lien". C'est le lien de ta page HTML.
Pour l'iframe, il s'agit du code qui va suivre. Tu copies/colles la "URL du lien" de ta page HTML là où c'est écrit en majuscules qu'il faut le mettre et tu postes l'iframe là où tu veux l'utiliser ^^
- Code:
<iframe src="URL_DU_LIEN_DE_LA_PAGE_HTML" width="620px" height="1500px" style="margin: auto; display: block;" frameBorder="0" seamless="seamless"></iframe>
Attention, dépendemment du nombre de questions, tu devras peut-être modifier la hauteur (le height) de ton iframe pour qu'il n'y ait pas de barre à droite.
Voilà, c'est tout! À plus !
