2015
Lynda
Chris Converse
2:54
English

Test your user's knowledge or increase your brand awareness in a fun way with attractive and engaging quizzes built with AngularJS. In this project-based course, you'll learn to build the quiz layout, add questions and answers, display a progress bar, keep score and calculate results, and create custom sharing links that will allow quiz takers to challenge friends via email and Twitter. It all starts with a bit of HTML, CSS, and some AngularJS hooks, plus code snippets that are provided for free to all members in the exercise files. Get started creating your own quiz today.

Introduction
Introduction to this course
About this course
Software requirements
About the exercise files
1. Creating the Layout and Interaction States
Preparing the base layout
Adding main content containers
Adding style to the intro screen
Styling the main heading
Styling the questions and answers
Styling the answer states
Setting the answered state of the question
Adding content and style to the feedback container
Adding content and style to the results container
Creating the progress bar
2. Preparing the Scripts and Data
Setting up the AngularJS app and controller
Preparing and formatting the JSON file
Loading JSON data into our app
3. Manipulating the HTML Based on the JSON Data
Setting up the progress bar and intro screen
Creating a click event to begin the quiz
Generating the questions and answers
Setting up a custom function
Setting active and answered states for questions
Setting active and answered states for answers
Preparing the answers to support images
Adding the feedback content
Setting active and answered states for the progress bar
Calculating the user's results
Creating custom share links
Making your quiz responsive
Conclusion
Where to go from here

Download File Size:449.32 MB

---