Help with MCQ templates

Continuing from here: Multiple choice questions (MCQ) native in Anki - #8 by Anon_0000


I want a MCQ template that works with prettify minimal styling and looks decent. I’ve either found templates that don’t fit with prettify design or they were too complicated for me to be able to change anything.

@Anon_0000 Can you create something like this:

I’ll note down what I’m looking for:

  1. Support for both dark/light modes.
  2. Something that doesn’t easily break, as I’ll share the content with others.
  3. Only one possible correct answer.

Basically that’s it.

I’ll attach my version of prettify styling, if that helps:

/* -------------------------------------------------- PREFERENCES */

:root {
  --card-max-width: 40em;
  --card-text-align: left;
  --font-size-regular: 16px;
  --font-size-small: 14px;
  --img-width: 50%;
  --img-brightness: 0.95;
  --img-filter: none;
  --font-weight: 500;
  --table-radius: 0.8em;
  --card-radius: 8px;
  --mochi-toggle: block;
}

.mobile {
  --card-max-width: 40em;
  --card-text-align: left;
  --font-size-regular: 16px;
  --font-size-small: 14px;
  --img-width: 50%;
  --img-brightness: 0.95;
  --img-filter: none;
  --font-weight: 500;
  --table-radius: 0.8em;
  --card-radius: 8px;
  --mochi-mobile-toggle: block;
}

/*
--------------------------------------------- THEME VARIABLES
*/

.card {
  --card-bg: #EFF1F5;
  --text-fg: #4C4F69;
  --text-fg-faint: #6C6F85;
  --text-bg-selected: #BCC0CC;
  --card-border: #BCC0CC;
  --card-box-shadow: #0000001f;
  --divider: #BCC0CC;
  --tag-fg: #5C5F77;
  --tag-bg: #9CA0B0;
  --tag-fg-active: #DE9584;
  --tag-bg-active: #ACB0BE;
  --tag-border: transparent;
  --cloze-fg: #E49320;
  --cloze-bg: #EFF1F5;
  --link-fg: #2A6EF5;
  --link-bg: transparent;
  --link-fg-active: #04A5E5;
  --link-bg-active: transparent;
  --bold-fg: #E49320;
  --italic-fg: #40A02B;
  --h1-fg: #40A02B;
  --h2-fg: #179299;
  --h3-fg: #8839EF;
  --h4-fg: #D20F39;
  --h5-fg: #04A5E5;
  --bold-italic-fg: var(--bold-fg);
  --highlight1: #E64553;
  --highlight2: #40A02B;
  --highlight3: #7287FD;
  --highlight4: #FE640B;
  --scheme-rosewater: #DE9584;
  --scheme-flamingo: #DD7878;
  --scheme-pink: #EC83D0;
  --scheme-mauve: #8839EF;
  --scheme-red: #D20F39;
  --scheme-maroon: #E64553;
  --scheme-peach: #FE640B;
  --scheme-yellow: #E49320;
  --scheme-green: #40A02B;
  --scheme-teal: #179299;
  --scheme-sky: #04A5E5;
  --scheme-sapphire: #209FB5;
  --scheme-blue: #2A6EF5;
  --scheme-lavender: #7287FD;
  --scheme-crust: #DCE0E8;
  --scheme-grey: #6C6F85;
  --mark-color: rgba(228, 147, 32, 0.2);
}

.nightMode.card {
  --card-bg: #2e2f31;
  --text-fg: #ffffffe6;
  --text-fg-faint: #ffffffb3;
  --text-bg-selected: #ffffff1f;
  --card-border: #ffffff0a;
  --card-box-shadow: #0000001f;
  --divider: #ffffff1f;
  --tag-fg: #ffffffb3;
  --tag-bg: #ffffff14;
  --tag-fg-active: #ffffff;
  --tag-bg-active: #ffffff1f;
  --tag-border: transparent;
  --cloze-fg: #F9E2AF;
  --cloze-bg: #2e2f31;
  --link-fg: #87B0F9;
  --link-bg: transparent;
  --link-fg-active: #89DCEB;
  --link-bg-active: transparent;
  --bold-fg: #F9E2AF;
  --italic-fg: #A6E3A1;
  --h1-fg: #A6E3A1;
  --h2-fg: #94E2D5;
  --h3-fg: #CBA6F7;
  --h4-fg: #F38BA8;
  --h5-fg: #89DCEB;
  --bold-italic-fg: var(--bold-fg);
  --highlight1: #EBA0AC;
  --highlight2: #A6E3A1;
  --highlight3: #B4BEFE;
  --highlight4: #FAB387;
  --scheme-rosewater: #F5E0DC;
  --scheme-flamingo: #F2CDCD;
  --scheme-pink: #F5C2E7;
  --scheme-mauve: #CBA6F7;
  --scheme-red: #F38BA8;
  --scheme-maroon: #EBA0AC;
  --scheme-peach: #FAB387;
  --scheme-yellow: #F9E2AF;
  --scheme-green: #A6E3A1;
  --scheme-teal: #94E2D5;
  --scheme-sky: #89DCEB;
  --scheme-sapphire: #74C7EC;
  --scheme-blue: #87B0F9;
  --scheme-lavender: #B4BEFE;
  --scheme-crust: #000000;
  --scheme-grey: #BDBDBD;
  --mark-color: rgba(249, 226, 175, 0.2);
}

/*
----------------------------------------------- CARD STYLING 
*/

/* -------------------------------------------------- BACKGROUND */

.nightMode.card {
  cursor: default;
  padding: 0.5em 0.3em;
}

html:not(.mobile) .card {
  padding: 0.5em;
}

.card::-webkit-scrollbar {
  display: none;
}

/* --------------------------------------------------- FLASHCARD */

.prettify-flashcard {
  opacity: 90%;
  background-color: var(--card-bg);
  border-radius: var(--card-radius);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-box-shadow) 0px 7px 14px 0px, var(--card-box-shadow) 0px 3px 6px 0px;
  color: var(--text-fg);
  font-family: var(--font-family);
  font-size: var(--font-size-regular);
  line-height: 1.5;
  margin: 0 auto;
  max-width: var(--card-max-width);
  text-align: var(--card-text-align);
  word-wrap: normal;
}

.prettify-flashcard ::selection {
  background-color: var(--text-bg-selected);
}

.cloze-type {
  text-align: left;
}

/* ------------------------------------------------------ FIELDS
*/
.prettify-field {
  margin: 1em;
  margin-bottom: 1em;
  overflow: auto;
}

.mobile .prettify-field {
  margin: 0.25em;
  margin-bottom: 0.75em;
}

.prettify-field:last-of-type {
  margin-bottom: 1.4em;
}

/* ------------------------------------------------------- CLOZE 
*/

.cloze {
  border-radius: 0.25em;
  font-weight: bold;
  background-color: var(--cloze-bg);
  color: var(--cloze-fg);
  padding: 0 0.1em;
}

/* -------------------------------------------------------- DECK
*/

.prettify-deck {
  margin: 0.75em;
  margin-left: 1em;
  margin-bottom: 0.5em;
  display: flex;
  color: var(--text-fg-faint);
  font-size: var(--font-size-small);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: scroll;
}

.prettify-deck::-webkit-scrollbar {
  display: none;
}

.mobile .prettify-deck {
  margin: 1em;
}

.prettify-subdeck {
  text-overflow: ellipsis;
  overflow: clip;
  min-width: fit-content;
}

/* --------------------------------------------------------- TAGS 
*/

.prettify-tags {
  margin: 0.5em;
  margin-left: 1em;
  margin-bottom: 1em;
  display: flex;
  flex-flow: row wrap;
  font-size: var(--font-size-small);
}

.mobile .prettify-tags {
  margin: 0.3em;
}

.prettify-tag {
  all: initial;
  background-color: var(--tag-bg);
  border-radius: 0.2em;
  color: var(--tag-fg);
  display: inline;
  font-size: var(--font-size-small);
  font-family: var(--font-family);
  margin: 0.25em;
  padding: 0.25em;
  transition: all 0.25s;
  word-break: break-word;
}


.prettify-tag:hover {
  background-color: var(--tag-bg-active);
  color: var(--tag-fg-active);
  cursor: pointer;
}

.extra {
  color: var(--text-fg-faint);
  font-size: var(--font-size-small);
}

/* ----------------------------------------------------- DIVIDER 
*/

.prettify-field hr {
  border: none;
  border-bottom: 1px dashed var(--divider);
  background-color: transparent;
  width: 80%;
}

.prettify-divider {
  background-color: transparent;
  border: none;
  border-bottom: 1px dashed var(--divider);
  padding: 0;
}

/* ----------------------------------------------------- TABLES 
*/

table {
  border-collapse: separate;
  border-spacing: 0;
  min-width: 60%;
  position: relative;
  box-align: center;
  margin-left: auto;
  margin-right: auto;
  overflow: scroll;
  border: 1px solid;
  text-align: center;
  border-color: var(--card-border);
  margin-top: 10px;
}

td,
th {
  border: 1px solid;
  text-align: center;
  border-color: var(--card-border);
}

tr:nth-of-type(odd) {
  background-color: var(--card-box-shadow);
}

/* ------------------------------------------------------- LINKS */

a,
a:visited {
  text-decoration: none;
  color: var(--link-fg);
}

a:hover,
a:active {
  text-decoration: underline;
  color: var(--link-fg-active);
}

/* -------------------------------------------------- FORMATTING */

/* ----------------------------------------------------- HEADERS
*/

h1 {
  color: var(--h1-fg);
  margin: 0em;
  text-align: center;
}

h2 {
  color: var(--h2-fg);
  margin: 0em;
  text-align: center;
}

h3 {
  color: var(--h3-fg);
  margin: 0em;
  text-align: center;
}

h4 {
  color: var(--h4-fg);
  margin: 0em;
  text-align: center;
}

h5 {
  color: var(--h5-fg);
  margin: 0em;
  text-align: center;
}

h6 {
  color: var(--h6-fg);
  margin: 0em;
  text-align: center;
}

/*
-------------------------------------------------- HIGHLIGHT */

hl {
  color: var(--highlight1);
}

hl2 {
  color: var(--highlight2);
}

hl3 {
  color: var(--highlight3);
}

hl4 {
  color: var(--highlight4);
}

/*
------------------------------------------- OTHER FORMATTING */

pre {
  font-size: var(--font-size-small);
  background-color: var(--cloze-bg);
  padding: 10px;
  border-radius: calc(var(--card-radius) * 0.5);
  max-width: fit-content;
  min-width: 80%;
  margin: 0 auto;
}

.title-field {
  color: var(--text-fg);
  font-size: 140%;
  font-weight: bold;
}

:is(h1, h2, h3, h4, h5, h6) + :is(ul, ol) {
  margin-block-start: 5px;
}

ol li::marker {
  color: var(--scheme-rosewater);
  font-weight: bold;
}

mark {
  background-color: var(--mark-color);
  border-radius: 3px;
  color: var(--text-fg);
}

#hidden {
  display: none;
}

/* ------------------------------------------------------- INPUT */

input {
  background-color: var(--card-bg);
  border-width: 2px;
  border-style: solid;
  border-color: var(--card-border);
  border-radius: 7px;
  min-height: 25px;
  font-family: var(--font-family) !important;
  font-size: var(--font-size-regular) !important;
  color: var(--text-fg-faint);
  padding: 10px;
}

input::selection {
  background-color: rgb(var(--ctp-blue)) !important;
  color: var(--card-bg) !important;
}

/*
----------------------------------------------- REPLAY BUTTON
*/

.replay-button svg circle {
  fill: var(--card-bg);
  stroke: var(--tag-bg);
  stroke-width: 4px;
}

.replay-button svg path {
  fill: var(--tag-bg);
  stroke: var(--tag-bg);
}

.morsecode {
  padding: 15px 20px;
  margin-left: 5px;
  margin-right: 5px;
  border-radius: 10px;
  background-color: rgba(220, 224, 232, 0.4);
  border: solid 2px var(--card-border);
}

.replay-button svg {
  padding: 20px;
  width: 0px;
  height: 0px;
  background-color: var(--text-fg);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolygon points='10 8 16 12 10 16 10 8'%3E%3C/polygon%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
}

/*
--------------------------------------------- CENTER TEXT DIV
*/

.center-text {
  text-align: center;
}
.center-text ul,
.center-text ol {
  padding-inline-start: 0;
}
.center-text ul li,
.center-text ol li {
  width: fit-content;
  margin: 0 auto;
}

.shift-right {
  padding-left: 20px;
}
.shift-right :is(ul, ol) {
  padding-inline-start: 15px;
}
.shift-right :is(ul, ol):first-child {
  margin-block-start: 5px;
}
.shift-right .center-text {
  padding-left: 0;
}
.shift-right .center-text > :is(ul, ol) {
  padding-inline-start: 5px;
}
.shift-right .center-text > :is(ul, ol):first-child {
  margin-block-start: 5px;
}

.center-text .shift-right {
  padding-left: 0;
}
.center-text .shift-right > :is(ul, ol) {
  padding-inline-start: 5px;
}
.center-text .shift-right > :is(ul, ol):first-child {
  margin-block-start: 5px;
}

/*
----------------------------------------------- FEEDBACK FORM
*/

.prettify-report {
   display: flex;
   justify-content: end;
   margin-top: auto;
   margin-left: auto;
   margin-right: 0.3em;
}

/*
------------------------------------------------- LAST ROW DIV
*/

.last-row {
 display: flex;
 flex-direction: row;
 justify-content: space-between;
}

/*
------------------------------------------------------- MOCHI */

.prettify-flip {
  color: var(--text-fg-faint);
  font-size: var(--font-size-small);
  padding: 1em 0;
  background: rgba(255, 255, 255, 0.0196078431);
  border-top: 1px dashed var(--divider);
  display: var(--mochi-mobile-toggle, var(--mochi-toggle, none));
}

.prettify-hint {
  color: var(--text-fg-faint);
  opacity: 0.5;
  font-size: var(--font-size-small);
  font-family: var(--font-family);
  padding-top: 1em;
  display: var(--mochi-mobile-toggle, var(--mochi-toggle, none));
}

.prettify-flip svg {
  height: 20px;
  width: 20px;
  margin-bottom: calc(-13px + 0.5 * var(--font-size-small));
}

.prettify-hint svg {
  height: 20px;
  width: 20px;
  margin-bottom: calc(-13px + 0.5 * var(--font-size-small));
}

html:not(.mobile) .prettify-hint.touch {
  display: none;
}

html.mobile .prettify-hint.key {
  display: none;
}

/*
--------------------------------------- FORMAT ERROR MESSAGES */

div:has(> [href^="https://docs.ankiweb.net"], [href^="https://anki.tenderapp.com"], [href^="https://faqs.ankiweb.net"]) {
  text-align: center;
}

/*
---------------------------------------------------- BUTTONS */

button,
.isMac button {
  color: var(--tag-fg);
  border-radius: 0.2em;
  box-shadow: none;
  border: 1px solid var(--card-border);
  border-bottom-color: var(--card-border);
  font-size: var(--font-size-small);
  font-family: inherit;
  transition: all 0.25s;
  background: none;
  background-color: var(--tag-bg);
}

button:active, button:hover,
.isMac button:active,
.isMac button:hover {
  background: none;
  background-color: var(--tag-bg-active);
  color: var(--tag-fg-active);
  cursor: pointer;
}

/*
-------------------------------------- ADJUSTMENTS FOR MOBILE 
*/

.mobile .card,
.mobile #content {
  font-size: 120%;
  margin: 0;
}

/*
----------------------------------------------------- IMAGES */

img.zoomable-image,
.zoomable-image img {
  border-radius: 0.25em;
  display: block;
  margin: 1em auto;
  max-width: var(--img-width) !important;
  transition: max-width 0.25s 0.1s, opacity 0.25s 0.1s, filter 0.1s, transform 0s;
}

.nightMode img.zoomable-image,
.nightMode .zoomable-image img {
  filter: var(--img-filter);
  opacity: var(--img-brightness);
}

img.zoomable-image:hover,
.zoomable-image img:hover {
  cursor: zoom-in;
  filter: none;
  max-width: 100% !important;
  opacity: 1;
}

img.zoomable-image + br,
.zoomable-image img + br {
  display: none;
}

html:not(.mobile) img.zoomable-image:active,
html:not(.mobile) .zoomable-image img:active {
  border: 1px solid var(--link-fg-active);
  cursor: zoom-out;
  filter: none;
  left: 0;
  max-width: 95% !important;
  opacity: 1;
  position: fixed;
  top: 0;
  transform: translate(calc(50vw - 50%), calc(50vh - 50%));
  z-index: 100;
}

/* -------------------------------------------------- LOAD FONTS */

@font-face { 
  font-family: 'Lexend'; 
  src: url('_LexendDeca.ttf');
  font-weight: 350;
}

/*
----------------------------------------------- SELECT FONTS */

:root {
  --font-family: "Lexend";
}

.mobile {
  --font-family: "Lexend";
}

It’s almost similar to prettify with only some changes. In any case, I’ll appreciate even a bare-bones mock up of the above design.

Sure, it should be quite easy to style it that way. What MCQ template are you using that should be styled in that way?

I’m assuming anki-prettify supports that out of the box. So if I apply their styling, then those two points shouldn’t be an issue.

That would probably require changes to the js code. Should be pretty easy to achieve once I know what template you’d like me to modify.

I’m using none for now. Do you need me to select something you can modify? You can choose something yourself. I’ve never used MCQs before.

For the fields, I would just like the options to be in seperate fields and maybe that’s it. And the options should be numerical.

Edit: if you’re wanting to know, where the SS is from, it’s from ikkz templates. It was too complicated though so I wasn’t able to edit it myself.

So you’d like it to be edited to look different (i.e the anki-prettify design looks different)? Or is it the features that you don’t need and would like to be removed?

If you could list me the things you need, I can start working on them. I do need a bit of time though because of work and other things (which is why my github PRs are currently on ice as well).

I plan to finish my own card template (a basic one, not MCQ) and then I’d work on yours. I did have quite the success with my template redesign yesterday, so unless dark theme is going to be horribly difficult to get going, I’ll probably be able to start working on your template in less than seven days.

Does the ikkz template do that? If not, it would be great if you could link me a template that does that. It would greatly help. I never created MCQ templates before, as I still think they’re inferior to proper active recall. I also am just a novice at programming. But as far as I understand it should be possible to achieve those two points and it should even be fairly simple.

Well, the issue with IKKZ templates was that there were too many unnecessary features, the design looked different from my other cards, and it’s almost impossible to customise it for a normal person. Other than that, they had options in different fields just I wanted, had a nice working layout.

Now coming to topic, I actually tried some vibe coding with o4-mini’s help and I’d say I got pretty good results. I don’t know JS at all so of course I’m not sure how good the JS part is. And given I’m sharing the deck with others I fear it might break.

I can remove them if you tell me what you don’t need. Customizing should naturally become much easier as a result.

Ah, the previous message got messed up because of some crash on my end. So, what I was saying is I do have a template now but the JS comes from o3. As I don’t know how JS works if you can, I’d like you to check the JS.

Here’s a preview of what it looks like:

Screenshot-2025-05-09-22-09-43-80-a9eef3a2a561b80d5c76daebd0f9a14c

Here are the templates:

Front template

<div class="prettify-flashcard">
  <div class="prettify-deck">{{Subdeck}}</div>
  <hr class="prettify-divider">

  <div class="prettify-field center-text">
    {{Question}}
  </div>

  <div class="prettify-field option-group center-text">
    {{#Option1}}
      <input type="radio" id="opt1" name="mcq" value="1">
      <label for="opt1">{{Option1}}</label>
    {{/Option1}}
    {{#Option2}}
      <input type="radio" id="opt2" name="mcq" value="2">
      <label for="opt2">{{Option2}}</label>
    {{/Option2}}
    {{#Option3}}
      <input type="radio" id="opt3" name="mcq" value="3">
      <label for="opt3">{{Option3}}</label>
    {{/Option3}}
    {{#Option4}}
      <input type="radio" id="opt4" name="mcq" value="4">
      <label for="opt4">{{Option4}}</label>
    {{/Option4}}
  </div>

  <div class="last-row">
    {{#Tags}}
      <div class="prettify-tags">{{clickable:Tags}}</div>
    {{/Tags}}
    <div class="prettify-report">
      <!-- report link svg. will put later -->
    </div>
  </div>
</div>

<script>

// clean up first, then do our thing
  try {
    sessionStorage.removeItem('anki-mcq-selected');
    sessionStorage.removeItem('anki-mcq-order');
  } catch (_) {}

(function(){
  function shuffleOptions(container) {
    const inputs = Array.from(container.querySelectorAll('input[type=radio]'));
    const opts = inputs.map(inp => {
      const lbl = container.querySelector(`label[for="${inp.id}"]`);
      if (!lbl) {
        console.warn('Label for', inp.id, 'not found');
      }
      // make labels keyboard-focusable
      lbl.tabIndex = 0;
      lbl.addEventListener('keydown', e => {
        if (e.key === ' ' || e.key === 'Enter') {
          inp.checked = true;
          inp.dispatchEvent(new Event('change'));
        }
      });
      return { inp, lbl };
    });

    // Fisher–Yates shuffle
    for (let i = opts.length - 1; i > 0; i--) {
      const j = Math.floor(Math.random() * (i + 1));
      [opts[i], opts[j]] = [opts[j], opts[i]];
    }

    // persist order
    try {
      sessionStorage.setItem('anki-mcq-order', JSON.stringify(opts.map(o=>o.inp.value)));
    } catch (err) {
      console.warn('Cannot write mcq order to storage:', err);
    }

    // re-append
    opts.forEach(({inp, lbl}) => {
      container.appendChild(inp);
      container.appendChild(lbl);
    });

    // store selection
    opts.forEach(({inp}) => {
      inp.addEventListener('change', e => {
        try {
          sessionStorage.setItem('anki-mcq-selected', e.target.value);
        } catch (err) {
          console.warn('Cannot write mcq selection to storage:', err);
        }
      });
    });
  }

  const container = document.querySelector('.option-group');
  if (!container) return console.warn('MCQ container not found');
  shuffleOptions(container);
})();
</script>

<script>
  var tagsContainerEl = document.querySelectorAll('.prettify-tags > *')
  if (tagsContainerEl.length > 0) {
    var tags = []
    tagsContainerEl.forEach((tagEl) => {
      tagEl.classList.add('prettify-tag')
      tags.push(tagEl.innerHTML)
      tags.forEach((tag) => {
        var childTag = tag.split('::').filter(Boolean)
        tagEl.innerHTML = childTag[childTag.length - 1].trim()
      })
    })
  } else {
    tagsContainerEl = document.querySelector('.prettify-tags')
    var tags = tagsContainerEl.innerHTML.split(' ').filter(Boolean)
    var html = ''
    tags.forEach((tag) => {
      var childTag = tag.split('::').filter(Boolean)
      html +=
        "<span class='prettify-tag'>" +
        childTag[childTag.length - 1] +
        '</span>'
    })
    tagsContainerEl.innerHTML = html
  }
</script>

Back template

<div class="prettify-flashcard">
  <div class="prettify-deck">{{Subdeck}}</div>
  <hr class="prettify-divider">

  <div class="prettify-field center-text">
     {{Question}}
  </div>

  <div class="prettify-field option-group center-text">
    {{#Option1}}<label>{{Option1}}</label>{{/Option1}}
    {{#Option2}}<label>{{Option2}}</label>{{/Option2}}
    {{#Option3}}<label>{{Option3}}</label>{{/Option3}}
    {{#Option4}}<label>{{Option4}}</label>{{/Option4}}
  </div>

  {{#Explanation}}
    <hr class="prettify-divider">
    <h3>Explanation</h3>
    <div class="prettify-field center-text">
      {{Explanation}}
    </div>
  {{/Explanation}}

  <div class="last-row">
    {{#Tags}}<div class="prettify-tags">{{clickable:Tags}}</div>{{/Tags}}
    <div class="prettify-report"><!-- report link svg. will put later --></div>
  </div>
</div>

<script>
(function(){
  function renderResults(container, order, picked, correctIdx) {
    const labels = Array.from(container.querySelectorAll('label'));
    // reorder to match front shuffle
    order.forEach(val => {
      const idx = parseInt(val, 10) - 1;
      if (labels[idx]) {
        container.appendChild(labels[idx]);
      }
    });

    labels.forEach((lbl, i) => {
      const idx = String(i + 1);
      const isCorrect = idx === correctIdx;
      const isPicked  = idx === picked;

      if (isCorrect && isPicked) {
        lbl.insertAdjacentHTML('beforeend',
          '<span class="badge correct-response">Correct response!</span>'
        );
        lbl.classList.add('highlight-correct');
      }
      else {
        if (isCorrect) {
          lbl.insertAdjacentHTML('beforeend',
            '<span class="badge correct-answer">Correct answer</span>'
          );
          lbl.classList.add('highlight-correct');
        }
        if (isPicked) {
          lbl.insertAdjacentHTML('beforeend',
            '<span class="badge your-answer">Your answer</span>'
          );
          lbl.classList.add(isPicked !== correctIdx ? 'highlight-wrong' : 'highlight-correct');
        }
      }
    });
  }

  const container  = document.querySelector('.option-group');
  if (!container) return console.warn('MCQ results container not found');

  let order = [];
  let picked = null;
  try {
    order  = JSON.parse(sessionStorage.getItem('anki-mcq-order') || '[]');
    picked = sessionStorage.getItem('anki-mcq-selected');
  } catch (err) {
    console.warn('Failed to read mcq state:', err);
  }

  const correctIdx = String(parseInt('{{Correct}}', 10));
  renderResults(container, order, picked, correctIdx);
})();
</script>

<script>
  var tagsContainerEl = document.querySelectorAll('.prettify-tags > *')
  if (tagsContainerEl.length > 0) {
    var tags = []
    tagsContainerEl.forEach((tagEl) => {
      tagEl.classList.add('prettify-tag')
      tags.push(tagEl.innerHTML)
      tags.forEach((tag) => {
        var childTag = tag.split('::').filter(Boolean)
        tagEl.innerHTML = childTag[childTag.length - 1].trim()
      })
    })
  } else {
    tagsContainerEl = document.querySelector('.prettify-tags')
    var tags = tagsContainerEl.innerHTML.split(' ').filter(Boolean)
    var html = ''
    tags.forEach((tag) => {
      var childTag = tag.split('::').filter(Boolean)
      html +=
        "<span class='prettify-tag'>" +
        childTag[childTag.length - 1] +
        '</span>'
    })
    tagsContainerEl.innerHTML = html
  }
</script>

Styling

/* --------------------------------------------------------- MCQS 
*/

.option-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75em;
  margin-top: 1em;
}

@media (max-width: 600px) {
  .option-group {
grid-template-columns: 1fr; 
  }
} 

.option-group input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.option-group label {
  padding: 0.75em;
  background-color: var(--tag-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  cursor: pointer;
  transition: transform 0.1s ease, border-color 0.2s;
}

.option-group label:active {
  transform: scale(0.97);
}

.option-group input[type="radio"]:checked + label {
  border-color: var(--text-fg);
  background-color: var(--card-bg);
}


/* Make labels positioning contexts */
.option-group label {
  position: relative;
  padding: 0.75em;
  /* ensure the badge can overlap cleanly */
  overflow: visible;
}

/* Adjust the existing badge rules */
.option-group .badge {
  position: absolute;
  top: -1px;    /* sit on the border */
  left: -1px;  /* sit on the border */
  padding: 0.1em 0.4em;
  font-size: 0.75em;
  border-radius: 0.25em 0.25em 0.25em 0; /* square cut where it overlaps */
  color: white;
  z-index: 1;
}

/* Match badge background + border to the label’s correct/your-answer border color */

.badge.correct-answer {
  background: var(--scheme-green);
  border: 1px solid var(--scheme-teal);
  color: var(--scheme-crust);
}

.badge.your-answer {
  background: var(--scheme-red);
  border: 1px solid var(--scheme-rosewater);
  color: var(--scheme-crust);
}

/* single “correct response” badge when picked=correct */

.badge.correct-response {
  background: var(--scheme-green);
  border: 1px solid var(--scheme-teal);
  color: var(--scheme-crust);
}

/* highlight borders via JS-added classes */

.highlight-correct {
  border-color: var(--scheme-green) !important;
  background: var(--card-bg) !important;
}

.highlight-wrong {
  border-color: var(--scheme-red)   !important;
  background: var(--card-bg) !important;
}


/* -------------------------------------------------- PREFERENCES */

:root {
  --card-max-width: 40em;
  --card-text-align: left;
  --font-size-regular: 16px;
  --font-size-small: 14px;
  --img-width: 50%;
  --img-brightness: 0.95;
  --img-filter: none;
  --font-weight: 500;
  --table-radius: 0.8em;
  --card-radius: 8px;
  --mochi-toggle: block;
  --option-correct-border: var(--scheme-green);
}

.mobile {
  --card-max-width: 40em;
  --card-text-align: left;
  --font-size-regular: 16px;
  --font-size-small: 14px;
  --img-width: 50%;
  --img-brightness: 0.95;
  --img-filter: none;
  --font-weight: 500;
  --table-radius: 0.8em;
  --card-radius: 8px;
  --mochi-mobile-toggle: block;
}

/*
--------------------------------------------- THEME VARIABLES
*/

.card {
  --card-bg: #EFF1F5;
  --text-fg: #4C4F69;
  --text-fg-faint: #6C6F85;
  --text-bg-selected: #BCC0CC;
  --card-border: #BCC0CC;
  --card-box-shadow: #0000001f;
  --divider: #BCC0CC;
  --tag-fg: #5C5F77;
  --tag-bg: #9CA0B0;
  --tag-fg-active: #DE9584;
  --tag-bg-active: #ACB0BE;
  --tag-border: transparent;
  --cloze-fg: #E49320;
  --cloze-bg: #EFF1F5;
  --link-fg: #2A6EF5;
  --link-bg: transparent;
  --link-fg-active: #04A5E5;
  --link-bg-active: transparent;
  --bold-fg: #E49320;
  --italic-fg: #40A02B;
  --h1-fg: #40A02B;
  --h2-fg: #179299;
  --h3-fg: #8839EF;
  --h4-fg: #D20F39;
  --h5-fg: #04A5E5;
  --bold-italic-fg: var(--bold-fg);
  --highlight1: #E64553;
  --highlight2: #40A02B;
  --highlight3: #7287FD;
  --highlight4: #FE640B;
  --scheme-rosewater: #DE9584;
  --scheme-flamingo: #DD7878;
  --scheme-pink: #EC83D0;
  --scheme-mauve: #8839EF;
  --scheme-red: #D20F39;
  --scheme-maroon: #E64553;
  --scheme-peach: #FE640B;
  --scheme-yellow: #E49320;
  --scheme-green: #40A02B;
  --scheme-teal: #179299;
  --scheme-sky: #04A5E5;
  --scheme-sapphire: #209FB5;
  --scheme-blue: #2A6EF5;
  --scheme-lavender: #7287FD;
  --scheme-crust: #DCE0E8;
  --scheme-grey: #6C6F85;
  --mark-color: rgba(228, 147, 32, 0.2);
}

.nightMode.card {
  --card-bg: #2e2f31;
  --text-fg: #ffffffe6;
  --text-fg-faint: #ffffffb3;
  --text-bg-selected: #ffffff1f;
  --card-border: #ffffff0a;
  --card-box-shadow: #0000001f;
  --divider: #ffffff1f;
  --tag-fg: #ffffffb3;
  --tag-bg: #ffffff14;
  --tag-fg-active: #ffffff;
  --tag-bg-active: #ffffff1f;
  --tag-border: transparent;
  --cloze-fg: #F9E2AF;
  --cloze-bg: #2e2f31;
  --link-fg: #87B0F9;
  --link-bg: transparent;
  --link-fg-active: #89DCEB;
  --link-bg-active: transparent;
  --bold-fg: #F9E2AF;
  --italic-fg: #A6E3A1;
  --h1-fg: #A6E3A1;
  --h2-fg: #94E2D5;
  --h3-fg: #CBA6F7;
  --h4-fg: #F38BA8;
  --h5-fg: #89DCEB;
  --bold-italic-fg: var(--bold-fg);
  --highlight1: #EBA0AC;
  --highlight2: #A6E3A1;
  --highlight3: #B4BEFE;
  --highlight4: #FAB387;
  --scheme-rosewater: #F5E0DC;
  --scheme-flamingo: #F2CDCD;
  --scheme-pink: #F5C2E7;
  --scheme-mauve: #CBA6F7;
  --scheme-red: #F38BA8;
  --scheme-maroon: #EBA0AC;
  --scheme-peach: #FAB387;
  --scheme-yellow: #F9E2AF;
  --scheme-green: #A6E3A1;
  --scheme-teal: #94E2D5;
  --scheme-sky: #89DCEB;
  --scheme-sapphire: #74C7EC;
  --scheme-blue: #87B0F9;
  --scheme-lavender: #B4BEFE;
  --scheme-crust: #000000;
  --scheme-grey: #BDBDBD;
  --mark-color: rgba(249, 226, 175, 0.2);
}

/*
----------------------------------------------- CARD STYLING 
*/

/* -------------------------------------------------- BACKGROUND */

.card {
  cursor: default;
  padding: 0.5em 0.3em;
}

html:not(.mobile) .card {
  padding: 0.5em;
}

.card::-webkit-scrollbar {
  display: none;
}

/* --------------------------------------------------- FLASHCARD */

.prettify-flashcard {
  background-color: var(--card-bg);
  border-radius: var(--card-radius);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-box-shadow) 0px 7px 14px 0px, var(--card-box-shadow) 0px 3px 6px 0px;
  color: var(--text-fg);
  font-family: var(--font-family);
  font-size: var(--font-size-regular);
  line-height: 1.5;
  margin: 0 auto;
  max-width: var(--card-max-width);
  text-align: var(--card-text-align);
  word-wrap: normal;
}

.prettify-flashcard ::selection {
  background-color: var(--text-bg-selected);
}

.cloze-type {
  text-align: left;
}

/* ------------------------------------------------------ FIELDS
*/
.prettify-field {
  margin: 1em;
  margin-bottom: 1em;
  overflow: auto;
}

.mobile .prettify-field {
  margin: 0.25em;
  margin-bottom: 0.75em;
}

.prettify-field:last-of-type {
  margin-bottom: 1.4em;
}

/* ------------------------------------------------------- CLOZE 
*/

.cloze {
  border-radius: 0.25em;
  font-weight: bold;
  background-color: inherit;
  color: var(--cloze-fg);
  padding: 0 0.1em;
}

/* -------------------------------------------------------- DECK
*/

.prettify-deck {
  margin: 0.75em;
  margin-left: 1em;
  margin-bottom: 0.5em;
  display: flex;
  color: var(--text-fg-faint);
  font-size: var(--font-size-small);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: scroll;
}

.prettify-deck::-webkit-scrollbar {
  display: none;
}

.mobile .prettify-deck {
  margin: 1em;
}

.prettify-subdeck {
  text-overflow: ellipsis;
  overflow: clip;
  min-width: fit-content;
}

/* --------------------------------------------------------- TAGS 
*/

.prettify-tags {
  margin: 0.5em;
  margin-left: 1em;
  margin-bottom: 1em;
  display: flex;
  flex-flow: row wrap;
  font-size: var(--font-size-small);
}

.mobile .prettify-tags {
  margin: 0.3em;
}

.prettify-tag {
  all: initial;
  background-color: var(--tag-bg);
  border-radius: 0.2em;
  color: var(--tag-fg);
  display: inline;
  font-size: var(--font-size-small);
  font-family: var(--font-family);
  margin: 0.25em;
  padding: 0.25em;
  transition: all 0.25s;
  word-break: break-word;
}


.prettify-tag:hover {
  background-color: var(--tag-bg-active);
  color: var(--tag-fg-active);
  cursor: pointer;
}

.extra {
  color: var(--text-fg-faint);
  font-size: var(--font-size-small);
}

/* ----------------------------------------------------- DIVIDER 
*/

.prettify-field hr {
  border: none;
  border-bottom: 1px dashed var(--divider);
  background-color: transparent;
  width: 80%;
}

.prettify-divider {
  background-color: transparent;
  border: none;
  border-bottom: 1px dashed var(--divider);
  padding: 0;
}

/* ----------------------------------------------------- TABLES 
*/

table {
  border-collapse: separate;
  border-spacing: 0;
  min-width: 60%;
  position: relative;
  box-align: center;
  margin-left: auto;
  margin-right: auto;
  overflow: scroll;
  border: 1px solid;
  text-align: center;
  border-color: var(--card-border);
  margin-top: 10px;
}

td,
th {
  border: 1px solid;
  text-align: center;
  border-color: var(--card-border);
}

tr:nth-of-type(odd) {
  background-color: var(--card-box-shadow);
}

/* ------------------------------------------------------- LINKS */

a,
a:visited {
  text-decoration: none;
  color: var(--link-fg);
}

a:hover,
a:active {
  text-decoration: underline;
  color: var(--link-fg-active);
}

/* -------------------------------------------------- FORMATTING */

/* ----------------------------------------------------- HEADERS
*/

h1 {
  color: var(--h1-fg);
  margin: 0em;
  text-align: center;
}

h2 {
  color: var(--h2-fg);
  margin: 0em;
  text-align: center;
}

h3 {
  color: var(--h3-fg);
  margin: 0em;
  text-align: center;
}

h4 {
  color: var(--h4-fg);
  margin: 0em;
  text-align: center;
}

h5 {
  color: var(--h5-fg);
  margin: 0em;
  text-align: center;
}

h6 {
  color: var(--h6-fg);
  margin: 0em;
  text-align: center;
}

/*
-------------------------------------------------- HIGHLIGHT */

hl {
  color: var(--highlight1);
}

hl2 {
  color: var(--highlight2);
}

hl3 {
  color: var(--highlight3);
}

hl4 {
  color: var(--highlight4);
}

/*
------------------------------------------- OTHER FORMATTING */

pre {
  font-size: var(--font-size-small);
  background-color: var(--cloze-bg);
  padding: 10px;
  border-radius: calc(var(--card-radius) * 0.5);
  max-width: fit-content;
  min-width: 80%;
  margin: 0 auto;
}

.title-field {
  color: var(--text-fg);
  font-size: 140%;
  font-weight: bold;
}

:is(h1, h2, h3, h4, h5, h6) + :is(ul, ol) {
  margin-block-start: 5px;
}

ol li::marker {
  color: var(--scheme-rosewater);
  font-weight: bold;
}

mark {
  background-color: var(--mark-color);
  border-radius: 3px;
  color: var(--text-fg);
}

#hidden {
  display: none;
}

/* ------------------------------------------------------- INPUT */

input {
  background-color: var(--card-bg);
  border-width: 2px;
  border-style: solid;
  border-color: var(--card-border);
  border-radius: 7px;
  min-height: 25px;
  font-family: var(--font-family) !important;
  font-size: var(--font-size-regular) !important;
  color: var(--text-fg-faint);
  padding: 10px;
}

input::selection {
  background-color: rgb(var(--ctp-blue)) !important;
  color: var(--card-bg) !important;
}

/*
----------------------------------------------- REPLAY BUTTON
*/

.replay-button svg circle {
  fill: var(--card-bg);
  stroke: var(--tag-bg);
  stroke-width: 4px;
}

.replay-button svg path {
  fill: var(--tag-bg);
  stroke: var(--tag-bg);
}

.morsecode {
  padding: 15px 20px;
  margin-left: 5px;
  margin-right: 5px;
  border-radius: 10px;
  background-color: rgba(220, 224, 232, 0.4);
  border: solid 2px var(--card-border);
}

.replay-button svg {
  padding: 20px;
  width: 0px;
  height: 0px;
  background-color: var(--text-fg);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolygon points='10 8 16 12 10 16 10 8'%3E%3C/polygon%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
}

/*
--------------------------------------------- CENTER TEXT DIV
*/

.center-text {
  text-align: center;
}
.center-text ul,
.center-text ol {
  padding-inline-start: 0;
}
.center-text ul li,
.center-text ol li {
  width: fit-content;
  margin: 0 auto;
}

.shift-right {
  padding-left: 20px;
}
.shift-right :is(ul, ol) {
  padding-inline-start: 15px;
}
.shift-right :is(ul, ol):first-child {
  margin-block-start: 5px;
}
.shift-right .center-text {
  padding-left: 0;
}
.shift-right .center-text > :is(ul, ol) {
  padding-inline-start: 5px;
}
.shift-right .center-text > :is(ul, ol):first-child {
  margin-block-start: 5px;
}

.center-text .shift-right {
  padding-left: 0;
}
.center-text .shift-right > :is(ul, ol) {
  padding-inline-start: 5px;
}
.center-text .shift-right > :is(ul, ol):first-child {
  margin-block-start: 5px;
}

/*
----------------------------------------------- FEEDBACK FORM
*/

.prettify-report {
   display: flex;
   justify-content: end;
   margin-top: auto;
   margin-left: auto;
   margin-right: 0.3em;
}

/*
------------------------------------------------- LAST ROW DIV
*/

.last-row {
 display: flex;
 flex-direction: row;
 justify-content: space-between;
}

/*
------------------------------------------------------- MOCHI */

.prettify-flip {
  color: var(--text-fg-faint);
  font-size: var(--font-size-small);
  padding: 1em 0;
  background: rgba(255, 255, 255, 0.0196078431);
  border-top: 1px dashed var(--divider);
  display: var(--mochi-mobile-toggle, var(--mochi-toggle, none));
}

.prettify-hint {
  color: var(--text-fg-faint);
  opacity: 0.5;
  font-size: var(--font-size-small);
  font-family: var(--font-family);
  padding-top: 1em;
  display: var(--mochi-mobile-toggle, var(--mochi-toggle, none));
}

.prettify-flip svg {
  height: 20px;
  width: 20px;
  margin-bottom: calc(-13px + 0.5 * var(--font-size-small));
}

.prettify-hint svg {
  height: 20px;
  width: 20px;
  margin-bottom: calc(-13px + 0.5 * var(--font-size-small));
}

html:not(.mobile) .prettify-hint.touch {
  display: none;
}

html.mobile .prettify-hint.key {
  display: none;
}

/*
--------------------------------------- FORMAT ERROR MESSAGES */

div:has(> [href^="https://docs.ankiweb.net"], [href^="https://anki.tenderapp.com"], [href^="https://faqs.ankiweb.net"]) {
  text-align: center;
}

/*
---------------------------------------------------- BUTTONS */

button,
.isMac button {
  color: var(--tag-fg);
  border-radius: 0.2em;
  box-shadow: none;
  border: 1px solid var(--card-border);
  border-bottom-color: var(--card-border);
  font-size: var(--font-size-small);
  font-family: inherit;
  transition: all 0.25s;
  background: none;
  background-color: var(--tag-bg);
}

button:active, button:hover,
.isMac button:active,
.isMac button:hover {
  background: none;
  background-color: var(--tag-bg-active);
  color: var(--tag-fg-active);
  cursor: pointer;
}

/*
-------------------------------------- ADJUSTMENTS FOR MOBILE 
*/

.mobile .card,
.mobile #content {
  font-size: 120%;
  margin: 0;
}

/*
----------------------------------------------------- IMAGES */

img.zoomable-image,
.zoomable-image img {
  border-radius: 0.25em;
  display: block;
  margin: 1em auto;
  max-width: var(--img-width) !important;
  transition: max-width 0.25s 0.1s, opacity 0.25s 0.1s, filter 0.1s, transform 0s;
}

.nightMode img.zoomable-image,
.nightMode .zoomable-image img {
  filter: var(--img-filter);
  opacity: var(--img-brightness);
}

img.zoomable-image:hover,
.zoomable-image img:hover {
  cursor: zoom-in;
  filter: none;
  max-width: 100% !important;
  opacity: 1;
}

img.zoomable-image + br,
.zoomable-image img + br {
  display: none;
}

html:not(.mobile) img.zoomable-image:active,
html:not(.mobile) .zoomable-image img:active {
  border: 1px solid var(--link-fg-active);
  cursor: zoom-out;
  filter: none;
  left: 0;
  max-width: 95% !important;
  opacity: 1;
  position: fixed;
  top: 0;
  transform: translate(calc(50vw - 50%), calc(50vh - 50%));
  z-index: 100;
}

/* -------------------------------------------------- LOAD FONTS */

@font-face { 
  font-family: 'Lexend'; 
  src: url('_LexendDeca.ttf');
  font-weight: 350;
}

/*
----------------------------------------------- SELECT FONTS */

:root {
  --font-family: "Lexend";
}

.mobile {
  --font-family: "Lexend";
}

Pinging @SuhasK because they wanted to help too.

I noticed a few things after testing:

#1

In your front and back template, check if tagsContainerEl is null. It maybe shouldn’t be, but considering you want to share this template with others you should consider the possibility that the user has no tags set. Error handling is better than trying to attempt things that aren’t valid:

<script>
  var tagsContainerEl = document.querySelectorAll('.prettify-tags > *')
  if (tagsContainerEl.length > 0) {
    var tags = []
    tagsContainerEl.forEach((tagEl) => {
      tagEl.classList.add('prettify-tag')
      tags.push(tagEl.innerHTML)
      tags.forEach((tag) => {
        var childTag = tag.split('::').filter(Boolean)
        tagEl.innerHTML = childTag[childTag.length - 1].trim()
      })
    })
  } else {
    tagsContainerEl = document.querySelector('.prettify-tags');
    if (tagsContainerEl !== null) {
        var tags = tagsContainerEl.innerHTML.split(' ').filter(Boolean);
        var html = '';
        tags.forEach((tag) => {
          var childTag = tag.split('::').filter(Boolean);
          html +=
            "<span class='prettify-tag'>" +
            childTag[childTag.length - 1] +
            '</span>'
        })
      tagsContainerEl.innerHTML = html
    } else {
        // no tags found
        console.warn("No tags found");
    }
  }
</script>

#2

If the user only enters something into e.g. Option1, Option2 and Option4 (but leaves Option3 empty), then the code breaks and the user won’t reliably see which option was correct (Correct is set to 4).

Not sure how to easily fix it without rewriting some bigger parts of your code though. A hack that would still be useless for users is to include something like

const opts = inputs.map(inp => { … });

 // check if all four options are populated
    if (opts.length < 4) {
        console.warn("Less than four options detected. This card won't function correctly as a result of that.");
    }

This is useless for the users because it doesn’t fix the issue (it might also be incorrect, if the user deliberately did that. The magic number 4 what have to be retrieved somewhere to fix this issue). It’s probably best to either

  1. force the user to populate all 4 options, or
  2. modify your code so that it works with 2 options minimum, up to 4 options. Not populating the options in their intended order like I did above should be handled as well, then.

I think number 2 would probably be best.

Edit:
You could think about changing your renderResults() function. The issue is that you cannot simply do this:

 // if correct value is higher then labels count, substract by the difference.
    if (correctIdx > labels.length) {
        correctIdx = correctIdx - (4 - labels.length);
    }

The issue is that if the correct answer is Option4, but Option3 is missing, then the above code would evaluate to “Option3 contains the correct answer”. It doesn’t though, Option3 is empty.

You could probably fix this by explicitly checking which label[for="${inp.id}"] you currently have and then removing (in this case) inp.id 3 and shifting the other inp.id accordingly.

#3

If the user doesn’t populate Correct, then there is no indication for the user except for “it seems broken”.

Maybe add a on screen error message? This would be great for all of the possible problems, like those that are displayed with console.warn as an example.

In its basic form you’d have something like this (e.g. on your front template):

<div class="prettify-flashcard">
  <div id="error_messages"></div>
  ...
</div>
...
<script>
  var tagsContainerEl = document.querySelectorAll('.prettify-tags > *')
  if (tagsContainerEl.length > 0) {
    ...
  } else {
    tagsContainerEl = document.querySelector('.prettify-tags');
    if (tagsContainerEl !== null) {
        ...
    } else {
        // no tags found
        document.getElementById("error_messages").innerHTML = "No tags found";
    }
  }
</script>

#4

Clicking on a tag does nothing, but the tag appears to be clickable.


Aside from that you could run the code through a linter if you didn't already. It should be able to catch bugs and bad coding style as well, and will properly format your js.

I never used a linter for js / html though, so not sure what you can use. The anki code base has a linter, but it lints svelte and typescript – which are similar to js, but still not js.

1 Like

In general, yes, the second option is better, but considering that Sorata’s use case is questions where there are exactly 4 options and only one is correct, the first one is what they’re looking for.