diff --git a/data/ui.yml b/data/ui.yml
index f66f2ced6f6a..1979c0563eb2 100644
--- a/data/ui.yml
+++ b/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
diff --git a/includes/helpfulness.html b/includes/helpfulness.html
index e094c1c8f0b2..a925b179ed47 100644
--- a/includes/helpfulness.html
+++ b/includes/helpfulness.html
@@ -52,38 +52,6 @@
name="helpfulness-token"
aria-hidden="true"
/>
-
-
- {% data ui.helpfulness.category_label %}
-
- {% data ui.helpfulness.required %}
-
-
-
-
- {% data ui.helpfulness.category_default %}
-
-
- {% data ui.helpfulness.category_unclear %}
-
-
- {% data ui.helpfulness.category_confusing %}
-
-
- {% data ui.helpfulness.category_unhelpful %}
-
-
- {% data ui.helpfulness.category_other %}
-
-
-
{ 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')
+ }
}
diff --git a/javascripts/helpfulness.js b/javascripts/helpfulness.js
index f5bc95ee7209..2328194c029e 100644
--- a/javascripts/helpfulness.js
+++ b/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
- })
- }
}
diff --git a/tests/browser/browser.js b/tests/browser/browser.js
index 4952f1dd232c..f8f2dfc212d3 100644
--- a/tests/browser/browser.js
+++ b/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')