HTML/Binary Tango.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1">
    <title>Binary Tango — 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>
        .one {color:#FF0000}
        .two {color:#0000FF}
    </style>
</head>
<body>
    <div class="section">
        <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">Binary Tangos</span>
            </div>
            <div class="page-content">
                <img src="img/Component/Binary Tango.svg" class="diagram">
                <h2>On the Subject of Binary Tangos</h2>
                <p class="flavour-text">It takes 10 to tango.</p>

                <p>This module has three large displays at the bottom containing decimal numbers. Take the numbers from the first and third display and convert them into 8-bit binary.</p>
                <p>Then, take the number of batteries. If it’s even, take the first number; otherwise, take the second one. Take its most significant bit: this will be the most significant bit for your answer.</p>
                <p>After that, take the other number and take its second-most significant bit. Repeat this back-and-forth until you have an 8-bit binary number, which you can now convert into a decimal number.</p>
                <p>Submit your answer using the buttons above the displays. Your answer is displayed on the second display. Your answer will always be between 0 and 255.</p>
                <p>Once you think you’re done, press the big square at the top (which is actually a pixel). If you’re wrong, a strike will occur.</p>
                <p>On the second stage, you can notice something : letters may have appeared! That’s because the displays now show the numbers in hexadecimal. Do the same thing as last time, but use the number of indicators instead in order to find which number you’ll use first.</p>
                <p>On the third stage, the displays will now show numbers in octal. This time, use the number of port plates instead of the number of indicators. After that, the module will finally be solved.</p>
                <p>Example: With the numbers <span class=one>241 (11110001)</span> and <span class=two>97 (01100001)</span>, your answer will be <span class=one>1</span><span class=two>1</span><span class=one>1</span><span class=two>0</span><span class=one>0</span><span class=two>0</span><span class=one>0</span><span class=two>1</span>, or 225.</p>
            </div>
            <div class="page-footer relative-footer">Page 1 of 2</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">Appendix BA5ED</span>
            </div>
            <div class="page-content">
                <h2>Appendix BA5ED: Conversion in base 2, 10, 16 and 8</h2>
                <table>
                    <tr>
                        <th>Binary (base 2)</th>
                        <th>Decimal (base 10)</th>
                        <th>Hexadecimal (base 16)</th>
                        <th>Octal (base 8)</th>
                    </tr>
                    <tr><td>0000</td><td>0</td><td>0</td><td>0</td></tr>
                    <tr><td>0001</td><td>1</td><td>1</td><td>1</td></tr>
                    <tr><td>0010</td><td>2</td><td>2</td><td>2</td></tr>
                    <tr><td>0011</td><td>3</td><td>3</td><td>3</td></tr>
                    <tr><td>0100</td><td>4</td><td>4</td><td>4</td></tr>
                    <tr><td>0101</td><td>5</td><td>5</td><td>5</td></tr>
                    <tr><td>0110</td><td>6</td><td>6</td><td>6</td></tr>
                    <tr><td>0111</td><td>7</td><td>7</td><td>7</td></tr>
                    <tr><td>1000</td><td>8</td><td>8</td><td>10</td></tr>
                    <tr><td>1001</td><td>9</td><td>9</td><td>11</td></tr>
                    <tr><td>1010</td><td>10</td><td>A</td><td>12</td></tr>
                    <tr><td>1011</td><td>11</td><td>B</td><td>13</td></tr>
                    <tr><td>1100</td><td>12</td><td>C</td><td>14</td></tr>
                    <tr><td>1101</td><td>13</td><td>D</td><td>15</td></tr>
                    <tr><td>1110</td><td>14</td><td>E</td><td>16</td></tr>
                    <tr><td>1111</td><td>15</td><td>F</td><td>17</td></tr>
                </table>
            </div>
            <div class="page-footer relative-footer">Page 2 of 2</div>
        </div>
    </div>
</body>
</html>