Compilateur d'application pédagogique

Paramètres de l'activité

Niveau scolaire

Matière / Sujet

Objectif Pédagogique

Type d'activité

Style Visuel

Informations Complémentaires

Liens directs vers les IA :

ChatGPT Gemini Claude Mistral

Votre prompt optimisé

Remplissez le formulaire à gauche pour générer un prompt structuré...

Conseil : Copiez ce texte et collez-le dans votre IA préférée. Une fois que l'IA a généré le code HTML, copiez le code et allez dans l'onglet "Compilateur webapp".

Assemblez votre code

Transformez des morceaux de code (HTML, CSS, JS) en un fichier unique prêt à l'emploi.

Nom du fichier final

.html

Code HTML Collez le code principal ici

Éditeur de contenu rapide (inspiré de François Jourde)

Prévisualisation en direct (16:9)

J'ai du CSS séparé (Style) J'ai du JS séparé (Script)

À quoi sert cet onglet ?

Cet outil prépare votre code pour l'héberger sur La Forge Édu. Il génère le ZIP contenant le fichier de configuration technique (.gitlab-ci.yml) indispensable.

Le déploiement est-il pertinent ?

La Forge mobilise des ressources publiques partagées. Avant de créer un projet, vérifiez qu'une application équivalente n'existe pas déjà. Pour de simples tests temporaires, privilégiez le Bac à sable !

Informations du projet Forge

Nom du projet (sans espaces)

Sera utilisé pour nommer le fichier ZIP.

Votre code HTML

Collez le code complet (ou celui généré dans l'onglet 2)

Personnaliser le README.md

Description pour la Forge

Prêt à exporter ?

L'outil va générer la structure exacte requise par La Forge (GitLab Pages) : index.html, .gitlab-ci.yml et README.md.

Ou télécharger individuellement :

Comment mettre en ligne ?

1
Créer un projet vierge

Sur la Forge, cliquez sur "Nouveau projet" > "Créer un projet vide". Décochez "Initialiser avec un README".
2
Téléverser les fichiers

Téléchargez le ZIP généré ici. Décompressez-le. Dans votre nouveau projet Forge, allez sur le "+", puis "Téléverser un fichier" et glissez les 3 fichiers décompressés.
3
Activation automatique

Le fichier .gitlab-ci.yml va automatiquement déclencher la construction du site. Dans quelques minutes, allez dans "Déploiement" > "Pages" pour voir votre lien !

Banque de prompts

Explorez et réutilisez les prompts partagés par la communauté.

Sans label

Agis comme un expert en pédagogie et développeur web senior.
Je souhaite créer une application web pédagogique autonome (fichier HTML unique) pour des élèves.

Niveau : Cycle 2 
Sujet : Les fractions 
Objectif pédagogique : Additionner les fractions inférieures ou égales à 1 
Type d'activité : Jeu 
Style visuel : Ludique, coloré, style cartoon, pour enfants

Informations complémentaires / Consignes spécifiques :
Je veux que ce jeu soit disponible en version papier pour que mes élèves puissent le faire pendant les vacances 

Contraintes techniques impératives :
1. Le code doit être MONOBLOC : tout (HTML, CSS, JS) doit tenir dans un seul fichier index.html.
2. Utilise Tailwind CSS via CDN pour le design (moderne, responsive, accessible).
3. Le code JavaScript doit être robuste, gérer les erreurs et être inclus dans des balises <script>.
4. L'interface doit être claire, avec des consignes explicites pour l'élève.
5. Ajoute des feedbacks (Bravo/Erreur) visuels et immédiats.

Génère-moi le code complet, prêt à être copié-collé.

Sans label

Agis comme un expert en pédagogie et développeur web senior.
Je souhaite créer une application web pédagogique autonome (fichier HTML unique) pour des élèves.

Niveau : moyenne section
Sujet : vocabulaire
Objectif pédagogique : mémoriser les mots du printemps 
Type d'activité : [Type d'activité à définir]
Style visuel : Moderne, épuré, style Apple

Informations complémentaires / Consignes spécifiques :
avec des feed backs

Contraintes techniques impératives :
1. Le code doit être MONOBLOC : tout (HTML, CSS, JS) doit tenir dans un seul fichier index.html.
2. Utilise Tailwind CSS via CDN pour le design (moderne, responsive, accessible).
3. Le code JavaScript doit être robuste, gérer les erreurs et être inclus dans des balises <script>.
4. L'interface doit être claire, avec des consignes explicites pour l'élève.
5. Ajoute des feedbacks (Bravo/Erreur) visuels et immédiats.

Génère-moi le code complet, prêt à être copié-collé.

Sans label

Agis comme un expert en pédagogie et développeur web senior.
Je souhaite créer une application web pédagogique autonome (fichier HTML unique) pour des élèves.

Niveau : cycle 1
Sujet : graphisme 
Objectif pédagogique : identifier les graphisme afin de tracer les lettres 
Type d'activité : jeu de mémoire
Style visuel : Ludique, coloré, style cartoon, pour enfants

Contraintes techniques impératives :
1. Le code doit être MONOBLOC : tout (HTML, CSS, JS) doit tenir dans un seul fichier index.html.
2. Utilise Tailwind CSS via CDN pour le design (moderne, responsive, accessible).
3. Le code JavaScript doit être robuste, gérer les erreurs et être inclus dans des balises <script>.
4. L'interface doit être claire, avec des consignes explicites pour l'élève.
5. Ajoute des feedbacks (Bravo/Erreur) visuels et immédiats.

Génère-moi le code complet, prêt à être copié-collé.

Sans label

Agis comme un expert en pédagogie et développeur web senior.
Je souhaite créer une application web pédagogique autonome (fichier HTML unique) pour des élèves.

Niveau : ce1
Sujet : vocabulaire 
Objectif pédagogique : comprendre les notions de regitres familier, courant et soutenu
Type d'activité : QCM
Style visuel : Ludique, coloré, style cartoon, pour enfants

Contraintes techniques impératives :
1. Le code doit être MONOBLOC : tout (HTML, CSS, JS) doit tenir dans un seul fichier index.html.
2. Utilise Tailwind CSS via CDN pour le design (moderne, responsive, accessible).
3. Le code JavaScript doit être robuste, gérer les erreurs et être inclus dans des balises <script>.
4. L'interface doit être claire, avec des consignes explicites pour l'élève.
5. Ajoute des feedbacks (Bravo/Erreur) visuels et immédiats.

Génère-moi le code complet, prêt à être copié-collé.

Sans label

Agis comme un expert en pédagogie et développeur web senior.
Je souhaite créer une application web pédagogique autonome (fichier HTML unique) pour des élèves.

Niveau : Petite section 
Sujet : Mathématiques 
Objectif pédagogique : Réaliser les compléments à trois 
Type d'activité : Atelier à 7
Style visuel : Moderne et accessible

Contraintes techniques impératives :
1. Le code doit être MONOBLOC : tout (HTML, CSS, JS) doit tenir dans un seul fichier index.html.
2. Utilise Tailwind CSS via CDN pour le design (moderne, responsive, accessible).
3. Le code JavaScript doit être robuste, gérer les erreurs et être inclus dans des balises <script>.
4. L'interface doit être claire, avec des consignes explicites pour l'élève.
5. Ajoute des feedbacks (Bravo/Erreur) visuels et immédiats.

Génère-moi le code complet, prêt à être copié-collé.

Sans label

Agis comme un expert en pédagogie et développeur web senior.
Je souhaite créer une application web pédagogique autonome (fichier HTML unique) pour des élèves.

Niveau : CM2
Sujet : Les fractions
Objectif pédagogique : Additionner et soustraire des fractions avec des dénominateurs différents
Type d'activité : [Type d'activité à définir]
Style visuel : Moderne et accessible

Contraintes techniques impératives :
1. Le code doit être MONOBLOC : tout (HTML, CSS, JS) doit tenir dans un seul fichier index.html.
2. Utilise Tailwind CSS via CDN pour le design (moderne, responsive, accessible).
3. Le code JavaScript doit être robuste, gérer les erreurs et être inclus dans des balises <script>.
4. L'interface doit être claire, avec des consignes explicites pour l'élève.
5. Ajoute des feedbacks (Bravo/Erreur) visuels et immédiats.

Génère-moi le code complet, prêt à être copié-collé.

Sans label

Agis comme un expert en pédagogie et développeur web senior.
Je souhaite créer une application web pédagogique autonome (fichier HTML unique) pour des élèves.

Niveau : cycle 3
Sujet : sciences
Objectif pédagogique : comprendre la classification des etres vivants
Type d'activité : QCM
Style visuel : Ludique, coloré, style cartoon, pour enfants

Informations complémentaires / Consignes spécifiques :
pas de minuterie question a choix multiple avec a chaque fois une seule bonne reponse

Contraintes techniques impératives :
1. Le code doit être MONOBLOC : tout (HTML, CSS, JS) doit tenir dans un seul fichier index.html.
2. Utilise Tailwind CSS via CDN pour le design (moderne, responsive, accessible).
3. Le code JavaScript doit être robuste, gérer les erreurs et être inclus dans des balises <script>.
4. L'interface doit être claire, avec des consignes explicites pour l'élève.
5. Ajoute des feedbacks (Bravo/Erreur) visuels et immédiats.

Génère-moi le code complet, prêt à être copié-collé.

Sans label

Agis comme un expert en pédagogie et développeur web senior.
Je souhaite créer une application web pédagogique autonome (fichier HTML unique) pour des élèves.

Niveau : Cycle 2 CP
Sujet : Lecture ieu ion ian ien
Objectif pédagogique : [Objectif à définir]
Type d'activité : Activité en collectif au tableau
Style visuel : Ludique, coloré, style cartoon, pour enfants

Contraintes techniques impératives :
1. Le code doit être MONOBLOC : tout (HTML, CSS, JS) doit tenir dans un seul fichier index.html.
2. Utilise Tailwind CSS via CDN pour le design (moderne, responsive, accessible).
3. Le code JavaScript doit être robuste, gérer les erreurs et être inclus dans des balises <script>.
4. L'interface doit être claire, avec des consignes explicites pour l'élève.
5. Ajoute des feedbacks (Bravo/Erreur) visuels et immédiats.

Génère-moi le code complet, prêt à être copié-collé.

Verbes irréguliers anglais 4e

Agis comme un expert en pédagogie et développeur web senior.
Je souhaite créer une application web pédagogique autonome (fichier HTML unique) pour des élèves.

Niveau : 4e
Sujet : Anglais / verbes irréguliers
Objectif pédagogique : Mémoriser les verbes irréguliers en anglais
Type d'activité : Quiz, QCM, texte à trous, 
Style visuel : Ludique, coloré, style cartoon, pour enfants

Informations complémentaires / Consignes spécifiques :
Quand on clique sur le verbe, l'élève entend la prononciation.

Contraintes techniques impératives :
1. Le code doit être MONOBLOC : tout (HTML, CSS, JS) doit tenir dans un seul fichier index.html.
2. Utilise Tailwind CSS via CDN pour le design (moderne, responsive, accessible).
3. Le code JavaScript doit être robuste, gérer les erreurs et être inclus dans des balises <script>.
4. L'interface doit être claire, avec des consignes explicites pour l'élève.
5. Ajoute des feedbacks (Bravo/Erreur) visuels et immédiats.

Génère-moi le code complet, prêt à être copié-collé.

anglais qcm verbes irréguliers

Agis comme un expert en pédagogie et développeur web senior.
Je souhaite créer une application web pédagogique autonome (fichier HTML unique) pour des élèves.

Niveau : 4 ième 
Sujet : Anglais
Objectif pédagogique : mémorisation des 50 verbes irréguliers les plus utilisés en 4 ième 
Type d'activité : QCM, texte à trous
Style visuel : Ludique, coloré, style cartoon, pour enfants

Informations complémentaires / Consignes spécifiques :
le feedback des questions doit être emphatique

Contraintes techniques impératives :
1. Le code doit être MONOBLOC : tout (HTML, CSS, JS) doit tenir dans un seul fichier index.html.
2. Utilise Tailwind CSS via CDN pour le design (moderne, responsive, accessible).
3. Le code JavaScript doit être robuste, gérer les erreurs et être inclus dans des balises <script>.
4. L'interface doit être claire, avec des consignes explicites pour l'élève.
5. Ajoute des feedbacks (Bravo/Erreur) visuels et immédiats.

Génère-moi le code complet, prêt à être copié-collé.

Sans label

Agis comme un expert en pédagogie et développeur web senior.
Je souhaite créer une application web pédagogique autonome (fichier HTML unique) pour des élèves.

Niveau : 5eme 
Sujet : culture religieuse 
Objectif pédagogique : tester les connaissances apprises 
Type d'activité : QCM
Style visuel : Moderne, épuré, style Apple

Informations complémentaires / Consignes spécifiques :
Les religions abrahamiques : ressemblances et différences
1. Qu’est-ce qu’une religion abrahamique ?
Les religions abrahamiques sont des religions qui se réfèrent toutes à Abraham, un personnage très important de leurs textes sacrés.
Les trois principales religions abrahamiques sont :
•	le judaïsme
•	le christianisme
•	l’islam
Ces religions sont apparues au Moyen-Orient et croient toutes en un seul Dieu. On dit qu’elles sont monothéistes.

2. Les points communs entre ces religions
1. La croyance en un Dieu unique
Les trois religions affirment qu’il existe un seul Dieu, créateur du monde.
Nom de Dieu selon les religions :
•	Judaïsme : Dieu / Yahvé
•	Christianisme : Dieu
•	Islam : Allah (qui signifie simplement « Dieu » en arabe)

2. Abraham : un personnage central
Abraham est considéré comme un modèle de foi dans les trois religions.
Selon les traditions :
•	il fait confiance à Dieu
•	il est l’ancêtre spirituel des croyants
•	il est un exemple d’obéissance à Dieu

3. Des livres sacrés
Chaque religion possède un livre sacré.
Religion	Livre sacré
Judaïsme	La Torah
Christianisme	La Bible
Islam	Le Coran
Ces livres racontent :
•	la création du monde
•	l’histoire de prophètes
•	les règles de vie religieuse.


4. Les prophètes
Les trois religions reconnaissent plusieurs prophètes (personnes choisies par Dieu pour transmettre un message).
Par exemple :
•	Adam
•	Noé
•	Abraham
•	Moïse
Mais certaines religions reconnaissent d’autres prophètes supplémentaires.

3. Les différences entre les religions
Même si elles ont beaucoup de points communs, ces religions ont aussi des différences importantes.
1. La place de Jésus
Religion	Qui est Jésus ?
Judaïsme	Jésus n’est pas reconnu comme messie
Christianisme	Jésus est le fils de Dieu et le sauveur
Islam	Jésus (Issa) est un prophète important mais pas le fils de Dieu
C’est l’une des plus grandes différences entre ces religions.


2. Les fondateurs et personnages importants
Religion	Personnage central
Judaïsme	Moïse
Christianisme	Jésus
Islam	Mahomet

3. Les lieux de prière
Religion	Lieu de prière
Judaïsme	Synagogue
Christianisme	Église
Islam	Mosquée

4. Les pratiques religieuses
Chaque religion possède ses rites et traditions :
Exemples :
Judaïsme
•	respect du sabbat (jour de repos)
•	règles alimentaires (kasher)
Christianisme
•	baptême
•	messe
Islam
•	prière cinq fois par jour
•	jeûne pendant le Ramadan

4. Pourquoi étudier ces religions ?
Comprendre les religions permet :
•	de mieux connaître l’histoire du monde
•	de comprendre certaines cultures et traditions
•	de favoriser le respect et la tolérance entre les personnes
Ces religions ont influencé :
•	l’art
•	l’architecture
•	la littérature
•	l’histoire de nombreux pays.

5. À retenir
Les trois religions abrahamiques :
Points communs
•	un seul Dieu
•	Abraham comme figure importante
•	des prophètes
•	des textes sacrés
Différences
•	la place de Jésus
•	les textes et traditions
•	les pratiques religieuses


Contraintes techniques impératives :
1. Le code doit être MONOBLOC : tout (HTML, CSS, JS) doit tenir dans un seul fichier index.html.
2. Utilise Tailwind CSS via CDN pour le design (moderne, responsive, accessible).
3. Le code JavaScript doit être robuste, gérer les erreurs et être inclus dans des balises <script>.
4. L'interface doit être claire, avec des consignes explicites pour l'élève.
5. Ajoute des feedbacks (Bravo/Erreur) visuels et immédiats.

Génère-moi le code complet, prêt à être copié-collé.

Sans label

Agis comme un expert en pédagogie et développeur web senior.
Je souhaite créer une application web pédagogique autonome (fichier HTML unique) pour des élèves.

Niveau : cycle 3
Sujet : français
Objectif pédagogique : comprendre les figures de style
Type d'activité : jeu de mémoire
Style visuel : Rétro, pixel art, années 80

Contraintes techniques impératives :
1. Le code doit être MONOBLOC : tout (HTML, CSS, JS) doit tenir dans un seul fichier index.html.
2. Utilise Tailwind CSS via CDN pour le design (moderne, responsive, accessible).
3. Le code JavaScript doit être robuste, gérer les erreurs et être inclus dans des balises <script>.
4. L'interface doit être claire, avec des consignes explicites pour l'élève.
5. Ajoute des feedbacks (Bravo/Erreur) visuels et immédiats.

Génère-moi le code complet, prêt à être copié-collé.

Bac à sable

Testez et partagez instantanément votre code HTML sans passer par La Forge.

Code source (HTML complet)

Compilateur d'applications pédagogiques

Paramètres de l'activité

Liens directs vers les IA :

Votre prompt optimisé

Contribuer à la banque de prompts

Assemblez votre code

À quoi sert cet onglet ?

Le déploiement est-il pertinent ?

Informations du projet Forge

Votre code HTML

Prêt à exporter ?

Comment mettre en ligne ?

Créer un projet vierge

Téléverser les fichiers

Activation automatique

Banque de prompts

Bac à sable

Application déployée avec succès !