モンティ・ホール問題のシミュレーション

はじめに

モンティ・ホール問題のシミュレーションプロジェクトへようこそ。モンティ・ホール問題は、番組のシナリオに基づく確率のパズルです。このプロジェクトでは、このパズルを示すための簡単なウェブベースのシミュレーションを作成する方法を案内します。最後までやると、機能するモンティ・ホールのシミュレーションができ、自分で理論をテストできるようになります。

👀 プレビュー

🎯 タスク

このプロジェクトで学ぶことは以下の通りです。

ウェブアプリケーションの基本的なプロジェクト構造を設定する方法。
HTMLとCSSを使ってインタラクティブな要素を持つ簡単なユーザーインターフェイスを設計する方法。
JavaScriptを使ってゲームロジックを実装し、モンティ・ホール問題をシミュレートする方法。
ユーザーのインタラクションに基づいて動的なフィードバックをユーザーに表示する方法。
手を動かしたシミュレーションを通じて、確率の基本概念を理解して適用する方法。

🏆 成果

このプロジェクトを完了すると、以下のことができるようになります。

基本的なウェブアプリケーション構造を開発する。
HTMLとCSSを使ってインタラクティブなユーザーインターフェイスを作成する。
JavaScriptでゲームロジックと条件付きの意思決定を実装する。
ユーザーの行動に基づいて動的なフィードバックを提供する。
実際のシミュレーションを通じて、確率の概念を深く理解する。

プロジェクトファイルをセットアップする

コーディングに取り組む前に、プロジェクト構造を準備しましょう。必要なファイルは3つです。

index.html - これがウェブページの構造を保持します。
styles.css - ここでシミュレーションの外観を定義します。
script.js - このファイルにはシミュレーションの背後にあるロジックが含まれます。

始めに、上記の3つのファイルを作成します。

cd ~/project
## 必要なファイルを作成する
touch index.html styles.css script.js

このステップでは、ウェブベースのシミュレーションの基本ファイルをセットアップしています。これらのファイルは、アプリケーションの構造、スタイル、ロジックを保持します。

HTML ページの構造を整える

このステップでは、ウェブページの構造を整えます。index.html ファイルを開き、以下のコンテンツを追加します。

<!-- index.html content -->
<!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>
    <!-- 残りのコンテンツは次のステップで追加します。 -->
  </body>
</html>

index.html はウェブページの基本構造を提供します。ここでユーザーがシミュレーションとやり取りを行います。

✨ 解答を確認して練習

インタラクティブな要素を追加する

さて、ユーザーがシミュレーションとやり取りできるように、HTML ページにインタラクティブな要素を追加しましょう。

index.html に以下のコンテンツを追加します。

<!-- index.html の body タグの中 -->
<p>Pick a door to start:</p>
<button onclick="pickDoor(1)">Door 1</button>
<button onclick="pickDoor(2)">Door 2</button>
<button onclick="pickDoor(3)">Door 3</button>

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

<h3>Results:</h3>
<p>Wins when switched: <span id="switchWins">0</span></p>
<p>Losses when switched: <span id="switchLosses">0</span></p>
<p>Wins when stayed: <span id="stayWins">0</span></p>
<p>Losses when stayed: <span id="stayLosses">0</span></p>

これでインタラクティブな要素を使ってウェブページを強化しています。ボタンと結果表示を追加することで、ユーザーはモンティ・ホールのゲームに積極的に参加し、自分の決定の結果を見ることができます。

✨ 解答を確認して練習

ページにスタイルを追加する

私たちのシミュレーションが視覚的に魅力的になるように、いくつかのスタイルを追加しましょう。styles.css ファイルを開き、以下のコンテンツを貼り付けます。

/* styles.css content 
基本的なウェブページレイアウトのためのスタイルシート:
- ボディにデフォルトの明るい灰色の背景、中央揃えのテキスト、Arial フォントを設定します。
- 特定の青色で h2 と h3 の見出しのスタイルを設定します。
- ボタンのスタイリングには次のものが含まれます。
  - 白文字の青色の背景色。
  - 角丸。
  - ホバー効果で背景を暗くし、ボタンを少し拡大します。
- #result は、パディング、境界、シャドウがあるスタイリッシュなコンテナです。
- 段落は上下に 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;
}

styles.css ファイルは、私たちのシミュレーションの視覚的な側面を定義する場所です。

ボディのスタイル：
- font-family: "Arial", sans-serif;：ウェブページのボディのデフォルトフォントを Arial に設定します。Arial が利用できない場合、サンセリフフォントにフォールバックします。
- margin: 0; padding: 0;：デフォルトのマージンとパディングを削除します。
- background-color: #f8f9fa;：ページ全体に明るい灰色の背景色を設定します。
- color: #333;：テキストに暗い灰色の色を設定します。
- text-align: center;：テキストをページの中央に揃えます。
- padding-top: 50px;：ボディの上部に 50px のパディングを追加します。
見出しのスタイル：
- h2, h3 { color: #007bff; }：h2 と h3 の見出しは特定の青色で塗られます。
ボタンのスタイル：
- ボタンは青色の背景、白文字、境界なしです。
- border-radius で角丸を設定します。
- ボタンにマウスオーバーすると、背景色が暗い青色になり、ボタンが少し拡大します (transform: scale(1.05);)。
結果コンテナ：
- #result：id が "result" の要素を表します。
- 白い背景、灰色の境界、微妙なシャドウがあります。
- コンテナは角丸のカードまたはボックスのようにスタイリッシュになっています。
段落のスタイル：
- 段落 (p) は上下に 10px のマージンがあります。これにより、連続する段落と他の要素の間にスペースが確保されます。

このステップにより、ユーザーインターフェイスが快適で読みやすくなります。

✨ 解答を確認して練習

グローバル変数を初期化する

さて、ゲームロジックを実装しましょう。

まず、ゲームの状態を追跡するために使用するグローバル変数を設定します。

script.js を開き、以下を追加します。

// script.js content

// Global variables to track game state
let selectedDoor;
let carBehindDoor;
let switchWins = 0;
let stayWins = 0;
let switchLosses = 0;
let stayLosses = 0;

script.js ファイルで一連のグローバル変数を定義しています。これらの変数は、どのドアが選ばれたか、車がどこにあるか、勝利と敗北のカウントなど、ゲームの状態を管理するのに役立ちます。

✨ 解答を確認して練習

ゲーム初期化関数を設定する

さて、ゲームを初期化する関数を追加しましょう。この関数は、各ラウンドの開始時に車の位置をランダムに設定します。

script.js に以下を追加します。

// Initialize the game by randomizing the car's location
function initializeGame() {
  carBehindDoor = Math.floor(Math.random() * 3) + 1;
  document.getElementById("result").innerText = "";
}

initializeGame 関数は、各ラウンドの舞台を設定します。車の位置をランダムに設定することで、各ゲームの反復が予測不可能であることを保証します。

✨ 解答を確認して練習

ドア選択のロジックを実装する

ゲームが初期化されたら、ユーザーのドア選択と、モンティによるヤギのいるドアの1つの開示を処理する必要があります。

script.js に追加します。

// A function called when a door is picked
function pickDoor(doorNumber) {
  initializeGame();
  selectedDoor = doorNumber;
  let goatDoor = getGoatDoor();
  document.getElementById("result").innerHTML =
    `You selected Door ${selectedDoor}. Monty opens Door ${goatDoor} to reveal a goat.<br>` +
    `Do you want to <button onclick="revealPrize(true)">Switch</button> or ` +
    `<button onclick="revealPrize(false)">Stay</button>?`;
}

pickDoor 関数は、ユーザーのドア選択を捕捉します。ヤギのいるドアの1つを開示することで次のフェーズを準備し、切り替えるか維持するかの選択を促します。

✨ 解答を確認して練習

ヤギのいるドアを決定する

モンティがヤギを見せるために開くドアを決定するために、別の関数が必要です。このドアは、プレイヤーが選んだドアや、その後ろに車があるドアではなければなりません。

script.js に続けて追加します。

// Find a door with a goat behind it
function getGoatDoor() {
  let goatDoor;
  do {
    goatDoor = Math.floor(Math.random() * 3) + 1;
  } while (goatDoor === selectedDoor || goatDoor === carBehindDoor);
  return goatDoor;
}

getGoatDoor は、ユーザーが選んだドアと車のドア以外のどのドアが開かれてヤギが見られるかを決定する重要な関数です。ゲームのルールに制約されたランダムな選択を行います。

✨ 解答を確認して練習

景品を開示するロジックを設定する

最後に、ユーザーが切り替えるか維持するかの選択に基づいて最終的な開示を処理するロジックを設定します。今のところ、この関数は仮置きとなり、後続の手順で拡張されます。

script.js の追加を次のコードで完了します。

// Reveal the prize behind the chosen door
function revealPrize(switchDoor) {
  if (switchDoor) {
    selectedDoor = 6 - selectedDoor - getGoatDoor();
  }
  // We'll add more logic here in the following steps.
}

initializeGame();

revealPrize 関数は、ゲームの最後の部分を処理します。ユーザーが切り替えるか維持するかの選択に基づいて、この関数は最終的にユーザーが車を勝ち取るか、ヤギを獲得するかを決定します。

✨ 解答を確認して練習

ゲーム結果を表示する

このステップでは、revealPrize 関数を強化して、ユーザーの選択結果を表示します。script.js の revealPrize 関数に次のコードを追加します。

// Continuing the revealPrize function 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 =
    "Congratulations! You won a car! Pick a door to play again.";
} else {
  if (switchDoor) {
    switchLosses++;
    document.getElementById("switchLosses").innerText = switchLosses;
  } else {
    stayLosses++;
    document.getElementById("stayLosses").innerText = stayLosses;
  }
  document.getElementById("result").innerText =
    "Sorry, you got a goat. Pick a door to play again.";
}

ここでの revealPrize 関数の強化は、ゲーム結果をユーザーに伝えるためのものです。このステップはフィードバックにとって重要で、ユーザーが自分の決定の結果を見ることができ、確率の結果を観察するために繰り返しプレイするように促すことができます。

✨ 解答を確認して練習

プロジェクトの実行

モンティ・ホールのシミュレーションを動かすには：

すべてのファイル（index.html、styles.css、script.js）を保存してください。
ウェブブラウザで index.html ファイルを開きます。

最後に、このステップでは、ユーザーに対してシミュレーションをブラウザでどのように実行するかを案内し、コードを視覚的で対話型の体験に変えます。

まとめ

おめでとうございます！あなたは成功裏にモンティ・ホール問題のシミュレーションを作成しました。このプロジェクトを通じて、簡単なウェブプロジェクトの構成方法、要素のスタイリング方法、および対話型のJavaScript機能の実装方法を学びました。今、あなた自身で複数のシミュレーションを実行して、モンティ・ホール問題の確率の結果を見ることができます！

モンティ・ホール問題のシミュレーション Web アプリ

はじめに

👀 プレビュー

🎯 タスク

🏆 成果

プロジェクトファイルをセットアップする

HTML ページの構造を整える

インタラクティブな要素を追加する

ページにスタイルを追加する

グローバル変数を初期化する

ゲーム初期化関数を設定する

ドア選択のロジックを実装する

ヤギのいるドアを決定する

景品を開示するロジックを設定する

ゲーム結果を表示する

プロジェクトの実行

まとめ