) {
+ // setup styles and trial parameters
+ var css = this.initializeVariables(trial);
+
+ // setup html logic
+ var html = `${this.generateDisplayString()}
`;
+ display_element.innerHTML = css + html;
+
+ // start timer
+ this.startTime = performance.now();
+ }
+
+ private endTrial() {
+ var trial_data = {
+ stimulus: this.readingString,
+ mode: this.mode,
+ results: this.results,
+ };
+ // end trial
+ this.jsPsych.pluginAPI.cancelAllKeyboardResponses();
+ this.jsPsych.finishTrial(trial_data);
+ }
+
+ /** error checking, generate reading string, and returns CSS for the trial. */
+ private initializeVariables(trial: TrialType): string {
+ if (trial.mode === 1 || trial.mode === 2 || trial.mode === 3) this.mode = trial.mode;
+ else throw new Error("Mode declared incorrectly, must be between 1 and 3.");
+
+ if (this.mode === 3 && trial.gap_character !== " ") {
+ console.warn("gap_character is not used in mode 3, so it will be ignored.");
+ this.gapCharacter = " ";
+ }
+ this.gapCharacter = trial.gap_character;
+ this.intraGapCharacter = trial.intra_segment_character ? this.gapCharacter : " ";
+
+ // split text based on delimiter or space
+ const splitText = trial.sentence.includes(trial.delimiter)
+ ? trial.sentence.split(trial.delimiter)
+ : trial.sentence.split(" ");
+
+ this.readingString = [];
+ var currentSegment: string[] = [];
+
+ for (var i = 0; i < splitText.length; i++) {
+ const word = splitText[i].replaceAll("\n", "
");
+ if (word === "
")
+ throw new Error("plugin-spr: Newline characters must be attached to a word.");
+
+ currentSegment.push(word);
+
+ if (currentSegment.length >= trial.segments_per_key_press) {
+ this.readingString.push(currentSegment.join(" "));
+ currentSegment = [];
+ }
+ }
+
+ if (currentSegment.length > 0) this.readingString.push(currentSegment.join(" "));
+
+ this.isVisible = new Array(this.readingString.length).fill(false);
+ this.index = -1;
+
+ this.jsPsych.pluginAPI.getKeyboardResponse({
+ callback_function: (info) => this.onValidKeyPress(info),
+ valid_responses: trial.choices,
+ rt_method: "performance",
+ persist: true,
+ allow_held_key: false,
+ });
+
+ var css = ``;
+
+ return css;
+ }
+
+ /** given the mode, current index, and mask array, generate html string to be displayed */
+ private generateDisplayString(): string {
+ if (this.mode !== 3) {
+ if (this.index !== -1) {
+ return this.readingString
+ .map((text, i) => {
+ if (i < this.index) {
+ return text
+ .split(" ")
+ .map((word) => "" + word + "")
+ .join(this.intraGapCharacter);
+ } else if (i === this.index) {
+ return text
+ .split(" ")
+ .map((word) => "" + word + "")
+ .join(this.intraGapCharacter);
+ } else {
+ return text
+ .split(" ")
+ .map((word) => "" + word + "")
+ .join(this.intraGapCharacter);
+ }
+ })
+ .join(this.gapCharacter);
+ } else {
+ return this.readingString
+ .map((text) =>
+ text
+ .split(" ")
+ .map((word) => "" + word + "")
+ .join(this.intraGapCharacter)
+ )
+ .join(this.gapCharacter);
+ }
+ } else {
+ if (this.index !== -1) {
+ return (
+ "" + this.readingString[this.index] + ""
+ );
+ } else {
+ return (
+ "" +
+ this.generateBlank(this.readingString[0]) +
+ ""
+ );
+ }
+ }
+ }
+
+ /** updates sentence, mask array, and index before regenerating display string */
+ private onValidKeyPress(info?: any) {
+ if (this.index === -1) this.addDataPoint(this.generateBlank(this.readingString[0]), info.key);
+ else this.addDataPoint(this.readingString[this.index], info.key);
+
+ this.index++;
+ if (this.index >= this.readingString.length) {
+ this.endTrial();
+ } else {
+ if (this.index !== 0) {
+ // keep visible if mode 2
+ this.isVisible[this.index - 1] = this.mode === 2;
+ }
+ this.isVisible[this.index] = true;
+ document.querySelector("#jspsych-spr-content").innerHTML = this.generateDisplayString();
+ }
+ }
+
+ // helper function to generate a blank string of input length for data
+ private generateBlank(text: string): string {
+ const split = text.split(" ");
+ if (split.length > 1) return split.map((word) => "_".repeat(word.length)).join(" ");
+ else return "_".repeat(text.length);
+ }
+
+ private getTimeElapsed() {
+ const prev = this.startTime;
+ const now = performance.now();
+ this.startTime = now;
+ return Math.round(now - prev);
+ }
+
+ private addDataPoint(stimulus: string, key: string) {
+ this.results.push({
+ rt: this.getTimeElapsed(),
+ segment: stimulus,
+ key_pressed: key,
+ });
+ }
+}
+
+export default SprPlugin;
diff --git a/packages/plugin-spr/tsconfig.json b/packages/plugin-spr/tsconfig.json
new file mode 100644
index 00000000..8a845081
--- /dev/null
+++ b/packages/plugin-spr/tsconfig.json
@@ -0,0 +1,8 @@
+{
+ "extends": "@jspsych/config/tsconfig.contrib.json",
+ "compilerOptions": {
+ "baseUrl": ".",
+ "resolveJsonModule": true
+ },
+ "include": ["src"]
+}