Instructor: So, I hope that you took the time
and completed the coding challenge and made the quiz work.
Now if you wanna see my solution, then, here it goes.
So let's start with step number one
and build our function constructor down here.
So, function Question, and as we already saw,
what we need as inputs here is the question,
the answers, and the correct answer, right?
So I'm simply giving it this name.
So, question, answers, and the correct.
Alright and now this is how
the function constructor pattern works.
So we set everything that we input into this constructor
on the disvariable of this function, right?
So this.question is question and we input this.answers
the same and the same for correct.
Alright and that's it, that's our function constructor.
So let's now use it and create a couple of questions.
So var question one is a new question and in here
I'm going to ask first a question, so I'm going to go
with the ones that I showed you in the demo.
So Is JavaScript the coolest programming language
in the world?
So that's the first argument.
Then the second argument are the possible answers.
And I'm going to choose to use an array for this.
Because that allows us very nicely to store all
of the different options in one single variable.
So in here we only have two different options which is yes
and no.
Okay and a third one is a correct answer and that is number
zero, so remember an index is zero based and that's why
I'm going with this zero based correct numbers here as well.
So the first one is zero, and the second one is one,
and so on.
And with this, we created our first question.
Now, remember why that works.
It works because the new operator here creates a new
empty object, then it calls the question function
and sets the disvariable of this function to the new
empty object that was just created.
And therefore when we then set all of these properties
off to this variable, these will be assigned
to the disvariable of the new object.
And that new object will then be stored here in the q1,
the variable right, or as you already know actually
that the q1 variable will hold a reference to the spot
in memory where the object hits and then we can of course
use our newly created object.
So let's now create another one.
So question two, so the second one was what's the name
of this course's, and remember I have to do it like this,
so I need to Escape this symbol so that JavaScript
doesn't think that it's the end of the string,
teacher and now the answer is.
So John, Michael, or Jonas.
And as you can see we can have different numbers of answers.
So here we had two, here we have three, and in the next
question, we're actually going to have four.
Okay and in here, the correct answer will be number one
obviously, right?
Because the index is zero based and so this last one here
is zero, one, two.
Alright and let's create a third question.
So var q3, and now what does best describe coding?
So is it boring, or is it hard, or fun, or maybe tedious.
And I would say that it's number two, so it's really fun.
So zero, one and two.
Alright so we just created three questions.
And that should be enough for now of course you can add
more to make it more interesting.
But just to show it, it is enough.
Now number three and four is to store them in array
and then select one random question.
So let's say questions is of course q1, q2, and q3.
Alright and now we need to retrieve a random question
from this array.
And so the first thing is to create a random number
which we can then use to take the question.
So we want the number between zero and two right?
So zero, one, or two should be the number of this random
question, now in case that you have more questions,
of course the number will be higher.
And so we need to write code that gives us a random number
between zero and the number of questions that we have.
So let's do that and I'm going to call this number
a simply n okay.
And as we did before we're going to use the Math.random
method which remember returns a number between zero
and one.
But we don't want between zero and one, but between zero
and the length of our array.
And so we need to multiply it to make it a bigger number.
And we multiply it by the length of the questions array.
So length.
So now we just need to use the Math.floor method
such as before to remove the decimals from this number
because remember this will give us something like this.
So that's it in a console, okay of course it doesn't work
like this, so let's say we noted the length of three, right?
So let's simply do it like this.
So this is going to give us a number between zero and three.
Like this, right?
And so we want to simply cut out these decimal parts here.
And that's exactly what the Math.floor method does.
And this way our number will always be nicely
between zero and two.
Okay so now writing questions n will give us
a random question.
Now all we need is a way to display this question
in a console, right?
And so as I mentioned before I'm going to use a method
for that.
And so we're going to use the concepts of prototypes
and prototype chain to write this method.
Because I should not write this method right here
into this object, right?
Because then all of these three questions would have
this method attached to them.
And that would not be ideal.
So remember what we discussed in lectures before.
And so what we talked about in lectures before is to write
the method into the questions prototype property,
which is the prototype of all of the instances so if all
of the objects created through it.
So of q1, q2, and q3.
And it worked like this, so question.prototype
and now the name of the method and this one is going
to be simply displayQuestion.
And the first thing of course is to display the question,
so console.log and this.question.
So when this method will be called on q1, then the cue
words here will of course point to q1.
And then the question associated to q1 will be retrieved.
If we call it on q2, then the cue words here points to q2.
And of course the same thing with q3.
So that's the cool thing about the prototype chain
that this method is not actually attached to one of these
questions, but it's in their prototype.
And so all of these objects can access it
through the prototype chain.
Okay so this displays the question, now we need to display
the answers.
And since we have multiple answers and we also don't know
how many these are, so in some cases we have two,
and here three, and here even four, we need to loop
through all of these answers and display each of them.
So we're going to use a four loop for that.
So var i equals zero, and then i will be incremented
until we reach the length of the answers.length.
Okay so we did this a lot of times before, and i++.
So imagine that there are two answers, then the length
will be two and so this will run when i is zero
and when i is one.
And then when it's two, this condition here no longer
holds true and then the loop stops.
And so in here what we're going to do is to console.log
each of the answers.
So this.answers and then we're going to retrieve
in each iteration the corresponding answer.
But actually we not only want the answer, but also
the number and so for that we're going to use this i
counter variable.
So it's going to be zero and one in this case.
So we want this then we want to add a colon and a space
and then the actual answer, okay?
So this should already work, so let's test this out.
So with this here, we already retrieved the random question
now all we need to do is to call the display method on it.
To displayQuestion, actually I need to call it.
And so now it's time to test this.
And we have a (mumbles) in line 335.
But it's no problem, let's see what it is.
Yes of course, the assignment operator is missing.
And another one, and yes of course that's because I'm still
missing here the function keyword.
Okay so this was totally missing of course.
You probably saw it coming already.
And again another error here, now it should work.
So the question is already here, so is JavaScript
the coolest programming language.
But the answers are missing here.
So something is wrong in here.
And so the problem is here.
I misspelled this one.
And now here we are.
So yes and no.
So let's reload this and yeah it works
for the other questions as well.
So here are our three random questions.
And let's check out the next step.
So now we use the prompt function to ask the user
for the correct answer.
So we're simply going to do var answer and then remember
this prompt, a function that I showed you right
in the beginning.
All it does is to open like a popup window where the user
can input something and what they pass in here is simply
the string that will be the question that we want
the user to see.
So please select the correct answer.
So let's test this.
And we say zero.
So now of course nothing happens because we didn't get code
the part that validates the answer, right?
But before we do that let me show you something,
so I will just log the answer here.
So answer and what you see now is that this is actually
a string right?
If it would be a number it would look like this.
So it's blue and it doesn't have of course these quotes.
So this is really a string and not a number.
But the correct answer that we have here in our questions
are of course numbers and that's what we're going
to compare the user's answer with and so therefore
this also has to be a number and not a string.
So what we can do is to use the JavaScript built-in function
called parsInt, so parsInt.
And this simply converts a string to a number,
to an integer number.
So parseInt actually with e.
Now let's see this again.
So number two, and let me check the answer here again.
And now you see it's a number so it no longer has these
quotes and it's displayed here in the blue color.
And now to check the answer if it's correct we are going
to write another method here into the prototype.
So Question.prototype.checkAnswer.
So what should we do here?
It's actually very simple, all we need to do is to compare
the answer that the user gives with our correct answer.
And so we need to actually pass in this answer
into this method.
So let's simply call it ans, okay.
And then in here we just need an if else statement.
So if the answer from the user is the same,
then our correct answer.
There we console.log Correct answer.
And if it's not, then we simply log Wrong answer, Try again.
And that's it.
So now all we need to do is to call this method down here.
So again we use our question that we are working on
and that is questions(n) and then we use checkAnswer
and pass in the answer from our user which is stored
in this answer variable.
We could of course have stored this here in a separate
variable because we're using it here and then again here,
but let's just leave it this way right here for now.
And now this is actually all we have to do to make this work
so let's test it out.
So is it the coolest programming language?
Yes it is.
And that's the correct answer, cool.
And the same question and again the same question,
what's going on here.
And now we have a different one.
So what does best describe coding?
It's fun and correct.
Just to try another answer here.
Now it's wrong.
Alright so let me see the tasks up here actually.
So we completed all of them except number seven.
And this one tells us that we should give our code
a privacy so that it doesn't interfere
with other programmer's code.
So what did you learn in this section to do exactly that?
That's correct, we're going to use an immediately invoked
function expression.
And it's really simply we just have to do, function
just like this.
And then invoke the function at the end.
And this creates a new scope in which we define all
of this that we did here.
And then at the end the function is simply executed.
And so if now someone else includes this code in his own
project and also has a variable called question
or a variable called n or answer, then that one
will not interfere with our code.
So our code is always safe because no other code is ever
going to override it.
And that's the main goal if using an (mumbles) like this.
So this is really a great use case to show you how important
this can be.
Let's just test it again to see if it still works,
and yeah of course it does.
So that was the first basic level of our quiz,
now in the next lecture I'm going to show you the solution
for the expert level quiz.
So stay tuned for that.