Fragencode für Schieberegler

Mehr
2 Monate 2 Wochen her - 2 Monate 2 Wochen her #172081 von HerrnFugbaum
HerrnFugbaum erstellte das Thema Fragencode für Schieberegler
Hallo zusammen,

ich versuche einmal, es so anschaulich wie möglich zu verbalisieren und hoffe, dass es verständlich sein wird:

Durch ein Update der LimeSurvey-Version scheinen hier manche CSS-Codes nicht mehr zu funktionieren und wir sind bei der Neuerstellung eines bestimmten Codes bis dato etwas überfragt.

Es geht inhaltlich bei der Umfrage um Bevölkerungsgruppen und technisch darum, dass die Umfrageteilnehmer anhand eines modifizierten Schiebereglers darstellen sollen, wo sie ihre "Eigengruppe" in Bezug auf die Gesellschaft sehen. Dabei soll die Eigengruppe anhand eines kleinen, verschiebbaren Kreises und die Gesellschaft anhand eines großen, fixierten Kreises dargestellt werden. Verschiebt man den kleinen Kreis auf das Maximum des Schiebereglers (=100), soll dieser genau mittig innerhalb des großen Kreises liegen (inhaltlich würden dann die Teilnehmer ihre Eigengruppe zentral innerhalb der Gesellschaft sehen) und das Minimum des Schiebereglers (=0) läge außerhalb des großen Kreises (was inhaltlich bedeuten würde, dass die Eigengruppe als außerhalb der Gesellschaft wahrgenommen wird). Momentan sehen die Schieberegler recht klassisch aus, zur Veranschaulichung wie es zurzeit aussieht und wie es im besten Fall aussehen soll, folgendes Bild:




Bisher sah der Code, der nun nicht mehr so tut wie wir uns das wünschen, wie folgt aus:
#question60027 .ui-slider::after {
 
    border: solid 1px gray;
 
    content: ' ';
 
    font-weight: 100;
 
    font-size: 155px;
 
    width: 220px;
 
    height: 220px;
 
    border-radius: 50%;
 
    display: block;
 
    position: absolute;
 
    right: -130px;
 
    z-index: 0;
 
    top: -100px;
 
}
 
#question60027 .ui-slider {
 
margin-top: 110px;
 
margin-bottom: 110px;
 
width: 130px;
 
}
 
#question60027 .ui-slider-1 {
 
width: 130px;
 
}
 
#question60027 .ui-slider-handle {
 
    left: 50%;
 
    width: 33px;
 
    height: 33px;
 
    top: -12px;
 
    border-radius: 50%;
 
}
 
#question60027 .slider-callout{
 
    display: none;
 
}
 
#question60027 .slider-reset{
 
    display: none;
 
}


Dieser Code funktioniert leider nicht mehr und es wurde schon vermutet, dass dies evtl. an den Selektoren der neuen LimeSurvey Version liegen könnte, die nun verwendet wird, da sich z.B. der Code für die Verschiebung des radio-buttons von

#answer288399X6861X597801-999{ margin: 0 0 0 50%;}

auf
.dir-ltr .ls-answers .radio-item [for="answer154788X7422X654071-999"]{margin-left: 50%;}

geändert hat.

Das zunächst einmal die Informationen, die so an mich herangetragen wurden, und die ich hoffentlich korrekt und verständlich wiedergegeben habe. Von mir wird nun erwartet einen funktionieren Code zu erstellen und ich hoffe sehr, Hilfe in diesem Forum dafür finden zu können, da ich bisher noch im LimeSurvey-Nichtschwimmerbecken unterwegs bin.


Version 3.13.2+180709
Betriebssystem ist Win7
Browser Chrome oder Firefox
Anhang:
Letzte Änderung: 2 Monate 2 Wochen her von HerrnFugbaum.

Bitte Anmelden oder Registrieren um an der Konversation teilzunehmen.

Jetzt loslegen!

Melden Sie sich jetzt an, und erstellen Sie in wenigen Minuten Ihre erste Umfrage.

Account einrichten

Abonnieren Sie unseren Newsletter

Abonnieren Sie unseren Newsletter für alle Neuigkeiten rund um LimeSurvey
captcha