Add new response options: checkboxes, radio buttons, and drop-down lists. Use a radio button or a drop-down list when you want Tolokers to choose one response option out of several suggested ones. Checkboxes let Tolokers select any combination of the suggested responses.
For your convenience, here is the ready-made code for the “Photos of product and price tag” template, in which each of the fields is added to the first response button once. Use this code for self-check. You can find our additions to the code by searching for the word “customization”.
Now let's see how to add each field manually.
The template uses a special component for easier development. Learn more in Checkbox.
Add a new field:
checkbox_result
— checkbox (boolean).
Add a field for each checkbox you need and give them unique names. For example, if you need three checkboxes, add three fields with the names checkbox_result1
, checkbox_result2
, and checkbox_result3
.
The HTML code consists of blocks describing various interface elements. Each block may contain other blocks within it. There may be several nesting levels. For example, the block with a response button description contains other blocks with input fields. Each field contains other elements, such as a title and a comment field.
Each block looks like this:
<div class="block_name"><!-- code for the block that may contain nested blocks -->...</div>
Find the main
block (it starts with <div class="main">
). It contains several main_block
blocks within it, each describing one of the buttons. For example, the “Photos of product and price tag” template has 4 response buttons, which means that its main
block contains 4 main_block
blocks for each of the buttons.
Each button has a name for accessing its properties. For example, the buttons in the “Photos of product and price tag” template are named btn_ok
, btn_no_price
, btn_no_item
, and btn_no_shop
. Remember the name of the button that you are adding new fields to in the code.
The main_content
block inside main__block
contains all the fields for the selected button. The description of each field is located in main__content-block
.
Find the button in the main__block
block, then find the main__content-block
field where you want to add a new field and paste the following code after it:
<!-- checkbox --><div class="main__content-block"><div class="main__content-title main__content-title_req">{{texts.btn_ok.question_new_checkbox.title}}</div><div class="main__text">{{texts.btn_ok.question_new_checkbox.description}}</div><div class="main__box">{{field type="checkbox" name="checkbox_result" label="checkbox" size="L"}}</div></div>
In this code, a checkbox is added to the button with the name btn_ok
. If you added a checkbox to another button, replace btn_ok
with the relevant button's name.
The checkboxes are listed in themain__box
blocks as strings:
{{field type="checkbox" name="checkbox_result" label="checkbox" size="L"}}
In the code above, one checkbox is added. The output value will be passed to the checkbox_result
field that you added to the output specification.
To add multiple checkboxes, paste the same strings in the code for each of the fields you added to the output specification. Change the value of the name
parameter for each of the checkboxes to what you named them in the output specification. For example, if you added new fields for three checkboxes to the output specification, insert this string three times and then change the "checkbox_result"
values in each line to what you named them in the specification.
Change the value of the label
parameter. It contains a caption displayed next to the checkbox.
Update the acceptance mode.
The review
block contains the code for each button in the acceptance mode. This code is located in the following blocks:
{{#if (equal verdict "ok")}}<!-- code for the "ok" button in acceptance mode --><div class="review__block"><!-- code for the "ok" button field in acceptance mode -->...</div>...{{/if}}
The value of the response button selected by the Toloker is passed to the verdict
variable specified in the output specification.
For example, in the “Photos of product and price tag” template, 4 values are described for 4 buttons: ok
, no_price
, no_item
, and no_shop
.
The review__block
blocks contain a description of each field for this button.
Find the button by searching for the string {{#if (equal verdict "response_button_value")}}
, then find the review__block
, field where you want to add a new field and insert the following code after it:
<!-- checkbox --><div class="review__block"><div class="review__title">{{texts.btn_ok.question_new_checkbox.title}}</div><div class="review__box">{{field type="checkbox" name="checkbox_result" label="checkbox" size="L"}}</div></div>
In this code, a checkbox is added to the button with the name btn_ok
. If you added a checkbox to another button, replace btn_ok
with the relevant button's name.
The checkboxes are listed in the review__box
block as strings:
{{field type="checkbox" name="checkbox_result" label="checkbox" size="L"}}
In the code above, one checkbox is added. The output value will be passed to the checkbox_result
field that you added to the output specification.
To add multiple checkboxes, paste the same strings in the code for each of the fields you added to the output specification. Change the value of the name
parameter for each of the checkboxes to what you named them in the output specification. For example, if you added new fields for three checkboxes to the output specification, insert this string three times and then change the "checkbox_result"
values in each line to what you named them in the specification.
Change the value of the label
parameter. It contains a caption displayed next to the checkbox.
The JS code consists of blocks describing various interface elements. These blocks can be nested (buttons contain a set of fields, fields contain a set of elements, and so on). Each block is enclosed in curly brackets.
The elements are described as follows:
'property': 'value'
The value can also consist of several properties, in which case it is enclosed in curly brackets and forms the next level of nesting.
The texts
constant at the very beginning of the file stores all texts for each button.
Each button has a name for accessing its properties. For example, the buttons in the “Photos of product and price tag” template are named btn_ok
, btn_no_price
, btn_no_item
, and btn_no_shop
. Remember the name of the button that you are adding new text to in the code.
For example, in the “Photos of product and price tag” template, the texts for the btn_ok
button are located in the following code block:
var texts = {//<common header text>'btn_ok': {'title': 'I found the price tag for the product','question_1': {//<texts for the first field (photos of the store's front)>},'question_2': {//<texts for the second field (product photos)>},'question_3': {//<texts for the third field (photo of the price tag)>}},
To add the texts for checkboxes, put a comma after the curly bracket that closes the last field and paste the following code:
'question_new_checkbox': {'title': 'Checkbox','description': 'Select an answer'}
Change the values of the title
and description
properties. The title
property contains a title displayed above the group of checkboxes, and the description
property contains a question for Tolokers.
Validation.
The checkbox can be checked or unchecked, and both values are valid, so there are no separate validation rules for checkboxes.
If you mark the checkbox as required in the output specification, it does not mean that it must be selected. Checkboxes are boolean and take one of two values: true
or false
.
Last updated: February 14, 2023