Quiz Progress

The Quiz Progress shows a learner how they are progressing through a set of quiz/test questions, and allows them to navigate through them.

How it works

The Quiz Progress component is designed to allow learners to navigate through quiz/test questions to answer them in any order, and show them their progress by indicating whether questions have been completed or not and if they have been answered correctly or incorrectly.

How it works

The Quiz Progress component is designed to allow learners to navigate through quiz/test questions to answer them in any order, and show them their progress by indicating whether questions have been completed or not and if they have been answered correctly or incorrectly.

The component consists of a horizontal line with a variable number of steps spaced equally apart. The steps on the line include:

• an introductory information step at the start (this is displayed as a square, with the word ‘intro’ below)

• a variable number of question steps (these are displayed as circles with the question number below)

• an optional summary step at the end (this is displayed as a square with the word ‘end’ below)

Steps on the line are displayed white with a grey keyline as standard.

The current step, whether question, introduction or summary, is indicated by the shape being enlarged and having a blue keyline.

Once a question is answered its circle becomes blue and an icon is displayed within the circle to indicate if it was answered correctly or not – a tick if correct, a cross of incorrect.

The shapes on the line enlarge slightly when they are hovered over.

Implementation

QuizProgress.Intro

QuizProgress.Item

QuizProgress.Summary