Tag Archives: update

Personality Quizzes in WatuPRO

A personality quiz is a quiz where the results do not depend on from-to points collected (or % correct answers) but the answers are directly matched to the result. So with a classical example of Intorvert / Extrovert type of quiz answer A of question 1 could be giving 1 point to Introvert category and answer B might be giving 2 points for Extrovert category. Answer A on quesiton 2 could be giving 3 points for Extrovert etc. At the end of the quiz the result that collected the most point is the respondent’s personality.

Here is a really basic example.

And here is how you can create such a quiz:

1. You need the Intelligence module installed. When creating your quiz you need to check the following checkbox in the “Intelligence Module Settings” area:

 

2. It’s recommended to then go and create your Personality types:

personality-grade

 

Unlike Grades, the personality types do not have “from points” – “to points” setting. This is because they are directly matched to question answers (see below).
If you wish you can assign certificates just like in the knowledge quizzes.

3. Create your questions

When creating them, directly match the possible answers to the possible results:

If you wish you can use “Correct answer” and “points” fields but they usually don’t make sense in personality quizzes. Only the “Assign to grade” selection will be taken into account when calculating the result of the quiz.

From WatuPRO version 5.0.3.2 and above points actually matter. Quizzes work as they used to when you enter 0 or 1 point. We will count one point for the associated personality type(s) in both these cases (because adding zero when you have selected that personality type makes no sense). But this and future versions allow you to enter more points and they will be calculated to the associated personality type(s). So you can give some question  or answer more weight by assigning 2 or more points to it.

Sortable questions are special case. Learn more about them here.

4. Setup your Final screen:

fina-screen-personality

This is not too different than the final screen on knowledge quizzes and exams. Except that most probably you won’t use tags for number of points and correct answers (although you can include this information if you wish).

That’s it.

Elaborating Quiz Results

You can also elaborate this by including information how the different personality types rank for the given quiz taker. The information below is also available in the internal Help page of the plugin:

The following shortcode can be used only in the “Final Screen” and email box to improve the content shown to the user on personality quizzes. Many personality quizzes work better when displaying not just the assigned personality type but also information how many answers the user gave for the other types. Here is how to use it with an example:

[watupro-expand-personality-result sort="best" limit=3 empty="false"]
For personality type {{{personality-type}}} you gave {{{num-answers}}} answers ({{{percent-answers}}}% of all).
<p>{{{personality-type-description}}}</p>
[/watupro-expand-personality-result]

Inside this shortcode you can use ONLY the 3 curly-braced variables shown above, exactly the way you see them. Don’t use %%GRADE%%, %%GDESC%%, or %%GTITLE%% or other of the global variables inside the shortcode.

The text inside the shortcode will be repeated for every personality type. All the arguments in the shortcodes are optional:

  • sort defines how the types are sorted. You can sort by “best” (most answers collected type on top), “worst” (least on top), “alpha” (alphabetically by type title). If you don’t specify the parameter the types will be sorted by the order you created them.
  • limit can be used to limit the number of personality types shown after sorting. Will be useful if you have tens of personality types and want to show only the ones that user gave most answers for. Or set to “1” to display information only for the type they received as result. If you don’t include this parameter all the existing types will be shown.
  • empty defines whether the personality types that got 0 answers will be shown. When the parametter is skipped, they will be shown. When set to “false” they will be excluded.

Multiple Personality Types

From WatuPRO 5.3 in case several personality types rank first with the same number of “points” they will all be displayed to the quiz taker.

If you have assigned certificates they won’t be issued in these cases (this may change in a future version).

Note the option “Assign only one personality” in the Intelligence module tab (just under the “This is a personality quiz” checkbox). If you select it, you will have the quiz work the “old” way – in case of a tie only one personality type will be assigned instead of multiple personalities.

Personality Chart

From version 6.1.4 you can use the shortcode watupro-personality-chart to print a bar chart from the performance on each personality type. This shortcode can be used on the “Quiz output / Final page” box (or in the email contents sent right after completing the quiz).

Supported shortcode parameters:

  • bar_width is the width of each bar in pixels. Defaults to 200.
  • label is the text shown under each bar. It supports the variables {{personality-type}} and {{points}}
  • colors is comma separated string of desired colors of the bars.  You can skip the parameter, then default set of colors will be used.

Here is an example chart and the shortcode used to display it:

[watupro-personality-chart bar_width=250 label="{{personality-type}}" colors="#AA0070, #B91ACC, #C0FA9F"]

The chart will display up to 10 bars.

To pass associative colors (so you can attach a color to a personality) use the attribute assoc_colors instead of colors. Each color will consist of the numeric personality ID (visible in your Manage Personality Types page), a colon, and the color. Example:

[watupro-personality-chart bar_width=250 label="{{personality-type}}" assoc_colors="1:#AA0070, 3:#B91ACC, 4:#C0FA9F"]

This way each personality bar will have the specified color for that personality regardless how they rank.

Myers – Briggs Personality Tests

These are very specific and usually are not created using this feature. Learn how to create Myers-Briggs tests here.

Sample Personality Quiz: What is The Best Fruit For You?

The sole purpose of this quiz is to demonstrate how personality quizzes in WatuPRO + Intelligence module work. Please don’t take the result too seriously 🙂

1. What is your favorite color?
2. Do you like soft or hard fruits?
3. Where do you leave?

 

Dynamically Add Input Form Fields With jQuery

28 Replies

And how to deal with the data on the server-side (PHP)

A very frequent requirement from customers is to have input fields dynamically added to a form while typing in it. This should happen without refreshing the page because the user shouldn't be submitting the form before all their information is completed. Here below is a simple example of such interface:
Item quantity: Item name:
Click on the "Add Row" button and you'll see it in action. Ever wondered how to do something like this? Let me show you.

Download Working Example Here! (some fixes to the code are added inside)

The HTML

The HTML code for this is actually quite simple. It's just a form with onclick action at the "Add row" button: [sourcecode language='html']
Item quantity: Item name:
[/sourcecode]

The JavaScript (jQuery)

If you had to do this with basic Javascript, it would require lots of typing. But the jQuery's html() method takes all the browser-related hassle out of you, so you can just construct your HTML code and append it when the button is clicked: [sourcecode language='javascript'] var rowNum = 0; function addRow(frm) { rowNum ++; var row = '

Item quantity: Item name:

'; jQuery('#itemRows').append(row); frm.add_qty.value = ''; frm.add_name.value = ''; } [/sourcecode] This function simply constructs HTML code for a new row while filling the form field values from the data supplied by the form. Then it appends the code to the wrapper DIV element and cleanups the values in the original form. Cleaning up the values is good user experience practice in such cases. Otherwise the user will be confused whether the first row will be stored to the database or not. The added rows don't have another "add row" button. Instead of this they have "remove" button in case the user has added too many rows and wants to delete some of them. Here is the removeRow() function: [sourcecode language='javascript'] function removeRow(rnum) { jQuery('#rowNum'+rnum).remove(); } [/sourcecode] Now you can see why we needed to count the rows and to use that rowNum global variable. We needed unique ID on each row so it can be removed.

The Back-End (PHP) - Inserting the records

At the server-side there is a straighforward and a tricky part. I'll show you the easy one first - inserting the data. Let's assume we have a MySQL database and a very simple table called products with fields id, qty and name. So when processing the POST data we'll do something like this: [sourcecode language='php'] foreach($_POST['qty'] as $cnt => $qty) { $sql = "INSERT INTO products (qty, name) VALUES ('$qty', '".$_POST['name'][$cnt]."');"; // run the query - with mysqli_query or whatever database wrapper you are using // ... } [/sourcecode] (Please note there is no security filtering done in the query above) In case you don't understand, here's the explanation: as the field names had [], in PHP this will send $_POST array with the name of the field and the values from all form fields with this name. So we are iterating through the $_POST array 'qty' while taking the current index in $cnt. Then we use the same $cnt to match the same row value in $_POST['name']. And that's it, the data is inserted.

The Back-End (PHP) - Updating the records

This is where the things become tricky. We have several goals:
  • To let the user see and edit already inserted data
  • To let the user add new data
  • To let the user remove data
This means we have to construct some more HTML and basically break it in two parts - editing existing data and adding new data. The HTML/jQuery code for adding new data will be exactly the same as above. So let's see what can we do with the existing data: [sourcecode language='php'] // let's assume you have the product data from the DB in variable called $products foreach($products as $product):?>

Item quantity: Item name: Mark to delete

[/sourcecode] What's going on here? We are iterating through the existing DB records and displaying similar forms for them letting the user edit the data. We also add a checkbox that allows them to mark a product for deletion. All the changes will be stored after the form is submitted. Like this: [sourcecode language='php'] // first delete the records marked for deletion. Why? Because we don't want to process them in the code below if(is_array($_POST['delete_ids']) and !empty($_POST['delete_ids'])) { // you can optimize below into a single query, but let's keep it simple and clear for now: foreach($_POST['delete_ids'] as $id) { $sql = "DELETE FROM products WHERE id=$id"; // run the query - not shown } } // now, to edit the existing data, we have to select all the records in a variable. $sql="SELECT * FROM products ORDER BY id"; $products = .... // run your DB wrapper methods here to fill $products // now edit them foreach($products as $product) { // remember how we constructed the field names above? This was with the idea to access the values easy now $sql = "UPDATE products SET qty='".$_POST['qty'.$product['id']]."', name='".$_POST['name'.$product['id']]."' WHERE id='$product[id]'"; // run the query } // (feel free to optimize this so query is executed only when a product is actually changed) [/sourcecode] And after the above is done, don't forget to also add the new products with the same code as in "Inserting the records" section. That's it. Was it clear and easy?

A Few Interesting Scripts

Browsing Codecanyon I've found several ready scripts that do something like what I have described above. Have a look at them and decide yourself if some of them can do the work for you: