Skip to content

Commit

Permalink
Merge pull request #4248 from MCGallaspy/beautify-content-rating
Browse files Browse the repository at this point in the history
0.15 - beautify content rating
  • Loading branch information
aronasorman committed Aug 28, 2015
2 parents 2e0f5ab + 2a2da8c commit 103f780
Show file tree
Hide file tree
Showing 13 changed files with 271 additions and 130 deletions.
28 changes: 24 additions & 4 deletions docs/usermanual/userman_coach.rst
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
Coach User Manual
===================
=================
**Who is a "coach"?**

A person who :
Expand All @@ -8,7 +8,7 @@ A person who :
* provides instructions to students

Coach Reports
-------------------------------------------
-------------
Coach reports are visualizations of the data generated by your learners. The goal of the coach reports is to put the data into an easy to understand format, so you can understand how learners are progressing and where they need the most help.

The Report Page displays an overview of the learners and a tabular report.
Expand All @@ -33,7 +33,7 @@ Tabular Report
A tabular report is a grid that can show how students are doing in specific subjects at a high level. As a coach, you can select which group of students you'd like to check progress for, and which subset of videos or exercises you'd like to see reports on. This allows you to easily identify which areas learners are struggling in, as well as which learners are doing well.

Progress By Topic
##################
#################

1. Click on the "Show Tabular Report" button.
2. A table should be generated with the data requested.
Expand All @@ -51,8 +51,28 @@ The color of the rectangles in the table indicate how that student is doing on a
+----------------------+-------------------------------------------------------------+

Detailed View
##################
#############

1. Click on the colored cells.
2. A panel should open up below the cell to reveal the number of questions attempted and the actions made on each exercise.
3. Click on the same cell to close the panel.


Exporting User Data
-------------------

On the facility management page, you can find the "Export Data" button.
If you click this button, you'll be taken to a page where you can export some user data in CSV format.
This is so you can perform analyses on data accumulated in KA Lite using your own methods -- in the future such tools may be included in KA Lite itself!
You can select which resource you wish to export, and narrow down the list of users to draw data from by selecting facilities and groups.
When you have made your selection, click the "Export" button to download a CSV file with the requested data.

.. _export-content-rating:

Content Ratings
^^^^^^^^^^^^^^^
Select the "Ratings" option in the "Resources" dropdown.
Ratings are tied to users and content items -- each rating has a unique-together user, content type, and content id.
The content id is suppressed in the output as it is not human readable, but is replaced with the title.
The title of content items may not be unique -- for example a video and an exercise might have the same title.
In such cases, you can differentiate using the content type.
27 changes: 21 additions & 6 deletions docs/usermanual/userman_learner.rst
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
Learner User Manual
=======================
===================
**Who is a "learner"?**

Anyone who uses KA Lite primarily for learning. Learner accounts will track individual progress through videos and exercises, and learners will only be allowed to view their own data.

Accessing KA Lite
------------------
-----------------
There are two ways KA Lite can be used:

#. **Set up on a network with one main server, having machines connect to this server.** If this is the setup chosen, installation is not necessary on a learner's computer, as it can be accessible through a web browser with the IP address of the server. Simply copy and paste the server's IP address into your web browser any time you'd like to access KA Lite. If you are unsure what the address is, please contact your administrator.
Expand All @@ -32,7 +32,7 @@ How to Log In


Navigating through Content
-------------------------------------------
--------------------------
To begin engaging with the Khan Academy videos and exercises, first make sure you are logged into KA Lite. Upon log in, you should see a green menu on the left that lists the content. If you do not see this green menu, please start by clicking on the "Learn" tab on the home page.

Start by selecting the subject you'd like to explore. This will expand the side menu, displaying subtopics within that subject.
Expand Down Expand Up @@ -65,9 +65,24 @@ This card allows you to navigate to excercises you have begun; you can also to n
**Explore:**
This card recommends content for you based on topics you have completed and begun. This card also recommends random content from our collection of topics to encourage learning from multiple fields.

Content Rating
^^^^^^^^^^^^^^
You can leave feedback on each content item.
When you are logged in, you'll find a rating box below each content item.
You can rate each content item on *Quality* and *Difficulty* on a 1 to 5 scale by clicking on the star icons.
1 represents the lowest rating, and 5 represents the highest rating.
You can alter the ratings at any time by clicking on a different star icon.

After rating *Quality* and *Difficulty* you'll be able to leave any comments you wish.
Simply click on the text box labeled *Your Comments* and type away!
You can edit your comments freely.

At this time, you are only able to view your own ratings.

:ref:`Coaches can export the ratings of all users in csv format. <export-content-rating>`

How to Practice Exercises
--------------------------
-------------------------
First, please log into KA Lite. Then, navigate to the topic that you'd like to practice exercises for.

To answer a question, enter the answer in the box on the top right of the module, or select the bubble next to the answer choice in the exercise panel. Once you have decided on your answer, click "Check Answer".
Expand All @@ -80,12 +95,12 @@ The bar on the top right will display your progress as you go through the exerci
If you are stuck on a problem, you can ask for a hint by clickin on the "Show hints" button! Use your hints wisely, for there are a limited number of them for every section.

Saved Progress
^^^^^^^^^^^^^^^^^^
^^^^^^^^^^^^^^
If at any point during an exercise you wish to watch a video to refresh your memory, feel free to navigate to the video by expanding the green tab which will bring up the content menu. Your progress for that exercise will be saved and you will not lose your work.


How to View Your Progress
--------------------------
-------------------------
At any point in time, you should be able to view your progress on any topic. In order to do this,

#. Log into KA Lite.
Expand Down
4 changes: 1 addition & 3 deletions kalite/distributed/features/content_rating.feature
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,7 @@ Feature: Content Rating
@as_learner
Scenario: User alters text feedback
Given I have filled out a feedback form
When I click the edit button
And I change the text
And I submit it
When I change the text
Then the altered text is displayed

@as_learner
Expand Down
22 changes: 0 additions & 22 deletions kalite/distributed/features/steps/content_rating.py
Original file line number Diff line number Diff line change
Expand Up @@ -18,12 +18,10 @@
"star-container-quality",
"star-container-difficulty",
)
SUBMIT_CLASS = "rating-submit"
STAR_RATING_OPTION_CLASS = "star-rating-option"
STAR_INNER_WRAPPER_CLASS = "star-rating-inner-wrapper"
TEXT_INPUT_CLASS = "rating-text-feedback"
DELETE_BTN_CLASS = "rating-delete"
EDIT_BTN_CLASS = "rating-edit"

@then(u'my feedback is displayed')
def impl(context):
Expand Down Expand Up @@ -110,7 +108,6 @@ def impl(context):
enter_star_ratings(context)
text_feedback = context.text_feedback = "This stuff is great, A+++"
enter_text_feedback(context, text_feedback)
submit_feedback(context)

@given(u'I am on a content page')
def impl(context):
Expand Down Expand Up @@ -142,21 +139,12 @@ def impl(context):
export_btn = find_id_with_wait(context, "export-button")
export_btn.click()

@when(u'I click the edit button')
def impl(context):
edit_btn = find_css_class_with_wait(context, EDIT_BTN_CLASS)
edit_btn.click()

@when(u'I change the text')
def impl(context):
new_text = "Once upon a midnight dreary"
context.new_text = get_text_feedback(context) + new_text
enter_text_feedback(context, new_text)

@when(u'I submit it')
def impl(context):
find_css_class_with_wait(context, SUBMIT_CLASS).click()

@then(u'the altered text is displayed')
def impl(context):
actual = get_text_feedback(context)
Expand Down Expand Up @@ -205,16 +193,6 @@ def enter_text_feedback(context, text_feedback):
input_field.send_keys(text_feedback)


def submit_feedback(context):
"""
Submit feedback form
:param context: behave context
:return: nothing
"""
submit_btn = find_css_class_with_wait(context, SUBMIT_CLASS)
submit_btn.click()


def get_text_feedback(context):
"""
Get the text feedback displayed after the feedback form is filled out
Expand Down
85 changes: 85 additions & 0 deletions kalite/distributed/static/css/distributed/content-rating.less
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
.panel-kalite-rating {
border-style: solid;
border-color: grey;
border-width: 1px;
padding: 1em;

.panel-heading {
border-bottom-style: solid;
border-bottom-color: black;
border-bottom-px: 4px;

.panel-title {
font-size: 2em;
}
}

.panel-body {
background: inherit;
}
}

.star-rating-inner-wrapper {
padding-top: 0.5em;
margin: 0 auto;

.lowest-label, .highest-label {
padding-top: 1.8em;
}

.rating-row > div {
padding-left: 0;
padding-right: 0;
}

.btn-star {
font-size: 3em;
border-style: solid;
border-width: 1px;
border-color: black;

.glyphicon-star-empty {
top: 5px;
left: 2px;
}
}

.btn-star {
background: #FFFFFF;
}
.btn-star:active {
background: #FFFF66;
}
.btn-star.activated {
background: #CC6600;
}
.btn-star.activated:active {
background: #663300;
}
.btn-star:hover {
background: #EEEEEE;
}
.btn-star.activated:hover {
background: #BB5500;
}

.star-title-label {
background: inherit;
color: inherit;
}

.rating-label {
height: 1em;
font-size: 1em;
}
}

#text-container {
.rating-text-feedback {
max-width: 60%;
}

.text-feedback-label {
padding-left: 0;
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@ var $ = require("base/jQuery");
var TopicChannelRouter = require("topics/router");
var Backbone = require("base/backbone");

require("../../../css/distributed/content-rating.less");

module.exports = {
$: $,
TopicChannelRouter: TopicChannelRouter,
Expand Down
Original file line number Diff line number Diff line change
@@ -1,19 +1,26 @@
<div id="rating-container" class="row">
<div class="col-xs-12"?>
<!--stuff goes here-->
<div id="star-container-quality">
<!--star.handlebars will be rendered here. Anything specific to star-container 1 should wrap this container.
star.handlebars can be edited to affect all star-rating widgets.-->
<div class="col-xs-12">
<div class="panel panel-kalite-rating">
<div class="row panel-heading">
<div class="col-md-8">
<h1 class="panel-title">{{_ "What did you think?" }}</h1>
<span>{{_ "Your feedback will help us make better content for future learners!" }}</span>
</div>
<div class="col-md-2 col-md-offset-2">
<div class="btn btn-danger rating-delete"><span class="glyphicon glyphicon-trash"></span> {{_ "Delete my review" }}</div>
</div>
</div>
<div class="panel-body">
<div id="star-container-quality">
<!--star.handlebars will be rendered here.-->
</div>
<div id="star-container-difficulty">
<!-- star-container-2. Same deal. -->
</div>
<div id="text-container">
<!--text-container. Uses text.handlebars.-->
</div>
</div>
</div>
<div id="star-container-difficulty">
<!-- star-container-2. Same deal. -->
</div>
<div id="text-container">
<!--text-container. Same caveat as star-containers. Uses text.handlebars.-->
</div>
<div class="btn btn-success rating-submit">Submit</div>
<div class="btn btn-success rating-edit">Edit</div>
<div class="btn btn-success rating-skip">Skip</div>
<div class="btn btn-danger rating-delete">Delete</div>
</div>
</div>
Original file line number Diff line number Diff line change
@@ -1,7 +1,29 @@
<div class="star-rating-inner-wrapper">
<div class="star-rating-option" data-val="1">rate 1</div>
<div class="star-rating-option" data-val="2">rate 2</div>
<div class="star-rating-option" data-val="3">rate 3</div>
<div class="star-rating-option" data-val="4">rate 4</div>
<div class="star-rating-option" data-val="5">rate 5</div>
</div>
<center class="star-rating-inner-wrapper">
<h2><span class="star-title-label label label-default">{{ title }}</span></h2>

<div class="row rating-row">
<div class="col-md-1 col-md-offset-3 lowest-label">{{ lowest_value }}</div>

<div class="col-md-4">
<div class="star-rating-option btn btn-star" data-val="1">
<span class="glyphicon glyphicon-star-empty"></span>
</div>
<div class="star-rating-option btn btn-star" data-val="2">
<span class="glyphicon glyphicon-star-empty"></span>
</div>
<div class="star-rating-option btn btn-star" data-val="3">
<span class="glyphicon glyphicon-star-empty"></span>
</div>
<div class="star-rating-option btn btn-star" data-val="4">
<span class="glyphicon glyphicon-star-empty"></span>
</div>
<div class="star-rating-option btn btn-star" data-val="5">
<span class="glyphicon glyphicon-star-empty"></span>
</div>
</div>

<div class="col-md-1 highest-label">{{ highest_value }}</div>
</div>

<div class="rating-label center-block"></div>
</center>
Original file line number Diff line number Diff line change
@@ -1 +1,8 @@
<textarea class="form-control rating-text-feedback">{{ text }}</textarea>
<div class="container">
<div class="row">
<label class="text-feedback-label col-md-2 col-md-offset-2 col-xs-12"><h3>{{_ "Your comments:" }}</h3></label>
</div>
<div class="row">
<textarea class="form-control rating-text-feedback col-xs-8 col-xs-offset-2">{{ text }}</textarea>
</div>
</div>
10 changes: 9 additions & 1 deletion kalite/distributed/static/js/distributed/rating/models.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,15 @@
var Backbone = require("../base/backbone");

var RatingModel = Backbone.Model.extend({
urlRoot: "/api/content_rating"
urlRoot: "/api/content_rating",

initialize: function(){
_.bindAll(this, "debounced_save");
},

debounced_save: _.debounce(function(){
this.save();
}, 2000)
});

var ContentRatingCollection = Backbone.Collection.extend({
Expand Down

0 comments on commit 103f780

Please sign in to comment.