I am working in a market research field, so my programming code will be different than a regular development programming code.

Please click the link below to see the image.

https://ibb.co/6BxYPVv

My client wants a range slider below a text box and wants it to be moved automatically based on the number of words entering in the text box. The slide should reach the end level if a respondent entered at least 50 words. It seems to reward people for typing more.

I tried to convert the below syntax

<span ></span>

into below Perl script but it throws error in the 'return' statement

<input type="range" min="1" max="100"  id="myRange" value="
  [%
 
  Begin Unverified Perl
   
   
  return '<span ></span>';
   
  End Unverified
 
  %]
 ">

Please help me to correct this issue.

The complete set of my code is below.

<script>
// To count the number of words in a open end question
$(document).ready(function(){
    updateWordCount('Q1');
})
  
$(document).on('keyup', '#Q1', function(){
    updateWordCount('Q1');
})
  
function updateWordCount(Q1) {
    var matches = SSI_GetValue(Q1).match(/\S /g);
    var count = matches ? matches.length : 0;
    $('.'   Q1   '_wordcount').text(count);
     
}
 
</script>
 
<style>
/*Slider preparation
.slidecontainer {
  width: 100%;
}
 
.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 25px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}
 
.slider:hover {
  opacity: 1;
}
 
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  background: #04AA6D;
  cursor: pointer;
}
 
.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  background: #04AA6D;
  cursor: pointer;
}
</style>
 
<div >
 <span ></span>
  <input type="range" min="1" max="100"  id="myRange" value="
  [%
 
  Begin Unverified Perl
   
   
  return '<span ></span>';
   
  End Unverified
 
  %]
 ">
 </div>

This is the error I get,

"Bareword 'Q1_wordcount' not allowed while "strict subs" in use at (eval 17) line 1."

I tried to write the below HTML code

<input type="range" min="1" max="100"  id="myRange" value="0">

into below dynamic code (this is our market research method to include Perl script in a HTML tag)

 <input type="range" min="1" max="100"  id="myRange" value="
  [%
 
  Begin Unverified Perl
   
   
  return '<span ></span>';
   
  End Unverified
 
  %]
 ">

Please let me know in case of any questions.

CodePudding user response：

Details are commented in example

// Bind "input" event to <textarea>
$('.text').on('input', wordCounter);

function wordCounter(event) {
  // Get the string value of .text
  const $count = $(this).val();
  /*
  Split that string value at every space into an array then return it's .length
  */
  const words = $count.split(' ').length;
  // Assign the word count value to <output> and <input>
  $('.display, .slider').val(words);
}

html {
  font: 300 2ch/1.2 'Segoe UI'
}

.box {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  width: max-content;
  padding-top: 12px;
}

input,
textarea {
  font: inherit;
}

.text {
  width: 87.5vw;
  padding: 4px 8px;
  resize: vertical;
}

.slider {
  -webkit-appearance: none;
  width: 90vw;
  height: 25px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  transition: opacity .2s;
  pointer-events: none;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  background: #04AA6D;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  background: #04AA6D;
}

.display {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 90vw;
  min-height: 25px;
  font-family: Consolas;
}

<fieldset >
  <textarea class='text' rows='5'></textarea>
  <output class='display'>0</output>
  <input class='slider' type='range' min="0" max="100" value="0" readonly>
</fieldset>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>