Table of Contents
bubbleBurst - Rank/Select Top n with Animation
The bubbleBurst function converts a Qualtrics multi-select, multiple choice question into an animated ranking or select top n question. Functionality includes:
- Supports text or image choices
- Automatically detects Rank or Top n mode based on “allow text” configuration
- Specify minimum or minimum/maximum number of items to be ranked/selected
- Automatically adjusts maximum based on number of displayed choices
- Optional auto advance when last item ranked/selected
- Optional auto ranking/selection of last item when only one item remains
- Reset option
- Supports Exclusive and 'No more' choices
- Customize animation settings
- Customize status text
Here is a demo:
This function is available for a reasonable fee. Contact TomG on the Qualtrics Community to learn more.
Set-up Instructions
Add Function To Survey
Add the bubbleBurst function to the survey header to make it available to any question in the survey. Go to Look & Feel → General → Header edit → and paste the provided bubbleBurst function JS:
<script>/*Paste bubbleBurst function JS here*/</script>
Alternatively, paste the bubbleBurst function JS into a question's JS outside the existing Qualtrics functions to make it available to questions on the page.
JavaScript Function Call
Add JS to call the bubbleBurst function to apply it to the multiple choice question as follows:
Qualtrics.SurveyEngine.addOnload(function() { bubbleBurst(this); });
To override the default options, specify the desired options in the second function argument as an object. For example:
Qualtrics.SurveyEngine.addOnload(function() { bubbleBurst(this,{statusDone:"Done!",image:true}); });
Question HTML
At the end the question add a div with class “status” to display the status text followed by style to hide page while it loads.
Please rank the three most important items in this list below by selecting in the order of most important to least important. <div class="status" style="padding-top:1em"></div> <style>.Skin { opacity:0; }</style>
Ranking
To enable ranking turn on “Allow Text” for each choice in the multiple choice question. If “Allow Text” is not enabled for all choices, the bubbleBurst function is in Top N (where N is max) mode.
Min/Max
To set a minimum and maximum number of items to pick or rank, turn on 'Add validation' in the question settings and set 'Answer range' to set a minimum and maximum or 'Minimum choices selected' to set only a minimum.
The bubbleBurst function automatically adjusts the minimum and maximum to accommodate exclusive choices and choice display logic. If an exclusive choice is selected the minimum is set to 1. For choice display logic both the minimum and maximum may be updated based on the number of displayed choices. For example, if the maximum is set to 5, but the number of non-exclusive choices is 4, the maximum is updated to 4.
'No More' choice
A 'no more' choice is a choice used to by the respondent to end the pick/rank process once the minimum number of items have been selected. It is only visible once the minimum number of choices have been selected. It is similar to an exclusive choice, except it is only exclusive among the remaining choices instead of all choices. To create a 'no more' choice, use html like the following:
<span class="nomore">None of these are important</span>
Options
autoNext
autoNext turns on automatic advance to next page when last item is ranked/selected.
Default: true (on)
autoNextExclusive
autoNextExclusive turns on automatic advance to next page when an exclusive or no more choice is selected.
Default: true (on)
autoSelectLast
autoSelectLast turns on automatic selection/ranking of the last choice if there is only one choice remaining.
Default: true (on)
explode
explode apply explode animation effect to text choices when selected. When explode is false text choices fade out when selected.
Default: true
fontSize
fontSize is an array containing start and stop font sizes for explode animation effect.
Default: ["1.5em", "0.4em"]
image
image turns on shrinking image animation for image choices.
Default: false
opacity
opacity is an array containing the start and stop opacity for text or image animations.
default: [1, 0.8]
ordinalList
ordinalList is an array that specifies the ordinal list text to replace the [ordinal] token in the status update message when items are ranked/selected.
Default: ["", "2nd", "3rd", "4th", "5th"]
reset
reset turns on reset button display and functionality.
Default: true
resetText
resetText specifies the reset button text
Default: Reset
statusDone
statusDone specifies the status text to display when the last (max) item has been ranked/selected. [ordinal], [count], [min], and [max] are valid tokens that are dynamically updated.
Default: "Done! ([count]/[max])"
statusUpdate
statusUpdate specifies the status update text before the last item is selected/ranked. [ordinal], [count], [min], and [max] are valid tokens that are dynamically updated.
Default: "Select the [ordinal] most important item. ([count]/[max])"
timeout
timeout is the length of animation in milliseconds.
Default: 1200