Instruction Selection

instruction-selection.js

// ==UserScript==
// @name         Instruction Selection
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Select each instruction
// @author       You
// @match        https://*.cloudacademy.com/*
// @match        https://*.app.qa.com/*
// @grant        none
// @require      https://code.jquery.com/jquery-3.6.0.min.js
// @require      https://gist.github.com/raw/2625891/waitForKeyElements.js
// @downloadURL  https://gist.githubusercontent.com/lrakai/3fc7535618f6b3b44ff86ceb6369228b/raw/instruction-selection.js
// @updateURL    https://gist.githubusercontent.com/lrakai/3fc7535618f6b3b44ff86ceb6369228b/raw/instruction-selection.js
// @run-at       document-start
// ==/UserScript==

(function() {
    'use strict';

    const breadcrumb_title_selector = "span[itemprop='name']";
    const page_title_selector = "#lab-page-title";
    const lab_step_heading_selector = "[type=lab] h3:not([class]";
    const new_instruction_regex = new RegExp("^[0-9]+\.");
    const toggle_group_class_name = "toggle_group";
    const instruction_class_name = "instruction";
    const veil_class_name = "veil";
    const hide_class_name = "hide";
    const show_class_name = "show";
    let ordered_list = false;

    var styles = `
        .show{
          display: block;
        }
        .hide {
          display: none;
        }
        .instruction {
        }
        .veil {
            color: black;
            background-color: palegreen;
        }
    `;
    var styleSheet = document.createElement("style");
    styleSheet.innerText = styles;
    document.head.appendChild(styleSheet);
    const document_style = document.styleSheets[document.styleSheets.length-1];

    waitForKeyElements(lab_step_heading_selector, select_instructions);

    function parse_instructions(instructions_heading) {
        let instructions = [];
        let instruction = [];
        let node = instructions_heading.nextElementSibling;
        if (node.tagName === "OL") {
            ordered_list = true;
            node = node.firstChild;
        }
        if (node.classList?.contains(toggle_group_class_name)) {
            return [];
        }
        while(node && node.tagName !== "H3") {
            if ((!ordered_list && new_instruction_regex.test(node.textContent)) || (ordered_list && node.tagName === "LI")) {
                if(instruction.length && (!ordered_list || instruction[0].tagName === "LI")) {
                    instructions.push(instruction);
                }
                instruction = [];
            }
            instruction.push(node);
            node = node.nextSibling;
        }
        if (instruction.length) {
            instructions.push(instruction);
        }
        return instructions;
    }

    function unveil(element, index) {
        element.classList.remove(show_class_name);
        element.classList.add(hide_class_name);
        element.instruction.classList.remove(hide_class_name);
        element.instruction.classList.add(show_class_name);
        element.next_veil?.classList.remove(hide_class_name);
        element.next_veil?.classList.add(show_class_name);
    }

    function show_all() {
        const rules = document_style.cssRules;
        rules[3].style.display = 'none';
        rules[0].style.display = '';
        rules[1].style.display = '';
        rules[2].style.display = 'block';
    }

    function process_instruction(instruction, index) {
        const instruction_toggle_group = document.createElement('div');
        const instruction_wrapper = document.createElement('div');
        const instruction_veil = document.createElement('div');

        instruction_toggle_group.className = toggle_group_class_name;
        instruction_toggle_group.id = `toggle_group{index}`;

        instruction_wrapper.className = instruction_class_name;
        index == 0 ? instruction_wrapper.classList.add(show_class_name) : instruction_wrapper.classList.add(hide_class_name);
        instruction_wrapper.id = `instruction${index}`;

        instruction_veil.className = veil_class_name;
        index == 1 ? instruction_veil.classList.add(show_class_name) : instruction_veil.classList.add(hide_class_name);
        instruction_veil.id = `instruction_veil${index}`;
        if (ordered_list) {
            instruction_veil.innerHTML = `<li>Click to reveal...</li>`;
        } else {
            instruction_veil.textContent = `${index+1}. Click to reveal...`;
        }
        instruction_veil.instruction = instruction_wrapper;
        instruction_veil.onclick = function () {
            unveil(this, index+1);
        };

        instruction[0].parentNode.insertBefore(instruction_wrapper, instruction[0]);
        for (let i = 0; i < instruction.length; i++) {
            instruction_wrapper.appendChild(instruction[i]);
        }
        instruction_wrapper.parentNode.insertBefore(instruction_toggle_group, instruction_wrapper);

        instruction_toggle_group.appendChild(instruction_wrapper);
        instruction_toggle_group.appendChild(instruction_veil);

        return instruction_veil;
    }

    function select_instructions() {
        const lab_step_headings = document.querySelectorAll(lab_step_heading_selector);
        const instructions_heading = [...lab_step_headings].filter(n => n.innerText.trim() === 'Instructions')
        if (instructions_heading.length != 1) {
            return;
        }
        const instructions = parse_instructions(instructions_heading[0]);
        if (instructions.length <= 1) {
            return;
        }
        instructions_heading[0].onclick = function () {
            show_all();
        }
        let previous_veil = undefined;
        for (let index = 0; index < instructions.length; index++) {
            let instruction_veil = process_instruction(instructions[index], index);
            if (previous_veil) {
                previous_veil.next_veil = instruction_veil;
            }
            previous_veil = instruction_veil;
        }
    }

})();