1 00:00:00,330 --> 00:00:05,550 In this lesson, we're going to continue to build the quiz and we already have it that we have a start 2 00:00:05,550 --> 00:00:10,950 game and then we output the question and the questions have a number of options. 3 00:00:11,160 --> 00:00:14,010 So we need to still apply some styling to these options. 4 00:00:14,220 --> 00:00:19,290 And right now, the order is always going to be the same, that the last answer is going to be the correct 5 00:00:19,290 --> 00:00:19,510 one. 6 00:00:19,770 --> 00:00:25,920 So we want to use some JavaScript in order to randomize the order and shift the order of the options 7 00:00:25,920 --> 00:00:31,500 within the array so that when we're outputting them, that they're actually randomise and we're going 8 00:00:31,500 --> 00:00:34,640 to be using array method. 9 00:00:35,070 --> 00:00:41,970 So using the array sort method and what sort method does it allows us to sort elements of an array in 10 00:00:41,970 --> 00:00:44,770 place and then it returns the sorted array. 11 00:00:45,060 --> 00:00:51,150 So that means that because we are using an array, it's not going to actually we don't have to have 12 00:00:51,150 --> 00:00:51,990 a new variable. 13 00:00:51,990 --> 00:00:53,360 We don't have to have anything else. 14 00:00:53,490 --> 00:00:58,580 It's going to reorganize the options list here within the array. 15 00:00:58,600 --> 00:01:02,610 So making it a random while, it's going to be random. 16 00:01:03,000 --> 00:01:08,400 Right now, we're just going to use the sort and then we'll add in to the sort of an option for random 17 00:01:08,400 --> 00:01:08,970 return. 18 00:01:09,240 --> 00:01:14,250 So let's see what that looks like right now and going into where we're creating the new question. 19 00:01:14,490 --> 00:01:20,250 And as we're loading the options, we want to reorganize the option list. 20 00:01:20,520 --> 00:01:28,380 So let's do that right off the bat where we've got the new question and we're pulling in the element 21 00:01:28,380 --> 00:01:29,910 object of the question. 22 00:01:30,210 --> 00:01:33,630 And this is going to be the element options array. 23 00:01:33,990 --> 00:01:42,330 And for that array, if we do a sort, what will happen is that this will sort the order of the options. 24 00:01:42,810 --> 00:01:48,030 And right now nothing has changed because we haven't randomize the sort order yet. 25 00:01:48,030 --> 00:01:50,330 So it's still always outputting at the end. 26 00:01:51,570 --> 00:01:55,520 So let's go and take a deeper look into what we can do with it. 27 00:01:55,770 --> 00:02:04,290 So the default sort of automatically sorts the arrays from if they have values from the alphabetically 28 00:02:04,500 --> 00:02:05,970 and also numerically. 29 00:02:06,120 --> 00:02:09,670 So it counts them as string values and we'll sort them accordingly. 30 00:02:09,960 --> 00:02:14,550 There's also what's known as the COMPAR function within the sort. 31 00:02:14,580 --> 00:02:16,410 So this is an optional parameter. 32 00:02:16,650 --> 00:02:20,970 That is a function that returns of the sort order. 33 00:02:20,970 --> 00:02:25,410 So does a comparison between the first element and the second element comparison. 34 00:02:25,630 --> 00:02:28,590 They've got some more details at the Mozilla Developer Network about it. 35 00:02:28,830 --> 00:02:33,540 And essentially what it does is that the sorts, the array in place. 36 00:02:33,750 --> 00:02:36,930 So it's not making a copy of the array, it's just sorting it in place. 37 00:02:37,170 --> 00:02:40,670 And they've got some options here for compare functions. 38 00:02:40,670 --> 00:02:48,300 So if A and B is in the compare function, but we return less than zero than the sort A of the index, 39 00:02:48,300 --> 00:02:54,540 lower than B and B returns zero and returns it unchanged. 40 00:02:54,720 --> 00:03:03,530 If it returns that zero that returns greater than zero, then B index is lower than the first one and 41 00:03:03,540 --> 00:03:04,940 it just changes the sort order. 42 00:03:05,190 --> 00:03:13,020 So basically to summarize what it's doing here is if it's being returned back as a negative one, then 43 00:03:13,020 --> 00:03:14,880 that's going to affect the short order. 44 00:03:14,880 --> 00:03:21,060 When we do the compare function, if it returns it back as a one, then it's also going to change the 45 00:03:21,060 --> 00:03:24,690 sort order by ordering it according to the criteria. 46 00:03:24,900 --> 00:03:27,950 And if it's zero, then it's just not going to change the order. 47 00:03:28,170 --> 00:03:34,860 So if we have some randomising here, then we can update and we can randomize the way the sort order 48 00:03:34,860 --> 00:03:35,330 works. 49 00:03:35,580 --> 00:03:40,650 So we've got a function within the short order and we're returning back a value. 50 00:03:40,650 --> 00:03:43,170 So it could be either a negative or a positive. 51 00:03:43,470 --> 00:03:48,450 So let's add that in to the sort where we've got the function. 52 00:03:48,480 --> 00:03:56,970 So using the Arrow format and it's returning back and the value that it's returning back can be either 53 00:03:56,970 --> 00:03:58,160 a negative or positive. 54 00:03:58,230 --> 00:04:02,280 So right now we'll just return back value of negative one. 55 00:04:04,860 --> 00:04:12,210 And let's actually use the curly brackets around there for the return and save our suit, that looks 56 00:04:12,210 --> 00:04:21,240 like so refresh, start the game and now you see that what's happened with the order is that blue is 57 00:04:21,240 --> 00:04:22,020 on top. 58 00:04:22,290 --> 00:04:28,800 If we return it back as one, it's going to for the options. 59 00:04:29,010 --> 00:04:32,620 And we need to start the game first to trigger that function. 60 00:04:32,730 --> 00:04:34,300 So blue is now at the bottom. 61 00:04:34,320 --> 00:04:38,990 So depending on whether it's negative or positive, it's changing the sort order. 62 00:04:39,420 --> 00:04:47,070 So if we were to randomize the negative or the positive, then this would give us a randomized sort 63 00:04:47,070 --> 00:04:48,950 order when we're doing the comparison. 64 00:04:49,350 --> 00:04:56,440 So if we do a subtraction of zero point five and we know that with math random. 65 00:04:57,600 --> 00:05:05,890 So if we use math random, the function in JavaScript is going to return back at a random value. 66 00:05:06,300 --> 00:05:14,250 So starting at zero decimal all the way up to all the way up to zero decimal nine nine nine, starting 67 00:05:14,250 --> 00:05:17,930 at zero decimal zero zero zero and a number of digits after that. 68 00:05:17,940 --> 00:05:23,650 So it's basically returning back a random number and decimal placed number. 69 00:05:23,940 --> 00:05:37,260 So if we do subtraction, negative five minus math random, this could either be positive or it can 70 00:05:37,260 --> 00:05:38,250 be negative. 71 00:05:38,760 --> 00:05:40,670 So depending on what we end up. 72 00:05:40,680 --> 00:05:41,940 So there's a few negatives. 73 00:05:42,930 --> 00:05:47,550 So we're doing that comparison function and we're returning back a negative value. 74 00:05:47,580 --> 00:05:49,260 We saw that affects the sort order. 75 00:05:49,530 --> 00:05:57,750 So let's add that in where we're doing minus five minus math random and you don't have to rounded up 76 00:05:57,750 --> 00:05:58,190 or down. 77 00:05:58,200 --> 00:06:04,590 We're just using whatever the random value is because we're subtracting it off of the negative five. 78 00:06:05,010 --> 00:06:06,180 Let's make the smaller. 79 00:06:08,880 --> 00:06:16,320 And we'll clear out the console content and Head Start, and now we've got blue as the second slot, 80 00:06:16,320 --> 00:06:21,410 blue as the second slot again, and it's making it random. 81 00:06:21,420 --> 00:06:22,790 So there it was at the end. 82 00:06:23,400 --> 00:06:26,550 So Blue can show up in any one of the slots. 83 00:06:26,790 --> 00:06:32,190 And that's what we ultimately want it to do by structuring the options within an array so that we can 84 00:06:32,190 --> 00:06:36,320 easily randomize where we're outputting those options onto the page. 85 00:06:36,720 --> 00:06:40,710 So also, let's add in some styling into the project. 86 00:06:41,160 --> 00:06:49,620 So where we've got within the HTML file, we could just add in the in there I'll get a class of box 87 00:06:49,740 --> 00:06:51,540 and this will be for the options. 88 00:06:52,660 --> 00:06:57,520 So let's display them as in line block items. 89 00:06:59,840 --> 00:07:05,210 Give it some padding around, sir, but we do some five pics of padding. 90 00:07:08,940 --> 00:07:21,330 And add in a border and just do a very slight border and also round slightly the border to do a little 91 00:07:21,330 --> 00:07:21,890 bit of rounding. 92 00:07:22,080 --> 00:07:24,980 What this looks like and then we'll go back and adjust the styling. 93 00:07:25,320 --> 00:07:26,190 So let's add. 94 00:07:29,400 --> 00:07:41,070 That to the d'Hiv, so as we selected d'Hiv Options and using class list and adding the class of box 95 00:07:41,550 --> 00:07:46,230 to the element, so that gives us more of kind of like a clickable type button. 96 00:07:48,760 --> 00:07:50,590 Let's also adjust the. 97 00:07:53,470 --> 00:07:59,620 Curser and selected as a pointer, and we'll do a margin. 98 00:08:01,850 --> 00:08:08,570 So top and bottom zero, and we'll do 10 picks for the left, right and left, so that will add some 99 00:08:08,570 --> 00:08:09,560 spacing between them. 100 00:08:09,560 --> 00:08:10,820 Maybe that's a little bit too much. 101 00:08:12,500 --> 00:08:21,890 And let's set the minimum width to 100 pics so that they're all roughly the same and we can also text 102 00:08:22,550 --> 00:08:29,590 a line and let's center line the text so we've got all of our options there. 103 00:08:29,600 --> 00:08:32,250 And, of course, we need to still style the question. 104 00:08:33,200 --> 00:08:36,140 So now they look more like clickable options. 105 00:08:36,680 --> 00:08:40,340 And within the box, let's add the hover effect. 106 00:08:40,940 --> 00:08:44,540 So whenever we're hovering over the selection. 107 00:08:48,420 --> 00:08:59,310 We can update the background color, so now making the selections as we hover over them and if we make 108 00:08:59,310 --> 00:09:05,620 it wider, let's also add in some styling into the question. 109 00:09:07,650 --> 00:09:11,930 So save that and where we're creating the question. 110 00:09:12,840 --> 00:09:17,520 So it's under Q1 and list add. 111 00:09:19,440 --> 00:09:21,120 The question, stylin. 112 00:09:23,400 --> 00:09:33,420 So to start the game and let's make a larger font size for this one and also set margin at the bottom 113 00:09:33,570 --> 00:09:39,420 for it, so it's not exactly right on top of the options. 114 00:09:43,400 --> 00:09:45,890 And then, of course, you can style this as needed. 115 00:09:46,010 --> 00:09:51,920 I'm also going to make a few other adjustments to it because I want to capitalize the first letter there 116 00:09:52,400 --> 00:09:58,490 so you can do that with JavaScript or you can select the first letter that were outputting within the 117 00:09:58,490 --> 00:10:03,590 question and just do a capitalization of that first letter. 118 00:10:07,610 --> 00:10:14,120 So this is going to be a string output and then manipulating the string output. 119 00:10:18,130 --> 00:10:20,090 So take the string output's. 120 00:10:34,560 --> 00:10:41,380 And taking the character at so is a strong method where you can select the character. 121 00:10:41,700 --> 00:10:47,220 So taking whatever the first character is and then using the two uppercase. 122 00:10:51,510 --> 00:10:58,740 And I'm just going to reset the string output to be whatever the new string output is, if we just take 123 00:10:58,740 --> 00:11:03,960 the first character to uppercase, let's update the output and then we need to add in the rest of the 124 00:11:03,960 --> 00:11:08,360 question and let's double check and see what we've got for our string output. 125 00:11:08,400 --> 00:11:10,490 So looks like we're throwing an error there. 126 00:11:10,500 --> 00:11:12,060 And that actually should be an hour. 127 00:11:12,090 --> 00:11:13,190 That's why we're throwing the error. 128 00:11:13,200 --> 00:11:14,370 There should be character. 129 00:11:15,780 --> 00:11:18,840 So it's returning back the first character there. 130 00:11:19,110 --> 00:11:22,830 And we want to add in the rest of the string value. 131 00:11:23,220 --> 00:11:31,260 So concatenate to it and taking the string output and using slice. 132 00:11:31,410 --> 00:11:37,530 So we slice out the rest of the string content, just removing the first character. 133 00:11:37,540 --> 00:11:40,020 So we're turning back whatever the rest of the characters are. 134 00:11:40,170 --> 00:11:42,690 So that allows us to capitalize that. 135 00:11:43,170 --> 00:11:47,350 And also we can add in questionmark at the end as well. 136 00:11:47,940 --> 00:11:56,460 So returning back the string output and here it's just concatenate a question mark to it and that should 137 00:11:56,460 --> 00:11:57,400 be actually a plus. 138 00:11:58,650 --> 00:12:04,200 So so that looks like so that looks like we've got Cui's options. 139 00:12:04,860 --> 00:12:10,120 And coming up next, we want to introduce the next step in this that we're going to load the next question. 140 00:12:10,410 --> 00:12:17,700 So once the user makes a selection, we're going to set it to either right or wrong and then depending 141 00:12:17,700 --> 00:12:19,500 on what was selected. 142 00:12:22,660 --> 00:12:28,870 We can either do a green or red background to indicate that they got it right or wrong and then also 143 00:12:28,870 --> 00:12:32,360 show the button for the next question, if there is another question. 144 00:12:32,830 --> 00:12:35,050 So that's all still coming up in the next lesson. 145 00:12:35,890 --> 00:12:42,970 Thanks for this lesson is to randomize the order of the options so you can use the same format that 146 00:12:42,970 --> 00:12:49,000 I did with the array prototype, using the sort and the comparison and then randomize the comparison 147 00:12:49,000 --> 00:12:55,540 to return back either a positive or a negative result, and that will update and sort their array in 148 00:12:55,540 --> 00:12:55,960 place. 149 00:12:56,170 --> 00:12:58,470 Also, apply some styling to make it look nice. 150 00:12:58,750 --> 00:13:02,080 So whatever the content is, that's being output. 151 00:13:02,530 --> 00:13:04,960 So we want to present it to the user in a nice format. 152 00:13:05,080 --> 00:13:11,410 So you can also uppercase the question as well as the question mark at the end and then make the buttons 153 00:13:11,410 --> 00:13:17,680 so that you can click them and also that they look more like buttons for the options and also make sure 154 00:13:17,680 --> 00:13:19,780 that the quiz is working as expected. 155 00:13:19,960 --> 00:13:25,630 So apply any styling or debugging as needed into your code and you could be ready to move on to the 156 00:13:25,630 --> 00:13:26,290 next lesson. 157 00:13:26,530 --> 00:13:31,530 We're going to be continuing to work on the application to create the interaction for the next question.