Skip to main content
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.
Le menu de la question ouvre son interface personnalisée sans changer son type.

Le menu de la question ouvre son interface personnalisée sans changer son type.

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.
L’aperçu affiche l’interaction participante et la commande de modification du code.

L’aperçu affiche l’interaction participante et la commande de modification du code.

​
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.
La vue Code regroupe la source, la compilation et le guide de programmation.

La vue Code regroupe la source, la compilation et le guide de programmation.

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

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.
Interface personnalisée avec une question source et quatre textes traduisibles

Déclarez la question de dépenses précédente et donnez une clé unique à chaque texte participant.

​
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.
Aperçu du budget à 35 euros avec un message vert de validation

L’aperçu accepte la réponse numérique de 35 euros et sa devise.

Budget participant à 35 euros avec le bouton Next actif

Le participant part de sa réponse précédente de 30 euros et peut passer à 35 euros.

​
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.
Réponse numérique enregistrée de 35 avec la commande Edit answer

Ouvrez la réponse enregistrée : cette interface personnalisée a stocké le nombre 35.

​
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