Skip to content

Instantly share code, notes, and snippets.

@ephraimbel

ephraimbel/CRAM-Deck-Page-Features.md

Created January 3, 2026 04:08
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ephraimbel/ac85a0c4ccd828ed9d3931f1b915159f to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ephraimbel/ac85a0c4ccd828ed9d3931f1b915159f to your computer and use it in GitHub Desktop.
Download ZIP
CRAM App - Deck Page Features & Study Session Specifications
Raw
CRAM-Deck-Page-Features.md

CRAM - Deck Page Features & Study Session Specifications

Overview

This document specifies the Deck Page (Deck Detail View) and Study Session features for the CRAM mobile flashcard app. This covers everything from the deck overview, card management, settings, to the study session flow.

DESIGN SYSTEM REMINDER

  • Accent Color: Orange (#FF6B35) - Use for primary buttons, progress indicators, icons
    • Theme: Clean, minimal, Notion-like aesthetic
    • Dark Mode: Primary focus with dark backgrounds
    • Typography: Clear, readable fonts with good contrast

DECK PAGE (DECK DETAIL VIEW)

Header Section

When user navigates to a deck, display:

Navigation Bar:

  • Back arrow (left) - Returns to Library/Home
    • Breadcrumb: "Home / [Deck Name...]"
    • Right side icons: Embed code icon, Share icon, More menu ()

Deck Title Section:

  • Large deck title text
    • "Learning algorithm:" label with algorithm name (e.g., "Spaced repetition") and info (i) icon
    • Tapping info icon shows tooltip explaining the algorithm

Study Stats Card

Display a prominent card showing today's study progress:

Main Number:

  • Large number showing "cards for today" (e.g., "10" with "cards for today" subtitle)

Three Stat Columns:

  1. Not studied (with + icon): Count of new cards not yet seen
    1. Learning (with clock icon): Count of cards currently in learning phase
    1. Mastered (with checkmark/badge icon): Count of mastered cards

Study Button:

  • Large prominent button: "Study cards"
    • Uses accent color (Orange #FF6B35)
    • Full width within card

Cards In Deck Section

Section Header:

  • "Cards in deck (X)" where X is total card count
    • Info (?) icon that shows help tooltip

Progress Bar:

  • Visual progress bar showing distribution
    • Three colors: Gray (Not studied), Green (Learning), Blue (Mastered)
    • Legend below showing exact counts for each status

Card List Controls:

  • Search field: "Search cards" with search icon
    • Sort dropdown: Default "Newest" with options:
    • Next review (by upcoming review date)
  • - Newest (most recently created first)

  •   - Oldest (oldest first)

  •     - A-Z (alphabetical)

  •       - Z-A (reverse alphabetical)

  •       - Sort direction toggle icon

  •       - "Filters" button

Filter Panel (opens as slide-in or dropdown):

  • "Filter by" header with "Reset" link
    • Learning status section:
    • Not studied (checkbox/pill)
  • - Learning (checkbox/pill)

  •   - Mastered (checkbox/pill)

  •   - **Card status section:**

  •     - Active (checkbox/pill)

  •       - Frozen (checkbox/pill)

Card List Items

Each card in the list displays:

  • Question text (primary line, white/light text)
    • Answer preview (secondary line, gray/muted text)
    • Three-dots menu () on right side
    • Cards with "Frozen" status show a "Frozen" badge/label

Card Tap Behavior:

  • Tapping anywhere on card (except ) opens Card Preview Modal

Add Cards Button:

  • Floating or fixed button: "Add cards"
    • Opens card creation flow

CARD PREVIEW MODAL

When user taps on a card from the list:

Modal Header:

  • X close button (left)
    • Card position: "1/37 cards" (center)
    • Edit pencil icon
    • More menu ()

Card Content Area:

  • Shows question text prominently
    • "Frozen" badge if card is frozen
    • Tap/click to reveal answer
    • Divider line separates question from answer

Navigation:

  • Left arrow for previous card
    • Right arrow for next card
    • Swipe left/right on mobile

Card Context Menu (from ):

  1. Select - Enter multi-select mode
    1. Edit - Open edit modal (same as pencil icon)
    1. Freeze / Unfreeze - Toggle freeze status
    1. Move - Move to different deck
    1. Reverse - Create reversed card (swap Q&A)
    1. Duplicate - Copy the card
    1. Learning history - View SR statistics
    1. Delete - Remove card (with confirmation)

CARD CONTEXT MENU FEATURES (DETAIL)

1. Select Mode (Multi-Select)

When user taps "Select":

  • Modal closes
    • Card list enters selection mode
    • Each card shows checkbox on left
    • Tapped card is auto-selected
    • Header changes to show: X close, "X cards selected" text

Bottom Action Bar (appears in select mode):

  • Freeze button (pause icon)
    • Move button (folder/arrow icon)
    • Reverse button (swap arrows)
    • Duplicate button (copy icon)
    • Delete button (trash icon, red)

User can:

  • Tap cards to select/deselect
    • Use action buttons for bulk operations
    • Tap X to exit selection mode

2. Edit Card Modal

Opens rich text editor with:

Header:

  • X close button
    • "Edit card" title
    • Save/checkmark button

Content Sections:

  • Front side label with text area
    • Back side label with text area

Rich Text Toolbar (for each side):

  • AI sparkle icon (AI assistance)
    • Image icon (add images)
    • Bold (B)
    • Italic (I)
    • Underline (U)
    • Strikethrough
    • Superscript
    • Subscript
    • Math formula icon ()
    • Code icon (</>)
    • Link icon

Bottom Options:

  • "Reverse cards" toggle switch with explanation text

3. Freeze / Unfreeze

  • Freeze: Pauses card from appearing in study sessions
    • Card shows "Frozen" label when frozen
    • Menu option changes to "Unfreeze" when card is frozen
    • Useful for temporarily removing cards without deleting

4. Move Card Modal

Opens modal with:

  • "Move card" header with X close
    • List of all available decks
    • Each deck shows: Deck name, card count
    • Tapping a deck moves the card there
    • Visual feedback on successful move

5. Reverse

  • Creates a new card with Q&A swapped
    • Original: QA becomes New: AQ
    • Useful for bidirectional learning

6. Duplicate

  • Creates exact copy of the card
    • Copy appears in same deck
    • Independent learning progress

7. Learning History Modal

Shows card's spaced repetition statistics:

Header:

  • "Learning history" title
    • X close button

Stats Display (vertical list):

  • Created: Date card was created
    • Next review: Scheduled review date/time
    • Status: Current learning status (Not studied/Learning/Mastered)
    • Interval: Current review interval (e.g., "15 minutes", "4 days")
    • Number of reviews: Total review count
    • Avg duration: Average time spent reviewing
    • Ease: Current ease factor percentage

Action Button:

  • "Reset progress" button (resets card to new state)

8. Delete Confirmation

Shows confirmation modal:

  • Warning icon
    • "Are you sure?" message
    • Explanation text about permanent deletion
    • Cancel button (secondary)
    • Delete button (red/destructive)

DECK SETTINGS PAGE

Accessible via More menu () on deck page header.

Settings Categories:

1. Spaced repetition (Algorithm preset) Opens algorithm settings page:

  • Algorithm preset selector with options:
    • Fast review: No schedules, on-demand study
  • - **General spaced repetition**: Standard SR algorithm (default)

  •   - **Language learning**: Optimized for vocabulary (premium)

  •     - **Medical learning**: High-volume, no daily limits (premium)

  •     - **New cards per day**: Number input (default: 10)

  •     - **Max cards per day**: Number input (default: 3000)

  •     - **Shuffle cards**: Toggle switch

Advanced Settings:

  • Learning phase:
    • Learning steps (e.g., Review 1: 1 min, Review 2: 15 min)
  • - Add button for more steps

  • - **Mastered phase**:

  •   - Easy bonus: Percentage input (default: 130%)

  •     - Interval modifier: Percentage input (default: 100%)

  •       - Max interval: Days input (default: 1000 days)

2. Text-to-speech

  • Text-to-speech toggle (premium)
    • Whole card pronunciation toggle
    • Autoplay toggle
    • Front side language selector
    • Back side language selector

3. Card style Opens card customization page:

  • Live preview of card appearance
    • Presets: Grid of visual preset themes
    • Font: Font family selector (Default, etc.)
    • Text size: Number with +/- controls (default: 20)
    • Alignment: Left/Center/Right buttons

4. Sharing settings

  • Toggle for allowing sharing
    • Privacy controls

5. Publish in library

  • Option to make deck public in discover library

6. AI cards generation (Beta) Two tabs:

  • Custom prompt tab:
    • Topic/Prompt text area
  • - Card format dropdown:

  •     - Definition / Meaning

  •         - Question / Answer

  •             - Word / Translation

  •               - Cards amount input (default: 40)

  •                 - Free generations counter

  •                   - Generate button

  •                   - **Upload a document tab**:

  •                     - Drag & drop area

  •                       - PDF support (max 50 MB)

  •                         - Upload button

7. Import cards

  • Text area for pasting card data
    • Source support: Quizlet, Google Docs, spreadsheets
    • Delimiter settings:
    • Between front and back: Tab / Comma / Custom
  • - Between cards: New line / Semicolon / Custom

  • - Cards preview section

  • - Import button

8. Rename deck

  • Simple text input for new name

9. Move deck

  • Select destination folder

10. Duplicate deck

  • Creates copy of entire deck

11. Reset progress

  • Resets all card progress to new state
    • Requires confirmation

12. Archive deck

  • Moves deck to archive (out of main view)

13. Export deck Two format options:

  • Excel (.csv):
    • Lightweight data export
  • - Simple flashcards without formatting

  •   - Easy transfer to other apps

  •   - **Noji format**:

  •     - Full export with formatting and images

  •       - Email input for download link

  •         - Include progress checkbox

14. Delete deck (Destructive)

  • Red text/icon
    • Opens confirmation modal
    • Permanently deletes deck and all cards

STUDY SESSION FLOW

Session Start

When user taps "Study cards" button:

  • Full-screen study mode opens
    • URL changes to /learn

Study Session UI

Header:

  • Deck title
    • Progress indicator: "X/Y" (completed/total for session)
    • Progress bar fills left-to-right as cards are completed

Card Display:

  • Large card area (dark background)
    • Question text centered
    • Three-dots menu () on card (Edit, Move, Freeze options)

Bottom Controls (Question shown):

  • Keyboard shortcut hint icon (left)
    • "Tap to show answer" button (center)
    • Undo button (right)

Keyboard Shortcuts:

  • Space: Flip card / Show answer
    • 1: Again
    • 2: Hard
    • 3: Good
    • 4: Easy

Answer Revealed State

After tapping to show answer:

  • Question remains visible
    • Divider line
    • Answer appears below

Rating Buttons (4 options):

  1. Again (Red) - Shows next interval (e.g., "1m")
    1. Hard (Yellow/Orange) - Shows next interval (e.g., "8m")
    1. Good (Green) - Shows next interval (e.g., "15m")
    1. Easy (Blue) - Shows next interval (e.g., "4d")

Each button shows:

  • Rating label
    • Next scheduled interval preview

Card Menu During Study

Three-dots menu () on study card shows:

  • Edit card
    • Move card
    • Freeze card

Session Progress

  • Progress bar advances with each card rated
    • Counter updates (e.g., "1/10", "2/10")
    • Cards rated "Again" return to queue
    • Session completes when all cards reviewed once

Session Completion

When all cards are reviewed:

  • Show completion screen
    • Summary statistics
    • Return to deck button

ANIMATIONS & TRANSITIONS

Card Preview Modal:

  • Slide up from bottom on open
    • Slide down on close
    • Smooth opacity transition

Card Flip (Study Mode):

  • Quick fade transition between question-only and question+answer

Progress Bar:

  • Smooth fill animation
    • Color transitions for different states

Selection Mode:

  • Checkboxes animate in
    • Bottom action bar slides up

Filter/Sort Panels:

  • Smooth slide-in from side or top
    • Backdrop dimming

Rating Buttons:

  • Subtle press feedback
    • Card animates out after selection

HAPTIC FEEDBACK (Mobile)

Trigger haptic feedback on:

  • Card tap (light feedback)
    • Answer reveal (light feedback)
    • Rating button press (medium feedback)
    • Successful action completion (success pattern)
    • Error/Warning (warning pattern)

ERROR STATES

Network Errors:

  • Toast notification for failed saves
    • Retry option
    • Offline indicator

Empty States:

  • No cards in deck: Show illustration + "Add your first card" prompt
    • No cards for today: Show "All caught up!" celebration
    • Search no results: "No cards match your search"

ACCESSIBILITY

  • All interactive elements have proper touch targets (min 44px)
    • Screen reader labels for icons
    • High contrast text
    • Support for system font scaling
    • Keyboard navigation support (web/desktop)

IMPLEMENTATION NOTES FOR RORK

  1. State Management: Track study session progress, card states, filter/sort preferences
    1. Local Storage: Cache deck data for offline access
    1. Animations: Use React Native Animated API or Reanimated
    1. Haptics: Use expo-haptics for feedback
    1. Navigation: Study session should be modal/full-screen overlay
    1. Performance: Virtualize long card lists for smooth scrolling
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment