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

Version du 16 décembre 2016 à 03:53

Exemple

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

1
2
3
4
5

Voir

Utilisation

Question au format choix multiples. Pour le format Flashcard, voir Modèle:Flashcard.

[Modifier les données du modèle]
Paramètres du modèle
Paramètre		Description	Type	État
Question	`question`	La question à poser. Exemple Combien de pattes possède une girafe?	Wikicode non équilibré	obligatoire
A	`a`	Le choix A.	Wikicode non équilibré	obligatoire
B	`b`	Le choix B.	Wikicode non équilibré	obligatoire
C	`c`	Le choix C.	Wikicode non équilibré	suggéré
D	`d`	Le choix D.	Wikicode non équilibré	suggéré
E	`e`	Le choix E.	Wikicode non équilibré	suggéré
F	`f`	Le choix F.	Wikicode non équilibré	suggéré
G	`g`	Le choix G.	Wikicode non équilibré	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.	Wikicode non équilibré	suggéré
Réponse	`réponse`	La réponse à la question (lettre minuscule). Exemple b	Inconnu	obligatoire

@@ Ligne 2 : / Ligne 2 : @@
 == Exemple ==
 </noinclude>
+<div style="display:none"><!--Tricks the visual editor not to display raw html--><html><script type="text/javascript">
+  window.onload = function(){
+    if(window.multipleChoiceQuestionsInit) { return; }
+    $('.multiple-choice-question-see-answer').each(function(){
+      $(this).replaceWith('<button class="multiple-choice-question-see-answer">Voir</button>');
+    });
-<includeonly>
+     $('.multiple-choice-question-choices').each(function(){
-<html>
+       letters = ["a", "b", "c", "d", "e", "f", "g"];
-  <div style="margin:10px;padding:0 10px 10px 10px;background:#f9f9f9; border:1px solid #aaaaaa;">
+      for(var i = 0; i < $(this).children('li').length ; i++)
-     </html>'''{{{question|Veuillez saisir une question}}}'''<html>
+      {
-    <form>
+         li = $(this).children()[i];
-      <script type="text/javascript">
+         $(li).html('<input type="radio" name="q" value="'+ letters[i] +'" class="multiple-choice-question-choice">' + $(li).text());
-        <!-- Mixing MediaWiki template conditionnals and HTML does not yield reliable results so choices that are not enabled are removed using jquery -->
+       }
-        window.onload = function(){
+     });
-          if(window.questionsChecked) { return; }
-          $("[name='q']").each(function(){
+     $('.multiple-choice-question-see-answer').click(function(){
-            if(!$(this).parent().find(".choice").text()){ $(this).parent().remove(); }
+         inputs = $(this).closest('.multiple-choice-question').find('.multiple-choice-question-choices');
-          });
-          window.questionsChecked = true;
-        };
-      </script>
-       <ol type="A">
-        <li><input type="radio" name="q" value="a"><span class="choice"></html>{{{a}}}<html></span></li>
-        <li><input type="radio" name="q" value="b"><span class="choice"></html>{{{b}}}<html></span></li>
-        <li><input type="radio" name="q" value="c"><span class="choice"></html>{{{c|}}}<html></span></li>
-        <li><input type="radio" name="q" value="d"><span class="choice"></html>{{{d|}}}<html></span></li>
-        <li><input type="radio" name="q" value="e"><span class="choice"></html>{{{e|}}}<html></span></li>
-        <li><input type="radio" name="q" value="f"><span class="choice"></html>{{{f|}}}<html></span></li>
-        <li><input type="radio" name="q" value="g"><span class="choice"></html>{{{g|}}}<html></span></input></li>
-       </ol>
-     </form>
-     <div style="display:none; margin-left:25px" class="question-answer">
-         <div style="border:1px solid #aaaaaa; margin: 10px; padding: 10px">
-           </html>{{{explication|}}}<html>
-         </div>
-    </div>
-    <div style="text-align: right;">
-       <button onclick="
-         inputs = $(this).parent().parent();
          checked = inputs.find('input[name=q]:checked');
          if(!checked.length){ alert('Veuillez choisir une réponse'); return; }
-         $(this).parent().parent().find('.question-answer').fadeToggle();
+         $(this).closest(".multiple-choice-question").find('.multiple-choice-question-answer').fadeToggle();
          if($(this).text() == 'Voir')
@@ Ligne 49 : / Ligne 33 : @@
          {
             $(this).text('Voir');
-            $(this).parent().parent().find('.choice').css('color', '').css('font-weight', '');
+            inputs.children('li').css('color', '').css('font-weight', '');
             return;
          }
-         inputs.find('input[name=q]:checked').next().css('color', 'red');
+         checked.parent().css('color', 'red');
-         inputs.find('input[value=</html>{{{réponse}}}<html>]').next().css('color', 'green').css('font-weight', 'bold');
+         inputs.find('input[value=</html>{{{réponse}}}<html>]').parent().css('color', 'green').css('font-weight', 'bold');
-       ">Voir</button>
+    });
-    </div>
+    multipleChoiceQuestionsInit = true;
-  </div>
+  };
-</html>
+</script></html></div>
-</includeonly>
+<includeonly>
+<div class="multiple-choice-question" style="margin-top:10px;padding:0 10px 10px 10px;background:#f9f9f9; border:1px solid #aaaaaa;">
-<noinclude>
+'''{{{question|Veuillez saisir une question}}}'''
+<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="display:none; margin-left:25px" class="multiple-choice-question-answer">
+{{#if:{{{explication|}}}|<div style="border:1px solid #aaaaaa; margin: 10px; padding: 10px">{{{explication}}}</div>|}}
+</div>
+<div style="text-align: right;"><span class="multiple-choice-question-see-answer">Voir</span>
+</div>
+</div>
+</includeonly><noinclude>
 {{Question à choix multiple
    |question= Combien de patte(s) possède une girafe?
@@ Ligne 102 : / Ligne 102 : @@
 			"label": "C",
 			"description": "Le choix C.",
-			"type": "unbalanced-wikitext"
+			"type": "unbalanced-wikitext",
+			"suggested": true
 		},
 		"d": {
 			"label": "D",
 			"description": "Le choix D.",
-			"type": "unbalanced-wikitext"
+			"type": "unbalanced-wikitext",
+			"suggested": true
 		},
 		"e": {
 			"label": "E",
 			"description": "Le choix E.",
-			"type": "unbalanced-wikitext"
+			"type": "unbalanced-wikitext",
+			"suggested": true
 		},
 		"f": {
 			"label": "F",
 			"description": "Le choix F.",
-			"type": "unbalanced-wikitext"
+			"type": "unbalanced-wikitext",
+			"suggested": true
 		},
 		"g": {
 			"label": "G",
 			"description": "Le choix G.",
-			"type": "unbalanced-wikitext"
+			"type": "unbalanced-wikitext",
+			"suggested": true
 		},
 		"explication": {