 He's been watching me play Become a Math Swizz. I was having to go at the gold questions there and this is just a quite a simple javascript game I've created to help my son with his bronze, silver and gold badges at his school. They had these bronze, silver and gold badges and you can obtain one by showing competence in the relevant, you know, times table, times tables that relate to that badge. So he's got the bronze one, which is the two, five and ten times table. It's quite a leap up in difficulty for silver. It's two, three, four, five, six, eight and ten times tables plus their division facts. So you've got to be able to divide as well. I'll get to the code in a minute, but I'm not going to labour the point on this one. It's written in HTML with CSS for the styling and JavaScript runs everything. It's on one page, one index.html file and the JavaScript is also included in that page. The CSS is in a separate CSS file because it was getting a little chunky. I probably should have put the JavaScript in a separate one too, but whatever, I didn't. So you can see here we've got a slight gradient from blue to white. We've got this nice big chunky font that's transparent with an animated gift behind it with some stars and whatnot just to add to the kind of wizardry theme, if you like. This choose a badge to practice just makes it a bit more interesting having a shadow and having an animation with a shadow showing it bounce, kind of a wave pattern. And then we've got the three containers here with a bit of box shadowing to make it look a bit more interesting and three very small image files so the page loads dead quick. And then whenever you click something, there's no load time at all, just already there. The JavaScript just deals with hiding and modifying what's on the other page. So let's go for silver right in the middle there. So as soon as you click that, the page is cleared and the heading at the top changes to a solid silver text. How many questions would you like? 336 or 50? I'll explain in a sec why there's so many questions and that's why I put the option of just 50 and 50 is plenty. Even still you don't have to do all 50, so let's just choose 50 and we can see the page changes again. Heading is still the same, but now I've got question one of 50 because I chose 50. Questions nice and big and bold here. Then we've got kind of a calculator style input with hover over effects on the buttons and some coloring and a kind of blocky standard looking font for the calculator. So something that might be a bit more familiar to people, certainly my son would use a calculator interface. Yeah, and especially if you're using it on a touch screen device, it makes inputting the numbers easier. So here we go. You can can't enter nothing. It won't it won't progress if you don't put something in there. So let's do a few of these questions and press enter. Yeah, you get a ding when you get something right and you can see here whatever you click just gets inserted into the calculator screen here. DL delete the last digit that's been input, AC all clear, all clear everything and enter as we've seen answers the question and you get the ding when you've got it right. If you get it wrong, you get the buzzer sound. So you kind of know you get a bit of audio feedback as you're going along. All the results are stored. So if you get bored, you've had enough, like say 50 can, you know, it's still a lot, even though it's a lot less than the total. Now you click quick down here. So we've answered four questions and that'll tell us so it was on question four, wasn't we? We'd answered three and that'll tell us that we scored two out of three. We'll show the results, the actual questions here and the answers green ticks for correct. If you get it wrong, you'll have the red cross and it will show you like what would have been the correct answer. Now if you click try again, it'll just go back to here. How many questions would you like? If we chose choose badge, I'll take it. It reloads the page and we can choose a different one. Now the reason there are so many questions like on bronze, there are 72. I think, well, there's 12, we go up to 12. So, you know, that's one lot of 12. That's another lot of 12. That's three lots of 12. So 12, 24, 36. How can there be 72? Well, what I have this do is ask the question backwards. So there'll be one times two, two times two, three times two, but there'll also be two times one, two times two, two times three. So I'll have the two, the five and the ten on both sides of the sum, because the answer will be the same, but I wanted to get my son used to seeing it, you know, both ways around because that, you know, in real life things aren't always orderly, are they? So it just adds an extra element there. The questions are generated randomly. So it won't follow the same order either. So you don't know which way round you're going to get it. Now two times two is obviously the same forwards and backwards. So there is that duplication, but what are you going to do? Okay, so is there anything to show you before we go over the code? I don't think so. I think that covers it all. So if we go over to VS Code here, this is the index file, standard stuff here that you'd set up a HTML file with. This is where I import the font for the, it become MathsWiz. It's called luckiest guy, just a Google font that I've imported. And we set up some audio here, which we reference later in the JavaScript. And you can see that CSS does all the magic because common MathsWiz is just in H1 tags. And then the CSS makes it look cool. I'll cover that off in a sec. But this pretty much is all the HTML, the static HTML. So not many lines of it at all. And it'd be even less if it wasn't the fact that I wanted the choose a badge to practice to be in a nice wavy animation, because each letter has to move independently. So it has to be within its own span tags. Okay. And then down here, this is where the three different containers are to display the three badges, bronze, silver, and gold. And they're not hyperlinks. The image has an on click, you know, event. So it's listening, watching out for a click. If it is clicked, then the relevant function gets executed. So bronze, silver, and gold. Okay, let's have a quick look at the CSS. Right, I'll top here, set up some variables for different colors and different fonts. And it's kind of good practice to do, but it doesn't save an awful lot of time. This is a very small, simple site. We set up some various spacing and fonts, the different elements of the page, the body, the margins for various elements of the page. So H1, this is where the magic happens. So we're using that lucky guy, luckiest guy font, nice and chunky, nice and big spacing around it. The background image, we set the color to transparent, they probably should have come first really, you know, go through it in order. So we set the color to transparent. So whatever the image is will shine through. And as it's an animated GIF, you get that nice effect, the animated effect behind it. And GIF is pretty small, so it loads quite fast, but we are at the mercy of how ever fast this site is running, but it's never causing me a problem. Cover makes sure that whatever it is that's being displayed through whatever image background image it is, it will fit the port that it's being shown through. Okay, the calculated grid, okay, so that this has to be quite rigid, use a grid template to make sure that it's always three columns with the same width and same with the rows, you know, so it's fixed. So that doesn't, that doesn't expand or shrink as the page size does. But in my testing, it's always visible and usable, even on, I've got an iPhone 13 mini, so it's quite a small screen. So as long as you're not smaller than that, you're good. And anything above will be fine. And the page is responsive. So let me just make this smaller. There you can see at a certain point, let's choose a badge to practice, because each letter is individual. I didn't want, I didn't want it to start wrapping around a letter at a time onto the next line. So at a certain point, you get a bit of it there. But at a certain point, it will just completely disappear, become a maths wiz because that is one block of text that will wrap nicely and the effect is still visible and doesn't break. The three boxes, okay, when we get to a certain point, now here, there is a bit of overflow you can see, but in my real life testing, it wasn't an issue for me. So I chose the cutoff at this point, where they will snap to a column and you lose the box around it, but all still perfectly playable. Okay, right to the code. So that's what the calculator, all this styling deals with the calculator. And then with the buttons, make sure the font is the right color and the hover over effect that you get, the box shadow changing the color. Yeah, when you hover over a different font to make it a nice, just a bold, non cursive font so easily readable. And this deals with the containers, like I was just showing you there, the flex, user flex option so that when it gets to a certain width, you know, that will disappear and the styling will change. So it looks okay on a smaller screen. And this deals with the gradient at the top where blue fades into white. I don't think I use the other ones. I did have a different gradient effect for each page that the silver, gold, you know, to make it kind of tie in, but I felt that it was better just to change the color of the text and keep the gradient the same, the blue one. And then this deals with hiding the chooser badge, the H2, basically anything, any H2 tags disappear when the orientations portrait. So yeah, when you get to a certain width where it's longer than it is wide, higher than it is wide portrait, if you like, then that will disappear completely. And this styling all deals with setting up the bounce animation, how long it's going to take ease makes it move, accelerate up and then slow down when it gets to the top. So it's not just mechanically moving up and down, you know, or just sliding up and down at the same speed. Infinite just means it won't end and alternate means it will reverse. So it will slide up and stop when it gets to the top and then it will slide down so it gets to the bottom and it repeats. The font was Titan one although I've seen on other browsers, it defaults to comic sans if that can't find that font, which also looks okay. It deals with the text shadowing and yeah, the text shadowing and the, okay, so each this applies to the first span tag. And then every child every subsequent span tag is a delay to the animation. So they're not moving up and down uniform. Yeah, that wave effect. And then this deals with the shadow of the of the whole not just the shadow of the the font, the shadow of the whole thing when it goes on and just to give it a 3d effect. So it's quite a lot, a bit of overkill, but I like the result. So I'm okay with that. And that's that really. We're now down into the JavaScript where I don't know, I don't know the point too much. You can pick through the code yourself, ask any questions you want in the comments. But yeah, I've got it working. You've got some global variables here at the top. And then everything else pretty much in its own function and some of the variables pass between them and pass between them so that you can keep score for instance and not lose a place in a loop. And they deal with the correct answers and the wrong answers. And I've been quite lazy in that once I got it all working for bronze way, then just copied and pasted it for gold and silver and tweak them rather be clever about it. And try and do it another way, you know, save some, save some spaces not particularly long anyway. So yeah, the most important thing in software development is getting it done, getting things working. So you can see your different functions for each of the buttons of the calculator. And they just add that number into the display. There's a big chunk of commented out code here. So I wanted it to be possible to enter the relevant numbers while pressing on the keyboard. But it was causing issues with doubling up. You'd press a number and sometimes you'd get more than one of that number in the display field. And it was causing problems. So it was nice to have. But the most important thing was that it worked. And it was more likely that it was going to be used on a tablet and therefore having the calculator style input on the screen that you can tap each separate number was more important. So I won't move that. So what I thought was going to be a pretty short video I've rambled on for quite a while. I would like to go into some more detail. You know what I will do. So if we look at the bronze questions. So when you click bronze, this is what happens. It basically changed everything that's on the screen already and changes colors, changes text. So it's not loading anything. Everything is already here. It's just where it displays. Depending on what the user selects. So we set up two arrays, one to 12 and then two, five and 10. So for bronze, it's going to ask one times two, two times two, three times two, four times two. Who's also going to ask the reverse? So two times one, two times two, two times three, two times four. And then that's why we get the 12 instead of 12, 24, 36. It asks them twice. So it's 36 times two, 72. That's why it's such a huge number for the other ones. Because obviously the other times tables include a lot more. So for silver, two, three, four, five, six, eight and 10 and the division facts. So the way it works is you've got those variables, those arrays, but we use the questions array and the answers array. So for the question we are pushing in basically whatever that is there. So on the first loop, first go around in the loop that would be one times by and say, well it would be two, one times two. And then we actually do that sum, store it in the variable answer and then push that answer onto the answers array. So the question and the answers match. And then here this is just a symbol for the division symbol, sorry, the code for the division symbol, the HTML code. So instead of choosing the forward slash is a bit more friendly to have the horizontal line with the dots above and below that everyone's kind of used to seeing, especially children for division. So actually do the division question. We get the answer that we just generated divided by the same number we used to create it here. So we've got the division question as well. And then we push that also onto the question and that answer into the respective arrays. Then we swap it around. So we see that multiplied by, but down here we've got by multiply. So it doesn't matter with multiplication, does it? Which around they go. But so you've got the inverse of the questions as well. And same with the division, you know, instead of divide by, we've got divides by multiply if you're still with me. And then we've got a function here which shuffles the arrays. So you pass this function, the two arrays. Let's go have a quick look at that function. I pinch this from elsewhere, just modified it so that what it does is it takes those arrays, it takes the questions and answers arrays, randomizes them, but randomizes them simultaneously so that the questions and answers still match. Otherwise, what's the point? And then it restores them in those arrays. So you never know what order you're going to get the questions in each time through. So the order to be random. And then each time user enters their answer, it will check it against the user answer, it will check against the answer in the array. If it matches great, we play the sound and increment correct answers variable by one. And if it doesn't match, then obviously it's wrong. We increment wrong answer by one. And we also, as well as we'll be showing the answer with a green tick, but for wrong, as well as showing the red, the question of the user answer and the red cross, we'll show the correct answer. So some learning can be done.