Export unmasked image to anki?

Hello,

I am trying to use the image occlusion enhanced as a custom template and would like to have the “toggle masks” feature in Anki remove all clozes. Here is an example from Anki:

The template looks like this:

The masks are .svg images:

9290d7ffe9294dd9a631b237f3536824-ao-1-A

As I see it, this would require the following additional export fields in the custom template exporter:

  1. Export Image only
  2. Export Question Mask Only (.svg)
  3. Export Answer Mask Only (.svg)
  4. Export Original Mask Only (.svg)

Please let me know if there is another way to achieve what I am trying to do :slight_smile:

Hello Support,

Any suggestions here?

Hello

“use the image occlusion enhanced as a custom template”

Hello, sorry for the late reply. Do you mean just exporting the images without these masking blocks? If you use the emphasis feature in your images, these occlusions are not removable.

Kind Regards,
MarginNote-Edward
Support Team

Hi,

Whatever I have to do to use the ”toggle masks“ button to show all (see gif). I use the emphasis feature.

Of course, there is also the topic of an srs system within the app, which would forego my having to export to anki :wink:image

Hi Edward / Support,

Any suggestions on the above?

Nate

Hello

I'm not quite sure how the button is implemented, but I recommend you check the image occlusion enhanced javascript code in the anki card template, you may be able to find the corresponding move to the MN template to implement it.

Kind Regards,
MarginNote-Edward
Support Team

Hi Edward,

Thanks for getting back to me. So far as I can see there are a couple of things preventing this from happening:

  • No option for exporting the image only (only a clozed/masked image can be exported)
  • No options for exporting the masks as shown above

Please let me know if I am wrong. Here is the code for the back of the card which has the button:
Image occlusion enhanced - back.txt (1.6 KB) , but I’m not sure how to find the corresponding move:

{{#Image}}

{{Header}}
{{Answer Mask}}
{{Image}}
{{#Footer}}
{{Footer}}
{{/Footer}} Toggle Masks
{{#Remarks}}
Remarks
{{Remarks}}
{{/Remarks}} {{#Sources}}
Sources
{{Sources}}
{{/Sources}} {{#Extra 1}}
Extra 1
{{Extra 1}}
{{/Extra 1}} {{#Extra 2}}
Extra 2
{{Extra 2}}
{{/Extra 2}}

{{/Image}}

Hello Support / Edward,

Suggestions here? As MN does not support an SRS flashcard system a correct Anki export is the only way that I can see to complete this workflow…

Hello

Not the field names in the template, it should be this javascript code. But I don't know if this code works for Marginnote3's templates.

<script>
// Toggle answer mask on clicking the image
var toggle = function() {
  var amask = document.getElementById('io-overlay');
  if (amask.style.display === 'block' || amask.style.display === '')
    amask.style.display = 'none';
  else
    amask.style.display = 'block'
}

// Prevent original image from loading before mask
aFade = 50, qFade = 0;
var mask = document.querySelector('#io-overlay>img');
function loaded() {
    var original = document.querySelector('#io-original');
    original.style.visibility = "visible";
}
if (mask === null || mask.complete) {
    loaded();
} else {
    mask.addEventListener('load', loaded);
}
</script>

Kind Regards,
MarginNote-Edward
Support Team