Prüfe: Bist Du ein Mensch?

Kennt Ihr die CAPTCHA? Und regen Sie Euch genauso auf wie mich?
Na dann habe ich was für Euch.

Hier eine Prüfung, die wirklich funktioniert. Man kann sie zum Beispiel auch in mathematische Aufgaben abändern,
z.B.: Frage = Wieviel ist 3 + 9 | Antwort = 12 usw.

Ich bin im Netz darauf gestoßen, habe es als PHP-Abfrage nachprogrammiert und in mein Kontaktformular eingebunden.
Hier eine JavaScript-Version.

Doch sehen wir uns das Beispiel genauer an.

Kopiert Euch gerne den Code und probiert es aus: Code

Beispiel

Entferne aus dem Text alle Vokale.

Du Mensch?

Code


HTML:

<div class="output-mensch"></div>
<br>
<br>
<span class="fett">Entferne aus dem Text alle Vokale.</span>
<br>
<input type="text" name="mensch" value="">
<br>
<br>
<a id="linkHuman" href="javascript:pruefeMensch()">Du Mensch?</a>
</div>


CSS:

.output-mensch{
	width:300px;
	height:25px;
	border:1px solid white;
	padding: 5px;
}

input[name='mensch']{
    width: 200px !important;
    height: 15px !important;
    background-color: var(--white);
    color: var(--black) !important;
    margin-bottom: 0 !important;
}

.incorrect{
	color:red !important;
}

.correct{
	color:rgba(112, 175, 4, 1) !important;
}



JavaScript:

const stringArr = [];
stringArr[0] = 'Eine Eule ruht';
stringArr[1] = 'Aurelia organisiert';
stringArr[2] = 'In einer Oase';
stringArr[3] = 'Leo und Julia';
//--
const antwort = [];
antwort[0] = 'n l rht';
antwort[1] = 'rl rgnsrt';
antwort[2] = 'n nr s';
antwort[3] = 'L nd Jl';
const antwortLength = antwort.length-1; 

let countHuman  = 0;
let menschField = '';
// Nur wenn Elementvorhanden ist
if( document.querySelector('input[name=mensch]') ){
	menschField = document.querySelector('input[name="mensch"]');
	menschField.value = stringArr[0];
}

function pruefeMensch() {
	let humanText = menschField.value;
	let output = document.querySelector('.output-mensch');
	let ergebnis = '';
	if( humanText == antwort[countHuman] ){
		ergebnis = '<span class="correct">';
		ergebnis += 'Hurra!! Du bist ein Mensch</span>';
		countHuman = 0;
		// Den Link unsichtbar machen
		document.querySelector('#linkHuman').style.visibility = 'hidden';
	}else{
		ergebnis = '<span class="incorrect">';
		ergebnis += 'Kein Mensch: Probiere es nochmals</span>';
		menschField.value = stringArr[++countHuman];
	}
	document.querySelector('.output-mensch').innerHTML = ergebnis;
	
	if( countHuman >= antwortLength ){
		countHuman = -1;
	}
}