Designing with POCDART

PoCDART User Experience


The PoCDART Toolkit comes prepackaged with a bundle of JS, PHP and CSS which visually changes the surveys and streamlines it for mobile usage. PoCDART UX best supports questions with 5 or less potential answers, although future versions will better support different question styles.

Image of the POCDART UX

POCDART UX Installation


In order to install and make the PoCDART UX available, transfer the contents of the resources folder to your redcap/hooks/framework/resources directory. Set your global or project specific hooks to include the dart_common.php.

POCDART UX Usage and Instrument Design


Instruments that take advantage of the PoCDART UX can be created by following these guidelines:

  • Use Multiple Choice - Radio Buttons questions with the Left/Vertical alignment
  • Use 5 or less Choices per field
  • Include the @DART-COMMON Action Tag
  • Place 'Begin New Sections' in front of each question

We suggest centering the New Section and Field Label text using HTML Center tags to align question text with the questions. You can also use HTML to change font size to manipulate text size to fit.

Advanced Usage:


While the cleanest usage of the PoCDART UX is with Radio Buttons, some instruments require the usage of Checkbox Fields or Note Field. These are supported by the UX, but require a bit more effort to include.

Checboxes in POCDART UXNotefield for POCDART

Setting up a Notes Field:

  • Follow instructions for Radio Buttons, but use a Notes Field instead of a Radio Button

Setting up a Checkbox Field:

  • Follow instructions for Radio Buttons, but use a Checkbox Field instead of a Radio Button
  • Wrap the text of the first checkbox choice with <span class ="checkbox_first"> </span>
  • Add one extra choice at the end and use the @HIDECHOICE Action Tag to suppress it.

As neither of these fields will trigger an auto-continue, we also include a Radio Button directly below the Notes or Checkbox fields. This is accomplished by the following:

  • Place a new Radio Button Field directly below the Notes Field with Left/Vertical Alignment.
  • In the Radio Button Field, begin the variable name with hidden_
  • In the Radio Button Field, give it a single choice containing the following HTML: <span class = "continue">Continue</span>

PoCDART Custom Instrument Naming Conventions


We suggest using standardized names within each instrument to make calling and processing the data in R simpler. For questions in the same instrument that differ from the majority, you can use the following rules:

Questions with a different scoring should include an alternate piece of text in the variable name to differentiate in calculations. An example of this would be promisanx4v1_1 vs promisanx4v1_alt_1

Questions that are text inputs should include the _text_ somewhere in the variable name

Add a comment or report a problem with this page

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.