/sliding-puzzle-quiz

A quick, hopefully fun, quiz to evaluate skill set and the type of tasks/projects you'd be great for.

Primary LanguageJavaScript

Sliding Puzzle Quiz

Patrick's Notes

Running the Puzzle

Two versions of the puzzle are available, the 15 piece and the 8 piece. To run, open the index.html file of the specific version in any web browser.

Screenshots

Screenshots of the app running can be found in the screenshots folder.

Misc.

  • Despite my efforts, I was unable to write the game logic without using a 'blank' piece. I am curious how this would be achieved. I'm assuming it would have something to do with the positioning of the tiles.
  • I tried my hand at creating a shuffle function to juggle the tiles around, but I was unable to get it working due to the logic in place and without exposing too much of the game logic.

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

  1. You have up to 48hrs to complete this quiz, starting from the time you've been given access to this repo.

  2. 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.

  3. 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.

  4. No markup changes are allowed inside the body tag in the index.html file.

  5. Do not use any front end libraries or frameworks for any of the tasks except when explicitly noted.

  6. 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.

  7. 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.

  8. Cannot create a "blank" tile to fill the empty space in the puzzle.

  9. 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

  1. A link to the forked repo emailed to us as soon as you start the quiz.

  2. A commit modifying the README around the same time frame as the email mentioned above. The change can be anything. Similarly, it should mark the beginning of your work on the quiz.

  3. Screenshots of as many browsers as you can get your hands on, mobile and desktop, even if they're simulators or VMs. These can be emailed to us or committed to the repo.

  4. An email notifying somebody from our team that you have completed your work on the quiz.