Minor changes to the input_type parameter

docs/plugins/survey.md

@@ -173,7 +173,7 @@ placeholder | string | "" | Placeholder text in the text response field.
 textbox_rows | integer | 1 | The number of rows (height) for the response text box. 
 textbox_columns | integer | 40 | The number of columns (width) for the response text box. 
 validation | string | "" | A regular expression used to validate the response.
-input_type | string | "text" | Type for the HTML `<input>` element. The `input_type` parameter must be one of "color", "date", "datetime-local", "email", "month", "number", "password", "range", "tel", "text", "time", "url", "week". If the `textbox_rows` parameter is larger than 1, the `input_type` parameter will be ignored. For some types, such as date and time, the `textbox_columns` parameter will be ignored because the width is automatically determined. Note: SurveyJS supports the "datetime" type, but since this is deprecated, we will not support it in this plugin.
+input_type | string | "text" | Type for the HTML `<input>` element. The `input_type` parameter must be one of "color", "date", "datetime-local", "email", "month", "number", "password", "range", "tel", "text", "time", "url", "week". If the `textbox_rows` parameter is larger than 1, the `input_type` parameter will be ignored. The `textbox_columns` parameter only affects questions with `input_type` "email", "password", "tel", "url", or "text".
 
 ## Data Generated
 

packages/plugin-survey/example.html

@@ -25,8 +25,8 @@
           {type: 'html', prompt: '<p>Here is some arbitrary text via an "html" question type.<br>Similar to preamble but can be inserted anywhere in the question set.</p><p>This trial uses automatic question numbering (continued across pages).</p>'},
           {type: 'text', prompt: 'This is a single-line text question. The correct answer is "hello".', required: true, correct_response: "hello"},
           {type: 'text', prompt: 'This is a multi-line text question.', placeholder: 'This is a placeholder.', textbox_rows: 10, textbox_columns: 40},
-          {type: 'text', prompt: 'This is a single-line text question that only numbers can be entered.', input_type: 'number'},
+          {type: 'text', prompt: 'This is a single-line text question of input_type "number"', input_type: 'number'},
-          {type: 'text', prompt: 'This is a date question', input_type: 'date'},
+          {type: 'text', prompt: 'This is a single-line text question of input_type "date"', input_type: 'date'},
         ],
         [
           {

packages/plugin-survey/src/index.spec.ts

@@ -229,7 +229,6 @@ describe("survey plugin", () => {
     const inputTypes = [
       "color",
       "date",
-      // "datetime",
       "datetime-local",
       "email",
       "month",
@@ -253,6 +252,7 @@ describe("survey plugin", () => {
                 type: "text",
                 prompt: "foo",
                 input_type: inputType,
+                textbox_columns: 10,
               },
             ],
           ],
@@ -263,13 +263,14 @@ describe("survey plugin", () => {
       expect(question).not.toBeNull();
       expect(question.querySelector("span").innerHTML).toBe("foo");
 
-      const textinput = displayElement.querySelectorAll("input");
+      const input = displayElement.querySelectorAll("input")[0];
-
+      expect(input).not.toBeNull();
-      expect(textinput[0]).not.toBeNull();
+      expect(input.type).toEqual(inputType);
-      expect(textinput[0].type).toBe(inputType);
+      if (["email", "password", "tel", "url", "text"].includes(inputType)) {
-      if (["text", "search", "tel", "url", "email", "password"].includes(inputType)) {
         // size can be specified only for text input types
-        expect(textinput[0].size).toBe(40);
+        expect(input.size).toEqual(10);
+      } else {
+        expect(input.size).not.toEqual(10);
       }
 
       const finish_button = displayElement.querySelector("input.sv_complete_btn");

packages/plugin-survey/src/index.ts

@@ -198,10 +198,7 @@ const info = <const>{
          * Text only: Type for the HTML <input> element.
          * The `input_type` parameter must be one of "color", "date", "datetime-local", "email", "month", "number", "password", "range", "tel", "text", "time", "url", "week".
          * If the `textbox_rows` parameter is larger than 1, the `input_type` parameter will be ignored.
-         * For some types, such as date and time, the `textbox_columns` parameter will be ignored because the width is automatically determined.
+         * The `textbox_columns` parameter only affects questions with `input_type` "email", "password", "tel", "url", or "text".
-         *
-         * Note: SurveyJS supports the "datetime" type, but since this is deprecated, we will not support it in this plugin.
-         * @see: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime
          */
         input_type: {
           type: ParameterType.SELECT,
@@ -210,7 +207,6 @@ const info = <const>{
           options: [
             "color",
             "date",
-            // "datetime",
             "datetime-local",
             "email",
             "month",
@@ -785,11 +781,8 @@ class SurveyPlugin implements JsPsychPlugin<Info> {
     if (question instanceof QuestionComment) {
       question.rows = params.textbox_rows;
       question.cols = params.textbox_columns;
-    } else if (question.isTextInput) {
-      question.size = params.textbox_columns;
-      question.inputType = params.input_type;
     } else {
-      // size parameter is not set because QuestionText will update it automatically
+      question.size = params.textbox_columns;
       question.inputType = params.input_type;
     }
     question.defaultValue = "";