function addCollapse(node) {
    let arrow = document.createElement("div");
    arrow.className = "collapseArrow";
    arrow.textContent = (node.getAttribute("collapsed") === "false") ? "▲" : "▼";
    insertAsFirstChild(node, arrow);

    arrow.onclick = collapse;

}

function collapse(event) {

    let sect = queryAncestorSelector(event.target, ".cuestionario");
    //  let pregunta = node.querySelector(".pregunta");
    let collapseArrow = sect.querySelector(".collapseArrow");
    //let sect = node.parentNode;
    let toCollapse = (sect.getAttribute('collapsed') === "false") ? "true" : "false";

    cuestionario = sect.querySelector("encabezado-cuestionario").tema;
    event.preventDefault();

    const url = `${base}/${cuestionario}`;
    const payload = {
        tema: cuestionario,
        collapsed: toCollapse,

    };
    const request = {
        method: 'PUT',
        headers: cabeceras,
        body: JSON.stringify(payload),
    };
    fetch(url, request)
        .then(response => response.json())
        .then(r => {
            if (r.error == null) {

                collapseArrow.textContent = (toCollapse === "true") ? "▼" : "▲";
                sect.setAttribute("collapsed", toCollapse);
                print(r);


            } else
                print(r);
        })
        .catch(error => printError(error));
}

function addStar(node) {
    let star = document.createElement("div");
    star.className = "star";
    star.textContent = "★";
    insertAsFirstChild(node, star);

    star.onclick = highlight;

}

function highlight(event) {
    let node = queryAncestorSelector(event.target, '.bloque');
    let sect = node.parentNode;
    console.log(node.getAttribute('highlight'));
    let toHighlight = (node.getAttribute('highlight') === 'false') ? 'true' : 'false';
    let pregunta = node.querySelector('.pregunta');
    cuestionario = sect.querySelector("encabezado-cuestionario").tema;
    event.preventDefault();

    let url = `${base}/${cuestionario}/${pregunta.textContent}`;
    const payload = {
        highlight: toHighlight,

    };
    const request = {
        method: 'PUT',
        headers: cabeceras,
        body: JSON.stringify(payload),
    };
    console.log(url);
    fetch(url, request)
        .then(response => response.json())
        .then(r => {
            if (r.error == null) {

                node.setAttribute("highlight", toHighlight);
                if (toHighlight === 'true') {
                    if(node!== sect.querySelector('.bloque'))
                    insertBeforeChild(sect, sect.querySelector('.bloque'), node)
                }
                print(r);


            } else
                print(r);
        })
        .catch(error => printError(error));


}