Johnny's Version of Sliding Puzzle Quiz

Instructions on running puzzle

To run the project, in the terminal, go to the directory where the project is cloned and run (if you have ruby 1.9.2+ installed)

$ ruby -run -ehttpd . -p8000

Alternatively, go to https://gist.github.com/willurd/5720255 and use one of the web servers listed there!

Open a browser and in the address bar, go to http://localhost:8000

Instructions on how to edit Sass files and have it compile

In the project root directory, or where the project is cloned. Run this command for Sass to watch changes in the styles folder. If you don't have Sass installed, check out http://sass-lang.com/install to see how to install the tool.

$ sass --watch styles/scss:styles

Breathe in, breathe out.

This quiz will be used most importantly to evaluate skill set and the type of tasks/projects you'd be great for. There are many different ways to solve the challenges outlined below, so take your time, and let us know if you have any questions.

Important: Read all of the instructions and information below before beginning.

Instructions

You have up to 48hrs to complete this quiz, starting from the time you've been given access to this repo.
If you're unfamiliar with the 15 Puzzle, read up on it and make sure you have a good understanding of what it is. This quiz adapts that puzzle to an 8-tile variant.
Fork this repo. As you work on this quiz, commit all your work to that forked repo, but more importantly page your commits. The main aspect we want to gauge is your process, how you approach a problem, and the way you think.
No markup changes are allowed inside the body tag in the index.html file.
Do not use any front end libraries or frameworks for any of the tasks except when explicitly noted.
Make the puzzle work with the same interaction model as the original puzzle had.
- The application logic cannot be in global scope.
- Write comments throughout your application structure and logic. The degree of commenting that you do is up to you, but more importantly we want to be able to "read through" your thought process.
Style the puzzle to look exactly like both of the screenshots: "expected-desktop-result.png" and "expected-mobile-result.png".
- Any valid CSS is permitted.
- Across browsers, the puzzle should look the same or very close to the same.
- The mobile screenshot demonstrates the initial scale of the page.
- The user should be able zoom the page and styling should not break.
Cannot create a "blank" tile to fill the empty space in the puzzle.
Use this README to document any and all information that we will need to review your quiz.

Extra points

The items outlined so far are what we would consider the minimum set of requirements. It's okay if there are items that you cannot complete for some reason, but please let us know why. Additionally completing some of the Extra Point items can compensate for items not completed in the initial set.

The items that follow are optional: strongly advised but not strictly required. It's important to know that they're in no specific order, and they're independent to one another, so the strategy of execution in any of these is up to you and the time you have available. The more you complete, of course, the better.

Use Sass or SCSS, and optionally a CSS postprocessor such as PostCSS. No frameworks such Bourbon, Neutron, Compass, or otherwise are allowed; we want to see your CSS.
Use ES6/ES2015 or Typescript transpiled to ES5. If you decide to do this, please include and comment on your build process.
Make the same puzzle work for 15 tiles using the same application logic.
Expose a way to shuffle or disorder the tiles via the console. This is the only part of the application logic that is allowed to be exposed globally, but the shuffle functionality should remain unexposed and integrated into the rest of the application logic.
Unit test your application logic. Any testing framework is allowed. 100% coverage is not required.
Animate tiles moving into place instead of having them jump into place. Only non-jQuery or non-jQuery-dependent libraries are allowed to complete this task.
Integrate drag and drop events. Only non-jQuery or non-jQuery-dependent libraries are allowed to complete this task.

Deliverable