Some questions/thoughts concerning the answer field

Dear all,

I made some tests with the regular expressions above in the meantime - apparently, they do their work
with some modifications.

But that solution was not satisfying.

I found another approach here at Reddit., which has been mentioned here in the forum too.

I “played” a little bit with the anki-persistence-solution - and was able to test it with my desktop
(Suse Linux 15.2, Anki 2.1.44) and my Android tablet (Android 12) - here’s the code:

Front template
<script>
var timestamp = new Date();
// v0.5.2 - https://github.com/SimonLammer/anki-persistence/blob/62463a7f63e79ce12f7a622a8ca0beb4c1c5d556/script.js
if (void 0 === window.Persistence) {
    var _persistenceKey = "github.com/SimonLammer/anki-persistence/",
        _defaultKey = "_default";
    if (window.Persistence_sessionStorage = function() {
            var e = !1;
            try {
                "object" == typeof window.sessionStorage && (e = !0, this.clear = function() {
                    for (var e = 0; e < sessionStorage.length; e++) {
                        var t = sessionStorage.key(e);
                        0 == t.indexOf(_persistenceKey) && (sessionStorage.removeItem(t), e--)
                    }
                }, this.setItem = function(e, t) {
                    void 0 == t && (t = e, e = _defaultKey), sessionStorage.setItem(_persistenceKey + e, JSON.stringify(t))
                }, this.getItem = function(e) {
                    return void 0 == e && (e = _defaultKey), JSON.parse(sessionStorage.getItem(_persistenceKey + e))
                }, this.removeItem = function(e) {
                    void 0 == e && (e = _defaultKey), sessionStorage.removeItem(_persistenceKey + e)
                })
            } catch (e) {}
            this.isAvailable = function() {
                return e
            }
        }, window.Persistence_windowKey = function(e) {
            var t = window[e],
                i = !1;
            "object" == typeof t && (i = !0, this.clear = function() {
                t[_persistenceKey] = {}
            }, this.setItem = function(e, i) {
                void 0 == i && (i = e, e = _defaultKey), t[_persistenceKey][e] = i
            }, this.getItem = function(e) {
                return void 0 == e && (e = _defaultKey), t[_persistenceKey][e] || null
            }, this.removeItem = function(e) {
                void 0 == e && (e = _defaultKey), delete t[_persistenceKey][e]
            }, void 0 == t[_persistenceKey] && this.clear()), this.isAvailable = function() {
                return i
            }
        }, window.Persistence = new Persistence_sessionStorage, Persistence.isAvailable() || (window.Persistence = new Persistence_windowKey("py")), !Persistence.isAvailable()) {
        var titleStartIndex = window.location.toString().indexOf("title"),
            titleContentIndex = window.location.toString().indexOf("main", titleStartIndex);
        titleStartIndex > 0 && titleContentIndex > 0 && titleContentIndex - titleStartIndex < 10 && (window.Persistence = new Persistence_windowKey("qt"))
    }
}
timestamp = new Date() - timestamp;
</script>
<script>
$(document).ready(function() {
    // document is loaded and DOM is ready
//     alert("document is ready");
});

$(window).load(function() {
    // page is fully loaded, including all frames, objects and images
    alert("window is loaded");
});


$(document).unload(function() {
    // do validation here

alert ( "d unl" );
});

</script>
{{Front}}
<script>
window.setTimeout(function(){
//alert("Timeout");
});
</script>
<div id="front"></div>

<script>
var number = 0.2564;
var text = "Initial";
// Check whether Persistence works on the client.
if (Persistence.isAvailable()) {  
	// Retrieve a previously stored number and override the default. 
	// (In case this is executed on the backside as well by {{FrontSide}})
 	number = Persistence.getItem(); 
	if (number == null) {
		number=0.123456789;
		text = "A text";
		Persistence.setItem("nu",  "1. xyz " +number);
		Persistence.setItem("nu2", "1. *** " +number);
//		Persistence.setItem("tu1", "1. *** " +text);
	}
}

window.front.appendChild(document.createTextNode(number)); // Print the number.

window.onsubmit = function(event)
{
	alert("Onsubmit: "+Persistence.isAvailable());
	var number = 0.2564;
	var text = "Initial";
  
	if (Persistence.isAvailable()) {
		number=0.2345;

		text = "A text";
		Persistence.setItem("nu",  "2. xyz " +number);
		Persistence.setItem("nu2", "2. *** " +number);
		Persistence.setItem("tu1", "2. *** " +text);
	}
}
</script>


Back template
<script>
// v0.5.2 - https://github.com/SimonLammer/anki-persistence/blob/62463a7f63e79ce12f7a622a8ca0beb4c1c5d556/script.js
if(void 0===window.Persistence){var _persistenceKey="github.com/SimonLammer/anki-persistence/",_defaultKey="_default";if(window.Persistence_sessionStorage=function(){var e=!1;try{"object"==typeof window.sessionStorage&&(e=!0,this.clear=function(){for(var e=0;e<sessionStorage.length;e++){var t=sessionStorage.key(e);0==t.indexOf(_persistenceKey)&&(sessionStorage.removeItem(t),e--)}},this.setItem=function(e,t){void 0==t&&(t=e,e=_defaultKey),sessionStorage.setItem(_persistenceKey+e,JSON.stringify(t))},this.getItem=function(e){return void 0==e&&(e=_defaultKey),JSON.parse(sessionStorage.getItem(_persistenceKey+e))},this.removeItem=function(e){void 0==e&&(e=_defaultKey),sessionStorage.removeItem(_persistenceKey+e)})}catch(e){}this.isAvailable=function(){return e}},window.Persistence_windowKey=function(e){var t=window[e],i=!1;"object"==typeof t&&(i=!0,this.clear=function(){t[_persistenceKey]={}},this.setItem=function(e,i){void 0==i&&(i=e,e=_defaultKey),t[_persistenceKey][e]=i},this.getItem=function(e){return void 0==e&&(e=_defaultKey),t[_persistenceKey][e]||null},this.removeItem=function(e){void 0==e&&(e=_defaultKey),delete t[_persistenceKey][e]},void 0==t[_persistenceKey]&&this.clear()),this.isAvailable=function(){return i}},window.Persistence=new Persistence_sessionStorage,Persistence.isAvailable()||(window.Persistence=new Persistence_windowKey("py")),!Persistence.isAvailable()){var titleStartIndex=window.location.toString().indexOf("title"),titleContentIndex=window.location.toString().indexOf("main",titleStartIndex);titleStartIndex>0&&titleContentIndex>0&&titleContentIndex-titleStartIndex<10&&(window.Persistence=new Persistence_windowKey("qt"))}}
</script>

{{Back}}

<div id="back"></dv>

<script>
var number= 0.4;
var number2=0.8;
var t1 = "";
try {
	if (Persistence.isAvailable()) {

  	number = Persistence.getItem("nu" );
	  Persistence.removeItem();
  	number2 = Persistence.getItem("nu2" );
	  Persistence.removeItem();
	  t1 = Persistence.getItem("tu1");
	  Persistence.removeItem();
	}
	
	window.back.appendChild(document.createTextNode("*** " +number+" "+number2+t1));
} 
catch(e) {
	window.back.appendChild(document.createTextNode("Error: " + e.name + " - " + e.message));
}
</script>

As described in the post mentioned above, it should be possible to introduce a text input field
and store the input text by something like that:

    var inputBox = document.getElementById('input-box');
    inputBox.addEventListener('input', (event) => {
        typedAnswer = event.currentTarget.value;
        Persistence.setItem(typedAnswer)
        ...

I added an input field, it works in my desktop - but how do you enable the soft keyboard under Android to input text? The input box appears - but no keyboard :slightly_smiling_face: I have tried some solutions by searching on Google - without success so far …

Have you got any ideas how to activate the Android keyboard?

What happens if we press the “Show Answer”-button? It is not a submit, isn’t it? As far as I know,
only HTML forms can be submitted, and there is no HTML form in this case? This means
implementing a “window.onsubmit()”-routine (as I did in my front template) is usless?

Furthermore, I hope someone can give me another advice.

I have programming skills - and worked on web projects in the past, but that was 20 years ago.
My knowledge needs some updates.

I found two courses on Udemy which have very good reputations:

As far as I was able to see, the course from Colt Steele is a little bit more detailled, and he covers
HTML templates, too.

I guess I need the sections about CSS, the details of HTML and some details on Javascript …
What do you think, what will I need additionally? JQuery?

What’s your opinion? Would you recommend the course of Colt Steele?

Since my last post, I was able to make progresses in learning Latin - thanks to the abilities of Anki.

I enjoyed the styling of card templates …

What I would like to achieve: a template where I can input all the forms of a Latin noun, a whole
declination, so to say … and I think this can be reached with these persistence solution.

Each form has its own input box, will be stored in the session storage, and can be read and
checked on the back template.

Thanks a lot in advance for your efforts.

Kind regards, Frank