Locked lesson.

Upgrade

About this lesson

How to output the answers to the screen.

Exercise files

Download this lesson’s related exercise files.

Output the Result.docx
59.6 KB Output the Result - Solution.docx
60.5 KB

Quick reference

Output the Result

Let's check our user answer against the correct answer and output the result.

When to use

Whenever a user submits their answer, we need to check the answer against the correct answer.

Instructions

Let's take a look at our final code:

<html>
    <head>
        <title>Addition Flashcards</title>
        <script>
            var number1 = Math.floor((Math.random() * 10) + 1);
            var number2 = Math.floor((Math.random() * 10) + 1);
            var correctAnswer = number1 + number2;
            var output;
        </script>
    </head>

    <body>
        
        <h1>Addition Flashcards</h1>
        
        <h1 id="numbers">
            <script>
                document.write(number1 + " + " + number2);
            </script>
        </h1>
        
        <input id="answer">
        <button type="button" onclick="userAnswer();">Submit Answer</button>
        <button type="button" onclick="nextCard();">Next Card</button>
        <p id="output"></p>
        
       <script>
            function userAnswer(){
                var userAnswer = document.getElementById("answer").value;
                
                if (isNaN(userAnswer)) {output = "Hey! That's not a number, try again!";} else {
                    
                    if (userAnswer == correctAnswer) {output = "Correct! " + number1 + " + " + number2 + " = " + correctAnswer;} else {output = "Wrong! " + number1 + " + " + number2 + " is not " + userAnswer;}
                }
        
                document.getElementById("output").innerHTML = output;
            }
            
            
            function nextCard(){
                document.getElementById("output").innerHTML = "";
                document.getElementById("answer").value = "";
                
                number1 = Math.floor((Math.random() * 10) + 1);
                number2 = Math.floor((Math.random() * 10) + 1);
                correctAnswer = number1 + number2;
                document.getElementById("numbers").innerHTML = (number1 + " + " + number2); 
            
        }
            
        </script>
    </body>
</html>

Hints & tips

  • Checking the user's answer seems like a job for an If/Else statement!
Login to download
  • 00:04 Okay, so we can enter an answer and check to make sure it's a number.
  • 00:08 Now it's time to determine whether or not the answer is correct or not.
  • 00:11 So we already have the correct answer sitting in a variable.
  • 00:14 We set that a couple of videos ago.
  • 00:15 And that variable is this correctAnswer.
  • 00:18 So the only thing to do is whip up a quick comparison, If/Else statement,
  • 00:22 to check our correctAnswer against the userAnswer and
  • 00:25 then output a message to our output variable.
  • 00:27 So first let's change this bit of code around from the last video so
  • 00:31 that it doesn't continue to output our userAnswer to the output variable.
  • 00:36 Back here when we're checking if it's a number or not, this Else statement.
  • 00:39 So I'm just gonna delete that, actually.
  • 00:42 And actually, what I'm gonna do is I'm gonna tab this down.
  • 00:44 And this is where we're gonna do our next bit of logic.
  • 00:47 Let's do our If statement here.
  • 00:49 To run back through this, if the thing is not a number, we'll output this,
  • 00:53 hey, it's not a number.
  • 00:54 If it is a number, then we're gonna do this stuff.
  • 00:57 And this is just another basic If statement.
  • 01:00 If our userAnswer equals, remember the == comparison operator,
  • 01:04 if it is equal to, if it is the same as the correct answer, then output correct.
  • 01:09 Otherwise, output wrong, try again.
  • 01:11 So let's save this and just do a quick check here.
  • 01:14 Hit reload, 7 plus 1 is 5.
  • 01:16 Wrong, try again, 7 plus 1 is 8, correct.
  • 01:20 We hit reload, 4 plus 6 is 10, correct.
  • 01:23 So it seems to be working, but this is kinda lame.
  • 01:26 It just says correct or wrong.
  • 01:27 So I'm gonna spruce this up a little bit.
  • 01:30 I'm just gonna paste this in here.
  • 01:31 And let's look and see what I did here.
  • 01:33 So same format, same everything, I just changed the output message a little bit.
  • 01:36 So now, it says correct, and then, number one plus number two equals number three.
  • 01:41 Or false, wrong, number one plus number two is not userAnswer.
  • 01:47 And you can, we save this, you can play around with this and have it however you want.
  • 01:50 So 44 wrong, 8 + 3 is not 44.
  • 01:54 8+3 is what?
  • 01:56 11?
  • 01:57 Correct. 8+3 =11.
  • 01:59 So you can change this around however you want,
  • 02:01 you cannot add the correct answer as you don't wanna show them the correct answer.
  • 02:05 If you wanna say wrong, try again.
  • 02:07 Don't put the correct answer on there, but
  • 02:09 what every gonna do is kinda play around with it.
  • 02:11 And now all we need to do is to fix our next card,
  • 02:14 this button doesn't do anything yet.
  • 02:16 Let's create, and on click function for the button called nextCard, and
  • 02:21 I'm just gonna come up here and just go on, onclick.
  • 02:23 equals nextCard, save this.
  • 02:28 And to create this little function, I'm just gonna come down to our current
  • 02:33 bit of code and just tab down a little bit.
  • 02:36 And paste this next function in, it's just a nextCard function, and all I've done here
  • 02:42 is taken our output, and our answer our innerHTML and the value and switched it to nothing.
  • 02:48 So if we say this come back here, and hit reload, we type in some stuff,
  • 02:51 now if we put this nextCard - boom it just erases those two things.
  • 02:55 Next, let's add in some stuff to generate a couple of new random numbers and
  • 02:59 output them to the screen.
  • 03:00 And first, let's come up back to our h1 tag for where our numbers go.
  • 03:04 And I'm just gonna create an ID here and let's call this numbers.
  • 03:09 So that way we can manipulate this down here programatically.
  • 03:14 We still have our first two lines of code.
  • 03:15 And what I did here is I just came up here on the top and
  • 03:18 copied all of this stuff and came down here and pasted it in.
  • 03:21 So we have our var number1, var number2 and our correctAnswer.
  • 03:25 And then I'm just printing them out onto the screen the same way that we did before
  • 03:29 except I'm using this getElementsById, and we've done this so
  • 03:32 many times in this course, it's old hat.
  • 03:34 If we save this, come back here and hit reload, we type in some stuff,
  • 03:39 click submit answer.
  • 03:40 Now, if we click the next card, boom, we get two new things, and it seems to work.
  • 03:45 18, submit answer.
  • 03:49 Nope, something went wrong.
  • 03:50 So, what happened here?
  • 03:51 Well, when I pasted this code from up here I initialize these variables again.
  • 03:57 And we don't need to initialize them a second time because
  • 04:00 they've already been initialized.
  • 04:01 So, now if we save this, come back here and hit reload, 5 plus 10 is 15, correct.
  • 04:07 Next answer, 9 Correct.
  • 04:10 Do it again, 44, wrong.
  • 04:12 So, okay, everything seems to be working.
  • 04:14 Basically, we're done with this thing.
  • 04:15 It was just that quick and easy and boom we're done.
  • 04:17 But it only works for addition.
  • 04:19 We need to actually create subtraction, multiplication, and division.
  • 04:22 What we're gonna do is we're gonna create pages for each of them.
  • 04:24 We created this addition page, we'll create a subtraction page, and
  • 04:28 multiplication page, etc.
  • 04:29 And we'll go ahead and do that in the next video.

Lesson notes are only available for subscribers.

Gift this course