{% extends "_templates/global/Page.html" %}
{% load otree %}

{{ block title }}
Somewhat trickier
{{ endblock }}
{{ block content }}

<input type="hidden" id="binary_choice_list_choose_risky" name="binary_choice_list_choose_risky" value="-9999"></input>

<div id="root"></div>

<!-- Load React -->
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<!-- Load Babel -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

<!-- Load ChoiceList Component -->
<script type="text/babel" src="{{ static 'global/choice_list.js'}}"></script>



<script type="text/babel">
    class WrapperPage extends React.Component {
        render() {
            return (
                <div>
                    <p>
                        Please tell us your preferences below.
                        </p>
                    <ChoiceList prob_up={js_vars.prob_up} pay_up={js_vars.pay_up} pay_down={js_vars.pay_down} initialListItems={js_vars.lables_choice_list.length} listLabels={js_vars.lables_choice_list} deactivated={false} />
                </div>
            )
        }
    }



    ReactDOM.render(<WrapperPage />, document.getElementById('root'));


</script>


{{ next_button }}

{{ endblock }}