Okay so next step we are going to try to display a question 1
and below that four answers okay so the good answers and 2
the false answers and so you can try to do it by yourself 3
okay you can try to display the question the radio group be 4
below and when we click on one element in the radio group 5
we're just going to move to the next question okay and that's 6
it so you can pause the video and try to do that by yourself 7
and by the way you're going to notice that sometimes the 8
question or some of the answers have weird special characters 9
in in them that make them impossible to read, it's fine, we're 10
going to fix that after, okay? So just try to do the question 11
and the answers and try to go to the next question when you 12
click on one radio element, okay? So the first thing we 13
need is to have access to the current element, okay? So we're 14
going to create a state that is going to contain the first quiz 15
item. And we're going to make this quiz item change as we 16
click on a radio element. So we will have a current quiz item 17
index. We're going to start the index only. No need to store 18
all quiz item because we can find it using the index. So I 19
will ask set current quiz. Oh set current quiz item index. 20
useState by default we're going to be on the first index 21
so the zero and this is going to be a number. Now using this 22
index we can now find the correct quiz item so we'll have 23
quiz item or maybe current quiz item that is going to be 24
calculated from this so anytime this is going to render well 25
this is going to be recalculated so it's going to 26
be P dot quiz and we're going to find what is at the current 27
quiz item index and we could even write that this is of type 28
quiz item. Now we will also need to display the answers. So 29
we have an array of three invalid answers and one correct 30
answer. Okay? So for now they will always be displayed in the 31
same order. So obviously it's way too easy because it's 32
always going to be the first one that is the right answer. 33
So later we will shuffle the array. Okay? So we're going to 34
have the available answers that are going to be an array 35
containing the current quiz item correct answer and also 36
the current quiz item that incorrect answers like this 37
okay and so this is just an array of string okay so 38
technically here we have all the data that we need to 39
display everything so now bit of styling so we need to add a 40
flex here 41
so we're going to make everything in column and we're 42
going to align everything so align items center and justify 43
center so we'll add the title again so it will be a heading 44
we'll have font size I'm going to put three XL so it's pretty 45
big and a margin top 100 a margin bottom twenty and here 46
we're going to display the question so the question should 47
be in current item dot a dot question like this and now 48
we should be good now we're just going to display all the 49
possible answers so we're going to use a radio group again and 50
and and so in the radio group we'll have value so for now I'm 51
going to put nothing and we'll have an onChange okay and 52
again we're going to do that later or actually no we could 53
already do this one we're just going to move to the next 54
question so that's pretty easy technically if we change the 55
current quiz item and increase it by one while the current 56
quiz item is going to change and everything is going to 57
change so we could just do set create quiz index and just 58
increase the current quiz item index and add one and don't do 59
plus plus okay otherwise it's going to plus plus is going to 60
try to mutate directly this so make sure to write plus one 61
okay and now we're going to display the list of questions 62
so we're going to use again a simple grid a simple grid of 63
two columns and we use spacing of four and here we to create a 64
radio list and so we're going to create right here so radio 65
lists Well radio list is going to be made out of all the 66
available answers. So we're going to map over them. So this 67
is an available answer. That is a string and it has to be 68
between parenthesis because these are the function 69
arguments. And we are going to return a radio that will have a 70
key that can be the answer for example in the middle so the 71
text will be well the available answer and then then well the 72
value the value can be the available answer as well and 73
I'm going to import that okay so let's try this so let's say 74
I have fifteen question in sport set quiz difficulty I'm 75
going to set mixed and yeah it's working fine so we can 76
click and technically when we're going to click well it 77
should go to the next question and yes it seems that it's 78
working and as you can see we have the issue I talk about at 79
the beginning of the video so the weird characters okay we're 80
going to fix that right after yes as you can see again here 81
and so this is because of the API it's returning some accent 82
etcetera under the form of HTML so we'll have to basically use 83
a very specific thing okay well actually we can could do it 84
right now we could fix that so you have to use something that 85
seems weird and it is and it is because of the name and it's 86
dangerously set inner HTML okay so in our case we don't have 87
the choice because the API is returning HTML but it shouldn't 88
okay it should have been processed on the back end but 89
since it was not well we're going to have to inject 90
directly the HTML in in there so instead of displaying it 91
right here okay we're going to make it not a closing tag 92
and this way if this contain HTML this will be able to 93
transform it into real text and by the way you have to 94
explicitly tell that this is HTML using two underscore like 95
this so obviously you cannot know that you have to read the 96
documentation okay so when you want to inject HTML directly 97
you can do it like this and actually we're going to do the 98
same for the answers because the answers can also have weird 99
characters so we're going to do the exact Same thing but for 100
the radio here and we're just going to set inside the 101
available answer. And we're going to make it an autoclosing 102
tag again. And remove all of that. And now we shouldn't have 103
anymore issues let's see science easy mixed and ooch 104
it's not working oh yes this is because radio doesn't work like 105
that it doesn't support this so we will have to use 106
here and inside we're going to put that and make sure to 107
really import it from chakra. And ta-da, it's now working. 108
Okay and no weird characters. Great. So ability at the end is 109
going to crash because we're going to exceed the maximum 110
size of the array. But that's fine we're going to fix that 111
later. Okay so as you can see it's crashing. That's all 112
right. We're going to fix that after. So see you in the next 113
one to continue.