MAINT: add button for crowdsourcing user to get new query (#53)

stsievert · Jul 29, 2020 · dbcf1c6 · dbcf1c6
1 parent 1fdead4
commit dbcf1c6
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 11 deletions.
diff --git a/salmon/frontend/private.py b/salmon/frontend/private.py
@@ -145,6 +145,7 @@ async def _get_config(exp: bytes, targets: bytes) -> Dict[str, Any]:
         "debrief": "Thanks!",
         "samplers": {"random": {"module": "RandomSampling"}},
         "max_queries": -1,
+        "skip_button": False,
     }
     exp_config.update(config)
 

diff --git a/salmon/frontend/public.py b/salmon/frontend/public.py
@@ -80,6 +80,7 @@ async def _ensure_initialized():
         "n",
         "max_queries",
         "debrief",
+        "skip_button",
     ]
     if not set(exp_config) == set(expected_keys):
         msg = "Experiment keys are not correct. Expected {}, got {}"
@@ -101,6 +102,7 @@ async def get_query_page(request: Request):
         "targets": exp_config["targets"],
         "max_queries": exp_config["max_queries"],
         "debrief": exp_config["debrief"],
+        "skip_button": exp_config["skip_button"],
     }
     items.update(request=request)
     return templates.TemplateResponse("query_page.html", items)

diff --git a/templates/query_page.html b/templates/query_page.html
@@ -7,6 +7,10 @@
 
 <!-- Bootstrap CSS -->
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
+  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
+  <script src="https://code.jquery.com/jquery-3.2.1.min.js" crossorigin="anonymous"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
+  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
 
 <title>Salmon</title>
 <style>
@@ -53,23 +57,22 @@
 </style>
 </head>
 <body>
-  <!-- Optional JavaScript -->
-  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
-  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
-  <script src="https://code.jquery.com/jquery-3.2.1.min.js" crossorigin="anonymous"></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
-  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
-<br>
 <div class="container">
   <div class="outline justify-content-center">
     <div class="row justify-content-center">
-    <br>
     <p> {{instructions | safe}} </p>
     </div>
+    <!-- <hr> -->
+    <div class="row justify-content-center">
+      <p>Target:</p>
+    </div>
     <div class="row justify-content-center">
       <div class="col-lg-10 justify-content-center center cell head" id="q-head">
       </div>
     </div>
+    <div class="row justify-content-center">
+        <p>Comparisons:</p>
+    </div>
     <div class="row justify-content-center" id="choices">
       <div class="cell answer col col-lg-5 center cell answer" id="q-left"></div>
       <div class="cell answer col col-lg-5 center cell answer" id="q-right"></div>
@@ -81,10 +84,17 @@
   <div class="outline justify-content-center">
     <div class="fixed-bottom">
       <div style="padding: 5px; margin: 5px; color: #888;">
-          <span id="num-queries">0</span>
-          {% if max_queries > 0 %}
-          /{{ max_queries }}
+          <span id="num-queries">0</span>{% if max_queries > 0 %}/{{ max_queries }} {% endif %}
+      </div>
+      <div style="padding: 5px; margin: 5px; color: #888;">
+        <div id="skip-button">
+          {% if skip_button %}
+          <button type="button" class="btn btn-outline-info btn-sm" onclick="getquery()"
+              data-toggle="tooltip" data-placement="top" data-html="true"
+              title="Skip questions only if you know <em>nothing</em> about the items shown."
+          >Skip this question</button>
           {% endif %}
+        </div>
       </div>
     </div>
   </div>
@@ -104,6 +114,11 @@
 </div>
 
 <script>
+// Enable every tool tip on the page
+$(function () {
+  $('[data-toggle="tooltip"]').tooltip()
+})
+
 function sleep(ms) {
   return new Promise(resolve => setTimeout(resolve, ms));
 }

diff --git a/tests/data/button.yaml b/tests/data/button.yaml
@@ -0,0 +1,11 @@
+# filename: exp.yaml
+targets:
+  - object 1
+  - <i><b>arbitrary HTML</b></i>
+  - <img alt="bode miller" src="https://www.denverpost.com/wp-content/uploads/2005/02/bode-miller-one-ski.jpg" />
+  - <img alt="hoby cat" src="https://cdn.hobiecat.com/digital_asset_profiles/wildcat-action-12-full_jpg_1600x1600__generated.jpg" />
+  - <img alt="bode miller" src="https://nbcolympictalk.files.wordpress.com/2013/11/bode-miller.jpg" />
+instructions: These are <b>instructions</b>!
+max_queries: 10
+debrief: Thanks for participating!
+skip_button: true