I am trying to make shapes with variable border radius.

Based on a modifier the shape should have a border radius of either 50 % (when `Math.random() > 0.5`), 20 % (when `Math.random() > 0.8`), and default to 0 % giving a plain square.

However, when you use the on-click function it will only give either the 20 % radius or the default shape, and not the 50 % radius.

Here is a simplified version of the key method:

```js
function makeShapeAppear() {
    var top = Math.random() * 400;
    var left = Math.random() * 400;
    var width = (Math.random() * 100) + 100;

    if (Math.random() > 0.5) {
        document.getElementById("shape").style.borderRadius = "50%"
    } else {
        document.getElementById("shape").style.borderRadius = "0";
    }

    if (Math.random() > 0.8) {
        document.getElementById("shape").style.borderRadius = "20%"
    } else {
        document.getElementById("shape").style.borderRadius = "0";
    }
}

```

The complete code snippet:

```js
var bestTime = 0;

var start = new Date().getTime();

function getRandomColor() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}

function makeShapeAppear() {
    var top = Math.random() * 400;
    var left = Math.random() * 400;
    var width = (Math.random() * 100) + 100;
    if (Math.random() > 0.5) {
        document.getElementById("shape").style.borderRadius = "50%"
    } else {
        document.getElementById("shape").style.borderRadius = "0";
    }

    if (Math.random() > 0.8) {
        document.getElementById("shape").style.borderRadius = "20%"
    } else {
        document.getElementById("shape").style.borderRadius = "0";
    }

    document.getElementById("shape").style.backgroundColor = getRandomColor();
    document.getElementById("shape").style.width = width + "px";
    document.getElementById("shape").style.height = width + "px";
    document.getElementById("shape").style.top = top + "px";
    document.getElementById("shape").style.left = left + "px";
    document.getElementById("shape").style.display = "block";
    start = new Date().getTime();
}

function appearAfterDelay() {
    setTimeout(makeShapeAppear, Math.random() * 2000)
}

appearAfterDelay();

document.getElementById("shape").onclick = function() {
    document.getElementById("shape").style.display = "none";
    var end = new Date().getTime();
    var timeTaken = (end - start) / 1000;
    document.getElementById("timeTaken").innerHTML = timeTaken + "'s";
    if (timeTaken < bestTime || bestTime == 0) {
        bestTime = timeTaken;
        document.getElementById("best").innerHTML = bestTime + "s"
    }
    appearAfterDelay();
}
```

```css
body {
    background-color: azure;
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}

#shape {
    background-color: red;
    width: 200px;
    height: 200px;
    display: none;
    position: relative;
}

.bold {
    font-weight: bold;
}

#best {
    color: limegreen;
    font-weight: bold;
}
```

```html
<head>
    <title>Javascript Test You Reactions</title>
</head>

<body>
    <h1>Test Your Reactions!</h1>
    <P>Click on the squares and circles as <em><ins>quickly</ins></em>as you can!</P>
    <p class="bold">Your time: <span id="timeTaken"></span></p>
    <p>Best time: <span id="best"></span></p>
    <div id="shape"></div>
</body>
```