Display one div at a time from an array?

Question

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.

Answer 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] 
0: "Symbol_1"
1: "Symbol_2"
2: "Symbol_3"
3: "Symbol_4"
4: "Symbol_5"
5: "Symbol_6"
6: "Symbol_7"
7: "Symbol_8"
8: "Symbol_9"
9: "Symbol_10"
10: "Symbol_11"
11: "Symbol_12"
12: "Symbol_13"
13: "Symbol_14"
14: "Symbol_15"
15: "Symbol_16"
16: "Symbol_17"
17: "Symbol_18"
18: "Symbol_19"
19: "Symbol_20"
length: 20
myArr
17
this is working
17