use zettoit style
This commit is contained in:
parent
c6d33eee7e
commit
f5485b773b
5 changed files with 43 additions and 40 deletions
|
@ -3,35 +3,33 @@
|
||||||
<head>
|
<head>
|
||||||
<title>zettoIT ARS</title>
|
<title>zettoIT ARS</title>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<link rel="stylesheet" href="/static/pico.min.css">
|
<link rel="stylesheet" href="/static/zettoit-style/zettoit.css">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<main class="container">
|
<main class="container">
|
||||||
<p>zettoIT ARS is a lightweight open source audience response system built with rust.</p>
|
<p><b>zettoIT ARS</b> is a lightweight open source audience response system built with rust.</p>
|
||||||
<p>A quiz can be created by uploading a toml-encoded Quizfile. A basic example is listed below:</p>
|
<p>A quiz can be created by uploading a toml-encoded Quizfile. A basic example is listed below:</p>
|
||||||
<code style="width: 100%">
|
<pre>
|
||||||
# number of seconds to wait before showing results<br/>
|
# number of seconds to wait before showing results
|
||||||
wait_for = 15<br/>
|
wait_for = 15
|
||||||
<br/>
|
|
||||||
[[questions]]<br/>
|
|
||||||
# type of the question (currently only single_choice)<br/>
|
|
||||||
type = "single_choice"<br/>
|
|
||||||
# name of the question<br/>
|
|
||||||
name = "Who is there?"<br/>
|
|
||||||
# array of possible answers<br/>
|
|
||||||
answers = [ "A", "B", "C", "D"]<br/>
|
|
||||||
# index (starting at 0) of the correct answer<br/>
|
|
||||||
correct = 0<br/>
|
|
||||||
<br/>
|
|
||||||
[[questions]]<br/>
|
|
||||||
type = "single_choice"<br/>
|
|
||||||
name = "What is there?"<br/>
|
|
||||||
answers = [ "A", "B", "C", "D"]<br/>
|
|
||||||
correct = 0<br/>
|
|
||||||
</code>
|
|
||||||
|
|
||||||
<hr/>
|
[[questions]]
|
||||||
|
# type of the question (currently only single_choice)
|
||||||
|
type = "single_choice"
|
||||||
|
# name of the question
|
||||||
|
name = "Who is there?"
|
||||||
|
# array of possible answers
|
||||||
|
answers = [ "A", "B", "C", "D"]
|
||||||
|
# index (starting at 0) of the correct answer
|
||||||
|
correct = 0
|
||||||
|
|
||||||
|
[[questions]]
|
||||||
|
type = "single_choice"
|
||||||
|
name = "What is there?"
|
||||||
|
answers = [ "A", "B", "C", "D"]
|
||||||
|
correct = 0
|
||||||
|
</pre>
|
||||||
|
|
||||||
<span id="error" style="color: red;"></span>
|
<span id="error" style="color: red;"></span>
|
||||||
<form method="post" hx-post="" hx-target="#error" hx-swap="innerHTML" enctype="multipart/form-data">
|
<form method="post" hx-post="" hx-target="#error" hx-swap="innerHTML" enctype="multipart/form-data">
|
||||||
|
@ -39,6 +37,7 @@
|
||||||
<button type="submit">Create Quiz</button>
|
<button type="submit">Create Quiz</button>
|
||||||
</form>
|
</form>
|
||||||
</main>
|
</main>
|
||||||
|
<a class="watermark" href="https://git2.zettoit.eu/zettoit"><img src="/static/zettoit-style/zettoit.svg" alt="zettoIT Logo"></a>
|
||||||
<script src="/static/htmx.min.js"></script>
|
<script src="/static/htmx.min.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
<head>
|
<head>
|
||||||
<title>zettoIT ARS</title>
|
<title>zettoIT ARS</title>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<link rel="stylesheet" href="/static/pico.min.css">
|
<link rel="stylesheet" href="/static/zettoit-style/zettoit.css">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
@ -30,6 +30,7 @@
|
||||||
|
|
||||||
<% if !htmx { %>
|
<% if !htmx { %>
|
||||||
</main>
|
</main>
|
||||||
|
<a class="watermark" href="https://git2.zettoit.eu/zettoit"><img src="/static/zettoit-style/zettoit.svg" alt="zettoIT Logo"></a>
|
||||||
<script src="/static/htmx.min.js"></script>
|
<script src="/static/htmx.min.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -1,20 +1,18 @@
|
||||||
<% if is_correct { %>
|
<% if is_correct { %>
|
||||||
<article>
|
<article class="centered">
|
||||||
<center><img src="/static/check.svg" width="50%"/></center>
|
<h1>Correct</h1>
|
||||||
<center><h1>Correct</h1></center>
|
<p>Your answer is correct. The correct answer is <b><%= correct_answer %></b>.</p>
|
||||||
<center><p>Your answer is correct. The correct answer is <b><%= correct_answer %></b>.</p></center>
|
|
||||||
</article>
|
</article>
|
||||||
<% } else { %>
|
<% } else { %>
|
||||||
<article>
|
<article class="centered">
|
||||||
<center><img src="/static/xmark.svg" width="50%"/></center>
|
<h1>Wrong</h1>
|
||||||
<center><h1>Wrong</h1></center>
|
<p>
|
||||||
<center><p>
|
|
||||||
Your answer is incorrect. The correct answer is <b><%= correct_answer %></b>.
|
Your answer is incorrect. The correct answer is <b><%= correct_answer %></b>.
|
||||||
<% if let Some(player_answer) = player_answer { %>
|
<% if let Some(player_answer) = player_answer { %>
|
||||||
You answered <b><%= player_answer %></b>.
|
You answered <b><%= player_answer %></b>.
|
||||||
<% } else { %>
|
<% } else { %>
|
||||||
You didn't answer the question.
|
You didn't answer the question.
|
||||||
<% } %>
|
<% } %>
|
||||||
</p></center>
|
</p>
|
||||||
</article>
|
</article>
|
||||||
<% } %>
|
<% } %>
|
||||||
|
|
|
@ -4,16 +4,20 @@
|
||||||
<head>
|
<head>
|
||||||
<title>zettoIT ARS</title>
|
<title>zettoIT ARS</title>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<link rel="stylesheet" href="/static/charts.min.css">
|
<link rel="stylesheet" href="/static/zettoit-style/zettoit.css">
|
||||||
<link rel="stylesheet" href="/static/pico.min.css">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<style>
|
||||||
|
.qrcode svg{
|
||||||
|
filter: invert();
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<script src="/static/chart.js"></script>
|
<script src="/static/chart.js"></script>
|
||||||
<main class="container" hx-sse="connect:/<%= id %>/view/events swap:message">
|
<main class="container" hx-sse="connect:/<%= id %>/view/events swap:message">
|
||||||
<% } %>
|
<% } %>
|
||||||
<h1>zettoIT ARS</h1>
|
|
||||||
|
|
||||||
<% if let ViewerState::Answering{ inner_body } = state { %>
|
<% if let ViewerState::Answering{ inner_body } = state { %>
|
||||||
<%- inner_body %>
|
<%- inner_body %>
|
||||||
|
|
||||||
|
@ -31,8 +35,8 @@
|
||||||
|
|
||||||
<% } else if let ViewerState::NotStarted((player, qrcode, url)) = state { %>
|
<% } else if let ViewerState::NotStarted((player, qrcode, url)) = state { %>
|
||||||
</article>
|
</article>
|
||||||
<center><%- qrcode %></center>
|
<center class="qrcode"><%- qrcode %></center>
|
||||||
<center><%= url %></center>
|
<center>or visit <%= url %></center>
|
||||||
<button hx-post="" class="outline">Start Quiz with <b><%= player %></b> Players</button>
|
<button hx-post="" class="outline">Start Quiz with <b><%= player %></b> Players</button>
|
||||||
</article>
|
</article>
|
||||||
<% } else {%>
|
<% } else {%>
|
||||||
|
@ -42,6 +46,7 @@
|
||||||
<% } %>
|
<% } %>
|
||||||
<% if !htmx { %>
|
<% if !htmx { %>
|
||||||
</main>
|
</main>
|
||||||
|
<a class="watermark" href="https://git2.zettoit.eu/zettoit"><img src="/static/zettoit-style/zettoit.svg" alt="zettoIT Logo"></a>
|
||||||
<script src="/static/htmx.min.js"></script>
|
<script src="/static/htmx.min.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
wait_for = 15
|
wait_for = 3600
|
||||||
|
|
||||||
[[questions]]
|
[[questions]]
|
||||||
type = "single_choice"
|
type = "single_choice"
|
||||||
|
|
Loading…
Reference in a new issue