LOMBA KOMPETENSI SISWA SEKOLAH MENENGAH KEJURUAN. NASKAH SOAL (Terbuka)

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

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

LKS SMK Tingkat Jawa Barat Bidang Lomba Web Design Tahun 2017

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


2 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/…


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


4 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


5 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


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


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


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


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


10 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

Login and Change Password

Detail •

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


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

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,

Create Exam

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


12 dari 16



•

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

Assess Exam

•

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.

•

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

• Answer Exam

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


13 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 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

Statistic

•

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


14 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)


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


16 dari 16

LOMBA KOMPETENSI SISWA SEKOLAH MENENGAH KEJURUAN. NASKAH SOAL (Terbuka)

Recommend Documents