https://github.com/muctebanesiri/anki-multiple-choise-question-template
This repository contains simple JavaScript, HTML and CSS code for front and back cards, designed specifically for styling multiple choice questions in Anki. All credits go to Ashraf Nabil for the original code; I've adapted it to support RTL (right-to-left) languages like Persian, Arabic and Hebrew.
https://github.com/muctebanesiri/anki-multiple-choise-question-template
anki anki-cards anki-flashcards mcq-test quiz
Last synced: about 2 months ago
JSON representation
This repository contains simple JavaScript, HTML and CSS code for front and back cards, designed specifically for styling multiple choice questions in Anki. All credits go to Ashraf Nabil for the original code; I've adapted it to support RTL (right-to-left) languages like Persian, Arabic and Hebrew.
- Host: GitHub
- URL: https://github.com/muctebanesiri/anki-multiple-choise-question-template
- Owner: muctebanesiri
- Created: 2024-03-06T16:46:13.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-09-17T20:22:49.000Z (8 months ago)
- Last Synced: 2025-03-26T06:23:49.613Z (2 months ago)
- Topics: anki, anki-cards, anki-flashcards, mcq-test, quiz
- Homepage: https://youtube.com/@muctebanesiri
- Size: 2.9 MB
- Stars: 21
- Watchers: 2
- Forks: 2
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
### Multiple Choice Question Template for Anki
This repository contains simple JavaScript, HTML and CSS code for front and back cards, designed specifically for styling multiple choice questions in Anki.
### Watch video tutorial on YouTube
[](https://www.youtube.com/watch?v=xgRmOmN_gjE)
### Instructions for Creating Cards
If you wish to use these templates to create cards in the future, follow these steps:
1. **Manage Note Types**
- Go to `Manage Note Types`.
- Click `Add`.
- Select `Add: Basic`.
- Change the name to "MCQ".
2. **Define Fields**
- Select the newly created "MCQ" note type and navigate to "Fields".
- Add the required fields for your multiple choice question.
- Save the changes.
3. **Set Up Cards**
- With the "MCQ" note type selected, go to "Cards".
- Paste the provided code for the Front Template and Back Template accordingly.
### Codes
1. Front Template
```javascript
{{edit:Question}}
{{edit:option_1}}
{{edit:option_2}}
{{option_3}}
{{option_4}}
/*<![CDATA[*/
if (void 0 === window.Persistence) {
var e = "github.com/SimonLammer/anki-persistence/",
t = "_default";
if (window.Persistence_sessionStorage = function () {
var a = !1;
try {
"object" == typeof window.sessionStorage && (a = !0, this.clear = function () {
for (var d = 0; d < sessionStorage.length; d++) {
var c = sessionStorage.key(d);
0 == c.indexOf(e) && (sessionStorage.removeItem(c), d--)
}
}, this.setItem = function (c, d) {
void 0 == d && (d = c, c = t), sessionStorage.setItem(e + c, JSON.stringify(d))
}, this.getItem = function (c) {
return void 0 == c && (c = t), JSON.parse(sessionStorage.getItem(e + c))
}, this.removeItem = function (c) {
void 0 == c && (c = t), sessionStorage.removeItem(e + c)
}, this.getAllKeys = function () {
for (var d = [], c = Object.keys(sessionStorage), g = 0; g < c.length; g++) {
var f = c[g];
0 == f.indexOf(e) && d.push(f.substring(e.length, f.length))
}
return d.sort()
})
} catch (b) {}
this.isAvailable = function () {
return a
}
}, window.Persistence_windowKey = function (a) {
var c = window[a],
b = !1;
"object" == typeof c && (b = !0, this.clear = function () {
c[e] = {}
}, this.setItem = function (d, f) {
void 0 == f && (f = d, d = t), c[e][d] = f
}, this.getItem = function (d) {
return void 0 == d && (d = t), void 0 == c[e][d] ? null : c[e][d]
}, this.removeItem = function (d) {
void 0 == d && (d = t), delete c[e][d]
}, this.getAllKeys = function () {
return Object.keys(c[e])
}, void 0 == c[e] && this.clear()), this.isAvailable = function () {
return b
}
}, window.Persistence = new Persistence_sessionStorage, !Persistence.isAvailable()) {
var i = window.location.toString().indexOf("title"),
n = window.location.toString().indexOf("main", i);
i > 0 && n > 0 && n - i < 10 && (window.Persistence = new Persistence_windowKey("qt"))
}
}
var X = "{{Ans}}";
if (X == X.toLowerCase()) {
var X = X.toUpperCase()
}
var Y = Number(X);
var k = "value";
var accepted = "undifiend";
var choosed = "undifiend";
var radio = document.getElementsByTagName("input");
var option = document.getElementsByClassName("option");
Persistence.setItem(choosed);
var container = document.getElementsByClassName("container");
for (i = 0; i < container.length; i++) {
if (container[i].innerText.length === 0) {
container[i].innerHTML = ""
}
}
if (isNaN(Y)) {
for (i = 1; i < X.length + 1; i++) {
console.log("first method");
eval("var " + k + i + " = '" + X.slice(i - 1, i) + "';")
}
} else {
for (i = 1; i < X.length + 1; i++) {
console.log("second method");
eval("var " + k + i + " = '" + X.slice(i - 1, i) + "';");
var converted = String.fromCharCode(Number(eval(k + i)) + 64)
}
}
function storeAnswer() {
var a = this.id;
Persistence.setItem(a);
console.log(a)
}
function flipToBack() {
if (typeof pycmd !== "undefined") {
pycmd("ans")
} else {
if (typeof study !== "undefined") {
study.drawAnswer()
} else {
if (typeof AnkiDroidJS !== "undefined") {
showAnswer()
} else {
if (window.anki && window.sendMessage2) {
window.sendMessage2("ankitap", "midCenter")
}
}
}
}
}
for (i = 0; i < container.length; i++) {
container[i].addEventListener("click", storeAnswer);
container[i].addEventListener("click", flipToBack);
};
/*]]>*/
```
2. Back Template
```javascript
{{edit:Question}}
{{edit:option_1}}
{{NotesOp1}}
{{edit:option_2}}
{{NotesOp2}}
{{option_3}}
{{NotesOp3}}
{{option_4}}
{{NotesOp4}}
/*<![CDATA[*/
if (void 0 === window.Persistence) {
var e = "github.com/SimonLammer/anki-persistence/",
t = "_default";
if (window.Persistence_sessionStorage = function () {
var a = !1;
try {
"object" == typeof window.sessionStorage && (a = !0, this.clear = function () {
for (var d = 0; d < sessionStorage.length; d++) {
var c = sessionStorage.key(d);
0 == c.indexOf(e) && (sessionStorage.removeItem(c), d--);
}
}, this.setItem = function (c, d) {
void 0 == d && (d = c, c = t), sessionStorage.setItem(e + c, JSON.stringify(d));
}, this.getItem = function (c) {
return void 0 == c && (c = t), JSON.parse(sessionStorage.getItem(e + c));
}, this.removeItem = function (c) {
void 0 == c && (c = t), sessionStorage.removeItem(e + c);
}, this.getAllKeys = function () {
for (var d = [], c = Object.keys(sessionStorage), g = 0; g < c.length; g++) {
var f = c[g];
0 == f.indexOf(e) && d.push(f.substring(e.length, f.length));
}
return d.sort();
});
} catch (b) {}
this.isAvailable = function () {
return a;
};
}, window.Persistence_windowKey = function (a) {
var c = window[a],
b = !1;
"object" == typeof c && (b = !0, this.clear = function () {
c[e] = {};
}, this.setItem = function (d, f) {
void 0 == f && (f = d, d = t), c[e][d] = f;
}, this.getItem = function (d) {
return void 0 == d && (d = t), void 0 == c[e][d] ? null : c[e][d];
}, this.removeItem = function (d) {
void 0 == d && (d = t), delete c[e][d];
}, this.getAllKeys = function () {
return Object.keys(c[e]);
}, void 0 == c[e] && this.clear()), this.isAvailable = function () {
return b;
};
}, window.Persistence = new Persistence_sessionStorage, Persistence.isAvailable() || (window.Persistence = new Persistence_windowKey("py")), !Persistence.isAvailable()) {
var i = window.location.toString().indexOf("title"),
n = window.location.toString().indexOf("main", i);
i > 0 && n > 0 && n - i < 10 && (window.Persistence = new Persistence_windowKey("qt"));
}
}
var number = Persistence.getItem();
console.log(number);
var X = "{{Ans}}";
if (X == X.toLowerCase()) {
var X = X.toUpperCase();
}
var Y = Number(X);
var k = "value";
var accepted = "undifend";
var circle = document.getElementsByClassName("circle");
var option = document.getElementsByClassName("option");
var container = document.getElementsByClassName("container");
for (i = 0; i < container.length; i++) {
if (container[i].innerText.length === 0) {
container[i].innerHTML = "";
}
}
if (number.length < 4) {
document.getElementById(number).childNodes[0].setAttribute("class", "circleF circle");
}
if (isNaN(Y)) {
for (i = 1; i < X.length + 1; i++) {
console.log("first method");
eval("var " + k + i + " = '" + X.slice(i - 1, i) + "';");
document.getElementById(eval(k + i)).childNodes[1].classList.add("true");
document.getElementById(eval(k + i)).childNodes[0].setAttribute("class", "circleT circle");
}
} else {
for (i = 1; i < X.length + 1; i++) {
console.log("second method");
eval("var " + k + i + " = '" + X.slice(i - 1, i) + "';");
var converted = String.fromCharCode(Number(eval(k + i)) + 64);
document.getElementById(converted).childNodes[1].classList.add("true");
document.getElementById(converted).childNodes[0].setAttribute("class", "circleT circle");
}
}
Persistence.setItem("undefined");
/*]]>*/
```
3. styling
```CSS
.container:hover {
cursor:pointer
}
.card {
font-family:arial;
font-size:20px;
text-align:left;
color:#000;
background-color:#fff
}
.container {
display:flex;
padding:5px
}
.option {
display:block;
border-radius:8px;
padding:2px 5px
}
.circle {
position:relative;
width:20px;
height:20px;
border-radius:50%;
left:-5px;
display:inline-block;
flex-shrink:0;
top:5px
}
.circleF {
background:#ff595a
}
.circleT {
background:#059862
}
.circleF::before {
content:"✖";
position:relative;
font-size:14px;
left:4.5px;
bottom:3px
}
.circleT::before {
content:"✔";
position:relative;
font-size:14px;
left:4.5px;
bottom:3px
}
.true {
font-size:25px;
font-weight:700;
background:#c7f1dc
}
input[type="radio"] {
width:20px;
height:20px;
border:.15em solid currentColor;
position:relative;
top:2px;
display:inline-block;
flex-shrink:0
}
```
### Code Credits
The original code was provided/modified by u/12yardsfootball. I've made some modifications to ensure proper right-to-left (RTL) support for Persian, along with some other minor adjustments.
### Usage
Feel free to use, modify, and customize these templates for your own Anki flashcard decks. If you have any questions or suggestions for improvements, don't hesitate to reach out.