This post will contain some free JavaScript code snippets that you can use to customize the default behavior of the quiz plugin WatuPRO.  The snippets can be placed in your theme functions, in the footer of your theme, or (easiest) using a plugin like Insert Headers and Footers.

Each snippet is coded to work on its own. Two or more snippets used at the same time may or may not work together.

Available snippets:

Right-click on an answer to strike-through

Selecting a radio button disables the others

Show only user first name in WatuPRO Play leaderboards

Right-click on an answer to strike-through

This helps the user to visually strike-through an answer to mark it wrong for their own note. The state is non-persistent and will be lost of the page is refreshed. Left click on an answer removes the strike-though and makes it selected just like the normal behavior is.

<script>
jQuery( "label.answer span" ).contextmenu(function(ev) {
  console.log(jQuery(this));
  jQuery(this).css({"text-decoration": "line-through", "font-style": "italic"});
  return false;
});

jQuery( "label.answer span" ).on('click', function() {
   jQuery(this).css({"text-decoration": "none", "font-style": "normal"});
});
</script>

Selecting a radio button disables the others

This snippets make clicking on a radio button in a “Single choice” question exclusive to all other answers – the user can no longer change their answer once they have clicked. The state is non-persistent and will be cleared after page refresh.

<script>
jQuery("input[type=radio].answer").click(function() {
   var classList = jQuery(this).attr('class').split(/\s+/);
   var thisID = jQuery(this).attr('id');
   jQuery.each(classList, function(index, item) {     
    if (item.indexOf('answerof-') != -1) {
        jQuery('.'+item).not('#'+thisID).attr("disabled", true);
    }
  });
});
</script>

Show only user first name in WatuPRO Play leaderboards

This can be used in case you don’t want user’s full “display name” shown in the leaderboard.

<script>
jQuery('.watupro-leaderboard tr:not(.current_user) td.display_name').each(function(i, elt){
 var parts = elt.innerHTML.split(' ');
  elt.innerHTML = parts[0] + ' ' + parts[1];
});
</script>

From version 6.4.8 of WatuPRO (with the Intelligence module installed) there is a new feature for paid quizzes:

It gives you a new level of flexibility allowing you to sell a fixed number of attempts on a quiz for a fee. Here are a few examples how it works:

• If you allow only one attempt on the quiz, a payment will allow a new attempt.
• If you allow for example 5 attempts, after the 5th attempt the quiz taker will again be shown the payment option and let them have another 5 attempts.
• If you allow 2 attempts per 24 hours and the quiz taker uses them, they can purchase another 2 attempts for the next 24 hours.
• If you have selected that the quiz can be re-taken only after at least 12 hours from the previous attempt, user who does not want to wait can pay and void the limitation.

This new flexible option will give you even more opportunities to monetize your quizzes.

The rewards are a good way to enhance participation in your site. When users complete quizzes, they collect points (these same points that you assign to question answers). Rewards can be purchased using the collected points. This can encourage your users to take quizzes (even paid ones) and get rewards.

Creating Rewards

Go to Manage Rewards under the WatuPRO Play menu link in your dashboard and create some rewards:

Each reward can be described by an image, content, media, just anything.

The rewards can be tangible (like a book, sweets, a t-shirt) or intangible (like an e-book, premium membership, etc.). Ideally you should enter quantity for tangible items so you don’t run out of them. But you can do it even for intangible ones to create scarcity.

How Do Users Redeem Rewards?

There are shortcodes you can use to publish a page with available rewards: [watuproplay-rewards table] to display the rewards in a table and [watuproplay-rewards column] to display them into a single column.

Publish one of these shortcodes either on a front-end page of your site or into the User Overview page which you can enable at the bottom of the main WatuPRO Play page in yoru administration.

Use the shortcode watuproplay-points to display the user’s available points balance so they know what rewards they can redeem.

The users will see the list of rewards and will be able to click on the “Redeem” button in case their points balance is enough.

The Process of Redeeming a Reward

Once the participant clicks on the Redeem button their points balance gets reduced with the cost of the reward. The reward is not redeemed automatically! It goes into pending status.

It’s recommended to create an on-screen message which will let the user know that their reward is going to be processed:

You, as an admin will actually ship the physical rewards, enable premium memberships. So you can use the email notification option on the Manage Rewards page to get an email when someone has redeemed a reward.

Once you have “shipped”, go to Manage Rewards page -> View and Ship Redeemed Rewards link -> Not delivered to see and mark these rewards as delivered:

User Rewards Page

In addition to the on-screen message you can enable a section showing the user what rewards they have redeemed along with their status – completed or pending. Use the shortcode watuproplay-userrewards to display such a table. You can do it on a page on the front-end of the site, or inside the User Overview box so it will be shown in the dashboard.