So fügen Sie einen Quiz-Frage-Timer in LearnDash hinzu

Jedes gute Lernmanagementsystem bietet die Möglichkeit, einem Quiz/Test einen Timer hinzuzufügen. Und LearnDash ist nicht anders.

Wenn Sie in Ihrem Admin-Bereich zu den LearnDash-Quizeinstellungen gehen, sollten Sie eine Option zum Hinzufügen eines „Zeitlimits“ auf Quizebene bemerken.

Timer sind eine großartige Möglichkeit für den Prüfer/Ausbilder/Lehrer, das eigentliche Quiz zu steuern.

• Es fordert jeden Schüler heraus, indem es mit seiner Psyche spielt,
• Studenten haben einfach keine Zeit zu schummeln,
• und es fügt auch ein gewisses Maß an Wettbewerb zwischen ihnen hinzu

Aber ein Quiz-Timer funktioniert gut, wenn alle Fragen gleich gewichtet sind oder vom gleichen Typ sind. Wie zum Beispiel ein Mathe-Quiz. Aber was ist, wenn ein paar mathematische Fragen nur ein Teil des Quiz sind und nur diese speziellen Fragen zeitlich festgelegt werden müssen?

Nun, in diesem Fall benötigen Sie einen Timer pro Frage anstelle eines Quiz-Timers.

Jetzt bietet LearnDash keinen Timer pro Frage.

Du weißt, dass.

Und deswegen bist du hier oder?!

Also, für die Szenarien, in denen Sie zeitgesteuerte Fragen hinzufügen müssen, werde ich Ihnen erklären, wie genau Sie ein Zeitlimit für jede Quizfrage in LearnDash hinzufügen können.

Folgendes werden wir versuchen zu erreichen:

1. Wir fügen für jede Frage ein optionales Feld hinzu, in dem Sie ein Zeitlimit für jede Quizfrage angeben können.
2. Das Zeitlimit wird dann im Frontend für die Quizfrage angezeigt und die Schaltfläche „Nächste“ Frage wird ausgeblendet.
3. Wenn dem Schüler die Zeit ausgeht, wird automatisch die nächste Frage angezeigt.

Nun muss ich Sie warnen; Sie benötigen ein gutes Maß an PHP- und JavaScript-Entwicklungskenntnissen, um diese Lösung zu implementieren. Wenn nicht, müssen Sie sich an einen LearnDash-Entwickler wenden , der Ihnen hier weiterhelfen kann.

Okay. Lass uns zur Arbeit gehen.

Schritt Nr. 1: Fügen Sie eine Einstellung für das Fragezeitlimit hinzu

Sie müssen zunächst für jedes Quiz eine einfache Einstellung hinzufügen. Natürlich ist es nicht so einfach, wie es scheint.

Wenn Sie ein Entwickler sind, der bereits an LearnDash-Quiz gearbeitet hat, wissen Sie, dass es keine Haken gibt, mit denen Sie arbeiten können. Es gibt keinen Haken, mit dem Sie den Einstellungen für Quizfragen ein Feld hinzufügen können.

Aber keine Sorge. Wir werden den Kern hier nicht anpassen. Was wir tun werden, ist die Verwendung von JavaScript-Magie.

Mithilfe von JavaScript platzieren wir ein Feld über der Schaltfläche „Speichern“ auf der Seite mit den Frageneinstellungen. Der Grund für die Verwendung der Schaltfläche „Speichern“ als Referenz für das Feld liegt darin, dass die Schaltfläche „Speichern“ auf jeder Einstellungsseite für Quizfragen vorhanden ist.

Wir verwenden die ID der Schaltfläche "Speichern" als Referenz, um das Frage-Timer-Feld hinzuzufügen.

Der folgende Teil des JavaScript-Codes zeigt ein Feld „Fragezeitlimit“ über der Schaltfläche „Speichern“.

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

$ content = '<div class="postfach">
<h3 class="hndle">' + 'Fragezeitlimit (in Sekunden)' + '</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 ( $ Inhalt);

Hier ist input_content der Wert des Felds „Question Time Limit“. Standardmäßig muss der Wert auf 0 gesetzt werden. Jedes Mal, wenn Sie (oder ein Benutzer) diesen Wert festlegen, muss er aktualisiert und in der Datenbank gespeichert werden (über PHP gehandhabt). Und in ähnlicher Weise muss es aus der Datenbank gelesen und dem Benutzer angezeigt werden, wenn der Benutzer dieses Feld betrachtet.

Wenn dieser JavaScript-Code in die Warteschlange eingereiht wird, zeigt er das Feld wie folgt an:

Schritt #2: Fügen Sie ein Zeitlimit für die LearnDash-Quizfrage hinzu

Sobald der Feldwert für eine Frage gespeichert wurde, muss der Timer angezeigt werden, wenn die Quizfrage versucht wird. Dies kann mit den folgenden Schritten erfolgen:

• Holen Sie sich den Timer-Wert
• Starten Sie den Timer
• Überprüfen Sie regelmäßig, ob das Zeitlimit erreicht wurde
• Lösen Sie die Schaltfläche „Nächste Quizfrage“ aus

Der Code dafür lautet wie folgt:

 jQuery( '[name="startQuiz"],[name="next"]' ) .click ( function (){
jQuery( '.wpProQuiz_listItem' ) .each ( function (){
if (jQuery(this.). is (':visible')){
$ current_question_id = jQuery(dies). finden (" .wpProQuiz_questionList ");
$ aktuelle_Frage_ID = $ aktuelle_Frage_ID .attr ( "Daten-Frage_ID" );
if (wdmAjaxData.post_meta[ $ aktuelle_Frage_id] ! == undefiniert ){
counter_value = wdmAjaxData.post_meta[ $ aktuelle_Frage_id];
}
sonst {
Zählerwert = 0 ;
}
var wdm_globalElements = {
           weiter: jQuery(this). find ("[name='next']"),
           wdm_timelimit: jQuery(this). finden (' .wpProQuiz_question_time_limit '),
Aktueller_Zähler: Zähler_Wert
};
wdm_globalElements. next .hide ();
var wdm_timelimit = ( Funktion () {
           var _counter = wdm_globalElements.aktueller_Zähler;
           var _intervalId = 0 ;
           var- Instanz = {};
           Beispiel . Stopp = Funktion () {
           wenn (_counter) {
               Fenster . clearInterval (_intervalId);
               wdm_globalElements.wdm_timelimit .css ( "Anzeige" , "keine" );
           }
         };
         Beispiel . Start = Funktion () {
         if ( ! _counter){
wdm_globalElements. next .show ();
Rückkehr ;
         }
         var x = _counter * 1000 ;
         var $ timeText = wdm_globalElements.wdm_timelimit. find (' span ') .text (parseTime(_counter));
         var $ timeDiv = wdm_globalElements.wdm_timelimit. finden (' .wpProQuiz_question_progress ');
         wdm_globalElements.wdm_timelimit .css ( "Anzeige" , "" );
         var beforeTime = + new Date();
         _intervalId = Fenster . setInterval ( Funktion () {
                 var diff = ( + new Date() - beforeTime);
                 var verstricheneZeit = x - diff;
                 if (diff >= 500 ) {
                    $ timeText .text (parseTime( Math . ceil (elapsedTime / 1000 )));
                 }
                 $ timeDiv .css ( 'width' , (elapsedTime / x * 100 ) + '%' );
                 if (elapsedTime <= 0 ) {
                    Instanz .stop ();
                    wdm_globalElements. next .trigger ( "Klick" );
                 }
          }, 16 );
        };
        Rückgabeinstanz ;
        })();
wdm_timelimit. starten ();
}
});
}

Der obige Code blendet die Schaltfläche „Nächste“ Frage aus, während der Timer läuft, und klickt dann darauf, sobald das Zeitlimit erreicht ist.

https://wisdmlabs.com/learndash-quiz-customization/?utm_source=blog&utm_medium=post&utm_campaign=quiz_cusomization_timer&utm_content=DropshippingUnd das Ergebnis sollte wie folgt aussehen:

Ein Frage-Timer pro Quiz funktioniert, wenn Sie einer bestimmten Frage im Vergleich zu anderen Fragen im Quiz eine Gewichtung zuweisen möchten. Dieser Code kann sich als nützlich erweisen, wenn Sie LearnDash um solche Funktionen erweitern möchten.

Wenn Sie das ausprobieren und irgendwelche Fragen an mich haben, schießen Sie los!

Bilder von freepik