Join Chris Converse for an in-depth discussion in this video About the exercise files, part of Creating a Quiz with AngularJS 1.
- View Offline
The markup we're gonna be writing is gonna go right here, where we have our HTML comment. There's also a folder for CSS. Inside of here is a file called quiz.css. This file is also largely blank, except for the fact that we're bringing in some Google fonts. I also have a body style here, just to position the quiz a little bit away from the corners; and then I have a base rule on the myQuiz object, just basically setting the font family: setting the font size with a base of 16 pixels and a font weight of 400. Again, picking up some of the properties that we brought in from the Google font.
We'll begin working in the CSS file by adding additional properties to this myQuiz rule, and then adding all of the rest of the CSS to create the layout, and the interactive states for the quiz. Inside of the images directory, we have a whole series of graphics we're gonna be using in our project. There's a background.jpeg graphic, which is the graphic we're gonna use in the main myQuiz container. We also have a series of close-up graphics we're gonna use as the answers; instead of using text, we're gonna use graphics as the answers for question two. We have four of these items inside of here: we have a correct and incorrect svg graphic we're gonna use on the individual answers.
The two graphics here in white are the icon for e-mail and Twitter. These are svg graphics that are painted white, so we'll see them against a color when we create our share links. And finally, there's a ring.svg graphic, which we're gonna use to put onto the progress bar to indicate when the user has selected the correct answer. In the js folder, we have a copy of Angular. This is Angular 1.3, the latest version when this course was recorded. So, as you're working in this course, I recommend using this particular version of Angular, and then, once you've completed this course, you can check the Angular website to see if there are updates to the Angular framework.
Once you understand the main structure for how we put our questions and answers together, you can simply cut and paste the remaining four questions. This will give us our five questions that the users can answer throughout the quiz. And now that we're familiar with the Exercise Files, next, we'll start building out our project.
- 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