evaconddemo.html

<!-- TO DO -->
<!-- Preload images -->

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>exp</title>
  <script src="jspsych-6.0.3/jspsych.js"></script>
  <script src="jspsych-6.0.3/plugins/jspsych-html-button-response.js"></script>
  <script src="jspsych-6.0.3/plugins/jspsych-survey-likert.js"></script>
  <script src="jspsych-6.0.3/plugins/jspsych-survey-text.js"></script>
  <script src="jspsych-6.0.3/plugins/jspsych-survey-multi-choice.js"></script>
  <script src="js/jquery.min.js"></script>
  <script src="js/lodash.min.js"></script>
  <script src="js/firebase.js"></script>
  <link href="jspsych-6.0.3/css/jspsych.css" rel="stylesheet" type="text/css">
  <style>
    body {
      cursor: default;
    }

    .jspsych-content-wrapper {
      width: 800px;
      height: 650px;
    }

    .paringsImgsLeft,
    .paringsImgsRight {
      height: 320px;
      margin: 0px;
    }

    .paringsImgsLeft {
      margin-right: 10px;
    }
  </style>
</head>

<body></body>

<script>
  /* Parameters */
  var redirectToLink = "https://app.prolific.co/submissions/complete?cc=73561B39"; // link to be redirected to at the end of the experiment
  var FBdirectory = "EC" // Firebase directory in which to store the data
  /* Initial variables */
  var timeline = [];
  var preloadimages = [];

  var id = jsPsych.data.getURLVariable("id");
  if (id == null) id = 'NA';
  var cond = jsPsych.data.getURLVariable("cond");
  if (cond == null) cond = 'NA';

  /* Material */
  // in R, use the following line code to list files in a directory:
  // list.files("CSUS/CS/", "*B_gp1") %>% paste0("'CSUS/CS/", .,"',") %>% cat(sep = "\n")

  var CS_G1B = [ // G1 = Blue   ; G2 = Yellow
    'CSUS/CS/Face10_B_gp1.png',
    'CSUS/CS/Face103_B_gp1.png',
    'CSUS/CS/Face116_B_gp1.png',
    'CSUS/CS/Face132_B_gp1.png',
    'CSUS/CS/Face16_B_gp1.png',
    'CSUS/CS/Face17_B_gp1.png',
    'CSUS/CS/Face45_B_gp1.png',
    'CSUS/CS/Face85_B_gp1.png',
    'CSUS/CS/Face104_J_gp2.png',
    'CSUS/CS/Face115_J_gp2.png',
    'CSUS/CS/Face119_J_gp2.png',
    'CSUS/CS/Face142_J_gp2.png',
    'CSUS/CS/Face19_J_gp2.png',
    'CSUS/CS/Face28_J_gp2.png',
    'CSUS/CS/Face55_J_gp2.png',
    'CSUS/CS/Face95_J_gp2.png',
  ];
  var CS_G1Y = [ // G1 = Yellow ; G2 = Blue
    'CSUS/CS/Face10_J_gp1.png',
    'CSUS/CS/Face103_J_gp1.png',
    'CSUS/CS/Face116_J_gp1.png',
    'CSUS/CS/Face132_J_gp1.png',
    'CSUS/CS/Face16_J_gp1.png',
    'CSUS/CS/Face17_J_gp1.png',
    'CSUS/CS/Face45_J_gp1.png',
    'CSUS/CS/Face85_J_gp1.png',
    'CSUS/CS/Face104_B_gp2.png',
    'CSUS/CS/Face115_B_gp2.png',
    'CSUS/CS/Face119_B_gp2.png',
    'CSUS/CS/Face142_B_gp2.png',
    'CSUS/CS/Face19_B_gp2.png',
    'CSUS/CS/Face28_B_gp2.png',
    'CSUS/CS/Face55_B_gp2.png',
    'CSUS/CS/Face95_B_gp2.png',
  ];

  preloadimages.push(CS_G1B, CS_G1Y);
  preloadimages = _.flattenDeep(preloadimages);
  var groupColor = cond.substring(0, 3);
  var CS = groupColor == "G1B" ? CS_G1B : CS_G1Y;

  /* CS RATINGS INSTRUCTIONS */
  var instCSratings = {
    type: "html-button-response",
    post_trial_gap: 300,
    choices: ['Start'],
    on_load: function () { $('body').css({ "cursor": "default" }); },
    stimulus: function () {
      var html = "";
      html += "<h1>Rating task</h1>";
      html += "<p class='justify'>You will now be asked to indicate your <b>general feelings</b> about the faces you have been presented with. ";
      html += "To do so, please use the following scale : <i>1 = very negative feelings</i> to <i>9 = very positive feelings</i>.</br></br>";
      html += "Please respond as honestly as possible. Your first impression is generally the most accurate.</p>";
      return html;
    },
  };

  /* CS RATINGS */
  var ratingScale = ["1</br>Very negative", "2", "3", "4", "5", "6", "7", "8", "9</br>Very positive"];
  var CSratings = [];
  var shuffledCS = _.shuffle(CS);
  shuffledCS.map(function (cs) {
    var likert_trial = {
      type: 'survey-likert',
      preamble: "<img src='" + cs + "'>",
      questions: [{ prompt: "What are your general feelings about this face?", labels: ratingScale, required: true }],
      button_label: 'Continue',
      on_load: function () {
        $("#jspsych-survey-likert-form").css("width", "700px");
        $(".jspsych-survey-likert-opts").css("margin-top", "30px");
      },
      on_finish: function (data) {
        data.task = "CSratings";
        data.CS = cs;
        var parsed_response = JSON.parse(data.responses);
        data.feeling = parsed_response.Q0 + 1;
        console.log(data.CS);
        console.log(data.feeling);
      },
    };
    CSratings.push(likert_trial);
  });

  /* CS MEMORY INSTRUCTIONS */
  var instCSmemory = {
    type: "html-button-response",
    post_trial_gap: 300,
    choices: ['Start'],
    on_load: function () { $('body').css({ "cursor": "default" }); },
    stimulus: function () {
      var html = "";
      html += "<h1>Memory task</h1>";
      html += "<p class='justify'>You will now be asked to indicate, for each face, if it was presented together with a positive image, a negative image, or if you don't remember.</p>";
      return html;
    },
  };
  var CSmemory = [];
  var shuffledCS = _.shuffle(CS);
  var memoryOptions = ['A positive image', 'A negative image', "I don't remember"];
  shuffledCS.map(function (cs) {
    var memory_trial = {
      type: 'survey-multi-choice',
      preamble: "<img src='" + cs + "'>",
      questions: [{ prompt: "This face presented together with:", options: memoryOptions, required: true }],
      button_label: 'Continue',
      on_load: function () {
        $("#jspsych-survey-likert-form").css("width", "700px");
        $(".jspsych-survey-likert-opts").css("margin-top", "30px");
      },
      on_finish: function (data) {
        data.task = "CSmemory";
        data.CS = cs;
        var parsed_response = JSON.parse(data.responses);
        data.memory = parsed_response.Q0;
        console.log(data.CS);
        console.log(data.memory);
      },
    };
    CSmemory.push(memory_trial);
  });

  /* Demographics */
  var age = {
    timeline: [{
      type: 'survey-text',
      questions: [{ prompt: "Indicate your age:", rows: 1, columns: 10 }],
      button_label: "continue",
    }],
    loop_function: function (data) {
      var age = data.values()[0].responses;
      var age = JSON.parse(age).Q0;
      if (age == "") {
        alert("Please answer the question");
        return true;
      }
    },
    on_finish: function (data) {
      jsPsych.data.addProperties({
        age: JSON.parse(data.responses).Q0,
      });
    },
  };

  var genderOptions = ['male', 'female', 'other'];
  var gender = {
    type: 'survey-multi-choice',
    questions: [{ prompt: "What is your gender?", options: genderOptions, required: true }],
    button_label: "continue",
    on_finish: function (data) {
      jsPsych.data.addProperties({
        gender: JSON.parse(data.responses).Q0,
      });
      console.log(data);
    },
  };

  var colorDiscrimOptions = ['yes', 'no'];
  var colorDiscrim = {
    type: 'survey-multi-choice',
    questions: [{ prompt: "Did you have any difficulty to discriminate blue and yellow colors during the video game task?", options: colorDiscrimOptions, required: true }],
    button_label: "continue",
    on_finish: function (data) {
      jsPsych.data.addProperties({
        colorDiscrim: JSON.parse(data.responses).Q0,
      });
      console.log(data);
    },
  };

  var comment = {
    timeline: [{
      type: 'survey-text',
      questions: [{ prompt: "(optional)</br>If you experienced any issue during the study please feel free to leave a comment below:", rows: 7, columns: 70 }],
      button_label: "continue",
    }],
    on_finish: function (data) {
      jsPsych.data.addProperties({
        comment: JSON.parse(data.responses).Q0,
      });
      console.log(data);
    },
  };

  /* Debriefing */
  var debriefing = {
    type: "html-button-response",
    post_trial_gap: 300,
    choices: ['continue'],
    stimulus: function () {
      var html = "";
      html += "<h1>Debriefing</h1>";
      html += "<p class='justify'>Thank you for taking part in this study!</br></br>";
      html += "The overall aim of this research is to test participants' reaction time to approach/avoid faces ";
      html += 'after they have associated these faces with positives or negatives stimuli (pictures).'
      html += 'Feel free to contact me if you have any question or comment regarding this study.</br></br></br>';
      html += "<u>Please click on the button <i>continue</i> to validate your participation on prolific.</u></p>";
      return html;
    }
  };

  /* TIMELINES ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
  timeline.push(instCSratings);
  timeline.push(CSratings);
  timeline.push(instCSmemory);
  timeline.push(CSmemory);
  timeline.push(age);
  timeline.push(gender);
  timeline.push(colorDiscrim);
  timeline.push(comment);
  timeline.push(debriefing);
  timeline = _.flattenDeep(timeline);

  /* INITIALISE EXP  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
  jsPsych.init({
    timeline: timeline,
    preload_images: preloadimages,
    max_load_time: 300 * 1000,
    exclusions: {
      min_width: 800,
      min_height: 650,
    },
    on_finish: function (data) {
      $("#jspsych-content").html("<img src='img/loading.gif'>");
      /* Initialize Firebase */
      var config = {
        apiKey: "AIzaSyD4r9uWI4icto61fm2tC9neKdEiOUWzMJ8",
        databaseURL: "https://biatw-68fe6.firebaseio.com/"
      };
      firebase.initializeApp(config);
      var database = firebase.database();
      // if no id provided, generate a new id
      if (id == null) { id = jsPsych.randomization.randomID(15) };

      /* jsPsych: add data to every trial */
      jsPsych.data.addProperties({
        id: id,
        cond: cond,
        totalTime: jsPsych.totalTime()
      });

      var dataCSratings = data.filter({ task: 'CSratings' }).csv();
      var dataCSmemory = data.filter({ task: 'CSmemory' }).csv();

      /* Send data to Firebase */
      database
        .ref(FBdirectory + "/" + id + "/")
        .update({ dataCSratings })
        .then(function () {
          console.log("Data CSratings sent!");
          database
            .ref(FBdirectory + "/" + id + "/")
            .update({ dataCSmemory })
            .then(function () {
              console.log("Data CSmemory sent!");
              window.location.href = redirectToLink;
            });
        });
    }
  });
</script>

</html>