105 lines
2.5 KiB
Text
105 lines
2.5 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>
|
|
|
|
<% if answers.iter().any(|x| x.len() > 4) { %>
|
|
<ol>
|
|
<% for answer in answers.iter() { %>
|
|
<li><h4><%= answer %></h4></li>
|
|
<% } %>
|
|
</ol>
|
|
<% } %>
|
|
|
|
|
|
<script>
|
|
var ctx = document.getElementById('myChart');
|
|
var chart = new Chart(ctx, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: [
|
|
<% if answers.iter().any(|x| x.len() > 4) { %>
|
|
<% for answer in answers.iter().enumerate().map(|(i, _)| i+1) { %>
|
|
"<%= answer %>",
|
|
<% } %>
|
|
<% } else { %>
|
|
<% 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>
|