tortue avec code à copier

docs/bibs_graphiques/bib_images.md

@@ -3,22 +3,15 @@ author: Mireille Coilhac
 title: Images  en Python
 ---
 
-!!! info "Pas de bibliothèque graphique"
+!!! info "Utiliser les bibliothèques graphiques"
 
-    La version actuelle de ce site ne permet pas dans un IDE d'appeler les bibliothèques graphiques comme turtle etc.
+    Utiliser les bibliothèques graphiques n'est pas tout à fait immédiat.
 
-    ⏳ Une évolution ultérieure de Pyodide le permettra sûrement.
+    Voici deux exemples.
 
 
-!!! info "Utiliser quand même des bibliothèques graphiques"
 
-    Une façon de remédier à ce problème, est de ne pas utiliser l'IDE intégré, mais un "iframe" (souvent traduit par cadre en ligne)
-
-    ⏳ Attention, l'affichage des images peut prendre quelques instants.  
-    Pour l'utilisation en console Python, il faut cliquer sur l'icône ![image_prete](images/image_prete.png){ width=5% } lorsqu'elle clignote.
-
-
-## I. La bibliothèque matplotlib par Nicolas Revéret
+## I. Utiliser la bibliothèque matplotlib par Nicolas Revéret
 
 ```markdown title="Le code à copier"
 ??? question+ "La courbe 1 s'affiche dans une admonition sous l'éditeur"
@@ -133,9 +126,22 @@ title: Images  en Python
 
 *Crédit pour ce paragraphe sur matplotlib : Nicolas Revéret*
 
-## II. La tortue par Romain Janvier
+## II. Utiliser la tortue par Romain Janvier
+
+```markdown title="Le code à copier"
+???+ question "Utilisation de la tortue"
+
+    {% raw %}
+    {{ IDE('scripts/arbre_tortue') }}
+    {% endraw %}
+    
+    <div id="cible_3" class="admonition center" style="display: flex;justify-content: center;align-content:center;flex-direction: column;margin:auto;min-height:5em;text-align:center">
+    Le  tracé sera affiché ici
+    </div>
+```
+
 
-??? abstract "Utilisation de la tortue"
+???+ question "Utilisation de la tortue"
 
     {{ IDE('scripts/arbre_tortue') }}
     
@@ -143,5 +149,32 @@ title: Images  en Python
     Le  tracé sera affiché ici
     </div>
 
+??? note "Fichier utilisé pour cet exemple"
+
+    ```python title="arbre_tortue.py"
+    # --------- PYODIDE:env --------- #
+    from js import document
+    if "restart" in globals():
+        restart()
+
+    # --------- PYODIDE:code --------- #
+    from turtle import *
+    speed(10)
+
+    def arbre(l=100, n=5):
+        forward(l)
+        if n > 0:
+            left(45)
+            arbre(l/2, n-1)
+            right(90)
+            arbre(l/2, n-1)
+            left(45)
+        back(l)
+
+    arbre(200, 5)
+    # --------- PYODIDE:post --------- #
+    done()
+    document.getElementById("cible_3").innerHTML = svg()   
+    ```
 
 

docs/integrer_basthon/basthon.md

@@ -3,6 +3,12 @@ author: Mireille Coilhac
 title: Intégrer basthon
 ---
 
+!!! info "Utiliser quand même des bibliothèques graphiques"
+
+    Une façon d'intégrer des notebooks basthon est de les placer dans un "iframe" (souvent traduit par cadre en ligne)
+
+    ⏳ Attention, l'affichage des images peut prendre quelques instants.  
+    Pour l'utilisation en console Python, il faut cliquer sur l'icône ![image_prete](images/image_prete.png){ width=5% } lorsqu'elle clignote.
 
 ## I. Méthode utilisant le lien de partage copié sur le site basthon