Which code - the front, back or styling?
Whichever this side is, plus the styling.
Code for back of card:
<div class="back">
{{FrontSide}}
<hr id=answer>
{{Back}}
</div>
<!-- BEGIN WRAPPER CODE shuffle
Please do not edit this section directly, this code is generated automatically. Modify config.json instead -->
<script>
function shuffle(array) {
let currentIndex = array.length;
while (currentIndex != 0) {
let randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex--;
[array[currentIndex], array[randomIndex]] = [
array[randomIndex],
array[currentIndex],
];
}
}
function shuffleElements(elements) {
const shuffledElements = Array.from(
elements.map((el) => el.cloneNode(true))
);
shuffle(shuffledElements);
for (let i = 0; i < elements.length; i++) {
elements[i].replaceWith(shuffledElements[i]);
}
}
function shuffleList(listElement) {
const items = Array.from(listElement.querySelectorAll("li"));
shuffleElements(items);
}
(() => {
const selectors = [".shuffle"];
for (const selector of selectors) {
for (const container of document.querySelectorAll(selector)) {
if (["UL", "OL"].includes(container.tagName)) {
shuffleList(container);
}
for (const parentElement of container.querySelectorAll(
"ol, ul"
)) {
shuffleList(parentElement);
}
const images = Array.from(container.querySelectorAll("img"));
shuffleElements(images);
}
}
})();
</script>
<!-- END WRAPPER CODE -->
<!-- Show the Extra field in a <details> disclosure widget if Extra is not empty-->
{{#Extra}}
<br><br>
<details>
<summary></summary>
{{Extra}}
</details>
{{/Extra}}
{{#Exam Question}}
<br><br>
<details>
<summary></summary>
{{Exam Question}}
</details>
{{/Exam Question}}
Code for the styling:
.card {
font-family: arial;
font-size: 20px;
text-align: left;
color: black;
background-color: white;
.front { text-align: center; }
.back { text-align: left; }
}
This doesn’t look like the code for the card from your screenshot. Everything is aligned left here instead of to the center, and there are no margins on any elements.
It also has the part of styling you previously said you changed:
So I assume you copied it from a different, older version.
Which card in the screenshot? There’s two there - one clozeoverlapping card and one basic card. The code I provided was for the basic card.
Yes, I previously thought I changed it but I forgot to. I’ve changed it now, thanks for reminding me. The rest of the card is the exact same though.
What’s its current code for the front and for the Question field contents then? The defaults combined with the provided code does not look like the basic card from your screenshot:
For the front of the basic card:
{{Front}}
</div>
<!-- BEGIN WRAPPER CODE shuffle
Please do not edit this section directly, this code is generated automatically. Modify config.json instead -->
<script>
function shuffle(array) {
let currentIndex = array.length;
while (currentIndex != 0) {
let randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex--;
[array[currentIndex], array[randomIndex]] = [
array[randomIndex],
array[currentIndex],
];
}
}
function shuffleElements(elements) {
const shuffledElements = Array.from(
elements.map((el) => el.cloneNode(true))
);
shuffle(shuffledElements);
for (let i = 0; i < elements.length; i++) {
elements[i].replaceWith(shuffledElements[i]);
}
}
function shuffleList(listElement) {
const items = Array.from(listElement.querySelectorAll("li"));
shuffleElements(items);
}
(() => {
const selectors = [".shuffle"];
for (const selector of selectors) {
for (const container of document.querySelectorAll(selector)) {
if (["UL", "OL"].includes(container.tagName)) {
shuffleList(container);
}
for (const parentElement of container.querySelectorAll(
"ol, ul"
)) {
shuffleList(parentElement);
}
const images = Array.from(container.querySelectorAll("img"));
shuffleElements(images);
}
}
})();
</script>
<!-- END WRAPPER CODE -->
1 Like
I can’t seem to figure out what’s going on. The ‘Question’ might look different because I might’ve manually centred the text in the card.
You can check the source code for the field contents by pressing <> in the card editor:
Either way, if you want to set a limit on the displayed width of a certain field, the simplest way is to wrap it in a <div> tag in the template, and set the required max-width value (with margin-left and margin-right both being auto to keep it centered), similarly to the lists you edited before.
thanks, i’ll try and implement this. i ran into something else - the images in the ‘question’ field of my ‘ClozeOverlapping’ card are smaller than how they appear in the ‘question’ field of the basic card, despite being the exact same size. here’s what i mean:
i think this is something to do with the displayed width value
That’s due to this section of the code:
/*~~~~~~~MAX IMAGE HEIGHT/WIDTH~~~~~~~*/
img {
max-width: 85%;
max-height: 100%;
}
1 Like
Thanks. I’m still struggling to make the left margins the same in the answer section of the basic card and the clozeoverlapping card.
You are still free to share the field code as I described earlier, or the whole card in question via File → Export. I can’t provide you with any more detailed instructions than I already did without additional information.
1 Like