Monty-Hall-Problem-Simulation

Einführung

Willkommen zum Monty Hall Problem Simulation Projekt. Das Monty Hall Problem ist ein Wahrscheinlichkeitspuzzle, das auf einem Game-Show-Szenario basiert. In diesem Projekt werden wir Ihnen dabei helfen, eine einfache webbasierte Simulation zu erstellen, um das Puzzle zu demonstrieren. Am Ende werden Sie eine funktionierende Monty Hall Simulation haben, um die Theorie selbst zu testen.

👀 Vorschau

🎯 Aufgaben

In diesem Projekt lernen Sie:

Wie Sie eine grundlegende Projektstruktur für eine Webanwendung einrichten.
Wie Sie eine einfache Benutzeroberfläche mit interaktiven Elementen mithilfe von HTML und CSS entwerfen.
Wie Sie die Spiellogik mithilfe von JavaScript implementieren und das Monty Hall Problem simulieren.
Wie Sie dynamische Rückmeldungen an die Benutzer basierend auf ihren Interaktionen anzeigen.
Wie Sie grundlegende Konzepte der Wahrscheinlichkeit durch eine praktische Simulation verstehen und anwenden.

🏆 Errungenschaften

Nach Abschluss dieses Projekts werden Sie in der Lage sein:

Ein grundlegendes Webanwendungsstruktur zu entwickeln.
Eine interaktive Benutzeroberfläche mit HTML und CSS zu erstellen.
Spiellogik und bedingte Entscheidungen in JavaScript zu implementieren.
Dynamische Rückmeldungen an die Benutzer basierend auf ihren Aktionen zu liefern.
Ein tieferes Verständnis von Wahrscheinlichkeitskonzepten durch eine praktische Simulation zu erlangen.

Projektfiles einrichten

Bevor wir mit der Programmierung beginnen, bereiten wir unsere Projektstruktur vor. Wir benötigen drei Dateien:

index.html - Hier wird die Struktur unserer Webseite gespeichert.
styles.css - Hier definieren wir das Aussehen unserer Simulation.
script.js - In dieser Datei wird die Logik hinter unserer Simulation enthalten sein.

Beginnen Sie, indem Sie die drei oben genannten Dateien erstellen.

cd ~/project
## Erstellen Sie die erforderlichen Dateien
touch index.html styles.css script.js

In diesem Schritt legen wir die grundlegenden Dateien für unsere webbasierte Simulation an. Diese Dateien werden die Struktur, den Stil und die Logik unserer Anwendung enthalten.

Strukturieren der HTML-Seite

In diesem Schritt werden wir die Struktur unserer Webseite aufbauen. Öffnen Sie die Datei index.html und fügen Sie den folgenden Inhalt hinzu:

<!-- index.html Inhalt -->
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Monty Hall Problem Simulation</title>
    <link rel="stylesheet" href="styles.css" />
    <script src="script.js" defer></script>
  </head>

  <body>
    <h2>Monty Hall Problem Simulation</h2>
    <!-- Der Rest des Inhalts wird in den folgenden Schritten hinzugefügt. -->
  </body>
</html>

Die index.html liefert die grundlegende Struktur unserer Webseite. Hier wird der Benutzer mit unserer Simulation interagieren.

✨ Lösung prüfen und üben

Interaktive Elemente hinzufügen

Lassen Sie uns nun interaktive Elemente zu unserer HTML-Seite hinzufügen, damit der Benutzer mit der Simulation interagieren kann.

Fügen Sie den folgenden Inhalt zu index.html hinzu:

<!-- Innerhalb des body-Tags von index.html -->
<p>Wählen Sie eine Tür, um zu beginnen:</p>
<button onclick="pickDoor(1)">Tür 1</button>
<button onclick="pickDoor(2)">Tür 2</button>
<button onclick="pickDoor(3)">Tür 3</button>

<div id="result"></div>

<h3>Ergebnisse:</h3>
<p>Siege, wenn gewechselt: <span id="switchWins">0</span></p>
<p>Verluste, wenn gewechselt: <span id="switchLosses">0</span></p>
<p>Siege, wenn geblieben: <span id="stayWins">0</span></p>
<p>Verluste, wenn geblieben: <span id="stayLosses">0</span></p>

Wir verbessern nun unsere Webseite mit interaktiven Elementen. Indem wir Buttons und eine Ergebnissanzeige hinzufügen, kann der Benutzer aktiv an dem Monty-Hall-Spiel teilnehmen und die Ergebnisse seiner Entscheidungen sehen.

✨ Lösung prüfen und üben

Stil der Seite einrichten

Damit unsere Simulation visuell ansprechend ist, fügen wir einige Stile hinzu. Öffnen Sie die Datei styles.css und fügen Sie den folgenden Inhalt ein:

/* styles.css Inhalt 
Stylesheet für ein grundlegendes Webseitenlayout:
- Setzt einen standardmäßigen hellgrauen Hintergrund, zentrierte Textausrichtung und Arial-Schriftart für den Körper.
- Stile für h2- und h3-Überschriften mit einer bestimmten Blaufarbe.
- Button-Stil umfasst:
  - Blauer Hintergrund mit weißem Text.
  - Gerundete Ecken.
  - Hover-Effekt, um den Hintergrund zu dunkeln und den Button leicht zu vergrößern.
- #result ist ein gestyltes Container mit Padding, Rahmen und Schatten.
- Absätze haben einen oberen und unteren Rand von 10px.
*/

body {
  font-family: "Arial", sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f8f9fa;
  color: #333;
  text-align: center;
  padding-top: 50px;
}

h2,
h3 {
  color: #007bff;
}

button {
  background-color: #007bff;
  border: none;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 4px;
  transition:
    background-color 0.3s,
    transform 0.3s;
}

button:hover {
  background-color: #0056b3;
  transform: scale(1.05);
}

#result {
  margin-top: 20px;
  padding: 20px;
  border: 1px solid #e0e0e0;
  background-color: #ffffff;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

p {
  margin: 10px 0;
}

In der Datei styles.css definieren wir die visuellen Aspekte unserer Simulation.

Körperstile:
- font-family: "Arial", sans-serif;: Setzt die Standardschriftart für den Körper der Webseite auf Arial. Wenn Arial nicht verfügbar ist, wird auf eine beliebige Sans-Serif-Schriftart zurückgegriffen.
- margin: 0; padding: 0;: Entfernt den Standardrand und das Innenabstand.
- background-color: #f8f9fa;: Setzt einen hellgrauen Hintergrund für die gesamte Seite.
- color: #333;: Setzt eine dunkelgraue Farbe für den Text.
- text-align: center;: Ausrichtet den Text in der Mitte der Seite.
- padding-top: 50px;: Fügt einen Innenabstand von 50px oben am Körper hinzu.
Überschriftenstile:
- h2, h3 { color: #007bff; }: Die h2- und h3-Überschriften werden mit einer bestimmten Blautönung gefärbt.
Buttonstile:
- Der Button hat einen blauen Hintergrund, weißem Text und keinen Rahmen.
- Gerundete Ecken werden mit border-radius gesetzt.
- Beim Hovern über den Button wird der Hintergrundfarbe ein dunklerer Blauton zugewiesen und der Button wird leicht vergrößert (transform: scale(1.05);).
Ergebniscontainer:
- #result: Repräsentiert ein Element mit der ID "result".
- Es hat einen weißen Hintergrund, einen grauen Rahmen und einen subtilen Schatten.
- Der Container ist so gestaltet, dass er wie eine Karte oder eine Box mit gerundeten Ecken aussieht.
Absatzstile:
- Absätze (p) haben einen Rand von 10px oben und unten. Dies gewährleistet den Abstand zwischen aufeinanderfolgenden Absätzen und anderen Elementen.

Dieser Schritt gewährleistet, dass die Benutzeroberfläche angenehm und lesbar ist.

✨ Lösung prüfen und üben

Globale Variablen initialisieren

Lassen Sie uns nun die Spiel-Logik implementieren.

Beginnen Sie, indem Sie die globalen Variablen einrichten, die wir verwenden werden, um den Spielzustand zu verfolgen.

Öffnen Sie script.js und fügen Sie hinzu:

// script.js Inhalt

// Globale Variablen, um den Spielzustand zu verfolgen
let selectedDoor;
let carBehindDoor;
let switchWins = 0;
let stayWins = 0;
let switchLosses = 0;
let stayLosses = 0;

Wir definieren eine Reihe globaler Variablen in der Datei script.js. Diese Variablen helfen dabei, den Spielzustand zu verwalten, wie z. B. welche Tür gewählt wurde, wo das Auto sich befindet und die Anzahl der Siege und Verluste.

✨ Lösung prüfen und üben

Die Spielinitialisierungsfunktion einrichten

Nun fügen wir eine Funktion hinzu, um das Spiel zu initialisieren. Diese Funktion wird am Anfang jeder Runde die Position des Autos zufällig zuweisen.

Fügen Sie Folgendes zu script.js hinzu:

// Initialisiere das Spiel, indem du die Position des Autos zufällig bestimmst
function initializeGame() {
  carBehindDoor = Math.floor(Math.random() * 3) + 1;
  document.getElementById("result").innerText = "";
}

Die initializeGame-Funktion bereitet jede Runde vor. Sie zufällig die Position des Autos, wodurch sichergestellt wird, dass jede Spieliteration unvorhersehbar ist.

✨ Lösung prüfen und üben

Die Türauswahl-Logik implementieren

Sobald das Spiel initialisiert ist, müssen wir die Auswahl der Tür durch den Benutzer und die Entdeckung einer der Ziegen-Türen durch Monty behandeln.

Fügen Sie an script.js an:

// Eine Funktion, die aufgerufen wird, wenn eine Tür ausgewählt wird
function pickDoor(doorNumber) {
  initializeGame();
  selectedDoor = doorNumber;
  let goatDoor = getGoatDoor();
  document.getElementById("result").innerHTML =
    `Sie haben Tür ${selectedDoor} ausgewählt. Monty öffnet Tür ${goatDoor}, um eine Ziege zu zeigen.<br>` +
    `Möchten Sie <button onclick="revealPrize(true)">Wechseln</button> oder ` +
    `<button onclick="revealPrize(false)">Beibehalten</button>?`;
}

Die pickDoor-Funktion erfasst die Auswahl der Tür durch den Benutzer. Sie bereitet die nächste Phase vor, indem sie eine der Ziegen-Türen zeigt und den Benutzer mit der Wahl zwischen Wechseln und Beibehalten auffordert.

✨ Lösung prüfen und üben

Bestimme die Ziegen-Tür

Wir brauchen eine separate Funktion, um zu bestimmen, welche Tür Monty öffnen wird, um eine Ziege zu zeigen. Diese Tür kann nicht die gleiche sein wie die, die der Spieler ausgewählt hat, oder die, hinter der das Auto steht.

Fügen Sie weiterhin an script.js an:

// Finde eine Tür, hinter der eine Ziege steht
function getGoatDoor() {
  let goatDoor;
  do {
    goatDoor = Math.floor(Math.random() * 3) + 1;
  } while (goatDoor === selectedDoor || goatDoor === carBehindDoor);
  return goatDoor;
}

getGoatDoor ist eine entscheidende Funktion, die bestimmt, welche Tür, außer der vom Benutzer ausgewählten und der Autotür, geöffnet wird, um eine Ziege zu zeigen. Sie verwendet eine zufällige Auswahl, die durch die Spielregeln eingeschränkt ist.

✨ Lösung prüfen und üben

Die Gewinnaufdeckungs-Logik einrichten

Als letztes legen wir die Logik fest, um die endgültige Aufdeckung basierend auf der Wahl des Benutzers zu wechseln oder zu bleiben zu behandeln. Vorerst wird diese Funktion ein Platzhalter sein und in den folgenden Schritten erweitert werden.

Vervollständigen Sie Ihre Hinzufügungen zu script.js mit:

// Zeige das Gewinnobjekt hinter der ausgewählten Tür
function revealPrize(switchDoor) {
  if (switchDoor) {
    selectedDoor = 6 - selectedDoor - getGoatDoor();
  }
  // Wir werden in den folgenden Schritten hier weitere Logik hinzufügen.
}

initializeGame();

Die revealPrize-Funktion behandelt den letzten Teil des Spiels. Basierend auf der Wahl des Benutzers zu wechseln oder zu bleiben wird diese Funktion letztendlich bestimmen, ob der Benutzer ein Auto gewinnt oder eine Ziege bekommt.

✨ Lösung prüfen und üben

Zeige die Spielresultate an

In diesem Schritt werden wir die revealPrize-Funktion erweitern, um die Ergebnisse der Benutzerauswahl anzuzeigen. Fügen Sie den folgenden Code zur revealPrize-Funktion in script.js hinzu:

// Fortsetzung der revealPrize-Funktion in script.js

if (selectedDoor === carBehindDoor) {
  if (switchDoor) {
    switchWins++;
    document.getElementById("switchWins").innerText = switchWins;
  } else {
    stayWins++;
    document.getElementById("stayWins").innerText = stayWins;
  }
  document.getElementById("result").innerText =
    "Glückwunsch! Sie haben ein Auto gewonnen! Wählen Sie eine Tür, um erneut zu spielen.";
} else {
  if (switchDoor) {
    switchLosses++;
    document.getElementById("switchLosses").innerText = switchLosses;
  } else {
    stayLosses++;
    document.getElementById("stayLosses").innerText = stayLosses;
  }
  document.getElementById("result").innerText =
    "Leider haben Sie eine Ziege bekommen. Wählen Sie eine Tür, um erneut zu spielen.";
}

Die Erweiterung der revealPrize-Funktion dient hier dazu, die Spielresultate an den Benutzer zu kommunizieren. Dieser Schritt ist von entscheidender Bedeutung für die Rückmeldung, da der Benutzer so die Auswirkungen seiner Entscheidung sehen kann und dadurch zu wiederholten Spielen angeregt wird, um die Wahrscheinlichkeitsauswirkungen zu beobachten.

✨ Lösung prüfen und üben

Ausführen des Projekts

Um die Monty-Hall-Simulation in Aktion zu sehen:

Stellen Sie sicher, dass alle Ihre Dateien (index.html, styles.css, script.js) gespeichert sind.
Öffnen Sie die Datei index.html in einem Webbrowser.

Schließlich führt dieser Schritt den Benutzer bei der Ausführung der Simulation in ihrem Browser an und verwandelt den Code in eine visuelle und interaktive Erfahrung.

Zusammenfassung

Glückwunsch! Sie haben erfolgreich eine Monty-Hall-Problem-Simulation gebaut. Indem Sie an diesem Projekt mitgearbeitet haben, haben Sie gelernt, wie Sie ein einfaches Webprojekt strukturieren, seine Elemente gestalten und interaktive JavaScript-Funktionalität implementieren. Jetzt können Sie mehrere Simulationen ausführen, um die Wahrscheinlichkeitsauswirkungen des Monty-Hall-Problems selbst zu sehen!

Monty Hall Simulation Web App

Einführung

👀 Vorschau

🎯 Aufgaben

🏆 Errungenschaften

Coden ohne Setup – sofort loslegen.

Projektfiles einrichten

Strukturieren der HTML-Seite

Einfach starten, ohne Installation.

Interaktive Elemente hinzufügen

Stil der Seite einrichten

Mehr als nur ein Lerntext – erlebe es selbst.

Globale Variablen initialisieren

Die Spielinitialisierungsfunktion einrichten

Die Türauswahl-Logik implementieren

Bestimme die Ziegen-Tür

Die Gewinnaufdeckungs-Logik einrichten

Zeige die Spielresultate an

Ausführen des Projekts

Zusammenfassung