Riassunto AI
Vuoi creare un modulo quiz in WPForms? WPForms include un componente aggiuntivo Quiz che ti fornisce tutto il necessario per creare moduli quiz direttamente nell'editor di moduli.
In questo tutorial, ti mostreremo come creare un modulo quiz utilizzando una configurazione basata su snippet che calcola e visualizza il punteggio di un utente dopo l'invio.
Metodo consigliato per la creazione di moduli quiz
WPForms include un componente aggiuntivo Quiz dedicato, che è il modo più semplice e completo per creare moduli quiz.
Il componente aggiuntivo Quiz include funzionalità quiz integrate e fornisce il modo più semplice per creare e gestire moduli quiz in WPForms.
Per tutti i dettagli sul metodo consigliato, consulta la nostra documentazione sul componente aggiuntivo Quiz.
Creazione del modulo quiz con uno snippet
Se desideri comunque creare un modulo quiz con una configurazione personalizzata, puoi seguire i passaggi di questa guida e utilizzare lo snippet di codice seguente.
Inizieremo creando un nuovo modulo. Nel nostro modulo, aggiungeremo i campi modulo Nome ed Email all'inizio del modulo. Quindi, utilizzando le Interruzioni di pagina, divideremo il quiz in 6 categorie. Ogni Interruzione di pagina avrà il Titolo pagina che visualizza la categoria su cui si trovano attualmente i partecipanti al quiz.
Per qualsiasi aiuto nella creazione del tuo modulo, consulta questa guida.
Aggiunta di domande e punteggi del quiz
Per questa documentazione, utilizzeremo i campi Elementi multipli nella sezione Campi di pagamento nell'editor di moduli per porre la domanda del quiz e modificare le etichette fornendo 3 risposte per ogni domanda. Per la risposta corretta, inserisci 1,00 per la risposta corretta e 0,00 per le risposte errate.
Continua a fare ciò per le tue domande e categorie. Ogni domanda dovrebbe avere una risposta con 1,00 per la risposta corretta e 0,00 per le risposte errate. Utilizzeremo l'importo per raccogliere un totale progressivo per ogni risposta corretta.
Aggiunta di un campo Totale per tenere traccia del punteggio
Ora vogliamo tenere traccia del numero totale di punti per ogni risposta corretta. Per ottenere ciò, in fondo al modulo, aggiungeremo un campo Totale. Tuttavia, daremo a questo campo una Classe CSS nella scheda Avanzate in modo da poter mantenere questo campo nascosto alla vista fino all'invio del modulo.
Una volta salvato il modulo, vorrai aggiungere il CSS necessario per nascondere questo campo. Copia questo CSS sul tuo sito. Se hai bisogno di aiuto per trovare come e dove aggiungere CSS personalizzato, consulta questo tutorial.
.hide-field {display: none;}
Visualizzazione del punteggio del quiz nel messaggio di conferma
Per mostrare ai partecipanti al quiz il loro punteggio dopo l'invio, aggiungi lo snippet qui sotto al tuo sito.
Questo snippet legge i valori inviati, ottiene il nome e il punteggio dell'utente e visualizza un messaggio di conferma con il risultato finale.
Copia e incolla questo snippet sul tuo sito. Se hai bisogno di aiuto su come e dove aggiungere snippet, dai un'occhiata a questo utile tutorial.
/**
* 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 );
Questo snippet verrà eseguito solo sull'ID del modulo 3221. Recupererà il nome dell'utente dal nostro campo Nome nel campo ID 1 in modo che possa essere visualizzato nel nostro messaggio di conferma personalizzato. Questo snippet recupererà quindi l'importo dal nostro campo modulo Totale, che è l'ID campo 7, rimuoverà il simbolo di valuta e lo spazio bianco e quindi convertirà ciò che rimane in un numero intero in modo che non ci sia un punto decimale o zeri.
Dovrai aggiornare ciascuno di questi ID per corrispondere ai tuoi ID modulo e campo. Per trovare i tuoi numeri ID, rivedi questa documentazione.
Ora, quando gli utenti arrivano alla fine del quiz, faranno clic su Invia e vedranno immediatamente quante risposte hanno dato correttamente.
E questo è tutto! Desideri che il modulo venga inviato automaticamente in base al valore di uno dei tuoi campi modulo? Dai un'occhiata al nostro tutorial su Come inviare automaticamente un modulo con una scelta di campo.