String input with suggest list

Note. The task interface configuration guide describes the features of the HTML/JS/CSS editor. You can also try creating a task interface in the Template Builder.
Contains text suggestions that are displayed when the performer points the cursor at the input field. There are two types of text suggestions:
  • Universal suggestions used in all tasks.
  • Individual suggestions for different tasks.
  1. Set the array of suggestion strings in the JS code ( getTemplateData method) to include it in the project's input data set:

    exports.Task = extend(TolokaHandlebarsTask, function (options) {
      TolokaHandlebarsTask.call(this, options);
    }, { 
      getTemplateData: function() {
        var data = TolokaHandlebarsTask.prototype.getTemplateData.apply(this, arguments);
        data. < array name > = ['string 1', 'string 2', ...
            'строка n'
        ];
        return data;
    },
      onRender: function() {
        // Generated DOM element for the task (available via #getDOMElement()) 
      },
      onDestroy: function() {
        // Task is completed. Global resources can be released (if used)
      }
    });
    
    function extend(ParentClass, constructorFunction, prototypeHash) {
      constructorFunction = constructorFunction || function () {};
      prototypeHash = prototypeHash || {};
      if (ParentClass) {
        constructorFunction.prototype = Object.create(ParentClass.prototype);
      }
      for (var i in prototypeHash) {
        constructorFunction.prototype[i] = prototypeHash[i];
      }
      return constructorFunction;
    }
    Example
    exports.Task = extend(TolokaHandlebarsTask, function (options) {
      TolokaHandlebarsTask.call(this, options);
    }, { 
      getTemplateData: function() {
        var data = TolokaHandlebarsTask.prototype.getTemplateData.apply(this, arguments);
        data.countries = ['Poland', 'Lithuania', 'Russia', 'Belarus', 'Latvia', 'Germany', 'France'];
        return data;
    },
      onRender: function() {
        // Generated DOM element for the task (available via #getDOMElement()) 
      },
      onDestroy: function() {
        // Task is completed. Global resources can be released (if used)
      }
    });
    
    function extend(ParentClass, constructorFunction, prototypeHash) {
      constructorFunction = constructorFunction || function () {};
      prototypeHash = prototypeHash || {};
      if (ParentClass) {
        constructorFunction.prototype = Object.create(ParentClass.prototype);
      }
      for (var i in prototypeHash) {
        constructorFunction.prototype[i] = prototypeHash[i];
      }
      return constructorFunction;
    }
  2. Add the {{field type="suggest" name="< output field name>" source=<array name>}} component to the HTML code. Example:

    {{field type="suggest" name="result" source=countries allowCustomInput=true}}
Parameters

Parameter

Overview

Required

Default value

type

Field type: suggest — String input field with suggestions.

yes

no

name

Attribute for the output data field. Contains the output field name.

yes

no

source

Name of array with suggested strings. For example: source=countries. The array is defined in the JS-code of the project ( getTemplateData method).

yes

no

allowCustomInput

Whether the performer can ignore suggestions and enter their own string.

no

false
validation-show

The position of popup hints (displayed if the response didn't pass validation). The position is relative to the input field.

Supported values:

  • Above the input field: "top-left", "top-center", "top-right".

  • Below the input field: "bottom-left", "bottom-center", "bottom-right".

  • To the left of the input field: "left-top", "left-center", "left-bottom".

  • To the right of the input field: "right-top", "right-center", "right-bottom".

  • Don't display the message ("false").

no

"top-left"
placeholder

The text to display in the empty field.

Note. If value is set, the input field shows value instead of placeholder.

no

no

hotkey

Shortcut for setting focus on the field.

no

no

value

The value to write in responses if the performer didn't fill in the field.

Note. Value is displayed in the empty field instead of placeholder.

no

no

class

The CSS class for the field. For example: class="mytask_field".

no

".field" ".field_type_suggest"