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:
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)
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 the main containers for the heading, intro, questions, answers and results.
Adding content and style for the intro screen.
Creating a heading lock-up with HTMl and CSS styles.
Creating styles to indicate correct and incorrect answers selected by the user.
Checking and setting the state of the answer selected by the user.
Adding feedback for the answer selected by the user.
Adding content and style to let the user know the results of their answers.
Adding and populating the progress bar.
Creating a JSON file to define questions and possible answers to our quiz.
Loading the JSON data into our app as a data object.
Adding the active and inactive states in out CSS.
Adding a click event to the answers in the HTML app.
Dynamically injecting the question and answers from the JSON data.
Testing and recording whether a question has been answered or not.
Defining a CSS class based on whether the question was answered correctly.
Adding support for answers to be images, or text.
Adding in content based on the correctness of the user's answer.
Adding the appropriate CSS class based on the correctness of the answer.
Learning to calculate the results of the user's answers.
Generating custom, data-driven, links for email and Twitter.
Adapting the quiz layout for smaller screens.