HTML Gaussian Calculator

I had previously posted an app to make calculations based on gaussian curves. This post extends that to an app written in HTML and Javascript, making it cross platform without the installation of special software.

It also automatically does calculations for male and female height, bmi of children and IQ. These are based on U.S. statistics, so they may not hold for other countries. If you want it to hold for another country, you will need to change the median values. The height input can be either meters or inches, depending on the state of the checkbox.

Here is the code:

<!DOCTYPE html PUBLIC ‘-//W3C//DTD XHTML 1.0 Transitional//EN’ ‘http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd’&gt;
<html xmlns=’http://www.w3.org/1999/xhtml’&gt;
<head profile=’http://gmpg.org/xfn/11′&gt;
<title>Gauss</title>
<style type=’text/css’>
body {margin-left:0;margin-right:0;font:normal normal normal 12px Arial;}
a{ text-decoration: }
:link { color: rgb(0, 0, 255) }
:visited {color :rgb(100, 0,100) }
:hover { }
:active { }
#l1{position: absolute; left:10px ; top:10px ; width:360px ; height:240px ;background:#EEEEEE; padding: 10px; border: 4px ridge}
input{position: relative; border: 4px inset }
select{position: relative}
</style>

function calc() {
if(document.getElementById(“items”).value == “Male Height”) {
document.getElementById(“t2”).value = 69;
document.getElementById(“t3”).value = 2.8;
} else if(document.getElementById(“items”).value == “Female Height”) {
document.getElementById(“t2”).value = 64;
document.getElementById(“t3”).value = 2.8;
} else if(document.getElementById(“items”).value == “IQ”) {
document.getElementById(“t2”).value = 100;
document.getElementById(“t3”).value = 15;
} else if(document.getElementById(“items”).value == “BMI Children”) {
document.getElementById(“t2”).value = 18;
document.getElementById(“t3”).value = 3.0;
}
var wd = document.getElementById(“t3”).value;
var x = document.getElementById(“t1”).value;
if (document.getElementById(“c1”).checked) x *= 39;
var cnt = document.getElementById(“t2”).value;
var pop = document.getElementById(“t5”).value;
var pop2 = document.getElementById(“t5”).value;
var cdf = (1 – (.5 *(1 + erf((x – cnt) / (wd * Math.sqrt(2)))))) * 100;if (cdf >= 1) {
document.getElementById(“t4″).value = ” ” + (100-cdf).toFixed(1) + ” %”;
} else if (cdf >= .1) {
document.getElementById(“t4″).value = ” ” + (100-cdf).toFixed(2) + ” %”;
} else if (cdf >= .01) {
document.getElementById(“t4″).value = ” ” + (100-cdf).toFixed(3) + ” %”;
} else if (cdf >= .001) {
document.getElementById(“t4″).value = ” ” + (100-cdf).toFixed(4) + ” %”;
} else if (cdf >= .0001) {
document.getElementById(“t4″).value = ” ” + (100-cdf).toFixed(5) + ” %”;
} else {
document.getElementById(“t4″).value = ” ” + (100-cdf).toFixed(6) + ” %”;
}
pop = cdf/100 * pop;
document.getElementById(“t6″).value = ” ” + Math.floor(pop2 – pop);
}

function erf(z) {
var t = 1.0 / (1.0 + 0.5 * Math.abs(z));
var ans = 1 – t * Math.exp( -z*z – 1.26551223 +
t * ( 1.00002368 +
t * ( 0.37409196 +
t * ( 0.09678418 +
t * (-0.18628806 +
t * ( 0.27886807 +
t * (-1.13520398 +
t * ( 1.48851587 +
t * (-0.82215223 +
t * ( 0.17087277))))))))));
if (z >= 0) {
return ans;
} else {
return -ans;
}
}

</head>
<body>

Value
Median
Standard Deviation
%” /> % > or % Population
#” /> # > or #
Calculate
ItemMale HeightFemale HeightIQBMI Children
Height entered in meters

</body>
</html>

The interface consists of a layer with six text input boxes, a button, a select box and a checkbox:

Value
Median
Standard Deviation
%” /> % > or % Population
#” /> # > or #
Calculate
ItemMale HeightFemale HeightIQBMI Children
Height entered in meters

On clicking the Calculate button, the function calc() is called, which initially sets the default values:
if(document.getElementById(“items”).value == “Male Height”) {
document.getElementById(“t2”).value = 69;
document.getElementById(“t3”).value = 2.8;
} else if(document.getElementById(“items”).value == “Female Height”) {
document.getElementById(“t2”).value = 64;
document.getElementById(“t3”).value = 2.8;
} else if(document.getElementById(“items”).value == “IQ”) {
document.getElementById(“t2”).value = 100;
document.getElementById(“t3”).value = 15;
} else if(document.getElementById(“items”).value == “BMI Children”) {
document.getElementById(“t2”).value = 18;
document.getElementById(“t3”).value = 3.0;
}

It then takes the input values:
var wd = document.getElementById(“t3”).value;
var x = document.getElementById(“t1”).value;
if (document.getElementById(“c1”).checked) x *= 39;
var cnt = document.getElementById(“t2”).value;
var pop = document.getElementById(“t5”).value;
var pop2 = document.getElementById(“t5”).value;

It then performs the calculation using the return value of the function erf():
var cdf = (1 – (.5 *(1 + erf((x – cnt) / (wd * Math.sqrt(2)))))) * 100;

function erf(z) {
var t = 1.0 / (1.0 + 0.5 * Math.abs(z));
var ans = 1 – t * Math.exp( -z*z – 1.26551223 +
t * ( 1.00002368 +
t * ( 0.37409196 +
t * ( 0.09678418 +
t * (-0.18628806 +
t * ( 0.27886807 +
t * (-1.13520398 +
t * ( 1.48851587 +
t * (-0.82215223 +
t * ( 0.17087277))))))))));
if (z >= 0) {
return ans;
} else {
return -ans;
}
}

Finally, the result is outputted:
if (cdf >= 1) {
document.getElementById(“t4″).value = ” < ” + cdf.toFixed(1) + ” % > ” + (100-cdf).toFixed(1) + ” %”;
} else if (cdf >= .1) {
document.getElementById(“t4″).value = ” < ” + cdf.toFixed(2) + ” % > ” + (100-cdf).toFixed(2) + ” %”;
} else if (cdf >= .01) {
document.getElementById(“t4″).value = ” < ” + cdf.toFixed(3) + ” % > ” + (100-cdf).toFixed(3) + ” %”;
} else if (cdf >= .001) {
document.getElementById(“t4″).value = ” < ” + cdf.toFixed(4) + ” % > ” + (100-cdf).toFixed(4) + ” %”;
} else if (cdf >= .0001) {
document.getElementById(“t4″).value = ” < ” + cdf.toFixed(5) + ” % > ” + (100-cdf).toFixed(5) + ” %”;
} else {
document.getElementById(“t4″).value = ” < ” + cdf.toFixed(6) + ” % > ” + (100-cdf).toFixed(6) + ” %”;
}
pop = cdf/100 * pop;
document.getElementById(“t6″).value = ” < ” + Math.floor(pop) + ” > ” + Math.floor(pop2 – pop);
}

Here is how the app appears for a calculation of women 6 ft tall:

Click image for larger view

fheight

Here is how it appears for women 5 ft. tall:

Click image for larger view

fheight2

Anaglyph Creator Updated

I had previously described a 3d viewer app with thumbnails and an anaglyph viewer app for images. This post combines the two into an anaglyph viewer with thumbnails and also includes viewing videos.

Here is the code:

<!DOCTYPE html PUBLIC ‘-//W3C//DTD XHTML 1.0 Transitional//EN’ ‘http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd’&gt;
<html xmlns=’http://www.w3.org/1999/xhtml’&gt;
<head profile=’http://gmpg.org/xfn/11′&gt;
<title>3D</title>
<style type=’text/css’>body{background: black}
#r1,#h5,#h6,#h7,#h8{position: relative; top: 120px}
#i1{height: 50px}
td{height: 50px; text-align: center; border: 1px solid black; padding: 1px}
#s2{position: absolute; left: 600px; top: 0}
#ta1{position: absolute; left: 1150px; top: 0}
#t1a{position: absolute; left: 150px; top: 200px; }
#control{position: absolute; background: #DDDDDD; height: 200%; width: 100%}
.container{position:absolute; left: 0;  width: 100%; top: 100px;}
#files{position: absolute; left: 10px; top: 3.2%; width: 400px}
#b1{position: absolute; left: 10px; top: 5%; width: 160px}
#b3{position: absolute; left: 215px; top: 5%; width: 160px}
#b2{position: absolute; left: 420px; top: 5%; width: 160px}
#list{position: absolute; left: 420px; top: 2.5%; width: 160px}
#h1{position: absolute; left: 10px; top: 12.5%; background: white; font-size: 15pt }
#t1{position: absolute; left: 10px; top: 15.5%; width: 50px}
#h2{position: absolute; left: 10px; top: 22.5%; background: white; font-size: 15pt }
#t2{position: absolute; left: 10px; top: 25.5%;  width: 50px}
#h3{position: absolute; left: 10px; top: 32.5%; background: white; font-size: 15pt }
#t3{position: absolute; left: 10px; top: 35.5%; width: 50px }
#h4{position: absolute; left: 10px; top: 42.5%; background: white; font-size: 15pt }
#t4{position: absolute; left: 10px; top: 45.5%; width: 50px }
#arrows{position: absolute; width: 200px; height: 50px; left: 50%; top: 850px; margin-left: -100px; text-align: center; visibility: hidden; background: black}
#f1_container {    position: absolute; top: 0;
-webkit-perspective: 1000;
-moz-perspective: 1000px; background: white}
#f2_container {    position: absolute; top: 0;
-webkit-perspective: 1000;
-moz-perspective: 1000px; opacity: 0.5; background: white}

#f1card {width: 100%; height: 100%;
-webkit-transform-style: preserve-3d;
-webkit-transition: all 1.0s linear;
-moz-transform-style: preserve-3d;
-moz-transition: all 1.0s linear;
-o-transform-style: preserve-3d;
-o-transition: all 1.0s linear;
-ms-transform-style: preserve-3d;
-ms-transition: all 1.0s linear;
transform-style: preserve-3d;
transition: all 1.0s linear;
-webkit-transform: rotateY(-6deg);
-moz-transform: rotateY(-6deg);
-o-transform: rotateY(-6deg);
-ms-transform: rotateY(-6deg);
transform: rotateY(-6deg);
}

#f2card {width: 100%; height: 100%;
-webkit-transform-style: preserve-3d;
-webkit-transition: all 1.0s linear;
-moz-transform-style: preserve-3d;
-moz-transition: all 1.0s linear;
-o-transform-style: preserve-3d;
-o-transition: all 1.0s linear;
-ms-transform-style: preserve-3d;
-ms-transition: all 1.0s linear;
transform-style: preserve-3d;
transition: all 1.0s linear;
-webkit-transform: rotateY(6deg);
-moz-transform: rotateY(6deg);
-o-transform: rotateY(6deg);
-ms-transform: rotateY(6deg);
transform: rotateY(6deg);
}

#img1,#img2{ }
#lr{position: absolute; width: 100%; height: 100%;  top: 0; left: 0}
#lc{position: absolute; width: 100%; height: 100%;  top: 0; left: 0}

</style>
</head>
<body>

</div>
</div>

</div>
</div>
</div>

Yellow BlueBlue YellowRed CyanCyan Red
Left Rotation Right Rotation Separation   Slide Interval

Choose Folder
file:///media/removable/TOSHIBA%20EXT/My%20Pictures/
file:///media/removable/TOSHIBA%20EXT/My%20Pictures/Animated GIF/
file:///media/removable/TOSHIBA%20EXT/My%20Pictures/A-E/file:///media/removable/TOSHIBA%20EXT/My%20Pictures/F-J/
file:///media/removable/TOSHIBA%20EXT/My%20Pictures/K-O/
file:///media/removable/TOSHIBA%20EXT/My%20Pictures/P-R/
file:///media/removable/TOSHIBA%20EXT/My%20Pictures/S-T/
file:///media/removable/TOSHIBA%20EXT/My%20Pictures/Nails/
file:///media/removable/TOSHIBA%20EXT/My%20Pictures/threed/
file:///media/removable/TOSHIBA%20EXT/mediaplayer-viral/FLV/
file:///media/removable/TOSHIBA%20EXT/Debut/Wondershare/MP4/
file:///home/chronos/u-1eb10e124afb2b2cad22d7f9b971259b7789c079/Downloads/
file:///home/chronos/u-1eb10e124afb2b2cad22d7f9b971259b7789c079/Downloads/Blog/
file://I:/My Pictures/
file://I:/My Pictures/Animated GIF/
file://I:/My Pictures/A-E/
file://I:/My Pictures/F-J/
file://I:/My Pictures/K-O/
file://I:/My Pictures/P-R/
file://I:/My Pictures/S-T/
file://I:/My Pictures/threed/

<select id=”s2″ onchange=’create();’>
<option>Choose Set</option>
<option>thumb1</option>
</select>
<textarea id=”ta1″ name=”ta1″ rows=”40″ cols=”20″></textarea>
</div>
<table id=”t1a” ></table>

     

http://images2.js

var v1; var v2; var rot; var rot2; var fl; var fl2;  var width; var height; var lt; var rt;  var cnt = 0; var fl1 = “”; var a = 0; var b; var fl3; var sld = false; var fld = “”; var j = 0; var fil = “”;
var content = “”; var files; var inter = “5000”; var clrval = “by”; var fltr = .2;
var table2 = [];

function reset() {
document.getElementById(“f1_container”).innerHTML = “”;
document.getElementById(“f2_container”).innerHTML = “”;
}

function endSlide() {
clearInterval(s);
sld = false;
changeImage(“n”);
}

function showSlides() {
sld = true;
inter = parseInt(document.getElementById(“t4”).value)*1000;
s = setInterval(“changeImage(‘y’)”, inter);
}

function changeImage(val) {
if (sld || val == “n”) {
if (val == “n” && sld) clearInterval(s);
a = document.getElementById(“ta1”).value.indexOf(“display”, a + 1) + 9;
b = document.getElementById(“ta1”).value.indexOf(“‘”, a + 1);
fl = document.getElementById(“ta1″).value.substr(a, b – a);
if (a == 37) fl3 = fl
if (fl == ” id=”) {
fl = fl3;
fl1 = fl;
a = 37;
}
fl1 = fl;
display(fl1);
}
}

function multiFileSelect(evt) {
files = evt.target.files;
fld = document.getElementById(“s1”).value;
for (var i = 0, f; f = files[i]; i++) {
cnt ++;
if (cnt == 1) content = “

“;
if (f.name.indexOf(“jpg”) > -1 || f.name.indexOf(“gif”) > -1 || f.name.indexOf(“png”) > -1 || f.name.indexOf(“webm”) > -1 || f.name.indexOf(“mp4”) > -1)  {
j++;
table2.push(“

” );
if (j % 5 == 0) table2.push(“ “);
fil = fld + f.name;
}
}
}
document.getElementById(‘files’).addEventListener(‘change’, multiFileSelect, false);

function create() {
if (document.getElementById(“s2”).value != “Choose Set”) {
if (document.getElementById(“s2”).value == “thumb1″) content = thumb1;
} else {
content += table2.join(”) + “

“;
}
document.getElementById(“t1a”).innerHTML = content;
content = content.replace(/”/g,’\\”‘);
document.getElementById(“ta1”).value = ‘”‘ + content + ‘”‘;
}

function getFile() {
fl = fil;
fl2 = fl;
fl1 = fl;
fl = “ “;
fl2 = “ “;
if (fl.indexOf(“webm”) > -1 ) {
fl = ”;
fl2 = ”;
}
if (fl.indexOf(“mp4″) > -1 ) {
fl = ”;
fl2 = ”;
}

v1 = document.getElementById(“f1card”);
v2 = document.getElementById(“f2card”);
v1.innerHTML = fl;
v2.innerHTML = fl2;
}

function display(fla) {
document.getElementById(“arrows”).style.visibility=”visible”;
if (fl1 != “”) fla = fl1;
var vid = fla;
fl = “ “;
fl2 = fla;
fl2 = “ “;

if (fla.indexOf(“webm”) > -1 ) {
fl = ”;
fl2 = ”;
}

if (fla.indexOf(“mp4″) > -1 ) {
fl = ”;
fl2 = ”;
}

v1 = document.getElementById(“f1card”);
v2 = document.getElementById(“f2card”);
v1.innerHTML = fl;
v2.innerHTML = fl2;
fl1 = “”;
rot = parseInt(document.getElementById(‘t1’).value);
rot2 = parseInt(document.getElementById(‘t2’).value);
v1.style.WebkitTransform= “rotateY(” + rot + “deg)”;
v1.style.MozTransform= “rotateY(” + rot + “deg)”;
v1.style.msTransform= “rotateY(” + rot + “deg)”;
v1.style.transform= “rotateY(” + rot + “deg)”;
v2.style.WebkitTransform= “rotateY(” + rot2 + “deg)”;
v2.style.MozTransform= “rotateY(” + rot2 + “deg)”;
v2.style.msTransform= “rotateY(” + rot2 + “deg)”;
v2.style.transform= “rotateY(” + rot2 + “deg)”;
document.getElementById(“control”).style.visibility = “hidden”;
document.getElementById(“t1a”).style.visibility = “hidden”;
width = img1.clientWidth;
height = img1.clientHeight;
var width2 = width;

if (width / height > 1.1 ) {
width2 = 500;
document.getElementById(“f1_container”).style.width=”700px”;
document.getElementById(“f2_container”).style.width=”700px”;
document.getElementById(“f1_container”).style.height= 700*height/width + “px”;
document.getElementById(“f2_container”).style.height= 700*height/width + “px”;
} else {
document.getElementById(“f1_container”).style.height=”500px”;
document.getElementById(“f2_container”).style.height=”500px”;
document.getElementById(“f1_container”).style.width= 500*width/height + “px”;
document.getElementById(“f2_container”).style.width= 500*width/height + “px”;
}

if (fl.indexOf(“video”) > -1) {
document.getElementById(“f1_container”).style.width=”800px”;
document.getElementById(“f2_container”).style.width=”800px”;
document.getElementById(“f1_container”).style.height= 800*height/width + “px”;
document.getElementById(“f2_container”).style.height= 800*height/width + “px”;
}

if (width / height > 1.5) {
document.getElementById(“f1_container”).style.width=”1000px”;
document.getElementById(“f2_container”).style.width=”1000px”;
document.getElementById(“f1_container”).style.height= 1000*height/width + “px”;
document.getElementById(“f2_container”).style.height= 1000*height/width + “px”;
}

if (document.getElementById(“t3”).value != “0”) {
lt = screen.width/2 – parseInt(document.getElementById(“f1_container”).style.width)/2 – parseInt(document.getElementById(“t3”).value);
rt = lt + parseInt(document.getElementById(“t3”).value) + “px”;
lt += “px”;
document.getElementById(“f1_container”).style.left = lt;
document.getElementById(“f2_container”).style.left = rt;
document.getElementById(“img1”).style.width = document.getElementById(“f1_container”).style.width;
document.getElementById(“img2”).style.width = document.getElementById(“f2_container”).style.width;
}

var r = document.getElementsByName(“r1”);
for (var i=0; i

</body></html>

The various parts have been described before.

Perspective:
#f1_container {    position: absolute; top: 0;
-webkit-perspective: 1000;
-moz-perspective: 1000px; background: white}
#f2_container {    position: absolute; top: 0;
-webkit-perspective: 1000;
-moz-perspective: 1000px; opacity: 0.5; background: white}

#f1card {width: 100%; height: 100%;
-webkit-transform-style: preserve-3d;
-webkit-transition: all 1.0s linear;
-moz-transform-style: preserve-3d;
-moz-transition: all 1.0s linear;
-o-transform-style: preserve-3d;
-o-transition: all 1.0s linear;
-ms-transform-style: preserve-3d;
-ms-transition: all 1.0s linear;
transform-style: preserve-3d;
transition: all 1.0s linear;
-webkit-transform: rotateY(-6deg);
-moz-transform: rotateY(-6deg);
-o-transform: rotateY(-6deg);
-ms-transform: rotateY(-6deg);
transform: rotateY(-6deg);
}

#f2card {width: 100%; height: 100%;
-webkit-transform-style: preserve-3d;
-webkit-transition: all 1.0s linear;
-moz-transform-style: preserve-3d;
-moz-transition: all 1.0s linear;
-o-transform-style: preserve-3d;
-o-transition: all 1.0s linear;
-ms-transform-style: preserve-3d;
-ms-transition: all 1.0s linear;
transform-style: preserve-3d;
transition: all 1.0s linear;
-webkit-transform: rotateY(6deg);
-moz-transform: rotateY(6deg);
-o-transform: rotateY(6deg);
-ms-transform: rotateY(6deg);
transform: rotateY(6deg);
}

v1 = document.getElementById(“f1card”);
v2 = document.getElementById(“f2card”);
v1.innerHTML = fl;
v2.innerHTML = fl2;
fl1 = “”;
rot = parseInt(document.getElementById(‘t1’).value);
rot2 = parseInt(document.getElementById(‘t2’).value);
v1.style.WebkitTransform= “rotateY(” + rot + “deg)”;
v1.style.MozTransform= “rotateY(” + rot + “deg)”;
v1.style.msTransform= “rotateY(” + rot + “deg)”;
v1.style.transform= “rotateY(” + rot + “deg)”;
v2.style.WebkitTransform= “rotateY(” + rot2 + “deg)”;
v2.style.MozTransform= “rotateY(” + rot2 + “deg)”;
v2.style.msTransform= “rotateY(” + rot2 + “deg)”;
v2.style.transform= “rotateY(” + rot2 + “deg)”;
document.getElementById(“control”).style.visibility = “hidden”;
document.getElementById(“t1a”).style.visibility = “hidden”;
width = img1.clientWidth;
height = img1.clientHeight;

Filters:
var r = document.getElementsByName(“r1”);
for (var i=0; i < r.length ;i++) {
if (r[i].checked){
clrval = r[i].value;
if (clrval == “by”){
document.getElementById(“lr”).style.backgroundColor=”rgba(100,100,255,” + fltr + “)”;
document.getElementById(“lc”).style.backgroundColor=”rgba(255,255,100,” + fltr + “)”;
} else if (clrval == “yb”) {
document.getElementById(“lr”).style.backgroundColor=”rgba(255,255,100,” + fltr + “)”;
document.getElementById(“lc”).style.backgroundColor=”rgba(100,100,255,” + fltr + “)”;
} else if (clrval == “rc”) {
document.getElementById(“lr”).style.backgroundColor=”rgba(255,100,100,” + fltr + “)”;
document.getElementById(“lc”).style.backgroundColor=”rgba(100,255,255,” + fltr + “)”;
alert(document.getElementById(“lr”).style.backgroundColor);
} else if (clrval == “cr”) {
document.getElementById(“lr”).style.backgroundColor=”rgba(100,255,255,” + fltr + “)”;
document.getElementById(“lc”).style.backgroundColor=”rgba(255,100,100,” + fltr + “)”;
}

}
}

Video:
if (fl.indexOf(“webm”) > -1 ) {
fl = ‘<video id=”img1″ autoplay = “true”><source src=”‘ + vid + ‘”></video>’;
fl2 = ‘<video id=”img2″ autoplay = “true”><source src=”‘ + vid + ‘” ></video>’;
}
if (fl.indexOf(“mp4″) > -1 ) {
fl = ‘<video id=”img1” width = “800” autoplay = “true”><source src=”‘ + vid + ‘” type=”video/mp4″></video>’;
fl2 = ‘<video id=”img2″ width = “800”  autoplay = “true”><source src=”‘ + vid + ‘” type=”video/mp4″></video>’;
}

Slides:
function showSlides() {
sld = true;
inter = parseInt(document.getElementById(“t4”).value)*1000;
s = setInterval(“changeImage(‘y’)”, inter);
}

function changeImage(val) {
if (sld || val == “n”) {
if (val == “n” && sld) clearInterval(s);
a = document.getElementById(“ta1”).value.indexOf(“display”, a + 1) + 9;
b = document.getElementById(“ta1”).value.indexOf(“‘”, a + 1);
fl = document.getElementById(“ta1″).value.substr(a, b – a);
if (a == 37) fl3 = fl
if (fl == ” id=”) {
fl = fl3;
fl1 = fl;
a = 37;
}
fl1 = fl;
display(fl1);
}
}

File Selection:
function multiFileSelect(evt) {
files = evt.target.files;
fld = document.getElementById(“s1”).value;
for (var i = 0, f; f = files[i]; i++) {
cnt ++;
if (cnt == 1) content = “<tr>”;
if (f.name.indexOf(“jpg”) > -1 || f.name.indexOf(“gif”) > -1 || f.name.indexOf(“png”) > -1 || f.name.indexOf(“webm”) > -1 || f.name.indexOf(“mp4”) > -1)  {
j++;
table2.push(“<td id=’td” + cnt.toString() + “‘ onclick=\”display(‘” + fld + f.name + “‘);\”><img src='”,fld, f.name, “‘ id=’i1’ /></td>” );
if (j % 5 == 0) table2.push(“</tr><tr>”);
fil = fld + f.name;
}
}
}
document.getElementById(‘files’).addEventListener(‘change’, multiFileSelect, false);

function create() {
if (document.getElementById(“s2”).value != “Choose Set”) {
if (document.getElementById(“s2”).value == “thumb1″) content = thumb1;
} else {
content += table2.join(”) + “</tr>”;
}
document.getElementById(“t1a”).innerHTML = content;
content = content.replace(/”/g,’\\”‘);
document.getElementById(“ta1”).value = ‘”‘ + content + ‘”‘;
}

There are four color combinations; yellow-blue, blue-yellow, red-cyan and cyan-red, chosen by a radio button.

Although all parameters can be varied, I would suggest sticking with the defaults. In particular, use the default color filter, which I think gives the best effect. It means using glasses with blue on the left and yellow on the right.

The text area at the right can be copied and pasted into a js file to make a playlist.

Here is how the interface appears:

Click image for larger view

3d11

Here is how it appears with some thumbnails:

Click image for larger view

3d11-thumbnails

An HTML Lightning Simulator

This simple app generates lightning bolts of random shapes and at random locations on the screen, with simultaneous  thunder.

Here is the code:

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head profile='http://gmpg.org/xfn/11'>
<title>Lightning</title>
<style>
body {margin-left:0;margin-right:0;font:normal normal normal 15pt Arial; background: #222228}a{ text-decoration: }:link { color: rgb(0, 0, 255) }:visited {color :rgb(100, 0,100) }:hover { }:active { } #svg1{position: absolute; width: 1200px; height: 100%; left: 50%; margin-left: -600px }
#thunder{position: relative}
</style>
</head>
<body onload='drawLines();'>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="svg1" >

</svg>
var oldx=500; var oldy=2; var newx; var newy; var si; function drawLines() { si = setInterval("drawBolts()", 2000); } function drawBolts() { document.getElementById("svg1").innerHTML=""; document.getElementById("thunder").innerHTML = '   '; var sign2 = Math.random(); for (var i=1;i= .5) { if (sign >= .5) { newx=oldx + 30*Math.random(); } else { newx=oldx - 2*Math.random(); } } if (sign2 = .5) { newx=oldx - 30*Math.random(); } else { newx=oldx + 2*Math.random(); } } newy = oldy + 15 + 10*Math.random(); document.getElementById("svg1").innerHTML+=''; oldx=newx; oldy=newy; } var x = Math.random(); if (x >= .5) { oldx = 600 + 200*x; } else { oldx = 600 - 500*x; } oldy = 2; } </body></html>

Each bolt consists of joined segments, in which several random generators are used to set the bolt  direction, length and location.

sign and sign2 combine to set the direction of each segment while newx and newy determine the length:
for (var i=1;i<=40;i++) {
var sign = Math.random();
if (sign2 >= .5) {
if (sign >= .5) {
newx=oldx + 30*Math.random();
} else {
newx=oldx – 2*Math.random();
}
}

if (sign2 < .5) {
if (sign >= .5) {
newx=oldx – 30*Math.random();
} else {
newx=oldx + 2*Math.random();
}
}

newy = oldy + 15 + 10*Math.random();
document.getElementById(“svg1″).innerHTML+='<line x1=”‘ + oldx + ‘” y1=”‘ + oldy + ‘” x2=”‘ + newx + ‘” y2=”‘ + newy + ‘” stroke=”#DDDDFF” stroke-width=”3″ />’;
oldx=newx;
oldy=newy;
}

setting oldx and oldy to the new values starts each segment at the end of the previous one.

The random variable x determines the location of each bolt:
var x = Math.random();

if (x >= .5) {
oldx = 600 + 200*x;
} else {
oldx = 600 – 500*x;
}

There is accompanying thunder for each bolt:
document.getElementById(“thunder”).innerHTML = ‘<audio  autoplay> <source src=”thunder_strike_clippedc..ogg”/>  </audio>’;
Each bolt is started by means of a timer:
function drawLines() {
si = setInterval(“drawBolts()”, 2000);
}
Here is a video(minus sound) of how it looks:

lightning

HTML Shooting Gallery Game

This game is fairly simple.

One of five difficulty levels is selected by clicking a radio button, which starts a timer. After the time chosen, a target with concentric circles moves across the screen a random distance.

Keys are then used to rotate a rifle to point at the target. The k or z key will rotate the rifle counterclockwise while l or x will rotate it clockwise.

When the rifle is aimed at the target, clicking the spacebar will shoot it.

If the target is hit, points will be alloted according to the proximity to the center. This value will be multiplied by ten times the degree of difficulty and a score is appended.

After ten moves of the target location, the game is completed and the total score is displayed; clicking a level button will then start a new game.

At level 1, the target is in place for five seconds, making it easy to aim, but the number of points obtained for a hit is lower.

At level 5, the points are much higher but the target is in place only one second, calling for very rapid aiming and shooting. Other levels are between the two extremes.

I seem to score highest at the three or four level.

There is also a lock to prevent the rifle from firing until the target has moved; otherwise, setting the level at one and firing multiple times in the five seconds would raise the score to ridiculous values.

Here is a view of the screen when he rifle is fired:

Click image for larger view

shoot

Here is a view when the firing is complete and the score has been appended:

Click image for larger view

score

Here is a view at the game completion:

Click image for larger view

over

Here is the code:

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'&gt;
<html xmlns='http://www.w3.org/1999/xhtml'&gt;
<head profile='http://gmpg.org/xfn/11'&gt;
<title>Shooting Gallery</title>
<style>
body {margin-left:0;margin-right:0;font:normal normal normal 15pt Arial;}a{ text-decoration: }:link { color: rgb(0, 0, 255) }:visited {color :rgb(100, 0,100) }:hover { }:active { } #canvas{ position: absolute; left:375px} #svg2{position: absolute; width: 30px; height: 100px; top: 600px; left:485px;} .frame,#svg3{position: absolute; left: 0; top: 0; width: 1000px; height: 100%; border: 1px solid} table{position: absolute; top: 10px;left: 1020px; empty-cells: show} #l1{stroke: rgba(0,0,0,0)} #t1{position: relative; left: 1020px; width: 100px} #h1{position: absolute; left: 1020px; top: 200px; color: white;font:normal normal 900 18pt Arial } #h2{position: relative; left: 1020px}
</style>
</head>
<body onload=’makeCanvas();’>

<table><tr><td>Level</td><td><input type=”radio” id=”r1″ name=”r1″ value=”0″ checked />0</td><td><input type=”radio” id=”r1″ name=”r1″ value=”1″ onclick=’move();’ />1</td><td><input type=”radio” id=”r1″ name=”r1″ value=”2″ onclick=’move();’ />2</td><td><input type=”radio” id=”r1″ name=”r1″ value=”3″ onclick=’move();’ />3</td><td><input type=”radio” id=”r1″ name=”r1″ value=”4″ onclick=’move();’ />4</td><td><input type=”radio” id=”r1″ name=”r1″ value=”5″ onclick=’move();’ />5</td><td> </td></tr>
</table><br />
<h id=”h2″>Score</h> <input type=”text” id=”t1″ name=”t1″ value=”0″ />
<h id=”h1″>Game Over</h>

var si; var level; var lev = “0”; var cnt=”0″; var shots = 0; var lng = 525; var ang; var newx1 = 500; var r; var score =0; var context; var dif = 0; var pos; var shot = false;

document.onkeydown=rtate;
document.onkeyup=rset;

var canvas = document.getElementById(“canvas”);
function makeCanvas() {
context = canvas.getContext(‘2d’);
var Xcntr = canvas.width / 2;
var Ycntr = canvas.height / 2;
var radius = 125;
context.beginPath();
context.arc(Xcntr, Ycntr, radius, 0, 4 * Math.PI, false);
context.fillStyle = ‘red’;
context.fill();
radius = 98;
context.beginPath();
context.arc(Xcntr, Ycntr, radius, 0, 4 * Math.PI, false);
context.fillStyle = ‘blue’;
context.fill();
radius = 71;
context.beginPath();
context.arc(Xcntr, Ycntr, radius, 0, 4 * Math.PI, false);
context.fillStyle = ‘yellow’;
context.fill();
radius = 44;
context.beginPath();
context.arc(Xcntr, Ycntr, radius, 0, 4 * Math.PI, false);
context.fillStyle = ‘rgba(0,200,0,1)’;
context.fill();
radius = 17;
context.beginPath();
context.arc(Xcntr, Ycntr, radius, 0, 4 * Math.PI, false);
context.fillStyle = ‘orange’;
context.fill();
}

function rtate(e){
if(e.keyCode == 75 || e.keyCode == 90) if (cnt > -25)cnt –;
if(e.keyCode == 76 || e.keyCode == 88) if (cnt
</body></html>

Key event handlers are set up:
document.onkeydown=rtate;
document.onkeyup=rset;

The target is moved:
function move() {
document.getElementById(“h1″).style.backgroundColor=”white”;
document.getElementById(“t1”).value = “0”;
r =document.getElementsByName(“r1”);
for (var i=0; i < r.length ;i++) {
if (r[i].checked){
lev = r[i].value;

}
}
if (lev == “1”) {
level = 5000;
} else if (lev == 2) {
level = 4000;
} else if (lev == 3) {
level = 3000;
} else if (lev == 4) {
level = 2000;
} else if (lev == 5) {
level = 1000;
}
clearInterval(si);
si = setInterval(“move2()”, level);
}

function move2() {
document.getElementById(“h1″).style.backgroundColor=”white”;
pos = parseInt(750*Math.random());
document.getElementById(“canvas”).style.left = pos.toString() + “px”;
shot = true;
shots ++;
if (shots == 10) {
cnt = 0;
document.getElementById(“svg2”).style=’-moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg)’;
document.getElementById(“canvas”).style.left = “375px”;
shots = 0;
document.getElementById(“h1″).style.backgroundColor=”blue”;
alert(“Score = ” + document.getElementById(“t1”).value);
document.getElementById(“l1″).style.stroke=”rgba(0,0,0,0)”;
document.getElementById(“l1”).setAttributeNS(null, “x1”, 500);
lev = 0;
level = 0;
score = 0;
clearInterval(si);
r[0].checked = true;

}
}

This code gets the level from the radio buttons:
r =document.getElementsByName(“r1”);
for (var i=0; i < r.length ;i++) {
if (r[i].checked){
lev = r[i].value;

}
}

This sets the interval of the movement:
if (lev == “1”) {
level = 5000;
} else if (lev == 2) {
level = 4000;
} else if (lev == 3) {
level = 3000;
} else if (lev == 4) {
level = 2000;
} else if (lev == 5) {
level = 1000;
}
clearInterval(si);
si = setInterval(“move2()”, level);

This moves the target and allows the rifle to be fired:
pos = parseInt(750*Math.random());
document.getElementById(“canvas”).style.left = pos.toString() + “px”;
shot = true;

This code ends the game:
shots ++;
if (shots == 10) {
cnt = 0;
document.getElementById(“svg2”).style=’-moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg)’;
document.getElementById(“canvas”).style.left = “375px”;
shots = 0;
document.getElementById(“h1″).style.backgroundColor=”blue”;
alert(“Score = ” + document.getElementById(“t1”).value);
document.getElementById(“l1″).style.stroke=”rgba(0,0,0,0)”;
document.getElementById(“l1”).setAttributeNS(null, “x1”, 500);
lev = 0;
level = 0;
score = 0;
clearInterval(si);
r[0].checked = true;

}

This code rotates the rifle:
if(e.keyCode == 75 || e.keyCode == 90) if (cnt > -25)cnt –;
if(e.keyCode == 76 || e.keyCode == 88) if (cnt < 25)cnt ++;

if(e.keyCode == 75 || e.keyCode == 76 || e.keyCode == 88 || e.keyCode == 90) {
if (cnt == -1) document.getElementById(“svg2”).style=’-moz-transform: rotate(-2deg); -webkit-transform: rotate(-2deg); -ms-transform: rotate(-2deg); -o-transform: rotate(-2deg)’;
if (cnt == 1) document.getElementById(“svg2”).style=’-moz-transform: rotate(2deg); -webkit-transform: rotate(2deg); -ms-transform: rotate(2deg); -o-transform: rotate(2deg)’;

cnt can go from -25 to 25.

This code starts the firing:
if(e.keyCode == 32) {
if (shot) {
ang = 2 * cnt * (Math.PI/180);
newx1 = 500 + lng * Math.sin(ang) ;
document.getElementById(“l1″).style.stroke=”black”;
newx = newx1 – pos;
document.getElementById(“l1”).setAttributeNS(null, “x1”, newx1);
}
}

This code finishes the firing, appends the score and disables the rifle until the target has moved:
function rset(e) {
if(e.keyCode == 32) {
if (shot) {
document.getElementById(“l1″).style.stroke=”rgba(0,0,0,0)”;
pixel = context.getImageData(newx, 125, 1,1).data;
if (pixel[0] == 255 && pixel[1] == 0 && pixel[2] == 0) dif = 1;
if (pixel[0] == 0 && pixel[1] == 0 && pixel[2] == 255) dif = 2;
if (pixel[0] == 255 && pixel[1] == 255 && pixel[2] == 0) dif = 3;
if (pixel[0] == 0 && pixel[1] == 200 && pixel[2] == 0) dif = 4;
if (pixel[0] == 255 && pixel[1] == 165 && pixel[2] == 0) dif = 5;
if (pixel[0] == 0 && pixel[1] == 0 && pixel[2] == 0) dif = 0;
if (shots < 11) score += parseInt(lev) * dif * 10;
document.getElementById(“t1”).value = score.toString();
newx1 = 500;
document.getElementById(“svg2”).style=’-moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg)’;
document.getElementById(“l1”).setAttributeNS(null, “x1”, 500);
cnt=0;
shot = false;
}
}
}

It gets the color that has been hit and returns a value depending on the proximity to the center:
pixel = context.getImageData(newx, 125, 1,1).data;
if (pixel[0] == 255 && pixel[1] == 0 && pixel[2] == 0) dif = 1;

The score is appended and the rifle is reset to the initial position:
if (shots < 11) score += parseInt(lev) * dif * 10;
document.getElementById(“t1”).value = score.toString();
newx1 = 500;
document.getElementById(“svg2”).style=’-moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg)’;
document.getElementById(“l1”).setAttributeNS(null, “x1″, 500);

This code creates the target, which is a canvas element:
function makeCanvas() {
context = canvas.getContext(‘2d’);
var Xcntr = canvas.width / 2;
var Ycntr = canvas.height / 2;
var radius = 125;
context.beginPath();
context.arc(Xcntr, Ycntr, radius, 0, 4 * Math.PI, false);
context.fillStyle = ‘red’;
context.fill();
radius = 98;
context.beginPath();
context.arc(Xcntr, Ycntr, radius, 0, 4 * Math.PI, false);
context.fillStyle = ‘blue’;
context.fill();
radius = 71;
context.beginPath();
context.arc(Xcntr, Ycntr, radius, 0, 4 * Math.PI, false);
context.fillStyle = ‘yellow’;
context.fill();
radius = 44;
context.beginPath();
context.arc(Xcntr, Ycntr, radius, 0, 4 * Math.PI, false);
context.fillStyle = ‘rgba(0,200,0,1)’;
context.fill();
radius = 17;
context.beginPath();
context.arc(Xcntr, Ycntr, radius, 0, 4 * Math.PI, false);
context.fillStyle = ‘orange’;
context.fill();
}

The rifle and bullet path are svg elements:
bullet path
<svg xmlns=”http://www.w3.org/2000/svg&#8221; version=”1.1″ id=”svg3″ width=”” height=””>
<line id=”l1″ x1=”500″ y1=”125″ x2=”500″ y2=”650″ style=” stroke-width:1″ />
</svg>
rifle
<svg xmlns=”http://www.w3.org/2000/svg&#8221; version=”1.1″ id=”svg2″ width=”” height=””>
<rect x=”10″ y=”0″ width=”10″ height=”60″ style=”fill:black” />
<polygon points=”10,60 20,60 20,100 0,100″ style=”fill:brown” />
</svg>

Since this game uses key events it can only be used with computers that have physical keyboard. In the future I will come up with a version that can be used with touchscreens.

Computer as Composer II

This version has the following updates:

Choice of Major or Minor key
Choice of random color or color assigned to each note
Choice of note interval

Here is the new interface:

Click image for larger view

Compose4-interface

Here is the code:

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head profile='http://gmpg.org/xfn/11'>
<title>Compose</title>
<style>
body {margin-left:0;margin-right:0;font:normal normal normal 15pt Arial;}a{ text-decoration: }:link { color: rgb(0, 0, 255) }:visited {color :rgb(100, 0,100) }:hover { }:active { }
#l1{position: absolute; width: 100%; height: 100%}
#table1{position: relative}
td{padding: 10pt}
</style>
</head>
<body onload='respPrompt(); ctl();'>
Minor Assigned Color
var c1 = 0; var c2 = 0; var c3 = 0; var c3m = 0; var c4 = 0; var c5 = 0; var c6 = 0; var c7 = 0; var c6m = 0; var c7m = 0; var c8 = 0; var r = 0; var g = 0; var b = 0; var clr; var choice; var played = ""; var assign = false; var inter = 500; function ctl() { if(document.getElementById("interval").value != "interval in milliseconds") inter = document.getElementById("interval").value; if (document.getElementById("minor").checked) { choice = "minor"; } else { choice = "major"; } if (document.getElementById("assn").checked) { assign = true; } else { assign = false; } document.getElementById("minor").style.visibility = "hidden"; si = setInterval("playit()", inter); } function playit() { c1 = 8*Math.random(); c2 = 9*Math.random(); if (choice == "minor") { c3m = 10*Math.random(); } else { c3 = 10*Math.random(); } c4 = 10*Math.random(); c5 = 10*Math.random(); if (choice == "minor") { c6m = 10*Math.random(); } else { c6 = 8*Math.random(); } if (choice == "minor") { c7m = 10*Math.random(); } else { c7 = 8*Math.random(); } c8 = 7*Math.random(); r = parseInt(255*Math.random()); g = parseInt(255*Math.random()); b = parseInt(255*Math.random()); clr = "rgb(" + r + "," + g + "," + b + ")"; if((choice == "major" && c8 >= c1 && c8 > c7 && c8 > c6 && c8 > c5 && c8 > c4 & c8 > c3 && c8 > c2) || (choice == "minor" && c8 >= c1 && c8 > c7m && c8 > c6m && c8 > c5 && c8 > c4 && c8 > c3m && c8 > c2)) { if (played != "8") { if (assign) { document.getElementById("l1").style.backgroundColor= "#FF0000"; } else { document.getElementById("l1").style.backgroundColor= clr; } document.getElementById("l1").innerHTML = ' '; } played = "8"; } else if(choice == "major" && c7 >= c1 && c7 > c8 && c7 > c6 && c7 > c5 && c7 > c4 & c7 > c3 && c7 > c2) { if (played != "7") { if (assign) { document.getElementById("l1").style.backgroundColor= "#FF8800"; } else { document.getElementById("l1").style.backgroundColor= clr; } document.getElementById("l1").innerHTML = ' '; } played ="7"; } else if(choice == "minor" && c7m >= c1 && c7m > c8 && c7m > c6m && c7m > c5 && c7m > c4 & c7m > c3m && c7m > c2) { if (played != "7m") { if (assign) { document.getElementById("l1").style.backgroundColor= "#88FF00"; } else { document.getElementById("l1").style.backgroundColor= clr; } document.getElementById("l1").innerHTML = ' '; } played = "7m"; } else if(choice == "major" && c6 >= c1 && c6 > c8 && c6 > c7 && c6 > c5 && c6 > c4 & c6 > c3 && c6 > c2) { if (played != "6") { if (assign) { document.getElementById("l1").style.backgroundColor= "#88FF00"; } else { document.getElementById("l1").style.backgroundColor= clr; } document.getElementById("l1").innerHTML = ' '; } played = "6"; } else if(choice == "minor" && c6m >= c1 && c6m > c8 && c6m > c7m && c6m > c5 && c6m > c4 & c6m > c3m && c6m > c2) { if (played != "6m") { if (assign) { document.getElementById("l1").style.backgroundColor= "#00FF88"; } else { document.getElementById("l1").style.backgroundColor= clr; } document.getElementById("l1").innerHTML = ' '; } played = "6m"; } else if((choice == "major" && c5 >= c1 && c5 > c8 && c5 > c7 && c5 > c6 && c5 > c4 & c5 > c3 && c5 > c2) || (choice == "minor" && c5 >= c1 && c5 > c8 && c5 > c7m && c5 > c6m && c5 > c4 && c5 > c3m && c5 > c2)) { if (played != "5") { if (assign) { document.getElementById("l1").style.backgroundColor= "#00FF88"; } else { document.getElementById("l1").style.backgroundColor= clr; } document.getElementById("l1").innerHTML = ' '; } played = "5"; } else if((choice == "major" && c4 >= c1 && c4 > c8 && c4 > c7 && c4 > c6 && c4 > c5 && c4 > c3 && c4 > c2) || (choice == "minor" && c4 >= c1 && c4 > c8 && c4 > c7m && c4 > c6m && c4 && c4 > c3m && c4 > c2)) { if (played != "4") { if (assign) { document.getElementById("l1").style.backgroundColor= "#0000FF"; } else { document.getElementById("l1").style.backgroundColor= clr; } document.getElementById("l1").innerHTML = ' '; } played = "4"; } else if(choice == "major" && c3 >= c1 && c3 > c8 && c3 > c7 && c3 > c6 && c3 > c5 && c3 > c4 && c3 > c2) { if (played != "3") { if (assign) { document.getElementById("l1").style.backgroundColor= "#8800FF"; } else { document.getElementById("l1").style.backgroundColor= clr; } document.getElementById("l1").innerHTML = ' '; } played = "3"; } else if(choice == "minor" && c3m >= c1 && c3m > c8 && c3m > c7m && c3m > c6m && c3m > c5 & c3m > c4 && c3m > c2) { if (played != "3m") { if (assign) { document.getElementById("l1").style.backgroundColor= "#0088FF"; } else { document.getElementById("l1").style.backgroundColor= clr; } document.getElementById("l1").innerHTML = ' '; } played = "3m"; } else if ((choice == "major" && c2 >= c1 && c2 > c8 && c2 > c7 && c2 > c6 && c2 > c5 && c2 > c4 & c2 > c3 ) || (choice == "minor" && c2 >= c1 && c2 > c8 && c2 > c7m && c2 > c6m && c2 > c5 && c2 > c4 && c2 > c3m )) { if (played != "2") { if (assign) { document.getElementById("l1").style.backgroundColor= "#FFFF00"; } else { document.getElementById("l1").style.backgroundColor= clr; } document.getElementById("l1").innerHTML = ' '; } played = "2"; } else { if (assign) { document.getElementById("l1").style.backgroundColor= "#FF00FF"; } else { document.getElementById("l1").style.backgroundColor= clr; } document.getElementById("l1").innerHTML = ' '; } } </body></html>

If the Minor checkbox is checked, the computer plays minor notes. Else it plays major notes.

If the Assigned checkbox is checked, the computer displays a specific color. Else it picks a color at random.

else if(choice == “major” && c7 >= c1 && c7 > c8 && c7 > c6 && c7 > c5 && c7 > c4 & c7 > c3 && c7 > c2) {
if (played != “7”) {
if (assign) {
document.getElementById(“l1”).style.backgroundColor= “#FF8800”;
} else {
document.getElementById(“l1”).style.backgroundColor= clr;
}
document.getElementById(“l1″).innerHTML = ‘<audio autoplay> <source src=”tdw14.mp3″ /> </audio>’;
}
played =”7”;
} else if(choice == “minor” && c7m >= c1 && c7m > c8 && c7m > c6m && c7m > c5 && c7m > c4 & c7m > c3m && c7m > c2) {
if (played != “7m”) {
if (assign) {
document.getElementById(“l1”).style.backgroundColor= “#88FF00”;
} else {
document.getElementById(“l1”).style.backgroundColor= clr;
}
document.getElementById(“l1″).innerHTML = ‘<audio autoplay> <source src=”tdb10.mp3” /> </audio>’;
}
played = “7m”;

The interval is set with a variable determined by the text box entry, rather than a fixed number:
if(document.getElementById(“interval”).value != “interval in milliseconds”) inter = document.getElementById(“interval”).value;
si = setInterval(“playit()”, inter);