Eingabefeld auslesen und Feedback geben richtig falsch
Aktuell soll ich eine Aufgabe erstellen, die wie folgt ist. Es wird ein Wort vorgegeben wie z.B. "Toilettenpapierhalterung" und daneben soll ein Eingabefeld sein, in welchem meine Probanden die Zahl der Silben eintragen soll. Daraufhin soll relativ direkt ein Feedback gegeben werden, also wenn zum Bsp 8 eingegeben wird, dass man dann angezeigt bekommt, ob das richtig war oder nicht. Das soll nämlich nur eine Füllaufgabe werden für eine Seite, auf der ein Countdown abläuft, bevor man zur nächsten Seite gehen darf. Das ganze soll mit HTML und PHP möglich sein..
Der hier verwendete Code
<style>
#wort{
width:100%;
height:40px;
border:1px solid black;
font-size:33px;
padding:0 20px;
}
.ant1{
color:green;
}
.ant2{
color:orange;
}
.ant3{
color:red;
}
table{
width:200px;
border-collapse:collapse;
}
table tr th{
border:2px solid black;
background:lightgrey;
}
table tr td{
width:100px;
border:1px solid black;
}
</style>
<h3>Wie viele Buchstaben hat das Wort</h3>
<div id="wort"></div>
<input type="text" id="text">
<input type="button" id="go" value="antwort"><br>
<div id="inf"></div>
<p id="clock"><span id="seconds">00</span>:<span id="tens">00</span></p>
<table><tr><th>Runde</th><th>Zeit</th></tr><tbody id="liste"></tbody></table>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
var words=["lamentable", "bennett", "farthing", "speck", "biscuit", "appellation", "gdp", "reserves", "uncouth", "birch", "armchair", "judy", "greasy", "leaden", "dough", "lining", "cleverness", "ascetic", "clutch", "krishna", "embark", "quotations", "friendliness", "liberally", "trance", "untrue", "rejection", "grating", "hanover", "inexperienced", "mon", "wintry", "stalwart", "meats", "stamping", "variance", "apiece", "firmament", "absorption", "apprehensive", "terminate", "wilful", "conveniently", "cleanliness", "collective", "angela", "filth", "philippines", "timely", "herein", "ignoblea>", "canton", "lamentations", "moslem", "ware", "adjective", "glen", "invade", "livid", "buggy", "prolong", "weaken", "folio", "dismissal", "quay", "enchanting", "heave", "purified", "syrian", "significantly", "experimental", "film", "repressed", "cooperation", "sequel", "wench", "calves"];
var antwort;
var Interval;
var seconds = 00;
var tens = 00;
var round=1;
var appendTens = document.getElementById("tens");
var appendSeconds = document.getElementById("seconds");
var list = document.getElementById("liste");
var info=document.getElementById('inf');
var clocks=document.getElementById('clock');
document.getElementById('go').addEventListener('click',function(){
var ant=document.getElementById('text');
if(ant.value==antwort){
inf.innerHTML='<p class="ant1">Richtige antwort</p>';
clearInterval(Interval);
list.innerHTML+='<tr><td>'+round+'</td><td>'+seconds+':'+tens+'</td></tr>';
tens = "00";
round++;
seconds = "00";
appendTens.innerHTML = tens;
appendSeconds.innerHTML = seconds;
setTimeout(function(){
inf.innerHTML='<p class="ant2">Nächstes Wort</p>';
neues_wort()
},1000)
}else{
inf.innerHTML='<p class="ant3">Antwort falsch</p>';
}
ant.value='';
})
function neues_wort(){
Interval = setInterval(startTimer, 10);
var word = words[Math.floor(Math.random() * words.length)];
document.getElementById('wort').innerHTML=word;
antwort=word.length;
}
neues_wort();
function startTimer () {
tens++;
if(tens < 9){
appendTens.innerHTML = "0" + tens;
}
if (tens > 9){
appendTens.innerHTML = tens;
}
if (tens > 99) {
seconds++;
appendSeconds.innerHTML = "0" + seconds;
tens = 0;
appendTens.innerHTML = "0" + 0;
}
if (seconds > 9){
appendSeconds.innerHTML = seconds;
}
}
});
</script>