swtich from survey-jquery to survey-knockout-ui, remove outdated imports

jspsych · Apr 23, 2024 · 9fda752 · 9fda752
1 parent 98dcaca
commit 9fda752
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 27 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/plugin-survey/css/survey.scss b/packages/plugin-survey/css/survey.scss
@@ -1,4 +1,4 @@
-@use "survey-jquery/defaultV2.min.css";
+@use "survey-core/defaultV2.min.css";
 
 // move buttons to right (couldn't figure out a way to do this with the SurveyJS class name map
 div#sv-nav-complete.sv-action, div#sv-nav-next.sv-action {

diff --git a/packages/plugin-survey/package.json b/packages/plugin-survey/package.json
@@ -50,8 +50,7 @@
     "sass": "^1.43.5"
   },
   "dependencies": {
-    "jquery": "^3.7.1",
     "survey-core": "^1.9.138",
-    "survey-jquery": "^1.9.138"
+    "survey-knockout-ui": "^1.9.139"
   }
 }
diff --git a/packages/plugin-survey/src/index.ts b/packages/plugin-survey/src/index.ts
@@ -1,10 +1,6 @@
-// import SurveyJS dependencies: survey-core and survey-jquery (UI theme): https://surveyjs.io/documentation/surveyjs-architecture#surveyjs-packages
-import $ from "jquery";
+// import SurveyJS dependencies: survey-core and survey-knockout-ui (UI theme): https://surveyjs.io/documentation/surveyjs-architecture#surveyjs-packages
 import { JsPsych, JsPsychPlugin, ParameterType, TrialType } from "jspsych";
-import { StylesManager } from "survey-core";
-// TO DO: decide whether to apply this theme or remove it
-import { PlainLightPanelless } from "survey-core/themes/plain-light-panelless";
-import * as SurveyJS from "survey-jquery";
+import * as SurveyJS from "survey-knockout-ui";
 
 const info = <const>{
   name: "survey",
@@ -76,7 +72,7 @@ const jsPsychSurveyCssClassMap = {
  */
 class SurveyPlugin implements JsPsychPlugin<Info> {
   static info = info;
-  private survey: $.Survey;
+  private survey: SurveyJS.Survey;
   private start_time: number;
 
   constructor(private jsPsych: JsPsych) {
@@ -87,6 +83,8 @@ class SurveyPlugin implements JsPsychPlugin<Info> {
     // TO DO: this method of applying custom styles is deprecated, but I'm
     // saving this here for reference while we make decisions about default style
 
+    // import { StylesManager } from "survey-core";
+
     // const colors = StylesManager.ThemeColors["default"];
 
     // colors["$background-dim"] = "#f3f3f3";
@@ -157,7 +155,7 @@ class SurveyPlugin implements JsPsychPlugin<Info> {
         "Survey plugin: you must define the survey using a non-empty JSON object and/or a survey function."
       );
     }
-    this.survey = new SurveyJS.Model(trial.survey_json);
+    this.survey = new SurveyJS.Survey(trial.survey_json);
 
     if (trial.survey_function !== null) {
       trial.survey_function(this.survey);
@@ -197,7 +195,7 @@ class SurveyPlugin implements JsPsychPlugin<Info> {
     // remove flex display from jspsych-content-wrapper to get formatting to work
     document.querySelector<HTMLElement>(".jspsych-content-wrapper").style.display = "block";
 
-    $(display_element).Survey({ model: this.survey });
+    this.survey.render(display_element);
 
     this.start_time = performance.now();
   }