gugutu / Anki-Note-Linker

Link Anki notes to build knowledge network
https://ankiweb.net/shared/info/1077002392
GNU Affero General Public License v3.0
29 stars 3 forks source link

Issue with rendering cloze with complex list structure #33

Open atonofclaygit opened 3 weeks ago

atonofclaygit commented 3 weeks ago

Hi,

I appreciate your continued work on this add-on and responsiveness to issues!

This may well be a niche case, so thank you very much for any insight

I use the Flexible cloze 2 add on (https://ankiweb.net/shared/info/1889069832) in many of my cards. When a link is located within a cloze in this note type, the hidden cloze is broken on AnkiDroid but works on Anki PC ("FLR hypertrophy" is the linked note):

PC behavior: image image

AnkiDroid behavior: Screenshot_20240920-090020 Screenshot_20240920-090028

Note fields: image

HTML for the 'Text' field: <ul><li><span style="background-color: rgb(255, 255, 127);">Test cloze:&nbsp;</span>{{c1::!<ul><li><span style="background-color: rgb(255, 255, 127);">Pizza</span></li><li><span style="background-color: rgb(255, 255, 127);">Apples</span></li><ul><li>Koala</li><li>Horse</li><li>for [FLR hypertrophy|nid1673209648840]</li></ul><li><span style="background-color: rgb(255, 255, 127);">Hello</span></li></ul>}}</li><li>Kangaroo</li></ul>

It seems like the way Anki Note Linker parses the links on AnkiDroid is conflicting with how the Flexible cloze 2 note type parses clozes. This behavior does not happen with normal Cloze type cards

I understand if this issue doesn't have a good solution. In the meantime, I have set disableLinks=true and that makes the Cloze render properly.

Thank you for any insight you can provide!

qappell commented 3 weeks ago

The functionality of the link renderer script for AnkiDroid seems to be working for me. To set it up, how did you modify the FC2 card template? After copying the JS from here to the bottom of the card template, I just added class="linkRender" the Text field in this section of the code:

<!-- FC2 CONFIGURATION END -->

<!-- Title field at top of page -->
{{#Title}}<div id="fc2-title">{{Title}}</div>{{/Title}}

<!-- Scrollable area of the screen, required but can be styled/layouted differently -->
<div id="fc2-viewport">
    <!-- Main content field, required but can be styled/layouted differently -->
    <div id="fc2-content" class="linkRender">{{cloze:Text}}</div>

Did you do it on both sides of the template, since only the back seems to be working for you? This is what the links look like for me (I also noticed that there isn't a blue border around the cloze in your screenshots): image

atonofclaygit commented 3 weeks ago

Hm I did put the JS at the bottom of the card template and also added class="linkRender" as you did. I did modify the FC2 card template in the past, mostly centered around styling.

In case you're curious, I think this website highlights the difference between the front and back code for my edited FC2 card template: https://www.diffchecker.com/HPyVbQFp

I just realized I can activate your JS on the back side of the card and leave it off on the front side. I think that's usable for me so I don't want to take up any more of your time. Thank you again for all of your help!

qappell commented 3 weeks ago

Thanks for sharing the diff, I should've asked for your original code earlier. In this line, you are using double quotes instead of single quotes around ${link} and noteLink, but the script was correctly copied on the back: return disableLinks ? `${title}` : `<a href='${link}' class='noteLink'>${title}</a>`;

This fixes the breakage, but, unfortunately, FC2 hides the close before you can click on the link. A JS solution could probably be engineered if you still wanted to access links while answering the card.

atonofclaygit commented 3 weeks ago

That's embarrassing, thank you so much for your help!