www.webdeveloper.com
Results 1 to 5 of 5

Thread: Jquery quiz - go back to previous question.

  1. #1
    Join Date
    Aug 2012
    Posts
    8

    Jquery quiz - go back to previous question.

    First of all, thanks for taking the time to read this. I'm super new to jquery and javascript and I'm trying to make a simple quiz.

    I would like to let the user go back to the previous question. I have a button that they can click to go back. My idea was to hide the current question and show the previous one. For some reason, the program hides the current one, shows the previous one and then immediately opens the url again, appending the url with a question mark. So, it will basically open a new page, starting from the intro with the url "http://mydomain.com/quiz/?"

    Here is my html:
    HTML Code:
    <div id="intro">
        <h1>Title here</h1>
        <p>A paragraph of intro text.</p>
    
    
    <button onclick="hideintro();">Click here to start the quiz!</button>
    </div>
    
    
    <form id="question1" action="">
       <h2>Question 1</h2>
       <p>Question goes here.</p>
       <input type= "radio" onclick="answer1(1)" >First answer<br/>
       <input type= "radio" onclick="answer1(2)" >Second answer<br/>
    </form>
    
    <form id="question2" action="">
       <h2>Question 2</h2>
       <p>Question goes here</p>
       
       <input type= "radio" onclick="answer2(1)" >answer 1<br>
       <input type= "radio" onclick="answer2(2)" >answer 2<br>
       
       
    
    <br/>
    <button onclick="goback(2);"><--Go back to previous question</button>
    </form>
    
    <script type="text/javascript" src="http://www.example.com/js/quiz.js"></script>
    And here is my javascript:

    Code:
    $("form").hide();
    
    function hideintro() {
       $("#intro").hide();
       $("#question1").fadeIn();
    }
    
    function answer1(value) {
       if (value==1) {
          $("#question1").hide();
          $("#question2").fadeIn();
    }
    
    function answer2(value) {
       if (value==1) {
          $("#question2").hide();
          $("#question3").show();
    }
    
    function goback(currentquestion) {
       $("#question" + currentquestion).hide();
       $("#question" + (currentquestion-1)).fadeIn();
    }
    Now, be easy on me! I am a beginner and I am sure there are better ways I can do this. What I really want to know for now though is why my goback function ends up opening a whole new page and essentially starting the quiz over.

    Thanks...you guys rock!

  2. #2
    Join Date
    Aug 2012
    Posts
    8
    Does anyone have any ideas?

  3. #3
    Join Date
    Jul 2009
    Posts
    184
    Well for starters, it seems like the <button> tag is what was triggering the request.

    change your go back button code to be something like this, and that should stop the page from reloading at least.

    Code:
    <input type="button" onclick="goback(2)" value="Previous Question">
    You will want to figure out a way to keep track of what question a user is on, and pass the numerical part of the id of the question before that, into the goback function.

    Hopefully that gets you further ahead at least.

  4. #4
    Join Date
    Aug 2012
    Posts
    8
    Thanks so much. I'll give that a try and see if I get better results!

  5. #5
    Join Date
    Aug 2012
    Posts
    8
    YES! That did it. Thanks!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles