{{ block title }}
{{ endblock }}

{{ block script }}
<script>
  let trial_dice = 0 
  let saikoro = 0

  // setIntervalを使う方法
function sleep(waitSec, callbackFunc) {

// 経過時間（秒）
var spanedSec = 0;

// 1秒間隔で無名関数を実行
var id = setInterval(function () {

    spanedSec++;

    // 経過時間 >= 待機時間の場合、待機終了。
    if (spanedSec >= waitSec) {

        // タイマー停止
        clearInterval(id);

        // 完了時、コールバック関数を実行
        if (callbackFunc) callbackFunc();
    }
}, 500);

}
  
  function slideshow_timer2(){
    document.getElementById("sainome").src="/static/global/dice.jpg";
    let saikoro = Math.floor(Math.random()*6) +1;
   sleep(1, function () {

    document.getElementById("sainome").src= `/static/global/${saikoro}d.jpg`;
});

trial_dice += 1;
document.getElementById("tri_d_c").value = trial_dice;

    if(trial_dice==1){
      document.getElementById("obsd_1").value = saikoro;
    }
    if(trial_dice==2){
      document.getElementById("obsd_2").value = saikoro;
    }
    if(trial_dice==3){
      document.getElementById("obsd_3").value = saikoro;
    }
    if(trial_dice==4){
      document.getElementById("obsd_4").value = saikoro;
    }
    if(trial_dice==5){
      document.getElementById("obsd_5").value = saikoro;
    }
    if(trial_dice==6){
      document.getElementById("obsd_6").value = saikoro;
    }
    if(trial_dice==7){
      document.getElementById("obsd_7").value = saikoro;
    }

  }

</script>
{{ endblock }}

{{ block content }}
<p>以下の「サイコロを振る」ボタンを押してサイコロを振り、表示された出目を報告するという操作を 5 回繰り返してください。ボタンを押してから出目が表示されるまで最大5秒程度かかる場合がありますので、その場合は少しお待ちください。</p>
<p><b>但し、以下のルールをよく読んだ上で報告してください。</b></p>
<p>ルール：報告された結果に基づいて、<b>(報告された出目の合計)×¥ 1 の追加報酬</b>が支払われます。この報酬は調査への参加に対する謝礼とは別に支払われます。</p>

<button type="button" onclick="slideshow_timer2();">サイコロを振る</button>
    <p><img id ="sainome" src="/static/global/dice.jpg" width="50" height="50"></p>

<form>
    <fieldset>
      <legend></legend>
      <p>1回目</p>
      <div>
        <input type="radio" id="diceChoice1" name="dice1" value="1" />
        <label for="contactChoice1">1</label>
        &nbsp;&nbsp;
        <input type="radio" id="diceChoice1" name="dice1" value="2" />
        <label for="contactChoice2">2</label>
        &nbsp;&nbsp;
        <input type="radio" id="diceChoice1" name="dice1" value="3" />
        <label for="contactChoice3">3</label>
        &nbsp;&nbsp;
        <input type="radio" id="diceChoice1" name="dice1" value="4" />
        <label for="contactChoice4">4</label>
        &nbsp;&nbsp;
        <input type="radio" id="diceChoice1" name="dice1" value="5" />
        <label for="contactChoice5">5</label>
        &nbsp;&nbsp;
        <input type="radio" id="diceChoice1" name="dice1" value="6" />
        <label for="contactChoice6">6</label>

      </div>
      <br>
      <p>2回目</p>
      <div>
        <input type="radio" id="diceChoice2" name="dice2" value="1" />
        <label for="contactChoice1">1</label>
        &nbsp;&nbsp;
        <input type="radio" id="diceChoice2" name="dice2" value="2" />
        <label for="contactChoice2">2</label>
        &nbsp;&nbsp;
        <input type="radio" id="diceChoice2" name="dice2" value="3" />
        <label for="contactChoice3">3</label>
        &nbsp;&nbsp;
        <input type="radio" id="diceChoice2" name="dice2" value="4" />
        <label for="contactChoice4">4</label>
        &nbsp;&nbsp;
        <input type="radio" id="diceChoice2" name="dice2" value="5" />
        <label for="contactChoice5">5</label>
        &nbsp;&nbsp;
        <input type="radio" id="diceChoice2" name="dice2" value="6" />
        <label for="contactChoice6">6</label>
      </div>


      <br>
      <p>3回目</p>
      <div>
        <input type="radio" id="diceChoice3" name="dice3" value="1" />
        <label for="contactChoice1">1</label>
        &nbsp;&nbsp;
        <input type="radio" id="diceChoice3" name="dice3" value="2" />
        <label for="contactChoice2">2</label>
        &nbsp;&nbsp;
        <input type="radio" id="diceChoice3" name="dice3" value="3" />
        <label for="contactChoice3">3</label>
        &nbsp;&nbsp;
        <input type="radio" id="diceChoice3" name="dice3" value="4" />
        <label for="contactChoice4">4</label>
        &nbsp;&nbsp;
        <input type="radio" id="diceChoice3" name="dice3" value="5" />
        <label for="contactChoice5">5</label>
        &nbsp;&nbsp;
        <input type="radio" id="diceChoice3" name="dice3" value="6" />
        <label for="contactChoice6">6</label>
      </div>

      <br>
      <p>4回目</p>
      <div>
        <input type="radio" id="diceChoice4" name="dice4" value="1" />
        <label for="contactChoice1">1</label>
        &nbsp;&nbsp;
        <input type="radio" id="diceChoice4" name="dice4" value="2" />
        <label for="contactChoice2">2</label>
        &nbsp;&nbsp;
        <input type="radio" id="diceChoice4" name="dice4" value="3" />
        <label for="contactChoice3">3</label>
        &nbsp;&nbsp;
        <input type="radio" id="diceChoice4" name="dice4" value="4" />
        <label for="contactChoice4">4</label>
        &nbsp;&nbsp;
        <input type="radio" id="diceChoice4" name="dice4" value="5" />
        <label for="contactChoice5">5</label>
        &nbsp;&nbsp;
        <input type="radio" id="diceChoice4" name="dice4" value="6" />
        <label for="contactChoice6">6</label>
      </div>

      <br>
      <p>5回目</p>
      <div>
        <input type="radio" id="diceChoice5" name="dice5" value="1" />
        <label for="contactChoice1">1</label>
        &nbsp;&nbsp;
        <input type="radio" id="diceChoice5" name="dice5" value="2" />
        <label for="contactChoice2">2</label>
        &nbsp;&nbsp;
        <input type="radio" id="diceChoice5" name="dice5" value="3" />
        <label for="contactChoice3">3</label>
        &nbsp;&nbsp;
        <input type="radio" id="diceChoice5" name="dice5" value="4" />
        <label for="contactChoice4">4</label>
        &nbsp;&nbsp;
        <input type="radio" id="diceChoice5" name="dice5" value="5" />
        <label for="contactChoice5">5</label>
        &nbsp;&nbsp;
        <input type="radio" id="diceChoice5" name="dice5" value="6" />
        <label for="contactChoice6">6</label>
      </div>

      <input type="hidden" name="trial_dice" id= "tri_d_c" value="">
      <input type="hidden" name="obsd_1" id= "obsd_1" value="">
      <input type="hidden" name="obsd_2" id= "obsd_2" value="">
      <input type="hidden" name="obsd_3" id= "obsd_3" value="">
      <input type="hidden" name="obsd_4" id= "obsd_4" value="">
      <input type="hidden" name="obsd_5" id= "obsd_5" value="">
      <input type="hidden" name="obsd_6" id= "obsd_6" value="">
      <input type="hidden" name="obsd_7" id= "obsd_7" value="">
      
    </fieldset>
  </form>
    <br>{{ next_button }}

{{ endblock }}