const jsPsych = initJsPsych();

let timeline = [];

/* PAVLOVIA INIT */
const pavlovia_init = {
    type: jsPsychPavlovia,
    command: "init"
};

timeline.push(pavlovia_init);

/* AGE */
const age_trial = {
    type: jsPsychHtmlButtonResponse,
    stimulus: `
      <div class="study-box">
        <p>Please confirm you are over 18 years old.</p>
      </div>
    `,
    choices: ["Yes"]
};

timeline.push(age_trial);

/* GENDER */
const gender_trial = {
    type: jsPsychHtmlButtonResponse,
    stimulus: `
      <div class="study-box">
        <p>Please select your gender.</p>
      </div>
    `,
    choices: ["Male", "Female", "Other"],
    on_finish: function(data){
        data.gender = data.response;
    }
};

timeline.push(gender_trial);

/* TEST SCREEN */
const test_screen = {
    type: jsPsychHtmlButtonResponse,
    stimulus: `
      <div class="study-box">
        <h1>SUCCESS</h1>
        <p>If you can see this screen, Pavlovia is now working correctly.</p>
      </div>
    `,
    choices: ["Continue"]
};

timeline.push(test_screen);

/* FINISH */
const pavlovia_finish = {
    type: jsPsychPavlovia,
    command: "finish"
};

timeline.push(pavlovia_finish);

/* RUN */
jsPsych.run(timeline);