{{block title}}
<center><h3>Instructions Quiz</h3></center>
{{endblock}}
{{block content}}

<div id = "quiz1" class="card bg-light m-3">
    <div class="card-body">
        To practice implementing your choices, please view the sample decision screen below,
        and allocate 4 units to Asset A and 8 units to Asset B. This decision is for practice only.<br><br>
        <center><u><strong> Investment Account 1</strong></u></center>
            <ul>
                <li> You have 12 ECU available in Account 1. Two assets are available
                for purchase: Asset A and Asset B</li>
                <li> The price of Asset A is 1 ECU per unit</li>
                <li> The price of Asset B is 1 ECU per unit</li>
                <li> One unit in Asset A pays:
                <ul>
                    <li> $1 if the dice roll is 1, 2, or 3</li>
                    <li> $1 if the dice roll is 4, 5, or 6</li>
                </ul></li>
                <li> One unit in Asset B pays:
                <ul>
                    <li> $1 if the dice roll is 1, 2, or 3</li>
                    <li> $1 if the dice roll is 4, 5, or 6</li>
                </ul></li>
            </ul>

            <table style="width:90%">
        <tr>
            <td></td>
            <td id="styling" class="second_column"><div class="slidecontainer">
                <p id="description">Use the slider below to indicate your asset purchase</p>
                <input type="range" class="slider" id="asset_quiz" name="asset_quiz" min="0" max="12"
                       onchange="showButton1()" oninput="updateDescription(this)" onclick="updateDescription(this);showButton1()">
                <output id="sliderVal"> </output>
            </div></td>
			<td></td>
		</tr>
        <tr>
         <td id="styling" class="first_column"><p id="assetA"><span><span> Asset A</span>
            </span></p></td>
         <td id="arrowA">
             <div class="arrow">
                <div class="line"></div>
                <div class="point"></div>
             </div>
         </td>
         <td></td>
        </tr>
        <tr>
         <td></td>
         <td id="arrowB">
             <div class="arrow2">
                <div class="point2"></div>
                <div class="line2"></div>
             </div>
         </td>
         <td id="styling" class="third_column"><p id="assetB"><span><span> Asset B</span>
            </span></p></td>
        </tr>
        </table>
    </div>
</div>

<button id="next2" style="visibility: hidden;" onclick="myFunction()"
        class="btn btn-primary popup" type="button">Finalize your choices
</button>
<script>

var next2 = document.getElementById("next2");

function myFunction() {
  var val = document.getElementById("asset_quiz").value;
  if (val == 4) {
        next2.type = "";
        }
  else {
        next2.type = "button";
        alert("Please make the asset allocation indicated");
    }
}


</script>
<script>
    var movingSlider1 = false
    let description = document.getElementById('description');
    function updateDescription(input) {
        let asset_quiz = parseInt(input.value);
        let asset_B = 12 - asset_quiz
        description.innerText = `${asset_quiz} units of asset A and ${asset_B} units of asset B`;
        movingSlider1 = true;
    }
    function showButton1(){
        document.getElementById("asset_quiz").classList.add('slider-thumb-PR');
        if (movingSlider1) {
            document.getElementById('next2').style.visibility = 'visible';
        };
    }


</script>
<style>

    #quiz1 {
  width: 100%;
}


 #styling {
  text-align: center;
}

.first_column {
  table-layout: auto;
}

#assetA {
  position: relative;
  left: 50px;
  color: #243743;
}

#assetB {
  position: relative;
  right: 50px;
  color: #28B78D;
}

#next2 {
  float: right;
}

.second_column {
   width: 50%;
}


.arrow {
  width: 100%;
  position: relative;
}

.line {
  margin-top: 8px;
  width: 98%;
  background: #243743;
  height: 2px;
  float: left;
  position: absolute;
}

.point {
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 15px solid #243743;
  float: right;
}


.arrow2 {
  width: 100%;
  position: relative;
}

.line2 {
  margin-top: 9px;
  width: 98%;
  background: #28B78D;
  height: 2px;
  float: right;
  position: absolute;
}

.point2 {
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 15px solid #28B78D;
  float: left;
}


.third_column {
   table-layout: auto;
}


.slider{
  -webkit-appearance: none;
   width: 100%;
   height: 15px;
   border-radius: 5px;
   background: #d3d3d3;
   outline: none;
   opacity: 0.7;
}


.slider:hover {
  opacity: 1;
}


.slider-thumb-PR::-webkit-slider-thumb{
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #58949C;
}

.slider-thumb-PR2::-webkit-slider-thumb{
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #58949C;
}

input[type=range]::-webkit-slider-thumb {
      border: none;
      height: 25px;
      width: 25px;
      border-radius: 50%;
      -webkit-appearance: none;
   }

ul {
  padding-left: 80px;
}

</style>
{{endblock}}