Exp-lookit-survey Class

Basic survey frame allowing researcher to specify question text and types.

This frame uses ember-cli-dynamic-forms as a wrapper for alpacajs, a powerful library for generating online forms. To specify the structure of your form (questions, answer types, validation), you provide a single 'formSchema' structure. The 'formSchema' consists of a 'schema' object and an 'options' object, described under Properties.

You can choose from any question types listed at http://www.alpacajs.org/documentation.html. In that documentation, you will see that each field type - e.g., Checkbox, Radio, Text - has some 'Schema' properties and some 'Options' properties. The properties under 'Schema' will be defined in the 'schema' object of your formSchema. The properties under 'Options' will be defined in the 'options' object of your formSchema.

Many question types allow you to easily validate answers. For instance, for a "number" field you can set minimum and maximum values, and entries will automatically be required to be numeric (http://www.alpacajs.org/docs/fields/number.html). You can also either set required: true in the schema->properties entry for this field OR set validator: required-field in the options->fields entry if you want to require that the participant enters something. A validation error message will be displayed next to any fields that fail validation checks and the participant will not be able to proceed until these are addressed.

Alpacajs is fairly powerful, and you are essentially using it directly. In general, you can copy and paste any object passed to alpaca in the alpaca docs right in as your formSchema to see that example in action on Lookit. Not all features of alpaca are detailed here, but they can be used: e.g., advanced users can enter 'views' and 'data' in the formSchema to customize the layout of their forms and the initial data. A 'dataSource' may be specified under options to populate a question's potential answers (e.g., to load a list of countries from some other source rather than hard-coding it, or to provide checkboxes with vocabulary items from an externally-defined inventory).

You can also use alpacajs's "dependencies" and "conditional dependencies" functionality to set up fields that depend on other fields - e.g., asking if the child speaks any language besides English in the home and only if so displaying a dropdown to select the language(s), or asking if the child likes Elmo or Grover better and then asking a question specific to the preferred character. Or if you have questions only relevant to the birth mother of the child, you could ask if the participant is the birth mother and show those questions conditionally.

Note that question titles are interpreted as HTML and can include images, audio/video elements, and inline CSS.

If a participant returns to this frame after continuing, via a 'Previous' button on the next frame, then the values in this form are pre-filled.

No video recording is conducted on this frame.

A previous button may optionally be included on this frame.

The form itself occupies a maximum of 800px horizontally and takes up 80% of the vertical height of the window (it will scroll to fit).

Current limitations: you are NOT able to provide custom functions (e.g. validators, custom dataSource functions) directly to the formSchema.

Here is an example of a reasonably simple survey using this frame:

"frames": {
       "pet-survey": {
           "kind": "exp-lookit-survey",
           "formSchema": {
               "schema": {
                   "type": "object",
                   "title": "Tell us about your pet!",
                   "properties": {
                       "age": {
                           "type": "integer",
                           "title": "Age",
                           "maximum": 200,
                           "minimum": 0,
                           "required": true
                       },
                       "name": {
                           "type": "string",
                           "title": "Name",
                           "required": true
                       },
                       "species": {
                           "enum": [
                               "dog",
                               "cat",
                               "fish",
                               "bird",
                               "raccoon"
                           ],
                           "type": "string",
                           "title": "What type of animal?",
                           "default": ""
                       }
                   }
               },
               "options": {
                   "fields": {
                       "age": {
                           "numericEntry": true
                       },
                       "name": {
                           "placeholder": "a name..."
                       },
                       "species": {
                           "type": "radio",
                           "message": "Seriously, what species??",
                           "validator": "required-field"
                       }
                   }
               }
           },
           "nextButtonText": "Moving on..."
       }
   }

And here is an example of re-implementing the exp-lookit-mood-questionnaire, using custom formatting, time-pickers, dependencies, and question groups.

"frames": {
           "survey-sample-3": {
           "kind": "exp-lookit-survey",
           "formSchema": {
               "view": {
                   "fields": {
                       "/child/happy": {
                           "templates": {
                               "control": "<div></div>"
                           }
                       },
                       "/child/active": {
                           "templates": {
                               "control": "<div></div>"
                           }
                       },
                       "/child/rested": {
                           "templates": {
                               "control": "<div></div>"
                           }
                       },
                       "/child/healthy": {
                           "templates": {
                               "control": "<div></div>"
                           }
                       },
                       "/parent/energetic": {
                           "templates": {
                               "control": "<div></div>"
                           }
                       },
                       "/parent/parentHappy": {
                           "templates": {
                               "control": "<div></div>"
                           }
                       },
                       "/parent/ontopofstuff": {
                           "templates": {
                               "control": "<div></div>"
                           }
                       }
                   },
                   "layout": {
                       "bindings": {
                           "child": "#child",
                           "parent": "#parent",
                           "lastEat": "#lastEat",
                           "nextNap": "#nextNap",
                           "napWakeUp": "#napWakeUp",
                           "doingBefore": "#doingBefore",
                           "usualNapSchedule": "#usualNapSchedule"
                       },
                       "template": "<div class='row exp-text exp-lookit-mood-questionnaire'><h4></h4><p></p><div id='child'></div><div id='parent'></div><div id='napWakeUp'></div><div id='usualNapSchedule'></div><div id='nextNap'></div><div id='lastEat'></div><div id='doingBefore'></div></div>"
                   },
                   "parent": "bootstrap-edit"
               },
               "schema": {
                   "type": "object",
                   "properties": {
                       "child": {
                           "type": "object",
                           "title": "How is your CHILD feeling right now?",
                           "properties": {
                               "happy": {
                                   "enum": [
                                       "1",
                                       "2",
                                       "3",
                                       "4",
                                       "5",
                                       "6",
                                       "7"
                                   ],
                                   "required": true
                               },
                               "active": {
                                   "enum": [
                                       "1",
                                       "2",
                                       "3",
                                       "4",
                                       "5",
                                       "6",
                                       "7"
                                   ],
                                   "required": true
                               },
                               "rested": {
                                   "enum": [
                                       "1",
                                       "2",
                                       "3",
                                       "4",
                                       "5",
                                       "6",
                                       "7"
                                   ],
                                   "required": true
                               },
                               "healthy": {
                                   "enum": [
                                       "1",
                                       "2",
                                       "3",
                                       "4",
                                       "5",
                                       "6",
                                       "7"
                                   ],
                                   "required": true
                               }
                           }
                       },
                       "parent": {
                           "type": "object",
                           "title": "How are YOU feeling right now?",
                           "properties": {
                               "energetic": {
                                   "enum": [
                                       "1",
                                       "2",
                                       "3",
                                       "4",
                                       "5",
                                       "6",
                                       "7"
                                   ],
                                   "required": true
                               },
                               "parentHappy": {
                                   "enum": [
                                       "1",
                                       "2",
                                       "3",
                                       "4",
                                       "5",
                                       "6",
                                       "7"
                                   ],
                                   "required": true
                               },
                               "ontopofstuff": {
                                   "enum": [
                                       "1",
                                       "2",
                                       "3",
                                       "4",
                                       "5",
                                       "6",
                                       "7"
                                   ],
                                   "required": true
                               }
                           }
                       },
                       "lastEat": {
                           "title": "About how long ago did your child last eat or drink?",
                           "required": true
                       },
                       "nextNap": {
                           "title": "About how much longer until his/her next nap (or bedtime)?",
                           "required": true
                       },
                       "napWakeUp": {
                           "title": "About how long ago did your child last wake up from sleep or a nap?",
                           "required": true
                       },
                       "doingBefore": {
                           "title": "What was your child doing before this?",
                           "required": true
                       },
                       "usualNapSchedule": {
                           "enum": [
                               "yes",
                               "no",
                               "yes-overdue"
                           ],
                           "title": "Does your child have a usual nap schedule?",
                           "required": true
                       }
                   },
                   "dependencies": {
                       "nextNap": [
                           "usualNapSchedule"
                       ]
                   }
               },
               "options": {
                   "fields": {
                       "child": {
                           "fields": {
                               "happy": {
                                   "type": "radio",
                                   "order": 3,
                                   "vertical": false,
                                   "leftLabel": "Fussy",
                                   "fieldClass": "aligned-radio-group",
                                   "rightLabel": "Happy",
                                   "optionLabels": [
                                       "",
                                       "",
                                       "",
                                       "",
                                       "",
                                       "",
                                       ""
                                   ]
                               },
                               "active": {
                                   "type": "radio",
                                   "order": 4,
                                   "vertical": false,
                                   "leftLabel": "Calm",
                                   "fieldClass": "aligned-radio-group",
                                   "rightLabel": "Active",
                                   "optionLabels": [
                                       "",
                                       "",
                                       "",
                                       "",
                                       "",
                                       "",
                                       ""
                                   ]
                               },
                               "rested": {
                                   "type": "radio",
                                   "order": 1,
                                   "vertical": false,
                                   "leftLabel": "Tired",
                                   "fieldClass": "aligned-radio-group",
                                   "rightLabel": "Rested",
                                   "optionLabels": [
                                       "",
                                       "",
                                       "",
                                       "",
                                       "",
                                       "",
                                       ""
                                   ]
                               },
                               "healthy": {
                                   "type": "radio",
                                   "order": 2,
                                   "vertical": false,
                                   "leftLabel": "Sick",
                                   "fieldClass": "aligned-radio-group",
                                   "rightLabel": "Healthy",
                                   "optionLabels": [
                                       "",
                                       "",
                                       "",
                                       "",
                                       "",
                                       "",
                                       ""
                                   ]
                               }
                           }
                       },
                       "parent": {
                           "fields": {
                               "energetic": {
                                   "type": "radio",
                                   "order": 1,
                                   "vertical": false,
                                   "leftLabel": "Tired",
                                   "fieldClass": "aligned-radio-group",
                                   "rightLabel": "Energetic",
                                   "optionLabels": [
                                       "",
                                       "",
                                       "",
                                       "",
                                       "",
                                       "",
                                       ""
                                   ]
                               },
                               "parentHappy": {
                                   "type": "radio",
                                   "order": 3,
                                   "vertical": false,
                                   "leftLabel": "Upset",
                                   "fieldClass": "aligned-radio-group",
                                   "rightLabel": "Happy",
                                   "optionLabels": [
                                       "",
                                       "",
                                       "",
                                       "",
                                       "",
                                       "",
                                       ""
                                   ]
                               },
                               "ontopofstuff": {
                                   "type": "radio",
                                   "order": 2,
                                   "vertical": false,
                                   "leftLabel": "Overwhelmed",
                                   "fieldClass": "aligned-radio-group",
                                   "rightLabel": "On top of things",
                                   "optionLabels": [
                                       "",
                                       "",
                                       "",
                                       "",
                                       "",
                                       "",
                                       ""
                                   ]
                               }
                           }
                       },
                       "lastEat": {
                           "size": 10,
                           "type": "time",
                           "picker": {
                               "useCurrent": "day"
                           },
                           "dateFormat": "HH:mm",
                           "placeholder": "hours:minutes"
                       },
                       "nextNap": {
                           "size": 10,
                           "type": "time",
                           "picker": {
                               "useCurrent": "day"
                           },
                           "dateFormat": "HH:mm",
                           "placeholder": "hours:minutes",
                           "dependencies": {
                               "usualNapSchedule": "yes"
                           }
                       },
                       "napWakeUp": {
                           "size": 10,
                           "type": "time",
                           "picker": {
                               "useCurrent": "day"
                           },
                           "dateFormat": "HH:mm",
                           "placeholder": "hours:minutes"
                       },
                       "doingBefore": {
                           "type": "text",
                           "placeholder": "examples: having lunch, playing outside, going to the store with me"
                       },
                       "usualNapSchedule": {
                           "sort": false,
                           "type": "select",
                           "hideNone": false,
                           "noneLabel": "",
                           "optionLabels": [
                               "Yes",
                               "No",
                               "Yes, and he/she is already due for a nap"
                           ],
                           "removeDefaultNone": false
                       }
                   },
                   "formTitle": "Mood Questionnaire",
                   "introText": "How are you two doing? We really want to know: we’re interested in how your child’s mood affects which sorts of surprising physical events he/she notices. You can help us find out what babies are really learning as they get older... and what they already knew, but weren’t calm and focused enough to show us!",
                   "hideInitValidationError": true
               }
           },
           "nextButtonText": "Next"
       }