Canvas -

[mhz]

Hallo zusammen!

Ich bin ganz neu hier im Forum.

Um meinen Schülern im Homeschooling bestimmte Inhalte besser zu visualisieren, bin ich für mein Projekt (https://www.kramlade.de/?Pruefe-dich-selbst-und-lerne/Deutsch/Schwierigere-Uebungen/Satzbau/Bestimmungen-3) auf die Möglichkeiten mit <canvas> gestoßen. Soweit sind mir auch die Anpassungen bereits gelungen, dass der verwendete Text gut lesbar und nicht verzerrt dargestellt wird.

Leider sind die verwendeten Linien (beim Code von Chtiwi Malek) nicht wie mit dem Lineal gezogen (https://tutor-test.cmsimplexh.de/?Canvas-Test-3); er hat allerdings die Auswahl von unterschiedlicher Strichdicke und eine Auswahl von Farben.

Bei stackoverflow fand ich eine Installation (https://tutor-test.cmsimplexh.de/?Canvas-Test-4-Strecke), die das kann, allerdings nur in rot. Was ich allerdings bisher nicht hinbekommen habe, ist eine Kombination von beiden.

Bisher hatte ich keinen Erfolg, der sich dadurch äußerte, dass entweder das hinterlegte Bild bein canvas nicht mehr angezeigt wird und/oder ich nicht mehr zeichnen kann.

Kann mir bitte jemand helfen. Ich bin für jeden Vorschlag dankbar!

Viele Grüße Michael

[Matthias Scharwies]

Ich bin ganz neu hier im Forum.

Herzlich willkommen bei SELFHTML!

Um meinen Schülern im Homeschooling bestimmte Inhalte besser zu visualisieren, bin ich für mein Projekt (https://www.kramlade.de/?Pruefe-dich-selbst-und-lerne/Deutsch/Schwierigere-Uebungen/Satzbau/Bestimmungen-3) auf die Möglichkeiten mit <canvas> gestoßen. Soweit sind mir auch die Anpassungen bereits gelungen, dass der verwendete Text gut lesbar und nicht verzerrt dargestellt wird.

in Canvas ist der Text ein Bild. Hast du das in canvas eingegeben und so formatiert?

Soll das ein Quiz werden, das Schüler dann selbst bearbeiten sollen und wo dann die Position des roten/grünen Strichs ausgewertet wird?

Evtl. könntest du das mit HTML oder mit SVG machen. Der normale Text könnte mit der Maus selektiert und über den :selection-Selektor formatiert werden:

::selection {
   background-color: white;
  text-decoration: underline;
  text-decoration-color: red;
}

Leider sind die verwendeten Linien (beim Code von Chtiwi Malek) nicht wie mit dem Lineal gezogen (https://tutor-test.cmsimplexh.de/?Canvas-Test-3); er hat allerdings die Auswahl von unterschiedlicher Strichdicke und eine Auswahl von Farben.

Bei stackoverflow fand ich eine Installation (https://tutor-test.cmsimplexh.de/?Canvas-Test-4-Strecke), die das kann, allerdings nur in rot. Was ich allerdings bisher nicht hinbekommen habe, ist eine Kombination von beiden.

Vom oberen Beispiel das select-Menü mit den Farben ins untere Beispiel übernehmen, so dass die Schüler das auswählen können. Da müssen dann ein paar Variablen angepasst werden.

Kann mir bitte jemand helfen. Ich bin für jeden Vorschlag dankbar!

Beschreibe noch mal genau für was du das suchst: als Präsentation, die die Schüler anschauen sollen oder eben als Selbstlern-Quiz für die Schüler.

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo mhz,

Canvas ist ein Problem, keine Lösung. Wie willst Du denn die Unterstreichungen überprüfen? Und wie soll ein Schüler mit Tablet die Aufgabe lösen? Dieses Widget reagiert nicht auf Touch (zumindest nicht auf die Touch-Simulation in meinem Browser)?

Löse Dich vom Blatt Papier. Das ist das Internet. Es gibt andere Möglichkeiten. Und es gibt andere Schwierigkeiten.

Eine solche Seite muss bedienbar sein. Das hat zwei Aspekte.

(1) Eingabe. Die Aufgabe sollte idealerweise mit Maus, mit Touchbildschirm und mit Tastatur lösbar sein. Tastatur würde ich auf Prio 3 setzen, aber Maus und Touch ist ein MUSS.

(2) Ausgabe. Du kennst deine Schüler besser als ich, und weißt daher, ob Du Kinder mit Sehschwierigkeiten hast. Im Allgemeinen muss ein solche Seite vorlesefähig sein, d.h. ein Screenreader sollte die Inhalte akustisch wiedergeben können. Wenn die Kinder deiner Klasse diesen Bedarf nicht haben, kann man das zurückstellen, aber Text im Canvas ist definitiv eine Hürde auf diesem Weg und daher nicht die beste Lösung.

Und dann sollte die Antwort eingereicht werden können, zwecke Überprüfung. Durch Dich, oder durch den Computer. Eine Canvas-Unterstreichung ist dafür ungeeignet. Das müsstest Du in eine Grafik umwandeln und die Grafik hochladen. Das geht, ist aber müüüühsam.

Mein Vorschlag wäre, aus jedem Wort einen Button zu machen. Den kann man per Maus, per Touch und per Tastatur anklicken. Per JavaScript kannst Du dafür sorgen, dass der Button in einer "Ringschaltung" die Klassen "verb", "nomen" oder keine davon bekommt. Per CSS sorgst Du dafür, dass ein solcher Button einen roten oder blauen unteren Rand bekommt. Jeder Button bekommt noch einen name, den einstellten Wert speicherst Du im value-Attribut. Wenn die Seite auch vorlesefähig sein soll, braucht man hier noch etwas Arbeit mit Aria-Attributen - ich bin aber nicht so sicher, ob sich eine solche Aufgabe für Blinde überhaupt eignet oder ob die eine ganz andere Didaktik brauchen.

Wie auch immer - und dann eintragen in eine Tabelle? Wozu? Steck den Text in ein Form, und mach einen Submit-Button drunter. Fertig. Die Buttons werden dann mit name und value zum Server geschickt.

Je nachdem, wie gut Du in JS bist, kannst Du die Erzeugung der Buttons sogar aus Fließtext automatisieren. Wenn nicht, ok, dann von Hand.

Die Überprüfung sollte aber am Server erfolgen, nicht per JavaScript. Je nachdem, wie fit deine Kiddies sind, gucken sie sonst mal kurz in den Seitenquelltext und lesen die Lösung ab.

So könnte das aussehen

Rolf

[Felix Riesterer]

Lieber Rolf,

So könnte das aussehen

ich stimme Dir vorbehaltlos zu. Vor ein paar Jahren habe ich ein Tool gebastelt, mit dem man im Lateinunterricht und dem Smartboard (dessen Stift man auch als Mausersatz verwenden kann, denke Grafiktablett) Satzteile markieren und ihrer Bedeutung nach auszeichnen kann. Ob das mit Touch auch funktioniert habe ich nie getestet, weil es für diesen Speziellen Einsatzzweck gedacht war.

Liebe Grüße

Felix Riesterer

[Tabellenkalk]

Hallo,

Ob das mit Touch auch funktioniert habe ich nie getestet,

Jein. Mit etwas Glück lässt sich ein (in Zahlen: 1) Buchstabe markieren, aber die meiste Zeit schießt das normale Kontextmenü quer…

Gruß
Kalk

[Rolf B]

Hallo Felix,

wow, auch nicht schlecht. Es ist zwar etwas buggy - aber da Du sicher den Bill Gates^[1] machen wirst wenn das Ding benutzt wird, dürfte das nicht auffallen.

Aber da hast Du sicher auch mehr Zeit reingesteckt als die halbe Stunde, die ich in das Fiddle investiert habe…

Und nein, Touch funktioniert nicht. "touchstart" ≠ "mousedown".

Rolf

---

1. Ich finde keine Quelle, habe aber vor Urzeiten mal gelesen, dass Gates auf einer Messe Word 5 (für DOS) vorstellte. Er machte rum, tat, präsentierte, es lief alle super und die Zuschauer waren begeistert. Dass das Programm zu dem Zeitpunkt noch eine kilometerlange Liste schwerer Fehler hatte, fiel keinem auf. Weil Gates genau wusste, was er nicht tun durfte. ↩︎

[JürgenB]

Hallo,

Und nein, Touch funktioniert nicht. "touchstart" ≠ "mousedown".

mein Tipp: Pointer-Events. Da gibt es bei Einfach-Touch keinen Unterschied zwischen Maus und Touch. Hier und hier habe ich mich mit dem Thema beschäftigt.

Gruß
Jürgen