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

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ôtes à côtes

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.

Image et mode sombre

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%}

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']
```

Python Console Session

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

Dans un éditeur Python

Le code à copier

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

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

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.

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

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

Barrer des réponses fausses

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

Créer un QCM 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 ...

Créer un QCM avec validation, rechargement et score

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 ou des formules écrites en LaTex

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 fichier Markdown en cours.
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

Fichier Json utilisé pour cet exemple

Le fichier Json utilisé contient le code suivant :

qcm_exemple.json

{
  "questions": [
    [
      "```python title=\"\"\nn = 8\nwhile n > 1:\n    n = n/2\n```\n\nQue vaut `n` après l'exécution du code ?",
      [
        "0.5",
        "1.0",
        "2.0",
        "4.0"
      ],
      [2]
    ],
    [
      "`meubles = ['Table', 'Commode', 'Armoire', 'Placard', 'Buffet']`\n\nCocher toutes les bonnes réponses.",
      [
        "`meubles[-1]` vaut `'Buffet'`",
        "`meubles[1]` vaut `'Table'`",
        "`meubles[1]` vaut `'Commode'`"
      ],
      [1,3],
      {"multi":false}
    ]
  ],
  "description": "QCM Exemple",
  "shuffle": true
}

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

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_exemple.json') }}

Questions

QCM Exemple

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

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

   • 0.5

   • 1.0

   • 2.0

   • 4.0

2. meubles = ['Table', 'Commode', 'Armoire', 'Placard', 'Buffet']

   Cocher toutes les bonnes réponses.

   • meubles[-1] vaut 'Buffet'

   • meubles[1] vaut 'Table'

   • meubles[1] vaut 'Commode'

Tout sur les QCM

Documentation officielle pour les QCM

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 :

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"

    Après avoir téléchargé le fichier, vous pourrez le lire à partir de [Basthon](https://notebook.basthon.fr/){ .md-button target="_blank" rel="noopener" }

    🌐 TD à télécharger : Fichier `mon_fichier_sujet.ipynb` : ["Clic droit", puis "Enregistrer la cible du lien sous"](a_telecharger/mon_fichier_sujet.ipynb)

    ⏳ 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
🌐 Fichier `mon_fichier_corr.ipynb` : ["Clic droit", puis "Enregistrer la cible du lien sous"](a_telecharger/mon_fichier_corr.ipynb)
-->

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

Après avoir téléchargé le fichier, vous pourrez le lire à partir de Basthon

🌐 TD à télécharger : Fichier mon_fichier_sujet.ipynb : "Clic droit", puis "Enregistrer la cible du lien sous"

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

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

Le code à copier

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

    Après avoir téléchargé le fichier, vous pourrez le lire à partir de [Basthon](https://notebook.basthon.fr/){ .md-button target="_blank" rel="noopener" }

    🌐 TD à télécharger : Fichier `mon_fichier_sujet.ipynb` : ["Clic droit", puis "Enregistrer la cible du lien sous"](a_telecharger/mon_fichier_sujet.ipynb)

    🌐 Correction à télécharger : Fichier `mon_fichier_corr.ipynb` : ["Clic droit", puis "Enregistrer la cible du lien sous"](a_telecharger/mon_fichier_corr.ipynb)

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

Après avoir téléchargé le fichier, vous pourrez le lire à partir de Basthon

🌐 TD à télécharger : Fichier mon_fichier_sujet.ipynb : "Clic droit", puis "Enregistrer la cible du lien sous"

🌐 Correction à télécharger : Fichier mon_fichier_corr.ipynb : "Clic droit", puis "Enregistrer la cible du lien sous"

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 +)"

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 +

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

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

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

Bug de la version actuelle de mermaid

Depuis la version 11 mermaid met des flèches à toutes les arêtes, même avec la syntaxe A --- B

Vous pouvez recopier le code qui ne fonctionne plus ici : Lien vers Play

Il suffit ensuite de choisir "Exporter" puis "image au format SVG" dans la barre d'outil verticale à gauche. Il faut ensuite utiliser cette image (Les images au I. 4.)

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

lien vers la documentation mermaid - essais en ligne de mermaid

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