Visuelle Darstellung von Werten für Teilnehmende

Question

Hallo,

ich möchte Teilnehmenden eine visuelle Auswertung ihrer Werte zeigen und habe mich dabei an Ihrer Hilfeseite https://www.soscisurvey.de/help/doku.php/de:create:feedback-visual orientiert.

Wie auf dieser Hilfeseite habe ich eine Skala mit einer Markierung eingebunden und möchte darauf z-Werte zwischen -3 und +3 (bzw. die jeweilig skalierten Werte zwischen -300 und +300 anzeigen.)

Mein Problem ist, dass diese Werte nicht zur Skala passen bzw. diese nicht richtig positioniert zu sein scheint. So werden zum einen extreme Werte von -3/+3 (bzw. -300/+300) nicht an den Enden der Skala angezeigt und zum anderen liegt der Ursprung (der Wert "0") nicht in der Mitte der Skala.

Im Bild hat die orangene Markierung den Wert -300 und die blaue den Wert +300.

Der HTML-Code dazu sieht wiefolgt aus:

 <div style="position: relative">
  <!-- Die Skala liegt im Hintergrund -->
  <div style="margin: 0 auto; width: 467px; height: 30px; background-image:url('Slider.svg')">
      <!-- Zur Platzierung der Markierung wird eine Einheit (Bereich 0 bis 1) als Blockelement platziert -->
      <div style="position: absolute;  top: -4px;  left: 50%; width: 65px; height: 15px">
        <!-- Die eigentliche Markierung wird an der richtigen Stelle eingefügt -->
        <img src="marker_orange.svg" alt="" style="position: absolute; left: -300%" />
        <img src="marker_blue.svg" alt="" style="position: absolute; left: +300%; margin-left: -8px" />
     </div>
  </div>
</div>

Vielen Dank für Ihre Hilfe!

Answer 1

Das dritte <div> definiert den Bereich, in welchem sich die Markierungen bewegen sollen:

<div style="position: absolute;  top: -4px;  left: 50%; width: 65px; height: 15px">

Genau genommen wir hier der Bereich von 0 bis +1 definiert. Sie können Sie das erstmal anzeigen lassen mit einem Rahmen:

<div style="position: absolute;  top: -4px;  left: 50%; width: 65px; height: 15px; border: 1px solid red;">

Durch diese Definition wird dann -300% dreimal diese Breite nach links platziert. Das ganze müssen sie am Ende noch um die halbe Breite der Markierungen nach links verschieben.

Im Prinzip kann man den Bereich auch komplett definieren, und die Markierungen dann von left:0 bis left:100% setzen. Dafür muss man den Wertebereich natürlich ein wenig umrechnen: (x+3) / 6 *100%

Comments

Okay, also wenn die komplette Graphik einen Bereich von -3 bis +3 abbilden soll, müsste der von <div> definierte Bereich eigentlich die rechte Hälfte des "durschnittlich"-Balken abdecken (da bei z-Werten durchschnittliche Werte von -1 bis +1 reichen). Habe ich das richtig verstanden?

Aktuell sieht dieser Bereich allerdings falsch positioniert aus (Siehe aktualisierter Screenshot in der ursprünglichen Frage). Bedeutet das ich muss den Bereich kleiner machen oder die Graphik größer oder kann man dies auch ohne großes Herumprobieren lösen?

---

Die Mitte sieht korrekt aus, aber wenn Sie möchten, dass die Markierung +3 am Ende ganz rechts sitzt (und nicht mittig über "sehr hoch"), dann müssten Sie die Distanz von der Mitte bis ganz rechts ausmessen (in Pixeln, versteht sich), den Wert dritteln und als Breite für die Box eintragen. Dort wo jetzt width: 65px steht. Ich komme anhand der obigen Codes auf 77 Pixel (467px / 6).

Und dann müssen die Markierungen selbst noch einen Tick nach links, also z.B. mit folgender margin-left-Ergänzung:

position: absolute; left: -300%; margin-left: -6px;