Answer Desk
An FAQ section made as a help desk: a search field in a recessed well with an LCD that counts the answers that match, topic keys with a lamp for the chosen one, the questions as numbered rows with your words marked, and the answer on a reading panel that asks whether it helped.
What it is for
The help or FAQ section of a product with more questions than a page reads well: support pages, pricing pages, docs landings.
Everything you set here is what the Code and Prompt tabs give you.
Seats open in 11 days. Want one email that morning?
Datasheet
- Mechanism
- Search as you type all words, Accent folded matching, Marked matches without html, Lcd match count, Topic radio tray with counts, Answer panel beside or under, Rows by arrow keys, Rate the answer, Hand off to a person, Container query layout, Concentric radii, Finish following
- Stack
- Vanilla ES modules, CSS
- Needs
- Nothing, no dependencies
- States
- 10 documented
- Version
- 0.1.0
- Licence
- With a Pass
States
- At restThe heading, then the desk: an empty search well, the LCD at 12/12, Every topic chosen with its lamp lit, twelve numbered questions, the first answer open on the panel. Nothing runs.
- TypingEach keystroke narrows the list to the answers holding every word typed (case and accents ignored), marks the words in each question, updates every topic's count and the LCD, and says the count politely. ans-search fires with { query, count }.
- Nothing matchesThe list says “Nothing here matches …” and offers Clear the search; the panel is hidden; the LCD reads 00.
- Topic chosenIts key stands raised in the tray with its lamp lit; the list narrows to it.
- Answer openedA click or Enter on a row puts it in the recessed panel and marks the row as pressed in; ans-select fires with { id }.
- RatedYes or No latches down, a status line thanks the reader, and ans-rate fires with { id, useful }.
- KeyboardDown from the field steps into the rows; Up and Down, Home and End move between them; Up from the first goes back to the field; Esc in the field clears it.
- Tablet and phoneUnder 820px the topics wrap above the list and the answer opens directly under its question; under 520px the LCD sits under the field and the contrast key fills the width.
- Reduced motionKeys change without transitions; nothing else moves.
- FinishesOn a page with the kit's finish tokens it is drawn from them, in any of the twelve; otherwise aluminium or graphite by data-finish, tone or system.
Notes
Where the FAQ Drawer is a card index you pull one question out of, this is a desk you search. Two words typed narrow the list as you go, every topic key shows its count for them and an LCD shows how many answers match; the answer opens on a panel beside the list, or right under its question on a phone. Yes and No keys ask whether it helped (ans-rate), and a contrast key hands the words searched to a person (ans-ask). Native radios for topics, buttons for questions, a polite live count, arrow keys between field and rows. CSS and a little DOM, no dependency, every finish of the kit.
Original composition. The product (Plover, an invoicing app), its plans, prices, places and every question and answer are sample copy for an invented product, and the preview says so. The desk, keys, LCD and lamp are CSS drawn here, in the kit's tokens; no image. Faces: Instrument Sans and Geist Mono (SIL OFL 1.1), the kit's own.
Anatomy
Search as you type all words, Accent folded matching, Marked matches without html, Lcd match count, Topic radio tray with counts, Answer panel beside or under, Rows by arrow keys, Rate the answer, Hand off to a person, Container query layout, Concentric radii, Finish following
Usage notes
The help or FAQ section of a product with more questions than a page reads well: support pages, pricing pages, docs landings. Where the FAQ Drawer is a card index you pull one question out of, this is a desk you search. Two words typed narrow the list as you go, every topic key shows its count for them and an LCD shows how many answers match; the answer opens on a panel beside the list, or right under its question on a phone. Yes and No keys ask whether it helped (ans-rate), and a contrast key hands the words searched to a person (ans-ask). Native radios for topics, buttons for questions, a polite live count, arrow keys between field and rows. CSS and a little DOM, no dependency, every finish of the kit.
Options
| Option | Type | Description |
|---|---|---|
| label | text | Label |
| title | text | Heading |
| lead | text | Lead |
| topic | enum | Topic at start |
| chosen | enum | A01 to A12, in the order of the list. |
| query | text | Words already in the field; search() sets it from outside. |
| rate | boolean | Yes and No keys under each answer; fires ans-rate. |
| ask | text | Empty leaves out the foot. Fires ans-ask with the words searched. |
| askNote | text | Beside the key |
| finish | enum | Auto takes the page’s own finish tokens if it has them, then its data-finish, then the visitor’s system. |
Methods
- select
- search
- update
- destroy
How it works
Original composition. The product (Plover, an invoicing app), its plans, prices, places and every question and answer are sample copy for an invented product, and the preview says so. The desk, keys, LCD and lamp are CSS drawn here, in the kit's tokens; no image.