milojohzak
Grünschnabel
Hallo, ich bin leider ein absoluter Anfänger im Bereich Javascript und ich denke, dass ich für das Lösen dieses Problems eure Hilfe benötige. Ich habe mir im Netz einen Javascript-Code gesucht, der vordefinierte Texte mit der Eingabe des Users vergleichen und eine Auswertung ausspuckt, was falsch getippt worden ist.
Hier ist der Code dazu:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>tipptrainer</title>
<script type="text/javascript">
//Die Wörter, die abgefragt werden sollen
var wort = new Array('vier doch hält auch kurz aber hört jung frei lieb bist lang fallen',
'kurz aber hört jung frei lieb bist lang doch voll hält auch unsere',
'drei leid vier muss fuhr neun sehr über sein fein hoch kurz selten',
'fuhr neun sehr über sein fein hoch kurz drei leid vier muss seinen');
//Die Verschiedenen Bewertungen
var bewertung = new Array('Note 1 - Super',
'Note 2 - OK',
'Note 3 - naja',
'Note 4 - pffff',
'Note 5 - mehr üben',
'Note 6 - looser');
//Der Notenschlüssel: bis 2 Fehler = 1, Bis 5 Fehler = 2 usw...
var schluessel = new Array('2','5','9','14','20');
var woerter = wort.length;
var eingabe = new Array();
var fehler = 0;
var counter = 0;
var name;
var temp2;
var temp3;
var time;
// Namensabfrage und start
function login(){
name = prompt("Wie heißt du?","Trage hier dein Name ein!");
document.trainer.test.value = '';
startTimer();
set();
}
// Füllt das Formular
function set(){
var current = wort[counter];
document.trainer.vorgabe.value = current;
document.trainer.counter.value = woerter;
document.trainer.test.focus();
}
// Startet den Timer
function startTimer() {
start = new Date();
temp2 = start.getTime();
}
// Stopt den Timer
function stopTimer() {
end = new Date();
temp3 = end.getTime();
time = temp3-temp2;
}
// Wertet die Fehler aus und ordent den Fehlern die Noten zu
function bewerten(){
stopTimer();
var y = 0;
while(schluessel[y] < fehler){
y++;
}
document.trainer.vorgabe.value = '';
writeRanking
;
}
// Schreibt das Protokoll
function writeRanking{
var rank = '<pre>'
+'Name: '+name+'\n'
+'Fehler: '+fehler+'\n'
+'Bewertung: '+bewertung[y]+'\n'
+'Dauer: '+time/1000+' sec.\n'
+'</pre>';
document.getElementById("ranking").innerHTML += rank;
}
// Überprüft die Eingaben und zählt die Fehler
function check(){
var input = document.trainer.test.value;
if(input.length>wort[counter].length){
for(var x=0; x<input.length; x++){
if(input.charCodeAt(x)!=wort[counter].charCodeAt(x)){
if(isNaN(wort[counter].charCodeAt(x))){
tempChar ='*';
}else{
tempChar = input.charAt(x);
}
var temp ='<span style="color:red">'+tempChar+'</span>';
writeError(temp);
fehler++;
}else{
writeError(input.charAt(x));
}
}
}else{
for(var x=0; x<wort[counter].length; x++){
if(input.charCodeAt(x)!=wort[counter].charCodeAt(x)){
if(isNaN(input.charCodeAt(x))){
tempChar ='*';
}else{
tempChar = input.charAt(x);
}
var temp ='<span style="color:red">'+tempChar+'</span>';
writeError(temp);
fehler++;
}else{
writeError(input.charAt(x));
}
}
}
eingabe.push(input);
document.trainer.test.value = '';
writeError('<br>');
counter++;
woerter--;
if(counter == wort.length){
bewerten();
}
set();
}
// Schreibt die Errors
function writeError(x){
document.getElementById("ergebniss").innerHTML += x;
}
//'wartet' auf ein "Return" vom User
function test(ev){
if(navigator.appName == "Netscape"){
if(ev.which == 13){
check();
return false;
}
}else if(navigator.appName == "Microsoft Internet Explorer"){
if(window.event.keyCode == 13){
check();
return false;
}
}
}
document.onkeydown = test;
</script>
</head>
<body style="font-family:Courier New;" onload="login()">
<form name="trainer">
<table style="font:Courier New;">
<tr>
<td><h1> Basic Test </h1></td>
</tr><tr>
<td> Noch <input name="counter" type="text" style="color:green; font-family:Courier New; font-size:14px;" size="3"> Zeilen </td>
</tr><tr>
<td><input name="vorgabe" type="text" style="color:red; font-family:Courier New; font-size:14px;" size="100"></td>
</tr><tr>
<td><input name="test" type="text" style="color:red; font-family:Courier New; font-size:14px;" size="100"></td>
</tr>
</table>
</form>
<div id="ergebniss"><h1>Deine Fehler</h1></div>
<div id="ranking"><h1>Deine Bewertung</h1></div>
<div
</body>
</html>
Soweit funktioniert dies ganz gut, aber leider habe ich ein kleines Problem. Wenn der Schüler/User ein Wort zu kurz (also Buchstabe vergessen) oder zu lang (zu viel getippt) hat, dann zeigt er bei der Auswertung 60 Fehler an, weil alle darauffolgenden Buchstaben als falsch angesehen werden. Gibt es eine Möglichkeit hier eine richtige Auswertung zu erhalten? Ich wäre auch sehr froh, wenn am besten der Code gleich verändert wird, weil wie gesagt, bis ich das so hinbekomme brauch ich noch Jahre
Vielen Dank schonmal und hier noch die Datei.
Hier ist der Code dazu:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>tipptrainer</title>
<script type="text/javascript">
//Die Wörter, die abgefragt werden sollen
var wort = new Array('vier doch hält auch kurz aber hört jung frei lieb bist lang fallen',
'kurz aber hört jung frei lieb bist lang doch voll hält auch unsere',
'drei leid vier muss fuhr neun sehr über sein fein hoch kurz selten',
'fuhr neun sehr über sein fein hoch kurz drei leid vier muss seinen');
//Die Verschiedenen Bewertungen
var bewertung = new Array('Note 1 - Super',
'Note 2 - OK',
'Note 3 - naja',
'Note 4 - pffff',
'Note 5 - mehr üben',
'Note 6 - looser');
//Der Notenschlüssel: bis 2 Fehler = 1, Bis 5 Fehler = 2 usw...
var schluessel = new Array('2','5','9','14','20');
var woerter = wort.length;
var eingabe = new Array();
var fehler = 0;
var counter = 0;
var name;
var temp2;
var temp3;
var time;
// Namensabfrage und start
function login(){
name = prompt("Wie heißt du?","Trage hier dein Name ein!");
document.trainer.test.value = '';
startTimer();
set();
}
// Füllt das Formular
function set(){
var current = wort[counter];
document.trainer.vorgabe.value = current;
document.trainer.counter.value = woerter;
document.trainer.test.focus();
}
// Startet den Timer
function startTimer() {
start = new Date();
temp2 = start.getTime();
}
// Stopt den Timer
function stopTimer() {
end = new Date();
temp3 = end.getTime();
time = temp3-temp2;
}
// Wertet die Fehler aus und ordent den Fehlern die Noten zu
function bewerten(){
stopTimer();
var y = 0;
while(schluessel[y] < fehler){
y++;
}
document.trainer.vorgabe.value = '';
writeRanking
;}
// Schreibt das Protokoll
function writeRanking
{var rank = '<pre>'
+'Name: '+name+'\n'
+'Fehler: '+fehler+'\n'
+'Bewertung: '+bewertung[y]+'\n'
+'Dauer: '+time/1000+' sec.\n'
+'</pre>';
document.getElementById("ranking").innerHTML += rank;
}
// Überprüft die Eingaben und zählt die Fehler
function check(){
var input = document.trainer.test.value;
if(input.length>wort[counter].length){
for(var x=0; x<input.length; x++){
if(input.charCodeAt(x)!=wort[counter].charCodeAt(x)){
if(isNaN(wort[counter].charCodeAt(x))){
tempChar ='*';
}else{
tempChar = input.charAt(x);
}
var temp ='<span style="color:red">'+tempChar+'</span>';
writeError(temp);
fehler++;
}else{
writeError(input.charAt(x));
}
}
}else{
for(var x=0; x<wort[counter].length; x++){
if(input.charCodeAt(x)!=wort[counter].charCodeAt(x)){
if(isNaN(input.charCodeAt(x))){
tempChar ='*';
}else{
tempChar = input.charAt(x);
}
var temp ='<span style="color:red">'+tempChar+'</span>';
writeError(temp);
fehler++;
}else{
writeError(input.charAt(x));
}
}
}
eingabe.push(input);
document.trainer.test.value = '';
writeError('<br>');
counter++;
woerter--;
if(counter == wort.length){
bewerten();
}
set();
}
// Schreibt die Errors
function writeError(x){
document.getElementById("ergebniss").innerHTML += x;
}
//'wartet' auf ein "Return" vom User
function test(ev){
if(navigator.appName == "Netscape"){
if(ev.which == 13){
check();
return false;
}
}else if(navigator.appName == "Microsoft Internet Explorer"){
if(window.event.keyCode == 13){
check();
return false;
}
}
}
document.onkeydown = test;
</script>
</head>
<body style="font-family:Courier New;" onload="login()">
<form name="trainer">
<table style="font:Courier New;">
<tr>
<td><h1> Basic Test </h1></td>
</tr><tr>
<td> Noch <input name="counter" type="text" style="color:green; font-family:Courier New; font-size:14px;" size="3"> Zeilen </td>
</tr><tr>
<td><input name="vorgabe" type="text" style="color:red; font-family:Courier New; font-size:14px;" size="100"></td>
</tr><tr>
<td><input name="test" type="text" style="color:red; font-family:Courier New; font-size:14px;" size="100"></td>
</tr>
</table>
</form>
<div id="ergebniss"><h1>Deine Fehler</h1></div>
<div id="ranking"><h1>Deine Bewertung</h1></div>
<div
</body>
</html>
Soweit funktioniert dies ganz gut, aber leider habe ich ein kleines Problem. Wenn der Schüler/User ein Wort zu kurz (also Buchstabe vergessen) oder zu lang (zu viel getippt) hat, dann zeigt er bei der Auswertung 60 Fehler an, weil alle darauffolgenden Buchstaben als falsch angesehen werden. Gibt es eine Möglichkeit hier eine richtige Auswertung zu erhalten? Ich wäre auch sehr froh, wenn am besten der Code gleich verändert wird, weil wie gesagt, bis ich das so hinbekomme brauch ich noch Jahre
Vielen Dank schonmal und hier noch die Datei.
