1AKIFT WMC Test (Group A)

2026-01-14

Max. 100 points

Name:

Task	Max.	Achieved
1	10
2	10
3	10
4	30
5	20
6	20
Sum	100

Grading: >= 88: 1, >=76: 2, >=64 : 3, >50: 4, <=50: 5

Answer the following statements indicating whether they are True or False.

0-2 correct: 0 points, 3 correct: 5 points, 4 correct: 10 points.

HTML

Statement	True	False
HTML is mainly used to create the layout and styling of a web page.
The <ol> tag is used to create an ordered list.
The `style` attribute allows to define a style directly on an element.
The <radio> tag defines a radio element in an HTML radio group.

Answer the following statements indicating whether they are True or False.

0-2 correct: 0 points, 3 correct: 5 points, 4 correct: 10 points.

CSS

Statement	True	False
CSS can change the background color of an HTML element.
`color: blue;` sets the background color to blue.
The CSS box model can dynamically change the content of HTML elements.
Margin is the distance between the content of an element and its border.

clas Answer the following statements indicating whether they are True or False.

0-2 correct: 0 points, 3 correct: 5 points, 4 correct: 10 points.

ECMAScript

Statement	True	False
const f = (a) => { return a * 2; } is valid JavaScript.
`let` is used to create variables in modern JavaScript.
JavaScript can be used to add, edit and remove HTML elements.
`console.log(.)` is used to print values to the console.

Create a small web form in HTML asking the user how they want to get rich. The form should offer two options that are visually connected and have a common description. The form should look roughly the same as below.

How do you want to get rich?
Luck

Hard work

The options should also be selected when clicking on the text next to them. The last option should be selected by default.
Note that you don't need to write anything surrounding the form (ie no doctype, html, body etc).
5 points for the form tag
5 points for fieldset
5 points for the legend
5 points for the two radio inputs
5 points for using the same name
5 points for linking the inputs and their labels
```
<form>
<fieldset>
  <legend>How do you want to get rich?</legend>

  <div>
    <input type="radio" id="luck" name="rich" value="luck" />
    <label for="luck">Luck</label>
  </div>

  <div>
    <input type="radio" id="work" name="rich" value="work" checked />
    <label for="work">Hard work</label>
  </div>
</fieldset>
</form>
```
- Provide CSS code to display all images as block elements, put a black border around them and make sure the border is at least a few pixels away from the actual image. Also provide the correct selector.
  (20 points)
  5 points for the selector
  5 points for each correct style rule
```
img {
  display: block;
  border: 1px solid black;
  padding: 3px;
}
```

Assume you have a loaded website with the following HTML visible in your webbrowser:

<h2 id="exercises">Exercises</h2>
<ul id="links">
  <li><a href="www.freecodecamp.org/...html-by-building-a-cat-photo-app/">
    Learn HTML by Building a Cat Photo App Project</a></li>
  <li><a href="www.freecodecamp.org/...css-by-building-a-cafe-menu/">
    Learn Basic CSS by Building a Cafe Menu Project</a></li>
  <li><a href="www.freecodecamp.org/...methods-by-building-a-music-player/">
    Learn Basic String and Array Methods by Building a Music Player</a></li>
</ul>

Write a few lines of JavaScript code that changes the Text in the heading from "Exercises" to "Practice". Then, append a new list element with a link to "https://exercism.org" with the text "Exercism".
(20 points)

5 points for each required statement that is correct

let ex = document.getElementById('exercises');
ex.innerHTML = 'Practice';
let links = document.getElementById('links');
links.innerHTML += '<li><a href="https://exercism.org">Exercism</a></li>';