diff --git a/packages/plugin-cloze/src/index.spec.ts b/packages/plugin-cloze/src/index.spec.ts index 52b1c4c88f..ec92cdb412 100644 --- a/packages/plugin-cloze/src/index.spec.ts +++ b/packages/plugin-cloze/src/index.spec.ts @@ -8,6 +8,11 @@ const getInputElementById = (id: string) => document.getElementById(id) as HTMLI const clickFinishButton = () => clickTarget(document.querySelector("#finish_cloze_button")); +// reset DOM +beforeEach(() => { + document.body.innerHTML = ""; +}); + describe("cloze", () => { test("displays cloze", async () => { const { getHTML, expectFinished } = await startTimeline([ @@ -200,6 +205,25 @@ describe("cloze", () => { await expectFinished(); }); + test.skip("calls mistake function on button click when answers are checked and do not belong to a multiple answer blank", async () => { + const mistakeFn = jest.fn(); + + const { expectFinished } = await startTimeline([ + { + type: cloze, + text: "This is a %cloze/jspsych% text.", + check_answers: true, + mistake_fn: mistakeFn, + }, + ]); + + getInputElementById("input0").value = "not fitting in answer"; + await clickFinishButton(); + expect(mistakeFn).toHaveBeenCalled(); + + await expectFinished(); + }); + test("response data is stored as an array", async () => { const { getData, expectFinished } = await startTimeline([ { diff --git a/packages/plugin-cloze/src/index.ts b/packages/plugin-cloze/src/index.ts index bc2b50005a..9c4aa073a9 100644 --- a/packages/plugin-cloze/src/index.ts +++ b/packages/plugin-cloze/src/index.ts @@ -6,7 +6,12 @@ const info = { name: "cloze", version: version, parameters: { - /** The cloze text to be displayed. Blanks are indicated by %% signs and automatically replaced by input fields. If there is a correct answer you want the system to check against, it must be typed between the two percentage signs (i.e. % correct solution %). */ + /** + * The cloze text to be displayed. Blanks are indicated by %% signs and automatically replaced by + * input fields. If there is a correct answer you want the system to check against, it must be typed + * between the two percentage signs (i.e. % correct solution %). If you would like to input multiple + * solutions, type a slash between each responses (i.e. %1/2/3%). + */ text: { type: ParameterType.HTML_STRING, default: undefined, @@ -16,12 +21,25 @@ const info = { type: ParameterType.STRING, default: "OK", }, - /** Boolean value indicating if the answers given by participants should be compared against a correct solution given in the text (between % signs) after the button was clicked. If ```true```, answers are checked and in case of differences, the ```mistake_fn``` is called. In this case, the trial does not automatically finish. If ```false```, no checks are performed and the trial automatically ends when clicking the button. */ + /** + * Boolean value indicating if the answers given by participants should be compared + * against a correct solution given in `text` after the submit button was clicked. + * If ```true```, answers are checked and in case of differences, the ```mistake_fn``` + * is called. In this case, the trial does not automatically finish. If ```false```, + * no checks are performed and the trial ends when clicking the submit button. + */ check_answers: { type: ParameterType.BOOL, default: false, }, - /** Boolean value indicating if the answers given by participants should be checked for completion after the button was clicked. If ```true```, answers are not checked for completion and blank answers are allowed. The trial will then automatically finish upon the clicking the button. If ```false```, answers are checked for completion, and in case there are some fields with missing answers, the ```mistake_fn``` is called. In this case, the trial does not automatically finish. */ + /** + * Boolean value indicating if the answers given by participants should be checked for + * completion after the button was clicked. If ```true```, answers are not checked for + * completion and blank answers are allowed. The trial will then automatically finish + * upon the clicking the button. If ```false```, answers are checked for completion, + * and in case there are some fields with missing answers, the ```mistake_fn``` is called. + * In this case, the trial does not automatically finish. + */ allow_blanks: { type: ParameterType.BOOL, default: true, @@ -32,14 +50,18 @@ const info = { pretty_name: "Case sensitivity", default: true, }, - /** Function called if either the check_answers is set to TRUE or the allow_blanks is set to FALSE and there is a discrepancy between the set answers and the answers provide or if all input fields aren't filled out, respectively. */ + /** + * Function called if either `check_answers` is `true` or `allow_blanks` is `false` + * and there is a discrepancy between the set answers and the answers provided, or + * if all input fields aren't filled out, respectively. + */ mistake_fn: { type: ParameterType.FUNCTION, default: () => {}, }, }, data: { - /** Answers the partcipant gave. */ + /** Answers the participant gave. */ response: { type: ParameterType.STRING, array: true, @@ -81,7 +103,7 @@ class ClozePlugin implements JsPsychPlugin { display_element.innerHTML = html; const check = () => { - var answers: String[] = []; + var answers: string[] = []; var answers_correct = true; var answers_filled = true; @@ -126,8 +148,8 @@ class ClozePlugin implements JsPsychPlugin { (display_element.querySelector("#input0") as HTMLElement).focus(); } - private getSolutions(text: string, case_sensitive: boolean) { - const solutions: String[][] = []; + private getSolutions(text: string, case_sensitive: boolean): string[][] { + const solutions: string[][] = []; const elements = text.split("%"); for (let i = 1; i < elements.length; i += 2) { @@ -156,12 +178,13 @@ class ClozePlugin implements JsPsychPlugin { private create_simulation_data(trial: TrialType, simulation_options) { const solutions = this.getSolutions(trial.text, trial.case_sensitivity); - const responses = []; + const responses: string[] = []; for (const wordList of solutions) { if (wordList.includes("")) { - responses.push(this.jsPsych.randomization.randomWords({ exactly: 1 })); + var word = this.jsPsych.randomization.randomWords({ exactly: 1 }); + responses.push(word[0]); } else { - responses.push(wordList); + responses.push(wordList[Math.floor(Math.random() * wordList.length)]); } } @@ -179,8 +202,6 @@ class ClozePlugin implements JsPsychPlugin { private simulate_data_only(trial: TrialType, simulation_options) { const data = this.create_simulation_data(trial, simulation_options); - data.response = data.response[0]; - this.jsPsych.finishTrial(data); } @@ -195,9 +216,7 @@ class ClozePlugin implements JsPsychPlugin { const inputs = display_element.querySelectorAll('input[type="text"]'); let rt = this.jsPsych.randomization.sampleExGaussian(750, 200, 0.01, true); for (let i = 0; i < data.response.length; i++) { - let res = data.response[i][Math.floor(Math.random() * data.response[i].length)]; - - this.jsPsych.pluginAPI.fillTextInput(inputs[i] as HTMLInputElement, res, rt); + this.jsPsych.pluginAPI.fillTextInput(inputs[i] as HTMLInputElement, data.response[i], rt); rt += this.jsPsych.randomization.sampleExGaussian(750, 200, 0.01, true); } this.jsPsych.pluginAPI.clickTarget(display_element.querySelector("#finish_cloze_button"), rt);