How can I modify a variable on another site?

Question

My son is doing times tables practice on this page, a timed test in which he gets 10 seconds for each sum.

https://www.timestables.com/speed-test/ - this is not my site or code, I have no direct control over the source code.

I want to give him a little more time per sum but I cannot find a way to modify the relevant code and make it work with 20 seconds instead of 10.

It looks to me like the relevant variable is maxTime (milliseconds) in this function, but nothing I do using the Chrome Developer Tools will modify this in a live running page to give 20 seconds instead of 10.

function startSom(){


    vraagnr = vraagnr + 1;
    if(vraagnr <= totaalSommen)
    {
        bezig = true;
        $('#pbar_innerdiv').stop();
        $('#pbar_innerdiv').css("width","100%");
        $('#pbar_innerdiv').css("backgroundColor","#33BF00");
        $('#pbar_innerdiv').css("borderColor","#33BF00");
        if(mobiel){
        $("#antwVak").html("");
        }
        else{
            $("#antwoordI").val("");
            $("#antwoordI").focus();    
        }
        $('#pbar_innerdiv').stop();

        start = new Date();
        maxTime = 10000;
        timeoutVal = Math.floor(maxTime/100);
          var somT = sommen[vraagnr-1].split(",");
                $('#somVak').html(somT[1]+"×"+somT[0]+"=");
                $('#voortgangVak').html("Question "+vraagnr+" / "+totaalSommen+"<br />"+ punten + " points");

        animateUpdate();
        started = false;
    }
    else
    {
        showEindScherm();

    }
}

Can anyone suggest what to do please?

Answer 1

You can copy the entire method, pase it into chrome devtools and change

 function startSom() { 

to

window.startSom = function() {

And obviously change your time from 10000 to 20000. This changes the amount of time it allows you to answer, but not the moving progress bar which will still only take 10 seconds.

Answer 2

Please paste this:

window.startSom = function(){


    vraagnr = vraagnr + 1;
    if(vraagnr <= totaalSommen)
    {
        bezig = true;
        $('#pbar_innerdiv').stop();
        $('#pbar_innerdiv').css("width","100%");
        $('#pbar_innerdiv').css("backgroundColor","#33BF00");
        $('#pbar_innerdiv').css("borderColor","#33BF00");
        if(mobiel){
        $("#antwVak").html("");
        }
        else{
            $("#antwoordI").val("");
            $("#antwoordI").focus();    
        }
        $('#pbar_innerdiv').stop();

        start = new Date();
        maxTime = 20000;
        timeoutVal = Math.floor(maxTime/100);
          var somT = sommen[vraagnr-1].split(",");
                $('#somVak').html(somT[1]+"×"+somT[0]+"=");
                $('#voortgangVak').html("Question "+vraagnr+" / "+totaalSommen+"<br />"+ punten + " points");

        animateUpdate();
        started = false;
    }
    else
    {
        showEindScherm();

    }
}

Here:

And if you want to make the progress bar following the new max Time, also paste this:

window.animateUpdate = function() {
    if(bezig)
    {
    var now = new Date();

    var timeDiff = now.getTime() - start.getTime();
    if(!started){
        $('#pbar_innerdiv').css("width", (100) + "%");
        $('#pbar_innerdiv').animate({width: 0 + "%"},20000);

        started = true;
    }
    perc = Math.round((timeDiff/maxTime)*100);


        console.log(perc);

        if(perc == 33)
        {                           
            $('#pbar_innerdiv').css("backgroundColor", "#FF9500");
            $('#pbar_innerdiv').css("borderColor", "#FF9500");
        }
        if(perc== 66)
        {
            $('#pbar_innerdiv').css("backgroundColor", "#FF0000");
            $('#pbar_innerdiv').css("borderColor", "#FF0000");
        }
      if (perc <= 100) {
       //updateProgress(perc);
       setTimeout(animateUpdate, timeoutVal);

      } 
      else
      {
        bezig = false;
        showTeLaat();
        //alert("tijd is om");
      }
    }
}

Answer 3

There is a possibility to change files persistently in chrome devtools: Overrides .

If the script is in a seperate file you can change the maxTime directly there or if it is in a file, which needs to be reloaded you can edit any other .js and add an eventlistener there to change the startSom method on page load.