Merge pull request #71 from sandboxnu/feature/blur-images

Add functionality to blur images for demos

Author: ryandrew14

predictiveaffect.css

@@ -144,3 +144,7 @@
 #jspsych-data-display {
   text-align: left;
 }
+
+.img-blurred {
+  filter: blur(30px);
+}

src/experiment.js

@@ -5,7 +5,6 @@ const {
   generateImageHTMLNoDot,
   showFixationDot,
   showIntertrialBreak,
-  getImagePath,
   isNegativeImg
 } = require("./utils/imageUtils");
 const {
@@ -220,12 +219,12 @@ const displayTriplet = (trip, ordering) => {
   timeline.push(tripletInstructions);
 
   for (let i = 0; i < param["imageStructLength"]; i++) {
-    const imgPath = getImagePath(trip.getImage(i));
+    const img = trip.getImage(i);
     showFixationDot(timeline);
 
     const imagePrompt = {
-      type: "image-keyboard-response",
-      stimulus: imgPath,
+      type: "html-keyboard-response",
+      stimulus: generateImageHTMLNoDot(img),
       choices: jsPsych.NO_KEYS,
       trial_duration: 1000
     };

src/utils/imageUtils.js

@@ -185,7 +185,7 @@ const getImagePath = ({ valence, fileName }) => {
  */
 const generateImageHTML = image => `
 <div class="img-overlay-wrap">
-<img src="${getImagePath(image)}">
+<img class="${param.blurImages && 'img-blurred'}" src="${getImagePath(image)}">
 <svg height="${param.img_y}" width="${param.img_x}">
   <circle cx="${image.greyDotX}" cy="${image.greyDotY}" r="${
   param.grey_radius
@@ -197,7 +197,7 @@ const generateImageHTML = image => `
 // generates image HTML like above but with no grey dot
 const generateImageHTMLNoDot = image => `
 <div class="img-overlay-wrap">
-<img src="${getImagePath(image)}">
+<img class="${param.blurImages && 'img-blurred'}" src="${getImagePath(image)}">
 </div>
 `;