Assignments on Interaction Programming

Assignment 1

Sun, 02 Oct 2016 14:42:34 +0200

In this first assignment you will explore different aspects of structuring web content using HTML and layout using CSS. You will be using these skills in the remaining three assignments.

Submit your completed assignment by the deadline. Submission instructions can be found on the main assignment page.

Learning outcomes

After this assignment, you should have learned about the following:

HTML syntax: elements, tags and attributes
CSS syntax: selectors, css properties
CSS layout techniques:
- box model: margin, border, padding, content
- positioning: static, relative, absolute and fixed positions
- Flexbox layout
- responsive design using media queries

Assignment points

1 point: Complete all required parts of all exercises.
2 points: Complete all required tasks and one optional task.

Exercises

The first assignment consists of three separate exercises.

Assignment 2

Thu, 29 Sep 2016 00:00:00 +0000

The second assignment in this course is divided into two parts. The first is to complete certain exercises on Codecademy. The second is to create a web page with an interactive slideshow.

You will use JavaScript to manipulate existing HTML and to enable user interaction on a web page. You will also learn how to hunt bugs in your code using the web browser.

Submit your completed assignment by the deadline. Submission instructions can be found on the main assignment page.

Assignment 3

Tue, 22 Nov 2022 10:41:33 +0100

The third lab assignment in this course contains six separate exercises that will introduce you to interaction programming techniques you can use as the building blocks.

Submit your completed assignment by the deadline. Submission instructions can be found on the main assignment page.

Learning outcomes

After this lab assignment, you should have gained knowledge about the following:

How to select elements from the DOM
How to manipulate an element’s attribute values
How to manipulate an element’s inline CSS and classes
How to create new elements in the DOM
How to animate transitions

Important note: Since the purpose of this assignment is to deepen understanding of the basics of vanilla JavaScript, no outside libraries or frameworks are allowed beside Anime.js when specified by the assignment.

Assignment 4

Sat, 23 Nov 2024 00:00:00 +0000

The fourth and final assignment in this course consists of three exercises where you will be creating web components.

Submit your completed assignment before the deadline. Submission instructions can be found on the main assignment page.

Learning outcomes

After this lab assignment, you should have gained knowledge about the following:

How to create Web Components using custom elements and shadow DOM
How to use <template> and <slot> in Web Components
How to dispatch synthetic events within and from Web Components
How ARIA attributes are used to augment custom elements for accessibility

Important note: Since the purpose of this assignment is to understand how web components are built using the general web standards, no outside libraries or frameworks are allowed unless explicitly stated in the assignment. Many frameworks are either built using standard web components or have their own component systems that abstract away from the web standards. To understand how web components work, you need to work with the web standards directly.

Assignment 5 (optional)

Fri, 02 Dec 2022 12:49:20 +0100

Assignment 5 is the optional individual assignment required for grades A-B. You can choose up to two of the three exercises to complete and submit via Sendlab.

Complete 1 exercise for 2 points
Complete 2 exercises for 3 points

Refer to the Examination page for information about how many points you need for the different grades. Your final points will be your shared points + the number of points gained from this assignment.