Logo avant Logo arrière

Femmy Priscillya Antolinez

Promotion : Freya | femmy.lumbantobing@etu.unige.ch

STIC-1 Rapport d'Exercice 3

STIC-1 University lecturer : Nicolas Szilas, Assistant : Djamileh Aminian


Author : Femmy Priscillya Antolinez

Publication date : 20 Novembre 2025

1.0. Links

Design pédagogique interactif

2.0. Objectives

The interactive application main goal is to teach energy-efficient behaviors that can be applied at home. By exploring and clicking on different household icons (lamps, shower, kettle, etc.), users can:

  • Discover which everyday appliances play a significant role in reducing energy consumption.
  • Observe visual feedback through icon changes and receive short messages that explain the energy-saving benefits.

My intention is to make the application enjoyable and to spark users’ curiosity as they move their mouse around the house. It encourages engagement and learning through interactive exploration rather than passive reading. This interactive application is designed for users of all ages.

3.0. Design

The idea was to keep all essential content directly in the HTML rather than embedding it inside JavaScript. The "What" (images, messages) in the HTML and the "how" in JavaScript. The HTML body consists of :
  • Header: the navigation bar
  • Main content: introduction text, buttons, the house illustration, and all interactive icons
  • Electricity Consumption box: a section to calculate the average elecftricity consumption of a Swiss household, based on a study conducted for the Swiss Federal Office of Energy (SFOE). This study identifies typical electricity use for different household sizes, both in detached houses and apartment buildings.

All the interactive information and clickable icons are placed directly inside the HTML:
  • Each interactive/ clickable element is created using an img tag (images), instead of using buttons, divs, span, or svg shapes.
  • Icons use two CSS classes: icon (general styling i.e: size, hover effect, absolute positioning) and toggle (indicates that the icon has an interactive on/off state).
  • Icons include HTML data attributes to store their states: data-img-on / data-img-off (store the image paths for each state) and data-text-on / data-text-off (store the messages that will appear in the info box.)
  • Non-interactive icons (like the fox or the MALTT logo) only display informational text and therefore use a simpler structure.
  • The modal/pop-up boxes appear at the bottom of the screen, allowing users to scroll and read the content without losing sight of the house.

When the page loads, all toggleable icons start in the off state. If an icon does not yet have a dataset.state value, it is automatically initialized to "off". When the user clicks an icon, an event listener handles the interaction. diagram

4.0. Production

Once I had the idea fixed, I started drawing all the assets in Affinity Designer 2: the house and the icons. The images were then exported as .png files to keep a transparent background. I reused the trees from Exercise 2; the tree assets come from the Affinity Forum. At the beginning of the project, I reviewed examples from multiple resources to understand how to structure an interactive application. During this exploration, I learned an important modern JavaScript practice from exploringjs.com in using const instead of var. Initially, I used var because several tutorials still rely on it. Through these websites (MDN, geW3Schools, JavaScript ES6 guides), I discovered that const and let are strongly recommended, so I gradually adopted them throughout this project. Var is function-scoped, meaning a variable is accessible throughout the entire function in which it is declared. In contrast, const and let are block-scoped, meaning variables are only accessible inside the specific block { ... } where they are defined. This helps prevent unintended variable overwrites and leads to cleaner, more predictable code organisation.

I decided to store all static content directly in the HTML. At the same time, I reused my previous CSS styles and updated them where necessary. I followed the CSS positioning examples from W3Schools, but I encountered difficulties placing the icons accurately on the house illustration. I asked ChatGPT for advice on positioning strategies and, through trial and error, I adjusted the icons manually until they matched the desired layout. For the electricity consumption box, I used a dropdown list in an HTML select element so that the user can choose one option from the list. JavaScript is then used to retrieve the selected value from the dropdown and compare it to a lookup table, producing the correct electricity consumption based on Swiss household data.


To manage the behavior of the clickable icons, I decided to use HTML data attributes (data-) where each icon stores its own information :
  • the image for the “on” state (data-img-on)
  • the image for the “off” state (data-img-off)
  • the explanatory messages for each state (data-text-on / data-text-off)
  • and the current state (data-img-on)
I learned from CSS-Tricks, geeks for geeks, and MDN websites, that using data attribute is better because it keeps content and logic clearly separated. All text, images, and metadate are inside the HTML, while the JavaScript handles only the behaviour. If I want to change a message or swap an icon, I only update the HTML element, not the JavaScript file
For the "pop-up" and 'à propos de cette étudé" pop-up, I followed modal tutorials frol freeCodeCamp and W3Schools. I adapted the tutorials to follow modern JavaScript practice. The tutorials use var, but I replaced it with const so that the variable bindings remain block-scoped.

5.0. Self-assesstment

Learning JavaScript as a beginner was challenging, and this exercise taught me that programming is best learned by doing, not just by watching or reading. Even though there are many tutorials available online, I quickly realized that simply watching YouTube videos or reading through example code was not enough for me to fully understand how things worked. The tutorials helped me gain a basic sense of the syntax, but when I tried to combine different snippets of code on my own, the result often did not work as expected. This was frustrating at first. My understanding improved only when I started building the application step by step, testing each part, breaking things, and fixing them again. During this process, I encountered several errors and logical issues that I could not solve alone. At those moments, I asked ChatGPT for assistance to debug my code, explain error messages, or give me clearer alternatives. In this process, a Large Language Model like ChatGPT undeniably made it easier, smoother, and faster for me to get answers to my questions than using a traditional search engine like Google. While the field of AI still sparks debate, and as we live and witness this technological crossroads, I have to keep in mind the cost of intellectual independence when using this tool. In the creation of this application, I carefully set certain boundaries as the designer and let AI be the technical assistant.

6.0. Bibliography

7.0. Resources