148 lines
4.9 KiB
Text
148 lines
4.9 KiB
Text
<% if !htmx {%>
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>zettoIT ARS</title>
|
|
<meta charset="UTF-8">
|
|
<link rel="stylesheet" href="/static/charts.min.css">
|
|
<link rel="stylesheet" href="/static/pico.min.css">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
</head>
|
|
<body>
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
<main class="container" hx-sse="connect:/<%= id %>/view/events swap:message">
|
|
<% } %>
|
|
<h1>zettoIT ARS</h1>
|
|
|
|
<% if let ViewerState::Answering((current_field, field, data)) = state { %>
|
|
<h2><%= field.name%></h2>
|
|
<span>Total Participants: <b><%= data.iter().fold(0, |acc, e| acc +e) %></b></span>
|
|
|
|
<canvas id="myChart"></canvas>
|
|
|
|
<% if (current_field+1) as usize >= quiz.fields.len() { %>
|
|
<button hx-post="" class="outline">End Quiz</button>
|
|
<% } else { %>
|
|
<button hx-post="" class="outline">Next Question</button>
|
|
<% } %>
|
|
|
|
<script>
|
|
var ctx = document.getElementById('myChart');
|
|
var chart = new Chart(ctx, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: [
|
|
<% for answer in field.answers.iter() { %>
|
|
"<%= answer %>",
|
|
<% } %>
|
|
],
|
|
datasets: [{
|
|
label: "# der Stimmen",
|
|
data: [
|
|
<% for submissions in data.iter() { %>
|
|
<%= submissions %>,
|
|
<% } %>
|
|
],
|
|
borderWidth: 1
|
|
}]
|
|
},
|
|
options: {
|
|
legend: {
|
|
display: false
|
|
},
|
|
scales: {
|
|
x: {
|
|
ticks: {
|
|
font: {
|
|
size: 64
|
|
}
|
|
}
|
|
},
|
|
y: {
|
|
beginAtZero: true,
|
|
ticks: {
|
|
font: {
|
|
size:24
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<% } else if let ViewerState::Result((current_field, field, data)) = state { %>
|
|
<h2><%= field.name%></h2>
|
|
<span>Total Participants: <b><%= data.iter().fold(0, |acc, e| acc +e) %></b></span>
|
|
<br/>
|
|
<span>The correct answer is: <b><%=field.answers[field.correct as usize]%></b></span>
|
|
|
|
<canvas id="myChart"></canvas>
|
|
|
|
<% if (current_field+1) as usize >= quiz.fields.len() { %>
|
|
<button hx-post="" class="outline">End Quiz</button>
|
|
<% } else { %>
|
|
<button hx-post="" class="outline">Next Question</button>
|
|
<% } %>
|
|
|
|
<script>
|
|
var ctx = document.getElementById('myChart');
|
|
var chart = new Chart(ctx, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: [
|
|
<% for answer in field.answers.iter() { %>
|
|
"<%= answer %>",
|
|
<% } %>
|
|
],
|
|
datasets: [{
|
|
label: "# der Stimmen",
|
|
data: [
|
|
<% for submissions in data.iter() { %>
|
|
<%= submissions %>,
|
|
<% } %>
|
|
],
|
|
borderWidth: 1
|
|
}]
|
|
},
|
|
options: {
|
|
legend: {
|
|
display: false
|
|
},
|
|
scales: {
|
|
x: {
|
|
ticks: {
|
|
font: {
|
|
size: 64
|
|
}
|
|
}
|
|
},
|
|
y: {
|
|
beginAtZero: true,
|
|
ticks: {
|
|
font: {
|
|
size:24
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
<% } else if let ViewerState::NotStarted((player, qrcode, url)) = state { %>
|
|
</article>
|
|
<center><%- qrcode %></center>
|
|
<center><%= url %></center>
|
|
<button hx-post="" class="outline">Start Quiz with <b><%= player %></b> Players</button>
|
|
</article>
|
|
<% } else {%>
|
|
<article>
|
|
The Quiz finished. You can close this tab now.
|
|
</article>
|
|
<% } %>
|
|
<% if !htmx { %>
|
|
</main>
|
|
<script src="/static/htmx.min.js"></script>
|
|
</body>
|
|
</html>
|
|
<% } %>
|