{{ block styles}}

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

{{ endblock }}

{{ block content }}
<div class="game-body">
    <div class="text-container">
        <p>
            The product characteristics (Price, Quality and 
            {{ if Treatment == 0 }} Health 
                            {{ else }} Risk
                            {{ endif }}
            ) for each product will be
            behind
            <i>‘boxes’.</i>
        </p>
        <p>
            To reveal the information, all you need to do is to move your mouse on top of the
            <i>‘box’</i> and the
            information will be revealed. Here is an example.
        </p>
        <p>
            <b>Try moving your mouse on top of the box.</b>
        </p>
    </div>
    <div class="button-container">       
        <button type="button" class="game-btn btn-outcome mouse" id="b3"> 
            <div class="btn-content"> Good job! </div>
            <div class="btn-hidden"> Hover me! </div>
        </button> 
        <p class="text-reveal" id="txt-reveal">
            You can now move to the next page.
        </p>
        <button id="btn-reveal" class="button btn-reveal"> Next </button>

        <input type = 'hidden' name = 'sRowsRevealed' id="sRowsRevealed" />
        <input type = 'hidden' name = 'sTimesRows' id="sTimesRows" />
        <input type = 'hidden' name = 'dTime2First' id="dTime2First" />
    </div>
</div>
{{ endblock }}

{{ block scripts }}

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

<script>
    const bRequireFS    = 'bRequireFS';
    const bCheckFocus   = 'bCheckFocus';
    const defaultPixel  = 'dPixelRatio';
    var TBlur           = new Date().getTime();
    var TFocus          = new Date().getTime();
    var bClickHere      = false;

    window.addEventListener('DOMContentLoaded', (event) => {
        let body = document.getElementById('button-container');
        // Visual Tracing
        InitializeVT(body);                                                 // Initialize visual tracing
        hideEverything();                                                   // Hide Everything at the beginning                     
        ConvertButtons2VT('mouse', sActivation = 'mouseover');           // Mouseover for Row1
    });

    // adjust buttons to text
    resizeButtons()

    // Check if person did mouseover the button in slide 4. 
    document.getElementById("b3").addEventListener("mouseover", (event) => {
        bClickHere = true;
        document.getElementById("txt-reveal").style.visibility = "visible";
        document.getElementById("btn-reveal").style.visibility = "visible";
    });
</script>


{{ endblock }}