{{ block title }}
    jsPsych
{{ endblock }}

{{ block styles }}
{{ endblock }}

{{ block content }}
{{ endblock }}

{{ block scripts }}
<script src="{{ static 'jspsych/jspsych.js' }}"></script>
<script src="{{ static 'jspsych/plugin-preload.js' }}"></script>
<script src="{{ static 'jspsych/plugin-html-keyboard-response.js' }}"></script>
<script src="{{ static 'jspsych/plugin-survey-likert.js' }}"></script>
<script src="{{ static 'jspsych/plugin-image-keyboard-response.js' }}"></script>
<link href="{{ static 'jspsych/jspsych.css' }}" rel="stylesheet" type="text/css" />

<style>
    #display_stage_background {
        width: 100vw;
        background-color: white;
        z-index: -1;
    }

    #display_stage {
        position: fixed;
        left: 1vw;
        top: 1vh;
        height: 98vh;
        width: 98vw;
        background-color: white;
        box-shadow: 1px 1px 1px #999;
        border-radius: 15px;
        z-index: 0;
        overflow-y: hidden;
        overflow-x: hidden;
    }
</style>


<div id='display_stage_background'></div>
<div id='display_stage'></div>


<script>
    /* initialize jsPsych */
    var jsPsych = initJsPsych({
        display_element: 'display_stage',
        on_finish: function(data) {
            $('<input>').attr({
                type: 'hidden',
                name: 'jspsychdata',
                value: JSON.stringify(data)
            }).appendTo('#form');
            $('#form').submit();
        }
    });

    /* create timeline */
    var timeline = [];


    /* preload images */
    var preload = {
        type: jsPsychPreload,
        images: ['{{ static "img/blue.png" }}', '{{ static "img/orange.png" }}']
    };
    timeline.push(preload);


    /* define welcome message trial */
    var welcome = {
        type: jsPsychHtmlKeyboardResponse,
        stimulus: "Welcome to the experiment. Press any key to begin."
    };
    timeline.push(welcome);


    /* define survey trial */
    var likert_scale = [
        "Strongly Disagree", 
        "Disagree", 
        "Neutral", 
        "Agree", 
        "Strongly Agree"
    ];

    var surveytrial = {
        type: jsPsychSurveyLikert,
        questions: [
            {prompt: "I like vegetables.", name: 'Vegetables', labels: likert_scale},
            {prompt: "I like fruit.", name: 'Fruit', labels: likert_scale},
            {prompt: "I like meat.", name: 'Meat', labels: likert_scale},
        ],
        randomize_question_order: true
    };
    timeline.push(surveytrial);


    /* define instructions trial */
    var instructions = {
        type: jsPsychHtmlKeyboardResponse,
        stimulus: `
            <p>In this experiment, a circle will appear in the center of the screen.</p>
            <p>If the circle is <strong>blue</strong>, press the letter F on the keyboard as fast as you can.</p>
            <p>If the circle is <strong>orange</strong>, press the letter J as fast as you can.</p>
            <div style='width: 700px;'>
                <div style='float: left;'>
                    <img src='{{ static "img/blue.png" }}'></img>
                    <p class='small'><strong>Press the F key</strong></p>
                </div>
                <div style='float: right;'>
                    <img src='{{ static "img/orange.png" }}'></img>
                    <p class='small'><strong>Press the J key</strong></p>
                </div>
            </div>
            <p>Press any key to begin.</p>
        `,
        post_trial_gap: 2000
    };
    timeline.push(instructions);


    /* define trial stimuli array for timeline variables */
    var test_stimuli = [
        {stimulus: '{{ static "img/blue.png" }}', correct_response: 'f'},
        {stimulus: '{{ static "img/orange.png" }}', correct_response: 'j'}
    ];

    /* define fixation and test trials */
    var fixation = {
        type: jsPsychHtmlKeyboardResponse,
        stimulus: '<div style="font-size:60px;">+</div>',
        choices: "NO_KEYS",
        trial_duration: function(){
            return jsPsych.randomization.sampleWithoutReplacement([250, 500, 750, 1000, 1250, 1500, 1750, 2000], 1)[0];
        },
        data: {
            task: 'fixation'
        }
    };

    var test = {
        type: jsPsychImageKeyboardResponse,
        stimulus: jsPsych.timelineVariable('stimulus'),
        choices: ['f', 'j'],
        data: {
            task: 'response',
            correct_response: jsPsych.timelineVariable('correct_response')
        },
        on_finish: function(data){
            data.correct = jsPsych.pluginAPI.compareKeys(data.response, data.correct_response);
        }
    };

    /* define test procedure */
    var test_procedure = {
        timeline: [fixation, test],
        timeline_variables: test_stimuli,
        repetitions: 5,
        randomize_order: true
    };
    timeline.push(test_procedure);


    /* define debrief */
    var debrief_block = {
        type: jsPsychHtmlKeyboardResponse,
        stimulus: function() {
            var trials = jsPsych.data.get().filter({task: 'response'});
            var correct_trials = trials.filter({correct: true});
            var accuracy = Math.round(correct_trials.count() / trials.count() * 100);
            var rt = Math.round(correct_trials.select('rt').mean());

            return `
                <p>You responded correctly on ${accuracy}% of the trials.</p>
                <p>Your average response time was ${rt}ms.</p>
                <p>Press any key to complete the experiment. Thank you!</p>
            `;
        }
    };
    timeline.push(debrief_block);


    /* start the experiment */
    jsPsych.run(timeline);
</script>
{{ endblock }}