Improve lesson statistics

5 files changed, 100 insertions, 66 deletions

diff --git a/yaksh/templates/base.html b/yaksh/templates/base.html
index 2cc607c..a108f8c 100644
--- a/yaksh/templates/base.html
+++ b/yaksh/templates/base.html
@@ -54,14 +54,9 @@
   <!-- To automatically render math in text elements, include the auto-render extension: -->
   <script defer src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/contrib/auto-render.min.js" integrity="sha384-mll67QQFJfxn0IYznZYonOWZ644AWYC+Pt2cHqMaRhXVrursRwvLnLaebdGIlYNa" crossorigin="anonymous"
       onload="renderMathInElement(document.body);"></script>
- 
+  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
   <script>
       new WOW().init();
-      $(document).ready(function() {
-        $(".alert").delay(2000).slideUp(200, function() {
-            $(this).alert('close');
-        });
-      });
   </script>
   {% block script %}
   {% endblock %}
diff --git a/yaksh/templates/manage.html b/yaksh/templates/manage.html
index 53d5c72..047f784 100644
--- a/yaksh/templates/manage.html
+++ b/yaksh/templates/manage.html
@@ -65,6 +65,13 @@
     </ul>
     </div>
 </nav>
+<script type="text/javascript">
+    $(document).ready(function() {
+        $(".alert").delay(2000).slideUp(200, function() {
+            $(this).alert('close');
+        });
+    });
+</script>
 
 {% endblock %}
 {% block content %}
diff --git a/yaksh/templates/user.html b/yaksh/templates/user.html
index 4e3974b..7211d5c 100644
--- a/yaksh/templates/user.html
+++ b/yaksh/templates/user.html
@@ -43,7 +43,13 @@
     </nav>
 </div>
 {% endblock %}
-
+<script type="text/javascript">
+    $(document).ready(function() {
+        $(".alert").delay(2000).slideUp(200, function() {
+            $(this).alert('close');
+        });
+    });
+</script>
 
 {% block content %}  
   {% block main %}
diff --git a/yaksh/templates/yaksh/show_lesson_statistics.html b/yaksh/templates/yaksh/show_lesson_statistics.html
index 2bcdd2d..31261f3 100644
--- a/yaksh/templates/yaksh/show_lesson_statistics.html
+++ b/yaksh/templates/yaksh/show_lesson_statistics.html
@@ -102,6 +102,19 @@
                             </span>
                             {% endif %}
                             {{tc.options}}
+                            {% if per_tc_ans %}
+                                {% get_tc_percent tc.id per_tc_ans as percent %}
+                                <div class="progress" style="width: 30%">
+                                {% if percent %}
+                                    <div class="progress-bar bg-success" role="progressbar" aria-valuenow="{{percent}}"
+                                      aria-valuemin="0" aria-valuemax="100" style="width:{{percent}}%">
+                                        <b style="color: white;">{{percent}}%</b>
+                                    </div>
+                                {% else %}
+                                    <b style="color: black;">0%</b>
+                                {% endif %}
+                                </div>
+                            {% endif %}
                             {% elif question.type == "integer" %}
                             <span class="badge badge-pill badge-success">Answer:</span>
                             {{tc.correct}}
@@ -116,33 +129,43 @@
                     </div>
                 </div>
                 <br>
+                <strong>Total Submissions: {{total_count}}</strong>
+                <br><br>
+                {% if question.type != 'mcq' and question.type != 'mcc' %}
+                    <div id="plot_div"></div>
+                    <script type="text/javascript">
+                        var x_data = [];
+                        var y_data = [];
+                        {% for i, j in per_tc_ans.items %}
+                            x_data.push("{{i}}");
+                            y_data.push("{{j}}");
+                        {% endfor %}
+                        var data = [{x: x_data, y: y_data, type: 'bar'}];
+                        var layout = {
+                            title: "Submission records",
+                            xaxis: {title: 'Submitted Value'},
+                            yaxis: {title: 'Number of Submissions'}
+                        };
+                        var config = {responsive: true}
+                        Plotly.newPlot('plot_div', data, layout, config);
+                    </script>
+                    <br><br>
+                {% endif %}
                 {% include "yaksh/paginator.html" %}
                 <table class="table table-responsive">
                     <tr>
                         <th>Sr No.</th>
                         <th>Student Name</th>
                         <th>Email</th>
-                        <th>Latest Answer</th>
-                        <th>Status</th>
+                        <th>Latest Submission</th>
                     </tr>
                     {% for data in objects.object_list %}
                         <tr>
-                            <td>{{forloop.counter}}</td>
+                            <td>{{ forloop.counter0|add:objects.start_index }}</td>
                             <td>{{data.student__first_name}} {{data.student__last_name}}</td>
                             <td>{{data.student__email}}</td>
                             {% get_answers data.toc_id data.student_id as user_answer %}
                             <td>{{ user_answer.0 }}</td>
-                            <td>
-                                {% if user_answer.1 %}
-                                    <span class="badge badge-success">
-                                        Correct
-                                    </span>
-                                {% else %}
-                                    <span class="badge badge-secondary">
-                                        Incorrect
-                                    </span>
-                                {% endif %}
-                            </td>
                         </tr>
                     {% endfor %}
                 </table>
diff --git a/yaksh/templates/yaksh/show_video.html b/yaksh/templates/yaksh/show_video.html
index 6e3cabb..58c7e04 100644
--- a/yaksh/templates/yaksh/show_video.html
+++ b/yaksh/templates/yaksh/show_video.html
@@ -140,9 +140,9 @@
         {% else %}    <!--  Lesson body   -->
             <!-- Lesson Table of contents -->
             <div class="row">
+                {% if lesson.video_path %}
                 <div class="col-md-8">
                     <div class="card-body">
-                    {% if lesson.video_path %}
                         {% with lesson.video_path|video_name as video %}
                             {% if video.1 == "others" %}
                             <video id="player" playsinline controls>
@@ -152,52 +152,50 @@
                             <div id="player" data-plyr-provider="{{video.1}}" data-plyr-embed-id="{{video.0}}"></div>
                             {% endif %}
                         {% endwith %}
-                    {% endif %}
                     </div>
                 </div>
+                {% if toc %}
                 <div class="col-md-4">
-                <div class="card">
-                    <div class="card-header">
-                        <a class="card-link" data-toggle="collapse" href="#toc-collapse">
-                            Table Of Contents&nbsp;<i class="fa fa-angle-down"></i>
-                        </a>
-                    </div>
-                    <div class="collapse show" id="toc-collapse">
-                        <div class="card-body" id="toc">
-                            <table class="table table-responsive">
-                                {% for content in toc %}
-                                    {% with content.get_toc_text as toc_name %}
-                                    <tr>
-                                        <td>
-                                            <a href="#" onclick="select_toc(this);" data-toc="{{content.id}}" data-toc-type="{{content.content}}">
-                                                {{ toc_name }}
-                                            </a>
-                                        </td>
-                                        <td>
-                                            {{content.get_content_display}}
-                                        </td>
-                                        <td id="toc_time_{{content.id}}">
-                                            {{content.time}}
-                                        </td>
-                                        <input type="hidden" id="toc_{{content.id}}" value="{% url 'yaksh:get_marker_quiz' course.id content.id %}" data-content="{{content.content}}"/>
-                                        <input type="hidden" id="toc_desc_{{content.id}}" value="{{content.content_object.description|safe}}" data-content="{{content.content}}"/>
-                                    </tr>
-                                    {% endwith %}
-                                {% empty %}
-                                    <center>
-                                        <span class="badge badge-warning">No Table of contents added</span>
-                                    </center>
-                                {% endfor %}
-                            </table>
+                    <div class="card">
+                        <div class="card-header">
+                            <a class="card-link" data-toggle="collapse" href="#toc-collapse">
+                                Table Of Contents&nbsp;<i class="fa fa-angle-down"></i>
+                            </a>
+                        </div>
+                        <div class="collapse show" id="toc-collapse">
+                            <div class="card-body" id="toc">
+                                <table class="table table-responsive">
+                                    {% for content in toc %}
+                                        {% with content.get_toc_text as toc_name %}
+                                        <tr>
+                                            <td>
+                                                <a href="#" onclick="select_toc(this);" data-toc="{{content.id}}" data-toc-type="{{content.content}}">
+                                                    {{ toc_name }}
+                                                </a>
+                                            </td>
+                                            <td>
+                                                {{content.get_content_display}}
+                                            </td>
+                                            <td id="toc_time_{{content.id}}">
+                                                {{content.time}}
+                                            </td>
+                                            <input type="hidden" id="toc_{{content.id}}" value="{% url 'yaksh:get_marker_quiz' course.id content.id %}" data-content="{{content.content}}"/>
+                                            <input type="hidden" id="toc_desc_{{content.id}}" value="{{content.content_object.description|safe}}" data-content="{{content.content}}"/>
+                                        </tr>
+                                        {% endwith %}
+                                    {% empty %}
+                                        <center>
+                                            <span class="badge badge-warning">No Table of contents added</span>
+                                        </center>
+                                    {% endfor %}
+                                </table>
+                            </div>
                         </div>
                     </div>
                 </div>
-                </div>
+                {% endif %}
+                {% endif %}
                 <div class="col-md-8">
-                    <a href="{% url 'yaksh:next_unit' course.id learning_module.id current_unit.id %}" class="btn btn-info btn-lg" >
-                        Next&nbsp;<i class="fa fa-step-forward"></i>
-                    </a>
-                    <br><br>
                     <div class="card">
                         <div class="card-header"><h3><strong>Lesson Description</strong></h3></div>
                         <div class="card-body">
@@ -227,23 +225,28 @@
                     </div>
                 </div>
             </div>
+            <br>
+            <a href="{% url 'yaksh:next_unit' course.id learning_module.id current_unit.id %}" class="btn btn-info btn-lg" >
+                    Next&nbsp;<i class="fa fa-step-forward"></i>
+            </a>
+            <hr>
         {% endif %}
         {% if state == 'lesson' %}
-            <div>
-                <b><u>Add comment:</u></b>
+            <div class="col-md-8">
+                <b><u>Comments:</u></b>
                 <form action="" method="POST" enctype='multipart/form-data'>
                     <div class="form-group">
                         {% csrf_token %}
-                        {{form}}
+                        {{form.as_p}}
                     </div>
-                    <input type="submit" value="Submit" class="btn btn-success">
+                    <input type="submit" value="Submit" class="btn btn-success btn-lg">
                 </form>
             </div>
         {% endif %}
         <br>
         {% if comments %}
             {% for comment in comments %}
-                <div class="card mb-2">
+                <div class="card mb-2 col-md-8">
                     <div class="card-body p-3">
                         <div class="row mb-3">
                             <div class="col-6">