☰

Toggle for Practice-It

Toggles only the completed assignments on Practice-It

// ==UserScript==
// @name         Toggle for Practice-It
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Toggles only the completed assignments on Practice-It
// @author       Chi_BC#1828
// @match        https://practiceit.cs.washington.edu/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=tampermonkey.net
// @grant        none
// @license MIT
// ==/UserScript==

(function () {
  const html = `
<div class="ui_overlay">
    <label class="switch" for="result_toggle">
        <input type="checkbox" id="result_toggle" checked />
        <span class="slider" title="TOGGLE ME" ></span>
    </label>
</div>
`;
  const toggleStyles = `
a.problemlink {
    display: none;
}
li.solvedproblem a {
    display: block;
}
.ui_overlay {
    position: fixed;
    display: block;
    top: 4rem;
    right: 2rem;
}
.slider {
    color: green;
}
.switch input
{
  display: none;
}
.switch
{
  display: inline-block;
  position: relative;
  width: 60px;
  height: 30px;
}
.slider
{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: 999px;
  box-shadow: 0 0 0 2px #777, 0 0 4px #777;
  cursor: pointer;
  border: 4px solid transparent;
  overflow: hidden;
  transition: 0.2s;
}
.slider:before
{
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background-color: #777;
  border-radius: 999px;
  transform: translateX(-30px); /*translateX(-(w-h))*/
  transition: 0.2s;
}
input:checked + .slider:before
{
  transform: translateX(30px); /*translateX(w-h)*/
  background-color: limeGreen;
}
input:checked + .slider
{
  box-shadow: 0 0 0 2px limeGreen, 0 0 4px limeGreen;
}
`;
  const div = document.createElement("div");
  const injectStyle = document.createElement("style");
  div.innerHTML = html;
  injectStyle.textContent = toggleStyles;
  document.body.appendChild(div);
  document.head.appendChild(injectStyle);

  const toggleCheckBox = document.getElementById("result_toggle");
  toggleCheckBox.addEventListener("change", () => {
    if (toggleCheckBox.checked) {
      document.querySelector(".slider").style.color = "green";
      document.styleSheets[
        document.styleSheets.length - 1
      ].cssRules[0].style.display = "none";
      console.log("ONLY SHOW SOLVED PROBLEMS");
    } else {
      document.styleSheets[
        document.styleSheets.length - 1
      ].cssRules[0].style.display = "block";
      console.log("SHOW EVERYTHING");
      document.querySelector(".slider").style.color = "#305066";
    }
  });
})();