{{ block title }}實驗開始{{ endblock }}

{{ block content }}
{{ include C.PAPERCUPS_TEMPLATE }}   
    <!-- {{if player.stop }}
        <p>你的選擇：停下</p>
    {{else}}
        <p>你的選擇：繼續</p>
    {{endif}} -->

    <input type="hidden" name="stop" id="stop"/>

    <svg width="600" height="300" xmlns:html="http://www.w3.org/1999/xhtml">

        <defs>
            <marker id="arrowhead" markerWidth="5" markerHeight="5" 
            refX="0" refY="2.5" orient="auto">
                <polygon points="0 0, 5 2.5, 0 5" />
            </marker>
        </defs>
        
        <g>
            <circle cx="15" cy="65" r="14" stroke="black" stroke-width="2" fill="red" />
            <line x1="30" y1="65" x2="90" y2="65" stroke="#000" stroke-width="2" marker-end="url(#arrowhead)" />
            <line x1="15" y1="80" x2="15" y2="190" stroke="#000" stroke-width="2" marker-end="url(#arrowhead)" />
            <text x="15" y="220" dominant-baseline="middle" text-anchor="middle" font-size="20" font-weight="bold" fill="red">110</text>
            <text x="15" y="245" dominant-baseline="middle" text-anchor="middle" font-size="20" font-weight="bold" fill="blue">20</text>
        </g>
        
        <g>
            <circle cx="115" cy="65" r="15" stroke="black" stroke-width="2" fill="blue" />
            <line x1="130" y1="65" x2="180" y2="65" stroke="#000" stroke-width="2" marker-end="url(#arrowhead)" />
            <line x1="115" y1="80" x2="115" y2="190" stroke="#000" stroke-width="2" marker-end="url(#arrowhead)" />            
            <text x="115" y="220" dominant-baseline="middle" text-anchor="middle" font-size="20" font-weight="bold" fill="red">30</text>
            <text x="115" y="245" dominant-baseline="middle" text-anchor="middle" font-size="20" font-weight="bold" fill="blue">120</text>
        </g>

            
        <g class="button btn btn-primary" id="btnContinue" value="False">
            <rect x="40" y="35" width="30" height="65" stroke="black" stroke-width="2"></rect>
            <text x="55" y="50"
            style="writing-mode: tb; glyph-orientation-vertical: 0;"  
            font-size="17" fill="black"
            >繼續</text>
        </g>

        <g class="button btn btn-primary" id="btnStopHere" value="True">
            <rect x="1" y="100" width="30" height="65" stroke="black" stroke-width="2"></rect>
            <text x="15" y="115"
            style="writing-mode: tb; glyph-orientation-vertical: 0;"  
            font-size="17" fill="black"
            >停下</text>
        </g>
        </svg>
    
    
    <p></p>
    <button class="otree-btn-next btn btn-primary" id="nextButton" disabled>Next</button>

    <script>
      const btnC = document.getElementById('btnContinue');
      const btnS = document.getElementById('btnStopHere');

      function onClick(event) {
        // btnC.style.fill = 'blue';
        // btnS.style.fill = 'blue';
        // event.target.style.fill = 'red';
        // $("button.active").removeClass("active");
        // $(this).addClass("active");
        // event.target.style.fill = 'red';

        document.getElementById('stop').value = event.target.value;
        document.getElementById('nextButton').removeAttribute("disabled");
      }

      btnC.addEventListener('click', onClick);
      btnS.addEventListener('click', onClick);
    </script>

    <style>
      .active {
        fill: red;
      }
      .button {
        fill: white;
        pointer-events: all;
        display: inline-block;
        border-radius: 10px;
        border: 4px double #cccccc;
        color: black;
        text-align: center;
        font-size: 15px;
        padding: 10px;
        width: 50px;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        -o-transition: all 0.5s;
        transition: all 0.5s;
        cursor: pointer;
        margin: 5px;
      }
      .button:hover {
        fill: pink;
      }
    </style>


{{ formfield_errors 'stop' }}
{{ endblock }}