Démo / Rédiger un document sur chocolatine

Chaque bloc peut être édité et sauvegardé séparément. Il existe 3 types de blocs :

cours pour rédiger votre cours avec toutes les balises standards du HTML plus les balises spéciales chocolatine,
questions pour insérer des questions ou des lots de questions directement dans le document,
lexique (à venir) qui correspond à la définition d'un mot. Cette définition apparaîtra en info-bulle partout où le mot est présent dans les documents du chapitre.

1. Bloc COURS

En plus de toutes les balises standards HTML
vous pouvez utiliser les balises spéciales de Chocolatine présentée ci-dessous :

1.1. Mise en forme du texte

Vous pouvez cumuler toutes les balises de mise en forme HTML.
Par exemple ce texte est le résultat de ce code texte.

Texte en gras : Texte en gras
Texte en italique : Texte en italique
Texte souligné : Texte souligné
<s>Texte barré</s> : ~~Texte barré~~
<q>Citation courte</q> : Citation courte
<cite>Titre de l'œuvre citée</cite> : Titre de l'œuvre citée
Texte important : Texte important
Texte accentué : Texte accentué
Texte marqué : Texte marqué
Texte en petit : Texte en petit
<del>Texte supprimé</del> : ~~Texte supprimé~~
<ins>Texte inséré</ins> : Texte inséré
Texteindice : Texte_indice
Texteexposant : Texte^exposant

Colorer votre texte avec les balises :

<marron> ou <maroon>pour un texte marron
<rouge> ou <red> pour un texte rouge
<tomate> ou <tomato>pour un texte tomate
<corail> ou <coral>pour un texte corail
<orange> pour un texte orange
<vert> ou <green> pour un texte vert
<citron> ou <lime>pour un texte citron vert
<olive> pour un texte olive
<or> ou <gold> pour un texte doré
<jaune> ou <yellow> pour un texte jaune
<rose> ou <pink>pour un texte rose
<magenta> pour un texte magenta

<violet> ou <purple> pour un texte violet
<indigo> pour un texte indigo
<lavande> ou <lavender>pour un texte lavande
<sky> ou <ciel> pour un texte bleu ciel
<cyan> pour un texte cyan
<bleu> ou <blue> pour un texte bleu
<marine> ou <navy> pour un texte bleu marine
<gris> ou <gray> pour un texte gris
<blanc> ou <white> pour un texte blanc
<noir> ou <black> pour un texte noir
etc...

1.1. Ajouter une image

Glisser-déposer une image directement dans la zone de texte pour y insérer une image. Vous pouvez recadrer l'image avant qu'elle soit téléversée vers le serveur et le code de la zone de texte est automatiquement complété avec le code HTML adéquat.
La plupart des formats d'image sont acceptés (jpg, png, gif, webp, svg...).

Quelques attributs spéciaux :

Une image avec un sous-titre :
<img src='croissant.jpg' width='500px' sous-titre="Image de croissant" />

Une image qui change au clic grâce à l'attribut src-onclick.
Les deux images s'alterneront à chaque clic comme dans l'exemple ci-contre une image GIF et JPG.

<img src="exe_fact.gif" src-onclick="exe_fact.jpg" width="150"
     sous-titre="Pile d'exécution pour l'appel <code>fact(3)</code>" />

Pour qu'une image n'apparaissent qu'au survol de la souris, voir plus bas : Info-bulle.

Pile d'exécution pour l'appel `fact(3)`
(Image cliquable)

1.3. Rédiger des formules mathématiques

Exemple :

	AsciiMath (en ligne)	LaTeX (en ligne)	LaTeX (en bloc)
Syntaxe	Syntaxe AsciiMath	Syntaxe LaTeX
Encadré par :	des anti-guillements	des dollars	des double-dollars
Code source :	`3/4`	Équation : $a^{2}+2b+c=12$	Somme : `$$\sum_{1}^{10}x^{2}$$`
Affichage :	$\frac{3}{4}$	Équation : $a^{2} + 2 b + c = 12$	Somme : $\sum_{1}^{10} x^{2}$

1.4. Insérer un tableau en CSV

En glissant-déposant un fichier .csv celui-ci génère automatiquement un tableau.

La balise <csv> vous permet de rédiger rapidement un tableau.

Exemple :

<csv>
a; b; c; d
1; 2; 3; 4
</csv>

Résultat :

a	b	c	d
1	2	3	4

Cette balise <csv> accepte les attributs :

<csv délimiteur=";"> pour modifier le délimiteur de colonne
<csv no-th> pour supprimer la mise ne forme par défaut de la première ligne de titre
<csv centrer> pour centrer le contenu des cellules
<csv titre="..."> pour ajouter un titre au dessus du tableau
<csv style="..."> pour ajouter un style CSS au tableau

1.5. Inclure un graphe (pas encore stable)

La balise <graph> vous permelt de créer un graphe.
Exemple :

<graph>
{"directed":true,
"nodes":[{"id":"L"},{"id":"M"},{"id":"N"},{"id":"O"}],
"links":[
{"source":"L","target":"M","weight":34, "color":"red"},
{"source":"L","target":"N"},
{"source":"L","target":"O"},
{"source":"O","target":"N"}]}
</graph>

L

M

N

O

⯈

34

⯈

2.1. Inclure des codes sources

Avec les balises <xml> vous pouvez mettre en coloration syntaxique du code HTML au sein d'une ligne. Il existe aussi les balises : <css>, <js>, <bash>, <c>, <c#>, <c++>, <http>, <java>, <md> pour le markdown, <php>, <py> pour python, <sql> et <algo> pour du pseudo-code.

En y ajoutant l'attribut <py pre>, le code s'écrira sur plusieurs lignes.

Code	Résultat
`<py pre> a = 2 b = a*5 </py>`	`a = 2 b = a*5`

L'ajout de l'attribut sans-numéros supprime la numérotation des lignes réalisée par défaut. Dans ce cas l'attribut pre devient facultatif.

Code	Résultat
`<py sans-numeros> a = 2 b = a*5 </py>`	`a = 2 b = a*5`

2.7. Ajouter des info-bulles

Ajouter des bulles d'information dans votre document avec les attributs pop et pop-def

Code	Résultat	Explications
`Un <span pop="type abstrait de donnée">TAD</span>...`	Un TAD...	Le texte sous l'info-bulle apparaît en gras.
`Voici le <span>drapeau Tahitien<pop><img src="Tahiti-Flag.jpg"/></pop>.</span>`	Voici le drapeau Tahitien .	Autre syntaxe avec le même résultat.
`<span pop-def="donner la<br/>documentation">spécifier</span>`	spécifier	Le texte sous l'info-bulle apparaît bleu et en gras.
`Quel <span>chat mignon<pop def><img src="chat.gif"/></pop></span> !`	Quel chat mignon !	Autre syntaxe avec le même résultat.

2.9. Ajout de boutons

2.8.1. Copier dans le presse-papier

L'ajout de l'attribut ou de la classe with-copy-button ou avec-bouton-copier à une balise, permet d'ajouter à sa suite un bouton permettant à l'utilisateur de copier-coller son contenu dans sont presse-papier.

Code	Résultat
`Saisir : <span avec-bouton-copier>NLXYGX893</span>`	Saisir : NLXYGX893

2.8.2. Afficher/Cacher

Ajouter un bonton d'affichage avec l'attribut with-button ou avec-bouton

Code	Résultat
`<div avec-bouton>Il faut faire ...</div>`	Il faut faire ...
`<div avec-bouton="Aide">Il faut faire ...</div>`	Il faut faire ...

2.8.3. Cacher aux élèves

Pour nrendre une balise visible seulement des professeurs, ajouter l'attribut only-prof ou prof-seul.
Vous pouvez également faire apparaître un bouton permettant d'afficher le contenu d'une balise avec l'attribut with-button-prof ou avec-bouton-prof. Dans ce cas, le bouton et le contenu qu'il permet d'afficher ne sont visible que des professeurs.

2.11. Mettre en colonne

En insérant l'élément <co></co> entre deux parties de votre bloc, ceux-ci s'afficheront en colonnes égales.
Avec <co>auto</co>, les colonnes s'adaptent à leur contenu
et avec <co>3</co> la partie précédente n'occupera que les 3/12 de la largeur disponible.

Code	Résultat
`<py pre> a = 2 + 3 b = a*5 </py> <co></co> <img src="portrait03.jpg" width="100"> Bonjour !`	`a = 2 b = a*5` Bonjour !

1.10. Écrire en MarkDown

Pour rédiger en MarkDown, utilisez la balise <markdown>...</markdown>.
sur la syntaxe du MarkDown.

2. Bloc QUESTIONS

Pour cela, il faut d'abord avoir créer la question dans votre page Mes contenus puis repéré le numéro de la question.

Il suffit ensuite d'écrire le numéro de la question dans votre code. Vous pouvez insérer plusieurs questions en écrivant leur numéro séparées d'un espace. Les questions seront alors proposées dans cet ordre.