소개
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 문제의 확률적 결과를 직접 확인할 수 있습니다!
