Locked lesson.

Upgrade

About this lesson

Let's create a fill-out form to enter our answers.

Exercise files

Download this lesson’s related exercise files.

Create the Fill-Out Form.docx
59.3 KB Create the Fill-Out Form - Solution.docx
59.3 KB

Quick reference

Create the Fill-Out Form

Let's generate some random numbers and create a fill-out form.

When to use

We'll need to generate random numbers every time the app runs.

Instructions

To create a random number with JavaScript (between 1 and 10):

document.write(Math.floor(Math.random() * 10) + 1);

Our program so far looks like this:

<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;
        </script>
    </head>

    <body>
        
        <h1>Addition Flashcards</h1>
        
        <h1>
            <script>
                document.write(number1 + " + " + number2);
            </script>
        </h1>
        
        <input id="answer">
        <button type="button">Submit Answer</button>
        <button type="button">Next Card</button>
       
    </body>
</html>

Hints & tips

  • Random numbers are a little harder in JavaScript than in other programming languages
  • document.write(Math.floor(Math.random() * 10) + 1);
Login to download
  • 00:05 In this video we're gonna start building our math flashcard app.
  • 00:07 So let's start off by coming over here and right clicking on this and
  • 00:10 creating a new file.
  • 00:11 Let's just start out with a nice new file, let's call it addition.html.
  • 00:17 And if we open this, i'm just gonna paste in a very basic sort of HTML framework.
  • 00:22 And save this, and if we come back here and
  • 00:24 reload this addition, okay we've got nothing here so far.
  • 00:27 Next, we need to generate some random numbers.
  • 00:29 Now, every programming language generates random numbers a little bit differently,
  • 00:33 and JavaScript actually makes it a little bit more complicated that most
  • 00:36 other languages.
  • 00:37 But it's still not too bad and we'll learn very quickly how to do that, so
  • 00:40 to do this we'll use a math function, a built-in JavaScript math function.
  • 00:44 And it's called math.random, and that's all we do.
  • 00:47 So if we, actually, let's create a quick little script and
  • 00:51 I'll just sort of walk you through this, if we go document.write
  • 00:57 like we always have, Save this, come back here and hit reload.
  • 01:01 See we get these really weird long decimal number and that's not great.
  • 01:04 It doesn't help us all that much.
  • 01:06 We need to make these as a whole number.
  • 01:07 So we, right off the bat, we can multiply these by ten.
  • 01:11 So we just come down here and use our math like we have before.
  • 01:15 If we save this, come back here and hit reload.
  • 01:17 Okay, it's looking a little better but it's still got all these weird decimals.
  • 01:20 It's still not quite a whole number.
  • 01:21 So what can we do?
  • 01:23 Well, there's another function called math.floor.
  • 01:26 And that finds, basically it rounds a number to the nearest whole number.
  • 01:30 To do that we just wrap this whole thing in parentheses.
  • 01:35 And then outside of it we just call math.floor.
  • 01:39 If we save this, come back and hit reload, so now we get 2.
  • 01:42 But let's go ahead and hit reload, we got 0 there.
  • 01:44 Hit reload, reload, 5, 9, 6.
  • 01:47 Zero, maybe we don't want zero.
  • 01:49 Maybe you do, maybe you don't care it's fine.
  • 01:51 But if you don't want zero we need to do one more thing.
  • 01:53 We just add one.
  • 01:55 So whatever the answer is, it's gonna be at least between one and ten.
  • 01:59 Now, could be ten, could be one, could be anything between.
  • 02:02 So now we have one, three, eight, ten, five.
  • 02:05 We are good to go. I'll put this code in the resource file so
  • 02:07 you can copy and paste it.
  • 02:09 It's kind of complicated but it's not too bad.
  • 02:10 A lot of other programming languages you would just call like math.random and
  • 02:14 it would give you a normal number.
  • 02:15 But JavaScript does it just a little bit differently.
  • 02:17 So looking back at our list that we created in the last video,
  • 02:21 we need two random numbers.
  • 02:23 So we need to do this twice.
  • 02:24 And we really ought to slap these into variables so we can do stuff with them.
  • 02:28 But I'm just gonna call one var number1 =, and then I copy this.
  • 02:34 And I'm gonna call another one var number2 =.
  • 02:38 And let's go ahead and just move all these.
  • 02:40 Well, actually first, let's get rid of the document.write.
  • 02:44 Take that off, 'cause we don't wanna write this out onto the screen.
  • 02:47 We just wanna slap them in the variables.
  • 02:49 And also, let's take this script here.
  • 02:52 Copy it, delete it and bring it up here to our head section.
  • 02:55 'Cause we want this to happen as soon as the page loads.
  • 02:57 We wanna have our random numbers set.
  • 02:58 And there's gonna be some other things later on that we wanna do.
  • 03:01 And I'm gonna go ahead and wrap this back in parenthesis for
  • 03:06 good measure just to keep all this stuff together.
  • 03:09 So our list says we need to output these to the screen.
  • 03:11 So, I'm just gonna copy this in here.
  • 03:15 And I've just document.write-ed the number plus the addition sign,
  • 03:18 'cause we're on the addition page.
  • 03:20 If we save this, come back here and hit reload, we have, 9 + 10.
  • 03:23 Hit reload again, 4 + 2.
  • 03:24 Everytime we hit reload we get a new number.
  • 03:26 So that looks good.
  • 03:27 Now, we need a form with an input field.
  • 03:30 I'm just going to, okay.
  • 03:32 So we have an input with an ID of answer and a Submit button and
  • 03:36 a Next Card button.
  • 03:37 Save that, we've done all this stuff in the past, in past videos and
  • 03:40 form validation and stuff, so this is pretty simple.
  • 03:43 Finally, we need to figure out what the correct answer is supposed to be.
  • 03:45 So up here I'm gonna create another var, I'm gonna call it correct answer.
  • 03:48 And we just do number1 plus number2.
  • 03:50 Now let's take this correct answer, and bring it down here real quick, and just
  • 03:59 Slap it in there and save it, just so we can make sure everything is looking good.
  • 04:04 And actually I'm going to put an equal to sign.
  • 04:10 1 + 8 = 9, 2 + 1 = 3, 5 + 6 = 11.
  • 04:15 Definitely, everything is working correctly, so let's go ahead and
  • 04:18 delete that 'cause we don't wanna keep that on there.
  • 04:20 We're pretty good to go here, we're pretty far through our list already, and
  • 04:24 it's been pretty simple, pretty straightforward.
  • 04:25 In the next video we'll pick up and start working on the logic behind the scenes.

Lesson notes are only available for subscribers.

Gift this course