Presenting different code in each MaxDiff question

Question

Hello to all,

I'm trying to manually implement a progress bar of my own, so I can adjust increments with a certain weight for each question. So far, so good, I was able to use the survey CSS styles without problems:

<div class="progress_bar">
<table class="progress_bar_table"><tr>
<td class="left_cell" style="font-weight: normal">0%</td><td class="middle_cell">
<div class="progress_bar_outer">
<div class="progress_bar_inner" style="width: 10%"></div></div>
</td><td class="right_cell" style="font-weight: normal">100%</td></tr></table></div><div id="error_box" class="page_error error_messages HideElement"></div>

The problem arrived when I tried to apply it to MaxDiff questions, because as far as I know, HTML code can only be added for the general exercise, in a global way (and not for each specific question within the exercise), and I had forgotten about it. So, I am asking if someone knows how to insert different code (or use a variable, I think that would be enough for me) in each question of a MaxDiff  exercise, so I can dynamically change the value of the bar. I hope there is a way to do it.

(of course, I'm not using version 8, but version 7.0.26)

Best regards and thanks in advance,
João Fernandes

Answer 1

Answered this in a comment to the original question:

Probably a few ways to do this:

1) Place a text/filler or a free format question below each MaxDiff question and add different % progress bars to those questions on each page.

2) Work out something with the page number you are on, like style="width: [%PageNumber() / 10%], or if it started on page 15 and there were 10 questions you could do [%(PageNumber() - 5) / 10%].

Comments

I saw it, but only had time to reply now. I've only tried the second method, and it worked fine, so I'll leave an example here.

Assuming you want to set an increment of 5% for each MaxDiff question, and your first MaxDiff question is the second in the questionnaire (because of the "start" question, that we don't want to include in the counting), the code can go like this:

<div class="progress_bar">
<table class="progress_bar_table"><tr>
<td class="left_cell" style="font-weight: normal">0%</td><td class="middle_cell">
<div class="progress_bar_outer">
<div class="progress_bar_inner" style="width: [%PageNumber() * 5 - 5%]%"></div></div>
</td><td class="right_cell" style="font-weight: normal">100%</td></tr></table></div><div id="error_box" class="page_error error_messages HideElement"></div>

Please note that this code takes into account each question answered, so when seeing the third MaxDiff question the bar will show 10%, because there are 2 questions answered at the moment.

Thank you very much,
João