{{ block title }}
Questionnaire about Part 1 of this study
{{ endblock }}
{{ block content }}
<style>
    p {
        text-align: justify;
    }

    .radio-label-vertical-wrapper {
        padding-bottom: 13px;
        position: relative;
        display: inline-block;
        margin-bottom: 20px;
    }

    .radio-label-vertical-wrapper:before {
        content: ' ';
        display: block;
        width: 100%;
        height: 30px;
        position: absolute;
        bottom: 0;
    }

    .radio-label-vertical-wrapper label:not(.radio-label-vertical) {
        display: block;
        width: 100%;
    }

    .radio-label-vertical {
        position: relative;
        display: inline-block;
        vertical-align: middle;
        padding: 0 15px;
        text-align: center;
    }

    .radio-label-vertical input {
        position: absolute;
        top: 28px;
        left: 50%;
        margin-left: -6px;
        display: block;
        cursor: pointer;
    }

    label.col-form-label {
        font-weight: bold;
    }

    style
    p {
        text-align: justify;
    }

    .slider_container {
        width: 100%;
    }

    .selector {
        border-right-color: transparent;
        border-right-width: 15px
    }

    datalist {
        display: flex;
    }

    option {
        width: 9%
    }

    input[type=range] {
        -webkit-appearance: none;
        margin: 18px 0;
        width: 100%;
    }

    input[type=range]:focus {
        outline: none;
    }

    input[type=range]::-webkit-slider-runnable-track {
        width: 100%;
        height: 8.4px;
        cursor: pointer;
        box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
        background: black;
        border-radius: 1.3px;
        border: 0.2px solid #010101;
    }

    input[type=range]::-webkit-slider-thumb {
        box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
        border: 1px solid #000000;
        height: 36px;
        width: 16px;
        border-radius: 3px;
        background: red;
        cursor: pointer;
        -webkit-appearance: none;
        margin-top: -14px;
        visibility: hidden;

    }

    input[type=range]:focus::-webkit-slider-runnable-track {
        background: black;
    }

    input[type=range]::-moz-range-track {
        width: 100%;
        height: 8.4px;
        cursor: pointer;
        box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
        background: black;
        border-radius: 1.3px;
        border: 0.2px solid #010101;
    }

    input[type=range]::-moz-range-thumb {
        box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
        border: 1px solid #000000;
        height: 36px;
        width: 16px;
        border-radius: 3px;
        background: red;
        cursor: pointer;
    }

    input[type=range]::-ms-track {
        width: 100%;
        height: 8.4px;
        cursor: pointer;
        background: transparent;
        border-color: transparent;
        border-width: 16px 0;
        color: transparent;
    }

    input[type=range]::-ms-fill-lower {
        background: black;
        border: 0.2px solid #010101;
        border-radius: 2.6px;
        box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
    }

    input[type=range]::-ms-fill-upper {
        background: black;
        border: 0.2px solid #010101;
        border-radius: 2.6px;
        box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
    }

    input[type=range]::-ms-thumb {
        box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
        border: 1px solid #000000;
        height: 16px;
        width: 8px;
        border-radius: 3px;
        background: red;
        cursor: pointer;
    }

    input[type=range]:focus::-ms-fill-lower {
        background: black;
    }

    input[type=range]:focus::-ms-fill-upper {
        background: black;
    }


</style>
{{ if player.treatment == "T1" or player.treatment == "T2"}}
<p>
    Please think back to Part 1 and answer the following questions as honestly as possible. Please guess how likely it is that the Person A you were matched with in Part 1 chose A2. You can provide your guess
    using the slider below where 0% means you are certain she <b>did not</b> choose A2, and 100 means you are certain she <b>did</b>
    choose A2. Recall that for Person A, choosing A2 meant that your choice in Part 1 would be implemented.

</p>

<table class="table table-borderless m-0 p-0">
    <tr></h6>
        <td colspan="2" id="0" class="text-md-start" style="">0%</td>
        <td colspan="2"><h6>Selected percentage: &nbsp;<span id="show_value"></span> %</h6></td>
        <td colspan="2" id="10" class="text-md-center" style="width: 1%">100%</td>
    </tr>
    <tr>
        <td class="slider_container" colspan=30>
            <input type="range" value="0" min="0" max="100" step="1" list="tickmarks" style="width: 100%;"
                   oninput="tableClick(this)" id="slider" name="gameB_slider">
        </td>
    </tr>
    <script>
        window.slider_clicked = false

        function tableClick(e) {
            window.slider_clicked = true
            $('<style>input[type="range"]::-webkit-slider-thumb { visibility: visible!important;}<style/>').appendTo('head');
            document.getElementById('show_value').innerText = e.value
        }

        $('#form').submit(function (evt) {
            console.log("Submit check");
            if (window.slider_clicked === false) {
                evt.preventDefault();
            }
        })
    </script>

</table>


<p class="card-header">
    Please rate the following statements based on how likely they were to be running through Person A’s mind before s/he
    chose A2 in Part 1 (where 1 = not at all likely & 5 = highly likely):
</p>
<table class="table table-bordered">
    <colgroup>
        <col span="1" style="width: 50%;">
        <col span="1" style="width: 50%;">
    </colgroup>
    <tr>
        <td class="align-content-center align-middle">
            “I believe I cannot lose anything by choosing A2.”
        </td>
        <td class="align-content-center align-middle align-middle">
            <label style="width: 100%" class="col-form-label">not at all likely <span
                    style="float: right">highly likely</span>
            </label>
            <center>
                <div class="radio-label-vertical-wrapper">
                    <div class="form-group">
                        <label class="radio-label-vertical">
                            <input type="radio" name="gameB_T1T2_1" value="1" required>1</label>
                        <label class="radio-label-vertical">
                            <input type="radio" name="gameB_T1T2_1" value="2" required>2</label>
                        <label class="radio-label-vertical">
                            <input type="radio" name="gameB_T1T2_1" value="3" required>3</label>
                        <label class="radio-label-vertical">
                            <input type="radio" name="gameB_T1T2_1" value="4" required>4</label>
                        <label class="radio-label-vertical">
                            <input type="radio" name="gameB_T1T2_1" value="5" required>5</label>
                    </div>
                </div>
            </center>
        </td>
    </tr>
    <tr>
        <td class="align-content-center align-middle">
            “I believe there is a high likelihood that I will gain money by choosing A2.”

        </td>
        <td class="align-content-center align-middle align-middle">
            <center>
                <div class="radio-label-vertical-wrapper">
                    <div class="form-group">
                        <label class="radio-label-vertical">
                            <input type="radio" name="gameB_T1T2_2" value="1" required>1</label>
                        <label class="radio-label-vertical">
                            <input type="radio" name="gameB_T1T2_2" value="2" required>2</label>
                        <label class="radio-label-vertical">
                            <input type="radio" name="gameB_T1T2_2" value="3" required>3</label>
                        <label class="radio-label-vertical">
                            <input type="radio" name="gameB_T1T2_2" value="4" required>4</label>
                        <label class="radio-label-vertical">
                            <input type="radio" name="gameB_T1T2_2" value="5" required>5</label>
                    </div>
                </div>
            </center>
        </td>

    </tr>
    <tr>
        <td class="align-content-center align-middle">
            “I am trusting Person B by choosing A2.”
        </td>
        <td class="align-content-center align-middle align-middle">
            <center>
                <div class="radio-label-vertical-wrapper">
                    <div class="form-group">
                        <label class="radio-label-vertical">
                            <input type="radio" name="gameB_T1T2_3" value="1" required>1</label>
                        <label class="radio-label-vertical">
                            <input type="radio" name="gameB_T1T2_3" value="2" required>2</label>
                        <label class="radio-label-vertical">
                            <input type="radio" name="gameB_T1T2_3" value="3" required>3</label>
                        <label class="radio-label-vertical">
                            <input type="radio" name="gameB_T1T2_3" value="4" required>4</label>
                        <label class="radio-label-vertical">
                            <input type="radio" name="gameB_T1T2_3" value="5" required>5</label>
                    </div>
                </div>
            </center>
        </td>

    </tr>
    <tr>
        <td class="align-content-center align-middle">
            “By choosing A2, I believe I am giving Person B the chance to do the right thing and send me some of her/his
            money”
        </td>
        <td class="align-content-center align-middle align-middle">
            <center>
                <div class="radio-label-vertical-wrapper">
                    <div class="form-group">
                        <label class="radio-label-vertical">
                            <input type="radio" name="gameB_T1T2_4" value="1" required>1</label>
                        <label class="radio-label-vertical">
                            <input type="radio" name="gameB_T1T2_4" value="2" required>2</label>
                        <label class="radio-label-vertical">
                            <input type="radio" name="gameB_T1T2_4" value="3" required>3</label>
                        <label class="radio-label-vertical">
                            <input type="radio" name="gameB_T1T2_4" value="4" required>4</label>
                        <label class="radio-label-vertical">
                            <input type="radio" name="gameB_T1T2_4" value="5" required>5</label>
                    </div>
                </div>
            </center>
        </td>

    </tr>
    <tr>
        <td class="align-content-center align-middle">
            “I don’t care what happens either way.”

        </td>
        <td class="align-content-center align-middle align-middle">
            <center>
                <div class="radio-label-vertical-wrapper">
                    <div class="form-group">
                        <label class="radio-label-vertical">
                            <input type="radio" name="gameB_T1T2_5" value="1" required>1</label>
                        <label class="radio-label-vertical">
                            <input type="radio" name="gameB_T1T2_5" value="2" required>2</label>
                        <label class="radio-label-vertical">
                            <input type="radio" name="gameB_T1T2_5" value="3" required>3</label>
                        <label class="radio-label-vertical">
                            <input type="radio" name="gameB_T1T2_5" value="4" required>4</label>
                        <label class="radio-label-vertical">
                            <input type="radio" name="gameB_T1T2_5" value="5" required>5</label>
                    </div>
                </div>
            </center>
        </td>

    </tr>

</table>

{{endif}}


<p class="card-header">
    Please think back to when you were making your choice in Part 1 of this study. Please rate how much you thought
    about the following things when you were making your choice of what to transfer to Person A (where 1 = did not think
    about this at all & 5 = thought about this a lot):
</p>
<table class="table table-bordered">
    <colgroup>
        <col span="1" style="width: 50%;">
        <col span="1" style="width: 50%;">
    </colgroup>

    <tr>
        <td class="align-content-center align-middle">
            how much I would earn from this study.
        </td>
        <td class="align-content-center align-middle align-middle">
            <label style="width: 100%" class="col-form-label">did not think about at all <span
                    style="float: right">thought about a lot</span>
            </label>

            <center>
                <div class="radio-label-vertical-wrapper">

                    <div class="form-group">
                        <label class="radio-label-vertical">
                            <input type="radio" name="gameB_1" value="1" required>1</label>
                        <label class="radio-label-vertical">
                            <input type="radio" name="gameB_1" value="2" required>2</label>
                        <label class="radio-label-vertical">
                            <input type="radio" name="gameB_1" value="3" required>3</label>
                        <label class="radio-label-vertical">
                            <input type="radio" name="gameB_1" value="4" required>4</label>
                        <label class="radio-label-vertical">
                            <input type="radio" name="gameB_1" value="5" required>5</label>
                    </div>
                </div>
            </center>
        </td>
    </tr>
    <tr>
        <td class="align-content-center align-middle">
            how much Person A would earn from this study.

        </td>
        <td class="align-content-center align-middle align-middle">
            <center>
                <div class="radio-label-vertical-wrapper">
                    <div class="form-group">
                        <label class="radio-label-vertical">
                            <input type="radio" name="gameB_2" value="1" required>1</label>
                        <label class="radio-label-vertical">
                            <input type="radio" name="gameB_2" value="2" required>2</label>
                        <label class="radio-label-vertical">
                            <input type="radio" name="gameB_2" value="3" required>3</label>
                        <label class="radio-label-vertical">
                            <input type="radio" name="gameB_2" value="4" required>4</label>
                        <label class="radio-label-vertical">
                            <input type="radio" name="gameB_2" value="5" required>5</label>
                    </div>
                </div>
            </center>
        </td>

    </tr>
    <tr>
        <td class="align-content-center align-middle">
            {{ if player.treatment == "T1" or player.treatment == "T2"}}
            the position Person A had put herself in by choosing A2.
            {{ else}}
            the position Person A was in if A2 was selected by the computer
            {{endif}}
        </td>
        <td class="align-content-center align-middle align-middle">
            <center>
                <div class="radio-label-vertical-wrapper">
                    <div class="form-group">
                        <label class="radio-label-vertical">
                            <input type="radio" name="gameB_3" value="1" required>1</label>
                        <label class="radio-label-vertical">
                            <input type="radio" name="gameB_3" value="2" required>2</label>
                        <label class="radio-label-vertical">
                            <input type="radio" name="gameB_3" value="3" required>3</label>
                        <label class="radio-label-vertical">
                            <input type="radio" name="gameB_3" value="4" required>4</label>
                        <label class="radio-label-vertical">
                            <input type="radio" name="gameB_3" value="5" required>5</label>
                    </div>
                </div>
            </center>
        </td>

    </tr>
    <tr>
        <td class="align-content-center align-middle">
            whether Person A trusted me.
        </td>
        <td class="align-content-center align-middle align-middle">
            <center>
                <div class="radio-label-vertical-wrapper">
                    <div class="form-group">
                        <label class="radio-label-vertical">
                            <input type="radio" name="gameB_4" value="1" required>1</label>
                        <label class="radio-label-vertical">
                            <input type="radio" name="gameB_4" value="2" required>2</label>
                        <label class="radio-label-vertical">
                            <input type="radio" name="gameB_4" value="3" required>3</label>
                        <label class="radio-label-vertical">
                            <input type="radio" name="gameB_4" value="4" required>4</label>
                        <label class="radio-label-vertical">
                            <input type="radio" name="gameB_4" value="5" required>5</label>
                    </div>
                </div>
            </center>
        </td>
    </tr>
    <tr>
        <td class="align-content-center align-middle">
            how much Person A would expect me to transfer.

        </td>
        <td class="align-content-center align-middle align-middle">
            <center>
                <div class="radio-label-vertical-wrapper">
                    <div class="form-group">
                        <label class="radio-label-vertical">
                            <input type="radio" name="gameB_5" value="1" required>1</label>
                        <label class="radio-label-vertical">
                            <input type="radio" name="gameB_5" value="2" required>2</label>
                        <label class="radio-label-vertical">
                            <input type="radio" name="gameB_5" value="3" required>3</label>
                        <label class="radio-label-vertical">
                            <input type="radio" name="gameB_5" value="4" required>4</label>
                        <label class="radio-label-vertical">
                            <input type="radio" name="gameB_5" value="5" required>5</label>
                    </div>
                </div>
            </center>
        </td>
    </tr>
    <tr>
        <td class="align-content-center align-middle">
            how much the researchers might expect me to transfer.
        </td>
        <td class="align-content-center align-middle align-middle">
            <center>
                <div class="radio-label-vertical-wrapper">
                    <div class="form-group">
                        <label class="radio-label-vertical">
                            <input type="radio" name="gameB_6" value="1" required>1</label>
                        <label class="radio-label-vertical">
                            <input type="radio" name="gameB_6" value="2" required>2</label>
                        <label class="radio-label-vertical">
                            <input type="radio" name="gameB_6" value="3" required>3</label>
                        <label class="radio-label-vertical">
                            <input type="radio" name="gameB_6" value="4" required>4</label>
                        <label class="radio-label-vertical">
                            <input type="radio" name="gameB_6" value="5" required>5</label>
                    </div>
                </div>
            </center>
        </td>
    </tr>
    <tr>
        <td class="align-content-center align-middle">
            the fact that Person A had CZK 250 less than I did.
        </td>
        <td class="align-content-center align-middle align-middle">
            <center>
                <div class="radio-label-vertical-wrapper">
                    <div class="form-group">
                        <label class="radio-label-vertical">
                            <input type="radio" name="gameB_7" value="1" required>1</label>
                        <label class="radio-label-vertical">
                            <input type="radio" name="gameB_7" value="2" required>2</label>
                        <label class="radio-label-vertical">
                            <input type="radio" name="gameB_7" value="3" required>3</label>
                        <label class="radio-label-vertical">
                            <input type="radio" name="gameB_7" value="4" required>4</label>
                        <label class="radio-label-vertical">
                            <input type="radio" name="gameB_7" value="5" required>5</label>
                    </div>
                </div>
            </center>
        </td>
    </tr>
</table>


<p class="card-header">
    Please rate how well you understood the instructions in Part 1 and Part 2 on scale of 1 to 5 (1 = did not understand
    at all & 5 = understood it fine)
</p>
<table class="table table-bordered">
    <tr>
        <td class="align-content-center align-middle">
            Part 1 (choices)
        </td>
        <td class="align-content-center align-middle align-middle">
            <label style="width: 100%" class="col-form-label">did not understand
                at all<span style="float: right">understood it fine</span>
            </label>
            <center>
                <div class="radio-label-vertical-wrapper">
                    <div class="form-group">
                        <label class="radio-label-vertical">
                            <input type="radio" name="both_understanding1" value="1" required>1</label>
                        <label class="radio-label-vertical">
                            <input type="radio" name="both_understanding1" value="2" required>2</label>
                        <label class="radio-label-vertical">
                            <input type="radio" name="both_understanding1" value="3" required>3</label>
                        <label class="radio-label-vertical">
                            <input type="radio" name="both_understanding1" value="4" required>4</label>
                        <label class="radio-label-vertical">
                            <input type="radio" name="both_understanding1" value="5" required>5</label>
                    </div>
                </div>
            </center>
        </td>
    </tr>
    <tr>
        <td class="align-content-center align-middle">
            Part 2 (predictions)
        </td>
        <td class="align-content-center align-middle align-middle">
            <center>
                <div class="radio-label-vertical-wrapper">
                    <div class="form-group">
                        <label class="radio-label-vertical">
                            <input type="radio" name="both_understanding2" value="1" required>1</label>
                        <label class="radio-label-vertical">
                            <input type="radio" name="both_understanding2" value="2" required>2</label>
                        <label class="radio-label-vertical">
                            <input type="radio" name="both_understanding2" value="3" required>3</label>
                        <label class="radio-label-vertical">
                            <input type="radio" name="both_understanding2" value="4" required>4</label>
                        <label class="radio-label-vertical">
                            <input type="radio" name="both_understanding2" value="5" required>5</label>
                    </div>
                </div>
            </center>
        </td>

    </tr>
</table>


<div class="float-end row">
    <button class="otree-btn-next btn btn-primary btn-danger">Next</button>
</div>

{{ endblock }}