Learning Module · Detail

Stock Exchange Laboratory: Stock Market Simulation

This module brings together central concepts of an interactive web simulation: structured data, state management, event logic, and dynamic display in the browser. At its core is the step-by-step expansion of a functional prototype into a comprehensible stock market simulation.

Time 180 minutes
Format AI Coding
Language HTML
Test online Demo
Preview image: Stock Exchange Laboratory: Stock Market Simulation

Course arrangement

AI-Coding in ProtoTypeFirst format

The course uses AI coding as context-aware support directly within the existing project status. The work begins with a functional prototype that is step-by-step analyzed, expanded, tested, and reflected upon.

Didactically integrated AI support

AI-Coding supports targeted changes to the existing code, explains errors, and makes development steps comprehensible. For teachers, this creates a framework for teaching that transparently addresses prompts, changes, and versions.

Structured Development

The tasks build on the current project status and lead from small, clearly defined adjustments to more complex extensions. This way, AI is not used as a replacement for professional understanding, but as a tool for planned code analysis, implementation, and testing.

Prototype First

All contents start with an already functioning prototype. In the stock exchange laboratory, this prototype is further developed step by step into a more differentiated simulation through data models, market logic, visualization, and evaluation.

Didactic Classification

The module is compactly classified in terms of content and teaching practice.

Professional Goal Setting

At the center is the modeling of a stock exchange and trading place simulation as a web application with HTML, CSS, and JavaScript. The module combines data structures, state changes, event processing, and dynamic DOM generation into a comprehensible overall model. Through work on an existing prototype, programming becomes experiential through step-by-step analysis, extension, and testing of a functioning system.

Competence Development

  • Data modeling: Stocks, industries, stock price trends, portfolio values, and game states are structured in objects and arrays.
  • Algorithms made understandable: Market ticks, buy and sell transactions, as well as portfolio calculations make state changes visible.
  • Interactions implemented: Buttons, selection fields, and event handling link user actions with program logic.
  • Code reflects further development: Algorithm-driven changes are formulated, tested, and checked against existing code.

Educational value

  • The functional prototype enables a quick professional entry point and reduces the hurdle for more complex extensions.
  • The task structure supports a clear progression from data basis to representation, simulation, evaluation, and fine-tuning.
  • Extension tasks such as market phases, messages, bots, or high scores allow differentiation over technical depth and complexity.

Lesson flow

The tasks are presented in the order of the JSON and didactically ordered.

1

More stocks and stronger data basis

The market data basis is expanded by additional stocks with abbreviations, names, industries, starting prices, and value developments. The focus here is on the insight that a dynamic interface remains scalable through clean data modeling without requiring additional HTML structures.

2

Clearer trend display

The display per stock is extended so that price development can be recognized as rising, falling, or stable. This step strengthens understanding of comparisons between current and previous states as well as the connection between logic, text output, and CSS classes.

3

Select chart for stock

The previously fixed chart to the first stock is made flexible through a selection option. This shows how user decisions in the game state can be stored and then used to control a drawing function.

4

Prepare news events

An array of event messages structures text, affected industry, and price impact in a structured way. The task introduces another data model and prepares the connection between events and market movements beforehand.

5

Events affect industries

The prepared events are connected to the price logic by only affecting stocks from the relevant industry. This makes the cause-and-effect relationship within the simulation understandable in a professional manner.

6

Introduce market phases

The market phases calm, nervous, crash, and boom expand the simulation with global states. The step shows how a single state can systematically influence the strength of price changes.

7

Bot traders as market participants

Simple bot traders with names, strategies, and money are modeled as additional market participants. Their rule-based actions make it clear how simulations can be expanded by autonomous actors.

8

Watchlist and stock alarm

A watchlist allows marking selected stocks and checking simple alarm thresholds. The task didactically expands the simulation with observation, condition testing, and target-oriented feedback.

9

Simulated trading day

Individual market ticks become a time-limited trading day with start, ongoing trading, and end. The step introduces state machines in simple form and makes program control over allowed actions visible.

10

Profit and loss in the portfolio

The portfolio will be extended with profit and loss indicators per position. A simple entry price or average purchase price will be stored, making calculations over multiple purchase points professionally comprehensible.

11

High score by asset value

The achieved asset value is saved as the best value at the end of a trading day and displayed again when loading. The task introduces persistent storage with localStorage as a limited but tangible concept for local data security.

12

Polish: Animation and mobile view

Animations, usability on small screens, and chart representation are improved in conclusion. This step connects surface design with quality assurance, as existing functions must remain unchanged after each change.

Code snippet

The fragment shows the professional core of the simulation: structured market data, game state, and price changes at every 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();
    }
  });
}
This module makes simulation understandable by combining data, states, events, and step-by-step code extension.

The task structure supports a clear lesson organization: from expanding the database to course logic and events to evaluating the depot. Differentiation is possible through extensions like market phases, bot traders, watchlists or high scores.

Request a demo access and test the module in your own course context with a functional prototype as a starting point.

Sign up now and test for free