Flashcards Dashboard

Flashcard Dashboard from File

When to use

Use this skill when the user wants to learn, revise, or review the content of a SharePoint/OneDrive file through an interactive HTML dashboard with animated flip flashcards.

Use it for PowerPoint decks, PDFs, Word documents, or other readable files where the goal is comprehension, training, revision, onboarding, or knowledge checks.

Inputs

• Source file name, URL, selected file, or file reference.
• Optional preferences: audience/difficulty, number of cards, language, destination, topics to emphasize/exclude.
• Modes to include by default: Study, Shuffle, Review missed. Do not include Quiz mode unless explicitly requested.
• Theme: use the required refined dark theme below unless the user explicitly asks for another theme.

Steps

1. Locate the source file.

   • If the user gives a filename, use SharePoint/OneDrive file discovery tools.
   • If exact search fails, retry broader keywords and semantic search.
   • If outside the current site, use tenant search as fallback.
   • If no file is found, say so plainly and ask for a link or selected file.

2. Read or digest the file content.

   • Use a file-reading tool when raw content is needed.
   • Use file digest only when a summary is enough.
   • For PowerPoint files with speaker notes, preserve slide content and presenter-note insights.
   • For long files, create cards from section summaries and say the dashboard is summary-based.

3. Extract cards using this schema:

{
  "id": "Stable unique card id, e.g. c0",
  "category": "Short topic label",
  "question": "Question shown on the front",
  "answer": "Concise answer shown on the back",
  "detail": "Expanded answer for hover/focus detail panel",
  "hint": "Short clue or memory hook",
  "sourceAnchor": "Slide/page/section/table name, or Source file if unknown",
  "sourceUrl": "Clickable source document URL when available",
  "difficulty": "Easy | Medium | Hard"
}

• Produce 12–25 cards unless the user requests another count.
• Keep answer concise; put longer explanation in detail.
• Do not fabricate source anchors, URLs, slide counts, page numbers, or facts.

4. Generate a self-contained HTML dashboard.

   • Use sandboxed code and store the full HTML as a data reference before file creation.
   • Include flip cards, category filters, difficulty filters, progress tracking, source anchors, source links, hover-detail answers, Study, Shuffle, and Review missed.
   • Cards flip on click and keyboard Enter/Space.
   • Hover-detail panels must also work on keyboard focus.
   • Detail panels must not be clipped: use visible overflow, high z-index on hovered/focused cards, and right-align panels for cards near the right edge.
   • Keep card widths consistent even when filters leave only one visible card. Use max-width:360px, grid columns like repeat(auto-fill, minmax(280px, 360px)), and justify-content:start. Never use 1fr in a way that lets a single card stretch across the dashboard.
   • Use inline CSS and JS only. No external scripts, stylesheets, fonts, images, or CSS URL dependencies.

5. Apply the required refined dark design system.

   • This color system is mandatory unless the user explicitly asks for another theme. Do not fall back to brighter neon cyan/green gradients or pure-white text on near-black backgrounds.
   • Define these design tokens in CSS and use them consistently:

:root {
  --page-bg: #0B1120;
  --page-bg-2: #0F172A;
  --card-bg: #1E293B;
  --card-bg-2: #0F172A;
  --answer-bg: #064E3B;
  --answer-bg-2: #065F46;
  --border: #334155;
  --text: #F1F5F9;
  --muted: #94A3B8;
  --soft: #CBD5E1;
  --accent: #22D3EE;
  --accent-soft: #67E8F9;
  --easy: #67E8F9;
  --medium: #34D399;
  --hard: #FBBF24;
}

• Required usage:
  • Page background: #0B1120 / #0F172A, preferably a subtle gradient.
  • Question card background: #1E293B to #0F172A subtle gradient.
  • Answer card background: #065F46 to #064E3B subtle gradient.
  • Card border: 1px solid #334155.
  • Primary question/answer text: #F1F5F9.
  • Secondary text, source text, hints, labels: #94A3B8 or #CBD5E1 depending on importance.
  • Source links and active/progress accents: #22D3EE at 80–90% opacity or #67E8F9; accents must not overpower body text.
  • Easy difficulty: #67E8F9.
  • Medium difficulty: #34D399.
  • Hard difficulty: #FBBF24.
• Typography rules:
  • Body text minimum 15–16px with line-height 1.55–1.65.
  • Question text 22–24px with font-weight 500–650.
  • Answer text 16–17px with line-height 1.55–1.65.
  • Source text about 13px and muted.
  • Avoid pure white on pure black for long sentences.
• Card treatment:
  • Border radius 14–20px.
  • Visible border plus soft shadow.
  • Optional subtle inner top highlight: inset 0 1px 0 rgba(255,255,255,.04).
  • Consistent spacing between category, question/answer, details, source, and action buttons.
• Filters and mode buttons:
  • Inactive state: subdued dark fill, subtle border, lower opacity but still readable.
  • Active state: solid accent fill with soft outer glow.
• Progress area:
  • Large numbers use #67E8F9 or #22D3EE.
  • Labels use #94A3B8 so numbers stay dominant.
• Action buttons:
  • “Got it” uses a soft green treatment.
  • “Needs review” uses a soft amber/warning treatment and must be visually distinct.
• Hierarchy rule:
  • Most important: question/answer text.
  • Secondary: topic and difficulty badges.
  • Tertiary: source links and helper text.
  • Status/progress: accented but not brighter than main text.

6. Make browser storage safe for SharePoint sandboxed previews.
   • Never access localStorage or sessionStorage directly. SharePoint file preview may run the HTML in a sandbox without allow-same-origin; direct access throws SecurityError and can stop the dashboard.
   • If persistence is needed, use a safe wrapper with an in-memory fallback. The dashboard must work even when storage is blocked; only persistence may be disabled.
   • Use this pattern or equivalent:

function createSafeStorage(namespace){
  const memory = {};
  let store = null;
  try {
    const testKey = namespace + ':test';
    window.localStorage.setItem(testKey, '1');
    window.localStorage.removeItem(testKey);
    store = window.localStorage;
  } catch (e) {
    store = null;
  }
  return {
    get(key, fallback){
      try {
        const raw = store ? store.getItem(namespace + ':' + key) : memory[key];
        return raw == null ? fallback : JSON.parse(raw);
      } catch (e) { return fallback; }
    },
    set(key, value){
      try {
        const raw = JSON.stringify(value);
        if (store) store.setItem(namespace + ':' + key, raw);
        else memory[key] = raw;
      } catch (e) { memory[key] = JSON.stringify(value); }
    },
    remove(key){
      try {
        if (store) store.removeItem(namespace + ':' + key);
        delete memory[key];
      } catch (e) { delete memory[key]; }
    }
  };
}

• If no persistence is required, omit storage entirely.

7. Make source links work with one left-click in SharePoint.
   • Put source links only on the answer side.
   • Use a normal <a> element with href, target="_blank", rel="noopener noreferrer", and data-interception="off".
   • Add pointer/mouse handlers to prevent card flipping from taking the click:

<a class="sourceLink"
   href="SOURCE_URL"
   target="_blank"
   rel="noopener noreferrer"
   data-interception="off"
   onpointerdown="event.stopPropagation()"
   onmousedown="event.stopPropagation()"
   onclick="event.preventDefault(); event.stopPropagation(); if(event.stopImmediatePropagation){event.stopImmediatePropagation();} window.open(this.href, '_blank', 'noopener,noreferrer'); return false;">
  Open source document
</a>

• Add CSS so the link remains clickable inside transformed cards: