From 9a04eb081ef3e89b4cf5caf7c00d6b583fe65ff1 Mon Sep 17 00:00:00 2001
From: pganesh-apphelix <pganesh-apphelix@2U.com>
Date: Mon, 27 Apr 2026 12:32:28 +0000
Subject: [PATCH] fix: handle preview mode in matching game

---
 games/static/css/matching.css   |  4 +--
 games/static/js/src/matching.js | 54 +++++++++++++++++++++++++++++++++
 setup.py                        |  2 +-
 3 files changed, 56 insertions(+), 4 deletions(-)

diff --git a/games/static/css/matching.css b/games/static/css/matching.css
index 805fe91..960c69d 100644
--- a/games/static/css/matching.css
+++ b/games/static/css/matching.css
@@ -435,9 +435,7 @@
 }
 
 .matching-box:focus-visible {
-    outline: 2px solid var(--primary-500, #00262B);
-    outline-offset: 2px;
-    box-shadow: 0 0 0 4px rgba(0, 38, 43, 0.2);
+    outline: none;
 }
 
 .matching-end-screen-content:focus {
diff --git a/games/static/js/src/matching.js b/games/static/js/src/matching.js
index 859a79d..59ae099 100644
--- a/games/static/js/src/matching.js
+++ b/games/static/js/src/matching.js
@@ -31,6 +31,7 @@ function GamesXBlockMatchingInit(runtime, element) {
 
     let timerInterval = null;
     let timeSeconds = 0;
+    const isPreviewMode = new URLSearchParams(window.location.search).get('preview') === '1';
 
     function formatTime(seconds) {
         const hours = Math.floor(seconds / 3600);
@@ -60,6 +61,45 @@ function GamesXBlockMatchingInit(runtime, element) {
     }
 
     function refreshGame() {
+        if (isPreviewMode) {
+            currentPageIndex = 0;
+            matchCount = 0;
+            firstSelection = null;
+            timeSeconds = 0;
+            stopTimer();
+            $('.matching-end-screen', element).removeClass('active');
+            $('.matching-new-best', element).removeClass('active');
+            $('.matching-grid', element).show().addClass('active');
+            $('.matching-footer', element).show().addClass('active');
+            $('#matching-timer', element).text('0:00');
+            const page = allPages[0];
+            currentPagePairs = page.left_items.length;
+            updateProgress();
+            $('.matching-column-left', element).empty();
+            $('.matching-column-right', element).empty();
+            page.left_items.forEach(function(item) {
+                const wrapper = $('<div class="matching-box-wrapper"></div>');
+                const box = $('<div class="matching-box"></div>')
+                    .attr('data-item-type', 'term').attr('data-match', item.match)
+                    .attr('title', item.text).attr('role', 'button').attr('tabindex', '0');
+                box.append($('<span class="matching-box-text"></span>').text(item.text));
+                wrapper.append(box);
+                $('.matching-column-left', element).append(wrapper);
+            });
+            page.right_items.forEach(function(item) {
+                const wrapper = $('<div class="matching-box-wrapper"></div>');
+                const box = $('<div class="matching-box"></div>')
+                    .attr('data-item-type', 'definition').attr('data-hash', item.hash)
+                    .attr('title', item.text).attr('role', 'button').attr('tabindex', '0');
+                box.append($('<span class="matching-box-text"></span>').text(item.text));
+                wrapper.append(box);
+                $('.matching-column-right', element).append(wrapper);
+            });
+            attachBoxClickHandlers();
+            if (has_timer) { startTimer(); }
+            $('.matching-box', element).first().focus();
+            return;
+        }
         $.ajax({
             type: 'GET',
             url: runtime.handlerUrl(element, 'refresh_game'),
@@ -280,6 +320,20 @@ function GamesXBlockMatchingInit(runtime, element) {
             return;
         }
 
+        if (isPreviewMode) {
+            $('.matching-end-screen', element).addClass('active');
+            $('.matching-new-best', element).addClass('active');
+            $('.matching-grid', element).hide();
+            $('.matching-footer', element).hide();
+            $('#matching-current-result', element).text(formatTime(timeSeconds));
+            if (typeof GamesConfetti !== 'undefined') {
+                GamesConfetti.trigger($('.confetti-container', element), 20);
+            }
+            announce('Congratulations! You matched all items.');
+            $('.matching-end-screen-content', element).focus();
+            return;
+        }
+
         $.ajax({
             type: 'POST',
             url: runtime.handlerUrl(element, 'complete_matching_game'),
diff --git a/setup.py b/setup.py
index 7f4660b..1b99938 100644
--- a/setup.py
+++ b/setup.py
@@ -21,7 +21,7 @@ def package_data(pkg, roots):
 
 setup(
     name="edx-games",
-    version="1.0.16",
+    version="1.0.17",
     description="Interactive games XBlock for Open edX - Create flashcards and matching games with image support",
     author="edX",
     author_email="edx@edx.org",