Within this lesson, we're going to create our interaction with our button, so using the button object,
we're adding an event listener.
The event that we're listening for is click and then we're going to just invoke an anonymous function
and have all of our game logic happening in here.
We need to also set up some additional variables.
And the one that we need is we need to provide some answers.
So this is our answer array, all of the answers that we could possibly provide to the player.
It's going to be contained within here.
So it will work.
And you have to create some vague answers, maybe, maybe not, as these are going to be randomly generated
responses and they have to make sense, depending on what type of question was asked.
So probably not.
And it's going to uppercase that highly likely.
So I used the single code in there.
So if you are using single quotes in your array, just make sure that you backslash it so that you're
not breaking out of your array items.
So next we have our question.
We need to get that input information that the user put in and we can use that.
So using console question and instead of the entire text, it's going to be value because this is an
input field.
So let's test that out.
And we can see that whatever we've asked, we're seeing into the console.
So that is exactly what we need as we can output that back to the player.
So once they've made that selection, we have to randomly generate an answer and we can use random math,
random in JavaScript in order to do that.
So let's generate our response.
So just call it Arias for response using math flaw and then the math random method in JavaScript in
order to generate a random number and then multiply it by the number of items.
So in this case, we've got our answer array and we can use the length value from there.
So that's more dynamic.
So in case we add in more answers, we don't have to update any of the code.
And usually that's the way you want to try to build out your code to utilize it so that it's dynamic
so you don't have to worry about that if you updated your array that you have to go down here and update
some some of your code and make it as dynamic as possible the first time around as you're building it
out.
So let's try that out now.
So we've got our console and output, that response information.
So let's refresh try that one more time.
So now we're getting one zero four three.
So on.
So we are getting a random value and we can use this from our answer array to return back one of the
items.
So usually the response value as an index within the array, we're going to see some type of responses.
So I don't know, highly likely.
Do you like JavaScript?
We're going to ask that and maybe maybe not.
So that's going to be the response.
So now the next step is to output it to the person interacting with the content.
You can put in the message area or you could generate a new message area.
So add that in underneath.
So it's up to you.
We could actually potentially just get rid of that message area there and use the message class down
below so that we always are saying, ask your question, so let's do that.
And now we're going to be outputting a message below.
So update that message in a text of that message and then output our answer array value using that random
index value that we created.
So let's try that out.
So test usque highly likely is the response and one other thing that we do need to do.
So notice that within the question value, there's still a value sitting in there.
So usually what you want to do is you want to blank that value so you could just set that value to be
blank and you're going to see that now whatever is input in here, once we provide that response, provide
that question, that one disappears so that value will disappear.
We output it here below.
And then we have our computer response for that.
So go ahead and complete this application and we'll just do a quick run through of what we've set up
in the earlier lessons.
So we came into our application.
We built out our HTML.
Next, we use JavaScript to create objects of those HTML elements.
We also set up our array, adding an event listener to the button.
And then within this added response, we generated a random value that we can use as an index value
from the answer array using the length of that array, and then we simply return back the value of the
initial question.
And also the response for that question and also keep in mind that we're using question value here,
so we make sure that you're clearing out the question value below using it.
If you put this one in front, then you're not going to have any value for the question value because
you're going to have already cleared that out.
So keep that in mind.
Build out your own version of the application, try it out for yourself.
Get comfortable with using JavaScript.