HoshinoKoji/jsPsych
1
0
Fork 0
mirror of https://github.com/jspsych/jsPsych.git synced 2025-05-10 19:20:55 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

create template for sketchpad plugin

Browse Source
This commit is contained in:
Josh de Leeuw 2021-10-21 15:46:36 -04:00
parent cf78fb9d5d
commit 910d49cbb4
8 changed files with 228 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
examples/jspsych-sketchpad.html Normal file
View File

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<script src="../packages/jspsych/dist/index.browser.js"></script>
<script src="../packages/plugin-sketchpad/dist/index.browser.js"></script>
<link rel="stylesheet" href="../packages/jspsych/css/jspsych.css">
</head>
<body></body>
<script>
var jsPsych = initJsPsych();
var sketchpad_trial = {
type: jsPsychSketchpad,
canvas_border_width: 2,
canvas_shape: 'circle'
}
jsPsych.run([sketchpad_trial]);
</script>
</html>

22
package-lock.json generated
View File

@ -2562,6 +2562,10 @@
"resolved": "packages/plugin-serial-reaction-time-mouse", "resolved": "packages/plugin-serial-reaction-time-mouse",
"link": true "link": true
}, },
"node_modules/@jspsych/plugin-sketchpad": {
"resolved": "packages/plugin-sketchpad",
"link": true
},
"node_modules/@jspsych/plugin-survey-html-form": { "node_modules/@jspsych/plugin-survey-html-form": {
"resolved": "packages/plugin-survey-html-form", "resolved": "packages/plugin-survey-html-form",
"link": true "link": true
@ -14949,6 +14953,17 @@
"jspsych": ">=7.0.0" "jspsych": ">=7.0.0"
} }
}, },
"packages/plugin-sketchpad": {
"version": "0.1.0",
"license": "MIT",
"devDependencies": {
"@jspsych/config": "^1.0.0",
"@jspsych/test-utils": "^1.0.0"
},
"peerDependencies": {
"jspsych": ">=7.0.0"
}
},
"packages/plugin-survey-html-form": { "packages/plugin-survey-html-form": {
"name": "@jspsych/plugin-survey-html-form", "name": "@jspsych/plugin-survey-html-form",
"version": "1.0.0", "version": "1.0.0",
@ -17140,6 +17155,13 @@
"@jspsych/test-utils": "^1.0.0" "@jspsych/test-utils": "^1.0.0"
} }
}, },
"@jspsych/plugin-sketchpad": {
"version": "file:packages/plugin-sketchpad",
"requires": {
"@jspsych/config": "^1.0.0",
"@jspsych/test-utils": "^1.0.0"
}
},
"@jspsych/plugin-survey-html-form": { "@jspsych/plugin-survey-html-form": {
"version": "file:packages/plugin-survey-html-form", "version": "file:packages/plugin-survey-html-form",
"requires": { "requires": {

1
packages/plugin-sketchpad/jest.config.cjs Normal file
View File

@ -0,0 +1 @@
module.exports = require("@jspsych/config/jest").makePackageConfig(__dirname);

43
packages/plugin-sketchpad/package.json Normal file
View File

@ -0,0 +1,43 @@
{
"name": "@jspsych/plugin-sketchpad",
"version": "0.1.0",
"description": "jsPsych plugin for sketching a response",
"type": "module",
"main": "dist/index.cjs",
"exports": {
"import": "./dist/index.js",
"require": "./dist/index.cjs"
},
"typings": "dist/index.d.ts",
"unpkg": "dist/index.browser.min.js",
"files": [
"src",
"dist"
],
"source": "src/index.ts",
"scripts": {
"test": "jest --passWithNoTests",
"test:watch": "npm test -- --watch",
"tsc": "tsc",
"build": "rollup --config",
"build:watch": "npm run build -- --watch"
},
"repository": {
"type": "git",
"url": "git+https://github.com/jspsych/jsPsych.git",
"directory": "packages/plugin-sketchpad"
},
"author": "Josh de Leeuw",
"license": "MIT",
"bugs": {
"url": "https://github.com/jspsych/jsPsych/issues"
},
"homepage": "https://www.jspsych.org/latest/plugins/sketchpad",
"peerDependencies": {
"jspsych": ">=7.0.0"
},
"devDependencies": {
"@jspsych/config": "^1.0.0",
"@jspsych/test-utils": "^1.0.0"
}
}

3
packages/plugin-sketchpad/rollup.config.mjs Normal file
View File

@ -0,0 +1,3 @@
import { makeRollupConfig } from "@jspsych/config/rollup";
export default makeRollupConfig("jsPsychSketchpad");

26
packages/plugin-sketchpad/src/index.spec.ts Normal file
View File

@ -0,0 +1,26 @@
import { clickTarget, pressKey, startTimeline } from "@jspsych/test-utils";
import sketchpad from ".";
jest.useFakeTimers();
describe("sketchpad", () => {
test("displays canvas with different dimensions", async () => {
const { displayElement, getHTML, expectFinished } = await startTimeline([
{
type: sketchpad,
canvas_width: 800,
canvas_height: 300,
},
]);
console.log(getHTML());
const canvas_rect = displayElement.querySelector("canvas");
expect(canvas_rect.getAttribute("width")).toBe("800");
expect(canvas_rect.getAttribute("height")).toBe("300");
clickTarget(displayElement.querySelector("#sketchpad-end"));
await expectFinished();
});
});

104
packages/plugin-sketchpad/src/index.ts Normal file
View File

@ -0,0 +1,104 @@
import { JsPsych, JsPsychPlugin, ParameterType, TrialType } from "jspsych";
const info = <const>{
name: "sketchpad",
parameters: {
/**
* The shape of the canvas element. Accepts `'rectangle'` or `'circle'`
*/
canvas_shape: {
type: ParameterType.STRING,
default: "rectangle",
},
/**
* Width of the canvas in pixels.
*/
canvas_width: {
type: ParameterType.INT,
default: 500,
},
/**
* Width of the canvas in pixels.
*/
canvas_height: {
type: ParameterType.INT,
default: 500,
},
/**
* Diametere of the canvas (when `canvas_shape` is `'circle'`) in pixels.
*/
canvas_diameter: {
type: ParameterType.INT,
default: 500,
},
/**
* Diametere of the canvas (when `canvas_shape` is `'circle'`) in pixels.
*/
canvas_border_width: {
type: ParameterType.INT,
default: 0,
},
/**
* Diametere of the canvas (when `canvas_shape` is `'circle'`) in pixels.
*/
canvas_border_color: {
type: ParameterType.STRING,
default: "#000",
},
},
};
type Info = typeof info;
/**
* **sketchpad**
*
* jsPsych plugin for displaying a canvas stimulus and getting a slider response
*
* @author Josh de Leeuw
* @see {@link https://www.jspsych.org/latest/plugins/sketchpad/ sketchpad plugin documentation on jspsych.org}
*/
class SketchpadPlugin implements JsPsychPlugin<Info> {
static info = info;
constructor(private jsPsych: JsPsych) {}
trial(display_element: HTMLElement, trial: TrialType<Info>) {
let canvas_html;
if (trial.canvas_shape == "rectangle") {
canvas_html = `
<canvas id="sketchpad-canvas" width="${trial.canvas_width}" height="${trial.canvas_height}" style="border: ${trial.canvas_border_width}px solid ${trial.canvas_border_color};"></canvas>
`;
} else if (trial.canvas_shape == "circle") {
canvas_html = `
<canvas id="sketchpad-canvas" width="${trial.canvas_diameter}" height="${
trial.canvas_diameter
}" style="border: ${trial.canvas_border_width}px solid ${
trial.canvas_border_color
}; border-radius:${trial.canvas_diameter / 2}px;"></canvas>
`;
} else {
throw new Error(
'`canvas_shape` parameter in sketchpad plugin must be either "rectangle" or "circle"'
);
}
const finish_button_html = `<p><button class="jspsych-btn" id="sketchpad-end">Finished</button></p>`;
const display_html = canvas_html + finish_button_html;
display_element.innerHTML = display_html;
display_element.querySelector("#sketchpad-end").addEventListener("click", () => {
end_trial();
});
const end_trial = () => {
display_element.innerHTML = "";
this.jsPsych.finishTrial({});
};
}
}
export default SketchpadPlugin;

7
packages/plugin-sketchpad/tsconfig.json Normal file
View File

@ -0,0 +1,7 @@
{
"extends": "@jspsych/config/tsconfig.core.json",
"compilerOptions": {
"baseUrl": "."
},
"include": ["src"]
}