• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[FRAGE] Textanalyse mit JS

jdown

New member
Hallo,

ich will eine relativ einfache Textanalyse mit JS realisieren.
Eingangs soll durch eine einfache Fragestellung wie z.B.:
Beschreibe welche Bestandteile ein Fahrrad in seiner spartanischsten Form hat:
Auf die im Folgenden in einer <textarea> geantwortet werden kann.

Ziel soll es sein, den eingegebenen Text auf vordefinierte KeyWords zu untersuchen und anschließend die Trefferquote in % auszugeben.

Beispiel:
Vordefiniert sind, bei der oben aufgeführten Fragestellung, die KeyWords (Pedale, Rahmen, Lenker, Reifen). Die Texteingabe sieht wie Folgt aus:
Ein Fahrrad hat Pedale und einen Rahmen Der eingegebene Text enthält also 50 % der KeyWords.​

Ich habe bis jetzt den folgenden Code, scheitere aber an der Auswertung:(

HTML:
<html>
	<title>Freitextanalyse</title>
	<head>
		<script type="text/javascript">
			var defW = new Array("Pedale", "Rahmen", "Lenker", "Kette", "Kettenblatt", "Reifen", "Bremsen");
			function ftAnalyse (textarea) {
				if(textarea.type == 'textarea') {
					var value = document.formular.feld.value;
					if(value.length == 0)
						alert ('Bitte eine Antwort eingeben');
					else
						var valueS = value.split(' ');
						
						alert (valueS);
				}
			}
		</script>
	</head>
	<body> 
		<form name="formular">
			<table border="0" cellpadding="10" cellspacing="10" width="700">
				<tr>
					<td>
						Beschreibe welche Bestandteile ein Fahrrad in seiner spartanischsten Form hat:
						<br><br>
						<textarea name="feld" cols="50" rows="10">Bitte die Antwort eingeben!</textarea>
					</td>
				</tr>
				<tr>
					<td>
						<input type="button" value="Analyse" onclick="ftAnalyse(document.formular.feld)">
					</td>
				</tr>
			</table>
		</form>
	</body>
</html>

Ich weiß nicht, wie ich zwei Arrays miteinander Vergleiche, bzw. das erste Element aus dem 1. Array allen aus dem 2. Array und dann das 2. des 1. Arrays mit allen aus dem 2. Array usw.

- - - Aktualisiert - - -

Ich Denke, dass es sich hier um den richtigen Ansatz handeln könnte... aller dings geht es nicht :confused:
HTML:
<script type="text/javascript">
			var defW = new Array("Pedale", "Rahmen");
			var ergebnis = 0;
			function ftAnalyse (textarea) {
				if(textarea.type == 'textarea') {
					var value = document.formular.feld.value;
					if(value.length == 0){
						alert ('Bitte eine Antwort eingeben');
					}else{
						var valueS = value.split(' ');
						for (int i = 0; i < valueS.length; i++){
							for (int j = 0; j < defW.length; j++){
								if (valueS[i] == defW[j]){
									var ergebnis = ergebnis + 1;
								}
							}
						}
						alert (ergebnis);			
					}
				}
			}
		</script>
 
"Geht nicht" ist eine wenig hilfreiche Fehlerbeschreibung. Dagegen kann man mit der Fehlerkonsole schon viel mehr anfangen...

Korrekt könnte man das zum Beispiel so machen:
Code:
"use strict";

var defW = new Array("pedale", "rahmen");
var input = document.formular.feld.value;
var input = input.toLowerCase();

var matches = 0;
for (x=0; x< defW.length; x++) {
  var match = input.indexOf(defW[x]); alert(test);
  if(match !== -1){
    matches++;
  }
}

PS: der vorgegebene Text in der textarea ist nervig - den muss ich nämlich erst rauslöschen, bevor ich meine Antwort verfassen kann. Stattdessen verwendet man besser das placeholder-Attribut. Web Forms - Dive Into HTML5
PPS: if(textarea.type == 'textarea') ist ziemlich sinnfrei...
PPPS: var ergebnis = ergebnis + 1; kann man kürzer schreiben - und zwar ergebnis++;.
PPPPS: wo hast du denn sowas her??
 
Zuletzt bearbeitet:
ich habe es jetzt soo gemacht...
Code:
		<script type="text/javascript">
			var ergebnis = 0;
			var defW = new Array("Pedale", "Rahmen", "Lenker", "Kette", "Kettenblatt", "Reifen", "Bremsen");
			function ftAnalyse (textarea) {
				var value = document.formular.feld.value;
				if(value.length == 0){
					alert ('Bitte eine Antwort eingeben');
				}else{
					var valueS = value.split(' ');
					for (var i = 0, iLength = valueS.length; i < iLength; i++){
						for (var j = 0, jLength = defW.length; j < jLength; j++){
							if (valueS[i] == defW[j]){
								ergebnis++;
							}
						}
					}
					document.getElementById('ergebnis').innerHTML = ergebnis;	
				}
			}
		</script>

- - - Aktualisiert - - -

@Julian

aaah, sehr gut!!
Danke für die Tips!
Ich werde deine Verbesserungsvorschläge noch übernehmen!

Ich hätte gedacht, es sei viel komplexer!
Was hältst du von meiner Lösung?
 
aaah, sehr gut!!
Danke für die Tips!
Bitte - gern geschehen!

Noch zwei Anmerkungen: zum einen solltest du keine Variablennamen wie "value" oder "textarea" verwenden. Da gerät man leicht in Gefahr, reservierte Benennungen zu verwenden. Generell täte ich all diese Variablennamen vermeiden.
Und zum anderen hat dein Code folgende Nachteile:
  • nur in korrekter Groß- und Kleinschreibung eingegebene Wörter werden erkannt - viele Internetnutzer schreiben aber meistens alles klein
  • die Trennung am Leerzeichen ist meiner Meinung nach unelegeant und fehleranfällig. So würde zum Beispiel "Pedal,Rahmen" nicht erkannt werden.
  • die zwei for-Schleifen sind umständlich, denn sie prüfen jedes Wort einzeln auf Übereinstimmung, indem sie es mit jedem Wert des Arrays vergleichen. Meine Lösung dagegen arbeitet deutlich effizienter dadurch, dass jeder Array-Wert nur ein einziges Mal in der gesamten Zeichenkette gesucht wird.
 
@Julian: dein Ansatz würde aber z.B. "Rahmentferner" als eine Wertung für "Rahmen" finden...
auch finde ich "value" und "textarea" nicht schlecht als Namen für Variablen. Warum sollen die verleiten, reservierte Wörter zu verwenden? Hingegen "ftAnalyse" finde ich schlecht, da ich nicht auf den ersten Blick erkennen kann, wofür das "ft" steht.
Und auch dein Ansatz hat zwei Schleifen - die eine ist nur intern im .indexOf().

@jdown: globale Variablen sind wirklich keine gute Idee und können bei dir auch jetzt schon fehlerhafte Ausgaben erzeugen...
Und wenn ich bei einem Ansatz in die Textarea "Lenker Lenker Lenker Lenker Lenker Lenker Lenker Lenker " reinschreib', bekomm ich einen Wert von 8...

Ich würde sowas machen:
Code:
function ftAnalyse(textarea){
	var words = ["pedale", "rahmen", "lenker", "kette", "kettenblatt", "reifen", "bremsen"];
	var value = textarea.value;
	if (!value){
		alert('Bitte eine Antwort eingeben');
	}
	else {
		var valueS = value.toLowerCase().split(/\b/);
		var foundWords = words.filter(function(word){
			return valueS.indexOf(word) !== -1;
		});
		document.getElementById("ergebnis").innerHTML = foundWords.length;	
	}
}

PS: den Array-Konstruktor sollte man besser nicht verwenden.

- - - Aktualisiert - - -

PPS: @jdown: spendiere deinem HTML doch eine DocType - macht dir das Leben viel leichter.
 
@Julian: dein Ansatz würde aber z.B. "Rahmentferner" als eine Wertung für "Rahmen" finden...
"Rahm-entferner"? ;)
Scherz, ich hatte eigentlich die Wahrscheinlichkeit, das die Treffer in anderen Wörtern stecken, für eher gering gehalten. Was allerdings durch "Kettenblatt" widerlegt wurde, da dieses zwei Treffer (zusätzlich auch bei "Kette") verursacht...

Und auch dein Ansatz hat zwei Schleifen - die eine ist nur intern im .indexOf().
Ja, da hatte ich was total verwechselt: split + 2x for vs. for + indexOf · jsPerf
Das ineffiziente daran ist .split(), ansonsten ist nämlich in dem Beispiel indexOf sogar etwas langsamer...

Und wenn ich bei einem Ansatz in die Textarea "Lenker Lenker Lenker Lenker Lenker Lenker Lenker Lenker " reinschreib', bekomm ich einen Wert von 8...
Das wäre beispielsweise bei meiner Lösung ebenfalls nicht der Fall, da sie "rückwärts" (von den Array-Werten aus) sucht...
 
Es sieht jetzt so aus:
Code:
<html>
	<title>Freitextanalyse</title>
	<head>
		<script type="text/javascript">
			function ftAnalyse (textarea) {
				var words = ["Pedale", "Rahmen", "Lenker", "Kette", "Kettenblatt", "Reifen", "Bremsen"];
				var value = document.formular.feld.value;
				if(!value){
					alert ('Bitte eine Antwort eingeben');
				}else{
					var valueS = value.toLowerCase().split(/\b/);
					var foundWords = words.filter(function(word){
						return valueS.indexOf(word) ! == -1;
					});
					document.getElementById("ergebnis").innerHTML = foundWords.length;
				}
			}
		</script>
	</head>
	<body> 
		<form name="formular">
			<table border="0" cellpadding="10" cellspacing="10" width="700">
				<tr>
					<td>
						Beschreibe welche Bestandteile ein Fahrrad in seiner spartanischsten Form hat:
						<br><br>
						<textarea name="feld" cols="50" rows="10" placeholder="Bitte den Text eingeben"></textarea>
					</td>
				</tr>
				<tr>
					<td>
						<input type="button" value="Analyse" onclick="ftAnalyse(document.formular.feld)">
						<br><br><span id="ergebnis">hier</span>
					</td>
				</tr>
			</table>
		</form>
	</body>
</html>

Gibt es eine Möglichkeit, wie ich es selber Schritt für Schritt im Browser durchgehen kann um den Fehler zu finden?
Was bewirkt denn toLowerCase()?! und wie trennt der bei /\b/ ? und warum ! == -1 ?

Fragen über Fragen :D
 
Gibt es eine Möglichkeit, wie ich es selber Schritt für Schritt im Browser durchgehen kann um den Fehler zu finden?
Die Fehlerkonsole ist unverzichtbar in der Webprogrammierung.


Was bewirkt denn toLowerCase()?!
Mal wörtlich übersetzt: "inKleinBuchstaben()". Funktion vermutbar?


und wie trennt der bei /\b/ ?
regex - What is a word boundary in regexes? - Stack Overflow


und warum ! == -1 ?
The indexOf() method returns the index within the calling String object of the first occurrence of the specified value, starting the search at fromIndex.
Returns -1 if the value is not found.

Quelle: String.prototype.indexOf() - JavaScript | MDN


Fragen über Fragen
...die man alle über eine schnelle Websuche finden kann. Ich erkläre es dir ja trotzdem gerne, aber diese Fragen hättest du alle über Google finden können - meist liefert gleich das allererste Suchergebnis die Antwort...
 
...die man alle über eine schnelle Websuche finden kann. Ich erkläre es dir ja trotzdem gerne, aber diese Fragen hättest du alle über Google finden können - meist liefert gleich das allererste Suchergebnis die Antwort...

Ja, sry! Eine etwas übereilte Fragestellung des ganzen :(
Dennoch kann ich den Fehler nicht finden!

Die Fehlerkonsole sagt mir:
ReferenceError: textAnalyse is not defined LINE1
Syntax Error: missing ; before statement LINE14​

Die Funktion habe ich aber nie anders gemacht... es scheint mit dem Fehler in Line14 ein Zusammenhang zu bestehen.
Allerdings ist der Code von euch übernommen und sollte keine Fehler enthalten?!
 
"Rahm-entferner"? ;)
Scherz, ich hatte eigentlich die Wahrscheinlichkeit, das die Treffer in anderen Wörtern stecken, für eher gering gehalten. Was allerdings durch "Kettenblatt" widerlegt wurde, da dieses zwei Treffer (zusätzlich auch bei "Kette") verursacht...
Super - da war die Wirklichkeit mal wieder besser als meine Kreativität (was nicht so schwer ist...). Rahmentferner ist doch ein tolles Synonym für Absahner. ;)

Ja, da hatte ich was total verwechselt: split + 2x for vs. for + indexOf · jsPerf
Das ineffiziente daran ist .split(), ansonsten ist nämlich in dem Beispiel indexOf sogar etwas langsamer...
Auf meiner Maschine ist das .indexOf am schnellsten... aber solange die Texte nicht zu lang werden, ist das auch nicht wirklich spürbar.

Allerdings ist der Code von euch übernommen und sollte keine Fehler enthalten?!
Sollte ist Konjuktiv uns beschreibt wie Wirklichkeit recht gut. Nicht jeder Code, der von irgendwem im Forum geschrieben wird, ist immer korrekt - und da nehme ich mich nicht aus.
 
Zuletzt bearbeitet:
Rahmentferner ist doch ein tolles Synonym für Absahner. ;)
:thumbup: - werde ich ab sofort in meinen Sprachgebrauch aufnehmen :D

Auf meiner Maschine ist das .indexOf am schnellsten... aber solange die Texte nicht zu lang werden, ist das auch nicht wirklich spürbar.
Ja, stimmt. Ich hab's jetzt auch gerade nochmal in einem anderen Browser getestet, da war .indexOf() auch etwas schneller.


Nur jeder Code, der von irgendwem im Forum geschrieben wird, ist immer korrekt
Du meintest wohl eher nur nicht... ;)
 
Oh... ja - natürlich meinte ich "nicht". War einfach schon etwas spät... hab's mal oben ausgebessert.
 
Wäre es auch Möglich, während der Eingabe des Antworttextes eine Zeichnung eines Fahrrads immer weiter aufzubauen?
Also sobald jemand eingibt: "Ein Fahrrad besteht aus einem Rahmen..." erscheint in einem Bild der Rahmen, und weiter: "... und einem Lenker..." dass der Rahmen durch den Lenker erweitert wird? usw.
Was auch noch nett wäre ist ein Fortschrittsbalken mit einer Prozentangabe!
Ich begebe mich mal bei Google auf die Suche! Entschuldigt bitte, dass ich hier solche - für euch sicherlich einleuchtende - Fragen stelle ;)

- - - Aktualisiert - - -

Wäre es auch Möglich, während der Eingabe des Antworttextes eine Zeichnung eines Fahrrads immer weiter aufzubauen?
Also sobald jemand eingibt: "Ein Fahrrad besteht aus einem Rahmen..." erscheint in einem Bild der Rahmen, und weiter: "... und einem Lenker..." dass der Rahmen durch den Lenker erweitert wird? usw.[...]

onkeydown

Funktioniert auch sofort!
Jetzt noch die Grafiken einbinden!

- - - Aktualisiert - - -

gibt es eine smarte Lösung für das zuweisen der Grafiken?
Ich würde jetzt einfach einen if else block nutzen um das array nach den entsprechenden Komponenten zu durchsuchen und dann eine Ausgabe zu erzeugen!
 
Die Grafik habe ich:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<title>Textanalyse</title>
	<head>
		<script type="text/javascript">
			function textanalyse(textarea) {
				var words = ["pedale", "rahmen", "lenker", "kette", "kettenblatt", "reifen", "bremsen", "sattel"];
				var value = document.formular.eingabe.value;
				var valueS = value.toLowerCase().split(/\b/);
				var foundWords = words.filter(function(word){
					return valueS.indexOf(word) !== -1;
				});
				document.getElementById("ergebnis").innerHTML = foundWords.length;
				var bild="";
				for (var i=0; i<foundWords.length; i++){
					if(foundWords[i]=="rahmen"){
						bild = bild+"<div id='bild1'><img src='Grafiken/rahmen.GIF' width='20%'></div>";
					}else if(foundWords[i]=="sattel"){
						bild = bild+"<div id='bild1'><img src='Grafiken/sattel.GIF' width='20%'></div>";
					}else if(foundWords[i]=="kette"){
						bild = bild+"<div id='bild1'><img src='Grafiken/kette.GIF' width='20%'></div>";
					}else if(foundWords[i]=="kettenblatt"){
						bild = bild+"<div id='bild1'><img src='Grafiken/kettenblatt.GIF' width='20%'></div>";
					}else if(foundWords[i]=="lenker"){
						bild = bild+"<div id='bild1'><img src='Grafiken/lenker.GIF' width='20%'></div>";
					}else if(foundWords[i]=="sattel"){
						bild = bild+"<div id='pedale'><img src='Grafiken/pedale.GIF' width='20%'></div>";
					}else if(foundWords[i]=="reifen"){
						bild = bild+"<div id='bild1'><img src='Grafiken/reifen.GIF' width='20%'></div>";
					}
				}
				document.getElementById("bild").innerHTML = bild;
			}
		</script>
		<STYLE type=text/css>
			#bild1 {
				position:absolute; top:10cm; left:1cm; z-index:1;
			}
		</STYLE> 
	</head>
	<body>
		<form name="formular">
			<table border="0" cellpadding="10" cellspacing="10" width="700">
				<tr>
					<td>
						Beschreibe welche Bestandteile ein Fahrrad in seiner spartanischsten Form hat:
						<br><br>
						<textarea name="eingabe" cols="50" rows="10" onkeydown="textanalyse(document.formular.eingabe)" placeholder="Bitte den Text eingeben"></textarea>
					</td>
				</tr>
				<tr>
					<td>
						<br><br><span id="ergebnis">hier</span><br>
						<span id="bild"></span>
					</td>
				</tr>
			</table>
		</form>
	</body>
</html>

Funktioniert auch alles gut!
Wie kann ich unter die Grafik einen Fortschrittsbalken mit Prozent Angabe machen?

Und wie binde ich am Besten Doppelnennungen ein?

Also z.b. Das Kettenblatt oder Die Kettenblätter sollen beide gelten aber nicht als zwei Punkte gezählt werden!
 
Also z.b. Das Kettenblatt oder Die Kettenblätter sollen beide gelten aber nicht als zwei Punkte gezählt werden!
Ich täte das im Array in beiden Varianten hinzufügen und dann für die Spezialfälle per if-Abfrage gegebenenfalls den Counter nicht erhöhen, falls davor schon ein Treffer unter dem jeweiligen anderen Element gefunden wurde. Aber es gibt wahrscheinlich noch elegantere Lösungen...

PS: zu
HTML:
<STYLE type=text/css>
		#bild1 {
			position:absolute; top:10cm; left:1cm; z-index:1;
		}
</STYLE>
Die Großschreibung von Elementen und Attributen in HTML ist zwar erlaubt, aber ungebräuchlich. Wenn, dann solltest du aber einen Stil beibehalten, und nicht Groß- und Kleinschreibung vermischen.
Übrigens ist das type-Attribut nicht valide, es fehlen Anführungszeichen. Lass es einfach gleich weg; es genügt vollkommen, einfach nur <style></style> schreiben!
 
@Julian
Danke!
Die if-Schleifen habe ich noch nicht berücksichtigt... habe mich jetzt nur um die Form gekümmert...
Ich Lade einfach mal den Code hoch, selbst wenn Ihr die Bilder nicht nutzen könnt...
Soweit bin ich jetzt:
Code:
<!DOCTYPE html>
<html lang="de">
	<!– jsProgressBarHandler prerequisites : prototype.js –>
		<script type="text/javascript" src="js/prototype/prototype.js"></script>
	<!– jsProgressBarHandler core –>
	<script type="text/javascript" src="js/bramus/jsProgressBarHandler.js"></script>

	<title>Textanalyse</title>
	<head>
		<script type="text/javascript">
		
		/*check onoffswitch*/
			function checkOnOfSwitch(){
				var hilfe = document.getElementsByName('onoffswitch');
					for (var i = 0, length = hilfe.length; i < length; i++){
						if(hilfe[i].checked){
							var bildHilfe = "<div id='bild1'><img src='Grafiken/hilfe.GIF' width='65%'></div>";
							
						}else{
							var bildHilfe = "";
						}
					}
				document.getElementById("bildHilfe").innerHTML = bildHilfe;
				}
		/*textanalyse*/		
			function textanalyse(textarea) {
				var bild ="";
				var words = ["pedale", "rahmen", "lenker", "kette", "kettenblatt", "reifen", "speichen", "sattel", "kurbel", "gabel"];
				var value = document.formular.eingabe.value;
				var valueS = value.toLowerCase().split(/\b/);
				var foundWords = words.filter(function(word){
					return valueS.indexOf(word) !== -1;
				});
				for (var i=0; i<foundWords.length; i++){
					if(foundWords[i]=="rahmen"){
						bild = bild+"<div id='bild1'><img src='Grafiken/rahmen.GIF' width='65%'></div>";
					}else if(foundWords[i]=="sattel"){
						bild = bild+"<div id='bild1'><img src='Grafiken/sattel.GIF' width='65%'></div>";
					}else if(foundWords[i]=="kette"){
						bild = bild+"<div id='bild1'><img src='Grafiken/kette.GIF' width='65%'></div>";
					}else if(foundWords[i]=="kettenblatt"){
						bild = bild+"<div id='bild1'><img src='Grafiken/kettenblatt.GIF' width='65%'></div>";
					}else if(foundWords[i]=="lenker"){
						bild = bild+"<div id='bild1'><img src='Grafiken/lenker.GIF' width='65%'></div>";
					}else if(foundWords[i]=="pedale"){
						bild = bild+"<div id='bild1'><img src='Grafiken/pedale.GIF' width='65%'></div>";
					}else if(foundWords[i]=="reifen"){
						bild = bild+"<div id='bild1'><img src='Grafiken/reifen.GIF' width='65%'></div>";
					}else if(foundWords[i]=="gabel"){
						bild = bild+"<div id='bild1'><img src='Grafiken/gabel.GIF' width='65%'></div>";
					}else if(foundWords[i]=="kurbel"){
						bild = bild+"<div id='bild1'><img src='Grafiken/kurbel.GIF' width='65%'></div>";
					}else if(foundWords[i]=="speichen"){
						bild = bild+"<div id='bild1'><img src='Grafiken/speichen.GIF' width='65%'></div>";
					}
				}
				document.getElementById("bild").innerHTML = bild;
				var prozent = foundWords.length*10;
				var bar = document.getElementById('progressBar');
				var status = document.getElementById('status');
				document.getElementById("status").innerHTML = prozent+"%";
				bar.value = prozent;
			}
		</script>
		<STYLE>
			body {
				width: 500px;
				margin: 0 auto;
			}
			html, body {height: 100%;}
			#abstand {
				height: 25%;
				margin-bottom: -14em;
				width: 1px;
				float: left;
			}
			#content {
				height: 50em;
				clear: left;
				position: relative;
				width: 33em;
				margin: 0 auto;
			}
			#bild1 {
				position:absolute; top:12cm; left:1cm; z-index:1;
			}
		
		
		<!--/*onOffSwitch*/-->
			.onoffswitch {
				position: relative; width: 51px;
				-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
			}

			.onoffswitch-checkbox {
				display: none;
			}

			.onoffswitch-label {
				display: block; overflow: hidden; cursor: pointer;
				border: 2px solid #999999; border-radius: 36px;
			}

			.onoffswitch-inner {
				display: block; width: 200%; margin-left: -100%;
				-moz-transition: margin 0.3s ease-in 0s; -webkit-transition: margin 0.3s ease-in 0s;
				-o-transition: margin 0.3s ease-in 0s; transition: margin 0.3s ease-in 0s;
			}

			.onoffswitch-inner:before, .onoffswitch-inner:after {
				display: block; float: left; width: 50%; height: 13px; padding: 0; line-height: 13px;
				font-size: 12px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
				-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
			}

			.onoffswitch-inner:before {
				content: "ON";
				padding-left: 10px;
				background-color: #2FCCFF; color: #FFFFFF;
			}

			.onoffswitch-inner:after {
				content: "OFF";
				padding-right: 10px;
				background-color: #EEEEEE; color: #999999;
				text-align: right;
			}

			.onoffswitch-switch {
				display: block; width: 8px; margin: 2.5px;
				background: #FFFFFF;
				border: 2px solid #999999; border-radius: 36px;
				position: absolute; top: 0; bottom: 0; right: 34px;
				-moz-transition: all 0.3s ease-in 0s; -webkit-transition: all 0.3s ease-in 0s;
				-o-transition: all 0.3s ease-in 0s; transition: all 0.3s ease-in 0s; 
			}

			.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
				margin-left: 0;
			}

			.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
				right: 0px; 
			}
		</STYLE> 
	</head>
	<meta charset="UTF-8" />
	<body>
		<div id="abstand"></div>
		<div id="content">
		<form name="formular">
			<table border="0" cellpadding="10" cellspacing="10" width="415">
				<tr>
					<td>
						<span style="font-size:2em"><b>Textanalyse</b></span><br>
						Beschreiben Sie mit einem kleinen Text, welche grundlegenden Elemente
						an einem Fahrrad verbaut sind. Wenn Sie eine kleine Hilfestellung benötigen 
						aktivieren sie diese bitte über die entsprechende Schaltfläche. <br>
						<b>Hilfestellung:</b>
						
						<div class="onoffswitch" style="margin-left:1em">
							<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" onclick="checkOnOfSwitch()"/>
							<label class="onoffswitch-label" for="myonoffswitch">
								<span class="onoffswitch-inner"></span>
								<span class="onoffswitch-switch"></span>
							</label>
						</div><br>
						<span style="font-size:0.8em;"><i><b>Bitte Beachten!</b></i></span><br>
						<span style="font-size:0.8em; margin-left:1em;"><i>Verneinungen werden nicht berücksichtigt...</i></span>
						
						<textarea name="eingabe" cols="50" rows="10" onkeydown="textanalyse(document.formular.eingabe)" placeholder="Bitte den Text eingeben"></textarea>
						<progress id="progressBar" value="0" max="100" style="width:420px;"></progress><br>
						Sie haben <span id="status">0%</span> von 100% erreicht!
					</td>
				</tr>
			</table>	
			<span id="bild"></span>
			<span id="bildHilfe"></span>
		</form>
		</div>
	</body>
</html>
 
Hallo, gibt es eine Möglichkeit eine textarea dynamisch zu gestallten?
Also wenn ich beispielsweise mehrere Begriffe schon abgehandelt habe, dann eine Anzeige im Textfeld zu generieren welche hinweise auf die noch fehlenden Begriffe gibt?
 
Hallo,

was müsste ich hier denn ändern um die fehlenden Wörter zu erhalten?
Code:
function auswertung(textarea){
				var value = document.formular.eingabe.value;
		/*Nach Wörtern suchen*/
				var valueS = value.toLowerCase().split(/\b/);
				var foundWords = words.filter(function(word){
					return valueS.indexOf(word) !== -1;
				});
				return foundWords;
			}

hmmm, hatte == -1 schon Probiert, aber wohl einen Fehler dabei gemacht...
Ich habe die Lösung als ;)

Aber wie überprüft man am Besten, ob ein Fließtext eingegeben wurde und nicht nur die geforderten KeyWords?
 
Zuletzt bearbeitet:
Zurück
Oben