fix: Feat/flash cards UI

[papphelix]

No description provided.

[Copilot]

Pull request overview

Copilot reviewed 13 out of 13 changed files in this pull request and generated 8 comments.

Comments suppressed due to low confidence (2)

games/static/js/src/matching.js:113

• The matching boxes only support mouse clicks but lack keyboard event handlers. For accessibility, keyboard navigation should be added to support users who rely on keyboards or assistive technologies. Consider adding keydown event handlers that allow Enter or Space to select boxes, similar to how flashcards.js implements keyboard navigation (lines 100-119).

    $('.matching-box', element).off('click').on('click', function() {
        const box = $(this);
        const text = box.text().trim();
        if (matched.has(text)) return; // already matched

        // Toggle off if re-click first
        if (firstSelection && firstSelection[0].is(box)) {
            clearSelectionVisual(box);
            firstSelection = null;
            return;
        }

        box.addClass('selected');

        if (!firstSelection) {
            firstSelection = [box, text];
            return;
        }

        // Second selection
        const [prevBox, prevText] = firstSelection;
        firstSelection = null;
        if (prevText === text) {
            clearSelectionVisual(prevBox);
            clearSelectionVisual(box);
            return;
        }
        const mapped = matchMap.get(prevText);
        if (mapped && mapped === text) {
            markMatch(prevBox, box);
        } else {
            markIncorrect(prevBox, box);
        }
    });

games/static/css/matching.css:179

• This .matching-footer style block is a duplicate of lines 28-34. The duplicate definition should be removed to avoid confusion and potential maintenance issues.

.matching-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    margin-top: 24px;
}

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

You can also share your feedback on Copilot code review for a chance to win a $100 gift card. Take the survey.

[Copilot]

Pull request overview

Copilot reviewed 11 out of 11 changed files in this pull request and generated 5 comments.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

You can also share your feedback on Copilot code review for a chance to win a $100 gift card. Take the survey.

[Copilot]

The isinstance(card, Dict) check is incorrect. Dict is imported from xblock.fields and is a field type class, not a runtime type. This check will always fail because card is a plain Python dictionary from the JSON data, not an XBlock field instance.

This should be isinstance(card, dict) (lowercase) to check if it's a standard Python dictionary.

Suggested change

	if not isinstance(card, Dict):
	if not isinstance(card, dict):

[Copilot]

Missing guard against multiple initializations. Similar to the matching game (lines 6-11 in matching.js), this function should check if it's already been initialized to prevent duplicate event handlers from being attached. Without this guard, if the initialization function is called multiple times, it will:

1. Attach duplicate click handlers to the card and buttons
2. Attach duplicate keydown handlers

Consider adding at the start:

var $element = $(element);
if ($element.data('gx_flashcards_initialized')) {
    return;
}
$element.data('gx_flashcards_initialized', true);

Suggested change

	// Guard against multiple initializations
	var $element = $(element);
	if ($element.data('gx_flashcards_initialized')) {
	return;
	}
	$element.data('gx_flashcards_initialized', true);

[Copilot]

The aria-pressed attribute on the flashcard element (defined in flashcards.html line 15) should be updated to reflect the flip state for screen readers. When the card is flipped, set it to "true", and when unflipped, set it to "false".

Add this to the flipCard() function:

$card.attr('aria-pressed', $card.hasClass(flipClassName) ? 'true' : 'false');

Suggested change

	}
	}
	$card.attr('aria-pressed', $card.hasClass(flipClassName) ? 'true' : 'false');

[Copilot]

The hardcoded stroke-dasharray: 339.292 value doesn't match the actual circle's circumference. The circle now has r=25.0213 (from matching.html line 35), which gives a circumference of approximately 157.28 (2 × π × 25.0213), not 339.292.

While the JavaScript dynamically sets this value correctly (matching.js lines 42-45), having an incorrect fallback value in the CSS is misleading and could cause issues if the JavaScript fails to load. Update this to match the actual circle dimensions or remove it since JavaScript handles it dynamically.

Suggested change

	stroke-dasharray: 339.292;
	stroke-dashoffset: 339.292;
	stroke-dasharray: 157.28;
	stroke-dashoffset: 157.28;

[Copilot]

Import of 'Set' is not used.

Suggested change

from xblock.fields import Set, Dict