TELL en jeu is an application designed for interactive whiteboards, aimed at facilitating the teaching of the French language to non-native speakers using the TELL method developed by the Faculty of Arts at the University of Lausanne.

Over the course of an academic semester, I collaborated with the Immersive Interaction Research Group at EPFL to develop this application for the Faculty of Arts. The application was created using Unity, following a user-driven development process that involved continuous dialogue with the client.

The application is currently deployed and available for use: try it!

Keypoints

TL;DR

I developed an interactive whiteboard application to teach French pronunciation using shapes and colours. This WebGL Unity application interfaces with the browser’s JavaScript engine, supporting a dual-screen setup: the main interactive whiteboard for students and a secondary pop-up window for teachers. The TELL method uses coloured shapes (phonèmes) for sounds and their written forms (graphèmes) to facilitate learning.

Building on an initial version, I integrated new features, optimised the codebase, and ensured compatibility with existing functions, despite limited documentation. The teacher’s interface allows content customisation and targeted exercises, while students interact with phonèmes and graphèmes to complete exercises. The development process followed an agile methodology, emphasising regular iterations, continuous feedback, and close client communication to align with the client’s vision and user feedback.

Background

The TELL (Tableaux des Éléments et des Liaisons Linguistiques, which translates to “Tables of Elements and Linguistic Connections”) method is designed to guide the pronunciation of French sounds using shapes, colours, and positions.

Phonèmes are coloured shapes that represent sounds, while graphèmes are the various possible written representations of these sounds. By combining these elements, the TELL method facilitates an easy and pedagogical approach to learning both written and spoken French.

The learning process is supported by various educational resources. Physical resources include phonème and graphème cards and cutouts, while online resources feature a “translation” tool and a memory game.

Requirements analysis

The core idea of my project was to merge the advantages of physical and digital resources while minimising their drawbacks by developing an interactive whiteboard application called “TELL pour TBI”. The use of an interactive whiteboard also enabled the incorporation of multimodal learning.

Existing codebase

This project builds on the work of Peter Krcmar who developed the first version of TELL pour TBI.

Working with an existing codebase required careful analysis and planning to integrate new features while ensuring compatibility with existing functionalities. Due to limited documentation typical of student semester projects, a meeting with the original developer provided crucial insights into the application’s architecture and evolution, prompting me to independently deepen my understanding of the codebase. Refactoring and optimising sections of the codebase improved performance and scalability, while leveraging existing libraries and frameworks expedited development efforts.

Application interface

The application operates as a web app with a dual-screen setup: the main window is displayed on the interactive whiteboard for student interaction, while a secondary pop-up window is provided for the teacher to adjust the content shown in the main window.

Teacher interface

The teacher interface of the application is a pop-up window displayed on the teacher’s computer. After selecting a game mode and configuring various parameters on the interactive whiteboard, the teacher can use this pop-up window to load specific words and sentences into the application. Additionally, they can enable or disable certain phonèmes to create targeted exercises focusing on specific sounds that the student may find challenging.

Student Interface

The student interface, displayed on the whiteboard, allows students to drag phonèmes and graphèmes from the lateral zones (in red) to the central zone (in green) to complete the exercise. Various buttons in the bottom bar enable students to modify exercise options, display corrections, resize the interface, and navigate between the different exercises loaded by the teacher.

User-driven development

The development process followed an agile methodology, with regular iterations and continuous feedback loops with the client. Each development sprint focused on implementing specific features or addressing identified issues from previous iterations. Throughout this iterative process, I maintained close communication with the client to prioritise tasks, manage expectations, and adjust requirements as necessary. This approach not only allowed for flexibility in responding to changing needs but also ensured that the application evolved in alignment with the client’s vision and user feedback.