Design
Web Design
AngularJS
Creating a Quiz with AngularJS 1.x
3.9 (91 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
677 students enrolled

Creating a Quiz with AngularJS 1.x

Learn to create an engaging, animated, and interactive promotional quiz for your website or digital publication.
3.9 (91 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
677 students enrolled
Created by Chris Converse
Last updated 9/2015
English
English [Auto]
Preview this course
Creating a Quiz with AngularJS 1.x
Current price: $11.99 Original price: $19.99 Discount: 40% off
1 day left at this price!
Buy now
30-Day Money-Back Guarantee
This course includes
  • 3 hours on-demand video
  • 1 downloadable resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • 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
Requirements
  • Some HTML and CSS is recommended
  • General idea of JavaScript
  • Willingness to learn something new
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)

Who this course is for:
  • Web Designers
  • Web Developers
  • Interactive / UX Designers
Course content
Expand all 30 lectures 02:53:55
+ – Introduction
4 lectures 06:33
Introduction to this course
Preview 01:03

What you should know about this course.

About this course
Preview 01:15

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

Software requirements
Preview 02:07

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).

About the exercise files
Preview 02:08
+ – Creating the Layout and interaction States
10 lectures 01:02:06

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.

Preparing the base layout
03:35

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

Adding main content containers
02:26

Adding content and style for the intro screen.

Adding style to the intro screen
07:42

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

Styling the main heading
03:18

Style and layout for the questions and answers.

Styling the questions and answers
Preview 06:36

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

Styling the answer states
07:29

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

Setting the answered state of the question
04:14

Adding feedback for the answer selected by the user.

Adding content and style to the feedback container
07:45

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

Adding content and style to the results container
07:56

Adding and populating the progress bar.

Creating the progress bar
11:05
+ – Preparing the Scripts and Data
3 lectures 25:07

Hooking in the JavaScript files and declaring an AngularJS app.

Setting up the AngularJS app and controller
08:18

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

Preparing and formatting the JSON file
Preview 10:27

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

Loading JSON data into our app
06:22
+ – Manipulating the HTML based on the JSON data
12 lectures 01:19:27

Adding the active and inactive states in out CSS.

Setting up the progress bar and intro screen
07:56

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

Creating a click event to begin the quiz
04:46

Dynamically injecting the question and answers from the JSON data.

Generating the questions and answers
05:27

Adding a custom function in the AngularJS controller.

Setting up a custom function
Preview 06:08

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

Setting active and answered states for questions
07:28

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

Setting active and answered states for answers
06:37

Adding support for answers to be images, or text.

Preparing the answers to support images
05:34

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

Adding the feedback content
05:00

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

Setting active and answered states for the progress bar
03:28

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

Calculating the user’s results
08:59

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

Creating custom share links
Preview 10:00

Adapting the quiz layout for smaller screens.

Making your quiz responsive
08:04
+ – Conclusion
1 lecture 00:42

What to learn next with your new AngularJS skills!

Where to go from here
Preview 00:42