The new onboarding designed for the new Revise Tone Structured Task features a set of quiz questions for the newcomer to answer:

(full specs in figma)

This quiz shows its possible answers as a pill. This technical sub-task is about creating the component needed for that, complete with styling and unit-tests.

That component will have one out of four possible types:

1. interactable (before any option was selected, the pill will be a button that emits an event on click)
2. incorrect (if the user selected the pill for the wrong answer)
3. correct (the correct answer is always highlighted)
4. non-interactable (a wrong answer that was not selected)

The copy and the type should be provided to the pill via props. There might be additional props needed, like the index.

Acceptance criteria:

• There exists a QuizPill Vue component in the revise-tone directory that can be used as-is to build the Revise Tone onboarding quiz
• That component has basic tests