Tout pour créer une page

Attention aux indentations

Les indentations de 4 espaces peuvent être réalisées dans le Web IDE en utilisant la touche de tabulation à condition d'avoir réalisé le réglage du Web IDE "Select indentation".

👉 Configuration du Web IDE

I. Syntaxe basique de Markdown

Les titres

Le code à copier

## Titre 1 : Mon titre de niveau 1

Mon paragraphe

### Titre 2 : Mon titre de niveau 2

Titre 1 : Mon titre de niveau 1

Mon paragraphe 1

Titre 2 : Mon titre de niveau 2

Mon paragraphe 2

2. Les tableaux

Il est facile de réaliser des tableaux avec Markdown, mais la présentation est basique.
Les largeurs de colonnes sont gérées automatiquement, les espaces entre les | | peuvent être aléatoires.
Il faut laisser une ligne vide avant de commencer un tableau.

Les tableaux

Le code à copier

| Titre 1  | Titre 2 | Titre 3 |
| :---    | :----:    | ---:   |
| aligné gauche   | centré  | aligné droite |
| Pomme | Brocoli | Pois |

Titre 1	Titre 2	Titre 3
aligné gauche	centré	aligné droite
Pomme	Brocoli	Pois

Pour centrer un tableau

Le code à copier

<center markdown>

| Titre 1  | Titre 2 | Titre 3 |
| :---    | :----:    | ---:   |
| aligné gauche   | centré  | aligné droite |
| Pomme | Brocoli | Pois |

</center>

Titre 1	Titre 2	Titre 3
aligné gauche	centré	aligné droite
Pomme	Brocoli	Pois

Pour des tableaux plus sophistiqués, on peut les écrire en HTML :

Les tableaux en HTML

Le code à copier

<table>
<tr>
    <td style="border:1px solid; font-weight:bold;">Poires</td>
    <td style="border:1px solid; font-weight:bold;">Pommes</td>
    <td style="border:1px solid; font-weight:bold;">Oranges</td>
    <td style="border:1px solid; font-weight:bold;">Kiwis</td>
    <td style="border:1px solid; font-weight:bold;">...</td>
</tr>
<tr>
    <td style="border:1px solid; font-weight:bold;">1 kg</td>
    <td style="border:1px solid; font-weight:bold;">2 kg</td>
    <td style="border:1px solid; font-weight:bold;">1 kg</td>
    <td style="border:1px solid; font-weight:bold;">500 g</td>
    <td style="border:1px solid; font-weight:bold;">...</td>
</tr>
</table>

Poires	Pommes	Oranges	Kiwis	...
1 kg	2 kg	1 kg	500 g	...

Pour centrer un tableau

Le code à copier

<center>
<table>
<tr>
    <td style="border:1px solid; font-weight:bold;">Poires</td>
    <td style="border:1px solid; font-weight:bold;">Pommes</td>
    <td style="border:1px solid; font-weight:bold;">Oranges</td>
    <td style="border:1px solid; font-weight:bold;">Kiwis</td>
    <td style="border:1px solid; font-weight:bold;">...</td>
</tr>
<tr>
    <td style="border:1px solid; font-weight:bold;">1 kg</td>
    <td style="border:1px solid; font-weight:bold;">2 kg</td>
    <td style="border:1px solid; font-weight:bold;">1 kg</td>
    <td style="border:1px solid; font-weight:bold;">500 g</td>
    <td style="border:1px solid; font-weight:bold;">...</td>
</tr>
</table>
</center>

Poires	Pommes	Oranges	Kiwis	...
1 kg	2 kg	1 kg	500 g	...

3. Emojis qui peuvent être utiles

🌐 👉 ⚠️ 🌵 💡 🤔 🌴 😂 🤿 😀 ✏️ 📝 😢 🐘 🖐️ 👓 👗 👖 ⌛ 😊 🖲️ 🏳️ 😴 💻 👀

4. Insérer une image

A partir de Web IDE : Créer un dossier images. Télécharger dans ce dossier les images.

Image à gauche

Le code à copier

![nom image](images/paysage_reduit.jpg){ width=20% }

Par défaut l'image est placée à gauche.

Par défaut l'image est placée à gauche.

Image à droite

Aligner une image à droite

![](images/paysage_reduit.jpg){ width=10%; align=right }

Le texte se place **à gauche** de mon image placée à droite.

Le texte se place à gauche de mon image placée à droite.

3 images côte à côte

Le code à copier

![](images/paysage_reduit.jpg){ width=5% }
![](images/paysage_reduit.jpg){ width=10% }
![](images/paysage_reduit.jpg){ width=15% }

Image centrée

Le code à copier

![paysage](images/paysage_reduit.jpg){ width=10%; : .center }

Le texte se place **en dessous** de l'image centrée.

Le texte se place en dessous de l'image centrée.

Centrer plusieurs images accolées

Le code à copier

<center markdown>
![](images/paysage_reduit.jpg){ width=5% }
![](images/paysage_reduit.jpg){ width=10% }
![](images/paysage_reduit.jpg){ width=15% }
</center>

Image et mode sombre

Vérifier votre dépôt

Pour que cela fonctionne, à la fin du fichier ajustements.css qui se trouve dans le dossier docs/xtra/stylesheets, il faut qu'il y ait les lignes suivantes :

/*
La classe .autolight appliquée aux images
renverse leur couleur en mode "dark
*/

body[data-md-color-scheme^="slate"] img.autolight {
-webkit-filter: invert(1);
filter: invert(1);
}

Tester en passant alternativiement du mode sombre au mode jour grâce à l'icône "passer en mode jour" ou "Passer au mode nuit" située en haut à droite de la page du site.

• Les images au format svg
  GeoGebra par exemple permet d'exporter des images au format svg. Ici, nous avons l'image inverse.svg dans le dossier images.
  Pour qu'elle apparaîsse correctement en mode sombre, il faut ajouter l'option .autolight

Le code à copier

![Fonction inverse](images/inverse.svg){.center .autolight width=30%}

• Les images au format png
  L'option .autolight inverse les couleurs en mode sombre.

Le code à copier

![exemple d'arbre](images/exemple_arbre.png){.center .autolight width=12%}

5. Ecriture de code

Les backticks

Nous utilisons pour cela un ou trois backticks (ou apostrophe inversée). Attention, à ne pas le confondre un backtick avec un guillemet. On le trouve généralement avec les touche ALT GR + è du clavier.

Code au fil d'un texte inline

Le code à copier

La variable `nombres` est de type `list`.

La variable nombres est de type list.

Dans une console Python

Le code à copier

```pycon
>>> nombres = [3, 8, 7]
>>> fruits = ['Poire', 'Pomme', 'Orange', 'Kiwi']
```

🐍 Console Python

>>> nombres = [3, 8, 7]
>>> fruits = ['Poire', 'Pomme', 'Orange', 'Kiwi']

Dans un éditeur Python

Le code à copier

```python
print("Hello World")
```

🐍 Script Python

print("Hello World")

Dans un éditeur Python avec numéros de lignes

Le code à copier

```python linenums='1'
a = 1
b = 2
t = b
b = a
a = t
```

a = 1
b = 2
t = b
b = a
a = t

Coloration syntaxique Python Inline

Le code à copier

Nous allons utiliser le type `#!py list` de Python

Nous allons utiliser le type list de Python

Supprimer les titres au dessus du code avec l'option title=""

Le code à copier

```python title=""
print("Hello World")
```

print("Hello World")

Le code à copier

```pycon title=""
>>> nombres = [3, 8, 7]
>>> fruits = ['Poire', 'Pomme', 'Orange', 'Kiwi']
```

>>> nombres = [3, 8, 7]
>>> fruits = ['Poire', 'Pomme', 'Orange', 'Kiwi']

Le code à copier

```python linenums='1' title=""
a = 1
b = 2
t = b
b = a
a = t
```

a = 1
b = 2
t = b
b = a
a = t

Ajouter des titres au dessus du code avec l'option title="..."

Le code à copier

```python title="Utiliser <code>print</code>"
print("Hello World")
```

Utiliser print

print("Hello World")

6. Les touches du clavier

Une première méthode pour faire apparaître des touches du clavier

Le code à copier

Nous allons utiliser la touche <kbd>%</kbd>

Nous allons utiliser la touche %

Une deuxième méthode pour faire apparaître des touches du clavier

On peut trouver beaucoup de touches ici : Touches du clavier

Voici des exemples d'utilisation :

Le code à copier

++ctrl+alt+del++

++enter++

Ctrl＋Alt＋Del

Enter

7. Des "trous dans le texte"

Les espaces

Pour faire apparaître des espaces dans un texte, mettre des espaces ne suffit pas .

Le code avec espace

Par exemple : `a == 3` est                 booléenne.

Par exemple : a == 3 est booléenne.

une possibilité pour ajouter des espaces

Le code avec espace

Par exemple : `a == 3` est $\hspace{10em}$ booléenne.

Par exemple : a == 3 est \(\hspace{10em}\) booléenne.

II. Les admonitions

Toutes les admonitions ont un titre par défaut. Pour personnaliser un titre, il suffit de le rajouter entre guillemets.

Admonition info

Le code à copier

!!! info "Mon info"

    Ma belle info qui doit être indentée

Mon info

Ma belle info qui doit être indentée

Admonition remarque

Le code à copier

!!! warning "Remarque"

    Ma remarque qui doit être indentée

Remarque

Ma remarque qui doit être indentée

Admonition remarque repliée

Le code à copier

??? warning "Remarque"

    Ma remarque qui doit être indentée

Remarque

Ma remarque qui doit être indentée

Admonition attention

Le code à copier

!!! danger "Attention"

    texte indenté   

Attention

texte indenté

Admonition attention repliée

Le code à copier

??? danger "Attention"

    texte indenté   

Attention

texte indenté

Admonition note à dérouler

Le code à copier

??? note "se déroule en cliquant dessus"

    Ma note indentée

se déroule en cliquant dessus

Ma note indentée

Admonition astuce à dérouler

Le code à copier

??? tip "Astuce"

    Ma belle astuce indentée

Astuce

Ma belle astuce indentée

Admonition résumé

Le code à copier

!!! abstract "Résumé"

    Mon bilan indenté

Résumé

Mon bilan indenté

Admonition note repliable dépliée

Le code à copier

???+ note dépliée

    Mon texte indenté

Note

Mon texte indenté

Admonition note à cliquer

Le code à copier

??? note pliée "Note à cliquer"

    Mon texte indenté qui se dévoilera après le clic  

Note à cliquer

Mon texte indenté qui se dévoilera après le clic

Admonition échec

Le code à copier

!!! failure "Echec"

    Mon texte indenté

Echec

Mon texte indenté

Admonition bug

Le code à copier

!!! bug "Bug"

    Mon texte indenté

Bug

Mon texte indenté

Admonition exemple

Le code à copier

!!! example "Exemple"

    Mon exemple indenté

Exemple

Mon exemple indenté

Admonition note dans la marge gauche

Le code à copier

!!! note inline "Note à gauche"

    Texte de la note indenté

Le texte non indenté se place à droite de la note.  
Il est en dehors de l'admonition.  
Il doit être assez long  
...

Note à gauche

Texte de la note indenté

Le texte non indenté se place à droite de la note.
Il est en dehors de l'admonition.
Il doit être assez long
...

Admonition note dans la marge droite

Le code à copier

!!! note inline end "Note à droite"

    Texte de la note indenté

Le texte non indenté se place à droite de la note.  
Il est en dehors de l'admonition.  
Il doit être assez long  
...

Note à droite

Texte de la note indenté

Le texte non indenté se place à droite de la note.
Il est en dehors de l'admonition.
Il doit être assez long
...

Admonition exercice

Voir le VI. Exercice suivi d'une solution qui se découvre en cliquant

Panneaux coulissants

Le code à copier

!!! example "Exemples avec trois panneaux"

    === "Panneau 1"
        Ici du texte concernant ce panneau 1

        Il peut prendre plusieurs lignes

    === "Panneau 2"
        Ici du texte concernant ce panneau 2

        Il peut prendre plusieurs lignes

    === "Panneau 3"
        Ici du texte concernant ce panneau 3

        Il peut prendre plusieurs lignes

        On peut aussi mettre une image : 

        ![nom image](images/paysage_reduit.jpg){ width=20% }

Exemples avec trois panneaux

Panneau 1Panneau 2Panneau 3

Ici du texte concernant ce panneau 1

Il peut prendre plusieurs lignes

Ici du texte concernant ce panneau 2

Il peut prendre plusieurs lignes

Ici du texte concernant ce panneau 3

Il peut prendre plusieurs lignes

On peut aussi mettre une image :

III. Faire des liens

Ce qui est entre crochets comme [link text] est personnalisable.

1. Liens externes

Lien externe sans bouton

Le code à copier

[Exercices Python en ligne](https://codex.forge.apps.education.fr/)

Exercices Python en ligne

Lien externe sans bouton dans une autre fenêtre

Le code à copier

[Exercices Python en ligne](https://codex.forge.apps.education.fr/){:target="_blank" }

Exercices Python en ligne

Lien externe avec bouton dans une autre fenêtre

Le code à copier

[Exercices Python en ligne](https://codex.forge.apps.education.fr/){ .md-button target="_blank" rel="noopener" }

Exercices Python en ligne

Bug avec l'utilisation du caractère _ pour l'ouverture d'un lien dans une autre fenêtre

Actuellement, l'utilisation de {:target="_blank" } ou de { .md-button target="_blank" rel="noopener" } est incompatible avec l'utilisation du caractère _ (par exemple pour écrire en italique) avant ou après le lien, s'il n'y a pas de saut de ligne.

Le code utilisé

[wikipédia](https://fr.wikipedia.org/wiki/Wikip%C3%A9dia:Accueil_principal){: target="_blank" } . Une _source_ en ligne.

wikipédia{: target="blank" } . Une _source en ligne.

Solution 1 : mettre en italique avec *

Le code utilisé avec `*` au lieu de `_`

[wikipédia](https://fr.wikipedia.org/wiki/Wikip%C3%A9dia:Accueil_principal){: target="_blank" } . 
Une *source* en ligne.

wikipédia. Une source en ligne.

Solution 2 : sauter une ligne

Le code utilisé avec ajout de ligne vide

[wikipédia](https://fr.wikipedia.org/wiki/Wikip%C3%A9dia:Accueil_principal){: target="_blank" } . 

Une _source_ en ligne.

wikipédia.

Une source en ligne.

2. Liens internes

Lien vers un article du même répertoire

Lien vers le fichier mon_article.md du même répertoire.

Le code à copier

[link text](mon_article.md)

link text

Lien vers un article du répertoire parent du répertoire courant

Lien vers le fichier mon_article.md.

Le code à copier

[Mon lien](../mon_article.md)

Mon lien

Lien vers un article d’un sous-répertoire du répertoire courant

Lien vers le fichier mon_article.md du sous-répertoire directory.

Le code à copier

[link text](directory/mon_article.md)

link text

👉 Le suivant est le seul qui fonctionne ici :

Lien vers un article d’un sous-répertoire du répertoire parent du répertoire actif

Lien vers le fichier exercices.md du sous-répertoire 03_ecrire_exos du répertoire parent du répertoire actif.

Le code à copier

[Ecrire des exercices](../03_ecrire_exos/exercices.md)

Ecrire des exercices

Lien plus précis vers un paragraphe d'un article

Il suffit de compléter le chemin. Pour ne pas se tromper, il est conseillé de recopier la fin de l'URL du rendu du paragraphe que l'on désire.

⚠️ Ne pas oublier l'extension .md de la page dans laquelle se trouve le paragraphe.

Par exemple pour faire un lien dans ce tutoriel vers le paragraphe II. de la page : Écrire des exercices Python

L'URL du rendu est : https://docs.forge.apps.education.fr/modeles/tutoriels/pyodide-mkdocs-theme-review/03_ecrire_exos/exercices/#ii-exemple-1-avec-un-ide-mais-pas-de-fichier-rem

Le code à copier

[Exemple 1 - avec un IDE mais pas de fichier REM](../03_ecrire_exos/exercices.md/#ii-exemple-1-avec-un-ide-mais-pas-de-fichier-rem)

Exemple 1 - avec un IDE mais pas de fichier REM

3. Liens de téléchargements de fichiers

Lien pour télécharger un fichier si ce n'est pas un fichier Python

Mettre le fichier donné en téléchargement dans un dossier a_telecharger. Bien indiquer le bon chemin comme dans l'exemple ci-dessous

Le code à copier

🌐 Fichier à télécharger :

Fichier `evaluation.pdf` : [Clic droit, puis "Enregistrer la cible du lien sous"](a_telecharger/evaluation.pdf)

🌐 Fichier à télécharger :

Fichier evaluation.pdf : Clic droit, puis "Enregistrer la cible du lien sous"

Lien pour télécharger un fichier si c'est un fichier Python

Modifier le fichier mkdocs.yml

Pour mettre en téléchargement le fichier hello.py, repérer vers la ligne 130 :

exclude_docs: |
**/*_REM.md
**/*.py

Compléter de la façon suivante :

exclude_docs: |
**/*_REM.md
**/*.py
!hello.py

Mettre le fichier donné en téléchargement dans un dossier a_telecharger. Bien indiquer le bon chemin comme dans l'exemple ci-dessous

Le code à copier

🌐 Fichier à télécharger :

Fichier `hello.py` : [Clic droit, puis "Enregistrer la cible du lien sous"](a_telecharger/hello.py)

🌐 Fichier à télécharger :

Fichier hello.py : Clic droit, puis "Enregistrer la cible du lien sous"

IV. Insertion de vidéo

Insérer une vidéo en ligne

Le code à copier

<video controls src="https: ..."></video>

Exemple :

Le code à copier

<video controls src="https://upload.wikimedia.org/wikipedia/commons/d/d2/See_a_Koala_scratch%2C_yawn_and_sleep.webm"></video>

_Source : Paolo Leone: https://www.youtube.com/channel/UCFRQrtHw36NNpX1oXpHMfRw, CC BY-SA 4.0 <https://creativecommons.org/licenses/by-sa/4.0>, via Wikimedia Commons_

Source : Paolo Leone: https://www.youtube.com/channel/UCFRQrtHw36NNpX1oXpHMfRw, CC BY-SA 4.0 https://creativecommons.org/licenses/by-sa/4.0, via Wikimedia Commons

👉 Il suffit le plus souvent de recopier le code qui est proposé dans "partager" et "intégrer" de la vidéo que l'on veut mettre.

Exemple d'une vidéo de Portail tubes de apps.education.fr

HTML

<iframe title="Présentation de CodiMD (et du code Markdown) en moins de 2 minutes" width="560" height="315" src="https://tube-sciences-technologies.apps.education.fr/videos/embed/5a1256f5-a3cd-4798-84f9-3dd7b8f01aac" frameborder="0" allowfullscreen="" sandbox="allow-same-origin allow-scripts allow-popups allow-forms"></iframe>

V. QCM

Créer un QCM interactif avec validation, explications, score et rechargement

Il faut créer un fichier avec l'extension .json, par exemple nommé mon_qcm.json qui contient tout le QCM avec les différentes options souhaitées.

👉 Pour créer très facilement de façon automatique ce fichier, suivre ce lien : Création de QCM : générer le fichier .json automatiquement.

👉 On peut remplir les champs en écrivant en Markdown, et donc y inclure du code, des images, des formules écrites en LaTex, des graphes ...

Les champs "Remarque" sont facultatifs. Ils peuvent contenir des explications, ou la solution. Ces champs seront révélés après la validation du QCM.

Une fois tous les champs remplis (on peut agrandir les zones d'écritures en les étirant en bas à droite), il suffit de récupérer le fichier fourni grâce aux deux boutons situés en bas.

Le fichier doit ensuite être placé dans le répertoire du fichier markdown où l'on veut insérer le QCM (ou dans un sous-répertoire), et il suffira alors d'ajouter la macro suivante au fichier markdown :

Le code à copier

{{ multi_qcm('mon_qcm.json') }}

👉 Le chemin vers le fichier .json dans l’appel de macro est relatif au dossier contenant le fichier markdown.
Par exemple si le fichier json se trouve dans le sous-dossier ./qcms/mon_qcm.json, mettre :

Le code à copier

{{ multi_qcm('qcms/mon_qcm.json') }}

Un exemple

Le fichier Json présenté ci-dessous a été généré avec l'outil en ligne de la documentation de Pyodide-MkDocs-Theme, en remplissant les champs comme ceci :

Détails de l'utilisation de l'outil

Question 1

Question 2

Question 3

Question 4

Question 5

Options

Fichier Json généré automatiquement par l'outil en ligne et utilisé pour cet exemple

Le fichier Json utilisé contient le code suivant :

qcm_tuto.json

{
"questions": [
    [
    "Qui est représenté sur cette image ?\n\n![Ada Lovelace](images/Ada_lovelace.jpg){ width=20% }\n\n_Attribution : Alfred Edward Chalon, Public domain, via Wikimedia Commons_",
    [
        "Ada Lovelace",
        "Marie Curie",
        "Rosalind Franklin",
        "Katherine Johnson"
    ],
    [1]
    ],
    [
    "Résoudre l'équation $x^2 = 16$.",
    [
        "Il y a une seule solution $x=4$",
        "Il y a deux solutions $x=4$ et $x=-4$",
        "Il y a une seule solution $x=8$"
    ],
    [2],
    "* $4^2=16$ et $(-4)^2=16$\n* $8^2=64$"
    ],
    [
    "On donne le graphe suivant : \n\n```mermaid\n    graph LR\n        A --- |1| B\n        B --- |5| C\n        A --- |5| D\n        B --- |1| D\n        D --- |1| C\n        A --- |50| C\n```\n\nQuel est le plus court chemin entre A et C en terme de coût ?",
    [
        "A-B-C",
        "A-B-D-C",
        "A-C"
    ],
    [2],
    "A-B-C a un coût de 6, A-B-D-C a un coût de 3 et A-C a un coût de 50."
    ],
    [
    "```python title=\"\"\nn = 8\nwhile n > 1:\n    n = n/2\n```\n\nQue vaut `n` après l'exécution du code ?\n",
    [
        "0.5",
        "1",
        "2",
        "4"
    ],
    [2]
    ],
    [
    "On donne le graphe suivant :\n\n```mermaid\n    graph TD\n    D(Henri IV)\n    E(Maria de Medicis)\n    F(Felipe III d'Espagne)\n    G(Margareta d'Autriche)\n    B(Louis XIII)\n    C(Anna d'Autriche)\n    A(Louis XIV)\n    D --- B\n    E --- B\n    F --- C\n    G --- C\n    B --- A\n    C --- A\n```\n\nQuelles sont les affirmations exactes ?\"",
    [
        "Henri IV est un grand père de Louis XIV.",
        "Maria de Medicis est la mère de Louis XIV.",
        "Anna d'Autriche est la mère de Louis XIV."
    ],
    [1,3],
    {"multi":true}
    ]
],
"description": "questions variées pour un exemple de QCM",
"shuffle_items": true
}

Une fois le fichier placé dans le répertoire du fichier Markdown, le QCM est inséré dans la page avec l'appel suivant :

Le code à copier

{{ multi_qcm('qcm_tuto.json') }}

Questions

questions variées pour un exemple de QCM

1. Qui est représenté sur cette image ?

   

   Attribution : Alfred Edward Chalon, Public domain, via Wikimedia Commons

   • Ada Lovelace

   • Marie Curie

   • Rosalind Franklin

   • Katherine Johnson

2. Résoudre l'équation \(x^2 = 16\).
   • Il y a une seule solution \(x=4\)

   • Il y a deux solutions \(x=4\) et \(x=-4\)

   • Il y a une seule solution \(x=8\)

   Remarque

   .t^xs1 2nar46ium)c-h8e/lp=(050n0w0406050w0m04050d0x0i0h0f0q0w0i0d0d0y010i0j0m0a0s0o0i0a0u0c0104090z0k0b0g0y0e0l090p050v0K0M040f0u0a0f0J0L0N0P0R0T0V0X0Z0#0%0)0+0z0z0r0k0p0/0;0?0^0`130I0v0G0D0F0H120M0O0Q0S0U0W0Y0!0$0(0*0,0t1k0l0k0@0_0{0h1q1s0E0v0B04.
3. On donne le graphe suivant :

       graph LR
           A --- |1| B
           B --- |5| C
           A --- |5| D
           B --- |1| D
           D --- |1| C
           A --- |50| C

   Quel est le plus court chemin entre A et C en terme de coût ?

   • A-B-C

   • A-B-D-C

   • A-C

   Remarque

   .to5D0B ûnAad6Cu,3c-e/p.050v040j0s0f0s0n0g0k0g0o0i0g0r0b0h0a0g0l0t0g0m0p0g0A0C0d0D0F0H0J0L0N0P0R0q0g0t0O0A0E0G0I0K0M0O0Q0g0c0e0w050u0y.

4. n = 8
   while n > 1:
       n = n/2
   

   Que vaut n après l'exécution du code ?

   • 0.5

   • 1

   • 2

   • 4

5. On donne le graphe suivant :

       graph TD
       D(Henri IV)
       E(Maria de Medicis)
       F(Felipe III d'Espagne)
       G(Margareta d'Autriche)
       B(Louis XIII)
       C(Anna d'Autriche)
       A(Louis XIV)
       D --- B
       E --- B
       F --- C
       G --- C
       B --- A
       C --- A

   Quelles sont les affirmations exactes ?"

   • Henri IV est un grand père de Louis XIV.

   • Maria de Medicis est la mère de Louis XIV.

   • Anna d'Autriche est la mère de Louis XIV.

Attention aux réponses

Lors de la création du QCM avec l'outil en ligne, il ne faut pas oublier de cocher la ou les bonnes réponses, sinon le pipeline sera mis en échec.

Attention pour les images

Lorsqu'une image est utilisée, il faut absolument donner l'option de sa taille avec le % comme par exemple { width=50% }. Si cette option n'est pas indiquée le rendu du QCM sur smartphone ou tablette risque de ne pas être correct.

Tout sur les QCM

Documentation officielle pour les QCM

Barrer des réponses fausses

Mettre un texte entre ~~ et ~~ permet de le barrer.

Créer un QCM non interactif avec des volets

Le code à copier

???+ question

    Voici diverses propositions

    === "Cocher la ou les affirmations correctes"

        - [ ] Proposition 1
        - [ ] Proposition 2
        - [ ] Proposition 3
        - [ ] Proposition 4

    === "Solution"

        - :x: ~~Proposition 1~~ Optionnel : Faux car ... 
        - :white_check_mark: Proposition 2 . Optionnel : Juste car ...
        - :white_check_mark: Proposition 3 . Optionnel : Juste car ...
        - :x: ~~Proposition 4~~ Optionnel : Faux car ... 

Question

Voici diverses propositions

Cocher la ou les affirmations correctesSolution

• Proposition 1
• Proposition 2
• Proposition 3
• Proposition 4

• Proposition 1 Optionnel : Faux car ...
• Proposition 2 . Optionnel : Juste car ...
• Proposition 3 . Optionnel : Juste car ...
• Proposition 4 Optionnel : Faux car ...

VI. Exercice suivi d'une solution qui se découvre en cliquant

1. Exercice sans code

Exercice sans code Python

Le code à copier

???+ question "Mon exercice"

    **1.** Question 1.   
    Texte de la question indenté

    ??? success "Solution"

        Ici se trouve la solution rédigée de la question 1.
        Le texte doit être indenté dans cette nouvelle admonition

    **2.** Question 2.   
    Texte de la question indenté

    ??? success "Solution"

        Ici se trouve la solution rédigée de la question 2.
        Le texte doit être indenté dans cette nouvelle admonition

Mon exercice

1. Question 1.
Texte de la question indenté

Solution

Ici se trouve la solution rédigée de la question 1. Le texte doit être indenté dans cette nouvelle admonition

2. Question 2.
Texte de la question indenté

Solution

Ici se trouve la solution rédigée de la question 2. Le texte doit être indenté dans cette nouvelle admonition

2. Exercice avec code : un tout premier exemple

Un IDE avec du code à compléter

Le code à copier

???+ question

    Compléter le script ci-dessous :
    Mettre le fichier python dans un dossier scripts


    {{ IDE('scripts/mon_fichier') }}


    ??? success "Solution"

        On peut donner la solution sous forme de code à copier :
        ```python
        # Code de la solution
        ```       

Question

Compléter le script ci-dessous : Mettre le fichier python dans un dossier scripts

###(Dés-)Active le code après la ligne # Tests (insensible à la casse)
(Ctrl+I)

Entrer ou sortir du mode "deux colonnes"
(Alt+: ; Ctrl pour inverser les colonnes)

Entrer ou sortir du mode "plein écran"
(Esc)

Tronquer ou non le feedback dans les terminaux (sortie standard & stacktrace / relancer le code pour appliquer)

Si activé, le texte copié dans le terminal est joint sur une seule ligne avant d'être copié dans le presse-papier

Exécuter le code
(Ctrl+S)TéléchargerTéléverserRéinitialiser l'éditeurSauvegarder dans le navigateur

Solution

On peut donner la solution sous forme de code à copier :

🐍 Script Python

# Code de la solution

3. D'autres exemples

Pour en savoir plus, voir la rubrique Ecrire des exercices

Vous y trouverez des exemples d'exercices avec des réponses dans des IDE, qui peuvent s'afficher après plusieurs tentatives de l'élève, et plein d'autres possibilités.

VII. Notebooks pythons : sujet à télécharger et corrections cachées ou visibles

On peut évidemment mettre en ligne un Notebook Python, et faire travailler les élèves dessus.

Mettre le fichier mon_fichier_sujet.ipynb dans un dossier a_telecharger. Bien indiquer le bon chemin comme dans l'exemple ci-dessous

Mon sujet sur notebook à télécharger avec correction cachée

Le code à copier

???+ question "Mon sujet sur notebook à télécharger avec correction cachée"

    [Sujet du TP](https://notebook.basthon.fr/?from={{ page.canonical_url }}../a_telecharger/mon_fichier_sujet.ipynb){ .md-button target="_blank" rel="noopener" }

    ⏳ La correction viendra bientôt ... 

<!-- La correction à télécharger plus tard A SORTIR DE L'ADMONITION
👉 Bien sortir ce commentaire de l'admonition en supprimant l'indentation

[Correction du TP](https://notebook.basthon.fr/?from={{ page.canonical_url }}../a_telecharger/mon_fichier_corr.ipynb){ .md-button target="_blank" rel="noopener" }
-->

Mon sujet sur notebook à télécharger avec correction cachée

Sujet du TP

⏳ La correction viendra bientôt ...

Si l'on veut dévoiler la correction, il suffit de supprimer la syntaxe qui la cachait dans un commentaire, et de rétablir l'indentation si elle se trouve dans une admonition.

Mon sujet sur notebook à télécharger avec correction visible

Le code à copier

???+ question "Mon sujet sur notebook à télécharger avec correction visible"

    [Sujet du TP](https://notebook.basthon.fr/?from={{ page.canonical_url }}../a_telecharger/mon_fichier_sujet.ipynb){ .md-button target="_blank" rel="noopener" }

    😊 La correction est arrivée ...

    [Correction du TP](https://notebook.basthon.fr/?from={{ page.canonical_url }}../a_telecharger/mon_fichier_corr.ipynb){ .md-button target="_blank" rel="noopener" }

Mon sujet sur notebook à télécharger avec correction cachée

Sujet du TP

😊 La correction est arrivée ...

Correction du TP

VIII. Exercices en lignes

Utiliser un lien

Il existe beaucoup d'exercices en ligne, il suffit de donner le lien (par exemple sur le site CodEx )

Bouton de lien vers un exercice

Le code à copier

???+ question "Lectures dans deux tableaux (1) - non guidé"

    Les éléments d'un tableau sont-ils tous différents ?

    [Éléments tous différents](https://codex.forge.apps.education.fr/exercices/tous_differents/){ .md-button target="_blank" rel="noopener" }

Lectures dans deux tableaux (1) - non guidé

Les éléments d'un tableau sont-ils tous différents ?

Éléments tous différents

Intégrer un exercice directement dans le site

Le site WIMS met à disposition beaucoup de ressources interactives dans de nombreux domaines : Biologie, Chimie, Informatique, Langues, Mathématiques, Physique, et autres domaines encore (disciplines artistiques, Géographie, Sciences de la terre, Histoire, Sciences, Ecogestion, Éducation physique, Astronomie, Sciences et techniques industrielles)

Contenu pédagogique de WIMS

Chercher un exercice WIMS

En regardant les thèmes proposés

• Suivre le lien suivant : Contenu pédagogique de WIMS
• Sélectionner l'onglet voulu
• Cliquer sur le thème choisi puis descendre au bas de la page et explorer ce qui est proposé dans l'onglet "Modules d'exercices"

En utilisant la barre de recherche

• Suivre le lien suivant : Recherche dans WIMS
• Descendre au bas de la page. En dessous des cadres "Actualités-Exemples", compléter la barre de recherche.

• Les résultats apparaîssent en bas de page.

Intégrer un exercice dans votre site

• Cliquer sur un module d'exercices dans l'onglet "Modules d'exercices".
• Dans le cadre "Choix des exercices", cliquer sur l'exercice voulu. On intègre dans le site un seul exercice à la fois.
• Modifier si nécessaire les paramétrages proposés en dessous.
• Tout en bas Cliquer sur le bouton Au travail.
• La page de l'exercice choisi apparaît. En haut à gauche cliquer sur "À propos".

• Dans la colonne de gauche du cadre "Informations sur cet exercice", à la ligne "Lecteur exportable" , recopier tout ce qui se trouve dans le paragraphe : "Afficher la config actuelle sur un site / un blog ("light" version):"

Exemple d'exercice sur les listes en Python

Le code à copier

<iframe src="https://euler-ressources.ac-versailles.fr/wims/wims.cgi?module=adm/raw&job=lightpopup&emod=H4/algo/oefpython.fr&parm=cmd=new;exo=liste_ind_val2;qnum=1;scoredelay=;seedrepeat=0;qcmlevel=1&option=noabout" width="100%" height="600"></iframe>

Documentation officielle de WIMS

IX. Ecriture de code : compléments

Annotations première présentation

Attention

Bien veiller à mettre une ligne vide après la balise fermante ``` et avant les annotations numérotées

L'exemple suivant est donné avec Python, mais peut servir avec n'importe quel langage (avec html par exemple)

Le code à copier

```python 
note = float(input("Saisir votre note : "))
if note >= 16:  # (1)
    print("TB")
elif note >= 14:  # (2)
    print("B")
elif note >= 12:  # (3)
    print("AB")
elif note >= 10:
    print("reçu")
else:
    print("refusé")
```

1. :warning: Le caractère `#!py :` est **obligatoire** après `if`, `elif`, `else`, `for` et `while`. Il provoque l'indentation automatique du bloc d'instruction qui suit.

2. :warning: `elif` signifie **sinon si**.

3. :warning: Le caractère `#!py :` est **obligatoire** après `if`, `elif`, `else`, `for` et `while`. Il provoque l'indentation automatique du bloc d'instruction qui suit.

!!! warning "Prenez le temps de lire les commentaires (cliquez sur les +)"

🐍 Script Python

note = float(input("Saisir votre note : "))
if note >= 16:  # (1)
    print("TB")
elif note >= 14:  # (2)
    print("B")
elif note >= 12:  # (3)
    print("AB")
elif note >= 10:
    print("reçu")
else:
    print("refusé")

1. Le caractère : est obligatoire après if, elif, else, for et while. Il provoque l'indentation automatique du bloc d'instruction qui suit.

2. elif signifie sinon si.

3. Le caractère : est obligatoire après if, elif, else, for et while. Il provoque l'indentation automatique du bloc d'instruction qui suit.

Prenez le temps de lire les commentaires (cliquez sur les +)

Annotations autre présentation

Le code à copier

!!! warning inline end "Important"

    Prenez le temps de lire les commentaires !

    Cliquez sur les +


```python
    note = float(input("Saisir votre note : "))
    if note >= 16:  # (1)
        print("TB")
    elif note >= 14:  # (2)
        print("B")
    elif note >= 12:  # (3)
        print("AB")
    elif note >= 10:
        print("reçu")
    else:
        print("refusé")
```

1. :warning: Le caractère `#!py :` est **obligatoire** après `if`, `elif`, `else`, `for` et `while`. Il provoque l'indentation automatique du bloc d'instruction qui suit.

2. :warning: `elif` signifie **sinon si**.

3. :warning: Le caractère `#!py :` est **obligatoire** après `if`, `elif`, `else`, `for` et `while`. Il provoque l'indentation automatique du bloc d'instruction qui suit.

Important

Prenez le temps de lire les commentaires !

Cliquez sur les +

🐍 Script Python

    note = float(input("Saisir votre note : "))
    if note >= 16:  # (1)
        print("TB")
    elif note >= 14:  # (2)
        print("B")
    elif note >= 12:  # (3)
        print("AB")
    elif note >= 10:
        print("reçu")
    else:
        print("refusé")

1. Le caractère : est obligatoire après if, elif, else, for et while. Il provoque l'indentation automatique du bloc d'instruction qui suit.

2. elif signifie sinon si.

3. Le caractère : est obligatoire après if, elif, else, for et while. Il provoque l'indentation automatique du bloc d'instruction qui suit.

Surlignage de lignes de code

Vous pouvez surligner des lignes, consécutives ou non, en couleur.

Le code à copier

```python hl_lines="1 3-5"
def trouve_max(tableau):
    maximum = tableau[0]
    for valeur in tableau:
        if valeur > maximum:
            maximum = valeur
    return maximum
```

🐍 Script Python

def trouve_max(tableau):
    maximum = tableau[0]
    for valeur in tableau:
        if valeur > maximum:
            maximum = valeur
    return maximum

X. Les arbres

Il suffit de numéroter les noeuds : n0, n1, n2 etc. avec les étiquettes entre parenthèses, et les flèches pour les arcs entre les noeuds. En 1er à gauche.

Un arbre

Le code à copier

```mermaid
    %%{init: {'themeVariables': {'fontFamily': 'monospace'}}}%%
    flowchart TB
        n0(15) --> n1(6)
        n1 --> n3(1)
        n1 --> n4(10)
        n0 --> n2(30)
        n2 --> n8[Null]
        n2 --> n5(18)
        n5 --> n6(16)
        n5 --> n7(25)
```

    %%{init: {'themeVariables': {'fontFamily': 'monospace'}}}%%
    flowchart TB
        n0(15) --> n1(6)
        n1 --> n3(1)
        n1 --> n4(10)
        n0 --> n2(30)
        n2 --> n8[Null]
        n2 --> n5(18)
        n5 --> n6(16)
        n5 --> n7(25)

Arbres avec certains nœuds absents

Voir l'exemple qui suit :

• On numérote l'arc à ne pas représenter (le 1er est le numéro 0), et on utilise par exemple pour le numéro 3 la syntaxe :
  linkStyle 3 stroke-width:0px;
• On met les nœuds vides avec opacity:0 :
  style E opacity:0;

Des nœuds absents mais leur espace conservé

Le code à copier

```mermaid
flowchart TD
    A(12) --- B(10)
    A --- C(15)
    B --- D(5)
    B --- E( )
    D --- F(4)
    D --- G(8)
    C --- H( )
    C --- I(20)
    linkStyle 3 stroke-width:0px;
    linkStyle 6 stroke-width:0px;
    style E opacity:0;
    style H opacity:0;
```

flowchart TD
    A(12) --- B(10)
    A --- C(15)
    B --- D(5)
    B --- E( )
    D --- F(4)
    D --- G(8)
    C --- H( )
    C --- I(20)
    linkStyle 3 stroke-width:0px;
    linkStyle 6 stroke-width:0px;
    style E opacity:0;
    style H opacity:0;

Placement des nœuds définis

Dans le cas des arbres binaires de recherche par exemple, on a besoin que les nœuds soient représentés dans un ordre bien précis. Il suffit pour cela de les donner dans le code mermaid dans l'ordre de ce qui serait le parcours en largeur de l'arbre (par niveau).

Le code à copier

```mermaid
graph TD
A(5)
B(2)
C(8)
F( )
G( )
D(6)
E(9)
H( )
I( )
J( )
K( )
A --> B
A --> C
C --> D
C --> E
B --> F
B --> G
D --> H
D --> I
E --> J
E --> K
```

graph TD
A(5)
B(2)
C(8)
F( )
G( )
D(6)
E(9)
H( )
I( )
J( )
K( )
A --> B
A --> C
C --> D
C --> E
B --> F
B --> G
D --> H
D --> I
E --> J
E --> K

Lien vers différentes options de nœuds et flèches

lien vers la documentation mermaid - essais en ligne de mermaid

Un arbre horizontal

Le code à copier

```mermaid
graph LR
    A( )
    B(0)
    C(1)
    D(0)
    E(1)
    F(0)
    G(1)
    A --- B
    A --- C
    B --- D
    B --- E
    C --- F
    C --- G
```

graph LR
    A( )
    B(0)
    C(1)
    D(0)
    E(1)
    F(0)
    G(1)
    A --- B
    A --- C
    B --- D
    B --- E
    C --- F
    C --- G

Un arbre horizontal avec des formules de mathématiques

Il suffit d'écrire les formules en LaTex à l'intérieur de "$$...$$"

Le code à copier

```mermaid
graph LR
    O( )
    A(A)
    B(B)
    C(C)
    E(X)
    F(Y)
    G(X)
    H(Y)
    I(X)
    J(Y)
    O --- |"$$P(A)$$"| A 
    O --- |"$$P(B)$$"| B
    O --- |"$$P(C)$$"| C
    A --- |"$$P_{A}(X)$$"| E
    A --- |"$$P_{A}(Y)$$"| F
    B --- |"$$P_{B}(X)$$"| G
    B --- |"$$P_{B}(Y)$$"| H
    C --- |"$$P_{C}(X)$$"| I
    C --- |"$$P_{C}(Y)$$"| J
```

graph LR
    O( )
    A(A)
    B(B)
    C(C)
    E(X)
    F(Y)
    G(X)
    H(Y)
    I(X)
    J(Y)
    O --- |"$$P(A)$$"| A 
    O --- |"$$P(B)$$"| B
    O --- |"$$P(C)$$"| C
    A --- |"$$P_{A}(X)$$"| E
    A --- |"$$P_{A}(Y)$$"| F
    B --- |"$$P_{B}(X)$$"| G
    B --- |"$$P_{B}(Y)$$"| H
    C --- |"$$P_{C}(X)$$"| I
    C --- |"$$P_{C}(Y)$$"| J

Un arbre horizontal avec des formules de mathématiques dans les nœuds

Il suffit d'écrire les formules en LaTex à l'intérieur de "$$...$$"

Le code à copier

```mermaid
graph LR
    0( )
    1("$$A$$")
    2("$$\overline{A}$$")
    3("$$B$$")
    4("$$\overline{B}$$")
    5("$$B$$")
    6("$$\overline{B}$$")
    0 --- |"0,1"| 1
    0 --- |"0,9"| 2
    1 --- 3
    1 --- 4
    2 --- 5
    2 --- 6
```

graph LR
    0( )
    1("$$A$$")
    2("$$\overline{A}$$")
    3("$$B$$")
    4("$$\overline{B}$$")
    5("$$B$$")
    6("$$\overline{B}$$")
    0 --- |"0,1"| 1
    0 --- |"0,9"| 2
    1 --- 3
    1 --- 4
    2 --- 5
    2 --- 6

Créer des graphes ou des arbres très facilement avec algographe

Le site créé par Frédéric Zinelli permet facilement de créer des graphes ou des arbres.

L'outil algographe en ligne

La documentation de l'outil algographe

XI. Les graphes

graphe orienté

Le code à copier

```mermaid
    graph LR
    A[texte 1] ----> |50| C[texte 2];
    A -->|1| B[B];
```

    graph LR
    A[texte 1] ----> |50| C[texte 2];
    A -->|1| B[B];

graphe orienté horizontal

Le code à copier

```mermaid
    graph LR
        A[Editeur de texte PHP] --> C[Serveur Apache]
        C --> B[Navigateur]
```

    graph LR
        A[Editeur de texte PHP] --> C[Serveur Apache]
        C --> B[Navigateur]

graphe non orienté

Le code à copier

```mermaid
    graph LR
        A --- |1| B
        B --- |5| C
        A --- |5| D
        B --- |1| D
        D --- |1| C
        A --- |50| C
```

    graph LR
        A --- |1| B
        B --- |5| C
        A --- |5| D
        B --- |1| D
        D --- |1| C
        A --- |50| C

graphe orienté avec des nœuds circulaires ou carrés

Le code à copier

```mermaid
    graph LR
        A[Fichier] --> D((D))
        D --> C[Clavier]
        C --> B((B))
        B --> A
```

    graph LR
        A[Fichier] --> D((D))
        D --> C[Clavier]
        C --> B((B))
        B --> A

Lien vers différentes options de nœuds et flèches

lien vers la documentation mermaid - essais en ligne de mermaid

Créer des graphes ou des arbres très facilement avec algographe

Le site créé par Frédéric Zinelli permet facilement de créer des graphes ou des arbres.

L'outil algographe en ligne

La documentation de l'outil algographe

XII. Les classes

Une classe

Le code à copier

```mermaid
    classDiagram
    class Yaourt{
        str arome
        int duree
        str genre
        __init__(arome,duree)
        modifie_duree(duree)
        modifie_arome(arome)
    }
```

    classDiagram
    class Yaourt{
        str arome
        int duree
        str genre
        __init__(arome,duree)
        modifie_duree(duree)
        modifie_arome(arome)
    }

lien vers la documentation mermaid - essais en ligne de mermaid

XIII. Masquer le menu latéral

Masquer le menu latéral sur une page

Pour masquer le menu latéral, et ainsi gagner de la place en largeur, il suffit de compléter l'en-tête de la page comme par exemple ci-dessous.

Le code à copier

---
author: Votre nom
title: Ma page
hide:
    - navigation
    - toc
---

Un exemple ici : Une page avec menu latéral caché