Memory Game

A Blazor WebAssembly application designed to help people with dementia practice image-to-word associations. The game presents simple everyday objects in German and helps users practice matching images with words through adaptive learning.

Features

• 10-Round Game Sessions: Each game consists of 10 rounds to provide a focused practice session
• Dual Game Modes:
  • Show an image with 4 word choices
  • Show a word with 4 image choices
• Adaptive Learning:
  • Words answered correctly become less frequent in future games
  • Words answered incorrectly appear more often for additional practice
• Progress Tracking: Statistics are stored in browser local storage and persist across sessions
• Tablet-Optimized UI: Designed for 11" tablets with large, easy-to-tap buttons
• Simple Vocabulary: Uses everyday objects (Gabel, Messer, Tür, Ball, Haus, etc.)
• Immediate Feedback: Shows whether the answer was correct or incorrect after each round
• Game Results: Displays total correct and incorrect answers at the end of each game
• German Language: All user-facing text is in German for German-speaking users

Screenshots

Start Screen

The game presents a clean, simple interface optimized for people with dementia.

Image with Word Choices

In this mode, players see an image and must select the correct German word from 4 options.

Word with Image Choices

Alternatively, players see a German word and must select the matching image from 4 options.

Game Results

After completing 10 rounds, players see their results with correct and incorrect answer counts.

German Translation

All text visible to users is in German, making the game accessible for German-speaking users.

Technology Stack

• .NET 10.0: Using the latest .NET framework
• Blazor WebAssembly: Client-side web application that runs entirely in the browser
• Local Storage: Browser-based persistence for tracking progress across sessions
• SVG Images: Scalable vector graphics for clear display on all screen sizes

Getting Started

Prerequisites

• .NET 10.0 SDK

Running the Application

1. Clone the repository:

   git clone https://github.com/clayschaad/MemoryGame.git
   cd MemoryGame
   

2. Navigate to the project directory:

   cd MemoryGame
   

3. Run the application:

   dotnet run
   

4. Open your browser and navigate to the URL shown in the console (typically http://localhost:5000)

Building for Production

To build the application for deployment:

dotnet publish -c Release

The published files will be in bin/Release/net10.0/publish/wwwroot/ and can be hosted on any static web server.

How to Use

1. Start Screen: Click "Start New Game" to begin a new game session
2. Game Rounds:
   • Read the question (image or word)
   • Select the correct answer from 4 options
   • Receive immediate feedback
   • Wait 2 seconds before automatically moving to the next round
3. Results: After 10 rounds, view your score and click "Play Again" to start a new game

Game Statistics

The application tracks performance for each word/image pair:

• Correct Count: Number of times the word was answered correctly
• Incorrect Count: Number of times the word was answered incorrectly
• Priority: Calculated based on performance (higher priority = more frequent appearance)

This data is stored in browser local storage and persists across sessions, enabling the adaptive learning feature.

Project Structure

MemoryGame/
├── Models/              # Data models for game state
│   ├── GameWord.cs
│   ├── GameSession.cs
│   ├── GameStatistics.cs
│   ├── Round.cs
│   └── RoundType.cs
├── Services/            # Business logic and storage
│   ├── GameService.cs
│   └── LocalStorageService.cs
├── Pages/               # Blazor pages
│   └── Home.razor
├── Layout/              # Layout components
│   └── MainLayout.razor
└── wwwroot/
    ├── images/          # SVG image files
    └── css/             # Stylesheets

Adding New Words/Images

The game loads images listed in the wwwroot/manifest.txt file. To add new words and images:

1. Add your image: Place an SVG image in wwwroot/images/ with the filename (e.g., apple.svg, orange.svg)

2. Update the manifest: Add the filename (with extension) to wwwroot/manifest.txt:

   ball.svg
   bed.svg
   book.svg
   apple.svg
   orange.svg
   

   Each image filename should be on its own line in the manifest file.

3. Image naming: The word displayed in the game is derived from the filename without the extension (e.g., apple.svg becomes "Apple" in the game).

The game uses efficient parallel loading to fetch all images listed in the manifest file at startup.

Browser Compatibility

The application works in all modern browsers that support WebAssembly:

• Chrome/Edge (recommended)
• Firefox
• Safari
• Opera

License

This project is open source and available under the MIT License.

Acknowledgments

Built with Blazor WebAssembly for optimal performance and offline capability.