376 lines
8.7 KiB
HTML
376 lines
8.7 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=0.5">
|
|
<link rel="stylesheet" href="../lib/basic.css">
|
|
<script src="../auth.js"></script>
|
|
<script src="../lib/basic.js"></script>
|
|
<script src="../other/skills.js"></script>
|
|
<script src="../other/skilltree.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/qrcodejs/qrcode.min.js"></script>
|
|
<script>
|
|
const couchDB = new CouchDB();
|
|
async function start() {
|
|
await setUserData(couchDB);
|
|
}
|
|
start();
|
|
</script>
|
|
<title>Kurs Anzeige</title>
|
|
</head>
|
|
<body>
|
|
<div class="header_bar_1">
|
|
<button class="back" onclick="location.href = './uebersicht.html';">
|
|
Übersicht
|
|
</button>
|
|
<div>
|
|
<!-- <button class="profile" onclick='showOverlay("miniProfile")' style="position: absolute; top: 7px; right: 15px;">
|
|
<overlay class="my_overlay" id="miniProfile">
|
|
</overlay>
|
|
</button> -->
|
|
<button class="profile" style="position: absolute; top: 7px; right: 15px;"></button>
|
|
</div>
|
|
</div>
|
|
<div class="contentLayout">
|
|
<div class="qrColumn">
|
|
<div id="qrCode"></div>
|
|
<span id="accesCode"></span>
|
|
</div>
|
|
|
|
<div class="questionColumn">
|
|
<div id="questionCards" style="display: flex; flex-direction: column; gap: 15px"></div>
|
|
</div>
|
|
</div>
|
|
<button class="live" id="liveButton" onclick="AnsichtZeigen()">
|
|
Live Ansicht
|
|
</button>
|
|
</body>
|
|
|
|
|
|
<script>
|
|
const params = getURLArgsMap();
|
|
const courseId = params["course"];
|
|
|
|
if (!courseId) {
|
|
console.error("Keine courseId in der URL");
|
|
}
|
|
|
|
const qrCodeUrl = `${window.location.origin}/student/umfrage.html?course=${courseId}`;
|
|
|
|
new QRCode(document.getElementById("qrCode"), {
|
|
text: qrCodeUrl,
|
|
width: 500,
|
|
height: 500,
|
|
})
|
|
|
|
const accesCodeElem = document.getElementById("accesCode");
|
|
accesCodeElem.innerText = "Code: " + courseId;
|
|
|
|
async function AnsichtZeigen() {
|
|
const liveButton = document.getElementById("liveButton")
|
|
liveButton.style.display = "none";
|
|
|
|
const questionList = document.getElementById("questionCards");
|
|
|
|
const courseInfo = await couchDB.get("course:" + courseId);
|
|
let index = 0;
|
|
for(const question of courseInfo.questions) {
|
|
const overlayId = `qOver${index}`;
|
|
const answerContainerId = `answerContainer${index}`;
|
|
|
|
|
|
const card = document.createElement("div");
|
|
card.className = "questionCard";
|
|
|
|
card.innerHTML = `
|
|
<div class="questionTitle">${question.title}</div>
|
|
|
|
<button class="questionResults" onclick='questionOverlay("${overlayId}", ${index})'>
|
|
Auswertung
|
|
<overlay class="my_overlay" id="${overlayId}" onclose="closeQuestion()">
|
|
<div class="overlayTitle">
|
|
${question.title}:
|
|
</div>
|
|
<div id="${answerContainerId}" class="${answerContainerId}"></div>
|
|
</overlay>
|
|
</button>
|
|
`;
|
|
questionList.appendChild(card);
|
|
index++;
|
|
}
|
|
|
|
}
|
|
|
|
var overlayInterval = null;
|
|
var activeOverlayIndex = null;
|
|
|
|
async function questionOverlay(overlayId, index) {
|
|
clearInterval(overlayInterval);
|
|
overlayInterval = null;
|
|
|
|
activeOverlayIndex = index;
|
|
|
|
showOverlay(overlayId);
|
|
await new Promise(r => setTimeout(r, 0));
|
|
await updateOverlay(index);
|
|
|
|
overlayInterval = setInterval(async() => {
|
|
await updateOverlay(activeOverlayIndex);
|
|
}, 3000);
|
|
}
|
|
|
|
function closeQuestion() {
|
|
clearInterval(overlayInterval);
|
|
overlayInterval = null;
|
|
}
|
|
|
|
|
|
async function updateOverlay(index) {
|
|
const overlayId = getOverlay(`qOver${index}`);
|
|
if(!overlayId) {return;}
|
|
const awnserList = overlayId.querySelector(`.answerContainer${index}`);
|
|
if(!awnserList) {return;}
|
|
|
|
const courseInfo = await couchDB.get("course:" + courseId)
|
|
awnserList.innerHTML = "";
|
|
|
|
switch(courseInfo.questions[index].type) {
|
|
case "text":
|
|
let j = 0;
|
|
for(awnser of courseInfo.result) {
|
|
const resultDisplay = document.createElement("div");
|
|
resultDisplay.className = "overlayTextRes"
|
|
resultDisplay.innerHTML = `<div>Antwort ${j + 1}: ${awnser[index]} </div>`
|
|
awnserList.appendChild(resultDisplay)
|
|
j++;
|
|
}
|
|
break;
|
|
|
|
case "scala":
|
|
var score = 0;
|
|
for (let j = 0; j < courseInfo.result.length; j++) {
|
|
score += courseInfo.result[j][index];
|
|
}
|
|
var percent;
|
|
if (courseInfo.result.length > 0) {
|
|
score = score / courseInfo.result.length;
|
|
percent = (score/5)*100;
|
|
} else {
|
|
score = 0;
|
|
percent = 0;
|
|
}
|
|
|
|
console.log(courseInfo.result.length);
|
|
|
|
const resultDisplay = document.createElement("div");
|
|
resultDisplay.className = "overlayScalaRes"
|
|
resultDisplay.innerHTML = `
|
|
<div class="overlayTextRes"> ${percent.toFixed(2)}% positive </div>
|
|
<div class="scoreBar">
|
|
<div class="scoreFill" id="scoreFill${index}" style="width: ${(score/5)*100}%"></div>
|
|
</div>`;
|
|
|
|
awnserList.appendChild(resultDisplay);
|
|
|
|
const scoreFill = document.getElementById(`scoreFill${index}`)
|
|
if(percent < 30) {
|
|
scoreFill.style.backgroundColor = "red";
|
|
} else if(percent < 70) {
|
|
scoreFill.style.backgroundColor = "orange";
|
|
} else {
|
|
scoreFill.style.backgroundColor = "green";
|
|
}
|
|
break;
|
|
|
|
case "emoji":
|
|
let scoreE = 0;
|
|
for(let j = 0; j < courseInfo.result.length; j++) {scoreE += courseInfo.result[j][index]};
|
|
scoreE = scoreE / courseInfo.result.length;
|
|
const percentE = (scoreE/5)*100;
|
|
|
|
const resultDisplayE = document.createElement("div");
|
|
resultDisplayE.className = "overlayScalaRes"
|
|
resultDisplayE.innerHTML = `
|
|
<div class="overlayTextRes"> ${percentE.toFixed(2)}% positive </div>
|
|
<div class="scoreBar">
|
|
<div class="scoreFill" id="scoreFill${index}" style="width: ${(scoreE/5)*100}%"></div>
|
|
</div>`;
|
|
|
|
|
|
awnserList.appendChild(resultDisplayE);
|
|
|
|
const scoreFillE = document.getElementById(`scoreFill${index}`)
|
|
if(percentE < 30) {
|
|
scoreFillE.style.backgroundColor = "red";
|
|
} else if(percentE < 70) {
|
|
scoreFillE.style.backgroundColor = "orange";
|
|
} else {
|
|
scoreFillE.style.backgroundColor = "green";
|
|
}
|
|
|
|
break;
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.scoreBar {
|
|
width: 90vh;
|
|
height: 30px;
|
|
background-color: antiquewhite;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.scoreFill {
|
|
height: 100%;
|
|
width: 0%;
|
|
background-color: #008000;
|
|
transition: width 0.5s ease;
|
|
}
|
|
|
|
.my_overlay {
|
|
width: 100vh;
|
|
min-height: 30vh;
|
|
}
|
|
|
|
.overlayTitle {
|
|
font-weight: bold;
|
|
background: var(--accent_color_bg);
|
|
/*border-radius: calc(var(--border-radius) + 20px);*/
|
|
border-radius: var(--border-radius) var(--border-radius) 0 0;
|
|
}
|
|
|
|
.overlayTitle {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 10px;
|
|
max-width: 90vh;
|
|
}
|
|
|
|
.overlayTextRes {
|
|
padding: 10px;
|
|
font-display: flex;
|
|
flex-direction: column;
|
|
min-width: 0;
|
|
background: var(--accent_color_bg_o);
|
|
/*border-radius: calc(var(--border-radius) + 20px);*/
|
|
max-width: 90vh;
|
|
}
|
|
#answerContainer0 .overlayTextRes:last-child {
|
|
border-radius: 0 0 var(--border-radius) var(--border-radius);
|
|
}
|
|
#answerContainer1 .overlayScalaRes:last-child > .overlayTextRes {
|
|
border-radius: 0 0 var(--border-radius) var(--border-radius);
|
|
}
|
|
|
|
.contentLayout {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: flex-start;
|
|
gap: 80px;
|
|
margin-top: 15vh;
|
|
padding: 0 5vw;
|
|
}
|
|
|
|
.questionCard {
|
|
position: relative;
|
|
width: 400px;
|
|
min-height: 100px;
|
|
padding: 16px;
|
|
background: var(--accent_color_bg_o);
|
|
border-radius: 12px;
|
|
box-shadow: var(--def-shadow);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
|
|
.questionTitle {
|
|
margin: 0;
|
|
padding: 10px;
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.questionResults {
|
|
margin: 0;
|
|
font-size: 20px;
|
|
padding: 10px;
|
|
}
|
|
|
|
.questionColumn {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
max-width: 320;
|
|
}
|
|
|
|
button.back {
|
|
font-size: 20px;
|
|
padding: 15px;
|
|
padding-left: 40px;
|
|
padding-right: 40px;
|
|
background-color: var(--accent_color_bg);
|
|
border: none;
|
|
border-radius: var(--border-radius);
|
|
cursor: pointer;
|
|
}
|
|
|
|
button.back:focus-visible {
|
|
outline: 2px var(--accent_color_fg_o);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
button.back:hover {
|
|
background: var(--accent_color_bg_o);
|
|
border-radius: var(--border-radius);
|
|
}
|
|
.qrColumn {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
margin-top: 1vh;
|
|
}
|
|
|
|
#accesCode {
|
|
font-size: 30px;
|
|
font-weight: bold;
|
|
padding: 10px;
|
|
border-radius: var(--border-radius);
|
|
background: var(--accent_color_bg_o);
|
|
box-shadow: var(--def-shadow);
|
|
}
|
|
|
|
#qrCode img,
|
|
#qrCode canvas {
|
|
padding: 14px;
|
|
border: 4px solid var(--accent_color_fg_o);
|
|
border-radius: var(--border-radius);
|
|
background: var(--accent_color_bg_o);
|
|
box-sizing: border-box;
|
|
box-shadow: var(--def-shadow);
|
|
}
|
|
|
|
button.live {
|
|
position: absolute;
|
|
padding: 15px;
|
|
bottom: 8vh;
|
|
right: 8vh;
|
|
font-size: 40px;
|
|
border: none;
|
|
border-radius: var(--border-radius);
|
|
cursor: pointer;
|
|
background-color: var(--accent_color_bg);
|
|
box-shadow: var(--def-shadow);
|
|
}
|
|
|
|
button.live:hover {
|
|
background: var(--accent_color_bg_o);
|
|
}
|
|
|
|
</style>
|
|
|
|
|
|
</html> |