Take this
course

Software Development / Web Development

Creating a Quiz with AngularJS

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

Play trailer
$20.00
31 Lessons
2 hours, 55 minutes
Intermediate

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. 

Full details

Curriculum

  • Introduction
    Introduction to this Course
    Learn about the project we’ll be creating in this course.
    1:04
    About this Course
    What you should know about this course.
    1:16
    Software Requirements
    The software you’ll need in order to complete this course.
    2:08
    About the Exercise Files
    See what’s included in the exercise files.
    2:09
    Exercise Files
    Here you will find the exercise files needed to complete the lessons.
  • Creating the Layout and Interaction States
    Preparing the Base Layout
    Adding the HTML and CSS for the base quiz container.
    3:36
    Adding Main Content Containers
    Adding the main containers for the heading, intro, questions, answers and results.
    2:27
    Adding Style to the Intro Screen
    Adding content and style for the intro screen.
    7:43
    Styling the Main Heading
    Creating a heading lock-up with HTML and CSS styles.
    3:19
    Styling the Questions and Answers
    Style and layout for the questions and answers.
    6:37
    Styling the Answer States
    Creating styles to indicate correct and incorrect answers selected by the user.
    7:30
    Setting the Answered State of the Question
    Checking and setting the state of the answer selected by the user.
    4:15
    Adding Content and Style to the Feedback Container
    Adding feedback for the answer selected by the user.
    7:46
    Adding Content and Style to the Results Container
    Adding content and style to let the user know the results of their answers.
    7:57
    Creating the Progress Bar
    Adding and populating the progress bar.
    11:06
  • Preparing the Scripts and Data
    Setting up the AngularJS App and Controller
    Hooking in the JavaScript files and declaring an AngularJS app.
    8:19
    Preparing and Formatting the JSON File
    Creating a JSON file to define questions and possible answers to our quiz.
    10:28
    Loading JSON Data into our App
    Loading the JSON data into our app as a data object.
    6:23
  • 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.
    7:57
    Creating a Click Event to Begin the Quiz
    Adding a click event to the answers in the HTML app.
    4:47
    Generating the Questions and Answers
    Dynamically injecting the question and answers from the JSON data.
    5:28
    Setting up a Custom Function
    Adding a custom function in the AngularJS controller.
    6:09
    Setting Active and Answered States for Questions
    Testing and recording whether a question has been answered or not.
    7:29
    Setting Active and Answered States for Answers
    Defining a CSS class based on whether the question was answered correctly.
    6:38
    Preparing the Answers to Support Images
    Adding support for answers to be images, or text.
    5:35
    Adding the Feedback Content
    Adding in content based on the correctness of the user’s answer.
    5:01
    Setting Active and Answered States for the Progress Bar
    Adding the appropriate CSS class based on the correctness of the answer.
    3:29
    Calculating the User’s Results
    Learning to calculate the results of the user’s answers.
    9:00
    Creating Custom Share Links
    Generating custom, data-driven, links for email and Twitter.
    10:01
    Making your Quiz Responsive
    Adapting the quiz layout for smaller screens.
    8:05
  • Conclusion
    Where to Go from Here
    What to learn next with your new AngularJS skills!
    0:43

Skills

  • AngularJS
  • JavaScript

Similar Courses

More Courses by this Instructor

Company
AboutCyberU Enterprise
Follow Us
Support
Contact UsTermsPrivacy
© 2017 CyberU