{% extends "survey/Instrument.html" %}
{% load otree static %}

{% block title %}
    Scenario
{% endblock %}

{% block content %}
<div class="card bg-light">
    <div class="card-body">
        <input type="hidden" name="reason" id="id_reason" value=""/>
        <p align="left">
            <b>Directions: </b>Briefly explain your decision to
            {% if player.endorse %}
               <b>endorse</b>
            {% else %}
               <b>not endorse</b>
            {% endif %}
            the cabinet's suggestion to launch a cyber operation against the Internet Development Institute (IDI) in
            <b>complete and grammatically correct</b> sentences <b>in English</b>.
        </p>
        <br/>
        <center>
            <textarea id="id_reason_text" rows="6" cols="80"></textarea>
        </center>
        <br/>
        <p align="right">
            <button type="button" onclick="process()">Next Page</button>
        </p>
    </div>
</div>

{% endblock %}

{% block scripts %}
    <script>
        function process(){
            reason_text = document.getElementById("id_reason_text").value
            if(reason_text.length > 0){
                document.getElementById("id_reason").value = reason_text
                document.getElementById("form").submit()
            }else{
                alert("Please answer the above questions")
            }
        }
    </script>
{% endblock %}