« Modèle:Question à choix multiple » : différence entre les versions

Dernière version du 2 septembre 2020 à 22:32

Documentation

Ce modèle à haut risque est inclus sur un très grand nombre de pages et ne peut pas être modifié.

Cette protection ne constitue pas obligatoirement une approbation de la version actuelle. Vous pouvez proposer une modification en page de discussion. Lorsqu'un compromis sera trouvé en page de discussion, vous pourrez demander la modification auprès des administrateurs (voir le journal des protections).

Utilisation

Question au format choix multiples. Pour le format Flashcard, voir Modèle:Question. Pour une question vrai ou faux, voir Modèle:Question vrai ou faux. Pour une question à plusieurs réponses, voir Modèle:Question à plusieurs réponses.

Exemple

[ modifier ]

Combien de patte(s) possède une girafe?

1
2
3
4
5

d

La girafe est un mammifère quadrupède et elle possède donc 4 pattes. Voici d'autres exemples de mammifères à 4 pattes:

Paramètres

Question au format choix multiples. Pour une question vrai ou faux, voir Modèle:Question_vrai_ou_faux, Pour le format Flashcard, voir Modèle:Question.

[Modifier les données du modèle]
Paramètres du modèle
La mise en forme multiligne est préférée pour ce modèle.
Paramètre		Description	Type	État
Question	`question`	La question à poser. Exemple Combien de pattes possède une girafe?	Contenu	obligatoire
A	`a`	Le choix A.	Chaîne	obligatoire
B	`b`	Le choix B.	Chaîne	obligatoire
C	`c`	Le choix C.	Chaîne	suggéré
D	`d`	Le choix D.	Chaîne	suggéré
E	`e`	Le choix E.	Chaîne	suggéré
F	`f`	Le choix F.	Chaîne	suggéré
G	`g`	Le choix G.	Chaîne	suggéré
Explication	`explication`	Une explication de la bonne réponse à la question. Exemple Une girafe possède quatre pattes car elle est un quadrupède.	Contenu	suggéré
Références pour l'explication	`références_explication`	Des URLs, PMIDs, DOIs ou ISBNs séparés par des points-virgules (;). Exemple https://en.wikipedia.org/wiki/Millipede,10.1000/182	Contenu	facultatif
Réponse	`réponse`	La réponse à la question (lettre minuscule). Exemple b (en minuscule)	Contenu	obligatoire
Références pour la réponse	`références_réponse`	Des URLs, PMIDs, DOIs ou ISBNs séparés par des points-virgules (;). Exemple https://en.wikipedia.org/wiki/Millipede,10.1000/182	Contenu	facultatif
Image question	`image_question`	Une image à associer avec la question. Exemple Image_intéressante.png	Fichier	suggéré
Image explication	`image_explication`	Une image associée à l'explication. Exemple Image_intéressante.png	Fichier	facultatif
Symbole du marqueur	`marqueur1_symbole`	Caractère qui constituera le marqueur. Ce paramètre doit être spécifié pour activer le marqueur. Exemple X, →, ↑, O, etc.	Chaîne	facultatif
Couleur du marqueur (en anglais)	`marqueur1_couleur`	La couleur du marqueur en anglais. Cette couleur doit être une couleur CSS valide. Par défaut red Exemple red, green, orange	Chaîne	facultatif
Coordonnée X	`marqueur1_x`	Coordonnée X du centre du marqueur (le 0 est la gauche de l'image). Pour récupérer une coordonnée, placez votre curseur sur l'image à marquer dans l'éditeur visuel.	Nombre	facultatif
Coordonnée Y	`marqueur1_y`	Coordonnée Y du centre du marqueur (le 0 est le haut de l'image). Pour récupérer une coordonnée, placez votre curseur sur l'image à marquer dans l'éditeur visuel.	Nombre	facultatif
Identifiant unique	`uuid`	UUID (identifiant unique) de la question. Ce champ est rempli automatiquement. Valeur automatique `{{subst:#idprovider-random:uuid}}`	Chaîne	obligatoire

La documentation de ce modèle est incluse depuis sa sous-page de documentation (modifier | historique).
Veuillez placer les catégories dans la sous-page /Documentation.
Les éditeurs peuvent travailler dans le bac à sable (créer) et la page de test (créer).

@@ Ligne 1 : / Ligne 1 : @@
-<noinclude>
+<includeonly>
-== Exemple ==
+{{Question
-</noinclude><div style="display:none"><!--Tricks the visual editor not to display raw html--><html><script type="text/javascript">
+ | classe = multiple-choice-question {{{classe|}}}
-   window.addEventListener('load', function(){
+ | question = {{{question|}}}
-    if(window.multipleChoiceQuestionsInit) { return; }
+ | sous-question = <ol class="multiple-choice-question-choices" type="A">
-    $('.multiple-choice-question-see-answer').each(function(){
+<li><html><input type="radio" name="q" value="a" class="multiple-choice-question-choice"></html>{{{a|Choix A}}}</li>
-      $(this).replaceWith('<button class="multiple-choice-question-see-answer mw-ui-button">Voir</button>');
+<li><html><input type="radio" name="q" value="b" class="multiple-choice-question-choice"></html>{{{b|Choix B}}}</li>
-    });
+{{#if:{{{c|}}}|<li><html><input type="radio" name="q" value="c" class="multiple-choice-question-choice"></html>{{{c}}}</li>|}}
+{{#if:{{{d|}}}|<li><html><input type="radio" name="q" value="d" class="multiple-choice-question-choice"></html>{{{d}}}</li>|}}
+{{#if:{{{e|}}}|<li><html><input type="radio" name="q" value="e" class="multiple-choice-question-choice"></html>{{{e}}}</li>|}}
+{{#if:{{{f|}}}|<li><html><input type="radio" name="q" value="f" class="multiple-choice-question-choice"></html>{{{f}}}</li>|}}
+{{#if:{{{g|}}}|<li><html><input type="radio" name="q" value="g" class="multiple-choice-question-choice"></html>{{{g}}}</li>|}}
+</ol> | image_question = {{{image_question|}}}
+ | image_réponse = {{{image_réponse|}}}
+ | réponse = <span class="multiple-choice-question-answer-letter" style="font-size: 20px; text-transform: uppercase; font-weight: bold;">{{lc:{{{réponse|}}}}}</span>{{#if: {{{réponse|}}}||<i>Aucune réponse n'a été spécifiée...</i>}}
+ | explication = {{{explication|}}}{{#if: {{{image_explication|}}}|<br>[[Fichier:{{{image_explication}}}|400px]]|}}
+ | marqueur1_symbole = {{{marqueur1_symbole|}}}
+ | marqueur1_couleur = {{{marqueur1_couleur|}}}
+ | marqueur1_y = {{{marqueur1_y|}}}
+ | marqueur1_x = {{{marqueur1_x|}}}
+  | références_réponse = {{{références_réponse|}}}
+  | références_explication = {{{références_explication|}}}
+}}
+<div style="display:none"><!--Tricks the visual editor not to display raw html--><html><script type="text/javascript">
+   /* In VisualEditor mode, scripts are not run, leaving the answer displayed.
+   * It is important that this code not use jQuery so in can be run inline
+   * right after the template has been displayed. */
+  elements = document.getElementsByClassName('multiple-choice-question-answer-letter');
+  elements[elements.length - 1].classList.add('printonly'); // Use printonly so the answer is still displayed when printing.
+</script></html></div><div style="display:none"><!--Tricks the visual editor not to display raw html--><html><script type="text/javascript">
+  inlineJS['Modèle:Questions_à_choix_multiple'] = function(){
-     $('.multiple-choice-question-choices').each(function(){
+     $('.multiple-choice-question .question-see-answer').click(function(){
-      letters = ["a", "b", "c", "d", "e", "f", "g"];
-      for(var i = 0; i < $(this).children('li').length ; i++)
-      {
-         li = $(this).children()[i];
-         $(li).html('<input type="radio" name="q" value="'+ letters[i] +'" class="multiple-choice-question-choice">' + $(li).text());
-      }
-    });
-    $('.multiple-choice-question-see-answer').click(function(){
          inputs = $(this).closest('.multiple-choice-question').find('.multiple-choice-question-choices');
          checked = inputs.find('input[name=q]:checked');
-         if(!checked.length){ alert('Veuillez choisir une réponse'); return; }
+         // Check if the answer is visible.
+         if($(this).text() == 'Voir') // Remove the answer highlighting if the question is being hidden again.
-        $(this).closest(".multiple-choice-question").find('.multiple-choice-question-answer').fadeToggle();
-         if($(this).text() == 'Voir')
-        {
-           $(this).text('Cacher');
-        }
-        else
          {
-           $(this).text('Voir');
+            inputs.children('li').css('color', '').css('font-weight', '');
-            inputs.children('li').css('color', '').css('font-weight', '');
             return;
          }
+        if(!$(this).closest('.multiple-choice-question').find('.multiple-choice-question-answer-letter').text()) // If no answer was provided.
+        {
+          return; // Just display the explanation.
+        }
          checked.parent().css('color', 'red');
          inputs.find('input[value=' + $(this).closest('.multiple-choice-question').find('.multiple-choice-question-answer-letter').text().toLowerCase() +']').parent().css('color', 'green').css('font-weight', 'bold');
      });
-    multipleChoiceQuestionsInit = true;
+   };
-   });
+</script></html></div></includeonly><noinclude>{{Documentation}}</noinclude>
-</script></html></div><includeonly>{{Boîte|classe=multiple-choice-question question noprint|style=margin-top: 10px;|contenu=
-<span class="question-number"></span>'''{{{question|Veuillez saisir une question}}}'''{{#if:{{{image_question|}}}|<br>[[Fichier:{{{image_question}}}|400px]]|}}
-<ol class="multiple-choice-question-choices" type="A">
-<li>{{{a|Choix A}}}</li>
-<li>{{{b|Choix B}}}</li>
-{{#if:{{{c|}}}|<li>{{{c}}}</li>|}}
-{{#if:{{{d|}}}|<li>{{{d}}}</li>|}}
-{{#if:{{{e|}}}|<li>{{{e}}}</li>|}}
-{{#if:{{{f|}}}|<li>{{{f}}}</li>|}}
-{{#if:{{{g|}}}|<li>{{{g}}}</li>|}}</ol><div style="margin-left:25px" class="multiple-choice-question-answer"><span class="multiple-choice-question-answer-letter" style="font-size: 20px; text-transform: uppercase; font-weight: bold;">{{{réponse}}}</span>
-{{#if:{{{explication|}}}|<div style="border:1px solid #aaaaaa; margin: 10px; padding: 10px">
-{{{explication}}}</div>|}}{{#if:{{{image_explication|}}}|<br>[[Fichier:{{{image_explication}}}|400px]]|}}
-</div>
-<div style="text-align: right;"><span class="multiple-choice-question-see-answer">Voir</span>
-</div>}}<div style="display:none"><!--Tricks the visual editor not to display raw html--><html><script type="text/javascript">
-  /* In VisualEditor mode, scripts are not run, leaving the answer displayed.
-   * It is important that this code not use jQuery so in can be run inline
-   * right after the template has been displayed. */
-  elements = document.getElementsByClassName('multiple-choice-question-answer');
-  elements[elements.length - 1].style.display = 'none';
-  elements = document.getElementsByClassName('multiple-choice-question-answer-letter');
-  elements[elements.length - 1].style.display = 'none';
-</script></html></div></includeonly><noinclude>
-{{Question à choix multiple
-  |question= Combien de patte(s) possède une girafe?
-  |réponse=d
-  |a= 1
-  |b= 2
-  |c= 3
-  |d= 4
-  |e= 5
-  |image_explication=Girafe.jpeg
-  |explication= La [https://fr.wikipedia.org/wiki/Girafe girafe] est un mammifère quadrupède et elle possède donc 4 pattes. Voici d'autres exemples de mammifères à 4 pattes:
-* [https://fr.wikipedia.org/wiki/Rhinoc%C3%A9ros rhinocéros]
-* [https://fr.wikipedia.org/wiki/%C3%89l%C3%A9phant éléphant]
-* [https://fr.wikipedia.org/wiki/Lion lion]
-}}
-== Utilisation ==
-<templatedata>
-{
-	"params": {
-		"question": {
-			"label": "Question",
-			"description": "La question à poser.",
-			"example": "Combien de pattes possède une girafe?",
-			"type": "content",
-			"required": true
-		},
-		"a": {
-			"label": "A",
-			"description": "Le choix A.",
-			"type": "string",
-			"required": true
-		},
-		"b": {
-			"label": "B",
-			"description": "Le choix B.",
-			"type": "string",
-			"required": true
-		},
-		"c": {
-			"label": "C",
-			"description": "Le choix C.",
-			"type": "string",
-			"suggested": true
-		},
-		"d": {
-			"label": "D",
-			"description": "Le choix D.",
-			"type": "string",
-			"suggested": true
-		},
-		"e": {
-			"label": "E",
-			"description": "Le choix E.",
-			"type": "string",
-			"suggested": true
-		},
-		"f": {
-			"label": "F",
-			"description": "Le choix F.",
-			"type": "string",
-			"suggested": true
-		},
-		"g": {
-			"label": "G",
-			"description": "Le choix G.",
-			"type": "string",
-			"suggested": true
-		},
-		"explication": {
-			"label": "Explication",
-			"description": "Une explication de la bonne réponse à la question.",
-			"example": "Une girafe possède quatre pattes car elle est un quadrupède.",
-			"type": "content",
-			"suggested": true
-		},
-		"réponse": {
-			"label": "Réponse",
-			"description": "La réponse à la question (lettre minuscule).",
-			"example": "b (en minuscule)",
-			"type": "content",
-			"required": true
-		},
-		"image_question": {
-			"label": "Image question",
-			"description": "Une image à associer avec la question.",
-			"type": "wiki-file-name",
-			"example": "Image_intéressante.png",
-			"suggested": true
-		},
-		"image_explication": {
-			"label": "Image explication",
-			"description": "Une image associée à l'explication.",
-			"type": "wiki-file-name",
-			"example": "Image_intéressante.png"
-		}
-	},
-	"description": "Question au format choix multiples. Pour le format Flashcard, voir Modèle:Flashcard.",
-	"format": "block"
-}
-</templatedata>
-</noinclude>