1. Hello James, welcome to your cloudclinica account! cloudclinica BETA LOG OUT MY ACCOUNTMY STUDIESHOME My CRFs CRF Name Creation Date Status Enrollment 01/09/2014 Actions Demography 01/10/2014 Actions Adverse Event 01/10/2014 Actions ConMed 01/06/2014 Actions Last Rule 01/17/2014 Actions Create New CRF DONE DRAFT Back To Studies Edit Clone Delete Order Display

2. Save CRF Back to CRFs User is prompted to select type of field when clicking on “Add Item”. See next slide for details. Automatic question Numbering Autosave every 2 min Last auto-saved: 4.33pm Add item + Add Tab Field Mouse turns into “dragging pointer” when user hovers a question. Add Tab button Icons to edit or delete question

3. Save CRF Back to CRFs Add item + Add Tab Same option to edit or delete a tab Last auto-saved: 4.33pm Tab Tab Name Subtitle 1- Hovering over or clicking the Add item’ displays this pop up 2- Clicking on any item displays the appropriate panel in the mockups below

4. Add itemName (TEXT)* Type (ENUM: Text, Textarea, Single-select, Multi-select, Radio, Checkbox, File)* Data type (ENUM: ST, REAL, INT, DATE, PDATE) Description (TEXT) Left Text (TEXT) Right Text (TEXT) Question number (INT) – Auto generated when the field is relocated on the page Response text (TEXT) * -- only required if item type is: single-select, multi-select, radio, checkbox Response values (INT) * -- only required if item type is: single-select, multi-select, radio, checkbox Response layout (ENUM: Horizontal, Vertical, – only id item type is Radio, Checkbox Size, Maximum – only if item type is Text, Textarea) Default value (INT) – only if item type is: Single-select, Multi-select, Radio button, Checkbox Decimal format (w(d)) – w is integer width if item type is Real or Integer and d is decimal width if item type is Real Validation expression regexp() – only required for time fields Validation message (TEXT) – only required for time fields Required (ENUM: Yes, No) Add TabName (TEXT) * Subtitle (TEXT) Instructions(TEXT) Add TableName (TEXT) * Header (TEXT) Min rows (INT) Max rows (INT) Add Column(Same as Add Item) Data Structures

5. Text field Number Select Item(s) Radio buttons Checkboxes Date Time Table File ITEMS Add Item Mockup 1- Hovering over the Add item’ displays this pop up 2- Clicking on any item displays the appropriate panel in the mockups below

6. Add/Edit Text Field Mockup 1 Name *: 2 Description: 5 Min text size: 6 Max text size: 7 Default Value: 8 Resizable*? Yes No 9 Required*? Yes No Name 1 Type Text if 8 = No Texttarea if 8= yes Data type ST Description 2 Left Text 3 Right Text 4 Response text – Response values – Response layout Size = 5 Maximum = 6 Default value 7 Decimal format – Validation exp. – Validation message – Required9 Click here to insert right text Click here to insert left text 3 4 1- Edit icon displays this configuration panel 2- Delete icon removes the item Field shrinks/grows according to max (5, 6) 1- Area shrinks/grows according to right-left text + field size 2- Area is draggable anywhere on the page * Show according to 9

7. 1 Name *: 2 Description: Add item *: 5 Text 6 Value 7 Default Value: 8 Multi-Select? Yes No 9 Required*? Yes No Add/Edit Select Item Mockup 1- New row auto added when one completes 2- Row position can be dragged and dropped Name 1 Type Single-Selectif 8 = No Multi-Select if 8= yes Data type INT Description 2 Left Text 3 Right Text 4 Response text 5 [, 5 ] Response values 6 [, 6 ] Response layout – Default value 7 Decimal format – Validation exp. – Validation message – Required9 3 4 Field shrinks/grows according to max text in 5 Click here to insert right text Click here to insert left text * Show according to 9 1- Area shrinks/grows according to right-left text + field size 2- Area is draggable anywhere on the page

8. 1 Name *: 2 Description: Add item *: 5 Text 6 Value 7 Default Value: 8 Layout? Horizontal Vertical 9 Required*? Yes No Add/Edit Checkboxes Mockup 3 4 1- Add/remove/position checkboxes according to 5 2- Layout radio buttons according to 8 Name 1 Type Checkbox Data type INT Description 2 Left Text 3 Right Text 4 Response text 5 [, 5 ] Response values 6 [, 6 ] Response layout Horizontal 8 Vertical 8 Default value 7 Decimal format – Validation exp. – Validation message – Required9 Checkbox Text1 Checkbox Text2 Checkbox Text3 Default value according to 7 1- New row auto added when one completes 2- Row position can be dragged and dropped Click here to insert right text Click here to insert left text * Show according to 9 1- Area shrinks/grows according to right-left text + field size 2- Area is draggable anywhere on the page

9. 1 Name *: 2 Description: Add item *: 5 Text 6 Value 7 Layout? Horizontal Vertical 8 Required*? Yes No Add/Edit Radio Buttons Mockup 3 4 1- Add/remove/position radio buttons according to 5 2- Layout radio buttons according to 8 Name 1 Type Radio Data type INT Description 2 Left Text 3 Right Text 4 Response text 5 [, 5 ] Response values 6 [, 6 ] Response layout Horizontal 7 Vertical 7 Default value – Decimal format – Validation exp. – Validation message – Required8 Radio button Text1 Radio button Text2 Radio buttonText3 1- New row auto added when one completes 2- Row position can be dragged and dropped Click here to insert right text Click here to insert left text * Show according to 8 1- Area shrinks/grows according to right-left text + field size 2- Area is draggable anywhere on the page

10. Add/Edit Date Mockup 1 Name *: 2 Description: 5 Partial Date? Yes No 6 Required*? Yes No Name 1 Type Text Data typeDATE if 5 = No PDATEif 5 = Yes Description 2 Left Text 3 Right Text 4 Response text – Response values – Response layout – Default value – Decimal format – Validation exp. – Validation message – Required6 3 4 Click here to insert right text Click here to insert left text * Show according to 6 1- Area shrinks/grows according to right-left text + field size 2- Area is draggable anywhere on the page

11. Add/Edit Time Mockup 1 Name *: 2 Description: 5 Required*? Yes No Name 1 Type Text Data typeREAL Description 2 Left Text 3 Right Text 4 Response text – Response values – Response layout Size = 5 Default value – Decimal format – Validation exp. regexp:/^[0-1]\d\.[0-5]\d|2[0-3]\.[0-5]\d$/ Validation message Correct time format is 24:00 Required5 3 4 Click here to insert right text Click here to insert left text * Show according to 5 1- Area shrinks/grows according to right-left text + field size 2- Area is draggable anywhere on the page

12. Add Number Field Mockup 1 Name *: 2 Description: 5 Number type: Integer Decimal 6 Min integer width: 7 Max integer width: 8 Decimal width: 9 Required*? Yes No Display only if number is decimal 99999.99 3 4 Click here to insert right text Click here to insert left text * Show according to 9 Name 1 Type Text Data typeREAL if 5 = Decimal INT if 5 = Integer Description 2 Left Text 3 Right Text 4 Response text – Response values – Response layout Size = 6 + 8 +1 – for decimal point Maximum = 7 + 8 + 1 – for decimal point Default value – Decimal format 7(8) Validation exp. – Validation message – Required9 1- Area shrinks/grows according to right-left text + field size 2- Area is draggable anywhere on the page Show integer width according to max (6, 7) Show decimals width according to 8

13. Add/Edit File Mockup 1 Name *: 2 Description: 5 Required*? Yes No 3 4 Click here to insert right text Click here to insert left text * Show according to 5 1- Area shrinks/grows according to right-left text + field size 2- Area is draggable anywhere on the page Click to upload file Name 1 Type File Data type REAL Description 2 Left Text 3 Right Text 4 Response text – Response values – Response layout – Default value – Decimal format – Validation exp. – Validation message – Required5

14. Add/Edit Table Mockup 1 Name *: 2 Header: 3 Minimum rows: 4 Maximum rows: Area is draggable anywhere on the page Header according to 2 Show Column header +min rows according to 3 Name 1 Header2 Min rows 3 Max rows 4 Insert table with 1 column, taking the whole width of the page Clicking this edit icon displays the Column configuration panel, next slide Header Clicking this edit icon displays the Add/Edit Table panel, above

15. Add/Edit Column Mockup 1 Header*: 2 Type? Text Select Item Radio buttons Checkboxes Date Time Number File Use same mockup for the same item Clicking the edit icon displays the Column configuration panel Show column header according to 1 Column Header Column is draggable to different position on the table Table Header Column is resizable by dragging on the edge