Placing Question Text Underneath Question

Hi,

I have a side-by-side question with a bunch of radio buttons. I've pulled together some code that will count the number of radio buttons selected in each column of the Side-by-Side, and have placed some text above the question that displays these counters:

You have allocated $100 to this number of groups: 0</div>

 

You have allocated $0 to this number of groups: 0 



My issue is that the Side-by-Side table's pretty long, so as respondents scroll down on the page they lose sight of the slider, which is supposed to help them keep track of what radio buttons they can click, etc. So we want to also include the same text above _underneath_ the question (the Side-by-Side table).

It's not as trivial (I think) as simply placing a new Descriptive Text question below the question with the Side-by-Side, as the Javascript I use to create the counter (which I detail here) is only included in the Side-by-Side question, and uses "this.questionClick", so none of the variables I create there are available to other questions (I can't also make them embedded data as presumably they'll only be available to show once the next button is clicked).

So is there a way to place question text at the bottom of a question? I'm hoping there's something as simple as some CSS code or some Javascript code that will allow me to do this in the Side-by-Side question.

Page 1 / 1

You can add it with JavaScript:

```

jQuery("#"+this.questionId+" .InnerInner").append("<div class=\\"QuestionText\\">New text at bottom of question.</div>");

```

I see; thansk @TomG! If I wanted the text at the bottom to include some of the Javascript variables I created, how exactly would I make that happen?

The counters I make use the HTML I included above in my original question, so I tried replacing the "New text at bottom of question" in your JavaScript snippet with that same exact HTML, making sure to change any " to \\" to make the quotation marks work (unless I'm mistaken in this).

While it shows the text I want, it definitely doesn't update as the radio buttons are clicked. Is there anything I'm missing? Since I'm appending the text when the screen is loaded, I'm imagining that it doesn't update at all like the counter above the question does? How can I get that to happen?

I would change all the ids to classes. If you are using jQuery's html command to do the updates then you can update both top and bottom fields at the same time.

I see... Apologies for my ignorance, but not sure how I should be updating my code. Do I take my HTML code to display my counter, and simply replace `` with `` in that HMTL code inside of the javascript snippet you helpfully shared with me?

As for the jQuery HTML command, I'm pretty sure I'm using the Javascript command `document.getElementById("total1").innerHTML=total1;`, so I'm assuming I need to replace that with something like `jQuery("#total1").html(total1)` or something like that?

I'd paste my code here but I keep getting an "Access Denied" error every time I try pasting jQuery or Javascript code on here, even when I format it as Code (Qualtrics has been made aware of this issue).

Yes, you are correct on the span id to class change.

You've almost got the jQuery change, except it would be `jQuery(".total1").html(total1)` since you are now finding a class instead of an id.

Excellent, thanks so much! Worked like a charm.

Leave a Reply

Sign up

Social Login

Login to the community

Social Login

Scanning file for viruses.

This file cannot be downloaded