Is there any way to toggle these additional fields by a keyboard shortcut?
Change the design. Whoever created this deck could probably do that. So far, there’s no word on what kind of deck it is or where the source code can be found.
1 Like
Yes, but first I’d need to know if it’s an add-on or some kind of note.
3 Likes
I generated the cards through AI
Its a note type, I used medankigen (AI)
if there is some way to do it, id really appreciate it
You can create a note type with 5 fields, see the image.
Fields created:Texto, Images, Explanation, Key Terms and Clinical Pearls
Inside the front of the model, leave it like this…
<div class="card-content">
{{Texto}}
</div>
<!-- Container dos Botões (Agora na Frente) -->
<div class="button-container">
{{#Images}}
<button onclick="toggleSection('sect-images')" title="Atalho: Alt + 1">Images</button>
{{/Images}}
{{#Explanation}}
<button onclick="toggleSection('sect-explanation')" title="Atalho: Alt + 2">Explanation</button>
{{/Explanation}}
{{#Key Terms}}
<button onclick="toggleSection('sect-keyterms')" title="Atalho: Alt + 3">Key Terms</button>
{{/Key Terms}}
{{#Clinical Pearls}}
<button onclick="toggleSection('sect-pearls')" title="Atalho: Alt + 4">Clinical Pearls</button>
{{/Clinical Pearls}}
</div>
<!-- Conteúdo Oculto (Carregado na frente, mas invisível) -->
<div id="sect-images" class="hidden-content">{{Images}}</div>
<div id="sect-explanation" class="hidden-content">{{Explanation}}</div>
<div id="sect-keyterms" class="hidden-content">{{Key Terms}}</div>
<div id="sect-pearls" class="hidden-content">{{Clinical Pearls}}</div>
<script>
// Função para mostrar/esconder
function toggleSection(id) {
var x = document.getElementById(id);
if (x) {
if (x.style.display === "block") {
x.style.display = "none";
} else {
// Se quiser que feche um ao abrir outro, descomente a linha abaixo:
// document.querySelectorAll('.hidden-content').forEach(el => el.style.display = 'none');
x.style.display = "block";
}
}
}
// Atalhos de Teclado
document.addEventListener('keydown', function(event) {
if (event.altKey) {
if (event.key === '1') toggleSection('sect-images');
if (event.key === '2') toggleSection('sect-explanation');
if (event.key === '3') toggleSection('sect-keyterms');
if (event.key === '4') toggleSection('sect-pearls');
}
});
</script>
On the back of the card like this…
{{FrontSide}}
In the CSS…
.card {
font-family: arial;
font-size: 20px;
text-align: center;
color: #e0e0e0;
background-color: #1e1e1e;
}
.card-content {
margin-bottom: 20px;
font-weight: bold;
}
/* Botões */
.button-container {
display: flex;
justify-content: center;
gap: 10px;
margin-top: 10px;
flex-wrap: wrap;
}
button {
background-color: #2c2c2c;
border: 1px solid #555;
color: #ccc;
padding: 6px 12px;
border-radius: 5px;
cursor: pointer;
font-size: 14px;
font-weight: 600;
}
button:hover {
background-color: #444;
color: white;
border-color: #888;
}
button:active {
transform: translateY(1px);
}
/* Conteúdo Oculto */
.hidden-content {
display: none;
margin-top: 15px;
padding: 15px;
background-color: #252525;
border-radius: 8px;
border-left: 4px solid #3498db;
text-align: left;
font-size: 18px;
line-height: 1.4;
}
/* Cores das bordas */
#sect-images { border-color: #e74c3c; }
#sect-explanation { border-color: #3498db; }
#sect-keyterms { border-color: #f1c40f; }
#sect-pearls { border-color: #2ecc71; }
It will look like this…
use the click or the shortcuts alt+1 for Images, alt+2 for Explanation, alt+3 for Key Terms and alt+4 for Clinical Pearls.
1 Like
You can also use the built in hint filter and press h to show them one by one.
{{Front}}
<hr>
{{Back}}
{{hint:Images}}
{{hint:Explanation}}
{{hint:Key Terms}}
{{hint:Clinical Pearls}}
Hints can be stylized with the .hint css class.
Okay i did update it, and since im on macbook,
if i want to use the command or option button how do i replace that
and there is one problem
since i create decks using medankigen it generates it into .apkg file and whenever i import it its note type is autogenerated and it looks something like this, apparently there is only one field
here is the front, back and the css of the note type already generated, i guess if i could modify or add shortcuts in these?
FRONT
<div class="clozefield" id="text">{{cloze:Text}}</div>
BACK
{{cloze:Text}}
{{#Extra}}<hr id="extra-separator"><div id="extra">{{Extra}}</div>{{/Extra}}
{{#Additional notes}}<div id="additional">{{Additional notes}}</div>{{/Additional notes}}
<script>
function initClozeExtraFields() {
console.log("=== initClozeExtraFields START ===");
var extraDiv = document.getElementById('extra');
console.log("extraDiv found:", extraDiv);
if (!extraDiv) return;
var content = extraDiv.innerHTML;
console.log("Original content:", content);
console.log("Content length:", content.length);
if (!content || content.trim() === '') return;
var headerPattern = /\[([^\]]+)\]:/g;
var matches = [];
var match;
while ((match = headerPattern.exec(content)) !== null) {
matches.push({
name: match[1],
index: match.index,
fullMatch: match[0]
});
}
console.log("Found", matches.length, "headers:", matches.map(function(m) { return m.name; }));
if (matches.length === 0) return;
var sections = [];
for (var i = 0; i < matches.length; i++) {
var currentMatch = matches[i];
var nextMatch = matches[i + 1];
var startIndex = currentMatch.index + currentMatch.fullMatch.length;
var endIndex = nextMatch ? nextMatch.index : content.length;
var sectionContent = content.substring(startIndex, endIndex).trim();
sections.push({
name: currentMatch.name,
safeName: currentMatch.name.replace(/[^a-zA-Z0-9]/g, '_'),
content: sectionContent
});
console.log("Section:", currentMatch.name, "Content length:", sectionContent.length);
}
console.log("Total sections:", sections.length);
var isDarkMode = document.body.classList.contains('nightMode') || document.body.classList.contains('night_mode');
var buttonStyle = isDarkMode
? 'margin: 5px; padding: 8px 16px; cursor: pointer; background-color: #1a1a1a; color: #e0e0e0; border: 1px solid #444; border-radius: 6px; font-size: 14px; font-weight: 500;'
: 'margin: 5px; padding: 8px 16px; cursor: pointer; background-color: #f0f0f0; color: #333; border: 1px solid #ccc; border-radius: 6px; font-size: 14px; font-weight: 500;';
var newContent = "";
var buttonsHtml = "";
for (var i = 0; i < sections.length; i++) {
var section = sections[i];
console.log("Generating button for:", section.name);
buttonsHtml += '<button onclick="toggleExtraSection(\'extra-' + section.safeName + '\')" style="' + buttonStyle + '">' + section.name + '</button>';
newContent += '<div id="extra-' + section.safeName + '" style="display:none; margin-top: 10px; padding-top: 10px;"><strong>' + section.name + '</strong><br>' + section.content + '</div>';
}
console.log("Buttons HTML:", buttonsHtml);
console.log("New content length:", newContent.length);
if (buttonsHtml) {
extraDiv.innerHTML = '<div class="extra-fields-controls" style="margin-bottom: 10px;">' + buttonsHtml + '</div>' + newContent;
console.log("Updated extraDiv innerHTML");
} else {
console.log("No buttons generated - no sections found");
}
console.log("=== initClozeExtraFields END ===");
}
function toggleExtraSection(sectionId) {
var allSections = document.querySelectorAll('[id^="extra-"]');
var targetSection = document.getElementById(sectionId);
for (var i = 0; i < allSections.length; i++) {
// Skip the separator line
if (allSections[i].id === 'extra-separator') continue;
if (allSections[i].id !== sectionId) {
allSections[i].style.display = 'none';
}
}
if (targetSection) {
targetSection.style.display = targetSection.style.display === 'none' ? 'block' : 'none';
}
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initClozeExtraFields);
} else {
initClozeExtraFields();
}
setTimeout(function() {
initClozeExtraFields();
}, 100);
</script>
CSS:
/* Custom AnKing Cloze CSS with Light/Dark Mode Support */
/* Light Mode Defaults */
.card {
font-family: Arial Greek, Arial;
font-size: 28px;
text-align: center;
background-color: #D1CFCE;
color: black;
}
.cloze, .cloze b, .cloze u, .cloze i { font-weight: bold; color: blue; }
.cloze.one-by-one, .cloze.one-by-one b, .cloze.one-by-one u, .cloze.one-by-one i { color: #009400; }
#extra, #extra i { color: navy; font-style: italic; }
.hints { color: #4297F9; font-style: italic; }
img { max-width: 85%; max-height: 100%; }
kbd { font-size: 10px !important; font-weight: bold; border-radius: 4px; opacity: 0.5; }
kbd:hover { opacity: 1; }
/* Consistent separator colors for all hr elements */
hr {
border: 0;
border-top: 1px solid rgba(102, 102, 102, 0.7);
opacity: 1 !important;
}
/* Night Mode Overrides */
.nightMode.card,
.night_mode .card {
background-color: #272828 !important;
color: #FFFAFA !important;
}
.nightMode .cloze, .nightMode .cloze b, .nightMode .cloze u, .nightMode .cloze i,
.night_mode .cloze, .night_mode .cloze b, .night_mode .cloze u, .night_mode .cloze i {
color: #4297F9 !important;
}
.nightMode .cloze.one-by-one, .nightMode .cloze.one-by-one b, .nightMode .cloze.one-by-one u, .nightMode .cloze.one-by-one i,
.night_mode .cloze.one-by-one, .night_mode .cloze.one-by-one b, .night_mode .cloze.one-by-one u, .night_mode .cloze.one-by-one i {
color: #009400 !important;
}
.nightMode #extra, .nightMode #extra i,
.night_mode #extra, .night_mode #extra i {
color: magenta !important;
}
.nightMode .hints,
.night_mode .hints {
color: cyan !important;
}
.nightMode hr, .night_mode hr {
border-top: 1px solid rgba(255, 255, 255, 0.3) !important;
}
Unfortunately, I don’t have a Mac to test this on, so I suggest copying the code, pasting it into an AI program, and asking it to modify the code as you wish.
1 Like
okay thank you
1 Like