HTML/Angles.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1">
    <title>Angles — Keep Talking and Nobody Explodes Module</title>
    <link rel="stylesheet" type="text/css" href="css/font.css">
    <link rel="stylesheet" type="text/css" href="css/normalize.css">
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <script src="js/ktane-utils.js"></script>
    <style>
        .dark table, table { border: none; }
        .zodiac {
            font-family: 'NotoSansSymbols-Regular';
            font-size: 28pt;
            padding: 0;
            text-align: center;
        }
        .notanumber { font-style: italic; }
        
        .semaphore-table { filter: grayscale(100%); }
        .dark .semaphore-table img { filter: invert(80%); }
        .dark .windrose { filter: invert(87%); }

        .license-url { color: black; }
        .dark .license-url { color: #DDD; }
                
        .page-footer::before { content: 'Page '; }
        .page-footer::after { content: ' of 9'; }
        .small-font-page{ font-size: 15px; }
    </style>
</head>
<body>
    <div class="section">
        <div class="page page-bg-06">
            <div class="page-header">
                <span class="page-header-doc-title">Keep Talking and Nobody Explodes Mod</span>
                <span class="page-header-section-title">Angles</span>
            </div>
            <div class="page-content">
                <img src="img/Component/Angles.svg" class="diagram">
                <h2>On the Subject of Angles</h2>
                <p class="flavour-text">It is rude to point, but when explosions are at stake, manners go out the window.</p>
                <p>
                    The module presents a circle with a needle coming from the center, which will always start off pointing to the right. Within the circle is an electronic display,
                    which displays an angle in one of various notation formats.
                </p>
                <p>
                    The buttons underneath the display cycle it between nine angles. One of these is the correct one. To solve the module, the needle must be pointed at that angle.
                    Use the following steps to figure out the correct angle:
                </p>
                <h3>Step 1 of 5</h3>
                <p>Draw a circle. Make note of the top and bottom of this circle, as well as its left and right side. Do this from the observer’s perspective.</p>
                
                <h3>Step 2 of 5</h3>
                <p>For each of the 9 angles on the module, draw a line going from the center of the circle at that angle, and mark the points where these lines intersect with the circle’s edge.</p>
                <p>
                    Use the notations table on the next page for help with decoding each of the various possible angular notation format, replacing ‘#’ with a number. This number can be positive,
                    negative, zero, a fraction, or a decimal number.
                </p>
                <p>
                    Each format represents a different scale of angular notation. The table lists how many units of that scale go in a full rotation around the circle. The circle is to be divided into
                    that number of equally sized increments. Then, starting from the starting point listed in the table, move in the direction (listed under column D) by the amount shown on the module.
                </p>
                <p>
                    Some scales behave differently or have extra notes. These are marked with an asterisk (*) in the table and have dedicated sections about them on subsequent pages. These sections
                    may be required reading even if that notation isn’t present on the module, since some scales reference other scales.
                </p>
                <p>Note that these notations may not necessarily be according to conventional mathematical standards.</p>
            </div>
            <div class="page-footer relative-footer">1</div>
        </div>
        
        <div class="page page-bg-05">
            <div class="page-header">
                <span class="page-header-doc-title">Keep Talking and Nobody Explodes Mod</span>
                <span class="page-header-section-title">Angles</span>
            </div>
            <div class="page-content">
                <table>
                    <tr><th colspan="6">Notations Table</th></tr>
                    <tr>
                        <th>Module’s Notation</th>
                        <th>Name</th>
                        <th>Starting Point</th>
                        <th>D</th>
                        <th>Full Rotation</th>
                        <th>*</th>
                    </tr>
                    <tr><td colspan="6" class="corner"></td></tr>
                    <tr>
                        <td rowspan="2" class="notanumber">Words or groups of letters</td>
                        <td>Relative Directions</td>
                        <td>N/A</td>
                        <td>N/A</td>
                        <td>N/A</td>
                        <td>*</td>
                    </tr>
                    <tr>
                        <td>Compass Points</td>
                        <td><em>Variable</em></td>
                        <td>&circlearrowright;</td>
                        <td>8 main winds</td>
                        <td>*</td>
                    </tr>
                    <tr>
                        <td class="notanumber">Arrow Symbols</td>
                        <td>Arrows</td>
                        <td>N/A</td>
                        <td>N/A</td>
                        <td>N/A</td>
                        <td>*</td>
                    </tr>
                    <tr><td colspan="6" class="corner"></td></tr>
                    <tr>
                        <td>#&deg;#&prime;#&Prime;</td>
                        <td>Degrees&nbsp;(&deg;)<br>Arcminutes&nbsp;(&prime;)<br>Arcseconds&nbsp;(&Prime;)</td>
                        <td rowspan="5">Right</td>
                        <td rowspan="7">&circlearrowleft;</td>
                        <td>360&deg;<br>21600&prime;<br>1296000&Prime;</td>
                        <td>*</td>
                    </tr>
                    <tr>
                        <td>#&pi;</td>
                        <td rowspan="2">Radians</td>
                        <td>2&pi;</td>
                        <td rowspan="2">*</td>
                    </tr>
                    <tr>
                        <td>#&tau;</td>
                        <td>1&tau;</td>
                    </tr>
                    <tr>
                        <td>#g</td>
                        <td>Gradians</td>
                        <td>400</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>#</td>
                        <td>Turns</td>
                        <td>1</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>#h</td>
                        <td>Hexacontades</td>
                        <td rowspan="2">East&dagger;</td>
                        <td>60</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>#p</td>
                        <td>Pechus</td>
                        <td>180</td>
                        <td></td>
                    </tr>
                    <tr><td colspan="6" class="corner"></td></tr>
                    <tr>
                        <td>#a#z</td>
                        <td>Akhnam & Zam</td>
                        <td>Left</td>
                        <td>&circlearrowright;</td>
                        <td>32 or 224</td>
                        <td>*</td>
                    </tr>
                    <tr>
                        <td>#%</td>
                        <td rowspan="2">Slopes</td>
                        <td>Right</td>
                        <td>&circlearrowleft;</td>
                        <td rowspan="2">N/A</td>
                        <td rowspan="2">*</td>
                    </tr>
                    <tr>
                        <td>%#</td>
                        <td>Left</td>
                        <td>&circlearrowright;</td>
                    </tr>
                    <tr>
                        <td>0b#</td>
                        <td>Binary Angular Measurement (BAM)</td>
                        <td>Right</td>
                        <td>&circlearrowleft;</td>
                        <td>256</td>
                        <td>*</td>
                    </tr>
                    <tr>
                        <td>(#,#)</td>
                        <td>Cartesian Coordinates</td>
                        <td>N/A</td>
                        <td>N/A</td>
                        <td>N/A</td>
                        <td>*</td>
                    </tr>
                    <tr><td colspan="6" class="corner"></td></tr>
                    <tr>
                        <td>#:#</td>
                        <td>Time</td>
                        <td rowspan="3">Top</td>
                        <td rowspan="3">&circlearrowright;</td>
                        <td>12:00</td>
                        <td>*</td>
                    </tr>
                    <tr>
                        <td># #</td>
                        <td rowspan="2">Date</td>
                        <td rowspan="2">365</td>
                        <td rowspan="2">*</td>
                    </tr>
                    <tr>
                        <td class="notanumber">A date</td>
                    </tr>
                    <tr>
                        <td class="notanumber">A zodiac symbol</td>
                        <td>Zodiac Signs</td>
                        <td>N/A</td>
                        <td>N/A</td>
                        <td>N/A</td>
                        <td>*</td>
                    </tr>
                    <tr>
                        <td class="notanumber">A single letter</td>
                        <td>Flag Semaphore</td>
                        <td>Bottom</td>
                        <td>&circlearrowright;</td>
                        <td>N/A</td>
                        <td>*</td>
                    </tr>
                </table>
                <p>&dagger;: See <em>Compass Points</em></p>
            </div>
            <div class="page-footer relative-footer">2</div>
        </div>
        
        <div class="page page-bg-04">
            <div class="page-header">
                <span class="page-header-doc-title">Keep Talking and Nobody Explodes Mod</span>
                <span class="page-header-section-title">Angles</span>
            </div>
            <div class="page-content small-font-page">
                <h4>Relative Directions</h4>
                <p>
                    The relative directions as determined by step 1 of the solving process. Two of these may be combined together to make perfect diagonals.
                    Synonyms may be used instead for each of the directions:
                </p>
                <ul>
                    <li><strong>Bottom:</strong> Below, Under, Down, Lower, Nadir</li>
                    <li><strong>Top:</strong> Above, Over, Up, Upper, Zenith</li>
                    <li><strong>Right:</strong> Dextral, Starboard</li>
                    <li>
                        <div style="width: 45%; float: right; border: solid 2px; padding: 0.25em; margin: 0.5em; ">
                            <img class="windrose" src="./img/Angles/Windrose.svg">
                            <p style="text-align: center; margin-bottom: 0; font-weight: bold;">A 16-point compass rose.</p>
                        </div>
                        <strong>Left:</strong> Sinistral, Port
                    </li>
                </ul>
                
                <h4>Compass Points</h4>
                <p>
                    A direction as indicated by the projection of a compass rose onto the circle, which may be rotated.
                    Which relative direction corresponds to North is determined by the <em>first letter of the bomb’s serial number</em>:
                </p>
                <ul style="column-count: 2;">
                    <li><strong>A-G:</strong> Dextral</li>
                    <li><strong>H-P:</strong> Left</li>
                    <li><strong>Q-V:</strong> Under</li>
                    <li><strong>W-Z:</strong> Zenith</li>
                </ul>      
                <p>
                    Any of the points of a 32-point compass rose may show up. With the <em>exception of the cardinals</em>, a compass point might show up <em>abbreviated</em> instead.
                    The 32 abbreviated compass points are, in clockwise order:
                </p>
                <p>
                    N, NbE, NNE, NEbN, NE, NEbE, ENE, EbN, E, EbS, ESE, SEbE, SE, SEbS, SSE, SbE, <br>
                    S, SbW, SSW, SWbS, SW, SWbW, WSW, WbS, W, WbN, WNW, NWbW, NW, NWbN, NNW, NbW.
                </p>   
                <ul>
                    <li><strong>Cardinals:</strong> The four cardinal points are North, East, South, and West.</li>
                    <li>
                        <strong>Intercardinals:</strong> These are found perfectly in the middle between the four cardinals: Northeast, Southeast, Southwest, and Northwest.
                        Together with the cardinals, these form the eight principal compass points.
                    </li>
                    <li>
                        <strong>Half-winds:</strong> These are found perfectly in the middle between a cardinal and an intercardinal. The name is created by putting the respective
                        cardinal’s name first followed by the intercardinal’s name.
                    </li>
                    <li>
                        <strong>Quarter-winds:</strong> These are found perfectly in between a half-wind and a principal compass point. The name is formed by the nearest principal
                        followed by a cardinal, linked together with the word “by”. This point is found halfway between the first listed compass point, and the next half-wind in the
                        direction of the second listed compass point.
                    </li>
                </ul>    
            </div>
            <div class="page-footer relative-footer">3</div>
        </div>
        
        <div class="page page-bg-03">
            <div class="page-header">
                <span class="page-header-doc-title">Keep Talking and Nobody Explodes Mod</span>
                <span class="page-header-section-title">Angles</span>
            </div>
            <div class="page-content small-font-page">
                <h4>Arrows</h4>
                <p>Arrows consist of one (1) line with a triangle at its head. They are not to be confused with the <em>Sagittarius</em> zodiac sign, which has an additional stroke.</p>
                
                <h4>Degrees, Arcminutes, Arcseconds</h4>
                <p>
                    The 360 degrees of a circle are each separated into 60 arcminutes, which are in turn separated into 60 arcseconds. Pay attention to the symbols (&prime;, &Prime;),
                    since degrees or arcminutes may be separated into decimals instead.
                </p>
                
                <h4>Radians</h4>
                <p>
                    On the module, radians will always show up as a multiple or fraction of Pi (&pi;) or Tau (&tau;). Pi is approximately equal to 3.14159,
                    and Tau is equal to 2 Pi or approximately 6.28319.
                </p>
                
                <h4>Akhnam & Zam</h4>
                <p>A circle is divided into 32 Akhnam, and each Akhnam can be divided into 7 Zam, for a total of 224 Zam.</p>
                
                <h4>Slope</h4>
                <p>
                    Slopes are notated as a percentage of vertical rise over horizontal run. Rise is the change in height, and run is the horizontal distance travelled to the right.
                    For every 1 unit travelled horizontally, the displayed percentage of 1 is gained in height. A slope of infinity means straight up.
                </p>
                <p>On the module, if the percentage sign is to the left of the number, the horizontal distance, and thus the angle, goes left instead.</p>
                
                <h4>Binary Angular Measurement</h4>
                <p>
                    Binary Angular Measurement is shown as a binary number. On the module, a binary number is written as “0b” (which can be ignored) followed by eight 1s or 0s. To convert from binary
                    to decimal, reading right to left, multiply the first digit by 1, the second digit by 2, the third digit by 4, et cetera until the eighth digit which is multiplied by 128.
                </p>
                
                <h4>Cartesian Coordinates</h4>
                <p>
                    Cartesian Coordinates are notated in the format (X,Y). Take a plane of coordinates where positive X goes to the right (horizontal), and positive Y goes up (vertical).
                    Placing the circle’s centerpoint at (0,0), and letting its radius be equal to 1, the direction is towards the specified coordinates.
                </p>
            </div>
            <div class="page-footer relative-footer">4</div>
        </div>
        
        <div class="page page-bg-02">
            <div class="page-header">
                <span class="page-header-doc-title">Keep Talking and Nobody Explodes Mod</span>
                <span class="page-header-section-title">Angles</span>
            </div>
            <div class="page-content">
                <h4>Time</h4>
                <table style="float: right; margin-left: 1em; margin-top: 1em">
                    <tr>
                        <th colspan="3">Zodiac Table</th>
                    </tr>
                    <tr>
                        <th>Symbol</th>
                        <th>Name</th>
                        <th>Date</th>
                    </tr>
                    <tr>
                        <td class="zodiac">&#9800;&#xFE0E;</td>
                        <td>Aries</td>
                        <td>March 21</td>
                    </tr>
                    <tr>
                        <td class="zodiac">&#9801;&#xFE0E;</td>
                        <td>Taurus</td>
                        <td>April 20</td>
                    </tr>
                    <tr>
                        <td class="zodiac">&#9802;&#xFE0E;</td>
                        <td>Gemini</td>
                        <td>May 21</td>
                    </tr>
                    <tr>
                        <td class="zodiac">&#9803;&#xFE0E;</td>
                        <td>Cancer</td>
                        <td>June 21</td>
                    </tr>
                    <tr>
                        <td class="zodiac">&#9804;&#xFE0E;</td>
                        <td>Leo</td>
                        <td>July 23</td>
                    </tr>
                    <tr>
                        <td class="zodiac">&#9805;&#xFE0E;</td>
                        <td>Virgo</td>
                        <td>August 23</td>
                    </tr>
                    <tr>
                        <td class="zodiac">&#9806;&#xFE0E;</td>
                        <td>Libra</td>
                        <td>September 23</td>
                    </tr>
                    <tr>
                        <td class="zodiac">&#9807;&#xFE0E;</td>
                        <td>Scorpius</td>
                        <td>October 23</td>
                    </tr>
                    <tr>
                        <td class="zodiac">&#9808;&#xFE0E;</td>
                        <td>Sagittarius</td>
                        <td>November 22</td>
                    </tr>
                    <tr>
                        <td class="zodiac">&#9809;&#xFE0E;</td>
                        <td>Capricornus</td>
                        <td>December 22</td>
                    </tr>
                    <tr>
                        <td class="zodiac">&#9810;&#xFE0E;</td>
                        <td>Aquarius</td>
                        <td>January 20</td>
                    </tr>
                    <tr>
                        <td class="zodiac">&#9811;&#xFE0E;</td>
                        <td>Pisces</td>
                        <td>February 19</td>
                    </tr>
                </table>
                <p>Projecting a 12-hour analog clock onto the circle, with 12 o’clock at the top, use the direction the hour hand is pointing at exactly the listed time of day.</p> 
                <h4>Date</h4>
                <p>
                    Convert the listed date into a number from 0 - 364, such that Jan 1st = 0, Jan 2nd = 1, et cetera all the way until Dec 31 = 364.
                    Do not include February 29th. Use the calendar table for reference.
                </p>
                <p>Dates on the module will always be listed month first, followed by the day.</p> 
                
                <table>
                    <tr><th colspan="4">Calendar Table</th></tr>
                    <tr>    <th>Jan 1</th>  <th>Feb 1</th>  <th>Mar 1</th>  <th>Apr 1</th>  </tr>
                    <tr>    <td>0</td>      <td>31</td>     <td>59</td>     <td>90</td>    </tr>
                    <tr>    <th>May 1</th>  <th>Jun 1</th>  <th>Jul 1</th>  <th>Aug 1</th>  </tr>
                    <tr>    <td>120</td>    <td>151</td>    <td>181</td>    <td>212</td>    </tr>
                    <tr>    <th>Sep 1</th>  <th>Oct 1</th>  <th>Nov 1</th>  <th>Dec 1</th>  </tr>
                    <tr>    <td>243</td>    <td>273</td>    <td>304</td>    <td>334</td>    </tr>
                </table>
                
                <h4>Zodiac Signs</h4>
                <p>Zodiac signs convert to a date, particularly the one when the sun enters the constellation’s boundary according to classic astrology. Use the zodiac table for reference.</p>
            </div>
            <div class="page-footer relative-footer">5</div>
        </div>
        
        <div class="page page-bg-07">
            <div class="page-header">
                <span class="page-header-doc-title">Keep Talking and Nobody Explodes Mod</span>
                <span class="page-header-section-title">Angles</span>
            </div>
            <div class="page-content">
                <h4>Flag Semaphore</h4>
                <p>
                    Convert the letter to a flag semaphore sign using the flag semaphore table. Assume the circle is facing you and signaling this letter towards you.
                    Starting from the bottom and going clockwise, if the letter is uppercase, the angle is the direction of the first flag. If the letter is lowercase, it is the direction of
                    the second flag. The table shows the signs from the observer’s perspective.
                </p>
                
                <table class="semaphore-table">
                    <tr><th colspan="7">Flag Semaphore Table</th></tr>
                    <tr>    
                        <th><img width="75" src="./img/Semaphore/Semaphore_Alpha.svg" style="margin-bottom: 0.5em"><br>A</th>  
                        <th><img width="75" src="./img/Semaphore/Semaphore_Bravo.svg" style="margin-bottom: 0.5em"><br>B</th>  
                        <th><img width="75" src="./img/Semaphore/Semaphore_Charlie.svg" style="margin-bottom: 0.5em"><br>C</th>  
                        <th><img width="75" src="./img/Semaphore/Semaphore_Delta.svg" style="margin-bottom: 0.5em"><br>D</th>  
                        <th><img width="75" src="./img/Semaphore/Semaphore_Echo.svg" style="margin-bottom: 0.5em"><br>E</th>  
                        <th><img width="75" src="./img/Semaphore/Semaphore_Foxtrot.svg" style="margin-bottom: 0.5em"><br>F</th>  
                        <th><img width="75" src="./img/Semaphore/Semaphore_Golf.svg" style="margin-bottom: 0.5em"><br>G</th>  
                    </tr>
                    <tr>    
                        <th class="corner"></th>  
                        <th><img width="75" src="./img/Semaphore/Semaphore_Hotel.svg" style="margin-bottom: 0.5em"><br>H</th>  
                        <th><img width="75" src="./img/Angles/Semaphore_India_Flipped_Hands.svg" style="margin-bottom: 0.5em"><br>I</th>  
                        <th><img width="75" src="./img/Semaphore/Semaphore_Kilo.svg" style="margin-bottom: 0.5em"><br>K</th>  
                        <th><img width="75" src="./img/Semaphore/Semaphore_Lima.svg" style="margin-bottom: 0.5em"><br>L</th>  
                        <th><img width="75" src="./img/Semaphore/Semaphore_Mike.svg" style="margin-bottom: 0.5em"><br>M</th>  
                        <th><img width="75" src="./img/Semaphore/Semaphore_November.svg" style="margin-bottom: 0.5em"><br>N</th>  
                    </tr>
                    <tr>    
                        <th class="corner"></th>  
                        <th class="corner"></th>  
                        <th><img width="75" src="./img/Semaphore/Semaphore_Oscar.svg" style="margin-bottom: 0.5em"><br>O</th>  
                        <th><img width="75" src="./img/Semaphore/Semaphore_Papa.svg" style="margin-bottom: 0.5em"><br>P</th>  
                        <th><img width="75" src="./img/Semaphore/Semaphore_Quebec.svg" style="margin-bottom: 0.5em"><br>Q</th>  
                        <th><img width="75" src="./img/Semaphore/Semaphore_Romeo.svg" style="margin-bottom: 0.5em"><br>R</th>  
                        <th><img width="75" src="./img/Semaphore/Semaphore_Sierra.svg" style="margin-bottom: 0.5em"><br>S</th>  
                    </tr>
                    <tr>    
                        <td class="empty" colspan="3" rowspan="3">For lowercase letters that look identical when capitalized: The uppercase form is equally as tall as a number, whereas the lowercase forms are smaller. A lowercase L is taller than a number. Zeroes have a diagonal stroke. </td>  
                        <th><img width="75" src="./img/Semaphore/Semaphore_Tango.svg" style="margin-bottom: 0.5em"><br>T</th>  
                        <th><img width="75" src="./img/Semaphore/Semaphore_Uniform.svg" style="margin-bottom: 0.5em"><br>U</th>  
                        <th><img width="75" src="./img/Semaphore/Semaphore_Yankee.svg" style="margin-bottom: 0.5em"><br>Y</th>  
                        <th style="font-weight: normal"><img width="75" src="./img/Semaphore/Semaphore_Cancel.svg" style="margin-bottom: 0.5em;"><br>Cancel</th>  
                    </tr>
                    <tr>    
                        <th class="corner"></th>  
                        <th style="font-weight: normal"><img width="75" src="./img/Semaphore/Semaphore_Numeric.svg" style="margin-bottom: 0.5em; font-weight: normal;"><br>Numerals</th>  
                        <th><img width="75" src="./img/Semaphore/Semaphore_Juliet.svg" style="margin-bottom: 0.5em"><br>J</th>  
                        <th><img width="75" src="./img/Semaphore/Semaphore_Victor.svg" style="margin-bottom: 0.5em"><br>V</th>  
                    </tr>
                    <tr>    
                        <th class="corner"></th>  
                        <th class="corner"></th>  
                        <th><img width="75" src="./img/Semaphore/Semaphore_Whiskey.svg" style="margin-bottom: 0.5em"><br>W</th>  
                        <th><img width="75" src="./img/Semaphore/Semaphore_X-ray.svg" style="margin-bottom: 0.5em"><br>X</th>  
                    </tr>
                    <tr>    
                        <th style="font-weight: normal"><img width="75" src="./img/Semaphore/Semaphore_Ready.svg" style="margin-bottom: 0.5em; font-weight: normal;"><br>Rest</th>  
                        <th style="font-weight: normal"><img width="75" src="./img/Semaphore/Semaphore_Error.svg" style="margin-bottom: 0.5em; font-weight: normal;"><br>Attention</th>  
                        <th class="corner"></th>  
                        <th class="corner"></th>  
                        <th class="corner"></th>  
                        <th class="corner"></th>  
                        <th><img width="75" src="./img/Semaphore/Semaphore_Zulu.svg" style="margin-bottom: 0.5em"><br>Z</th>  
                    </tr>
                </table>
            </div>
            <div class="page-footer relative-footer">6</div>
        </div>
        
        <div class="page page-bg-07">
            <div class="page-header">
                <span class="page-header-doc-title">Keep Talking and Nobody Explodes Mod</span>
                <span class="page-header-section-title">Angles</span>
            </div>
            <div class="page-content">
                <h3>Step 3 of 5</h3>
                <p>Out of the 9 total points, take the 2 that are nearest to one another, and eliminate them.</p>
                <p>In case of a tie, eliminate either pair; It does not matter which. Ties where doing so will lead to issues will not occur.</p>
                <p>
                    Out of the 7 points that remain, take the 2 that are now nearest to one another, and eliminate them. Keep doing this until there is only one point left.
                    The angle corresponding to this point is the correct one.
                </p>
                
                <h3>Step 4 of 5</h3>
                <p>Use the buttons outside the circle to point the needle at the correct angle.</p>
                <p>
                    Pressing each button moves the needle by a certain distance, the value of which depends on the currently selected angular notation.
                    The specific values per button per notation are listed in the needle movement table on the next page.
                </p>
                <p>The top buttons move the needle counterclockwise by that value, and the bottom buttons move it clockwise.</p>
                <p>
                    In case you lose track of the needle’s exact current angle, a button can be held down to reset the needle to the nearest whole increment of the button’s value for the
                    currently selected notation.
                </p>
                <p>There is some grace space with the needle’s accuracy. The size of this grace space depends on the correct angle’s notation format. This is also listed in the table.</p>
                <p>
                    The module does not keep track of the number of times the needle has been spun around full circle, or whether it went clockwise or counter-clockwise to get to where it’s
                    pointed. Only its final direction matters.
                </p>
                
                <h3>Step 5 of 5</h3>
                <p>Once the needle is set at the correct angle, pull it out of the module to disarm it. Attempting to do so when the angle is not set correctly will incur a strike.</p>
            </div>
            <div class="page-footer relative-footer">7</div>
        </div>
        
        <div class="page page-bg-01">
            <div class="page-header">
                <span class="page-header-doc-title">Keep Talking and Nobody Explodes Mod</span>
                <span class="page-header-section-title">Angles</span>
            </div>
            <div class="page-content">
                
                <table>
                    <tr><th colspan="5">Needle Movement Table</th></tr>
                    <tr>
                        <th>Notation</th>
                        <th>Left Button Movement Value</th>
                        <th>Middle Button Movement Value</th>
                        <th>Right Button Movement Value</th>
                        <th>Solution Accuracy Grace Space to Either Side</th>
                    </tr>
                    <tr>
                        <td>Relative Directions</td>
                        <td>1/2 turn</td>
                        <td>1/4 turn</td>
                        <td>1/8 turn</td>
                        <td>None</td>
                    </tr>
                    <tr>
                        <td>Compass Points</td>
                        <td>Main wind</td>
                        <td>Half wind</td>
                        <td>Quarter wind</td>
                        <td>None</td>
                    </tr>
                    <tr>
                        <td>Arrows</td>
                        <td>1/2 turn</td>
                        <td>1/4 turn</td>
                        <td>1/8 turn</td>
                        <td>None</td>
                    </tr>
                    <tr>
                        <td>Degrees</td>
                        <td>1 Degree</td>
                        <td>6 Arcminutes</td>
                        <td>15 Arcseconds</td>
                        <td>30 Arcseconds</td>
                    </tr>
                    <tr>
                        <td>Radians</td>
                        <td>1/4&pi;<br>1/8&tau;</td>
                        <td>1/16&pi;<br>1/32&tau;</td>
                        <td>1/64&pi;<br>1/128&tau;</td>
                        <td>1/32&pi;<br>1/64&tau;</td>
                    </tr>
                    <tr>
                        <td>Gradians</td>
                        <td>10 grad</td>
                        <td>1 grad</td>
                        <td>0.1 grad</td>
                        <td>0.1 grad</td>
                    </tr>
                    <tr>
                        <td>Turns</td>
                        <td>1 turn</td>
                        <td>0.1 turn</td>
                        <td>0.01 turn</td>
                        <td>0.01 turn</td>
                    </tr>
                    <tr>
                        <td>Hexacontades</td>
                        <td>1 hexacontade</td>
                        <td>0.1 hexacontades</td>
                        <td>0.01 hexacontades</td>
                        <td>0.01 hexacontades</td>
                    </tr>
                    <tr>
                        <td>Pechus</td>
                        <td>1 pechus</td>
                        <td>0.1 pechus</td>
                        <td>0.01 pechus</td>
                        <td>0.01 pechus</td>
                    </tr>
                    <tr>
                        <td>Akhnam & Zam</td>
                        <td>4 Akhnam</td>
                        <td>1 Akhnam</td>
                        <td>1 Zam</td>
                        <td>0.5 Zam</td>
                    </tr>
                    <tr>
                        <td>Slopes</td>
                        <td>30 degrees</td>
                        <td>15 degrees</td>
                        <td>1 degree</td>
                        <td>15 degrees</td>
                    </tr>
                    <tr>
                        <td>Cartesian Coordinates</td>
                        <td>36 degrees</td>
                        <td>6 degrees</td>
                        <td>1 degree</td>
                        <td>15 degrees</td>
                    </tr>
                    <tr>
                        <td>BAM</td>
                        <td>0b00010000</td>
                        <td>0b00000100</td>
                        <td>0b00000001</td>
                        <td>None</td>
                    </tr>
                    <tr>
                        <td>Time</td>
                        <td>1 hour</td>
                        <td>10 minutes</td>
                        <td>1 minute</td>
                        <td>1 minute</td>
                    </tr>
                    <tr>
                        <td>Date</td>
                        <td>31 days&dagger;</td>
                        <td>7 days</td>
                        <td>1 day</td>
                        <td>1 day</td>
                    </tr>
                    <tr>
                        <td>Zodiac Signs</td>
                        <td>31 days&Dagger;</td>
                        <td>7 days</td>
                        <td>1 day</td>
                        <td>1 day</td>
                    </tr>
                    <tr>
                        <td>Flag Semaphore</td>
                        <td>1/2 turn</td>
                        <td>1/4 turn</td>
                        <td>1/8 turn</td>
                        <td>None</td>
                    </tr>
                </table>
                <p>
                    &dagger;: When holding down the button, the needle moves to next first of a zodiac period.<br>
                    &Dagger;: When holding down the button, the needle moves to next first of the month.
                </p>
            </div>
            <div class="page-footer relative-footer">8</div>
        </div>
        
        <div class="page page-bg-01">
            <div class="page-header">
                <span class="page-header-doc-title">Keep Talking and Nobody Explodes Mod</span>
                <span class="page-header-section-title">Appendix Colophon</span>
            </div>
            <div class="page-content">
                <h2>Appendix Colophon</h2>
                <p>Certain graphics in this manual document and/or its module counterparts have been sourced from third parties.</p>
                
                <h4>Angles</h4>
                <ul>
                    <li>
                        <strong>16-Point Compass Rose</strong> image by <span style="font-style: italic;">Brosen~commonswiki</span>, from <span style="font-style: italic;">Wikimedia Commons</span>.
                        Licensed under <span style="font-style: italic;">CC BY 2.5</span>. The following changes were made to the material: Font change.
                    </li>
                    <li>
                        <strong>Flag Semaphore</strong> images by <span style="font-style: italic;">Denelson83</span> assumed, from <span style="font-style: italic;">Wikimedia Commons</span>.
                        Licensed under <span style="font-style: italic;">CC BY-SA 3.0</span>. The following changes were made to the material: Greyscale filter.
                    </li>
                </ul>
                
                <h3>Licenses</h3>
                <p>For more information on each license, browse to the following Uniform Resource Locators (URL) using a computer’s internet browser.</p>
                <ul>
                    <li>
                        <strong>CC BY 2.5</strong> (Creative Commons Attribution 2.5 Generic):
                        <a class="license-url" target="_blank" href="https://creativecommons.org/licenses/by/2.5/deed.en">https://creativecommons.org/licenses/by/2.5/deed.en</a>
                    </li>
                    <li><strong>CC BY-SA 3.0</strong> (Creative Commons Attribution-Share Alike 3.0 Unported):
                        <a class="license-url" target="_blank" href="https://creativecommons.org/licenses/by-sa/3.0/deed.en">https://creativecommons.org/licenses/by-sa/3.0/deed.en</a>
                    </li>
                </ul>
            </div>
            <div class="page-footer relative-footer">9</div>
        </div>
    </div>
</body>
</html>