KISI-KISI LKS

WEB TECHNOLOGY

PROVINSI ACEH
2021
 MODULE SPEEDTEST

Part A: Website Design

UI-kit using design tools
Create a UI-kit of the following elements: text box, button, drop-down list, checkbox, radio
button, label with checkbox, label with radio button, drop-down calendar input, range,
progress bar

Part B: Layout
CSS Grid
Please implement the following layout in CSS grid.
Part C: Front-End Development
RGB Slider
Please implement an RGB slider as following. There are 3 sliders for adjusting values of red,
green and blue.
Part D: Back-End Development
PHP Verification captcha

Please use PHP to produce verification code image (captcha), which must comply the
following rules (please see the provided images):
a. It randomly generates four characters, consisting of English Alphabet (A-Z) or digit
numbers (0-9).
b. The four characters must be slightly rotated.
c. The four characters must not be located at the same row.
d. The image contains at least 3 random lines.
e. At least 3 mixed noise points.

Part E: Content Management Systems

CMS Administration
Set up a wordpress site with several credential listed below:
1. Username: admin
Password: LKSN2020
Role: admin
2. Username: irfan_LKS
Password: irf4n_Gan$
Role: editor

Instruction for Competitors

Save your files in your root directory on the server called "module_speedtest". Inside that
folder create a folder for each part (A-E).
 MODULE CMS

Introduction
You are a freelance worker working in the field of Web Technology and you have been
asked to develop a new website for COVID-19. Your client has heard that you are good at
building content management systems.

Description of Project and Tasks

This module involves knowledge about website design, website layout techniques, client-
side scripting, and server-side scripting, all combined in one CMS project. You will be using
one of the most popular content management systems - WordPress.
Your job is to develop a website backed by a content management system. Please create
your own theme as a child-theme of a given starter BlankSlate theme. Please name your
theme COVID19_Indonesia.
The purpose of this website is to display the latest news about COVID-19 in Indonesia as
well as selected news stories from selected editors. A newsletter can have a list of upcoming
events. The purpose of this website is to provide information and news regarding COVID-19,
from general news, socialization and urgency of conditions in Indonesia and to provide a list
of upcoming events that can be followed for people who wish to participate. The target
audience for this page is all elements of society in Indonesia. This can vary widely, therefore
you will determine your interpretation of the target audience (based on "Indonesian
society"). Also make sure you have the headers and slogans defined in the content
management system.
Admins and editors should have the possibility to add and modify each entry for each story
either to update existing information or to add new news to the list. The site is accessible
for visually impaired visitors.

Content Management System

For administration tasks, we need two user profiles, Admin and Editor:
● The Admin user - access to the complete WordPress main dashboard.
o Username: admin20
o Password: 20admin
● The Editor user – access as editor role in the CMS.
o Username: 20editor
o Password: editor20
We want the CMS login page to be white-label. That means the login page should not show
the CMS default logo and add all the editor's logos.
Also the login page should not include any “wp” wordings for white-label reasons. Please
make the backend admin URL as following: <host>/admin/

Managing News and pages

The client wants to be able to add, edit, update, delete news records.
News Blog Post
From time to time, there will be news from the website as well as from specific editors.
These blog posts should be categorized.
The client wants to show news posts from all categories in the home page. While in the
specific editor page, the client wants to show news posts from only the category for the
news.
Post Categories
- News Updates
- COVID-19 Events
- Each selected editor

Pages and URL Strategy

Accessibility is very important to our website. We would like to leverage different levels of
accessibility optimization.

URL level of accessibility

All editors pages should have their own URL permalink.
News posts should have following URL structure:
● All news: <host>/news/
● News from a category: <host>/news/<category name>

Dashboard Configuration
The client wants to have At a Glance, Activity, Quick Draft in the dashboard. Please
configure these dashboard widgets and remove all others in the dashboard.

Menus
The menu should stick to the top when scrolling down the page. The menu has the following
items.
● Home
● Our Category (List from categories)

Front-end Requirement
You will need to create your own theme, based on the given starter themes. You will need
to implement the following elements for your web page:
● A footer with copyrights and social media links
o “Copyright © 2019 - All rights reserved” where the year should be the current year
dynamically based on server time.
o Footer plugins should be used for footer links to Twitter, Facebook, and Instagram.
User can change the social links.

Feel free to add and change as many elements as you like, but the elements in the list need
to be present and your design should blend in with the given design.
The client does not like refreshing the whole page. Page transition should be loaded via
JavaScript with animated transition effect. (This does not apply to admin area)

Home Page Layout Columns strategy and mockup

The layout should be responsive for different screens including mobile and desktop.
Home page on the desktop screen should have a multiple columns layout. Left half is some
kind of cover and images and the right half is the news.
Home page on the mobile screen should have a top-down layout strategy. Each column
takes the full width of the screen, except for the list of selected editors. They should have a
left and right 2 columns layout.

Further optimization tasks

The page needs to be optimized for search engines.
You can choose one of the provided plugins or implement your own SEO.
Remember to optimize certain parts of your website (e.g. urls, sitemap, …).
Secure your page by installing and configuring a security plugin.
Note: If the plugin you would like to choose is broken or does not work as expected, you
need to choose another one or feel free to fix this plugin.

Instructions to the Competitor

The page should follow the Web Content Accessibility Guide.
For the working folder you need to name your folder to “module_cms”.
 MODULE SERVER

INTRODUCTION
PT. XYZ decided to create simple anonymous voting system called YukPilih. This system will
be used for asking some company decisions to their employees. Your task is to implement the
backend with Laravel PHP Framework and frontend. The detail description and tools that you
can use will be described below.

DESCRIPTION OF PROJECT AND TASKS

The complete YukPilih system should cover the following requirement:

Menu Detail
• The system’s role can be an Admin or a User
• The user (admin or user) can login (and logout) into the system on the start page of the
application
• After login, if admin or user still using default password, frontend will be redirected to
change password page. Else, redirect to poll page.
Login
• After login, admin will have button (FAB) to create a new poll
• After login, user can view all schedule

• Note: the system is not providing register menu, all user data registration is managed by
administrator on the database directly
• After login, if admin or user still using default password, frontend will be redirected to
change password page
Change • On this page, user will be asked to input old password, new password, and confirm new
Password password. Validate new password and confirm new password must be match before
hitting reset_password backend endpoint.
• After success resetting password, redirect to login page.
• Username and logout button will be displayed on the menu. Admin or user can use the
button for logging out.
• Admin will have floating action button (FAB) to create a new poll
• Admin cannot do vote. Admin always seeing the poll results.
• Admin can delete polls.
• User can do vote only once per poll.
• User only seeing poll results only if the poll already deadline or user already voted for that
poll.
Poll • Polls sorted by created_at descending.
• Poll results will be shown as percentage with following formula:
• Choice’s percentage = choice’s point / [total of all points] x 100%
• Point will be calculated with following standards:
o Regardless number of division members, a division will only have 1 point for each poll.
o All voting will be calculated internally on each division.
o After calculated internally, the winner from each division will be used for the whole
poll.
o If there is more than one winner on a division, the division’s point will be split equally.
Create Poll ● If admin click the FAB button, this dialog will be shown.
Dialog
 ● Admin asked to fill title (string), description (string, can be multiline), deadline (use date
time picker, default value is current time), and choices.
● Choices have special behaviours:
o Initially, there is only one input field.
o After admin typing down on the input field, a new blank input field will be appended
in the bottom of the form.
o Admin can delete input fields, but make sure admin always have at least one blank
input field in the bottom of the form.
● There is a cancel button to close this dialog without creating poll.

YukPilih Point Calculation Simulation

Simulation 1:
This poll having 2 choices (WFO or WFH).
- Two users from payment division already vote. All of them choosing WFO. WFO win
on this division, one point for WFO.
- One user from procurement division choosing WFO. WFO win on this division, one
point for WFO.
- Six users from IT division already vote. 1 choosing WFO, 5 choosing WFH. WFH win
on this division, one point for WFH.
- Three users from finance division already vote. All of them choosing WFH. WFH win
on this division, one point for WFH.
Result: WFO 2 points. WFH 2 points. 50% percentage for each option will be displayed on
the frontend.

Simulation 2:
This poll having 3 choices (‘senin’, ‘rabu’, or ‘jumat’).
- All users from payment division already vote. All of them choosing ‘rabu. ‘rabu’ win
on this division, one point for ‘rabu’.
- Three users from procurement division voted. 1 choosing ‘senin’, 1 choosing ‘rabu’, 1
choosing ‘jumat’. We have 3 winners on this division. 1/3 point will be given for each option.
- Five users from IT division voted. 2 choosing ‘senin’, 2 choosing ‘rabu’, 1 choosing
‘jumat’. We have 2 winners on this division. 1/2 point will be given for ‘senin’ and ‘rabu’.
- No user from finance division voted. No point given from this division yet.
Result: ‘senin’ 0.8333 points. ‘rabu’ 1.8333 points. ‘jumat’ 0.3333 points.
Percentage calculation:
‘senin’ = 0.8333 / (0.8333 + 1.8333 + 0.3333) * 100% = 27.78%
‘rabu’ = 1.8333 / (0.8333 + 1.8333 + 0.3333) * 100% = 61.11%
‘jumat’ = 0.3333 / (0.8333 + 1.8333 + 0.3333) * 100% = 11.11%

ERD
You can use and improve ERD below:
 MODULE CLIENT

INTRODUCTION
In recent years internet has become our basic daily source and needs, enabling the
dissemination of information in an inexhaustible content and interaction. Games uses has
gained a prtominent role in nowadays computer usage, allowing people to get access to
entertainment from any places.
You are asked to develop game called Phytons 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.
Your game needs to be developed in a tablet resolution (960x600 pixels). In bigger resolution,
the game must be centred in the screen both horizontally and vertically.

DESCRIPTION OF PROJECTS AND TASKS

This is a module of 4 hours. Your first 2 hours must be used to create the design of the game
in three PNG images and the initial layout using HTML/CSS. Your layout should follow the
design that you created. The final 2 hours you will create the functionality of game using
JavaScript that allows the game to work correctly in different web browsers.

Phytons game boards are describe below:

1. Game Title
2. Board are 960 x 600 with 48x30 grids
3. Phytons which has 6 in length
4. Player score
5. Total time
6. Rewind button

Design and Initial layout

1. Deliver at least 3 PNG image files that present:
a. Game instruction: The first screen of the game presents the instructions to the
player, a text field for player’s name, and the Play buttons for starting the
game. The instructions for the game are included in the media files. The “Play”
button should be disabled if the text field is empty.
b. Game board: It must present all elements described above in the game screen.
c. Game icon which represents the game immediately.
2. Develop the initial markup (HTML + CSS) of your game application. Overall screen
must be within 1024x1024 pixels.
3. Buttons must have active and hover effects. The buttons background in hover state
must be #5d96d4 and the active state must use #0069d9.
 4. The HTML and CSS code must be valid in the W3C standards for HTML5 and CSS3 rules
in accordance with the WCAG and standard ARIA (Accessible Rich Internet
Applications Suite)

Game Functionalities
1. Show game icon on the top of the screen.
2. Show game instruction in the centre after page are loaded.
3. Show text field for player to input their name.
4. Player can start game after click “Play” button at the bottom of game instruction.
5. The “Play” button should be disabled if the text field is empty.
6. Phyton’s starting point is in the middle of board and moving east (from left to right)
automatically 4 grid per second. The phyton moves only north, south, east, or west.
7. Phyton cannot move directly into opposite direction.
8. To move phyton, player can use arrow keys or “WASD” keys with the following:
a. North with up arrow or ‘w’
b. South with down arrow or ‘s’
c. East with right arrow or ‘d’
d. West with left arrow or ‘a’
9. Phyton should eat food pellet to increase its length which also increase player’s score.
10. Pellet appear at random location inside board every 3 seconds and will disappear
after 5 seconds. Number of pellets in board is minimum 3 and maximum 5 at the same
time.
11. Pellets cannot appear on python’s location.
12. Player score are based on phyton’s length. So, the initial score would be 6.
13. There’s a timer at the top of board whose shows elapsed time and player score.
14. If phyton head hit board edge, then its head should appear on the opposite edge.
15. Player can rewind the phyton game for 5 seconds. Rewind features allows player to
rewind the game anytime they want.
16. Rewind button are located at the bottom of game board, or player can activate it
using “space” button.
17. After the rewind feature activated, there will be a seeker in the form of slider which
player can moves below the game board, the game will rewind accordingly. This
seeker can be moved 5 ticks, each tick for each second.
18. Player can cancel the rewind feature using “Cancel Rewind” button.
19. Phyton dies if it hit its own tail. Game should notify player it is over and shows
Highscore. If the current game score is higher, then it should be the highscore.
Highscore should be saved.
20. Your game should work without JavaScript errors or messages shown in the browser
console.
21. 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.
22. The game needs to work correctly in Google Chrome.
Example
These following images are for example purpose only. You may design your own game layout.

Image 1 Phyton example Image 2 Phyton Rewind Feature