Quiz
Updated 6 years ago by Template retirement home
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 2 sheets. One question sheet, and optionally a score sheet.
At the most basic level, you just need questions and settings for a slider. This can be specified in the questions sheet. If you have data that you want to compare the user's answer with, you can add those in separate columns.
If you'd like to show feedback after answering a question, or show a "correct" answer next to the comparisons. You can do this in the "scores" sheet.
Tips
- If you want to show different feedback for a range of answers, you can use < or > to capture all the answers below or above a certain number.
- 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: _692
version: _1
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",
...
]
}
}
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: "_692",
version: "_1",
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
media: 3, // index of a column in your data
explanation: 4, // index of a column in your data
stats: 5, // index of a column in your data
}
},
data: {
questions: [
[ "QuestionsColumn1Value1", "QuestionsColumn2Value1",
[ "QuestionsColumn1Value2", "QuestionsColumn2Value2",
[ "QuestionsColumn1Value3", "QuestionsColumn2Value3",
...
],
scores: [
[ "ScoresColumn1Value1", "ScoresColumn2Value1",
[ "ScoresColumn1Value2", "ScoresColumn2Value2",
[ "ScoresColumn1Value3", "ScoresColumn2Value3",
...
]
}
}
All possible bindings that you can supply are shown in this example:
{
template: "_692",
version: "_1",
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
media: 3, // index of a column in your data
explanation: 4, // index of a column in your data
stats: 5, // index of a column in your data
}
},
data: {
questions: [
[ "QuestionsColumn1Value1", "QuestionsColumn2Value1",
[ "QuestionsColumn1Value2", "QuestionsColumn2Value2",
[ "QuestionsColumn1Value3", "QuestionsColumn2Value3",
...
],
scores: [
[ "ScoresColumn1Value1", "ScoresColumn2Value1",
[ "ScoresColumn1Value2", "ScoresColumn2Value2",
[ "ScoresColumn1Value3", "ScoresColumn2Value3",
...
]
}
}
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": ..., ... },
...
]
}
... 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: "_692",
version: "_1",
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",
media: "ScoresHeader4",
explanation: "ScoresHeader5",
stats: "ScoresHeader6",
}
},
data: {
questions: [
{ "QuestionsHeader1": ..., "QuestionsHeader2": ..., ... },
{ "QuestionsHeader1": ..., "QuestionsHeader2": ..., ... },
{ "QuestionsHeader1": ..., "QuestionsHeader2": ..., ... },
...
],
scores: [
{ "ScoresHeader1": ..., "ScoresHeader2": ..., ... },
{ "ScoresHeader1": ..., "ScoresHeader2": ..., ... },
{ "ScoresHeader1": ..., "ScoresHeader2": ..., ... },
...
]
}
}
All possible bindings that you can supply are shown in this example:
{
template: "_692",
version: "_1",
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",
media: "ScoresHeader4",
explanation: "ScoresHeader5",
stats: "ScoresHeader6",
}
},
data: {
questions: [
{ "QuestionsHeader1": ..., "QuestionsHeader2": ..., ... },
{ "QuestionsHeader1": ..., "QuestionsHeader2": ..., ... },
{ "QuestionsHeader1": ..., "QuestionsHeader2": ..., ... },
...
],
scores: [
{ "ScoresHeader1": ..., "ScoresHeader2": ..., ... },
{ "ScoresHeader1": ..., "ScoresHeader2": ..., ... },
{ "ScoresHeader1": ..., "ScoresHeader2": ..., ... },
...
]
}
}
(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: "_692",
version: "_1",
data: {
questions: [
{
text: ...,
explanation: ...,
input_type: ...,
suffix: ...,
min_value: ...,
max_value: ...,
step: ...,
comparisons: [...]
},
...
],
scores: [
{
question: ...,
answer: ...,
is_correct: ...,
media: ...,
explanation: ...,
stats: ...
},
...
]
},
...
}
And the full list of all possible properties is as follows:
{
template: "_692",
version: "_1",
data: {
questions: [
{
text: ...,
explanation: ...,
input_type: ...,
suffix: ...,
min_value: ...,
max_value: ...,
step: ...,
comparisons: [...]
},
...
],
scores: [
{
question: ...,
answer: ...,
is_correct: ...,
media: ...,
explanation: ...,
stats: ...
},
...
]
},
...
}
Meanings of the template data keys:
- questions.text: text
- questions.explanation: A short text explanation accompanying the question
- questions.input_type: What kind of answer input do you need? For now value of cell can only be "slider"
- questions.suffix: Add a suffix after the value, eg. "%"" or "people"
- questions.min_value: Min value for slider
- questions.max_value: Max value for slider
- questions.step: Step in slider
- questions.comparisons: Values that you want to show as comparisons in the bar
- scores.question: Question that the answer belongs to
- scores.answer: Can be a number, * for all answers, or < and > for all answers below and above a certain value
- scores.is_correct: If cell is "yes", it will show value separately in the chart
- 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.
Template settings
Options for opts.state.
Design
color_primary color
Primary.
color_secondary color
Secondary.
color_neutral color
Neutral.
color_correct color
Correct.
style_question_size number
Text size.
style_box_border color
Border color.
style_btn_size number
Text size.
color_btn_text color
Text color.
Slider
slider_channel_height number
Channel height.
slider_label_size number
Label size.
slider_comparison_opacity number
Comparison opacity. Max: 1
slider_handle_fill color
Color.
slider_handle_radius number
Radius.
slider_handle_stroke number
Border.
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_default string
Default comparison to show.
comparison_dropdown boolean
Let user select default comparison from dropdown.
Header
header.title string
Title.
header.subtitle string
Subtitle.
header.color color
Color.
header.align string
Alignment. Allowed values:
header.margin number
Margin.
header.margin_advanced boolean
Advanced margin settings.
header.margin_top number
Top.
header.margin_right number
Right.
header.margin_bottom number
Bottom.
header.margin_left number
Left.
Footer
footer.source_name string
Source name.
footer.source_url string
Source url.
footer.multiple_sources boolean
Multiple sources.
footer.source_name_2 string
Source name.
footer.source_url_2 string
Source url.
footer.source_name_3 string
Source name.
footer.source_url_3 string
Source url.
footer.source_label string
Source label.
footer.note string
Note.
footer.size number
Size.
footer.color color
Color.
footer.align string
Alignment. Allowed values:
footer.margin number
Overall.
footer.margin_top number
Top.
footer.margin_right number
Right.
footer.margin_bottom number
Bottom.
footer.margin_left number
Left.
footer.margin_advanced boolean
Advanced.