Vega Stimuli support

public/demo-vega/assets/help.md

@@ -0,0 +1,25 @@
+**Scenario**: Alpacas may need blankets. Assume that
+you work at the Red Cross, and your job is to manage
+resources for farms in Peru. In previous years, alpacas have
+died in Peru from cold temperatures. Alpacas can typically
+withstand the cold unless the temperature drops below 32°F.
+
+**Budget**: You are in charge of the Red Cross’s blanket
+budget, and it is your job to issue blankets to the alpacas
+when temperatures fall below 32°F, which will help them
+withstand the cold.
+
+**Budget Constraints**: You have a budget for 48 days of
+$48,000. Purchasing and delivering blankets to farmers
+costs $1,000 (per night). If you fail to issue blankets to the
+farmers and the temperature drops below 32°F, it will cost
+$6,000 from your budget.
+
+**Task**: In the experiment, you will be shown a nighttime
+temperature forecast like the one below. In the forecast, each
+dot represents a 1 out of 20 chance the nighttime low will
+be that temperature. You will be asked some questions about
+this forecast, including if you will issue blankets to the alpacas.
+Compensation: Please respond to the best of your ability.
+You will receive an extra $0.15 cents for every $1,000 that
+you have in your budget at the end of 48 days.

public/demo-vega/assets/introduction.md

@@ -0,0 +1,33 @@
+# Introduction
+
+Welcome to our study. This is a replication of a study by Padilla et al., published in  Frontiers in Psychology, 2021.
+
+## Instructions
+
+The following instructions describe the tasks you will see and how to complete them. If you need to refer to these instructions during the experiment, please click on help at the top of the page.
+
+**Scenario**: Alpacas may need blankets. Assume that
+you work at the Red Cross, and your job is to manage
+resources for farms in Peru. In previous years, alpacas have
+died in Peru from cold temperatures. Alpacas can typically
+withstand the cold unless the temperature drops below 32°F.
+
+**Budget**: You are in charge of the Red Cross's blanket
+budget, and it is your job to issue blankets to the alpacas
+when temperatures fall below 32°F, which will help them
+withstand the cold.
+
+**Budget Constraints**: You have a budget for 48 days of
+$48,000. Purchasing and delivering blankets to farmers
+costs $1,000 (per night). If you fail to issue blankets to the
+farmers and the temperature drops below 32°F, it will cost
+$6,000 from your budget.
+
+**Task**: In the experiment, you will be shown a nighttime
+temperature forecast like the one below. In the forecast, each
+dot represents a 1 out of 20 chance the nighttime low will
+be that temperature. You will be asked some questions about
+this forecast, including if you will issue blankets to the alpacas.
+Compensation: Please respond to the best of your ability.
+You will receive an extra $0.15 cents for every $1,000 that
+you have in your budget at the end of 48 days.

public/demo-vega/config.json

@@ -0,0 +1,301 @@
+{
+  "$schema": "https://raw.githubusercontent.com/revisit-studies/study/v1.0.5/src/parser/StudyConfigSchema.json",
+  "studyMetadata": {
+    "title": "Demo of use Vega-Lite as stimuli",
+    "version": "pilot",
+    "authors": [
+      "The reVISit Team"
+    ],
+    "date": "2024-11-16",
+    "description": "A demo of vega-lite stimuli",
+    "organizations": [
+      "University of Utah",
+      "WPI",
+      "University of Toronto"
+    ]
+  },
+  "uiConfig": {
+    "contactEmail": "[email protected]",
+    "helpTextPath": "demo-vega/assets/help.md",
+    "logoPath": "revisitAssets/revisitLogoSquare.svg",
+    "withProgressBar": true,
+    "autoDownloadStudy": false,
+    "sidebar": true
+  },
+  "components": {
+    "introduction": {
+      "type": "markdown",
+      "path": "demo-vega/assets/introduction.md",
+      "response": []
+    },
+    "vegademo1": {
+      "meta": {
+        "metadata": 1
+      },
+      "description": "Select the highest bar.",
+      "instruction": "Click on the bar with the highest value.",
+      "type": "vega",
+      "config": {
+        "$schema": "https://vega.github.io/schema/vega/v5.json",
+        "width": 400,
+        "height": 200,
+        "padding": {
+          "left": 5,
+          "right": 5,
+          "top": 5,
+          "bottom": 5
+        },
+        "data": [
+          {
+            "name": "table",
+            "values": [
+              {
+                "category": "A",
+                "amount": 28
+              },
+              {
+                "category": "B",
+                "amount": 55
+              },
+              {
+                "category": "C",
+                "amount": 43
+              },
+              {
+                "category": "D",
+                "amount": 91
+              },
+              {
+                "category": "E",
+                "amount": 81
+              },
+              {
+                "category": "F",
+                "amount": 53
+              },
+              {
+                "category": "G",
+                "amount": 19
+              },
+              {
+                "category": "H",
+                "amount": 87
+              }
+            ]
+          }
+        ],
+        "config": {
+          "signals": [
+            {
+              "name": "tooltip",
+              "value": {},
+              "on": [
+                {
+                  "events": "rect:mouseover",
+                  "update": "datum"
+                },
+                {
+                  "events": "rect:mouseout",
+                  "update": "{}"
+                }
+              ]
+            },
+            {
+              "name": "revisitAnswer",
+              "value": {},
+              "on": [
+                {
+                  "events": "rect:click",
+                  "update": "{responseId: 'vegaDemoResponse1', response: datum.category}"
+                }
+              ]
+            }
+          ]
+        },
+        "scales": [
+          {
+            "name": "xscale",
+            "type": "band",
+            "domain": {
+              "data": "table",
+              "field": "category"
+            },
+            "range": "width"
+          },
+          {
+            "name": "yscale",
+            "domain": {
+              "data": "table",
+              "field": "amount"
+            },
+            "nice": true,
+            "range": "height"
+          }
+        ],
+        "axes": [
+          {
+            "orient": "bottom",
+            "scale": "xscale"
+          },
+          {
+            "orient": "left",
+            "scale": "yscale"
+          }
+        ],
+        "marks": [
+          {
+            "type": "rect",
+            "from": {
+              "data": "table"
+            },
+            "encode": {
+              "enter": {
+                "x": {
+                  "scale": "xscale",
+                  "field": "category",
+                  "offset": 1
+                },
+                "width": {
+                  "scale": "xscale",
+                  "band": 1,
+                  "offset": -1
+                },
+                "y": {
+                  "scale": "yscale",
+                  "field": "amount"
+                },
+                "y2": {
+                  "scale": "yscale",
+                  "value": 0
+                }
+              },
+              "update": {
+                "fill": [
+                  {
+                    "test": "datum.category === tooltip.category",
+                    "value": "red"
+                  },
+                  {
+                    "value": "steelblue"
+                  }
+                ]
+              }
+            }
+          },
+          {
+            "type": "text",
+            "encode": {
+              "enter": {
+                "align": {
+                  "value": "center"
+                },
+                "baseline": {
+                  "value": "bottom"
+                },
+                "fill": {
+                  "value": "#333"
+                }
+              },
+              "update": {
+                "x": {
+                  "scale": "xscale",
+                  "signal": "tooltip.category",
+                  "band": 0.5
+                },
+                "y": {
+                  "scale": "yscale",
+                  "signal": "tooltip.amount",
+                  "offset": -2
+                },
+                "text": {
+                  "signal": "tooltip.category"
+                },
+                "fillOpacity": [
+                  {
+                    "test": "datum.category === tooltip.category",
+                    "value": 0
+                  },
+                  {
+                    "value": 1
+                  }
+                ]
+              }
+            }
+          }
+        ]
+      },
+      //      "path": "demo-vega/specs/vegademo1.specs.json",
+      "nextButtonLocation": "sidebar",
+      "response": [
+        {
+          "id": "vegaDemoResponse1",
+          "prompt": "You selected:",
+          "required": true,
+          "location": "sidebar",
+          "type": "iframe"
+        },
+        {
+          "id": "vegaDemoConfidence1",
+          "prompt": "How confident are you with your answer?",
+          "required": true,
+          "location": "sidebar",
+          "type": "slider",
+          "options": [
+            {
+              "label": "Low",
+              "value": 0
+            },
+            {
+              "label": "High",
+              "value": 100
+            }
+          ]
+        }
+      ]
+    },
+    "vegademo2": {
+      "meta": {
+        "metadata": 1
+      },
+      "description": "Select the highest value.",
+      "instruction": "Select the movie with highest World Wide Gross.",
+      "type": "vega",
+      "path": "demo-vega/specs/vegademo2.specs.json",
+      "nextButtonLocation": "sidebar",
+      "response": [
+        {
+          "id": "vegaDemoResponse1",
+          "prompt": "You selected:",
+          "required": true,
+          "location": "sidebar",
+          "type": "iframe"
+        },
+        {
+          "id": "vegaDemoConfidence1",
+          "prompt": "How confident are you with your answer?",
+          "required": true,
+          "location": "sidebar",
+          "type": "slider",
+          "options": [
+            {
+              "label": "Low",
+              "value": 0
+            },
+            {
+              "label": "High",
+              "value": 100
+            }
+          ]
+        }
+      ]
+    }
+  },
+  "sequence": {
+    "order": "fixed",
+    "components": [
+      "introduction",
+      "vegademo1",
+      "vegademo2"
+    ]
+  }
+}