Image

Quizzer Stack

Fun and engaging quizzes for Rapidweaver

Quizzer Stack

Quizzer is a Rapidweaver stack that allows you to add an engaging and interactive quiz to any web page. Quizzes such as this are great for driving traffic to your website and for linking to via your social media networks.

Quizzer Features

Until now the best alternative to add questions into RapidWeaver has been to try and use a form stack or to embed a quiz from an online generator. Using a form stack is a reasonable option for adding single questions but if you want to create a proper quiz then it is very hard (if not impossible) to achieve via most form stacks - certainly if you are wanting to provide things like per question feedback or to calculate scores etc.

Most online quiz generators offer a very limited free service. Even the paid versions are not particularly impressive. The options for styling your quiz are often limited and it can be hard to match your content to the rest of your site. Additionally, this approach also means that your quiz content is hosted on their servers.

Neither of these are particularly attractive options and so Quizzer stack was born.

Beautiful quizzes

Add beautiful, fully-configurable quizzes to your web pages. Use for fun or to allow user to test their knowledge.

Engage your audience

Interactive elements within your content helps people to engage with and retain your content.

Extensive options

You can use single or multi-choice questions and give constructive feedback based on whether the response was correct or incorrect.

Scores and ranking

You can (optionally) score and rank how well the user has done.

Your quizzes can be used just for fun or can be used as a 'knowledge check' within any educational content.

Additionally, quizzes are great for using to stimulate interest in your website / brand. Set up your quiz in your RapidWeaver site and then send out links to it via your social networks with appealing text such as: 'See how much you know about…' or 'Test your knowledge on…' or 'How well do you know…..?'

View more examples

These examples show different functionality and the use of media

Quizzer Stack Settings

Image
Quiz Link

Provide a link to where your JSON Quiz file is located. This could be within Rapidweaver Resources or a location on your web server. (See next section for details about creating your Quiz file)

Note: Quizzer stack links to a JSON quiz file (see Quiz Template section) that contains all of your questions and answers. This is an easy way to create, update and maintain your quizzes.

Start Button

Set the text that you want to show on the button that begins the quiz.

Note: You can remove the start button for the quiz completely if you wish (in Quiz Functions).

Next Button

Set the text that you want to show on the button that moves the user on to the next question.

Submit Button

Set the text that you want to show on the button that submits the user's answer.

Complete Button

Set the text that you want to show on the button that follows the last question in the quiz. The user will be presented with they score and ranking (if those options are selected) after clicking this button.

Try Again Button

If you wish to present an option to let the user re-take the quiz then it is the text that you enter here that will be used for the button.

Note: To not show a Try Again button simply leave this field blank.

Buttons

Use the colour pickers here to set the colours that you want for normal and hover states.

Note: The same colours are used for all buttons within the quiz object.

Feedback

Use the colour pickers here to set the colours that you want for normal and hover states.

Note: The colours selected here are only applied to any elements within your feedback text. See the 'Creating your quiz file' for more information.

Max Image Width

If you have embedded images into your quiz by linking to them within your JSON file then you can set a maximum width that any image should be. This helps to keep sizes uniform within the quiz.

Question Count

You can set the font size that you want the question count text (if using) to appear. This is the text such as 'Question 1 of 5'.

Question

You can set the font size that you want the actual question text to appear. This is the text that you have added to the 'q' elements of your JSON file.

Quiz Title

Set the size that you want the quiz title to appear in your quiz.

Note: The text for the quiz title is set in the JSON quiz file.

Score

Set the size that you want the score text to appear in your quiz. This is shown after the final question has been completed.

Ranking

Set the size that you want the ranking text to appear in your quiz. This is shown after the final question has been completed.

Note: The text for the various rankings are set in the JSON quiz file.

Override Theme Sizes?

This option lets you manually set the font size for each text element within the quiz.

Note: If you want the quiz to look like the rest of your text then you would generally just use the theme settings. In some circumstances however it will be useful to override these.

Remove answers indent

By default, the answer options are inset from the left-hand-side. If you wish for them to be flush with the left then check this box.

Remove feedback indent

By default, the feedback is presented inset from the left-hand-side. If you wish for it to be flush with the left then check this box.

Note: Removing the indent for the feedback and leaving it for the answer options is a nice effect.

Include start button

If selected this option will display a button that the user needs to press to begin the quiz. If unselected then the first question will be shown on load.

Randomise questions

If selected, the questions from your source file will be shown in a random order. If unselected, they will be shown in the same order as they appear in the quiz file.

Randomise answers

If selected, the possible answers to each question will be shown in a random order. If unselected, they will be shown in the same order as they appear in the quiz file.

Limit questions

If your JSON file contains (e.g.) 10 questions, you can choose to limit Quizzer to only showing a certain number of them.

Note: This is a great way to present different questions to people each time they visit your site.

Important: You should also select the option to 'randomise questions' if you are limiting how many appear. This will ensure that different questions are displayed each time.

Prevent unanswered

If selected, the user will not be able to proceed to the next question without first answering the current question. A message will be shown to the user advising this.

Show feedback

If selected, the user will be shown the answer feedback (correct or incorrect) after they answer the question.

Retain questions

If selected, the question (and selected answer(s)) will remain visible when the question feedback is shown.

Review questions

If selected, all of the questions, answers and feedback will be shown at the end of the quiz. Useful for the user to review their quiz attempt. Also useful if not showing feedback within quiz so that user can see which questions that they got correct or incorrect.

Show question count

If selected, the question count (i.e. Question 1 of 5) will be shown above the questions. If unselected, this text will be hidden.

Show question number

If selected, the question number will be shown before the question text. If unselected, this number will be hidden.

Show final score

If selected, the user will be shown their score (i.e. 3 / 5 correct). If unselected, then no score will be displayed.

Score as percentage

If selected, this option will display the final score as a percentage (e.g. 80%) as opposed to showing how many were correct (e.g. 4/5).

Show score rankings

If selected, the user will be shown their ranking based on how well they have scored. The ranking text is set within the quiz JSON file. If unselected, then no ranking will be displayed.

Buy now

Buy this stack for

Quizzer Quiz File

The actual content for the quiz (questions, answers, feedback etc) is not created within RapidWeaver. Instead, a separate file (in JSON format) is used and you link the stack to that. The file can sit in your RapidWeaver Resources folder or you can add it to an online folder somewhere and then link to it there. The latter option means that you are effectively 'warehousing' your quiz file and allows you (or others) to edit and update the content outside of RapidWeaver.

A JSON template is provided with the stack and can be edited in any plain text editor (e.g. TextEdit) or code editor (e.g. Brackets or Atom). Probably the easiest way to create your JSON quiz files though is by using an online JSON editor such as JSONeditoronline. Simply paste the example JSON text in there, edit and then download the JSON file to your computer. This particular tool has the added benefit of allowing you to drag and drop sections of the text to let you more easily change the order of questions etc. The JSON files for the examples used on this page can be downloaded in the section below.

The JSON Quiz file

The Quiz file is made up of 2 components 'Info' and 'Questions'. The best way to see how this works is to simply look at the file / structure and cross-reference it with the quiz object. You can download the JSON file used for the RapidWeaver example quiz (from above) using the button below.

Download
0
Information

The info part allows you to add some information about the quiz, such as title and description. It is also where you can set up some of your feedback for display at the end of the quiz (i.e. results and the ranking levels).

Image
Questions

The questions section of the JSON file contains as many questions as you wish. Each containing (as a minimum) what you can see in the image below: A question ('q'), an array of possible answers ('a') and feedback text for correct and incorrect. The text that is added to the <span> parts of the feedback text will show in the colours that you set in the stack settings (e.g. green for correct and red for incorrect).

Image
Questions - Additional Options

In addition to these basic options for creating questions. You can also style the text (bold, italics etc) and add images. There is also a method available to allow a question to be marked as correct if any of the correct responses have been selected (as opposed to the default of needing them all to be selected). Likewise, where a question has only one correct answer you can set the question to show checkboxes (as opposed the default of using radio buttons).


This may look tricky or sound complicated (if you are not used to working with files such as this) but all you really need to do to make your quiz is simply edit any of the template quiz files that come with this stack and replace the existing text for the text that you want. If you need more questions simply copy and paste an existing question.

A detailed guide about the JSON Quiz file structure can be downloaded below.

Download
0

Quizzer stack is based upon the SlickQuiz jQuery plugin

© Shaking the Habitual Contact Us