Purpose of a Challenge
The purpose of the challenge is to present a work-from-home challenge to developers interviewing for positions on AngularJS projects. Their challenge is to create an online HTML5 application... And I preface the request with a comment that this is a non-trivial request imposed on the candidate.
But such a challenge has HUGE benefits in that it (1) allows a review team myriad opportunities to perform a full-suite assessment of the developer candidate and (2) it also removes much of the
time factor from the challenge. Candidates can use their own tools, own resources, and invest significantly more time into the project than would otherwise be available in a single screensharing session such as Google Hangout.
Ideally, you have candidates to whom you can present this challenge... candidates that have not seen/studied the solution presented here. ;-)
The developer candidate is asked to implement an AngularJS web application that will allow users to take a quiz, evaluate the given answers, and present a review of quiz scoring to the user/tester. The review should show the correct answers and - when appropriate - also show the tester their incorrect answers. Logout should also be supported after the review in presented.
- Six (6) questions are initially provided; without answers to the actual questions.
Once the developer has finished (to whatever level they decide is appropriate), the developer should configure a GitHub repository as well as an online verion of the live app. How the demo is deployed is up to the developer.
Upon completion [or partial completion] of the challenge, the review team's assessment will consider factors such as:
- motivation, attitude, and competence
- skill levels, best practices, coding style, clarity-of-code
- architecture solutions, component implementation, and DRY-ness
- solution usability and user testing features
- and more…
The developer should note that the challenge is expected to require approximately 20-40 hours of effort.
The developer should use:
- Bonus points for use of HAML and CoffeeScript
Additionally the developer should:
- Avoid jQuery (rely on AngularJS’ JQLite where possible)
- Organize project in a way that makes sense.
Before you explore the source code for Quizzler, I highly recommend that you first read the Dependency Injection using RequireJS and AngularJS tutorial; since all of the source uses both RequireJS injection and AngularJS injection.
Quizzler is an AngularJS
online quiz builder and testing application; developed as a deliverable to a challenge presented to developers who are interviewing at
Visitors can either walkthru the Live Demo or simply look at snapshots of running application:
Using AngularJS (v1.2.x) and RequireJS,
Quizzler is architected with minimum coupling and crisp bootstrapping.
HeadJS is used to asynchronously load the required scripts before bootstrapping the NG application.
- Quizzler supports 1…n quizes defined in JSON format.
- The quiz data is dynamically loaded and the dynamic workflow will guide the tester thru 1..n questions.
- Quiz questions can contain HTML with references to external images, etc.
Extra application features added to the implementation include
- Use of RequireJS with AngularJS
- Authentication module,
- session management,
- history navigation,
- question validation,
- enhanced logging,
- and more.
Robust logging is used through-out the application and even logging during the bootstrapping process: before
$log injection is available; see my blog article Using Decorators to Enhance AngularJS $log for details.
Here is a brief explanation of the directory structures:
client: directory contains the source code, css, html, and vendor libraries for Quizzler.
build: directory contains the Bower settings, initial files for Travis deployment, and pending Grunt files for builds
tools: directory contains a CoffeeScript webserver that allows developers to easily run and debug
docs: directory contains the initial challenge requirements (PDF) and mockups.
To install the project, download entire repository to local project directory and open a Terminal window at local project directory. Then use Bower to install the vendor tools/libraries and Grunt to install the build tools:
cd ./build bower install npm update
Use Terminal to start the CoffeeScript, built-in Quizzler Web Server web server; provided in the
cd ./client coffee ../tools/webserver/run.coffee
Launch webServer. Developers can use the
./client directory as the webroot... So open browser and navigate to
A deployment process is now available to deploy your application in development mode or production mode.
Development mode deploys copy all the class files to the webroot and uses RequireJS to lazy load required class files. Use the following Terminal commands:
cd ./build grunt dev
Production deploys use Grunt RequireJS to concatenate, minimize, and deploy a production version of
Quizzler . All application code is compressed into
cd ./build grunt prod
Considering the short deliverable time for this solution, the current implementation has several aspects that should/must be improved:
- Implementation of multiple quizes with quiz selector
- Persistence of Quiz results
- Reduction and clarity-improvement of CSS using LessCSS
- Improved UX for Login
- input fields color code when errors occur
- input fields clear state indicators when typing
- focus indicators improved
- implementation of register
- auto-restore last-signin email
- look-ahead for email field
- Improved UX for Quiz
- Hover indicators for questions
- Field for user-submitted questions/comments
- Timer for entire quiz
- Breadcrumbs for quiz
- Animation of questions as user selects continue or submit
- Splash Preloading screen with progress indicator
- Header bar with email
- Footer bar with copyright information
Additionally developer workflow processes could be significantly improved with the following:
- Use of grunt for builds/deploys
- Use of Git pre-commit hooks to run tests
- Use of JSHint checks
- Deployment to Jenkins/Travis for CI and testing
- Minification of application code
NOTE: Launching of Jasmine unit tests and execution of Karma should be considered in-complete and are currently in-progress!