Accentsconagua

Meerkeuzevragenquizzen integreren in WordPress de frontend maken

Code
Share

Dit is het tweede deel van de serie over het ontwikkelen van een multiple choice quiz-plug-in voor WordPress. In het eerste deel hebben we de backend van onze plug-in gemaakt om de benodigde gegevens vast te leggen om in de database op te slaan.

In dit laatste deel zullen we de frontend van de plug-in creëren waar de gebruikers quizzen kunnen nemen en hun kennis kunnen evalueren.

De volgende onderwerpen komen aan bod in dit deel van het voltooien van onze plug-in:

  • Maak een shortcode om een ​​quiz te tonen
  • Een jQuery-schuifregelaar integreren om vragen en navigatie weer te geven
  • Een quiz voltooien en resultaten genereren
  • Een quiz-timer maken

We zullen een aanzienlijk aantal vragen in de backend nodig hebben om willekeurige quizzen te genereren. Ik hoop dat je al met de backend hebt gewerkt en voldoende vragen hebt opgeslagen voor quizzen.

Dus laten we beginnen.

Maak een shortcode om een ​​quiz te tonen

Eerst moeten we een bericht of pagina hebben waarop de weergave-elementen van de quiz worden geladen. Dit kan worden bereikt door een shortcode of een paginasjabloon te gebruiken. In deze plug-in wordt een shortcode gebruikt om deze onafhankelijk van het thema te maken.

Met shortcodes kunnen we de plug-in gebruiken als een onafhankelijk onderdeel, terwijl paginasjablonen afhankelijk zijn van het thema. Aan de andere kant is een paginasjabloon veel veiliger dan shortcodes omdat het mogelijk is om per ongeluk shortcodes binnenin pagina's te verwijderen.

Aanvankelijk zou de shortcode de beschikbare quizcategorieën moeten uitvoeren, zodat de gebruikers een categorie kunnen selecteren om de quiz te genereren. Een shortcode zal in de constructor worden toegevoegd met behulp van de add_shortcode functie zoals vermeld in de volgende code.

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

Laten we nu de implementatie van de shortcode bekijken door beschikbare quizcategorieën uit de database op te halen.

functie wpq_show_quiz ($ atts) global $ post; $ html = '
'; $ html. = '
'; $ html. = '
'; $ html. = ''; $ html. = '
'; $ html. = ''; $ html. = '
'; // Implementatie van het indienen van formulieren // De quiz weergeven als een niet-gereserveerde lijst, retourneert $ html;

Onze shortcode genereert het HTML-formulier en de nodige besturingselementen die voor de quiz worden gebruikt. We halen de lijst met beschikbare quizcategorieën op in een drop-downveld om de gebruiker de gewenste categorie te laten selecteren. We kunnen de gebruiken get_terms functie met hide_empty = 1 om de quizcategorieën te krijgen die minstens één vraag hebben.

Een verborgen veld genaamd wpq_action wordt gebruikt om de $ _POST waarden na indiening.

Nadat u de shortcode in een pagina of post hebt ingevoegd, ziet de uitvoer er als volgt uit.

Nu kan de gebruiker een quizcategorie selecteren en het formulier verzenden om de quiz te krijgen. Dus we gaan de formulierinzending in een shorcode afhandelen om de geselecteerde categorie te krijgen en willekeurige vragen voor quizzen op te halen.

De volgende code bevat de implementatie van het ophalen van vragen uit een geselecteerde categorie.

$ questions_str = ""; if (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' => 'publiceren', 'posts_per_page' => $ quiz_num); $ query = new WP_Query ($ args); $ quiz_index = 1; while ($ query-> have_posts ()): $ query-> the_post (); // Eindelijk de HTML voor vragen genereren; wp_reset_query (); // Slider ingesloten else $ html. = '
'; $ html. = '
';

De gegeven code moet worden opgenomen in de Implementatie van formulierinzending gedeelte van de vorige code.

Nadat het formulier is ingediend, controleren we of het formulier de vereiste actie bevat met behulp van het verborgen veld dat we eerder hebben gegenereerd. Dan krijgen we de geselecteerde quizcategorie uit de $ _POST rangschikking.

Dan vragen we de database voor wptuts_quiz berichten met de geselecteerde quizcategorie.

Het is belangrijk om in te stellen orderby zoals rand om willekeurige vragen te genereren voor quizzen, die anders telkens dezelfde reeks vragen zullen genereren. Zorg er ook voor om in te stellen posts_per_page om het maximale aantal vragen per quiz in te stellen.

Zodra de resultaten zijn gegenereerd, moeten we de vragen toevoegen aan de benodigde HTML-elementen en we zullen deze in de volgende sectie implementeren.

Een jQuery-schuifregelaar integreren om vragen en navigatie weer te geven

Quizzen kunnen worden gegenereerd als een scherm dat alle vragen in één keer bevat, of een scherm met één vraag per keer met navigatieknoppen. Ik geloof dat de laatste techniek de favoriet is bij de meeste mensen. Daarom gaan we deze quiz weergeven met een enkele vraag en navigatie voor het doorlopen van vorige en volgende vragen.

Het volledig opnieuw genereren van deze functionaliteit kan een tijdrovende klus zijn en het wiel opnieuw uitvinden. Een jQuery-schuifregelaar is de perfecte oplossing voor deze situatie en ik zal RhinoSlider gebruiken, omdat het mijn favoriet is, dus neem een ​​kopie.

In de gedownloade map ziet u drie mappen genaamd img, js, en css. Kopieer de img en css mappen in onze plug-in en kopieer de bestanden in de js map naar het bestaande js map die we hebben op onze quiz-plug-in. Nu kunnen we aan de slag met het opnemen van de benodigde scripts en stijlen voor de schuifregelaar.

Inclusief Frontend-scripts

In het eerste deel hebben we de benodigde scripts voor de backend gemaakt. In dit deel zullen we de benodigde scripts voor RhinoSlider ook opnemen quiz.js voor aangepaste functionaliteit.

Voor grotere applicaties kunnen we aparte scriptbestanden gebruiken voor zowel frontend als backend. Ik zal één scriptbestand gebruiken om dingen eenvoudiger te maken.

Overweeg de volgende code voor het opnemen van scripts en noodzakelijke configuratiegegevens.

functie 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 = (! empty ($ 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);

Hier hebben we drie JavaScript-bestanden die worden gebruikt voor de RhinoSlider en de quiz.js bestand voor aangepaste functionaliteit. In het vorige deel hebben we de duur van de quiz geconfigureerd. We kunnen de duur ophalen met behulp van de get_option functie en wijs het toe aan de $ config matrix. We moeten ook algemene configuraties opnemen in de configuratie-array.

Eindelijk kunnen we de wp_localize_script functie om de config-gegevens toe te wijzen in de quiz.js het dossier.

Inclusief frontend stijlen

Evenzo kunnen we de CSS-bestanden die nodig zijn voor Rhino Slider opnemen met behulp van de volgende code.

functie wpq_frontend_styles () wp_register_style ('rhino-base', plugins_url ('css / rhinoslider-1.05.css', __FILE__)); wp_enqueue_style ('rhino-base');

Ten slotte moeten we de plugin-constructor bijwerken om de nodige acties toe te voegen voor het opnemen van scripts en stijlen zoals weergegeven in de volgende code.

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

Alles is klaar om de schuifregelaar met vragen te integreren in de shortcode die we eerder hebben gemaakt. Laten we verder gaan.

De schuifregelaar in de shortcode insluiten

We hebben momenteel twee opmerkingen in de shortcode-functie, met de vermelding 'HTML voor vragen genereren' en 'Slider insluiten'. Die secties moeten worden bijgewerkt met de respectieve code om een ​​schuifregelaar te genereren. Eerst moeten we het updaten terwijl loop als volgt.

while ($ query-> have_posts ()): $ query-> the_post (); $ question_id = get_the_ID (); $ question = the_title (",", FALSE). ". get_the_content (); $ question_answers = json_decode (get_post_meta ($ question_id, '_question_answers', true)); $ questions_str. = '
  • '; $ questions_str. = '
    '. $ quiz_index. ''. $ vraag. '
    '; $ questions_str. = '
    '; $ quiestion_index = 1; foreach ($ question_answers als $ key => $ value) if ("! = $ value) $ questions_str. = $ quiestion_index. ' '. $ waarde. '
    ';  $ quiestion_index ++;  $ questions_str. = '
    • '; $ Quiz_index ++; endwhile;

    Code Uitleg

    Vervolgens moeten we de containers voor de schuifregelaar in de sectie maken die is gemarkeerd als "Slider insluiten". De volgende code bevat de HTML-code voor het maken van containers.

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

    We gebruiken een ongeordende lijst met de naam schuif als de container voor Rhino Slider. Aanvankelijk nemen we de reeks vragen en antwoorden op die binnen de lus zijn gegenereerd, met behulp van $ questions_str. Het bevat een verzameling lijstitems.

    Vervolgens moeten we handmatig een ander lijstitem maken om de resultaten van de quiz en de score te tonen.

    Nu zijn alle gegevens en dia's die nodig zijn voor de overhoringstoepassing geconfigureerd. We kunnen Rhino Slider initialiseren in quiz.js om de quiz in actie te zien.

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

    Ik heb een aantal aangepaste CSS-stijlen gebruikt om het uiterlijk te verbeteren. Je kunt alle aangepaste CSS vinden onder de wp_quiz deel van de rhinoslider-1.05.css het dossier. Nu zou je zoiets als de volgende afbeelding moeten hebben.

    De quiz voltooien en resultaten genereren

    Nadat de quiz is geladen, kunt u de navigatieknoppen gebruiken om tussen vragen te navigeren en de antwoorden te selecteren. Klik op de knop 'Resultaten ophalen' als alle vragen zijn beantwoord. Nu moeten we de quizresultaten maken met een AJAX-verzoek.

    Laten we de jQuery-code implementeren voor het AJAX-verzoek.

    $ ("# completeQuiz"). klik (functie () wpq_quiz_results ();); var wpq_quiz_results = function () var selected_answers = ; $ (".ques_answers"). each (function () var question_id = $ (this) .attr ("data-quiz-id"); var selected_answer = $ (this) .find ('input [type = radio] : checked '); if (selected_answer.length! = 0) var selected_answer = $ (selected_answer) .val (); selected_answers ["qid _" + question_id] = selected_answer; else selected_answers ["qid _" + question_id] = ";); // AJAX-verzoek;

    Nadat op de knop "Resultaten ontvangen" is geklikt, bellen we de wpq_quiz_results functie met behulp van jQuery. Elke vraag is toegevoegd aan de schuifregelaar met de naam een ​​speciale CSS-klasse ques_answers.

    Tijdens het doorlopen van elk element met de ques_answers klasse, halen we de vraag-ID op met het geroepen HTML-data-attribuut data-quiz-id en het geselecteerde keuzerondje met jQuery.

    Uiteindelijk kennen we alle vragen en de geselecteerde antwoorden toe aan een array genaamd selected_answers, worden doorgegeven aan het AJAX-verzoek.

    Bekijk de volgende code voor de implementatie van het AJAX-verzoek.

    $ .post (quiz.ajaxURL, action: "get_quiz_results", nonce: quiz.quizNonce, data: selected_answers,, function (data) // AJAX result handling code, "json");

    Eerst maken we het AJAX-verzoek met behulp van de configuratiegegevens die zijn toegewezen van de wpq_frontend_scripts functie. De antwoordenlijst die in de vorige sectie is gegenereerd, wordt verzonden als de gegevensparameter. Voordat we het resultaat afhandelen, moeten we in het volgende gedeelte kijken naar de implementatie van de serverzijde-code.

    Aan de serverzijde een AJAX-handler maken

    Eerst moeten we de constructor bijwerken met de acties die nodig zijn voor het gebruik van AJAX voor zowel ingelogde gebruikers als normale gebruikers, zoals weergegeven in de volgende code.

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

    Dan kunnen we verder gaan met de implementatie van de get_quiz_results functie zoals weergegeven in de volgende code.

    functie get_quiz_results () $ score = 0; $ question_answers = $ _POST ["data"]; $ question_results = array (); foreach ($ question_answers als $ ques_id => $ antwoord) $ question_id = trim (str_replace ('qid_', ", $ ques_id)). ','; $ correct_answer = get_post_meta ($ question_id, '_question_correct_answer', true); if ($ answer == $ correct_answer) $ score ++; $ question_results ["$ question_id"] = array ("answer" => $ answer, "correct_gebruiken" => $ correct_antwoord, "markeren" => "correct");  else $ question_results ["$ question_id"] = array ("answer" => $ answer, "correct_answer" => $ correct_gebruiker, "markeren" => "onjuist"); $ total_questions = count ($ question_answers) ; $ quiz_result_data = array ("total_questions" => $ total_questions, "score" => $ score, "result" => $ question_results); echo json_encode ($ quiz_result_data); exit;

    Code Uitleg

    Tot nu toe hebben we het AJAX-verzoek gemaakt en het server-side-antwoord geïmplementeerd. In de volgende sectie gaan we het proces voor het genereren van quizresultaten voltooien door het AJAX-antwoord af te handelen.

    Omgaan met AJAX-reactiegegevens

    In het gedeelte voor het afhandelen van reacties hebben we nogal wat taken, inclusief het weergeven van quizresultaten en scores. Dus ik ga de code scheiden in een paar secties om de uitleg duidelijk te maken. Beschouw de volgende code die het volledige AJAX-verzoek bevat.

    $ .post (quiz.ajaxURL, action: 'get_quiz_results', nonce: quiz.quizNonce, data: selected_answers, function (data) // deel 1 var total_questions = data.total_questions; $ ('# slider'). data ('rhinoslider'). next ($ ('# rhino-item' + total_questions)); $ ('# score'). html (data.score + '/' + total_questions); // Sectie 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 + = ''; // Sectie 3 $ ('# quiz_result'). Parent (). Css ('overflow-y', 'scroll'); . $ ( '# Quiz_result') html (result_html); $ ( '# Timer') te verbergen ().; , 'json');
    Uitleg van sectie 1
    Eerst halen we de totale vragen van de quiz op uit het antwoord dat van de server is ontvangen. Dan gebruiken we de volgende functie van Rhino Slider om de gebruiker om te leiden naar de resultatendia. Vervolgens stellen we de gebruikersscore in met de totale vragen binnen de #score houder.
    Uitleg van sectie 2
    Het eerste deel van deze code genereert de HTML-tabel met de benodigde koppen om de resultaten weer te geven. Vervolgens wijzen we de vragen toe aan de tabel in de jQuery elk lus. We hebben twee afbeeldingen gebruikt om de succes- of faalstatus van de vraag weer te geven.
    Uitleg van sectie 3
    Aanvankelijk moeten we scrollen toestaan ​​op de resultatenpagina omdat het vrij lang kan zijn voor quizzen met een groot aantal vragen. De CSS overflow-y kenmerk wordt gebruikt om te kunnen scrollen. Ten slotte stellen we de tabel met quizresultaten in op #quiz_result container en verberg de timer, die we in de volgende sectie zullen implementeren.
    Zodra de quiz is voltooid, ziet uw scherm er ongeveer zo uit als de volgende afbeelding.
    Een quiz-timer maken
    Gewoonlijk heeft een examen of quiz een vooraf bepaald tijdsbestek. Dus we gaan de duur gebruiken die we hebben geconfigureerd in de instellingenpagina van onze plug-in om de quiz-timer te genereren. We hebben de timer al geconfigureerd om verborgen te zijn bij het laden van de eerste pagina en om zichtbaar te zijn bij het indienen van formulieren, in de shortcode.
    Laten we ons concentreren op de dynamisch veranderende timer met behulp van jQuery-code, zoals hieronder wordt weergegeven.
    var duration = quiz.quizDuration * 60; $ (document) .ready (function ($) setTimeout ("startPuzzleCount ()", 1000);); var startPuzzleCount = function () duration--; $ ('# timer'). html (duur + "Resterende seconden"); if (duration == '0') $ ('# timer'). html ("Time Up"); wpq_quiz_results (); terug te keren;  setTimeout ("startPuzzleCount ()", 1000); ;
    Quizduur wordt opgehaald met behulp van de configuratie-array die is doorgegeven met behulp van de wp_localize_script functie. Duur wordt vervolgens geconverteerd naar seconden door te vermenigvuldigen met 60.
    Dan creëren we een setTimeout functie om de timer te starten. Binnen de functie verminderen we de duur met 1 en toewijzen aan de #timer houder. Wanneer de tijd op nul komt, noemen we de wpq_quiz_results functie om de quiz automatisch te voltooien en de resultaten te genereren.
    Ten slotte noemen we het setTimeout functie recursief om de resterende tijd bij te werken. We hebben de implementatie van de timer voltooid en uw quiz moet er als volgt uitzien met de timer.
    Afronden
    In deze tweedelige serie hebben we een eenvoudige en complete multiple choice quiz-plug-in ontwikkeld voor WordPress. U kunt de functionaliteit van deze plug-in uitbreiden om aan de vereisten van uw toepassing te voldoen. Ik stel voor dat je de plug-in zou kunnen verbeteren door het volgende uit te proberen:
    Laat me je suggesties weten en hoe het gaat met het uitbreidingsproces van plug-ins.
    Ik kijk ernaar uit iets van je te vernemen.
    
	
    	
			
	   
	
    

    
Code

    
	

    
			
    
							×

							
							
      

						
      

      VraagAntwoordGoed antwoordResultaat
      '+ quiz_index +''+ ques.answer +''+ ques.correct_answer +'