Pages Question
Overview
Use question pages to ask users for information or data.
Questions do not have to be mandatory, this depends on the survey and what data is essential.
Example: Question without a fieldset contents
Nunjucks
{% extends "layout/_template.njk" %}
{% from "components/question/_macro.njk" import onsQuestion %}
{% from "components/input/_macro.njk" import onsInput %}
{%
set pageConfig = {
"header": {
"title": "Question example"
},
"breadcrumbs": {
"ariaLabel": 'Breadcrumbs',
"itemsList": [
{
"url": '#0',
"text": 'Previous'
}
]
}
}
%}
{% block main %}
{%
call onsQuestion({
"title": "How many visitors are staying overnight at 3 Severn Road on 13 May 2019?",
"description": "<p>Enter “0” if there are no visitors staying overnight</p>",
"justification": {
"title": "Why we ask this question",
"content": "<p>Visitor information is collected to ensure that everyone is counted, in order to produce accurate estimates of the population, to facilitate effective planning and funding decisions.</p>"
},
"submitButton": true
})
%}
{{
onsInput({
"id": "number-of-visitors",
"name": "number-of-visitors",
"type": "number",
"width": "2",
"label": {
"text": "Number of visitors"
}
})
}}
{% endcall %}
{% endblock %}
{% block scripts %}
{% from "components/embeddable/macro.njk" import embeddable %}
{{ embeddable() }}
<style>
body {
height: auto;
}
</style>
<script src="{{ site.baseUrl }}js/main.js?t={{ cacheTime }}"></script>
{% endblock %}
Nunjucks macro options
Name | Type | Required | Description |
---|---|---|---|
title | string | true | The question heading |
description | string | false | The question description to be used to provide added context to the question. This can contain HTML. |
instruction | string | false | An interviewer instruction. This can contain HTML. |
warning | <Object>WarningPanel | false | Settings for the WarningPanel to be used when a warning message is required |
definition | <Object>QuestionDefinition | false | Settings for the question definition to be used to define a word or acronym that is in the question |
guidance | <Object>QuestionGuidance | false | Settings for the question guidance to be used to state what should be included or excluded from the answer |
justification | <Object>QuestionJustification | false | Settings for the question justification to be used to explain why a question is being asked |
submitButton | <Object>SubmitButton or boolean | false | Settings for the submit button. If a value of true is provided, default attributes will be used. |
id | string | false | The HTML id for the component |
classes | string | false | Classes to add the component |
attributes | object | false | HTML attributes (for example, data attributes) to add to the component |
readDescriptionFirst | boolean | false | Set to “true” to make screen readers read out question description first. Used in the relationships pattern where the description instructs the user to complete the sentence in the heading. |
legendIsQuestionTitle | boolean | true (unless legend is set) | Creates an h1 inside the legend . Use when there is only a single fieldset on the page |
legendClasses | string | false | Classes to apply to the HTML legend element when using legendIsQuestionTitle |
legendTitleClasses | string | false | Classes to apply to the h1 heading element when using legendIsQuestionTitle |
Name | Type | Required | Description |
---|---|---|---|
id | string | true | The HTML id of the question definition details |
title | string | true | The title of the question definition details |
content | string | true | The content of the question definition details. This can contain HTML. |
Name | Type | Required | Description |
---|---|---|---|
content | string | false | The contents of the question guidance panel. This can contain HTML. |
lists | Array<GuidanceLists> | false | An array of lists with sub-headings used to state what should be included or excluded from the answer |
Name | Type | Required | Description |
---|---|---|---|
listHeading | string | false | A heading for each include/exclude list |
listLeadingLine | string | false | A leading line for each list |
itemsList | List (ref) | true | An array of list items for each list |
Name | Type | Required | Description |
---|---|---|---|
id | string | true | The HTML id of the question justification details |
title | string | false | The title of the question justification details. Defaults to “Why we ask this question”. |
content | string | true | The content of the question definition details. This can contain HTML. |
Name | Type | Required | Description |
---|---|---|---|
id | string | false | The HTML id of the button |
variants | string | false | If set to “timer” the button will be disabled for a short time to stop double-clicks from submitting the form twice. Setting to “loader” will disable the button when selected and show an animated loading icon. |
text | string | false | Text for the button label. Defaults to “Save and continue”. |
classes | string | false | Classes to add the button element |
attributes | object | false | HTML attributes (for example, data attributes) to add to the button |
Name | Type | Required | Description |
---|---|---|---|
id | string | true | The HTML id of the Warning Panel |
body | string | true | The contents of the warning panel. This can contain HTML. |
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Example: Question without a fieldset</title>
<link rel="stylesheet" href="https://cdn.ons.gov.uk/sdc/design-system/72.0.1/css/main.css" />
<link rel="stylesheet" media="print" href="https://cdn.ons.gov.uk/sdc/design-system/72.0.1/css/print.css" />
<meta name="theme-color" content="#206095" />
<!-- Open Graph -->
<meta property="og:type" content="website" />
<meta property="og:url" content="" />
<meta property="og:title" content="" />
<meta property="og:image" content="https://cdn.ons.gov.uk/sdc/design-system/72.0.1/favicons/opengraph.png" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:description" content="" />
<meta property="og:site_name" content="Question example" />
<meta property="og:locale" content="en" />
<!-- Favicons -->
<link rel="icon" type="image/x-icon" href="https://cdn.ons.gov.uk/sdc/design-system/72.0.1/favicons/favicon.ico" />
<link rel="icon" type="image/png" href="https://cdn.ons.gov.uk/sdc/design-system/72.0.1/favicons/favicon-32x32.png"
sizes="32x32" />
<link rel="icon" type="image/png" href="https://cdn.ons.gov.uk/sdc/design-system/72.0.1/favicons/favicon-16x16.png"
sizes="16x16" />
<link rel="mask-icon" href="https://cdn.ons.gov.uk/sdc/design-system/72.0.1/favicons/safari-pinned-tab.svg"
color="#000000" />
<link rel="apple-touch-icon" type="image/png"
href="https://cdn.ons.gov.uk/sdc/design-system/72.0.1/favicons/apple-touch-icon.png" sizes="180x180" />
<link rel="manifest" href="https://cdn.ons.gov.uk/sdc/design-system/72.0.1/favicons/manifest.json" />
</head>
<body>
<!-- prettier-ignore-start -->
<script>
document.body.className = ((document.body.className) ? document.body.className + ' ons-js-enabled' :
'ons-js-enabled');
</script>
<!-- prettier-ignore-end -->
<div class="ons-page">
<div class="ons-page__content">
<a class="ons-skip-to-content" href="#main-content">Skip to main content</a>
<header class="ons-header" role="banner">
<div class="ons-browser-banner">
<div class="ons-container">
<p class="ons-browser-banner__content">
<span class="ons-browser-banner__lead">This website no longer supports your browser.</span><span
class="ons-browser-banner__cta"> You can <a class="ons-browser-banner__link"
href="https://www.ons.gov.uk/help/browsers">upgrade your browser to the latest version</a>.</span>
</p>
</div>
</div>
<div class="ons-header__top">
<div class="ons-container">
<div
class="ons-header__grid-top ons-grid ons-grid-flex ons-grid-flex--between ons-grid-flex--vertical-center ons-grid-flex--no-wrap ons-grid--gutterless">
<div class="ons-grid__col ons-col-auto">
<div class="ons-header__org-logo ons-header__org-logo--large">
<svg class="ons-icon--logo" xmlns="http://www.w3.org/2000/svg" width="208" height="20"
viewBox="33 2 552 60" aria-labelledby="ons-logo-en-alt" role="img">
<title id="ons-logo-en-alt"> Office for National Statistics homepage </title>
<g class="ons-icon--logo__group ons-icon--logo__group--secondary" fill="#a8bd3a">
<path
d="M0,34.6c.8-1.69,1.39-3,2.32-4.6A38.28,38.28,0,0,1,0,23.4V34.6M5,3S0,3,0,9.25v1A62.12,62.12,0,0,0,4.2,27a43.77,43.77,0,0,1,9.42-10.79C21.69,9.21,31.16,5.13,45.9,3Z" />
</g>
<g class="ons-icon--logo__group ons-icon--logo__group--primary" fill="#003c57">
<path
d="M53.06,6.42C36.2,8,24.68,12.92,16.43,20.07A41.46,41.46,0,0,0,6.4,32.2C12.87,44.93,28.88,57,46.6,57H47s6.32.21,6.32-6.91V6.36a1.22,1.22,0,0,1-.26.06M9.72,42.67a44.25,44.25,0,0,1-5-7.42A80.59,80.59,0,0,0,0,46.38V56.91L31.06,57c-9.83-3-15.74-7.64-21.34-14.3" />
</g>
<g class="ons-icon--logo__group ons-icon--logo__group--text" fill="#003c57">
<path
d="M82,47.49c-9.07,0-13.13-7.51-13.13-16.77S72.91,14,82,14s13.1,7.61,13.1,16.77S91.1,47.54,82,47.54m0-30.91c-6.69,0-9.07,7.33-9.07,14.05s2.16,13.9,9.07,13.9,9-7.28,9-13.9-2.34-14-9-14" />
<path
d="M106.36,23.81V46.88h-3.67V23.81H98.93V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.38,0,.86.05.86.05v2.35h-.43c-2.55,0-4.84,1.64-4.84,5.12v4.09h5.27v2.25Z" />
<path
d="M121.53,23.81V46.88h-3.67V23.81H114.1V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.38,0,.86.05.86.05v2.35h-.43c-2.55,0-4.84,1.64-4.84,5.12v4.09h5.27v2.25Z" />
<path
d="M132.85,16.72a2.28,2.28,0,0,1-2.33-2.23v0a2.34,2.34,0,0,1,4.67,0,2.28,2.28,0,0,1-2.3,2.26h0M131,21.56h3.71V46.88H131Z" />
<path
d="M150.53,47.49c-6,0-10.63-5.16-10.63-13.29S144.52,21,150.66,21a9.76,9.76,0,0,1,6.17,1.74l-1,2.25a7.53,7.53,0,0,0-4.4-1.36c-5.15,0-7.78,4.46-7.78,10.48,0,6.2,3,10.62,7.65,10.62a8,8,0,0,0,4.49-1.37l1,2.45a10.21,10.21,0,0,1-6.3,1.73" />
<path
d="M162.84,35.75c.48,6,3.76,9,8.9,9a14.66,14.66,0,0,0,6.88-1.55l1.08,2.59a18,18,0,0,1-8.22,1.73c-7.12,0-12.18-4.23-12.18-13.34,0-8.69,4.67-13.2,11-13.2s10.37,3.95,10.37,12.4Zm7.35-12.41c-4.1,0-7.56,3.2-7.52,10.29l14.39-2c0-5.87-2.81-8.32-6.87-8.32" />
<path
d="M198.57,23.81V46.88H194.9V23.81h-3.76V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.39,0,.87.05.87.05v2.35h-.44c-2.54,0-4.84,1.64-4.84,5.12v4.09h5.28v2.25Z" />
<path
d="M217.28,47.49c-7.47,0-10.89-5.78-10.89-13.24S209.81,21,217.28,21s10.85,5.82,10.85,13.3-3.37,13.24-10.85,13.24m0-24c-5.53,0-7.13,5.59-7.13,10.81s1.73,10.56,7.13,10.56,7.13-5.35,7.13-10.56-1.6-10.81-7.13-10.81" />
<path
d="M244.08,23.91c-2.34-.61-5.75-.52-7.35.47v22.5H233V22.69c2.67-1.13,5.36-1.74,10.11-1.74H245Z" />
<path
d="M277.42,47.13,263.07,25a32.2,32.2,0,0,1-1.85-3.29h-.09s.13,1.88.13,3.85V47.13h-4.71V14.8h5.31l13.61,20.82A28.76,28.76,0,0,1,277.38,39h.08s-.17-1.84-.17-3.77V14.8H282V47.13Z" />
<path
d="M297.52,47.79c-7.43,0-10.93-3-10.93-7.81,0-6.8,7.12-8.64,15.59-9.39V29.13c0-3.47-2.37-4.51-5.83-4.51a18,18,0,0,0-6.87,1.46L288.23,23a24,24,0,0,1,9.12-1.83c5.61,0,9.93,2.3,9.93,8.78V46a22.71,22.71,0,0,1-9.76,1.83m4.66-14.67c-6.26.67-10.45,1.84-10.45,6.73,0,3.42,2.42,4.88,6.22,4.88a10.09,10.09,0,0,0,4.23-.84Z" />
<path
d="M322,47.69c-5.31,0-7.34-3.43-7.34-6.86V25.09h-3.55V21.81h3.55V16.12l5.4-1.5v7.19H325v3.28h-5V40.55a3.26,3.26,0,0,0,3,3.52h.5a5.5,5.5,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
<path
d="M331.91,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.44V47.13h-5.44Z" />
<path
d="M350.88,47.79c-7.73,0-11.57-5.74-11.57-13.3s3.84-13.34,11.57-13.34,11.54,5.78,11.54,13.34-3.8,13.3-11.54,13.3m0-23.17c-4.66,0-6.05,4.89-6.05,9.82s1.47,9.63,6.05,9.63,6.05-4.7,6.05-9.63-1.38-9.82-6.05-9.82" />
<path
d="M382.52,47.13V29c0-3.24-2.77-4.47-5.88-4.47a12.3,12.3,0,0,0-4.37.76v21.8h-5.39V23a26.81,26.81,0,0,1,10.06-1.83c6.61,0,11,2.25,11,7.8V47.13Z" />
<path
d="M403.18,47.79c-7.43,0-10.94-3-10.94-7.81,0-6.8,7.13-8.64,15.6-9.39V29.13c0-3.47-2.37-4.51-5.83-4.51a18,18,0,0,0-6.87,1.46L393.89,23A24,24,0,0,1,403,21.15c5.62,0,9.94,2.3,9.94,8.78V46a22.71,22.71,0,0,1-9.76,1.83m4.66-14.67c-6.27.67-10.46,1.84-10.46,6.73,0,3.42,2.43,4.88,6.23,4.88a10.09,10.09,0,0,0,4.23-.84Z" />
<polygon
points="418.52 47.13 418.52 34.91 418.52 10.25 423.92 10.25 423.92 22.76 423.92 47.13 418.52 47.13" />
<path
d="M445.39,47.79A19.11,19.11,0,0,1,436.58,46l1.51-4a13.48,13.48,0,0,0,6.22,1.55c3.76,0,6.44-2.21,6.44-5.41,0-7.09-13.44-4.36-13.44-14.42,0-5.13,4.15-9.59,10.72-9.59A15.82,15.82,0,0,1,455.8,16l-1.38,3.52a11.93,11.93,0,0,0-5.66-1.5c-3.5,0-5.79,2.11-5.79,5.12,0,7,13.74,3.94,13.74,14.65,0,5.74-4.71,10-11.32,10" />
<path
d="M470.41,47.69c-5.31,0-7.34-3.43-7.34-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.92v3.28h-4.92V40.55a3.27,3.27,0,0,0,3,3.52h.48a5.12,5.12,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
<path
d="M487.27,47.79c-7.44,0-10.93-3-10.93-7.81,0-6.8,7.13-8.64,15.6-9.39V29.13c0-3.47-2.38-4.51-5.84-4.51a18,18,0,0,0-6.87,1.46L478,23a23.94,23.94,0,0,1,9.11-1.83c5.62,0,9.94,2.3,9.94,8.78V46a22.71,22.71,0,0,1-9.76,1.83M492,33.16c-6.27.67-10.46,1.84-10.46,6.73,0,3.42,2.42,4.88,6.22,4.88a10,10,0,0,0,4.24-.84Z" />
<path
d="M511.73,47.69c-5.32,0-7.35-3.43-7.35-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.92v3.28h-4.92V40.55a3.26,3.26,0,0,0,3,3.52h.5a5.5,5.5,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
<path
d="M521.66,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.45V47.13h-5.45Z" />
<path
d="M536.19,47.79A15.9,15.9,0,0,1,528.54,46L530,42.48a10.53,10.53,0,0,0,5.52,1.5c2.77,0,5-1.78,5-3.94,0-6-11.1-3.2-11.1-11.47,0-3.76,3.37-7.42,8.86-7.42A13.56,13.56,0,0,1,545.34,23l-1.42,3.14a8.47,8.47,0,0,0-4.62-1.45c-2.81,0-4.54,1.69-4.54,3.62,0,5.64,11.32,3.14,11.32,11.6,0,4-3.85,7.9-9.89,7.9" />
<path
d="M559.83,47.69c-5.31,0-7.35-3.43-7.35-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.93v3.28h-4.93V40.55a3.27,3.27,0,0,0,3,3.52h.48a5.64,5.64,0,0,0,1.47-.23v3.33a7.72,7.72,0,0,1-3,.52" />
<path
d="M569.77,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.44V47.13h-5.44Z" />
<path
d="M588.14,47.79c-6.23,0-11-5.08-11-13.35s4.88-13.29,11-13.29A10.51,10.51,0,0,1,594.66,23l-1.21,3a6.87,6.87,0,0,0-4-1.22c-4.4,0-6.69,3.81-6.69,9.49s2.63,9.59,6.61,9.59a6.74,6.74,0,0,0,4-1.28L594.7,46c-1.12.94-3.33,1.84-6.56,1.84" />
<path
d="M605.1,47.79A15.9,15.9,0,0,1,597.45,46l1.42-3.47A10.54,10.54,0,0,0,604.4,44c2.77,0,5-1.78,5-3.94,0-6-11.1-3.2-11.1-11.47,0-3.76,3.37-7.42,8.85-7.42a13.49,13.49,0,0,1,7.1,1.83l-1.42,3.14a8.42,8.42,0,0,0-4.63-1.45c-2.8,0-4.53,1.69-4.53,3.62,0,5.64,11.32,3.14,11.32,11.6,0,4-3.85,7.9-9.89,7.9" />
</g>
</svg>
</div>
<div class="ons-header__org-logo ons-header__org-logo--small">
<svg class="ons-icon--logo" xmlns="http://www.w3.org/2000/svg" width="120" height="27"
viewBox="0 5 595 116" aria-labelledby="ons-logo-stacked-en-alt" role="img">
<title id="ons-logo-stacked-en-alt"> Office for National Statistics logo </title>
<g class="ons-icon--logo__group ons-icon--logo__group--secondary" fill="#a8bd3a">
<path
d="M0,70.5c1.8-3.7,3.6-7.2,5.6-10.7A127.94,127.94,0,0,1,0,42.6V70.5M10.9,0S0,0,0,13.5v7.2A128.06,128.06,0,0,0,7.9,56.2a114.75,114.75,0,0,1,22.3-26C47.8,15.1,71.5,4.7,103.7.1Z" />
</g>
<g class="ons-icon--logo__group ons-icon--logo__group--primary" fill="#003c57">
<path
d="M115.9,7.3c-36.8,3.5-62,14-80,29.4a108.15,108.15,0,0,0-23.6,29c14.1,27.4,41.1,47.6,86,50.5h4.4s13.8.5,13.8-14.9V7.2l-.6.1M21.2,85.4a92.68,92.68,0,0,1-11-16A173,173,0,0,0,0,93.4v22.7l73.6.1c-22.9-5.5-40.1-16.4-52.4-30.8" />
</g>
<g class="ons-icon--logo__group ons-icon--logo__group--text" fill="#003c57">
<path
d="M161,51.9c-11.3,0-16.3-9.3-16.3-20.8s5-20.8,16.3-20.8,16.3,9.5,16.3,20.8c-.1,11.5-5.1,20.8-16.3,20.8m0-38.3c-8.3,0-11.3,9.1-11.3,17.4s2.7,17.3,11.3,17.3,11.2-9.1,11.2-17.3S169.3,13.6,161,13.6m30.2,8.9V51.2h-4.5V22.6H182V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8l-6.7-.1Zm18.9,0V51.2h-4.5V22.6h-4.7V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8l-6.7-.1Zm14-8.8a2.82,2.82,0,0,1-2.9-2.8,2.9,2.9,0,0,1,5.8,0,2.76,2.76,0,0,1-2.9,2.8m-2.3,6h4.6V51.2h-4.6Zm24.3,32.2c-7.4,0-13.2-6.4-13.2-16.5,0-10.3,5.8-16.5,13.4-16.5a12.36,12.36,0,0,1,7.7,2.2l-1.2,2.8a8.92,8.92,0,0,0-5.5-1.7c-6.4,0-9.7,5.5-9.7,13,0,7.7,3.7,13.2,9.5,13.2a9.8,9.8,0,0,0,5.6-1.7l1.2,3c-1.3,1.2-4,2.2-7.8,2.2m15.3-14.6c.6,7.4,4.7,11.1,11.1,11.1a18.36,18.36,0,0,0,8.5-1.9l1.3,3.2a22.58,22.58,0,0,1-10.2,2.1c-8.8,0-15.1-5.3-15.1-16.6,0-10.8,5.8-16.4,13.7-16.4s12.9,4.9,12.9,15.4l-22.2,3.1ZM270.5,22c-5.1,0-9.4,4-9.3,12.8l17.9-2.5C279,25,275.5,22,270.5,22m42.2.5V51.2h-4.5V22.6h-4.7V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8Zm23.2,29.4c-9.3,0-13.5-7.2-13.5-16.5s4.2-16.5,13.5-16.5,13.5,7.2,13.5,16.5-4.2,16.5-13.5,16.5m0-29.8c-6.9,0-8.8,7-8.8,13.4s2.1,13.1,8.8,13.1c6.9,0,8.9-6.6,8.9-13.1s-2-13.4-8.9-13.4m33.3.6c-2.9-.8-7.1-.6-9.1.6V51.2h-4.6V21.1c3.3-1.4,6.6-2.2,12.5-2.2h2.4c0,.1-1.2,3.8-1.2,3.8ZM171.3,114.8,153.5,87.3c-1.3-2.1-2.3-4.1-2.3-4.1h-.1s.2,2.3.2,4.8v26.8h-5.8V74.7h6.6L169,100.5a46.13,46.13,0,0,1,2.4,4.1h.1s-.2-2.3-.2-4.7V74.6h5.9v40.1l-5.9.1Zm25,.8c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.8-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8l-1.6-3.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.7,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm24.5,18.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2c0,2.5,1.4,4.4,4.3,4.4a5.66,5.66,0,0,0,1.8-.3v4.1a11.47,11.47,0,0,1-3.7.6M239,77.9a3.52,3.52,0,1,1,3.9-3.5,3.71,3.71,0,0,1-3.9,3.5m-3.4,5.5h6.8v31.4h-6.8Zm26.9,32.2c-9.6,0-14.4-7.1-14.4-16.5s4.8-16.6,14.4-16.6,14.3,7.2,14.3,16.6-4.7,16.5-14.3,16.5m0-28.7c-5.8,0-7.5,6.1-7.5,12.2s1.8,11.9,7.5,11.9,7.5-5.8,7.5-11.9-1.7-12.2-7.5-12.2m39.3,27.9V92.3c0-4-3.4-5.5-7.3-5.5a16,16,0,0,0-5.4.9v27.1h-6.7v-30a32.8,32.8,0,0,1,12.5-2.3c8.2,0,13.7,2.8,13.7,9.7v22.6Zm25.7.8c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.9-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8L316,84.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.7,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm13.2,17.4V69h6.7v45.8Zm38.6.8a23.94,23.94,0,0,1-10.9-2.3l1.9-4.9a17,17,0,0,0,7.7,1.9c4.7,0,8-2.7,8-6.7,0-8.8-16.7-5.4-16.7-17.9,0-6.4,5.2-11.9,13.3-11.9a20.22,20.22,0,0,1,9.7,2.3l-1.7,4.4a14.57,14.57,0,0,0-7-1.9c-4.3,0-7.2,2.6-7.2,6.4,0,8.6,17.1,4.9,17.1,18.2-.1,7.1-6,12.4-14.2,12.4m31.1-.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2a4.07,4.07,0,0,0,4.3,4.4,5.66,5.66,0,0,0,1.8-.3v4.1a12.06,12.06,0,0,1-3.7.6m20.9.1c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.9-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8l-1.6-3.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.6,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm24.6,18.1c-6.6,0-9.1-4.3-9.1-8.5V87.5H454V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2a4.07,4.07,0,0,0,4.3,4.4,5.66,5.66,0,0,0,1.8-.3v4.1a12.69,12.69,0,0,1-3.7.6m12.3-37.6a3.52,3.52,0,1,1,3.9-3.5,3.65,3.65,0,0,1-3.9,3.5m-3.4,5.5h6.8v31.4h-6.8Zm21.4,32.2a19.46,19.46,0,0,1-9.5-2.3l1.8-4.3a13.21,13.21,0,0,0,6.9,1.9c3.4,0,6.2-2.2,6.2-4.9,0-7.5-13.8-4-13.8-14.2,0-4.7,4.2-9.2,11-9.2a16.21,16.21,0,0,1,8.8,2.3l-1.8,3.9a10.31,10.31,0,0,0-5.7-1.8c-3.5,0-5.6,2.1-5.6,4.5,0,7,14,3.9,14,14.4,0,4.9-4.7,9.7-12.3,9.7m29.4-.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2c0,2.5,1.4,4.4,4.3,4.4a5.66,5.66,0,0,0,1.8-.3v4.1a12.06,12.06,0,0,1-3.7.6m12.3-37.6a3.52,3.52,0,1,1,3.9-3.5c.1,2-1.7,3.5-3.9,3.5m-3.3,5.5H543v31.4h-6.8Zm26.2,32.2c-7.7,0-13.6-6.3-13.6-16.6s6.1-16.5,13.7-16.5c3.9,0,6.6,1.1,8,2.3L569,88.6a8.61,8.61,0,0,0-4.9-1.5c-5.5,0-8.3,4.7-8.3,11.8s3.3,11.9,8.2,11.9a8.39,8.39,0,0,0,4.9-1.6l1.7,4.1c-1.5,1.2-4.2,2.3-8.2,2.3m20.6,0a19.46,19.46,0,0,1-9.5-2.3l1.8-4.3a13.21,13.21,0,0,0,6.9,1.9c3.4,0,6.2-2.2,6.2-4.9,0-7.5-13.8-4-13.8-14.2,0-4.7,4.2-9.2,11-9.2a16.85,16.85,0,0,1,8.9,2.3l-1.8,3.9A10.31,10.31,0,0,0,587,87c-3.5,0-5.6,2.1-5.6,4.5,0,7,14,3.9,14,14.4-.1,4.9-4.9,9.7-12.4,9.7" />
</g>
</svg>
</div>
</div>
</div>
</div>
</div>
<div class="ons-header__main">
<div class="ons-container">
<div
class="ons-grid ons-grid-flex ons-grid-flex--between ons-grid-flex--vertical-center ons-grid-flex--no-wrap ons-grid--gutterless">
<div class="ons-grid__col ons-col-auto ons-u-flex-shrink">
<div class="ons-header__title">Question example</div>
</div>
</div>
</div>
</div>
</header>
<div class="ons-page__container ons-container">
<nav class="ons-breadcrumbs" aria-label="Breadcrumbs">
<ol class="ons-breadcrumbs__items ons-u-fs-s">
<li class="ons-breadcrumbs__item" id="breadcrumb-1">
<a class="ons-breadcrumbs__link" href="#0">Previous</a><svg class="ons-icon" viewBox="0 0 8 13"
xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor" role="img"
title="ons-icon-chevron">
<path
d="M5.74,14.28l-.57-.56a.5.5,0,0,1,0-.71h0l5-5-5-5a.5.5,0,0,1,0-.71h0l.57-.56a.5.5,0,0,1,.71,0h0l5.93,5.93a.5.5,0,0,1,0,.7L6.45,14.28a.5.5,0,0,1-.71,0Z"
transform="translate(-5.02 -1.59)" />
</svg>
</li>
</ol>
</nav>
<div class="ons-grid">
<div class="ons-grid__col ons-col-12@m ">
<main id="main-content" class="ons-page__main ">
<div class="ons-question ons-u-mb-xl">
<h1 id="question-title" class="ons-question__title">How many visitors are staying overnight at 3
Severn Road on 13 May 2019?</h1>
<div class="ons-question__description ons-u-mb-l">
<p>Enter “0” if there are no visitors staying overnight</p>
</div>
<div class="ons-question__answer ons-u-mb-l">
<div class="ons-field">
<label class="ons-label" for="number-of-visitors">Number of visitors</label>
<input type="text" id="number-of-visitors"
class="ons-input ons-input--text ons-input-type__input ons-input-number--w-2"
name="number-of-visitors" pattern="[0-9]*" inputmode="numeric" />
</div>
</div>
<div id="" class="ons-details ons-js-details ons-u-mb-l">
<div class="ons-details__heading ons-js-details-heading" role="button">
<h2 class="ons-details__title ons-u-fs-r--b">Why we ask this question</h2>
<span class="ons-details__icon">
<svg class="ons-icon" viewBox="0 0 8 13" xmlns="http://www.w3.org/2000/svg" focusable="false"
fill="currentColor" role="img" title="ons-icon-chevron">
<path
d="M5.74,14.28l-.57-.56a.5.5,0,0,1,0-.71h0l5-5-5-5a.5.5,0,0,1,0-.71h0l.57-.56a.5.5,0,0,1,.71,0h0l5.93,5.93a.5.5,0,0,1,0,.7L6.45,14.28a.5.5,0,0,1-.71,0Z"
transform="translate(-5.02 -1.59)" />
</svg></span>
</div>
<div id="-content" class="ons-details__content ons-js-details-content">
<p>Visitor information is collected to ensure that everyone is counted, in order to produce
accurate estimates of the population, to facilitate effective planning and funding decisions.
</p>
</div>
</div>
</div>
<button type="submit" class="ons-btn">
<span class="ons-btn__inner"><span class="ons-btn__text">Save and continue</span></span>
</button>
</main>
</div>
</div>
</div>
</div>
</div>
<!-- prettier-ignore-start -->
<script>
(function() {
var s = ['https://cdn.ons.gov.uk/sdc/design-system/72.0.1/scripts/main.js'],
c = document.createElement('script');
if (!('noModule' in c)) {
for (var i = 0; i < s.length; i++) {
s[i] = s[i].replace('.js', '.es5.js');
}
}
for (var i = 0; i < s.length; i++) {
var e = document.createElement('script');
e.src = s[i];
document.body.appendChild(e);
}
})();
</script>
<!-- prettier-ignore-end -->
<div class="embeddable"></div>
<style>
body {
height: auto;
}
</style>
<script src="/js/main.js?t=1732268687213"></script>
</body>
</html>
When not to use this pattern
Do not use this pattern for any pages that are not asking for information.
To introduce a survey of provide guidance that applies to all the questions in a survey, use a survey introduction page.
To provide guidance that applies to an entire section of questions, use a survey section introduction page.
To separate question pages in a repeating section, use a survey interstitial page.
How this pattern works
A question page can be built using the question macro onsQuestion().
Use the parameters in this example to build the common question elements. This will make sure they are used correctly and the spacing is consistent across all questions.
You need to import an applicable component for the type of answer you want a user to enter. For example, an input [LINK] or checkboxes [LINK].
How to use this pattern
Only present one question per page in a survey.
To make sure your question page is clearly written and accessible,it should follow the ONS style guide.
Keep your content short so users do not get overwhelmed and can continue their journey without interruption.
Question headings
The question heading should always be a <h1>
.
Most question headings end with a question mark. If they are a statement, do not include a full stop at the end. For example:
“How has your turnover changed in the 12 months?”
and
“Please describe any changes to your turnover in more detail”
Headings should always adhere to ONS style guidance on headings.
If a question is similar to the previous question, mark the changes using highlighting.
Question description (optional)
Use a question description to add context to a survey question. For example, an instruction on how to answer it.
It should not be used unless there is evidence that users need it to help them answer.
Question descriptions should be relevant to that question only. They must not refer to any previous or upcoming questions.
You can use bold for important words and short phrases in the question description. Do not overuse bold text as this will reduce its impact.
A question description should have a full stop at the end only if there is more than one sentence.
Question definition (optional)
Use a question definition to define a word or acronym that is in the question.
Only use one question description on a page and display it above where you want the user to provide their answer.
As a question definition should not be needed by all users, it should be displayed in a details component.
If the definition will be needed by all users, you should rephrase the question so that it is more user friendly.
Write the details title as a statement rather than a question, for example:
“What we mean by “employee””
rather than
“What does “employee” mean?”
Question guidance (optional)
Use question guidance panels to give the user extra information that they need to answer a question. For example, what they should include or not include in their answer.
Question guidance is provided in an information panel [LINK].
Use bold to format the “include” and “exclude” content that introduces an ordered list.
If there is only one item to “include” or “exclude”, format this as a single sentence without bold text or bullet points.
Example Panel With Information contents
Nunjucks
{% from "components/panel/_macro.njk" import onsPanel %}
{{
onsPanel({
"body": '<p>Include all rooms built or converted for use as bedrooms</p>'
})
}}
Nunjucks macro options
Name | Type | Required | Description |
---|---|---|---|
body | string | true | The contents of the panel. This can contain HTML. |
title | string | false | The title for the error summary panel |
headingLevel | int | false | Number used to determine the heading level of the title. Use to ensure the title has a correct semantic order on the page. Defaults to 2 |
type | string | false | A single value to adjust the component using available variants: “success”, “warn”, “ghost”, “bare”, “error”, “branded”, “warn-branded”, and “announcement” |
spacious | boolean | false | Set to “true” to double the padding spacing surrounding the body content if required |
classes | string | false | Custom classes to add to the panel |
id | string | false | The HTML id for the panel |
attributes | object | false | HTML attributes to apply to the panel (for example, data attributes) |
assistiveTextPrefix | string | false | Sets the visually hidden prefix text for screen readers. Default values for each panel type:
|
iconType | string | false | Adds an icon to the panel, before the body content, by setting the icon type |
iconSize | string | false | Icon size can be set to match the size of the body content text as detailed in the typography type scale |
HTML
<div class="ons-panel ons-panel--info ons-panel--no-title">
<span class="ons-panel__assistive-text ons-u-vh">Important information: </span>
<div class="ons-panel__body">
<p>Include all rooms built or converted for use as bedrooms</p>
</div>
</div>
Answers and answer descriptions
Answers and answer descriptions, such as inputs and their descriptions, should be kept short to avoid overwhelming users.
Only use full stops on answers or answer descriptions if they are longer than one sentence.
Question justification (optional)
Use a question justification to explain why a question is being asked.
Only use a question justification if there is evidence that users want to know this.
A question justification is positioned at the bottom of the page and uses the details component.
The details title should be written as a sentence rather than a question, for example:
“Why we ask this question”
Rather than
“Why do we ask this question?”
Variants
Answer fields wrapped in a fieldset with legend
On some answer fields, you need to provide context to a screen reader about what is being asked. To do this, wrap the answer field using a fieldset with a legend.
Example: Question as a fieldset contents
Nunjucks
{% extends "layout/_template.njk" %}
{% from "components/question/_macro.njk" import onsQuestion %}
{% from "components/radios/_macro.njk" import onsRadios %}
{%
set pageConfig = {
"header": {
"title": "Question example"
},
"breadcrumbs": {
"ariaLabel": 'Breadcrumbs',
"itemsList": [
{
"url": '#0',
"text": 'Previous'
}
]
}
}
%}
{% set questionTitle = "On 1 May 2016, what was the number of employees for Bolt and Ratchet?" %}
{% block main %}
{%
call onsQuestion({
"title": questionTitle,
"description": "<p>This is all employees aged 16 years or over that your organisation employs</p>",
"definition": {
"title": "What we mean by “employee”",
"content": "<p>An employee is a person that your organisation directly pays from its payroll(s), in return for carrying out a full-time or part-time job</p>"
},
"guidance": {
"lists": [
{
"listHeading": "Include:",
"itemsList": [
{
"text": "all employees in Great Britain (England, Scotland and Wales), both full and part-time, who received pay in the relevant period"
}
]
},
{
"listHeading": "Exclude:",
"itemsList": [
{
"text": "trainees on government schemes"
},
{
"text": "employees working abroad unless paid directly from this business’s GB payroll"
}
]
}
]
},
"justification": {
"title": "Why we ask this question",
"content": "<p>We ask this question in order to understand the size of organisations in the UK</p>"
},
"submitButton": true
})
%}
{{
onsRadios({
"id": "number-of-employees",
"name": "number-of-employees",
"legend": questionTitle,
"legendClasses": "ons-u-vh",
"radios": [
{
"id": "number-of-employees-1-9",
"label": {
"text": "1 – 9 employees"
},
"value": "1-9"
},
{
"id": "number-of-employees-10-49",
"label": {
"text": "10 – 49 employees"
},
"value": "10-49"
},
{
"id": "number-of-employees-50-100",
"label": {
"text": "50 – 100+ employees",
"description": "Include multi-corporations"
},
"value": "50-100"
}
]
})
}}
{% endcall %}
{% endblock %}
{% block scripts %}
{% from "components/embeddable/macro.njk" import embeddable %}
{{ embeddable() }}
<style>
body {
height: auto;
}
</style>
<script src="{{ site.baseUrl }}js/main.js?t={{ cacheTime }}"></script>
{% endblock %}
Nunjucks macro options
Name | Type | Required | Description |
---|---|---|---|
title | string | true | The question heading |
description | string | false | The question description to be used to provide added context to the question. This can contain HTML. |
instruction | string | false | An interviewer instruction. This can contain HTML. |
warning | <Object>WarningPanel | false | Settings for the WarningPanel to be used when a warning message is required |
definition | <Object>QuestionDefinition | false | Settings for the question definition to be used to define a word or acronym that is in the question |
guidance | <Object>QuestionGuidance | false | Settings for the question guidance to be used to state what should be included or excluded from the answer |
justification | <Object>QuestionJustification | false | Settings for the question justification to be used to explain why a question is being asked |
submitButton | <Object>SubmitButton or boolean | false | Settings for the submit button. If a value of true is provided, default attributes will be used. |
id | string | false | The HTML id for the component |
classes | string | false | Classes to add the component |
attributes | object | false | HTML attributes (for example, data attributes) to add to the component |
readDescriptionFirst | boolean | false | Set to “true” to make screen readers read out question description first. Used in the relationships pattern where the description instructs the user to complete the sentence in the heading. |
legendIsQuestionTitle | boolean | true (unless legend is set) | Creates an h1 inside the legend . Use when there is only a single fieldset on the page |
legendClasses | string | false | Classes to apply to the HTML legend element when using legendIsQuestionTitle |
legendTitleClasses | string | false | Classes to apply to the h1 heading element when using legendIsQuestionTitle |
Name | Type | Required | Description |
---|---|---|---|
id | string | true | The HTML id of the question definition details |
title | string | true | The title of the question definition details |
content | string | true | The content of the question definition details. This can contain HTML. |
Name | Type | Required | Description |
---|---|---|---|
content | string | false | The contents of the question guidance panel. This can contain HTML. |
lists | Array<GuidanceLists> | false | An array of lists with sub-headings used to state what should be included or excluded from the answer |
Name | Type | Required | Description |
---|---|---|---|
listHeading | string | false | A heading for each include/exclude list |
listLeadingLine | string | false | A leading line for each list |
itemsList | List (ref) | true | An array of list items for each list |
Name | Type | Required | Description |
---|---|---|---|
id | string | true | The HTML id of the question justification details |
title | string | false | The title of the question justification details. Defaults to “Why we ask this question”. |
content | string | true | The content of the question definition details. This can contain HTML. |
Name | Type | Required | Description |
---|---|---|---|
id | string | false | The HTML id of the button |
variants | string | false | If set to “timer” the button will be disabled for a short time to stop double-clicks from submitting the form twice. Setting to “loader” will disable the button when selected and show an animated loading icon. |
text | string | false | Text for the button label. Defaults to “Save and continue”. |
classes | string | false | Classes to add the button element |
attributes | object | false | HTML attributes (for example, data attributes) to add to the button |
Name | Type | Required | Description |
---|---|---|---|
id | string | true | The HTML id of the Warning Panel |
body | string | true | The contents of the warning panel. This can contain HTML. |
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Example: Question as a fieldset</title>
<link rel="stylesheet" href="https://cdn.ons.gov.uk/sdc/design-system/72.0.1/css/main.css" />
<link rel="stylesheet" media="print" href="https://cdn.ons.gov.uk/sdc/design-system/72.0.1/css/print.css" />
<meta name="theme-color" content="#206095" />
<!-- Open Graph -->
<meta property="og:type" content="website" />
<meta property="og:url" content="" />
<meta property="og:title" content="" />
<meta property="og:image" content="https://cdn.ons.gov.uk/sdc/design-system/72.0.1/favicons/opengraph.png" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:description" content="" />
<meta property="og:site_name" content="Question example" />
<meta property="og:locale" content="en" />
<!-- Favicons -->
<link rel="icon" type="image/x-icon" href="https://cdn.ons.gov.uk/sdc/design-system/72.0.1/favicons/favicon.ico" />
<link rel="icon" type="image/png" href="https://cdn.ons.gov.uk/sdc/design-system/72.0.1/favicons/favicon-32x32.png"
sizes="32x32" />
<link rel="icon" type="image/png" href="https://cdn.ons.gov.uk/sdc/design-system/72.0.1/favicons/favicon-16x16.png"
sizes="16x16" />
<link rel="mask-icon" href="https://cdn.ons.gov.uk/sdc/design-system/72.0.1/favicons/safari-pinned-tab.svg"
color="#000000" />
<link rel="apple-touch-icon" type="image/png"
href="https://cdn.ons.gov.uk/sdc/design-system/72.0.1/favicons/apple-touch-icon.png" sizes="180x180" />
<link rel="manifest" href="https://cdn.ons.gov.uk/sdc/design-system/72.0.1/favicons/manifest.json" />
</head>
<body>
<!-- prettier-ignore-start -->
<script>
document.body.className = ((document.body.className) ? document.body.className + ' ons-js-enabled' :
'ons-js-enabled');
</script>
<!-- prettier-ignore-end -->
<div class="ons-page">
<div class="ons-page__content">
<a class="ons-skip-to-content" href="#main-content">Skip to main content</a>
<header class="ons-header" role="banner">
<div class="ons-browser-banner">
<div class="ons-container">
<p class="ons-browser-banner__content">
<span class="ons-browser-banner__lead">This website no longer supports your browser.</span><span
class="ons-browser-banner__cta"> You can <a class="ons-browser-banner__link"
href="https://www.ons.gov.uk/help/browsers">upgrade your browser to the latest version</a>.</span>
</p>
</div>
</div>
<div class="ons-header__top">
<div class="ons-container">
<div
class="ons-header__grid-top ons-grid ons-grid-flex ons-grid-flex--between ons-grid-flex--vertical-center ons-grid-flex--no-wrap ons-grid--gutterless">
<div class="ons-grid__col ons-col-auto">
<div class="ons-header__org-logo ons-header__org-logo--large">
<svg class="ons-icon--logo" xmlns="http://www.w3.org/2000/svg" width="208" height="20"
viewBox="33 2 552 60" aria-labelledby="ons-logo-en-alt" role="img">
<title id="ons-logo-en-alt"> Office for National Statistics homepage </title>
<g class="ons-icon--logo__group ons-icon--logo__group--secondary" fill="#a8bd3a">
<path
d="M0,34.6c.8-1.69,1.39-3,2.32-4.6A38.28,38.28,0,0,1,0,23.4V34.6M5,3S0,3,0,9.25v1A62.12,62.12,0,0,0,4.2,27a43.77,43.77,0,0,1,9.42-10.79C21.69,9.21,31.16,5.13,45.9,3Z" />
</g>
<g class="ons-icon--logo__group ons-icon--logo__group--primary" fill="#003c57">
<path
d="M53.06,6.42C36.2,8,24.68,12.92,16.43,20.07A41.46,41.46,0,0,0,6.4,32.2C12.87,44.93,28.88,57,46.6,57H47s6.32.21,6.32-6.91V6.36a1.22,1.22,0,0,1-.26.06M9.72,42.67a44.25,44.25,0,0,1-5-7.42A80.59,80.59,0,0,0,0,46.38V56.91L31.06,57c-9.83-3-15.74-7.64-21.34-14.3" />
</g>
<g class="ons-icon--logo__group ons-icon--logo__group--text" fill="#003c57">
<path
d="M82,47.49c-9.07,0-13.13-7.51-13.13-16.77S72.91,14,82,14s13.1,7.61,13.1,16.77S91.1,47.54,82,47.54m0-30.91c-6.69,0-9.07,7.33-9.07,14.05s2.16,13.9,9.07,13.9,9-7.28,9-13.9-2.34-14-9-14" />
<path
d="M106.36,23.81V46.88h-3.67V23.81H98.93V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.38,0,.86.05.86.05v2.35h-.43c-2.55,0-4.84,1.64-4.84,5.12v4.09h5.27v2.25Z" />
<path
d="M121.53,23.81V46.88h-3.67V23.81H114.1V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.38,0,.86.05.86.05v2.35h-.43c-2.55,0-4.84,1.64-4.84,5.12v4.09h5.27v2.25Z" />
<path
d="M132.85,16.72a2.28,2.28,0,0,1-2.33-2.23v0a2.34,2.34,0,0,1,4.67,0,2.28,2.28,0,0,1-2.3,2.26h0M131,21.56h3.71V46.88H131Z" />
<path
d="M150.53,47.49c-6,0-10.63-5.16-10.63-13.29S144.52,21,150.66,21a9.76,9.76,0,0,1,6.17,1.74l-1,2.25a7.53,7.53,0,0,0-4.4-1.36c-5.15,0-7.78,4.46-7.78,10.48,0,6.2,3,10.62,7.65,10.62a8,8,0,0,0,4.49-1.37l1,2.45a10.21,10.21,0,0,1-6.3,1.73" />
<path
d="M162.84,35.75c.48,6,3.76,9,8.9,9a14.66,14.66,0,0,0,6.88-1.55l1.08,2.59a18,18,0,0,1-8.22,1.73c-7.12,0-12.18-4.23-12.18-13.34,0-8.69,4.67-13.2,11-13.2s10.37,3.95,10.37,12.4Zm7.35-12.41c-4.1,0-7.56,3.2-7.52,10.29l14.39-2c0-5.87-2.81-8.32-6.87-8.32" />
<path
d="M198.57,23.81V46.88H194.9V23.81h-3.76V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.39,0,.87.05.87.05v2.35h-.44c-2.54,0-4.84,1.64-4.84,5.12v4.09h5.28v2.25Z" />
<path
d="M217.28,47.49c-7.47,0-10.89-5.78-10.89-13.24S209.81,21,217.28,21s10.85,5.82,10.85,13.3-3.37,13.24-10.85,13.24m0-24c-5.53,0-7.13,5.59-7.13,10.81s1.73,10.56,7.13,10.56,7.13-5.35,7.13-10.56-1.6-10.81-7.13-10.81" />
<path
d="M244.08,23.91c-2.34-.61-5.75-.52-7.35.47v22.5H233V22.69c2.67-1.13,5.36-1.74,10.11-1.74H245Z" />
<path
d="M277.42,47.13,263.07,25a32.2,32.2,0,0,1-1.85-3.29h-.09s.13,1.88.13,3.85V47.13h-4.71V14.8h5.31l13.61,20.82A28.76,28.76,0,0,1,277.38,39h.08s-.17-1.84-.17-3.77V14.8H282V47.13Z" />
<path
d="M297.52,47.79c-7.43,0-10.93-3-10.93-7.81,0-6.8,7.12-8.64,15.59-9.39V29.13c0-3.47-2.37-4.51-5.83-4.51a18,18,0,0,0-6.87,1.46L288.23,23a24,24,0,0,1,9.12-1.83c5.61,0,9.93,2.3,9.93,8.78V46a22.71,22.71,0,0,1-9.76,1.83m4.66-14.67c-6.26.67-10.45,1.84-10.45,6.73,0,3.42,2.42,4.88,6.22,4.88a10.09,10.09,0,0,0,4.23-.84Z" />
<path
d="M322,47.69c-5.31,0-7.34-3.43-7.34-6.86V25.09h-3.55V21.81h3.55V16.12l5.4-1.5v7.19H325v3.28h-5V40.55a3.26,3.26,0,0,0,3,3.52h.5a5.5,5.5,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
<path
d="M331.91,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.44V47.13h-5.44Z" />
<path
d="M350.88,47.79c-7.73,0-11.57-5.74-11.57-13.3s3.84-13.34,11.57-13.34,11.54,5.78,11.54,13.34-3.8,13.3-11.54,13.3m0-23.17c-4.66,0-6.05,4.89-6.05,9.82s1.47,9.63,6.05,9.63,6.05-4.7,6.05-9.63-1.38-9.82-6.05-9.82" />
<path
d="M382.52,47.13V29c0-3.24-2.77-4.47-5.88-4.47a12.3,12.3,0,0,0-4.37.76v21.8h-5.39V23a26.81,26.81,0,0,1,10.06-1.83c6.61,0,11,2.25,11,7.8V47.13Z" />
<path
d="M403.18,47.79c-7.43,0-10.94-3-10.94-7.81,0-6.8,7.13-8.64,15.6-9.39V29.13c0-3.47-2.37-4.51-5.83-4.51a18,18,0,0,0-6.87,1.46L393.89,23A24,24,0,0,1,403,21.15c5.62,0,9.94,2.3,9.94,8.78V46a22.71,22.71,0,0,1-9.76,1.83m4.66-14.67c-6.27.67-10.46,1.84-10.46,6.73,0,3.42,2.43,4.88,6.23,4.88a10.09,10.09,0,0,0,4.23-.84Z" />
<polygon
points="418.52 47.13 418.52 34.91 418.52 10.25 423.92 10.25 423.92 22.76 423.92 47.13 418.52 47.13" />
<path
d="M445.39,47.79A19.11,19.11,0,0,1,436.58,46l1.51-4a13.48,13.48,0,0,0,6.22,1.55c3.76,0,6.44-2.21,6.44-5.41,0-7.09-13.44-4.36-13.44-14.42,0-5.13,4.15-9.59,10.72-9.59A15.82,15.82,0,0,1,455.8,16l-1.38,3.52a11.93,11.93,0,0,0-5.66-1.5c-3.5,0-5.79,2.11-5.79,5.12,0,7,13.74,3.94,13.74,14.65,0,5.74-4.71,10-11.32,10" />
<path
d="M470.41,47.69c-5.31,0-7.34-3.43-7.34-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.92v3.28h-4.92V40.55a3.27,3.27,0,0,0,3,3.52h.48a5.12,5.12,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
<path
d="M487.27,47.79c-7.44,0-10.93-3-10.93-7.81,0-6.8,7.13-8.64,15.6-9.39V29.13c0-3.47-2.38-4.51-5.84-4.51a18,18,0,0,0-6.87,1.46L478,23a23.94,23.94,0,0,1,9.11-1.83c5.62,0,9.94,2.3,9.94,8.78V46a22.71,22.71,0,0,1-9.76,1.83M492,33.16c-6.27.67-10.46,1.84-10.46,6.73,0,3.42,2.42,4.88,6.22,4.88a10,10,0,0,0,4.24-.84Z" />
<path
d="M511.73,47.69c-5.32,0-7.35-3.43-7.35-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.92v3.28h-4.92V40.55a3.26,3.26,0,0,0,3,3.52h.5a5.5,5.5,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
<path
d="M521.66,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.45V47.13h-5.45Z" />
<path
d="M536.19,47.79A15.9,15.9,0,0,1,528.54,46L530,42.48a10.53,10.53,0,0,0,5.52,1.5c2.77,0,5-1.78,5-3.94,0-6-11.1-3.2-11.1-11.47,0-3.76,3.37-7.42,8.86-7.42A13.56,13.56,0,0,1,545.34,23l-1.42,3.14a8.47,8.47,0,0,0-4.62-1.45c-2.81,0-4.54,1.69-4.54,3.62,0,5.64,11.32,3.14,11.32,11.6,0,4-3.85,7.9-9.89,7.9" />
<path
d="M559.83,47.69c-5.31,0-7.35-3.43-7.35-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.93v3.28h-4.93V40.55a3.27,3.27,0,0,0,3,3.52h.48a5.64,5.64,0,0,0,1.47-.23v3.33a7.72,7.72,0,0,1-3,.52" />
<path
d="M569.77,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.44V47.13h-5.44Z" />
<path
d="M588.14,47.79c-6.23,0-11-5.08-11-13.35s4.88-13.29,11-13.29A10.51,10.51,0,0,1,594.66,23l-1.21,3a6.87,6.87,0,0,0-4-1.22c-4.4,0-6.69,3.81-6.69,9.49s2.63,9.59,6.61,9.59a6.74,6.74,0,0,0,4-1.28L594.7,46c-1.12.94-3.33,1.84-6.56,1.84" />
<path
d="M605.1,47.79A15.9,15.9,0,0,1,597.45,46l1.42-3.47A10.54,10.54,0,0,0,604.4,44c2.77,0,5-1.78,5-3.94,0-6-11.1-3.2-11.1-11.47,0-3.76,3.37-7.42,8.85-7.42a13.49,13.49,0,0,1,7.1,1.83l-1.42,3.14a8.42,8.42,0,0,0-4.63-1.45c-2.8,0-4.53,1.69-4.53,3.62,0,5.64,11.32,3.14,11.32,11.6,0,4-3.85,7.9-9.89,7.9" />
</g>
</svg>
</div>
<div class="ons-header__org-logo ons-header__org-logo--small">
<svg class="ons-icon--logo" xmlns="http://www.w3.org/2000/svg" width="120" height="27"
viewBox="0 5 595 116" aria-labelledby="ons-logo-stacked-en-alt" role="img">
<title id="ons-logo-stacked-en-alt"> Office for National Statistics logo </title>
<g class="ons-icon--logo__group ons-icon--logo__group--secondary" fill="#a8bd3a">
<path
d="M0,70.5c1.8-3.7,3.6-7.2,5.6-10.7A127.94,127.94,0,0,1,0,42.6V70.5M10.9,0S0,0,0,13.5v7.2A128.06,128.06,0,0,0,7.9,56.2a114.75,114.75,0,0,1,22.3-26C47.8,15.1,71.5,4.7,103.7.1Z" />
</g>
<g class="ons-icon--logo__group ons-icon--logo__group--primary" fill="#003c57">
<path
d="M115.9,7.3c-36.8,3.5-62,14-80,29.4a108.15,108.15,0,0,0-23.6,29c14.1,27.4,41.1,47.6,86,50.5h4.4s13.8.5,13.8-14.9V7.2l-.6.1M21.2,85.4a92.68,92.68,0,0,1-11-16A173,173,0,0,0,0,93.4v22.7l73.6.1c-22.9-5.5-40.1-16.4-52.4-30.8" />
</g>
<g class="ons-icon--logo__group ons-icon--logo__group--text" fill="#003c57">
<path
d="M161,51.9c-11.3,0-16.3-9.3-16.3-20.8s5-20.8,16.3-20.8,16.3,9.5,16.3,20.8c-.1,11.5-5.1,20.8-16.3,20.8m0-38.3c-8.3,0-11.3,9.1-11.3,17.4s2.7,17.3,11.3,17.3,11.2-9.1,11.2-17.3S169.3,13.6,161,13.6m30.2,8.9V51.2h-4.5V22.6H182V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8l-6.7-.1Zm18.9,0V51.2h-4.5V22.6h-4.7V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8l-6.7-.1Zm14-8.8a2.82,2.82,0,0,1-2.9-2.8,2.9,2.9,0,0,1,5.8,0,2.76,2.76,0,0,1-2.9,2.8m-2.3,6h4.6V51.2h-4.6Zm24.3,32.2c-7.4,0-13.2-6.4-13.2-16.5,0-10.3,5.8-16.5,13.4-16.5a12.36,12.36,0,0,1,7.7,2.2l-1.2,2.8a8.92,8.92,0,0,0-5.5-1.7c-6.4,0-9.7,5.5-9.7,13,0,7.7,3.7,13.2,9.5,13.2a9.8,9.8,0,0,0,5.6-1.7l1.2,3c-1.3,1.2-4,2.2-7.8,2.2m15.3-14.6c.6,7.4,4.7,11.1,11.1,11.1a18.36,18.36,0,0,0,8.5-1.9l1.3,3.2a22.58,22.58,0,0,1-10.2,2.1c-8.8,0-15.1-5.3-15.1-16.6,0-10.8,5.8-16.4,13.7-16.4s12.9,4.9,12.9,15.4l-22.2,3.1ZM270.5,22c-5.1,0-9.4,4-9.3,12.8l17.9-2.5C279,25,275.5,22,270.5,22m42.2.5V51.2h-4.5V22.6h-4.7V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8Zm23.2,29.4c-9.3,0-13.5-7.2-13.5-16.5s4.2-16.5,13.5-16.5,13.5,7.2,13.5,16.5-4.2,16.5-13.5,16.5m0-29.8c-6.9,0-8.8,7-8.8,13.4s2.1,13.1,8.8,13.1c6.9,0,8.9-6.6,8.9-13.1s-2-13.4-8.9-13.4m33.3.6c-2.9-.8-7.1-.6-9.1.6V51.2h-4.6V21.1c3.3-1.4,6.6-2.2,12.5-2.2h2.4c0,.1-1.2,3.8-1.2,3.8ZM171.3,114.8,153.5,87.3c-1.3-2.1-2.3-4.1-2.3-4.1h-.1s.2,2.3.2,4.8v26.8h-5.8V74.7h6.6L169,100.5a46.13,46.13,0,0,1,2.4,4.1h.1s-.2-2.3-.2-4.7V74.6h5.9v40.1l-5.9.1Zm25,.8c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.8-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8l-1.6-3.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.7,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm24.5,18.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2c0,2.5,1.4,4.4,4.3,4.4a5.66,5.66,0,0,0,1.8-.3v4.1a11.47,11.47,0,0,1-3.7.6M239,77.9a3.52,3.52,0,1,1,3.9-3.5,3.71,3.71,0,0,1-3.9,3.5m-3.4,5.5h6.8v31.4h-6.8Zm26.9,32.2c-9.6,0-14.4-7.1-14.4-16.5s4.8-16.6,14.4-16.6,14.3,7.2,14.3,16.6-4.7,16.5-14.3,16.5m0-28.7c-5.8,0-7.5,6.1-7.5,12.2s1.8,11.9,7.5,11.9,7.5-5.8,7.5-11.9-1.7-12.2-7.5-12.2m39.3,27.9V92.3c0-4-3.4-5.5-7.3-5.5a16,16,0,0,0-5.4.9v27.1h-6.7v-30a32.8,32.8,0,0,1,12.5-2.3c8.2,0,13.7,2.8,13.7,9.7v22.6Zm25.7.8c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.9-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8L316,84.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.7,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm13.2,17.4V69h6.7v45.8Zm38.6.8a23.94,23.94,0,0,1-10.9-2.3l1.9-4.9a17,17,0,0,0,7.7,1.9c4.7,0,8-2.7,8-6.7,0-8.8-16.7-5.4-16.7-17.9,0-6.4,5.2-11.9,13.3-11.9a20.22,20.22,0,0,1,9.7,2.3l-1.7,4.4a14.57,14.57,0,0,0-7-1.9c-4.3,0-7.2,2.6-7.2,6.4,0,8.6,17.1,4.9,17.1,18.2-.1,7.1-6,12.4-14.2,12.4m31.1-.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2a4.07,4.07,0,0,0,4.3,4.4,5.66,5.66,0,0,0,1.8-.3v4.1a12.06,12.06,0,0,1-3.7.6m20.9.1c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.9-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8l-1.6-3.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.6,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm24.6,18.1c-6.6,0-9.1-4.3-9.1-8.5V87.5H454V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2a4.07,4.07,0,0,0,4.3,4.4,5.66,5.66,0,0,0,1.8-.3v4.1a12.69,12.69,0,0,1-3.7.6m12.3-37.6a3.52,3.52,0,1,1,3.9-3.5,3.65,3.65,0,0,1-3.9,3.5m-3.4,5.5h6.8v31.4h-6.8Zm21.4,32.2a19.46,19.46,0,0,1-9.5-2.3l1.8-4.3a13.21,13.21,0,0,0,6.9,1.9c3.4,0,6.2-2.2,6.2-4.9,0-7.5-13.8-4-13.8-14.2,0-4.7,4.2-9.2,11-9.2a16.21,16.21,0,0,1,8.8,2.3l-1.8,3.9a10.31,10.31,0,0,0-5.7-1.8c-3.5,0-5.6,2.1-5.6,4.5,0,7,14,3.9,14,14.4,0,4.9-4.7,9.7-12.3,9.7m29.4-.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2c0,2.5,1.4,4.4,4.3,4.4a5.66,5.66,0,0,0,1.8-.3v4.1a12.06,12.06,0,0,1-3.7.6m12.3-37.6a3.52,3.52,0,1,1,3.9-3.5c.1,2-1.7,3.5-3.9,3.5m-3.3,5.5H543v31.4h-6.8Zm26.2,32.2c-7.7,0-13.6-6.3-13.6-16.6s6.1-16.5,13.7-16.5c3.9,0,6.6,1.1,8,2.3L569,88.6a8.61,8.61,0,0,0-4.9-1.5c-5.5,0-8.3,4.7-8.3,11.8s3.3,11.9,8.2,11.9a8.39,8.39,0,0,0,4.9-1.6l1.7,4.1c-1.5,1.2-4.2,2.3-8.2,2.3m20.6,0a19.46,19.46,0,0,1-9.5-2.3l1.8-4.3a13.21,13.21,0,0,0,6.9,1.9c3.4,0,6.2-2.2,6.2-4.9,0-7.5-13.8-4-13.8-14.2,0-4.7,4.2-9.2,11-9.2a16.85,16.85,0,0,1,8.9,2.3l-1.8,3.9A10.31,10.31,0,0,0,587,87c-3.5,0-5.6,2.1-5.6,4.5,0,7,14,3.9,14,14.4-.1,4.9-4.9,9.7-12.4,9.7" />
</g>
</svg>
</div>
</div>
</div>
</div>
</div>
<div class="ons-header__main">
<div class="ons-container">
<div
class="ons-grid ons-grid-flex ons-grid-flex--between ons-grid-flex--vertical-center ons-grid-flex--no-wrap ons-grid--gutterless">
<div class="ons-grid__col ons-col-auto ons-u-flex-shrink">
<div class="ons-header__title">Question example</div>
</div>
</div>
</div>
</div>
</header>
<div class="ons-page__container ons-container">
<nav class="ons-breadcrumbs" aria-label="Breadcrumbs">
<ol class="ons-breadcrumbs__items ons-u-fs-s">
<li class="ons-breadcrumbs__item" id="breadcrumb-1">
<a class="ons-breadcrumbs__link" href="#0">Previous</a><svg class="ons-icon" viewBox="0 0 8 13"
xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor" role="img"
title="ons-icon-chevron">
<path
d="M5.74,14.28l-.57-.56a.5.5,0,0,1,0-.71h0l5-5-5-5a.5.5,0,0,1,0-.71h0l.57-.56a.5.5,0,0,1,.71,0h0l5.93,5.93a.5.5,0,0,1,0,.7L6.45,14.28a.5.5,0,0,1-.71,0Z"
transform="translate(-5.02 -1.59)" />
</svg>
</li>
</ol>
</nav>
<div class="ons-grid">
<div class="ons-grid__col ons-col-12@m ">
<main id="main-content" class="ons-page__main ">
<div class="ons-question ons-u-mb-xl">
<h1 id="question-title" class="ons-question__title">On 1 May 2016, what was the number of employees
for Bolt and Ratchet?</h1>
<div class="ons-question__description ons-u-mb-l">
<p>This is all employees aged 16 years or over that your organisation employs</p>
</div>
<div id="" class="ons-details ons-js-details ons-u-mb-l">
<div class="ons-details__heading ons-js-details-heading" role="button">
<h2 class="ons-details__title ons-u-fs-r--b">What we mean by “employee”</h2>
<span class="ons-details__icon">
<svg class="ons-icon" viewBox="0 0 8 13" xmlns="http://www.w3.org/2000/svg" focusable="false"
fill="currentColor" role="img" title="ons-icon-chevron">
<path
d="M5.74,14.28l-.57-.56a.5.5,0,0,1,0-.71h0l5-5-5-5a.5.5,0,0,1,0-.71h0l.57-.56a.5.5,0,0,1,.71,0h0l5.93,5.93a.5.5,0,0,1,0,.7L6.45,14.28a.5.5,0,0,1-.71,0Z"
transform="translate(-5.02 -1.59)" />
</svg></span>
</div>
<div id="-content" class="ons-details__content ons-js-details-content">
<p>An employee is a person that your organisation directly pays from its payroll(s), in return for
carrying out a full-time or part-time job</p>
</div>
</div>
<div class="ons-panel ons-panel--info ons-panel--no-title ons-question-guidance ons-u-mb-l">
<span class="ons-panel__assistive-text ons-u-vh">Important information: </span>
<div class="ons-panel__body">
<h2 class="ons-question-guidance__list-heading ons-u-fs-r--b">Include:</h2>
<ul class="ons-list">
<li class="ons-list__item"> all employees in Great Britain (England, Scotland and Wales), both
full and part-time, who received pay in the relevant period </li>
</ul>
<h2 class="ons-question-guidance__list-heading ons-u-fs-r--b">Exclude:</h2>
<ul class="ons-list">
<li class="ons-list__item"> trainees on government schemes </li>
<li class="ons-list__item"> employees working abroad unless paid directly from this business’s
GB payroll </li>
</ul>
</div>
</div>
<div class="ons-question__answer ons-u-mb-l">
<fieldset id="number-of-employees" class="ons-fieldset">
<legend class="ons-fieldset__legend ons-u-vh"><span
class="ons-fieldset__legend-title ons-u-pb-no">On 1 May 2016, what was the number of employees
for Bolt and Ratchet?</span></legend>
<div class="ons-radios__items">
<span class="ons-radios__item">
<span class="ons-radio">
<input type="radio" id="number-of-employees-1-9" class="ons-radio__input ons-js-radio"
value="1-9" name="number-of-employees" />
<label class=" ons-radio__label" for="number-of-employees-1-9"
id="number-of-employees-1-9-label">1 – 9 employees</label>
</span>
</span>
<br />
<span class="ons-radios__item">
<span class="ons-radio">
<input type="radio" id="number-of-employees-10-49" class="ons-radio__input ons-js-radio"
value="10-49" name="number-of-employees" />
<label class=" ons-radio__label" for="number-of-employees-10-49"
id="number-of-employees-10-49-label">10 – 49 employees</label>
</span>
</span>
<br />
<span class="ons-radios__item">
<span class="ons-radio">
<input type="radio" id="number-of-employees-50-100" class="ons-radio__input ons-js-radio"
value="50-100" name="number-of-employees" />
<label class=" ons-radio__label ons-label--with-description"
for="number-of-employees-50-100"
aria-describedby="number-of-employees-50-100-label-description-hint"
id="number-of-employees-50-100-label">50 – 100+ employees <span
class="ons-label__aria-hidden-description" aria-hidden="true">
<span class="ons-label__description ons-radio__label--with-description">Include
multi-corporations</span></span></label>
<span class="ons-label__visually-hidden-description ons-u-vh"
id="number-of-employees-50-100-label-description-hint">Include multi-corporations</span>
</span>
</span>
</div>
</fieldset>
</div>
<div id="" class="ons-details ons-js-details ons-u-mb-l">
<div class="ons-details__heading ons-js-details-heading" role="button">
<h2 class="ons-details__title ons-u-fs-r--b">Why we ask this question</h2>
<span class="ons-details__icon">
<svg class="ons-icon" viewBox="0 0 8 13" xmlns="http://www.w3.org/2000/svg" focusable="false"
fill="currentColor" role="img" title="ons-icon-chevron">
<path
d="M5.74,14.28l-.57-.56a.5.5,0,0,1,0-.71h0l5-5-5-5a.5.5,0,0,1,0-.71h0l.57-.56a.5.5,0,0,1,.71,0h0l5.93,5.93a.5.5,0,0,1,0,.7L6.45,14.28a.5.5,0,0,1-.71,0Z"
transform="translate(-5.02 -1.59)" />
</svg></span>
</div>
<div id="-content" class="ons-details__content ons-js-details-content">
<p>We ask this question in order to understand the size of organisations in the UK</p>
</div>
</div>
</div>
<button type="submit" class="ons-btn">
<span class="ons-btn__inner"><span class="ons-btn__text">Save and continue</span></span>
</button>
</main>
</div>
</div>
</div>
</div>
</div>
<!-- prettier-ignore-start -->
<script>
(function() {
var s = ['https://cdn.ons.gov.uk/sdc/design-system/72.0.1/scripts/main.js'],
c = document.createElement('script');
if (!('noModule' in c)) {
for (var i = 0; i < s.length; i++) {
s[i] = s[i].replace('.js', '.es5.js');
}
}
for (var i = 0; i < s.length; i++) {
var e = document.createElement('script');
e.src = s[i];
document.body.appendChild(e);
}
})();
</script>
<!-- prettier-ignore-end -->
<div class="embeddable"></div>
<style>
body {
height: auto;
}
</style>
<script src="/js/main.js?t=1732268687213"></script>
</body>
</html>
Answers should be wrapped in a fieldset if:
- the mutually exclusive variant of an answer type is used
- there are multiple answers (except when the question requires a date)
- any of the answers require checkboxes
- any of the answers require radios
- one of the answers require dates
- any of the answers require durations
When wrapping the radios in a fieldset for the relationships pattern, add "readDescriptionFirst":
true so screen readers announce the description before the question heading.
Legend as question heading
When the question page contains a fieldset, it is quite possible that the question heading (<h1>
) is the same as what the legend needs to be.
To avoid the visual repetition of text you should:
- Wrap the
<h1>
inside the<legend>
- Add the parameter
"legendIsQuestionTitle": true
inside theonsQuestion
configuration - Include
"dontWrap": true
in the configuration of the component you are using for the answer
Do not use a utility class to visually hide the repetitive legend because this does not avoid the repetition for screen reader users.
Question with an interviewer instruction
Use this for surveys where interviewers are leading a participant through a survey in-person.
Example: Question with an interviewer instruction contents
Nunjucks
{% extends "layout/_template.njk" %}
{% from "components/question/_macro.njk" import onsQuestion %}
{% from "components/input/_macro.njk" import onsInput %}
{%
set pageConfig = {
"header": {
"title": "Interviewer led question example"
},
"breadcrumbs": {
"ariaLabel": 'Breadcrumbs',
"itemsList": [
{
"url": '#0',
"text": 'Previous'
}
]
}
}
%}
{% block main %}
{%
call onsQuestion({
"title": "How many visitors do you have staying overnight at 3 Severn Road on Sunday 21 March 2021?",
"description": "<p>A visitor is anyone aged <strong>16 years or over</strong> who usually lives at another address. Enter “0” if there are no visitors staying overnight.</p>",
"instruction": "<p>Tell respondent to turn to <strong>Showcard 2</strong> or show them the following Electronic Showcard</p>",
"definition": {
"title": "Electronic Showcard",
"content": "<p>Visitor information is collected to ensure that everyone is counted, in order to produce accurate estimates of the population, to facilitate effective planning and funding decisions</p>"
},
"submitButton": true
})
%}
{{
onsInput({
"id": "number-of-visitors",
"name": "number-of-visitors",
"type": "number",
"width": "2",
"label": {
"text": "Number of visitors"
}
})
}}
{% endcall %}
{% endblock %}
{% block scripts %}
{% from "components/embeddable/macro.njk" import embeddable %}
{{ embeddable() }}
<style>
body {
height: auto;
}
</style>
<script src="{{ site.baseUrl }}js/main.js?t={{ cacheTime }}"></script>
{% endblock %}
Nunjucks macro options
Name | Type | Required | Description |
---|---|---|---|
title | string | true | The question heading |
description | string | false | The question description to be used to provide added context to the question. This can contain HTML. |
instruction | string | false | An interviewer instruction. This can contain HTML. |
warning | <Object>WarningPanel | false | Settings for the WarningPanel to be used when a warning message is required |
definition | <Object>QuestionDefinition | false | Settings for the question definition to be used to define a word or acronym that is in the question |
guidance | <Object>QuestionGuidance | false | Settings for the question guidance to be used to state what should be included or excluded from the answer |
justification | <Object>QuestionJustification | false | Settings for the question justification to be used to explain why a question is being asked |
submitButton | <Object>SubmitButton or boolean | false | Settings for the submit button. If a value of true is provided, default attributes will be used. |
id | string | false | The HTML id for the component |
classes | string | false | Classes to add the component |
attributes | object | false | HTML attributes (for example, data attributes) to add to the component |
readDescriptionFirst | boolean | false | Set to “true” to make screen readers read out question description first. Used in the relationships pattern where the description instructs the user to complete the sentence in the heading. |
legendIsQuestionTitle | boolean | true (unless legend is set) | Creates an h1 inside the legend . Use when there is only a single fieldset on the page |
legendClasses | string | false | Classes to apply to the HTML legend element when using legendIsQuestionTitle |
legendTitleClasses | string | false | Classes to apply to the h1 heading element when using legendIsQuestionTitle |
Name | Type | Required | Description |
---|---|---|---|
id | string | true | The HTML id of the question definition details |
title | string | true | The title of the question definition details |
content | string | true | The content of the question definition details. This can contain HTML. |
Name | Type | Required | Description |
---|---|---|---|
content | string | false | The contents of the question guidance panel. This can contain HTML. |
lists | Array<GuidanceLists> | false | An array of lists with sub-headings used to state what should be included or excluded from the answer |
Name | Type | Required | Description |
---|---|---|---|
listHeading | string | false | A heading for each include/exclude list |
listLeadingLine | string | false | A leading line for each list |
itemsList | List (ref) | true | An array of list items for each list |
Name | Type | Required | Description |
---|---|---|---|
id | string | true | The HTML id of the question justification details |
title | string | false | The title of the question justification details. Defaults to “Why we ask this question”. |
content | string | true | The content of the question definition details. This can contain HTML. |
Name | Type | Required | Description |
---|---|---|---|
id | string | false | The HTML id of the button |
variants | string | false | If set to “timer” the button will be disabled for a short time to stop double-clicks from submitting the form twice. Setting to “loader” will disable the button when selected and show an animated loading icon. |
text | string | false | Text for the button label. Defaults to “Save and continue”. |
classes | string | false | Classes to add the button element |
attributes | object | false | HTML attributes (for example, data attributes) to add to the button |
Name | Type | Required | Description |
---|---|---|---|
id | string | true | The HTML id of the Warning Panel |
body | string | true | The contents of the warning panel. This can contain HTML. |
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Example: Question with an interviewer instruction</title>
<link rel="stylesheet" href="https://cdn.ons.gov.uk/sdc/design-system/72.0.1/css/main.css" />
<link rel="stylesheet" media="print" href="https://cdn.ons.gov.uk/sdc/design-system/72.0.1/css/print.css" />
<meta name="theme-color" content="#206095" />
<!-- Open Graph -->
<meta property="og:type" content="website" />
<meta property="og:url" content="" />
<meta property="og:title" content="" />
<meta property="og:image" content="https://cdn.ons.gov.uk/sdc/design-system/72.0.1/favicons/opengraph.png" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:description" content="" />
<meta property="og:site_name" content="Interviewer led question example" />
<meta property="og:locale" content="en" />
<!-- Favicons -->
<link rel="icon" type="image/x-icon" href="https://cdn.ons.gov.uk/sdc/design-system/72.0.1/favicons/favicon.ico" />
<link rel="icon" type="image/png" href="https://cdn.ons.gov.uk/sdc/design-system/72.0.1/favicons/favicon-32x32.png"
sizes="32x32" />
<link rel="icon" type="image/png" href="https://cdn.ons.gov.uk/sdc/design-system/72.0.1/favicons/favicon-16x16.png"
sizes="16x16" />
<link rel="mask-icon" href="https://cdn.ons.gov.uk/sdc/design-system/72.0.1/favicons/safari-pinned-tab.svg"
color="#000000" />
<link rel="apple-touch-icon" type="image/png"
href="https://cdn.ons.gov.uk/sdc/design-system/72.0.1/favicons/apple-touch-icon.png" sizes="180x180" />
<link rel="manifest" href="https://cdn.ons.gov.uk/sdc/design-system/72.0.1/favicons/manifest.json" />
</head>
<body>
<!-- prettier-ignore-start -->
<script>
document.body.className = ((document.body.className) ? document.body.className + ' ons-js-enabled' :
'ons-js-enabled');
</script>
<!-- prettier-ignore-end -->
<div class="ons-page">
<div class="ons-page__content">
<a class="ons-skip-to-content" href="#main-content">Skip to main content</a>
<header class="ons-header" role="banner">
<div class="ons-browser-banner">
<div class="ons-container">
<p class="ons-browser-banner__content">
<span class="ons-browser-banner__lead">This website no longer supports your browser.</span><span
class="ons-browser-banner__cta"> You can <a class="ons-browser-banner__link"
href="https://www.ons.gov.uk/help/browsers">upgrade your browser to the latest version</a>.</span>
</p>
</div>
</div>
<div class="ons-header__top">
<div class="ons-container">
<div
class="ons-header__grid-top ons-grid ons-grid-flex ons-grid-flex--between ons-grid-flex--vertical-center ons-grid-flex--no-wrap ons-grid--gutterless">
<div class="ons-grid__col ons-col-auto">
<div class="ons-header__org-logo ons-header__org-logo--large">
<svg class="ons-icon--logo" xmlns="http://www.w3.org/2000/svg" width="208" height="20"
viewBox="33 2 552 60" aria-labelledby="ons-logo-en-alt" role="img">
<title id="ons-logo-en-alt"> Office for National Statistics homepage </title>
<g class="ons-icon--logo__group ons-icon--logo__group--secondary" fill="#a8bd3a">
<path
d="M0,34.6c.8-1.69,1.39-3,2.32-4.6A38.28,38.28,0,0,1,0,23.4V34.6M5,3S0,3,0,9.25v1A62.12,62.12,0,0,0,4.2,27a43.77,43.77,0,0,1,9.42-10.79C21.69,9.21,31.16,5.13,45.9,3Z" />
</g>
<g class="ons-icon--logo__group ons-icon--logo__group--primary" fill="#003c57">
<path
d="M53.06,6.42C36.2,8,24.68,12.92,16.43,20.07A41.46,41.46,0,0,0,6.4,32.2C12.87,44.93,28.88,57,46.6,57H47s6.32.21,6.32-6.91V6.36a1.22,1.22,0,0,1-.26.06M9.72,42.67a44.25,44.25,0,0,1-5-7.42A80.59,80.59,0,0,0,0,46.38V56.91L31.06,57c-9.83-3-15.74-7.64-21.34-14.3" />
</g>
<g class="ons-icon--logo__group ons-icon--logo__group--text" fill="#003c57">
<path
d="M82,47.49c-9.07,0-13.13-7.51-13.13-16.77S72.91,14,82,14s13.1,7.61,13.1,16.77S91.1,47.54,82,47.54m0-30.91c-6.69,0-9.07,7.33-9.07,14.05s2.16,13.9,9.07,13.9,9-7.28,9-13.9-2.34-14-9-14" />
<path
d="M106.36,23.81V46.88h-3.67V23.81H98.93V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.38,0,.86.05.86.05v2.35h-.43c-2.55,0-4.84,1.64-4.84,5.12v4.09h5.27v2.25Z" />
<path
d="M121.53,23.81V46.88h-3.67V23.81H114.1V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.38,0,.86.05.86.05v2.35h-.43c-2.55,0-4.84,1.64-4.84,5.12v4.09h5.27v2.25Z" />
<path
d="M132.85,16.72a2.28,2.28,0,0,1-2.33-2.23v0a2.34,2.34,0,0,1,4.67,0,2.28,2.28,0,0,1-2.3,2.26h0M131,21.56h3.71V46.88H131Z" />
<path
d="M150.53,47.49c-6,0-10.63-5.16-10.63-13.29S144.52,21,150.66,21a9.76,9.76,0,0,1,6.17,1.74l-1,2.25a7.53,7.53,0,0,0-4.4-1.36c-5.15,0-7.78,4.46-7.78,10.48,0,6.2,3,10.62,7.65,10.62a8,8,0,0,0,4.49-1.37l1,2.45a10.21,10.21,0,0,1-6.3,1.73" />
<path
d="M162.84,35.75c.48,6,3.76,9,8.9,9a14.66,14.66,0,0,0,6.88-1.55l1.08,2.59a18,18,0,0,1-8.22,1.73c-7.12,0-12.18-4.23-12.18-13.34,0-8.69,4.67-13.2,11-13.2s10.37,3.95,10.37,12.4Zm7.35-12.41c-4.1,0-7.56,3.2-7.52,10.29l14.39-2c0-5.87-2.81-8.32-6.87-8.32" />
<path
d="M198.57,23.81V46.88H194.9V23.81h-3.76V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.39,0,.87.05.87.05v2.35h-.44c-2.54,0-4.84,1.64-4.84,5.12v4.09h5.28v2.25Z" />
<path
d="M217.28,47.49c-7.47,0-10.89-5.78-10.89-13.24S209.81,21,217.28,21s10.85,5.82,10.85,13.3-3.37,13.24-10.85,13.24m0-24c-5.53,0-7.13,5.59-7.13,10.81s1.73,10.56,7.13,10.56,7.13-5.35,7.13-10.56-1.6-10.81-7.13-10.81" />
<path
d="M244.08,23.91c-2.34-.61-5.75-.52-7.35.47v22.5H233V22.69c2.67-1.13,5.36-1.74,10.11-1.74H245Z" />
<path
d="M277.42,47.13,263.07,25a32.2,32.2,0,0,1-1.85-3.29h-.09s.13,1.88.13,3.85V47.13h-4.71V14.8h5.31l13.61,20.82A28.76,28.76,0,0,1,277.38,39h.08s-.17-1.84-.17-3.77V14.8H282V47.13Z" />
<path
d="M297.52,47.79c-7.43,0-10.93-3-10.93-7.81,0-6.8,7.12-8.64,15.59-9.39V29.13c0-3.47-2.37-4.51-5.83-4.51a18,18,0,0,0-6.87,1.46L288.23,23a24,24,0,0,1,9.12-1.83c5.61,0,9.93,2.3,9.93,8.78V46a22.71,22.71,0,0,1-9.76,1.83m4.66-14.67c-6.26.67-10.45,1.84-10.45,6.73,0,3.42,2.42,4.88,6.22,4.88a10.09,10.09,0,0,0,4.23-.84Z" />
<path
d="M322,47.69c-5.31,0-7.34-3.43-7.34-6.86V25.09h-3.55V21.81h3.55V16.12l5.4-1.5v7.19H325v3.28h-5V40.55a3.26,3.26,0,0,0,3,3.52h.5a5.5,5.5,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
<path
d="M331.91,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.44V47.13h-5.44Z" />
<path
d="M350.88,47.79c-7.73,0-11.57-5.74-11.57-13.3s3.84-13.34,11.57-13.34,11.54,5.78,11.54,13.34-3.8,13.3-11.54,13.3m0-23.17c-4.66,0-6.05,4.89-6.05,9.82s1.47,9.63,6.05,9.63,6.05-4.7,6.05-9.63-1.38-9.82-6.05-9.82" />
<path
d="M382.52,47.13V29c0-3.24-2.77-4.47-5.88-4.47a12.3,12.3,0,0,0-4.37.76v21.8h-5.39V23a26.81,26.81,0,0,1,10.06-1.83c6.61,0,11,2.25,11,7.8V47.13Z" />
<path
d="M403.18,47.79c-7.43,0-10.94-3-10.94-7.81,0-6.8,7.13-8.64,15.6-9.39V29.13c0-3.47-2.37-4.51-5.83-4.51a18,18,0,0,0-6.87,1.46L393.89,23A24,24,0,0,1,403,21.15c5.62,0,9.94,2.3,9.94,8.78V46a22.71,22.71,0,0,1-9.76,1.83m4.66-14.67c-6.27.67-10.46,1.84-10.46,6.73,0,3.42,2.43,4.88,6.23,4.88a10.09,10.09,0,0,0,4.23-.84Z" />
<polygon
points="418.52 47.13 418.52 34.91 418.52 10.25 423.92 10.25 423.92 22.76 423.92 47.13 418.52 47.13" />
<path
d="M445.39,47.79A19.11,19.11,0,0,1,436.58,46l1.51-4a13.48,13.48,0,0,0,6.22,1.55c3.76,0,6.44-2.21,6.44-5.41,0-7.09-13.44-4.36-13.44-14.42,0-5.13,4.15-9.59,10.72-9.59A15.82,15.82,0,0,1,455.8,16l-1.38,3.52a11.93,11.93,0,0,0-5.66-1.5c-3.5,0-5.79,2.11-5.79,5.12,0,7,13.74,3.94,13.74,14.65,0,5.74-4.71,10-11.32,10" />
<path
d="M470.41,47.69c-5.31,0-7.34-3.43-7.34-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.92v3.28h-4.92V40.55a3.27,3.27,0,0,0,3,3.52h.48a5.12,5.12,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
<path
d="M487.27,47.79c-7.44,0-10.93-3-10.93-7.81,0-6.8,7.13-8.64,15.6-9.39V29.13c0-3.47-2.38-4.51-5.84-4.51a18,18,0,0,0-6.87,1.46L478,23a23.94,23.94,0,0,1,9.11-1.83c5.62,0,9.94,2.3,9.94,8.78V46a22.71,22.71,0,0,1-9.76,1.83M492,33.16c-6.27.67-10.46,1.84-10.46,6.73,0,3.42,2.42,4.88,6.22,4.88a10,10,0,0,0,4.24-.84Z" />
<path
d="M511.73,47.69c-5.32,0-7.35-3.43-7.35-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.92v3.28h-4.92V40.55a3.26,3.26,0,0,0,3,3.52h.5a5.5,5.5,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
<path
d="M521.66,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.45V47.13h-5.45Z" />
<path
d="M536.19,47.79A15.9,15.9,0,0,1,528.54,46L530,42.48a10.53,10.53,0,0,0,5.52,1.5c2.77,0,5-1.78,5-3.94,0-6-11.1-3.2-11.1-11.47,0-3.76,3.37-7.42,8.86-7.42A13.56,13.56,0,0,1,545.34,23l-1.42,3.14a8.47,8.47,0,0,0-4.62-1.45c-2.81,0-4.54,1.69-4.54,3.62,0,5.64,11.32,3.14,11.32,11.6,0,4-3.85,7.9-9.89,7.9" />
<path
d="M559.83,47.69c-5.31,0-7.35-3.43-7.35-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.93v3.28h-4.93V40.55a3.27,3.27,0,0,0,3,3.52h.48a5.64,5.64,0,0,0,1.47-.23v3.33a7.72,7.72,0,0,1-3,.52" />
<path
d="M569.77,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.44V47.13h-5.44Z" />
<path
d="M588.14,47.79c-6.23,0-11-5.08-11-13.35s4.88-13.29,11-13.29A10.51,10.51,0,0,1,594.66,23l-1.21,3a6.87,6.87,0,0,0-4-1.22c-4.4,0-6.69,3.81-6.69,9.49s2.63,9.59,6.61,9.59a6.74,6.74,0,0,0,4-1.28L594.7,46c-1.12.94-3.33,1.84-6.56,1.84" />
<path
d="M605.1,47.79A15.9,15.9,0,0,1,597.45,46l1.42-3.47A10.54,10.54,0,0,0,604.4,44c2.77,0,5-1.78,5-3.94,0-6-11.1-3.2-11.1-11.47,0-3.76,3.37-7.42,8.85-7.42a13.49,13.49,0,0,1,7.1,1.83l-1.42,3.14a8.42,8.42,0,0,0-4.63-1.45c-2.8,0-4.53,1.69-4.53,3.62,0,5.64,11.32,3.14,11.32,11.6,0,4-3.85,7.9-9.89,7.9" />
</g>
</svg>
</div>
<div class="ons-header__org-logo ons-header__org-logo--small">
<svg class="ons-icon--logo" xmlns="http://www.w3.org/2000/svg" width="120" height="27"
viewBox="0 5 595 116" aria-labelledby="ons-logo-stacked-en-alt" role="img">
<title id="ons-logo-stacked-en-alt"> Office for National Statistics logo </title>
<g class="ons-icon--logo__group ons-icon--logo__group--secondary" fill="#a8bd3a">
<path
d="M0,70.5c1.8-3.7,3.6-7.2,5.6-10.7A127.94,127.94,0,0,1,0,42.6V70.5M10.9,0S0,0,0,13.5v7.2A128.06,128.06,0,0,0,7.9,56.2a114.75,114.75,0,0,1,22.3-26C47.8,15.1,71.5,4.7,103.7.1Z" />
</g>
<g class="ons-icon--logo__group ons-icon--logo__group--primary" fill="#003c57">
<path
d="M115.9,7.3c-36.8,3.5-62,14-80,29.4a108.15,108.15,0,0,0-23.6,29c14.1,27.4,41.1,47.6,86,50.5h4.4s13.8.5,13.8-14.9V7.2l-.6.1M21.2,85.4a92.68,92.68,0,0,1-11-16A173,173,0,0,0,0,93.4v22.7l73.6.1c-22.9-5.5-40.1-16.4-52.4-30.8" />
</g>
<g class="ons-icon--logo__group ons-icon--logo__group--text" fill="#003c57">
<path
d="M161,51.9c-11.3,0-16.3-9.3-16.3-20.8s5-20.8,16.3-20.8,16.3,9.5,16.3,20.8c-.1,11.5-5.1,20.8-16.3,20.8m0-38.3c-8.3,0-11.3,9.1-11.3,17.4s2.7,17.3,11.3,17.3,11.2-9.1,11.2-17.3S169.3,13.6,161,13.6m30.2,8.9V51.2h-4.5V22.6H182V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8l-6.7-.1Zm18.9,0V51.2h-4.5V22.6h-4.7V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8l-6.7-.1Zm14-8.8a2.82,2.82,0,0,1-2.9-2.8,2.9,2.9,0,0,1,5.8,0,2.76,2.76,0,0,1-2.9,2.8m-2.3,6h4.6V51.2h-4.6Zm24.3,32.2c-7.4,0-13.2-6.4-13.2-16.5,0-10.3,5.8-16.5,13.4-16.5a12.36,12.36,0,0,1,7.7,2.2l-1.2,2.8a8.92,8.92,0,0,0-5.5-1.7c-6.4,0-9.7,5.5-9.7,13,0,7.7,3.7,13.2,9.5,13.2a9.8,9.8,0,0,0,5.6-1.7l1.2,3c-1.3,1.2-4,2.2-7.8,2.2m15.3-14.6c.6,7.4,4.7,11.1,11.1,11.1a18.36,18.36,0,0,0,8.5-1.9l1.3,3.2a22.58,22.58,0,0,1-10.2,2.1c-8.8,0-15.1-5.3-15.1-16.6,0-10.8,5.8-16.4,13.7-16.4s12.9,4.9,12.9,15.4l-22.2,3.1ZM270.5,22c-5.1,0-9.4,4-9.3,12.8l17.9-2.5C279,25,275.5,22,270.5,22m42.2.5V51.2h-4.5V22.6h-4.7V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8Zm23.2,29.4c-9.3,0-13.5-7.2-13.5-16.5s4.2-16.5,13.5-16.5,13.5,7.2,13.5,16.5-4.2,16.5-13.5,16.5m0-29.8c-6.9,0-8.8,7-8.8,13.4s2.1,13.1,8.8,13.1c6.9,0,8.9-6.6,8.9-13.1s-2-13.4-8.9-13.4m33.3.6c-2.9-.8-7.1-.6-9.1.6V51.2h-4.6V21.1c3.3-1.4,6.6-2.2,12.5-2.2h2.4c0,.1-1.2,3.8-1.2,3.8ZM171.3,114.8,153.5,87.3c-1.3-2.1-2.3-4.1-2.3-4.1h-.1s.2,2.3.2,4.8v26.8h-5.8V74.7h6.6L169,100.5a46.13,46.13,0,0,1,2.4,4.1h.1s-.2-2.3-.2-4.7V74.6h5.9v40.1l-5.9.1Zm25,.8c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.8-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8l-1.6-3.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.7,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm24.5,18.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2c0,2.5,1.4,4.4,4.3,4.4a5.66,5.66,0,0,0,1.8-.3v4.1a11.47,11.47,0,0,1-3.7.6M239,77.9a3.52,3.52,0,1,1,3.9-3.5,3.71,3.71,0,0,1-3.9,3.5m-3.4,5.5h6.8v31.4h-6.8Zm26.9,32.2c-9.6,0-14.4-7.1-14.4-16.5s4.8-16.6,14.4-16.6,14.3,7.2,14.3,16.6-4.7,16.5-14.3,16.5m0-28.7c-5.8,0-7.5,6.1-7.5,12.2s1.8,11.9,7.5,11.9,7.5-5.8,7.5-11.9-1.7-12.2-7.5-12.2m39.3,27.9V92.3c0-4-3.4-5.5-7.3-5.5a16,16,0,0,0-5.4.9v27.1h-6.7v-30a32.8,32.8,0,0,1,12.5-2.3c8.2,0,13.7,2.8,13.7,9.7v22.6Zm25.7.8c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.9-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8L316,84.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.7,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm13.2,17.4V69h6.7v45.8Zm38.6.8a23.94,23.94,0,0,1-10.9-2.3l1.9-4.9a17,17,0,0,0,7.7,1.9c4.7,0,8-2.7,8-6.7,0-8.8-16.7-5.4-16.7-17.9,0-6.4,5.2-11.9,13.3-11.9a20.22,20.22,0,0,1,9.7,2.3l-1.7,4.4a14.57,14.57,0,0,0-7-1.9c-4.3,0-7.2,2.6-7.2,6.4,0,8.6,17.1,4.9,17.1,18.2-.1,7.1-6,12.4-14.2,12.4m31.1-.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2a4.07,4.07,0,0,0,4.3,4.4,5.66,5.66,0,0,0,1.8-.3v4.1a12.06,12.06,0,0,1-3.7.6m20.9.1c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.9-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8l-1.6-3.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.6,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm24.6,18.1c-6.6,0-9.1-4.3-9.1-8.5V87.5H454V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2a4.07,4.07,0,0,0,4.3,4.4,5.66,5.66,0,0,0,1.8-.3v4.1a12.69,12.69,0,0,1-3.7.6m12.3-37.6a3.52,3.52,0,1,1,3.9-3.5,3.65,3.65,0,0,1-3.9,3.5m-3.4,5.5h6.8v31.4h-6.8Zm21.4,32.2a19.46,19.46,0,0,1-9.5-2.3l1.8-4.3a13.21,13.21,0,0,0,6.9,1.9c3.4,0,6.2-2.2,6.2-4.9,0-7.5-13.8-4-13.8-14.2,0-4.7,4.2-9.2,11-9.2a16.21,16.21,0,0,1,8.8,2.3l-1.8,3.9a10.31,10.31,0,0,0-5.7-1.8c-3.5,0-5.6,2.1-5.6,4.5,0,7,14,3.9,14,14.4,0,4.9-4.7,9.7-12.3,9.7m29.4-.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2c0,2.5,1.4,4.4,4.3,4.4a5.66,5.66,0,0,0,1.8-.3v4.1a12.06,12.06,0,0,1-3.7.6m12.3-37.6a3.52,3.52,0,1,1,3.9-3.5c.1,2-1.7,3.5-3.9,3.5m-3.3,5.5H543v31.4h-6.8Zm26.2,32.2c-7.7,0-13.6-6.3-13.6-16.6s6.1-16.5,13.7-16.5c3.9,0,6.6,1.1,8,2.3L569,88.6a8.61,8.61,0,0,0-4.9-1.5c-5.5,0-8.3,4.7-8.3,11.8s3.3,11.9,8.2,11.9a8.39,8.39,0,0,0,4.9-1.6l1.7,4.1c-1.5,1.2-4.2,2.3-8.2,2.3m20.6,0a19.46,19.46,0,0,1-9.5-2.3l1.8-4.3a13.21,13.21,0,0,0,6.9,1.9c3.4,0,6.2-2.2,6.2-4.9,0-7.5-13.8-4-13.8-14.2,0-4.7,4.2-9.2,11-9.2a16.85,16.85,0,0,1,8.9,2.3l-1.8,3.9A10.31,10.31,0,0,0,587,87c-3.5,0-5.6,2.1-5.6,4.5,0,7,14,3.9,14,14.4-.1,4.9-4.9,9.7-12.4,9.7" />
</g>
</svg>
</div>
</div>
</div>
</div>
</div>
<div class="ons-header__main">
<div class="ons-container">
<div
class="ons-grid ons-grid-flex ons-grid-flex--between ons-grid-flex--vertical-center ons-grid-flex--no-wrap ons-grid--gutterless">
<div class="ons-grid__col ons-col-auto ons-u-flex-shrink">
<div class="ons-header__title">Interviewer led question example</div>
</div>
</div>
</div>
</div>
</header>
<div class="ons-page__container ons-container">
<nav class="ons-breadcrumbs" aria-label="Breadcrumbs">
<ol class="ons-breadcrumbs__items ons-u-fs-s">
<li class="ons-breadcrumbs__item" id="breadcrumb-1">
<a class="ons-breadcrumbs__link" href="#0">Previous</a><svg class="ons-icon" viewBox="0 0 8 13"
xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor" role="img"
title="ons-icon-chevron">
<path
d="M5.74,14.28l-.57-.56a.5.5,0,0,1,0-.71h0l5-5-5-5a.5.5,0,0,1,0-.71h0l.57-.56a.5.5,0,0,1,.71,0h0l5.93,5.93a.5.5,0,0,1,0,.7L6.45,14.28a.5.5,0,0,1-.71,0Z"
transform="translate(-5.02 -1.59)" />
</svg>
</li>
</ol>
</nav>
<div class="ons-grid">
<div class="ons-grid__col ons-col-12@m ">
<main id="main-content" class="ons-page__main ">
<div class="ons-question ons-u-mb-xl">
<h1 id="question-title" class="ons-question__title">How many visitors do you have staying overnight at
3 Severn Road on Sunday 21 March 2021?</h1>
<div class="ons-question__description ons-u-mb-l">
<p>A visitor is anyone aged <strong>16 years or over</strong> who usually lives at another address.
Enter “0” if there are no visitors staying overnight.</p>
</div>
<div class="ons-question__instruction ons-u-mb-l">
<p>Tell respondent to turn to <strong>Showcard 2</strong> or show them the following Electronic
Showcard</p>
</div>
<div id="" class="ons-details ons-js-details ons-u-mb-l">
<div class="ons-details__heading ons-js-details-heading" role="button">
<h2 class="ons-details__title ons-u-fs-r--b">Electronic Showcard</h2>
<span class="ons-details__icon">
<svg class="ons-icon" viewBox="0 0 8 13" xmlns="http://www.w3.org/2000/svg" focusable="false"
fill="currentColor" role="img" title="ons-icon-chevron">
<path
d="M5.74,14.28l-.57-.56a.5.5,0,0,1,0-.71h0l5-5-5-5a.5.5,0,0,1,0-.71h0l.57-.56a.5.5,0,0,1,.71,0h0l5.93,5.93a.5.5,0,0,1,0,.7L6.45,14.28a.5.5,0,0,1-.71,0Z"
transform="translate(-5.02 -1.59)" />
</svg></span>
</div>
<div id="-content" class="ons-details__content ons-js-details-content">
<p>Visitor information is collected to ensure that everyone is counted, in order to produce
accurate estimates of the population, to facilitate effective planning and funding decisions</p>
</div>
</div>
<div class="ons-question__answer ons-u-mb-l">
<div class="ons-field">
<label class="ons-label" for="number-of-visitors">Number of visitors</label>
<input type="text" id="number-of-visitors"
class="ons-input ons-input--text ons-input-type__input ons-input-number--w-2"
name="number-of-visitors" pattern="[0-9]*" inputmode="numeric" />
</div>
</div>
</div>
<button type="submit" class="ons-btn">
<span class="ons-btn__inner"><span class="ons-btn__text">Save and continue</span></span>
</button>
</main>
</div>
</div>
</div>
</div>
</div>
<!-- prettier-ignore-start -->
<script>
(function() {
var s = ['https://cdn.ons.gov.uk/sdc/design-system/72.0.1/scripts/main.js'],
c = document.createElement('script');
if (!('noModule' in c)) {
for (var i = 0; i < s.length; i++) {
s[i] = s[i].replace('.js', '.es5.js');
}
}
for (var i = 0; i < s.length; i++) {
var e = document.createElement('script');
e.src = s[i];
document.body.appendChild(e);
}
})();
</script>
<!-- prettier-ignore-end -->
<div class="embeddable"></div>
<style>
body {
height: auto;
}
</style>
<script src="/js/main.js?t=1732268687213"></script>
</body>
</html>
Help improve this page
Let us know how we could improve this page, or share your user research findings. Discuss the ‘Question’ pattern on GitHub (opens in a new tab)