How to Create a Quiz Form

Markdownを表示

WPFormsでクイズフォームを作成しませんか？ WPFormsには、フォームビルダーで直接クイズフォームを作成するために必要なすべてを提供するクイズアドオンが含まれています。

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

ほとんどのサイトではクイズアドオンの使用をお勧めしますが、このガイドでは、このアプローチを好む人のためにスニペットベースのオプションも引き続き含んでいます。

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

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

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

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

始めたばかりの方は、クイズフォームテンプレートを閲覧して、クイズをすばやく作成し、サイトに合わせてカスタマイズすることもできます。

スニペットを使用したクイズフォームの構築

カスタム設定でクイズフォームを構築したい場合は、このガイドの手順に従って、以下のコードスニペットを使用できます。

新しいフォームの作成から始めます。フォームには、フォームの先頭に名前とメールのフォームフィールドを追加します。次に、ページ区切りを使用して、クイズを6つのカテゴリに分割します。各ページ区切りには、クイズ受験者が現在どのカテゴリにいるかを示すページタイトルが表示されます。

フォームを作成し、フィールドを追加することから始めます。各カテゴリの間にページ区切りを追加することで、クイズカテゴリを分割できます。

フォームの作成に関するヘルプについては、このガイドを参照してください。

クイズの質問とスコアの追加

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

質問に使用する支払いフィールドの「複数のアイテム」を使用し、正解には1.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の氏名フィールドからユーザーの名前を取得し、カスタム確認メッセージに表示します。次に、フィールドID7の「合計」フォームフィールドから金額を取得し、通貨記号と空白を削除してから、残りを整数に変換して、小数点やゼロがないようにします。

これらのIDはすべて、ご自身のフォームとフィールドのIDに合わせて更新する必要があります。ご自身のID番号を見つけるには、こちらのドキュメントをご覧ください。

これで、ユーザーがクイズの最後に達すると、「送信」をクリックして、すぐに何問正解したかを確認できるようになります。

これで完了です！フォームフィールドの値に基づいて、フォームを自動的に送信するようにしたいですか？フィールドの選択肢でフォームを自動的に送信する方法のチュートリアルをご覧ください。

参照フィルター

wpforms_frontend_confirmation_message

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

AI要約