| <style> |
| .feedback--answer { |
| display: inline-block; |
| } |
| .feedback--answer-no { |
| margin-left: 1em; |
| } |
| .feedback--response { |
| display: none; |
| margin-top: 1em; |
| } |
| .feedback--response__visible { |
| display: block; |
| } |
| </style> |
| <h2 class="feedback--title">{{ i18n "feedback" }}</h2> |
| <p class="feedback--question">{{ i18n "helpful" }}</p> |
| <button class="feedback--answer feedback--answer-yes">{{ i18n "yes" }}</button> |
| <button class="feedback--answer feedback--answer-no">{{ i18n "no" }}</button> |
| <p class="feedback--response feedback--response-yes"> |
| {{ i18n "yes_response" | safeHTML }} |
| </p> |
| <p class="feedback--response feedback--response-no"> |
| {{ i18n "no_response" | safeHTML }} |
| </p> |
| <script> |
| const yesButton = document.querySelector('.feedback--answer-yes'); |
| const noButton = document.querySelector('.feedback--answer-no'); |
| const yesResponse = document.querySelector('.feedback--response-yes'); |
| const noResponse = document.querySelector('.feedback--response-no'); |
| const disableButtons = () => { |
| yesButton.disabled = true; |
| noButton.disabled = true; |
| }; |
| const sendFeedback = (value) => { |
| if (typeof ga !== 'function') return; |
| const args = { |
| command: 'send', |
| hitType: 'event', |
| category: 'Helpful', |
| action: 'click', |
| label: window.location.pathname, |
| value: value |
| }; |
| ga(args.command, args.hitType, args.category, args.action, args.label, args.value); |
| }; |
| yesButton.addEventListener('click', () => { |
| yesResponse.classList.add('feedback--response__visible'); |
| disableButtons(); |
| sendFeedback(1); |
| }); |
| noButton.addEventListener('click', () => { |
| noResponse.classList.add('feedback--response__visible'); |
| disableButtons(); |
| sendFeedback(0); |
| }); |
| </script> |