Holding a function from executing until after a custom javascript alert has cleared

Question

I'm using an alternative to javascript alerts in a quiz game I am making. After answering a question, an "alert" (here I am calling swal, the custom alert) should show and nextQuestion should be executed after to move to #2 question.

After enabling the custom alert, validation still works fine and the alert/modal shows up fine. However, it moves to the next question before the user clicks it away, unlike how alerts worked. This is a problem as the alert hides the next question (and the timer begins running again).

I have moved that.nextQuestion();after the validation, but no luck. The quiz moves to nextQuestion still as soon as the swal alert appears.

How can I fix this sequence to execute nextQuestion after the alert has been cleared instead of before?

 Quiz.prototype.checkAnswer = function(e) {
   var selectedIndex = $(e.target).data('index');
   var that = this;

  $.getJSON('/api/validate_answer/' + this.participationId + '/' + this.quizCurrent, { answer: selectedIndex }, function(data) {
     if (data.result) {
        swal({ title: "Good job!", text: "You were right!", type: "success", confirmButtonText: "Next" }); 
        that.score += 1;
         }
   else {
      swal({ title: "Wrong!", text: "That wasn't correct...", type: "error", confirmButtonText: "Next" }); 
     }
  that.nextQuestion();
    });
     }


 Quiz.prototype.timer = function() {
    var that = this;

   this.timing--;
   $('div.timer strong').text(this.timing);
   if (this.timing <= 0) {
   $.getJSON('/api/skip_question/' + this.participationId, function() {
    that.nextQuestion();
   })
  }
 }

Possible duplicate of [Custom confirm dialog with javascript](http://stackoverflow.com/questions/10824984/custom-confirm-dialog-with-javascript) — Alexander O'Mara, Jan 23 '16 at 06:22

Nikolay Ermakov · Accepted Answer · 2016-01-23T06:35:18.533

1

You should move that.nextQuestion() into the functions attached to the confirm buttons. E.g. for wrong answer as below.

Check demo: fiddle.

swal({
    title: "Wrong!",
    text: "That wasn't correct...",
    type: "error",
    confirmButtonText: "Next"
}, function() {
    that.nextQuestion();
});

edited Jan 23 '16 at 06:35

answered Jan 23 '16 at 06:22

Nikolay Ermakov

5,031
2
11
18

Can it be `swal({ title: "Wrong!", text: "That wasn't correct...", type: "error", confirmButtonText: "Next" }, nextQuestion);` ? – Vicky Gonsalves Jan 23 '16 at 06:23
The code doesn't have `nextQuestion` definition for now outside the `that` object. – Nikolay Ermakov Jan 23 '16 at 06:24
This worked. I moved the nextQuestion into a function within the if and else statements. To create the "sequence," I used "isConfirm" to go to nextQuestion when the confirm button is pressed. `function(isConfirm) { that.nextQuestion(); }` – darkginger Jan 23 '16 at 06:55
Yeah, thanks @NikolayErmakov. It works great for the if/else in the validate_answer section. If the timer runs out (in skip_question), it is acting weird -- it does not skip until I click confirm, as I would want, but it then may skip the rest of the questions. Not sure what's up, but trying a few things now. – darkginger Jan 23 '16 at 07:21
How come you need to click `confirm` on timer run out? Or is it inside `nextQuestion` function? Because in `Quiz.prototype.timer` no confirmation is asked for. – Nikolay Ermakov Jan 23 '16 at 07:26

Holding a function from executing until after a custom javascript alert has cleared

1 Answers1