Progress bar customization | XM Community
Solved

Progress bar customization

  • 5 February 2019
  • 4 replies
  • 2336 views
R
Hello community

I have two questions about the customization possibilities of progress bars.
1. Is it possible to change the position of the progress bar (from top to bottom). Is it also possible without changing the theme (change the position in the same theme)?
2. Is there a CSS property to always make the progress bar the same width as they surveytext/surveyquestions or a certain percentage of their width?
icon

Best answer by NiC 8 February 2019, 15:49

View original

4 replies

NiC
Rank
Userlevel 7
Badge +27
Hi Robert,
As for your first query -
* There is a default option present in the look and feel editor ( new one ) as shown in the screenshot below, to move the progress bar up or down within the same theme.
!
* If you have old editor here you can add the following code in header (html source) section of in the look and feel editor.
`<script> jQuery("div[id='ProgressBar']").appendTo(jQuery("#Buttons"));</script>`
XM Engineer | Zill Consulting
NiC
Rank
Userlevel 7
Badge +27
As for the second query:
we can change somethings like height , colour , etc in the progress bar but not many things.
better would be to hide the progress bar via look and feel editor and then create your own progress bar and add the code in header.

and how to create a progress bar (1 possible method)-
simply put the progress bar is a table with single row having as data items (<td>) equivalent to questions in survey flow . and each time a question is answered a <td>element gets coloured .
And if some questions are skipped then all the data items can get colored.

Hope this Helps 🙂
XM Engineer | Zill Consulting
S
Badge +2
> @NiC said:
> Hi Robert,
> As for your first query -
> * There is a default option present in the look and feel editor ( new one ) as shown in the screenshot below, to move the progress bar up or down within the same theme.
> !
> * If you have old editor here you can add the following code in header (html source) section of in the look and feel editor.
> `<script> jQuery("div[id='ProgressBar']").appendTo(jQuery("#Buttons"));</script>`
>
>
>

Hi NiC,

I set up the progress bar through the menu, but it doesn't show the percentage completed when my survey is being completed. It only shows the bar, which is not very helpful.
Also, for some reason, I don't have the function of progress bar position available in the menu.
Would you have any recommendations on how to fix this?
T
Badge +1

Is there a way for the progress bar to update as questions are completed I.E - I have 53 questions, when someone has completed 10, how do I get the progress bar to show 10/53 aka 19% complete?

Leave a Reply


Terms & Conditions