Bild Position fixed center, Fragen (rotiert) darunter fließend... und Fortschrittsbalken zeigt falsch an.

Question

Liebes SoSci Team!

(1) Ich habe ein multi-level-design, indem Bilder mittig angezeigt werden sollen und darunter ein Fragenblock (rotierenden Items) und darunter 4 Fragen (ebenso randomisiert) angezeigt werden sollen. Ist es möglich das Bild in der Mitte oben zu fixieren und die Fragen darunter anzuzeigen, beim Scrollen sollen dann die "Fragen unter dem Bild verschwinden". Ich habe einige Varianten mit position: fixed ausprobiert, und float: bottom/top, aber dann überlappen Fragen und Bild.

(2) Mein Fortschrittbalken bleibt ab dem Senden von Hauptfragenbogen zum Subfragenbogen bei 50% stehen und endet dann auch auf der letzten Seite mit 50% fertig. Wie kann man den Fortschrittbalken korrekt mit setpageOrder() in den Code einbinden oder ist das Einstellungssache? Anbei mein Code:

PHP Blöcke:
Hauptfragenbogen:

$i = loopPage(5);  
$varID = 'ZG01x'.sprintf('%02d', $i + 1);  
$img = value($varID, 'label');
multiLevelDown('subquest', $img);

Subfragebogen:

$img = multiLevelData();
put('IR01_01', $img);
replace('%img%', $img);

html('
  <div style="margin: 3em; text-align: center;">
    <img src="'.$img.'" alt="" />
  </div>
');

question(id('AA01'));
if (!isset($fragen)) {
  $fragen = array(  // Liste der Frage-Kennungen
    'AE02',
    'AE03',
    'AE04',
    'AE05'
  );
  shuffle($fragen);
  registerVariable($fragen);
}

foreach ($fragen as $kennung) {
  put('IR01_02', $kennung);
  question($kennung);
}

Vielen lieben und herzlichen Dank!

PS: Seht ihr hier irgendwelche Fehler, die event. drinnen sind? Insbesondere beim put() Befehl, weil er hier mir noch immer die Warnmeldung gibt, das ich put bei shuffle und random einsetzen soll.

Answer 1

aber dann überlappen Fragen und Bild.

Ja, ein klassiker beim Fixieren von Bildern. Eine Möglichkeit besteht darin, dass man hinter das Bild och ein weißes <div> legt, sodass die Fragen hübsch abgedeckt sind. Und dann noch ein <div>, damit die Fragen erstmal unter dem Bild bleiben.

<div style="padding: 20px; background-color: white; position: fixed; text-align: center;>
  <img src="dateiname.jpg">
</div>
<!-- Der Platzhalter muss genauso hoch sein wie das Bild plus 40 Pixel Abstand -->
<div style="height: 200px;"></div>

Aber oben, wo vorher das Layout war, erscheinen sie dann doch wieder. Wenn man es noch hübscher haben will, dann muss man JavaScript arbeiten und dynamisch ein- und ausblenden. Das ist dann etwas aufwändiger.

(2) Mein Fortschrittbalken bleibt ab dem Senden von Hauptfragenbogen zum Subfragenbogen bei 50% stehen und endet dann auch auf der letzten Seite mit 50% fertig.

Im Hauptbogen sollte der Fortschrittsbalken dank loopPage() eigentlich weiter-wandern. Man muss ihn nur auf den vorigen Seiten evtl. mit option('progress', ...) ein bisschen "nach unten" justieren.

Dem untergeordneten Fragebogen kann man mitteilen, die wie vielte Wiederholung es ist und dann mittels option('progress', ...) einen passenden Prozentwert anzeigen. In Multi-Level-Fragebögen ist das bisher noch nicht automatisiert.

PS: Seht ihr hier irgendwelche Fehler, die event. drinnen sind? Insbesondere beim put() Befehl, weil er hier mir noch immer die Warnmeldung gibt, das ich put bei shuffle und random einsetzen soll.

Frei Auge übersieht man die meisten Fehler. Ich empfehle auf jeden Fall einen gründlichen technischen Funktionstest.

Die Warnung erscheint immer, wenn Sie shuffle() verwenden, weil SoSci Survey anhand des Codes nicht sicher sagen kann, ob alles relevante gespeichert ist. Es ist lediglich ein Hinweis, dass Sie sich dieser Sache selbst annehmen müssen.

Comments

Vielen Dank für die Antwort. Das hat sehr geholfen. Zur Info, ich habe es jetzt so gelöst, wobei die Bilder auf 270 max Höhe vorab skaliert wurden.

html('
<div style="padding-bottom: 10px;
background-color: white;
position: fixed;
text-align: center;
z-index:+1;
width: 780px;" />
    <img src="'.$img.'" alt="" />
</div>
<div style="height: 285px;" /></div>
');

Den Fortschrittsbalken habe ich nun weggelassen, weil wenn ich eine bestimmte Prozentangabe bei option('progress', xx); xx prozent angebe nutzt das auch nicht viel - der bleibt ja dann immer gleich oder kann man die Runden prozentuell hier mitzählen lassen? Soweit ich das verstanden habe, eben nicht im Multilevel Design.

Eine gründliche technische Funktionstestung habe ich dann ohnehin vor!

Vielen lieben Dank für diesen tolle online Support!

---

> der bleibt ja dann immer gleich oder kann man die Runden prozentuell hier mitzählen lassen?

Natürlich - Sie müssen nur die Runde ($i) in multiLevelDown() mitgeben:

multiLevelDown('subquest', array('img' => $img, 'i' => $i));

Im untergeordneten Fragebogen holen Sie die Infos dann wieder aus dem Array:

$data = multiLevelData();
$img = $data['img'];
$i = $data['i'];