fixing batch counting and finished frontend

kmui2 · kmui2 · commit cecfd30ec0b4 · 2018-12-20T21:52:33.000-06:00
diff --git a/.gitignore b/.gitignore
@@ -7,5 +7,5 @@ descriptions/
 .DS_Store
 launch.json
 generate_trials.log
-batchCounts*
+batchesCounts*
 word_to_rate/
diff --git a/dev/dev.js b/dev/dev.js
@@ -12,7 +12,6 @@ $(document).ready(function(){
         // DEFINE workerId, hitId, assignmentId HERE
         //////////////////////////////////////////
         let subjCode = $("#subjCode").val().slice();
-        let numTrials = $("#numTrials").val();
         let reset =  $("#reset").val();
         let workerId = 'null';
         let assignmentId = 'null';
@@ -27,22 +26,11 @@ $(document).ready(function(){
             url: 'http://'+document.domain+':'+PORT+'/trials',
             type: 'POST',
             contentType: 'application/json',
-            data: JSON.stringify({subjCode, numTrials, reset, dev: true }),
+            data: JSON.stringify({subjCode, reset, dev: true }),
             success: function (data) {
                 console.log(data);
-
-                let images = [];
-                let categories = data.trials.categories;
-                let stimuli = data.trials.images;
-
-                for (let category of categories) 
-                    for (let file of stimuli[category]) 
-                        images.push(file);
                 
-                jsPsych.pluginAPI.preloadImages(images, function(){}); 
-                    
-                // $("#loading").remove();
-                runExperiment({categories, images: stimuli, questions: data.trials.questions, debriefing: data.trials.debriefing, categoryNamesMap: data.trials.categoryNamesMap}, subjCode, workerId, assignmentId, hitId, FULLSCREEN, PORT);
+                runExperiment(data.trials, subjCode, workerId, assignmentId, hitId, FULLSCREEN, PORT);
     
             }
         })
diff --git a/dev/experiment.js b/dev/experiment.js
@@ -65,132 +65,127 @@ export function runExperiment(
   };
 
   timeline.push(instructions);
-  let num_trials = trials.categories.reduce(
-    (a, category) => a + trials.images[category].length,
-    0
-  );
-  document.trials = trials;
+  const num_trials = trials.length;
 
   let trial_number = 1;
   let progress_number = 1;
 
-  const { categoryNamesMap } = trials;
   // Pushes each audio trial to timeline
-  trials.categories.forEach(category => {
-    trials.images[category].forEach(image => {
-      let response = {
-        subjCode: subjCode,
-        participantID: participantID,
-        category: category,
-        image: image,
-        expTimer: -1,
-        response: -1,
-        trial_number: trial_number,
-        rt: -1
-      };
-
-      let stimulus = /*html*/ `
-        <h4 style="text-align:center;margin-top:0;">Trial ${trial_number} of ${num_trials}</h4>
-        <h1>How typical is this ${categoryNamesMap[category]}?</div>
-        <div style="width:100%;">
-            <div style="width: 100%;;text-align:center;margin: auto;padding: 0em;">
-                <img src="${image}" alt="${image}" height="200px" align="middle" style="max-width:400px;width=50%;" />
-            </div>
-        </div>
-    `;
-
-      const choices = ["1 (Very typical)", "2", "3", "4", "5 (Very atypical)"];
-
-      let circles = choices.map(choice => {
-        return /*html*/ `
-            <div class="choice">
-                <div class="choice-circle empty-circle"></div>
-                <div class="text">${choice}</div>
-            </div>
-        `;
-      });
+  trials.forEach(trial => {
+    let response = {
+      subjCode: subjCode,
+      word: trial.word,
+      question_prompt_pre: trial.question_prompt_pre,
+      question_prompt_post: trial.question_prompt_post,
+      question_type: trial.question_type,
+      bin: trial.bin,
+      choice1: trial.choice1,
+      choice2: trial.choice2,
+      choice3: trial.choice3,
+      choice4: trial.choice4,
+      choice5: trial.choice5,
+      expTimer: -1,
+      response: -1,
+      trial_number: trial_number,
+      rt: -1
+    };
+
+    let stimulus = /*html*/ `
+      <h4 style="text-align:center;margin-top:0;">Trial ${trial_number} of ${num_trials}</h4>
+      <div style="padding:10%;"><h1>${trial.question_prompt_pre}${trial.word}${trial.question_prompt_post}</h1></div>
+  `;
+
+    const choices = [trial.choice1, trial.choice2, trial.choice3, trial.choice4, trial.choice5];
+
+    let circles = choices.map(choice => {
+      return /*html*/ `
+          <div class="choice">
+              <div class="choice-circle empty-circle"></div>
+              <div class="text">${choice}</div>
+          </div>
+      `;
+    });
 
-      let prompt = /*html*/ `
-            <div class="bar">
-                ${circles.join("")}
-            </div>
-        `;
-
-      // Picture Trial
-      let pictureTrial = {
-        type: "html-keyboard-response",
-        choices: choices.map((choice, index) => {
-          return `${index + 1}`;
-        }),
-
-        stimulus: stimulus,
-
-        prompt: function() {
-          return prompt;
-        },
-
-        on_finish: function(data) {
-          response.response = String.fromCharCode(data.key_press);
-          response.choice = choices[Number(response.response) - 1];
-          response.rt = data.rt;
-          response.expTimer = data.time_elapsed / 1000;
-
-          // POST response data to server
-          $.ajax({
-            url: "http://" + document.domain + ":" + PORT + "/data",
-            type: "POST",
-            contentType: "application/json",
-            data: JSON.stringify(response),
-            success: function() {
-              console.log(response);
-            }
-          });
-        }
-      };
-      timeline.push(pictureTrial);
-
-      // let subject view their choice
-      let breakTrial = {
-        type: "html-keyboard-response",
-        trial_duration: 500,
-        response_ends_trial: false,
-
-        stimulus: stimulus,
-
-        prompt: function() {
-          const circles = choices.map((choice, index) => {
-            if (choice == response.choice) {
-              return /*html*/ `
-                        <div class="choice">
-                          <div class="choice-circle filled-circle"></div>
-                          <div class="text">${choice}</div>
-                        </div>
-                      `;
-            }
+    let prompt = /*html*/ `
+          <div class="bar">
+              ${circles.join("")}
+          </div>
+      `;
+
+    // Picture Trial
+    let pictureTrial = {
+      type: "html-keyboard-response",
+      choices: choices.map((choice, index) => {
+        return `${index + 1}`;
+      }),
+
+      stimulus: stimulus,
+
+      prompt: function() {
+        return prompt;
+      },
+
+      on_finish: function(data) {
+        response.response = String.fromCharCode(data.key_press);
+        response.choice = choices[Number(response.response) - 1];
+        response.rt = data.rt;
+        response.expTimer = data.time_elapsed / 1000;
+
+        // POST response data to server
+        $.ajax({
+          url: "http://" + document.domain + ":" + PORT + "/data",
+          type: "POST",
+          contentType: "application/json",
+          data: JSON.stringify(response),
+          success: function() {
+            console.log(response);
+          }
+        });
+      }
+    };
+    timeline.push(pictureTrial);
+
+    // let subject view their choice
+    let breakTrial = {
+      type: "html-keyboard-response",
+      trial_duration: 500,
+      response_ends_trial: false,
+
+      stimulus: stimulus,
+
+      prompt: function() {
+        const circles = choices.map((choice, index) => {
+          if (choice == response.choice) {
             return /*html*/ `
-                  <div class="choice">
-                    <div class="choice-circle empty-circle"></div>
-                    <div class="text">${choice}</div>
-                  </div>
-                  `;
-          });
-
-          const prompt = /*html*/ `
-                  <div class="bar">
-                      ${circles.join("")}
-                  </div>
-              `;
-          return prompt;
-        },
-
-        on_finish: function() {
-          jsPsych.setProgressBar((progress_number - 1) / num_trials);
-          progress_number++;
-        }
-      };
-      timeline.push(breakTrial);
-      trial_number++;
-    });
+                      <div class="choice">
+                        <div class="choice-circle filled-circle"></div>
+                        <div class="text">${choice}</div>
+                      </div>
+                    `;
+          }
+          return /*html*/ `
+                <div class="choice">
+                  <div class="choice-circle empty-circle"></div>
+                  <div class="text">${choice}</div>
+                </div>
+                `;
+        });
+
+        const prompt = /*html*/ `
+                <div class="bar">
+                    ${circles.join("")}
+                </div>
+            `;
+        return prompt;
+      },
+
+      on_finish: function() {
+        jsPsych.setProgressBar((progress_number - 1) / num_trials);
+        progress_number++;
+      }
+    };
+    timeline.push(breakTrial);
+    trial_number++;
   });
 
   let questionsInstructions = {
@@ -234,14 +229,7 @@ export function runExperiment(
   };
   timeline.push(demographicsTrial);
 
-  let images = [];
-  // add scale pic paths to images that need to be loaded
-  images.push("img/scale.png");
-  for (let i = 1; i <= 7; i++) images.push("img/scale" + i + ".jpg");
-
-  jsPsych.pluginAPI.preloadImages(images, function() {
-    startExperiment();
-  });
+  startExperiment();
   document.timeline = timeline;
   function startExperiment() {
     jsPsych.init({
diff --git a/dev/index.html b/dev/index.html
@@ -36,7 +36,6 @@
     
     <form action="" class="form-horizontal">
         Subject Code: <input id="subjCode" type="text" name="FirstName" value="subjCode" autofocus><br>
-        Number of Categories: <input id="numTrials" type="text" name="trials" value="4"> <br>
         <label for="select" class="control-label">Start over (Reset):</label>
         <select name="new" id="reset" style="width:20%">
             <option value="false">false</option>
diff --git a/dev/prod.js b/dev/prod.js
@@ -15,7 +15,6 @@ $(document).ready(function(){
         // DEFINE workerId, hitId, assignmentId HERE
         //////////////////////////////////////////
         let subjCode = $.urlParam('workerId') || 'unknown';
-        let numTrials = $.urlParam("numTrials") || 15;        
         let reset =  $.urlParam("newSet") || 'false';
         let workerId = 'workerId';
         let assignmentId = 'assignmentId';
@@ -29,22 +28,12 @@ $(document).ready(function(){
             url: 'http://'+document.domain+':'+PORT+'/trials',
             type: 'POST',
             contentType: 'application/json',
-            data: JSON.stringify({subjCode, numTrials, reset, dev: false }),
+            data: JSON.stringify({subjCode, reset, dev: false }),
             success: function (data) {
                 console.log(data);
                 
-                let images = [];
-                let categories = data.trials.categories;
-                let stimuli = data.trials.images;
-
-                for (let category of categories) {
-                    for (let file of stimuli[category]) {
-                        images.push(file);
-                    }
-                }
                 $("#loading").remove();
                 runExperiment(data.trials, subjCode, workerId, assignmentId, hitId, FULLSCREEN, PORT);
-                jsPsych.pluginAPI.preloadImages(images, function(){}); 
             }
         })
     
diff --git a/index.js b/index.js
