Monty Hall Problem

<!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 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();});
}

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>

https://d3js.org/d3.v4.min.js