{% block styles %}

<style>

        input[type="range"] {
    -webkit-appearance: none; /* Remove default styling */
    width: 100%;
    height: 10px;
    background: transparent; /* Default track background */
    outline: none;
    border-radius: 5px;
    cursor: pointer;
}

input[type="range"]::-webkit-slider-runnable-track {
    -webkit-appearance: none;
    height: 10px;
    border-radius: 5px;
    background: transparent; /* Background is set dynamically in JS */
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    background: #666; /* Thumb color */
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    z-index: 2;
}

input[type="range"]::-moz-range-track {
    background: transparent;
    height: 10px;
    border-radius: 5px;
}

input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: #666;
    border-radius: 50%;
    cursor: pointer;
}

input[type="range"]::-ms-track {
    background: transparent;
    border-color: transparent;
    color: transparent;
    height: 10px;
}

input[type="range"]::-ms-fill-lower {
    background: transparent;
    border-radius: 5px;
}

input[type="range"]::-ms-fill-upper {
    background: transparent;
    border-radius: 5px;
}

        .grid-container {
  display: grid;
  grid-template-columns: 3ch 1fr;
  align-items:baseline;
}

.grid-container input {
  grid-column-start: 1;
}

.grid-container label {
  grid-column-start: 2;
}


        .td1 {
        border: 1px solid grey;
width: 15em;
height: 4em;
}

            .wrongQ {
  border: 0.3em solid red;
  margin: 0.5em;
}
        .rightQ {
  border: 0.3em solid green;
  margin: 0.5em;
}

    .next {
    float: right;
    margin: 40px auto;
    }

 .back{
    float: left;
    margin: 40px auto;
    }



    .page-header {
    margin: 0px 0 5px;
    padding: 0;
    border-bottom: none;
    text-align: center;
}

p{
    text-align: justify;
    text-justify: inter-word;
}


.nav {
    visibility: hidden;
}

.split-screen {
    display: flex;
    width: 100%;
}

.left, .right {
    width: 50%;
    padding: 0px;
    box-sizing: border-box;
    overflow-y: auto;
}

.menu-box {
    border: 3px solid #130e0e;
    padding: 2px;
    width: 95%;
    margin-top: 20px;
    cursor: pointer;
    transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.menu-box:hover {
    border-color: #130e0e;
    transform: translateY(-1px);
    box-shadow: 0 0 8px rgba(0,0,0,0.12);
}

.left-box:hover {
    background-color: #fff7cc;
}

.right-box:hover {
    background-color: #ffe6cc;
}

.left-box.selected {
    background-color: #fff7cc;
    border-color: #e6c200;
}

.right-box.selected {
    background-color: #ffe6cc;
    border-color: #ff9933;
}

</style>

{% endblock %}


{% block scripts %}


{% endblock %}



{{ block title }}

{{ endblock }}


{{ block content }}


<h1>Instructions 2</h1>

<p>You will be asked to make choices in two stages. Consider the example below. </p>
<p> In stage 1, you will be asked to select LEFT or RIGHT.
    In stage 2, you choose between two options:
    <ul>
    <li> If you select LEFT in stage 1, you choose between Option A and Option B. Your bonus payment then depends on whether you choose Option A or Option B and the turn of the yellow wheel of fortune.</li>
    <li> If you select RIGHT in stage 1, you choose between Option C and Option D. Your bonus payment then depends on whether you choose Option C or Option D and the turn of the orange wheel of fortune and .</li>
</ul>
</p>

<b>Example:</b>
<hr>
    <div class="split-screen">
        <div class="left"  align="center">
    <b> LEFT</b>
<input type="radio" name="menu" value="{{ left_value }}" id="menu_left" style="display:none;">
<div id="menu_left_box" class="menu-box left-box"
     onclick="
        document.getElementById('menu_left').checked = true;
        document.getElementById('menu_left_box').classList.add('selected');
        document.getElementById('menu_right_box').classList.remove('selected');
     ">
    <br>
    {{ include_sibling 'Menu_1.html' }}
</div>


        </div>

        <div class="right" align="center">
   <b> RIGHT</b>
<input type="radio" name="menu" value="{{ right_value }}" id="menu_right" style="display:none;">
<div id="menu_right_box" class="menu-box right-box"
     onclick="
        document.getElementById('menu_right').checked = true;
        document.getElementById('menu_right_box').classList.add('selected');
        document.getElementById('menu_left_box').classList.remove('selected');
     ">
        <br>
    {{ include_sibling 'Menu_2.html' }}
</div>

        </div>

    </div>

{{ include_sibling 'comprehension_Menu.html' }}
    <br>
    {{ next_button }}
{{ endblock }}