The text below is a hidden field which contains the instructions added in the survey settings:
To apply formatting to text or other parts of your forms in REDCap you will need to use some HTML.
This survey demonstrates how to do this for your forms by using HTML tags. Use this survey form and samples of code below to explore different ways of formatting.
When you are ready - copy the code and paste into your own REDCap fields!
Some basic information about HTML:
HTML works by enclosing the text you want to format with HTML "tags".
The tags can be included in your Section, Descriptive, Question and/or Answer texts.
A tag is a type of instruction or command that will change the appearance of text as well as perform other functions on your REDCap forms because they are web pages.
The tags are enclosed with greater and less than < brackets > and may be written in capital and lower case letters.
You need to both open a tag and close it.
You close it with the same tag but add a /
Example < center > centering text < /center >. *Do not leave spaces in tags when using the actual tag - see below for examples.
To use this survey tool:
Look at each sample text or format Review the html code which generated the sample, in the field below it. Make changes to the code and view results of changes to understand how it works Refresh the page if you want to start again at any point with the original formatting and code REMEMBER: When you are ready - copy the code and paste into your own REDCap fields!
Text type formats:
Bold text
Unbold your text
2nd way to Unbold your text
Italics text
Underlined text
Centered Text
Code for above formatting
Type in the box and change options to see possible results below.
*You need to click outside of the box to see the updated changes below.
Click expand above to see all code
This is the result if you change the syntax in the box above:
______
Font sizes - substitute in any # number for the size
Font Size 1
Font Size 2
Font Size 3
Font Size 4
Code for above formatting
Type in the box and change options to see possible results below.
*You need to click outside of the box to see the updated changes below.
This is the result if you change the syntax in the box above:
______
Font color examples
Font Color Blue
Font Color Gold
Font Color Purple
Font Color Red
Font Color Gray
Font Color Green
Font Color Navy
Font Color Orange
Code for above formatting
Type in the box and change options to see possible results below.
*You need to click outside of the box to see the updated changes below.
Click expand above to see all code
Code for above formatting
Type in the box and change options to see possible results below.
*You need to click outside of the box to see the updated changes below.
This is the result if you change the syntax in the box above:
______
Additional Formats
Remember you can use different formatting in the response text too
1. Bold Extremely satisfied
2. Italics Somewhat satisfied
3. Underlined Somewhat unsatisfied
4. Color Extremely unsatisfied
5. SIze N/A
Code for above formatting
Type in the box and change options to see possible results below.
*You need to click outside of the box to see the updated changes below.
Click expand above to see all code
This is the result if you change the syntax in the box above:
______
Headings Sizes
Heading 1
Heading 2
Heading 3
Heading 4 Code for above formatting
Type in the box and change options to see possible results below.
*You need to click outside of the box to see the updated changes below.
This is the result if you change the syntax in the box above:
______
Code for above formatting
Type in the box and change options to see possible results below.
Eg replace palevioletred with the word orange to see the banner turn orange or change the number of points from 10 to 80 to see the changes.
This is the result if you change the code in the box above:
______
Code for above formatting
Type in the box and change options to see possible results below.
*You need to click outside of the box to see the updated changes below.
Click expand above to see all code
This is the result if you change the code in the box above:
______
Sample of a bullet list
Item List:
Code for above formatting
Type in the box and change options to see possible results below.
*You need to click outside of the box to see the updated changes below.
This is the result if you change the code in the box above:
______
Sample of a numbered list
Item List:
Coffee Tea Milk Code for above formatting
Type in the box and change options to see possible results below.
*You need to click outside of the box to see the updated changes below.
This is the result if you change the code in the box above:
______
Sample of a numbered lists from a particular number start point
Item list:
Coffee Tea Milk Code for above formatting
Type in the box and change options to see possible results below.
*You need to click outside of the box to see the updated changes below.
This is the result if you change the code in the box above:
______
This is superscripted text.
Code for above formatting
Type in the box and change options to see possible results below.
*You need to click outside of the box to see the updated changes below.
This is the result if you change the code in the box above:
______
This is subscripted text.
Code for above formatting
Type in the box and change options to see possible results below.
*You need to click outside of the box to see the updated changes below.
This is the result if you change the code in the box above:
______
This is an email link: Send Mail
This type of link will only work if you have a default email software installed. Spaces between words should be replaced by %20 to ensure that the browser will display the text properly
Code for above formatting
Type in the box and change options to see possible results below.
*You need to click outside of the box to see the updated changes below.
Result of code for above:
______
Code for above formatting
Type in the box and change options to see possible results below.
*You need to click outside of the box to see the updated changes below.
Click expand above to see all code
Result of code for above:
______
This allows hover over text for additional explanations
This tag allows you to provide text with dashes indicating you should
hover for additional explanations Code for above formatting
Type in the box and change options to see possible results below.
*You need to click outside of the box to see the updated changes below.
This is the result if you change the code in the box above:
______
Here is how we may indent text:
Topics will include:
Creating Surveys
Enabling Surveys for your project
Anonymous vs. Non-anonymous Surveys
Survey Responses
Survey Settings
Notifications
So many OPTIONS!
Code for above formatting
Type in the box and change options to see possible results below.
*You need to click outside of the box to see the updated changes below.
Click expand above to see all code
Result of code for above. Try changing 3 to 15 and see result below.
______
Example of a warning box with centered text.
Some questions have been skipped! Click the "PREVIOUS" button to review questions you missed. Code for above formatting
Type in the box and try changing the colour from red to green blue or yellow or orange to see possible results below.
*You need to click outside of the box to see the updated changes below.
Click expand above to see all code
Result of code for above:
______
TIP!!:Sometimes you can use a variable with this type of box above and add branching logic to it.
The logic shows the box only if certain conditions are met eg some fields are missing.
For example: adding [var1] = '' or [var2] = '' or [var3] = '' or [var4] = '' to the branching will only display the variable with the red warning box if one of the variables is empty/missing.
A nice bordered box with larger text
Code for above formatting
Type in the box and try changing the colours from aliceblue to green or sizes of the border from 9px to 50px or size of font form 150% to 50% or 200% view the result. to see possible results below.
*You need to click outside of the box to see the updated changes below.
Click expand above to see all code
This is the result of code from above.
______
I am going to ask you a few question to determine your eligibility for the study
Interviewer:"Ask all questions without stopping until you reach "Determine Eligibility before continuing"
Code for above formatting
Type in the box and try changing the colours from aliceblue to green or sizes of the border from 9px to 50px or size of font form 150% to 50% or 200% view the result. to see possible results below.
*You need to click outside of the box to see the updated changes below.
Click expand above to see all code
This is the result of code from above.
______
You can use these descriptive fields and HTML to display progress bars at the top of your survey forms.
Example code for above formatting for the 80% complete bar above
Type in the box and change % options to see the different size bars possible - results below.
*You need to click outside of the box to see the updated changes below.
Click expand above to see all code
This is the result if you change the syntax in the box above:
______
Data Dictionary of this survey.
You may download the data dictionary of this survey if this may be useful to you.
**Note it is the data dictionary of this survey BEFORE you made any changes in the code