Integrarea chestionarelor multiple în WordPress - Crearea backend-ului

Întrebările cu răspunsuri multiple sunt ceva care majoritatea dintre noi s-au confruntat cel puțin o dată în viața noastră. Le iubim pentru că putem oferi răspunsuri corecte prin gândirea logică a posibilităților oferite, chiar dacă nu știm exact răspunsul corect. De asemenea, răspunsul durează mai puțin timp, ceea ce îl face atât de popular.

Crearea unui test quiz multiple în WordPress poate fi o sarcină foarte interesantă și profitabilă. Puteți să-l utilizați în blogul dvs. personal pentru a atrage mai mulți vizitatori sau puteți crea o secțiune premium cu ajutorul unor chestionare avansate sau puteți crea chestionare care se concentrează pe examene de certificare populare. Există numeroase posibilități pentru ao face rentabilă.

Acest plugin nu vă va duce la crearea de chestionare pentru a construi o afacere, dar trebuie să începem undeva să ajungem acolo unde vrem să mergem. Deci, acesta ar fi un început bun pentru crearea de chestionare și obținerea de profituri din aceasta.

Deci sa începem.


Funcționalitatea pluginului

Mai întâi trebuie să adunăm cerințele pluginului înainte de a începe proiectarea sau implementarea. Practic, ar trebui să fim capabili să creăm chestionare cu mai multe opțiuni și să le permitem utilizatorilor să ia chestionarele și să obțină rezultate.

Deci, să aruncăm o privire asupra cerințelor detaliate și a componentelor pluginului nostru:

  • Pluginul ar trebui să aibă un backend în care să putem introduce întrebări și răspunsuri dinamic. De asemenea, este ideal să aveți categorii de chestionare pentru a grupa chestionare în secțiuni specifice.
  • Administratorul site-ului trebuie să poată configura chestionarele printr-o pagină de setări.
  • Utilizatorii ar trebui să aibă un interfață în care să poată lua un test.
  • După terminarea testului, utilizatorii ar trebui să poată obține scorurile și rezultatele.

Acest tutorial va fi construit ca o serie de două părți, în care vom dezvolta backend-ul plugin-ului în prima parte, urmat de plugin-ul frontend în partea a doua.


Planificarea Backendului Plugin

În această parte ne vom concentra pe dezvoltarea backend-ului pluginului în care vom dezvolta datele necesare pentru chestionare.

De obicei, există o listă de chestionare, fiecare conținând o listă specifică de întrebări. Cu acest plugin nu vom crea chestionare. Vom crea întrebări individuale și le vom aloca dinamic la chestionare atunci când le vom cere.

Acum ne putem lua timp pentru a identifica componentele necesare pentru implementarea backend-ului așa cum este menționat în secțiunea următoare.

  • Întrebările trebuie create în backend cu răspunsurile. Un tip de post personalizat va fi cea mai bună soluție pentru implementarea întrebărilor. Deci, vom folosi un tip de post personalizat numit wptuts_quiz.
  • Fiecare întrebare ar trebui să aibă mai multe răspunsuri și un răspuns corect. Câmpurile pentru răspunsuri vor fi create într-o casetă meta din ecranul de creare a postului personalizat.
  • Întrebările vor fi clasificate în diverse sub-teme, de aceea avem nevoie de o taxonomie personalizată numită quiz_categories pentru wptuts_quiz post tip.
  • Apoi, trebuie să validăm procesul de creare a întrebărilor. Vom folosi validările jQuery de la client când este necesar în crearea de întrebări.
  • În cele din urmă avem nevoie de o pagină de setări a pluginului pentru a stoca numărul de întrebări pe test și durata unui test.

După identificarea componentelor necesare pentru WordPress, ne putem muta în mod direct în implementarea backend-ului plugin-ului quiz.


Crearea de întrebări

Procesul de creare a întrebărilor constă în patru secțiuni principale: definirea tipului postului personalizat, definirea taxonomiei personalizate, atribuirea câmpurilor personalizate și validări. Fiecare dintre aceste secțiuni va fi discutată cu cod detaliat în secțiunile viitoare.

1. Crearea tipului de mesaj personalizat pentru întrebări

Avem nevoie de cea mai elementară formă de tip post post customizat pentru întrebări fără configurații avansate. Singurul lucru pe care trebuie să-l luăm este alegerea domeniului potrivit pentru întrebare.

Ecranul implicit de creare a postului conține două câmpuri pentru titlu și conținut. Puteți alege oricare dintre acele câmpuri pentru această întrebare. Voi alege o concatenare a câmpurilor de titlu și a conținutului, având în vedere posibilitățile avansate.

Vom crea un plugin orientat pe obiecte în loc de un plugin funcțional, astfel încât toate acțiunile, codurile scurte și inițialele necesare vor fi făcute în interiorul constructorului. Următoarele conține codul pentru implementarea wptuts_quiz post tip.

 clasa WP_Quiz public $ plugin_url; funcția publică __construct () $ this-> plugin_url = plugin_dir_url (__FILE__); add_action ('init', array ($ this, 'wpq_add_custom_post_type'));  funcția publică wpq_add_custom_post_type () $ labels = array ('name' => _x ('Întrebări', 'wptuts_quiz'), 'menu_name' => _x ('Add New', 'wptuts_quiz'), 'add_new_item' => _x ('Add New Question', 'wptuts_quiz'), 'new_item' => _x ('Toate întrebările', 'wptuts_quiz'), 'edit_item' => _x (' '=> _x (' Întrebări de căutare ',' wptuts_quiz '),' not_found '=> _x (' Nu s-au găsit întrebări ',' wptuts_quiz ')); $ args = array ('labels' => etichete $, 'hierarchical' => true, 'description' => 'WP Tuts Quiz' => true, 'show_in_name' => true, 'show_in_nav_menus' => true, 'publicly_queryable' => true, 'exclude_from_search' => false, 'has_archive' => true, 'query_var' = > true, 'can_export' => adevărat, 'rewrite' => true, 'capability_type' => 'post'); register_post_type ('wptuts_quiz', $ args); 

Am activat atât câmpurile de titlu, cât și cele de editare în tipul postului personalizat pe care să îl folosiți pentru această întrebare. Deoarece funcțiile sunt situate în interiorul unei clase, trebuie să le folosim $ this în acțiunile noastre WordPress, filtre și coduri scurte pentru a apela funcțiile.

În afară de aceasta, toți parametrii menționați în cod sunt inițializați cu valorile lor implicite.

2. Crearea categoriilor de întrebări

Pentru a grupa întrebări în secțiuni specifice, avem nevoie de ceva similar cu categoriile implicite WordPress. Prin urmare, vom folosi o taxonomie personalizată numită quiz_categories. Trebuie să apelăm funcția de generare a taxonomiei personalizate pe init acțiune, așa cum am făcut-o mai devreme. Deci constructorul clasei plugin-ului trebuie actualizat cu următorul cod.

 add_action ('init', array ($ this, 'wpq_create_taxonomies'), 0);

Apoi putem implementa wpq_create_taxonomies funcția pe wptuts_quiz post post după cum se arată în codul următor.

 wpq_create_taxonomies () register_taxonomy ('quiz_categories', 'wptuts_quiz', array ('labels' => > "Categoria nouă de test"), 'show_ui' => true, 'show_tagcloud' => false, 'hierarchical' => true)); 

Am folosit parametrii opțiunii implicite pentru a crea această taxonomie particularizată. Odată ce plugin-ul este activat, tipul dvs. de post personalizat și taxonomia vor fi afișate așa cum se arată în ecranul următor.

3. Crearea răspunsurilor la întrebări

Apoi, trebuie să creăm răspunsuri multiple pentru fiecare întrebare. În acest plugin, numărul maxim de răspunsuri pentru o singură întrebare va fi limitat la cinci.

Puteți atribui dinamic 1-5 răspunsuri pentru orice întrebare. De asemenea, trebuie să specificăm răspunsul corect din lista furnizată de răspunsuri. Deoarece aceste date sunt asociate întrebărilor noastre, putem folosi o casetă meta cu câmpuri personalizate pentru a genera câmpurile necesare.

Ca de obicei, trebuie să actualizăm constructorul cu următorul cod:

 add_action ('add_meta_boxes', array ($ this, 'wpq_quiz_meta_boxes'));

Luați în considerare următorul cod pentru implementarea câmpurilor de meta cu câmpuri de răspunsuri.

 funcția wpq_quiz_meta_boxes () add_meta_box ('quiz-answers-info', 'Quiz Answers Info', array ($ this, 'wpq_quiz_answers_info'), 'wptuts_quiz', 'normal', 'high');  funcția wpq_quiz_answers_info () global $ post; $ question_answers = get_post_meta ($ post-> ID, '_question_answers', adevărat); $ 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. = '„; $ index = 1; foreach ($ question_answers ca $ question_answer) $ html. = '„; $ html. = '„; indicele $ ++;  $ html. = '„; $ html. = '
„; echo $ html;

4. Cod Explicație

  • Răspunsurile din fiecare întrebare vor fi stocate într - un șir JSON codificat în post_meta masa cu cheia _question_answers. Așa că accesăm acest câmp folosind get_post_meta pentru a obține valorile curente.
  • Apoi primim răspunsul corect al întrebării folosind o metodă similară. Răspunsul corect va fi stocat ca șir în post_meta masa cu cheia _question_correct_answer.
  • În cele din urmă, vom crea formularul HTML, care conține răspunsul corect ca o rubrică drop-down și răspunsurile posibile în cinci câmpuri de zonă text.
  • Toate valorile existente recuperate utilizând get_post_meta vor fi alocate câmpurilor respective.

Ar trebui să vedeți ceva similar cu următorul ecran, odată ce creați caseta meta.

Acum avem toate datele necesare pentru plug-in-ul nostru de generare de chestionare. Următorul pas este salvarea datelor de întrebare în baza de date.

Dar avem nevoie de unele validări înainte de asta. Deci, să trecem la validări.


Validarea creării de întrebări

Nu avem reguli complexe de validare în acest stadiu în procesul de creare a întrebărilor. Prin urmare, vom folosi validările jQuery de la client înainte de trimitere.

Avem nevoie de asta admin_enqueue_scripts acțiune care trebuie inclusă în constructorul pluginului nostru.

Prin urmare, actualizați constructorul cu următorul cod înainte de a începe.

 add_action ('admin_enqueue_scripts', array ($ this, 'wpq_admin_scripts'));

Acum, uita-te la următorul cod pentru a include fișierele de script necesare pentru validare.

 funcția wpq_admin_scripts () wp_register_script ('quiz-admin', plugins_url ('js / quiz.js', __FILE__), array ('jquery')); wp_enqueue_script ("quiz-admin"); 

Utilizarea wp_register_script și wp_enqueue_script, avem un fișier JS specific plugin-ului numit quiz.js pentru gestionarea validărilor. Validarea se va face folosind biblioteca jQuery și, prin urmare, am setat biblioteca jQuery încorporată ca o dependență pentru plugin-ul JavaScript specific.

După includerea scripturilor, să implementăm validările reale în quiz.js fișier așa cum se arată în codul următor.

 jQuery (document) .ready (funcția ($) $ ("# post-body-content") prepend ('
„); $ ('# post_type ") val () ==' wptuts_quiz ') returnați wpq_validate_quizes ();); );

Mai întâi, atribuim un gol div element pentru a afișa eventualele erori. Apoi putem apela o functie personalizata JS in actiunea post publishing prin verificarea tipului postului corect folosind #post_type valoarea câmpului ascuns.

Următorul cod conține implementarea wpq_validate_quizes funcţie.

 var wpq_validate_quizes = funcția () var err = 0; $ ( "# Quiz_error") html ( "").; $ ( "# Quiz_error") ascunde ().; dacă ($ ("title") val () == ") $ (" # quiz_error "

Introduceți titlul întrebării.

"); err ++; var corect_answer = $ (" # core_answer "); val (); adăuga("

Răspunsul corect nu poate fi gol.

"); err ++; dacă (err> 0) $ (" # publish "). ) .show (); return false; else return true;;

Cod Explicație

  • Mai întâi trebuie să ascundem containerul de eroare și să ne fixăm mesajul de eroare curent.
  • Apoi verificăm dacă titlul există, deoarece titlul este obligatoriu pentru întrebări.
  • Apoi primim răspunsul corect selectat și verificăm dacă câmpul de răspuns legat de răspunsul corect este gol.
  • Când se generează erori de validare, afișăm erorile din containerul de eroare specificat și împiedică trimiterea postării.

Următoarea imagine prezintă ecranul de creație post cu mesaje de validare personalizate.

Odată ce formularul este validat cu succes fără erori, putem trece la salvarea detaliilor de întrebare în baza de date.


Salvarea detaliilor întrebării

WordPress oferă o acțiune numită save_post, care vor fi executate imediat după crearea postului. Putem defini o funcție personalizată pe save_post acțiune pentru a salva detaliile câmpului particularizat în baza de date.

Actualmente actualizați constructorul cu save_post cod de acțiune.

 add_action ('save_post', array ($ this, 'wpq_save_quizes'));

Implementarea sistemului wpq_save_quizes funcția este dată în următorul cod.

 funcția wpq_save_quizes ($ post_id) if (! wp_verify_nonce ($ _POST ['question_box_nonce'], numele de bază (__FILE__))) return $ post_id;  dacă (definit ('DOING_AUTOSAVE') && DOING_AUTOSAVE) return $ post_id;  dacă ('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 ca $ răspuns) array_push ($ filtered_answers, sanitize_text_field (trim ($ answer)));  $ question_answers = json_encode ($ filtered_answers); $ correct_answer = isset ($ _POST ['corect_answer'])? sanitize_text_field ($ _POST ['corect_answer']): ""; update_post_meta ($ post_id, "_question_answers", $ question_answers); update_post_meta ($ post_id, "_question_correct_answer", $ correct_answer);  altceva return $ post_id; 

ID-ul postului este transmis automat acestei funcții. Inițial, executăm validări pentru valoarea nonce și salvarea automată. Cel mai important lucru înainte de salvare este validarea tipului de post.

Dacă omiteți verificarea tipului de post, acest cod va fi executat pentru toate tipurile de posturi din instalarea dvs. WordPress, inclusiv posturile normale, ceea ce poate duce la date inconsistente.

În cele din urmă, vom obține valorile câmpurilor noastre de răspuns și câmpul de răspuns corect pentru a fi salvate în baza de date folosind update_post_meta funcţie. Toate detaliile câmpurilor personalizate vor fi salvate în post_meta masa.

Acum am finalizat procesul de creare a întrebărilor. Deoarece utilizăm chestionare generate aleatoriu, este posibil să aveți nevoie de o mulțime de întrebări pentru a vedea acest plugin în acțiune. Așa că pregătește-te prin adăugarea de întrebări suplimentare înainte de a pune în aplicare testul în partea următoare.


Setarea paginii de setări

Chiar dacă nu este obligatorie, este ideal să avem o pagină de setări pentru pluginul nostru, astfel încât administratorul să poată personaliza în funcție de preferințele lor.

Deci, să punem în aplicare o pagină de setări simple pentru a conține durata testului și numărul de întrebări pe test. Trebuie să punem în aplicare admin_menu acțiune în constructor.

 add_action ('admin_menu', array ($ this, 'wpq_plugin_settings'));
 funcția wpq_plugin_settings () // a crea un nou meniu de nivel superior add_menu_page ('WPTuts Quiz Settings', 'WPTuts Quiz Settings', 'administrator', 'quiz_settings', array ($ this, 'wpq_display_settings'));  funcția wpq_display_settings () $ html = '

Selectați Setările

". wp_nonce_field ("opțiuni de actualizare"). '

„; echo $ html;

Putem folosi add_menu_page pentru a adăuga o pagină de setări în zona de administrare. wpq_display_settings funcția este utilizată pentru a implementa elementele de afișare ale paginii de setări.

Am folosit două câmpuri de text pentru durata și întrebările pentru chestionare. Trimiterea formularului și salvarea datelor pot fi gestionate manual folosind codul personalizat, dar WordPress ne oferă o metodă simplificată pentru actualizarea opțiunilor.

În această metodă trebuie să setați acțiunea formei la options.php fişier. Apoi trebuie să creați un câmp ascuns numit acțiune pentru a conține valoarea "Actualizați“. În cele din urmă trebuie să avem un alt câmp ascuns numit page_options pentru a conține numele celor două câmpuri de text care urmează să fie actualizate.

Asigurați-vă că utilizați aceste tehnici de actualizare a opțiunilor încorporate în scenarii în care cerințele pentru salvarea câmpurilor nu sunt complexe.

După ce se face clic pe butonul de trimitere, detaliile formularului vor fi actualizate automat fără niciun cod personalizat.


Ce urmeaza

Am finalizat backend-ul plugin-ului quiz. Acum puteți crea întrebări și pregătiți-vă pentru următoarea parte în care vom folosi aceste întrebări pentru a genera dinamic chestionare.

Până atunci, anunțați-mă cât este de bine să implementați un test dinamic pe interfață. Rețineți că va fi afișată o singură întrebare simultan. Când utilizatorul solicită o întrebare, el poate trece la următoarea întrebare.

Așteaptă cu nerăbdare sugestiile dvs..

Cod