Comment créer une application de quiz avec l’IA

Avant d’écrire un prompt, définissez la version minimale qui vaut la peine d’être construite.

Pour la plupart des applications de quiz, cela signifie :

• un écran d’accueil qui explique le quiz
• un écran de question avec des choix de réponse
• un écran de résultats avec le score et les retours
• un bouton pour recommencer

Décidez ensuite de quelques bases :

• Plateforme : site web en React + Tailwind, ou application mobile en React Native avec Expo
• Type de questions : le choix multiple est le plus simple pour commencer
• Score : 1 point par bonne réponse, points négatifs, ou scores pondérés
• Source du contenu : questions d’exemple codées en dur d’abord, ou stockées dans une base de données plus tard
• Comptes utilisateur : utiles seulement si vous voulez enregistrer la progression, l’historique ou des résultats spécifiques à chaque utilisateur
• Paiements : utiles seulement si l’accès aux quiz, aux packs ou aux fonctionnalités premium est payant

Gardez la version 1 limitée. Une application d’examen chronométré avec des comptes, des classements, des paiements, des analyses et des questions générées par l’IA représente en réalité plusieurs projets. Commencez par un quiz que l’on peut terminer de bout en bout.

Dans Moremade, vous décrivez l’application en langage naturel et l’agent IA écrit le code source. Vous obtenez ensuite une prévisualisation en direct et pouvez continuer à modifier le projet par chat.

Votre premier prompt doit couvrir :

• la plateforme
• les écrans
• le format des questions
• le fonctionnement du score
• le style visuel
• l’utilisation ou non de données d’exemple

Un bon premier prompt est assez précis pour éviter les suppositions, mais pas au point de passer plus de temps à formuler le prompt qu’à construire le produit.

Créez une application de quiz mobile en React Native avec Expo pour réviser la culture générale. Incluez un écran d’accueil, un écran de quiz et un écran de résultats. Utilisez 10 questions à choix multiple avec quatre réponses chacune et affichez une question à la fois. Additionnez 1 point à chaque bonne réponse. Après la dernière question, affichez le score total, les bonnes réponses et un bouton pour recommencer le quiz. Utilisez un style simple et épuré, de grandes zones tactiles et des données d’exemple codées en dur dans l’application.

Si vous voulez plutôt un site web, dites-le clairement. Moremade génère des sites web en React + Tailwind et des applications mobiles en React Native (Expo).

Après la première génération, examinez la prévisualisation en direct comme un testeur, pas comme un spectateur. Parcourez tout le flux. Vérifiez si la logique est correcte avant de passer du temps sur le design.

Repérez les problèmes tels que :

• le score ne se met pas à jour correctement
• l’état de la réponse ne se réinitialise pas entre les questions
• les boutons sont trop petits sur mobile
• aucun indicateur de progression
• un écran de résultats trop chargé

Apportez ensuite de petites demandes ciblées. Trois exemples utiles :

• "Ajoutez un indicateur de progression qui affiche le numéro de la question sur 10 en haut de l’écran de quiz."
• "Après que l’utilisateur sélectionne une réponse, mettez en surbrillance l’option choisie et désactivez les autres options jusqu’à ce qu’il appuie sur Suivant."
• "Mettez à jour l’écran de résultats pour afficher chaque question, la réponse de l’utilisateur, la bonne réponse et si c’était correct."

C’est généralement plus rapide que de réécrire tout le prompt. Moremade inclut aussi un inspecteur visuel, afin que vous puissiez pointer un élément et le modifier, ainsi qu’une vue code si vous souhaitez inspecter ou modifier le code généré plus directement.

Si l’IA en fait trop, simplifiez. Demandez-lui de retirer les extras comme les animations, les catégories ou les écrans de compte que vous n’avez pas demandés.

Une application de quiz de base n’a pas besoin d’un backend. Des questions d’exemple codées en dur suffisent pour une première version fonctionnelle.

Ajoutez Supabase uniquement si vous avez besoin de choses comme :

• stocker des ensembles de questions dans une base de données
• la connexion utilisateur
• enregistrer les scores ou l’historique des quiz
• téléverser des assets ou des fichiers

Dans Moremade, Supabase peut gérer la base de données, la connexion et le stockage de fichiers. Une étape suivante pratique pourrait être :

• créer une table quizzes
• créer une table questions liée à un quiz
• créer une table results liée à un utilisateur

Puis demandez la modification en langage naturel, par exemple : "Connectez cette application à Supabase. Stockez les quiz et les questions dans la base de données, ajoutez la connexion par e-mail et enregistrez chaque score terminé dans une table results."

Ajoutez Stripe uniquement si le produit facture réellement l’accès, par exemple pour des packs de quiz premium ou des certifications payantes. Moremade inclut un connecteur Stripe pour le paiement avec les prix que vous définissez. Si votre application est gratuite, repoussez les paiements à plus tard. Les premières versions sont plus faciles à valider quand il y a moins de pièces mobiles.

Même si vous construisez un site web, testez-le sur un écran de taille téléphone. Les produits de quiz sont souvent utilisés sur mobile, et les problèmes d’interaction apparaissent vite.

Vérifiez ces points :

• le texte est lisible sans zoomer
• les boutons de réponse sont faciles à toucher
• l’action suivante est évidente
• les questions longues ne cassent pas la mise en page
• les écrans de résultats gèrent proprement les scores faibles et élevés
• le redémarrage du quiz réinitialise complètement l’état

Testez aussi des contenus délicats :

• des questions très courtes
• des réponses très longues
• toutes les réponses fausses
• toutes les réponses correctes
• des données de questions vides ou manquantes si vous utilisez une base de données

Si quelque chose échoue, demandez une correction précise. Par exemple : "Sur les petits écrans, faites en sorte que les cartes de réponse prennent toute la largeur et gardez le bouton Suivant fixé près du bas avec un espace sécurisé."

L’historique des versions est utile ici. Si une modification détériore l’application, vous pouvez revenir en arrière plutôt que d’essayer tout annuler par prompt.

Une fois que le flux principal fonctionne, publiez-le. Moremade peut publier en un clic sur un sous-domaine gratuit yourname.moremade.ai. Cela suffit pour une revue interne, des tests utilisateurs ou le partage d’un prototype.

Si vous êtes sur un plan payant, vous pouvez connecter un domaine personnalisé. Les domaines peuvent aussi être achetés dans Moremade.

Avant de publier, faites une courte vérification de lancement :

• le titre et le texte d’introduction correspondent au sujet du quiz
• le score est correct
• les boutons et les liens fonctionnent
• aucun texte de remplacement ne subsiste
• toute connexion ou tout paiement fonctionne si inclus

Vous pouvez exporter à tout moment le code source complet au format ZIP ou le pousser vers GitHub. C’est important si vous voulez continuer le développement hors de la plateforme plus tard, faire relire le code par votre équipe ou confier le projet à un autre développeur.

Quelques schémas provoquent un travail inutile.

• Commencer avec trop de fonctionnalités. Faites fonctionner un seul flux de quiz avant d’ajouter des comptes, des abonnements ou des analyses.
• Formuler un prompt trop vague. "Faites-moi une application de quiz" laisse trop de choses ouvertes. Précisez les écrans, le score et la plateforme.
• Tout modifier d’un coup. Les petits prompts de suivi sont plus faciles à contrôler et à tester.
• Ajouter une base de données trop tôt. Des questions d’exemple statiques suffisent généralement pour la version 1.
• Ignorer la mise en page mobile. Les interfaces de quiz sont très interactives et les petits écrans révèlent vite les faiblesses d’UI.
• Ne pas vérifier les cas limites. La logique de fin de quiz, le comportement de redémarrage et le texte des réponses longues cassent souvent en premier.
• Considérer la prévisualisation comme finale. La première génération est un brouillon. Attendez-vous à quelques cycles d’affinage.

Une bonne règle consiste à viser une boucle complète mais simple : démarrer le quiz, répondre aux questions, voir le score, recommencer, publier. Une fois cela en place, ajoutez la persistance, la connexion ou l’accès payant uniquement s’il existe un besoin réel.