The Circumplex Affect Assesment Tool

The circumplex affect assessment tool (CAAT) is a simple, self-assessment control, built upon Robert Plutchik's Circumplex Model of human emotions.

It has been conceived as a widget, a drop-down list inspired control, dedicated to the selection of emotions; once expanded, the widget presents users with an interface that allows them to browse through Plutchik's set of Primary Emotions and choose one or two that best express their emotional state or reaction towards a stimulus.

The tool has been presented in a CHI 2013 Extended Abstract (CAAT: a Discrete Approach to Emotion Assessment) and in a UIST 2015 full paper (On Sounder Ground: CAAT, a Viable Widget for Affective Reaction Assessment).

If you are interested in the topic or looking for more information about the CAAT, we encourage you to read the papers.

The tool can be downloaded in the Downloads section.

Example

Any feelings on the image above? Tell us:

Technical Details

This implementation is an extension to jQuery, and requires an HTML5 compatible browser, with canvas support.

The current implementation has the following dependencies:

  • jQuery 1.9.0 (or newer)
  • jCanvas
  • jQuery UI 1.10.3 (or newer)

Note: the library versions above were the ones used to develop the tool. Older versions have not been tested.

This implementation has been tested in the following browsers:

  • Firefox 21.0
  • Internet Explorer 10
  • Safari 5.1.7
  • Chrome 27.0

This section contains instructions and examples on how to use this implementation and operate with the CAAT instances.

1. Markup example

Below is a simple, fully working example on how to use CAAT in a simple webpage with a single CAAT instance.

<!DOCTYPE html>
<html>
   <head>
  
      <!-- DEPENDENCIES -->
      <script type="text/javascript" src="PATH_TO_FILE/jquery-1.9.0.js"></script>
      <script type="text/javascript" src="PATH_TO_FILE/jquery-ui.min.js"></script>
      <script type="text/javascript" src="PATH_TO_FILE/jcanvas.jquery.js"></script>
	
      <!-- CAAT FILES -->
      <script type="text/javascript" src="caat.jquery/caat.jquery.js"></script>
      <link rel="stylesheet" type="text/css" href="caat.jquery/caat.css">		
	
   </head>
   <body>
  
      <!-- CAAT ELEMENT -->
      <input id="caat_element">
	
      <!-- RENDER CAAT -->
      <script type="text/javascript">
         $('#caat_element').caat();
      </script>
	
   </body>
</html>

The code above will render a CAAT instance like so:

2. Positioning and sizing

We can, however, do some styling on the widget (restricted to position and size). For instance, the following code...

<!-- CAAT ELEMENT -->
<input id="caat_element" style="width:300px;margin-left:30px">

<!-- RENDER CAAT -->
<script type="text/javascript">
   $('#caat_element').caat({
      "openSide" : "300"
   });
</script>

...will yield:

The openSide attribute is currently the only accepted parameter and corresponds to the length of the side of the CAAT, once expanded (it's a square, so there is no need to differentiate between height and width).

3. Submitting results

If you want to submit the selection result to your server, just add a name attribute to the element. The widget will submit 4 values, named by prefixing the value with the name you've choosen for that particular CAAT instance.

For example, the widget created by this markup...

<!-- CAAT ELEMENT -->
<input name="caat_element_example" id="caat_element">

<!-- RENDER CAAT -->
<script type="text/javascript">
   $('#caat_element').caat({
      "openSide" : "300"
   });
</script>

...will submit these values:

  • (STRING) caat_element_example_emotion1: the first selected emotion.
  • (STRING) caat_element_example_emotion2: the second selected emotion.
  • (DECIMAL) caat_element_example_valence: the selection's valence score.
  • (DECIMAL) caat_element_example_arousal: the selection's arousal score.

Note: you can find more information about these values on the papers.

4. Enhancing interactivity

4.1. Callbacks

This implementation has the following callbacks implemented:

  • onOpen: this callback will be called when the CAAT instance is opened (expanded).
  • onClose: called when the instance is closed (collapsed).
  • onChange: called whenever the user makes a change on his current emotion selection.

Here is the markup and a CAAT instance with all of it's callbacks binded:

<!-- CAAT ELEMENT -->
<input id="caat_element">

<!-- RENDER CAAT -->
<script type="text/javascript">
   // Callback functions
   function callbackOnOpen() { alert("CAAT instance opened"); }
   function callbackOnClose() { alert("CAAT instance closed"); }	
   function callbackOnChange() { alert("User changed the selection"); }

   // Initialization
   $('#caat_element').caat({
      "openSide" : 500,
      "onOpen" : callbackOnOpen,	  
      "onClose" : callbackOnClose,	  
      "onChange" : callbackOnChange
   });
</script>

4.2. Public methods (CAAT output)

Also, we have exposed the following methods:

  • getSelection: returns an object containing the instance's current selection.
  • toString: returns a string representation of the CAAT instance.

And here is an example of calling the public methods methods on a CAAT instance:

<!-- CAAT ELEMENT -->
<input id="caat5">

<!-- RENDER CAAT -->
<script type="text/javascript">

   // Call methods on a CAAT instance
   function callGetSelection() { 
      var selection = $('#caat5').caat("getSelection");
      alert(
         "EM1: " + selection.emotion1 + 
         "\nEM2: " + selection.emotion2 + 
         "\nValence: " + selection.valence + 
         "\nArousal: " + selection.arousal
      );
   }
   
   function callToString() {
      var caatStringRepresentation = $('#caat5').caat("toString");
      alert(caatStringRepresentation); 
   }
   
   // Initialization
   $("#caat5").caat();
   
</script>
  • To view the output, select your emotions in the CAAT below and press one of the buttons:

5. Bugs and suggestions

For bug reporting or suggestions, feel free to contact me at b.m.pinto.cardoso@gmail.com.

The download file (zip) contains two files, a JavaScript and a CSS sheet. Both must be added to your pages in order to use this CAAT implementation. For details, view section Use Instructions.

Download: caat.jquery.zip

Contacts (authors)

Bruno Cardoso Osvaldo Santos Teresa Romão Nuno Correia
b.m.pinto.cardoso@gmail.com osvaldorsantos@gmail.com tir@fct.unl.pt nmc@fct.unl.pt

Acknowledgements

I would like to thank everyone at the Interactive Multimedia Group (IMG).
This work has been funded by the Fundação para a Ciência e Tecnologia (FCT/MEC) through grant SFRH/BD/73177/2010 and CITI (Pest-OE/EEI/UI0527/2011).

And, finally, thank you for your interest!