Checkbox: Display Bulleted List

This article will help you create a Bulleted List for Display


Checkbox: Display Bulleted List

This code will allow you to convert a 'Checkbox' question type into a Bulleted List for Display purposes.  This is helpful when you want to display a list. Best part is that since this is really a question with a response list you have access to all of those settings: randomization, filters, shared lists etc.


Instructions

  1. Add a 'Checkbox' question type to your survey with all of the appropriate 
    1. See article: Standard Question: Checkbox (Multi-select)
  2. Add your response list as needed. 
  3. Overall Question Settings
    1. See article: Overall Question Settings: Accessing
    2. In the 'Overall Question Settings', make sure to toggle OFF the 'Require a Response' validation.
    3. You will also have access to the other question settings such as filtering, randomization and shared lists. You can use this to your advantage as well, if needed.  
  4. Add the code below to your 'ADD CSS' 
    1. See article: Adding JavaScript and/or CSS to a Question

    2. /* REMOVE HOVER */
      .cm-response-container:hover {
          background: transparent;
      }
      
      /* HIDE CHECKBOX */
      .cm-response-group .cm-checkbox-input {
          display: none;
      }
      
      /* THE RESPONSE LIST */
      .cm-checkbox-label:before {
        padding-left: 5em; /* INDENT */
        padding-right: 1em;
        content: "‚óŹ"; /* THE BULLET */
      }
      		
    3. In the last line of the CSS above, you will see 'THE BULLET'. You can update this with the symbol of your choice. 
  5. NOTE: Since this is an actual 'Checkbox' question, it will have data. You may want to remove it from your data set since it is only being used for display purposes. 
  6. As always, make sure to test.
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us