Configuration

You will need to create a config variable to pass to init. At minimum it needs to have the questions property shown below, which is an array of markdown files to load. The example below assumes q1.md, q2.md and q3.md are in the same folder as your HTML file; but you can load files from any publicly accessible location.

<script>
let config = {
    count: 5, 
    parent: '#elementId',
    lang: {
        check: 'Check',             // Check button text
        correct: 'Correct',         // Label for a question that's checked and correct
        incorrect: 'Incorrect',     // Label for a question that's checked and incorrect
    },
    questions: [
        'q1.md', 
        'q2.md', 
        'q3.md',
    ],
    style: 'bootstrap5',
};
new MDQ(config);
</script>

The config object can have the following properties. The only required property is questions. The others all have defaults that should work pretty well.

Property	Default	Notes
count	5	Maximum number of questions to load.
parent		The parent element to fill with the quiz. If blank, document.body is used. It can be either a string or an element. If it’s a string, then that string is used as a query selector to find an element.
questions	`[]`	Array of question files to consider when displaying. These will be randomly loaded, up to the number set in count. They can be filenames if they’re in the same folder as your HTML file or full URLs if they’re located somewhere else.
style		Style to use when building the quiz. Currently, only `bootstrap5` is available.
css	true	If true, additional CSS will be inserted into the page to make the quiz look better. If `false`, it’s not so you’ll probably want to include the styles in your CSS files.
syntaxHighlight	`true`	If `true`, and if you have code fences in your markdown then the PrismJS code highlighter will be added to the page and will syntax highlight code.
credit	`true`	If `true`, a link back to our site will be included at the bottom of the page. If `false`, then the link isn’t displayed.
reload	`true`	If `true`, a reload button is added to the bottom of the quiz allows your students to get a fresh copy of the quiz without reloading the page.
stripRaw	`true`	Strip out `and` tags. This is probably only necessary if you’re using a static site builder to host your files. GitHub pages does need this, and there’s a bit more on that below.
lang		Language strings so you can customize to what you need. correct, incorrect, check, help, true, false, reload