Erstellen eines Quiz-Formulars

Möchten Sie ein Quiz-Formular in WPForms erstellen? WPForms enthält ein Quiz-Add-on, das Ihnen alles bietet, was Sie benötigen, um Quiz-Formulare direkt im Formular-Generator zu erstellen.

In diesem Tutorial zeigen wir Ihnen, wie Sie ein Quiz-Formular mit einer Snippet-basierten Einrichtung erstellen, die die Punktzahl eines Benutzers nach der Übermittlung berechnet und anzeigt.

Empfohlene Methode zum Erstellen von Quiz-Formularen

WPForms enthält ein spezielles Quiz-Add-on, das die einfachste und vollständigste Methode zum Erstellen von Quiz-Formularen ist.

Das Quiz-Add-on enthält integrierte Quiz-Funktionen und bietet die einfachste Möglichkeit, Quiz-Formulare in WPForms zu erstellen und zu verwalten.

Ausführliche Informationen zur empfohlenen Methode finden Sie in unserer Dokumentation zum Quiz-Add-on.

Erstellen des Quiz-Formulars mit einem Snippet

Wenn Sie dennoch ein Quiz-Formular mit einer benutzerdefinierten Einrichtung erstellen möchten, können Sie die Schritte in dieser Anleitung befolgen und den folgenden Code-Snippet verwenden.

Wir beginnen mit der Erstellung eines neuen Formulars. In unserem Formular fügen wir am Anfang die Formularfelder Name und E-Mail hinzu. Dann verwenden wir Seitenumbrüche, um das Quiz in 6 Kategorien aufzuteilen. Jeder Seitenumbruch wird den Seitentitel anzeigen, der angibt, auf welcher Kategorie sich die Quizteilnehmer gerade befinden.

Hinzufügen von Quizfragen und -punkten

Für diese Dokumentation verwenden wir die Felder Mehrere Elemente im Abschnitt Zahlungsfelder im Formular-Generator, um unsere Quizfragen zu stellen und die Beschriftungen zu ändern, die 3 Antworten für jede Frage bieten. Für die richtige Antwort geben Sie 1,00 für die richtige Antwort und 0,00 für die falschen Antworten ein.

Fahren Sie mit Ihren Fragen und Kategorien fort. Jede Frage sollte eine Antwort mit 1,00 für die richtige Antwort und 0,00 für falsche Antworten haben. Wir werden den Betrag verwenden, um eine laufende Summe für jede richtige Antwort zu sammeln.

Hinzufügen eines Gesamtfeldes zur Verfolgung der Punktzahl

Jetzt möchten wir die Gesamtzahl der Punkte für jede richtige Antwort verfolgen. Um dies zu erreichen, fügen wir am Ende des Formulars ein Gesamtfeld hinzu. Wir werden diesem Feld jedoch eine CSS-Klasse auf der Registerkarte Erweitert geben, damit wir dieses Feld bis zur Übermittlung des Formulars ausblenden können.

Nachdem Sie das Formular gespeichert haben, müssen Sie das CSS hinzufügen, um dieses Feld auszublenden. Kopieren Sie dieses CSS auf Ihre Website. Wenn Sie Hilfe beim Finden, wie und wo Sie benutzerdefiniertes CSS hinzufügen können, sehen Sie sich dieses Tutorial an.

.hide-field {display: none;}

Anzeige der Quiz-Ergebnisse in der Bestätigungsnachricht

Um Quizteilnehmern ihre Punktzahl nach der Einreichung anzuzeigen, fügen Sie den folgenden Codeausschnitt zu Ihrer Website hinzu.

Dieser Codeausschnitt liest die übermittelten Werte, ruft den Namen und die Punktzahl des Benutzers ab und zeigt eine Bestätigungsnachricht mit dem Endergebnis an.

Kopieren Sie diesen Codeausschnitt und fügen Sie ihn auf Ihrer Website ein. Wenn Sie Hilfe benötigen, wie und wo Sie Codeausschnitte hinzufügen können, sehen Sie sich dieses nützliche Tutorial an.

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

Dieser Codeausschnitt wird nur für die Formular-ID 3221 ausgeführt. Er ruft den Namen des Benutzers aus unserem Namensfeld mit der Feld-ID 1 ab, um ihn in unserer benutzerdefinierten Bestätigungsnachricht anzuzeigen. Dieser Codeausschnitt ruft dann den Betrag aus unserem Formularfeld Gesamt ab, das die Feld-ID 7 hat, entfernt das Währungssymbol und Leerzeichen und konvertiert dann, was übrig bleibt, in eine ganze Zahl, damit kein Dezimalpunkt oder Nullen vorhanden sind.

Wenn Benutzer nun das Ende des Quiz erreichen, klicken sie auf Senden und sehen sofort, wie viele Antworten sie richtig beantwortet haben.

Das ist alles! Möchten Sie, dass das Formular automatisch basierend auf dem Wert eines Ihrer Formularfelder gesendet wird? Sehen Sie sich unser Tutorial an So übermitteln Sie ein Formular automatisch mit einer Feldauswahl.

Referenzfilter

wpforms_frontend_confirmation_message