php – Help with basic Javascript (timers)

Question:

my question is:

<!DOCTYPE html>
<html dir="ltr" lang="pt-BR">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Joguinho</title>

<link href="style.css">
</head>


<body>
    <div id="container">
        <?php
            $contador = 0;

            $random1 = (rand(1,10));
            $random2 = (rand(1,10));
            $resultado = $random1 * $random2;

            $contador++;
                echo("<div id='contador'>".$contador."/10"."</div>");
                echo("<div id='campo'>".$random1."x".$random2."</div>");
        ?>  
        <input id="digiteValor" type="text" />   
        <button id="enviar" onclick="chama()">Enviar</button>
        <div id="certoOuErrado"></div>
    </div>
</body>
    <script type="text/javascript">
        function chama(){
        var valorDigitado = document.getElementById('digiteValor').value;   
        var resultado = "<?php echo $resultado; ?>";
        //var correto = "<div id='correto'></div>";
        //var incorreto = "<div id='incorreto'></div>";

            if(resultado == valorDigitado){
                document.getElementById('certoOuErrado').innerHTML = "CORRETO";
                //document.getElementById('certoOuErrado').innerHTML = correto;
                } else {
                document.getElementById('certoOuErrado').innerHTML = "INCORRETO";
                //document.getElementById('certoOuErrado').innerHTML = incorreto;
            }
        }

    </script> 
</html>

this is the code i made so far

the idea is for the guy to type the value, wait a while to check if the answer is right or wrong. I have a counter that should count 10 moves, it's like a loop. Is there a way to refresh the screen and keep updating these data until you get 10 moves? there has to be some time for him to answer. for example: you have 4sec to answer, after the time runs out, it is checked if the entered value is correct or incorrect, then it goes to the next iteration.

Answer:

Is it really worth using php and having to refresh the page to generate other random numbers?

You can simply use Math.random() from javascript to do this, this function generates a random number between 0 and 1.

 var contador=0; var acertos=0; var erros=0; function comecar(){ if(contador==10){ document.getElementById("operacao").innerHTML="acertos: "+acertos+" erros:"+erros; return false; } document.getElementById("resposta").value=""; document.getElementById("resposta").disabled=""; contador++; document.getElementById("contador").innerHTML=contador+"/10"; var numero1=Math.floor(Math.random()*100+1); var numero2=Math.floor(Math.random()*100+1); var resultado=numero1*numero2; document.getElementById("operacao").innerHTML=numero1+"x"+numero2; document.getElementById("enviar").onclick=function(e){ var resposta=document.getElementById("resposta"); resposta.disabled="true"; if(resposta.value==resultado){ resposta.value="correto"; acertos++; }else if(resposta.value!=resultado){ resposta.value="incorreto"; erros++; } setTimeout(comecar,1000); } } comecar();
 <div id="contador"></div> <div id="operacao"></div> <input id="resposta"/> <input id="enviar" value="enviar" type="button">
Scroll to Top