Simulação do Problema de Monty Hall - Probabilidade Interativa

Introdução

Bem-vindo ao projeto de Simulação do Problema de Monty Hall. O problema de Monty Hall é um quebra-cabeça de probabilidade baseado em um cenário de programa de jogos. Neste projeto, vamos guiá-lo através da criação de uma simulação simples baseada na web para demonstrar o quebra-cabeça. No final, você terá uma simulação funcional do Monty Hall para testar a teoria por si mesmo.

👀 Pré-visualização

Monty Hall

🎯 Tarefas

Neste projeto, você aprenderá:

Como configurar uma estrutura básica de projeto para uma aplicação web.
Como projetar uma interface de usuário simples com elementos interativos usando HTML e CSS.
Como implementar a lógica do jogo usando JavaScript, simulando o problema de Monty Hall.
Como exibir feedback dinâmico aos usuários com base em suas interações.
Como entender e aplicar conceitos fundamentais de probabilidade através de uma simulação prática.

🏆 Conquistas

Após concluir este projeto, você será capaz de:

Desenvolver uma estrutura básica de aplicação web.
Criar uma interface de usuário interativa usando HTML e CSS.
Implementar a lógica do jogo e a tomada de decisão condicional em JavaScript.
Fornecer feedback dinâmico aos usuários com base em suas ações.
Obter uma compreensão mais profunda dos conceitos de probabilidade através de uma simulação prática.

Configurar os Arquivos do Projeto

Antes de mergulhar na codificação, vamos preparar a estrutura do nosso projeto. Precisaremos de três arquivos:

index.html - Este arquivo conterá a estrutura da nossa página web.
styles.css - Aqui, definiremos a aparência da nossa simulação.
script.js - Este arquivo conterá a lógica por trás da nossa simulação.

Para começar, crie os três arquivos mencionados acima.

cd ~/project
## Create the required files
touch index.html styles.css script.js

Nesta etapa, estamos configurando os arquivos fundamentais para nossa simulação baseada na web. Esses arquivos conterão a estrutura, o estilo e a lógica da nossa aplicação.

Estruturar a Página HTML

Nesta etapa, vamos definir a estrutura da nossa página web. Abra o arquivo index.html e adicione o seguinte conteúdo:

<!-- 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>

O index.html fornece a estrutura básica da nossa página web. É aqui que o usuário irá interagir com a nossa simulação.

Adicionar Elementos Interativos

Agora, vamos adicionar elementos interativos à nossa página HTML para que o usuário possa interagir com a simulação.

Adicione o seguinte conteúdo ao 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>

Estamos agora a aprimorar nossa página web com elementos interativos. Ao adicionar botões e uma exibição de resultados, o usuário pode participar ativamente do jogo Monty Hall e ver os resultados de suas decisões.

Estilizar a Página

Para que nossa simulação seja visualmente atraente, vamos adicionar alguns estilos. Abra o arquivo styles.css e cole o seguinte conteúdo:

/* 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;
}

O arquivo styles.css é onde definimos os aspectos visuais da nossa simulação.

Estilos do Corpo (Body Styles):
- font-family: "Arial", sans-serif;: Define a fonte padrão para o corpo da página web como Arial. Se Arial não estiver disponível, ele usará qualquer fonte sans-serif.
- margin: 0; padding: 0;: Remove a margem e o preenchimento padrão.
- background-color: #f8f9fa;: Define uma cor de fundo cinza claro para toda a página.
- color: #333;: Define uma cor cinza escuro para o texto.
- text-align: center;: Alinha o texto no centro da página.
- padding-top: 50px;: Adiciona um preenchimento de 50px na parte superior do corpo.
Estilos do Cabeçalho (Header Styles):
- h2, h3 { color: #007bff; }: Os cabeçalhos h2 e h3 são coloridos com um tom específico de azul.
Estilos do Botão (Button Styles):
- O botão tem um fundo azul, texto branco e sem borda.
- Cantos arredondados são dados com border-radius.
- Ao passar o mouse sobre o botão, sua cor de fundo se torna um tom mais escuro de azul e o botão aumenta ligeiramente (transform: scale(1.05);).
Container de Resultados (Result Container):
- #result: Representa um elemento com o id "result".
- Ele tem um fundo branco, borda cinza e uma sombra sutil.
- O container é estilizado para parecer um cartão ou uma caixa com cantos arredondados.
Estilos de Parágrafo (Paragraph Styles):
- Os parágrafos (p) têm uma margem de 10px na parte superior e inferior. Isso garante o espaçamento entre parágrafos consecutivos e outros elementos.

Esta etapa garante que a interface do usuário seja agradável e legível.

Inicializar Variáveis Globais

Agora, vamos implementar a lógica do jogo.

Comece configurando as variáveis globais que usaremos para rastrear o estado do jogo.

Abra script.js e adicione:

// 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;

Estamos definindo um conjunto de variáveis globais no arquivo script.js. Essas variáveis ajudam a gerenciar o estado do jogo, como qual porta foi escolhida, onde o carro está localizado e a contagem de vitórias e derrotas.

Configurar a Função de Inicialização do Jogo

Agora, adicionaremos uma função para inicializar o jogo. Esta função irá randomizar a localização do carro no início de cada rodada.

Adicione o seguinte a script.js:

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

A função initializeGame prepara o cenário para cada rodada. Ela randomiza a localização do carro, garantindo que cada iteração do jogo seja imprevisível.

Implementar a Lógica de Seleção da Porta

Uma vez que o jogo é inicializado, precisamos lidar com a seleção da porta pelo usuário e a revelação de uma das portas com cabras por Monty.

Adicione ao final de 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>?`;
}

A função pickDoor captura a seleção da porta pelo usuário. Ela prepara a próxima fase revelando uma das portas com cabras e solicitando ao usuário a escolha de trocar (switch) ou ficar (stay).

Determinar a Porta com a Cabra

Precisamos de uma função separada para determinar qual porta Monty abrirá para revelar uma cabra. Essa porta não pode ser a que o jogador selecionou ou a que tem o carro atrás.

Continue adicionando ao final de 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 é uma função crucial que determina qual porta, diferente da selecionada pelo usuário e da porta com o carro, será aberta para revelar uma cabra. Ela emprega uma seleção randomizada restrita pelas regras do jogo.

Configurar a Lógica de Revelação do Prémio

Finalmente, configuraremos a lógica para lidar com a revelação final com base na escolha do usuário de trocar (switch) ou ficar (stay). Por enquanto, esta função será um espaço reservado e será expandida nos passos subsequentes.

Complete suas adições ao script.js com:

// 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();

A função revealPrize lida com a parte final do jogo. Com base na escolha do usuário de trocar ou ficar, esta função determinará, em última análise, se o usuário ganha um carro ou recebe uma cabra.

Exibir os Resultados do Jogo

Nesta etapa, aprimoraremos a função revealPrize para exibir os resultados da escolha do usuário. Adicione o seguinte código à função revealPrize em script.js:

// 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.";
}

O aprimoramento da função revealPrize aqui serve para comunicar os resultados do jogo ao usuário. Esta etapa é vital para o feedback, permitindo que o usuário veja as consequências de sua decisão e incentivando jogadas repetidas para observar os resultados de probabilidade.

Executando o Projeto

Para ver a simulação de Monty Hall em ação:

Certifique-se de que todos os seus arquivos (index.html, styles.css, script.js) foram salvos.
Abra o arquivo index.html em um navegador web.

open web

Finalmente, esta etapa orienta o usuário sobre como executar a simulação em seu navegador, transformando o código em uma experiência visual e interativa.