Differences

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

--- slidernumformat [2024/08/21 12:23] – 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 36: / Line 43: @@
 ===== Options =====
 ==== format ====
-**format** is a object used to specify the Intl.NumberFormat formatting options. The format is exactly the same as that used by the Intl.NumberFormat options object.  **format** applies to both scale and value numbers.
+**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: {} (empty, use Intl.NumberFormat defaults)
+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. The format is exactly the same as that used by the Intl.NumberFormat options object. If the same option is included in the [[sliderNumFormat#format|format]] option the **valueFormat** option takes precedence.
+**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.
 Default: {}
 ==== scaleFormat ====
-**scaleFormat** is an object that specifies the Intl.NumberFormat formatting options for scale numbers. The format is exactly the same as that used by the Intl.NumberFormat options object. If the same option is included in the [[sliderNumFormat#format|format]] option the **scaleFormat** option takes precedence.
+**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: {}
 ====== Qualtrics Wiki ======
 [[start|Qualtrics Wiki]]