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, so this is what a buyer sees before touching the style fields.
The same module with a different set of field values. Paper background, a serif face for the title, question and result headline, square corners, a hard rule under the card and a terracotta accent. 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. Answers stack centred, progress is a row of dots inside the card, and the form comes after the result. Nothing here is custom CSS — every colour, face and size is a field on this instance.
A third set of field values: near-black surfaces, a grotesk face at a tighter, heavier scale, and a selected answer that inverts to a bright fill. 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. 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.
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.
