Bild einblenden bei Klick auf Button

Question

Liebes Support-Team,

ich nutze einen Zufallsgenerator (‘ST01‘), um verschiedene Stimuli gleichmäßig auf Teilnehmende zu verteilen. Zu Beginn wird den Teilnehmenden ein Stimulus in vergrößerter Darstellung präsentiert, zu dem anschließend Fragen beantwortet werden sollen.

Zusätzlich möchte ich einen Button einbinden, über den die Teilnehmenden während der Bearbeitung des Fragebogens bei Bedarf erneut den ihnen zugewiesenen Stimulus abrufen können.

Zunächst habe ich ein PHP-Element angelegt, um die Variable des Zufallsgenerator als Platzhalter anzulegen:

PHP
$stimulus = value('ST01');
replace('%stimulus%', (int)$stimulus);

Dann habe ich einen Button in HTML erstellt. Der Button wird korrekt angezeigt und lässt sich anklicken; über „Close“ kann das Fenster wieder geschlossen werden. Aber der Inhalt (hier: Stimulusbild) wird nicht dargestellt.

Durch verschiedene Tests konnte ich feststellen, dass der Platzhalter %stimulus% in HTML funktioniert und die Variable „map“ korrekt angelegt zu sein scheint. Zudem können die verschiedenen als PNG hinterlegten Stimulusbilder grundsätzlich angezeigt werden.

Ich bin über jeden Hinweis und jede Hilfestellung dankbar. Herzlichen Dank vorab!

HTML
<!-- Button -->
<button type="button" onclick="buttonShow()">
   Click here
</button>

<!-- Info box -->
<div id="infoBox" style="display:none; width:200px; padding:200px; background:white; border:2px solid #ccc; margin-top:10px;">

  <!—Content of info box -->
  <div style= "text-align:center;"> 
  <img id="stimulusImage" src="" style="max-width:100%; display:none;">
 </div>

  <p style="text-align:center; margin-top:500px">
    <button type="button" onclick="buttonHide()">
      Close
    </button>
  </p>
</div>


<!-- JavaScript code -->
<script type="text/javascript">
<!--

var stimulus = %stimulus%;

var map = {
    1: "image1.png",
    2: "image2.png",
    3: "image3.png",
    4: "image4.png",
    5: "image5.png",
    6: "image6.png",
    7: "image7.png",
    8: "image8.png",
  };

var info = document.getElementById("infoBox");
var img = document.getElementById("stimulusImage");

 info.style.display = "none"; // hide box
 info.style.position = "absolute";
 info.style.zIndex = 999;
 // Either in a fixed position on the page
 // info.style.left = "50px";
 // info.style.top = "100px";
 // Or in a defined place below the button
 info.style.marginTop = "10px";

function buttonShow() {
  // Display info box
  img.src = map[stimulus];
  info.style.display = "block";
}

function buttonHide() {
  // Hide the info box again
  info.style.display = "none";
}

//-->
</script>

Comments

Die Lösung mit dem Dateinamen in JavaScript ist wahrscheinlich ein wenig umständlich - einfacher wäre es, wenn Sie mittels replace() direkt den Dateinamen übergeben. Aber lassen Sie uns gerne in Ihrer Lösung das Problem suchen: Für eine effiziente Fehlersuche müssten Sie bitte entweder selbst einen Blick in die JavaScript Fehlerkonsole Ihres Browsers werfen (https://www.soscisurvey.de/help/doku.php/de:general:browser-tools) oder einen Pretest-Link zur Seite mit dem Zufallsgenerator erstellen und hier posten.

---

Vielen lieben Dank für die schnelle Rückmeldung! In der JavaScript Fehlerkonsole wurde kein Fehler angezeigt, aber es funktioniert mittlerweile:

In der folgenden Zeile (<img id="stimulusImage" src="" style="max-width:100%; display:none;">) musste das 'display:none;' weg. Danke! :)