Lesson Module · Detail

City Traffic and Pedestrian Simulation

This module introduces the modeling development of a web-based traffic simulation and combines HTML structure, CSS presentation, and JavaScript state logic. From a technical perspective, the step-by-step expansion of a functional prototype into a comprehensible simulation system with rules, measurement values, and evaluation approaches is relevant.

Time 180 minutes

For the lesson, this setup provides a clear framework to discuss AI-supported programming as a reflective development process rather than a shortcut. It focuses on traceable code development, targeted modification requests, and immediately testable results in the project context. AI Coding

Language HTML

Tasks 12

Preview Image: City Traffic and Pedestrian Simulation

Course Context

AI Coding in Prototype-First Format

The course uses AI Coding as context-aware support in CodeRoom to develop existing code further, explain errors, and verify changes at the current project stage.

This module is set up in Prototype-First format: The starting point is a functional prototype with city map, intersection, traffic lights, vehicles, and measurement values. The expansions are done step by step, so that teachers can structure the competency development over small, verifiable development decisions.

This setup provides a clear framework for teaching AI-assisted programming as a reflective development process, rather than a shortcut. The focus is on understandable code development, targeted change requests, and immediately testable results in the project context.

Didactic Classification

The module will be compactly classified from a subject matter and teaching practice perspective.

Subject Matter Objective

The central focus is on modeling a simple traffic situation as an interactive web application. Key concepts include vehicle and traffic light states, event control, regular simulation steps, measurement value calculation, and the step-by-step expansion of an existing HTML/CSS/JavaScript prototype.

Competence Development

Modeling: Vehicles, traffic lights, bus stops, and traffic density are described as abstracted objects, states, and rules.
Algorithmization: Movement logic, traffic light phases, waiting states, and distance controls are broken down into manageable functions.
Analysis: Simulation data-derived values such as waiting vehicles, average speed, environmental values, and congestion levels are extracted.
Further Development: The existing prototype is expanded in milestones, tested, and fiscally justified improved.

Teaching Value

The task structure enables a clear progression from the visible prototype to rule-based simulation.
The extensions offer meaningful differentiation through additional vehicle types, environmental values, statistics, and final evaluation.
The combination of visual representation and metrics supports result confirmation, reflection, and comparison of different solution approaches.

Flow of the lesson unit

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

Start screen with project goal

The introduction complements the prototype with an intro panel that makes the goal of a smooth traffic flow with low waiting time visible. Didactically, this step clarifies the project goal and creates a common evaluation basis for later extensions.

Vehicle data expands

The vehicle objects are supplemented with additional properties such as waiting time, target, color, or maximum speed. The step illustrates how data models can be expanded and then used in display or calculation.

Distance between vehicles

The movement logic is extended with a simple check so that vehicles on the same lane do not collide. This turns a purely animated movement into a rule-based simulation behavior.

Automatic traffic phases

Manual traffic control is supplemented by an automatic mode that switches after a fixed number of simulation steps. The work step strengthens the understanding of time-based control and recurring events.

Daytime and traffic density

Time of day selection changes how often new vehicles are generated. This introduces an external parameter that influences the simulation's behavior in a way that is easy to understand.

Bus line with stop

Buses get their own stop logic and wait for some simulation steps in a defined area. This step shows how a vehicle type can be modeled using specific rules.

Construction mode

A construction mode adds a visible blockage or obstacle to the simulation, making vehicles react by slowing down or waiting. This models disruptions in traffic flow.

Emergency vehicle with priority

A special vehicle type is introduced that drives faster and has a simple priority rule at the traffic light. The task is suitable for investigating exceptions in rule systems and their impact on the overall model.

CO2 and noise value

From the number, type, and waiting state of vehicles, simple environmental values are calculated and displayed on the measurement chart. This extends the simulation with an interpretable evaluation level.

Improve traffic jam display

The simple hint is developed into a traffic level like free, slow, congestion, or chaos. The task combines state assessment with understandable feedback and prepares for later evaluation logic.

Small statistics panel

The simulation counts vehicles that have successfully left the map and can capture average waiting times. This step strengthens the evaluation perspective and makes simulation results comparable.

Optimization goal and final evaluation

After a defined simulation duration, an assessment of the traffic flow is displayed, including congestion levels, waiting times, and environmental values. The conclusion clearly shows that simulations require criteria to evaluate results professionally.

Code snippet

This fragment shows the core of the simulation: vehicle states are checked, influenced by traffic light states, and then further processed as measurement values per simulation step.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
const ampeln = {
  nord: 'rot',
  ost: 'gruen'
};

function simulationsSchritt() {
  tickNummer++;
  for (const fahrzeug of fahrzeuge) {
    fahrzeugBewegen(fahrzeug);
    fahrzeugAnzeigen(fahrzeug);
  }
  werteAktualisieren();
  stauHinweisAktualisieren();
}

function fahrzeugBewegen(fahrzeug) {
  const stopLinie = window.innerWidth * 0.46 - 58;
  const vorAmpel = fahrzeug.x > stopLinie - 35 && fahrzeug.x < stopLinie;
  const rotFuerOst = ampeln.ost === 'rot';
  fahrzeug.wartet = false;
  if (fahrzeug.richtung === 'ost' && vorAmpel && rotFuerOst) {
    fahrzeug.wartet = true;
    return;
  }
  fahrzeug.x += fahrzeug.tempo;
}

The module connects traffic modeling, state logic, and measurement values with the step-by-step development of a functional prototype.

The clear task structure supports lesson organization and result assurance because each extension has a verifiable professional focus. Differentiation is possible through vehicle types, environmental values, statistics, and final evaluation.

Request a demo access and test the module in your own course context as a structured Prototype-First unit with KI-supported code development.