Share
Meerkeuzevragen zijn iets dat de meesten van ons minstens een keer in ons leven hebben meegemaakt. We houden van ze omdat we correcte antwoorden kunnen geven door logisch na te denken over de geboden mogelijkheden, zelfs als we niet precies het juiste antwoord kennen. Ook beantwoorden kost minder tijd, waardoor het zo populair is.
Het maken van een meerkeuzevragenquiz in WordPress kan een zeer opwindende en winstgevende taak zijn. Je kunt het in je persoonlijke blog gebruiken om meer bezoekers aan te trekken, of je kunt een premium gedeelte maken met geavanceerde quizzen, of je kunt quizzen maken die gericht zijn op populaire certificeringsexamens. Er zijn talloze mogelijkheden om het rendabel te maken.
Deze plugin neemt je niet mee naar het maken van quizzen voor het bouwen van een bedrijf, maar we moeten ergens beginnen om te komen waar we willen gaan. Dus dit zou een goed begin zijn voor het maken van quizzen en er winst mee maken.
Dus laten we beginnen.
Eerst moeten we de vereisten van de plug-in verzamelen voordat we gaan ontwerpen of implementeren. Kortom, we zouden in staat moeten zijn multiple choice quizzen te maken en gebruikers in staat te stellen de quizzen af te leggen en resultaten te krijgen.
Laten we daarom eens kijken naar de gedetailleerde vereisten en componenten van onze plug-in:
Deze tutorial zal worden geconstrueerd als een tweedelige serie, waarin we de backend van de plugin in het eerste deel ontwikkelen, gevolgd door de plugin frontend in het tweede deel.
In dit deel gaan we ons richten op het ontwikkelen van de back-end van de plug-in, waar we de vereiste gegevens voor quizzen ontwikkelen.
Meestal is er een lijst met quizzen, elk met een specifieke lijst met vragen. Met deze plugin gaan we geen quizzen maken. We zullen individuele vragen stellen en deze op verzoek dynamisch toewijzen aan quizzen.
Nu kunnen we de tijd nemen om de componenten te identificeren die nodig zijn voor het implementeren van de backend, zoals vermeld in de volgende sectie.
Accentsconagua
wptuts_quiz.quiz_categories voor de wptuts_quiz berichttype.Nadat we de benodigde WordPress-componenten hebben geïdentificeerd, kunnen we direct de back-end van de quiz-plug-in implementeren.
Het proces voor het maken van de vraag bestaat uit vier hoofdgedeelten: het definiëren van aangepast berichttype, het definiëren van aangepaste taxonomie, het toewijzen van aangepaste velden en validaties. Elk van deze secties zal worden besproken met gedetailleerde code in de komende paragrafen.
We hebben de meest basale vorm van aangepast berichttype nodig voor vragen zonder geavanceerde configuraties. Het enige dat we moeten overwegen, is de selectie van het juiste veld voor de vraag.
Het standaard bericht-aanmaakscherm bevat twee velden voor titel en inhoud. U kunt een van die velden voor de vraag kiezen. Ik ga de aaneenschakeling van titel- en inhoudsvelden kiezen, rekening houdend met geavanceerde mogelijkheden.
We zullen een object-georiënteerde plugin maken in plaats van een functionele plug-in, dus alle noodzakelijke acties, shortcodes en initialisaties zullen in de constructor worden uitgevoerd. Het volgende bevat de code voor het implementeren van de wptuts_quiz berichttype.
class WP_Quiz public $ plugin_url; publieke functie __construct () $ this-> plugin_url = plugin_dir_url (__FILE__); add_action ('init', array ($ this, 'wpq_add_custom_post_type')); openbare functie wpq_add_custom_post_type () $ labels = array ('name' => _x ('Questions', 'wptuts_quiz'), 'menu_name' => _x ('WPTuts Quiz', 'wptuts_quiz'), 'add_new' => _x ('Nieuw toevoegen', 'wptuts_quiz'), 'add_new_item' => _x ('Nieuwe vraag toevoegen', 'wptuts_quiz'), 'new_item' => _x ('Nieuwe vraag', 'wptuts_quiz'), 'all_items' => _x ('Alle vragen', 'wptuts_quiz'), 'edit_item' => _x ('Bewerk vraag', 'wptuts_quiz'), 'view_item' => _x ('Vraag bekijken', 'wptuts_quiz'), 'search_items '=> _x (' Zoekvragen ',' wptuts_quiz '),' not_found '=> _x (' Geen vragen gevonden ',' 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, 'publicly_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); We hebben zowel de titel- als de bewerkingsvelden in het aangepaste berichttype ingeschakeld voor de vraag. Omdat de functies zich binnen een klasse bevinden, moeten we deze gebruiken $ this in onze WordPress-acties, filters en shortcodes om de functies te bellen.
Afgezien van dat alle parameters die worden genoemd in de code worden geïnitialiseerd met hun standaardwaarden.
Om vragen in specifieke secties te groeperen, hebben we iets nodig dat vergelijkbaar is met standaard WordPress-categorieën. Daarom gebruiken we een aangepaste taxonomie genaamd quiz_categories. We moeten de functie voor het genereren van aangepaste taxonomieën op de in het actie zoals we eerder deden. Dus de constructor van onze plugin-klasse moet worden bijgewerkt met de volgende code.
add_action ('init', array ($ this, 'wpq_create_taxonomies'), 0); Dan kunnen we het wpq_create_taxonomies functie op de wptuts_quiz berichttype zoals weergegeven in de volgende code.
functie wpq_create_taxonomies () register_taxonomy ('quiz_categories', 'wptuts_quiz', array ('labels' => array ('name' => 'Quiz Category', 'add_new_item' => 'Voeg nieuwe quizcategorie toe', 'new_item_name' = > "New Quiz Category"), 'show_ui' => true, 'show_tagcloud' => false, 'hierarchical' => true)); Ik heb de standaardoptieparameters gebruikt om deze aangepaste taxonomie te maken. Zodra de plug-in is geactiveerd, wordt uw aangepaste berichttype en taxonomie weergegeven zoals in het volgende scherm.
Vervolgens moeten we voor elke vraag meerdere antwoorden maken. In deze plug-in is het maximale aantal antwoorden per vraag beperkt tot vijf.
U kunt op dynamische wijze 1-5 antwoorden toewijzen voor elke vraag. We moeten ook het juiste antwoord opgeven uit de gegeven lijst met antwoorden. Omdat deze gegevens aan onze vragen zijn gekoppeld, kunnen we een metabox met aangepaste velden gebruiken om de benodigde velden te genereren.
Zoals gewoonlijk moeten we de constructor bijwerken met de volgende code:
add_action ('add_meta_boxes', array ($ this, 'wpq_quiz_meta_boxes')); Beschouw de volgende code voor de implementatie van metaboxen met antwoordvelden.
functie wpq_quiz_meta_boxes () add_meta_box ('quiz-antwoorden-info', 'Quiz Antwoorden 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 tafel met de sleutel _question_answers. Dus we benaderen dit veld met behulp van de get_post_meta functie om de huidige waarden te krijgen.post_meta tafel met de sleutel _question_correct_answer.get_post_meta functie wordt toegewezen aan de respectieve velden.Je zou iets soortgelijks als het volgende scherm moeten zien, zodra je de metabox hebt gemaakt.
Nu hebben we alle gegevens die nodig zijn voor onze plug-in voor het genereren van quizs. De volgende stap is om de vraaggegevens in de database op te slaan.
Maar daarvoor hebben we enkele validaties nodig. Laten we daarom naar validaties gaan.
We hebben geen complexe validatieregels in deze fase van het proces voor het maken van vragen. Daarom gaan we jQuery-validaties aan clientzijde gebruiken voordat deze worden ingediend.
Hier hebben we de admin_enqueue_scripts actie die moet worden opgenomen in de constructor van onze plug-in.
Dus update de constructor met de volgende code voordat we aan de slag gaan.
add_action ('admin_enqueue_scripts', array ($ this, 'wpq_admin_scripts')); Bekijk nu de volgende code voor het opnemen van noodzakelijke scriptbestanden voor validatie.
function wpq_admin_scripts () wp_register_script ('quiz-admin', plugins_url ('js / quiz.js', __FILE__), array ('jQuery')); wp_enqueue_script ('quiz-admin'); Gebruik makend van wp_register_script en wp_enqueue_script, we hebben een plug-in-specifiek JS-bestand genaamd quiz.js voor het afhandelen van validaties. Validatie zal worden gedaan met behulp van de jQuery-bibliotheek en daarom hebben we de ingebouwde jQuery-bibliotheek ingesteld als afhankelijkheid van ons plug-in-specifiek JavaScript.
Na de scripts te hebben toegevoegd, laten we de daadwerkelijke validaties implementeren in de quiz.js bestand zoals weergegeven in de volgende code.
jQuery (document) .ready (function ($) $ ("# post-body-content"). prepend (''); $ ('# post'). submit (function () if ($ ("# post_type"). val () == 'wptuts_quiz') return wpq_validate_quizes ();); ); Eerst wijzen we een leeg toe div element in het scherm voor het maken van berichten om eventuele fouten weer te geven. Dan kunnen we een aangepaste JS-functie op de actie voor publiceren na publicatie bellen door het juiste berichttype te controleren met behulp van de #post_type verborgen veldwaarde.
De volgende code bevat de implementatie van de wpq_validate_quizes functie.
var wpq_validate_quizes = function () var err = 0; $ ( "# Quiz_error") html ( ""); $ ( "# Quiz_error") te verbergen ().; if ($ ("# title"). val () == ") $ (" # quiz_error "). append ("Voer de vraag titel in.
"); err ++; var correct_gebruiker = $ (" # correct_antwoord "). val (); if ($ (" # quiz_answer "+ correct_antwoord) .val () ==" ") $ (" # quiz_error "). toevoegen ("Het juiste antwoord kan niet leeg zijn.
"); err ++; if (err> 0) $ (" # publish "). removeClass (" button-primary-disabled "); $ (". spinner "). hide (); $ (" # quiz_error " ) .show (); return false; else return true;; De volgende afbeelding toont het venster voor het maken van berichten met aangepaste validatieberichten.
Nadat het formulier zonder fouten is gevalideerd, kunnen we verder gaan met het opslaan van de vraagdetails in de database.
WordPress biedt een actie genaamd save_post, die net na het maken van de post zal worden uitgevoerd. We kunnen een aangepaste functie definiëren op de save_post actie om de details van het aangepaste veld op te slaan in de database.
Zoals gewoonlijk update de constructor met de save_post actiecode.
add_action ('save_post', array ($ this, 'wpq_save_quizes')); Implementatie van de wpq_save_quizes functie wordt gegeven in de volgende code.
functie wpq_save_quizes ($ post_id) if (! wp_verify_nonce ($ _POST ['question_box_nonce'], basename (__FILE__))) return $ post_id; if (defined ('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 als $ answer) array_push ($ filtered_answers, sanitize_text_field (trim ($ answer))); $ question_answers = json_encode ($ filtered_answers); $ correct_answer = isset ($ _POST ['correct_antwoord'])? sanitize_text_field ($ _POST ['correct_enwer']): ""; update_post_meta ($ post_id, "_question_answers", $ question_answers); update_post_meta ($ post_id, "_question_correct_answer", $ correct_answer); else return $ post_id; De bericht-ID wordt automatisch doorgegeven aan deze functie. In eerste instantie voeren we validaties uit voor nonce value en autosave. Het belangrijkste voor het opslaan is de validatie van het berichttype.
Als u de posttypecontrole weglaat, wordt deze code uitgevoerd voor alle berichttypen in uw WordPress-installatie inclusief normale berichten, wat kan resulteren in inconsistente gegevens.
Uiteindelijk krijgen we de waarden van onze antwoordenvelden en het juiste antwoordveld opgeslagen in de database met behulp van de update_post_meta functie. Alle details van de aangepaste velden worden opgeslagen in de post_meta tafel.
Nu hebben we het proces voor het maken van de vraag voltooid. Omdat we willekeurig gegenereerde quizzen gebruiken, hebt u mogelijk veel vragen nodig om deze plug-in in actie te zien. Dus maak je klaar door aanvullende vragen toe te voegen voordat we de quiz in het volgende deel implementeren.
Hoewel het niet verplicht is, is het ideaal om een instellingenpagina voor onze plug-in te hebben, zodat de beheerder deze kan aanpassen aan hun voorkeuren.
Laten we daarom een eenvoudige instellingenpagina implementeren om de quizduur en het aantal vragen per quiz te bevatten. We moeten het ADMIN_MENU actie in de constructor.
add_action ('admin_menu', array ($ this, 'wpq_plugin_settings')); functie wpq_plugin_settings () // nieuw nieuw hoofdmenu maken add_menu_page ('WPTuts Quiz Settings', 'WPTuts Quiz Settings', 'administrator', 'quiz_settings', array ($ this, 'wpq_display_settings')); function wpq_display_settings () $ html = ' '; echo $ html; We kunnen de gebruiken add_menu_page functie om een instellingenpagina toe te voegen aan het admin-gebied. De wpq_display_settings functie wordt gebruikt om de weergave-elementen van de instellingenpagina te implementeren.
We hebben twee tekstvelden gebruikt voor de duur en vragen per quiz. Het indienen van formulieren en het opslaan van gegevens kunnen handmatig worden verwerkt met behulp van aangepaste code, maar WordPress biedt ons een vereenvoudigde methode voor het bijwerken van opties.
In deze methode moet je de formulieractie instellen op de options.php het dossier. Vervolgens moet u een verborgen veld met de naam actie maken om de waarde van 'bijwerken'. Eindelijk moeten we nog een ander verborgen veld hebben page_options om de namen van de twee tekstvelden te bevatten die moeten worden bijgewerkt.
Zorg ervoor dat u deze ingebouwde opties-updatetechnieken gebruikt in scenario's waarin de vereisten voor het opslaan van de velden niet ingewikkeld zijn.
Nadat op de knop Verzenden is geklikt, worden formuliergegevens automatisch bijgewerkt zonder aangepaste code.
We hebben de back-end van onze quiz-plug-in voltooid. Nu kunt u vragen stellen en u voorbereiden op het volgende deel waar we deze vragen zullen gebruiken om quizzen dynamisch te genereren.
Laat me tot die tijd weten wat de beste manier is om een dynamische quiz op de frontend te implementeren. Houd er rekening mee dat er slechts één vraag tegelijkertijd wordt weergegeven. Wanneer de gebruiker een vraag opvraagt, kan hij naar de volgende vraag gaan.
Vooruitblikkend naar uw suggesties.
