---
title: "Javascript"
url: "https://docs.leaddoubler.com/en/article/javascript"
language: "en"
last_updated: "2024-08-30T05:55:25.774Z"
---
# Javascript
Javascript documentation for the Modern 2.0 template
## Overview
* * *
The Modern 2.0 template now contains a list of variables that you can make changes to update look and behaviour of Modern 2.0.
You can see the list of options you can chance and their default value in the following list:
### Basic options
Enlarges the table by opening it in a full screen dialogOpen
| #### Modern checkbox |
| --- |
| **Description:**
Modern and animated checkbox |
| **Value:**
`true` or `false` |
| **Default value:**
`true` |
| **Full code:**
```javascript
var checkBoxModernFixOption = true;
``` |
| #### Flex buttons |
| --- |
| **Description:**
Make buttons inside the form always use the full width of the page, even when in 2 rows |
| **Value:**
`true` or `false` |
| **Default value:**
`false` |
| **Full code:**
```javascript
var flexButtonsOption = false;
``` |
| #### Hide headings |
| --- |
| **Description:**
Hides the input type “heading” from the form, usefull in quiz format |
| **Value:**
`true` or `false` |
| **Default value:**
`true` |
| **Full code:**
```javascript
var hideFormHeadingsOption = true;
``` |
| #### Show Quiz Steps |
| --- |
| **Description:**
Show the current page and total pages when in quiz mode |
| **Value:**
`true` or `false` |
| **Default value:**
`false` |
| **Full code:**
```javascript
var showQuizStepsOption = false;
``` |
| #### Hide the back button |
| --- |
| **Description:**
Hides the back button when in quiz mode |
| **Value:**
`true` or `false` |
| **Default value:**
`true` |
| **Full code:**
```javascript
var hideQuizBackButtonOption = true;
``` |
| #### Modern radio buttons |
| --- |
| **Description:**
Modern and animated radio buttons |
| **Value:**
`true` or `false` |
| **Default value:**
`true` |
| **Full code:**
```javascript
var modernInlineRadioOption = true;
``` |
| #### Modern radio images |
| --- |
| **Description:**
Modern and radio image buttons |
| **Value:**
`true` or `false` |
| **Default value:**
`true` |
| **Full code:**
```javascript
var modernRadioImagesOption = true;
``` |
| #### Modern quantity: |
| --- |
| **Description:**
Modern and updated quantity input fields |
| **Value:**
`true` or `false` |
| **Default value:**
`true` |
| **Full code:**
```javascript
var modernQuantityOption = true;
``` |
| #### Modern quantity images |
| --- |
| **Description:**
Modern and updated quantity image fields |
| **Value:**
`true` or `false` |
| **Default value:**
`true` |
| **Full code:**
```javascript
var modernQuantityImageOption = true;
``` |
### Date picker options
| #### Modern datepicker |
| --- |
| **Description:**
Enables the modern datepicker, all other datepicker options requires this to be `true` to work |
| **Value:**
`true` or `false` |
| **Default value:**
`true` |
| **Full code:**
```javascript
var datePickerModernFixEnabledOption = true;
``` |
| #### Date picker language |
| --- |
| **Description:**
Changes to language from english. Only Danish and English is supported for now |
| **Value:**
use `"dk"` for Danish or leave empty for English |
| **Default value:**
`""` |
| **Full code:**
```javascript
var datePickerModernFixLanguageOption = ""; // "dk" for Danish, else English
``` |
| #### Month selector |
| --- |
| **Description:**
Adds a dropdown menu to change month |
| **Value:**
`true` or `false` |
| **Default value:**
`false` |
| **Full code:**
```javascript
var datePickerChangeMonthOption = false;
``` |
| #### Year selector |
| --- |
| **Description:**
Adds a dropdown to select year |
| **Value:**
`true` or `false` |
| **Default value:**
`false` |
| **Full code:**
```javascript
var datePickerChangeYearOption = false;
``` |
| #### Year range |
| --- |
| **Description:**
Limit the datepicker to a range of years |
| **Value:**
`Range example: "2020:2025"` |
| **Default value:**
`""` |
| **Full code:**
```javascript
var datePickerYearRangeOption = ""; //Range example: "2020:2025"
``` |
### Input fields with legend options
| **Modern Input Label Legends** |
| --- |
| **Description:**
Uses the label as both placeholder and title of an input field |
| **Value:**
`true` or `false` |
| **Default value:**
`true` |
| **Full code:**
```javascript
var modernInputLabelLegendsEnabledOption = true;
``` |
| **Legend Background** |
| --- |
| **Description:**
Adds a colored background to the legend, |
| **Value:**
`true` or `false` |
| **Default value:**
`false` |
| **Full code:**
```javascript
var modernInputLabelLegendsDarkBgOption = false;
``` |
### Quantity group options
| **Group Quantities** |
| --- |
| **Description:**
Groups all Quantities that are next to eachother. Quantity Group options requires this to be `true` to work |
| **Value:**
`true` or `false` |
| **Default value:**
`true` |
| **Full code:**
```javascript
var modernQuantityGroupEnabledOption = true;
``` |
| **Group Align Center** |
| --- |
| **Description:**
Centers the Quantitity group elements |
| **Value:**
`true` or `false` |
| **Default value:**
`true` |
| **Full code:**
```javascript
var modernQuantityGroupedAlignCenterUngroupedOption = true; //Only works if quantity are grouped
``` |
### File upload options
| **Modern File Upload** |
| --- |
| **Description:**
Enable Modern Fileupload with Drag and Drop functionalities |
| **Value:**
`true` or `false` |
| **Default value:**
`true` |
| **Full code:**
```plaintext
var modernFileUploadEnabledOption = true;
``` |
| **Modern File Upload Language** |
| --- |
| **Description:**
Changes to language from english. Only Danish and English is supported for now |
| **Value:**
use `"dk"` for Danish or leave empty for English |
| **Default value:**
`""` |
| **Full code:**
```plaintext
var modernFileUploadLanguageOption = ""; // "dk" for Danish, else English
``` |
## Change an option
* * *
If you want to change one of the options you simply copy the whole line of the option, go into your calculator, click on “Insert custom HTML” in the menu to the right:
After that, click on “Analytics Code” in the popup box:
Find the following area:
And simply add your copied option and update it to reflect the change you wish to make and press the “Save” button:
