title: how to make quiz questions appear one at a time in javascript
body: <p>JavaScript noob here. I'm trying to make a quiz app I'm working on, but I really don't know how to proceed. I've written out all the questions with html. </p>
  
  <p>Here's the situation: this quiz has no correct answers, just answer values. The code is supposed to add up all the values of each question and display a final score/description at the end based on the total number of points accumulated:</p>
  
  <pre><code>&lt;html xmlns="http://www.w3.org/1999/html"&gt;
  &lt;head&gt;
      &lt;link rel="stylesheet" type="text/css" href="quiz.css"&gt;
      &lt;script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript" href="quiz.js"&gt;&lt;/script&gt;
  &lt;title&gt;What Type of Date Are You? (Dude Edition)&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div&gt;
      &lt;h1&gt;What Type of Date Are You? (Dude Edition)&lt;/h1&gt;
  &lt;/div&gt;
  &lt;div class="questions"&gt;
      &lt;p&gt;1. You see a girl waiting at the bus stop. She is exactly your type. How do you get her number?&lt;/p&gt;
      &lt;form class="options"&gt;
          &lt;input class="option" type="radio" name="question1" value=4&gt;You walk right up to her, strike up a conversation, and ask for her number&lt;br&gt;
          &lt;input class="option" type="radio" name="question1" value=3&gt;You wait a few days until you get the courage to go and talk to her&lt;br&gt;
          &lt;input class="option" type="radio" name="question1" value=2&gt;You tell one of your mutual friends that you like her&lt;br&gt;
          &lt;input class="option" type="radio" name="question1" value=1&gt;You wait for her to come to you&lt;/br&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  &lt;div class="questions"&gt;
      &lt;p&gt;2. You guys decide to go out on a date. Where do you decide to take her?&lt;/p&gt;
      &lt;form class="options"&gt;
          &lt;input class="option" type="radio" name="question2" value=4&gt;You take her out for a short coffee and talk about life and relationships&lt;br&gt;
          &lt;input class="option" type="radio" name="question2" value=3&gt;You take her out on a creative date and ask her questions about her life and you respond in kind, tried-and-true interview-style&lt;br&gt;
          &lt;input class="option" type="radio" name="question2" value=2&gt;You take her out to a nice restaurant and dress in your best clothes. You ask the same questions as above&lt;br&gt;
          &lt;input class="option" type="radio" name="question2" value=1&gt;You take her to the best restaurant and hope that your clothes does most of the talking. If not, you've got great stories to tell up your sleeves&lt;br&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  &lt;div class="questions"&gt;
      &lt;p&gt;3. You think you had a great first date. What do you do between now and your second date?&lt;/p&gt;
      &lt;form class="options"&gt;
          &lt;input class="option" type="radio" name="question3" value=4&gt;You send her a text telling her you'll have out again soon. No big deal. Another date with another girl, coming up!&lt;br&gt;
          &lt;input class="option" type="radio" name="question3" value=3&gt;You send her a text telling her how much fun you had and can't wait for the next date.&lt;br&gt;
          &lt;input class="option" type="radio" name="question3" value=2&gt;In addition to doing above, you call her and ask her how she thinks the date went and when/where the next date is&lt;br&gt;
          &lt;input class="option" type="radio" name="question3" value=1&gt;In addition to doing above, you think about how lucky you are for finally finding an amazing girl. You hope to start a relationship ASAP&lt;br&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  &lt;div class="questions"&gt;
      &lt;p&gt;4. Crap! You just remembered you have a huge project due this Friday. This might be a problem. How many dates do you have this week?&lt;/p&gt;
      &lt;form&gt;
          &lt;input class="option" type="radio" name="question4" value=4&gt;More than 5. You're going to have to cancel one of them.&lt;br&gt;
          &lt;input class="option" type="radio" name="question4" value=3&gt;You have a few dates in the pipeline, just testing the waters. You can still make the dates&lt;br&gt;
          &lt;input class="option" type="radio" name="question4" value=2&gt;You have one date because you're a one woman kind of guy&lt;br&gt;
          &lt;input class="option" type="radio" name="question4" value=1&gt;You have one date. You don't date much, in general.&lt;br&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  &lt;div class="questions"&gt;
      &lt;p&gt;5. Finally, how spontaneous are you?&lt;/p&gt;
      &lt;form&gt;
          &lt;input class="option" type="radio" name="question5" value=4&gt;YOLO is your middle name. Your amusement &gt; all else&lt;br&gt;
          &lt;input class="option" type="radio" name="question5" value=3&gt;You may not be the most wild or crazy person, but you are definitely down for good times&lt;br&gt;
          &lt;input class="option" type="radio" name="question5" value=2&gt;You like to have fun as much as the next guy, as long as things don't get too out of hand&lt;br&gt;
          &lt;input class="option" type="radio" name="question5" value=1&gt;I like to plan ahead, no matter what the situation, work or play&lt;br&gt;
      &lt;/form&gt;
  &lt;/div&gt;
      &lt;br&gt;
      &lt;input type="button" id='next' value="Next" onlick="sum_values()"&gt;
  </code></pre>
  
  <p></p>
  
  <p></p>
  
  <p>Here's my JavaScript:</p>
  
  <pre><code>$(document).ready(function(){
  answers = new Object();
  $('.option').change(function(){
      var answer = ($(this).attr('value'))
      var question = ($(this).attr('name'))
      answers[question] = answer
  })
  var item1 = document.getElementById('questions');
  
  $('#next').click(function(){
      var result = sum_values()
      //do stuff with the result
      alert(result);
  });
  
  })
  
  function sum_values(){
  var the_sum = 0;
  for (questions in answers){
      the_sum = the_sum + parseInt(answers[question])
  }
  return the_sum
  }
  
  $('#next').click(function(){
  $('.questions').fadeOut();
  $('.questions' + $(this).html()).delay(450).fadeIn();
  </code></pre>
  
  <p>I know it's filled with errors, but I'm looking to learn as much as possible so any critiques/help would be appreciated. I'm obviously nowhere near done, so I won't take it personally.</p>