[html5] grade

Viewer

  1. {% load static %}
  2. {% block css %}
  3. <link rel="stylesheet" type="text/css" href="{% static 'semantic/dist/components/semantic-ui-alerts.css' %}">
  4.  
  5. {% endblock %}
  6. {% block manageEval %}
  7. <div style="height:45em;overflow:auto;overflow-x:hidden;width:100%;">
  8.     <h3 class="ui dividing header">Manage Evaluations</h3>
  9.  
  10.     <form class="ui form" id="manageEval" method="post" action="/ocms/{{ curriculum.course_code }}/submit_marks">
  11.         {% csrf_token %}
  12.         
  13.         <div style="overflow-x:hidden; margin-top:15px; margin-right:0.75em;">
  14.             <!-- <div class="ui fluid input">
  15.                 <input type="text" id="usernameSearchInput" placeholder="Search by Roll No." onkeyup="searchByUsername()">
  16.             </div> -->
  17.             <table class="ui fixed single line celled table" id="grading_table">
  18.                     <thead>
  19.                         <tr>
  20.                             <th style="width: 25%;">S.No.</th>
  21.                             <th style="width: 25%;">Roll No</th>
  22.                             <th style="width: 25%;">Total Marks (%)</th>
  23.                             <th style="width: 25%;">
  24.                                 <div style="float:left; margin-top:8px;">Grade</div>
  25.                                 <div class="ui button green" style="float:right;" id="generate_btn"> Generate </div>
  26.                             </th>
  27.                         </tr>
  28.                     </thead>
  29.                     <tbody id="grade_table">
  30.                         {% if student_grades %}
  31.                         {% for row in student_grades %}
  32.                         <tr>
  33.                             <td>{{forloop.counter}}</td>
  34.                             <td>
  35.                                 <input type="text" readonly name="stu_marks" id="roll_no{{forloop.counter}}" value="{{row.student_id.id.user.username}}" />
  36.                             </td>
  37.                             <td>
  38.                                 <input type="number" name="stu_marks" id="total_marks{{forloop.counter}}" value="{{row.total_marks}}" placeholder="Enter total marks" />
  39.                             </td>
  40.                             <td>
  41.                                 <input name="stu_marks" id="grade{{forloop.counter}}" value="{{row.grade}}" placeholder="Add manually" />
  42.                             </td>
  43.                         </tr> 
  44.                         {% endfor %} 
  45.                         {% else%}
  46.                         {% for stu in registered_students %}
  47.                         <tr>
  48.                             <td>{{forloop.counter}}</td>
  49.                             <td>
  50.                                 <input type="text" readonly name="stu_marks" id="roll_no{{forloop.counter}}" value="{{stu.student_id.id.user.username}}" />
  51.                             </td>
  52.                             <td>
  53.                                 <input type="number" name="stu_marks" id="total_marks{{forloop.counter}}" value="" placeholder="Enter total marks" />
  54.                             </td>
  55.                             <td>
  56.                                 <input name="stu_marks" id="grade{{forloop.counter}}" value="" placeholder="Add manually" />
  57.                             </td>
  58.                         </tr> 
  59.                         {% endfor %} 
  60.                         {% endif %}                     
  61.                     </tbody>
  62.                 </table>
  63.                 <input type="button" class="ui primary button" id="submit_grades" style ="float:right;" value="Upload">
  64.             </div>
  65.         </form>
  66. </div>
  67.  
  68. <script type="text/javascript" src="{% static 'globals/js/jquery.min.js' %}"></script>
  69. <script type="text/javascript" src="{% static 'globals/js/semantic.min.js' %}"></script>
  70. <script type="text/javascript" src="{% static 'semantic/dist/components/semantic-ui-alerts.js' %}"></script>
  71.  
  72. <script type="text/javascript">
  73.     let O_Lower = {{gradingscheme_grades.O_Lower}};
  74.     let O_Upper = {{gradingscheme_grades.O_Upper}};
  75.     let A_Lower = {{gradingscheme_grades.A_Lower}};
  76.     let A_Upper = {{gradingscheme_grades.A_Upper}};
  77.     let A_plus_Lower = {{gradingscheme_grades.A_plus_Lower}};
  78.     let A_plus_Upper = {{gradingscheme_grades.A_plus_Upper}};
  79.     let B_Lower = {{gradingscheme_grades.B_Lower}};
  80.     let B_Upper = {{gradingscheme_grades.B_Upper}};
  81.     let B_plus_Lower = {{gradingscheme_grades.B_plus_Lower}};
  82.     let B_plus_Upper = {{gradingscheme_grades.B_plus_Upper}};
  83.     let C_Lower = {{gradingscheme_grades.C_Lower}};
  84.     let C_Upper = {{gradingscheme_grades.C_Upper}};
  85.     let C_plus_Lower = {{gradingscheme_grades.C_plus_Lower}};
  86.     let C_plus_Upper = {{gradingscheme_grades.C_plus_Upper}};
  87.     let D_Lower = {{gradingscheme_grades.D_Lower}};
  88.     let D_Upper = {{gradingscheme_grades.D_Upper}};
  89.     let D_plus_Lower = {{gradingscheme_grades.D_plus_Lower}};
  90.     let D_plus_Upper = {{gradingscheme_grades.D_plus_Upper}};
  91.     let F_Lower = {{gradingscheme_grades.F_Lower}};
  92.     let F_Upper = {{gradingscheme_grades.F_Upper}};
  93.     
  94.     const generate_btn = document.getElementById('generate_btn');
  95.     generate_btn.addEventListener('click', function() {
  96.         // Your code to execute when the input is clicked
  97.         let num = 1;
  98.         while (document.getElementById('total_marks'+num.toString())) {
  99.             let marks = document.getElementById('total_marks'+num.toString());
  100.             let grade = document.getElementById('grade'+num.toString());
  101.             if (marks.value >= O_Lower && marks.value <= O_Upper) {
  102.                 grade.value = "O";
  103.             } 
  104.             else if (marks.value >= A_plus_Lower && marks.value <= A_plus_Upper) {
  105.                 grade.value = "A+";
  106.             }
  107.             else if (marks.value >= A_Lower && marks.value <= A_Upper) {
  108.                 grade.value = "A";
  109.             }
  110.             else if (marks.value >= B_plus_Lower && marks.value <= B_plus_Upper) {
  111.                 grade.value = "B+";
  112.             }
  113.             else if (marks.value >= B_Lower && marks.value <= B_Upper) {
  114.                 grade.value = "B";
  115.             }
  116.             else if (marks.value >= C_plus_Lower && marks.value <= C_plus_Upper) {
  117.                 grade.value = "C+";
  118.             }
  119.             else if (marks.value >= C_Lower && marks.value <= C_Upper) {
  120.                 grade.value = "C";
  121.             }
  122.             else if (marks.value >= D_plus_Lower && marks.value <= D_plus_Upper) {
  123.                 grade.value = "D+";
  124.             }
  125.             else if (marks.value >= D_Lower && marks.value <= D_Upper) {
  126.                 grade.value = "D";
  127.             }
  128.             else if (marks.value >= F_Lower && marks.value <= F_Upper) {
  129.                 grade.value = "F";
  130.             }
  131.             
  132.             num = num + 1;
  133.         }
  134.     });
  135.  
  136.     function successAlert(data){
  137.       $.suiAlert({
  138.       title: 'Success',
  139.       description: data,
  140.       type: 'success',
  141.       time: '3',
  142.       position: 'top-center',
  143.       });
  144.     }
  145.     
  146.     
  147.     function searchByUsername() {
  148.         var input, filter, table, tr, td, i, txtValue;
  149.         input = document.getElementById("usernameSearchInput");
  150.         filter = input.value.toUpperCase();
  151.         table = document.getElementById("grading_table");
  152.         tr = table.getElementsByTagName("tr");
  153.         for (i = 0; i < tr.length; i++) {
  154.             td = tr[i].getElementsByTagName("td")[1];
  155.             if (td) {
  156.                 txtValue = td.getElementsByTagName("input")[0].value;
  157.                 if (txtValue.toUpperCase().indexOf(filter) > -1) {
  158.                     tr[i].style.display = "";
  159.                 } else {
  160.                     tr[i].style.display = "none";
  161.                 }
  162.             }
  163.         }
  164.     }
  165.  
  166.     // Function to handle form submission
  167.     function submitForm() {
  168.         var form = document.getElementById("manageEval");
  169.         var formData = new FormData(form);
  170.         
  171.         var xhr = new XMLHttpRequest();
  172.         xhr.open(form.method, form.action, true);
  173.         xhr.onload = function () {
  174.             if (xhr.status >= 200 && xhr.status < 300) {
  175.                 successAlert('Success: ' + xhr.responseText); // Display success message
  176.             } else {
  177.                 alert('Error: ' + xhr.statusText); // Display error message
  178.             }
  179.         };
  180.         xhr.onerror = function () {
  181.             alert('Request failed'); // Display request failure message
  182.         };
  183.         xhr.send(formData);
  184.     }
  185.  
  186.     // Attach submitForm function to the click event of the submit button
  187.     document.getElementById("submit_grades").addEventListener("click", submitForm);
  188. </script>
  189.  
  190.  
  191.  
  192. {% endblock %}
  193.  

Editor

You can edit this paste and save as new:


File Description
  • grade
  • Paste Code
  • 19 Apr-2024
  • 8.55 Kb
You can Share it: