Manual for the TANGO-CC

You can select the language of the audio instructions, the webcam recording, the number of trials, the study background, and the displayed agents. The study always shows an agent looking out of a window. In front of them, there is a balloon (red, yellow, green or blue) that falls to the ground. Depending on the trial type, the balloon flight will be visible or (partially) covered by a hedge.

The default settings always present one trial of training 1, two trials of training 2, and 16 test trials. Please note that the first trial of each kind plays voice-over instructions. The background and the agents depend on the selected language and match what we chose in our cross-cultural gaze understanding study (Bohn, Prein et al., 2024). Visit the Customization page and hover over the agent images to see their IDs.

• Bemba (Zambia): background 01, agents f01-f02-f03-f04-m01-m02-m03-m04
• Chinese (China): background 01, agents f18-f19-f20-f21-m18-m19-m20-m21
• English (India): background 01, agents f22-f23-f24-f25-m22-m23-m24-m25
• English (New Zealand): background 01, agents f05-f06-f11-f15-m05-m06-m11-m15
• English (Nigeria): background 01, agents f01-f02-f03-f04-m01-m02-m03-m04
• English (UK): background 01, agents f05-f07-f08-f10-m03-m06-m09-m11
• English (USA): background 01, agents f01-f05-f06-f09-m05-m06-m08-m09
• German (Germany): background 01, agents f05-f07-f08-f10-m03-m06-m09-m11
• Hai||kom (Namibia): background 01, agents f01-f02-f03-f04-m01-m02-m03-m04
• Khwedam (Namibia): background 01, agents f01-f02-f03-f04-m01-m02-m03-m04
• Lingala (Rep. Congo): background 02, agents f01-f02-f03-f04-m01-m02-m03-m04
• Marathi (India): background 01, agents f22-f23-f24-f25-m22-m23-m24-m25
• Shona (Zimbabwe): background 01, agents f01-f02-f03-f04-m01-m02-m03-m04
• Spanish (Argentina): background 01, agents f05-f07-f09-f21-m05-m07-m13-m18
• Spanish (Mexico): background 01, agents f05-f12-f15-f16-m13-m14-m15-m17
• Kiswahili (Uganda): background 02, agents f01-f02-f03-f04-m01-m02-m03-m04
• Turkish (Türkiye): background 01, agents f05-f09-f18-f21-m05-m09-m18-m21
• Yaka (Rep. Congo): background 02, agents f01-f02-f03-f04-m01-m02-m03-m04

We added this language selection to offer you even more flexibility. If you work with an offline version of the TANGO-CC and have downloaded the "dist" folder, you can exchange the audio recordings in the folder "sounds", and then "custom" with whatever mp3 files you want. The only requirement is that it matches the naming of the placeholder mp3s within the "custom" folder. If you then start the live server and open the task, select language: custom and the task will play your own mp3s! Please note that trials with audio instructions wait with their animation until the audio recording is finished. Therefore, if the audio recording is too long and contains pauses, the trial might seem to be stuck.

You can enter any number between 1 and 100. Please note that the first trial of each kind plays voice-over instructions, so you will probably want to exclude the first trial of each kind from your analysis.

If you want to add other features to the TANGO-CC, you can do so by editing the code. Please visit our public GitHub repository: https://github.com/ccp-eva/tango-cc. Clone the repo to your personal device (git clone git@github.com:ccp-eva/tango-cc.git) and start experimenting! Please note that we cannot offer individual coding counselling or website hosting for your own version of the task. We developed this task on macOS and use features for Unix-like operating systems (e.g., rsync). If you are working on a Windows device, you might need to adjust some of the code.

The training trials are meant to familiarize the participants with the task. The first training trial shows a balloon that falls from the center to a random position on the ground. The participant is asked to click on the visible balloon. The second training trial shows a balloon that again falls to a random position on the ground, but this time the end position of the balloon is covered by a hedge. The participant sees the direction of the balloon flight, but not the exact end position. They are then asked to click on hedge, where they think the hidden balloon is. In the test trials, the balloon falls to a random location on the ground, while the whole balloon flight is covered by the hedge. The test trials are probably the ones that you will want to analyze.

No, you cannot. Each study phase is necessary to understand the task and needs to be completed before the next phase starts. Please note that the first trial of each kind plays voice-over instructions.

The order of the agents, balloon colors (red, yellow, green, blue), and balloon positions are each randomized independently. For the balloon positions, the full width of the screen (1920 in "SVG unit") is divided into ten bins. Exact coordinates (value between 0 far left and 1920 far right) within each bin are then randomly generated. The number of repetitions for each agent, balloon color, and balloon bin is calculated based on the total number of trials and the number of unique agents, balloon colors, and bins, respectively. All agents, balloon colors, and bins appear equally often and are not repeated in more than two consecutive trials. If the total number of trials is not divisible by the number of unique elements, additional elements are randomly selected to make up for the remainder. This ensures a balanced and random distribution of agents, balloon colors, and bins across trials. The randomized elements and their positions are logged for each trial, providing a detailed record of the experimental conditions.

No matter which language you choose, the written text instructions will always be in English. Only the audio recordings change according to your language selection. This design choice has four main reasons:

1. We wanted to keep things manageable!
2. The text instructions are only meant for the experimenters, leading the participants (e.g., children who cannot read) through the study.
3. The content of the text instructions is kept to the bare minimum. It is rather meant as a chance to pause between the different trial types.
4. Some of the communities in which we conducted our cross-cultural study (see Further reading) do not rely on written text that much / at all.

When we collected child data for our study, a study leader guided the children through the study. Here are the guidelines we used for our data collection:

• In short: don't give directions, don't point to any box/place, no direct right/wrong as feedback.
• Briefly tell the children something like "Look, there are some children and balloons in the picture. We're about to play with them! A voice always explains to us what is about to happen. Let's listen to it together!"
• Between the trial types (i.e. whenever there is a text slide in between), you can say something like: "Great! We'll continue playing in a moment. The game changes a bit and the voice will explain it again. Come on, let's listen to it together!"
• To direct attention back, "Look what's happening!" / "Well, where is the balloon?" / "Look at that animal there" etc.
• In between, e.g. to motivate the children, you can always say "Super" / "great" / etc. between trials. Don't praise the response of the children directly, but the participation/attention overall.
• When kids ask where to click, say something like "Where's the balloon?" / "Show me where the balloon is".
• When children ask if they should click in a certain place / if it's right: "Press where you think the balloon is" / "Whatever you think" etc. No direct feedback, please! Feel free to praise the children in general, but don't tell them if it was right or not.

Yes, there are. The participants can only click the screen after the voice recording stopped playing. If they click before, nothing will happen. If they do not click within 5 seconds, the voice recording will remind them to please touch the screen. The participants can only click on the lower part of the screen. If they click on the upper part (e.g., on the person in the window), nothing will happen.

No, participants see a small orange circle where they clicked and hear a short sound, but they do not get any feedback on whether their response was correct or not. We decided against feedback because we wanted to keep the trials in the task as comparable as possible.

The task does not require a certain screen size. It even runs on smartphones. However, we would recommend a bigger screen for better handling and touch precision. What you do need is either a working internet connection or installing a live server. Intel-based tablets might be easier to set this up.

No, they do not. The task is designed to be intuitive and easy to understand. The only requirement is that the participants can see the screen and touch it. If you are working with children, you might want to read the section "How did you guide children through the study?". What might help is to explain to the participants that there will be a computer voice that guides them through the study and that they should pay attention to this instruction. You can also practice touching the tablet before you start the study.

We have collected data from participants between 3 and 80 years of age. The task seems to be fun for most and easy to understand. What we noticed is that some of the very young children tend to click in the center of the screen. So if you gathered a similar experience, you're not alone!

We collected data from Argentina, China, Rep. Congo, Germany, India, Mexico, Namibia, New Zealand, Nigeria, Zambia, Türkiye, Uganda, UK, USA. The task runs smoothly and children from all settings seemed to enjoy the task. Some children needed to get familiar with touching the screen, but this was not a problem (see question "Do my participants need to have experience with computers or touchscreens?").

If you selected a webcam recording, you will be able to watch a WEBM file. You can, for example, open this file in any browser. The CSV file contains the following variables:

• id: the participant ID you entered
• language: an abbreviation for the selected language
• background: description of the selected background
• trial_number: counting variable for trial
• study_phase: training1 (path of balloon visible), training2 (path of balloon partially covered), or test (path of balloon completely covered)
• audio_instructions: true or false indicating whether audio instructions were played in this trial
• keep_trial: true for trials that should be included in analysis (test trials without audio instructions)
• agent: which agent was presented in the trial
• balloon_color: color of the balloon
• balloon_bin: area of the screen in which the balloon landed (1 very left, 10 very right)
• balloon_center: exact X coordinate of the balloon center once the balloon landed (0 very left, 1920 very right)
• click: X coordinate where the participant clicked (0 very left, 1920 very right)
• absolute_click_distance: absolute distance between balloon_center and click
• timestamp: UTC time and date when the trial ended
• responsetime_ms: how long did it take from the end of the animation until the participant clicked (in ms)

First of all: we do not use cookies or upload any data to our servers. The data that is collected during the study (e.g., click coordinates, randomization, webcam video) will be downloaded to your device and is fully deleted from the browser once you close your browser window. This means we cannot access any of the data that you/your participants enter.

After you/your participant finished the last trial, a CSV file will be downloaded to your device. If you also selected the webcam recording, a WEBM file will also be downloaded to your device. The files will be stored in your Downloads folder (or the path you personally specified in your browser settings). The file name follows the pattern: "tangoCC-participantID-YYYY-MM-DD_hh_mm_ss".

In a recent study, we tested the reliability and internal consistency of the TANGO. We found that the task is able to capture individual differences between children and adults. High internal consistency and test-retest reliability estimates underline that the captured variation is systematic. You can read more about this in our paper:

Prein, J. C., Kalinke, S., Haun, D. B. M.*, & Bohn, M.* (2023). TANGO: A reliable, open-source, browser-based task to assess individual differences in gaze understanding in 3 to 5-year-old children and adults. Behavior Research Methods. https://doi.org/10.3758/s13428-023-02159-5

We use URL parameters to pass on the selected options to the study website. This means that the URL of the study website changes according to your selection. For example, if you enter the participant ID "test1234", the URL will change to "https://ccp-odc.eva.mpg.de/tango-cc/tango.html?ID=test1234 [...]". Everything after the question mark is a URL parameter. The parameter "ID" is followed by the participant ID you entered (characters after the "=" sign). URL parameters are listed one after each other, separated by the "&" character. The study website then reads the URL and adjusts the study accordingly. This is also the reason why you can share the URL with others and they will see the same study setup as you (even though randomization will be different).

The automatic download only gets triggered after all trials are completed. However, you can open the browser console (e.g., right-click on some element on the website and click "Inspect") and download the data manually at any point during the study. For this, you simply need to enter the command downloadCsv() in the console and press enter. The data will then be downloaded to your device. Some browsers might ask you to confirm the download. The trials which were not completed yet will contain some empty columns in the CSV. You can do the same with the webcam recording by entering downloadWebm() in the console.

Yes, you can! The basic logic for an offline data collection is as follows:

• A live server opens the website. The name “live” server is a bit confusing. It is not actually live in the sense of “online”. It just means that it can host a website locally, so that you do not need to upload the website content somewhere else. This way, you do not need WIFI connection. You can just open this “live server” on your local device.
• The live server then displays the website by running the content of our so-called “dist” folder. This folder stores all the audio files, script etc. that the website needs. We have this folder ready for use, you can download it from the TANGO-CC GitHub page .

Yes, you can! You can download the "dist" folder from TANGO-CC on GitHub and host it on your own server. Please note that we cannot offer individual coding counselling or website hosting for your own version of the task. Please also note that we do not take any responsibility for the correctness of the task nor the legal and administrative aspects of your data management. We developed this task on macOS and use features for Unix-like operating systems (e.g., rsync). If you are working on a Windows device, you might need to adjust some of the code.

Yes, you could. However, this requires some technical setup and programming knowledge. You can download the source code from TANGO-CC online (GitHub). Then, you would need to adapt the "downloadData.js" function and change it to an upload. We did this in the past by using this JavaScript code (note that we upload a .json file instead of a .csv file):

              
  function uploadData (safe, ID) => {
    fetch('data/data.php', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ data: JSON.stringify(safe), fname: ID }),
    })
      .then((response) => response.json())
      .then((data) => { console.log('Success:', data) })
      .catch((error) => { console.error('Error:', error) });
  };
              
            

The corresponding php script could look like the following. Please make sure to adapt the folder paths and upload links to your own server and check the deploy script in the package.json.

              
<?php
$jsonString = json_decode(file_get_contents('php://input'), true);
$data = $jsonString["data"];
$fname = $jsonString["fname"];
$time = date("Y-m-d-H-i-s");
file_put_contents('tangoCC-' . $fname . '-' . $time . '.json', $data, true);
echo '{ "success": true }';
?>
              
            

Setting up a live server on a Mac or Windows requires similar steps.

1. Install Node.js on your device. You can download it from the official website: Node.js
2. For Mac: Open the Terminal. For Windows: Open Command Prompt.
3. Install the live-server package globally using npm (Node Package Manager, which comes with Node.js) with the following command:
   # npm i -g live-server
4. Navigate to the directory which contains the TANGO-CC dist folder, using the cd command. For example, if the dist folder is in a directory called tangocc on your Desktop:
   For Mac: # cd ~/Desktop/tangocc/dist
   For Windows: # cd C:\Users\username\Desktop\tangocc\dist
5. Once you're in the right directory, you can start the live server with the following command:
   # live-server
6. This will start the live server and open your default web browser to display your project. If you make changes to your project files, the browser will automatically refresh to show the changes.

Setting up a live server on an Android tablet is a bit more complex than on a desktop operating system, but it's possible with the help of Termux, a Linux environment for Android. Here are the steps:

1. Install termux (from the play store or from the website).
2. Open Termux.
3. Update the linux packages:
   # apt update
# apt upgrade
4. In the console, activate the access to your device folders:
   # termux-setup-storage
5. Install Node.js using the following command:
   # pkg install nodejs
6. Install the live-server package globally using npm (Node Package Manager, which comes with Node.js) with the following command:
   # npm i -g live-server
7. Navigate to the directory of your project using the cd command. For example, if the TANGO-CC dist folder is in your downloads folder, you would use:
   cd storage/downloads/dist
8. Once you're in your project's directory, you can start the live server with the following command:
   # live-server

The study data exists of a CSV file and, if a webcam recording was selected, a WEBM file. The files will be stored in your Downloads folder (or the path you personally specified in your browser settings). If you want to change the download location, you can do so in your browser settings (please note that this change applies to all other downloads as well).

Yes, of course! Please first make sure that you enabled the live server (see questions above). If everything works as expected, make a cmd shortcut on the desktop that looks like this (example for Microsoft Surface Pro device): %windir%\system32\cmd.exe /k live-server. In the shortcut settings, enter the correct pathway to the "dist" folder.

Sometimes, the device is not sensitive enough to register the clicks. This is especially true for children who have a lighter touch. In this case, you can increase the sensitivity of your tablet device. For example, on a Microsoft Surface Pro, you can do this by going to the Windows settings, selecting "Devices", then "Pen & Windows Ink", and then "Change the pen tip pressure sensitivity". You can also try to instruct the children to adjust their touch behavior: You might ask the children to adjust their strength or speed (clicking stronger and faster, for example). Sometimes it helps if they hold their finger the other way around (upside down) or press with their thumb.

Please check your browser settings and allow the website to access your webcam. If you are using Safari, please note that Safari (especially on iOS) has issues with webcam recordings. Try another browser!

For the online version:

• Ensure a stable internet connection.
• Turn on the sound/ volume of your device.
• Clean the cache of your browser and reload the website.
• Check your privacy settings and allow permissions to record via the webcam and download files.
• Please note that Safari (especially on iOS) has issues with webcam recordings. Try another browser!
• We have noticed that the TANGO-CC is sometimes not working properly on Safari when browser extensions are enabled. For example, extensions like add blockers (e.g. UBlock Origin), password managers (e.g. 1Password) and typing assistants (e.g. Grammarly) might inject JavaScript which interferes with the task. In these cases, the task might load but the audio instructions do not play and clicks cannot be registered. Please try to disable all browser extensions and reload the page. It might be necessary to restart the browser. You can also try to open the website in a private window or another browser.
• In any case, it might be worthwile to try another browser or reload the page.

For the offline version:

• Please make sure your device has a live server installed. Please open the index.html file with this live server!
• For Android, check that the termux app has rights for accessing files and media on your device. Check that you navigated into the right folder (using the cd command in the console).

If you want to take a deep dive into the programming world, open up your browser's console and/or developer tools and see whether you get any error messages.

If you are interested, here are some articles that use the TANGO task.

Prein, J. C., Kalinke, S., Haun, D. B. M.*, & Bohn, M.* (2023). TANGO: A reliable, open-source, browser-based task to assess individual differences in gaze understanding in 3 to 5-year-old children and adults. Behavior Research Methods. https://doi.org/10.3758/s13428-023-02159-5

Prein, J. C., Maurits, L., Werwach, A., Haun, D. B. M., & Bohn, M. (2023). Variation in gaze understanding across the life span: A process-level perspective. PsyArXiv. https://doi.org/10.31234/osf.io/dy73a

Bohn, M.*, Prein, J. C.*, Ayikoru, A., Bednarski, F. M., Dzabatou, A., Frank, M. C., Henderson, A. M. E., Isabella, J., Kalbitz, J., Kanngiesser, P., Keşşafoğlu, D., Koymen, B., Manrique-Hernandez, M., Magazi, S., Mújica-Manrique, L., Ohlendorf, J., Olaoba, D., Pieters, W., Pope-Caldwell, S., … Haun, D. (2024). A universal of human social cognition: Children from 17 communities process gaze in similar ways. PsyArXiv. https://doi.org/10.31234/osf.io/z3ahv

Prein, J.C., Bednarski, F. M., Dzabatou, A., Frank, M. C., Henderson, A. M. E., Kalbitz, J., Kanngiesser, P., Keşşafoğlu, D., Köymen, B., Manrique-Hernandez, M. V., Magazi, S., Mújica-Manrique, L., Ohlendorf, J., Olaoba, D., Pieters, W. R., Pope-Caldwell, S., Sen, U., Slocombe, K., Sparks, R. Z., Stengelin, R., Sunderarajan, J., Sutherland, K., Tusiime, F., Vieira, W., Zhang, Z., Zong, Y., Haun, D. B. M.*, Bohn, M.*. (2024). Measuring variation in gaze following across communities, ages, and individuals – a showcase of the TANGO–CC. PsyArxiv.

We are happy to hear from you! You can contact us under this email adress: Email us

If you want to share your data with us, we would be eternally grateful. We created a public OSF page where we plan to collect all data sets from the TANGO-CC. In case you want to contribute, please reach out to Julia Prein via e-mail. We will then merge your data with the already existing data set. Before you send us any data, please make sure that you finish the following data preprocessing steps:

• make sure all data is anonymized
• add age information in years for all participants (e.g., for a 30-months-old write 2.5)
• add community / geographical information (e.g., leipzig_germany)
• merge all individual participants into one big csv file
• do not upload any video files

Please only upload one final data set including all your participants. Do not upload single csv files without any additional information.

We will collect and merge data sets and regularly update the OSF page. Thank you so much for your help!