Join Chris Converse for an in-depth discussion in this video Preparing the base layout, part of Creating a Quiz with AngularJS 1.
- View Offline
- Now to begin our project, I'm going to create a folder on the desktop. I'll call this My Quiz, and then I'll open this up. Now we're going to go to the exercise files. Let's go into the Chapter 1 folder, inside of the 01_01. Let's come in here and select all of these files. Now you can either copy and paste or in the Mac, I'm going to option drag these over into the new folder we created on the desktop. And now with these files copied into the My Quiz folder, let's come down and select index.html, and let's open this up in a text editor.
Now in this HTML document inside of the body area, I have a HTML comment. It says markup goes here. Let's delete this, and the first thing we're going to do is add a container for the quiz. This is going to be the outermost container for the entire quiz object. So, we're going to put this all inside of a div element. So, I'll type div, then an ending div tag. Inside of the div, we're going to add an ID. Set this equal to two quotes, and we're going to call this myQuiz.
So now, I'll just come in here and split this open. So again, this will be the outermost quiz container for the entire project. Let's save our file. Let's switch back to the My Quiz directory on the desktop. Let's go into the CSS folder. Let's grab quiz.css, and let's open this up in our text editor as well. So as I mentioned before, this has a link to some Google fonts, a set of basic body element to just color the background white, and to set a little bit of padding. The body area doesn't really matter for our entire project. And then I have the beginnings of the myQuiz container.
So we have the font-family set. A base font-size of 16 pixels, and a font-weight. So what we're going to do now is add in some additional CSS properties to give more dimensions to this myQuiz element and bring in that background graphic. So, I'll get my cursor at the end of this line. I'll hit a Return, and let's start adding in some additional properties. We're going to start with a width and a height, then we're going to set a position value, an overflow setting, color and then background. So we'll start with the width. We'll set this to 650 pixels.
We'll set a height to 650 pixels. Next we'll type position, and we'll set this to relative. Overflow we're going to set to hidden. Color we're going to set to white, so a # sign and three fs. And then the background we're going to set, the background color to black, so that's three zeros. We're going to set a background image, so url dot dot slash to go out to the images directory slash background dot jpg.
We're going to set no repeat, and zero on the X and zero on the Y position properties. So we're setting position relative here so that anything we absolutely position inside of this container will position in relation to this container. The overflow hidden means that anything we position outside of the quiz container will be clipped or masked so we won't see those elements. The default color of all of the text will be white, and our background graphic will use this background jpg. And back in the HTML file, I mentioned that I had already hooked in the quiz.css file, so now the HTML file is linking to that quiz.
So, now we can go back to the myQuiz directory, we can open up index.html up in a browser and we can see our project so far. We can see the myQuiz container is 650 by 650 and we have our background graphic in place. Now with that in place, we're ready to add the main content containers inside of this quiz container.
- 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