Trigger js function when answer is shown

Anki Development
1

Hi!

I’m working on a simple addon that appends some external css/js to every card using webview_will_set_content. However because a new page isn’t loaded when the answer is show, any js modifications to the DOM are only applied to the question side of the card.

Is there a js hook I can attach a function to to re-trigger the DOM changes when the answer is shown? Or is there a better way to implement this?

Thanks!

2

Update: I was able to use a MutationObserver on #qa. This seems to work well. Curious though if there a more Anki-like way haha.

let observer = new MutationObserver(() => {
  doStuff();
});

document.addEventListener("DOMContentLoaded", () => {
  const card = document.querySelector("#qa");
  observer.observe(card, { childList: true });
});

function doStuff() {
  // Do stuff!
}
3

Try the reviewer_did_show_question or reviewer_did_show_answer hooks in addition to webview_will_set_content.

from aqt import mw, gen_hooks

def myfunc(card):
	mw.web.eval('doStuff();')

gen_hooks.reviewer_did_show_question.append(myfunc)

See anki/genhooks_gui.py at 2de987007f105df2043a44c3c91838ea20f6d816 · ankitects/anki · GitHub

2 Likes
4

Ah! Okay funny I saw that but didn’t think to run mw.web.eval(). I guess I can write a js hook into that hook!

Thanks abdo!

1 Like