Simple quiz

by Michał Oręziak

HTML

<form id="form">
<button type="button" id="replay">Replay</button>
<fieldset>
  <label for="answer">Give result of operation: <span id="rand"></span></label>
  <input type="text" id="answer">
</fieldset>
  <button type="submit">Check</button>
  <div id="feedback"></div>
  <div id="counter"></div>
</form>

CSS

.ok{
  color:green;
}
.wrong{
  color:red;
}

JavaScript

function $(el){
return document.querySelector(el);
}
function play(){
let rand1 = Math.floor((Math.random() * 10) + 1)
let rand2 = Math.floor((Math.random() * 10) + 1)
$('#rand').innerText = `${rand1} x ${rand2}`

$('#form').addEventListener('submit', e => {
e.preventDefault()

$('#feedback').className = ""

if($('#answer').value == rand1*rand2){
$('#feedback').classList.add('ok')
$('#feedback').innerText = 'Good answer'
$('#counter').innerText = 3
let interval = setInterval(() => {
$('#counter').innerText--
}, 1000)
setTimeout(() => {
clearInterval(interval);
$('#counter').innerText = ''
$('#feedback').innerText = ''
$('#answer').value = '';
play()
}, 3000)
}else{
$('#feedback').classList.add('wrong')
$('#feedback').innerText = 'Wrong answer'
$('#answer').focus()
}
})
}
$('#replay').addEventListener('click', play)
play()