Hiding the Anonymous Discussion Options in the Discussion Re-Design

JamesSekcienski
Community Coach
Community Coach
‎05-28-2024 02:44 PM
2
624

With the enforcement of the Discussion Re-design coming this summer, we have already transitioned to using it to avoid disruptions mid-semester.  We are looking forward to the checkpoints feature that will be coming soon and some of the other new features like being able to view edit history. 

However, we are not ready to support the anonymous discussion feature that is now included since it also hides the identity of the student from the teacher(s) and admins.  We will re-evaluate this in the future as this evolves, but for now we are restricting the ease of access to this feature.  Since we saw other community members express similar concerns about this feature, we wanted to share the code we are currently using to hide and remove the anonymous discussion options from the UI.

The following CSS is used to hide the heading and options from view*:

 

 

span[class$="gridCol"]
  fieldset[class$="formFieldLayout"]:has(
    span[class$="formFieldGroup"] input[name="anonymous"]
  ) {
  display: none;
}

 

 

 

The following JavaScript is used to remove the anonymous discussion options and header*:

 

 

"use strict";

(() => {
  if (
    /\/courses\/[0-9]+\/discussion_topics\/[0-9]+\/edit/.test(
      window.location.pathname
    ) ||
    /\/courses\/[0-9]+\/discussion_topics\/new/.test(window.location.pathname)
  ) {
    removeAnonymousOptions();
  }

  function watchForAddedElement(
    cssSelector,
    handlerFunction,
    elementToObserve = document.body,
    options = { childList: true, subtree: true },
    shouldContinueObservingWhenFound = false
  ) {
    const element = elementToObserve?.querySelector(cssSelector);
    if (element) {
      handlerFunction(element);
      if (!shouldContinueObservingWhenFound) {
        return;
      }
    }

    const observer = new MutationObserver((mutations) => {
      if (
        !mutations.some((mutation) => mutation?.addedNodes?.length ?? 0 > 0)
      ) {
        return;
      }

      const foundElement = elementToObserve?.querySelector(cssSelector);
      if (foundElement) {
        handlerFunction(foundElement);
        if (!shouldContinueObservingWhenFound) {
          observer.disconnect();
        }
      }
    });

    observer.observe(elementToObserve, options);
  }

  function removeElement(element) {
    element?.remove();
  }

  function removeAnonymousOptions() {
    const cssSelector = `
    span[class$="gridCol"]
      fieldset[class$="formFieldLayout"]:has(
        span[class$="formFieldGroup"] input[name="anonymous"]
      )
    `;
    watchForAddedElement(cssSelector, removeElement);
  }
})();

 

 

 

If you have any feedback about the code, please let me know 😀 Thank you @robotcars for your initial feedback!

*Please note that this code is provided as is and without warranty of any kind.  It may stop working in the future and may require updates as new updates are released to the Canvas UI.  Always evaluate code and test it for yourself before deploying it in your production environment.

Change Log

  • 2024-09-03
    • Updated code to handle the new HTML and CSS used after a recent Canvas update.  Previous HTML elements, ids, and classes are no longer available.
2 Comments