Creating a Quiz with AngularJS

$20.00

31 Lessons

2 hours, 55 minutes

Intermediate

Learn to create an engaging, animated, and interactive web experience using AngularJS. In this course, we'll harness the power AngularJS to create, score, and share results from an interactive quiz.

Quizzes are an effective way to engage users, promote brand awareness, and create a fun, interactive, learning experience on your web site.

While building this project, you'll learn to create a JSON file, design and style a web layout, create animated transitions, add develop interactive components that will engage, and test your user's knowledge, of any given subject matter.

This course will show you a step-by-step approach for creating an interactive web project that includes:

Creating a web layout with HTML and CSS
Understanding the Model-View-Controller (MVC) construct
Defining an HTML document as an AngularJS App
Creating and accessing data in JSON format
Adding interactivity with Angular Directives
Creating animations with CSS
Calculating a user's score
Creating custom Twitter and email links

The class files include all graphics, a copy of AngularJS, HTML and CSS documents, and a copy of the final project, which can be used to gauge your progress throughout the course.

Full details

Introduction
Introduction to this Course
Learn about the project we’ll be creating in this course.
1:04
About this Course
What you should know about this course.
1:16
Software Requirements
The software you’ll need in order to complete this course.
2:08
About the Exercise Files
See what’s included in the exercise files.
2:09
Exercise Files
Here you will find the exercise files needed to complete the lessons.

Creating the Layout and Interaction States
Preparing the Base Layout
Adding the HTML and CSS for the base quiz container.
3:36
Adding Main Content Containers
Adding the main containers for the heading, intro, questions, answers and results.
2:27
Adding Style to the Intro Screen
Adding content and style for the intro screen.
7:43
Styling the Main Heading
Creating a heading lock-up with HTML and CSS styles.
3:19
Styling the Questions and Answers
Style and layout for the questions and answers.
6:37
Styling the Answer States
Creating styles to indicate correct and incorrect answers selected by the user.
7:30
Setting the Answered State of the Question
Checking and setting the state of the answer selected by the user.
4:15
Adding Content and Style to the Feedback Container
Adding feedback for the answer selected by the user.
7:46
Adding Content and Style to the Results Container
Adding content and style to let the user know the results of their answers.
7:57
Creating the Progress Bar
Adding and populating the progress bar.
11:06

Preparing the Scripts and Data
Setting up the AngularJS App and Controller
Hooking in the JavaScript files and declaring an AngularJS app.
8:19
Preparing and Formatting the JSON File
Creating a JSON file to define questions and possible answers to our quiz.
10:28
Loading JSON Data into our App
Loading the JSON data into our app as a data object.
6:23

Manipulating the HTML Based on the JSON Data
Setting Up the Progress Bar and Intro Screen
Adding the active and inactive states in out CSS.
7:57
Creating a Click Event to Begin the Quiz
Adding a click event to the answers in the HTML app.
4:47
Generating the Questions and Answers
Dynamically injecting the question and answers from the JSON data.
5:28
Setting up a Custom Function
Adding a custom function in the AngularJS controller.
6:09
Setting Active and Answered States for Questions
Testing and recording whether a question has been answered or not.
7:29
Setting Active and Answered States for Answers
Defining a CSS class based on whether the question was answered correctly.
6:38
Preparing the Answers to Support Images
Adding support for answers to be images, or text.
5:35
Adding the Feedback Content
Adding in content based on the correctness of the user’s answer.
5:01
Setting Active and Answered States for the Progress Bar
Adding the appropriate CSS class based on the correctness of the answer.
3:29
Calculating the User’s Results
Learning to calculate the results of the user’s answers.
9:00
Creating Custom Share Links
Generating custom, data-driven, links for email and Twitter.
10:01
Making your Quiz Responsive
Adapting the quiz layout for smaller screens.
8:05

Conclusion
Where to Go from Here
What to learn next with your new AngularJS skills!
0:43

AngularJS
JavaScript

Creating a Quiz with AngularJS

Instructor

Description

Curriculum

Skills

Similar Courses

More Courses by this Instructor