{% extends "global/Page.html" %}
{% load staticfiles otree_tags %}

{% block title %}
   Task
{% endblock %}

{% block styles %}
<style>

.textinput{
    display: block;
    max-width: 400px;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    }

.dropdown{
    width: auto;
    height: calc(2.25rem + 2px);
    display: block;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.numberinput{
    display: block;
    max-width: 100px;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

  .otree-form-errors {
    visibility: hidden;
    display: none;
}

.textarea:invalid {
    border:5px solid red!important;
}

*, ::after, ::before {
    box-sizing: border-box;
}

.divbild {
    width:480px;
    height:430px;
    overflow:hidden;
    margin-right:-80px;
    border-radius: 7px;
    }

.my_nextbutton {
     cursor: pointer;
     display: inline-block;
    font-weight: 400;
     color: #fff;
     background-color: #007bff;
     border-color: #007bff;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: .25rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
     }

.slidecontainer {
    flex-grow: 1;
    margin: auto;
}

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

.slider::-webkit-slider-thumb {
    -webkit-appearance: none!important;
    appearance: none;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #4CAF50;
    cursor: pointer;
}

.slider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    cursor: pointer;
    -webkit-appearance: none !important;
}

.slider:invalid {
    border: 5px solid red!important;
}

/* custom thumb for Safari, Opera, and Chrome */
.myClass::-webkit-slider-thumb {
    box-shadow: 0px 0px 0px #000000, 0px 0px 0px #007bff;
    border: 2px solid #007bff;
    height: 20px !important;
    width: 20px !important;
	border-radius: 10px !important;
    background: #007bff !important;
	cursor: pointer !important !important;
	-webkit-appearance: none !important;
	margin-top: -8px !important;
    }

/* custom thumb for Firefox */
.myClassFF::-moz-range-thumb {
		box-shadow: 0px 0px 0px #000000, 0px 0px 0px #007bff;
		border: 1px solid #007bff;
		height: 20px !important;
		width: 20px !important;
		border-radius: 10px !important;
		background: #007bff !important;
		cursor: pointer !important !important;
		-moz-appearance: none !important;
		margin-top: -8px !important;
	}
        /* custom thumb for Microsoft */

.myClassMS::-ms-thumb {
		box-shadow: 0px 0px 0px #000000, 0px 0px 0px #3071A9;
		border: 1px solid #007bff;
		height: 20px !important;
		width: 20px !important;
		border-radius: 10px !important;
		background: #007bff !important;
		cursor: pointer !important !important;
		margin-top: -8px !important;
	}
        /* hide default range styling */
	input[type=range] {
		-webkit-appearance: none;
		margin: 10px 0;
		height: 8px;
		width: 100%;
		border: 1px solid white;
	}

        /* hide default focus styling */
	input[type=range]:focus {
		outline: none;
	}

        /* get rid of weird dotted outline around range in Firefox */
	input[type=range]::-moz-focus-outer {
        border: 0;
    	outline: none;
        }
        /* custom range styling for Safari, Opera, and Chrome */
	input[type=range]::-webkit-slider-runnable-track {
		width: 100%;
		height: 8px;
		cursor: pointer;
		animate: 0.2s;
		box-shadow: 0px 0px 0px #000000, 0px 0px 0px #3071A9;
		border-radius: 1px;
		border: 0.5px solid #d3d3d3;
	}
        /* custom range styling for Firefox */
	input[type=range]::-moz-range-track {
		width: 100%;
		height: 8px;
		cursor: pointer;
		animate: 0.2s;
		box-shadow: 0px 0px 0px #000000, 0px 0px 0px #dbdbdb;
		border-radius: 1px;
		border: 0.5px solid #aeacac;
	}
       /* custom range styling for Microsoft */
	input[type=range]::ms-track {
		width: 100%;
		height: 8px;
		cursor: pointer;
		animate: 0.2s;
		box-shadow: 0px 0px 0px #000000, 0px 0px 0px #007bff;
		background: transparent;
		border-color: transparent;
		color: transparent;
	}
        /* hide default thumb in Opera, Safari, Chrome */
	input[type=range]::-webkit-slider-thumb {
		border: 0px;
		height: 0px;
		width: 0px;
		border-radius: 0px;
		-webkit-appearance: none;
	}
        /* hide default thumb in Firefox */
	input[type=range]::-moz-range-thumb {
		-webkit-appearance: none;
		border: none;
		height: 0px;
		width: 0px;
		border-radius: 0px;
		-moz-appearance: none;
	}
       /* hide default thumb for Microsoft */
       input[type=range]::-ms-thumb {
		-webkit-appearance: none;
		border: none;
		height: 0px;
		width: 0px;
		border-radius: 0px;
	}
</style>

{% endblock %}

{% block content %}

    <div style="position: absolute; top: 30px; right: 30px; width: 300px; text-align:right; cursor:pointer; color: dimgrey;">
        <u>
            <a onclick="window.open('{% static 'pp_Instructions3.html' %}', '_blank', 'location=yes, height=570,width=520,scrollbars=yes,status=yes');">
                Click to review previous instructions
            </a>
        </u>
    </div>

    <p>
        The illustrated word is  <b> <i>  {{ word }} </i> </b>.
    </p>

        The creator of this illustration describes it as follows:
        <br>
<br>
        <p>
            <b> <i> {{ promo }} </i> </b>
        </p>
    <br>
    <u> Recognizability </u>
    <br>


     <label class="col-form-label"> Please use the slider to <b> indicate the percentage of raters that you think recognized the illustrated word </b> based on the illustration only.
    </label>

    <br>
    <div class="row">
    <div class="input-group-prepend">
        <span class="input-group-text">0%</span>
    </div>
    <div class="slidecontainer">
        <input type="range" min="0" max="100" step="1" class="slider" id="id_promo_rec" name="guess_recog">
    </div>
    <div class="input-group-append">
        <span class="input-group-text">100%</span>
    </div>
    </div>
<div class="row">
    <div class="col">
        <p><span id="rec1"></span></p>
    </div>
    <div class="col">
        <p><span id="rec2"></span></p>
    </div>
</div>
 <br>
<form>

    <div class="form-group required">
        <u> Originality</u> <br>
        <label class="col-form-label" for="id_guess_orig0">Do you think this illustration is <b> original </b> ?</label>
        <br>
         <i> (Keep in mind: An illustration is original, if no other creator illustrated the same word in a set of 50 illustrations.) </i>
        <div class="controls  field-guess_orig">
            <ul id="id_guess_orig">
                <li>
                    <label for="id_guess_orig0">
                        <input type="radio" name="guess_orig" value="1" required="" id="id_guess_orig0" class="form-check-input" oninvalid="this.setCustomValidity('Please choose an option.')" onclick="this.setCustomValidity('')">
                        Yes
                    </label>
                </li>

                <li>
                    <label for="id_guess_orig1">
                        <input type="radio" name="guess_orig" value="0" required="" id="id_guess_orig1" class="form-check-input" onclick="document.getElementById('id_guess_orig0').setCustomValidity('')">
                    No
                    </label>
                </li>
            </ul>
        </div>
    </div>
<br>
               <div class="form-group required">
                   <u> Gender </u> <br>
        <label class="col-form-label" for="id_guess_gender0">What do you think is the creator's <b> gender </b>?</label>
        <div class="controls  field-guess_gender">
            <ul id="id_guess_gender">
                <li>
                    <label for="id_guess_gender0">
                        <input type="radio" name="guess_gender" value="1" required="" id="id_guess_gender0" class="form-check-input" oninvalid="this.setCustomValidity('Please choose an option.')" onclick="this.setCustomValidity('')">
                        Female
                    </label>
                </li>

                <li>
                    <label for="id_guess_gender1">
                        <input type="radio" name="guess_gender" value="0" required="" id="id_guess_gender1" class="form-check-input" onclick="document.getElementById('id_guess_gender0').setCustomValidity('')">
                    Male
                    </label>
                </li>
            </ul>
        </div>
    </div>

</form>




<button class="my_nextbutton" id="next">Next</button>
<!--  required oninvalid="validateguess(document.getElementById('guess').value)" oninput="validateguess(document.getElementById('guess').value)"
-->
{% endblock %}

{% block scripts %}

<script>
var slider1 = document.getElementById("id_promo_rec");
var output1_1 = document.getElementById("rec1");
var output1_2 = document.getElementById("rec2");
slider1.oninput = function() {
    output1_1.innerHTML = '<b>' + this.value.toString() + '</b> <b> % </b> of raters <b> recognized </b> the illustrated word' ;
    output1_2.innerHTML = '<b>' + (100-this.value).toString() + '</b> <b> % </b>  of raters were <b>not</b> able to recognized the illustrated word' ;
    slider1.classList.add("myClass","myClassFF","myClassMS");
    slider1.style.background = 'linear-gradient(to right, darkred ' + slider1.value + '%, dodgerblue ' + slider1.value + '%)'
}

var click1 =0;
console.log(click1);

document.getElementById("id_promo_rec").onclick=setClick1;
    function setClick1() {
        click1=1;
        console.log("click1 is");
        console.log(click1);
        document.getElementById("id_promo_rec").setCustomValidity('');
    }

document.getElementById("next").onclick=validateForm;
    function validateForm() {
        const first = document.getElementById("id_promo_rec");

        if (click1 !== 1) {
            console.log("ist click1=0?");
            first.setCustomValidity("Please answer this question");
        }
        else {
        }
    }

    /*
    	$(document).ready(function () {
		$('input[name=happy').on('input change', function () {
	  		$('input[name=happy]').addClass('myClass').addClass('myClassFF').addClass('myClassMS');
	  	});
	  	$('input[name=frustrated').on('input change', function () {
	  		$('input[name=frustrated]').addClass('myClass').addClass('myClassFF').addClass('myClassMS');
	  	});
	  	$('input[name=successful').on('input change', function () {
	  		$('input[name=successful]').addClass('myClass').addClass('myClassFF').addClass('myClassMS');
	  	});
	});
    */
</script>
{% endblock %}