Built with blockbuilder.org
Last active
August 23, 2016 23:55
Monty Hall Problem
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
license: mit |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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