Community Groups are officially here!
We've released Groups, a new feature that enables us to connect community members of similar industries and interests in a shared, private space. You can check out all of the details here, including information about who can join, how to join, and what Groups are currently offered. Please leave your feedback through this Community Groups Feedback Survey.

Matrix table with square buttons, instead of radio buttons

fmhs Community Member Qubie ✭
edited December 2018 in Custom Code

Hi all,

I would like to recreate the look and feel of the NPS question type, but customize the response options and numeric labels. That is, a numeric scale with square buttons and text labels above the scale that is displayed horizontally on desktop and mobile.

The easiest way to implement that would be to create a single-row matrix question, hiding the label columns (as discussed here). However, how would I be able to force the matrix question to use the square buttons, instead of the default radio buttons?

I would like this:

Instead of this:

Note: I am able to accomplish the above by adjusting the numeric labels of the NPS type (see discussion here). However, I could not find a way to change the number of response options from the default 11 options.

Any help would be much appreciated!


Best Answer

  • [Deleted User]
    [Deleted User] Qubie ✭
    edited December 2018 Accepted Answer

    Hello @fmhs

    Step 1: Use Matrix Table question type and Matrix Type - "Profile". Number of Statements - "1" .
    Number of Scale Points - "11" and rename these scale points as -5 to 5.

    Step 2: To get label in box - Change the survey theme( eg: Qualtrics 2017) from the look and Feel tab.

    Step 3: Paste the following js in Matrix question js(onReady) to hide statement text

    Step 4: Output


  • fmhs
    fmhs Community Member Qubie ✭

    Hi @Shashi, and many thanks for this great suggestion! Just one follow-up question: This solution does not allow me to add labels above the boxes. Ideally, I would like to anchor the endpoints with "strongly disagree" and "strongly agree". Any idea how to accomplish that?