Monthly Archives: November 2014

Design Themes From WatuPRO 4.6.5

Design themes are available in our WordPress quiz plugin WatuPRO, starting from version 4.6.5. The design themes let you control how the quizzes look for your users.
WatuPRO currently have 5 ready design themes. You can choose design theme in WatuPRO Settings page:

select-themeChoose the theme and save. Now your quizzes will use the theme.

Designing your own theme

Designing your own theme is as simple as uploading a CSS file in watupro/css/themes folder. From WatuPRO 5.8.3 and newer we recommend creating folders watupro/themes/ under your WP theme directory and placing the files there (this means folder “watupro” and folder “themes” under “watupro”). This will ensure you won’t use your custom themes when the plugin is updated.

From WatuPRO 6.1.9.5 you no longer need to upload files. There is a link “Create and manage your custom themes” next to the Theme drop-down shown above which lets you create themes directly in the administration.

Please explore the existing themes to get ideas what you can change and how. We can provide design consultations as addon service.

The existing themes

We are starting with 5 built-in themes. Below are small examples of each of them:

The default theme

This theme is used by default in WatuPRO. The prev/next button in this theme do not have a set up design so they follow the buttons design of your global WP theme.

default design theme

The gray theme

gray theme

Mostly black and white.

 

The green theme

Has green buttons and backgrounds on text boxes.

green design theme

The green buttons theme

Similar to the above but the choices are shown as clickable buttons instead of radios / checkboxes.

green buttons theme

The green “namaste” theme

The themes with “namaste” in their name were created for best match with the Premium theme of the learning management system Namaste! LMS. They can be used for standalone quizzes as well, and look very well.

green namaste theme

The blue theme

blue theme

The blue buttons theme

blue buttons theme

The blue “namaste” theme

blue namaste theme

The pink “namaste” theme

pink namaste theme

How To Display Different Message When The User Passes and Fails a Quiz?

Actually WatuPRO is a lot more flexible than having “Failed” and “Passed” outcomes of a quiz. But many users need only “Failed” and “Passed” and the question how to display different content depending on this outcome comes often.

It’s very easy:

Step 1: Create “Passed” and “Failed” grades

Click on the “Grades” link for the quiz and you’ll get to the Manage Grades page. Define what points or % correct answer the user needs to achieve in order to pass. From this number of points up to the maximum number of points (or 100% correct answers) will be your “Passed” grade. Your conditional message will go inside the grade description. For example:

passed-grade

Any points or % correct answers below this will make the “Failed” grade. In similar way, enter your conditional message, if any. For example:

failed-grade

Step 2: Add the variable to your “Quiz output / Final page box

You can use the variable %%GDESC%% to dislay the conditional message accordingly to the achieved result. For example:

final-screen

That’s all! Two really easy steps.

[WatuPRO] How to Open The Export Files (Tab Delimited CSV Files)

In WatuPRO all export files are TAB (tabulator) delimited CSV files. The reason we use this format is because comma delimited files are more error prone when the data contains rich text, HTML, commas, quotes etc. Tabulator is a lot more reliable as delimiter when importing and exporting data.

If you use Microsoft Excel here are a couple of links that will help you:

The official Microsoft guides

A pictorial by Excel Easy

Here at Kiboko Labs we prefer to use Libre Office Calc. It’s free and has versions for Mac, Windows, and Linux. When you double-click a .csv named file it automatically suggests the proper delimiter. Just select UTF-8 (Unicode) as encoding, if this is not already selected and open the file. Much easier.