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.
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.
Add beautiful, fully-configurable quizzes to your web pages. Use for fun or to allow user to test their knowledge.
Interactive elements within your content helps people to engage with and retain your content.
You can use single or multi-choice questions and give constructive feedback based on whether the response was correct or incorrect.
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…..?'
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.
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).
Set the text that you want to show on the button that moves the user on to the next question.
Set the text that you want to show on the button that submits the user's answer.
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.
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.
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.
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.
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.
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'.
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.
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.
Set the size that you want the score text to appear in your quiz. This is shown after the final question has been completed.
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.
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.
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.
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.
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.
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.
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.
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.
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.
If selected, the user will be shown the answer feedback (correct or incorrect) after they answer the question.
If selected, the question (and selected answer(s)) will remain visible when the question feedback is shown.
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.
If selected, the question count (i.e. Question 1 of 5) will be shown above the questions. If unselected, this text will be hidden.
If selected, the question number will be shown before the question text. If unselected, this number will be hidden.
If selected, the user will be shown their score (i.e. 3 / 5 correct). If unselected, then no score will be displayed.
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).
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.
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 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.
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).
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).
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.
Quizzer stack is based upon the SlickQuiz jQuery plugin