javascript/python/otree: Slider Input Check AttributeError

Question

I have been using the code by Vincent van Pelt https://www.accountingexperiments.com/post/sliders/ to implement a slider in my otree experiment and it works nicely besides that if I try to follow his tutorial on the slider input check, I always get the following error: "AttributeError: type object 'Player' has no attribute 'check_keep'".

Here is the template/html and javascript code:

{{ block content }}
<input type="hidden" name="check_keep" value="" id="id_check_keep"/>

<p id="feedback_one"><br></p>

<input type="range" name="keep" value="None" step="1" style="width:500px" min="0" max="10" id="id_keep" class="form-control">

<script>
    $(document).ready(function () {
        $('input[name=keep]').on('input change', function () {
            $('input[name=keep]').addClass('myclass');
        });
        $('input[name=keep]').on('input', function() {
            document.getElementById("feedback_one").innerHTML = `You keep €`+$(this).val()+' for yourself.' + ' The other participant thus receives €' + (10 - ($(this).val())) + '.';
            $('#check_keep').val(1);

        });
    });
</script>

<style>
       .myclass::-webkit-slider-thumb {
        box-shadow: 1px 1px 1px #000000, 0px 0px 1px #007afe;
        border: 1px solid #000000;
        height: 21px !important;
        width: 10px !important;
        border-radius: 0px !important;
        background: #ffffff !important;
        cursor: pointer !important !important;
        -webkit-appearance: none !important;
        margin-top: -7px !important;
    }

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

    input[name=keep]:focus {
        outline: none;
    }

    input[name=keep]::-webkit-slider-runnable-track {
        width: 100%;
        height: 8.4px;
        cursor: pointer;
        animate: 0.2s;
        {#box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;#}
        background: #007afe;
        border-radius: 0px;
        border: 0.0px solid #ffffff;
    }

    input[name=keep]::-webkit-slider-thumb {
        border: 0px;
        height: 0px;
        width: 0px;
        border-radius: 0px;
        -webkit-appearance: none;
    }
</style>

<br><br>
{{ next_button }}

{{ endblock }}

And here is the relevant init.py code:

class Player(BasePlayer):
    keep = models.CurrencyField(choices=[[0, '€0'], [1, '€1'], [2, '€2'], [3, '€3'], [4, '€4'], [5, '€5'], [6, '€6'], [7, '€7'], [8, '€8'], [9, '€9'], [10, '€10']], doc='Amount dictator decided to keep for himself', label='How much of your €10 endowment do you want to keep for yourself?', max=C.ENDOWMENT, min=0)

class Offer(Page):
    form_model = "player"
    form_fields = ["keep", "check_keep"]

    def error_message(player: Player, value):
        if value["check_keep"] == None:
            return 'Please choose an allocation.'

I understand that I have not defined check_keep in the Player class, but I did not find this in the tutorial as well, and trying to define it as one of the following (separately) in the Player class also did not work:

check_keep = models.IntegerField()

check_keep = models.BooleanField()

check_keep = models.IntegerField(blank=True)

Would be very thankful for any help!

javascript/python/otree: Slider Input Check AttributeError

0 Answers0