Démo / Rédiger un document

Quand vous rédiger un document, il est important de sauvegarder chacun de vos blocs avec le bouton vert.

Chaque bloc peut être édité et sauvegardé séparément et le code source peut-être du HTML, du MarkDown ou des Questions.

1. Écrire en HTML

Vous pouvez utilisez toutes les balises standards du HTML.

2. Écrire en HTML augmenté

Vous pouvez également utiliser des balises spéciales sur Chocolatine pour faciliter l'écriture du cours.

2.1. Les images

Insérer une image avec le code :
<img src='0401_BDD_12.jpg' width='500px' subtitle="legendes" />
Vous pouvez également faire en sorte que l'image change quand on clique dessus en ajoutant le titre de la deuxième image. Les deux images s'alterneront à chaque clic.
<img src='im01.jpg' src-onclick='img02.jpg' />

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

2.2. Colorer du texte

Vous pouvez simplement colorer du 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...

2.3. Inclure des formules mathématique en LaTeX ou AsciiMath

Exemple :

	AsciiMath	LaTeX en ligne	LaTeX en bloc
Code	`3/4`	$a^{2}+2b+c=12$	`$$\sum_{1}^{10}x^{2}$$`
Résultat	$\frac{3}{4}$	$a^{2} + 2 b + c = 12$	$\sum_{1}^{10} x^{2}$

Découvrir la syntaxe AsciiMath sur asciimath.org.

2.3. Inclure un tableau en CSV

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

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

a	b	c	d
1	2	3	4

Cette balise <csv> accepte les attributs :

<csv delimiter=";"> pour modifier le délimiter de colonne
<csv no-th> pour supprimer la première ligne de titre
<csv center> pour centrer le contenu des cellules
<csv title="..."> pour ajouter un titre au dessus du tableau
<csv style="..."> pour ajouter un style CSS au tableau

2.4. Inclure un graphe en JSON

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 no-line-numbers ou sans-numeros 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 ne rendre 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 colonne sera de 3/12 de la largeur disponible.

Code	Résultat
`<py pre> a = 2 + 3 b = a*5 </py> <co></co> Bonjour !`	`a = 2 b = a*5` Bonjour !

3. Écrire en MarkDown

Consultez la page Wikipédia dédiée au langage MarkDown : fr.wikipedia.org/wiki/Markdown pour découvrir sa syntaxe.

Le code MarkDown peut contenir du HTML ou HTML augmenté qui sera également interprété.

3. Inclure des 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.