+1 vote
in SoSci Survey (dt.) by s171605 (530 points)

Hallo,

Ich habe eine SVG Datei erstellt die es erlaubt die folgenden Begriffe in der Wörterbox mit einem klick zu markieren:

https://www.soscisurvey.de/CrowdWork/?act=LyXzLqnyrdHnaZK9Is7agRLn

Leider ändert sich der Farbe der Felder sobald ein weiteres mal auf das Feld geklickt wird.
Das passiert lediglich wenn ich die SVG-Felder auf Sosci definiere. Wenn ich die Felder nicht definiere wird nur die schwarze Markierung angezeigt (auch bei wiederholtem anklicken).

Kann dieser "Anpassung an das Layout" - button auf Sosci ausgestellt werden?

Beste Grüße

1 Answer

0 votes
by SoSci Survey (302k points)
edited by SoSci Survey

Ich habe eine SVG Datei erstellt die es erlaubt die folgenden Begriffe in der Wörterbox mit einem klick zu markieren

Ist gut geworden!

Ergänzen Sie auf der Fragebogen-Seite bitte einmal folgenden PHP-Code:

pageCSS('
  .SelBox.hover {
      background-color: transparent !important; 
      border-color: transparent !important; 
  }
');

SoSci Survey verwendet dafür standardmäßig die Farbe für "Item-Zeilen - bei Mausberührung" aus dem Layout.

Die Farbe, welche für den "Hover" Effekt verwendet wird, liest die SVG-Auswahl aus einem Element mit der ID "SV02_style_hover" aus, welches wiederum auf Basis der obigen CSS-Anweisung formatiert wird. Nachdem ich das nicht ohne weiteres im Browser testen kann, warte ich jetzt einfach gespannt auf Ihre Feedback ;)

by s171605 (530 points)
edited by s171605
Hat leider nichts geändert. Die Farbe ändert sich immer noch zu grün.
Sollte das vielleicht .Setbox.hover heißen?
by SoSci Survey (302k points)
Haben Sie das CSS bzw. den PHP-Befehl noch aktiv? Ich finde es im Quelltext Ihrer Seite nämlich nicht?! Erst damit kann ich weiter auf Fehlersuche gehen.
by s171605 (530 points)
Hab es jetzt wieder eingefügt!
by SoSci Survey (302k points)
Ah ja, gut, so kommen wir weiter. Ich habe oben den CSS-Code um eine Zeile ergänzt. Wenn Sie das bitte nochmal so rüberkopieren könnten?
by s171605 (530 points)
Ist drin, leider noch keine Veränderung.
by SoSci Survey (302k points)
Danke. Neben der background-color fehlte noch die border-color. Ich habe diese Zeile oben in meiner Antwort ergänzt. Neuer Versuch bitte.
by s171605 (530 points)
Habe es eingefügt. Jetzt ist keiner der Rahmen mehr sichtbar.
by SoSci Survey (302k points)
Sehr gut. Übrigens: Falls Sie Lust hätten, Ihre Umsetzung in ein paar Zeilen zu beschreiben, würden künftige Forscher:innen es Ihnen höchstwahrscheinlich danken.
by s171605 (530 points)
Nein Sie haben mich falsch verstanden ;)
Es ist mit dem aktuellen Code kein Rahmen mehr sichtbar. Also auch der zum markieren der Wörter nicht.
by SoSci Survey (302k points)
Och nee ... und ich hatte schon gehofft. Aber kein Problem, damit wir das nicht noch häufiger ausprobieren müssen, habe ich mir eine lokale Testversion gebaut und nun oben den korrekten Code in die Antwort geschrieben.

Sie haben aber noch einen kleinen Fehler in der Seite. Und zwar haben Sie vermutlich folgenden JavaScript-Code über Word kopiert:

function blurCount(inputID) {
  var input = document.getElementById(inputID);
  if (!input) {
    alert("Error: the internal variable" + inputID + " is not available on this page!“);
    return;

Nach "on this page!" steht hier kein gerades Anführungzeichen ("), sondern ein typografisches (“), welches für JavaScript nicht als Anführungszeichen gilt. Wenn der Code nicht funktioniert, liegt es daran.

Die Einladung, das mit der SVG-Grafik kurz für künftige Forscher:innen zu erklären, bleibt natürlich bestehen :)
by s171605 (530 points)
Super danke für die Info! Was meinen Sie, wie ich die Grafik erstellt habe?
by SoSci Survey (302k points)
Nur das, was Ihnen inzwischen ganz trivial erscheint: Welches Programm eignet sich? Wie ergänzt man die Rahmen? Was muss man in der SoSci-Frage einstellen? Auf meiner Erfahrung heraus wage ich die Prognose, dass das 90-95% der SoSci-Nutzer vor eine sehr große Herausforderung stellen würde.
by s171605 (530 points)
Kann ich machen. Wo?
by SoSci Survey (302k points)
Sehr gerne direkt in der Anleitung als neuen Abschnitt "Beispiel: Wörterbox":
https://www.soscisurvey.de/help/doku.php/de:create:questions:svg-select

Die Anleitung können Sie direkt editieren, wenn Sie sich mit den SoSci-Logindaten anmelden.

Alternativ auch gerne als Text oder Word-Dokument an info@soscisurvey.de, dann pflege ich das in die Anleitung ein.
by s171605 (530 points)
Hallo nochmal,

da das markieren der Wörter leider durch zufälliges rumklicken zu schnell gefunden werden, habe ich nun für jeden Buchstaben ein Feld erstellt. Die Felder lassen sich super markieren. Probleme macht es jedoch wenn ein Feld wieder abgewählt werden soll:

https://www.soscisurvey.de/CrowdWork/?act=bQhtsSBH3YFA562KH50zIxWO

1. Wie kann ich Felder wieder abwählen?
2. Muss ich für die Auswertung lediglich die korrekten Felder auf Sosci definieren?

Vielen Dank. Ich werde sobald die Aufgabe komplett richtig ist meine Erfahrung mit SVG zusammenfassen.
by SoSci Survey (302k points)
Die Steuerung der SVG-Auswahl greift nur, wenn die jeweiligen Felder als Auswahloptionen in der Frage definiert wurden. Aber da kommen wir ja schnell über die Begrenzung von 99 Optionen.

Wenn ich es richtig sehe, haben Sie auch nur 10 Felder in der Frage definiert, korrekt?

Daher meine erste Frage: Wie haben Sie die Grafik denn angelegt, sodass man alles anklicken kann? Das funktioniert mit der Grafik nämlich auch außerhalb der Fragebogens.

> Muss ich für die Auswertung lediglich die korrekten Felder auf Sosci definieren?

Wenn Sie sich Sorgen macht, dass jemand einfach alles wild anklickt, sollten Sie schon ein paar mehr Felder verknüpfen - sodass Sie bemerken, wenn jm. alles anklickt.

> leider durch zufälliges rumklicken zu schnell gefunden werden

Mein Vorschlag wäre ja gewesen, dass Sie nebend en korrekten Wörtern einfach noch 30 andere (Nicht-)Wörter klickbar machen. Das würde sich problemlos mit der Begrenzung auf 99 Optionen vertragen UND es dann würde das wilde Klicken viel weniger Spaß machen :)

Wenn Sie noch die Anzahl der Klicks auf der Seite zählen (ist mittels JavaScript relativ einfach), dann können Sie gut kontrollieren, wer schummelt.
by s171605 (530 points)
Ja genau, ich habe jeden Buchstaben klickbar gemacht (habe über jeden Buchstaben ein kleines klickbares rechteck drüber gezogen). Hätte mir eben überlegt dass ich einfach nur die korrekten Buchstaben (und einige Kontrollbuchstaben) definiere, für die Auswertung. Zusätzlich steht ja die ausgefüllte Grafik ja auch zur Verfügung oder?

Ich habe bisher nur den ersten Buchstaben oben links definiert. Vergessen zu erwähnen, sorry. Das Problem hier eben: Buchstabe lässt sich nicht de-markieren und wird lediglich beim hovern transparent.
by SoSci Survey (302k points)
> Zusätzlich steht ja die ausgefüllte Grafik ja auch zur Verfügung oder?

Nein.

> Das Problem hier eben: Buchstabe lässt sich nicht de-markieren und wird lediglich beim hovern transparent.

Womit (mit welchem Programm) haben Sie denn die klickbaren Rechtecke erstellt?

Denn es scheint an der Funktion, die da direkt im SVG verankert ist, zu liegen, dass man die Rechtecke klicken kann. Aber offenbar kennt diese Funktionalität keinen zweiten Klick - darum müsste sich das Script in SoSci Survey kümmern. Dieses wiederum "weiß" aber nichts von den anderen Rechtecken.
by s171605 (530 points)
Mit Inkscape habe ich die SVG Datei bearbeitet, so wie die datei davor auch (wo das gesamte Wort markiert wird). Anstatt weniger großer felder habe ich jetzt halt für jeden buchstaben ein feld gemacht.

Das heißt damit der zweite klick funktioniert müssen alle felder in sosci deklariert werden?
by SoSci Survey (302k points)
Was haben Sie in InkScape für die Rahmen eingestellt, damit diese auf Klicks reagieren?
by s171605 (530 points)
In Inkscape gibt es unter interactivity bei "on-click" den Befehl: this.style.opacity=1
Das heißt ich ziehe zuerst die Rahmen, mache diese dann unsichtbar (opacity=0) und beim klick werden diese sichtbar gemacht. Eigentlich gleich wie davor.
by s171605 (530 points)
Hallo, momentan lassen sich die definierten kästchen abwählen (unsichtbar machen), aber sobald ich ein zweites Kästchen zweimal anklicke wird das andere wieder sichtbar.
by SoSci Survey (302k points)
Ich muss es mit einmal genauer ansehen, wie die Script-Definitionen in InkScape aussehen. Aber im einfachsten Fall sollte das hier als "onclick" Event helfen:

if (this.style.opacity == 1) { this.style.opacity = 0; } else { this.style.opacity = 1; }

Das sollten Sie aber nicht für die Kästchen eintragen, die Sie auch in SoSci Survey mit Optionen verlinken. Sonst kann es vorkommen, dass SoSci Survey einen anderen Wert speicher (ausgewählt oder nicht) als es angezeigt wird.
by s171605 (530 points)
edited by s171605
Mit diesem Befehl funktioniert es bei dem obigen testlink (habe die Variante mit den Dummievariablen umgesetzt). Bei der Variante mit den einzelnen Buchstaben hackt es noch ein bisschen: https://www.soscisurvey.de/CrowdWork/?act=bIqmtqN4Fmesf1652z2Fnmto
by SoSci Survey (302k points)
Dieser Link zeigt mir auch eine Grafik, die ganze Bilder einrahmt. Und dazu nochmal mein Hinweis, dass sich die Markierung durch das Script im SVG mit der Markierung durch die SVG-Auswahl wiedersprechen könnte.

Sie könnten natürlich eine interne Variable mit 90 Items auf die Seite ziehen und folgendes JavaScript:

<script>
function toggle(element, inputID) {
  var input = document.getElementById("IV01_" + inputID);
  if (this.style.opacity == 1) {
    element.style.opacity = 0;
    input.value = "1";
  } else {
    element.style.opacity = 1;
    input.value = "2";
  }
}
</script>

Und ins SVG würden Sie dann beim onclick-Event schreiben:

toggle(this, "01")

Wenn alles funktioniert, sollte dann der Rahmen nicht nur angezeigt, sondern die Auswahl auch gleich in der internen Variable gespeichert werden.

Einschränkung: Wenn die Seite wegen fehlender Antworten oder durch den Zurück-Knopf neu geladen wird, dann sieht man die Antworten nicht mehr. Der SVG-Fragetyp nimmt sich dem explizit an.
by s171605 (530 points)
Also zurzeit lassen sich die Grafiken alle korrekt markieren und de-markieren. Glauben Sie trotzdem dass es zu Wiedersprechungen bei der Speicherung in den Variablen kommen könnte?
by SoSci Survey (302k points)
So einen Widerspruch könnten Sie wie folgt provozieren: Schalten Sie (testweise) mal den Zurück-Knopf in den Einstellungen des Fragebogens ein. Starten Sie ein Interview, markieren Sie eine Option, klicken Sie auf "Weiter" und dann "Zurück". Und dann klicken Sie nochmal drauf. Dann würde das Kästchen vermutlich schwarz, aber zugleich eine "1=nicht gewählt" im Datensatz gespeichert.

Mit anderen Knöpfen ("Interview unterbrechen", "Sprache wechseln", "in den barrierefreien Modus welchseln", einfach mal die Eingabetaste drücken) funktioniert das auch.

Deshalb würde ich empfehlen, dass Sie die mit Variablen verlinkten Kästchen (und evtl. nur die) entweder nur von SoSci Survey steuern lassen - also kein "onclick" in der Grafik definieren. Oder dass Sie die SVG-Frage weglassen und die Grafik einfach nur zusammen mit ein wenig JavaScript einbinden, um die Markierungen zu erfassen.
by s171605 (530 points)
Wenn ich die Grafiken ohne das Onclick-Event hochlade, benötige ich dann noch zusätzlich JS damit Sosci die Felder in der SVG erkennt?
by SoSci Survey (302k points)
Wenn Sie die SVG-Auswahl verwenden, ist da ja schon ganz viel JavaScript eingebaut, welches sich um die Verknüfung zwischen Grafik und Variablen kümmert.

Wenn Sie die SVG-Grafik "einfach so" in den Fragebogen einbinden, benötigen Sie eine interne Variable mit entsprechend viele Items und das o.g. toggle() JavaScript, damit Daten im Datensatz gespeichert werden.
by s171605 (530 points)
Ok, ja bisher hatte ich immer die SVG Auswahl - Fragetyp verwendet. Habe jetzt zur Probe die SVG ohne onclick event hochgeladen: https://www.soscisurvey.de/CrowdWork/?act=q1aW0XP0aWnYGK49io24K11E

Wie befürchtet lässt sich hierbei nichts mehr markieren.
by SoSci Survey (302k points)
Ohne onclick und ohne SVG-Frage geht es nicht, nein :)

Aus meiner Sicht wäre es sinnvoll, sich für eine der beiden folgenden Optionen zu entscheiden

1. SVG-Frage aber kein onclick
2. Direkt einbinden mit onclick + JavaScript und interne Variable

Darüber hinaus gäbe es, wenn Sie weiterhin über die Markierung einzelner Buchstaben nachdenken (das war ja der Punkt, warum wir hier recht lange über Lösungen grübeln) die Möglichkeit, dass Sie Lösung 1 verwenden *und* die nicht in der SVG-Frage verknüpften Buchstaben (und nur diese) noch mit einem onclick verknüpfen.
by s171605 (530 points)
Ja ich werde die markierung der einzelnen buchstaben verwenden. Aber momentan funktioniert die Variante 1 (SVG-Frage ohne onlick) nicht (siehe link oben). Könnten Sie bitte nachsehen was hier fehlt?
by SoSci Survey (302k points)
Die Fehlerkonsole im Browser meldet:

> SVG element path3580 not found

Könnten Sie nochmal prüfen, ob Sie die Elemente in der SVG-Frage alle korrekt verknüpft haben? Womöglich ist das schon das ganze Problem.

Wenn es daran nicht liegt, lassen Sie erstmal den CSS-Code weg, mit welchem wir das "Nachleuchten" abgewählter Optionen los geworden sind.
by s171605 (530 points)
Habe alle Elemente neu definiert und den CSS code entfernt. Immer noch nicht klickbar leider.
by SoSci Survey (302k points)
Sie haben für die Auswahlelemente in Ihrer Grafik sehr viele Eigenschaften definiert, u.a. dass Füllung und Linie (stroke) durchsichtig sein sollen (opacity: 0). Könnten Sie alle "opacity" bitte testweise mal von einem der Rahmen entfernen?

Um die Farben beim Mouseover kümmern wir uns dann als nächstes noch :)
by s171605 (530 points)
Habe das erste Feld oben links jetzt undurchsichtig (opacity=1) gemacht. Beim Feld rechts daneben habe ich die Füllung und Rahmen komplett rausgenommen:

https://www.soscisurvey.de/CrowdWork/?act=q1aW0XP0aWnYGK49io24K11E
by SoSci Survey (302k points)
Aber Sie haben das erste Element links oben (ID rect12403) nicht mit der SVG-Frage verbunden. Auch die anderen IDs scheinen sich geändert zu haben:

SVG element path3576 not found
SVG element path3574 not found
SVG element path3582 not found
SVG element path3584-8 not found
SVG element path3576-9 not found
SVG element path3584 not found
by s171605 (530 points)
Oh, mein Fehler. Hatte das Bild ausgetauscht. Jetzt sind die ersten vier Kästchen in der ersten Zeile Probehalber definiert. Beim zweiten Kästchen (jenes ohne Rahmen und Füllung) findet Sosci keinen Code (bzw. nur den allgemeinen Code zum Bild).
by SoSci Survey (302k points)
Bei der Füllung ist immer noch fill-opacity:0 eingetragen - deshalb sieht man im ersten Feld nichts von der Auswahl. Sie haben das Kästchen nämlich schwarz gemacht (versuchen Sie es mal mit hellblau, nur zum Testen) und als Stil für die Markierung ist im Layout ebenfalls ein schwarzer Rahmen vorgesehen.

> Beim zweiten Kästchen (jenes ohne Rahmen und Füllung) findet Sosci keinen Code

Der Inspektor im Browser bekommt es auch nicht zu"fassen", evtl. eine unglückliche Einstellung für das Kästchen.
by s171605 (530 points)
Ok, habe das erste Feld Probehalber auf hellblau gesetzt. Das zweite Feld habe ich neu gemacht und dann Füllung sowie Rahmen wieder auf "ohne Farbe" gesetzt. Wird wieder nicht erkannt von Sosci.
by SoSci Survey (302k points)
Okay, beim ersten Feld sehen Si nun, dass es funktioniert. Wenn es nicht ausgewählt ist, ist es blau - wenn man es anklickt, wird es schwarz. Next step: Tragen Sie als Farbe "weiß" ein.

Alternativ lassen Sie es schwarz oder blau und stellen in der Frage bei "Gestaltung der Knöpfe" die Option "Anpassung aller wählbaren Bereiche an das Layout". Welche Farbe das Layout verwendet, können wir dann mittels CSS anpassen.

> Das zweite Feld

Mit "stroke:none" ud "fill:none" ist da einfach kein Rahmen, also gibt es kein Element, welches klickbar wäre. Sie sollten sowohl einen Rahmen als auch eine Füllung einstellen, damit der Klick überhaupt technisch möglich ist. Die Füllung können Sie dann ggf. auf 0% deckend setzen.
by s171605 (530 points)
Danke. Ich habe die erste Wörterbox gebaut und es hat funktioniert:

https://www.soscisurvey.de/CrowdWork/?act=RSJ11tAUKEvtoVQKBjkeWUp5

Bei den anderen zwei Boxen habe ich 1:1 das Selbe gemacht. Hier funktioniert es noch nicht ganz. Könnte Sie nachsehen woran das liegt?

https://www.soscisurvey.de/CrowdWork/?act=wACjW8gbQSx72MHIR8B94CXg

und hier:

https://www.soscisurvey.de/CrowdWork/?act=i3LXAnTfGHkHPs3XHkUiO0uO

Danke!
by SoSci Survey (302k points)
Auf den ersten Blick scheinen alle drei gleichermaßen zu funktionieren. Was ist es denn, das "noch nicht ganz" funktioniert?
by s171605 (530 points)
oh ich wollte den Beitrag löschen. Hatte bei den anderen zweien eine andere Einstellung bei der Füllung, wodurch es Probleme gemacht hat. Hat sich erübrigt.

Vielen Dank!

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

...