Purpose

This is a project for making Chinese study, through Anki, more enjoyable by automatically styling the flashcards and providing convenience features. This project enables one to focus more on studying rather than perfecting their form of studying.

Available Card Types

The below is showcasing various phonic types and orientations. This may be configured to your preferred study needs. The variety shown is for demonstration purposes.

Recognition	Sentence

Tones	Secondary Recognition

Secondary Sentence	Audio

tl;dr

Whether your study involves simplified or traditional characters, this project can make Chinese flashcards look nice by copying/pasting a few lines of logic in your Anki template. It can also auto-magically generate some data, please go here to see what is available.

Try it out now by navigating to the jsFiddle page, or follow the instructions below to set this up within your own installation of Anki.

1. Copy and paste the below code snippets into their respective card templates
2. Exchange the default value of YOUR_FIELD_NAME with the names defined in your deck (see {{text:YOUR_FIELD_NAME}})
3. Decide which card type you want to create and update that attribute value as well.

Convenience Features

Aside from making your flashcards look beautiful, this project has a few note-worthy features:

1. Simplified And/Or Traditional Character Support

   • This project has a concept which enables the user to define which character type they would like to make their 'primary' character set. A user may also define an optional 'secondary' character set or have one automatically generated from their 'primary' character.
     • This enables a user to become familiar with both character types as it is be helpful to be able to understand all forms and permutations that written language may take.

2. Automatic Secondary Character Generation

   • The user will define a 'primary' character set and a secondary character set may be autogenerated to expand the learner's study.
     • e.g.: A user may set their primary character as Simplified and a Traditional form of that card can be automatically generated.

3. Pinyin Or Zhuyin Phonic Support

   • This project allows a user to define which phonic type they would like to utilize in their study. This feature is not limited by the user's 'primary' character type. Users have the ability to 'mismatch' uncommon character and phonic type combinations. Such as Simplified and Zhuyin.
     • Please Note: If a user does not want autogenerated zhuyin values, the equivalent pinyin phonic must be the source phonic that is defined. With this limitation, it is recommended to set the web component to always force autogeneration.

4. Automatic Phonic Generation

   • As long as a 'primary' character is present and the chosen phonic field is blank, or omitted, from the web component, an automated one will be generated.
     • Setting preferred phonic to pinyin (default value) will generate accented pinyin
     • Setting preferred phonic to zhuyin will generate the expected value of bopomofo characters
   • Users may also force all phonic values, even if values are found in their Anki data. This is recommended.

5. Dictionary Integration

   • At any time, the user can click the hanzi that is shown and the card will automatically open either within Pleco (on mobile) or Hanzii.net (on desktop)
     • Pleco must be pre-installed on your mobile device for this to work as expected.
6. Stroke Order Animation - Under Construction
   • On the answer side of the writing cards, the hanzi will animate the stroke order by default.

Code Snippets

Front

A full example of the Front of a recognition card is found below:

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

<script>
    // if the custom element material-beautify-chinese-study is not a known element
    //// manually create the html script to import the module so the browser has
    //// the necessary logic to create element
    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');
        // this will retrieve the newest, bleeding edge version of the package
        // doing this could cause issues if something in the package is updated and the older
        //// version no longer exists
        // one solution is to require a specific version by adding @VERSION-NUMBER like the example below
        //// https://cdn.jsdelivr.net/npm/beautify-chinese-study@1.1.48/dist/beautify-chinese-study/beautify-chinese-study.esm.js
        // versions can be viewed here https://www.npmjs.com/package/beautify-chinese-study
        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.');
    }

    // locate the custom element material-beautify-chinese-study on the DOM
    //// if it has data - remove everything
    var beautify = document.querySelector('material-beautify-chinese-study');
    if (beautify !== null) {
        beautify.remove();
    }

    // create a brand new material-beautify-chinese-study element and define
    //// its attributes and attribute values
    // IMPORTANT - the text below that contains {{text:YOUR_FIELD_NAME}} is meant to be exchanged
    //// with the field names on your Anki card fields
    //// eg if the english translation field on your Anki card is called English the value you type below
    //// would be
    //// beautify.setAttribute('meaning', "{{text:English}}")
    // Remove the above references to {{text:YOUR_FIELD_NAME}} and {{text:EngLish}}
    //// even though they are comments - Anki will still see this as an error
    var beautify = document.createElement('material-beautify-chinese-study');
    beautify.setAttribute('id', 'beautify');
    beautify.setAttribute('primary-character', `{{text:YOUR_FIELD_NAME}}`);
    beautify.setAttribute('secondary-character', `{{text:YOUR_FIELD_NAME}}`);
    beautify.setAttribute('numbered-pinyin', `{{text:YOUR_FIELD_NAME}}`);
    beautify.setAttribute('primary-character-sentence', `{{text:YOUR_FIELD_NAME}}`);
    beautify.setAttribute('secondary-character-sentence', `{{text:YOUR_FIELD_NAME}}`);
    beautify.setAttribute('sentence-numbered-pinyin', `{{text:YOUR_FIELD_NAME}}`);
    beautify.setAttribute('meaning', `{{text:YOUR_FIELD_NAME}}`);
    beautify.setAttribute('card-type', 'recognition');
    beautify.setAttribute('card-orientation', 'question');
    beautify.setAttribute('preferred-phonic', 'zhuyin');
    // add the element to the DOM body
    document.body.appendChild(beautify);
</script>




{{Audio}}{{SentenceAudio}}

Back

A full example of the Back of a recognition card is found below:

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

<script>
    // if the custom element material-beautify-chinese-study is not a known element
    //// manually create the html script to import the module so the browser has
    //// the necessary logic to create element
    if (!customElements.get('material-beautify-chinese-study')) {
        var script = document.createElement('script');
        script.setAttribute('id', 'import-script');
        script.setAttribute('type', 'module');
        // this will retrieve the newest, bleeding edge version of the package
        // doing this could cause issues if something in the package is updated and the older
        //// version no longer exists
        // one solution is to require a specific version by adding @VERSION-NUMBER like the example below
        //// https://cdn.jsdelivr.net/npm/beautify-chinese-study@1.1.48/dist/beautify-chinese-study/beautify-chinese-study.esm.js
        // versions can be viewed here https://www.npmjs.com/package/beautify-chinese-study
        script.setAttribute('src', 'https://cdn.jsdelivr.net/npm/beautify-chinese-study/dist/beautify-chinese-study/beautify-chinese-study.esm.js');
        document.body.appendChild(script);
    }

    // since we are on the back of the card the custom element from the front of the card
    //// may have been retained - in instances of AnkiDroid a new webview is created and
    //// the element will need to be recreated from scratch
    var beautify = document.querySelector('#beautify');
    if (!beautify) {
        // probably executing because on AnkiDroid
        // recreating element from scratch
        // IMPORTANT - the text below that contains {{text:YOUR_FIELD_NAME}} is meant to be exchanged
        //// with the field names on your Anki card fields
        //// eg if the english translation field on your Anki card is called EngLish the value you type below
        //// would be
        //// beautify.setAttribute('meaning', "{{text:EngLish}}")
        // Remove the above references to {{text:YOUR_FIELD_NAME}} and {{text:EngLish}}
        //// even though they are comments - Anki will still see this as an error
        var beautify = document.createElement('material-beautify-chinese-study');
        beautify.setAttribute('id', 'beautify');
        beautify.setAttribute('primary-character', `{{text:YOUR_FIELD_NAME}}`);
        beautify.setAttribute('secondary-character', `{{text:YOUR_FIELD_NAME}}`);
        beautify.setAttribute('writing', `{{text:YOUR_FIELD_NAME}}`);
        beautify.setAttribute('numbered-pinyin', `{{text:YOUR_FIELD_NAME}}`);
        beautify.setAttribute('primary-character-sentence', `{{text:YOUR_FIELD_NAME}}`);
        beautify.setAttribute('secondary-character-sentence', `{{text:YOUR_FIELD_NAME}}`);
        beautify.setAttribute('sentence-numbered-pinyin', `{{text:YOUR_FIELD_NAME}}`);
        beautify.setAttribute('meaning', `{{text:YOUR_FIELD_NAME}}`);
        beautify.setAttribute('card-type', 'recognition');
        beautify.setAttribute('card-orientation', 'answer');
        beautify.setAttribute('preferred-phonic', 'zhuyin');
        document.body.appendChild(beautify);
    } else {
        // element already exist
        // redefine the card type just for safe keeping
        // redefine the card orientation to display the answer logic
        beautify.setAttribute('card-type', 'recognition');
        beautify.setAttribute('card-orientation', 'answer');
    }
</script>




{{Audio}}{{SentenceAudio}}

What Is Happening In The Above Code Snippet?

The logic attempts to make custom styling and additional logic work the same across Desktop Anki and Anki Droid (ios anki not tested). The above code snippets contain inline comments to address what is being done, but an explanation is also below.

• Front
  1. Check if the Web View contains logic to create our custom element, material-beautify-chinese-study
     • If it does move on
     • If it does not, programmatically create the import script tag and pull it in from cdn so the Web View will have the ability to create it
  2. Check if the Web View's DOM already contains our element, material-beautify-chinese-study
     • Most likely it will not since we are on the front of the flash card
       • Depending on which Anki client is being used, the Web View may retain data from prior sessions
  3. Programmatically create the material-beautify-chinese-study element and define the attribute values with your personal Anki field names
  4. Add audio to the card, but make it invisible
• Back
  1. Check if the Web View contains logic to create our custom element, material-beautify-chinese-study
     • If it does move on
     • If it does not, programmatically create the import script tag and pull it in from cdn so the Web View will have the ability to create it
  2. Check if the Web View's DOM already contains our element, material-beau