Simulación del Problema de Monty Hall

Introducción

Bienvenido al proyecto de simulación del Problema de Monty Hall. El problema de Monty Hall es un acertijo de probabilidad basado en un escenario de concurso de televisión. En este proyecto, lo guiaremos para crear una simulación web simple para demostrar el acertijo. Al final, tendrás una simulación funcional de Monty Hall para probar la teoría por ti mismo.

👀 Vista previa

🎯 Tareas

En este proyecto, aprenderás:

Cómo configurar una estructura básica de proyecto para una aplicación web.
Cómo diseñar una interfaz de usuario simple con elementos interactivos utilizando HTML y CSS.
Cómo implementar la lógica del juego utilizando JavaScript, simulando el problema de Monty Hall.
Cómo mostrar retroalimentación dinámica a los usuarios basada en sus interacciones.
Cómo entender y aplicar conceptos fundamentales de probabilidad a través de una simulación práctica.

🏆 Logros

Después de completar este proyecto, podrás:

Desarrollar una estructura básica de aplicación web.
Crear una interfaz de usuario interactiva utilizando HTML y CSS.
Implementar la lógica del juego y la toma de decisiones condicionales en JavaScript.
Proporcionar retroalimentación dinámica a los usuarios basada en sus acciones.
Adquirir una comprensión más profunda de los conceptos de probabilidad a través de una simulación práctica.

Configurar los archivos del proyecto

Antes de sumergirnos en la codificación, preparemos la estructura de nuestro proyecto. Necesitaremos tres archivos:

index.html: Este contendrá la estructura de nuestra página web.
styles.css: Aquí definiremos la apariencia de nuestra simulación.
script.js: Este archivo contendrá la lógica detrás de nuestra simulación.

Para comenzar, cree los tres archivos mencionados anteriormente.

cd ~/proyecto
## Crea los archivos necesarios
touch index.html styles.css script.js

En este paso, estamos configurando los archivos fundamentales para nuestra simulación web. Estos archivos contendrán la estructura, el estilo y la lógica de nuestra aplicación.

Estructurar la página HTML

En este paso, vamos a estructurar la página web. Abra el archivo index.html y agregue el siguiente contenido:

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

  <body>
    <h2>Simulación del Problema de Monty Hall</h2>
    <!-- El resto del contenido se agregará en los siguientes pasos. -->
  </body>
</html>

El index.html proporciona la estructura básica de nuestra página web. Aquí es donde el usuario interactuará con nuestra simulación.

✨ Revisar Solución y Practicar

Agregar elementos interactivos

Ahora, agreguemos elementos interactivos a nuestra página HTML para que el usuario interactúe con la simulación.

Agregue el siguiente contenido a index.html:

<!-- Dentro de la etiqueta body de index.html -->
<p>Elija una puerta para comenzar:</p>
<button onclick="pickDoor(1)">Puerta 1</button>
<button onclick="pickDoor(2)">Puerta 2</button>
<button onclick="pickDoor(3)">Puerta 3</button>

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

<h3>Resultados:</h3>
<p>Ganados al cambiar: <span id="switchWins">0</span></p>
<p>Perdidos al cambiar: <span id="switchLosses">0</span></p>
<p>Ganados al quedarse: <span id="stayWins">0</span></p>
<p>Perdidos al quedarse: <span id="stayLosses">0</span></p>

Ahora estamos mejorando nuestra página web con elementos interactivos. Al agregar botones y una muestra de resultados, el usuario puede participar activamente en el juego de Monty Hall y ver los resultados de sus decisiones.

✨ Revisar Solución y Practicar

Dar estilo a la página

Para que nuestra simulación sea visualmente atractiva, agreguemos algunos estilos. Abra el archivo styles.css y pegue el siguiente contenido:

/* Contenido de styles.css 
Hojas de estilos para un diseño básico de página web:
- Establece un fondo gris claro predeterminado, alineación de texto centrada y fuente Arial para el cuerpo.
- Estilos para los encabezados h2 y h3 con un color azul específico.
- Estilos de botón incluyen:
  - Color de fondo azul con texto blanco.
  - Esquinas redondeadas.
  - Efecto al pasar el cursor para oscurecer el fondo y aumentar ligeramente el botón.
- #result es un contenedor con estilo con relleno, borde y sombra.
- Los párrafos tienen un margen superior e inferior de 10 px.
*/

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

El archivo styles.css es donde definimos los aspectos visuales de nuestra simulación.

Estilos del cuerpo:
- font-family: "Arial", sans-serif;: Establece la fuente predeterminada para el cuerpo de la página web como Arial. Si Arial no está disponible, se utiliza cualquier fuente sans-serif como alternativa.
- margin: 0; padding: 0;: Elimina los márgenes y rellenos predeterminados.
- background-color: #f8f9fa;: Establece un color de fondo gris claro para toda la página.
- color: #333;: Establece un color de texto gris oscuro.
- text-align: center;: Alinea el texto al centro de la página.
- padding-top: 50px;: Agrega un relleno de 50 px en la parte superior del cuerpo.
Estilos de los encabezados:
- h2, h3 { color: #007bff; }: Los encabezados h2 y h3 se colorean con una tonalidad específica de azul.
Estilos de los botones:
- El botón tiene un fondo azul, texto blanco y sin borde.
- Las esquinas redondeadas se dan con border-radius.
- Al pasar el cursor sobre el botón, su color de fondo se vuelve una tonalidad más oscura de azul y el botón aumenta ligeramente de tamaño (transform: scale(1.05);).
Contenedor de resultados:
- #result: Representa un elemento con el id "result".
- Tiene un fondo blanco, un borde gris y una sombra sutil.
- El contenedor está diseñado para parecer una tarjeta o una caja con esquinas redondeadas.
Estilos de los párrafos:
- Los párrafos (p) tienen un margen de 10 px en la parte superior e inferior. Esto asegura el espaciado entre párrafos consecutivos y otros elementos.

Este paso garantiza que la interfaz de usuario sea agradable y legible.

✨ Revisar Solución y Practicar

Inicializar variables globales

Ahora, implementemos la lógica del juego.

Comencemos configurando las variables globales que usaremos para rastrear el estado del juego.

Abra script.js y agregue:

// Contenido de script.js

// Variables globales para rastrear el estado del juego
let selectedDoor;
let carBehindDoor;
let switchWins = 0;
let stayWins = 0;
let switchLosses = 0;
let stayLosses = 0;

Estamos definiendo un conjunto de variables globales en el archivo script.js. Estas variables ayudan a manejar el estado del juego, como qué puerta se eligió, dónde está el automóvil y el recuento de victorias y derrotas.

✨ Revisar Solución y Practicar

Configurar la función de inicialización del juego

Ahora, agregaremos una función para inicializar el juego. Esta función aleatorizará la ubicación del automóvil al comienzo de cada ronda.

Agregue lo siguiente a script.js:

// Inicializa el juego aleatorizando la ubicación del automóvil
function initializeGame() {
  carBehindDoor = Math.floor(Math.random() * 3) + 1;
  document.getElementById("result").innerText = "";
}

La función initializeGame prepara el escenario para cada ronda. Aleatoriza la ubicación del automóvil, lo que garantiza que cada iteración del juego sea impredecible.

✨ Revisar Solución y Practicar

Implementar la lógica de selección de puerta

Una vez que el juego está inicializado, necesitamos manejar la selección de puerta por parte del usuario y la revelación de una de las puertas con una cabra por parte de Monty.

Agregue al final de script.js:

// Una función que se llama cuando se elige una puerta
function pickDoor(doorNumber) {
  initializeGame();
  selectedDoor = doorNumber;
  let goatDoor = getGoatDoor();
  document.getElementById("result").innerHTML =
    `Has elegido la Puerta ${selectedDoor}. Monty abre la Puerta ${goatDoor} para mostrar una cabra.<br>` +
    `¿Quieres <button onclick="revealPrize(true)">Cambiar</button> o ` +
    `<button onclick="revealPrize(false)">Quedarte</button>?`;
}

La función pickDoor captura la selección de puerta del usuario. Prepara la siguiente fase al revelar una de las puertas con una cabra y preguntando al usuario si desea cambiar o quedarse.

✨ Revisar Solución y Practicar

Determinar la puerta con la cabra

Necesitamos una función separada para determinar qué puerta Monty abrirá para mostrar una cabra. Esta puerta no puede ser la que el jugador eligió ni la que tiene el automóvil detrás.

Continúe agregando al final de script.js:

// Encuentra una puerta con una cabra detrás
function getGoatDoor() {
  let goatDoor;
  do {
    goatDoor = Math.floor(Math.random() * 3) + 1;
  } while (goatDoor === selectedDoor || goatDoor === carBehindDoor);
  return goatDoor;
}

getGoatDoor es una función crucial que determina qué puerta, aparte de la elegida por el usuario y la puerta del automóvil, se abrirá para mostrar una cabra. Utiliza una selección aleatorizada sujeta a las reglas del juego.

✨ Revisar Solución y Practicar

Configurar la lógica de revelación del premio

Por último, configuraremos la lógica para manejar la revelación final basada en la elección del usuario de cambiar o quedarse. Por ahora, esta función será un marcador de posición y se expandirá en los pasos siguientes.

Complete la adición a su archivo script.js con:

// Revela el premio detrás de la puerta elegida
function revealPrize(switchDoor) {
  if (switchDoor) {
    selectedDoor = 6 - selectedDoor - getGoatDoor();
  }
  // Agregaremos más lógica aquí en los siguientes pasos.
}

initializeGame();

La función revealPrize maneja la última parte del juego. Basada en la elección del usuario de cambiar o quedarse, esta función determinará finalmente si el usuario gana un automóvil o obtiene una cabra.

✨ Revisar Solución y Practicar

Mostrar los resultados del juego

En este paso, mejoraremos la función revealPrize para mostrar los resultados de la elección del usuario. Agregue el siguiente código a la función revealPrize en script.js:

// Continuando la función revealPrize en script.js

if (selectedDoor === carBehindDoor) {
  if (switchDoor) {
    switchWins++;
    document.getElementById("switchWins").innerText = switchWins;
  } else {
    stayWins++;
    document.getElementById("stayWins").innerText = stayWins;
  }
  document.getElementById("result").innerText =
    "¡Felicitaciones! Has ganado un automóvil. Elige una puerta para jugar de nuevo.";
} else {
  if (switchDoor) {
    switchLosses++;
    document.getElementById("switchLosses").innerText = switchLosses;
  } else {
    stayLosses++;
    document.getElementById("stayLosses").innerText = stayLosses;
  }
  document.getElementById("result").innerText =
    "Lo siento, has obtenido una cabra. Elige una puerta para jugar de nuevo.";
}

La mejora de la función revealPrize aquí tiene el objetivo de comunicar los resultados del juego al usuario. Este paso es vital para la retroalimentación, permitiendo al usuario ver las consecuencias de su decisión y alentando a jugar repetidamente para observar los resultados de las probabilidades.

✨ Revisar Solución y Practicar

Ejecutando el proyecto

Para ver la simulación de Monty Hall en acción:

Asegúrese de guardar todos sus archivos (index.html, styles.css, script.js).
Abra el archivo index.html en un navegador web.

Finalmente, este paso guía al usuario sobre cómo ejecutar la simulación en su navegador, transformando el código en una experiencia visual e interactiva.

Resumen

¡Felicitaciones! Has construido con éxito una simulación del Problema de Monty Hall. Siguiendo este proyecto, has aprendido cómo estructurar un proyecto web simple, dar estilo a sus elementos e implementar funcionalidad interactiva de JavaScript. Ahora, puedes ejecutar múltiples simulaciones para ver los resultados de las probabilidades del problema de Monty Hall por ti mismo.

Aplicación web de simulación del Problema de Monty Hall

Introducción

👀 Vista previa

🎯 Tareas

🏆 Logros

Configurar los archivos del proyecto

Estructurar la página HTML

Agregar elementos interactivos

Dar estilo a la página

Inicializar variables globales

Configurar la función de inicialización del juego

Implementar la lógica de selección de puerta

Determinar la puerta con la cabra

Configurar la lógica de revelación del premio

Mostrar los resultados del juego

Ejecutando el proyecto

Resumen