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
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
- Lecture 1.2 Lecture 2:About this course Locked
- Lecture 1.3 Lecture 3:Software requirements Locked
- Lecture 1.4 Lecture 4:About the exercise files Locked
-
Section 2: Creating the Layout and interaction States
- Lecture 2.1 Lecture 5:Preparing the base layout Locked
- Lecture 2.2 Lecture 6:Adding main content containers Locked
- Lecture 2.3 Lecture 7:Adding style to the intro screen Locked
- Lecture 2.4 Lecture 8:Styling the main heading Locked
- Lecture 2.5 Lecture 9:Styling the questions and answers Locked
- Lecture 2.6 Lecture 10:Styling the answer states Locked
- Lecture 2.7 Lecture 11:Setting the answered state of the question Locked
- Lecture 2.8 Lecture 12:Adding content and style to the feedback container Locked
- Lecture 2.9 Lecture 13:Adding content and style to the results container Locked
- Lecture 2.10 Lecture 14:Creating the progress bar Locked
-
Section 3: Preparing the Scripts and Data
- Lecture 3.1 Lecture 15:Setting up the AngularJS app and controller Locked
- Lecture 3.2 Lecture 16:Preparing and formatting the JSON file Locked
- Lecture 3.3 Lecture 17:Loading JSON data into our app Locked
-
Section 4: Manipulating the HTML based on the JSON data
- Lecture 4.1 Lecture 18:Setting up the progress bar and intro screen Locked
- Lecture 4.2 Lecture 19:Creating a click event to begin the quiz Locked
- Lecture 4.3 Lecture 20:Generating the questions and answers Locked
- Lecture 4.4 Lecture 21:Setting up a custom function Locked
- Lecture 4.5 Lecture 22:Setting active and answered states for questions Locked
- Lecture 4.6 Lecture 23:Setting active and answered states for answers Locked
- Lecture 4.7 Lecture 24:Preparing the answers to support images Locked
- Lecture 4.8 Lecture 25:Adding the feedback content Locked
- Lecture 4.9 Lecture 26:Setting active and answered states for the progress bar Locked
- Lecture 4.10 Lecture 27:Calculating the user’s results Locked
- Lecture 4.11 Lecture 28:Creating custom share links Locked
- Lecture 4.12 Lecture 29:Making your quiz responsive Locked
-
Section 5: Conclusion
- Lecture 5.1 Lecture 30:Where to go from here Locked
