Informations

Vignette
Simulateur

Éditeur de diagramme schématique

Cet éditeur en format html peut être intégré facilement à votre cours Moodle sous la forme d'une activité fichier. L'éditeur permet aux étudiants de créer des diagrammes schématiques. L'enseignant(e) peut personnaliser facilement les symboles. Cette solution évite aux étudiants de faire appel à un outil externe lors de la création des schémas.


Auteur

Yvon Quémener

Date

2025-12-14

Secteur

Secondaire, FP, FGA

Programme

Science, Électricité, Électromécanique

Matière

Science

Type de ressource

Simulateur

Organisation

CSS des Premières-Seigneuries

Fonction

Récit National

IAG

Copilot, Gemini

Production

Image

Découvrez l'éditeur de diagramme schématique

Éditeur de diagramme schématique

Éditeur sans les noms des symboles

Liens pour télécharger le fichier à inclure dans votre cours:

Étape 1 : Télécharger le fichier editeur.zip 

La première étape consiste à créer une ressource « Fichier » dans votre cours Moodle et à déposer le fichier editeur.zip.

Une fois le fichier editeur.zip téléversé dans l'activité "Fichier" de Moodle, vous devez faire un double-clic sur celui-ci afin de le décompresser. Ensuite, vous devez faire un double-clic sur le fichier index.html et le définir comme fichier principal. Recommandation : ajuster les paramètres de l'activité « Fichier » afin de provoquer l'ouverture dans une nouvelle fenêtre (plein écran).

Étape 2 : Création de vos composants

Dans le menu, vous trouvez un exemple de requête à l'IA et un champ pour retourner le fichier JSON afin d'ajouter votre nouveau composant personnalisé. Comme les résultats sont parfois décevants, nous avons créé pour vous un éditeur de composant afin de corriger le code retourné.

Nous avons également créé un éditeur qui permet de modifier l'apparence des composants générés par l'IA. Vous pouvez également dessiner de nouveaux composants à l'aide ce cet outil.

Éditeur de composants en format JSON

Étape 3 : Substitution de la bibliothèque de composants par défaut

Une fois tous vos composants ajoutés, vous devez télécharger l'ensemble de vos composants. Un fichier « components_library.json » sera téléchargé. Vous pouvez ensuite modifier les fichiers de votre activité « Fichier » et substituer le fichier « components_library.json » par votre exemplaire qui contient tous les JSON que vous avez créé. Ils seront disponibles pour tous les étudiants.

Vous désirez personnaliser les symboles ou en générer de nouveaux ? L'éditeur peut faire appel à l'IA pour la génération de symboles mais parfois, la réponse de l'IA requiert des retouches effectuées manuellement avant l'ajout à l'intérieur de l'éditeur. Pour cette raison, nous avons également créé un éditeur de composants.

Étape 4 : Utilisation dans Moodle

Les étudiants doivent glisser déposer les composants dans l'écran. Une fois les composants reliés, ils peuvent télécharger le fichier PNG (image) ou copier l'image dans le presse papier. Ils peuvent également enregistrer le travail et y revenir plus tard.

Vidéo explicative

Cette capsule vous explique la méthode pour ajouter le fichier editeur.zip à l'intérieur de votre cours. La méthode pour générer de nouveaux symboles est également détaillée.