Kommentarfeld einblenden nach Vergleich von zwei vorherigen Eingaben

Question

Hallo,

ich möchte, dass die Befragten ihre aktuelle Arbeitszeit eingeben und ihre Wunscharbeitszeit.

Dies löse ich über eine Texteingabe.

Je nach Eingabe der Befragten soll ein Kommentarfeld eingeblendet werden.

Wenn Eingabe Frage 1 < Eingabe Frage 2 -> Was sind die Gründe, dass Sie weniger Arbeiten möchten
und
wenn Eingabe Frage 1 > Eingabe Frage 2 -> Was sind ihre Motive, dass Sie mehr Arbeiten möchten.

Das ist eine Vorgabe von meinem Dozenten. Leider habe ich keine Programmierkenntnisse und nutze das Tool zum ersten Mal.

Wie könnte ich diese Vorgaben umsetzen?

Vielen Dank für eure Unterstützung.

Comments

Zunächst würde ich empfehlen, dass Sie die Eingabefelder etwas schmaler einstellen und "Stunden" dahinter schreiben. Ich würde auch empfehlen, vom Lückentext auf eine "Texteingabe (offen)" zu wechseln, damit die Eingabefelder sauber untereinander stehen.

> Je nach Eingabe der Befragten soll ein Kommentarfeld eingeblendet werden.

Soll das direkt auf derselben Seite erscheinen (ein wenig anspruchsvoller) oder auf der nächsten Seite (ein wenig einfacher)?

---

Also das Ziel war eigentlich auf derselben Seite. Wenn es nicht zu umständlich ist, könnten Sie mir ja sicherheitshalber beide Varianten erklären. Vielen Dank.

Answer 1

Also das Ziel war eigentlich auf derselben Seite.

In dem Fall dürfen Sie ein klein wenig JavaScript lernen.

Hier ist die Anleitung, wie das mit dem Einblenden auf derselben Seite im Prinzip funktioniert: Fragen bei Auswahl einer bestimmten Option sofort einblenden

Sie werden in der Anleitung lesen, was es mit JavaScript-Events auf sich hat. Weil Sie keine Auswahl haben, sondern eine Texteingabe, müssen Sie nicht das "click" Event beobachten, sondern das "keyup" Event der beiden Eingabefelder.

Soweit erstmal verwirrt? Keine Sorge, ist halb so schlimm - und wenn es konkret wird, helfe ich hier im Support gerne bei den Details.

Comments

Hallo,

danke für Ihre Antwort. Für Menschen, für die Programmieren völlig Neuland ist, nicht umzusetzen. Aber ich hatte etwas Hilfe.

Es wurde ein Textbaustein mit JS-Code angelegt und zusätzlich zwei Fragetypen "Texteingabe offen." Für diese wurde eingestellt "Fragetext anzeigen": Nein.

Des Beispiel von https://www.soscisurvey.de/help/doku.php/de:create:dynamic folgend wurde dieser Code-Schnipsel übernommen:
// Wurde "Ja" oder "Vielleicht" ausgewählt, dann wird die Frage angezeigt
    // Keine Angabe ("") verwendet die Standard-Einstellung (normal anzeigen)
    frage.style.display = "";
  } else {
    // Mit der Anzeigeoption "none" wird die Frage ausgeblendet
    frage.style.display = "none";
  }


Der JS-Code, der die Eingaben auslesen soll und die Fragen einblenden lautet:

<script type="text/javascript">
// Grab the input elements
var A318_01 = document.getElementById("A318_01");
var A318_02 = document.getElementById("A318_02");
var frage1 = document.getElementById("A319_qst"); // Assume there's an element with ID 'frage'
var frage2 = document.getElementById("A320_qst"); // Assume there's an element with ID 'frage'
frage1.style.display = "none"
frage2.style.display = "none"

function compare() {
    // Check if the values are numbers
    var value1 = parseFloat(A318_01.value); // Get value as number
    var value2 = parseFloat(A318_02.value); // Get value as number

    if (isNaN(value1) || isNaN(value2)) {
        return; // Do nothing if either value is not a number
    } else {
        if (value1 > value2) {
            frage1.style.display = "block"; // Show comparison
        } else if (value1 < value2) {
            frage2.style.display = "block"; // Corrected comparison
        } else {
            frage1.style.display = "none";
            frage2.style.display = "none";
        }
    }
}

// Attach keyup events to both input fields
SoSciTools.attachEvent(A318_01, "keyup", compare);
SoSciTools.attachEvent(A318_02, "keyup", compare);

// Initial call to set the initial state
compare();
</script>

Das Web-Entwicker-Tool bringt den Fehler, dass auf die property "style" nicht zugegriffen werden kann.

---

Ja, ich hatte ja geschrieben, dass es ein klein wenig anspruchsvoller ist :)

Haben Sie den JavaScript-Code unterhalb der drei Fragen A318, A319 und A320 platziert?

Wenn ja, möchten Sie vielleicht einen Pretest-Link direkt (!) zur der betroffenen Seite erstellen und posten? Dann sehe ich mirdas gerne im Kontext an.

---

Hallo,

jetzt funktioniert es. Danke für den Hinweis, dass Textbaustein mit dem Javascript-Code unter den Fragen stehen muss. Eigentlich logisch. Ich habe diesen vor den vermeintlichen Bausteinen platziert.

Des Weiteren musste ich die Einstellungen "Fragetext anzeigen" und "Items anzeigen" von "Nein" und "Items nicht anzeigen" wieder auf Standard "Automatisch" und "Alle Items anzeigen" stellen.

Anbei nochmal der aktuelle Code:

<script type="text/javascript">
// Grab the input elements
var A318_01 = document.getElementById("A318_01");
var A318_02 = document.getElementById("A318_02");
var frage1 = document.getElementById("A319_qst"); // Assume there's an element with ID 'frage'
var frage2 = document.getElementById("A320_qst"); // Assume there's an element with ID 'frage'
frage1.style.display = "none"
frage2.style.display = "none"

function compare() {
    // Compare the two values
    var value1 = parseFloat(A318_01.value); // Get value as number
    var value2 = parseFloat(A318_02.value); // Get value as number

    if (isNaN(value1) || isNaN(value2)) {
        frage1.style.display = "none";
        frage2.style.display = "none";
    } else {
        if (value1 > value2) {
            frage2.style.display = "none";
            frage1.style.display = "block";
        } else if (value1 < value2) {
            frage1.style.display = "none";
            frage2.style.display = "block";
        } else {
            frage1.style.display = "none";
            frage2.style.display = "none";
        }
    }
}

// Attach keyup events to both input fields
SoSciTools.attachEvent(A318_01, "keyup", compare);
SoSciTools.attachEvent(A318_02, "keyup", compare);

// Initial call to set the initial state
compare();
</script>

Es musste noch das Ausblenden der jeweiligen anderen Frage in der Vergleich eingebaut werden, falls die Eingabefelder nochmal geändert werden.

Ich bitte abschließend noch um Verbesserungsvorschläge zum Code, wenn vorhanden.

Ich markiere die Frage als erledigt und danken für die Unterstützung.