Data Collection Tool

The Data Collection Tool enables participants to draw CAMs. It is constructed to support large-scale online-studies to gather CAM data of many participants (several hundred participants would be no problem).

Asking participants to draw CAMs from scratch may be an ambitious task and participants may not even draw a CAM regarding your intended issue (like your intended topic). Here it might help to predefine concepts to help your participants to draw the intended CAM. Moreover, it may be that researchers would like to control what is being displayed or even possible to do (i.e., draw ambivalent concepts) while drawing CAMs. For example, it be the case that you fear that a large number of possible features would be too demanding (cognitively or from a time perspective) for your participants, you can easily disable certain features, like the ability to draw unidirectional relations or inhibiting connections.

To this end, a "researcher view" of the CAM board was implemented. There, it is possible to create, position and fix (i.e., impossibility to move a concept) elements. Once the structure is ready, click on “export” to create a CAM.json including all the different elements as well as the configuration of the project (see in detail Set up study).

Define your config file

Within the administrative panel, after you have logged in, you can click on the "Data Collection (researcher view)" button at the top. After you have drawn your default CAM, which should be presented to the participants (see details in Set up study), you can click on the "gear symbol" (top left) to define the configuration of your CAM study.

Parameter you can change using the user interface:

Parameter	Meaning	Possible values
#MinNumNodes	Number of concepts a participant needs to draw before she / he is can save the CAM.	1-50¹
#MaxNumWords	Maximum number of words allowed for each concept.	1-5²
#MaxLengthChars	Maximum number of characters allowed for each concept.	30-300
#enableArrows	If ON possible to draw arrows / directed connections.	ON / OFF
#BidirectionalDefault	Only makes sense if #enableArrows is set to ON, as default the drawn connection is bidirectional.	ON / OFF
#OnlyStraightCon	If ON possible to draw supporting connections.	ON / OFF
#enableAmbivalent	If ON possible to draw ambivalent concepts.	ON / OFF
#cameraFeature	If ON a splotlight feature is included to move the drawing screen. If participants move their mouse to the edges the drawing screen is moved to the respective side.	ON / OFF
#fullScreen	If ON study is set to fullscreen mode and paradata is collected (defocus, focus events).	ON / OFF
#setLanguage	Set the language of the interface of the data collection tool:	English, German, Spanish, Chinese

¹Maxmimum number is restricted because the drawing space is limited. In the future, 3D environments will be implemented.

²It is highly recommended to set this value to 1-3 if you are aiming to summarize / aggregate the CAM data. Instruct participants to avoid writing sentences and to draw instead multiple concepts.

Remark: It is not recommended to write directly into the config file. Certain configurations are set to default values and should not be changed. By programming your CAM on scratch you are able to set reminders to program even adaptive designs.

Data-structure of CAMs

The CAM itself is a Java Script object which is temporarily stored on the client-side. Every CAM, concept or connector is a Java Script class, whereby the constructor is initializing a single instance of that respective class. Within the arrays nodes and connectors, all the drawn (or deleted) concepts (nodes) respective connectors (edges) are stored.

In the following, all the parameters of the constructor of the CAM, concept and connector is explained:

Cognitive-Affective Map has the following data structure when initialized, whereby the single parameters are explained below (in the browser console call "CAM"):

    constructor() {
        this.idCAM = uuid.v4();
        this.creator = uuid.v4();
        this.projectCAM = config.CAMproject;
        this.defocusCAM = null;
        this.date = (new Date).getTime();
        this.nodes = [];
        this.connectors = [];
        this.currentID = null;
        this.currentNode = null;
        this.hasSelectedNode = false;
        this.currentConnector = null;
        this.hasSelectedConnector = false;
        this.readyToMove = false;
        this.isIncoming = false;
    }

Parameter	Meaning	Application
idCAM	Random character string (ID) that is assigned by the data collection tool to the CAM.	Unique identifier.
creator	Character string that is stored by the researcher.	Unique ID to identify participants between study parts.
projectCAM	Name of current project.	internal (information not needed)
defocusCAM	Array which stores defocus events, when `#fullScreen` is set to `TRUE`	Check if a participant left fullscreen during the CAM study part.
date	Date of CAM initialization.	Starting point of drawing the CAM.
nodes	Array which stores all concepts.	Array includes visible and deleted concepts.
connectors	Array which stores all connectors.	Array includes visible and deleted connectors.
currentID	Get currrent ID of (open dialog) element.	internal
currentNode	Get focused concepts.	internal `NULL` if no concept is clicked on.
hasSelectedNode	`TRUE` if participant focused a concept.	internal
currentConnector	Get focused connectors.	internal `NULL` if no connector is clicked on.
hasSelectedConnector	`TRUE` if participant focused a connector.	internal
readyToMove	`TRUE` if concept (single click) is ready to move.	internal to validate the process of moving concepts
isIncoming	internal (tried out WebSocket)	internal to enable simultaneous collaboration

Concepts (nodes) drawn in CAM have the following data structure, whereby the single parameters are explained below (in the browser console call "CAM.nodes"):

    constructor(value, text, position, isDraggable = true, isDeletable = true, isTextChangeable = true) {
        this.id = uuid.v4();
        this.value = value;
        this.text = text;
        this.comment = "";
        this.position = position;
        this.isActive = true;
        this.date = (new Date).getTime();
        this.kind = "Node";
        this.isSelected = false;
        this.isConnectorSelected = false;
        this.isDraggable = isDraggable;
        this.isDeletable = isDeletable;
        this.hasElementMoved = false;
        this.eventLog = [];
        this.isTextChangeable = isTextChangeable;
    }

Parameter	Meaning	Application
id	Random character string that is assigned by the data collection tool for each drawn concept.	Unique identifier.
value	Valence given by the participant ranging from [-3,3].	To compute the average valence of a CAM.
text	Text written by the participant.	Get meaning of drawn concept.
comment	Comment given by the participant.	Support interpretation of drawn concept.
position	`{x:,y:}` coordinate of the concept.	To compute the distance between concepts.
isActive	`TRUE` statement if concept was not deleted.	All deleted concepts are not visible and marked by a `FALSE` statement.
date	Date of creation.	Trace the sequence of the drawing process.
kind	Type of element.	internal
isSelected	If current concept is selected.	internal
isConnectorSelected	If connector adjacent to concept is selected.	internal
isDraggable	If concept is moveable.	Defined by researcher in advance.
isDeletable	If concept is deletable.	Defined by researcher in advance.
hasElementMoved	Controls if the element has been moved or just selected.	internal
eventLog	Every interaction with the concept is recorded.	Create animated videos of drawing process.
isTextChangeable	If text of concept is changeable.	Defined by researcher in advance.

Connectors (edges) drawn in CAMs have the following data structure, whereby the single parameters are explained below (in the browser console call "CAM.connectors"):

    constructor(isDeletable = true) {
        this.id = uuid.v4();
        this.value = null;
        this.source = null;
        this.target = null;
        this.agreement = null; 
        this.isActive = null;
        this.date = (new Date).getTime();
        this.kind = "Connector";
        this.isSelected = false;
        this.intensity = IncreaseSliderIntensity;
        this.isDeletable = isDeletable;
        this.isOver = false;
        this.isBidirectional = true;
        this.eventLog = [];
    }

Parameter	Meaning	Application
id	Random character string that is assigned by the data collection tool for each drawn connector.	Unique identifier.
value	Strength of connector given by the participant ranging from [-3,3].	Compute network indicators of weighted network and check type of connection.
source	Outgoing connection of a concept to a target.	internal (indicate a directional relationship)
target	Incoming connection of a concept from a source.	internal
agreement	Shape of connecting line (solid = strengthening connections, dashed = inhibitory connections).	Solid lines have positive values [1,3], dashed lines have negative values [-3,-1]
isActive	`TRUE` statement if connector was not deleted.	All deleted connectors are not visible and marked by a `FALSE` statement.
date	Date of creation.	Trace the sequence of the drawing process.
kind	Type of element.	internal
isSelected	If current connector is selected.	internal
intensity	Thickness of line.	internal defined by global variable "IncreaseSliderIntensity"
isDeletable	If concept is deletable.	Defined by researcher in advance.
isOver	If mouse if hovering over connection.	internal to highlight connection
isBidirectional	`TRUE` if connection is bidirectional.	To differentiate between uni- and bidirectional connections.
eventLog	Every interaction with the connector is recorded.	Create animated videos of drawing process.

Implemented features

The following features are implemented to increase data quality:

a participant cannot save the CAM if any of the configurations regarding #MinNumNodes, #MaxNumWords and #MaxLengthChars is violated
by applying the breadth-first search algorithm it is prevented that participants can save CAMs with disconnected components (cluster of concepts)
the predefined concepts cannot be moved if isDraggable is set to FALSE, cannot be deleted if isDeletable is set to FALSE and text cannot be changed if isTextChangeable is set to FALSE
the predefined connectors cannot be deleted if isDeletable is set to FALSE

=> If a participant violates any of the configurations a pop-up informs the participants what she / he has done wrong.

Using the Java Script library Cytoscape all kinds of additional real-time pre- or post-processing analysis are possible in real-time and it is possible to implement adaptive study designs (see example study section).

Future features

Multiple extensions of the data collection tool are currently tested: currently we are implementing simultaneous collaboration, as such that more than one person can work on the identical CAM at the same time. Tweaking the software it was already possible to run sequential collaboration studies, whereby a CAM is consecutively changed. A graphical database (e.g. using Neo4j) was recently implemented. Using Neo4j queries can be made directly on summarized CAM data, e.g., “How often was the concept "own car" associated with "flexibility"?”. Finally 3D visualizations for large CAMs are set up (e.g. using Unity also virtual reality experiment would be possible).

If you are missing a specific feature for your study and do not know how to implement it, we are happy to hear from you: cam.contact@drawyourminds.de