English Quiz

Project Overview

What is it?

English Quiz is a responsive single-page application (SPA) built with the Angular.js framework, and using Angular Material for the UI design. It is a quiz, with which users can quickly test their level of English according to the European CEFR levels.

What was the objective?

To create a responsive app with the Angular.js framework as part of the CareerFoundry Web Development course.

Which tools were used?

Client-side: Angular.js, Angular Material
Development Environment: Node.js
Libraries: jQuery
Hosting: GitHub pages

Building The App

The technical requirements for creating the app:

• The app must be built with Angular.js.
• The app must be an SPA.
• The UI must be created using Angular Material.
• TypeScript must be used to build the app.
• The quiz data must be mapped from JSON files.
• The app must be responsive.
• The source code must be deployed to a publicly accessible platform like GitHub.
• The app must be hosted on GitHub Pages.

The UI

The UI for the different views.

Responsive design.

The application has been responsively designed for desktops, tablets, and mobiles using Angular Material, CSS, media query breakpoints, and flex boxes. Demo the app here.

The source code is deployed to GitHub, a platform for hosting, collaborating, and version control. Take a look at the code here.

---

Challenges Faced

This was my first contact with Angular.js, and once again the learning curve was steep given that I had to come to terms with, and learn, a new framework from scratch. In spite of this the experience was very positive, and enabled me to add yet another string to my web development bow.