Brand and design · Hi-fi screens · Hi-fi screens
Hi-fi: S21 Feedback · Feedback
Contract, a board per state (full, low-confidence, achieved, playback, exemplar-pending, exemplar-failed, loading, empty, error, offline), tokens and strings.
Generated by
botgumi-design indexfrom../../screens.json. Edit that file, not this page.
Stage: hifi · Key: feedback/feedback · Data-binding map: bindings.md
Drawn in the gallery: Feedback. Each board is the committed HTML in screens/, drawn on the example data in docs/api/examples/.
Contract
- full: Summary → 4 dimensions (each with evidence) → one action (ink) → evidence → key points → model answer (labelled reference) → helpful?
- low-confidence: confidence = low: warning banner with confidence_note; a dimension without evidence shows 'not enough evidence' and does not lower the score; one action still shown.
- achieved: achieved_previous_action = true: 'You did it ✓' banner comes first; the new one-action moves to the next micro-skill.
- playback: Evidence row tapped: signed audio URL fetched, playback seeks to start_ms and stops at end_ms; row highlighted.
- exemplar-pending: TTS is async (voice per article language): exemplar.status = pending → skeleton + spinner; poll until ready.
- exemplar-failed: exemplar.status = failed: text fallback + retry; never blocks the second take.
Flows: F2 Daily quest.
Reads and calls:
GET /v1/attempts/{id} → assessmentGET /v1/attempts/{id}/exemplarGET /v1/attempts/{id}/audioPOST /v1/assessments/{id}/feedback {helpful, reason?}
Local state:
local:player.statelocal:player.positionMs
Boards
One row per state. A state without boards of its own says what shows it.
| State | Board | Example data |
|---|---|---|
| full | zh-Hans · en | assessment-round1.json (zh-Hans · en), assessment-round1-achieved.json (zh-Hans · en), assessment-round1-lowconf.json (zh-Hans · en), exemplar-failed.json (zh-Hans · en), exemplar-pending.json (zh-Hans · en), exemplar-ready.json (zh-Hans · en), article-long.json (zh-Hans · en), article-product.json (zh-Hans · en) |
| low-confidence | zh-Hans · en | assessment-round1.json (zh-Hans · en), assessment-round1-achieved.json (zh-Hans · en), assessment-round1-lowconf.json (zh-Hans · en), exemplar-failed.json (zh-Hans · en), exemplar-pending.json (zh-Hans · en), exemplar-ready.json (zh-Hans · en), article-long.json (zh-Hans · en), article-product.json (zh-Hans · en) |
| achieved | zh-Hans · en | assessment-round1-achieved.json (zh-Hans · en), exemplar-failed.json (zh-Hans · en), exemplar-pending.json (zh-Hans · en), exemplar-ready.json (zh-Hans · en), article-long.json (zh-Hans · en), article-product.json (zh-Hans · en) |
| playback | zh-Hans · en | assessment-round1.json (zh-Hans · en), assessment-round1-achieved.json (zh-Hans · en), assessment-round1-lowconf.json (zh-Hans · en), exemplar-failed.json (zh-Hans · en), exemplar-pending.json (zh-Hans · en), exemplar-ready.json (zh-Hans · en), article-long.json (zh-Hans · en), article-product.json (zh-Hans · en) |
| exemplar-pending | zh-Hans · en | assessment-round1.json (zh-Hans · en), assessment-round1-achieved.json (zh-Hans · en), assessment-round1-lowconf.json (zh-Hans · en), exemplar-pending.json (zh-Hans · en), article-long.json (zh-Hans · en), article-product.json (zh-Hans · en) |
| exemplar-failed | zh-Hans · en | assessment-round1.json (zh-Hans · en), assessment-round1-achieved.json (zh-Hans · en), assessment-round1-lowconf.json (zh-Hans · en), exemplar-failed.json (zh-Hans · en), article-long.json (zh-Hans · en), article-product.json (zh-Hans · en) |
| loading | no board of its own: From states.md (Feedback): not reachable before assessed |
|
| empty | no board of its own: From states.md (Feedback): — | |
| error | no board of its own: From states.md (Feedback): exemplar feedback--exemplar-failed; audio URL failure → toast · fatal: — | |
| offline | no board of its own: From states.md (Feedback): cached assessment; playback & exemplar disabled with "needs network" |
The boards
Each state as drawn (393 × 852), one board per locale. Open a board on its own for its spec panel.
full
low-confidence
achieved
playback
exemplar-pending
exemplar-failed
Tokens used
By path in ../../system/tokens.source.json.
| Token | Where |
|---|---|
color.accentPrimary |
.btn--primary |
color.accentPrimaryPressed |
.btn--primary |
color.bandBasic |
inline |
color.bandClear |
inline |
color.bgCanvas |
.device, .dock, .navbar, .screen |
color.bgInverse |
.one-action, .pbtn, .player |
color.bgInverseRaised |
.icon-btn, .oa-example, .one-action, .skel … |
color.bgSunken |
.btn, .card--sunken, .dim-bar, .dim-row … |
color.bgSurface |
.btn--secondary, .card, .list, inline |
color.dimEfficiency |
inline |
color.dimFluency |
inline |
color.dimKeyInfo |
inline |
color.dimStructure |
inline |
color.lineHairline |
.btn--secondary, .btn--sm, .dim-row, .evidence … |
color.lineStrong |
.btn--secondary, .player, .tag--line, .track |
color.reward |
.oa-head, .one-action, inline |
color.statusInfoSoft |
.banner--info |
color.statusSuccess |
.banner--success, .c-success |
color.statusSuccessSoft |
.banner--success |
color.statusWarning |
.banner--warning, .c-warning |
color.statusWarningSoft |
.banner--warning |
color.textDisabled |
.btn |
color.textOnAccent |
.btn--primary |
color.textOnInverse |
.icon-btn, .oa-example, .one-action, .pbtn … |
color.textOnInverseSecondary |
.c-on-inverse-2 |
color.textPrimary |
.banner--info, .banner--success, .banner--warning, .btn--secondary … |
color.textSecondary |
.c-secondary, .tag |
color.textTertiary |
.c-tertiary, .list-row, .score-ring, .step-count … |
color.topicViolet |
.evidence, .is-playing, .ts-chip |
color.topicVioletSoft |
.evidence, .is-playing |
radius.button |
.btn |
radius.card |
.card |
radius.lg |
.one-action |
radius.md |
.card--md, .list |
radius.pill |
.btn--sm |
radius.sm |
.banner, .oa-example, .one-action |
radius.xs |
.tag |
space.gutter |
.dock, .navbar, .pad, .section-head |
space.s3 |
.section-head |
space.s5 |
.card |
space.s6 |
.screen |
space.safeBottom |
.dock, .has-dock, .screen |
space.safeTop |
.device, .screen |
space.section |
.section-head |
space.sizeCtaHeight |
.btn, .has-dock, .screen |
space.sizeHitMin |
.icon-btn |
space.sizeNavbarHeight |
.navbar |
space.sizeTabbarHeight |
.screen |
typography.callout |
.t-callout |
typography.caption1 |
.t-caption |
typography.footnote |
.t-footnote |
typography.headline |
.t-headline |
typography.subheadline |
.t-subhead |
typography.title3 |
.t-title3 |
Strings
app.name, band.basic, band.clear, common.back, common.retry, common.step_of.a11y, diag.result.ring_label, dimension.efficiency, dimension.fluency, dimension.insufficient, dimension.key_info, dimension.structure, dimension.weights, feedback.achieved, feedback.confidence.high, feedback.confidence.low, feedback.cta, feedback.dims.title, feedback.evidence.hint, feedback.evidence.pause.a11y, feedback.evidence.title, feedback.exemplar.failed, feedback.exemplar.intro, feedback.exemplar.pending, feedback.exemplar.play.a11y, feedback.exemplar.tag, feedback.exemplar.title, feedback.helpful.no.a11y, feedback.helpful.title, feedback.helpful.yes.a11y, feedback.keypoints.count, feedback.keypoints.title, feedback.low_confidence, feedback.meta, feedback.nav, feedback.not_achieved, feedback.one_action.basis, feedback.one_action.listen, feedback.ring_label, home.greeting.format, home.quest.focus.last, micro.conclusion_first, micro.three_points, notif.daily.title, onboarding.progress.a11y, paywall.calendar.rest, paywall.projection.score, processing.nav.round1
Notes for the app tracks
Motion, haptics, Dynamic Type and VoiceOver: engagement.md, tokens.md §6–7 and
ios-handoff.md. Open a board with ?theme=dark&dt=1.35&binds=1 to see dark mode, the largest
tested type size and every bound element.
Tracking-plan events: no tracking plan page exists yet; ADR-001 D12 names the events.
Tokens with no group in system/tokens.source.json yet (they stay in tokens.css): --dt, --elevation-1, --elevation-2, --fill, --font-family-numeric, --font-family-reading, --font-family-text, --font-weight-bold, --font-weight-medium, --font-weight-regular, --font-weight-semibold, --motion-duration-countup, --motion-duration-fast, --motion-duration-instant, --motion-duration-slow, --motion-ease-emphasized, --motion-ease-standard.