{{ block title }}
Stage 5
{{ endblock }}
{{ block content }}

<p>In this stage, you are in a group of 20 members, all the participants in this session: 10 of you have been randomly
    chosen to be <i>Type-1</i>, the other 10 <i>Type-2</i>. <i>Type-1</i> members have an initial endowment of 100
    points and can choose whether to invest it or not in a project. <i>Type-2</i> members have zero initial endowment
    and so no investment opportunities. The gross return of the investment is 200. However, this return will be taxed,
    and the whole tax collection will be redistributed equally to all (<i>Type-1</i> and <i>Type-2</i>) members. There
    are two alternative economic systems: in system <b><i>A</i></b>, the tax rate is 30%, so that by investing a
    <i>Type-1</i> obtains an after-tax return of 140 points (more than the initial endowment) and generates a tax
    revenue of 3 points for each member; in system <b><i>B</i></b>, the tax rate is 60%, so that by investing a
    <i>Type-1</i> obtains an after-tax return of 80 points (less than the initial endowment) and generates a tax revenue
    of 6 points for each member. In both systems, if a <i>Type-1</i> does not invest, he keeps the initial endowment
    (100 points) and generates no tax collection.
</p>

<p>Note that, if all <i>Type-1</i> members invest in system <b><i>A</i></b> (which increases everyone's payoff), then
    <i>Type-1</i> members are always better off in system <b><i>A</i></b> than in system <b>B</b>, whereas <i>Type-2</i>
    members are strictly better off under system <b>B</b> than under system <b><i>A</i></b> if and only if the majority
    of <i>Type-1</i> members (i.e., at least 6 of them) invest also in system <b>B</b>.
</p>

<p>First, all members vote for their preferred economic system. The system voted by the majority of members will be
    implemented (if both systems receive 10 votes, the system is picked at random). Then, all <i>Type-1</i> members
    decide whether to invest in the selected system.</p>


<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 }}