generic question type support
This commit is contained in:
parent
4bf6afaf4e
commit
70b0da40dc
GPG key ID:
4EEF46A5B276E648
12 changed files with 385 additions and 251 deletions
|
|
@ -14,15 +14,18 @@
|
|||
# number of seconds to wait before showing results<br/>
|
||||
wait_for = 15<br/>
|
||||
<br/>
|
||||
[[fields]]<br/>
|
||||
# name of the field<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/>
|
||||
[[fields]]<br/>
|
||||
[[questions]]<br/>
|
||||
type = "single_choice"<br/>
|
||||
name = "What is there?"<br/>
|
||||
answers = [ "A", "B", "C", "D"]<br/>
|
||||
correct = 0<br/>
|
||||
|
|
@ -33,7 +36,7 @@
|
|||
<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">Quiz erstellen</button>
|
||||
<button type="submit">Create Quiz</button>
|
||||
</form>
|
||||
</main>
|
||||
<script src="/static/htmx.min.js"></script>
|
||||
|
|
|
|||
|
|
@ -14,42 +14,14 @@
|
|||
<article>
|
||||
<center>The Quiz hasn't started yet. Please wait for the first question.</center>
|
||||
</article>
|
||||
<% } else if let PlayerState::Answering((field_id, field)) = state { %>
|
||||
<article>
|
||||
<h1><%= field.name %></h1>
|
||||
<% for (index, answer) in field.answers.iter().enumerate() { %>
|
||||
<form method="POST" hx-post="" hx-target="closest main">
|
||||
<input type="hidden" name="player_id" value="<%= player_id %>"></input>
|
||||
<input type="hidden" name="selected" value="<%= index %>"></input>
|
||||
<button type="submit"><%= answer %></button>
|
||||
</form>
|
||||
<% } %>
|
||||
</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>
|
||||
<% } else if let PlayerState::Result((field, selected)) = state{ %>
|
||||
<% if Some(field.correct) == selected { %>
|
||||
<article>
|
||||
<center><img src="/static/check.svg" width="50%"/></center>
|
||||
<center><h1>Correct</h1></center>
|
||||
<center><p>Your answer is correct. The correct answer is <b><%= field.answers[field.correct as usize] %></b>.</p></center>
|
||||
</article>
|
||||
<% } else { %>
|
||||
<article>
|
||||
<center><img src="/static/xmark.svg" width="50%"/></center>
|
||||
<center><h1>Wrong</h1></center>
|
||||
<center><p>
|
||||
Your answer is incorrect. The correct answer is <b><%= field.answers[field.correct as usize] %></b>.
|
||||
<% if let Some(s) = selected { %>
|
||||
You answered <b><%=field.answers[s as usize]%></b>.
|
||||
<% } else { %>
|
||||
You didn't answer the question.
|
||||
<% } %>
|
||||
</p></center>
|
||||
</article>
|
||||
<% } %>
|
||||
<% } 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.
|
||||
|
|
|
|||
10
templates/single_choice/player.stpl
Normal file
10
templates/single_choice/player.stpl
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
<article>
|
||||
<h1><%= name %></h1>
|
||||
<% for (index, answer) in answers.iter().enumerate() { %>
|
||||
<form method="POST" hx-post="" hx-target="closest main">
|
||||
<input type="hidden" name="player_id" value="<%= player_id %>"></input>
|
||||
<input type="hidden" name="value" value="<%= index %>"></input>
|
||||
<button type="submit"><%= answer %></button>
|
||||
</form>
|
||||
<% } %>
|
||||
</article>
|
||||
20
templates/single_choice/result.stpl
Normal file
20
templates/single_choice/result.stpl
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
<% if is_correct { %>
|
||||
<article>
|
||||
<center><img src="/static/check.svg" width="50%"/></center>
|
||||
<center><h1>Correct</h1></center>
|
||||
<center><p>Your answer is correct. The correct answer is <b><%= correct_answer %></b>.</p></center>
|
||||
</article>
|
||||
<% } else { %>
|
||||
<article>
|
||||
<center><img src="/static/xmark.svg" width="50%"/></center>
|
||||
<center><h1>Wrong</h1></center>
|
||||
<center><p>
|
||||
Your answer is incorrect. The correct answer is <b><%= correct_answer %></b>.
|
||||
<% if let Some(player_answer) = player_answer { %>
|
||||
You answered <b><%= player_answer %></b>.
|
||||
<% } else { %>
|
||||
You didn't answer the question.
|
||||
<% } %>
|
||||
</p></center>
|
||||
</article>
|
||||
<% } %>
|
||||
54
templates/single_choice/viewer.stpl
Normal file
54
templates/single_choice/viewer.stpl
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
<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>
|
||||
<% } %>
|
||||
|
||||
<canvas id="myChart"></canvas>
|
||||
|
||||
|
||||
<script>
|
||||
var ctx = document.getElementById('myChart');
|
||||
var chart = new Chart(ctx, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: [
|
||||
<% for answer in answers.iter() { %>
|
||||
"<%= answer %>",
|
||||
<% } %>
|
||||
],
|
||||
datasets: [{
|
||||
label: "# der Stimmen",
|
||||
data: [
|
||||
<% for submissions in submissions.iter() { %>
|
||||
<%= submissions %>,
|
||||
<% } %>
|
||||
],
|
||||
borderWidth: 1
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
ticks: {
|
||||
font: {
|
||||
size: 64
|
||||
}
|
||||
}
|
||||
},
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
ticks: {
|
||||
font: {
|
||||
size:24
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
@ -14,121 +14,21 @@
|
|||
<% } %>
|
||||
<h1>zettoIT ARS</h1>
|
||||
|
||||
<% if let ViewerState::Answering((current_field, field, data)) = state { %>
|
||||
<h2><%= field.name%></h2>
|
||||
<span>Total Participants: <b><%= data.iter().fold(0, |acc, e| acc +e) %></b></span>
|
||||
<% if let ViewerState::Answering{ inner_body } = state { %>
|
||||
<%- inner_body %>
|
||||
|
||||
<canvas id="myChart"></canvas>
|
||||
<button hx-post="" class="outline">Show correct Answer</button>
|
||||
|
||||
<% if (current_field+1) as usize >= quiz.fields.len() { %>
|
||||
<button hx-post="" class="outline">End Quiz</button>
|
||||
<% } else { %>
|
||||
<button hx-post="" class="outline">Next Question</button>
|
||||
<% } %>
|
||||
<% } else if let ViewerState::Result{ last_question, inner_body} = state { %>
|
||||
|
||||
<script>
|
||||
var ctx = document.getElementById('myChart');
|
||||
var chart = new Chart(ctx, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: [
|
||||
<% for answer in field.answers.iter() { %>
|
||||
"<%= answer %>",
|
||||
<% } %>
|
||||
],
|
||||
datasets: [{
|
||||
label: "# der Stimmen",
|
||||
data: [
|
||||
<% for submissions in data.iter() { %>
|
||||
<%= submissions %>,
|
||||
<% } %>
|
||||
],
|
||||
borderWidth: 1
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
ticks: {
|
||||
font: {
|
||||
size: 64
|
||||
}
|
||||
}
|
||||
},
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
ticks: {
|
||||
font: {
|
||||
size:24
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<%- inner_body %>
|
||||
|
||||
<% } else if let ViewerState::Result((current_field, field, data)) = state { %>
|
||||
<h2><%= field.name%></h2>
|
||||
<span>Total Participants: <b><%= data.iter().fold(0, |acc, e| acc +e) %></b></span>
|
||||
<br/>
|
||||
<span>The correct answer is: <b><%=field.answers[field.correct as usize]%></b></span>
|
||||
<% if last_question { %>
|
||||
<button hx-post="" class="outline">End Quiz</button>
|
||||
<% } else { %>
|
||||
<button hx-post="" class="outline">Next Question</button>
|
||||
<% } %>
|
||||
|
||||
<canvas id="myChart"></canvas>
|
||||
|
||||
<% if (current_field+1) as usize >= quiz.fields.len() { %>
|
||||
<button hx-post="" class="outline">End Quiz</button>
|
||||
<% } else { %>
|
||||
<button hx-post="" class="outline">Next Question</button>
|
||||
<% } %>
|
||||
|
||||
<script>
|
||||
var ctx = document.getElementById('myChart');
|
||||
var chart = new Chart(ctx, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: [
|
||||
<% for answer in field.answers.iter() { %>
|
||||
"<%= answer %>",
|
||||
<% } %>
|
||||
],
|
||||
datasets: [{
|
||||
label: "# der Stimmen",
|
||||
data: [
|
||||
<% for submissions in data.iter() { %>
|
||||
<%= submissions %>,
|
||||
<% } %>
|
||||
],
|
||||
borderWidth: 1
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
ticks: {
|
||||
font: {
|
||||
size: 64
|
||||
}
|
||||
}
|
||||
},
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
ticks: {
|
||||
font: {
|
||||
size:24
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<% } else if let ViewerState::NotStarted((player, qrcode, url)) = state { %>
|
||||
</article>
|
||||
<center><%- qrcode %></center>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue