✨ score above ID feedback (resolve #5)

index.html

@@ -50,6 +50,9 @@
 function trials(timeline){
   jsPsych.init({timeline: timeline,
 		display_element: jsp,
+      preload_images: ['static/images/box_closed_sm.gif',
+         'static/images/box_open_sm.gif',
+         Object.values(FRTS).map(f=>f.img)].flat(),
 		on_finish: function() {
 		    trials(timeline)}});
 }
@@ -62,7 +65,25 @@
 }
 
 
-function init(){ trials(fullTL); }
+function fdbktl(score) {
+   const p = {
+      type: 'html-keyboard-response',
+      stimulus: 'temp',
+      trial_duration: 0.01,
+      choices: jsPsych.ANY_KEY,
+      on_finish: function(data) {
+         data.score=score;
+         data.outcome='apple' },
+   };
+  var f=mkIDFbk();
+  f.trial_duration = 99999;
+  trials([p, f]);
+}
+
+function init(){
+   fdbktl(1);
+   //trials(fullTL);
+}
     </script>
 
   </head>
@@ -79,6 +100,10 @@
       <a href="#" onclick="trials(SOATL)"> SOA</a> |
       <a href="#" onclick="trials(DDTL)"> DD</a> |
     </div>
+    <div>ID feedback:
+      <a href="#" onclick="fdbktl(0)">0</a> |
+      <a href="#" onclick="fdbktl(1)">1</a> |
+    </div>
     <div> instructions:
       <a href="#" onclick="showInstructions('ID')"> ID</a> |
       <a href="#" onclick="showInstructions('OD')"> OD</a> |

static/css/task.css

@@ -10,3 +10,12 @@
     margin-left: -100px;
     margin-top: -50px;
 }
+.feedback {text-align: center;} /* unnecessary */
+.feedback>.score {
+   border: solid 2px black; background: yellow;
+   position:absolute;
+   text-align:center;
+   width:70px;
+   margin-left:55px;
+   margin-top:-10px;
+}

static/js/utils.js

@@ -157,7 +157,7 @@ var Fruit = /** @class */ (function () {
     Fruit.prototype.feedback = function (score) {
         //console.log('feedback', pushed_keynum, 'is', push_side, 'v', this.direction);
         var img = (score > 0) ? "<img class=\"fruit\" src=" + this.img + ">" : "";
-        return ("<div class='box open'>" + img + "</div>");
+        return ("<div class='feedback'>\n                <div class='score'>" + score + "</div><div class='box open'>" + img + "</div></div>");
     };
     /** slips of action score. works for Discrimination Devalue (baseline test) too
       * @param pushed_keynum  keycode pushed by participant

static/js/utils.ts

@@ -173,7 +173,8 @@ class Fruit {
     feedback(score: number): string {
         //console.log('feedback', pushed_keynum, 'is', push_side, 'v', this.direction);
         const img = (score > 0) ? `<img class="fruit" src=${this.img}>` : ""
-        return (`<div class='box open'>${img}</div>`)
+        return (`<div class='feedback'>
+                <div class='score'>${score}</div><div class='box open'>${img}</div></div>`)
     }
 
     /** slips of action score. works for Discrimination Devalue (baseline test) too

templates/exp.html

@@ -65,6 +65,9 @@
          /* start the experiment */
          jsPsych.init({      
             timeline: timeline,
+            preload_images: ['static/images/box_closed_sm.gif',
+               'static/images/box_open_sm.gif',
+               Object.values(FRTS).map(f=>f.img)].flat(),
             on_finish: function() {
                psiturk.saveData({
                   success: function() { psiturk.completeHIT(); }