From 699a66e39a527969eefecc3f6819797f95a5e8bb Mon Sep 17 00:00:00 2001
From: Will Foran <willforan@gmail.com>
Date: Mon, 25 May 2020 15:46:38 -0400
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20score=20above=20ID=20feedback=20(re?=
 =?UTF-8?q?solve=20#5)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html          | 27 ++++++++++++++++++++++++++-
 static/css/task.css |  9 +++++++++
 static/js/utils.js  |  2 +-
 static/js/utils.ts  |  3 ++-
 templates/exp.html  |  3 +++
 5 files changed, 41 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index 5df27d3..916651c 100644
--- a/index.html
+++ b/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> |
diff --git a/static/css/task.css b/static/css/task.css
index 8f45911..967ff72 100644
--- a/static/css/task.css
+++ b/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;
+}
diff --git a/static/js/utils.js b/static/js/utils.js
index 3fbaf31..6e0f552 100644
--- a/static/js/utils.js
+++ b/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
diff --git a/static/js/utils.ts b/static/js/utils.ts
index 7926083..ab8308e 100644
--- a/static/js/utils.ts
+++ b/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
diff --git a/templates/exp.html b/templates/exp.html
index 4f48631..878aea2 100644
--- a/templates/exp.html
+++ b/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(); }