--- title: Quiz & Scorecard Pro — Scored Assessment & Lead Quiz Module for HubSpot description: Scored assessment module for HubSpot CMS. Points, category and percentage scoring, branching answers, result tiers, and a HubSpot form that carries the score and matched tier onto the contact record. --- [![StudioNope Themes](https://www.nopethemes.com/hubfs/studio-nope-themes-logo.png)](https://www.nopethemes.com?hsLang=en) [Get the module →](https://ecosystem.hubspot.com/marketplace/website) HubSpot CMS Module # Quiz & Scorecard Pro 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. [Get the module](https://ecosystem.hubspot.com/marketplace/website) [See it live ↓](https://www.nopethemes.com/quiz-scorecard-pro#demo) Demo 1 ## Total points, with the result behind a form 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. Live module Scorecard ## How much of your site can your team change without a developer? Six questions about how your pages get built and who has to be in the room to change them. You get a score out of eighteen and a short read on what to fix first. Start the scorecard Two minutes. Six questions. ### How does a new landing page get built today? Pick the one that happens most often. Answers A developer codes it from scratch Marketing assembles it from existing modules Marketing starts it, a developer finishes it Back Next ### When was the theme last updated? Answers Within the past year One to three years ago I do not know Back Next ### Which of these are already set up? Tick everything that applies. Answers A template for every page type you publish Colour and font settings held in theme fields A staging page or sandbox to test changes in Back Next ### Can a marketer swap a hero image without raising a ticket? Answers Yes No Back Next ### How confident is the team publishing a page unaided? 0 Not at all Completely Back Next ### From brief to live, how long does a new page take? Answers Under a day A few days Weeks Back Next One step left Tell us where to send the full breakdown and your score appears straight away. We use this to send your result. Back 0 Your score Blocked ### Every change goes through someone else Your pages work, but the team cannot touch them. The fastest fix is not a rebuild. Take the three page types you publish most and move those onto drag-and-drop templates, then leave the rest alone until they earn the work. [See what a rebuild involves](https://www.studionope.com/services) 0 Your score Workable ### You can move, but not quickly Some of the site is editable and some of it is not, so every request starts with finding out which kind it is. Write down which page types are self-serve and which are not. That list is usually the whole project. [See what a rebuild involves](https://www.studionope.com/services) 0 Your score Self-serve ### Your team can ship without waiting The build is doing its job. The next gain is in speed rather than access: page templates that already carry the right sections, and a set of modules the team reaches for by name. [See what a rebuild involves](https://www.studionope.com/services) Start over Demo 2 ## Category scoring, with a glyph on every answer 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. Live module Four questions ## Which kind of HubSpot builder are you? Four questions, no right answers. Pick whichever option you would reach for first. Find out Under a minute. ### The part of a launch you look forward to Answers Wiring up the template Mapping the funnel Getting the data clean Back Next ### A page is underperforming. What do you check first? Answers The layout and where the form sits The offer and who it is aimed at Whether the tracking is firing at all Back Next ### The tab you have open right now Answers Design Manager Campaign analytics Workflows and lists Back Next ### The compliment you would rather get Answers That was well built That was well positioned That has never broken once Back Next ### You would rather fix the template than the brief You think in modules and reusable parts, and you can tell within a minute whether a page was assembled or coded. The risk is building for a campaign that was never going to work. Ask what the page is for before you open Design Manager. [Browse the module library](https://www.studionope.com/modules) ### You start with the offer and work backwards You know who the page is for and what it has to say before anyone talks about layout. The risk is handing over a plan the build cannot carry. Sit with whoever owns the template early. [Browse the module library](https://www.studionope.com/modules) ### You are the reason anything still works Lists, properties, workflows and tracking are yours, and you find the broken thing before anyone reports it. The risk is that the tidiness is invisible. Put a number on what the cleanup saved. [Browse the module library](https://www.studionope.com/modules) Want the long version? Leave an address and we will send the full write-up for your profile. One email. No list. Take it again Demo 3 ## Percentage scoring, with glyphs on some answers and not others 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. Live module 1234 ### Does uploading a template republish the pages built on it? Think about what happens after hs upload finishes. Answers Yes No Back Continue ### What does a drag-and-drop area let an editor do? Answers Add and rearrange modules on that page Edit the theme stylesheet Change the domain the page is served on Back Continue ### Which of these end up on the contact record? Tick everything that applies. One of them costs you a point. Two of these carry a glyph and one does not, so this row is where the reserved slot earns its keep. Answers Form submissions Page view history The theme colour settings Back Continue ### You edit a global module on one page. What happens? Answers It changes everywhere that module appears It changes on that page only Nothing until each page is republished Back Continue 0 Correct Worth a read ### A few of these are worth looking up The ones that catch people out are global modules and what an upload does and does not do. Both are quick reads and both cause real incidents when they are guessed at. [Read the notes](https://www.studionope.com/blog) 0 Correct Solid ### You know your way around You have the everyday mechanics. The gaps left are the ones that only show up on a big build, which is usually where a checklist earns its keep. [Read the notes](https://www.studionope.com/blog) 0 Correct Full marks territory ### Not much here you had to think about You have shipped enough to know where the platform bites. The interesting problems are further in: field inheritance, editor performance and how a theme survives a rebrand. [Read the notes](https://www.studionope.com/blog) Try again ## What the buyer sets up 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. ### 1. Create the contact properties 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. ### 2. Add them to the form as hidden fields 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. ### 3. Point the module at them 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. ## How the score reaches HubSpot 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. ## Scoring modes - **Total points** — every chosen answer adds its weight. Results match on a range. - **Category** — every answer adds its weight to a named category. The highest category wins and the result matching that key is shown. No number is displayed. - **Percentage** — the total measured against the highest total reachable on the questions the visitor was asked. Because a branch can skip questions, the maximum follows the path taken, so a short path can still score full marks. Set a fixed maximum instead if you would rather it did not. ## Branching 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. ## Icons 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. ## Keyboard 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. [![StudioNope Themes](https://www.nopethemes.com/hubfs/studio-nope-themes-logo.png)](https://www.nopethemes.com?hsLang=en) Quiz & Scorecard Pro · Studio Nope [Get the module](https://ecosystem.hubspot.com/marketplace/website)