<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" type="image/png" href="/pkg-static/images/favicon.png"/>
    <title>Experiment in progress!</title>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/js-cookie@3.0.5/dist/js.cookie.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        window.taskName = '<%= taskName %>';
    </script>
    <link rel="stylesheet" href="/exp-static/<%= taskName %>/experiment.css">
    <script type="text/javascript" src="/exp-static/<%= taskName %>/experiment.js"></script>
</head>
<body>
    <div id="instructions">
        <div id="insContent">
            <h3>Instruction - Categorization task</h3>
            <p style="line-height: 1.8;"></p>

            <hr style="border: 1px solid #ccc; margin-top: 100px; width: 100%;">
            <div style="margin-top: 10px;">
            <button id="consentButton">Proceed</button>
            <!-- <button id="declineButton">I decline!</button> -->
            </div>
        </div>
    </div>
    <div class="container">
        <div id="rest">
            <div id="restContent">
                <p></p>
                <button id="continueButton">Back to the task</button>
            </div>
        </div>

        <div class="question">Rate the following text</div>
        <div class="text-container">
            <div class="option">
                <div id="text"></div>
                <!-- add a slider -->
                <div id="slider_value" style="text-align:center; margin-bottom:4px; font-size:18px;"></div>
                <input type="range" id="rating_slider" min="1" max="7" value="4">
                <button id="submit_button" onclick="sendChoice()" disabled>submit</button>
            </div>
        </div>
    </div>
    <div id="progressBar"></div>

    <script>
        $(document).ready(function() {
            set_up();
            show_instruction().then(function() {
                getChoice();
            });
            // Show initial value
            $('#slider_value').text($('#rating_slider').val());
            // Update value on input
            $('#rating_slider').on('input', function() {
                $('#slider_value').text($(this).val());
            });
        });
    </script>
</body>
</html>