User Tools

Site Tools


bubbleburst

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision
Previous revision
bubbleburst [2022/09/30 13:34] – [JavaScript Function Call] adminbubbleburst [2025/09/02 15:36] (current) admin
Line 1: Line 1:
-====== bubbleBurst - Rank/Select Top with Animation ====== +====== bubbleBurst - Rank/Select Top with Animation ====== 
-The **bubbleBurst** function converts a Qualtrics multi-select, multiple choice question into an animated ranking or select top question. Functionality includes:+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   * Supports text or image choices
-  * Automatically detects Rank or Top mode based on "allow text" configuration +  * Automatically detects Rank or Top //n// mode based on "allow text" configuration 
-  * Specify number of items to be ranked/selected+  * 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 advance when last item ranked/selected
   * Optional auto ranking/selection of last item when only one item remains   * Optional auto ranking/selection of last item when only one item remains
   * Reset option   * Reset option
 +  * Supports Exclusive and 'No more' choices
   * Customize animation settings   * Customize animation settings
   * Customize status text   * Customize status text
Line 13: Line 15:
 {{ ::bubbleBurst_demo.mp4?600 |bubbleBurst Demo}} {{ ::bubbleBurst_demo.mp4?600 |bubbleBurst Demo}}
  
-This function is available for a reasonable fee. Contact [[https://community.qualtrics.com/XMcommunity/messages/add/TomG|TomG]] on the Qualtrics Community to learn more.+This function is available for a reasonable fee. Contact **[[https://community.qualtrics.com/XMcommunity/messages/add/TomG|TomG]]** on the Qualtrics Community to learn more.
 ===== Set-up Instructions ===== ===== Set-up Instructions =====
 ==== Add Function To Survey ==== ==== Add Function To Survey ====
-To make the function available to all questions in the survey, copy the function to the Survey Header inside a script tag: 
 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 -> {{::icon_source.jpg?20|}} and paste the provided bubbleBurst function JS: 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 -> {{::icon_source.jpg?20|}} and paste the provided bubbleBurst function JS:
 <code> <code>
Line 33: Line 34:
 <code> <code>
 Qualtrics.SurveyEngine.addOnload(function() { Qualtrics.SurveyEngine.addOnload(function() {
- bubbleBurst(this,{max:5,image:true});+ bubbleBurst(this,{statusDone:"Done!",image:true});
 }); });
 </code> </code>
Line 45: Line 46:
 ==== Ranking ==== ==== 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. 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.
 +==== '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:
 +<code>
 +<span class="nomore">None of these are important</span>
 +</code>
 ===== Options ===== ===== Options =====
 ==== autoNext ==== ==== autoNext ====
 **autoNext** turns on automatic advance to next page when last item is ranked/selected. **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 **[[bubbleBurst#no_more_choice|no more]]** choice is selected.
  
 Default: true (on) Default: true (on)
Line 61: Line 71:
 **fontSize** is an array containing start and stop font sizes for explode animation effect. **fontSize** is an array containing start and stop font sizes for explode animation effect.
  
-Default: ["1.5em", "0.4em"]+Default: %%["1.5em", "0.4em"]%%
 ==== image ==== ==== image ====
 **image** turns on shrinking image animation for image choices. **image** turns on shrinking image animation for image choices.
Line 67: Line 77:
 Default: false Default: false
 ==== max ==== ==== max ====
-**max** specifies the number of items to be ranked/selected.+**max** is the maximum number of items that should be ranked. The bubbleBurst function will automatically adjust max to accommodate exclusive choices and choice display logic. If max=0, max is set to the number of displayed choices excluding exclusive choices. 
 + 
 +Default: 0 
 +==== min ==== 
 +**min** is the minimum number of items that should be ranked when Force Response is turned on. The next button id disabled until the min number of choices have been selected. The bubbleBurst function will automatically adjust min to accommodate exclusive choices, no more choices, and choice display logic. If min=0, min is set to the number of displayed choices excluding exclusive choices. For a true min of zero turn off Force Response.
  
-Default: 3+Default: 0
 ==== opacity ==== ==== opacity ====
 **opacity** is an array containing the start and stop opacity for text or image animations. **opacity** is an array containing the start and stop opacity for text or image animations.
Line 77: Line 91:
 **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. **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"]+Default: %%["", "2nd", "3rd", "4th", "5th"]%%
 ==== reset ==== ==== reset ====
 **reset** turns on reset button display and functionality. **reset** turns on reset button display and functionality.
Line 87: Line 101:
 Default: Reset Default: Reset
 ==== statusDone ==== ==== statusDone ====
-**statusDone** specifies the status text to display when the last (max) item has been ranked/selected. [ordinal], [count], and [max] are valid tokens that are dynamically updated.+**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])+Default: %%"Done! ([count]/[max])"%%
 ==== statusUpdate ==== ==== statusUpdate ====
-**statusUpdate** specifies the status update text before the last item is selected/ranked. [ordinal], [count], and [max] are valid tokens that are dynamically updated.+**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])+Default: %%"Select the [ordinal] most important item. ([count]/[max])"%%
 ==== timeout ==== ==== timeout ====
 **timeout** is the length of animation in milliseconds. **timeout** is the length of animation in milliseconds.
bubbleburst.1664559263.txt.gz · Last modified: by admin

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki