基于文本框中字数的自动移动范围滑块- Perl脚本

Question

我在市场研究领域工作，所以我的编程代码将不同于常规的开发编程代码。

请点击下面的链接查看图片。

https://ibb.co/6BxYPVv

我的客户希望在文本框下面有一个范围滑块，并希望它根据文本框中输入的字数自动移动。如果被申请人输入了至少50个单词，幻灯片应该达到末尾的水平。它似乎奖励人们打字更多。

我试图转换以下语法

<span class="Q1_wordcount"></span>

在下面的Perl脚本中，但是它会在‘返回’语句中抛出错误。

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

请帮我改正这个问题。

下面是完整的代码集。

<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 class="slidecontainer">
 <span class="Q1_wordcount"></span>
  <input type="range" min="1" max="100" class="slider" id="myRange" value="
  [%
 
  Begin Unverified Perl
   
   
  return '<span class="' . Q1_wordcount . '"></span>';
   
  End Unverified
 
  %]
 ">
 </div>

这就是我遇到的错误，

不允许使用“Q1_wordcount”这个词，而在第1行使用“严格的subs”。

我试图编写以下HTML代码

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

进入下面的动态代码(这是我们在HTML标记中包含Perl脚本的市场调研方法)

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

如果有任何问题，请告诉我。

Answer 1

详细信息在示例中有注释

// 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 class="box">
  <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>

​