Accentsconagua

Integrazione di quiz a scelta multipla in WordPress creazione del front-end

Codice
Share

Questa è la seconda parte della serie sullo sviluppo di un plugin per il quiz a scelta multipla per WordPress. Nella prima parte abbiamo creato il back-end del nostro plugin per acquisire i dati necessari da memorizzare nel database.

In questa parte finale, creeremo il frontend del plugin dove gli utenti possono prendere i quiz e valutare le loro conoscenze.

I seguenti argomenti saranno trattati in questa parte del completamento del nostro plugin:

  • Crea uno shortcode per visualizzare un quiz
  • Integrazione di un cursore jQuery per visualizzare domande e navigazione
  • Completamento di un quiz e generazione di risultati
  • Creazione di un timer del quiz

Avremo bisogno di una quantità considerevole di domande nel back-end per generare quiz casuali. Spero che tu abbia già lavorato con il backend e memorizzato abbastanza domande per i quiz.

Quindi iniziamo.

Crea uno shortcode per visualizzare un quiz

Per prima cosa dovremmo avere un post o una pagina che carica gli elementi di visualizzazione del quiz. Questo può essere ottenuto usando uno shortcode o un modello di pagina. In questo plugin, verrà utilizzato uno shortcode per renderlo indipendente dal tema.

Gli shortcode ci consentono di utilizzare il plug-in come componente indipendente mentre i modelli di pagina dipendono dal tema. D'altra parte, un modello di pagina è molto più sicuro degli shortcode in quanto vi è la possibilità di eliminare i codici brevi all'interno delle pagine per sbaglio.

Inizialmente, lo shortcode dovrebbe generare le categorie di quiz disponibili in modo che gli utenti possano selezionare una categoria per generare il quiz. Uno shortcode sarà aggiunto nel costruttore usando il add_shortcode funzione come indicato nel seguente codice.

add_shortcode ('wpq_show_quiz', array ($ this, 'wpq_show_quiz'));

Ora, esaminiamo l'implementazione per lo shortcode recuperando le categorie di quiz disponibili dal database.

funzione wpq_show_quiz ($ atts) global $ post; $ html = '
'; $ html. = '
'; $ html. = '
'; $ html. = ''; $ html. = '
'; $ html. = ''; $ html. = '
'; // Implementazione del modulo di invio // Visualizzazione del questionario come elenco non ordinato return $ html;

Il nostro shortcode genererà il modulo HTML e i controlli necessari utilizzati per il quiz. Ritiriamo l'elenco delle categorie di quiz disponibili in un campo a discesa per consentire all'utente di selezionare la categoria preferita. Possiamo usare il get_terms funzione con hide_empty = 1 per ottenere le categorie del quiz che hanno almeno una domanda.

Un campo nascosto chiamato wpq_action è usato per controllare il $ _POST valori dopo l'invio.

Dopo aver inserito lo shortcode in una pagina o in un post, l'output sarà simile alla seguente schermata.

Ora l'utente può selezionare una categoria di quiz e inviare il modulo per ottenere il quiz. Quindi gestiremo l'invio del modulo all'interno di uno shorcode per ottenere la categoria selezionata e recuperare domande casuali per i quiz.

Il seguente codice contiene l'implementazione del recupero di domande da una categoria selezionata.

$ questions_str = ""; if (isset ($ _POST ['wpq_action']) && 'select_quiz_cat' == $ _POST ['wpq_action']) $ html. = '
'; $ html. = '
'; $ quiz_category_id = $ _POST ['quiz_category']; $ quiz_num = get_option ('wpq_num_questions'); $ args = array ('post_type' => 'wptuts_quiz', 'tax_query' => array (array ('taxonomy' => 'quiz_categories', 'field' => 'id', 'terms' => $ quiz_category_id)) , 'orderby' => 'rand', 'post_status' => 'publish', 'posts_per_page' => $ quiz_num); $ query = new WP_Query ($ args); $ quiz_index = 1; while ($ query-> have_posts ()): $ query-> the_post (); // Generazione dell'HTML per domande endwhile; wp_reset_query (); // Incorporamento Slider else $ html. = '
'; $ html. = '
';

Il codice fornito dovrebbe essere incluso nel Implementazione del modulo di invio sezione del codice precedente.

Una volta inviato il modulo, controlliamo se il modulo contiene l'azione richiesta utilizzando il campo nascosto generato in precedenza. Quindi otteniamo la categoria di quiz selezionata dal $ _POST schieramento.

Quindi interrogiamo il database per wptuts_quiz post con la categoria di quiz selezionata.

È importante impostare ordinato da come rand generare domande casuali per i quiz, che altrimenti genereranno sempre lo stesso insieme di domande. Inoltre, assicurati di impostare posts_per_page per impostare il numero massimo di domande per ogni dato quiz.

Una volta generati i risultati, dobbiamo aggiungere le domande agli elementi HTML necessari e la implementeremo nella prossima sezione.

Integrazione di un cursore jQuery per visualizzare domande e navigazione

I quiz possono essere generati come una schermata che contiene tutte le domande contemporaneamente, o una schermata che contiene una domanda alla volta con i controlli di navigazione. Credo che quest'ultima tecnica sia la preferita dalla maggior parte delle persone. Pertanto, mostreremo questo quiz con una sola domanda e la navigazione per passare alle domande precedenti e successive.

Generare questa funzionalità da zero può essere un'attività che richiede molto tempo e reinventare la ruota. Un cursore jQuery sarà la soluzione perfetta per questa situazione e userò RhinoSlider, dato che è il mio preferito, quindi prendine una copia.

All'interno della cartella scaricata, vedrai tre cartelle chiamate img, js, e css. Copia il img e css cartelle nel nostro plugin e copiare i file all'interno del js cartella per l'esistente js cartella che abbiamo sul nostro plugin per i quiz. Ora possiamo iniziare a includere gli script e gli stili necessari per il cursore.

Compresi gli script di frontend

Nella prima parte, abbiamo creato gli script necessari per il back-end. In questa parte includeremo gli script necessari per RhinoSlider e quiz.js per funzionalità personalizzate.

Per applicazioni più grandi, possiamo usare file di script separati per frontend e backend. Userò un file di script per semplificare le cose.

Considerare il seguente codice per includere script e dati di configurazione necessari.

function wpq_frontend_scripts () wp_register_script ('rhino', plugins_url ('js / rhinoslider-1.05.min.js', __FILE__), array ('jquery')); wp_register_script ('rhino-mousewheel', plugins_url ('js / mousewheel.js', __FILE__), array ('jquery')); wp_register_script ('rhino-easing', plugins_url ('js / easing.js', __FILE__), array ('jquery')); wp_register_script ('quiz', plugins_url ('js / quiz.js', __FILE__), array ('jquery', 'rhino', 'rhino-mousewheel', 'rhino-easing')); wp_enqueue_script ('quiz'); $ quiz_duration = get_option ('wpq_duration'); $ quiz_duration = (! empty ($ quiz_duration))? $ quiz_duration: 300; $ config_array = array ('ajaxURL' => admin_url ('admin-ajax.php'), 'quizNonce' => wp_create_nonce ('quiz-nonce'), 'quizDuration' => $ quiz_duration, 'plugin_url' => $ this -> plugin_url); wp_localize_script ('quiz', 'quiz', $ config_array);

Qui abbiamo tre file JavaScript usati per RhinoSlider e quiz.js file per funzionalità personalizzate. Nella parte precedente, abbiamo configurato la durata del quiz. Possiamo recuperare la durata usando il get_option funzione e assegnarlo al $ config array. Inoltre, dobbiamo includere configurazioni comuni nell'array di configurazione.

Finalmente possiamo usare il wp_localize_script funzione per assegnare i dati di configurazione nel file quiz.js file.

Compresi gli stili di frontend

Allo stesso modo possiamo includere i file CSS richiesti per Rhino Slider usando il seguente codice.

function wpq_frontend_styles () wp_register_style ('rhino-base', plugins_url ('css / rhinoslider-1.05.css', __FILE__)); wp_enqueue_style ('rhino-base');

Infine, dobbiamo aggiornare il costruttore del plugin per aggiungere le azioni necessarie per includere script e stili come indicato nel seguente codice.

add_action ('wp_enqueue_scripts', array ($ this, 'wpq_frontend_scripts')); add_action ('wp_enqueue_scripts', array ($ this, 'wpq_frontend_styles'));

Tutto è pronto per integrare il cursore con le domande nello shortcode creato in precedenza. Andiamo avanti.

Incorporamento del dispositivo di scorrimento in Shortcode

Al momento abbiamo due commenti all'interno della funzione shortcode, che menziona "Generazione di HTML per domande" e "Embedding Slider". Queste sezioni devono essere aggiornate con il rispettivo codice per generare un cursore. Per prima cosa dobbiamo aggiornare il mentre loop come segue.

while ($ query-> have_posts ()): $ query-> the_post (); $ question_id = get_the_ID (); $ question = the_title (",", FALSE). ". get_the_content (); $ question_answers = json_decode (get_post_meta ($ question_id, '_question_answers', true)); $ questions_str. = '
  • '; $ questions_str. = '
    '. $ quiz_index. ''. $ domanda. '
    '; $ questions_str. = '
    '; $ quiestion_index = 1; foreach ($ question_answers as $ key => $ value) if ("! = $ value) $ questions_str. = $ quiestion_index. ' '. $ valore. '
    ';  $ quiestion_index ++;  $ questions_str. = '
    • '; $ Quiz_index ++; ENDWHILE;

    Codice Spiegazione

    Successivamente abbiamo bisogno di creare i contenitori per il cursore nella sezione commentata come "Embedding Slider". Il seguente codice contiene il codice HTML per la creazione di contenitori.

    $ html. = '
      '. $ Questions_str; $ html. = '
    • Risultati del quiz 
      '; $ html. = '
      '; $ html. = '
    ';

    Useremo una lista non ordinata chiamata cursore come contenitore per Rhino Slider. Inizialmente includiamo l'insieme di domande e risposte generate all'interno del ciclo, usando $ questions_str. Conterrà una raccolta di voci di elenco.

    Quindi dobbiamo creare manualmente un'altra voce di elenco per mostrare i risultati del quiz e il punteggio.

    Ora tutti i dati e le diapositive richieste per l'applicazione del quiz sono configurati. Possiamo inizializzare Rhino Slider in quiz.js per vedere il quiz in azione.

    jQuery (document) .ready (function ($) $ ('# slider'). rhinoslider (controlsMousewheel: false, controlsPlayPause: false, showBullets: 'always', showControls: 'always'););

    Ho usato alcuni stili CSS personalizzati per migliorare l'aspetto grafico. Puoi trovare tutti i CSS modificati sotto il wp_quiz sezione del rhinoslider-1.05.css file. Ora dovresti avere qualcosa come la seguente immagine.

    Completamento del quiz e generazione dei risultati

    Una volta caricato il quiz, puoi utilizzare i controlli di navigazione per spostarti tra le domande e selezionare le risposte. È necessario fare clic sul pulsante "Ottieni risultati" dopo aver risposto a tutte le domande. Ora dobbiamo creare i risultati del quiz usando una richiesta AJAX.

    Implementiamo il codice jQuery per creare la richiesta AJAX.

    $ ("# completeQuiz"). click (function () wpq_quiz_results ();); var wpq_quiz_results = function () var selected_answers = ; $ (".ques_answers"). each (function () var question_id = $ (this) .attr ("data-quiz-id"); var selected_answer = $ (this) .find ('input [tipo = radio] : checked '); if (selected_answer.length! = 0) var selected_answer = $ (selected_answer) .val (); selected_answers ["qid _" + question_id] = selected_answer; else selected_answers ["qid _" + question_id] = ";); // Richiesta AJAX;

    Una volta cliccato il pulsante "Ottieni risultati", chiamiamo il wpq_quiz_results funzione usando jQuery. Ogni domanda è stata aggiunta al dispositivo di scorrimento con una classe CSS speciale chiamata ques_answers.

    Mentre attraversi ogni elemento con il ques_answers classe, recuperiamo l'ID della domanda utilizzando l'attributo dati HTML chiamato Dati-quiz-id e il pulsante di opzione selezionato utilizzando jQuery.

    Alla fine assegniamo tutte le domande e le risposte selezionate in un array chiamato selected_answers, da passare alla richiesta AJAX.

    Dai un'occhiata al seguente codice per l'implementazione della richiesta AJAX.

    $ .post (quiz.ajaxURL, action: "get_quiz_results", nonce: quiz.quizNonce, data: selected_answers,, function (data) // codice di gestione dei risultati AJAX, "json");

    Per prima cosa creiamo la richiesta AJAX usando i dati di configurazione assegnati da wpq_frontend_scripts funzione. L'elenco di risposte generato nella sezione precedente verrà inviato come parametro dei dati. Prima di gestire il risultato, dobbiamo esaminare l'implementazione del codice lato server nella sezione seguente.

    Creazione di un gestore AJAX sul lato server

    Per prima cosa dobbiamo aggiornare il costruttore con le azioni necessarie per usare AJAX sia per gli utenti registrati che per gli utenti normali, come mostrato nel seguente codice.

    add_action ('wp_ajax_nopriv_get_quiz_results', array ($ this, 'get_quiz_results')); add_action ('wp_ajax_get_quiz_results', array ($ this, 'get_quiz_results'));

    Quindi possiamo passare all'attuazione del get_quiz_results funzione come mostrato nel seguente codice.

    function get_quiz_results () $ score = 0; $ question_answers = $ _POST ["data"]; $ question_results = array (); foreach ($ question_answers as $ ques_id => $ answer) $ question_id = trim (str_replace ('qid_', ", $ ques_id)). ','; $ correct_answer = get_post_meta ($ question_id, '_question_correct_answer', vero); if ($ answer == $ correct_answer) $ score ++; $ question_results ["$ question_id"] = array ("answer" => $ answer, "correct_answer" => $ correct_answer, "mark" => "correct");  else $ question_results ["$ question_id"] = array ("answer" => $ answer, "correct_answer" => $ correct_answer, "mark" => "errato"); $ total_questions = count ($ question_answers) ; $ quiz_result_data = array ("total_questions" => $ total_questions, "score" => $ score, "result" => $ question_results); echo json_encode ($ quiz_result_data); exit;

    Codice Spiegazione

    Fino ad ora, abbiamo creato la richiesta AJAX e implementato la risposta lato server. Nella prossima sezione completeremo il processo di generazione dei risultati del quiz gestendo la risposta AJAX.

    Gestione dei dati di risposta AJAX

    Nella parte relativa alla gestione delle risposte, abbiamo alcune attività tra cui la visualizzazione dei risultati dei quiz e dei punteggi. Quindi ho intenzione di separare il codice in alcune sezioni per rendere chiara la spiegazione. Si consideri il seguente codice che contiene la richiesta AJAX completa.

    $ .post (quiz.ajaxURL, action: 'get_quiz_results', nonce: quiz.quizNonce, data: selected_answers, function (data) // Sezione 1 var total_questions = data.total_questions; $ ('# cursore'). data ('rhinoslider'). next ($ ('# rhino-item' + total_questions)); $ ('# score'). html (data.score + '/' + total_questions); // Sezione 2 var result_html = ''; result_html + = ''; var quiz_index = 1; $ .each (data.result, function (key, ques) result_html + = ''; result_html + = ''; quiz_index ++; ); result_html + = ''; result_html + = ''; // Sezione 3 $ ('# quiz_result'). Parent (). Css ('overflow-y', 'scroll'); . $ ( '# Quiz_result') html (result_html); $ ( '# Timer') nascondere ().; , "json");
    Spiegazione della sezione 1
    Innanzitutto, recuperiamo le domande totali del quiz dalla risposta ricevuta dal server. Quindi usiamo il Il prossimo funzione di Rhino Slider per reindirizzare l'utente alla diapositiva dei risultati. Quindi impostiamo il punteggio dell'utente con le domande totali all'interno di #Punto contenitore.
    Spiegazione della sezione 2
    La parte iniziale di questo codice genera la tabella HTML con le intestazioni necessarie per visualizzare i risultati. Quindi assegniamo le domande alla tabella all'interno di jQuery ogni ciclo continuo. Abbiamo usato due immagini per mostrare lo stato di successo o di fallimento della domanda.
    Spiegazione della sezione 3
    Inizialmente dobbiamo consentire lo scorrimento nella pagina dei risultati in quanto può essere abbastanza lungo per i quiz con un gran numero di domande. Il CSS troppopieno-y l'attributo è usato per consentire lo scorrimento. Finalmente abbiamo impostato la tabella dei risultati del quiz in #quiz_result contenitore e nascondere il timer, che implementeremo nella prossima sezione.
    Una volta completato il quiz, lo schermo dovrebbe apparire come qualcosa di simile all'immagine seguente.
    Creazione di un timer del quiz
    Di solito qualsiasi esame o quiz ha un periodo di tempo predefinito. Quindi useremo la durata che abbiamo configurato nella pagina delle impostazioni del nostro plugin per generare il timer del quiz. Abbiamo già configurato il timer da nascondere sul caricamento iniziale della pagina e per essere visibile sull'invio del modulo, nel shortcode.
    Concentriamoci sul timer che cambia dinamicamente usando il codice jQuery come mostrato di seguito.
    var duration = quiz.quizDuration * 60; $ (document) .ready (function ($) setTimeout ("startPuzzleCount ()", 1000);); var startPuzzleCount = function () duration--; $ ('# timer'). html (durata + "secondi rimanenti"); if (duration == '0') $ ('# timer'). html ("Time Up"); wpq_quiz_results (); ritorno;  setTimeout ("startPuzzleCount ()", 1000); ;
    La durata del quiz viene recuperata usando l'array di configurazione passato usando il wp_localize_script funzione. La durata viene quindi convertita in secondi moltiplicando per 60.
    Quindi creiamo a setTimeout funzione per avviare il timer. All'interno della funzione, riduciamo la durata di 1 e assegnare al #Timer contenitore. Quando il tempo scende a zero, chiamiamo il wpq_quiz_results funzione per completare automaticamente il quiz e generare i risultati.
    Infine, chiamiamo il setTimeout funzione ricorsiva per aggiornare il tempo rimanente. Abbiamo completato l'implementazione del timer e il tuo quiz dovrebbe apparire come l'immagine seguente con il timer.
    Incartare
    Nel corso di questa serie in due parti, abbiamo sviluppato un semplice e completo plug-in a scelta multipla per WordPress. È possibile estendere la funzionalità di questo plugin per soddisfare i requisiti della propria applicazione. Ti suggerisco di migliorare il plugin provando quanto segue:
    Fammi sapere i tuoi suggerimenti e come vanno con il processo di estensione del plugin.
    Attendiamo un vostro riscontro.
    
	
    	
			
	   
	
    

    
Codice

    
	

    
			
    
							×

							
							
      

						
      

      DomandaRispostaRisposta correttaRisultato
      '+ quiz_index +''+ ques.answer +''+ ques.correct_answer +'