modulo-quest - GitLite

KO | EN

gitlite — search

#mcp #swift #git #cli #data-science #large-language-models #mysql #animation #typescript #docker

modulo-quest

(★ 9)

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

파일 탐색기

ZIP 다운로드

- - 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

# CDN으로 사용하기

jsDelivr

jsDelivr는 공개 GitHub 리포지토리를 별도 설정 없이 CDN으로 즉시 서빙합니다. 버전과 파일을 고르면 웹페이지에 바로 붙일 수 있는 링크와 예시 코드가 만들어집니다.

버전

파일

링크

예시

# 프로젝트 배지

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.