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 )
LOMBA KOMPETENSI SISWA
SEKOLAH MENENGAH KEJURUAN TINGKAT PROVINSI JAWA BARAT
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
LOMBA KOMPETENSI SISWA
SEKOLAH MENENGAH KEJURUAN TINGKAT PROVINSI JAWA BARAT
TAHUN 2017
LKS SMK Tingkat Jawa Barat Bidang Lomba Web Design Tahun 2017 2 dari 16
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.
LOMBA KOMPETENSI SISWA
SEKOLAH MENENGAH KEJURUAN TINGKAT PROVINSI JAWA BARAT
TAHUN 2017
LKS SMK Tingkat Jawa Barat Bidang Lomba Web Design Tahun 2017 3 dari 16
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/…
LOMBA KOMPETENSI SISWA
SEKOLAH MENENGAH KEJURUAN TINGKAT PROVINSI JAWA BARAT
TAHUN 2017
LKS SMK Tingkat Jawa Barat Bidang Lomba Web Design Tahun 2017 4 dari 16
• 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.
LOMBA KOMPETENSI SISWA
SEKOLAH MENENGAH KEJURUAN TINGKAT PROVINSI JAWA BARAT
TAHUN 2017
LKS SMK Tingkat Jawa Barat Bidang Lomba Web Design Tahun 2017 5 dari 16
MODULE B
CONTENTS
This module has the following files:
• MODULE_B.docx
• MODULE_B_MEDIA.zip
o Media_LKSP_Module_B-320.png (PNG file for Design)
o Media_LKSP_Module_B-768.png (PNG file for Design)
o Media_LKSP_Module_B-1440.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
LOMBA KOMPETENSI SISWA
SEKOLAH MENENGAH KEJURUAN TINGKAT PROVINSI JAWA BARAT
TAHUN 2017
LKS SMK Tingkat Jawa Barat Bidang Lomba Web Design Tahun 2017 6 dari 16
• 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
• people-2.jpeg : our user
• people-3.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
LOMBA KOMPETENSI SISWA
SEKOLAH MENENGAH KEJURUAN TINGKAT PROVINSI JAWA BARAT
TAHUN 2017
LKS SMK Tingkat Jawa Barat Bidang Lomba Web Design Tahun 2017 7 dari 16
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.
INSTRUCTIONS TO THE COMPETITOR
• 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.
LOMBA KOMPETENSI SISWA
SEKOLAH MENENGAH KEJURUAN TINGKAT PROVINSI JAWA BARAT
TAHUN 2017
LKS SMK Tingkat Jawa Barat Bidang Lomba Web Design Tahun 2017 8 dari 16
MODULE C
CONTENTS
This module has the following files:
• 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.
LOMBA KOMPETENSI SISWA
SEKOLAH MENENGAH KEJURUAN TINGKAT PROVINSI JAWA BARAT
TAHUN 2017
LKS SMK Tingkat Jawa Barat Bidang Lomba Web Design Tahun 2017 9 dari 16
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.
LOMBA KOMPETENSI SISWA
SEKOLAH MENENGAH KEJURUAN TINGKAT PROVINSI JAWA BARAT
TAHUN 2017
LKS SMK Tingkat Jawa Barat Bidang Lomba Web Design Tahun 2017 10 dari 16
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.
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”.
LOMBA KOMPETENSI SISWA
SEKOLAH MENENGAH KEJURUAN TINGKAT PROVINSI JAWA BARAT
TAHUN 2017
LKS SMK Tingkat Jawa Barat Bidang Lomba Web Design Tahun 2017 11 dari 16
MODULE D
CONTENTS
This module has the following files:
• 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
LOMBA KOMPETENSI SISWA
SEKOLAH MENENGAH KEJURUAN TINGKAT PROVINSI JAWA BARAT
TAHUN 2017
LKS SMK Tingkat Jawa Barat Bidang Lomba Web Design Tahun 2017 12 dari 16
• 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
LOMBA KOMPETENSI SISWA
SEKOLAH MENENGAH KEJURUAN TINGKAT PROVINSI JAWA BARAT
TAHUN 2017
LKS SMK Tingkat Jawa Barat Bidang Lomba Web Design Tahun 2017 13 dari 16
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
LOMBA KOMPETENSI SISWA
SEKOLAH MENENGAH KEJURUAN TINGKAT PROVINSI JAWA BARAT
TAHUN 2017
LKS SMK Tingkat Jawa Barat Bidang Lomba Web Design Tahun 2017 14 dari 16
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).
LOMBA KOMPETENSI SISWA
SEKOLAH MENENGAH KEJURUAN TINGKAT PROVINSI JAWA BARAT
TAHUN 2017
LKS SMK Tingkat Jawa Barat Bidang Lomba Web Design Tahun 2017 15 dari 16
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)
LOMBA KOMPETENSI SISWA
SEKOLAH MENENGAH KEJURUAN TINGKAT PROVINSI JAWA BARAT
TAHUN 2017
LKS SMK Tingkat Jawa Barat Bidang Lomba Web Design Tahun 2017 16 dari 16
INSTRUCTIONS TO THE COMPETITOR
• Save your files in your root directory on the server called "XX_MODULE_D"
where XX is your computer number.
• 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.
Top Related