Wide coverage demo web app: translation quality feedback with colors

The background color of the translation changes to pale green, yellow or red
according to the quality.

Two types of quality indications are supported:

+ From the grammar: linearizations starting with "+" or "*" are assumed to
  be of high or low quality, respectively.
+ From the parse tree: if the root function is "?", then the translation is
  assumed to be of low quality.

If no quality indications are detected, medium quality is assumed.

src/www/js/wc.js

@@ -6,14 +6,19 @@ wc.translate=function() {
     var f=wc.f, e=wc.e, p=wc.p
     f.translate.disabled=true
     f.output.value=""
+    f.output.className=""
     wc.r=[]
     wc.current=0
     clear(e)
     clear(p)
 
     function show_error(msg) {
-	if(e) e.innerHTML=msg
+	if(e) e.innerHTML="<span class=low_quality>"+msg+"</span>"
-	else f.output.value="["+msg+"]"
+	else {
+	    f.output.value="["+msg+"]"
+	    f.output.className="low_quality"
+	}
+	f.translate.disabled=false
     }
     function show_pick(i) { return function() { show_trans(i); return false; } }
     function show_picks() {
@@ -34,11 +39,21 @@ wc.translate=function() {
     }
     function show_trans(i) {
 	var r=wc.r[i]
-	f.output.value=r.text
+	var text=r.text
+	var quality="default_quality"
+	switch(text[0]) {
+	case '+': text=text.substr(1); quality="high_quality"; break;
+	case '*': text=text.substr(1); quality="low_quality"; break;
+	default:
+	    if(r.tree[0]=="?") quality="low_quality"
+	}
+	if(text[0]==" ") text=text.substr(1)
+	f.output.value=text
+	f.output.className=quality
 	if(e) e.innerHTML=r.prob+"<br>"+r.tree
 	wc.current=i
 	if(wc.p /*&& wc.r.length>1*/) show_picks()
-	if(f.speak.checked) wc.speak(r.text,f.to.value)
+	if(f.speak.checked) wc.speak(text,f.to.value)
     }
 
     function trans(text,i) {

src/www/wc.html

@@ -13,6 +13,9 @@ body:target h1, body:target div.modtime { display: none; }
 #extra { color: #666; }
 #pick>* { padding: 0 0.5ex; }
 #speak { display: none; }
+.default_quality { background-color: #ffc; }
+.high_quality { background-color: #cfc; }
+.low_quality { background-color: #fcc; }
 </style>
 </head>
 
@@ -63,7 +66,7 @@ body:target h1, body:target div.modtime { display: none; }
   </div>
 <p>
 <div class=modtime><small>
-<!-- hhmts start -->Last modified: Mon Mar 17 16:28:58 CET 2014 <!-- hhmts end -->
+<!-- hhmts start -->Last modified: Thu Mar 27 14:42:45 CET 2014 <!-- hhmts end -->
 </small></div>
 <script src="js/support.js"></script>
 <script src="js/gftranslate.js"></script>