1. Links
2. Goals
Objectives can be seen in the Introduction section of this exercise 2.
Same than for the previous project I asked my girlfriend what could be implemented for her pupils.
The first idea was to create an educational video to teach 8P pupils about how to calculate the perimeter of a rectangle.
Few parts of the video would be interactive, e.g., the video stops and asks about the topic of the few elapsed seconds.
So the final goal was to create and implement in an HTML web page an online interactive lesson where 8P pupils (Swiss Romandie, Geneva) could learn about the perimeter of a rectangle.
3. Design
The page first displays a short phrase to introduce the topic of the video. I preferred to introduce the video such as the topic would not be that serious (e.g., not saying "Learn how to do maths."). This way I want to create a kind of incentive to watch the video.
The video introduces for the first time Noxxy, a companion that we first saw here. By having this companion along the video I anchor the learning in a story (REF of stories better learned than facts).
The header of the page and the first images introduce the first topic of the video : soccer.
We will follow our friendly character until the voice-over introduces the second subject of the educational video by saying "Do you know that the soccer goals and field are rectangles ?"
Subtitles are shown every time that Noxxy seems to talk to us, moreover these subtitles will emphasize few of the important words to know during the video.
I restrained myself to show the subtitles because I wanted the pupils to be fully focused on the matter and what was displayed on screen, instead of trying to read and missing important parts of the video (REF subtitles in educational videos not perfect for young age OR source of distraction OR reading is not that automatic).
I also implemented not more than one effect at the time in order to avoid distractions (REF attention of screen allocated, tunnel vision, ex. gorilla).
Note that Noxxy gazes most of the time where the next effect will appear. Researches show that the gaze (even eyes only) helps on focusing attention on the shared object (REF of gazing, N.Burra's work).
Music on the background might be however some kind of distraction in some situations. Here, it helps the voice-over by filling silences and keeps the pupil's attention on the video - silences could be wrongly interpreted (e.g., lag, bug, etc.) and thus lead to disengagement (REF better music than silences for engagement???).
Two interruptions are implemented at 0:59 and 2:15 asking one question at a time. The first one asks about what is the measurement tool used to measure right-angled corner (outside of the video topic, general knowledge), second asks about the perimeter of a rectangle (implementation of the subject of the video , specific knowledge).
The video ends by teasing the subject of the next video (hopefully implemented someday !).
4. Production
Video was made on Powerpoint, voice-over were made by me and recorded directly through Powerpoint.
Few images were took through Powerpoint (Creative Commons only: soccer ball), other were made by me (Noxxy, quadrilaterals, soccer stadium black and white), other taken in freepik.com (soccer stadium background, grass) and screenshots were taken from https://fr.wiktionary.org/wiki/p%C3%A9rim%C3%A8tre
Music was found through Youtube, searching for "Free music".
I used Shotcut to bind the video and the music, deleting some background noise (tapping keyboard) and converting the video in .webm.
HTML and JS was made by me with help from https://edutechwiki.unige.ch/fr/STIC:STIC_I_-_exercice_4_(Baldur)
5. Self-assessment
The video does not have a great visual quality (I preferred not to send a heavy video) - I should have found a better manner to decrease the file size while keeping the visual quality.
The voice-over could be a bit more louder - or the background music a bit more soft.
The background of the video could be a bit more elaborated, not just a white background.
6. References
References were not added sorry...
7. Resources
Microsoft Powerpoint : This Photo by Unknown Author is licensed under CC BY-NC.
www.freepik.com : Nature vector created by brgfx; Background photo created by lifeforstock.
Music: Keep on Bringing Me Back (Free download: brokeinsummer.com/keep-on-bringing-me-back, artists: brokeinsummer.com, contact: brokeinsummer.com/help)
Wikitionary : https://fr.wiktionary.org/wiki/p%C3%A9rim%C3%A8tre.