Logo avant Logo arrière

Femmy Priscillya Antolinez

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

STIC-1 Rapport d'Exercice 5

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


Author : Femmy Priscillya Antolinez

Publication date : 20 Decembre 2025

1.0. Links

Low-carbon energy for a climate-friendly future

2.0. Objectives

The interactive page is about comparison of electricity production from different low-carbon energy generation technologies. The goal of this interactive page is to help learners understand that there is no single “perfect” low-carbon electricity solution. It's not to propose an optimal solution, but to encourage critical reflection on the assumptions underlying current energy transition narratives. Each technology involves trade-offs. In this interactive page, users build an electricity mix (quantitative part) and then compare technologies through a qualitative lens (qualitative explorer) to encourage critical thinking about feasibility, constraints, and social/environmental implications.To ensure accessibility for a broader audience in multilingual Switzerland, this application is in English.

3.0. Design

The interface is designed into two modules:

  • Quantitative simulation (drag & drop): each icon represents a fixed amount of installed capacity ( 1 GW) and adds an estimated annual electricity production computed from typical capacity factors (TWh/year = 8.76 × capacity factor, for 1 GW). The user’s task is to reach Switzerland’s approximate annual electricity demand (56.1 TWh/year) by combining different technologies. The intent is to make differences in “scale” visible and to encourage experimentation with multiple energy mixes.
    The drag-and-drop interaction supports the learning goal by turning an abstract quantity (TWh/year) into a manipulable object. Each drop immediately updates the total production and the list of installed units. This instant feedback helps people build an intuitive sense of scale (for example, why different low-carbon technologies do not produce the same amount of electricity for the same installed capacity). diagram
  • Qualitative explorer (with mechanism click to compare) : users click a technology to reveal five indicators: Intermittency, Land use, Materials/critical minerals, Public acceptance, and Waste/end-of-life. The bars use a 0–100 qualitative scale where a higher score means a bigger challenge / stronger constraint. These values are not precise measurements, they are a visualization based on IPCC AR6 WGIII discussion of energy system trade-offs and integration needs, combined with life-cycle thinking from a comparative LCA source, and Swiss-specific context for geothermal (especially acceptance concerns related to induced seismicity). The intention is to make learners question what are the consequences of these technologies, what else does the system need (flexibility, land, materials, acceptance, end-of-life handling)?

4.0. Production

I started by drawing the icons with Affinity Designers 2. To ensure good affordance and visual clarity in the user interface, in terms of UI, each draggable energy icon uses the same color or visual nuance as its corresponding droppable grid area.

The layout was designed in HTML and CSS, with a separation between the quantitative simulation (energy mix construction) and the qualitative explorer (impact comparison). For interactivity, I used JavaScript with jQuery and jQuery UI examples from Edutech Wiki page to implement drag-and-drop behaviour, state updates, and dynamic feedback. Feedback: energy counts, total production, and explanations are updated incrementally as the user interacts with the system was added later on. By using the flowchart and interactivity logic I made before, I used assistant from ChatGPT to help with the JavaScript.


I introduced a guiding character to encourage reflection at key moments (first interaction, repeated use of one technology, reaching the target, or exploring qualitative impacts). The fox’s dialogue content is stored directly in the HTML, while JavaScript only controls the behaviour. During the development of this project, I used ChatGPT as a support tool throughout the implementation process. It helped me structuring the JavaScript logic by identifying states, conditions, and transitions (i.e. use of flags, thresholds, and event-driven logic), debug and refactor code in JavaScript behaviour.

5.0. Self-assesstment

The main challenge of this exercise was finding the right balance between precision and simplification of the energy quantitative scales. Energy systems are complex, and there is a risk of misleading learner if quantitative scales are presented too precise or directly comparable. I initially focused on the quantitative exploration, but I realised that numbers alone are not enough to support meaningful understanding. This led me to add a qualitative exploration layer that highlights impact such as land use, intermittency, materials requirements, public acceptance, and waster.

Second challenge is to translate my reasoning into code, find the right Javascript code source online, and modify the examples of JQuery we learned from Edutech wiki. Creating a flowchart helped me clarify the sequence of actions, conditions, and feedback. Once the mental model was fixed, it became easier to implement it visually and programmatically. I used assistance from Chat-GPT to modify the code based on the logic.

6.0. Bibliography

7.0. Resources