Professional Documents
Culture Documents
DESKRIPSI TEKNIS
1.1. Introduction
In recent years, the internet has become an integral part of our
daily lives, enabling the dissemination of information in an
inexhaustible source of content and interaction. Every day the use
of games has gained a prominent role in this universe, allowing
millions of people to get access to fun and entertainment quickly
and free.
You should design the game, develop the layout using HTML and
CSS and develop client-side programming using JavaScript and its
open source libraries. Some media files are available to you in a zip
file. You can create more media and modify anything in the media if
you want.
3. “Play” buttons must have active and hover effects. The background
of the buttons in hover state must be: #241D4F. The active state
must be a slide effect with #656083 that is moving from the left to
the right.
5. The HTML and CSS code must be valid in the W3C standards for
HTML 5 and CSS 3 rules.
1. Pressing the “Play” button in the initial screen starts the game. The
game will generate brick randomly in a 4 rows and 9 column
configuration. In each configuration there must be exactly one of the
3 available power-up brick that cannot be placed in the side of the
groups. The player will be given 3 life at the start of the game.
2. At the start of the game, the ball will launch from the center of
player pad vertically to the top of the screen.
4. The ball cannot leave the screen except in the bottom of the screen.
5. All brick must be placed in the top area of the screen, and player
pad must be placed near the bottom of the screen.
6. Each brick will be destroyed after a ball hit it twice. The top steel
brick can only be damaged if the ball hit its top and the bottom steel
brick can only be damaged if the ball hit its bottom. Each destroyed
brick will increase the score progressively, the first destroyed brick
will give 1 score, and the next brick will give 2 score, and so on. The
given score will be reset to 1 each time the ball hit the player pad.
7. There is 5 ball brick that will spawn 5 new ball each in different
directions when destroyed.
8. There is power brick that will make all brick can be destroyed in one
hit and can also destroy steel brick in one hit from the steel parts for
10 seconds with matching indicator.
9. There is a bomb brick that will make all 8 adjacent brick destroyed
at once when destroyed.
10. Player can move the player pad by moving the mouse in the
direction they want. The player pad must follow the mouse
horizontal position on the screen.
12. If the ball hit the center part, the ball will be reflected with equal
degree of opposing direction from the incoming direction (if the ball
come from the right in 30 degree angle and hit the center, it will
reflected at 30 degree angle to the right).
13. If the ball hit the left part, the reflected direction will be added 30
degree to the left and if the ball hit the right part, the reflected
direction will be added 30 degree to the right.
14. There is a round system that determine the difficulty of the game,
whenever all brick is destroyed the round will be added by 1. In the
first round, all brick is normal brick and brick with power up. In each
third round, add one row to the brick configuration. In other round,
add 5 steel brick to replace 5 normal brick.
15. When the last ball on the screen pass the player pad from the top of
the pad to the bottom of the pad. The player’s life will be decreased
by 1.
16. The game is over when either the player life is zero or player
successfully clear round 8.
17. During the game, the user can pause the game by clicking the
pause button, or by pressing the letter “p” on the keyboard. When
the game is paused, all interactions and sounds must be stopped. If
the user clicks the pause button again, or presses the letter “p”
again, the game continues from the moment that it was paused.
19. When the game is over, the animations, sounds, interactions and
the timer counter stops, the game will collect the name of the user
in a form field “Name”. The user fills the “Name” field and clicks the
button “Continue”. The “Continue” button should be disabled until
the user fills in the “Name” field.
20. The user name, the score and the round number need to be
persistent in the local machine
20.1. name: name of the user
20.2. score: number (integer) of points earned in a game
session
20.3. round number: number (integer) of brick group cleared
21. The game presents the user ranking to the user with the button
“Play” that permits restarting the game. Clicking in the “Play” button
the game instructions are presented to the user again.
26. Your game should remain at the same state if the page is
refreshed.
28. Maintain your HTML/CSS and JavaScript code organized and clean
to facilitate future maintenance. Use correct indentation and
comments. Use meaningful variable names and document your
code as much as possible so another developer would be able to
modify your work in the future
29. The game needs to work correctly in two browsers, Google Chrome
and Mozilla Firefox. The game requirements will be checked in
Google Chrome and compatibility will be checked in Mozilla Firefox.
1. The media files are available in the ZIP file. You can modify the
supplied files and create new media files to ensure the correct
functionality and improve the application. You can use any supplied
JavaScript framework if you find it necessary.
2. Save your design files in a folder call "XX_Client_Side/XX_design"
where XX is your Workstation number.
3. File names:
Instructions: XX_main_menu.png
2. CMS
2.1. Introduction
Thailand Food Guides is a brand new startup company that
wants to introduce Thailand cuisine around the world. The company
needs a new website to showcase a lot of recipes, ingredients and
blog posts about Thailand cuisine to the young people who access the
website.
Navigation bar in the website must be fixed to the top of the window
when scrolled. The navigation bar must contain the company logo and
links to main page, recipe lists, blog posts, ingredients database and
search functionality for recipes.
Also, you have to implement a sidebar for the website which content
can be modified by admin in the dashboard. The sidebar will be used
mostly to present blog posts. Please remember that you must not add
search widget to the sidebar because it is already added in the
navigation bar. The sidebar must be added to all posts and pages.
Footer must be implemented in all posts and pages and must contain
the list of at most 5 popular recipes in the website, at least three social
media icons and copyrights with your country name in it.
You can add your own elements to enhance the design of the website.
The post content and post design should be appealing to attract users
to read the post. Adding animations can be a good way to attract users
to read the post. For each posts, the featured image is optional, make
sure the design won’t damage the design if a posts doesn’t contain
featured image.
The company also wants their website to display food recipes based on
the number of likes of the recipe so that users can make their own food
using the most popular recipe. Visitors can like the food recipes they
currently read. Each visitor can only like a recipe once.
The food recipe section should show the list of the recipes that was
added by the admin. It should be ordered based on the number of likes
2.2.2. Technique
The website shouldn’t produce any weird result when scaling the
browser window between 1440px and 320px. The layout of the website
should be identical to your designs. You have to implement the
responsive design on the website. For a better standard of the SEO
support for the website, you should implement the HTML and CSS
based on the W3C standards.
The food blog post should always show at most the top four trending
post based on user view. User view amount should present in the food
blog table in the admin dashboard and in each blog post for the user to
see.
The food recipe post should always show at most the top four trending
post based on user likes. Recipe can be liked by users and it will affect
the order of listing of the recipe in the main page based on the like
numbers. The like amount of the recipe should also present in the food
recipe table in the admin dashboard and in each recipe post for the
user to see. Food recipe post should contain the ingredients that’s
needed by the recipe and can link to the ingredient post. All food blog
posts, food recipes posts, ingredient post can be commented by users
and all comment can be replied at most two levels deep. Each
ingredients should contain 3 additional field (calorie, fat and
carbohydrate).
For the sake of the good maintenance of the design and future
development, you are required to design a style guide for the future
web designer. Don’t forget to add comments and explanation to the
style guide to make sure that all of the elements provided will be used
in the right way.
The style guide must be saved as: Style_Guide.*. The style guide must
be saved as *.png and *.psd or *.ai.
CMS Details
For security reason, users need to have certain roles in order to access
the features. There should be 3 different users for the Wordpress with
their own access of dashboard features:
Layout Builder
3. Server Side
2.1. Introduction
I. Web Service
“Suka Koding” will provide the list of web services that need to be
created. Web service specification will contain the URL path of
web service, request method, requested parameter on URL,
requested parameter on body request, response result and
response status. Request and response on web service should
only contain JSON.
These are the list of web service that requested by the company:
e. Update proposal
(v1/proposal/{ID}?token={AUTHORIZATION_TOKEN}), only admin
can access this API
Description: For client to update an existing proposal object via
given proposal ID
Request method: POST
Header: header authorization basic
Request parameter:
- Body:
o [name]
o [description]
o [Deadline]
o [time_needed]
o [profit]
Response result:
- If success, body:
o Message: update success
o Response status: 200
- If failed, body:
o Message: Data cannot be updated
o Response status: 400
- If unauthorized user access it, body:
o Message: Unauthorized user
o Response status: 401
3. Suggestion
a. Give suggestion
(v1/suggestion?token={AUTHORIZATION_TOKEN}), admin and
user can access this API
Example:
Current week of the year: 1
Current submitted proposals:
Name deadline time_needed profit
IDR
A 4 1 40,000,000
IDR
B 3 2 50,000,000
IDR
C 2 1 30,000,000
IDR
D 6 3 35,000,000
Response result:
body:
o All accepted proposals on array; consists of id, name,
description, deadline, time_needed, profit
o Response status: 200
- If unauthorized user access it, data:
1. Proposals Suggestion
User can click a button to generate accepted project suggestions.
Show all information about accepted proposals, calculate and show the
total profit.
2. User Authentication
Functionalities:
a. Login and logout should happen on the same page without
redirect.
b. Login
Show the login modal, after user click login link.
Notes