Share
Les questions à choix multiples sont un problème auquel la plupart d'entre nous avons été confrontés au moins une fois dans notre vie. Nous les aimons parce que nous pouvons fournir des réponses correctes en réfléchissant logiquement aux possibilités offertes, même si nous ne connaissons pas exactement la réponse correcte. Répondre aussi prend moins de temps, ce qui le rend si populaire.
Créer un quiz à choix multiples dans WordPress peut être une tâche très excitante et rentable. Vous pouvez l'utiliser dans votre blog personnel pour attirer plus de visiteurs, créer une section premium avec des questionnaires avancés ou créer des questionnaires axés sur des examens de certification populaires. Il existe de nombreuses possibilités pour le rentabiliser.
Ce plugin ne vous mènera pas à la création de questionnaires pour la création d’une entreprise, mais nous devons commencer quelque part pour arriver où nous voulons aller. Ce serait donc un bon début pour créer des quiz et en tirer des bénéfices..
Alors, commençons.
Nous devons d’abord rassembler les exigences du plug-in avant de passer à la conception ou à la mise en œuvre. Fondamentalement, nous devrions pouvoir créer des questionnaires à choix multiples et permettre aux utilisateurs de répondre à ceux-ci et d'obtenir des résultats..
Jetons donc un coup d'œil aux exigences détaillées et aux composants de notre plugin:
Ce tutoriel va être construit en une série de deux parties, où nous développons le backend du plugin dans la première partie, suivi par le plugin frontend dans la seconde partie..
Dans cette partie, nous allons nous concentrer sur le développement du backend du plugin où nous développons les données requises pour les questionnaires..
Il existe généralement une liste de quiz, chacun contenant une liste spécifique de questions. Avec ce plugin, nous n'allons pas créer de quizz. Nous créerons des questions individuelles et les assignerons dynamiquement à des questionnaires à la demande.
Nous pouvons maintenant prendre le temps d'identifier les composants nécessaires à la mise en œuvre du back-end, comme indiqué dans la section suivante..
Accentsconagua
wptuts_quiz.catégories de quiz pour le wptuts_quiz Type de poste.Après avoir identifié les composants WordPress nécessaires, nous pouvons directement passer à l’implémentation du backend du plugin quiz..
Le processus de création de la question comprend quatre sections principales: définition du type de publication personnalisé, définition de la taxonomie personnalisée, attribution de champs personnalisés et validations. Chacune de ces sections sera discutée avec le code détaillé dans les sections à venir.
Nous avons besoin de la forme la plus élémentaire de type de publication personnalisée pour les questions sans configuration avancée. La seule chose à considérer est le choix du bon champ pour la question.
L'écran de post-création par défaut contient deux champs pour le titre et le contenu. Vous pouvez choisir n'importe lequel de ces champs pour la question. Je vais choisir la concaténation des champs de titre et de contenu en tenant compte des possibilités avancées.
Nous allons créer un plug-in orienté objet au lieu d'un plug-in fonctionnel, de sorte que toutes les actions, les codes courts et les initialisations nécessaires seront effectués à l'intérieur du constructeur. Ce qui suit contient le code pour implémenter le wptuts_quiz Type de poste.
classe WP_Quiz public $ plugin_url; fonction publique __construct () $ this-> plugin_url = plugin_dir_url (__FILE__); add_action ('init', array ($ this, 'wpq_add_custom_post_type')); public function wpq_add_custom_post_type () $ labels = array ('nom' => _x ('Questions', 'wptuts_quiz'), 'nom_menu' => _x ('Questionnaire WPTuts', 'wptuts_quiz'), 'nom_du_moteur' => _x ('Ajouter un nouveau', 'wptuts_quiz'), 'add_new_item' => _x ('Ajouter une nouvelle question', 'wptuts_quiz'), 'new_item' => _x ('Nouvelle question', 'wptuts_quiz'), 'all_items' => _x ('Toutes les questions', 'wptuts_quiz'), 'edit_item' => _x ('Modifier la question', 'wptuts_quiz'), 'view_item' => _x ('Voir la question', 'wptuts_quiz'), 'search_items '=> _x (' Search Questions ',' wptuts_quiz '),' not_found '=> _x (' Aucune question trouvée ',' 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, 'public_queryable' => true, 'exclude_from_search' => false, 'has_archive' => true, 'query_var' = > true, 'can_export' => true, 'rewrite' => true, 'type_de capacité' => 'post'); register_post_type ('wptuts_quiz', $ args); Nous avons activé les champs titre et éditeur du type d'article personnalisé à utiliser pour la question. Puisque les fonctions sont situées dans une classe, nous devons utiliser $ this dans nos actions WordPress, filtres et shortcodes pour appeler les fonctions.
En dehors de cela, tous les paramètres mentionnés dans le code sont initialisés avec leurs valeurs par défaut.
Afin de regrouper les questions dans des sections spécifiques, nous avons besoin de quelque chose de similaire aux catégories WordPress par défaut. Nous allons donc utiliser une taxonomie personnalisée appelée catégories de quiz. Nous devons appeler la fonction de génération de taxonomie personnalisée sur le init action comme nous l'avons fait plus tôt. Donc, le constructeur de notre classe de plugin doit être mis à jour avec le code suivant.
add_action ('init', array ($ this, 'wpq_create_taxonomies'), 0); Ensuite, nous pouvons mettre en œuvre le wpq_create_taxonomies fonctionner sur le wptuts_quiz type de message comme indiqué dans le code suivant.
function wpq_create_taxonomies () register_taxonomy ('quiz_categories', 'wptuts_quiz', array ('labels' => array ('name' => 'Catégorie Quiz', 'add_new_item' => 'Ajouter un nouveau Quiz Catégorie', 'new_item_name' = > "Nouvelle catégorie de quiz"), 'show_ui' => true, 'show_tagcloud' => false, 'hierarchical' => true)); J'ai utilisé les paramètres d'option par défaut pour créer cette taxonomie personnalisée. Une fois le plugin activé, votre type de message personnalisé et votre taxonomie s'afficheront comme indiqué dans l'écran suivant..
Ensuite, nous devons créer plusieurs réponses pour chaque question. Dans ce plugin, le nombre maximum de réponses par question sera limité à cinq..
Vous pouvez attribuer dynamiquement 1 à 5 réponses à chaque question. Nous devons également spécifier la bonne réponse à partir de la liste de réponses fournie. Puisque ces données sont associées à nos questions, nous pouvons utiliser une méta-boîte avec des champs personnalisés pour générer les champs nécessaires..
Comme d'habitude, nous devons mettre à jour le constructeur avec le code suivant:
add_action ('add_meta_boxes', tableau ($ this, 'wpq_quiz_meta_boxes')); Considérez le code suivant pour l'implémentation de boîtes à méta avec des champs de réponses.
function wpq_quiz_meta_boxes () add_meta_box ('quiz-answers-info', 'Informations sur le quiz de réponses', tableau ($ 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 table avec la clé _question_answers. Nous avons donc accès à ce champ en utilisant le get_post_meta fonction pour obtenir les valeurs actuelles.post_meta table avec la clé _question_correct_answer.get_post_meta la fonction sera assignée aux champs respectifs.Vous devriez voir quelque chose de similaire à l'écran suivant, une fois que vous avez créé la méta-boîte.
Nous disposons maintenant de toutes les données requises pour notre plug-in de génération de quiz. La prochaine étape consiste à enregistrer les données de la question dans la base de données..
Mais nous avons besoin de quelques validations avant cela. Passons donc aux validations.
Nous n'avons pas de règles de validation complexes à ce stade du processus de création de question. Nous allons donc utiliser les validations jQuery côté client avant la soumission.
Ici nous avons besoin de admin_enqueue_scripts action à inclure dans le constructeur de notre plugin.
Donc, mettez à jour le constructeur avec le code suivant avant de commencer.
add_action ('admin_enqueue_scripts', tableau ($ this, 'wpq_admin_scripts')); Examinez maintenant le code suivant pour inclure les fichiers de script nécessaires à la validation..
fonction wpq_admin_scripts () wp_register_script ('quiz-admin', plugins_url ('js / quiz.js', __FILE__), array ('jquery')); wp_enqueue_script ('quiz-admin'); En utilisant wp_register_script et wp_enqueue_script, nous avons un fichier JS spécifique au plugin appelé quiz.js pour le traitement des validations. La validation sera effectuée à l'aide de la bibliothèque jQuery. Nous avons donc défini la bibliothèque intégrée jQuery comme dépendance de notre code JavaScript spécifique au plugin..
Après avoir inclus les scripts, implémentons les validations réelles dans le quiz.js fichier comme indiqué dans le code suivant.
jQuery (document) .ready (function ($) $ ("# post-body-content"). prepend (''); $ ('# post'). submit (function () if ($ ("# post_type"). val () == 'wptuts_quiz') return wpq_validate_quizes ();); ); Tout d'abord, nous assignons un vide div élément de l'écran de création de publication pour afficher les erreurs éventuelles. Ensuite, nous pouvons appeler une fonction JS personnalisée sur l'action de post-publication en vérifiant le type de post approprié à l'aide de la touche #Type de poste valeur de champ caché.
Le code suivant contient la mise en oeuvre de la wpq_validate_quizes une fonction.
var wpq_validate_quizes = function () var err = 0; $ ("# quiz_error"). html (""); $ ("# quiz_error"). hide (); if ($ ("# titre"). val () == ") $ (" # quiz_error "). append ("Veuillez entrer le titre de la question.
"); err ++; var correct_answer = $ (" # correct_answer "). val (); si ($ (" # quiz_answer "+ correct_answer) .val () ==" ") $ (" # quiz_error "). ajouter("La réponse correcte ne peut pas être vide.
"); err ++; if (err> 0) $ (" # publier "). removeClass (" button-primary-disabled "); $ (". spinner "). hide (); $ (" # quiz_error " ) .show (); return false; else retour vrai;; L'image suivante montre l'écran de post-création avec des messages de validation personnalisés..
Une fois le formulaire validé avec succès sans erreur, nous pouvons passer à l’enregistrement des détails de la question dans la base de données..
WordPress fournit une action appelée save_post, qui sera exécuté juste après la création du post. Nous pouvons définir une fonction personnalisée sur le save_post action pour enregistrer les détails du champ personnalisé dans la base de données.
Comme d'habitude mettre à jour le constructeur avec le save_post code d'action.
add_action ('save_post', array ($ this, 'wpq_save_quizes')); Implémentation de wpq_save_quizes fonction est donnée dans le code suivant.
fonction wpq_save_quizes ($ post_id) if (! wp_verify_nonce ($ _POST ['question_box_nonce'], nom de base (__FILE__))) return $ post_id; if (défini ('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 (); $ filter_answers = array (); foreach ($ question_answers as $ answer) array_push ($ filtré_answers, sanitize_text_field (trim ($ answer))); $ question_answers = json_encode ($ filtré_swers); $ correct_answer = isset ($ _POST ['correct_answer'])? sanitize_text_field ($ _POST ['correct_answer'])): ""; update_post_meta ($ post_id, "_question_answers", $ question_answers); update_post_meta ($ post_id, "_question_correct_answer", $ correct_answer); else return $ post_id; L'identifiant de poste est automatiquement transmis à cette fonction. Initialement, nous exécutons des validations pour la valeur nonce et la sauvegarde automatique. La chose la plus importante avant d’enregistrer est la validation du type de publication.
Si vous omettez la vérification du type de publication, ce code sera exécuté pour tous les types de publication dans votre installation WordPress, y compris les publications normales, ce qui peut entraîner des données incohérentes..
Enfin, nous obtenons les valeurs de nos champs de réponses et le champ de réponse correct à enregistrer dans la base de données à l'aide de la touche update_post_meta une fonction. Tous les détails des champs personnalisés seront sauvegardés dans le post_meta table.
Nous avons maintenant terminé le processus de création de la question. Puisque nous utilisons des questionnaires générés aléatoirement, vous aurez peut-être besoin de nombreuses questions pour voir ce plugin en action. Alors préparez-vous en ajoutant des questions supplémentaires avant de mettre en œuvre le quiz dans la partie suivante.
Même si ce n'est pas obligatoire, il est idéal d'avoir une page de paramètres pour notre plugin afin que l'administrateur puisse personnaliser en fonction de ses préférences..
Implémentons donc une simple page de paramètres pour contenir la durée du questionnaire et le nombre de questions par questionnaire. Nous devons mettre en œuvre le admin_menu action dans le constructeur.
add_action ('admin_menu', tableau ($ this, 'wpq_plugin_settings')); function wpq_plugin_settings () // crée un nouveau menu de niveau supérieur add_menu_page ('Paramètres du questionnaire WPTuts', 'Paramètres du questionnaire WPTuts', 'administrateur', 'paramètres_d'interrogation', $ ($ this, 'wpq_display_settings')); fonction wpq_display_settings () $ html = ' '; echo $ html; Nous pouvons utiliser le add_menu_page fonction pour ajouter une page de paramètres à la zone d'administration. le wpq_display_settings la fonction est utilisée pour implémenter les éléments d'affichage de la page des paramètres.
Nous avons utilisé deux champs de texte pour la durée et des questions par questionnaire. La soumission des formulaires et la sauvegarde des données peuvent être gérées manuellement à l'aide d'un code personnalisé, mais WordPress nous fournit une méthode simplifiée pour la mise à jour des options..
Dans cette méthode, vous devez définir l’action de formulaire sur options.php fichier. Ensuite, vous devez créer un champ caché appelé action pour contenir la valeur de 'mettre à jour'. Enfin, nous devons avoir un autre champ caché appelé options_page contenir les noms des deux champs de texte à mettre à jour.
Veillez à utiliser ces techniques de mise à jour des options intégrées dans des scénarios où la configuration requise pour l'enregistrement des champs n'est pas complexe..
Une fois que le bouton d'envoi est cliqué, les détails du formulaire seront mis à jour automatiquement sans code personnalisé..
Nous avons terminé le backend de notre plugin quiz. Maintenant, vous pouvez créer des questions et vous préparer pour la partie suivante où nous utiliserons ces questions pour générer des questionnaires de manière dynamique..
Jusque-là, faites-moi savoir le meilleur moyen possible de mettre en œuvre un quiz dynamique sur l'interface. N'oubliez pas qu'une seule question sera affichée à la fois. Lorsque l'utilisateur demande une question, il peut passer à la question suivante..
nous attendons vos suggestions avec plaisir.
