Task → Practice Question Icon Mockups

4 ways to render a "practice this task" button next to each ASE task line. Same task list, four visual treatments. Click any icon below to see the hover state — nothing actually launches a practice yet, just previews.

Option A — Circular icon before the number Subtle

A small circular play-icon button sits to the left of the task number. Compact, unobtrusive, very obviously interactive.

  • 1.Inspect, repair, or replace damaged door hinges and latches.
  • 2.Repair damaged urethane bumper covers using two-sided plastic welding.
  • 3.Identify plastic types by ISO code (TPO, PP/EPDM, PUR, PC, ABS).
  • 4.Select correct GMAW wire diameter for high-strength steel.
ProsMost balanced. Doesn't shout. Clear it's a button. Stays out of the way until needed.
ConsSlightly less discoverable than chips/labels. New users may not realize it launches a test.

Option B — "Practice" chip at end of line Most discoverable

A small pill-shaped "Practice" badge floats at the right end of each task. Reads like a clear call-to-action.

  • 1.Inspect, repair, or replace damaged door hinges and latches.
  • 2.Repair damaged urethane bumper covers using two-sided plastic welding.
  • 3.Identify plastic types by ISO code (TPO, PP/EPDM, PUR, PC, ABS).
  • 4.Select correct GMAW wire diameter for high-strength steel.
ProsMost discoverable. Word "Practice" leaves zero ambiguity. Great for new users.
ConsAdds visual weight to every line. Lists with 50+ tasks can feel busy.

Option C — Ghost dumbbell at start Most compact

A faint dumbbell icon at the very start of each line. Almost invisible until hovered. Best for dense task lists.

  • 1.Inspect, repair, or replace damaged door hinges and latches.
  • 2.Repair damaged urethane bumper covers using two-sided plastic welding.
  • 3.Identify plastic types by ISO code (TPO, PP/EPDM, PUR, PC, ABS).
  • 4.Select correct GMAW wire diameter for high-strength steel.
ProsCleanest look. Task list reads like a normal numbered list until you engage with it. Best for visual flow.
ConsEasy to miss entirely. Students may never realize they can launch practice from here.

Option D — Bold orange chip Highest contrast

Bright gradient pill. Hard to miss, screams "click me." Stands out the most against the task text.

  • 1.Inspect, repair, or replace damaged door hinges and latches.
  • 2.Repair damaged urethane bumper covers using two-sided plastic welding.
  • 3.Identify plastic types by ISO code (TPO, PP/EPDM, PUR, PC, ABS).
  • 4.Select correct GMAW wire diameter for high-strength steel.
ProsMaximum discoverability. Engaging. Looks like a feature you'd advertise.
ConsVisually loud on long task lists. Can feel "marketing-y." Repeats across many lines.

Which option do you want?

Tell me which letter (A, B, C, or D) feels right and I'll wire it up to the real ASE Task List in the simulator. The button will launch a practice test filtered to the task's category and try to match a keyword from the task wording — same approach we use for the key-terms "practice this term" buttons.

My recommendation: Option A (most balanced). It's interactive and obvious without dominating the page.