Widget:Konjugationsklasse ermitteln

<p>Probier es selbst aus! Gib hier die Lernformen eines Verbs ein und ermittle die Konjugationsklasse!</p>

<p>
	<span class="nowrap"><label for="input-inf">Infinitiv:</label><input type="text" placeholder="vocare" id="input-inf" oninput="parseData()"/></span>
	<span class="nowrap"><label for="input-praes">1.&nbsp;Pers.&nbsp;Sing.&nbsp;Präsens:</label><input type="text" placeholder="voco" id="input-praes" oninput="parseData()"/></span>
	<span class="nowrap"><label for="input-perf">1.&nbsp;Pers.&nbsp;Sing.&nbsp;Perfekt:</label><input type="text" placeholder="vocavi" id="input-perf" oninput="parseData()"/></span>
	<span class="nowrap"><label for="input-ppp">PPP:</label><input type="text" placeholder="vocatum" id="input-ppp" oninput="parseData()"/></span>
</p>

<script>
function edge(id) {
	return document.querySelector('.edgePath[id*=' + id + '] path')
}

function node(id) {
	return document.querySelector('.node[id*=-' + id + '-] rect')
}

function parseData() {
	let inf = document.querySelector('#input-inf').value
	let praes = document.querySelector('#input-praes').value
	let perf = document.querySelector('#input-perf').value
	node('infe').style = null
	node('infi').style = null
	node('a').style = null
	node('e').style = null
	node('i').style = null
	node('ko').style = null
	node('ki').style = null
	node('ire').style = null
	node('esse').style = null
	node('velle').style = null
	node('ferre').style = null
    let edgecolor = (inf == '' || praes ==  '') ? 'black' : 'lightgray'
	edge('L-inf-a').style = "stroke: " + edgecolor + "; fill: none;"
	edge('L-inf-infi').style = "stroke: " + edgecolor + "; fill: none;"
	edge('L-infi-i').style = "stroke: " + edgecolor + "; fill: none;"
	edge('L-infi-ire').style = "stroke: " + edgecolor + "; fill: none;"
	edge('L-inf-infe').style = "stroke: " + edgecolor + "; fill: none;"
	edge('L-infe-e').style = "stroke: " + edgecolor + "; fill: none;"
	edge('L-infe-ko').style = "stroke: " + edgecolor + "; fill: none;"
	edge('L-infe-ki').style = "stroke: " + edgecolor + "; fill: none;"
	edge('L-inf-esse').style = "stroke: " + edgecolor + "; fill: none;"
	edge('L-inf-velle').style = "stroke: " + edgecolor + "; fill: none;"
	edge('L-inf-ferre').style = "stroke: " + edgecolor + "; fill: none;"
    if (inf == '' || praes ==  '') {
        return
    }
	document.querySelector('#perf-stamm').innerHTML = perf.slice(0,-1) + '-'
	if (inf.endsWith('are')) {
       	edge('L-inf-a').style = "stroke: red; fill: none;"
		node('a').style = "fill: red;"
		document.querySelector('#praes-stamm').innerHTML = inf.slice(0,-2) + '-'
		document.querySelector('#konj').innerHTML = 'a-Konjugation'
		document.querySelector('#futur').innerHTML = 'bo-bi-bu'
		document.querySelector('#imp-tz').innerHTML = '-ba-'
    }
	if (inf.endsWith('sse')) {
       	edge('L-inf-esse').style = "stroke: red; fill: none;"
		node('esse').style = "fill: red;"
		document.querySelector('#praes-stamm').innerHTML = '<b>Unregelmäßig</b>'
		document.querySelector('#konj').innerHTML = '<b>Unregelmäßig</b>'
		document.querySelector('#futur').innerHTML = '<span lang="la">-ero, -eris, -erit…</span>'
		document.querySelector('#imp-tz').innerHTML = '-eram, -eras, -erat…'
    }
	if (inf.endsWith('rre')) {
       	edge('L-inf-ferre').style = "stroke: red; fill: none;"
		node('ferre').style = "fill: red;"
		document.querySelector('#praes-stamm').innerHTML = inf.slice(0,-2) + '-'
		document.querySelector('#konj').innerHTML = '<b>Unregelmäßig</b>'
		document.querySelector('#futur').innerHTML = 'Kameeeeel'
		document.querySelector('#imp-tz').innerHTML = '-eba-'
    }
	if (inf.endsWith('lle')) {
       	edge('L-inf-velle').style = "stroke: red; fill: none;"
		node('velle').style = "fill: red;"
		document.querySelector('#praes-stamm').innerHTML = '<b>Unregelmäßig</b>'
		document.querySelector('#konj').innerHTML = '<b>Unregelmäßig</b>'
		document.querySelector('#futur').innerHTML = 'Kameeeeel'
		document.querySelector('#imp-tz').innerHTML = '-eba-'
    }
	if (inf.endsWith('ire')) {
       	edge('L-inf-infi').style = "stroke: red; fill: none;"
		node('infi').style = "fill: red;"
		if (praes.endsWith('eo')) {
       	    edge('L-infi-ire').style = "stroke: red; fill: none;"
		    node('ire').style = "fill: red;"
			document.querySelector('#konj').innerHTML = '<b>Unregelmäßig</b>'
			document.querySelector('#futur').innerHTML = 'bo-bi-bu'
			document.querySelector('#imp-tz').innerHTML = '-ba-'
        } else if (praes.endsWith('io')) {
       	    edge('L-infi-i').style = "stroke: red; fill: none;"
		    node('i').style = "fill: red;"
			document.querySelector('#praes-stamm').innerHTML = praes.slice(0,-1) + '-'
			document.querySelector('#konj').innerHTML = 'i-Konjugation'
			document.querySelector('#futur').innerHTML = 'Kameeeeel'
			document.querySelector('#imp-tz').innerHTML = '-eba-'
        }
    }
	if (inf.endsWith('ere')) {
       	edge('L-inf-infe').style = "stroke: red; fill: none;"
		node('infe').style = "fill: red;"
		document.querySelector('#praes-stamm').innerHTML = praes.slice(0,-1) + '-'
        if (praes.endsWith('eo')) {
       	    edge('L-infe-e').style = "stroke: red; fill: none;"
		    node('e').style = "fill: red;"
			document.querySelector('#konj').innerHTML = 'e-Konjugation'
			document.querySelector('#futur').innerHTML = 'bo-bi-bu'
			document.querySelector('#imp-tz').innerHTML = '-ba-'
        } else if (praes.endsWith('io')) {
       	    edge('L-infe-ki').style = "stroke: red; fill: none;"
		    node('ki').style = "fill: red;"
			document.querySelector('#konj').innerHTML = 'konsonantische Konjugation mit i-Erweiterung'
			document.querySelector('#futur').innerHTML = 'Kameeeeel'
			document.querySelector('#imp-tz').innerHTML = '-eba-'
        } else {
       	    edge('L-infe-ko').style = "stroke: red; fill: none;"
		    node('ko').style = "fill: red;"
			document.querySelector('#konj').innerHTML = 'konsonantische Konjugation'
			document.querySelector('#futur').innerHTML = 'Kameeeeel'
			document.querySelector('#imp-tz').innerHTML = '-eba-'
        }
    }
    
}
</script>