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

{{ block title }}
A simple choice?
{{ endblock }}
{{ block content }}

<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_simple.js'}}"></script>

<script type="text/babel">
    class WrapperPage extends React.Component {
        render() {
            return (
                <div>
                    <p>
                        Please tell us which of the two options below you prefer.
                        </p>
                    <ChoiceSimple prob_up={js_vars.prob_up} pay_up={js_vars.pay_up} pay_down={js_vars.pay_down} pay_certain={js_vars.pay_certain} />
                </div>
            )
        }
    }


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


</script>

{{ formfields }}



{{ next_button }}

{{ endblock }}