SVG Frage. Anpassung an das Design

Question

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

Answer 1

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 ;)

Comments

Hat leider nichts geändert. Die Farbe ändert sich immer noch zu grün.
Sollte das vielleicht .Setbox.hover heißen?

---

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.

---

Hab es jetzt wieder eingefügt!

---

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?

---

Ist drin, leider noch keine Veränderung.

---

Danke. Neben der background-color fehlte noch die border-color. Ich habe diese Zeile oben in meiner Antwort ergänzt. Neuer Versuch bitte.

---

Habe es eingefügt. Jetzt ist keiner der Rahmen mehr sichtbar.

---

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.

---

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.

---

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 :)

---

Super danke für die Info! Was meinen Sie, wie ich die Grafik erstellt habe?

---

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.

---

Kann ich machen. Wo?

---

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.

---

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.

---

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.

---

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.

---

> 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.

---

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?

---

Was haben Sie in InkScape für die Rahmen eingestellt, damit diese auf Klicks reagieren?

---

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.

---

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.

---

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.

---

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

---

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.

---

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?

---

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.

---

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?

---

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.

---

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.

---

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.

---

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?

---

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.

---

Habe alle Elemente neu definiert und den CSS code entfernt. Immer noch nicht klickbar leider.

---

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 :)

---

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

---

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

---

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).

---

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.

---

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.

---

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.

---

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!

---

Auf den ersten Blick scheinen alle drei gleichermaßen zu funktionieren. Was ist es denn, das "noch nicht ganz" funktioniert?

---

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!