Accentsconagua

Intégration de questionnaires à choix multiples dans WordPress Créer le frontal

Code
Share

Ceci est la deuxième partie de la série consacrée au développement d’un plug-in de questionnaire à choix multiple pour WordPress. Dans la première partie, nous avons créé le backend de notre plugin pour capturer les données nécessaires à stocker dans la base de données.

Dans cette dernière partie, nous allons créer l’interface du plugin où les utilisateurs peuvent répondre à des quiz et évaluer leurs connaissances..

Les sujets suivants seront abordés dans cette partie de la finalisation de notre plugin:

  • Créer un shortcode pour afficher un questionnaire
  • Intégration d'un curseur jQuery pour afficher des questions et la navigation
  • Remplir un questionnaire et générer des résultats
  • Créer une minuterie de quiz

Nous aurons besoin d'un nombre considérable de questions dans le backend pour générer des quiz aléatoires. J'espère que vous avez déjà travaillé avec le serveur et stocké suffisamment de questions pour les quiz.

Alors, commençons.

Créer un shortcode pour afficher un questionnaire

Nous devrions d’abord avoir un article ou une page qui charge les éléments d’affichage du quiz. Ceci peut être réalisé en utilisant soit un shortcode, soit un modèle de page. Dans ce plugin, un shortcode sera utilisé pour le rendre indépendant du thème.

Les codes courts nous permettent d’utiliser le plugin en tant que composant indépendant, tandis que les modèles de page dépendent du thème. D'autre part, un modèle de page est beaucoup plus sécurisé que les codes abrégés, car il est possible de supprimer des codes abrégés à l'intérieur des pages par erreur..

Initialement, le shortcode devrait générer les catégories de quiz disponibles afin que les utilisateurs puissent sélectionner une catégorie pour générer le quiz. Un shortcode sera ajouté dans le constructeur en utilisant le add_shortcode fonction comme indiqué dans le code suivant.

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

Maintenant, regardons l'implémentation du shortcode en récupérant les catégories de quiz disponibles dans la base de données.

fonction wpq_show_quiz ($ atts) global $ post; $ html = '
'; $ html. = '
'; $ html. = '
'; $ html. = ''; $ html. = '
'; $ html. = ''; $ html. = '
'; // Implémentation de la soumission de formulaire // Affichage du questionnaire sous forme de liste non ordonnée return $ html;

Notre shortcode générera le formulaire HTML et les contrôles nécessaires utilisés pour le quiz. Nous récupérons la liste des catégories de quiz disponibles dans un champ déroulant pour permettre à l'utilisateur de sélectionner la catégorie préférée. Nous pouvons utiliser le get_terms fonctionner avec hide_empty = 1 pour obtenir les catégories de quiz qui ont au moins une question.

Un champ caché appelé wpq_action est utilisé pour vérifier la $ _POST valeurs après soumission.

Une fois que vous avez inséré le shortcode dans une page ou une publication, le résultat ressemblera à celui de l'écran suivant.

Désormais, l'utilisateur peut sélectionner une catégorie de questionnaire et soumettre le formulaire afin d'obtenir le questionnaire. Nous allons donc gérer la soumission de formulaire à l'intérieur d'un code court pour obtenir la catégorie sélectionnée et récupérer des questions aléatoires pour les quiz.

Le code suivant contient l'implémentation de récupérer des questions d'une catégorie sélectionnée.

$ 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' => 'publish', 'posts_per_page' => $ quiz_num); $ query = new WP_Query ($ args); $ quiz_index = 1; while ($ query-> have_posts ()): $ query-> the_post (); // Génération du code HTML pour les questions endwhile; wp_reset_query (); // curseur d'intégration else $ html. = '
'; $ html. = '
';

Le code donné devrait être inclus dans le Mise en œuvre de la soumission de formulaire section du code précédent.

Une fois le formulaire soumis, nous vérifions si le formulaire contient l'action requise à l'aide du champ masqué que nous avons généré précédemment. Ensuite, nous obtenons la catégorie de quiz sélectionnée à partir du $ _POST tableau.

Ensuite, nous interrogeons la base de données pour wptuts_quiz messages avec la catégorie de quiz sélectionnée.

Il est important de définir commandé par comme rand pour générer des questions aléatoires pour les questionnaires, qui généreront sinon le même ensemble de questions à chaque fois. Aussi, assurez-vous de définir posts_per_page définir le nombre maximum de questions par test.

Une fois les résultats générés, nous devons ajouter les questions aux éléments HTML nécessaires et nous les implémenterons dans la section suivante..

Intégration d'un curseur jQuery pour afficher des questions et la navigation

Les questionnaires peuvent être générés sous la forme d'un écran contenant toutes les questions à la fois ou d'un écran contenant une question à la fois avec des commandes de navigation. Je crois que cette dernière technique est la préférée de la plupart des gens. Par conséquent, nous allons afficher ce questionnaire avec une seule question et une navigation permettant de passer aux questions précédentes et suivantes..

Générer cette fonctionnalité à partir de zéro peut être une tâche fastidieuse et réinventer la roue. Un curseur jQuery sera la solution idéale pour cette situation et j'utiliserai RhinoSlider, car c'est mon préféré, alors prenez-en un exemplaire..

Dans le dossier téléchargé, vous verrez trois dossiers appelés img, js, et css. Copier le img et css dossiers dans notre plugin et copier les fichiers à l’intérieur du js dossier à l'existant js dossier que nous avons sur notre plugin quiz. Nous pouvons maintenant commencer à inclure les scripts et les styles nécessaires pour le curseur..

Y compris les scripts frontend

Dans la première partie, nous avons créé les scripts nécessaires pour le backend. Dans cette partie, nous allons inclure les scripts nécessaires pour RhinoSlider ainsi que quiz.js pour une fonctionnalité personnalisée.

Pour les applications plus volumineuses, nous pouvons utiliser des fichiers de script distincts pour le front-end et le back-end. Je vais utiliser un fichier de script pour simplifier les choses.

Considérez le code suivant pour inclure les scripts et les données de configuration nécessaires.

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

Nous avons ici trois fichiers JavaScript utilisés pour RhinoSlider et le quiz.js fichier pour une fonctionnalité personnalisée. Dans la partie précédente, nous avons configuré la durée du quiz. Nous pouvons récupérer la durée en utilisant le get_option fonction et l'assigner à la $ config tableau. De plus, nous devons inclure des configurations communes dans le tableau de configuration..

Enfin, nous pouvons utiliser le wp_localize_script fonction pour attribuer les données de configuration dans le quiz.js fichier.

Incluant les styles frontaux

De même, nous pouvons inclure les fichiers CSS requis pour Rhino Slider en utilisant le code suivant.

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

Enfin, nous devons mettre à jour le constructeur du plug-in pour ajouter les actions nécessaires à l'inclusion des scripts et des styles, comme indiqué dans le code suivant..

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

Tout est prêt à intégrer le curseur avec des questions dans le shortcode que nous avons créé précédemment. Allons de l'avant.

Incorporation du curseur dans le code court

Nous avons actuellement deux commentaires dans la fonction shortcode, mentionnant "Générer du HTML pour les questions" et "Curseur d'incorporation". Ces sections doivent être mises à jour avec le code correspondant pour générer un curseur. Nous devons d’abord mettre à jour le tandis que boucle comme suit.

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. ''. $ question. '
    '; $ questions_str. = '
    '; $ quiestion_index = 1; foreach ($ question_answers as $ key => $ valeur) if ("! = $ valeur) $ questions_str. = $ quiestion_index. ' '. valeur de $. '
    ';  $ quiestion_index ++;  $ questions_str. = '
    • '; $ quiz_index ++; en attendant;

    Explication du code

    Ensuite, nous devons créer les conteneurs pour le curseur dans la section commentée comme "Curseur d’incorporation". Le code suivant contient le code HTML pour la création de conteneurs.

    $ html. = '
      '. $ questions_str; $ html. = '
    • Résultats du quiz 
      '; $ html. = '
      '; $ html. = '
    ';

    Nous utiliserons une liste non ordonnée appelée curseur en tant que conteneur pour Rhino Slider. Initialement, nous incluons l'ensemble des questions et réponses générées à l'intérieur de la boucle, en utilisant $ questions_str. Il contiendra une collection d'éléments de liste.

    Ensuite, nous devons créer manuellement un autre élément de la liste pour afficher les résultats du quiz et le score..

    Désormais, toutes les données et diapositives requises pour l’application de quiz sont configurées. Nous pouvons initialiser Rhino Slider dans quiz.js voir le quiz en action.

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

    J'ai utilisé des styles CSS personnalisés pour améliorer l'aspect et la convivialité. Vous pouvez trouver tous les CSS modifiés sous le wp_quiz section de la rhinoslider-1.05.css fichier. Maintenant, vous devriez avoir quelque chose comme l'image suivante.

    Remplir le questionnaire et générer des résultats

    Une fois le questionnaire chargé, vous pouvez utiliser les commandes de navigation pour vous déplacer entre les questions et sélectionner les réponses. Vous devez cliquer sur le bouton "Obtenir les résultats" une fois que toutes les questions ont été répondues. Nous devons maintenant créer les résultats du questionnaire à l'aide d'une requête AJAX..

    Implémentons le code jQuery pour effectuer la requête AJAX.

    $ ("# completeQuiz"). click (function () 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] : cochée '); if (selected_answer.length! = 0) var selected_answer = $ (selected_answer) .val (); selected_answers ["qid _" + question_id] = selected_answer; autre selected_answers ["qid _" + question_id] = ";); // demande AJAX;

    Une fois que le bouton "Obtenir les résultats" est cliqué, nous appelons le wpq_quiz_results fonction en utilisant jQuery. Chaque question a été ajoutée au curseur avec une classe CSS spéciale appelée ques_answers.

    En traversant chaque élément avec le ques_answers classe, nous récupérons l'identifiant de la question en utilisant l'attribut HTML data appelé data-quiz-id et le bouton radio sélectionné en utilisant jQuery.

    Enfin, nous affectons toutes les questions et les réponses sélectionnées dans un tableau appelé selected_answers, à transmettre à la demande AJAX.

    Regardez le code suivant pour l'implémentation de la requête AJAX.

    $ .post (quiz.ajaxURL, action: "get_quiz_results", nonce: quiz.quizNonce, data: selected_answers,, function (data) // code de traitement des résultats AJAX, "json");

    Tout d'abord, nous créons la demande AJAX en utilisant les données de configuration attribuées à partir du wpq_frontend_scripts une fonction. La liste de réponses générée dans la section précédente sera envoyée en tant que paramètre de données. Avant de gérer le résultat, nous devons examiner la mise en œuvre du code côté serveur dans la section suivante..

    Création d'un gestionnaire AJAX côté serveur

    Tout d'abord, nous devons mettre à jour le constructeur avec les actions nécessaires pour utiliser AJAX pour les utilisateurs connectés et les utilisateurs normaux, comme indiqué dans le code suivant..

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

    Ensuite, nous pouvons passer à la mise en œuvre de la get_quiz_results fonctionne comme indiqué dans le code suivant.

    fonction get_quiz_results () $ score = 0; $ question_answers = $ _POST ["data"]; $ question_results = array (); foreach ($ question_answers as $ ques_id => $ answer) $ question_id = trim (str_replace ('qid_', ", $ ques_id)). ','; if ($ answer == $ correct_answer) $ score ++; $ question_results ["$ question_id"] = array ("answer" => $ answer, "correct_answer" => $ correct_answer, "mark" => "correct");  else $ question_results ["$ question_id"] = array ("answer" => $ answer, "correct_answer" => $ correct_answer, "mark" => "incorrect"); total_questions = count ($ question_answers) ; $ quiz_result_data = array ("total_questions" => $ total_questions, "score" => $ score, "result" => $ question_results); echo json_encode ($ quiz_result_data);

    Explication du code

    Jusqu'à présent, nous avons créé la demande AJAX et mis en œuvre la réponse côté serveur. Dans la section suivante, nous allons terminer le processus de génération des résultats du questionnaire en gérant la réponse AJAX..

    Traitement des données de réponse AJAX

    Dans la partie traitement des réponses, nous avons quelques tâches à effectuer, notamment l'affichage des résultats et des scores du quiz. Je vais donc séparer le code en quelques sections pour clarifier l'explication. Considérez le code suivant qui contient la requête AJAX complète.

    $ .post (quiz.ajaxURL, action: 'get_quiz_results', nonce: quiz.quizNonce, data: selected_answers, function (data) // Section 1 var total_questions = data.total_questions; $ ('# curseur'). data ('rhinoslider'). next ($ ('# rhino-item' + total_questions)); $ ('# score'). html (data.score + '/' + total_questions); // Section 2 var result_html = ''; result_html + = ''; var quiz_index = 1; $ .each (data.result, function (clé, ques) result_html + = ''; result_html + = ''; quiz_index ++; ); result_html + = ''; result_html + = ''; // Section 3 $ ('# quiz_result'). Parent (). Css ('overflow-y', 'scroll'); $ ('# quiz_result'). html (result_html); $ ('# timer'). hide (); , 'json');
    Explication de la section 1
    Premièrement, nous récupérons le nombre total de questions du questionnaire à partir de la réponse reçue du serveur. Ensuite, nous utilisons le suivant fonction de Rhino Slider pour rediriger l’utilisateur vers la diapositive de résultats. Ensuite, nous définissons le score de l’utilisateur avec le nombre total de questions à l’intérieur du #But récipient.
    Explication de la section 2
    La partie initiale de ce code génère le tableau HTML avec les en-têtes nécessaires pour afficher les résultats. Ensuite, nous assignons les questions à la table à l'intérieur du jQuery chaque boucle. Nous avons utilisé deux images pour afficher l'état de réussite ou d'échec de la question..
    Explication de la section 3
    Dans un premier temps, nous devons autoriser le défilement dans la page de résultats car elle peut être assez longue pour les quiz comportant un grand nombre de questions. Le CSS débordement-y attribut est utilisé pour permettre le défilement. Enfin, nous plaçons la table des résultats du quiz dans le #quiz_result conteneur et masquer la minuterie, que nous allons mettre en œuvre dans la prochaine section.
    Une fois le test terminé, votre écran devrait ressembler à l'image suivante..
    Créer une minuterie de quiz
    Habituellement, tout examen ou questionnaire a un délai prédéfini. Nous allons donc utiliser la durée que nous avons configurée dans la page des paramètres de notre plugin pour générer la minuterie du quiz. Nous avons déjà configuré le minuteur pour qu'il soit masqué lors du chargement initial de la page et visible lors de la soumission du formulaire, dans le shortcode..
    Concentrons-nous sur le minuteur à changement dynamique utilisant le code jQuery, comme illustré ci-dessous..
    var duration = quiz.quizDuration * 60; $ (document) .ready (function ($) setTimeout ("startPuzzleCount ()", 1000);); var startPuzzleCount = function () duration--; $ ('# timer'). html (duration + "secondes restantes"); if (duration == '0') $ ('# timer'). html ("Time Up"); wpq_quiz_results (); revenir;  setTimeout ("startPuzzleCount ()", 1000); ;
    La durée du questionnaire est récupérée à l'aide du tableau de configuration transmis à l'aide de la touche wp_localize_script une fonction. La durée est ensuite convertie en secondes en multipliant par 60.
    Ensuite, nous créons un setTimeout fonction pour démarrer la minuterie. Dans la fonction, nous réduisons la durée de 1 et attribuer à la #minuteur récipient. Lorsque le temps passe à zéro, nous appelons le wpq_quiz_results fonction pour compléter automatiquement le quiz et générer les résultats.
    Enfin, nous appelons le setTimeout récursivement pour mettre à jour le temps restant. Nous avons terminé la mise en œuvre du minuteur et votre questionnaire devrait ressembler à l'image suivante avec le minuteur..
    Emballer
    Tout au long de cette série en deux parties, nous avons développé un plugin de quiz à choix multiples simple et complet pour WordPress. Vous pouvez étendre les fonctionnalités de ce plugin pour répondre aux exigences de votre application. Je suggère que vous puissiez améliorer le plugin en essayant ce qui suit:
    Faites-moi savoir vos suggestions et comment cela se passe avec le processus d'extension du plugin.
    J'attends de vos nouvelles.
    
	
    	
			
	   
	
    

    
Code

    
	

    
			
    
							×

							
							
      

						
      

      QuestionRéponseBonne réponseRésultat
      '+ quiz_index +''+ ques.answer +''+ ques.correct_answer +'