Overview

This flashcards app provides educational content on diabetes via interactive cards. It includes:

  • A front-end web interface for flipping flashcards and taking quizzes.
  • A RESTful API backend powered by Flask and Flask-RESTful.
  • A lightweight database model using SQLAlchemy.
  • Data initialization via flashcards.csv.

Technical Design

System Components

+--------------+        +------------------+        +-----------------+
|   Front End  | <----> |  Flask REST API  | <----> |  Flashcard DB   |
| (HTML/JS/CSS)|        |  (Python Flask)  |        |  (SQLAlchemy)   |
+--------------+        +------------------+        +-----------------+

Front End: flashcards.md + Custom JS

The flashcards.md file serves HTML and JavaScript for the UI:

  • Tailwind-based theme and dark styling.
  • DOM controls for flashcard navigation (Next, Previous, Quiz Me).
  • Flip animation for cards.
  • Interactive quiz mode with form submission.

Features

  • Interactive flashcard viewer with flip animation.
  • Quiz mode with grading and confetti feedback.
  • Fetches flashcards from backend asynchronously via fetch().

Sample Code Snippet from flashcards.md

const response = await fetch(`${pythonURI}/api/flashcards`);
flashcards = await response.json();  // JSON from Flask API
displayCard();  // Populate the DOM

API Layer: flashcards.py

Built using Flask and Flask-RESTful, this module exposes several endpoints:

Endpoints Summary

Endpoint Method Description
/api/flashcards GET Retrieve all flashcards
/api/flashcards POST Add a new flashcard
/api/flashcards/<id> DELETE Delete a flashcard
/api/flashcards/grade POST Submit quiz answers for grading

Example: Flashcard Grading Logic

similarity = difflib.SequenceMatcher(None, user, correct).ratio()
is_correct = similarity >= 0.8 or (len(user) >= 4 and user in correct)

Data Model: model.flashcards

Assumed to be structured like:

class Flashcard(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    term = db.Column(db.String(128), nullable=False)
    definition = db.Column(db.Text, nullable=False)

    def to_dict(self):
        return {"term": self.term, "definition": self.definition}

Flashcard Dataset: flashcards.csv

This file contains the initial term-definition pairs used to populate the database.

Sample (CSV):

Term,Definition
"Diabetes","A condition where the body can't properly use sugar from food."
"Insulin","A hormone that helps sugar get into cells for energy."

import pandas as pd
df = pd.read_csv("flashcards.csv")
for _, row in df.iterrows():
    db.session.add(Flashcard(term=row["Term"], definition=row["Definition"]))
db.session.commit()

Summary

Layer Technology Purpose
Frontend HTML, CSS, JS User interaction and flashcard display
Backend Flask, Flask-RESTful API for CRUD operations and quiz grading
DB SQLAlchemy + SQLite/Postgres Persistent flashcard storage
Data CSV Initial content source