Darstellung von Bildern funktioniert nicht in allen Fällen bzw. entsteht eine Falsche Reihenfolge der Fragen mittels Fehlercode

Question

Darstellung von Bildern funktioniert nicht in allen Fällen bzw. entsteht eine Falsche Reihenfolge der Fragen mittels Fehlercode

asked Mar 21, 2020 in SoSci Survey (dt.) by s126344 (280 points)
edited Mar 21, 2020 by SoSci Survey

Hallo,

ich habe eine Randomisierung von Fragen mit zwei Zetteln und insgesamt 4 Möglichkeiten mittels eines PHP-Codes erstellt.
In jenem sind auch je Möglichkeit ein Bild eingefügt. Manchmal, so z.B. in Fall elseif ($zahl ==2) wird kein Bild abgebildet und es entsteht eine wirre Reihenfolge der Fragen, wie sie so nicht im PHP- Code steht. Dazu habe ich auch der Fragebogenseite zwischen den einzelnen Fragen folgende Fehlermeldung erhalten:

Items in der nachfolgenden Fragen werden auf dieser Seite schon weiter oben angezeigt. Dies führt fast zwangsläufig zu Datenverlust! Falls Sie eine Frage mehrfach benötigen, legen Sie bitte eine Kopie der Frage an. Betroffen sind folgende Items: P006_01, P006_02, P006_03, P006_04, P006_05, P006_06, P006_07, P006_08, P006_09, P006_10.

Mein verwendeter PHP-Code ist folgender:

$zahl = value ('IA06x01');// Auslesen der gezogenen Zufallszahl
 
// Grafikdatei in Abhängigkeit von der Zufallszahl in einen Platzhalter schreiben
if ($zahl == 1) 
{
question('B008');
replace('%Insektenburger%', '1Insektenburger_Bugfoundation.png');html('<p><p style="text-align: center;margin-top: 2px; margin-bottom: 0px;" style="max-width: 45%" style="max-height:60%"><img src="%Insektenburger%"></p>');
question('B007');
question('B006');
question('B001');
question('B002');
question('B003');
question('B004');
question('B009');
question('B005');
question('B010');
question('B011');
} elseif ($zahl == 2) 
{ 
question('G007');
replace('%Insektenburger%', 'Insektengranola_SnackInsects.png');html('<p><p style="text-align: center;margin-top: 2px; margin-bottom: 0px;" style="max-width: 45%" style="max-height:60%><img src="%Insektenburger%"></p>');
question('G008');
question('G006');
question('G001');
question('G002');
question('G003');
question('G004');
question('G009');
question('G005');
question('G010');
question('G011');
} elseif ($zahl == 3) 
{
question('P007');
replace('%Insektenburger%', 'Insektenpasta_plumentofoods.png');html('<p><p style="text-align: center;margin-top: 2px; margin-bottom: 0px;" style="max-width: 45%" style="max-height:60%><img src="%Insektenburger%"></p>');
question('P007');
question('P006');
question('P001');
question('P002');
question('P008');
question('P006');
question('P001');
question('P002');
question('P003');
question('P004');
question('P009');
question('P005');
question('P010');
question('P011');
} elseif ($zahl == 4) 
{
question('R007');
replace('%Insektenburger%', '1Insektenproteinriegel_Swarmprotein.jpg');html('<p><p style="text-align: center;margin-top: 2px; margin-bottom: 0px;" style="max-width: 45%" style="max-height:60%><img src="%Insektenburger%"></p>');
question('R008');
question('R006');
question('R001');
question('R002');
question('R003');
question('R004');
question('R010');
question('R005');
question('R011');
question('R009');
question('R012');
}

Vielen Dank schonmal.

commented Mar 21, 2020 by s126344 (280 points)

commented Mar 21, 2020 by SoSci Survey (327k points)

Vielleicht eine kurze Antwort schonmal zum HTML-Code, der ist nicht ganz korrekt:

<p><p style="text-align: center;margin-top: 2px; margin-bottom: 0px;" style="max-width: 45%" style="max-height:60%"><img src="%Insektenburger%"></p>

Oder anders geschrieben:

<p>
  <p style="text-align: center;margin-top: 2px; margin-bottom: 0px;" style="max-width: 45%" style="max-height:60%">
    <img src="%Insektenburger%">
  </p>

Zum ersten ist das erste <p> überflüssig bzw. nicht abgeschlossen. Dann haben Sie im zweiten <p> zweimal das "style"-Attribut, wovon der Browser nur eines verwendet. Zum Dritten geben Sie im <p> (Absatz) eine Breite und Höhe ein, aber ich denke, Sie meinen eigentlich das Bild, also müsste es heißen:

<img src="1Insektenburger_Bugfoundation.png" style="max-width: 45%; max-height: 60%">

Das "max-height" macht auch nur dann Sinn, wenn Sie das Bild in einem Element mit fester Höhe verwenden.

commented Mar 22, 2020 by s126344 (280 points)

1 Answer

Answer 1 · 2020-03-22T16:06:48+0000

answered Mar 22, 2020 by SoSci Survey (327k points)

B0, G0, P0 und R0 haben die gleichen Items, jedoch ist der Text (Inhalt) immer individuell für jedes der vier Möglichkeiten, weshalb ich die nicht duplizieren kann.

Eventuell möchten SIe es mit einer Rubrik lösen und Platzhalter in den Item-Texten verwenden. Wenn das möglich ist, würde es Ihre Auswertung vermutlich deutlich vereinfachen.

Wenn Sie das replace() nicht brauchen, dann lassen Sie es weg, um etwas Komplexität zu reduzieren. Also statt:

replace('%Insektenburger%', '1Insektenproteinriegel_Swarmprotein.jpg');html('<p><p style="text-align: center;margin-top: 2px; margin-bottom: 0px;" style="max-width: 45%" style="max-height:60%><img src="%Insektenburger%"></p>');

Einfach nur

html('<p style="text-align: center; margin-top: 2px; margin-bottom: 0px; max-width: 45%;"><img src="1Insektenproteinriegel_Swarmprotein.jpg"></p>');

Dabei sah ich auch, dass ein Anführungszeichen hinter dem max-height fehlte. Womöglich war schon das dafür verantwortlich, dass es nicht funktionierte. Bitte tauschen Sie das einmal aus und testen Sie, ob das Problem damit behoben ist.

commented Mar 22, 2020 by s126344 (280 points)

Hallo,
zu der (ersten) Fehlermeldung ist mir gerade auch selbst aufgefallen, dass im Fall der Möglichkeit 3 (P0) drei Fragen Doppelt im PHP-Code standen - dies habe ich geändert. Jetzt kommt das nicht mehr. Danke erstmal ;)

Ich habe nun Ihren letzten PHP-Code (ohne replace () ) eingebaut. Die Bilder werden nun normal eingebaut, aber im Fall der Möglichkeit 3 wird das Bild z.B. NICHT in der Mitte angezeit, sondern linksbündig. (Im Fall von Möglichkeit 1 ist das Bild jedoch mittig.) Ich habe 2 Bilder (Möglichkeit 1 und 4), die quadratisch sind und 2 Bilder (Möglichkeit 2 und 3), die länglich sind. Ist das vllt das Problem?

Außerdem wird bei den besagten Beispielen in der Anzeige (trotz des Befehls margin-top und margin-bottom bei der Einbindung des html-Codes für das Bild) immer noch ein großer Abstand zwischen der Bildüberschrift (bspw. P007) und dem Bild, sowie der Bildunterschrift (bspw. P008) gelassen, sodass das Bild nicht vernünftig von Bildüberschrift und Bildunterschrift eingebunden wird. Gibt es da vllt andere px-Werte, die man eingeben muss oder ähnliches?
Ich bin leider total überfragt und kenne mich damit gar nicht aus. Vllt. können Sie mir da noch einmal helfen, bitte.

commented Mar 23, 2020 by SoSci Survey (327k points)

> im Fall der Möglichkeit 3 wird das Bild z.B. NICHT in der Mitte angezeit, sondern linksbündig. (Im Fall von Möglichkeit 1 ist das Bild jedoch mittig.

Dann wird dort entweder unterschiedliche HTML-Code verwendet oder die Bilder sind unterschiedlich groß. Ohnehin würde ich zum Zentrieren der Bilder einen anderen HTML-Code empfehlen:

<p style="text-align: center;"><img src="1Insektenproteinriegel_Swarmprotein.jpg" style="width: 320px; max-width: 100%"></p>

> Außerdem wird bei den besagten Beispielen in der Anzeige (trotz des Befehls margin-top und margin-bottom bei der Einbindung des html-Codes für das Bild) immer noch ein großer Abstand zwischen der Bildüberschrift (bspw. P007) und dem Bild, sowie der Bildunterschrift (bspw. P008) gelassen

Wo ist in Ihrem HTML-Code denn die Bildüber- und -unterschrift?