KI-Schulwissen
Anleitung

StärkenRadar Schritt für Schritt

Von der ersten Frage bis zum Klassendurchschnitt. Diese Anleitung zeigt jeden Knopf und jede Einstellung, mit Bildern und einem durchgehenden Beispiel aus dem Metallbau.

ÜberblickWie Generator und Ergebnisseite zusammenspielen GeneratorIn fünf Schritten zur fertigen Datei ErgebnisseiteWas die Lernenden sehen und bedienen Sichern und auswertenExporte, Vergleiche, Klassendurchschnitt
Kapitel 1

Überblick

Der StärkenRadar besteht aus zwei Teilen. Im Generator legen Sie fest, wonach gefragt wird und wie es aussieht. Daraus entsteht eine einzelne HTML-Datei, die Ergebnisseite. Diese Datei geben Sie an die Lernenden weiter. Sie öffnen sie im Browser, schätzen sich mit Reglern ein und sehen ihr Ergebnis sofort als Netzdiagramm.

Ablauf vom Generator bis zur Auswertung in fünf Stationen 1 Generator Lehrkraft legt Fragen, Design und Ablauf fest 2 HTML-Datei eine einzige Datei, läuft ohne Internet und ohne Anmeldung 3 Verteilen Lernplattform, Cloud, E-Mail oder USB-Stick 4 Einschätzen Lernende bewegen die Regler, das Netz wächst mit 5 Sichern als Bild, PDF, Word, Tabelle oder JSON JSON-Dateien zurück: Klassendurchschnitt
Grafik 1 Der Weg einer Selbsteinschätzung. Die gestrichelte Linie zeigt den Rückweg. Sammeln Sie die JSON-Dateien der Lernenden ein, berechnet die Ergebnisseite daraus den Durchschnitt der Klasse.

1.1 Was Sie brauchen

Einen aktuellen Browser, etwa Chrome, Edge, Firefox oder Safari. Es gibt nichts zu installieren, kein Konto und keinen Server. Generator und Ergebnisseite sind gewöhnliche HTML-Dateien, die Sie per Doppelklick öffnen. Die Schrift ist in jede Datei eingebettet, deshalb sieht alles auch ohne Internet gleich aus.

Es werden keine Daten verschickt. Alles, was die Lernenden eintragen, bleibt in ihrem Browser. Weitergegeben wird nur, was jemand ausdrücklich als Datei speichert und Ihnen schickt.

1.2 Die Startseite

Öffnen Sie index.html. Die Startseite führt an zwei Stellen weiter: Generator starten öffnet den Generator, Anleitung & Hilfe öffnet diese Anleitung.

Abbildung 1 Die Startseite mit den beiden Kacheln. Die ganze Kachel ist anklickbar.

1.3 Welche Dateien entstehen

Im Lauf der Arbeit entstehen verschiedene Dateien. Die Tabelle zeigt, wofür jede gedacht ist und wer sie wieder öffnen kann.

DateiEntstehtWofür
staerkenradar.htmlGenerator, Schritt 5Die Ergebnisseite für die Lernenden. Der Name ist in Schritt 4 frei wählbar.
staerkenradar.jsonGenerator, Schritt 5Ihre Konfiguration zum späteren Weiterbearbeiten. Lässt sich im Generator wieder laden.
eigene-farben.jsonGenerator, Schritt 3Ein gespeichertes Farbschema, das Sie in anderen Projekten wiederverwenden.
staerkenradar.jsonErgebnisseiteEinstellungen und Antworten eines Lernenden. Grundlage für Vergleich und Klassendurchschnitt.
.jpg .png .svg .pdf .doc .txt .csvErgebnisseiteDas Ergebnis zum Abgeben, Ausdrucken oder Weiterverarbeiten.
staerkenradar.pngErgebnisseiteEin quadratisches Bild zum Teilen, 1080 × 1080 Pixel.

1.4 Das Beispiel dieser Anleitung

Alle Bilder zeigen dasselbe erfundene Beispiel, eine Selbsteinschätzung zur Lernsituation „Treppengeländer“ im Metallbau mit sieben Bereichen, von Technische Zeichnung bis Dokumentation, auf einer Skala von 0 bis 5. So können Sie jeden Schritt am selben Fall verfolgen.

Kapitel 2

Der Generator

Der Generator führt Sie in fünf Schritten zur fertigen Datei, von den Grundeinstellungen über Achsen, Design und Export-Einstellungen bis zur Vorschau. Sie können jederzeit zurückgehen und alles ändern, bevor Sie die Datei erzeugen.

2.1 Aufbau und Navigation

Abbildung 2 Der Kopf des Generators mit Schrittanzeige und dem Kasten zum Laden einer gespeicherten Konfiguration.
  1. Titel. Darüber steht klein „Selbsteinschätzung erstellen“.
  2. Schrittanzeige. Der aktuelle Schritt leuchtet in Terrakotta, erledigte Schritte sind dunkelblau und tragen einen Haken.
  3. Die Kreise sind anklickbar. Ein Klick springt direkt zu diesem Schritt, auch nach vorn. Der Schritt „Modus“ enthält übrigens Dateiname und Vergleichswerte (siehe 2.12); den Ablauf-Modus wählen Sie in Schritt 1.
  4. Konfiguration laden. Hier holen Sie eine früher gespeicherte Konfiguration zurück (siehe 2.4).
  5. JSON-Datei laden öffnet die Dateiauswahl.

Unten auf jeder Seite stehen die Knöpfe Zurück und Weiter, dazwischen „Schritt 1 von 5“. Weiter prüft Ihre Eingaben in Schritt 1 und 2, bevor es weitergeht.

Springen über die Schrittanzeige prüft nichts. Wer über die Kreise direkt nach vorn springt, kommt auch ohne Überschrift oder mit zu wenigen Achsen bis zum Erzeugen. Gehen Sie beim ersten Mal deshalb mit Weiter durch alle Schritte.

2.2 Schritt 1: Grundeinstellungen

Hier legen Sie fest, wie die Ergebnisseite heißt, welche Skala gilt und wie die Lernenden durch die Fragen geführt werden.

Abbildung 3 Schritt 1 mit allen Feldern, ausgefüllt für das Beispiel Treppengeländer.
  1. Überschrift (Pflichtfeld). Steht groß oben auf der Ergebnisseite und als Titel im Browser-Tab.
  2. Erklärungstext (freiwillig). Eine kurze Anleitung für die Lernenden. Er steht auf der Ergebnisseite direkt unter der Überschrift; in Bild- und PDF-Exporten unter dem Diagramm.
  3. Skala von. Der kleinste Wert, Voreinstellung 0. Er ist zugleich der Startwert aller Regler.
  4. Skala bis. Der größte Wert, Voreinstellung 5. Nur ganze Zahlen.
  5. Workflow-Modus. Wie die Einschätzung abläuft (siehe 2.3).
  6. Fragenanzeige. Wo die ausführlichen Fragen erscheinen, als Tooltip, als Liste oder über jedem Regler.
  7. Fragen durchnummerieren. Setzt „1.“, „2.“ und so weiter vor jedes Schlagwort. Das Aussehen der Nummern stellen Sie in Schritt 3 ein.
  8. Diagrammform. Runde Ringe („Kreis“) oder eckige Ringe („Polygon“) im Hintergrund des Netzes.
  9. Emoji-Skala aktivieren. Zeigt neben dem Wert ein Gesicht von 😟 bis 🤩 (siehe 3.4).

Wenn etwas fehlt

Ist die Überschrift leer, färbt sich das Feld beim Klick auf Weiter und darunter steht „Bitte geben Sie eine Überschrift ein.“ Bei der Skala gibt es zwei Meldungen: „Der Startwert muss 0 oder größer sein.“ und „Der Startwert muss kleiner als der Endwert sein.“

Abbildung 4 So meldet der Generator ein leeres Pflichtfeld.

Tipp zur Skala. 0 bis 5 ist für die meisten Klassen gut handhabbar. Wer feiner abstufen will, nimmt 0 bis 10. Formulieren Sie im Erklärungstext, was die Endpunkte bedeuten, wie im Beispiel: „0 heißt ‚noch gar nicht‘, 5 heißt ‚sehr sicher‘.“

2.3 Die drei Workflow-Modi

Der Modus bestimmt, wann die Lernenden ihr Netz sehen. Das hat didaktisch Gewicht. Wer das Netz während der Einschätzung sieht, passt Werte gern an, bis das Bild „schön“ aussieht. Wer erst am Ende hinschaut, antwortet unbefangener.

Vergleich der Modi A, B und C MODUS A Fragen zuerst FRAGE 1 VON 7 ↓ Eine Frage nach der anderen. Das Netz erscheint erst am Schluss. MODUS B (STANDARD) Live-Netz, alle Regler Alle Regler auf einmal. Das Netz wächst bei jeder Bewegung mit. MODUS C Schritt für Schritt FRAGE 4 VON 7 Weiter Eine Frage nach der anderen, das Netz ist von Anfang an sichtbar.
Grafik 2 Die drei Modi im Vergleich. Wie sie auf der Ergebnisseite aussehen, zeigen 3.7 und 3.8.
ModusAblaufPasst gut, wenn …
A: Fragen zuerstEine Karte je Frage mit Regler und Weiter, zuletzt Ergebnis anzeigen. Erst dann erscheint das Netz.die Lernenden unbeeinflusst antworten sollen, etwa bei einer Eingangsdiagnose.
B: Live-NetzAlle Regler stehen untereinander, das Netz reagiert sofort.das Netz zum Nachdenken anregen soll, etwa in einem Reflexionsgespräch.
C: Schritt für SchrittEine Karte je Frage, das Netz ist von Anfang an da und wächst mit, zuletzt Abschließen.jüngere Lernende Halt durch eine Frage nach der anderen brauchen.

In den Modi A und C gibt es keinen Zurück-Knopf. Auf den Karten steht die ausführliche Frage, nicht das Schlagwort. Formulieren Sie deshalb in Schritt 2 zu jeder Achse eine vollständige Frage.

2.4 Eine gespeicherte Konfiguration laden

Haben Sie früher schon einen StärkenRadar gebaut und die Konfiguration gesichert, müssen Sie nichts neu eingeben.

  1. Ziehen Sie die JSON-Datei auf den Kasten Vorhandene Konfiguration laden in Schritt 1. Er hebt sich hervor, sobald die Datei darüber schwebt. Oder klicken Sie auf JSON-Datei laden und wählen Sie die Datei aus.
  2. Der Generator übernimmt alle Einstellungen, auch Achsen, Farben und Vergleichswerte, und springt zurück zu Schritt 1.
  3. Gehen Sie mit Weiter durch die Schritte und ändern Sie, was sich geändert hat.

Angenommen werden nur Dateien mit der Endung .json. Andernfalls erscheint „Bitte eine JSON-Datei (.json) ziehen.“ Fehlen in der Datei die Fragen, meldet der Generator „Ungültige Konfigurationsdatei: Pflichtfelder fehlen.“ Auch eine JSON-Datei, die ein Lernender auf der Ergebnisseite gespeichert hat, lässt sich hier laden.

2.5 Schritt 2: Achsen und Fragen

Jede Achse ist ein Bereich, in dem sich die Lernenden einschätzen. Sie besteht aus einem kurzen Schlagwort, das am Diagramm steht, und einer ausführlichen Frage. Beim ersten Besuch liegen drei leere Achsen bereit.

Abbildung 5 Schritt 2 mit dem Kasten für den CSV-Import und den ersten Achsenkarten.
  1. CSV-Import. Fragen aus einer Tabelle übernehmen, statt sie einzutippen (siehe 2.7).
  2. Datei auswählen öffnet die Dateiauswahl für eine CSV- oder TXT-Datei.
  3. Die erste Achsenkarte. Jede Karte ist eine Achse im Diagramm, die Reihenfolge der Karten ist die Reihenfolge im Uhrzeigersinn, beginnend oben.

2.6 Eine Achse bearbeiten, verschieben, entfernen

Abbildung 6 Eine Achsenkarte im Detail.
  1. Griff. Halten Sie die Karte hier fest und ziehen Sie sie an eine andere Stelle. Mit der Maus geht das an der ganzen Karte, auf Tablet und Smartphone nur am Griff.
  2. Nummer. Zeigt die Position, „Achse 1“ steht im Diagramm oben.
  3. Entfernen. Das X löscht die Achse sofort, ohne Rückfrage.
  4. Schlagwort. Höchstens 30 Zeichen. Pflichtfeld.
  5. Vollständige Frage. Freiwillig, aber für Tooltip, Liste und die Modi A und C wichtig.

Mit Neue Achse hinzufügen unter der letzten Karte kommt eine leere Karte dazu, der Cursor steht gleich im Schlagwort. Eine Obergrenze gibt es nicht. Mehr als zehn Achsen machen das Diagramm aber unübersichtlich.

Abbildung 7 Unter der letzten Karte folgen „Neue Achse hinzufügen“ und die Navigation.
  1. Neue Achse hinzufügen.
  2. Weiter prüft. Es braucht mindestens drei Achsen, und jede braucht ein Schlagwort. Sonst erscheint „Mindestens 3 Achsen sind erforderlich.“ oder an der Karte „Bitte ein Schlagwort eingeben.“

Kurze Schlagwörter lohnen sich. Auf dem Smartphone verkleinert die Ergebnisseite die Beschriftung, damit das Netz groß bleibt. Je kürzer die Schlagwörter, desto größer bleibt beides. „Messen und Prüfen“ passt gut, „Messen und Prüfen von Bauteilen nach Zeichnung“ nicht mehr.

2.7 Fragen aus einer Tabelle übernehmen (CSV)

Haben Sie die Fragen schon in Excel, Numbers oder einem Textdokument, übernehmen Sie sie in einem Rutsch. Jede Zeile wird zu einer Achse, links das Schlagwort, rechts die Frage, getrennt durch ein Semikolon.

Technische Zeichnung;Wie sicher liest du die technische Zeichnung des Geländers?
Werkstoffe;Wie gut kannst du passende Werkstoffe und Halbzeuge auswählen?
Messen und Prüfen;Wie genau misst und prüfst du deine Bauteile?

Es gibt drei Wege:

  1. Ziehen: Ziehen Sie die CSV-Datei auf den Kasten. Er färbt sich, solange die Datei darüber schwebt.
  2. Auswählen: Klicken Sie auf Datei auswählen.
  3. Einfügen: Kopieren Sie die Zeilen, klicken Sie einmal in den Kasten und drücken Sie Strg + V (am Mac ⌘ + V).
Abbildung 8 Der CSV-Kasten, während eine Datei darüber gezogen wird.

Drei Dinge, auf die es ankommt:

  • Der Import ersetzt alle vorhandenen Achsen. Eine Rückmeldung gibt es nicht, die neuen Karten erscheinen einfach.
  • Keine Kopfzeile. Eine Zeile „Schlagwort;Frage“ würde selbst zur Achse. Löschen Sie sie vorher.
  • Ein Semikolon innerhalb der Frage schneidet sie dort ab. Verwenden Sie in Fragen Kommas.

Leere Zeilen werden übersprungen. Speichern Sie die Datei aus Excel als „CSV UTF-8“, dann bleiben die Umlaute erhalten.

2.8 Schritt 3: Design und Farbthemen

Hier bestimmen Sie, wie Diagramm, Regler und Bühne aussehen. Für die meisten Fälle reicht die Wahl eines Farbthemas. Die Gruppen darunter sind zugeklappt; ein Klick auf eine Zeile öffnet sie.

Abbildung 9 Schritt 3: oben das Farbthema, darunter die aufklappbaren Gruppen.
  1. Farbthema wählen. Ein Thema setzt zwölf Farben auf einmal.
  2. Speichern sichert Ihre aktuellen Farben als eigenes Farbschema.
  3. Laden holt ein gespeichertes Farbschema zurück.
  4. Gruppen. Ein Klick auf die Zeile klappt sie auf, ein zweiter wieder zu.
  5. Überschrift & Text ist die letzte Gruppe.

Die Farbthemen

ThemaWirkung
Papier und PrägungDie Hausfarben sind voreingestellt, Netz in Terrakotta, Vergleich in Dunkelblau, weiße Bühne.
StandardBlau und Grau, die frühere Voreinstellung.
OzeanBlautöne, ruhig und klar, auf hellblauem Grund.
SonnenuntergangWarme Rot- und Orangetöne.
WaldNatürliche Grüntöne.
NachtDunkles Lila und Blau, dunkle Bühne mit heller Schrift.
PastellSanfte, helle Farben.
NeonKräftige Leuchtfarben auf fast schwarzem Grund.
BernsteinWarme Kupfer- und Erdtöne.
Eigene FarbenÄndert nichts; Sie stellen jede Farbe in den Gruppen selbst ein.

Ein Thema färbt die Bühne der Ergebnisseite, also den Bereich mit Überschrift und Diagramm, dazu die Regler. Der Rahmen ringsum bleibt immer in den Hausfarben. Transparenzen, Größen und die Farbe der Nummern ändert ein Thema nicht.

Abbildung 10 Dieselbe Ergebnisseite mit dem Thema „Nacht“, nur die Bühne wird dunkel.

Ein eigenes Farbschema sichern und wiederverwenden

  1. Stellen Sie die Farben ein, wie Sie sie haben möchten.
  2. Klicken Sie auf Speichern. Es öffnet sich das Fenster „Farbschema speichern“.
  3. Geben Sie einen Namen ein und klicken Sie auf Speichern oder drücken Sie Enter. Die Datei landet im Download-Ordner, aus „Metallbau Klasse MB24“ wird metallbau-klasse-mb24.json.
  4. Später klicken Sie auf Laden und wählen die Datei. Eine Meldung mit dem Namen des Schemas bestätigt es, das Auswahlfeld zeigt danach „Eigene Farben (manuell)“.
Abbildung 11 Das Fenster zum Speichern eines Farbschemas. Esc oder ein Klick daneben schließt es.

2.9 Schrift, Netz und Linien

Schrift (global) und Schrift pro Achse

Die Schriftart gilt für die Beschriftung im Diagramm, also Schlagwörter, Skalenzahlen und Legende, und für die Bild-Exporte. Die übrigen Texte der Ergebnisseite stehen immer in der Hausschrift. Voreingestellt ist Schibsted Grotesk, die einzige Schrift, die in der Datei steckt. Die anderen acht Schriften kommen vom jeweiligen Gerät und können dort anders aussehen.

Unter Individuelle Schrift pro Achse steht jede Achse in einer Zeile. Haken Sie Eigene an, um für dieses eine Schlagwort Schriftart, Größe und Farbe festzulegen, etwa um einen Schwerpunkt hervorzuheben. Ohne Haken steht dort „Global“.

Abbildung 12 Die Gruppen „Schrift (global)“ und „Individuelle Schrift pro Achse“ aufgeklappt.

Netzflächen, Netzlinien und Skala

  • Netz 1 (Selbsteinschätzung): Farbe und Transparenz der eigenen Fläche, voreingestellt Terrakotta mit 0,25.
  • Netz 2 (Vergleich): Farbe und Transparenz des Vergleichsnetzes, voreingestellt Dunkelblau mit 0,20. Es erscheint nur, wenn es Vergleichswerte gibt (siehe 4.5).
  • Linienfarbe und Linienstärke der Ringe und Speichen.
  • Skalenwerte sichtbar: die kleinen Zahlen an der oberen Achse.
Abbildung 13 Netzflächen sowie Netzlinien und Skala. Transparenz 0 ist unsichtbar, 1 ist deckend.

2.10 Regler und Nummerierung

Die Gruppe Slider bestimmt das Aussehen der Regler auf der Ergebnisseite, also den runden Griff (Thumb) mit Innen- und Randfarbe und Größe, die Schiene (Track) und die Wertanzeige rechts daneben.

Abbildung 14 Die Gruppe „Slider“. Die Thumb-Größe ist in Pixeln angegeben, 22 ist gut mit dem Finger zu treffen.

Die Gruppe Nummerierung erscheint nur, wenn Sie in Schritt 1 Fragen durchnummerieren angehakt haben. Sie legen Farbe, Größe, Fettschrift und das Trennzeichen fest: „.“ ergibt 1., „)“ ergibt 1), „:“ ergibt 1:.

Abbildung 15 Die Gruppe „Nummerierung“.

2.11 Hintergrund, Überschrift und Text

Der Hintergrund färbt die Bühne der Ergebnisseite. Wählen Sie Farbe oder Bild/Muster. Bei einem Bild tragen Sie dessen Internetadresse ein. Unter Überschrift & Text stellen Sie Größe und Farbe von Titel und Erklärungstext ein.

Abbildung 16 Die Gruppen „Hintergrund“ und „Überschrift & Text“.

Ein Hintergrundbild braucht Internet. Es wird beim Öffnen der Ergebnisseite aus dem Netz geladen und ist nicht in der Datei enthalten. Ohne Verbindung bleibt die Bühne leer, und in der Vorschau des Generators sehen Sie es nicht. Für den Einsatz ohne Internet nehmen Sie eine Farbe.

2.12 Schritt 4: Dateiname und Vergleichswerte

Abbildung 17 Schritt 4 mit eingeschalteten Soll-Werten für das Beispiel.
  1. Dateiname. Darunter sehen Sie, wie die Datei heißen wird. Fehlt die Endung .html, wird sie angehängt. Ein leeres Feld ergibt staerkenradar.html.
  2. Soll-Werte festlegen. Öffnen Sie zuerst die Gruppe Vergleichswerte vordefinieren, dann haken Sie hier an.
  3. Label Vergleichsnetz. Unter diesem Namen steht das Vergleichsnetz in der Legende und in Exporten, voreingestellt „Zielwerte“.
  4. Alle gleichzeitig verschieben. Mit Haken springen beim Bewegen eines Reglers alle auf denselben Wert. Praktisch für einen einheitlichen Zielwert, den Sie danach einzeln anpassen.
  5. Ein Regler je Achse. Stellen Sie ein, wo die Lernenden stehen sollen.

Soll-Werte erscheinen auf der Ergebnisseite als zweites, dunkelblaues Netz. So sehen die Lernenden sofort, wo sie über oder unter dem Ziel liegen. Ohne Haken gibt es kein vorgegebenes Vergleichsnetz.

2.13 Schritt 5: Vorschau und Datei erzeugen

Abbildung 18 Schritt 5 mit Vorschau und dem Abschlussblock.
  1. Vorschau. Zeigt Form, Farben und Beschriftung. Alle Achsen stehen dabei auf der Mitte der Skala, Soll-Werte werden mitgezeigt.
  2. HTML-Datei erzeugen. Erzeugt die Ergebnisseite und lädt sie in Ihren Download-Ordner.
  3. Als JSON speichern sichert Ihre Konfiguration zum späteren Weiterbearbeiten.
  4. JSON laden holt eine gespeicherte Konfiguration zurück und springt zu Schritt 1.
  5. Zurück führt zu Schritt 4. Einen Weiter-Knopf gibt es hier nicht mehr, der große Knopf übernimmt.
Abbildung 19 Nach dem Klick auf „HTML-Datei erzeugen“ bestätigt eine grüne Zeile den Download.

Sichern Sie immer auch die Konfiguration. Die erzeugte HTML-Datei lässt sich nicht mehr im Generator öffnen. Wer nächstes Jahr eine Frage ändern will, braucht die JSON-Datei aus Als JSON speichern. In Chrome und Edge fragt der Browser dabei nach dem Speicherort, in anderen Browsern landet die Datei im Download-Ordner.

Kapitel 3

Die Ergebnisseite

So sieht die erzeugte Datei bei den Lernenden aus. Die Bilder zeigen den voreingestellten Modus B mit den Fragen über jedem Regler.

3.1 Datei verteilen und öffnen

Die Ergebnisseite ist eine einzelne Datei. Laden Sie sie in Moodle, IServ oder Teams hoch, legen Sie sie in eine Cloud, schicken Sie sie per E-Mail oder kopieren Sie sie auf einen Stick. Die Lernenden öffnen sie mit einem Doppelklick oder tippen sie auf dem Tablet an.

Die Seite merkt sich nichts. Wer die Seite neu lädt oder schließt, beginnt wieder bei null. Sagen Sie den Lernenden vorher, wie sie ihr Ergebnis sichern sollen, als Bild, PDF oder JSON-Datei (siehe Kapitel 4).

3.2 Aufbau der Seite

Abbildung 20 Die Bühne der Ergebnisseite mit Überschrift, Erklärung und Netz.
  1. Kennzeichnung „StärkenRadar“.
  2. Überschrift aus Schritt 1.
  3. Erklärungstext aus Schritt 1, falls vorhanden.
  4. Das Netzdiagramm. Jede Speiche ist eine Achse. Je weiter außen der Punkt, desto höher der Wert. Die kleinen Zahlen an der oberen Achse zeigen die Skala.

Darunter folgen der Fortschritt, die Regler und ganz unten die Aktionsleiste mit allen Knöpfen zum Sichern und Vergleichen.

3.3 Regler und Fortschritt

Abbildung 21 Fortschrittsbalken und die ersten Regler.
  1. Fortschritt. Die Leiste füllt sich mit jeder bewerteten Achse und wird grün, wenn alle bewertet sind. Darunter steht „7 von 7 bewertet“.
  2. Schlagwort der Achse.
  3. Frage, hier in der Anzeige „Prominent über jedem Slider“.
  4. Regler. Ziehen Sie den runden Griff oder tippen Sie auf die Schiene. Links und rechts stehen die Grenzen der Skala.
  5. Wertanzeige. Der aktuelle Wert, auf Wunsch mit Emoji.

Was als „bewertet“ zählt. Ein Regler gilt erst als bewertet, wenn er über dem Startwert steht. Wer bei einer Skala von 0 bis 5 bewusst 0 wählt, bekommt diese Achse nicht gezählt. Das Netz erscheint mit der ersten Bewegung eines Reglers.

3.4 Emoji-Skala

Ist in Schritt 1 die Emoji-Skala eingeschaltet, steht vor jedem Wert ein Gesicht. Die sechs Gesichter werden gleichmäßig auf Ihre Skala verteilt.

Abbildung 22 Regler mit Emoji-Skala.
SkalaZuordnung
0 bis 50 😟, 1 😕, 2 😐, 3 🙂, 4 😊, 5 🤩
1 bis 51 😟, 2 😕, 3 🙂, 4 😊, 5 🤩 (😐 kommt nicht vor)
0 bis 100 😟, 1 und 2 😕, 3 und 4 😐, 5 und 6 🙂, 7 und 8 😊, 9 und 10 🤩

3.5 Nummerierte Fragen

Mit Fragen durchnummerieren steht vor jedem Schlagwort eine Nummer. Das hilft, wenn Sie im Gespräch auf „Frage 4“ verweisen wollen. Die Nummern erscheinen an den Reglern im Modus B, nicht im Diagramm.

Abbildung 23 Nummerierte Schlagwörter in der Farbe aus Schritt 3.

3.6 Die drei Arten, Fragen anzuzeigen

Prominent über jedem Slider (voreingestellt) zeigt die Frage direkt unter dem Schlagwort, wie in 3.3. Die beiden anderen Arten sparen Platz:

Tooltip

Die Frage erscheint, wenn der Mauszeiger auf ein Schlagwort im Diagramm zeigt oder es angetippt wird. Zusätzlich erscheint sie über einem Regler, sobald man darauf zeigt.

Abbildung 24 Tooltip am Schlagwort „Werkstoffe“.

Nummerierte Liste

Alle Fragen stehen gesammelt in einer Liste unter den Reglern, jeweils als „1. Schlagwort: Frage“.

Abbildung 25 Die Fragenliste unter den Reglern.

3.7 Modus A: erst antworten, dann das Netz

Das Diagramm ist ausgeblendet. Die Lernenden sehen eine Karte nach der anderen.

Abbildung 26 Die erste Fragekarte in Modus A.
  1. Fortschritt „Frage 1 von 7“.
  2. Die Frage aus Schritt 2.
  3. Regler mit Wertanzeige.
  4. Weiter führt zur nächsten Frage, bei der letzten heißt der Knopf Ergebnis anzeigen.

Nach der letzten Frage erscheint das Netz mit allen Antworten auf einmal, darunter „Alle Fragen beantwortet! Ihr StärkenRadar wird angezeigt.“

Abbildung 27 Nach der letzten Frage erscheinen das vollständige Netz und die Abschlussmeldung.

3.8 Modus C: Schritt für Schritt mit Live-Netz

Wie Modus A, aber das Netz ist von Anfang an sichtbar und wächst mit jeder Antwort. Der letzte Knopf heißt Abschließen, danach erscheint „Alle Fragen beantwortet! Ihr StärkenRadar ist komplett.“

Abbildung 28 Modus C bei Frage 4: Die ersten drei Antworten stehen schon im Netz.

3.9 Mit der Tastatur bedienen

Die Regler sind gewöhnliche Schieberegler des Browsers und lassen sich ohne Maus bedienen. Mit Tab springen Sie zum nächsten Regler; die Karte bekommt dann einen Rahmen in Terrakotta. Mit den Pfeiltasten ← → oder ↑ ↓ ändern Sie den Wert um eins, Pos1 und Ende springen an den Anfang und das Ende der Skala.

Abbildung 29 Der mittlere Regler hat den Tastaturfokus.

3.10 Dunkle Ansicht

Dunkle Ansicht in der Aktionsleiste färbt Seite, Karten und Knöpfe dunkelblau, angenehm in abgedunkelten Räumen und am Abend. Der Knopf heißt danach Helle Ansicht. Die Bühne mit dem Diagramm behält die Farben des Themas. Die Einstellung gilt, bis die Seite neu geladen wird.

Abbildung 30 Die Ergebnisseite in der dunklen Ansicht, hier mit Soll-Werten als zweitem Netz.

3.11 Auf dem Smartphone

Auf schmalen Bildschirmen stehen alle Bereiche untereinander, die Knöpfe nehmen die volle Breite ein. Die Beschriftung im Diagramm wird bei Bedarf kleiner, damit das Netz groß genug bleibt.

Abbildung 31 Die Ergebnisseite auf einem Smartphone, 390 Pixel breit.
Kapitel 4

Sichern, vergleichen, auswerten

Alles, was mit dem Ergebnis geschieht, liegt in der Aktionsleiste am Ende der Ergebnisseite. Ein großer Knopf exportiert, darunter sind die übrigen Aufgaben in drei Gruppen geordnet.

4.1 Die Aktionsleiste

Abbildung 32 Die Aktionsleiste. „Vergleich entfernen“ ist nur sichtbar, wenn es ein Vergleichsnetz gibt.
  1. Ergebnis exportieren als Bild, PDF, Word, Text oder Tabelle (4.2).
  2. JSON speichern: Einstellungen und Antworten als Datei sichern (4.4).
  3. JSON laden: eine gesicherte Datei wiederherstellen.
  4. Vergleich laden: eine zweite Einschätzung als Vergleichsnetz einblenden (4.5).
  5. Vergleich entfernen: das Vergleichsnetz wieder ausblenden.
  6. Snapshot: den aktuellen Stand als Vergleichsnetz festhalten.
  7. Klassendurchschnitt: aus vielen JSON-Dateien den Mittelwert berechnen.
  8. Als Bild teilen: ein quadratisches Bild zum Teilen (4.6).
  9. Zurücksetzen: alle Regler auf den Startwert (4.7).
  10. Dunkle Ansicht ein- und ausschalten (3.10).

4.2 Das Ergebnis exportieren

Abbildung 33 Das Fenster „Exportieren“ mit Formatwahl, Inhalt und Dateiname.
  1. Format. Sieben Formate, voreingestellt ist JPEG-Bild.
  2. Inhalt. Überschrift, Erklärungstext, Radardiagramm und Auswertung (die Tabelle der Werte), jeweils an- und abwählbar.
  3. Dateiname. Der Name ohne Endung ist schon markiert, Sie können sofort lostippen. Die Endung passt sich dem Format an.
  4. Hinweis zum gewählten Format.
  5. Exportieren oder Enter startet den Export, Abbrechen oder Esc schließt das Fenster.
FormatWas drinstehtGut für
JPEG-BildTitel, Diagramm, Erklärung und Tabelle auf einem weißen Blatt. Ist nur das Diagramm angehakt, steht das Diagramm allein.Abgabe, Lerntagebuch, Präsentation
PNG-BildWie JPEG, verlustfrei.Ausdruck, Weiterbearbeitung
SVG-GrafikWie JPEG; Text und Tabelle bleiben scharf, das Diagramm ist als Bild eingebettet.Plakate, Layoutprogramme
PDFDas Bild in einem eigenen Fenster mit dem Druckdialog.Ablage, Portfolio
WordTitel, Erklärung, Diagramm und eine Tabelle mit Nr., Schlagwort, Frage und Bewertung.Weiterschreiben, Kommentieren
TextdateiSchlagwort, Frage und Bewertung je Achse als reiner Text.Einfügen in Mails oder Lernplattformen
CSV-TabelleEine Zeile je Achse, Semikolon-getrennt, mit Vergleichswerten.Excel, Numbers, LibreOffice Calc

So sieht ein Bild-Export mit allen vier Inhalten aus:

Abbildung 34 Der JPEG- und PNG-Export zeigt Titel, Netz mit Vergleich, Erklärung und Auswertungstabelle.

4.3 Text, Tabelle und PDF im Detail

Bei Textdatei und CSV-Tabelle entfällt die Auswahl „Radardiagramm“, weil diese Formate keine Bilder kennen.

Abbildung 35 Bei CSV und Text fehlt die Zeile „Radardiagramm“.

Die Textdatei

Selbsteinschätzung Treppengeländer
==================================

Schätze ein, wie sicher du dich in den Bereichen der Lernsituation fühlst. …

1. Technische Zeichnung
   Frage: Wie sicher liest du die technische Zeichnung des Geländers?
   Bewertung: 4 / 5

2. Werkstoffe
   Frage: Wie gut kannst du passende Werkstoffe und Halbzeuge auswählen?
   Bewertung: 3 / 5

Die CSV-Tabelle

Zeilen mit # am Anfang enthalten Titel und Erklärung. Gibt es ein Vergleichsnetz, bekommt die Tabelle eine Spalte mehr, benannt nach den beiden Netzen.

# Selbsteinschätzung Treppengeländer
# Schätze ein, wie sicher du dich in den Bereichen der Lernsituation fühlst. …
Nr;Schlagwort;Frage;Meine Einschätzung;Zielwerte;Max
1;Technische Zeichnung;Wie sicher liest du die technische Zeichnung des Geländers?;4;4;5
2;Werkstoffe;Wie gut kannst du passende Werkstoffe und Halbzeuge auswählen?;3;4;5

PDF

  1. Wählen Sie PDF und klicken Sie auf Exportieren. Es öffnet sich ein neues Fenster mit dem Ergebnis, der Druckdialog startet von selbst.
  2. Wählen Sie als Drucker Als PDF speichern (in Safari: PDF unten links).
  3. Schalten Sie bei Bedarf „Kopf- und Fußzeilen“ aus und speichern Sie.

Kein Fenster? Dann blockiert der Browser Pop-ups. Unten erscheint der Hinweis „Bitte Pop-ups für den PDF-Export erlauben“. Erlauben Sie Pop-ups für diese Datei und versuchen Sie es erneut.

Wohin die Datei geht: Bei SVG, CSV und JSON fragen Chrome und Edge nach dem Speicherort. JPEG, PNG, Word, Text und die HTML-Datei landen immer direkt im Download-Ordner, ebenso alles in Firefox und Safari.

4.4 Als JSON sichern und wiederherstellen

Die JSON-Datei ist der vollständige Stand der Seite mit allen Einstellungen und allen Antworten. Sie ist der beste Weg, eine Einschätzung aufzuheben und später weiterzumachen, und die Grundlage für Vergleich und Klassendurchschnitt.

Abbildung 36 Das Fenster „JSON exportieren“.
  1. Klicken Sie auf JSON speichern, prüfen Sie den Dateinamen und klicken Sie auf Exportieren. Die Meldung „JSON wurde exportiert“ bestätigt es.
  2. Zum Wiederherstellen öffnen Sie dieselbe Ergebnisseite, klicken auf JSON laden und wählen die Datei. Die Seite baut sich mit allen Werten neu auf, die Meldung lautet „Konfiguration erfolgreich importiert“.

Dateinamen vorgeben. Bitten Sie die Lernenden, ihren Namen oder ein Kürzel in den Dateinamen zu schreiben, etwa mb24-yildiz.json. Beim Einsammeln behalten Sie so den Überblick.

In den Modi A und C werden nur abgeschlossene Durchgänge gesichert. Speichern Sie erst nach Ergebnis anzeigen bzw. Abschließen.

4.5 Ein zweites Netz zum Vergleich

Das Diagramm kann neben der eigenen Einschätzung ein zweites, dunkelblaues Netz zeigen. Es gibt vier Quellen dafür. Es gibt immer nur ein Vergleichsnetz; das neueste ersetzt das vorige.

Vier Quellen für das Vergleichsnetz Soll-Werte von der Lehrkraft in Schritt 4, Legende „Zielwerte“ Vergleich laden JSON einer anderen Person, etwa des Ausbilders Snapshot eigener früherer Stand, Legende „Snapshot“ Klassendurchschnitt viele JSON-Dateien, „Durchschnitt (N Ergebnisse)“ eigene Einschätzung Vergleich
Grafik 3 Vier Wege zum Vergleichsnetz. Das Netz der eigenen Einschätzung bleibt immer Terrakotta, der Vergleich ist dunkelblau.

Soll-Werte

Haben Sie in Schritt 4 Soll-Werte festgelegt, ist das Vergleichsnetz von Anfang an da. Die Lernenden sehen sofort, wo sie unter dem Ziel liegen.

Abbildung 37 Eigene Einschätzung (Terrakotta) und Zielwerte (Dunkelblau) mit Legende.

Vergleich laden: Selbst- und Fremdeinschätzung

  1. Eine zweite Person, etwa der Ausbilder im Betrieb, füllt dieselbe Ergebnisseite aus und speichert mit JSON speichern.
  2. Der Lernende klickt auf Vergleich laden und wählt diese Datei.
  3. Das Netz der zweiten Person erscheint dunkelblau über dem eigenen. Gesprächsstoff entsteht genau dort, wo die Netze auseinanderliegen.
Abbildung 38 Selbsteinschätzung und eine geladene Fremdeinschätzung.

Name in der Legende. Das geladene Netz trägt den Namen, unter dem es in seiner Datei gespeichert ist, meist „Meine Einschätzung“, wie im Bild oben. Gemeint ist dann die andere Person. Die Seite prüft nicht, ob die Datei dieselben Achsen hat; verwenden Sie nur Dateien desselben StärkenRadars.

Snapshot: vorher und nachher

Ein Snapshot friert den aktuellen Stand als Vergleichsnetz ein. Danach bewegen die Lernenden die Regler weiter, und der Unterschied wird sichtbar. Typisch ist, zu Beginn einer Lernsituation einzuschätzen, Snapshot und JSON zu sichern und am Ende erneut einzuschätzen.

Abbildung 39 Der Snapshot vom Anfang (Dunkelblau) und der heutige Stand (Terrakotta).

Steht noch jeder Regler auf dem Startwert, erscheint „Bitte bewegen Sie zuerst mindestens einen Slider, bevor Sie einen Snapshot speichern.“

Klassendurchschnitt

  1. Lassen Sie alle Lernenden ihr Ergebnis mit JSON speichern sichern und sammeln Sie die Dateien ein, etwa über eine Abgabe in der Lernplattform.
  2. Öffnen Sie dieselbe Ergebnisseite und klicken Sie auf Klassendurchschnitt.
  3. Markieren Sie im Dateidialog alle Dateien auf einmal, mit Strg + A oder mit gedrückter Umschalt-Taste.
  4. Die Seite berechnet je Achse den Mittelwert, auf eine Nachkommastelle gerundet, und zeigt ihn als Vergleichsnetz. Die Meldung nennt die Zahl der Ergebnisse, etwa „Klassen-Durchschnitt aus 6 Ergebnissen berechnet“.
Abbildung 40 Durchschnitt aus sechs Ergebnissen über der eigenen Einschätzung.

Nur passende Dateien zählen. Gezählt wird eine Datei nur, wenn sie genauso viele Werte hat, wie der StärkenRadar Achsen hat. Andere Dateien werden ohne Meldung übersprungen; prüfen Sie deshalb die Zahl in der Meldung. Passt keine, erscheint „Keine gültigen Ergebnisse gefunden. Stellen Sie sicher, dass die JSON-Dateien zum aktuellen StärkenRadar passen (7 Achsen).“ Die Werte, die gerade auf der Seite eingestellt sind, fließen nicht ein.

Vergleich entfernen

Vergleich entfernen blendet das zweite Netz aus, ganz gleich, woher es stammt. Der Knopf ist sichtbar, wenn beim Öffnen Soll-Werte vorlagen oder nachdem Sie einen Vergleich geladen haben. Nach einem Snapshot oder Klassendurchschnitt erscheint er nicht von selbst; laden Sie die Seite dann neu, um ohne Vergleich weiterzuarbeiten.

4.6 Als Bild teilen

Als Bild teilen erzeugt ein quadratisches Bild mit Titel, Netz und der Zeile „Erstellt mit StärkenRadar“, 1080 × 1080 Pixel, passend für Messenger und Lernplattformen. Auf Smartphones und Tablets öffnet sich das Teilen-Menü des Geräts. Am Computer wird das Bild als staerkenradar.png heruntergeladen, die Meldung lautet „Bild zum Teilen heruntergeladen“.

Abbildung 41 Das Bild zum Teilen.

4.7 Zurücksetzen

Zurücksetzen fragt nach, bevor alle Regler auf den Startwert zurückspringen. Ein Vergleichsnetz bleibt dabei erhalten.

Abbildung 42 Die Rückfrage vor dem Zurücksetzen.
Kapitel 5

Praxis und Fragen

Ein Vorschlag für den Unterricht, Antworten auf häufige Fragen und die Grenzen des Werkzeugs.

5.1 Ein Ablauf für eine Lernsituation

  1. Vorbereiten. Formulieren Sie fünf bis acht Bereiche aus den Kompetenzen der Lernsituation, jeweils mit einer Frage in Schülersprache. Erzeugen Sie die Datei, Modus A oder B, und sichern Sie die Konfiguration.
  2. Einstieg. Die Lernenden schätzen sich ein, sichern mit JSON speichern und halten einen Snapshot fest.
  3. Auswerten. Mit Klassendurchschnitt sehen Sie, wo die Klasse sich unsicher fühlt. Daraus entstehen Schwerpunkte für die Erarbeitung.
  4. Abschluss. In der Phase Reflektieren laden die Lernenden ihre JSON-Datei vom Anfang mit Vergleich laden und schätzen sich erneut ein. Die Fläche zwischen den Netzen zeigt den Zuwachs und ist ein guter Gesprächsanlass.
  5. Gespräch. Mit Soll-Werten oder einer Fremdeinschätzung aus dem Betrieb wird daraus ein Entwicklungsgespräch.

5.2 Häufige Fragen

Die Lernenden haben neu geladen, jetzt ist alles weg.

Die Seite speichert nichts im Browser. Was nicht als Datei gesichert wurde, ist verloren. Gewöhnen Sie die Klasse an JSON speichern als letzten Schritt.

Ich möchte eine Frage ändern, habe aber nur die HTML-Datei.

Die erzeugte Datei lässt sich nicht im Generator öffnen. Laden Sie eine JSON-Datei, die ein Lernender gespeichert hat, im Generator über JSON-Datei laden: Sie enthält ebenfalls alle Einstellungen. Ändern Sie die Frage und erzeugen Sie die Datei neu.

Der Klassendurchschnitt zählt weniger Dateien, als ich ausgewählt habe.

Übersprungen werden Dateien mit anderer Achsenzahl, beschädigte Dateien und Dateien, die vor der ersten Eingabe gespeichert wurden. Öffnen Sie verdächtige Dateien einzeln mit JSON laden.

Der Browser fragt nicht, wo die Datei gespeichert werden soll.

Die Frage nach dem Speicherort gibt es nur in Chrome und Edge und nur bei SVG, CSV und JSON. Sonst landet die Datei im Download-Ordner.

Das Hintergrundbild fehlt.

Es wird aus dem Internet geladen. Ohne Verbindung oder bei einer falschen Adresse bleibt die Bühne leer.

Die Schlagwörter im Diagramm sind auf dem Smartphone sehr klein.

Die Seite verkleinert die Beschriftung, damit das Netz Platz hat. Kürzere Schlagwörter helfen am meisten.

5.3 Grenzen, die Sie kennen sollten

  • Es gibt keine Speicherung im Browser und keinen Server. Ergebnisse bleiben nur als Datei erhalten.
  • In den Modi A und C gibt es keinen Weg zurück zu einer früheren Frage.
  • Die Vorschau im Generator zeigt kein Hintergrundbild, keine Skalenzahlen und keine Legende.
  • Der PDF-Export braucht erlaubte Pop-ups und den Druckdialog des Browsers.
  • Word-, Text- und JPEG-Export enthalten nur die eigene Einschätzung in der Tabelle; das Vergleichsnetz steht nur im Diagramm und in CSV.
  • Die Achsenzahl einer geladenen Vergleichsdatei wird nicht geprüft.