SCalc Custom Chart Shortcodes

To add a custom chart you will need to things: The shortcode and a data table from which SCalc generates the datasets and labels.

[* schart type=”line” symbol=”€” height=”300″ width=”200″ show_table=”1″ *]

Here is the place for the table. It must be a valid HTML table.

[* /schart *]

Colors can be set in the Settings panel SCalc. Same colors will used for calculators and custom charts.

The options:

type: line, bar, doughnut, pie (mandatory)
symbol: Appendix for labels and legends (i.e. $) (optional)
height: pixel or percent numeric (i.e. “100%” or “300” for 300 px) (optional)
width: same as height
thousands: , or . (defaults to “,”. If your table data contains formatted numbers you must set this according to data format)
decimals: , or . (defaults to “.”. If your table data contains formatted numbers you must set this according to data format)
show_table: “0” or “1” Display the data table or not (optional)

Be careful with width and height: Since charts are responsive, adjustment of width and / or height may lead to unwanted results.

Create a calculated survey which leads to a result page or post

Step-By-Step

Create a calculated survey which leads to a result page or post

Let’s imagine you want to create poll, which forwards the visitor after a specific page that corresponds to the poll results: SQuiz3 is able to solve this.
Scenario can be: You want to show visitors how healthy his diet is.

Step 1

Create new questions as multiple choice questions where the correct checkbox is unchecked – we don’t have to proof the users answer.w e will only count occurence of certain values.
So important is the field ‘Special Value’ in each answer.

question_2

You see here the special values from a to d. At the end Squiz will count occurences of these values and will redirect to the relevant page corresponding to this value. Next step will show the setup of the survey.

Step 2

Create posts (or pages) for every possible result of this survey. That means a post for majority of a, b, c and d. Additionally you need a post for results that are ambiguous. That means result has equal counts for more than two values.

Step 3

Create a survey as usual but give following additional inputs:

diet_1

Set the switch ‘Calculated Survey’ to on. Save it, add your questions and the button labels:

diet_1a

And now the important part: Set posts or pages as target for the special values:

diet_2

Now save this survey and insert the shortcode in a page or post.

The result:

How Healthy is your diet?

Please select an option
Please answer the following questions about your daily diet. We will show you at the end, how healthy it is.

 

Survey Sample

Squiz Survey

Please select an option
An Example for little survey to collect users impressions and experience with SQuiz.

Quiz Sample

This is an quiz example.

A Fast Coding Quiz

You must select an answer
This quiz tests your php coding skills. Just three question in 60 seconds.

The passing score is 50%.

And here comes the top ten list for the quiz:

Topten list for A Fast Coding Quiz

Correct AnswersPercentageDate
1 5 100 2016-08-09 20:13:38
2 5 100 2016-08-17 14:34:27
3 4 80 2016-09-02 12:57:50
4 4 80 2016-08-12 09:51:06
5 4 80 2016-08-11 18:37:40
6 4 80 2016-08-09 21:01:21
7 4 80 2017-05-04 13:17:39
8 3 60 2016-09-12 11:42:28
9 2 40 2016-08-11 06:21:31
10 2 40 2016-09-29 07:53:34

Creating Questions

Choose New Question from the SQuiz menu.

You will get the edit form with a popup which prompts you to select a question type.

2016-08-10 15_09_41-Edit Question-choose type

After that the page will reload and gives you the correct form for your question type. You can’t change the question type after this decision.

Fill the basic data: type your question, category and maybe explanation and save the question. You cannot add answers before saving the question.

Then click the Add Answer button (if present). Depending on question type you have following options:

Answers for Choice Questions

2016-08-10 15_21_35-Edit Question addanswerssinglemulti

You will get an empty answer in the list. Clicking the edit icon in the left top corner will open a modal box with the visual editor to edit the text or media. You can mark this answer as correct by checking the box on the left side.

If you mark more than one answer as correct the question will be a multi choice question in frontend.

You can drag and sort the answers. This would be the order on frontend.

After each change the Save Answers button will appear. You must save them explicit. Update question if you are ready with all.

Answers for Order Questions

2016-08-10 15_26_20-Edit Question addanswer-order

Everything similar to choice questions but you will get no correct box as all answers are correct. You must sort them in the order you expect to be the question recognized as correct. In frontend SQuiz will randomize the order for the quiz player.

Answer for Cloze Questions

2016-08-10 15_29_22-Edit Question addanswer cloze

There is no answer in common sense but the cloze text. You get the visual editor and type your text as usual. Now you enclose all words with |* and *| (pipe asterisk and asterisk pipe) the user must input in frontend. SQuiz will replace this words with input fields, every field as long as the longest gap. In evaluation the words will be compared in the order they found in the text.

Answer for Text Question

2016-08-10 15_32_51-Edit Question addanswer-text

The text question only have one string as answer. You cannot use html to format this because evaluation would not be possible. Input here the text you expect as answer from the user exactly in spelling, indentation lower and upper case. This is important, because SQuiz compares the user answer and your text character by character on exact equality. Answer will only recognized as correct if both are exact equal.

Building Quizzes with SQuiz3

To start all kinds of items find the SQuiz menu on top of the WordPress menu.

2016-08-17 09_49_16-SQuiz Menu

Select New SQuiz Item. The form will open and you must input the basic data. That is:

  1. a title
  2. item type and template
  3. button labels ( bottom of the page )
  4. decide if you want to randomize questions, show review at end (only quizzes), time limit and passing score.

2016-08-17 09_53_46-Edit SQuiz Item Type and Template

After that you have to save the quiz otherwise you cannot add questions.

You should have already created some questions for your quiz, otherwise you must do that now.

Adding Questions

2016-08-10 15_03_48-Edit SQuiz Item-question_map

Questions on the left side are available, on the right already assigened to this quiz. Simply drag questions to the right to add them, click the remove button in the upper right corner to remove them from the list.

You can filter the available questions by category and type. Every update of this list will be saved dynamically by AJAX.

In case of polls you can add more than one question, but this don’t has any effect to the frontend: Only the first question will be available for the visitor.

Ending

You can add some information and text add the end. Use following placeholders to insert information:

  • {passing score} : Predefined passing score
  • {result score} : Predefined passing score
  • {correct} : Correct answered questions
  • {question count} : Overall question count
  • {question answered} : Answered questions by user
  • {time} : Time user needed to complete the quiz

2016-08-17 10_58_36-Edit SQuiz Item Quiz ending

If you leave this empty, nothing will be displayed after voting.

An optional review button will be added automatically if you check ‘Show Review’ in quiz options

Installation

SQuiz3 and sk-library Installation

The download archive contains to plugins: SQuiz3 and sk-library.
You must install both within the wordpress plugin panel. Activate first sk-library and then SQuiz3. Activation process of SQuiz3 will install the necessary database tables.

SQuiz 3 contains an update checker so that you will be informed about plugin or library updates.

IMPORTANT

For all purchasers of WP SQuiz in older versions (2.x): You MUST deactivate and delete the SQuiz and SQuiz User Plugin. Old and new Version are not compatible.

Deleting the old version don’t affect the database so that you can import old quizzes to the new plugin. An update script will be available soon.

 

Templates

SQuiz 3 uses the TWIG template engine. Most outputs are generated by the template engine so that you are able to customize it by creating your own templates.

Quiz items will get the template parameter through settings in the quiz edit page.

Templates for emails send from Evaluation area can be selected in the options menu on the result detail page.

All templates are located in /SQuiz/templates, quiz item templates have own folders with multiple template files for each layout part. A full set for quizzes look like this:

2016-08-16 12_33_17-squiz3-standard-template

If you want to build your own you have not to create each template part. All parts you omit will be searched in /standard. Learn more about Template Overloading.

Basically contain templates simple html code. Every dynamic output generated by php is enclosed with double curly braces {{ my_var }}.

Every programatically stuff is enclosed in curly braces and percent signs. For example:

<div class="squiz_checkbox_container">
    <input type="checkbox" name="quizdata[question_{{ item.id }}_{{ question.id }}]"
               id="quizdata_question_{{ item.id }}_{{ answer.id }}"
               data-question="{{ question.id }}"
               data-answer="check"
               class="squiz_checkbox squiz_hide" value="{{ answer.id }}" />
    <label for="quizdata_question_{{ item.id }}_{{ answer.id }}" class="squiz_label squiz_label_checkbox">
        {{ answer.text|raw }}
    </label>
</div>

This is the answer_checkbox template. You can make a copy into a new folder and change everything in this template but you must include the dynamic outputs as seen in the example above. If there is something missing like data-question tag or name tag of the input field the quiz item won’t work.

As you can see in the label tag there is as content answer.question and divided by a pip a modifier ‘raw’. This causes the text is displayed as is – html code will be put out  as html and not as text.

Be careful: Do not customize basic templates delivered with this plugin.The next update will override your changes. Make a copy of an email template respectively copy a folder and make your additions or changes there.

More about Twig can be found here.

Shortcodes

There are two shortcodes available:

  1. ([) squiz id=3(]) and
  2. ([) squiz-topten id=3 count=10 month=2 year=2016 show_user=1(])

1.) This is the basic shortcode to display all kinds of items and it takes no other arguments than the item (quiz) id. It will display the item using the predefined template.

2.) To display a list of participations use this shortcode whereby following arguments are allowed:

  • id = the item id
  • count = integer number of entries to display
  • month = integer the month of participation
  • year = the full year of participation
  • show_user = integer (0/1) show the user name or not (=0)

You can omit every argument except the id. Default values will be:

count = 10
show_user = 1
month and year = 0 (show all)

To display the list the template named top_ten.twig is used.

Discover more about Templates and Template Overloading.

 

Overview

System requirements

Frontend

  • Modern html5 browser
  • Cookies enabled
  • Javascript enabled

Backend / Server

  • Client with modern browser, javascript and cookies
  • MySQL database (mandantory for wordpress also)
  • PHP 5.4 or newer
  • WordPress 4.5.x or newer (older versions maybe also ok but we offer no support for them)

Features

  • Three item types: Quiz, Survey and Poll
  • Five question types: Single choice, multiple choice, order, cloze and free text.
  • Template engine and templates for all items. Template overloading and fallback for missing elements.
  • Randomizing questions as option per item.
  • Detailed evaluation and statistics with multiple export options.
  • Detailed quiz review for end user after completing a quiz.
  • Database time control for quizzes with time limit.
  • Internal session management to manage page reloads on all items.
  • Full visual WordPress editor for questions and answers.
  • Questions can be assigned to categories.
  • Multiple filter for questions on edit quiz pages.
  • Save deleting of quiz items and questions: SQuiz will check if questions are in use or quizzes are part of any evaluation or statistic.

The difference between quiz, survey and poll can be found mainly in the evaluation. Only quiz evaluation has the possibility to drill down to single user participation. Poll and survey  participations are only visible as aggregated data.

Another restriction with polls is that you can have only one choice question. Additionally a hashed ip is saved in an internal session for participation so that a visitor only can vote once a day. When reloading the page the result will shown up.

Basically SQuiz starts an internal session based on a client cookie if a visitor starts a quiz, survey or poll. So user must accept cookies to participate, otherwise quizzes wont work. The cookie only contains a single number – this is the id to the internal session. There is no security issue, neither for the visitors nor for the system. The session will be deleted if it has expired (one day) or if the cookie on the client is missing.

All this is necessary to save a visitors state. If he reloads the page while playing a quiz the quiz will continue exactly where it was before reloading. So he don’t lost answered questions when he unintentionally reloads the page or the browser gets stuck at any point. In case of polls this should avoid multiple participations by one visitor.

Customizing basic layout and styles is easy. You only have to override parts of a template with your own template and add a new stylesheet file. Please read more about Templates and Template Overloadiung.