Schreibtrainer online...

D

Dominik2

Grünschnabel
:(

Hi!

Ich habe das Problem, dass ich mich nicht mit JavaScript beschäftige...
Eher mit PHP ;)

Brauch aber in diesem Fall beides denke ich mal :rolleyes:

---

Also, ich will einen Onlineschreibtrainer...

Es öffnet sich ein Popup, man muss Vorname und Name eingeben, dann auf Start klicken und man sieht in einer oberen Tabelle, das aktive Wort das man tippen muss von mir aus rot, und in der unteren Tabelle, was man getippt hat...

Man sollte dann ganze Texte tippen können :)

Dann am Ende sollte eine Auswertung sein, eine Art Protokoll, wo man eine NOte vergibt :)

!

bye
 
Hallo Dominik,

ich hab dir ein kleines Beispiel geschrieben - die Aufgabenstellung kann man ja auf 1000 verscheidene Arten angehen, von daher ist meins nur eine Anregung. Das ganze kann man aber sehr leicht an die jeweiligen bedürfnisse anpassen. Wenn einwort geschrieben wurde, muss es hier mit RETURN abgeschickt werden - probiers einfach, ist alles selbsterklärend :)

Code: 
<html>
<head>
    <script type="text/javascript">
      //Die Wörter, die abgefragt werden sollen
      var wort = new Array('Auto', 
                           'Flugzeug',
                           'Blumentopf',
                           'Rasierapperat');

      //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;
            
      
     // Namensabfrage und start
     function login(){
          name = prompt("wie heißt du?","demo");
          document.trainer.test.value = '';
          set();
     }
      
      
     // Füllt das Formular 
     function set(){
          var current = wort[counter];
          document.trainer.vorgabe.value = current;
          document.trainer.counter.value = woerter;
     }
      
     
     // Wertet die Fehler aus und ordent den Fehlern die Noten zu
     function bewerten(){
     var y = 0;
           while(schluessel[y] < fehler){
               y++;
           }
           alert('Hallo '+name+',\n du hast '+fehler+' Fehler!\n Bewertung: '+bewertung[y]);
     }
      
     
     // Überprüft die Eingaben undnzählt die Fehler     
     function check(){
         if(counter+1 == wort.length){
             bewerten();
         }else{
              var input = document.trainer.test.value;
              if(input.length>wort[counter]){
                  for(var x=0; x<input.length; x++){
                      if(input.charCodeAt(x)!=wort[counter].charCodeAt(x)){
                         fehler++;
                      }
                   }
              }else{
                  for(var x=0; x<wort[counter].length; x++){
                      if(input.charCodeAt(x)!=wort[counter].charCodeAt(x)){
                         fehler++;
                      }
                   }
              }
              eingabe.push(input);
              document.trainer.test.value = '';
              counter++;
              woerter--;
              set();
         }
    }
      
     
     //'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 onload="login()">

<form name="trainer">
<table>
  <tr>
    <td><h1> Basic Test </h1></td>
  </tr><tr>
    <td> Noch <input name="counter" type="text" size="3"> Wörter </td>
  </tr><tr>
    <td><input name="vorgabe" type="text" style="color:red;"></td>
  </tr><tr>
    <td><input name="test" type="text"></td>
  </tr>
</table>
</form>

</body>
</html>
ciao
 
Danke tausend Mal...
Hast super gemacht :)
Obs , weiß ich noch nicht genau, glab aber schon :D

Eine Frage noch, wie sieht es aus, mit ganzen Texten? Einfach alles als 1 Teil des Arrays reinschreiben?

bye
 
Gut...

Würde funktionieren (einzelne Wörter)

Das mit ganzen Sätzen muss ich noch probieren :)

Wie macht man diese Textbox, wo die Wörter angezeigt werden größer?

Ich werde editiern ^^
bye

//EDIT:

Könnte man dann noch sowas einbauen, das auch Fehler angezeigt werden, wenn er sich vertippt, oder wenn er Backspace benützt?

Und, vielleicht noch keine POPup sondern ein Protokoll *g*

Wenn das alles gemacht hast *g*, bist spitze :)

bye
 
Zuletzt bearbeitet:
enweder du machst das Feld größer:
Code: 
<input name="test" type="text" size="100">
oder du machst eine Textarea:
Code: 
<textarea name="test" cols="50" rows="10"></textarea>
am anderen Code musst du eigentlich nix ändern...

bye
 
Das mit der Textarea hat gefunzt :)
Aber das mit dem Protokoll, statt dem Alert?
Das wäre gewaltig...

in der Art:

Bewertung =>

Name: 'name'
Fehler: 'fehler'
Note: 'note'
(Zeit: 'Zeit')

Vielleicht noch Zeit :)

Musst nicht unbedingt, aber es wäre fein *g*


bye

//EDIT:

Sorry, hab deinen Beitrag übersehen, warst schnell *g*
 
Hallo,

schaus dir nochmal an - das mit der extarea hab ich weggelassen, da es einige Fehler mit sich bringt....

Code: 
<html>
<head>
    <script type="text/javascript">
      //Die Wörter, die abgefragt werden sollen
      var wort = new Array('Tutorials.de - User helfen Usern', 
                           'Flugzeug',
                           'Blumentopf',
                           'Rasierapperat');

      //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?","demo");
          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(y);
     }
      
     
     // Schreibt das Protokoll
     function writeRanking(y){
         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 undnzä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 onload="login()">

<form name="trainer">
<table>
  <tr>
    <td><h1> Basic Test </h1></td>
  </tr><tr>
    <td> Noch <input name="counter" type="text" size="3"> Wörter </td>
  </tr><tr>
    <td><input name="vorgabe" type="text" style="color:red;" size="30"></td>
  </tr><tr>
    <td><input name="test" type="text" size="30"></td>
  </tr>
</table>
</form>
<div id="ergebniss"><h1>Deine Fehler</h1></div>
<div id="ranking"><h1>Deine Bewertung</h1></div>
</body>
</html>

ciao
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück