How do I modify the options in the MCQ questions?

  • Profile Image
    SoulerFloatDocuments
    Asked on July 24, 2021 at 05:55 PM

    Hi, This appears to be another fluke issue, when I built the form the columns in my multiple choice selection fields laid nicely out in the form so you could see all the text.

    No its squishing text together or completely writing over it.

    I've tweaked settings such as page sizes and number of columns and tried a few of the CSS suggestions out there but nothing seems to be working. Sometimes I make changes and nothing happens other times it just breaks it further.


    Please help.

    Screenshot
  • Profile Image
    roneet
    Answered on July 24, 2021 at 10:31 PM

    Please inject this CSS in your form. It will break the sentances in multiple lines:

    .form-checkbox-item label, .form-radio-item label {

    word-break: break-word!important;

    }

    Guide: https://www.jotform.com/help/117-how-to-inject-custom-css-codes

    Let us know how it goes.

    Thanks.


  • Profile Image
    SoulerFloatDocuments
    Answered on July 25, 2021 at 01:03 AM

    Hi,

    Thanks for the code, it worked however I have an additional question, how do I make the columns wider so the whole string of words for each check box fit onto single line?

    The form currently seems to squish all the columns over to the left when there's room on the page for more.

    Also, I set the form to have the question appear at the top and the check fields underneath but this isn't showing up that way, is there any css code that will force it?

    There's way too much space between all of my sections, I currently have them set a question spacing as 3px and reduced the margins but it's still very spaced out. Any ideas?


    Lastly, is there a way to set the answer colors so if the correct answer is entered once it's submitted they all show the same color so its easy to spot which answers need review?


    Many thanks.

  • Profile Image
    gerardw
    Answered on July 25, 2021 at 05:43 AM

    You may adjust the field input width from the Form Advanced designer:

    1627206037_60fd319572e13_2507_6.png

    This will increase the width to make the choices appear in one line and also make them appear below the question title.

    You may check this guide on how to reduce the spacing: https://www.jotform.com/help/62-how-can-i-change-spacing-between-questions

    Regarding colors, do you want to show the colors on your form submissions page?

  • Profile Image
    SoulerFloatDocuments
    Answered on July 25, 2021 at 03:32 PM

    Hi, thanks for that, I'd been tweaking that setting but somehow it never seemed to work, certainly helps when you know its the right section and what the expected outcome is so thank you, its looking much better now.

    There's still lots of space between each of the columns, is there a way to reduce that?

    There's also still lots of wasted space between the paragraph sections at the top of my form, is there anything that can be done to adjust that?

    As for the colors, I'm not so concerned with the colors when the form is being completed but more to the ease to reviewing it once it is submitted. Currently some of the fields show up blue in the submitted PDF which is awesome but what I'd like is if all the correct answers are in blue and anything that's not answered right is in say red color. Is that possible?

    This is the form: https://form.jotform.com/201379349957167

  • Profile Image
    roneet
    Answered on July 25, 2021 at 10:17 PM

    To reduce the white spacing between the columns of the multiple choice, please inject this CSS:

    .form-multiple-column[data-columncount="3"] .form-radio-item, .form-multiple-column[data-columncount="3"] .form-checkbox-item {

    width: 28%!important;

    }

    Let us know how it goes.

    Thanks.

  • Profile Image
    roneet
    Answered on July 25, 2021 at 10:39 PM

    Also, to reduce the white spacing between the paragraph elements, please inject this CSS into your form:

    #cid_79 {

    margin-top: -60px;

    }

    Unfortunately, it is not possible to put a different color for correct and incorrect answers.

    Thanks.

  • Profile Image
    SoulerFloatDocuments
    Answered on July 28, 2021 at 12:30 AM

    Both worked great, thank you roneet, I even built up the confidence to add a little css of my own to make the form look perfect. Appreciate your help.

  • Profile Image
    SoulerFloatDocuments
    Answered on July 28, 2021 at 12:33 AM

    Can I submit the correct answer highlighting a certain color as a feature enhancement please?

    I've noticed that some of my forms were coming in with different colors do you know why that is? Different field types perhaps?

  • Profile Image
    gerardw
    Answered on July 28, 2021 at 01:36 AM

    I have moved your last response to a new ticket: https://www.jotform.com/answers/3249073