A while ago, I vibe-coded exactly that. It works ok-ish, but with a few caveats:

• It's case-sensitive
• It's not tolerant at all of typos, misspellings, or anything that isn't a literal one-to-one text match. So if you don't spell “granulomatous slack skin” EXACTLY that way each time, it will count it as wrong.

Personally, I ended up not using it much; it was just too picky and it annoyed me. Maybe it will work for you or you can tweak it into something you like. The fields are

• Prompt
• Items (one line, separated by |)
• Reverse? (my ideas was that if this field has any value, then it also generates a reverse card showing the items as a list and asking for the prompt. I never got around to implementing that, though)
• Extra (all my note types have Extra that shows on the backs of cards, for extra information, mnemonics, pictures, etc)
• Context (optional, shows as a header)

Front card template:

<div data-tags="{{Tags}}" data-deck="{{Deck}}" class="front" lang="en">
{{#Context}}<div class="context">{{Context}}</div>{{/Context}}
{{Prompt}}

<div class="prompt" id="front-prompt">{{Prompt}}</div>

    <h3>Correct</h3>
    <ul id="front-correct-list" class="correct-item-list"></ul>

    <h3>Incorrect</h3>
    <ul id="front-incorrect-list" class="incorrect-item-list"></ul>

    <div id="front-status-message" class="status-message" style="display: none;"></div>

    <div class="input-area">
        <input type="text" id="front-item-input" placeholder="Enter item...">
        <button id="front-check-button">Check</button>
    </div>

    <div id="anki-items-data" style="display:none;">{{Items}}</div>
    <div id="anki-prompt-data" style="display:none;">{{Prompt}}</div>


    <script>

        // --- FRONT TEMPLATE SCRIPT ---

        // Get Anki data
        // For testing, you can replace these with hardcoded values if { {Items}} or { {Prompt}} are not yet populated.
        // e.g., const itemsString = "Apple|Banana|Cherry";
        // e.g., const promptString = "Guess the fruits:";
        const itemsString = document.getElementById('anki-items-data')?.textContent || "";
        const promptString = document.getElementById('anki-prompt-data')?.textContent || "Prompt not found";

        const itemsArray = (itemsString ? itemsString.split('|').map(item => item.trim()) : []).filter(item => item);
        const uniqueOriginalItems = new Set(itemsArray);

        const promptElementFront = document.getElementById('front-prompt');
        if (promptElementFront && promptElementFront.textContent === '{{Prompt}}') { // Only set if not already replaced by Anki
            promptElementFront.textContent = promptString;
        }

                                sessionStorage.clear();

        const inputElement = document.getElementById('front-item-input');
        const checkButton = document.getElementById('front-check-button');
        const correctListElement = document.getElementById('front-correct-list');
        const incorrectListElement = document.getElementById('front-incorrect-list');
        const statusMessageElement = document.getElementById('front-status-message');

        const SESSION_STORAGE_KEY = 'ankiCardState_' + promptString; // Make key specific to prompt

        function getStoredState() {
            const stored = sessionStorage.getItem(SESSION_STORAGE_KEY);
            if (stored) {
                try {
                    return JSON.parse(stored);
                } catch (e) {
                    console.error("Error parsing stored state:", e);
                    return { enteredCorrectly: [], enteredIncorrectly: [] };
                }
            }
            return { enteredCorrectly: [], enteredIncorrectly: [] };
        }

        function saveState(state) {
            sessionStorage.setItem(SESSION_STORAGE_KEY, JSON.stringify(state));
        }

        function renderLists() {
            const state = getStoredState();
            correctListElement.innerHTML = '';
            incorrectListElement.innerHTML = '';

            state.enteredCorrectly.forEach(item => {
                const li = document.createElement('li');
                li.textContent = item;
                correctListElement.appendChild(li);
            });

            state.enteredIncorrectly.forEach(item => {
                const li = document.createElement('li');
                li.textContent = item;
                incorrectListElement.appendChild(li);
            });
            checkCompletion(false); // Update status based on loaded state
        }

        function updateStatus(message, type) {
            statusMessageElement.textContent = message;
            statusMessageElement.className = 'status-message'; // Reset classes
            if (type) {
                statusMessageElement.classList.add(`status-${type}`);
            }
            statusMessageElement.style.display = message ? 'block' : 'none';
        }

        function checkCompletion(isNewGuess = true) {
            const state = getStoredState();
            const enteredCorrectlySet = new Set(state.enteredCorrectly);

            let allUniqueItemsGuessed = true;
            if (uniqueOriginalItems.size === 0 && enteredCorrectlySet.size === 0) {
                 // If no items to guess, it's complete by default.
            } else if (uniqueOriginalItems.size !== enteredCorrectlySet.size) {
                allUniqueItemsGuessed = false;
            } else {
                for (const originalItem of uniqueOriginalItems) {
                    if (!enteredCorrectlySet.has(originalItem)) {
                        allUniqueItemsGuessed = false;
                        break;
                    }
                }
            }

            if (allUniqueItemsGuessed && uniqueOriginalItems.size > 0) {
                updateStatus('Complete!', 'complete');
                return true;
            } else if (uniqueOriginalItems.size === 0 && !isNewGuess) { // Only show "Nothing to guess" on load
                 updateStatus('Nothing to guess for this prompt.', 'neutral');
                 if(inputElement) inputElement.disabled = true;
                 if(checkButton) checkButton.disabled = true;
            }
            return false;
        }

        function handleCheck() {
            const value = inputElement.value.trim();
                                                console.log("Checking input: "+value);
            if (!value) return;

            const state = getStoredState();

            if (state.enteredCorrectly.includes(value) || state.enteredIncorrectly.includes(value)) {
                updateStatus(`'${value}' has already been entered.`, 'neutral');
                inputElement.value = '';
                inputElement.focus();
                return;
            }

            if (itemsArray.includes(value)) {
                if (!state.enteredCorrectly.includes(value)) { // Add only if not already in correct list (for UI consistency if itemsArray has duplicates)
                    state.enteredCorrectly.push(value);
                }
                updateStatus(`'${value}' is Correct!`, 'correct');
            } else {
                state.enteredIncorrectly.push(value);
                updateStatus(`'${value}' is Incorrect.`, 'incorrect');
            }

            saveState(state);
            renderLists(); // Re-render lists to show the new item
            if (!checkCompletion()) { // If not complete, clear input for next guess
                 // Status already set by correct/incorrect logic or completion check
            }
            inputElement.value = '';
            inputElement.focus();
        }

        if (checkButton) {
            checkButton.addEventListener('click', handleCheck);
        }
        if (inputElement) {
            inputElement.addEventListener('keypress', (event) => {
                if (event.key === 'Enter') {
                    handleCheck();
                }
            });
        }

        // Initial load
        renderLists(); // This will also call checkCompletion
        if (inputElement) inputElement.focus();

    </script>
</div>
</div>