LOMBA KOMPETENSI SISWA SEKOLAH MENENGAH · PDF file02.10.2012 · NASKAH SOAL (Terbuka) Bidang Lomba WEB DESIGN ... LKS SMK Tingkat Jawa Barat Bidang Lomba Web Design ... Bidang Lomba

LOMBA KOMPETENSI SISWA

SEKOLAH MENENGAH KEJURUAN TINGKAT PROVINSI JAWA BARAT

TAHUN 2017

NASKAH SOAL (Terbuka)

Bidang Lomba

WEB DESIGN

PEMERINTAH DAERAH PROVINSI JAWA BARAT

DINAS PENDIDIKAN Jl. Dr. Radjiman No. 6 Telp. (022) 4264813 Fax. (022) 4264881

Wisselbord (022) 4264944, 4264957, 4264973

Bandung ( 40171 )



TAHUN 2017

LKS SMK Tingkat Jawa Barat Bidang Lomba Web Design Tahun 2017 1 dari 16

MODULE A

CONTENTS

This module has the following files:

• MODULE_A.docx

• MODULE_A_MEDIA.zip

INTRODUCTION

“Chauffer Cars” is a company service specialise in wedding service car. They need a

new website to support their business which include their service, products offer and

reservation. The target audience for their website is young-couple whom are going to

marriage.

DESCRIPTION OF PROJECT AND MODULE

Your task is to create a responsive design of a website and a logo for the “Chauffer

Cars”. You have been provided with text and images that will help you in your design.

You also have been provided with “Chauffer Cars” old website. You should ensure that

there is sufficient text and images included in your design to give a good overall feel of

how the website will look once constructed. You may add other text and information if

you wish. Use of text will only be judged on design, not the meaning of the text.

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



TAHUN 2017


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.

This module involves designing the home pages of a website and a logo for the

organization “Chauffer Cars”. With requirement listed below:

• A logo which will be the corporate identity for the organisation. Logo must be used

as part of your design. Your logo should represent the organisation and the subject

of the website. The logo must be used in the design.

• Search cars and offers

• Sign-up component

• Log in component

• Listing of at least 3 (three) cars, each including:

o Thumbnail image

o Car Information (name, short description, etc)

o Price information (rent, usage, driver, etc)

• Current location and time

• User testimonial

• Reservation component

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.



TAHUN 2017


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 file in the root directory of the folder named "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/…



TAHUN 2017


• Give red box which will indicate how the web page looks on screen. Below is an

example of a computer display that you will submit.



TAHUN 2017


MODULE B

CONTENTS


• MODULE_B.docx

• MODULE_B_MEDIA.zip

o Media_LKSP_Module_B-320.png (PNG file for Design)



INTRODUCTION

You need to implement a layout for coworking space called Workthink. The UI designer

has designed the interfaces for you to make use of. You can find the design in the

project files supplied.

We want you to follow the design to implement the layout by using HTML and CSS.

The layout needs to work in different screen resolutions. From the provided material,

you can find different design screens at width points from 320px width to 1440px

width.

DESCRIPTION OF PROJECT AND TASKS

There are following sections that you need to implement in your layout.

• Website Heading

• Navigation

• About section

• Benefits section

• Plans section

• Testimonial section

• Newsletter section



TAHUN 2017


• 3-Footer sections

• Copyright section

JAVASCRIPT

This module tests your HTML and CSS skills. You should not modify the given JavaScript

code in this project. We will disable any extra JavaScript during the marking.

ACCESSIBILITY

You should apply proper accessibility roles to the essential elements.

TEXT SELECTION

There is a text selection background colour applied to the web page. The colour follows

the major colour of the website, which is gold colour.

You will be provided with the following images:

• benefit.jpeg : image for benefit section

• newsletter.jpg : image for newsletter section

• people-1.jpeg : our user



• plan-1.jpeg : company product member plan

• plan-2.jpg : company product privilege plan

• plan-2.jpg : company product virtual office

• wallpaper.jpg : office bird view



TAHUN 2017


NOTES

• The HTML is valid to HTML5 through W3 validator

• The CSS contains no syntax errors

• The people hover animation matches the provided motion design.

• The position of web page sections matches the given design.

• All photos, except explicitly mentioned, must be implemented by img tag.

• The placement of script tag matches the latest practice.

• All text is indexable.

• All image has alternative description.

• There are at least 5 comments in the HTML document.

• There are at least 5 comments in the CSS document.

• The text selection matches the given design.

• The HTML structure is extensible and maintainable.

• The Grid structure is extensible and maintainable.

• The CSS and coding style is readable and easy to maintain.

• Proper accessibility roles are applied to HTML.


• Save your files in your root directory on the server called

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



TAHUN 2017


MODULE C

CONTENTS


• MODULE_C.docx

• MODULE_C_MEDIA.zip

INTRODUCTION

Space Invader is a retro game that exists for quite some time. Your school suddenly

wants to make a Retro Game Showcase Festival which aim to introduce people

especially children about games that exists in the past. You need to make the simple

version of the game using html5 canvas.

DESCRIPTION OF PROJECT AND MODULE

Space Invaders is a two-dimensional fixed shooter game in which the player controls a

laser cannon by moving it horizontally across the bottom of the screen and firing at

descending aliens. The aim is to defeat five rows of eleven aliens that move horizontally

back and forth across the screen as they advance toward the bottom of the screen. The

player defeats an alien, and earns points, by shooting it with the laser cannon.

Defeating the aliens brings another wave that is more difficult, a loop which can

continue without end.

The folder “Image” contains all the files provided by the designer to develop the

application. To develop the task, you need to use HTML5 Canvas. You are free to

modify the provided files if necessary to guarantee the correct functionalities of the

application.



TAHUN 2017


PROJECT REQUIREMENTS

1. When player click the play button inside the canvas, the application will draw the

background along with the space ships in the bottom of the screen that will be

used by the player to shoot aliens. Also draw 5 rows of aliens with each row

containing 11 aliens.

Example of game screen

2. The aliens will move left and right slowly. If the aliens reached the left or right of

the screen move all of the aliens down by one row. If the aliens reached certain

point near a user. The game is over.

3. If the player press ‘A’ key the spaceship will move to the left, if the player press

‘D’ key the spaceship will move to the right, if the player press ‘Space’ key the

spaceship will shoot a bullet to the aliens.

4. Player can only shot a bullet at a time, if there is still a bullet in the screen the

player can’t shoot another bullet until that bullet hit the enemy or going out of

the screen.



TAHUN 2017


5. If the bullet shot by the player hit an alien. Both the bullet and the alien will be

destroyed and player get 10 points for each alien killed.

6. The aliens sprites must be used to create animation of the alien object.

7. If the current player score is higher than the current local high score, set the

score as the new local high score. And display it in the index page.

8. When the player click the retry button in game over menu, the application will

start again with a new round of games.

9. The canvas size must be 800 x 480 pixels

10. Your code needs to be developed following this requirements:

a. Indentation;

b. Organization;

c. Code reuse;

d. Use objects in JavaScript code;

e. Include comments in your JavaScript files to indicate the functionalities of

the code.


• Save your files in your working directory on the server called "XX_Module_C",


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



TAHUN 2017


MODULE D

CONTENTS


• MODULE_D.docx

• MODULE_D_FRAMEWORK.zip

• MODULE_D_Front_End_Template.zip

INTRODUCTION

Your school decide to create online exam system. The system is support multiple-choice

and essay question. The multiple-choice question will be corrected automatically. The

essay question will be corrected by the teacher manually. Your task is to implement the

backend persistence and interaction logic. Because the front-end design is currently still

in progress, you will be using temporary skeleton design provided by front-end team.

The detail description and tools that you can use will be described below.

DESCRIPTION OF PROJECT AND TASKS

The online exam system should cover the following requirement:

Menu Detail

Login and

Change

Password

• The system’s users can be a teacher or a student

• The user (teacher or student) can login (and logout) into the

system on the start page of the application

• Every time user logged in, record his/her login history with

login time and his/her IP address to the database

• The user can change his/her password

• After login, teacher have access to “create exam”, “assess

exam”, and “statistic” menu



TAHUN 2017


• After login, student have access to “answer exam” and “view

score” menu

• Links to the authorized menu and logout link are always visible

on the top part of the page while the user is logged in

• Make sure your system is preventing users to access

unauthorized menu

Note: the system is not providing register menu, all user data

registration is managed by administrator on the database directly

Create Exam

• On “create exam” menu, the teachers can create his/her exam,

and then manage the exam questions. The teachers can create

an exam with a title, classroom, start date time, and end date

time

• After the teachers create an exam, the teacher can access the

created exam, a new page will be shown, the page is divided

to multiple-choice question and essay question

• On the multiple-choice question, the teacher provided a form

with a text input for the question, weight of the question,

followed by 5 answer (A, B, C, D, and E), and an input to

select the correct answer (answer key) (A, B, C, D, or E)

• On the essay question, the teachers provided a form with a

text input for the question, and a text input for the answer’s

keywords (separated by “|” for multiple keywords)

• All input form is must be filled, total weight cannot exceed 100

points.

• A question can be removed by clicking a delete button



TAHUN 2017


Assess Exam

• On “assess exam” menu, the teachers can assess ended exam

(check with current system date time)

• The teachers can access ended exam. In the ended exam

page, the teachers can access students’ answers.

• Multiple choice answers corrected automatically by matching

student’s answer with the answer key

• Essay answer corrected manually, provide an input for each

essay answer to give score. The score cannot exceed

question’s weight.

• To help teacher assessing essay answer, highlight keywords

that students mention in his/her answer

• After submitting, save all score given to the database,

calculate the student total score, and insert it to the database

• Teacher can update score by resubmit the score.

Answer Exam

• On “answer exam” menu, show all exam for the student

(check by classroom). The student can only access the exam

when the exam’s start date time and end date time is valid

• The multiple-choice questions and options position is shuffled

randomly. The student can choose from given choices.

• The essay questions position is shuffled randomly, placed after

multiple-choice questions.

• After submitting, save all answers to the database. The

student can update their answer, save previous answer in

history table.

View Score

• The students can view all exam (check by classroom), if the

exam is already assessed, show the total score to the student

• When all exam already assessed, the student can view his/her



TAHUN 2017


rank compared to others students in his/her classroom, and

the student can view his/her rank compared to others students

in his/her school

Statistic

The teacher can view some statistic info for each exam:

• Minimum total score, maximum total score, and average total

score

• Minimum score, maximum score, and average score for each

question

• Student’s score sort by descending

• Student’s performance which can be found through averaging

the difference in percent between each exam. (ex: If a student

take 4 exam and get the following score: 50, 75, 70, 60. Then

his performance is ((50% - 7% - 14%) / 3) equals to 9.7%)

The teacher can view students’ rank per classroom. The rank is

calculated by average score of all exams.

The teacher also can view students’ rank per school (all student).



TAHUN 2017


ERD

You can use and improve ERD below:

NOTES

• Create validations on the server side, client side validation is not scored in this

module.

• Provide unit testing for every input process in the system (create exam, input

exam questions, answer exam questions)



TAHUN 2017



• Save your files in your root directory on the server called "XX_MODULE_D"


• Name the file to start the application “index.php” and put it directly into the

directory mentioned above.

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

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.

• For this module, you must use one of the two available frameworks

(CodeIgniter3.1.4 or Laravel 5.4). Applications developed without use of any of

these frameworks will not be considered. You should take advantage of the

framework as much as possible.

• Assessment will be done on the files and data in your database “XX_MODULE_D” on

the central server.

Documents

LOMBA KOMPETENSI SISWA SEKOLAH MENENGAH · PDF file02.10.2012 · NASKAH SOAL (Terbuka) Bidang Lomba WEB DESIGN ... LKS SMK Tingkat Jawa Barat Bidang Lomba Web Design ... Bidang Lomba