Differences

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

--- slidernumformat [2024/08/21 12:13] – created admin
+++ slidernumformat [2025/02/13 07:25] (current) – [Add Function To Survey] admin
@@ Line 1: / Line 1: @@
 ====== sliderNumFormat - Format slider scale and value numbers ======
-The **sliderNumFormat** function formats scale numbers (above the sliders) and values (appear when you drag a slider). It allows scale and value formats to be the same or different. The function uses [[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat|Intl.NumberFormat]] to format numbers in a variety of styles based on locale or locales. Some of the possibilities include:\\
+The **sliderNumFormat** function formats scale numbers (above the sliders) and values (appear when you drag a slider). It allows scale and value formats to be the same or different. The function uses **[[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat|Intl.NumberFormat()]]** to format numbers in a variety of styles based on locale or locales. Some of the possibilities include:\\
   * Thousands separators (e.g., 1,000)
   * Decimals (e.g., 1,000.00)
@@ Line 8: / Line 8: @@
   * Scientific (e.g., 1.000E3)
   * Compact (e.g., $1K)
+sliderNumFormat works with all Qualtrics layouts including "New Survey Experience" (aka Simple layout).
 Here is a simple example:\\
@@ Line 14: / Line 16: @@
 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 =====
-==== Add Function To Survey ====
+==== Survey Header ====
+=== Add jQuery (only if using New Survey Experience) ===
+<code>
+<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js">
+</code>
+=== Add sliderNumFormat Function ===
 Add the sliderNumFormat 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 sliderNumFormat function JS:
 <code>
@@ Line 31: / Line 38: @@
 <code>
 Qualtrics.SurveyEngine.addOnload(function() {
-	mfCsSliders(this,{format:{style:"currency",currency:"USD",maximumFractionDigits:0}});
+	sliderNumFormat(this,{format:{style:"currency",currency:"USD",maximumFractionDigits:0}});
 });
 </code>
-==== Question Settings ====
-  * Slider question
-  * Type: Sliders
-  * Custom Start Position: Off
-  * Scale Points: 0 to 100 (or some other max)
-  * Show value: Off
-  * Mobile friendly: On
 ===== Options =====
 ==== format ====
-**format** is a numeric value that specifies what the constant sum must total to when **[[mfcssliders#mustTotalFlag|mustTotalFlag]]** is true.
+**format** is a object used to specify the Intl.NumberFormat() formatting options. Options are specified the same way as in the **[[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat|Intl.NumberFormat()]]** options object.  **format** applies to both scale and value numbers.
-Default: %%"en-US"%%
+Default: {} (empty, use Intl.NumberFormat() option defaults)
 ==== locale ====
-**locale** is a string or array that specifies the locale or locales to be used by Intl.NumberFormat.
+**locale** is a string or array that specifies the locale or locales to be used by Intl.NumberFormat().
 Default: %%"en-US"%%
+==== valueFormat ====
+**valueFormat** is an object that specifies the Intl.NumberFormat() formatting options for value numbers. Options are specified the same way as in the **[[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat|Intl.NumberFormat()]]** options object. If the same option is included in the **[[sliderNumFormat#format|format]]** option the **valueFormat** option takes precedence.
-==== mustTotalFlag ====
+Default: {}
-**mustTotalFlag** is a boolean that specifies if the constant sum must total to a specific value.
+==== scaleFormat ====
+**scaleFormat** is an object that specifies the Intl.NumberFormat() formatting options for scale numbers. Options are specified the same way as in the **[[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat|Intl.NumberFormat()]]** options object. If the same option is included in the **[[sliderNumFormat#format|format]]** option the **scaleFormat** option takes precedence.
-Default: true
-==== prefix ====
-**prefix** is text that is shown before numeric values.
-Default: %%""%%
-==== suffix ====
-**suffix** is text that is show after numeric values.
-Default: %%"%"%%
-==== widths ====
-**widths** is the width of the constant sum numbers in ems. An 'em' is the width of a wide character (i.e., M).
-Default: 3
+Default: {}
 ====== Qualtrics Wiki ======
 [[start|Qualtrics Wiki]]