HTML:
  
<div class="job">  
  
   Please click here 
  <input type="checkbox" id="myCheck" class="checkbox" autofocus="1" /> to display the image for 10 seconds.
  <p id="new_text3" class="new_text3"></p>
  <input type="hidden" id="wasChecked" class="wasChecked" value="0" />
  <img class="liquid-image" src="{{url1}}" style="display:none" />
  <p id="new_text" class="new_text"></p>
  <p id="new_text2" class="new_text2"></p>
  <!-- Slider  -->
  <span id="min" class="range_min" style="display:none">250</span>
  <input id="range" type="range" min="250" max="450" step="1" value="" class="range" list="references" style="display:none" />
  <span id="max" class="range_max" style="display:none">450 points</span>
  <datalist id="references">
    <option>250</option>
    <option>450</option>
    
  </datalist>
  <cml:text label="" value="" validates="required" id="result" class="result" name="result" style="opacity:0.3" aggregation="avg" gold="true"></cml:text>
</div>





JS:

function appear(elm, i, step, speed){
    var t_o;
    //initial opacity
    i = i || 0;
    //opacity increment
    step = step || 5;
    //time waited between two opacity increments in msec
    speed = speed || 50; 

    t_o = setInterval(function(){
        //get opacity in decimals
        var opacity = i / 100;
        //set the next opacity step
        i = i + step; 
        if(opacity > 1 || opacity < 0){
            clearInterval(t_o);
            //if 1-opaque or 0-transparent, stop
            return; 
        }
        //modern browsers
        elm.style.opacity = opacity;
        //older IE
        elm.style.filter = 'alpha(opacity=' + opacity*100 + ')';
    }, speed);
}

// disspear

   function disappear(obj) {
   appear(obj, 100, -100, 5000);
}

// pause all (naive solution)

function pausecomp(ms) {
ms += new Date().getTime();
while (new Date() < ms){}
} 

////////////////////////////////////////////////////////////////////


// Code to set independent actions for each question repetition
//The slider will appear with the click on the check box

var jobs = document.getElementsByClassName("job");

for (var i = 0; i < jobs.length; i++) {

  var job = jobs[i];
  
  var checkbox = job.getElementsByClassName("checkbox")[0];
  
  checkbox.addEventListener("click", function() {
    
    // with the click the examples in the instructions will dissapear 
    var tableCF = document.getElementsByClassName("cf-alternate-rows")[0];
    tableCF.style.visibility = 'hidden';
    
    // with the click the instructions will collapse
    // var introCollapse = document.getElementsByClassName("well collapse")[0];
    // introCollapse.hide();
    
    // Check
    // aa=this.parentNode.getElementsByClassName("wasChecked")[0].value;
    // alert(aa);
    
    if(this.parentNode.getElementsByClassName("wasChecked")[0].value==0){
    
    // Check
    //  alert('inside');
    
    // The image is displayed only once
      this.parentNode.getElementsByClassName("liquid-image")[0].style.visibility = 'visible';
      this.parentNode.getElementsByClassName("wasChecked")[0].value=1;
      //this.parentNode.getElementsByClassName("checkbox")[0].style.visibility = 'hidden';
     this.parentNode.getElementsByClassName("checkbox")[0].style.display = 'none';
    //The slider muss appear with the click on the check box
      this.parentNode.getElementsByClassName("range")[0].style.display = '';
      this.parentNode.getElementsByClassName("range_min")[0].style.display = '';
      this.parentNode.getElementsByClassName("range_max")[0].style.display = '';
      
      this.parentNode.getElementsByClassName('new_text2')[0].innerHTML = "Use the slider to select the number of points between 100 and 600 points.";
  
      this.parentNode.getElementsByClassName('new_text')[0].innerHTML = 'What is your estimation about the number of points?';
      
      this.parentNode.getElementsByClassName('result')[0].style.opacity = '1';
      
      this.parentNode.getElementsByClassName('liquid-image')[0].style.display = '';
    
    //  this.parentNode.getElementsByClassName("result")[0].style.visibility = 'visible';
    
    //when the check box is checked the image mus dissapear  after 5 seconds
    
     disappear(this.parentNode.getElementsByClassName('liquid-image')[0]);
    
    }
    
  }, false); 
  
  
  job.getElementsByClassName("liquid-image")[0].style.visibility = 'hidden';
  
  // Change to 'read only' for the textbox
   var input = job.getElementsByClassName("result")[0].getElementsByClassName("result")[0];
   input.readOnly= true;
   
  // Change the value in the box when the slider is activated 
  var range = job.getElementsByClassName("range")[0];
  range.addEventListener("input", function() {
    var res = this.parentNode.getElementsByClassName("result")[0].getElementsByClassName("result")[0];
     res.value = this.value;
       }, false); 
        
}