Creating a Quiz with AngularJS

(0 review)
Creating a Quiz with AngularJS

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.

What are the requirements?

  • Some HTML and CSS is recommended
  • General idea of JavaScript
  • Willingness to learn something new

What am I going to get from this course?

  • 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

What is the target audience?

  • Web Designers
  • Web Developers
  • Interactive / UX Designers

Course Staff

Chris Converse

Chris Converse

Designer and Developer at Codify Design Studio

Chris has over 22 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 AngulatJS), 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.

Frequently Asked Questions

What web browser should I use?

The EnlightMe platform works best with current versions of Chrome, Firefox or Safari, or with Internet Explorer version 9 and above.

Course Features

  • Lectures 30
  • Quizzes 0
  • Duration 4 Hours/Week
  • Skill level
  • Language English
  • Students 662
  • Certificate No
  • Assessments Self
  • Section 1: Introduction

    • Lecture 1.1 Lecture 1:Introduction to this course Locked 0m
    • Lecture 1.2 Lecture 2:About this course Locked 0m
    • Lecture 1.3 Lecture 3:Software requirements Locked 0m
    • Lecture 1.4 Lecture 4:About the exercise files Locked 0m
  • Section 2: Creating the Layout and interaction States

    • Lecture 2.1 Lecture 5:Preparing the base layout Locked 0m
    • Lecture 2.2 Lecture 6:Adding main content containers Locked 0m
    • Lecture 2.3 Lecture 7:Adding style to the intro screen Locked 0m
    • Lecture 2.4 Lecture 8:Styling the main heading Locked 0m
    • Lecture 2.5 Lecture 9:Styling the questions and answers Locked 0m
    • Lecture 2.6 Lecture 10:Styling the answer states Locked 0m
    • Lecture 2.7 Lecture 11:Setting the answered state of the question Locked 0m
    • Lecture 2.8 Lecture 12:Adding content and style to the feedback container Locked 0m
    • Lecture 2.9 Lecture 13:Adding content and style to the results container Locked 0m
    • Lecture 2.10 Lecture 14:Creating the progress bar Locked 0m
  • Section 3: Preparing the Scripts and Data

    • Lecture 3.1 Lecture 15:Setting up the AngularJS app and controller Locked 0m
    • Lecture 3.2 Lecture 16:Preparing and formatting the JSON file Locked 0m
    • Lecture 3.3 Lecture 17:Loading JSON data into our app Locked 0m
  • Section 4: Manipulating the HTML based on the JSON data

    • Lecture 4.1 Lecture 18:Setting up the progress bar and intro screen Locked 0m
    • Lecture 4.2 Lecture 19:Creating a click event to begin the quiz Locked 0m
    • Lecture 4.3 Lecture 20:Generating the questions and answers Locked 0m
    • Lecture 4.4 Lecture 21:Setting up a custom function Locked 0m
    • Lecture 4.5 Lecture 22:Setting active and answered states for questions Locked 0m
    • Lecture 4.6 Lecture 23:Setting active and answered states for answers Locked 0m
    • Lecture 4.7 Lecture 24:Preparing the answers to support images Locked 0m
    • Lecture 4.8 Lecture 25:Adding the feedback content Locked 0m
    • Lecture 4.9 Lecture 26:Setting active and answered states for the progress bar Locked 0m
    • Lecture 4.10 Lecture 27:Calculating the user’s results Locked 0m
    • Lecture 4.11 Lecture 28:Creating custom share links Locked 0m
    • Lecture 4.12 Lecture 29:Making your quiz responsive Locked 0m
  • Section 5: Conclusion

    • Lecture 5.1 Lecture 30:Where to go from here Locked 0m
Chris Converse
Chris Converse

Designer and Developer at Codify Design Studio

Chris has over 22 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 AngulatJS), 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.

Reviews

Average Rating

0
0 rating

Detailed Rating

5 stars
0
4 stars
0
3 stars
0
2 stars
0
1 stars
0