CAAT The Circumplex Affect Assesment Tool

What is it?

The Circumplex Affect Assessment Tool (CAAT) is a simple tool that allows users to perform self-assessments of their affective states. It is based upon Robert Plutchik's theory, and his Circumplex Model of Human Emotions.

The CAAT was imagined as a graphical widget (...a what?) that you can use in web forms whenever you'd like to assess your respondent's affective states. It was inspired by traditional drop-down lists yet, instead of a list of options, once open the CAAT displays a panel that enables respondents to select one or two emotions from Plutchik's set of Primary Emotions.

This tool was presented at the CHI 2013 and UIST 2015 conferences. Please refer to the publications section below for more information.

Quick Demo

Here's a demo! First, have a look at this picture:

A little slice of paradise

Now, what do you feel about this little slice of paradise? I'll help you answer:

How to Use

This implementation of the CAAT is an extension to jQuery and uses jQuery UI. Just load the dependencies, the files that you will find in the bundle, and initialize the tool in the target element:

<!DOCTYPE html>
<html>
   <head>
      <!-- DEPENDENCIES -->
      <script src=".../jquery-1.9.0.js"></script>
      <script src=".../jquery-ui.min.js"></script>     
      <!-- CAAT FILES -->
      <script src=".../caat.jquery/jcanvas.jquery.js"></script>
      <script src=".../caat.jquery/caat.jquery.js"></script>
      <link href=".../caat.jquery/caat.css" rel="stylesheet" type="text/css">		
   </head>
   <body>
      <!-- THE TARGET ELEMENT THAT WILL BE CONVERTED TO A CAAT INSTANCE -->
      <input id="caat_element">
      <!-- RENDER CAAT -->
      <script>
         $('#caat_element').caat();
      </script>
   </body>
</html>

This will render a CAAT instance like this:

What about some styling?

Styling is currently limited to position and size. For instance, the following code:

<input id="target3" style="width:400px; margin-left:30px">
<script>
   $('#target3').caat({
      "openSide" : "400"
   });
</script>

Will render something like this:

How to get the user response?

Easy. If you place the target element in a form and add a name attribute to it, the CAAT will submit 4 scores identified by prefixing the score with the target's name. E.g., submitting the CAAT instance created with this code:

<input name="caat_example">

Will submit the following values:

You can also get the values via the getSelection method, which returns an object containing the instance's current selection. Like so:

<input id="target" name="caat_example">
<script>   
   // INITIALIZE
   $("#target").caat();
   
   // GET THE SELECTION SCORES
   function callGetSelection() { 
      var selection = $('#target').caat("getSelection");
      alert(
         "EM1: " + selection.emotion1 + 
         "\nEM2: " + selection.emotion2 + 
         "\nS1: " + selection.s1 + 
         "\nS2: " + selection.s2
      );
   }   
</script>

Note: You can find more information on these values in the papers.

Download

Just download the zip file, extract it and include the three files in your web page: caat.jquery.zip

Publications

Here you can find more information on the CAAT, including its score system and the validation studies conducted in order to make sure it does reliably measure affective responses. The 2013 paper describes our first proposal whereas the 2015 paper is the definitive publication.