Creating quiz with one page that determines outcome (no access to database or php, needs to be in javascript/html/etc.)

Question

Note - I do not have access to a database and cannot use PHP, thus is why I'm asking for help. My hands are tied and I can only do through html/javascript/etc.

I'm creating a online quiz that has 10 questions (1 question per page), but only one question determines the outcome to 4 different final locations. Question 3 (page 3) is the determining question, but I need to "record" the radio button selection, so the last question (page 10) determines the URL for the submit button, which in hand redirects the user.

All the other questions are vanity questions, as question 3 is the big determining factor.

I was thinking that the answer on question 3 (page 3) creates a cookie with 1 of 4 values (based off of the radio button selection), then on the last question (page 10) the cookie is read and the value determines the url, which then writes in the URL redirect code for the submit button. This is just theory now, as I'm not sure if this is doable.

Any advice would be greatly appreciated.

Stefan · Answer 1 · 2012-03-29T07:04:07.433

I can see at least 2 more ways to do it:

Use an iFrame:

Keep a hidden input outside an iFrame. This input records the answers. An iFrame script must append the answer (comma-separated or whatever) to the hidden input in the parent when a question is submitted. A new page gets loaded into the iFrame after that. When the last question is encountered, the iFrame script can update and read the parent input, then determine which url to load, and then load the url into the parent document location.

Use jQuery Ajax: EDITED to remove hidden input which isn't needed here:

Using jQuery Ajax you can load the next question into a main div, and also retain the values of the answers you want in the jQuery script.

EDIT: Here is another way, using CSS and javascript/jQuery:

Load all the questions into ONE page. But only the current question has style='display:block;', the others must have style='display:none'. When a question is answered, use javascript or jQuery to record the answers in a variable. In your case it seems you are only interested in one answer, so it's even easier. Then use your script to change the display attributes depending on which question should show. Finally, if it is the last question which is submitted, you can determine the url and load the next page.

HOW TO GET THE PARAMETER FROM A QUERY STRING:

function getQuery(key_str) {
// return value of key_str variables query string of url
// Example: url = "index.html?answer=5"; if key_str = "answer" then it returns "5"
  if(window.location.search) {
    var query = window.location.search.substr(1);
    var pairs = query.split("&");
    for(var i = 0; i < pairs.length; i++) {
      var pair = pairs[i].split("=");
      if(unescape(pair[0]) == key_str) return unescape(pair[1]);
    }
    return null;
  }
}

function go() {
  var answer = getQuery(answer);
  var durl = "http://www.defaulturl.com";
  switch (answer) {
    case '1' : url = "http://www.url1.com"; break;
    case '2' : url = "http://www.url2.com"; break; 
    case '3' : url = "http://www.url3.com"; break;
    default  : url = durl;
  }
  window.location.href = url;
  return false;
}

<input type="button" value="Submit" name="butt" onclick="return go();">

score 0 · Accepted Answer · answered Mar 28 '12 at 17:02

0

Why don't you pass the relevant answer as a GET ? You can easily read the query string in Javascript.

answered Mar 28 '12 at 17:02

mddw

5,570
1
30
32

This seems like the best bet. How would you implement the java into the submit button on page 10 (to pull from relevant answer passed through GET). Say this was the submit button: – jgrannis Mar 28 '12 at 17:24
Well, it depends if you want it in pure javascript or with some plugin. For a pure javascript extraction, see : http://stackoverflow.com/questions/647259/javascript-query-string – mddw Mar 28 '12 at 17:36
@jgrannis - you mention java in your question and here in your comment, but it seem you're talking about java-***script*** ... is there any Java involved? – Stephen P Mar 28 '12 at 17:50

score 0 · Answer 3 · answered Mar 28 '12 at 17:04

0

Your cookie method would work fine. Also doable with HTML5 local storage. But I have to ask... if you're not recording the output of the other 9 questions anywhere, what's the point of asking them? :)

answered Mar 28 '12 at 17:04

Alex Howansky

50,515
8
78
98

In that case, why not just make the 3rd question last? – Alex Howansky Mar 28 '12 at 17:19

score 0 · Answer 4 · answered Mar 28 '12 at 17:09

0

I would do everything I could to avoid cookies and just keep the quiz on one page... I know you're saying you don't have backend access, but I just wanted to throw that out there.

You can make the user feel like it's really 10 "pages," but your JS would be swapping "pages" and storing the form values in one page load. Think about a DOM tabbed element with 10 tabs.

Totally agree with Alex that HTML5 local storage would work, too.

answered Mar 28 '12 at 17:09

Matthew Blancarte

8,251
2
25
34

I can't have on one page due to tracking issues. I need separate pages to track drop out questions... – jgrannis Mar 28 '12 at 17:20
Hmm... Can't you watch for events within the form fields, selects, etc. and then run them through some logic gates? For example, if(fieldVal === 'your_drop_out_q'){ //do some stuff }. – Matthew Blancarte Mar 28 '12 at 17:27
It has to be through Google Analytic code...another team member will be tracking... – jgrannis Mar 28 '12 at 17:29
Ahhh, okay. Yeah you'll want to use $_GET or local storage. Good luck! – Matthew Blancarte Mar 28 '12 at 17:31
@jgrannis :Can't you push the stuff you need to track through to Google Analytics with _gaq.push() in your javascript? Just guessing here, I've never tried it. – Stefan Mar 28 '12 at 18:14

Creating quiz with one page that determines outcome (no access to database or php, needs to be in javascript/html/etc.)

4 Answers4