{% load otree static %}

 <div class="info_box">
     <div class="header">
         <p class="formatting_header">
             Information:
         </p>
     </div>
     <div class="content">
         <p class="formatting_content">
                Your task in Part 2 is to evaluate how socially appropriate it is to put 0, 5, 10, 15, or 20 balls
                    into the blue bucket while placing the remaining balls into the yellow bucket.
                In your judgment, you can rate any behavior on a scale that ranges from “Very socially inappropriate”
                    to “Very socially appropriate”.
                Hereby, “Very socially inappropriate” indicates that the behavior is inconsistent with what most
                    people expect an Individual ought to do, whereas “Very socially appropriate” indicates that
                    the behavior was consistent with what most people expect an Individual ought to do.
                To further support you in your decision:  A behavior might be considered as socially appropriate if
                    most people agree that it is the “proper” thing to do, whereas a behavior might be considered as
                    socially inappropriate if people might get angry if they observe a person doing it.
                You can find screenshots of your task and of your possible answers in the box below.
         </p>
         <p class="formatting_content">
             <b> You will be able to reopen these instructions when you make your final decisions! </b>
         </p>
     </div>
 </div>
 <div class="task_box" style="background-color: #f7f7fa">
      <div style="background: black; border: solid 1px black ; border-radius: 5px 5px 0 0;">
          <p style="font-weight:bold; color: white; margin: 5px auto 5px 25px;">
              Screenshots of your upcoming task:
          </p>
      </div>
      <div style="margin: 4% 2% 4% 2%;">
          <img id ="close_ratings" style="width: 100%" src="{% static 'NE/closed_ratings.png' %}"  onload="loadImage()">
       </div>
      <div style="margin: 4% 2% 4% 2%;">
          <img id = "open_ratings" style="width: 100%" src="{% static 'NE/open_ratings.png' %}"  onload="loadImage()">
       </div>
   </div>