Can't get this working

[Wunderharke]

Hey there, ir really like your template and the style of the cards. They also have some nice features I'd like to use however I can not get this working...

My template is:

Frontside:

<script>if (!document.querySelector('#import-script')) {var script = document.createElement('script');script.setAttribute('id', 'import-script');script.setAttribute('type', 'module');script.setAttribute('src', 'https://cdn.jsdelivr.net/npm/beautify-chinese-study@1.0.0/dist/beautify-chinese-study/beautify-chinese-study.esm.js');document.body.appendChild(script);}</script>

<material-beautify-chinese-study simplified='{{text:simplified}}'
    traditional='{{text:traditional}}'
    numbered-pinyin='{{text:numberedPinyin}}'
    meaning='{{text:meaning}}'
    audio='{{sound}}'
    card-type='meaning'
    card-orientation='question'
    preferred-phonic='pinyin' />

Backside:

<script>if (!document.querySelector('#import-script')) {var script = document.createElement('script');script.setAttribute('id', 'import-script');script.setAttribute('type', 'module');script.setAttribute('src', 'https://cdn.jsdelivr.net/npm/beautify-chinese-study@1.0.0/dist/beautify-chinese-study/beautify-chinese-study.esm.js');document.body.appendChild(script);}</script>

<material-beautify-chinese-study simplified='{{text:simplified}}'
  traditional='{{text:traditional}}'
  numbered-pinyin='{{text:numberedPinyin}}'
  meaning='{{text:meaning}}'
  audio='{{sound}}'
  card-type='meaning'
  card-orientation='answer'
  preferred-phonic='pinyin' />

Style:

<style> /*desktop anki*/body {margin: 0;}/*ankidroid*/#content {margin: 0;}</style>

My fields are:

• simplified: 你
• traditional: 你 (dont learn traditional)
• numberedPinyin: ni3
• meaning: du (german)
• sound: [sound:你.ogg]
• stoke order: I'm saving a gif for each character

The card layout is working fine within the template editor but all actual cards (and their preview) remain black.... I'd really appriciate any help on this.

Awesome project!

[LoganConnor44]

Which client are you on (desktop, web, android, or ios)?

[Wunderharke]

Desktop right now, I'll test it on another device.

[Wunderharke]

No not working on android either. The sound is playing but the card is pure black.

[LoganConnor44]

No need to test on another device. My assumption is the script isn't being pulled in OR there's a field that the project is expecting and is just failing because a precondition is not met.

Are you able to open up the browser console and see anything printed there (there's an anki add-on for developer tools called AnkiWebView Inspector)?

One thing that I would try is removing the version and allow it to pull the most recent version of the project. Looks like you're pulling v1.0.0

[LoganConnor44]

Here's my current html:

Front:

<style>
    /*desktop anki*/
    body {
        margin: 0;
    }

    /*ankidroid*/
    #content {
        margin: 0;
    }
</style>

<script>

if (!customElements.get('material-beautify-chinese-study')) {
    console.log('custom element does not exist - creating script to pull it in');
    var script = document.createElement('script');
    script.setAttribute('id', 'import-script');
    script.setAttribute('type', 'module');
    script.setAttribute('src', 'https://cdn.jsdelivr.net/npm/beautify-chinese-study/dist/beautify-chinese-study/beautify-chinese-study.esm.js');
    document.body.appendChild(script);
} else {
    console.log('Custom Element exists.');
}

var beautify = document.querySelector('material-beautify-chinese-study');
if (beautify !== null) {
    beautify.remove();
}

    var beautify = document.createElement('material-beautify-chinese-study');
    beautify.setAttribute('id', 'beautify');
    beautify.setAttribute('simplified', '{{text:Simplified}}');
    beautify.setAttribute('traditional', '{{text:Traditional}}');
    beautify.setAttribute('numbered-pinyin', '{{text:Pinyin.2}}');
        beautify.setAttribute('simplified-sentence', '{{text:SentenceSimplified}}');
    beautify.setAttribute('traditional-sentence', '{{text:SentenceTraditional}}');
        beautify.setAttribute('sentence-numbered-pinyin', "{{text:SentencePinyin.2}}");
    beautify.setAttribute('meaning', '{{text:Meaning}}');
    beautify.setAttribute('card-type', 'recognition');
    beautify.setAttribute('card-orientation', 'question');
    beautify.setAttribute('preferred-phonic', 'zhuyin');
    document.body.appendChild(beautify);

</script>

<div style="display:none;">{{Audio}}{{SentenceAudio}}</div>

Back:

<style>
    /*desktop anki*/
    body {
        margin: 0;
    }

    /*ankidroid*/
    #content {
        margin: 0;
    }
</style>

<script>

if (!customElements.get('material-beautify-chinese-study')) {
    var script = document.createElement('script');
    script.setAttribute('id', 'import-script');
    script.setAttribute('type', 'module');
    script.setAttribute('src', 'https://cdn.jsdelivr.net/npm/beautify-chinese-study/dist/beautify-chinese-study/beautify-chinese-study.esm.js');
    document.body.appendChild(script);
}

var beautify = document.querySelector('#beautify');
if (!beautify) {
    var beautify = document.createElement('material-beautify-chinese-study');
    beautify.setAttribute('id', 'beautify');
    beautify.setAttribute('simplified', '{{text:Simplified}}');
    beautify.setAttribute('writing', '{{text:Traditional}}');
    beautify.setAttribute('numbered-pinyin', '{{text:Pinyin.2}}');
        beautify.setAttribute('simplified-sentence', '{{text:SentenceSimplified}}');
    beautify.setAttribute('traditional-sentence', '{{text:SentenceTraditional}}');
        beautify.setAttribute('sentence-numbered-pinyin', "{{text:SentencePinyin.2}}");
    beautify.setAttribute('meaning', '{{text:Meaning}}');
    beautify.setAttribute('card-type', 'recognition');
    beautify.setAttribute('card-orientation', 'answer');
    beautify.setAttribute('preferred-phonic', 'zhuyin');
    document.body.appendChild(beautify);
} else {
    beautify.setAttribute('card-type', 'recognition');
    beautify.setAttribute('card-orientation', 'answer');
}

</script>

<div style="display:none;">{{Audio}}{{SentenceAudio}}</div>

[Wunderharke]

Jep indeed there is a property called which is undefined. Just need to find out which one it is (probably traditional).

p-f0060adf.js:1 TypeError: Cannot read property 'toLowerCase' of undefined
    at c.getCardType (p-98dea2d8.entry.js:6)
    at componentDidLoad (p-98dea2d8.entry.js:6)
    at A (p-f0060adf.js:1)
    at L (p-f0060adf.js:1)
    at t (p-f0060adf.js:1)
    at x (p-f0060adf.js:1)
    at p-f0060adf.js:1
    at H (p-f0060adf.js:1)
    at P (p-f0060adf.js:1)
    at Array.<anonymous> (p-f0060adf.js:1)
n @ p-f0060adf.js:1

[LoganConnor44]

Ahh - okay. That's a problem on my side. Go ahead and just populate that field with the simplified or a fake value as a workaround.

Such as:

<material-beautify-chinese-study simplified='{{text:simplified}}'
    traditional='x'
    numbered-pinyin='{{text:numberedPinyin}}'
    meaning='{{text:meaning}}'
    audio='{{sound}}'
    card-type='meaning'
    card-orientation='question'
    preferred-phonic='pinyin' />

Hard-coding a fake value is probably the easiest route since you would do it once on your card type.

[Wunderharke]

Nope doesn't seem to fix it and since 'toLowerCase' function is called it might not be the traditional field in the first place ...

However by adapting your code changing the field names and deleting all the 'sentence-*' calls (dont have sentences yet) it is working like charm!

[LoganConnor44]

I just read your error again and see that cardType was undefined. lol - it was staring us in the face! :)

My readme.md is probably out of date. I'll give this project some attention this weekend. Hope you enjoy it. Please feel free to reach back out with any other issues.

It looks like the last time I generated documentation for the project these were the expected fields for the project.

[Wunderharke]

Sorry for my late response I was busy the rest of the week. What do you mean by cardType was undefined? I thought this should be set with card-type='meaning'? I use the expected fields as described.

I did some further testing and removed the version lock in my config.

<script>
if (!document.querySelector('#import-script')) {
    var script = document.createElement('script');
    script.setAttribute('id', 'import-script');
    script.setAttribute('type', 'module');
    script.setAttribute('src', 'https://cdn.jsdelivr.net/npm/beautify-chinese-study/dist/beautify-chinese-study/beautify-chinese-study.esm.js');
    document.body.appendChild(script);
}</script>

<material-beautify-chinese-study
    simplified='{{text:simplified}}''
    numbered-pinyin='{{text:pinyin}}'
    meaning='{{text:meaning}}'
    simplified-sentence='{{text:sentenceSimplified}}'
    sentence-meaning='{{text:sentenceMeaning}}'
    sentence-numbered-pinyin='{{text:sentencePinyin}}'
    audio='{{audio}}'
    cardType='meaning'
    card-Type='meaning'
    card-orientation='question'
    preferred-phonic='pinyin' />

There is some new error now:

p-0cff9892.js:1 TypeError: Cannot read property 'toUpperCase' of undefined
    at createCard (p-51d90ebd.entry.js:6)
    at c.render (p-51d90ebd.entry.js:6)
    at P (p-0cff9892.js:1)
    at O (p-0cff9892.js:1)
    at p-0cff9892.js:1
    at R (p-0cff9892.js:1)
    at C (p-0cff9892.js:1)
    at Array.<anonymous> (p-0cff9892.js:1)
    at I (p-0cff9892.js:1)
    at J (p-0cff9892.js:1)

Which is strange because this object is created with cardType: [1, "card-type"] however I did not find the constructor in the source code of p-51d90ebd.

[LoganConnor44]

cardType='meaning'
card-Type='meaning'

You have two card types defined. Both may be invalid. The camel case syntax is what is used in the ts files, and the lowercasing with the hyphen between words is used in the web element. Just to clarify the verbiage in the generated documentation, the property names are the ts properties and the attribute names will be the same value, just the xml/html representation of that value when working with the web element. Try changing the above lines to:

card-type='meaning'

[LoganConnor44]

Feel free to take a look at the updated project and ReadMe. I believe the updates I made should help you and. potentially, others.

[Wunderharke]

Ahh! I did not see my misspelling until now. What a mistake ... I guess that was the reason however I'm now using your new proposed configuration anyways and that one works great.

The new documentation is easy to understand even without any HTML knowledge!

I only have one last thing I'm struggling with: I want to change the font size of all the card content to make it bigger, especially to stoke order type, and didn't manage to overwrite the existing css. Could you assist me with that?

[LoganConnor44]

I did not see my misspelling until now. What a mistake

No worries - it's always the smallest thing causing the issue! 😄

Regarding the font size, can you let me know which Anki Client you primarily use - from above it looks like you'll be on Desktop a majority of the time... Do you regularly use any other clients? On the writing card type (the one with the stroke animation), are you expecting the character size to increase or the pinyin/zhuyin to increase... or both? The character size would be possible but would take work and the pinyin/zhuyin may work out-of-the-box.

I can start testing increasing the size for all html text, after my work hours. I'm not too confident it's possible to increase the font size by editing the generic CSS since the web component has its own CSS values defined in the virtual DOM. Off the top of my head, maybe something like this would work (UI / CSS isn't my strong suit):

<material-beautify-chinese-study style="font-size: 'xx-large'" />

I would need to test it and get back to you.

Another solution may be to add another attribute to the custom component (adding new logic to the project) and have it increase the font size of everything programmatically - as in:

<material-beautify-chinese-study font-size="increase2x" />

[LoganConnor44]

After testing and seeing that the font size within the web component styling can't be modified (makes sense that's the purpose of these), this would be an enhancement. I can go ahead and add it to the queue in the readme.

Feel free to take a stab at it. Everything's written in Typescript so if you're more familiar with Java/C# this shouldn't be too out of your comfort-zone.

[LoganConnor44]

@Wunderharke I'm going to close this issue in the next few days. If you want it kept open because something came up feel free to say so. I mentioned above that I added the sizing enhancement to the readme. Over the next weekend, I'll transfer this over to GitHub's official feature section.

Hopefully, you're enjoying the project. I just added automated pinyin and traditional character generation. 加油！

[Wunderharke]

Awesome project I really enjoy it, and thank you so much for your support! I've a lot to do in collage right now, but I marked this project and will try to work on some improvements in the future.