...
| Code Block | ||||||
|---|---|---|---|---|---|---|
| ||||||
<strong>This text is bold.</strong> |
When you use the HTML code, <strong>Insert text here.</strong> , this will be produced.
...
| Code Block | ||||||
|---|---|---|---|---|---|---|
| ||||||
<em>Do this and your text will be in italics style.</em> |
...
When you use the HTML Code, <em>Insert text here.</em>, this will be produced.
| Panel | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||||
|
...
Bold and Italics
To make a format italics and bold, you will use the HTML code:
| Code Block | ||||||
|---|---|---|---|---|---|---|
| ||||||
<strong><em>To get your text italics and bold, do this.</em></strong> |
...
When you use the HTML Code, <strong><em>Insert text here.</em></strong>, this will be produced.
...
| Code Block | ||||||
|---|---|---|---|---|---|---|
| ||||||
<font color="red">This color will be red.</font> <font color="purple">This color will be purple.</font> <font color="green">This color will be green.</font> <font color="blue">This color will be blue.</font> |
...
When you use the HTML code <font color="any color">Insert text here.</font>, you can get any color you want with the font.
...
| Code Block | ||||||
|---|---|---|---|---|---|---|
| ||||||
<div style="font-size: 10pt">This is how you change the size of the font.</div> <div style="font-size: 14pt">This is how you change the size of the font.</div> <div style="font-size: 20pt">This is how you change the size of the font.</div> <div style="font-size: 22pt">This is how you change the size of the font.</div> |
...
When you use the HTML code <font size="any number">Insert text here.</font>, you can get any
| Panel | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||||
|
|
Background Class Colors with CSS
REDCap's css includes some familiar background-colored warning boxes. Here is an example where a descriptive text question is used as a warning when someone tries to collect another time point in a longitudinal study without checking the enrollment status of the participant first. The code presented below is placed in the Field Label column (column E) in your data dictionary, or the Field Label box in the Online Designer.
The code looks like: (please note that the code should all be place as a single line)
| Code Block |
|---|
<div class="red" style="text-align:center;"> <h3 style="text-align:center;">Participant is not ACTIVE</h3> Please review participant status form before continuing. </div> Copy and paste single line of the code below directly in the Field Label cell or your Online Designer <div class="red" style="text-align:center;"><h3 style="text-align:center;">Participant is not ACTIVE</h3>Please review participant status form before continuing.</div> |
You can also use "yellow" and "green".
Highlight a sub-section within a larger section with CSS
This can be used to highlight or distinguish sub-sections within a larger section, without using the Section Header column. This is a 'descriptive' field.
The code looks like:
| Code Block |
|---|
| Code Block |
<div class="red" style="text-align:center;">
<h3 style="text-align:center;">Participant is not ACTIVE</h3>
<table width="100%" bgcolor="CCFFCC"><tr><td>OCT Tumor</td></tr></table>
Please review participant status form before continuing.
</div>
The line of code added is:
<table width="100%" bgcolor="CCFFCC"><tr><td>OCT Tumor</td></tr></table> |
You can use standard colors ("red", "yellow", "green", "blue", etc.), or hexadecimal color codes (link to more html colors)
Smaller italic text for additional data in a question with CSS
...
| Code Block |
|---|
Were antiplatelet drugs begun on any day prior to the procedure date listed above? <span style="font-weight: lighter; font-style:italic;">(your text here)</span> |
...
Text in a box and colored, centered, larger text using H3 with CSS
The code looks like: (with some extra carriage returns so it doesn't scroll so far to the right)
| Code Block |
|---|
<p style="border:1px solid black;padding:2px;"> <span style="display:block;border:1px solid grey;padding:10px;font-size: 125%;"> I am going to ask you a few questions to determine whether you are eligible to be in the study. <span style="font-weight: normal; font-style:italic;"> [Interviewer: Ask all questions without stopping until you reach "Determine Eligibility before continuing!"] </span></span></p> <h3 style="text-align: center; color: #800000;">Identifying Information</h3> 1. Name: |
...
Highlighting
...
The code looks like:
| Code Block |
|---|
Demographics Information<br /> <div style="width:100%; color:#FFF; background-color:#F00; padding:5px; position:relative; top:-5px; left:-5px;">Confidential</div> |
...
The code looks like:
| Code Block |
|---|
<div class="green">Full Name</div> |
...
Additional Tags
There are also additional tags that are currently supported when making REDCap forms and surveys.
These following tags may be used to define paragraphs, anchors (web links), and line breaks:
Line Break
<br>
Paragraphs
<p>.......</p>
Anchors (web links)
<a>.......</a>
Indent
To see additional available HTML tags and formatting ideas, please check out this example survey.
...