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

{% block title %}
    Additional Questions III/III
{% endblock %}

{% block content %}


Please think about what you would do in the following situation:<br>
You are in an area you are not familiar with, and you realize
that you lost your way. You ask a stranger for directions. The stranger offers to take you to your destination.<br>
Helping you costs the stranger about 20 {{C.currency_name}} in total. However, the stranger says he or she does not want any money from
you. You have six presents with you. The cheapest present costs 5 {{C.currency_name}}, the most expensive one costs 30 {{C.currency_name}}.

<div class="mb-3 _formfield">
        <label class="col-form-label" for="id_WP13458">Do you give one of the presents to the stranger as a “thank you” gift?</label>
        <div class="controls">
            <div id="id_WP13458" required=""><div class="form-check"><input class="form-check-input" type="radio" id="id_WP13458-0" onclick="showdiv()" name="WP13458" required="" value="Yes"> <label for="id_WP13458-0">Yes</label></div><div class="form-check"><input class="form-check-input" type="radio" id="id_WP13458-1" onclick="hidediv()" name="WP13458" required="" value="No"> <label for="id_WP13458-1">No</label></div></div>
        </div>
</div>

<div id="WP13458_yes" style="display: none">
    <div class="mb-3 _formfield">

        <label class="col-form-label" for="id_WP13458_yes">Which present do you give to the stranger?</label>
        <div class="controls">
            <div id="id_WP13458_yes" required=""><div class="form-check"><input class="form-check-input" type="radio" id="id_WP13458_yes-0" name="WP13458_yes" required="" value="The present worth 5 GBP"> <label for="id_WP13458_yes-0">The present worth 5 GBP</label></div><div class="form-check"><input class="form-check-input" type="radio" id="id_WP13458_yes-1" name="WP13458_yes" required="" value="The present worth 10 GBP"> <label for="id_WP13458_yes-1">The present worth 10 GBP</label></div><div class="form-check"><input class="form-check-input" type="radio" id="id_WP13458_yes-2" name="WP13458_yes" required="" value="The present worth 15 GBP"> <label for="id_WP13458_yes-2">The present worth 15 GBP</label></div><div class="form-check"><input class="form-check-input" type="radio" id="id_WP13458_yes-3" name="WP13458_yes" required="" value="The present worth 20 GBP"> <label for="id_WP13458_yes-3">The present worth 20 GBP</label></div><div class="form-check"><input class="form-check-input" type="radio" id="id_WP13458_yes-4" name="WP13458_yes" required="" value="The present worth 25 GBP"> <label for="id_WP13458_yes-4">The present worth 25 GBP</label></div><div class="form-check"><input class="form-check-input" type="radio" id="id_WP13458_yes-5" name="WP13458_yes" required="" value="The present worth 30 GBP"> <label for="id_WP13458_yes-5">The present worth 30 GBP</label></div><div class="form-check"><input class="form-check-input" type="radio" id="id_WP13458_yes-6" style="display: none" checked="checked" name="WP13458_yes" required="" value="No present"> <label for="id_WP13458_yes-6"></label></div></div>
        </div>
    </div>
</div>
{{formfield "WP13459"}}
<script>
    function showdiv() {
        var id_WP13458_0 = document.getElementById("id_WP13458-0")
        var checked = document.getElementById("WP13458_yes")
        checked.style.display = id_WP13458_0.checked ? "block": "none";
    }

    function hidediv(){
        var id_WP13458_1 = document.getElementById("id_WP13458-1")
        var checked = document.getElementById("WP13458_yes")
        checked.style.display = id_WP13458_1.checked ? "none": "block";
    }
</script>

    {% next_button %}


{% endblock %}