php – Help with basic Javascript (timers)


my question is:

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

<link href="style.css">

    <div id="container">
            $contador = 0;

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

                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>
    <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;


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.


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