Hi Chris,
noch mal was anderes, es geht doch so viel einfacher!
Es wird ein Text eingegeben und gehen wir mal davon aus, dass dieser Text die Leerzeichen als Wort-Trennung hat. Dann kannst Du in PHP doch mittels $_WORDS = explode(" ", $_REQUEST[„input_text“]); Befehl die an das Script übergebene Zeichenkette in in ein Array von Wörtern überführen (Satzzeichen mal außen vor gelassen). Danach hast Du in $_WORDS ein Array bestimmter Länge:
$count_words = count($_WORDS);
und kannst mittels Schleifendurchlauf alle Wörter in ein einzelnes SPAN Element mit bekannter Klassenstruktur stecken:
foreach($_WORDS as $i => $word) {
$_OUTPUT[$i] = „“ . $word . „“;
}
und hast damit dann ein Array von in Span eingefassten Wörtern, die eine bestimmte Klasse haben und ebenso eine jeweilige ID nach dem Muster „word“
Das ganze gibst Du dann wieder aus, indem Du das Array in eine Zeichenkette zurück konvertierst:
echo implode(" ", $_OUTPUT);
Das Ergebnis sollte sein:
Hallo
Welt
Das
ist
ein
Text
Im JavaScript Teil nutzt Du dann jQuery, um den Selector zu berechnen (ggf. kann PHP die notwendigen Inrofmationen sogar schon in ein versecktes Formularfeld schreiben, weil die Infos ja eh im Array bekannt sind). Aber hier mal das JavaScript mit jQuery (angenommen, das Script hat anhand der Wort-Anzahl und der gewünschten Anzahl der Wörter pro Minute errechnet, man müsse eine Pause von vielleicht 900 Millisekunden machen):
last_selected_word = null;
var set_active_word = function() {
if(last_selected_word == null) {
$(’#word0’).addClass(‚is-active-word‘);
last_selected_word = 0;
setTimeout(‚last_selected_word()‘, 900);
} else {
$(’.is-active-word’).removeClass(‚is-active-word‘).addClass(‚is-read-word‘);
last_selected_word++;
$(’#word’ + last_selected_word).addClass(‚is-active-word‘);
}
}
Wenn Du dann noch eine Prüfung einbaust, dass das setTimeout wieder aufgelöst wird, wenn die Anzahl der Wörter erreicht ist, dann bist Du schon durch.
Die CSS Klassen „readable_words“, „is-active-word“ und „is-read-word“ kannst Du dann ja entsprechend der momentanen Formatierung umsetzen, wobei ich es persönlich besser fände, wenn einfach nur der Text ganz hellgrau würde. Sonst stört das dunkle Grau so stark!
Gruß Tim
