<!DOCTYPE html>

<!-- 
  The exp.html is the main form that
  controls the experiment.

  see comments throughout for advice
-->

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Psychology Experiment</title>
        <meta charset="utf-8">
        <link rel="Favicon" href="static/favicon.ico" />

        <!-- Standard requirements -->
        <script src="static/lib/jquery-min.js" type="text/javascript"> </script>
        <script src="static/lib/underscore-min.js" type="text/javascript"> </script>
        <script src="static/lib/backbone-min.js" type="text/javascript"> </script>
        <script src="static/lib/d3.v3.min.js" type="text/javascript"> </script>
        <script src="static/lib/bootstrap.min.js" type="text/javascript"> </script>

        <!-- Additional requirements -->
        <script src="static/lib/showdown-min.js" type="text/javascript"></script>

        <!-- jsPsych -->
        <script src="static/lib/jspsych-7/jspsych.js" type="text/javascript"></script>
        <script src="static/lib/jspsych-7/plugin-instructions.js" type="text/javascript"></script>
        <script src="static/lib/jspsych-7/plugin-survey-text.js" type="text/javascript"></script>
        <script src="static/lib/jspsych-7/plugin-survey-multi-select.js" type="text/javascript"></script>
        <script src="static/lib/jspsych-7/plugin-survey-multi-choice.js" type="text/javascript"></script>
        <script src="static/lib/jspsych-7/plugin-survey-likert.js" type="text/javascript"></script>
        <script src="static/lib/jspsych-7/plugin-survey-html-form.js" type="text/javascript"></script>
        <script src="static/lib/jspsych-7/plugin-html-button-response.js" type="text/javascript"></script>
        <script src="static/lib/jspsych-7/plugin-html-slider-response.js" type="text/javascript"></script>

        <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

        <!-- <script src="static/lib/jspsych-6.0.1/plugins/jspsych-html-button-response.js" type="text/javascript"></script> -->
        <!-- <script src="static/lib/jspsych-6.0.1/plugins/jspsych-form.js" type="text/javascript"></script> -->
        
        <!-- psiTurk -->
        <script type="text/javascript">
            // These fields provided by the psiTurk Server
            var uniqueId = "{{ uniqueId }}";  // a unique string identifying the worker/task
            var condition = "{{ condition }}"; // the condition number
            var counterbalance = "{{ counterbalance }}"; // a number indexing counterbalancing conditions
            var adServerLoc = "{{ adServerLoc }}"; // the location of your ad (so you can send user back at end of experiment)
            var mode = "{{ mode }}";
        </script>
        <script src="static/js/psiturk.js" type="text/javascript"> </script>

        <!-- Stylesheets -->
        <link rel=stylesheet href="static/css/bootstrap.min.css" type="text/css">
        <link rel=stylesheet href="static/css/style.css" type="text/css">
        <link rel="stylesheet" href="static/lib/jspsych-7/jspsych.css" type="text/css"></link>

    </head>

    <body>
        <!-- Error messages -->
        <noscript>
            <h1>Warning: Javascript seems to be disabled</h1>
            <p>This website requires that Javascript be enabled on your browser.</p>
            <p>Instructions for enabling Javascript in your browser can be found 
            <a href="http://support.google.com/bin/answer.py?hl=en&answer=23852">here</a><p>
        </noscript>

        <div id='jspsych-target' class='jspsych-display-element'></div>

        <div id='welcome'>
            <div id='welcome-message' class='jspsych-content'>
                <h1>Welcome</h1>
                <p>Thanks for accepting our HIT!
                <p>Please wait while we load the experiment.
            </div>
            
            <div style="display:none;" class="alert alert-danger" id="data-error">
                <strong>Error!</strong>
                We couldn't contact the database. Try reloading the page. If the
                problem persists, please return the HIT and report the error to
                ANONYMIZED.
            </div>

            <div id="load-icon"></div>
        </div>

        <div style="display:none;" id="prolific-complete" class='jspsych-display-element'>
            <h1>Study complete</h1>

            <p>
            Your completion code is <b>1E6E8213</b>
            Click this link to submit<br>
            <a href=https://app.prolific.co/submissions/complete?cc=1E6E8213>
                https://app.prolific.co/submissions/complete?cc=1E6E8213
            </a>
            <p>
            If you have problems submitting, please contact 
            <a href="mailto:ANONYMIZED@ANONYMIZED.edu">ANONYMIZED</a>
        </div>

        <!-- <div style="display:none;" id="success-load" class="animate-bottom">
            <br><br><br><br><br>
            <button id='load-btn' class="btn btn-primary btn-lg">Begin</button>
        </div> -->

<!--         <div style="display:none;" class="alert alert-warning" id="slow-load">
            <strong>Uhh....</strong>
            The page is taking longer than usual to load. First try refreshing the page. 
            If it still doesn't work, there may be a problem with our server, or
            you may not have a fast enough internet connection to participate
            in this experiment. In either case, please return the HIT so that
            someone else can participate. We appreciate it!
        </div> -->
    </body>

    <!-- Utilities and boilerplate -->
    <script src="static/js/instruct-describe.js" type="text/javascript"></script>

    <script src="static/js/utils.js" type="text/javascript"> </script>
    <script src="static/js/setup.js", type="text/javascript"></script>
    <script src="static/js/stimulus.js", type="text/javascript"></script>
    <script src="static/js/instructions.js", type="text/javascript"></script>
    <script src="static/js/quiz.js", type="text/javascript"></script>

    <!-- The actual experiment! -->
    <script src="static/js/experiment.js" type="text/javascript"></script>

</html>

