Welcome to the LimeSurvey Community Forum

Ask the community, share ideas, and connect with other LimeSurvey users!

Creating a Radio Button List with Circled Numbers in a Single Choice Question

modernity4r
Topic Author
Offline
Senior Member

More

4 months 4 weeks ago - 4 months 4 weeks ago #252664 by modernity4r

Creating a Radio Button List with Circled Numbers in a Single Choice Question was created by modernity4r

File Attachment:

File Name: limesurvey...1-27.lss
File Size:25 KB

Please help us help you and fill where relevant:
Your LimeSurvey version: 6.3.6+
Own server or LimeSurvey hosting: Both
Survey theme/template: vanilla
==================
I would like to use circled numbers 1, 2, 3, 4, 5, 6, 7 in a single choice question that utilizes a radio button list. I know how to create a combination of circled numbers and words with Bootstrap buttons, but I'm curious about how to do this with a radio list. Unlike creating colored circles in a radio button list, I've been continually failing to incorporate circled numbers.

Attachments:

list.png

Last edit: 4 months 4 weeks ago by modernity4r.

Please Log in to join the conversation.

Joffm
Away
LimeSurvey Community Team

More

4 months 4 weeks ago #252685 by Joffm

Replied by Joffm on topic Creating a Radio Button List with Circled Numbers in a Single Choice Question

Hi,
with this css

Code:

<style type="text/css">
#question{QID} .radio-item label {
        padding-left: 36px;
        padding-top: 10px;;
 }
#question{QID} .radio-item label::before {
        width: 40px;
        height: 40px;
        left: 0;
        top: 0;
        border: 3px solid #ccc;
 }
#question{QID} .radio-item label::after {
        width: 24px;
        height: 24px;
        left: 8px;
        top: 8px;
}
 
#question{QID} .radio-item:nth-child(1) label::before {
        content: "1";
        padding-left: 12px;
        padding-top: 8px;
}
#question{QID} .radio-item:nth-child(2) label::before {
        content: "2";
        padding-left: 12px;
        padding-top: 8px;
}
#question{QID} .radio-item:nth-child(3) label::before {
        content: "3";
        padding-left: 12px;
        padding-top: 8px;
}
#question{QID} .radio-item:nth-child(4) label::before {
        content: "4";
        padding-left: 12px;
        padding-top: 8px;
}
#question{QID} .radio-item:nth-child(5) label::before {
        content: "5";
        padding-left: 12px;
        padding-top: 8px;
}
</style>

I get this

Joffm

Volunteers are not paid.
Not because they are worthless, but because they are priceless

The following user(s) said Thank You: modernity4r

Please Log in to join the conversation.

modernity4r
Topic Author
Offline
Senior Member

More

4 months 4 weeks ago #252696 by modernity4r

Replied by modernity4r on topic Creating a Radio Button List with Circled Numbers in a Single Choice Question

Thank you very, very much. I will make good use of it. It's very intellectually stimulating.

Please Log in to join the conversation.

modernity4r
Topic Author
Offline
Senior Member

More

2 months 3 weeks ago - 2 months 3 weeks ago #255450 by modernity4r

Replied by modernity4r on topic Creating a Radio Button List with Circled Numbers in a Single Choice Question

When changing the columns of the answer list to 2 or 3, the circled numbers restart at 1 for each column. May I ask for a solution, please?

Attachments:

Last edit: 2 months 3 weeks ago by modernity4r.

Please Log in to join the conversation.

Joffm
Away
LimeSurvey Community Team

More

2 months 3 weeks ago #255455 by Joffm

Replied by Joffm on topic Creating a Radio Button List with Circled Numbers in a Single Choice Question

If you investigate with the webdevelopment tool of your browser (F12) you see that this questioon type is realized by an unordered list.
If you have more than one column there are more lists.
This you have to consider.

A solution could be

Code:

...
#question{QID} .list-unstyled:nth-child(1) .radio-item:nth-child(4) label::before {
        content: "4";
        padding-left: 12px;
        padding-top: 8px;
}
#question{QID} .list-unstyled:nth-child(2) .radio-item:nth-child(1) label::before {
        content: "5";
        padding-left: 12px;
        padding-top: 8px;
}
...

But a much better and easier solution is to use bootstrap buttons with stacked fontawesome 4.7. icons

Just style the button to your wish.

Code:

<style type="text/css">
.fruity .btn-primary, .fruity .btn-primary.disabled, .fruity .btn-primary.disabled.active, .fruity .btn-primary.disabled:active, .fruity .btn-primary.disabled:focus, .fruity .btn-primary.disabled:hover {
    text-align: left;
    background-color: transparent;
    color: #328637;
}
</style>

Volunteers are not paid.
Not because they are worthless, but because they are priceless

The following user(s) said Thank You: DenisChenu, modernity4r

Please Log in to join the conversation.

Joffm
Away
LimeSurvey Community Team

More

2 months 3 weeks ago #255572 by Joffm

Replied by Joffm on topic Creating a Radio Button List with Circled Numbers in a Single Choice Question

By the way:
A related discussion about the several <ul> list you find here in the bug tracker
[url] bugs.limesurvey.org/view.php?id=18211 [/url]

Volunteers are not paid.
Not because they are worthless, but because they are priceless

The following user(s) said Thank You: modernity4r

Please Log in to join the conversation.

modernity4r
Topic Author
Offline
Senior Member

More

2 months 3 weeks ago #255600 by modernity4r

Replied by modernity4r on topic Creating a Radio Button List with Circled Numbers in a Single Choice Question

Ah, this seems to be an area where very long discussions are taking place. I will continue to follow it with interest. In the short term, it also seems possible to apply the method you recommended.

Attachments: