Python nel browser — <mp-code>
Uno dei punti che distinguono mathpad dal PDF: Python direttamente integrato ed eseguibile nel browser. Lo studente modifichi il codice in un editor CodeMirror, clicca su Esegui, il risultato (compresi tartaruga e pygame) viene mostrato nella lezione. Nessun server, nessuna installazione.
Primo esempio
Un semplice print, eseguibile grazie all'attributo runnable:
HTML
<mp-code runnable>
print("Ciao, mondo !")
</mp-code>Risultato — clicca su Esegui
print("Ciao, mondo !")
Attributi disponibili
| Attributo | Valori | Descrizione |
|---|---|---|
| runnable | boolean | Aggiunge un pulsante verde Esegui. Senza, il blocco è un semplice editor con evidenziazione della sintassi (senza esecuzione). |
| width | Intero px (predefinito 500) | Larghezza dell'editor. Imposta 350 per mobile-friendly. |
| height | Intero px (predefinito 200) | Indicazione di visualizzazione (il CSS forza un'altezza auto che si adatta al contenuto). |
| theme | neat (predefinito) · dracula · monokai · material · eclipse | Tema CodeMirror. Caricato in lazy-load — viene scaricato solo il tema utilizzato. |
Solo Python
mp-code supporta esclusivamente Python (modalità CodeMirror text/x-cython + Skulpt). Un attributo
lang="..." viene ignorato. Per JavaScript o un altro linguaggio, usa un semplice <pre><code>. Cicli e funzioni
Skulpt supporta Python 3 — funzioni, cicli, liste, condizioni, tutto funziona come previsto.
HTML
<mp-code runnable>
def factorielle(n):
if n <= 1:
return 1
return n * factorielle(n - 1)
for i in range(1, 7):
print(i, "! =", factorielle(i))
</mp-code>Risultato — clicca su Esegui
def factorielle(n):
if n <= 1:
return 1
return n * factorielle(n - 1)
for i in range(1, 7):
print(i, "! =", factorielle(i))
Tartaruga grafica (turtle)
Il modulo turtle funziona in modo nativo. Skulpt disegna in un <canvas> che appare automaticamente sotto l'editor.
HTML
<mp-code runnable>
import turtle
t = turtle.Turtle()
t.speed(0)
for couleur in ["red", "orange", "gold", "green", "blue", "purple"]:
t.color(couleur)
for _ in range(4):
t.forward(80)
t.right(90)
t.right(60)
</mp-code>Risultato — clicca su Esegui
import turtle
t = turtle.Turtle()
t.speed(0)
for couleur in ["red", "orange", "gold", "green", "blue", "purple"]:
t.color(couleur)
for _ in range(4):
t.forward(80)
t.right(90)
t.right(60)
Temi dell'editor disponibili
neatpredefinito, chiaro
draculascuro popolare
monokaiscuro classico
materialscuro bluastro
eclipsechiaro, IDE
HTML
<mp-code runnable theme="dracula" width="350">
moyenne = sum([12, 15, 9, 18]) / 4
print("Media :", moyenne)
</mp-code>Risultato (tema Dracula)
moyenne = sum([12, 15, 9, 18]) / 4
print("Media :", moyenne)
Buone pratiche
- Indentazione a 4 spazi: l'editor trasforma Tab in 4 spazi. Non mescolare mai tab e spazi (errore Python classico).
- Mobile-friendly: imposta
width="350"affinché il blocco entri in 355px di viewport. - Lazy-load: CodeMirror e Skulpt si caricano solo se necessario (se un mp-code è presente nel documento). I corsi puramente teorici non pagano il costo.
- Libreria standard: la maggior parte della stdlib di Python 3 funziona (math, random, turtle, time, json…), ma non
os,requestsecc. (sandbox del browser).
Pulsante dell'editor
Nell'editor online: Code → Python inserisce lo scheletro mp-code con
runnable e una funzione di esempio. Un secondo pulsante propone i temi alternativi. Pronto a provare mathpad?
Crei il suo primo documento scientifico in HTML nell'editor online, o importi il suo corso LaTeX esistente con un solo clic.