digitalmarketplace-frontend
Version:
Digital Marketplace Frontend contains assets and components used in Digital Marketplace projects
351 lines (350 loc) • 46.8 kB
JSON
{
"component": "question-formula",
"fixtures": [
{
"name": "default",
"options": {
"question": {
"id": "formula",
"question": "Here is the formula question",
"questions": [
{
"id": "formulaTotal",
"question": "This is the total",
"type": "display",
"value": "I am some total",
"operation": "=",
"operation_position": "after"
},
{
"id": "formulaStart",
"question": "This is the thing to start with",
"type": "textbox_large",
"max_length_in_words": 200
},
{
"id": "formulaStartText",
"question": "This is an extra question",
"type": "text"
},
{
"id": "formulaAdd",
"question": "This is the thing to add",
"type": "textbox_large",
"operation": "+",
"operation_position": "before",
"max_length_in_words": 300
},
{
"id": "formulaSubtract",
"question": "This is the thing to subtract",
"type": "textbox_large",
"operation": "-",
"operation_position": "before",
"max_length_in_words": 400
}
]
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<fieldset class=\"govuk-fieldset\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the formula question\n </legend>\n<table class=\"govuk-table dm-question-formula\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <th scope=\"col\" class=\"govuk-table__header govuk-!-width-one-half\"><span class=\"govuk-visually-hidden\">Question</span></th>\n <th scope=\"col\" class=\"govuk-table__header govuk-!-width-one-half\"><span class=\"govuk-visually-hidden\">Answer</span></th>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\"><tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell\">This is the total</td>\n <td class=\"govuk-table__cell\">I am some total</td>\n </tr><tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell\" colspan=\"2\"><strong class=\"govuk-!-font-size-27\">=</strong></td>\n </tr>\n\n <tr class=\"govuk-table__row govuk-character-count\" data-module=\"govuk-character-count\" data-maxwords=\"200\">\n <td class=\"govuk-table__cell\">\n <label class=\"govuk-label govuk-label--s\" for=\"input-formulaStart\">\n This is the thing to start with\n </label>\n </td>\n <td class=\"govuk-table__cell\">\n <textarea\n class=\"govuk-textarea govuk-js-character-count\"\n id=\"input-formulaStart\"\n name=\"formulaStart\"\n rows=\"3\" aria-describedby=\"input-formulaStart-info\" ></textarea>\n <div id=\"input-formulaStart-info\" class=\"govuk-hint govuk-character-count__message\">\n You can enter up to 200 words\n</div>\n </td>\n </tr>\n\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell\">\n <label class=\"govuk-label govuk-label--s\" for=\"input-formulaStartText\">\n This is an extra question\n </label>\n </td>\n <td class=\"govuk-table__cell\">\n <input\n class=\"govuk-input\"\n id=\"input-formulaStartText\"\n name=\"formulaStartText\"\n type=\"text\" >\n </td>\n </tr>\n<tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell\" colspan=\"2\"><strong class=\"govuk-!-font-size-27\">+</strong></td>\n </tr>\n\n <tr class=\"govuk-table__row govuk-character-count\" data-module=\"govuk-character-count\" data-maxwords=\"300\">\n <td class=\"govuk-table__cell\">\n <label class=\"govuk-label govuk-label--s\" for=\"input-formulaAdd\">\n This is the thing to add\n </label>\n </td>\n <td class=\"govuk-table__cell\">\n <textarea\n class=\"govuk-textarea govuk-js-character-count\"\n id=\"input-formulaAdd\"\n name=\"formulaAdd\"\n rows=\"3\" aria-describedby=\"input-formulaAdd-info\" ></textarea>\n <div id=\"input-formulaAdd-info\" class=\"govuk-hint govuk-character-count__message\">\n You can enter up to 300 words\n</div>\n </td>\n </tr><tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell\" colspan=\"2\"><strong class=\"govuk-!-font-size-27\">-</strong></td>\n </tr>\n\n <tr class=\"govuk-table__row govuk-character-count\" data-module=\"govuk-character-count\" data-maxwords=\"400\">\n <td class=\"govuk-table__cell\">\n <label class=\"govuk-label govuk-label--s\" for=\"input-formulaSubtract\">\n This is the thing to subtract\n </label>\n </td>\n <td class=\"govuk-table__cell\">\n <textarea\n class=\"govuk-textarea govuk-js-character-count\"\n id=\"input-formulaSubtract\"\n name=\"formulaSubtract\"\n rows=\"3\" aria-describedby=\"input-formulaSubtract-info\" ></textarea>\n <div id=\"input-formulaSubtract-info\" class=\"govuk-hint govuk-character-count__message\">\n You can enter up to 400 words\n</div>\n </td>\n </tr></tbody>\n </table>\n\n</fieldset>"
},
{
"name": "with hint",
"options": {
"question": {
"id": "formula",
"question": "Here is the formula question",
"questions": [
{
"id": "formulaTotal",
"question": "This is the total",
"type": "display",
"value": "I am some total",
"operation": "=",
"operation_position": "after"
},
{
"id": "formulaStart",
"question": "This is the thing to start with",
"hint": "Here is the hint for start",
"type": "textbox_large",
"max_length_in_words": 200
},
{
"id": "formulaStartText",
"question": "This is an extra question",
"hint": "Here is the hint for extra question",
"type": "text"
},
{
"id": "formulaAdd",
"question": "This is the thing to add",
"hint": "Here is the hint for add",
"type": "textbox_large",
"operation": "+",
"operation_position": "before",
"max_length_in_words": 300
},
{
"id": "formulaSubtract",
"question": "This is the thing to subtract",
"hint": "Here is the hint for subtract",
"type": "textbox_large",
"operation": "-",
"operation_position": "before",
"max_length_in_words": 400
}
]
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<fieldset class=\"govuk-fieldset\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the formula question\n </legend>\n<table class=\"govuk-table dm-question-formula\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <th scope=\"col\" class=\"govuk-table__header govuk-!-width-one-half\"><span class=\"govuk-visually-hidden\">Question</span></th>\n <th scope=\"col\" class=\"govuk-table__header govuk-!-width-one-half\"><span class=\"govuk-visually-hidden\">Answer</span></th>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\"><tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell\">This is the total</td>\n <td class=\"govuk-table__cell\">I am some total</td>\n </tr><tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell\" colspan=\"2\"><strong class=\"govuk-!-font-size-27\">=</strong></td>\n </tr>\n\n <tr class=\"govuk-table__row govuk-character-count\" data-module=\"govuk-character-count\" data-maxwords=\"200\">\n <td class=\"govuk-table__cell\">\n <label class=\"govuk-label govuk-label--s\" for=\"input-formulaStart\">\n This is the thing to start with\n </label>\n <div id=\"input-formulaStart-hint\" class=\"govuk-hint\">\n Here is the hint for start\n </div>\n </td>\n <td class=\"govuk-table__cell\">\n <textarea\n class=\"govuk-textarea govuk-js-character-count\"\n id=\"input-formulaStart\"\n name=\"formulaStart\"\n rows=\"3\" aria-describedby=\"input-formulaStart-info input-formulaStart-hint\" ></textarea>\n <div id=\"input-formulaStart-info\" class=\"govuk-hint govuk-character-count__message\">\n You can enter up to 200 words\n</div>\n </td>\n </tr>\n\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell\">\n <label class=\"govuk-label govuk-label--s\" for=\"input-formulaStartText\">\n This is an extra question\n </label>\n <div id=\"input-formulaStartText-hint\" class=\"govuk-hint\">\n Here is the hint for extra question\n </div>\n </td>\n <td class=\"govuk-table__cell\">\n <input\n class=\"govuk-input\"\n id=\"input-formulaStartText\"\n name=\"formulaStartText\"\n type=\"text\" aria-describedby=\"input-formulaStartText-hint\" >\n </td>\n </tr>\n<tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell\" colspan=\"2\"><strong class=\"govuk-!-font-size-27\">+</strong></td>\n </tr>\n\n <tr class=\"govuk-table__row govuk-character-count\" data-module=\"govuk-character-count\" data-maxwords=\"300\">\n <td class=\"govuk-table__cell\">\n <label class=\"govuk-label govuk-label--s\" for=\"input-formulaAdd\">\n This is the thing to add\n </label>\n <div id=\"input-formulaAdd-hint\" class=\"govuk-hint\">\n Here is the hint for add\n </div>\n </td>\n <td class=\"govuk-table__cell\">\n <textarea\n class=\"govuk-textarea govuk-js-character-count\"\n id=\"input-formulaAdd\"\n name=\"formulaAdd\"\n rows=\"3\" aria-describedby=\"input-formulaAdd-info input-formulaAdd-hint\" ></textarea>\n <div id=\"input-formulaAdd-info\" class=\"govuk-hint govuk-character-count__message\">\n You can enter up to 300 words\n</div>\n </td>\n </tr><tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell\" colspan=\"2\"><strong class=\"govuk-!-font-size-27\">-</strong></td>\n </tr>\n\n <tr class=\"govuk-table__row govuk-character-count\" data-module=\"govuk-character-count\" data-maxwords=\"400\">\n <td class=\"govuk-table__cell\">\n <label class=\"govuk-label govuk-label--s\" for=\"input-formulaSubtract\">\n This is the thing to subtract\n </label>\n <div id=\"input-formulaSubtract-hint\" class=\"govuk-hint\">\n Here is the hint for subtract\n </div>\n </td>\n <td class=\"govuk-table__cell\">\n <textarea\n class=\"govuk-textarea govuk-js-character-count\"\n id=\"input-formulaSubtract\"\n name=\"formulaSubtract\"\n rows=\"3\" aria-describedby=\"input-formulaSubtract-info input-formulaSubtract-hint\" ></textarea>\n <div id=\"input-formulaSubtract-info\" class=\"govuk-hint govuk-character-count__message\">\n You can enter up to 400 words\n</div>\n </td>\n </tr></tbody>\n </table>\n\n</fieldset>"
},
{
"name": "with question advice",
"options": {
"question": {
"id": "formula",
"question": "Here is the formula question",
"questions": [
{
"id": "formulaTotal",
"question": "This is the total",
"type": "display",
"value": "I am some total",
"operation": "=",
"operation_position": "after"
},
{
"id": "formulaStart",
"question": "This is the thing to start with",
"question_advice": "Here is the question advice for start",
"type": "textbox_large",
"max_length_in_words": 200
},
{
"id": "formulaStartText",
"question": "This is an extra question",
"question_advice": "Here is the question advice for extra question",
"type": "text"
},
{
"id": "formulaAdd",
"question": "This is the thing to add",
"question_advice": "Here is the question advice for add",
"type": "textbox_large",
"operation": "+",
"operation_position": "before",
"max_length_in_words": 300
},
{
"id": "formulaSubtract",
"question": "This is the thing to subtract",
"question_advice": "Here is the question advice for subtract",
"type": "textbox_large",
"operation": "-",
"operation_position": "before",
"max_length_in_words": 400
}
],
"question_advice": "Here is the question advice"
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<fieldset class=\"govuk-fieldset\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the formula question\n </legend>\n<div class=\"govuk-body\">\n Here is the question advice\n </div><table class=\"govuk-table dm-question-formula\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <th scope=\"col\" class=\"govuk-table__header govuk-!-width-one-half\"><span class=\"govuk-visually-hidden\">Question</span></th>\n <th scope=\"col\" class=\"govuk-table__header govuk-!-width-one-half\"><span class=\"govuk-visually-hidden\">Answer</span></th>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\"><tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell\">This is the total</td>\n <td class=\"govuk-table__cell\">I am some total</td>\n </tr><tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell\" colspan=\"2\"><strong class=\"govuk-!-font-size-27\">=</strong></td>\n </tr>\n\n <tr class=\"govuk-table__row govuk-character-count\" data-module=\"govuk-character-count\" data-maxwords=\"200\">\n <td class=\"govuk-table__cell\">\n <label class=\"govuk-label govuk-label--s\" for=\"input-formulaStart\">\n This is the thing to start with\n </label>\n <div id=\"input-formulaStart-hint\" class=\"govuk-hint\">\n <div class=\"govuk-body\">\n Here is the question advice for start\n </div>\n </div>\n </td>\n <td class=\"govuk-table__cell\">\n <textarea\n class=\"govuk-textarea govuk-js-character-count\"\n id=\"input-formulaStart\"\n name=\"formulaStart\"\n rows=\"3\" aria-describedby=\"input-formulaStart-info input-formulaStart-hint\" ></textarea>\n <div id=\"input-formulaStart-info\" class=\"govuk-hint govuk-character-count__message\">\n You can enter up to 200 words\n</div>\n </td>\n </tr>\n\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell\">\n <label class=\"govuk-label govuk-label--s\" for=\"input-formulaStartText\">\n This is an extra question\n </label>\n <div id=\"input-formulaStartText-hint\" class=\"govuk-hint\">\n <div class=\"govuk-body\">\n Here is the question advice for extra question\n </div>\n </div>\n </td>\n <td class=\"govuk-table__cell\">\n <input\n class=\"govuk-input\"\n id=\"input-formulaStartText\"\n name=\"formulaStartText\"\n type=\"text\" aria-describedby=\"input-formulaStartText-hint\" >\n </td>\n </tr>\n<tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell\" colspan=\"2\"><strong class=\"govuk-!-font-size-27\">+</strong></td>\n </tr>\n\n <tr class=\"govuk-table__row govuk-character-count\" data-module=\"govuk-character-count\" data-maxwords=\"300\">\n <td class=\"govuk-table__cell\">\n <label class=\"govuk-label govuk-label--s\" for=\"input-formulaAdd\">\n This is the thing to add\n </label>\n <div id=\"input-formulaAdd-hint\" class=\"govuk-hint\">\n <div class=\"govuk-body\">\n Here is the question advice for add\n </div>\n </div>\n </td>\n <td class=\"govuk-table__cell\">\n <textarea\n class=\"govuk-textarea govuk-js-character-count\"\n id=\"input-formulaAdd\"\n name=\"formulaAdd\"\n rows=\"3\" aria-describedby=\"input-formulaAdd-info input-formulaAdd-hint\" ></textarea>\n <div id=\"input-formulaAdd-info\" class=\"govuk-hint govuk-character-count__message\">\n You can enter up to 300 words\n</div>\n </td>\n </tr><tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell\" colspan=\"2\"><strong class=\"govuk-!-font-size-27\">-</strong></td>\n </tr>\n\n <tr class=\"govuk-table__row govuk-character-count\" data-module=\"govuk-character-count\" data-maxwords=\"400\">\n <td class=\"govuk-table__cell\">\n <label class=\"govuk-label govuk-label--s\" for=\"input-formulaSubtract\">\n This is the thing to subtract\n </label>\n <div id=\"input-formulaSubtract-hint\" class=\"govuk-hint\">\n <div class=\"govuk-body\">\n Here is the question advice for subtract\n </div>\n </div>\n </td>\n <td class=\"govuk-table__cell\">\n <textarea\n class=\"govuk-textarea govuk-js-character-count\"\n id=\"input-formulaSubtract\"\n name=\"formulaSubtract\"\n rows=\"3\" aria-describedby=\"input-formulaSubtract-info input-formulaSubtract-hint\" ></textarea>\n <div id=\"input-formulaSubtract-info\" class=\"govuk-hint govuk-character-count__message\">\n You can enter up to 400 words\n</div>\n </td>\n </tr></tbody>\n </table>\n\n</fieldset>"
},
{
"name": "with data",
"options": {
"question": {
"id": "formula",
"question": "Here is the formula question",
"questions": [
{
"id": "formulaTotal",
"question": "This is the total",
"type": "display",
"value": "I am some total",
"operation": "=",
"operation_position": "after"
},
{
"id": "formulaStart",
"question": "This is the thing to start with",
"type": "textbox_large",
"max_length_in_words": 200
},
{
"id": "formulaStartText",
"question": "This is an extra question",
"type": "text"
},
{
"id": "formulaAdd",
"question": "This is the thing to add",
"type": "textbox_large",
"operation": "+",
"operation_position": "before",
"max_length_in_words": 300
},
{
"id": "formulaSubtract",
"question": "This is the thing to subtract",
"type": "textbox_large",
"operation": "-",
"operation_position": "before",
"max_length_in_words": 400
}
]
},
"data": {
"formulaStart": "I am the start of the formula",
"formulaStartText": "I am the extra of the formula",
"formulaAdd": "I am the part of the formula added",
"formulaSubtract": "I am the part of the formula to subtract"
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<fieldset class=\"govuk-fieldset\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the formula question\n </legend>\n<table class=\"govuk-table dm-question-formula\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <th scope=\"col\" class=\"govuk-table__header govuk-!-width-one-half\"><span class=\"govuk-visually-hidden\">Question</span></th>\n <th scope=\"col\" class=\"govuk-table__header govuk-!-width-one-half\"><span class=\"govuk-visually-hidden\">Answer</span></th>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\"><tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell\">This is the total</td>\n <td class=\"govuk-table__cell\">I am some total</td>\n </tr><tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell\" colspan=\"2\"><strong class=\"govuk-!-font-size-27\">=</strong></td>\n </tr>\n\n <tr class=\"govuk-table__row govuk-character-count\" data-module=\"govuk-character-count\" data-maxwords=\"200\">\n <td class=\"govuk-table__cell\">\n <label class=\"govuk-label govuk-label--s\" for=\"input-formulaStart\">\n This is the thing to start with\n </label>\n </td>\n <td class=\"govuk-table__cell\">\n <textarea\n class=\"govuk-textarea govuk-js-character-count\"\n id=\"input-formulaStart\"\n name=\"formulaStart\"\n rows=\"3\" aria-describedby=\"input-formulaStart-info\" >I am the start of the formula</textarea>\n <div id=\"input-formulaStart-info\" class=\"govuk-hint govuk-character-count__message\">\n You can enter up to 200 words\n</div>\n </td>\n </tr>\n\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell\">\n <label class=\"govuk-label govuk-label--s\" for=\"input-formulaStartText\">\n This is an extra question\n </label>\n </td>\n <td class=\"govuk-table__cell\">\n <input\n class=\"govuk-input\"\n id=\"input-formulaStartText\"\n name=\"formulaStartText\"\n type=\"text\" value=\"I am the extra of the formula\" >\n </td>\n </tr>\n<tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell\" colspan=\"2\"><strong class=\"govuk-!-font-size-27\">+</strong></td>\n </tr>\n\n <tr class=\"govuk-table__row govuk-character-count\" data-module=\"govuk-character-count\" data-maxwords=\"300\">\n <td class=\"govuk-table__cell\">\n <label class=\"govuk-label govuk-label--s\" for=\"input-formulaAdd\">\n This is the thing to add\n </label>\n </td>\n <td class=\"govuk-table__cell\">\n <textarea\n class=\"govuk-textarea govuk-js-character-count\"\n id=\"input-formulaAdd\"\n name=\"formulaAdd\"\n rows=\"3\" aria-describedby=\"input-formulaAdd-info\" >I am the part of the formula added</textarea>\n <div id=\"input-formulaAdd-info\" class=\"govuk-hint govuk-character-count__message\">\n You can enter up to 300 words\n</div>\n </td>\n </tr><tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell\" colspan=\"2\"><strong class=\"govuk-!-font-size-27\">-</strong></td>\n </tr>\n\n <tr class=\"govuk-table__row govuk-character-count\" data-module=\"govuk-character-count\" data-maxwords=\"400\">\n <td class=\"govuk-table__cell\">\n <label class=\"govuk-label govuk-label--s\" for=\"input-formulaSubtract\">\n This is the thing to subtract\n </label>\n </td>\n <td class=\"govuk-table__cell\">\n <textarea\n class=\"govuk-textarea govuk-js-character-count\"\n id=\"input-formulaSubtract\"\n name=\"formulaSubtract\"\n rows=\"3\" aria-describedby=\"input-formulaSubtract-info\" >I am the part of the formula to subtract</textarea>\n <div id=\"input-formulaSubtract-info\" class=\"govuk-hint govuk-character-count__message\">\n You can enter up to 400 words\n</div>\n </td>\n </tr></tbody>\n </table>\n\n</fieldset>"
},
{
"name": "with error message",
"options": {
"question": {
"id": "formula",
"question": "Here is the formula question",
"questions": [
{
"id": "formulaTotal",
"question": "This is the total",
"type": "display",
"value": "I am some total",
"operation": "=",
"operation_position": "after"
},
{
"id": "formulaStart",
"question": "This is the thing to start with",
"type": "textbox_large",
"max_length_in_words": 200
},
{
"id": "formulaStartText",
"question": "This is an extra question",
"type": "text"
},
{
"id": "formulaAdd",
"question": "This is the thing to add",
"type": "textbox_large",
"operation": "+",
"operation_position": "before",
"max_length_in_words": 300
},
{
"id": "formulaSubtract",
"question": "This is the thing to subtract",
"type": "textbox_large",
"operation": "-",
"operation_position": "before",
"max_length_in_words": 400
}
]
},
"errors": {
"formulaStart": {
"message": "You must enter something into the start field"
},
"formulaStartText": {
"message": "You must enter something into the extra field"
},
"formulaAdd": {
"message": "You must enter something into the add field"
},
"formulaSubtract": {
"message": "You must enter something into the subtract field"
}
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<fieldset class=\"govuk-fieldset\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the formula question\n </legend>\n<table class=\"govuk-table dm-question-formula\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <th scope=\"col\" class=\"govuk-table__header govuk-!-width-one-half\"><span class=\"govuk-visually-hidden\">Question</span></th>\n <th scope=\"col\" class=\"govuk-table__header govuk-!-width-one-half\"><span class=\"govuk-visually-hidden\">Answer</span></th>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\"><tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell\">This is the total</td>\n <td class=\"govuk-table__cell\">I am some total</td>\n </tr><tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell\" colspan=\"2\"><strong class=\"govuk-!-font-size-27\">=</strong></td>\n </tr>\n\n <tr class=\"govuk-table__row govuk-character-count\" data-module=\"govuk-character-count\" data-maxwords=\"200\">\n <td class=\"govuk-table__cell dm-question-formula--error\">\n <label class=\"govuk-label govuk-label--s\" for=\"input-formulaStart\">\n This is the thing to start with\n </label>\n <p id=\"input-formulaStart-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> You must enter something into the start field\n </p>\n </td>\n <td class=\"govuk-table__cell\">\n <textarea\n class=\"govuk-textarea govuk-textarea--error govuk-js-character-count\"\n id=\"input-formulaStart\"\n name=\"formulaStart\"\n rows=\"3\" aria-describedby=\"input-formulaStart-info input-formulaStart-error\" ></textarea>\n <div id=\"input-formulaStart-info\" class=\"govuk-hint govuk-character-count__message\">\n You can enter up to 200 words\n</div>\n </td>\n </tr>\n\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell dm-question-formula--error\">\n <label class=\"govuk-label govuk-label--s\" for=\"input-formulaStartText\">\n This is an extra question\n </label>\n <p id=\"input-formulaStartText-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> You must enter something into the extra field\n </p>\n </td>\n <td class=\"govuk-table__cell\">\n <input\n class=\"govuk-input govuk-input--error\"\n id=\"input-formulaStartText\"\n name=\"formulaStartText\"\n type=\"text\" aria-describedby=\"input-formulaStartText-error\" >\n </td>\n </tr>\n<tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell\" colspan=\"2\"><strong class=\"govuk-!-font-size-27\">+</strong></td>\n </tr>\n\n <tr class=\"govuk-table__row govuk-character-count\" data-module=\"govuk-character-count\" data-maxwords=\"300\">\n <td class=\"govuk-table__cell dm-question-formula--error\">\n <label class=\"govuk-label govuk-label--s\" for=\"input-formulaAdd\">\n This is the thing to add\n </label>\n <p id=\"input-formulaAdd-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> You must enter something into the add field\n </p>\n </td>\n <td class=\"govuk-table__cell\">\n <textarea\n class=\"govuk-textarea govuk-textarea--error govuk-js-character-count\"\n id=\"input-formulaAdd\"\n name=\"formulaAdd\"\n rows=\"3\" aria-describedby=\"input-formulaAdd-info input-formulaAdd-error\" ></textarea>\n <div id=\"input-formulaAdd-info\" class=\"govuk-hint govuk-character-count__message\">\n You can enter up to 300 words\n</div>\n </td>\n </tr><tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell\" colspan=\"2\"><strong class=\"govuk-!-font-size-27\">-</strong></td>\n </tr>\n\n <tr class=\"govuk-table__row govuk-character-count\" data-module=\"govuk-character-count\" data-maxwords=\"400\">\n <td class=\"govuk-table__cell dm-question-formula--error\">\n <label class=\"govuk-label govuk-label--s\" for=\"input-formulaSubtract\">\n This is the thing to subtract\n </label>\n <p id=\"input-formulaSubtract-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> You must enter something into the subtract field\n </p>\n </td>\n <td class=\"govuk-table__cell\">\n <textarea\n class=\"govuk-textarea govuk-textarea--error govuk-js-character-count\"\n id=\"input-formulaSubtract\"\n name=\"formulaSubtract\"\n rows=\"3\" aria-describedby=\"input-formulaSubtract-info input-formulaSubtract-error\" ></textarea>\n <div id=\"input-formulaSubtract-info\" class=\"govuk-hint govuk-character-count__message\">\n You can enter up to 400 words\n</div>\n </td>\n </tr></tbody>\n </table>\n\n</fieldset>"
},
{
"name": "with many parts",
"options": {
"question": {
"id": "formula",
"question": "Here is the formula question",
"questions": [
{
"id": "formulaTotal",
"question": "This is the total",
"type": "display",
"value": "I am some total",
"operation": "=",
"operation_position": "after"
},
{
"id": "formulaStart",
"question": "This is the thing to start with",
"type": "textbox_large",
"max_length_in_words": 200
},
{
"id": "formulaStartText",
"question": "This is an extra question",
"type": "text"
},
{
"id": "formulaAdd",
"question": "This is the thing to add",
"type": "textbox_large",
"operation": "+",
"operation_position": "before",
"max_length_in_words": 300
},
{
"id": "formulaSubtract",
"question": "This is the thing to subtract",
"type": "textbox_large",
"operation": "-",
"operation_position": "before",
"max_length_in_words": 400
},
{
"id": "formulaAdd2",
"question": "This is another thing to add",
"type": "textbox_large",
"operation": "+",
"operation_position": "before",
"max_length_in_words": 300
},
{
"id": "formulaSubtract2",
"question": "This is another thing to subtract",
"type": "textbox_large",
"operation": "-",
"operation_position": "before",
"max_length_in_words": 200
}
]
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<fieldset class=\"govuk-fieldset\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the formula question\n </legend>\n<table class=\"govuk-table dm-question-formula\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <th scope=\"col\" class=\"govuk-table__header govuk-!-width-one-half\"><span class=\"govuk-visually-hidden\">Question</span></th>\n <th scope=\"col\" class=\"govuk-table__header govuk-!-width-one-half\"><span class=\"govuk-visually-hidden\">Answer</span></th>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\"><tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell\">This is the total</td>\n <td class=\"govuk-table__cell\">I am some total</td>\n </tr><tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell\" colspan=\"2\"><strong class=\"govuk-!-font-size-27\">=</strong></td>\n </tr>\n\n <tr class=\"govuk-table__row govuk-character-count\" data-module=\"govuk-character-count\" data-maxwords=\"200\">\n <td class=\"govuk-table__cell\">\n <label class=\"govuk-label govuk-label--s\" for=\"input-formulaStart\">\n This is the thing to start with\n </label>\n </td>\n <td class=\"govuk-table__cell\">\n <textarea\n class=\"govuk-textarea govuk-js-character-count\"\n id=\"input-formulaStart\"\n name=\"formulaStart\"\n rows=\"3\" aria-describedby=\"input-formulaStart-info\" ></textarea>\n <div id=\"input-formulaStart-info\" class=\"govuk-hint govuk-character-count__message\">\n You can enter up to 200 words\n</div>\n </td>\n </tr>\n\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell\">\n <label class=\"govuk-label govuk-label--s\" for=\"input-formulaStartText\">\n This is an extra question\n </label>\n </td>\n <td class=\"govuk-table__cell\">\n <input\n class=\"govuk-input\"\n id=\"input-formulaStartText\"\n name=\"formulaStartText\"\n type=\"text\" >\n </td>\n </tr>\n<tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell\" colspan=\"2\"><strong class=\"govuk-!-font-size-27\">+</strong></td>\n </tr>\n\n <tr class=\"govuk-table__row govuk-character-count\" data-module=\"govuk-character-count\" data-maxwords=\"300\">\n <td class=\"govuk-table__cell\">\n <label class=\"govuk-label govuk-label--s\" for=\"input-formulaAdd\">\n This is the thing to add\n </label>\n </td>\n <td class=\"govuk-table__cell\">\n <textarea\n class=\"govuk-textarea govuk-js-character-count\"\n id=\"input-formulaAdd\"\n name=\"formulaAdd\"\n rows=\"3\" aria-describedby=\"input-formulaAdd-info\" ></textarea>\n <div id=\"input-formulaAdd-info\" class=\"govuk-hint govuk-character-count__message\">\n You can enter up to 300 words\n</div>\n </td>\n </tr><tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell\" colspan=\"2\"><strong class=\"govuk-!-font-size-27\">-</strong></td>\n </tr>\n\n <tr class=\"govuk-table__row govuk-character-count\" data-module=\"govuk-character-count\" data-maxwords=\"400\">\n <td class=\"govuk-table__cell\">\n <label class=\"govuk-label govuk-label--s\" for=\"input-formulaSubtract\">\n This is the thing to subtract\n </label>\n </td>\n <td class=\"govuk-table__cell\">\n <textarea\n class=\"govuk-textarea govuk-js-character-count\"\n id=\"input-formulaSubtract\"\n name=\"formulaSubtract\"\n rows=\"3\" aria-describedby=\"input-formulaSubtract-info\" ></textarea>\n <div id=\"input-formulaSubtract-info\" class=\"govuk-hint govuk-character-count__message\">\n You can enter up to 400 words\n</div>\n </td>\n </tr><tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell\" colspan=\"2\"><strong class=\"govuk-!-font-size-27\">+</strong></td>\n </tr>\n\n <tr class=\"govuk-table__row govuk-character-count\" data-module=\"govuk-character-count\" data-maxwords=\"300\">\n <td class=\"govuk-table__cell\">\n <label class=\"govuk-label govuk-label--s\" for=\"input-formulaAdd2\">\n This is another thing to add\n </label>\n </td>\n <td class=\"govuk-table__cell\">\n <textarea\n class=\"govuk-textarea govuk-js-character-count\"\n id=\"input-formulaAdd2\"\n name=\"formulaAdd2\"\n rows=\"3\" aria-describedby=\"input-formulaAdd2-info\" ></textarea>\n <div id=\"input-formulaAdd2-info\" class=\"govuk-hint govuk-character-count__message\">\n You can enter up to 300 words\n</div>\n </td>\n </tr><tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell\" colspan=\"2\"><strong class=\"govuk-!-font-size-27\">-</strong></td>\n </tr>\n\n <tr class=\"govuk-table__row govuk-character-count\" data-module=\"govuk-character-count\" data-maxwords=\"200\">\n <td class=\"govuk-table__cell\">\n <label class=\"govuk-label govuk-label--s\" for=\"input-formulaSubtract2\">\n This is another thing to subtract\n </label>\n </td>\n <td class=\"govuk-table__cell\">\n <textarea\n class=\"govuk-textarea govuk-js-character-count\"\n id=\"input-formulaSubtract2\"\n name=\"formulaSubtract2\"\n rows=\"3\" aria-describedby=\"input-formulaSubtract2-info\" ></textarea>\n <div id=\"input-formulaSubtract2-info\" class=\"govuk-hint govuk-character-count__message\">\n You can enter up to 200 words\n</div>\n </td>\n </tr></tbody>\n </table>\n\n</fieldset>"
}
]
}