g6
This commit is contained in:
Turtle committed
1 parent
565c1b9911
commit
28490ce8b3
36 files changed
+587
-179
No files matched your search
@@ -0,0 +1,347 @@
|
||||
<!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();
|
||||
setUserData(couchDB);
|
||||
</script>
|
||||
<title>Kurs Anzeige</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="header_bar_1">
|
||||
<button class="back" onclick="location.href = './uebersicht.html?user=' + userData.name;">
|
||||
Ü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"></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}">
|
||||
<div class="overlayTitle">
|
||||
${question.title}:
|
||||
</div>
|
||||
<div id="${answerContainerId}"></div>
|
||||
</overlay>
|
||||
</button>
|
||||
`;
|
||||
questionList.appendChild(card);
|
||||
index++;
|
||||
}
|
||||
|
||||
}
|
||||
async function questionOverlay(overlayId, index) {
|
||||
|
||||
const awnserList = document.getElementById(`answerContainer${index}`)
|
||||
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}% 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}% 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;
|
||||
}
|
||||
|
||||
showOverlay(overlayId);
|
||||
}
|
||||
</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>
|
||||
Reference in new issue
Block a user