KO Web developer Test (2023)

Introduction

Welcome to the King's Online Web Developer task. This a short programming task that is designed to see how you approach problem-solving a technical issue. You will have a chance to present your task and explain your approach during the interview (see "Submitting and presenting" instructions below).

Background

In the current iteration of our Virtual Learning Environment (VLE) we have a number of custom built ‘labels’ that can be appended to activities on the course page. These aim to help students be better prepared for their learning. Currently these are a mix of icons and styled text.

The new version of our VLE has an inbuilt ‘tags’ system, which could offer a more consistent, searchable option for implementing the current ‘labels’.

The problem

Based on our findings, we want to proceed and now use this new ‘tag’ functionality. But we also need a way to translate the ‘labels’ in our existing VLE courses into 'tags’ automatically, so that we don’t break any courses that were built previously.

The task

For this task you will be provided with an HTML file showing a sample container with activities that contain tags and a task container with activities that require tags. For simplicity we’ve used the prefix codes from our ‘labels’ as element ‘classes’. In here you will also find a table translating the meaning within these ‘classes’ in order for you to know which tags to add.

You will also be provided with a default CSS file that provides some initial styling for the activities and tags and an empty CSS file. Accompanying these is a UI specification for the styling of the page and the new ‘tags’.

Your task is to write a JS function that can look for specific classes within each activity, translate those classes into ‘tags’, and apply those ‘tags’ to the activities. Then edit the empty CSS file to implement the UI specifications.

File structure

• index.html - an HTML file showing a sample container with activities that have tags and a task container with activities that require tags. Do not edit this file.
• css/default.css - default styles for the page, including the sample tags. Do not edit this file.
• css/style.css - a blank CSS file for the task. Edit this to apply the design specifications.
• js/script.js - a blank JS file for the task. Edit this to add tags to the activities in the task container.
• UI Specifications.pdf - design specifications for the styling of the page.

Task

To successfully complete the task, you must:

1. Populate the js/script.js file with a function that looks for specific classes within each activity, translates them into ‘tags’, and applies the ‘tags’ to the activities.
2. Implement the UI specifications by editing the css/style.css file.

Submitting and presenting

Once you are ready to submit, please commit your response to your own git repository and then email the link to [email protected] by Monday, 5th June at 9am, with the email subject "Web Dev task".

During your interview, you will be asked to briefly present the work you did for the task and explain your approach, and the panel will have a chance to ask you some questions about the task. You should take care that your presentation last for no more than 5 minutes, and includes slides or similar visual aids.

You may wish to address the following when you present or during the questions:

• What did you do to understand the problem?
• What was your solution and how did you implement it?
• How might you have approached this differently:
  • if you'd had more time?
  • if it was part of a bigger project?
  • if you could get additional information from the content developers or the UX/design team?