Fragencode für Schieberegler

Plus d'informations
il y a 1 semaine 4 jours - il y a 1 semaine 4 jours #172081 par HerrnFugbaum
HerrnFugbaum a créé le sujet : 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
Pièces jointes :
Dernière édition: il y a 1 semaine 4 jours par HerrnFugbaum.

Connexion ou Créer un compte pour participer à la conversation.

Commencez dès maintenant !

Créez simplement un compte et commencez à utiliser LimeSurvey dès aujourd'hui.

Inscrivez-vous maintenant

Inscrivez-vous à notre Newsletter!