, integration af multiple choice - quizzer i wordpress – skabe frontend,,,,, andel,,,,,,,, 5,,,,,,, det cyber - mandag envato tuts + kurser vil blive reduceret til $3.- og' t miss. denne post er en del af en serie kaldet integrering af multiple choice - quizzer i wordpress. integrering af multiple choice - quizzer i wordpress - at skabe backend,,,, det er den anden del af den serie om udvikling af en multiple choice - stik af med wordpress.i første del, vi har skabt backend af vores stik af at registrere de oplysninger, der er nødvendige for at oplagre i databasen. i denne sidste del, vil vi skabe frontend af stik af, hvor brugerne kan tage quizzer og evaluere deres viden. følgende emner vil blive dækket i denne del af vores stik af:, skabe en shortcode udviser en quiz, integrering af en jquery slider for at vise spørgsmål og navigation, udfylder en quiz og skabe resultater, at skabe en quiz timer, får vi brug for en betydelig del af spørgsmål i backend skabe tilfældig quizzer.jeg håber, at du allerede har arbejdet med backend og opbevaret nok spørgsmål for quizzer. så lad os komme i gang.,, skabe en shortcode udviser en quiz, først skal vi have en stilling eller side, som kunne vise dele af prøven.dette kan opnås ved at anvende enten en shortcode eller side skabelon.i dette stik af, en shortcode vil blive anvendt til at gøre det uafhængigt af det tema, shortcodes giver os mulighed for at udnytte de stik af som en uafhængig del, mens side modeller afhænger af temaet.på den anden side side model er meget mere sikker, end shortcodes, så der er mulighed for, at shortcodes indvendige sider ved en fejltagelse.først en shortcode bør produktionen tilgængelige - kategorier, således at de kan brugerne vælge en kategori for at skabe quiz.en shortcode vil blive tilføjet i konstruktøren benytter, add_shortcode, fungere som angivet i følgende kode. add_shortcode ('wpq_show_quiz, system ($, wpq_show_quiz "), lad os se på gennemførelsen af den shortcode ved læsning til rådighed - kategorier fra databasen, wpq_show_quiz (funktion. $atts) (samlet $post; $html = < div id =" quiz_panel "> < form handlingen =" - metoden "= =" post ">" $html. = < div klasse = "toolbar" > "$html. = < div klasse =" toolbar_item "> < udvælge navn =" quiz_category "id =" quiz_category ">'; //retrive quizzen kategorier fra databasen $quiz_categories = get_terms ('quiz_categories", "hide_empty = 1) for hvert ($quiz_categories som $quiz_category) ($html. = < alternativ værdi = ".$quiz_category - > term_id. "> ".$quiz_category - > navn. "</option>'; \t} \t$html .= '</select></div>'; \t$html .= '<input type="hidden" value="select_quiz_cat" name="wpq_action" />'; \t$html .= '<div class="toolbar_item"><input type="submit" value="Select Quiz Category" /></div>'; \t$html .= '</form>'; \t$html .= '<div class="complete toolbar_item" ><input type="button" id="completeQuiz" value="Get Results" /></div>'; \t//Implementation of Form Submission \t//Displaying the Quiz as unorderd list \treturn $html; },Our shortcode will generate the HTML form and necessary controls used for the quiz. vi finder en liste over tilgængelige quiz kategorier i et fald ned ad banen til at lade brugeren udvælger de foretrak kategori.vi kan bruge den, get_terms, funktion, hide_empty = 1, for at få den quiz kategorier, der har mindst ét spørgsmål. en skjult område, wpq_action, anvendes til at kontrollere de $_post, værdier efter indsendelsen. efter du indlæser shortcode på en side eller post, produktion, ser sådan ud efter skærm.,,, nu kan brugeren vælge en quiz kategori og indgive form, for at få den opgave.So we are going to handle the form submission inside a shorcode to get the selected category and retrieve random questions for quizzes.,The following code contains the implementation of retrieving questions from a selected category., $questions_str = ""; if ( isset( $_POST['wpq_action'] ) && 'select_quiz_cat' == $_POST['wpq_action'] ) { \t$html .= '<div id="timer" style="display: block;"></div>'; \t$html .= '<div style="clear: both;"></div></div>'; \t$quiz_category_id = $_POST['quiz_category']; \t$quiz_num = get_option( 'wpq_num_questions' ); \t$args = array( \t\t'post_type' => 'wptuts_quiz', \t\t'tax_query' => array( \t\t\tarray( \t\t\t\t'taxonomy' => 'quiz_categories', \t\t\t\t'field' => 'id', \t\t\t\t'terms' => $quiz_category_id \t\t\t) \t\t), \t\t'orderby' => 'rand', \t\t'post_status' => 'publish', \t\t'posts_per_page' => $quiz_num \t); \t$query = new WP_Query( $args ); \t$quiz_index = 1; \twhile ( $query->have_posts() ) : $query->the_post(); \t\t//Generating the HTML for Questions \tendwhile; \twp_reset_query(); \t//Embedding Slider } else { \t$html .= '<div id="timer" style="display: none;"></div>'; \t$html .= '<div style="clear: both;"></div></div>'; },The code given should be included into the ,Implementation of Form Submission, section of the previous code.,Once the form is submitted, we check whether the form contains the required action using the hidden field we generated tidligere.så får vi de udvalgte quiz kategori fra $_post, array., så vi sætter spørgsmålstegn ved database for, wptuts_quiz, stillinger med de udvalgte quiz kategori. det er vigtigt at fastsætte, orderby, som, rand, skabe tilfældig spørgsmål til opgaver, som ellers vil skabe den samme sæt af spørgsmål, hver gang.sørg også for at fastsætte, posts_per_page, fastsætter det maksimale antal spørgsmål pr. en given prøve., når resultaterne er frembragt, vi er nødt til at tilføje de spørgsmål, i den nødvendige html elementer, og vi gennemfører det i det næste afsnit.,, at integrere en jquery slider for at vise spørgsmål og navigation, quizzer kan være der er skabt som en skærm, som indeholder alle de spørgsmål på én gang, eller en skærm, som indeholder et spørgsmål i en tid med passende kontrol.jeg mener, at denne teknik er favorit blandt folk.derfor skal vi vise denne prøve med et enkelt spørgsmål og navigation til gennem foregående og efterfølgende spørgsmål., og denne funktion fra bunden kan være en tidkrævende opgave, samt at genopfinde hjulet.en jquery slider vil være den perfekte løsning på denne situation, og jeg vil bruge rhinoslider, som det er min favorit, så tag en kopi. i - mappe, du vil se tre mapper, img, er, og ccs.kopier, img og css, mapper i vores stik af og kopiere filerne i, er, at de eksisterende mappe, er, at vi har på vores quiz mappe, stik af.nu kan vi komme i gang med, herunder de nødvendige manuskripter og former for ål, herunder frontend manuskripter i første del, vi har skabt den nødvendige manuskripter til backend.i denne del, vi kommer til at indeholde de nødvendige manuskripter til rhinoslider samt quiz.js for skik funktioner. for større ansøgninger, kan vi bruge separate manuskript filer for både frontend og backend.jeg skal bruge et manuskript fil at gøre tingene enklere.overveje følgende koder for herunder manuskripter og nødvendige konfiguration data., funktion wpq_frontend_scripts() {wp_register_script ("rhino", plugins_url ('j' er /rhinoslider-1.05. min.js, __file__) system ('jquery')); wp_register_script ("rhino mousewheel, plugins_url ('j' er /mousewheel. js, __file__), mængde (jquery ')); wp_register_script (" rhino lempelse, plugins_url (' j 'er /lempelse. js, __file__) system (' jquery ')); wp_register_script ("quiz, plugins_url (' j 'er /prøve. er, __file__) system (' jquery, rhino." rhino mousewheel "," rhino lempelse ')); wp_enqueue_script (' - '); $quiz_duration = get_option (' wpq_duration. $quiz_duration = (!tom ($quiz_duration)?$quiz_duration: 300. $config_array = system ('ajaxurl = > admin_url (admin ajax. folkesundhedsprogrammet "),'quiznonce = > wp_create_nonce (" quiz pædofil "),'quizduration = > $quiz_duration,'plugin_url = > $- > plugin_url); wp_localize_script (" prøve "," quiz, $config_array)}, vi har her tre javascript filer, der anvendes til rhinoslider og, quiz.js, fil for skik funktionalitet.i de foregående led, vi konfigureret varigheden af prøven.vi kan hente varighed med, get_option, funktion og overdrage den til $ud, vifte.vi må også omfatte fælles konfigurationer i ud array. endelig kan vi bruge den, wp_localize_script, funktion at tildele ud data i, quiz.js, fil., herunder frontend styles, på samme måde som vi kan omfatte css filer, der er nødvendige for næsehorn slider ved anvendelse af følgende kode., funktion wpq_frontend_styles() {wp_register_style ("næsehorn. base, plugins_url (css /rhinoslider-1.05. css, __file__)); wp_enqueue_style (" rhino base)), og endelig har vi behov for at ajourføre de stik af konstruktoeren at tilføje de nødvendige foranstaltninger for, herunder manuskripter og livsformer, som vist i følgende kode. add_action ('wp_enqueue_scripts, system ($. "wpq_frontend_scripts')); add_action (' wp_enqueue_scripts, system ($, wpq_frontend_styles'), er alt klar til at integrere de skyder med spørgsmål i shortcode skabte vi tidligere.lad os komme videre., indarbejdet slider i shortcode, vi har for øjeblikket to bemærkninger i den shortcode funktion, at "skabe html til spørgsmål" og "omfatter en".disse afsnit skal ajourføres med de respektive kode til at generere en slider.først er vi nødt til at ajourføre, mens, loop - som følger:, mens ($forespørgsel - > have_posts()): $forespørgsel - > the_post(). $question_id = get_the_id(). $spørgsmål = the_title ("," falsk). ". get_the_content(). $question_answers = json_decode (get_post_meta ($question_id, _question_answers, sande) $questions_str. = < li >. $questions_str. = < div klasse = "ques_title" > < over klasse = "quiz_num" > ".quiz_index dollars. "< /span > ".$. "< /div >. $questions_str. = < div klasse = "ques_answers" data - id = ".question_id dollars. ">. $quiestion_index = 1; for hvert ($question_answers som $nøgle = > $værdi) (hvis ("!= $værdi) ($questions_str. = $quiestion_index. "< input type = "radio" værdi = ".quiestion_index dollars. "navn = "ans_".question_id dollars. "[] "/>".$værdi. "< br /> "} $quiestion_index +;} $questions_str. = < /div > < /li >. $quiz_index +; endwhile;,, kode forklaring, i løkken, først spørgsmålet fra concatenating titel og indhold inden for spørgsmål. så vi finder svar på alle spørgsmål med, get_post_meta, funktion. i, for hvert, loop, alle svarene vil blive tildelt radio knapper med nødvendige værdier. nødvendige liste punkter vil blive tildelt i kredsløb, herunder: data attributter, der vil komme i handy i næste afsnit, den endelige produktion af mens loop bliver en snor variable, som indeholder en liste over spørgsmål og deres svar er indbygget i html.,, så vi er nødt til at skabe de containe- for en i afsnit bemærkninger som "omfatter en".følgende kode indeholder http: //kode for at skabe beholdere. $html. = < ul id = "skyder" > ".$questions_str. $html. = < li id = "quiz_result_page" > < div klasse = "ques_title" > test resultater < span id = "point" > < /span > < /div > «. $html. = < div id = "quiz_result" > < /div > "$html. = < /li > < /ul > < /div > «, vil vi anvende en unordered liste kaldt, slider, som den beholder, rhino slider.i første omgang vi medtager det sæt af spørgsmål og svar, der produceres i loop med $questions_str,.den vil indeholde en samling af liste over poster., så er vi nødt til at skabe en ny liste viser manuelt på resultaterne af test scoren. nu alle data og lysbilleder, der kræves for at prøve anvendelse er konfigureret.vi kan aktivere næsehorn slider i quiz.js, se quiz i aktion. jquery (dokument). klar (funktion ($) {$('# slider'). rhinoslider ((controlsmousewheel: falske, controlsplaypause: falske, showbullets: "altid", showcontrols: "altid"})}) jeg har brugt en sædvane, css styles at forbedre ser og føler.du kan finde alle de modificerede css under, wp_quiz, afsnit i, rhinoslider-1.05.css, fil.du skal have noget lignende det følgende billede.,,,,, at prøve og skabe resultater, når prøven er ladt, du kan bruge sejlads kontrol til at bevæge sig mellem spørgsmål og udvælge de svar.du burde klik "få resultater - knappen, når alle spørgsmål er blevet besvaret.nu er vi nødt til at skabe en quiz resultater ved hjælp af en ajax anmodning. lad os gennemføre jquery kode for at lave ajax anmodning. $("# completequiz"). klik (function() {wpq_quiz_results().}), var wpq_quiz_results = function() {var selected_answers = {}; $(". ques_answers"). pr. (function() {var question_id = $(det). attr ("data - id«) var selected_answer = $(dette). ('input [type = radio]: kontrolleret); hvis (selected_answer.length!= 0) (var - selected_answer = $(selected_answer). val(); selected_answers ["qid_" + question_id] = selected_answer;} andre (selected_answers ["qid_" + question_id] = ";}}); //ajax anmodning}, når" resultater "knappen er trykket, vi kalder, wpq_quiz_results, funktion ved hjælp af jquery.hvert spørgsmål blev føjet til den skyder med en særlig css klasse, som hedder, ques_answers,., mens gennem gennem hvert element med, ques_answers, klasse, vi finder spørgsmålet id med html data attribut, data - id, og de udvalgte radio knap ved hjælp af jquery. endelig vi tildele alle de spørgsmål og de udvalgte svar i et system, selected_answers, for at være gået ind i ajax anmodning. se på følgende koder for gennemførelsen af ajax anmodning. $. post (quiz.ajaxurl (aktion: "get_quiz_results" pædofil: quiz.quiznonce, data: selected_answers,}, funktion (data) (//ajax resultat af kode}, "json"), først skal vi skabe ajax anmodning ved hjælp af den konfiguration, der fra datam, wpq_frontend_scripts, funktion.svarene liste, der produceres i det foregående afsnit vil blive sendt som data parameter.før behandling med det resultat, vi er nødt til at se på gennemførelsen af server side kode i følgende afsnit, at skabe en ajax kontaktperson på serveren side, har vi til at ajourføre konstruktøren med de foranstaltninger, der er nødvendige for at anvende ajax for både logget på brugere og normale brugere, som vist i følgende kode, add_action (". wp_ajax_nopriv_get_quiz_results, system ($, get_quiz_results')); add_action ('wp_ajax_get_quiz_results, system ($, get_quiz_results'), så vi kan bevæge os ind på gennemførelsen af, get_quiz_results, fungere som vist i følgende kode., funktion get_quiz_results() {$score = 0 $question_answers = $_post [" data "] $question_results = array(); for hvert ($question_answers som $._id = > $svar) ($question_id = beklædning (str_replace ('qid_ "," "$ques_id)).". $correct_answer = get_post_meta ($question_id, _question_correct_answer, sande); hvis ($svar = = $correct_answer) ($score + + $question_results [" $question_id "] = system (" svar "= > $" correct_answer "= > $correct_answer," mærke "= >" korrekt ");} andre ($question_results [" $question_id "] = system (" svar "= > $" correct_answer "= > $correct_answer," mærke "= >" forkert ");}} $total_questions = tæller ($question_answers); $quiz_result_data = system (" total_questions "= > $total_questions" point "= > $score" resultat "= > $question_results), echo json_encode ($quiz_result_data); udgang;}, kode forklaring,,, der er udvalgt ennswers for alle spørgsmål vil blive modtaget med data parameter i $_post, system. så vi finder spørgsmålet id for hvert spørgsmål ved at erstatte den, qid_, præfiks. næste, vi får det korrekte svar på alle spørgsmål fra databasen benytter den, get_post_meta, funktion, vi kontrollere, om den næste. forudsat at besvare matcher det korrekte svar og skabe, $question_results baseret på status for resultatet., mens kontrol med de svar, vi har brug for en ajourføring af den test score med $score, variable. endelig vi tildele test resultater og scorer for $quiz_result_data, system, der sendes som svar., vi indtil nu har skabt ajax anmodning og gennemført serveren side svar.i det næste afsnit vil vi gennemføre test resultater produktion ved håndtering af ajax svar., håndtering af ajax respons i det svar, som håndterer en del, vi har ganske få opgaver, herunder angivelse af test resultater og scorer.så jeg vil adskille kodeks til et par dele til den forklaring.Consider the following code which contains the complete AJAX request., $.post( \tquiz.ajaxURL, \t{ \t\taction: 'get_quiz_results', \t\tnonce: quiz.quizNonce, \t\tdata: selected_answers \t}, \tfunction(data) { \t\t//Section 1 \t\tvar total_questions = data.total_questions; \t\t$('#slider').data('rhinoslider').next($('#rhino-item' + total_questions)); \t\t$('#score').html( data.score + '/' + total_questions); \t\t//Section 2 \t\tvar result_html = '<table>'; \t\tresult_html += '<tr><td>Question</td><td>Answer</td><td>Correct Answer</td><td>Result</td></tr>'; \t\tvar quiz_index = 1; \t\t$.each(data.result, function( key, ques ) { \t\t\tresult_html += '<tr><td>' + quiz_index + '</td><td>' + ques.answer + '</td><td>' + ques.correct_answer + '</td>'; \t\t\tresult_html += '<td><img src="' + quiz.plugin_url + 'img/' + ques.mark + '.png" /></td></tr>'; \t\t\tquiz_index++; \t\t}); \t\tresult_html += '<tr><td> </td><td></td><td></td>'; \t\tresult_html += '<td></td></tr>'; \t\t//Section 3 \t\t$('#quiz_result').parent().css('overflow-y','scroll'); \t\t$('#quiz_result').html(result_html); \t\t$('#timer').hide(); \t}, \t'json' );,,Explanation of Section 1,,First, we retrieve the total questions of the quiz from the response received from the server. så bruger vi den næste, funktion af næsehorn slider at omdirigere de bruger resultaterne glide.så vi sætter brugeren score med det samlede spørgsmål indenfor,&#score, beholder.,, forklaring af punkt 2, den første del af denne kode skaber: tabel med de nødvendige budgetposter til visning af resultaterne.så vi tildele spørgsmål til tabellen i jquery, hver sløjfe.vi har brugt to billeder til at vise den succes eller fiasko status af spørgsmålet.,, forklaring af punkt 3, først skal vi give nedad i resultaterne side, som det kan være længe om quizzer med en lang række spørgsmål.css, overflow-y, attributten anvendes, således at rulle.endelig sætter vi den test resultater, tabel i,&#quiz_result, beholder og skjule timeren, som vi vil gennemføre i næste afsnit., når prøven er afsluttet, din skærm skal se ud som noget, der svarer til følgende billede.,,,, at skabe en quiz timer, normalt en eksamen eller prøve er en forud fastsat tidsrum.så vi skal bruge varighed vi konfigureret i indstillinger side af vores stik af til at generere quiz - timer.vi har allerede sat timeren er skjult på første side belastning, og at være synlige på form indgivelse, i shortcode. lad os fokusere på dynamisk forandring timer ved hjælp af jquery kode som anført i det følgende, var varighed = quiz.quizduration * 60 $(dokument). klar (funktion ($) (settimeout ("startpuzzlecount()", 1000)}), var startpuzzlecount = function() {varighed - - og $('# timer). http: //(varighed + "sekunder tilbage"); hvis (varighed = = »0«) ($('&#timer). http: //("tid"); wpq_quiz_results(); tilbage;} settimeout ("startpuzzlecount()", 1000)}, quiz varighed er frembragt ved hjælp af konfiguration system gik med, wp_localize_script, funktion.varigheden er derefter omregnet til sekunder ved multiplikation med, 60,., så skaber vi en, settimeout, funktion at starte timeren.i den funktion, som vi reducere varigheden af 1, og tildele den,&#timer, beholder.når den tid kommer ned til nul, kalder vi det, wpq_quiz_results, funktion automatisk fuldstændig quizzen og skabe resultater. endelig kræver vi, settimeout, funktion rekursivt at ajourføre den resterende tid.vi har afsluttet gennemførelsen af timer, og prøven skal have følgende billede med timeren.,,,, pakker, i hele denne todelte serie, vi udviklede en enkel og fuldstændig multiple choice - stik af med wordpress.kan du udvide funktionerne i dette stik af tilpasses kravene i din ansøgning.jeg foreslår, du kan forbedre stik af med følgende:,, skabe mulighed for at tildele spørgsmål til quizzer i stedet for at skabe tilfældig quizzer. gem den test resultater for logget på brugerne., skabe en quiz konkurrence mellem brugerne.,, så lad mig høre deres forslag, og hvordan det går med stik af, at processen. ser frem til at høre fra dig.
