Creating a Quiz with AngularJS 1.x

Learn to create an engaging, animated, and interactive promotional quiz for your website or digital publication.
4.5 (45 ratings)
Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
524 students enrolled
Instructed by Chris Converse Design / Web Design
50% off
Coupon valid until Mar 1, 2017 7:59 AM UTC
Take This Course
  • Lectures 30
  • Length 3 hours
  • Skill Level Intermediate Level
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works


Find online courses made by experts from around the world.


Take your courses with you and learn anywhere, anytime.


Learn and practice real-world skills and achieve your goals.

About This Course

Published 8/2015 English

Course Description

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.

Running Time: 2:55 (175 minutes)

What are the requirements?

  • Some HTML and CSS is recommended
  • General idea of JavaScript
  • Willingness to learn something new

What am I going to get from this course?

  • Build brand awareness with fun, engaging content
  • Create a web layout in HTML and CSS
  • Create, store, and retrieve data with AngularJS
  • Create an interactive Quiz, that scores users
  • Load JSON data into a web page

Who is the target audience?

  • Web Designers
  • Web Developers
  • Interactive / UX Designers

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.


Section 1: Introduction
Introduction to this course

What you should know about this course.


The software you'll need in order to complete this course.


See what's included in the exercise files. When you purchase this course, you can download the files from Section 2, Lecture 1 (Use download link in the top-right area of screen).

Section 2: Creating the Layout and interaction States

Adding the HTML and CSS for the base quiz container. Download the exercise files using the link in the top-right area of this lecture.


Adding the main containers for the heading, intro, questions, answers and results.


Adding content and style for the intro screen.


Creating a heading lock-up with HTMl and CSS styles.


Style and layout for the questions and answers.


Creating styles to indicate correct and incorrect answers selected by the user.


Checking and setting the state of the answer selected by the user.


Adding feedback for the answer selected by the user.


Adding content and style to let the user know the results of their answers.


Adding and populating the progress bar.

Section 3: Preparing the Scripts and Data

Hooking in the JavaScript files and declaring an AngularJS app.


Creating a JSON file to define questions and possible answers to our quiz.


Loading the JSON data into our app as a data object.

Section 4: Manipulating the HTML based on the JSON data

Adding the active and inactive states in out CSS.


Adding a click event to the answers in the HTML app.


Dynamically injecting the question and answers from the JSON data.


Adding a custom function in the AngularJS controller.


Testing and recording whether a question has been answered or not.


Defining a CSS class based on whether the question was answered correctly.


Adding support for answers to be images, or text.


Adding in content based on the correctness of the user's answer.


Adding the appropriate CSS class based on the correctness of the answer.


Learning to calculate the results of the user's answers.


Generating custom, data-driven, links for email and Twitter.


Adapting the quiz layout for smaller screens.

Section 5: Conclusion

What to learn next with your new AngularJS skills!

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Chris Converse, Designer and Developer at Codify Design Studio

Chris has over 25 years experience in graphic design and interactive media, with a unique focus on both design and development. Chris possesses development skills across such languages as HTML, CSS, JavaScript (including jQuery and AngularJS), and PHP, making his design execution optimal across various media. In addition to designing and teaching online, Chris speaks at number of industry-related conferences, including HOW Design, Adobe MAX, Adobe ADIM, AIGA, and the Creative Publishing Network.

Ready to start learning?
Take This Course