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. 
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!
Solved
Insert Single Choice as last column into a table
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";
}
});
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";
}
});
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. 
Although I tried to implement your code as you suggested. 
Where 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!
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.
Leave a Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.