Line Matching
Description
Creates interactive matching exercises where users connect questions to answers by drawing lines. Supports one-to-one and one-to-many matching with visual feedback and automatic shuffling.
Usage
Wrap a table with class .line-matching containing a figure.table element. Each row represents a question-answer pair. The table is automatically converted into an interactive matching interface.
Available Options
- CSS Classes:
.line-matching- Main container (required).left-order- Keeps questions in original order, shuffles answers
- Structure:
<figure class="table">- Required wrapper for the data table<thead>- Optional headers for questions and answers<tbody>- Contains the question-answer pairs
Examples
Basic Line Matching
| Programming Language | Primary Use |
|---|---|
| JavaScript | Web Development |
| Python | Data Science |
| Java | Enterprise Applications |
| C++ | System Programming |
One-to-Many Matching
| Category | Examples |
|---|---|
| Web Technologies | HTML |
| Web Technologies | CSS |
| Web Technologies | JavaScript |
| Programming Languages | Python |
| Programming Languages | Java |
Line Matching with Left Order
| Question | Answer |
|---|---|
| What is HTML? | HyperText Markup Language |
| What is CSS? | Cascading Style Sheets |
| What is JavaScript? | A programming language for web development |
Line Matching with Images
| Image | Description |
|---|---|
 |
Damaged Log |
 |
Mill Machine |
 |
Warning Signpost |
Complex Line Matching
| Software Development Phase | Activities |
|---|---|
| Planning | Requirements gathering |
| Planning | Project scope definition |
| Design | System architecture |
| Design | Database design |
| Implementation | Code development |
| Testing | Unit testing |
| Testing | Integration testing |
| Deployment | Production release |
Notes
- Click on a question to start drawing a line, then click on the corresponding answer
- Lines are drawn dynamically as you move the mouse
- Correct matches create permanent lines, incorrect matches reset the selection
- One-to-many matching is supported by repeating the same question with different answers
- Use
.left-orderto keep questions in original order while shuffling answers - The Reset button clears all matches and allows starting over
- On mobile devices, lines are hidden during interaction for better usability
- Supports keyboard navigation (Enter key to select items)
- Items are automatically shuffled unless using
.left-order - Can include images, text, or mixed content in matching items