{% extends "global/Page.html" %}
{% load staticfiles otree_tags %}

{% block title %}
    Role assignment
{% endblock %}

{% block content %}

<script>
    function sayReady() {
      let msg = new SpeechSynthesisUtterance();
      // or: de-DE, zh-CN, ja-JP, es-MX, etc.
      msg.language = 'en-US';
      // actually better to use js_vars than double-braces
      msg.text = "Partner found for interactive study";
      window.speechSynthesis.speak(msg);
    }
      sayReady();
  </script>

<p>We will now start the {{C.NUM_ROUNDS}} periods. You have been randomly assigned the role of:</p>

<div class="row">
<div class="col-sm-2">
<pre>
   <b>{{participant.vars.role}}</b>
</pre>
    </div>
</div>

<p>Remember:</p>
{% include C.TEMPLATE_RECAP %}

 {% next_button %}

{% endblock %}


{% block scripts %}

    <!-- define a script -->
    <script>
     
          $('.otree-timer').hide();
          $(function () {
          $('.otree-timer__time-left').on('update.countdown', function (event) {
            if (event.offset.totalSeconds === 30) {
           
                $('.otree-timer').show();
            }
        });
    });

    

      


    </script>
{% endblock %}