¶ Intro
This article describes how to create a matrix-looking set of ratr questions for a survey. This is a temporary solution while tech team is working on matrix question.
¶ Step 1. Questions
If a matrix contains 5 statements (subquestions), you need to add5 questions to the Dashboard:
The caption has to contain the maximal description for you to be able to analyze it later. The final text visible to a user can be adjusted in the form later.
¶ Step 2. Form
¶ Add rate questions
You can change the caption here:
Additionally add a custom class “line-even” to every second element to create a chess board color scheme that will make lines easy to distingish.
Customize the scale and disable the NPS type if needed.
¶ Add a label with instuctions
If you need additional instruction like “To what extent do you feel the following elements affect your health and happiness?”, add it as a label.
If you need to make it bold or a part of it, enable html and add a bold html tag like this:
<b>Presence of other people in social areas</b>
¶ Add a label for scale
To add the next element, also use an html label
With this text adding your explanations or transations inside of divs:
<div class="grade">
<div>Strong negative</div>
<div>No effect</div>
<div>Strong positive</div>
</div>¶ Step 3. Landing Page
When placing a form onto a landing, add the next script here:
The scipt:
$(() => {
$(".nps-form-score__num-container").addClass("radio-button");
$(".nps-form-score__num-container").each(function () {
$(this).append($("<div/>"));
});
$('.grade').parent().addClass('label-info-line');
});And the styles and be added in styles
An example from the landing shown in this article:
.radio-button {
position: relative;
margin-bottom: 5px;
cursor: pointer;
font-size: 9px;
}
.radio-button div {
position: absolute;
top: 0;
left: calc(50% - 10px);
height: 20px;
width: 20px;
margin-top: 5px;
border-radius: 50%;
border: solid 1.3px #00509e;
}
.radio-button div:after {
content: "";
position: absolute;
display: none;
top: calc(50% - 4px);
left: calc(50% - 4px);
width: 9px;
height: 9px;
border-radius: 50%;
background-color: #00509e;
}
.radio-button:hover div {
background-color: #ccc;
}
.radio-button input[type="radio"] {
z-index: 1;
opacity: 0;
top: 0;
left: 0;
}
.radio-button input[type="radio"]:checked ~ div:after {
display: block;
}
.radio-button:has(input[type="radio"]:checked) {
background-color: #e6f0ff;
}
.grade {
display: flex;
justify-content: space-between;
font-size: 0.75em;
min-width: 370px;
}
.grade > div {
flex-grow: 1;
text-align: center;
}
.grade div:first-child {
text-align: left;
color: #d95555;
}
.grade div:last-child {
text-align: right;
color: #55aa55;
}
.nps-form-score .nps-form-score__fieldset .radio-button label {
margin-top: 34px;
margin-bottom: 6px;
background: unset;
background-color: unset;
color: unset;
line-height: unset;
height: unset;
}
.nps-form-score__num-container.radio-button {
border-radius: 6px;
}
.nps-form-score__num-container.radio-button:hover {
background-color: #f0f7ff;
}
.nps-form-score__fieldset.nps-form-score__fieldset_nums {
flex-wrap: nowrap;
}
.nps-form-score__fieldset.nps-form-score__fieldset_nums > div {
width: 60px;
}
.line-even {
background-color: #f9faff;
}
.nps-form-score__fieldset.nps-form-score__fieldset_nums {
margin: 0;
padding: 0;
}
.nps-form-score .nps-form-score__legend {
text-align: left;
line-height: 10px;
margin: 0;
}
.label-info-line {
height: auto;
display: block;
padding: 0;
margin: 0 !important;
line-height: 8px;
}
.radio-button {
position: relative;
margin-bottom: 5px;
cursor: pointer;
font-size: 9px;
}
.radio-button div {
position: absolute;
top: 0;
left: calc(50% - 10px);
height: 20px;
width: 20px;
margin-top: 5px;
border-radius: 50%;
border: solid 1.3px #00509e;
}
.radio-button div:after {
content: "";
position: absolute;
display: none;
top: calc(50% - 4px);
left: calc(50% - 4px);
width: 9px;
height: 9px;
border-radius: 50%;
background-color: #00509e;
}
.radio-button:hover div {
background-color: #ccc;
}
.radio-button input[type="radio"] {
z-index: 1;
opacity: 0;
top: 0;
left: 0;
}
.radio-button input[type="radio"]:checked ~ div:after {
display: block;
}
.radio-button:has(input[type="radio"]:checked) {
background-color: #e6f0ff;
}
.grade {
display: flex;
justify-content: space-between;
font-size: 0.75em;
min-width: 370px;
}
.grade > div {
flex-grow: 1;
text-align: center;
}
.grade div:first-child {
text-align: left;
color: #d95555;
}
.grade div:last-child {
text-align: center;
color: #55aa55;
}
.nps-form-score .nps-form-score__fieldset .radio-button label {
margin-top: 34px;
margin-bottom: 6px;
background: unset;
background-color: unset;
color: unset;
line-height: unset;
height: unset;
}
.nps-form-score__num-container.radio-button {
border-radius: 6px;
}
.nps-form-score__num-container.radio-button:hover {
background-color: #f0f7ff;
}
.nps-form-score__fieldset.nps-form-score__fieldset_nums {
flex-wrap: nowrap;
}
.nps-form-score__fieldset.nps-form-score__fieldset_nums > div {
width: 65px;
}
.line-even {
background-color: #f9faff;
}
.nps-form-score__fieldset.nps-form-score__fieldset_nums {
margin: 0;
padding: 0;
}
.nps-form-score .nps-form-score__legend {
text-align: left;
line-height: 10px;
margin: 0;
}
.label-info-line {
height: auto;
display: block;
padding: 0;
margin: 0 !important;
line-height: 8px;
}
.nps-form-score__fieldset.nps-form-score__fieldset_nums {
border: none;
}
.nps-form-score.nps-form-score_CustomNums fieldset {
padding: 0;
}
div[data-item-type="NPSQuestion"] legend {
font-weight: bold;
}