Balises de l'infrastructures
L'infrastructure Web fournit quelques balises permettant de structurer un énoncé. Vous pouvez voir un exemple utilisant la plupart des balises ici.
Structuration d'un énoncé
Les balises chapitre, exercice et question et reponse sont des boîtes cliquables. Si vous cliquez en haut (sur le titre, le numéro de question etc...), le contenu de la boite s'affiche si elle ne l'était pas et réciproquement. Par défaut, les boites associées à chapitre, exercice et question sont affichées et celles associées à solution ne le sont pas, sauf si, dans l'URL, vous spécifiez wrap=true. Vous pouvez changer ce comportement en utilisant l'attribut unwrap (positionné à false on force l'affichage, positionné à autre chose, la boîte n'est pas affichée, désolé pour le contre-sens !).
Les balises exercice et question sont numérotées. Si vous voulez annuler ce comportement, il suffit d'ajouter l'attribut raw à la balise.
Comment cacher les solutions
Cacher les solutions avec la balise
Dans cette question, on utilise la balise <no-soluce> pour cacher la solution qui suit. Les solutions ne sont pas envoyées au client, ce qui fait que les étudiants ne peuvent pas les voir, même en inspectant le code source HTML.
Lorsque le serveur tombe sur cette balise, il considère que toutes les solutions atteignable à partir du parent qui contient no-soluce ne doivent plus être affichées. Il suffit donc de placer cette balise à la racine d'un document pour cacher toutes solutions.
Cacher les solutions avec l'attribut no-soluce
Lorsque le serveur tombe sur une balise qui possède l'attribut no-soluce, le serveur n'envoie plus les solutions sur l'ensemble des balises enfants.
Dans cette question on voit toujours les réponses
À votre avis, pourquoi ? (pour afficher la solution, ajoutez &soluce=true à l'URL.
La balise code
L'infrastructure propose une balise <code> permettant d'insérer du code. Cette balise utilise les options suivantes :
- L'attribut class='code-block' : lorsque cette option est ajoutée,
le code apparaît dans un bloc séparé avec un fond coloré, sinon, le code est
inséré en ligne dans le paragraphe courant.
Voici du code en ligne et voici du code en bloc.
- <code url='...'></code> : Insère le code qui se trouve à l'url directement dans le format code-block. Le code est précédé d'un lien pour télécharger le code. Par exemple, le rendu de <code url='sample.c'></code> est :
- L'attribut only-ref ajouté à la balise <code> permet de n'insérer que le lien vers le code, mais sans le code lui même. Par exemple, le rendu du <code url='cours.css' only-ref></code> est cours.css.
- L'attribut prettify indique qu'il faut colorer le code, et l'attribut noprettify indique qu'il ne faut pas colorer le code. Par défaut, l'attribut prettify est utilisé par défaut si l'attribut url est utilisé (comme dans l'exemple d'affichage coloré du fichier sample.c précédent), et l'attribut noprettify est utilisé sinon. La coloration est assurée par le projet externe google prettify.
- L'attribut lang='...' permet, pour du code coloré qui serait mal reconnu, d'indiquer le langage a utilisé. En général, il suffit de mettre l'extension utilisée, comme avec 'java', sauf pour bash pour lequel il faut utiliser 'bsh'.
Liste des balises
Voici une liste (probablement non-exhaustive) des balises définies par l'infrastructure :
| <chapitre title='titre'> ... </chapitre> | Définit un nouveau chapitre de nom title. L'argument title est obligatoire. |
| <exercice title='titre'> ... </exercice> | Définit un nouvel exercice de nom title. L'argument title est optionnel. |
| <question title='titre'> ... </question> | Définit une nouvelle question de nom title. L'argument title est optionnel. |
| <partie> Titre partie </partie> | Définit une partie d'un exercice. Permet de séparer logiquement des ensembles de questions d'un exercice. |
| <solution> ... </solution> | Donne une réponse qui n'est affichée que si la page reçoit l'option soluce=true |
| <tip> ... </tip> | Similaire à solution, mais toujours affiché pour que les étudiants puissent accéder à de l'aide (regardez l'aide pour en savoir plus :)). En ajoutant la classe as-paragraph, le conseil s'affiche comme un bloc avec des marges en bas. |
| <details> ... </details> | Similaire à solution, mais toujours affiché pour que les étudiants puissent accéder aux détails (regardez les détails pour en savoir plus :)). En ajoutant la classe as-paragraph, le conseil s'affiche comme un bloc avec des marges en bas |
| <code > ... </code> | Insère du code. |
| <attention> ... </attention> | Affiche un attention. |
| <remarque> ... </remarque> | Affiche une remarque. |
| <enconstruction></enconstruction> | Affiche un message qui explique que la page est en cours de construction. |
| <objectif> ... </objectif> | Affiche un objectif. |
| <bravo> ... </bravo> | Affiche des félicitations pour encourager les étudiants. |
| <all-in-one all-class='cl'> ... </all-in-one> | Agrège toutes les pages référencées par les balises a qui possèdent la classe cl et qui se trouvent sous la balise nav. Par défaut, all-class vaut all-in-one. C'est cette balise qui permet de construire le fascicule contenant l'ensemble des sujets. |
| <generate-schedule></generate-schedule> | Génère le séquencement du cours |
