Accentsconagua

Integrera flera valmöjligheter i WordPress Skapa frontänden

Koda
Share

Det här är den andra delen av serien om att utveckla en multipelvalsquiz-plugin för WordPress. I första delen skapade vi backenden av vårt plugin för att fånga nödvändiga data för att lagra i databasen.

I den här sista delen skapar vi pluginens främre del där användarna kan ta frågesport och utvärdera deras kunskaper.

Följande ämnen kommer att omfattas av denna del av att fylla i vårt plugin:

  • Skapa en kortnummer för att visa en quiz
  • Integrera en jQuery-reglage för att visa frågor och navigering
  • Slutför en quiz och generera resultat
  • Skapa en Quiz Timer

Vi behöver en stor mängd frågor i backend för att skapa slumpmässiga frågesporter. Jag hoppas att du redan arbetat med backend och lagrade tillräckligt med frågor för frågesport.

Så låt oss börja.

Skapa en kortnummer för att visa en quiz

Först bör vi ha ett inlägg eller en sida som laddar quizens visningselement. Detta kan uppnås genom att använda antingen en kortkod eller sidmall. I denna plugin används en kortnummer för att göra den oberoende av temat.

Kortkoder låter oss använda plugin som en självständig komponent medan sidmallar beror på temat. Å andra sidan är en sidmall mycket säkrare än kortnummer, eftersom det finns möjlighet att ta bort kortnummer på sidorna av misstag.

Ursprungligen bör kortkoden mata ut de tillgängliga frågesportkategorierna så att användarna kan välja en kategori för att skapa frågesporten. En kortnummer läggs till i konstruktören med hjälp av add_shortcode funktion som anges i följande kod.

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

Låt oss nu titta på implementeringen för kortkoden genom att hämta tillgängliga frågekategorier från databasen.

funktion wpq_show_quiz ($ atts) global $ post; $ html = '
'; $ html. = '
'; $ html. = '
'; $ html. = ''; $ html. = '
'; $ html. = ''; $ html. = '
'; // Genomförande av formulärinsändning // Visa quizen som oordnad lista returnera $ html;

Vår kortnummer kommer att generera HTML-formuläret och nödvändiga kontroller som används för quiz. Vi hämtar listan över tillgängliga frågesportskategorier i ett nedrullningsfält för att låta användaren välja önskad kategori. Vi kan använda get_terms fungera med hide_empty = 1 för att få frågesportkategorierna som har minst en fråga.

Ett dolt fält kallas wpq_action används för att kontrollera $ _POST värden efter inlämnandet.

När du har satt in kortkoden i en sida eller ett inlägg ser utmatningen ut som följande skärm.

Nu kan användaren välja en quizkategori och skicka in formuläret för att få quiz. Så vi ska hantera formulärinsökningen inuti en shorcode för att få den valda kategorin och hämta slumpmässiga frågor för frågesporter.

Följande kod innehåller genomförandet av att hämta frågor från en vald kategori.

$ questions_str = ""; om 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' => 'publicera', 'posts_per_page' => $ quiz_num); $ query = nytt WP_Query ($ args); $ quiz_index = 1; medan ($ query-> has_posts ()): $ query-> the_post (); // Generera HTML för frågor ibland; wp_reset_query (); // Embedding Slider annars $ html. = '
'; $ html. = '
';

Den angivna koden ska ingå i Genomförande av formulärinsändning delen av föregående kod.

När formuläret skickats kontrollerar vi om formuläret innehåller den nödvändiga åtgärden med det dolda fältet vi genererade tidigare. Då får vi den valda quizkategorin från $ _POST array.

Då frågar vi databasen för wptuts_quiz inlägg med den valda quizkategorin.

Det är viktigt att ställa in sortera efter som rand att generera slumpmässiga frågor för frågesporter, vilket annars kommer att generera samma uppsättning frågor varje gång. Se också till att ställa in posts_per_page för att ställa in det maximala antalet frågor per valfri frågesport.

När resultaten alstras måste vi lägga till frågorna i de nödvändiga HTML-elementen och vi kommer att implementera det i nästa avsnitt.

Integrera en jQuery-reglage för att visa frågor och navigering

Quizzer kan genereras som en skärm som innehåller alla frågor på en gång, eller skärm som innehåller en fråga i taget med navigeringskontroller. Jag tror att den senare tekniken är favorit bland de flesta. Därför kommer vi att visa denna frågesport med en enda fråga och navigering för att gå vidare till tidigare och nästa frågor.

Att generera denna funktionalitet från grunden kan vara en tidskrävande uppgift samt att återuppfinna hjulet. En jQuery-reglaget är den perfekta lösningen för den här situationen och jag använder RhinoSlider, eftersom det är min favorit, så ta en kopia.

Inne i den nedladdade mappen ser du tre mappar som heter img, js, och css. Kopiera img och css mappar i vårt plugin och kopiera filerna inuti js mapp till befintliga js mapp vi har på vår quiz plugin. Nu kan vi komma igång med att inkludera nödvändiga skript och stilar för reglaget.

Inklusive Frontend Scripts

I första delen skapade vi nödvändiga skript för backend. I den här delen kommer vi att inkludera nödvändiga skript för RhinoSlider samt quiz.js för anpassad funktionalitet.

För större applikationer kan vi använda separata skriptfiler för både frontend och backend. Jag använder en skriptfil för att göra saker enklare.

Tänk på följande kod för att inkludera skript och nödvändiga konfigurationsdata.

funktion 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 = (! tom ($ 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);

Här har vi tre JavaScript-filer som används för RhinoSlider och quiz.js fil för anpassad funktionalitet. I den föregående delen konfigurerade vi frågans varaktighet. Vi kan hämta varaktigheten med hjälp av get_option funktionen och tilldela den till $ config array. Vi måste också inkludera vanliga konfigurationer i config-arrayen.

Slutligen kan vi använda wp_localize_script funktion för att tilldela config data i quiz.js fil.

Inklusive Frontend Styles

På samma sätt kan vi inkludera CSS-filerna som krävs för Rhino Slider med följande kod.

funktion wpq_frontend_styles () wp_register_style ("rhino-bas", plugins_url ('css / rhinoslider-1.05.css', __FILE__)); wp_enqueue_style ("rhino-bas");

Slutligen måste vi uppdatera pluginkonstruktorn för att lägga till nödvändiga åtgärder för att inkludera skript och format som anges i följande kod.

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

Allt är klart för att integrera skjutreglaget med frågor i den kortnummer vi skapade tidigare. Låt oss gå framåt.

Inbäddning av skjutreglaget i kortnummeret

Vi har för närvarande två kommentarer inom kortkodsfunktionen, med namnet "Generering av HTML för frågor" och "Inbäddning av slider". De sektionerna måste uppdateras med respektive kod för att generera en reglage. Först måste vi uppdatera medan slinga enligt följande.

medan ($ query-> has_posts ()): $ query-> the_post (); $ question_id = get_the_ID (); $ question = the_title (",", FALSE). ". få_the_content (); $ question_answers = json_decode (get_post_meta ($ question_id, '_question_answers', true)); $ questions_str. = '
  • '; $ questions_str. = '
    '. $ quiz_index. ''. $ fråga. '
    '; $ questions_str. = '
    '; $ quiestion_index = 1; foreach ($ question_answers som $ key => $ värde) if ("! = $ value) $ questions_str. = $ quiestion_index. ' '. $ värde. '
    ';  $ quiestion_index ++;  $ questions_str. = '
    • '; $ Quiz_index ++; EndWhile;

    Kodförklaring

    Nästa måste vi skapa behållarna för skjutreglaget i avsnittet kommenterat som "Inbäddning av slider". Följande kod innehåller HTML-koden för att skapa containrar.

    $ html. = '
      '. $ Questions_str; $ html. = '
    • Quizresultat 
      '; $ html. = '
      '; $ html. = '
    ';

    Vi kommer att använda en oordnad lista som heter reglaget som behållare för Rhino Slider. Initialt inkluderar vi uppsättningen frågor och svar som genereras inuti slingan, med hjälp av $ questions_str. Det kommer att innehålla en samling av listobjekt.

    Då måste vi manuellt skapa ett annat listobjekt för att visa resultatet av quiz och poängen.

    Nu är alla data och diabilder som krävs för quiz-applikationen konfigurerad. Vi kan initiera Rhino Slider i quiz.js att se quizen i aktion.

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

    Jag har använt vissa anpassade CSS-stilar för att förbättra utseendet och känslan. Du hittar alla ändrade CSS under wp_quiz del av rhinoslider-1.05.css fil. Nu borde du ha något som följande bild.

    Slutför Quiz och generera resultat

    När frågeställningen är laddad kan du använda navigeringskontrollerna för att flytta mellan frågor och välja svaren. Du borde klicka på knappen "Få resultat" när alla frågor är besvarade. Nu behöver vi skapa frågesportresultaten med en AJAX-förfrågan.

    Låt oss implementera jQuery-koden för att göra AJAX-förfrågan.

    $ ("# completeQuiz"). klicka (funktion () wpq_quiz_results ();); var wpq_quiz_results = funktion () var selected_answers = ; $ ("ques_answers"). Var (funktion () var question_id = $ (this) .attr ("data-quiz-id"); var selected_answer = $ (this) .find ('inmatning [typ = radio] : checked)) if (selected_answer.length! = 0) var selected_answer = $ (selected_answer) .val (); selected_answers ["qid _" + question_id] = selected_answer; annat selected_answers ["qid _" + question_id] = ";); // AJAX-förfrågan;

    När "Get Results" -knappen är klickad kallar vi wpq_quiz_results funktionen med jQuery. Varje fråga har lagts till glidreglaget med en särskild CSS-klass som heter ques_answers.

    När du går igenom varje element med ques_answers klass, hämtar vi fråge-idet med hjälp av det HTML-attribut som heter data frågesport-id och den valda radioknappen med jQuery.

    Slutligen tilldelar vi alla frågor och de valda svaren till en upptagen grupp selected_answers, att skickas till AJAX-förfrågan.

    Ta en titt på följande kod för genomförandet av AJAX-förfrågan.

    $ .post (quiz.ajaxURL, action: "get_quiz_results", nonce: quiz.quizNonce, data: selected_answers,, funktion (data) // AJAX resultathanteringskod, "json");

    Först skapar vi AJAX-förfrågan med hjälp av konfigurationsdata som tilldelats från wpq_frontend_scripts fungera. Svarlistan som genererats i föregående avsnitt skickas som dataparameter. Innan vi hanterar resultatet måste vi titta på implementeringen av serverns sidkod i följande avsnitt.

    Skapa en AJAX Handler på serversidan

    Först måste vi uppdatera konstruktören med de åtgärder som krävs för att använda AJAX för både inloggade användare och vanliga användare som visas i följande kod.

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

    Då kan vi gå in i implementeringen av get_quiz_results funktion som visas i följande kod.

    funktion get_quiz_results () $ score = 0; $ question_answers = $ _POST ["data"]; $ question_results = array (); foreach ($ question_answers as $ ques_id => $ svar) $ question_id = trim (str_replace ('qid_', ', $ ques_id))', '; $ correct_answer = get_post_meta ($ question_id,' _question_correct_answer ', true); om $ answer == $ correct_answer) $ score ++; $ question_results ["$ question_id"] = array ("answer" => $ svar, "correct_answer" => $ correct_answer, "mark" => "correct");  andra $ question_results ["$ question_id"] = array ("answer" => $ svara, "correct_answer" => $ correct_answer, "mark" => "inkorrekt"); total_questions = count ($ question_answers) ; $ quiz_result_data = array ("total_questions" => $ total_questions, "score" => $ poäng, "result" => $ question_results); echo json_encode ($ quiz_result_data); exit;

    Kodförklaring

    Hittills har vi skapat AJAX-förfrågan och genomfört serverns sidansvar. I nästa avsnitt kommer vi att slutföra frågeprocessen genom att hantera AJAX-svaret.

    Hantering av AJAX-responsdata

    I svarhanteringsdelen har vi en hel del uppgifter, inklusive visning av frågesportresultat och betyg. Så jag ska skilja koden i några avsnitt för att förklara förklaringen. Tänk på följande kod som innehåller den fullständiga AJAX-förfrågan.

    $ .post (quiz.ajaxURL, action: 'get_quiz_results', nonce: quiz.quizNonce, data: selected_answers, funktion (data) // Avsnitt 1 var total_questions = data.total_questions; $ ('# slider'). nästa ($ ('# rhino-item' + total_questions)); $ ('# poäng'). html (data.score + '/' + total_questions); // Avsnitt 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 + = ''; // Sektion 3 $ ('# quiz_result') .förälder (). Css ('överflöde-y', 'rulla'); . $ ( '# Quiz_result) html (result_html); $ (# Timer) dölja (). , "json");
    Förklaring av avsnitt 1
    Först hämtar vi frågans totala frågor från svaret från servern. Då använder vi Nästa funktionen av Rhino Slider för att omdirigera användaren till resultatbilden. Då ställer vi användarpoängen med de totala frågorna inom #Göra behållare.
    Förklaring till avsnitt 2
    Den inledande delen av denna kod genererar HTML-tabellen med nödvändiga rubriker för att visa resultaten. Då lägger vi frågorna till bordet inuti jQuery varje slinga. Vi har använt två bilder för att visa frågan om framgång eller misslyckande.
    Förklaring till avsnitt 3
    Inledningsvis måste vi tillåta rullning på resultatsidan, eftersom det kan vara ganska lång för frågesporter med ett stort antal frågor. CSS överströmnings-y attributet används för att tillåta rullning. Slutligen ställde vi frågeställningsbordet in i #quiz_result behållare och göm timern, som vi kommer att genomföra i nästa avsnitt.
    När frågestunden är klar ska din skärm se ut som något som liknar följande bild.
    Skapa en Quiz Timer
    Vanligtvis har en examen eller frågesport en fördefinierad tidsram. Så vi ska använda den varaktighet som vi konfigurerat på inställningssidan i vårt plugin för att generera frågestunden. Vi har redan konfigurerat timern att döljas vid första sidladdning och att vara synlig vid formulärinsändning, i kortkoden.
    Låt oss fokusera på den dynamiskt växlande timern med jQuery-koden som visas i följande.
    var duration = quiz.quizDuration * 60; $ (dokument) .ready (funktion ($) setTimeout ("startPuzzleCount ()", 1000);); var startPuzzleCount = funktion () duration--; $ ('# timer'). html (duration + "Återstående sekunder"); om (duration == '0') $ ('# timer'). html ("Time Up"); wpq_quiz_results (); lämna tillbaka;  setTimeout ("startPuzzleCount ()", 1000); ;
    Quiz-varaktighet hämtas med hjälp av konfigurationsmatrisen som passerat med hjälp av wp_localize_script fungera. Varaktigheten omvandlas sedan till sekunder genom att multiplicera med 60.
    Då skapar vi en setTimeout funktion för att starta timern. Inuti funktionen reducerar vi varaktigheten med 1 och tilldela till #timer behållare. När tiden går ner till noll, kallar vi wpq_quiz_results funktionen för att automatiskt slutföra quiz och generera resultaten.
    Slutligen kallar vi setTimeout funktion rekursivt för att uppdatera återstående tid. Vi har slutfört implementeringen av timern och din frågesport ska se ut som följande bild med timern.
    Sammanfatta
    Under hela denna tvådelade serie utvecklade vi ett enkelt och komplett multipelvalprofil för WordPress. Du kan förlänga funktionaliteten för det här pluginet så att det passar dina applikationskrav. Jag föreslår att du kan förbättra plugin-programmet genom att prova följande:
    Låt mig veta dina förslag och hur det går med plugin-förlängningsprocessen.
    Ser fram emot att höra från dig.
    
	
    	
			
	   
	
    

    
Koda

    
	

    
			
    
							×

							
							
      

						
      

      FrågaSvarRätt svarResultat
      '+ quiz_index +''+ ques.answer +''+ ques.correct_answer +'