modulo-quest

KO | EN

gitlite — search

#http #computer-vision #tailwindcss #typescript #php #cross-platform #pdf #framework #large-language-models #swift

(★ 9)

Une expérience pédagogique gamifiée pour apprendre FizzBuzz et réviser les tables de multiplication.

File Explorer

ZIP Download

- - click.wav
  - error.wav
  - game-over.wav
  - opening.wav
  - success.wav
  - win.wav
- - foundation.css
  - game.css
  - home.css
  - main.css
  - responsive.css
- - app.js
.gitattributes
.gitignore
.nojekyll
index.html
README.md
robots.txt
site.webmanifest
sitemap.xml

# Use via CDN

jsDelivr

jsDelivr serves any public GitHub repository as a CDN with zero setup. Pick a version and a file to get a ready-to-paste link and snippet.

Version

File

Link

Example

# Project Badges

Accueil de Modulo Quest
Quiz FizzBuzz avec la mascotte Modulo

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

Modulo Quest est une mini-application pédagogique gamifiée pour apprendre FizzBuzz et réviser les tables de multiplication à travers des défis courts, accessibles et progressifs.

[Voir la démo](https://osiris-balonga.github.io/modulo-quest/) · [Voir le dépôt](https://github.com/Osiris-Balonga/modulo-quest)

## Objectifs pédagogiques

Le projet permet de pratiquer :

- les boucles `for` et `while` ;
- les conditions simples et combinées ;
- l’opérateur modulo `%` ;
- les fonctions avec paramètres et valeur de retour ;
- les tableaux et les chaînes de gabarits ;
- la génération dynamique de contenu HTML ;
- la création d’une interface responsive et accessible.

## Fonctionnalités

- deux jeux accessibles depuis un sélecteur plein écran ;
- quatre niveaux FizzBuzz disponibles dans n’importe quel ordre ;
- quatre niveaux consacrés aux tables de multiplication ;
- correction immédiate et passage à la question suivante après une erreur ;
- trois vies, progression par question et bilan des bonnes réponses ;
- réactions animées de la mascotte Modulo ;
- révisions FizzBuzz de 1 à 100 et tables de 1 à 9 ;
- générique musical et effets sonores WAV ;
- contrôle global du son ;
- interface adaptée aux ordinateurs portables et aux écrans mobiles ;
- navigation clavier, libellés accessibles et prise en charge de `prefers-reduced-motion`.

## Technologies

- HTML5 ;
- CSS3 ;
- JavaScript natif ;
- HugeIcons ;
- Google Fonts avec la famille Nunito.

Aucune dépendance JavaScript, aucun framework et aucune étape de compilation ne sont nécessaires.

## Architecture

```text
modulo-quest/
├── assets/
│   ├── audio/
│   │   └── *.wav
│   ├── css/
│   │   ├── foundation.css
│   │   ├── home.css
│   │   ├── game.css
│   │   ├── responsive.css
│   │   └── main.css
│   ├── images/
│   │   ├── brand/
│   │   ├── games/
│   │   └── previews/
│   └── js/
│       ├── core/
│       │   ├── audio.js
│       │   ├── mascot.js
│       │   ├── navigation.js
│       │   └── state.js
│       ├── data/
│       │   └── levels.js
│       ├── games/
│       │   ├── session.js
│       │   └── tables.js
│       └── app.js
├── .gitattributes
├── .gitignore
├── .nojekyll
├── index.html
├── robots.txt
├── site.webmanifest
├── sitemap.xml
└── README.md
```

Les feuilles de styles sont importées dans leur ordre de cascade par `assets/css/main.css`. L’état, la navigation, les sessions de jeu et l’initialisation sont séparés pour limiter la taille et les responsabilités de chaque fichier. Les scripts restent chargés comme scripts classiques avec `defer`, ce qui permet d’ouvrir le projet directement depuis le système de fichiers.

## Lancer le projet

Cloner le dépôt puis ouvrir `index.html` dans un navigateur récent :

```bash
git clone https://github.com/Osiris-Balonga/modulo-quest.git
cd modulo-quest
```

Le générique tente de démarrer au chargement. Si le navigateur bloque la lecture automatique, il démarre au premier clic ou à la première touche pressée.

## Déploiement GitHub Pages

Le projet est prêt pour une publication GitHub Pages depuis la branche `main` et le dossier racine. Le fichier `.nojekyll` évite tout traitement Jekyll et les fichiers `robots.txt` et `sitemap.xml` ciblent l’URL de production prévue.

## Accessibilité et responsive

- boutons et contrôles utilisables au clavier ;
- états de focus visibles ;
- annonces et libellés ARIA sur les éléments interactifs ;
- grille de réponses sur deux colonnes, y compris sur mobile ;
- écran d’accueil et quiz conçus pour rester dans le viewport d’un ordinateur portable ;
- animations réduites lorsque cette préférence système est activée.

## Auteur

Projet réalisé par [Osiris Balonga](https://github.com/Osiris-Balonga) dans le cadre de l’Akieni Academy.

modulo-quest

Owner Repos

File Explorer

# Use via CDN

# Project Badges

Was this content helpful?

Recent Feedback

modulo-quest

Owner Repos

File Explorer

# Use via CDN

# Project Badges

Was this content helpful?

Recent Feedback

Download README