📦 Media File Download (9.5 MB)
*WorldSkills 2015 Test Project, Submitted by Marcelo Strehl - BR.
You may read the PDF version of the Test Project: WSC2015_TP17_ClientSideA_actual.pdf
Marking Scheme Excel File (It includes all test projects, please find only related aspects.)
To show off your web design skills, you have decided to create a small web application called Custom Puzzle. In Custom Puzzle, a user can submit a picture to create a puzzle from, with the number of pieces determined by the level of difficulty chosen at the beginning.
The challenge is to rebuild the original image by rotating and repositioning the pieces in the shortest time possible. There is a separate rank for each difficulty level, which is presented when the user successfully rebuilds the puzzle.
You have asked a friend to build the layout and the database of the application to accommodate the different ranks. Your task is to develop the functionality of the application based on the requirements presented to you.
The square pieces must be randomly shuffled across different positions in the starting area as well as randomly rotated.
WSC2015TP17ClientSideA_actual Version: 3.1 2 of 4 Date: 09.08.15
Clicking on the Pause Button, the time is paused and the starting area and destination area are hidden to the user. The text of the PAUSE button must be changed to “RESUME”. No actions are permitted during a pause
time. Click again in the RESUME button, the starting and destination areas are presented again to the user,
the label of the button return no “PAUSE” and the time continue.
The user can select one piece of the starting area by clicking on it. When a piece is selected, it can be rotated
by using keyboard arrow: left or right and it can be dragged and dropped to the destination area. When selected the piece must be elevated over the rest of the other pieces.
The user can rotate the selected piece clockwise using the right arrow key (→) on the keyboard. Every key press rotates the piece 90 degrees clockwise.
The user can rotate the selected piece counterclockwise using the left arrow key (←) on the keyboard. Every key press rotates the piece 90 degrees counterclockwise.
When a piece is dropped to the destination area it will be accepted if the position and the rotation are good otherwise the piece will return to the starting area with the same starting rotation and position, no selected.
When a dropped piece is accepted in the destination area, it will snap in that position and the opacity at that position will disappear. The piece will reveal is real color with an animation.
The actions of elevate a selected piece, rotate a piece need to be animated in the application.
The actual state of the game needs to be saved in the local storage of the browser. If users reload the page it
should show the puzzle which they were doing. Position of pieces, configuration variables and the time
elapsed need to be presented again.
The puzzle is solved when the original image is completely rebuilt in the destination area. The clock must stop
at this time.
The result must be saved to a MySQL database on the server, with the username, difficulty level and the time
elapsed for each game.
After saving the result, a modal saying “Congratulations! You have solved the puzzle!” must be displayed
with an animation, along with the rank table for the respective level (the level of the puzzle newly completed)
and a button to restart the application.
The Rank Table presents the three best results ordered by elapsed time for the same level. The position and
the results of the current user need to be presented too. If the current result is in the top 3 results, just the 3 best results are presented. The ranking table must present position, difficult level, name and time elapsed. If exists more than one register with the same elapsed time, these users receive the same position in the Rank Table.
Clicking the “Restart Application” button closes the results modal and shows the Start Modal, allowing the user to start a new puzzle.
The folder “media” contains all the files provided by your friend to develop the application. To develop the task, you can use jQuery and jQuery UI if you find necessary. You can modify the provided files if necessary to guarantee the correct functionalities of your application but your application makes use of the general layout provided. The database is provided to you in one SQL file, you need to restore/create the database to register the results and retrieve the results to show the rank table.
Save the files of your application in directory on the server called "XX_ClientSide _A", where XX is your country code.