Udemy
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Development
Web Development Data Science Mobile Development Programming Languages Game Development Database Design & Development Software Testing Software Engineering Development Tools No-Code Development
Business
Entrepreneurship Communications Management Sales Business Strategy Operations Project Management Business Law Business Analytics & Intelligence Human Resources Industry E-Commerce Media Real Estate Other Business
Finance & Accounting
Accounting & Bookkeeping Compliance Cryptocurrency & Blockchain Economics Finance Finance Cert & Exam Prep Financial Modeling & Analysis Investing & Trading Money Management Tools Taxes Other Finance & Accounting
IT & Software
IT Certification Network & Security Hardware Operating Systems Other IT & Software
Office Productivity
Microsoft Apple Google SAP Oracle Other Office Productivity
Personal Development
Personal Transformation Personal Productivity Leadership Career Development Parenting & Relationships Happiness Esoteric Practices Religion & Spirituality Personal Brand Building Creativity Influence Self Esteem & Confidence Stress Management Memory & Study Skills Motivation Other Personal Development
Design
Web Design Graphic Design & Illustration Design Tools User Experience Design Game Design Design Thinking 3D & Animation Fashion Design Architectural Design Interior Design Other Design
Marketing
Digital Marketing Search Engine Optimization Social Media Marketing Branding Marketing Fundamentals Marketing Analytics & Automation Public Relations Advertising Video & Mobile Marketing Content Marketing Growth Hacking Affiliate Marketing Product Marketing Other Marketing
Lifestyle
Arts & Crafts Beauty & Makeup Esoteric Practices Food & Beverage Gaming Home Improvement Pet Care & Training Travel Other Lifestyle
Photography & Video
Digital Photography Photography Portrait Photography Photography Tools Commercial Photography Video Design Other Photography & Video
Health & Fitness
Fitness General Health Sports Nutrition Yoga Mental Health Dieting Self Defense Safety & First Aid Dance Meditation Other Health & Fitness
Music
Instruments Music Production Music Fundamentals Vocal Music Techniques Music Software Other Music
Teaching & Academics
Engineering Humanities Math Science Online Education Social Science Language Teacher Training Test Prep Other Teaching & Academics
AWS Certification Microsoft Certification AWS Certified Solutions Architect - Associate AWS Certified Cloud Practitioner CompTIA A+ Cisco CCNA Amazon AWS CompTIA Security+ Microsoft AZ-900
Photoshop Graphic Design Adobe Illustrator Drawing Digital Painting InDesign Character Design Canva Figure Drawing
Life Coach Training Neuro-Linguistic Programming Mindfulness Personal Development Personal Transformation Meditation Life Purpose Coaching Neuroscience
Web Development JavaScript React CSS Angular PHP WordPress Node.Js Python
Google Flutter Android Development iOS Development Swift React Native Dart Programming Language Mobile Development Kotlin SwiftUI
Digital Marketing Google Ads (Adwords) Social Media Marketing Google Ads (AdWords) Certification Marketing Strategy Internet Marketing YouTube Marketing Email Marketing Retargeting
SQL Microsoft Power BI Tableau Business Analysis Business Intelligence MySQL Data Analysis Data Modeling Big Data
Business Fundamentals Entrepreneurship Fundamentals Business Strategy Online Business Business Plan Startup Freelancing Blogging Home Business
Unity Game Development Fundamentals Unreal Engine C# 3D Game Development C++ 2D Game Development Unreal Engine Blueprints Blender
30-Day Money-Back Guarantee

This course includes:

  • 3 hours on-demand video
  • 1 downloadable resource
  • Full lifetime access
  • Access on mobile and TV
Design Web Design AngularJS

Creating a Quiz with AngularJS 1.x

Learn to create an engaging, animated, and interactive promotional quiz for your website or digital publication.
Rating: 4.2 out of 54.2 (92 ratings)
682 students
Created by Chris Converse
Last updated 9/2015
English
English [Auto]
30-Day Money-Back Guarantee

What you'll learn

  • 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

Requirements

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

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.

Running Time: 2:55 (175 minutes)

Who this course is for:

  • Web Designers
  • Web Developers
  • Interactive / UX Designers

Course content

5 sections • 30 lectures • 2h 53m total length

  • Preview01:03
  • Preview01:15
  • Preview02:07
  • Preview02:08

  • Preparing the base layout
    03:35
  • Adding main content containers
    02:26
  • Adding style to the intro screen
    07:42
  • Styling the main heading
    03:18
  • Preview06:36
  • Styling the answer states
    07:29
  • Setting the answered state of the question
    04:14
  • Adding content and style to the feedback container
    07:45
  • Adding content and style to the results container
    07:56
  • Creating the progress bar
    11:05

  • Setting up the AngularJS app and controller
    08:18
  • Preview10:27
  • Loading JSON data into our app
    06:22

  • Setting up the progress bar and intro screen
    07:56
  • Creating a click event to begin the quiz
    04:46
  • Generating the questions and answers
    05:27
  • Preview06:08
  • Setting active and answered states for questions
    07:28
  • Setting active and answered states for answers
    06:37
  • Preparing the answers to support images
    05:34
  • Adding the feedback content
    05:00
  • Setting active and answered states for the progress bar
    03:28
  • Calculating the user’s results
    08:59
  • Preview10:00
  • Making your quiz responsive
    08:04

  • Preview00:42

Instructor

Chris Converse
Designer and Developer at Codify Design Studio
Chris Converse
  • 4.3 Instructor Rating
  • 1,662 Reviews
  • 47,089 Students
  • 11 Courses

Chris has over 25 years experience in graphic and interactive design, with a unique focus on both design and development. As a graduate of the Rochester Institute of Technology (RIT), he has focused his career on merging design and technology to create the optimal execution across various media. In addition to graduating from the Rochester Institute of Technology, he is also a featured speaker at various industry-related conferences, including the Adobe MAX, NAB, CreativePro Week and Keyframes. Watch his step-by-step courses online at LinkedIn Learning, Udemy, Skillshare, CPDForumula, CreativeLive, Pluralsight, or on Amazon Video.

  • Udemy for Business
  • Teach on Udemy
  • Get the app
  • About us
  • Contact us
  • Careers
  • Blog
  • Help and Support
  • Affiliate
  • Terms
  • Privacy policy
  • Cookie settings
  • Sitemap
  • Featured courses
Udemy
© 2021 Udemy, Inc.