몬티 홀 문제 시뮬레이션 - 확률 게임 웹 앱

소개

Monty Hall 문제 시뮬레이션 프로젝트에 오신 것을 환영합니다. Monty Hall 문제는 게임 쇼 시나리오를 기반으로 하는 확률 퍼즐입니다. 이 프로젝트에서는 퍼즐을 시연하기 위한 간단한 웹 기반 시뮬레이션을 만드는 과정을 안내합니다. 이 프로젝트를 마치면 이론을 직접 테스트할 수 있는 기능적인 Monty Hall 시뮬레이션을 갖게 됩니다.

👀 미리보기

🎯 과제

이 프로젝트에서는 다음을 배우게 됩니다.

웹 애플리케이션의 기본 프로젝트 구조를 설정하는 방법.
HTML 및 CSS 를 사용하여 대화형 요소를 갖춘 간단한 사용자 인터페이스를 설계하는 방법.
JavaScript 를 사용하여 Monty Hall 문제를 시뮬레이션하는 게임 로직을 구현하는 방법.
사용자의 상호 작용에 따라 동적 피드백을 표시하는 방법.
실습 시뮬레이션을 통해 확률의 기본 개념을 이해하고 적용하는 방법.

🏆 성과

이 프로젝트를 완료하면 다음을 수행할 수 있습니다.

기본 웹 애플리케이션 구조를 개발할 수 있습니다.
HTML 및 CSS 를 사용하여 대화형 사용자 인터페이스를 만들 수 있습니다.
JavaScript 에서 게임 로직 및 조건부 의사 결정을 구현할 수 있습니다.
사용자의 행동에 따라 동적 피드백을 제공할 수 있습니다.
실용적인 시뮬레이션을 통해 확률 개념에 대한 더 깊은 이해를 얻을 수 있습니다.

프로젝트 파일 설정

코딩을 시작하기 전에 프로젝트 구조를 준비해 보겠습니다. 세 개의 파일이 필요합니다.

index.html - 웹 페이지의 구조를 담을 파일입니다.
styles.css - 시뮬레이션의 모양을 정의할 파일입니다.
script.js - 시뮬레이션의 로직을 담을 파일입니다.

시작하려면 위에 언급된 세 개의 파일을 만드세요.

cd ~/project
## Create the required files
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>
    <!-- The rest of the content will be added in the following steps. -->
  </body>
</html>

index.html은 웹 페이지의 기본 구조를 제공합니다. 이곳에서 사용자는 시뮬레이션과 상호 작용하게 됩니다.

✨ 솔루션 확인 및 연습

상호작용 요소 추가

이제 사용자가 시뮬레이션과 상호 작용할 수 있도록 HTML 페이지에 상호 작용 요소를 추가해 보겠습니다.

index.html에 다음 내용을 추가합니다.

<!-- Inside the body tag of index.html -->
<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>

이제 웹 페이지를 상호 작용 요소로 향상시키고 있습니다. 버튼과 결과 표시를 추가하여 사용자가 Monty Hall 게임에 적극적으로 참여하고 결정의 결과를 확인할 수 있습니다.

✨ 솔루션 확인 및 연습

페이지 스타일 지정

시뮬레이션의 시각적 매력을 위해 몇 가지 스타일을 추가해 보겠습니다. styles.css 파일을 열고 다음 내용을 붙여넣습니다.

/* styles.css content 
Stylesheet for a basic webpage layout:
- Sets a default light gray background, centered text alignment, and Arial font for the body.
- Styles for h2 and h3 headers with a specific blue color.
- Button styling includes:
  - Blue background color with white text.
  - Rounded corners.
  - Hover effect to darken the background and slightly enlarge the button.
- #result is a styled container with padding, border, and shadow.
- Paragraphs have a top and bottom margin of 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 파일은 시뮬레이션의 시각적 측면을 정의하는 곳입니다.

Body Styles (본문 스타일):
- font-family: "Arial", sans-serif;: 웹 페이지 본문의 기본 글꼴을 Arial 로 설정합니다. Arial 을 사용할 수 없는 경우, sans-serif 글꼴로 대체됩니다.
- margin: 0; padding: 0;: 기본 여백과 안쪽 여백을 제거합니다.
- background-color: #f8f9fa;: 전체 페이지에 밝은 회색 배경색을 설정합니다.
- color: #333;: 텍스트에 어두운 회색 색상을 설정합니다.
- text-align: center;: 페이지의 텍스트를 가운데 정렬합니다.
- padding-top: 50px;: 본문 상단에 50px 의 안쪽 여백을 추가합니다.
Header Styles (헤더 스타일):
- h2, h3 { color: #007bff; }: h2 및 h3 헤더는 특정 파란색 음영으로 색칠됩니다.
Button Styles (버튼 스타일):
- 버튼은 파란색 배경, 흰색 텍스트, 테두리 없음으로 설정됩니다.
- border-radius를 사용하여 둥근 모서리를 제공합니다.
- 버튼 위에 마우스를 올리면 배경색이 더 어두운 파란색 음영으로 바뀌고 버튼이 약간 커집니다 (transform: scale(1.05);).
Result Container (결과 컨테이너):
- #result: "result"라는 id 를 가진 요소를 나타냅니다.
- 흰색 배경, 회색 테두리 및 미묘한 그림자가 있습니다.
- 컨테이너는 둥근 모서리가 있는 카드 또는 상자처럼 스타일이 지정됩니다.
Paragraph Styles (단락 스타일):
- 단락 (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 함수는 각 라운드를 위한 준비를 합니다. 자동차의 위치를 무작위로 지정하여 모든 게임 반복이 예측 불가능하도록 보장합니다.

✨ 솔루션 확인 및 연습

문 선택 로직 구현

게임이 초기화되면 사용자의 문 선택과 Monty 가 염소 문 중 하나를 공개하는 것을 처리해야 합니다.

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 함수는 사용자의 문 선택을 캡처합니다. 염소 문 중 하나를 공개하고, 사용자가 전환할지 또는 유지할지 선택하도록 프롬프트하여 다음 단계를 준비합니다.

✨ 솔루션 확인 및 연습

염소 문 결정

Monty 가 염소를 공개하기 위해 어떤 문을 열지 결정하는 별도의 함수가 필요합니다. 이 문은 플레이어가 선택한 문이나 자동차가 있는 문이 아니어야 합니다.

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 함수의 개선은 게임 결과를 사용자에게 전달하는 역할을 합니다. 이 단계는 피드백에 필수적이며, 사용자가 자신의 결정의 결과를 확인하고 확률적 결과를 관찰하기 위해 반복적인 플레이를 장려합니다.

✨ 솔루션 확인 및 연습

프로젝트 실행

Monty Hall 시뮬레이션을 실행하려면:

모든 파일 (index.html, styles.css, script.js) 이 저장되었는지 확인합니다.
웹 브라우저에서 index.html 파일을 엽니다.

마지막으로, 이 단계는 사용자가 브라우저에서 시뮬레이션을 실행하는 방법을 안내하여 코드를 시각적이고 상호 작용적인 경험으로 변환합니다.

✨ 솔루션 확인 및 연습

요약

축하합니다! Monty Hall 문제 시뮬레이션을 성공적으로 구축했습니다. 이 프로젝트를 통해 간단한 웹 프로젝트를 구성하고, 요소의 스타일을 지정하며, 상호 작용적인 JavaScript 기능을 구현하는 방법을 배웠습니다. 이제 여러 시뮬레이션을 실행하여 Monty Hall 문제의 확률적 결과를 직접 확인할 수 있습니다!

몬티 홀 시뮬레이션 웹 앱

소개

👀 미리보기

🎯 과제

🏆 성과

프로젝트 파일 설정

HTML 페이지 구조화

상호작용 요소 추가

페이지 스타일 지정

전역 변수 초기화

게임 초기화 함수 설정

문 선택 로직 구현

염소 문 결정

상금 공개 로직 설정

게임 결과 표시

프로젝트 실행

요약