Skip to content

Instantly share code, notes, and snippets.

@Crysknife007

Crysknife007/piMem.html

Last active December 15, 2015 08:39
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Crysknife007/5232235 to your computer and use it in GitHub Desktop.
Save Crysknife007/5232235 to your computer and use it in GitHub Desktop.
Download ZIP
Pi Mem. A Memorization aid for the first 500 digits of pi implemented with javascript.
Raw
piMem.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<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.">
<META NAME="KEYWORDS" CONTENT="pi,memorization,500,aid,pi mem,spike snell,spike">
<title>Pi Mem - Memorize the first 500 digits</title>
<STYLE TYPE="text/css">
body {
height: 100%;
margin-left: 0px%;
margin-top: 10%;
margin-right: 0px;
margin-bottom: 0px;
}
.text {
font-size:200%
}
#piField {
overflow: auto;
background-color: black;
border-color: lightblue;
border: 1px solid;
font-family: arial;
font-weight: bold;
font-size: 14pt;
color: lightblue;
background-image: url(pi.gif);
background-position: center center;
background-repeat: no-repeat;
resize: none;
}
#count {
overflow: auto;
background-color: black;
border-color: lightblue;
border: 0px;
font-family: arial;
font-weight: bold;
font-size: 14pt;
color: lightblue;
resize: none;
}
#status {
overflow: auto;
background-color: black;
border-color: lightblue;
border: 0px solid;
font-family: arial;
font-weight: bold;
font-size: 14pt;
color: lightblue;
resize: none;
}
#error {
overflow: auto;
background-color: black;
border-color: lightblue;
border: 0px;
font-family: arial;
font-weight: bold;
font-size: 14pt;
color: lightblue;
resize: none;
}
</STYLE>
<script language="javascript">
<!--
// The first 500 digits of pi
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
,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
,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
,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
,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
,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
,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
,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];
// A function to check the last digit of pi and see if it agrees with pi
function checkPi() {
// Set a pattern for number and grab the pi text field
var number = /[0-9]$/;
var piField = document.pi.piField.value;
var enteredWrong = false;
// Get the length of the piField
var piFieldLength = piField.length;
// If the user didn't enter a number
if ( number.test(piField.slice(-1)) != true ) {
enteredWrong = true;
document.pi.error.value = "Enter only numbers please.";
document.pi.piField.value = piField.slice(0,-1);
}
// If the user entered the wrong number
if (pi[piFieldLength-1] != piField.slice(-1) && piField.slice(-1) != "" && number.test(piField.slice(-1)) == true) {
enteredWrong = true;
document.pi.error.value = "";
document.pi.piField.value = piField.slice(0,-1);
document.pi.status.value = "The next digits were: " + pi[piFieldLength-1] + pi[piFieldLength] + pi[piFieldLength+1] + pi[piFieldLength+2];
}
// If the user entered the right number
if (pi[piFieldLength-1] == piField.slice(-1) && piField.slice(-1) != "") {
document.pi.status.value = "";
}
// If the user entered a number
if (number.test(piField.slice(-1)) == true) {
document.pi.error.value = "";
}
// Check to make sure the entire pi field is valid starting with the leftmost entry
var current = 0;
while (pi[current] == piField.charAt(current) && piField.charAt(current) != "") {
current++;
}
// Set the pi field to the last largest correct value of pi
// Erase more than one of the last digits entered if a 5, 10, 15, 20, or 25 back option is selected
var back = 1;
// Get the chosen radio button and set
chosen = "";
len = document.pi.back.length;
for (var j = 0; j < len; j++) {
if (document.pi.back[j].checked) {
chosen = document.pi.back[j].value;
}
}
if (chosen == "") {
// set the radio button with javascript
back = 1;
}
else {
back = chosen - 1;
}
// If the user entered a wrong value set him back the right number of places
if ( enteredWrong ) {
if ( current < back ) {
document.pi.piField.value = "";
document.pi.count.value = "0";
}
else {
document.pi.piField.value = piField.slice(0,current-back);
document.pi.count.value = current-back;
}
}
else {
document.pi.piField.value = piField.slice(0,current);
// Display the current digit count of pi in the pi field
document.pi.count.value = current;
}
}
-->
</script>
</head>
<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';">
<center>
<form action="#" name="pi">
<table border="0" cellspacing="0" cellpadding="0" width="40%">
<tr>
<td align="right" valign="top">
<label class="text"><font color="lightblue" face="Arial">3.</label><br><br><br><br>
00&nbsp;<br><input type="radio" name="back" value="1" onClick="document.pi.piField.focus();" checked>&nbsp;<br>
01&nbsp;<br><input type="radio" name="back" value="2" onClick="document.pi.piField.focus();">&nbsp;<br>
05&nbsp;<br><input type="radio" name="back" value="6" onClick="document.pi.piField.focus();">&nbsp;<br>
10&nbsp;<br><input type="radio" name="back" value="11" onClick="document.pi.piField.focus();">&nbsp;<br>
15&nbsp;<br><input type="radio" name="back" value="16" onClick="document.pi.piField.focus();">&nbsp;<br>
20&nbsp;<br><input type="radio" name="back" value="21" onClick="document.pi.piField.focus();">&nbsp;<br>
25&nbsp;<br><input type="radio" name="back" value="26" onClick="document.pi.piField.focus();">&nbsp;<br></font>
</td>
<td colspan="1" align="center" valign="middle">
<textarea valign="middle" rows="20" cols="50" name="piField" id="piField" onKeyUp="checkPi()"></textarea>
</td>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="0" width="40%">
<tr>
<td rowspan="2">
<font color="black">Spike Snell</font>
</td>
<td align="left" colspan="1">
<textarea valign="middle" rows="1" cols="3" name="count" id="count" readonly="readonly"></textarea>
</td>
<td align="right" colspan="2">
<textarea valign="middle" rows="1" cols="28" name="status" id="status" readonly="readonly"></textarea>
</td>
</tr>
<tr>
<td align="right" colspan="3" valign="top">
<textarea valign="middle" rows="1" cols="33" name="error" id="error" readonly="readonly"></textarea>
</td>
</tr>
</table>
</form>
</center>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment