0

I have implemented an online quiz using jQuery. I have this specific requirement I want to implement at the end of the quiz.

if (number_of_answered_questions == total_questions) {
     save the score to the database;
     redirect to redirect_url;
}

This redirect_url depends on the score. (for ex: if the score < 10, redirect to page1.html and if 10 < score < 15, redirect to page2.html)

I tried using jQuery.post, but I'm not sure how to implement both in the same 'post'. How can I implement these two tasks in jQuery?

I can't write the logic to "save to database" in the redirect pages because they keep changing. (I mean admin can change the redirect pages).

nbrooks
  • 18,126
  • 5
  • 54
  • 66
maverick1989
  • 73
  • 1
  • 3
  • 14
  • @GovindSinghNagarkoti I am going through your answer in http://stackoverflow.com/questions/503093/how-can-i-make-a-redirect-page-in-jquery-javascript/21396837#21396837. That may help! – maverick1989 Nov 03 '14 at 05:51
  • can you show the current code? I mean how do you save and redirect now? – Sampath Liyanage Nov 03 '14 at 05:55
  • You are close. Use `jQuery.post` to submit a request to save the score in the database, then you can issue a HTTP redirect on the server side, or in the `success` callback on your (client-side) `jQuery.post`. – ivan.sim Nov 03 '14 at 06:00
  • And if your redirect pages keep changing, then you should try to do the redirect on the server-side; assuming you keep track of those redirect pages locations in, say, a database. – ivan.sim Nov 03 '14 at 06:02
  • @isim Thanks. I keep track of the redirect pages in the database. I'll try implementing your solution. Thanks again – maverick1989 Nov 03 '14 at 06:11
  • @maverick1989 Cool. If you are using `php` as your backend, you can do an easy redirect via the [`header`](http://stackoverflow.com/a/768472/1144203) function. (I think you had a `php` tag on the question earlier.) Also, if the redirect page really changes very often, you still need to find a smarter way to deal with it. – ivan.sim Nov 03 '14 at 06:16

1 Answers1

1

You can trigger a redirect in JS by modifiying window.location.href. You simply need to change your pseudocode/conditionals into the JS equivalent, and then modify the href accordingly to redirect, once your save completes successfully (i.e. in the callback for the post method).

var total_questions = ...;
var number_of_answered_questions = ...;
var score = ...;

// other quiz logic...

var postData = { "score": score, ... };

if (number_of_answered_questions == total_questions) {
    $.post("/saveScores.php", postData, function() {
        if (score < 10) {
            window.location.href = "page1.html"
        }
        else if (10 < score && score < 15) {
            window.location.href = "page2.html";
        }
    });
}
nbrooks
  • 18,126
  • 5
  • 54
  • 66
  • `else if (10 < score || score < 15) {` this part is a bit ridiculous. – Shomz Nov 03 '14 at 06:01
  • `else if (score < 15) {` should be enough, because even what you currently have wouldn't work for score = 10. OP should've been more clear about this though. :) – Shomz Nov 03 '14 at 06:04
  • 1
    @Shomz True, but that's what the OP has in the question. You're probably right though, thanks for calling that out. – nbrooks Nov 03 '14 at 06:06
  • @nbrooks thanks for the answer. Which is better to use: window.location.replace or window.location.href? I believe using "href" will save the 'savescores.php' in browser history. – maverick1989 Nov 03 '14 at 06:06
  • 1
    `savescores.php` will never be saved in the history, because it doesn't happen inside the client window, but as an AJAX call. Both versions are fine. – Shomz Nov 03 '14 at 06:07
  • @plbsam Without knowing the server implementation there's no point in making up some useless format to send to a fake page. OP seems to understand how to do the save, I'm focusing on the client-side redirect in this post. Thanks for pointing it out though. – nbrooks Nov 03 '14 at 06:07
  • He probably meant this for sending the score: `$.post("/saveScores.php", {score: score}, function() {` – Shomz Nov 03 '14 at 06:09
  • @Shomz I get that--but who's to say the server isn't expecting a different data type? Or a different format? And I'm sure the page has various IDs that need to be submitted along with the score to actually save it in the DB. There's really no point trying to guess unless OP has a specific question about saving... – nbrooks Nov 03 '14 at 06:10
  • Yeah, of course, but since you already defined the score variable, just go one step further and add it to the call as well - someone might find it useful. I know were meta-talking here. :) – Shomz Nov 03 '14 at 06:12