Python dans le navigateur - Skulpt et MathPad

Merci à la librairie MathPad basée sur Skulpt, vous pouvez intégrer du code Python exécutable directement dans vos pages HTML avec de simples balises <python>.

Simple et efficace Pas besoin de configuration complexe. Ajoutez simplement les librairies MathPad et utilisez les balises <python> pour créer des zones de code Python interactives.

Mise en place

Incluez les librairies nécessaires dans l'en-tête de votre page HTML :

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ma page avec Python</title>

    <!-- JQuery (requis) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

    <!-- Python avec Skulpt -->
    <script src="https://skulpt.org/js/skulpt.min.js"></script>
    <script src="https://skulpt.org/js/skulpt-stdlib.js"></script>

    <!-- MathPad (CSS et JS) -->
    <link rel="stylesheet" href="https://www.sarmate.xyz/mathpad/mathpad.css">
    <script src="https://www.sarmate.xyz/mathpad/mathpad.js"></script>
</head>
<body>

    <!-- Votre contenu ici -->

</body>
</html>

Utilisation des balises Python

Une fois les librairies incluses, il suffit d'utiliser les balises <python> pour créer une zone de code Python exécutable :

HTML

<python>
# Ce code est modifiable et exécutable par l'utilisateurfor i in range(5):
    print("Bonjour " + str(i+1))

print("Fin du programme")
</python>

La balise <python> génère automatiquement :

Un éditeur de code avec coloration syntaxique
Un bouton "Exécuter" pour lancer le code
Une zone d'affichage pour les résultats

Tout est automatique L'utilisateur peut modifier le code Python, l'exécuter et voir le résultat directement dans la page. Aucun code JavaScript supplémentaire n'est nécessaire.

Exemple complet

Voici une page complète avec une zone de code Python :

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Exercice Python - Factorielle</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script src="https://skulpt.org/js/skulpt.min.js"></script>
    <script src="https://skulpt.org/js/skulpt-stdlib.js"></script>
    <link rel="stylesheet" href="https://www.sarmate.xyz/mathpad/mathpad.css">
    <script src="https://www.sarmate.xyz/mathpad/mathpad.js"></script>
</head>
<body>

    <h1>Exercice : Calculer une factorielle</h1>

    <p>Complétez la fonction ci-dessous pour calculer la factorielle d'un nombre.</p>
    <p>Rappel : 5! = 5 × 4 × 3 × 2 × 1 = 120</p>

    <python>
# Complétez cette fonctiondef factorial(n):
    if n <= 1:
        return 1
    else:
        return n * factorial(n - 1)

# Testsprint("5! =", factorial(5))
print("7! =", factorial(7))
print("0! =", factorial(0))
    </python>

</body>
</html>

Afficher du code Python (non modifiable)

Si vous souhaitez simplement afficher du code Python sans le rendre exécutable (par exemple pour montrer un algorithme), utilisez la balise <pythonImpr> :

HTML

<pythonImpr>
# Ce code est affiché avec coloration syntaxiquemais ne peut pas être exécuté ni modifié
def bubble_sort(list):
    for i in range(len(list)):
        for j in range(i+1, len(list)):
            if list[j] < list[i]:
                list[i], list[j] = list[j], list[i]
    return list
</pythonImpr>

Fonctionnalités Python supportées

Skulpt supporte une grande partie de Python 3 :

Variables et types : int, float, str, list, dict, tuple, set
Structures de contrôle : if/elif/else, for, while
Fonctions : def, return, paramètres par défaut, *args, **kwargs
Classes : class, héritage, méthodes
Modules intégrés : math, random, time, etc.

HTML

<python>
import math
import random

# Fonctions mathématiquesprint("Pi =", math.pi)
print("Square root of 2 =", math.sqrt(2))

# Nombres aléatoiresprint("Random number:", random.randint(1, 100))

# Listes et bouclesnumbers = [1, 2, 3, 4, 5]
squares = [n**2 for n in numbers]
print("Squares:", squares)
</python>

Limitations Skulpt ne supporte pas certaines bibliothèques comme NumPy ou Pandas. Pour des calculs scientifiques avancés, préférez des solutions alternatives comme Pyodide.

Conseils pédagogiques

Pour les enseignants Les balises <python> sont idéales pour créer des exercices interactifs. Les élèves peuvent modifier le code, l'exécuter et voir immédiatement le résultat sans quitter la page.

Proposez du code à compléter avec des commentaires guidant l'élève
Ajoutez des tests print() pour vérifier les résultats
Combinez avec JSXGraph pour des exercices mathématiques visuels

Prêt à créer des exercices Python ?

Proposez des exercices de programmation interactifs à vos élèves

Créer un compte gratuit