msos/guide-feedback.js

/*
 * Student Welcome Guide - "Was this page helpful?" feedback.
 * On a vote the chosen button is highlighted and locked, a thank-you appears,
 * and (on "No") a short comment box is offered. Voting is locked for the current
 * page view, so to give feedback again the visitor reloads the page.
 *
 * Votes are sent to a Google Form (see setup notes at the bottom). If the form
 * is not configured, the widget still works locally and "No" still routes the
 * visitor to email / the Viber community.
 */
(function () {
  'use strict';

  /* Google Form collection. Fill in all four values to turn it on. */
  var GOOGLE_FORM = {
    action: 'https://docs.google.com/forms/d/e/1FAIpQLSc4i6fdIpR3D8nuEJ_yvxlHUBRRO-8Z-vP4WF-qtk17uzkYog/formResponse',
    pageField: 'entry.1926483387',     // Question 1 (Page)
    helpfulField: 'entry.971202016',   // Question 2 (Helpful)
    commentField: ''                   // Question 3 (Comment) - paste entry.NNNN once the form has a comment question
  };

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

  function postToForm(fields) {
    if (!GOOGLE_FORM.action) { return; }
    try {
      var body = new URLSearchParams();
      for (var key in fields) {
        if (fields.hasOwnProperty(key) && key) { body.append(key, fields[key]); }
      }
      // no-cors: Google Forms returns no CORS headers, so the response cannot be
      // read, but the submission is recorded.
      fetch(GOOGLE_FORM.action, { method: 'POST', mode: 'no-cors', body: body });
    } catch (e) {}
  }

  function sendVote(slug, value) {
    var label = pageLabel(slug);
    var fields = {};
    fields[GOOGLE_FORM.pageField] = label;
    fields[GOOGLE_FORM.helpfulField] = value;
    postToForm(fields);
    if (typeof window.plausible === 'function') {
      try { window.plausible('Guide feedback', { props: { page: label, value: value } }); } catch (e) {}
    }
  }

  function sendComment(slug, text) {
    var label = pageLabel(slug);
    var fields = {};
    fields[GOOGLE_FORM.pageField] = label;
    // helpful field is left out so comment rows do not inflate the Yes/No counts.
    if (GOOGLE_FORM.commentField) { fields[GOOGLE_FORM.commentField] = text; }
    postToForm(fields);
    if (typeof window.plausible === 'function') {
      try { window.plausible('Guide feedback comment', { props: { page: label } }); } catch (e) {}
    }
  }

  function setup(fb) {
    if (fb.getAttribute('data-ready')) { return; }
    fb.setAttribute('data-ready', '1');

    var slug = fb.getAttribute('data-slug') || location.pathname;
    var buttons = fb.querySelectorAll('[data-vote]');
    var yesMsg = fb.querySelector('.guide-feedback-yes');
    var noMsg = fb.querySelector('.guide-feedback-no');
    var comment = fb.querySelector('.guide-feedback-comment');
    var commentInput = fb.querySelector('.guide-feedback-comment-input');
    var commentSend = fb.querySelector('.guide-feedback-comment-send');
    var commentThanks = fb.querySelector('.guide-feedback-comment-thanks');
    var voted = false;

    function onVote() {
      /* jshint validthis:true */
      if (voted) { return; }
      voted = true;
      var value = this.getAttribute('data-vote');
      for (var i = 0; i < buttons.length; i++) { buttons[i].disabled = true; }
      this.classList.add('is-selected');
      sendVote(slug, value);
      if (value === 'yes') {
        if (yesMsg) { yesMsg.hidden = false; }
      } else {
        if (noMsg) { noMsg.hidden = false; }
        if (comment) { comment.hidden = false; }
      }
    }

    for (var i = 0; i < buttons.length; i++) {
      buttons[i].addEventListener('click', onVote);
    }

    if (commentSend) {
      commentSend.addEventListener('click', function () {
        var text = commentInput ? commentInput.value.replace(/^\s+|\s+$/g, '') : '';
        if (!text) { if (commentInput) { commentInput.focus(); } return; }
        sendComment(slug, text);
        commentSend.disabled = true;
        if (commentInput) { commentInput.disabled = true; }
        if (commentThanks) { commentThanks.hidden = false; }
      });
    }
  }

  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();
  }
})();

/*
 * ---------------------------------------------------------------------------
 * Google Form collection
 * ---------------------------------------------------------------------------
 * The form currently has two questions wired: Page and Helpful.
 * To capture the "what was missing" comments, add a THIRD question to the same
 * Google Form:
 *   - Type: Paragraph
 *   - Title: Comment
 * Then open the three-dot menu > "Get pre-filled link", type any text in all
 * three boxes, get the link, and read off the new entry.NNNN for the Comment
 * box. Paste it into GOOGLE_FORM.commentField above.
 *
 * The "Page" value sent is the slug plus language, e.g.
 * "student-residence-permit (mk)". Comment submissions omit the Helpful answer
 * so they do not affect the Yes/No counts; filter the sheet by a non-empty
 * Comment column to read them.
 */