diff --git a/package-lock.json b/package-lock.json index b92756ffc2..6a7cb91862 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11199,11 +11199,6 @@ "url": "https://github.com/chalk/supports-color?sponsor=1" } }, - "node_modules/jquery": { - "version": "3.7.1", - "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz", - "integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==" - }, "node_modules/js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", @@ -11602,6 +11597,11 @@ "node": ">= 8" } }, + "node_modules/knockout": { + "version": "3.5.1", + "resolved": "https://registry.npmjs.org/knockout/-/knockout-3.5.1.tgz", + "integrity": "sha512-wRJ9I4az0QcsH7A4v4l0enUpkS++MBx0BnL/68KaLzJg7x1qmbjSlwEoCNol7KTYZ+pmtI7Eh2J0Nu6/2Z5J/Q==" + }, "node_modules/last-run": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/last-run/-/last-run-1.1.1.tgz", @@ -15588,16 +15588,17 @@ } }, "node_modules/survey-core": { - "version": "1.9.138", - "resolved": "https://registry.npmjs.org/survey-core/-/survey-core-1.9.138.tgz", - "integrity": "sha512-O8CqM3YUDcsb4YVdidSkVZmdqqUFTa9knRYEdLvC4e9hWTQY4Syud2SnsWl+aJfnOSyTRTl/9YOxQ+RMs+PV7w==" + "version": "1.9.139", + "resolved": "https://registry.npmjs.org/survey-core/-/survey-core-1.9.139.tgz", + "integrity": "sha512-4ETo41TQmhdJt9qtANstNiYjnSxyyvEOxbDXGG/xEtmRYrigYctnmhorsJV8JkRskeb50bOO7jrHjb9QwzvAiQ==" }, - "node_modules/survey-jquery": { - "version": "1.9.138", - "resolved": "https://registry.npmjs.org/survey-jquery/-/survey-jquery-1.9.138.tgz", - "integrity": "sha512-i8CSeQqRMFZhRaEFyTwAIO+bEZp2ejeMOpT1xiAy7lAKjEasGjwXeG4pK1z0jDPOeReuljp4feIcf3Rlmnt8Ew==", + "node_modules/survey-knockout-ui": { + "version": "1.9.139", + "resolved": "https://registry.npmjs.org/survey-knockout-ui/-/survey-knockout-ui-1.9.139.tgz", + "integrity": "sha512-Wo7UtbcxBHecJN8VTraU0t8li7P4TnHAA6UVoXbszq0slhjFxGCbKUlxp2CjbqTWt3d12ZBM6kOxHteJ7xiSPg==", "dependencies": { - "jquery": ">=1.12.4" + "knockout": "^3.5.0", + "survey-core": "1.9.139" } }, "node_modules/sver-compat": { @@ -18013,9 +18014,8 @@ "version": "0.2.2", "license": "MIT", "dependencies": { - "jquery": "^3.7.1", "survey-core": "^1.9.138", - "survey-jquery": "^1.9.138" + "survey-knockout-ui": "^1.9.139" }, "devDependencies": { "@jspsych/config": "^2.0.0", diff --git a/packages/plugin-survey/css/survey.scss b/packages/plugin-survey/css/survey.scss index 58261145f7..1ffb3af8a0 100644 --- 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 index b0b24d59bb..9708b20c1c 100644 --- 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 index 046a8e49b7..6d7c2d316f 100644 --- 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 = { name: "survey", @@ -76,7 +72,7 @@ const jsPsychSurveyCssClassMap = { */ class SurveyPlugin implements JsPsychPlugin { 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 { // 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 { "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 { // remove flex display from jspsych-content-wrapper to get formatting to work document.querySelector(".jspsych-content-wrapper").style.display = "block"; - $(display_element).Survey({ model: this.survey }); + this.survey.render(display_element); this.start_time = performance.now(); }