Untitled

<html>

    <head>

        <title>Reaction Test Game</title>

        <style type="text/css">

            #text {

            }

            #shape1 {
                width: 200px;
                height: 200px;
                background-color: red;

            }

            .square {


            }

            .circle {
                border-radius: 50%;
                background-color: red;
            }


        </style>


    </head>

    <body>

        <div id=text>

            <h1>Test your reactions!</h1>

            <p>Click on the boxes and circles as quick as you can!</p>

            <h4>Your time: </h4>

        </div>

        <div id="shape1"></div>

        <script type="text/javascript">

            function randomBoxOrCircle() {

                var shape = document.getElementById("shape1");
                console.log(shape);

                if (Math.random()<=0.5){
                    shape.className = "square";
                    //console.log(shape);

                } else {
                    shape.className = "circle";
                    //console.log(shape);
                }

            }

            function generateRandomNumber(maximumValue) {

                var number = Math.floor(Math.random() * maximumValue + 1);
                return number;
            }

            function generateNewShape() {
                randomBoxOrCircle();
                var test = document.getElementById("shape1").style.backgroundColor = "rgb("+generateRandomNumber(255)+", "+generateRandomNumber(255)+", "+generateRandomNumber(255)+")";
                console.log(test);
            }


            generateNewShape();


        </script>


    </body>


</html>