> ## Documentation Index
> Fetch the complete documentation index at: https://support.deepfield-ai.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Créer une interface de question personnalisée
> Concevez, traduisez et testez une interaction qui conserve le format de réponse de la question.
Une interface personnalisée modifie l’écran d’une question tout en conservant son type intégré. La validation, les graphiques et les colonnes typées suivent ce type. Gardez les conditions, le filtrage et les quotas dans leurs contrôles natifs ; une question à code personnalisé n’est pas une source de quota.
## Décrire l’interaction à l’assistant
Précisez la question, ce que le participant voit et fait, les réponses antérieures nécessaires, la valeur à enregistrer et le critère qui rend la réponse complète. Indiquez les contraintes de traduction, de mobile et d’accessibilité.
Exemple : « Pour la dépense mensuelle, proposez des augmentations de 5 € à partir du montant précédent. Affichez le montant et enregistrez un nombre entre 0 et 150. » Relisez le résultat avant de l’enregistrer.
## Ouvrir et utiliser l’aperçu
Ouvrez **⋯**, puis **Question sur mesure**. Si une interface existe, son bandeau propose **Modifier** pour ouvrir l’éditeur. **Tester** ouvre un test participant de la question.
Dans **Aperçu**, réalisez la tâche jusqu’à produire une réponse. Vérifiez le résultat de validation affiché sous l’aperçu.
## Modifier le composant
Sélectionnez **Modifier le code** pour ouvrir l’éditeur TSX, puis **Retour à l’aperçu** pour tester l’interaction. Le module doit exporter un composant React. Les imports autorisés sont `react` et `@deepfield/question-kit`. Ouvrez **Guide de programmation** pour connaître les composants et le contrat de la question.
Le composant n’a pas accès au réseau, à la page DeepField, aux cookies ou au stockage du navigateur. Il peut utiliser React, HTML, SVG, canvas et les composants du kit.
## Respecter le contrat de réponse
| Type | Valeur de `setAnswer` |
| ---------------------------- | --------------------------------------------------------------------- |
| Numérique | Nombre |
| Question ouverte | Texte |
| Choix multiple ou classement | Liste d’identifiants d’options |
| Allocation ou Multi-Numeric | Objet associant identifiants d’options et nombres |
| Matrice catégorielle | Objet associant chaque ligne à une colonne ou à une liste de colonnes |
| Matrice numérique | Objet associant lignes et colonnes à des nombres |
| MaxDiff | Objet contenant `best` et `worst` |
Utilisez les identifiants des options et lignes de la question. `setValid(false, message)` empêche la progression et peut expliquer ce qui manque. Le serveur vérifie aussi la valeur et les règles natives.
`answer` contient la progression restaurée. Utilisez cette valeur comme état de réponse pour permettre la reprise après rechargement.
Pour une question monétaire, appelez aussi `setCurrency("EUR")`, ou le code de la devise choisie, en plus de `setAnswer(...)`. Une valeur numérique seule ne passe pas le contrôle de devise de l’aperçu.
## Déclarer les entrées et textes
Ouvrez **Avancé — entrées et textes**. Déclarez les questions antérieures que le code doit lire ; seules ces entrées lui sont accessibles. Dans **Texte montré aux participants**, ajoutez les textes avec des clés uniques et non vides.
Les textes extractibles entrent dans la traduction. Utilisez des valeurs nommées pour gérer explicitement les libellés. Le code lui-même reste identique entre les langues.
Dans **Aperçu du texte en**, changez la langue de l’aperçu. Pour chaque entrée déclarée, testez **Répondu**, **Sans réponse** et **Passée**.
## Tester et enregistrer
L’aperçu utilise des entrées d’exemple et n’exécute pas les règles du parcours. Sélectionnez **Tester cette question** pour vérifier l’interface enregistrée dans le parcours participant. Enregistrez les modifications de l’interface si cette action est désactivée. Après modification d’une réponse antérieure, vérifiez que la question personnalisée dépendante reçoit les nouvelles entrées et demande une nouvelle réponse.
1. Testez des valeurs normales, limites et incomplètes dans l’aperçu.
2. Vérifiez chaque état des entrées et chaque langue.
3. Corrigez les erreurs de compilation ou de format.
4. Sélectionnez **Enregistrer le rendu**, puis enregistrez le questionnaire.
5. Répétez la tâche dans un lien de test sur ordinateur et mobile, puis rechargez pour vérifier la restauration.
6. Ouvrez la réponse enregistrée et contrôlez l’export.
## Vérifier l’analyse et l’export
Les graphiques lisent la valeur typée et signalent l’usage d’une interface personnalisée. Le classeur Excel des réponses et l’export CSV brut ajoutent une colonne `[raw]` avec la valeur stockée, y compris les clés supplémentaires. Comparez cette colonne aux colonnes typées avant de livrer les données.
## Revenir à l’interface intégrée
Sélectionnez **Retirer — utiliser le rendu intégré**, puis enregistrez le questionnaire. Le texte, le type et les options sont conservés.
## Résoudre un problème
Si la compilation échoue, corrigez le message dans Code et vérifiez les imports. Si une entrée manque, déclarez-la et confirmez qu’elle précède la question. Si le participant ne peut pas avancer, vérifiez `setValid` et la validation native. Si l’éditeur s’ouvre en texte brut, l’édition reste possible ; contrôlez l’aperçu avant de publier.
## Sur le même sujet
* [Choisir et configurer les types de questions](/fr/building-your-study/question-types)
* [Réutiliser les réponses précédentes](/fr/building-your-study/answer-piping)
* [Traduire le questionnaire](/fr/translations/multilingual-studies)
* [Exporter les réponses](/fr/responses/exporting-data)