✨ DD-SOA block order is random (fix #12) start on survey #7

index.html

@@ -103,6 +103,7 @@
       <a href="#" onclick="trials(ODTL)"> OD</a> |
       <a href="#" onclick="trials(SOATL)"> SOA</a> |
       <a href="#" onclick="trials(DDTL)"> DD</a> |
+      <a href="#" onclick="trials([mkFrtSurvey(boxes[0].S),mkConfSlider()])"> survey</a> |
       <a href="#" onclick="trials([debrief_trial])"> done</a> 
     </div>
     <div>ID feedback:
@@ -113,7 +114,8 @@
       <a href="#" onclick="showInstructions('ID_wf')"> ID</a> |
       <a href="#" onclick="showInstructions('OD_wf')"> OD</a> |
       <a href="#" onclick="showInstructions('SOA_wf')"> SOA</a> |
-      <a href="#" onclick="showInstructions('DD_wf')"> DD</a> 
+      <a href="#" onclick="showInstructions('DD_wf')"> DD</a> |
+      <a href="#" onclick="showInstructions('survey')"> suvery</a> 
       (orig:
       <a href="#" onclick="showInstructions('ID')"> ID</a> |
       <a href="#" onclick="showInstructions('OD')"> OD</a> |

static/js/instructions.js

@@ -92,6 +92,17 @@ const INSTRUCTIONS_DATA = {
       "</ul>When you're ready, click next.",
     //"Just like before, the faster you correctly open undamaged boxes, the more points you get"
  ],
+ "survey": [
+    "You are almost done!<br>"+
+      "We just have a few questions we want to ask you about the game.<br>"+
+      "We want to know how well you feel like you learned about the tricky boxes.",
+    "In this section, we'll ask you about <ol style='text-align:left'>"+
+      "<li>the way to open the box labeled with or containing each fruit</li>"+
+      "<li>and how confident you are about it.</li></ol>",
+    "To answer left or right, push the arrow keys as you have been. <br>" +
+      "To rank your confidence, move the slider to approprate spot and click continue.<br><br>"+
+      "When you're ready to start, press next.",
+ ],
  "ID": [
    "In this game, you will get the chance to earn points by collecting fruit from inside a box on the screen by opening the box by pressing either the right '←' or left '→' key. If you press the correct key, the box will open to reveal fruit inside and points will be added to you total score. However, if you press the incorrect key, the box will be empty and no points will be added to your total.<br> Your task is to learn which is the correct key to press. Sometimes it will be the left-hand one and sometimes it will be the right-hand one. The fruit picture on the front of the door should give you a clue about which is the correct response.",
 	"The quicker you make the correct response the more points will be added to your total (ranging from 1 to 5 points). Your accumulated points will appear at the top of the screen.",

static/js/task.js

@@ -12,6 +12,9 @@ var FRTS = fruits(); // boxes side effects will change values inside here
 const soa_boxes = soa_assign(9, 6, 3, 2);
 const boxes = allBoxes(FRTS, soa_boxes);
 
+const FrtsStim = boxes.map(x=>x.S);
+const FrtsOutcome = boxes.map(x=>x.O);
+
 /* 1. Instructed Discrimination. (6 boxes * 2 reps)*8 blocks */
 const allID = mkIDblocks(boxes);
 
@@ -21,9 +24,9 @@ const allOD = mkODblock(FRTS, 4); // 4 repeats of 3Lx3R = 36 trials
 /* 3. SOA - slips of action
       9 blocks w/ 12 trials each (2 outcomes per bloc), 108 trials total. (N.B. `6C2 == 15`)
 */
-const allSOA = mkSOAblocks(FRTS, boxes, SO.Outcome,  9, 2);
+var allSOA = mkSOAblocks(FRTS, boxes, SO.Outcome,  9, 2);
 /* 4. DD - devalued discrimination */
-const allDD  = mkSOAblocks(FRTS, boxes, SO.Stim,     9, 2);
+var allDD  = mkSOAblocks(FRTS, boxes, SO.Stim,     9, 2);
 
 /* Instructions */
 // 20200525 - defined in instructions.js
@@ -39,17 +42,22 @@ var instructions = [mkInstruction(INSTRUCTIONS_DATA["DD_wf"])];
 */
 
 
-var get_info = {
-  type: 'survey-text',
-  questions: [
-    {prompt: "Your Name?", name: "name"}, 
-    {prompt: "Your Age?",  name:"age"}
-  ],
-  on_finish: function(data){
-      // add task version
-     data.responses= add_version(data.responses)
+/*
+  we will do SOA and DD in random order
+*/
+const SOADDinst = {
+  SOA: mkInstruction(INSTRUCTIONS_DATA["SOA_wf"]),
+  DD: mkInstruction(INSTRUCTIONS_DATA["DD_wf"]) }
+var SOADDtl = {SOA: allSOA, DD:  allDD}
+const blockorder = jsPsych.randomization.shuffle(['SOA','DD'])
+// update block name
+for(let i=0; i<blockorder.length; i++) {
+  let bname = blockorder[i];
+  for(let j=0; j< SOADDtl[bname].length; j++) {
+    if(SOADDtl[bname][j].block) SOADDtl[bname][j].block= i+3 + "." + SOADDtl[bname][j].block;
   }
-};
+}
+
 
 var debrief_trial={
     type: 'html-keyboard-response',
@@ -62,3 +70,33 @@ var debrief_trial={
 
     }
 }
+
+
+var TIMELINE = [
+  // 1. ID
+  mkInstruction(INSTRUCTIONS_DATA["ID_wf"]),
+  allID,
+  // 2. OD
+  mkInstruction(INSTRUCTIONS_DATA["OD_wf"]),
+  allOD,
+  // 3. SOA or DD
+  SOADDinst[blockorder[0]],
+  SOADDtl[blockorder[0]],
+  // 4. DD or SOA
+  SOADDinst[blockorder[1]],
+  SOADDtl[blockorder[1]],
+  // 5. survey
+  debrief_trial].flat()
+
+
+var get_info = {
+  type: 'survey-text',
+  questions: [
+    {prompt: "Your Name?", name: "name"}, 
+    {prompt: "Your Age?",  name:"age"}
+  ],
+  on_finish: function(data){
+      // add task version
+     data.responses= add_version(data.responses)
+  }
+};

static/js/utils.js

@@ -86,6 +86,7 @@ var Dir;
     Dir["Left"] = "Left";
     Dir["Right"] = "Right";
 })(Dir || (Dir = {}));
+var NUMKEYS = [49, 50, 51, 52, 53, 54]; // keycodes for 1-6
 // Keys to direction
 var KEYS = {
     // https://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes
@@ -164,8 +165,8 @@ var Fruit = /** @class */ (function () {
     };
     /** slips of action score. works for Discrimination Devalue (baseline test) too
       * @param pushed_keynum  keycode pushed by participant
-      * @param soa_block      current slips of action block. check against Fruit.devalued_blocks
       * @param rt             unused. could amplify points if fast
+      * @param soa_block      current slips of action block. check against Fruit.devalued_blocks. -1 to always value
       * @return score (0 or 1). consider higher for rt
     */
     Fruit.prototype.score = function (pushed_keynum, rt, soa_block) {
@@ -239,11 +240,11 @@ function mkBoxTrial(b, soa_block, block) {
         choices: accept_keys,
         post_trial_gap: ITI,
         trial_duration: dur,
+        block: block,
         prompt: "<p>left or right</p>",
         on_finish: function (data) {
             data.stim = b.S.name;
             data.outcome = b.O.name;
-            data.block = block;
             data.isdevalued = b.S.isdevalued(soa_block);
             data.chose = key_to_side(data.key_press);
             data.score = b.S.score(data.key_press, data.rt, soa_block);
@@ -471,25 +472,95 @@ function mkSOAblocks(frts, boxes, so, nblocks, nreps) {
     }
     return (allbocks);
 }
+/** free form survey responses */
+var surveyTextTrail = {
+    type: 'survey-text',
+    questions: [
+        { name: "side_strategy", prompt: "What stategy or strategies did you use to remember the correct way to open boxes?" },
+        { name: "pair_strategy", prompt: "How did you remember the inside-outside fruit pairs of each box?" },
+        { name: "effort", prompt: "Were you able to concentrate while playing the game? Did you have to take any breaks?" },
+        { name: "misc", prompt: "Do you have any other comments on the game?" },
+    ]
+};
+/** create stim response or outcome response survey
+    simliiar to mkBoxTrial or mkODTrial. but data out columns prefixed with "survey_"
+  * @param frt a fruit
+  * @return left/right html response trial
+*/
+function mkFrtSurvey(frt) {
+    return ({
+        type: 'html-keyboard-response',
+        prompt: "<p>left or right</p>",
+        choices: accept_keys,
+        stimulus: function (trial) {
+            return ("<img src='" + frt.img + "'/><br>");
+        },
+        on_finish: function (data) {
+            data.survey_type = frt.SO == SO.Stim ? "SR" : "OR";
+            data.survey_prompt = frt.name;
+            data.survey_chose = key_to_side(data.key_press);
+            data.correct = frt.score(data.key_press, 0, -1) > 0;
+        }
+    });
+}
+/**
+*/
+function simkey(key) {
+    // for charcode see e.g. "a".charCodeAt(0) 
+    // from jsPsych/tests/testing-utils.js:
+    var dispel = document.querySelector('.jspsych-display-element');
+    dispel.dispatchEvent(new KeyboardEvent('keydown', { keyCode: key }));
+    dispel.dispatchEvent(new KeyboardEvent('keyup', { keyCode: key }));
+    // record that it was simulated push instead of key 
+    jsPsych.data.get().addToLast({ touched: true });
+    if (DEBUG)
+        console.log('sent', key, 'updated', jsPsych.data.get().last().values());
+}
+function numberFrts(Frts) {
+    return (Frts.map(function (f, i) {
+        return "<div style='height:180px; width: 180px; background:url('" + f.img + "' no-repeat); dispaly: inline-block;' onclick='simkey(" + i + ")'>" + (i + 1) + "</div>";
+    }).
+        join("\n"));
+}
+function mkPairSurvey(frt, OutcomeFruits) {
+    return ({
+        type: 'html-keyboard-response',
+        choices: NUMKEYS,
+        //prompt: "<p>Which fruit is this fruits pair</p>",
+        stimulus: function (trial) {
+            return ("This fruit <img src='" + frt.img + "'/> is paired with:<br>" + numberFrts(OutcomeFruits));
+        },
+        on_finish: function (data) {
+            var chosefrt = OutcomeFruits[NUMKEYS.indexOf(data.key_press)];
+            data.survey_type = "SO";
+            data.survey_prompt = frt.name;
+            data.survey_chose = chosefrt.name;
+            data.correct = frt.pair.name == chosefrt.name;
+            if (DEBUG)
+                console.log(data.survey_prompt + " has pair " + frt.pair.name + ". chose " + data.suvery_chose + ". correct? " + data.correct);
+        }
+    });
+}
 /** make confidence slider trial
    prev trials should have data with
     - conf_prompt
     - conf_show
     - survey_type
    @return trial
 */
-function mkSurvey(frt) {
-    return ({ type: '' });
-}
 function mkConfSlider() {
     return ({
         type: 'html-slider-response',
         stimulus: function (trial) {
             var prev = jsPsych.data.get().last().values()[0];
-            return (prev.conf_prompt + prev.conf_show);
+            var resp = "<br>opens from the " + prev.survey_chose;
+            if (prev.survey_type == 'SO') {
+                resp = " is paired with <img src='static/images/" + prev.survey_chose + ".png' />";
+            }
+            return ("How confident are you that <br><br>" + prev.stimulus + resp + "<br><br>");
         },
         labels: ['Not at all', 'Extremely'],
-        prompt: "<p>How confident are you about your answer</p>",
+        //prompt: "<p>How confident are you about your answer</p>",
         on_finish: function (data) {
             var prev = jsPsych.data.get().last().values()[0];
             // recapitulate previous here for easy data parsing (just need this row)