STIC-1 Rapport d'Exercice 4
STIC-1 University lecturer : Nicolas Szilas, Assistant : Djamileh Aminian
Author : Femmy Priscillya Antolinez
Publication date : 24 Novembre 2025
1.0. Links
Vidéo pédagogique interactif2.0. Objectives
As both a student and a teacher, I find video to be a valuable
learning format because it allows anyone to learn at their own
pace and access materials from anywhere. When it's well designed,
it can be effective for demonstrating step-by-step processes, as
it gives the flexibility to learners to pause, rewind, and revisit
specific parts of the lesson whenever needed.
For this
exercise, interactivity was added to support the learning process.
Whenever I give a live demonstration on painting, I often need
extra time for the layers to dry, sometimes using a hair dryer
before moving on to the next step. With video, it becomes much
easier to show a time-lapse of the process and make the workflow
more practical, easier to visualize. I know this material will be
practical and useful for my students.
3.0. Design
The theme of this tutorial is negative painting, and the video presents the entire process of building the artwork layer by layer. In real time, this process takes several hours. For the purpose of this educational video, most sequences have been accelerated so that learners can view a time-lapse of the full progression from beginning to end. Subtitles accompany the visuals to explain the context, techniques, and reasoning behind each step. According to Brame (2016), effective educational videos should be concise, ideally under six minutes, to maximize student engagement and learning. The content of this video has been edited to focus on the key phases of the technique while keeping the total duration within an optimal learning range. Interactivity through JavaScript allows learners to directly access key moments in the video: the construction of the second layer, the application of the negative painting technique to create depth, a short quiz to reinforce understanding, and the final touches that complete the artwork.
4.0. Production
The video was filmed using my Samsung A40 mobile phone, positioned
above the drawing surface to clearly capture the watercolor
process. The raw footage was then edited in DaVinci Resolve 20.
Because the recording environment included background noise, and
accelerating the footage (2x, 10x, or 20x) would also accelerate
and distort the original sound, making it distracting or
unpleasant, I muted the original audio track entirely. I added
calm royalty-free background music (without lyrics) instead.
Taheri et al. (2022) found that playing classical instrumental
background music improved working memory and fine motor skill
performance compared with silence.
The background music was downloaded from Pixabay, whose content license allows users to use, modify, and adapt audio tracks for free. After editing, the video was exported as an MP4 file with the same frame rate and resolution as the original recording. The first render resulted in a file of approximately 2 GB, which was too large to upload to the TECFA SFTP server. By adjusting the parameters and compression settings, I reduced the file size to around 600 MB without significantly affecting visual quality.
The interactive elements were implemented using JavaScript, inspired by examples from the STIC course and the EduTechWiki. Several features were added :
- navigation buttons allowing learners to jump to key moments (ie. building the second layer, the application of negative painting, the final touch),
- a mini-quiz appearing at a specific timestamp to promote engagement and active recall,
- and a mechanism to pause the video when the quiz appears, then resume playback once the learner closes the questionnaire.
During the development of the interactive video, I initially implemented a questionnaire that was triggered at a specific timestamp (3 minutes 45 seconds). However, I encountered a bug: when the questionnaire appeared, the video paused correctly, but after clicking the “Continue” button, the video did not resume. ChatGPT helped me analyze and debug my JavaScript code. It explained that the reason the video didn't resume properly because there was a duplicated checkAnswer function that cause conflicts. The solution is to use a single, centralized closeQuestionnaire() function and attache the "continue" button event listener in JavaScript, to ensure it hides the questionnaire and calls video.play().
5.0. Self-assesstment
As I completed this video tutorial project on November 24th 2025, I shared the video with with my students who were absent during my workshop on December 3rd 2025, as the topic was about Negative Painting. My student followed the tutorial from the video and managed to recreate the same illustration with the same technique. I'm satisfied with the outcome of this exercice. Watercolor is a technique that relies heavily on visual observation, how pigments diffuse, how layers build up, how timing influences the result. A video allows learners to see each stage of the process in real time or accelerated time, something that would be difficult to describe through text alone. Compressing a multi-hour artistic process into a short sequence gives learners a global understanding of the full workflow, from first wash to final details, while still preserving key steps and transitions. The video format also supports self-paced learning where learners can pause, replay, and closely observe complex gestures that might be missed during a live demonstration. I could personally say that compared to a typical standard linear video, an interactive video with selective navigation supports is more interesting.
6.0. Bibliography
- Brame, C. J. Effective Educational Videos: Principles and Guidelines for Maximizing Student Learning from Video Content. https://doi.org/10.1187/cbe.16-03-0125
- Taheri, S., Razeghi, M., Choobineh, A., Kazemi, R., Rasipisheh, P., & Vali, M. Investigating the effect of background music on cognitive and skill performance: A cross-sectional study. https://doi.org/10.3233/WOR-213631
7.0. Resources
- OpenAI. (2025). ChatGPT (GPT-5 Model) https://chatgpt.com
- Pixabay Music Modern Classical - Cicada Dreams (Lofi Piano) https://pixabay.com/music/modern-classical-cicada-dreams-lofi-piano-371166/
- Pixabay Music Beats - Forest Memories (Lofi Piano) https://pixabay.com/music/beats-forest-memories-lofi-piano-371163/
- STIC: STIC I – exercice 4 (Freya) (n.d.). EduTechWiki. Retrieved November 17th, 2025 https://edutechwiki.unige.ch/fr/STIC:STIC_I_-_exercice_4_(Freya)