In this lesson, we're going to continue to build the quiz and we already have it that we have a start
game and then we output the question and the questions have a number of options.
So we need to still apply some styling to these options.
And right now, the order is always going to be the same, that the last answer is going to be the correct
one.
So we want to use some JavaScript in order to randomize the order and shift the order of the options
within the array so that when we're outputting them, that they're actually randomise and we're going
to be using array method.
So using the array sort method and what sort method does it allows us to sort elements of an array in
place and then it returns the sorted array.
So that means that because we are using an array, it's not going to actually we don't have to have
a new variable.
We don't have to have anything else.
It's going to reorganize the options list here within the array.
So making it a random while, it's going to be random.
Right now, we're just going to use the sort and then we'll add in to the sort of an option for random
return.
So let's see what that looks like right now and going into where we're creating the new question.
And as we're loading the options, we want to reorganize the option list.
So let's do that right off the bat where we've got the new question and we're pulling in the element
object of the question.
And this is going to be the element options array.
And for that array, if we do a sort, what will happen is that this will sort the order of the options.
And right now nothing has changed because we haven't randomize the sort order yet.
So it's still always outputting at the end.
So let's go and take a deeper look into what we can do with it.
So the default sort of automatically sorts the arrays from if they have values from the alphabetically
and also numerically.
So it counts them as string values and we'll sort them accordingly.
There's also what's known as the COMPAR function within the sort.
So this is an optional parameter.
That is a function that returns of the sort order.
So does a comparison between the first element and the second element comparison.
They've got some more details at the Mozilla Developer Network about it.
And essentially what it does is that the sorts, the array in place.
So it's not making a copy of the array, it's just sorting it in place.
And they've got some options here for compare functions.
So if A and B is in the compare function, but we return less than zero than the sort A of the index,
lower than B and B returns zero and returns it unchanged.
If it returns that zero that returns greater than zero, then B index is lower than the first one and
it just changes the sort order.
So basically to summarize what it's doing here is if it's being returned back as a negative one, then
that's going to affect the short order.
When we do the compare function, if it returns it back as a one, then it's also going to change the
sort order by ordering it according to the criteria.
And if it's zero, then it's just not going to change the order.
So if we have some randomising here, then we can update and we can randomize the way the sort order
works.
So we've got a function within the short order and we're returning back a value.
So it could be either a negative or a positive.
So let's add that in to the sort where we've got the function.
So using the Arrow format and it's returning back and the value that it's returning back can be either
a negative or positive.
So right now we'll just return back value of negative one.
And let's actually use the curly brackets around there for the return and save our suit, that looks
like so refresh, start the game and now you see that what's happened with the order is that blue is
on top.
If we return it back as one, it's going to for the options.
And we need to start the game first to trigger that function.
So blue is now at the bottom.
So depending on whether it's negative or positive, it's changing the sort order.
So if we were to randomize the negative or the positive, then this would give us a randomized sort
order when we're doing the comparison.
So if we do a subtraction of zero point five and we know that with math random.
So if we use math random, the function in JavaScript is going to return back at a random value.
So starting at zero decimal all the way up to all the way up to zero decimal nine nine nine, starting
at zero decimal zero zero zero and a number of digits after that.
So it's basically returning back a random number and decimal placed number.
So if we do subtraction, negative five minus math random, this could either be positive or it can
be negative.
So depending on what we end up.
So there's a few negatives.
So we're doing that comparison function and we're returning back a negative value.
We saw that affects the sort order.
So let's add that in where we're doing minus five minus math random and you don't have to rounded up
or down.
We're just using whatever the random value is because we're subtracting it off of the negative five.
Let's make the smaller.
And we'll clear out the console content and Head Start, and now we've got blue as the second slot,
blue as the second slot again, and it's making it random.
So there it was at the end.
So Blue can show up in any one of the slots.
And that's what we ultimately want it to do by structuring the options within an array so that we can
easily randomize where we're outputting those options onto the page.
So also, let's add in some styling into the project.
So where we've got within the HTML file, we could just add in the in there I'll get a class of box
and this will be for the options.
So let's display them as in line block items.
Give it some padding around, sir, but we do some five pics of padding.
And add in a border and just do a very slight border and also round slightly the border to do a little
bit of rounding.
What this looks like and then we'll go back and adjust the styling.
So let's add.
That to the d'Hiv, so as we selected d'Hiv Options and using class list and adding the class of box
to the element, so that gives us more of kind of like a clickable type button.
Let's also adjust the.
Curser and selected as a pointer, and we'll do a margin.
So top and bottom zero, and we'll do 10 picks for the left, right and left, so that will add some
spacing between them.
Maybe that's a little bit too much.
And let's set the minimum width to 100 pics so that they're all roughly the same and we can also text
a line and let's center line the text so we've got all of our options there.
And, of course, we need to still style the question.
So now they look more like clickable options.
And within the box, let's add the hover effect.
So whenever we're hovering over the selection.
We can update the background color, so now making the selections as we hover over them and if we make
it wider, let's also add in some styling into the question.
So save that and where we're creating the question.
So it's under Q1 and list add.
The question, stylin.
So to start the game and let's make a larger font size for this one and also set margin at the bottom
for it, so it's not exactly right on top of the options.
And then, of course, you can style this as needed.
I'm also going to make a few other adjustments to it because I want to capitalize the first letter there
so you can do that with JavaScript or you can select the first letter that were outputting within the
question and just do a capitalization of that first letter.
So this is going to be a string output and then manipulating the string output.
So take the string output's.
And taking the character at so is a strong method where you can select the character.
So taking whatever the first character is and then using the two uppercase.
And I'm just going to reset the string output to be whatever the new string output is, if we just take
the first character to uppercase, let's update the output and then we need to add in the rest of the
question and let's double check and see what we've got for our string output.
So looks like we're throwing an error there.
And that actually should be an hour.
That's why we're throwing the error.
There should be character.
So it's returning back the first character there.
And we want to add in the rest of the string value.
So concatenate to it and taking the string output and using slice.
So we slice out the rest of the string content, just removing the first character.
So we're turning back whatever the rest of the characters are.
So that allows us to capitalize that.
And also we can add in questionmark at the end as well.
So returning back the string output and here it's just concatenate a question mark to it and that should
be actually a plus.
So so that looks like so that looks like we've got Cui's options.
And coming up next, we want to introduce the next step in this that we're going to load the next question.
So once the user makes a selection, we're going to set it to either right or wrong and then depending
on what was selected.
We can either do a green or red background to indicate that they got it right or wrong and then also
show the button for the next question, if there is another question.
So that's all still coming up in the next lesson.
Thanks for this lesson is to randomize the order of the options so you can use the same format that
I did with the array prototype, using the sort and the comparison and then randomize the comparison
to return back either a positive or a negative result, and that will update and sort their array in
place.
Also, apply some styling to make it look nice.
So whatever the content is, that's being output.
So we want to present it to the user in a nice format.
So you can also uppercase the question as well as the question mark at the end and then make the buttons
so that you can click them and also that they look more like buttons for the options and also make sure
that the quiz is working as expected.
So apply any styling or debugging as needed into your code and you could be ready to move on to the
next lesson.
We're going to be continuing to work on the application to create the interaction for the next question.