lido-player 0.0.2-alpha-49 → 0.0.2-alpha-43-dev

package/dist/collection/utils/utils.js

@@ -1,4 +1,4 @@
-import { ActivityScoreKey, DragSelectedMapKey, DragMapKey, SelectedValuesKey, DropMode, DropToAttr, DropTimeAttr, LidoContainer, DropAction, DropHasDrag, DropLength, } from "./constants";
+import { ActivityScoreKey, DragMapKey, SelectedValuesKey, DropMode, DropToAttr, DropTimeAttr, LidoContainer, DropAction, } from "./constants";
 import { dispatchActivityEndEvent, dispatchLessonEndEvent, dispatchNextContainerEvent, dispatchPrevContainerEvent } from "./customEvents";
 import GameScore from "./constants";
 import { RiveService } from "./rive-service";
@@ -11,7 +11,43 @@ import { addClickListenerForClickType, onTouchListenerForOnTouch } from "./utils
 import { evaluate, isArray } from "mathjs";
 import { fillSlideHandle } from "./utilsHandlers/floatHandler";
 import { stopHighlightForSpeakingElement } from "./utilsHandlers/highlightHandler";
+import { handleSolvedEquationSubmissionAndScoreUpdate } from "./utilsHandlers/lidoCalculatorHandler";
+import { handlingMatrix } from "./utilsHandlers/matrixHandler";
+import { balanceResult } from "./utilsHandlers/lidoBalanceHandler";
 const gameScore = new GameScore();
+export function buildDragSelectedMapFromDOM() {
+    const map = {};
+    const draggedEls = document.querySelectorAll(`[${DropToAttr}]`);
+    draggedEls.forEach(dragEl => {
+        var _a, _b, _c;
+        const to = dragEl.getAttribute(DropToAttr);
+        if (!to)
+            return;
+        const dropEl = document.getElementById(to);
+        if (!dropEl)
+            return;
+        const tabIndex = (_a = dropEl.getAttribute('tab-index')) !== null && _a !== void 0 ? _a : to;
+        if (!map[tabIndex])
+            map[tabIndex] = [];
+        const value = (_c = (_b = dragEl.getAttribute('value')) !== null && _b !== void 0 ? _b : dragEl.value) !== null && _c !== void 0 ? _c : '';
+        map[tabIndex].push(value);
+    });
+    return map;
+}
+export function getSortedValuesArrayFromMap(map) {
+    const sortedKeys = Object.keys(map).sort((a, b) => parseInt(a) - parseInt(b));
+    const sortedValues = sortedKeys.reduce((acc, key) => {
+        const values = map[key];
+        if (values.length > 1) {
+            acc.push(`(${values.join('|')})`);
+        }
+        else {
+            acc.push(values[0]);
+        }
+        return acc;
+    }, []);
+    return sortedValues;
+}
 export function format(first, middle, last) {
     return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');
 }
@@ -56,6 +92,10 @@ export const initEventsForElement = async (element, type) => {
             enableOptionArea(element);
             break;
         }
+        case 'checkerBlock': {
+            handlingMatrix(element);
+            break;
+        }
         default:
             break;
     }
@@ -63,7 +103,7 @@ export const initEventsForElement = async (element, type) => {
 };
 // Function to execute actions parsed from the onMatch string
 export const executeActions = async (actionsString, thisElement, element) => {
-    var _a;
+    var _a, _b, _c, _d, _e, _f, _g;
     const actions = parseActions(actionsString);
     for (let i = 0; i < actions.length; i++) {
         const action = actions[i];
@@ -77,13 +117,25 @@ export const executeActions = async (actionsString, thisElement, element) => {
                     targetElement.style.transform = currentTransform !== 'none' ? `${currentTransform} ${action.value}` : action.value;
                     break;
                 }
+                case 'revealImageValue': {
+                    if (targetElement) {
+                        revealImageValue(targetElement); // call your function here
+                    }
+                    break;
+                }
+                case 'scrollCellAfterEquationSolved': {
+                    if (targetElement) {
+                        handleSolvedEquationSubmissionAndScoreUpdate();
+                    }
+                    break;
+                }
                 case 'alignMatch': {
                     const dropElement = targetElement;
                     const dragElement = element;
                     const container = document.getElementById(LidoContainer);
                     const containerScale = getElementScale(container);
                     dragElement.style.transform = 'translate(0,0)';
-                    console.log('logg alinmatch');
+                    console.log("logg alinmatch");
                     const dropRect = dropElement.getBoundingClientRect();
                     const dragRect = dragElement.getBoundingClientRect();
                     const dropCenterX = dropRect.left + dropRect.width / 2;
@@ -169,10 +221,76 @@ export const executeActions = async (actionsString, thisElement, element) => {
                     }
                     break;
                 }
+                case 'highlightStarsAndDisapper': {
+                    const value = action.value;
+                    if (value && targetElement) {
+                        console.log('highlightStar action triggered');
+                        console.log('Target Element:', targetElement);
+                        await HighlightStarsOneByOne(targetElement, value);
+                    }
+                    break;
+                }
+                case 'boxAnimationOneByOne': {
+                    const value = action.value;
+                    if (value && targetElement) {
+                        await animateBoxCells(targetElement, value);
+                    }
+                    break;
+                }
+                case 'questionBoxAnimate': {
+                    const value = action.value;
+                    if (value && targetElement) {
+                        await questionBoxAnimation(targetElement, value);
+                    }
+                    break;
+                }
                 case 'slideAnimation': {
                     slideAnimation();
                     break;
                 }
+                case 'showBalanceSymbol': {
+                    const balanceEl = document.querySelector('lido-balance');
+                    if (!balanceEl)
+                        break;
+                    const leftVal = Number((_b = balanceEl.leftVal) !== null && _b !== void 0 ? _b : Number((_d = (_c = balanceEl.dataset) === null || _c === void 0 ? void 0 : _c.leftVal) !== null && _d !== void 0 ? _d : 0));
+                    const rightVal = Number((_e = balanceEl.rightVal) !== null && _e !== void 0 ? _e : Number((_g = (_f = balanceEl.dataset) === null || _f === void 0 ? void 0 : _f.rightVal) !== null && _g !== void 0 ? _g : 0));
+                    const symbol = leftVal > rightVal ? '>' : leftVal < rightVal ? '<' : '=';
+                    balanceEl.balanceSymbol = symbol;
+                    balanceEl.dataset.balanceSymbol = symbol;
+                    if (balanceEl.revealSymbol) {
+                        await balanceEl.revealSymbol();
+                    }
+                    else {
+                        balanceEl.showSymbol = true;
+                    }
+                    break;
+                }
+                case 'hideBalanceSymbol': {
+                    const balanceEl = document.querySelector('lido-balance');
+                    if (!balanceEl)
+                        break;
+                    if (balanceEl.hideSymbol) {
+                        await balanceEl.hideSymbol();
+                    }
+                    else {
+                        balanceEl.showSymbol = false;
+                    }
+                    break;
+                }
+                case 'sumTogetherAnimation': {
+                    const value = action.value;
+                    if (value) {
+                        SumTogetherAnimation(targetElement, value);
+                    }
+                    break;
+                }
+                case 'addText': {
+                    const value = action.value;
+                    if (value) {
+                        targetElement.textContent += value;
+                    }
+                    break;
+                }
                 default: {
                     targetElement.style[action.action] = action.value;
                     break;
@@ -270,6 +388,9 @@ export const matchStringPattern = (pattern, arr) => {
     const patternGroups = pattern.split(',').map(group => group.trim());
     let arrIndex = 0;
     let options = new Set();
+    if (patternGroups.length == 0) { // If pattern is empty
+        return true;
+    }
     if (patternGroups.length > 0) {
         if (arr.length === 0)
             return false; // If pattern is not empty but user provided array is empty, return false
@@ -354,20 +475,29 @@ export const calculateScore = () => {
     gameScore.wrongMoves = 0;
 };
 export async function onActivityComplete(dragElement, dropElement) {
-    var _a, _b;
+    var _a;
     const container = document.getElementById(LidoContainer);
     if (!container)
         return;
     await executeActions("this.alignMatch='true'", dropElement, dragElement);
-    let dragScore = JSON.parse((_a = localStorage.getItem(DragSelectedMapKey)) !== null && _a !== void 0 ? _a : '{}');
-    const tabindex = dropElement.getAttribute('tab-index');
-    if (!dragScore[tabindex]) {
-        dragScore[tabindex] = [];
+    if (dragElement && dropElement) {
+        const isCorrect = dropElement['value'].toLowerCase().includes(dragElement['value'].toLowerCase());
+        if (isCorrect) {
+            const onCorrect = dropElement.getAttribute('onCorrect');
+            if (onCorrect) {
+                await executeActions(onCorrect, dropElement, dragElement);
+            }
+        }
+        else {
+            const onInCorrect = dropElement.getAttribute('onInCorrect');
+            await executeActions(onInCorrect, dropElement, dragElement);
+        }
     }
-    dragScore[tabindex].push(dragElement['value']);
-    localStorage.setItem(DragSelectedMapKey, JSON.stringify(dragScore));
+    let dragScore = buildDragSelectedMapFromDOM();
+    const sortedValues = getSortedValuesArrayFromMap(dragScore);
+    container.setAttribute(SelectedValuesKey, JSON.stringify(sortedValues));
     //localStorage
-    let drag = JSON.parse((_b = localStorage.getItem(DragMapKey)) !== null && _b !== void 0 ? _b : '{}');
+    let drag = JSON.parse((_a = localStorage.getItem(DragMapKey)) !== null && _a !== void 0 ? _a : '{}');
     const index = dropElement.getAttribute('tab-index');
     if (!drag[index]) {
         drag[index] = [];
@@ -375,17 +505,6 @@ export async function onActivityComplete(dragElement, dropElement) {
     drag[index].push(dragElement.id);
     // localStorage.setItem(DragMapKey, JSON.stringify(drag));
     const sortedKeys = Object.keys(dragScore).sort((a, b) => parseInt(a) - parseInt(b));
-    const sortedValues = sortedKeys.reduce((acc, key) => {
-        const values = dragScore[key];
-        if (values.length > 1) {
-            acc.push(`(${values.join('|')})`);
-        }
-        else {
-            acc.push(values[0]);
-        }
-        return acc;
-    }, []);
-    localStorage.setItem(SelectedValuesKey, JSON.stringify(sortedValues));
     if (dragElement && dropElement) {
         const isCorrect = dropElement['value'].toLowerCase().includes(dragElement['value'].toLowerCase());
         if (isCorrect) {
@@ -402,8 +521,7 @@ export async function onActivityComplete(dragElement, dropElement) {
     const allElements = document.querySelectorAll("[type='drop']");
     allElements.forEach(otherElement => {
         var _a;
-        const dropObject = JSON.parse(localStorage.getItem(DragSelectedMapKey)) || {};
-        const storedTabIndexes = Object.keys(dropObject).map(Number);
+        const storedTabIndexes = Object.keys(dragScore).map(Number);
         if (storedTabIndexes.includes(JSON.parse(otherElement.getAttribute('tab-index')))) {
             if (!(((_a = otherElement.getAttribute('dropAttr')) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === DropMode.Diagonal)) {
                 if (otherElement.tagName.toLowerCase() === 'lido-text') {
@@ -455,81 +573,101 @@ export const handleShowCheck = () => {
     var _a, _b;
     const container = document.getElementById(LidoContainer);
     const objectiveString = container['objective'];
-    const selectValues = (_a = localStorage.getItem(SelectedValuesKey)) !== null && _a !== void 0 ? _a : '';
+    const selectValues = (_a = container.getAttribute(SelectedValuesKey)) !== null && _a !== void 0 ? _a : '';
     const checkButton = document.querySelector('#lido-checkButton');
-    if (!selectValues || countPatternWords(selectValues) !== countPatternWords(objectiveString)) {
+    if (!selectValues || countPatternWords(selectValues) < countPatternWords(objectiveString)) {
         executeActions("this.addClass='lido-disable-check-button'", checkButton);
         return;
     }
     const showCheck = container.getAttribute('show-check') == 'true';
     if (showCheck) {
         (_b = checkButton === null || checkButton === void 0 ? void 0 : checkButton.classList) === null || _b === void 0 ? void 0 : _b.remove('lido-disable-check-button');
+        const balanceEl = document.querySelector('lido-balance');
+        if (balanceEl) {
+            if (!checkButton.hasAttribute('data-balance-listener')) {
+                checkButton.addEventListener('click', async function onClick() {
+                    if (balanceResult && res) {
+                        await executeActions("this.showBalanceSymbol='true'", checkButton);
+                        checkButton.removeEventListener('click', onClick);
+                    }
+                });
+                checkButton.setAttribute('data-balance-listener', 'true');
+            }
+        }
     }
     else {
         validateObjectiveStatus();
     }
 };
-const body = document.body;
+let res;
 export const validateObjectiveStatus = async () => {
-    var _a;
+    var _a, _b;
     const container = document.getElementById(LidoContainer);
     if (!container)
         return;
     const objectiveString = container['objective'];
+    const additionalCheck = container.getAttribute('equationCheck');
+    console.log('🚀 ~ validateObjectiveStatus ~ additionalCheck:', additionalCheck);
+    let equationGiven = false;
     if (objectiveString == null || objectiveString.length === 0) {
-        const onCorrect = container.getAttribute('onCorrect');
-        if (onCorrect) {
-            await executeActions(onCorrect, container);
+        if (additionalCheck) {
+            equationGiven = true;
+        }
+        if (!equationGiven) {
+            const onCorrect = container.getAttribute('onCorrect');
+            if (onCorrect) {
+                await executeActions(onCorrect, container);
+            }
+            storeActivityScore(100);
+            storingEachActivityScore(true);
+            triggerNextContainer();
+            return;
         }
-        storeActivityScore(100);
-        storingEachActivityScore(true);
-        triggerNextContainer();
-        return;
     }
-    else {
-        const objectiveArray = (_a = JSON.parse(localStorage.getItem(SelectedValuesKey))) !== null && _a !== void 0 ? _a : [];
-        let res;
-        const additionalCheck = container.getAttribute('equationCheck');
-        if (!!additionalCheck) {
+    const objectiveArray = (_b = JSON.parse((_a = container.getAttribute(SelectedValuesKey)) !== null && _a !== void 0 ? _a : '[]')) !== null && _b !== void 0 ? _b : [];
+    if (!!additionalCheck) {
+        const balanceEl = document.querySelector('lido-balance');
+        if (!balanceEl) {
             res = equationCheck(additionalCheck);
-            console.log('🚀 ~ handleShowCheck ~ res:', res);
         }
         else {
-            res = matchStringPattern(objectiveString, objectiveArray);
+            res = balanceResult(container, objectiveString);
         }
-        if (res) {
-            const attach = container.getAttribute('appendToDropOnCompletion');
-            body.style.pointerEvents = 'none';
-            const onCorrect = container.getAttribute('onCorrect');
-            if (onCorrect) {
-                if (attach === 'true') {
-                    appendingDragElementsInDrop();
-                }
-                await executeActions(onCorrect, container);
-            }
-            if (container.getAttribute('dropAttr') === 'EnableAnimation') {
-                setTimeout(() => {
-                    triggerNextContainer();
-                }, 2000);
+        console.log('🚀 ~ handleShowCheck ~ res:', res);
+    }
+    else {
+        res = matchStringPattern(objectiveString, objectiveArray);
+    }
+    if (res) {
+        const attach = container.getAttribute('appendToDropOnCompletion');
+        const onCorrect = container.getAttribute('onCorrect');
+        if (onCorrect) {
+            if (attach === 'true') {
+                appendingDragElementsInDrop();
             }
-            else {
+            await executeActions(onCorrect, container);
+        }
+        if (container.getAttribute('dropAttr') === 'EnableAnimation') {
+            setTimeout(() => {
                 triggerNextContainer();
-            }
-            await calculateScore();
+            }, 2000);
         }
         else {
-            const onInCorrect = container.getAttribute('onInCorrect');
-            await executeActions(onInCorrect, container);
-            const isContinueOnCorrect = container.getAttribute('is-continue-on-correct') === 'true';
-            if (!isContinueOnCorrect) {
-                triggerNextContainer();
-                await calculateScore();
-            }
+            triggerNextContainer();
+        }
+        await calculateScore();
+    }
+    else {
+        const onInCorrect = container.getAttribute('onInCorrect');
+        await executeActions(onInCorrect, container);
+        const isContinueOnCorrect = container.getAttribute('is-continue-on-correct') === 'true';
+        if (!isContinueOnCorrect) {
+            triggerNextContainer();
+            await calculateScore();
         }
     }
 };
 export const triggerNextContainer = () => {
-    body.style.pointerEvents = 'auto';
     AudioPlayer.getI().stop();
     // const event = new CustomEvent('nextContainer');
     console.log('🚀 ~ triggerNextContainer ~ event:', event);
@@ -544,16 +682,16 @@ export const triggerPrevcontainer = () => {
 export function convertUrlToRelative(url) {
     const container = document.getElementById(LidoContainer);
     const baseUrl = container.getAttribute('baseUrl');
-    if ((url === null || url === void 0 ? void 0 : url.startsWith('http')) || (url === null || url === void 0 ? void 0 : url.startsWith('blob')) || (url === null || url === void 0 ? void 0 : url.startsWith('data'))) {
+    if ((url === null || url === void 0 ? void 0 : url.startsWith('http')) || (url === null || url === void 0 ? void 0 : url.startsWith('blob'))) {
         return url;
     }
-    if (baseUrl) {
-        const newUrl = url.startsWith('/') ? url.slice(1) : url;
-        if (newUrl.startsWith(baseUrl.replace(/^\/+|\/+$/g, '')))
-            return newUrl;
-        return baseUrl.endsWith('/') ? baseUrl + newUrl : `${baseUrl}/${newUrl}`;
+    else if (baseUrl) {
+        const newUrl = !url.startsWith('/') ? url : url.substring(1);
+        return baseUrl + (baseUrl.endsWith('/') ? newUrl : '/' + newUrl);
+    }
+    else {
+        return getAssetPath(url);
     }
-    return getAssetPath(url);
 }
 /**
  * Asynchronously speaks the given text using the browser's text-to-speech API.
@@ -742,7 +880,10 @@ export const equationCheck = (additionalCheck) => {
     });
     // 3. Join the modified parts back into one string
     const resultString = modifiedParts.join('');
+    console.log('🚀 ~ equationCheck ~ resultString:', resultString);
+    // 4. Evaluate the final string as a mathematical expression
     const finalRes = evaluate(resultString);
+    console.log('🚀 ~ equationCheck ~ finalRes:', finalRes);
     return finalRes;
 };
 const getElementsForQueries = (query) => {
@@ -811,13 +952,6 @@ export const attachSpeakIcon = async (element) => {
     }
     element.appendChild(speakIconElement);
 };
-export const clearLocalStorage = () => {
-    localStorage.removeItem(DragSelectedMapKey);
-    localStorage.removeItem(DragMapKey);
-    localStorage.removeItem(SelectedValuesKey);
-    localStorage.removeItem(DropHasDrag);
-    localStorage.removeItem(DropLength);
-};
 /**
  * Applies a delay to the element's visibility based on `delayVisible`.
  */
@@ -903,3 +1037,227 @@ export function generateUUIDFallback() {
         return v.toString(16);
     });
 }
+export const revealImageValue = (imageEl) => {
+    if (!imageEl)
+        return;
+    const value = imageEl.getAttribute('value');
+    if (!value)
+        return;
+    let valueElement = imageEl.querySelector('.lido-display-hiddenvalue');
+    if (!valueElement) {
+        valueElement = document.createElement('div');
+        valueElement.classList.add('lido-display-hiddenvalue');
+        imageEl.style.position = 'relative';
+        imageEl.appendChild(valueElement);
+    }
+    valueElement.innerText = value;
+};
+const setImageBackground = (el, color) => {
+    if (!el)
+        return;
+    el.classList.add('lido-image-colorize');
+    const img = el.querySelector('img');
+    if (img) {
+        // use same image as mask
+        el.style.setProperty('--mask-url', `url(${img.src})`);
+    }
+    if (color === 'red') {
+        el.style.setProperty('--tint-color', '#ff0000');
+    }
+    else if (color === 'green') {
+        el.style.setProperty('--tint-color', '#00c853');
+    }
+    else {
+        el.style.removeProperty('--tint-color');
+        el.style.removeProperty('--mask-url');
+    }
+};
+export const HighlightStarsOneByOne = async (element, value) => {
+    if (!element)
+        return;
+    if (!value)
+        return;
+    // Dynamically find the parent row of stars
+    const stars = Array.from(element.children);
+    console.log('starRow', stars);
+    for (const star of stars) {
+        // Highlight the star
+        star.classList.add('lido-glow');
+        // Play star sound
+        await AudioPlayer.getI().play(star);
+        // Fade out the star (disappear)
+        star.style.opacity = '0';
+        star.style.visibility = 'hidden';
+        await new Promise(resolve => setTimeout(resolve, 300)); // Wait for fade-out to complete
+        // Remove the highlight
+        star.classList.remove('lido-glow');
+    }
+};
+export const animateBoxCells = async (element, value) => {
+    if (!element)
+        return;
+    if (!value)
+        return;
+    // Select all cells with the attribute type="box"
+    const boxCells = Array.from(element.children);
+    console.log('boxCells', boxCells);
+    if (!boxCells)
+        return;
+    boxCells.forEach(cell => {
+        // Reset any previous styles
+        cell.style.visibility = 'hidden';
+    });
+    // Animate each cell one by one
+    for (const cell of boxCells) {
+        cell.style.visibility = 'visible';
+        cell.style.opacity = '1';
+        // Apply the "come from top" animation
+        cell.classList.add('lido-box-highlight');
+        // Delay for each cell to come one after another
+        await new Promise(resolve => setTimeout(resolve, 600)); // Adjust delay as needed
+        cell.classList.remove('lido-box-highlight');
+    }
+    // After all cells have come down, apply the bounce animation
+    for (const cell of boxCells) {
+        // play the text child inside cell
+        await AudioPlayer.getI().play(cell);
+    }
+};
+export const questionBoxAnimation = async (element, value) => {
+    if (!element)
+        return;
+    if (!value)
+        return;
+    // Select all drag elements and drop elements
+    const dragElements = Array.from(element.querySelectorAll("[type='drag']"));
+    // Ensure all drag childrens which is dropped disappear
+    dragElements.forEach(dragElement => {
+        if (dragElement.hasAttribute('drop-to')) {
+            dragElement.style.transition = 'opacity 0.5s ease';
+            dragElement.style.opacity = '0'; // Fade out
+            setTimeout(() => {
+                dragElement.remove(); // Remove from view after fade-out
+            }, 500);
+        }
+    });
+    // Reveal all drop childrens which is hidden
+    const dropElements = Array.from(element.querySelectorAll("[type='drop']"));
+    let check = false;
+    dropElements.forEach(dropEl => {
+        const dropVal = dropEl.getAttribute("value");
+        if (dropVal && dropEl.innerText.trim() === "?") {
+            dropEl.innerText = dropVal;
+            if (dropElements.length > 1 && check == false) {
+                if (window.innerWidth > window.innerHeight) {
+                    dropEl.style.marginRight = "-45px";
+                }
+                else {
+                    dropEl.style.marginRight = "-65px";
+                }
+                check = true;
+            }
+        }
+    });
+};
+export const SumTogetherAnimation = async (element, value) => {
+    if (!element)
+        return;
+    if (!value)
+        return;
+    const container = document.getElementById(LidoContainer);
+    if (!container)
+        return;
+    // Expecting structure: [_, TopRow, questionRow, optionRow, ...]
+    const TopRow = Array.from(element.children)[1];
+    const questionRow = Array.from(element.children)[2];
+    const optionRow = Array.from(element.children)[3];
+    if (!TopRow || !questionRow || !optionRow)
+        return;
+    const topRowChildren = Array.from(TopRow.children);
+    const questionRowChildren = Array.from(questionRow.children);
+    const firstNumberEl = questionRowChildren[0];
+    const signElement = questionRowChildren[1];
+    const secondNumberEl = questionRowChildren[2];
+    const equalElement = questionRowChildren[3];
+    const answerElement = questionRowChildren[4];
+    // helper functions
+    const showElement = (el) => {
+        if (!el)
+            return;
+        el.style.visibility = 'visible';
+        el.style.display = '';
+        el.style.opacity = '1';
+    };
+    const readNumber = (el) => {
+        if (!el)
+            return 0;
+        const v = (el.getAttribute && (el.getAttribute('value') || el.getAttribute('string'))) || el.textContent || '';
+        return parseInt(String(v).trim(), 10) || 0;
+    };
+    const elementAppearance = async (flag) => {
+        if (flag) {
+            if (firstNumberEl) {
+                await new Promise(r => setTimeout(r, 200));
+                showElement(firstNumberEl);
+            }
+            if (signElement) {
+                await new Promise(r => setTimeout(r, 200));
+                showElement(signElement);
+            }
+        }
+        else {
+            if (secondNumberEl) {
+                await new Promise(r => setTimeout(r, 200));
+                showElement(secondNumberEl);
+            }
+            if (equalElement) {
+                await new Promise(r => setTimeout(r, 300));
+                showElement(equalElement);
+            }
+            if (optionRow) {
+                await new Promise(r => setTimeout(r, 300));
+                showElement(optionRow);
+            }
+            if (answerElement) {
+                await new Promise(r => setTimeout(r, 200));
+                showElement(answerElement);
+            }
+        }
+    };
+    const number1 = readNumber(firstNumberEl);
+    const number2 = readNumber(secondNumberEl);
+    const sign = ((signElement && ((signElement.getAttribute('string') || signElement.textContent) || '')).toString().trim() === '+') ? '+' : '-';
+    if (sign === '-') {
+        // '-' flow: reveal one by one then change bgColor of last B to red
+        for (let i = 0; i < topRowChildren.length; i++) {
+            await new Promise(resolve => setTimeout(resolve, 75));
+            showElement(topRowChildren[i]);
+        }
+        elementAppearance(true);
+        await new Promise(r => setTimeout(r, 500));
+        for (let k = 0; k < Math.min(number2, topRowChildren.length); k++) {
+            const idx = topRowChildren.length - 1 - k;
+            setImageBackground(topRowChildren[idx], 'red');
+            await new Promise(r => setTimeout(r, 200));
+        }
+        elementAppearance(false);
+    }
+    else {
+        // '+' flow: hide all, then showElement first A, then showElement next B in green
+        for (let i = 0; i < Math.min(number1, topRowChildren.length); i++) {
+            await new Promise(resolve => setTimeout(resolve, 120));
+            showElement(topRowChildren[i]);
+        }
+        elementAppearance(true);
+        await new Promise(r => setTimeout(r, 500));
+        for (let j = 0; j < Math.min(number2, Math.max(0, topRowChildren.length - number1)); j++) {
+            const idx = number1 + j;
+            if (topRowChildren[idx]) {
+                showElement(topRowChildren[idx]);
+                setImageBackground(topRowChildren[idx], 'green');
+            }
+            await new Promise(r => setTimeout(r, 80));
+        }
+        elementAppearance(false);
+    }
+};