Démo / Rédiger un document

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
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 <b i rouge>texte</b>.

Avec les balises :

<marron> ou <maroon>pour un texte marron
<brun> ou <brown> pour un texte brun
<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
<sarcelle> ou <teal>pour un texte sarcelle
<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...

Ajouter un fond coloré avec les balises :

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

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

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

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

Le Caire

Dakar

Abuja

Nairobi

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é :

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

lexème

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

Un lien vers le bloc d'origine de la bulle lexicale est automatiquement ajouté dans la bulle lexicale. Il dirige l'internaute vers le bon bloc dans le bon document même s'il a été caché.

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