How do I use Math.random() on an array of questions?

I tried this attempt but my array is multidimensional, with a few tweaks I got it to print out a random question but it, prints the answers with it. I just want to print random questions.

Can you post your array here? I'd like to see it. I'm not sure if I'd use a multidimensional array for this, but I may be able to get my example working with one.

Okay, check this out - CodePen.

We can use a for loop to access each of the question's choices. As you can see here (var i = 1; i <= 4; i++) we skip 0 (the question) and stop at 4 (the last choice).

We can also use an ordered list, and the type="A" attribute will allow the choices to display appropriately.

A downside to writing questions as arrays is that they aren't extendable. If we had a question with say 5 choices, the code would break. If it will always be four choices, then the code is fine, but it is good practice to plan for the future. Something to maybe play with afterwards.

Now you would need to write the user input and answer checking code.

Let me know if you have any questions or need anymore help!

Sure thing. Don't be afraid to ask for help in the future if you're stuck with something. When you finish your app be sure to post it back here on the forums, we like to see people's projects. :)

Sure.

So say that we have a simple array.

var food = [ 'broccoli', 'apple', 'potato', 'artichoke' ];

We know that to gain access to a specific element in this array, we'll need to use an index number. Since array elements start at 0, broccoli would be 0, apple would be 1, potato would be 2, etc.

console.log(food[0]); // Outputs broccoli
console.log(food[3]); // Outputs artichoke

So then how would we print a random string from the food array? The answer is what you originally assumed, and that is by using the Math.random() method.

var randomFoodIndex= Math.floor(Math.random() * food.length);

This will create a random number, from 0 to the length of the array. In this case, since the array has 4 elements inside of it, the last element is at an index of 3. So randomFoodIndex will create a random number from 0 to 3. Now we can use the variable we stored the random number in to access the food array.

var food = [ 'broccoli', 'apple', 'potato', 'artichoke' ];
var randomFoodIndex= Math.floor(Math.random() * food.length);
console.log(food[randomFoodIndex]); // Outputs the random chosen food string

Since you're working with multidimensional arrays, it would work like this, using the second index -

var food = [ 
['broccoli', 'vegetable'], 
['apple', 'fruit'], 
['potato', 'root vegetable'], 
['artichoke', 'vegetable'] 
];
var randomFoodIndex= Math.floor(Math.random() * food.length);
console.log(food[randomFoodIndex][0]); // Outputs the random chosen food string
console.log(food[randomFoodIndex][1]); // Outputs the food type string

This is how all of the array elements are accessed in the CodePen I provided. Other than that, we use a few loops to check if there are repeats, and more loops to iterated through the question indexes.

Hope this makes sense. Is there anything specific from this that you need help understanding? I can try to explain more in depth if there's a specific step that you're having trouble with.

It's because you're only generating a single random number. That calculation needs to run every time you want a new number.

Try adding this line -

randomQuestionIndex = Math.floor(Math.random() * questions.length);

at the beginning of your renderQuestionsAndAnswer() function. Keep the original declaration of the randomQuestionIndex variable too, don't remove it. You should then see randomization. Of course, this implementation will sometimes run into repeats, i.e. you click on an answer but the next question is the same. You'll need to look at the CodePen I provided to see how I fixed that problem.

I think you misread my previous post. I'm aware you have that already declared, but you'll need to assign a new random number to that variable again, specifically within your renderQuestionsAndAnswer() function.

Try adding this line -

randomQuestionIndex = Math.floor(Math.random() * questions.length);

at the beginning of your renderQuestionsAndAnswer() function.

This will make sure that a new random number is generated every time a new question is loaded, instead of the single time at the beginning of the file.

Looking good so far, though! I think after adding that you'll pretty much have it working like you want it to.

Ah okay, I didn't see the line in the CodePen link you pasted above. If you want, you can post all of the code (preferably through a CodePen link) and I can see what's going on with it.

See here.

Without running random each time, it's only going to be random the first time. I created a function that recalculates random every time one of the choices is clicked, and wrote the function call in the next() function. This could be cleaned up a little bit but this is essentially how it works.

Glad it worked! And no need, just a simple fix. :)

If you can, select one of my answers as "Best Answer" so that other students searching for topics will see that your problem was solved.

Good luck!

questions[random][5] should work.

I tested this on my CodePen.

On line 35 -

test.innerHTML += questions[random][5];

This prints the answer to the matching question.

So you have the right idea, you would write this out as -

if (value === questions[random][5]) {
    correct++;
}

But it is very important that you write this condition above the randomize(); function call, because if you don't then you'll be matching the value to a completely different answer, giving incorrect results. There should be no randomization between the choice click and the condition check.

function next() {
      if (value === questions[random][5]) {
         correct++;
      }
      randomize();
      renderQuestions();
}

You made sure that the if statement is ran before the randomize() function call? You can try to check my CodePen and compare it to yours to see what the issue is. Worst case, post that code again and I'll look at it.

Okay, I see. The issue is that the "value" variable doesn't exist, the value property on your tag doesn't get sent to the next() function.

Ideally, you would write -

test.innerHTML +="<div><button onclick='next('B')' value='B' name='choices'>"+"(b) "+answerB+"</button></div>";

And then write next like -

function next(value) {
      if(value === questions[random][5]) {
        correct++;
      }
      randomize();
      renderQuestions();
}

But it looks like the onclick event doesn't like sending arguments to the function, so it doesn't work.

I would recommend writing the on clicks as JavaScript functions. I highly recommend taking the jQuery course here on Treehouse to learn how to do this, it will do some amazing things for your program and make your life a lot easier!

If you'd like, I could write my own example on how I would go about this. Let me know.