Checklist Feature: Check All/Uncheck All Items in a List

Description

With v8.1+, LogicNets added the check-all feature in the checklist part and it helps users navigate quickly through questions with many options. This function allows a user to select all answers in a checklist by clicking the "check all" option or deselect all answers by clicking the  "uncheck all" option. If one of the options in the checklist is exclusive - meaning if you select that option the system deselects all other options - the system ignores the exclusive option when the user opts to check all. The system clears the exclusive option if the user opts to uncheck all.

You can display the check-all/uncheck-all option as a checkbox and text or as clickable text. You can customize the text, style it, and place it anywhere within the question using the node template. You can also add check-all features to multiple questions, and they can work independently of each other.

When you use the check-all feature, the system automatically presents the "check" or "uncheck" option to the user based on the number of answers the user has selected: 

• If the user has not selected any items, the system displays the "select all" text. 
• If the user selects one answer, the system displays "select all". 
• Once the user selects more than half of the items, the system displays the "deselect all" text. 

Node Type: This feature is part of the checklist part.

Used With: This function is available for use in the LogicNets Starter Framework and Assessment Frameworks.

Configuration

To add the check-all feature to a checkbox list, go to the Advanced tab in the checklist part editor and click the checkbox next to "Show check-all". In addition to selecting the check-all option in the checklist part editor, you may also need to make the following modeling and styling changes:

1. Modify the node template(s)
2. Style the "check-all" text and placement (some styling exists by default. Notes below show how/where to change the CSS)

Style and Layout

• You can hide the checkbox using this CSS:

  input.checkall_input {display: none;}

• Style the text with this CSS:

  label.checkall_label {
  font-style: italic;
  color: red;
  white-space: nowrap; /* keeps text on one line */
  margin-left: 1%; /* keeps spacing between caption and check-all text */
  }

• Position the clickable text inline with the caption using this CSS:

  td.groep_label {display: flex;}

• Use this amended node template in the LogicNets Assessment Framework to show the clickable text after the caption:

  <TABLE class='groep' node=$(nodeid) net=$(netid) partid=$(partid) invalid_style=$(invalid_style)>
  <TBODY>
     <TR>
        <TD class='groep_label' vAlign=top>
        <strong>
               $(caption)
           <div class='asteriks_$(validation_styles_failed)'></div>
        </strong>
        $(checkall)$(uncheckall)
       </TD>
       <TD class='groep_control'>
                 $(control)
       </TD>
       <TD class='groep_help'>$(reference)
       </TD>
     </TR>
  </TBODY>
  </TABLE>
  <div class="invalid_message_validation_error">$(validation)</div>

  • Line 9 above contains the controls (text and input) for the check-all and uncheck-all feature.
  • Line 7 relates to mandatory questions only .
  • Lines 1, 4, 11, and 14 are simplified in this example by removing the code that interpolates the local CSS style that can be set on the form part. The removed code is as follows:

    $(style_class and style_class~= '' and (" " .. style_class))

    See existing part/node templates (system_settings.[template_name] in the context) for examples.
  • For LogicNets Starter Applications, use $(parts[1].checkall) in place of $(checkall)$(uncheckall) control.
  • To override an existing part template, use set data object in the onstart net, and set no interpolate = yes

Talk to your LogicNets Representative for more information on this feature.