Please can anyone help me format this question on Qualtrics | XM Community
Skip to main content
Solved

Please can anyone help me format this question on Qualtrics

  • February 12, 2021
  • 15 replies
  • 265 views

Hi,
I am trying to input a questionnaire from the Resistance to Peer Influence questionnaire (Steinberg & Monahan, 2007) (screenshot below) but cannot find this format on Qualtrics.
This is the question style. I have tried using Matrix table and then Max Dif but this only allows one column in the middle and one tick box either side. Does anyone know how I could format questions like this on Qualtrics?


image.png

Best answer by ahmedA

I guess the closest you can come is using a Side-by-Side question.
Here's how I reached to this point. Hope it helps. Theme boxed questions.
Final look:
User: Survey Editor:
image.pngQuestion HTML:
Click to write the question text

Question JS:
Qualtrics.SurveyEngine.addOnReady(function () {
    var a = this.getQuestionContainer().querySelectorAll(".q-radio")[2]
        .parentElement;
    a.innerHTML = `


    
        
            Some people go along with their friends just to keep their friends happy.
        
        BUT
        
            Other people refuse to go along with what their friends want to do, even
            though they know it will make their friends unhappy.
        
    


`;
});

15 replies

Forum|alt.badge.img+22
  • Level 7 ●●●●●●●
  • Answer
  • February 12, 2021

I guess the closest you can come is using a Side-by-Side question.
Here's how I reached to this point. Hope it helps. Theme boxed questions.
Final look:
User: Survey Editor:
image.pngQuestion HTML:
Click to write the question text

Question JS:
Qualtrics.SurveyEngine.addOnReady(function () {
    var a = this.getQuestionContainer().querySelectorAll(".q-radio")[2]
        .parentElement;
    a.innerHTML = `


    
        
            Some people go along with their friends just to keep their friends happy.
        
        BUT
        
            Other people refuse to go along with what their friends want to do, even
            though they know it will make their friends unhappy.
        
    


`;
});


  • Author
  • February 15, 2021

Hi,
Thanks a lot for your reply. I am new to qualtrics is this something easy to do? Would you mind explaining the steps please? I would really appreciate it.
Thanks again,
Eve.


Forum|alt.badge.img+22
  • Level 7 ●●●●●●●
  • February 15, 2021

Please go through these links regarding Question HTMLs and JS. They should give you an understanding of how to implement the answer I've shared earlier. If not, you can ask regarding the specific areas you are facing issues.


  • Author
  • February 16, 2021

Hi thank you.
Survey currently looks like this
image.png I have followed instructions for HTML
image.png
However this error message keeps occurring
image.pngAny advice on this please. Also where do I add the java script when I right click there is no option.

Really appreciate your help
Thanks
Eve


Forum|alt.badge.img+22
  • Level 7 ●●●●●●●
  • February 16, 2021

You're using a free account. It has certain limitations.


  • February 25, 2021

Could you elaborate on how to use the java to go on to the next items/ statements on the survey? (beyond the first line)


Forum|alt.badge.img+22
  • Level 7 ●●●●●●●
  • February 25, 2021

Nis I'm sorry, but your question is not clear. Could you please elaborate.
Also, if it doesn't related to this particular Question format, could you please ask another question. It will help others in the future.


  • February 25, 2021

I have used your java to create a similar survey. Yet It works with the first statement only. I am not sure how to move forward and include the following statements.
image.pngWhat I'm missing is how to define that the second line is in fact a new statement requiring a new line?
Here's what I've done (which is lacking something)
image.png


Forum|alt.badge.img+22
  • Level 7 ●●●●●●●
  • February 25, 2021

Okay.
For that you need to go row by row. So first define a variable that captures the different rows:
var all_rows = this.getQuestionContainer().querySelectorAll("tr");
Then traverse all rows like this:
var a = all_rows[1].querySelectorAll(".q-radio")[2].parentElement;
1 stands for the first row, 2 for the second etc.
Change the value of

a.innerHTML
to the different options you want to insert.



  • February 25, 2021

Thank you, this is very helpful!
If it's not too much trouble, could you paste a picture of what the entire javascript would look like, so I'll be sure I've added these in the correct places?


Forum|alt.badge.img+22
  • Level 7 ●●●●●●●
  • February 26, 2021

Qualtrics.SurveyEngine.addOnReady(function () {
    var a;
    var all_rows = this.getQuestionContainer().querySelectorAll(".Choice");
    a = all_rows[0].querySelectorAll(".q-radio")[2].parentElement;
    a.innerHTML = `

Some people go along with their friends just to keep their friends happy.
        BUT
        Other people refuse to go along with what their friends want to do, even though they know it will make their friends unhappy.
`;


    a = all_rows[1].querySelectorAll(".q-radio")[2].parentElement;
    a.innerHTML = `Some other Text.
            BUT
            Some other text.
`;
});


  • February 26, 2021

Thank you very very much! this was a huge help!


  • February 26, 2021

I have another question - can I somehow limit the answer choices - so that for each row the participants will be able to only choose one of the four columns? (to prevent them from choosing multiple answers for the same statement)


Forum|alt.badge.img+22
  • Level 7 ●●●●●●●
  • February 26, 2021

For that you'll need to move to a matrix style question and use the code below:
Qualtrics.SurveyEngine.addOnReady(function () {
    var a;
    var widths = [0, 5, 5, 80, 5, 5];
    this.getQuestionContainer()
        .querySelectorAll("tr")
        .forEach((row) => {
            var cols = row.children;
            for (var i = 0; i < widths.length; i++) {
                // cols[0].style.display = "none";
                cols[i].style.width = widths[i] + "%";
            }
        });
        
    var all_rows = this.getQuestionContainer().querySelectorAll(".ChoiceRow");
    a = all_rows[0].querySelectorAll(".q-radio")[2].parentElement;
    a.innerHTML = `Some people go along with their friends just to keep their friends happy.
        BUT
        Other people refuse to go along with what their friends want to do, even though they know it will make their friends unhappy.`;


    a = all_rows[1].querySelectorAll(".q-radio")[2].parentElement;
    a.innerHTML = `Some other Text.
            BUT
            Some other text.`;
});


  • February 26, 2021

Thank you again! It works!!