NO PRODUCT SETTINGS FOUND FOR:

documentation

Gentle remainder that the product name comes from the `origin` first subfolder (after `/pms` ).

number_input – PM Fragment Guide

The number_input fragment (f_type: number_) lets you define numeric questions with bounds, step, units, tolerance, and feedback using a YAML block embedded in Markdown. The backend parses it into a number_ fragment; the frontend renders it with a Lit component.

Authoring (YAML)

Use a fenced code block with yaml:

Fields

Field	Type	Required	Description
`NumberInputPCA`	string	yes	Version tag (e.g., `v0.0.1`)
`id`	string	recommended	Unique identifier
`type`	string	yes	Must be `number`
`label`	string	recommended	Prompt shown above input
`min`	number	optional	Minimum allowed value
`max`	number	optional	Maximum allowed value
`step`	number	optional	UI increment/decrement step
`unit`	string	optional	Displayed next to the input
`correct`	number	optional	Expected answer
`tolerance`	number	optional	± margin around `correct`
`correct_values`	array	optional	List of `{ value, tolerance }` accepted ranges
`flag`	number	optional	i‑radio compatibility (20=correct, 21=wrong, 29=explain)
`feedback_correct`	string	optional	Message shown on success
`feedback_incorrect`	string	optional	Message shown on failure
`hint`	string	optional	Always-visible hint below input

Notes: - Use either correct (+ tolerance) or correct_values. - All numeric values may be integers or floats.

Quick Examples

Integer exact:

Decimal with unit + tolerance:

Multiple acceptable ranges:

Rendering behavior

Server parses YAML → number_ fragment.
Template renders <pm-number-input> and injects the data.
Component shows:
A parameter table (id, min, max, step, unit, correct, tolerance, etc.)
A numeric input with unit
A live value preview (KaTeX font for aesthetic alignment with math)
A Check button and feedback region

Styling

The pm-number-input component inherits theme colors from the PM container.

Text size: larger (approx. text-lg) for input value
Font stack includes KaTeX_Main for a math-friendly look
Success/Error colors flow from CSS variables exposed on .pm-container

Relevant CSS (already shipped in @core/css/pm.css):

.fragment-wrapper[data-f_type="number_"] { margin: 1.25rem 0 1.5rem; }
pm-number-input { --ok: var(--pm-ok); --err: var(--pm-err); }

Live Examples

PM route: /pm/examples/number_input_example.md?format=html
Standalone component demo: /static/js/examples/pm-number-input-example.html