easyctf-2017/web/pages/admin/problems.html
2016-04-07 22:48:12 -04:00

103 lines
4 KiB
HTML

<div class="page-header">
<h1>Problem Editor</h1>
</div>
<style>
.ace_editor {
width: 100%;
height: 200px;
}
.epiceditor-edit-mode {
border: 1px solid #999 !important;
}
</style>
<div class="row"> <div class="tabbable"> <ul class="nav nav-pills nav-stacked col-md-3">
<li class="active"><a data-target="#new" data-toggle="tab">New</a></li>
<li ng-repeat="problem in problems"><a data-target="#problem_{{ problem['pid'] }}" data-toggle="tab">{{ problem["title"] }} ({{ problem["value"] }} points)</a></li>
</ul>
<div class="tab-content col-md-9">
<div class="tab-pane active" id="new">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">New Problem</h4>
</div>
<div class="panel-body">
<div id="add-status"></div>
<form class="form-horizontal" onsubmit="create_problem(); return false;" id="new_problem_form">
<input class="form-control" name="title" placeholder="Name" required/>
<br>
<textarea class="form-control" name="description" placeholder="Description" required autocomplete="off"/>
<br>
<input class="form-control" name="category" placeholder="Category" required autocomplete="off"/>
<br>
<input class="form-control" name="hint" placeholder="Hint" required/>
<br>
<input class="form-control" name="value" type="number" placeholder="Problem Value" required autocomplete="off"/>
<br>
<div id="new_grader"></div>
<br>
<input type="submit" id="create-problem" class="btn btn-success" value="Create"/>
</form>
</div>
</div>
</div>
<div class="tab-pane" ng-repeat="problem in problems" id="problem_{{ problem['pid'] }}">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">{{ problem["title"] }}</h4>
</div>
<div class="panel-body">
<div id="{{ problem['pid'] }}_status"/>
<form class="form-horizontal" onsubmit="update_problem(this.id); return false;" id="update_{{ problem['pid'] }}">
<input type="hidden" name="pid" value="{{ problem['pid'] }}"/>
<input class="form-control" name="title" value="{{ problem['title'] }}" required/>
<br>
<textarea class="form-control" name="description" required autocomplete="off">{{ problem["description"] }}</textarea>
<br>
<input class="form-control" name="category" value="{{ problem['category'] }}" required/>
<br>
<input class="form-control" name="hint" value="{{ problem['hint'] }}" required/>
<br>
<input class="form-control" type="number" name="value" value="{{ problem['value'] }}" required/>
<br>
<div id="{{ problem['pid'] }}_grader"></div>
<br>
<input type="submit" class="btn btn-success" value="Update"/>
<input onclick="delete_problem(this.closest('form').id); return false;" class="btn btn-danger" value="Delete"/>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$(".selectpicker").selectpicker();
var config = {
toolbar: [
{ name: "basicstyles", items: [ "Bold", "Italic", "Underline" ] },
{ name: "links", items: [ "Link" ] },
{ name: "paragraph", items: [ "NumberedList", "BulletedList", "-", "Outdent", "Indent", "-", "Blockquote" ] },
{ name: "tools", items: [ "Maximize" ] },
{ name: "document", items: [ "Source" ] },
]
};
var editor = new EpicEditor({
container: "new_grader",
theme: {
base: "https://cdnjs.cloudflare.com/ajax/libs/epiceditor/0.2.2/themes/base/epiceditor.css",
preview: "https://cdnjs.cloudflare.com/ajax/libs/epiceditor/0.2.2/themes/preview/github.css",
editor: "https://cdnjs.cloudflare.com/ajax/libs/epiceditor/0.2.2/themes/editor/epic-light.css"
},
button: {
bar: "show"
}
}).load();
var new_grader = ace.edit("new_grader");
new_grader.setTheme("ace/theme/tomorrow");
new_grader.getSession().setMode("ace/mode/python");
});
</script>