Uglemat
/
Border-Game


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
							<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Border game!</title>
    <link rel="stylesheet" type="text/css" media="screen" href="style.css" />
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="http://code.jquery.com/jquery-1.11.3.js"></script>
    <script src="http://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
    <script type="text/javascript" src="data.js"></script>
    <script type="text/javascript" src="game.js"></script>

  </head>
  <body>

    <div id="container">
      
      <div id="game-area">
        <div id="left">
          <h2>Which countries border</h2>
          <h1 id="current-country"></h1>
          <p></p>
        </div>
        
        <div id="right">
          
          <div class="ui-widget">
            <label for="input">Add country: </label>
            <input id="input"/>
          </div>
          
          <ul id="choices">
            
          </ul>
          
        </div>
        <div class="clear"></div>      

        <input id="answer-button" type="submit" value="Check answer!">
      </div>
      
      <div id="report">
        <h1></h1>
        
        <p>These are correct: <span id="correct"></span></p>
        <p>These are TOTALLY INCORRECT: <span id="incorrect"></span></p>
        <p>You missed these: <span id="missed"></span></p>
        
        <input id="new-game" type="submit" value="New game!">
      </div>

    </div>

    <div id="rules">
      <p>Rules: Only land borders count. A Bridge from one country to another is not considered a land border.
      </p>
    </div>

  </body>
</html>