diff options
| -rw-r--r-- | help.inc.php | 20 | ||||
| -rw-r--r-- | index.php | 14 | ||||
| -rw-r--r-- | interface.php | 14 | ||||
| -rw-r--r-- | js/common.js | 7 | ||||
| -rw-r--r-- | js/lfpe.js | 12 | ||||
| -rw-r--r-- | static/main.css | 14 |
6 files changed, 57 insertions, 24 deletions
diff --git a/help.inc.php b/help.inc.php index dc60adf..1278e5f 100644 --- a/help.inc.php +++ b/help.inc.php @@ -1,3 +1,17 @@ -<p>Press the 'Next' button to submit your post-edit and to request the next segment for translation. -Alternatively, just press enter when you finished the post-edit and the 'Target' text area is in focus. Warning: Past post-edits can not be altered. The session can be stopped at any time and continued later; However, if you have to pause your session, wait until the activity notification disappears and then press 'Pause', as we are collecting timing information. You may also just reload this site and re-request the next segment upon your return. Please only use <em>one</em> browser window at once. Going back to earlier examples is not possible, please take great care when interacting with the system.<br/> -The interface was only tested with Firefox 31.</p> +<p style="margin-top:-1em">Press the 'Next' button to <strong>submit</strong> your post-edit and to request the next segment for post-edition. +Alternatively, in the textual interface, you may just press return when you finished the post-edit ('Target' text area is in focus).</p> +<p>The session can be stopped at any time and continued later; However, if you have to pause your session, wait until the activity notification disappears and then press 'Pause', as we are collecting timing information. You may also just reload this site and re-request the next segment.</p> +<p>Please only use a single browser window at once. Going back to earlier examples is not possible, please take great care when interacting with the system.</p> + +<p><strong>Instructions for graphical interface:</strong></p> +<ul> + <li><strong>Reordering of target phrases:</strong> Drag and drop the phrase (box).</li> + <li><strong>Adding/removing links:</strong> Select a source phrase by clicking on its box, then click on a target phrase (click selected source phrase again to cancel linking).</li> + <li><strong>Edit text:</strong> Double click on text, click outside once to stop editing.</li> + <li><strong>Adding target phrases:</strong> Click '+' button to add a new phrase.</li> + <li><strong>Removing target phrases:</strong> Drag phrase onto left-hand red box.</li> + <li><strong>Reset:</strong> Click 'Reset' button to start from scratch.</li> +</ul> + +<p>The interface was tested with Firefox 31 and 38.</p> + @@ -2,8 +2,8 @@ <head> <meta charset="utf-8" /> <title>Post-editing application</title> - <script src="lfpe.js"></script> - <link rel="stylesheet" type="text/css" href="static/lfpe.css" /> + <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" charset="utf-8"></script> + <link rel="stylesheet" type="text/css" href="static/main.css" /> </head> <body onload=""> @@ -11,11 +11,17 @@ <?php include("header.php"); ?> <form method="get" action="interface.php"> - Please enter your session key: <input type="text" id="key" name="key" /> + <strong>Please enter your session key:</strong> <input type="text" id="key" name="key" /> + Session type: + <select> + <option value="t">textual</option> + <option value="g">graphical</option> +</select> + <input type="submit" value="Submit" /> </form> -<div class="small" style="margin-top:10em"> +<div class="small" style="background:#eee;margin: 5em 0 5em 0;padding:.5em; max-width:20%"> <p>Beta test: <select class="small"> <option value="beta_test_A" onclick="document.getElementById('key').value=this.value;">A</option> diff --git a/interface.php b/interface.php index 1484316..1f20a9b 100644 --- a/interface.php +++ b/interface.php @@ -19,8 +19,8 @@ <!-- Derivation editor --> <div id="derivation_editor"> <div id="holder"><img style="margin:.4em" src="static/placeholder.png" /></div> - <input type="button" value="+" onClick="DE_add_object()" /> - <input type="button" value="Reset" onClick="DE_init();" /> + <input type="button" value="+" onclick="DE_add_object()" /> + <input type="button" value="Reset" onclick="DE_init();" /> </div> <!-- /Derivation editor--> @@ -48,14 +48,14 @@ <!-- Buttons --> <div> <button id="pause_button" type="button" onclick="pause()">Pause</button> - <button id="next" type="button" onclick="Next()">Start/Continue</button> + <button id="next" type="button" onclick="Next();">Start/Continue</button> <span id="status"><strong>Working, please wait for next segment</strong> <img src="static/ajax-loader-large.gif" width="20px" /></span> </div> <!-- /Buttons --> <!-- Session overview --> <div id="overview_wrapper"> -<strong>Session overview</strong> +<p style="margin:.5em;margin-bottom:.25em"><strong>Session overview</strong></p> <table id="overview"> <?php $SESSION_DIR="/fast_scratch/simianer/lfpe/sessions"; @@ -74,7 +74,7 @@ foreach($db->raw_source_segments as $s) { if ($i <= $db->progress) { $translation = $db->post_edits_raw[$i]; } - echo "<tr class='".$class."' id='seg_".$i."'><td>".($i+1).".</td><td>".$s."</td><td class='seg_text' id='seg_".$i."_t'>".$translation."</td></tr>"; + echo "<tr class='".$class."' id='seg_".$i."'><td class='num'>".($i+1).".</td><td>".$s."</td><td class='seg_text' id='seg_".$i."_t'>".$translation."</td></tr>"; $i += 1; } ?> @@ -83,7 +83,7 @@ foreach($db->raw_source_segments as $s) { <!-- /Session overview --> <!-- Help --> -<button id="help_button" onclick="toggleDisplay(document.getElementById('help'));">Help</button> +<button id="help_button" onclick="$('#help').toggle('blind')">Help</button> <div id="help" style="display:none"> <?php include("help.inc.php"); ?> <p class="xtrasmall">Support: <a href="mailto://simianer@cl.uni-heidelberg.de">Mail</a></p> @@ -91,6 +91,8 @@ foreach($db->raw_source_segments as $s) { </div> <!-- /Help --> +<p class="small" style="text-align:right"><a href="#">^</a></p> + <?php include("footer.php"); ?> </body> diff --git a/js/common.js b/js/common.js index 11dcdba..560f63d 100644 --- a/js/common.js +++ b/js/common.js @@ -20,12 +20,13 @@ function removeClass(node, className) * * */ -function toggleDisplay(node) +function toggleDisplay(id) { + node = $(id); if (node.style.display=='none') { - node.style.display = 'block'; + node.fadeIn(); } else { - node.style.display = 'none'; + node.fadeOut(); } return false; @@ -89,7 +89,8 @@ function working() var last_post_edit = document.getElementById("last_post_edit"); // show 'working' message - status.style.display = "block"; + //status.style.display = "block"; + $("#status").fadeToggle(); // disable button and textarea button.setAttribute("disabled", "disabled"); @@ -115,7 +116,8 @@ function not_working() var last_post_edit = document.getElementById("last_post_edit"); // hide 'working' message - status.style.display = "none"; + //status.style.display = "none"; + $("#status").fadeToggle(); // enable buttons document.getElementById("next").removeAttribute("disabled"); @@ -188,7 +190,8 @@ function Next() var l = document.getElementById("oov_fields").children.length; for (var i=0; i<l; i++) { document.getElementById("oov_fields").children[0].remove(); } - $("#oov_form").css("display", "none"); + //$("#oov_form").css("display", "none"); + $("#oov_form").toggle("blind"); next_url += "&correct="+encodeURIComponent(src.join("\t")) +"%20%7C%7C%7C%20"+encodeURIComponent(tgt.join("\t")) // ??? @@ -259,7 +262,8 @@ function Next() } oov_correct.value = true; - $("#oov_form").css("display", "block"); + //$("#oov_form").css("display", "block"); + $("#oov_form").toggle("blind"); not_working(); // translation mode diff --git a/static/main.css b/static/main.css index c6220e3..84180c4 100644 --- a/static/main.css +++ b/static/main.css @@ -19,13 +19,17 @@ button { .small { font-size:.8em } .xtrasmall { font-size:.6em } +a { + color: #000; + text-decoration: underline +} + div#wrapper { margin: 2em; padding: 1em } span#status { - display: none; float: right } @@ -50,7 +54,7 @@ span#status { /* Derivation editor */ #derivation_editor input { - background: #ccc; + background: #eee; font-size: 60%; padding: .4em } @@ -60,8 +64,10 @@ span#status { div#overview_wrapper { margin-top:1em } table#overview { font-size:.8em } table#overview td.seg_text { width: 45% } -table#overview td { border-bottom: 1px solid #000 } -table#overview .doc_title { background-color: #eee } +table#overview td { border-bottom: 1px solid #ccc; border-left:1px solid #ccc; padding: .25em } +table#overview tr:hover { background: #ccc } +table#overview .doc_title { background-color: #eee; font-style:italic } +table#overview td.num { text-align:right; font-style:italic} /* /Session overview */ /* Header */ |