Module pédagogique · Détail

Laboratoire de Bourse : Simulation du Marché Financier

Ce module rassemble les concepts centraux d’une simulation web interactive : données structurées, gestion de l’état, logique d’événements et affichage dynamique dans le navigateur. Au cœur se trouve l’expansion progressive d’un prototype fonctionnel vers une simulation du marché boursier compréhensible.

Temps 180 minutes
Format Codage assisté par IA
Langue HTML
Tester en ligne Demo
Image prévisualisation : Laboratoire de Bourse : Simulation du Marché Financier

Organisation du cours

Codage assisté par IA dans le format ProtoTypeFirst

Le cours utilise le codage assisté par IA en tant que support contextuel directement intégré au statut actuel du projet. Le travail commence avec un prototype fonctionnel qui est analysé, développé, testé et réfléchi étape par étape.

Support pédagogique intégré par l’IA

Le codage assisté par IA permet des modifications ciblées du code existant, explique les erreurs et rend les étapes de développement compréhensibles. Pour les enseignants, cela crée un cadre pédagogique qui traite transparentement les prompts, les modifications et les versions.

Développement structuré

Les tâches s'appuient sur l'état actuel du projet et progressent de petites modifications clairement définies vers des extensions plus complexes. Ainsi, l'IA n'est pas utilisée comme remplacement d'une compréhension professionnelle, mais comme outil pour une analyse, une implémentation et un test planifiés du code.

Prototype en premier

Tous les contenus commencent avec un prototype déjà fonctionnel. Dans le laboratoire de bourse, ce prototype est progressivement développé en une simulation plus différenciée grâce aux modèles de données, à la logique du marché, à la visualisation et à l'évaluation.

Classification pédagogique

Le module est compactement classifié selon son contenu et sa pratique pédagogique.

Fixation d'objectifs professionnels

Au centre se trouve la modélisation d'une simulation de bourse et de lieu de négociation en tant qu'application web avec HTML, CSS et JavaScript. Le module combine les structures de données, les changements d'état, le traitement des événements et la génération dynamique du DOM dans un modèle global compréhensible. Grâce au travail sur un prototype existant, la programmation devient expérimentale par une analyse progressive, une extension et un test d'un système fonctionnel.

Développement des compétences

  • Modélisation des données : Actions de bourse, secteurs industriels, tendances des cours, valeurs du portefeuille et états de jeu sont structurés en objets et tableaux.
  • Algorithmes compréhensibles : Les ticks du marché, les transactions d'achat et de vente, ainsi que les calculs du portefeuille rendent visibles les changements d'état.
  • Interactions implémentées : Boutons, champs de sélection et gestion des événements lient les actions utilisateur à la logique du programme.
  • Le code reflète une évolution ultérieure : Les modifications guidées par l'algorithme sont formulées, testées et vérifiées contre le code existant.

Valeur éducative

  • Le prototype fonctionnel permet une entrée professionnelle rapide et réduit les obstacles pour des extensions plus complexes.
  • La structure des tâches soutient une progression claire, de la base de données à la représentation, la simulation, l'évaluation et le réglage fin.
  • Les tâches d'extension telles que les phases du marché, les messages, les bots ou les scores élevés permettent une différenciation selon la profondeur et la complexité techniques.

Flux de cours

Les tâches sont présentées dans l'ordre du JSON et organisées didactiquement.

1

Plus d’actions financières et base de données plus robuste

La base de données sur le marché est étendue avec des actions supplémentaires, leurs abréviations, noms, secteurs, prix initiaux et évolutions de valeur. L'accent mis ici est sur l’idée qu’une interface dynamique reste scalable grâce à un modèle de données propre, sans nécessiter d'autres structures HTML.

2

Affichage des tendances plus clair

L'affichage par action est étendu afin que les évolutions de prix puissent être reconnues comme en hausse, en baisse ou stables. Cette étape renforce la compréhension des comparaisons entre les états actuels et précédents ainsi que le lien entre logique, sortie textuelle et classes CSS.

3

Sélectionner un graphique pour une action

Le graphique auparavant fixé à la première action est rendu flexible grâce à une option de sélection. Cela montre comment les décisions utilisateur dans l’état du jeu peuvent être stockées et ensuite utilisées pour contrôler une fonction de dessin.

4

Préparer des événements d'actualité

Un tableau de messages d'événements structure le texte, l'industrie concernée et l'impact sur le prix de manière structurée. Cette tâche introduit un autre modèle de données et prépare la connexion entre les événements et les mouvements du marché à l'avance.

5

Les événements affectent les industries

Les événements préparés sont liés à la logique des prix en n'agissant que sur les actions de l'industrie pertinente. Cela rend la relation cause-effet au sein de la simulation compréhensible d'une manière professionnelle.

6

Introduire les phases du marché

Les phases du marché — calme, nerveuse, krach et boom — étendent la simulation avec des états globaux. Cette étape montre comment un seul état peut influencer systématiquement la force des variations de prix.

7

Des traders robotisés comme participants au marché

Des traders robots simples, dotés de noms, de stratégies et d'argent, sont modélisés en tant que participants supplémentaires au marché. Leurs actions basées sur des règles rendent clair comment les simulations peuvent être étendues grâce à des acteurs autonomes.

8

Liste de surveillance et alarme pour actions

Une liste de surveillance permet de marquer des actions sélectionnées et de vérifier des seuils d'alarme simples. Cette tâche étend didactiquement la simulation avec l’observation, le test de conditions et un retour ciblé.

9

Journée de trading simulée

Les ticks individuels du marché deviennent une journée de trading limitée dans le temps, avec un début, une phase de trading en cours et une fin. Cette étape introduit les machines à états sous forme simple et rend visible le contrôle du programme sur les actions autorisées.

10

Bénéfices et pertes dans le portefeuille

Le portefeuille sera étendu avec des indicateurs de bénéfice et de perte par position. Un prix d'entrée simple ou un prix moyen d'achat sera stocké, rendant les calculs sur plusieurs points d'achat compréhensibles professionnellement.

11

Meilleure performance par valeur des actifs

La valeur des actifs atteinte est enregistrée comme la meilleure valeur à la fin d'une journée de trading et affichée à nouveau lors du chargement. Cette tâche introduit le stockage persistant avec localStorage, un concept limité mais concret pour la sécurité locale des données.

12

Polish : Animation et vue mobile

Les animations, l'ergonomie sur les petits écrans et la représentation graphique sont améliorées en conclusion. Cette étape relie le design de surface à la qualité assurance, car les fonctions existantes doivent rester inchangées après chaque modification.

Extrait de code

Le fragment montre le cœur professionnel de la simulation : données du marché structurées, état du jeu et variations des prix à chaque 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: 'calme',
  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();
    }
  });
}
Ce module rend la simulation compréhensible en combinant les données, les états, les événements et l'extension progressive du code.

La structure de tâche soutient une organisation claire des leçons : de l'extension de la base de données à la logique du cours et aux événements jusqu'à l'évaluation du dépôt. Il est possible d'adapter selon les extensions telles que les phases de marché, les traders bots, les listes de surveillance ou les meilleurs scores.

Demandez un accès démo et testez le module dans votre propre contexte de cours avec une version fonctionnelle comme point de départ.

Inscrivez-vous maintenant et testez gratuitement