A scored assessment for HubSpot CMS. Ask questions, score the answers three different ways, show the matching result, and hand the score and the matched result to a HubSpot form so the contact record carries the outcome. Every colour, size and word is a field.
A readiness scorecard. Answers carry point weights, the total lands in a scored band, and the result stays hidden until the visitor submits the HubSpot form. The score and the matched result name go into hidden fields on that form. Answers stack one per row, the progress bar sits above the card, and the score is drawn as a ring. One answer on the second question skips the third — that is the branching model. The colours and fonts are the ones the module ships with and no glyph is set anywhere, so this is what a buyer sees before touching a thing, and it also shows that an unused glyph reserves no room.
The same module with a different set of field values. White ground, one sans face, an indigo accent, eight-pixel corners, hairline borders and a low-contrast shadow under the card. Structurally it is also a different quiz: every answer adds a point to a named category and the highest category wins, so the score visual is switched off and the result reads as a name rather than a number. Every answer carries a glyph, the start screen and each result carry one too, and the start, next, back and start-over buttons each take one. Answers stack, progress is a row of dots inside the card, and the form comes after the result. Nothing here is custom CSS — every colour, face, size and glyph is a field on this instance.
A third set of field values: a light grey ground, white cards with no border and a soft shadow, eighteen-pixel corners, headings set large and light, and a blue accent. The start screen is switched off so the module opens on question one, answers sit two to a row, progress is a row of numbered steps, and the score is drawn large with a bar under it. Two questions carry glyphs and two do not, and on the third the glyph is set on two answers out of three — the answer without one keeps the column, so every label still starts on the same line. A question with no glyph at all reserves nothing. Scoring is a percentage of the highest total the quiz can reach, and one answer carries a negative weight to show that wrong picks can cost points.
The quiz runs on its own with no setup. The form hand-off needs three things done in HubSpot first, and it is the part worth reading twice, because a form with no hidden fields still submits and still looks fine — the outcome simply never reaches the contact.
Settings, then Properties, then Contact properties. Create these, or use your own names and put those names in the module instead.
| Internal name | Field type | Carries |
|---|---|---|
quiz_score | Single-line text | The numeric score, or the matched result name when scoring is set to Category |
quiz_result_tier | Single-line text | The name of the result that matched |
quiz_score_max | Single-line text | The highest score that path could have reached |
quiz_answers | Multi-line text | One line per question, in the order they were answered |
Single-line text is the safe choice for the score. A number property rejects a category name, so if you later switch the same quiz to Category scoring the submission fails silently.
Open the form, drag each property in, and set it to hidden. A hidden field the visitor never sees is still a real input in the page, which is what the module writes into.
Lead form, then the four property-name fields. They default to the names above. If your properties are called something else, type those names instead — the module matches on the form field name, not on a label.
The module scores the answers in the browser as soon as the last question is done, before the form is shown. It then finds the hidden inputs inside its own form wrapper and writes the values into them through the native value setter, firing an input and a change event so both the classic embed and the newer React-rendered form register the change. Writing to .value alone is ignored by the React form, which is why the setter is used.
Values are written again on HubSpot's onFormReady and onFormSubmit events, so a form that renders late still gets them. When the form is set to gate the result, the module opens the result on HubSpot's onFormSubmitted event — it listens for the event rather than watching the page for a change.
Each answer chooses one of three things: carry on to the next question, jump to a numbered question, or jump straight to a numbered result. On a multiple-choice question the first ticked answer that carries a jump wins. A jump that points at a question already answered in this run is ignored and the visitor carries on in order, so a loop cannot form.
Glyphs come from the icon picker in the page editor, so the choice is the set HubSpot ships rather than a list this module invents. One can sit on each answer, on each result, on the start screen, and on the start, next, back and start-over buttons. Every one is optional.
On a question where at least one answer carries a glyph, the answers that do not still keep the column, so every label starts on the same line. On a question where no answer carries one, nothing is reserved and there is no empty column to explain. Size, colour, the colour a chosen answer takes, and where the glyph sits on an answer that wraps are all fields under Icons.
Arrow keys move between answers and select as they go on single-choice questions. Space toggles an answer on a multiple-choice question. Enter answers and advances. Home and End jump to the first and last answer. The scale is a native range input, so it takes arrow keys, Home, End, Page Up and Page Down. Focus is visible throughout and its colour, width and offset are fields.
