{% extends "giftExchangeSurveyFinal/Popup.html" %}
{% load static otree %}


{% block content %}


    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Trigger/Open The Modal -->
    <button class="fixed-top" id="myBtn" type="button" style="align-self:right;">Taschenrechner</button>

    <!-- The Modal -->
    <div id="myModal" class="modal">

    <!-- Modal content -->
    <div class="modal-content">
        <div><span class="close">&times;</span> <h4>Taschenrechner</h4></div>
        <p><table>
            <tr>
               <td colspan="4">
                  <input type="text" name="display" id="display" disabled>
               </td>
            </tr>
            <tr>
               <td><input type="button" name="one" value="1" onclick="display.value += '1'"></td>
               <td><input type="button" name="two" value="2" onclick="display.value += '2'"></td>
               <td><input type="button" name="three" value="3" onclick="display.value += '3'"></td>
               <td><input type="button" class="operator" name="plus" value="+" onclick="display.value += '+'"></td>
            </tr>
            <tr>
               <td><input type="button" name="four" value="4" onclick="display.value += '4'"></td>
               <td><input type="button" name="five" value="5" onclick="display.value += '5'"></td>
               <td><input type="button" name="six" value="6" onclick="display.value += '6'"></td>
               <td><input type="button" class="operator" name="minus" value="-" onclick="display.value += '-'"></td>
            </tr>
            <tr>
               <td><input type="button" name="seven" value="7" onclick="display.value += '7'"></td>
               <td><input type="button" name="eight" value="8" onclick="display.value += '8'"></td>
               <td><input type="button" name="nine" value="9" onclick="display.value += '9'"></td>
               <td><input type="button" class="operator" name="times" value="x" onclick="display.value += '*'"></td>
            </tr>
            <tr>
               <td><input type="button" name="bracketopen" value="(" onclick="display.value += '('"></td>
               <td><input type="button" name="zero" value="0" onclick="display.value += '0'"></td>
               <td><input type="button" name="bracketclose" value=")" onclick="display.value += ')'"></td>
               <td><input type="button" class="operator" name="div" value="/" onclick="display.value += '/'"></td>
            </tr>
            <tr>
                <td><input type="button" name="comma" value="." onclick="display.value += '.'"></td>
                <td><input type="button" id="clear" name="clear" value="c" onclick="display.value = ''"></td>
                <td><input type="button" name="doit" value="=" onclick="display.value = eval(display.value)"></td>
            </tr>
         </table></p>
    </div>
    </div>

    <h2>Bitte beantworten Sie folgende Fragen</h2>
    <p>
        <b>Der Arbeitgeber hat ein Budget von 120 Talern und macht dem Arbeitnehmer ein Gehaltsangebot von 28 Talern.</b>
    </p>
    <div class="roundBlack">
        <div class="firstLetter">
        <p>
            A.) Der Arbeitnehmer <b>lehnt das Angebot ab</b>. Wie hoch ist das Ergebnis des Arbeitsnehmers?
            Wie hoch des Arbeitgebers?
        </p>
        </div>
        <table class="table table-condensed">
                <tr>
                    <th>{% formfield player.answer2AWorker label='Ergebnis des Arbeitnehmers'%}</th>
                    <th>{% formfield player.answer2ALeader label='Ergebnis des Arbeitgebers'%}</th>
                </tr>
        </table>


    </div>
    <p>

    </p>
    <div class="roundBlack">
        <div class="firstLetter">
        <p>
            B.)  Der Arbeitnehmer <b>nimmt das Angebot an</b> und wählt eine Arbeitsleistung von 6.
            Wie hoch ist das Ergebnis des Arbeitnehmers? Wie hoch ist das Ergebnis des Arbeitgebers?
        </p>
        </div>
        <table class="table table-condensed">
                <tr>
                    <th>{% formfield player.answer2BWorker label='Ergebnis des Arbeitnehmers'%}</th>
                    <th>{% formfield player.answer2BLeader label='Ergebnis des Arbeitgebers'%}</th>
                </tr>
        </table>
    </div>

    <p align="right">{% next_button %}</p>

{% endblock %}