Show alert box one minute before the countdown ends

Question

I am working on an online quiz module where the quiz auto submits after 30 mins. Now I want to show an alert box where in the student gets notified "1 minute left to finish quiz" on the 29th Minute. I am unable to figure out how to implement this. I have my code as shown below for this.

$(document).ready(function(){
    function get15dayFromNow() {   
       return new Date(new Date().valueOf() + <?php echo $duration ; ?> * 60 * 1000);
    }

    var $time_spend = $('#time_spend');
    $time_spend.countdown(get15dayFromNow(), function(event) {
        $(this).val(event.strftime('%M:%S'));
    });

    var $clock = $('#clock');
    $clock.countdown(get15dayFromNow(), function(event) {
        $(this).html('Time Left :   '+'00:'+event.strftime('%M:%S'));
    })
    .on('finish.countdown', function() {
        submitForm();
    });

    function submitForm()
    {
        document.getElementById("target").submit();
    }
});

You could start one timeout for 29min and when it finishes alert() and start another one for 1min — Michal Bieda, Aug 09 '18 at 06:50
setInterval(function(){ alert("1 minute to go "); },1740000); /* 1740000 equals to 29 minutes */ U need to add this in event listener once the page loads or on any button click — AmmyTech, Aug 09 '18 at 06:54
Thanks for taking out time. I know the basic logic of what has to be done. But my question is how tpo implement this in jQuery as in above code. @MichalBieda — Ansh, Aug 09 '18 at 07:25
@Kool-Mind I want to give this 1740000 based on a php variable. I mean this time can be altered so I want to put time there as the database value. How can this be done. — Ansh, Aug 10 '18 at 05:32

score 0 · Answer 1 · answered Aug 09 '18 at 06:56

0

If you use a countdown script like this:
https://www.w3schools.com/howto/howto_js_countdown.asp

Just modify the if-statement:

if (distance < WHATEVERYOUWANT) {
    alert("Message");
}

answered Aug 09 '18 at 06:56

Urs Bo

308
1
11

Thanks for taking out time. I know the basic logic of what has to be done. But my question is how tpo implement this in jQuery as in above code. – Ansh Aug 09 '18 at 07:22

score 0 · Answer 2 · answered Aug 09 '18 at 07:29

Here is an example of how you can achieve this:

function countdown (timer) {
  
 console.log(timer)
  
  if(timer ===5){
    alert('halfWay');
  } else if (timer === 0){
    return;
  } 
  
  setTimeout(() => countdown(timer - 1), 1000);

}

countdown(10);

Just tweak the numbers in your implementation to get the desired result.

score 0 · Answer 3 · answered Aug 09 '18 at 07:49

0

I would start a session in php with the timestamp the user begins the quiz and regularily check that value via AJAX. if the remaining time is <= 60 seconds, show the alert box and stop requesting.

answered Aug 09 '18 at 07:49

Alex

9,911
5
33
52

score 0 · Answer 4 · answered Aug 09 '18 at 20:36

0

Maybe this could work:

var $time_spend = $('#time_spend');
$time_spend.countdown(get15dayFromNow(), function(event) {
   $(this).val(event.strftime('%M:%S'));
   if (event = WHATEVER){
      alert('Message');
   }
});

answered Aug 09 '18 at 20:36

Urs Bo

308
1
11

Thanks,. I want to know two things. One is whether this code you gave has to be 'added' to the existing code ? And secondly, I didnt get that whatever part. – Ansh Aug 10 '18 at 05:14
Just add the if ( ...} to your code. The rest is a part of yours. And WHATEVER is the number you want. I am not sure what event (seconds, minutes) is, but you will see when you run the code. Or show the value with console.log(event) – Urs Bo Aug 10 '18 at 06:19
Thanks for explaining. I want to use a php variable at this place for 'whatever'. How can this be done? – Ansh Aug 10 '18 at 06:49
Write the php-variable into a jQuery-variable: whatever = ; Then use this variable in the if-statement. – Urs Bo Aug 10 '18 at 07:14
I have used this. But now the alert box pops up just when the page loads. var $time_spend = $('#time_spend'); $time_spend.countdown(get15dayFromNow(), function(event) { $(this).val(event.strftime('%M:%S')); if (event = ){ alert('Message'); } }); – Ansh Aug 10 '18 at 07:29
I cannot test it with the given information. But could try to make another function like: $clock.countdown(get15dayFromNow(), function(event) { ... Use another "event"-value. Try to modify the ".on" in this new function with the alert. – Urs Bo Aug 10 '18 at 12:42

Show alert box one minute before the countdown ends

4 Answers4