oTree Forum >

Word Counter in a LongStringField

#1 by Roger97 (edited )

Hey there! My experiment includes a page in which users have to enter a piece of text (using a LongStringField model). We're thinking about adding a word counter. I guess I need to write some JAVA script but I'm not so familiar with it. Can anyone help me?

#2 by Rok

Hello,

Maybe something like this: (jsfiddle) https://jsfiddle.net/j8gchmsw/

Copy all of the below into your html file. Add name="yourVariableName" to textarea to save the text to your variable.

<style>
    .word-counter {
      display: block;
      text-align: right;
      margin-top: 5px;
      font-size: 0.9em;
      color: #6c757d;
    }
</style>

<div class="container mt-5">
    <div class="form-group">
      <label for="exampleTextarea">Enter your text:</label>
      <textarea class="form-control" id="wordCountTextarea" rows="5" oninput="updateWordCount()"></textarea>
      <span class="word-counter" id="wordCounter">Words: 0</span>
    </div>
</div>

<script>
    function updateWordCount() {
      const text = document.getElementById('wordCountTextarea').value;
      const words = text.trim().split(/\s+/).filter(word => word.length > 0);
      document.getElementById('wordCounter').textContent = 'Words: ' + words.length;
    }
</script>

#3 by Roger97

Thank you Rok! Super grateful :)

Write a reply

Set forum username