Setting up a Timer in WooCommerce Sensei

WooCommerce Sensei has been climbing up the LMS ladder for quite a while now. A lot of users are now switching to Sensei due to its intuitive features. However, once in a while we encounter some smart customization request which takes our development experience to a whole new level. One such request was to add a timer during a student quiz in WooCommerce Sensei.

Client Requirement

Our client wanted to set up an optional Timer for Quizzes of his choice. If a Quiz timer was set, it had to be displayed whenever a student started the Quiz. This was a crucial requirement as a timer would be very helpful to students to keep a track of their performance as well as Time-Management in a subject.

Before starting with the solution, let us get familiar with some terms that we would be using in our customization.

Admin: Client and the owner of the LMS.

User: Student taking the course.

Module / Project: Our customization project.

Let us take a look at our approach towards the customization.

Our Solution

We provided a setting on the “Edit Lesson” page. Here, Administrator can activate the timer for a Quiz and set the timer accordingly. We used PHP, JavaScript for the customization and worked on WooCommerce and WooCommerce Sensei.

This would allow an optional timer for a quiz to be enabled and the admin could set the time in hours, minutes and seconds. We also provided a setting to make the quiz accessible only after certain day(s) of user registration.

This is how the quiz page looked like:

As shown above, the time remaining would be shown & regularly updated. The admin could also enable it to be a floating timer for the user’s convenience.

If the admin wanted to set some minimum days to restrict the quiz access, it would be checked against the user’s registration date and an appropriate message like ‘Quiz will be accessible only after <N days> after registration. You can access the Quiz on <date>’, would be displayed.

Features for the Admin

• Enable a quiz timer and set its duration.
• Enable a quiz reset button.
• Enable a floating timer.
• Set the minimum number of days to restrict quiz access.
• Set a minimum number of days after registration to take the quiz.

Features for the User

• The user could pause the timer and Save the Quiz. He/She could then resume back from the remaining time later.
• If a user accidentally closed the window, then the time spent would be saved and the user would get only the remaining amount of time when he/she took the quiz again.
• After the timer ran out, the Quiz would be submitted automatically.
• We also added a validation in which a message would be displayed if the user tried to open the quiz in a new window.

And the End Result is?

We were able to complete the customization swiftly. This timer can be used in all Sensei instances, such as training courses, universities, e-learning platforms and other places where a timer for an examination is required.

Want help with similar customization or functionality? Drop a comment below!