Share
Le domande a scelta multipla sono qualcosa che la maggior parte di noi ha affrontato almeno una volta nella vita. Li amiamo perché possiamo fornire risposte corrette riflettendo logicamente sulle possibilità fornite, anche se non conosciamo esattamente la risposta corretta. Anche rispondere richiede meno tempo che lo rende così popolare.
Creare un quiz a scelta multipla in WordPress può essere un compito molto eccitante e redditizio. Puoi usarlo nel tuo blog personale per attirare più visitatori, oppure puoi creare una sezione premium con quiz avanzati, oppure puoi creare quiz incentrati su esami di certificazione popolari. Ci sono numerose possibilità per renderlo redditizio.
Questo plugin non ti porterà alla creazione di quiz per la creazione di un business, ma dobbiamo iniziare da qualche parte per arrivare dove vogliamo andare. Quindi questo sarebbe un buon inizio per creare quiz e ricavarne profitti.
Quindi iniziamo.
Per prima cosa dobbiamo raccogliere i requisiti del plugin prima di andare alla progettazione o all'implementazione. Fondamentalmente, dovremmo essere in grado di creare quiz a scelta multipla e consentire agli utenti di prendere i quiz e ottenere risultati.
Diamo uno sguardo ai requisiti e ai componenti dettagliati del nostro plugin:
Questo tutorial sarà costruito come una serie in due parti, dove svilupperemo il backend del plugin nella prima parte, seguito dal frontend del plugin nella seconda parte.
In questa parte ci concentreremo sullo sviluppo del backend del plugin dove sviluppiamo i dati richiesti per i quiz.
Di solito c'è una lista di quiz, ognuno contenente un elenco specifico di domande. Con questo plugin non creeremo quiz. Creeremo domande individuali e assegnandole dinamicamente ai quiz quando richiesto.
Ora possiamo richiedere tempo per identificare i componenti necessari per l'implementazione del back-end, come elencato nella sezione seguente.
Accentsconagua
wptuts_quiz.quiz_categories per il wptuts_quiz tipo di post.Dopo aver identificato i componenti necessari di WordPress, possiamo passare direttamente all'attuazione del backend del plugin per i quiz.
Il processo di creazione delle domande consiste di quattro sezioni principali: definizione del tipo di post personalizzato, definizione della tassonomia personalizzata, assegnazione di campi personalizzati e convalide. Ciascuna di queste sezioni sarà discussa con il codice dettagliato nelle prossime sezioni.
Abbiamo bisogno della forma più semplice di tipo di messaggio personalizzato per domande senza configurazioni avanzate. L'unica cosa che dobbiamo considerare è la selezione del campo giusto per la domanda.
La schermata di creazione post predefinita contiene due campi per titolo e contenuto. Puoi scegliere uno qualsiasi di questi campi per la domanda. Ho intenzione di scegliere la concatenazione di entrambi i campi titolo e contenuto considerando possibilità avanzate.
Creeremo un plugin orientato agli oggetti invece di un plug-in funzionale, quindi tutte le azioni, gli shortcode e le inizializzazioni necessari verranno eseguiti all'interno del costruttore. Quanto segue contiene il codice per implementare il wptuts_quiz tipo di post.
class WP_Quiz public $ plugin_url; funzione pubblica __construct () $ this-> plugin_url = plugin_dir_url (__FILE__); add_action ('init', array ($ this, 'wpq_add_custom_post_type')); public function wpq_add_custom_post_type () $ labels = array ('name' => _x ('Questions', 'wptuts_quiz'), 'menu_name' => _x ('WPTuts Quiz', 'wptuts_quiz'), 'add_new' => _x ('Aggiungi nuovo', 'wptuts_quiz'), 'add_new_item' => _x ('Aggiungi nuova domanda', 'wptuts_quiz'), 'new_item' => _x ('Nuova domanda', 'wptuts_quiz'), 'all_items' => _x ('Tutte le domande', 'wptuts_quiz'), 'edit_item' => _x ('Modifica domanda', 'wptuts_quiz'), 'view_item' => _x ('Visualizza domanda', 'wptuts_quiz'), 'search_items '=> _x (' Cerca domande ',' wptuts_quiz '),' not_found '=> _x (' Nessuna domanda trovata ',' wptuts_quiz '),); $ args = array ('labels' => $ labels, 'hierarchical' => true, 'description' => 'WP Tuts Quiz', 'supports' => array ('title', 'editor'), 'public' => true, 'show_ui' => true, 'show_in_menu' => true, 'show_in_nav_menus' => true, 'public_queryable' => true, 'exclude_from_search' => false, 'has_archive' => true, 'query_var' = > true, 'can_export' => true, 'rewrite' => true, 'capability_type' => 'post'); register_post_type ('wptuts_quiz', $ args); Abbiamo abilitato entrambi i campi titolo e editor nel tipo di post personalizzato da utilizzare per la domanda. Poiché le funzioni si trovano all'interno di una classe, dobbiamo usare $ questo nelle nostre azioni, filtri e shortcode di WordPress per chiamare le funzioni.
Oltre a ciò tutti i parametri menzionati nel codice sono inizializzati con i loro valori predefiniti.
Per raggruppare le domande in sezioni specifiche, abbiamo bisogno di qualcosa di simile alle categorie di WordPress predefinite. Quindi useremo una tassonomia personalizzata chiamata quiz_categories. Dobbiamo chiamare la funzione di generazione della tassonomia personalizzata su dentro azione come abbiamo fatto in precedenza. Quindi il costruttore della nostra classe plugin deve essere aggiornato con il seguente codice.
add_action ('init', array ($ this, 'wpq_create_taxonomies'), 0); Quindi possiamo implementare il wpq_create_taxonomies funzione sul wptuts_quiz tipo di post come mostrato nel seguente codice.
function wpq_create_taxonomies () register_taxonomy ('quiz_categories', 'wptuts_quiz', array ('labels' => array ('name' => 'Quiz Category', 'add_new_item' => 'Aggiungi nuova categoria quiz', 'new_item_name' = > "Nuova categoria quiz"), 'show_ui' => true, 'show_tagcloud' => false, 'hierarchical' => true)); Ho usato i parametri di opzione predefiniti per creare questa tassonomia personalizzata. Una volta attivato il plugin, il tipo di post personalizzato e la tassonomia verranno visualizzati come mostrato nella seguente schermata.
Successivamente, dobbiamo creare più risposte per ogni domanda. In questo plugin il numero massimo di risposte per singola domanda sarà limitato a cinque.
Puoi assegnare dinamicamente 1-5 risposte per qualsiasi domanda. Inoltre, dobbiamo specificare la risposta corretta dall'elenco di risposte fornito. Poiché questi dati sono associati alle nostre domande, possiamo utilizzare una meta-box con campi personalizzati per generare i campi necessari.
Come al solito, dobbiamo aggiornare il costruttore con il seguente codice:
add_action ('add_meta_boxes', array ($ this, 'wpq_quiz_meta_boxes')); Si consideri il seguente codice per l'implementazione di meta box con campi di risposta.
function wpq_quiz_meta_boxes () add_meta_box ('quiz-answers-info', 'Quiz Answers Info', array ($ this, 'wpq_quiz_answers_info'), 'wptuts_quiz', 'normal', 'high'); function wpq_quiz_answers_info () global $ post; $ question_answers = get_post_meta ($ post-> ID, '_question_answers', true); $ question_answers = ($ question_answers == ")? array (", ",", ","): json_decode ($ question_answers); $ question_correct_answer = trim (get_post_meta ($ post-> ID, '_question_correct_answer', true)); $ html = ''; $ html. = '| '; $ html. = ' |
|---|
post_meta tavolo con la chiave _question_answers. Quindi accediamo a questo campo usando il get_post_meta funzione per ottenere i valori correnti.post_meta tavolo con la chiave _question_correct_answer.get_post_meta la funzione sarà assegnata ai rispettivi campi.Dovresti vedere qualcosa di simile alla seguente schermata, una volta creata la meta-scatola.
Ora abbiamo tutti i dati necessari per il nostro plug-in di generazione di quiz. Il passo successivo è salvare i dati della domanda nel database.
Ma abbiamo bisogno di alcune convalide prima di quello. Quindi passiamo alle convalide.
Non abbiamo regole di convalida complesse in questa fase del processo di creazione delle domande. Quindi useremo le convalide jQuery del lato client prima dell'invio.
Qui abbiamo bisogno del admin_enqueue_scripts azione da includere nel costruttore del nostro plugin.
Quindi aggiorna il costruttore con il seguente codice prima di iniziare.
add_action ('admin_enqueue_scripts', array ($ this, 'wpq_admin_scripts')); Ora guarda il seguente codice per includere i file di script necessari per la convalida.
function wpq_admin_scripts () wp_register_script ('quiz-admin', plugins_url ('js / quiz.js', __FILE__), array ('jquery')); wp_enqueue_script ('quiz-admin'); utilizzando wp_register_script e wp_enqueue_script, abbiamo un file JS specifico per il plugin chiamato quiz.js per la gestione delle convalide. La convalida verrà eseguita utilizzando la libreria jQuery e quindi abbiamo impostato la libreria jQuery integrata come dipendenza per il nostro JavaScript specifico del plugin.
Dopo aver incluso gli script, implementiamo le convalide effettive in quiz.js file come mostrato nel seguente codice.
jQuery (document) .ready (function ($) $ ("# post-body-content"). prepend (''); $ ('# post'). submit (function () if ($ ("# post_type"). val () == 'wptuts_quiz') return wpq_validate_quizes ();); ); Per prima cosa, assegniamo un vuoto div elemento per la schermata di creazione post per visualizzare eventuali errori. Quindi possiamo chiamare una funzione JS personalizzata sull'azione di post pubblicazione controllando il tipo di post corretto usando il #post_type valore del campo nascosto.
Il seguente codice contiene l'implementazione di wpq_validate_quizes funzione.
var wpq_validate_quizes = function () var err = 0; $ ( "# Quiz_error") html ( ""); $ ( "# Quiz_error") nascondere ().; if ($ ("# title"). val () == ") $ (" # quiz_error "). append ("Si prega di inserire il titolo della domanda.
"); err ++; var correct_answer = $ (" # correct_answer "). val (); if ($ (" # quiz_answer "+ correct_answer) .val () ==" ") $ (" # quiz_error "). aggiungere("La risposta corretta non può essere vuota.
"); err ++; if (err> 0) $ (" # publish "). removeClass (" button-primary-disabled "); $ (". spinner "). hide (); $ (" # quiz_error " ) .show (); return false; else return true;; L'immagine seguente mostra la schermata di creazione post con messaggi di convalida personalizzati.
Una volta che il modulo è stato correttamente convalidato senza errori, possiamo passare al salvataggio dei dettagli della domanda nel database.
WordPress fornisce un'azione chiamata save_post, che verrà eseguito subito dopo la creazione del post. Possiamo definire una funzione personalizzata su save_post azione per salvare i dettagli del campo personalizzato nel database.
Come al solito aggiornare il costruttore con il save_post codice di azione.
add_action ('save_post', array ($ this, 'wpq_save_quizes')); Attuazione del wpq_save_quizes la funzione è data nel seguente codice.
function wpq_save_quizes ($ post_id) if (! wp_verify_nonce ($ _POST ['question_box_nonce'], basename (__FILE__))) return $ post_id; if (definito ('DOING_AUTOSAVE') && DOING_AUTOSAVE) return $ post_id; if ('wptuts_quiz' == $ _POST ['post_type'] && current_user_can ('edit_post', $ post_id)) $ question_answers = isset ($ _POST ['quiz_answer'])? ($ _POST ['quiz_answer']): array (); $ filtered_answers = array (); foreach ($ question_answers as $ answer) array_push ($ filtered_answers, sanitize_text_field (trim ($ answer))); $ question_answers = json_encode ($ filtered_answers); $ correct_answer = isset ($ _POST ['correct_answer'])? sanitize_text_field ($ _POST ['correct_answer']): ""; update_post_meta ($ post_id, "_question_answers", $ question_answers); update_post_meta ($ post_id, "_question_correct_answer", $ correct_answer); else return $ post_id; L'ID post viene passato automaticamente a questa funzione. Inizialmente eseguiamo le convalide per il valore nonce e il salvataggio automatico. La cosa più importante prima di salvare è la convalida del tipo di post.
Se si omette il controllo del tipo di post, questo codice verrà eseguito per tutti i tipi di post nell'installazione di WordPress, inclusi i post normali, che possono generare dati incoerenti.
Finalmente otteniamo i valori dei nostri campi di risposta e il campo di risposta corretto da salvare nel database usando il update_post_meta funzione. Tutti i dettagli dei campi personalizzati verranno salvati nel post_meta tavolo.
Ora abbiamo completato il processo di creazione della domanda. Poiché utilizziamo i quiz generati casualmente, potresti avere bisogno di molte domande per vedere questo plugin in azione. Preparati quindi aggiungendo ulteriori domande prima di implementare il quiz nella parte successiva.
Anche se non è obbligatorio, è ideale avere una pagina delle impostazioni per il nostro plugin in modo che l'amministratore possa personalizzare in base alle proprie preferenze.
Quindi implementiamo una semplice pagina delle impostazioni per contenere la durata del quiz e il numero di domande per ogni quiz. Dobbiamo implementare il admin_menu azione nel costruttore.
add_action ('admin_menu', array ($ this, 'wpq_plugin_settings')); function wpq_plugin_settings () // crea un nuovo menu di primo livello add_menu_page ('Impostazioni dei quiz WPTuts', 'Impostazioni quiz WPTuts', 'amministratore', 'quiz_settings', array ($ this, 'wpq_display_settings')); function wpq_display_settings () $ html = ' '; echo $ html; Possiamo usare il add_menu_page funzione per aggiungere una pagina delle impostazioni all'area di amministrazione. Il wpq_display_settings la funzione viene utilizzata per implementare gli elementi di visualizzazione della pagina delle impostazioni.
Abbiamo usato due campi di testo per durata e domande per quiz. L'invio dei moduli e il salvataggio dei dati possono essere gestiti manualmente utilizzando il codice personalizzato, ma WordPress ci fornisce un metodo semplificato per l'aggiornamento delle opzioni.
In questo metodo devi impostare l'azione del modulo su options.php file. Quindi devi creare un campo nascosto chiamato azione per contenere il valore di 'aggiornare'. Alla fine abbiamo bisogno di avere un altro campo nascosto chiamato page_options per contenere i nomi dei due campi di testo da aggiornare.
Assicurati di utilizzare queste tecniche di aggiornamento delle opzioni integrate in scenari in cui i requisiti per il salvataggio dei campi non sono complessi.
Dopo aver fatto clic sul pulsante di invio, i dettagli del modulo verranno aggiornati automaticamente senza alcun codice personalizzato.
Abbiamo completato il back-end del nostro plugin per i quiz. Ora puoi creare domande e prepararti per la parte successiva in cui useremo queste domande per generare dinamicamente i quiz.
Fino ad allora fammi sapere il modo migliore per implementare un quiz dinamico sul frontend. Tieni presente che verrà visualizzata una sola domanda alla volta. Quando l'utente richiede una domanda, può passare alla domanda successiva.
In attesa di vostri suggerimenti.
