{{ extends 'global/Page.html' }}
{{ block title }}ゲームに関するアンケート{{ endblock }}

{{ block content }}

<div style="line-height: 200%">
<font size="4">

<div class="mb-3 _formfield">
    <label class="col-form-label" for="id_level">Q1. 実験1回目の株取引ゲームと比較して、行動の選択がどのくらい難しいと感じましたか？</label>
    <div class="controls">
        <div id="id_level" required><div class="form-check"><input class="form-check-input" type="radio" id="id_level-0" name="level" required value="2"> <label for="id_level-0">難しい</label></div><div class="form-check"><input class="form-check-input" type="radio" id="id_level-1" name="level" required value="1"> <label for="id_level-1">やや難しい</label></div><div class="form-check"><input class="form-check-input" type="radio" id="id_level-2" name="level" required value="0"> <label for="id_level-2">変わらない</label></div><div class="form-check"><input class="form-check-input" type="radio" id="id_level-3" name="level" required value="-1"> <label for="id_level-3">やや簡単</label></div><div class="form-check"><input class="form-check-input" type="radio" id="id_level-4" name="level" required value="-2"> <label for="id_level-4">簡単</label></div></div>
    </div>
</div>

<div class="mb-3 _formfield">
    <label class="col-form-label" for="id_reason">その理由を教えてください。</label>
    <div class="controls">
        <textarea class="form-control" id="id_reason" name="reason" required value="">
</textarea>
    </div><div class="space"></div>
</div>    
    
    
<div>
    Q2. 行動を選択する際、おおよそ何日前までの値動きを参考にしましたか？
</div>

<div class="slider-container">
    <center>期間：<font color="red"><output id="output2">1</output></font>日</center>
    <center>
        1日　<input name="pastPeriod" type="range" class="form-range" value="1" min="1" max="20" step="1"
  oninput="document.getElementById('output2').value=this.value">　20日
    </center>
</div>

<div>
    Q3. 行動を選択する際、おおよそ何日先までの値動きを予想し、考慮しましたか？
</div>

<div class="slider-container">
    <center>期間：<font color="red"><output id="output3">1</output></font>日</center>
    <center>
        1日　<input name="futurePeriod" type="range" class="form-range" value="1" min="1" max="20" step="1"
  oninput="document.getElementById('output3').value=this.value">　20日
    </center>
</div>
    
<div class="mb-3 _formfield">
    <label class="col-form-label" for="id_beforeAfter">Q4. 取引を重ねていく中で、あなたの取引の仕方（売り買いや注文数量の決め方）は変わりましたか？</label>
    <div class="controls">
        <div id="id_beforeAfter" required><div class="form-check"><input class="form-check-input" type="radio" id="id_beforeAfter-0" name="beforeAfter" required value="1"> <label for="id_beforeAfter-0">はい</label></div><div class="form-check"><input class="form-check-input" type="radio" id="id_beforeAfter-1" name="beforeAfter" required value="0"> <label for="id_beforeAfter-1">いいえ</label></div></div>
    </div>
</div>
    
<div class="mb-3 _formfield">
    <label class="col-form-label" for="id_how">「はい」を選んだ方は、どのように変化したのかを、「いいえ」を選んだ方は、終始どのように取引を行ったのかを、教えてください。</label><div class="space"></div>
    <div class="controls">
        <textarea class="form-control" id="id_how" name="how" required value="">
</textarea>
    </div>
</div><div class="space"></div>
</font>
</div>

<style>
.form-range {
  height: 14px;
  width: 70%;
}
    
.slider-container {
  width: 75%;
  padding-top: 20px;
  padding-bottom: 40px;
}

.form-check input{
	position:relative;
	top:1.5px;
}

.space {
    padding: 5px;
}
</style>    

{{ next_button }}

{{ endblock }}