title: How to make a button pattern?
body: <p>I'm trying to make a little puzzle game in HTML5 and I'm having trouble figuring out how to make a puzzle. In the puzzle you have to click the squares in a certain order to beat it. I don't know how to make it to where you have to click the buttons in order and if you don't you'll lose. </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Room Two&lt;/title&gt;
              &lt;link rel="stylesheet" type="text/css" href="youtubeGame.css"&gt;
  
              &lt;link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans|Oxygen|Ubuntu|Coming+Soon"&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id="content"&gt;
              &lt;h1 id="roomNum"&gt;Room 2&lt;/h1&gt;
              &lt;p id="roomInfo"&gt;Once again the door seems to magically close behind 
  you.&lt;br /&gt; Unlike the stone floor from the previous room, this one is divided up 
  into wooden slabs.&lt;br /&gt; You press your foot onto a slab. It slides down, and an 
  arrrow shoots from the roof.&lt;br /&gt; You barely get out of the way but somehow you 
  dodge it. You tell yourself to watch your step...&lt;/p&gt;
  
              &lt;p id="step"&gt;&lt;/p&gt;
  
              &lt;p id="step2"&gt;&lt;/p&gt;
  
              &lt;div class="menu-container" id="puzzle"&gt;
                  &lt;div class="button-container"&gt;
                   &lt;a href="#" class="button" onclick="wrongStep()"&gt;1&lt;/a&gt;
                   &lt;a href="#" class="button" onclick="correctStep6()"&gt;2&lt;/a&gt;
                   &lt;a href="#" class="button" onclick="correctStep7()"&gt;3&lt;/a&gt;
                   &lt;a href="#" class="button" onclick="wrongStep()"&gt;4&lt;/a&gt;
                   &lt;a href="#" class="button" onclick="correctStep5()"&gt;5&lt;/a&gt;
                   &lt;a href="#" class="button" onclick="correctStep4()"&gt;6&lt;/a&gt;
                   &lt;a href="#" class="button" onclick="correctStep1()"&gt;7&lt;/a&gt;
                   &lt;a href="#" class="button" onclick="correctStep2()"&gt;8&lt;/a&gt;
                   &lt;a href="#" class="button" onclick="correctStep3()"&gt;9&lt;/a&gt;
                 &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;br&gt;&lt;br&gt;
  
          &lt;div id="death"&gt;
              &lt;a href="youtubeGame.html"&gt;Try Again?&lt;/a&gt;
          &lt;/div&gt;
  
          &lt;a href="roomThree.html" id="nextRoom"&gt;Next Room&lt;/a&gt;
  
          &lt;script type="text/javascript"&gt;
  
              document.getElementById("death").style.display = "none";
  
              document.getElementById("nextRoom").style.display = "none";
  
              function correctStep1() {
                  return true;    
              }
              function correctStep2() {
                  return true;
              }
  
              function correctStep3() {
                  return true;
              }
  
              function correctStep4() {
                  return true;
              }
  
              function correctStep5() {
                  return true;
              }
  
              function correctStep6() {
                  return true;
              }
  
              function correctStep7() {
                  return true;
              }
  
              function wrongStep() {
                  document.getElementById("content").style.display = "none;"
  
                  document.getElementById("puzzle").style.display = "none";
  
                  document.getElementById("death").style.display = "block";
  
                  document.getElementById("roomNum").innerHTML = "You Have 
  Died";
  
                  document.getElementById("roomInfo").style.display = "none";
              }
  
          &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Please help me fix this</p>