Rebuild flashcards

[didoesdigital]

Overview

It's time to rebuild the flashcards from the ground up to:

A) not use a carousel, B) use a decent spaced repetitions model, C) use a more suitable data structure, D) be accessible to screen reader, keyboard, and touch device users E) responsive, styled, and with efficient animations.

Background

The flashcards are built with pure-react-carousel, but a fork that has a callback to get the current slide. Working with this carousel has been awkward for Typey Type's needs (particularly the API and responsive behaviour). The final design and interaction of the flashcards turned out to not need a swipeable interface. It would be enough to have buttons that transition the cards. Instead of a carousel package to assist with the swipe gestures, it could be simpler to show a transition animation for cards when the buttons are clicked.

The spaced repetitions model is primitive. It's a rough approximation of Pimsleur's graduated-interval recall. This is an opportunity to build something more sophisticated.

The data structure could more closely reflect what's actually needed. Each "card" needs a "front" showing the word and a "back" showing the brief. The "back" could potentially display the brief as a steno diagram or as text, more than 1 possible text brief, and other metadata, such as how many times the flashcard has been seen.

To be accessible to a screen reader, the flashcards could possibly announce the "front" word and the "back" brief on card transition using live regions. If not using live regions, the UI might need to be optimised for making it efficient to switch between the transition buttons and the card face.

The flashcards are intended to be used on-the-go on mobile devices. They need to respond to changes in orientation e.g. from landscape to portrait. On button taps, they could use a roll or slide fade transition along the X axis between cards and possibly a flip transition on the card between front and back.

Approach

Remove the carousel package, create a new data structure for the flashcards, develop the flashcards with a new spaced repetitions model, rebuild roughly the same UI with accessible content and transitions on button presses instead of swipes.