If you’ve ever needed to create a simple online quiz in HTML, you can do so easily with a little help from AngularJS, which is a popular JavaScript framework that provides some powerful tools. I’m going to start by showing you how to make a simple fill-in-the blank question.
What I’m hoping to eventually build
I’m hoping to build a tool that will help my kids (and maybe adults) memorize Bible verses. At first, this is going to just be a simple fill-in-the-blank, but then evolve into something more. For each iteration, I’m hoping to write a blog post explaining how I did it. Hopefully, you’ll find this information useful.
Who I’m writing for
I intend to write this first for myself so I can better understand AngularJS, which means I’m going to be dumbing it down a bit. If you consider yourself a JavaScript expert, you may end up laughing at my explanations and analogies. Just warning.
Getting started
I’ve set up a JSFiddle here where you can see how a very basic fill-in-the-blank question works:
http://jsfiddle.net/AaronTweeton/awv7omv6/5/
If you open up the link above, you might notice a few unique attributes that start with ng-something. Here’s what they do.
ng-app
In order to get AngularJS to do something, you need to not only load the AngularJS framework, but you have to put the attribute “ng-app” in the body or container of your planned application. Angular looks for “ng-app” and if it finds it, it gets ready to do something. Otherwise, Angular will just take a nap (I warned you about my analogies). In our case, I’ve put it in a div that wraps the entire application.
ng-model
Inside the input tag, you’ll see the attribute ng-model=”word”. What ng-model does is it binds the value of the input field to a variable called “word”. Whatever you type into the input field will be the same value of the variable word.
ng-if
At the bottom of the quiz question, you’ll notice a ng-if. If you’ve used if/else statements before, then this attribute should immediately make a little sense. In this case, the paragraph tag with “Good job!” will only appear if the variable word equals “lender”. If it doesn’t match, then the paragraph tag won’t appear.
Wrapping Up
So by just using three attributes from AngularJS, we’ve been able to make a very basic quiz question.