26 Replies Latest reply on Jun 18, 2013 10:12 AM by bettiesac212

    Display one div at a time from an array?

    bettiesac212

      I am trying to make a multiple choice quiz. I have each question and answer in a div. There are 20 divs. All are set to not display on the stage, and I want to call one randomly to display as the user answers that question.

       

      For the moment, I am trying to get even one question to display on the stage. Here is my code, which is at the top in the edgeActions.js file inside the first function.

       

      //Edge code

      (function($, Edge, compId){

      var Composition = Edge.Composition, Symbol = Edge.Symbol; // aliases for commonly used Edge classes

       

      //my code

      var divs = new Array( 'div.ques1', 'div.ques2', 'div.ques3', 'div.ques4', 'div.ques5', 'div.ques6', 'div.ques7', 'div.ques8', 'div.ques9', 'div.ques10', 'div.ques11', 'div.ques12', 'div.ques13', 'div.ques14', 'div.ques15', 'div.ques16', 'div.ques17', 'div.ques18', 'div.ques19', 'div.ques20' ), idx;

       

      var idx = Math.floor(Math.random()*divs.length);

       

      function getQuestion() {

       

      //the following commands do not work

                          $('idx').show();

                          $('idx').css('display','inline');

                          $('divs[idx]').appendTo(document.body);

                          $('sym.que2').show();

        $('que2').show();

                          $('div.ques1').show();

                          $('ques2').show();

       

      //these do work

                          alert("blah");

                          console.log('this is working');

                          console.log('id=%d', idx);

       

                }

       

                getQuestion();

       

      Since the console is returning the random number from the array, I have a feeling Edge cannot distinguish the array number from the corresponding div. Converting them to symbols does nothing. I am starting to think it would have been easier to just hand code this rather than using Edge.

        • 1. Re: Display one div at a time from an array?
          elainecc Adobe Employee

          Hi, bettiesac212-

           

          A couple of things to note here:

          1. Math.random() will give you a number between 0 and 1.  If you really want a number between 0 and 20, here's a way to do it:

                    var random = Math.floor(Math.random() * 100) % 20;

           

          2. How are you defining your elements?  I don't believe dots are valid in element names.

           

          3. When you refer to an array, you should refer to it as such:

               $(divs[random]).hide();

           

          4. I don't quite understand what idx is supposed to be, as new Array() does not require a separate index variable.

           

          Answering 2-4 should help point you in the right direction for getting your randomization function to work.

           

          -Elaine

          • 2. Re: Display one div at a time from an array?
            bettiesac212 Level 1

            Hi Elaine,

             

            Thank you for your response!

             

            Your new randomize line worked beautifully

             

            I have tried defining my array elements in every connotation I can think of, inlcuding changing them to symbols. I did figure out today that an element has to be displayed before it will even be hit by jQuery, [.show() will not work] and if autoplay is checked while they are off, they will show, and vice versa. Confusing, but it narrowed it down enough for me to see I really just needed to figure out how to call the elements, then figure out all the on/off/autoplay stuff from there.

             

            Here is my new code in its new location, the compositionReady panel:

             

            var divs = new Array( 'Symbol_1', 'Symbol_2', 'Symbol_3', 'Symbol_4', 'Symbol_5', 'Symbol_6', 'Symbol_7', 'Symbol_8', 'Symbol_9', 'Symbol_10', 'Symbol_11', 'Symbol_12', 'Symbol_13', 'Symbol_14', 'Symbol_15',

            'Symbol_16', 'Symbol_17', 'Symbol_18', 'Symbol_19', 'Symbol_20' );   // display is on for all symbols

             

            sym.setVariable("myArr", divs);

             

            var random = Math.floor(Math.random() * 100) % 20;

             

            console.log( divs );   //works

            console.log( "myArr" );   //works

            console.log( random );    //works

             

            function getQuestion() {

                     sym.$("myArr").hide();  // doesn't work

                     sym.$("myArr").hide();  //doesn't work

                                console.log('this is working');  //works

                                console.log('id=%d', random);   //works

             

                      }

             

            getQuestion();

             

            All of the questions are showing at once and I want to be able to hide all of them.

             

            Array[20]

             

            1. 0: "Symbol_1"
            2. 1: "Symbol_2"
            3. 2: "Symbol_3"
            4. 3: "Symbol_4"
            5. 4: "Symbol_5"
            6. 5: "Symbol_6"
            7. 6: "Symbol_7"
            8. 7: "Symbol_8"
            9. 8: "Symbol_9"
            10. 9: "Symbol_10"
            11. 10: "Symbol_11"
            12. 11: "Symbol_12"
            13. 12: "Symbol_13"
            14. 13: "Symbol_14"
            15. 14: "Symbol_15"
            16. 15: "Symbol_16"
            17. 16: "Symbol_17"
            18. 17: "Symbol_18"
            19. 18: "Symbol_19"
            20. 19: "Symbol_20"
            21. length: 20
            22. myArr
            23. 17
            24. this is working
            25. 17
            • 3. Re: Display one div at a time from an array?
              elainecc Adobe Employee

              Hi, bettiesac212-

               

              The immediate thing I noticed is that you're trying to pass in myArrs (which is a variable set in variable space, not in local space).  Try this:

               

              // this will iterate through each one of your symbol instances and will hide them

              for (var i=0; i < 20; i++) {

                 sym.$(div[i]).hide();

              }

               

              -Elaine

              • 4. Re: Display one div at a time from an array?
                bettiesac212 Level 1

                HI Elaine,

                 

                That doesn't work. The problem is I can't call the symbols or the array. Adobe.com/devnet-docs/edgeanimate/api/current/index.html told me to create an array like this:

                 

                var arr = new Array("foo","bar","baz");

                sym.setVariable("myArr", arr);

                 

                As you saw in my last post, I tried this:

                 

                var arr = new Array( 'Symbol_1', 'Symbol_2', 'Symbol_3', 'Symbol_4', 'Symbol_5', 'Symbol_6', 'Symbol_7', 'Symbol_8', 'Symbol_9', 'Symbol_10', 'Symbol_11', 'Symbol_12', 'Symbol_13', 'Symbol_14', 'Symbol_15', 'Symbol_16', 'Symbol_17', 'Symbol_18', 'Symbol_19', 'Symbol_20' );

                 

                sym.setVariable("divs", arr);     // console.log( divs ) returns an error

                var divs = arr;                           // console.log( divs ) works

                 

                Here is my new code. I still cannot get anything to hide. At this point that is all I want so I am at least interacting with the symbols.

                 

                var arr = new Array( 'Symbol_1', 'Symbol_2', 'Symbol_3', 'Symbol_4', 'Symbol_5', 'Symbol_6', 'Symbol_7', 'Symbol_8', 'Symbol_9', 'Symbol_10', 'Symbol_11', 'Symbol_12', 'Symbol_13', 'Symbol_14', 'Symbol_15', 'Symbol_16', 'Symbol_17', 'Symbol_18', 'Symbol_19', 'Symbol_20' );

                 

                var random = Math.floor(Math.random() * 100) % 20;

                 

                console.log( arr );

                console.log( random );

                 

                function getQuestion() {

                 

                )

                                    sym.$("arr").hide();                         //   doesn't work

                                    console.log('this is working');         //   works

                                    console.log('id=%d', random);       //   works

                 

                      }

                 

                getQuestion();

                • 5. Re: Display one div at a time from an array?
                  resdesign Adobe Community Professional & MVP

                  var arr = ['Symbol_1Copy0','Symbol_1Copy1','Symbol_1Copy2','Symbol_1Copy3','Symbol_1Copy4'];

                  var myVar = Math.floor((Math.random()*6)+1);

                  for (i=myVar;i<arr.length;i++){

                  sym.$(arr[i]).hide();

                  }

                   

                  here is the file sample:

                  https://www.box.com/s/70pdgpl4u1anzaudnfsy

                  • 6. Re: Display one div at a time from an array?
                    bettiesac212 Level 1

                    Redesign, that doesn't work either. Your file sample has not hidden the array or any of your symbols.

                     

                    Elaine's answer above is nowhere close to correct, despite the fact that someone marked it as so.

                    • 7. Re: Display one div at a time from an array?
                      resdesign Adobe Community Professional & MVP

                      Strange. When I play it, it hides at random. I also made one which changes colors and the color changes on reload.

                       

                      https://www.box.com/s/o9udua9nb0n89un8pwst

                       

                      See here: load 1 has 3 rectangles with random colors.

                       

                       

                      6-13-2013 12-28-04 PM.png

                      load 2:

                      6-13-2013 12-28-33 PM.png

                      • 8. Re: Display one div at a time from an array?
                        elainecc Adobe Employee

                        bettiesac212-

                         

                        I've created a sample that demonstrates how my code works.  Here's a really simple file that will allow you to hide all of the symbols at the beginning and reveal them one by one as you click on the buttons, or reveal them all.

                         

                        https://creative.adobe.com/share/606f2efb-289d-412c-8057-66cef8dddea9

                         

                        -Elaine

                        • 9. Re: Display one div at a time from an array?
                          bettiesac212 Level 1

                          Elaine,

                           

                          That worked as far as hiding them! Thank you!

                           

                          Any idea how I can get the first question to appear randomly?

                           

                          Here is what I have:

                           

                          var arr = ['Symbol_1', 'Symbol_2', 'Symbol_3', 'Symbol_4', 'Symbol_5', 'Symbol_6', 'Symbol_7', 'Symbol_8', 'Symbol_9', 'Symbol_10', 'Symbol_11', 'Symbol_12', 'Symbol_13', 'Symbol_14', 'Symbol_15', 'Symbol_16', 'Symbol_17', 'Symbol_18', 'Symbol_19', 'Symbol_20'];

                           

                          sym.setVariable("arr", arr);

                           

                          for (i=0; i<20; i++){

                                    sym.$(arr[i]).hide();

                          }

                           

                          var myVar = Math.floor(Math.random()*100)%arr.length;

                          for (i=myVar;i<arr.length;i++){

                          sym.$(myVar).show();

                          }

                           

                          console.log('id=%d', myVar);

                          • 10. Re: Display one div at a time from an array?
                            resdesign Adobe Community Professional & MVP

                            HI there,

                            You do not need the for loop to show one element of your array after you have randomized it. Just use:

                             

                            var myVar = Math.floor(Math.random()*100)%arr.length;

                            sym.$(arr[myVar]).show();

                             

                             

                            If you wanted to limit your symbols to part of the array, then check out my response to another post here:

                            http://forums.adobe.com/message/5409883#5409883

                            • 11. Re: Display one div at a time from an array?
                              bettiesac212 Level 1

                              That worked perfectly Redesign. Thank you so much!

                               

                              Two quick questions if you don't mind, then I'll be on my way

                               

                              1. Why do the showing and hiding lines only work inside a for loop and not a function?

                               

                              2. In what part of the code does jQuery understand to correlate each symbol in the array with the random number, rather then just independently returning an integer?

                               

                              Those were the two things messing me up the most.

                               

                              Thanks again!!

                              • 12. Re: Display one div at a time from an array?
                                resdesign Adobe Community Professional & MVP

                                I suppose you could write a function too. I think this is just a matter of preference. But you do have to iterate between all the symbol on way or another.

                                I am not sure I understand the second question.

                                myVar is returning a random number and displays the corresponding symbol in the array.

                                • 13. Re: Display one div at a time from an array?
                                  bettiesac212 Level 1

                                  When I write it as a function, all the questions appear at once. However, as soon as I move those same lines inside a for loop, they work. I basically just switch this line

                                   

                                  for (i=0; i<20; i++){  //works

                                   

                                  to this

                                   

                                  function getQuestion () {  //doesn't work

                                   

                                  As for the second question, what I don't understand is how myVar knows to pull from the array rather than just return a random number. What part of the code is telling it to correspond with the array?

                                  • 14. Re: Display one div at a time from an array?
                                    resdesign Adobe Community Professional & MVP

                                    Can you post or PM me the code for the function?

                                    Here is a response to another post that may help you as far as to how the question would be handled.

                                     

                                    var originalArray=['one','two','three','four','five','six','seven','eight ','nine','ten'];

                                    originalArray.sort(function() {return 0.5 - Math.random()});

                                    originalArray.length =4;

                                    i=0;

                                    sym.$('Text').click(function(){

                                     

                                     

                                              // shows one of the 4 elements on each click

                                              sym.$('Text').html(originalArray[i]);

                                                        i++;

                                    });

                                     

                                     

                                    1. the elements in the original array are shuffled
                                    2. Then the array is limited to 4
                                    3. Then we iterate from the suffled and limited array

                                     

                                    Let's say the questions we originally

                                    1,2,3,4,5,6,7,8,9,10

                                    now they are

                                    10,8,3,1,6,4,2,5,7,9

                                    you only allow

                                    10,8,3,1

                                    you go through each question

                                    10

                                    8

                                    3

                                    1

                                    • 15. Re: Display one div at a time from an array?
                                      bettiesac212 Level 1

                                      Here is my code in the compositionReady panel:

                                      var arr = ['Symbol_1', 'Symbol_2', 'Symbol_3', 'Symbol_4', 'Symbol_5', 'Symbol_6', 'Symbol_7', 'Symbol_8', 'Symbol_9', 'Symbol_10', 'Symbol_11', 'Symbol_12', 'Symbol_13', 'Symbol_14', 'Symbol_15', 'Symbol_16', 'Symbol_17', 'Symbol_18', 'Symbol_19', 'Symbol_20'];

                                       

                                      sym.setVariable("arr", arr);

                                       

                                      arr.sort(function() {return 0.5 - Math.random()});

                                      arr.length = 20;

                                       

                                      var ques = Math.floor(Math.random()*100)%arr.length;

                                       

                                      for (i=0; i<20; i++){

                                                sym.$(arr[i]).hide();

                                                sym.$(arr[ques]).show();

                                      }

                                       

                                      • 16. Re: Display one div at a time from an array?
                                        bettiesac212 Level 1

                                        I understand how this line works.

                                         

                                        var ques = Math.floor(Math.random()*100)%arr.length;

                                         

                                        What I don't understand is how it knows to return a symbol in the array rather than just a random number between 1 and 20.

                                        • 17. Re: Display one div at a time from an array?
                                          resdesign Adobe Community Professional & MVP

                                          This is exactly what it is doing.

                                           

                                          The following line returns a random number:

                                          var ques = Math.floor(Math.random()*100)%arr.length;

                                           

                                          This line gets the number and gets the symbol

                                          sym.$(arr[ques]).show();

                                           

                                          for example if the first line return 6

                                          then

                                          the last line gets

                                          sym.$(arr[6]).show();

                                           

                                          Note that in your code since your variable in this line is ques then this is the only one it returns while the other line to hide goes through the variable i from 0 to 19.

                                          • 18. Re: Display one div at a time from an array?
                                            bettiesac212 Level 1

                                            Thank you. That part is clear now. It helps me so much when I can actually understand what I wasn't getting at first.

                                             

                                            Any idea on the function vs. for loop situation?

                                            • 19. Re: Display one div at a time from an array?
                                              resdesign Adobe Community Professional & MVP

                                              Can you post the whole function?

                                              • 20. Re: Display one div at a time from an array?
                                                bettiesac212 Level 1

                                                for (i=0; i<20; i++){

                                                          sym.$(arr[i]).hide();

                                                          sym.$(arr[ques]).show();

                                                  }

                                                //this works

                                                 

                                                function getQuestion(){

                                                  sym.$(arr[i]).hide();

                                                  sym.$(arr[ques]).show();

                                                  }

                                                 

                                                getQuestion();

                                                // but this doesn't

                                                • 21. Re: Display one div at a time from an array?
                                                  resdesign Adobe Community Professional & MVP

                                                  Not sure but try this:

                                                  function getQuestion(){

                                                       for (i=0; i<20; i++){

                                                            sym.$(arr[i]).hide();         

                                                        }

                                                       sym.$(arr[ques]).show();

                                                    }

                                                   

                                                  getQuestion();

                                                  • 22. Re: Display one div at a time from an array?
                                                    bettiesac212 Level 1

                                                    Nope. Shows every question at once.

                                                    • 23. Re: Display one div at a time from an array?
                                                      resdesign Adobe Community Professional & MVP

                                                      Sorry. I think you need to keep the for loop to hide() by itself because when you load the composition it just goes through each symbol and hides it.

                                                       

                                                       

                                                      How are you showing your questions after that? Is it a click event?

                                                      • 24. Re: Display one div at a time from an array?
                                                        bettiesac212 Level 1

                                                        It seems weird to not be able to hide an array, but maybe since arrays refer to their individual items rather than the whole group itself, so I guess it kind of makes sense.

                                                         

                                                        Yes, after that I am going to bring up the next question on a click event of the right answer. Haha... do you have any insight there or should I just post another question if (more like when) I run into trouble?

                                                        • 26. Re: Display one div at a time from an array?
                                                          bettiesac212 Level 1

                                                          Thanks Redesign. So inside each question symbol I have this code for the correct answer. When the user clicks on the right answer I want the next randomized question to appear. I am calling the for loop again, but when I click on the right answer nothing happens.

                                                           

                                                          Here is my code for the right answer, followed by one example of a worng answer.

                                                           

                                                           

                                                          Symbol.bindElementAction(compId, symbolName, "${_d1}", "click", function(sym, e) {

                                                             sym.getComposition().getStage().getSymbol("correct1").play();

                                                             sym.getComposition().getStage().getSymbol("try_again1").deleteSymbol(); 

                                                          for (i=0; i<20; i++){

                                                                                sym.getComposition().getStage().$(arr[i]).hide();

                                                                                sym.getComposition().getStage().$(arr[ques++]).show();

                                                          }

                                                          });

                                                           

                                                          //Edge binding end

                                                           

                                                          Symbol.bindElementAction(compId, symbolName, "${_e1}", "click", function(sym, e) {

                                                             sym.getComposition().getStage().getSymbol("try_again1").play();

                                                                       $('sym').on('click',function(){

                                                             sym.getSymbol("try_again1").deleteSymbol(); 

                                                          })

                                                          });

                                                           

                                                          //Edge binding end