Schieberegler und Fragentext neu organisieren

Question

Guten Tag,

ich nutze das Fragenformat Schieberegler. Ich würde nun gerne den Fragentext mittig statt linksbündig orientieren und den Schieberegler direkt darunter (statt daneben) positionieren. Könnten Sie mir eventuell weiterhelfen, ob dies möglich ist?

Vielen Dank

Answer 1

Der Fragetext sollte immer überhalb des Schieberegler stehen, solange die Frage im Kasten "Frage-Text" steht. Um diesen mittig zu zu orientieren:

<p class="mittig"> Fragetext ..... </p>

<style>
.mittig {
  text-align: center;
}
</style>

Auf den blauen Text klicken. Davor müssen Sie sich allerdings für ein Layout entscheiden.

Comments

Danke, das funktioniert. Ich hätte dazu schreiben sollen, dass ich die Fragen aus mehrern Rubriken abrufe, randomisiere und dann entsprechend anzeigen lassen. Der Fragetext wird also dynamisch aus den Rubrikbestandteilen ausgelesen. Ist es jetzt auch möglich, generell die Position des Fragetextes neu zu positionieren?

---

Ja, das sollte gehen über: Fragebogen Layout -> Fragebogen Elemente ->  Hauptelemente -> Fragetext allgemein:  dann dort einmal einfach text-align: center; an die letzte Stelle eintragen. Ich habe es nicht getestet, aber theoretisch sollte es so gehen. Dann werden alle Fragetexte (Achtung, das sind nicht die Itemtexte) mittig dargestellt.

---

Entschuldigen Sie aber unter Fragebogen Layout werden mir nur die verschiedenen Vorlagen angezeigt? Außerdem würde ich gerne den Fragetext mittig positionieren aber auch Regler und Itemtext näher zusammenziehen. Danke"

---

Ich habe Ihnen ein Screenshot oben hinterlegt.

"Regler und Itemtext näher zusammenziehen." Das können Sie in den Frageeinstellungen wahrscheinlich machen. Das müssten Sie einfach mal ausprobieren, ansonsten einen Screenshot und/oder Pretest link auf die betroffene Seite posten und noch einmal erklären, was sie gerne hätten. So ist das schwierig nachzuvollziehen.

---

Den Text konnte ich neu positionieren. Das ist schonmal super, danke! Jedoch möchte ich das nicht für alle Fragen meines Fragebogens ändern sondern nur für die vom Typ Schieberegler und hier komme ich leider nicht weiter.

In diesem Beispiel sollte nun der Begriff studentisch und der Regler näher zusammengerückt sein, als auch unter dem Begiff Mutterschaft stehen. Ich füge oben einen Screenshot ein

Außerdem ist hier ein pretest Link zur entsprechenden Seite: https://www.soscisurvey.de/maps1/?act=S4qsQWRwTSqZzaJVEyMxv1gz

Answer 2

Jedoch möchte ich das nicht für alle Fragen meines Fragebogens ändern sondern nur für die vom Typ Schieberegler

Sie können im Layout im <style>-Bereich der "HTML-Vorlage" folgendes einfügen:

div.S2slider div.s2label {
  text-align: center;  
}

(die Groß-/Kleinschreibung ist relevant)

Comments

Vielen Dank für die erneute Rückmeldung. Jedoch löst dies leider mein Problem bislang nur bedingt, da es nur den Text ein bisschen in die Mitte verschiebt, der Regler aber an gleicher Stelle verbleibt. Ich habe folgendes probieert:

div.S2slider {
  display: flex;
  flex-direction: column;  /* Ordnet die Elemente vertikal an */
  align-items: center;     /* Zentriert die Elemente horizontal */
  justify-content: center; /* Zentriert die Elemente vertikal, falls der Container eine große Höhe hat */
  width: 100%;             /* Optional: sorgt dafür, dass der Container volle Breite einnimmt */
}

div.S2slider div.s2label {
  text-align: center;      /* Zentriert die Beschriftung */
  margin-bottom: 10px;     /* Verringert den Abstand zwischen Label und Schieberegler */
}

div.S2slider input[type="range"] {
  width: 100%;             /* Der Schieberegler nimmt die volle Breite des Containers ein */
  max-width: 400px;        /* Optional: stellt sicher, dass der Schieberegler nicht zu breit wird */
  margin: 0 auto;          /* Zentriert den Schieberegler horizontal im Container */
  display: block;          /* Macht den Schieberegler zu einem Block-Element */
}

...hierdurch wird die visuelle Verankerung verschoben aber nicht der Regler selbst.

Außerdem werden ja nun weiterhin alle Texte mittig positioniert. Ich würde dies aber gerne auf bestimmte Items (die vom Typ Schieberegler) begrenzen. Über Ihre Hilfe zu diesen zwei Problemen würde ich mich freuen

---

Habe es nun so gelöst, falls mal jemand etwas ähnliches machen möchte:

Ich habe diesen Code unter php Code eingefügt:

pageCSS('
    div.s2question {
      text-align:center;
    }
');

pageCSS('
    div.S2slider {
      position: relative; /* Ermöglicht die Verwendung von top, left, bottom, right */
      left: 50%;          /* Verschiebt den Slider 50% von der linken Seite */
      transform: translateX(-50%); /* Zentriert den Slider exakt */
      width: 80%;         /* Passt die Breite des Sliders an */
      max-width: 600px;   /* Maximale Breite */
      margin-top: 30px;   /* Optional: Abstand nach oben */
    }
');

Vermutlich nicht die eleganteste Variante, aber es funkitoniert.

---

Bitte denken Sie daran, dass die Befragten u.U. mit unterschiedlich großen Bildschirmen an der Erhebung teilnehmen - manche vielleicht auch mit dem Smartphone. Prüfen Sie, ob Ihre Lösung da noch so funktioniert, wie Sie es sich vorstellen.