ars/templates/single_choice/viewer.stpl

<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>