theming

2023-11-05 23:01:47 +01:00 · 2023-11-05 23:01:47 +01:00 · 4ce5c5270b
commit 4ce5c5270b
parent f5485b773b
11 changed files with 1206 additions and 131 deletions
--- a/flake.nix
+++ b/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)
          ;
        };
--- a/src/question/single_choice.rs
+++ b/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],
 }
--- a/static/check.svg
+++ b/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>
--- a/static/patternomaly.js
+++ b/static/patternomaly.js
--- a/static/xmark.svg
+++ b/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>
--- a/templates/index.stpl
+++ b/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>
--- a/templates/play.stpl
+++ b/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">
-                You answered the current question. Please wait for the results.
-            </article>
+            <center>You answered the current question. Please wait for the results.</center>
        <% } else if let PlayerState::Result{ inner_body } = state{ %>
            <%- inner_body %>
        <% } else if let PlayerState::Completed(correct) = state { %>
-            <article>
-                The Quiz finished. You can close this tab now. You answered <b><%= correct*100.0 %>%</b> correctly.
-            </article>
+            <center>The Quiz finished. You can close this tab now. You answered <b><%= correct*100.0 %>%</b> correctly.</center>
        <% } %>

 <% if !htmx { %>
--- a/templates/single_choice/player.stpl
+++ b/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>
--- a/templates/single_choice/result.stpl
+++ b/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>
 <% } %>
--- a/templates/single_choice/viewer.stpl
+++ b/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'
            }
          }
        }
--- a/templates/view.stpl
+++ b/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>