Library

Course: Creating a Quiz with AngularJS 1.x

Creating a Quiz with AngularJS 1.x

  • Life Time Access
  • Certificate on Completion
  • Access on Android and iOS App
About this Course

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
Basic knowledge
  • Some HTML and CSS is recommended
  • General idea of JavaScript
  • Willingness to learn something new
What you will 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
Curriculum
Number of Lecture: 30
Total Duration: 02:54:08
Introduction
  • Introduction to this course  
  • About this course  

    What you should know about this course.

  • Software requirements  

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

  • About the exercise files  

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

Creating the Layout and Interaction States
  • Preparing the base layout  

    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 containers  

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

  • Adding style to the intro screen  

    Adding content and style for the intro screen.

  • Styling the main heading  

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

  • Styling the questions and answers  

    Style and layout for the questions and answers.

  • Styling the answer states  

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


  • Setting the answered state of the question  

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

  • Adding content and style to the feedback container  

    Adding feedback for the answer selected by the user.

  • Adding content and style to the results container  

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

  • Creating the progress bar  

    Adding and populating the progress bar.

Preparing the Scripts and Data
  • Setting up the AngularJS app and controller  

    Hooking in the JavaScript files and declaring an AngularJS app.

  • Preparing and formatting the JSON file  

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

  • Loading JSON data into our app  

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

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.

  • Creating a click event to begin the quiz  

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

  • Generating the questions and answers  

    Dynamically injecting the question and answers from the JSON data.

  • Setting up a custom function  

    Adding a custom function in the AngularJS controller.

  • Setting active and answered states for questions  

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

  • Setting active and answered states for answers  

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

  • Preparing the answers to support images  

    Adding support for answers to be images, or text.

  • Adding the feedback content  

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

  • Setting active and answered states for the progress bar  

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

  • Calculating the user’s results  

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

  • Creating custom share links  

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

  • Making your quiz responsive  

    Adapting the quiz layout for smaller screens.

Conclusion
  • Where to go from here  

    What to learn next with your new AngularJS skills!

Reviews (0)