SHARE
TWEET

Pi Mem - first 500 digits

a guest Aug 14th, 2011 76 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">Y
  5. <META NAME="DESCRIPTION" CONTENT="Pi Mem. A Memorization aid for the first 500 digits of pi implemented with javascript. Complete with configurable dificulty levels, current digit counter, and next digit tips.">
  6. <META NAME="KEYWORDS" CONTENT="pi,memorization,500,aid,pi mem,spike snell,spike">
  7. <title>Pi Mem - Memorize the first 500 digits</title>
  8.  
  9. <STYLE TYPE="text/css">
  10.  
  11.     body {
  12.         height: 100%;
  13.         margin-left: 0px%;
  14.         margin-top: 10%;
  15.         margin-right: 0px;
  16.         margin-bottom: 0px;
  17.     }
  18.  
  19.  
  20.     .text {
  21.         font-size:200%
  22.     }
  23.  
  24.     #piField {
  25.         overflow: auto;
  26.         background-color: black;
  27.         border-color: lightblue;
  28.         border: 1px solid;
  29.         font-family: arial;
  30.         font-weight: bold;
  31.         font-size: 14pt;
  32.         color: lightblue;
  33.         background-image: url(pi.gif);
  34.         background-position: center center;
  35.         background-repeat: no-repeat;
  36.         resize: none;
  37.     }
  38.  
  39.     #count {
  40.         overflow: auto;
  41.         background-color: black;
  42.         border-color: lightblue;
  43.         border: 0px;
  44.         font-family: arial;
  45.         font-weight: bold;
  46.         font-size: 14pt;
  47.         color: lightblue;
  48.         resize: none;
  49.     }
  50.  
  51.     #status {
  52.         overflow: auto;
  53.         background-color: black;
  54.         border-color: lightblue;
  55.         border: 0px solid;
  56.         font-family: arial;
  57.         font-weight: bold;
  58.         font-size: 14pt;
  59.         color: lightblue;
  60.         resize: none;
  61.     }
  62.  
  63.     #error {
  64.         overflow: auto;
  65.         background-color: black;
  66.         border-color: lightblue;
  67.         border: 0px;
  68.         font-family: arial;
  69.         font-weight: bold;
  70.         font-size: 14pt;
  71.         color: lightblue;
  72.         resize: none;
  73.     }
  74.  
  75.        
  76. </STYLE>
  77.  
  78. <script language="javascript">
  79. <!--
  80.  
  81. // The first 500 digits of pi
  82. var pi = [1,4,1,5,9,2,6,5,3,5,8,9,7,9,3,2,3,8,4,6,2,6,4,3,3,8,3,2,7,9,5,0,2,8,8,4,1,9,7,1,6,9,3,9,9,3,7,5,1,0,5,8,2,0,9,7,4,9,4,4,5,9,2,3
  83.          ,0,7,8,1,6,4,0,6,2,8,6,2,0,8,9,9,8,6,2,8,0,3,4,8,2,5,3,4,2,1,1,7,0,6,7,9,8,2,1,4,8,0,8,6,5,1,3,2,8,2,3,0,6,6,4,7,0,9,3,8,4,4,6,0
  84.          ,9,5,5,0,5,8,2,2,3,1,7,2,5,3,5,9,4,0,8,1,2,8,4,8,1,1,1,7,4,5,0,2,8,4,1,0,2,7,0,1,9,3,8,5,2,1,1,0,5,5,5,9,6,4,4,6,2,2,9,4,8,9,5,4
  85.          ,9,3,0,3,8,1,9,6,4,4,2,8,8,1,0,9,7,5,6,6,5,9,3,3,4,4,6,1,2,8,4,7,5,6,4,8,2,3,3,7,8,6,7,8,3,1,6,5,2,7,1,2,0,1,9,0,9,1,4,5,6,4,8,5
  86.          ,6,6,9,2,3,4,6,0,3,4,8,6,1,0,4,5,4,3,2,6,6,4,8,2,1,3,3,9,3,6,0,7,2,6,0,2,4,9,1,4,1,2,7,3,7,2,4,5,8,7,0,0,6,6,0,6,3,1,5,5,8,8,1,7
  87.          ,4,8,8,1,5,2,0,9,2,0,9,6,2,8,2,9,2,5,4,0,9,1,7,1,5,3,6,4,3,6,7,8,9,2,5,9,0,3,6,0,0,1,1,3,3,0,5,3,0,5,4,8,8,2,0,4,6,6,5,2,1,3,8,4
  88.          ,1,4,6,9,5,1,9,4,1,5,1,1,6,0,9,4,3,3,0,5,7,2,7,0,3,6,5,7,5,9,5,9,1,9,5,3,0,9,2,1,8,6,1,1,7,3,8,1,9,3,2,6,1,1,7,9,3,1,0,5,1,1,8,5
  89.          ,4,8,0,7,4,4,6,2,3,7,9,9,6,2,7,4,9,5,6,7,3,5,1,8,8,5,7,5,2,7,2,4,8,9,1,2,2,7,9,3,8,1,8,3,0,1,1,9,4,9,1,2];
  90.  
  91. // A function to check the last digit of pi and see if it agrees with pi
  92. function checkPi() {
  93.    
  94.     // Set a pattern for number and grab the pi text field
  95.     var number = /[0-9]$/;
  96.     var piField = document.pi.piField.value;
  97.     var enteredWrong = false;
  98.        
  99.     // Get the length of the piField
  100.     var piFieldLength = piField.length;
  101.    
  102.     // If the user didn't enter a number
  103.     if ( number.test(piField.slice(-1)) != true ) {
  104.         enteredWrong = true;
  105.         document.pi.error.value = "Enter only numbers please.";
  106.         document.pi.piField.value = piField.slice(0,-1);
  107.     }
  108.    
  109.     // If the user entered the wrong number
  110.     if (pi[piFieldLength-1] != piField.slice(-1) && piField.slice(-1) != "" && number.test(piField.slice(-1)) == true) {
  111.         enteredWrong = true;   
  112.         document.pi.error.value = "";
  113.         document.pi.piField.value = piField.slice(0,-1);
  114.         document.pi.status.value = "The next digits were: " + pi[piFieldLength-1] + pi[piFieldLength] + pi[piFieldLength+1] + pi[piFieldLength+2];
  115.     }
  116.  
  117.     // If the user entered the right number
  118.     if (pi[piFieldLength-1] == piField.slice(-1) && piField.slice(-1) != "") {
  119.         document.pi.status.value = "";
  120.     }
  121.  
  122.     // If the user entered a number
  123.     if (number.test(piField.slice(-1)) == true) {
  124.         document.pi.error.value = "";
  125.     }
  126.        
  127.     // Check to make sure the entire pi field is valid starting with the leftmost entry
  128.     var current = 0;
  129.     while (pi[current] == piField.charAt(current) && piField.charAt(current) != "") {
  130.         current++;
  131.     }
  132.        
  133.     // Set the pi field to the last largest correct value of pi
  134.     // Erase more than one of the last digits entered if a 5, 10, 15, 20, or 25 back option is selected
  135.     var back = 1;
  136.     // Get the chosen radio button and set
  137.     chosen = "";
  138.     len = document.pi.back.length;
  139.     for (var j = 0; j < len; j++) {
  140.         if (document.pi.back[j].checked) {
  141.             chosen = document.pi.back[j].value;
  142.         }
  143.     }
  144.     if (chosen == "") {
  145.         // set the radio button with javascript
  146.         back = 1;
  147.     }
  148.     else {
  149.         back = chosen - 1;
  150.     }
  151.        
  152.     // If the user entered a wrong value set him back the right number of places
  153.     if ( enteredWrong ) {
  154.         if ( current < back ) {
  155.             document.pi.piField.value = "";
  156.             document.pi.count.value = "0";
  157.         }                      
  158.         else  {        
  159.             document.pi.piField.value = piField.slice(0,current-back);
  160.             document.pi.count.value = current-back;
  161.         }                      
  162.     }
  163.     else {
  164.         document.pi.piField.value = piField.slice(0,current);
  165.         // Display the current digit count of pi in the pi field
  166.         document.pi.count.value = current;
  167.     }
  168.    
  169. }
  170. -->
  171. </script>
  172. </head>
  173. <body bgcolor="#000000" onLoad="document.pi.piField.value = ''; document.pi.error.value = '                      And put pi in the box.'; document.pi.status.value = '         Select a difficulty level.'; document.pi.count.value = '0';">
  174. <center>
  175.  
  176. <form action="#" name="pi">
  177. <table border="0" cellspacing="0" cellpadding="0" width="40%">
  178.   <tr>
  179.    <td align="right" valign="top">
  180.       <label class="text"><font color="lightblue" face="Arial">3.</label><br><br><br><br>
  181.         00&nbsp;<br><input type="radio" name="back" value="1" onClick="document.pi.piField.focus();" checked>&nbsp;<br>
  182.         01&nbsp;<br><input type="radio" name="back" value="2" onClick="document.pi.piField.focus();">&nbsp;<br>
  183.         05&nbsp;<br><input type="radio" name="back" value="6" onClick="document.pi.piField.focus();">&nbsp;<br>
  184.  
  185.         10&nbsp;<br><input type="radio" name="back" value="11" onClick="document.pi.piField.focus();">&nbsp;<br>
  186.         15&nbsp;<br><input type="radio" name="back" value="16" onClick="document.pi.piField.focus();">&nbsp;<br>
  187.         20&nbsp;<br><input type="radio" name="back" value="21" onClick="document.pi.piField.focus();">&nbsp;<br>
  188.         25&nbsp;<br><input type="radio" name="back" value="26" onClick="document.pi.piField.focus();">&nbsp;<br></font>
  189.    </td>
  190.    <td colspan="1" align="center" valign="middle">
  191.   <textarea valign="middle" rows="20" cols="50" name="piField" id="piField" onKeyUp="checkPi()"></textarea>
  192.  
  193.   </td>
  194.   </tr>
  195. </table>
  196. <table border="0" cellspacing="0" cellpadding="0" width="40%">  
  197.   <tr>
  198.     <td rowspan="2">
  199.       Spike Snell
  200.     </td>
  201.     <td align="left" colspan="1">
  202.       <textarea valign="middle" rows="1" cols="3" name="count" id="count" readonly="readonly"></textarea>
  203.  
  204.     </td>
  205.     <td align="right" colspan="2">
  206.        <textarea valign="middle" rows="1" cols="28" name="status" id="status" readonly="readonly"></textarea>
  207.     </td>
  208.   </tr>
  209.   <tr>
  210.     <td align="right" colspan="3" valign="top">
  211.       <textarea valign="middle" rows="1" cols="33" name="error" id="error" readonly="readonly"></textarea>
  212.  
  213.     </td>
  214.   </tr>
  215. </table>
  216. </form>
  217. </center>
  218. </body>
  219. </html>
RAW Paste Data
Top