Ask a Question

Hintergrundbild rotieren lassen.

0 votes
in SoSci Survey (dt.) by s109880 (200 points)

Hallo zusammen,
in meiner Tagebuchstudie (14 Tage) sollen die Probanden jeden Tag ein zufälliges Bild aus einem Bilderpool von 6 Bildern als Hintergrund bekommen. Ich habe es jetzt erstmal ganz einfach durch einen Zufallsgenerator gelößt:

if (value('A106') == 1) {
  html('<p><img src="Bild1.jpg"></p>');
} elseif (value('A106') == 2) {
  html('<p><img src="Bild2.jpg"></p>');
}
...usw.

jetzt die Fragen:
-Wie bekomme ich das hin, dass das Bild für alle Seiten im Fragebogen als Hintergrund bleibt? (bei internen Variablen müsste man die ja immer wieder "leeren", geht das?)
-Ich möchte die Grafik mittig im Bild haben (sie werden immer im 16:9 Format sein), wie modifiziere ich den HTML-Code so, dass sie da sind und die Fragen Mittig von der Grafik angezeigt werden und das auf alles Seiten auch so bleibt?

Thx.

1 Answer

0 votes
by SoSci Survey (327k points)

Im Prinzip kein Problem - mit Platzhaltern bekommen Sie das Bild wohin immer Sie wollen.

Die Frage ist aber eher, wo der Hintergrund genau hin soll? Man kann (z.B. im Fragebogen-Layout) fast jedem beliebigen HTML-Element einen Hintergrund zuweisen. Wenn der Hintergrund über die gesamte Seite gehen soll, wäre <body> das richtige Element. Allerdings müssen Sie dann korrekt mit unterschiedlichen Bildschirmgrößen umgehen.

Wenn das Hintegrundbild nur so breit sein soll, wie der Fragebogen, dann müssten Sie das <div>-Element verwenden, welches in der HTML-Vorlage des Layouts den Platzhalter %questionnaire% umrahmt, das könnte z.B. <div class="questionary"> sein.

by s109880 (200 points)
Also an sich war die Idee, dem Fragebogen einen Hintergrund zu geben. Wir haben die Bilder mit einem weißen Feld in der Mitte überlagert, was transparent genug ist die Fragen zu lesen, aber auch noch das Bild dahinter zu sehen. Jedoch wäre ein Rahmen um das Bild ohne die weiße Box gut. Somit müsste man die Fragen mittig "rücken", da das Bild eigentlich nur so groß wie der Fragebogen sein soll, sonst sieht das zu voll aus denke ich. Würde sowas auch funktionieren?
Und mit dem Randomisieren? Wie könnte man das lösen, wenn ich den <div>-Element benutze?

Thx.
by SoSci Survey (327k points)
Nun, möglich ist so ziemich alles ... Versuchen Sie z.B. zu Beginn der Fragebogen-Seite einmal folgenden HTML-Code:

<div style="background-image:url(%bgImage%)">

und am Ende der Seite passend dazu

</div>

Passend dazu noch (vor dem ersten HTML-Code) einen Platzhalter setzen:

replace('%bgImage%', 'image01.jpg');

> Und mit dem Randomisieren? Wie könnte man das lösen, wenn ich den <div>-Element benutze?

Da würden Sie einfach den Platzhalter %bgImage% randomisiert setzen. Unter "Randomisierung" finden Sie auch einen Beispiel-Code mit replace().
by s109880 (200 points)
Sie sind genial, dass hat funktioniert! Vielen dank!

Leider passen die Bilder nicht ganz in das Format der Fragen; muss ich die dann mit der Auflösung anpassen, damit die kleiner werden, oder kann man das auch noch irgendwo einstellen?
by SoSci Survey (327k points)
> muss ich die dann mit der Auflösung anpassen, damit die kleiner werden, oder kann man das auch noch irgendwo einstellen?

Ich würde empfehlen, dass Sie die Bilder vorab in einer Bildbearbeitung (z.B. GIMP) korrekt skalieren.

Allerdings unterstützen die aktuellen Browser auch eine Skalierung von Hintergrundbildern:

<div style="background-image:url(%bgImage%); background-size: cover;">

Mehr dazu s. https://www.w3schools.com/cssref/css3_pr_background-size.asp

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

Categories

Snow Theme by Q2A Market
Powered by Question2Answer
...