Mehrere auf einer Seite platzierte Zeichenflächeninhalte übertragen und auszählen

Question

Bei der Nutzung des neuen Fragetyps "Zeichenfläche" würde ich gerne mehrere Zeichenflächen platzieren und bei Verlassen der Seite als Rückgabewert speichern, wie viele der Zeichenflächen befüllt worden sind.
Dabei wäre es vermutlich notwendig, zwischen "weiter zum nächsten Motiv" und "weiter zur nächsten Seite" zu unterscheiden, so dass erst bei Wechsel auf die nächste Seite die Anzahl der gespeicherten Motive gezählt wird.
Wie kann man das am Besten umsetzen?

Comments

Fangen wir einmal mit den mehreren Zeichenflächen an.

Könnten Sie bitte mal 4 Fragen "Einfache Zeichenfläche" anlegen und mit dieser Anleitung in einer 2x2 Tabelle platzieren: https://www.soscisurvey.de/help/doku.php/de:create:table-layout

Vorsicht - auf dem Smartphone wird das dann nicht sauber auf eine Seite passen. Wenn Sie Smartphone-Teilnehmer erwarten, müssten wir für die Platzierung ein Flexbox-Design verwenden.

Wenn das geklärt un umgesetzt ist, sehen wir uns den nächsten Schritt an.

Alternativ könnten Sie natürlich darüber nachdenken, einfach 4 Seiten mit jeweils einer Zeichenfläche zu bauen und den Knopf immer "Weiter zum nächsten Motiv" zu nennen. Außerdem würden Sie dann noch einen Knopf "Fertig" einbauen, der zu einer Seite ohne weitere Zeichenfläche springt.

---

Die Platzierung habe ich angelegt: https://www.soscisurvey.de/preferLU2019/?act=d5lkcPSSvjW77P0w6ilItPkW,
aber auch mal mit Flexbox versucht: https://www.soscisurvey.de/preferLU2019/index.php?i=Z2EF4YUK8ZAM&rnd=RTHH, denn das wäre mir das allerliebsten. Das sieht aber noch wüst aus, weil ich die Zeichenflächen nicht in die Container kriege.

Die Einzelseitenlösung finde ich nicht so gut, denn im Original Paper- u. Pencil-Bogen stehen sie auch auf einer Seite bereit.

---

Das mit dem Flexbox funktioniert nicht, weil Sie <p>-Elemente verwenden. Aber diese dürfen nur Text enthalten, keine Zeichenflächen o.ä.

---

Hab es nun mit <div> und der .col-Klasse versucht, kriege es aber leider nicht hin :-(

---

Danke ans Team. Eine Anleitung zum Thema "Zeichenflächen" soll in den nächsten Wochen verfasst und bereit gestellt werden.

Answer 1

Die Einzelseitenlösung finde ich nicht so gut, denn im Original Paper- u. Pencil-Bogen stehen sie auch auf einer Seite bereit.

Gutes Argument.

Wenn Sie die Zeichenfläche-Fragen erneut anlegen (ich habe die Vorlage nochmal ein Stück erweitert), und die folgende Zeile entfernen...

<button type="button" id="%q.id%btnSend">Fertig, Weiter</button>

... dann kümmert sich die Frage nun darum, dass beim "Weiter" die Daten übermittelt werden. Das funktioniert explizit auch mit mehreren solchen Fragen pro Seite.

Comments

> Als Dankeschön versuche ich mich demnächst mit einer Anleitung zu dem Thema "responsive Zeichenflächen" zu revanchieren...

Das wäre klasse, danke!

---

Leider klappt es mit der "Put"-Variable noch nicht ganz. Ich habe folgenden Code von oben verwendet:
$anzahl = (value('T201') == 2) + (value('T202') == 2) + (value('T203') == 2) + (value('T204') == 2);
put('T205_01', $anzahl);

In der erhobenen Zeile steht dann leider als Summe nur eine Null:
2     T201.000552.png |    2     T202.000552.png     | 2     T203.000552.png     | 2     T204.000552.png     | 0

Wo liegt der Fehler?

P.S.: Pretest-Link: https://www.soscisurvey.de/preferLU2019/?act=XZt68HCZ69PiGjjBdzgkIIR5

---

Was zeigt denn bitte die Debug-Information auf der Seite mit dem Summen-Code? https://www.soscisurvey.de/help/doku.php/de:create:debugging

---

Das hier auf Seite 21 vor dem Absenden:
 
[Information]    Interview gestartet (neue Nummer 563)
[Information]    Der Fragebogen base im Projekt preferLU2019 wird verwendet
[Verarbeitung]    Erstelle Fragebogen-Seite Nr. 21
[Information]    value("T201") = ""
[Information]    value("T202") = ""
[Information]    value("T203") = ""
[Information]    value("T204") = ""
[Information]    Die interne Variable T205_01 wird mit dem Wert 0 belegt.
[Inhalt]    Erstelle Frage T205
[Inhalt]    Erstelle Frage T201
[Inhalt]    Erstelle Frage T202
[Inhalt]    Erstelle Frage T203
[Inhalt]    Erstelle Frage T204

und das hier auf Seite 22 nach dem Absenden bei 4 vollgemalten Flächen:
[Information]    Interview Nummer 563 wird fortgesetzt
[Information]    Der Fragebogen base im Projekt preferLU2019 wird verwendet
[Verarbeitung]    Lese Antworten von Seite 21
[Information]    Die Verweildauer auf Seite 21 war 219 Sekunden
[Information]    Antwort auf T205_01 = 0
[Information]    Antwort auf T201 = 2
[Information]    Antwort auf T201x02 = T201.000563.png
[Information]    Antwort auf T202 = 2
[Information]    Antwort auf T202x02 = T202.000563.png
[Information]    Antwort auf T203 = 2
[Information]    Antwort auf T203x02 = T203.000563.png
[Information]    Antwort auf T204 = 2
[Information]    Antwort auf T204x02 = T204.000563.png
[Information]    Fragen bisher zu 100% vollständig beantwortet

ICH HABE ETWAS INTERESSANTES HERAUSGEFUNDEN: auf Seite 20 habe ich ja als Test die nicht-responsive Seite angelegt (https://www.soscisurvey.de/preferLU2019/?act=wXTw8N7C9UNHsSrkOwXhSeZK). Dort funktioniert das Addieren mit obigem Code:

2     | T201.000583.png  | -9       | -9     |      -9       || 1 |

Es hängt also offenbar irgendwie mit der gebastelten Responsive-Variante zusammen. Dort stimmt auch die Reihenfolge der Items bei Normal-Ansicht noch nicht) siehe https://www.soscisurvey.de/preferLU2019/?act=XZt68HCZ69PiGjjBdzgkIIR5. Diese ist aber, wie ich nun festgestellt habe, OBSOLET, weil sich nach der Layoutumstellung auch die Seiten ohne Flex-Container jetzt an das Format anpassen
Also nutze die Variante ohne Flexbox und das Problem ist offenbar gelöst :-)

---

Der PHP-Code muss auf Seite 22 - denn auf Seite 21 kann beim Addieren nur 0 herauskommen, da ist ja noch nichts gezeichnet. Aber dort steht - der Debug-Information zufolge - aktuell das value().

Was flex und Responsive angeht: Wenn Sie möchten, können wir da gerne nochmal einen Blick darauf werfen, wenn es noch hakt.