mirror of
https://github.com/jspsych/jsPsych.git
synced 2025-05-10 11:10:54 +00:00
Merge branch 'main' of https://github.com/jspsych/jsPsych
This commit is contained in:
Becky Gilbert
commit
10930af331
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<script src="docs-demo-timeline.js"></script>
|
||||
<script src="https://unpkg.com/jspsych@7.3.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-cloze@1.1.2"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-cloze@1.2.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.0/css/jspsych.css" />
|
||||
<link rel="stylesheet" href="docs-demo.css" type="text/css">
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<script src="docs-demo-timeline.js"></script>
|
||||
<script src="https://unpkg.com/jspsych@7.3.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-cloze@1.1.2"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-cloze@1.2.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.0/css/jspsych.css" />
|
||||
<link rel="stylesheet" href="docs-demo.css" type="text/css">
|
||||
|
||||
31
docs/demos/jspsych-cloze-demo3.html
Normal file
31
docs/demos/jspsych-cloze-demo3.html
Normal file
@ -0,0 +1,31 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="docs-demo-timeline.js"></script>
|
||||
<script src="https://unpkg.com/jspsych@7.3.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-cloze@1.2.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.0/css/jspsych.css" />
|
||||
<link rel="stylesheet" href="docs-demo.css" type="text/css">
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
const jsPsych = initJsPsych();
|
||||
|
||||
var trial = {
|
||||
type: jsPsychCloze,
|
||||
text: 'Science notebooks have a %%-colored front cover. Math notebooks have a %%-colored front cover.',
|
||||
allow_blanks: false,
|
||||
mistake_fn: function() { alert('Please fill in all blanks.'); }
|
||||
};
|
||||
|
||||
const timeline = [trial];
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run(generateDocsDemoTimeline(timeline));
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
@ -1,8 +1,8 @@
|
||||
# cloze
|
||||
|
||||
Current version: 1.1.2. [See version history](https://github.com/jspsych/jsPsych/blob/main/packages/plugin-cloze/CHANGELOG.md).
|
||||
Current version: 1.2.0. [See version history](https://github.com/jspsych/jsPsych/blob/main/packages/plugin-cloze/CHANGELOG.md).
|
||||
|
||||
This plugin displays a text with certain words removed. Participants are asked to replace the missing items. Responses are recorded when clicking a button. Optionally, responses are evaluated and a function is called in case of differences, making it possible to inform participants about mistakes.
|
||||
This plugin displays a text with certain words omitted. Participants are asked to replace the missing items. Responses are recorded when clicking a button. Responses can be evaluated and a function is called in case of either differences or incomplete answers, making it possible to inform participants about mistakes before proceeding.
|
||||
|
||||
## Parameters
|
||||
|
||||
@ -13,7 +13,8 @@ In addition to the [parameters available in all plugins](../overview/plugins.md#
|
||||
| text | string | *undefined* | 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 %). |
|
||||
| button_text | string | OK | Text of the button participants have to press for finishing the cloze test. |
|
||||
| check_answers | boolean | false | 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. |
|
||||
| mistake_fn | function | ```function(){}``` | Function called if ```check_answers``` is set to ```true``` and there is a difference between the participants answers and the correct solution provided in the text. |
|
||||
| allow_blanks | boolean | true | 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. |
|
||||
| mistake_fn | function | ```function(){}``` | Function called if ```check_answers``` is set to ```true``` or ```allow_blanks``` is set to false and there is a difference between the participants answers and the correct solution provided in the text, or if there is at least one field with a blank answer respectively. |
|
||||
|
||||
## Data Generated
|
||||
|
||||
@ -28,7 +29,7 @@ In addition to the [default data collected by all plugins](../overview/plugins.m
|
||||
Using the CDN-hosted JavaScript file:
|
||||
|
||||
```js
|
||||
<script src="https://unpkg.com/@jspsych/plugin-cloze@1.1.2"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-cloze@1.2.0"></script>
|
||||
```
|
||||
|
||||
Using the JavaScript file downloaded from a GitHub release dist archive:
|
||||
@ -63,6 +64,23 @@ import cloze from '@jspsych/plugin-cloze';
|
||||
|
||||
<a target="_blank" rel="noopener noreferrer" href="../../demos/jspsych-cloze-demo1.html">Open demo in new tab</a>
|
||||
|
||||
???+ example "Cloze example using default settings with completion checking and custom error handling"
|
||||
=== "Code"
|
||||
```javascript
|
||||
var cloze_trial = {
|
||||
type: jsPsychCloze,
|
||||
text: 'Science notebooks have a %%-colored front cover. Math notebooks have a %%-colored front cover.',
|
||||
allow_blanks: false,
|
||||
mistake_fn: function() { alert('Please fill in all blanks.'); }
|
||||
};
|
||||
```
|
||||
=== "Demo"
|
||||
<div style="text-align:center;">
|
||||
<iframe src="../../demos/jspsych-cloze-demo3.html" width="90%;" height="500px;" frameBorder="0"></iframe>
|
||||
</div>
|
||||
|
||||
<a target="_blank" rel="noopener noreferrer" href="../../demos/jspsych-cloze-demo3.html">Open demo in new tab</a>
|
||||
|
||||
|
||||
???+ example "More elaborate example (with check against correct solution, custom error handling and modified button text)"
|
||||
=== "Code"
|
||||
@ -72,7 +90,7 @@ import cloze from '@jspsych/plugin-cloze';
|
||||
text: 'A rectangle has % 4 % corners and a triangle has % 3 %.',
|
||||
check_answers: true,
|
||||
button_text: 'Next',
|
||||
mistake_fn: function(){alert("Wrong answer. Please check again.")}
|
||||
mistake_fn: function (){ alert("Wrong answer. Please check again.") }
|
||||
};
|
||||
```
|
||||
=== "Demo"
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<script src="../packages/jspsych/dist/index.browser.js"></script>
|
||||
<script src="../packages/plugin-cloze/dist/index.browser.js"></script>
|
||||
<link rel="stylesheet" href="../packages/jspsych/css/jspsych.css">
|
||||
<link rel="stylesheet" href="../packages/jspsych/css/jspsych.css" />
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
@ -22,6 +22,14 @@
|
||||
text: 'The %% is the largest terrestrial mammal. It lives in both %% and %%.'
|
||||
});
|
||||
|
||||
// another example with checking if all the blanks are filled in
|
||||
timeline.push({
|
||||
type: jsPsychCloze,
|
||||
text: 'Science notebooks have a %%-colored front cover. Math notebooks have a %%-colored front cover.',
|
||||
allow_blanks: false,
|
||||
mistake_fn: function () { alert("You have not filled in all the blanks!"); }
|
||||
});
|
||||
|
||||
// more elaborate example (with check against correct solution, custom error handling and modified button text)
|
||||
timeline.push({
|
||||
type: jsPsychCloze,
|
||||
@ -32,6 +40,5 @@
|
||||
});
|
||||
|
||||
jsPsych.run(timeline);
|
||||
|
||||
</script>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
8
package-lock.json
generated
8
package-lock.json
generated
@ -16584,7 +16584,7 @@
|
||||
},
|
||||
"packages/config": {
|
||||
"name": "@jspsych/config",
|
||||
"version": "1.3.1",
|
||||
"version": "1.3.2",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@babel/cli": "7.17.10",
|
||||
@ -16829,10 +16829,10 @@
|
||||
},
|
||||
"packages/plugin-cloze": {
|
||||
"name": "@jspsych/plugin-cloze",
|
||||
"version": "1.1.2",
|
||||
"version": "1.2.0",
|
||||
"license": "MIT",
|
||||
"devDependencies": {
|
||||
"@jspsych/config": "^1.3.0",
|
||||
"@jspsych/config": "^1.3.2",
|
||||
"@jspsych/test-utils": "^1.1.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
@ -19335,7 +19335,7 @@
|
||||
"@jspsych/plugin-cloze": {
|
||||
"version": "file:packages/plugin-cloze",
|
||||
"requires": {
|
||||
"@jspsych/config": "^1.3.0",
|
||||
"@jspsych/config": "^1.3.2",
|
||||
"@jspsych/test-utils": "^1.1.2"
|
||||
}
|
||||
},
|
||||
|
||||
@ -1,5 +1,11 @@
|
||||
# @jspsych/config
|
||||
|
||||
## 1.3.2
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- [`e3e9d903`](https://github.com/jspsych/jsPsych/commit/e3e9d903462663b694633cdf873accefda453961) Thanks [@bjoluc](https://github.com/bjoluc)! - Prevent rollup from relying on node internals in browser builds
|
||||
|
||||
## 1.3.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@jspsych/config",
|
||||
"version": "1.3.1",
|
||||
"version": "1.3.2",
|
||||
"description": "Shared (build) configuration for jsPsych packages",
|
||||
"type": "module",
|
||||
"exports": {
|
||||
|
||||
@ -13,7 +13,7 @@ const makeConfig = ({
|
||||
outputOptions = {},
|
||||
globalOptions = {},
|
||||
iifeOutputOptions = {},
|
||||
nodeOnly = false,
|
||||
isNodeOnlyBuild = false,
|
||||
}) => {
|
||||
const source = "src/index";
|
||||
const destination = "dist/index";
|
||||
@ -26,7 +26,7 @@ const makeConfig = ({
|
||||
const commonConfig = defineConfig({
|
||||
input: `${source}.ts`,
|
||||
plugins: [
|
||||
resolve(),
|
||||
resolve({ preferBuiltins: isNodeOnlyBuild }),
|
||||
typescript({
|
||||
typescript: ts,
|
||||
tsconfigDefaults: {
|
||||
@ -62,7 +62,7 @@ const makeConfig = ({
|
||||
},
|
||||
];
|
||||
|
||||
if (!nodeOnly) {
|
||||
if (!isNodeOnlyBuild) {
|
||||
output.push({
|
||||
// Build file to be used for tinkering in modern browsers
|
||||
file: `${destination}.browser.js`,
|
||||
@ -75,7 +75,7 @@ const makeConfig = ({
|
||||
// Non-babel builds
|
||||
const config = defineConfig([{ ...commonConfig, output }]);
|
||||
|
||||
if (!nodeOnly) {
|
||||
if (!isNodeOnlyBuild) {
|
||||
// Babel build
|
||||
config.push({
|
||||
...commonConfig,
|
||||
|
||||
@ -1,5 +1,11 @@
|
||||
# @jspsych/plugin-cloze
|
||||
|
||||
## 1.2.0
|
||||
|
||||
### Minor Changes
|
||||
|
||||
- [#2784](https://github.com/jspsych/jsPsych/pull/2784) [`2f1a8674`](https://github.com/jspsych/jsPsych/commit/2f1a86749426740b2368633b14f59445d882000d) Thanks [@jadeddelta](https://github.com/jadeddelta)! - added `allow_blanks` as a field, allowing for completion checking of answers
|
||||
|
||||
## 1.1.2
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -4,7 +4,7 @@ jsPsych is a JavaScript framework for creating behavioral experiments that run i
|
||||
|
||||
## Plugin Description
|
||||
|
||||
The cloze plugin displays a text with certain words omitted. Participants are asked to replace the missing words, and are recorded upon clicking a button. Optionally, the responses can be evaluated and a function can be called in the case of differences, making it possible to provide feedback to the participant.
|
||||
The cloze plugin displays a text with certain words omitted. Participants are asked to replace the missing words, and are recorded upon clicking a button. Responses can be evaluated and a function is called in case of either differences or incomplete answers, making it possible to inform participants about mistakes before proceeding.
|
||||
|
||||
## Examples
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@jspsych/plugin-cloze",
|
||||
"version": "1.1.2",
|
||||
"version": "1.2.0",
|
||||
"description": "jsPsych plugin for displaying a cloze test and checking participants answers against a correct solution",
|
||||
"type": "module",
|
||||
"main": "dist/index.cjs",
|
||||
@ -37,7 +37,7 @@
|
||||
"jspsych": ">=7.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@jspsych/config": "^1.3.0",
|
||||
"@jspsych/config": "^1.3.2",
|
||||
"@jspsych/test-utils": "^1.1.2"
|
||||
}
|
||||
}
|
||||
|
||||
@ -73,6 +73,20 @@ describe("cloze", () => {
|
||||
await expectFinished();
|
||||
});
|
||||
|
||||
test("ends trial on button click when all answers are checked for completion and are complete", async () => {
|
||||
const { expectFinished } = await startTimeline([
|
||||
{
|
||||
type: cloze,
|
||||
text: "This is a %cloze% text.",
|
||||
allow_blanks: false,
|
||||
},
|
||||
]);
|
||||
|
||||
getInputElementById("input0").value = "filler";
|
||||
clickTarget(document.querySelector("#finish_cloze_button"));
|
||||
await expectFinished();
|
||||
});
|
||||
|
||||
test("does not end trial on button click when answers are checked and not correct", async () => {
|
||||
const { expectRunning } = await startTimeline([
|
||||
{
|
||||
@ -87,6 +101,20 @@ describe("cloze", () => {
|
||||
await expectRunning();
|
||||
});
|
||||
|
||||
test("does not end trial on button click when answers are checked for completion and some are missing", async () => {
|
||||
const { expectRunning } = await startTimeline([
|
||||
{
|
||||
type: cloze,
|
||||
text: "This is a %cloze% text.",
|
||||
allow_blanks: false,
|
||||
},
|
||||
]);
|
||||
|
||||
getInputElementById("input0").value = "";
|
||||
clickTarget(document.querySelector("#finish_cloze_button"));
|
||||
await expectRunning();
|
||||
});
|
||||
|
||||
test("does not call mistake function on button click when answers are checked and correct", async () => {
|
||||
const mistakeFn = jest.fn();
|
||||
|
||||
@ -104,6 +132,23 @@ describe("cloze", () => {
|
||||
expect(mistakeFn).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
test("does not call mistake function on button click when answers are checked for completion and are complete", async () => {
|
||||
const mistakeFn = jest.fn();
|
||||
|
||||
await startTimeline([
|
||||
{
|
||||
type: cloze,
|
||||
text: "This is a %cloze% text.",
|
||||
allow_blanks: false,
|
||||
mistake_fn: mistakeFn,
|
||||
},
|
||||
]);
|
||||
|
||||
getInputElementById("input0").value = "cloze";
|
||||
clickTarget(document.querySelector("#finish_cloze_button"));
|
||||
expect(mistakeFn).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
test("calls mistake function on button click when answers are checked and not correct", async () => {
|
||||
const mistakeFn = jest.fn();
|
||||
|
||||
@ -121,6 +166,23 @@ describe("cloze", () => {
|
||||
expect(mistakeFn).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
test("calls mistake function on button click when answers are checked for completion and are not complete", async () => {
|
||||
const mistakeFn = jest.fn();
|
||||
|
||||
await startTimeline([
|
||||
{
|
||||
type: cloze,
|
||||
text: "This is a %cloze% text.",
|
||||
check_answers: true,
|
||||
mistake_fn: mistakeFn,
|
||||
},
|
||||
]);
|
||||
|
||||
getInputElementById("input0").value = "";
|
||||
clickTarget(document.querySelector("#finish_cloze_button"));
|
||||
expect(mistakeFn).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
test("response data is stored as an array", async () => {
|
||||
const { getData, getHTML } = await startTimeline([
|
||||
{
|
||||
|
||||
@ -21,11 +21,17 @@ const info = <const>{
|
||||
pretty_name: "Check answers",
|
||||
default: false,
|
||||
},
|
||||
/** Function called if check_answers is set to TRUE and there is a difference between the participants answers and the correct solution provided in the text. */
|
||||
/** Boolean value indicating if the participant may leave answers blank. */
|
||||
allow_blanks: {
|
||||
type: ParameterType.BOOL,
|
||||
pretty_name: "Allow blanks",
|
||||
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. */
|
||||
mistake_fn: {
|
||||
type: ParameterType.FUNCTION,
|
||||
pretty_name: "Mistake function",
|
||||
default: () => {},
|
||||
default: () => { },
|
||||
},
|
||||
},
|
||||
};
|
||||
@ -43,10 +49,11 @@ type Info = typeof info;
|
||||
class ClozePlugin implements JsPsychPlugin<Info> {
|
||||
static info = info;
|
||||
|
||||
constructor(private jsPsych: JsPsych) {}
|
||||
constructor(private jsPsych: JsPsych) { }
|
||||
|
||||
trial(display_element: HTMLElement, trial: TrialType<Info>) {
|
||||
var html = '<div class="cloze">';
|
||||
// odd elements are text, even elements are the blanks
|
||||
var elements = trial.text.split("%");
|
||||
const solutions = this.getSolutions(trial.text);
|
||||
|
||||
@ -59,13 +66,15 @@ class ClozePlugin implements JsPsychPlugin<Info> {
|
||||
solution_counter++;
|
||||
}
|
||||
}
|
||||
|
||||
html += "</div>";
|
||||
|
||||
display_element.innerHTML = html;
|
||||
|
||||
const check = () => {
|
||||
var answers = [];
|
||||
var answers: String[] = [];
|
||||
var answers_correct = true;
|
||||
var answers_filled = true;
|
||||
|
||||
for (var i = 0; i < solutions.length; i++) {
|
||||
var field = document.getElementById("input" + i) as HTMLInputElement;
|
||||
@ -79,17 +88,22 @@ class ClozePlugin implements JsPsychPlugin<Info> {
|
||||
field.style.color = "black";
|
||||
}
|
||||
}
|
||||
if (!trial.allow_blanks) {
|
||||
if (answers[i] === "") {
|
||||
answers_filled = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (!trial.check_answers || (trial.check_answers && answers_correct)) {
|
||||
if ((trial.check_answers && !answers_correct) || (!trial.allow_blanks && !answers_filled)) {
|
||||
trial.mistake_fn();
|
||||
} else {
|
||||
var trial_data = {
|
||||
response: answers,
|
||||
};
|
||||
|
||||
display_element.innerHTML = "";
|
||||
this.jsPsych.finishTrial(trial_data);
|
||||
} else {
|
||||
trial.mistake_fn();
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user