Programmieren >

Online Code Editor für Schulen 6671

Es gibt viele Online-Code-Editoren, die Schülerinnen und Schüler für die Webseitenprogrammierung nutzen können. Allerdings können viele dieser Editoren kompliziert sein oder erfordern eine Anmeldung.

Hier stellen wir unseren selbst entwickelten einfachen Code Editor speziell für Schülerinnen und Schüler vor, der ohne Anmeldung funktioniert, automatisch mit Hilfe der URL speichert und sehr einfach aufgebaut ist. Der Editor kann über die Adresse https://editor.unsere-schule.org oder über das Toolsmenü der Webseite geöffnet werden.

Inhalt

Interaktiver Editor

Der Code Editor zeigt das Ergebnis automatisch auf der rechten Seite an. Jede halbe Sekunde wird die Ausgabe auf der rechten Seiten mit dem eingegebenen Code aktualisiert. Damit sehen die Schülerinnen und Schülern sofort das Ergebnis und werden bei Fehlern über die Konsole darüber informiert.

Einfacher Aufbau

Der Editor ist für die Webseitenprogrammierung ausgelegt und bietet standardmäßig drei vorbereitete Dateien, mit denen jede Webseite aufgebaut ist:

  • index.html: Diese Datei ist für den strukturellen Aufbau der Webseite verantwortlich und definiert die verschiedenen Elemente wie Überschriften, Absätze, Bilder, Links usw.
  • script.js: Das ist der Programmiercode, der die Interaktivität der Webseite ermöglicht. Diese kann verwendet werden, um Benutzereingaben zu verarbeiten, Animationen zu erstellen, dynamische Inhalte zu generieren und vieles mehr.
  • style.css: Das CSS wird verwendet, um das Aussehen und das Layout der Webseite zu definieren. Es enthält Regeln für Farben, Schriftarten, Abstände, Positionen und andere visuelle Eigenschaften der Webseite.

Zwischen den Dateien kann mit Hilfe der Navigationsleiste gewechselt werden. Der Inhalt der Dateien wird auf der linken Seite dargestellt und auf der rechten können die Schülerinnen und Schüler sofort die fertige Webseite, also das Ergebnis, sehen.

Des Weiteren können die erstellten Dateien auch gemeinsam in einer ZIP-Datei heruntergeladen und zum Beispiel lokal auf dem Computer geöffnet oder auf einem Webserver veröffentlicht werden.

Automatische Speicherung und einfaches Teilen

Der Editor bietet eine automatische Speicherfunktion. Sobald eine Schülerin oder ein Schüler Code in eine der drei Dateien eingibt, wird dieser als komprimierter String in der URL gespeichert. So können erstellte Webseiten einfach durch das Kopieren des Links geteilt werden.

Beispiel:

Link zum Code unserer ToDo-App

Mit dieser Funktion können zum Beispiel auch Aufgaben erstellt und mit den Schülerinnen und Schülern geteilt werden.

Eine mögliche Aufgabe könnte so gestellt werden:

  • Öffne die Aufgabe im Code Editor.
  • Füge 4 weitere Listeneinträge mit deinen Lieblingswebseiten hinzu.
  • Verändere das Styling der Webseite, damit alle Listeneinträge und die Überschrift mittig sind.
  • Teile dein Ergebnis (den Link) mit deiner Klasse.

Diesen Editor haben wir in unserem AI coding: ToDo App – Projekt genutzt, um die von ChatGPT erzeugten Code-Schnipsel direkt in die drei vom Editor bereitgestellten Dateien zu kopieren und den Code zu testen.

Weitere Besonderheiten

PC, Tablet oder Smartphone

Der Editor kann auf jedem Endgerät genutzt werden. Durch die Möglichkeit die Fenster individuell anzupassen, kann unabhängig vom Gerät von überall programmiert werden. Durch das Teilen des Links, kann der erstellte Code auch einfach übertragen und auch geteilt werden.

Console

In JavaScript können Informationen über die Console ausgegeben werden. Normalerweise kann man die Consolenausgabe nur sehen, wenn im Browser der Entwicklermodus aktiviert wird. Dies ist zum Beispiel auf Tablets wie dem iPad gar nicht möglich. Unser Code Editor zeigt die Konsolenausgabe direkt auf der Webseite an, sodass Ausgaben sowie Fehler direkt von Schülerinnen und Schülern gelesen und analysiert werden können:

Lokaler Upload von Bildern/Dateien

Bilder können in den Browser „hochgeladen“ und im Code genutzt werden. Die Bilder sind nur lokal am genutzten Browser zugänglich und können nicht über den Link geteilt werden.

Um eine Webseite mit Bildern zu teilen, kann diese heruntergeladen und dann geteilt werden.

Lokaler Dateienupload (Bild vom Informatik Biber)

Infinite Loop Protection

Beim Programmieren mit Wiederholungen kann es sehr einfach passieren, dass eine ungewollte Endlosschleife (infinite loop) entsteht. Bei den meisten Online Editoren wird so eine Wiederholung für immer ausgeführt und der Browser muss beendet werden, damit die Webseite wieder nutzbar ist.

Unser Editor testet, ob es sich um eine Endlosschleife handelt und bricht diese nach einer gewissen Zeit ab. Die Nutzer werden darüber in der Konsole informiert und können den Fehler im Code lösen:

Schutz vor Endlosschleifen

Wenn du Fehler findest oder Verbesserungsvorschläge hast, schreib uns eine E-Mail an: r.scheglmann@msush.de.

Changelog

Version 1.15

  • Es kann nun die Startdatei (.html, .js, .css) über Optionen angepasst werden, sodass z.B.: beim Öffnen des Links gleich der JS-Code angezeigt wird.
  • Das Suchen und Ersetzen Fester der Editoren kann über die Optionen automatisch ein- und ausgeblendet werden.

Version 1.14

  • Eine Bildersuche wurde zu den globalen Dateien hinzugefügt.

Version 1.13

  • Die Dateiverwaltung wurde angepasst und es gibt nun einen neuen Reiter mit globalen Dateien, wie einen Farbwähler und einer Bibliothek mit globalen Skripten.

Version 1.12

  • Optionen zum automatischen Aktualisieren, zur Anpassung der Zeilenumbruchlänge sowie zum Persistieren von lokal hochgeladenen Dateien wurden hinzugefügt.

Version 1.11

  • Weitere Dateien (.txt .json .js .csv) können direkt im Editor erstellt und mittels Link bzw. Download geteilt werden.

Version 1.10

  • Globales CSS-Framework simple.css hinzugefügt. Lässt normales HTML einfach schön aussehen und bietet Schülerinnen und Schülern die Möglichkeit, einfach responsive Webseiten zu erstellen.
  • Favicons können hinzugefügt werden.

Version 1.9

  • Externe CSS-Bibliotheken können in richtiger Reihenfolge geladen werden.
  • Extern > style.css > style-Tag

Version 1.8

  • Externe JavaScript-Bibliotheken können geladen werden.

Version 1.7

  • Bilder können in den Browser „hochgeladen“ und im Code genutzt werden. Diese werden im Speicher des Browsers (indexedDB) gespeichert.

Version 1.6

  • Menü für Upload, Download und Linkgenerierung hinzugefügt.

Version 1.5

  • Infinite Loop Protection hinzugefügt.

Version 1.4

  • Konsolenausgabe hinzugefügt.

Version 1.3

  • Die Breite des Code- und Ausgabefensters kann individuell angepasst werden.

Version 1.2

  • Möglichkeit Code zu formatieren hinzugefügt.
  • Codeeinrückungen von Leerzeichen zu Tabulatorzeichen geändert.

Version 1.1

  • Automatisches Speichern und Laden über die URL implementiert.

Version 1.0

  • Erste Version des Editors.

Den Editor kannst du unter https://editor.unsere-schule.org/ aufrufen, über das Tools-Menü erreichen oder du gibst im grünen Code-Feld „EDITOR“ ein.

Tools-Menü

Genutzte Bibliotheken ❤️🙏

unsere-schule.org

×

Online Code Editor für Schulen

Code: 6671