{{ block scripts }}

<script src="{% static 'global/VT_functionality.js' %}"> </script>
<script src="{% static 'global/FriendlyChecks.js' %}"> </script>

<script>
// initialize variables
var tStart,tNow
const bRequireFS    = 'bRequireFS';
const bCheckFocus   = 'bCheckFocus';
const defaultPixel  = 'dPixelRatio';
const iTimeOut      = 'iTimeOut'; 
var TBlur           = new Date().getTime();
var TFocus          = new Date().getTime();

window.addEventListener('DOMContentLoaded', (event) => {
    tStart = new Date();
    console.log('Starts now:', tStart);
    let body = document.getElementById('game-table');
    InitializeFriendlyChecks(body, bRequireFS, bCheckFocus);             // Initialize FS and focus checks
    // Visual Tracing
    InitializeVT(body);                                                 // Initialize visual tracing
    hideEverything();                                                   // Hide Everything at the beginning                     
    ConvertButtons2VT('r1', sActivation = 'mouseover', 'r1');           // Mouseover for Row1
    ConvertButtons2VT('r2', sActivation = 'mouseover', 'r2');           // Mouseover for Row2
    ConvertButtons2VT('r3', sActivation = 'mouseover', 'r3');           // Mouseover for Row3
});

// decision buttons and overall time
function decision(value) {
    tNow = new Date();
    console.log('Ends now:', tNow);
    let dRT = tNow - tStart;
    let nextbut = document.getElementById('nextbut');
    let inputDec = document.getElementById('iHDec');
    let inputRT = document.getElementById('dRT');

    inputDec.value = value;
    inputRT.value=dRT;
    sRowsRevealed.value = sRowsRevealed.value;
    sTimesRows.value = sTimesRows.value;
    dTime2First.value = dTime2First.value;
    nextbut.click();

    //console.log('Decision is',inputDec.value);
    //console.log('Time is',inputRT.value);
}

// adjust buttons to text
resizeButtons()
</script>

{{ endblock }}

{{ block styles }}

<link href="{% static 'global/Choice.css' %}" rel="stylesheet">

{{ endblock }}

{{ block content }}

    <div class = "game-body" id = "game-body">

        <div class = text id = compare> Please compare the following two products: </div>

        <div class = "game-table" id = "game-table">
            <div class = "row">
                <button type="button" class="game-btn btn-attr i0" id="I0"> </button>
                <button type="button" class="game-btn btn-attr i1" id="I1"> Product 1 </button> 
                <button type="button" class="game-btn btn-attr i2" id="I2"> Product 2 </button> 
            </div>
            <div class = "row">
                <button type="button" class="game-btn btn-attr r1" id="R1"> Price </button> 
                <button type="button" class="game-btn btn-outcome r1 i1" id="R1I1"> 
                    <div class="btn-content"> € {{cp1}} </div>
                    <div class="btn-hidden" type="hidden"> </div>
                </button>
                <button type="button" class="game-btn btn-outcome r1 i2" id="R1I2"> 
                    <div class="btn-content"> € {{cp2}} </div>
                    <div class="btn-hidden" type="hidden"> </div>
                </button>
            </div>
            <div class = "row">
                <button type="button" class="game-btn btn-attr r2" id="R2"> Taste </button> 
                <button type="button" class="game-btn btn-outcome r2 i1" id="R2I1"> 
                    <div class="btn-content"> <img class="img-rating" src="{% static ct1 %}" width="150px" height="35px" /> </div>
                    <div class="btn-hidden" type="hidden"> </div>
                </button> 
                <button type="button" class="game-btn btn-outcome r2 i2" id="R2I2"> 
                    <div class="btn-content"> <img class="img-rating" src="{% static ct2 %}" width="150px" height="35px" /> </div>
                    <div class="btn-hidden" type="hidden">  </div>
                </button>     
            </div>
            <div class = "row"> 
                <button type="button" class="game-btn btn-attr r3" id="R3"> 
                    {{ if Treatment == 0 }} Health 
                    {{ else }} Risk
                    {{ endif }} 
                </button> 
                <button type="button" class="game-btn btn-outcome r3 i1" id="R3I1"> 
                    <div class="btn-content"> <img class="img-rating" src="{% static ch1 %}" width="150px" height="35px" /> </div>
                    <div class="btn-hidden" type="hidden">  </div>
                </button> 
                <button type="button" class="game-btn btn-outcome r3 i2" id="R3I2"> 
                    <div class="btn-content"> <img class="img-rating" src="{% static ch2 %}" width="150px" height="35px" /> </div>
                    <div class="btn-hidden" type="hidden">  </div>
                </button>
            </div>
        </div>
        <div class = "decision_area">
            <button type="button" class="game-btn dec-btn" name="iHDec" onclick="decision(0)"> Product 1 </button>
            <button type="button" class="game-btn dec-btn" name="iHDec" onclick="decision(1)"> Product 2 </button>
            <input type = 'hidden' name = 'dRT' id="dRT" />
            <input type = 'hidden' name = 'iHDec' id="iHDec" />
            <input type = 'hidden' name = 'sRowsRevealed' id="sRowsRevealed" />
            <input type = 'hidden' name = 'sTimesRows' id="sTimesRows" />
            <input type = 'hidden' name = 'dTime2First' id="dTime2First" />
            <button id = "nextbut" style="display: none"> </button>
        </div>
    </div>

{{ endblock }}