Javascript breaks when images added

Collapse
This topic is closed.
X
X
 
  • Time
  • Show
Clear All
new posts
  • Fabian

    Javascript breaks when images added

    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:



    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[i];
    nArray[i] = 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] = i; }
    Shuffle( mtOrder, 0, Riable );
    for (i=0; i<maxProb; i++) { enOrder[i] = mtOrder[i]; }
    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><I NPUT 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.qf orm.elements[i].value );
    if ((! isNaN(n)) && n >= 1 && n <= maxProb ) {
    if (enOrder[n-1] == mtOrder[i]) { ok = true; }
    }
    if (ok) { estr = "yay.gif"; }
    else { estr = "nay.gif"; }
    top.document.im ages[picNum[i]].src = estr;
    }
    }

    function doNull() { }
    // -->
    </SCRIPT>
    </HEAD>

    <BODY>


    <FORM NAME="qform">
    <TABLE border=1>
    <SCRIPT LANGUAGE="JavaS cript">
    <!--
    showProblems()
    // -->
    </SCRIPT>
    </TABLE>
    </FORM>

    <HR>
    <P>Type the number of the correct English word before each English word,
    then click the
    <A HREF="javascrip t:doNull()" onclick="checkA nswers();">here </A> to see
    if you're right.</P>

    ---end snip---


    --
    --
    Fabian
    Visit my website often and for long periods!


  • Graham J

    #2
    Re: Javascript breaks when images added

    > top.document.im ages[picNum[i]].src = estr;

    I got a little tied in a knot following the code but I would say this line
    is the problem. picNum[i] seems to be an integer so when you try to change
    the images you are acting on the first six (or whatever) images on the page.
    This will be OK when they are the first six images on the page but with the
    images being used for the colours too they aren't any more, they are more
    like 0, 2, 4... etc and if you add an image higher up for decoration that
    will break it too.

    I believe you want to be giving an argument of the form "pic1", "pic2" etc
    to access those images by their name. So that would make it something like
    top.document.im ages['pic'+picNum[i]].src I think. As I say I got a bit tied
    up!





    Comment

    • Fabian

      #3
      Re: Javascript breaks when images added


      "Graham J" <individual-news-6@orangebucket. co.uk> wrote in message
      news:bn3q6k$s5f 5u$1@ID-203032.news.uni-berlin.de...[color=blue][color=green]
      > > top.document.im ages[picNum[i]].src = estr;[/color]
      >
      > I got a little tied in a knot following the code but I would say this[/color]
      line[color=blue]
      > is the problem. picNum[i] seems to be an integer so when you try to[/color]
      change[color=blue]
      > the images you are acting on the first six (or whatever) images on the[/color]
      page.[color=blue]
      > This will be OK when they are the first six images on the page but[/color]
      with the[color=blue]
      > images being used for the colours too they aren't any more, they are[/color]
      more[color=blue]
      > like 0, 2, 4... etc and if you add an image higher up for decoration[/color]
      that[color=blue]
      > will break it too.
      >
      > I believe you want to be giving an argument of the form "pic1", "pic2"[/color]
      etc[color=blue]
      > to access those images by their name. So that would make it something[/color]
      like[color=blue]
      > top.document.im ages['pic'+picNum[i]].src I think. As I say I got a[/color]
      bit tied[color=blue]
      > up![/color]

      Thanks! That fixed the problem perfectly!


      --
      --
      Fabian
      Visit my website often and for long periods!


      Comment

      Working...