Flashcards

Description

Transforms tables into interactive flashcard sets with flipping animations, navigation controls, shuffle functionality, and responsive design. Perfect for studying and memorization activities.

Usage

Create a table with class .flashcards where each row represents a card with two cells (front and back). The table is automatically converted into an interactive flashcard interface.

Available Options

CSS Classes:
- .flashcards - Main container (required)
- .no-number - Hides the card counter
- .no-nav - Hides navigation controls (enables swipe gestures)
- .top-left, .top-center, .top-right - Card content alignment
- .middle-left, .middle-center, .middle-right - Card content alignment
- .bottom-left, .bottom-center, .bottom-right - Card content alignment
Data Attributes:
- data-height="number" - Set custom card height in pixels (default: 500px)
- data-justify-content="value" - CSS justify-content value for card content
- data-align-items="value" - CSS align-items value for card content

Examples

Basic Flashcards

Front	Back
	Damaged Log Log damaged in the log yard due to poor handling by mobile equipment.
What is JavaScript?	A programming language used for web development and creating interactive websites.
What is CSS?	Cascading Style Sheets - used to style and layout web pages.
What is HTML?	HyperText Markup Language - the standard markup language for creating web pages.

Flashcards Without Card Counter

Front	Back
Front 1	Back 1
Front 2	Back 2
Front 3	Back 3

Flashcards Without Navigation Controls

Front	Back
Swipe left/right to navigate	Swipe up/down to flip cards
Touch gestures work on mobile	No visible navigation buttons
Clean interface	Focus on content only

Flashcards with Custom Height

Front	Back
Shorter cards	Custom height of 300px
Compact design	Good for simple content

Flashcards with Content Alignment

Front	Back
Top Left	Content aligned to top-left corner
Middle Center	Content centered both horizontally and vertically
Bottom Right	Content aligned to bottom-right corner

Flashcards with Mixed Content

Front	Back
Programming Languages What are the main types?	Answer Compiled languages (C++, Java) Interpreted languages (Python, JavaScript) Markup languages (HTML, XML) Style languages (CSS)
What is this machine used for?	Headrig Machine This is a headrig machine used in lumber processing to cut logs into boards. Key Features High-speed cutting Precision control Automated operation

Front

Back

Programming Languages

What are the main types?

Answer

Compiled languages (C++, Java)
Interpreted languages (Python, JavaScript)
Markup languages (HTML, XML)
Style languages (CSS)

What is this machine used for?

Headrig Machine

This is a headrig machine used in lumber processing to cut logs into boards.

Key Features

High-speed cutting
Precision control
Automated operation

Notes

Each table row becomes a flashcard with two sides
First cell is the front, second cell is the back
Navigation controls: Previous, Flip, Next, Flip All, Shuffle, Reset, View Table
Keyboard navigation: Arrow keys for navigation and flipping
Swipe gestures work when .no-nav is used
Cards can contain any HTML content (text, images, lists, etc.)
Custom height can be set using data-height attribute
Content alignment classes control how content is positioned within cards
Original table is preserved and can be toggled with "View as Table" button
Cards maintain their state during navigation and shuffling