0 votes
in SoSci Survey (dt.) by s012545 (110 points)

Sehr geehrter Herr Leiner,

wir verwenden animierte GIFs, um nach einem Prime und vor dem Targen ein erneutes Fixationskreuz einzublenden (Modul Zuordnungsaufgabe). Die Targets sind GIFS, bei denen 0.5s ein Kreuz und dann 5s eine Graphik zu sehen ist.

Jedoch starten die GIFs nicht mit dem ersten Frame, d.h. das Fixationskreuz kommt nicht zu Beginn, sondern zufällig während der Präsentation, vermutlich weil die GIFs bereits vorgeladen sind.

Kennen Sie eine Möglichkeit, die GIFs neu zu starten, nachdem der Prime erschien?

Alle „Tricks“ aus dem Netz haben leider nicht funktioniert.

Beste Grüße
Marko

2 Answers

0 votes
by SoSci Survey (328k points)

Sie werden wohl mindestens eine JavaScript-Bibliothek zur Hilfe nehmen müssen - hier ein entsprechender Thread bei StackOverflow: https://stackoverflow.com/questions/2385203/can-you-control-gif-animation-with-javascript

Ganz einfach wird es wohl nicht. Für den nicht ganz unwahrscheinlichen Fall, dass Sie sich an einem AMP versuchen: Den gäbe es kostenpflichtig (mit Nachlass für nicht geförderte Abschlussarbeiten) im Rahmen des Moduls "implizite Methoden". Sie können das Paket unverbindlich für 7 Tage testen, im Shop finden Sie einen entsprechenden Knopf.

by s012545 (110 points)
Vielen Dank für die schnelle Antwort und die Links!

Es handelt sich um eine global-local Task (Navon-Letter mit per GIF vorangestelltem Fixationkreuz), kombiniert mit einem zuvor präsentierten Prime. Da sich auch andere Paradigmen wie z.B. Attentional Blink mit animierten GIFS lösen ließen, suche ich nach einer Javascriptlösung :-)

Ich habe es eine Reihe der verlinkten Funktionen erfolglos probiert. Folgendes Script startet zumindest das GIF neu:

<img id="img8" src="letters.008.gif" onload ="resetGif('img8')">

<script type="text/javascript">
// reset an animated gif to start at first image without reloading it from server.
function resetGif(id) {
    var img = document.getElementById(id);
    var imageUrl = img.src;
    img.src = "";
    img.src = imageUrl;
};
</script>

Allerdings wird nun das GIF nicht mehr animiert, womöglich da wiederholtes Abspielen vom Browser verhindert wird.

Gibt es denn eine Möglichkeit, im soscisurvey das Vorladen temporär auszuschalten?

Beste Grüße
Marko
by SoSci Survey (328k points)
Ich sehe schon - es gibt noch einige Testparadigmen zu implementieren :) Sagen Sie Bescheid, wenn Sie eines häufiger benötigen. Dann macht es vielleicht Sinn, das fix im Modul "implizite Methoden" vorzusehen.

> Gibt es denn eine Möglichkeit, im soscisurvey das Vorladen temporär auszuschalten?

Wenn Sie ein paar Tage Zeit haben, kann ich den JavaScript-Code der Zuordnungsaufgabe sicherlich so anpassen. ABER: Ich bin nicht sicher, ob das viel bringt. Denn es kann durchaus sein, dass (einige) Browser die Bilder auch ohne explizites Preloading schon laden, wenn sie sie im Quellcode der Seite finden. Die Zuordnungsaufgabe beinhaltet die Bilder alle und zeigt nur dann per JavaScript nur sequenziell an.

> Allerdings wird nun das GIF nicht mehr animiert, womöglich da wiederholtes Abspielen vom Browser verhindert wird.

Woran haben Sie dann bemerkt, dass es neu gestartet wird? Wird nur das erste Bild aus dem GIF angezeigt? Ich habe die GIF-Datei aus Ihrem Beispiel-Code nicht, deshalb kann ich es gerade nicht ausprobieren.

Der Code tauscht "nur" die URL des Bildes aus. Sie könnten auch darüber nachdenken, den HTML-Knoten des GIFs zu kopieren und dann neu vor dem Original einzufügen. Dann sollte es jeder Browser auch wirkich neu starten und abspielen.
by s012545 (110 points)
> Woran haben Sie dann bemerkt, dass es neu gestartet wird? Wird nur das erste Bild aus dem GIF angezeigt?

Nach Einfügen des Codes erscheint das Fixationskreuz (das GIF beginnt mit dem Fixationskreuz, gefolgt vom Target) – aber das GIF wird nicht animiert, d.h. Target erscheint nicht. Ideal wäre natürlich ein Lösung, die in allen gängigen Browsern funktioniert :-)

> Der Code tauscht "nur" die URL des Bildes aus. Sie könnten auch darüber nachdenken, den HTML-Knoten des GIFs zu kopieren und dann neu vor dem Original einzufügen. Dann sollte es jeder Browser auch wirkich neu starten und abspielen.

Sobald ich das Bild erneut aufrufe, wird das GIF endlos neu gestartet, d.h. anstatt komplett (5.5sec) abzulaufen startet es nach ca. 0.5sec von vorn ..

Ich habe nun versucht, das GIF per Javascript beim Laden der Seite aufzurufen:

<script type="text/javascript">
function loadimage(src) {
    var img = document.createElement("img");
    img.src = src;
}
</script>

und dann als Text innerhalb der Zuordnungsaufgabe:

<body onload ="loadimage("letters.008.gif")">

Leider wird nun das GIF gar nicht geladen..


> Ich sehe schon - es gibt noch einige Testparadigmen zu implementieren :) Sagen Sie Bescheid, wenn Sie eines häufiger benötigen. Dann macht es vielleicht Sinn, das fix im Modul "implizite Methoden" vorzusehen.

Wir nutzen ja soscisurvey bereits jetzt als Plattform für klassische Paradimen (wie z.B. Simon- bzw. Stroop-Interferenz, Aufgabenwechsel, etc.). Bislang haben wir Dinge wie Fehlerrückmeldung oder Speicherung der randomisierten Reihenfolge per Script implementiert. Eine Erweiterung von soscisurvey in diese Richtung wäre prima!
by SoSci Survey (328k points)
Was das aktuelle GIF-Problem angeht: Schicken Sie mir doch bitte einmal die Zuordnungsaufgabe im aktuellen Zustand als XML an info@soscisurvey.de - und bitte auch die ersten 2-3 GIF-Bilder, die dort verwendet werden, damit ich das einmal "live" ansehen kann. Kann ja nicht so schwer sein, das zum Laufen zu bekommen ;)

> Eine Erweiterung von soscisurvey in diese Richtung wäre prima!

Vielleicht wollen Sie mir noch eine zweite E-Mail schicken, wo Sie die 2-3 wichtigsten Baustellen kurz skizzieren (gerne gleich mit angehängtem Referenz-Paper zur Methode). Die IAT- und AMP-Implementierungen sind auch in Kooperation mit einem Kollegen entstanden, der das Gefrickel mit GIF-Animationen leid war...
by s012545 (110 points)
Sehr geehrter Herr Leiner,

trotz Versuchen mit unterschiedlichen Browsern habe ich die animierten GIFs nicht zum laufen bekommen. Haben Sie noch eine Idee (ich hoffe die beiden Emails an info@soscisurvey.de sind angekommen)?

Alternativ bliebe nur, das Experiment in zwei Zuordnungsaufgaben zu zerlegen, und beide Teile per Array zu verknüpfen und anschließend die Reihenfolge aller Zweierblöcke zu randomisieren ..

Beste Grüße
Marko
by SoSci Survey (328k points)
E-Mail ist angekommen - ich bin aber noch nicht dazu gekommen, das Ganze im Detail anzusehen. Ich bin optimistisch, dass sich das Problem lösen lässt :)
0 votes
by SoSci Survey (328k points)

Danke für die Übermittlung der Fragen und Bilder. Als erstes fiel mir der folgende Versuch auf, das GIF neu zu starten:

<body onload ="loadimage("letters.008.gif")">

Das war als Text innerhalb eines Items eingetragen. Nachdem alle Items auf der Seite geladen werden, führt das einfach nur dazu, dass der HTML-Code der Seite ungültig wird. Denn es ist nur ein <body> Tag erlaubt/sinnvoll.

Was Sie eigentlich suchen ist eine Möglichkeit, die JavaScript-Funktion zum Neustart des GIFs dann zu aktivieren, wenn ein neuer Stimulus sichtbar wird. Dafür unterstützt die Zuordnungsaufgabe seit einer Weile Events - spezifisch für ihren Fall "present". Weitere sind in der Anleitung zur Zuordnungsaufgabe erläutert.

Sie würden also folgenden JavaScript-Code verwenden, um eine Funktion restartGIF() immer beim Erscheinen des Stimulus aufzurufen:

assignmentGL13.addEventListener("present", restartGIF);

Im Ereignis-Objekt haben Sie dann auch die Nummer des Items. Hier nur einmal zur Demonstration (bitte JavaScript-Konsole im Browser öffnen):

<script type="text/javascript">
function restartGIF(evt) {
  console.log(evt.detail.item);
}

var question = document.getElementById("GL13_qst");
question.addEventListener("present", restartGIF);
</script>

Damit es funktioniert, müssen Sie Ihren <img>-Tags bitte IDs geben, also z.B. für Ihr erstes Item bzw. dessen "Text"

<img src="letters.007.gif" style="max-width: 100%" id="GL13_1">

Tun Sie sich den Gefallen und nummerieren Sie einfach am Ende entsprechend der Itemnummer durch. Also GL13_1 für das GIF im ersten Item, GL13_2 für das GIF im zweiten Item u.s.w.

Jetzt können wir den JS-Code verwenden, der dem Bild zunächst sein RC entzieht und dann wieder gibt. Sieht zusammen aus wie folgt:

<script type="text/javascript">

function restartGIF(evt) {
  var imgID = "GL13_" + evt.detail.item;
  var img = document.getElementById(imgID);
  if (img) {
    var filename = img.src;
    img.src = "";
    img.src = filename ;
  }
}

var question = document.getElementById("GL13_qst");
question.addEventListener("present", restartGIF);

</script>

In meinem ersten Test funktioniert das überraschend gut :) Ich habe bisher aber nur in Firefox getestet.

by SoSci Survey (328k points)
PS: Laut Kommentar in StackOverflow funktioniert das evtl. nicht in Edge. Aber ich denke, mit dem Rahmen können Sie auch elaboriertere Funktionen zum Neustart des GIF einbinden. Also z.B. Knoten aus dem HTML-Baum entfernen, ein neues <img> mit demselben Dateinamen anlegen und dann anstelle des alten einfügen.

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

...