Lärmodul · Detalj

Stock Exchange Laboratory: Aktiemarknadsimulator

Denna modul sammanför centrala begrepp inom en interaktiv webbsimulering: strukturerad data, tillståndshantering, händelselogik och dynamiskt visuellt utseende i webbläsaren. I dess kärna ligger stegvis expansion av ett fungerande prototyp till en förståelig aktiemarknadsimulator.

Tid 180 minuter
Format AI-kodning
Språk HTML
Testa online Demo
Förhandsvisningsbild: Stock Exchange Laboratory: Aktiemarknadsimulator

Kursarrangemang

AI-kodning i ProtoTypeFirst-format

Kursen använder AI-kodning som kontextmedveten stöd direkt inom den befintliga projektstatusen. Arbetet börjar med ett fungerande prototyp som stegvis analyseras, utvecklas, testas och reflekteras över.

Didaktiskt integrerat AI-stöd

AI-kodning stöder målriktade ändringar av den befintliga koden, förklarar fel och gör utvecklingssteg förståeliga. För lärare skapar detta ett ramverk för undervisning som transparent hanterar prompter, ändringar och versioner.

Strukturerad utveckling

Uppgifterna bygger på det nuvarande projektstatuset och leder från små, tydligt definierade justeringar till mer komplexa utökningar. På detta sätt används AI inte som ersättning för professionell förståelse, utan som ett verktyg för planerad kodanalys, implementering och testning.

Prototyp först

Alla innehåll startar med en redan fungerande prototyp. I handelslaboratoriet utvecklas denna prototyp stegvis till en mer differentierad simulering genom datamodeller, marknadslogik, visualisering och bedömning.

Didaktisk klassificering

Modulen är kompakt klassificerad i termer av innehåll och undervisningspraxis.

Professionell målformulering

Centralt ligger modelleringen av en handelsplats och ett handlingsutrymme som webbapplikation med HTML, CSS och JavaScript. Modulen kombinerar datamodeller, tillståndsförändringar, händelsehantering och dynamisk DOM-generering i ett förståeligt sammanhang. Genom arbete med en befintlig prototyp blir programmering erfaren genom stegvis analys, utökning och testning av ett fungerande system.

Kompetensutveckling

  • Datamodellering: Aktier, industrier, aktiekurs-trender, portföljvärden och spelstater struktureras i objekt och arrayer.
  • Algoritmer som förstås: Marknads tickar, köp- och säljtransaktioner samt portföljberäkningar gör tillståndsförändringar synliga.
  • Interaktioner implementerade: Knappar, valfält och händelsehantering kopplar användargränssnittet med programlogik.
  • Kod reflekterar vidareutveckling: Ändringar som drivs av algoritmer formuleras, testas och kontrolleras mot befintlig kod.

Utbildningsvärde

  • Den funktionella prototypen ger en snabb professionell inmatningspunkt och minskar trögheten för mer komplexa utökningar.
  • Upplägget av uppgifter stöder en tydlig progression från datautgång till representation, simulering, bedömning och finjustering.
  • Utökade uppgifter som marknadsfasers, meddelanden, bots eller höga poäng gör det möjligt att skilja på teknisk djupgående och komplexitet.

Lärprocess

Uppgifterna presenteras i ordningen av JSON och pedagogiskt uppdelade.

1

Fler aktier och starkare datagrund

Marknadsdatagrunden utvidgas med ytterligare aktier som inkluderar förkortningar, namn, industrier, startpriser och värdesutveckling. Fokus ligger på att en dynamisk gränssnittsdesign kan bibehållas skalbar genom ren datamodellering utan att kräva ytterligare HTML-strukturer.

2

Tydligare trendvisning

Visningen per aktie utvidgas så att prisutvecklingen kan identifieras som stigande, fallande eller stabil. Detta stärker förståelsen av jämförelser mellan nuvarande och tidigare tillstånd samt kopplingen mellan logik, textutmatning och CSS-klasser.

3

Välj diagram för aktie

Det tidigare fasta diagrammet till den första aktien görs flexibelt genom en valmöjlighet. Det visar hur användares beslut i spelstaten kan sparas och sedan användas för att styra ett ritningsfunktion.

4

Förbered nyhetsändringar

En array med händelsemeddelanden strukturerar text, påverkade branscher och prisimpact på ett strukturerat sätt. Uppgiften introducerar en annan datamodell och förbereder kopplingen mellan händelser och marknadsrörelser i förväg.

5

Händelser påverkar branscher

De förberedda händelserna kopplas till prislösen genom att endast påverka aktier från den relevanta branschen. Det gör orsak och konsekvens inom simulationen förståelig på ett professionellt sätt.

6

Introducera marknadsfaserna

Marknadsfaserna lugn, nervös, krasch och boom utvidgar simulationen med globala tillstånd. Steget visar hur ett enskilt tillstånd kan systematiskt påverka styrkan i prisändringar.

7

Bot-trader som marknadsparticipanter

Enkla bot-trader med namn, strategier och pengar modelleras som ytterligare marknadsparticipanter. Deras regelbaserade handlingar gör det tydligt hur simulationer kan utökas genom autonoma aktörer.

8

Övervakningslista och aktiealarm

En övervakningslista tillåter att markera valda aktier och kontrollera enkla alarmgränser. Uppgiften didaktiskt utvidgar simulationen med observation, villkorstestning och målriktad feedback.

9

Simulerad handelsdag

Individuella marknads tick blir en tidsbegränsad handelsdag med start, pågående handel och slut. Steget introducerar tillståndsmaskiner i enkel form och gör programkontroll över tillåtna handlingar synlig.

10

Vinst och förlust i portföljen

Portföljen kommer att utökas med vinst- och förlustindikatorer per position. Enkel inlösningspris eller genomsnittlig köppris kommer att sparas, vilket gör beräkningar över flera köp punkter professionellt förståeliga.

11

Högsta poäng enligt aktievärde

Det uppnådda aktievärdet sparas som det bästa värdet vid slutet av ett handelsdag och visas åter när man laddar. Uppgiften introducerar permanent lagring med localStorage som ett begränsat men konkret koncept för lokal data säkerhet.

12

Polish: Animation och mobilvy

Animationer, användbarhet på små skärmar och diagramrepresentation förbättras i slutet. Detta steg kopplar ytan design med kvalitetskontroll, eftersom befintliga funktioner måste bibehållas oförändrade efter varje ändring.

Kodfragment

Fragmentet visar den professionella kärnan i simulationen: strukturerad marknadsdata, spelstatus och prisförändringar vid varje 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();
    }
  });
}
Detta modul gör simulationen förståelig genom att kombinera data, tillstånd, händelser och stegvisa kodutökningar.

Uppgiftsstrukturen stöder en tydlig undervisningsorganisation: från utökning av databasen till kurslogik och händelser till bedömning av depå. Differentiering är möjlig genom utökningar som marknadsfasers, bot-traders, watchlists eller högsta poäng.

Begär ett demonstreringsåtkomst och testa modulen i din egen kurskontext med en funktionsduglig prototyp som utgångspunkt.

Anmäl dig nu och prova gratis