Skip to content

Instantly share code, notes, and snippets.

@adiamaan92

adiamaan92/.block

Last active August 23, 2016 23:55
Show Gist options
  • Save adiamaan92/3fac9f6151c2b2242ffec26f74bd64fd to your computer and use it in GitHub Desktop.
Save adiamaan92/3fac9f6151c2b2242ffec26f74bd64fd to your computer and use it in GitHub Desktop.
Download ZIP
Monty Hall Problem
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE = html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="monty_hall.css">
<style>
</style>
<title>
D3 Try out
</title>
</head>
<body>
<script src="//d3js.org/d3.v4.min.js" charset="UTF-8"></script>
<script>
var width = 900,
height = 340;
var winningPercentage = 0;
var timesPlayed = 0;
var gameswon = 0;
var statsText;
var cValue = [];
var i;
var answer;
var currentColor = "grey";
var userDot;
var userIndex;
var afterSelect;
var userSelected = 0;
var child;
var cnt = 0;
var expose;
var finalMessage1;
var finalMessage2;
var winningMessage;
var loosingMessage;
var circles;
var graphicTitle;
var initialMessage;
var retry;
var colorLegends1;
var colorLegends2;
var colorLegends3;
var colorLegends4;
var stats;
var chart = d3.select("body")
.append("svg")
.attr("width",width)
.attr("height",height);
myMain();
function myMain() {
cValue = [];
child = 0;
userSelected = 0;
currentColor = "grey";
if (!d3.select("#statsId").empty()) {
statsText.remove();
}
winningPercentage = gameswon/timesPlayed*100;
stats = "No of Games Played : "+timesPlayed+", No of games won : "+gameswon+", Winning Percentage :"+winningPercentage+" %";
statsText = d3.select("svg").append("text")
.attr("x",width/2)
.attr("y",240)
.attr("font-size","16px")
.attr("text-anchor","middle")
.text(stats)
.attr("id","statsId");
timesPlayed = timesPlayed+1;
if(!d3.select("#circlesId").empty()){
d3.select("circle").remove();
d3.select("circle").remove();
d3.select("circle").remove();
}
if (!d3.select("#rebootline").empty()) {
retry.remove();
}
if (!d3.select("#clegends1").empty()) {
colorLegends1.remove();
}
if (!d3.select("#clegends2").empty()) {
colorLegends2.remove();
}
if (!d3.select("#clegends3").empty()) {
colorLegends3.remove();
}
if (!d3.select("#clegends4").empty()) {
colorLegends4.remove();
}
for (i=0;i<=2;i++)
{
if (i === 0)
{
cValue.push(Math.round(Math.random()*1));
}
if (i == 1 && cValue[0] == 1) {
cValue.push(0);
cValue.push(0);
break;
}
else if (i == 1 && cValue[0] === 0) {
cValue.push(Math.round(Math.random()*1));
}
else if (i == 2 && cValue[1] == 1) {
cValue.push(0);
}
else if (i == 2 && cValue[1] === 0 && cValue[0] === 0) {
cValue.push(1);
}
}
for (i=0;i<=2;i++)
{
if (cValue[i] == 1) {
answer = i;
}
}
//window.alert(cValue[0]+"|"+cValue[1]+"|"+cValue[2]+"|"+userSelected)
circles = chart.selectAll("circle")
.data(cValue).enter()
.append("circle")
.attr("r",25)
.attr("cx",function(d,i){return width/4+i*(width/4);})
.attr("cy",height/2)
.style("fill","grey")
.attr("id","circlesId");
graphicTitle = d3.select("svg").append("text")
.attr("x",width/2)
.attr("y",20)
.html("Monty Hall Problem")
.attr("text-anchor","middle")
.style("font-size","22px");
initialMessage = d3.select("svg").append("text")
.attr("x",width/2)
.attr("y",40)
.html("Let the game begin ..!! Start by clicking on a dot (door)")
.attr("text-anchor","middle")
.style("font-size","16px")
//.style("font-family","Roboto")
.attr("attr","inimsg");
circles.on("click",function(d,i){
if(!d3.select("#firstClick").empty())
{
expose.remove();
}
if (currentColor == "grey" && userSelected === 0) {
d3.selectAll("circle").style("fill","grey");
d3.select(this).style("fill","yellow");
currentColor = "yellow";
userDot = d;
userIndex = i;
initialMessage.remove();
if (d3.select("#firstclick").empty()) {
afterSelection();
}
}
else if (currentColor == "yellow" && userSelected === 0) {
d3.selectAll("circle").style("fill","grey");
d3.select(this).style("fill","yellow");
currentColor = "grey";
userDot = d;
userIndex = i;
if (d3.select("#firstclick").empty()) {
afterSelection();
}
}
else if (currentColor == "grey" && userSelected == 1) {
d3.selectAll("circle").style("fill","grey");
d3.select(child).style("fill","red");
d3.select(this).style("fill","yellow");
currentColor = "yellow";
initialMessage.remove();
userDot = d;
userIndex = i;
expose.remove();
}
else if (currentColor == "yellow" && userSelected == 1) {
d3.selectAll("circle").style("fill","grey");
d3.select(child).style("fill","red");
d3.select(this).style("fill","yellow");
currentColor = "grey";
userDot = d;
userIndex = i;
expose.remove();
}
});
function tryAgain()
{
//window.alert("funnction called")
retry = d3.select("svg").append("text")
.attr("x",width/2)
.attr("y",60)
.attr("text-anchor","middle")
.attr("font-size","16px")
.text("Click on this line to play again")
.attr("id","rebootline")
.attr("text-decoration","underline")
.style("cursor","pointer")
.on("click",function(){
if (!d3.select("#wmsg").empty()) {
winningMessage.remove();
}
if (!d3.select("#lmsg").empty()) {
loosingMessage.remove();
}
myMain();
}
);
}
function afterSelection(){
initialMessage.remove();
expose=d3.select("svg").append("text")
.attr("x",width/2)
.attr("y",40)
.html("Once you have decided the door click on this line !!")
.attr("id","firstClick")
.attr("text-anchor","middle")
.style("font-size","16px")
.attr("text-decoration","underline")
.style("cursor","pointer")
//.style("font-family","Roboto")
.on("click",function(){exposeSheep();
expose.remove();
finalSelection();})}
function exposeSheep() {
userSelected = 0;
while (userSelected != 1) {
i = Math.round(Math.random()*2);
if (i != userIndex && cValue[i] === 0) {
userSelected = 1;
currentColor = "grey";
i=i+1;
child = "circle:nth-of-type("+i+")";
d3.select(child).style("fill","red").on("click",function(){
window.alert("You wanna loose on purpose ??, Select a different dot please..");
}
)
}
}
}
function finalSelection(args) {
finalMessage1 = d3.select("svg").append("text")
.text("Red - door with Sheep, Remain with your door or swap")
.attr("x",width/2)
.attr("y",40)
.attr("font-size","16px")
.attr("text-anchor","middle");
finalMessage2 = d3.select("svg").append("text")
.text("Once done selecting the door, click on this line")
.attr("x",width/2)
.attr("y",60)
.attr("font-size","16px")
.attr("text-anchor","middle")
.attr("text-decoration","underline")
.style("cursor","pointer")
.on("click",function(){
//window.alert(userIndex+"|"+answer);
checkAnswer();});
}
function checkAnswer()
{
if(userIndex == answer)
{
answer = answer+1;
finalMessage1.remove();
finalMessage2.remove();
child = "circle:nth-of-type("+answer+")";
d3.select(child).style("fill","green");
winningMessage = d3.select("svg").append("text")
.attr("x",width/2)
.attr("y",40)
.attr("text-anchor","middle")
.attr("font-size","16px")
.text("Congrats, You won the Monty Hall Quiz..!!!")
.attr("id","wmsg");
gameswon = gameswon+1;
tryAgain();
}
else if (userIndex != answer) {
//window.alert("You Lost..!!")
answer = answer+1;
finalMessage1.remove();
finalMessage2.remove();
child = "circle:nth-of-type("+answer+")";
d3.select(child).style("fill","green");
loosingMessage = d3.select("svg").append("text")
.attr("x",width/2)
.attr("y",40)
.attr("text-anchor","middle")
.attr("font-size","16px")
.text("Sorry, You lost the Monty Hall Quiz..")
.attr("id","lmsg");
tryAgain();
}
}
colorLegends1 = d3.select("svg").append("text")
.attr("x",width/2)
.attr("y",260)
.text("Grey - Unselected closed Door")
.attr("text-anchor","middle")
.attr("font-size","14px")
.attr("id","clegends1")
.attr("fill","grey");
colorLegends2 = d3.select("svg").append("text")
.attr("x",width/2)
.attr("y",280)
.text("Yellow - Selected Closed Door")
.attr("text-anchor","middle")
.attr("font-size","14px")
.attr("id","clegends2")
.attr("fill","yellow");
colorLegends3 = d3.select("svg").append("text")
.attr("x",width/2)
.attr("y",300)
.text("Red - Opened Door with a Goat")
.attr("text-anchor","middle")
.attr("font-size","14px")
.attr("id","clegends3")
.attr("fill","red");
colorLegends4 = d3.select("svg").append("text")
.attr("x",width/2)
.attr("y",320)
.text("Green - Opened Door with a car")
.attr("text-anchor","middle")
.attr("font-size","14px")
.attr("id","clegends4")
.attr("fill","green")
.attr("stroke-width","1px");
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment