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

See description of discovery tool

On this page

 

 

 

Discovery Tool Panel

Intial view

Styling

States

  1. default ('Try something new')
  2. default (preset)
  3. hover
  4. active
  5. active hover
  6. focus
  7. focus active 


States in contrast themes

  1. default ('Try something new')
  2. default (preset)
  3. hover: drop-shadow offset 2px (no blur), icon change
  4. active: inverted
  5. active hover: inverted with drop-shadow, icon change
  6. focus: 7pt border, icon change
  7. 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

> See full simplify mockup


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.