cognitive-engineering-lab / mdbook-quiz

Interactive quizzes for Markdown
http://cel.cs.brown.edu/mdbook-quiz/
Apache License 2.0
106 stars 23 forks source link

Add naive feedback highlight system #5

Closed connorff closed 2 years ago

connorff commented 2 years ago

Overview

This PR adds a (currently) naive system for adding and persisting feedback on book content.

Video example

https://user-images.githubusercontent.com/40175891/182223568-45bab38c-b625-47a6-b2b4-fc32dc67fc80.mp4

Implementation

The feedback.tsx entrypoint instantiates a SelectionRenderer which does a couple things:

  1. Renders any feedback currently stored in local storage as a yellow highlight
  2. Tracks the user's current selection range (what they're highlighting in the document) and renders a tooltip over the selection
    • The tooltip component is found in tooltip.tsx
    • Clicking on the question mark icon in the tooltip triggers a modal for giving feedback (component in modal.tsx)
  3. Stores new feedback in local storage when created
  4. Displays a tooltip over existing feedback highlights when they're hovered over

Serialization of feedback ranges is done by web-highlighter. Their serialization strategy does not seem well-suited for dynamic content, something that will need to be fixed for a production-ready version of this feature.

Additional considerations

Todo

willcrichton commented 2 years ago

Closing this and moving everything to the rust-book repo.