Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Online Quiz over Multiple Pages?

    Hello, I am trying to figure out how to write a quiz that has one question per html page, then once the choice has been selected, it will go to another page and tally a total at the end.

    Can this be done? And if so, can you point me in the right direction to research?

    Thanks in advance,


    Tanya

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,091
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Question Why? ...

    Why only one question per HTML page?
    Why the restriction?

    Yes, it can be done. You will probably need to use 'querystring' and/or cookies to pass the intermediate choices.

    But it really seems the hard way to do that, especially when there are a ton of scripts available to show one question per page.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,799
    Thanks
    78
    Thanked 4,411 Times in 4,376 Posts
    Well, the best way is to *NOT* use JavaScript.

    Use a server side language such as PHP or ASP or JSP.

    If you do it all in HTML/JavaScript, then anybody can simply view the source code of the page to see what the answers are.

    So in the real world you'd never use HTML/JS. But assuming this is homework for some class, then four basic ways:
    (1) cookies. You store the answers, as you go along in a cookie (or cookies).
    (2) via simple <form> submits, using <form method=get>. The next page can read the resultant query string to get all prior answers.
    (3) iframes (or frames, but iframes are easier). You have a single master page that controls everything and remembers all the answers. It invokes a different iframe for each question, collects the answer as it loads the next iframe/question.
    (4) Don't *actually* have multiple pages, at all. Just make it look like you do, by simply hiding the prior question and making the next question appear.

    Surely other ways, but that should give you some choices. If this isn't homework, then don't do it with HTML/JS.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #4
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,366
    Thanks
    11
    Thanked 590 Times in 571 Posts
    Quote Originally Posted by Old Pedant View Post
    Well, the best way is to *NOT* use JavaScript.

    Use a server side language such as PHP or ASP or JSP.

    If you do it all in HTML/JavaScript, then anybody can simply view the source code of the page to see what the answers are.
    Quote Originally Posted by tanyadesign
    once the choice has been selected, it will go to another page and tally a total at the end.
    Old Pedant:
    i don't think that your conclusion necessarily follows from the OP's description.

    why would every question page contain the answer in the source?

    it seems to me that if you simply collected the answers, only the last page would need to have access to the answers for grading.

    by simply using a hard-to guess url for that last page location, nobody could cheat.

    even better, on that last page you could submit the answer set to a server-side script for grading. this would allow the correct answers to remain secret, if that matters to the OP. actually, if you used cookies, the server can fetch your answers automatically on that last page...

    here's a quick example of how to accumulate answers into a cookie.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    	<title>My Quiz</title>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    </head>
    <body>    <h1>Question</h1>
      
    <form>
    <p>What is the capital of france?</p>
    
    <ul>
    	<li><input value='London' type='radio'  name='choice' />London </li>
    	<li><input value='Brussles' type='radio'  name='choice' />Brussles</li>
    	<li><input value='Chicago' type='radio'  name='choice' />Chicago</li>
    	<li><input value='Paris' type='radio'  name='choice' />Paris</li>
    </ul>
    </form>
    
    <input value='Next' type='button'  onclick='doNext()'  />	
    <script type='text/javascript'>
    
    function setCookie(nm, valu) {var e2 = (new Date(2019, 1, 1)).toGMTString();document.cookie = nm + ("=" + escape(valu) + "; expires=" + e2);}
    
    function doNext(){
    	var num=location.href.split(/\//).reverse()[0];
    	var ans=-1, elms=document.forms[0].elements;
    	for(var i=0, mx=elms.length; i<mx; i++){
    		if(elms[i].checked){ans=i; break}
    	}
    	if(ans==-1){return; }
    	setCookie("ans"+num, ans);
      	location.href=location.href.replace(/(\d+)/, function(j,a){ return parseInt(a,10)+1; })
    }
    
    </script>
    </body>
    </html>
    by naming your question pages like 1.html, 2.html, and so on, the next button will advance through each question.
    you can also use server pages with names like 1.php, 2.php, etc -or- 1.aps, 2.asp, etc...

    the answers are stored in a cookie under the key ansN where N is the question #.
    Last edited by rnd me; 12-21-2010 at 11:01 PM.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.6, IE11:9.1, IE9:3.1, IE10:3.0, FF:17.2, CH:46, SF:11.4, NON-MOUSE:38%

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,799
    Thanks
    78
    Thanked 4,411 Times in 4,376 Posts
    Agree on all points but this one:
    it seems to me that if you simply collected the answers, only the last page would need to have access to the answers for grading.

    by simply using a hard-to guess url for that last page location, nobody could cheat.
    Ummm...but when the person answers the last question, their browser will have to actually *visit* that "hard-to-guess url", no? And so at that point the user can see all the right answers. And then simply go back to the first question and take the quiz again, now armed with all the answers.

    Now, I'll grant you that you can make all this difficult for the user: You can use a cookie to try to prevent them from starting again. You can obscure the code with the answers. A little or a lot. You can hide the code with the answers in an external JS file plus encode it plus...

    And yes, that will prevent 99% of the population from cheating, because they simply won't know how. So I guess it depends on the audience for the quiz. If it's for grade school students, you are probably safe enough. But you'd better not use this in a high school or college setting.

    I do agree that the compromise of simply passing along the answers and then using server-side code on the last page is surely a fine solution.

    Still, for a simple quiz, I see no value in using multiple HTML pages. It's just as easy, and probably easier, to put all questions on one page and then just use JS to display the questions one at a time. If you want to handle people who disable Javascript, then I don't see any good html-only answer. I suppose you could design a one-page solution where, when JS is disabled, the user has to scroll down the page for successive questions.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •