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

Question

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.

Comments

Der vollständige code für das Einbinden der Bilder, der oben nicht richtig angezeigt wird, ist folgender:

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>');

---

Tipp: Verwenden Sie den Knopf {}, um Code als solchen zu formatieren. Ich habe das oben einmal geändert.

---

Eine wichtige Frage: Unterscheiden sich die Fragen aus G0, B0, P0 und R0 oder sind das jeweils dieselben Fragen?

Und: Weshalb verwenden Sie replace(), wenn Sie das html() dann ohnehin einbinden? Wird das Bild auf folgenden Seiten erneut angezeigt?

---

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.

---

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.

Erhlich gesagt, kann ich nicht erklären, warum ich das so gemacht habe, aber nur so hat es, nach langem Tüfteln, funktioniert zu Anfang.

Es sind insgesamt vier unterschiedliche Bilder, die jeweils je Möglichkeit varrieren und zu je einer Möglichkeit je ein Bild gehört.

Die Bilder sollen von Bildüberschriften (bspw. B008)  und Bildunterschriften (bspw. B007) umgeben sein, deshalb habe ich es auch probiert, mit margin-top und margin-bottom. Aber irgendwie ist immer noch so viel Abstand zwischen dem Bild und jeweils der Bilder Überschrift (also B008)...

Answer 1

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.

Comments

Vielen lieben Dank!

Nun habe ich noch eine letzte Frage. Die Abstände der Bildüber- und Unterschriften zum Bild sind nun leider immer noch zu groß. Ich habe versucht, bei margin: 0em einzugeben, aber das hat leider nichts geändert.

Die Bildunterschriften müssten nämlich eigentlich direkt unter dem Bild stehen und sind momentan noch viel zu weit darunter angeordnet.
Gäbe es dafür noch eine Lösung?
Vielen Dank schonmal.

---

Wenn Sie mir einen aktuellen Pretest-Link senden, kann ich gerne eine konstruktive Antwort geben.

---

https://www.soscisurvey.de/IATEntomophagie/?act=j28tSFoiTYfo0K25K8woRrNz

Es wäre eig ganz schön, wenn die Bildunterschrift (wie in anderen Publikationen auch bspw.) mögichst direkt unter dem Bild erscheint und dann zwischen den folgenden Fragen (und der Bildunterschrift des Bildes) noch eine wenig Platz ist (,,normaler'' Abstand).
Mir fällt auf, dass es bei den Möglichkeiten $zahl== 2  und $zahl== 3 (beides senkrechte Bilder) genauso formatiert ist, wie ich es haben möchte. Beide Möglichkeiten $zahl ==1 und $zahl == 4 (beides quadratische Bilder) funktioniert dies leider nicht

---

Der Abstand unter dem Bild (in meinem Beispiel Insektenpasta_plumentofoods.png) kommt schlicht und ergreifend daher, dass das Bild selbst unten ein wenig "nichts" hat. Schneiden Sie das Bild bitte in einer Software wie IrfanView, GIMP oder Photoshop zu, laden Sie die zugeschnittene Grafik hoch und drücken Sie auf der Fragebogen-Seite dann noc F5 (Seite neu laden) damit der Browser sich auch die aktuelle Version vom Server holt anstatt die alte Version aus dem Cache zu zeigen.

---

Daran wird es wohl bei den quadratischen Bildern gelegen haben.Es hat un alles hervorragend geklappt.

Vielen lieben Dank für Ihre konstruktive und schnelle Hilfe!