Creating a Quiz with AngularJS 1.x
5.0 (63 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.
584 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Creating a Quiz with AngularJS 1.x to your Wishlist.

Add to Wishlist

Creating a Quiz with AngularJS 1.x

Learn to create an engaging, animated, and interactive promotional quiz for your website or digital publication.
5.0 (63 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.
584 students enrolled
Created by Chris Converse
Last updated 9/2015
English
Current price: $10 Original price: $20 Discount: 50% off
5 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 3 hours on-demand video
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I 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
View Curriculum
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 is the target audience?
  • Web Designers
  • Web Developers
  • Interactive / UX Designers
Students Who Viewed This Course Also Viewed
Curriculum For This Course
30 Lectures
02:53:55
+
Introduction
4 Lectures 06:33

What you should know about this course.

Preview 01:15

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

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

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.

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.

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.

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.

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!

Preview 00:42
About the Instructor
Chris Converse
4.5 Average rating
830 Reviews
43,453 Students
8 Courses
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.