Î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.
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:
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.
Î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.
wptuts_quiz
.quiz_categories
pentru wptuts_quiz
post tip.După identificarea componentelor necesare pentru WordPress, ne putem muta în mod direct în implementarea backend-ului plugin-ului quiz.
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.
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.
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.
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. = ' |
---|
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.post_meta
masa cu cheia _question_correct_answer
.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.
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;;
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.
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.
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 = '„; 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.
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..