<section id="introduction">
<h3>Introduction</h3>
<figure class="example">
<a href="images/maze.png">
<img src="images/maze.png" alt="Screenshot of the maze" />
<figcaption>The initial maze appearance.</figcaption>
</a>
</figure>
<p>This lab practices using jQuery methods and properties, and attaching unobtrusive JavaScript event handlers. We’ll write a page with a <strong>“maze”</strong> to navigate through using the mouse cursor. You will write the necessary JavaScript code to implement the maze behavior.</p>
<p>The difficulty is in having the dexterity to move the mouse through <strong>without touching any walls</strong>. When the mouse cursor moves over a wall, all walls turn red and a “You lose” message is displayed. If the game is lost, clicking the Start button removes the red coloring from the walls and resets the game.</p>
</section>
<section>
<?= t_head("Load JavaScript File", 5) ?>
<p>Download the following HTML file:</p>
<p class="resource"><a href="maze.html">maze.html</a></p>
<p>This skeleton contains a basic HTML shell and page header. It already links to a provided CSS file <samp>maze.css</samp> that defines all the styles for the page’s appearance.</p>
<p>You’ll need to create your <samp>maze.js</samp> file and ensure it is linked properly by placing <strong>only</strong> an <code>alert</code> statement at the <strong>top of the file</strong>.</p>
<p class="important note">If the <code>alert</code> statement doesn’t execute when you refresh the page, your JavaScript file is not being properly loaded. Ask a friend or your TA for help!</p>
<p>Take a look at the HTML code. In it there are several <code>div</code>s:</p>
<ul>
<li>One each representing the start and end buttons</li>
<li>Five walls (“boundaries”)</li>
<li>An overall container</li>
</ul>
<pre><code><div id="maze">
<div id="start">S</div>
<div class="boundary"></div>
<div class="boundary"></div>
<div class="boundary"></div>
<div class="boundary"></div>
<div class="boundary"></div>
<div id="end">E</div>
</div></code></pre>
<p>Our provided CSS puts the <code>div</code>s in their proper places.</p>
</section>
<section>
<?= t_head("Make All Boundaries Glow Red", '5–10') ?>
<figure class="example" style="margin-top: -5em;">
<a href="images/output2.png">
<img src="images/output2.png" alt="Output with all boundaries red when a single boundary is hovered over" />
<figcaption>Every one of the boundaries should turn red when you hover over any single one of them.</figcaption>
</a>
</figure>
<p>First write the necessary JavaScript to make <strong>all maze walls turn red</strong> when the mouse enters any <strong>one of them</strong>.</p>
<ul>
<li>These walls have a <code>class</code> of <code>boundary</code>. Use the jQuery function to select them.</li>
<li><ins>Make the walls turn red by attaching a class of <code>youlose</code> to them.</ins></li>
</ul>
<p class="important note"><strong>Note:</strong> There’s one extra “example” boundary. Make sure it <strong>DOES NOT</strong> change when you change the rest!</p>
</section>
<section>
<?= t_head("Alert on Completion of Maze", '10') ?>
<figure class="example" style="margin-top: -2em;">
<a href="images/output3-success.png">
<img src="images/output3-success-crop.png" alt="Success alert message" />
<figcaption>A success alert message.</figcaption>
</a>
</figure>
<figure class="example" style="margin-top: 11em;">
<a href="images/output3-failure.png">
<img src="images/output3-failure-crop.png" alt="Failure alert message" />
<figcaption>A failure alert message.</figcaption>
</a>
</figure>
<p>Modify your code to add an alert message when the user reaches the end of the maze indicating whether they won or lost.</p>
<ul>
<li>The end of the maze is a <code>div</code> with an <code>id</code> of <code>end</code>.</li>
<li>Don’t pop up the message unless the user makes it to the end <strong>without touching any walls</strong>.</li>
<li>Keep track of whether any walls were hit, so you’ll know what to do when the end square is hit.</li>
</ul>
</section>
<section>
<?= t_head("Restartable Maze", '10') ?>
<figure class="example" style="margin-top: 4em">
<img src="images/output4-before.png" alt="The maze before restarting" />
<img src="images/output4-after.png" alt="The maze after restarting" /> <br/>
<figcaption>The maze before and after restarting.</figcaption>
</figure>
<p>Modify your code to allow the user to reset the maze:</p>
<ul>
<li>Listen for the <code>click</code> event on the <strong>Start</strong> square (the <code>div</code> with an <code>id</code> of <code>start</code>).</li>
<li>In your event handler, return all boundaries to their normal color, so that the user can try to get through the maze again.</li>
<!-- <li>You’ll need to use the <code>$$</code> function again to select all of the squares.</li> -->
</ul>
</section>
<section>
<?= t_head("Inject Win/Lose Message Into Page", '10') ?>
<figure class="example">
<a href="images/output6.png">
<img src="images/output6-crop.png" alt="Win message injected into the page" />
<figcaption>A win message injected into the page.</figcaption>
</a>
</figure>
<p>Using an <code>alert</code> to indicate a win/loss is a poor user experience. Instead, make change your code make the “You win” and “You lose” messages appear <strong>in the page</strong> itself.</p>
<ul>
<li>The page has an (initially empty) <code>h2</code> element on the page with an <code>id</code> of <code>status</code>. Put the win/lose message into that <code>h2</code> when the user finishes the maze.</li>
</ul>
</section>
<section>
<?= t_head("Advanced: Disallow Cheating", '10', array('extra' => true)) ?>
<figure class="example">
<a href="images/output7.png">
<img src="images/output7.png" alt="Disallowing cheating" />
<figcaption>Disallowing cheating.</figcaption>
</a>
</figure>
<p>Currently there’s an easy way to <strong>cheat</strong>: after you click the start button, just move your mouse around the outside of the maze!</p>
<ul>
<li>Fix this by making it so that if the user moves the mouse anywhere outside the maze after clicking the Start area, the walls will light up red and the player will lose the game.</li>
<li>To do this, you’ll need to listen to other kinds of mouse events on other elements.</li>
<!-- <li>You might also find Prototype’s <code>findElement()</code> method of the <code>event</code> object helpful.</li> -->
</ul>
</section>
<footer>
<p>If you’ve finished everything, good job! Try writing some JavaScript to arrange the maze boundaries.</p>
</footer>