Test Project

Web Technologies
Module A – Speed Test
Submitted By: Country
Ohn Myint Myanmar
Jotham Hernandez Philippine
s
Wan Ahmad Jailani Wan Malaysia
Thomas Galih Satria Indonesia
Lay Christian Indonesia
Kang Siew Hwa Singapore
Tan Kok Leong, Andrew Singapore
Mithuna Chanthamoungkhun Lao PDR
Vannapha Southivong Lao PDR
Settachok Saennam Thailand
Nopadol Arampatarawong Thailand
Contents
Contents.................................................................................................................... 3
Introduction............................................................................................................... 4
Part A........................................................................................................................ 5
Part B........................................................................................................................ 6
Part C........................................................................................................................ 8
Part D:..................................................................................................................... 10
Part E:..................................................................................................................... 12
INSTRUCTIONS TO COMPETITOR............................................................................................14
Files Provided................................................................................................................ 14

Version 1.0 Updated on 9 Feb 2025 Page 2 of 14

Adopted & Adapted from WorldSkills Kazan 2019
Introduction
In this speed Test Project. Please follow the instructions to do the task.
For each Easy task, it is worth 0.5 point.
For each Medium (Normal) task, it is worth 1 point.
For each Difficult (Hard) task, it worths 1.5 point.
Please put your files in /XX_module_A/ and with the task number (eg. A1,A2,B1,B2 etc) as
subfolder name, e.g. /XX_module_a/A1/, where XX is the workstation number.
Your task must be accessible by
http://wkXX.ws.org/XX_Module_A/TaskNumber

Example:

http://wkXX.ws.org/XX_Module_A/A1 for task A1

http://wkXX.ws.org/XX_Module_A/A2 for task A2

There are 5 different parts requiring different skillsets. You are required to complete the
tasks using the respective skills, zero mark will be awarded if you use different skillset
specified by the question.

Version 1.0 Updated on 9 Feb 2025 Page 3 of 14

Adopted & Adapted from WorldSkills Kazan 2019
Part A: Design
Design using Adobe Illustrator or Adobe Photoshop or Adobe XD. You are required to save
your source file (*.ai/*.psd/*.xd) and output file (eg. *.jpg, *.png) for image file, *.gif for the
animation file.

Task A1: Design (Easy)

Create an A4 size postcard for Singapore tourists and add the “Welcome to Singapore”
text using Harlow Solid Italic font. Use the resources provided in the subfolder A1/resources
to build the A4 size postcard.
Save your source file as XX_A1.ai/.psd and image as XX_A1.jpg, XX_A1.png where XX is
your workstation number under A1 subfolder.
Make sure that your task can be accessible via http://wkXX.ws.org/XX_Module_A/A1 where
XX is the workstation number.

Task A2: Loading Animation (Normal)

Create circle loading animation with radius of 500px consisting of small circles with radius of
25px each adjacent to each other with colour washout to end. Animation must as shown in
media files.
Save your source file as XX_A2.ai/.psd/.xd and image as XX_A2.gif where XX is your
workstation number under A2 subfolder.
Make sure that your task can be accessible via http://wkXX.ws.org/XX_Module_A/A2 where
XX is the workstation number.

Task A3: Design (Difficult)

Create an illustration and animated gif with reference to the image provided
(A3_animated.gif).
Save all your source file as XX_A3.psd/.ai/.xd and the image as XX_A3.gif where XX is your
workstation number under A3 subfolder.
Make sure that your task can be accessible via http://wkXX.ws.org/XX_Module_A/A3 where
XX is the workstation number.

Version 1.0 Updated on 9 Feb 2025 Page 4 of 14

Adopted & Adapted from WorldSkills Kazan 2019
Part B HTML and CSS only
Create webpage using HTML and CSS only. You are not allowed to use any CSS library
such as Bootstrap to do the task stated in this section. Javascript is not allowed. You are
required to name the web page as index.html.

Task B1: Vertical Slides (Easy)

Create a vertical slider using HTML5 and CSS only as shown in the vertical-slider.webm
video.
Make sure that your task can be accessible via http://wkXX.ws.org/XX_Module_A/B1 where
XX is the workstation number.

Task B2: CSS Accordion (Normal)

Create an accordion that has three items. Every item has a title and description. When the
title is clicked, it will be active and the description will open slide-down. When the title on the
active accordion is clicked again, it will close its description. A maximum one item can be
opened at any given time. When opening or closing the accordion, it must have a smooth
animation. Please refer to given media for its functionality (exclude the design).
The accordion design is not part of the requirements.
Make sure that your task can be accessible via http://wkXX.ws.org/XX_Module_A/B2 where
XX is the workstation number.

Version 1.0 Updated on 9 Feb 2025 Page 5 of 14

Adopted & Adapted from WorldSkills Kazan 2019
B3 Cube Rotation (Difficult)
You are required to create the following cube rotation effect.

1. You should create three cubes using HTML and CSS only and the cubes should be rotated
similar to given video video.webm.
2. Left cube should be rotated left to right.
3. Right cube should be rotated right to left.
4. Middle cube should be rotated up to down.
5. color codes
- front - #fa5252
- back - #f76707
- right - #12b886
- left - #4c6ef5
- top - #fab005
- bottom - #7950f2
5. You can only use style.css for the Cube Animation, JavaScript is not allowed.

Please refer to given media for design and functionality.

Make sure that your task can be accessible via http://wkXX.ws.org/XX_Module_A/B3 where
XX is the workstation number.

Version 1.0 Updated on 9 Feb 2025 Page 6 of 14

Adopted & Adapted from WorldSkills Kazan 2019
Part C- HTML and Javascript only
Create webpage using HTML and Javascript only, you are not allowed to use any Javascript
library such as VueJS, ReactJS, JQuery to do the task stated in this section. You are required
to name the web page as index.html.

Task C1: Palindrome (Easy)

Write a HTML/JS program (index.html) to check if a word (ignore case sensitive) is a
palindrome without using an array or a loop. A palindrome is a word that reads the same
forward and backward. For example, "Hannah" is a palindrome because it reads the same
way from left to right as it does from right to left. Your program should have a text input to
allow the user to enter a word and upon pressing the submit button, the app will show an alert
to inform the user if the word is a palindrome.

Example:
Hannah -> Display alert that it is a palindrome
hello -> Display alert that it is not a palindrome
apple -> Display alert that it is not a palindrome
radar -> Display alert that it is a palindrome

Make sure that your task can be accessible via http://wkXX.ws.org/XX_Module_A/C1 where
XX is the workstation number.

Version 1.0 Updated on 9 Feb 2025 Page 7 of 14

Adopted & Adapted from WorldSkills Kazan 2019
Task C2: Color Waves (Normal)
You should develop dynamic color changing waves in this task.
 User input is validated if the inputted color is valid or not.
 If the user clicks on the first box, the other box’s color will also change, have a delay in
each box.
 If the user changes its input the color wave effects still work.
You cannot use JavaScript libraries
You can only edit script.js
See the color-waves.mp4 in the given folder to understand the functionality.

Make sure that your task can be accessible via http://wkXX.ws.org/XX_Module_A/C2 where
XX is the workstation number.

Version 1.0 Updated on 9 Feb 2025 Page 8 of 14

Adopted & Adapted from WorldSkills Kazan 2019
Task C3: Typing Speed Test Game (Difficult)
You need to develop a game named Typing Speed Test. This game will measure the number
of words you can type correctly in a set amount of time. Figure 1 shows the basic structure of
the game.

Typing Speed Test Game

These are the texts to be typed

Time Left: 30s

Figure 1

The game contains at least the following elements: -

 Game title
 A section to display text to be typed ( The text to be read from the given javascript file-
texts.js)
 Information: Time left

You are free to design any layout other than the shown in Figure 1.

The application needs to handle the following operations:

1. The game starts when the first keyin of any key.
2. A counter to count down after first keyin of any key from 30 seconds.
3. A character in the typed text must be highlighted (underscored) to show current
character to be keyed in. by a keyboard starting from the first character to the last
character.
4. The highlighted character will be moved to the next character after a key from a
keyboard is keyed in.
5. Wrong character keyed will be coloured in red and move to next character.
6. Game will stop after the countdown turn to 0.

Make sure that your task can be accessible via http://wkXX.ws.org/XX_Module_A/C3 where
XX is the workstation number.

Version 1.0 Updated on 9 Feb 2025 Page 9 of 14

Adopted & Adapted from WorldSkills Kazan 2019
Part D: Server Side – PHP only
Create webpage using server-side programming language PHP only. You are not allowed to
use Javascript, Javascript ibrary such as VueJS, ReactJS and JQuery to do the task stated in
this section. You are required to name the web page as index.php.

Task D1: Count Letter and Case Count (Easy)

You should create a form that will accept a string. After the string is submitted, within the
same page, it will display the number of characters on the input box and count how many
uppercase and lowercase characters there are in the string.
1. Cannot use Javascript
2. Only alphabets are considered as character.

Make sure that your task can be accessible via http://wkXX.ws.org/XX_Module_A/D1 where
XX is the workstation number.

Task D2: Gradient Generator (Normal)

Create two color inputs for a gradient starting color and ending color. After submission, the
page should return a left-to-right gradient image with size 800x800 (with image/png content-
type).
Make sure that your task can be accessible via http://wkXX.ws.org/XX_Module_A/D2 where
XX is the workstation number.

D3: Calendar (Difficult)

Create a calendar from the given HTML/CSS template with starting month/year as July/2023.
Click the next button to go to the next month. And click the prev button to go to the previous
month. Take note that the days of the previous and next month are shown according to the
given screenshot.
Make sure that your task can be accessible via http://wkXX.ws.org/XX_Module_A/D3 where
XX is the workstation number.

Version 1.0 Updated on 9 Feb 2025 Page 10 of 14

Adopted & Adapted from WorldSkills Kazan 2019
Part E: Content Management System
(Wordpress only)
In this part, you are required to create the website using Wordpress only and you are not
allowed to use any plugin. You are required to create the plugin yourself.
You are required to create mysql database and name it as
XX_Module_A_TaskNumber_DB, where XX is your workstation number and task number
Database username and password:
username: sqladmin
password: (will be provided) for all the tasks in part E.
You are required to install Wordpress using the database which you have created.
Wordpress username and password
Username: admin
Password: admin
You are required to export your database script and save the script to XX_Module_A/Task
Number where XX is your workstation.

Task E1: Under Maintenance Plugin (Easy)

You are required to create database and name it as export the database script in the folder
XX_Module_A/E1
Create a plugin to put the site under maintenance mode for public users, once activated and
enabled. Display the button “Enable Maintenance Mode” / “Disable Maintenance Mode” on
the Dashboard, depending on the state. If it is enabled, the public users will see the display
based on the provided media.
The admin dashboard will still be available for admin users to login to disable the
maintenance mode.

Make sure that your task can be accessible via http://wkXX.ws.org/XX_Module_A/E1 where
XX is the workstation number.

Version 1.0 Updated on 9 Feb 2025 Page 11 of 14

Adopted & Adapted from WorldSkills Kazan 2019
Task E2: Create Wordpress Multi-Site (Normal)

You are required to create database and name it as export the database script in the folder
XX_Module_A/E2
Setup a wordpress instance with multi-site capabilities.
Create a mainsite E2 under https:// wkXX.ws.org /XX_Module_A/E2
Upon success, should be able to see WordPress Multisite Network on your WordPress admin
bar
Create 2 subsites, names My Subsite1 and My Subsite2 to be access via 2
http://wkXX.ws.org/XX_Module_A/E2/subsite1
http://wkXX.ws.org/XX_Module_A/E2/subsite2
Configure the 2 subsites using different themes
Make sure that your task can be accessible via http://wkXX.ws.org/XX_Module_A/E2 where
XX is the workstation number.

E3: Nested Route (Difficult)

You are required to create database and name it as export the database script in the folder
XX_Module_A/E3

Make a plugin to create two new post type called series and episode. A series can have
multiple episodes and an episode is attached to one series.
In the Add Episode page in admin dashboard, it must be possible to choose which series the
episode is attached to.
A series page will be accessed through
http://wkXX.ws.org/XX_Module_A/E3/<series-slug>
An episode page will be accessed through
http://wkXX.ws.org/XX_Module_A/E3/series/<series-slug>/episodes/<epis
ode-slug>

Version 1.0 Updated on 9 Feb 2025 Page 12 of 14

Adopted & Adapted from WorldSkills Kazan 2019
INSTRUCTIONS TO COMPETITOR
At the beginning of competition:

● You are required to create a folder XX_Module_A in the respective server location

* Where XX is your allocated workstation number.

At the end of competition:

● Your Web Client should be accessible with the following URL

http://wkXX.ws.org/XX_Module_A/TaskNumber

● Example: http://wkXX.ws.org/XX_Module_A/A1 for task A1

* Where XX is your allocated workstation number.

Files Provided

Item Description

Module_A_Media/Tasknumber All content and media for each task are in the
respective subfolder

Marking Scheme
DESIG LAYO FRONT- BACK- CMS TOTAL
N UT END END

A1 Design 3 - - - - 3

A2 Layout - 3 - - - 3

A3 Front-end - - 3 - - 3

A4 Back-end - - - 3 - 3

A5 CMS - - - - 3 3

Total 15

Version 1.0 Updated on 9 Feb 2025 Page 13 of 14

Adopted & Adapted from WorldSkills Kazan 2019
Version 1.0 Updated on 9 Feb 2025 Page 14 of 14
Adopted & Adapted from WorldSkills Kazan 2019