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

Lückentext Dropdown Handyversion nicht ausfüllbar

0 votes

Liebes SoSci-Team,
ich habe leider ein Problem mit der online Version meines Fragebogens.
Ichhabe einen Lückentext entworfen, dessen erste Lücke zufällig mit einem Namen gefüllt wird, die folgenden Lücken sind per Platzhalter mit Dropdownmenüs ersetzt.
Am Computer gibt es keine Probleme.
Bei Handys ist es nicht möglich mehr als das erste Dropdownmenü zu nutzen, denn der Cursor landet immer wieder in der ersten Lücke, in die ja eigentlich nichts eingetragen werden soll. Aber selbst wenn der Name gelöscht und etwas neues eingetragen wird kann der Fragebogen nicht weiter aufgefüllt werden.

Was ist hier schief gelaufen? Wie kann ich das beheben??
Die Umfrage ist bereits online, ich habe nun eine mobile Version erstellt, in der die erste Lücke gelöscht wurde und nur ein X eingetragen wurde. Aber das ist nicht wie es sein sollte, jetzt fehlen ja die Namen....

mein Code sieht wie folgt aus:
Zunächst werden per Zufallsgenerator 5 von 5 Kategorien in zufälliger Reihenfolge gezogen (E101).
5 weitere Generatoren (GL01-05) wählen einen Text aus jeder Kategorie.
Die erste Lücke jedes Textes wird mit einem anderen von 13 zufällig ausgewählten Namen gefüllt.

$name = value('E102x1', 'label');
preset('A110_01', $name);  // Eingabefeld vorbelegen
preset('A111_01', $name);  // Eingabefeld vorbelegen
preset('A112_01', $name);  // Eingabefeld vorbelegen
preset('A113_01', $name);  // Eingabefeld vorbelegen
preset('A114_01', $name);  // Eingabefeld vorbelegen
preset('A115_01', $name);  // Eingabefeld vorbelegen
preset('A116_01', $name);  // Eingabefeld vorbelegen
preset('A117_01', $name);  // Eingabefeld vorbelegen
preset('A118_01', $name);  // Eingabefeld vorbelegen
preset('A119_01', $name);  // Eingabefeld vorbelegen
$name2 = value('E102x2', 'label');
preset('A210_01', $name2);  // Eingabefeld vorbelegen
preset('A211_01', $name2);  // Eingabefeld vorbelegen
preset('A212_01', $name2);  // Eingabefeld vorbelegen
preset('A213_01', $name2);  // Eingabefeld vorbelegen
preset('A214_01', $name2);  // Eingabefeld vorbelegen
preset('A215_01', $name2);  // Eingabefeld vorbelegen
preset('A216_01', $name2);  // Eingabefeld vorbelegen
preset('A217_01', $name2);  // Eingabefeld vorbelegen
preset('A218_01', $name2);  // Eingabefeld vorbelegen
preset('A219_01', $name2);  // Eingabefeld vorbelegen
$name3 = value('E102x3', 'label');
preset('A310_01', $name3);  // Eingabefeld vorbelegen
preset('A311_01', $name3);  // Eingabefeld vorbelegen
preset('A312_01', $name3);  // Eingabefeld vorbelegen
preset('A313_01', $name3);  // Eingabefeld vorbelegen
preset('A314_01', $name3);  // Eingabefeld vorbelegen
preset('A315_01', $name3);  // Eingabefeld vorbelegen
preset('A316_01', $name3);  // Eingabefeld vorbelegen
preset('A317_01', $name3);  // Eingabefeld vorbelegen
preset('A318_01', $name3);  // Eingabefeld vorbelegen
preset('A319_01', $name3);  // Eingabefeld vorbelegen
$name4 = value('E102x4', 'label');
preset('A410_01', $name4);  // Eingabefeld vorbelegen
preset('A411_01', $name4);  // Eingabefeld vorbelegen
preset('A412_01', $name4);  // Eingabefeld vorbelegen
preset('A413_01', $name4);  // Eingabefeld vorbelegen
preset('A414_01', $name4);  // Eingabefeld vorbelegen
preset('A415_01', $name4);  // Eingabefeld vorbelegen
preset('A416_01', $name4);  // Eingabefeld vorbelegen
preset('A417_01', $name4);  // Eingabefeld vorbelegen
preset('A418_01', $name4);  // Eingabefeld vorbelegen
preset('A419_01', $name4);  // Eingabefeld vorbelegen
$name5 = value('E102x5', 'label');
preset('A510_01', $name5);  // Eingabefeld vorbelegen
preset('A511_01', $name5);  // Eingabefeld vorbelegen
preset('A512_01', $name5);  // Eingabefeld vorbelegen
preset('A513_01', $name5);  // Eingabefeld vorbelegen
preset('A514_01', $name5);  // Eingabefeld vorbelegen
preset('A515_01', $name5);  // Eingabefeld vorbelegen
preset('A516_01', $name5);  // Eingabefeld vorbelegen
preset('A517_01', $name5);  // Eingabefeld vorbelegen
preset('A518_01', $name5);  // Eingabefeld vorbelegen
preset('A519_01', $name5);  // Eingabefeld vorbelegen
$kennung1 = id('A1', value('GL01x1'));
$kennung2 = id('A2', value('GL02x1'));
$kennung3 = id('A3', value('GL03x1'));
$kennung4 = id('A4', value('GL04x1'));
$kennung5 = id('A5', value('GL05x1'));
$zahl = value('E101x1');  // Zufallzahl wurde von RG01 gezogen
registerVariable($zahl);
if ($zahl == 1) {
  question($kennung1);
} elseif ($zahl == 2) {
  question($kennung2);
} elseif ($zahl == 3) {
  question($kennung3);
} elseif ($zahl == 4) {
  question($kennung4);
} elseif ($zahl == 5) {
  question($kennung5);
}
pageCSS('
input[type="text"] {
  border: 0 none;
  border-bottom: 1px solid black;
}
');

Viele Grüße

asked Dec 6 in SoSci Survey (dt.) by s102828 (225 points)
edited Dec 6 by SoSci Survey
Könnten Sie bitte einen Pretest-Link zur betroffenen Seite posten (im "normalen" Fragebogen)? Dann sollte das Problem schnell zu identifizieren sein.

Hilft es, wenn Sie das Eingabefeld einfach breiter machen? Auf Mobilgeräten benötigen Texteingabefelder mehr Platz bzw. eine größere Schriftart.
Ich bin mir nicht ganz sicher wie ich einen Pretest-Link zu nur einer Seite erstellen kann. Besonders da die Umfrage bereits öffentlich ist.
Ich hoffe das hier funktioniert:

https://webext.mh-hannover.de/soscisurvey/Lueckentexte/?act=fk82e2bxwst5sonQgMFl0KfF

Das Problem ist wie gesagt nur bei Handys aufgetreten.

Das Problem ist nicht, dass die Lücke zu klein wäre. Es ist schlicht nicht möglich in den anderen Lücken die Dropdownmenüs zu verwenden, da immer wieder die Tastatur geöffnet wird um im ersten Feld etwas einzutragen.

Danke :-)
Der Link ist schon ganz gut (man könnte noch dei Seite festlegen, wo der Pretest statet). Aber aufgrund der automatischen Mobil-Weiche komme ich beim Testen leider automatisch in den mobilen Fragebogen.

Vielleicht könnten Sie eine Kopie des Fragebogen anlegen, dort die Mobil-Weiche abschalten und nochmal einen Pretest-Link posten, der zur Kopie führt?

Und bitte schreiben sie bitte auch kurz, ob das Problem unter Android oder iOS/Apple auftritt? Danke.
Hallo, leider habe ich ihre Antwort jetzt erst gesehen...
Ich habe die automatische Weiterleitung auf die mobile Version ausgeschaltet.
Ich weiß auf jeden Fall von IOS Geräten, bei denen es nicht funktioniert hat. Über Android habe ich keine Rückmeldung bekommen.

Liebe Grüße
Nun, zumindest auf Android scheint alles korrekt zu funktionieren. Der Test mit iOS/Safari sollte bis morgen auch erledigt sein.

1 Answer

+1 vote
 
Best answer

Danke für den Link und die Umstellung. Auf dem iPhone ließ sich das Problem replizieren.

Die Ursache war ein wenig schwieriger zu finden. Es dürfte daran liegen, dass Sie mittels HTML-Code versuchen, die Zeilen weiter auseinander zu setzen:

<p style="line-height: 220%">

Prinzipiell korrekt, aber das Ganze wird dann wie folgt im HTML-Code eingebaut:

<td class="float s2col1"><label for="A312_01"><p style="line-height: 220%"></label>
<input id="A312_01" name="A312_01" tabindex="50"  type="text" style="width: 90px;" value="Miggelib" >
ist sehr launisch und neigt manchmal zum Zänkischen.
Dabei kann <select id="PP32" name="PP32" tabindex="50" size="1">

Problematisch ist hier die Interaktion mit dem <label>, welches direkt davor steht. Dieses ordnet den Text aus dem Lückentext dem Eingabefeld zu. Nun ergibt sich aber eine ungültige Schachelung, denn das <p> müsste geschlossen werden, bevor das <label>' geschlossen wird. Dadurch wird das schließende ` ungültig und offenbar vom iPhone ignoriert. Deshalb wird das Dropdown, welches folglich auch noch im Label steht, zum Label für das Eingabefeld. Daher springt der Cursor.

Langer Rede kurzer Sinn: Ich habe zwei Vorschläge zur Lösung:

  1. Verwenden Sie keine Frage "Lückentext", sondern einfach nur einen HTML-Code - das Eingabefeld am Anfang können Sie ja wie die ganzen Dropdowns einfach per Platzhalter unterbringen. Dadurch fällt das <label> weg.
  2. Schrieben Sie vor die Frage (also nicht in die Frage!) ein <div style="line-height: 220%"> als HTML-Code unter hinter die Frage ein </div>. Damit sollte die Schachtelung wieder passen.
answered 20 hours ago by SoSci Survey (49,455 points)
selected 2 hours ago by s102828
Tatsache, mit der zweiten Lösung hat es geklappt!
Vielen vielen Dank für die Mühe und Zeit! :-)
...