study/tutorialTwo.html

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="./src/style.css" />
    <title>Graphical Perception of Information Visulization</title>
  </head>
  <body class="fcontainer">
          <h3>Uncertainty in Heat Maps: Task Two</h3>
         <p>
           In this second task, you are <i>defending</i> in a game like Battleship.
           In this game, each opponent places their ships on locations on the board, without letting the opponent see where they are placed.
           The player then selects locations to fire missiles. If a player fires missiles in the same square as an opponent's ship, that ship is sunk.
           Spies have indicated the likely locations where your opponent will strike, but there are varying levels of uncertainty in these predictions.
           This means that predictions with high uncertainty may not be trustworthy.
         </p>

         <p>
           As a defender, you will be shown a prediction of the likely locations of missile strikes, along with the uncertainty in these predictions.
           Click locations to place your ships, or to remove ships you previously placed. Once you have placed all of your ships, click the "Confirm" button.
           Your objective is to have as few of your ships hit as possible. Dark <span class="sPurple">PURPLE</span> squares with low uncertainty are the safest locations for ships.
         </p>

      <div class="figure">
        <div>
          <img src="img/task2b.png" />
          <span>An example of the <i>defender</i> task. Ships should be placed in the safest locations.
            The red location is unlikely to be targeted, and confidence in this prediction is high.
            The orange location is unlikely to be targeted, but confidence in this prediction is low.
            The pink location is more dangerous than the orange location, but with a much higher confidence in prediction.
          </span>
        </div>
      </div>

      <p>
        Click the "Ready" button when you are ready to being the second task.
        If at any time you have questions or concerns, consult the <a href="consent.html" target="_blank">consent form</a>.
      </p>
  </body>
</html>