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,
QUESTION pour insérer des questions ou des lots de questions directement dans le document,
LEXÈME 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 et de toutes les classes Bootstrap, vous trouverez ci-dessous différentes balises spéciales de Chocolatine.

1.1. Mise en forme du texte

Balises de coloration (style Bootstrap) :

<rouge> ou <red> pour un texte rouge
<vert> ou <green> pour un texte vert
<jaune> ou <yellow> pour un texte jaune
<sky> ou <ciel> pour un texte bleu ciel
<bleu> ou <blue> pour un texte bleu
<gris> ou <gray> pour un texte gris
<noir> ou <black> pour un texte noir
<blanc> ou <white> pour un texte blanc
<orange> pour un texte orange
<rose> ou <pink>pour un texte rose
<violet> ou <purple> pour un texte violet

<f-rouge> ou <bg-red> pour un fond rouge
<f-vert> ou <bg-green> pour un fond vert
<f-jaune> ou <bg-yellow> pour un fond jaune
<f-sky> ou <bg-ciel> pour un fond bleu ciel
<f-bleu> ou <bg-blue> pour un fond bleu
<f-gris> ou <bg-gray> pour un fond gris
<f-noir blanc> ou <bg-black white> pour un fond noir
<f-blanc> ou <bg-white> pour un fond blanc
<f-orange> ou <bg-orange>pour un fond orange
<f-rose> ou <bg-pink>pour un fond rose
<f-violet> ou <bg-purple> pour un fond violet

Vous pouvez cumuler toutes les balises de mise en forme.

Exemples	Code	Résultat
En ligne :	`Voici un <f-jaune>fond jaune</f-jaune> dans une ligne.`	Voici un fond jaune dans une ligne.
En bloc :	`<div f-bleu>Voici un fond bleu<br/>sur plusieurs lignes.</div>`	Voici un fond bleu sur plusieurs lignes.
Cumulable :	`<b i rouge f-vert>En gras italique rouge sur fond vert.</b>`	*En gras italique rouge sur fond vert.*

Voici quelques styles de cadres prédéfinis : Des exercices numérotés avec la balise <exo>. Un danger avec la balise <danger>. Une alerte avec la balise <alerte>. Une validation avec la balise <correct>. Un conseil avec la balise <conseil>. Une remarque avec la balise <remarque>.

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
Encadré par :	des anti-guillements	des simples dollars (en ligne)	des double-dollars (en bloc)
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

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.

Exemples	Code	Résultat
Dans une ligne :	`<py>a = 2</py> est une affectation.`	`a = 2` est une affectation
En bloc avec numérotation des lignes : En ajoutant l'attribut `pre`.	`<py pre> a = 2 b = a*5 </py>`	`a = 2 b = a*5`
En bloc sans numérotation des lignes : L'ajout de l'attribut `sans-numéro` supprime la numérotation des lignes réalisée par défaut. Dans ce cas l'attribut `pre` est facultatif.	`<py sans-numéro> 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 mais offrant plus de possibilité.

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>.

2. Bloc QUESTION

Un bloc QUESTION permet d'inclure dans votre document, une ou plusieurs de vos questions.

Pour cela, les questions doivent avoir déjà été rédigées dans la page Mes contenus puis repérées leur numéro.

Ensuite, il suffit de compléter le bloc avec :

le ou les numéros des questions
exemple : 845 1821
et/ou le numéro d'une question et de la variante souhaitée
exemple : 845-2 correspond à la variante n°2 de la question n°845
et/ou le numéro d'un lot de questions
exemple : lot-146 permet d'inclure toutes les questions du lot 146
et/ou le numéro d'un lot et le niveau souhaité
exemple : lot-146-1 permet d'inclure uniquement les questions facile (1) du lot n°146

Exemple : Sachant que huit exemples de questions ont été rédigées et regroupées dans le lot n°146, en complétant le bloc par :

lot-146

on obtient l'affichage :

Modifier : Cours Question Lexème Bulle d'aide

Question 1/8 :

Les différents types de question Mémorisation 0x Réussite 0/0

Démarrer

Quelle est la capitale de Kénia ?

Exemple de question QCU (1 seule réponse à cocher).

Nairobi

Le Caire

Dakar

Abuja

Cocher la bonne réponse.

La progression (mémorisation) pour un utilisateur répondant à des questions incluses dans un document est bien prise en compte.

3. Bloc LEXÈME

Un bloc LEXÈME contient une définition associée à un ou plusieurs mots ou expressions (appelés lemmes). Cette définition apparaîtra alors comme une bulle d'information à chaque apparition d'un des lemmes dans les documents de votre programme.

3.1. Comment rédiger ce bloc ?

Voici le contenu du bloc qui permet d'obtenir la bulle d'information présente au-dessus du mot "LEXÈME".

lemmes : lexème
définition : Il s'agit d'une entrée dans un dictionnaire.

Ce bloc peut être défini dans n'importe quel document d'un programme et peut éventuellement être caché (bouton en mode édition ) comme tout autre bloc.

Voici à quoi ressemble le bloc lorsqu'il n'est pas caché :

lexème

Il s'agit d'une entrée dans un dictionnaire.

Les bulles lexicales sont automatiquement accompagné d'un lien vers le bloc d'origine du lexème même s'il est caché. Permettant ainsi d'accéder directement au bon endroit du cours abordant ce sujet.

3.2. Portée de la définition

Pour définir la portée d'une définition, c'est-à-dire le domaine dans lequel apparaîtra la bulle lexicale, il suffit de renseigner la clé portée avec :

programme (par défaut) : pour que la bulle lexicale apparaisse dans tous les documents de tous les chapitres du programme,
chapitre : pour limiter l'apparition de la bulle lexicale aux seuls documents du chapitre,
document : pour limiter l'apparition au seul document.

lemmes : lexème
portée : chapitre
définition : Un lexème est une entrée dans un dictionnaire.

3.3. Règle de priorité des bulles lexicale

Une forme de lemme englobant une autre est prioritaire. Si plusieurs définitions existe pour un même lemme, la définition définie dans le document est prioritaire sur celle définie dans le chapitre qui est prioritaire sur celle définie dans le programme.