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();
    }
});

Answer 1

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");
}

Answer 2

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.

Answer 3

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.

Answer 4

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');
   }
});