mdqm

Markdown Quiz Maker

Twin styles to make quizes rapidly with.

Installation

Both styles are in dist folder. To make full use export with this appended in either body or head:

<script>
    const $ = x => document.querySelectorAll(x);
    const $$ = document.body;
    const counter = document.createElement('footer')
    window.onload = () => {




        let s = $$.innerHTML
        s = s.replace(new RegExp(`<span class="cm-string">'''`, 'g'), '<input data-ok="');
        $$.innerHTML = s.replace(new RegExp(`'''</span>`, 'g'), '">');

        $$.appendChild(counter)


        for (const el of $('ol>li>ol>li, ol>li>ul>li, ul>li>ol>li, ul>li>ul>li')) {
            if (el.firstChild instanceof HTMLQuoteElement) { el.addEventListener('mousedown', green); } else { el.addEventListener('mousedown', red); }

        }

        for (const el of $('pre input, pre * input')) {
            el.addEventListener('input', check);
        }

        const focusable = $('input, ol>li>ol, ol>li>ul, ul>li>ol, ul>li>ul')
        for (const el of focusable) {
            el.setAttribute('tabindex', '1');
            el.addEventListener('keydown', klik)
        }
        focusable[0].focus()
    }

    function green() { this.classList.toggle('green');
        count(); }

    function red() { this.classList.toggle('red');
        count(); }

    function check() {
        let v = this.value
        let k = this.dataset.ok
        if (v == '') { this.classList.remove('red');
            this.classList.remove('green'); } else if (v == k) { this.classList.remove('red');
            this.classList.add('green'); } else { this.classList.add('red');
            this.classList.remove('green'); }
        count();
    }

    function klik() {
        let e = $(':focus > li');
        let k = event.key;
        if (
            k == '1' || k == '2' || k == '3' || k == '4' || k == '5' || k == '6' ||
            k == 'a' || k == 'b' || k == 'c' || k == 'd' || k == 'e' || k == 'f'
        ) {

            let d = {
                '1': 0,
                '2': 1,
                '3': 2,
                '4': 3,
                '5': 4,
                '6': 5,
                'a': 0,
                'b': 1,
                'c': 2,
                'd': 3,
                'e': 4,
                'f': 5
            }
            let v = d[k];
            if (v < e.length) {

                let el = e[v];

                if (el.firstChild instanceof HTMLQuoteElement) { el.classList.toggle('green'); } else { el.classList.toggle('red'); };
                count();

            }
        }
    }

    function count() {
        let x = $('.green').length / ($('.green').length + $('.red').length) * 100
        counter.innerHTML = (x) + '%';
        if (x < 70) { counter.classList.add('red');
            counter.classList.remove('green'); } else { counter.classList.remove('red');
            counter.classList.add('green'); }
    }


    // function copyToClp(txt){
    // 	if (window.clipboardData && window.clipboardData.setData) {
    // 		// IE specific code path to prevent textarea being shown while dialog is visible.
    // 		return clipboardData.setData("Text", text); 

    // 	} else if (document.queryCommandSupported && document.queryCommandSupported("copy")) {
    // 		var textarea = document.createElement("textarea");
    // 		textarea.textContent = text;
    // 		textarea.style.position = "fixed";  // Prevent scrolling to bottom of page in MS Edge.
    // 		document.body.appendChild(textarea);
    // 		textarea.select();
    // 		try {
    // 			return document.execCommand("copy");  // Security exception may be thrown by some browsers.
    // 		} catch (ex) {
    // 			console.warn("Copy to clipboard failed.", ex);
    // 			return false;
    // 		} finally {
    // 			document.body.removeChild(textarea);
    // 		}
    // 	}
    // }
</script>

Usage

1. Make a list of questions.
2. In each question make a list of answers.
3. Mark correct answers with blockquotes.

Uses Night theme for typora as a base. https://github.com/typora/typora-default-themes