let styles = ` .groupedMCtable { border-collapse: collapse; --table-border-width: 1px; max-width: 80%; margin-bottom: 1.5rem; margin-left: 15px; margin-top: 1.5rem; } .groupedMCtable thead { position: sticky; inset-block-start: 0; background-color: #FFF; } .groupedMCtable td:first-child { text-align: left; padding: 0; padding-right: 2rem; } .groupedMCtable tr:nth-child(even){ background-color: #F6F6F6; } .groupedMCtable th:first-child { text-align: left; padding: 0; padding-right: 1rem; vertical-align: bottom; } th.rotate { white-space: nowrap; position: relative; } th.rotate > div { /* place div at bottom left of the th parent */ position: absolute; bottom: 0; left: 0; /* Make sure short labels still meet the corner of the parent otherwise you'll get a gap */ text-align: left; /* Move the top left corner of the span's bottom-border to line up with the top left corner of the td's border-right border so that the border corners are matched * Rotate 315 (-45) degrees about matched border corners */ transform: translate(calc(100% - var(--table-border-width) / 2), var(--table-border-width)) rotate(315deg); transform-origin: 0% calc(100% - var(--table-border-width)); width: 100%; } th.rotate > div > span { /* make sure the bottom of the span is matched up with the bottom of the parent div */ position: absolute; bottom: 0; left: 0; border-bottom: var(--table-border-width) solid gray; } .groupedMCtable td { border-right: var(--table-border-width) solid gray; /* make sure this is at least as wide as sqrt(2) * height of the tallest letter in your font or the headers will overlap each other*/ min-width: 32px; padding-top: 2px; padding-left: 5px; text-align: center; border-right: 1px solid #ccc; } .groupedMCtable .form-check-inline { margin-right: 0; } .scrollable { overflow: auto; max-height: 90vh; } .questionIntro { font-weight:normal; padding-bottom: 1rem; font-style: italic; } .hiddenCell { display: none; } .form-group { margin-bottom: 0.5rem; // border: 1px solid #EEE; border-radius: 10px; background-color: white; padding: 0px 0px 0.43rem 0px } #region-main { background-color: #E7F2D3; } #fgroup_id_buttonar, #fitem_id_anonymousmode { background-color: inherit; } #fgroup_id_buttonar .form-group { background-color: inherit; } .form-inline { padding-top: 0.43rem; } .progress { width: 50vw; } `; function shuffleArray(array) { let curId = array.length; // There remain elements to shuffle while (0 !== curId) { // Pick a remaining element let randId = Math.floor(Math.random() * curId); curId -= 1; // Swap it with the current element. let tmp = array[curId]; array[curId] = array[randId]; array[randId] = tmp; } return array; } let styleSheet = document.createElement("style"); styleSheet.innerText = styles; document.head.appendChild(styleSheet); let fragetexte = document.querySelectorAll(".word-break"); let refNode = undefined; let newNode = document.createElement("div"); let tablerowList = []; let rowHTML = ""; let thHeight = 0; let tableHead = ""; let factor = 1/Math.sqrt(2); fragetexte.forEach((f_text) => { if (f_text.innerHTML.trim().startsWith("{groupedMCfirst}")) { // console.log("match"); if (refNode !== undefined) { tablerowList.push(rowHTML); newNode.innerHTML = tableHead+""+tablerowList.reduce((p,n) => p+n, "")+""; newNode.classList.add("scrollable", "form-group", "ml-0"); newNode.querySelector("th").style.height = thHeight*factor+"px"; refNode.parentNode.insertBefore(newNode, refNode); refNode.remove(); refNode = undefined; newNode = document.createElement("div"); tablerowList = []; rowHTML = ""; thHeight = 0; } refNode = f_text.parentNode.parentNode; tableHead = ""; if (f_text.innerHTML.trim().replace("{groupedMCfirst}", "").startsWith("{intro:")) { tableHead = "
Fragen "+f_text.innerHTML.trim().replace("{groupedMCfirst}{intro:", "").split('}')[0]+" | ";
// tablerowList.push(rowHTML);
rowHTML ="|||||||||
---|---|---|---|---|---|---|---|---|---|
"+f_text.innerHTML.trim().split('}')[2]+refNode.querySelector("div.form-control-feedback").outerHTML+" | "; } else { tableHead = "
Fragen | "; // tablerowList.push(rowHTML); rowHTML = "||||
---|---|---|---|---|
"+f_text.innerHTML.trim().replace("{groupedMCfirst}", "")+refNode.querySelector("div.form-control-feedback").outerHTML+" | "; } if (refNode.querySelector("fieldset input").type == "hidden") { rowHTML += ""+refNode.querySelector("fieldset input").outerHTML+" | "; tableHead += ""; } refNode.querySelector("fieldset").querySelector("div").childNodes.forEach((cNode) => { if (cNode.classList !== undefined) { if (cNode.classList.contains("form-check-inline")) { let cloneNode = cNode.cloneNode(); cloneNode.innerHTML = [...cNode.querySelectorAll("input")].map(x => x.outerHTML).reduce((p,n) => p+n); // checkboxes have an additional hidden input field cNode.querySelector("input").remove(); thHeight = cNode.clientWidth>thHeight ? cNode.clientWidth : thHeight; tableHead += " | "+cNode.innerText+" | ";
rowHTML += ""+cloneNode.outerHTML; } else if (cNode.classList.contains("form-control-feedback")) { rowHTML += cNode.outerHTML+" | "; } } }) // tableHead += "
"+f_text.innerHTML.trim().replace("{groupedMC}", "")+refNode2.querySelector("div.form-control-feedback").outerHTML+" | "; if (refNode2.querySelector("fieldset input").type == "hidden") { rowHTML += ""+refNode2.querySelector("fieldset input").outerHTML+" | "; } refNode2.querySelector("fieldset").querySelector("div").childNodes.forEach((cNode) => { if (cNode.classList !== undefined) { if (cNode.classList.contains("form-check-inline")) { let cloneNode = cNode.cloneNode(); cloneNode.innerHTML = [...cNode.querySelectorAll("input")].map(x => x.outerHTML).reduce((p,n) => p+n); cNode.querySelector("input").remove(); rowHTML += ""+cloneNode.outerHTML; } else if (cNode.classList.contains("form-control-feedback")) { rowHTML += cNode.outerHTML+" | "; } } }) refNode2.remove(); } else { let refNode3 = f_text.parentNode.parentNode; // console.log(refNode3.childNodes); refNode3.querySelector(".col-md-3").classList.add("col-md-6"); refNode3.querySelector(".col-md-3").classList.remove("col-md-3"); refNode3.querySelector(".col-md-9").classList.add("col-md-6"); refNode3.querySelector(".col-md-9").classList.remove("col-md-9"); } }) if (rowHTML !== '') tablerowList.push(rowHTML); if (tablerowList.length > 0) { newNode.innerHTML = tableHead+"