Commit a2f39ada authored by D.H.D. Nguyen's avatar D.H.D. Nguyen
Browse files

update templates

parent e02c09ab

project/templates/start.html

+1 −2
Original line number Diff line number Diff line
@@ -22,13 +22,12 @@ 
  <div class="form-group col-md-12">

    <div class=" alert alert-success" role="alert">

    	<h1> <b> Welcome! </b> </h1>

      <h4>This is a simple website using <strong> Best-Worst-Scaling</strong></a> for items evaluation. </h4>

      <h4>This is a simple website using <a href="https://saifmohammad.com/WebPages/BestWorst.html" target="_blank" rel="noopener noreferrer" style="text-decoration-line: underline; text-decoration-style: dotted; color: darkgreen;"> <strong> Best-Worst-Scaling</strong></a> for evaluating items. </h4>

      <hr>

      <ul>

        <li>If you come here as a user who wants to get your datas through this method evaluated, click on <strong> User</strong>-Button! </li>

        <li> If you are an annotator who wants to submit the annotation for a given project, click on <strong> Annotator</strong>-Button!</li>

      </ul>

      <a href="https://saifmohammad.com/WebPages/bwsVrs.html"> More about Best-Worst-Scaling</a>

    </div>

  </div>

project/templates/user/index.html

+13 −9
Original line number Diff line number Diff line
@@ -15,8 +15,6 @@ 
	</li>

  </ul>

</div>

<br>

<h2 ></h2>

{% endblock %}



{% block content %}
@@ -38,18 +36,17 @@ 
		{% if messages %}

		  <ul class=flashes>

		  {% for message in messages %}

			<div aria-live="polite" role="status" aria-atomic="true" class="toast col-md-2" style="position: absolute; top: 0; right: 20%;">

			<div role="alert" aria-live="assertive" aria-atomic="true" class="toast col-md-2" data-autohide="false" style="position: absolute; top: 0; right: 20%;">

			 

			  <div class="toast-header">

			    <strong class="mr-auto">Admin</strong>

			    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast col-md-2" aria-label="Close"> <span aria-hidden="true">&times;</span> </button>

			    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close"> <span aria-hidden="true">&times;</span> </button>

			  </div>

			  <div class="toast-body">

			    <font color="red"> {{ message }} </font>

			  </div>

			  

			</div>

			  

		  {% endfor %}

		  </ul>

		{% endif %}
@@ -68,15 +65,22 @@ 
	 </div>	   

	</div>

  </div>





</div>



 

{% endblock %}



{% block scripts %}

{{super()}}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

  	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

  	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

	<script>

  		$('.toast').toast('show');

  	</script>

{% endblock %}

project/templates/user/login.html

+13 −4
Original line number Diff line number Diff line
@@ -27,18 +27,18 @@ 
      {% if messages %}

      <ul class=flashes>      

        {% for message in messages %}

          

            <div class="toast col-sm-3" role="alert" style="position: absolute; top: 16%; left: -2%;">

          <div class="col-sm-3">

            <div class="toast col-sm-3" role="alert" data-autohide="true" style="position: absolute; top: 16%; left: -2%;">

              <div class="toast-header">

                <strong class="mr-auto">Admin</strong>

                <button type="button" class="ml-2 mb-1 close" data-dismiss="toast col-md-2" aria-label="Close"> <span aria-hidden="true">&times;</span> </button>

                <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close"> <span aria-hidden="true">&times;</span> </button>

              </div>



              <div class="toast-body">

               <font color="red"> {{ message }} </font>

              </div>

            </div>

          

          </div>

        {% endfor %}  

      

      </ul>
@@ -85,4 +85,13 @@ 
{% block scripts %}

{{super()}}

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

  <script type="text/javascript">

      $(document).ready(function(){

      $('.toast').toast('show');

    });

  </script>



{% endblock %}

project/templates/user/project.html

+1 −1
Original line number Diff line number Diff line
@@ -44,7 +44,7 @@ 
	<ul>

	  <li><p class="mb-0"> You can get your results including a file with scores for each item and a report about the whole annotation process at any time as long as the process starts. </p> </li>

	  {% if mturk %}

	    <li> <p> Click on <strong>Mechanical Turk</strong>-Button and type the project name in search box to find your uploaded project on Mechanical Turk </p> </li>

	    <li> <p class="mb-0"> Click on <strong>Mechanical Turk</strong>-Button and type the project name in search box to find your uploaded project on Mechanical Turk </p> </li>

	  {% else %}

		<li> <p class="mb-0"> Click on <strong>Keywords</strong>-Button to get the access keywords for annotators to your data survey. </p> </li>

	  {% endif %}

project/templates/user/upload-project.html

+21 −8
Original line number Diff line number Diff line
@@ -26,13 +26,13 @@ 
	  <h2 class="alert-heading"> <b> New project </b> </h2>

	  <hr>

	  <ul>

		  <li>You can upload your project here. You must fill in all fields (<b>project name </b> is optional). 'best' and 'worst' must not have the same definitions, or you can't submit your project.</li>

		  <li>You can upload your project here. You must fill in all fields (<em>project name </em> is optional). <b>best</b> and <b>worst</b> must not have the same definitions, or you can't submit your project.</li>

		  <li> Every uploaded file must have the format, in which each line contains only one item!. You'd better give each of your project a unique name!</li>

	  </ul>

	  <hr>

	  You have 2 options to have annotators:

	  <ul>

	  	<li> <strong>Option 1 </strong>: Local annotator system - you will get the number of keywords corresponding to the number of annotators you require. Who annotate your project is of your choice, give each of them a keyword so that they can finish the annotations!</li>

	  	<li> <strong>Option 1 </strong>: Local annotator system - you will get the number of keywords corresponding to the number of annotators you require. Who annotate your project is of your choice, give each of them a keyword and redirect them to our <a href="{{url_for('start')}}" style="color: darkgreen; text-decoration-line: underline; text-decoration-style: dotted;"> homepage </a> so that they can finish the annotations!</li>

	  	<li> <strong>Option 2 </strong>: Mechanical Turk - your annotations will be done on this platform with anonymous annotators.</li>

	  </ul>

	</div>
@@ -49,6 +49,7 @@ 
			</div>

			<div class="form-group col-md-4">

				{{wtf.form_field(form.upload, class='')}}

				<span class="glyphicon glyphicon-info-sign" href="" data-toggle="popover" data-trigger="hover" title="<strong> example.txt </strong>" data-content="amazing<br />interesting<br />boring<br />..." style="position: absolute; left: 45%; bottom: 65%; color: darkgreen;" data-html="true">

			</div>

		</div>
@@ -68,7 +69,8 @@ 
		    </div>



		    <div class="form-group col-md-4">

	  			<label class="custom-control-label" data-toggle="tooltip" title="Mechanical Turk is an Amazon crowdsourcing platform" for="defaultChecked2">Mechanical Turk (<a href="https://www.mturk.com/" >read more</a>)</label>  {{wtf.form_field(form.mturk)}} <a href=""  data-toggle="tooltip" title="if you choose this option, you must change the default values of the forms below" style="position: absolute; left: 70%; bottom: 15%">(Hint)</a> 

	  			<label class="custom-control-label" data-toggle="tooltip" title="Mechanical Turk is an Amazon crowdsourcing platform" for="defaultChecked2">Mechanical Turk (<a href="https://www.mturk.com/" target="_blank" rel="noopener noreferrer">read more</a>)</label>  {{wtf.form_field(form.mturk)}} 

	  			<span href=""  data-toggle="tooltip" title="If you choose this option, you must change the default values of the forms below" style="position: absolute; left: 48%; bottom: 10%; color: darkgreen;" class="glyphicon glyphicon-info-sign" style="size: 100pt"/>

			</div>

		</div>
@@ -78,6 +80,7 @@ 
		<div class="form-row">

			<div class="form-group col-md-6">

				{{wtf.form_field(form.aws_access_key_id,  class='form-control',  placeholder='your_aws_access_key_id')}}

				<a href="https://docs.aws.amazon.com/IAM/latest/UserGuide/id_credentials_access-keys.html" data-toggle="tooltip" title="Click here to get information how to get your IAM AWS data" target="_blank" rel="noopener noreferrer" style="position: absolute; left: 30%; bottom: 73%; color: darkgreen;"> <span class="glyphicon glyphicon-info-sign"></span></a>

			</div>



			<div class="form-group col-md-6">
@@ -92,12 +95,13 @@ 


			<div class="form-group col-md-2">

				{{wtf.form_field(form.reward, class='form-control', placeholder='in $')}}

				<span href="" data-toggle="tooltip" title="How much will you pay an annotator (in $) for annotating each HIT?" style="position: absolute; bottom: 73%; left: 70%; color: darkgreen;" class="glyphicon glyphicon-info-sign"/></a>

			</div>



			<div class="form-group col-md-2">



				{{wtf.form_field(form.lifetime, class='form-control', placeholder='0')}}

				<p class="input-hint" style="position: absolute; bottom: 60%; left: 55%"> <a href="" data-toggle="tooltip" title="How long does this project stay available on Mechanical Turk? Accept only e.g. 1, 2, ... (no 1.5)">(Hint)</a></p>

				<span href="" data-toggle="tooltip" title="How long does this project stay available on Mechanical Turk? Accept only e.g. 1, 2, ... (no 1.5)" style="position: absolute; bottom: 73%; left: 55%; color: darkgreen;" class="glyphicon glyphicon-info-sign"/>

			</div>



			<div class="form-group col-md-1">
@@ -106,7 +110,7 @@ 


			<div class="form-group col-md-2">

				{{wtf.form_field(form.hit_duration, class='form-control', placeholder='0')}}

				<p class="input-hint" style="position: absolute; bottom: 60%; left: 50%"> <a href="" data-toggle="tooltip" title="How much time does each annotator have for annotating a HIT if he accepts it? Accept only e.g. 1, 2, ... (no 1.5)">(Hint)</a></p>

				<span href="" data-toggle="tooltip" title="How much time does each annotator have for annotating a HIT if he accepts it? Accept only e.g. 1, 2, ... (no 1.5)" style="position: absolute; bottom: 73%; left: 50%; color: darkgreen;" class="glyphicon glyphicon-info-sign"/>

			</div>



			<div class="form-group col-md-1">
@@ -130,9 +134,18 @@ 
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>

	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

	{{super()}}



	<script type="text/javascript">

		$(document).ready(function(){

			$('[data-toggle="tooltip"]').tooltip();	

	}); </script>

		}); 

	</script>



	<script>

		$(document).ready(function(){

		    $('[data-toggle="popover"]').popover();   

		});

	</script>



{% endblock %}