クイズフォームの作り方

WPFormsでクイズフォームを作成してみませんか？WPFormsにはクイズアドオンが付属しており、フォームビルダー内で直接クイズフォームを作成するために必要なすべての機能を提供します。

このチュートリアルでは、スニペットベースの設定を使用してクイズフォームを構築し、送信後にユーザーのスコアを計算して表示する方法を説明します。

クイズフォーム作成の推奨方法

WPFormsには専用のクイズアドオンが含まれており、クイズフォームを作成する最も簡単で完全な方法です。

クイズアドオンには組み込みのクイズ機能が含まれており、WPFormsでクイズフォームを作成・管理する最も簡単な方法を提供します。

推奨される方法の詳細については、クイズアドオンのドキュメントをご覧ください。

スニペットでクイズフォームを作成する

カスタム設定でクイズフォームを作成したい場合は、このガイドの手順に従い、以下のコードスニペットをご利用ください。

まず、新しいフォームを作成します。フォームの最初に名前と Eメールのフォームフィールドを追加します。そして、改ページを使ってクイズを6つのカテゴリに分割します。それぞれのページ区切りでは、クイズの受験者が現在どのカテゴリにいるのかをページタイトルに表示します。

クイズ問題と得点の追加

このドキュメントでは、フォームビルダーの「支払いフィールド」セクションにある「複数項目」フィールドを使用して、クイズの質問を行い、各質問に対して3つの答えを提供するラベルを変更します。正解には1.00を、不正解には0.00を配置します。

これを質問とカテゴリーを通して続けてください。各問題には、正解を1.00、不正解を0.00とした答えを1つずつ付けます。その金額を使って、各正解の合計を集計します。

合計フィールドを追加してスコアを追跡する

ここで、各正解の合計点数を追跡したいと思います。これを実現するために、フォームの一番下に合計フィールドを追加します。ただし、フォームが送信されるまでこのフィールドを表示しないようにするため、詳細設定タブでこのフィールドにCSSクラスを設定します。

フォームを保存したら、このフィールドを非表示にするために必要なCSSを追加します。このCSSをあなたのサイトにコピーしてください。カスタムCSSを追加する方法と場所についてヘルプが必要な場合は、こちらのチュートリアルをご覧ください。

.hide-field {display: none;}

確認メッセージでのクイズスコアの表示

回答者に提出後のスコアを表示するには、以下のスニペットをサイトに追加してください。

このスニペットは送信された値を読み取り、ユーザーの名前とスコアを取得し、最終結果を確認メッセージとして表示します。

このスニペットをコピーしてあなたのサイトに貼り付けてください。スニペットの追加方法や場所についてヘルプが必要な場合は、こちらの便利なチュートリアルをご覧ください。

/**
 * 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 );

このスニペットはフォームID3221でのみ実行されます。フィールドID1のNameフィールドからユーザー名を取得し、カスタム確認メッセージに表示します。このスニペットは、フィールドID7の 合計フォームフィールドから金額を取得し、通貨記号と空白を削除して、小数点やゼロがないように整数に変換します。

クイズが終了すると、ユーザーは提出をクリックし、何問正解したかをすぐに確認することができます。

以上です！フォームフィールドの値に基づいてフォームを自動的に送信したいですか?チュートリアル「フィールドの選択でフォームを自動送信する方法」をご覧ください。

リファレンス・フィルター

wpforms_frontend_confirmation_message