Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 19
  1. #1
    New Coder
    Join Date
    Jun 2012
    Posts
    26
    Thanks
    25
    Thanked 0 Times in 0 Posts

    How to create multi-dimensional arrays

    I have been adding some stats and scores to my flashcards script and am wondering how I can improve it. Presently I have a total cards viewed stat but it is really just a running total and includes duplicate cards. I would like to make this stat just show the number of unique cards viewed (if a card is repeated it does not add to the total but a new card in the pack adds to the stat). When all cards in the stack have been viewed and are known the user could be alerted. I figured this would involve a multidimensional array but couldn't figure out how I could modify the existing array correctly. Thanks

    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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Japanese Vocab</title>
    
    
    </head>
    
    <body>
    
    <h2>Vocab Flashcards</h2>
    
    <p id="japanese"></p>
    <p id="english">&nbsp;</p>
    
    <br />
    
    <button onclick="showEnglish()">Answer</button>
    <button onclick="know(1)">Know</button>
    <button onclick="dknow(1)">Don't Know</button>
    
    <p>&nbsp;</p>
    <span id="score">Score: 0%</span>
    <p></p>
    <span id="correct">Correct: 0</span>
    <span id="incorrect">Incorrect: 0</span>
    <span id="totalc">Cards viewed: 0</span>
    
    
    
    <script type="text/javascript">
    var words =
    [
    ["taberu",  "to eat"],
    ["yomu",    "to read"],
    ["iku",     "to go"],
    ["kaku",     "to write"],
    ["nomu",    "to drink"],
    ["kaeru",     "to return"],
    ["oyogu",     "to swim"],
    ["kuru",    "to come"]
    ];
    
    var cnt = 0;
    var previous = 0;
    var beforethat = 0;
    
    var nknow=0;
    var ndknow=0;
    var totalw=0;
    var percent=0;
    var ncards=0;
    var wordCount = words.length;
    
    while ((cnt == previous) || (cnt == beforethat)) {
    cnt = Math.floor(Math.random()*5);
    }
    beforethat = previous;
    previous = cnt;
    
    
    function showEnglish()
    {
        document.getElementById("english").innerHTML = words[cnt][1];
    }
    function nextWord( moveBy )
    {
        cnt = ( cnt + wordCount + moveBy ) % wordCount;
    
        document.getElementById("japanese").innerHTML = words[cnt][0]
        document.getElementById("english").innerHTML='&nbsp;';     
    
    }
    function know( moveBy )
    {
        cnt = ( cnt + wordCount + moveBy ) % wordCount;
    
        document.getElementById("japanese").innerHTML = words[cnt][0]
        document.getElementById("english").innerHTML='&nbsp;';
    nknow=nknow+1;
    totalw=nknow+ndknow;
    ncards=totalw;
    percent = Math.round(nknow / totalw * 100);    
        document.getElementById("score").innerHTML = "Score: "+[percent]+"%";
    document.getElementById("correct").innerHTML = "Correct: "+[nknow];
    document.getElementById("incorrect").innerHTML ="Incorrect: "+[ndknow];
    document.getElementById("totalc").innerHTML ="Cards viewed: "+[ncards];
    }
    function dknow( moveBy )
    {
        cnt = ( cnt + wordCount + moveBy ) % wordCount;
    
        document.getElementById("japanese").innerHTML = words[cnt][0]
        document.getElementById("english").innerHTML='&nbsp;';
    ndknow=ndknow+1;
    totalw=nknow+ndknow;
    ncards=totalw;
    percent = Math.round(nknow / totalw * 100);    
        document.getElementById("score").innerHTML = "Score: "+[percent]+"%";
    document.getElementById("correct").innerHTML = "Correct: "+[nknow];
    document.getElementById("incorrect").innerHTML = "Incorrect: "+[ndknow];
    document.getElementById("totalc").innerHTML = "Cards viewed: "+[ncards];
    }
    nextWord(0); // gets it started
    
    </script>
    </body>
    </html>

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,147
    Thanks
    203
    Thanked 2,547 Times in 2,525 Posts
    I think all you want is another array named shown[], then

    Code:
    beforethat = previous;
    previous = cnt;
    shown[cnt] = 1; 
    Then when required add up the number of elements of the array whose value is 1.

    Code:
    var totshown = 0;
    for (var i =0; i<shown.length; i++) {
    if (shown[i] == 1) {
    totshown++;
    }
    alert ("The total number of unique cards was " + totshown");
    document.getElementById("totalc").innerHTML = totshown;

    All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle lightly in transit.
    Last edited by Philip M; 07-06-2012 at 08:48 AM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    meridian (07-06-2012)

  • #3
    New Coder
    Join Date
    Jun 2012
    Posts
    26
    Thanks
    25
    Thanked 0 Times in 0 Posts
    Thanks Philip M. I'll have a play around with that. May I ask though, is the array "shown[]," a new array completely (eg. var shown = []; ) or should it be nestled within the words array somehow? I guess I am trying to understand how they are connected and stay in sync with each other.
    Last edited by meridian; 07-06-2012 at 12:59 PM.

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,147
    Thanks
    203
    Thanked 2,547 Times in 2,525 Posts
    The array shown[] is a separate array. As you say, declare it outside any function as var shown = [];

    As your array questions maintains its order, then if question x is shown, the value of shown[x] changes to 1, to show that it has been, er, shown.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    meridian (07-06-2012)

  • #5
    Banned
    Join Date
    Jun 2012
    Posts
    2
    Thanks
    0
    Thanked 1 Time in 1 Post
    Hi philip,
    Multidimensional arrays are useful tools in circumstances where you have to populate the entire space with information.
    we can create a 3x3 array in this way,


    Eg:
    var myArray = new Array(3);

    for (var i = 0; i < 3; i++) {
    myArray[i] = new Array(3);
    for (var j = 0; j < 3; j++) {
    myArray[i][j] = '';
    }
    }
    Last edited by VIPStephan; 07-10-2012 at 09:53 AM. Reason: removed spam links

  • Users who have thanked angelinwilliams for this post:

    meridian (07-07-2012)

  • #6
    New Coder
    Join Date
    Jun 2012
    Posts
    26
    Thanks
    25
    Thanked 0 Times in 0 Posts
    Ok. Thanks for the explanation Philip M.

  • #7
    New Coder
    Join Date
    Jun 2012
    Posts
    26
    Thanks
    25
    Thanked 0 Times in 0 Posts
    Thanks angelinwilliams. This is how I originally imagined it could be achieved but my understanding wasn't enough to get it going. For example how would my word pairs sit in this array?

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,561
    Thanks
    80
    Thanked 4,495 Times in 4,459 Posts
    I don't see why you need a separate array for shown.

    Why not just:
    Code:
    var words =
    [
        ["taberu",  "to eat",    0],
        ["yomu",    "to read",   0],
        ["iku",     "to go",     0],
        ["kaku",    "to write",  0],
        ["nomu",    "to drink",  0],
        ["kaeru",   "to return", 0],
        ["oyogu",   "to swim",   0],
        ["kuru",    "to come",   0]
    ];
    And then, to handle one word choice, you do [for example]
    Code:
         var wordnum = 4; // however you get the number...e.g., randomly
         var word = words[wordnum];
         var japanese = word[0];
         var english  = word[1]
         ++word[2]; // bump the shown count
    You already *HAD* the multidimensional words array. We just needed to add one extra element to each inner array.
    Last edited by Old Pedant; 07-07-2012 at 06:26 AM.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    meridian (07-07-2012)

  • #9
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,561
    Thanks
    80
    Thanked 4,495 Times in 4,459 Posts
    Now, a BETTER way of doing this would be to use a SINGLE dimensioned array of OBJECTS.

    Thus:
    Code:
    // a constructor for a Word object:
    function Word( jp, en )
    {
        this.japanese = jp;
        this.english  = en;
        this._showCount = 0;
        this.show = function() { ++this._showCount; }
        this.shown = function() { return this._showCount; }
    }
        
    var words =
    [
        new Word("taberu",  "to eat"   ),
        new Word("yomu",    "to read"  ),
        new Word("iku",     "to go"    ),
        new Word("kaku",    "to write" ),
        new Word("nomu",    "to drink" ),
        new Word("kaeru",   "to return"),
        new Word("oyogu",   "to swim"  ),
        new Word("kuru",    "to come"  )
    ];
    and, again, to handle one word choice:
    Code:
        var wordnum = 4; // however you get the number...e.g., randomly
        var word = words[wordnum];
        word.show();  // to bump the _showCount counter
    
        // and now you just use 
        word.japanese
        word.english
        // as needed in your code
    
        ...
        // and you can find the total words shown via somethin like this:
        var total = 0;
        for ( var w = 0; w < words.length; ++w )
        {
            total += words[w].shown();
        }
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    meridian (07-07-2012)

  • #10
    New Coder
    Join Date
    Jun 2012
    Posts
    26
    Thanks
    25
    Thanked 0 Times in 0 Posts
    I'm having trouble keeping up with all the variations (but I'm happy for all the input). I was playing with Old Pedants approach and sort of got it working. However, the counter starts at 0 rather than 1 and when it gets to the last word it goes back to zero. It would be good if the number started at 1 and then stayed at the last card number and then when the score was 100% there was an alert that the goal was reached or something like that. Note: I changed the var word to vocab.

    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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Japanese Vocab</title>
    
    
    </head>
    
    <body>
    
    <h2>Vocab Flashcards</h2>
    
    <p id="japanese"></p>
    <p id="english">&nbsp;</p>
    
    <br />
    
    <button onclick="showEnglish()">Answer</button>
    <button onclick="know(1)">Know</button>
    <button onclick="dknow(1)">Don't Know</button>
    
    <p>&nbsp;</p>
    <span id="score">Score: 0%</span>
    <p></p>
    <span id="correct">Correct: 0</span>
    <span id="incorrect">Incorrect: 0</span>
    <span id="totalc">Total Cards viewed: 0</span>
    <span id="word">Individual Cards viewed: 0</span>
    
    
    <script type="text/javascript">
    var vocab =
    [
        ["taberu",  "to eat",    0],
        ["yomu",    "to read",   0],
        ["iku",     "to go",     0],
        ["kaku",    "to write",  0],
        ["nomu",    "to drink",  0],
        ["kaeru",   "to return", 0],
        ["oyogu",   "to swim",   0],
        ["kuru",    "to come",   0]
    ]
    var cnt=0;
    var nknow=0;
    var ndknow=0;
    var totalw=0;
    var percent=0;
    var ncards=0;
    var wordCount = vocab.length;
    
    var word = vocab[2];
    var japanese = word[0];
    var english  = word[1];
    
    
    document.getElementById("japanese").innerHTML=vocab[cnt][0];
    
    function showEnglish()
    {
    	document.getElementById("english").innerHTML = vocab[cnt][1];
             
    }
    
    function know()
    {
        cnt=++cnt%vocab.length;
    	
        document.getElementById("japanese").innerHTML = vocab[cnt][0]
        document.getElementById("english").innerHTML='&nbsp;';
    	var wordnum = [cnt];
    	
     nknow=nknow+1;
     totalw=nknow+ndknow;
     ncards=totalw;
     percent = Math.round(nknow / totalw * 100);  
     
       
     document.getElementById("score").innerHTML = "Score: "+[percent]+"%";
     document.getElementById("correct").innerHTML = "Correct: "+[nknow];
     document.getElementById("incorrect").innerHTML ="Incorrect: "+[ndknow];
     document.getElementById("totalc").innerHTML ="Total Cards viewed: "+[ncards];
     document.getElementById("word").innerHTML ="Individual Cards viewed: "+[wordnum];
    }
    function dknow()
    {
        cnt=++cnt%vocab.length;
    	
        document.getElementById("japanese").innerHTML = vocab[cnt][0]
        document.getElementById("english").innerHTML='&nbsp;';
    	
    	
     ndknow=ndknow+1;
     totalw=nknow+ndknow;
     ncards=totalw;
     percent = Math.round(nknow / totalw * 100);  
     
       
     document.getElementById("score").innerHTML = "Score: "+[percent]+"%";
     document.getElementById("correct").innerHTML = "Correct: "+[nknow];
     document.getElementById("incorrect").innerHTML = "Incorrect: "+[ndknow];
     document.getElementById("totalc").innerHTML = "Total Cards viewed: "+[ncards];
     document.getElementById("word").innerHTML ="Individual Cards viewed: "+[wordnum];
    }
    ++word[2];
    </script>
    </body>
    </html>

  • #11
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,147
    Thanks
    203
    Thanked 2,547 Times in 2,525 Posts
    Quote Originally Posted by Old Pedant View Post
    I don't see why you need a separate array for shown.
    As we often say, there is more than one way to skin a cat. My suggestion seemed to me the simplest.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #12
    New Coder
    Join Date
    Jun 2012
    Posts
    26
    Thanks
    25
    Thanked 0 Times in 0 Posts
    Perhaps a randomly generated word may be a better way to work with this idea. I tried to incorporate this into the script however, I don't seemed to have pulled it off. The number starts at 3? (and still goes back to zero). Philip M you may be right.

    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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Japanese Vocab</title>
    
    
    
    </head>
    
    <body>
    
    <h1>Vocab Flashcards</h1>
    
    <div id=card>
    <p id="japanese"></p>
    <p id="english">&nbsp;</p>
    </div>
    
    <button onclick="showEnglish()">Answer</button></br>
    <button onclick="know(1)">Know</button>
    <button onclick="dknow(1)">Don't Know</button></br>
    <button onclick="nextWord(-1)">Previous word</button>
    <button onclick="nextWord(1)">Next word</button>
    
    
    <p>&nbsp;</p>
    <span id="score">Score: 0%</span>
    <p></p>
    <span id="correct">Correct: 0</span>
    <span id="incorrect">Incorrect: 0</span>
    <span id="totalc">Cards viewed: 0</span>
    <span id="word">Individual Cards viewed: 0</span>
    
    
    
    <script type="text/javascript">
    var vocab =
    [
        ["taberu",  "to eat",    0],
        ["yomu",    "to read",   0],
        ["iku",     "to go",     0],
        ["kaku",    "to write",  0],
        ["nomu",    "to drink",  0],
        ["kaeru",   "to return", 0],
        ["oyogu",   "to swim",   0],
        ["kuru",    "to come",   0]
    ];
    
    var cnt = 0;
    var previous = 0;
    var beforethat = 0;
    
    var nknow=0;
    var ndknow=0;
    var totalw=0;
    var percent=0;
    var ncards=0;
    var wordCount = vocab.length;
    
    var word = vocab[2];
    var japanese = word[0];
    var english  = word[1];
    
    while ((cnt == previous) || (cnt == beforethat)) {
    cnt = Math.floor(Math.random()*5);
    }
    beforethat = previous;
    previous = cnt;
    
    
    function showEnglish()
    {
        document.getElementById("english").innerHTML = vocab[cnt][1];
    }
    function nextWord( moveBy )
    {
        cnt = ( cnt + wordCount + moveBy ) % wordCount; 
    
        document.getElementById("japanese").innerHTML = vocab[cnt][0]
        document.getElementById("english").innerHTML='&nbsp;';     
      
    }
    function know( moveBy )
    {
        cnt = ( cnt + wordCount + moveBy ) % wordCount; 
    
        document.getElementById("japanese").innerHTML = vocab[cnt][0]
        document.getElementById("english").innerHTML='&nbsp;';
    	var wordnum = [cnt];
      nknow=nknow+1;
      totalw=nknow+ndknow;
      ncards=totalw;
      percent = Math.round(nknow / totalw * 100);    
        document.getElementById("score").innerHTML = "Score: "+[percent]+"%";
      document.getElementById("correct").innerHTML = "Correct: "+[nknow];
      document.getElementById("incorrect").innerHTML ="Incorrect: "+[ndknow];
      document.getElementById("totalc").innerHTML ="Cards viewed: "+[ncards];
      document.getElementById("word").innerHTML ="Individual Cards viewed: "+[wordnum];
    }
    function dknow( moveBy )
    {
        cnt = ( cnt + wordCount + moveBy ) % wordCount; 
    
        document.getElementById("japanese").innerHTML = vocab[cnt][0]
        document.getElementById("english").innerHTML='&nbsp;';
    	var wordnum = [cnt];
      ndknow=ndknow+1;
      totalw=nknow+ndknow;
      ncards=totalw;
      percent = Math.round(nknow / totalw * 100);    
        document.getElementById("score").innerHTML = "Score: "+[percent]+"%";
      document.getElementById("correct").innerHTML = "Correct: "+[nknow];
      document.getElementById("incorrect").innerHTML = "Incorrect: "+[ndknow];
      document.getElementById("totalc").innerHTML = "Cards viewed: "+[ncards];
      document.getElementById("word").innerHTML ="Individual Cards viewed: "+[wordnum];
    }
    nextWord(0);
    
    ++word[2];
    
    </script>
    </body>
    </html>

  • #13
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,561
    Thanks
    80
    Thanked 4,495 Times in 4,459 Posts
    *WHAT* number starts at 3 and goes back to 0???

    You have utterly lost me.

    The code just seems way over-complicated, in any case.

    Can you describe, in words, what you are trying to keep track of??
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #14
    New Coder
    Join Date
    Jun 2012
    Posts
    26
    Thanks
    25
    Thanked 0 Times in 0 Posts
    Sorry if I was unclear. The number I was referring to was the one outputting to "Individual cards viewed". I was having another look at it and I can see it is just displaying the array number. I was hoping to display the total number of new cards viewed which doesn't include repeats. eg. the word taberu may have come up several times but the counter would only register it as one. It would work like this for example as one was working through the pack.

    taberu - 1 (out of 8 words viewed)
    nomu - 2 (out of 8 words viewed)
    kaku - 3 (out of 8 words viewed)
    nomu - 3 (out of 8 words viewed)
    kaeru - 4 (out of 8 words viewed)
    taberu - 4 (out of 8 words viewed) etc.

    I guess it could also be displayed as a percentage of how far through the deck you were irrespective of the number of times a words has been flashed.

  • #15
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,147
    Thanks
    203
    Thanked 2,547 Times in 2,525 Posts
    Try using the simple code I gave you. Set the array element to 1 if the card is viewed (however many times). Alternatively increment the array element each time the card is viewed, but count how many array elements have a value > 0 to detect how many cards were viewed ignoring repeats. Obviously the sum of the array elements will be the total number of cards viewed (including repeats).

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •