Toggle mask button not working

[montiy]

Bug report

Describe the bug

The toggle mask button doesn't show hidden words on the back side

A clear and concise description of what the bug is.

Reproduction step

1.add card of type cloze hide all 2.make 2 clozes 3.add the card and try clicking on toggle mask on the back 4.nothing happens

Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior

Hidden Clozes(cloze 1,2,3,4) should be revealed

A clear and concise description of what you expected to happen.

Actual behavior

If applicable, add screenshots to help explain your problem.

Anki/OS versions

OS Name Microsoft Windows 10 Home Version 10.0.19041 Build 19041 Anki Version 2.1.35

Additional context

Add any other context about the problem here.

[xuyaocrazy]

Me too.

Version: 20.10.12i16 (2020-10-12) Anki Version 2.1.35 (84dcaa86)

[warfarincoumadin]

@xuyaocrazy @montiy

Can you post your complete back template?

[xuyaocrazy]

{{cloze:Text}}
{{#Extra}}
<hr>
{{Extra}}
{{/Extra}}

<!-- (Always) #Hide others on the back side -->
<style>
/* !-- a81b1bee0481ede2 */
cloze2_w:before {
  content: "[...]";
  font-weight: bold;
  color: gray;
}
/** Css styling of visible cloze on the back */

cloze2 {
  display: none;
}

.cloze cloze2_w {
  display: none;
}

.cloze cloze2 {
  display: inline;
}

/* a81b1bee0481ede2 --! */
</style>

<style>
    .cloze 

    .cloze 

    cloze2.reveal-

    cloze2_w.reveal-

    .cloze2-toggle {
        -webkit-appearance: none;
        display: block;
        font-size: 1.3em;
        height: 2em;
        background-color: #ffffff;
        width: 100%;
        margin-top: 20px;
    }

    .cloze2-toggle:active {
        background-color: #ffffaa;
    }
</style>

<script>
    function toggle() {
        var elements = document.querySelectorAll('cloze2, cloze2_w');
        for (var i = 0; i < elements.length; i++) {
            elements[i].classList.toggle('reveal-cloze2');
        }
    }
</script>

<button class='cloze2-toggle' onclick='toggle()'>Toggle mask</button><!-- (Always) /Hide others on the back side -->

<script>
/* --- DO NOT DELETE OR EDIT THIS SCRIPT (409cac4f6e95b12d) --- */
setTimeout(function () {
  var clozeBoxes = document.querySelector('.cloze cloze2_w')
  var elements = document.querySelectorAll('cloze2.' + clozeBoxes.className)
  for (var i = 0; i < elements.length; i++) {
    elements[i].style.display = 'inline'
  }
}, 0)

/* --- DO NOT DELETE OR EDIT THIS SCRIPT (409cac4f6e95b12d) --- */
</script>

[warfarincoumadin]

Ok, try adding these two lines to the back template in the <style></style> section:

cloze2.reveal-cloze2 {display: inline;}
cloze2_w.reveal-cloze2 {display: none;}

[xuyaocrazy]

Ok, try adding these two lines to the back template in the <style></style> section:

cloze2.reveal-cloze2 {display: inline;}
cloze2_w.reveal-cloze2 {display: none;}

Thank you so much! it work~

[warfarincoumadin]

Glad it helped!

[phu54321]

This is weird. It seems like a bug on template migration script. I'll look for it

[phu54321]

OMG what happened to the <style> tag...

<style>
.cloze 
.cloze 
cloze2.reveal-
cloze2_w.reveal-cloze2  { display: inline; width: inherit; height: inherit; background-color: inherit; }
.cloze2-toggle { -webkit-appearance:none; display: block; max-width: 800px; font-size:1.3em; height: 2em; background-color: #ffffff; width: 100%; margin: 20px auto; }
.cloze2-toggle:active { background-color: #ffffaa; }
</style>

I'll need to create a fixer for this. Something got really wrong.

This needs a hotfix. ETA today

[warfarincoumadin]

yes, I was wondering a bit as well, not sure what cloze2.reveal- does for example. There were some bugs in the stylesheet before the update also:

• you should insert a line break above the button, so that it doesn't appear inline with text.
• Remove the yellow background from the button and use a different button style (ui default, same as anki/OS)
• Style the toggled revealed clozes to appear similar to active clozes (blue, not black and not bold), otherwise you don't know anymore what's a cloze and what's not
• If revealed clozes are styled blue, you will notce that there is a bug in the toggle script - not all revealed clozes are highlighted.

Some opinionated changes:

• In my custom stylesheet I'm using the same colours as the google base16 light/dark themes.
• Integrate light and dark theme styles into CSS

[phu54321]

OMG way harder than I've expected. Clearing out messes is always hard :(

[phu54321]

Could you guys try this build? build.ankiaddon.zip

[phu54321]

The fix now went public. Please try that and see if that works.