PGA Preference Discovery Tool June 9
Discovery tool mocked up for demo in CK-12 Electron Resource. For the demo the following presets would be used:
- enlarge
- increase text size 1.5x
- line spacing 1.3
- high contrast
- black on white
- bold and underline links
- increase inputs and button size
- open sans, san-serif (*default font: source sans, sans-serif)
- low contrast
- light grey (#bdbdbb) on dark grey (#555555)
- roboto slab, serif
- underlined links
- simplify
- article only
- add table of contents
- increases linespacing 1.2x
- increases text size 1.2x
- speak
- turns on text to speech
- extra words
- alt text and long description visible for images (only for images larger than 300px w and 200px height)
- show transcripts
On this page
Discovery Tool Panel
Intial view
Styling
States
- default ('Try something new')
- default (preset)
- hover
- active
- active hover
- focus
- focus active
States in contrast themes
- default ('Try something new')
- default (preset)
- hover: drop-shadow offset 2px (no blur), icon change
- active: inverted
- active hover: inverted with drop-shadow, icon change
- focus: 7pt border, icon change
- focus active: inverted with 7pt border, icon change
Try something new
After clicking 'Try something new' two random presets will be enabled and the rest disabled. The user will still be able to individually enable/disable the presets as they desire.
On hover, preset hover style animates one by one. On click, check boxes fade going from large to regular size and preset background changes to yellow.
Enlarge
High Contrast
Low Contrast
Low contrast activated
Low contrast applied to panel
After panel is collapsed and re-expanded
Simiplify
Simplify activated
Table of Contents
TOC on large window
Open
Selection
Selected
TOC on small window
Open
Selection
Selected
Speak
> See Text-to-speech walkthrough
Extra Words
Extra words activated
Panel collapsed
Showing/hiding image descriptions
Available without extra words preset
Save to Cloud
Our first iteration of the Discovery Tool involves Dinosaur content.