F
Fabian
This javascript is meant for learning language vocabulary, specifically
colours on this example. However, when I use images in the mtWord array,
it breaks when checking for correct answers. It works fine with text in
those spaces.
Direct links to the pages online:
http://www.lajzar.co.uk/en/colours.html
http://www.lajzar.co.uk/en/animals.html
How can I fix this so the functions work with images in that array? It
works fine with a table and appropriately coloured backgrounds, but I
cant get gold and silver that way.
Or nose at teh code pasted below...
---snip---
var mtWord = new Array (
"<IMG SRC='blue.png'>",
"<IMG SRC='green.png'>",
"<IMG SRC='orange.png'>",
"<IMG SRC='pink.png'>",
"<IMG SRC='white.png'>",
"<IMG SRC='black.png'>",
"<IMG SRC='yellow.png'>",
"<IMG SRC='red.png'>",
"<IMG SRC='gold.png'>",
"<IMG SRC='silver.png'>",
"<IMG SRC='brown.png'>",
"<IMG SRC='purple.png'>"
);
var enWord = new Array(
"blue",
"green",
"orange",
"pink",
"white",
"black",
"yellow",
"red",
"gold",
"silver",
"brown",
"purple"
);
var mtOrder = new Array(12); // the number of items in the arrays above
var enOrder = new Array(12); // the number of items in the arrays above
var picNum = new Array(36); // the number of problems to display x 3
var maxProb = 6; // the number of problems to display
var Riable = 12; // the number of items in the arrays above
/*********************************************************************
mixes up n elements of nArray starting at element startAt
**********************************************************************/
function Shuffle( nArray, startAt, n ) {
var i, j, swap;
for (i = startAt; i < startAt + n; i++) {
j = startAt + Math.round(Math.random() * (n - 1));
swap = nArray;
nArray = nArray[j];
nArray[j] = swap;
}
}
function showProblems() {
var i, j, n, prob, pnum;
var d, str, picname;
for (i=0; i<Riable; i++) { mtOrder = i; }
Shuffle( mtOrder, 0, Riable );
for (i=0; i<maxProb; i++) { enOrder = mtOrder; }
Shuffle( enOrder, 0, maxProb );
pnum = 0;
d = top.document;
d.open();
for (prob=0; prob<maxProb; prob++) {
picNum[prob] = pnum++;
d.write("<TR>\n<TD><IMG NAME='pic", prob, "'
SRC='null.gif'></TD>\n");
d.write("<TD><INPUT TYPE='text' NAME='in", prob, "'
SIZE=1></TD>\n");
d.write("<TD>", mtWord[mtOrder[prob]], "</TD>\n");
d.write("<TD WIDTH=20></TD>\n");
d.write("<TD>",prob+1,". ", enWord[enOrder[prob]],
"</TD>\n</TR>\n\n");
}
d.close();
}
function checkAnswers() {
var i;
var ok;
var estr;
for (i=0; i<maxProb; i++) {
ok = false;
n = parseInt( top.document.qform.elements.value );
if ((! isNaN(n)) && n >= 1 && n <= maxProb ) {
if (enOrder[n-1] == mtOrder) { ok = true; }
}
if (ok) { estr = "yay.gif"; }
else { estr = "nay.gif"; }
top.document.images[picNum].src = estr;
}
}
function doNull() { }
// -->
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="qform">
<TABLE border=1>
<SCRIPT LANGUAGE="JavaScript">
<!--
showProblems()
// -->
</SCRIPT>
</TABLE>
</FORM>
<HR>
<P>Type the number of the correct English word before each English word,
then click the
<A HREF="javascript:doNull()" onclick="checkAnswers();">here</A> to see
if you're right.</P>
---end snip---
colours on this example. However, when I use images in the mtWord array,
it breaks when checking for correct answers. It works fine with text in
those spaces.
Direct links to the pages online:
http://www.lajzar.co.uk/en/colours.html
http://www.lajzar.co.uk/en/animals.html
How can I fix this so the functions work with images in that array? It
works fine with a table and appropriately coloured backgrounds, but I
cant get gold and silver that way.
Or nose at teh code pasted below...
---snip---
var mtWord = new Array (
"<IMG SRC='blue.png'>",
"<IMG SRC='green.png'>",
"<IMG SRC='orange.png'>",
"<IMG SRC='pink.png'>",
"<IMG SRC='white.png'>",
"<IMG SRC='black.png'>",
"<IMG SRC='yellow.png'>",
"<IMG SRC='red.png'>",
"<IMG SRC='gold.png'>",
"<IMG SRC='silver.png'>",
"<IMG SRC='brown.png'>",
"<IMG SRC='purple.png'>"
);
var enWord = new Array(
"blue",
"green",
"orange",
"pink",
"white",
"black",
"yellow",
"red",
"gold",
"silver",
"brown",
"purple"
);
var mtOrder = new Array(12); // the number of items in the arrays above
var enOrder = new Array(12); // the number of items in the arrays above
var picNum = new Array(36); // the number of problems to display x 3
var maxProb = 6; // the number of problems to display
var Riable = 12; // the number of items in the arrays above
/*********************************************************************
mixes up n elements of nArray starting at element startAt
**********************************************************************/
function Shuffle( nArray, startAt, n ) {
var i, j, swap;
for (i = startAt; i < startAt + n; i++) {
j = startAt + Math.round(Math.random() * (n - 1));
swap = nArray;
nArray = nArray[j];
nArray[j] = swap;
}
}
function showProblems() {
var i, j, n, prob, pnum;
var d, str, picname;
for (i=0; i<Riable; i++) { mtOrder = i; }
Shuffle( mtOrder, 0, Riable );
for (i=0; i<maxProb; i++) { enOrder = mtOrder; }
Shuffle( enOrder, 0, maxProb );
pnum = 0;
d = top.document;
d.open();
for (prob=0; prob<maxProb; prob++) {
picNum[prob] = pnum++;
d.write("<TR>\n<TD><IMG NAME='pic", prob, "'
SRC='null.gif'></TD>\n");
d.write("<TD><INPUT TYPE='text' NAME='in", prob, "'
SIZE=1></TD>\n");
d.write("<TD>", mtWord[mtOrder[prob]], "</TD>\n");
d.write("<TD WIDTH=20></TD>\n");
d.write("<TD>",prob+1,". ", enWord[enOrder[prob]],
"</TD>\n</TR>\n\n");
}
d.close();
}
function checkAnswers() {
var i;
var ok;
var estr;
for (i=0; i<maxProb; i++) {
ok = false;
n = parseInt( top.document.qform.elements.value );
if ((! isNaN(n)) && n >= 1 && n <= maxProb ) {
if (enOrder[n-1] == mtOrder) { ok = true; }
}
if (ok) { estr = "yay.gif"; }
else { estr = "nay.gif"; }
top.document.images[picNum].src = estr;
}
}
function doNull() { }
// -->
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="qform">
<TABLE border=1>
<SCRIPT LANGUAGE="JavaScript">
<!--
showProblems()
// -->
</SCRIPT>
</TABLE>
</FORM>
<HR>
<P>Type the number of the correct English word before each English word,
then click the
<A HREF="javascript:doNull()" onclick="checkAnswers();">here</A> to see
if you're right.</P>
---end snip---