ColdCore/templates/challenges.html

117 lines
4.5 KiB
HTML

{% extends "base.html" %}
{% block title %}Challenges{% endblock %}
{% block head %}
<script>
var state = !{{ solved.count() }};
function openAll() {
$(".collapsible-header").each(function(i, x){ $(x).hasClass("active") || $(x).click(); });
$("#toggleState").html("Collapse all challenges.");
}
function closeAll() {
$(".collapsible-header").each(function(i, x){ $(x).hasClass("active") && $(x).click(); });
$("#toggleState").html("Expand all challenges.");
}
function toggle() {
if(state) closeAll();
else openAll();
state = !state;
}
function filterCategories(t) {
var v = t.options[t.selectedIndex].value;
if(v == "*")
$(".challenge").show();
else {
$(".challenge[data-category=" + v + "]").show();
$(".challenge[data-category!=" + v + "]").hide();
}
}
</script>
<style type="text/css">
.collapsible-header {
background-color: #eee;
}
</style>
{% endblock %}
{% block content %}
<p>You are playing on behalf of {{ team.name }}. If this is incorrect, you should
<a href="{{ url_for('logout') }}">logout</a> and login with the correct team key.</p>
<select onchange="filterCategories(this);">
<option value="*">Show all</option>
{% for category in categories %}
<option>{{ category }}</option>
{% endfor %}
</select>
<span class="left"><a href="javascript:toggle()" id="toggleState">{% if solved.count() %}Expand all challenges.{% else %}Collapse all challenges.{% endif %}</a></span>
<br />
<ul class="collapsible" data-collapsible="expandable">
{% for challenge in challenges %}
<li class="challenge" data-category="{{ challenge.category }}">
<div id="header{{ challenge.id }}" class="collapsible-header{% if challenge not in solved %} active{% endif %}">
<strong style="font-size: 110%;">{{ challenge.name }}</strong>
<span class="left" style="margin-right: -5px;">
<i id="check{{ challenge.id }}" style="display:{{ "block" if challenge in solved else "none" }}" class="material-icons">check</i>
</span>
<span class="right">
<span>{{ challenge.author }}</span>
<b>&middot;</b>
<span id="solves{{ challenge.id }}">{{ solves[challenge.id] }}</span> solve(s)
<b>&middot;</b>
{{ challenge.category }}
<b>&middot;</b>
{{ challenge.points }} pt
</span>
</div>
<div class="collapsible-body">
<p>{{ challenge.description | safe }}
{% if challenge in solved %}
<br /><br /><strong>You've solved this challenge!</strong><br />
<a href="{{ url_for('challenge_show_solves', challenge=challenge.id) }}">View solves</a>
</p>
{% else %}
<br /><br />
<a href="{{ url_for('challenge_show_solves', challenge=challenge.id) }}">View solves</a>
</p>
<form action="{{ url_for('submit', challenge=challenge.id) }}" data-challengeid="{{ challenge.id }}" method="POST">
<div class="container">
<div class="input-field">
<input required id="flag{{ challenge.id }}" name="flag" type="text" />
<label for="flag{{ challenge.id }}">Flag</label>
</div>
<button class="btn waves-effect waves-light" type="submit">Submit</button>
</div>
<input name="_csrf_token" type="hidden" value="{{ csrf_token() }}" />
</form><br />
{% endif %}
</li>
{% endfor %}
</ul>
{% endblock %}
{% block postscript %}
<script>
$(function() {
$("select").material_select();
});
</script>
{% if config.apisubmit %}
<script>
$("form").submit(function(e) {
var id = $(this).attr("data-challengeid");
api.makeCall("/submit/" + id + ".json", {flag: $("#flag" + id).val(), _csrf_token: "{{ csrf_token() }}"}, function(data) {
if(data.code) {
Materialize.toast(data.message, 4000);
}
else {
Materialize.toast("Flag accepted!", 4000);
$("#check" + id).show();
$("#header" + id).click();
$("#solves" + id).html(parseInt($("#solves" + id).html()) + 1);
}
});
return false;
});
</script>
{% endif %}
{% endblock %}