{"id":273,"date":"2024-06-23T15:21:58","date_gmt":"2024-06-23T13:21:58","guid":{"rendered":"https:\/\/cammonte.com\/?page_id=273"},"modified":"2024-07-15T15:06:54","modified_gmt":"2024-07-15T13:06:54","slug":"tell-en-jeu","status":"publish","type":"page","link":"https:\/\/cammonte.com\/index.php\/tell-en-jeu\/","title":{"rendered":"TELL en jeu"},"content":{"rendered":"\n<p><strong>TELL <em>en jeu<\/em><\/strong> 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 <a href=\"https:\/\/www.unil.ch\/lettres\/fr\/home.html\">Faculty of Arts<\/a> at the <a href=\"https:\/\/www.unil.ch\/index.html\">University of Lausanne<\/a>.<\/p>\n\n\n\n<p>Over the course of an academic semester, I collaborated with the <a href=\"https:\/\/www.epfl.ch\/labs\/iig\/\">Immersive Interaction Research Group<\/a> 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.<\/p>\n\n\n\n<p><strong>The application is currently deployed and available for use: <\/strong><a href=\"https:\/\/camonte.github.io\/Tell\/\">try it!<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Keypoints<\/h3>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<ul class=\"wp-block-list\">\n<li>Unity<\/li>\n\n\n\n<li>WebGL<\/li>\n\n\n\n<li>C#<\/li>\n<\/ul>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<ul class=\"wp-block-list\">\n<li>Javascript<\/li>\n\n\n\n<li>User-driven development<\/li>\n\n\n\n<li>UI design<\/li>\n<\/ul>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\">TL;DR<\/h3>\n\n\n\n<p>I developed an interactive whiteboard application to teach French pronunciation using shapes and colours. This WebGL Unity application interfaces with the browser&#8217;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\u00e8mes) for sounds and their written forms (graph\u00e8mes) to facilitate learning.<\/p>\n\n\n\n<p>Building on an initial version, I integrated new features, optimised the codebase, and ensured compatibility with existing functions, despite limited documentation. The teacher&#8217;s interface allows content customisation and targeted exercises, while students interact with phon\u00e8mes and graph\u00e8mes to complete exercises. The development process followed an agile methodology, emphasising regular iterations, continuous feedback, and close client communication to align with the client&#8217;s vision and user feedback.<\/p>\n\n\n\n<h1 class=\"wp-block-heading\">Background<\/h1>\n\n\n\n<p>The TELL (Tableaux des \u00c9l\u00e9ments et des Liaisons Linguistiques, which translates to &#8220;Tables of Elements and Linguistic Connections&#8221;) method is designed to guide the pronunciation of French sounds using shapes, colours, and positions.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"723\" height=\"1024\" src=\"https:\/\/cammonte.com\/wp-content\/uploads\/2024\/06\/2210_011_TELL_Phonemes_A2_0109221024_1.jpg\" alt=\"\" class=\"wp-image-275\" style=\"width:278px;height:auto\" srcset=\"https:\/\/cammonte.com\/wp-content\/uploads\/2024\/06\/2210_011_TELL_Phonemes_A2_0109221024_1.jpg 723w, https:\/\/cammonte.com\/wp-content\/uploads\/2024\/06\/2210_011_TELL_Phonemes_A2_0109221024_1-212x300.jpg 212w\" sizes=\"auto, (max-width: 723px) 100vw, 723px\" \/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"724\" src=\"https:\/\/cammonte.com\/wp-content\/uploads\/2024\/06\/2210_012_TELL_Graphemes_A1_0109221024_1.jpg\" alt=\"\" class=\"wp-image-276\" srcset=\"https:\/\/cammonte.com\/wp-content\/uploads\/2024\/06\/2210_012_TELL_Graphemes_A1_0109221024_1.jpg 1024w, https:\/\/cammonte.com\/wp-content\/uploads\/2024\/06\/2210_012_TELL_Graphemes_A1_0109221024_1-300x212.jpg 300w, https:\/\/cammonte.com\/wp-content\/uploads\/2024\/06\/2210_012_TELL_Graphemes_A1_0109221024_1-768x543.jpg 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p>Phon\u00e8mes are coloured shapes that represent sounds, while graph\u00e8mes 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.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"848\" src=\"https:\/\/cammonte.com\/wp-content\/uploads\/2024\/06\/Screenshot-from-2024-06-06-13-01-18-1024x848.png\" alt=\"\" class=\"wp-image-274\" style=\"width:338px;height:auto\" srcset=\"https:\/\/cammonte.com\/wp-content\/uploads\/2024\/06\/Screenshot-from-2024-06-06-13-01-18-1024x848.png 1024w, https:\/\/cammonte.com\/wp-content\/uploads\/2024\/06\/Screenshot-from-2024-06-06-13-01-18-300x248.png 300w, https:\/\/cammonte.com\/wp-content\/uploads\/2024\/06\/Screenshot-from-2024-06-06-13-01-18-768x636.png 768w, https:\/\/cammonte.com\/wp-content\/uploads\/2024\/06\/Screenshot-from-2024-06-06-13-01-18.png 1238w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>The learning process is supported by various educational resources. Physical resources include phon\u00e8me and graph\u00e8me cards and cutouts, while online resources feature a &#8220;translation&#8221; tool and a memory game.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"528\" src=\"https:\/\/cammonte.com\/wp-content\/uploads\/2024\/06\/Screenshot-from-2024-06-22-14-08-37-1024x528.png\" alt=\"\" class=\"wp-image-279\" style=\"width:694px;height:auto\" srcset=\"https:\/\/cammonte.com\/wp-content\/uploads\/2024\/06\/Screenshot-from-2024-06-22-14-08-37-1024x528.png 1024w, https:\/\/cammonte.com\/wp-content\/uploads\/2024\/06\/Screenshot-from-2024-06-22-14-08-37-300x155.png 300w, https:\/\/cammonte.com\/wp-content\/uploads\/2024\/06\/Screenshot-from-2024-06-22-14-08-37-768x396.png 768w, https:\/\/cammonte.com\/wp-content\/uploads\/2024\/06\/Screenshot-from-2024-06-22-14-08-37-1536x793.png 1536w, https:\/\/cammonte.com\/wp-content\/uploads\/2024\/06\/Screenshot-from-2024-06-22-14-08-37.png 1754w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h1 class=\"wp-block-heading\">Requirements analysis<\/h1>\n\n\n\n<p>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 &#8220;TELL pour TBI&#8221;. The use of an interactive whiteboard also enabled the incorporation of multimodal learning.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"560\" src=\"https:\/\/cammonte.com\/wp-content\/uploads\/2024\/06\/Screenshot-from-2024-06-22-14-13-19-1024x560.png\" alt=\"\" class=\"wp-image-280\" style=\"width:958px;height:auto\" srcset=\"https:\/\/cammonte.com\/wp-content\/uploads\/2024\/06\/Screenshot-from-2024-06-22-14-13-19-1024x560.png 1024w, https:\/\/cammonte.com\/wp-content\/uploads\/2024\/06\/Screenshot-from-2024-06-22-14-13-19-300x164.png 300w, https:\/\/cammonte.com\/wp-content\/uploads\/2024\/06\/Screenshot-from-2024-06-22-14-13-19-768x420.png 768w, https:\/\/cammonte.com\/wp-content\/uploads\/2024\/06\/Screenshot-from-2024-06-22-14-13-19-1536x840.png 1536w, https:\/\/cammonte.com\/wp-content\/uploads\/2024\/06\/Screenshot-from-2024-06-22-14-13-19-2048x1120.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h1 class=\"wp-block-heading\">Existing codebase<\/h1>\n\n\n\n<p>This project builds on the work of <a href=\"https:\/\/github.com\/PeterKrcmar0\">Peter Krcmar<\/a> who developed the <a href=\"https:\/\/github.com\/PeterKrcmar0\/tell-in-motion\">first version of TELL pour TBI<\/a>.<\/p>\n\n\n\n<p>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&#8217;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.<\/p>\n\n\n\n<h1 class=\"wp-block-heading\">Application interface<\/h1>\n\n\n\n<p>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.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Teacher interface<\/h2>\n\n\n\n<p>The teacher interface of the application is a pop-up window displayed on the teacher&#8217;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\u00e8mes to create targeted exercises focusing on specific sounds that the student may find challenging.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"952\" height=\"1024\" src=\"https:\/\/cammonte.com\/wp-content\/uploads\/2024\/06\/popup-952x1024.png\" alt=\"\" class=\"wp-image-285\" style=\"width:650px;height:auto\" srcset=\"https:\/\/cammonte.com\/wp-content\/uploads\/2024\/06\/popup-952x1024.png 952w, https:\/\/cammonte.com\/wp-content\/uploads\/2024\/06\/popup-279x300.png 279w, https:\/\/cammonte.com\/wp-content\/uploads\/2024\/06\/popup-768x826.png 768w, https:\/\/cammonte.com\/wp-content\/uploads\/2024\/06\/popup-1428x1536.png 1428w, https:\/\/cammonte.com\/wp-content\/uploads\/2024\/06\/popup.png 1674w\" sizes=\"auto, (max-width: 952px) 100vw, 952px\" \/><figcaption class=\"wp-element-caption\">Teacher interface pop-up window<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Student Interface<\/h2>\n\n\n\n<p>The student interface, displayed on the whiteboard, allows students to drag phon\u00e8mes and graph\u00e8mes 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.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"795\" src=\"https:\/\/cammonte.com\/wp-content\/uploads\/2024\/06\/interface-1024x795.png\" alt=\"\" class=\"wp-image-293\" style=\"width:624px;height:auto\" srcset=\"https:\/\/cammonte.com\/wp-content\/uploads\/2024\/06\/interface-1024x795.png 1024w, https:\/\/cammonte.com\/wp-content\/uploads\/2024\/06\/interface-300x233.png 300w, https:\/\/cammonte.com\/wp-content\/uploads\/2024\/06\/interface-768x596.png 768w, https:\/\/cammonte.com\/wp-content\/uploads\/2024\/06\/interface-1536x1192.png 1536w, https:\/\/cammonte.com\/wp-content\/uploads\/2024\/06\/interface.png 1958w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h1 class=\"wp-block-heading\">User-driven development<\/h1>\n\n\n\n<p>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&#8217;s vision and user feedback.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"621\" src=\"https:\/\/cammonte.com\/wp-content\/uploads\/2024\/06\/Screenshot-from-2024-06-22-15-38-05-1024x621.png\" alt=\"\" class=\"wp-image-282\" style=\"width:743px;height:auto\" srcset=\"https:\/\/cammonte.com\/wp-content\/uploads\/2024\/06\/Screenshot-from-2024-06-22-15-38-05-1024x621.png 1024w, https:\/\/cammonte.com\/wp-content\/uploads\/2024\/06\/Screenshot-from-2024-06-22-15-38-05-300x182.png 300w, https:\/\/cammonte.com\/wp-content\/uploads\/2024\/06\/Screenshot-from-2024-06-22-15-38-05-768x466.png 768w, https:\/\/cammonte.com\/wp-content\/uploads\/2024\/06\/Screenshot-from-2024-06-22-15-38-05-1536x932.png 1536w, https:\/\/cammonte.com\/wp-content\/uploads\/2024\/06\/Screenshot-from-2024-06-22-15-38-05.png 1732w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":400,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"ub_ctt_via":"","site-container-style":"default","site-container-layout":"default","site-sidebar-layout":"default","disable-article-header":"default","disable-site-header":"default","disable-site-footer":"default","disable-content-area-spacing":"default","footnotes":""},"class_list":["post-273","page","type-page","status-publish","has-post-thumbnail","hentry"],"featured_image_src":"https:\/\/cammonte.com\/wp-content\/uploads\/2024\/07\/tell_header.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/cammonte.com\/index.php\/wp-json\/wp\/v2\/pages\/273","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cammonte.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/cammonte.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/cammonte.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cammonte.com\/index.php\/wp-json\/wp\/v2\/comments?post=273"}],"version-history":[{"count":20,"href":"https:\/\/cammonte.com\/index.php\/wp-json\/wp\/v2\/pages\/273\/revisions"}],"predecessor-version":[{"id":541,"href":"https:\/\/cammonte.com\/index.php\/wp-json\/wp\/v2\/pages\/273\/revisions\/541"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cammonte.com\/index.php\/wp-json\/wp\/v2\/media\/400"}],"wp:attachment":[{"href":"https:\/\/cammonte.com\/index.php\/wp-json\/wp\/v2\/media?parent=273"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}