DRAFT - Version 2 Qualtrics Survey Integration Documentation

NOTE: This integration requires knowledge of the JavaScript programming language.

Introduction

This describes how to embed the morphii technology into a Qualtrics survey. This integration encapsulates most of the the coding needed. Note that this is not the only way to integrate morphii into a Qualtrics survey, but this document focuses on using the integration.

Limitations

The integration does have limitations. This does not mean that these things cannot be done, just they are limitations for this integration implementation.

Hiding/showing required Qualtrics questions is not supported.
The integration is only supported on modern browsers. No support for old browsers such as IE8.
Save and restart survey from a page other than page 1.

Integration

Qualtrics survey questions that are associated with the morphii widget should be of question type: Descriptive Text.

Descriptive Text

The integration requires the ID (QID) assigned to a question. The ID can be found by inspecting the DOM or via the Tools menu on the Survey page.

QID via Survey UI

On the Survey page click Tools -> Auto-Number Questions. Then select Internal ID Numbering See below for example.

Auto-number

QID via DOM

Preview the survey. Right-click on the question in the preview window and select “Inspect”. The question IDs can be seen in the Developer Tools window. See below for example.

Question ID inspection

To add the integration, create a “dummy question” with the question type Descriptive Text in the Qualtrics survey. The JavaScript needed to setup the integration will be attached to this “dummy question”. It is recommended that this “dummy question” be the first question in the survey and can be used to show instructions and introduction text. Follow the Qualtrics instructions for adding custom JavaScript to a question. Add JavaScript

Descriptive Text

Below is canned JavaScript which can be used in the “dummy question” mentioned above. Note that this JavaScript should be placed in the Qualtrics.SurveyEngine.addOnload function. There are multiple sections that need to be modified in the following code.

Morphii account id and client key values must be entered at the top of the script in the accountId and clientKey variables.
To customize the Next/Previous button color, the properties in the buttonStyle will need to be updated.
The questions array needs to be updated. This is where morphiis are associated with each question. The morphii ids for each question may be different than the ones listed in this sample. Be sure to use the id (QID) assigned to the Descriptive Text questions in the questions array.
Optional: Additional information about audience, category, and timing.
Optional: custom logic when a morphii is selected can be added to the function onMorphiiSelectionChange.
Optional: custom logic when a user types into the morphii widget comment field the code will be in the function onMorphiiCommentChange.

Qualtrics.SurveyEngine.addOnload(function()
{
  // Configurable values: accountId, clientKey, buttonStyle, additionalInfo, and questions
  var accountId = '<ACCOUNT ID HERE>';
  var clientKey = '<CLIENT KEY HERE>';
  var buttonStyle = {
    background_color: '#c32432',
    focus_background_color: '#db3f4c',
    hover_background_color: '#ad202c',
    active_background_color: '#821821'
  };
  var additionalInfo = {
    audience: null, // 'customer', 'employee', 'patient', 'community', 'general', 'other'
    category: null, // 'satisfaction', 'engagement', 'hr', 'mood'
    timing: null    // 'pre-event', 'during-event', 'post-event', 'n/a'
  };

  var questions = [
    {
      id: 'QID2',
      required: true,
      comment: {
        show: true,
        required: false,
        maxlength: 512,
        label: {
          en: 'Please leave a comment'
        }
      },
      slider: {
        anchor_labels: {
          show: true
        }
      },
      instructions: {
        show: true
      },
      morphiiIds: [
        { id: '6363734358316589056', name: { en: 'Angry' }, weight: 1 },
        { id: '6362666072115564544', name: { en: 'Happy' }, weight: 2 },
        { id: '6363488681244622848', name: { en: 'Sad' }, weight: 3 },
        { id: '6363735117617217536', name: { en: 'Disgusted' }, weight: 4 },
        { id: '6362674737212084224', name: { en: 'Surprised' }, weight: 5 }
      ]
    },
    {
      id: 'QID7',
      required: false,
			comment: {
        show: true,
        required: false,
        maxlength: 512,
        label: {
          en: 'Please leave a comment'
        }
      },
      slider: {
        anchor_labels: {
          show: true
        }
      },
      instructions: {
        show: true
      },
      morphiiIds: [
        { id: '6362666072115564544', name: { en: 'Happy' }, weight: 1 },
        { id: '6363488681244622848', name: { en: 'Sad' }, weight: 2 },
        { id: '6363735117617217536', name: { en: 'Disgusted' }, weight: 3 },
        { id: '6362674737212084224', name: { en: 'Surprised' }, weight: 4 }
      ]
    },
    {
      id: 'QID11',
      required: false,
			comment: {
        show: true,
        required: false,
        maxlength: 512,
        label: {
          en: 'Please leave a comment'
        }
      },
      slider: {
        anchor_labels: {
          show: true
        }
      },
      instructions: {
        show: true
      },
      morphiiIds: [
        { id: '6363734358316589056', name: { en: 'Angry' }, weight: 1 },
        { id: '6362666072115564544', name: { en: 'Happy' }, weight: 2 },
        { id: '6363488681244622848', name: { en: 'Sad' }, weight: 3 },
        { id: '6362674737212084224', name: { en: 'Surprised' }, weight: 4 }
      ]
    }
  ];

  function onSelectionChange(event) {
    // Add custom logic when morphii is selected.
  }

  function onCommentChange(event) {
    // Add custom logic when text is entered into comment field.
  }
  // End configurable settings.


  // The code below should not be changed.
  if (!window._morphiiIntegration) {
    var survey = this;
    var scriptSrc =  'https://survey-integration.morphii.com/v2/qualtrics-integration.min.js';

    // Load the integration script if not already loaded.
    if (!isScriptAlreadyIncluded()) {
      var js = document.createElement('script');
      js.type = 'application/javascript';
      js.src = scriptSrc;
      js.onload = processSetup;
      document.body.appendChild(js);
    }
    else {
      processSetup();
    }
  }
  else {
    window._morphiiIntegration.setLangauge('${e://Field/Q_Language}');
  }

  // Initialize the integration.
  function processSetup() {
    var morphiiIntegration = new Morphii.QualtricsIntegration();
    if (morphiiIntegration) {
      var params = {
        response_id: '${e://Field/ResponseID}',
        survey_id: '${e://Field/SurveyID}',
        client_key: clientKey,
        account_id: accountId,
        button_style: buttonStyle,
        questions: questions,
        additional_info: additionalInfo,
        language: '${e://Field/Q_Language}',
        callbacks: {
          selection_change: onSelectionChange,
          comment_change: onCommentChange
        }
      };
      morphiiIntegration.init(survey, params, function(error, results) {
        if (results === false || error) {
          console.log('Error initializing integration: ' + JSON.stringify(error));
          alert('There was an error loading the survey. Please try again later.');
        }
        else {
          window._morphiiIntegration = morphiiIntegration;
        }
      });
    }
  }

  // Helper function to check if integration script is already loaded.
  function isScriptAlreadyIncluded() {
    var scripts = document.getElementsByTagName('script');
    for(var i = 0; i < scripts.length; i++) {
      if(scripts[i].getAttribute('src') === scriptSrc) {
        return true;
      }
    }
    return false;
  }
});

Account Id and Client Key

The Vizbii team will provide the account id and client key when the account has been provisioned. These values will look something like:

var accountId = '15521928';
var clientKey = 'db055eeb-af22-5c2b-b2df-e11eec55c789';

Button Style

The buttonStyle contains the colors used for the Next/Previous button. These include the background color for the normal, hover, active, and focus states.

var buttonStyle = {
  background_color: '#c32432',
  focus_background_color: '#db3f4c',
  hover_background_color: '#ad202c',
  active_background_color: '#821821'
};

Submit Buttons

Additional Information

The additionalInfo object contains information about items like audience, category, and timing. Valid property values:

audience: ‘customer’, ‘employee’, ‘patient’, ‘community’, ‘general’, ‘other’
category: ‘satisfaction’, ‘engagement’, ‘hr’, ‘mood’
timing: ‘pre-event’, ‘during-event’, ‘post-event’, ‘n/a’

var additionalInfo = {
  audience: 'customer',
  category: 'satisfaction',
  timing: 'post-event'
};

Questions Array

The questions array contains objects that define the morphiis to use for specific questions.

var questions = [
  {
    id: 'QID2',
    required: true,
    comment: {
      show: true,
      required: false,
      maxlength: 512,
      label: {
        en: 'Please leave a comment'
      }
    },
    slider: {
      initial_intensity: 0.2,
      show_animation: true,
      anchor_labels: {
        show: true
      }
    },
    instructions: {
      show: true
    },
    morphiiIds: [
      { id: '6363734358316589056', name: { en: 'Angry' }, weight: 1 },
      { id: '6362666072115564544', name: { en: 'Happy' }, weight: 2 },
      { id: '6363488681244622848', name: { en: 'Sad' }, weight: 3 },
      { id: '6363735117617217536', name: { en: 'Disgusted' }, weight: 4 },
      { id: '6362674737212084224', name: { en: 'Surprised' }, weight: 5 }
    ]
  },
  {
    id: 'QID7',
    required: false,
    comment: {
      show: true,
      required: false,
      maxlength: 512,
      label: {
        en: 'Please leave a comment'
      }
    },
    slider: {
      initial_intensity: 0.2,
      show_animation: false,
      anchor_labels: {
        show: true
      }
    },
    instructions: {
      show: true
    },
    morphiiIds: [
      { id: '6362666072115564544', name: { en: 'Happy' }, weight: 1 },
      { id: '6363488681244622848', name: { en: 'Sad' }, weight: 2 },
      { id: '6363735117617217536', name: { en: 'Disgusted' }, weight: 3 },
      { id: '6362674737212084224', name: { en: 'Surprised' }, weight: 4 }
    ]
  }
];

id

The id property is the question id. For example the id would be QID6 for the question id QID6.

required

The required property indicates if the question requires a morphii to be selected. The default value is false. If a morphii selection is required the Next button will be disabled until the requirement is met.

comment

The comment property is used to configure the comment field. It contains 3 properties:

show: Flag to display the morphii comment field or not. Default: false
required: Flag to mark if comment is required or not. Default: false
maxlength: The max character length of the comment field. Default: 512
label: The property that holds the text in each supported language. The label above the comment field. Each translation is defined separately. The en version of the label is required if any other language is declared. Default: Please leave a comment

Example:

var comment: {
  show: true,
  required: false,
  maxlength: 10,
  label: {
    en: 'Please leave a comment',
    es: 'Por favor deja un comentario',
    zh: '请发表评论'
  }
};

slider

The slider property is used to configure the the initial intensity, the slider animation, and anchor text.

initial_intensity: The initial intensity of the morphii when selected. The number must be between 0 and 1. Default: 0.2
show_animation: Flag to animated the slider/morphii when selected. Default: false.
anchor_labels: This property defines the options for the anchor text on each side of the slider.
- show: This property is the flag to show the anchor text. Value is true or false. Default: true.
- left: This property is used to override the default text for the left anchor text. Each translation is defined separately. The en version of the label is required if any other language is declared.
- right: This property is used to override the default text for the right anchor text. Each translation is defined separately. The en version of the label is required if any other language is declared.

Example:

var slider = {
  initial_intensity: 0.2,
  show_animation: true,
  anchor_labels: {
    show: true,
    left: {
      en: 'Less intense',
      es: 'Menos intenso'
    },
    right: {
      en: 'More intense',
      es: 'Mas intenso'
    }
  }
};

instructions

The instructions property defines the options for the instruction text.

show: This property is the flag to show the instruction text. Value is true or false. Default: false.
pre_select_label: This property is used to override the default text for the instruction text that is displayed when a morphii selection has not been made. Each translation is defined separately. The en version of the label is required if any other language is declared.
post_select_label: This property is used to override the default text for the instruction text that is displayed when a morphii is selected. Each translation is defined separately. The en version of the label is required if any other language is declared.

Example:

var instructions = {
  show: true,
  pre_select_label: {
    en: 'Select the graphic above that best represents how you feel.',
    es: 'Seleccione el gráfico de arriba que mejor represente cómo se siente.'
  },
  post_select_label: {
    en: "Move the slider to show how intense your feeling is.",
    es: "Mueva el control deslizante para mostrar qué tan intenso es su sentimiento."
  }
};

morphii_show_name

The morphii_show_name property is used to configure if the morphii label is displayed or not. This defaults to true if not set. The property is used when using bi-directional morphiis in the survey.

morphiiIds

The morphiiIds property is an array of morphii objects to use for the question. The object contains the following properties:

id: This property is required. It is the unique id of the morphii.
name: The property that holds the morphii name for each supported language. Each translation is defined separately. The en translation of the name is required if any other language is declared. If omitted the default morphii name will be used.
weight: An arbitrary integer value assigned to this morphii. If omitted the value will be 0. Setting this property is helpful if using the morphii selection callback.

Example:

// Define custom names.
var morphiiIds1 = [
  {
    id: '6363734358316589056',
    name: {
      en: 'Angry',
      es: 'Enojado',
      zh: '愤怒'
    },
    weight: 1
  },
  {
    id: '6362666072115564544',
    name: {
      en: 'Happy',
      es: 'Contento',
      zh: '快乐'
    },
    weight: 2
  },
  {
    id: '6363488681244622848',
    name: {
      en: 'Sad',
      es: 'Triste',
      zh: '伤心'
    },
    weight: 3
  }
];

// Use default names.
var morphiiIds2 = [
  { id: '6363734358316589056', weight: 1 },
  { id: '6362666072115564544', weight: 2 },
  { id: '6363488681244622848', weight: 3 },
  { id: '6363735117617217536', weight: 4 },
  { id: '6362674737212084224', weight: 5 }
];

Language:

Morphii Selection Change Callback

The onMorphiiSelectionChange function is for custom logic when a morphii is selected. The function is passed the morphii selection event. This data contains properties to identify which morphii was select/unselected and which target the morphii is associated with.

Example:

{
  "selection_required_valid": true,
  "type": "selection_changed",
  "widget": {
    "id": "f0f3c13d-3bc8-449b-bce1-88a6b9362d36",
    "target_id": "QID2",
    "morphii": {
      "selected": true,
      "weight": "2"
    }
  }
}

The event properties:

selection_required_valid: This property indicates that all selection requirements have been met across all morphii widgets on the page.
type: The type of event. This value will be selection_changed.
widget: Information about the specific widget firing the event.
- id: The unique id of the widget. This property is not valid for this survey integration implementation.
- target_id: The id of the target associated with this widget. For this implementation this will the ID of the Qualtrics question. For example, QID2.
- morphii: Information about the specific morphii in the widget.
  - selected: A flag if the morphii is selected or not.
  - weight: The weight value assigned to this morphii in the Morphii Ids section. This value will help determine which morphii was selected/unselected in the list.

Below is sample code for the onMorphiiSelectionChange function. This sample code demonstrates if the user selects a morphii for QID2, then displays QID3 with the same morphii excluding the morphii selected in QID2.

function onSelectionChange(event) {
  // Add custom logic when morphii is selected.
  if (event.widget.target_id === 'QID2') {

    if (event.widget.morphii.selected === true) {
      window._morphiiIntegration.duplicate('QID2', 'QID3', [ event.widget.morphii.weight ]);
      window._morphiiIntegration.showQuestion('QID3');
    }
    else {
      window._morphiiIntegration.hideQuestion('QID3');
    }
  }
}

Morphii Comment Change Callback

The onMorphiiCommentChange function is for custom logic when a user changes text in the morphii widget comment field. The function is passed the morphii comment changed event. This data contains properties to identify the change to the comment text and which target the morphii is associated with.

Example:

{
  "comment_required_valid": true,
  "type": "comment_changed",
  "widget": {
    "id": "f0f3c13d-3bc8-449b-bce1-88a6b9362d36",
    "target_id": "QID5",
    "comment": {
      "required": false,
      "length": 9,
      "value": "Test text"
    }
  }
}

The event properties:

comment_required_valid: This property indicates that all selection requirement have been met across all morphii widgets on the page.
type: The type of event. This value will be comment_changed.
widget: Information about the specific widget firing the event.
- id: The unique id of the widget. This property is not valid for this survey integration wrapper implementation.
- target_id: The id of the target associated with this widget. For this implementation this will the ID of the Qualtrics question. For example, QID5.
- comment: Information about the specific comment in the widget.
  - required: A flag indicating if the comment field was required or not.
  - length: The length of the text currently in the comment field.
  - value: The text value currently in the comment field.

Below is sample code for the onMorphiiCommentChange function. This sample code demonstrates if the user enters a comment for QID7 then QID11 will be displayed.

function onMorphiiCommentChange(event) {
  // Add custom logic when text is entered into comment field.

  // Check the target id if event is for QID5.
  if (event.widget.target_id === 'QID7') {
    // If the comment field for this widget contains text then show QID11
    // else hide QID11.
    if (event.widget.comment.length > 0) {
      window._morphiiIntegration.showQuestion('QID11');
    }
    else {
      window._morphiiIntegration.hideQuestion('QID11');
    }
  }
}

Morphii Questions

Each morphii question requires JavaScript. The boilerplate template below can be used for each morphii question. The code contains a setInterval. This is used if the morphii integration object has not been loaded yet. This code will retry every 500 milliseconds for 5 seconds. The code below uses the morphii integration function add. Note that this JavaScript should be placed in the Qualtrics.SurveyEngine.addOnReady function.

Qualtrics.SurveyEngine.addOnReady(function()
{
  // The code below should not be changed.
   var qId = this.questionId;
   if (window._morphiiIntegration) {
     window._morphiiIntegration.add(qId, null);
   }
   else {
     var interval = setInterval(function() {
       if (window._morphiiIntegration) {
         clearInterval(interval);
         window._morphiiIntegration.add(qId, null);
       }
     }, 500);

     setTimeout(function() {
       clearInterval(interval);
     }, 15000);
   }
});

Qualtrics Questions

Each Qualtrics question that is associated with a morphii question will require JavaScript. For example, if a morphii question is used to change the question text on a Qualtrics question then the Qualtrics question will require JavaScript using the code below. This will help the morphii integration know when the Qualtrics question is ready. The boilerplate template below can be used for each question. The code contains a setInterval. This is used if the morphii integration object has not been loaded yet. This code will retry every 500 milliseconds for 5 seconds. The code below uses the morphii integration function registerQualtricsQuestion. Note that this JavaScript should be placed in the Qualtrics.SurveyEngine.addOnReady function.

Qualtrics.SurveyEngine.addOnReady(function()
{
  // The code below should not be changed.
   var qId = this.questionId;
   if (window._morphiiIntegration) {
     window._morphiiIntegration.registerQualtricsQuestion(qId);
   }
   else {
     var interval = setInterval(function() {
       if (window._morphiiIntegration) {
         clearInterval(interval);
         window._morphiiIntegration.registerQualtricsQuestion(qId);
       }
     }, 500);

     setTimeout(function() {
       clearInterval(interval);
     }, 15000);
   }
});

Embedded Data

Qualtrics has a feature called Embedded Data to store any extra information to record in addition to the question responses. The morphii integration uses Embedded Data to store the morphii results (name, intensity, etc…). This data is then saved in the Qualtrics database with other results from the survey.

Qualtrics is making enhancements everyday, but currently does not provide a way to dynamically create Embedded Data elements. Due to this, the Embedded Data elements need to be created manually while setting up the survey. Embedded Data

It is recommended that the Embedded Data element be the first element in the survey flow. There are 4 embedded data element fields that must be added per morphii question. The Embedded Data element field names must have the format below, where “#” is the question number associated with the morphii. The Embedded Data element field names will show as column names in the order entered when exporting survey results in Qualtrics.

morphii_name_QID#
morphii_intensity_QID#
morphii_comment_QID#
morphii_question_QID#

For example, for the question with id “QID2” the Embedded Data element names will be:

morphii_name_QID2
morphii_intensity_QID2
morphii_comment_QID2
morphii_question_QID2

Embedded Data

Exporting Survey Data

When exporting Qualtrics survey data to a CVS, the morphii data will be included in the export. Each question that has morphiis associated with it will have 4 columns in the exported data. They will match the Embedded Data field names. For example, for question id “QID2”:

morphii_name_QID2: This column contains the name of the morphii selected by the user.
morphii_intensity_QID2: This column contains the intensity that was set by the user.
morphii_comment_QID2: This column contains the text from the morphii comment field. Note this will be blank if the comment field option was not turned on.
morphii_question_QID2: This column contains the question text the morphiis were associated with.

Data Export

Integration Functions

The integration provides several functions that make it easier to manipulate your survey.

init(survey, params, callback)

This function initializes the integration.

Parameters:

survey: The Qulatrics survey object.
params: The parameters defining the integration.
callback: A callback for determining if the integration initialized correctly.

Example:

var survey = this;
var morphiiIntegration = new Morphii.QualtricsIntegration();
if (morphiiIntegration) {
  var accountId = '1456731';
  var clientKey = 'd7b3f543-0d0e-40ff-2345-b252f511e17a';
  var buttonStyle = {
    background_color: '#c32432',
    focus_background_color: '#db3f4c',
    hover_background_color: '#ad202c',
    active_background_color: '#821821'
  };
  var additionalInfo = {
    audience: null, // ['customer', 'employee', 'patient', 'community', 'general', 'other']
    category: null, // ['satisfaction', 'engagement', 'hr', 'mood']
    timing: null    // ['pre-event', 'during-event', 'post-event', 'n/a']
  };

  var questions = [
    {
      id: 'QID7',
      required: false,
      comment: {
        show: true,
        required: false,
        maxlength: 512,
        label: {
          en: 'Please leave a comment'
        }
      },
      morphiiIds: [
        { id: '6362666072115564544', name: { en: 'Happy' }, weight: 1 },
        { id: '6363488681244622848', name: { en: 'Sad' }, weight: 2 },
        { id: '6363735117617217536', name: { en: 'Disgusted' }, weight: 3 },
        { id: '6362674737212084224', name: { en: 'Surprised' }, weight: 4 }
      ]
    }
  ];

  var params = {
    response_id: '${e://Field/ResponseID}',
    survey_id: '${e://Field/SurveyID}',
    client_key: clientKey,
    account_id: accountId,
    button_style: buttonStyle,
    questions: questions,
    additional_info: additionalInfo,
    language: '${e://Field/Q_Language}',
    callbacks: {
      selection_change: onSelectionChange,
      comment_change: onCommentChange
    }
  };
  morphiiIntegration.init(survey, params, function(error, results) {
    if (results === false || error) {
      console.log('Error initializing integration: ' + JSON.stringify(error));
      alert('There was an error loading the survey. Please try again later.');
    }
    else {
      window._morphiiIntegration = morphiiIntegration;
    }
  });
}

add(qId, params)

This function adds a morphii widget to a specific question (qId).

Parameters:

qId: The question id (QID).
params: The parameters defining the widget to add. If this value is null, the function will look up if the morphii definition has already been provided. The params follows the same structure as the objects in the question array.

var params = {
  id: 'QID7',
  required: false,
  comment: {
    show: true,
    required: false,
    maxlength: 512,
    label: {
      en: 'Please leave a comment'
    }
  },
  morphiiIds: [
    { id: '6362666072115564544', name: { en: 'Happy' }, weight: 1 },
    { id: '6363488681244622848', name: { en: 'Sad' }, weight: 2 },
    { id: '6363735117617217536', name: { en: 'Disgusted' }, weight: 3 },
    { id: '6362674737212084224', name: { en: 'Surprised' }, weight: 4 }
  ]
};

Return: void

Example:

Qualtrics.SurveyEngine.addOnReady(function()
{
   var qId = this.questionId;
   if (window._morphiiIntegration) {
     window._morphiiIntegration.add(qId, null);
   }
});

remove(qId)

This function removes the morphii widget from a specific question (qId). This function deletes the widget object and all DOM elements associated with the widget.

Parameters:

qId: The question id (QID).

Return: void

Example:

// Remove morphii widget from QID3
if (window._morphiiIntegration) {
 window._morphiiIntegration.remove('QID3');
}

duplicate(sourceQID, targetQID, excludeWeights)

This function duplicates the sourceQID to the targetQID. Any weights provided in the excludeWeights parameter will be excluded from the target morphii widget.

Parameters:

sourceQID: The source question id (QID) to duplicate.
targetQID: The target question id (QID) to create new widget.
excludeWeights: An array of weights that will be excluded from the target.

Return: void

Example:

function onSelectionChange(event) {
  if (event.widget.target_id === 'QID2') {
    // If a morphii is selected and the weight is not 0, then duplicate QID2 to QID3
    // excluding the morphii that was selected in QID2.
    if (event.widget.morphii.selected === true && event.widget.morphii.weight !== 0) {
      window._morphiiIntegration.duplicate('QID2', 'QID3', [ event.widget.morphii.weight ]);
      window._morphiiIntegration.showQuestion('QID3');
    }
    else {
      window._morphiiIntegration.hideQuestion('QID3');
    }
  }
}

setTextContext(qId, text)

This function sets the text for a specific question. This can be used for morphii and Qualtrics (non-morphii) questions.

Parameters:

qId: The question id (QID) to set text context.
text: The text to use for question.

Return: void

Example:

function onSelectionChange(event) {
  if (event.widget.target_id === 'QID2') {
    // Define the default question text.
    var qId9Text = 'What is your favorite color?';
    if (event.widget.morphii.selected === true) {
      qId9Text = 'What is your favorite color when you are ';
      if (event.widget.morphii.weight === 1) {
        qId9Text += 'anger?';
      }
      else if (event.widget.morphii.weight === 2) {
        qId9Text += 'happy?';
      }
      else if (event.widget.morphii.weight === 3) {
        qId9Text += 'sad?';
      }
      else if (event.widget.morphii.weight === 4) {
        qId9Text += 'disgusted?';
      }
      else if (event.widget.morphii.weight === 5) {
        qId9Text += 'surprised?';
      }
      else {
        qId9Text = 'What is your favorite color?';
      }

      window._morphiiIntegration.setTextContext('QID9', qId9Text);
      window._morphiiIntegration.showQuestion('QID9');
    }
    else {
      window._morphiiIntegration.setTextContext('QID9', qId9Text);
      window._morphiiIntegration.hideQuestion('QID9');
    }
  }
}

showQuestion(qId)

This function displays a specific question. This can be used for morphii and Qualtrics (non-morphii) questions.

Parameters:

qId: The question id (QID) to display.

Return: void

Example:

function onSelectionChange(event) {
  if (event.widget.target_id === 'QID2') {
    // Define the default question text.
    var qId9Text = 'What is your favorite color?';
    if (event.widget.morphii.selected === true) {
      qId9Text = 'What is your favorite color when you are ';
      if (event.widget.morphii.weight === 1) {
        qId9Text += 'anger?';
      }
      else if (event.widget.morphii.weight === 2) {
        qId9Text += 'happy?';
      }
      else if (event.widget.morphii.weight === 3) {
        qId9Text += 'sad?';
      }
      else if (event.widget.morphii.weight === 4) {
        qId9Text += 'disgusted?';
      }
      else if (event.widget.morphii.weight === 5) {
        qId9Text += 'surprised?';
      }
      else {
        qId9Text = 'What is your favorite color?';
      }

      window._morphiiIntegration.setTextContext('QID9', qId9Text);
      window._morphiiIntegration.showQuestion('QID9');
    }
    else {
      window._morphiiIntegration.setTextContext('QID9', qId9Text);
      window._morphiiIntegration.hideQuestion('QID9');
    }
  }
}

hideQuestion(qId)

This function hides a specific question. This can be used for morphii and Qualtrics (non-morphii) questions.

Parameters:

qId: The question id (QID) to hide.

Return: void

Example:

function onSelectionChange(event) {
  if (event.widget.target_id === 'QID2') {
    // Define the default question text.
    var qId9Text = 'What is your favorite color?';
    if (event.widget.morphii.selected === true) {
      qId9Text = 'What is your favorite color when you are ';
      if (event.widget.morphii.weight === 1) {
        qId9Text += 'anger?';
      }
      else if (event.widget.morphii.weight === 2) {
        qId9Text += 'happy?';
      }
      else if (event.widget.morphii.weight === 3) {
        qId9Text += 'sad?';
      }
      else if (event.widget.morphii.weight === 4) {
        qId9Text += 'disgusted?';
      }
      else if (event.widget.morphii.weight === 5) {
        qId9Text += 'surprised?';
      }
      else {
        qId9Text = 'What is your favorite color?';
      }

      window._morphiiIntegration.setTextContext('QID9', qId9Text);
      window._morphiiIntegration.showQuestion('QID9');
    }
    else {
      window._morphiiIntegration.setTextContext('QID9', qId9Text);
      window._morphiiIntegration.hideQuestion('QID9');
    }
  }
}

registerQualtricsQuestion(qId)

This function registers a Qualtrics question for a specific question id (qId).

Parameters:

qId: The question id (QID).

Return: void

Example:

Qualtrics.SurveyEngine.addOnReady(function()
{
  var qId = this.questionId;
  if (window._morphiiIntegration) {
    window._morphiiIntegration.registerQualtricsQuestion(qId);
  }
});

unregisterQualtricsQuestion(qId)

This function unregisters a Qualtrics question for a specific question id (qId).

Parameters:

qId: The question id (QID).

Return: void

Example:

// Unregisters QID12
if (window._morphiiIntegration) {
 window._morphiiIntegration.unregisterQualtricsQuestion('QID12');
}

Tags: