Assignment 5

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:

• Copy an existing complex interaction technique.
• Implement your own creative idea.

Assignment points

• 1 point: Complete exercise one.
• 2 points: Complete all exercises (exercise 2 can be a group submission).

The deadline for submitting Assignment 5 can be found on the Deadlines page.

General requirements & submission

• Submit your code via gitlab.
• Submit your code in the subfolder public/assignment_5/yourname
• Every group member submits their own idea (this is not a group submission)
• Provide a link on your GitLab page to access each group member, from there, provide links to access:
  • The input method(s).
  • The video demonstrating the input method.

Presentation

There will be no presentation for this assignment next Friday.

Video Creation:

Create a video demonstrating your input method.

Duration: Approximately 30 seconds (maximum 1 minute).

• Content of the Video:
  • Clearly show and explain your input method.
  • You can use voiceover and/or subtitles for explanations.
  • Can also be just a video where you interact with the input method.
  • Show the interaction at least 2 times.
  • Video Format: mp4

You can use obs to record your screen. You can use Davinci Resolve or any other video software to cut your video.

There will be a single-cut video of all submissions. Anonymize the video if preferred, but not mandatory.

Inputs from Hell

Have a look at the worst input fields. This video shows similar interaction fails.

Exercise 1

Implement your own input method from hell. You can be inspired by this and this.

You can extend an existing technique by adding extended functionality.

You can also build upon your solution not based on any previous examples.

We are looking forward to see creative ideas!

Level of complexity

In this assignment the criterias to pass the exercises are not that strict as in the previous assignments.

The evaluation of the exercises will be on a more individual basis.

If you are unclear if your submission will be sufficient, speak to your group-teacher.

Keep the complexity adequate.

Choose an idea that suits your skill level.

While some methods are clearly beyond the scope of this exercise:

do not implement input methods that are too simple:

or

Challenge yourself ;)

Final Supercut Video

The results from all submissions will be available in a single video here.

Exercise 2 - Local Storage (optional)

In this exercise, your task is to send data across multiple html documents via localStorage.

This optional task will be helpful for the project if you intent to implement a webshop as a multi-page application.

On the index page, two articles are listed, each article can be viewed in details.

index.html

On the details page, an additional description is displayed and a text indicating if the previous checkbox was selected or not.

details.html

Implement the following:

In the index.html:

• Add the info of the selected checkbox to localStorage.
• Read the info from localStorage on page-load and set the checkboxes accordingly.

In the details.html,

• Read the info from localStorage and display it.
• Read the additional details from the data.js and display it.

This execise can be submitted as group.

Hints

• This repository can help you with this task.
  • The code is also in your project repository in the examples folder.
• All changes required are marked with // TODO comments.
• The exercise can be finished by adding/changing 5 lines of code only.
• The complexity in this assignment lies in understanding cross-page communication through local-storage.