Insert Single Choice as last column into a table | XM Community
Skip to main content
Solved

Insert Single Choice as last column into a table

  • February 3, 2021
  • 3 replies
  • 65 views
D

Dear all
I'd like to create a table in which participants can enter their choice in the last column as shown in the image below.
Screenshot 2021-02-03 113320.png I already tried to do it with "Hot Spot" by inserting the table as an image and define the boxes in last column as a field to enter a decision. However, the problem is that although I customize validation to 1, participants can still click on more than one hot spot. Thus to have a single choice in the last column would be the best!
I am very thankful for any suggestions and ideas!


Best answer by ahmedA

You could make the choices of a multiple choice question into table rows and then use JS to move the radio buttons into the desired cell. Here's the demo for the code below:
Question HTML:
        
        Please make your choice
Choices (Entered through edit multiple):

Choice Investment Remaining Balance Number of Shares Your Decision

Choice 1 $ 2 $ 0 10

Choice 2 $ 1.5 $ 0.5 9

Question JS:
Qualtrics.SurveyEngine.addOnReady(function () {
let all_inputs = this.getQuestionContainer().querySelector("ul").querySelectorAll(".q-radio");
let all_rows = this.getQuestionContainer().querySelector("ul").querySelectorAll("tr");
all_inputs[0].hide();
for (i = 1; i < all_inputs.length; i++) {
        all_rows[i].lastElementChild.insert(all_inputs[i]);
        all_inputs[i].style.float = "none";
        all_inputs[i].style.verticalAlign = "middle";
}
});


3 replies

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

You could make the choices of a multiple choice question into table rows and then use JS to move the radio buttons into the desired cell. Here's the demo for the code below:
Question HTML:
        
        Please make your choice
Choices (Entered through edit multiple):

Choice Investment Remaining Balance Number of Shares Your Decision

Choice 1 $ 2 $ 0 10

Choice 2 $ 1.5 $ 0.5 9

Question JS:
Qualtrics.SurveyEngine.addOnReady(function () {
let all_inputs = this.getQuestionContainer().querySelector("ul").querySelectorAll(".q-radio");
let all_rows = this.getQuestionContainer().querySelector("ul").querySelectorAll("tr");
all_inputs[0].hide();
for (i = 1; i < all_inputs.length; i++) {
        all_rows[i].lastElementChild.insert(all_inputs[i]);
        all_inputs[i].style.float = "none";
        all_inputs[i].style.verticalAlign = "middle";
}
});


D
A
D
  • deivo
  • Author
  • February 4, 2021

ahmedA Thank you very much for your help :-) Your demo looks fantastic!
I managed your code to have a proper table, but somehow I could move the radio buttons into the desired cell.
grafik.png Although I tried to implement your code as you suggested.
grafik.pngWhere is my mistake?
And looks the table also the same for the mobile view as for the computer view?
Thank you very much and all the best!

A
Level 7 ●●●●●●●
Forum|alt.badge.img+22
  • ahmedA
  • Level 7 ●●●●●●●
  • February 4, 2021

It appears that you have inserted the code properly, so the error must lie elsewhere. Can you check if you are getting any errors in the console (If you haven't used the console before, you'll find resources related to your browser online).
Are you using a multiple choice single answer question with horizontal choices? If not, then you'll need to switch to it. It could also be related to the theme, I use the boxed question theme available in the old look and feel editor.
See if any of these solve your problem.

Terms & ConditionsAccessibility statement