Creating a Quiz with AngularJS 1.x

Name: Creating a Quiz with AngularJS 1.x
Rating: 4.4 (93 reviews)

Learn to create an engaging, animated, and interactive promotional quiz for your website or digital publication.

Created byChris Converse

Last updated 10/2016

English

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

Course content

5 sections • 30 lectures • 2h 53m total length

Introduction to this course1:03
About this course1:15
What you should know about this course.
Software requirements2:07
The software you'll need in order to complete this course.
About the exercise files2:08
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).

Preparing the base layout3:35
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 main content containers2:26
Adding the main containers for the heading, intro, questions, answers and results.
Adding style to the intro screen7:42
Adding content and style for the intro screen.
Styling the main heading3:18
Creating a heading lock-up with HTMl and CSS styles.
Styling the questions and answers6:36
Style and layout for the questions and answers.
Styling the answer states7:29
Creating styles to indicate correct and incorrect answers selected by the user.
Setting the answered state of the question4:14
Checking and setting the state of the answer selected by the user.
Adding content and style to the feedback container7:45
Adding feedback for the answer selected by the user.
Adding content and style to the results container7:56
Adding content and style to let the user know the results of their answers.
Creating the progress bar11:05
Adding and populating the progress bar.

Setting up the progress bar and intro screen7:56
Adding the active and inactive states in out CSS.
Creating a click event to begin the quiz4:46
Adding a click event to the answers in the HTML app.
Generating the questions and answers5:27
Dynamically injecting the question and answers from the JSON data.
Setting up a custom function6:08
Adding a custom function in the AngularJS controller.
Setting active and answered states for questions7:28
Testing and recording whether a question has been answered or not.
Setting active and answered states for answers6:37
Defining a CSS class based on whether the question was answered correctly.
Preparing the answers to support images5:34
Adding support for answers to be images, or text.
Adding the feedback content5:00
Adding in content based on the correctness of the user's answer.
Setting active and answered states for the progress bar3:28
Adding the appropriate CSS class based on the correctness of the answer.
Calculating the user’s results8:59
Learning to calculate the results of the user's answers.
Creating custom share links10:00
Generating custom, data-driven, links for email and Twitter.
Making your quiz responsive8:04
Adapting the quiz layout for smaller screens.

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

Creating a Quiz with AngularJS 1.x

What you'll learn

Explore related topics

Course content

Introduction4 lectures • 7min

Creating the Layout and interaction States10 lectures • 1hr 2min

Preparing the Scripts and Data3 lectures • 25min

Manipulating the HTML based on the JSON data12 lectures • 1hr 19min

Conclusion1 lecture • 1min

Requirements

Description

Who this course is for: