Skip to content
729G87 - Interaction Programming
GitLab

Assignment 3

This assignment is not final. Changes to the assignment are still possible.

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

Assignment points

Exercises 2, 3 and 6 have an optional task.

  • 1 point: Complete all required tasks.
  • 2 points: Complete all required tasks and at least one optional tasks in each exercise.

General assignment instructions

  • The mockups images should be seen as sketches. You do not need to recreate the styling of the widgets.
  • Use Eric Meyer’s CSS reset.
  • Write your JavaScript in a separate file. I.e. not inside you HTML file.
  • Do not use the HTML event attributes (e.g. onclick to define event handlers. Define your event handlers in your JavaScript code.

Create a folder for the assignment and a sub-folder for each exercise.

Create an index.html that leads to the respective assignments.

javascript vs CSS

A general rule for this and following assignments: if possible, you can use CSS to achieve certain tasks, like animations. For css animations, if the task explicitly states to use keyframe animations, you cannot use css-transitions.

Remember: On your gitlab-page, all your exercises should be available by following several links. This means once visiting your submission page in gitlab (Deploy -> Pages), all exercises (e.g., assignment 3) must be available through browser navigation.

Following the link to assignmen 3 should lead to a page with links to exercise 1, exercise 2, and so on. Also, indicate how many points you aim for.

Note that when opening a directory (e.g.,https://729g87.gitlab-pages.liu.se/HT2023/<YOURGROUP>/assignment_3/) with your browser, the server is looking for an index.html file in that directory. If it is present, it will be displayed. If not, a 404 error is displayed. To resolve this issue, just create an index.html file with the following content:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Assignment 3</title>
</head>
<body>
  <a href="exercise1/">exercise 1</a>
  <br>
  
</body>
</html>

Change the href attribute that it matches your folder structure.

Exercise 1 - Blue square

This exercise has no optional tasks.

Required task

Create a web page with a single, centered, blue square in the middle of the page.

Using JavaScript, make the square disappear when the mouse moves on top of it. It does not have to reappear when the mouse moves “out”.

Load your JavaScript in from a script tag in the document <head>. Since you load your JavaScript before the document <body>, you will need a strategy to load your script after the DOM content is loaded.

The following approaches exist

document.addEventListener('DOMContentLoaded', (event) => {
  // your code here
});

See Document: DOMContentLoaded event.

<script type="module" src="..."></script>

<script src="..." defer></script>

Exercise 2 - Using information from a option list element

This exercise has an optional task.

The web page for exercise 2 is a page where the user uses a drop-down list to select the number of squares to be displayed in centered line. See image below.

Required task

  1. Create a web page with a form containing the drop-down list and five squares (empty div-elements). The available option values should be the numbers 0-5.
  2. Add an event handler that listens to the select element and shows or hides boxes so that the total number of visible boxes matches the selected value. You can also add and remove the boxes.

Optional task 1

  1. Increase the number of options in the drop-down list from 0-5 to 0-16.

Exercise 3 - Adding text with class

This exercise has an optional task.

In exercise 3, you will use keyboard events to monitor a text area and make changes to text on the web page. The user should also be able to change the style of the text. See wireframes below.

Required task

  1. Create a web page according to wireframe above. The web page should have a text area with a drop-down list and a button below it, and a div with the heading Story above it to the right of it.
  2. Implement the following page functionality using JavaScript:
    • When the user enters text into the text area to the left, the corresponding text should appear in the right div.
    • When the user presses the Change Style button below the text area, the selected typographic style should be applied to to the current text in the right div (you can make up your own style names and decide its attributes).
    • Applying a style should be implemented by defining the a class with that style in your CSS and setting the class of the current paragraph to that style.
    • The content of the text area should always be reflected in the current paragraph.

Optional task 2

In addition to the basic difficulty level, the following functionality should be added:

  • Add an additional button labeled New Paragraph below the text area. Pressing this button adds a new paragraph to the div to the right.
  • The new paragraph becomes the active paragraph. Old paragraphs cannot become active paragraphs.
  • Only the active paragraph is affected by style changes.

Exercise 4 - Manipulating CSS properties

This exercise has no optional tasks.

The aim of the fourth exercise is to practice different kinds of CSS manipulation.

You can use the files found here: assignment3/a3e4.zip. The html file references the file script.js. Create this file and write your JavaScript there.

Required task

All the following should be completed.

  • When the user clicks on a circle, the class .green should be toggled (remove from the class list if present, add if not).
  • When the user clicks on a square, the square should be resized to half its current size (half the width and half the height), i.e. clicking a square always changes the size of the square.
  • When the user clicks on a rectangle, it should move down 10px from its current position, i.e. a rectange should always move down 10px when clicked.

Tip: Use window.getComputedStyle() to get the current style of an element. You can then get e.g. the height or width from that CSSStyleDeclaration object.

Exercise 5 - CSS Animations

This exercise has one optional tasks.

In exercise 5 you will learn how to initiate and cancel animated CSS changes. You can use the files found here: assignment3/a3e5.zip

Required task

  • When the mouse is over any single rectangle, it starts to grow downwards until it reaches a certain size (you decide).
  • As soon as the mouse leaves any single rectangle, it stops growing and starts to shrink to its original size.
  • Any new animation on an element should replace any ongoing animation on that element.
  • You can use transitions in this example.
  • This task can be done entirely in CSS.

Optional Task

Do not use CSS-transitions and solve the task using CSS-keyframe animations. Do not use javascript in this task.

Exercise 6 - Putting everything together

This exercise has an optional task.**

Required task

Create a web page that reproduces the layout above, then implement the following functionality:

  • Each button should be connected to a box.
  • When the user clicks a button, two things happen:
    1. the corresponding box changes its size using an animated transition
    2. the button is marked visually as being activated, also using an animated transition
  • When the user clicks another button, any previously activated button and box reverts to their original appearance, also using animated transitions.

Optional task 3

Implement all functionality of the basic difficulty level and add the following:

  • Add a slider that is used to set the opacity of the square connected to the activated button. The square should retain the set opacity when another button is pressed.
  • When a button is activated, the slider is set to the connected square’s opacity level.
  • Do not use element.style to change styles. Instead, add/remove/toggle classes.

Note: It is not necessary to replicate the tick marks on the slider.