Join Chris Converse for an in-depth discussion in this video Setting up the progress bar and intro screen, part of Creating a Quiz with AngularJS 1.
So let's remove the totalQuestions variable. Let's split open the progress bar, and inside of the progress bar, let's add a simple div element. Now this div element is what we want to replicate for each question found in our JSON data. So what we're going to do is add an attribute into this div element called ng-repeat. So we'll hit a space, and we'll type ng-repeat ="" and then what we're going to do inside of here is we're going to loop through all of the questions in the myQuestions variable.
Now let's go back to our quiz.js file. Let's come down and copy the myQuestions variable. Let's go back to our HTML file. Now typically when we iterate through a loop, we make a single version of the variable name and then we put in the actual variable name. So we'll type myQuestion in space and then paste in the myQuestions variable. And this is the only thing we need to do. Since the ng-repeat is on the div element, this div element will be repeated for every time we have a main array item in the myQuestions variable.
So to see the results of this, let's save your work. Let's go back to the browser and let's simply hit Reload. Now we'll see a div element for every one of the questions in our JSON data. So now that we've spent the time setting up the HTML in CSS and hooking in our data, this model view controller framework makes it really quick and efficient to manipulate our HTML based on that data. So the next thing we're going to do is let's go back to our intro item. If we scroll down, this is our intro panel that we want to have show up first. And what we want to do is have this particular panel show up if the active question is negative one.
So the inline statement we're going to write inside of our HTML is going to check if activeQuestion is > -1 If it is, we're going to put the inactive class on intro, and if it's not, we're going to put the active class. So now back in our HTML file, inside of the two sets of our curly brackets, our conditional statement, since we want to check if activeAnswer is > -1. Let's begin with a set of parentheses so we can calculate that first. So we'll type activeQuestion, space, > -1 then outside of the parentheses, we'll hit a space ? then a space.
Now if the activeQuestion is > -1 we know that the activeQuestion is zero or higher so we want the intro to be inactive. So inside of two single tick marks for a string, so inside of the tick marks, let's add a string called inactive. That will be the name of the class that will be added to the intro class. Then a space, colon, space, another string with the word 'active'. Then save your files, back to the browser. Let's hit Reload. Now we won't see anything yet because we don't have a CSS class to define what happens with active and inactive elements.
So with this in place, let's go back to our quiz.css file and let's add some additional rules for items that have either the inactive or active class. Now the first thing we'll do is specify both active and inactive classes and set our transition. So I'll come up here and copy the myQuiz ID name. So we'll paste the ID name, space, .active. Then we're going to specify inactive as well. So comma, space, let's paste our ID again space .inactive put in our beginning and ending brackets.
Let's come in here and animate these, so we'll set transition to left space 1.5s and we want to use an easing effect here so these will ease in and out. So we'll use ease-in-out then a semicolon, so this will take care of animating our panels from an inactive state to an active state. Now in the next line, let's come down here and let's specify the active state, so #myQuiz .active and what we're going to do here is set the left property.
So let's set left to 40px. And now with active and inactive specified, we also want to set up a series of classes that will take the intro and an answered question and instead of having them move off to the right when we're finished with them, we want them to move off to the left. So we're going to create another series of rules that's going to move answered items in the intro inactive off to the left. So we'll paste in the #myQuiz ID again, space, .intro.inactive then a comma and a space.
Then we're also going to specify #myQuiz.inactive .answered which would be one of the questions that is inactive but also answered. Put in our brackets. Then we're going to set a left property of -1350px; Now with these in place, go back to your browser and hit Reload. Since this is the very first load of the page sometimes you may see the animation of the intro slide in from the right, and other times you might see the panel just load up immediately.
The behavior at this particular stage onload will be based on what your browser has in its cache. However, after the initial load, as we dynamically start changing our classes, we're going to see our CSS animation kicking in as we change the feedback states within the quiz. And now with our progress bar in place and the intro panel showing up onload, next we're going to add an Angular click event to activate the begin button.
- Preparing the base layout
- Styling the layout
- Adding content to the containers
- Preparing the AngularJS scripts and JSON data
- Setting up the progress bar
- Generating questions and answers
- Setting active answered states
- Calculating users results
- Making the quiz responsive