Accentsconagua

Integrarea chestionarelor cu mai multe opțiuni în WordPress Crearea Frontului

Cod
Share

Aceasta este a doua parte a seriei despre dezvoltarea unui plug-in quiz pentru WordPress. În prima parte am creat backend-ul pluginului nostru pentru a captura datele necesare pentru a fi stocate în baza de date.

În această ultimă parte, vom crea frontendul pluginului, în care utilizatorii pot lua chestionare și își vor putea evalua cunoștințele.

Următoarele subiecte vor fi acoperite în această parte a completării plugin-ului nostru:

  • Creați un cod scurt pentru a afișa un test
  • Integrarea unui cursor jQuery pentru a afișa întrebări și navigare
  • Finalizarea unui test și generarea rezultatelor
  • Crearea unui cronometru de test

Vom avea nevoie de o mulțime de întrebări în backend pentru a genera chestionare aleatorii. Sper că ați lucrat deja cu backend-ul și ați stocat suficiente întrebări pentru chestionare.

Deci sa începem.

Creați un cod scurt pentru a afișa un test

Mai întâi ar trebui să avem un post sau o pagină care să încarce elementele de afișare ale testului. Acest lucru se poate realiza utilizând fie un cod scurt, fie un șablon de pagină. În acest plugin, un scurtcod va fi folosit pentru al face independent de temă.

Codurile scurte ne permit să folosim pluginul ca o componentă independentă, în timp ce șabloanele de pagină depind de temă. Pe de altă parte, un șablon de pagină este mult mai sigur decât codurile scurte, deoarece există posibilitatea de a șterge din greșeală codurile scurte din pagini.

Inițial, codul scurt trebuie să trimită categoriile de chei disponibile, astfel încât utilizatorii să poată selecta o categorie pentru a genera testul. Un cod scurt va fi adăugat în constructor folosind add_shortcode funcția indicată în codul următor.

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

Acum, să examinăm implementarea codului scurt prin preluarea categoriilor de chei disponibile din baza de date.

funcția wpq_show_quiz ($ atts) global $ post; $ html = '
„; $ html. = '
„; $ html. = '
„; $ html. = '„; $ html. = '
„; // Implementarea trimiterii formularului // Afișarea testului ca listă neordonată retur $ html;

Codul nostru scurt va genera formularul HTML și comenzile necesare pentru test. Descărcăm lista categoriilor de chestionare disponibile într-un câmp drop-down pentru a permite utilizatorului să selecteze categoria preferată. Putem folosi get_terms funcția cu hide_empty = 1 pentru a obține categoriile de chestiuni care au cel puțin o întrebare.

A chemat un câmp ascuns wpq_action este folosit pentru a verifica $ _POST după trimitere.

După ce introduceți codul scurt într-o pagină sau postare, ieșirea va arăta ca în ecranul următor.

Acum, utilizatorul poate selecta o categorie de test și poate trimite formularul pentru a obține chestionarul. Deci, vom proceda la depunerea formularului într-un cod scurt pentru a obține categoria selectată și pentru a prelua întrebări aleatorii pentru chestionare.

Următorul cod conține implementarea de preluare a întrebărilor dintr-o categorie selectată.

$ questions_str = ""; dacă 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 ('taxonomy' => quiz_categories ',' field '=> $ quiz_category_id) , 'orderby' => 'rand', 'post_status' => 'publica', 'posts_per_page' => $ quiz_num); $ query = noua valoare WP_Query ($ args); $ quiz_index = 1; în timp ce ($ query-> have_posts ()): $ query-> the_post (); // Generarea codului HTML pentru întrebări în cele din urmă; wp_reset_query (); // Embedding Slider altceva $ html. = '
„; $ html. = '
„;

Codul dat trebuie inclus în Implementarea prezentării formularului din codul anterior.

După trimiterea formularului, verificăm dacă formularul conține acțiunea necesară utilizând câmpul ascuns pe care l-am generat mai devreme. Apoi, obținem categoria de chestionare selectată din $ _POST mulțime.

Apoi am interogat baza de date pentru wptuts_quiz posturi cu categoria de chestionare selectată.

Este important să setați orderby la fel de Rand pentru a genera întrebări aleatorii pentru chestionare, care altfel vor genera același set de întrebări de fiecare dată. De asemenea, asigurați-vă că ați setat posts_per_page pentru a seta numărul maxim de întrebări pentru fiecare chestionar dat.

Odată ce rezultatele sunt generate, trebuie să adăugăm întrebările în elementele HTML necesare și o vom implementa în secțiunea următoare.

Integrarea unui cursor jQuery pentru a afișa întrebări și navigare

Testele pot fi generate ca un ecran care conține toate întrebările simultan sau un ecran care conține o întrebare la un moment dat cu comenzi de navigare. Cred că această tehnică din urmă este favorită printre majoritatea oamenilor. Prin urmare, vom afișa acest test cu o singură întrebare și navigare pentru a traversa întrebările anterioare și viitoare.

Generarea acestei funcționalități de la zero poate reprezenta o sarcină consumatoare de timp, precum și reinventarea roții. Un slider jQuery va fi soluția perfectă pentru această situație și voi folosi RhinoSlider, deoarece este preferatul meu, prindeți o copie.

În interiorul directorului descărcat, veți vedea trei dosare numite img, js, și css. Copiați img și css foldere în pluginul nostru și copiați fișierele din interiorul js dosarul existent js dosarul pe care îl avem pe plugin-ul nostru de test. Acum putem începe să includeți scripturile și stilurile necesare pentru cursor.

Inclusiv scripturile Frontend

În prima parte, am creat scripturile necesare pentru backend. În această parte vom include și scripturile necesare pentru RhinoSlider, precum și quiz.js pentru funcționalitatea personalizată.

Pentru aplicații mai mari, putem folosi fișiere de script separate pentru frontend și backend. Voi folosi un fișier de script pentru a simplifica lucrurile.

Luați în considerare următorul cod pentru includerea scripturilor și a datelor de configurare necesare.

funcția 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 ("test"); $ quiz_duration = get_option ('wpq_duration'); $ quiz_duration = (! gol ($ 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 = -> plugin_url); wp_localize_script ('quiz', 'quiz', $ config_array);

Aici avem trei fișiere JavaScript folosite pentru RhinoSlider și quiz.js fișier pentru funcționalitate personalizată. În partea anterioară, am configurat durata testului. Putem recupera durata utilizând get_option funcția și să o atribuiți $ config matrice. De asemenea, trebuie să includem configurații comune în matricea config.

În cele din urmă putem folosi wp_localize_script pentru a atribui datele de configurare în quiz.js fişier.

Inclusiv stiluri Frontend

În mod similar, putem include fișierele CSS necesare pentru Rhino Slider folosind următorul cod.

funcția wpq_frontend_styles () wp_register_style ('rhino-base', plugins_url ('css / rhinoslider-1.05.css', __FILE__)); wp_enqueue_style ("rhino-base");

În cele din urmă, trebuie să actualizăm constructorul de pluginuri pentru a adăuga acțiunile necesare pentru includerea scripturilor și a stilurilor, după cum este indicat în codul următor.

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

Totul este gata să integreze cursorul cu întrebări în codul scurt pe care l-am creat mai devreme. Să mergem mai departe.

Introducerea cursorului în codul scurt

În prezent, avem două comentarii în interiorul funcției de coduri scurte, menționând "Generarea HTML pentru întrebări" și "Embedding Slider". Aceste secțiuni trebuie să fie actualizate cu codul respectiv pentru a genera un cursor. Mai întâi trebuie să actualizăm in timp ce buclă după cum urmează.

în timp ce ($ query-> have_posts ()): $ query-> the_post (); $ question_id = get_the_ID (); $ question = The_title (",", FALSE) ". $ question_answers = json_decode (get_post_meta ($ question_id, '_question_answers', true)) $ questions_str.
  • „; $ questions_str. = '
    ". $ quiz_index. '". $ întrebare. '
    „; $ questions_str. = '
    „; $ quiestion_index = 1; foreach ($ question_answers ca $ cheie => valoare $) if ("! = $ valoare) $ questions_str. = $ quiestion_index." ". $ valoare. '
    „;  $ quiestion_index ++;  $ questions_str. = '
    • „; $ Quiz_index ++; endwhile;

    Cod Explicație

    Apoi trebuie să creați containerele pentru cursorul din secțiunea comentată ca "Embedding Slider". Următorul cod conține codul HTML pentru crearea containerelor.

    $ html. = '
      ". $ Questions_str; $ html. = '
    • Rezultate test 
      „; $ html. = '
      „; $ html. = '
    „;

    Vom folosi o listă neordonată numită cursor ca recipient pentru Rhino Slider. Inițial vom include setul de întrebări și răspunsuri generate în interiorul bucla, folosind $ questions_str. Acesta va conține o colecție de elemente de listă.

    Apoi trebuie să creați manual un alt element de listă pentru a afișa rezultatele testului și scorul.

    Acum sunt configurate toate datele și diapozitivele necesare pentru aplicația de test. Putem inițializa Rhino Slider în quiz.js pentru a vedea testul în acțiune.

    jQuery (document) .ready (functie ($) $ ('# slider').

    Am folosit câteva stiluri personalizate CSS pentru a îmbunătăți aspectul. Puteți găsi toate CSS modificate sub wp_quiz secțiunea din rhinoslider-1.05.css fişier. Acum ar trebui să aveți ceva asemănător imaginii următoare.

    Finalizarea testului și generarea rezultatelor

    Odată ce testul este încărcat, puteți utiliza comenzile de navigare pentru a vă deplasa între întrebări și selectați răspunsurile. Ar trebui să faceți clic pe butonul "Obțineți rezultate" după ce toate întrebările sunt răspunse. Acum trebuie să creăm rezultatele testului folosind o solicitare AJAX.

    Să implementăm codul jQuery pentru a face cererea AJAX.

    $ ("# completeQuiz") faceți clic pe (funcția () wpq_quiz_results ();); Var wpq_quiz_results = funcție () var select_answers = ; $ (this) .attr ("date-quiz-id"); var select_answer = $ (this) .find ('input [type = radio] : select_answer.length! = 0) var select_answer = $ (selected_answer) .val (); select_answers ["qid _" + question_id] = select_answer; altceva selected_answers ["qid _" + question_id] = ";); // Cerere AJAX;

    După ce faceți clic pe butonul "Obțineți rezultate", sunăm wpq_quiz_results funcția folosind jQuery. Fiecare întrebare a fost adăugată la cursorul cu o clasă specială CSS numită ques_answers.

    În timpul trecerii prin fiecare element cu ques_answers , vom prelua ID-ul întrebării utilizând atributul de date HTML numit date-test-id și butonul radio selectat utilizând jQuery.

    În final, atribuim toate întrebările și răspunsurile selectate într-un tabel numit selected_answers, pentru a fi transmise în cererea AJAX.

    Uitați-vă la următorul cod pentru implementarea solicitării AJAX.

    $ .post (quiz.ajaxURL, acțiune: "get_quiz_results", nonce: quiz.quizNonce, date: selected_answers,, funcția (data) // codul de gestionare a rezultatelor AJAX, "json");

    Mai întâi vom crea cererea AJAX utilizând datele de configurare atribuite de la wpq_frontend_scripts funcţie. Lista de răspunsuri generată în secțiunea anterioară va fi trimisă ca parametru de date. Înainte de a manipula rezultatul, trebuie să examinăm implementarea codului lateral al serverului în secțiunea următoare.

    Crearea unui handler AJAX pe partea de server

    Mai întâi trebuie să actualizăm constructorul cu acțiunile necesare pentru utilizarea AJAX atât pentru utilizatorii conectați, cât și pentru utilizatorii obișnuiți, așa cum se arată în codul următor.

    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'));

    Apoi putem trece la punerea în aplicare a get_quiz_results după cum se arată în codul următor.

    funcția get_quiz_results () $ score = 0; $ question_answers = $ _POST ["date"]; $ question_results = array (); foreach ($ question_answers ca $ ques_id => $ answer) $ question_id = trim (str_replace ('qid_', '$ ques_id)).', '; $ correct_answer = get_post_meta ($ question_id,' _question_correct_answer ', true); dacă $ answer == $ correct_answer) $ scor ++; $ question_results ["$ question_id"] = array ("answer" => $ answer, "correct_answer" => $ correct_answer, "mark" => "corect");  altfel $ question_results ["$ question_id"] = array ("answer" => $ answer, "correct_answer" => $ correct_answer, "mark" => "incorect"); $ total_questions = count ($ question_answers) ; $ quiz_result_data = array ("total_questions" => $ total_questions, "score" => scor $, "result" => $ question_results); echo json_encode ($ quiz_result_data);

    Cod Explicație

    Până acum, am creat solicitarea AJAX și am implementat răspunsul la server. În următoarea secțiune vom finaliza procesul de generare a rezultatelor testului prin gestionarea răspunsului AJAX.

    Manipularea datelor de răspuns AJAX

    În partea de tratare a răspunsului, avem câteva sarcini, inclusiv afișarea rezultatelor testului și a scorurilor. Deci, voi separa codul în câteva secțiuni pentru a clarifica explicația. Luați în considerare următorul cod care conține cererea AJAX completă.

    $ .post (quiz.ajaxURL, acțiune: 'get_quiz_results', nonce: quiz.quizNonce, date: selected_answers, funcția (data) // Secțiunea 1 var total_questions = date.total_questions; $ ('# slider'). date ('rhinoslider') următorul ($ ('rhino-item' + total_questions)); '„; result_html + = '„; var quiz_index = 1; $ .eu (date.result, function (key, ques) result_html + = '„; result_html + = '„; quiz_index ++; ); result_html + = '„; result_html + = '„; // Secțiunea 3 $ ('# quiz_result'). Părinte () .css ('overflow-y', 'scroll'); . $ ( '# Quiz_result') html (result_html); $ ( '# Timer') ascunde ().; , "json");
    Explicarea secțiunii 1
    În primul rând, preluăm întrebările totale ale testului din răspunsul primit de la server. Apoi vom folosi Următor → funcția de slider Rhino pentru a redirecționa utilizatorul la diapozitivul de rezultate. Apoi am setat scorul utilizatorului cu întrebările totale din interiorul lui #scor recipient.
    Explicația secțiunii 2
    Partea inițială a acestui cod generează tabelul HTML cu titlurile necesare pentru afișarea rezultatelor. Apoi atribuim întrebările la masă în jQuery fiecare buclă. Am folosit două imagini pentru a afișa starea de succes sau de eșec a întrebării.
    Explicarea secțiunii 3
    Inițial trebuie să permitem derularea în pagina cu rezultate, deoarece poate fi destul de lungă pentru chestionare cu un număr mare de întrebări. CSS overflow-y atribut este folosit pentru a permite derularea. În final, am setat tabelul cu rezultatele testului în #quiz_result și ascundeți temporizatorul, pe care îl vom implementa în secțiunea următoare.
    Odată ce testul este finalizat, ecranul dvs. ar trebui să arate ca ceva asemănător cu imaginea următoare.
    Crearea unui cronometru de test
    De obicei, orice examen sau test are un interval de timp predefinit. Așa că vom folosi durata pe care am configurat-o în pagina de setări a plugin-ului nostru pentru a genera cronometrul chestionarului. Am configurat deja cronometrul pentru a fi ascuns la încărcarea inițială a paginii și pentru a fi vizibil la trimiterea formularului, în codul scurt.
    Să ne concentrăm asupra timerului care se schimbă dinamic folosind codul jQuery așa cum se arată în cele ce urmează.
    var durata = quiz.quizDurație * 60; $ (document) .ready (funcția ($) setTimeout ("startPuzzleCount ()", 1000);); var startPuzzleCount = funcție () duration--; $ ('timer'). html (durata + "secunde rămase"); dacă (durata == '0') $ ('# timer') html ("Time Up"); wpq_quiz_results (); întoarcere;  setTimeout ("startPuzzleCount ()", 1000); ;
    Durata testului este extrasă utilizând matricea de configurare folosită wp_localize_script funcţie. Durata este apoi convertită în secunde prin înmulțirea cu 60.
    Atunci vom crea o setTimeout pentru a porni temporizatorul. În interiorul funcției, reducem durata prin 1 și a atribui #timer container. Când timpul ajunge la zero, numim wpq_quiz_results funcția de a finaliza automat testul și de a genera rezultatele.
    În cele din urmă, numim setTimeout funcționează recursiv pentru a actualiza timpul rămas. Am finalizat implementarea cronometrului și testul dvs. ar trebui să arate ca imaginea următoare cu cronometrul.
    Învelire
    De-a lungul acestei serii din două părți, am dezvoltat un plug-in simplu și complet de quiz pentru WordPress. Puteți extinde funcționalitatea acestui plugin pentru a corespunde cerințelor aplicației dvs. Vă sugerez să îmbunătățiți plugin-ul încercând următoarele:
    Permiteți-mi să vă cunosc sugestiile și cum merge cu procesul de extindere a pluginului.
    Așteptăm cu nerăbdare să auzim vești de la dumneavoastră.
    
	
    	
			
	   
	
    

    
Cod

    
	

    
			
    
							×

							
							
      

						
      

      ÎntrebareRăspunsRăspuns corectRezultat
      '+ quiz_index +''+ ques.answer +''+ ques.correct_answer +'