A multilingual spelling game that helps users learn vocabulary in English, Dutch, and German. Players see a sentence with a missing word and an accompanying image that provides a visual clue for the correct answer.

🚀 Play the game live on GitHub Pages!

• Multilingual Support: Practice spelling in English, Dutch, and German
• Visual Learning: Each word is accompanied by a helpful image
• Interactive Sentences: Fill in the missing word directly in the sentence
• Score Tracking: Keep track of correct answers
• Responsive Design: Works on desktop and mobile devices
• Immediate Feedback: Get instant feedback on your answers

1. Select your preferred language from the dropdown menu
2. Look at the image to understand what word is missing
3. Read the sentence with the blank space
4. Type the missing word in the input field
5. Click "Check" to submit your answer
6. Review the feedback and click "Next Question" to continue
7. Complete all questions to see your final score

• English: 5 vocabulary words (cat, house, sun, apple, fish)
• Dutch: 5 vocabulary words (kat, huis, zon, appel, vis)
• German: 5 vocabulary words (katze, haus, sonne, apfel, fisch)

🌐 Play immediately on GitHub Pages - No setup required!

1. Simple HTTP Server (for development):

   # Using Python 3
   python3 -m http.server 8000
   # Using Python 2
   python -m SimpleHTTPServer 8000
   # Using Node.js (if you have it installed)
   npx http-server

2. Open in Browser: Navigate to https://localhost:8000

Speller/
├── .github/
│   └── workflows/
│       ├── deploy.yml    # GitHub Pages deployment workflow
│       ├── test.yml      # Automated testing workflow
│       └── docker.yml    # Container build and push workflow
├── test/                 # Test files
│   ├── SpellerGame.js    # Testable version of game class
│   ├── setup.js          # Jest test setup
│   └── speller.test.js   # Unit tests
├── images/               # Word images
│   ├── cat.svg
│   ├── house.svg
│   ├── sun.svg
│   ├── apple.svg
│   └── fish.svg
├── index.html            # Main game interface
├── style.css             # Game styling
├── script.js             # Game logic and functionality
├── data.json             # Multilingual word data
├── package.json          # Node.js dependencies and scripts
├── Dockerfile            # Container configuration
├── .dockerignore         # Docker build exclusions
├── .gitignore            # Git exclusions
└── README.md             # This file

• Frontend: HTML5, CSS3, JavaScript (ES6+)
• Images: SVG format for scalability
• Data Format: JSON for easy multilingual content management
• Browser Compatibility: Modern browsers (Chrome, Firefox, Safari, Edge)
• Deployment: Automatic deployment to GitHub Pages via GitHub Actions
• Testing: Jest framework with comprehensive unit tests
• Containerization: Docker support with Node.js Alpine base image
• Registry: GitHub Container Registry (GHCR) for container distribution

The game is automatically deployed to GitHub Pages using GitHub Actions whenever changes are pushed to the main branch. The deployment workflow:

1. Triggers: Automatically on push to main branch, or manually via GitHub Actions tab
2. Build: Sets up GitHub Pages environment and prepares static files
3. Deploy: Deploys the game to GitHub Pages at https://commjoen.github.io/Speller/

No build process is required since this is a static HTML/CSS/JavaScript application.

The application is also available as a Docker container published to GitHub Container Registry:

# Pull and run the latest container
docker pull ghcr.io/commjoen/speller:latest
docker run -p 8080:8000 ghcr.io/commjoen/speller:latest
# Access the game at https://localhost:8080

1. Clone and install dependencies:

   git clone https://github.com/commjoen/Speller.git
   cd Speller
   npm install

2. Run locally:

   # Option 1: Using npm
   npm start
   # Option 2: Using Docker
   docker build -t speller-local .
   docker run -p 8080:8000 speller-local

3. Run tests:

   # Run all tests
   npm test
   # Run tests in watch mode
   npm run test:watch

4. Development Tools:

   # Install pre-commit hooks (requires pip install pre-commit)
   pre-commit install
   # Run linting
   npm run lint
   npm run lint:fix
   # Format code
   npm run format
   npm run format:check
   # Run pre-commit hooks manually
   pre-commit run --all-files

To add new words or languages, edit the data.json file:

{
  "language_code": [
    {
      "sentence": "Example sentence with {blank} placeholder.",
      "word": "answer",
      "image": "images/answer.svg",
      "hint": "Optional hint text"
    }
  ]
}

• Scoring: 1 point per correct answer
• Case Insensitive: Answers are checked regardless of capitalization
• Visual Feedback: Correct answers show in green, incorrect in red
• Progress Tracking: Shows current question number and total questions
• Language Reset: Changing language resets the game and score

This game is designed to help with:

• Vocabulary Building: Learn new words in multiple languages
• Spelling Practice: Improve spelling accuracy
• Visual Association: Connect words with images for better retention
• Language Comparison: See how the same concepts are expressed in different languages

This repository includes automated security and dependency management:

• CodeQL Security Analysis: Automated code scanning for security vulnerabilities and coding errors runs on every push, pull request, and weekly
• Renovate Bot: Automated dependency updates for npm packages, Docker base images, and GitHub Actions
• Vulnerability Alerts: Automatic security alerts for known vulnerabilities in dependencies

The project uses Semantic Versioning and automated releases:

• Semantic Release: Automatically generates version numbers and changelogs based on commit messages
• Version Display: The current version is displayed in the web app UI with multilingual support
• Automated Tagging: GitHub releases are automatically created with each version bump
• Changelog: All changes are documented in CHANGELOG.md

Releases are triggered automatically when changes are pushed to the main branch:

1. Commit Analysis: Semantic Release analyzes commit messages to determine version bump
2. Version Update: Updates package.json and generates changelog
3. GitHub Release: Creates a tagged release with release notes
4. NPM Publish: Publishes the package to npm (if configured)

The application displays the current version in the header:

• English: "Version: X.Y.Z"
• Dutch: "Versie: X.Y.Z"
• German: "Version: X.Y.Z"

Renovate is configured to:

• Group related updates together (e.g., all GitHub Actions updates in one PR)
• Schedule updates for Monday mornings to minimize disruption
• Automatically merge trusted updates like GitHub Actions
• Maintain separate groups for development vs production dependencies