Home My homepage at TECFA My projects page EdutechWiki profile LinkedIn
Name Rosaria
Last Name Marraffino
Exercise n° 4
Date 03/12/2019
Volée Zelda




In Exercise 2 and Exercise 3 I explored the colours perceptions of people affected by some forms of colour-blindness. For this exercise I chose to develop a video that gives some practical advice on how to create accessible web sites, for colour-blind people. The target audience is people interested in developing a web application or platform and want to take into account vision deficiency.

The first part of the video approaches again theoretically the subject of colour blindness, showing first some statistical data and then reminding some forms of colour blindness. After this brief introduction, the video proceeds with four practical tips.

These tips are illustrated and commented. For each of them, the video presents four different examples for as many colour perceptions. After the second and third tip, a quiz appears to test the user’s comprehension.


The page is composed of four main elements: the interactive buttons, the video and the two quizzes that appear after two of the four tips have been visualised by the user, and, below and above the video, a text that recalls the content of the video. I add the introductionand the text because the users might not be able watch the video right away.

The interactive buttons give the user the possibility to go back and replay the parts they are more interested in when, for example, they are revisiting the page. The quiz questions aim at reinforcing the transfer of knowledge. A correct answer allows the user to resume the video from the point it was paused. A wrong answer points to the beginning of the related topic.

The video is relatively short (less than 4 minutes) and the key elements are easily identifiable thanks to the interactive buttons. The buttons allow the segmentation of the content, which is important in order to not overcharge the cognitives capacity of the learners. They also lets user choose the pace of the video lesson, whose importance has been shown by Mayer and Fiorella in a study on instructional videos (Fiorella, Mayer, 2018). The authors of the study pointed out as well that learning from video is even more effective when learners can apply this knowledge to new situations. In this case, when the user has to develop a website and has to make design choices (colours, graphs, hyperlinks, feedback messages).

Two other elements, the voice over and the subtitles, are used to help users with vision deficiency or hearing impairment, respectively.

The structure of the page - video and text - allows the users to grasp the main elements of how to design an accessible platform that takes into account colour deficiency. These advices follow the ergonomic principle of user accessibility, therefore should be always applied.


The first step was to research the practical advices I wanted to display in the video. I then created a storyboard with the elements I wanted to feature in it. I downloaded and modified the images I didn’t have and created with Adobe Illustrator the rest of them. I developed the video with Adobe After Effects CS6 and edited it in Adobe Premiere Pro.

I recorded my voice and make some edits with the Audacity free software. I downloaded a royalty-free music track and I added it as a second audio track to the video in Premiere. I made it fade down when the voice starts, so as to not interfere. I then exported the video to a .mov format and then converted it to .webm with an online converter (the link to the converter is available below in the page).

For the JavaScript code I followed the explanation on the EduTech Wiki pages for the exercise. A link to the js code and the CSS stylesheet are available above in this page.


The application does what is supposed to do and that is a strong point. I didn’t have particular problems in developing the video, as I use already Adobe After Effects for some of my professional projects. Developing the JavaScript code was easier for me this time because I had to adapt some of the information that I had already learned for the previous exercise. The explanations on the EduTech Wiki pages were also very simple to follow.

However, as for Exercise 3, I originally wanted to set more than one question per quiz and get the application to choose one randomly but I found it very difficult to write the code so as to match the right answers for the given random question.

In addition, I wasn't able to clear the state of the answered questions. I tried to use the method .location.reload(clear), but it didn't work. It reloaded the page and resumed the video from the beginning instead of clearing the answer.