0 votes
in SoSci Survey (dt.) by s175898 (195 points)
edited by s175898

Ich habe eine recht komplexe Darstellung einer kombinierten Frage, die ich insbesondere für die mobile Ansicht etwas vereinfachen möchte. Es handelt sich dabei um insgesamt 3 Skalen die im Bezug auf unterschiedliche Items beantwortet werden sollen. Am Laptop sollen sie so erhalten bleiben wie bisher.
Das ist der aktuelle php Code hierfür:

question('FV01','gap=line','combine=FV02','gap=line','combine=FV03','gap=line');

html('...');pageCSS(' div.vert { height: 100px; width: 20px; overflow: hidden; position: relative; } div.vert > span { display: block; position: absolute; bottom: 0; width: 100px; height: 20px; text-align: left; transform: rotate(270deg) translate(-20px, 5px); transform-origin: 0 0; } ');

Für die mobile Ansicht auf dem Handy würde ich aber gerne nur zwei Fragen kombinieren und die dritte als extra Skala darunter einfügen. Ich habe mittlerweile einen php Code erstellen können, der mir die mobile Darstellung korrekt anzeigt. Allerdings wird mir diese derzeit auch am Laptop so angezeigt. Ein entsprechendes Frage Element "Gerät und vermittelte Variablen" ist wie in der Anleitung beschrieben auf Seite 1 eingefügt.
Hier ist der entsprechende php Code:

if (value('GR01_ScW') > 600) {question('FV01','gap=line','combine=FV02','gap=line','combine=FV03','gap=line'); html('...');pageCSS(' div.vert { height: 100px; width: 20px; overflow: hidden; position: relative; } div.vert > span { display: block; position: absolute; bottom: 0; width: 100px; height: 20px; text-align: left; transform: rotate(270deg) translate(-20px, 5px); transform-origin: 0 0; } ');} else question('FV01','gap=line','combine=FV02','gap=line'); html('...');pageCSS(' div.vert { height: 100px; width: 20px; overflow: hidden; position: relative; } div.vert > span { display: block; position: absolute; bottom: 0; width: 100px; height: 20px; text-align: left; transform: rotate(270deg) translate(-20px, 5px); transform-origin: 0 0; } '); question('FV03'); html('...');pageCSS(' div.vert { height: 100px; width: 20px; overflow: hidden; position: relative; } div.vert > span { display: block; position: absolute; bottom: 0; width: 100px; height: 20px; text-align: left; transform: rotate(270deg) translate(-20px, 5px); transform-origin: 0 0; } ');

Mein Problem ist allerdings, dass eigentlich unterschieden werden soll zwischen den unterschiedlichen Bildschirmgrößen. Das heißt am PC/ Laptop soll die dreier Kombi bleiben und am Handy erst zwei dann eine Skala so wie im vorangegangenen php Code angezeigt wird.

Durch die Aufteilung in zwei Fragen erhalte ich außerdem noch eine Fehlermeldung für mein offenes Eingabefeld bei sonstiges. Das müsste dann für die dritte Skala vorausgefüllt werden nehme ich mal an. Das falls jemand Angaben dazu macht, sie wie in der dreier Skalen Kombination auch in der dritte Skala für die identische Antwort tätigt.

Des Weiteren würde ich gerne bei fehlenden Antworten eine deutlichere Markierung einfügen. Alle Items (außer sonstiges) sind mit einer Antwortpflicht belegt. In der jetzigen Darstellung ist es allerdings sehr schwer zu erkennen, welche Frage nicht beantwortet wurde, wenn sie fehlt. Kann man die Markierung deutlicher machen? Die hellrote Schrift ist kaum zu unterscheiden von der schwarzen Schriftfarbe der anderen Items.

Noch eine letzte Frage:
Ist es möglich wie in einer Excel Tabelle die oberste Zeile mit den Skalen und dem Text über den Items festzustellen, so dass sie permanent sichtbar sind auch wenn man weiter runter scrollt?

Für den Fall das er gebraucht wird ist hier noch der Pretest Link zur entsprechenden Seite:
Pretest Link

Vielen Dank für Ihre Hilfe

Informations Update:
Vielen Dank für den Code. Dieser funktioniert auch erstmal. Allerdings zeigt er Frage 3 immer nochmal extra an. Das heißt wenn man von der Begrüßung aus den Fragebogen startet, erkennt er den Laptopbildschirm und zeigt mir die dreier Frage an. Zusätzlich wird mir aber die 3. Frage noch mal extra darunter angezeigt. Dadurch kommt die erste Fehlermeldung zustande. Die darunter folgenden Fehlermeldungen sind die bereits vorher in dieser Frage erwähnten Fehlermeldungen

Außerdem ist mir aufgefallen, dass, wenn ich auf weiterklicke und nicht alle Fragen beantwortet habe, meine Eingaben bei Sonstiges gelöscht werden. Technisch gesehen wäre es zudem optimal, wenn Teilnehmer sobald sie etwas in das Feld Sonstiges eingetragen haben, dazu gezwungen sind dieses auch zu beantworten. Vielleicht gibt es hierzu noch eine Lösung.

Vielen Dank auch für den Code für die Markierung fehlender Antworten. In der Darstellung der kombinierten Frage wird die Schrift allerdings nicht fett. Das passiert nur wenn die Frage einzeln gestellt wird. Kann man das eventuell noch anpassen?

Zu guter Letzt habe ich bei allen drei Fragen die Skalen festgestellt zum scrollen. In der Vorschau der einzelnen Fragen funktioniert das auch wie vorgestellt. Bei der kombinierten Darstellung ist das ganze jedoch fehlerhaft. Statt der Skalen sieht man einen weißen Balken der außerdem wenn man mit dem Scrollen beginnt die ersten Antwortmöglichkeiten verdeckt.

by SoSci Survey (328k points)
Bitte verwenden Sie beim Verfassen/Editieren der Frage den Knopf {}, um HTML- und PHP-Code als solchen zu formatieren. Danke.
by s175898 (195 points)
Ehrlich gesagt weiß ich leider nicht wie die Antwort gemeint ist und glaube, dass diese Antwort auch nicht die Lösung für meine weiter unten genannten Fragen ist.
by SoSci Survey (328k points)
Ich bat Sie darum, Ihre Frage zu editieren und mit dem dort angebotenen Knopf {} die Code-Teile so zu formatieren, dass man selbige lesen kann. Danke.

Anschließend befasse ich mich gerne inhaltlich mit Ihrer Frage. Im Moment ist dies nur leider sehr schwer.
by s175898 (195 points)
Ach so ich habe den Knopf auf der eigentlichen Seite von Sosci Survey bei Fragebogen zusammenstellen gesucht. Ich hoffe jetzt ist die Frage richtig formatiert.

1 Answer

0 votes
by SoSci Survey (328k points)
edited by SoSci Survey

Ich habe mittlerweile einen php Code erstellen können, der mir die mobile Darstellung korrekt anzeigt.

Ich habe Ihren Code mal genommen und sauber formatiert:

if (value('GR01_ScW') > 600) {
    question('FV01','gap=line','combine=FV02','gap=line','combine=FV03','gap=line');
    html('...');
    pageCSS('...');
} else question('FV01','gap=line','combine=FV02','gap=line');
html('...');
pageCSS('...');
question('FV03');
html('...');
pageCSS('...');

Beachten Sie, dass sich der IF-Teil auf die 3 Zeilen mit question(), html() und pageCSS() bezieht. Der ELSE-Teil hingegen nur auf den question()-Befehl, weil dort keine geschweiften Klammern zum Einsatz kommen.

Damit das Ganze funktioniert ist es auch wichtig, dass die Frage GR01 auf einer früheren Seite des Fragebogens platziert wurde.

Durch die Aufteilung in zwei Fragen erhalte ich außerdem noch eine Fehlermeldung für mein offenes Eingabefeld bei sonstiges.

Wenn Sie die Fehlermeldung posten, kann ich dazu gerne mehr sagen. Die Idee hinter Fehlermeldungen ist ja, dass sie die notwendigen Informationen zur Fehlerbehebung liefert. Das klappt mal besser, mal schlechter.

Kann man die Markierung deutlicher machen? Die hellrote Schrift ist kaum zu unterscheiden von der schwarzen Schriftfarbe der anderen Items.

Die Fehlerfarbe können Sie einfach im Fragebogen-Layout festlegen. Oder natürlich auch per CSS:

pageCSS('
    div.s2question div.s2item.s2fail,
    table.question td.trouble,
    table.question tr.trouble td {
        color: #FF9900;
        font-weight: bold;
    }
');

Ist es möglich wie in einer Excel Tabelle die oberste Zeile mit den Skalen und dem Text über den Items festzustellen, so dass sie permanent sichtbar sind auch wenn man weiter runter scrollt?

Sie können das für eine Skalen-Frage einfach in den Frage-Einstellungen (Wiederholung der Verankerung) festlegen. Allerdings kann ich Ihnen nicht auswendig sagen, ob das für kombinierte Fragen auch noch funktioniert. Probieren Sie das bitte einmal aus.

by s175898 (195 points)
Vielen Dank für die Antwort. Ich habe versucht alles erstmal so umzusetzen. Am Ende meiner eigentlichen Frage habe ich ein Informations Update reingeschrieben. Vielleicht könne Sie mir an dieser Stelle noch mal helfen.
by SoSci Survey (328k points)
> Allerdings zeigt er Frage 3 immer nochmal extra an

Das kann unterschiedliche Ursachen haben. Möchten Sie Ihren PHP-Code dafür einfach nochmal in einer neuen Frage posten? Hier wird es langsam ein wenig voll :)

Bitte stellen Sie auch sicher, dass außer dem PHP-Code keine weiteren Elemente (insb. nicht die doppelte Frage) auf der Fragebogen-Seite stehen.

> Vielen Dank auch für den Code für die Markierung fehlender Antworten. In der Darstellung der kombinierten Frage wird die Schrift allerdings nicht fett.

Dafür habe ich den CSS-Code oben noch um 2 Zeilen ergänzt.

> Zu guter Letzt habe ich bei allen drei Fragen die Skalen festgestellt zum scrollen. In der Vorschau der einzelnen Fragen funktioniert das auch wie vorgestellt. Bei der kombinierten Darstellung ist das ganze jedoch fehlerhaft.

Schade, aber leider zu erwarten... Das mit dem Scrollen ist ein wenig hakelig. Auch das würde ich mir gerne nochmal in einer separaten Frage ansehen. Vielleicht können Sie dort auch einen Pretest-Link posten, wie es mit aktivierter Scroll-Funktion in der kombinierten Frage aussieht.

Womöglich ist es bei so eine langen Frage aber auch einfach sinnvoller, die Verankerung alle 8 Items zu wiederholen.
by s175898 (195 points)
Sehr gerne erstelle ich eine neue Frage. Einziges Problem ist gerade, dass wenn ich den PHP-Code mit dem Knopf {} einstellen will nimmt er nicht den ganzen Code. Ich hatte es bis jetzt immer mit C&P gemacht. Aber das klappt gerade nicht.
by SoSci Survey (328k points)
Markieren Sie bitte nach dem Copy&Paste den (kompletten) eingefügten PHP-Code und klicken Sie dann auf den Knopf {}.

Dadurch wird der Code einfach um 4 Leerzeichen eingerückt und dann in der Frage als Code formatiert.

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

...