Feat: Add default_response option in plugin-survey-likert

docs/plugins/survey-likert.md

@@ -10,7 +10,7 @@ In addition to the [parameters available in all plugins](../overview/plugins.md#
 
 Parameter | Type | Default Value | Description
 ----------|------|---------------|------------
-questions | array | *undefined* | An array of objects, each object represents a question that appears on the screen. Each object contains a prompt, labels and required parameter that will be applied to the question. See examples below for further clarification.`prompt`: Type string, default value is *undefined*. The strings are the question that will be associated with a slider. `labels`: Type array, default value is *undefined*. Each array element is an array of strings. The innermost arrays contain a set of labels to display for an individual question. If you want to use blank responses and only label the end points or some subset of the options, just insert a blank string for the unlabeled responses.`required`: Type boolean, default value is false. Makes answering questions required. `name`: Name of the question. Used for storing data. If left undefined then default names (`Q0`, `Q1`, `...`) will be used for the questions.
+questions | array | *undefined* | An array of objects, each object represents a question that appears on the screen. Each object contains a prompt, labels and required parameter that will be applied to the question. See examples below for further clarification.`prompt`: Type string, default value is *undefined*. The strings are the question that will be associated with a slider. `labels`: Type array, default value is *undefined*. Each array element is an array of strings. The innermost arrays contain a set of labels to display for an individual question. If you want to use blank responses and only label the end points or some subset of the options, just insert a blank string for the unlabeled responses.`required`: Type boolean, default value is false. Makes answering questions required. `name`: Name of the question. Used for storing data. If left undefined then default names (`Q0`, `Q1`, `...`) will be used for the questions. `default_response`: Type integer, default value is null. The 0-based index of the labels array to select by default. If null, no option will be pre-selected.
 randomize_question_order | boolean | `false` | If true, the display order of `questions` is randomly determined at the start of the trial. In the data object, `Q0` will still refer to the first question in the array, regardless of where it was presented visually.
 preamble | string | empty string | HTML formatted string to display at the top of the page above all the questions.
 scale_width | numeric | null | The width of the likert scale in pixels. If left `null`, then the width of the scale will be equal to the width of the widest content on the page.

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

@@ -4,11 +4,8 @@ import surveyLikert from ".";
 
 jest.useFakeTimers();
 
-const selectInput = (
-  name: string, 
-  value: string,
-  displayElement: HTMLElement
-) => displayElement.querySelector(`input[name="${name}"][value="${value}"]`) as HTMLInputElement;
+const selectInput = (name: string, value: string, displayElement: HTMLElement) =>
+  displayElement.querySelector(`input[name="${name}"][value="${value}"]`) as HTMLInputElement;
 
 describe("survey-likert plugin", () => {
   test("data are logged with the right question when randomize order is true", async () => {
@@ -44,6 +41,56 @@ describe("survey-likert plugin", () => {
     expect(surveyData.Q3).toEqual(3);
     expect(surveyData.Q4).toEqual(4);
   });
+
+  test("default_response options are pre-selected correctly", async () => {
+    const scale = ["a", "b", "c", "d", "e"];
+    const { displayElement } = await startTimeline([
+      {
+        type: surveyLikert,
+        questions: [
+          { prompt: "Q0", labels: scale, default_response: 2 },
+          { prompt: "Q1", labels: scale, default_response: 0 },
+          { prompt: "Q2", labels: scale, default_response: 4 },
+          { prompt: "Q3", labels: scale }, // No default
+        ],
+        randomize_question_order: false,
+      },
+    ]);
+
+    // Check correct radio buttons are pre-selected
+    expect(selectInput("Q0", "2", displayElement).checked).toBe(true);
+    expect(selectInput("Q1", "0", displayElement).checked).toBe(true);
+    expect(selectInput("Q2", "4", displayElement).checked).toBe(true);
+
+    // Check other options are NOT selected
+    expect(selectInput("Q0", "0", displayElement).checked).toBe(false);
+    expect(selectInput("Q0", "1", displayElement).checked).toBe(false);
+    expect(selectInput("Q1", "1", displayElement).checked).toBe(false);
+    expect(selectInput("Q2", "0", displayElement).checked).toBe(false);
+
+    // Check question without default has no selection
+    expect(selectInput("Q3", "0", displayElement).checked).toBe(false);
+    expect(selectInput("Q3", "1", displayElement).checked).toBe(false);
+    expect(selectInput("Q3", "2", displayElement).checked).toBe(false);
+    expect(selectInput("Q3", "3", displayElement).checked).toBe(false);
+    expect(selectInput("Q3", "4", displayElement).checked).toBe(false);
+  });
+
+  test("default_response null does not pre-select anything", async () => {
+    const scale = ["a", "b", "c"];
+    const { displayElement } = await startTimeline([
+      {
+        type: surveyLikert,
+        questions: [{ prompt: "Q0", labels: scale, default_response: null }],
+        randomize_question_order: false,
+      },
+    ]);
+
+    // Check that no options are pre-selected
+    expect(selectInput("Q0", "0", displayElement).checked).toBe(false);
+    expect(selectInput("Q0", "1", displayElement).checked).toBe(false);
+    expect(selectInput("Q0", "2", displayElement).checked).toBe(false);
+  });
 });
 
 describe("survey-likert plugin simulation", () => {

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

@@ -32,6 +32,11 @@ const info = <const>{
           type: ParameterType.STRING,
           default: "",
         },
+        /** Default response value for this question (0-based index of labels array). */
+        default_response: {
+          type: ParameterType.INT,
+          default: null,
+        },
       },
     },
     /** If true, the order of the questions in the 'questions' array will be randomized. */
@@ -164,6 +169,9 @@ class SurveyLikertPlugin implements JsPsychPlugin<Info> {
         if (question.required) {
           options_string += " required";
         }
+        if (question.default_response === j) {
+          options_string += " checked";
+        }
         options_string += ">" + question.labels[j] + "</label></li>";
       }
       options_string += "</ul>";