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’ve set up a JSFiddle here where you can see how a very basic fill-in-the-blank question works:
If you open up the link above, you might notice a few unique attributes that start with ng-something. Here’s what they do.
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.
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.
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.
So by just using three attributes from AngularJS, we’ve been able to make a very basic quiz question.