Survey plugin rewrite (fixes #2758)

[becky-gilbert]

Fixes #2758

This PR rewrites the survey plugin so that it works as a wrapper for SurveyJS. Now any SurveyJS-compatible JSON can be passed directly into the plugin, which allows jsPsych users to use all SurveyJS features without our having to implement them in the plugin.

The updated SurveyJS architecture requires the survey-core package along with one of the following UI/rendering packages: react, angular, vue, knockout, jquery. I've switched from knockout to jquery because jquery seems to require the least/simplest deviations from our conventional plugin design/style.

To do:

• Add a parameter that allows the user to define a function that manipulates the survey object in JS after it has been created (rather than just defining it in JSON - see here).
• Move the various examples in example.html into multiple files in a new examples/ directory, to make them a little easier to understand.
• Draft the docs update - working on it now!
• Add basic tests for basic plugin functionality and parameters (I will assume that the SurveyJS library itself is well tested)
• Check/fix the current survey plugin issues (see list in this comment).

Requests for feedback:

1. I'm struggling a bit with the styling. Can anyone have a look at the example.html file and provide feedback/suggestions for layout and styling? Any feedback is helpful, but the more specific the better!
   SurveyJS has a number of pre-defined themes that you can see here: https://surveyjs.io/form-library/documentation/manage-default-themes-and-styles. I think we'll probably want to make at least a few customizations to get the style to match the rest of jsPsych's default style a little more closely. Unfortunately I can't find a comprehensive list of the SurveyJS CSS variables and their meanings, so thus far I've been their online GUI tool to make theme edits and generate the corresponding CSS variables/values, which is slow ☹️
2. Any other suggestions for improvement would be appreciated!

Examples and screenshots

Example: checkbox/multi-select, conditional question display, and carrying answers forward to next question

  const animals = {
    title: "jsPsych Survey Plugin: referencing answers from previous questions",
    elements: [{
      type: "checkbox",
      name: "favorite-animals",
      title: "What are your favorite animals?",
      description: "Please select at least TWO features to see the Carry Forward functionality.",
      isRequired: true,
      colCount: 2,
      choices: [
        "Hippopotamus",
        "Raccoon",
        "Kangaroo",
        "Shark",
        "Cat",
        "Hedgehog",
        "Bunny",
        "Monkey"
      ]
    }, {
      type: "ranking",
      name: "animals-ranked",
      title: "Which of these animals would make the best pet? Please rank your favorite animals from BEST (1) to WORST pet option.",
      visibleIf: "{favorite-animals.length} > 1",
      isRequired: true,
      choicesFromQuestion: "favorite-animals",
      choicesFromQuestionMode: "selected"
    }],
    showQuestionNumbers: false
  };

  const animals_trial = {
    type: jsPsychSurvey,
    survey_json: JSON.stringify(animals)
  };

Rank question is hidden until at least two animals are selected in the checkbox question:

Data:

[changeset-bot]

🦋 Changeset detected

Latest commit: e807de4

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@jspsych/plugin-survey	Major

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[DominiqueMakowski]

Just chiming in to say I'm very excited to see this PR happen, it's going to be a big improvement, so thanks for all the work and good luck for the remaining bits 💪

[becky-gilbert]

@DominiqueMakowski Thanks!! So glad to hear this will be appreciated - I agree it's going to be a big improvement. I'll finish this up ASAP, just working on the docs now.

[jodeleeuw]

Why does the location of the next button change in this demo? If I select neutral it is on the right, otherwise in the center.

[becky-gilbert]

Ah thanks for flagging this. I fixed this.
The reason was that there are actually 3 nav buttons at the bottom of the page: previous, next, and complete. And depending on the participants response, they are either done with the survey (selected neutral) or going on to another page. I fixed this by adding some CSS that takes the 'complete' button out of the page flow (display: none) when it is hidden.

[becky-gilbert]

Also: this means that the buttons could potentially move on the page (if a response is made that changes the visibility of 'complete' without also removing the 'next' button), or the button could stay in the same place but the label would change between 'next' and 'complete'. I think this is still preferable to having weird previous/next button placement because of a 'complete' button that is in the page flow but hidden.

[jodeleeuw]

hey @becky-gilbert this is awesome. left just a few minor things to adjust or consider.

[jodeleeuw]

Looks great!

[bjoluc]

Late to the party, sorry! Wanted to add a quick reminder about removing the build outputs, but saw you did that already on main 👍

[bjoluc]

Time to get rid of this?

[bjoluc]

Shouldn't this be private?

[becky-gilbert]

Thanks for coming back to this @bjoluc!

Wanted to add a quick reminder about removing the build outputs, but saw you did that already on main

Yeah, sorry for forgetting to do this here ☹️ I think I need to make a few other minor changes in addition to the things you've pointed out, so I'll start another PR.