title: Need to create jquery password prompt (should be simple)
body: <p>So I made a website for a scavenger hunt i am hosting, but I need a password prompt to come up nearly every page to make sure they have completed the challenge to move on. I am using Jquery and the only way to get the password promt to show up is after i refresh the page which is no good. I need a way to link one page to another, and show a password prompt before they can see the page. Here is the important html. Also, if you can. Whenever I refresh the page all of the css seems to dissapear and im left with the text. If you can please help with that. </p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;title&gt;jQuery&lt;/title&gt;
        &lt;link rel="stylesheet" href="../themes/scavenger-hunt.min.css" /&gt;
      &lt;link rel="stylesheet" href="../Publish/jquery-mobile/jquery.mobile.structure-1.0.min.css" /&gt;
      &lt;script src="http://code.jquery.com/jquery-1.8.3.min.js"&gt;&lt;/script&gt;
      &lt;script src="http://code.jquery.com/mobile/1.3.0-rc.1/jquery.mobile-1.3.0-rc.1.min.js"&gt;&lt;/script&gt;
    &lt;body&gt; 
  &lt;script language="javascript"&gt;
  var password
  var pass1="123"
  
  password=prompt('Please enter password to view page')
  if (password==pass1)
  alert('password correct! Press ok to continue.')
  
  else{
    window.location="index.html";
    alert('password incorrect! Redirecting')
  }
  
  &lt;/script&gt;
  &lt;div data-role="page" id="home"&gt;
    &lt;div data-role="header"&gt;
      &lt;h1&gt;Hint 1&lt;/h1&gt;
  
    &lt;/div&gt;
  </code></pre>