{{ block scrpts}}
<script type="text/javascript">
var Next = document.querySelector('#Next');
var G = document.querySelector('#G');
var R = document.querySelector('#R');
var Y = document.querySelector('#Y');
var B = document.querySelector('#B');
var btns = [R, Y, B, G];
console.log(btns);
console.log(Next);

function addText(str){
    var sequence = forminputs.sequence;
    var len_sequence = sequence.value.length;
    console.log(len_sequence);

    if (len_sequence<js_vars.len_sequence) {
        sequence.value += str;
        console.log(sequence.value);
    } else {
        sequence.value += str;
        console.log(sequence.value);
        if (len_sequence == js_vars.len_sequence) {
            Next.style.visibility = 'visible';
            for (var i = 0; i < btns.length; i++) {
                btns[i].style.visibility = 'hidden';
            }
        }
    }
}

function hiddenButtons() {
    Next.style.visibility = 'hidden';
}
window.onload = hiddenButtons()

</script>
{{ endblock }}

{{ block style }}
<style>
.form{
    display: none;
}
</style>
{{ endblock }}


{{ block title }} {{ endblock }}
{{ block content }}

<br>
<br>


<div align="center">
<table border cellpadding="10" cellspacing="10" style="border:none">
    <tr>
        <td><input type="button" id="G" value="G" style="width:200px;height:200px;background-color:green;color:green;" onClick="addText(this.value)"></td>
        <td><input type="button" id="R" value="R" style="width:200px;height:200px;background-color:red;color:red;" onClick="addText(this.value)"></td>
        </tr>

    <tr>

        <td><input type="button" id="Y" value="Y" style="width:200px;height:200px;background-color:yellow;color:yellow;" onClick="addText(this.value)"></td>

        <td><input type="button" id="B" value="B" style="width:200px;height:200px;background-color:blue;color:blue;" onClick="addText(this.value)"></td>
        </tr>
</table>
</div>

<br>

<div align="right">
    <button id="Next" value="次へ" class="otree-btn-next btn btn-primary" style="width:150px;height:100px;background-color:gray;color:white;border:none;border-radius:10px;">次へ</button>
</div>
<div class="form">
    {{formfields}}
</div>

</div>

{{ endblock }}