ars/templates/single_choice/viewer.stpl
2023-11-05 23:01:47 +01:00

91 lines
2.1 KiB
Text

<h2><%= name %></h2>
<span>Total Participants: <b><%= total_submissions %></b></span>
<% if show_result { %>
<span>The correct answer is: <b><%= correct_answer %></b></span>
<% } %>
<canvas id="myChart"></canvas>
<script>
var ctx = document.getElementById('myChart');
var chart = new Chart(ctx, {
type: 'bar',
data: {
labels: [
<% for answer in answers.iter() { %>
"<%= answer %>",
<% } %>
],
<% if show_result { %>
datasets: [
{
label: "correct answers",
data: [
<% for submissions in submissions_correct.iter() { %>
<%= submissions %>,
<% } %>
],
borderWidth: 1,
borderColor: '#fff',
backgroundColor: '#fff',
},
{
label: "wrong answers",
data: [
<% for submissions in submissions_wrong.iter() { %>
<%= submissions %>,
<% } %>
],
borderWidth: 2,
borderColor: '#fff',
backgroundColor: [ pattern.draw('diagonal-right-left', '#000000') ],
}
]
<% } else { %>
datasets: [{
data: [
<% for submissions in submissions.iter() { %>
<%= submissions %>,
<% } %>
],
borderWidth: 2,
borderColor: '#FFF',
backgroundColor: [ pattern.draw('diagonal-right-left', '#000000') ]
}]
<% } %>
},
options: {
plugins: {
legend: {
display: false
}
},
scales: {
x: {
stacked: true,
ticks: {
font: {
size: 64,
family: 'monospace'
},
color: '#FFF'
}
},
y: {
beginAtZero: true,
stacked: true,
ticks: {
font: {
size: 16,
family: 'monospace'
},
color: '#FFF'
}
}
}
}
});
</script>