Experiment with moving Helpfulness Prompt to bottom of the page (github#16448)

heiskr · web-flow · commit 5bd61aa4b839 · 2020-11-17T14:10:03.000-08:00
* Experiment with moving Helpfulness Prompt to bottom of the page

* Update experiment.js

* Update experiment.js
diff --git a/includes/article.html b/includes/article.html
@@ -69,10 +69,11 @@ <h3 id="in-this-article" class="f5 mb-2"><a class="link-gray-dark" href="#in-thi
       {{ renderedPage }}
     </div>
     </div>
+
+    <div class="d-block d-xl-none border-top border-gray-light mt-4 markdown-body">
+      {% assign helpId = 'sm' %}
+      {% include helpfulness %}
+      {% include contribution %}
+    </div>
   </article>
-  <div class="d-block d-xl-none border-top border-gray-light mt-4 markdown-body">
-    {% assign helpId = 'sm' %}
-    {% include helpfulness %}
-    {% include contribution %}
-  </div>
 </main>
diff --git a/javascripts/experiment.js b/javascripts/experiment.js
@@ -40,27 +40,29 @@ export default function () {
   // const testName = '$test-name$'
   // const xbucket = bucket(testName)
   // if (xbucket === TREATMENT) { ... }
-  // x.addEventListener('click', evt => evt.preventDefault(); await sendSuccess(testName); evt())
+  // x.addEventListener('click', () => { sendSuccess(testName) })
 
-  const treatment = document.getElementById('quickstart-treatment')
-  if (!treatment) return
-
-  const testName = 'quickstart-hello'
+  const testName = 'helpfulness-prompt-to-bottom'
   const xbucket = bucket(testName)
 
   if (xbucket === TREATMENT) {
-    Array.from(
-      document.querySelectorAll('#article-contents > *')
-    ).forEach(el => { el.hidden = true })
-    treatment.hidden = false
+    const bigHelpfulness = document.querySelector('#helpfulness-xl')
+    const smallHelpfulness = document.querySelector('#helpfulness-sm')
+
+    // Check that helpfulness prompt is present on this page
+    if (!(bigHelpfulness && smallHelpfulness)) {
+      return
+    }
+
+    // Remove the -xl prompts
+    bigHelpfulness.parentElement.parentElement.removeChild(bigHelpfulness.parentElement)
+
+    // Always show the -sm prompt
+    smallHelpfulness.parentElement.classList.remove('d-xl-none')
   }
 
-  document.documentElement.addEventListener('copy', () => {
-    sendSuccess(testName)
+  const votes = Array.from(document.querySelectorAll('.js-helpfulness [type=radio]'))
+  votes.forEach(voteEl => {
+    voteEl.addEventListener('change', () => { sendSuccess(testName) })
   })
-
-  // Hide sidebar navigation during test
-  Array.from(
-    document.querySelectorAll('.article-grid-toc-content > h3, .article-grid-toc-content ul')
-  ).forEach(el => { el.hidden = true })
 }
