[Levelbuilder] Foorm Editor: Survey Configurations
JSON stands for “Javascript Object Notation”. It is a way to structure data--in our case, the configuration of a form. The JSON structure surrounds objects with curly braces: {}, and consists of key/value pairs, where the values can be JSON as well. Here’s a simple survey configuration:
{
"title": "A Sample Form",
"pages": [
{
"name": "page1",
"elements": [
{
"type": "checkbox",
"name": "question_1",
"title": "The First Question",
"choices": [
{
"value": "option_1",
"text": "First Option"
},
{
"value": "option_2",
"text": "Second Option"
},
{
"value": "option_3",
"text": "Third Option"
}
]
}
],
"title": "Page 1",
"description": "The first page"
}
]
}
The curly braces surround the entire object. The title key is a property for the entire form, so it is inside the first set of curly braces. The value for pages is a list (indicated by [ ] at the start and end) of pages, which are themselves objects. Each key/value pair in a list or object is separated by a ,.
To use a variable within a survey, write it in curly braces; for example, {workshop_course}. We have some specific variables already set up for our professional development surveys. If you need a new variable for a PD survey or are working on a different survey type, reach out to engineering with your variable needs.
The below variables are available to all pd surveys.
-
workshop_course(e.g. “CS Principles”) -
workshop_subject(e.g. “5-day Summer”) regional_partner_name-
is_virtual(boolean) -
num_facilitators(integer, number of facilitators for this workshop) -
day(integer, 0 if a pre-survey, >= 1 if a daily survey, null if a post-survey) -
is_friday_intitute(boolean) -
facilitators: list of objects in format [{facilitator_id: 123, facilitator_name: ‘Alice’, facilitator_position: 1},...]. These can be accessed as ‘panel.facilitator_name’ as described in the Per-Facilitator Questions section. -
workshop_agenda: Added for Academic Year Workshops, this could be empty or a value such as module1, module1, in_person, etc.
There are 3 matrix questions that we show as “rollups” on the workshop dashboard. These are the only questions that have prescribed keys, so that we can combine questions across multiple surveys. We only combine questions for the same course (ex. CS Fundamentals). These questions only show up on post-surveys. The easiest way to ensure the questions match is to copy them over from an existing survey for the course you are adding a survey for, then make any required changes.
The three questions to look for are (samples from the csd/csp summer workshop post-survey):
Note: this is a per-facilitator question, see Per-Facilitator Questions for more details.
Many of our surveys ask the same set of questions for each facilitator of the workshop. We implement these sorts of questions as a panel in SurveyJS. This panel is very similar across workshops/surveys, so the easiest way to set it up is to find an existing survey having a question element with the type ‘paneldynamic’ named ‘facilitators’ and copy it over, then make any changes required. If you use the ‘facilitators’ name for your panel you will get the following variables:
- panel.facilitator_name
- panel.facilitator_position Where each iteration of the panel will contain a single facilitator’s name and the index of that facilitator (ex. {Alice, 1}, {Bob, 2}).
Here are a few snippets that may be useful to copy and paste when creating or converting a survey.
In the survey creator you can use the Fast Entry section on a matrix question and copy/paste the following:
1|1
2|2
3|3
4|4
5|5
6|6
7|7
If you want to have a header for a matrix question that looks like the following:
Copy/paste the HTML below into a HTML element in SurveyJS (with updated text that you want under each set of numbers):
<table
style="
width: 100%;
border: 1px solid black;
margin-left: auto;
margin-right: auto;
"
cellpadding="1px"
>
<caption>
</caption>
<tbody>
<tr>
<td
style="
width: 13%;
padding-top: 3px;
text-align: center;
vertical-align: top;
"
>
<span style="font-size: 13.3333px"><strong>N/A</strong></span>
</td>
\n
<td
style="
width: 23%;
padding-top: 3px;
text-align: center;
vertical-align: top;
"
>
<strong
><span style="font-size: 10pt"
>1<span style="color: #ffffff">----</span>2</span
></strong
>
</td>
<td style="width: 24.7981%; text-align: center; vertical-align: top">
<strong
><span style="font-size: 10pt"
>3<span style="color: #ffffff">----</span>4<span
style="color: #ffffff"
>----</span
>5</span
></strong
>
</td>
<td style="width: 20.2019%; text-align: center; vertical-align: top">
<strong
><span style="font-size: 10pt"
>6<span style="color: #ffffff">----</span>7</span
></strong
>
</td>
</tr>
<tr>
<td style="width: 13%; text-align: center; vertical-align: middle">
<span style="font-size: 10pt">Irrelevant</span>
</td>
<td style="width: 23%; text-align: center; vertical-align: middle">
<span style="font-size: 10pt"
><strong>Not true of me now</strong><br /><em
> not well prepared, need more development</em
><br
/></span>
</td>
<td style="width: 24.7981%; text-align: center; vertical-align: middle">
<span style="font-size: 10pt"
><strong>Somewhat true of me now</strong><br /><em
>somewhat prepared, in process developing</em
></span
>
</td>
<td style="width: 20.2019%; text-align: center; vertical-align: middle">
<span style="font-size: 10pt"
><strong>Very true of me now</strong><br /><em
>well prepared, current strengths</em
><br
/></span>
</td>
</tr>
</tbody>
</table>