XAI Learning Game

An innovative interactive game designed to teach the principles of Explainable AI (XAI) through engaging scenarios and intuitive visualizations. This project uses SHAP (SHapley Additive exPlanations) to help players interpret model predictions and understand feature importance.

Motivation

The game bridges the gap between XAI concepts and practical understanding. By turning complex ideas into an engaging learning experience, it empowers players to make informed decisions about AI-driven insights.

Artifact Overview

This project reflects the core principles of Responsible AI and Explainable AI by:

• Providing an intuitive, hands-on learning experience.
• Applying SHAP visualizations to new and interactive educational scenarios.
• Promoting the use of XAI for education and outreach.

Features

• Interactive Gameplay: Players navigate multiple levels, analyze model predictions, and make decisions based on feature explanations.
• XAI Integration: Visualizations of SHAP values to interpret model outputs.
• Engaging Feedback System: Scores and progress tracking for players.
• Customization Options: Choose characters and personalize gameplay.

Installation and Setup

Prerequisites

• Node.js and npm installed on your system.

Steps to Run

1. Clone the repository:

   git clone https://github.com/afraa-n/XAI-Learning-Game.git

2. Navigate to the project directory:

   cd XAI-Learning-Game

3. Install dependencies:

   npm install

4. Start the development server:

   npm start

5. Open your browser and navigate to http://localhost:3000.

How to Play

1. Choose a character and enter your name.
2. Explore the level map and select a scenario.
3. Review the dataset and select feature values.
4. Analyze SHAP value visualizations for model interpretability.
5. Make predictions and compare them with model outputs.
6. Progress through levels to unlock new challenges and features.

Technologies Used

• React: For building user interfaces.
• TypeScript: For enhancing code quality with static typing.
• Tailwind CSS: For rapid and flexible UI styling.
• Recharts: For dynamic SHAP value visualizations.
• Shadcn/ui: For modern and accessible components.

Acknowledgments

• Inspired by real-world XAI use cases and scenarios.
• Special thanks to the tools and open-source libraries used in this project.

Video Presentation

Watch a short overview of the game and its features in this video presentation.