In the speed challenge you will prove various skills in a range of small independent tasks.
You have exactly 1 hour to complete as many tasks as possible. The points you score in the speed challenge will get added to your total points of the whole competition.
Your solutions will be automatically marked on a central server in real-time. The first 3 competitors that complete all tasks get awarded some extra points (3 points for the winner, 2 points for the second place and 1 point for the third place). If time runs out before someone was able complete all tasks, the competitors with the most points are awarded the extra points. You can also continue working on the speed challenge if other competitors are already finished as those points will still get added to your total competition points.
cd /home/student/ICTT17/speedchallenge/work/task1
)
and execute the command stated in each task under expected result.
/home/student/ICTT17/speedchallenge/competitor.json
is correct.speedchallenge/work/task*/src/
folders
(where * is a number).
All other files will be reverted for the review process.
Task | Difficulty | Points |
---|---|---|
Task 1 — Array to markdown list (JavaScript) | easy | 1 |
Task 2 — Rgb to hex (JavaScript) | easy | 1 |
Task 3 — Accessibility | easy | 1 |
Task 4 — String hash (JavaScript) | medium | 2 |
Task 5 — SQL Queries | hard | 3 |
Task 6 — Responsive Design (HTML/CSS) | hard | 3 |
Task 7 — Robot dog walking distance (JavaScript) | hard | 3 |
Task 8 — Regex | hard | 3 |
Write a JavaScript function that given an array with strings, converts it to a markdown list. Every list item should be on a new line. The order of the list entries should stay the same.
For example, ['First', 'Second', 'Third']
should become:
* First
* Second
* Third
Implement the empty function in: speedchallenge/work/task1/src/arrayToMarkdownList.js
You are not allowed to change any other file.
npm test
runs successfully in the speedchallenge/work/task1
folder.
arrayToMarkdownList
function works as specified, and the tests run successfully.
Write a JavaScript function that given a color in RGB (red, green, blue) converts it to the HEX (hexadecimal) representation of the same color. The return value should already include the leading '#' character which indicates that the color is a hexadecimal string,
For example, the input RGB value 0, 153, 255
should return #0099ff
.
Run npm start
within the task folder to open Cypress and have a visual representation of the expected and actual color.
Implement the empty function in: speedchallenge/work/task2/src/rgbToHex.js
You are not allowed to change any other file.
npm test
runs successfully in the speedchallenge/work/task2
folder.
rgbToHex
function works as specified, and the tests run successfully.
You are given a problematic HTML / CSS page in regard to accessibility. To ensure users with impairments are able to use the page, you are to fix those violations.
The page should look and behave the same as it does now. The changes you are supposed to make are all under the hood. If the page does not provide the same content and functionality as it does now, you will get 0 points. The provided regression tests will allow you to check if you've broken something.
Hint: The violations and mitigations are further explained in the DevTools console (F12) when you run the tests in Chrome using Cypress.
Run npm start
within the task folder to open Cypress and see the detailed violations that have to be fixed.
Fix the violations in: speedchallenge/work/task3/src/index.html
You are not allowed to change any other file.
npm test
runs successfully in the speedchallenge/work/task3
folder.
Write a JavaScript function that calculates the hash of a string which is represented by a HSL color.
The three color values should be calculated as follows:
H
(Hue): Modulo 360 of the sum of the UTF-16 codes of all charactersS
(Saturation): Modulo 60 of 5 times the string length, plus 40 (so S can never be lower than 40)L
(Lightness): Modulo 50 of the sum of the H and S value calculated before, plus 25 (so L can never be lower than 25)
The color should be returned as an array of numbers in the correct order (which is [h, s, l]
).
For example, the input string SwissSkills
should return [83, 95, 53]
.
Run npm start
within the task folder to open Cypress and have a more examples, as well as a visual representation of the calculated color.
Implement the empty function in: speedchallenge/work/task4/src/stringHash.js
You are not allowed to change any other file.
npm run test
runs successfully in the speedchallenge/work/task4
folder.
H
value gets calculated correctly.
S
value gets calculated correctly.
L
value gets calculated correctly.
You are provided a database and have to implement two queries on it.
Please run composer test
once within the task directory (speedchallenge/work/task5
) before starting with it.
This will create the database for you.
You can access it with PhpMyAdmin at http://localhost/phpmyadmin under the speedchallenge
database.
Hint: Make sure that the columns also have the correct names.
Return the name
and age
of all competitors that are participating at WorldSkills 2019
and are 19 years
old or younger.
Expected result:
name | age |
---|---|
Daniel Cord | 18 |
Nicole Kaiser | 19 |
Save the final query in speedchallenge/work/task5/src/query1.sql
Return the id
, name
, and date
of all future championships, together with the number of competitors participating in the column competitors
.
Expected result:
id | name | date | competitors |
---|---|---|---|
2 | WorldSkills 2022 | 2022-10-12 | 2 |
4 | EuroSkills 2023 | 2023-09-05 | 3 |
Save the final query in speedchallenge/work/task5/src/query2.sql
Implement the queries in: speedchallenge/work/task5/src/
You are not allowed to change any other file.
composer test
runs successfully in the speedchallenge/work/task5
folder.
You are given a HTML page with existing CSS. During development, the developer followed the mobile first approach.
Your task is to make the design responsive and implement some changes only for the desktop viewport which is defined as 800px
or more.
The resulting desktop page should look as in this screenshot.
The mobile version should not be touched and still look as initially provided. You are allowed to change the HTML, if it does not break the mobile version or the tests.
Run npm start
within the task folder to open Cypress and run the tests.
Following changes have to be made on the desktop version only:
10px
left of the SkillNews
page title (not right of it)10px
spacing between them20px
both horizontally and vertically10px
below the image and no longer over it--dark-gray
, no background color, and line-height 1.2
Implement the desktop version within the existing files in: speedchallenge/work/task6/src/
.
The website is available at speedchallenge/work/task6/src/index.html.
The desktop version was implemented as specified, and all integration tests run successfully
(run npm start
in the speedchallenge/work/task6
folder to open Cypress and run the tests)
Robot dogs only have battery capacity to walk a certain number of meters. However, at each charging stations that is on their way, they fill their battery back up to 100%.
Robot dogs always start with a full battery.
Your task is to implement a function that calculates how far a robot dog can walk in meters with his battery capacity and the provided charging stations.
For example, given a robot dog with a capacity of 7
and charging stations at [4, 9, 21, 30]
, it can walk 16
meters.
Implement the empty function in: speedchallenge/work/task7/src/walk.js
You are not allowed to change any other file.
npm test
runs successfully in the speedchallenge/work/task7
folder.
You are given some strings that should match and some that shouldn't. Write the correct regex patterns to complete this task.
Every regex pattern has a character limit, but you may find solutions that are shorter than the given maximum length. Also, it is not expected that you figure out a general solution or validate the inputs (e.g. for valid dates). As long as your regex passes the tests, it will be accepted.
At the top of your work file, there is a pre-solved example with a more detailed explanation.
You can test if your regex patterns are correct by running the npm test
command within the task folder.
Above the ------------ RESULT ------------
section, you will have more information why a test failed and which strings the regex matched and which not.
A Regex Cheat Sheet in provided in your material folder.
Implement the regex patterns in: speedchallenge/work/task8/src/regex.js
You are not allowed to change any other file.
npm test
runs successfully in the speedchallenge/work/task8
folder.
Hexadecimal strings
is passing on the tests page.
Islands
is passing on the tests page.
Markdown links
is passing on the tests page.
Formatted swiss phone numbers
is passing on the tests page.
SwissSkills 2022 - Trade 17 - Web Technologies © swiss skills 2022