Freies speedreading program erstellen

Computer: Software & Programmierung JavaScript & Script-Sprachen
#1

Hallo Javascript Experten,

ich möchte ein freies Speedreading programm erstellen. Ich habe einen Code kopiert und wollte diesen erst ändern. Da ich js nicht sehr gut kenne, habe ich erst später bemerkt dass der kopierte Code verschlüsselt ist.

Jetzt möchte ich eine verbesserte freie Version basteln.
Die alte aus dem Internet gefundene sieht so aus:
http://www.bestaltmed.at/speedreading/index.php
nachdem man einen Text einfügt kann man durch den Knopf spreed! das Lesen starten.

Ich möchte das Programm aber so aufbauen:
http://www.bestaltmed.at/imagines/simplified.pdf

Mit dem js komm ich jedoch nicht vorran hier wäre der Ordner dafür:
http://www.bestaltmed.at/SpeedreadingII/js/speed.pac…

Und auf diesen Link kann man die Änderungen sehen:
http://www.bestaltmed.at/SpeedreadingII/index.php

Jetzt stellt sich die Fragen:

  • Wie kann ich das erste div(wrap) schließen und den eingefügten Text im Player sichtbar machen?
  • Wie kann ich das Div(Player) an den browser anpassen?
  • Wie kann ich den Text grau färben und die zu lesenden Wörter dann in schwarz anzeigen lassen?
  • Wie kann ich die Wörter pro Minute oder die Wortmenge mit den Pfeilen auf der Tastatur regulieren?

Wie gesagt ich bin Anfänger für JS und es war mir echt eine große Hilfe, wenn mir jemand sagen könnte wie ich die eine oder andere Aufgabe lösen könnte?

Lg,
Chris

#2

Hallo Chris,

wenn es darum geht, dass du interaktiv mit JavaScript HTML-Elemente steuern möchtest, ob per Tastatur oder sonstigen Ereignissen ist egal, empfehle ich dir die Funktionsbibliothek von jQuery.

Damit hast du ein Werkzeug, mit dem du dich leicht in JavaScript zurechtfinden kannst. Du wirst aber nicht drum herum kommen dich mit JavaScript auseinander zusetzen, da du die Clientinteraktivität benötigst und über das Forum alleine, bestimmt nicht den gesamten Code bekommst. :wink:

Grüße
Ingo

#3

Danke Ingo,

ich versuch über http://www.w3schools.com/js/default.asp mir die Funktionen anzulernen.

Wo könnte ich die jquery functionen lernen?
Man kann die Elemente über JS mit getElementById() abrufen, aber wie funktionert das mit jqnodes?

Lg,
Chris

#4

Hallo Chris,

bei jQuery kannst du genauso darauf zugreifen.
Es gibt hier Selektoren, die stark vereinfachen auf Elemente zuzugreifen und es gibt vordefinierte Funktionen.

Lernen kannst du das auf jquery.com. Gibts ne recht große Dokumentation.

zum Beispiel würde: $("#deinelement).fadeOut();
das Element mit der id „deinelement“ ausblenden lassen.

$(„div“).fadeOut(); würde sogar alle div-Tags ausblenden.

Mehr findest du wenn du Selector und jQuery in Google eingibst.
Generell findest du sehr viel dazu im Netz.

Grüße
Ingo

#5

Hallo,
Habe ich dich richtig verstanden, dass du eine Webseite erstellen möchtest, die dir einen eingegebenen Text vorspricht? Ich denke, da ist für einen JS-Anfänger ein bisschen viel verlangt. Möchtest du JQeuery benutzen?

  1. Antwort:
    Vergib dem Div eine eindeutige ID. Dann kannst du mit DOM document.getElementById(„id, des Elements“).innerHTML= „neuer Inhalt“;
    den Inhalt verändern/einfügen. In Jquery auch mit
    $("#id, des Elements").html(„neuer Inhalt“);
    möglich.

zur 2. Frage: Ich verstehe nicht genau, was du meinst. Willst du die Hintergrund-Farbe anpassen?

3.) Ich würde den gerade vorzulesenten Text eine div mit Klasse Klasse geben. In CSS dann den ganzen Text grau einfärben (mit .not(„Klassenname“) ) und das innerhalb der Klasse schwarz.

4.Antwort weiss ich nicht auswendig es ist aber möglich.

m.f.G.:Thomas131

#6

Hallo Thomas,

danke für die AW.
Habe eine Frage zur ersten Frage: Wie kann ich den Inhalt an eines divs zu einen zweites div weitergeben?
Hab dazu noch nichts gefunden.

Lg,
Chris

#7

Hallo,
Du machst es dir aber sehr einfach.
document.getElementById(„id, des 2. Elements“).innerHTML= document.getElementById(„id, des 1. Elements“).innerHTML;

m.f.G.:Thomas131

#8

Hey Chris,

ich kann Dir aus Zeitgründen leider momentan nicht helfen. Ggf. könntest Du Dich mal etwas intensiver in jQuery und jQueryUI einarbeiten. Dann verstehst Du automatisch auch die JavaScripte aus der bereits genutzten Software.

Liebe Grüße
Tim

#9

Hallo Chris, ich nochmal…:smile:
Nun einen Fortschritt hast Du ja nun schon hinter dir. Ich verweise da nochmal auf das Schript in .txt…so dass ich mir den im Quelltext ansehen und es besser nachvollziehen kann.

Bei den Fortschrittsbalken denke bitte daran dass Du dafür immer 2 Grafiken benötigst (Beispiel: Weiß und Schwarz). Text mit grauem Hintergrund: denke dabei an die einfache HTML. Du möchtest dass der Text mit Grau hinterlegt ist. Das kann man via CSS lösen. Ich glaube dass Du für deine Seite dafür eine spezielle JS-Anweisung benötigst. Die solltest Du extra schreiben und dann als .js speichern. Aber genau kann ich das nur behaupten wenn ich dein Script (all inklude) sehe.

LG from MJE