Merge branch 'feature-1' into develop

css/jspsych.css

@@ -309,6 +309,10 @@ button:hover {
   margin-bottom: 2em;
  }
 
+.jspsych-survey-multi-choice-text span.required {
+  color: darkred;
+}
+
 .jspsych-survey-multi-choice-horizontal .jspsych-survey-multi-choice-text {
   text-align: center;
 }

docs/markdown_docs/plugins/jspsych-survey-multi-choice.md

@@ -10,9 +10,12 @@ Parameter | Type | Default Value | Description
 ----------|------|---------------|------------
 questions | array | *undefined* | Each array element is an array of strings. The strings are the prompts/questions that will be associated with a group of options (radio buttons). All questions within an array will get presented on the same page (trial). The length of the questions array determines the number of trials.
 options | array |  *undefined* | Each array element is an array of arrays. The innermost arrays contain a set of options to display for an individual question. The middle level of arrays groups together the sets of labels that appear in a single trial. This level should correspond to the `questions` array.
+required | array | null | Each array element is an array of arrays. The innermost arrays contain a boolean option make an individual question require some form of input (using the HTML5 `required` attribute). If this parameter is undefined, all questions will be optional. Note: The HTML5 `required` attribute is [not currently supported by the Safari browser][1].
 horizontal | boolean | false | If true, then questions are centred and options are displayed horizontally.
 preamble | array | empty string | Array of HTML formatted strings to display at the top of each page above all the questions. Each element of the array corresponds to a trial/page of questions.
 
+[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Browser_compatibility
+
 ## Data Generated
 
 In addition to the [default data collected by all plugins](overview#datacollectedbyplugins), this plugin collects the following data for each trial.
@@ -39,6 +42,7 @@ var multi_choice_block = {
     type: 'survey-multi-choice',
     questions: [page_1_questions, page_2_questions],
     options: [[page_1_options, page_1_options], [page_2_options]],  // need one scale for every question on a page
+    required: [[true, false], [true]],  // set whether questions are required
     // horizontal: true  // centers questions and makes options display horizontally
 };
 ```

plugins/jspsych-survey-multi-choice.js

@@ -23,6 +23,7 @@
           preamble: (typeof params.preamble === 'undefined') ? "" : params.preamble[i],
           questions: params.questions[i],
           options: params.options[i],
+          required: (typeof params.required === 'undefined') ? null : params.required[i],
           horizontal: (typeof params.horizontal === 'undefined') ? false : params.horizontal
         });
       }
@@ -43,9 +44,16 @@
       // it with the output of the function
       trial = jsPsych.pluginAPI.evaluateFunctionParameters(trial);
 
+      // form element
+      var trial_form_id = _join(plugin_id_name, "form");
+      display_element.append($('<form>', {
+        "id": trial_form_id
+      }));
+      var $trial_form = $("#" + trial_form_id);
+
       // show preamble text
       var preamble_id_name = _join(plugin_id_name, 'preamble');
-      display_element.append($('<div>', {
+      $trial_form.append($('<div>', {
         "id": preamble_id_name,
         "class":preamble_id_name
       }));
@@ -59,7 +67,7 @@
           question_classes.push(_join(plugin_id_name, 'horizontal'));
         }
 
-        display_element.append($('<div>', {
+        $trial_form.append($('<div>', {
           "id": _join(plugin_id_name, i),
           "class": question_classes.join(' ')
         }));
@@ -81,7 +89,6 @@
             "id": option_id_name,
             "class": _join(plugin_id_name, 'option')
           }));
-          // console.log($(option_id_selector));
 
           // add label and question text
           var option_label = '<label class="' + plugin_id_name + '-text">' + trial.options[i][j] + '</label>';
@@ -91,15 +98,28 @@
           var input_id_name = _join(plugin_id_name, 'response', i);
           $(option_id_selector + " label").prepend('<input type="radio" name="' + input_id_name + '" value="' + trial.options[i][j] + '">');
         }
+
+        if (trial.required && trial.required[i]) {
+          // add "question required" asterisk
+          $(question_selector + " p").append("<span class='required'>*</span>")
+
+          // add required property
+          $(question_selector + " input:radio").prop("required", true);
+        }
       }
 
       // add submit button
-      display_element.append($('<button>', {
+      $trial_form.append($('<input>', {
+        'type': 'submit',
         'id': plugin_id_name + '-next',
-        'class': plugin_id_name
+        'class': plugin_id_name,
+        'value': 'Submit Answers'
       }));
-      $(plugin_id_selector + "-next").html('Submit Answers');
-      $(plugin_id_selector + "-next").click(function() {
+
+      $trial_form.submit(function(event) {
+
+        event.preventDefault();
+
         // measure response time
         var endTime = (new Date()).getTime();
         var response_time = endTime - startTime;

tests&examples/jspsych-survey-multi-choice.html

@@ -23,6 +23,7 @@
       type: 'survey-multi-choice',
       questions: [page_1_questions, page_2_questions],
       options: [[page_1_options, page_1_options], [page_2_options]],  // need one scale for every question on a page
+      required: [[true, false], [true]],  // set whether questions are required
       // horizontal: true  // centres questions and makes options display horizontally
   };