I think there is a way if you want for the card to appear at once without the side “Incremental reveal. Flip to backside”, like if you use basic note type and in front side you can reveal one by one and if you want to reveal all at once press normal show answer button that go to back side which all clozes get revealed, but if there only one cloze from the start => disable keys and touch response so you can show the answer only by click show answer
Also: that will have only c1 clozes (and if you want c2 c3 you should do that manually with adding another new notes with different c1 clozes , I think that more user friendly when reviewing cards, despite of the small effort for the way to add c2 c3 clozes By copy and paste and put different c1 clozes.
Sleeping on it, I think one needs a “previous” button. Something to reverse any mistake while clicking too fast. Or something to reach the last clozes by revealing all and then click a few times on “previous”.
[quote=“mathieu993, post:18, topic:12584”]
But when I study a long chapter, I need to scroll to the end to find it.
[/quote]
I was thinking about merging the functionality of this note type with that one: Anki as a knowledge base (with a “massive cloze note”) - #39 by kleinerpirat
Is auto-scroll not for “massive cloze note” ? Here I need to read everything, starting from the start. and throughout the text.
And I just found the place for “text-align: left !important;”, inside .dummy-btn.
That’s really cool now !
Thank you very much !
Is there a way I can have certain fields (like extra info or an image field) appear only when the last cloze of a card is revealed?
I tried to get a hang of it but couldn’t figure it out myself so far 
@MmZ1 you’re right, there is a way with some trickery.
The problem is that the content of a {{cloze:Field}} is already translated by Anki → and that translation lacks the cloze answers on the front side.
For example, let’s say Field has the following content:
The answer is {{c1::42}}.
{{cloze::Field}} on the front side:
The answer is <span class="cloze">[...]</span>.
See how the information is lost? It’s only available on the back side:
The answer is <span class="cloze">42</span>.
We can circumvent this by only using {{Field}} (without cloze:: prefix). This returns only the raw content of the field without Anki’s pre-template translation. We’d have to implement our own cloze parser though - which sounds worse than it really is. It even opens up the possibility of nested clozes and incremental MathJax equations (reveal variable per variable instead of wrapping the whole equation in a cloze).
I’m not sold on that one 
When you clicked too fast, you got spoiled anyway and reversing won’t fix that. I feel similarly about an option to reset the whole thing to the start, because I don’t see any learning benefit there.
I might as well attach a click EventListener to each cloze, so you can reveal them in any order you want. I implemented similar functionality in the soon to be released AnKing IO-one by one note type, where the order you should reveal the occlusions is pre-defined, but you can still reveal any other occlusion before, if you like.
You said you had to scroll to see the answers of later chapters. I could at least implement an auto-scroll to the active cloze to prevent that unnecessary manual work.
Great to see you solved it yourself! I was too tired to check yesterday.
The sample note type already has this feature. Since you’re using my code on your own note type, I can’t really help you with that. I can however comment the code, so it’s easier for you to make sense of.
this would be the backside of the template I’m using:
<div id="kard">
<div class=mystyle-head><div class=mystyle-headhov>{{#Tags}}<button class="button-tags" onclick="myFunction('button-tags')"><strong>Tags</strong></button>{{/Tags}}</div> <div class=mystyle-headhov><div id="button-tags" class="generalclass" style="display:none;">{{Tags}}</div></div> | <div class=mystyle-headhov><strong>{{Source}}</strong></div> | <div class=mystyle-headhov><strong>{{Date Stamp}}</strong></div></div> <hr>
{{edit:cloze:Text}}
<br>
<span class="timer" id="s2" style='font-size:16px; color: #A6ABB9;'></span>
<script>
function countdown( elementName, minutes, seconds )
{
var element, endTime, hours, mins, msLeft, time;
function twoDigits( n )
{
return (n <= 9 ? "0" + n : n);
}
function updateTimer()
{
msLeft = endTime - (+new Date);
if ( msLeft < 1000 ) {
element.innerHTML = "<span style='color:#CC5B5B'>TIME'S UP</span>";
} else {
time = new Date( msLeft );
hours = time.getUTCHours();
mins = time.getUTCMinutes();
element.innerHTML = (hours ? hours + ':' + twoDigits( mins ) : mins) + ':' + twoDigits( time.getUTCSeconds() );
setTimeout( updateTimer, time.getUTCMilliseconds() + 500 );
}
}
element = document.getElementById( elementName );
endTime = (+new Date) + 1000 * (60*minutes + seconds) + 500;
updateTimer();
}
countdown("s2", 0, 15 ); //2nd value is the minute, 3rd is the seconds
</script>
<br>
<button class="dummy-btn noSelect" id="controls">
<div class="reveal-btn" id="clozes">Reveal Next</div>
</button>
<div> </div>
{{#Extra}}<div id='extra'>{{edit:Extra}}</div><br>{{/Extra}}
<div id="button-hammer" class="generalclass" style="display:none;">{{#Hammer}}<div class=mystyle-hammer>{{edit:Hammer}}</div><br>{{/Hammer}}</div>
<div id="button-img" class="generalclass">{{#Image}}<div id='image'>{{edit:Image}}</div><br>{{/Image}}</div>
{{#AMBOSS-Link}}<a href= {{AMBOSS-Link}}><button class="button-amboss" id="button-amboss"><img src="_amboss-icon_16x16.png">Mehr zu diesem Thema</button></a>{{/AMBOSS-Link}}
{{#Klinik}}<button class="button-klinik" onclick="myFunction('button-klinik')"><img src="_amboss-stethoskop.icon_v2.png">Klinik</button>{{/Klinik}}
{{#Hammer}}<button class="button-hammer" onclick="myFunction('button-hammer')"><img src="_amboss-hammer.icon_v2.png">Hammer</button>{{/Hammer}}
{{#Image}}<button class="button-img" onclick="myFunction('button-img')"><img src="_amboss-abb.icon_v2.png">Abbildung</button>{{/Image}}
<div> </div>
<div id="button-klinik" class="generalclass" style="display:none;">
{{#Klinik}}<div class=mystyle-klinik>{{edit:Klinik}}</div><br>{{/Klinik}}
</div>
<div id="anki-am" data-name="Assets by ASSET MANAGER" data-version="2.1">
<script data-name="Anki Persistence" data-version="v0.5.3">
if (typeof(window.Persistence) === 'undefined') {
var _persistenceKey = 'github.com/SimonLammer/anki-persistence/';
var _defaultKey = '_default';
window.Persistence_sessionStorage = function() { // used in android, iOS, web
var isAvailable = false;
try {
if (typeof(window.sessionStorage) === 'object') {
isAvailable = true;
this.clear = function() {
for (var i = 0; i < sessionStorage.length; i++) {
var k = sessionStorage.key(i);
if (k.indexOf(_persistenceKey) == 0) {
sessionStorage.removeItem(k);
i--;
}
};
};
this.setItem = function(key, value) {
if (value == undefined) {
value = key;
key = _defaultKey;
}
sessionStorage.setItem(_persistenceKey + key, JSON.stringify(value));
};
this.getItem = function(key) {
if (key == undefined) {
key = _defaultKey;
}
return JSON.parse(sessionStorage.getItem(_persistenceKey + key));
};
this.removeItem = function(key) {
if (key == undefined) {
key = _defaultKey;
}
sessionStorage.removeItem(_persistenceKey + key);
};
}
} catch(err) {}
this.isAvailable = function() {
return isAvailable;
};
};
window.Persistence_windowKey = function(persistentKey) { // used in windows, linux, mac
var obj = window[persistentKey];
var isAvailable = false;
if (typeof(obj) === 'object') {
isAvailable = true;
this.clear = function() {
obj[_persistenceKey] = {};
};
this.setItem = function(key, value) {
if (value == undefined) {
value = key;
key = _defaultKey;
}
obj[_persistenceKey][key] = value;
};
this.getItem = function(key) {
if (key == undefined) {
key = _defaultKey;
}
return obj[_persistenceKey][key] == undefined ? null : obj[_persistenceKey][key];
};
this.removeItem = function(key) {
if (key == undefined) {
key = _defaultKey;
}
delete obj[_persistenceKey][key];
};
if (obj[_persistenceKey] == undefined) {
this.clear();
}
}
this.isAvailable = function() {
return isAvailable;
};
};
/*
* client | sessionStorage | persistentKey | useful location |
* ----------|----------------|---------------|-----------------|
* web | YES | - | NO |
* windows | NO | py | NO |
* android | YES | - | NO |
* linux 2.0 | NO | qt | YES |
* linux 2.1 | NO | qt | YES |
* mac 2.0 | NO | py | NO |
* mac 2.1 | NO | qt | YES |
* iOS | YES | - | NO |
*/
window.Persistence = new Persistence_sessionStorage(); // android, iOS, web
if (!Persistence.isAvailable()) {
window.Persistence = new Persistence_windowKey("py"); // windows, mac (2.0)
}
if (!Persistence.isAvailable()) {
var titleStartIndex = window.location.toString().indexOf('title'); // if titleStartIndex > 0, window.location is useful
var titleContentIndex = window.location.toString().indexOf('main', titleStartIndex);
if (titleStartIndex > 0 && titleContentIndex > 0 && (titleContentIndex - titleStartIndex) < 10) {
window.Persistence = new Persistence_windowKey("qt"); // linux, mac (2.1)
}
}
}
</script>
<script data-name="Incremental Reveal" data-version="v0.1">
// alt for incremental reveal
// . for full reveal
// for custom keycodes: https://keycode.info/
var shortcuts = {
"next": {
"name": "alt",
"keycode": 18,
},
"all": {
"name": ".",
"keycode": 190,
}
};
(function () {
let remaining = Array.prototype.slice.call(
document.getElementsByClassName("cloze"))
if (remaining.length > 1) {
let content = []
remaining.forEach((cloze, i) => {
console.log(cloze.innerHTML)
content.push(cloze.innerHTML)
if (Persistence.isAvailable()) {
cloze.innerHTML = Persistence.getItem(`hint-${i}`)
}
else cloze.innerHTML = globalThis.clozeContents[i]
})
remaining[0].classList.add("active")
remaining[0].scrollIntoView({
behavior: "smooth",
block: "center"
})
function revealAll() {
while (remaining) {
revealNext()
}
}
function revealNext() {
let cloze = remaining.shift()
cloze.innerHTML = content.shift()
cloze.classList.remove("active")
MathJax.typesetPromise([cloze])
if (remaining.length > 0) {
remaining[0].classList.add("active")
}
else showExtra()
}
setupControls()
} else showExtra()
let clean = []
let tags = document.getElementById("tags")
if (tags.innerText) {
document.getElementById("tags-heading").classList.remove("hidden")
for (let tag of document.getElementById("tags").innerText.split(/\s/)) {
clean.push(tag.split("::").pop().replace("_", " "))
}
tags.innerHTML = clean.join(", ")
}
for (header of document.getElementsByClassName("header")) {
header.addEventListener("click", revealNextElement)
}
function setupControls() {
document.getElementById("clozes").addEventListener("click", revealNext)
document.addEventListener("keydown", (event) => {
if (event.keyCode == shortcuts.next.keycode) {
event.preventDefault()
revealNext()
}
else if (event.keyCode == shortcuts.all.keycode) revealAll()
})
let next = document.getElementById("reveal-next")
let nextKey = shortcuts.next.name
next.title = `Reveal next cloze (${nextKey})`
next.addEventListener("click", revealNext)
let all = document.getElementById("reveal-all")
let allKey = shortcuts.all.name
all.title = `Reveal all clozes (${allKey})`
all.addEventListener("click", revealAll)
}
function revealNextElement() {
this.nextElementSibling.classList.remove("hidden")
}
function showExtra() {
document.getElementById("controls").classList.add("hidden")
document.getElementById("extras").removeAttribute("hidden")
}
})()
</script>
</div>
Wrap all the content you want to appear after the last reveal inside the following element:
<div id="extras" hidden>
... All your extra stuff ...
</div>
Then it should work automatically, as the function showExtra is already in your template. It is called when the last cloze is revealed.
function showExtra() {
document.getElementById("controls").classList.add("hidden")
document.getElementById("extras").removeAttribute("hidden")
}
thanks, worked like a charm 
I see, so {{c1::}} is taken by anki and run in first so you get empty string from it when you wanting to run some JavaScript on it, can it be done by running javascript that connect with sqlite database to get the content of {{c1::}} from the field with the same note id and run the JavaScript code after anki action done and replace the value with the new one?
(I don’t know if it’s possible to send calls to anki sqlite database by JavaScript but maybe? )
That would over-complicate things 
Like mentioned above, the easiest thing would be to parse the raw cloze syntax myself. That is, write a JS algorithm that takes the innerHTML of an element and creates more useful cloze spans out of the raw field input than what Anki does natively.
Then I can use the front side for the incremental reveal and make users click “Show Answer” on the last cloze.
As a side note: I do not use clozes myself, because I personally prefer Q&A style cards, but helping you guys out with this is very gratifying for me, so I’ll continue to do it in my free time 
Massive and Incremental Cloze are two nice side projects that many people seem to be interested in, so I might create a more robust, general-use Cloze+ note type one day that takes the best of both worlds.
Thanks for the inspiration and feedback to all of you!
Thanks for your help,
By the way, if you interest in Q&A cards more I have a note type that is useful for you maybe, the main purpose of it that when you have two information that related to each other but if you put the questions all along you will spoil the first answer like that so it’s small nested questions and to reveal all press show answer,like this:
And the input is easy and user friendly:
It’s formating needs a little adjustment, if you want I can send you sample template
@MmZ1, I’d like to see it. It seems like it would help me with certain types of cards, that I’d been handling using nested <details> tags until now.
Here is it:
http://dl.tiapp.ga/179164296963809200085979252/Nested_Q_As-20211002152245.apkg
I didn’t find how to send files in this forum so i use telegram Direct link generator bot to send the file with the link above but seems that the link will expire in 24h,
I made some modifications to the code to fix some viewing errors and it is support night mode now for both background and text colors,and mobile class for font size,
If you know how we can benefit from this with different things you may share it with us, for now I use this script to show nested Q&As
@shallash
Sorry there are a small error in styling:
in night mode after question 3 the button color go white, to fix this go to front template and replace all id=‘b2,b3,b4,b5,b6,b7,b8,b9;b10’ with ‘b12’ (not id=1,2,3…etc)
And in style remove extra b2,3,4 and keep only b12 in the same line in both light and night lines
I update the link above you can instantly copy it
Hi all, I wanted to know if there’s any way I can flip the card to the back, once all of my incremental clozes are uncovered. (I’m using the closet incremental clozes)
Thanks for sharing this. But I just want to have multiple cloze in one cards (like c1, c2 in one card), is there a way (or javascript hints) that I can make it? Thanks.
Just name them all c1. Or use the Ctrl+Alt/Option+C shortcut.
Yeah but I want to use multiple clozes (c1 c2 c3…) in one card so that I could choose to reveal one by one or reveal all ( one card, not random) or use with input (fill the blank). At that time, I need to fill all the blank to reveal them instead of one by one.
I’m really struggling to make heads and tails of how to implement this code into my card templates to make them work. Where do I paste these? On which template? Everything I tried has made the clozes stop being blurred or doesn’t work for me and I’m really confused. I don’t have any javascript knowledge so that’s not helping either. Any help would be appreciated
@kleinerpirat Is it possible to implement the Cloze one by one into the Ankiphil v2 Card template?
Ankili got it working on the v1 template, but I struggle to replicate it in v2.
I managed to get it working on Windows by copy pasting as I saw fit, but couldn’t really replicate that.
It also did not work on AnkiDroid.
We established an Anki work group at the Medical Faculty in Halle and could really use a cloze-one-by-one to upgrade existing cards for OSCEs and the learning of Standart operating procedures and Algorithms.
We are also planning to rework the German M2 Deck in collaboration with Göttingen and these type of cards could come in very handy.
Front-Side
<!-- ############## HEADER ############## -->
<div class="header">
<!-- TIMER -->
<span class="timer" id="timer"></span>
<script>
//############## TIMER CONFIGURATION START ##############
//Set Timer Length
var minutes = 0
var seconds = 15
//############## TIMER CONFIGURATION END ##############
function countdown( elementName, minutes, seconds )
{
var element, endTime, hours, mins, msLeft, time;
function twoDigits( n )
{
return (n <= 9 ? "0" + n : n);
}
function updateTimer()
{
msLeft = endTime - (+new Date);
//USER CUSTOMIZATION - you can edit color and text of the 'time expired' readout under the element.innerHTML
if ( msLeft < 1000 ) {
element.innerHTML = "<span style='color:#CC5B5B; font-weight:bold; margin-right: 5px;'>! ! !</span>";
} else {
time = new Date( msLeft );
hours = time.getUTCHours();
mins = time.getUTCMinutes();
element.innerHTML = (hours ? hours + ':' + twoDigits( mins ) : mins) + ':' + twoDigits( time.getUTCSeconds() );
setTimeout( updateTimer, time.getUTCMilliseconds() + 500 );
}
}
element = document.getElementById( elementName );
endTime = (+new Date) + 1000 * (60*minutes + seconds) + 500;
updateTimer();
}
countdown("timer", minutes, seconds ); //2nd value is the minute, 3rd is the seconds
</script>
<div class="head-flex-mid">
<!-- TAGS FIELD -->
<div class="headhov">{{#Tags}}<button class="button-tags" onclick="myFunction('button-tags', 'hint-tags', 'button-tags')" title="Öffne/Schließe (⌥/Alt+T)"><strong>Tags</strong></button>{{/Tags}}</div>
<div class="headhov"><div id="button-tags" class="generalclass" style="display:none;">
{{Tags}}</div></div> |
<!-- SOURCE FIELD -->
<div class="headhov"><strong>{{Source}}</strong></div> |
<!-- NOTE ID FIELD -->
<div class="headhov">{{#Note ID}}<button class="button-nid" onclick="myFunction('button-nid', 'hint-nid', 'button-nid')" title="Öffne/Schließe (⌥/Alt+N)"><strong>Note ID</strong></button>{{/Note ID}}</div>
<div class="headhov"><div id="button-nid" class="generalclass" style="display:none;">
{{Note ID}}</div></div>
</div>
<!-- DATE STAMP FIELD -->
<div class="head-flex-right"><div class="headhov"><span style="margin-left: -3px;"><strong>{{Date Stamp}}</strong></span></div></div>
</div><hr>
<div class="cloze-container" id="cloze">{{edit:cloze:Text}}</div>
<br><br>
<script>
// ############## BUTTON REVEAL SHORTCUTS ##############
// Visit https://keycode.info/ to get the number/letter for the key you want to assign
// The shortcuts are Alt + the number/letter below
// All shortcuts will also open with "H" if using the Hint Hotkeys add-on
var tags = '84'
var nid = '78'
var errata = '69'
var ScrollToHint = true;
</script>
<script>
function myFunction(divid, id, divid) {
var x = document.getElementById(divid), y = document.getElementById(id), z = document.getElementById(divid);
if (x.style.display == "none")
{
x.style.display = "block"; y.style.display = "none"; z.scrollToId;
}
else {
x.style.display = "none"; y.style.display = "inline-block";
}
if (ScrollToHint){
z.scrollIntoView({
behavior: "smooth", //"auto" for instant scrolling
block: "start",
inline: "nearest"
});}
}
document.onkeydown = function(evt) {
evt = evt || window.event;
if (evt.altKey && evt.keyCode == tags) {
myFunction('button-tags', 'hint-tags', 'button-tags')}
if (evt.altKey && evt.keyCode == nid) {
myFunction('button-nid', 'hint-nid', 'button-nid')}
if (evt.altKey && evt.keyCode == errata) {
document.getElementById('button-errata').click(); document.getElementById('button-errata').style.display = "inline-block";}
}
</script>
Back-Side
<!-- ############## HEADER ############## -->
<div class="header">
<!-- TIMER -->
<span class="timer" id="timer"></span>
<script>
//############## TIMER CONFIGURATION START ##############
//Set Timer Length
var minutes = 0
var seconds = 15
//############## TIMER CONFIGURATION END ##############
function countdown( elementName, minutes, seconds )
{
var element, endTime, hours, mins, msLeft, time;
function twoDigits( n )
{
return (n <= 9 ? "0" + n : n);
}
function updateTimer()
{
msLeft = endTime - (+new Date);
//USER CUSTOMIZATION - you can edit color and text of the 'time expired' readout under the element.innerHTML
if ( msLeft < 1000 ) {
element.innerHTML = "<span style='color:#CC5B5B; font-weight:bold; margin-right: 5px;'>! ! !</span>";
} else {
time = new Date( msLeft );
hours = time.getUTCHours();
mins = time.getUTCMinutes();
element.innerHTML = (hours ? hours + ':' + twoDigits( mins ) : mins) + ':' + twoDigits( time.getUTCSeconds() );
setTimeout( updateTimer, time.getUTCMilliseconds() + 500 );
}
}
element = document.getElementById( elementName );
endTime = (+new Date) + 1000 * (60*minutes + seconds) + 500;
updateTimer();
}
countdown("timer", minutes, seconds ); //2nd value is the minute, 3rd is the seconds
</script>
<div class="head-flex-mid">
<!-- TAGS FIELD -->
<div class="headhov">{{#Tags}}<button class="button-tags" onclick="myFunction('button-tags', 'hint-tags', 'button-tags')" title="Öffne/Schließe (⌥/Alt+T)"><strong>Tags</strong></button>{{/Tags}}</div>
<div class="headhov"><div id="button-tags" class="generalclass" style="display:none;">
{{Tags}}</div></div> |
<!-- SOURCE FIELD -->
<div class="headhov"><strong>{{Source}}</strong></div> |
<!-- NOTE ID FIELD -->
<div class="headhov">{{#Note ID}}<button class="button-nid" onclick="myFunction('button-nid', 'hint-nid', 'button-nid')" title="Öffne/Schließe (⌥/Alt+N)"><strong>Note ID</strong></button>{{/Note ID}}</div>
<div class="headhov"><div id="button-nid" class="generalclass" style="display:none;">
{{Note ID}}</div></div>
</div>
<!-- DATE STAMP FIELD -->
<div class="head-flex-right"><div class="headhov"><span style="margin-left: -3px;"><strong>{{Date Stamp}}</strong></span></div></div>
</div><hr>
<div class="cloze-container" id="cloze">{{edit:cloze:Text}}</div>
<br><br>
<!-- EXTRA FIELD -->
{{#Extra}}<div class="extra" id="extra">{{edit:Extra}}</div><br>{{/Extra}}
<script>
// ############## BUTTON REVEAL SHORTCUTS ##############
// Visit https://keycode.info/ to get the number/letter for the key you want to assign
// The shortcuts are Alt + the number/letter below
// All shortcuts will also open with "H" if using the Hint Hotkeys add-on
var tags = '84'
var nid = '78'
var errata = '69'
var amboss_link = '49'
var zusatz = '50'
var hammer = '51'
var meditricks = '52'
var klinik = '53'
var histo = '54'
var image = '55'
var OpenCloseAll = '56'
var ScrollToHint = true;
</script>
<!-- ############## SHOW FIELDS AUTOMATICALLY ##############
For instructions on how to show a field automatically, visit www.ankingmed.com/faq and search for "show hint" or watch the video on YouTube -->
<!-- HAMMER FIELD -->
<div id="button-hammer" class="generalclass" style="display:none;">
{{#Hammer}}<div class="hammer"><button class="button-hammer" onclick="document.getElementById('hint-hammer').style.display='inline-block'; myFunction('button-hammer', 'hint-hammer', 'button-hammer')" title="Schließe Hammer (⌥/Alt+3)" style="margin: 2.5px;"><img src="_amboss-hammer.icon_v2.png">Hammer</button><br>
<div id="hammer">{{edit:Hammer}}</div></div><br>
{{/Hammer}}</div>
<!-- IMAGE FIELD -->
<div id="button-img" class="generalclass">
{{#Image}}<div class="image" id="image">{{edit:Image}}</div><br>{{/Image}}</div>
<!-- AMBOSS-LINK -->
{{#AMBOSS-Link}}<a href="{{AMBOSS-Link}}"><button class="button-amboss" id="button-amboss" title="Zum AMBOSS-Kapitel (⌥/Alt+1)"><img src="_amboss-icon_16x16.png">AMBOSS</button></a>{{/AMBOSS-Link}}
<!-- ZUSATZINFOS / HAMMER / MEDITRICKS / KLINIK / HISTO / IMAGE BUTTON -->
{{#Zusatzinfos}}<a href="#" class="hint" id="hint-zusatz" onclick="this.style.display='none'; myFunction('button-zusatz', 'hint-zusatz', 'button-zusatz'); return false;">
<button class="button-zusatz" title="Öffne Zusatzinfos (⌥/Alt+2)"><img src="_amboss-zusatz.icon_v2.png"> Zusatzinfos</button></a>{{/Zusatzinfos}}
{{#Hammer}}<a href="#" class="hint" id="hint-hammer" onclick="this.style.display='none'; myFunction('button-hammer', 'hint-hammer', 'button-hammer'); return false;">
<button class="button-hammer" title="Öffne Hammer (⌥/Alt+3)"><img src="_amboss-hammer.icon_v2.png">Hammer</button></a>{{/Hammer}}
{{#Meditricks}}<a href="#" class="hint" id="hint-meditricks" onclick="this.style.display='inline-block'; myFunction('button-meditricks', 'hint-meditricks', 'button-meditricks'); return false;">
<button class="button-meditricks" title="Öffne Meditricks (⌥/Alt+4)"><img src="_meditricks.icon_v1.png"> <img src="_meditricks_v1.png"></button></a>{{/Meditricks}}
{{#Klinik}}<a href="#" class="hint" id="hint-klinik" onclick="this.style.display='none'; myFunction('button-klinik', 'hint-klinik', 'button-klinik'); return false;">
<button class="button-klinik" title="Öffne Klinik (⌥/Alt+5)"><img src="_amboss-stethoskop.icon_v2.png">Klinik</button></a>{{/Klinik}}
{{#Präparat}}<a href="#" class="hint" id="hint-histo" onclick="this.style.display='none'; myFunction('button-histo', 'hint-histo', 'button-histo'); return false;">
<button class="button-histo" title="Öffne Präparat (⌥/Alt+6)"><img src="_amboss-microscope.icon_v3.png">Präparat</button></a>{{/Präparat}}
{{#Image}}<a href="#" class="hint" id="hint-image" onclick="this.style.display='inline-block'; myFunction('button-img', 'hint-img', 'button-img'); return false;">
<button class="button-img" title="Öffne/Schließe (⌥/Alt+7)"><img src="_amboss-abb.icon_v2.png">Abbildung</button></a>{{/Image}}
<br><br>
<!-- ZUSATZINFOS FIELD -->
<div id="button-zusatz" class="generalclass" style="display:none;">
{{#Zusatzinfos}}<div class="zusatz"><button class="button-zusatz" onclick="document.getElementById('hint-zusatz').style.display='inline-block'; myFunction('button-zusatz', 'hint-zusatz', 'button-zusatz')" title="Schließe Zusatzinfos (⌥/Alt+2)" style="margin: 2.5px;"><img src="_amboss-zusatz.icon_v2.png"> Zusatzinfos</button><br>
<div id="zusatz">{{edit:Zusatzinfos}}</div></div><br>
{{/Zusatzinfos}}</div>
<!-- MEDITRICKS FIELD -->
<div id="button-meditricks" class="generalclass" style="display:none;">
{{#Meditricks}}<div class="image"><button class="button-meditricks" onclick="document.getElementById('hint-meditricks').style.display='inline-block'; myFunction('button-meditricks', 'hint-meditricks', 'button-meditricks')" title="Schließe Meditricks (⌥/Alt+4)" style="width: 50%; max-width: 375px; margin: 2.5px;"><img src="_meditricks.icon_v1.png"> <img src="_meditricks_v1.png"></button><br>
<div id="meditricks">{{edit:Meditricks}}</div></div><br>
{{/Meditricks}}</div>
<!-- KLINIK FIELD -->
<div id="button-klinik" class="generalclass" style="display:none;">
{{#Klinik}}<div class="klinik"><button class="button-klinik" onclick="document.getElementById('hint-klinik').style.display='inline-block'; myFunction('button-klinik', 'hint-klinik', 'button-klinik')" title="Schließe Klinik (⌥/Alt+5)" style="margin: 2.5px;"><img src="_amboss-stethoskop.icon_v2.png">Klinik</button><br>
<div id="klinik">{{edit:Klinik}}</div></div><br>
{{/Klinik}}</div>
<!-- HISTO FIELD -->
<div id="button-histo" class="generalclass" style="display:none;">
{{#Präparat}}<div class="histo"><button class="button-histo" onclick="document.getElementById('hint-histo').style.display='inline-block'; myFunction('button-histo', 'hint-histo', 'button-histo')" title="Schließe Präparat (⌥/Alt+6)" style="margin: 2.5px;"><img src="_amboss-microscope.icon_v3.png">Präparat</button><br>
<div id="histo">{{edit:Präparat}}</div></div><br>
{{/Präparat}}</div>
<script>
function myFunction(divid, id, divid) {
var x = document.getElementById(divid), y = document.getElementById(id), z = document.getElementById(divid);
if (x.style.display == "none")
{
x.style.display = "block"; y.style.display = "none"; z.scrollToId;
}
else {
x.style.display = "none"; y.style.display = "inline-block";
}
if (ScrollToHint){
z.scrollIntoView({
behavior: "smooth", //"auto" for instant scrolling
block: "start",
inline: "nearest"
});}
}
document.onkeydown = function(evt) {
evt = evt || window.event;
if (evt.altKey && evt.keyCode == tags) {
myFunction('button-tags', 'hint-tags', 'button-tags')}
if (evt.altKey && evt.keyCode == nid) {
myFunction('button-nid', 'hint-nid', 'button-nid')}
if (evt.altKey && evt.keyCode == errata) {
document.getElementById('button-errata').click(); document.getElementById('button-errata').style.display = "inline-block";}
if (evt.altKey && evt.keyCode == amboss_link) {
document.getElementById('button-amboss').click(); document.getElementById('button-amboss').style.display = "inline-block";}
if (evt.altKey && evt.keyCode == zusatz) {
myFunction('button-zusatz', 'hint-zusatz', 'button-zusatz')}
if (evt.altKey && evt.keyCode == hammer) {
myFunction('button-hammer', 'hint-hammer', 'button-hammer')}
if (evt.altKey && evt.keyCode == meditricks) {
myFunction('button-meditricks', 'hint-meditricks', 'button-meditricks')}
if (evt.altKey && evt.keyCode == klinik) {
myFunction('button-klinik', 'hint-klinik', 'button-klinik')}
if (evt.altKey && evt.keyCode == histo) {
myFunction('button-histo', 'hint-histo', 'button-histo')}
if (evt.altKey && evt.keyCode == image) {
myFunction('button-img', 'hint-img', 'button-img')}
if (evt.altKey && evt.keyCode == OpenCloseAll) {
try{myFunction('button-img', 'hint-img', 'button-img')}
finally{try{myFunction('button-histo', 'hint-histo', 'button-histo')}
finally{try{myFunction('button-klinik', 'hint-klinik', 'button-klinik')}
finally{try{myFunction('button-meditricks', 'hint-meditricks', 'button-meditricks')}
finally{try{myFunction('button-zusatz', 'hint-zusatz', 'button-zusatz')}
finally{myFunction('button-hammer', 'hint-hammer', 'button-hammer')}}}}}
}
}
</script>