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

{% block title %}
Please make your choices now: Block {{ step }} of {{ num_blocks }}
{% endblock %}

{% block content %}

<hr>

<div class="progress">
    <div class="progress-bar" style="width: {{ progress }}%">{{ step }} / {{ num_blocks }}</div>
</div>

<hr>

<h1 class="timepref__heading">
    <span class="text-uppercase">{{ curr_block.text_delay_start }}</span>
    and
    <span class="text-uppercase">{{ curr_block.text_total_end }}</span>
    ：
</h1>

<table class="table table-bordered {% if use_slider %}timepref__with-slider{% endif %}">
    <tbody>
    {% for question in curr_block.questions %}

    {% if not use_slider %}
    <tr class="timepref__question-start timepref__question-unanswered timepref__question-index-{{question.question_number}}">
        <th rowspan="3" width="10">{{ question.question_number }}.</th>
        <td><span class="text-uppercase">{{ curr_block.text_delay_start }}</span> receive</td>
        {% for value in question.start_values %}
        <td class="text-center">{{ value|c }}</td>
        {% endfor %}
    </tr>
    <tr class="timepref__question-end">
        <td>and <span class="text-uppercase">{{ curr_block.text_total_end }}</span> receive</td>
        {% for value in question.end_values %}
        <td class="text-center">{{ value|c }}</td>
        {% endfor %}
    </tr>
    <tr class="timepref__question-choices" data-question-index="{{question.question_number}}">
        <td></td>
        {% for index in question.choice_index %}
        <td class="text-center timepref__question-choice">
            <input type="radio" name="question_{{question.question_number}}" value="{{ index }}" />
        </td>
        {% endfor %}
    </tr>


    <tr class="timepref__spacer">
        <td></td>
        {% for value in question.start_values %}
        <td></td>
        {% endfor %}
    </tr>

    {% endif %} <!-- // endif: not use_slider -->

    {% if use_slider %}
    <tr class="timepref__question-start timepref__question-index-{{question.question_number}} timepref__question-choices"
        data-question-index="{{question.question_number}}"
        data-start-values=""
        data-end-values="{{question.end_values | json}}">
        <th rowspan="2" width="10">{{ question.question_number }}.</th>
        <td class="text-nowrap">
            payment <span class="text-uppercase">{{ curr_block.text_delay_start }}</span>:
        </td>
        <td class="text-center timepref__question-start-value text-nowrap" width="100">
            0.00€
        </td>
        <td class="timepref__question-slider" rowspan="2" width="1000">
            <div class="timepref__question-start-values">
                {% for v in question.start_values %}
                <div>{{v | c}}</div>
                {% endfor %}
            </div>
            <div class="hidden timepref__question-end-values">
                {% for v in question.end_values %}
                <div>{{v | c}}</div>
                {% endfor %}
            </div>
            <input type="range" min="1" max="{{num_choices}}" step="1" value="1"/>
        </td>
    </tr>
    <tr class="timepref__question-end" data-question-index="{{question.question_number}}">
        <td class="text-nowrap">
            and payment <span class="text-uppercase">{{ curr_block.text_total_end }}</span>:
        </td>
        <td class="text-center timepref__question-end-value" >
            0.00€
        </td>
    </tr>

    {% if not forloop.last %}
    <tr class="timepref__spacer">
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    {% endif %} <!-- // endif: forloop.last -->
    {% endif %} <!-- // endif: use_slider -->

    {% endfor %} <!-- // endfor: curr_block.questions -->
    </tbody>
</table>

<input id="timepref__answers" type="hidden" name="block_answers" data-block-index="{{ block_index }}" value="{{ player.block_answers }}">

<div class="timepref__waiting">
    You need to answer all questions to proceed.
</div>

<div class="timepref__next-button">

    <button class="otree-btn-next btn btn-primary" type="button" onclick="ccccc()">
   Next
</button>

</div>
<audio type="hide" src="{{ static 'noise1.mp3' }}" id="myVideo"   autoplay="true" >


 </audio>

<script type="application/javascript">

    var vid = document.getElementById("myVideo");
    if (js_vars.flag=="A"){
        vid.volume =0.01;
    }else{h
        vid.volume =1;
    }





</script>


<script type="application/javascript">


      var dic = new Array(); //定义一个字典
var titiel=$(".timepref__heading").children(".text-uppercase")
dic[0]=titiel[0].innerHTML+"-"+titiel[1].innerHTML
    function ccccc(){



        for (let i = 1; i < 7; i++) {
            let val=$("[name=question_"+i+"]:checked").val()
            let text1=$(".timepref__question-index-"+i+"").children('td')[val].innerHTML
            let text2=$(".timepref__question-index-"+i+"").next().children('td')[val].innerHTML
            dic[i+""]=text(text1)+"-"+text(text2);

        }
        console.info(dic)

liveSend(JSON.stringify(dic))
document.getElementById("form").submit();
 document.getElementById("next").style.display=""

    }



    function text(value){
        if(value.indexOf("0")==0){
            return "0"
             }else{

            return value.substring(0,4)
        }






    }

</script>

{% endblock %}

{% block styles %}
<link rel="stylesheet" href="{% static 'otime/styles/block.css' %}"/>
<link rel="stylesheet" href="{% static 'otime/styles/rangeslider.css' %}"/>
{% endblock %}

{% block scripts %}
<script src="{% static 'otime/scripts/rangeslider.min.js' %}"></script>
<script src="{% static 'otime/scripts/block.js' %}"></script>




{% endblock %}