diff --git a/kuma/wiki/templates/wiki/document.html b/kuma/wiki/templates/wiki/document.html index 559889c3b38..3a7e2b7e899 100644 --- a/kuma/wiki/templates/wiki/document.html +++ b/kuma/wiki/templates/wiki/document.html @@ -416,4 +416,7 @@

{{ _('Document Tags and Contributors') }}

{# This can be removed once the social network button multivariate test is completed. #} mdn.optimizely.push(['activate', 2796520257]); + {% if waffle.flag('share_links') or waffle.flag('helpfulness') %} + {{ js('document') }} + {% endif %} {% endblock %} diff --git a/media/js/components.js b/media/js/components.js index 5045b0be9fa..149329ea0f8 100644 --- a/media/js/components.js +++ b/media/js/components.js @@ -429,6 +429,7 @@ { state: 'success', className: 'success', iconName: 'icon-smile' }, { state: 'error', className: 'error', iconName: 'icon-frown' }, { state: 'warning', className: 'warning', iconName: 'icon-warning-sign' }, + { state: 'question', className: 'question', iconName: 'icon-question-sign' }, defaultState ]; var statesObj = {}; diff --git a/media/js/helpfulness.js b/media/js/helpfulness.js new file mode 100644 index 00000000000..b1e3addf5f3 --- /dev/null +++ b/media/js/helpfulness.js @@ -0,0 +1,91 @@ +(function(win, doc, $) { + + // this feature requires localStorage + if (('localStorage' in win)) { + var ignore = localStorage.getItem('helpful-ignore') === 'true'; // true if ever clicked ignore + var asked_recently = parseInt(localStorage.getItem(doc.location + '#answered-helpful'), 10) > Date.now(); + if (!ignore && !asked_recently) { + // ask about helpfulness after 1 min + setTimeout(inquire, 60000); + } + } + + // create a notification + function inquire() { + // dimension7 is "helpfulness" + if(win.ga) ga('set', 'dimension7', 'Yes'); + + // ask a simple question + var ask = gettext('Did this page help you?') + + '
' + + gettext('Yes') + + '' + + gettext('No') + + '' + + gettext('Never ask me again') + + ''; + var notification = mdn.Notifier.growl(ask, {closable: true, duration: 0}).question(); + + // answers to the simple question include... + $('#helpful-yes').on('click', function(e) { + e.preventDefault(); + confirm('Thanks for your feedback!', 'success', 'Yes'); + }); + $('#helpful-no').on('click', function(e) { + e.preventDefault(); + confirm('', 'error', 'No'); + }); + $('#helpful-ignore').on('click', function(e) { + e.preventDefault(); + localStorage.setItem('helpful-ignore', 'true'); + confirm("We won't bug you again.", 'info', 'Ignore'); + }); + + // create a dropdown in case the page is unhelpful + var unhelpful_options = [ + {val: 'Translate', text: gettext('Translate it into my language')}, + {val: 'Make-Simpler', text: gettext('Make explanations clearer')}, + {val: 'Needs-More-Info', text: gettext('Add more details')}, + {val: 'Needs-Correction', text: gettext('Fix incorrect information')}, + {val: 'Other', text: gettext('Something else')} + ] + var $select = $('