height: 100%;
width: 100%;
}
+html {
+ margin: 0;
+ height: 100%;
+}
+body {
+ background-color: #888892;
+ margin: 0;
+ padding: 0;
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+}
+header {
+ font-size: 1.3em;
+}
+#top-bar, #current-bar {
+ padding: .5em;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+}
+#top-bar {
+ background-color: #002868;
+ color: white;
+}
+#current-bar {
+ background-color: #54d8a8;
+ color: #002868;
+}
+header button {
+ margin-left: 1em;
+ border-radius: 4px;
+ background-color: #4368a1;
+ color: #dbe9ff;
+ font: inherit;
+ font-weight: normal;
+ border: 1px solid #7492c3;
+ padding: 0.15em 0.25em;
+}
+header button:hover, header button:active, header button:focus {
+ background-color: #2f5591;
+}
+#maybe {
+ background-color: #F0AD4E;
+ border-color: #EEA236;
+ color: #664009;
+ color: white;
+}
+#maybe:hover, #maybe:active, #maybe:focus {
+ background-color: #EC971F;
+ border-color: #D58512;
+}
+#yes {
+ background-color: #5CB85C;
+ border-color: #4CAE4C;
+ color: #214d21;
+ color: white;
+}
+#yes:hover, #yes:focus, #yes:active {
+ background-color: #449D44;
+ border-color: #398439;
+}
+#no {
+ background-color: #D9534F;
+ border-color: #D43F3A;
+ color: #4f1311;
+ color: white;
+}
+#no:hover, #no:focus, #no:active {
+ background-color: #C9302C;
+ border-color: #AC2925;
+}
+#query {
+ font-weight: bold;
+ font-size: 110%;
+}
+#settings, #judiciary {
+ flex: 1;
+ display: flex;
+ align-items: center;
+}
+#results, #query-info {
+ flex: 1;
+ display: flex;
+ text-align: right;
+ align-items: center;
+ justify-content: flex-end;
+}
+#count {
+ font-size: 120%;
+}
+#test-area {
+ flex: 1;
+ padding: 1em;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+#results-table {
+ flex: 1;
+ padding: 1em;
+ display: flex;
+ justify-content: center;
+}
+#results-table table {
+ border-collapse: collapse;
+ border-spacing: 0;
+}
+#results-table td, #results-table th {
+ padding: .25em 1.25em;
+ font-size: .9em;
+}
+#results-table tr:first-child {
+ border-bottom: 1px solid black;
+}
+#results-table tr {
+ border-bottom: 1px dotted black;
+}
+#results-table tr:last-child {
+ border-bottom: none;
+}
+
</style>
</head>
<body>
-Relevant to query <span id="query"></span>?
-<button id="yes" class="judgement">Yes</button>
-<button id="no" class="judgement">No</button>
-<button id="maybe" class="judgement">Maybe</button>
-Settings:
-<button id="widget-markup-button">Widget</button>
-<button id="queries-button">Queries</button>
-Results:
-<button id="results-table-button">Table</button>
-<button id="results-csv-button">CSV</button>
+<header>
+ <div id="top-bar">
+ <span id="settings">
+ Settings:
+ <button id="widget-markup-button">Widget</button>
+ <button id="queries-button">Queries</button>
+ </span>
+ <span id="results">
+ Results:
+ <button id="results-table-button">Table</button>
+ <button id="results-csv-button">| delimited</button>
+ </span>
+ </div>
+</header>
+
+<header id="current-bar">
+ <span id="judiciary">
+ Relevant to query <span id="query"></span>?
+ <button id="yes" class="judgement">Yes</button>
+ <button id="no" class="judgement">No</button>
+ <button id="maybe" class="judgement">Maybe</button>
+ </span>
+ <span id="query-info">
+ <span id="count"></span>
+ </span>
+</header>
<div id="widget-markup" class="dialog" title="Widget markup">
<textarea></textarea>
<table></table>
</div>
-<hr>
-
-<div id="test-subject"></div>
+<div id="test-area">
+ <div id="test-subject"></div>
+</div>
<script>
(function () { // wrapper
// Initial data
this.queries = ["sushi", "wurst", "berlin", "hammer", "bristol", "copenhagen", "tea", "latte"];
-$("#queries > textarea").html(this.queries.join("\n"));
this.widgetMarkup = '<div class="mkws-reference" autosearch="{{query}}">Loading..</div>';
+if (localStorage.getItem('mkwstest-queries')) {
+ this.queries = JSON.parse(localStorage.getItem('mkwstest-queries'));
+}
+if (localStorage.getItem('mkwstest-widget-markup')) {
+ this.widgetMarkup = localStorage.getItem('mkwstest-widget-markup');
+}
+$("#queries > textarea").html(this.queries.join("\n"));
$("#widget-markup > textarea").html(this.widgetMarkup);
this.results = {};
-var next;
+var next = 0;
+if (localStorage.getItem('mkwstest-results')) {
+ this.results = JSON.parse(localStorage.getItem('mkwstest-results'));
+}
+if (localStorage.getItem('mkwstest-next') !== null) {
+ next = parseInt(localStorage.getItem('mkwstest-next'));
+}
+
var context = this;
var showNext = function () {
if (next < this.queries.length) {
$('#test-subject').html(this.widgetMarkup.replace("{{query}}", this.queries[next]));
$('#query').html('"' + this.queries[next] + '"');
+ localStorage.setItem("mkwstest-next", next);
next++;
+ $('#count').html(next + " / " + this.queries.length);
mkws.init('#test-subject');
+ } else {
+ $("#results-table").dialog("open");
}
}
var startEval = function () {
var judge = function (e) {
var query = $('#test-subject > div').attr('autosearch');
context.results[query] = {judgement: $(this).html()};
+ localStorage.setItem("mkwstest-results", JSON.stringify(context.results));
showNext();
}
// Markup dialog
var updateMarkup = function () {
context.widgetMarkup = $("#widget-markup > textarea").val();
+ localStorage.setItem("mkwstest-widget-markup", context.widgetMarkup);
startEval();
}
$("#widget-markup-button").click(function () {
// Queries dialog
var updateQueries = function () {
context.queries = $("#queries > textarea").val().split("\n");
+ localStorage.setItem("mkwstest-queries", JSON.stringify(context.queries));
startEval();
}
$("#queries-button").click(function () {
});
$('button.judgement').click(judge);
-startEval();
+showNext();
})();// wrapper
</script>
projects / mkws-moved-to-github.git / blobdiff