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

{% block title %}Schreiben Sie ein kurzes Essay{% endblock %}

{% block content %}

<div id="uhr" style="position:absolute; top:10px; right:20px; font-weight:bold;"></div>

Bitte schreiben Sie ein kurzes Essay (zwischen 500 und 1000 Zeichen; 1000 Zeichen entsprechen ca. 200 Wörtern) über ein Thema, das für Sie persönlich relevant ist. Sie haben dafür 10 Minuten Zeit.

Die Essays werden automatisch elektronisch ausgewertet. Wenn Ihr Essay zu den besseren 50% gehört, erhalten Sie in der nächsten Stufe {{ Constants.piece_rate_high }} pro korrekt gelöster Aufgabe. Andernfalls erhalten Sie {{ Constants.piece_rate_low }} pro korrekt gelöster Aufgabe.

<div class="wrapper">
<div class="form-group required">
    
        
            <label class="col-form-label" for="id_essay">Essay:</label>
            <div class="controls  field-essay">
                <textarea name="essay" cols="40" rows="10" maxlength="1000" minlength="500" required id="id_essay" class="form-control" data-emoji_font="true" spellcheck="false" style="font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, Symbola, EmojiSymbols !important;" onkeyup="var characterCount = $(this).val().length,
      current = $('#current'),
      maximum = $('#maximum'),
      theCount = $('#the-count');
    
  current.text(characterCount);
 
  
  /*This isn't entirely necessary, just playin around*/
  if (characterCount < 700) {
    current.css('color', '#666');
  }
  if (characterCount > 700 && characterCount < 800) {
    current.css('color', '#6d5555');
  }
  if (characterCount > 800 && characterCount < 850) {
    current.css('color', '#793535');
  }
  if (characterCount > 850 && characterCount < 900) {
    current.css('color', '#841c1c');
  }
  if (characterCount > 850 && characterCount < 950) {
    current.css('color', '#8f0001');
  }
  
  if (characterCount >= 950) {
    maximum.css('color', '#8f0001');
    current.css('color', '#8f0001');
    theCount.css('font-weight','bold');
  } else {
    maximum.css('color','#666');
    theCount.css('font-weight','normal');
  }"></textarea>
                

                
            </div>
        
    
</div>
    <div id="the-count" style="float: right; padding: 0.1rem 0 0 0; font-size: 0.875rem">
    <span id="current">0</span>
    <span id="maximum">/ 1000</span>
  </div>
</div>
{% next_button %}

<script type="text/javascript">
function ticken(){
  var stunden, minuten;
  var StundenZahl, MinutenZahl;
  var heute;
 
  heute = new Date();
  StundenZahl = heute.getHours();
  MinutenZahl = heute.getMinutes();
 
  stunden = StundenZahl+":";
  if (MinutenZahl < 10) {minuten = "0" + MinutenZahl;}
    else {minuten = MinutenZahl;}
  zeit = stunden + minuten + " Uhr";
  uhr.innerHTML = zeit;
 
  window.setTimeout("ticken();", 1000);
}
 
window.onload = ticken;
</script>

{% endblock %}