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

{% block title %}Stufe 2{% endblock %}

{% block content %}

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

{% if player.previous_count_v == -1 %}
<div id="maincontent" style="display:none">
<script type="text/javascript">
setTimeout(function() {
  // Code, der erst nach 2 Sekunden ausgeführt wird
  document.getElementById("maincontent").style.display = "block";
}, 4000);
</script>
{% endif %}
{% if subsession.round_number > 1 %}
  {% if solved %}
    <p>Sie haben die letzte Aufgabe korrekt gelöst. Damit hat sich Ihre Auszahlung um {{ payrate }} erhöht.</p>
  {% else %}
    <p>Sie haben die letzte Aufgabe nicht korrekt gelöst.</p> 
  {% endif %}
  <!-- <p>Anzahl des Buchstaben k: {{ player.previous_amount_v }}</p> 
  <p>Ihre Antwort: {{ player.previous_count_v }}</p> -->
{% endif %}
<script type="text/javascript">
var sent = false;
</script>
<p>Ihre Auszahlung (ohne Teilnahmepauschale) beträgt aktuell: {{ participant.payoff }}</p>

{% if treatment %}
    Auf Grundlage von Vorversuchen ist davon auszugehen, dass ungefähr die nachfolgend gezeigten Verdienste (ohne Teilnahmepauschale) in einer Gruppe mit 6 Personen erreicht werden. Ihre Auszahlung wird vergleichend angezeigt.
    <iframe  seamless="seamless" scrolling="no" frameBorder="0" src="https://www.plurale-oekonomik.de/ee/test.html?p={{ payoffstr }}" 
width="940px" height="120px" name="payout" style="overflow:hidden;">
    </iframe>
{% else %}
    Nachfolgend sehen Sie eine Visualisierung Ihrer Auszahlung (ohne Teilnahmepauschale).
    <iframe  seamless="seamless" scrolling="no" frameBorder="0" src="https://www.plurale-oekonomik.de/ee/test_c.html?p={{ payoffstr }}" 
width="940px" height="120px" name="payout" style="overflow:hidden;">
    </iframe>
{% endif %}
<hr>
    
<p>Zählen Sie, wie oft der Buchstabe "k" in dem Text vorkommt.</p>
<p stlye="float:left; width:350px"><img src="{{ img }}"></p>

<div class="form-group" id="count_wrapper">
    <label class="col-form-label" for="id_count_v">Anzahl des Buchstabens "k":</label>
    <div class="field-count_v">
        <input name="count_v" id="id_count_v">
    </div>
</div>

<input name="stop_button_active" id="id_stop_button_active" type="hidden" value="False">
    
<!-- Display the countdown timer in an element -->
<p id="demo"></p>
<p>
    <!-- .otree-btn-next is the CSS/jQuery selector for this button -->
    

    <button type="button" id=einreichen style="float:left" class="otree-btn-next btn btn-primary" onClick="document.getElementById('einreichen').disabled = true; document.getElementById('count_wrapper').style.display = 'none'; document.getElementById('einreichen').innerHTML = 'Ihre Antwort wurde abgesendet.'; sent = true;">Antwort absenden</button>
    
    <button id=next class="otree-btn-next btn btn-primary" style="display: none;" disabled></button>

<script>
// Set the 30 seconds
var distance = 60000
var seconds = 60

// Update the count down every 1 second
var x = setInterval(function() {

  // Time calculations for seconds
  //var seconds = Math.floor((distance % (1000 * 60)) / 1000);
  var seconds = distance / 1000;

  // Display the result in the element with id="demo"
  if (sent) {
    document.getElementById("demo").innerHTML = "Bitte warten Sie <strong>" + seconds + " Sekunden</strong>, bis Sie zur nächsten Aufgabe weitergeleitet werden.";
  } else {
  document.getElementById("demo").innerHTML = "Sie haben noch <strong>" + seconds + " Sekunden</strong> um Ihre Antwort einzureichen.";
  }
    
  distance -= 1000

  // If the count down is finished, write some text
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "";
    document.getElementById('count_wrapper').style.display = 'none'; 
    if (isNaN(document.getElementById("id_count_v").value)) {
        document.getElementById("id_count_v").value = "999";
    }
    document.getElementById('next').disabled = false;
    document.getElementById("next").click();
  }
    

}, 1000);
</script>

    
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" style="float:right" onClick="document.getElementById('id_stop_button_active').value = 'True';">
  Stop
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Möchten Sie keine weiteren Aufgaben mehr lösen?</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Wenn Sie auf Ja klicken, werden Sie direkt zum abschließenden Fragebogen weitergeleitet.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Nein, zurück zur Aufgabe</button>
        <button name="stop_button" value="True" class="btn btn-primary" onClick="document.getElementsByName('count_v')[0].value=-1;">Ja, keine weiteren Aufgaben</button>
      </div>
    </div>
  </div>
</div>
</p>
{% if player.previous_count_v == -1 %}
</div>
<div id="redirect" style="display:block">
<script type="text/javascript">
setTimeout(function() {
  // Code, der erst nach 2 Sekunden ausgeführt wird
  document.getElementById("redirect").style.display = "none";
}, 4000);
</script>
Bitte warten, Sie werden automatisch weitergeleitet.
</div>
{% endif %}

<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 %}