anchored header to top of the screen with instructions and selection counter

Many of you may have had long list option questions also long statements making it difficult to show everything on a single screen, even if you try to break it into 2 or 3 columns

This solution allows the user to see the question instructions in a header that stays anchored at the top of the screen as the user scrolls down to see the other available statements

The selection number is also updated as you select or deselect the options, in this particular case when working with a multiple answer question type.

Again I’m using jQuery so don’t forget to add the library in your skin.

In the instruction tab, will include the instruction text and the selection counter as below:

Please select all that apply, but you must select at least 10 statements.
You have selected 0 statements

then we need some styling
So continue adding this, you can also define all these styles right in the Confirmit styles menu.

and finally the javascript, that has two parts, one is to make the header anchored at the top and the other one is for updating the selection counter as you select or deselect the answers.

Here’s a link to see everything together

It works in all browsers, but the jsfiddle link above doesn’t work in IE, so please fell free to use Firefox, Chrome etc.

Give it a try and let me know what you think!