Retrieve variables from "slider" html

[Chi Trieu]

Dear all, 

I have a task as in the following picture:

The slider format is done in html (codes below), and I am trying to carry variables for the shared token (78 Token for Person A, 22 Token for Person B), and the respective money (78 dollars and 11 dollar) into the "player" table. I would appreciate any suggestions!

Thanks and best

Chi

---------

html code

{% block title %}

 Questionnaire 

{% endblock %}

{% block content %}

        <p>

            Now imagine you are in the following hypothetical situation:

            You are asked to divide 100 tokens between two people. For every token you assign to Person A, they receive 10 Cents. For every token you assign to Person B, they receive 5 Cents.

            How would you like to divide the tokens between them?

        </p>

        <div class="input-group">

            <span class="input-group-text">Person A</span>

            

            <input class="slider" type="range" name="position" id="positionID" value="50" min="1" max="100" 

            oninput="valueID.value = positionID.value;">

            <span class="input-group-text">Person B</span>

        </div>

        <div class="outputs"> 

            <div class="tokens"> 

                <span>

                    <output class="tokens-person-1" name="valueName" id="valueTokenA">10</output> <span>Token</span>

                </span> 

                <span>

                    <output class="tokens-person-2" name="valueName" id="valueTokenB">10</output> <span>Token</span>

                </span> 

            </div>

            <div class="money">

                <span>

                    <output class="money-person-1" name="valueName" id="valueID">10</output> <span>$</span>

                </span> 

                <span>

                    <output class="money-person-2" name="valueName" id="valueB">10</output> <span>$</span>

                </span> 

            </div>

        </div>

            

            <script>

                let e = document.getElementById("valueB")

                

            var valueA = valueID.value

            let tokenA = document.getElementById("valueTokenA")

            let tokenB = document.getElementById("valueTokenB")

            

            e.value = 100 - parseInt(valueA)

            tokenA.value = valueA

            tokenB.value = 100 - parseInt(valueA)

            let slider = document.querySelectorAll("input[name=position]")

            slider[0].addEventListener("change", function(event) { 

                var valueA = valueID.value

                tokenA.value = valueA

                tokenB.value = 100 - parseInt(valueA)

                e.value = (100 - parseInt(valueA))/2

            });

        </script>

        <style>

            .slider{

                width: 200px;

            }

            .outputs{

                margin-top: 10px;

                margin-bottom: 30px;

            }

            .tokens{

                margin-top: 10px;

            }

            .money{

                margin-top: 10px;

            }

            .money-person-1{

                padding-left: 25px;

            }

            .money-person-2{

                padding-left: 260px;

            }

            .tokens-person-1{

                padding-left: 15px;

            }

            .tokens-person-2{

                padding-left: 220px;

            }

        </style>

    {% next_button %}

{% endblock %}

[Chris @ oTree]

In the end it might be simpler to just calculate those values in your python code, based on the value of the 'position' field.

[dklin...@gmail.com]

Hi,

I wanted to follow up on this question, since I'm facing a similar one. Was there a way to carry the variables (e.g., tokens for Person A and Person B) into the "player" table? 

Or, could someone please explain in more detail how those values would be calculated in the python code based on the value of the 'position' field?

Thank you for your help,