Improve UI in addquestion template

1 files changed, 57 insertions, 41 deletions

diff --git a/yaksh/templates/yaksh/add_question.html b/yaksh/templates/yaksh/add_question.html
index 692af48..96917da 100644
--- a/yaksh/templates/yaksh/add_question.html
+++ b/yaksh/templates/yaksh/add_question.html
@@ -1,5 +1,6 @@
 {% extends "manage.html" %}
 
+{% block title %} Add Question {% endblock title %}
 {% block pagetitle %} Add Question {% endblock pagetitle %}
 
 {% block css %}
@@ -17,33 +18,45 @@
 <div class="yakshwell container">
 <form action="{{ URL_ROOT }}/exam/manage/addquestion/{{ question.id }}/" method="post" name=frm onSubmit="return autosubmit();" enctype="multipart/form-data">
   {% csrf_token %}
-  <center><table class="table table-responsive-sm">
-  <tr><td>Summary: <td>{{ qform.summary }}{{ qform.summary.errors }}
-  <tr><td> Language: <td> {{qform.language}}{{qform.language.errors}}
-  <tr><td> Type: <td> {{ qform.type }}{{qform.type.errors}}
-  <tr><td>Points:<td><button class="btn-mini" type="button" onClick="increase(frm);">+</button>{{qform.points }}<button class="btn-mini" type="button" onClick="decrease(frm);">-</button>{{ qform.points.errors }} 
-    <tr><td><strong>Rendered: </strong><td><p id='my'></p>
-  <tr><td>Description: <td>{{ qform.description}}  {{qform.description.errors}}
-  <tr><td>Tags: <td>{{ qform.tags }}
-  <tr><td><strong>Rendered Solution: </strong><td><p id='rend_solution'></p>
-  <tr><td>Solution: <td>{{ qform.solution }}
-  <tr><td>Snippet: <td>{{ qform.snippet }}
-  <tr><td>Minimum Time(in minutes):<td> {{ qform.min_time }}
-  <tr><td>Partial Grading: <td>{{ qform.partial_grading }}
-  <tr><td>Grade Assignment Upload:<td> {{ qform.grade_assignment_upload }}
-  <tr><td> File: <td> {{ fileform.file_field }}{{ fileform.file_field.errors }}
-  {% if uploaded_files %}<br><b>Uploaded files:</b><br>Check on delete to delete files,
-  extract to extract files and hide to hide files from student(if required)<br>
-  {% for file in uploaded_files %}
-  <input type="checkbox" name="clear" value="{{file.id}}">&nbsp;delete</input>&nbsp;
-  <input type="checkbox" name="extract" value="{{file.id}}" >{% if file.extract %} dont extract{% else %}
-  extract{% endif %}</input>&nbsp;&nbsp;
-  <input type="checkbox" name="hide" value="{{file.id}}" >{% if file.hide %} show{% else %}
-  hide{% endif %}</input>
-  <a href="{{file.file.url}}">{{ file.file.name }}</a>
-  <br>
-  {% endfor %}{% endif %}
-  </table></center>
+  <center>
+    <table class="table table-responsive-sm">
+      <tr><td>Summary: <td>{{ qform.summary }}{{ qform.summary.errors }}
+      <tr><td> Language: <td> {{qform.language}}{{qform.language.errors}}
+      <tr><td> Type: <td> {{ qform.type }}{{qform.type.errors}}
+      <tr><td>Points:<td><button class="btn-mini" type="button" onClick="increase(frm);">+</button>{{qform.points }}<button class="btn-mini" type="button" onClick="decrease(frm);">-</button>{{ qform.points.errors }}
+      <tr><td><strong>Rendered: </strong><td><p id='my'></p>
+      <tr><td>Description: <td>{{ qform.description}}  {{qform.description.errors}}
+      <tr><td>Tags: <td>{{ qform.tags }}
+      <tr><td><strong>Rendered Solution: </strong><td><p id='rend_solution'></p>
+      <tr><td>Solution: <td>{{ qform.solution }}
+      <tr><td>Snippet: <td>{{ qform.snippet }}
+      <tr><td>Minimum Time(in minutes):<td> {{ qform.min_time }}
+      <tr><td>Partial Grading: <td>{{ qform.partial_grading }}
+      <tr><td>Grade Assignment Upload:<td> {{ qform.grade_assignment_upload }}
+      <tr><td> File: <td>
+                <div class="input-group mb-3">
+                  <div class="custom-file">
+                    {{ fileform.file_field }}{{ fileform.file_field.errors }}
+                      <label class="custom-file-label" for="id_file">
+                          Choose file
+                      </label>
+                  </div>
+                </div>
+      {% if uploaded_files %}
+        <br>
+        <b>Uploaded files:</b><br>
+        Check on delete to delete files,
+        extract to extract files and hide to hide files from student(if required)<br>
+        {% for file in uploaded_files %}
+          <input type="checkbox" name="clear" value="{{file.id}}">&nbsp;delete</input>&nbsp;
+          <input type="checkbox" name="extract" value="{{file.id}}" >{% if file.extract %} dont extract{% else %}extract{% endif %}</input>&nbsp;&nbsp;
+          <input type="checkbox" name="hide" value="{{file.id}}" >{% if file.hide %} show{% else %}hide{% endif %}</input>
+          <a href="{{file.file.url}}">{{ file.file.name }}</a>
+          <br>
+        {% endfor %}
+      {% endif %}
+    </table>
+  </center>
   {% for formset in formsets %}
   <div class="form-group">
       {{ formset.management_form }}
@@ -56,21 +69,24 @@
 
   </div>
   {% endfor %}
-  <p><label for="case_type">Add Test Case:</label> <select id="case_type" name="case_type" onchange="frm.submit()">
-      <option value="" selected="selected">---------</option>
-      <option value="standardtestcase">Standard </option>
-      <option value="stdiobasedtestcase">StdIO </option>
-      <option value="mcqtestcase">MCQ/MCC </option>
-      <option value="hooktestcase">Hook </option>
-      <option value="integertestcase">Integer </option>
-      <option value="stringtestcase"> String </option>
-      <option value="floattestcase"> Float </option>
-      <option value="arrangetestcase">Arrange options </option>
-  </select></p>
+    <div class="form-group">
+      <label for="case_type">Add Test Case:</label>
+      <select id="case_type" class="form-control" name="case_type" onchange="frm.submit()">
+        <option value="" selected="selected">---------</option>
+        <option value="standardtestcase">Standard </option>
+        <option value="stdiobasedtestcase">StdIO </option>
+        <option value="mcqtestcase">MCQ/MCC </option>
+        <option value="hooktestcase">Hook </option>
+        <option value="integertestcase">Integer </option>
+        <option value="stringtestcase"> String </option>
+        <option value="floattestcase"> Float </option>
+        <option value="arrangetestcase">Arrange options </option>
+      </select>
+    </div>
   <center>
-    <button class="btn btn-success" type="submit" name="save_question">Save</button>
-    <button class="btn btn-info" type="button" name="button" onClick='location.replace("{{URL_ROOT}}/exam/manage/questions/");'>Back to Questions</button>
-    <button class="btn btn-danger" type="submit" name="delete_files">Delete Selected Files</button>
+    <button class="btn btn-lg btn-success" type="submit" name="save_question">Save</button>
+    <button class="btn btn-lg btn-info" type="button" name="button" onClick='location.replace("{% url 'yaksh:show_questions' %}");'>Back to Questions</button>
+    <button class="btn btn-lg btn-danger" type="submit" name="delete_files">Delete Selected Files</button>
   </center>
 </form>
 </div>