Tested styling to be workign

vzhang03 · Oct 18, 2024 · 4c57593 · 4c57593
1 parent e1c16fc
commit 4c57593
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 2 deletions.
diff --git a/packages/plugin-spr/examples/mode2.html b/packages/plugin-spr/examples/mode2.html
@@ -7,6 +7,7 @@
   <script src="https://unpkg.com/@jspsych/plugin-spr"></script>
   <script src="../dist/index.browser.js"></script>
   <link rel="stylesheet" href="https://unpkg.com/jspsych/css/jspsych.css">
+  <link rel="stylesheet" href="styles.css">
 </head>
 
 <body></body>

diff --git a/packages/plugin-spr/examples/styles.css b/packages/plugin-spr/examples/styles.css
@@ -0,0 +1,11 @@
+.text-before-current-region {
+  background-color: blue;
+}
+
+.text-current-region {
+  background-color: red;
+}
+
+.text-after-current-region {
+  background-color: green;
+}
diff --git a/packages/plugin-spr/src/index.ts b/packages/plugin-spr/src/index.ts
@@ -197,12 +197,19 @@ class SprPlugin implements JsPsychPlugin<Info> {
         this.current_display_string = new_display_string;
       } else {
         if (this.mode === 1 && this.inner_index > 0) {
-          // sets previous to blank if exists -> might want to do same with other one except just change css classifier
           this.current_display_string[this.inner_index - 1] =
             "<span class='text-after-current-region'>" +
             this.generateBlank(this.structured_reading_string[this.index][this.inner_index - 1]) +
             "</span>";
+        } else if (this.mode === 2 && this.inner_index > 0) {
+          console.log("enters modifier", this.current_display_string);
+          // changes classifier
+          this.current_display_string[this.inner_index - 1] =
+            "<span class='text-after-current-region'>" +
+            this.structured_reading_string[this.index][this.inner_index - 1] +
+            "</span>";
         }
+
         // shows next display
         this.current_display_string[this.inner_index] =
           "<span class='text-current-region'>" +
@@ -249,7 +256,6 @@ class SprPlugin implements JsPsychPlugin<Info> {
   }
 
   private generateBlank(text: string | string[]): string {
-    // todo: make sure to split on individual words
     const length = text.length;
     var res = "";