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

0 votes

Hallo zusammen,

ich programmiere gerade eine Umfrage bei der zufällig eines von acht Bildern ausgewählt werden soll. Das zufällig ausgewählte Bild soll auf einer ersten Seite zunächst angezeigt werden. Auf der folgenden Seite werden dann Fragen zum Bild gestellt und oberhalb soll das Bild nochmals klein (als Erinnerungsstütze) mit Zoomfunktion eingeblendet werden.

Den Zufallsmechanismus habe ich bereits erstellt und auch der Zoom funktioniert, jedoch nur solange ich ein bestimmtes Bild auswähle.
Das Problem ist nun beim Zoom das zufällig ausgewählte Bild einzubinden.

So sieht der Zoom aktuell aus:

Hier mein Code:

  1. Schritt / 1. Seite --> PHP-Code
  1. Schritt /2. Seite

PHP-Code

$zahl = value('R001'); 
if ($zahl == 0) {
} else {
  // Array, welches für jede Gruppe ein Bild hinterlegt
  $bilder = array(
    1 => 'Werbevorlage_1.jpg',
    2 => 'Werbevorlage_2.jpg',
    3 => 'Werbevorlage_3.jpg',
    4 => 'Werbevorlage_4.jpg',
    5 => 'Werbevorlage_5.jpg',
    6 => 'Werbevorlage_6.jpg',
    7 => 'Werbevorlage_7.jpg',
    8 => 'Werbevorlage_8.jpg',
  );
  // Mit eckigen Klammern wird ein Element aus dem Array gelesen
 $bild = $bilder[$zahl];
}

Html-Code





in SoSci Survey (dt.) by s099391 (120 points)
edited by SoSci Survey

1 Answer

0 votes

Sie würden sich vermutlich einen großen Gefallen tun, wenn Sie mit einem Platzhalter für den BIldnamen arbeiten.

Wenn Sie im Zufallsgenerator bereits die Dateinamen der Bilder hinterlegt haben, reicht folgende Zeile:

replace('%bild%', 'R001', 'response');

Und ab da an können Sie überall in Ihrem HTML-Code einfach %bild% einsetzen wo vorher der Dateiname stand.

PS: Code können Sie hier im Support posten, indem Sie den Code einfügen und dann auf den Knopf {} klicken.

by SoSci Survey (238k points)
Viele Dank für die schnelle Hilfe.

Leider ändert auch die Verwendung des Platzhalters nichts an dem Problem, dass kein Bild angezeigt wird.

Ist mir hier beim Abrufen des Bildes ein Fehler unterlaufen?

<div class="img-zoom-container">
  <img id="myimage" src="'%bild%'" width="138" height="195">
  <div id="myresult" class="img-zoom-result"></div>
</div>
Wenn Sie einen Pretest-Link direkt (!) zur betroffenen Seite posten, kann ich gerne nachsehen, was schief läuft. Funktioniert es denn, denn Sie den Bildnamen ohne Randomsierung direkt eingeben?
Hier der Link: https://www.soscisurvey.de/werbung02/?act=9dta63dVLOHBMzUXHSY5AEQo

Ja, wenn ich den Bildnamen direkt eingebe funktioniert es.
Ich habe den Link 5-mal angeklickt und 5 unterschiedliche Bilder zu sehen bekommen. Die grundsätzliche Einbindung des Bildes funktioneirt korrekt - es geht nur um den Zoom, oder? Allerdings sehe ich auch keinen JavaScript-Code für den Zoom auf der Seite?!
Ja, der Zufallsmechanismus funktioniert. Nur der Zoom ist das Problem.
Nochmals mein Code:

html-Code:

{
replace('%bild%','R001', 'response');
}

php-Code:

{<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {box-sizing: border-box;}

.img-zoom-container {
  position: relative;
}

.img-zoom-lens {
  position: absolute;
  border: 1px solid #d4d4d4;
  /*set the size of the lens:*/
  width: 60px;
  height: 60px;
}

.img-zoom-result {
  border: 1px solid #d4d4d4;
position: absolute;
right: 0px; top: 0px;
  /*set the size of the result div:*/
  width: 250px;
  height: 250px;

}
</style>
<script>
function imageZoom(imgID, resultID) {
  var img, lens, result, cx, cy;
  img = document.getElementById(imgID);
  result = document.getElementById(resultID);
  /*create lens:*/
  lens = document.createElement("DIV");
  lens.setAttribute("class", "img-zoom-lens");
  /*insert lens:*/
  img.parentElement.insertBefore(lens, img);
  /*calculate the ratio between result DIV and lens:*/
  cx = result.offsetWidth / lens.offsetWidth;
  cy = result.offsetHeight / lens.offsetHeight;
  /*set background properties for the result DIV:*/
  result.style.backgroundImage = "url('" + img.src + "')";
  result.style.backgroundSize = (img.width * cx) + "px " + (img.height * cy) + "px";
  /*execute a function when someone moves the cursor over the image, or the lens:*/
  lens.addEventListener("mousemove", moveLens);
  img.addEventListener("mousemove", moveLens);
  /*and also for touch screens:*/
  lens.addEventListener("touchmove", moveLens);
  img.addEventListener("touchmove", moveLens);
  function moveLens(e) {
    var pos, x, y;
    /*prevent any other actions that may occur when moving over the image:*/
    e.preventDefault();
    /*get the cursor's x and y positions:*/
    pos = getCursorPos(e);
    /*calculate the position of the lens:*/
    x = pos.x - (lens.offsetWidth / 2);
    y = pos.y - (lens.offsetHeight / 2);
    /*prevent the lens from being positioned outside the image:*/
    if (x > img.width - lens.offsetWidth) {x = img.width - lens.offsetWidth;}
    if (x < 0) {x = 0;}
    if (y > img.height - lens.offsetHeight) {y = img.height - lens.offsetHeight;}
    if (y < 0) {y = 0;}
    /*set the position of the lens:*/
    lens.style.left = x + "px";
    lens.style.top = y + "px";
    /*display what the lens "sees":*/
    result.style.backgroundPosition = "-" + (x * cx) + "px -" + (y * cy) + "px";
  }
  function getCursorPos(e) {
    var a, x = 0, y = 0;
    e = e || window.event;
    /*get the x and y positions of the image:*/
    a = img.getBoundingClientRect();
    /*calculate the cursor's x and y coordinates, relative to the image:*/
    x = e.pageX - a.left;
    y = e.pageY - a.top;
    /*consider any page scrolling:*/
    x = x - window.pageXOffset;
    y = y - window.pageYOffset;
    return {x : x, y : y};
  }
}
</script>



<p>Für eine vergrößerte Ansicht bewegen Sie bitte die Maus über das Bild:</p>

<div class="img-zoom-container">
  <img id="myimage" src="'%bild%'" width="138" height="195">
  <div id="myresult" class="img-zoom-result"></div>
</div>

<br> </br>


<script>
// Initiate zoom effect:
imageZoom("myimage", "myresult");
</script>
}
Also wenn ich den Pretest-Link aufrufe, dann finde ich im Quellcode der Seite (kann man im Browser ansehen) kein imageZoom - also scheint der CSS- und JavaScript-Code einfach nicht eingebunden zu werden.

Haben Sie den Code (also den oberen Teil) direkt im Layout untergebracht? Dann prüfen Sie bitte, ob der Fragebogen das richtige Layout verwendet. Beziehungweise ob das richtige Layout als Standard ausgewählt ist.

Und der unsere Code "Initiate zoom effect" muss unter dem Bild stehen. Aber da ist er nicht. Ich vermute, da müssten Sie den HTML-Code, mit dem Sie das Bild einbinden, noch ergänzen.
Vielen Dank für Ihre Bemühungen.
Ich muss leider sagen, dass ich ein absoluter Laie bin, was das programmieren betrifft.
Den Code für den Zoom habe ich lediglich aus dem Internet zusammenkopiert. Daher verstehe ich ihre Hinweise nicht.
Den Code habe ich bei der Funktion "Fragebogen zusammenstellen" untergebracht.
Ich habe das SoSci Survey Standard Layout ausgewählt.
Und wie genau muss ich den Code noch ergänzen?
> Den Code für den Zoom habe ich lediglich aus dem Internet zusammenkopiert. Daher verstehe ich ihre Hinweise nicht.

Nun, damit er funktioniert, muss er auf der Seite eingebunden werden. Die CSS-Befehle können Sie entweder ins Layout packen (s. Anleitung zum Fragebogen-Layout) und den JavaScript-Code könnten Sie prinzipiell auch ins Layout packen oder - was ich empfehlen würde - als Textbaustein (HTML-Code) speichern und dann in die Seite ziehen.

Die eigentliche Aktivierung des JavaScript (die letzten paar Zeilen) würde ich unter der Frage direkt als HTML-Code Element in der Seite einbinden, weil sich das ja auf jeder Seite ändert.
...