A SVG Star Generator

February 28, 2022 dynabar Leave a comment

I had peviously posted a method for generating regular polygons. This modifies that to produce star shaped objects.
Here are four examples: a five sided wireframe with no fill, a wireframe with fill, a six sided star with no stroke and a rwn sided sta with no stroke:

StarGen

This 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>HTML Editor</title>
<style>
body {margin-left:0;margin-right:0;font:normal normal normal 15px Arial;}
a{ text-decoration: }:link { color: rgb(0, 0, 255) }:visited {color :rgb(100, 0,100) }:hover { }:active { }
svg{position: absolute; width: 100%; height: 85%; left: 0; top: 50px; border: 1px solid black}
input{width: 100px}
textarea{position: absolute; left: 800px; top: 50px; width: 500px; height: 85%}
</style>

</head>
<body>
<input type=”text” id=”t1″ style = “top: 0″ name=”t1″ value=”sides” onclick=’document.getElementById(“t1”).value = “”;’ /> <input type=”text” id=”t2″ style = “top: 0″ name=”t2″ value=”size” onclick=’document.getElementById(“t2”).value = “”;’ /> <input type=’color’ id=’color1′ value= simple color /> <input type=”text” id=”t4″ style = “top: 0″ name=”t4″ value=”none” onclick=’document.getElementById(“t4”).value = “”;’ /> <input type=”text” id=”t3″ style = “top: 0″ name=”t3″ value=”stroke size” onclick=’document.getElementById(“t3”).value = “”;’ /> <input type=’color’ id=’color2′ value= simple color /> <textarea id=”ta”></textarea>

var IE = document.all?true:false;

document.onclick = getMouse2;

function poly() {
px0 = posX + 10;
py0 = posY – 60;
sids = parseInt(document.getElementById(“t1”).value);
pts = “”;
l = parseInt(document.getElementById(“t2”).value);
if (document.getElementById(“t4”).value != “none”) {
var colr = document.getElementById(“color1”).value;
} else {
colr = “none”;
}
var strokecolor = document.getElementById(“color2”).value;
sw = parseInt(document.getElementById(“t3”).value);
ang = parseInt(180/sids);

if (sids % 2 == 1) {
for (var j = 1;j <=sids; j ++) {
var dx = px0 + l * (Math.sin( (j * 720/sids + ang) * (Math.PI/180)));
var dy = py0 + l * (Math.cos( (j * 720/sids + ang) * (Math.PI/180)));
if (j > 0) {
px[j] =parseInt(dx);
py[j] = parseInt(dy);
}
pts = pts + px[j] + “,” + py[j] + ” ” ;
}
document.getElementById(“canvas”).innerHTML +='<polygon points=”‘ + pts + ‘” style=”fill: ‘ + colr + ‘; stroke:’ + strokecolor + ‘; stroke-width:’ + sw + ‘” />\n\n’ ;
document.getElementById(“ta”).value = document.getElementById(“canvas”).innerHTML;
} else {
pts = “”;
ang = 360/sids;
for (var j = 1;j <=sids/2; j ++) {
var dx = px0 + l * (Math.sin( (j * 720/sids + ang) * (Math.PI/180)));
var dy = py0 + l * (Math.cos( (j * 720/sids + ang) * (Math.PI/180)));
if (j > 0) {
px[j] =parseInt(dx);
py[j] = parseInt(dy);
}
pts = pts + px[j] + “,” + py[j] + ” ” ;
}
document.getElementById(“canvas”).innerHTML +='<polygon points=”‘ + pts + ‘” style=”fill: ‘ + colr + ‘; stroke:’ + strokecolor + ‘; stroke-width:’ + sw + ‘” />\n’;
pts = “”;
ang += 360/sids;
for (var j = 1;j <=sids/2; j ++) {
var dx = px0 + l * (Math.sin( (j * 720/sids + ang) * (Math.PI/180)));
var dy = py0 + l * (Math.cos( (j * 720/sids + ang) * (Math.PI/180)));
if (j > 0) {
px[j] =parseInt(dx);
py[j] = parseInt(dy);
}
pts = pts + px[j] + “,” + py[j] + ” ” ;
}
document.getElementById(“canvas”).innerHTML +='<polygon points=”‘ + pts + ‘” style=”fill: ‘ + colr + ‘; stroke:’ + strokecolor + ‘; stroke-width:’ + sw + ‘” />\n\n’;
document.getElementById(“ta”).value = document.getElementById(“canvas”).innerHTML;
}

}
</script>

The function poly() has been modified to draw the stars.
After setting up the values, the drawing begins.
For the polygon generator each point is generated by rotating 360 / the number of sides, to connect successive points.
For stars a different procedure must be used.
For stars with an odd number of points, every second point is connected. So for example, for five points, the order is 1,3,5,7,9. Seven is the same as two and nine as four:
if (sids % 2 == 1) {
for (var j = 1;j <=sids; j ++) {
var dx = px0 + l * (Math.sin( (j * 720/sids + ang) * (Math.PI/180)));
var dy = py0 + l * (Math.cos( (j * 720/sids + ang) * (Math.PI/180)));
if (j > 0) {
px[j] =parseInt(dx);
py[j] = parseInt(dy);
}
pts = pts + px[j] + “,” + py[j] + ” ” ;
}

This will not work for even numbers as each cycle would be a repeat. There for a different procudure is used:
else {
pts = “”;
ang = 360/sids;
for (var j = 1;j <=sids/2; j ++) {
var dx = px0 + l * (Math.sin( (j * 720/sids + ang) * (Math.PI/180)));
var dy = py0 + l * (Math.cos( (j * 720/sids + ang) * (Math.PI/180)));
if (j > 0) {
px[j] =parseInt(dx);
py[j] = parseInt(dy);
}
pts = pts + px[j] + “,” + py[j] + ” ” ;
}
document.getElementById(“canvas”).innerHTML +='<polygon points=”‘ + pts + ‘” style=”fill: ‘ + colr + ‘; stroke:’ + strokecolor + ‘; stroke-width:’ + sw + ‘” />\n’;
pts = “”;
ang += 360/sids;
for (var j = 1;j <=sids/2; j ++) {
var dx = px0 + l * (Math.sin( (j * 720/sids + ang) * (Math.PI/180)));
var dy = py0 + l * (Math.cos( (j * 720/sids + ang) * (Math.PI/180)));
if (j > 0) {
px[j] =parseInt(dx);
py[j] = parseInt(dy);
}
pts = pts + px[j] + “,” + py[j] + ” ” ;
}
document.getElementById(“canvas”).innerHTML +='<polygon points=”‘ + pts + ‘” style=”fill: ‘ + colr + ‘; stroke:’ + strokecolor + ‘; stroke-width:’ + sw + ‘” />\n\n’;
document.getElementById(“ta”).value = document.getElementById(“canvas”).innerHTML;
}

The same rotation is used for half the number of points:
for (var j = 1;j <=sids/2; j ++) {
var dx = px0 + l * (Math.sin( (j * 720/sids + ang) * (Math.PI/180)));
var dy = py0 + l * (Math.cos( (j * 720/sids + ang) * (Math.PI/180)));
if (j > 0) {
px[j] =parseInt(dx);
py[j] = parseInt(dy);
}
pts = pts + px[j] + “,” + py[j] + ” ” ;
}
document.getElementById(“canvas”).innerHTML +='<polygon points=”‘ + pts + ‘” style=”fill: ‘ + colr + ‘; stroke:’ + strokecolor + ‘; stroke-width:’ + sw + ‘” />\n’;

the angle is rotated one point:
ang += 360/sids;

and the rotation is repeated:for (var j = 1;j <=sids/2; j ++) {
var dx = px0 + l * (Math.sin( (j * 720/sids + ang) * (Math.PI/180)));
var dy = py0 + l * (Math.cos( (j * 720/sids + ang) * (Math.PI/180)));
if (j > 0) {
px[j] =parseInt(dx);
py[j] = parseInt(dy);
}
pts = pts + px[j] + “,” + py[j] + ” ” ;
}
document.getElementById(“canvas”).innerHTML +='<polygon points=”‘ + pts + ‘” style=”fill: ‘ + colr + ‘; stroke:’ + strokecolor + ‘; stroke-width:’ + sw + ‘” />\n\n’;

The code is listed in a textarea
document.getElementById(“ta”).value = document.getElementById(“canvas”).innerHTML;

Code for Online Quizzes

February 21, 2022 dynabar Leave a comment

I have included two ways to write a quiz, one in which the answers are entered and one in which they are chosen from a list. Other than that difference they are basically the same.
Here is how the first looks:

DQuizText1

and the second:

DQuizText2

Since this is only to demonstrate the coding the actual questions and answers are either silly, trivial or both.

This is the code for the first:

</script>
</body></html>

and the second:

document.getElementById(“t1”).placeholder = ques[0];
for (var i = 0; i < opt[0].length; i ++) {
document.getElementById(“s1”).innerHTML += ‘<option>’ + opt[0][i] + ‘</option>’;
}
document.getElementById(“t1”).focus();

</script>
</body></html>

Everything is set up as arrays. For instance in the second there are:
var ques = [“What is 2 + 2?”, “What is 3 + 3”, “How long is a ten foot pole?”];
var wans = [“The correct answer is 4”, “The correct answer is 6”, “The correct answer is ten feet”];
var rans = [“4″,”6″,”ten feet”]; var tot = 0; var rtans = “”;
var opt = [[“Choose Answer”,3,4,5],[“Choose Answer”,5,6,7],[“Choose Answer”,”one foot”,”five feet”,”ten feet”]];

where ques are the questions, wans are the corrections for wrong answers, rans are the correct answers and opt are the options to be applied to the select element for each question.

The function nq() inserts the new questions and answers and also concludes the quiz:
function nq() {
if (cnt < wans.length – 1) {
cnt ++;
document.getElementById(“t1”).value = “”;
document.getElementById(“t1”).placeholder = ques[cnt];
document.getElementById(“s1”).innerHTML = “”;
for (var i = 0; i < opt[0].length; i ++) {
document.getElementById(“s1”).innerHTML += ‘<option>’ + opt[cnt][i] + ‘</option>’;
}
} else {
document.getElementById(“t1”).placeholder = “”;
document.getElementById(“t1”).value = “Your final score is ” + tot;
}
}
A count is increased up to one less than the length of an array and a new placeholder is inserted with a new question and new options are added to the select element.
When all the questions have been asked the quiz is totalled.

The function chk() checks the answers and calls for the next question:
function chk() {
if ( document.getElementById(“s1”).value != rans[cnt] ) {
document.getElementById(“t1”).value = wans[cnt];
document.getElementById(“t1”).focus();
} else {
tot += 10;
rtans = “Correct, your score is ” + tot;
document.getElementById(“t1”).value = rtans;
document.getElementById(“t1”).focus();
//document.getElementById(“s1”).value = “Choose Answer”;
}
setTimeout(“nq()”, 2000);
}

The chosen answer is compared with the array of correct answers and if wrong, supplied with the item from the array of the correct answer, or the total is incremented and displayed.
After this a setTimeout() is called by show the next question:
setTimeout(“nq()”, 2000);

The Final Board Game

February 14, 2022 dynabar Leave a comment

This is the final vesion of the board game. When you land on most squares, you collect a certain amount, with an option to buy it, in which case you collect from anyone else who lands on it. You have to pay if you land on someone else’s square. Some squares require anothe roll and depending on the roll’s value you gain or lose. Circling the board also gains. A player can sell a square to either the bank, at a discount, or to another player.

This is how the board looks.

BoardGame

This is the code:

<!DOCTYPE html>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head profile=”http://gmpg.org/xfn/11″>
<title>Board Game</title>
<style>
body {margin-left:0;margin-right:0;font:italic normal 600 16px Georgia; background: green}
a{ text-decoration: }:link { color: rgb(0, 0, 255) }:visited {color :rgb(100, 0,100) }:hover { }:active { }
#board{position: relative; top: -7px; width: 720px; height: 720px;}
#die1, #die2{position:relative; display: inline; top: 100px; height:100px;width:100px; }
#button1, #button2, #button3, #button4 {position: absolute; left: 20px; top: 20px; font:normal normal 700 24px Arial;}
#button2 {top: 60px}
#button3 {top: 100px}
#button4 {top: 140px}
#cp{position:absolute; left: 1150px; top: 20px; }
input{font:normal normal 700 22px Arial}
</style>
</head>
<body>

<input type=”button” id=”button1″ name=”button1″ value=”Roll” onclick = ‘rol();’ /> <input type=”button” id=”button2″ name=”button2″ value=”Buy” onclick = ‘buy();’ /> <input type=”button” id=”button3″ name=”button3″ value=”Sell” onclick = ‘sell();’ /> <input type=”button” id=”button4″ name=”button4″ value=”Request Buy” onclick = ‘rbuy();’ />
<center><div id=”board”><div id=”die1″><img src=”One.gif ” width=”100px ” height=”100px ” alt= ” ” /></div> <div id=”die2″><img src=”One.gif ” width=”100px ” height=”100px ” alt= ” ” /></div></div></center>
<div id=”cp”>
<select id=”s1″ name=”s1″ onchange=’setup();’>
<option ># Players</option><option >1</option><option >2</option><option >3</option><option >4</option><option >5</option>
</select><br /><br />
</div></center>
<center><div id= “inpt” style=”visibility: hidden; background: white; width: 500px; padding: 0 0 0 20px” onclick=’setNames2();’><input type=”text” id=”ntr” name=”ntr” style=”width:500px” value=”” placeholder = “What is your input” /></div></center>
<center><div id= “inpt2″ style=”visibility: hidden; background: white; width: 1200px; padding: 0 0 0 20px” onclick=’close2();’><input type=”text” id=”ntr2″ name=”ntr” style=”width:1200px” value=”” placeholder = “What is your input”/></div></center>

for (var i = 0; i <= 43; i ++) {
owner[i] = “none”;
if (i <= 11) document.getElementById(“board”).innerHTML += ‘<div id=”B’ + i + ‘” style=”position: absolute; left: ‘ + (60 * i) + ‘px; top: 0; width: 60px; height: 60px; text-align: center “></div>’;
if (i > 11 && i <= 22) document.getElementById(“board”).innerHTML += ‘<div id=”B’ + i + ‘” style=”position: absolute; left: 660px; top: ‘ + (60 * (i – 11)) + ‘px ; width: 60px; height: 60px; text-align: center “></div>’;
if (i > 22 && i <= 33) document.getElementById(“board”).innerHTML += ‘<div id=”B’ + i + ‘” style=”position: absolute; left: ‘ + (660 – (i – 22) * 60) + ‘px; top: 660px; width: 60px; height: 60px; text-align: center “></div>’;
if (i > 33 ) document.getElementById(“board”).innerHTML += ‘<div id=”B’ + i + ‘” style=”position: absolute; left: 0; top: ‘ + (660 – (i – 33) * 60) + ‘px; width: 60px; height: 60px; text-align: center “></div>’;
if (i % 3 == 0) {
document.getElementById(“B” + i).style.backgroundColor = “#ffcccc”;
if (i % 9 > 1) document.getElementById(“B” + i).innerHTML = ‘<span style = “background: white”><br />’ + (i + 1) + ‘ 12$</span>’;
}
if (i % 3 == 1) {
document.getElementById(“B” + i).style.backgroundColor = “#ccffcc”;
if (i % 9 != 1 && i != 43 || i == 1) document.getElementById(“B” + i).innerHTML = ‘<span style = “background: white”><br />’ + (i + 1) + ‘ 25$</span>’;
}
if (i % 3 == 2) {
document.getElementById(“B” + i).style.backgroundColor = “#ccccff”;
document.getElementById(“B” + i).innerHTML = ‘<span style = “background: white”><br />’ + (i + 1) + ‘ 5$</span>’;
}
if (i == 0 ) document.getElementById(“B” + i).style.backgroundColor = “#dddddd”;
if (i == 43) document.getElementById(“B” + i).style.backgroundColor = “#bbbbbb”;
}

document.getElementById(“board”).innerHTML += ‘<center><div id=”win” style = “position: relative; top: 250px; font:italic normal 800 48px Georgia; color: #ff0055; visibility: hidden”>The winner is Player 1</div></center>’;

document.getElementById(“board”).innerHTML += ‘<center><div id=”sl” style=”position: relative;top: 25px; padding: 10px; background: white; visibility: hidden; width: 250px; height: 300px”><input type=”button” id=”button5″ name=”button4″ value=”Done” onclick = \’document.getElementById(“sl”).style.visibility = “hidden”;\’ /><br />’;

document.getElementById(“sl”).innerHTML += ‘<select id = “sel” ><option>Click squares to sell</option></select>’;
document.getElementById(“sl”).innerHTML += ‘<select id = “sel2″ onclick=\’sell2();\’><option>Bank</option></select><br /><input type=”text” id=”sale” style=”width: 240px” placeholder=”transaction amount” /></div></center>’;

document.getElementById(“ntr”).onkeypress = setNames;
document.onkeyup = addNumber;

function addNumber(e) {
tm = parseInt(document.getElementById(“ntr”).value.substr(0,2));
if (e.keyCode == 17) document.getElementById(“ntr”).value += ” ” + owner[tm] ;
if (e.keyCode == 18) document.getElementById(“inpt”).style.visibility = “hidden”;
}

function buy() {
if (owner[sm[pno]] != “none”) alert(“This square is already owned!”);
if (tot[pno] < 0) {
alert(“You are not allowed to make a purchase”)
} else {
if (owner[sm[pno]] == “none”) {
if ((sm[pno] – 1) % 3 == 0 && (sm[pno] – 1) % 9 > 0) {
dn = true;
tot[pno] -= 25;
propVal[pno] +=25;
owner[sm[pno]] = nam[pno];
document.getElementById(“B” + (sm[pno] – 1)).style.backgroundColor = “#ff9999”;

setTimeout(‘timedAlert(“You purchased a $12 square for $25”,3000)’,1000);
}
if ( (sm[pno] – 1) % 3 == 1 && (sm[pno] – 1) % 9 > 1 || sm[pno] == 2 ) {
dn = true;
tot[pno] -= 50;
propVal[pno] +=50;
owner[sm[pno]] = nam[pno];
document.getElementById(“B” + (sm[pno] – 1)).style.backgroundColor = “#88ff88”;

setTimeout(‘timedAlert(“You purchased a $25 square for $50”,3000)’,1000);
}
if ((sm[pno] – 1) % 3 == 2) {
dn = true;
tot[pno] -= 12;
propVal[pno] +=12;
owner[sm[pno]] = nam[pno];
document.getElementById(“B” + (sm[pno] – 1)).style.backgroundColor = “#9999ff”;
setTimeout(‘timedAlert(“You purchased a $5 square for $12”,3000)’,1000);
}
}
document.getElementById(“t” + pno).value = nam[pno] + ‘ ‘ + tot[pno] + ‘$’;
no = pno + 1;
if (no == no2 + 1) no = 0;
document.getElementById(“tname”).value = nam[no] ;
dbl = false;
}
}

function rbuy() {
enterInput2(“Enter # as 2 digits(eg: 06)add space add bid & doubleclick”);
}

function sell2() {

if (sel2.value == “Bank”) {
if (document.getElementById(“sel”).value.indexOf(“$25”) > -1) {
tot[pno] += 22;
propVal[pno] -=25;
document.getElementById(“t” + pno).value = nam[pno] + ‘ ‘ + tot[pno] + ‘$’;
}

if (document.getElementById(“sel”).value.indexOf(“$12”) > -1) {
tot[pno] += 9;
propVal[pno] -=12;
document.getElementById(“t” + pno).value = nam[pno] + ‘ ‘ + tot[pno] + ‘$’;
}

if (document.getElementById(“sel”).value.indexOf(“$50”) > -1) {
tot[pno] += 45;
propVal[pno] -=50;
document.getElementById(“t” + pno).value = nam[pno] + ‘ ‘ + tot[pno] + ‘$’;
}
} else {
owner[pno] = “none”;
var trans = document.getElementById(“sel2”).selectedIndex – 1;
var t = parseInt(document.getElementById(“sel”).value.substr(0,2));
owner[t] = nam[trans];
tot[pno] += parseInt(document.getElementById(“sale”).value);
propVal[pno] -=parseInt(document.getElementById(“sale”).value);
document.getElementById(“t” + pno).value = nam[pno] + ‘ ‘ + tot[pno] + ‘$’;
tot[trans] -= parseInt(document.getElementById(“sale”).value);
document.getElementById(“t” + (trans + 2)).value = nam[trans] + ‘ ‘ + tot[trans] + ‘$’;
}

var ind = document.getElementById(“sel”).value;
if (ind.substr(0,2) % 3 == 1) {
t = ind.substr(0,2);
if (sel2.value == “Bank”) {
document.getElementById(“B” + (t – 1)).style.backgroundColor = “#ffcccc”;
owner[t] = “none”;
}
}

if (ind.substr(0,2) % 3 == 2) {
t = ind.substr(0,2);
if (sel2.value == “Bank”) {
document.getElementById(“B” + (t – 1)).style.backgroundColor = “#ccffcc”;
owner[t] = “none”;
}
}

if (ind.substr(0,2) % 3 == 0) {
t = ind.substr(0,2);
if (sel2.value == “Bank”) {
document.getElementById(“B” + (t – 1)).style.backgroundColor = “#ccccff”;
owner[t] = “none”;
}
}
bankrupt();
}

function setup() {
no2 = document.getElementById(“s1”).selectedIndex – 1;

enterInput(“What is your name?”);
}

function setup2() {
document.getElementById(“cp”).innerHTML += ‘<input type=”text” id=”tname” name=”tname” value=”‘ + nam[0] + ‘” /><br />’;
for (var i = 0; i <= no2; i ++) {
//document.getElementById(“cp”).innerHTML += ‘<input type=”text” id=”t’ + (i) + ‘” value= “‘ + nam[i] + ‘ ‘ + tot[i] + ‘$ “/><br /><br />’;
document.getElementById(“cp”).innerHTML += ‘<input type=”text” id=”t’ + (i) + ‘” style = “position: relative; top: 10px” value= “‘ + nam[i] + ‘ ‘ + tot[i] + ‘$ “/>’;

nt[i] = tp1[i];
document.getElementById(“board”).innerHTML += ‘<div id = “piece[‘ + i + ‘]” style = ” position: absolute; top: ‘ + tp1[i] + ‘px; left: ‘ + 1[i] + ‘px; width: 10px; height: 10px; background: #ff0055; border: 1px solid white”></div>’;
if (i == 1) document.getElementById(“piece[1]”).style.backgroundColor = “#0000cc”;
if (i == 2) document.getElementById(“piece[2]”).style.backgroundColor = “black”;
if (i == 3) document.getElementById(“piece[3]”).style.backgroundColor = “#00cc00”;
if (i == 4) document.getElementById(“piece[4]”).style.backgroundColor = “#cc00cc”;
}

document.getElementById(“board”).innerHTML += ‘<center><div id=”alrt” style=”position: relative; top: -130px; width: 250px; padding:5px; font:normal normal 700 20px Arial; border-radius: 10px; background: white; visibility:hidden”>This is a test</div></center>’;
}

function setNames2() {
cnt ++;
nam[cnt] = document.getElementById(“ntr”).value;
document.getElementById(“ntr”).value = “”;
document.getElementById(“ntr”).focus();
if ( cnt == no2) {
document.getElementById(“inpt”).style.visibility = “hidden”;
setup2();
}
}

function close2() {
document.getElementById(“inpt”).style.visibility = “hidden”;
roll2();
}

function enterInput(ph) {
document.getElementById(“ntr”).placeholder = ph;
document.getElementById(“inpt”).style.visibility = “visible”;
document.getElementById(“ntr”).focus();
}

function enterInput2(ph) {
document.getElementById(“ntr”).placeholder = ph;
document.getElementById(“inpt”).style.visibility = “visible”;
document.getElementById(“ntr”).focus();
}

function rol() {
document.getElementById(“die1″).innerHTML='<img src=”Three.gif ” width=”100px ” height=”100px ” alt= ” ” />’ ;
document.getElementById(“die2″).innerHTML='<img src=”Three.gif ” width=”100px ” height=”100px ” alt= ” ” />’ ;
if (! dbl) pno ++;
if (nam[pno] == “”) pno ++;
if (pno == no2 + 1) pno = 0;
document.getElementById(“tname”).value = nam[pno];

setTimeout(“rol2()”,1000);
}

function roll2() {

if (! dbl) {
if (sm[pno] + (ran + ran2) < 13 ) {
l1[pno] += 60 * (ran + ran2);
tp1[pno] = nt[pno];
}

sm[pno] += (ran + ran2);

if (sm[pno] > 12) sm2[pno] = sm[pno] – 12;
if (sm2[pno] > 11) sm3[pno] = sm2[pno] – 11;
if (sm3[pno] > 11 ) sm4[pno] = sm3[pno] – 11;

if (sm4[pno] > 11) {
sm[pno] = sm4[pno] – 11;
sm2[pno] = 0;
sm3[pno] = 0;
sm4[pno] = 0;
tp1[pno] = nt[pno];
l1[pno] = 25 + 60 * (sm[pno] – 1);
tot[pno] += 50;
timedAlert(“Congratulations!<br />You have won<br />50$<br />You Now Have<br />” + tot[pno] + “$”,2000);
//document.getElementById(“t” + pno).value = nam[pno] + ‘ ‘ + tot[pno] + ‘$’;
setTimeout(“roll3()”,5000);
}

if (sm2[pno] > 0) {
tp1[pno] = 60 * sm2[pno] + nt[pno];
if (sm2[pno] > 10) tp1[pno] = 660 + nt[pno];
l1[pno] = 685;
}

if (sm3[pno] > 0) {
l1[pno] = 685 – 60 * sm3[pno];
if (sm3[pno] > 10) l1[pno] = 25;
tp1[pno] = 661 + nt[pno];
}

if (sm4[pno] > 0) {
l1[pno] = 25;
tp1[pno] = 661 + nt[pno] – 60 * sm4[pno];
}

document.getElementById(“piece[” + pno + “]”).style.left = l1[pno] + “px”;
document.getElementById(“piece[” + pno + “]”).style.top = tp1[pno] + “px”;

if ( (sm[pno] – 1) % 9 == 0 && (sm[pno] – 1) > 1) {
dbl = true;
timedAlert(“Roll the dice. if you roll 2,4,6,9,or 11 you win $20</br /></br />roll 7 you win $10<br /></br /> 3,5,8,10 or 12 you lose $5”, 6000);
} else if ( (sm[pno] – 1) % 9 == 1 && (sm[pno] – 1) > 1) {
dbl = true;
timedAlert(“Roll the dice. if you roll 2,4,6,9,or 11 you win $40</br /></br />roll 7 you win $20<br /></br /> 3,5,8,10 or 12 you lose $10”,6000);
}

}
if (dbl) {
if ( (sm[pno] – 1) != 0) setTimeout(“roll3()”,6000);
} else {
if ( (sm[pno] – 1) != 0) setTimeout(“roll3()”,2000);
}

}

function roll3() {

if (! dbl) {
if ( sm[pno] > 1 && (sm[pno] – 1) % 3 == 0 && (sm[pno] – 1) % 9 != 0 && (owner[sm[pno]] == “none” || owner[sm[pno]] == nam[pno])) {
tot[pno] += 5;
setTimeout(‘timedAlert(“You made<br />5$<br />You Now Have<br />” + tot[pno] + “$”, 5000)’,2000);
} else if ((sm[pno] – 1) % 3 == 0 && owner[sm[pno]] != nam[pno]) {
for (var i = 0; i <= no2; i ++) {
if (nam[i] == owner[sm[pno]] ) {
tot[pno] -= 12;
tot[i] += 12;
timedAlert(“This square is owned by ” + nam[i] + “<br />Pay ” + nam[i] + ” $12<br />You Now Have<br />” + tot[pno] + “$”,4000);
document.getElementById(“t” + (i + 2)).value = nam[i] + ‘ ‘ + tot[i] + ‘$’;
}
}
}

if ( sm[pno] > 2 && (sm[pno] – 1) % 3 == 1 && (sm[pno] – 1) % 9 != 1 && owner[sm[pno]] == “none” || (owner[sm[pno]] == nam[pno] && (sm[pno] – 1) % 3 == 1)|| sm[pno] == 2) {
tot[pno] += 7;
setTimeout(‘timedAlert(“You made<br />7$<br />You Now Have<br />” + tot[pno] + “$”, 5000)’,2000);
} else if ((sm[pno] – 1) % 3 == 1 && owner[sm[pno]] != nam[pno] ) {
for (var i = 0; i <= no2; i ++) {
if (nam[i] == owner[sm[pno]] ) {
tot[pno] -= 25;
tot[i] += 25;
timedAlert(“This square is owned by ” + nam[i] + “<br />Pay ” + nam[i] + ” $25<br />You Now Have<br />” + tot[pno] + “$”,4000);
document.getElementById(“t” + (i + 2)).value = nam[i] + ‘ ‘ + tot[i] + ‘$’;
}
}
}

if ( (sm[pno] – 1) % 3 == 2 && (owner[sm[pno]] == “none” || owner[sm[pno]] == nam[pno])) {
tot[pno] += 3;
setTimeout(‘timedAlert(“You made<br />3$<br />You Now Have<br />” + tot[pno] + “$”, 5000)’,2000);
} else if ((sm[pno] – 1) % 3 == 2 && owner[sm[pno]] != nam[pno]) {
for (var i = 0; i <= no2; i ++) {
if (nam[i] == owner[sm[pno]] ) {
tot[pno] -= 5;
tot[i] += 5;
timedAlert(“This square is owned by ” + nam[i] + “<br />Pay ” + nam[i] + ” $5<br />You Now Have<br />” + tot[pno] + “$”,4000);
document.getElementById(“t” + (i + 2)).value = nam[i] + ‘ ‘ + tot[i] + ‘$’;
}
}
}
}

if (! dbl) {

document.getElementById(“t” + pno).value = nam[pno] + ‘ ‘ + tot[pno] + ‘$’;
no = pno + 1;
if (nam[no] == “”) no ++;
if (no == no2 + 1) no = 0;
document.getElementById(“tname”).value = nam[no] ;
}

if (dbl && (sm[pno] – 1) % 9 == 0) {
var rl = ran + ran2;
if (rl == 2 || rl == 4 || rl == 6 || rl ==9 || rl == 11) tot[pno] += 20;
if (rl == 7) tot[pno] += 10;
if (rl == 3 || rl == 5 || rl == 8 || rl ==10 || rl == 12) tot[pno] -= 5;
timedAlert(“You rolled ” + rl + ” You Now Have<br />” + tot[pno] + “$”, 2000);
document.getElementById(“t” + pno).value = nam[pno] + ‘ ‘ + tot[pno] + ‘$’;
no = pno + 1;
if (nam[no] == “”) no ++;
if (no == no2 + 1) no = 0;
document.getElementById(“tname”).value = nam[no] ;
//dbl = false;
}

if (dbl && (sm[pno] – 1) % 9 == 1) {
var rl = ran + ran2;
if (rl == 2 || rl == 4 || rl == 6 || rl ==9 || rl == 11) tot[pno] += 40;
if (rl == 7) tot[pno] += 20;
if (rl == 3 || rl == 5 || rl == 8 || rl ==10 || rl == 12) tot[pno] -= 10;
timedAlert(“You rolled ” + rl + ” You Now Have<br />” + tot[pno] + “$”, 2000);
document.getElementById(“t” + pno).value = nam[pno] + ‘ ‘ + tot[pno] + ‘$’;
no = pno + 1;
if (nam[no] == “”) no ++;
if (no == no2 + 1) no = 0;
document.getElementById(“tname”).value = nam[no] ;
dbl = false;
}

if (tot[pno] > 999) {
document.getElementById(“win”).innerHTML = ‘The winner is ‘ + nam[pno] ;
document.getElementById(“win”).style.visibility = “visible”;
}
dbl = false;
setTimeout(“bankrupt()”,5000);
}

function timedAlert(param,dur) {
document.getElementById(“alrt”).innerHTML = param;
document.getElementById(“alrt”).style.border = “1px solid black”;
document.getElementById(“alrt”).style.visibility = “visible”;
setTimeout(“clse()”, dur);
}

function clse() {
document.getElementById(“alrt”).style.visibility = “hidden”;
}

function bankrupt() {
if (tot[pno] < 0 && tot[pno] + propVal[pno] >= 0) timedAlert(“You must sell something”, 5000);

if (tot[pno] + propVal[pno] < 0) {
timedAlert(“Your total worth is less than zero. You are now bankrupt!”, 5000);
tot[pno] = 0;
propVal[pno] = 0;
document.getElementById(“piece[” + pno + “]”).remove();
document.getElementById(“t” + pno).value = “”;
for (var i = 0; i < 44; i ++) {
t = i;
if(owner[t] == nam[pno]) {
if (t % 3 == 1) document.getElementById(“B” + (t – 1)).style.backgroundColor = “#ffcccc”;
if (t % 3 == 2) document.getElementById(“B” + (t – 1)).style.backgroundColor = “#ccffcc”;
if (t % 3 == 0) document.getElementById(“B” + (t – 1)).style.backgroundColor = “#ccccff”;
owner[t] = “”;
}
}
document.getElementById(“tname”).value = nam[pno + 1];
if (pno + 1 > no2) document.getElementById(“tname”).value = nam[0];
nam[pno] = “”;
document.getElementById(“t” + pno).remove();
}
}

</script>
</body></html>

It is too long to discuss eveything so I will just mention a few new things.

This is the code fo buying a square:
function buy() {
if (owner[sm[pno]] != “none”) alert(“This square is already owned!”);
if (tot[pno] < 0) {
alert(“You are not allowed to make a purchase”)
} else {
if (owner[sm[pno]] == “none”) {
if ((sm[pno] – 1) % 3 == 0 && (sm[pno] – 1) % 9 > 0) {
dn = true;
tot[pno] -= 25;
propVal[pno] +=25;
owner[sm[pno]] = nam[pno];
document.getElementById(“B” + (sm[pno] – 1)).style.backgroundColor = “#ff9999”;

There ae two functions fo selling:

function sell2() {

if (document.getElementById(“sel”).value.indexOf(“$12”) > -1) {
tot[pno] += 9;
propVal[pno] -=12;
document.getElementById(“t” + pno).value = nam[pno] + ‘ ‘ + tot[pno] + ‘$’;
}

if (ind.substr(0,2) % 3 == 2) {
t = ind.substr(0,2);
if (sel2.value == “Bank”) {
document.getElementById(“B” + (t – 1)).style.backgroundColor = “#ccffcc”;
owner[t] = “none”;
}
}

They create a list of squares the seller owns and transfer the squares either back to the bank or to a new owner.

There is also a bankrupt function to determine a true bankruptcy or whether a same of owned squares could cover a negative cash level, in which case the player would be removed:
function bankrupt() {
if (tot[pno] < 0 && tot[pno] + propVal[pno] >= 0) timedAlert(“You must sell something”, 5000);

A HTML combination alarm clock and countdown timer

February 7, 2022 dynabar Leave a comment

With this app a phone can take the place of both an alarm clock and a countdown timer, with a bonus that the clock also gives the date.

Here is how it looks:

AlarmTimerText

Click to Try

This is the code:

<!DOCTYPE html>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head profile=”http://gmpg.org/xfn/11″>
<title>HTML Editor</title>
<style>
body {margin-left:0;margin-right:0;font:normal normal normal 15px Arial;}
a{ text-decoration: }:link { color: rgb(0, 0, 255) }:visited {color :rgb(100, 0,100) }:hover { }:active { }
#t1, #t2, #t3, #t4, #s1 {border:8px inset; font:normal normal 700 24px Times New Roman; text-align: center; width: 180px}
#b1{width: 160px;border: 5px outset; font:normal normal 700 24px Times New Roman}
#snd{position: absolute; top: 300px;width: 100%; text-align: center; visibility: hidden}
#frame{position: relative; width: 1200px; height: 300px; top:10px; border: 8px outset; background: #cccccc}
</style>
</head>
<body>
<center><div id = “frame”>
<input type=”text” id=”t1″value=”” /> <input type=”text” id=”t2″value=”” /> <input type=”text” id=”t3″ value=”” /> <input type=”text” id=”t4″ value=”0:00:00 AM” /> <select id=”s1″><option>Alarm Clock</option><option>Timer</option></select> &nbsp<input type=”button” id=”b1″value=”Restart” onclick=’location.reload();’/></center
</div>
<div id=”snd”></div>
<script>
var m; var h; var timeString = “”; var si; var secs; var mins;
si = setInterval(“clock()”, 1000);

function clock() {
d = new Date();
mins = d.getMinutes().toString();
if (mins.length == 1) mins = “0” + mins;
secs = d.getSeconds().toString();
if (secs.length == 1) secs = “0” + secs;

if (d.getHours() > 12) {
h = parseInt(d.getHours()) – 12;
timeString = “PM”;
} else {
h = parseInt(d.getHours()) ;
timeString = “AM”;
}

document.getElementById(“t1”).value = d.toDateString();
document.getElementById(“t2”).value = h.toString() + “:” + mins + “:” + secs + ” ” + timeString;
document.getElementById(“t3”).value = d.toDateString();

if (document.getElementById(“s1”).value == “Alarm Clock”) {
if (document.getElementById(“t3”).value == (document.getElementById(“t1”).value) && document.getElementById(“t4”).value == document.getElementById(“t2”).value) {
document.getElementById (“snd”).innerHTML='<audio autoplay = “autoplay” controls = “controls”> <source src=”win.mp3″ /> <source src=”win.ogg” /> </audio>’;
clearInterval(si);
}
}

if (document.getElementById(“s1”).value == “Timer”) {
var sc = parseInt(document.getElementById(“t4”).value.substr(5,2)) ;
var mn = parseInt(document.getElementById(“t4”).value.substr(2,2)) ;
var hr = parseInt(document.getElementById(“t4”).value.substr(0,1)) ;
sc –;
if (sc < 0) sc = 0;

if (parseInt(sc)== 0 && mn != 0){
mn –;
sc = 60;
}
if (mn < 0) mn = 0;

if (parseInt(mn)== 0 && hr != 0){
hr –;
mn = 60;
}
if (hr < 0) hr = 0;
if (sc == 0 && mn == 0 && hr == 0) {
document.getElementById (“snd”).innerHTML='<audio autoplay = “autoplay” controls = “controls”> <source src=”win.mp3″ /> <source src=”win.ogg” /> </audio>’;
clearInterval(si);
}
if (sc.toString().length == 1) sc = “0” + sc;
if (mn.toString().length == 1) mn = “0” + mn;
document.getElementById(“t4”).value = hr + “:” + mn + “:” + sc;
}

if (document.getElementById(“t4”).value == “0:00:00”) {
document.getElementById (“snd”).innerHTML='<audio autoplay = “autoplay” controls = “controls”> <source src=”win.mp3″ /> <source src=”win.ogg” /> </audio>’;
clearInterval(si);
}

}
</script>
</body></html>

To update the clock every second setInterval is used:
si = setInterval(“clock()”, 1000);

A date object is created and getMinutes() and getSeconds() are used. If they are single digit they are converted to the two digit format usually used:
d = new Date();
mins = d.getMinutes().toString();
if (mins.length == 1) mins = “0” + mins;
secs = d.getSeconds().toString();
if (secs.length == 1) secs = “0” + secs;

detHours() is converted to a 12 hour fotrmat:
if (d.getHours() > 12) {
h = parseInt(d.getHours()) – 12;
timeString = “PM”;
} else {
h = parseInt(d.getHours()) ;
timeString = “AM”;

The select element has two options. The first is the alarm clock:
if (document.getElementById(“s1”).value == “Alarm Clock”) {
if (document.getElementById(“t3”).value == (document.getElementById(“t1”).value) && document.getElementById(“t4”).value == document.getElementById(“t2”).value) {
document.getElementById (“snd”).innerHTML='<audio autoplay = “autoplay” controls = “controls”> <source src=”win.mp3″ /> <source src=”win.ogg” /> </audio>’;
clearInterval(si);
}
}

The desired day and time, including AM and PM, are set in text boxes 3 and 4.If the value in box 1 arrives at that in box 3 and that in 2 equals that in 4 an audio in a hidden
division is played. The interval must then be cleared to to prevent the alarm from restarting every second.

For the timer the following code is used:
if (document.getElementById(“s1”).value == “Timer”) {
var sc = parseInt(document.getElementById(“t4”).value.substr(5,2)) ;
var mn = parseInt(document.getElementById(“t4”).value.substr(2,2)) ;
var hr = parseInt(document.getElementById(“t4”).value.substr(0,1)) ;
sc –;
if (sc < 0) sc = 0;

if (parseInt(sc)== 0 && mn != 0){
mn –;
sc = 60;
}
if (mn < 0) mn = 0;

A time in the format is entered; eg 0:12:25. The presence of AM or PM does not matter since the value ius parsed:
var sc = parseInt(document.getElementById(“t4”).value.substr(5,2)) ;
var mn = parseInt(document.getElementById(“t4”).value.substr(2,2)) ;
var hr = parseInt(document.getElementById(“t4”).value.substr(0,1)) ;

Seconds are decreased until they reach 0. They are then set to 60 and the minute is decreased:
sc –;
if (sc < 0) sc = 0;

if (parseInt(sc)== 0 && mn != 0){
mn –;
sc = 60;
}

The same procedure is used for minutes and hours.

Once again seconds and minutes are increased to 2 digits.
The countdown is displayedL
document.getElementById(“t4”).value = hr + “:” + mn + “:” + sc;

If the seconds,minutes and hours all get to 0, the audio is played and the interval is cleared:
if (document.getElementById(“t4”).value == “0:00:00”) {
document.getElementById (“snd”).innerHTML='<audio autoplay = “autoplay” controls = “controls”> <source src=”win.mp3″ /> <source src=”win.ogg” /> </audio>’;
clearInterval(si);

	dynabar on View YouTube Videos in 3d
	Johnny_programmer on View YouTube Videos in 3d
	dynabar on A HTML BMI and Reverse BMI Cal…
	Matthew on A HTML BMI and Reverse BMI Cal…
	dynabar on A HTML BMI and Reverse BMI Cal…

	dynabar on View YouTube Videos in 3d
	Johnny_programmer on View YouTube Videos in 3d
	dynabar on A HTML BMI and Reverse BMI Cal…
	Matthew on A HTML BMI and Reverse BMI Cal…
	dynabar on A HTML BMI and Reverse BMI Cal…

Tips & Tricks

Monthly Archives: February 2022

A SVG Star Generator

Code for Online Quizzes

The Final Board Game

A HTML combination alarm clock and countdown timer

Web Page & Programming Tips