Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added Student Mastery/Class Mastery CoachReports #3033

Merged
merged 8 commits into from
Feb 20, 2015
158 changes: 158 additions & 0 deletions kalite/coachreports/static/css/coachreports/exercise_mastery_view.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,158 @@
.selection {
float: left;
padding: 0 10px 10px 0;
}

#displaygrid {
width: 100%;
padding-top: 5px;
padding-left: 2px;
}

#displaygrid > .users {
width: 11%;
margin-right: 1px;
float: left;
}

.userstatus {
overflow: auto;
width: 88%;
}

.users table {
width: 100%;
}

#displaygrid table {
table-layout: fixed;
}

th, td {
border: 1px solid black;
padding: 2px;
vertical-align:middle;
}

.users th {
text-align: left;
}

.subtitle {
font-size: 1.15em;
font-weight: bold;
}

.status {
height: 27px;
background-color: #EEE;
}

th.username {
height: 27px;
border: 1px solid black;
padding-left: 5px;
white-space: nowrap;
text-overflow: ellipsis;
}

th.headrow, th.headrow div {
width: 80px;
font-weight: bold;
background-color: white;
overflow: hidden;
text-overflow: ellipsis;
}

th.headrowuser {
font-weight: bold;
}

.complete {
background-color: #2F942F;
}

.partial {
background-color: #94BE48;
}

.struggle {
background-color: #CA4D4D;
}

#displaygrid td, #displaygrid th {
min-width: 60px;
max-width: 60px;
overflow: hidden;
}

#legend a {
height:12px;
margin:0px;
padding:0px;
}

.student-name, .attempts, .streak_progress, .points, .total_seconds_watched {
float:left;
display:none;
overflow:hidden;
white-space:nowrap;
width:100%;
margin:0px 5px 0px 0px;
padding:0px;
text-align:right;
vertical-align:middle;
}

.student-name {
float:none;
text-align:left;
display:block;
text-overflow: ellipsis;
}

#legend {
float:left;
vertical-align:middle;
margin:12px 25px 2px 10px;
}

.legend {
float:right;
width:160px;
height:20px;
text-align:center;
vertical-align:middle;
white-space:nowrap;
overflow:hidden;
border-style:solid;
border-width: 1px;
padding:2px;
margin-right: 10px;
font-weight: bold;
}

.legend div {
float:left;
width:35px;
height:21px;
}

#selection-bar {
overflow:hide;
}

#disp_options {
float:right;
}

.exercise-name {
height: 100px;
text-align: center;
vertical-align: none;
padding: 0px;
}

#exercise-mastery {
font-size: 10px
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
$(function() {

$("#student").change(function() {
window.location.href = setGetParam(window.location.href, "user", $("#student option:selected").val());
});

$("#playlist").change(function() {
window.location.href = setGetParam(window.location.href, "playlist", $("#playlist option:selected").val());
});

$("#facility").change(function() {
window.location.href = setGetParamDict(window.location.href, {
"facility": $("#facility option:selected").val(),
"group": $("#" + $("#facility option:selected").val() + "_group_select").val(),
"playlist": ""
});
});

$(".group_select").change(function(event) {
window.location.href = setGetParam(window.location.href, "group", $(event.target).val());
});

// Selector to toggle visible elements is stored in each option value
cell_height = 27;
$("#disp_options").change(function() {
selector = $("#disp_options option:selected").val();

// adjust the cell height
cell_height += 50 * Math.pow(-1, 0 + $(selector).is(":visible"));

// adjust view in data cells
$(selector).each(function() {
$(this).toggle()
});
$(selector).each(function() {
$(this).height(20);
$(this).parent().height(cell_height);
});

// Adjust student name cell heights
$("th.username").each(function() {
$(this).height(cell_height);
});
});
$(window).resize(function() {
$('.headrowuser').height($('.headrow.data').height());
}).resize();
});

$(function(){
$("#tree").dynatree({
persist: true,
expand: false,
checkbox: true,
selectMode: 3,
cookieId: "exercises",
children: null,

onPostInit: function(isReloading, isError) {
if (window.location.href.indexOf("&playlist=") == -1) {
$("#tree").dynatree("getTree").visit(function(node){
node.select(false);
node.expand(false);
});
}
},
onSelect: function(select, dtnode) {
var selKeys = $.map(dtnode.tree.getSelectedNodes(), function(dtnode){
return dtnode.data.key;
});
window.location.href = setGetParam(window.location.href, "playlist", selKeys);
}
});
});
156 changes: 156 additions & 0 deletions kalite/coachreports/templates/coachreports/exercise_mastery_view.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,156 @@
{% extends "coachreports/base.html" %}

{% load i18n %}
{% load kalite_staticfiles %}
{% load my_filters %}

{% block coachreports_active %}active{% endblock coachreports_active %}
{% block title %}{% trans "Progress by topic" %} {{ block.super }}{% endblock title %}

{% block headcss %}{{ block.super }}
<link rel="stylesheet" type="text/css" href="{% static 'css/coachreports/exercise_mastery_view.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'css/jquery-ui/plugins/ui.dynatree.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'css/jquery-ui/plugins/ui.dynatree.defaultoff.css' %}">

{% endblock headcss %}



{% block headjs %}{{ block.super }}
<script type="text/javascript" src="{% static 'js/jquery.cookie.js' %}"></script>
<script type="text/javascript" src="{% static 'js/jquery.dynatree.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/jquery.dynatree.extensions.js' %}"></script>
<script type="text/javascript" src="{% static 'js/coachreports/exercise_mastery_view.js' %}"></script>

{% endblock headjs %}

{% block content %}
{% block navbar_title %}{{ block.super }}{% endblock navbar_title %}

<div id="selection-bar">

{% if groups %}
{% if playlists %}
<div class="selection">
<div class="subtitle">{% trans "Select Playlist" %}</div>
{% endif %}
{% endif %}
</div>

<div id="tree">
<ul>

{% for playlist in playlists %}
<li id= "{{ playlist.id }}" class="folder" > {% trans "Unit" %} {{ playlist.unit }} {% trans playlist.title %}
<ul>
{% for exercise in playlist.exercises %}
<li id="{{ exercise.id }}"> {{ exercise.title }} </li>
{% endfor %}
</ul>
</li>
{% endfor %}

</ul>
</div>



<div id="content">
<div id="legend">
<div class="legend"><div class="partial"></div>{% trans "In Progress" %} {{ progress }} %</div>
<div class="legend"><div class="complete"></div>{% trans "Mastered" %} {{ mastered }} %</div>
<div class="legend"><div class="struggle"></div>{% trans "Struggling" %} {{ struggling }} %</div>
</div>
</div>
<div style="clear: both;"></div>


{% if not students %}
<p>
<div class="subtitle error" id="error_message">
{% if not request.GET.playlist %}
<div id="no_topic_or_playlist_error">
{% if playlists %}
{% trans "Please select a playlist above." %}
{% else %}
{% trans "No student accounts in this group have been created." %}
{% endif %}
</div>
{% endif %}
</div>
</p>

{% else %}
{% block students_header %}
<div id="displaygrid">
<div style="clear: both;"></div>
<div class="users">
<table>
<tbody>
<tr>
<th class="headrowuser">
{% trans "Student" %}
</th>
</tr>
{% for student in students %}
<tr>
<th class="username">
<span title="{{ student.name }} ({{ student.username }})">
<div class="student-name"><a href="{% url 'student_view' %}?user={{ student.id }}">{{ student.name }}</a></div>
</span>
</th>
</tr>
{% endfor %}
</tbody>
</table>
<div style="clear: both;"></div>
</div>
</div>
{% endblock students_header %}

{% block exercise_data %}
<div class="userstatus">
<table>
<thead>
<tr>
<th class="headrowuser">
Student Mastery
</th>
{% for exercise in exercises %}
<th class="headrow data" >
<div class="exercise-name"><a href="{{ exercise.path }}" title='"{% trans exercise.display_name %}"{% if exercise.description %} ({% trans exercise.description %}){% endif %}'>{% trans exercise.title %}</a></div>
<div id="exercise-mastery">
Mastered: {{ exercise_stats|get_item:exercise.id|get_item:"mastered" }}
Progress: {{ exercise_stats|get_item:exercise.id|get_item:"progress" }}
Struggling: {{ exercise_stats|get_item:exercise.id|get_item:"struggling" }}
Mastery: {{ exercise_stats|get_item:exercise.id|get_item:"mastery" }} %
</div>
{% endfor %}
</tr>
</thead>
<tbody>
{% for student in students %}
<tr>
<th>
{{ student.mastery }} %
</th>
{% for exercise in exercises %}
{% if not student.exercise_logs|get_item:exercise.slug %}
<td class="status data" title="{% trans "Not Attempted" %}">
{% elif student.exercise_logs|get_item:exercise.slug|get_item:"struggling" %}
<td class="status data struggle" title="{% trans "Struggling" %}"> {{ student.exercise_logs|get_item:exercise.slug|get_item:"streak_progress" }} / {{ student.exercise_logs|get_item:exercise.slug|get_item:"attempts" }} </td>
{% elif student.exercise_logs|get_item:exercise.slug|get_item:"complete" %}
<td class="status data complete" title="{% trans "Complete" %}"> {{ student.exercise_logs|get_item:exercise.slug|get_item:"streak_progress" }} / {{ student.exercise_logs|get_item:exercise.slug|get_item:"attempts" }} </td>
{% else %}
<td class="status data partial" title="{% trans "Attempted" %}"> {{ student.exercise_logs|get_item:exercise.slug|get_item:"streak_progress" }} / {{ student.exercise_logs|get_item:exercise.slug|get_item:"attempts" }} </td>
{% endif %}
</td>
{% endfor %}
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% endblock exercise_data %}
{% endif %}
{% endblock content %}
Loading