Question: Here's my HTML when the questionnaire starts:

```
<form id="questionnaire">
  Question 1: Do you like dogs?<br>
  <input type="radio" name="answer" value="yes">Yes<br>
  <input type-"radio" name="answer" value="no">No<br>
  <input type="submit" value="Next Question" />
</form>

```

Here's my Javascript so far:

```
$(document).ready(function(){

    var q2 = 
      'Question 2: Do you like cats?
       <input type="radio" name="answer" value="yes">Yes<br>
       <input type-"radio" name="answer" value="no">No<br>
       <input type="submit" value="Next Question" />'

      $('#questionnaire').submit(function(){
        $('#questionnaire').html(q2); // This puts the Question 2 HTML into the form
        return false;
      });

    var q3 = 
      'Question 3: Do you like bunnies?
       <input type="radio" name="answer" value="yes">Yes<br>
       <input type-"radio" name="answer" value="no">No<br>
       <input type="submit" value="Next Question" />'
});

```

What kind of function do I write so that after Question 2 loads, clicking the "Next Question" button leads to Question 3?

Answer: 
[Fiddle](http://jsfiddle.net/Schlogen/Lk8Mh/)

Javascript: 

```
    var questions = ['Question 1: Do you like dogs?<br><input type="radio" name="answer" value="yes">Yes<br><input type-"radio" name="answer" value="no">No<br><input type="submit" value="Next Question" />', 'Question 2: Do you like cats?<input type="radio" name="answer" value="yes">Yes<br><input type-"radio" name="answer" value="no">No<br><input type="submit" value="Next Question" />','Question 3: Do you like bunnies?<input type="radio" name="answer" value="yes">Yes<br><input type-"radio" name="answer" value="no">No<br><input type="submit" value="Next Question" />'];

$('#questionnaire').html(questions[0]);
var currIdx = 0;

$(document).ready(function(){

      $('#questionnaire').submit(function(){
        currIdx++;
        $('#questionnaire').html(questions[currIdx]); // This puts the Question 2 HTML into the form
        return false;
      });

});​

```

HTML:

```
<form id="questionnaire">

</form>​

```
Here's one way to do it: <http://jsfiddle.net/zXM74/2/>

```
var questions = {
    2: 'Question 2: Do you like cats?' +
       '<input type="radio" name="answer" value="yes">Yes<br>' +
       '<input type="radio" name="answer" value="no">No<br>',
    3: 'Question 3: Do you like bunnies?' +
       '<input type="radio" name="answer" value="yes">Yes<br>' +
       '<input type="radio" name="answer" value="no">No<br>'
    };

var current_question = 1;

$('#questionnaire').submit(function(){
    current_question++;
    $('#questionnaire #question').html(questions[current_question]);
    return false;
});​

```

You keep a variable storing the current question, use that variable to index into an object or array to fetch the right question to display, and increment the variable whenever the button is pressed.

Also requires a small change to your HTML to surround the actual question in a div of its own, separate from the submit button:

```
<form id="questionnaire">
  <div id="question">
      Question 1: Do you like dogs?<br>
      <input type="radio" name="answer" value="yes">Yes<br>
      <input type="radio" name="answer" value="no">No<br>
  </div>
  <input type="submit" value="Next Question" />
</form>​

```