<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Conversion Wars</title>
    <meta name="Description" content="Conversion Wars: Adaptation of Go-Fish Card Game for Fraction<->Decimal<->Percentage Conversions." />
    
    <link rel="stylesheet" href="css/main.css" type="text/css" />
    <link rel="stylesheet" href="css/slider.css" type="text/css" />
    <link rel="stylesheet" href="css/calculator.css" type="text/css" />
    <link href="http://fonts.googleapis.com/css?family=Lato:700" rel="stylesheet" type="text/css">
    <link rel="icon" type="image/ico" href="../assets/favicon.ico">
    <script src="https://code.jquery.com/jquery-1.9.1.min.js" language="javascript" type="text/javascript"></script>
    
    <script>
    	var category = 'Conversion Wars';
    </script>
</head>

<body>
  <a name="play"></a>
  <div id="wrapper">
    <div id="page">
      <div id="header">
        <div id="title">
          <h1>Conversion Wars</h1>
        </div>

        <div id="menucontainer">
          <ul id="menu">
            <li><a title="Start a New Game Against the Computer" href="#newgame">New Game</a></li>
            <li> | <a title="Objectives" href="#rules" class="rules-a">Objectives</a></li>
            <li> | <a title="Calculator" href="#calc" class="calc-a">Calculator</a></li>
            <li> | <a title="Fraction Help" href="#tips" class="tips-a">Fraction Help</a></li>
            <li> | <a title="Check Understanding" href="understanding.html" target="_self">Applying Concepts</a></li>
          </ul>
        </div>
      </div>
      <div id="pagecontent">
        <div id="board" class="board">
          <div id="play-page" class="inner-page">

            <div id="left-player" class="avatar">
              <div style="background-position: -275px 0px"></div>
              <small>Player 1</small>
            </div>
            <div id="left-player-bubble" class="bubble">
              <p>
                <span></span>
              </p>
            </div>

            <div id="right-player" class="avatar">
              <div style="background-position: -155px 0px"></div>
              <small>Player 2</small>
            </div>
            <div id="right-player-bubble" class="bubble">
              <p>
                <span></span>
              </p>
            </div>

            <div id="top-player" class="avatar">
              <div></div>
              <small>Computer</small>
            </div>
            <div id="top-player-bubble" class="bubble">
              <p>
                <span></span>
              </p>
            </div>
            <div id="bottom-player" class="avatar">
              <div></div>
              <small class="dealer">You</small>
            </div>

            <div id="bottom-player-bubble" class="bubble">
              <p>
                <span></span>
              </p>
            </div>
            <!--<a href="javascript:void(0);" id="open-player-picker">Change player image...</a>-->

            <div id="change-player" class="dialog">
              <h3>Choose your player image</h3>
              <div id="player-picker"></div>
              <div class="button-panel">
                <button id="prev-image" href="javascript:void(0);">&lt;&lt; Prev</button>
                <button id="save-image" href="javascript:void(0);">OK</button>
                <button id="next-image" href="javascript:void(0);">Next &gt;&gt;</button>
              </div>
            </div>


            <select id="player-count">
              <option value="2">1 Opponent</option>
              <option value="3">2 Opponents</option>
              <option value="4">3 Opponents</option>
            </select>

            <div id="messageBox">
              <p>Click Deal to start the game.</p>
            </div>

            <div id="fish-button">
              <button class="btn">Pass</button>
            </div>
            <div id="deal">
              <button class="btn">Deal</button>
            </div>
            <div id="askdiv">
              <p>What rank do you want to ask
                <strong>Bob</strong> for?</p>
              <span id="ask-2">12/20</span>
              <span id="ask-3">10/15</span>
              <span id="ask-4">3/18</span>
              <span id="ask-5">27/54</span>
              <span id="ask-6">6/30</span>
              <span id="ask-7">9/27</span>
              <span id="ask-8">12/14</span>
              <span id="ask-9">4/40</span>
              <span id="ask-10">18/24</span>
              <span id="ask-11">3/150</span>
              <span id="ask-12">30/63</span>
              <span id="ask-13">10/18</span>
              <span id="ask-14">30/12</span>
            </div>

            <!-- Win and lose screens -->
            <div id="results-div">
              <div class="dialog results" id="result-box">
                <h3>Congratulations, you won!</h3>
                <img src="trophy.png" alt="Trophy" />
                <span class="winner-img" id="left-player-win"></span>
                <span class="winner-img" id="right-player-win"></span>
                <span class="winner-img" id="top-player-win"></span>
                <span class="winner-img" id="bottom-player-win"></span>
                <img src="trophy.png" alt="Trophy" />
                <div class="button-panel">
                  <button id="start-new-game">Start a new game!</button>
                </div>
              </div>
            </div>

          </div>
          <div style="clear:both;">
            <!-- -->
          </div>
        </div>

        <a name="rules"></a>

          <div class="cd-panel from-right">
            <header class="cd-panel-header">
              <!--<h1>Title Goes Here</h1>-->
              <a href="#0" class="cd-panel-close">Close</a>
            </header>

            <div class="cd-panel-container">
              <div class="cd-panel-content">
                <div id="rules">
                  <h2>Objectives</h2>
                  <p>In this game of Conversion Wars you will play against opponents to solve mathematical problems and become familiar with decimals, percentages, and fractions. In order to get a match all four conversions must be collected in order to recieve the points. The player with the most matches by the end of the game is the winner.</p>

                  <h2>Drawing New Cards</h2>
                  <p>If a card is drawn and used, that player must pick up a new card from the scattered pile in the center of the screen. If there are three or four players then it is possible for any players to finish their cards and there are no cards left in the pile for them to draw. In that case they are out of the game and will simply have to wait while the remaining players finish the game.</p>

                  <h2>New Hampshire Common Core Standards</h2>
                  <ul>
                    <li> Understand decimal notation for fractions, and compare decimal fractions.</li>
                    <li> Use equivalent fractions as a strategy to add and subtract fractions.</li>
                    <li> Apply and extend previous understandings of multiplication and division to multiply and divide fractions.</li>
                  </ul>
                </div>


              </div>
              <!-- cd-panel-content -->
            </div>
            <!-- cd-panel-container -->
          </div>
          <!-- cd-panel -->

          <div class="cd-panel-calc from-left">
            <header class="cd-panel-header-calc">
              <!--<h1>Title Goes Here</h1>-->
              <a href="#0" class="cd-panel-close">Close</a>
            </header>

            <div class="cd-panel-container-calc">
              <div class="cd-panel-content">
                <div id="calculator">
                  <!-- Screen and clear key -->
                  <div class="top">
                    <span class="clear">C</span>
                    <div class="screen"></div>
                  </div>

                  <div class="keys">
                    <!-- operators and other keys -->
                    <span>7</span>
                    <span>8</span>
                    <span>9</span>
                    <span class="operator">+</span>
                    <span>4</span>
                    <span>5</span>
                    <span>6</span>
                    <span class="operator">-</span>
                    <span>1</span>
                    <span>2</span>
                    <span>3</span>
                    <span class="operator">÷</span>
                    <span>0</span>
                    <span>.</span>
                    <span class="eval">=</span>
                    <span class="operator">x</span>
                  </div>

                </div>
                <!-- cd-panel-content -->
              </div>
              <!-- cd-panel-container -->
            </div>
            <!-- cd-panel-calc -->

            <p><a href="#play" class="playlink">Back to game</a></p>
          </div>
        </div>

        <!-- -->

        <div class="cd-panel-tips from-right">
          <header class="cd-panel-header">
            <!--<h1>Title Goes Here</h1>-->
            <a href="#0" class="cd-panel-close">Close</a>
          </header>

          <div class="cd-panel-container">
            <div class="cd-panel-content">
              <h1>Fraction Help</h1>
              <h2>Adding Fractions</h2>
              <p>Step 1: Make sure the bottom numbers (the denominators) are the same
                <br />Step 2: Add the top numbers (the numerators) and put the answer over the denominator
                <br />Step 3: Simplify the fraction</p>
              <h2>Subtracting Fractions</h2>
              <p>Step 1: Make sure the bottom number (the denominators) are the same
                <br /> Step 2: Subtract the top numbers from the (the numerators) and put the answer over the denominator
                <br /> Step 3: Simplify the fraction</p>
              <h2>Multiplying Fractions</h2>
              <p>Step 1: Multiply the top numbers (the numerators)
                <br />Step 2: Multiply the bottom numbers (the numerators)
                <br />Step 3: Simplify the fraction</p>
              <h2>Dividing Fractions</h2>
              <p>Step 1: Turn the second fraction (the one you want to divide by) upside down (this is now a reciprocal)
                <br />Step 2: Multiply the first fraction by that reciprocal
                <br />Step 3: Simplify the fraction</p>

            </div>
            <!-- cd-panel-content -->
          </div>
          <!-- cd-panel-container -->
        </div>
        <!-- cd-panel -->

        <script src="js/main.js"></script>
        <script src="js/slider.js"></script>
        <script src="js/calculator.js"></script>
        <!--<script src="js/jquery-2.1.1.js"></script>-->
        <!-- From slider, not used now -->

<div class="attribution">
		Game based on Go Fish by <a href="http://einaregilsson.com/">Einar E.</a>
	</div>
    </div>
    </div>
</body>

</html>
