The text below is a hidden field which contains the instructions added in the survey settings: 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 >.
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 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.
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.
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.
Click expand above to see all code
This is the result if you change the syntax in the box above: Click here for a list of colour names and codes ______ You may wish to combine different sizes and colours of text. Instead of colour names you can also use the HEX codes. Click here for a list of colour names and codes Font size 3 and green colour Font colour blue and size 4 Code for above formatting Type in the box and change options to see possible results below.
This is the result if you change the syntax in the box above: ______ Additional Formats 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.
Click expand above to see all code
This is the result if you change the syntax in the box above: ______ Headings SizesHeading 1 Heading 2 Heading 3 Heading 4 Code for above formatting Type in the box and change options to see possible results below.
This is the result if you change the syntax in the box above: ______ Sample Header Text 2
Code for above formatting Type in the box and change options to see possible results below.
This is the result if you change the code in the box above: ______ Sample Header Text 1
Code for above formatting Type in the box and change options to see possible results 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 Code for above formattingType in the box and change options to see possible results below.
This is the result if you change the code in the box above: ______ Sample of a numbered list Coffee Tea Milk Code for above formatting Type in the box and change options to see possible results 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 Coffee Tea Milk Code for above formatting Type in the box and change options to see possible results 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.
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.
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.
Result of code for above:______ This is a link to another web page: Link opens in the same page Link opens into a new tab Code for above formatting Type in the box and change options to see possible results below.
Click expand above to see all code
Result of code for above:______ This allows hover over text for additional explanations hover for additional explanations Code for above formatting Type in the box and change options to see possible results below.
This is the result if you change the code in the box above: ______ Here is how we may indent text:Enabling Surveys for your project Anonymous vs. Non-anonymous Surveys Survey Responses Notifications Code for above formatting Type in the box and change options to see possible results 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.
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.
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.
Click expand above to see all code
This is the result of code from above.______ 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.
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.
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.**Note it is the data dictionary of this survey BEFORE you made any changes in the code
Working...