X-Git-Url: http://sru.miketaylor.org.uk/?a=blobdiff_plain;f=examples%2Fhtdocs%2Ftester.html;h=ec26581e8d8b614e7f2426683210bc9ca9eea932;hb=31898c6914fe6358e2404e3eac28de95385ecf83;hp=de99f301e9a8492089ea98750aff4c2593e4a652;hpb=441d74ccae79d119f94724031d84c5f17901688a;p=mkws-moved-to-github.git

diff --git a/examples/htdocs/tester.html b/examples/htdocs/tester.html
index de99f30..ec26581 100644
--- a/examples/htdocs/tester.html
+++ b/examples/htdocs/tester.html
@@ -8,7 +8,6 @@
 <link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" />
 <link rel="stylesheet" type="text/css" href="mkws-widget-reference.css" />
 <link rel="stylesheet" type="text/css" href="mkws-widget-credo.css" />
-<link rel="stylesheet" type="text/css" href="mkws-widget-ru.css" />
 
 <script type="text/javascript">
   var mkws_config = {
@@ -41,7 +40,6 @@
 <script type="text/javascript" src="src/mkws-popup.js"></script>
 
 <script type="text/javascript" src="mkws-widget-credo.js"></script>
-<script type="text/javascript" src="mkws-widget-ru.js"></script>
 
 <style>
 .dialog > textarea {
@@ -53,7 +51,7 @@ html {
   height: 100%;
 }
 body {
-  background-color: #888892;
+  background-color: #bbbbbb;
   margin: 0;
   padding: 0;
   display: flex;
@@ -63,14 +61,20 @@ body {
 header {
   font-size: 1.3em;
 }
-#top-bar {
-  background-color: #002868;
-  color: white;
-  padding: .5em;
+#top-bar, #current-bar {
   display: flex;
+  flex-wrap: wrap;
   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;
@@ -79,7 +83,7 @@ header button {
   font: inherit;
   font-weight: normal;
   border: 1px solid #7492c3;
-  padding: 0.1em 0.15em;
+  padding: 0.15em 0.25em;
 }
 header button:hover, header button:active, header button:focus {
   background-color: #2f5591;
@@ -114,34 +118,59 @@ header button:hover, header button:active, header button:focus {
   background-color: #C9302C;
   border-color: #AC2925;
 }
-#current-bar {
-  background-color: #54d8a8;
-  color: #002868;
-  padding: .5em;
-}
 #query {
   font-weight: bold;
   font-size: 110%;
 }
-#settings {
-  flex: 1;
+#settings, #judiciary {
+  padding: .5em;
   display: flex;
   align-items: center;
 }
-#results {
-  flex: 1;
+#results, #query-info {
+  padding: .5em;
   display: flex;
   text-align: right;
   align-items: center;
   justify-content: flex-end;
 }
+#count {
+  font-size: 120%;
+}
 #test-area {
   flex: 1;
+  padding: 2em;
+  display: flex;
+  justify-content: center;
+  overflow: auto;
+}
+#test-subject {
+  margin: auto;
+}
+#results-table {
+  flex: 1;
   padding: 1em;
   display: flex;
   justify-content: center;
-  align-items: 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>
@@ -163,10 +192,15 @@ header button:hover, header button:active, header button:focus {
 </header>
 
 <header id="current-bar">
-  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 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">
@@ -190,20 +224,37 @@ header button:hover, header button:active, header button:focus {
 (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 () {
@@ -215,6 +266,7 @@ 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();
 }
 
@@ -232,6 +284,7 @@ $(".dialog").dialog({
 // Markup dialog
 var updateMarkup = function () {
   context.widgetMarkup = $("#widget-markup > textarea").val();
+  localStorage.setItem("mkwstest-widget-markup", context.widgetMarkup);
   startEval();
 }
 $("#widget-markup-button").click(function () {
@@ -245,6 +298,7 @@ $("#widget-markup").dialog("option", "buttons", [
 // 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 () {
@@ -286,7 +340,7 @@ $("#results-csv").dialog("option", "open", function () {
 });
 
 $('button.judgement').click(judge);
-startEval();
+showNext();
 })();// wrapper
 </script>