Change in templates and js

- Change course status template to view per student course progress
- Change student dashboard to show progress for course and modules.
- Add ajax to get per student data for course progress

6 files changed, 226 insertions, 206 deletions

diff --git a/yaksh/static/yaksh/js/course.js b/yaksh/static/yaksh/js/course.js
index 1c64a3e..36e565a 100644
--- a/yaksh/static/yaksh/js/course.js
+++ b/yaksh/static/yaksh/js/course.js
@@ -42,7 +42,7 @@ $(function() {
         max_height: 200,

         height: 200

     });

-  });

+});

 

 $("#send_mail").click(function(){

     var subject = $("#subject").val();

@@ -66,79 +66,38 @@ $("#send_mail").click(function(){
     return status;

 });

 

-// Download course status as csv

-function exportTableToCSV($table, filename) {

-    var $headers = $table.find('tr:has(th)')

-        ,$rows = $table.find('tr:has(td)')

-

-        // Temporary delimiter characters unlikely to be typed by keyboard

-        // This is to avoid accidentally splitting the actual contents

-        ,tmpColDelim = String.fromCharCode(11) // vertical tab character

-        ,tmpRowDelim = String.fromCharCode(0) // null character

-

-        // actual delimiter characters for CSV format

-        ,colDelim = '","'

-        ,rowDelim = '"\r\n"';

 

-        // Grab text from table into CSV formatted string

-        var csv = '"';

-        csv += formatRows($headers.map(grabRow));

-        csv += rowDelim;

-        csv += formatRows($rows.map(grabRow)) + '"';

-

-        // Data URI

-        var csvData = 'data:application/csv;charset=utf-8,' + encodeURIComponent(csv);

+// Table sorter for course details

+$("table").tablesorter({});

 

-    // For IE (tested 10+)

-    if (window.navigator.msSaveOrOpenBlob) {

-        var blob = new Blob([decodeURIComponent(encodeURI(csv))], {

-            type: "text/csv;charset=utf-8;"

+// Get user course completion status

+$('.user_data').click(function() {

+    var data = $(this).data('item-id');

+    course_id = data.split("+")[0];

+    student_id = data.split("+")[1];

+    var status_div = $("#show_status_"+course_id+"_"+student_id);

+    if(!status_div.is(":visible")){

+        var get_url = window.location.protocol + "//" + window.location.host +

+                  "/exam/manage/get_user_status/" + course_id + "/" + student_id;

+        $.ajax({

+            url: get_url,

+            timeout: 15000,

+            type: "GET",

+            dataType: "json",

+            contentType: 'application/json; charset=utf-8',

+            success: function(data) {

+                    status_div.toggle();

+                    status_div.html(data.user_data);

+                },

+            error: function(jqXHR, textStatus) {

+                alert("Unable to get user data. Please Try again later.");

+            } 

         });

-        navigator.msSaveBlob(blob, filename);

     } else {

-        $(this)

-            .attr({

-                'download': filename,'href': csvData

-        });

-    }

-

-    function formatRows(rows){

-        return rows.get().join(tmpRowDelim)

-            .split(tmpRowDelim).join(rowDelim)

-            .split(tmpColDelim).join(colDelim);

-    }

-    // Grab and format a row from the table

-    function grabRow(i,row){

-        var $row = $(row);

-        var $cols = $row.find('td'); 

-        if(!$cols.length) $cols = $row.find('th');

-

-        return $cols.map(grabCol)

-                    .get().join(tmpColDelim);

+        status_div.toggle();

     }

-    // Grab and format a column from the table 

-    function grabCol(j,col){

-        var $col = $(col),

-            $text = $col.text();

-

-        return $text.replace('"', '""').replace("View Unit Status", '').replace("View Units", ""); // escape double quotes

-

-    }

-}

-

-

-$("#export").click(function (event) {

-    var outputFile = $("#course_name").val().replace(" ", "_") + '.csv';

-

-    exportTableToCSV.apply(this, [$('#course_table'), outputFile]);

 });

 

-// Table sorter for course details

-$("table").tablesorter({});

-

-});

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

 

-function view_status(unit){

-    title_list = $(unit).attr("title").split("/");

-    $(unit).attr("title", title_list.join("\n"));

-}

+}); // end document ready

diff --git a/yaksh/templates/yaksh/complete.html b/yaksh/templates/yaksh/complete.html
index 0881bfe..567d01f 100644
--- a/yaksh/templates/yaksh/complete.html
+++ b/yaksh/templates/yaksh/complete.html
@@ -3,6 +3,14 @@
 {% block pagetitle %}<img src="{{ URL_ROOT }}/static/yaksh/images/yaksh_text.png"
 width="80" alt="YAKSH"></img>{% endblock %}
 {% block content %}
+{% if module_id and not user == "moderator" %}
+<center>
+    <div class="alert alert-info">
+        Note:- Please Click on the Next button to submit the quiz. Please do not close the browser
+        without clicking next.
+    </div>
+</center>
+{% endif %}
 {% csrf_token %}
     {% if paper.questions_answered.all or paper.questions_unanswered.all %}
 <center><table class="table table-bordered" >
diff --git a/yaksh/templates/yaksh/course_detail.html b/yaksh/templates/yaksh/course_detail.html
index 9fcae68..d069b5d 100644
--- a/yaksh/templates/yaksh/course_detail.html
+++ b/yaksh/templates/yaksh/course_detail.html
@@ -2,7 +2,7 @@
 {% load custom_filters %}
 {% block title %} Course Details {% endblock title %}
 
-<div class="col-md-9 col-md-offset-2 main">
+<div class="col-md-9 col-md-offset-6 main">
 {% block pagetitle %} Course Details for {{ course.name|title }} {% endblock %}
 </div>
 
@@ -14,6 +14,12 @@
 {% endblock %}
 {% block css %}
 <link rel="stylesheet" href="{{ URL_ROOT }}/static/yaksh/css/jquery-ui/jquery-ui.css">
+<style>
+    .user_data + .tooltip.top > .tooltip-inner {
+        padding: 12px;
+        font-size: 10px;
+    }
+</style>
 {% endblock %}
 {% block content %}
 <br/>
@@ -128,68 +134,51 @@
         {% elif state == "course_status" %}
             <div class="course_data">
             <input type="hidden" id="course_name" value="{{course.name}}">
-            <a href="#" class="btn btn-info" id="export">Export to CSV</a>
             <center><h2>Course Status</h2></center>
             <table class="tablesorter table table-bordered" id="course_table" data-sortlist="[0,0]">
             <thead>
                 <tr>
                 <th>Sr No.</th>
-                <th>Students</th>
-                <th>Total</th>
+                <th>Email</th>
+                <th>Current Unit</th>
+                <th>Course Completion Percentage</th>
                 <th>Grade</th>
-                <th colspan="{{modules|length}}">Modules</th>
-                </tr>
-                <tr>
-                    <th scope="row"></th>
-                    <th></th>
-                    <th></th>
-                    <th></th>
-                    {% if modules %}
-                        {% for module in modules %}
-                            <th>
-                                {{module.name}}
-                                <br>
-                                ({{module.get_learning_units|length}} Units)
-                                <br>
-                                <a data-target="tooltip" title="{% for unit in module.get_learning_units %}{% if unit.type == 'quiz' %}{{unit.quiz.description}}{% else %}{{unit.lesson.name}}{% endif %} / {% endfor %}" id="unit_status{{module.id}}" onmouseover="view_status('#unit_status{{module.id}}')">
-                                    View Units</a>
-                            </th>
-                        {% endfor %}
-                    {% else %}
-                        <th></th>
-                    {% endif %}
                 </tr>
             </thead>
             <tbody>
-                {% for student in students %}
+                {% for student, grade, percent, unit in student_details %}
                     <tr>
                     <td width="5%">
                         {{forloop.counter}}.
                     </td>
+                    <td width="50%">
+                        <a class="user_data" data-item-id="{{course.id}}+{{student.id}}" data-toggle="tooltip" title="Click to view Overall Course progress" data-placement="top">
+                            {% if student.email %}
+                                {{ student.email }}
+                            {% else %}
+                                {{ student.get_full_name|title}}
+                            {% endif %}
+                        </a>
+                        <div id="show_status_{{course.id}}_{{student.id}}" style="display: None;">
+                        </div>
+                    </td>
                     <td>
-                        {{ student.get_full_name|title }}
+                        {% if unit != "NA" %}
+                            {% if unit.type == 'quiz' %}
+                                {{unit.quiz.description}}
+                            {% else %}
+                                {{unit.lesson.name}}
+                            {% endif %}
+                        {% else %}
+                            {{unit}}
+                        {% endif%}
                     </td>
                     <td>
-                        {% course_completion_percent course student as c_percent %}
-                        {{c_percent}} %
+                        {{percent}}%
                     </td>
                     <td>
-                        {% course_grade course student as grade %}
                         {{grade}}
                     </td>
-                        {% if modules %}
-                            {% for module in modules %}
-                                <td>
-                                    {% module_completion_percent course module student as m_percent %}
-                                    {{m_percent}} %
-                                    <br>
-                                    <a data-target="tooltip" title="{% for unit in module.get_learning_units %}{% if unit.type == 'quiz' %}{{unit.quiz.description}}{% else %}{{unit.lesson.name}}{% endif %} - {% get_unit_status course module unit student as status %}{{status|title}} / {% endfor %}" id="unit_status{{module.id}}{{student.id}}" onmouseover="view_status('#unit_status{{module.id}}{{student.id}}')">
-                                    View Unit Status</a>
-                                </td>
-                            {% endfor %}
-                        {% else %}
-                            <td>-------</td>
-                        {% endif %}
                     </tr>
                 {% endfor %}
             </tbody>
diff --git a/yaksh/templates/yaksh/course_modules.html b/yaksh/templates/yaksh/course_modules.html
index 6c93e97..5baa781 100644
--- a/yaksh/templates/yaksh/course_modules.html
+++ b/yaksh/templates/yaksh/course_modules.html
@@ -18,101 +18,117 @@
     </div>
 {% endif %}
 <b>Grade: {% if grade %} {{ grade }} {% else %} Will be available once the course is complete {% endif %}</b>
-{% if learning_modules %}
-    <table class="table">
-        {% for module in learning_modules %}
-            <tr>
-                <td>
-                    <a href="{{URL_ROOT}}/exam/quizzes/view_module/{{module.id}}/{{course.id}}">
-                    {{module.name|title}}</a>
-                </td>
-                <td>
-                    <span class="glyphicon glyphicon-chevron-down" id="learning_units{{module.id}}{{course.id}}_down">
-                    </span>
-                    <span class="glyphicon glyphicon-chevron-up" id="learning_units{{module.id}}{{course.id}}_up" style="display: none;">
-                    </span>
-                    <a data-toggle="collapse" data-target="#learning_units{{module.id}}{{course.id}}" onclick="view_unit('learning_units{{module.id}}{{course.id}}');">
-                    View Lessons/Quizzes/Exercises</a>
-                    <div id="learning_units{{module.id}}{{course.id}}" class="collapse">
-                        <table class="table">
-                        <tr>
-                            <th>Lesson/Quiz/Exercise</th>
-                            <th>Status</th>
-                            <th>Type</th>
-                            <th>View AnswerPaper</th>
-                        </tr>
-                        {% for unit in module.get_learning_units %}
-                        <tr>
-                            <td>
-                            {% if unit.type == "quiz" %}
-                                {{unit.quiz.description}}
-                            {% else %}
-                                {{unit.lesson.name}}
-                            {% endif %}
-                            </td>
-                            <td>
-                            {% get_unit_status course module unit user as status %}
-                            {% if status == "completed" %}
-                                <span class="label label-success">{{status|title}}
-                                </span>
-                            {% elif status == "inprogress" %}
-                                <span class="label label-info">{{status|title}}
-                                </span>
-                            {% else %}
-                                <span class="label label-warning">{{status|title}}
-                                </span>
-                            {% endif %}
-                            </td>
-                            <td>
-                            {% if unit.type == "quiz" %}
-                                {% if unit.quiz.is_exercise %}
-                                    Exercise
-                                {% else %}
-                                    Quiz
-                                {% endif %}
-                            {% else %}
-                                Lesson
-                            {% endif %}
-                            </td>
-                            <td>
-                            {% if unit.type == "quiz" %}
-                                {% if unit.quiz.view_answerpaper %}
-                                    <a href="{{ URL_ROOT }}/exam/view_answerpaper/{{ unit.quiz.questionpaper_set.get.id }}/{{course.id}}">
-                                    <i class="fa fa-eye" aria-hidden="true"></i> Can View </a>
+{% if modules %}
+    <br><br>
+    <strong>Overall Course Progress</strong>
+    <div class="progress">
+        {% if course_percentage <= 50 %}
+            <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="40"
+            aria-valuemin="0" aria-valuemax="100" style="width:{{course_percentage}}%">
+        {% elif course_percentage <= 75 %}
+            <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="40"
+            aria-valuemin="0" aria-valuemax="100" style="width:{{course_percentage}}%">
+        {% else %}
+            <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40"
+            aria-valuemin="0" aria-valuemax="100" style="width:{{course_percentage}}%">
+        {% endif %}
+        <b style="color: black;">{{course_percentage}}% Completed</b>
+        </div>
+    </div>
+    <div class="panel panel-default">
+        <div class="panel panel-body">
+            <table class="table">
+                {% for module, percent in modules %}
+                    <tr>
+                        <td width="25%">
+                            <a href="{{URL_ROOT}}/exam/quizzes/view_module/{{module.id}}/{{course.id}}">
+                            {{module.name|title}}</a>
+                        </td>
+                        <td>
+                            <span class="glyphicon glyphicon-chevron-down" id="learning_units{{module.id}}{{course.id}}_down">
+                            </span>
+                            <span class="glyphicon glyphicon-chevron-up" id="learning_units{{module.id}}{{course.id}}_up" style="display: none;">
+                            </span>
+                            <a data-toggle="collapse" data-target="#learning_units{{module.id}}{{course.id}}" onclick="view_unit('learning_units{{module.id}}{{course.id}}');">
+                            View Lessons/Quizzes/Exercises</a>
+                            <div id="learning_units{{module.id}}{{course.id}}" class="collapse">
+                                <table class="table table-bordered">
+                                <tr>
+                                    <th>Lesson/Quiz/Exercise</th>
+                                    <th>Status</th>
+                                    <th>Type</th>
+                                    <th>View AnswerPaper</th>
+                                </tr>
+                                {% for unit in module.get_learning_units %}
+                                <tr>
+                                    <td>
+                                    {% if unit.type == "quiz" %}
+                                        {{unit.quiz.description}}
+                                    {% else %}
+                                        {{unit.lesson.name}}
+                                    {% endif %}
+                                    </td>
+                                    <td>
+                                    {% get_unit_status course module unit user as status %}
+                                    {% if status == "completed" %}
+                                        <span class="label label-success">{{status|title}}
+                                        </span>
+                                    {% elif status == "inprogress" %}
+                                        <span class="label label-info">{{status|title}}
+                                        </span>
+                                    {% else %}
+                                        <span class="label label-warning">{{status|title}}
+                                        </span>
+                                    {% endif %}
+                                    </td>
+                                    <td>
+                                    {% if unit.type == "quiz" %}
+                                        {% if unit.quiz.is_exercise %}
+                                            Exercise
+                                        {% else %}
+                                            Quiz
+                                        {% endif %}
+                                    {% else %}
+                                        Lesson
+                                    {% endif %}
+                                    </td>
+                                    <td>
+                                    {% if unit.type == "quiz" %}
+                                        {% if unit.quiz.view_answerpaper %}
+                                            <a href="{{ URL_ROOT }}/exam/view_answerpaper/{{ unit.quiz.questionpaper_set.get.id }}/{{course.id}}">
+                                            <i class="fa fa-eye" aria-hidden="true"></i> Can View </a>
+                                        {% else %}
+                                            <a>
+                                            <i class="fa fa-eye-slash" aria-hidden="true">
+                                            </i> Cannot view now </a>
+                                        {% endif %}
+                                    {% else %}
+                                        ------
+                                    {% endif %}
+                                    </td>
+                                </tr>
+                                {% endfor %}
+                                </table>
+                            </div>
+                        </td>
+                        <td>
+                            <div class="progress">
+                                {% if percent <= 50 %}
+                                <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:{{percent}}%">
+                                {% elif percent <= 75 %}
+                                <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:{{percent}}%">
                                 {% else %}
-                                    <a>
-                                    <i class="fa fa-eye-slash" aria-hidden="true">
-                                    </i> Cannot view now </a>
+                                <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:{{percent}}%">
                                 {% endif %}
-                            {% else %}
-                                ------
-                            {% endif %}
-                            </td>
-                        </tr>
-                        {% endfor %}
-                        </table>
-                    </div>
-                </td>
-                <td>
-                    {% get_module_status user module course as module_status %}
-                    Status:
-                    {% if module_status == "completed" %}
-                    <span class="label label-success">
-                        {{module_status|title}}
-                    </span>
-                    {% elif module_status == "inprogress" %}
-                    <span class="label label-info">
-                        {{module_status|title}}
-                    </span>
-                    {% else %}
-                    <span class="label label-warning">
-                        {{module_status|title}}
-                    </span>
-                    {% endif %}
-                </td>
-            </tr>
-        {% endfor %}
-    </table>
+                                <b style="color: black;">{{percent}}% Completed</b>
+                                </div>
+                            </div>
+                        </td>
+                    </tr>
+                {% endfor %}
+            </table>
+        </div>
+    </div>
 {% else %}
     <h3> No lectures found </h3>
 {% endif %}
diff --git a/yaksh/templates/yaksh/show_video.html b/yaksh/templates/yaksh/show_video.html
index 17f9d86..eae3762 100644
--- a/yaksh/templates/yaksh/show_video.html
+++ b/yaksh/templates/yaksh/show_video.html
@@ -11,7 +11,11 @@
 
 {% block main %}
 <div class="col-sm-3 col-md-2 sidebar">
-    <center><h4>{{course.name}}</h4></center>
+    <center>
+        <a href="{{URL_ROOT}}/exam/course_modules/{{course.id}}">
+            <h4>{{course.name}}</h4>
+        </a>
+    </center>
     <br>
     {% for module in all_modules %}
         {% if module.id == learning_module.id %}
diff --git a/yaksh/templates/yaksh/user_status.html b/yaksh/templates/yaksh/user_status.html
new file mode 100644
index 0000000..5f006c9
--- /dev/null
+++ b/yaksh/templates/yaksh/user_status.html
@@ -0,0 +1,44 @@
+{% if status %}
+    <strong>Student Name: {{student.get_full_name|title}}</strong>
+    <br>
+    <strong>Overall Course Progress:</strong>
+    <div class="progress">
+        {% if course_percentage <= 50 %}
+            <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="40"
+            aria-valuemin="0" aria-valuemax="100" style="width:{{course_percentage}}%">
+        {% elif course_percentage <= 75 %}
+            <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="40"
+            aria-valuemin="0" aria-valuemax="100" style="width:{{course_percentage}}%">
+        {% else %}
+            <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40"
+            aria-valuemin="0" aria-valuemax="100" style="width:{{course_percentage}}%">
+        {% endif %}
+        <b style="color: black;">{{course_percentage}}% Completed</b>
+        </div>
+    </div>
+    <br>
+    <strong>Per Module Progress:</strong>
+    <br>
+    <table class="table">
+        {% for module, percent in modules %}
+            <tr>
+                <td width="30%">{{ module.name }}</td>
+                <td>
+                    <div class="progress">
+                        {% if percent <= 50 %}
+                        <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:{{percent}}%">
+                        {% elif percent <= 75 %}
+                        <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:{{percent}}%">
+                        {% else %}
+                        <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:{{percent}}%">
+                        {% endif %}
+                        <b style="color: black;">{{percent}}% Completed</b>
+                        </div>
+                    </div>
+                </td>
+            </tr>
+        {% endfor %}
+    </table>
+{% else %}
+    {{ msg }}
+{% endif %}
\ No newline at end of file