digitalmarketplace-frontend
Version:
Digital Marketplace Frontend contains assets and components used in Digital Marketplace projects
1,196 lines • 161 kB
JSON
{
"component": "question-list-multiquestion-client-side",
"fixtures": [
{
"name": "default",
"options": {
"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": "listMultiquestion2",
"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"
}
]
},
{
"id": "listMultiquestion3",
"question": "I am question 4",
"questions": [
{
"type": "text",
"id": "listMultiquestionText30",
"question": "Here is the first question"
},
{
"type": "text",
"id": "listMultiquestionText31",
"question": "Here is the second question"
}
]
},
{
"id": "listMultiquestion4",
"question": "I am question 5",
"questions": [
{
"type": "text",
"id": "listMultiquestionText40",
"question": "Here is the first question"
},
{
"type": "text",
"id": "listMultiquestionText41",
"question": "Here is the second question"
}
]
}
]
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<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 <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 <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 <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 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 4\n </legend>\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=\"listMultiquestionText30\"\n>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-listMultiquestionText30\">\n Here is the first question\n </label>\n <input class=\"govuk-input\" id=\"input-listMultiquestionText30\" name=\"listMultiquestionText30\" 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=\"listMultiquestionText31\"\n>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-listMultiquestionText31\">\n Here is the second question\n </label>\n <input class=\"govuk-input\" id=\"input-listMultiquestionText31\" name=\"listMultiquestionText31\" 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 5\n </legend>\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=\"listMultiquestionText40\"\n>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-listMultiquestionText40\">\n Here is the first question\n </label>\n <input class=\"govuk-input\" id=\"input-listMultiquestionText40\" name=\"listMultiquestionText40\" 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=\"listMultiquestionText41\"\n>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-listMultiquestionText41\">\n Here is the second question\n </label>\n <input class=\"govuk-input\" id=\"input-listMultiquestionText41\" name=\"listMultiquestionText41\" 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>"
},
{
"name": "with question advice",
"options": {
"question": {
"id": "listMultiquestion",
"question": "Enter as many items as needed",
"question_advice": "Here is the question advice",
"number_of_items": 3,
"questions": [
{
"id": "listMultiquestion0",
"question": "I am question 1",
"question_advice": "Here is the additional question advice",
"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",
"question_advice": "Here is the additional question advice",
"questions": [
{
"type": "text",
"id": "listMultiquestionText10",
"question": "Here is the first question"
},
{
"type": "text",
"id": "listMultiquestionText11",
"question": "Here is the second question"
}
]
},
{
"id": "listMultiquestion2",
"question": "I am question 3",
"question_advice": "Here is the additional question advice",
"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 class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset\" data-module=\"dm-question-list-multiquestion-client-side\" data-max-number-of-items=\"3\" id=\"input-listMultiquestion\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Enter as many items as needed\n </legend>\n <div class=\"govuk-body\">\n Here is the question advice\n </div>\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 <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 <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 <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>"
},
{
"name": "with question advice as html",
"options": {
"question": {
"id": "listMultiquestion",
"question": "Enter as many items as needed",
"question_advice": "<p class=\"govuk-body-l\">Here is the question advice</p>\n",
"number_of_items": 3,
"questions": [
{
"id": "listMultiquestion0",
"question": "I am question 1",
"question_advice": "<p class=\"govuk-body-l\">Here is the additional question advice</p>\n",
"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",
"question_advice": "<p class=\"govuk-body-l\">Here is the additional question advice</p>\n",
"questions": [
{
"type": "text",
"id": "listMultiquestionText10",
"question": "Here is the first question"
},
{
"type": "text",
"id": "listMultiquestionText11",
"question": "Here is the second question"
}
]
},
{
"id": "listMultiquestion2",
"question": "I am question 3",
"question_advice": "<p class=\"govuk-body-l\">Here is the additional question advice</p>\n",
"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 class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset\" data-module=\"dm-question-list-multiquestion-client-side\" data-max-number-of-items=\"3\" id=\"input-listMultiquestion\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Enter as many items as needed\n </legend>\n <div class=\"govuk-body\">\n <p class=\"govuk-body-l\">Here is the question advice</p>\n\n </div>\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 <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 <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 <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>"
},
{
"name": "with data",
"options": {
"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": "listMultiquestion2",
"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"
}
]
},
{
"id": "listMultiquestion3",
"question": "I am question 4",
"questions": [
{
"type": "text",
"id": "listMultiquestionText30",
"question": "Here is the first question"
},
{
"type": "text",
"id": "listMultiquestionText31",
"question": "Here is the second question"
}
]
},
{
"id": "listMultiquestion4",
"question": "I am question 5",
"questions": [
{
"type": "text",
"id": "listMultiquestionText40",
"question": "Here is the first question"
},
{
"type": "text",
"id": "listMultiquestionText41",
"question": "Here is the second question"
}
]
}
]
},
"data": {
"listMultiquestionText00": "Text for 0 0",
"listMultiquestionText01": "Text for 0 1",
"listMultiquestionText10": "Text for 1 0",
"listMultiquestionText11": "Text for 1 1",
"listMultiquestionText20": "Text for 2 0",
"listMultiquestionText21": "Text for 2 1"
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<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 <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\" value=\"Text for 0 0\">\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\" value=\"Text for 0 1\">\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 <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\" value=\"Text for 1 0\">\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\" value=\"Text for 1 1\">\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 <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\" value=\"Text for 2 0\">\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\" value=\"Text for 2 1\">\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 4\n </legend>\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=\"listMultiquestionText30\"\n>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-listMultiquestionText30\">\n Here is the first question\n </label>\n <input class=\"govuk-input\" id=\"input-listMultiquestionText30\" name=\"listMultiquestionText30\" 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=\"listMultiquestionText31\"\n>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-listMultiquestionText31\">\n Here is the second question\n </label>\n <input class=\"govuk-input\" id=\"input-listMultiquestionText31\" name=\"listMultiquestionText31\" 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 5\n </legend>\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=\"listMultiquestionText40\"\n>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-listMultiquestionText40\">\n Here is the first question\n </label>\n <input class=\"govuk-input\" id=\"input-listMultiquestionText40\" name=\"listMultiquestionText40\" 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=\"listMultiquestionText41\"\n>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-listMultiquestionText41\">\n Here is the second question\n </label>\n <input class=\"govuk-input\" id=\"input-listMultiquestionText41\" name=\"listMultiquestionText41\" 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>"
},
{
"name": "with error message",
"options": {
"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": "listMultiquestion2",
"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"
}
]
},
{
"id": "listMultiquestion3",
"question": "I am question 4",
"questions": [
{
"type": "text",
"id": "listMultiquestionText30",
"question": "Here is the first question"
},
{
"type": "text",
"id": "listMultiquestionText31",
"question": "Here is the second question"
}
]
},
{
"id": "listMultiquestion4",
"question": "I am question 5",
"questions": [
{
"type": "text",
"id": "listMultiquestionText40",
"question": "Here is the first question"
},
{
"type": "text",
"id": "listMultiquestionText41",
"question": "Here is the second question"
}
]
}
]
},
"data": {
"listMultiquestionText00": "Text for 0 0",
"listMultiquestionText20": "Text for 2 0"
},
"errors": {
"listMultiquestion": {
"message": "Error for the question"
},
"listMultiquestionText01": {
"message": "Error for 0 1"
},
"listMultiquestionText10": {
"message": "Error for 1 0"
},
"listMultiquestionText11": {
"message": "Error for 1 1"
},
"listMultiquestionText21": {
"message": "Error for 2 1"
}
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\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 <p id=\"input-listMultiquestion-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error for the question\n </p>\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 <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\" value=\"Text for 0 0\">\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 govuk-form-group--error\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-listMultiquestionText01\">\n Here is the second question\n </label>\n <p id=\"input-listMultiquestionText01-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error for 0 1\n </p>\n <input class=\"govuk-input govuk-input--error\" id=\"input-listMultiquestionText01\" name=\"listMultiquestionText01\" type=\"text\" aria-describedby=\"input-listMultiquestionText01-error\">\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 <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 govuk-form-group--error\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-listMultiquestionText10\">\n Here is the first question\n </label>\n <p id=\"input-listMultiquestionText10-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error for 1 0\n </p>\n <input class=\"govuk-input govuk-input--error\" id=\"input-listMultiquestionText10\" name=\"listMultiquestionText10\" type=\"text\" aria-describedby=\"input-listMultiquestionText10-error\">\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 govuk-form-group--error\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-listMultiquestionText11\">\n Here is the second question\n </label>\n <p id=\"input-listMultiquestionText11-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error for 1 1\n </p>\n <input class=\"govuk-input govuk-input--error\" id=\"input-listMultiquestionText11\" name=\"listMultiquestionText11\" type=\"text\" aria-describedby=\"input-listMultiquestionText11-error\">\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 <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\" value=\"Text for 2 0\">\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 govuk-form-group--error\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-listMultiquestionText21\">\n Here is the second question\n </label>\n <p id=\"input-listMultiquestionText21-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error for 2 1\n </p>\n <input class=\"govuk-input govuk-input--error\" id=\"input-listMultiquestionText21\" name=\"listMultiquestionText21\" type=\"text\" aria-describedby=\"input-listMultiquestionText21-error\">\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 4\n </legend>\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=\"listMultiquestionText30\"\n>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-listMultiquestionText30\">\n Here is the first question\n </label>\n <input class=\"govuk-input\" id=\"input-listMultiquestionText30\" name=\"listMultiquestionText30\" 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=\"listMultiquestionText31\"\n>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-listMultiquestionText31\">\n Here is the second question\n </label>\n <input class=\"govuk-input\" id=\"input-listMultiquestionText31\" name=\"listMultiquestionText31\" 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 5\n </legend>\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=\"listMultiquestionText40\"\n>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-listMultiquestionText40\">\n Here is the first question\n </label>\n <input class=\"govuk-input\" id=\"input-listMultiquestionText40\" name=\"listMultiquestionText40\" 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=\"listMultiquestionText41\"\n>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-listMultiquestionText41\">\n Here is the second question\n </label>\n <input class=\"govuk-input\" id=\"input-listMultiquestionText41\" name=\"listMultiquestionText41\" 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>"
},
{
"name": "with custom widths full",
"options": {
"question": {
"id": "listMultiquestion",
"question": "Enter as many items as needed",
"number_of_items": 3,
"column_width": "full",
"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"
},
{
"type": "text",
"id": "listMultiquestionText02",
"question": "Here is the third question"
},
{
"type": "text",
"id": "listMultiquestionText03",
"question": "Here is the forth question"
},
{
"type": "text",
"id": "listMultiquestionText04",
"question": "Here is the fith 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"
},
{
"type": "text",
"id": "listMultiquestionText12",
"question": "Here is the third question"
},
{
"type": "text",
"id": "listMultiquestionText13",
"question": "Here is the forth question"
},
{
"type": "text",
"id": "listMultiquestionText14",
"question": "Here is the fith question"
}
]
},
{
"id": "listMultiquestion2",
"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"
},
{
"type": "text",
"id": "listMultiquestionText22",
"question": "Here is the third question"
},
{
"type": "text",
"id": "listMultiquestionText23",
"question": "Here is the forth question"
},
{
"type": "text",
"id": "listMultiquestionText24",
"question": "Here is the fith question"
}
]
}
]
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset\" data-module=\"dm-question-list-multiquestion-client-side\" data-max-number-of-items=\"3\" 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 <div class=\"govuk-grid-row govuk-!-margin-bottom-2\">\n <div class=\"dm-multiquestion__item-input-column govuk-grid-column-full\">\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>\n <div class=\"govuk-grid-row govuk-!-margin-bottom-2\">\n <div class=\"dm-multiquestion__item-input-column govuk-grid-column-full\">\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 <div class=\"govuk-grid-row govuk-!-margin-bottom-2\">\n <div class=\"dm-multiquestion__item-input-column govuk-grid-column-full\">\n <div\n class=\"question \"\n id=\"listMultiquestionText02\"\n>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-listMultiquestionText02\">\n Here is the third question\n </label>\n <input class=\"govuk-input\" id=\"input-listMultiquestionText02\" name=\"listMultiquestionText02\" type=\"text\">\n</div>\n\n\n</div>\n\n </div>\n </div>\n <div class=\"govuk-grid-row govuk-!-margin-bottom-2\">\n <div class=\"dm-multiquestion__item-input-column govuk-grid-column-full\">\n <div\n class=\"question \"\n id=\"listMultiquestionText03\"\n>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-listMultiquestionText03\">\n Here is the forth question\n </label>\n <input class=\"govuk-input\" id=\"input-listMultiquestionText03\" name=\"listMultiquestionText03\" type=\"text\">\n</div>\n\n\n</div>\n\n </div>\n </div>\n <div class=\"govuk-grid-row govuk-!-margin-bottom-2\">\n <div class=\"dm-multiquestion__item-input-column govuk-grid-column-full\">\n <div\n class=\"question \"\n id=\"listMultiquestionText04\"\n>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-listMultiquestionText04\">\n Here is the fith question\n </label>\n <input class=\"govuk-input\" id=\"input-listMultiquestionText04\" name=\"listMultiquestionText04\" 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 <div class=\"govuk-grid-row govuk-!-margin-bottom-2\">\n <div class=\"dm-multiquestion__item-input-column govuk-grid-column-full\">\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>\n <div class=\"govuk-grid-row govuk-!-margin-bottom-2\">\n <div class=\"dm-multiquestion__item-input-column govuk-grid-column-full\">\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 <div class=\"govuk-grid-row govuk-!-margin-bottom-2\">\n <div class=\"dm-multiquestion__item-input-column govuk-grid-column-full\">\n <div\n class=\"question \"\n id=\"listMultiquestionText12\"\n>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-listMultiquestionText12\">\n Here is the third question\n </label>\n <input class=\"govuk-input\" id=\"input-listMultiquestionText12\" name=\"listMultiquestionText12\" type=\"text\">\n</div>\n\n\n</div>\n\n </div>\n </div>\n <div class=\"govuk-grid-row govuk-!-margin-bottom-2\">\n <div class=\"dm-multiquestion__item-input-column govuk-grid-column-full\">\n <div\n class=\"question \"\n id=\"listMultiquestionText13\"\n>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-listMultiquestionText13\">\n Here is the forth question\n </label>\n <input class=\"govuk-input\" id=\"input-listMultiquestionText13\" name=\"listMultiquestionText13\" type=\"text\">\n</div>\n\n\n</div>\n\n </div>\n </div>\n <div class=\"govuk-grid-row govuk-!-margin-bottom-2\">\n <div class=\"dm-multiquestion__item-input-column govuk-grid-column-full\">\n <div\n class=\"question \"\n id=\"listMultiquestionText14\"\n>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-listMultiquestionText14\">\n Here is the fith question\n </label>\n <input class=\"govuk-input\" id=\"input-listMultiquestionText14\" name=\"listMultiquestionText14\" 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 <div class=\"govuk-grid-row govuk-!-margin-bottom-2\">\n <div class=\"dm-multiquestion__item-input-column govuk-grid-column-full\">\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>\n <div class=\"govuk-grid-row govuk-!-margin-bottom-2\">\n <div class=\"dm-multiquestion__item-input-column govuk-grid-column-full\">\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 <div class=\"govuk-grid-row govuk-!-margin-bottom-2\">\n <div class=\"dm-multiquestion__item-input-column govuk-grid-column-full\">\n <div\n class=\"question \"\n id=\"listMultiquestionText22\"\n>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-listMultiquestionText22\">\n Here is the third question\n </label>\n <input class=\"govuk-input\" id=\"input-listMultiquestionText22\" name=\"listMultiquestionText22\" type=\"text\">\n</div>\n\n\n</div>\n\n </div>\n </div>\n <div class=\"govuk-grid-row govuk-!-margin-bottom-2\">\n <div class=\"dm-multiquestion__item-input-column govuk-grid-column-full\">\n <div\n class=\"question \"\n id=\"listMultiquestionText23\"\n>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-listMultiquestionText23\">\n Here is the forth question\n </label>\n <input class=\"govuk-input\" id=\"input-listMultiquestionText23\" name=\"listMultiquestionText23\" type=\"text\">\n</div>\n\n\n</div>\n\n </div>\n </div>\n <div class=\"govuk-grid-row govuk-!-margin-bottom-2\">\n <div class=\"dm-multiquestion__item-input-column govuk-grid-column-full\">\n <div\n class=\"question \"\n id=\"listMultiquestionText24\"\n>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-listMultiquestionText24\">\n Here is the fith question\n </label>\n <input class=\"govuk-input\" id=\"input-listMultiquestionText24\" name=\"listMultiquestionText24\" 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>"
},
{
"name": "with custom widths one-half",
"options": {
"question": {
"id": "listMultiquestion",
"question": "Enter as many items as needed",
"number_of_items": 3,
"column_width": "one-half",
"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"
},
{
"type": "text",
"id": "listMultiquestionText02",
"question": "Here is the third question"
},
{
"type": "text",
"id": "listMultiquestionText03",
"question": "Here is the forth question"
},
{
"type": "text",
"id": "listMultiquestionText04",
"question": "Here is the fith 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"
},
{
"type": "text",
"id": "listMultiquestionText12",
"question": "Here is the third question"
},
{
"type": "text",
"id": "listMultiquestionText13",
"question": "Here is the forth question"
},
{
"type": "text",
"id": "listMultiquestionText14",
"question": "Here is the fith question"
}
]
},
{
"id": "listMultiquestion2",
"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"
},
{
"type": "text",
"id": "listMultiquestionText22",
"question": "Here is the third question"
},
{
"type": "text",
"id": "listMultiquestionText23",
"question": "Here is the forth question"
},
{
"type": "text",
"id": "listMultiquestionText24",
"question": "Here is the fith question"
}
]
}
]
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset\" data-module=\"dm-question-list-multiquestion-client-side\" data-max-number-of-items=\"3\" 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 <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 <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=\"listMultiquestionText02\"\n>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-listMultiquestionText02\">\n Here is the third question\n </label>\n <input class=\"govuk-input\" id=\"input-listMultiquestionText02\" name=\"listMultiquestionText02\" 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=\"listMultiquestionText03\"\n>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-listMultiquestionText03\">\n Here is the forth question\n </label>\n <input class=\"govuk-input\" id=\"input-listMultiquestionText03\" name=\"listMultiquestionText03\" type=\"text\">\n</div>\n\n\n</div>\n\n </div>\n </div>\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=\"listMultiquestionText04\"\n>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-listMultiquestionText04\">\n Here is the fith question\n </label>\n <input class=\"govuk-input\" id=\"input-listMultiquestionText04\" name=\"listMultiquestionText04\" type=\"text\">\n</div>\n\n\n</div>\n\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 <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 <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=\"listMultiquestionText12\"\n>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-listMultiquestionText12\">\n Here is the third question\n </label>\n <input class=\"govuk-input\" id=\"input-listMultiquestionText12\" name=\"listMultiquestionText12\" 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=\"listMultiquestionText13\"\n>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-listMultiquestionText13\">\n Here is the forth question\n </label>\n <input class=\"govuk-input\" id=\"input-listMultiquestionText13\" name=\"listMultiquestionText13\" type=\"text\">\n</div>\n\n\n</div>\n\n </div>\n </div>\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=\"listMultiquestionText14\"\n>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-listMultiquestionText14\">\n Here is the fith question\n </label>\n <input class=\"govuk-input\" id=\"input-listMultiquestionText14\" name=\"listMultiquestionText14\" type=\"text\">\n</div>\n\n\n</div>\n\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 <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 <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=\"listMultiquestionText22\"\n>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-listMultiquestionText22\">\n Here is the third question\n </label>\n <input class=\"govuk-input\" id=\"input-listMultiquestionText22\" name=\"listMultiquestionText22\" 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=\"listMultiquestionText23\"\n>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-listMultiquestionText23\">\n Here is the forth question\n </label>\n <input class=\"govuk-input\" id=\"input-listMultiquestionText23\" name=\"listMultiquestionText23\" type=\"text\">\n</div>\n\n\n</div>\n\n </div>\n </div>\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=\"listMultiquestionText24\"\n>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-listMultiquestionText24\">\n Here is the fith question\n </label>\n <input class=\"govuk-input\" id=\"input-listMultiquestionText24\" name=\"listMultiquestionText24\" type=\"text\">\n</div>\n\n\n</div>\n\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>"
},
{
"name": "with custom widths one-third",
"options": {
"question": {
"id": "listMultiquestion",
"question": "Enter as many items as needed",
"number_of_items": 3,
"column_width": "one-third",
"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"
},
{
"type": "text",
"id": "listMultiquestionText02",
"question": "Here is the third question"
},
{
"type": "text",
"id": "listMultiquestionText03",
"question": "Here is the forth question"
},
{
"type": "text",
"id": "listMultiquestionText04",
"question": "Here is the fith 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"
},
{
"type": "text",
"id": "listMultiquestionText12",
"question": "Here is the third question"
},
{
"type": "text",
"id": "listMultiquestionText13",
"question": "Here is the forth question"
},
{
"type": "text",
"id": "listMultiquestionText14",
"question": "Here is the fith question"
}
]
},
{
"id": "listMultiquestion2",
"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"
},
{
"type": "text",
"id": "listMultiquestionText22",
"question": "Here is the third question"
},
{
"type": "text",
"id": "listMultiquestionText23",
"question": "Here is the forth question"
},
{
"type": "text",
"id": "listMultiquestionText24",
"question": "Here is the fith question"
}
]
}
]
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset\" data-module=\"dm-question-list-multiquestion-client-side\" data-max-number-of-items=\"3\" 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 <div class=\"govuk-grid-row govuk-!-margin-bottom-2\">\n <div class=\"dm-multiquestion__item-input-column govuk-grid-column-one-third\">\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-third\">\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 class=\"dm-multiquestion__item-input-column govuk-grid-column-one-third\">\n <div\n class=\"question \"\n id=\"listMultiquestionText02\"\n>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-listMultiquestionText02\">\n Here is the third question\n </label>\n <input class=\"govuk-input\" id=\"input-listMultiquestionText02\" name=\"listMultiquestionText02\" type=\"text\">\n</div>\n\n\n</div>\n\n </div>\n </div>\n <div class=\"govuk-grid-row govuk-!-margin-bottom-2\">\n <div class=\"dm-multiquestion__item-input-column govuk-grid-column-one-third\">\n <div\n class=\"question \"\n id=\"listMultiquestionText03\"\n>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-listMultiquestionText03\">\n Here is the forth question\n </label>\n <input class=\"govuk-input\" id=\"input-listMultiquestionText03\" name=\"listMultiquestionText03\" type=\"text\">\n</div>\n\n\n</div>\n\n </div>\n <div class=\"dm-multiquestion__item-input-column govuk-grid-column-one-third\">\n <div\n class=\"question \"\n id=\"listMultiquestionText04\"\n>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-listMultiquestionText04\">\n Here is the fith question\n </label>\n <input class=\"govuk-input\" id=\"input-listMultiquestionText04\" name=\"listMultiquestionText04\" type=\"text\">\n</div>\n\n\n</div>\n\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 <div class=\"govuk-grid-row govuk-!-margin-bottom-2\">\n <div class=\"dm-multiquestion__item-input-column govuk-grid-column-one-third\">\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-third\">\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 class=\"dm-multiquestion__item-input-column govuk-grid-column-one-third\">\n <div\n class=\"question \"\n id=\"listMultiquestionText12\"\n>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-listMultiquestionText12\">\n Here is the third question\n </label>\n <input class=\"govuk-input\" id=\"input-listMultiquestionText12\" name=\"listMultiquestionText12\" type=\"text\">\n</div>\n\n\n</div>\n\n </div>\n </div>\n <div class=\"govuk-grid-row govuk-!-margin-bottom-2\">\n <div class=\"dm-multiquestion__item-input-column govuk-grid-column-one-third\">\n <div\n class=\"question \"\n id=\"listMultiquestionText13\"\n>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-listMultiquestionText13\">\n Here is the forth question\n </label>\n <input class=\"govuk-input\" id=\"input-listMultiquestionText13\" name=\"listMultiquestionText13\" type=\"text\">\n</div>\n\n\n</div>\n\n </div>\n <div class=\"dm-multiquestion__item-input-column govuk-grid-column-one-third\">\n <div\n class=\"question \"\n id=\"listMultiquestionText14\"\n>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-listMultiquestionText14\">\n Here is the fith question\n </label>\n <input class=\"govuk-input\" id=\"input-listMultiquestionText14\" name=\"listMultiquestionText14\" type=\"text\">\n</div>\n\n\n</div>\n\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 <div class=\"govuk-grid-row govuk-!-margin-bottom-2\">\n <div class=\"dm-multiquestion__item-input-column govuk-grid-column-one-third\">\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-third\">\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 class=\"dm-multiquestion__item-input-column govuk-grid-column-one-third\">\n <div\n class=\"question \"\n id=\"listMultiquestionText22\"\n>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-listMultiquestionText22\">\n Here is the third question\n </label>\n <input class=\"govuk-input\" id=\"input-listMultiquestionText22\" name=\"listMultiquestionText22\" type=\"text\">\n</div>\n\n\n</div>\n\n </div>\n </div>\n <div class=\"govuk-grid-row govuk-!-margin-bottom-2\">\n <div class=\"dm-multiquestion__item-input-column govuk-grid-column-one-third\">\n <div\n class=\"question \"\n id=\"listMultiquestionText23\"\n>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-listMultiquestionText23\">\n Here is the forth question\n </label>\n <input class=\"govuk-input\" id=\"input-listMultiquestionText23\" name=\"listMultiquestionText23\" type=\"text\">\n</div>\n\n\n</div>\n\n </div>\n <div class=\"dm-multiquestion__item-input-column govuk-grid-column-one-third\">\n <div\n class=\"question \"\n id=\"listMultiquestionText24\"\n>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-listMultiquestionText24\">\n Here is the fith question\n </label>\n <input class=\"govuk-input\" id=\"input-listMultiquestionText24\" name=\"listMultiquestionText24\" type=\"text\">\n</div>\n\n\n</div>\n\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>"
},
{
"name": "with custom widths one-quarter",
"options": {
"question": {
"id": "listMultiquestion",
"question": "Enter as many items as needed",
"number_of_items": 3,
"column_width": "one-quarter",
"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"
},
{
"type": "text",
"id": "listMultiquestionText02",
"question": "Here is the third question"
},
{
"type": "text",
"id": "listMultiquestionText03",
"question": "Here is the forth question"
},
{
"type": "text",
"id": "listMultiquestionText04",
"question": "Here is the fith 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"
},
{
"type": "text",
"id": "listMultiquestionText12",
"question": "Here is the third question"
},
{
"type": "text",
"id": "listMultiquestionText13",
"question": "Here is the forth question"
},
{
"type": "text",
"id": "listMultiquestionText14",
"question": "Here is the fith question"
}
]
},
{
"id": "listMultiquestion2",
"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"
},
{
"type": "text",
"id": "listMultiquestionText22",
"question": "Here is the third question"
},
{
"type": "text",
"id": "listMultiquestionText23",
"question": "Here is the forth question"
},
{
"type": "text",
"id": "listMultiquestionText24",
"question": "Here is the fith question"
}
]
}
]
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset\" data-module=\"dm-question-list-multiquestion-client-side\" data-max-number-of-items=\"3\" 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 <div class=\"govuk-grid-row govuk-!-margin-bottom-2\">\n <div class=\"dm-multiquestion__item-input-column govuk-grid-column-one-quarter\">\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-quarter\">\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 class=\"dm-multiquestion__item-input-column govuk-grid-column-one-quarter\">\n <div\n class=\"question \"\n id=\"listMultiquestionText02\"\n>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-listMultiquestionText02\">\n Here is the third question\n </label>\n <input class=\"govuk-input\" id=\"input-listMultiquestionText02\" name=\"listMultiquestionText02\" type=\"text\">\n</div>\n\n\n</div>\n\n </div>\n <div class=\"dm-multiquestion__item-input-column govuk-grid-column-one-quarter\">\n <div\n class=\"question \"\n id=\"listMultiquestionText03\"\n>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-listMultiquestionText03\">\n Here is the forth question\n </label>\n <input class=\"govuk-input\" id=\"input-listMultiquestionText03\" name=\"listMultiquestionText03\" type=\"text\">\n</div>\n\n\n</div>\n\n </div>\n </div>\n <div class=\"govuk-grid-row govuk-!-margin-bottom-2\">\n <div class=\"dm-multiquestion__item-input-column govuk-grid-column-one-quarter\">\n <div\n class=\"question \"\n id=\"listMultiquestionText04\"\n>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-listMultiquestionText04\">\n Here is the fith question\n </label>\n <input class=\"govuk-input\" id=\"input-listMultiquestionText04\" name=\"listMultiquestionText04\" type=\"text\">\n</div>\n\n\n</div>\n\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 <div class=\"govuk-grid-row govuk-!-margin-bottom-2\">\n <div class=\"dm-multiquestion__item-input-column govuk-grid-column-one-quarter\">\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-quarter\">\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 class=\"dm-multiquestion__item-input-column govuk-grid-column-one-quarter\">\n <div\n class=\"question \"\n id=\"listMultiquestionText12\"\n>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-listMultiquestionText12\">\n Here is the third question\n </label>\n <input class=\"govuk-input\" id=\"input-listMultiquestionText12\" name=\"listMultiquestionText12\" type=\"text\">\n</div>\n\n\n</div>\n\n </div>\n <div class=\"dm-multiquestion__item-input-column govuk-grid-column-one-quarter\">\n <div\n class=\"question \"\n id=\"listMultiquestionText13\"\n>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-listMultiquestionText13\">\n Here is the forth question\n </label>\n <input class=\"govuk-input\" id=\"input-listMultiquestionText13\" name=\"listMultiquestionText13\" type=\"text\">\n</div>\n\n\n</div>\n\n </div>\n </div>\n <div class=\"govuk-grid-row govuk-!-margin-bottom-2\">\n <div class=\"dm-multiquestion__item-input-column govuk-grid-column-one-quarter\">\n <div\n class=\"question \"\n id=\"listMultiquestionText14\"\n>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-listMultiquestionText14\">\n Here is the fith question\n </label>\n <input class=\"govuk-input\" id=\"input-listMultiquestionText14\" name=\"listMultiquestionText14\" type=\"text\">\n</div>\n\n\n</div>\n\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 <div class=\"govuk-grid-row govuk-!-margin-bottom-2\">\n <div class=\"dm-multiquestion__item-input-column govuk-grid-column-one-quarter\">\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-quarter\">\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 class=\"dm-multiquestion__item-input-column govuk-grid-column-one-quarter\">\n <div\n class=\"question \"\n id=\"listMultiquestionText22\"\n>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-listMultiquestionText22\">\n Here is the third question\n </label>\n <input class=\"govuk-input\" id=\"input-listMultiquestionText22\" name=\"listMultiquestionText22\" type=\"text\">\n</div>\n\n\n</div>\n\n </div>\n <div class=\"dm-multiquestion__item-input-column govuk-grid-column-one-quarter\">\n <div\n class=\"question \"\n id=\"listMultiquestionText23\"\n>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-listMultiquestionText23\">\n Here is the forth question\n </label>\n <input class=\"govuk-input\" id=\"input-listMultiquestionText23\" name=\"listMultiquestionText23\" type=\"text\">\n</div>\n\n\n</div>\n\n </div>\n </div>\n <div class=\"govuk-grid-row govuk-!-margin-bottom-2\">\n <div class=\"dm-multiquestion__item-input-column govuk-grid-column-one-quarter\">\n <div\n class=\"question \"\n id=\"listMultiquestionText24\"\n>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-listMultiquestionText24\">\n Here is the fith question\n </label>\n <input class=\"govuk-input\" id=\"input-listMultiquestionText24\" name=\"listMultiquestionText24\" type=\"text\">\n</div>\n\n\n</div>\n\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>"
},
{
"name": "with data for all items",
"options": {
"question": {
"id": "listMultiquestion",
"question": "Enter as many items as needed",
"number_of_items": 3,
"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": "listMultiquestion2",
"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"
}
]
}
]
},
"data": {
"listMultiquestionText00": "Text for 0 0",
"listMultiquestionText01": "Text for 0 1",
"listMultiquestionText10": "Text for 1 0",
"listMultiquestionText11": "Text for 1 1",
"listMultiquestionText20": "Text for 2 0",
"listMultiquestionText21": "Text for 2 1"
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset\" data-module=\"dm-question-list-multiquestion-client-side\" data-max-number-of-items=\"3\" 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 <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\" value=\"Text for 0 0\">\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\" value=\"Text for 0 1\">\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 <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\" value=\"Text for 1 0\">\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\" value=\"Text for 1 1\">\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 <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\" value=\"Text for 2 0\">\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\" value=\"Text for 2 1\">\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>"
},
{
"name": "with internal followups",
"options": {
"question": {
"id": "listMultiquestion",
"question": "Enter as many items as needed",
"number_of_items": 3,
"column_width": "full",
"questions": [
{
"id": "listMultiquestion0",
"question": "I am question 1",
"questions": [
{
"type": "boolean",
"id": "listMultiquestionBoolean-0",
"question": "Here is the boolean question",
"followup": {
"listMultiquestionText0": [
true
],
"listMultiquestionText1": [
false
]
}
},
{
"type": "text",
"id": "listMultiquestionText0-0",
"question": "Here is the first question",
"hidden": true
},
{
"type": "text",
"id": "listMultiquestionText1-0",
"question": "Here is the second question",
"hidden": true
}
]
},
{
"id": "listMultiquestion1",
"question": "I am question 2",
"questions": [
{
"type": "boolean",
"id": "listMultiquestionBoolean-1",
"question": "Here is the boolean question",
"followup": {
"listMultiquestionText0": [
true
],
"listMultiquestionText1": [
false
]
}
},
{
"type": "text",
"id": "listMultiquestionText0-1",
"question": "Here is the first question",
"hidden": true
},
{
"type": "text",
"id": "listMultiquestionText1-1",
"question": "Here is the second question",
"hidden": true
}
]
},
{
"id": "listMultiquestion2",
"question": "I am question 3",
"questions": [
{
"type": "boolean",
"id": "listMultiquestionBoolean-2",
"question": "Here is the boolean question",
"followup": {
"listMultiquestionText0": [
true
],
"listMultiquestionText1": [
false
]
}
},
{
"type": "text",
"id": "listMultiquestionText0-2",
"question": "Here is the first question",
"hidden": true
},
{
"type": "text",
"id": "listMultiquestionText1-2",
"question": "Here is the second question",
"hidden": true
}
]
}
]
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset\" data-module=\"dm-question-list-multiquestion-client-side\" data-max-number-of-items=\"3\" 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 <div class=\"govuk-grid-row govuk-!-margin-bottom-2\">\n <div class=\"dm-multiquestion__item-input-column govuk-grid-column-full\">\n <div\n class=\"question \"\n id=\"listMultiquestionBoolean-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 boolean 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-listMultiquestionBoolean-0\" name=\"listMultiquestionBoolean-0\" type=\"radio\" value=\"true\" data-target=\"listMultiquestionText0-0\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-listMultiquestionBoolean-0\">\n Yes\n </label>\n </div>\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-listMultiquestionBoolean-0-2\" name=\"listMultiquestionBoolean-0\" type=\"radio\" value=\"false\" data-target=\"listMultiquestionText1-0\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-listMultiquestionBoolean-0-2\">\n No\n </label>\n </div>\n </div>\n</fieldset>\n</div>\n\n\n</div>\n\n </div>\n </div>\n <div class=\"govuk-grid-row govuk-!-margin-bottom-2\">\n <div class=\"dm-multiquestion__item-input-column govuk-grid-column-full\">\n <div\n class=\"question js-hidden dm-question__related-information\" aria-hidden=\"false\"\n id=\"listMultiquestionText0-0\"\nhidden>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-listMultiquestionText0-0\">\n Here is the first question\n </label>\n <input class=\"govuk-input\" id=\"input-listMultiquestionText0-0\" name=\"listMultiquestionText0-0\" type=\"text\">\n</div>\n\n\n</div>\n\n </div>\n </div>\n <div class=\"govuk-grid-row govuk-!-margin-bottom-2\">\n <div class=\"dm-multiquestion__item-input-column govuk-grid-column-full\">\n <div\n class=\"question js-hidden dm-question__related-information\" aria-hidden=\"false\"\n id=\"listMultiquestionText1-0\"\nhidden>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-listMultiquestionText1-0\">\n Here is the second question\n </label>\n <input class=\"govuk-input\" id=\"input-listMultiquestionText1-0\" name=\"listMultiquestionText1-0\" 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 <div class=\"govuk-grid-row govuk-!-margin-bottom-2\">\n <div class=\"dm-multiquestion__item-input-column govuk-grid-column-full\">\n <div\n class=\"question \"\n id=\"listMultiquestionBoolean-1\"\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 boolean 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-listMultiquestionBoolean-1\" name=\"listMultiquestionBoolean-1\" type=\"radio\" value=\"true\" data-target=\"listMultiquestionText0-1\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-listMultiquestionBoolean-1\">\n Yes\n </label>\n </div>\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-listMultiquestionBoolean-1-2\" name=\"listMultiquestionBoolean-1\" type=\"radio\" value=\"false\" data-target=\"listMultiquestionText1-1\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-listMultiquestionBoolean-1-2\">\n No\n </label>\n </div>\n </div>\n</fieldset>\n</div>\n\n\n</div>\n\n </div>\n </div>\n <div class=\"govuk-grid-row govuk-!-margin-bottom-2\">\n <div class=\"dm-multiquestion__item-input-column govuk-grid-column-full\">\n <div\n class=\"question js-hidden dm-question__related-information\" aria-hidden=\"false\"\n id=\"listMultiquestionText0-1\"\nhidden>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-listMultiquestionText0-1\">\n Here is the first question\n </label>\n <input class=\"govuk-input\" id=\"input-listMultiquestionText0-1\" name=\"listMultiquestionText0-1\" type=\"text\">\n</div>\n\n\n</div>\n\n </div>\n </div>\n <div class=\"govuk-grid-row govuk-!-margin-bottom-2\">\n <div class=\"dm-multiquestion__item-input-column govuk-grid-column-full\">\n <div\n class=\"question js-hidden dm-question__related-information\" aria-hidden=\"false\"\n id=\"listMultiquestionText1-1\"\nhidden>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-listMultiquestionText1-1\">\n Here is the second question\n </label>\n <input class=\"govuk-input\" id=\"input-listMultiquestionText1-1\" name=\"listMultiquestionText1-1\" 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 <div class=\"govuk-grid-row govuk-!-margin-bottom-2\">\n <div class=\"dm-multiquestion__item-input-column govuk-grid-column-full\">\n <div\n class=\"question \"\n id=\"listMultiquestionBoolean-2\"\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 boolean 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-listMultiquestionBoolean-2\" name=\"listMultiquestionBoolean-2\" type=\"radio\" value=\"true\" data-target=\"listMultiquestionText0-2\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-listMultiquestionBoolean-2\">\n Yes\n </label>\n </div>\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-listMultiquestionBoolean-2-2\" name=\"listMultiquestionBoolean-2\" type=\"radio\" value=\"false\" data-target=\"listMultiquestionText1-2\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-listMultiquestionBoolean-2-2\">\n No\n </label>\n </div>\n </div>\n</fieldset>\n</div>\n\n\n</div>\n\n </div>\n </div>\n <div class=\"govuk-grid-row govuk-!-margin-bottom-2\">\n <div class=\"dm-multiquestion__item-input-column govuk-grid-column-full\">\n <div\n class=\"question js-hidden dm-question__related-information\" aria-hidden=\"false\"\n id=\"listMultiquestionText0-2\"\nhidden>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-listMultiquestionText0-2\">\n Here is the first question\n </label>\n <input class=\"govuk-input\" id=\"input-listMultiquestionText0-2\" name=\"listMultiquestionText0-2\" type=\"text\">\n</div>\n\n\n</div>\n\n </div>\n </div>\n <div class=\"govuk-grid-row govuk-!-margin-bottom-2\">\n <div class=\"dm-multiquestion__item-input-column govuk-grid-column-full\">\n <div\n class=\"question js-hidden dm-question__related-information\" aria-hidden=\"false\"\n id=\"listMultiquestionText1-2\"\nhidden>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-listMultiquestionText1-2\">\n Here is the second question\n </label>\n <input class=\"govuk-input\" id=\"input-listMultiquestionText1-2\" name=\"listMultiquestionText1-2\" 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>"
},
{
"name": "with internal followups and data",
"options": {
"question": {
"id": "listMultiquestion",
"question": "Enter as many items as needed",
"number_of_items": 3,
"column_width": "full",
"questions": [
{
"id": "listMultiquestion0",
"question": "I am question 1",
"questions": [
{
"type": "boolean",
"id": "listMultiquestionBoolean-0",
"question": "Here is the boolean question",
"followup": {
"listMultiquestionText0": [
true
],
"listMultiquestionText1": [
false
]
}
},
{
"type": "text",
"id": "listMultiquestionText0-0",
"question": "Here is the first question",
"hidden": true
},
{
"type": "text",
"id": "listMultiquestionText1-0",
"question": "Here is the second question",
"hidden": true
}
]
},
{
"id": "listMultiquestion1",
"question": "I am question 2",
"questions": [
{
"type": "boolean",
"id": "listMultiquestionBoolean-1",
"question": "Here is the boolean question",
"followup": {
"listMultiquestionText0": [
true
],
"listMultiquestionText1": [
false
]
}
},
{
"type": "text",
"id": "listMultiquestionText0-1",
"question": "Here is the first question",
"hidden": true
},
{
"type": "text",
"id": "listMultiquestionText1-1",
"question": "Here is the second question",
"hidden": true
}
]
},
{
"id": "listMultiquestion2",
"question": "I am question 3",
"questions": [
{
"type": "boolean",
"id": "listMultiquestionBoolean-2",
"question": "Here is the boolean question",
"followup": {
"listMultiquestionText0": [
true
],
"listMultiquestionText1": [
false
]
}
},
{
"type": "text",
"id": "listMultiquestionText0-2",
"question": "Here is the first question",
"hidden": true
},
{
"type": "text",
"id": "listMultiquestionText1-2",
"question": "Here is the second question",
"hidden": true
}
]
}
]
},
"data": {
"listMultiquestionBoolean-0": true,
"listMultiquestionText0-0": "Text for 0 0",
"listMultiquestionBoolean-1": false
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset\" data-module=\"dm-question-list-multiquestion-client-side\" data-max-number-of-items=\"3\" 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 <div class=\"govuk-grid-row govuk-!-margin-bottom-2\">\n <div class=\"dm-multiquestion__item-input-column govuk-grid-column-full\">\n <div\n class=\"question \"\n id=\"listMultiquestionBoolean-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 boolean 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-listMultiquestionBoolean-0\" name=\"listMultiquestionBoolean-0\" type=\"radio\" value=\"true\" checked data-target=\"listMultiquestionText0-0\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-listMultiquestionBoolean-0\">\n Yes\n </label>\n </div>\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-listMultiquestionBoolean-0-2\" name=\"listMultiquestionBoolean-0\" type=\"radio\" value=\"false\" data-target=\"listMultiquestionText1-0\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-listMultiquestionBoolean-0-2\">\n No\n </label>\n </div>\n </div>\n</fieldset>\n</div>\n\n\n</div>\n\n </div>\n </div>\n <div class=\"govuk-grid-row govuk-!-margin-bottom-2\">\n <div class=\"dm-multiquestion__item-input-column govuk-grid-column-full\">\n <div\n class=\"question js-hidden dm-question__related-information\" aria-hidden=\"false\"\n id=\"listMultiquestionText0-0\"\nhidden>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-listMultiquestionText0-0\">\n Here is the first question\n </label>\n <input class=\"govuk-input\" id=\"input-listMultiquestionText0-0\" name=\"listMultiquestionText0-0\" type=\"text\" value=\"Text for 0 0\">\n</div>\n\n\n</div>\n\n </div>\n </div>\n <div class=\"govuk-grid-row govuk-!-margin-bottom-2\">\n <div class=\"dm-multiquestion__item-input-column govuk-grid-column-full\">\n <div\n class=\"question js-hidden dm-question__related-information\" aria-hidden=\"false\"\n id=\"listMultiquestionText1-0\"\nhidden>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-listMultiquestionText1-0\">\n Here is the second question\n </label>\n <input class=\"govuk-input\" id=\"input-listMultiquestionText1-0\" name=\"listMultiquestionText1-0\" 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 <div class=\"govuk-grid-row govuk-!-margin-bottom-2\">\n <div class=\"dm-multiquestion__item-input-column govuk-grid-column-full\">\n <div\n class=\"question \"\n id=\"listMultiquestionBoolean-1\"\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 boolean 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-listMultiquestionBoolean-1\" name=\"listMultiquestionBoolean-1\" type=\"radio\" value=\"true\" data-target=\"listMultiquestionText0-1\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-listMultiquestionBoolean-1\">\n Yes\n </label>\n </div>\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-listMultiquestionBoolean-1-2\" name=\"listMultiquestionBoolean-1\" type=\"radio\" value=\"false\" checked data-target=\"listMultiquestionText1-1\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-listMultiquestionBoolean-1-2\">\n No\n </label>\n </div>\n </div>\n</fieldset>\n</div>\n\n\n</div>\n\n </div>\n </div>\n <div class=\"govuk-grid-row govuk-!-margin-bottom-2\">\n <div class=\"dm-multiquestion__item-input-column govuk-grid-column-full\">\n <div\n class=\"question js-hidden dm-question__related-information\" aria-hidden=\"false\"\n id=\"listMultiquestionText0-1\"\nhidden>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-listMultiquestionText0-1\">\n Here is the first question\n </label>\n <input class=\"govuk-input\" id=\"input-listMultiquestionText0-1\" name=\"listMultiquestionText0-1\" type=\"text\">\n</div>\n\n\n</div>\n\n </div>\n </div>\n <div class=\"govuk-grid-row govuk-!-margin-bottom-2\">\n <div class=\"dm-multiquestion__item-input-column govuk-grid-column-full\">\n <div\n class=\"question js-hidden dm-question__related-information\" aria-hidden=\"false\"\n id=\"listMultiquestionText1-1\"\nhidden>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-listMultiquestionText1-1\">\n Here is the second question\n </label>\n <input class=\"govuk-input\" id=\"input-listMultiquestionText1-1\" name=\"listMultiquestionText1-1\" 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 <div class=\"govuk-grid-row govuk-!-margin-bottom-2\">\n <div class=\"dm-multiquestion__item-input-column govuk-grid-column-full\">\n <div\n class=\"question \"\n id=\"listMultiquestionBoolean-2\"\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 boolean 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-listMultiquestionBoolean-2\" name=\"listMultiquestionBoolean-2\" type=\"radio\" value=\"true\" data-target=\"listMultiquestionText0-2\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-listMultiquestionBoolean-2\">\n Yes\n </label>\n </div>\n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"input-listMultiquestionBoolean-2-2\" name=\"listMultiquestionBoolean-2\" type=\"radio\" value=\"false\" data-target=\"listMultiquestionText1-2\">\n <label class=\"govuk-label govuk-radios__label\" for=\"input-listMultiquestionBoolean-2-2\">\n No\n </label>\n </div>\n </div>\n</fieldset>\n</div>\n\n\n</div>\n\n </div>\n </div>\n <div class=\"govuk-grid-row govuk-!-margin-bottom-2\">\n <div class=\"dm-multiquestion__item-input-column govuk-grid-column-full\">\n <div\n class=\"question js-hidden dm-question__related-information\" aria-hidden=\"false\"\n id=\"listMultiquestionText0-2\"\nhidden>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-listMultiquestionText0-2\">\n Here is the first question\n </label>\n <input class=\"govuk-input\" id=\"input-listMultiquestionText0-2\" name=\"listMultiquestionText0-2\" type=\"text\">\n</div>\n\n\n</div>\n\n </div>\n </div>\n <div class=\"govuk-grid-row govuk-!-margin-bottom-2\">\n <div class=\"dm-multiquestion__item-input-column govuk-grid-column-full\">\n <div\n class=\"question js-hidden dm-question__related-information\" aria-hidden=\"false\"\n id=\"listMultiquestionText1-2\"\nhidden>\n \n\n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-listMultiquestionText1-2\">\n Here is the second question\n </label>\n <input class=\"govuk-input\" id=\"input-listMultiquestionText1-2\" name=\"listMultiquestionText1-2\" 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>"
}
]
}