From 56d5057588f03efefdc3b090123b7cb317529f2c Mon Sep 17 00:00:00 2001 From: alexleedfe Date: Fri, 6 Feb 2026 10:59:10 +0000 Subject: [PATCH 1/3] start on get to an answer pattern --- app/views/design-system/patterns/charts.html | 4 + .../patterns/get-to-an-answer.html | 139 ++++++++++++++++++ app/views/design-system/patterns/index.html | 4 + .../patterns/select-a-school.html | 6 +- 4 files changed, 151 insertions(+), 2 deletions(-) create mode 100644 app/views/design-system/patterns/get-to-an-answer.html diff --git a/app/views/design-system/patterns/charts.html b/app/views/design-system/patterns/charts.html index f078583c..5830fc20 100644 --- a/app/views/design-system/patterns/charts.html +++ b/app/views/design-system/patterns/charts.html @@ -33,6 +33,10 @@ Select a school +
  • + Get to an answer +
    • + diff --git a/app/views/design-system/patterns/get-to-an-answer.html b/app/views/design-system/patterns/get-to-an-answer.html new file mode 100644 index 00000000..f99f278a --- /dev/null +++ b/app/views/design-system/patterns/get-to-an-answer.html @@ -0,0 +1,139 @@ +{% extends "layouts/layout.html" %} + +{% set serviceNav = "Design system" %} +{% set path = "design-system/patterns/get-to-an-answer" %} +{% set title = "Get to an answer" %} +{% set description = "Ask users questions to determine what information they need. Users are guided to relevant content based on how they respond to a short series of questions. " %} +{% set mainClasses = 'govuk-!-padding-top-0 ' %} + +{% block content %} + +
    +
    +
    + +
    + + + +
    + +
    + + Patterns +

    {{title}}

    + +

    {{description}}

    + +

    When to use this pattern

    + +

    You can create a questionnaire as part of a service or campaign website to help users understand:

    + +
      +
    • what they can get (such as support, advice or benefits)
      • +
    • what actions to take, if that depends on their situation
      • +
    + +

    When not to use this pattern

    + +

    You cannot use this pattern to:

    + +
      +
    • work out if someone is eligible to use your service (use the pattern to check a service is suitable instead)
      • +
    • perform calculations +
    • combine with external data such as financial information to confirm eligibility +
    • collect information from users
      • +
    + +

    Whilst there’s no limit on the number of questions or answers you can create, it is recommended to use no more than 10 questions. Anything more complex may meet user needs better if designed as a service.

    + +

    How it works

    + +

    With this pattern you can:

    + +
      +
    • create a series of questions and answers
      • +
    • use single or multiple-choice answers
      • +
    • apply question branching (sending users to specific questions based on their previous answers)
      • +
    + +

    The user is asked a question and based on their answer they are then:

    + +
      +
    • asked another question +
    • shown a results page that you create +
    • linked to another page on your website or elsewhere +
    + +

    The user is asked a question and based on their answer they are then:

    + +
      +
    • asked another question
      • +
    • shown a results page that you create
      • +
    • linked to another page on your website or elsewhere
      • +
    + +

    It uses the existing question components from the GOV.UK design system.

    + +

    Here's an example of how this pattern works. Links on the results pages are broken to avoid any impact to the live service.

    + +
    + + + +
    + + + +

    How to add to your service

    + +
      +
    • as a link
      • +
    • embedding an iframe
      • +
    • integrating into Contentful
      • +
    + +

    There is full guidance on ‘Get to an answer’ for how to do this.

    + +

    Visual style

    + + + + +
    + +
    +
    +
    + +{% endblock %} \ No newline at end of file diff --git a/app/views/design-system/patterns/index.html b/app/views/design-system/patterns/index.html index b9f7d59c..29b7655e 100644 --- a/app/views/design-system/patterns/index.html +++ b/app/views/design-system/patterns/index.html @@ -33,6 +33,10 @@ Select a school +
  • + Get to an answer +
    • + diff --git a/app/views/design-system/patterns/select-a-school.html b/app/views/design-system/patterns/select-a-school.html index 5552f2cd..0e84359b 100644 --- a/app/views/design-system/patterns/select-a-school.html +++ b/app/views/design-system/patterns/select-a-school.html @@ -23,13 +23,15 @@
  • Patterns
    • -
  • - Charts + Charts
  • Select a school
    • +
  • + Get to an answer +
    • From 250dd99c69d1900365bdaf5720aa439680984d94 Mon Sep 17 00:00:00 2001 From: alexleedfe Date: Fri, 6 Feb 2026 11:17:06 +0000 Subject: [PATCH 2/3] rest of content and links --- .../patterns/get-to-an-answer.html | 37 +++++++++++++++++-- 1 file changed, 34 insertions(+), 3 deletions(-) diff --git a/app/views/design-system/patterns/get-to-an-answer.html b/app/views/design-system/patterns/get-to-an-answer.html index f99f278a..f5efd421 100644 --- a/app/views/design-system/patterns/get-to-an-answer.html +++ b/app/views/design-system/patterns/get-to-an-answer.html @@ -127,9 +127,40 @@

    How to add to your service

    Visual style

    - - - +

    By default, all questionnaires use DfE styling.

    + +

    Do not change the visual style unless there’s a clear user or business need. You may cause accessibility issues by customising styles.

    + +

    If you need to customise the visual style, for example to match campaign branding, you can change colours and add a decorative image (generic images which do not give any additional information to the content). Any change must still meet accessibility standards which includes testing colour contrast against WCAG levels.

    + +

    Get started

    + +

    To use ‘Get to an answer’ you must:

    + + + +

    To create a questionnaire, sign in to ‘Get to an answer’.

    + +

    For more detail on how to set up your questionnaire read the guidance in the ‘Support’ section.

    + +

    Before a questionnaire can be made live you will need to complete all the steps in the ‘Prepare to publish questionnaire’ section.

    + +

    The technical documentation for ‘Get to an answer’ provides further information on how the component works.

    + +

    Help improve this pattern

    + +

    If you would like to develop additional functionality to meet your service’s requirements, we encourage teams to build on this pattern. For example, you might need more complex question logic.

    + +

    If you would like to propose a change, you can:

    + + + From 54f3c59cabfc9798c94a80f74ef0ae88af9e085c Mon Sep 17 00:00:00 2001 From: alexleedfe Date: Fri, 6 Feb 2026 11:54:41 +0000 Subject: [PATCH 3/3] tweaking iframe code and adding a h3 --- app/views/design-system/patterns/get-to-an-answer.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/app/views/design-system/patterns/get-to-an-answer.html b/app/views/design-system/patterns/get-to-an-answer.html index f5efd421..3aa6cc89 100644 --- a/app/views/design-system/patterns/get-to-an-answer.html +++ b/app/views/design-system/patterns/get-to-an-answer.html @@ -99,10 +99,10 @@

    How it works

    It uses the existing question components from the GOV.UK design system.

    Here's an example of how this pattern works. Links on the results pages are broken to avoid any impact to the live service.

    + +
    -
    - -