Création d'un test à choix de réponse
Voici un tutoriel fait suite à la demande d'Ivy Tyler. Ce tutoriel montre comment créer un test à choix de réponse. À savoir que j'ai reçu l'aide de Nihil Scar Winspeare, merci beaucoup à elle ♥
Pour voir l'aperçu : cliquez ici.
Ce tutoriel est en 4 étapes :
> Création de la base de la page html.
> Création du formulaire du test.
> Création et ajustements du javascript qui va servir à donner le résultat du test.
> Mise en place d'un iframe contenant la page HTML aux endroits où nous voulons utiliser le test.
Pour utiliser ce tutoriel, il faut être fondateur ou administrateur de forum ou avoir accès à un endroit où vous pouvez héberger une page HTML.
Mettre un crédit vers Never-Utopia est obligatoire.
1. Base de la page HTML
Premiè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 ? NON
Utiliser cette page en tant que page d'accueil ? NON
Dans le contenu, nous allons mettre le squelette de notre page HTML :
- Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Test</title>
<style type="text/css">
body {
margin: 0px;
}
.bloc_formulaire {
background: #efefef;
height: auto;
width: 490px;
margin: auto;
padding: 30px;
color: #353535;
text-align: left;
position: relative;
font-family: arial;
font-size: 13px;
box-shadow: inset 0px 0px 30px #747474;
border-radius: 30px;
}
#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 de re-sauvegarder.
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 de re-sauvegarder.
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. Pour en modifier la mise en forme, vous pouvez modifier le CSS.
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.
Donc voilà le plan qui a été utilisé pour le test de l'aperçu :
- Spoiler:
- 1. Première question
Premier choix de réponse (pour extraterrestre - fin3)
Deuxième choix de réponse (pour humain - fin1)
Troisième choix de réponse (pour robot - fin2)
2. Deuxième question
Premier choix de réponse (pour humain - fin1)
Deuxième choix de réponse (pour extraterrestre - fin3)
Troisième choix de réponse (pour robot - fin2)
3. Troisième question
Premier choix de réponse (pour robot - fin2)
Deuxième choix de réponse (pour humain - fin1)
Troisième choix de réponse (pour extraterrestre - fin3)
4. Quatrième question
Premier choix de réponse (pour extraterrestre - fin3)
Deuxième choix de réponse (pour robot - fin2)
Troisième choix de réponse (pour humain - fin1)
5. Cinquième question
Premier choix de réponse (pour robot et pour extraterrestre - fin2 et fin3)
Deuxième choix de réponse (pour humains - fin1)
Comme on peut voir, j'ai 5 questions. Je les ai mises dans le bon ordre, donc les 4 premières questions ont 3 choix de réponse alors que la 5ème question a 2 choix de réponse. Chaque choix de réponse est associé à un groupe.
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: #efefef;
height: auto;
width: 490px;
margin: auto;
padding: 30px;
color: #353535;
text-align: left;
position: relative;
font-family: arial;
font-size: 13px;
box-shadow: inset 0px 0px 30px #747474;
border-radius: 30px;
}
#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<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 />
<b>2. Deuxième question</b><br />
<input id="choix1_question2" type="radio" name="question_2" />Premier choix de réponse<br />
<input id="choix2_question2" type="radio" name="question_2" />Deuxième choix de réponse<br />
<input id="choix3_question2" type="radio" name="question_2" />Troisième choix de réponse<br /><br />
<b>3. Troisième question</b><br />
<input id="choix1_question3" type="radio" name="question_3" />Premier choix de réponse<br />
<input id="choix2_question3" type="radio" name="question_3" />Deuxième choix de réponse<br />
<input id="choix3_question3" type="radio" name="question_3" />Troisième choix de réponse<br /><br />
<b>4. Quatrième question</b><br />
<input id="choix1_question4" type="radio" name="question_4" />Premier choix de réponse<br />
<input id="choix2_question4" type="radio" name="question_4" />Deuxième choix de réponse<br />
<input id="choix3_question4" type="radio" name="question_4" />Troisième choix de réponse<br /><br />
<b>5. Cinquième question</b><br />
<input id="choix1_question5" type="radio" name="question_5" />Premier choix de réponse<br />
<input id="choix2_question5" type="radio" name="question_5" />Deuxième choix de réponse<br /><br />
<button 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. Javascript
Maintenant 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 avait 4 choix de réponse, il faudrait ajouter « var choix4 = [] »; pour créer un tableau pour les 4ème 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 vous comprenez 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. Votre plan vous sera bien utile à cette étape afin de bien voir quel choix de quelle question va avec quelle fin.
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 total 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. Iframe
Nous 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 vondrons 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 votre page HTML.
Pour l'iframe, il s'agit du code qui va suivre. Vous copiez/collez le "URL du lien" de votre page HTML là où c'est écrit en majuscules qu'il faut le mettre et vous postez l'iframe là où vous voulez l'utiliser ^^
- Code:
<iframe src="URL_DU_LIEN_DE_LA_PAGE_HTML" width="550px" height="600px" style="margin: auto; display: block;" frameBorder="0" seamless="seamless"></iframe>
Attention, dépendemment du nombre de questions, vous devrez peut-être modifier la hauteur (le height) de votre iframe pour qu'il n'y ait pas de barre à droite.
C'est tout! Si jamais vous avez des problèmes avec ce LS, n'hésitez pas à passer dans "Problème avec mon code".
À plus !
Dernière édition par Onyx le Dim 4 Jan 2015 - 1:07, édité 2 fois
)
Je classe donc dans les tutos! ^^
