Skip main navigation
We use cookies to give you a better experience, if that’s ok you can close this message and carry on browsing. For more info read our cookies policy.
We use cookies to give you a better experience. Carry on browsing if you're happy with this, or read our cookies policy for more information.

Pattern Library
Quiz progress nav

Quiz and test progress nav allows a learner to navigate through questions quickly and shows which questions they answered correctly or incorrectly.

.m-quiz-progress-nav
  %ul.m-quiz-progress-nav__list{role: 'navigation', 'aria-label': 'Quiz navigation'}
    %li.m-quiz-progress-nav__item.m-quiz-progress-nav__item--intro.is-small-screen-visible
      %a{href: "#"}
        %span.m-quiz-progress-nav__status
          = icon_tag(:info)
        Intro
    %li.m-quiz-progress-nav__item.m-quiz-progress-nav__item--current.is-small-screen-visible
      %a{href: "#"}
        %span.m-quiz-progress-nav__status
        1
    %li.m-quiz-progress-nav__item.is-small-screen-visible
      %a{href: "#"}
        %span.m-quiz-progress-nav__status
        2
    %li.m-quiz-progress-nav__item.m-quiz-progress-nav__item--incorrect
      %a{href: "#"}
        %span.m-quiz-progress-nav__status
          = icon_tag(:cross)
        3
    %li.m-quiz-progress-nav__item.m-quiz-progress-nav__item--correct
      %a{href: "#"}
        %span.m-quiz-progress-nav__status
          = icon_tag(:tick)
        4
    %li.m-quiz-progress-nav__item
      %a{href: "#"}
        %span.m-quiz-progress-nav__status
        5
    %li.m-quiz-progress-nav__item.m-quiz-progress-nav__item--summary
      %a{href: "#"}
        %span.m-quiz-progress-nav__status
        End

Assessment navigation consists of an introduction and summary items at either end, with any number of question items in the middle.

The current item, whether question, introduction or summary, is highlighted in pink, with other items blank and hovering to blue.

The responsive pattern is that three items are visible on a smaller screen at one time, so the current item is visible in the middle of a smaller screen, with one item either side also shown (view by shrinking your screen).

Quiz navigation follows the same pattern as test navigation, but without the introduction and summary steps.

The quiz navigation pattern somewhat differs from the usual FutureLearn past-future colour spectrum, as questions can be answered in any order, but once they are answered they are blue.

Step navigation within steps follows the same past-future pattern as the rest of the FutureLearn progress indicators, with steps in the past indicated with blue, current with pink and future with blank.