Open Source DOM Component

Reading Points

Reading time, percent, and points

by Read Write Tools
Abstract
The rwt-reading-points DOM component provides site visitors with a clue about a document's reading-level, using a descriptive learning level and experience points system.

Motivation

When user's browse technical documentation it's not always easy to know if a page is meant for first timers or advanced users. This DOM component provides that information using an ephemeral notification-style text block.

As the user reads, a timer tracks how many seconds is spent reading. As the user scrolls down, the readers progress (as percent read) is tracked. This information is saved to the user's local storage for use with the rwt-reading-summary DOM component.

In the wild

To see an example of this component in use, visit the READ WRITE SERVE website. The component is visible immediately after loading for about five seconds before fading away. To understand what's going on under the hood, use the browser's inspector to view the HTML source code and network activity.

Reference

DOM components logo Documentation READ WRITE HUB
git logo Source code github
DOM components logo Component catalog DOM COMPONENTS
npm logo Package installation npm
Read Write Stack logo Publication venue READ WRITE STACK
Read Write Tools icon

Smart tech

READ WRITE TOOLS

Read Write Hub icon

Distraction-free writing

RWDOC

BLUEPHRASE icon

Rediscover HTML

BLUE PHRASE

Read Write Serve icon

Served with pure HTTP/2

RWSERVE

Open Source DOM Component

🔗 🔎