Riepilogo AI
Ti piacerebbe creare un modulo quiz in WPForms? WPForms include un add-on Quiz che ti offre tutto ciò di cui hai bisogno per creare moduli quiz direttamente nel generatore di moduli.
In questo tutorial ti mostreremo come creare un modulo quiz utilizzando una configurazione basata su snippet che calcola e visualizza il punteggio dell'utente dopo l'invio.
Metodo consigliato per la creazione di moduli quiz
WPForms include un add-on dedicato ai quiz, che rappresenta il modo più semplice e completo per creare moduli di quiz.
L'add-on Quiz include funzionalità di quiz integrate e offre il modo più semplice per creare e gestire moduli di quiz in WPForms.
Per tutti i dettagli sul metodo consigliato, consulta la documentazione relativa al nostro add-on Quiz.
Creazione del modulo quiz con uno snippet
Se desideri comunque creare un modulo quiz con una configurazione personalizzata, puoi seguire i passaggi indicati in questa guida e utilizzare il frammento di codice riportato di seguito.
Inizieremo creando un nuovo modulo. Nel nostro modulo, aggiungeremo i campi Nome e Email all'inizio del modulo. Quindi, utilizzando le interruzioni di pagina, suddivideremo il quiz in 6 categorie. In ogni interruzione di pagina il titolo della pagina mostrerà la categoria in cui si trovano attualmente i partecipanti al quiz.
Per qualsiasi aiuto nella creazione del modulo, consultare questa guida.
Aggiunta di domande e punteggi del quiz
Per questa documentazione, utilizzeremo i campi Multiple Items nella sezione Payment Fields del costruttore di moduli per porre le domande del quiz e cambiare le etichette fornendo 3 risposte per ogni domanda. Per la risposta corretta, inserire un 1,00 per la risposta corretta e 0,00 per le risposte errate.
Continuate a farlo attraverso le domande e le categorie. Ogni domanda deve avere una risposta con un 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 questo, in fondo al modulo, aggiungeremo un campo Totale. Tuttavia, assegneremo a questo campo una classe CSS nella scheda Avanzate, in modo da tenerlo nascosto alla vista fino all'invio del modulo.
Una volta salvato il modulo, si dovrà aggiungere il CSS necessario per nascondere questo campo. Copiate il CSS nel vostro sito. Se avete bisogno di aiuto per capire come e dove aggiungere i CSS personalizzati, consultate 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 il seguente snippet 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.
Copiate e incollate questo snippet sul vostro sito; se avete bisogno di aiuto per capire come e dove aggiungere gli snippet, consultate 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 sul modulo ID 3221. Prenderà il nome dell'utente dal nostro campo Nome nel campo ID 1, in modo da poterlo visualizzare nel nostro messaggio di conferma personalizzato. Questo snippet prenderà quindi l'importo dal campo Totale del modulo, che è l'ID del campo 7, rimuoverà il simbolo di valuta e gli spazi bianchi e convertirà ciò che rimane in un numero intero, senza punto decimale o zeri.
È necessario aggiornare ciascuno di questi ID in modo che corrispondano agli ID dei propri moduli e campi. Per trovare i propri numeri ID, consultare questa documentazione.
Ora, quando gli utenti arrivano alla fine del quiz, fanno clic su Invia e possono vedere immediatamente quante risposte hanno ottenuto correttamente.
E questo è tutto! Volete che il modulo venga inviato automaticamente in base al valore di uno dei vostri campi? Consultate il nostro tutorial su Come inviare automaticamente un modulo con una scelta di campo.