# Computing Operators Quiz

## In this example below you will see how to do a Computing Operators Quiz with some HTML / CSS and Javascript

This awesome code was written by 101Computing, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
• HTML
• CSS
• JavaScript
<!DOCTYPE html>
<html lang="en" >

<meta charset="UTF-8">
<title>Computing Operators Quiz</title>

<body>

<center>
<div id="quiz">
</div>
<div id="operator">+</div>
<div id="score">
<div id="score-label">Score:</div><div id="score-value">0/0</div></div>
</div>
<div class="buttons">
</div>
</center>

<script  src="js/index.js"></script>

</body>

</html>

#operator {
background-color:#B30098;
color:#FFFFFF;
font-size: 64pt;
font-weight:bold;
text-align:center;
width:180px;
height:180px;
box-sizing: border-box;
margin:10px;
}
.buttons {
text-align: center;
}
.button {
cursor: pointer;
background-color:#7A0068;
color:#FFFFFF;
font-size: 16pt;
font-family:Trebuchet MS;
margin:10px;
display: inline-block;
}

.button:hover {
background-color:#B30098;
}

#quiz {
display:table;
}
#feedback, #operator, #score {
display:table-cell;
}

#feedback {
width:200px;
text-align: center;
vertical-align: middle;
}
#cross, #tick {
width:120px;
display: none;
}

#score {
width:210px;

font-family:Trebuchet MS;
text-align: center;
vertical-align: top;
}
#score-label{
font-size: 24pt;
}
#score-value{
font-size: 40pt;
}

var operators = ["+","-","*","/","MOD","DIV","^","AND","OR","NOT","==","!=","<","<=",">",">="];

var arithmetic = ["+","-","*","/","MOD","DIV","^"];
var boolean = ["AND","OR","NOT"];
var comparison = ["==","!=","<","<=",">",">="];

var score = 0;
var total = 0;

var operator = operators[Math.floor(Math.random()*operators.length)];

document.getElementById("operator").innerHTML = operator;

total++;
document.getElementById("tick").style.display='block';
document.getElementById("cross").style.display='none';
score++;
operator = operators[Math.floor(Math.random()*operators.length)];
document.getElementById("operator").innerHTML = operator;