Inhaltsverzeichnis

Text Inputs

The different text input questions are designed for different use cases:

JavaScript for Text Inputs

SoSci Survey employs JavaScript, for example to limit which characters (digits, letters, etc.) a respondent may use in a text input. Using JavaScript, the behavior of text inputs may be customised further.

Allow Formatting Text

The JavaScript library SCEditor (automatically available in SoSci Survey) allows to reconfigure text inputs in a way that respondents can format the text – like in a word processing software. For example, underline words, add emoticons, etc.

First, create a question of type „text input“ and a multi-line (!) text input in this question. To create a multi-line text input, set a height (e.g., 120 pixels) for the input.

Place the question on the appropriate page, using Compose Questionnaire.

Then, place an PHP code with the following content on the same page to load the SCEditor:

option('script', 'jQuery1.x');
option('script', 'SCEditor'); 

The next step is to create a new text element at „Text Elements and Labels“ (using the ID „jsSCEditor“, for example, and type „HTML code“) and add the following content:

<script type="text/javascript">
 
<!--
$(function() {
  // Replace all textarea's
  // with SCEditor
  $("textarea").sceditor({
    plugins: "xhtml",
    toolbar: "bold,italic,underline",
    emoticonsRoot: "../plugins/SCEditor/",
    style: "../plugins/SCEditor/minified/jquery.sceditor.default.min.css"
  });
});
 
// -->
</script>

Place this text element on the same page, below the question. The JavaScript code will allow formatting in all multi-line text inputs (<textarea>) in the page. To manipulate a single text input, only, replace $(„textarea“) by $(„#AB01_01“) in the JavaScript code, whereas „AB01_01“ is the ID of the text input.

You can set the available formattings in details. The first address is the line toolbar: … in the JavaScript. Check the Documentation of SCEditors for details.

Count/Limit Characters

You can easily limit the number of characters per text input, by selecting the input in the List of Questions.

With a little JavaScript you may also display the number of characters that the respondent has already written into the text input – or how many are left to be written. To do so, create a new text element in Text Elements and Labels (e.g., using the ID „jsCountChars“, type „HTML code“). Paste the following content into the text element.

<script type="text/javascript">
<!--
 
function addCounter(textID, displayID, limit) {
  if (limit) {
    limit = parseInt(limit);
  }
  var input = document.getElementById(textID);
  if (!input) {
    alert("No text input with ID " + textID + " found");
    return;
  }
  var display = document.getElementById(displayID);
  if (!display) {
    alert("Found no element with the ID " + displayID);
    return;
  }
  // Function to count and display
  function refresh() {
    var s = input.value.replace(/\r\n/g, "\r").replace(/\r/g, "\n");
    var res = s.length;
    if (limit) {
      res = limit - res;
    }
    // Clear the display tag
    while (display.lastChild) {
      display.removeChild(display.lastChild);
    }
    // Text to display
    var cnt = document.createTextNode(res);
    display.appendChild(cnt);
  }
  // Limit text length, optionally
  if (limit) {
    SoSciTools.checkChars(textID, "", limit);
  }
  // Refresh on every keystroke and other change
  SoSciTools.attachEvent(input, ["change","keyup"], refresh);
  // Refresh when displayed first
  refresh();
}
 
// Register text input
addCounter("%text%", "%display%", "%limit%");
 
// -->
</script>

Now, go to Compose Questionnaire and place the text input question on the appropriate page.

Further, you need to place an HTML tag on the page wherever the number of characters shall be displayed. This may be within the question title, in the text input's label or in a text element that you place below the text input question. The HTML element may look like this:

(<span id="AB01_01chars">-</span> characters)

Choose the ID at id as you like. But it must be unique on the page and must not be the same like an question or item ID (not only AB01_01, for example).

Then place th text element on the page, using the following PHP code – this must be below the text question, and below the element that contains the HTML tag, eventually.

text('jsCountChars', array(
  '%text%' => 'AB01_01',  // Put the text input's ID here
  '%display%' => 'AB01_01chars',  // Put the ID of the HTML tag to display the number of characters here
  '%limit%' => 20  // The number of allowed characters, or 0 to not set any limit
));

If you have chosen another ID than „jsCountChars“ for the text element, please adjust the first line accordingly. Then enter the input's ID, the tag's ID, and the number of allowed characters in the susequent lines.