Reading note fields with javascript

[Conrad Heimbold]

Hello everybody, 

I already posted in stackoverflow and in the Anki forum, but I never got an answer. 

Just a side-note: I found a plug-in for Anki on stackoverflow (python - How can a plug-in enhance Anki's javascript?) that should have done the job (and even some more stuff) that I will tell you in the following. However, I couldn't make that plug-in work; AND because I would like to make the whole thing also work on Ankidroid, where no plug-ins are possible; I prefer a native solution on Anki / Ankidroid without that plug-in. 

So here is what I would like to do: 

In Anki / Ankidroid, I would like to add a Javascript code in the note template that reads the content of one specific field of the note and can compare it with declared values. For me, it is not enough to have only the two options "content in field is existant" {{# ...}} or "no content in this field" {{^...}}; it's also important, WHAT content (e.g. which number, if there is a number). Depending on what content is in that field, other CSS-rules should be applied or other HTML content should be displayed. Is that possible? Or is the content of the fields protected somehow by the programm? 

The background for my question (You don't have to know this): 

In my case, I would like to add a conjugation / declension table to every card, in order to also learn the grammar for that word. 
However, I don't want to type in every single cell of this table with another note field; I would like to make Anki do that automatically (so automatic declension implementing the grammar rules, fetching the word in parts to decline it). 
Unfortunately, for every conjugation / declension class, this works different. Additionally, I don't want to create a new note type for every conjugation / declension class. 
The perfect solution would be, if I just type in a number (standing for one specific conjugation / declension class) in one of the fields, Anki / javascript reads this number, and displays the forms of this declension class written in HTML / hides the other declension classes' HTML. 

Thanks for your answer in advance! I hope, someone can finally answer me.... 

[Houssam Salem]

Why don't you just put every field on the template and use javascript to decide if you hide/show the field? Something like this, I mean.

[Conrad Heimbold]

Thank you very much, that's a really good idea! I'm not very familiar with javascript, that's why this solution didn't come to my mind...

[fusion...@gmail.com]

It is possible to parse Anki textfields:

<script>

var stringVar = '{{Text}}'.toString();
var intVar = parseInt(stringVar);
intVar = intVar + 10

document.write(stringVar + " " + intVar);

</script>

If {{Text}} was originally 5, then the output would be '5 15'

[Matthias Schönborn]

I'd like to add that you should use {{text:field}} instead of {{field}}, otherwise you'll get lots of html tags.

[fusion...@gmail.com]

{{text:field}} works as described. It strips formatting, new lines, and other tags (eg <img>)

Forgot I asked about this a year ago. I have since figured out a good way to parse Anki text fields. It is possible to pull the text with HTML markup from text field, parse/perform operations on it, and output it to the card.

<div id="card"></div> <!-- Displayed Output -->
<div id="field" style="display: none;">{{field}}</div> <!-- Anki text field, hidden -->

<script>
var cardOutput = document.getElementById("field").innerHTML; //innerHTML returns a string with HTML markup (eg. <div>, <br>, etc); innerText returns text only

//Modify cardOutput here

document.getElementById("card").innerHTML = cardOutput; //Set displayed output as cardOutput with HTML markup
</script>

Tips

1. It is possible to directly read Anki's text fields with HTML markup in the Add Card > Top tool bar > Other... (Down Arrow) > Edit HTML

a. Images are accessed using the <img> tag (eg. <img src="paste-xxxx.png" />)

b. HTML tags used to manage {{cloze:field}} requires reading it via javascript (read the field as innerText and output that to your card) basically the method Anki transforms the field into cloze HTML is not directly accessible outside of the card's HTML document

2. If coded entirely in Javascript/HTML the cards will render appropriately on all Anki platforms (desktop, AnkiDroid, AnkiMobile iOS) with negligible performance loss

3. It is possible to add additional HTML markup to the output (eg hideShow, shading, tables). Declare CSS styles directly in the HTML document, rather than in the <script> section.

[Matthias Schönborn]

You can have it even easier without a hidden field. Just output to the target field directly, read the data, modify it, and overwrite. Something like this:

<div id="card">{{text:field}}</div>

<script>
var cardOutput = document.getElementById("card").innerHTML;

//Modify cardOutput here

document.getElementById("card").innerHTML = cardOutput;

</script>

--
You received this message because you are subscribed to a topic in the Google Groups "AnkiDroid" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/anki-android/ji9TN9YvvRk/unsubscribe.
To unsubscribe from this group and all its topics, send an email to anki-android...@googlegroups.com.
To post to this group, send email to anki-a...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/anki-android/2d37ddf0-c442-47ea-9e73-c3c1ae55ffc1%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.