[Solved] Custom Settings in Custom Question

0

Hi, 

I’m trying to build a custom question and need to include some custom settings which can be set when using the question.

I could not find a documentation on how to specify these there is just this example:

https://script.surveygizmo.com/help/article/link/custom-questions

l_label;text;Label for 10;Extremely Likely
r_label;text;Label for 0;Extremely Unlikely
order;choice;Order;Descending;Ascending;Descending

And this is not working as the default values are not displayed and the order select only has the Descending option.

Is there a documentation or more examples somewhere?

Also, how would you test the custom question?

Is there a way to debug the script from the SCRIPT tab or the CSS/JS tab?

Could someone explain the difference or the context in which the scripts from these tabs are executed?

 

Would be great if anyone could help me.

Cheers

Kai

kaiholten90 asked

    Best answer

    0

    Hi Kai! I admire your tenacity for taking on the seldom-used Custom Question feature, and would be happy to help answer your questions.

    Custom Settings

    Custom settings are added one per line, and follow this convention:

    name; type; title; options; default

    name: This is the name you will use to refer to your custom setting from your “Script”, using the this.getCustomProperty(name) function.

    type: This determines the type of widget to use for your custom setting. Available options include “text” and “textarea” (open text, in short and long form), “choice” (dropdown menu), and “image” (textbox containing an image URL).

    title: This is what will be seen in the Options tab, while editing your question.

    options: A comma-separated list of options, only used for the “choice” type.

    default: The default value that will be used for your custom setting, if a user does not edit the question and save their own value.

    In your example above, the “order” custom setting only displays the “Descending” option because you have used a semi-colon, instead of a comma, to separate it from “Ascending”.

    Default Values

    These are not displayed to the user when viewing the Options tab, while editing your question. They are only available through the this.getCustomProperty(name) function, in your “Script”, I am sorry to say. It seems this was not included in the original design, and the Custom Question feature is so seldom used it has not been added since :(

    “Script” tab vs “CSS/JS” tab

    Both the javascript you place in the “Question Script” field as well as in the “Client Side Javascript” field will be loaded with your question in a survey, in the same <script> tag no less! The primary difference is the built-in functions you have access to from within the “Question Script” field.

    This includes this.getCustomProperty(name) that you’re already familiar with, as well as a whole host of others:

    this.getOptions()
    this.getRenderContext()
    this.getQuestionSku()
    this.getSectionSku()
    this.getSurveyID()
    this.getBaseID()
    this.getOptionSku(optionName)
    this.getCustomProperty(propName)
    this.getFormElement(elName)
    this.getStorageValue()
    this.getMultiStorageValue(optionid)
    this.getElement(elName)
    this.setStorageValue(elValue)
    this.setMultiStorageValue(optionid, elValue)

    These functions are actually defined just below your javascript (in the same <script> tag), when loading a live survey with your custom question on it. I encourage you to inspect the DOM to view what each of these functions does :)

    In addition to the custom functions you have available to you, note the structure of the example “Script”. This is an object literal, with some automatic behavior built in to the “onload” and “onsubmit” properties. As you may expect, a function you define for the “onload” property will be executed upon page load, and a function you define for the “onsubmit” property will be executed as the page is being submitted. Here’s a simplified example you can play around with to understand this better:

    {

    onload: function() {
    console.log(“The survey just loaded!”);
    },

    onsubmit: function() {
    alert(“The page is being submitted!”);
    }

    }

    In contrast, the “Client Side Javascript” field expects plain javascript, and has no special built-in functions or behaviors. The only benefit I can see to using this field would be organizing your code, if you happen to have any javascript you want to run regardless of custom settings/etc.

    Testing and Debugging

    Testing your custom question is simple—add it to a survey! Because you now know that both your “Question Script” and “Client Side Javascript” are loaded and run on the survey page, debugging is also simple; just call console.log() or alert() from your javascript as you see fit.

    I also recommend reviewing the data collected by your custom question. A few places to check would be the Individual Responses tab, in a Summary Report, and in the CSV/Excel export. This is the primary goal of a survey question, after all—to collect usable data :)

    I hope this information helps in your survey adventures!

    Nathan - Survey Astronaut answered
      ×

      Login

      Question stats

      • Active
      • Views1497 times
      • Answers1 answer
      • Followers0 followers