0 votes
in SoSci Survey (dt.) by s222544 (565 points)

Hallo SoSci Survey Support,

vielen Dank für Ihre bisherige Hilfe!

Ich habe in meinem Projekt einen Knopf eingefügt, der von der aktuellen Seite zu der Anleitung mittels folgendem PHP Code springt:

html(
  '<div style="text-align: center; margin: 2em 0">'.
  buttonToPage('instr', 'Noch Fragen? Hier klicken für die Anleitung').
  '</div>'
);

Wie kann ich auf der Anleitungsseite einen Knopf einfügen, der den Probanden wieder auf die gleiche Seite bringt von der aus der Anleitungs-Knopf gedrückt wurde?

In meinem Experiment möchte ich vermeiden, dass nach der Anleitung einfach auf weiter gedrückt wird, damit nicht alle Stimuli erneut gezeigt werden und damit die bisherigen Antworten nicht verändert werden.

Kann zudem zusätzlich gemessen werden, ob und auf welcher Seite/ welchen Seiten der Anleitungs-Knopf gedrückt wurde?

Vielen Dank im Voraus!

1 Answer

0 votes
by SoSci Survey (304k points)

Sie können auf der Anleitungs-Seite den "Weiter"-Knopf ausblenden und den "Zurück"-Knopf anzeigen:

option('nextbutton', false);
option('backbutton', 'Okay, gelesen, zurück bitte');

Kann zudem zusätzlich gemessen werden, ob und auf welcher Seite/ welchen Seiten der Anleitungs-Knopf gedrückt wurde?

Wenn Sie buttonToPage() verwenden, dann sehen Sie zwar, ob die Seite aufgerufen wurde (anhand von TIME...), aber nicht auf welcher Seite der Knopf gedrückt wurde. Wenn Sie das haben möchten, können Sie über eine alternative Lösung nachdenken: Informationen per Mausklick einblenden und dort dann ergänzend den Abschnitt "Info-Nutzung speichern".

by s222544 (565 points)
edited by s222544
Vielen Dank für die alternative Lösung und ausführliche Anleitung.

In der verlinkten Anleitung steht, dass man den Knopf frei platzieren kann, auch im Fragetext. Wohin muss ich den HTML text <button type="button" onclick="buttonShow()">Mehr Info</button> in der Frage platzieren, damit er im Fragetext erscheint?

Vielen Dank im Voraus!
by s222544 (565 points)
edited by s222544
Um die Nutzung zu speichern, habe ich eine interne Variable mit 10 Items anlegt (weil ich 10 Infoboxen auf 10 Seiten überwachen möchte).
Welchen Code soll ich dafür benutzen?
var info = document.getElementById("infoBox");
var intVar = document.getElementById("AB01_01"); // Hier muss die Kennung der internen Variable eingetragen werden
info.style.display = "none"; // Box ausblenden
intVar.value = "1";
 
function buttonShow() {
  // Infobox anzeigen
  info.style.display = "";
  // Abspeichern, dass der Button angeklickt wurde
  intVar.value = "2";
}
function buttonHide() {
  // Infobox wieder ausblenden
  info.style.display = "none";
}

oder diesen

<script type="text/javascript">
<!--
var info = new infoButton();
 
// Die folgende Zeile für jeden Knopf wiederholen (hier z.B. für 3 Knöpfe)
info.registerInfo("infoButton1", "infoBox1", "infoClose1", "IV01_01");
info.registerInfo("infoButton2", "infoBox2", "infoClose2", "IV01_02");
info.registerInfo("infoButton3", "infoBox3", "infoClose3", "IV01_03");
//-->
</script>

Die derzeitige Ordnung im Fragebogen lautet: Interne Variable, Textbox (mit Inhalt und weitere Fragen.

Vielen Dank im Voraus!
by SoSci Survey (304k points)
Was funktioniert denn schon und was nicht?

Generell ist die Lösung mit einem Objekt (hier der infoButton) sinnvoll, wenn man mehrere Knöpfe auf derselben Seite hat. Ansonsten tun es auch die "normalen" Funktionen. Diese kann man übrigens auch als "Text" mit Darstellung "HTML-Code" ablegen, sodass man sie nur in die einzelnen Seiten hineinziehen muss.
by s222544 (565 points)
Vielen Dank für Ihre Antwort.

Gerade habe ich als eine HTML Code Box:
<script type="text/javascript">
var info = document.getElementById("infoBox");
var intVar = document.getElementById("IN01"); // Hier muss die Kennung der internen Variable eingetragen werden
info.style.display = "none"; // Box ausblenden
intVar.value = "1";
 
function buttonShow() {
  // Infobox anzeigen
  info.style.display = "";
  // Abspeichern, dass der Button angeklickt wurde
  intVar.value = "2";
}
function buttonHide() {
  // Infobox wieder ausblenden
  info.style.display = "none";
}

dann als nächste HTML-Code Box: <button type="button" onclick="buttonShow()">Hier klicken für die Anleitung!</button>

Danach in einer Rubrik der angelegte Text:
<!-- Zunächst der Knopf zum Anzeigen der Info -->
<p> </p>
<p></p>
<p style="margin-top: 2em"> </p>
 
<!-- Und dann die Info-Box -->
<div id="infoBox" style="width: 400px; padding: 5px; background-color: white; border: 2px solid #CCCCCC">

<p> Hier steht die Anleitung </p>

  <p style="text-align: center; margin-top: 20px">
    <button type="button" onclick="buttonHide()">Schließen</button>
  </p>
</div>
 
<!-- Der JavaScript-Code -->
<script type="text/javascript">
<!--
var info = document.getElementById("infoBox");
info.style.display = "none"; // Box ausblenden
info.style.position = "absolute";
info.style.zIndex = 999;
// Entweder fix auf der Seite platziert
// info.style.left = "50px";
// info.style.top = "100px";
// Oder ein definiertes Stückchen unter dem Knopf
info.style.marginTop = "10px";
 
function buttonShow() {
  // Infobox anzeigen
  info.style.display = "";
}
function buttonHide() {
  // Infobox wieder ausblenden
  info.style.display = "none";
}
//-->
</script>

Das führt dazu, dass derzeit nichts richtig angezeigt wird und wahrscheinlich auch nicht abgelegt in der internen Variable.

Ich möchte den Button auf allen von meinen zehn Experimenten Seiten haben und möchte zudem messen, wann dieser angeklickt wurde.
by SoSci Survey (304k points)
> Das führt dazu, dass derzeit nichts richtig angezeigt wird und wahrscheinlich auch nicht abgelegt in der internen Variable.

Posten Sie gerne einen Pretest-Link direkt (!) zu der Seite mit dem Code, dann werfe ich gerne einen Blick darauf. Sie können vorab aber auf alle Fälle schonmal einen Blick in die JavaScript-Konsole Ihres Browsers werfen: https://www.soscisurvey.de/help/doku.php/de:general:browser-tools
by SoSci Survey (304k points)
Danke. Auf der Seite oben sehe ich den Info-Text. Was ich allerdings nicht sehe ist ein Knopf "Hier klicken für die Anleitung!" - ich vermute, den HTML-Code für den Knopf haben Sie noch nicht eingefügt? Dann würde ich das als nächsten Schritt empfehlen. Und natürlich auch passendes JavaScript, welches dann auf den Knopf reagieren kann.
by s222544 (565 points)
Ich denke, ich habe den Anleitungs Knopf eingefügt:
<button type="button" onclick="buttonShow()">Hier klicken für die Anleitung!</button>

Als HTML Code direkt über diesem Code:
<script type="text/javascript">
var info = document.getElementById("infoBox");
var intVar = document.getElementById("IN01"); // Hier muss die Kennung der internen Variable eingetragen werden
info.style.display = "none"; // Box ausblenden
intVar.value = "1";
 
function buttonShow() {
  // Infobox anzeigen
  info.style.display = "";
  // Abspeichern, dass der Button angeklickt wurde
  intVar.value = "2";
}
function buttonHide() {
  // Infobox wieder ausblenden
  info.style.display = "none";
}

Danach folgt der Text als Frage inklusive Anleitung:
<!-- Zunächst der Knopf zum Anzeigen der Info -->
<p> </p>
<p></p>
<p style="margin-top: 2em"> </p>
 
<!-- Und dann die Info-Box -->
<div id="infoBox" style="width: 400px; padding: 5px; background-color: white; border: 2px solid #CCCCCC">
<p> ANLEITUNG </p>

  <p style="text-align: center; margin-top: 20px">
    <button type="button" onclick="buttonHide()">Schließen</button>
  </p>
</div>
 
<!-- Der JavaScript-Code -->
<script type="text/javascript">
<!--
var info = document.getElementById("infoBox");
info.style.display = "none"; // Box ausblenden
info.style.position = "absolute";
info.style.zIndex = 999;
// Entweder fix auf der Seite platziert
// info.style.left = "50px";
// info.style.top = "100px";
// Oder ein definiertes Stückchen unter dem Knopf
info.style.marginTop = "10px";
 
function buttonShow() {
  // Infobox anzeigen
  info.style.display = "";
}
function buttonHide() {
  // Infobox wieder ausblenden
  info.style.display = "none";
}
//-->
</script>

Des Weiteren habe ich eine interne Variable IN01 mit 10 items für jeweils 10 Knöpfe.

Meine Frage: Wie bindet man die interne Variable korrekt in den Code ein, damit gespeichert wird, ob und wann auf den Knopf gedrückt wurde.
by SoSci Survey (304k points)
Bitte prüfen sie nochmal, ob dieser Code auch auf der Seite eingebunden ist, welche ich bekomme, wenn ich den Pretest-Link aufrufe. Denn im Quellcode der Seite ist die Zeile

<button type="button" onclick="buttonShow()">Hier klicken für die Anleitung!</button>

nicht zu finden.
by SoSci Survey (304k points)
Damit klappt es. Die Fehlerkonsole im Browse beschert sich nun darüber, dass der JavaScript-Code nicht in <script>....</script>-Tags steht. Konkret fehlt das </script> unter

function buttonHide() {
  // Infobox wieder ausblenden
  info.style.display = "none";
}
by s222544 (565 points)
Vielen Dank! Die Anleitung öffnet sich jetzt.

Wie kann ich sicherstellen, dass die interne Variable die Nutzung richtig abspeichert?
by SoSci Survey (304k points)
Aktuell funktioniert das noch nicht. Zwei Probleme:

(1) Die Defintion von <div id="infoBox"...> muss über dem JavaScript-Code stehen, sonst findet der Code die Box (erstmal) nicht und bricht ab.

> Uncaught TypeError: info is null

(2) Die Kennung der internen Variable ist nicht korrekt, vermutlich lautet die korrekte HTML-ID/Variablenname IN01_01 statt nur IN01.

Aber Sie müssen die interne Variable auch in die Seite ziehen (und ggf. vorher im Fragenkatalog anlegen), damit das funktioniert.
by s222544 (565 points)
Vielen Dank!

Habe die Kennung der internen Variable angepasst. Soll ich das <div id="infoBox" style="width: 400px; padding: 5px; background-color: white; border: 2px solid #CCCCCC"> aus dem Text dann löschen?
by SoSci Survey (304k points)
Nein, das brauchen Sie. Aber Es muss halt über dem JavaScipt-Code stehen. Also ... zusammen mit dem kompletten Info-Inhalt der Box :)

Erst alle HTML-Inhalte und darunter erst das JavaScript.
by s222544 (565 points)
Danke! Habe jetzt zuerst den button type HTML Code, dann den Text mit der Anleitung, danach den javascript HTML text.

Ist das so richtig?
by SoSci Survey (304k points)
Sieht schon besser aus. Jetzt gibt es noch ein Problem: Sie definieren zwei Funktonen mit dem Namen buttonShow(). Die zweite Definition überschreibt die ersten.

Was Sie nun machen sollten: Fassen Sie den Inhalt beider Funktionen zu einer zusammen.
by s222544 (565 points)
Vielen Dank für Ihre Nachricht. Auf welchen Stand beziehen Sie sich? Ich habe gestern an dem Speichern und dem Erscheinen des Buttons gearbeitet und alles scheint zu funktionieren.
Hier ein Link zur Seite: https://www.soscisurvey.de/finrebal/index.php?i=NN1NTXRK5QBJ&rnd=YEEM

Vielen Dank!
by SoSci Survey (304k points)
Meines Erachtens birgt die Verwendung desselben Funktionsnamens und die Aufteilung dessen, was bei einem Klick auf den Knopf passieren soll, aber das Risiko, dass nur eine der beiden Aktionen (Text anzeigen + Wert speichern) ausgeführt wird. Vielleicht funktioniert es jetzt, aber kurz vor dem Start der Erhebung möchten Sie nochmal etwas ändern, und dann funktioniert es nicht mehr.

Meine Empfehlung wäre daher, dass Sie nur eine Funktion definieren, was beim Klick auf den Knopf passieren soll, und dass Sie dort beide Aktionen (Text anzeigen und interne Variable mit dem Wert 1 belegen) ausführen

Aber wenn es funktioniert, wer bin ich dann, zu meckern :)
by s222544 (565 points)
Vielen Dank!
Ich denke, ich passe den Textbaustein an und lösche die HTML Code Box mit javascript darunter.

In der Textbox hätte ich folgenden Code:
<!-- Der JavaScript-Code -->
<script type="text/javascript">
<!--
var info = document.getElementById("infoBox");
var intVar = document.getElementById("IN01_01"); // Hier muss die Kennung der internen Variable eingetragen werden
info.style.display = "none"; // Box ausblenden
intVar.value = "0";
info.style.position = "absolute";
info.style.zIndex = 999;
// Entweder fix auf der Seite platziert
// info.style.left = "50px";
// info.style.top = "100px";
// Oder ein definiertes Stückchen unter dem Knopf
info.style.marginTop = "10px";
 
function buttonShow() {
  // Infobox anzeigen
  info.style.display = "";
 // Abspeichern, dass der Button angeklickt wurde
  intVar.value = "1";
}
function buttonHide() {
  // Infobox wieder ausblenden
  info.style.display = "none";
}
//-->
</script>

Ist das so richtig?
by s222544 (565 points)
Ich glaube, es ist jetzt doch besser die HTML Code Box mit Javascript drinne zu lassen (weil die Kennungen der internen Variablen da sind) und den Javascript Teil aus dem Textbaustein zu löschen. Geht das auch?
by s222544 (565 points)
Sodass der Textbaustein so aussieht:
<!-- Zunächst der Knopf zum Anzeigen der Info -->
<p> </p>
<p></p>
<p style="margin-top: 2em"> </p>
 
<!-- Und dann die Info-Box -->
<div id="infoBox" style="width: 400px; padding: 5px; background-color: white; border: 2px solid #CCCCCC">
<p> Hier die Anleitung! </p>

  <p style="text-align: center; margin-top: 20px">
    <button type="button" onclick="buttonHide()">Schließen</button>
  </p>
</div>

Ohne den Javascript Code.

Unter dem Textbaustein im "Fragebogen zusammenstellen" folgender HTML Code:

<script type="text/javascript">
var info = document.getElementById("infoBox");
var intVar = document.getElementById("IN01_01"); // Hier muss die Kennung der internen Variable eingetragen werden
info.style.display = "none"; // Box ausblenden
intVar.value = "0";
 
function buttonShow() {
  // Infobox anzeigen
  info.style.display = "";
  // Abspeichern, dass der Button angeklickt wurde
  intVar.value = "1";
}
function buttonHide() {
  // Infobox wieder ausblenden
  info.style.display = "none";
}
 </script>

Ist das fehlerfrei?
by SoSci Survey (304k points)
> Geht das auch?

Technisch ist es egal, welche Box Sie löschen, solange der HTML-Code für den Infotext vorhanden ist und das Script, welches sich um die Aktivitäten kümmert. Sie können problemlos beides zusammen in den Textbaustein schreiben.

> Ist das fehlerfrei?

Das kann ich "frei Auge" nicht sagen. Es sieht auf den ersten Blick gut aus. Wenn es funktioniert, dann spricht vieles dafür, dass es passt. Eine Kleinigkeit: Wenn jemand den Zurück-Knopf (sofern vorhanden) nutzt, würde die interne Variablen auf 0 zurückgesetzt. Man könnte das wie folgt optimieren:

intVar.value = "0";

ändern zu

if (intVar.value == "") {
  intVar.value = "0";
}

Und wenn Sie für IN01_01 dann noch aktivieren, dass die Daten periodisch im Hintergrund übermittelt werden, dann kann es Ihnen auch egal sein, wenn jemand mittels F5 die Seite neu lädt.
by s222544 (565 points)
Vielen Dank! Wie aktiviere ich die periodische Datenübermittlung?
by SoSci Survey (304k points)
In den Einstellungen der internen Variable, wenn Sie diese im Fragenkatalog auswählen (nicht die Frage, sondern das Item).
by s222544 (565 points)
Vielen Dank! Das Entfernen vom Javascript code aus dem textbaustein und das Belassen des HTML Codes führte leider nur auf der ersten Seite zum Erfolg.

Könnten Sie sich das bitte angucken?
Hier erscheint die Anleitung, wenn man auf den Knopf drückt: https://www.soscisurvey.de/finrebal/index.php?i=GB7ZLYA0WX5A&rnd=QSYG

Hier jedoch nicht (ist eine Seite weiter): https://www.soscisurvey.de/finrebal/index.php?i=GB7ZLYA0WX5A&rnd=ANRB

Warum öffnet sich die Anleitung nicht mehr?
by SoSci Survey (304k points)
Wenn ich die beiden Links aufrufe, dann öffnet der Text in beiden Fällen.

Wenn Sie möchten, dass er nicht den restlichen Text verschiebt, können Sie noch mit position:absolute arbeiten.
by s222544 (565 points)
Bei mir öffnet sich die Anleitung nur auf der ersten Seite. Auf allen anderen folgenden Seiten passiert nichts, wnn ich den Knopf für die Anleitung drücke.
Cache und Cookies habe ich geleert, woran kann es noch liegen?
by SoSci Survey (304k points)
Führt der zweite Link von Ihnen (oben) zur richtigen Seite - funktioniert es damit also auch bei Ihnen nicht? Mit welchem Browser?
by s222544 (565 points)
Vielen Dank für den Kommentar!
Also, es scheint, dass sich die erste Anleitung direkt unter dem Knopf öffnet und die weiteren oben am Anfang der Seite.
Wie und wo benutze ich position absolute, damit die Anleitung überall direkt unter dem Knopf präsentiert wird?
Und warum gibt es den Unterschied zwischen der ersten und den nächsten Seiten bezüglich der Darstellung?

Vielen Dank!
by SoSci Survey (304k points)
Wenn Sie die Anleitung unter dem Knopf haben möchten, muss das <div> mit der Anleitung unter dem <input> des Knopfes stehen. Die Position können sie im CSS-Codes des style-Attributes im <div> eintragen.
by s222544 (565 points)
Vielen Dank für Ihre Unterstützung!

Leider finde ich das <input> nirgends.

Bei den Anweisungen zu der Frage habe ich als eigene Zeile: <button type="button" onclick="buttonShow()">Hier klicken für die Anleitung!</button>

Im Fragebogen kommt zuerst die interne Variable, dann der Textbaustein mit  <!-- Und dann die Info-Box -->
<div id="infoBox" style="width: 400px; padding: 5px; background-color: white; border: 2px solid #CCCCCC">
<p> Anleitung hier </p>
  <p style="text-align: center; margin-top: 20px">
    <button type="button" onclick="buttonHide()">Schließen</button>
  </p>
</div>

Darunter der Java Script Code im HTML Feld:
<script type="text/javascript">
var info = document.getElementById("infoBox");
var intVar = document.getElementById("IN01_01"); // Hier muss die Kennung der internen Variable eingetragen werden
info.style.display = "none"; // Box ausblenden
intVar.value = "0";
 
function buttonShow() {
  // Infobox anzeigen
  info.style.display = "";
  // Abspeichern, dass der Button angeklickt wurde
  intVar.value = "1";
}
function buttonHide() {
  // Infobox wieder ausblenden
  info.style.display = "none";
}
 </script>


Welches div muss unter welchen input?

Vielen Dank im Voraus!
by SoSci Survey (304k points)
> Leider finde ich das <input> nirgends.

Genau, Sie haben es als <button> realisiert - nehmen Sie diese Zeile.
by s222544 (565 points)
Das heißt die ganze Anleitung soll jetzt unter den button in der Frage-Anweisung?

Verliert sich damit nicht der Sinn des Anleitungs-Knopfes, wenn die Anleitung jetzt immer als Teil der Frage erscheint?

Vielen Dank für Ihre Unterstützung!
by SoSci Survey (304k points)
Ich sehe nicht, inwiefern die Anleitung als Teil der Frage erscheint?! Den Anleitungsknopf können Sie an jeder beliebigen Stelle auf der Seite platzieren (solange der JavaScript-Code darunter bleibt). Wenn Sie die Anleitung unter der Knopf haben wollen, sollten Sie den HTML-Code der Anleitung unter dem HTML-Code des Knopfes platzieren.

Und ich hatte ja schon angeregt, dass Sie mittels CSS dafür sorgen, dass die Anleitung nicht als Teil der Seite erscheint und den restlichen Inhalt verschiebt, sondern quasi als Box darüber liegt. Entsprechende Beispiele haben Sie unter https://www.soscisurvey.de/help/doku.php/de:create:popup
by s222544 (565 points)
Derzeit erscheint mein <button type="button" onclick="buttonShow()">Hier klicken für die Anleitung!</button> direkt nach einer Frage als Teil der Anweisungen.
Verstehe ich Sie richtig, dass Sie empfehlen, dass ich den Textbaustein lösche und den Inhalt des Textbausteines direkt unter dem <button type="button" onclick="buttonShow()">Hier klicken für die Anleitung!</button> einfüge?

Sozusagen:
<button type="button" onclick="buttonShow()">Hier klicken für die Anleitung!</button>
<div id="infoBox" style="width: 400px; padding: 5px; background-color: white; border: 2px solid #CCCCCC">
<p> Hier steht die Anleitung </p>
<p style="text-align: center; margin-top: 20px">
    <button type="button" onclick="buttonHide()">Schließen</button>
  </p>
</div>

Ich bitte Sie höflich um eine verständlichere Erklärung. Vielen Dank!
by SoSci Survey (304k points)
> Derzeit erscheint mein <button type="button" onclick="buttonShow()">Hier klicken für die Anleitung!</button> direkt nach einer Frage als Teil der Anweisungen.

Verstehe, dies war so nicht ersichtlich. Sie können den HTML-Code natürlich an beliebiger Stelle einbinden. Und wenn Sie den Textbaustein mit passendem style/CSS einfügen, dann wird es auch nicht so aussehen, als sei die Anleitung Teil der Frage.

Wenn Sie die Anleitung (vom HTML-Code her) über die Frage setzen, müssen sie im style/CSS einfach dafür sorgen, dass es ein wenig weiter unten angezeigt wird. Das könnt z.B. so aussehen:

<div style="position: relative">
  <div id="infoBox" style="position: absolute; top: 80px; width: 400px; padding: 5px; background-color: white; border: 2px solid #CCCCCC">
  ... Inhalt ...
  </div>
</div>

Darunter dann die Frage mit dem <button>
by s222544 (565 points)
Vielen Dank! Alles funktioniert!

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

...