Kisi-Kisi LKS SMK 2017 Lengkap - KUMPULAN PTK 3. LKS WDD 2017 v01
Test Project – Module A
Contents
This module has the following files:
LKSN_Module_A_EN.zip
There will be no files provided in this pre-competition release.
Introduction
Local government from West Java (Jawa Barat) needs some improvement of design for their website about
local legacy place. They need you to enhance and renew the design of the website layout and interface. Local
government needs to deliver the good content to all of civil society in West Java. You need to design the
layout and the website for them in the modern way of website design.
Description of project and tasks
Your task is designing a new website and create a new responsive version that is designed to work on several
devices with different resolutions. The responsive website should provide an optimal viewing experience for
users accessing the website with a computer, tablet or smartphone.
You must create the legacy place logo. You must also use all the text and information from the list of text that
already prepared by the local government into the new designs. While all information must be included it is
up to the competitor to organize and design how the information is presented and organized on the new
design of the website. You can use your creativity to create additional content or media where required. You
can also make changes on all of the provided images.
You should create mock-ups of your re-design to be presented in individual files for each of the defined
devices and resolutions (width x height):
Computer - 1440 x 900 pixels
Tablet - 768 x 1024 pixels
Smartphone - 320 x 480 pixels
The above resolutions are the devices standard format. Additional space may be used if needed to illustrate
scrolling or swiping as required by some devices. If you incorporate menus or other features into your design
you may illustrate these by include additional views, either within the design or in additional files. Features
and functionality should be self-explanatory, no written instructions are allowed in the mock-up files.
All mock-ups should be presented in real pixel size and must include a red line, less than 3 pixels wide,
showing the device screen border resolution.
Test Project proposal for Web Design
Date: 18.03.14
1 of 14
The design of front page must contain at least all information included on the original website. The computer
view should illustrate a hover/mouse over effect.
This is a design module, no coding is allowed and all interactions should be visible in the design images.
Your design will be assessed by industry standards and needs to incorporate best practice of responsive
design.
Instructions to the Competitor
Save
your
files
in
your
root
directory
on
the
server
called
"XX_Module_A"
where XX is your computer number.
Naming of Files:
o
Computer: XX_computer.png
o
Tablet: XX_tablet.png
o
Smartphone: XX_smartphone.png
You can create additional images (optional) per resolution to highlight hidden elements, animations or
any additional information that will aid in the development of the website.
Naming of additional files:
o
Computer: XX_computer_2.png, XX_computer_3.png
o
Tablet: XX_tablet_2.png, XX_tablet_3.png
o
Smartphone: XX_smartphone_2.png, XX_smartphone_3.png
Save the source files of images to a folder called "XX_source_files" inside "XX_Module_A" folder.
Source files are the files containing the layers, development files, i.e. .psd/.ai/.jpg/.svg/…
Below you can find an example of a computer view that may be submitted:
Test Project proposal for Web Design
Date: 18.03.14
2 of 14
Test Project – Module B
CONTENTS
This module has the following files:
LKSN_Module_B_EN.zip
There will be no files provided in this pre-competition release.
INTRODUCTION
You need to implement a layout for a company called Hotel Room. The UI designer has
designed the interfaces for you to make use of. You can find the design in the media
files supplied.
We want you to follow the design to implement the layout by using HTML and CSS. The
order and position of the sections should match all the provided designs when scaling
the browser window.
There is an interactive photo gallery - it is based on canvas and JavaScript. You have
been provided with the JavaScript for the interaction required. You will only need to set
the canvas ID to “photo-gallery” to make the photos gallery’s interaction work.
DESCRIPTION OF PROJECT AND TASKS
The following sections need to be implemented in your layout:
Website Heading
Sliding Banner
Header Navigation
Information Section
Services Section
List of Tours Section
Footer Section for short description, upcoming event, and footers menu
Contact Section
Copyright Section
This module tests your HTML, javascript and CSS skills.
Visual styles
All images and font face have been provided, you should only make a responsive layout for this
websites. The design has no gradation. There is a text selection background color applied to
the web page. The color follows the major color of the website, which is rgb (212,175,55) /
metallic gold.
All images should be filtered by 90% greyscale and 120% brightness when it’s hover (except
the banner section). Standard font for this module is only Arial.
Grid Layout
You should implement your own grid system for the website layout. You should not use any 3rd
party CSS code in this project – all code needs to be developed by Competitors.
Prefix Library
Prefix-free JS library (http://leaverou.github.io/prefixfree/) is provided.
Test Project proposal for Web Design
Date: 18.03.14
3 of 14
Notes
The HTML is valid to HTML5 through the W3 validator.
The CSS contains no syntax errors.
The “Banner Section” animation matches the provided motion design as much as possible.
The visual styles, including color and gradients, matches the design provided.
The order and position of web page sections matches the provided screenshot images.
The typography and spacing matches the provided screenshots.
All photos must be implemented by the img tag in order to be indexed by search engines.
Photos in the gallery must be index-able by search engines with fallback images.
The photo gallery functions as required.
All text is index-able by search engines.
At least five useful comments are added to the CSS code to make it easier to maintain
The text selection matches the provided design.
The custom font typography is integrated to match the provided design.
The CSS code should be grouped and coding style should be readable and easy to maintain.
Proper accessibility roles are applied. For example: document structure, complementary,
content, button
You should not use any built-in grid system, such as responsive CSS code from Dreamweaver.
INSTRUCTIONS TO THE COMPETITOR
Save your files in your root directory on the server called "XX_Module_B" where XX is
your computer number.
You are required to submit the implemented website according to the requirements.
Please make sure you name the HTML file index.html.
Test Project proposal for Web Design
Date: 18.03.14
4 of 14
Test Project - Module C
CONTENTS
This module has the following files:
LKSN_Module_C.zip
There will be no files provided for front-end in this pre-competition release
INTRODUCTION
A friend of yours would like to have a simple online game on his website. He has already prepared the front
end template, but needs some help with the server-side implementation of the interaction logic and
integration into his template.
The game he has chosen is called Othello.
DESCRIPTION OF PROJECT AND TASKS
Othello is a common single user game. It should suit the following user stories / test cases:
1
As an option he can upload a small photo on the initial page (no game session running or
started before / first time loading the game in that browser session). It is resized to the size of
50x50px and stored on the server's file system
The player can read the game rules, see the high-scores and start a new game session by
pressing the “Press to Begin”-button. The button is visible/functional at any time, also during a
running game. A new / initialized game board will then appear on the same page.
The photo will be used instead of a “default-user”-photo in all games within that browser
session i.e. the photo can only be uploaded once in a browser session – on the initial page –
and will then be used for all game sessions (pressing “Press to Begin”) instead of the defaultuser photo.
The photo will also be shown as the user’s photo in the high-scores (if the user chooses to
save a high score).
Accessing the page without an ongoing game session, no game board but the option to
upload a photo will be displayed.
After a page refresh (F5), the board is still displayed in its last state without re-starting the
game or changing any values (except the game time).
After the user has won (not lost), a text field to enter a nick name and submit button are
shown. They disappear after pressing the Save-button. The nick name, date (dd/mm/yyyy),
game time (in seconds; difference of timestamps from pressing “Start New Game” until
now/winning) and number of “black-tile” and “white-tile” are saved as high score on the server
and shown in the high score list.
In a tie-situation there will be no winner and the user can just start a new game if he likes (no
special actions).
The high scores are displayed all the time (in floating box), together with the user’s photo (if he
has uploaded one) and they are ordered by date/time (sequence of game sessions,
latest/newest on top/first).
2
3
In a new game, 2 “black-tile” and 2 “white-tile” each placed diagonally in the center of the
board. The “white-tile” player has the first move.
The computer has the next move. He will randomly choose one valid move of the remaining
fields and mark it with the “black-tile”. The computer has a think time of two seconds (time until
game board shows computer's move).
Winning state will be appear if the board is already full or there is no valid move.
The number of “black-tile” and “white-tile” and time running that game session (in seconds;
difference of timestamps from pressing “start new game” until now/winning; game time
Test Project proposal for Web Design
Date: 18.03.14
5 of 14
4
updated after each interaction) are shown above the game board.
A message is displayed to inform the player if he has won or lost.
Moves are sent to the server by an AJAX-GET request. The response contains JSON
information to update the current game board.
Data (photo, nick name, state of game) is sent to the server by a AJAX-POST-request and a
high-score/win can’t be faked
Your friend would like to publish your code (with your agreement). He might also want to add other games
later, reusing common code (eg.. input handling from HTTP GET/POST parameters / AJAX-data, usersession and game-session handling, photo upload, saving/displaying the high scores, etc.). Therefore it
should be nicely/modular organized, object oriented using interfaces and classes. Only methods accessed
from the outside should be public.
INSTRUCTIONS TO THE COMPETITOR
Save your files in your working directory on the server called "XX_Module_C", where XX is your computer
number.
Name the file to start the application “index.html” and put it directly into the directory mentioned.
Save all your files to be assessed into a suitable directory structure and naming inside the directory
mentioned above.
Save all your work files (those that will/should not be assessed – if any) into a subdirectory called “work”.
The template for the frontend is provided and should be modified to integrate the functionality.
This should happen dynamically (e.g. response from server).
The application should look and behave (css) as the provided template.
Test Project proposal for Web Design
Date: 18.03.14
6 of 14
Test Project - Module D
CONTENTS
This module has the following files:
LKSN_Module_D.zip
There will be no files provided for front-end in this pre-competition release
INTRODUCTION
WorldSkills International would like to create a web application to manage the reservation process for
Restaurant Service during a WorldSkills Competition. This tool will be used to request reservations to
participate in the Restaurant Service competition.
DESCRIPTION OF PROJECT AND TASKS
The overall application should suit the following requirements:
Bookings should be able to be done for an individual or a group. The look of the web application will
correspond with the WorldSkills brand.
Restaurant Service Seating information
There are four modules that each Restaurant Service Competitor has to perform during a lunch service
throughout the Competition on a rotation basis. Therefore all four modules are done each day from C1 - C4
by different Restaurant Service Competitors, thus each Restaurant Service Competitor will compete every
day and do one (different) module each day. This means that guests on the same day will have different
dining experience options.
The 4 modules are:
Casual Dining – 2 seating per day:
Seating 1 – 10:50am – 12:00pm
Seating 2 – 13:30pm – 14:40pm
Seating for each Restaurant Service Competitor in the following configuration:
1 table of 4
1 table of 2
Total guests required assuming 6 Restaurant Service Competitors would be 36 guests per
seating/day.
Bar Service – 1 seating per day:
Seating: 13:15pm – 14:45pm
Seating for each Restaurant Service Competitor in the following configuration:
1 table of 6
Total guests required assuming 6 Restaurant Service Competitors would be 36 guests per
seating/day
Fine Dining – 1 seating per day:
Seating: 13:00pm – 15:15pm
Test Project proposal for Web Design
Date: 18.03.14
7 of 14
Seating for each Restaurant Service Competitor in the following configuration:
1 table of 4
Total guests required assuming 6 Restaurant Service Competitors would be 24 guests per
seating/day.
Banquet Dining – 1 seating per day:
Seating: 12:45pm – 15:00pm
Seating for each Restaurant Service Competitor in the following configuration::
1 table of 6
Total guests required assuming 6 Restaurant Service Competitors would be 36 guests per
seating/day.
The information for the competition days (eg “C1 – 04.08.2015”) and the seating (name, description of
module, configuration eg. “1 table of 4 and 1 table of 2”, time eg “13:15pm – 14:45”, total number of
Restaurant Service Competitors, number of seats/guests per Competitor) are to be configurable in the
database (no need to create an interface; always four competition days and four Restaurant Service
modules).
The system shows the number of seats available (at the point of time when the page is called) for each of the
seatings. It is possible to request a booking for a full seating.
The maximum guests from the same country for one seating is the total number of seats for that seating
minus the seats served by one Restaurant Service Competitor (in the example above that would be
maximum 30 guests from one country for one seating of “Casual dining”). This is to make sure that no guests
will sit at the table where the Restaurant Service Competitor is from the same country as the guests. The
maximum number of guests is the same for any country, even if that country does not have a Restaurant
Service Competitor.
The system always accepts booking requests for any of the four competition days. Requests for past days
will not be considered by WSI staff and will be declined. Bookings requested that exceed already confirmed
seatings can be waitlisted in the case of a cancellation. The guest should be notified that they are on a
waitlist and that they will be called if a cancellation occurs.
Workflow
Submitted requests will automatically be scheduled into the overall schedule, but must be confirmed by WSI
staff. WSI staff need to have the option to reschedule bookings (per guest) for other days, times or dining
types. Once bookings are confirmed, the requester will receive an official email confirming their schedule.
Test Project proposal for Web Design
Date: 18.03.14
8 of 14
Figure 1: Reservation states
Pages required
Homepage with dining experience descriptions
Booking Contact Details and Guest Regulations
Booking Request for:
Individuals
Groups
Submission Confirmation
Reservation Management
Each of the pages and its behaviour is described below.
Homepage with Dining Experience descriptions
The homepage will give a brief overview of each dining experience.
Test Project proposal for Web Design
Date: 18.03.14
9 of 14
Booking Contact Details AND Guest Regulations
Everyone must accept the guest regulations before proceeding.
The mandatory fields must be verified and the email must be checked for correct pattern (eg. xxx@yyy.zzz).
For an individual, its name and country will also be used as guest information.
The list of countries is static and provided in the HTML code.
Booking Request
Individual
Test Project proposal for Web Design
Date: 18.03.14
10 of 14
Individuals may select more than one seating. Guests will be waitlisted for seating that are full.
Group
The booking contact (no booking request for a seat) may enter information about the guests they want to
request bookings for. They must select the day, dining experience and number of guests for each seating that will add/remove the respective number of lines/input fields for that seating. Guest must be identified by
their country at a minimum.
After submitting (pressing the button), the number of requests for guests from the same country per seating
will be verified (server side). If there are too many, the booking page containing all the data will be displayed
again, together with a message informing the booking contact to correct the request (see above). Only when
correct it will be submitted to the database and continue to the confirmation page.
Test Project proposal for Web Design
Date: 18.03.14
11 of 14
Submission Confirmation
Upon submitting their requests there should be a confirmation of their submission on screen. A text informs
them to wait for the reservation confirmation via email.
Reservation Management
Test Project proposal for Web Design
Date: 18.03.14
12 of 14
In a separate directory called “/management” inside the module directory (protecting this directory e.g. by
.htaccess is not required and not part of the competition) provide a page called
“ReservationManagement.php” where WSI staff can view all existing reservations and confirm (accept),
waitlist or decline pending reservations by selecting the respective radio button (shown only for “requested”
state) per entry. It is not necessary to select a radio button for each line – the entry can be left undecided for
later.
Pending (“requested” state) reservations can also be rescheduled to a different seating on the same or a
different day: marking the entry for rescheduling will show the dropdowns for selecting the day and seating
after saving (see above). Then the WSI staff can select the appropriate day and seating, set the entry to
“confirm” and save.
The list is sorted by day, then seating, then booking status (1. Confirmed, 2. Requested, 3. Waitlisted, 4.
Declined) and then booking no (sequence of booking). The requests per seating are numbered (number
preceding the name of guest). In that way it is easy for WSI staff to see how many guests they can allow
(see “Bar Service” above).
“Send emails” will send a note to each booking contact, showing the status of booking for every guest
Pressing the button multiple times will send multiple notes to the same contact unless every guest for that
contact is either confirmed or declined. For the competition “Send emails” will just save a text-file with
the specified information on the server in a directory “/emails”. Later that will be changed into sending
out an email.
Test Project proposal for Web Design
Date: 18.03.14
13 of 14
Export for Restaurant Service Host
Booking information must be able to be exported or viewable (csv or screen) by the Restaurant Service
host/hostess so they can seat people at the appropriate table (i.e. ensure that no one sits at a table with a
Competitor from their country). This can be done using the button “Generate Guest List”.
Host/Hostess should clearly see the following information for each guest, grouped by day, then by seating,
sorted by Booking No and filtered by status “confirmed”:
Booking No
Booking Contact Name
Booking Contact Organization
Guest Name
Guest Country
INSTRUCTIONS TO THE COMPETITOR
Save your files in your working directory on the server called "XX_Module_D", where XX is your
computer number.
It should be possible to start the application by calling the directory mentioned above. You might
need to create some kind of redirect to the applications main page.
Create/generate a DB-diagram named “db-diagram.xxx” (xxx is the extension/type of the file eg. pdf
or jpg) and put it into the directory mentioned above.
You can use phpmyadmin -> designer or any other tool to generate the diagram.
Example:
Save all your work files (those that will not be assessed) into a subdirectory called “work”.
Save all other files (those that will be assessed) into a suitable directory structure and naming inside
the directory mentioned above.
Create a SQL dump of your database and put the *.sql file in a folder “/dbdump” inside the directory
mentioned above (XX_Module_D).
For this module you must use one of the two available frameworks which you installed on
familiarization-day (C-2). Applications developed without use of any of these frameworks will not be
considered. You should take advantage of the framework as much as possible.
Test Project proposal for Web Design
Date: 18.03.14
14 of 14
Contents
This module has the following files:
LKSN_Module_A_EN.zip
There will be no files provided in this pre-competition release.
Introduction
Local government from West Java (Jawa Barat) needs some improvement of design for their website about
local legacy place. They need you to enhance and renew the design of the website layout and interface. Local
government needs to deliver the good content to all of civil society in West Java. You need to design the
layout and the website for them in the modern way of website design.
Description of project and tasks
Your task is designing a new website and create a new responsive version that is designed to work on several
devices with different resolutions. The responsive website should provide an optimal viewing experience for
users accessing the website with a computer, tablet or smartphone.
You must create the legacy place logo. You must also use all the text and information from the list of text that
already prepared by the local government into the new designs. While all information must be included it is
up to the competitor to organize and design how the information is presented and organized on the new
design of the website. You can use your creativity to create additional content or media where required. You
can also make changes on all of the provided images.
You should create mock-ups of your re-design to be presented in individual files for each of the defined
devices and resolutions (width x height):
Computer - 1440 x 900 pixels
Tablet - 768 x 1024 pixels
Smartphone - 320 x 480 pixels
The above resolutions are the devices standard format. Additional space may be used if needed to illustrate
scrolling or swiping as required by some devices. If you incorporate menus or other features into your design
you may illustrate these by include additional views, either within the design or in additional files. Features
and functionality should be self-explanatory, no written instructions are allowed in the mock-up files.
All mock-ups should be presented in real pixel size and must include a red line, less than 3 pixels wide,
showing the device screen border resolution.
Test Project proposal for Web Design
Date: 18.03.14
1 of 14
The design of front page must contain at least all information included on the original website. The computer
view should illustrate a hover/mouse over effect.
This is a design module, no coding is allowed and all interactions should be visible in the design images.
Your design will be assessed by industry standards and needs to incorporate best practice of responsive
design.
Instructions to the Competitor
Save
your
files
in
your
root
directory
on
the
server
called
"XX_Module_A"
where XX is your computer number.
Naming of Files:
o
Computer: XX_computer.png
o
Tablet: XX_tablet.png
o
Smartphone: XX_smartphone.png
You can create additional images (optional) per resolution to highlight hidden elements, animations or
any additional information that will aid in the development of the website.
Naming of additional files:
o
Computer: XX_computer_2.png, XX_computer_3.png
o
Tablet: XX_tablet_2.png, XX_tablet_3.png
o
Smartphone: XX_smartphone_2.png, XX_smartphone_3.png
Save the source files of images to a folder called "XX_source_files" inside "XX_Module_A" folder.
Source files are the files containing the layers, development files, i.e. .psd/.ai/.jpg/.svg/…
Below you can find an example of a computer view that may be submitted:
Test Project proposal for Web Design
Date: 18.03.14
2 of 14
Test Project – Module B
CONTENTS
This module has the following files:
LKSN_Module_B_EN.zip
There will be no files provided in this pre-competition release.
INTRODUCTION
You need to implement a layout for a company called Hotel Room. The UI designer has
designed the interfaces for you to make use of. You can find the design in the media
files supplied.
We want you to follow the design to implement the layout by using HTML and CSS. The
order and position of the sections should match all the provided designs when scaling
the browser window.
There is an interactive photo gallery - it is based on canvas and JavaScript. You have
been provided with the JavaScript for the interaction required. You will only need to set
the canvas ID to “photo-gallery” to make the photos gallery’s interaction work.
DESCRIPTION OF PROJECT AND TASKS
The following sections need to be implemented in your layout:
Website Heading
Sliding Banner
Header Navigation
Information Section
Services Section
List of Tours Section
Footer Section for short description, upcoming event, and footers menu
Contact Section
Copyright Section
This module tests your HTML, javascript and CSS skills.
Visual styles
All images and font face have been provided, you should only make a responsive layout for this
websites. The design has no gradation. There is a text selection background color applied to
the web page. The color follows the major color of the website, which is rgb (212,175,55) /
metallic gold.
All images should be filtered by 90% greyscale and 120% brightness when it’s hover (except
the banner section). Standard font for this module is only Arial.
Grid Layout
You should implement your own grid system for the website layout. You should not use any 3rd
party CSS code in this project – all code needs to be developed by Competitors.
Prefix Library
Prefix-free JS library (http://leaverou.github.io/prefixfree/) is provided.
Test Project proposal for Web Design
Date: 18.03.14
3 of 14
Notes
The HTML is valid to HTML5 through the W3 validator.
The CSS contains no syntax errors.
The “Banner Section” animation matches the provided motion design as much as possible.
The visual styles, including color and gradients, matches the design provided.
The order and position of web page sections matches the provided screenshot images.
The typography and spacing matches the provided screenshots.
All photos must be implemented by the img tag in order to be indexed by search engines.
Photos in the gallery must be index-able by search engines with fallback images.
The photo gallery functions as required.
All text is index-able by search engines.
At least five useful comments are added to the CSS code to make it easier to maintain
The text selection matches the provided design.
The custom font typography is integrated to match the provided design.
The CSS code should be grouped and coding style should be readable and easy to maintain.
Proper accessibility roles are applied. For example: document structure, complementary,
content, button
You should not use any built-in grid system, such as responsive CSS code from Dreamweaver.
INSTRUCTIONS TO THE COMPETITOR
Save your files in your root directory on the server called "XX_Module_B" where XX is
your computer number.
You are required to submit the implemented website according to the requirements.
Please make sure you name the HTML file index.html.
Test Project proposal for Web Design
Date: 18.03.14
4 of 14
Test Project - Module C
CONTENTS
This module has the following files:
LKSN_Module_C.zip
There will be no files provided for front-end in this pre-competition release
INTRODUCTION
A friend of yours would like to have a simple online game on his website. He has already prepared the front
end template, but needs some help with the server-side implementation of the interaction logic and
integration into his template.
The game he has chosen is called Othello.
DESCRIPTION OF PROJECT AND TASKS
Othello is a common single user game. It should suit the following user stories / test cases:
1
As an option he can upload a small photo on the initial page (no game session running or
started before / first time loading the game in that browser session). It is resized to the size of
50x50px and stored on the server's file system
The player can read the game rules, see the high-scores and start a new game session by
pressing the “Press to Begin”-button. The button is visible/functional at any time, also during a
running game. A new / initialized game board will then appear on the same page.
The photo will be used instead of a “default-user”-photo in all games within that browser
session i.e. the photo can only be uploaded once in a browser session – on the initial page –
and will then be used for all game sessions (pressing “Press to Begin”) instead of the defaultuser photo.
The photo will also be shown as the user’s photo in the high-scores (if the user chooses to
save a high score).
Accessing the page without an ongoing game session, no game board but the option to
upload a photo will be displayed.
After a page refresh (F5), the board is still displayed in its last state without re-starting the
game or changing any values (except the game time).
After the user has won (not lost), a text field to enter a nick name and submit button are
shown. They disappear after pressing the Save-button. The nick name, date (dd/mm/yyyy),
game time (in seconds; difference of timestamps from pressing “Start New Game” until
now/winning) and number of “black-tile” and “white-tile” are saved as high score on the server
and shown in the high score list.
In a tie-situation there will be no winner and the user can just start a new game if he likes (no
special actions).
The high scores are displayed all the time (in floating box), together with the user’s photo (if he
has uploaded one) and they are ordered by date/time (sequence of game sessions,
latest/newest on top/first).
2
3
In a new game, 2 “black-tile” and 2 “white-tile” each placed diagonally in the center of the
board. The “white-tile” player has the first move.
The computer has the next move. He will randomly choose one valid move of the remaining
fields and mark it with the “black-tile”. The computer has a think time of two seconds (time until
game board shows computer's move).
Winning state will be appear if the board is already full or there is no valid move.
The number of “black-tile” and “white-tile” and time running that game session (in seconds;
difference of timestamps from pressing “start new game” until now/winning; game time
Test Project proposal for Web Design
Date: 18.03.14
5 of 14
4
updated after each interaction) are shown above the game board.
A message is displayed to inform the player if he has won or lost.
Moves are sent to the server by an AJAX-GET request. The response contains JSON
information to update the current game board.
Data (photo, nick name, state of game) is sent to the server by a AJAX-POST-request and a
high-score/win can’t be faked
Your friend would like to publish your code (with your agreement). He might also want to add other games
later, reusing common code (eg.. input handling from HTTP GET/POST parameters / AJAX-data, usersession and game-session handling, photo upload, saving/displaying the high scores, etc.). Therefore it
should be nicely/modular organized, object oriented using interfaces and classes. Only methods accessed
from the outside should be public.
INSTRUCTIONS TO THE COMPETITOR
Save your files in your working directory on the server called "XX_Module_C", where XX is your computer
number.
Name the file to start the application “index.html” and put it directly into the directory mentioned.
Save all your files to be assessed into a suitable directory structure and naming inside the directory
mentioned above.
Save all your work files (those that will/should not be assessed – if any) into a subdirectory called “work”.
The template for the frontend is provided and should be modified to integrate the functionality.
This should happen dynamically (e.g. response from server).
The application should look and behave (css) as the provided template.
Test Project proposal for Web Design
Date: 18.03.14
6 of 14
Test Project - Module D
CONTENTS
This module has the following files:
LKSN_Module_D.zip
There will be no files provided for front-end in this pre-competition release
INTRODUCTION
WorldSkills International would like to create a web application to manage the reservation process for
Restaurant Service during a WorldSkills Competition. This tool will be used to request reservations to
participate in the Restaurant Service competition.
DESCRIPTION OF PROJECT AND TASKS
The overall application should suit the following requirements:
Bookings should be able to be done for an individual or a group. The look of the web application will
correspond with the WorldSkills brand.
Restaurant Service Seating information
There are four modules that each Restaurant Service Competitor has to perform during a lunch service
throughout the Competition on a rotation basis. Therefore all four modules are done each day from C1 - C4
by different Restaurant Service Competitors, thus each Restaurant Service Competitor will compete every
day and do one (different) module each day. This means that guests on the same day will have different
dining experience options.
The 4 modules are:
Casual Dining – 2 seating per day:
Seating 1 – 10:50am – 12:00pm
Seating 2 – 13:30pm – 14:40pm
Seating for each Restaurant Service Competitor in the following configuration:
1 table of 4
1 table of 2
Total guests required assuming 6 Restaurant Service Competitors would be 36 guests per
seating/day.
Bar Service – 1 seating per day:
Seating: 13:15pm – 14:45pm
Seating for each Restaurant Service Competitor in the following configuration:
1 table of 6
Total guests required assuming 6 Restaurant Service Competitors would be 36 guests per
seating/day
Fine Dining – 1 seating per day:
Seating: 13:00pm – 15:15pm
Test Project proposal for Web Design
Date: 18.03.14
7 of 14
Seating for each Restaurant Service Competitor in the following configuration:
1 table of 4
Total guests required assuming 6 Restaurant Service Competitors would be 24 guests per
seating/day.
Banquet Dining – 1 seating per day:
Seating: 12:45pm – 15:00pm
Seating for each Restaurant Service Competitor in the following configuration::
1 table of 6
Total guests required assuming 6 Restaurant Service Competitors would be 36 guests per
seating/day.
The information for the competition days (eg “C1 – 04.08.2015”) and the seating (name, description of
module, configuration eg. “1 table of 4 and 1 table of 2”, time eg “13:15pm – 14:45”, total number of
Restaurant Service Competitors, number of seats/guests per Competitor) are to be configurable in the
database (no need to create an interface; always four competition days and four Restaurant Service
modules).
The system shows the number of seats available (at the point of time when the page is called) for each of the
seatings. It is possible to request a booking for a full seating.
The maximum guests from the same country for one seating is the total number of seats for that seating
minus the seats served by one Restaurant Service Competitor (in the example above that would be
maximum 30 guests from one country for one seating of “Casual dining”). This is to make sure that no guests
will sit at the table where the Restaurant Service Competitor is from the same country as the guests. The
maximum number of guests is the same for any country, even if that country does not have a Restaurant
Service Competitor.
The system always accepts booking requests for any of the four competition days. Requests for past days
will not be considered by WSI staff and will be declined. Bookings requested that exceed already confirmed
seatings can be waitlisted in the case of a cancellation. The guest should be notified that they are on a
waitlist and that they will be called if a cancellation occurs.
Workflow
Submitted requests will automatically be scheduled into the overall schedule, but must be confirmed by WSI
staff. WSI staff need to have the option to reschedule bookings (per guest) for other days, times or dining
types. Once bookings are confirmed, the requester will receive an official email confirming their schedule.
Test Project proposal for Web Design
Date: 18.03.14
8 of 14
Figure 1: Reservation states
Pages required
Homepage with dining experience descriptions
Booking Contact Details and Guest Regulations
Booking Request for:
Individuals
Groups
Submission Confirmation
Reservation Management
Each of the pages and its behaviour is described below.
Homepage with Dining Experience descriptions
The homepage will give a brief overview of each dining experience.
Test Project proposal for Web Design
Date: 18.03.14
9 of 14
Booking Contact Details AND Guest Regulations
Everyone must accept the guest regulations before proceeding.
The mandatory fields must be verified and the email must be checked for correct pattern (eg. xxx@yyy.zzz).
For an individual, its name and country will also be used as guest information.
The list of countries is static and provided in the HTML code.
Booking Request
Individual
Test Project proposal for Web Design
Date: 18.03.14
10 of 14
Individuals may select more than one seating. Guests will be waitlisted for seating that are full.
Group
The booking contact (no booking request for a seat) may enter information about the guests they want to
request bookings for. They must select the day, dining experience and number of guests for each seating that will add/remove the respective number of lines/input fields for that seating. Guest must be identified by
their country at a minimum.
After submitting (pressing the button), the number of requests for guests from the same country per seating
will be verified (server side). If there are too many, the booking page containing all the data will be displayed
again, together with a message informing the booking contact to correct the request (see above). Only when
correct it will be submitted to the database and continue to the confirmation page.
Test Project proposal for Web Design
Date: 18.03.14
11 of 14
Submission Confirmation
Upon submitting their requests there should be a confirmation of their submission on screen. A text informs
them to wait for the reservation confirmation via email.
Reservation Management
Test Project proposal for Web Design
Date: 18.03.14
12 of 14
In a separate directory called “/management” inside the module directory (protecting this directory e.g. by
.htaccess is not required and not part of the competition) provide a page called
“ReservationManagement.php” where WSI staff can view all existing reservations and confirm (accept),
waitlist or decline pending reservations by selecting the respective radio button (shown only for “requested”
state) per entry. It is not necessary to select a radio button for each line – the entry can be left undecided for
later.
Pending (“requested” state) reservations can also be rescheduled to a different seating on the same or a
different day: marking the entry for rescheduling will show the dropdowns for selecting the day and seating
after saving (see above). Then the WSI staff can select the appropriate day and seating, set the entry to
“confirm” and save.
The list is sorted by day, then seating, then booking status (1. Confirmed, 2. Requested, 3. Waitlisted, 4.
Declined) and then booking no (sequence of booking). The requests per seating are numbered (number
preceding the name of guest). In that way it is easy for WSI staff to see how many guests they can allow
(see “Bar Service” above).
“Send emails” will send a note to each booking contact, showing the status of booking for every guest
Pressing the button multiple times will send multiple notes to the same contact unless every guest for that
contact is either confirmed or declined. For the competition “Send emails” will just save a text-file with
the specified information on the server in a directory “/emails”. Later that will be changed into sending
out an email.
Test Project proposal for Web Design
Date: 18.03.14
13 of 14
Export for Restaurant Service Host
Booking information must be able to be exported or viewable (csv or screen) by the Restaurant Service
host/hostess so they can seat people at the appropriate table (i.e. ensure that no one sits at a table with a
Competitor from their country). This can be done using the button “Generate Guest List”.
Host/Hostess should clearly see the following information for each guest, grouped by day, then by seating,
sorted by Booking No and filtered by status “confirmed”:
Booking No
Booking Contact Name
Booking Contact Organization
Guest Name
Guest Country
INSTRUCTIONS TO THE COMPETITOR
Save your files in your working directory on the server called "XX_Module_D", where XX is your
computer number.
It should be possible to start the application by calling the directory mentioned above. You might
need to create some kind of redirect to the applications main page.
Create/generate a DB-diagram named “db-diagram.xxx” (xxx is the extension/type of the file eg. pdf
or jpg) and put it into the directory mentioned above.
You can use phpmyadmin -> designer or any other tool to generate the diagram.
Example:
Save all your work files (those that will not be assessed) into a subdirectory called “work”.
Save all other files (those that will be assessed) into a suitable directory structure and naming inside
the directory mentioned above.
Create a SQL dump of your database and put the *.sql file in a folder “/dbdump” inside the directory
mentioned above (XX_Module_D).
For this module you must use one of the two available frameworks which you installed on
familiarization-day (C-2). Applications developed without use of any of these frameworks will not be
considered. You should take advantage of the framework as much as possible.
Test Project proposal for Web Design
Date: 18.03.14
14 of 14