Scroll

Hierarchy

Follow
Summary This article give you access to the Hierarchy adc 2.0 Javascript control. You also got access to a live example, qex file example and details of the parameters available for this control.
Applies to askiadesign
Written for Scriptwriters and survey authors
Keywords adc; adc2; javascript; jquery; control; design; askiadesign

Table of contents:

Definition

  • To access to the live survey, click on the picture above.
  • To download the qex file, click here
  • To download the ADC control, click here
  • Version of the adc: 1.1.1

This control is compatible with a chapter.

Parameters Type Comments and/or possible value
General
Javascript database file path String ??ResPath??yourjsonfile.js
[REQUIRE]
Path of the Javascript database file to include in the document.
This property is dynamic, we recommend the usage of the ??ResPath?? and include the javascript file in the survey resources.

The file must be generated with
http://www.askia.com/Downloads/dev/adc/hierarchy/CSVConverter.html

It contains the following code format:

Hierarchy.databases["name_of_database"] = {/* Database information */ };

Example:

       Hierarchy.databases["vehicles"] = {
           /* Definition of levels */
           "levels" : [
               {
                   "id" : "brand_id",
                   "name" : "brand",
                   "liveValues" : ["brand_id"]
               },
               {
                    "id" : "model_id",
                    "name" : "model",
                    "liveValues" : ["model_id", "model_code"]
               },
               {
                    "id" : "version_id",
                    "name" : "version"
               },
               {
                    "id" : "option_id",
                    "name" : "option"
               }
           ],
           /* Map name / index of table headers */
           "header" : {
               "brand_id" : 0, 
               "brand" : 1, 
               "model_id" : 2, 
               "model" : 3, 
               "model_code" : 4, 
               "version_id" : 5, 
               "version" : 6, 
               "option_id" : 7, 
               "option" : 8, 
               "id" : 9, 
               "code" : 10
           }, 
           /* Records. Array of lines which contains an array of columns 
              lines[columns[]] 
           */
           "records" : [
               ["1", "CITROEN", "7", "C2", "Mo1", "24", "VU", "1", "CDV", "1", "A1"],
               ["1", "CITROEN", "9", "C4", "Mo1", "24", "VU", "1", "CDV", "2", "A2"],
               ["1", "CITROEN", "8", "C3", "Mo1", "24", "VU", "1", "CDV", "3", "A3"],
               ["2", "FIAT", "20", "Ducato 30", "Mo11", "19", "van", "2", "LCV", "11", "A11"],
               ["2", "FIAT", "21", "Ducato 33", "Mo11", "19", "van", "2", "LCV", "12", "A12"],
               ["2", "FIAT", "22", "Ducato 35", "Mo11", "10", "light van", "2", "LCV", "13", "A13"]
           ]
       };
Database name String vehicles
[REQUIRE]
Name of the database as it appear in the Javascript database file
Values to save String [REQUIRE]
Name of fields separate with coma and surround by quotes or double-quotes.
It indicates the fields to save on the latest level selection.

Example:
"id", "code", "brand_id", "model_id", "model_code", "version_id", "option_id"
HTML Ids prefix String

[OPTIONAL]
Prefix of all HTML input Ids where the values will be saved.
It may be use if you have several instance of the Hierarchy ADC into the same page.

Example:

- If the field to save is "brand_id" and the prefix is "vehicle_", you must have a HTML input in your page with the id="vehicle_brand_id"

- If you use the control in a loop, you will need to have a different prefix for each iteration. You can use for instance !!CI(1)!!, so if the field to save is "brand_id" and the prefix is "vehicle!!CI(1)!!_", you must have a HTML input in your page with the id="vehicle!!CI(1)!!_brand_id"

Display name of levels String [REQUIRE]
Label of the dropdown for each levels.
Each level must have a display names even if it's an empty name.
All names must be surrounded by a double-quotes and separate with coma.

It is require to generate the right number of dropdown

Example:
"Brands", "Models", "Versions"
or if you have four levels
"", "", "", ""
Text of first dropdown options String [OPTIONAL]
Text of the first dropdown options for each levels.
All textes must be surrounded by a double-quotes and separate with coma.

Example:
"Please select a brands", "Please select a models", "Please select a versions"
Note: This option is used only if you set the "Dropdown size" parameter to 1 to show the levels as dropdown and not as list.
Orientation Combo box Vertical or Horizontal
Define if the different levels should be shown vertically or horizontally.
Default: Vertical
Horizontal space String [REQUIRE]
Size of the horizontal space between dropdown (pixel by default).
Works with the horizontal orientation
Default: 15px
Width of inputs String [REQUIRE]
Indicates the width (including the unit) to use for the both the search input and the dropdown list.

Default: 300px

You can also use other units, for instance 100%.
Dropdown size Number [REQUIRE]
Indicates the size of the dropdown list. It's the number of options visible before the scroll.

Default: 10

Note, if you want to use a dropdown menu instead of a list then set it to 1.
Not supported browser text String [REQUIRE]
Message to display to the non-supported browser

Default: Sorry this page uses Javascript code, please enable it
Search
Use search Combo box [OPTIONAL]
No search or Auto-generate search or Custom search input
Add the input search

Default: Auto-generate search
Id of custom search input String

[OPTIONAL]

Id of the open ended used for the search field if Custom search input was selected in Use Search

Label of search input String [OPTIONAL]
Text to use in the label of the search input.
Search fields String

[OPTIONAL]
Name of fields separate with coma and surround by quotes or double-quotes.

You can use one or several fields for the search.

It's require when using search.
It indicates in which fields to search.

Example:

"brand", "model"
Search at beginning Combo box [OPTIONAL]
Search at the beginning of the field value

Default: Yes
Separator of words in input search String

[OPTIONAL]
Separator of words in the input search.

Example:

If the separator is "+", the respondent have to enter it to search in different places:

"citroen + c2"

Will search "citroen" AND "c2"

Default: +

Min characters Number [REQUIRE]
Minimum number of characters entered before to trigger the search.

Default: 2

Note, if you set 0 then the value used will be the default one (2) so set a number >= 1
Behaviours
Display first level items Combo box Yes or No
Display first level items

Default: No
Auto select when 1 result found Combo box Yes or No
Auto select when only one result is found

Default: No
Sub-levels visibility Combo box Visibility of sub-levels when not activated.

It could be: "Visible", "Hidden" or "Disabled"

Default: Visible
Max results Number Maximum number of results to display in the dropdown.
Set 0 for unlimited results.

This option is useful if you have a huge database.

Default: 0

Example video

adc2-hierarchy from Askia on Vimeo.

Have more questions? Submit a request

Comments

  • Avatar
    Maurice Delaney

    Hi Jérôme,

    A very useful ADC, makes the whole JSON thing easy.

    Would it be possible to also have a "no options found" text field, similar to "Text of first dropdown options" field?

    Regards,

    Maurice

  • Avatar
    Jérôme Duparc

    Hi Maurice,

    Yes that's a good idea, will add this to the list of modifications for this adc.

    Thks for the feedback.

    Best Regards
    Jerome

  • Avatar
    Maurice Delaney

    Hi Jérôme,

    I see this ADC control is specified on a chapter.

    Would it be possible to save the search term in an open-ended question?

    We have a JSON-DB of town names where it's possible that the interviewer will misspell the name and therefore we would like to have the actual entered text in case we need to code it later.

    Maurice