note_front_and_back_template.html

<!-- front template for deck requiring online -->
<div id="action">{{Action}}</div>

<hr>
<div class="box">
    <div id="shortcut" style="visibility: hidden;">{{ShortCut}}</div>
</div>

<script src="https://cdn.jsdelivr.net/gh/Otter-man/anki_shortcut_js_field/anki_shortcut_field.js"></script>

<!-- front template for offline deck-->
<div id="action">{{Action}}</div>

<hr>
<div class="box">
    <div id="shortcut" style="visibility: hidden;">{{ShortCut}}</div>
</div>
<script>

    var keystrokes = [];
    var keystrokesCode = [];
    var correctShortcut = document.getElementById("shortcut").textContent;
    var correctShortcutArr = correctShortcut.split(/(?:\b ?\+ ?| )/).map(function (item) {
        return item.trim().toLowerCase();
    }).sort();
    var correctShortcutStr = correctShortcutArr.toString().toLowerCase()

    // var contains all the keys that are modified when you press shift together.
    var doubleKeys = {
        'Backquote': ['~', '`'],
        'Digit1': ['1', '!'],
        'Digit2': ['2', '@'],
        'Digit3': ['3', '#'],
        'Digit4': ['4', '$'],
        'Digit5': ['5', '%'],
        'Digit6': ['6', '^'],
        'Digit7': ['7', "&"],
        'Digit8': ['8', '*'],
        'Digit9': ['9', '('],
        'Digit0': ['0', ')'],
        'Minus': ['-', '_'],
        'Equal': ['=', '+'],
        'Backslash': ['\\', '|'],
        'BracketLeft': ['[', '{'],
        'BracketRight': [']', '}'],
        'Quote': ["'", '"'],
        'Semicolon': [';', ':'],
        'Comma': [',', '<'],
        'Period': [".", '>'],
        'Slash': ['/', '?'],
        "Numpad1": ["1", "End"],
        "Numpad2": ["2", 'ArrowDown'],
        "Numpad3": ["3", "PageDown"],
        "Numpad4": ["4", "ArrowLeft"],
        "Numpad5": ["5", "Clear"],
        "Numpad6": ["6", "ArrowRight"],
        "Numpad7": ["7", "Home"],
        "Numpad8": ["8", "ArrowUp"],
        "Numpad9": ["9", "PageUp"],
        "Numpad0": ["0", "Insert"],
        "NumpadDecimal": [".", "Delete"],
        "NumpadDivide": ["/", "/"],
        "NumpadMultiply": ["*", "*"],
        "NumpadSubtract": ["-", "-"],
        "NumpadAdd": ["+", "+"],
        "NumpadEnter": ["Enter", "Enter"]
    };


    $('#shortcut').html("press shortcut");
    document.getElementById("shortcut").style.color = "grey";
    document.getElementById("shortcut").style.visibility = "visible";
    if (window.SwitcherListener == undefined) {
        // prevent starting second instances of event listener in the
        // same window with this switcher
        window.SwitcherListener = true
        $(document).keydown(function (event) {

            if (keystrokes.length < correctShortcutArr.length) {
                if (event.keyCode == 32) {
                    event.preventDefault();
                    keystrokes.push(event.code);
                    keystrokesCode.push(event.code);
                }
                else if (event.code.includes('Meta')) {
                    event.preventDefault();
                    keystrokes.push('cmd');
                    keystrokesCode.push(event.code);
                }
                else {
                    event.preventDefault();
                    keystrokes.push(event.key);
                    keystrokesCode.push(event.code);
                }
            }

            var keystrokesSorted = keystrokes.slice()
            var keystrokesSortedAlt = keystrokesSorted.slice()

            // check if the pressed key can be modified by shift, if yes make two
            // different arrays to keep both versions for comparison with the answer
            // shortcut 
            for (i = 0; i < keystrokesCode.length; i++) {
                if (doubleKeys[keystrokesCode[i]] !== undefined) {
                    keystrokesSorted[i] = doubleKeys[keystrokesCode[i]][0];
                    keystrokesSortedAlt[i] = doubleKeys[keystrokesCode[i]][1];
                }
            }

            keystrokesSorted = keystrokesSorted.map(function (item) {
                return item.trim().toLowerCase();
            }).sort();
            keystrokesSortedAlt = keystrokesSortedAlt.sort().map(function (item) {
                return item.trim().toLowerCase();
            }).sort();



            if (keystrokesSorted.toString().toLowerCase() == correctShortcutStr || keystrokesSortedAlt.toString().toLowerCase() == correctShortcutStr) {
                $('#shortcut').html(correctShortcut);
                document.getElementById("shortcut").style.color = "green";
                event.preventDefault();
            }
            else if (keystrokes.length == correctShortcutArr.length) {
                document.getElementById("shortcut").style.color = "red";
                $('#shortcut').html(keystrokes.join("+"));
                event.preventDefault();
            };

        })
    };

</script>

<!-- back template -->
<div id="action">{{Action}}</div>

<hr>
<div class="box">
    <div id="shortcut">{{ShortCut}}</div>
</div>