title: store multiple options in localStorage for a quiz
body: <p>I'm trying to create a quiz for an ipad app using localstorage. I have succesfully created a quiz that remembers the options you click, and I can check if the answer is correct.</p>
  
  <p>However, for some questions there are multiple answers, and I'd like to be able to store the multiple answers as an array for that question.</p>
  
  <p>My quiz currently stores the answer under a key that is named by the class of the parent div. The answer depends on which LI you click on. Please see below for my code.</p>
  
  <p>I'd like the option of being able to store multiple answers per question, how would I do this based on the code I have? I'm quite new to javascript.</p>
  
  <pre><code>    &lt;!DOCTYPE HTML&gt;
      &lt;html&gt;
      &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;test&lt;/title&gt;
  
      &lt;style type="text/css"&gt;
  
      body{
          text-align: center;
      }
  
      #questions{
          margin: 0 auto;
          width: 802px;
          height: 602px;
      }
  
      /*look for any class that has the word slide in it*/
      [class*="slide"]{
          padding: 20px;
          background: #666;
          width: 760px;
          height: 560px;
          border: 1px dashed #333;
      }
      [class*="slide"]:nth-child(odd){
          background: #999;
      }
  
      b{
          position: absolute;
          top: 10px;
      }
  
  
      &lt;/style&gt;
  
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;div id="questions"&gt;
              &lt;div class="slide1"&gt;
                  &lt;h1&gt;What is h2o?&lt;/h1&gt;
                  &lt;ul&gt;
                      &lt;li&gt;A Pencil&lt;/li&gt;
                      &lt;li&gt;Liquid water&lt;/li&gt;
                      &lt;li&gt;A mobile phone network&lt;/li&gt;
                      &lt;li&gt;Paper&lt;/li&gt;
                  &lt;/ul&gt;
                  &lt;p&gt;check&lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="slide2"&gt;
                  &lt;h1&gt;What is 2 + 2?&lt;/h1&gt;
                  &lt;ul&gt;
                      &lt;li&gt;1&lt;/li&gt;
                      &lt;li&gt;2&lt;/li&gt;
                      &lt;li&gt;3&lt;/li&gt;
                      &lt;li&gt;4&lt;/li&gt;
                  &lt;/ul&gt;
                  &lt;p&gt;check&lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="slide3"&gt;
                  &lt;h1&gt;What is a whale?&lt;/h1&gt;
                  &lt;ul&gt;
                      &lt;li&gt;A mammal&lt;/li&gt;
                      &lt;li&gt;A fish&lt;/li&gt;
                      &lt;li&gt;A bird&lt;/li&gt;
                      &lt;li&gt;A country&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
              &lt;div class="slide4"&gt;
                  &lt;h1&gt;What phone do you prefer?&lt;/h1&gt;
              &lt;ul&gt;
                      &lt;li&gt;iPhone 4s&lt;/li&gt;
                      &lt;li&gt;iPhone 5&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
              &lt;div class="slide5"&gt;
                  &lt;h1&gt;What is 5 + 5?&lt;/h1&gt;
                  &lt;ul&gt;
                      &lt;li&gt;10&lt;/li&gt;
                      &lt;li&gt;7&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
              &lt;div class="slide6"&gt;
                  &lt;h1&gt;What is the capital city of England?&lt;/h1&gt;
                  &lt;ul&gt;
                      &lt;li&gt;London&lt;/li&gt;
                      &lt;li&gt;Staines&lt;/li&gt;
                      &lt;li&gt;Bognor Regis&lt;/li&gt;
                      &lt;li&gt;Luton&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
              &lt;div class="slide7"&gt;
                  &lt;h1&gt;What colour is a red phone box?&lt;/h1&gt;
                  &lt;ul&gt;
                      &lt;li&gt;Blue&lt;/li&gt;
                      &lt;li&gt;Red&lt;/li&gt;
                      &lt;li&gt;Pink&lt;/li&gt;
                      &lt;li&gt;Mauve&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;b&gt;&lt;/b&gt;
          &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
  
      &lt;script type="text/javascript"&gt;
  
      $(document).ready(function() {
  
          /*
          //
          //  quiz storer and answer checker
          //  Author: Tjobbe Andrews
          //  v1.0, 13/02/2013
          //  - keeps a record in localStorage of the answers you chose, then checks them on an ad hoc basis
          //
          */
  
          //on clicking the answers in the li's..
          $("li").click(function(){
              //..create a variable called answer based on the content of that li..
              var answer = $(this).html();
              //..and create a variable called question based on the class of the parent div
              var question = $(this).parent().parent().attr("class");
              //then store the key value pair of question and answer
              localStorage.setItem(question, answer);
              //just makes sure that it's writing to the LS db
              $("b").html(localStorage.getItem(question));
          });
  
          //click the p tag to check what we've got stored for this div - ad hoc
          $('p').click(function(){
              var slideNumber = $(this).closest('div').attr('class');
              var answer = localStorage.getItem(slideNumber);
              if(answer !== "Liquid water"){
                  alert('wrong');
              }
              else if(answer == "Liquid water"){
                  alert("right");
              }
          });
  
      });
      &lt;/script&gt;
  
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>