Skip to content Skip to main navigation Skip to footer

Horizontal Multiple Response : Columns and align

Welcome to QSM Support Forum. › Forums › QSM Pro Support › Horizontal Multiple Response : Columns and align

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • October 4, 2019 at 3:54 pm #636
    sylvio lecomptesylvio lecompte
    Participant

    Hello, i use the Horizontal Multiple Response option to display lots of answers but it’s kinda hard to read, plus, some text appears on the line below while the checkbox remains at the end of the previous line.

    Isn’t there a way to make it appear on multiple aligned columns instead?

    Also, the selected answers displayed on the result page are not readable. There’s no space between the checked answers.

    Can you do something about that? Thanks

    Attachments:
    You must be logged in to view attached files.
    October 5, 2019 at 2:07 pm #642
    KharisKharis
    Keymaster

    Hello Sylvio,

    I’d like to help you achieve those two objectives with a couple lines of CSS code. But, please share a link to your quiz here, so I can get the code depending on the situation you’ve having in there. It’ll be much efficient as I don’t need to recreate it on my test site.

    If you want your link remains private, tick “Set as private reply” option.

    Regards,
    Kharis

    October 5, 2019 at 11:10 pm #649
    sylvio lecomptesylvio lecompte
    Participant

    Thanks for your help! Here’s the link: https://coupdepoucepme.com/quiz/test-css/

    I could have been able to do something if the html layout was a list (ul – li). But every div are just “lined up”.

    Anyway, hope you can find a solution, especially for the result page (as seen in the screenshot). It’s not readable at all.

    Thanks again 😉

    October 6, 2019 at 11:55 pm #664
    KharisKharis
    Keymaster

    Hello there,

    Your quiz’ result is now displaying only a single line of text. I have nothing to inspect and correct right now. See the attached screenshot. Would you please put it back like when it’s initially reported?

    Regards,
    Kharis

    Attachments:
    You must be logged in to view attached files.
    October 7, 2019 at 1:48 pm #675
    sylvio lecomptesylvio lecompte
    Participant

    I don’t understand what went wrong. Here’s an actual screenshot of the test as it is right now.
    Can you check it again please?

    TEST-CSS

    Attachments:
    You must be logged in to view attached files.
    October 8, 2019 at 11:45 pm #706
    KharisKharis
    Keymaster

    Hello there,

    Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard. 

    
.qmn_check_answers {
  flex-direction: column;
}

.qmn_check_answers:after {
  content: '';
  display: block;
  clear: both;
}

.qmn_check_answers > span {
  width: 24%;
  display: block;
  margin-right: 10px;
  margin-bottom: 2px;  
}

    Regards,
    Kharis

    October 9, 2019 at 2:05 am #713
    sylvio lecomptesylvio lecompte
    Participant

    Thanks for you answer. Actually, displaying multiple choices in a SINGLE column is already an option you can choose in the question type list.
    My initial question was whether it was possible to show this list in MULTIPLE columns. The question has a very long list of choices and displaying in a single column is not ideal.

    I would rather have it displayed in multiple aligned column (see image).

    Do you think is possible?

    Attachments:
    You must be logged in to view attached files.
    October 9, 2019 at 6:56 am #715
    KharisKharis
    Keymaster

    Hello there,

    Try this CSS code: 

    
.qmn_check_answers {
  flex-direction: column;
}

.qmn_check_answers:after {
  content: '';
  display: block;
  clear: both;
}

.qmn_check_answers > span {
  width: 46%;
  display: block;
  margin-right: 10px;
  margin-bottom: 2px;  
}

@media only screen and (min-width: 580px) {
  .qmn_check_answers > span {
    float: left;
    min-height: 40px;
  } 
}

    Regards,
    Kharis

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.