Comment ajouter un minuteur de question de quiz dans LearnDash

Chaque bon système de gestion de l'apprentissage offre une option pour ajouter une minuterie à un quiz/test. Et LearnDash n'est pas différent.

Si vous accédez aux paramètres LearnDash Quiz dans votre panneau d'administration, vous devriez remarquer une option permettant d'ajouter une "limite de temps" au niveau du quiz.

Les chronomètres sont un excellent moyen pour l'examinateur/l'instructeur/l'enseignant de contrôler le quiz lui-même.

• Il interpelle chaque élève, en jouant sur son psychisme,
• les étudiants n'ont tout simplement pas le temps de tricher,
• et cela ajoute un niveau de concurrence entre eux aussi

Mais une minuterie de quiz fonctionne bien lorsque toutes les questions ont la même pondération ou sont du même type. Comme un quiz de maths par exemple. Mais que se passe-t-il si quelques questions mathématiques ne sont qu'une partie du quiz et que seules ces questions particulières doivent être chronométrées.

Eh bien, dans ce cas, vous auriez besoin d'un minuteur par question, au lieu d'un minuteur de quiz.

Maintenant, LearnDash ne fournit pas de minuterie par question.

Tu le sais.

Et c'est pourquoi vous êtes ici, n'est-ce pas ? !

Donc, pour les scénarios où vous devez ajouter des questions chronométrées, je vais vous expliquer exactement comment vous pouvez ajouter une limite de temps pour chaque question de quiz dans LearnDash.

Voici ce que nous essaierons d'obtenir :

1. Nous ajouterons un champ facultatif pour chaque question, où vous pourrez spécifier une limite de temps pour chaque question du quiz.
2. La limite de temps sera alors affichée sur le front-end pour la question du quiz, et le bouton de question « Suivant » sera masqué.
3. Si l'élève manque de temps, la question suivante s'affichera automatiquement.

Maintenant, je dois vous avertir ; vous avez besoin d'une bonne quantité de connaissances en développement PHP et JavaScript pour implémenter cette solution. Sinon, vous devez contacter un développeur LearnDash , qui peut vous aider ici.

D'accord. Mettons-nous au travail.

Étape 1 : Ajoutez un paramètre de limite de temps pour les questions

Vous devez commencer par ajouter un paramètre simple, pour chaque quiz. Bien sûr, ce n'est pas aussi simple qu'il n'y paraît.

Si vous êtes un développeur qui a déjà travaillé sur des quiz LearnDash, vous saurez qu'il n'y a aucun crochet avec lequel vous pouvez travailler. Il n'y a pas de crochet que vous pouvez utiliser pour ajouter un champ aux paramètres de question du quiz.

Mais ne vous inquiétez pas. Nous ne personnaliserons pas le noyau ici. Ce que nous allons faire, c'est utiliser un peu de magie JavaScript.

En utilisant JavaScript, nous placerons un champ au-dessus du bouton "Enregistrer" sur la page des paramètres de la question. La raison de l'utilisation du bouton "Enregistrer" comme référence pour le champ est que le bouton "Enregistrer" est présent sur chaque page de paramètres de question de quiz.

Nous utiliserons l'identifiant du bouton "Enregistrer" comme référence pour ajouter le champ du minuteur de question.

La partie ci-dessous du code JavaScript affiche un champ "Limite de temps pour les questions" au-dessus du bouton "Enregistrer".

 $ save_button = jQuery( "#saveQuestion" );
$ save_button_div = $ save_button.closest( "div" );

$ content = '<div class="postbox">
<h3 class="hndle">' + 'Durée limite des questions (en secondes)' + '</h3>
<div class="inside">
<input type="number" min="0" class="small-text" value="' + input_content + '" name="qtn_time_limit">
</div>
</div>' ;
$ save_button_div .before ( $ content);

Ici, input_content est la valeur du champ 'Question Time Limit'. Par défaut, la valeur doit être définie sur 0. Chaque fois que vous (ou un utilisateur) définissez cette valeur, elle doit être mise à jour et enregistrée dans la base de données (gérée via PHP). Et de même, il doit être lu à partir de la base de données et affiché à l'utilisateur lorsque l'utilisateur visualise ce champ.

Ce code JavaScript, lorsqu'il est mis en file d'attente, affichera le champ comme ci-dessous :

Étape 2 : Ajoutez une limite de temps pour la question du quiz LearnDash

Une fois que la valeur du champ a été enregistrée pour une question, la minuterie doit être affichée lorsque la question du quiz est tentée. Cela peut être fait en suivant les étapes ci-dessous :

• Obtenir la valeur de la minuterie
• Démarrer la minuterie
• Vérifiez périodiquement si le délai a été atteint
• Déclencher le bouton de la prochaine question du quiz

Le code pour le même est comme ci-dessous:

 jQuery( '[name="startQuiz"],[name="next"]' ) .click ( function (){
jQuery( '.wpProQuiz_listItem' ) .each ( fonction (){
si (jQuery(this). est (':visible')){
$ current_question_id = jQuery(this). trouver (" .wpProQuiz_questionList ");
$ current_question_id = $ current_question_id .attr ( "data-question_id" );
si (wdmAjaxData.post_meta[ $ current_question_id] ! == non défini ){
counter_value = wdmAjaxData.post_meta[ $ current_question_id] ;
}
sinon {
contre_valeur = 0 ;
}
var wdm_globalElements = {
           suivant : jQuery(ceci). trouver ("[nom='suivant']"),
           wdm_timelimit : jQuery(ceci). trouver (' .wpProQuiz_question_time_limit '),
compteur_actuel : valeur_compteur
} ;
wdm_globalElements. prochain .hide ();
var wdm_timelimit = ( fonction () {
           var _counter = wdm_globalElements.current_counter ;
           var _intervalId = 0 ;
           var instance = {} ;
           exemple . stop = fonction () {
           si (_counter) {
               fenêtre . clearInterval (_intervalId);
               wdm_globalElements.wdm_timelimit .css ( "affichage" , "aucun" );
           }
         } ;
         exemple . début = fonction () {
         si ( ! _compteur){
wdm_globalElements. prochain .show ();
retour ;
         }
         var x = _counter * 1000 ;
         var $ timeText = wdm_globalElements.wdm_timelimit. trouver (' span ') .text (parseTime (_counter));
         var $ timeDiv = wdm_globalElements.wdm_timelimit. trouver (' .wpProQuiz_question_progress ');
         wdm_globalElements.wdm_timelimit .css ( "affichage" , "" );
         var avantHeure = + nouvelle Date();
         _intervalId = fenêtre . setInterval ( fonction () {
                 var diff = ( + new Date() - beforeTime);
                 var Temps écoulé = x - diff ;
                 si (diff >= 500 ) {
                    $ timeText .text (parseTime( Math . ceil (elapsedTime / 1000 )));
                 }
                 $ timeDiv .css ( 'width' , (elapsedTime / x * 100 ) + '%' );
                 si (ElapsedTime <= 0 ) {
                    instance .stop ();
                    wdm_globalElements. prochain .trigger ( "clic" );
                 }
          }, 16 );
        } ;
        instance de retour ;
        })();
wdm_timelimit. commencer ();
}
});
}

Le code ci-dessus masque le bouton de question "Suivant" pendant que la minuterie est en cours d'exécution, puis clique dessus une fois la limite de temps atteinte.

https://wisdmlabs.com/learndash-quiz-customization/?utm_source=blog&utm_medium=post&utm_campaign=quiz_cusomization_timer&utm_content=DropshippingEt le résultat pour le même devrait être comme ci-dessous :

Un minuteur de question par quiz fonctionne lorsque vous souhaitez attribuer un poids à une question particulière par rapport aux autres questions du quiz. Ce code peut être utile lorsque vous souhaitez ajouter une telle fonctionnalité à LearnDash.

Si vous essayez ceci et que vous avez des questions à me poser, lancez-vous !

Images par freepik