msos/guide-feedback.js

/*
 * Student Welcome Guide - "Was this page helpful?" feedback.
 * Records the vote in localStorage so a visitor is not asked twice, and reveals
 * a thank-you. On "No" the message invites the visitor to email MSOS or ask in
 * the Viber community, which is where actionable feedback actually reaches us.
 *
 * Note: this stores the vote only in the visitor's own browser. To collect
 * aggregated Yes/No counts centrally, point the `sendVote` hook below at a form
 * endpoint (for example Formspree or a Google Form) or a privacy-friendly
 * analytics event.
 */
(function () {
  'use strict';

  /*
   * Central collection via a Google Form.
   * To turn it on, create a Google Form with two "short answer" questions
   * (one for the page, one for the answer), then fill in the three values
   * below. See the setup notes at the bottom of this file. Until they are
   * filled in, votes are simply not sent anywhere central.
   */
  var GOOGLE_FORM = {
    action: '',        // e.g. 'https://docs.google.com/forms/d/e/1FAIpQL.../formResponse'
    pageField: '',     // e.g. 'entry.123456789'  (the "Page" question)
    helpfulField: ''   // e.g. 'entry.987654321'  (the "Helpful?" question)
  };

  function sendVote(slug, value) {
    var lang = (document.documentElement.getAttribute('lang') || '').toLowerCase();
    var pageLabel = lang ? slug + ' (' + lang + ')' : slug;

    if (GOOGLE_FORM.action && GOOGLE_FORM.pageField && GOOGLE_FORM.helpfulField) {
      try {
        var body = new URLSearchParams();
        body.append(GOOGLE_FORM.pageField, pageLabel);
        body.append(GOOGLE_FORM.helpfulField, value);
        // no-cors: Google Forms does not return CORS headers, so we cannot read
        // the response, but the submission is recorded.
        fetch(GOOGLE_FORM.action, { method: 'POST', mode: 'no-cors', body: body });
      } catch (e) {}
    }

    // Also fires a Plausible analytics event if Plausible happens to be present.
    if (typeof window.plausible === 'function') {
      try { window.plausible('Guide feedback', { props: { page: pageLabel, value: value } }); } catch (e) {}
    }
  }

  function setup(fb) {
    var slug = fb.getAttribute('data-slug') || location.pathname;
    var key = 'msos-guide-feedback:' + slug;
    var buttons = fb.querySelector('.guide-feedback-buttons');
    var yesMsg = fb.querySelector('.guide-feedback-yes');
    var noMsg = fb.querySelector('.guide-feedback-no');

    function reveal(value) {
      if (buttons) { buttons.hidden = true; }
      if (value === 'yes' && yesMsg) { yesMsg.hidden = false; }
      if (value === 'no' && noMsg) { noMsg.hidden = false; }
    }

    var prior = null;
    try { prior = localStorage.getItem(key); } catch (e) {}
    if (prior === 'yes' || prior === 'no') { reveal(prior); return; }

    var btns = fb.querySelectorAll('[data-vote]');
    for (var i = 0; i < btns.length; i++) {
      btns[i].addEventListener('click', function () {
        var value = this.getAttribute('data-vote');
        try { localStorage.setItem(key, value); } catch (e) {}
        sendVote(slug, value);
        reveal(value);
      });
    }
  }

  function init() {
    var widgets = document.querySelectorAll('.guide-feedback');
    for (var i = 0; i < widgets.length; i++) { setup(widgets[i]); }
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }
})();

/*
 * ---------------------------------------------------------------------------
 * How to turn on Google Form collection
 * ---------------------------------------------------------------------------
 * 1. Go to forms.google.com and create a new blank form (e.g. "Guide feedback").
 * 2. Add two questions, both of type "Short answer":
 *      - Question 1 title: Page
 *      - Question 2 title: Helpful
 *    (Titles do not matter to the code, only the field IDs below.)
 * 3. Click the three-dot menu (top right) > "Get pre-filled link".
 *    Type any text in both boxes (e.g. "x" and "yes"), click "Get link",
 *    then "Copy link". Paste it somewhere; it looks like:
 *      https://docs.google.com/forms/d/e/1FAIpQL.../viewform?usp=pp_url&entry.111111=x&entry.222222=yes
 * 4. From that link read off:
 *      - GOOGLE_FORM.action     = the URL up to and including "/formResponse"
 *                                 (replace the "/viewform..." part with "/formResponse")
 *      - GOOGLE_FORM.pageField  = the entry.NNNN before "=x"   (the Page box)
 *      - GOOGLE_FORM.helpfulField = the entry.NNNN before "=yes" (the Helpful box)
 * 5. Paste those three values into the GOOGLE_FORM object near the top of this
 *    file and commit. Responses appear in the form's "Responses" tab and, if you
 *    click the Sheets icon there, in a live Google Sheet with charts.
 *
 * The "Page" value sent is the page slug plus language, e.g.
 * "student-residence-permit (mk)", so you can see which page and language.
 */