Monty Hall problem is a popular probability puzzle based on a television game show and named after its host, Monty Hall.
In this Monty Hall game,
- There will be three closed doors and you will be given a choice to choose one of them. Behind one of the doors, there is a car and behind the other doors, goats. The host knows about the placement of the car and goats.
- After you choose a door, the host opens one of the other two doors which has a goat.
- Now, you can either stick with your original choice of door or you can switch.
Here’s a glimpse of the game.
HTML: The main parts we need in the game are:
- Dialogue space for the host, where he/she interacts with the player.
- The 3 doors
- Result page
CSS: Let’s add a little styling to our game. It’s highly customizable and feels free to add your own stylings.
- Declare all the global variables.
- Hide unnecessary elements.
- Create a function for randomly shuffling the doors every time we play.
- Add Event listeners for each door when chosen.
- For every door that is clicked, show the host dialogue, open a door that contains a goat, and ask the player to choose.
Then, according to the player’s choice open the door and display the result page.
Declaring the variables:
Hiding the unnecessary elements:
Create a function for randomly shuffling the doors every time we play.
Event Listener for door1:
The switchAndWin(), switchAndLose(), noSwitchAndWin(),noSwitchAndLose() are four functions that display the result of the player based on their choice.
Similarly, for the door2 and door3, add Event listeners when clicked.
Here’s the live version of the game: https://monty-hall-gfg.netlify.app/