Minor WMT25 changes

EvalView/static/EvalView/css/direct-assessment-document-mqm-esa.css

@@ -34,8 +34,47 @@
     color: black;
 }
 
-.quotelike {
-    border-left: 5px solid #ddd;
+
+.status-indicator {
+    display: inline-block;
+    position: absolute;
+    left: -35px;
+    top: 10px;
+    font-size: small;
+    width: 20px;
+    margin: 0px;
+    padding: 0px;
+}
+
+.button-reset {
+    display: inline-block;
+    position: absolute;
+    left: -40px;
+    top: 40px;
+    font-size: small;
+    background-color: transparent !important;
+    border: none;
+    width: 20px;
+    margin: 0px;
+    padding: 0px;
+}
+
+.button-submit {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.target-box {
+    position: relative;
+    margin-bottom: -10px;
+}
+
+.language_tag {
+    /* transform: rotate(-90deg); */
+    float: right;
+    color: #777;
+    font-size: small;
 }
 
 .quotelike {
@@ -52,6 +91,7 @@
 
 .item-box {
     margin-bottom: 20px;
+    border-radius: 4px;
 }
 
 .target-text {
@@ -71,6 +111,7 @@
 
 .source-text > audio, .source-text > video {
     width: 100%;
+    max-height: 550px;
 }
 
 .source-text > img {
@@ -126,6 +167,12 @@
     color: black;
 }
 
+#instructions {
+    background-color: #d9edf7;
+    padding: 10px;
+    border-radius: 4px;
+}
+
 .alert_message {
     position: fixed;
     top: 25px;
@@ -190,4 +237,15 @@
 
 .ui-widget-content {
     border: none !important;
+}
+
+
+/* override defaults */
+.alert-info {
+    border: none;
+    color: #257;
+}
+.navbar-fixed-top {
+    position: absolute;
+    top: -2px;
 }

EvalView/static/EvalView/js/direct-assessment-document-mqm-esa.js

@@ -174,8 +174,9 @@ $(document).ready(() => {
     // show submit button only on MQM and not ESA
     $(".button-submit").toggle(MQM_TYPE == "MQM")
 
-    let instructions_show = localStorage.getItem("appraise-instructions-show") == "true"
+    let instructions_show = localStorage.getItem("appraise-instructions-show")
     if (instructions_show == null) instructions_show = true;
+    else instructions_show = instructions_show == "true";
 
     $("#instructions-show").on("click", () => {
         instructions_show = !instructions_show;
@@ -194,9 +195,8 @@ function _all_sentences_scored() {
     return items_left == 0;
 }
 
-function _change_item_status_icon(item_box, icon_name, status_text) {
+function _change_item_status_icon(item_box, icon_name) {
     let icon_box = item_box.find('.status-indicator').removeClass('glyphicon-refresh glyphicon-ok glyphicon-flag');
-    item_box.find(".status-text").text(status_text)
     icon_box.addClass(`glyphicon-${icon_name}`)
 }
 
@@ -210,21 +210,21 @@ function submit_form_ajax(item_box) {
         dataType: 'json',
         beforeSend: function () {
             console.log('Sending AJAX request, item-id=', item_box.data('item-id'));
-            _change_item_status_icon(item_box, 'refresh', "Uploading");
+            _change_item_status_icon(item_box, 'refresh');
         },
         success: function (data) {
             console.log(`Success, saved=${data.saved} next_item=${data.item_id}`);
             if (data.saved) {
-                _change_item_status_icon(item_box, 'ok', "Completed");
+                _change_item_status_icon(item_box, 'ok');
 
             } else {
-                _change_item_status_icon(item_box, 'none', "Upload failed");
+                _change_item_status_icon(item_box, 'warning-sign');
                 _show_error_box(data.error_msg, 10_000);
             }
         },
         error: function (x, s, t) {
             console.log('Error:', x, s, t);
-            _change_item_status_icon(item_box, 'none', "Upload failed");
+            _change_item_status_icon(item_box, 'warning-sign');
             _show_error_box(
                 'An unrecognized error has occured. ' +
                 'Please reload the page or try again in a moment. ',
@@ -513,10 +513,10 @@ class MQMItemHandler {
 
     check_status() {
         if (this.el.attr("data-item-completed") == "True") {
-            _change_item_status_icon(this.el, "ok", "Completed")
+            _change_item_status_icon(this.el, "ok")
             this.el.find(".button-submit").hide()
         } else {
-            _change_item_status_icon(this.el, "flag", "Unfinished")
+            _change_item_status_icon(this.el, "flag")
         }
     }
 

EvalView/templates/EvalView/_instructions-esa.html

@@ -15,15 +15,16 @@
       </li>
       <li><strong>Missing content</strong>: If something is missing, highlight the word <b style="font-family: monospace, monospace;">[MISSING]</b> to mark the error. </li>
       <li><strong>Tip</strong>: Highlight the word or general area of the error (it doesn't need to be exact). Use multiple highlights for different errors.</li>
-      <li><strong>Tip</strong>: Pay particular attention to translation consistency across the whole document.</li>
+      <li><strong>Tip</strong>: Pay particular attention to translation consistency between texts across the whole document.</li>
       <li><strong>Score the translation</strong>: After marking errors, please use the slider and set an overall score based on meaning preservation and general quality:</li>
         <ul>
-          <li>0: <strong>No meaning preserved</strong>: most information is lost.</li>
-          <li>33%: <strong>Some meaning preserved</strong>: major gaps and narrative issues.</li>
-          <li>66%: <strong>Most meaning preserved</strong>: minor issues with grammar or consistency.</li>
-          <li>100%: <strong>Perfect</strong>: meaning and grammar align completely with the source.</li>
+          <li>0: <strong>Broken/poor</strong> translation.</li>
+          <li>33%: <strong>Flawed</strong>: significant issues</li>
+          <li>66%: <strong>Good</strong>: insignificant issues with grammar, fluency, or consistency</li>
+          <li>100%: <strong>Perfect</strong>: meaning and style aligned completely with the source</li>
         </ul>
       </li>
+      <li>Using external tools for annotations (chatbots, LLMs) is not allowed.</li>
     </ul>
   </div>
 </div>

EvalView/templates/EvalView/_slider-mqm-esa.html

@@ -1,9 +1,9 @@
 <div style="width: 95%; margin-left: auto; margin-right: auto;">
-  <table style="color:#777; margin-top:1ex; font-size:x-small; width:100%;">
+  <table style="color:#777; margin-top:1ex; font-size:small; width:100%;">
     <tr>
-      <td class="col-xs-2" style="vertical-align:top;text-align:left;padding-left:0;">0%: No meaning preserved</td>
-      <td class="col-xs-4" style="vertical-align:top;text-align:center;">33%: Some meaning preserved</td>
-      <td class="col-xs-4" style="vertical-align:top;text-align:center;">66%: Most meaning preserved</td>
+      <td class="col-xs-2" style="vertical-align:top;text-align:left;padding-left:0;">0%: Broken/poor</td>
+      <td class="col-xs-4" style="vertical-align:top;text-align:center;">33%: Flawed</td>
+      <td class="col-xs-4" style="vertical-align:top;text-align:center;">66%: Good</td>
       <td class="col-xs-4" style="vertical-align:top;text-align:right;padding-right:0;">100%: Perfect</td>
     </tr>
   </table>

EvalView/templates/EvalView/direct-assessment-document-mqm-esa.html

@@ -35,14 +35,13 @@
     </table>
 </div>
 
-<div class="question-box" id="tutorial-text" style="display: none; font-size: large; font-weight: bold;">
-    In the first two pages we will walk you through the tutorial.
-    It is available only in English to German but knowledge of German is not needed.
-    If you already went through the tutorial you can
-    <input type="button" value="skip the tutorial" id="skip-tutorial">.
-</div>
 
 <div class="question-box" id="instructions">
+    <div class="question-box" id="tutorial-text" style="display: none; font-weight: bold;">
+        In the first two pages we will walk you through the tutorial.
+        If you already went through the tutorial you can
+        <input type="button" value="skip the tutorial" id="skip-tutorial">.
+    </div>
     {% if guidelines %}
     <p>{{ guidelines }}</p>
     {% endif %}
@@ -81,11 +80,18 @@
 
         <div class="source-box">
             <div class="tutorial-text"></div>
+            <div class="language_tag_holder">
+                <div class="language_tag">{{source_language}}</div>
+            </div>
+
             <div class="source-text">
                 <!-- NOTE: "safe" means that HTML can be injected, which is needed for video! -->
                 {{ item.sourceText|safe }}
             </div>
-
+            <hr style="border-top: 2pt solid #ccc; margin: 0;">
+            <div class="language_tag_holder">
+                <div class="language_tag">{{target_language}}</div>
+            </div>
             <div class="target-text">
                 {{item.targetText}}
             </div>
@@ -95,23 +101,12 @@
             <div class="row esa_slider">
                 {% include 'EvalView/_slider-mqm-esa.html' %}
             </div>
-
-            <table class="row action-box">
-                <tr>
-                    <td style="width:30%;text-align:left;">
-                        <button class="btn button-reset" accesskey="2" type="reset">Reset</button>
-                    </td>
-                    <td style="width: 40%; text-align: center;">
-                        <span class="status-indicator glyphicon glyphicon-ok"></span>
-                        <span class="status-text">Item status</span>
-                    </td>
-                    <td style="width:30%;text-align:right;">
-                        <button class="btn button-submit btn-primary" name="next_button" accesskey="1" type="submit"
-                            value="{{ item.itemID }}"> Mark complete
-                        </button>
-                    </td>
-                </tr>
-            </table>
+            <span class="status-indicator glyphicon glyphicon-ok"></span>
+            <button class="button-reset glyphicon glyphicon-trash" accesskey="2" type="reset"></button>
+
+            <button class="btn button-submit btn-primary" name="next_button" accesskey="1" type="submit"
+                value="{{ item.itemID }}"> Mark complete
+            </button>
         </div>
     </form>
 </div>
@@ -143,7 +138,7 @@
     id="button-next-doc-fake"
     title="Please first complete all items in the document (error spans + scores)."
 >
-    Continue to next document (unavailable)
+    Continue to next document <span style="font-size: 12pt;">(finish all segments first)</span>
 </button>
 
 {% endblock %}