jquery - Javascript - Display quiz questions based on URL -
i have simple javascript quiz set on codepen http://codepen.io/anon/pen/dynkjl
it displays 1 question per page , once select answer, move onto next question. whatever answer selected given class "active" can selected answers @ end of quiz.
each answer has data-quizindex of either 1 or 2. when collect "active" answers, can see if answered data-quizindex of 1 (first answer) or vice versa.
anyways, until point, things working great. however, attempting else. user directed quiz via link, , link 1 of following
www.something.com/index.html?qa=0 www.something.com/index.html?qa=1 www.something.com/index.html?qa=2 the page coming has preview of question 1 can answer. using javascript, need qa value shouldnt problem. if qa 0, quiz starts question 1 , nothing needs done. if qa 1 or 2, quiz should start question 2 , active class question 1 should set li data-quizindex 1 or data-quizindex 2 (depending on ga value).
in other words, if answer question 1 page redirects them quiz, need make question 1 answered within main quiz application.
would possible , if so, best way achieve this?
thanks
you can define querystring property location, e.g:
if (typeof location.querystring === 'undefined') { object.defineproperty(location, 'querystring', { get: function() { return location.search.slice(1).split('&').map(function(i) { var arr = i.split('='); var = {}; a[decodeuricomponent(arr[0])] = arr[1] ? decodeuricomponent(arr[1]) : void 0; return a; }).reduce(function(a, b) { var key = object.keys(b)[0]; a[key] = b[key]; return a; }); } }); } and then, can use when page loaded, this:
$(function() { var qa = location.querystring['qa']; if (qa === '1' || qa === '2') { $('.current .quiz-answer')[qa - 1].click(); } }); since want simulate first question answered, better repeating code simulate user has clicked it. take @ updated codepen.
change querystring, , loads again, , you'll see it's working charm! :)
Comments
Post a Comment