Comment créer un formulaire de quiz

Voulez-vous créer un formulaire de quiz dans WPForms ? WPForms inclut un module complémentaire Quiz qui vous donne tout ce dont vous avez besoin pour créer des formulaires de quiz directement dans le constructeur de formulaires.

Dans ce tutoriel, nous vous montrerons comment créer un formulaire de quiz en utilisant une configuration basée sur des extraits de code qui calcule et affiche le score d'un utilisateur après la soumission.

Méthode recommandée pour créer des formulaires de quiz

WPForms inclut un module complémentaire Quiz dédié, qui est le moyen le plus simple et le plus complet de créer des formulaires de quiz.

Le module complémentaire Quiz comprend des fonctionnalités de quiz intégrées et offre le moyen le plus simple de créer et de gérer des formulaires de quiz dans WPForms.

Pour plus de détails sur la méthode recommandée, veuillez consulter notre documentation sur le module complémentaire Quiz.

Créer le formulaire de quiz avec un extrait de code

Si vous souhaitez toujours créer un formulaire de quiz avec une configuration personnalisée, vous pouvez suivre les étapes de ce guide et utiliser l'extrait de code ci-dessous.

Nous allons commencer par créer un nouveau formulaire. Dans notre formulaire, nous allons ajouter les champs de formulaire Nom et E-mail au début du formulaire. Ensuite, en utilisant les Sauts de page, nous allons diviser le quiz en 6 catégories. Chaque Saut de page aura le Titre de la page indiquant la catégorie sur laquelle se trouvent actuellement les participants au quiz.

Ajouter des questions et des scores de quiz

Pour cette documentation, nous allons utiliser les champs Éléments multiples dans la section Champs de paiement du constructeur de formulaires pour poser notre question de quiz et modifier les étiquettes en fournissant 3 réponses pour chaque question. Pour la bonne réponse, mettez 1,00 pour la bonne réponse et 0,00 pour les mauvaises réponses.

Continuez à faire cela pour vos questions et catégories. Chaque question doit avoir une réponse avec 1,00 pour la bonne réponse et 0,00 pour les mauvaises réponses. Nous utiliserons le montant pour obtenir un total cumulé pour chaque bonne réponse.

Ajouter un champ Total pour suivre le score

Maintenant, nous voulons suivre le nombre total de points pour chaque bonne réponse. Pour ce faire, en bas du formulaire, nous allons ajouter un champ Total. Cependant, nous allons donner à ce champ une Classe CSS dans l'onglet Avancé afin de pouvoir masquer ce champ jusqu'à la soumission du formulaire.

Une fois que vous avez enregistré le formulaire, vous voudrez ajouter le CSS nécessaire pour masquer ce champ. Copiez ce CSS sur votre site. Si vous avez besoin d'aide pour trouver comment et où ajouter du CSS personnalisé, veuillez consulter ce tutoriel.

.hide-field {display: none;}

Affichage du score du quiz dans le message de confirmation

Pour montrer aux participants du quiz leur score après la soumission, ajoutez l'extrait ci-dessous à votre site.

Cet extrait lit les valeurs soumises, récupère le nom et le score de l'utilisateur, et affiche un message de confirmation avec le résultat final.

Copiez et collez cet extrait sur votre site. Si vous avez besoin d'aide sur comment et où ajouter des extraits, veuillez consulter ce tutoriel utile.

/**
 * Display a custom confirmation message for our pub quiz.
 *
 * @link   https://wpforms.com/developers/how-to-create-a-quiz-form/
 */
   
function wpf_dev_quiz_custom_confirmation_message( $message, $form_data, $fields, $entry_id ) {
       
    // Only run on my form with ID = 3221
    if ( absint( $form_data[ 'id' ] ) !== 3221 ) {
            return $message;
        } 
   
    // Get the name of the person who completed this form
    $contact_name = $fields[ '1' ][ 'value' ];
            
    // Get the points from the total field (field ID '7') to remove any decimals and currency symbols
    $points_scored = $fields[ '7' ][ 'value' ];
  
    // Remove white space and currency symbol
    list($points_scored) = explode('.', $points_scored);
    $points_scored = substr($points_scored, 5);
     
       
    // Add the name and points scored to the message
    $message = __('Thanks ' . $contact_name .  ' you scored ' . $points_scored . ' out of a possible 35 points', 'plugin-domain');
      
    return $message;
        
}
add_filter( 'wpforms_frontend_confirmation_message', 'wpf_dev_quiz_custom_confirmation_message', 10, 4 );

Cet extrait ne s'exécutera que sur l'ID de formulaire 3221. Il récupérera le nom de l'utilisateur à partir de notre champ Nom dans l'ID de champ 1 afin qu'il puisse être affiché dans notre message de confirmation personnalisé. Cet extrait récupérera ensuite le montant de notre champ de formulaire Total, qui est l'ID de champ 7, supprimera le symbole de la devise et les espaces blancs, puis convertira ce qui reste en un nombre entier afin qu'il n'y ait pas de décimales ou de zéros.

Maintenant, lorsque les utilisateurs arriveront à la fin du quiz, ils cliqueront sur Soumettre et verront immédiatement combien de réponses ils ont obtenues correctement.

Et voilà ! Souhaitez-vous que le formulaire se soumette automatiquement en fonction de la valeur de l'un de vos champs de formulaire ? Consultez notre tutoriel sur Comment soumettre automatiquement un formulaire avec un choix de champ.

Filtre de référence

wpforms_frontend_confirmation_message