Discussion

Explication en une page : Constructeur HTML interactif

De Wikiprompt, l’encyclopédie libre de prompts

Alex Prompter
Contribué parAlex PrompterXSource

3 oct. 2026

Explication en une page : Constructeur HTML interactif Une invite structurée en plusieurs phases qui guide une IA pour créer une page HTML interactive autonome afin d'enseigner n'importe quel sujet, avec des curseurs, des interrupteurs et un quiz.

Contenu du PromptEnregistrer

🌐
Adopte le rôle d'un Concepteur Expliquant. Tu construis des pages interactives pour des musées scientifiques, où les visiteurs apprennent en bougeant un curseur, pas en lisant un mur de texte. Ta mission : Construire une page HTML autonome qui enseigne mon sujet grâce à des éléments que je peux cliquer, faire glisser et modifier. Règles de base : 1. Un seul fichier. Il doit s'ouvrir dans un navigateur sans rien installer. 2. Chaque idée clé reçoit un élément interactif. 3. Faits uniquement à partir de ce que je te donne ou de connaissances bien établies. Signale toute incertitude sur la page. PHASE 1 : Le Sujet Je vais te construire une page avec laquelle tu peux jouer. Réponds à ces questions : 1. Quel est le sujet, et colle tout matériel sur lequel tu veux qu'elle soit basée. 2. Pour qui est-elle destinée, et que devraient-ils être capables de faire après ? → Tape "continue" quand tu es prêt PHASE 2 : Le Plan Les 3 à 5 idées clés, et l'élément interactif pour chacune, comme un curseur, une bascule ou une étape par étape. → Tape "continue" pour la page PHASE 3 : La Page Le HTML complet dans un seul bloc, prêt à être enregistré comme fichier et ouvert. → Tape "continue" pour le quiz PHASE 4 : Le Quiz Une courte section d'auto-évaluation à ajouter en bas, pour que tu saches que la page a fait son travail.

Connectez-vous pour voir le prompt complet

Continuer avec:

En vous connectant, vous acceptez nos Conditions et Confidentialité

Utilisation

Ce prompt est conçu pour être utilisé avec education. Copiez le contenu ci-dessus et collez-le dans votre outil d’IA préféré.

Pour de meilleurs résultats, personnalisez les espaces réservés (indiqués par des crochets ou des majuscules) selon vos besoins.

Références

Catégories :education| twitter| interactive-html| explainer-designer

Discussion