ebzgr.github.io/exp-standard-res.html at master · ebzgr/ebzgr.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
  <title>Results – Standard Effect Study</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" />
</head>
<body class="text-gray-800 scroll-smooth">
  <!-- COMPARISON SECTION -->
  <section class="min-h-screen flex flex-col items-center justify-center px-6 py-20 bg-violet-100">
    <h1 class="text-3xl font-bold mb-8 text-center">Two Conditions: Same Products, Different Labels</h1>
    <p class="mb-12 text-center text-lg max-w-4xl">We tested how labeling affects choice. Half the users saw one condition, half saw the other. The 12oz size was identical in both, but labeled differently.</p>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 max-w-6xl w-full">
      <!-- Variant A -->
      <div class="bg-white rounded-lg shadow-lg p-8">
        <h2 class="text-2xl font-bold mb-4 text-center text-violet-700">Condition A: 8oz is "Standard"</h2>
        <p class="mb-6 text-center text-gray-600">Users saw Standard (8oz) and Large (12oz) options for Coffee, Tea, and Latte</p>
        <div id="sectionA" class="flex flex-col items-center space-y-4"></div>
      </div>

      <!-- Variant B -->
      <div class="bg-white rounded-lg shadow-lg p-8">
        <h2 class="text-2xl font-bold mb-4 text-center text-violet-700">Condition B: 12oz is "Standard"</h2>
        <p class="mb-6 text-center text-gray-600">Users saw Small (8oz) and Standard (12oz) options for Coffee, Tea, and Latte</p>
        <div id="sectionB" class="flex flex-col items-center space-y-4"></div>
      </div>
    </div>
  </section>

  <!-- SECTION IMPACT -->
  <section class="min-h-screen flex flex-col items-center justify-center px-6 py-20 bg-violet-100">
    <h1 class="text-3xl font-bold mb-10 text-center">Impact of the "Standard" Label</h1>
    <div id="impact" class="grid grid-cols-1 md:grid-cols-3 gap-12 max-w-6xl text-center"></div>
  </section>

  <script>
    async function loadResults() {
      const response = await fetch("https://script.google.com/macros/s/AKfycbxxSFVGOjAXFbGnIkmetFl5pP120x6sGRnXnDTc0Vvgf4K5IC-hM6JKf2-taKLiRzl0/exec");
      const data = await response.json();

      // Use all data (no filtering needed)
      const standardData = data;

      // Initialize counts for all possible choices
      const allChoices = [
        "Coffee Standard", "Coffee Large", "Coffee Small",
        "Tea Standard", "Tea Large", "Tea Small",
        "Latte Standard", "Latte Large", "Latte Small"
      ];

      const counts = {
        A: { total: 0 },
        B: { total: 0 }
      };

      // Initialize all choice counts to 0
      allChoices.forEach(choice => {
        counts.A[choice] = 0;
        counts.B[choice] = 0;
      });

      standardData.forEach(row => {
        const v = (row["Variant"] || row["Variant "] || "").trim();
        const c = (row["Choice"] || row["Choice "] || "").trim();
        if (counts[v] && counts[v][c] !== undefined) {
          counts[v][c]++;
          counts[v].total++;
        }
      });

      const totalA = counts.A.total;
      const totalB = counts.B.total;

      // Calculate metrics for the 12oz option (Large in A, Standard in B)
      const ratio12ozA = (counts.A["Coffee Large"] + counts.A["Tea Large"] + counts.A["Latte Large"]) / (totalA || 1);
      const ratio12ozB = (counts.B["Coffee Standard"] + counts.B["Tea Standard"] + counts.B["Latte Standard"]) / (totalB || 1);
      const increase12oz = ((ratio12ozB - ratio12ozA) / (ratio12ozA || 0.01)) * 100;

      // Calculate average spending per person
      let totalSpendingA = 0;
      let totalSpendingB = 0;

      // Condition A spending calculation
      totalSpendingA += counts.A["Coffee Standard"] * 2.00;
      totalSpendingA += counts.A["Coffee Large"] * 3.00;
      totalSpendingA += counts.A["Tea Standard"] * 2.00;
      totalSpendingA += counts.A["Tea Large"] * 3.00;
      totalSpendingA += counts.A["Latte Standard"] * 3.00;
      totalSpendingA += counts.A["Latte Large"] * 4.00;

      // Condition B spending calculation
      totalSpendingB += counts.B["Coffee Small"] * 2.00;
      totalSpendingB += counts.B["Coffee Standard"] * 3.00;
      totalSpendingB += counts.B["Tea Small"] * 2.00;
      totalSpendingB += counts.B["Tea Standard"] * 3.00;
      totalSpendingB += counts.B["Latte Small"] * 3.00;
      totalSpendingB += counts.B["Latte Standard"] * 4.00;

      const avgSpendingA = totalSpendingA / (totalA || 1);
      const avgSpendingB = totalSpendingB / (totalB || 1);
      const increaseSpending = ((avgSpendingB - avgSpendingA) / (avgSpendingA || 0.01)) * 100;

      // Calculate average volume consumed (in oz)
      let totalOzA = 0;
      let totalOzB = 0;

      // Condition A volume calculation
      totalOzA += counts.A["Coffee Standard"] * 8;
      totalOzA += counts.A["Coffee Large"] * 12;
      totalOzA += counts.A["Tea Standard"] * 8;
      totalOzA += counts.A["Tea Large"] * 12;
      totalOzA += counts.A["Latte Standard"] * 8;
      totalOzA += counts.A["Latte Large"] * 12;

      // Condition B volume calculation
      totalOzB += counts.B["Coffee Small"] * 8;
      totalOzB += counts.B["Coffee Standard"] * 12;
      totalOzB += counts.B["Tea Small"] * 8;
      totalOzB += counts.B["Tea Standard"] * 12;
      totalOzB += counts.B["Latte Small"] * 8;
      totalOzB += counts.B["Latte Standard"] * 12;

      const avgOzA = totalOzA / (totalA || 1);
      const avgOzB = totalOzB / (totalB || 1);
      const increaseOz = ((avgOzB - avgOzA) / (avgOzA || 0.01)) * 100;

      // Display results for Condition A
      const sectionA = document.getElementById("sectionA");
      const conditionAChoices = [
        { label: "Coffee Standard (8oz) - €2.00", key: "Coffee Standard" },
        { label: "Coffee Large (12oz) - €3.00", key: "Coffee Large" },
        { label: "Tea Standard (8oz) - €2.00", key: "Tea Standard" },
        { label: "Tea Large (12oz) - €3.00", key: "Tea Large" },
        { label: "Latte Standard (8oz) - €3.00", key: "Latte Standard" },
        { label: "Latte Large (12oz) - €4.00", key: "Latte Large" }
      ];

      conditionAChoices.forEach(option => {
        const percent = ((counts.A[option.key] / counts.A.total) * 100).toFixed(1);
        const div = document.createElement("div");
        div.className = "w-72 py-2 px-4 rounded-md bg-gray-50 text-center border border-violet-300 text-sm font-medium shadow-sm";
        div.innerHTML = `${option.label}<br><span class='text-violet-700 font-semibold'>${percent}%</span>`;
        sectionA.appendChild(div);
      });

      // Display results for Condition B
      const sectionB = document.getElementById("sectionB");
      const conditionBChoices = [
        { label: "Coffee Small (8oz) - €2.00", key: "Coffee Small" },
        { label: "Coffee Standard (12oz) - €3.00", key: "Coffee Standard" },
        { label: "Tea Small (8oz) - €2.00", key: "Tea Small" },
        { label: "Tea Standard (12oz) - €3.00", key: "Tea Standard" },
        { label: "Latte Small (8oz) - €3.00", key: "Latte Small" },
        { label: "Latte Standard (12oz) - €4.00", key: "Latte Standard" }
      ];

      conditionBChoices.forEach(option => {
        const percent = ((counts.B[option.key] / counts.B.total) * 100).toFixed(1);
        const div = document.createElement("div");
        div.className = "w-72 py-2 px-4 rounded-md bg-gray-50 text-center border border-violet-300 text-sm font-medium shadow-sm";
        div.innerHTML = `${option.label}<br><span class='text-violet-700 font-semibold'>${percent}%</span>`;
        sectionB.appendChild(div);
      });

      document.getElementById("impact").innerHTML = `
        <div class="bg-white p-6 rounded-lg shadow-sm border border-violet-200 flex flex-col items-center">
          <div class="w-20 h-20 flex items-center justify-center rounded-full bg-violet-100 text-violet-700 text-3xl mb-4" title="The Standard label was moved from 8oz to 12oz">
            <i class="fas fa-tag"></i>
          </div>
          <div class="text-xl font-semibold mb-1">Label Manipulation</div>
          <div class="text-sm text-gray-600 max-w-xs">The "Standard" label was moved from 8oz to 12oz — making the expensive option seem normal and expected.</div>
        </div>
        <div class="bg-white p-6 rounded-lg shadow-sm border border-red-200 flex flex-col items-center">
          <div class="w-20 h-20 flex items-center justify-center rounded-full bg-red-100 text-red-600 text-3xl mb-4" title="Average spending increased when 12oz was labeled Standard">
            <i class="fas fa-euro-sign"></i>
          </div>
          <div class="text-xl font-semibold mb-1">+${increaseSpending.toFixed(1)}% more spending</div>
          <div class="text-sm text-gray-600 max-w-xs">From €${avgSpendingA.toFixed(2)} to €${avgSpendingB.toFixed(2)} average. The "Standard" label increased spending per person.</div>
        </div>
        <div class="bg-white p-6 rounded-lg shadow-sm border border-orange-200 flex flex-col items-center">
          <div class="w-20 h-20 flex items-center justify-center rounded-full bg-orange-100 text-orange-600 text-3xl mb-4" title="Average consumption increased when 12oz was labeled Standard">
            <i class="fas fa-coffee"></i>
          </div>
          <div class="text-xl font-semibold mb-1">+${increaseOz.toFixed(1)}% more consumption</div>
          <div class="text-sm text-gray-600 max-w-xs">From ${avgOzA.toFixed(1)}oz to ${avgOzB.toFixed(1)}oz average. The "Standard" label increased beverage consumption.</div>
        </div>`;
    }

    loadResults().catch(err => {
      document.getElementById("impact").innerText = "Error loading results.";
      console.error(err);
    });
  </script>
</body>
</html>