Display quality as tags instead of an absolute number

coolcrowd · Mar 20, 2016 · 2f96aaa · 2f96aaa
1 parent 0ea1729
commit 2f96aaa
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 5 deletions.
diff --git a/src/js/components/experiments/answers/AnswerList.js b/src/js/components/experiments/answers/AnswerList.js
@@ -11,6 +11,7 @@ import JsonFormatter from "../../../formatters/JsonFormatter";
 import CsvFormatter from "../../../formatters/CsvFormatter";
 import { saveAs } from "filesaver.js";
 import moment from "moment";
+import classNames from "classnames";
 
 /**
  * @author Niklas Keller
@@ -145,24 +146,43 @@ class AnswerList extends DataComponent {
                 answerTime = answerTime.fromNow();
             }
 
+            let quality = item.ratings.length > 0 ? (
+                <span className={"answer-quality " + (item.quality >= this.state.experiment.paymentQualityThreshold
+                        ? "answer-quality-good"
+                        : "answer-quality-bad")}>
+                    {item.quality >= this.state.experiment.paymentQualityThreshold ? "Good" : "Bad"}
+                </span>
+            ) : (
+                <span className="answer-quality answer-quality-none">
+                     No Ratings
+                </span>
+            );
+
+            if (item.duplicate) {
+                quality = (
+                    <span className="answer-quality answer-quality-duplicate">
+                        DUPLICATE
+                    </span>
+                );
+            }
+
             let meta = (
                 <div className="answer-meta">
                     <time dateTime={moment(item.time * 1000).toISOString()}
                           title={moment(item.time * 1000).format("llll")}>
                         {answerTime}
                     </time>
 
-                        <span className="answer-quality">
-                            Quality: {item.quality}
-                        </span>
+                    {quality}
                 </div>
             );
 
             let content = [
                 meta,
                 <div className="answer-content dont-break-out">
                     item.content
-                </div>,
+                </div>
+                ,
                 feedback,
                 systemResponse
             ];
@@ -186,7 +206,10 @@ class AnswerList extends DataComponent {
             }
 
             return (
-                <div key={item.id} className="answer">
+                <div key={item.id} className={classNames({
+                            "answer": true,
+                            "answer-duplicate": item.duplicate
+                        })}>
                     {content}
                 </div>
             );

diff --git a/src/sass/screen.scss b/src/sass/screen.scss
@@ -188,13 +188,18 @@ pre {
 
 .answer-meta {
   color: #888;
+  line-height: 16px;
 }
 
 .answer-meta > * {
   display: inline-block;
   margin: 8px 16px 8px 0;
 }
 
+.answer-duplicate {
+  opacity: .5;
+}
+
 .answer-content {
   padding: 8px 0;
 }
@@ -240,6 +245,33 @@ pre {
   text-decoration: underline !important;
 }
 
+.answer-quality {
+  display: inline-block;
+  margin: 0 3px;
+  padding: 3px 6px;
+  border-bottom: 1px solid rgba(0,0,0,.2);
+  border-radius: 3px;
+  font-weight: bold;
+  font-size: 11px;
+  background-color: #eee;
+  text-transform: uppercase;
+}
+
+.answer-quality-good {
+  color: #00ac4d;
+  background-color: #84c695;
+}
+
+.answer-quality-bad {
+  color: #ab3900;
+  background-color: #e2ac93;
+}
+
+.answer-quality-duplicate {
+  color: #333;
+  background-color: #eee;
+}
+
 @media (max-width: 600px) {
   .answer-content-image {
     display: block;