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

{% block title %}
    
{% endblock %}

{% block content %}

<p>
    <h2>ここでは２つのくじのうち、どちらのくじから引きたいかをお答えください。</h2><br>
    例えば１問目では、くじAを選択すると、1/10の確率で300円を得られますが、9/10の確率で250円を得ます。<br>
    一方で、くじBを選択すると、1/10の確率で500円が得られますが、9/10の確率で50円を得ます。<br>
    問題ごとにくじによって得られる金額は変わりませんが、得られる確率が異なるのでご注意ください。
</p>

  
   <!-- ここから質問を記述 -->
      <!-- 質問1 -->
        １問目&emsp;&emsp;<input type="radio" class="btn " id="1" name="riskA" value="0"><label for="1" class="label btn-border">くじA：1/10で300円か9/10で250円</label>
        <input type="radio" class="btn " id="2" name="riskA" value="1"><label for="2" class="label btn-border">くじB：1/10で500円か9/10で50円</label>
      <!-- 質問2 -->
      <br><br>
      ２問目&emsp;&emsp;<input type="radio" class="btn " id="3" name="riskB" value="0"><label for="3" class="label btn-border">くじA：2/10で300円か8/10で250円</label>
        <input type="radio" class="btn " id="4" name="riskB" value="1"><label for="4" class="label btn-border">くじB：2/10で500円か8/10で50円</label>
      <!-- 質問3 -->
      <br><br>
      ３問目&emsp;&emsp;<input type="radio" class="btn " id="5" name="riskC" value="0"><label for="5" class="label btn-border">くじA：3/10で300円か7/10で250円</label>
        <input type="radio" class="btn " id="6" name="riskC" value="1"><label for="6" class="label btn-border">くじB：3/10で500円か7/10で50円</label>
      <!-- 質問4 -->
      <br><br>
      ４問目&emsp;&emsp;<input type="radio" class="btn " id="7" name="riskD" value="0"><label for="7" class="label btn-border">くじA：4/10で300円か6/10で250円</label>
        <input type="radio" class="btn " id="8" name="riskD" value="1"><label for="8" class="label btn-border">くじB：4/10で500円か6/10で50円</label>
      <!-- 質問5 -->
      <br><br>
      ５問目&emsp;&emsp;<input type="radio" class="btn " id="9" name="riskE" value="0"><label for="9" class="label btn-border">くじA：5/10で300円か5/10で250円</label>
        <input type="radio" class="btn " id="10" name="riskE" value="1"><label for="10" class="label btn-border">くじB：5/10で500円か5/10で50円</label>
      <!-- 質問6 -->
      <br><br>
      ６問目&emsp;&emsp;<input type="radio" class="btn " id="11" name="riskF" value="0"><label for="11" class="label btn-border">くじA：6/10で300円か4/10で250円</label>
        <input type="radio" class="btn " id="12" name="riskF" value="1"><label for="12" class="label btn-border">くじB：6/10で500円か4/10で50円</label>
      <!-- 質問7 -->
      <br><br>
      ７問目&emsp;&emsp;<input type="radio" class="btn " id="13" name="riskG" value="0"><label for="13" class="label btn-border">くじA：7/10で300円か3/10で250円</label>
        <input type="radio" class="btn " id="14" name="riskG" value="1"><label for="14" class="label btn-border">くじB：7/10で500円か3/10で50円</label>
      <!-- 質問8 -->
      <br><br>
      ８問目&emsp;&emsp;<input type="radio" class="btn " id="15" name="riskH" value="0"><label for="15" class="label btn-border">くじA：8/10で300円か2/10で250円</label>
        <input type="radio" class="btn " id="16" name="riskH" value="1"><label for="16" class="label btn-border">くじB：8/10で500円か2/10で50円</label>
      <!-- 質問9 -->
      <br><br>
      ９問目&emsp;&emsp;<input type="radio" class="btn " id="17" name="riskI" value="0"><label for="17" class="label btn-border">くじA：9/10で300円か1/10で250円</label>
        <input type="radio" class="btn " id="18" name="riskI" value="1"><label for="18" class="label btn-border">くじB：9/10で500円か1/10で50円</label>
      <!-- 質問10 -->
      <br><br>
      １０問目&emsp;<input type="radio" class="btn " id="19" name="riskJ" value="0"><label for="19" class="label btn-border">くじA：10/10で300円か0/10で250円</label>
        <input type="radio" class="btn " id="20" name="riskJ" value="1"><label for="20" class="label btn-border">くじB：10/10で500円か0/10で50円</label>
      <br><br><br>
    {% next_button %}
    <style>
        body {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-pack: center;
              -ms-flex-pack: center;
                  justify-content: center;
          -webkit-box-align: center;
              -ms-flex-align: center;
                  align-items: center;
          min-height: 100vh;
          color: black;
        }
        
        h1 {
          margin: 0 0 1em;
        }
        
        .group {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-align: center;
              -ms-flex-align: center;
                  align-items: center;
          margin-bottom: 2em;
        }
        
        input[type="checkbox"],
        input[type="radio"] {
          position: absolute;
          opacity: 0;
          z-index: -1;
        }
        
        label {
          position: relative;
          margin-right: 1em;
          padding-left: 2em;
          padding-right: 1em;
          line-height: 2;
          cursor: pointer;
        }
        
        label:before {
          -webkit-box-sizing: border-box;
                  box-sizing: border-box;
          content: " ";
          position: absolute;
          top: 0.3em;
          left: 0;
          display: block;
          width: 1.4em;
          height: 1.4em;
          border: 2px solid black;
          border-radius: .25em;
          z-index: -1;
        }
        
        input[type="radio"] + label::before {
          border-radius: 1em;
        }
        
        /* Checked */
        input[type="checkbox"]:checked + label,
        input[type="radio"]:checked + label {
          padding-left: 1em;
          color: white;
        }
        
        input[type="checkbox"]:checked + label:before,
        input[type="radio"]:checked + label:before {
          top: 0;
          width: 100%;
          height: 2em;
          background: black;
        }
        
        /* Transition */
        label,
        label::before {
          -webkit-transition: .25s all ease;
          transition: .25s all ease;
        }
        /*# sourceMappingURL=main.css.map */
        </style>
    
{% endblock %}