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

De Wikimedica
(Ajout champs image réponse et image question)
(Correction caractères corrompus)
Balise : Éditeur de wikicode 2017
 
(42 versions intermédiaires par le même utilisateur non affichées)
Ligne 1 : Ligne 1 :
<noinclude>
<includeonly>
== Exemple ==
</noinclude><includeonly>
<div style="display:none"><!--Tricks the visual editor not to display raw html--><html><script type="text/javascript">
<div style="display:none"><!--Tricks the visual editor not to display raw html--><html><script type="text/javascript">
   window.addEventListener('load', function(){
   inlineJS['Modèle:Question'] = function(){
     if(window.flashcardsInit) { return; }
      
     $('.flashcard-see-answer').each(function(){
     $('.question-see-answer').click(function(){
       $(this).replaceWith('<button class="flashcard-see-answer mw-ui-button">Voir</button>');
       $(this).closest(".question").find('.question-answer').fadeToggle();
      $(this).text($(this).text() == 'Voir'?'Cacher':'Voir');
     });
     });
     $('.flashcard-see-answer').click(function(){
   
       $(this).closest(".flashcard").find('.flashcard-answer').fadeToggle();
    function checksum(str){
       $(this).text($(this).text() == 'Voir' ? 'Cacher' : 'Voir');
      var sum = 0;
      debug;
      for(var i = 0; i < str.length; i++) { sum += str.charCodeAt(i) / (i + 1); }
      return sum;
    }
 
     $('.question-flag').click(function(){
       if($(this).text() == 'Marquer') { // Flag question.
        $(this).text('Ok').css('color', 'green');
        $(this).closest(".question").css('border', '5px solid #b72245').addClass('flagged-question');
        document.cookie = 'question' +  $(this).closest(".question").attr('id') + '=flag; expires= Mon, 31 Dec 2030 12:00:00 UTC;';
      }
       else { // Unflag question.
        $(this).text('Marquer').css('color', '#b72245');
        $(this).closest(".question").css('border', 'inherit').removeClass('flagged-question');
        document.cookie = 'question' +  $(this).closest(".question").attr('id') + '=; expires= Mon, 31 Dec 2000 12:00:00 UTC;';
      }
    });
 
    $('.question-flag').each(function(){ // Flag questions that were previously marked.
      if(document.cookie.indexOf('question' + $(this).closest(".question").attr('id'))!=-1) {
          $(this).text('Ok').css('color', 'green');
          $(this).closest(".question").css('border', '5px solid #b72245').addClass('flagged-question');  
      }
     });
     });
     window.window.flashcardsInit = true;
 
   });
     /* Mediawiki adds breaks at a bunch of line breaks that are not necessary, remove them.
    * This is actually the fault of the template code, but they are hard to track and eliminate.*/
    $('.question p').each(function(){ if($(this).html() == "<br>\n") { $(this).html(""); } });
 
   };
</script></html></div>
</script></html></div>
{{Boîte|classe=flashcard question noprint|style=margin-top: 10px;|contenu=
{{Boîte
<span class="question-number"></span>'''{{{question|Veuillez saisir une question}}}'''{{#if:{{{image_question|}}}|<br>[[Fichier:{{{image_question}}}|400px]]|}}
|classe={{{classe|flashcard}}} question {{#if:{{{image_question|}}}|question-with-image|question-without-image}}
<div style="margin-left:25px" class="flashcard-answer">
|style=margin-top: 10px; {{#if: {{{image_question|}}}{{{image_réponse|}}}|min-width: 400px;||}}}
{{{réponse|Veuillez saisir une réponse}}}{{#if:{{{image_réponse|}}}|<br>[[Fichier:{{{image_réponse}}}|400px]]|}}<br/>
|id = {{anchorencode:{{{question}}}}}
|contenu=
<span class="question-number" style="float: left; margin-right: 1em;"></span><span class="plainlinks noprint" style="color:#555; font-size:small; float: right;">[ [{{fullurl:{{FULLPAGENAME}}|veaction=edit}}#{{anchorencode:{{{question}}}}} modifier] ]</span><div style="display: inline-block; font-weight:bold; width:80%; margin-top:-0.5em;">
<div class="question-text">{{{question|Veuillez saisir une question}}}</div>
</div>{{#if:{{{sous-question|}}}|<br>{{{sous-question}}}|}}{{#if:{{{image_question|}}}|<br>{{#if:{{{marqueur1_symbole|}}}|{{Marqueur|x={{{marqueur1_x|40}}}|y={{{marqueur1_y|40}}}|taille=40|couleur={{{marqueur1_couleur|red}}}|marqueur={{{marqueur1_symbole}}}|contenu=[[Fichier:{{{image_question}}}|400px]]}}|[[Fichier:{{{image_question}}}|400px]]}}|}}
<div style="margin-left:25px" class="question-answer"><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('question-answer');
  /* Designates the previous element, so the question we just created.
  * Use printonly so the element still show when the question is being printed.*/
  elements[elements.length - 1].classList.add('printonly');
</script></html></div>
{{{réponse|Veuillez saisir une réponse}}}{{#if:{{{références_réponse|}}}|<br>Références:<br><ol>{{#arraymap:{{{références_réponse|}}}|;|x|<li>x</li>| }}</ol>|}}{{#if:{{{image_réponse|}}}|[[Fichier:{{{image_réponse}}}|400px]]|}}
{{#if:{{{explication|}}}|<div style="border:1px solid #aaaaaa; margin: 10px; padding: 10px">
{{#if:{{{explication|}}}|<div style="border:1px solid #aaaaaa; margin: 10px; padding: 10px">
{{{explication}}}</div>|}}
{{{explication}}}{{#if:{{{références_explication|}}}|<br>Références:<br><ol>{{#arraymap:{{{références_explication|}}}|;|x|<li>x</li>| }}</ol>|}}</div>|}}
</div>
</div>
<div style="text-align: right;">
<div class="noprint" style="text-align: left;"><span style="display:none;" class="question-uuid">{{{uuid|no-uuid}}}</span>
<span class="flashcard-see-answer">Voir</span>
<html><button style="color:#b72245;" class="question-flag mw-ui-button">Marquer</button><button style="float:right;" class="question-see-answer mw-ui-button">Voir</button></html>
</div>
</div>
}}<div style="display:none"><!--Tricks the visual editor not to display raw html--><html><script type="text/javascript">
}}</includeonly><noinclude>{{Documentation}}</noinclude>
  /* 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('flashcard-answer');
  elements[elements.length - 1].style.display = 'none';
</script></html></div></includeonly><noinclude>
{{Flashcard
  |question= Combien de pattes possède une girafe?
  |réponse= 4
  |explication= La giraffe est un mammifère, elle possède donc 4 pattes. Voici une liste d'autres animaux de la jungle qui eux aussi possèdent 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]
|image_réponse=Girafe.jpeg
}}
 
{{Flashcard
|question= De quoi est fait un serpent?
|image_question = Serpent.jpeg
|réponse=
# une tête
# une queue
}}
 
== Utilisation ==
 
<templatedata>
{
"params": {
"question": {
"label": "Question",
"description": "La question à poser.",
"type": "content",
"required": true,
"example": "Combien de pattes possède une girafe?"
},
"réponse": {
"label": "Réponse",
"description": "La réponse à donner à utilisateur. Cette dernière sera cachée jusqu'à ce que l'utilisateur clique le bouton \"Voir\"",
"type": "content",
"required": true,
"example": "4"
},
"explication": {
"label": "Explication",
"description": "L'explication de la réponse à la question. Ici, il est pertinent de faire des liens avec le contenu du wiki afin que l'utilisateur puisse aller en apprendre plus sur le sujet.",
"suggested": true,
"type": "content",
"example": "La girafe est un quadrupède, elle possède donc 4 pattes."
},
"image_question": {
"label": "Image question",
"description": "Une image à associer avec la question.",
"type": "wiki-file-name"
},
"image_réponse": {
"label": "Image réponse",
"description": "Une image associée à la réponse.",
"type": "wiki-file-name"
}
},
"description": "Question au format flashcard permettant de poser une question, de présenter une réponse à l'utilisateur et si besoin une explication. Si vous désirez poser une question à choix multiples, utilisez le modèle Question_à_choix_multiple.",
"format": "block"
}
</templatedata>
</noinclude>

Dernière version du 13 février 2022 à 23:46

 Documentation[modifier] [purger]

Utilisation

Question au format flashcard permettant de poser une question, de présenter une réponse à l'utilisateur et si besoin une explication. Si vous désirez poser une question à choix multiple, utilisez Modèle:Question_à_choix_multiple. Si c'est pour une question vrai ou faux, servez-vous de Modèle:Question_vrai_ou_faux. Pour une question à plusieurs réponses, voir Modèle:Question à plusieurs réponses.

Exemples

Question avec explication détaillée

[ modifier ]
Combien de pattes possède une girafe?

4

La giraffe est un mammifère, elle possède donc 4 pattes. Voici une liste d'autres animaux de la jungle qui eux aussi possèdent 4 pattes:

Question avec marqueur

[ modifier ]
Comment se nomme cette partie du serpent?

La tête.

Un serpent est fait de:

  1. une tête
  2. une queue

Question avec références

[ modifier ]
Combien de pattes possède un mille-pattes?
Plusieurs, mais pas mille.
Références:
  1. https://en.wikipedia.org/wiki/Millipede,0-85131-041-9,10.1000/182
Un centipède par exemple, ne possède pas cent pattes.
Références:
  1. https://en.wikipedia.org/wiki/Centipede,0-85131-041-9,10.1000/182

Autres exemples et cas de test

[ modifier ]
Liste:
  • Question avec une liste ...
  • ... dans la question.
  • Et une liste ...
  • dans la réponse.
  • Aussi une liste ...
  • dans l'explication.


[ modifier ]
Question dans une question...

Réponse longue avec une autre question.

[ modifier ]
Question dans une question...

Réponse

Paramètres

Question au format flashcard permettant de poser une question, de présenter une réponse à l'utilisateur et si besoin une explication. Si vous désirez poser une question à choix multiples, utilisez le modèle Question_à_choix_multiple.

[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ètreDescriptionTypeÉtat
Questionquestion

La question à poser.

Exemple
Combien de pattes possède une girafe?
Contenuobligatoire
Réponseréponse

La réponse à donner à utilisateur. Cette dernière sera cachée jusqu'à ce que l'utilisateur clique le bouton "Voir"

Exemple
4
Contenuobligatoire
Références pour la réponseré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
Contenufacultatif
Explicationexplication

L'explication de la réponse à la question. Ici, il est pertinent de faire des liens avec le contenu du wiki afin que l'utilisateur puisse aller en apprendre plus sur le sujet.

Exemple
La girafe est un quadrupède, elle possède donc 4 pattes.
Contenusuggéré
Références pour l'explicationré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
Contenufacultatif
Image questionimage_question

Une image à associer avec la question.

Exemple
Image_intéressante.png
Fichiersuggéré
Image réponseimage_réponse

Une image associée à la réponse.

Exemple
Image_intéressante.png
Fichierfacultatif
Symbole du marqueurmarqueur1_symbole

Caractère qui constituera le marqueur. Ce paramètre doit être spécifié pour activer le marqueur.

Exemple
X, →, ↑, O, etc.
Chaînefacultatif
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înefacultatif
Coordonnée Xmarqueur1_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.

Nombrefacultatif
Coordonnée Ymarqueur1_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.

Nombrefacultatif
Identifiant uniqueuuid

UUID (identifiant unique) de la question. Ce champ est rempli automatiquement.

Valeur automatique
{{subst:#idprovider-random:uuid}}
Chaîneobligatoire