Skip to content

Matching

Matching Widget for Marimo

MatchingWidget

Bases: AnyWidget

A matching question widget where students pair items from two columns using drag-and-drop.

Attributes:

Name Type Description
question str

The question text to display
left list

Items in the left column
right list

Items in the right column
correct_matches dict

Mapping of left column indices to right column indices
value dict

Current state with 'matches', 'correct', and 'score' keys
Source code in src/faw/matching.py 
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
class MatchingWidget(anywidget.AnyWidget):
    """
    A matching question widget where students pair items from two columns using drag-and-drop.

    Attributes:
        question (str): The question text to display
        left (list): Items in the left column
        right (list): Items in the right column
        correct_matches (dict): Mapping of left column indices to right column indices
        value (dict): Current state with 'matches', 'correct', and 'score' keys
    """

    # Load JavaScript from external file
    _esm = Path(__file__).parent / "public" / "matching.js"

    # Traitlets
    question = traitlets.Unicode("").tag(sync=True)
    left = traitlets.List(trait=traitlets.Unicode()).tag(sync=True)
    right = traitlets.List(trait=traitlets.Unicode()).tag(sync=True)
    correct_matches = traitlets.Dict().tag(sync=True)
    value = traitlets.Dict(default_value=None, allow_none=True).tag(sync=True)

    def __init__(self, question: str, left: list[str], right: list[str], correct_matches: dict, **kwargs):
        """
        Initialize a matching widget.

        Args:
            question: The question text
            left: Items in the left column
            right: Items in the right column
            correct_matches: Dict mapping left indices to right indices (e.g., {0: 2, 1: 0, 2: 1})
        """
        super().__init__(**kwargs)
        self.question = question
        self.left = left
        self.right = right
        self.correct_matches = correct_matches

__init__(question, left, right, correct_matches, **kwargs)

Initialize a matching widget.

Parameters:

Name Type Description Default
question str

The question text

 required
left list[str]

Items in the left column

 required
right list[str]

Items in the right column

 required
correct_matches dict

Dict mapping left indices to right indices (e.g., {0: 2, 1: 0, 2: 1})

 required
Source code in src/faw/matching.py 
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
def __init__(self, question: str, left: list[str], right: list[str], correct_matches: dict, **kwargs):
    """
    Initialize a matching widget.

    Args:
        question: The question text
        left: Items in the left column
        right: Items in the right column
        correct_matches: Dict mapping left indices to right indices (e.g., {0: 2, 1: 0, 2: 1})
    """
    super().__init__(**kwargs)
    self.question = question
    self.left = left
    self.right = right
    self.correct_matches = correct_matches

Example

matching