Stimuli in Akkordeon?

Question

Hallo,

über einen Zufallsgenerator und php ziehe ich einen Bild-Stimulus in der Befragung (siehe unten).
Auf den Folgeseiten würde ich gerne den Teilnehmenden diesen Bildstimulus erneut bei Bedarf anzeigen. Dieser Bedarf soll nach Möglichkeit ähnlich zu dem Akkordeon Text funktionieren.

Gibt es hierzu Hinweise, wie man dies umsetzen kann?

Danke für die Hilfe!

Viele Grüße

PHP-Code:

$code = value('ZG01');  // Auslesen der gezogenen Zufallszahl
 
// Grafikdatei in Abhängigkeit von der Zufallszahl in einen Platzhalter schreiben
if ($code == 1) {
  replace('%dateiname%', 'Stimulus1.jpeg');
} elseif ($code == 2) {
  replace('%dateiname%', 'Stimulus2.jpeg');
} elseif ($code == 3) {
  replace('%dateiname%', 'Stimulus3.jpeg');
} elseif ($code == 4) {
  replace('%dateiname%', 'Stimulus4.jpg');
} elseif ($code == 5) {
  replace('%dateiname%', 'Stimulus5.jpg');
} elseif ($code == 6) {
  replace('%dateiname%', 'Stimulus6.jpg');
}

// Den HTML-Code kann man direkt einbinden oder (hier nicht gezeigt) als Textbaustein
 html('<p><img src="%dateiname%" style= "max-width: 100%" alt=""></p>'); 

Answer 1

Erstellen Sie doch mal ein Akkordeon-Element, in welches Sie Ihren Code

<img src="%dateiname%" style= "max-width: 100%" alt="">

als HTML-Code einfügen. Eventuell müssen Sie im Editor für den Inhalt dafür erst auf die HTML-Ansicht umschalten. Das sollte das letzte Symbol in der Zeile mit Formatierungsoptionen sein.

Dann ziehen Sie dieses Element auf die nächste Seite. Das müsste schon reichen, denn der Platzhalter, die Sie hier im PHP-Code setzen, sollte dort weiterhin verfügbar sein.

Comments

Wenn ich den Code in den Quelltext des Akkordeons einfüge:
<img src="%dateiname%" style= "max-width: 100%" alt="">

wird der Text geändert
<img src="%DAteiname%25" style= "max-width: 100%" alt="">

---

Schlecht, da versucht der WYSIWYG Editor, die Prozentzeichen korrekt als URL zu formatieren.

Dann müssen wir das Akkordeon eben komplett als HTML-Code einfügen. Ändern Sie die "Darstellung" des Texts bitte von "Akkordeon" auf "HTML-Code" und versuchen Sie folgendes:

<div class="s2accordion s2jsAccordion">
<h2 class="title s2readable"><a href="#">Bild/Titel</a></h2>
<div class="content s2readable" style="display: none;">
<img src="%dateiname%" style= "max-width: 100%" alt="">
</div>
</div>

Answer 2

Vielleicht ist die beste Lösung:
https://www.soscisurvey.de/help/doku.php/de:create:popup?s[]=*bilder*&s[]=*dynamisch*&s[]=*anzeigen*#information_per_mausklick

Hier stellt sich die Frage, ob dies nicht ggf. auch über das Akkordeon geht.

Comments

Das Akkordeon setzt auf das Einblenden von Inhalten noch die Animation und die Steuerung zum Ausblenden quasi "automatisch" dazu. Aber die zugrundeliegende Technik ist dieselbe, korrekt.