qualtrics-drag-matrix

A react-based component that displays a drag-selectable matrix question on Qualtrics.

Features

• A matrix question that users can select multiple answers at once by dragging the pointer.
• Can work with mobile devices (with some restrictions, please see below).

---

---

Installation

Header Settings

1. In the survey edit screen, click "Look & Feel" on the top-left.
2. Select the "General" tab and then edit the "Header".
3. Click the "<>" icon to enter the coding view.
4. Copy and paste the following code.

<script src="https://cdn.jsdelivr.net/gh/keita-makino/[email protected]/dist/bundle.js"></script>

Use It

1. The question type has to be set to "Matrix table" + "Likert" + "Allow multiple answers".
2. Click the question text and click "Rich Content Editor...".
3. Click the {A} button at the top-left and click "Survey Question".
4. Search this question and click "Question Text".
5. A code ${q://"Some ID"/QuestionText} will be inserted so save the ID for later use.
6. Edit the text fields on the rows/columns as you need.
7. Select the "JavaScript" option from the side menu or click </> icon next to the question text to enter the coding view.
8. Copy and paste the code below.
9. All done!

Qualtrics.SurveyEngine.addOnload(function () {
  /*Place your JavaScript here to run when the page loads*/
});

Qualtrics.SurveyEngine.addOnReady(function () {
  dragMatrixRender(
    document.getElementById(
      "The question ID, make sure the ID is surrounded by the double-quotation"
    )
  );
});

Qualtrics.SurveyEngine.addOnUnload(function () {
  /*Place your JavaScript here to run when the page is unloaded*/
});

Limitation on Mobile

Due to the width limitation on mobile phones, it may not work if either

1. You have many columns (basically at most 4 columns are recommended).
2. You use a long text on the row/column text.