<!DOCTYPE html>
<html data-ng-app="onetime">
  <head>
    <script data-require="angular.js@*" data-semver="1.4.0-beta.6" src="https://code.angularjs.org/1.4.0-beta.6/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div class="intro">
    <h1>One-time Pad, puzzle problem</h1>
    <p>Here is the scheme:  the alphabet has been replaced with binary strings 
    of length 5 (note that i and j map to the same string).  
    My plaintext is a       <strong>panagram</strong>
, a sentence containing every 
    letter in the alphabet.  
    A random binary string of length 5 (chosen uniformly) is chosen as the key.  
    The key is padded into every letter in my panagram (using digit-wise XOR).
    Your goal is to decrypt the panagram.
    </p>
    </div>
    <div class="encode">
    <h2>The encoding from alphabet to F_2^5:</h2>
    <table>
      <tbody>
        <tr>
          <td>a</td>
          <td>00000</td>
        </tr>
        <tr>
          <td>b</td>
          <td>00001</td>
        </tr>
        <tr>
          <td>c</td>
          <td>00010</td>
        </tr>
        <tr>
          <td>d</td>
          <td>00011</td>
        </tr>
        <tr>
          <td>e</td>
          <td>00100</td>
        </tr>
        <tr>
          <td>f</td>
          <td>00101</td>
        </tr>
        <tr>
          <td>g</td>
          <td>00110</td>
        </tr>
        <tr>
          <td>h</td>
          <td>00111</td>
        </tr>
        <tr>
          <td>i</td>
          <td>01000</td>
        </tr>
        <tr>
          <td>j</td>
          <td>01000</td>
        </tr>
        <tr>
          <td>k</td>
          <td>01001</td>
        </tr>
        <tr>
          <td>l</td>
          <td>01010</td>
        </tr>
        <tr>
          <td>m</td>
          <td>01011</td>
        </tr>
        <tr>
          <td>n</td>
          <td>01100</td>
        </tr>
        <tr>
          <td>o</td>
          <td>01101</td>
        </tr>
        <tr>
          <td>p</td>
          <td>01110</td>
        </tr>
        <tr>
          <td>q</td>
          <td>01111</td>
        </tr>
        <tr>
          <td>r</td>
          <td>10000</td>
        </tr>
        <tr>
          <td>s</td>
          <td>10001</td>
        </tr>
        <tr>
          <td>t</td>
          <td>10010</td>
        </tr>
        <tr>
          <td>u</td>
          <td>10011</td>
        </tr>
        <tr>
          <td>v</td>
          <td>10100</td>
        </tr>
        <tr>
          <td>w</td>
          <td>10101</td>
        </tr>
        <tr>
          <td>x</td>
          <td>10110</td>
        </tr>
        <tr>
          <td>y</td>
          <td>10111</td>
        </tr>
        <tr>
          <td>z</td>
          <td>11000</td>
        </tr>
      </tbody>
    </table>
    </div>
    <div class="code">
    <h2>The Encrypted Panagram letter by letter:</h2>
    <ol ng-controller="panagramController">
      <li ng-repeat="letter in panagram">{{letter.letter}}</li>
    </ol>
    </div>
  </body>
</html>
// Code goes here
var theapp = angular.module('onetime',[]);

theapp.controller("panagramController", ["$scope", function($scope){
$scope.panagram = [
  {"letter":'10110'},
{"letter":  '01010'},
{"letter":  '10001'},
{"letter":  '11011'},
{"letter":   '10000'},
{"letter":   '01100'},
{"letter":   '11001'},
{"letter":   '11100'},
{"letter":   '01011'},
{"letter":   '10001'},
{"letter":   '10101'},
{"letter":   '11111'},
{"letter":   '00001'},
{"letter":   '11101'},
{"letter":   '10111'},
{"letter":   '11110'},
{"letter":   '01110'},
{"letter":   '01001'},
{"letter":   '01000'},
{"letter":   '01101'},
{"letter":   '11101'},
{"letter":   '01111'},
{"letter":   '11000'},
{"letter":   '10100'},
{"letter":   '10011'},
{"letter":   '11010'},
{"letter":   '10001'},
{"letter":   '10001'},
{"letter":   '10010'}];
  
}]);
/* Styles go here */
.intro {
  width: 100%;
}


.code {
  float: right;
  width: 50%;
}

.encode {
  float: left;
  width: 50%;
}