core -> jsPsych7 + modernish js

Author: zhengkyl

apps/dev/package.json

@@ -19,6 +19,7 @@
     "@jspsych/plugin-fullscreen": "^1.1.2",
     "@pcllab/plugin-audio-response": "workspace:*",
     "@pcllab/plugin-free-recall": "workspace:*",
+    "@pcllab/plugin-core": "workspace:*",
     "jspsych": "^7.3.2"
   }
 }

apps/dev/src/experiment.ts

@@ -2,27 +2,44 @@ import "jspsych/css/jspsych.css";
 import "./style.css";
 
 import { initJsPsych } from "jspsych";
-import audioResponse from "@pcllab/plugin-audio-response";
-import freeRecall from "@pcllab/plugin-free-recall";
+import pcllabAudioResponse from "@pcllab/plugin-audio-response";
+import pcllabFreeRecall from "@pcllab/plugin-free-recall";
+import pcllabCore from "@pcllab/plugin-core";
 
-const jsPsych = initJsPsych({ on_finish: () => {
-  jsPsych.data.get()
-} });
+const jsPsych = initJsPsych({
+  on_finish: () => {
+    jsPsych.data.displayData();
+  },
+});
 
-const start = {
-  type: freeRecall,
+const studyTask = {
+  type: pcllabCore,
+  stimuli: [
+    {
+      //show the current iteration's cue and target
+      text: `<div style="text-align: center; font-weight: 400; font-size: 24px">cue -- target</div>`,
+    },
+  ],
+  response_count: 0,
+  isi_time: 500,
+  cue_count: 0,
+  maximum_time: 1000 * 5,
 };
 
-const trial = {
-  type: audioResponse,
-  prompt: "<div>this is the prompt</div>",
-  stimulus: "./audio.m4a",
-  button: {
-    choices: ["one", "two"],
-  },
-  keyboard: {},
-  response_allowed_while_playing: false,
-  show_repeat_button: true,
-};
+// const start = {
+//   type: pcllabFreeRecall,
+// };
+
+// const trial = {
+//   type: pcllabAudioResponse,
+//   prompt: "<div>this is the prompt</div>",
+//   stimulus: "./audio.m4a",
+//   button: {
+//     choices: ["one", "two"],
+//   },
+//   keyboard: {},
+//   response_allowed_while_playing: false,
+//   show_repeat_button: true,
+// };
 
-jsPsych.run([start, trial]);
+jsPsych.run([studyTask]);

package.json

@@ -23,5 +23,11 @@
   "engines": {
     "node": ">=14.0.0"
   },
-  "packageManager": "[email protected]"
+  "packageManager": "[email protected]",
+  "pnpm": {
+    "patchedDependencies": {
+      "[email protected]": "patches/[email protected]",
+      "[email protected]": "patches/[email protected]"
+    }
+  }
 }

packages/plugin-core/README.md

@@ -1,4 +1,4 @@
-# Core
+# plugin-core
 
 This plugin handles most of the core procedures of an experiment. The tasks that tasks that it can do include (but are not limited to) showing instructions, short-answer tasks, cued-recall tasks, ratings tasks, etc.
 
@@ -133,7 +133,7 @@ function list_data(data) {
 jsPsych.init({
     ...
     timeline: [{
-        type: 'pcllab-core',
+        type: pcllabCore,
         ...
         done_callback: list_data
     }]
@@ -155,7 +155,7 @@ The callback `feedback_html` provides a way to show feedback after a screen give
 
 ```javascript
     const trial = {
-        type: 'pcllab-core',
+        type: pcllabCore,
         stimuli: [
             {
                 cue: 'Should pineapples be on pizza',
@@ -238,7 +238,7 @@ In this example, need to note how this.instructions is set up (it's calling in i
 
 ```javascript
 const lookUp = {
-  type: "pcllab-core",
+  type: pcllabCore,
   stimuli: [this.instructions["look-up"]],
   response_count: 0,
   show_button: true,
@@ -261,7 +261,7 @@ Also explain how to show individual stimuli
 
 ```javascript
 const studyItemsTrial = {
-  type: "pcllab-core",
+  type: pcllabCore,
   stimuli: [
     { response_type: "study_items", cue: "Kirvis", target: "Axe" },
     { response_type: "study_items", cue: "Marco", target: "Polo" },
@@ -278,7 +278,7 @@ Explain how cued recall is done. Word as cue, or a question as cue. Box size dif
 
 ```javascript
 const cuedRecallTrial = {
-  type: "pcllab-core",
+  type: pcllabCore,
   stimuli: [
     { response_type: "study_items", cue: "A", target: "Apple" },
     {

packages/plugin-core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pcllab/plugin-core",
-  "version": "0.1.0",
+  "version": "0.0.1",
   "type": "module",
   "types": "dist/index.d.ts",
   "main": "dist/index.js",
@@ -29,14 +29,20 @@
   },
   "homepage": "https://github.com/PCLLAB/plugins/tree/main/packages/plugin-core#readme",
   "devDependencies": {
+    "@types/jquery": "^3.5.16",
     "config": "workspace:*",
     "tsconfig": "workspace:*",
     "tsup": "^7.1.0"
   },
   "dependencies": {
-    "jspsych": "^7.3.3"
+    "custom-event": "^1.0.1",
+    "dragula": "^3.7.3",
+    "jquery": "^3.7.0",
+    "jspsych": "^7.3.3",
+    "string-similarity-js": "^2.1.4",
+    "uuid": "^9.0.0"
   },
   "publishConfig": {
     "access": "public"
   }
-}
+}

packages/plugin-core/src/buttons.js

@@ -1,5 +1,6 @@
-const getButtonColorClass = require("./constants").getButtonColorClass;
-class NextButton {
+import $ from "jquery";
+import { getButtonColorClass } from "./constants";
+export class NextButton {
   constructor(text) {
     const buttonText = text || "Next";
 
@@ -10,9 +11,7 @@ class NextButton {
   }
 }
 
-module.exports.NextButton = NextButton;
-
-class IDKButton {
+export class IDKButton {
   constructor(dataInstance) {
     this._data = dataInstance;
 
@@ -40,9 +39,7 @@ class IDKButton {
   }
 }
 
-module.exports.IDKButton = IDKButton;
-
-class RepeatButton {
+export class RepeatButton {
   constructor(dataInstance) {
     this._data = dataInstance;
 
@@ -63,5 +60,3 @@ class RepeatButton {
     };
   }
 }
-
-module.exports.RepeatButton = RepeatButton;

packages/plugin-core/src/constants.js

@@ -1,28 +1,28 @@
-module.exports.RESPONSE_ALIGNMENT = {
+export const RESPONSE_ALIGNMENT = {
   left: "left",
   center: "center",
   right: "right",
 };
 
-module.exports.CUE_ALIGNMENT = {
+export const CUE_ALIGNMENT = {
   horizontal: "horizontal",
   vertical: "vertical",
 };
 
-module.exports.SCORING_STRATEGY = {
+export const SCORING_STRATEGY = {
   dice: "dice",
   exact: "exact",
   ultron: "ultron",
 };
 
-module.exports.INPUT_SIZE = {
+export const INPUT_SIZE = {
   small: "small",
   medium: "medium",
   large: "large",
   xlarge: "xlarge",
 };
 
-module.exports.RESPONSE_TYPE = {
+export const RESPONSE_TYPE = {
   input: "input",
   horizontal_input: "horizontal_input",
   study_items: "study_items",
@@ -35,10 +35,10 @@ module.exports.RESPONSE_TYPE = {
 
 let buttonColorClass = "btn-primary";
 
-module.exports.getButtonColorClass = () => {
+export const getButtonColorClass = () => {
   return buttonColorClass;
 };
 
-module.exports.setButtonColorClass = (newButtonClass) => {
+export const setButtonColorClass = (newButtonClass) => {
   buttonColorClass = newButtonClass;
 };