theming

flake.nix

@@ -15,8 +15,6 @@
       url = "github:ipetkov/crane";
       inputs = {
         nixpkgs.follows = "nixpkgs";
-        flake-utils.follows = "flake-utils";
-        rust-overlay.follows = "rust-overlay";
       };
     };
   };
@@ -42,6 +40,7 @@
             (pkgs.lib.hasSuffix "\.md" path) ||
             (pkgs.lib.hasSuffix "\.stpl" path) ||
             (pkgs.lib.hasInfix "static" path) ||
+            (pkgs.lib.hasInfix "zettoit-style" path) ||
             (craneLib.filterCargoSources path type)
           ;
         };

src/question/single_choice.rs

@@ -96,6 +96,24 @@ impl Question for SingleChoiceQuestion {
                     acc
                 },
             ),
+            submissions_correct: &self.submissions.iter().fold(
+                vec![0; self.inner.answers.len()],
+                |mut acc, (_, v)| {
+                    if *v == self.inner.correct {
+                        acc[*v as usize] += 1;
+                    }
+                    acc
+                },
+            ),
+            submissions_wrong: &self.submissions.iter().fold(
+                vec![0; self.inner.answers.len()],
+                |mut acc, (_, v)| {
+                    if *v != self.inner.correct {
+                        acc[*v as usize] += 1;
+                    }
+                    acc
+                },
+            ),
             correct_answer: &self.inner.answers[self.inner.correct as usize],
             answers: &self.inner.answers,
         }
@@ -126,6 +144,8 @@ struct ViewerTemplate<'a> {
     name: &'a str,
     total_submissions: u32,
     submissions: &'a [u32],
+    submissions_correct: &'a [u32],
+    submissions_wrong: &'a [u32],
     correct_answer: &'a str,
     answers: &'a [String],
 }

static/check.svg

@@ -1,38 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   viewBox="0 0 512 512"
-   version="1.1"
-   id="svg4"
-   sodipodi:docname="check.svg"
-   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:svg="http://www.w3.org/2000/svg">
-  <defs
-     id="defs8" />
-  <sodipodi:namedview
-     id="namedview6"
-     pagecolor="#ffffff"
-     bordercolor="#000000"
-     borderopacity="0.25"
-     inkscape:showpageshadow="2"
-     inkscape:pageopacity="0.0"
-     inkscape:pagecheckerboard="0"
-     inkscape:deskcolor="#d1d1d1"
-     showgrid="false"
-     inkscape:zoom="2.0058594"
-     inkscape:cx="256.24927"
-     inkscape:cy="256.24927"
-     inkscape:window-width="1370"
-     inkscape:window-height="2110"
-     inkscape:window-x="0"
-     inkscape:window-y="0"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="svg4" />
-  <!--! Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
-  <path
-     d="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-111 111-47-47c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l64 64c9.4 9.4 24.6 9.4 33.9 0L369 209z"
-     id="path2"
-     style="fill:#008000" />
-</svg>

static/xmark.svg

@@ -1,38 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   viewBox="0 0 512 512"
-   version="1.1"
-   id="svg4"
-   sodipodi:docname="xmark.svg"
-   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:svg="http://www.w3.org/2000/svg">
-  <defs
-     id="defs8" />
-  <sodipodi:namedview
-     id="namedview6"
-     pagecolor="#ffffff"
-     bordercolor="#000000"
-     borderopacity="0.25"
-     inkscape:showpageshadow="2"
-     inkscape:pageopacity="0.0"
-     inkscape:pagecheckerboard="0"
-     inkscape:deskcolor="#d1d1d1"
-     showgrid="false"
-     inkscape:zoom="2.0058594"
-     inkscape:cx="256.24927"
-     inkscape:cy="256.24927"
-     inkscape:window-width="1370"
-     inkscape:window-height="2110"
-     inkscape:window-x="0"
-     inkscape:window-y="0"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="svg4" />
-  <!--! Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
-  <path
-     d="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c-9.4 9.4-9.4 24.6 0 33.9l47 47-47 47c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l47-47 47 47c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-47-47 47-47c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-47 47-47-47c-9.4-9.4-24.6-9.4-33.9 0z"
-     id="path2"
-     style="fill:#ff0000" />
-</svg>

templates/index.stpl

@@ -31,10 +31,12 @@ answers = [ "A", "B", "C", "D"]
 correct = 0
             </pre>
 
-            <span id="error" style="color: red;"></span>
             <form method="post" hx-post="" hx-target="#error" hx-swap="innerHTML" enctype="multipart/form-data">
                 <input type="file" name="quizfile"/>
-                <button type="submit">Create Quiz</button>
+                <button type="submit">
+                    Create Quiz
+                    <small id="error" style="color: red;"></small>
+                </button>
             </form>
         </main>
         <a class="watermark" href="https://git2.zettoit.eu/zettoit"><img src="/static/zettoit-style/zettoit.svg" alt="zettoIT Logo"></a>

templates/play.stpl

@@ -11,21 +11,15 @@
         <main class="container" hx-sse="connect:/<%= id %>/events?player=<%=player_id%> swap:message">
 <% } %>
         <% if let PlayerState::NotStarted = state { %>
-            <article>
             <center>The Quiz hasn't started yet. Please wait for the first question.</center>
-            </article>
         <% } else if let PlayerState::Answering{ inner_body } = state { %>
             <%- inner_body %>
         <% } else if let PlayerState::Waiting(_) = state{ %>
-            <article aria-busy="true">
+            <center>You answered the current question. Please wait for the results.</center>
-                You answered the current question. Please wait for the results.
-            </article>
         <% } else if let PlayerState::Result{ inner_body } = state{ %>
             <%- inner_body %>
         <% } else if let PlayerState::Completed(correct) = state { %>
-            <article>
+            <center>The Quiz finished. You can close this tab now. You answered <b><%= correct*100.0 %>%</b> correctly.</center>
-                The Quiz finished. You can close this tab now. You answered <b><%= correct*100.0 %>%</b> correctly.
-            </article>
         <% } %>
 
 <% if !htmx { %>

templates/single_choice/player.stpl

@@ -1,4 +1,3 @@
-<article>
 <h1><%= name %></h1>
 <% for (index, answer) in answers.iter().enumerate() { %>
     <form method="POST" hx-post="" hx-target="closest main">
@@ -7,4 +6,3 @@
         <button type="submit"><%= answer %></button>
     </form>
 <% } %>
-</article>

templates/single_choice/result.stpl

@@ -1,10 +1,7 @@
 <% if is_correct { %>
-    <article class="centered">
     <h1>Correct</h1>
     <p>Your answer is correct. The correct answer is <b><%= correct_answer %></b>.</p>
-    </article>
 <% } else { %>
-    <article class="centered">
     <h1>Wrong</h1>
     <p>
         Your answer is incorrect. The correct answer is <b><%= correct_answer %></b>.
@@ -14,5 +11,4 @@
             You didn't answer the question.
         <% } %>
     </p>
-    </article>
 <% } %>

templates/single_choice/viewer.stpl

@@ -1,7 +1,6 @@
 <h2><%= name %></h2>
 <span>Total Participants: <b><%= total_submissions %></b></span>
 <% if show_result { %>
-    <br/>
     <span>The correct answer is: <b><%= correct_answer %></b></span>
 <% } %>
 
@@ -18,34 +17,72 @@
             "<%= 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: [{
-          label: "# der Stimmen",
           data: [
             <% for submissions in submissions.iter() { %>
               <%= submissions %>,
             <% } %>
           ],
-          borderWidth: 1
+
+          borderWidth: 2,
+          borderColor: '#FFF',
+          backgroundColor: [ pattern.draw('diagonal-right-left', '#000000') ]
+
         }]
+<% } %>
       },
       options: {
+        plugins: {
           legend: {
             display: false
+          }
         },
         scales: {
           x: {
+            stacked: true,
             ticks: {
               font: {
-                size: 64
+                size: 64,
-              }
+                family: 'monospace'
+              },
+              color: '#FFF'
             }
           },
           y: {
             beginAtZero: true,
+            stacked: true,
             ticks: {
               font: {
-                size:24
+                size: 16,
-              }
+                family: 'monospace'
+              },
+              color: '#FFF'
             }
           }
         }

templates/view.stpl

@@ -11,11 +11,14 @@
                 filter: invert();
                 width: 100%;
                 height: auto;
+                max-height: 90vh;
+                max-width: 90wh;
             }
         </style>
     </head>
     <body>
         <script src="/static/chart.js"></script>
+        <script src="/static/patternomaly.js"></script>
         <main class="container" hx-sse="connect:/<%= id %>/view/events swap:message">
 <% } %>
 <% if let ViewerState::Answering{ inner_body } = state { %>
@@ -34,15 +37,11 @@
             <% } %>
 
 <% } else if let ViewerState::NotStarted((player, qrcode, url)) = state { %>
-            </article>
             <center class="qrcode"><%- qrcode %></center>
             <center>or visit <%= 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>