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

{{ block content }}

<div style="line-height: 200%">
<font size="4">
<div>
    Q1. 投資の経験年数は、どのくらいありますか？スライダー上のポインターを動かして、回答してください。
</div>

<div class="slider-container">
    <center>経験年数：<font color="red"><output id="output1">0</output></font>年</center>
    <center>
        0年　<input name="experience" type="range" class="form-range" value="0" min="0" max="20" step="1"
  oninput="document.getElementById('output1').value=this.value">　20年
    </center>
</div>

<div>
    Q2. 価格が上がる場合、一日にどのくらい変化したとき、大きな上昇だと感じましたか？（大体で構いません。）
</div>

<div class="slider-container">
    <center>変動幅：<font color="red"><output id="output2">1</output></font>円</center>
    <center>
        1円　<input name="plusMag" type="range" class="form-range" value="1" min="1" max="80" step="1"
  oninput="document.getElementById('output2').value=this.value">　80円
    </center>
</div>

<div>
    Q3. 価格が下がる場合、一日にどのくらい変化したとき、大きな下落だと感じましたか？
</div>

<div class="slider-container">
    <center>変動幅：<font color="red"><output id="output3">1</output></font>円</center>
    <center>
        1円　<input name="minusMag" type="range" class="form-range" value="1" min="1" max="80" step="1"
  oninput="document.getElementById('output3').value=this.value">　80円
    </center>
</div>

<div>
    Q4. 行動を選択する際、おおよそ何日前までの値動きを参考にしましたか？
</div>

<div class="slider-container">
    <center>期間：<font color="red"><output id="output4">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('output4').value=this.value">　20日
    </center>
</div>

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

<div class="slider-container">
    <center>期間：<font color="red"><output id="output5">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('output5').value=this.value">　20日
    </center>
</div>
    
<div class="mb-3 _formfield">
    <label class="col-form-label" for="id_beforeAfter">Q6. 取引を重ねていく中で、あなたの取引の仕方（売り買いや注文数量の決め方）は変わりましたか？</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 }}