Remember!

When you choose to add one or more of these features to your code, don't forget to push them to the timeline!

timeline.push(name_of_the_feature_trial)

Browser Check:
Making sure the participant's set-up is functional

The participant must use a compatible browser (Firefox or Chrome) on their computer.
Their screen must be large enough to display the experiment. 

const browser_check = {
  type: jsPsychBrowserCheck,
  features: ["browser", "mobile", "width", "height"],
  allow_window_resize: true,
  minimum_height: 600,
  minimum_width: 800,
  inclusion_function: (data) => {
    return (data.browser === 'chrome' || data.browser === 'firefox') && data.mobile === false
  },
  exclusion_message: (data) => {
    if(data.mobile){
      return '<p>You must use a desktop/laptop computer to participate in this experiment.</p>';
    } else if (data.browser !== 'firefox' && data.browser !== 'chrome') {
      return '<p>Unfortunately, this study is not compatible with your browser.</p>' +
        '<p>Please reopen this experiment from a supported browser (like Chrome or Firefox).</p>'
    }
  }
};
Open demo in new tab 
timeline.push(browser_check)

Enough time:

The participant is asked if they do or do not have enough time to complete the experiment.

const enough_time = {
  type: jsPsychHtmlButtonResponse,
  stimulus:
    "<p class='instructions'>Before going further, please note that this study should take " +
    "15-17 minutes to complete.</p>",
  choices: ['I have enough time', 'I do not have enough time'],
};

const not_enough_time_to_complete = {
  type: jsPsychHtmlButtonResponse,
  stimulus: '<p>Please come back later to take part in this experiment.</p>',
  choices: ['Go back to Prolific Academic'],
};

const redirect_to_prolific = {
  type: jsPsychCallFunction,
  func: function() {
    window.location.href = "https://www.prolific.ac/";
    jsPsych.pauseExperiment();
  }
}

const if_not_enough_time = {
  timeline: [not_enough_time_to_complete, redirect_to_prolific],
  conditional_function: function() {
    // get the data from the previous trial,
    // and check which key was pressed
    let trial_data = jsPsych.data.getLastTrialData().values()[0].response;
    if(trial_data == 1){ // participant says they don't have enough time
      return true;
    } else { // participant says they have enough time
      return false;
    }
  }
};
Open demo in new tab 
timeline.push(enough_time, if_not_enough_time)

Attention Check:
Making sure the participant was attentive during the task

The participant is tested on their attention to the task.
Their data could later be left unused if the attention check is incorrect. 

const attention_check = {
  type: jsPsychSurveyText,
  data: {trial: "attention_check"},
  preamble: "<p class ='instructions'>When asked for your favorite color, please enter the word baguette in the box below.</p>",
  questions: [{
    prompt: "<p class='instructions'>Based on the text above, what is your favorite color?</p>"
  }],
  button_label: "Submit",
};
Open demo in new tab 
timeline.push(attention_check)

Demographic Questions:
Who was the participant?

At the end of the experiment, you have the possibility to ask demographic questions to find out about your participant. Be mindful of the privacy constraints in the questions you choose to ask. 

const vaast_demographic_questions = {
  type: jsPsychHtmlKeyboardResponse,
  stimulus:
    "<p class='instructions'>The study is almost finished. Now, you have to answer a few questions.</p>" +
    "<p class='continue-instructions'>Press <strong>space</strong> to continue.</p>",
  choices: [" "]
};
Open demo in new tab 
timeline.push(vaast_demographic_questions)