{{ extends 'global/Page.html' }}
{{ block title }}Part 3{{ endblock }}

{{ block content }}

<p>
    On this page we ask you some statements that relate to the different dimensions of the products.
</p>
<p>
    There were three dimensions that we think mattered in different stages of your decision making. They were: 
    <ul>
        <li><b>style and appearance</b> of the trainer</li>
        <li><b>price</b> category (normal price or 40% off)</li>
        <li>customer <b>review score</b> (average stars out of 5 stars)</li>
    </ul>
</p>
<p>
    Using a quick questionnaire, we would like to know how much you quantitatively value each dimension. Please answer truthfully to the questions below.
</p>

<br>
<h2>
    Question 1
</h2>
<p>
    Imagine a trainer that is <b>really bad</b> with respect to the dimensions above:
    <ul>
        <li>it is rated by you at the <i>worst level</i> in style and appearance</li>
        <li>it is <i>not in discount</i></li>
        <li>it has received the <i>lowest customer review score</i></li>
    </ul>
</p>

<center>
    <img src="{{ static 'my_folder/drawing.jpg' }}" width="200px">
</center>

<p>
    This kind of a trainer may not exist in real life, but you can try to imagine such a product.
</p>

<p>
    Now imagine that you were able to make this imaginary trainer more interesting for yourself. <b>In which dimension would you make the first improvement?</b>  
</p>
<input type="radio" id="subjective1" name="q1" value="subjective">
<label for="subjective1" id="subjective1label">Style and appearance</label><br>

<input type="radio" id="price1" name="q1" value="price">
<label for="price1" id="price1label">Price category</label><br>

<input type="radio" id="reviews1" name="q1" value="reviews">
<label for="reviews1" id="reviews1label">Customer reviews</label><br>
<p>
<span id="testradio1">&nbsp;</span> <!-- for checking that a radio button is checked -->
<span id="radioclicked2" hidden></span> <!-- for preventing creating many sliders -->
</p>

<button id="btn" type="button">OK</button>

<br>

<div id="question2">
    <h2>
        Question 2
    </h2>

    <p>
        Now imagine a trainer that is evaluated only on the two dimensions that remain after Question 1. <b>Which one of these would you improve next?</b></p>
   
<!-- one from the below will get hidden once q1 is answered -->
<input type="radio" id="subjective2" name="q2" value="subjective">
<label for="subjective2" id="subjective2label">Style and appearance</label><br>

<input type="radio" id="price2" name="q2" value="price">
<label for="price2" id="price2label">Price category</label><br>

<input type="radio" id="reviews2" name="q2" value="reviews">
<label for="reviews2" id="reviews2label">Customer reviews</label><br>
<p>
<span id="testradio2">&nbsp;</span> <!-- for checking that a radio button is checked -->
</p>

    <div id="slider2div">        
    <p>
        <b>Please use the slider below to express how important this second dimension is compared to the first dimension that you rated</b>
    </p>

    <center>
        <p>
            <span id="slider2value"></span>%
            <div id="slider2"></div>
        </p>
        <p>
            <span id="testslider2">&nbsp;</span>
        </p>
    </center>

    <button id="btn2" type="button">OK</button>
    <br>
    <br>

    </div>
</div>

<div id="question3">

    <h2>
        Question 3
    </h2>
    <p>
        Now we know that you think the least important dimension is <span id="q3dimension"></span>. <b>Please use the slider below to express how important this third dimension is compared to the first dimension that you rated</b>
    <center><p>
        <span id="slider3value"></span>%
        <div id="slider3"></div>
    </p></center>

    </p>
   
</div>

<input type="hidden" id="q1answer" name="swingq1answer">
<input type="hidden" id="q2answer" name="swingq2answer">
<input type="hidden" id="q2weight" name="swingq2weight">
<input type="hidden" id="q3answer" name="swingq3answer">
<input type="hidden" id="q3weight" name="swingq3weight">

<span id="testslider3"></span><br>

<button id="btn3">OK</button> <!-- submit button -->



{{ endblock }}

{{ block scripts }}
<script>
const btn = document.querySelector('#btn');

btn.addEventListener("click", () => {

    const radioButtons = document.querySelectorAll('input[name="q1"]');
    let q1;
    for (const radioButton of radioButtons) {
        if (radioButton.checked) {
            q1 = radioButton.value;
            btn.style.visibility = 'visible';
            break;
        }
    }


  	if (q1 == null) {
      	document.getElementById('testradio1').innerHTML = 'Please select an option';
    }

  	else {
        document.getElementById('q1answer').value = q1;
      	document.getElementById('testradio1').innerHTML = '&nbsp;'

        document.getElementById('btn').disabled = true;
        document.getElementById('question2').style.visibility = 'visible';
        document.getElementById('subjective1').disabled = true;
        document.getElementById('price1').disabled = true;
        document.getElementById('reviews1').disabled = true;

        if (q1 == 'subjective') { 
            document.getElementById("subjective2").style.visibility = 'hidden';
            document.getElementById("subjective2label").style.opacity = '50%'; //visibility = 'hidden';
        }
        if (q1 == 'price') { 
            document.getElementById("price2").style.visibility = 'hidden'; 
            document.getElementById("price2label").style.opacity = '50%'; //visibility = 'hidden';
        }
        if (q1 == 'reviews') { 
            document.getElementById("reviews2").style.visibility = 'hidden'; 
            document.getElementById("reviews2label").style.opacity = '50%'; //visibility = 'hidden';
        }

    }
});


const radioButtons2 = document.querySelectorAll('input[name="q2"]');
for (var i = 0, max = radioButtons2.length; i < max; i++) {
    radioButtons2[i].onclick = function() {

      	document.getElementById("slider2div").style.visibility = 'visible';
		if (document.getElementById("radioclicked2").innerHTML != 'yes') {
          	document.getElementById("radioclicked2").innerHTML = 'yes';
            const slider2 = document.createElement("input");
            slider2.setAttribute("type", "range");
            //slider2.setAttribute("class", "slider");
            slider2.setAttribute("id", "slider2slider"); 
            slider2.setAttribute("min", "0");
            slider2.setAttribute("max", "100");
            slider2.setAttribute("value", "0");
          	slider2.style['width'] = "250px";
            document.getElementById("slider2").appendChild(slider2);

            var output2 = document.getElementById("slider2value");
            output2.innerHTML = slider2.value;

            slider2.oninput = function() {
                output2.innerHTML = this.value;
                document.getElementById("q2weight").value = slider2.value;
            }
          
        }
    }
}




const btn2 = document.querySelector('#btn2');
btn2.addEventListener("click", () => {

 	if (document.getElementById("q2weight").value == 0) {
      	document.getElementById("testslider2").innerHTML = 'Please move the slider';
    } else {
      	document.getElementById("testslider2").innerHTML = '&nbsp;';
    }
 
  	if (document.getElementById("testslider2").innerHTML != 'Please move the slider') {

        let q2;
        for (const radioButton2 of radioButtons2) {
            if (radioButton2.checked) {
                q2 = radioButton2.value;
                break;
            }
        }

        if (q2 == null) {
      		document.getElementById('testradio2').innerHTML = 'Please select an option';
    	}
      
      	else {

            document.getElementById('testradio2').innerHTML = '&nbsp;';

            document.getElementById('q2answer').value = q2;

            document.getElementById('btn2').disabled = true;
            document.getElementById('question3').style.visibility = 'visible';
            document.getElementById('subjective2').disabled = true;
            document.getElementById('price2').disabled = true;
            document.getElementById('reviews2').disabled = true;
            document.getElementById('slider2slider').disabled = true;

            let q3dim, q3a;
            var q1 = document.getElementById("q1answer").value;

            if (q1 == 'price' && q2 == 'subjective' || q2 == 'price' && q1 == 'subjective' ) { 
                q3dim = 'Customer reviews';
                q3a = 'reviews';
            }
            if (q1 == 'price' && q2 == 'reviews' || q2 == 'price' && q1 == 'reviews' ) { 
                q3dim = 'Style and Appearance';
                q3a = 'subjective';
            }
            if (q1 == 'reviews' && q2 == 'subjective' || q2 == 'reviews' && q1 == 'subjective' ) { 
                q3dim = 'Price category';
                q3a = 'price';
            } 

            document.getElementById('q3dimension').innerHTML = q3dim;
            document.getElementById('q3answer').value = q3a;

            const slider3 = document.createElement("input");
            slider3.setAttribute("type", "range");
            //slider3.setAttribute("class", "slider");
            slider3.setAttribute("id", "slider3slider"); 
            slider3.setAttribute("min", "0");
            var q2weight = document.getElementById("q2weight").value;
            slider3.setAttribute("max", q2weight); // max should be q2slider answer
            slider3.setAttribute("value", "0");
          	slider3.style['width'] = "200px";
            document.getElementById("slider3").appendChild(slider3);

            var output3 = document.getElementById("slider3value");
            output3.innerHTML = slider3.value; 

            slider3.oninput = function() {
                output3.innerHTML = this.value;
                document.getElementById("q3weight").value = slider3.value;
              
                const btn3 = document.querySelector('#btn3');
				btn3.style.visibility = 'visible';
            }
        }
    }
  
});



</script>
{{ endblock }}