Run AB test on survey stars (#17861)

* Run AB test on survey stars

* Update browser.js

* Use text stars instead of primer ones

* Update experiment.js

data/ui.yml

@@ -48,12 +48,6 @@ helpfulness:
   yes_feedback: Want to learn about new docs features and updates? Sign up for updates!
   email_placeholder: email@example.com
   no_feedback: We're continually improving our docs. We'd love to hear how we can do better.
-  category_label: What problem did you have?
-  category_default: Choose an option
-  category_unclear: Information was unclear
-  category_confusing: The content was confusing
-  category_unhelpful: The article didn't answer my question
-  category_other: Other
   comment_label: Let us know what we can do better
   optional: Optional
   required: Required

includes/helpfulness.html

@@ -52,38 +52,6 @@
     name="helpfulness-token"
     aria-hidden="true"
   />
-  <p hidden data-help-no>
-    <label
-      class="d-block mb-1 f6"
-      for="helpfulness-category"
-    >
-      {% data ui.helpfulness.category_label %}
-      <span class="text-normal text-gray-light float-right ml-1">
-        {% data ui.helpfulness.required %}
-      </span>
-    </label>
-    <select
-      class="form-control select-sm width-full"
-      name="helpfulness-category"
-      id="helpfulness-category"
-    >
-      <option value="">
-        {% data ui.helpfulness.category_default %}
-      </option>
-      <option value="Unclear">
-        {% data ui.helpfulness.category_unclear %}
-      </option>
-      <option value="Confusing">
-        {% data ui.helpfulness.category_confusing %}
-      </option>
-      <option value="Unhelpful">
-        {% data ui.helpfulness.category_unhelpful %}
-      </option>
-      <option value="Other">
-        {% data ui.helpfulness.category_other %}
-      </option>
-    </select>
-  </p>
   <p hidden data-help-no>
     <label
       class="d-block mb-1 f6"

javascripts/experiment.js

@@ -1,6 +1,8 @@
 import murmur from 'imurmurhash'
 import { getUserEventsId, sendEvent } from './events'
-// import h from './hyperscript'
+import h from './hyperscript'
+
+import { updateDisplay, submitForm } from './helpfulness'
 
 const TREATMENT = 'TREATMENT'
 const CONTROL = 'CONTROL'
@@ -11,7 +13,7 @@ export function bucket (test) {
   return hash % 2 ? TREATMENT : CONTROL
 }
 
-export async function sendSuccess (test) {
+export function sendSuccess (test) {
   return sendEvent({
     type: 'experiment',
     experiment_name: test,
@@ -21,8 +23,85 @@ export async function sendSuccess (test) {
 }
 
 export default function () {
+  // *** Example test code ***
   // const testName = '$test-name$'
   // const xbucket = bucket(testName)
-  // if (xbucket === TREATMENT) { ... }
+  // const x = document.querySelector(...)
   // x.addEventListener('click', () => { sendSuccess(testName) })
+  // if (xbucket === TREATMENT) applyTreatment(x)
+
+  const testName = 'survey-stars'
+  const xbucket = bucket(testName)
+
+  const form = document.querySelector('.js-helpfulness')
+  if (!form) return
+
+  // Overwrites the default handler for helpfulness survey...
+  form.addEventListener('submit', evt => {
+    evt.preventDefault()
+    sendSuccess(testName)
+    submitForm(form)
+    updateDisplay(form, 'end')
+  })
+
+  if (xbucket === TREATMENT) applyTreatment(form)
+}
+
+function applyTreatment (form) {
+  const p = form.querySelector('.radio-group')
+  p.innerHTML = ''
+
+  const buttons = [1, 2, 3, 4, 5].map(i =>
+    h(
+      'button',
+      {
+        'data-value': i,
+        'aria-label': i,
+        class: 'btn-link tooltipped tooltipped-n'
+      },
+      h(
+        'span',
+        {
+          class: 'star-empty f3'
+        },
+        '☆'
+      ),
+      h(
+        'span',
+        {
+          class: 'star-full f3',
+          hidden: true
+        },
+        '★'
+      )
+    )
+  )
+  const input = h('input', {
+    name: 'helpfulness-vote',
+    type: 'hidden'
+  })
+  buttons.forEach(btn => p.appendChild(btn))
+  p.appendChild(input)
+
+  buttons.forEach((btn, i) => {
+    btn.addEventListener('click', evt => {
+      evt.preventDefault()
+      updateBtnDisplay(i)
+      submitForm(form)
+      updateDisplay(form, i > 2 ? 'yes' : 'no')
+    })
+  })
+
+  function updateBtnDisplay (i) {
+    buttons.forEach((xbtn, xi) => {
+      if (xi <= i) {
+        xbtn.querySelector('.star-full').removeAttribute('hidden')
+        xbtn.querySelector('.star-empty').setAttribute('hidden', true)
+      } else {
+        xbtn.querySelector('.star-full').setAttribute('hidden', true)
+        xbtn.querySelector('.star-empty').removeAttribute('hidden')
+      }
+    })
+    input.setAttribute('value', i > 2 ? 'Yes' : 'No')
+  }
 }

javascripts/helpfulness.js

@@ -1,22 +1,67 @@
 import { sendEvent } from './events'
 
+function showElement (el) {
+  el.removeAttribute('hidden')
+}
+
+function hideElement (el) {
+  el.setAttribute('hidden', true)
+}
+
+export function updateDisplay (form, state) {
+  Array.from(
+    form.querySelectorAll(
+      ['start', 'yes', 'no', 'end']
+        .map(xstate => '[data-help-' + xstate + ']')
+        .join(',')
+    )
+  )
+    .forEach(hideElement)
+  Array.from(form.querySelectorAll('[data-help-' + state + ']'))
+    .forEach(showElement)
+}
+
+export function submitForm (form) {
+  const formData = new FormData(form)
+  const data = Object.fromEntries(
+    Array.from(formData.entries())
+      .map(
+        ([key, value]) => [
+          key.replace('helpfulness-', ''),
+          value || undefined // Convert empty strings to undefined
+        ]
+      )
+  )
+  return trackEvent(data)
+}
+
+function trackEvent ({ token, vote, email, comment }) {
+  return sendEvent({
+    type: 'survey',
+    token, // Honeypot
+    survey_vote: vote === 'Yes',
+    survey_comment: comment,
+    survey_email: email
+  })
+}
+
 export default function helpfulness () {
   const form = document.querySelector('.js-helpfulness')
   const texts = Array.from(document.querySelectorAll('.js-helpfulness input, .js-helpfulness textarea'))
   const votes = Array.from(document.querySelectorAll('.js-helpfulness [type=radio]'))
   if (!form || !texts.length || !votes.length) return
 
-  form.addEventListener('submit', async evt => {
+  form.addEventListener('submit', evt => {
     evt.preventDefault()
-    await submitForm(evt.target)
+    submitForm(form)
     updateDisplay(form, 'end')
   })
 
   votes.forEach(voteEl => {
-    voteEl.addEventListener('change', async evt => {
+    voteEl.addEventListener('change', evt => {
       const state = evt.target.value.toLowerCase()
       const form = voteEl.closest('form')
-      await submitForm(form)
+      submitForm(form)
       updateDisplay(form, state)
     })
   })
@@ -27,62 +72,4 @@ export default function helpfulness () {
       if (evt.code === 'Slash') evt.stopPropagation()
     })
   })
-
-  function showElement (el) {
-    el.removeAttribute('hidden')
-  }
-
-  function hideElement (el) {
-    el.setAttribute('hidden', true)
-  }
-
-  function isRequired (el) {
-    el.setAttribute('required', true)
-  }
-
-  function notRequired (el) {
-    el.removeAttribute('required')
-  }
-
-  function updateDisplay (form, state) {
-    Array.from(
-      form.querySelectorAll(
-        ['start', 'yes', 'no', 'end']
-          .map(xstate => '[data-help-' + xstate + ']')
-          .join(',')
-      )
-    )
-      .forEach(hideElement)
-    Array.from(form.querySelectorAll('[data-help-' + state + ']'))
-      .forEach(showElement)
-    if (state === 'no') {
-      isRequired(form.querySelector('select'))
-    } else {
-      notRequired(form.querySelector('select'))
-    }
-  }
-
-  async function submitForm (form) {
-    const formData = new FormData(form)
-    const data = Object.fromEntries(
-      Array.from(formData.entries())
-        .map(
-          ([key, value]) => [
-            key.replace('helpfulness-', ''),
-            value || undefined // Convert empty strings to undefined
-          ]
-        )
-    )
-    return trackEvent(data)
-  }
-
-  async function trackEvent ({ token, vote, email, comment }) {
-    return sendEvent({
-      type: 'survey',
-      token, // Honeypot
-      survey_vote: vote === 'Yes',
-      survey_comment: comment,
-      survey_email: email
-    })
-  }
 }

tests/browser/browser.js

@@ -85,7 +85,7 @@ describe('browser search', () => {
   })
 })
 
-describe('helpfulness', () => {
+describe.skip('helpfulness', () => {
   it('sends an event to /events when submitting form', async () => {
     // Visit a page that displays the prompt
     await page.goto('http://localhost:4001/en/actions/getting-started-with-github-actions/about-github-actions')