JsStories: Improving Social Inclusion in Computer Science Education Through Interactive Stories

TL;DR

JsStories tackles high dropout rates in CS education for underrepresented groups by combining alumni narratives with interactive JavaScript exercises. It leverages PRIMM pedagogy and a knowledge-graph-driven progression to tailor content and support inclusion, evaluated via stakeholder interviews and a survey under a Design Science Research framework. The main contributions include a story-based artefact with PRIMM-aligned activities implemented in a React/Ionic desktop app, content managed via a Strapi CMS, and a knowledge graph guiding non-linear learning. The work demonstrates the feasibility and perceived value of story-based learning for social inclusion and outlines directions for broader evaluation and domain adaptation, including language learning.

Abstract

A main challenge faced by non-profit organisations providing computer science education to under-represented groups are the high drop-out rates. This issue arises from various factors affecting both students and teachers, such as the one-size-fits-all approach of many lessons. Enhancing social inclusion in the learning process could help reduce these drop-out rates. We present JsStories, a tool designed to help students learn JavaScript through interactive stories. The development of JsStories has been informed by existing literature on storytelling for inclusion and insights gained from a visit to HackYourFuture Belgium (HYFBE), a non-profit organisation that teaches web development to refugees and migrants. To lower barriers to entry and maximise the feeling of connection to the story, we incorporated narratives from HYFBE alumni. Further, we adhered to educational best practices by applying the PRIMM principles and offering level-appropriate content based on knowledge graphs. JsStories has been demonstrated, evaluated and communicated to the different stakeholders through interviews and a survey, enabling us to identify future directions for story-based learning solutions.

Figures (9)

• Figure 1: Topics covered by JsStories with colours matching the module of the HYFBE curriculum where they are introduced
• Figure 2: Example of a predict exercise
• Figure 3: Example of a run exercise
• Figure 4: Example of an investigate exercise
• Figure 5: Example of a 'fill in the blanks' modify exercise