Unterrichtsbaustein · Detail

Börsenlabor: Handelsplatz-Simulation

Der Baustein führt zentrale Konzepte einer interaktiven Websimulation zusammen: strukturierte Daten, Zustandsverwaltung, Ereignislogik und dynamische Darstellung im Browser. Im Mittelpunkt steht die schrittweise Erweiterung eines funktionsfähigen Prototyps zu einer nachvollziehbaren Handelsplatz-Simulation.

Zeit 180 min
Format KI-Coding
Sprache HTML
Online testen Demo
Vorschaubild: Börsenlabor: Handelsplatz-Simulation

Kurseinordnung

KI-Coding im ProtoTypeFirst-Format

Der Kurs nutzt KI-Coding als kontextbewusste Unterstützung direkt im bestehenden Projektstand. Die Arbeit beginnt mit einem funktionsfähigen Prototyp, der schrittweise analysiert, erweitert, getestet und reflektiert wird.

Didaktisch eingebettete KI-Unterstützung

KI-Coding unterstützt gezielte Änderungen am vorhandenen Code, erklärt Fehler und macht Entwicklungsschritte nachvollziehbar. Für Lehrkräfte entsteht ein Unterrichtsrahmen, in dem Prompts, Änderungen und Versionen transparent thematisiert werden können.

Strukturierte Weiterentwicklung

Die Aufgaben greifen den aktuellen Projektstand auf und führen von kleinen, klar begrenzten Anpassungen zu komplexeren Erweiterungen. Dadurch wird KI nicht als Ersatz für fachliches Verständnis genutzt, sondern als Werkzeug für planvolle Codeanalyse, Umsetzung und Prüfung.

ProtoTypeFirst

Alle Inhalte starten mit einem bereits funktionierenden Prototyp. Im Börsenlabor wird dieser Prototyp über Datenmodelle, Marktlogik, Visualisierung und Auswertung schrittweise zu einer differenzierteren Simulation weiterentwickelt.

Didaktische Einordnung

Der Baustein wird fachlich und unterrichtspraktisch kompakt eingeordnet.

Fachliche Zielsetzung

Im Mittelpunkt steht die Modellierung einer Börsen- und Handelsplatz-Simulation als Webanwendung mit HTML, CSS und JavaScript. Der Baustein verbindet Datenstrukturen, Zustandsänderungen, Ereignisverarbeitung und dynamische DOM-Erzeugung zu einem nachvollziehbaren Gesamtmodell. Durch die Arbeit an einem bestehenden Prototyp wird Programmieren als schrittweise Analyse, Erweiterung und Prüfung eines lauffähigen Systems erfahrbar.

Kompetenzentwicklung

  • Daten modellieren: Aktien, Branchen, Kursverläufe, Depotwerte und Spielzustände werden in Objekten und Arrays strukturiert.
  • Algorithmen nachvollziehen: Markt-Ticks, Kauf- und Verkaufsvorgänge sowie Depotberechnungen machen Zustandsänderungen sichtbar.
  • Interaktionen umsetzen: Buttons, Auswahlfelder und Ereignisbehandlung verknüpfen Benutzerhandlungen mit Programmlogik.
  • Code reflektiert weiterentwickeln: KI-gestützte Änderungen werden gezielt formuliert, getestet und am bestehenden Code überprüft.

Unterrichtlicher Mehrwert

  • Der funktionsfähige Prototyp ermöglicht einen schnellen fachlichen Einstieg und reduziert die Hürde vor komplexeren Erweiterungen.
  • Die Aufgabenstruktur unterstützt eine klare Progression von Datenbasis und Darstellung bis zu Simulation, Auswertung und Feinschliff.
  • Erweiterungsaufträge wie Marktphasen, Nachrichten, Bots oder Highscore erlauben Differenzierung über fachliche Tiefe und Komplexität.

Ablauf der Unterrichtseinheit

Die Aufgaben werden in der Reihenfolge des JSON dargestellt und didaktisch eingeordnet.

1

Mehr Aktien und stärkere Datenbasis

Die Datenbasis des Marktes wird durch weitere Aktien mit Kürzel, Namen, Branchen, Startkursen und Verlaufswerten erweitert. Didaktisch steht hier die Einsicht im Vordergrund, dass eine dynamische Oberfläche durch saubere Datenmodellierung skalierbar bleibt, ohne dass zusätzliche HTML-Strukturen angelegt werden müssen.

2

Deutlichere Trendanzeige

Die Anzeige pro Aktie wird so erweitert, dass Kursentwicklung als steigend, fallend oder stabil erkennbar wird. Der Schritt stärkt das Verständnis für Vergleiche zwischen aktuellem und vorherigem Zustand sowie für die Verbindung von Logik, Textausgabe und CSS-Klassen.

3

Chart-Aktie auswählen

Der bisher fest an die erste Aktie gebundene Chart wird durch eine Auswahlmöglichkeit flexibilisiert. Damit wird deutlich, wie eine Nutzerentscheidung im Spielstand gespeichert und anschließend zur Steuerung einer Zeichenfunktion genutzt werden kann.

4

Nachrichtenereignisse vorbereiten

Ein Array mit Nachrichtenereignissen legt Text, betroffene Branche und Kurswirkung strukturiert ab. Die Aufgabe führt ein weiteres Datenmodell ein und bereitet die spätere Kopplung von Ereignissen und Marktbewegungen vor.

5

Nachrichten beeinflussen Branchen

Die vorbereiteten Nachrichten werden mit der Kurslogik verbunden, indem nur Aktien der betroffenen Branche zusätzlich beeinflusst werden. Damit wird eine Ursache-Wirkungs-Beziehung innerhalb der Simulation fachlich nachvollziehbar umgesetzt.

6

Marktphasen einbauen

Die Marktphasen ruhig, nervös, Crash und Boom erweitern die Simulation um globale Zustände. Der Schritt zeigt, wie ein einzelner Zustand die Stärke von Kursänderungen systematisch beeinflussen kann.

7

Bot-Händler als Marktteilnehmer

Einfache Bot-Händler mit Namen, Strategie und Geld werden als zusätzliche Marktteilnehmer modelliert. Ihre regelbasierten Aktionen machen deutlich, wie Simulationen durch autonome Akteure erweitert werden können.

8

Watchlist und Kursalarm

Eine Watchlist ermöglicht das Markieren ausgewählter Aktien und die Prüfung einfacher Alarmgrenzen. Didaktisch erweitert die Aufgabe die Simulation um Beobachtung, Bedingungsprüfung und adressatengerechte Rückmeldung.

9

Simulierter Börsentag

Aus einzelnen Markt-Ticks entsteht ein zeitlich begrenzter Börsentag mit Start, laufendem Handel und Ende. Der Schritt führt Zustandsautomaten in einfacher Form ein und macht Programmsteuerung über erlaubte Aktionen sichtbar.

10

Gewinn und Verlust im Depot

Das Depot wird um Gewinn- und Verlustanzeigen je Position erweitert. Dazu wird ein einfacher Einstiegspreis oder Durchschnittskaufpreis gespeichert, wodurch Berechnungen über mehrere Kaufzeitpunkte hinweg fachlich greifbar werden.

11

Highscore nach Vermögenswert

Der erreichte Vermögenswert wird am Ende eines Börsentags als Bestwert gespeichert und beim erneuten Laden angezeigt. Die Aufgabe führt persistente Speicherung mit localStorage als begrenztes, aber anschauliches Konzept lokaler Datensicherung ein.

12

Feinschliff: Animation und Mobilansicht

Zum Abschluss werden Animationen, Bedienbarkeit auf kleinen Bildschirmen und Chartdarstellung verbessert. Der Schritt verbindet Oberflächengestaltung mit Qualitätssicherung, da bestehende Funktionen nach jeder Änderung erhalten bleiben müssen.

Codeausschnitt

Das Fragment zeigt den fachlichen Kern der Simulation: strukturierte Marktdaten, Spielzustand und Kursänderung bei jedem Tick.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

const aktien = [
  { kuerzel: 'NOVA', name: 'NovaTech', branche: 'Tech', kurs: 42, verlauf: [39, 40, 41, 42] },
  { kuerzel: 'HEAL', name: 'Healix Medizin', branche: 'Medizin', kurs: 31, verlauf: [33, 32, 31, 31] }
];

const spielstand = {
  geld: 500,
  depot: {},
  marktphase: 'ruhig',
  tick: 1
};

function marktTick() {
  spielstand.tick = spielstand.tick + 1;
  aktien.forEach(function(aktie) {
    const zufall = Math.floor(Math.random() * 5) - 2;
    const neuerKurs = Math.max(3, aktie.kurs + zufall);
    aktie.kurs = neuerKurs;
    aktie.verlauf.push(neuerKurs);
    if (aktie.verlauf.length > 12) {
      aktie.verlauf.shift();
    }
  });
}
Dieser Baustein macht Simulation als Zusammenspiel von Daten, Zuständen, Ereignissen und schrittweiser Code-Erweiterung nachvollziehbar.

Die Aufgabenstruktur unterstützt eine klare Unterrichtsorganisation: vom Ausbau der Datenbasis über Kurslogik und Ereignisse bis zur Auswertung des Depots. Differenzierung ist über Erweiterungen wie Marktphasen, Bot-Händler, Watchlist oder Highscore möglich.

Fordern Sie einen Demo-Zugang an und erproben Sie den Baustein im eigenen Kurskontext mit einem funktionsfähigen Prototyp als Ausgangspunkt.

Jetzt anmelden und kostenfrei testen