{{ block title }}Comprehension{{ endblock }} {{ block content }}

<p>
    In what follows we ask you some comprehension question. The answer to these questions will not matter for your
    payment.
</p>

<p>Suppose you are in system <b><em>A</em></b>, you and other <em>5</em> Type-1 subject <b><em>invest</em></b>.</p>

<ul>
    <li>
        What is your payoff? {{ form.q1_rob }}
    </li>
    <li>
        What is the Type-2 payoff? {{ form.q2_rob }}
    </li>
</ul>
<p>Suppose you are in system <b><em>B</em></b>, you <b><em>don't invest</em></b> and other <em>6</em> Type-1 subject <b><em>invest</em></b>.</p>
<ul>
    <li>
        What is your payoff? {{ form.q3_rob }}
    </li>
    <li>
        What is the Type-2 payoff? {{ form.q4_rob }}
    </li>
</ul>

<style>
    .mgslider-wrapper {
        border-spacing: 10px;
    }

    .mgslider-limit {
        width: 10%;
        min-width: 75px;
        height: 40px;
        margin: 100px;
        text-align: center;
        background: #eee;
        border: 1px solid #888;
    }

    .mgslider-limit,
    .mgslider-value,
    .mgslider-value2 {
        /* Add .mgslider-value2 here */
        font-variant-numeric: tabular-nums;
    }

    .mgslider-before {
        height: 16px;
        width: 100%;
        background: #1e5bff;
    }


    .mgslider-feedback,
    .mgslider-feedback2 {
        -webkit-user-select: none;
        -ms-user-select: none;
        user-select: none;
        text-align: center;
    }

    .mgslider-aboveSlider {
        text-align: center;
        font-size: 16px;
        padding-bottom: 10px;
        /* Space below the text */
    }
</style>


{{ formfield_errors 'slider1' }}
{{ formfield_errors 'slider2' }}
{{ formfield_errors 'slider3' }}
{{ formfield_errors 'slider4' }}

<p>There are sliders here helping you to make your choice. The point in the slider indicates the number of other Type-1
    subjects investing. You can move it to understand what the payoff are of all the subjects involved when different
    numbers of other Type-1 invest. Click the blue bars to reveal the sliders.</p>

<br>
<br>

<p>Under the low tax rate in system <b><i>A</i></b>, if you <b>invest</b> payoffs are as follows.</p>

<div id="slider_A_inv"></div>


<!-- Include jQuery if it's not already included -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- Your JavaScript code -->
<script>
    var mgsliders = Array();

    mgsliders.lookup = function (which) {
        for (var j = 0; j < mgsliders.length; j++) {
            if (mgsliders[j].field == which) {
                return mgsliders[j].obj;
            }
        }

        return undefined;
    };

    function mgslider(field, min, max, step, baserich, basepoor, tax) {
        this.field = field;
        this.min = parseFloat(min);
        this.max = parseFloat(max);
        this.step = parseFloat(step);
        this.digits = this.suggest_digits(step);
        this.hook = function (slider, value) { };

        this.prefix = "mgslider_3";
        this.richnumber = "If the number of Type-1 subjects investing is";
        this.yourpay = "Your payoff is";
        this.poorpay = "The payoff of a Type-2 subject is";
        this.richpay = "The payoff of a Type-1 subject is";
        this.baserich = parseFloat(baserich);
        this.basepoor = parseFloat(basepoor);
        this.tax = parseFloat(tax);

        mgsliders.push({ field: field, obj: this });
    }

    mgslider.prototype.fzero = function (s) {
        for (var c = s.length - 1; c >= 0; c--) {
            if (s[c] != "0") {
                return c;
            }
        }

        return 0;
    };

    mgslider.prototype.suggest_digits = function (x) {
        x = x.toFixed(10);
        return this.fzero(x) - x.search(/\./);
    };

    mgslider.prototype.f2s = function (val, detect, digits) {
        if (digits) {
            return val.toFixed(digits).replace("-", "&ndash;");
        }
        else if (detect) {
            return val.toFixed(this.suggest_digits(val)).replace("-", "&ndash;");
        }
        else {
            return val.toFixed(this.digits).replace("-", "&ndash;");
        }
    };

    mgslider.prototype.id = function (id_) {
        if (id_ === undefined) {
            id_ = "";
        }

        return this.prefix + "_" + this.field + "_" + id_;
    };

    mgslider.prototype.markup = function () {
        return "\
        <table id='" + this.id("wrapper") + "' class='mgslider-wrapper' border='0'>\
            <tr>\
            <td id='" + this.id("aboveSlider") + "' colspan='3' class='mgslider-aboveSlider'>" + this.richnumber + ": <b><span id='" + this.id("aboveValue") + "' class='mgslider-aboveValue'></span></b>\
        </td>\
    </tr>\
    <tr>\
                <td class='mgslider-limit'>" + this.f2s(this.min, true) + "</td>\
                <td width='90%'>\
                    <div id='" + this.id("before") + "' class='mgslider-before' onclick='mgsliders.lookup(\"" + this.field + "\").reveal(event)'></div>\
                    <input type='range' id='" + this.id() + "' min='" + this.min + "' max='" + this.max + "' step='" + this.step + "' value='' class='mgslider form-range' oninput='mgsliders.lookup(\"" + this.field + "\").change()' onchange='mgsliders.lookup(\"" + this.field + "\").change()'>\
                </td>\
                <td class='mgslider-limit'>" + this.f2s(this.max, true) + "</td>\
                <tr class='mgslider-feedback'>\
                <td id='" + this.id("show") + "' class='mgslider-show' colspan='2'>" + this.yourpay + ": <b><span id='" + this.id("cur") + "' class='mgslider-value'></span></b></td>\
            </tr>\
            <tr class='mgslider-feedback2'>\
                <td id='" + this.id("show2") + "' class='mgslider-show2' colspan='2'>" + this.poorpay + ": <b><span id='" + this.id("cur2") + "' class='mgslider-value2'></span></b></td>\
            </tr>\
        </table>\
        \
        <input type='hidden' id='" + this.id("input") + "' name='" + this.field + "' value='' />";
    };

    mgslider.prototype.hide = function () {
        document.getElementById(this.id()).style.display = "none";
        document.getElementById(this.id("show")).style.visibility = "hidden";
        document.getElementById(this.id("show2")).style.visibility = "hidden";
        document.getElementById(this.id("show")).style.textAlign = "center";
        document.getElementById(this.id("before")).style.display = "block";
    };

    mgslider.prototype.print = function (el) {
        el.innerHTML += this.markup();
        this.hide();
    };

    mgslider.prototype.value = function () {
        return parseFloat(document.getElementById(this.id()).value);
    };

    mgslider.prototype.change = function (target, omit_hook) {
        if (typeof target === "undefined") {
            var value = this.value();
        }
        else {
            var value = target;

            document.getElementById(this.id()).value = value;
        }

        document.getElementById(this.id("cur")).innerHTML = this.f2s(this.baserich + value * this.tax, false);
        document.getElementById(this.id("cur2")).innerHTML = this.f2s(this.basepoor + value * this.tax, false);
        document.getElementById(this.id("input")).value = value;
        document.getElementById(this.id("aboveValue")).innerHTML = this.f2s(value, false);


        if (omit_hook !== true) {
            return this.hook(this, value);
        }
    };

    mgslider.prototype.reveal = function (event) {
        var now;

        if (event !== undefined && typeof event.offsetX !== undefined) {
            var max = parseInt(getComputedStyle(document.getElementById(this.id("before"))).width.replace("px", ""));
            var cur = event.offsetX;

            now = (cur / max) * (this.max - this.min) + this.min;
        }
        else {
            now = this.min + Math.random() * (this.max - this.min);
        }

        now = Math.round(now / this.step) * this.step;

        document.getElementById(this.id()).style.display = "block";
        document.getElementById(this.id("before")).style.display = "none";
        document.getElementById(this.id("show")).style.visibility = "visible";
        document.getElementById(this.id("show2")).style.visibility = "visible";
        document.getElementById(this.id("show3")).style.visibility = "visible"; // Add this line
        document.getElementById(this.id("show4")).style.visibility = "visible"; // Add this line

        document.getElementById(this.id()).value = now;
        this.change();
    };

    $(document).ready(function (event) {
        var slider1 = new mgslider("slider1", 0, 9, 1, 143, 3, 3);
        slider1.print(document.getElementById("slider_A_inv"));
    });

    $(document).ready(function (event) {
        var slider2 = new mgslider("slider2", 0, 9, 1, 100, 0, 3);
        slider2.print(document.getElementById("slider_A_notinv"));
    });

    $(document).ready(function (event) {
        var slider3 = new mgslider("slider3", 0, 9, 1, 80, 6, 6);
        slider3.print(document.getElementById("slider_B_inv"));
    });

    $(document).ready(function (event) {
        var slider4 = new mgslider("slider4", 0, 9, 1, 100, 0, 6);
        slider4.print(document.getElementById("slider_B_notinv"));
    });
</script>

<br>
<hr>
<br>

<p>Under the low tax rate in system <b><i>A</i></b>, if you <b>don't invest</b> payoffs are as follows.</p>

<div id="slider_A_notinv"></div>

<br>
<hr>
<br>

<p>Under the high tax rate in system <b><i>B</i></b>, if you <b>invest</b> payoffs are as follows.</p>

<div id="slider_B_inv"></div>

<br>
<hr>
<br>

<p>Under the high tax rate in system <b><i>B</i></b>, if you <b>don't invest</b> payoffs are as follows.</p>

<div id="slider_B_notinv"></div>


{{ next_button }} {{ endblock }}