SwissSkills 2022 - Speed Challenge Trade 17 - Web Technologies


Total points: 18

Speed Challenge

General information

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.

All tasks can be tested by automated tests. To run them, change into their folder (e.g. cd /home/student/ICTT17/speedchallenge/work/task1) and execute the command stated in each task under expected result.
Before your start, please check that your name in /home/student/ICTT17/speedchallenge/competitor.json is correct.
If it is not, please call an expert.
You can only change existing files in the speedchallenge/work/task*/src/ folders (where * is a number). All other files will be reverted for the review process.

Task 1 — Array to markdown list (JavaScript) easy

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

  • Working directory

    Implement the empty function in: speedchallenge/work/task1/src/arrayToMarkdownList.js

    You are not allowed to change any other file.

  • Expected result

    npm test runs successfully in the speedchallenge/work/task1 folder.

Marking scheme

Objective 1

  • 1 The arrayToMarkdownList function works as specified, and the tests run successfully.

Task 2 — Rgb to hex (JavaScript) easy

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.

  • Working directory

    Implement the empty function in: speedchallenge/work/task2/src/rgbToHex.js

    You are not allowed to change any other file.

  • Expected result

    npm test runs successfully in the speedchallenge/work/task2 folder.

Marking scheme

Objective 1

  • 1 The rgbToHex function works as specified, and the tests run successfully.

Task 3 — Accessibility easy

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.

  • Working directory

    Fix the violations in: speedchallenge/work/task3/src/index.html

    You are not allowed to change any other file.

  • Expected result

    npm test runs successfully in the speedchallenge/work/task3 folder.

Marking scheme

Objective 1

  • 1 The accessibility violations of the page are fixed, there are no new violations introduced, the page still looks and behaves the same, and the tests run successfully.

Task 4 — String hash (JavaScript) medium

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 characters
  • S (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.

  • Working directory

    Implement the empty function in: speedchallenge/work/task4/src/stringHash.js

    You are not allowed to change any other file.

  • Expected result

    npm run test runs successfully in the speedchallenge/work/task4 folder.

Marking scheme

Objective 2

  • 1 The H value gets calculated correctly.
  • 0.5 The S value gets calculated correctly.
  • 0.5 The L value gets calculated correctly.

Task 5 — SQL Queries hard

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.

Query 1

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

Query 2

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

  • Working directory

    Implement the queries in: speedchallenge/work/task5/src/

    You are not allowed to change any other file.

  • Expected result

    composer test runs successfully in the speedchallenge/work/task5 folder.

Marking scheme

Objective 3

  • 1.5 Query 1 is implemented as expected, and the test runs successfully.
  • 1.5 Query 2 is implemented as expected, and the test runs successfully.

Task 6 — Responsive Design (HTML/CSS) hard

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:

  • Header
    Task 6 - Header
    1. The logo should be 10px left of the SkillNews page title (not right of it)
    2. In the language switch, all languages should be visible and not just the selected one
    3. The languages should be horizontally aligned and have a 10px spacing between them
  • Featured news
    Task 6 - Featured news
    1. The preview text should be visible
  • Teaser news
    Task 6 - Teaser news
    1. The news should be in a 3 column grid
    2. The spacing between the news should be 20px both horizontally and vertically
    3. The news title should be 10px below the image and no longer over it
    4. The news title should have the text color --dark-gray, no background color, and line-height 1.2

  • Working directory

    Implement the desktop version within the existing files in: speedchallenge/work/task6/src/.

    The website is available at speedchallenge/work/task6/src/index.html.

  • Expected result

    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)

Marking scheme

Objective 3

  • 0.75 The header logo has been implemented as specified, and the tests run successfully.
  • 0.75 The header language switch has been implemented as specified, and the tests run successfully.
  • 0.5 The featured news section has been implemented as specified, and the tests run successfully.
  • 1 The teaser news section has been implemented as specified, and the tests run successfully.

Task 7 — Robot dog walking distance (JavaScript) hard

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.

  • Working directory

    Implement the empty function in: speedchallenge/work/task7/src/walk.js

    You are not allowed to change any other file.

  • Expected result

    npm test runs successfully in the speedchallenge/work/task7 folder.

Marking scheme

Objective 3

  • 0.5 It stops, if it cannot reach the first charging station.
  • 1 It stops, if it cannot reach the next charging station.
  • 1 It continues for a full battery after reaching the last charging station.
  • 0.5 It can go for one full battery if there are no charging stations.

Task 8 — Regex hard

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.

  • Working directory

    Implement the regex patterns in: speedchallenge/work/task8/src/regex.js

    You are not allowed to change any other file.

  • Expected result

    npm test runs successfully in the speedchallenge/work/task8 folder.

Marking scheme

Objective 3

  • 0.5 Regex #1 Hexadecimal strings is passing on the tests page.
  • 0.5 Regex #2 Islands is passing on the tests page.
  • 1 Regex #3 Markdown links is passing on the tests page.
  • 1 Regex #4 Formatted swiss phone numbers is passing on the tests page.

SwissSkills 2022 - Trade 17 - Web Technologies © swiss skills 2022