${title}
${title}
`; + markup += ""; + markup += "Fields marked with an asterisk (*) are required.
"; } + markup += "${error.title}
${error.text}
`; + markup += "Error
Unfortunately we encountered the following error:
`; markup += stackCode; markup += "Try to run the experiment again. If the error persists, contact the experiment designer.
"; + markup += "Warning
${warning}
`; + markup += "Message
Message
${message}
`; + markup += "Window displays the various stimuli of the experiment.
@@ -181,7 +182,7 @@ export class Window extends PsychObject { // gets updated frame by frame const lastDelta = this.psychoJS.scheduler._lastDelta; - const fps = lastDelta === 0 ? 60.0 : 1000 / lastDelta; + const fps = (lastDelta === 0) ? 60.0 : (1000.0 / lastDelta); return fps; } @@ -493,6 +494,17 @@ export class Window extends PsychObject // update the renderer size and the Window's stimuli whenever the browser's size or orientation change: this._resizeCallback = (e) => { + // if the user device is a mobile phone or tablet (we use the presence of a touch screen as a + // proxy), we need to detect whether the change in size is due to the appearance of a virtual keyboard + // in which case we do not want to resize the canvas. This is rather tricky and so we resort to + // the below trick. It would be better to use the VirtualKeyboard API, but it is not widely + // available just yet, as of 2023-06. + const keyboardHeight = 300; + if (hasTouchScreen() && (window.screen.height - window.visualViewport.height) > keyboardHeight) + { + return; + } + Window._resizePixiRenderer(this, e); this._backgroundSprite.width = this._size[0]; this._backgroundSprite.height = this._size[1]; diff --git a/src/data/ExperimentHandler.js b/src/data/ExperimentHandler.js index 7a30578..97692b5 100644 --- a/src/data/ExperimentHandler.js +++ b/src/data/ExperimentHandler.js @@ -276,6 +276,7 @@ export class ExperimentHandler extends PsychObject } let data = this._trialsData; + // if the experiment data have to be cleared, we first make a copy of them: if (clear) { @@ -351,6 +352,19 @@ export class ExperimentHandler extends PsychObject } } + /** + * Get the results of the experiment as a .csv string, ready to be uploaded or stored. + * + * @return {string} a .csv representation of the experiment results. + */ + getResultAsCsv() + { + // note: we use the XLSX library as it automatically deals with header, takes care of quotes, + // newlines, etc. + const worksheet = XLSX.utils.json_to_sheet(this._trialsData); + return "\ufeff" + XLSX.utils.sheet_to_csv(worksheet); + } + /** * Get the attribute names and values for the current trial of a given loop. *Only info relating to the trial execution are returned.
diff --git a/src/index.css b/src/index.css index c903ea8..8194d84 100644 --- a/src/index.css +++ b/src/index.css @@ -13,7 +13,7 @@ body { /* Initialisation message (which will disappear behind the canvas) */ #root::after { - content: "initialising the experiment..."; + content: "initialising..."; position: fixed; top: 50%; left: 50%; @@ -26,13 +26,12 @@ body { /* Project and resource dialogs */ - .dialog-container label, .dialog-container input, .dialog-container select { - box-sizing: border-box; - display: block; - padding-bottom: 0.5em; + box-sizing: border-box; + display: block; + padding-bottom: 0.5em; } .dialog-container input.text, @@ -40,6 +39,13 @@ body { margin-bottom: 1em; padding: 0.5em; width: 100%; + + height: 34px; + border: 1px solid #767676; + border-radius: 2px; + background: #ffffff; + color: #333; + font-size: 14px; } .dialog-container fieldset { @@ -71,12 +77,19 @@ body { } .dialog-content { + display: flex; + flex-direction: column; + row-gap: 0; + margin: auto; z-index: 2; position: relative; width: 500px; max-width: 88vw; + /*max-height: 90vh;*/ + max-height: 93%; + padding: 0.5em; border-radius: 2px; @@ -88,11 +101,24 @@ body { box-shadow: 1px 1px 3px #555555; } +.dialog-content .scrollable-container { + height: 100%; + padding: 0 0.5em; + + overflow-x: hidden; + overflow-y: auto; +} + +.dialog-content hr { + width: 100%; +} + .dialog-title { padding: 0.5em; margin-bottom: 1em; - background-color: #009900; + background-color: #00dd00; + /*background-color: #009900;*/ border-radius: 2px; } @@ -111,6 +137,11 @@ body { } .dialog-close { + display: flex; + justify-content: center; + align-items: center; + line-height: 1.1em; + position: absolute; top: 0.7em; right: 0.7em; @@ -153,7 +184,7 @@ body { .dialog-button { padding: 0.5em 1em 0.5em 1em; - margin: 0.5em 0.5em 0.5em 0; + /*margin: 0.5em 0.5em 0.5em 0;*/ border: 1px solid #555555; border-radius: 2px; @@ -176,6 +207,14 @@ body { border: 1px solid #000000; } +.dialog-button-group { + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: flex-start; + column-gap: 0.5em; +} + .disabled { border: 1px solid #AAAAAA; color: #AAAAAA; @@ -186,10 +225,15 @@ body { } .logo { - display: block; + display: flex; + flex: 0 1 auto; + height: 100%; + width: auto; + + /*display: block; margin: 0 auto 1em; max-height: 20vh; - max-width: 100%; + max-width: 100%;*/ } a, diff --git a/src/util/Clock.js b/src/util/Clock.js index 3e92b5d..f0e7874 100644 --- a/src/util/Clock.js +++ b/src/util/Clock.js @@ -90,6 +90,7 @@ export class MonotonicClock { // yyyy-mm-dd, hh:mm:ss.sss return MonotonicClock.getDate() + .replaceAll("/","-") // yyyy-mm-dd_hh:mm:ss.sss .replace(", ", "_") // yyyy-mm-dd_hh[h]mm:ss.sss diff --git a/src/util/Scheduler.js b/src/util/Scheduler.js index bad709c..4bbaf6e 100644 --- a/src/util/Scheduler.js +++ b/src/util/Scheduler.js @@ -117,9 +117,12 @@ export class Scheduler * Start this scheduler. * *Note: tasks are run after each animation frame.
+ * + * @return {PromiseSee details here: https://en.wikipedia.org/wiki/Fisher%E2%80%93Yates_shuffle#The_modern_algorithm
* * @param {Object[]} array - the input 1-D array - * @param {Function} [randomNumberGenerator = undefined] - A function used to generated random numbers in the interal [0, 1). Defaults to Math.random + * @param {Function} [randomNumberGenerator= undefined] - A function used to generated random numbers in the interval [0, 1). Defaults to Math.random + * @param [startIndex= undefined] - start index in the array + * @param [endIndex= undefined] - end index in the array * @return {Object[]} the shuffled array */ -export function shuffle(array, randomNumberGenerator = undefined) +export function shuffle(array, randomNumberGenerator = undefined, startIndex = undefined, endIndex = undefined) { - if (randomNumberGenerator === undefined) + // if array is not an array, we return it untouched rather than throwing an exception: + if (!array || !Array.isArray(array)) + { + return array; + } + + if (typeof startIndex === "undefined") + { + startIndex = 0; + } + if (typeof endIndex === "undefined") + { + endIndex = array.length - 1; + } + + if (typeof randomNumberGenerator === "undefined") { randomNumberGenerator = Math.random; } - for (let i = array.length - 1; i > 0; i--) + + for (let i = endIndex; i > startIndex; i--) { const j = Math.floor(randomNumberGenerator() * (i + 1)); [array[i], array[j]] = [array[j], array[i]]; } + return array; } +/** + * linspace + * + * @name module:util.linspace + * @function + * @public + * @param {Object[]} startValue, stopValue, cardinality + * @return {Object[]} an array from startValue to stopValue with cardinality steps + */ +export function linspace(startValue, stopValue, cardinality) { + var arr = []; + var step = (stopValue - startValue) / (cardinality - 1); + for (var i = 0; i < cardinality; i++) { + arr.push(startValue + (step * i)); + } + return arr; +} + /** * Pick a random value from an array, uses `util.shuffle` to shuffle the array and returns the last value. * @@ -610,6 +647,11 @@ export function toString(object) return object.toString(); } + if (typeof object === "function") + { + return `ButtonStim visual stimulus.
@@ -32,6 +33,7 @@ export class ButtonStim extends TextBox * @param {Color} [options.borderColor= Color("white")] the border color * @param {Color} [options.borderWidth= 0] the border width * @param {number} [options.opacity= 1.0] - the opacity + * @param {number} [options.depth= 0] - the depth (i.e. the z order) * @param {number} [options.letterHeight= undefined] - the height of the text * @param {boolean} [options.bold= true] - whether or not the text is bold * @param {boolean} [options.italic= false] - whether or not the text is italic @@ -54,11 +56,14 @@ export class ButtonStim extends TextBox borderColor, borderWidth = 0, opacity, + depth, letterHeight, bold = true, italic, autoDraw, autoLog, + boxFn, + multiline } = {}, ) { @@ -77,12 +82,15 @@ export class ButtonStim extends TextBox borderColor, borderWidth, opacity, + depth, letterHeight, + multiline, bold, italic, alignment: "center", autoDraw, autoLog, + boxFn }); this.psychoJS.logger.debug("create a new Button with name: ", name); @@ -112,7 +120,7 @@ export class ButtonStim extends TextBox if (this._autoLog) { - this._psychoJS.experimentLogger.exp(`Created ${this.name} = ${this.toString()}`); + this._psychoJS.experimentLogger.exp(`Created ${this.name} = ${util.toString(this)}`); } } diff --git a/src/visual/ImageStim.js b/src/visual/ImageStim.js index f043579..1b3da06 100644 --- a/src/visual/ImageStim.js +++ b/src/visual/ImageStim.js @@ -47,7 +47,7 @@ export class ImageStim extends util.mix(VisualStim).with(ColorMixin) * @param {boolean} [options.autoDraw= false] - whether or not the stimulus should be automatically drawn on every frame flip * @param {boolean} [options.autoLog= false] - whether or not to log */ - constructor({ name, win, image, mask, pos, anchor, units, ori, size, color, opacity, contrast, texRes, depth, interpolate, flipHoriz, flipVert, autoDraw, autoLog } = {}) + constructor({ name, win, image, mask, pos, anchor, units, ori, size, color, opacity, contrast, texRes, depth, interpolate, flipHoriz, flipVert, aspectRatio, autoDraw, autoLog } = {}) { super({ name, win, units, ori, opacity, depth, pos, anchor, size, autoDraw, autoLog }); @@ -94,6 +94,12 @@ export class ImageStim extends util.mix(VisualStim).with(ColorMixin) false, this._onChange(false, false), ); + this._addAttribute( + "aspectRatio", + aspectRatio, + ImageStim.AspectRatioStrategy.VARIABLE, + this._onChange(true, true), + ); // estimate the bounding box: this._estimateBoundingBox(); @@ -309,7 +315,18 @@ export class ImageStim extends util.mix(VisualStim).with(ColorMixin) this._texture = new PIXI.Texture(new PIXI.BaseTexture(this._image, texOpts)); } - this._pixi = PIXI.Sprite.from(this._texture); + if (this.aspectRatio === ImageStim.AspectRatioStrategy.HORIZONTAL_TILING) + { + const [width_px, _] = util.to_px([this.size[0], 0], this.units, this.win); + this._pixi = PIXI.TilingSprite.from(this._texture, 1, 1); + this._pixi.width = width_px; + this._pixi.height = this._texture.height; + } + else + { + this._pixi = PIXI.Sprite.from(this._texture); + } + // add a mask if need be: if (typeof this._mask !== "undefined") @@ -349,8 +366,24 @@ export class ImageStim extends util.mix(VisualStim).with(ColorMixin) // set the scale: const displaySize = this._getDisplaySize(); const size_px = util.to_px(displaySize, this.units, this.win); - const scaleX = size_px[0] / this._texture.width; - const scaleY = size_px[1] / this._texture.height; + let scaleX = size_px[0] / this._texture.width; + let scaleY = size_px[1] / this._texture.height; + if (this.aspectRatio === ImageStim.AspectRatioStrategy.FIT_TO_WIDTH) + { + scaleY = scaleX; + } + else if (this.aspectRatio === ImageStim.AspectRatioStrategy.FIT_TO_HEIGHT) + { + scaleX = scaleY; + } + else if (this.aspectRatio === ImageStim.AspectRatioStrategy.HORIZONTAL_TILING) + { + scaleX = 1.0; + scaleY = 1.0; + } + + // note: this calls VisualStim.setAnchor, which properly sets the PixiJS anchor + // from the PsychoPy text format this.anchor = this._anchor; this._pixi.scale.x = this.flipHoriz ? -scaleX : scaleX; this._pixi.scale.y = this.flipVert ? scaleY : -scaleY; @@ -383,7 +416,47 @@ export class ImageStim extends util.mix(VisualStim).with(ColorMixin) displaySize = util.to_unit(textureSize, "pix", this.win, this.units); } } + else + { + if (this.aspectRatio === ImageStim.AspectRatioStrategy.FIT_TO_WIDTH) + { + // use the size of the texture, if we have access to it: + if (typeof this._texture !== "undefined" && this._texture.width > 0) + { + displaySize = [displaySize[0], displaySize[0] * this._texture.height / this._texture.width]; + } + } + else if (this.aspectRatio === ImageStim.AspectRatioStrategy.FIT_TO_HEIGHT) + { + // use the size of the texture, if we have access to it: + if (typeof this._texture !== "undefined" && this._texture.width > 0) + { + displaySize = [displaySize[1] * this._texture.width / this._texture.height, displaySize[1]]; + } + } + else if (this.aspectRatio === ImageStim.AspectRatioStrategy.HORIZONTAL_TILING) + { + // use the size of the texture, if we have access to it: + if (typeof this._texture !== "undefined" && this._texture.width > 0) + { + displaySize = [displaySize[0], this._texture.height]; + } + } + } return displaySize; } } + +/** + * ImageStim Aspect Ratio Strategy. + * + * @enum {Symbol} + * @readonly + */ +ImageStim.AspectRatioStrategy = { + FIT_TO_WIDTH: Symbol.for("FIT_TO_WIDTH"), + HORIZONTAL_TILING: Symbol.for("HORIZONTAL_TILING"), + FIT_TO_HEIGHT: Symbol.for("FIT_TO_HEIGHT"), + VARIABLE: Symbol.for("VARIABLE"), +}; diff --git a/src/visual/ShapeStim.js b/src/visual/ShapeStim.js index 49b1049..307ff8e 100644 --- a/src/visual/ShapeStim.js +++ b/src/visual/ShapeStim.js @@ -385,4 +385,29 @@ ShapeStim.KnownShapes = { [-0.39, 0.31], [-0.09, 0.18], ], + + triangle: [ + [+0.0, 0.5], // Point + [-0.5, -0.5], // Bottom left + [+0.5, -0.5], // Bottom right + ], + + rectangle: [ + [-.5, .5], // Top left + [ .5, .5], // Top right + [ .5, -.5], // Bottom left + [-.5, -.5], // Bottom right + ], + + arrow: [ + [0.0, 0.5], + [-0.5, 0.0], + [-1/6, 0.0], + [-1/6, -0.5], + [1/6, -0.5], + [1/6, 0.0], + [0.5, 0.0], + ], }; +// Alias some names for convenience +ShapeStim.KnownShapes['star'] = ShapeStim.KnownShapes['star7'] diff --git a/src/visual/Survey.js b/src/visual/Survey.js index f0261d1..57bf41f 100644 --- a/src/visual/Survey.js +++ b/src/visual/Survey.js @@ -3,13 +3,12 @@ * * @author Alain Pitiot and Nikita Agafonov * @version 2022.3 - * @copyright (c) 2022 Open Science Tools Ltd. (https://opensciencetools.org) + * @copyright (c) 2023 Open Science Tools Ltd. (https://opensciencetools.org) * @license Distributed under the terms of the MIT License */ import * as PIXI from "pixi.js-legacy"; import { VisualStim } from "./VisualStim.js"; -import {PsychoJS} from "../core/PsychoJS.js"; import * as util from "../util/Util.js"; import {Clock} from "../util/Clock.js"; import {ExperimentHandler} from "../data/ExperimentHandler.js"; @@ -21,6 +20,9 @@ import registerSideBySideMatrix from "./survey/widgets/SideBySideMatrix.js"; import registerMaxDiffMatrix from "./survey/widgets/MaxDiffMatrix.js"; import registerSliderStar from "./survey/widgets/SliderStar.js"; import MatrixBipolar from "./survey/components/MatrixBipolar.js"; +import DropdownExtensions from "./survey/components/DropdownExtensions.js"; +import customExpressionFunctionsArray from "./survey/extensions/customExpressionFunctions.js"; + /** @@ -32,6 +34,34 @@ export class Survey extends VisualStim { static SURVEY_EXPERIMENT_PARAMETERS = ["surveyId", "showStartDialog", "showEndDialog", "completionUrl", "cancellationUrl", "quitOnEsc"]; + static SURVEY_FLOW_PLAYBACK_TYPES = + { + DIRECT: "QUESTION_BLOCK", + CONDITIONAL: "IF_THEN_ELSE_GROUP", + EMBEDDED_DATA: "VARIABLES", + RANDOMIZER: "RANDOM_GROUP", + SEQUENTIAL: "SEQUENTIAL_GROUP", + ENDSURVEY: "END" + }; + + static CAPTIONS = + { + NEXT: "Next" + }; + + static SURVEY_COMPLETION_CODES = + { + NORMAL: 0, + SKIP_TO_END_OF_BLOCK: 1, + SKIP_TO_END_OF_SURVEY: 2 + }; + + static NODE_EXIT_CODES = + { + NORMAL: 0, + BREAK_FLOW: 1 + }; + /** * @memberOf module:visual * @param {Object} options @@ -52,15 +82,45 @@ export class Survey extends VisualStim { super({ name, win, units, ori, depth, pos, size, autoDraw, autoLog }); + // Storing all existing signaturePad questions to properly handle their resize. + // Unfortunately signaturepad question type can't handle resizing properly by itself. + this._signaturePads = []; + + // whether the user is done with the survey, independently of whether the survey is completed: + this.isFinished = false; + + // accumulated completion flag updated after each survey node is completed + // note: this make it possible to track completion as we move through the survey flow. + // _isCompletedAll will be flipped to false whenever a survey node is not completed + this._isCompletedAll = true; + + // timestamps associated to each question: + this._questionAnswerTimestamps = {}; + // timestamps clock: + this._questionAnswerTimestampClock = new Clock(); + + this._overallSurveyResults = {}; + this._surveyData = undefined; + this._surveyModel = undefined; + this._expressionsRunner = undefined; + this._lastPageSwitchHandledIdx = -1; + this._variables = {}; + + this._surveyRunningPromise = undefined; + this._surveyRunningPromiseResolve = undefined; + this._surveyRunningPromiseReject = undefined; + // callback triggered when the user is done with the survey: nothing to do by default + this._onFinishedCallback = () => {}; + + // init SurveyJS: + this._initSurveyJS(); + // default size: if (typeof size === "undefined") { this.size = (this.unit === "norm") ? [2.0, 2.0] : [1.0, 1.0]; } - // init SurveyJS - this._initSurveyJS(); - this._addAttribute( "model", model @@ -78,16 +138,6 @@ export class Survey extends VisualStim defaultSurveyId ); - // whether the user is done with the survey, independently of whether the survey is completed: - this.isFinished = false; - // whether the user completed the survey, i.e. answered all the questions: - this.isCompleted = false; - // timestamps associated to each question: - this._questionAnswerTimestamps = {}; - // timestamps clock: - this._questionAnswerTimestampClock = new Clock(); - // callback triggered when the user is done with the survey: nothing to do by default - this._onFinishedCallback = () => {}; // estimate the bounding box: this._estimateBoundingBox(); @@ -98,6 +148,11 @@ export class Survey extends VisualStim } } + get isCompleted () + { + return this.isFinished && this._isCompletedAll; + } + /** * Setter for the model attribute. * @@ -130,19 +185,46 @@ export class Survey extends VisualStim model = JSON.parse(decodedModel); } - // items should now be an object: + // model should now be an object: if (typeof model !== "object") { throw "model is neither the name of a resource nor an object"; } - this._surveyModelJson = Object.assign({}, model); - this._surveyModel = new window.Survey.Model(this._surveyModelJson); - this._surveyModel.isInitialized = false; + // if model is a straight-forward SurveyJS model, instead of a Pavlovia Survey super-flow model, + // convert it: + if (!('surveyFlow' in model)) + { + model = { + surveys: [model], + embeddedData: [], + surveysMap: {}, + questionMapsBySurvey: {}, + surveyFlow: { + name: "root", + type: "SEQUENTIAL_GROUP", + nodes: [{ + type: "QUESTION_BLOCK", + surveyIdx: 0 + }] + }, - // custom css: - // see https://surveyjs.io/form-library/examples/survey-cssclasses/jquery#content-js + surveySettings: { showPrevButton: false }, + surveyRunLogic: {}, + inQuestionRandomization: {}, + questionsOrderRandomization: [], + questionSkipLogic: {}, + + questionsConverted: -1, + questionsTotal: -1, + logs: [] + }; + + this.psychoJS.logger.debug(`converted the legacy model to the new super-flow model: ${JSON.stringify(model)}`); + } + + this._surveyData = model; this._setAttribute("model", model, log); this._onChange(true, true)(); } @@ -153,6 +235,24 @@ export class Survey extends VisualStim } } + /** + * Setter for the surveyId attribute. + * + * @param {string} surveyId - the survey Id + * @param {boolean} [log= false] - whether to log + * @return {void} + */ + setSurveyId(surveyId, log = false) + { + this._setAttribute("surveyId", surveyId, log); + + // only update the model if a genuine surveyId was given as parameter to the Survey: + if (!this._hasSelfGeneratedSurveyId) + { + this.setModel(`${surveyId}.sid`, log); + } + } + /** * Set survey variables. * @@ -163,18 +263,27 @@ export class Survey extends VisualStim setVariables(variables, excludedNames) { // filter the variables and set them: - const filteredVariables = {}; + // const filteredVariables = {}; + // for (const name in variables) + // { + // if (excludedNames.indexOf(name) === -1) + // { + // filteredVariables[name] = variables[name]; + // this._surveyModel.setVariable(name, variables[name]); + // } + // } + + // // set the values: + // this._surveyModel.mergeData(filteredVariables); + for (const name in variables) { if (excludedNames.indexOf(name) === -1) { - filteredVariables[name] = variables[name]; - this._surveyModel.setVariable(name, variables[name]); + this._variables[name] = variables[name]; + // this._surveyData.variables[name] = variables[name]; } } - - // set the values: - this._surveyModel.mergeData(filteredVariables); } /** @@ -200,22 +309,6 @@ export class Survey extends VisualStim return this._surveyModel.runExpression(expression); } - /** - * Setter for the surveyId attribute. - * - * @param {string} surveyId - the survey Id - * @param {boolean} [log= false] - whether to log - * @return {void} - */ - setSurveyId(surveyId, log = false) - { - this._setAttribute("surveyId", surveyId, log); - if (!this._hasSelfGeneratedSurveyId) - { - this.setModel(`${surveyId}.sid`, log); - } - } - /** * Add a callback that will be triggered when the participant finishes the survey. * @@ -224,7 +317,7 @@ export class Survey extends VisualStim */ onFinished(callback) { - if (typeof this._surveyModel === "undefined") + if (typeof this._surveyData === "undefined") { throw { origin: "Survey.onFinished", @@ -247,12 +340,14 @@ export class Survey extends VisualStim */ getResponse() { - if (typeof this._surveyModel === "undefined") - { - return {}; - } + // if (typeof this._surveyModel === "undefined") + // { + // return {}; + // } - return this._surveyModel.data; + // return this._surveyModel.data; + + return this._overallSurveyResults; } /** @@ -290,7 +385,6 @@ export class Survey extends VisualStim {} ); - // if the response cannot be uploaded, e.g. the experiment is running locally, or // if it is piloting mode, then we offer the response as a file for download: if (this._psychoJS.getEnvironment() !== ExperimentHandler.Environment.SERVER || @@ -323,7 +417,7 @@ export class Survey extends VisualStim else { return this._psychoJS.serverManager.uploadSurveyResponse( - this._surveyId, sortedResponses, this.isCompleted, this._surveyModelJson + this._surveyId, sortedResponses, this.isCompleted, this._surveyData ); } } @@ -336,9 +430,7 @@ export class Survey extends VisualStim */ hide() { - // if a survey div already does not exist already, create it: - const surveyId = `survey-${this._name}`; - const surveyDiv = document.getElementById(surveyId); + const surveyDiv = document.getElementById(this._surveyDivId); if (surveyDiv !== null) { document.body.removeChild(surveyDiv); @@ -383,21 +475,19 @@ export class Survey extends VisualStim { this._needPixiUpdate = false; - // if a survey div already does not exist already, create it: - const surveyId = "_survey"; - let surveyDiv = document.getElementById(surveyId); - if (surveyDiv === null) + // if a survey div does not exist, create it: + if (document.getElementById(this._surveyDivId) === null) { - surveyDiv = document.createElement("div"); - surveyDiv.id = surveyId; - surveyDiv.className = "survey"; - document.body.appendChild(surveyDiv); + document.body.insertAdjacentHTML("beforeend", ``) } - // start the survey: - if (typeof this._surveyModel !== "undefined") + // start the survey flow: + if (typeof this._surveyData !== "undefined") { - this._startSurvey(surveyId, this._surveyModel); + // this._startSurvey(surveyId, this._surveyModel); + // jQuery(`#${surveyId}`).Survey({model: this._surveyModel}); + + this._runSurveyFlow(this._surveyData.surveyFlow, this._surveyData); } } @@ -424,26 +514,17 @@ export class Survey extends VisualStim } /** - * Init the SurveyJS.io library. + * Register custom SurveyJS expression functions. * * @protected + * @return {void} */ - _initSurveyJS() + _registerCustomExpressionFunctions (Survey, customFuncs = []) { - // load the Survey.js libraries, if necessary: - // TODO - - // setup the survey theme: - window.Survey.StylesManager.applyTheme("defaultV2"); - - // load the PsychoJS SurveyJS extensions: - this._expressionsRunner = new window.Survey.ExpressionRunner(); - this._registerWidgets(); - this._registerCustomSurveyProperties(); - - // load the desired style: - // TODO - // util.loadCss("./survey/css/grey_style.css"); + for (let i = 0; i < customFuncs.length; i++) + { + Survey.FunctionFactory.Instance.register(customFuncs[i].func.name, customFuncs[i].func, customFuncs[i].isAsync); + } } /** @@ -452,57 +533,39 @@ export class Survey extends VisualStim * @protected * @return {void} */ - _registerWidgets() + _registerWidgets(Survey) { - registerSelectBoxWidget(window.Survey); - registerSliderWidget(window.Survey); - registerSideBySideMatrix(window.Survey); - registerMaxDiffMatrix(window.Survey); - registerSliderStar(window.Survey); + registerSelectBoxWidget(Survey); + registerSliderWidget(Survey); + registerSideBySideMatrix(Survey); + registerMaxDiffMatrix(Survey); + registerSliderStar(Survey); // load the widget style: // TODO // util.loadCss("./survey/css/widgets.css"); } - _registerCustomSurveyProperties() + /** + * Register custom Survey properties. Usially these are relevant for different question types. + * + * @protected + * @return {void} + */ + _registerCustomSurveyProperties(Survey) { - MatrixBipolar.registerSurveyProperties(window.Survey); + MatrixBipolar.registerSurveyProperties(Survey); + Survey.Serializer.addProperty("signaturepad", { + name: "maxSignatureWidth", + type: "number", + default: 500 + }); } _registerCustomComponentCallbacks(surveyModel) { MatrixBipolar.registerModelCallbacks(surveyModel); - } - - /** - * Run the survey using flow data provided. This method runs recursively. - * - * @protected - * @param {string} surveyId - the id of the DOM div - * @param {Object} surveyData - surveyData / model. - * @param {Object} prevBlockResults - survey results gathered from running previous block of questions. - * @return {void} - */ - _startSurvey(surveyId, surveyData, prevBlockResults = {}) - { - // initialise the survey model is need be: - if (!this._surveyModel.isInitialized) - { - this._registerCustomComponentCallbacks(this._surveyModel); - this._surveyModel.onValueChanged.add(this._onQuestionValueChanged.bind(this)); - this._surveyModel.onCurrentPageChanging.add(this._onCurrentPageChanging.bind(this)); - this._surveyModel.onTextMarkdown.add(this._onTextMarkdown.bind(this)); - this._surveyModel.onComplete.add(this._onSurveyComplete.bind(this)); - this._surveyModel.isInitialized = true; - } - - jQuery(`#${surveyId}`).Survey({ - model: this._surveyModel, - showItemsInOrder: "column" - }); - - this._questionAnswerTimestampClock.reset(); + DropdownExtensions.registerModelCallbacks(surveyModel); } /** @@ -523,20 +586,324 @@ export class Survey extends VisualStim this._questionAnswerTimestamps[questionData.name].timestamp = this._questionAnswerTimestampClock.getTime(); } +/* + // This probably needs to be moved to some kind of utils.js. + // https://en.wikipedia.org/wiki/Fisher%E2%80%93Yates_shuffle + _FisherYatesShuffle (targetArray = []) + { + // Copying array to preserve initial data. + const out = Array.from(targetArray); + const len = targetArray.length; + let i, j, k; + for (i = len - 1; i >= 1; i--) + { + j = Math.floor(Math.random() * (i + 1)); + k = out[j]; + out[j] = out[i]; + out[i] = k; + } + + return out; + } + + // https://en.wikipedia.org/wiki/Fisher%E2%80%93Yates_shuffle + _InPlaceFisherYatesShuffle (inOutArray = [], startIdx, endIdx) + { + // Shuffling right in the input array. + let i, j, k; + for (i = endIdx; i >= startIdx; i--) + { + j = Math.floor(Math.random() * (i + 1)); + k = inOutArray[j]; + inOutArray[j] = inOutArray[i]; + inOutArray[i] = k; + } + + return inOutArray; + } +*/ + + _composeModelWithRandomizedQuestions (surveyModel, inBlockRandomizationSettings) + { + let t = performance.now(); + // Qualtrics's in-block randomization ignores presense of page breaks within the block. + // Hence creating a fresh survey data object with shuffled question order. + let questions = []; + let questionsMap = {}; + let newSurveyModel = + { + pages:[{ elements: new Array(inBlockRandomizationSettings.questionsPerPage) }] + }; + for (let i = 0; i < surveyModel.pages.length; i++) + { + for (let j = 0; j < surveyModel.pages[i].elements.length; j++) + { + questions.push(surveyModel.pages[i].elements[j]); + const k = questions.length - 1; + questionsMap[questions[k].name] = questions[k]; + } + } + + if (inBlockRandomizationSettings.layout.length > 0) + { + let j = 0; + let k = 0; + let curPage = 0; + let curElement = 0; + + const shuffledSet0 = util.shuffle(Array.from(inBlockRandomizationSettings.set0)); + const shuffledSet1 = util.shuffle(Array.from(inBlockRandomizationSettings.set1)); + // const shuffledSet0 = this._FisherYatesShuffle(inBlockRandomizationSettings.set0); + // const shuffledSet1 = this._FisherYatesShuffle(inBlockRandomizationSettings.set1); + for (let i = 0; i < inBlockRandomizationSettings.layout.length; i++) + { + // Create new page if questionsPerPage reached. + if (curElement === inBlockRandomizationSettings.questionsPerPage) + { + newSurveyModel.pages.push({ elements: new Array(inBlockRandomizationSettings.questionsPerPage) }); + curPage++; + curElement = 0; + } + + if (inBlockRandomizationSettings.layout[i] === "set0") + { + newSurveyModel.pages[curPage].elements[curElement] = questionsMap[shuffledSet0[j]]; + j++; + } + else if (inBlockRandomizationSettings.layout[i] === "set1") + { + newSurveyModel.pages[curPage].elements[curElement] = questionsMap[shuffledSet1[k]]; + k++; + } + else + { + newSurveyModel.pages[curPage].elements[curElement] = questionsMap[inBlockRandomizationSettings.layout[i]]; + } + curElement++; + } + } + else if (inBlockRandomizationSettings.showOnly > 0) + { + // TODO: Check if there can be questionsPerPage applicable in this case. + const shuffledQuestions = util.shuffle(Array.from(questions)); + // shuffledQuestions = this._FisherYatesShuffle(questions); + newSurveyModel.pages[0].elements = shuffledQuestions.splice(0, inBlockRandomizationSettings.showOnly); + } + else { + // TODO: Check if there can be questionsPerPage applicable in this case. + newSurveyModel.pages[0].elements = util.shuffle(Array.from(questions)); + // newSurveyModel.pages[0].elements = this._FisherYatesShuffle(questions); + } + console.log("model recomposition took", performance.now() - t); + console.log("recomposed model:", newSurveyModel); + return newSurveyModel; + } + + _applyInQuestionRandomization (questionData, inQuestionRandomizationSettings, surveyData) + { + let t = performance.now(); + let choicesFieldName; + let valueFieldName; + if (questionData.rows !== undefined) + { + choicesFieldName = "rows"; + valueFieldName = "value"; + } + else if (questionData.choices !== undefined) + { + choicesFieldName = "choices"; + valueFieldName = "value"; + } + else if (questionData.items !== undefined) + { + choicesFieldName = "items"; + valueFieldName = "name"; + } + else + { + console.log("[Survey runner]: Uknown choicesFieldName for", questionData); + } + + if (inQuestionRandomizationSettings.randomizeAll) + { + questionData[choicesFieldName] = util.shuffle(Array.from(questionData[choicesFieldName])); + // questionData[choicesFieldName] = this._FisherYatesShuffle(questionData[choicesFieldName]); + // Handle dynamic choices. + } + else if (inQuestionRandomizationSettings.showOnly > 0) + { + questionData[choicesFieldName] = util.shuffle(Array.from(questionData[choicesFieldName]).splice(0, inQuestionRandomizationSettings.showOnly)); + // questionData[choicesFieldName] = this._FisherYatesShuffle(questionData[choicesFieldName]).splice(0, inQuestionRandomizationSettings.showOnly); + } + else if (inQuestionRandomizationSettings.reverse) + { + questionData[choicesFieldName] = Math.round(Math.random()) === 1 ? questionData[choicesFieldName].reverse() : questionData[choicesFieldName]; + } + else if (inQuestionRandomizationSettings.layout.length > 0) + { + const initialChoices = questionData[choicesFieldName]; + let choicesMap = {}; + // TODO: generalize further i.e. figure out how to calculate the length of array based on availability of sets. + const setIndices = [0, 0, 0]; + let i; + for (i = 0; i < questionData[choicesFieldName].length; i++) + { + choicesMap[questionData[choicesFieldName][i][valueFieldName]] = questionData[choicesFieldName][i]; + } + + // Creating new array of choices to which we're going to write from randomized/reversed sets. + questionData[choicesFieldName] = new Array(inQuestionRandomizationSettings.layout.length); + const shuffledSet0 = util.shuffle(Array.from(inQuestionRandomizationSettings.set0)); + const shuffledSet1 = util.shuffle(Array.from(inQuestionRandomizationSettings.set1)); + // const shuffledSet0 = this._FisherYatesShuffle(inQuestionRandomizationSettings.set0); + // const shuffledSet1 = this._FisherYatesShuffle(inQuestionRandomizationSettings.set1); + const reversedSet = Math.round(Math.random()) === 1 ? inQuestionRandomizationSettings.reverseOrder.reverse() : inQuestionRandomizationSettings.reverseOrder; + for (i = 0; i < inQuestionRandomizationSettings.layout.length; i++) + { + if (inQuestionRandomizationSettings.layout[i] === "set0") + { + questionData[choicesFieldName][i] = choicesMap[shuffledSet0[ setIndices[0] ]]; + setIndices[0]++; + } + else if (inQuestionRandomizationSettings.layout[i] === "set1") + { + questionData[choicesFieldName][i] = choicesMap[shuffledSet1[ setIndices[1] ]]; + setIndices[1]++; + } + else if (inQuestionRandomizationSettings.layout[i] === "reverseOrder") + { + questionData[choicesFieldName][i] = choicesMap[reversedSet[ setIndices[2] ]]; + setIndices[2]++; + } + else + { + questionData[choicesFieldName][i] = choicesMap[inQuestionRandomizationSettings.layout[i]]; + } + } + + if (inQuestionRandomizationSettings.layout.length < initialChoices.length) + { + // Compose unused choices set. + // TODO: This is potentially how data loss can be avoided and thus no need to deepcopy model. + if (surveyData.unusedChoices === undefined) + { + surveyData.unusedChoices = {}; + } + surveyData.unusedChoices[questionData.name] = { + // All other sets are always used entirely. + set1: shuffledSet1.splice(setIndices[1], shuffledSet1.length) + }; + console.log("unused choices", questionData.name, surveyData.unusedChoices[questionData.name]); + } + } + + console.log("applying question randomization took", performance.now() - t); + // console.log(questionData); + } + + /** + * @desc: Go over required surveyModelData and apply randomization settings. + */ + _processSurveyData (surveyData, surveyIdx) + { + let t = performance.now(); + let i, j; + let newSurveyModel = undefined; + if (surveyData.questionsOrderRandomization[surveyIdx] !== undefined) + { + // Qualtrics's in-block randomization ignores presense of page breaks within the block. + // Hence creating a fresh survey data object with shuffled question order. + newSurveyModel = this._composeModelWithRandomizedQuestions(surveyData.surveys[surveyIdx], surveyData.questionsOrderRandomization[surveyIdx]); + } + + // Checking if there's in-question randomization that needs to be applied. + for (i = 0; i < surveyData.surveys[surveyIdx].pages.length; i++) + { + for (j = 0; j < surveyData.surveys[surveyIdx].pages[i].elements.length; j++) + { + if (surveyData.inQuestionRandomization[surveyData.surveys[surveyIdx].pages[i].elements[j].name] !== undefined) + { + if (newSurveyModel === undefined) + { + // Marking a deep copy of survey model input data, to avoid data loss if randomization returns a subset of choices. + // TODO: think of somehting more optimal. + newSurveyModel = JSON.parse(JSON.stringify(surveyData.surveys[surveyIdx])); + } + this._applyInQuestionRandomization( + newSurveyModel.pages[i].elements[j], + surveyData.inQuestionRandomization[newSurveyModel.pages[i].elements[j].name], + surveyData + ); + } + } + } + + if (newSurveyModel === undefined) + { + // No changes were made, just return original data. + newSurveyModel = surveyData.surveys[surveyIdx]; + } + console.log("survey model preprocessing took", performance.now() - t); + return newSurveyModel; + } + /** * Callback triggered when the participant changed the page. * * @protected */ - _onCurrentPageChanging() + _onCurrentPageChanging (surveyModel, options) { - // console.log(arguments); - } + if (this._lastPageSwitchHandledIdx === options.oldCurrentPage.visibleIndex) + { + // When surveyModel.currentPage is called from this handler, pagechange event gets triggered again. + // Hence returning if we already handled this pagechange to avoid max callstack exceeded errors. + return; + } + this._lastPageSwitchHandledIdx = options.oldCurrentPage.visibleIndex; + const questions = surveyModel.getCurrentPageQuestions(); - _onTextMarkdown(survey, options) - { - // TODO add sanitization / checks if required. - options.html = options.text; + // It is guaranteed that the question with skip logic is always last on the page. + const lastQuestion = questions[questions.length - 1]; + const skipLogic = this._surveyData.questionSkipLogic[lastQuestion.name]; + if (skipLogic !== undefined) + { + this._expressionsRunner.expressionExecutor.setExpression(skipLogic.expression); + const result = this._expressionsRunner.run(surveyModel.data); + if (result) + { + options.allowChanging = false; + + if (skipLogic.destination === "ENDOFSURVEY") + { + surveyModel.setCompleted(); + this._surveyRunningPromiseResolve(Survey.SURVEY_COMPLETION_CODES.SKIP_TO_END_OF_SURVEY); + } + else if (skipLogic.destination === "ENDOFBLOCK") + { + surveyModel.setCompleted(); + this._surveyRunningPromiseResolve(Survey.SURVEY_COMPLETION_CODES.SKIP_TO_END_OF_BLOCK); + } + else + { + // skipLogic.destination is a question within the current survey (qualtrics block). + const targetQuestion = surveyModel.getQuestionByName(skipLogic.destination); + const page = surveyModel.getPageByQuestion(targetQuestion); + const pageQuestions = page.questions; + let i; + for (i = 0; i < pageQuestions.length; i++) + { + if (pageQuestions[i] === targetQuestion) + { + break; + } + pageQuestions[i].visible = false; + } + targetQuestion.focus(); + surveyModel.currentPage = page; + } + } + } } /** @@ -545,11 +912,36 @@ export class Survey extends VisualStim * * @param surveyModel * @param options - * @private + * @protected */ _onSurveyComplete(surveyModel, options) { - this.isFinished = true; + Object.assign(this._overallSurveyResults, surveyModel.data); + let completionCode = Survey.SURVEY_COMPLETION_CODES.NORMAL; + const questions = surveyModel.getAllQuestions(); + + // It is guaranteed that the question with skip logic is always last on the page. + const lastQuestion = questions[questions.length - 1]; + const skipLogic = this._surveyData.questionSkipLogic[lastQuestion.name]; + if (skipLogic !== undefined) + { + this._expressionsRunner.expressionExecutor.setExpression(skipLogic.expression); + const result = this._expressionsRunner.run(surveyModel.data); + if (result) + { + if (skipLogic.destination === "ENDOFSURVEY") + { + completionCode = Survey.SURVEY_COMPLETION_CODES.SKIP_TO_END_OF_SURVEY; + surveyModel.setCompleted(); + } + else if (skipLogic.destination === "ENDOFBLOCK") + { + completionCode = Survey.SURVEY_COMPLETION_CODES.SKIP_TO_END_OF_BLOCK; + } + } + } + + surveyModel.stopTimer(); // check whether the survey was completed: const surveyVisibleQuestions = this._surveyModel.getAllQuestions(true); @@ -574,9 +966,245 @@ export class Survey extends VisualStim }, 0 ); - this.isCompleted = (nbAnsweredQuestions === surveyVisibleQuestions.length); + this._isCompletedAll = this._isCompletedAll && (nbAnsweredQuestions === surveyVisibleQuestions.length); + if (this._isCompletedAll === false) + { + this.psychoJS.logger.warn(`Flag _isCompletedAll is false!`); + } + this._surveyRunningPromiseResolve(completionCode); + } + + _onFlowComplete () + { + this.isFinished = true; this._onFinishedCallback(); } + _onTextMarkdown(survey, options) + { + // TODO add sanitization / checks if required. + options.html = options.text; + } + + /** + * Run the survey using flow data provided. This method runs recursively. + * + * @protected + * @param {Object} surveyData - surveyData / model. + * @param {Object} surveyFlowBlock - XXX + * @return {void} + */ + _beginSurvey(surveyData, surveyFlowBlock) + { + this._lastPageSwitchHandledIdx = -1; + const surveyIdx = surveyFlowBlock.surveyIdx; + let surveyModelInput = this._processSurveyData(surveyData, surveyIdx); + + this._surveyModel = new window.Survey.Model(surveyModelInput); + for (let j in this._variables) + { + // Adding variables directly to hash to get higher performance (this is instantaneous compared to .setVariable()). + // At this stage we don't care to trigger all the callbacks like .setVariable() does, since this is very beginning of survey presentation. + this._surveyModel.variablesHash[j] = this._variables[j]; + // this._surveyModel.setVariable(j, this._variables[j]); + } + + if (!this._surveyModel.isInitialized) + { + this._registerCustomComponentCallbacks(this._surveyModel); + this._surveyModel.onValueChanged.add(this._onQuestionValueChanged.bind(this)); + this._surveyModel.onCurrentPageChanging.add(this._onCurrentPageChanging.bind(this)); + this._surveyModel.onComplete.add(this._onSurveyComplete.bind(this)); + this._surveyModel.onTextMarkdown.add(this._onTextMarkdown.bind(this)); + this._surveyModel.isInitialized = true; + this._surveyModel.onAfterRenderQuestion.add(this._handleAfterQuestionRender.bind(this)); + } + + const completeText = surveyIdx < this._surveyData.surveys.length - 1 ? (this._surveyModel.pageNextText || Survey.CAPTIONS.NEXT) : undefined; + jQuery(".survey").Survey({ + model: this._surveyModel, + showItemsInOrder: "column", + completeText, + ...surveyData.surveySettings, + }); + + this._questionAnswerTimestampClock.reset(); + + // TODO: should this be conditional? + this._surveyModel.startTimer(); + + this._surveyRunningPromise = new Promise((res, rej) => { + this._surveyRunningPromiseResolve = res; + this._surveyRunningPromiseReject = rej; + }); + + return this._surveyRunningPromise; + } + + async _runSurveyFlow(surveyBlock, surveyData, prevBlockResults = {}) + { + let nodeExitCode = Survey.NODE_EXIT_CODES.NORMAL; + + if (surveyBlock.type === Survey.SURVEY_FLOW_PLAYBACK_TYPES.CONDITIONAL) + { + const dataset = Object.assign({}, this._overallSurveyResults, this._variables); + this._expressionsRunner.expressionExecutor.setExpression(surveyBlock.condition); + if (this._expressionsRunner.run(dataset) && surveyBlock.nodes[0] !== undefined) + { + nodeExitCode = await this._runSurveyFlow(surveyBlock.nodes[0], surveyData, prevBlockResults); + } + else if (surveyBlock.nodes[1] !== undefined) + { + nodeExitCode = await this._runSurveyFlow(surveyBlock.nodes[1], surveyData, prevBlockResults); + } + } + else if (surveyBlock.type === Survey.SURVEY_FLOW_PLAYBACK_TYPES.RANDOMIZER) + { + util.shuffle(surveyBlock.nodes, Math.random, 0, surveyBlock.nodes.length - 1); + // this._InPlaceFisherYatesShuffle(surveyBlock.nodes, 0, surveyBlock.nodes.length - 1); + } + else if (surveyBlock.type === Survey.SURVEY_FLOW_PLAYBACK_TYPES.EMBEDDED_DATA) + { + let t = performance.now(); + const surveyBlockData = surveyData.embeddedData[surveyBlock.dataIdx]; + for (let j = 0; j < surveyBlockData.length; j++) + { + // TODO: handle the rest data types. + if (surveyBlockData[j].type === "Custom") + { + // Variable value can be an expression. Check if so and if valid - run it. + // surveyBlockData is an array so all the variables in it are in order they were declared in Qualtrics. + // This means this._variables is saturated gradually with the data necessary to perform a computation. + // It's guaranteed to be there, unless there are declaration order mistakes. + this._expressionsRunner.expressionExecutor.setExpression(surveyBlockData[j].value); + if (this._expressionsRunner.expressionExecutor.canRun()) + { + this._variables[surveyBlockData[j].key] = this._expressionsRunner.run(this._variables); + } + else + { + this._variables[surveyBlockData[j].key] = surveyBlockData[j].value; + } + } + } + console.log("embedded data variables accumulation took", performance.now() - t); + } + else if (surveyBlock.type === Survey.SURVEY_FLOW_PLAYBACK_TYPES.ENDSURVEY) + { + if (this._surveyModel) + { + this._surveyModel.setCompleted(); + } + console.log("EndSurvey block encountered, exiting."); + nodeExitCode = Survey.NODE_EXIT_CODES.BREAK_FLOW; + } + else if (surveyBlock.type === Survey.SURVEY_FLOW_PLAYBACK_TYPES.DIRECT) + { + const surveyCompletionCode = await this._beginSurvey(surveyData, surveyBlock); + Object.assign({}, prevBlockResults, this._surveyModel.data); + + // SkipLogic had destination set to ENDOFSURVEY. + if (surveyCompletionCode === Survey.SURVEY_COMPLETION_CODES.SKIP_TO_END_OF_SURVEY) + { + nodeExitCode = Survey.NODE_EXIT_CODES.BREAK_FLOW; + } + } + + if (nodeExitCode === Survey.NODE_EXIT_CODES.NORMAL && + surveyBlock.type !== Survey.SURVEY_FLOW_PLAYBACK_TYPES.CONDITIONAL && + surveyBlock.nodes instanceof Array) + { + for (let i = 0; i < surveyBlock.nodes.length; i++) + { + nodeExitCode = await this._runSurveyFlow(surveyBlock.nodes[i], surveyData, prevBlockResults); + if (nodeExitCode === Survey.NODE_EXIT_CODES.BREAK_FLOW) + { + break; + } + } + } + + if (surveyBlock.name === "root") + { + // At this point we went through the entire survey flow tree. + this._onFlowComplete(); + } + + return nodeExitCode; + } + + _resetState () + { + this._lastPageSwitchHandledIdx = -1; + } + + _handleWindowResize(e) + { + if (this._surveyModel) + { + for (let i = this._signaturePads.length - 1; i >= 0; i--) + { + // As of writing this (24.03.2023). SurveyJS doesn't have a proper event + // for question being removed from nested locations, such as dynamic panel. + // However, surveyJS will set .signaturePad property to null once the question is removed. + // Utilising this knowledge to sync our lists. + if (this._signaturePads[ i ].question.signaturePad) + { + this._signaturePads[ i ].question.signatureWidth = Math.min( + this._signaturePads[i].question.maxSignatureWidth, + this._signaturePads[ i ].htmlElement.getBoundingClientRect().width + ); + } + else + { + // Signature pad was removed. Syncing list. + this._signaturePads.splice(i, 1); + } + } + } + } + + _addEventListeners() + { + window.addEventListener("resize", (e) => this._handleWindowResize(e)); + } + + _handleAfterQuestionRender (sender, options) + { + if (options.question.getType() === "signaturepad") + { + this._signaturePads.push(options); + options.question.signatureWidth = Math.min(options.question.maxSignatureWidth, options.htmlElement.getBoundingClientRect().width); + } + } + + /** + * Init the SurveyJS.io library and various extensions, setup the theme. + * + * @protected + */ + _initSurveyJS() + { + // note: the Survey.js libraries must be added to the list of resources in PsychoJS.start: + // psychoJS.start({ resources: [ {'surveyLibrary': true}, ... ], ...}); + + // id of the SurveyJS html div: + this._surveyDivId = `survey-${this._name}`; + + this._registerCustomExpressionFunctions(window.Survey, customExpressionFunctionsArray); + this._registerWidgets(window.Survey); + this._registerCustomSurveyProperties(window.Survey); + this._addEventListeners(); + this._expressionsRunner = new window.Survey.ExpressionRunner(); + + // setup the survey theme: + window.Survey.Serializer.getProperty("expression", "minWidth").defaultValue = "100px"; + window.Survey.settings.minWidth = "100px"; + window.Survey.StylesManager.applyTheme("defaultV2"); + + // load the desired style: + // TODO + // util.loadCss("./survey/css/grey_style.css"); + } } diff --git a/src/visual/TextBox.js b/src/visual/TextBox.js index 3930cbf..ab06378 100644 --- a/src/visual/TextBox.js +++ b/src/visual/TextBox.js @@ -65,6 +65,7 @@ export class TextBox extends util.mix(VisualStim).with(ColorMixin) opacity, depth, text, + placeholder, font, letterHeight, bold, @@ -85,7 +86,8 @@ export class TextBox extends util.mix(VisualStim).with(ColorMixin) clipMask, autoDraw, autoLog, - fitToContent + fitToContent, + boxFn } = {}, ) { @@ -98,7 +100,7 @@ export class TextBox extends util.mix(VisualStim).with(ColorMixin) ); this._addAttribute( "placeholder", - text, + placeholder, "", this._onChange(true, true), ); @@ -201,12 +203,14 @@ export class TextBox extends util.mix(VisualStim).with(ColorMixin) // and setSize called from super class would not have a proper effect this.setSize(size); + this._addAttribute("boxFn", boxFn, null); + // estimate the bounding box: this._estimateBoundingBox(); if (this._autoLog) { - this._psychoJS.experimentLogger.exp(`Created ${this.name} = ${this.toString()}`); + this._psychoJS.experimentLogger.exp(`Created ${this.name} = ${util.toString(this)}`); } } @@ -480,6 +484,26 @@ export class TextBox extends util.mix(VisualStim).with(ColorMixin) alignmentStyles = ["center", "center"]; } + let box; + if (this._boxFn !== null) + { + box = this._boxFn; + } + else + { + // note: box style properties eventually become PIXI.Graphics settings, so same syntax applies + box = { + fill: new Color(this._fillColor).int, + alpha: this._fillColor === undefined || this._fillColor === null ? 0 : 1, + rounded: 5, + stroke: { + color: new Color(this._borderColor).int, + width: borderWidth_px, + alpha: this._borderColor === undefined || this._borderColor === null ? 0 : 1 + } + }; + } + return { // input style properties eventually become CSS, so same syntax applies input: { @@ -503,41 +527,7 @@ export class TextBox extends util.mix(VisualStim).with(ColorMixin) overflow: "hidden", pointerEvents: "none" }, - // box style properties eventually become PIXI.Graphics settings, so same syntax applies - box: { - fill: new Color(this._fillColor).int, - alpha: this._fillColor === undefined || this._fillColor === null ? 0 : 1, - rounded: 5, - stroke: { - color: new Color(this._borderColor).int, - width: borderWidth_px, - alpha: this._borderColor === undefined || this._borderColor === null ? 0 : 1 - }, - /*default: { - fill: new Color(this._fillColor).int, - rounded: 5, - stroke: { - color: new Color(this._borderColor).int, - width: borderWidth_px - } - }, - focused: { - fill: new Color(this._fillColor).int, - rounded: 5, - stroke: { - color: new Color(this._borderColor).int, - width: borderWidth_px - } - }, - disabled: { - fill: new Color(this._fillColor).int, - rounded: 5, - stroke: { - color: new Color(this._borderColor).int, - width: borderWidth_px - } - }*/ - }, + box }; } diff --git a/src/visual/survey/MaxDiffMatrix.js b/src/visual/survey/MaxDiffMatrix.js deleted file mode 100644 index a539f54..0000000 --- a/src/visual/survey/MaxDiffMatrix.js +++ /dev/null @@ -1,307 +0,0 @@ -/** -* @desc "MaxDiff" matrix. -* */ - -class MaxDiffMatrix -{ - constructor (cfg = {}) - { - // surveyCSS contains css class names provided by the applied theme - // INCLUDING those added/modified by application's code. - const surveyCSS = cfg.question.css; - this._CSS_CLASSES = { - WRAPPER: `${surveyCSS.matrix.tableWrapper} matrix-maxdiff`, - TABLE: surveyCSS.matrix.root, - TABLE_ROW: surveyCSS.matrixdropdown.row, - TABLE_HEADER_CELL: surveyCSS.matrix.headerCell, - TABLE_CELL: surveyCSS.matrix.cell, - INPUT_TEXT: surveyCSS.text.root, - LABEL: surveyCSS.matrix.label, - ITEM_CHECKED: surveyCSS.matrix.itemChecked, - ITEM_VALUE: surveyCSS.matrix.itemValue, - ITEM_DECORATOR: surveyCSS.matrix.materialDecorator, - RADIO: surveyCSS.radiogroup.item, - SELECT: surveyCSS.dropdown.control, - CHECKBOX: surveyCSS.checkbox.item - }; - - // const CSS_CLASSES = { - // WRAPPER: "sv-matrix matrix-maxdiff", - // TABLE: "sv-table sv-matrix-root", - // TABLE_ROW: "sv-table__row", - // TABLE_HEADER_CELL: "sv-table__cell sv-table__cell--header", - // TABLE_CELL: "sv-table__cell sv-matrix__cell", - // INPUT_TEXT: "sv-text", - // RADIO: "sv-radio", - // SELECT: "sv-dropdown", - // CHECKBOX: "sv-checkbox" - // }; - this._question = cfg.question; - this._DOM = cfg.el; - this._DOM.classList.add(...this._CSS_CLASSES.WRAPPER.split(" ")); - - this._bindedHandlers = - { - _handleInput: this._handleInput.bind(this) - }; - - this._init(this._question, this._DOM); - } - - _handleInput (e) - { - const valueCoordinates = e.currentTarget.name.split("-"); - const row = valueCoordinates[0]; - const col = parseInt(e.currentTarget.dataset.column, 10); - const colRadioDOMS = this._DOM.querySelectorAll(`input[data-column="${col}"]`); - - if (this._question.value === undefined) - { - this._question.value = {}; - } - - const oldVal = this._question.value; - const newVal = {[row]: col}; - - // Handle case when exclusiveAnswer option is false? - let inputRow; - let i; - for (i = 0; i < colRadioDOMS.length; i++) - { - if (colRadioDOMS[i] !== e.currentTarget) - { - colRadioDOMS[i].checked = false; - inputRow = colRadioDOMS[i].name; - // Preserving previously ticked columns within other rows - if (oldVal[inputRow] !== undefined && oldVal[inputRow] !== col) - { - newVal[inputRow] = oldVal[inputRow]; - } - } - } - - this._question.value = newVal; - console.log(row, col, this._question.value); - } - - _init (question, el) - { - let t = performance.now(); - const CSS_CLASSES = this._CSS_CLASSES; - if (question.css.matrix.mainRoot) - { - // Replacing default mainRoot class with those used in matrix type questions, to achieve proper styling and overflow behavior - const rootClass = `${question.css.matrix.mainRoot} ${question.cssClasses.withFrame || ""}`; - question.setCssRoot(rootClass); - question.cssClasses.mainRoot = rootClass; - } - let html; - let headerCells = ""; - let subHeaderCells = ""; - let bodyCells = ""; - let bodyHTML = ""; - let cellGenerator; - let i, j; - - // Relying on a fact that there's always 2 columns. - // This is correct according current Qualtrics design for MaxDiff matrices. - // Header generation - headerCells = - `| ${headerCells} | |
| ${subHeaderCells} |