Course Template
Coding Lab: Interactive Simulations Build
Develop Interactive Web Projects with HTML/CSS/JS.
AI-Coding as Integrated Development Process
This course template uses AI-Coding as context-aware support directly in CodeRoom: Existing code can be extended specifically, errors can be explained, and changes can be implemented in a way that is traceable to the current project status. For teachers, the development process remains transparent because prompts, code changes, and versions remain visible in the teaching context. The course was developed specifically for learners who want to program structured with AI support and develop their code specifically.
All modules follow the ProtoTypeFirst-Format: Each project starts with a functioning prototype that can be tested immediately in the browser. From there, data models, surfaces, rules, and evaluations are developed step by step, so that traceable code development and immediately testable results are connected with each other.
Didactic Goal
The template bundles multiple interactive web projects where functional prototypes are systematically expanded into simulations, dashboards, or applications. The focus is on building competencies in HTML structuring, CSS design and JavaScript logic, particularly in handling data structures, states, DOM updates, and interaction. The individual projects illustrate how professional modeling is first translated into suitable data objects and rules and then implemented in visible user interfaces. Professionally, the template is to be assigned to the area of AI coding, model building, simulation, and step-by-step web app development.
Competence focal points
The template combines web development, data modeling, and simulation into a project-oriented competence build-up.
- Structuring web interfaces: Visible areas are built up with HTML and grouped into reusable dashboard, card, and control area sections.
- Designing responsive interfaces: CSS is used to implement cards, layouts, status displays, animations, and mobile views in a professionally suitable manner.
- Data modeling with JavaScript: Arrays and objects form central states such as stocks, patients, cells, connections, vehicles, packages, parties, or app data.
- Implementation of interaction: Click events, state changes, filters, control buttons, and DOM methods connect data with visible reactions on the surface.
- Development of simulation logic: Rules, states, random events, timers, evaluations, and automatic processes are gradually expanded from prototypes step by step.
- Error analysis and iterative development: Changes are implemented in small steps, checked in the browser, and corrected specifically based on the code.
Structure of components
The components vary depending on application contexts but follow a common didactic pattern: A runnable HTML/CSS/JS prototype is gradually expanded through data modeling, interaction, simulation rules, and evaluation step by step.
Stock Exchange Laboratory: Stock Market Simulation
The component uses a stock market and trading place simulation to connect data objects, price trends, buying and selling logic, and evaluating dashboard elements step by step.
Hospital Command Center
The component introduces state management, priorities, waiting logic, room allocation, and key figure-based visualization through a hospital dashboard.
Cell Defense – Conway against the Invasion
The component connects Conway's cellular automata with player defensive logic and makes raster data, patterns, energy, enemy movement, and state transitions modelable.
Quotenlab - Risk Simulation
This module uses a completely fictional risk simulation to implement probabilities, quote calculation, randomness, evaluation, and critical model review in code.
Central Control Main Station
This module shows a main station control system, how connection data, tracks, key figures, disturbances, and status changes are structured in an integrated simulation.
Traffic Light and Traffic Simulation
This module models traffic over vehicles, traffic light states, measurement values, and simulation steps, and illustrates the coupling of rules, movement, and display.
Package Pilot - Package Center and Delivery Service Simulation
This module develops a logistics simulation with package receipt, sorting, vehicle loading, delivery status, events, and evaluating dashboard components.
Republic Roulette - Coalition, Crises, and Laws
The building block uses a completely fictional government simulation to implement seat allocation, coalitions, events, laws, group reactions, and new elections as a rule-based model.
KI App Lab: From Idea to Your Own Web App
The building block opens up the structure to your own web app idea and supports planning, adapting data models, prototyping, interaction, and iterative expansion.
The building blocks offer transparent learning objectives, recurring project structures, and good connectivity to series of lessons on web development, model-building, and simulation. By varying the application contexts, the competency build-up can be made more subject-specific.
Use a demo access to test the template, select individual building blocks, and adapt them to your learning group.