Getting a Javascript Variable From a PHP Variable and Why it is Sometimes Necessary

July 31, 2017 dynabar Leave a comment

In a PHP file the value of a text input can be set to a PHP variable
<input type=”text” id=”t1″ name=”t1″ value=<?php echo $txt; ?> />

However it is sometimes better to convert to a javascript variable before setting.
Look at this example:

<html><head>

<style>

body {margin-left:0;margin-right:0;font:normal normal normal 15px Arial; white-space: pre-wrap}

input{font-size: 18px}

</style>

</head>

<body>

<?php

$txt = ” this is a test”;

echo $txt . “<br /><br />”;

?>

 <input type=”text” id=”t1″ name=”t1″ value=<?php echo $txt; ?> />
 <input type=”text” id=”t2″ name=”t2″ value=”” />

<?php echo ‘ var txt = “‘ . $txt . ‘”; document.getElementById(“t2”).value = txt; ‘; ?>

</body></html>

Here is the output of that code:

Click Image for larger view

This is the variable:
$txt = ” this is a test”;

The first line is from the echo command:
echo $txt . “<br /><br />”;

The second line is the first text input containing the PHP variable:
<input type=”text” id=”t1″ name=”t1″ value=<?php echo $txt; ?> />

Notice that the display stops on encountering a space.

The third line is the second text input containing the javascript variable created from the PHP variable:
<?php echo ‘ var txt = “‘ . $txt . ‘”; document.getElementById(“t2”).value = txt; ‘; ?>

PHP Viewer Update

July 24, 2017 dynabar Leave a comment

Running php files requires a preprocessor. For many operating systems, but not all, an application can be installed that will simulate the preprocessor. However, if you have a php capable web site, this php app can enable you to test, save online or download php code.

I had previously posted on this subject. In that post I used the PHP Header(Location: to do the viewing. However, I found that to be less than optimal, so I have switched to the window.open function of javascript, generated by a PHP echo command.

here is the interface:

Click images for larger view

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>Enter Title Here</title>

<style type=’text/css’>

body {margin-left:0;margin-right:0;font:normal normal normal 12px Arial; white-space: pre-wrap}

a{ text-decoration: }

:link { color: rgb(0, 0, 255) }

:visited {color :rgb(100, 0,100) }

:hover { }

:active {}

#ta1{ font-size: 18px}

</style>

</head>

<body>

<?php

$data = ‘<html>

<span style=”font-size: 24px”>This is a test</span>

</html>’;

$name = “SaveName”;

if (isset($_POST[‘hidden’]) ) {

$name = $_POST[‘save’];

$newdata = $_POST[‘ta1’];

 if ($_POST[‘s2’] == “Preview”) {

$fw = fopen(“tmp.php”, ‘w’) or die(‘Could not open file!’);

$success =  fwrite($fw,$newdata) or die(‘Could not write to file’);

fclose($fw);

echo ‘ var win=window.open(“tmp.php”, “_blank”); win.focus();’;

}

 if ($_POST[‘s2’] == “Save” || $_POST[‘s2’] == “Download” ||  $_POST[‘s2’] == “Delete Online”) {

$fw = fopen($name, ‘w’) or die(‘Could not open file!’);

$success =  fwrite($fw,$newdata) or die(‘Could not write to file’);

fclose($fw);

if ($_POST[‘s2’] == “Download”) {

echo ‘<a href= “‘ . $name . ‘” download= “‘ . $name . ‘” >Download</a>’;

} else  if ($_POST[‘s2’] == “Delete Online”) {

unlink($name);

}

}

}

?>

<form action=”viewsave.php” method=”post” enctype=”multipart/form-data”>

<input type=”hidden” name=”hidden” value=”hidden” /><br />

<p><select id = “s2” name = “s2″  style=”font-size: 12pt”>

<option></option>

<option>Preview</option>

<option>Save</option>

<option>Download</option>

<option>Delete Online</option>

</select>  <input type=”text” id=”save” name=”save” value=<?php echo $name; ?> /> <input type=”submit” value=”Submit”  /></p>

<p><textarea id=”ta1″ name=”ta1″ rows=”24″ cols=”120″><?php echo $data; ?></textarea><p>

</form>

</body></html>

There are 4 options; Preview, Save, Download and Delete Online.

If Preview is chosen:
A variable $newdata is created from the value of the textarea
$newdata = $_POST[‘ta1’];
if ($_POST[‘s2’] == “Preview”) {
$fw = fopen(“tmp.php”, ‘w’) or die(‘Could not open file!’);
$success = fwrite($fw,$newdata) or die(‘Could not write to file’);
fclose($fw);
echo ‘ var win=window.open(“tmp.php”, “_blank”); win.focus();’;
}
A file tmp.php is created and populated with $newdata.
This file is then viewed:
echo ‘ var win=window.open(“tmp.php”, “_blank”); win.focus();’;

here is a typical file:

<html>
<head>
<style>
input{font-size: 18px}
</style>
</head>
<body>
<input type=”text” id=”t1″ name=”t1″ value=”text1″ /><br />
<input type=”button” id=”b1″ name=”b1″ value=”button1″ />
<?php
echo ‘ alert(“This is a Demo”);’;
?>
</body>
</html>

Here is how that looks:

and after dismissibg the alert:

If one of the other options is chosen a filename is created from the text input value:
$name = $_POST[‘save’];

and populated with the data:
if ($_POST[‘s2’] == “Save” || $_POST[‘s2’] == “Download” || $_POST[‘s2’] == “Delete Online”) {
$fw = fopen($name, ‘w’) or die(‘Could not open file!’);
$success = fwrite($fw,$newdata) or die(‘Could not write to file’);
fclose($fw);

If Download is chosen the file is downloaded:
if ($_POST[‘s2’] == “Download”) {
echo ‘<a href= “‘ . $name . ‘” download= “‘ . $name . ‘” >Download</a>’;

If after downloading you do not want to retain the file online, it can be deleted:
if ($_POST[‘s2’] == “Delete Online”) {
unlink($name);

HTML Spanish-English Irregular Verbs Quiz

July 17, 2017 dynabar Leave a comment

The previous post discussed an updated Spanish-English adverb quiz. This post is a quiz for irregular verbs.

The quiz has conjugations for both the present and preterite past of five verbs.

The present conjugation has the Present Participle while the past has the Past Participle.

Here is the interface:

Click Image for larger view

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>Spanish Quiz</title>

<style>

body {margin-left:0;margin-right:0;font:normal normal normal 20px Arial;  white-space: pre-wrap; background: #aaaaaa}á

a{ text-decoration: }:link { color: rgb(0, 0, 255) }:visited {color :rgb(100, 0,100) }:hover { }:active { }

#t1, #t2,select, input {position: relative; top 10px;font-size: 20px; }

div{position: relative; display: inline; padding: 10px; background: white}

#t1, #t2{width: 250px; border: 3px groove; padding: 0 30px 0 30px; background: white}

#aaccent, #eaccent, #iaccent, #oaccent, #uaccent, #tilde{width: 20px; border: 2px solid; border-radius: 20px}

#b2, #b3{background:#dddddd}

#b1{background: #aaaaaa}

#b4,#b5{background: #aaffaa; }

</style>

</head>

<body>

  <di id=”t1″ >Test Word</di> <div id=”t2″ contenteditable=”true” ondblclick=’document.getElementById(“t2”).innerHTML = “”;’>Translate</di> <di id=”aaccent” onclick=’document.getElementById(“t2”).innerHTML += “á”; ‘>á</di> <di id=”eaccent” onclick=’document.getElementById(“t2”).innerHTML += “é”;’>é</di> <di id=”iaccent” onclick=’document.getElementById(“t2”).innerHTML += “í”;’>í</di> <di id=”oaccent” onclick=’document.getElementById(“t2”).innerHTML += “ó”;’>ó</di> <di id=”uaccent” onclick=’document.getElementById(“t2”).innerHTML += “ú”;’>ú</di> <di id=”tilde” onclick=’document.getElementById(“t2”).innerHTML += “ñ”;’>ñ</di>
  <select id=”s1″><optgroup label=”Present”><option>Ser</option><option>ToBe</option><option>Estar</option><option>ToBe2</option><option>Tener</option><option>ToHave</option><option>Ir</option><option>ToGo</option><option>Oír</option><option>ToHear</option></optgroup><optgroup label=”Past”><option>Ser-past</option><option>ToBe-past</option><option>Estar-past</option><option>ToBe2-past</option><option>Tener-past</option><option>ToHave-past</option><option>Ir-past</option><option>ToGo-past</option><option>Oír-past</option><option>ToHear-past</option></optgroup></select> <input type=”button” id=”b1″ name=”b1″ value=”New Word” onclick= ‘newWord();’/> <input type=”button” id=”b2″ name=”b2″ value=”Check” onclick= ‘check();’/> <input type=”button” id=”b4″ name=”b4″ value=”Next” onclick= ‘newWord(1);’/>  <input type=”button” id=”b3″ name=”b3″ value=”New” onclick= ‘reset(0);’/>  <input type=”button” id=”b5″ name=”b5″ value=”Reset” onclick= ‘reset(1);’/>  <input type=”checkbox” id=”ch1″  name=”ch1″ value=”Skip Repeat on Error” />Skip Repeat on Error
var wrd; var no = -1; var crt = [false,false,false,false,false,false,false,false,false,false,false]; var cnt; var hit = false; var checkd = false; var no2 = 0; var wrong = false; var no3 = -1;

var ser = [“yo soy”,”tú eres”,”él es”,”ella es”,”usted es”,”nosotros somos”,”vosotros sois”,”ellos son”,”ellas son”,”ustedes son”,”siendo”] ;

var estar = [“yo estoy”,”tú estás”,”él est&#225″,”ella está”,”usted está”,”nosotros estamos”,”vosotros estáis”,”ellos están”,”ellas están”,”ustedes están”,”estando”] ;

var tener = [“yo tengo”,”tú tienes”,”él tiene”,”ella tiene”,”usted tiene”,”nosotros tenemos”,”vosotros tenéis”,”ellos tienen”,”ellas tienen”,”ustedes tienen”,”teniendo”] ;

var ir = [“yo voy”,”tú vas”,”él va”,”ella va”,”usted va”,”nosotros vamos”,”vosotros vais”,”ellos van”,”ellas van”,”ustedes van”,”yendo”] ;

var oír = [“yo oigo”,”tú oyes”,”él oye”,”ella oye”,”usted oye”,”nosotros oímos”,”vosotros oís”,”ellos oyen”,”ellas oyen”,”ustedes oyen”,”oyendo”] ;
var eng = [“I am”,”you are-s familiar”,”he is”,”she is”,”you are-s formal”,”we are”,”you are-sp”,”they are-male”,”they are-female”,”you are-p”,”present participle”];

var eng2 = [“I am”,”you are-s familiar”,”he is”,”she is”,”you are-s formal”,”we are”,”you are-sp”,”they are-male”,”they are-female”,”you are-p”,”present participle”];

var eng3 = [“I have”,”you have-s familiar”,”he has”,”she has”,”you have-s formal”,”we have”,”you have-sp”,”they have-male”,”they have-female”,”you have-p”,”present participle”];

var eng4 = [“I go”,”you go-s familiar”,”he goes”,”she goes”,”you go-s formal”,”we go”,”you go-sp”,”they go-male”,”they go-female”,”you go-p”,”present participle”];

var eng5 = [“I hear”,”you hear-s familiar”,”he hears”,”she hears”,”you hear-s formal”,”we hear”,”you hear-sp”,”they hear-male”,”they hear-female”,”you hear-p”,”present participle”];
var seri = [“yo fui”,”tú fuiste”,”él fue”,”ella fue”,”usted fue”,”nosotros fuimos”,”vosotros fuisteis”,”ellos fueron”,”ellas fueron”,”ustedes fueron”,”sido”] ;

var estari = [“yo estuve”,”tú estuviste”,”él estuvo”,”ella estuvo”,”usted estuvo”,”nosotros estuvimos”,”vosotros estuvisteis”,”ellos estuvieron”,”ellas estuvieron”,”ustedes estuvieron”,”estado”] ;

var teneri = [“yo tuve”,”tú tuviste”,”él tuvo”,”ella tuvo”,”usted tuvo”,”nosotros tuvimos”,”vosotros tuvisteis”,”ellos tuvieron”,”ellas tuvieron”,”ustedes tuvieron”,”tenido” ] ;

var iri = [“yo fui”,”tú fuiste”,”él fue”,”ella fue”,”usted fue”,”nosotros fuimos”,”vosotros fuisteis”,”ellos fueron”,”ellas fueron”,”ustedes fueron”,”ido”] ;

var oíri = [“yo oí”,”tú oíste”,”él oyó”,”ella oyó”,”usted oyó”,”nosotros oímos”,”vosotros oísteis”,”ellos oyeron”,”ellas oyeron”,”ustedes oyeron”,”oído”] ;
var engi = [“I was”,”you were-s familiar”,”he was”,”she was”,”you were-s formal”,”we were”,”you were-sp”,”they were-male”,”they were-female”,”you were-p”,”past participle”];

var engi2 = [“I was”,”you were-s familiar”,”he was”,”she was”,”you were-s formal”,”we were”,”you were-sp”,”they were-male”,”they were-female”,”you were-p”,”past participle”];

var engi3 = [“I had”,”you had-s familiar”,”he had”,”she had”,”you had-s formal”,”we had”,”you had-sp”,”they had-male”,”they had-female”,”you had-p”,”past participle”];

var engi4 = [“I went”,”you went-s familiar”,”he went”,”she went”,”you went-s formal”,”we went”,”you went-sp”,”they went-male”,”they went-female”,”you went-p”,”past participle”];

var engi5 = [“I heard”,”you heard-s familiar”,”he heard”,”she heard”,”you heard-s formal”,”we heard”,”you heard-sp”,”they heard-male”,”they heard-female”,”you heard-p”,”past participle”];

 var arr;  //var rt = false;

function newWord(param) {

if (param == 1) hit = false;

if ( ! hit) {
//if (rt) {

//document.getElementById(“t2”).innerHTML = “Translate”;

//rt = false;

//} 
if (wrong) no2 = no3;

if ( ! wrong) {

no2 = Math.floor(11 * Math.random () );

no3 = no2;

}

while (crt[no2] == true && no > 0 && ! wrong) {

no2 = Math.floor(11 * Math.random () );

no3 = no2;

}

no ++ ;

if (no == 11) no = 0;

if (document.getElementById(“s1″).value ==”Ser”) {

arr = ser[no2];

} else if (document.getElementById(“s1″).value ==”Estar”) {

arr = estar[no2];

} else if (document.getElementById(“s1″).value ==”Tener”) {

arr = tener[no2];

} else if (document.getElementById(“s1″).value ==”Ir”) {

arr = ir[no2];

} else if (document.getElementById(“s1″).value ==”Oír”) {

arr = oír[no2];

} else if (document.getElementById(“s1″).value ==”ToBe”) {

arr = eng[no2];

} else if (document.getElementById(“s1″).value ==”ToBe2”) {

arr = eng2[no2];

} else if (document.getElementById(“s1″).value ==”ToHave”) {

arr = eng3[no2];

} else if (document.getElementById(“s1″).value ==”ToGo”) {

arr = eng4[no2];

} else if (document.getElementById(“s1″).value ==”ToHear”) {

arr = eng5[no2];

}  else if (document.getElementById(“s1″).value ==”Ser-past”) {

arr = seri[no2];

}  else if (document.getElementById(“s1″).value ==”ToBe-past”) {

arr = engi[no2];

}  else if (document.getElementById(“s1″).value ==”Estar-past”) {

arr = estari[no2];

}  else if (document.getElementById(“s1″).value ==”ToBe2-past”) {

arr = engi2[no2];

}  else if (document.getElementById(“s1″).value ==”Tener-past”) {

arr = teneri[no2];

}  else if (document.getElementById(“s1″).value ==”ToHave-past”) {

arr = engi3[no2];

}  else if (document.getElementById(“s1″).value ==”Ir-past”) {

arr = iri[no2];

}  else if (document.getElementById(“s1″).value ==”ToGo-past”) {

arr = engi4[no2];

}  else if (document.getElementById(“s1″).value ==”Oír-past”) {

arr = oíri[no2];

}  else if (document.getElementById(“s1″).value ==”ToHear-past”) {

arr = engi5[no2];

}

wrd = arr;

document.getElementById(“t1”).innerHTML = wrd;

}

if (param == 0) hit = true;

checkd = false;

document.getElementById(“t2”).innerHTML = “”;

document.getElementById(“t2”).focus();

document.getElementById(“b2″).style.backgroundColor=”#aaaaaa”;

document.getElementById(“b1″).style.backgroundColor=”#dddddd”;

document.getElementById(“b3″).style.backgroundColor=”#dddddd”;

}
function check() {

if (! checkd) {

document.getElementById(“b2″).style.backgroundColor=”#dddddd”;

hit = false;

cnt = 0;

if (document.getElementById(“s1″).value ==”Ser”) {

document.getElementById(“t1”).innerHTML = eng[no2];

} else if (document.getElementById(“s1″).value ==”Estar”) {

document.getElementById(“t1”).innerHTML = eng2[no2];

} else if (document.getElementById(“s1″).value ==”Tener”) {

document.getElementById(“t1”).innerHTML = eng3[no2];

} else if (document.getElementById(“s1″).value ==”Ir”) {

document.getElementById(“t1”).innerHTML = eng4[no2];

} else if (document.getElementById(“s1″).value ==”Oír”) {

document.getElementById(“t1”).innerHTML = eng5[no2];

} else if (document.getElementById(“s1″).value ==”ToBe”) {

document.getElementById(“t1”).innerHTML = ser[no2];

} else if (document.getElementById(“s1″).value ==”ToBe2”) {

document.getElementById(“t1”).innerHTML = estar[no2];

} else if (document.getElementById(“s1″).value ==”ToHave”) {

document.getElementById(“t1”).innerHTML = tener[no2];

} else if (document.getElementById(“s1″).value ==”ToGo”) {

document.getElementById(“t1”).innerHTML = ir[no2];

} else if (document.getElementById(“s1″).value ==”ToHear”) {

document.getElementById(“t1”).innerHTML = oír[no2];

} else if (document.getElementById(“s1″).value ==”Ser-past”) {

document.getElementById(“t1”).innerHTML = engi[no2];

} else if (document.getElementById(“s1″).value ==”ToBe-past”) {

document.getElementById(“t1”).innerHTML = seri[no2];

} else if (document.getElementById(“s1″).value ==”Estar-past”) {

document.getElementById(“t1”).innerHTML = engi2[no2];

} else if (document.getElementById(“s1″).value ==”ToBe2-past”) {

document.getElementById(“t1”).innerHTML = estari[no2];

} else if (document.getElementById(“s1″).value ==”Tener-past”) {

document.getElementById(“t1”).innerHTML = engi3[no2];

} else if (document.getElementById(“s1″).value ==”ToHave-past”) {

document.getElementById(“t1”).innerHTML = teneri[no2];

} else if (document.getElementById(“s1″).value ==”Ir-past”) {

document.getElementById(“t1”).innerHTML = engi4[no2];

} else if (document.getElementById(“s1″).value ==”ToGo-past”) {

document.getElementById(“t1”).innerHTML = iri[no2];

} else if (document.getElementById(“s1″).value ==”Oír-past”) {

document.getElementById(“t1”).innerHTML = engi5[no2];

} else if (document.getElementById(“s1″).value ==”ToHear-past”) {

document.getElementById(“t1”).innerHTML = oíri[no2];

}

if (document.getElementById(“t2”).innerHTML.toLowerCase() == document.getElementById(“t1”).innerHTML.toLowerCase()) {

crt[no2] = true;

for (var i = 0; i  0) document.getElementById(“b1″).style.backgroundColor=”#aaaaaa”;

if (cnt == 0 && document.getElementById(“t2”).innerHTML.toLowerCase() != document.getElementById(“t1”).innerHTML.toLowerCase()) document.getElementById(“b3″).style.backgroundColor=”#aaaaaa”;

}
function reset(par) {

document.getElementById(“b3″).style.backgroundColor=”#dddddd”;

document.getElementById(“b1″).style.backgroundColor=”#aaaaaa”;

if (cnt == 0 || par == 1) {

crt = [false,false,false,false,false,false,false,false,false,false,false];

document.getElementById(“t2”).innerHTML = “Translate”;

no = -1;

no3 = -1;

wrong = false;

}

}
</body></html>

The only real difference is the composition of the arrays that contain the words.

If you want to try or download the app Click Here

Spanish Adverbs Quiz – Update

July 10, 2017 dynabar Leave a comment

The old version reviewed the questions in sequence. I thought it would be better to have them randomly presented, to prevent memorizing the entire list in order. The old version made you go through the entire list. The new version allows skipping words.

This is how the new interface looks:

Click Image for larger view

There are two new buttons and a checkbox.

Here is the new 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>Spanish Quiz</title>

<style>

body {margin-left:0;margin-right:0;font:normal normal normal 20px Arial;  white-space: pre-wrap; background: #aaaaaa}á

a{ text-decoration: }:link { color: rgb(0, 0, 255) }:visited {color :rgb(100, 0,100) }:hover { }:active { }

#t1, #t2,select, input {position: relative; top 10px;font-size: 20px; }

di{position: relative; display: inline; padding: 10px; background: white}

#t1, #t2{width: 250px; border: 3px groove; padding: 0 30px 0 30px; background: white}

#aaccent, #eaccent, #iaccent, #oaccent, #uaccent, #tilde{width: 20px; border: 2px solid; border-radius: 20px}

#b2, #b3{background:#dddddd}

#b1{background: #aaaaaa}

#b4,#b5{background: #aaffaa;}

</style>

</head>

<body>

  <di id=”t1″ >Test Word</di> <di id=”t2″ contenteditable=”true” ondblclick=’document.getElementById(“t2”).innerHTML = “”;’>Translate</di> <di id=”aaccent” onclick=’document.getElementById(“t2”).innerHTML += “á”; ‘>á</di> <di id=”eaccent” onclick=’document.getElementById(“t2”).innerHTML += “é”;’>é</di> <di id=”iaccent” onclick=’document.getElementById(“t2”).innerHTML += “í”;’>í</di> <di id=”oaccent” onclick=’document.getElementById(“t2”).innerHTML += “ó”;’>ó</di> <di id=”uaccent” onclick=’document.getElementById(“t2”).innerHTML += “ú”;’>ú</di> <di id=”tilde” onclick=’document.getElementById(“t2”).innerHTML += “ñ”;’>ñ</di>
  <select id=”s1″><option>Spanish-English</option><option>English-Spanish</option><option>Spanish-English2</option><option>English-Spanish2</option><option>Spanish-English3</option><option>English-Spanish3</option><option>Spanish-English4</option><option>English-Spanish4</option><option>Spanish-English5</option><option>English-Spanish5</option></select> <input type=”button” id=”b1″ name=”b1″ value=”New Word” onclick= ‘newWord(0);’/> <input type=”button” id=”b2″ name=”b2″ value=”Check” onclick= ‘check();’/> <input type=”button” id=”b4″ name=”b4″ value=”Next” onclick= ‘newWord(1);’/> <input type=”button” id=”b3″ name=”b3″ value=”New” onclick= ‘reset(0);’/> <input type=”button” id=”b5″ name=”b5″ value=”Reset” onclick= ‘reset(1);’/>  <input type=”checkbox” id=”ch1″  name=”ch1″ value=”Skip Repeat on Error” />Skip Repeat on Error
var wrd; var no = -1; var crt = [false,false,false,false,false,false,false,false,false,false]; var cnt; var hit = false; var checkd = false; var no2 = 0; var wrong = false; var no3 = -1;

var adverbs = [“donde”,”aquí”,”aún”,”tampoco”,”luego”,”demasiado”,”allí”,”pronto”,”quizás”,”por supuesto”] ;

var adverbs2 = [“muy”,”despacio”,”así”,”casi”,”además”,”menos”,”fácilmente”,”igualmente”,”entonces”,”ya”] ;

var adverbs3 = [“nunca”,”después”,”siempre”,”ahora”,”sólo”,”también”,”antes”,”todavía”,”bastante”,”lejos”];

var adverbs4 = [“alrededor”,”actualmente”,”jamás”,”realmente”,”adelante”,”debajo”,”principalmente”,”generalmente”,”únicamente”,”seguramente”] ;

var adverbs5 = [“nuevamente”,”rápidamente”,”lentamente”,”definitivamente”,”apenas”,”prácticamente”,”probablemente”,”recientemente”,”aproximadamente”,”completamente”] ;

var eng = [“where”,”here”,”yet”,”neither”,”then”,”too”,”there”,”soon”,”maybe”,”of course”];

var eng2 = [“very”,”slowly”,”like that”,”almost”,”besides”,”less”,”easily”,”equally”,”then”,”already”];

var eng3 = [“never”,”after”,”always”,”now”,”only”,”also”,”before”,”still”,”quite”,”far”];

var eng4 = [“around”,”currently”,”never”,”actually”,”ahead”,”below”,”mainly”,”usually”,”only”,”surely”];

var eng5 = [“newly”,”quickly”,”slowly”,”definitely”,”barely”,”practically”,”probably”,”recently”,”approximately”,”completely”];

 var arr;  //var rt = false;

function newWord(param) {

if (param == 1) hit = false;

if ( ! hit) {
//if (rt) {

//document.getElementById(“t2”).innerHTML = “Translate”;

//rt = false;

//} 
if (wrong) no2 = no3;

if ( ! wrong) {

no2 = Math.floor(10 * Math.random () );

no3 = no2;

}

while (crt[no2] == true && no > 0 && ! wrong) {

no2 = Math.floor(10 * Math.random () );

no3 = no2;

}

no ++ ;

if (no == 10) no = 0;

if (document.getElementById(“s1″).value ==”Spanish-English”) {

arr = adverbs[no2];

} else if (document.getElementById(“s1″).value ==”Spanish-English2”) {

arr = adverbs2[no2];

} else if (document.getElementById(“s1″).value ==”Spanish-English3”) {

arr = adverbs3[no2];

} else if (document.getElementById(“s1″).value ==”Spanish-English4”) {

arr = adverbs4[no2];

} else if (document.getElementById(“s1″).value ==”Spanish-English5”) {

arr = adverbs5[no2];

} else if (document.getElementById(“s1″).value ==”English-Spanish”) {

arr = eng[no2];

} else if (document.getElementById(“s1″).value ==”English-Spanish2”) {

arr = eng2[no2];

} else if (document.getElementById(“s1″).value ==”English-Spanish3”) {

arr = eng3[no2];

} else if (document.getElementById(“s1″).value ==”English-Spanish4”) {

arr = eng4[no2];

} else {

arr = eng5[no2];

}

wrd = arr;

document.getElementById(“t1”).innerHTML = wrd;

}

if (param == 0) hit = true;

checkd = false;

document.getElementById(“t2”).innerHTML = “”;

document.getElementById(“t2”).focus();

document.getElementById(“b2″).style.backgroundColor=”#aaaaaa”;

document.getElementById(“b1″).style.backgroundColor=”#dddddd”;

document.getElementById(“b3″).style.backgroundColor=”#dddddd”;

}
function check() {

if (! checkd) {

document.getElementById(“b2″).style.backgroundColor=”#dddddd”;

hit = false;

cnt = 0;

if (document.getElementById(“s1″).value ==”Spanish-English”) {

document.getElementById(“t1”).innerHTML = eng[no2];

} else if (document.getElementById(“s1″).value ==”Spanish-English2”) {

document.getElementById(“t1”).innerHTML = eng2[no2];

} else if (document.getElementById(“s1″).value ==”Spanish-English3”) {

document.getElementById(“t1”).innerHTML = eng3[no2];

} else if (document.getElementById(“s1″).value ==”Spanish-English4”) {

document.getElementById(“t1”).innerHTML = eng4[no2];

} else if (document.getElementById(“s1″).value ==”Spanish-English5”) {

document.getElementById(“t1”).innerHTML = eng5[no2];

} else if (document.getElementById(“s1″).value ==”English-Spanish”) {

document.getElementById(“t1”).innerHTML = adverbs[no2];

} else if (document.getElementById(“s1″).value ==”English-Spanish2”) {

document.getElementById(“t1”).innerHTML = adverbs2[no2];

} else if (document.getElementById(“s1″).value ==”English-Spanish3”) {

document.getElementById(“t1”).innerHTML = adverbs3[no2];

} else if (document.getElementById(“s1″).value ==”English-Spanish4”) {

document.getElementById(“t1”).innerHTML = adverbs4[no2];

} else {

document.getElementById(“t1”).innerHTML = adverbs5[no2];

}

if (document.getElementById(“t2”).innerHTML.toLowerCase() == document.getElementById(“t1”).innerHTML.toLowerCase()) {

crt[no2] = true;

for (var i = 0; i  0) document.getElementById(“b1″).style.backgroundColor=”#aaaaaa”;

if (cnt == 0 && document.getElementById(“t2”).innerHTML.toLowerCase() != document.getElementById(“t1”).innerHTML.toLowerCase()) document.getElementById(“b3″).style.backgroundColor=”#aaaaaa”;

}
function reset(par) {

document.getElementById(“b3″).style.backgroundColor=”#dddddd”;

document.getElementById(“b1″).style.backgroundColor=”#aaaaaa”;

if (cnt == 0 || par == 1) {

crt = [false,false,false,false,false,false,false,false,false,false];

document.getElementById(“t2”).innerHTML = “Translate”;

no = -1;

no3 = -1;

wrong = false;

}

}
</body></html>

To choose random words the following code is used:
if (wrong) no2 = no3;
if ( ! wrong) {
no2 = Math.floor(10 * Math.random () );
no3 = no2;
}
while (crt[no2] == true && no > 0 && ! wrong) {
no2 = Math.floor(10 * Math.random () );
no3 = no2;
}

A new variable, n03 allows the repetition of an incorrect answer:
if (wrong) no2 = no3;
if ( ! wrong) {
no2 = Math.floor(10 * Math.random () );
no3 = no2;
}

while the following code prevents repeating words when choosing a random word:
while (crt[no2] == true && no > 0 && ! wrong) {
no2 = Math.floor(10 * Math.random () );
no3 = no2;
}

A loop checks and prevents any word previously answered from being repeated.

The green Next and Reset buttons are colored that way because they are always active.

The New Word button can not be used until the Check button is hit:
if ( ! hit) {

But this is bypassed if Next is hit:
if (param == 1) hit = false;

Similarly, the inability to reset until the cnt reaches 0 is overcome if the green Reset is hit:
if (cnt == 0 || par == 1) {

The use of the two green buttons allows you to test only the words you want in a quiz and immediately go to a new one.

Finally, while the checkbox is checked, words will not be repeated on making an incorrect answer:
if (! document.getElementById(“ch1”).checked) {
no –;
wrong = true;
}

Using HTML to Place Text Along Curved Path

July 3, 2017 dynabar Leave a comment

Do to a peculiarity of WordPress, di must be substituted for div in the code.
As in the previous post, this post covers a procedure usually done with graphics software that can be done with html and javascript.

The characters are inserted into divisions that are placed at the radii of a circle. Transform rotate is used to rotate the individual characters.

Here is an example of the app:

Click Images for larger view

Here are the settings for that example:

Clicking the Write button hides the settings menu and displays the string. Double clicking an open area of the window hides the string and displays the settingss menu.

Here is an example with default setting:

If you want a more symmetrical curvature, the settings have to be changed:

Here are those settings:

Here is the code:

HTML Editor
body {margin-left:0;margin-right:0;font:normal normal normal 15px Arial; white-space: pre-wrap}

a{ text-decoration: }:link { color: rgb(0, 0, 255) }:visited {color :rgb(100, 0,100) }:hover { }:active { }

Space Separated Text

FrameTop, Rotation

Character Rotation

Radius

Font

xpos = new Array();

ypos = new Array();

// var str = prompt(“Comma separated Text”,””);

// var letts = str.split();

var rot;

//var rad = 150;

var x0 = 683; var y0 = 352; var ang;

function write1() {

var rad = parseInt(document.getElementById(“t4”).value);

document.getElementById(“frame2”).innerHTML = “”;

// var str = prompt(“Comma Separated  Text”, “”);

document.getElementById(“t1”).focus();

var str = document.getElementById(“t1”).value;

var letts = str.split(‘ ‘);

var ind = document.getElementById(“t2”);

var a = ind.value.indexOf(“,”);

var r1 = ind.value.substr(0,a);

var r2 =ind.value.substr(a+1, ind.value.length – a);

document.getElementById(“frame2”).style.top =  r1;

document.getElementById(“frame2”).style.webkitTransform =  “rotate(” + r2 + “)”;

for (var i=1; i’ + letts[i – 1] + ‘ ‘;

// ang = -Math.PI/5.9 + (Math.PI/12 * (i – 1));

var ind2 = document.getElementById(“t3”);

var a = ind2.value.indexOf(“,”);

var r1 = ind2.value.substr(0,a);

var r2 =ind2.value.substr(a+1, ind2.value.length – a);

ang = -Math.PI / parseFloat(r1) + (Math.PI / parseFloat(r2) * (i -1));

 xpos[i – 1] =  x0 + rad * Math.sin(ang) -20 ;

 ypos[i – 1] =  y0 – rad * Math.cos(ang) ;

document.getElementById(“d” + i).style.left = xpos[i – 1] + “px”;

document.getElementById(“d” + i).style.top = ypos[i – 1]+ “px”;

}

}

The rotation of each character is a function of the length of the string:
rot = -30 + 15*(i-1);
document.getElementById(“frame2″).innerHTML +=” + letts[i – 1] + ‘ ‘;

while the position is set by the radius of a circle:
ang = -Math.PI / parseFloat(r1) + (Math.PI / parseFloat(r2) * (i -1));
xpos[i – 1] = x0 + rad * Math.sin(ang) -20 ;
ypos[i – 1] = y0 – rad * Math.cos(ang) ;
document.getElementById(“d” + i).style.left = xpos[i – 1] + “px”;
document.getElementById(“d” + i).style.top = ypos[i – 1]+ “px”;

To rotate the entire string, the containing division has to be rotated. Whenever the division is rotated it must also be translated:
var ind = document.getElementById(“t2”);
var a = ind.value.indexOf(“,”);
var r1 = ind.value.substr(0,a);
var r2 =ind.value.substr(a+1, ind.value.length – a);
document.getElementById(“frame2”).style.top = r1;
document.getElementById(“frame2”).style.webkitTransform = “rotate(” + r2 + “)”;

To change the curvature the circle radius is changed:
var rad = parseInt(document.getElementById(“t4”).value);

Whenever the radius is changed the division holding the string must again be translated.

	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: July 2017

Getting a Javascript Variable From a PHP Variable and Why it is Sometimes Necessary

PHP Viewer Update

HTML Spanish-English Irregular Verbs Quiz

Spanish Adverbs Quiz – Update

Using HTML to Place Text Along Curved Path

Web Page & Programming Tips

Space Separated Text

FrameTop, Rotation
Character Rotation
Radius
Font