1
00:00:00,150 --> 00:00:05,250
Within this lesson, we're going to create our interaction with our button, so using the button object,

2
00:00:05,430 --> 00:00:06,720
we're adding an event listener.

3
00:00:06,900 --> 00:00:11,610
The event that we're listening for is click and then we're going to just invoke an anonymous function

4
00:00:11,700 --> 00:00:14,810
and have all of our game logic happening in here.

5
00:00:15,180 --> 00:00:18,000
We need to also set up some additional variables.

6
00:00:18,240 --> 00:00:21,790
And the one that we need is we need to provide some answers.

7
00:00:22,080 --> 00:00:28,950
So this is our answer array, all of the answers that we could possibly provide to the player.

8
00:00:29,100 --> 00:00:30,740
It's going to be contained within here.

9
00:00:31,530 --> 00:00:33,420
So it will work.

10
00:00:34,770 --> 00:00:42,720
And you have to create some vague answers, maybe, maybe not, as these are going to be randomly generated

11
00:00:42,720 --> 00:00:48,230
responses and they have to make sense, depending on what type of question was asked.

12
00:00:48,540 --> 00:00:50,180
So probably not.

13
00:00:50,190 --> 00:00:53,450
And it's going to uppercase that highly likely.

14
00:00:53,460 --> 00:00:55,620
So I used the single code in there.

15
00:00:55,860 --> 00:01:03,450
So if you are using single quotes in your array, just make sure that you backslash it so that you're

16
00:01:03,450 --> 00:01:05,840
not breaking out of your array items.

17
00:01:06,810 --> 00:01:09,030
So next we have our question.

18
00:01:09,030 --> 00:01:14,360
We need to get that input information that the user put in and we can use that.

19
00:01:15,300 --> 00:01:21,330
So using console question and instead of the entire text, it's going to be value because this is an

20
00:01:21,330 --> 00:01:22,020
input field.

21
00:01:22,680 --> 00:01:24,000
So let's test that out.

22
00:01:24,450 --> 00:01:29,010
And we can see that whatever we've asked, we're seeing into the console.

23
00:01:29,610 --> 00:01:35,370
So that is exactly what we need as we can output that back to the player.

24
00:01:35,400 --> 00:01:42,960
So once they've made that selection, we have to randomly generate an answer and we can use random math,

25
00:01:42,960 --> 00:01:45,840
random in JavaScript in order to do that.

26
00:01:46,080 --> 00:01:48,230
So let's generate our response.

27
00:01:48,660 --> 00:01:59,100
So just call it Arias for response using math flaw and then the math random method in JavaScript in

28
00:01:59,100 --> 00:02:04,590
order to generate a random number and then multiply it by the number of items.

29
00:02:04,770 --> 00:02:09,570
So in this case, we've got our answer array and we can use the length value from there.

30
00:02:10,260 --> 00:02:11,670
So that's more dynamic.

31
00:02:11,820 --> 00:02:15,450
So in case we add in more answers, we don't have to update any of the code.

32
00:02:15,630 --> 00:02:20,880
And usually that's the way you want to try to build out your code to utilize it so that it's dynamic

33
00:02:21,060 --> 00:02:25,680
so you don't have to worry about that if you updated your array that you have to go down here and update

34
00:02:25,830 --> 00:02:32,220
some some of your code and make it as dynamic as possible the first time around as you're building it

35
00:02:32,220 --> 00:02:32,430
out.

36
00:02:33,030 --> 00:02:34,790
So let's try that out now.

37
00:02:34,800 --> 00:02:39,270
So we've got our console and output, that response information.

38
00:02:39,510 --> 00:02:41,550
So let's refresh try that one more time.

39
00:02:41,910 --> 00:02:44,820
So now we're getting one zero four three.

40
00:02:44,850 --> 00:02:45,350
So on.

41
00:02:45,360 --> 00:02:51,990
So we are getting a random value and we can use this from our answer array to return back one of the

42
00:02:52,200 --> 00:02:52,640
items.

43
00:02:52,920 --> 00:02:59,730
So usually the response value as an index within the array, we're going to see some type of responses.

44
00:02:59,880 --> 00:03:02,000
So I don't know, highly likely.

45
00:03:03,210 --> 00:03:05,750
Do you like JavaScript?

46
00:03:06,780 --> 00:03:10,000
We're going to ask that and maybe maybe not.

47
00:03:10,020 --> 00:03:11,290
So that's going to be the response.

48
00:03:11,580 --> 00:03:16,530
So now the next step is to output it to the person interacting with the content.

49
00:03:16,710 --> 00:03:20,420
You can put in the message area or you could generate a new message area.

50
00:03:20,430 --> 00:03:21,960
So add that in underneath.

51
00:03:22,260 --> 00:03:23,040
So it's up to you.

52
00:03:23,580 --> 00:03:29,880
We could actually potentially just get rid of that message area there and use the message class down

53
00:03:29,880 --> 00:03:35,490
below so that we always are saying, ask your question, so let's do that.

54
00:03:35,490 --> 00:03:38,740
And now we're going to be outputting a message below.

55
00:03:38,790 --> 00:03:49,350
So update that message in a text of that message and then output our answer array value using that random

56
00:03:49,350 --> 00:03:50,620
index value that we created.

57
00:03:50,640 --> 00:03:51,510
So let's try that out.

58
00:03:51,960 --> 00:03:57,990
So test usque highly likely is the response and one other thing that we do need to do.

59
00:03:58,530 --> 00:04:02,840
So notice that within the question value, there's still a value sitting in there.

60
00:04:03,120 --> 00:04:08,400
So usually what you want to do is you want to blank that value so you could just set that value to be

61
00:04:08,400 --> 00:04:15,090
blank and you're going to see that now whatever is input in here, once we provide that response, provide

62
00:04:15,090 --> 00:04:19,670
that question, that one disappears so that value will disappear.

63
00:04:19,710 --> 00:04:21,150
We output it here below.

64
00:04:21,150 --> 00:04:24,070
And then we have our computer response for that.

65
00:04:24,510 --> 00:04:29,940
So go ahead and complete this application and we'll just do a quick run through of what we've set up

66
00:04:29,940 --> 00:04:30,990
in the earlier lessons.

67
00:04:31,320 --> 00:04:33,360
So we came into our application.

68
00:04:33,540 --> 00:04:35,050
We built out our HTML.

69
00:04:35,400 --> 00:04:40,340
Next, we use JavaScript to create objects of those HTML elements.

70
00:04:40,620 --> 00:04:44,850
We also set up our array, adding an event listener to the button.

71
00:04:45,150 --> 00:04:51,840
And then within this added response, we generated a random value that we can use as an index value

72
00:04:51,840 --> 00:04:58,920
from the answer array using the length of that array, and then we simply return back the value of the

73
00:04:58,920 --> 00:04:59,940
initial question.

74
00:05:00,310 --> 00:05:07,210
And also the response for that question and also keep in mind that we're using question value here,

75
00:05:07,360 --> 00:05:13,090
so we make sure that you're clearing out the question value below using it.

76
00:05:13,240 --> 00:05:18,040
If you put this one in front, then you're not going to have any value for the question value because

77
00:05:18,040 --> 00:05:19,680
you're going to have already cleared that out.

78
00:05:19,900 --> 00:05:21,010
So keep that in mind.

79
00:05:21,220 --> 00:05:24,220
Build out your own version of the application, try it out for yourself.

80
00:05:24,340 --> 00:05:26,050
Get comfortable with using JavaScript.