Untitled

<!DOCTYPE html>


<html>
<body>

<div id="ui">
<p id="score">Score: 0</p>
<p id="trials"></p>
</div>

<canvas id="bar0" class="bar" height="500" width="15" onmousedown="Click(event)"></canvas>
<canvas id="bar1" class="bar" height="500" width="15" onmousedown="Click(event)"></canvas>
<canvas id="bar2" class="bar" height="500" width="15" onmousedown="Click(event)"></canvas>
<canvas id="bar3" class="bar" height="500" width="15" onmousedown="Click(event)"></canvas>

<script>

    y=Array.apply(null, Array(4)).map(function (_, i) {return (i+1)*100;});
    indices=Array.apply(null, Array(4)).map(function (_, i) {return i;});
    index=RandomIndex()
    console.log(index)
    document.getElementById("bar"+index).className += " focus"

    trials=10
    totalScore=0

    document.getElementById("trials").innerHTML="Trials Remaining: "+trials;

    document.addEventListener("mouseup", function(){document.removeEventListener("mousemove", Move);});
    function Click(event){
        bar = event.target
        if(bar.className.indexOf(" focus") > 0){
            Move(event);
            document.addEventListener("mousemove", Move);
        }
    }

    function RandomIndex(){
        return indices[Math.floor(Math.random() * indices.length)];
    }

    function Move(event){
        bar = document.getElementsByClassName("focus")[0];
        ypos = window.scrollY + Math.max(0, event.y-bar.offsetTop);
        ctx = bar.getContext("2d");
        ctx.clearRect(0, 0, bar.width, bar.height);
        ctx.fillRect(0, ypos, 15, bar.height);
    }

    function Submit(event){
        keyCode = event.keyCode
        if(keyCode == 32){
            trials-=1
            var estimatedY=bar.height-(Math.min(ypos,bar.height))
            var trueY=y[index]
            var absoluteError=Math.abs(estimatedY-trueY)
            score=bar.height-absoluteError
            totalScore+=score
            indices.splice(indices.indexOf(index),1)
            index=RandomIndex()
            console.log(indices)
            bar = document.getElementsByClassName("focus")[0]
            bar.className = bar.className.replace(" focus", "")
            document.getElementById("bar"+index).className += " focus"
            document.getElementById("trials").innerHTML="Trials Remaining: "+trials;
            document.getElementById("score").innerHTML="Score: "+totalScore;

        }
    }

    document.addEventListener("keydown", Submit);

</script>

<style type="text/css">
    .bar{
        display: inline-block;
        border-style: solid;
        border-width: 1px;
        border-color: black;
    }
    .focus{
        border-color: red;
    }
</style>

</body>
</html>