digitalmarketplace-frontend
Version:
Digital Marketplace Frontend contains assets and components used in Digital Marketplace projects
1,602 lines • 293 kB
JSON
{
"component": "question",
"fixtures": [
{
"name": "boolean default",
"options": {
"type": "boolean",
"question": {
"id": "example",
"question": "Here is the service question"
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<div\n class=\"question \"\n id=\"example\"\n>\n \n\n\n\n\n\n<div class=\"govuk-form-group\">\n <fieldset class=\"govuk-fieldset\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the service question\n </legend>\n <div class=\"govuk-radios govuk-radios--inline\" data-module=\"govuk-radios\">\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-example\" name=\"example\" type=\"radio\" value=\"true\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-example\">\n Yes\n </label>\n </div>\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-example-2\" name=\"example\" type=\"radio\" value=\"false\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-example-2\">\n No\n </label>\n </div>\n </div>\n </fieldset>\n</div>\n\n\n</div>"
},
{
"name": "textbox large default",
"options": {
"type": "textbox_large",
"question": {
"id": "example",
"question": "Here is the service question",
"max_length_in_words": 500
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<div\n class=\"question \"\n id=\"example\"\n>\n \n\n\n<div class=\"govuk-form-group govuk-character-count\" data-module=\"govuk-character-count\" data-maxwords=\"500\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-example\">\n Here is the service question\n </label>\n <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"input-example\" name=\"example\" rows=\"5\" aria-describedby=\"input-example-info\"></textarea>\n <div id=\"input-example-info\" class=\"govuk-hint govuk-character-count__message\">\n You can enter up to 500 words\n </div>\n</div>\n\n\n</div>"
},
{
"name": "checkbox tree default",
"options": {
"type": "checkbox_tree",
"question": {
"id": "example",
"question": "Here is the service question",
"number_of_items": 10,
"options": [
{
"label": "Option set 1",
"options": [
{
"label": "Option set 1 option 1"
},
{
"label": "Option set 1 option 2"
},
{
"label": "Option set 1 option 3"
},
{
"label": "Option set 1 option 4"
},
{
"label": "Option set 1 option 5"
}
]
},
{
"label": "Option set 2",
"options": [
{
"label": "Option set 2 option 1"
},
{
"label": "Option set 2 option 2"
},
{
"label": "Option set 2 option 3"
},
{
"label": "Option set 2 option 4"
},
{
"label": "Option set 2 option 5"
}
]
},
{
"label": "Option set 3",
"options": [
{
"label": "Option set 3 option 1"
},
{
"label": "Option set 3 option 2"
},
{
"label": "Option set 3 option 3"
},
{
"label": "Option set 3 option 4"
},
{
"label": "Option set 3 option 5"
}
]
}
]
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<div\n class=\"question \"\n id=\"example\"\n>\n \n\n\n\n<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset dm-checkbox-tree\" data-module=\"dm-question-checkbox-tree\" aria-describedby=\"\" data-item-name-singular=\"category\" data-item-name-plural=\"categories\" data-tier-restriction=\"\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the service question\n </legend>\n\n\n <div class=\"govuk-grid-row\">\n <div class=\"dm-checkbox-tree__summary govuk-grid-column-one-third\">\n <p class=\"govuk-body\">\n You can choose up to 10 categories.\n </p>\n <p class=\"dm-checkbox-tree__summary-total govuk-body\">\n <strong class=\"dm-checkbox-tree__summary-total-selected\"></strong>\n <span class=\"dm-checkbox-tree__summary-total-selected-text\"></span>\n </p>\n </div>\n <div class=\"dm-checkbox-tree__options govuk-grid-column-two-thirds\">\n <details id=\"details-1\" class=\"dm-checkbox-tree-details\">\n <summary class=\"dm-checkbox-tree-details__summary\">\n <div class=\"dm-checkbox-tree-details__summary-text\">\n <div class=\"dm-checkbox-tree-details__summary-text-label\">\n Option set 1\n </div>\n <div class=\"dm-checkbox-tree-details__summary-text-count\">\n <strong class=\"govuk-tag govuk-tag--green govuk-visually-hidden\">\n <span class=\"dm-checkbox-tree-details__summary-text-count-selected\"></span> selected\n</strong>\n\n </div>\n </div>\n </summary>\n <div class=\"dm-checkbox-tree-details__text\">\n \n\n <div class=\"govuk-form-group\">\n <div class=\"govuk-checkboxes govuk-checkboxes--small\" data-module=\"govuk-checkboxes\">\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-1\" name=\"example\" type=\"checkbox\" value=\"Option set 1 option 1\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-1\">\n Option set 1 option 1\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-1-2\" name=\"example\" type=\"checkbox\" value=\"Option set 1 option 2\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-1-2\">\n Option set 1 option 2\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-1-3\" name=\"example\" type=\"checkbox\" value=\"Option set 1 option 3\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-1-3\">\n Option set 1 option 3\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-1-4\" name=\"example\" type=\"checkbox\" value=\"Option set 1 option 4\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-1-4\">\n Option set 1 option 4\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-1-5\" name=\"example\" type=\"checkbox\" value=\"Option set 1 option 5\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-1-5\">\n Option set 1 option 5\n </label>\n </div>\n </div>\n</div>\n\n\n </div>\n </details>\n\n <details id=\"details-2\" class=\"dm-checkbox-tree-details\">\n <summary class=\"dm-checkbox-tree-details__summary\">\n <div class=\"dm-checkbox-tree-details__summary-text\">\n <div class=\"dm-checkbox-tree-details__summary-text-label\">\n Option set 2\n </div>\n <div class=\"dm-checkbox-tree-details__summary-text-count\">\n <strong class=\"govuk-tag govuk-tag--green govuk-visually-hidden\">\n <span class=\"dm-checkbox-tree-details__summary-text-count-selected\"></span> selected\n</strong>\n\n </div>\n </div>\n </summary>\n <div class=\"dm-checkbox-tree-details__text\">\n \n\n <div class=\"govuk-form-group\">\n <div class=\"govuk-checkboxes govuk-checkboxes--small\" data-module=\"govuk-checkboxes\">\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-2\" name=\"example\" type=\"checkbox\" value=\"Option set 2 option 1\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-2\">\n Option set 2 option 1\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-2-2\" name=\"example\" type=\"checkbox\" value=\"Option set 2 option 2\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-2-2\">\n Option set 2 option 2\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-2-3\" name=\"example\" type=\"checkbox\" value=\"Option set 2 option 3\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-2-3\">\n Option set 2 option 3\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-2-4\" name=\"example\" type=\"checkbox\" value=\"Option set 2 option 4\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-2-4\">\n Option set 2 option 4\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-2-5\" name=\"example\" type=\"checkbox\" value=\"Option set 2 option 5\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-2-5\">\n Option set 2 option 5\n </label>\n </div>\n </div>\n</div>\n\n\n </div>\n </details>\n\n <details id=\"details-3\" class=\"dm-checkbox-tree-details\">\n <summary class=\"dm-checkbox-tree-details__summary\">\n <div class=\"dm-checkbox-tree-details__summary-text\">\n <div class=\"dm-checkbox-tree-details__summary-text-label\">\n Option set 3\n </div>\n <div class=\"dm-checkbox-tree-details__summary-text-count\">\n <strong class=\"govuk-tag govuk-tag--green govuk-visually-hidden\">\n <span class=\"dm-checkbox-tree-details__summary-text-count-selected\"></span> selected\n</strong>\n\n </div>\n </div>\n </summary>\n <div class=\"dm-checkbox-tree-details__text\">\n \n\n <div class=\"govuk-form-group\">\n <div class=\"govuk-checkboxes govuk-checkboxes--small\" data-module=\"govuk-checkboxes\">\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-3\" name=\"example\" type=\"checkbox\" value=\"Option set 3 option 1\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-3\">\n Option set 3 option 1\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-3-2\" name=\"example\" type=\"checkbox\" value=\"Option set 3 option 2\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-3-2\">\n Option set 3 option 2\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-3-3\" name=\"example\" type=\"checkbox\" value=\"Option set 3 option 3\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-3-3\">\n Option set 3 option 3\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-3-4\" name=\"example\" type=\"checkbox\" value=\"Option set 3 option 4\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-3-4\">\n Option set 3 option 4\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-3-5\" name=\"example\" type=\"checkbox\" value=\"Option set 3 option 5\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-3-5\">\n Option set 3 option 5\n </label>\n </div>\n </div>\n</div>\n\n\n </div>\n </details>\n\n </div>\n </div>\n\n</fieldset>\n</div>\n\n</div>"
},
{
"name": "checkbox tree large default",
"options": {
"type": "checkbox_tree_large",
"question": {
"id": "example",
"question": "Here is the service question",
"options": [
{
"label": "Option set 1",
"options": [
{
"label": "Option set 1 option 1"
},
{
"label": "Option set 1 option 2"
},
{
"label": "Option set 1 option 3"
},
{
"label": "Option set 1 option 4"
},
{
"label": "Option set 1 option 5"
}
]
},
{
"label": "Option set 2",
"options": [
{
"label": "Option set 2 option 1"
},
{
"label": "Option set 2 option 2"
},
{
"label": "Option set 2 option 3"
},
{
"label": "Option set 2 option 4"
},
{
"label": "Option set 2 option 5"
}
]
},
{
"label": "Option set 3",
"options": [
{
"label": "Option set 3 option 1"
},
{
"label": "Option set 3 option 2"
},
{
"label": "Option set 3 option 3"
},
{
"label": "Option set 3 option 4"
},
{
"label": "Option set 3 option 5"
}
]
}
]
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<div\n class=\"question \"\n id=\"example\"\n>\n \n\n<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset dm-checkbox-tree-large\" aria-describedby=\"\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the service question\n </legend>\n\n\n <div class=\"govuk-grid-row\">\n <div class=\"dm-checkbox-tree-large__summary govuk-grid-column-full\">\n\n\n\n\n\n\n\n\n <div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"accordion-example\">\n <div class=\"govuk-accordion__section\">\n <div class=\"govuk-accordion__section-header\">\n <h2 class=\"govuk-accordion__section-heading\">\n <span class=\"govuk-accordion__section-button\" id=\"accordion-example-heading-1\">\n Option set 1\n </span>\n </h2>\n </div>\n <div id=\"accordion-example-content-1\" class=\"govuk-accordion__section-content\">\n <div class=\"govuk-form-group\">\n <div class=\"govuk-checkboxes govuk-checkboxes--small\" data-module=\"govuk-checkboxes\">\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-1\" name=\"example\" type=\"checkbox\" value=\"Option set 1 option 1\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-1\">\n Option set 1 option 1\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-1-2\" name=\"example\" type=\"checkbox\" value=\"Option set 1 option 2\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-1-2\">\n Option set 1 option 2\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-1-3\" name=\"example\" type=\"checkbox\" value=\"Option set 1 option 3\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-1-3\">\n Option set 1 option 3\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-1-4\" name=\"example\" type=\"checkbox\" value=\"Option set 1 option 4\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-1-4\">\n Option set 1 option 4\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-1-5\" name=\"example\" type=\"checkbox\" value=\"Option set 1 option 5\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-1-5\">\n Option set 1 option 5\n </label>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"govuk-accordion__section\">\n <div class=\"govuk-accordion__section-header\">\n <h2 class=\"govuk-accordion__section-heading\">\n <span class=\"govuk-accordion__section-button\" id=\"accordion-example-heading-2\">\n Option set 2\n </span>\n </h2>\n </div>\n <div id=\"accordion-example-content-2\" class=\"govuk-accordion__section-content\">\n <div class=\"govuk-form-group\">\n <div class=\"govuk-checkboxes govuk-checkboxes--small\" data-module=\"govuk-checkboxes\">\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-2\" name=\"example\" type=\"checkbox\" value=\"Option set 2 option 1\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-2\">\n Option set 2 option 1\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-2-2\" name=\"example\" type=\"checkbox\" value=\"Option set 2 option 2\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-2-2\">\n Option set 2 option 2\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-2-3\" name=\"example\" type=\"checkbox\" value=\"Option set 2 option 3\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-2-3\">\n Option set 2 option 3\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-2-4\" name=\"example\" type=\"checkbox\" value=\"Option set 2 option 4\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-2-4\">\n Option set 2 option 4\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-2-5\" name=\"example\" type=\"checkbox\" value=\"Option set 2 option 5\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-2-5\">\n Option set 2 option 5\n </label>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"govuk-accordion__section\">\n <div class=\"govuk-accordion__section-header\">\n <h2 class=\"govuk-accordion__section-heading\">\n <span class=\"govuk-accordion__section-button\" id=\"accordion-example-heading-3\">\n Option set 3\n </span>\n </h2>\n </div>\n <div id=\"accordion-example-content-3\" class=\"govuk-accordion__section-content\">\n <div class=\"govuk-form-group\">\n <div class=\"govuk-checkboxes govuk-checkboxes--small\" data-module=\"govuk-checkboxes\">\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-3\" name=\"example\" type=\"checkbox\" value=\"Option set 3 option 1\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-3\">\n Option set 3 option 1\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-3-2\" name=\"example\" type=\"checkbox\" value=\"Option set 3 option 2\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-3-2\">\n Option set 3 option 2\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-3-3\" name=\"example\" type=\"checkbox\" value=\"Option set 3 option 3\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-3-3\">\n Option set 3 option 3\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-3-4\" name=\"example\" type=\"checkbox\" value=\"Option set 3 option 4\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-3-4\">\n Option set 3 option 4\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-3-5\" name=\"example\" type=\"checkbox\" value=\"Option set 3 option 5\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-3-5\">\n Option set 3 option 5\n </label>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n </div>\n </div>\n\n</fieldset>\n</div>\n\n</div>"
},
{
"name": "checkboxes default",
"options": {
"type": "checkboxes",
"question": {
"id": "example",
"question": "Here is the service question",
"options": [
{
"label": "Option 1",
"value": "option-1"
},
{
"label": "Option 2",
"value": "option-2"
},
{
"label": "Option 3",
"value": "option-3"
}
]
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<div\n class=\"question \"\n id=\"example\"\n>\n \n\n\n\n\n<div class=\"govuk-form-group\">\n <fieldset class=\"govuk-fieldset\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the service question\n </legend>\n <div class=\"govuk-checkboxes\" data-module=\"govuk-checkboxes\">\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example\" name=\"example\" type=\"checkbox\" value=\"option-1\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example\">\n Option 1\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-2\" name=\"example\" type=\"checkbox\" value=\"option-2\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-2\">\n Option 2\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-3\" name=\"example\" type=\"checkbox\" value=\"option-3\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-3\">\n Option 3\n </label>\n </div>\n </div>\n </fieldset>\n</div>\n\n\n</div>"
},
{
"name": "date default",
"options": {
"type": "date",
"question": {
"id": "example",
"question": "Here is the service question"
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<div\n class=\"question \"\n id=\"example\"\n>\n \n\n\n\n\n<div class=\"govuk-form-group\">\n <fieldset class=\"govuk-fieldset\" role=\"group\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the service question\n </legend>\n <div class=\"govuk-date-input\" id=\"input-example\">\n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"input-example-day\">\n Day\n </label>\n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"input-example-day\" name=\"example-day\" type=\"text\" inputmode=\"numeric\">\n </div>\n </div>\n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"input-example-month\">\n Month\n </label>\n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"input-example-month\" name=\"example-month\" type=\"text\" inputmode=\"numeric\">\n </div>\n </div>\n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"input-example-year\">\n Year\n </label>\n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"input-example-year\" name=\"example-year\" type=\"text\" inputmode=\"numeric\">\n </div>\n </div>\n </div>\n </fieldset>\n</div>\n\n\n</div>"
},
{
"name": "list default",
"options": {
"type": "list",
"question": {
"id": "example",
"question": "Here is the service question"
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<div\n class=\"question \"\n id=\"example\"\n>\n \n\n\n<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset dm-list\" data-module=\"dm-question-list\" data-max-number-of-items=\"10\" data-number-of-items-shown-as-default=\"2\" aria-describedby=\"\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the service question\n </legend>\n\n\n <div class=\"dm-list__items\">\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-example-0\">\n Entry number <span class=\"dm-list__item-label-counter\">1</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">1.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-example-0\" name=\"example\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">1</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-example-1\">\n Entry number <span class=\"dm-list__item-label-counter\">2</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">2.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-example-1\" name=\"example\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">2</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-example-2\">\n Entry number <span class=\"dm-list__item-label-counter\">3</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">3.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-example-2\" name=\"example\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">3</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-example-3\">\n Entry number <span class=\"dm-list__item-label-counter\">4</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">4.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-example-3\" name=\"example\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">4</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-example-4\">\n Entry number <span class=\"dm-list__item-label-counter\">5</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">5.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-example-4\" name=\"example\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">5</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-example-5\">\n Entry number <span class=\"dm-list__item-label-counter\">6</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">6.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-example-5\" name=\"example\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">6</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-example-6\">\n Entry number <span class=\"dm-list__item-label-counter\">7</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">7.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-example-6\" name=\"example\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">7</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-example-7\">\n Entry number <span class=\"dm-list__item-label-counter\">8</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">8.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-example-7\" name=\"example\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">8</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-example-8\">\n Entry number <span class=\"dm-list__item-label-counter\">9</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">9.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-example-8\" name=\"example\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">9</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-example-9\">\n Entry number <span class=\"dm-list__item-label-counter\">10</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">10.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-example-9\" name=\"example\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">10</span></span>\n</button>\n </div>\n </div>\n </div>\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-full\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-add govuk-visually-hidden\" data-module=\"govuk-button\">\n Add another (<span class=\"dm-list__item-add-counter\">0</span> remaining)\n</button>\n </div>\n </div>\n\n</fieldset>\n</div>\n\n</div>"
},
{
"name": "number default",
"options": {
"type": "number",
"question": {
"id": "example",
"question": "Here is the service question"
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<div\n class=\"question \"\n id=\"example\"\n>\n \n\n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-example\">\n Here is the service question\n </label>\n <input class=\"govuk-input govuk-input--width-5\" id=\"input-example\" name=\"example\" type=\"text\">\n</div>\n\n\n</div>"
},
{
"name": "money default",
"options": {
"type": "money",
"question": {
"id": "example",
"question": "Here is the service question\\",
"unit": "£"
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<div\n class=\"question \"\n id=\"example\"\n>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-example\">\n Here is the service question\\\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">£</div>\n <input class=\"govuk-input govuk-input--width-10\" id=\"input-example\" name=\"example\" type=\"text\">\n </div>\n</div>\n\n\n</div>"
},
{
"name": "pricing default",
"options": {
"type": "pricing",
"question": {
"id": "example",
"question": "Here is the pricing question",
"fields": {
"minimum_price": "examplePriceMin",
"maximum_price": "examplePriceMax"
}
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<div\n class=\"question \"\n id=\"example\"\n>\n \n\n<fieldset class=\"govuk-fieldset dm-pricing\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the pricing question\n </legend>\n\n <div class=\"govuk-form-group\">\n\n\n\n\n\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-examplePriceMin\">\n Minimum price\n </label>\n <div id=\"input-examplePriceMin-hint\" class=\"govuk-hint\">\n For example, £199.99\n </div>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">£</div>\n <input class=\"govuk-input govuk-input--width-10\" id=\"input-examplePriceMin\" name=\"examplePriceMin\" type=\"text\" aria-describedby=\"input-examplePriceMin-hint\">\n </div>\n</div>\n\n\n\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-examplePriceMax\">\n Maximum price\n </label>\n <div id=\"input-examplePriceMax-hint\" class=\"govuk-hint\">\n For example, £199.99\n </div>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">£</div>\n <input class=\"govuk-input govuk-input--width-10\" id=\"input-examplePriceMax\" name=\"examplePriceMax\" type=\"text\" aria-describedby=\"input-examplePriceMax-hint\">\n </div>\n</div>\n\n </div>\n\n</fieldset>\n\n</div>"
},
{
"name": "radios default",
"options": {
"type": "radios",
"question": {
"id": "example",
"question": "Here is the service question",
"options": [
{
"label": "Option 1",
"value": "option-1"
},
{
"label": "Option 2",
"value": "option-2"
},
{
"label": "Option 3",
"value": "option-3"
}
]
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<div\n class=\"question \"\n id=\"example\"\n>\n \n\n\n\n\n\n<div class=\"govuk-form-group\">\n <fieldset class=\"govuk-fieldset\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the service question\n </legend>\n <div class=\"govuk-radios\" data-module=\"govuk-radios\">\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-example\" name=\"example\" type=\"radio\" value=\"option-1\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-example\">\n Option 1\n </label>\n </div>\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-example-2\" name=\"example\" type=\"radio\" value=\"option-2\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-example-2\">\n Option 2\n </label>\n </div>\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-example-3\" name=\"example\" type=\"radio\" value=\"option-3\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-example-3\">\n Option 3\n </label>\n </div>\n </div>\n </fieldset>\n</div>\n\n\n</div>"
},
{
"name": "select default",
"options": {
"type": "select",
"question": {
"id": "example",
"question": "Here is the service question",
"options": [
{
"label": "Option 1",
"value": "option-1"
},
{
"label": "Option 2",
"value": "option-2"
},
{
"label": "Option 3",
"value": "option-3"
}
]
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<div\n class=\"question \"\n id=\"example\"\n>\n \n\n\n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-example\">\n Here is the service question\n </label>\n <select class=\"govuk-select\" id=\"input-example\" name=\"example\">\n <option value=\"\"></option>\n <option value=\"option-1\">Option 1</option>\n <option value=\"option-2\">Option 2</option>\n <option value=\"option-3\">Option 3</option>\n </select>\n</div>\n\n\n</div>"
},
{
"name": "text default",
"options": {
"type": "text",
"question": {
"id": "example",
"question": "Here is the service question"
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<div\n class=\"question \"\n id=\"example\"\n>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-example\">\n Here is the service question\n </label>\n <input class=\"govuk-input\" id=\"input-example\" name=\"example\" type=\"text\">\n</div>\n\n\n</div>"
},
{
"name": "upload default",
"options": {
"type": "upload",
"question": {
"id": "example",
"question": "Here is the service question"
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<div\n class=\"question \"\n id=\"example\"\n>\n \n\n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-example\">\n Here is the service question\n </label>\n <div\n class=\"govuk-drop-zone\"\n data-module=\"govuk-file-upload\">\n <input class=\"govuk-file-upload\" id=\"input-example\" name=\"example\" type=\"file\">\n </div>\n</div>\n\n\n</div>"
},
{
"name": "text with hidden",
"options": {
"type": "text",
"question": {
"id": "example",
"question": "Here is the service question",
"hidden": true
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<div\n class=\"question js-hidden dm-question__related-information\" aria-hidden=\"false\"\n id=\"example\"\nhidden>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-example\">\n Here is the service question\n </label>\n <input class=\"govuk-input\" id=\"input-example\" name=\"example\" type=\"text\">\n</div>\n\n\n</div>"
},
{
"name": "multiquestion default",
"options": {
"type": "multiquestion",
"question": {
"id": "multiquestion",
"questions": [
{
"type": "text",
"id": "multiquestionText",
"question": "Here is the service question"
},
{
"type": "radios",
"id": "multiquestionRadios",
"question": "Here is the service question",
"options": [
{
"label": "Option 1",
"value": "option-1"
},
{
"label": "Option 2",
"value": "option-2"
},
{
"label": "Option 3",
"value": "option-3"
}
]
},
{
"type": "textbox_large",
"id": "multiquestionTextbox",
"question": "Here is the service question",
"max_length_in_words": 500
}
]
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<div\n class=\"question \"\n id=\"multiquestion\"\n>\n \n<fieldset class=\"govuk-fieldset\">\n\n <div\n class=\"question \"\n id=\"multiquestionText\"\n>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-multiquestionText\">\n Here is the service question\n </label>\n <input class=\"govuk-input\" id=\"input-multiquestionText\" name=\"multiquestionText\" type=\"text\">\n</div>\n\n\n</div>\n\n <div\n class=\"question \"\n id=\"multiquestionRadios\"\n>\n \n\n\n\n\n\n<div class=\"govuk-form-group\">\n <fieldset class=\"govuk-fieldset\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the service question\n </legend>\n <div class=\"govuk-radios\" data-module=\"govuk-radios\">\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-multiquestionRadios\" name=\"multiquestionRadios\" type=\"radio\" value=\"option-1\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-multiquestionRadios\">\n Option 1\n </label>\n </div>\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-multiquestionRadios-2\" name=\"multiquestionRadios\" type=\"radio\" value=\"option-2\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-multiquestionRadios-2\">\n Option 2\n </label>\n </div>\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-multiquestionRadios-3\" name=\"multiquestionRadios\" type=\"radio\" value=\"option-3\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-multiquestionRadios-3\">\n Option 3\n </label>\n </div>\n </div>\n </fieldset>\n</div>\n\n\n</div>\n\n <div\n class=\"question \"\n id=\"multiquestionTextbox\"\n>\n \n\n\n<div class=\"govuk-form-group govuk-character-count\" data-module=\"govuk-character-count\" data-maxwords=\"500\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-multiquestionTextbox\">\n Here is the service question\n </label>\n <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"input-multiquestionTextbox\" name=\"multiquestionTextbox\" rows=\"5\" aria-describedby=\"input-multiquestionTextbox-info\"></textarea>\n <div id=\"input-multiquestionTextbox-info\" class=\"govuk-hint govuk-character-count__message\">\n You can enter up to 500 words\n </div>\n</div>\n\n\n</div>\n\n\n</fieldset>\n\n</div>"
},
{
"name": "list multiquestion default",
"options": {
"type": "list_multiquestion",
"question": {
"id": "listMultiquestion",
"question": "Enter as many items as needed",
"number_of_items": 5,
"questions": [
{
"id": "listMultiquestion0",
"question": "I am question 1",
"questions": [
{
"type": "text",
"id": "listMultiquestionText00",
"question": "Here is the first question"
},
{
"type": "text",
"id": "listMultiquestionText01",
"question": "Here is the second question"
}
]
},
{
"id": "listMultiquestion1",
"question": "I am question 2",
"questions": [
{
"type": "text",
"id": "listMultiquestionText10",
"question": "Here is the first question"
},
{
"type": "text",
"id": "listMultiquestionText11",
"question": "Here is the second question"
}
]
},
{
"id": "listMultiquestion1",
"question": "I am question 3",
"questions": [
{
"type": "text",
"id": "listMultiquestionText20",
"question": "Here is the first question"
},
{
"type": "text",
"id": "listMultiquestionText21",
"question": "Here is the second question"
}
]
}
]
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<div\n class=\"question \"\n id=\"listMultiquestion\"\n>\n \n \n<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset\" data-module=\"dm-question-list-multiquestion-client-side\" data-max-number-of-items=\"5\" id=\"input-listMultiquestion\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Enter as many items as needed\n </legend>\n\n <div class=\"dm-list-multiquestion__items\">\n <div class=\"dm-list-multiquestion__item govuk-!-margin-bottom-6\">\n<fieldset class=\"govuk-fieldset\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n I am question 1\n </legend>\n\n <div class=\"govuk-grid-row govuk-!-margin-bottom-2\">\n <div class=\"dm-multiquestion__item-input-column govuk-grid-column-one-half\">\n <div\n class=\"question \"\n id=\"listMultiquestionText00\"\n>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-listMultiquestionText00\">\n Here is the first question\n </label>\n <input class=\"govuk-input\" id=\"input-listMultiquestionText00\" name=\"listMultiquestionText00\" type=\"text\">\n</div>\n\n\n</div>\n\n </div>\n <div class=\"dm-multiquestion__item-input-column govuk-grid-column-one-half\">\n <div\n class=\"question \"\n id=\"listMultiquestionText01\"\n>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-listMultiquestionText01\">\n Here is the second question\n </label>\n <input class=\"govuk-input\" id=\"input-listMultiquestionText01\" name=\"listMultiquestionText01\" type=\"text\">\n</div>\n\n\n</div>\n\n </div>\n </div>\n\n</fieldset>\n </div> <div class=\"dm-list-multiquestion__item govuk-!-margin-bottom-6\">\n<fieldset class=\"govuk-fieldset\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n I am question 2\n </legend>\n\n <div class=\"govuk-grid-row govuk-!-margin-bottom-2\">\n <div class=\"dm-multiquestion__item-input-column govuk-grid-column-one-half\">\n <div\n class=\"question \"\n id=\"listMultiquestionText10\"\n>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-listMultiquestionText10\">\n Here is the first question\n </label>\n <input class=\"govuk-input\" id=\"input-listMultiquestionText10\" name=\"listMultiquestionText10\" type=\"text\">\n</div>\n\n\n</div>\n\n </div>\n <div class=\"dm-multiquestion__item-input-column govuk-grid-column-one-half\">\n <div\n class=\"question \"\n id=\"listMultiquestionText11\"\n>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-listMultiquestionText11\">\n Here is the second question\n </label>\n <input class=\"govuk-input\" id=\"input-listMultiquestionText11\" name=\"listMultiquestionText11\" type=\"text\">\n</div>\n\n\n</div>\n\n </div>\n </div>\n\n</fieldset>\n </div> <div class=\"dm-list-multiquestion__item govuk-!-margin-bottom-6\">\n<fieldset class=\"govuk-fieldset\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n I am question 3\n </legend>\n\n <div class=\"govuk-grid-row govuk-!-margin-bottom-2\">\n <div class=\"dm-multiquestion__item-input-column govuk-grid-column-one-half\">\n <div\n class=\"question \"\n id=\"listMultiquestionText20\"\n>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-listMultiquestionText20\">\n Here is the first question\n </label>\n <input class=\"govuk-input\" id=\"input-listMultiquestionText20\" name=\"listMultiquestionText20\" type=\"text\">\n</div>\n\n\n</div>\n\n </div>\n <div class=\"dm-multiquestion__item-input-column govuk-grid-column-one-half\">\n <div\n class=\"question \"\n id=\"listMultiquestionText21\"\n>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-listMultiquestionText21\">\n Here is the second question\n </label>\n <input class=\"govuk-input\" id=\"input-listMultiquestionText21\" name=\"listMultiquestionText21\" type=\"text\">\n</div>\n\n\n</div>\n\n </div>\n </div>\n\n</fieldset>\n </div> </div>\n\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-full\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list-multiquestion__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove<span class=\"govuk-visually-hidden\"> item <span class=\"dm-list-multiquestion__item-remove-counter\">0</span></span>\n</button>\n </div>\n </div>\n\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-full\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list-multiquestion__item-add govuk-visually-hidden\" data-module=\"govuk-button\">\n Add (<span class=\"dm-list-multiquestion__item-add-counter\">0</span> remaining)\n</button>\n </div>\n </div>\n\n</fieldset>\n</div>\n\n\n</div>"
},
{
"name": "list multiquestion server side default",
"options": {
"type": "list_multiquestion",
"question": {
"id": "listMultiquestion",
"question": "Enter as many items as needed",
"number_of_items": 5,
"questions": [
{
"id": "listMultiquestion0",
"question": "I am question 1",
"questions": [
{
"type": "text",
"id": "listMultiquestionText00",
"question": "Here is the first question",
"name": "Here is the first question"
},
{
"type": "text",
"id": "listMultiquestionText01",
"question": "Here is the second question",
"name": "Here is the second question"
}
]
},
{
"id": "listMultiquestion1",
"question": "I am question 2",
"questions": [
{
"type": "text",
"id": "listMultiquestionText10",
"question": "Here is the first question",
"name": "Here is the first question"
},
{
"type": "text",
"id": "listMultiquestionText11",
"question": "Here is the second question",
"name": "Here is the second question"
}
]
},
{
"id": "listMultiquestion1",
"question": "I am question 3",
"questions": [
{
"type": "text",
"id": "listMultiquestionText20",
"question": "Here is the first question",
"name": "Here is the first question"
},
{
"type": "text",
"id": "listMultiquestionText21",
"question": "Here is the second question",
"name": "Here is the second question"
}
]
},
{
"id": "listMultiquestion3",
"question": "I am question 4",
"questions": [
{
"type": "text",
"id": "listMultiquestionText30",
"question": "Here is the first question",
"name": "Here is the first question"
},
{
"type": "text",
"id": "listMultiquestionText31",
"question": "Here is the second question",
"name": "Here is the second question"
}
]
},
{
"id": "listMultiquestion4",
"question": "I am question 5",
"questions": [
{
"type": "text",
"id": "listMultiquestionText40",
"question": "Here is the first question",
"name": "Here is the first question"
},
{
"type": "text",
"id": "listMultiquestionText41",
"question": "Here is the second question",
"name": "Here is the second question"
}
]
}
]
},
"server_side_options": {
"add_endpoint": "main.add_item",
"remove_endpoint": "main.remove_item",
"endpoint_values": {
"section_id": "questions"
}
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<div\n class=\"question \"\n id=\"listMultiquestion\"\n>\n \n \n<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset\" id=\"input-listMultiquestion\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Enter as many items as needed\n </legend>\n\n\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-full\">\n <a href=\"/suppliers/add-item/questions/listMultiquestion/0\" role=\"button\" draggable=\"false\" class=\"govuk-button govuk-button--secondary dm-list-multiquestion__item-add\" data-module=\"govuk-button\">\n Add (5 remaining)\n</a>\n </div>\n </div>\n\n</fieldset>\n</div>\n\n\n</div>"
},
{
"name": "follow up question with radios",
"options": {
"type": "multiquestion",
"question": {
"id": "multiquestion",
"questions": [
{
"type": "radios",
"id": "example",
"question": "Here is the service question",
"options": [
{
"label": "Option 1",
"value": "option-1"
},
{
"label": "Option 2",
"value": "option-2"
},
{
"label": "Option 3",
"value": "option-3"
}
],
"followup": {
"exampleText": [
"option-1"
],
"exampleTextbox": [
"option-2"
],
"exampleList": [
"option-2"
],
"exampleText2": [
"option-3"
]
}
},
{
"type": "text",
"id": "exampleText",
"question": "Here is the service question text",
"hidden": true
},
{
"type": "textbox_large",
"id": "exampleTextbox",
"question": "Here is the service question",
"max_length_in_words": 500,
"hidden": true
},
{
"type": "list",
"id": "exampleList",
"question": "Here is the service question",
"hidden": true
},
{
"type": "text",
"id": "exampleText2",
"question": "Here is the second service question text",
"hidden": true
}
]
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<div\n class=\"question \"\n id=\"multiquestion\"\n>\n \n<fieldset class=\"govuk-fieldset\">\n\n <div\n class=\"question \"\n id=\"example\"\ndata-module=\"dm-question\">\n \n\n\n\n\n\n<div class=\"govuk-form-group\">\n <fieldset class=\"govuk-fieldset\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the service question\n </legend>\n <div class=\"govuk-radios\" data-module=\"govuk-radios\">\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-example\" name=\"example\" type=\"radio\" value=\"option-1\" data-target=\"exampleText\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-example\">\n Option 1\n </label>\n </div>\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-example-2\" name=\"example\" type=\"radio\" value=\"option-2\" data-target=\"exampleTextbox exampleList\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-example-2\">\n Option 2\n </label>\n </div>\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-example-3\" name=\"example\" type=\"radio\" value=\"option-3\" data-target=\"exampleText2\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-example-3\">\n Option 3\n </label>\n </div>\n </div>\n </fieldset>\n</div>\n\n\n</div>\n\n <div\n class=\"question js-hidden dm-question__related-information\" aria-hidden=\"false\"\n id=\"exampleText\"\nhidden>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-exampleText\">\n Here is the service question text\n </label>\n <input class=\"govuk-input\" id=\"input-exampleText\" name=\"exampleText\" type=\"text\">\n</div>\n\n\n</div>\n\n <div\n class=\"question js-hidden dm-question__related-information\" aria-hidden=\"false\"\n id=\"exampleTextbox\"\nhidden>\n \n\n\n<div class=\"govuk-form-group govuk-character-count\" data-module=\"govuk-character-count\" data-maxwords=\"500\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-exampleTextbox\">\n Here is the service question\n </label>\n <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"input-exampleTextbox\" name=\"exampleTextbox\" rows=\"5\" aria-describedby=\"input-exampleTextbox-info\"></textarea>\n <div id=\"input-exampleTextbox-info\" class=\"govuk-hint govuk-character-count__message\">\n You can enter up to 500 words\n </div>\n</div>\n\n\n</div>\n\n <div\n class=\"question js-hidden dm-question__related-information\" aria-hidden=\"false\"\n id=\"exampleList\"\nhidden>\n \n\n\n<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset dm-list\" data-module=\"dm-question-list\" data-max-number-of-items=\"10\" data-number-of-items-shown-as-default=\"2\" aria-describedby=\"\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the service question\n </legend>\n\n\n <div class=\"dm-list__items\">\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-0\">\n Entry number <span class=\"dm-list__item-label-counter\">1</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">1.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-0\" name=\"exampleList\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">1</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-1\">\n Entry number <span class=\"dm-list__item-label-counter\">2</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">2.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-1\" name=\"exampleList\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">2</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-2\">\n Entry number <span class=\"dm-list__item-label-counter\">3</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">3.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-2\" name=\"exampleList\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">3</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-3\">\n Entry number <span class=\"dm-list__item-label-counter\">4</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">4.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-3\" name=\"exampleList\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">4</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-4\">\n Entry number <span class=\"dm-list__item-label-counter\">5</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">5.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-4\" name=\"exampleList\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">5</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-5\">\n Entry number <span class=\"dm-list__item-label-counter\">6</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">6.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-5\" name=\"exampleList\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">6</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-6\">\n Entry number <span class=\"dm-list__item-label-counter\">7</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">7.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-6\" name=\"exampleList\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">7</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-7\">\n Entry number <span class=\"dm-list__item-label-counter\">8</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">8.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-7\" name=\"exampleList\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">8</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-8\">\n Entry number <span class=\"dm-list__item-label-counter\">9</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">9.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-8\" name=\"exampleList\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">9</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-9\">\n Entry number <span class=\"dm-list__item-label-counter\">10</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">10.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-9\" name=\"exampleList\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">10</span></span>\n</button>\n </div>\n </div>\n </div>\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-full\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-add govuk-visually-hidden\" data-module=\"govuk-button\">\n Add another (<span class=\"dm-list__item-add-counter\">0</span> remaining)\n</button>\n </div>\n </div>\n\n</fieldset>\n</div>\n\n</div>\n\n <div\n class=\"question js-hidden dm-question__related-information\" aria-hidden=\"false\"\n id=\"exampleText2\"\nhidden>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-exampleText2\">\n Here is the second service question text\n </label>\n <input class=\"govuk-input\" id=\"input-exampleText2\" name=\"exampleText2\" type=\"text\">\n</div>\n\n\n</div>\n\n\n</fieldset>\n\n</div>"
},
{
"name": "follow up question with radios with list_multi_question_index",
"options": {
"type": "multiquestion",
"list_multi_question_index": 0,
"question": {
"id": "multiquestion-0",
"questions": [
{
"type": "radios",
"id": "example-0",
"question": "Here is the service question",
"options": [
{
"label": "Option 1",
"value": "option-1"
},
{
"label": "Option 2",
"value": "option-2"
},
{
"label": "Option 3",
"value": "option-3"
}
],
"followup": {
"exampleText": [
"option-1"
],
"exampleTextbox": [
"option-2"
],
"exampleList": [
"option-2"
],
"exampleText2": [
"option-3"
]
}
},
{
"type": "text",
"id": "exampleText-0",
"question": "Here is the service question text",
"hidden": true
},
{
"type": "textbox_large",
"id": "exampleTextbox-0",
"question": "Here is the service question",
"max_length_in_words": 500,
"hidden": true
},
{
"type": "list",
"id": "exampleList-0",
"question": "Here is the service question",
"hidden": true
},
{
"type": "text",
"id": "exampleText2-0",
"question": "Here is the second service question text",
"hidden": true
}
]
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<div\n class=\"question \"\n id=\"multiquestion-0\"\n>\n \n<fieldset class=\"govuk-fieldset\">\n\n <div\n class=\"question \"\n id=\"example-0\"\ndata-module=\"dm-question\">\n \n\n\n\n\n\n<div class=\"govuk-form-group\">\n <fieldset class=\"govuk-fieldset\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the service question\n </legend>\n <div class=\"govuk-radios\" data-module=\"govuk-radios\">\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-example-0\" name=\"example-0\" type=\"radio\" value=\"option-1\" data-target=\"exampleText-0\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-example-0\">\n Option 1\n </label>\n </div>\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-example-0-2\" name=\"example-0\" type=\"radio\" value=\"option-2\" data-target=\"exampleTextbox-0 exampleList-0\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-example-0-2\">\n Option 2\n </label>\n </div>\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-example-0-3\" name=\"example-0\" type=\"radio\" value=\"option-3\" data-target=\"exampleText2-0\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-example-0-3\">\n Option 3\n </label>\n </div>\n </div>\n </fieldset>\n</div>\n\n\n</div>\n\n <div\n class=\"question js-hidden dm-question__related-information\" aria-hidden=\"false\"\n id=\"exampleText-0\"\nhidden>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-exampleText-0\">\n Here is the service question text\n </label>\n <input class=\"govuk-input\" id=\"input-exampleText-0\" name=\"exampleText-0\" type=\"text\">\n</div>\n\n\n</div>\n\n <div\n class=\"question js-hidden dm-question__related-information\" aria-hidden=\"false\"\n id=\"exampleTextbox-0\"\nhidden>\n \n\n\n<div class=\"govuk-form-group govuk-character-count\" data-module=\"govuk-character-count\" data-maxwords=\"500\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-exampleTextbox-0\">\n Here is the service question\n </label>\n <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"input-exampleTextbox-0\" name=\"exampleTextbox-0\" rows=\"5\" aria-describedby=\"input-exampleTextbox-0-info\"></textarea>\n <div id=\"input-exampleTextbox-0-info\" class=\"govuk-hint govuk-character-count__message\">\n You can enter up to 500 words\n </div>\n</div>\n\n\n</div>\n\n <div\n class=\"question js-hidden dm-question__related-information\" aria-hidden=\"false\"\n id=\"exampleList-0\"\nhidden>\n \n\n\n<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset dm-list\" data-module=\"dm-question-list\" data-max-number-of-items=\"10\" data-number-of-items-shown-as-default=\"2\" aria-describedby=\"\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the service question\n </legend>\n\n\n <div class=\"dm-list__items\">\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-0-0\">\n Entry number <span class=\"dm-list__item-label-counter\">1</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">1.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-0-0\" name=\"exampleList-0\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">1</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-0-1\">\n Entry number <span class=\"dm-list__item-label-counter\">2</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">2.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-0-1\" name=\"exampleList-0\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">2</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-0-2\">\n Entry number <span class=\"dm-list__item-label-counter\">3</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">3.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-0-2\" name=\"exampleList-0\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">3</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-0-3\">\n Entry number <span class=\"dm-list__item-label-counter\">4</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">4.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-0-3\" name=\"exampleList-0\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">4</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-0-4\">\n Entry number <span class=\"dm-list__item-label-counter\">5</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">5.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-0-4\" name=\"exampleList-0\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">5</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-0-5\">\n Entry number <span class=\"dm-list__item-label-counter\">6</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">6.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-0-5\" name=\"exampleList-0\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">6</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-0-6\">\n Entry number <span class=\"dm-list__item-label-counter\">7</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">7.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-0-6\" name=\"exampleList-0\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">7</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-0-7\">\n Entry number <span class=\"dm-list__item-label-counter\">8</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">8.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-0-7\" name=\"exampleList-0\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">8</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-0-8\">\n Entry number <span class=\"dm-list__item-label-counter\">9</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">9.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-0-8\" name=\"exampleList-0\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">9</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-0-9\">\n Entry number <span class=\"dm-list__item-label-counter\">10</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">10.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-0-9\" name=\"exampleList-0\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">10</span></span>\n</button>\n </div>\n </div>\n </div>\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-full\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-add govuk-visually-hidden\" data-module=\"govuk-button\">\n Add another (<span class=\"dm-list__item-add-counter\">0</span> remaining)\n</button>\n </div>\n </div>\n\n</fieldset>\n</div>\n\n</div>\n\n <div\n class=\"question js-hidden dm-question__related-information\" aria-hidden=\"false\"\n id=\"exampleText2-0\"\nhidden>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-exampleText2-0\">\n Here is the second service question text\n </label>\n <input class=\"govuk-input\" id=\"input-exampleText2-0\" name=\"exampleText2-0\" type=\"text\">\n</div>\n\n\n</div>\n\n\n</fieldset>\n\n</div>"
},
{
"name": "follow up question with radios and data",
"options": {
"type": "multiquestion",
"question": {
"id": "multiquestion",
"questions": [
{
"type": "radios",
"id": "example",
"question": "Here is the service question",
"options": [
{
"label": "Option 1",
"value": "option-1"
},
{
"label": "Option 2",
"value": "option-2"
},
{
"label": "Option 3",
"value": "option-3"
}
],
"followup": {
"exampleText": [
"option-1"
],
"exampleTextbox": [
"option-2"
],
"exampleList": [
"option-2"
],
"exampleText2": [
"option-3"
]
}
},
{
"type": "text",
"id": "exampleText",
"question": "Here is the service question text",
"hidden": true
},
{
"type": "textbox_large",
"id": "exampleTextbox",
"question": "Here is the service question",
"max_length_in_words": 500,
"hidden": true
},
{
"type": "list",
"id": "exampleList",
"question": "Here is the service question",
"hidden": true
},
{
"type": "text",
"id": "exampleText2",
"question": "Here is the second service question text",
"hidden": true
}
]
},
"data": {
"example": "option-2"
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<div\n class=\"question \"\n id=\"multiquestion\"\n>\n \n<fieldset class=\"govuk-fieldset\">\n\n <div\n class=\"question \"\n id=\"example\"\ndata-module=\"dm-question\">\n \n\n\n\n\n\n<div class=\"govuk-form-group\">\n <fieldset class=\"govuk-fieldset\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the service question\n </legend>\n <div class=\"govuk-radios\" data-module=\"govuk-radios\">\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-example\" name=\"example\" type=\"radio\" value=\"option-1\" data-target=\"exampleText\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-example\">\n Option 1\n </label>\n </div>\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-example-2\" name=\"example\" type=\"radio\" value=\"option-2\" checked data-target=\"exampleTextbox exampleList\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-example-2\">\n Option 2\n </label>\n </div>\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-example-3\" name=\"example\" type=\"radio\" value=\"option-3\" data-target=\"exampleText2\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-example-3\">\n Option 3\n </label>\n </div>\n </div>\n </fieldset>\n</div>\n\n\n</div>\n\n <div\n class=\"question js-hidden dm-question__related-information\" aria-hidden=\"false\"\n id=\"exampleText\"\nhidden>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-exampleText\">\n Here is the service question text\n </label>\n <input class=\"govuk-input\" id=\"input-exampleText\" name=\"exampleText\" type=\"text\">\n</div>\n\n\n</div>\n\n <div\n class=\"question js-hidden dm-question__related-information\" aria-hidden=\"false\"\n id=\"exampleTextbox\"\nhidden>\n \n\n\n<div class=\"govuk-form-group govuk-character-count\" data-module=\"govuk-character-count\" data-maxwords=\"500\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-exampleTextbox\">\n Here is the service question\n </label>\n <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"input-exampleTextbox\" name=\"exampleTextbox\" rows=\"5\" aria-describedby=\"input-exampleTextbox-info\"></textarea>\n <div id=\"input-exampleTextbox-info\" class=\"govuk-hint govuk-character-count__message\">\n You can enter up to 500 words\n </div>\n</div>\n\n\n</div>\n\n <div\n class=\"question js-hidden dm-question__related-information\" aria-hidden=\"false\"\n id=\"exampleList\"\nhidden>\n \n\n\n<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset dm-list\" data-module=\"dm-question-list\" data-max-number-of-items=\"10\" data-number-of-items-shown-as-default=\"2\" aria-describedby=\"\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the service question\n </legend>\n\n\n <div class=\"dm-list__items\">\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-0\">\n Entry number <span class=\"dm-list__item-label-counter\">1</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">1.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-0\" name=\"exampleList\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">1</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-1\">\n Entry number <span class=\"dm-list__item-label-counter\">2</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">2.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-1\" name=\"exampleList\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">2</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-2\">\n Entry number <span class=\"dm-list__item-label-counter\">3</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">3.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-2\" name=\"exampleList\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">3</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-3\">\n Entry number <span class=\"dm-list__item-label-counter\">4</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">4.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-3\" name=\"exampleList\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">4</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-4\">\n Entry number <span class=\"dm-list__item-label-counter\">5</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">5.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-4\" name=\"exampleList\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">5</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-5\">\n Entry number <span class=\"dm-list__item-label-counter\">6</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">6.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-5\" name=\"exampleList\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">6</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-6\">\n Entry number <span class=\"dm-list__item-label-counter\">7</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">7.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-6\" name=\"exampleList\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">7</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-7\">\n Entry number <span class=\"dm-list__item-label-counter\">8</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">8.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-7\" name=\"exampleList\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">8</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-8\">\n Entry number <span class=\"dm-list__item-label-counter\">9</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">9.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-8\" name=\"exampleList\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">9</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-9\">\n Entry number <span class=\"dm-list__item-label-counter\">10</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">10.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-9\" name=\"exampleList\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">10</span></span>\n</button>\n </div>\n </div>\n </div>\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-full\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-add govuk-visually-hidden\" data-module=\"govuk-button\">\n Add another (<span class=\"dm-list__item-add-counter\">0</span> remaining)\n</button>\n </div>\n </div>\n\n</fieldset>\n</div>\n\n</div>\n\n <div\n class=\"question js-hidden dm-question__related-information\" aria-hidden=\"false\"\n id=\"exampleText2\"\nhidden>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-exampleText2\">\n Here is the second service question text\n </label>\n <input class=\"govuk-input\" id=\"input-exampleText2\" name=\"exampleText2\" type=\"text\">\n</div>\n\n\n</div>\n\n\n</fieldset>\n\n</div>"
},
{
"name": "follow up question with checkboxes",
"options": {
"type": "multiquestion",
"question": {
"id": "multiquestion",
"questions": [
{
"type": "checkboxes",
"id": "example",
"question": "Here is the service question",
"options": [
{
"label": "Option 1",
"value": "option-1"
},
{
"label": "Option 2",
"value": "option-2"
},
{
"label": "Option 3",
"value": "option-3"
}
],
"followup": {
"exampleText": [
"option-1"
],
"exampleTextbox": [
"option-2"
],
"exampleList": [
"option-2"
],
"exampleText2": [
"option-3"
]
}
},
{
"type": "text",
"id": "exampleText",
"question": "Here is the service question text",
"hidden": true
},
{
"type": "textbox_large",
"id": "exampleTextbox",
"question": "Here is the service question",
"max_length_in_words": 500,
"hidden": true
},
{
"type": "list",
"id": "exampleList",
"question": "Here is the service question",
"hidden": true
},
{
"type": "text",
"id": "exampleText2",
"question": "Here is the second service question text",
"hidden": true
}
]
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<div\n class=\"question \"\n id=\"multiquestion\"\n>\n \n<fieldset class=\"govuk-fieldset\">\n\n <div\n class=\"question \"\n id=\"example\"\ndata-module=\"dm-question\">\n \n\n\n\n\n<div class=\"govuk-form-group\">\n <fieldset class=\"govuk-fieldset\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the service question\n </legend>\n <div class=\"govuk-checkboxes\" data-module=\"govuk-checkboxes\">\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example\" name=\"example\" type=\"checkbox\" value=\"option-1\" data-target=\"exampleText\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example\">\n Option 1\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-2\" name=\"example\" type=\"checkbox\" value=\"option-2\" data-target=\"exampleTextbox exampleList\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-2\">\n Option 2\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-3\" name=\"example\" type=\"checkbox\" value=\"option-3\" data-target=\"exampleText2\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-3\">\n Option 3\n </label>\n </div>\n </div>\n </fieldset>\n</div>\n\n\n</div>\n\n <div\n class=\"question js-hidden dm-question__related-information\" aria-hidden=\"false\"\n id=\"exampleText\"\nhidden>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-exampleText\">\n Here is the service question text\n </label>\n <input class=\"govuk-input\" id=\"input-exampleText\" name=\"exampleText\" type=\"text\">\n</div>\n\n\n</div>\n\n <div\n class=\"question js-hidden dm-question__related-information\" aria-hidden=\"false\"\n id=\"exampleTextbox\"\nhidden>\n \n\n\n<div class=\"govuk-form-group govuk-character-count\" data-module=\"govuk-character-count\" data-maxwords=\"500\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-exampleTextbox\">\n Here is the service question\n </label>\n <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"input-exampleTextbox\" name=\"exampleTextbox\" rows=\"5\" aria-describedby=\"input-exampleTextbox-info\"></textarea>\n <div id=\"input-exampleTextbox-info\" class=\"govuk-hint govuk-character-count__message\">\n You can enter up to 500 words\n </div>\n</div>\n\n\n</div>\n\n <div\n class=\"question js-hidden dm-question__related-information\" aria-hidden=\"false\"\n id=\"exampleList\"\nhidden>\n \n\n\n<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset dm-list\" data-module=\"dm-question-list\" data-max-number-of-items=\"10\" data-number-of-items-shown-as-default=\"2\" aria-describedby=\"\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the service question\n </legend>\n\n\n <div class=\"dm-list__items\">\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-0\">\n Entry number <span class=\"dm-list__item-label-counter\">1</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">1.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-0\" name=\"exampleList\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">1</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-1\">\n Entry number <span class=\"dm-list__item-label-counter\">2</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">2.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-1\" name=\"exampleList\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">2</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-2\">\n Entry number <span class=\"dm-list__item-label-counter\">3</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">3.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-2\" name=\"exampleList\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">3</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-3\">\n Entry number <span class=\"dm-list__item-label-counter\">4</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">4.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-3\" name=\"exampleList\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">4</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-4\">\n Entry number <span class=\"dm-list__item-label-counter\">5</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">5.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-4\" name=\"exampleList\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">5</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-5\">\n Entry number <span class=\"dm-list__item-label-counter\">6</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">6.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-5\" name=\"exampleList\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">6</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-6\">\n Entry number <span class=\"dm-list__item-label-counter\">7</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">7.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-6\" name=\"exampleList\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">7</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-7\">\n Entry number <span class=\"dm-list__item-label-counter\">8</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">8.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-7\" name=\"exampleList\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">8</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-8\">\n Entry number <span class=\"dm-list__item-label-counter\">9</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">9.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-8\" name=\"exampleList\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">9</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-9\">\n Entry number <span class=\"dm-list__item-label-counter\">10</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">10.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-9\" name=\"exampleList\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">10</span></span>\n</button>\n </div>\n </div>\n </div>\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-full\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-add govuk-visually-hidden\" data-module=\"govuk-button\">\n Add another (<span class=\"dm-list__item-add-counter\">0</span> remaining)\n</button>\n </div>\n </div>\n\n</fieldset>\n</div>\n\n</div>\n\n <div\n class=\"question js-hidden dm-question__related-information\" aria-hidden=\"false\"\n id=\"exampleText2\"\nhidden>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-exampleText2\">\n Here is the second service question text\n </label>\n <input class=\"govuk-input\" id=\"input-exampleText2\" name=\"exampleText2\" type=\"text\">\n</div>\n\n\n</div>\n\n\n</fieldset>\n\n</div>"
},
{
"name": "follow up question with checkboxes with list_multi_question_index",
"options": {
"type": "multiquestion",
"list_multi_question_index": 3,
"question": {
"id": "multiquestion-3",
"questions": [
{
"type": "checkboxes",
"id": "example-3",
"question": "Here is the service question",
"options": [
{
"label": "Option 1",
"value": "option-1"
},
{
"label": "Option 2",
"value": "option-2"
},
{
"label": "Option 3",
"value": "option-3"
}
],
"followup": {
"exampleText": [
"option-1"
],
"exampleTextbox": [
"option-2"
],
"exampleList": [
"option-2"
],
"exampleText2": [
"option-3"
]
}
},
{
"type": "text",
"id": "exampleText-3",
"question": "Here is the service question text",
"hidden": true
},
{
"type": "textbox_large",
"id": "exampleTextbox-3",
"question": "Here is the service question",
"max_length_in_words": 500,
"hidden": true
},
{
"type": "list",
"id": "exampleList-3",
"question": "Here is the service question",
"hidden": true
},
{
"type": "text",
"id": "exampleText2-3",
"question": "Here is the second service question text",
"hidden": true
}
]
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<div\n class=\"question \"\n id=\"multiquestion-3\"\n>\n \n<fieldset class=\"govuk-fieldset\">\n\n <div\n class=\"question \"\n id=\"example-3\"\ndata-module=\"dm-question\">\n \n\n\n\n\n<div class=\"govuk-form-group\">\n <fieldset class=\"govuk-fieldset\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the service question\n </legend>\n <div class=\"govuk-checkboxes\" data-module=\"govuk-checkboxes\">\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-3\" name=\"example-3\" type=\"checkbox\" value=\"option-1\" data-target=\"exampleText-3\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-3\">\n Option 1\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-3-2\" name=\"example-3\" type=\"checkbox\" value=\"option-2\" data-target=\"exampleTextbox-3 exampleList-3\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-3-2\">\n Option 2\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-3-3\" name=\"example-3\" type=\"checkbox\" value=\"option-3\" data-target=\"exampleText2-3\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-3-3\">\n Option 3\n </label>\n </div>\n </div>\n </fieldset>\n</div>\n\n\n</div>\n\n <div\n class=\"question js-hidden dm-question__related-information\" aria-hidden=\"false\"\n id=\"exampleText-3\"\nhidden>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-exampleText-3\">\n Here is the service question text\n </label>\n <input class=\"govuk-input\" id=\"input-exampleText-3\" name=\"exampleText-3\" type=\"text\">\n</div>\n\n\n</div>\n\n <div\n class=\"question js-hidden dm-question__related-information\" aria-hidden=\"false\"\n id=\"exampleTextbox-3\"\nhidden>\n \n\n\n<div class=\"govuk-form-group govuk-character-count\" data-module=\"govuk-character-count\" data-maxwords=\"500\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-exampleTextbox-3\">\n Here is the service question\n </label>\n <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"input-exampleTextbox-3\" name=\"exampleTextbox-3\" rows=\"5\" aria-describedby=\"input-exampleTextbox-3-info\"></textarea>\n <div id=\"input-exampleTextbox-3-info\" class=\"govuk-hint govuk-character-count__message\">\n You can enter up to 500 words\n </div>\n</div>\n\n\n</div>\n\n <div\n class=\"question js-hidden dm-question__related-information\" aria-hidden=\"false\"\n id=\"exampleList-3\"\nhidden>\n \n\n\n<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset dm-list\" data-module=\"dm-question-list\" data-max-number-of-items=\"10\" data-number-of-items-shown-as-default=\"2\" aria-describedby=\"\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the service question\n </legend>\n\n\n <div class=\"dm-list__items\">\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-3-0\">\n Entry number <span class=\"dm-list__item-label-counter\">1</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">1.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-3-0\" name=\"exampleList-3\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">1</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-3-1\">\n Entry number <span class=\"dm-list__item-label-counter\">2</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">2.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-3-1\" name=\"exampleList-3\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">2</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-3-2\">\n Entry number <span class=\"dm-list__item-label-counter\">3</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">3.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-3-2\" name=\"exampleList-3\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">3</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-3-3\">\n Entry number <span class=\"dm-list__item-label-counter\">4</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">4.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-3-3\" name=\"exampleList-3\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">4</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-3-4\">\n Entry number <span class=\"dm-list__item-label-counter\">5</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">5.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-3-4\" name=\"exampleList-3\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">5</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-3-5\">\n Entry number <span class=\"dm-list__item-label-counter\">6</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">6.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-3-5\" name=\"exampleList-3\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">6</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-3-6\">\n Entry number <span class=\"dm-list__item-label-counter\">7</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">7.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-3-6\" name=\"exampleList-3\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">7</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-3-7\">\n Entry number <span class=\"dm-list__item-label-counter\">8</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">8.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-3-7\" name=\"exampleList-3\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">8</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-3-8\">\n Entry number <span class=\"dm-list__item-label-counter\">9</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">9.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-3-8\" name=\"exampleList-3\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">9</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-3-9\">\n Entry number <span class=\"dm-list__item-label-counter\">10</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">10.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-3-9\" name=\"exampleList-3\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">10</span></span>\n</button>\n </div>\n </div>\n </div>\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-full\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-add govuk-visually-hidden\" data-module=\"govuk-button\">\n Add another (<span class=\"dm-list__item-add-counter\">0</span> remaining)\n</button>\n </div>\n </div>\n\n</fieldset>\n</div>\n\n</div>\n\n <div\n class=\"question js-hidden dm-question__related-information\" aria-hidden=\"false\"\n id=\"exampleText2-3\"\nhidden>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-exampleText2-3\">\n Here is the second service question text\n </label>\n <input class=\"govuk-input\" id=\"input-exampleText2-3\" name=\"exampleText2-3\" type=\"text\">\n</div>\n\n\n</div>\n\n\n</fieldset>\n\n</div>"
},
{
"name": "follow up question with checkboxes and data",
"options": {
"type": "multiquestion",
"question": {
"id": "multiquestion",
"questions": [
{
"type": "checkboxes",
"id": "example",
"question": "Here is the service question",
"options": [
{
"label": "Option 1",
"value": "option-1"
},
{
"label": "Option 2",
"value": "option-2"
},
{
"label": "Option 3",
"value": "option-3"
}
],
"followup": {
"exampleText": [
"option-1"
],
"exampleTextbox": [
"option-2"
],
"exampleList": [
"option-2"
],
"exampleText2": [
"option-3"
]
}
},
{
"type": "text",
"id": "exampleText",
"question": "Here is the service question text",
"hidden": true
},
{
"type": "textbox_large",
"id": "exampleTextbox",
"question": "Here is the service question",
"max_length_in_words": 500,
"hidden": true
},
{
"type": "list",
"id": "exampleList",
"question": "Here is the service question",
"hidden": true
},
{
"type": "text",
"id": "exampleText2",
"question": "Here is the second service question text",
"hidden": true
}
]
},
"data": {
"example": [
"option-1",
"option-2"
]
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<div\n class=\"question \"\n id=\"multiquestion\"\n>\n \n<fieldset class=\"govuk-fieldset\">\n\n <div\n class=\"question \"\n id=\"example\"\ndata-module=\"dm-question\">\n \n\n\n\n\n<div class=\"govuk-form-group\">\n <fieldset class=\"govuk-fieldset\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the service question\n </legend>\n <div class=\"govuk-checkboxes\" data-module=\"govuk-checkboxes\">\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example\" name=\"example\" type=\"checkbox\" value=\"option-1\" checked data-target=\"exampleText\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example\">\n Option 1\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-2\" name=\"example\" type=\"checkbox\" value=\"option-2\" checked data-target=\"exampleTextbox exampleList\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-2\">\n Option 2\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"input-example-3\" name=\"example\" type=\"checkbox\" value=\"option-3\" data-target=\"exampleText2\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"input-example-3\">\n Option 3\n </label>\n </div>\n </div>\n </fieldset>\n</div>\n\n\n</div>\n\n <div\n class=\"question js-hidden dm-question__related-information\" aria-hidden=\"false\"\n id=\"exampleText\"\nhidden>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-exampleText\">\n Here is the service question text\n </label>\n <input class=\"govuk-input\" id=\"input-exampleText\" name=\"exampleText\" type=\"text\">\n</div>\n\n\n</div>\n\n <div\n class=\"question js-hidden dm-question__related-information\" aria-hidden=\"false\"\n id=\"exampleTextbox\"\nhidden>\n \n\n\n<div class=\"govuk-form-group govuk-character-count\" data-module=\"govuk-character-count\" data-maxwords=\"500\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-exampleTextbox\">\n Here is the service question\n </label>\n <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"input-exampleTextbox\" name=\"exampleTextbox\" rows=\"5\" aria-describedby=\"input-exampleTextbox-info\"></textarea>\n <div id=\"input-exampleTextbox-info\" class=\"govuk-hint govuk-character-count__message\">\n You can enter up to 500 words\n </div>\n</div>\n\n\n</div>\n\n <div\n class=\"question js-hidden dm-question__related-information\" aria-hidden=\"false\"\n id=\"exampleList\"\nhidden>\n \n\n\n<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset dm-list\" data-module=\"dm-question-list\" data-max-number-of-items=\"10\" data-number-of-items-shown-as-default=\"2\" aria-describedby=\"\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the service question\n </legend>\n\n\n <div class=\"dm-list__items\">\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-0\">\n Entry number <span class=\"dm-list__item-label-counter\">1</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">1.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-0\" name=\"exampleList\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">1</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-1\">\n Entry number <span class=\"dm-list__item-label-counter\">2</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">2.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-1\" name=\"exampleList\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">2</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-2\">\n Entry number <span class=\"dm-list__item-label-counter\">3</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">3.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-2\" name=\"exampleList\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">3</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-3\">\n Entry number <span class=\"dm-list__item-label-counter\">4</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">4.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-3\" name=\"exampleList\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">4</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-4\">\n Entry number <span class=\"dm-list__item-label-counter\">5</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">5.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-4\" name=\"exampleList\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">5</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-5\">\n Entry number <span class=\"dm-list__item-label-counter\">6</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">6.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-5\" name=\"exampleList\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">6</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-6\">\n Entry number <span class=\"dm-list__item-label-counter\">7</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">7.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-6\" name=\"exampleList\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">7</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-7\">\n Entry number <span class=\"dm-list__item-label-counter\">8</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">8.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-7\" name=\"exampleList\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">8</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-8\">\n Entry number <span class=\"dm-list__item-label-counter\">9</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">9.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-8\" name=\"exampleList\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">9</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-9\">\n Entry number <span class=\"dm-list__item-label-counter\">10</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">10.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-9\" name=\"exampleList\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">10</span></span>\n</button>\n </div>\n </div>\n </div>\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-full\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-add govuk-visually-hidden\" data-module=\"govuk-button\">\n Add another (<span class=\"dm-list__item-add-counter\">0</span> remaining)\n</button>\n </div>\n </div>\n\n</fieldset>\n</div>\n\n</div>\n\n <div\n class=\"question js-hidden dm-question__related-information\" aria-hidden=\"false\"\n id=\"exampleText2\"\nhidden>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-exampleText2\">\n Here is the second service question text\n </label>\n <input class=\"govuk-input\" id=\"input-exampleText2\" name=\"exampleText2\" type=\"text\">\n</div>\n\n\n</div>\n\n\n</fieldset>\n\n</div>"
},
{
"name": "follow up question with boolean",
"options": {
"type": "multiquestion",
"question": {
"id": "multiquestion",
"questions": [
{
"type": "boolean",
"id": "example",
"question": "Here is the service question",
"followup": {
"exampleText": [
true
],
"exampleTextbox": [
true
],
"exampleList": [
false
]
}
},
{
"type": "text",
"id": "exampleText",
"question": "Here is the service question text",
"hidden": true
},
{
"type": "textbox_large",
"id": "exampleTextbox",
"question": "Here is the service question",
"max_length_in_words": 500,
"hidden": true
},
{
"type": "list",
"id": "exampleList",
"question": "Here is the service question",
"hidden": true
}
]
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<div\n class=\"question \"\n id=\"multiquestion\"\n>\n \n<fieldset class=\"govuk-fieldset\">\n\n <div\n class=\"question \"\n id=\"example\"\ndata-module=\"dm-question\">\n \n\n\n\n\n\n<div class=\"govuk-form-group\">\n <fieldset class=\"govuk-fieldset\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the service question\n </legend>\n <div class=\"govuk-radios govuk-radios--inline\" data-module=\"govuk-radios\">\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-example\" name=\"example\" type=\"radio\" value=\"true\" data-target=\"exampleText exampleTextbox\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-example\">\n Yes\n </label>\n </div>\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-example-2\" name=\"example\" type=\"radio\" value=\"false\" data-target=\"exampleList\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-example-2\">\n No\n </label>\n </div>\n </div>\n </fieldset>\n</div>\n\n\n</div>\n\n <div\n class=\"question js-hidden dm-question__related-information\" aria-hidden=\"false\"\n id=\"exampleText\"\nhidden>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-exampleText\">\n Here is the service question text\n </label>\n <input class=\"govuk-input\" id=\"input-exampleText\" name=\"exampleText\" type=\"text\">\n</div>\n\n\n</div>\n\n <div\n class=\"question js-hidden dm-question__related-information\" aria-hidden=\"false\"\n id=\"exampleTextbox\"\nhidden>\n \n\n\n<div class=\"govuk-form-group govuk-character-count\" data-module=\"govuk-character-count\" data-maxwords=\"500\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-exampleTextbox\">\n Here is the service question\n </label>\n <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"input-exampleTextbox\" name=\"exampleTextbox\" rows=\"5\" aria-describedby=\"input-exampleTextbox-info\"></textarea>\n <div id=\"input-exampleTextbox-info\" class=\"govuk-hint govuk-character-count__message\">\n You can enter up to 500 words\n </div>\n</div>\n\n\n</div>\n\n <div\n class=\"question js-hidden dm-question__related-information\" aria-hidden=\"false\"\n id=\"exampleList\"\nhidden>\n \n\n\n<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset dm-list\" data-module=\"dm-question-list\" data-max-number-of-items=\"10\" data-number-of-items-shown-as-default=\"2\" aria-describedby=\"\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the service question\n </legend>\n\n\n <div class=\"dm-list__items\">\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-0\">\n Entry number <span class=\"dm-list__item-label-counter\">1</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">1.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-0\" name=\"exampleList\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">1</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-1\">\n Entry number <span class=\"dm-list__item-label-counter\">2</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">2.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-1\" name=\"exampleList\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">2</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-2\">\n Entry number <span class=\"dm-list__item-label-counter\">3</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">3.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-2\" name=\"exampleList\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">3</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-3\">\n Entry number <span class=\"dm-list__item-label-counter\">4</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">4.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-3\" name=\"exampleList\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">4</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-4\">\n Entry number <span class=\"dm-list__item-label-counter\">5</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">5.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-4\" name=\"exampleList\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">5</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-5\">\n Entry number <span class=\"dm-list__item-label-counter\">6</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">6.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-5\" name=\"exampleList\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">6</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-6\">\n Entry number <span class=\"dm-list__item-label-counter\">7</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">7.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-6\" name=\"exampleList\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">7</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-7\">\n Entry number <span class=\"dm-list__item-label-counter\">8</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">8.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-7\" name=\"exampleList\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">8</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-8\">\n Entry number <span class=\"dm-list__item-label-counter\">9</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">9.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-8\" name=\"exampleList\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">9</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-9\">\n Entry number <span class=\"dm-list__item-label-counter\">10</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">10.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-9\" name=\"exampleList\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">10</span></span>\n</button>\n </div>\n </div>\n </div>\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-full\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-add govuk-visually-hidden\" data-module=\"govuk-button\">\n Add another (<span class=\"dm-list__item-add-counter\">0</span> remaining)\n</button>\n </div>\n </div>\n\n</fieldset>\n</div>\n\n</div>\n\n\n</fieldset>\n\n</div>"
},
{
"name": "follow up question with boolean with list_multi_question_index",
"options": {
"type": "multiquestion",
"list_multi_question_index": 0,
"question": {
"id": "multiquestion-0",
"questions": [
{
"type": "boolean",
"id": "example-0",
"question": "Here is the service question",
"followup": {
"exampleText": [
true
],
"exampleTextbox": [
true
],
"exampleList": [
false
]
}
},
{
"type": "text",
"id": "exampleText-0",
"question": "Here is the service question text",
"hidden": true
},
{
"type": "textbox_large",
"id": "exampleTextbox-0",
"question": "Here is the service question",
"max_length_in_words": 500,
"hidden": true
},
{
"type": "list",
"id": "exampleList-0",
"question": "Here is the service question",
"hidden": true
}
]
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<div\n class=\"question \"\n id=\"multiquestion-0\"\n>\n \n<fieldset class=\"govuk-fieldset\">\n\n <div\n class=\"question \"\n id=\"example-0\"\ndata-module=\"dm-question\">\n \n\n\n\n\n\n<div class=\"govuk-form-group\">\n <fieldset class=\"govuk-fieldset\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the service question\n </legend>\n <div class=\"govuk-radios govuk-radios--inline\" data-module=\"govuk-radios\">\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-example-0\" name=\"example-0\" type=\"radio\" value=\"true\" data-target=\"exampleText-0 exampleTextbox-0\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-example-0\">\n Yes\n </label>\n </div>\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-example-0-2\" name=\"example-0\" type=\"radio\" value=\"false\" data-target=\"exampleList-0\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-example-0-2\">\n No\n </label>\n </div>\n </div>\n </fieldset>\n</div>\n\n\n</div>\n\n <div\n class=\"question js-hidden dm-question__related-information\" aria-hidden=\"false\"\n id=\"exampleText-0\"\nhidden>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-exampleText-0\">\n Here is the service question text\n </label>\n <input class=\"govuk-input\" id=\"input-exampleText-0\" name=\"exampleText-0\" type=\"text\">\n</div>\n\n\n</div>\n\n <div\n class=\"question js-hidden dm-question__related-information\" aria-hidden=\"false\"\n id=\"exampleTextbox-0\"\nhidden>\n \n\n\n<div class=\"govuk-form-group govuk-character-count\" data-module=\"govuk-character-count\" data-maxwords=\"500\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-exampleTextbox-0\">\n Here is the service question\n </label>\n <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"input-exampleTextbox-0\" name=\"exampleTextbox-0\" rows=\"5\" aria-describedby=\"input-exampleTextbox-0-info\"></textarea>\n <div id=\"input-exampleTextbox-0-info\" class=\"govuk-hint govuk-character-count__message\">\n You can enter up to 500 words\n </div>\n</div>\n\n\n</div>\n\n <div\n class=\"question js-hidden dm-question__related-information\" aria-hidden=\"false\"\n id=\"exampleList-0\"\nhidden>\n \n\n\n<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset dm-list\" data-module=\"dm-question-list\" data-max-number-of-items=\"10\" data-number-of-items-shown-as-default=\"2\" aria-describedby=\"\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the service question\n </legend>\n\n\n <div class=\"dm-list__items\">\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-0-0\">\n Entry number <span class=\"dm-list__item-label-counter\">1</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">1.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-0-0\" name=\"exampleList-0\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">1</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-0-1\">\n Entry number <span class=\"dm-list__item-label-counter\">2</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">2.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-0-1\" name=\"exampleList-0\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">2</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-0-2\">\n Entry number <span class=\"dm-list__item-label-counter\">3</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">3.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-0-2\" name=\"exampleList-0\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">3</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-0-3\">\n Entry number <span class=\"dm-list__item-label-counter\">4</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">4.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-0-3\" name=\"exampleList-0\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">4</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-0-4\">\n Entry number <span class=\"dm-list__item-label-counter\">5</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">5.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-0-4\" name=\"exampleList-0\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">5</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-0-5\">\n Entry number <span class=\"dm-list__item-label-counter\">6</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">6.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-0-5\" name=\"exampleList-0\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">6</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-0-6\">\n Entry number <span class=\"dm-list__item-label-counter\">7</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">7.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-0-6\" name=\"exampleList-0\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">7</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-0-7\">\n Entry number <span class=\"dm-list__item-label-counter\">8</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">8.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-0-7\" name=\"exampleList-0\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">8</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-0-8\">\n Entry number <span class=\"dm-list__item-label-counter\">9</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">9.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-0-8\" name=\"exampleList-0\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">9</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-0-9\">\n Entry number <span class=\"dm-list__item-label-counter\">10</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">10.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-0-9\" name=\"exampleList-0\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">10</span></span>\n</button>\n </div>\n </div>\n </div>\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-full\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-add govuk-visually-hidden\" data-module=\"govuk-button\">\n Add another (<span class=\"dm-list__item-add-counter\">0</span> remaining)\n</button>\n </div>\n </div>\n\n</fieldset>\n</div>\n\n</div>\n\n\n</fieldset>\n\n</div>"
},
{
"name": "follow up question with boolean and data",
"options": {
"type": "multiquestion",
"question": {
"id": "multiquestion",
"questions": [
{
"type": "boolean",
"id": "example",
"question": "Here is the service question",
"followup": {
"exampleText": [
true
],
"exampleTextbox": [
true
],
"exampleList": [
false
]
}
},
{
"type": "text",
"id": "exampleText",
"question": "Here is the service question text",
"hidden": true
},
{
"type": "textbox_large",
"id": "exampleTextbox",
"question": "Here is the service question",
"max_length_in_words": 500,
"hidden": true
},
{
"type": "list",
"id": "exampleList",
"question": "Here is the service question",
"hidden": true
}
]
},
"data": {
"example": false
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<div\n class=\"question \"\n id=\"multiquestion\"\n>\n \n<fieldset class=\"govuk-fieldset\">\n\n <div\n class=\"question \"\n id=\"example\"\ndata-module=\"dm-question\">\n \n\n\n\n\n\n<div class=\"govuk-form-group\">\n <fieldset class=\"govuk-fieldset\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the service question\n </legend>\n <div class=\"govuk-radios govuk-radios--inline\" data-module=\"govuk-radios\">\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-example\" name=\"example\" type=\"radio\" value=\"true\" data-target=\"exampleText exampleTextbox\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-example\">\n Yes\n </label>\n </div>\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-example-2\" name=\"example\" type=\"radio\" value=\"false\" checked data-target=\"exampleList\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-example-2\">\n No\n </label>\n </div>\n </div>\n </fieldset>\n</div>\n\n\n</div>\n\n <div\n class=\"question js-hidden dm-question__related-information\" aria-hidden=\"false\"\n id=\"exampleText\"\nhidden>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-exampleText\">\n Here is the service question text\n </label>\n <input class=\"govuk-input\" id=\"input-exampleText\" name=\"exampleText\" type=\"text\">\n</div>\n\n\n</div>\n\n <div\n class=\"question js-hidden dm-question__related-information\" aria-hidden=\"false\"\n id=\"exampleTextbox\"\nhidden>\n \n\n\n<div class=\"govuk-form-group govuk-character-count\" data-module=\"govuk-character-count\" data-maxwords=\"500\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-exampleTextbox\">\n Here is the service question\n </label>\n <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"input-exampleTextbox\" name=\"exampleTextbox\" rows=\"5\" aria-describedby=\"input-exampleTextbox-info\"></textarea>\n <div id=\"input-exampleTextbox-info\" class=\"govuk-hint govuk-character-count__message\">\n You can enter up to 500 words\n </div>\n</div>\n\n\n</div>\n\n <div\n class=\"question js-hidden dm-question__related-information\" aria-hidden=\"false\"\n id=\"exampleList\"\nhidden>\n \n\n\n<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset dm-list\" data-module=\"dm-question-list\" data-max-number-of-items=\"10\" data-number-of-items-shown-as-default=\"2\" aria-describedby=\"\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the service question\n </legend>\n\n\n <div class=\"dm-list__items\">\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-0\">\n Entry number <span class=\"dm-list__item-label-counter\">1</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">1.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-0\" name=\"exampleList\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">1</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-1\">\n Entry number <span class=\"dm-list__item-label-counter\">2</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">2.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-1\" name=\"exampleList\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">2</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-2\">\n Entry number <span class=\"dm-list__item-label-counter\">3</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">3.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-2\" name=\"exampleList\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">3</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-3\">\n Entry number <span class=\"dm-list__item-label-counter\">4</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">4.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-3\" name=\"exampleList\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">4</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-4\">\n Entry number <span class=\"dm-list__item-label-counter\">5</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">5.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-4\" name=\"exampleList\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">5</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-5\">\n Entry number <span class=\"dm-list__item-label-counter\">6</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">6.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-5\" name=\"exampleList\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">6</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-6\">\n Entry number <span class=\"dm-list__item-label-counter\">7</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">7.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-6\" name=\"exampleList\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">7</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-7\">\n Entry number <span class=\"dm-list__item-label-counter\">8</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">8.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-7\" name=\"exampleList\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">8</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-8\">\n Entry number <span class=\"dm-list__item-label-counter\">9</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">9.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-8\" name=\"exampleList\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">9</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-9\">\n Entry number <span class=\"dm-list__item-label-counter\">10</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">10.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-9\" name=\"exampleList\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">10</span></span>\n</button>\n </div>\n </div>\n </div>\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-full\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-add govuk-visually-hidden\" data-module=\"govuk-button\">\n Add another (<span class=\"dm-list__item-add-counter\">0</span> remaining)\n</button>\n </div>\n </div>\n\n</fieldset>\n</div>\n\n</div>\n\n\n</fieldset>\n\n</div>"
},
{
"name": "follow up question with sub-question followups",
"options": {
"type": "multiquestion",
"question": {
"id": "multiquestion",
"questions": [
{
"type": "radios",
"id": "example",
"question": "Here is the service question",
"options": [
{
"label": "Option 1",
"value": "option-1"
},
{
"label": "Option 2",
"value": "option-2"
},
{
"label": "Option 3",
"value": "option-3"
}
],
"followup": {
"exampleText": [
"option-1"
],
"exampleTextbox": [
"option-2"
],
"exampleList": [
"option-2"
],
"exampleRadios": [
"option-3"
]
}
},
{
"type": "text",
"id": "exampleText",
"question": "Here is the service question text",
"hidden": true
},
{
"type": "textbox_large",
"id": "exampleTextbox",
"question": "Here is the service question",
"max_length_in_words": 500,
"hidden": true
},
{
"type": "list",
"id": "exampleList",
"question": "Here is the service question",
"hidden": true
},
{
"type": "radios",
"id": "exampleRadios",
"question": "Here is the service question",
"options": [
{
"label": "Option 1",
"value": "option-1"
},
{
"label": "Option 2",
"value": "option-2"
},
{
"label": "Option 3",
"value": "option-3"
}
],
"hidden": true,
"followup": {
"exampleText2": [
"option-1",
"option-3"
]
}
},
{
"type": "text",
"id": "exampleText2",
"question": "Here is the second service question text",
"hidden": true
}
]
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<div\n class=\"question \"\n id=\"multiquestion\"\n>\n \n<fieldset class=\"govuk-fieldset\">\n\n <div\n class=\"question \"\n id=\"example\"\ndata-module=\"dm-question\">\n \n\n\n\n\n\n<div class=\"govuk-form-group\">\n <fieldset class=\"govuk-fieldset\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the service question\n </legend>\n <div class=\"govuk-radios\" data-module=\"govuk-radios\">\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-example\" name=\"example\" type=\"radio\" value=\"option-1\" data-target=\"exampleText\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-example\">\n Option 1\n </label>\n </div>\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-example-2\" name=\"example\" type=\"radio\" value=\"option-2\" data-target=\"exampleTextbox exampleList\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-example-2\">\n Option 2\n </label>\n </div>\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-example-3\" name=\"example\" type=\"radio\" value=\"option-3\" data-target=\"exampleRadios\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-example-3\">\n Option 3\n </label>\n </div>\n </div>\n </fieldset>\n</div>\n\n\n</div>\n\n <div\n class=\"question js-hidden dm-question__related-information\" aria-hidden=\"false\"\n id=\"exampleText\"\nhidden>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-exampleText\">\n Here is the service question text\n </label>\n <input class=\"govuk-input\" id=\"input-exampleText\" name=\"exampleText\" type=\"text\">\n</div>\n\n\n</div>\n\n <div\n class=\"question js-hidden dm-question__related-information\" aria-hidden=\"false\"\n id=\"exampleTextbox\"\nhidden>\n \n\n\n<div class=\"govuk-form-group govuk-character-count\" data-module=\"govuk-character-count\" data-maxwords=\"500\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-exampleTextbox\">\n Here is the service question\n </label>\n <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"input-exampleTextbox\" name=\"exampleTextbox\" rows=\"5\" aria-describedby=\"input-exampleTextbox-info\"></textarea>\n <div id=\"input-exampleTextbox-info\" class=\"govuk-hint govuk-character-count__message\">\n You can enter up to 500 words\n </div>\n</div>\n\n\n</div>\n\n <div\n class=\"question js-hidden dm-question__related-information\" aria-hidden=\"false\"\n id=\"exampleList\"\nhidden>\n \n\n\n<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset dm-list\" data-module=\"dm-question-list\" data-max-number-of-items=\"10\" data-number-of-items-shown-as-default=\"2\" aria-describedby=\"\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the service question\n </legend>\n\n\n <div class=\"dm-list__items\">\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-0\">\n Entry number <span class=\"dm-list__item-label-counter\">1</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">1.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-0\" name=\"exampleList\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">1</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-1\">\n Entry number <span class=\"dm-list__item-label-counter\">2</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">2.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-1\" name=\"exampleList\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">2</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-2\">\n Entry number <span class=\"dm-list__item-label-counter\">3</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">3.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-2\" name=\"exampleList\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">3</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-3\">\n Entry number <span class=\"dm-list__item-label-counter\">4</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">4.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-3\" name=\"exampleList\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">4</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-4\">\n Entry number <span class=\"dm-list__item-label-counter\">5</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">5.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-4\" name=\"exampleList\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">5</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-5\">\n Entry number <span class=\"dm-list__item-label-counter\">6</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">6.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-5\" name=\"exampleList\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">6</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-6\">\n Entry number <span class=\"dm-list__item-label-counter\">7</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">7.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-6\" name=\"exampleList\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">7</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-7\">\n Entry number <span class=\"dm-list__item-label-counter\">8</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">8.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-7\" name=\"exampleList\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">8</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-8\">\n Entry number <span class=\"dm-list__item-label-counter\">9</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">9.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-8\" name=\"exampleList\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">9</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-9\">\n Entry number <span class=\"dm-list__item-label-counter\">10</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">10.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-9\" name=\"exampleList\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">10</span></span>\n</button>\n </div>\n </div>\n </div>\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-full\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-add govuk-visually-hidden\" data-module=\"govuk-button\">\n Add another (<span class=\"dm-list__item-add-counter\">0</span> remaining)\n</button>\n </div>\n </div>\n\n</fieldset>\n</div>\n\n</div>\n\n <div\n class=\"question js-hidden dm-question__related-information\" aria-hidden=\"false\"\n id=\"exampleRadios\"\ndata-module=\"dm-question\"hidden>\n \n\n\n\n\n\n<div class=\"govuk-form-group\">\n <fieldset class=\"govuk-fieldset\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the service question\n </legend>\n <div class=\"govuk-radios\" data-module=\"govuk-radios\">\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-exampleRadios\" name=\"exampleRadios\" type=\"radio\" value=\"option-1\" data-target=\"exampleText2\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-exampleRadios\">\n Option 1\n </label>\n </div>\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-exampleRadios-2\" name=\"exampleRadios\" type=\"radio\" value=\"option-2\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-exampleRadios-2\">\n Option 2\n </label>\n </div>\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-exampleRadios-3\" name=\"exampleRadios\" type=\"radio\" value=\"option-3\" data-target=\"exampleText2\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-exampleRadios-3\">\n Option 3\n </label>\n </div>\n </div>\n </fieldset>\n</div>\n\n\n</div>\n\n <div\n class=\"question js-hidden dm-question__related-information\" aria-hidden=\"false\"\n id=\"exampleText2\"\nhidden>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-exampleText2\">\n Here is the second service question text\n </label>\n <input class=\"govuk-input\" id=\"input-exampleText2\" name=\"exampleText2\" type=\"text\">\n</div>\n\n\n</div>\n\n\n</fieldset>\n\n</div>"
},
{
"name": "follow up question with sub-question followups with data",
"options": {
"type": "multiquestion",
"question": {
"id": "multiquestion",
"questions": [
{
"type": "radios",
"id": "example",
"question": "Here is the service question",
"options": [
{
"label": "Option 1",
"value": "option-1"
},
{
"label": "Option 2",
"value": "option-2"
},
{
"label": "Option 3",
"value": "option-3"
}
],
"followup": {
"exampleText": [
"option-1"
],
"exampleTextbox": [
"option-2"
],
"exampleList": [
"option-2"
],
"exampleRadios": [
"option-3"
]
}
},
{
"type": "text",
"id": "exampleText",
"question": "Here is the service question text",
"hidden": true
},
{
"type": "textbox_large",
"id": "exampleTextbox",
"question": "Here is the service question",
"max_length_in_words": 500,
"hidden": true
},
{
"type": "list",
"id": "exampleList",
"question": "Here is the service question",
"hidden": true
},
{
"type": "radios",
"id": "exampleRadios",
"question": "Here is the service question",
"options": [
{
"label": "Option 1",
"value": "option-1"
},
{
"label": "Option 2",
"value": "option-2"
},
{
"label": "Option 3",
"value": "option-3"
}
],
"hidden": true,
"followup": {
"exampleText2": [
"option-1",
"option-3"
]
}
},
{
"type": "text",
"id": "exampleText2",
"question": "Here is the second service question text",
"hidden": true
}
]
},
"data": {
"example": "option-3",
"exampleRadios": "option-2"
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<div\n class=\"question \"\n id=\"multiquestion\"\n>\n \n<fieldset class=\"govuk-fieldset\">\n\n <div\n class=\"question \"\n id=\"example\"\ndata-module=\"dm-question\">\n \n\n\n\n\n\n<div class=\"govuk-form-group\">\n <fieldset class=\"govuk-fieldset\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the service question\n </legend>\n <div class=\"govuk-radios\" data-module=\"govuk-radios\">\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-example\" name=\"example\" type=\"radio\" value=\"option-1\" data-target=\"exampleText\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-example\">\n Option 1\n </label>\n </div>\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-example-2\" name=\"example\" type=\"radio\" value=\"option-2\" data-target=\"exampleTextbox exampleList\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-example-2\">\n Option 2\n </label>\n </div>\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-example-3\" name=\"example\" type=\"radio\" value=\"option-3\" checked data-target=\"exampleRadios\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-example-3\">\n Option 3\n </label>\n </div>\n </div>\n </fieldset>\n</div>\n\n\n</div>\n\n <div\n class=\"question js-hidden dm-question__related-information\" aria-hidden=\"false\"\n id=\"exampleText\"\nhidden>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-exampleText\">\n Here is the service question text\n </label>\n <input class=\"govuk-input\" id=\"input-exampleText\" name=\"exampleText\" type=\"text\">\n</div>\n\n\n</div>\n\n <div\n class=\"question js-hidden dm-question__related-information\" aria-hidden=\"false\"\n id=\"exampleTextbox\"\nhidden>\n \n\n\n<div class=\"govuk-form-group govuk-character-count\" data-module=\"govuk-character-count\" data-maxwords=\"500\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-exampleTextbox\">\n Here is the service question\n </label>\n <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"input-exampleTextbox\" name=\"exampleTextbox\" rows=\"5\" aria-describedby=\"input-exampleTextbox-info\"></textarea>\n <div id=\"input-exampleTextbox-info\" class=\"govuk-hint govuk-character-count__message\">\n You can enter up to 500 words\n </div>\n</div>\n\n\n</div>\n\n <div\n class=\"question js-hidden dm-question__related-information\" aria-hidden=\"false\"\n id=\"exampleList\"\nhidden>\n \n\n\n<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset dm-list\" data-module=\"dm-question-list\" data-max-number-of-items=\"10\" data-number-of-items-shown-as-default=\"2\" aria-describedby=\"\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the service question\n </legend>\n\n\n <div class=\"dm-list__items\">\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-0\">\n Entry number <span class=\"dm-list__item-label-counter\">1</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">1.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-0\" name=\"exampleList\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">1</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-1\">\n Entry number <span class=\"dm-list__item-label-counter\">2</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">2.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-1\" name=\"exampleList\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">2</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-2\">\n Entry number <span class=\"dm-list__item-label-counter\">3</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">3.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-2\" name=\"exampleList\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">3</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-3\">\n Entry number <span class=\"dm-list__item-label-counter\">4</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">4.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-3\" name=\"exampleList\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">4</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-4\">\n Entry number <span class=\"dm-list__item-label-counter\">5</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">5.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-4\" name=\"exampleList\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">5</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-5\">\n Entry number <span class=\"dm-list__item-label-counter\">6</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">6.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-5\" name=\"exampleList\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">6</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-6\">\n Entry number <span class=\"dm-list__item-label-counter\">7</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">7.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-6\" name=\"exampleList\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">7</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-7\">\n Entry number <span class=\"dm-list__item-label-counter\">8</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">8.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-7\" name=\"exampleList\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">8</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-8\">\n Entry number <span class=\"dm-list__item-label-counter\">9</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">9.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-8\" name=\"exampleList\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">9</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-9\">\n Entry number <span class=\"dm-list__item-label-counter\">10</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">10.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-9\" name=\"exampleList\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">10</span></span>\n</button>\n </div>\n </div>\n </div>\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-full\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-add govuk-visually-hidden\" data-module=\"govuk-button\">\n Add another (<span class=\"dm-list__item-add-counter\">0</span> remaining)\n</button>\n </div>\n </div>\n\n</fieldset>\n</div>\n\n</div>\n\n <div\n class=\"question js-hidden dm-question__related-information\" aria-hidden=\"false\"\n id=\"exampleRadios\"\ndata-module=\"dm-question\"hidden>\n \n\n\n\n\n\n<div class=\"govuk-form-group\">\n <fieldset class=\"govuk-fieldset\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the service question\n </legend>\n <div class=\"govuk-radios\" data-module=\"govuk-radios\">\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-exampleRadios\" name=\"exampleRadios\" type=\"radio\" value=\"option-1\" data-target=\"exampleText2\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-exampleRadios\">\n Option 1\n </label>\n </div>\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-exampleRadios-2\" name=\"exampleRadios\" type=\"radio\" value=\"option-2\" checked>\n <label class=\"govuk-label govuk-radios__label\" for=\"input-exampleRadios-2\">\n Option 2\n </label>\n </div>\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-exampleRadios-3\" name=\"exampleRadios\" type=\"radio\" value=\"option-3\" data-target=\"exampleText2\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-exampleRadios-3\">\n Option 3\n </label>\n </div>\n </div>\n </fieldset>\n</div>\n\n\n</div>\n\n <div\n class=\"question js-hidden dm-question__related-information\" aria-hidden=\"false\"\n id=\"exampleText2\"\nhidden>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-exampleText2\">\n Here is the second service question text\n </label>\n <input class=\"govuk-input\" id=\"input-exampleText2\" name=\"exampleText2\" type=\"text\">\n</div>\n\n\n</div>\n\n\n</fieldset>\n\n</div>"
},
{
"name": "follow up question with multiple followups",
"options": {
"type": "multiquestion",
"question": {
"id": "multiquestion",
"questions": [
{
"type": "boolean",
"id": "example",
"question": "Here is the service question 1",
"followup": {
"exampleText": [
true
],
"exampleBoolean": [
true
],
"exampleList": [
false
]
}
},
{
"type": "text",
"id": "exampleText",
"question": "Here is the service question text (1 Yes)",
"hidden": true
},
{
"type": "boolean",
"id": "exampleBoolean",
"question": "Here is the service question (1 Yes)",
"hidden": true,
"followup": {
"exampleText2": [
true
]
}
},
{
"type": "text",
"id": "exampleText2",
"question": "Here is the service question text (1 Yes Yes)",
"hidden": true
},
{
"type": "list",
"id": "exampleList",
"question": "Here is the service question (1 No)",
"hidden": true
},
{
"type": "boolean",
"id": "example2",
"question": "Here is the service question 2",
"followup": {
"example2Text": [
true
],
"example2Textbox": [
true
],
"example2List": [
false
]
}
},
{
"type": "text",
"id": "example2Text",
"question": "Here is the service question text (2 Yes)",
"hidden": true
},
{
"type": "textbox_large",
"id": "example2Textbox",
"question": "Here is the service question (2 Yes)",
"max_length_in_words": 500,
"hidden": true
},
{
"type": "list",
"id": "example2List",
"question": "Here is the service question (2 No)",
"hidden": true
}
]
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<div\n class=\"question \"\n id=\"multiquestion\"\n>\n \n<fieldset class=\"govuk-fieldset\">\n\n <div\n class=\"question \"\n id=\"example\"\ndata-module=\"dm-question\">\n \n\n\n\n\n\n<div class=\"govuk-form-group\">\n <fieldset class=\"govuk-fieldset\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the service question 1\n </legend>\n <div class=\"govuk-radios govuk-radios--inline\" data-module=\"govuk-radios\">\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-example\" name=\"example\" type=\"radio\" value=\"true\" data-target=\"exampleText exampleBoolean\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-example\">\n Yes\n </label>\n </div>\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-example-2\" name=\"example\" type=\"radio\" value=\"false\" data-target=\"exampleList\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-example-2\">\n No\n </label>\n </div>\n </div>\n </fieldset>\n</div>\n\n\n</div>\n\n <div\n class=\"question js-hidden dm-question__related-information\" aria-hidden=\"false\"\n id=\"exampleText\"\nhidden>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-exampleText\">\n Here is the service question text (1 Yes)\n </label>\n <input class=\"govuk-input\" id=\"input-exampleText\" name=\"exampleText\" type=\"text\">\n</div>\n\n\n</div>\n\n <div\n class=\"question js-hidden dm-question__related-information\" aria-hidden=\"false\"\n id=\"exampleBoolean\"\ndata-module=\"dm-question\"hidden>\n \n\n\n\n\n\n<div class=\"govuk-form-group\">\n <fieldset class=\"govuk-fieldset\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the service question (1 Yes)\n </legend>\n <div class=\"govuk-radios govuk-radios--inline\" data-module=\"govuk-radios\">\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-exampleBoolean\" name=\"exampleBoolean\" type=\"radio\" value=\"true\" data-target=\"exampleText2\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-exampleBoolean\">\n Yes\n </label>\n </div>\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-exampleBoolean-2\" name=\"exampleBoolean\" type=\"radio\" value=\"false\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-exampleBoolean-2\">\n No\n </label>\n </div>\n </div>\n </fieldset>\n</div>\n\n\n</div>\n\n <div\n class=\"question js-hidden dm-question__related-information\" aria-hidden=\"false\"\n id=\"exampleText2\"\nhidden>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-exampleText2\">\n Here is the service question text (1 Yes Yes)\n </label>\n <input class=\"govuk-input\" id=\"input-exampleText2\" name=\"exampleText2\" type=\"text\">\n</div>\n\n\n</div>\n\n <div\n class=\"question js-hidden dm-question__related-information\" aria-hidden=\"false\"\n id=\"exampleList\"\nhidden>\n \n\n\n<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset dm-list\" data-module=\"dm-question-list\" data-max-number-of-items=\"10\" data-number-of-items-shown-as-default=\"2\" aria-describedby=\"\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the service question (1 No)\n </legend>\n\n\n <div class=\"dm-list__items\">\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-0\">\n Entry number <span class=\"dm-list__item-label-counter\">1</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">1.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-0\" name=\"exampleList\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">1</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-1\">\n Entry number <span class=\"dm-list__item-label-counter\">2</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">2.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-1\" name=\"exampleList\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">2</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-2\">\n Entry number <span class=\"dm-list__item-label-counter\">3</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">3.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-2\" name=\"exampleList\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">3</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-3\">\n Entry number <span class=\"dm-list__item-label-counter\">4</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">4.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-3\" name=\"exampleList\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">4</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-4\">\n Entry number <span class=\"dm-list__item-label-counter\">5</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">5.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-4\" name=\"exampleList\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">5</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-5\">\n Entry number <span class=\"dm-list__item-label-counter\">6</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">6.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-5\" name=\"exampleList\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">6</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-6\">\n Entry number <span class=\"dm-list__item-label-counter\">7</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">7.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-6\" name=\"exampleList\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">7</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-7\">\n Entry number <span class=\"dm-list__item-label-counter\">8</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">8.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-7\" name=\"exampleList\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">8</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-8\">\n Entry number <span class=\"dm-list__item-label-counter\">9</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">9.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-8\" name=\"exampleList\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">9</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-exampleList-9\">\n Entry number <span class=\"dm-list__item-label-counter\">10</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">10.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-exampleList-9\" name=\"exampleList\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">10</span></span>\n</button>\n </div>\n </div>\n </div>\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-full\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-add govuk-visually-hidden\" data-module=\"govuk-button\">\n Add another (<span class=\"dm-list__item-add-counter\">0</span> remaining)\n</button>\n </div>\n </div>\n\n</fieldset>\n</div>\n\n</div>\n\n <div\n class=\"question \"\n id=\"example2\"\ndata-module=\"dm-question\">\n \n\n\n\n\n\n<div class=\"govuk-form-group\">\n <fieldset class=\"govuk-fieldset\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the service question 2\n </legend>\n <div class=\"govuk-radios govuk-radios--inline\" data-module=\"govuk-radios\">\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-example2\" name=\"example2\" type=\"radio\" value=\"true\" data-target=\"example2Text example2Textbox\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-example2\">\n Yes\n </label>\n </div>\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-example2-2\" name=\"example2\" type=\"radio\" value=\"false\" data-target=\"example2List\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-example2-2\">\n No\n </label>\n </div>\n </div>\n </fieldset>\n</div>\n\n\n</div>\n\n <div\n class=\"question js-hidden dm-question__related-information\" aria-hidden=\"false\"\n id=\"example2Text\"\nhidden>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-example2Text\">\n Here is the service question text (2 Yes)\n </label>\n <input class=\"govuk-input\" id=\"input-example2Text\" name=\"example2Text\" type=\"text\">\n</div>\n\n\n</div>\n\n <div\n class=\"question js-hidden dm-question__related-information\" aria-hidden=\"false\"\n id=\"example2Textbox\"\nhidden>\n \n\n\n<div class=\"govuk-form-group govuk-character-count\" data-module=\"govuk-character-count\" data-maxwords=\"500\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-example2Textbox\">\n Here is the service question (2 Yes)\n </label>\n <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"input-example2Textbox\" name=\"example2Textbox\" rows=\"5\" aria-describedby=\"input-example2Textbox-info\"></textarea>\n <div id=\"input-example2Textbox-info\" class=\"govuk-hint govuk-character-count__message\">\n You can enter up to 500 words\n </div>\n</div>\n\n\n</div>\n\n <div\n class=\"question js-hidden dm-question__related-information\" aria-hidden=\"false\"\n id=\"example2List\"\nhidden>\n \n\n\n<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset dm-list\" data-module=\"dm-question-list\" data-max-number-of-items=\"10\" data-number-of-items-shown-as-default=\"2\" aria-describedby=\"\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the service question (2 No)\n </legend>\n\n\n <div class=\"dm-list__items\">\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-example2List-0\">\n Entry number <span class=\"dm-list__item-label-counter\">1</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">1.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-example2List-0\" name=\"example2List\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">1</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-example2List-1\">\n Entry number <span class=\"dm-list__item-label-counter\">2</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">2.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-example2List-1\" name=\"example2List\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">2</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-example2List-2\">\n Entry number <span class=\"dm-list__item-label-counter\">3</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">3.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-example2List-2\" name=\"example2List\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">3</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-example2List-3\">\n Entry number <span class=\"dm-list__item-label-counter\">4</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">4.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-example2List-3\" name=\"example2List\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">4</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-example2List-4\">\n Entry number <span class=\"dm-list__item-label-counter\">5</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">5.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-example2List-4\" name=\"example2List\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">5</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-example2List-5\">\n Entry number <span class=\"dm-list__item-label-counter\">6</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">6.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-example2List-5\" name=\"example2List\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">6</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-example2List-6\">\n Entry number <span class=\"dm-list__item-label-counter\">7</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">7.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-example2List-6\" name=\"example2List\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">7</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-example2List-7\">\n Entry number <span class=\"dm-list__item-label-counter\">8</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">8.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-example2List-7\" name=\"example2List\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">8</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-example2List-8\">\n Entry number <span class=\"dm-list__item-label-counter\">9</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">9.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-example2List-8\" name=\"example2List\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">9</span></span>\n</button>\n </div>\n </div>\n <div class=\"govuk-grid-row dm-list__item\">\n <div class=\"dm-list__item-input-column\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-visually-hidden\" for=\"input-example2List-9\">\n Entry number <span class=\"dm-list__item-label-counter\">10</span>\n </label>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">10.</div>\n <input class=\"govuk-input dm-list__item-input\" id=\"input-example2List-9\" name=\"example2List\" type=\"text\">\n </div>\n</div>\n\n </div>\n <div class=\"dm-list__item-remove-column\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list__item-remove-counter\">10</span></span>\n</button>\n </div>\n </div>\n </div>\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-full\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list__item-add govuk-visually-hidden\" data-module=\"govuk-button\">\n Add another (<span class=\"dm-list__item-add-counter\">0</span> remaining)\n</button>\n </div>\n </div>\n\n</fieldset>\n</div>\n\n</div>\n\n\n</fieldset>\n\n</div>"
},
{
"name": "follow up question with followups which have multiple triggers",
"options": {
"type": "multiquestion",
"question": {
"id": "multiquestion",
"questions": [
{
"type": "boolean",
"id": "exampleBoolean1",
"question": "Here is the service question 1",
"followup": {
"exampleBoolean5": [
true
]
}
},
{
"type": "boolean",
"id": "exampleBoolean2",
"question": "Here is the service question 2",
"followup": {
"exampleBoolean4": [
true
],
"exampleBoolean5": [
true
]
}
},
{
"type": "boolean",
"id": "exampleBoolean3",
"question": "Here is the service question 3",
"followup": {
"exampleText1": [
true
],
"exampleBoolean4": [
true
],
"exampleBoolean5": [
true
]
}
},
{
"type": "boolean",
"id": "exampleBoolean5",
"question": "Here is the service question text (1, 2 or 3 Yes)",
"hidden": true,
"followup": {
"exampleText2": [
true
]
}
},
{
"type": "boolean",
"id": "exampleBoolean4",
"question": "Here is the service question text (1 or 2 Yes)",
"hidden": true,
"followup": {
"exampleText2": [
true
]
}
},
{
"type": "text",
"id": "exampleText2",
"question": "Here is the service question text (1 Yes and 1-1 or 1-2 Yes)",
"hidden": true
},
{
"type": "text",
"id": "exampleText1",
"question": "Here is the service question text (1 Yes)",
"hidden": true
}
]
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<div\n class=\"question \"\n id=\"multiquestion\"\n>\n \n<fieldset class=\"govuk-fieldset\">\n\n <div\n class=\"question \"\n id=\"exampleBoolean1\"\ndata-module=\"dm-question\">\n \n\n\n\n\n\n<div class=\"govuk-form-group\">\n <fieldset class=\"govuk-fieldset\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the service question 1\n </legend>\n <div class=\"govuk-radios govuk-radios--inline\" data-module=\"govuk-radios\">\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-exampleBoolean1\" name=\"exampleBoolean1\" type=\"radio\" value=\"true\" data-target=\"exampleBoolean5\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-exampleBoolean1\">\n Yes\n </label>\n </div>\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-exampleBoolean1-2\" name=\"exampleBoolean1\" type=\"radio\" value=\"false\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-exampleBoolean1-2\">\n No\n </label>\n </div>\n </div>\n </fieldset>\n</div>\n\n\n</div>\n\n <div\n class=\"question \"\n id=\"exampleBoolean2\"\ndata-module=\"dm-question\">\n \n\n\n\n\n\n<div class=\"govuk-form-group\">\n <fieldset class=\"govuk-fieldset\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the service question 2\n </legend>\n <div class=\"govuk-radios govuk-radios--inline\" data-module=\"govuk-radios\">\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-exampleBoolean2\" name=\"exampleBoolean2\" type=\"radio\" value=\"true\" data-target=\"exampleBoolean4 exampleBoolean5\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-exampleBoolean2\">\n Yes\n </label>\n </div>\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-exampleBoolean2-2\" name=\"exampleBoolean2\" type=\"radio\" value=\"false\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-exampleBoolean2-2\">\n No\n </label>\n </div>\n </div>\n </fieldset>\n</div>\n\n\n</div>\n\n <div\n class=\"question \"\n id=\"exampleBoolean3\"\ndata-module=\"dm-question\">\n \n\n\n\n\n\n<div class=\"govuk-form-group\">\n <fieldset class=\"govuk-fieldset\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the service question 3\n </legend>\n <div class=\"govuk-radios govuk-radios--inline\" data-module=\"govuk-radios\">\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-exampleBoolean3\" name=\"exampleBoolean3\" type=\"radio\" value=\"true\" data-target=\"exampleText1 exampleBoolean4 exampleBoolean5\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-exampleBoolean3\">\n Yes\n </label>\n </div>\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-exampleBoolean3-2\" name=\"exampleBoolean3\" type=\"radio\" value=\"false\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-exampleBoolean3-2\">\n No\n </label>\n </div>\n </div>\n </fieldset>\n</div>\n\n\n</div>\n\n <div\n class=\"question js-hidden dm-question__related-information\" aria-hidden=\"false\"\n id=\"exampleBoolean5\"\ndata-module=\"dm-question\"hidden>\n \n\n\n\n\n\n<div class=\"govuk-form-group\">\n <fieldset class=\"govuk-fieldset\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the service question text (1, 2 or 3 Yes)\n </legend>\n <div class=\"govuk-radios govuk-radios--inline\" data-module=\"govuk-radios\">\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-exampleBoolean5\" name=\"exampleBoolean5\" type=\"radio\" value=\"true\" data-target=\"exampleText2\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-exampleBoolean5\">\n Yes\n </label>\n </div>\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-exampleBoolean5-2\" name=\"exampleBoolean5\" type=\"radio\" value=\"false\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-exampleBoolean5-2\">\n No\n </label>\n </div>\n </div>\n </fieldset>\n</div>\n\n\n</div>\n\n <div\n class=\"question js-hidden dm-question__related-information\" aria-hidden=\"false\"\n id=\"exampleBoolean4\"\ndata-module=\"dm-question\"hidden>\n \n\n\n\n\n\n<div class=\"govuk-form-group\">\n <fieldset class=\"govuk-fieldset\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the service question text (1 or 2 Yes)\n </legend>\n <div class=\"govuk-radios govuk-radios--inline\" data-module=\"govuk-radios\">\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-exampleBoolean4\" name=\"exampleBoolean4\" type=\"radio\" value=\"true\" data-target=\"exampleText2\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-exampleBoolean4\">\n Yes\n </label>\n </div>\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-exampleBoolean4-2\" name=\"exampleBoolean4\" type=\"radio\" value=\"false\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-exampleBoolean4-2\">\n No\n </label>\n </div>\n </div>\n </fieldset>\n</div>\n\n\n</div>\n\n <div\n class=\"question js-hidden dm-question__related-information\" aria-hidden=\"false\"\n id=\"exampleText2\"\nhidden>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-exampleText2\">\n Here is the service question text (1 Yes and 1-1 or 1-2 Yes)\n </label>\n <input class=\"govuk-input\" id=\"input-exampleText2\" name=\"exampleText2\" type=\"text\">\n</div>\n\n\n</div>\n\n <div\n class=\"question js-hidden dm-question__related-information\" aria-hidden=\"false\"\n id=\"exampleText1\"\nhidden>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-exampleText1\">\n Here is the service question text (1 Yes)\n </label>\n <input class=\"govuk-input\" id=\"input-exampleText1\" name=\"exampleText1\" type=\"text\">\n</div>\n\n\n</div>\n\n\n</fieldset>\n\n</div>"
}
]
}