Question

Hey guys, I have a bit of a problem that I can’t solve. I’m don’t know much about jquery, so i’m hoping you can help me.

Basically I have a quiz script that has questions in divs, I want when a person checks radiobox and presses “next question” button, the present div would fade out, and the next div would fade in.
Here’s how html code looks like:

    <div id="questions">
    <div id="question0" class="question">
    <span style="verhnij">Title</span> 
    <li><input type="radio" name="q_0" value="0"> 0</li>
     <li><input type="radio" name="q_0" value="2">2</li>
     <li><input type="radio" name="q_0" value="1">1</li> 
    <a href="" onclick="javascript: transition(0);">Next</a>
    </div>
    <div id="question1" class="question">
    <span style="verhnij">Title</span> 
    <li><input type="radio" name="q_1" value="2">2</li>
     <li><input type="radio" name="q_1" value="0">0</li>
     <li><input type="radio" name="q_1" value="1">1</li> 
   <a href="" onclick="javascript: transition(1);">Next</a>
    </div>
    <div id="question2" class="question">
    <span style="verhnij">Title</span> 
    <li><input type="radio" name="q_2" value="1">1</li> 
    <li><input type="radio" name="q_2" value="2">2</li> 
    <li><input type="radio" name="q_2" value="0">0</li> 
  <a href="" onclick="javascript: transition(2);">Next</a>
    </div>

Each Question Div has a unique id and the same class.

Here is some of javascript.

$('#questions').ready(function(){

    for (i = 1; i < 100; i++) {
      if ($('#question' + i).length > 0) {
            $('#question' + i).hide();

  } else {
            break;
        }

  }



});

function transition(question_id) {
    $('#question' + question_id).fadeOut('fast',function() {

           question_id++;
        if ($('#question' + question_id).length > 0) {
           $('#question' + question_id).fadeIn('fast');
        } else {
            Here will be Form submit
  }
    });
}    

The problem with this script is that after I press next, it fadesOut and FadesIn good, and then the ready function overwrites everything and again question 0 pops out.
Help really appreciated.

Thank you.

Answer 1

You need to prevent the page from reloading when you click the link otherwise you restart the whole thing again : since you’re using a “a” tag, you need to:

1) add # as href attribute instead of nothing (href="#").

2) return false from your transition function:

function transition(question_id) {
    $('#question' + question_id).fadeOut('fast', function() {
        question_id++;
        if ($('#question' + question_id).length > 0) {
            $('#question' + question_id).fadeIn('fast');
        } else {}
    });
    return false;
}

(sorry for the format, i just edited my post 10 times but to no avail)