Card only shows a singular definition

[AlexCatDev]

It seems like only one shows one definition for me per 'page'

(I have changed the CSS a little, i made the border 2 pixels instead of 1, i made the border padding 15 pixels instead of 5, and i removed the stretching of the accent graph, it doesn't change anything)

In the example picture on the github frontpage it shows more, i'd like it to show more like that, how can i do that?

I am sure this is related to the JMDict version im using, but i just downloaded the newest i'm not sure where i get the version you used.

What i am using: https://github.com/Aquafina-water-bottle/jmdict-english-yomichan/ (jmdict_english.zip)

this is what {glossary-no-dictionary} spits out for me:

<div style="text-align: left;"><ol><li><i>(adj-na, n)</i> <ul><li>honor</li><li>honour</li><li>credit</li><li>glory</li><li>fame</li><li>distinction</li></ul></li><li><i>(n)</i> <ul><li>prestige</li><li>dignity</li><li>reputation</li><li>honor</li><li>good name</li></ul></li><li><i>(n-pref)</i> honorary (e.g. president, doctorate)</li></ol></div>

[AlexCatDev]

Forgot to mention handlebars are complete default

[AlexCatDev]

solved by learning javascript and remaking the script

[InteractiveNinja]

Could you share your code and result?

[AlexCatDev]

Sure i don't use the script anymore though, but it should work now even as i post this, Also works on mobile, Will show 3 definitions per 'cycle', The card will automatically become a sentence card for kana only words, And the word will be highlighted both on back and front, You need to add a field called FullWord and pass the cloze-body to it from yomichan

Font Template

<div id='expression-field'>{{Word}}</div>
<div id='hint-field'>{{Hint}}</div>

<!--If the word is hiragana/katakana only, display the sentence in the hint field.-->
<script>
if ("{{Word}}" === "{{Reading}}" || !"{{Reading}}" ) {
    if (document.getElementById('hint-field').childNodes.length === 0) {
        document.getElementById('hint-field').innerHTML = "{{Sentence}}";
    }

        document.getElementById('hint-field').innerHTML = document.getElementById('hint-field').innerHTML.replace("{{FullWord}}",  "<mark style=\"background-color:         transparent; color: rgb(255,255,230);\">{{FullWord}}</mark>");
}
</script>

Back Template

{{FrontSide}}

<hr id=answer>

<div id="box-definition">
<div id="reading-field">
<div id="accent-graph">{{Graph}}</div>
{{Reading}}
</div>
<div id="glossary-field">{{Glossary}}</div>
<div class="main_image">{{Picture}}</div>
</div>

<div id="sentence-field">{{Sentence}}</div>

<div id="audio">{{Audio}}{{SentenceAudio}}</div>

<script>

// Remove 'No pitch accent data' text, this is put on the top so it runs regardless if the bottom things error out
if (document.getElementById('accent-graph').innerHTML === "No pitch accent data") {
    document.getElementById('accent-graph').style.visibility = "hidden"
}

//Highlight target word in sentence field by putting it in bold.
document.getElementById('sentence-field').innerHTML = document.getElementById('sentence-field').innerHTML.replace("{{FullWord}}", "<mark style=\"background-color: transparent; color: rgb(255,255,230);\">{{FullWord}}</mark>");

//Start local scope since scripts persists across cards on desktop, it would error out when declaring the variables
        {
// Cycable definition
let containerElement = document.getElementById('glossary-field');

// Traverse the DOM structure to extract the desired information
// Get the outermost <ol> element

let definition_list = [];

let olElement = containerElement.querySelector('ol');

//Multi entry lists
if(olElement !== null) {

// Extract the definitions entries into an array of strings
definition_list = Array.from(olElement.children).map(li => {

  const type = li.querySelector('i').textContent.trim();

    //Replace "( )" with "[ ]"
  const typePretty = type.replace("(" , "[").replace(")", "]");

  const definitionItems = Array.from(li.querySelectorAll('li')).map(item => item.textContent.trim());

    //if definitionItems is 0, it's a single word definition in this entry
    if(definitionItems.length == 0){
        return `${typePretty}:<br>${li.textContent.replace(type, "")}`;
    }

  //TODO push the remaining items after 3 into a new list and return that, until it has been emptied fully

  const definitions = definitionItems.slice(0, 3).join('; ');
  let returnText = `${typePretty}:<br>${definitions}`;

    let remainingDefinitions = definitionItems.length - 3;
    if(remainingDefinitions > 0){
        returnText += `; (+${remainingDefinitions})`;
        //returnText += `<br>${definitionItems.slice(3, 999).join('; ')}`;
    }

    return returnText;
});

} else {
//If above fails because no OL tag, it's because its a single entry, multiple definitions
//containerElement.querySelector

 const typeElement = containerElement.querySelector('i');
  const type = typeElement.textContent.trim();

    //Replace "( )" with "[ ]"
  const typePretty = type.replace("(" , "[").replace(")", "]");

  let definitionItems = Array.from(containerElement.querySelectorAll('li')).map(item => item.textContent.trim());

for(let i = 0; i < definitionItems.length; i+=3) {
  const definitions = definitionItems.slice(i, i + 3).join('; ');

  definition_list.push(`${typePretty}:<br>${definitions}`);
}

//If its still empty, we probably have a single entry, and a single word, which just gets stored in the div thanks yomichan
if(definition_list.length == 0) {
    definition_list =                   Array.from(containerElement.querySelectorAll('div')).map(item => `${typePretty}:<br>${item.textContent.trim().replace(type, "")}`);
}

}

//Store a reference to the id of the glossary field
//in the case where this script declared from the previous card, runs on the current card, where it has not been overwritten, the previous script wont effect the current card

const glosField = document.getElementById('glossary-field');

if (definition_list.length > 0) {

    let current_index = 0

    function replace_glossary() {

        if (current_index >= definition_list.length) {
            current_index = 0
        }
        glosField.innerHTML = `(${current_index + 1}/${definition_list.length}) ${definition_list[current_index]}`
        current_index++
    }

    function replace_glossary_arrow_key(key) {
        if (key.keyCode === 37) {
            current_index = current_index - 2
            if (current_index < 0) {
                current_index = definition_list.length - 1
            }
            replace_glossary()
        } else if (key.keyCode === 39) {
            replace_glossary()
        }
    }

    replace_glossary()
    glosField.addEventListener("click", replace_glossary)
    document.addEventListener("keydown", replace_glossary_arrow_key)
}
//End local scope
                }
</script>

[AlexCatDev]

Styling

.card {
    font-family: "Noto Serif JP", "Noto Sans JP", "Yu Mincho", "MS UI Gothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, メイリオ, Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", "ＭＳ ゴシック", "MS Gothic", TakaoPGothic, sans-serif;
    font-size: 48px;//calc(1em + 2vmax);
    text-align: center;
    color: white;
    //background-color: #222222;
    background-color: 000;
    margin-left: auto;
    margin-right: auto;
}
/*
.nightMode.card {
 background-color: #000;
}
*/

/*Basic spacing and font size options*/

#expression-field {
    margin-bottom: -0.2rem;
}

#hint-field {
    font-size: 45%;
}

#reading-field {
    font-size: 80%;
}

#glossary-field {
    font-size: 35%;
    padding-bottom: 1px;
    font-family: Consolas;          
}

#sentence-field {
    font-size: 50%;
}

#audio {
    padding: 10px;
}

#accent-graph {
    font-size: 50%;
}

/*Restrict size of screenshots.*/
img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    max-width: 600px;
    max-height: 300px;
}

/*Prevent long definition list cluttering by only displaying the first entry and centering it. This only triggers
if the script to cycle through definitions fails.*/

ol {
    list-style-type: none;
    display: inline;
    margin: 0;
    padding: 0;
}

ul {
    list-style-type: none;
    display: inline;
    margin: 0;
    padding: 0;
}

li:first-child {
    text-align: center;
}

li:first-child ~ li {
    display: none;
}

/*Create border*/
#box-definition {
    border: 2px solid gray;
    border-radius: 10px;
    width: fit-content;

    padding: 10px 10px 1px;
    margin: auto auto 1px;      
}

/*Don't show the main screenshot on mobile (to prevent showing anime/VNs in public).*/
/*
.iphone .main_image {
    display: none;
}

.mobile .main_image {
    display: none;
}
*/