Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen der Seite angezeigt.

Link zu der Vergleichsansicht

Beide Seiten, vorherige Überarbeitung Vorherige Überarbeitung
Nächste Überarbeitung		 Vorherige Überarbeitung
user:hof:pyeditor [2026-04-13 11:32] – [Exercises] hofuser:hof:pyeditor [2026-04-24 14:29] (aktuell) – hof
Zeile 1: Zeile 1:
 # Bottom Python Editor # Bottom Python Editor
-<html><script type="module" src="https://bottom.ch/editor/latest/bottom-exercise.js"></script></html> 
  
 Bottom Editor offers a standalone editor version at [[https://bottom.ch/editor/]] and a web component embeddable as normal HTML elements after loading the module once. See the [[https://bottom.ch/editor/stable/doc/|public documentation]] for all options. Bottom Editor offers a standalone editor version at [[https://bottom.ch/editor/]] and a web component embeddable as normal HTML elements after loading the module once. See the [[https://bottom.ch/editor/stable/doc/|public documentation]] for all options.
  
 Also see [[~kara]] for a Kara shim on top of bottom-editor. Also see [[~kara]] for a Kara shim on top of bottom-editor.
- 
 ## Basic Usage ## Basic Usage
 +
 +### Direct HTML
 +Requires HTML-authoring (which may be a security risk with broad authorship).
  
 Within Dokuwiki, the HTML needs to be embedded into `<html>` tags for verbatim HTML. Within Dokuwiki, the HTML needs to be embedded into `<html>` tags for verbatim HTML.
Zeile 20: Zeile 21:
 </bottom-editor></html> </bottom-editor></html>
 </code> </code>
 +
 +### With Plugin
 +To avoid needing raw trusted HTML access, install the [[https://www.dokuwiki.org/plugin:bottomeditor|bottomeditor plugin]] and create editors without `<html>`:
 +
 +<code html>
 +<bottom-editor style="min-height: 6lh;" autorun>
 +print(42)
 +</bottom-editor>
 +</code>
 +
  
 ## Shared Sessions ## Shared Sessions
 By default, all editors on a page share a single python runtime. Functions defined in one execution are available in all editors afterwards, similar to jupyter notebooks. If you want an editor to have a separate python runtime, use the `session` attribute: By default, all editors on a page share a single python runtime. Functions defined in one execution are available in all editors afterwards, similar to jupyter notebooks. If you want an editor to have a separate python runtime, use the `session` attribute:
 <code html> <code html>
-<html><bottom-editor session="one" autorun>+<bottom-editor session="one" autorun>
 def greet(name): def greet(name):
     print(f'Hi, {name}!')     print(f'Hi, {name}!')
-</bottom-editor></html>+</bottom-editor>
  
-<html><bottom-editor session="one" autorun>+<bottom-editor session="one" autorun>
 greet('Harry') # works greet('Harry') # works
-</bottom-editor></html>+</bottom-editor>
  
-<html><bottom-editor session="two" autorun>+<bottom-editor session="two" autorun>
 greet('Harry') # fails greet('Harry') # fails
-</bottom-editor></html>+</bottom-editor>
 </code> </code>
  
-<html><bottom-editor session="one" autorun>+<bottom-editor session="one" autorun>
 def greet(name): def greet(name):
     print(f'Hi, {name}!')     print(f'Hi, {name}!')
-</bottom-editor></html>+</bottom-editor>
  
-<html><bottom-editor session="one" autorun>+<bottom-editor session="one" autorun>
 greet('Harry') # works greet('Harry') # works
-</bottom-editor></html>+</bottom-editor>
  
- +<bottom-editor session="two" autorun>
-<html><bottom-editor session="two" autorun>+
 greet('Harry') # fails greet('Harry') # fails
-</bottom-editor></html>+</bottom-editor>
  
  
Zeile 57: Zeile 67:
  
 <code html> <code html>
-<html><bottom-editor layout="canvas" autorun>+<bottom-editor layout="canvas" autorun id="turtle">
 import turtle import turtle
  
Zeile 67: Zeile 77:
     t.forward(i * 0.5)     t.forward(i * 0.5)
     t.left(59)     t.left(59)
-</bottom-editor></html>+</bottom-editor>
 </code> </code>
  
-<html><bottom-editor layout="canvas" autorun>+<bottom-editor layout="canvas" autorun id="turtle">
 import turtle import turtle
  
Zeile 80: Zeile 90:
     t.forward(i * 0.5)     t.forward(i * 0.5)
     t.left(59)     t.left(59)
-</bottom-editor></html>+</bottom-editor>
  
 ## Matplotlib ## Matplotlib
Zeile 86: Zeile 96:
  
 <code html> <code html>
-<html><bottom-editor layout="canvas" autorun>+<bottom-editor layout="canvas" autorun id="matplotlib">
 # Load packages from within python using micropip # Load packages from within python using micropip
 import micropip import micropip
Zeile 102: Zeile 112:
 plt.tight_layout() plt.tight_layout()
 plt.show() plt.show()
-</bottom-editor></html>+</bottom-editor>
 </code> </code>
  
-<html><bottom-editor layout="canvas" autorun>+<bottom-editor layout="canvas" autorun id="matplot">
 # Load packages from within python using micropip # Load packages from within python using micropip
 import micropip import micropip
Zeile 121: Zeile 131:
 plt.tight_layout() plt.tight_layout()
 plt.show() plt.show()
-</bottom-editor></html>+</bottom-editor>
  
 ## OpenCV ## OpenCV
Zeile 127: Zeile 137:
  
 <code html> <code html>
-<html><bottom-editor layout="canvas" autorun>+<bottom-editor layout="canvas" autorun id="opencv">
 # Load packages from within python using micropip # Load packages from within python using micropip
 import micropip import micropip
Zeile 144: Zeile 154:
 cv2.putText(img, 'OpenCV', (75, 160), cv2.FONT_HERSHEY_SIMPLEX, 1, (255,255,255), 2) cv2.putText(img, 'OpenCV', (75, 160), cv2.FONT_HERSHEY_SIMPLEX, 1, (255,255,255), 2)
 cv2.imshow('result', img) cv2.imshow('result', img)
-</bottom-editor></html>+</bottom-editor>
 </code> </code>
  
-<html><bottom-editor layout="canvas" autorun>+<bottom-editor layout="canvas" autorun id="opencv">
 # Load packages from within python using micropip # Load packages from within python using micropip
 import micropip import micropip
Zeile 164: Zeile 174:
 cv2.putText(img, 'OpenCV', (75, 160), cv2.FONT_HERSHEY_SIMPLEX, 1, (255,255,255), 2) cv2.putText(img, 'OpenCV', (75, 160), cv2.FONT_HERSHEY_SIMPLEX, 1, (255,255,255), 2)
 cv2.imshow('result', img) cv2.imshow('result', img)
-</bottom-editor></html>+</bottom-editor>
  
 ## Installing files ## Installing files
Zeile 170: Zeile 180:
  
 <code html> <code html>
-<html><bottom-editor zip='https://bottom.ch/ksr/py/files/2m.zip'>+<bottom-editor zip='https://bottom.ch/ksr/py/files/2m.zip' id="zip">
 with open('gemeinden.csv', 'r') as infile: with open('gemeinden.csv', 'r') as infile:
     for line in infile:     for line in infile:
Zeile 177: Zeile 187:
         if town == 'Romanshorn':         if town == 'Romanshorn':
             print(f'Romanshorn hat {tokens[2]} Einwohner')             print(f'Romanshorn hat {tokens[2]} Einwohner')
-</bottom-editor></html>+</bottom-editor>
 </code> </code>
  
-<html><bottom-editor zip='https://bottom.ch/ksr/py/files/2m.zip'>+<bottom-editor zip='https://bottom.ch/ksr/py/files/2m.zip' id="zip">
 with open('gemeinden.csv', 'r') as infile: with open('gemeinden.csv', 'r') as infile:
     for line in infile:     for line in infile:
Zeile 187: Zeile 197:
         if town == 'Romanshorn':         if town == 'Romanshorn':
             print(f'Romanshorn hat {tokens[2]} Einwohner')             print(f'Romanshorn hat {tokens[2]} Einwohner')
-</bottom-editor></html>+</bottom-editor> 
 ## Exercises ## Exercises
  
 <code html> <code html>
-<html><script type="module" src="https://bottom.ch/editor/latest/bottom-exercise.js"></script></html> +<bottom-exercise id="sum-to_n"> 
-<html><bottom-exercise> +            Write a function <tt>sum_to(n)</tt> that returns
-            <p>Write a function <tt>sum_to(n)</tt> that returns+
             <tt>1 + 2 + &hellip; + n</tt>. Return <tt>0</tt> for             <tt>1 + 2 + &hellip; + n</tt>. Return <tt>0</tt> for
-            <tt>n &le; 0</tt>.</p>+            <tt>n &le; 0</tt>.
         <script type="text/x-starter">         <script type="text/x-starter">
 def sum_to(n): def sum_to(n):
Zeile 205: Zeile 215:
 assert sum_to(0) == 0, "sum_to(0) should be 0" assert sum_to(0) == 0, "sum_to(0) should be 0"
         </script>         </script>
-</bottom-exercise></html>+        <script type="text/x-solution"> 
 +def sum_to(n): 
 +    return sum(range(n+1)) 
 +        </script>         
 +</bottom-exercise>
 </code> </code>
  
-<html><bottom-exercise> +<bottom-exercise id="sum-to_n"> 
-        <div slot="prompt"> +            Write a function <tt>sum_to(n)</tt> that returns 
-            <p>Write a function <code>sum_to(n)</tt> that returns +            <tt>1 + 2 + &hellip; + n</tt>. Return <tt>0</tt> for 
-            <tt>1 + 2 + &hellip; + n</code>. Return <tt>0</tt> for +            <tt>n &le; 0</tt>. 
-            <tt>n &le; 0</tt>.</p> +        <script type="text/x-starter">
-        </div> +
-        <template data-type="starter">+
 def sum_to(n): def sum_to(n):
     pass     pass
-        </template> +        </script> 
-        <template data-type="test">+        <script type="text/x-test">
 assert sum_to(5) == 15, "sum_to(5) should be 15" assert sum_to(5) == 15, "sum_to(5) should be 15"
 assert sum_to(1) == 1, "sum_to(1) should be 1" assert sum_to(1) == 1, "sum_to(1) should be 1"
 assert sum_to(0) == 0, "sum_to(0) should be 0" assert sum_to(0) == 0, "sum_to(0) should be 0"
-        </template> +        </script> 
-    </bottom-exercise></html>+        <script type="text/x-solution"> 
 +def sum_to(n): 
 +    return sum(range(n+1)) 
 +        </script>         
 +</bottom-exercise> 
 + 
 +## Persistence 
 + 
 +Editors or excercises with an `id` attribute store the current state in the browser's local storage. If enabled, user's can opt to store a copy on Google Drive or Microsoft OneDrive. 
 + 
 +<code html> 
 +<bottom-editor style="min-height: 6lh;" id="storage-42"> 
 +print(42) 
 +</bottom-editor> 
 +</code> 
 + 
 + 
 +<bottom-editor style="min-height: 6lh;" id="storage-42"> 
 +print(42) 
 +</bottom-editor>
  
  • user/hof/pyeditor.1776079960.txt.gz
  • Zuletzt geändert: 2026-04-13 11:32
  • von hof