Quiz
Updated 5 years ago to v2.0.0 by Flourish team
How to use this template
This template is ideal for showing possible misconceptions, by comparing users' answers with statistical data.
Data requirements
This template consists of 3 sheets.
- Questions, which contains your question
- Answers & Scores, which contains answers and scores for each question
- Results, which contains the end result you see after finishing the quiz.
The Questions and Scores sheets are connected to each other. So the Answers & Scores sheet contains answers that are linked to questions in the Questions sheet. The Results sheet is entirely optional and can be used to show a message at the end of the quiz.
Tips
- If you want to show different feedback for a range of answers, you can use - to capture all the answers between two numbers.
- You can change and translate all the text in this visualisation via the settings panel
- You can specify the default comparison in the settings panel
Credits
Created by the Flourish team. The sample data in this project come from FAO
API information
This section documents API usage specific to this template, so for an introduction we suggest you refer to the generic API documentation instead.
template: @flourish/quiz
version: 2
Template data
There are three different formats in which you can supply data to this template. The most convenient for you to use likely depends on the source of your data, as described below.
1. Array of arrays, and a bindings object
You can supply arrays of arrays to opts.data, which might look
like:
{
data: {
questions: [
[ "QuestionsColumn1Value1", "QuestionsColumn2Value1",
[ "QuestionsColumn1Value2", "QuestionsColumn2Value2",
[ "QuestionsColumn1Value3", "QuestionsColumn2Value3",
...
],
scores: [
[ "ScoresColumn1Value1", "ScoresColumn2Value1",
[ "ScoresColumn1Value2", "ScoresColumn2Value2",
[ "ScoresColumn1Value3", "ScoresColumn2Value3",
...
],
results: [
[ "ResultsColumn1Value1", "ResultsColumn2Value1",
[ "ResultsColumn1Value2", "ResultsColumn2Value2",
[ "ResultsColumn1Value3", "ResultsColumn2Value3",
...
]
}
}
where each array of arrays represents the rows in a data sheet.
To tell the API how the values from each column should be
associated with the keys that the template is expecting, you must also supply
an object attached to opts.bindings. (The meanings of the
keys in the bindings object are documented
below.) The minimal bindings you can
supply for this template are as shown in this example:
{
template: "@flourish/quiz",
version: "2",
bindings: {
questions: {
text: 0, // index of a column in your data
explanation: 1, // index of a column in your data
input_type: 2, // index of a column in your data
suffix: 3, // index of a column in your data
min_value: 4, // index of a column in your data
max_value: 5, // index of a column in your data
step: 6, // index of a column in your data
},
scores: {
question: 0, // index of a column in your data
answer: 1, // index of a column in your data
is_correct: 2, // index of a column in your data
points: 3, // index of a column in your data
media: 4, // index of a column in your data
explanation: 5, // index of a column in your data
stats: 6, // index of a column in your data
},
results: {
range: 0, // index of a column in your data
text: 1, // index of a column in your data
media: 2, // index of a column in your data
}
},
data: {
questions: [
[ "QuestionsColumn1Value1", "QuestionsColumn2Value1",
[ "QuestionsColumn1Value2", "QuestionsColumn2Value2",
[ "QuestionsColumn1Value3", "QuestionsColumn2Value3",
...
],
scores: [
[ "ScoresColumn1Value1", "ScoresColumn2Value1",
[ "ScoresColumn1Value2", "ScoresColumn2Value2",
[ "ScoresColumn1Value3", "ScoresColumn2Value3",
...
],
results: [
[ "ResultsColumn1Value1", "ResultsColumn2Value1",
[ "ResultsColumn1Value2", "ResultsColumn2Value2",
[ "ResultsColumn1Value3", "ResultsColumn2Value3",
...
]
}
}
All possible bindings that you can supply are shown in this example:
{
template: "@flourish/quiz",
version: "2",
bindings: {
questions: {
text: 0, // index of a column in your data
explanation: 1, // index of a column in your data
input_type: 2, // index of a column in your data
suffix: 3, // index of a column in your data
min_value: 4, // index of a column in your data
max_value: 5, // index of a column in your data
step: 6, // index of a column in your data
comparisons: [7, 8, ...], // index(es) of column(s) in your data
},
scores: {
question: 0, // index of a column in your data
answer: 1, // index of a column in your data
is_correct: 2, // index of a column in your data
points: 3, // index of a column in your data
media: 4, // index of a column in your data
explanation: 5, // index of a column in your data
stats: 6, // index of a column in your data
},
results: {
range: 0, // index of a column in your data
text: 1, // index of a column in your data
media: 2, // index of a column in your data
}
},
data: {
questions: [
[ "QuestionsColumn1Value1", "QuestionsColumn2Value1",
[ "QuestionsColumn1Value2", "QuestionsColumn2Value2",
[ "QuestionsColumn1Value3", "QuestionsColumn2Value3",
...
],
scores: [
[ "ScoresColumn1Value1", "ScoresColumn2Value1",
[ "ScoresColumn1Value2", "ScoresColumn2Value2",
[ "ScoresColumn1Value3", "ScoresColumn2Value3",
...
],
results: [
[ "ResultsColumn1Value1", "ResultsColumn2Value1",
[ "ResultsColumn1Value2", "ResultsColumn2Value2",
[ "ResultsColumn1Value3", "ResultsColumn2Value3",
...
]
}
}
2. Array of objects with arbitrary keys, and a bindings object
This format is most likely useful when you have data from an external source,
such as CSV data loaded from d3-dsv.
You should supply this attached to the opts.data, which might look
like:
{
questions: [
{ "QuestionsHeader1": ..., "QuestionsHeader2": ..., ... },
{ "QuestionsHeader1": ..., "QuestionsHeader2": ..., ... },
{ "QuestionsHeader1": ..., "QuestionsHeader2": ..., ... },
...
],
scores: [
{ "ScoresHeader1": ..., "ScoresHeader2": ..., ... },
{ "ScoresHeader1": ..., "ScoresHeader2": ..., ... },
{ "ScoresHeader1": ..., "ScoresHeader2": ..., ... },
...
],
results: [
{ "ResultsHeader1": ..., "ResultsHeader2": ..., ... },
{ "ResultsHeader1": ..., "ResultsHeader2": ..., ... },
{ "ResultsHeader1": ..., "ResultsHeader2": ..., ... },
...
]
}
... but with the keys being the column headers from your
source data instead. You must also supply an object attached to
opts.bindings. The minimal bindings you can
supply for this template are as shown in this example:
{
template: "@flourish/quiz",
version: "2",
bindings: {
questions: {
text: "QuestionsHeader1",
explanation: "QuestionsHeader2",
input_type: "QuestionsHeader3",
suffix: "QuestionsHeader4",
min_value: "QuestionsHeader5",
max_value: "QuestionsHeader6",
step: "QuestionsHeader7",
},
scores: {
question: "ScoresHeader1",
answer: "ScoresHeader2",
is_correct: "ScoresHeader3",
points: "ScoresHeader4",
media: "ScoresHeader5",
explanation: "ScoresHeader6",
stats: "ScoresHeader7",
},
results: {
range: "ResultsHeader1",
text: "ResultsHeader2",
media: "ResultsHeader3",
}
},
data: {
questions: [
{ "QuestionsHeader1": ..., "QuestionsHeader2": ..., ... },
{ "QuestionsHeader1": ..., "QuestionsHeader2": ..., ... },
{ "QuestionsHeader1": ..., "QuestionsHeader2": ..., ... },
...
],
scores: [
{ "ScoresHeader1": ..., "ScoresHeader2": ..., ... },
{ "ScoresHeader1": ..., "ScoresHeader2": ..., ... },
{ "ScoresHeader1": ..., "ScoresHeader2": ..., ... },
...
],
results: [
{ "ResultsHeader1": ..., "ResultsHeader2": ..., ... },
{ "ResultsHeader1": ..., "ResultsHeader2": ..., ... },
{ "ResultsHeader1": ..., "ResultsHeader2": ..., ... },
...
]
}
}
All possible bindings that you can supply are shown in this example:
{
template: "@flourish/quiz",
version: "2",
bindings: {
questions: {
text: "QuestionsHeader1",
explanation: "QuestionsHeader2",
input_type: "QuestionsHeader3",
suffix: "QuestionsHeader4",
min_value: "QuestionsHeader5",
max_value: "QuestionsHeader6",
step: "QuestionsHeader7",
comparisons: ["QuestionsHeader8", "QuestionsHeader9", ...],
},
scores: {
question: "ScoresHeader1",
answer: "ScoresHeader2",
is_correct: "ScoresHeader3",
points: "ScoresHeader4",
media: "ScoresHeader5",
explanation: "ScoresHeader6",
stats: "ScoresHeader7",
},
results: {
range: "ResultsHeader1",
text: "ResultsHeader2",
media: "ResultsHeader3",
}
},
data: {
questions: [
{ "QuestionsHeader1": ..., "QuestionsHeader2": ..., ... },
{ "QuestionsHeader1": ..., "QuestionsHeader2": ..., ... },
{ "QuestionsHeader1": ..., "QuestionsHeader2": ..., ... },
...
],
scores: [
{ "ScoresHeader1": ..., "ScoresHeader2": ..., ... },
{ "ScoresHeader1": ..., "ScoresHeader2": ..., ... },
{ "ScoresHeader1": ..., "ScoresHeader2": ..., ... },
...
],
results: [
{ "ResultsHeader1": ..., "ResultsHeader2": ..., ... },
{ "ResultsHeader1": ..., "ResultsHeader2": ..., ... },
{ "ResultsHeader1": ..., "ResultsHeader2": ..., ... },
...
]
}
}
(As before, the keys containing "Header" would be replaced by column names from your data source.)
3. Array of objects with template-defined keys
There is an alternative format you can use, which is likely to be easier to
use if your data is not from a spreadsheet source. With this alternative format
you supply your data to the template as
an array of objects, attached to opts.data, where the keys must
be those used by the template, as documented below. In this case
there is no need to supply a bindings object, since the key names are already
those expected by the template. The required properties in the data
object are as follows (scroll down for a
description of what each property is):
{
template: "@flourish/quiz",
version: "2",
data: {
questions: [
{
text: ...,
explanation: ...,
input_type: ...,
suffix: ...,
min_value: ...,
max_value: ...,
step: ...,
comparisons: [...]
},
...
],
scores: [
{
question: ...,
answer: ...,
is_correct: ...,
points: ...,
media: ...,
explanation: ...,
stats: ...
},
...
],
results: [
{
range: ...,
text: ...,
media: ...
},
...
]
},
...
}
And the full list of all possible properties is as follows:
{
template: "@flourish/quiz",
version: "2",
data: {
questions: [
{
text: ...,
explanation: ...,
input_type: ...,
suffix: ...,
min_value: ...,
max_value: ...,
step: ...,
comparisons: [...]
},
...
],
scores: [
{
question: ...,
answer: ...,
is_correct: ...,
points: ...,
media: ...,
explanation: ...,
stats: ...
},
...
],
results: [
{
range: ...,
text: ...,
media: ...
},
...
]
},
...
}
Meanings of the template data keys:
- questions.text: Question text
- questions.explanation: A short text explanation accompanying the question
- questions.input_type: Type of answer input, choose between "slider" or "multiple choice"
- questions.suffix: Add a suffix after the value, eg. "%" or "people" (only for "slider" input type)
- questions.min_value: Min value for slider (only for "slider" input type)
- questions.max_value: Max value for slider (only for "slider" input type)
- questions.step: Step in slider (only for "slider" input type)
- questions.comparisons: Values that you want to show as comparisons in the slider (only for "slider" input type)
- scores.question: Question that the answer belongs to
- scores.answer: The answer to the question. This can be text for multiple choice questions. For slider answers, you can use numbers or number ranges, values could be "0 - 10" or "4" or "*" to select all answers.
- scores.is_correct: If cell value is "yes", the answer will be highlighted
- scores.points: Amount of points awarded for this answer
- scores.media: Picture to show after answering question
- scores.explanation: Text to show after answering question
- scores.stats: A percentage of amount of how many other people chose this answer (only if input type is multiple choice).
- results.range: A range of points you're targetting. you can use numbers or number ranges, values could be "0 - 10" or "4" or "*" to select all answers.
- results.text: The text you want to show for result
- results.media: An image you want to add to the result
Template settings
Options for opts.state.
Design
color_primary color
Primary.
color_secondary color
User input.
color_neutral color
Neutral.
color_correct color
Correct.
block_text_color color
Color.
block_text_size string
Size. Allowed values:
block_text_size_custom number
Custom. Specify a custom responsive font size. Best results will be with values between 1.2 and 3
block_background color
Background.
block_padding number
Padding.
block_border_width number
Width.
block_border_color color
Color.
block_border_radius number
Radius.
block_shadow boolean
Enabled. Allowed values:
block_shadow_blur number
Blur.
block_shadow_opacity number
Opacity. Max: 1
block_btn_text_color color
Text color.
block_btn_text_size string
Size. Allowed values:
block_btn_text_size_custom number
Custom. Specify a custom responsive font size. Best results will be with values between 1.2 and 3
Slider
slider_handle_fill color
Color.
slider_handle_radius number
Radius.
slider_handle_stroke number
Border.
slider_channel_fill color
Color.
slider_channel_height number
Height.
slider_comparison_opacity number
Comparison opacity. Max: 1
slider_number_format.prefix string
Prefix. Text to place in front of number
slider_number_format.suffix string
Suffix. Text to place after number
slider_number_format.n_dec number
Decimal places. Use negative integers to round to positive powers of ten (eg -2 rounds to the nearest 100) Min: -10 Max: 10
slider_number_format.strip_zeros boolean
Remove trailing zeros.
slider_number_format.strip_separator boolean
Hide thousands separator below 10,000. Turn off if you want four-digit numbers to include a separator, e.g. “1,234” rather than “1234”.
slider_number_format.transform_labels boolean
Multiply/divide values.
slider_number_format.transform string
Allowed values:
- multiply (Multiply by)
- divide (Divide by)
- exponentiate (×10 to the power of)
slider_number_format.multiply_divide_constant number
slider_number_format.exponentiate_constant number
Multiple choice
mc_background color
Background.
mc_border_color color
Color.
mc_border_width number
Width.
mc_border_radius number
Radius.
Text and translation
text_correct_answer string
Slider correct answer.
text_your_answer string
Slider your answer.
text_submit string
Submit button.
text_dropdown_label string
Dropdown label.
Default comparison
comparison_dropdown boolean
Dropdown with comparison values. Allowed values:
comparison_default string
Default comparison. Type in a that's selected as a default when you load the visualisation
comparison_label_color color
Text colour.
Number formatting
localization.input_decimal_separator string
Decimal separator in data sheet. Used for interpreting your data. Only change if data is not displaying on the chart as expected. Allowed values:
localization.output_separators string
Number format to display. How the numbers should appear on chart labels Allowed values:
Layout
Layout
layout.body_font font
Font.
layout.max_width number
Maximum width. Leave blank to stretch to container width Min: 50
layout.margin number
Margin.
layout.background_color_enabled boolean
Color. Allowed values:
layout.background_image_enabled boolean
Image. Allowed values:
layout.background_color color
Color.
layout.background_image_src url
Image URL.
layout.background_image_size string
Size. Allowed values:
layout.background_image_position string
Position. Allowed values:
layout.layout_order string
Layout order. Allowed values:
layout.space_between_sections string
Space between sections. Allowed values:
layout.space_between_sections_custom number
Custom. Max: 100
Header
layout.header_align string
Alignment. Allowed values:
layout.title string
layout.title_styling boolean
Change title styles.
layout.title_size string
Size. Allowed values:
layout.title_size_custom number
Custom. Specify a custom responsive font size. Best results will be with values between 1.2 and 3
layout.title_weight string
Weight. Allowed values:
layout.title_color color
Color.
layout.title_line_height number
Line height. Max: 3
layout.subtitle string
layout.subtitle_styling boolean
Change subtitle styles.
layout.subtitle_size string
Size. Allowed values:
layout.subtitle_size_custom number
Custom. Specify a custom responsive font size. Best results will be with values between 1.2 and 3
layout.subtitle_weight string
Weight. Allowed values:
layout.subtitle_color color
Color.
layout.subtitle_line_height number
Line height. Max: 3
layout.subtitle_space_above string
Space above. Allowed values:
layout.subtitle_space_above_custom number
Custom. Max: 100
layout.text string
layout.text_styling boolean
Change text styles.
layout.text_size string
Size. Allowed values:
layout.text_size_custom number
Custom. Specify a custom responsive font size. Best results will be with values between 1.2 and 3
layout.text_weight string
Weight. Allowed values:
layout.text_color color
Color.
layout.text_line_height number
Line height. Max: 3
layout.text_space_above string
Space above. Allowed values:
layout.text_space_above_custom number
Custom. Max: 100
Footer
layout.source_name string
Source name.
layout.source_url string
Source url.
layout.multiple_sources boolean
Multiple sources.
layout.source_name_2 string
Source name.
layout.source_url_2 string
Source url.
layout.source_name_3 string
Source name.
layout.source_url_3 string
Source url.
layout.source_label string
Source label.
layout.note string
Note.
layout.size number
Size.
layout.color color
Color.
layout.footer_align string
Alignment. Allowed values:
layout.logo_url url
Image.
layout.logo_link_url string
Link.
layout.logo_height number
Height.
layout.logo_margin number
Margin.
layout.logo_order string
Position. Allowed values:
layout.footer_align_vertical string
V. align. Allowed values: