All right, so we have defined the answer and also compare it to the correct answer.
And now we are going to display an instant answer, which will show us if the answer is correct or not.
For that, we are going to create a new method in EUA controller.
Let's call it new design.
And assign to it anonymous function.
This function will hold two parameters, the first one will be as a result.
Actually, this parameter will be the boolean value, true or false, which we should get from check
as a function.
And as for the second parameter, I'm going to pass your selected answer, which actually will be clicked
option.
OK, that's in dysfunction, go to control the module and inside if statements, right, you are controller
dot, new design.
As we mentioned, we need to pursue as a first argument, boolean value from check as a function.
Let's, of course, create new variable and store invocation of check as a function in that variable,
let's call it as a result.
Then pass this variable as a first argument into new design function.
And then as a second argument, we have to pass your chosen option, so that's right.
And so.
Depending on an answer.
I mean, if it was correct or not, we need to change the style of instant answer accordingly.
So, for example, if answer was correct, we need to make instant as a green.
And in case of wrong answer, we need to make it red.
All right.
The first thing that we want to do is to disable Cui's options.
Rapper after clicking on option for that, we need to use some CSI styles.
So right.
Dom items that quiz options rapper.
Dog style.
Let's use your case as tax property, which allows us to use several style properties.
We want to make with options rapper a little bit transparent, therefore I'm going to use oppositely
property with a value zero point six.
And also, after clicking on option, we want to disable entire quiz options repr for that, we have
to write poetry events.
With the value none.
Let's go to Browsr without.
Then click and you see that options rapper is a bit transparent and also it's disabled.
OK, so at the same time we want to display Sheather instant as a container.
But before we do that, at first I'm going to select dimensioned elements.
Let's go to index dot extremophile.
We have here development with klus name instant as a container, let's copy it.
Then go to items object.
Create new property and call it instant answer container.
Then selected right documents, Dot.
Quarrie Selecter.
And place here, last name isn't as a container.
All right, let's go back to new design function and make it as a visible for that, let's try to dump
items.
That is the answer.
Container.
That style and use here oppositely.
With the value one, let's go again to broader than.
Check the answer and you see that instant answer is displayed, but without any style, and the text
is also from Actimel document as a default.
As we said on clicking, sir, we will have two possible options, the answer might be correct or wrong.
Therefore, according to the answer, we need to sell instant answer.
For that, I'm going to create an object.
Let's declare variable and call it two options.
Then assign to this variable object.
So in case of correct answer, we need the text.
This is a correct answer, and if it's wrong, then we need this is a wrong answer.
According to that, let's create property and call it instant answer text.
Then assigned to this property area and in that area, I'm going to insert two items.
As a first one for wrong answer, that's right, this is a wrong answer.
And as the second item.
Right.
This is a correct answer.
All right, so for instance, or text, we have two possible options, and now I'm going to select elements
which will contain the relevant text.
Let's take a look on index file again.
Here we have elements which has I'd attribute instant subtext.
Let's call it.
Then go to items, objects and create new property.
Let's call it is the subtext.
That selected right documents that gets elements by ID.
And paste your ID instant and so text.
After that, let's go to new design function and for demonstration purposes, let's assign to instant
subtext, first array item from two options object right dom items dot.
Instant and text.
And use your text property.
Equals to two options, dot instant asset text.
And you here, the first item there, ferritin, square brackets, zero.
All right, let's go to Browsr.
And click on Wrong Answer.
You said that text is changed and we have this is a wrong answer.
Let's reload once again and click on correct answer.
And you see that we have again, this is a wrong answer, of course, tax is not change because we have
manually indicated the first item from a right.
All right.
In order to fix that, we can use a little trick.
Let's declare a new variable.
Which will be index.
Then as a default assigned to it, zero.
And instead of zero right here in square brackets index.
So if the answer is wrong, then this should work.
But if answer is correct, then we need to change the value of index into one.
For that, we need to create enough statement and as a condition, I'm going to pass your answer result.
Because this will be boolean value, which will define if the answer is correct or not.
So if it's true answer there is correct.
Therefore, we need to change the value of index into one.
All right, let's go to Browsr again.
Reload.
Then check, correct answer and see that this is a correct answer.
Then click on the wrong answer and we have relevant text.
This is a wrong answer.
All right, perfect.
In the same way we need to change other elements, the next we are going to change the color of instant
answer.
But at first, let's go to a stream of documents.
So here we have development with instant and it's a repr.
Actually, we want to change the background color of this, and so let's copy the attributes then in
items, object creates new property with the name Instant and so Dave.
Let's select these elements, documents that gets element by ID.
And paste your instant as a wrapper.
All right, so in order to change the background color of deep elements, I'm going to assign to a new
class name.
If you take a look on style, those cases file, you will find that in advance.
I have created styles for class names, red and green, so I'm going to use those class names.
Let's create new property into options, objects, let's call it instant as reclass.
Then assigned to its array and as a first item for wrong answer, place your red.
And for correct answer, right, the second item as Corine.
Then select instant asset development and assigned to each new class, name the right items Dot.
Is Steve.
The last name.
Equals to two options, dot instant asset class.
And then in Square Rockets, right index.
OK, let's go to Browsr then at first click on Correct Answer.
So you see that background is great and we have text, this is a correct answer.
Then if we click on a wrong answer, we'll get an instant answer with a red background and with a text.
This is a wrong answer.
All right, fine.
You might notice that in both cases we have your happy smile icon.
So we need to make it changeable dynamically.
Let us once again take a look on index file.
Here we have an image element which has two attributes, ID, emotion and also source attributes.
Here is indicated the directory of image as a default.
We have your happy smile icon, but in images folder there is also said Smile Icon.
So we need to change those cycles properly on correct and wrong answers as first we need to select these
elements, let's call it emotion, then go to items, object and add new property.
Let's call it emotion icon.
And selected through a document that gets element by ergy.
And paste your emotion.
As we said, we have two options, happy and sad smile icons, let's create new property in two options.
Object and call it.
Emotion type then assigned to it again every.
As a first item for wrong, as the right value of source attributes.
Imagists.
Flesche said that PNG.
And then as a second item four, correct answer, right images slash.
Happy that Poggi.
All right, so in order to change the attribute of an element, we have Domme method called set attribute.
Let's select emotion icon elements, right, dom items dot.
Emotion, Eichel, and I'm going to use your set attribute method.
It holds two parameters as a first parameter, we need to place name of the attribute, which is source
in our case.
And as second parameter, we need to indicate the value of those attribute, which will be two options.
That emotion type.
And then index in square brackets.
All right, let's check again if this works, go to Browsr.
That click on correct answer.
So we have happy smile here.
Then click on the wrong answer and you see that smile is changed and became said.
All right, we're almost done.
The only thing that we have to do is to change background color of SP1 elements.
I mean, to change the background color of characters, ABCDE, let's check once again a stream of documents.
Our panel is placed as previous element sibling for paragraph, so let's use this mentioned dumb property,
go back to scripter Jaspal.
You know that we have here in new design function, second parameter selected answer, which actually
represents paragraph elements.
So let's use this parameter.
Right, selected answer.
Then use down property, previous elements, eyeblink.
That old style.
And writes your background color.
And now it's time to create new property into options object, let's call it.
Options span playground.
Right here, big.
And assigned to it again, Ouray.
And as a first item for romancer, I'm going to place a value which actually will be red color right
here, two hundred, then zero zero.
And the oppositely point seven.
Then for a correct answer, right?
Second item, which will be green collar, white archabbey a.
Zero.
Two hundred and fifty.
Zero and.
Points to.
All right, let's assign to spend elements two options, Dot.
Options plan.
Background.
And then index.
OK, so this was last up in this video.
Let's check once again if it works, go to Browsr Revolt.
Click on correct answer and you see that Belgrano became green.
And if we click on the wrong answer, then it will become red.
All right, fine, that's it.
We have stalled elements nicely according to correct and wrong answers.
I hope that you really like it.
And also I appreciate that you are still with me in this advanced little bit difficult, but really
interesting and fun part of this course.
Keep trying your best to keep learning.
See you in the next video.