Wie erfassen Sie Benutzereingaben im Zusammenhang mit mathematischen Brüchen? Angenommen, ich möchte ein einfaches Quadrat präsentieren und den Benutzer bitten, 3/4 eines Quadrats auszuwählen. Welche Art von UI-Steuerelement wir zuerst verwenden sollten, stellt alle ein Quadrat dar (mit 4 gleichen Blöcken innerhalb) und einen Mechanismus, um Benutzereingaben zu erfassen.
Angenommen, Sie möchten eine 1 Meter lange Skala zeichnen, und Sie haben alle 10 cm Markierungen (z. B. 10, 20, 30, 90, 100). Wir möchten, dass der Benutzer 40 cm auf der Skala zeichnet. Welche Arten von UI-Steuerungen sind verfügbar, die uns dabei helfen, solche Eingaben zu zeichnen und die Antwort der Schüler zu erfassen.
Gibt es Werkzeuge oder Bibliotheken, mit denen wir solche Lösungen erstellen können? Unsere Umgebung basiert auf (java, richfaces, jquery ...)
Es ist zwar möglich, HTML- oder jQuery-Steuerelemente zu hacken, um Klicks auf Rechtecke zu zeichnen und zu erkennen. Wenn Sie jedoch eigene Grafiken mit Schriftarten, Symbolen, Skalierung und Drehung zeichnen, müssen Sie schließlich zu a wechseln Grafik-API. Ich schlage vor, das HTML5 Canvas -Element zu verwenden.
Canvas ist die von W3C zugelassene Methode zum Hinzufügen interaktiver Grafiken zu Webseiten und wird von allen modernen Browsern unterstützt, einschließlich IE mit einem Plug-in.
Ein kostenloses Kapitel aus Eintauchen in HTML5 zeigt, wie Sie ein spielbares HTML5-Spiel mit nur JavaScript in einem Canvas-Element erstellen können.
Bei Frage 1 können Sie die Interaktionen der jQuery-Benutzeroberfläche für Ideen untersuchen, insbesondere die resagierbare , Selectable und Sortierbar .
Es hängt wirklich davon ab, wie Sie die Frage präsentieren möchten. Sie können beispielsweise ein Resizable -Steuerelement für ein Quadrat festlegen und die Breite und Höhe proportional anpassen. Oder Sie könnten ein Quadrat in mehrere Seletable Regionen (z. B. kleinere Quadrate) aufteilen.
Alternativ können Sie eine umständliche Benutzeroberfläche mit einer vordefinierten Liste von Schaltflächen und Eingabefeldern verwenden, auf die Sie klicken können. Das ist besser für ein Publikum, das nicht an höhere akademische Arbeit gewöhnt ist.
Für die Slider Frage würde ich verwenden: Google-Diagramme oder rapheal JS
Für die zweite Frage würde ich das gleiche tun und den jQuery-Bereich-Schieberegler verwenden, wie Haim vorgeschlagen hat.
Für die erste Frage gehe ich davon aus, dass Sie dies auf andere Formen als nur ein Quadrat ausdehnen möchten. Sie möchten vielleicht, dass der Benutzer 7/8 einer Pizza oder Ähnliches wählt. jQuery selectables und resizables funktionieren möglicherweise für ein quadratisches Problem, wären aber für eine Pizza (oder ähnliches) sehr schwierig zu implementieren (und zu verwenden). Ich würde das html <map> -Tag ( hier bei W3schools ) verwenden und einen javacsript-Befehl an jeden Bereich binden innerhalb der Karte wird geklickt.
Wenn Sie zum Beispiel eine Karte interaktiv mit Ссылка (oder ähnlich) erstellt haben, dann binden Sie jeden Bereich an etwas wie:
%Vor%wo
%Vor% Wenn das Formular gesendet wird, senden Sie einfach pizza.sum() ! Zugegeben, das kann etwas eleganter in eine Funktion geschrieben werden, die das Markieren der ausgewählten Bereiche beinhaltet, aber: -)