.pn-questionnaire | Root wrapper (also has data-questionnaire attribute) |
.pn-questionnaire__intro | Intro screen container |
.pn-questionnaire__intro-text | Introduction text area |
.pn-questionnaire__intro-actions | Start button wrapper |
.pn-questionnaire__intro-footer | Text below the start button |
.pn-questionnaire__step | Question step container (has data-active-step attribute) |
.pn-questionnaire__progress | Progress indicator wrapper |
.pn-questionnaire__progress-bar | Grey track of the progress bar |
.pn-questionnaire__progress-fill | Coloured fill (width set inline via progressPercentage) |
.pn-questionnaire__progress-text | "Step X of Y" text |
.pn-questionnaire__progress-note | Dynamic steps note below the bar |
.pn-questionnaire__context-content | Embedded tt_content element |
.pn-questionnaire__question-text | Question text area |
.pn-questionnaire__help-text | Help text below question |
.pn-questionnaire__form | The answer form |
.pn-questionnaire__answers | Fieldset wrapping all answer inputs |
.pn-questionnaire__answer-option | Wrapper for one answer option |
.pn-questionnaire__answer-option--radio | Modifier for radio inputs |
.pn-questionnaire__answer-option--checkbox | Modifier for checkbox inputs |
.pn-questionnaire__answer-option--yes-no | Modifier for yes/no inputs |
.pn-questionnaire__radio | Radio input |
.pn-questionnaire__checkbox | Checkbox input |
.pn-questionnaire__answer-label | Label for an answer option |
.pn-questionnaire__scale | Scale question wrapper |
.pn-questionnaire__scale--radio | Modifier: radio button display |
.pn-questionnaire__scale--range | Modifier: range slider display |
.pn-questionnaire__scale-options | Row of scale radio buttons (radio display only) |
.pn-questionnaire__scale-option | One scale value (radio display only) |
.pn-questionnaire__scale-label | Label for one radio scale value |
.pn-questionnaire__scale-range-track | Wrapper for the slider input and output (range display only) |
.pn-questionnaire__scale-range-label--min | Min endpoint label (range display only) |
.pn-questionnaire__scale-range-label--max | Max endpoint label (range display only) |
.pn-questionnaire__range | The <input type="range"> element |
.pn-questionnaire__range-value | The <output> element showing the live selected value |
.pn-questionnaire__error | Client-side validation error message (hidden by default) |
.pn-questionnaire__required-mark | Asterisk rendered inline after the question text for required questions |
.pn-questionnaire__nav | Previous / Next / Reset button wrapper |
.pn-questionnaire__btn | Base button class |
.pn-questionnaire__btn--primary | Primary action button |
.pn-questionnaire__btn--secondary | Secondary action button (Previous) |
.pn-questionnaire__btn--reset | Reset / Start over button |
.pn-questionnaire__result | Result container |
.pn-questionnaire__result--error | Modifier when no result page matched |
.pn-questionnaire__result-headline | Result headline |
.pn-questionnaire__result-score | Score display |
.pn-questionnaire__result-body | Result body text |
.pn-questionnaire__result-cta | CTA button wrapper |
.pn-questionnaire__result-reset | Reset button on result page |
.pn-questionnaire__advice-blocks | Advice blocks container |
.pn-questionnaire__advice-block | One advice block |
.pn-questionnaire__advice-block--always | Modifier for always-visible blocks |
.pn-questionnaire__advice-block--score_range | Modifier for score-range blocks |
.pn-questionnaire__advice-block--specific_answer | Modifier for specific-answer blocks |
.pn-questionnaire__advice-block--scale_range | Modifier for scale-range blocks |
.pn-questionnaire__advice-block-headline | Advice block headline |
.pn-questionnaire__advice-block-body | Advice block body text |
.pn-questionnaire__answer-summary | Answer summary container |
.pn-questionnaire__summary-item | One question/answer pair in the summary |
.pn-questionnaire__summary-question | Question text in summary |
.pn-questionnaire__summary-answers | Answer text in summary |