0 votes
in SoSci Survey (dt.) by s214298 (175 points)

Guten Tag,

bei Anwendung der Zeichenfläche auf dem Tablet verschiebt sich die gesamte Webseite, wenn ich etwas einzeichnen möchte. Dadurch kann man mit der Zeichenfläche nur eingeschränkt arbeiten - Punkte können z. B. gesetzt, Flächen jedoch nicht schraffiert werden. Auf dem PC/Laptop funktioniert alles einwandfrei.

Übersehe ich etwas bei der Umsetzung auf dem Tablet? Gibt es eine Möglichkeit, die Anwendung der Zeichenfläche zu optimieren?

Vielen Dank!

by SoSci Survey (304k points)
Vermutlich muss nur die Funktion zum Scollen durch Wischen deaktiviert werde. Ich prüfe mal, welche Änderungen an der Frage dafür notwendig sind.
by s214298 (175 points)
Danke für die Hilfe! Geben Sie mir dann über einen Kommentar zu dieser Frage ein Update oder soll ich demnächst noch einmal nachfragen?
by SoSci Survey (304k points)
edited by SoSci Survey
Ich habe die Standard-Zeichenfläche auf einem Android-Tablet und einem Apple-Smartphone gerade nochmal getestet, und kann das Problem nicht replizieren. Dort ist das Scrollen auf der Seite nur außerhalb der Zeichenfläche möglich, in der Zeichenfläche wird korrekt gezeichnet.

Tritt das Problem auf Ihrem Testgerät mit folgendem Fragebogen auf?
https://www.soscisurvey.de/ct23/

Unter der Zeichenfläche ist extra weißer Platz, damit man im Prinzip scrollen kann.
by s214298 (175 points)
edited by s214298

Ja, über diesen Fragebogen klappt es. Leider aber über meinen immer noch nicht.
Anbei ein Pretest-Link: https://s2survey.net/personenwahrnehmung/?act=2CepkiOImntCk4hSFMwUiUYD

Könnte das ggf. mit dem Hintergrundbild zusammenhängen?

Edit: Habe den Pretest-Link aktualisiert.

by s214298 (175 points)
Konnten Sie bereits einen Blick auf den Pretest-Fragebogen werfen? Danke!
by SoSci Survey (304k points)
Auf einem Android-Tablet lud das Bild bei meinem Test gar nicht erst. Außerdem wird mir im regulären browser eine Fehlermeldung angezeigt, dass es in dieser Zeile kein ctx.strokeLine() gibt:

    ctx.strokeStyle = 'blue';
    ctx.strokeLine(10, 10, 100, 100);

Diese Zeile ist in der ursprünglichen Zeichenfläche-Vorlage nicht enthalten. Entfernen Sie diese bitte mal, dann teste ich nochmal, ob das Bild auf dem Mobilgerät dann korrekt lädt.

Setzen Sie außerdem das img.src = ... unter den img.onload-Block. Es kann sonst sein, dass das onload nicht mehr auslöst.
by s214298 (175 points)
Komisch, bei mir hat es bisher wenigstens das Bild auf dem Android-Tablet geladen...
Ich habe die Änderungen im HTML-Code vorgenommen. Klappt es jetzt?
by SoSci Survey (304k points)
Die blaue Strichfarbe können Sie behalten, nur die Zeile mit strokeLine() war falsch - und vermutlich auch nur ein Test-Code von Ihnen.

Nun kann ich das Scroll-Problem auf dem Tablet nachvollziehen. Antwort siehe unten.

1 Answer

+1 vote
by SoSci Survey (304k points)

In der SoSci-Zeichenfläche-Vorlage finden Sie gleich in der zweiten Zeile den Code touch-action: none.

<canvas id="%q.id%canvas" width="300" height="300" style="border: 1px solid #CCCCCC; touch-action: none;"></canvas>

Dieser ist dafür verantwortlich, dass Ihre Zeichenfläche auf Touch-Geräten nicht herumscrollt. Bitte ergänzen Sie diesen in Ihrem angepassten Code.

by s214298 (175 points)
Es hat geklappt! Herzlichen Dank für die schnelle Hilfe!

Willkommen im Online-Support von SoSci Survey.

Hier bekommen Sie schnelle und fundierte Antworten von anderen Projektleitern und direkt von SoSci Survey.

→ Eine Frage stellen


Welcome to the SoSci Survey online support.

Simply ask a question to quickly get answers from other professionals, and directly from SoSci Survey.

→ Ask a Question

...