Expertiza_Wiki - User contributions [en]

CSC/ECE 517 Fall 2017/E1797 Timestamps for students submission

2017-12-06T11:33:22Z

Skatta3: /* References */

==Introduction==

Expertiza is an open source project created using Ruby on Rails. Students can upload and submit their assignments and related work online for grading purposes. Through this project, we aim to provide an interactive and refreshing visual timeline for all the student submissions for each assignment. We provided dynamic functions such as zoom in/zoom out to move left/right and recenter to provide smooth user experience.

===Existing System===

Currently, there exist various types of submissions that a student can make for an assignment for which timestamps are generated.
*When a student submits links or uploads files as submissions to an assignment in Expertiza, a timestamp is created for the date and time at which each of the submissions was done.
*The student may also be able to give reviews to other works for a particular assignment. These reviews when submitted also have an associated timestamp.
*There also exist timestamps for deadlines that have passed and that are upcoming for an assignment submission or a review to be done.
*For the reviews that a student receives for his work, the student can give feedback to each of the reviews. The submitted feedbacks also get timestamps.

Currently there exists no functionality to view all these submissions and their timestamps in a single, aggregated way.

===Proposed System===

Our project was to solve this issue by creating a Visualization that helps the student view all the timestamps for his submissions. The goal is to create a Timeline that shows all the timestamps of submitted records and links to the submitted content wherever necessary. The default state of the timeline is a point on the x-axis set to the current date and time. The timeline is interactive and allows the user to zoom in and out to change the viewing scale of the timeline. The user can also scroll in the timeline to move the timeline forward or backward from the current time. After all of this is done, the user can reset the timeline to change his view to the default state.

With this, the student is able to view his entire submission history for an assignment in a convenient way.

==Problem Statement==

In Expertiza, it is possible for the instructor to view the submission records of a particular student. However, there is no way for students to check the history of their submission records. In this project, we are required to keep track of students’ activities and visualize them on their end by using a timeline chart.

<b>What needs to be visualized on the timeline:</b>

* Hyperlink submission record with timestamps
* File upload record with timestamps
* Due dates
*Visualization of Peer review of others works, which includes:
** A Review hyperlink that redirects to the review by clicking on it
** The Round number (To be displayed only if the assignment has multiple rounds)
** Timestamps
*Visualization of Author feedback on others review, which includes:
** A Feedback hyperlink that redirects to the feedback by clicking on it
** Timestamps

===Understanding Problem Statement===

The problem statement states the following issues that had to be resolved.

'''Issue-1:'''
Submission records with timestamps:

A student can submit their work for an assignment using "Your work" button in the respective assignment page. Students have two options to submit their work :
* Giving a hyperlink.
* Uploading a file.
As soon as the user submits any one of these, we needed to show hyperlink or file with the time-stamp on our visualization graph. Also, we needed to provide the submitted '''hyperlink or a link''' to the file on the visualization so that it will be easy for the user to navigate from a single page.

'''Issue-2:'''
Due dates:

There are different due dates for every assignment like Round-1 submission, Round-2 submission, Round-1 review and Round-2 review Due Dates. These are different from submission time stamps because a submission's timestamp depends upon the time at which the user had submitted the work whereas a due date is the deadline date fixed by an instructor. Visualizing them by adding them into the timeline, helps the student to track all due dates in a single graph.

'''Issue-3:'''
Peer Review other's work:

A student needs to review work of different teams during the course of the assignment. As of now in order to view the review, Expertiza requires the user to go to the "other's work" page in the assignment. Instead of this, we want this data to be viewed in our visualization graph. This issue includes a timestamp, link to view review, review round number to be shown in the graph.
'''Note:''' this review is the peer review '''given by this particular student''' to different teams as part of the assignment, '''not the reviews the student received.'''

'''Issue-4:'''
Author's feedback on other's Review
:
A student can give feedback for the review he/she received for a specific assignment. So this information also needs to be included in the graph. We need to show the timestamp and hyperlink to the feedback. It must be noted that the feedback here is not the feedback he got for review given by him/her but the feedback he/she gave for the reviews the had received.

==Program Design==

To visualize the timeline graphically we decided to use the vis.js JavaScript library. This library provides various interactive visualization charts (like graphs, networks, timelines, etc) to visualize data in real time. We chose to work on this library because when compared to other popular visualization libraries, vis.js provides the best possible representation of a timeline, one that meets the requirements of our project. To know more about how to make a timeline using vis.js, click [http://visjs.org/docs/timeline/ here].

The timeline contains a single horizontal axis that is divided into time intervals equally separated from each other.

Let us consider an example where a student makes several submissions to an assignment. The student uploads a hyperlink "https ://www.facebook.com" and an HTML file as submissions. The assignment has several deadlines or due dates. There are due dates for Round 1 and Round 2 submissions for this particular assignment. There are also review deadlines for each of the rounds for the assignment. The student can give a peer review to other students' work on the assignment. The student is able to give feedback to the peer reviews that he received. We have used color coding to differentiate between different kinds of things visualized on the timeline. We have used '''Orange''' color for a round's submission and review deadline and '''Green''' color for all hyperlink submissions, file submissions and '''Cream''' color for feedback, peer review, team review and self review submissions.

So in summary, the following things have to be present on the timeline that are visualized as rectangular boxes on the timeline:
* The submission hyperlink box with the hyperlink
* The file upload box with a link to the uploaded file
* The Round 1 peer review deadline
* The Round 1 submission due date
* The Round 2 peer review deadline
* The Round 2 submission due date
* The Peer Review that the student gave to other students
* The feedback that the student gave to received reviews
* A self-feedback that the student gave to himself
* A team review that the student can give to his teammates
* Additionally, all the rectangular boxed have timestamps that display when the submission was made or the due date of that task

Apart from this, various buttons were also added to better interact with the timeline. These include:
* ''Zoom in'' - To zoom in by magnifying the viewing scale of the timeline
* ''Zoom out'' - To zoom out of the timeline
* ''Move Left'' - To move along the timeline's x-axis. The user can move forward by pressing the button
* ''Move Right'' - To move backward along the x-axis
* '''Recenter''' - Pressing this button helps the user to '''reset the zoom scale''' and the position of the x-axis in a way that all the items appear '''sorted in a single window.'''
A single '''vertical red line''' set to the '''current time''' on the x-axis indicates the current time at which the timeline is being viewed.

The '''percentage of zoom, percentage of window to move right/left''' can be modified as per convenience as mentioned in <script> of zoom buttons mentioned in later section of wiki.

We have added '''hyperlinks to enable quick access to all of the student submitted content'''. For example, the rectangular box that shows the submitted file has a hyperlink that links to the contents of the file. Similarly, the reviews submitted by the student is linked by the hyperlink in the Peer review rectangular box on the timeline.

Finally, after obtaining all the data from the database and the inclusion of all the stated information above to visualizing it in the timeline, the result would be something like this:

[[File:Img1.png]]

When the user selects a particular rectangular box on the timeline by clicking on it, then the line that connects the box to the timeline's x-axis becomes thicker and the color of the box also changes to '''White''' to indicate to the user the current box that is selected. If the user selects the file submission rectangular box (sample.html file), then the timeline would look like this:

[[File:Img2.png]]

==Files Involved==

*app/controllers/submission_records_controller.rb
*app/models/submission_record.rb
*app/views/student_task/list.html.erb

==Database Tables Involved==

*submission_records
*response_map
*due_dates
*participants
*assignments
*users
*teams
*teams_users
*signed_up_teams
*sign_up_topics

==Implementation==

The code to embed the timeline into the webpage is as follows

< div id="visualization">
< div class="menu">
<input id="zoomIn" value="Zoom in" type="button">
<input id="zoomOut" value="Zoom out" type="button">
<input id="moveLeft" value="Move left" type="button">
<input id="moveRight" value="Move right" type="button">
<input id="Recenter" value="Recenter" type="button">
< /div>
< /div>
<script type="text/javascript">
// DOM element where the Timeline will be attached
var container = document.getElementById('visualization');
// Create a DataSet (allows two way data-binding)
var items = new vis.DataSet(visualization_JSON);
// Configuration for the Timeline
var options = {
zoomMin: 1000 * 60 * 60 * 24, // one day in milliseconds
zoomMax: 1000 * 60 * 60 * 24 * 31 * 12 // about 1 year in milliseconds
};
// Create a Timeline
var timeline = new vis.Timeline(container, items, options);
</script>

There are several buttons that were inserted into the timeline to allow the user to interact with the timeline. The code for that is

<script>
var visualization_window=timeline.range.getRange();
function move (percentage) {
var range = timeline.getWindow();
var interval = range.end - range.start;
timeline.setWindow({
start: range.start.valueOf() - interval * percentage,
end: range.end.valueOf() - interval * percentage
});
}
// attach events to the navigation buttons
// zoom percentage in zoomin/zoomout can be adjusted below by passing paramenter. Similar is the case for move left/right along the x-axis
document.getElementById('zoomIn').onclick = function () { timeline.zoomIn( 0.2); };
document.getElementById('zoomOut').onclick = function () { timeline.zoomOut( 0.2); };
document.getElementById('moveLeft').onclick = function () { move( 0.2); };
document.getElementById('moveRight').onclick = function () { move(-0.2); };
document.getElementById('Recenter').onclick = function () {
var visualization_window_start = new Date(visualization_window.start);
var visualization_window_end = new Date(visualization_window.end);
timeline.setWindow(visualization_window_start, visualization_window_end, { animation: true });
};
</script>

The functionality of each button is explained in the Program Design section above.

It is necessary to obtain data from the Expertiza database to JSON format so that it can be processed by the timeline for visualization. After collecting the data from the database, processing it and storing it into a ruby variable, we use the JSON.parse() function to convert that information into JSON objects. To maintain continuity, the process of obtaining data and preprocessing it is explained later in the wiki. The code to convert the variable contents into a JSON object is as follows:

<script>
// converting @visualization_data array to javascript compatible JSON object
var visualization_JSON = JSON.parse('<%=raw @visualization_data.to_json%>');
var href_JSON = JSON.parse('<%= @href_arr.to_json.html_safe%>')
var temp;
//temp is temporary variable used to generate hyperlinks from content
for(i=0; i<visualization_JSON.length; i++) {
temp=visualization_JSON[i].content.split("<split>");
if(href_JSON[i]==' ')
visualization_JSON[i].content = temp[0]+"<br>"+temp.slice(1);
else
visualization_JSON[i].content = "<a href="+href_JSON[i]+" target='_blank'><b><u>"+temp[0]+"</u></b></a><br>"+temp.slice(1);
}
</script>

The following code is used to display due dates in the timeline. The types of due dates included are Round submission or Round review due date.

<% @href_arr= Array.new %>
<! -- @href_arr is used to store all the hyperlinks for each visualized object -->
<% @duedates = DueDate.where("parent_id = #{@assignment.id}")
@visualization_data = @duedates.map do |due|
@href_arr.push(""); #empty hyperlink as we do not provide hyperlinks for submissions/reviews
if due.deadline_type_id.eql? 1
{ :id => due.id, :start=> due.due_at, :className => "submissionDue", :content => "Round "+(due.round.to_s)+"<split>Submission due by "+'<br>'+due.due_at.strftime("%m/%d/%Y at %I:%M %p") }
else
{ :id => due.id, :start=> due.due_at, :className => "reviewDue", :content => "Round "+(due.round.to_s)+"<split>Review due by "+'<br>'+due.due_at.strftime("%m/%d/%Y at %I:%M %p") }
end
end
%>

Then we need to add submission hyperlinks and files in the timeline. The code for that is

< ! -- display only if submissions are made-->
<% unless @team.nil?
@submissions = SubmissionRecord.find_by_sql"select * from submission_records where assignment_id=#{@assignment.id} and team_id=#{@team.id}
and content NOT IN (select content from submission_records where assignment_id=#{@assignment.id} and team_id=#{@team.id} and UPPER(operation) Like 'REMOVE%')"
@visualization_data += @submissions.map do |submission|
#display_directory_tree(participant, files, true).html_safe
if (submission.operation).eql?('Submit File')
file = submission.content
ret=""
if File.exist?(file) && File.directory?(file)
ret += link_to File.basename(file), :controller => 'submitted_content', :action => 'edit', :id => participant.id, "current_folder[name]" => file
else
ret += "\n "
ret += link_to File.basename(file), :controller => 'submitted_content',
:action => 'download',
:id => @participant.id,
:download => File.basename(file),
"current_folder[name]" => File.dirname(file)
end
@href_arr.push(ret.split('"')[1])
#only file name instead of entire relative path need to be displayed on timeline. Hence we push the same in content, appending created time to it
{ :id => submission.id, :start=> submission.created_at, :className=> "fileUpload", :content => (submission.content).split('/')[-1]+'<split>'+
submission.created_at.strftime("%m/%d/%Y at %I:%M %p") }
else
@href_arr.push(submission.content)
{ :id => submission.id, :start=> submission.created_at, :className=> "hyperlinkUpload" ,:content => submission.content+'<split>'+
submission.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
end
end %>

'''Explanation:''' The following code fetches submission records of a student for a particular assignment from the '''submission_records''' table. Then after checking if the submission exists and when the type is a file, a hyperlink to the file's location path is obtained and pushed into the JSON. The same is done for a submission with the type Hyperlink.

Then to get the peer reviews, self-reviews, feedback and team reviews, the following code is used.

<! -- Reviews not yet started -->
<% unless @review_mappings.nil?
@review_mappings.each do |review_mapping_iterator|
@response_values = Response.where(:map_id => review_mapping_iterator.id)
@visualization_data += @response_values.map do |response_value_iterator|
if review_mapping_iterator.type=="ReviewResponseMap"
review_mapping = ResponseMap.find(review_mapping_iterator.reviewed_object_id)
participant = AssignmentTeam.get_first_member(review_mapping_iterator.reviewee_id)
topic_id = SignedUpTeam.topic_id(participant.parent_id, participant.user_id)
if !topic_id.nil?
if SignUpTopic.find(topic_id).topic_identifier != ''
@topic_name=SignUpTopic.find(topic_id).topic_identifier+": "+SignUpTopic.find(topic_id).topic_name
else
@topic_name=SignUpTopic.find(topic_id).topic_name
end
end
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "review", :content => "Peer Review -
Round "+response_value_iterator.round.to_s+"<split> Review for: #{@topic_name}"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
elsif review_mapping_iterator.type=="SelfReviewResponseMap"
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "selfReview", :content => "Self Feedback -
Round "+response_value_iterator.round.to_s+"<split>Self Feedback"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
elsif review_mapping_iterator.type=="TeammateReviewResponseMap"
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
reviewee = ResponseMap.where(:reviewer_id => "#{review_mapping_iterator.reviewer_id}", :id =>"#{review_mapping_iterator.id}").pluck(:reviewee_id)
puts reviewee.to_s+" "+review_mapping_iterator.reviewer_id.to_s+" "+review_mapping_iterator.id.to_s
user_id = Participant.where(:id=> "#{reviewee[0]}").pluck(:user_id)
reviewee_name = User.where(:id=>"#{user_id[0]}").pluck(:name)
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "teamReview", :content => "Team Review -
Round "+response_value_iterator.round.to_s+"<split>Team review for #{reviewee_name[0]}"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
else
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "feedback", :content => "Feedback -
Round "+response_value_iterator.round.to_s+"<split>Feedback"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
end
end
end
end %>

==Test Plan==
===Automated test using RSpec===

Resources -
* [http://rspec.info/ RSpec]
* [https://github.com/thoughtbot/factory_girl Factory Girl ruby gem]

A new file with the name <b>timestamps_for_students_submissions_spec.rb</b> file was created in <b>spec/features</b> folder with various test cases to test the changes.

===Testing from UI===
Testing the project using the User Interface.
*Login as an instructor, go to manage assignments-> select an assignment-> add students to assignment->update duedates.
*Impersonate as one of student -> navigate to the particular assignment edited in above step.
*You shall see a timeline with duedates
*Click on your work, submit hyperlink/files, same will be displayed in that particular assignment home page(navigate to previous page)
*Review teammates work/ give a peer review/ submit a self review/ submit feedback to review received, same will be reflected in respective assignment home page along with a hyperlink to the particular review given.
*The submission along with the timestamps for each submission along with hyperlinks to each of student's work is displayed in timeline.
*One can test for the Edge cases mentioned above too.

We have written tests for 3 scenarios
* '''Scenario 1: Testing whether deadlines are visible on the graph:'''
We created a dummy assignment with associated deadline in “before” statement. The code for that is:

before(:each) do
create(:assignment, name: "E1797-Test", directory_path: 'test_assignment')
create_list(:participant, 3)
create(:assignment_node)
create(:deadline_type, name: "submission")
create(:deadline_type, name: "review")
create(:deadline_type, name: "metareview")
create(:deadline_type, name: "drop_topic")
create(:deadline_type, name: "team_formation")
create(:deadline_right)
create(:deadline_right, name: 'Late')
create(:deadline_right, name: 'OK')
create(:assignment_due_date, deadline_type: DeadlineType.where(name: 'review').first, due_at: '2200-12-23 03:33:23')
login_as("student2065")
visit '/student_task/list'
end

Then, in the test case we tested whether the deadline is present on the graph.
The RSpec Feature testing code is :

it 'displays review due dates along with its timestamps' do
#checks whether the UI has above given deadline
page.html.should include('2200-12-23 03:33:23')
end

* '''Scenario 2: Testing whether submitted linked is visible on the graph:'''
Since we already created a assignment in the “before” statement In this particular test case, we submitted the work for an assignment in “Your Work” tab and checked whether this link is present in the graph. The RSpec code is as follows:

it 'displays submitted hyperlink along with timestamp' do
#submit a generic link for this assignment
click_link "E1797-Test"
click_link "Your work"
fill_in "submission", with: "http: //www.google.com"
click_button "Upload link"
#expect the same link to be present in our graph
page.all('a', :text => 'Assignments')[1].click
click_link "E1797-Test"
page.html.should include('https: //www.google.com')
end

* '''Scenario 3: Testing whether submitted file is visible on the graph:'''
In this particular test case a file as submission for an assignment was uploaded. After this. it is checked whether this file is present in the graph.

it 'displays submitted file along with timestamp' do
#submit a generic file for this assignment
click_link "E1797-Test"
click_link "Your work"
file_path = Rails.root + "spec/features/timestamp_students_submissions_spec.rb"
attach_file('uploaded_file', file_path)
click_on 'Upload file'
#expect the same file to be present in our graph
page.all('a', :text => 'Assignments')[1].click
click_link "E1797-Test"
page.html.should include('timestamp_students_submissions_spec.rb')
end

==Edge Cases==

'''Timeline behavior when the student opens the view page of a newly created assignment'''

* When the user has not made any submissions, reviews or feedbacks to reviews to the assignment, the timeline must only display the due dates of the assignment.

'''Timeline behavior when student has not joined any team and makes submissions'''

* When a student who is not part of any team makes a submission, he is assigned a team_ID by Expertiza and all submissions made by him are linked to that ID. So only those submissions will be displayed on the timeline.

'''Timeline behavior when the student joins a team, what happens to the submissions he made before joining the team'''

* When he joins a team and he receives a new team_ID, any submissions made hereafter will be made under the new team_ID and all previous submissions made by the student will not be shown on the timeline(this is how Expertiza assigns team_IDs and submissions- the same is reflected in 'your work' section of a user's profile). Only the user submissions made after he joins the team is shown on the timeline.

'''Timeline behavior when there is no topic name for a given assignment'''

* Sometimes topics in assignment are not named(eg program 2 - car rental app). In the peer review submission rectangular box displayed on the timeline after the student submits a peer review, instead of showing the label "Review for [topic name]", the label says "Review".

'''Timeline behavior when a submitted hyperlink is removed'''

* When a submitted hyperlink is removed, the submission must not be displayed on the timeline any more.

'''A submission must be made before a peer review can be given'''

* This condition holds even if the deadline has already passed.

==Future modifications==

We can also include icons that are embedded into the rectangles. They act as visual aids to help the user quickly recognize the category of the box. We propose a design that would look something like this:

[[File:S3.png]]

===References===

#[https://github.com/expertiza/expertiza Expertiza on GitHub]
#[http://expertiza.ncsu.edu/ The live Expertiza website]
#[http://wiki.expertiza.ncsu.edu/index.php/Expertiza_documentation Expertiza project documentation wiki]
#[https://relishapp.com/rspec Rspec Documentation]
#[http://visjs.org/docs/timeline/ Vis.js Documentation for Timeline]
#[https://github.com/expertiza/expertiza/pull/1126 Github pull request submitted]
#[https://github.com/ShyamKatta/expertiza/tree/E1797/ Github - expertiza forked repository]

CSC/ECE 517 Fall 2017/E1797 Timestamps for students submission

2017-12-06T11:12:03Z

Skatta3: /* Edge Cases */

==Introduction==

Expertiza is an open source project created using Ruby on Rails. Students can upload and submit their assignments and related work online for grading purposes. Through this project, we aim to provide an interactive and refreshing visual timeline for all the student submissions for each assignment. We provided dynamic functions such as zoom in/zoom out to move left/right and recenter to provide smooth user experience.

===Existing System===

Currently, there exist various types of submissions that a student can make for an assignment for which timestamps are generated.
*When a student submits links or uploads files as submissions to an assignment in Expertiza, a timestamp is created for the date and time at which each of the submissions was done.
*The student may also be able to give reviews to other works for a particular assignment. These reviews when submitted also have an associated timestamp.
*There also exist timestamps for deadlines that have passed and that are upcoming for an assignment submission or a review to be done.
*For the reviews that a student receives for his work, the student can give feedback to each of the reviews. The submitted feedbacks also get timestamps.

Currently there exists no functionality to view all these submissions and their timestamps in a single, aggregated way.

===Proposed System===

Our project was to solve this issue by creating a Visualization that helps the student view all the timestamps for his submissions. The goal is to create a Timeline that shows all the timestamps of submitted records and links to the submitted content wherever necessary. The default state of the timeline is a point on the x-axis set to the current date and time. The timeline is interactive and allows the user to zoom in and out to change the viewing scale of the timeline. The user can also scroll in the timeline to move the timeline forward or backward from the current time. After all of this is done, the user can reset the timeline to change his view to the default state.

With this, the student is able to view his entire submission history for an assignment in a convenient way.

==Problem Statement==

In Expertiza, it is possible for the instructor to view the submission records of a particular student. However, there is no way for students to check the history of their submission records. In this project, we are required to keep track of students’ activities and visualize them on their end by using a timeline chart.

<b>What needs to be visualized on the timeline:</b>

* Hyperlink submission record with timestamps
* File upload record with timestamps
* Due dates
*Visualization of Peer review of others works, which includes:
** A Review hyperlink that redirects to the review by clicking on it
** The Round number (To be displayed only if the assignment has multiple rounds)
** Timestamps
*Visualization of Author feedback on others review, which includes:
** A Feedback hyperlink that redirects to the feedback by clicking on it
** Timestamps

===Understanding Problem Statement===

The problem statement states the following issues that had to be resolved.

'''Issue-1:'''
Submission records with timestamps:

A student can submit their work for an assignment using "Your work" button in the respective assignment page. Students have two options to submit their work :
* Giving a hyperlink.
* Uploading a file.
As soon as the user submits any one of these, we needed to show hyperlink or file with the time-stamp on our visualization graph. Also, we needed to provide the submitted '''hyperlink or a link''' to the file on the visualization so that it will be easy for the user to navigate from a single page.

'''Issue-2:'''
Due dates:

There are different due dates for every assignment like Round-1 submission, Round-2 submission, Round-1 review and Round-2 review Due Dates. These are different from submission time stamps because a submission's timestamp depends upon the time at which the user had submitted the work whereas a due date is the deadline date fixed by an instructor. Visualizing them by adding them into the timeline, helps the student to track all due dates in a single graph.

'''Issue-3:'''
Peer Review other's work:

A student needs to review work of different teams during the course of the assignment. As of now in order to view the review, Expertiza requires the user to go to the "other's work" page in the assignment. Instead of this, we want this data to be viewed in our visualization graph. This issue includes a timestamp, link to view review, review round number to be shown in the graph.
'''Note:''' this review is the peer review '''given by this particular student''' to different teams as part of the assignment, '''not the reviews the student received.'''

'''Issue-4:'''
Author's feedback on other's Review
:
A student can give feedback for the review he/she received for a specific assignment. So this information also needs to be included in the graph. We need to show the timestamp and hyperlink to the feedback. It must be noted that the feedback here is not the feedback he got for review given by him/her but the feedback he/she gave for the reviews the had received.

==Program Design==

To visualize the timeline graphically we decided to use the vis.js JavaScript library. This library provides various interactive visualization charts (like graphs, networks, timelines, etc) to visualize data in real time. We chose to work on this library because when compared to other popular visualization libraries, vis.js provides the best possible representation of a timeline, one that meets the requirements of our project. To know more about how to make a timeline using vis.js, click [http://visjs.org/docs/timeline/ here].

The timeline contains a single horizontal axis that is divided into time intervals equally separated from each other.

Let us consider an example where a student makes several submissions to an assignment. The student uploads a hyperlink "https ://www.facebook.com" and an HTML file as submissions. The assignment has several deadlines or due dates. There are due dates for Round 1 and Round 2 submissions for this particular assignment. There are also review deadlines for each of the rounds for the assignment. The student can give a peer review to other students' work on the assignment. The student is able to give feedback to the peer reviews that he received. We have used color coding to differentiate between different kinds of things visualized on the timeline. We have used '''Orange''' color for a round's submission and review deadline and '''Green''' color for all hyperlink submissions, file submissions and '''Cream''' color for feedback, peer review, team review and self review submissions.

So in summary, the following things have to be present on the timeline that are visualized as rectangular boxes on the timeline:
* The submission hyperlink box with the hyperlink
* The file upload box with a link to the uploaded file
* The Round 1 peer review deadline
* The Round 1 submission due date
* The Round 2 peer review deadline
* The Round 2 submission due date
* The Peer Review that the student gave to other students
* The feedback that the student gave to received reviews
* A self-feedback that the student gave to himself
* A team review that the student can give to his teammates
* Additionally, all the rectangular boxed have timestamps that display when the submission was made or the due date of that task

Apart from this, various buttons were also added to better interact with the timeline. These include:
* ''Zoom in'' - To zoom in by magnifying the viewing scale of the timeline
* ''Zoom out'' - To zoom out of the timeline
* ''Move Left'' - To move along the timeline's x-axis. The user can move forward by pressing the button
* ''Move Right'' - To move backward along the x-axis
* '''Recenter''' - Pressing this button helps the user to '''reset the zoom scale''' and the position of the x-axis in a way that all the items appear '''sorted in a single window.'''
A single '''vertical red line''' set to the '''current time''' on the x-axis indicates the current time at which the timeline is being viewed.

The '''percentage of zoom, percentage of window to move right/left''' can be modified as per convenience as mentioned in <script> of zoom buttons mentioned in later section of wiki.

We have added '''hyperlinks to enable quick access to all of the student submitted content'''. For example, the rectangular box that shows the submitted file has a hyperlink that links to the contents of the file. Similarly, the reviews submitted by the student is linked by the hyperlink in the Peer review rectangular box on the timeline.

Finally, after obtaining all the data from the database and the inclusion of all the stated information above to visualizing it in the timeline, the result would be something like this:

[[File:Img1.png]]

When the user selects a particular rectangular box on the timeline by clicking on it, then the line that connects the box to the timeline's x-axis becomes thicker and the color of the box also changes to '''White''' to indicate to the user the current box that is selected. If the user selects the file submission rectangular box (sample.html file), then the timeline would look like this:

[[File:Img2.png]]

==Files Involved==

*app/controllers/submission_records_controller.rb
*app/models/submission_record.rb
*app/views/student_task/list.html.erb

==Database Tables Involved==

*submission_records
*response_map
*due_dates
*participants
*assignments
*users
*teams
*teams_users
*signed_up_teams
*sign_up_topics

==Implementation==

The code to embed the timeline into the webpage is as follows

< div id="visualization">
< div class="menu">
<input id="zoomIn" value="Zoom in" type="button">
<input id="zoomOut" value="Zoom out" type="button">
<input id="moveLeft" value="Move left" type="button">
<input id="moveRight" value="Move right" type="button">
<input id="Recenter" value="Recenter" type="button">
< /div>
< /div>
<script type="text/javascript">
// DOM element where the Timeline will be attached
var container = document.getElementById('visualization');
// Create a DataSet (allows two way data-binding)
var items = new vis.DataSet(visualization_JSON);
// Configuration for the Timeline
var options = {
zoomMin: 1000 * 60 * 60 * 24, // one day in milliseconds
zoomMax: 1000 * 60 * 60 * 24 * 31 * 12 // about 1 year in milliseconds
};
// Create a Timeline
var timeline = new vis.Timeline(container, items, options);
</script>

There are several buttons that were inserted into the timeline to allow the user to interact with the timeline. The code for that is

<script>
var visualization_window=timeline.range.getRange();
function move (percentage) {
var range = timeline.getWindow();
var interval = range.end - range.start;
timeline.setWindow({
start: range.start.valueOf() - interval * percentage,
end: range.end.valueOf() - interval * percentage
});
}
// attach events to the navigation buttons
// zoom percentage in zoomin/zoomout can be adjusted below by passing paramenter. Similar is the case for move left/right along the x-axis
document.getElementById('zoomIn').onclick = function () { timeline.zoomIn( 0.2); };
document.getElementById('zoomOut').onclick = function () { timeline.zoomOut( 0.2); };
document.getElementById('moveLeft').onclick = function () { move( 0.2); };
document.getElementById('moveRight').onclick = function () { move(-0.2); };
document.getElementById('Recenter').onclick = function () {
var visualization_window_start = new Date(visualization_window.start);
var visualization_window_end = new Date(visualization_window.end);
timeline.setWindow(visualization_window_start, visualization_window_end, { animation: true });
};
</script>

The functionality of each button is explained in the Program Design section above.

It is necessary to obtain data from the Expertiza database to JSON format so that it can be processed by the timeline for visualization. After collecting the data from the database, processing it and storing it into a ruby variable, we use the JSON.parse() function to convert that information into JSON objects. To maintain continuity, the process of obtaining data and preprocessing it is explained later in the wiki. The code to convert the variable contents into a JSON object is as follows:

<script>
// converting @visualization_data array to javascript compatible JSON object
var visualization_JSON = JSON.parse('<%=raw @visualization_data.to_json%>');
var href_JSON = JSON.parse('<%= @href_arr.to_json.html_safe%>')
var temp;
//temp is temporary variable used to generate hyperlinks from content
for(i=0; i<visualization_JSON.length; i++) {
temp=visualization_JSON[i].content.split("<split>");
if(href_JSON[i]==' ')
visualization_JSON[i].content = temp[0]+"<br>"+temp.slice(1);
else
visualization_JSON[i].content = "<a href="+href_JSON[i]+" target='_blank'><b><u>"+temp[0]+"</u></b></a><br>"+temp.slice(1);
}
</script>

The following code is used to display due dates in the timeline. The types of due dates included are Round submission or Round review due date.

<% @href_arr= Array.new %>
<! -- @href_arr is used to store all the hyperlinks for each visualized object -->
<% @duedates = DueDate.where("parent_id = #{@assignment.id}")
@visualization_data = @duedates.map do |due|
@href_arr.push(""); #empty hyperlink as we do not provide hyperlinks for submissions/reviews
if due.deadline_type_id.eql? 1
{ :id => due.id, :start=> due.due_at, :className => "submissionDue", :content => "Round "+(due.round.to_s)+"<split>Submission due by "+'<br>'+due.due_at.strftime("%m/%d/%Y at %I:%M %p") }
else
{ :id => due.id, :start=> due.due_at, :className => "reviewDue", :content => "Round "+(due.round.to_s)+"<split>Review due by "+'<br>'+due.due_at.strftime("%m/%d/%Y at %I:%M %p") }
end
end
%>

Then we need to add submission hyperlinks and files in the timeline. The code for that is

< ! -- display only if submissions are made-->
<% unless @team.nil?
@submissions = SubmissionRecord.find_by_sql"select * from submission_records where assignment_id=#{@assignment.id} and team_id=#{@team.id}
and content NOT IN (select content from submission_records where assignment_id=#{@assignment.id} and team_id=#{@team.id} and UPPER(operation) Like 'REMOVE%')"
@visualization_data += @submissions.map do |submission|
#display_directory_tree(participant, files, true).html_safe
if (submission.operation).eql?('Submit File')
file = submission.content
ret=""
if File.exist?(file) && File.directory?(file)
ret += link_to File.basename(file), :controller => 'submitted_content', :action => 'edit', :id => participant.id, "current_folder[name]" => file
else
ret += "\n "
ret += link_to File.basename(file), :controller => 'submitted_content',
:action => 'download',
:id => @participant.id,
:download => File.basename(file),
"current_folder[name]" => File.dirname(file)
end
@href_arr.push(ret.split('"')[1])
#only file name instead of entire relative path need to be displayed on timeline. Hence we push the same in content, appending created time to it
{ :id => submission.id, :start=> submission.created_at, :className=> "fileUpload", :content => (submission.content).split('/')[-1]+'<split>'+
submission.created_at.strftime("%m/%d/%Y at %I:%M %p") }
else
@href_arr.push(submission.content)
{ :id => submission.id, :start=> submission.created_at, :className=> "hyperlinkUpload" ,:content => submission.content+'<split>'+
submission.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
end
end %>

'''Explanation:''' The following code fetches submission records of a student for a particular assignment from the '''submission_records''' table. Then after checking if the submission exists and when the type is a file, a hyperlink to the file's location path is obtained and pushed into the JSON. The same is done for a submission with the type Hyperlink.

Then to get the peer reviews, self-reviews, feedback and team reviews, the following code is used.

<! -- Reviews not yet started -->
<% unless @review_mappings.nil?
@review_mappings.each do |review_mapping_iterator|
@response_values = Response.where(:map_id => review_mapping_iterator.id)
@visualization_data += @response_values.map do |response_value_iterator|
if review_mapping_iterator.type=="ReviewResponseMap"
review_mapping = ResponseMap.find(review_mapping_iterator.reviewed_object_id)
participant = AssignmentTeam.get_first_member(review_mapping_iterator.reviewee_id)
topic_id = SignedUpTeam.topic_id(participant.parent_id, participant.user_id)
if !topic_id.nil?
if SignUpTopic.find(topic_id).topic_identifier != ''
@topic_name=SignUpTopic.find(topic_id).topic_identifier+": "+SignUpTopic.find(topic_id).topic_name
else
@topic_name=SignUpTopic.find(topic_id).topic_name
end
end
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "review", :content => "Peer Review -
Round "+response_value_iterator.round.to_s+"<split> Review for: #{@topic_name}"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
elsif review_mapping_iterator.type=="SelfReviewResponseMap"
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "selfReview", :content => "Self Feedback -
Round "+response_value_iterator.round.to_s+"<split>Self Feedback"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
elsif review_mapping_iterator.type=="TeammateReviewResponseMap"
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
reviewee = ResponseMap.where(:reviewer_id => "#{review_mapping_iterator.reviewer_id}", :id =>"#{review_mapping_iterator.id}").pluck(:reviewee_id)
puts reviewee.to_s+" "+review_mapping_iterator.reviewer_id.to_s+" "+review_mapping_iterator.id.to_s
user_id = Participant.where(:id=> "#{reviewee[0]}").pluck(:user_id)
reviewee_name = User.where(:id=>"#{user_id[0]}").pluck(:name)
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "teamReview", :content => "Team Review -
Round "+response_value_iterator.round.to_s+"<split>Team review for #{reviewee_name[0]}"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
else
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "feedback", :content => "Feedback -
Round "+response_value_iterator.round.to_s+"<split>Feedback"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
end
end
end
end %>

==Test Plan==
===Automated test using RSpec===

Resources -
* [http://rspec.info/ RSpec]
* [https://github.com/thoughtbot/factory_girl Factory Girl ruby gem]

A new file with the name <b>timestamps_for_students_submissions_spec.rb</b> file was created in <b>spec/features</b> folder with various test cases to test the changes.

===Testing from UI===
Testing the project using the User Interface.
*Login as an instructor, go to manage assignments-> select an assignment-> add students to assignment->update duedates.
*Impersonate as one of student -> navigate to the particular assignment edited in above step.
*You shall see a timeline with duedates
*Click on your work, submit hyperlink/files, same will be displayed in that particular assignment home page(navigate to previous page)
*Review teammates work/ give a peer review/ submit a self review/ submit feedback to review received, same will be reflected in respective assignment home page along with a hyperlink to the particular review given.
*The submission along with the timestamps for each submission along with hyperlinks to each of student's work is displayed in timeline.
*One can test for the Edge cases mentioned above too.

We have written tests for 3 scenarios
* '''Scenario 1: Testing whether deadlines are visible on the graph:'''
We created a dummy assignment with associated deadline in “before” statement. The code for that is:

before(:each) do
create(:assignment, name: "E1797-Test", directory_path: 'test_assignment')
create_list(:participant, 3)
create(:assignment_node)
create(:deadline_type, name: "submission")
create(:deadline_type, name: "review")
create(:deadline_type, name: "metareview")
create(:deadline_type, name: "drop_topic")
create(:deadline_type, name: "team_formation")
create(:deadline_right)
create(:deadline_right, name: 'Late')
create(:deadline_right, name: 'OK')
create(:assignment_due_date, deadline_type: DeadlineType.where(name: 'review').first, due_at: '2200-12-23 03:33:23')
login_as("student2065")
visit '/student_task/list'
end

Then, in the test case we tested whether the deadline is present on the graph.
The RSpec Feature testing code is :

it 'displays review due dates along with its timestamps' do
#checks whether the UI has above given deadline
page.html.should include('2200-12-23 03:33:23')
end

* '''Scenario 2: Testing whether submitted linked is visible on the graph:'''
Since we already created a assignment in the “before” statement In this particular test case, we submitted the work for an assignment in “Your Work” tab and checked whether this link is present in the graph. The RSpec code is as follows:

it 'displays submitted hyperlink along with timestamp' do
#submit a generic link for this assignment
click_link "E1797-Test"
click_link "Your work"
fill_in "submission", with: "http: //www.google.com"
click_button "Upload link"
#expect the same link to be present in our graph
page.all('a', :text => 'Assignments')[1].click
click_link "E1797-Test"
page.html.should include('https: //www.google.com')
end

* '''Scenario 3: Testing whether submitted file is visible on the graph:'''
In this particular test case a file as submission for an assignment was uploaded. After this. it is checked whether this file is present in the graph.

it 'displays submitted file along with timestamp' do
#submit a generic file for this assignment
click_link "E1797-Test"
click_link "Your work"
file_path = Rails.root + "spec/features/timestamp_students_submissions_spec.rb"
attach_file('uploaded_file', file_path)
click_on 'Upload file'
#expect the same file to be present in our graph
page.all('a', :text => 'Assignments')[1].click
click_link "E1797-Test"
page.html.should include('timestamp_students_submissions_spec.rb')
end

==Edge Cases==

'''Timeline behavior when the student opens the view page of a newly created assignment'''

* When the user has not made any submissions, reviews or feedbacks to reviews to the assignment, the timeline must only display the due dates of the assignment.

'''Timeline behavior when student has not joined any team and makes submissions'''

* When a student who is not part of any team makes a submission, he is assigned a team_ID by Expertiza and all submissions made by him are linked to that ID. So only those submissions will be displayed on the timeline.

'''Timeline behavior when the student joins a team, what happens to the submissions he made before joining the team'''

* When he joins a team and he receives a new team_ID, any submissions made hereafter will be made under the new team_ID and all previous submissions made by the student will not be shown on the timeline(this is how Expertiza assigns team_IDs and submissions- the same is reflected in 'your work' section of a user's profile). Only the user submissions made after he joins the team is shown on the timeline.

'''Timeline behavior when there is no topic name for a given assignment'''

* Sometimes topics in assignment are not named(eg program 2 - car rental app). In the peer review submission rectangular box displayed on the timeline after the student submits a peer review, instead of showing the label "Review for [topic name]", the label says "Review".

'''Timeline behavior when a submitted hyperlink is removed'''

* When a submitted hyperlink is removed, the submission must not be displayed on the timeline any more.

'''A submission must be made before a peer review can be given'''

* This condition holds even if the deadline has already passed.

==Future modifications==

We can also include icons that are embedded into the rectangles. They act as visual aids to help the user quickly recognize the category of the box. We propose a design that would look something like this:

[[File:S3.png]]

===References===

#[https://github.com/expertiza/expertiza Expertiza on GitHub]
#[http://expertiza.ncsu.edu/ The live Expertiza website]
#[http://wiki.expertiza.ncsu.edu/index.php/Expertiza_documentation Expertiza project documentation wiki]
#[https://relishapp.com/rspec Rspec Documentation]
#[http://visjs.org/docs/timeline/ Vis.js Documentation for Timeline]
#[ Github pull request submitted]
#[https://github.com/ShyamKatta/expertiza/tree/E1797/ Github - expertiza forked repository]

CSC/ECE 517 Fall 2017/E1797 Timestamps for students submission

2017-12-06T11:11:36Z

Skatta3: /* Edge Cases */

==Introduction==

Expertiza is an open source project created using Ruby on Rails. Students can upload and submit their assignments and related work online for grading purposes. Through this project, we aim to provide an interactive and refreshing visual timeline for all the student submissions for each assignment. We provided dynamic functions such as zoom in/zoom out to move left/right and recenter to provide smooth user experience.

===Existing System===

Currently, there exist various types of submissions that a student can make for an assignment for which timestamps are generated.
*When a student submits links or uploads files as submissions to an assignment in Expertiza, a timestamp is created for the date and time at which each of the submissions was done.
*The student may also be able to give reviews to other works for a particular assignment. These reviews when submitted also have an associated timestamp.
*There also exist timestamps for deadlines that have passed and that are upcoming for an assignment submission or a review to be done.
*For the reviews that a student receives for his work, the student can give feedback to each of the reviews. The submitted feedbacks also get timestamps.

Currently there exists no functionality to view all these submissions and their timestamps in a single, aggregated way.

===Proposed System===

Our project was to solve this issue by creating a Visualization that helps the student view all the timestamps for his submissions. The goal is to create a Timeline that shows all the timestamps of submitted records and links to the submitted content wherever necessary. The default state of the timeline is a point on the x-axis set to the current date and time. The timeline is interactive and allows the user to zoom in and out to change the viewing scale of the timeline. The user can also scroll in the timeline to move the timeline forward or backward from the current time. After all of this is done, the user can reset the timeline to change his view to the default state.

With this, the student is able to view his entire submission history for an assignment in a convenient way.

==Problem Statement==

In Expertiza, it is possible for the instructor to view the submission records of a particular student. However, there is no way for students to check the history of their submission records. In this project, we are required to keep track of students’ activities and visualize them on their end by using a timeline chart.

<b>What needs to be visualized on the timeline:</b>

* Hyperlink submission record with timestamps
* File upload record with timestamps
* Due dates
*Visualization of Peer review of others works, which includes:
** A Review hyperlink that redirects to the review by clicking on it
** The Round number (To be displayed only if the assignment has multiple rounds)
** Timestamps
*Visualization of Author feedback on others review, which includes:
** A Feedback hyperlink that redirects to the feedback by clicking on it
** Timestamps

===Understanding Problem Statement===

The problem statement states the following issues that had to be resolved.

'''Issue-1:'''
Submission records with timestamps:

A student can submit their work for an assignment using "Your work" button in the respective assignment page. Students have two options to submit their work :
* Giving a hyperlink.
* Uploading a file.
As soon as the user submits any one of these, we needed to show hyperlink or file with the time-stamp on our visualization graph. Also, we needed to provide the submitted '''hyperlink or a link''' to the file on the visualization so that it will be easy for the user to navigate from a single page.

'''Issue-2:'''
Due dates:

There are different due dates for every assignment like Round-1 submission, Round-2 submission, Round-1 review and Round-2 review Due Dates. These are different from submission time stamps because a submission's timestamp depends upon the time at which the user had submitted the work whereas a due date is the deadline date fixed by an instructor. Visualizing them by adding them into the timeline, helps the student to track all due dates in a single graph.

'''Issue-3:'''
Peer Review other's work:

A student needs to review work of different teams during the course of the assignment. As of now in order to view the review, Expertiza requires the user to go to the "other's work" page in the assignment. Instead of this, we want this data to be viewed in our visualization graph. This issue includes a timestamp, link to view review, review round number to be shown in the graph.
'''Note:''' this review is the peer review '''given by this particular student''' to different teams as part of the assignment, '''not the reviews the student received.'''

'''Issue-4:'''
Author's feedback on other's Review
:
A student can give feedback for the review he/she received for a specific assignment. So this information also needs to be included in the graph. We need to show the timestamp and hyperlink to the feedback. It must be noted that the feedback here is not the feedback he got for review given by him/her but the feedback he/she gave for the reviews the had received.

==Program Design==

To visualize the timeline graphically we decided to use the vis.js JavaScript library. This library provides various interactive visualization charts (like graphs, networks, timelines, etc) to visualize data in real time. We chose to work on this library because when compared to other popular visualization libraries, vis.js provides the best possible representation of a timeline, one that meets the requirements of our project. To know more about how to make a timeline using vis.js, click [http://visjs.org/docs/timeline/ here].

The timeline contains a single horizontal axis that is divided into time intervals equally separated from each other.

Let us consider an example where a student makes several submissions to an assignment. The student uploads a hyperlink "https ://www.facebook.com" and an HTML file as submissions. The assignment has several deadlines or due dates. There are due dates for Round 1 and Round 2 submissions for this particular assignment. There are also review deadlines for each of the rounds for the assignment. The student can give a peer review to other students' work on the assignment. The student is able to give feedback to the peer reviews that he received. We have used color coding to differentiate between different kinds of things visualized on the timeline. We have used '''Orange''' color for a round's submission and review deadline and '''Green''' color for all hyperlink submissions, file submissions and '''Cream''' color for feedback, peer review, team review and self review submissions.

So in summary, the following things have to be present on the timeline that are visualized as rectangular boxes on the timeline:
* The submission hyperlink box with the hyperlink
* The file upload box with a link to the uploaded file
* The Round 1 peer review deadline
* The Round 1 submission due date
* The Round 2 peer review deadline
* The Round 2 submission due date
* The Peer Review that the student gave to other students
* The feedback that the student gave to received reviews
* A self-feedback that the student gave to himself
* A team review that the student can give to his teammates
* Additionally, all the rectangular boxed have timestamps that display when the submission was made or the due date of that task

Apart from this, various buttons were also added to better interact with the timeline. These include:
* ''Zoom in'' - To zoom in by magnifying the viewing scale of the timeline
* ''Zoom out'' - To zoom out of the timeline
* ''Move Left'' - To move along the timeline's x-axis. The user can move forward by pressing the button
* ''Move Right'' - To move backward along the x-axis
* '''Recenter''' - Pressing this button helps the user to '''reset the zoom scale''' and the position of the x-axis in a way that all the items appear '''sorted in a single window.'''
A single '''vertical red line''' set to the '''current time''' on the x-axis indicates the current time at which the timeline is being viewed.

The '''percentage of zoom, percentage of window to move right/left''' can be modified as per convenience as mentioned in <script> of zoom buttons mentioned in later section of wiki.

We have added '''hyperlinks to enable quick access to all of the student submitted content'''. For example, the rectangular box that shows the submitted file has a hyperlink that links to the contents of the file. Similarly, the reviews submitted by the student is linked by the hyperlink in the Peer review rectangular box on the timeline.

Finally, after obtaining all the data from the database and the inclusion of all the stated information above to visualizing it in the timeline, the result would be something like this:

[[File:Img1.png]]

When the user selects a particular rectangular box on the timeline by clicking on it, then the line that connects the box to the timeline's x-axis becomes thicker and the color of the box also changes to '''White''' to indicate to the user the current box that is selected. If the user selects the file submission rectangular box (sample.html file), then the timeline would look like this:

[[File:Img2.png]]

==Files Involved==

*app/controllers/submission_records_controller.rb
*app/models/submission_record.rb
*app/views/student_task/list.html.erb

==Database Tables Involved==

*submission_records
*response_map
*due_dates
*participants
*assignments
*users
*teams
*teams_users
*signed_up_teams
*sign_up_topics

==Implementation==

The code to embed the timeline into the webpage is as follows

< div id="visualization">
< div class="menu">
<input id="zoomIn" value="Zoom in" type="button">
<input id="zoomOut" value="Zoom out" type="button">
<input id="moveLeft" value="Move left" type="button">
<input id="moveRight" value="Move right" type="button">
<input id="Recenter" value="Recenter" type="button">
< /div>
< /div>
<script type="text/javascript">
// DOM element where the Timeline will be attached
var container = document.getElementById('visualization');
// Create a DataSet (allows two way data-binding)
var items = new vis.DataSet(visualization_JSON);
// Configuration for the Timeline
var options = {
zoomMin: 1000 * 60 * 60 * 24, // one day in milliseconds
zoomMax: 1000 * 60 * 60 * 24 * 31 * 12 // about 1 year in milliseconds
};
// Create a Timeline
var timeline = new vis.Timeline(container, items, options);
</script>

There are several buttons that were inserted into the timeline to allow the user to interact with the timeline. The code for that is

<script>
var visualization_window=timeline.range.getRange();
function move (percentage) {
var range = timeline.getWindow();
var interval = range.end - range.start;
timeline.setWindow({
start: range.start.valueOf() - interval * percentage,
end: range.end.valueOf() - interval * percentage
});
}
// attach events to the navigation buttons
// zoom percentage in zoomin/zoomout can be adjusted below by passing paramenter. Similar is the case for move left/right along the x-axis
document.getElementById('zoomIn').onclick = function () { timeline.zoomIn( 0.2); };
document.getElementById('zoomOut').onclick = function () { timeline.zoomOut( 0.2); };
document.getElementById('moveLeft').onclick = function () { move( 0.2); };
document.getElementById('moveRight').onclick = function () { move(-0.2); };
document.getElementById('Recenter').onclick = function () {
var visualization_window_start = new Date(visualization_window.start);
var visualization_window_end = new Date(visualization_window.end);
timeline.setWindow(visualization_window_start, visualization_window_end, { animation: true });
};
</script>

The functionality of each button is explained in the Program Design section above.

It is necessary to obtain data from the Expertiza database to JSON format so that it can be processed by the timeline for visualization. After collecting the data from the database, processing it and storing it into a ruby variable, we use the JSON.parse() function to convert that information into JSON objects. To maintain continuity, the process of obtaining data and preprocessing it is explained later in the wiki. The code to convert the variable contents into a JSON object is as follows:

<script>
// converting @visualization_data array to javascript compatible JSON object
var visualization_JSON = JSON.parse('<%=raw @visualization_data.to_json%>');
var href_JSON = JSON.parse('<%= @href_arr.to_json.html_safe%>')
var temp;
//temp is temporary variable used to generate hyperlinks from content
for(i=0; i<visualization_JSON.length; i++) {
temp=visualization_JSON[i].content.split("<split>");
if(href_JSON[i]==' ')
visualization_JSON[i].content = temp[0]+"<br>"+temp.slice(1);
else
visualization_JSON[i].content = "<a href="+href_JSON[i]+" target='_blank'><b><u>"+temp[0]+"</u></b></a><br>"+temp.slice(1);
}
</script>

The following code is used to display due dates in the timeline. The types of due dates included are Round submission or Round review due date.

<% @href_arr= Array.new %>
<! -- @href_arr is used to store all the hyperlinks for each visualized object -->
<% @duedates = DueDate.where("parent_id = #{@assignment.id}")
@visualization_data = @duedates.map do |due|
@href_arr.push(""); #empty hyperlink as we do not provide hyperlinks for submissions/reviews
if due.deadline_type_id.eql? 1
{ :id => due.id, :start=> due.due_at, :className => "submissionDue", :content => "Round "+(due.round.to_s)+"<split>Submission due by "+'<br>'+due.due_at.strftime("%m/%d/%Y at %I:%M %p") }
else
{ :id => due.id, :start=> due.due_at, :className => "reviewDue", :content => "Round "+(due.round.to_s)+"<split>Review due by "+'<br>'+due.due_at.strftime("%m/%d/%Y at %I:%M %p") }
end
end
%>

Then we need to add submission hyperlinks and files in the timeline. The code for that is

< ! -- display only if submissions are made-->
<% unless @team.nil?
@submissions = SubmissionRecord.find_by_sql"select * from submission_records where assignment_id=#{@assignment.id} and team_id=#{@team.id}
and content NOT IN (select content from submission_records where assignment_id=#{@assignment.id} and team_id=#{@team.id} and UPPER(operation) Like 'REMOVE%')"
@visualization_data += @submissions.map do |submission|
#display_directory_tree(participant, files, true).html_safe
if (submission.operation).eql?('Submit File')
file = submission.content
ret=""
if File.exist?(file) && File.directory?(file)
ret += link_to File.basename(file), :controller => 'submitted_content', :action => 'edit', :id => participant.id, "current_folder[name]" => file
else
ret += "\n "
ret += link_to File.basename(file), :controller => 'submitted_content',
:action => 'download',
:id => @participant.id,
:download => File.basename(file),
"current_folder[name]" => File.dirname(file)
end
@href_arr.push(ret.split('"')[1])
#only file name instead of entire relative path need to be displayed on timeline. Hence we push the same in content, appending created time to it
{ :id => submission.id, :start=> submission.created_at, :className=> "fileUpload", :content => (submission.content).split('/')[-1]+'<split>'+
submission.created_at.strftime("%m/%d/%Y at %I:%M %p") }
else
@href_arr.push(submission.content)
{ :id => submission.id, :start=> submission.created_at, :className=> "hyperlinkUpload" ,:content => submission.content+'<split>'+
submission.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
end
end %>

'''Explanation:''' The following code fetches submission records of a student for a particular assignment from the '''submission_records''' table. Then after checking if the submission exists and when the type is a file, a hyperlink to the file's location path is obtained and pushed into the JSON. The same is done for a submission with the type Hyperlink.

Then to get the peer reviews, self-reviews, feedback and team reviews, the following code is used.

<! -- Reviews not yet started -->
<% unless @review_mappings.nil?
@review_mappings.each do |review_mapping_iterator|
@response_values = Response.where(:map_id => review_mapping_iterator.id)
@visualization_data += @response_values.map do |response_value_iterator|
if review_mapping_iterator.type=="ReviewResponseMap"
review_mapping = ResponseMap.find(review_mapping_iterator.reviewed_object_id)
participant = AssignmentTeam.get_first_member(review_mapping_iterator.reviewee_id)
topic_id = SignedUpTeam.topic_id(participant.parent_id, participant.user_id)
if !topic_id.nil?
if SignUpTopic.find(topic_id).topic_identifier != ''
@topic_name=SignUpTopic.find(topic_id).topic_identifier+": "+SignUpTopic.find(topic_id).topic_name
else
@topic_name=SignUpTopic.find(topic_id).topic_name
end
end
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "review", :content => "Peer Review -
Round "+response_value_iterator.round.to_s+"<split> Review for: #{@topic_name}"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
elsif review_mapping_iterator.type=="SelfReviewResponseMap"
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "selfReview", :content => "Self Feedback -
Round "+response_value_iterator.round.to_s+"<split>Self Feedback"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
elsif review_mapping_iterator.type=="TeammateReviewResponseMap"
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
reviewee = ResponseMap.where(:reviewer_id => "#{review_mapping_iterator.reviewer_id}", :id =>"#{review_mapping_iterator.id}").pluck(:reviewee_id)
puts reviewee.to_s+" "+review_mapping_iterator.reviewer_id.to_s+" "+review_mapping_iterator.id.to_s
user_id = Participant.where(:id=> "#{reviewee[0]}").pluck(:user_id)
reviewee_name = User.where(:id=>"#{user_id[0]}").pluck(:name)
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "teamReview", :content => "Team Review -
Round "+response_value_iterator.round.to_s+"<split>Team review for #{reviewee_name[0]}"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
else
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "feedback", :content => "Feedback -
Round "+response_value_iterator.round.to_s+"<split>Feedback"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
end
end
end
end %>

==Test Plan==
===Automated test using RSpec===

Resources -
* [http://rspec.info/ RSpec]
* [https://github.com/thoughtbot/factory_girl Factory Girl ruby gem]

A new file with the name <b>timestamps_for_students_submissions_spec.rb</b> file was created in <b>spec/features</b> folder with various test cases to test the changes.

===Testing from UI===
Testing the project using the User Interface.
*Login as an instructor, go to manage assignments-> select an assignment-> add students to assignment->update duedates.
*Impersonate as one of student -> navigate to the particular assignment edited in above step.
*You shall see a timeline with duedates
*Click on your work, submit hyperlink/files, same will be displayed in that particular assignment home page(navigate to previous page)
*Review teammates work/ give a peer review/ submit a self review/ submit feedback to review received, same will be reflected in respective assignment home page along with a hyperlink to the particular review given.
*The submission along with the timestamps for each submission along with hyperlinks to each of student's work is displayed in timeline.
*One can test for the Edge cases mentioned above too.

We have written tests for 3 scenarios
* '''Scenario 1: Testing whether deadlines are visible on the graph:'''
We created a dummy assignment with associated deadline in “before” statement. The code for that is:

before(:each) do
create(:assignment, name: "E1797-Test", directory_path: 'test_assignment')
create_list(:participant, 3)
create(:assignment_node)
create(:deadline_type, name: "submission")
create(:deadline_type, name: "review")
create(:deadline_type, name: "metareview")
create(:deadline_type, name: "drop_topic")
create(:deadline_type, name: "team_formation")
create(:deadline_right)
create(:deadline_right, name: 'Late')
create(:deadline_right, name: 'OK')
create(:assignment_due_date, deadline_type: DeadlineType.where(name: 'review').first, due_at: '2200-12-23 03:33:23')
login_as("student2065")
visit '/student_task/list'
end

Then, in the test case we tested whether the deadline is present on the graph.
The RSpec Feature testing code is :

it 'displays review due dates along with its timestamps' do
#checks whether the UI has above given deadline
page.html.should include('2200-12-23 03:33:23')
end

* '''Scenario 2: Testing whether submitted linked is visible on the graph:'''
Since we already created a assignment in the “before” statement In this particular test case, we submitted the work for an assignment in “Your Work” tab and checked whether this link is present in the graph. The RSpec code is as follows:

it 'displays submitted hyperlink along with timestamp' do
#submit a generic link for this assignment
click_link "E1797-Test"
click_link "Your work"
fill_in "submission", with: "http: //www.google.com"
click_button "Upload link"
#expect the same link to be present in our graph
page.all('a', :text => 'Assignments')[1].click
click_link "E1797-Test"
page.html.should include('https: //www.google.com')
end

* '''Scenario 3: Testing whether submitted file is visible on the graph:'''
In this particular test case a file as submission for an assignment was uploaded. After this. it is checked whether this file is present in the graph.

it 'displays submitted file along with timestamp' do
#submit a generic file for this assignment
click_link "E1797-Test"
click_link "Your work"
file_path = Rails.root + "spec/features/timestamp_students_submissions_spec.rb"
attach_file('uploaded_file', file_path)
click_on 'Upload file'
#expect the same file to be present in our graph
page.all('a', :text => 'Assignments')[1].click
click_link "E1797-Test"
page.html.should include('timestamp_students_submissions_spec.rb')
end

==Edge Cases==

'''Timeline behavior when the student opens the view page of a newly created assignment'''

* When the user has not made any submissions, reviews or feedbacks to reviews to the assignment, the timeline must only display the due dates of the assignment.

'''Timeline behavior when student has not joined any team and makes submissions'''

* When a student who is not part of any team makes a submission, he is assigned a team_ID by Expertiza and all submissions made by him are linked to that ID. So only those submissions will be displayed on the timeline.

'''Timeline behavior when the student joins a team, what happens to the submissions he made before joining the team'''

* When he joins a team and he receives a new team_ID, any submissions made hereafter will be made under the new team_ID and all previous submissions made by the student will not be shown on the timeline(this is how Expertiza assigns team_IDs and submissions- the same is reflected in 'your work' section of a user's profile). Only the user submissions made after he joins the team is shown on the timeline.

'''Timeline behavior when there is no name for a given assignment'''

* Sometimes topics in assignment are not named(eg program 2 - car rental app). In the peer review submission rectangular box displayed on the timeline after the student submits a peer review, instead of showing the label "Review for [topic name]", the label says "Review".

'''Timeline behavior when a submitted hyperlink is removed'''

* When a submitted hyperlink is removed, the submission must not be displayed on the timeline any more.

'''A submission must be made before a peer review can be given'''

* This condition holds even if the deadline has already passed.

==Future modifications==

We can also include icons that are embedded into the rectangles. They act as visual aids to help the user quickly recognize the category of the box. We propose a design that would look something like this:

[[File:S3.png]]

===References===

#[https://github.com/expertiza/expertiza Expertiza on GitHub]
#[http://expertiza.ncsu.edu/ The live Expertiza website]
#[http://wiki.expertiza.ncsu.edu/index.php/Expertiza_documentation Expertiza project documentation wiki]
#[https://relishapp.com/rspec Rspec Documentation]
#[http://visjs.org/docs/timeline/ Vis.js Documentation for Timeline]
#[ Github pull request submitted]
#[https://github.com/ShyamKatta/expertiza/tree/E1797/ Github - expertiza forked repository]

CSC/ECE 517 Fall 2017/E1797 Timestamps for students submission

2017-12-06T10:30:05Z

Skatta3: /* Testing from UI */

==Introduction==

Expertiza is an open source project created using Ruby on Rails. Students can upload and submit their assignments and related work online for grading purposes. Through this project, we aim to provide an interactive and refreshing visual timeline for all the student submissions for each assignment. We provided dynamic functions such as zoom in/zoom out to move left/right and recenter to provide smooth user experience.

===Existing System===

Currently, there exist various types of submissions that a student can make for an assignment for which timestamps are generated.
*When a student submits links or uploads files as submissions to an assignment in Expertiza, a timestamp is created for the date and time at which each of the submissions was done.
*The student may also be able to give reviews to other works for a particular assignment. These reviews when submitted also have an associated timestamp.
*There also exist timestamps for deadlines that have passed and that are upcoming for an assignment submission or a review to be done.
*For the reviews that a student receives for his work, the student can give feedback to each of the reviews. The submitted feedbacks also get timestamps.

Currently there exists no functionality to view all these submissions and their timestamps in a single, aggregated way.

===Proposed System===

Our project was to solve this issue by creating a Visualization that helps the student view all the timestamps for his submissions. The goal is to create a Timeline that shows all the timestamps of submitted records and links to the submitted content wherever necessary. The default state of the timeline is a point on the x-axis set to the current date and time. The timeline is interactive and allows the user to zoom in and out to change the viewing scale of the timeline. The user can also scroll in the timeline to move the timeline forward or backward from the current time. After all of this is done, the user can reset the timeline to change his view to the default state.

With this, the student is able to view his entire submission history for an assignment in a convenient way.

==Problem Statement==

In Expertiza, it is possible for the instructor to view the submission records of a particular student. However, there is no way for students to check the history of their submission records. In this project, we are required to keep track of students’ activities and visualize them on their end by using a timeline chart.

<b>What needs to be visualized on the timeline:</b>

* Hyperlink submission record with timestamps
* File upload record with timestamps
* Due dates
*Visualization of Peer review of others works, which includes:
** A Review hyperlink that redirects to the review by clicking on it
** The Round number (To be displayed only if the assignment has multiple rounds)
** Timestamps
*Visualization of Author feedback on others review, which includes:
** A Feedback hyperlink that redirects to the feedback by clicking on it
** Timestamps

===Understanding Problem Statement===

The problem statement states the following issues that had to be resolved.

'''Issue-1:'''
Submission records with timestamps:

A student can submit their work for an assignment using "Your work" button in the respective assignment page. Students have two options to submit their work :
* Giving a hyperlink.
* Uploading a file.
As soon as the user submits any one of these, we needed to show hyperlink or file with the time-stamp on our visualization graph. Also, we needed to provide the submitted '''hyperlink or a link''' to the file on the visualization so that it will be easy for the user to navigate from a single page.

'''Issue-2:'''
Due dates:

There are different due dates for every assignment like Round-1 submission, Round-2 submission, Round-1 review and Round-2 review Due Dates. These are different from submission time stamps because a submission's timestamp depends upon the time at which the user had submitted the work whereas a due date is the deadline date fixed by an instructor. Visualizing them by adding them into the timeline, helps the student to track all due dates in a single graph.

'''Issue-3:'''
Peer Review other's work:

A student needs to review work of different teams during the course of the assignment. As of now in order to view the review, Expertiza requires the user to go to the "other's work" page in the assignment. Instead of this, we want this data to be viewed in our visualization graph. This issue includes a timestamp, link to view review, review round number to be shown in the graph.
'''Note:''' this review is the peer review '''given by this particular student''' to different teams as part of the assignment, '''not the reviews the student received.'''

'''Issue-4:'''
Author's feedback on other's Review
:
A student can give feedback for the review he/she received for a specific assignment. So this information also needs to be included in the graph. We need to show the timestamp and hyperlink to the feedback. It must be noted that the feedback here is not the feedback he got for review given by him/her but the feedback he/she gave for the reviews the had received.

==Program Design==

To visualize the timeline graphically we decided to use the vis.js JavaScript library. This library provides various interactive visualization charts (like graphs, networks, timelines, etc) to visualize data in real time. We chose to work on this library because when compared to other popular visualization libraries, vis.js provides the best possible representation of a timeline, one that meets the requirements of our project. To know more about how to make a timeline using vis.js, click [http://visjs.org/docs/timeline/ here].

The timeline contains a single horizontal axis that is divided into time intervals equally separated from each other.

Let us consider an example where a student makes several submissions to an assignment. The student uploads a hyperlink "https ://www.facebook.com" and an HTML file as submissions. The assignment has several deadlines or due dates. There are due dates for Round 1 and Round 2 submissions for this particular assignment. There are also review deadlines for each of the rounds for the assignment. The student can give a peer review to other students' work on the assignment. The student is able to give feedback to the peer reviews that he received. We have used color coding to differentiate between different kinds of things visualized on the timeline. We have used '''Orange''' color for a round's submission and review deadline and '''Green''' color for all hyperlink submissions, file submissions and '''Cream''' color for feedback, peer review, team review and self review submissions.

So in summary, the following things have to be present on the timeline that are visualized as rectangular boxes on the timeline:
* The submission hyperlink box with the hyperlink
* The file upload box with a link to the uploaded file
* The Round 1 peer review deadline
* The Round 1 submission due date
* The Round 2 peer review deadline
* The Round 2 submission due date
* The Peer Review that the student gave to other students
* The feedback that the student gave to received reviews
* A self-feedback that the student gave to himself
* A team review that the student can give to his teammates
* Additionally, all the rectangular boxed have timestamps that display when the submission was made or the due date of that task

Apart from this, various buttons were also added to better interact with the timeline. These include:
* ''Zoom in'' - To zoom in by magnifying the viewing scale of the timeline
* ''Zoom out'' - To zoom out of the timeline
* ''Move Left'' - To move along the timeline's x-axis. The user can move forward by pressing the button
* ''Move Right'' - To move backward along the x-axis
* '''Recenter''' - Pressing this button helps the user to '''reset the zoom scale''' and the position of the x-axis in a way that all the items appear '''sorted in a single window.'''
A single '''vertical red line''' set to the '''current time''' on the x-axis indicates the current time at which the timeline is being viewed.

The '''percentage of zoom, percentage of window to move right/left''' can be modified as per convenience as mentioned in <script> of zoom buttons mentioned in later section of wiki.

We have added '''hyperlinks to enable quick access to all of the student submitted content'''. For example, the rectangular box that shows the submitted file has a hyperlink that links to the contents of the file. Similarly, the reviews submitted by the student is linked by the hyperlink in the Peer review rectangular box on the timeline.

Finally, after obtaining all the data from the database and the inclusion of all the stated information above to visualizing it in the timeline, the result would be something like this:

[[File:Img1.png]]

When the user selects a particular rectangular box on the timeline by clicking on it, then the line that connects the box to the timeline's x-axis becomes thicker and the color of the box also changes to '''White''' to indicate to the user the current box that is selected. If the user selects the file submission rectangular box (sample.html file), then the timeline would look like this:

[[File:Img2.png]]

==Files Involved==

*app/controllers/submission_records_controller.rb
*app/models/submission_record.rb
*app/views/student_task/list.html.erb

==Database Tables Involved==

*submission_records
*response_map
*due_dates
*participants
*assignments
*users
*teams
*teams_users
*signed_up_teams
*sign_up_topics

==Implementation==

The code to embed the timeline into the webpage is as follows

< div id="visualization">
< div class="menu">
<input id="zoomIn" value="Zoom in" type="button">
<input id="zoomOut" value="Zoom out" type="button">
<input id="moveLeft" value="Move left" type="button">
<input id="moveRight" value="Move right" type="button">
<input id="Recenter" value="Recenter" type="button">
< /div>
< /div>
<script type="text/javascript">
// DOM element where the Timeline will be attached
var container = document.getElementById('visualization');
// Create a DataSet (allows two way data-binding)
var items = new vis.DataSet(visualization_JSON);
// Configuration for the Timeline
var options = {
zoomMin: 1000 * 60 * 60 * 24, // one day in milliseconds
zoomMax: 1000 * 60 * 60 * 24 * 31 * 12 // about 1 year in milliseconds
};
// Create a Timeline
var timeline = new vis.Timeline(container, items, options);
</script>

There are several buttons that were inserted into the timeline to allow the user to interact with the timeline. The code for that is

<script>
var visualization_window=timeline.range.getRange();
function move (percentage) {
var range = timeline.getWindow();
var interval = range.end - range.start;
timeline.setWindow({
start: range.start.valueOf() - interval * percentage,
end: range.end.valueOf() - interval * percentage
});
}
// attach events to the navigation buttons
// zoom percentage in zoomin/zoomout can be adjusted below by passing paramenter. Similar is the case for move left/right along the x-axis
document.getElementById('zoomIn').onclick = function () { timeline.zoomIn( 0.2); };
document.getElementById('zoomOut').onclick = function () { timeline.zoomOut( 0.2); };
document.getElementById('moveLeft').onclick = function () { move( 0.2); };
document.getElementById('moveRight').onclick = function () { move(-0.2); };
document.getElementById('Recenter').onclick = function () {
var visualization_window_start = new Date(visualization_window.start);
var visualization_window_end = new Date(visualization_window.end);
timeline.setWindow(visualization_window_start, visualization_window_end, { animation: true });
};
</script>

The functionality of each button is explained in the Program Design section above.

It is necessary to obtain data from the Expertiza database to JSON format so that it can be processed by the timeline for visualization. After collecting the data from the database, processing it and storing it into a ruby variable, we use the JSON.parse() function to convert that information into JSON objects. To maintain continuity, the process of obtaining data and preprocessing it is explained later in the wiki. The code to convert the variable contents into a JSON object is as follows:

<script>
// converting @visualization_data array to javascript compatible JSON object
var visualization_JSON = JSON.parse('<%=raw @visualization_data.to_json%>');
var href_JSON = JSON.parse('<%= @href_arr.to_json.html_safe%>')
var temp;
//temp is temporary variable used to generate hyperlinks from content
for(i=0; i<visualization_JSON.length; i++) {
temp=visualization_JSON[i].content.split("<split>");
if(href_JSON[i]==' ')
visualization_JSON[i].content = temp[0]+"<br>"+temp.slice(1);
else
visualization_JSON[i].content = "<a href="+href_JSON[i]+" target='_blank'><b><u>"+temp[0]+"</u></b></a><br>"+temp.slice(1);
}
</script>

The following code is used to display due dates in the timeline. The types of due dates included are Round submission or Round review due date.

<% @href_arr= Array.new %>
<! -- @href_arr is used to store all the hyperlinks for each visualized object -->
<% @duedates = DueDate.where("parent_id = #{@assignment.id}")
@visualization_data = @duedates.map do |due|
@href_arr.push(""); #empty hyperlink as we do not provide hyperlinks for submissions/reviews
if due.deadline_type_id.eql? 1
{ :id => due.id, :start=> due.due_at, :className => "submissionDue", :content => "Round "+(due.round.to_s)+"<split>Submission due by "+'<br>'+due.due_at.strftime("%m/%d/%Y at %I:%M %p") }
else
{ :id => due.id, :start=> due.due_at, :className => "reviewDue", :content => "Round "+(due.round.to_s)+"<split>Review due by "+'<br>'+due.due_at.strftime("%m/%d/%Y at %I:%M %p") }
end
end
%>

Then we need to add submission hyperlinks and files in the timeline. The code for that is

< ! -- display only if submissions are made-->
<% unless @team.nil?
@submissions = SubmissionRecord.find_by_sql"select * from submission_records where assignment_id=#{@assignment.id} and team_id=#{@team.id}
and content NOT IN (select content from submission_records where assignment_id=#{@assignment.id} and team_id=#{@team.id} and UPPER(operation) Like 'REMOVE%')"
@visualization_data += @submissions.map do |submission|
#display_directory_tree(participant, files, true).html_safe
if (submission.operation).eql?('Submit File')
file = submission.content
ret=""
if File.exist?(file) && File.directory?(file)
ret += link_to File.basename(file), :controller => 'submitted_content', :action => 'edit', :id => participant.id, "current_folder[name]" => file
else
ret += "\n "
ret += link_to File.basename(file), :controller => 'submitted_content',
:action => 'download',
:id => @participant.id,
:download => File.basename(file),
"current_folder[name]" => File.dirname(file)
end
@href_arr.push(ret.split('"')[1])
#only file name instead of entire relative path need to be displayed on timeline. Hence we push the same in content, appending created time to it
{ :id => submission.id, :start=> submission.created_at, :className=> "fileUpload", :content => (submission.content).split('/')[-1]+'<split>'+
submission.created_at.strftime("%m/%d/%Y at %I:%M %p") }
else
@href_arr.push(submission.content)
{ :id => submission.id, :start=> submission.created_at, :className=> "hyperlinkUpload" ,:content => submission.content+'<split>'+
submission.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
end
end %>

'''Explanation:''' The following code fetches submission records of a student for a particular assignment from the '''submission_records''' table. Then after checking if the submission exists and when the type is a file, a hyperlink to the file's location path is obtained and pushed into the JSON. The same is done for a submission with the type Hyperlink.

Then to get the peer reviews, self-reviews, feedback and team reviews, the following code is used.

<! -- Reviews not yet started -->
<% unless @review_mappings.nil?
@review_mappings.each do |review_mapping_iterator|
@response_values = Response.where(:map_id => review_mapping_iterator.id)
@visualization_data += @response_values.map do |response_value_iterator|
if review_mapping_iterator.type=="ReviewResponseMap"
review_mapping = ResponseMap.find(review_mapping_iterator.reviewed_object_id)
participant = AssignmentTeam.get_first_member(review_mapping_iterator.reviewee_id)
topic_id = SignedUpTeam.topic_id(participant.parent_id, participant.user_id)
if !topic_id.nil?
if SignUpTopic.find(topic_id).topic_identifier != ''
@topic_name=SignUpTopic.find(topic_id).topic_identifier+": "+SignUpTopic.find(topic_id).topic_name
else
@topic_name=SignUpTopic.find(topic_id).topic_name
end
end
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "review", :content => "Peer Review -
Round "+response_value_iterator.round.to_s+"<split> Review for: #{@topic_name}"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
elsif review_mapping_iterator.type=="SelfReviewResponseMap"
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "selfReview", :content => "Self Feedback -
Round "+response_value_iterator.round.to_s+"<split>Self Feedback"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
elsif review_mapping_iterator.type=="TeammateReviewResponseMap"
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
reviewee = ResponseMap.where(:reviewer_id => "#{review_mapping_iterator.reviewer_id}", :id =>"#{review_mapping_iterator.id}").pluck(:reviewee_id)
puts reviewee.to_s+" "+review_mapping_iterator.reviewer_id.to_s+" "+review_mapping_iterator.id.to_s
user_id = Participant.where(:id=> "#{reviewee[0]}").pluck(:user_id)
reviewee_name = User.where(:id=>"#{user_id[0]}").pluck(:name)
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "teamReview", :content => "Team Review -
Round "+response_value_iterator.round.to_s+"<split>Team review for #{reviewee_name[0]}"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
else
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "feedback", :content => "Feedback -
Round "+response_value_iterator.round.to_s+"<split>Feedback"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
end
end
end
end %>

==Test Plan==
===Automated test using RSpec===

Resources -
* [http://rspec.info/ RSpec]
* [https://github.com/thoughtbot/factory_girl Factory Girl ruby gem]

A new file with the name <b>timestamps_for_students_submissions_spec.rb</b> file was created in <b>spec/features</b> folder with various test cases to test the changes.

===Testing from UI===
Testing the project using the User Interface.
*Login as an instructor, go to manage assignments-> select an assignment-> add students to assignment->update duedates.
*Impersonate as one of student -> navigate to the particular assignment edited in above step.
*You shall see a timeline with duedates
*Click on your work, submit hyperlink/files, same will be displayed in that particular assignment home page(navigate to previous page)
*Review teammates work/ give a peer review/ submit a self review/ submit feedback to review received, same will be reflected in respective assignment home page along with a hyperlink to the particular review given.
*The submission along with the timestamps for each submission along with hyperlinks to each of student's work is displayed in timeline.
*One can test for the Edge cases mentioned above too.

We have written tests for 3 scenarios
* '''Scenario 1: Testing whether deadlines are visible on the graph:'''
We created a dummy assignment with associated deadline in “before” statement. The code for that is:

before(:each) do
create(:assignment, name: "E1797-Test", directory_path: 'test_assignment')
create_list(:participant, 3)
create(:assignment_node)
create(:deadline_type, name: "submission")
create(:deadline_type, name: "review")
create(:deadline_type, name: "metareview")
create(:deadline_type, name: "drop_topic")
create(:deadline_type, name: "team_formation")
create(:deadline_right)
create(:deadline_right, name: 'Late')
create(:deadline_right, name: 'OK')
create(:assignment_due_date, deadline_type: DeadlineType.where(name: 'review').first, due_at: '2200-12-23 03:33:23')
login_as("student2065")
visit '/student_task/list'
end

Then, in the test case we tested whether the deadline is present on the graph.
The RSpec Feature testing code is :

it 'displays review due dates along with its timestamps' do
#checks whether the UI has above given deadline
page.html.should include('2200-12-23 03:33:23')
end

* '''Scenario 2: Testing whether submitted linked is visible on the graph:'''
Since we already created a assignment in the “before” statement In this particular test case, we submitted the work for an assignment in “Your Work” tab and checked whether this link is present in the graph. The RSpec code is as follows:

it 'displays submitted hyperlink along with timestamp' do
#submit a generic link for this assignment
click_link "E1797-Test"
click_link "Your work"
fill_in "submission", with: "http: //www.google.com"
click_button "Upload link"
#expect the same link to be present in our graph
page.all('a', :text => 'Assignments')[1].click
click_link "E1797-Test"
page.html.should include('https: //www.google.com')
end

* '''Scenario 3: Testing whether submitted file is visible on the graph:'''
In this particular test case a file as submission for an assignment was uploaded. After this. it is checked whether this file is present in the graph.

it 'displays submitted file along with timestamp' do
#submit a generic file for this assignment
click_link "E1797-Test"
click_link "Your work"
file_path = Rails.root + "spec/features/timestamp_students_submissions_spec.rb"
attach_file('uploaded_file', file_path)
click_on 'Upload file'
#expect the same file to be present in our graph
page.all('a', :text => 'Assignments')[1].click
click_link "E1797-Test"
page.html.should include('timestamp_students_submissions_spec.rb')
end

==Edge Cases==

'''Timeline behavior when the student opens the view page of a newly created assignment'''

* When the user has not made any submissions, reviews or feedbacks to reviews to the assignment, the timeline must only display the due dates of the assignment.

'''Timeline behavior when student has not joined any team and makes submissions'''

* When a student who is not part of any team makes a submission, he is assigned a team_ID by Expertiza and all submissions made by him are linked to that ID. So only those submissions will be displayed on the timeline.

'''Timeline behavior when the student joins a team, what happens to the submissions he made before joining the team'''

* When he joins a team and he receives a new team_ID, any submissions made hereafter will be made under the new team_ID and all previous submissions made by the student will not be shown on the timeline(this is how Expertiza assigns team_IDs and submissions- the same is reflected in 'your work' section of a user's profile). Only the user submissions made after he joins the team is shown on the timeline.

'''Timeline behavior when there is no name for a given assignment'''

* Sometimes assignments are not named. In the peer review submission rectangular box displayed on the timeline after the student submits a peer review, instead of showing the label "Review for [assignment name]", the label says "Review".

'''Timeline behavior when a submitted hyperlink is removed'''

* When a submitted hyperlink is removed, the submission must not be displayed on the timeline any more.

'''A submission must be made before a peer review can be given'''

* This condition holds even if the deadline has already passed.

==Future modifications==

We can also include icons that are embedded into the rectangles. They act as visual aids to help the user quickly recognize the category of the box. We propose a design that would look something like this:

[[File:S3.png]]

===References===

#[https://github.com/expertiza/expertiza Expertiza on GitHub]
#[http://expertiza.ncsu.edu/ The live Expertiza website]
#[http://wiki.expertiza.ncsu.edu/index.php/Expertiza_documentation Expertiza project documentation wiki]
#[https://relishapp.com/rspec Rspec Documentation]
#[http://visjs.org/docs/timeline/ Vis.js Documentation for Timeline]
#[ Github pull request submitted]
#[https://github.com/ShyamKatta/expertiza/tree/E1797/ Github - expertiza forked repository]

CSC/ECE 517 Fall 2017/E1797 Timestamps for students submission

2017-12-06T10:29:45Z

Skatta3: /* Testing from UI */

==Introduction==

Expertiza is an open source project created using Ruby on Rails. Students can upload and submit their assignments and related work online for grading purposes. Through this project, we aim to provide an interactive and refreshing visual timeline for all the student submissions for each assignment. We provided dynamic functions such as zoom in/zoom out to move left/right and recenter to provide smooth user experience.

===Existing System===

Currently, there exist various types of submissions that a student can make for an assignment for which timestamps are generated.
*When a student submits links or uploads files as submissions to an assignment in Expertiza, a timestamp is created for the date and time at which each of the submissions was done.
*The student may also be able to give reviews to other works for a particular assignment. These reviews when submitted also have an associated timestamp.
*There also exist timestamps for deadlines that have passed and that are upcoming for an assignment submission or a review to be done.
*For the reviews that a student receives for his work, the student can give feedback to each of the reviews. The submitted feedbacks also get timestamps.

Currently there exists no functionality to view all these submissions and their timestamps in a single, aggregated way.

===Proposed System===

Our project was to solve this issue by creating a Visualization that helps the student view all the timestamps for his submissions. The goal is to create a Timeline that shows all the timestamps of submitted records and links to the submitted content wherever necessary. The default state of the timeline is a point on the x-axis set to the current date and time. The timeline is interactive and allows the user to zoom in and out to change the viewing scale of the timeline. The user can also scroll in the timeline to move the timeline forward or backward from the current time. After all of this is done, the user can reset the timeline to change his view to the default state.

With this, the student is able to view his entire submission history for an assignment in a convenient way.

==Problem Statement==

In Expertiza, it is possible for the instructor to view the submission records of a particular student. However, there is no way for students to check the history of their submission records. In this project, we are required to keep track of students’ activities and visualize them on their end by using a timeline chart.

<b>What needs to be visualized on the timeline:</b>

* Hyperlink submission record with timestamps
* File upload record with timestamps
* Due dates
*Visualization of Peer review of others works, which includes:
** A Review hyperlink that redirects to the review by clicking on it
** The Round number (To be displayed only if the assignment has multiple rounds)
** Timestamps
*Visualization of Author feedback on others review, which includes:
** A Feedback hyperlink that redirects to the feedback by clicking on it
** Timestamps

===Understanding Problem Statement===

The problem statement states the following issues that had to be resolved.

'''Issue-1:'''
Submission records with timestamps:

A student can submit their work for an assignment using "Your work" button in the respective assignment page. Students have two options to submit their work :
* Giving a hyperlink.
* Uploading a file.
As soon as the user submits any one of these, we needed to show hyperlink or file with the time-stamp on our visualization graph. Also, we needed to provide the submitted '''hyperlink or a link''' to the file on the visualization so that it will be easy for the user to navigate from a single page.

'''Issue-2:'''
Due dates:

There are different due dates for every assignment like Round-1 submission, Round-2 submission, Round-1 review and Round-2 review Due Dates. These are different from submission time stamps because a submission's timestamp depends upon the time at which the user had submitted the work whereas a due date is the deadline date fixed by an instructor. Visualizing them by adding them into the timeline, helps the student to track all due dates in a single graph.

'''Issue-3:'''
Peer Review other's work:

A student needs to review work of different teams during the course of the assignment. As of now in order to view the review, Expertiza requires the user to go to the "other's work" page in the assignment. Instead of this, we want this data to be viewed in our visualization graph. This issue includes a timestamp, link to view review, review round number to be shown in the graph.
'''Note:''' this review is the peer review '''given by this particular student''' to different teams as part of the assignment, '''not the reviews the student received.'''

'''Issue-4:'''
Author's feedback on other's Review
:
A student can give feedback for the review he/she received for a specific assignment. So this information also needs to be included in the graph. We need to show the timestamp and hyperlink to the feedback. It must be noted that the feedback here is not the feedback he got for review given by him/her but the feedback he/she gave for the reviews the had received.

==Program Design==

To visualize the timeline graphically we decided to use the vis.js JavaScript library. This library provides various interactive visualization charts (like graphs, networks, timelines, etc) to visualize data in real time. We chose to work on this library because when compared to other popular visualization libraries, vis.js provides the best possible representation of a timeline, one that meets the requirements of our project. To know more about how to make a timeline using vis.js, click [http://visjs.org/docs/timeline/ here].

The timeline contains a single horizontal axis that is divided into time intervals equally separated from each other.

Let us consider an example where a student makes several submissions to an assignment. The student uploads a hyperlink "https ://www.facebook.com" and an HTML file as submissions. The assignment has several deadlines or due dates. There are due dates for Round 1 and Round 2 submissions for this particular assignment. There are also review deadlines for each of the rounds for the assignment. The student can give a peer review to other students' work on the assignment. The student is able to give feedback to the peer reviews that he received. We have used color coding to differentiate between different kinds of things visualized on the timeline. We have used '''Orange''' color for a round's submission and review deadline and '''Green''' color for all hyperlink submissions, file submissions and '''Cream''' color for feedback, peer review, team review and self review submissions.

So in summary, the following things have to be present on the timeline that are visualized as rectangular boxes on the timeline:
* The submission hyperlink box with the hyperlink
* The file upload box with a link to the uploaded file
* The Round 1 peer review deadline
* The Round 1 submission due date
* The Round 2 peer review deadline
* The Round 2 submission due date
* The Peer Review that the student gave to other students
* The feedback that the student gave to received reviews
* A self-feedback that the student gave to himself
* A team review that the student can give to his teammates
* Additionally, all the rectangular boxed have timestamps that display when the submission was made or the due date of that task

Apart from this, various buttons were also added to better interact with the timeline. These include:
* ''Zoom in'' - To zoom in by magnifying the viewing scale of the timeline
* ''Zoom out'' - To zoom out of the timeline
* ''Move Left'' - To move along the timeline's x-axis. The user can move forward by pressing the button
* ''Move Right'' - To move backward along the x-axis
* '''Recenter''' - Pressing this button helps the user to '''reset the zoom scale''' and the position of the x-axis in a way that all the items appear '''sorted in a single window.'''
A single '''vertical red line''' set to the '''current time''' on the x-axis indicates the current time at which the timeline is being viewed.

The '''percentage of zoom, percentage of window to move right/left''' can be modified as per convenience as mentioned in <script> of zoom buttons mentioned in later section of wiki.

We have added '''hyperlinks to enable quick access to all of the student submitted content'''. For example, the rectangular box that shows the submitted file has a hyperlink that links to the contents of the file. Similarly, the reviews submitted by the student is linked by the hyperlink in the Peer review rectangular box on the timeline.

Finally, after obtaining all the data from the database and the inclusion of all the stated information above to visualizing it in the timeline, the result would be something like this:

[[File:Img1.png]]

When the user selects a particular rectangular box on the timeline by clicking on it, then the line that connects the box to the timeline's x-axis becomes thicker and the color of the box also changes to '''White''' to indicate to the user the current box that is selected. If the user selects the file submission rectangular box (sample.html file), then the timeline would look like this:

[[File:Img2.png]]

==Files Involved==

*app/controllers/submission_records_controller.rb
*app/models/submission_record.rb
*app/views/student_task/list.html.erb

==Database Tables Involved==

*submission_records
*response_map
*due_dates
*participants
*assignments
*users
*teams
*teams_users
*signed_up_teams
*sign_up_topics

==Implementation==

The code to embed the timeline into the webpage is as follows

< div id="visualization">
< div class="menu">
<input id="zoomIn" value="Zoom in" type="button">
<input id="zoomOut" value="Zoom out" type="button">
<input id="moveLeft" value="Move left" type="button">
<input id="moveRight" value="Move right" type="button">
<input id="Recenter" value="Recenter" type="button">
< /div>
< /div>
<script type="text/javascript">
// DOM element where the Timeline will be attached
var container = document.getElementById('visualization');
// Create a DataSet (allows two way data-binding)
var items = new vis.DataSet(visualization_JSON);
// Configuration for the Timeline
var options = {
zoomMin: 1000 * 60 * 60 * 24, // one day in milliseconds
zoomMax: 1000 * 60 * 60 * 24 * 31 * 12 // about 1 year in milliseconds
};
// Create a Timeline
var timeline = new vis.Timeline(container, items, options);
</script>

There are several buttons that were inserted into the timeline to allow the user to interact with the timeline. The code for that is

<script>
var visualization_window=timeline.range.getRange();
function move (percentage) {
var range = timeline.getWindow();
var interval = range.end - range.start;
timeline.setWindow({
start: range.start.valueOf() - interval * percentage,
end: range.end.valueOf() - interval * percentage
});
}
// attach events to the navigation buttons
// zoom percentage in zoomin/zoomout can be adjusted below by passing paramenter. Similar is the case for move left/right along the x-axis
document.getElementById('zoomIn').onclick = function () { timeline.zoomIn( 0.2); };
document.getElementById('zoomOut').onclick = function () { timeline.zoomOut( 0.2); };
document.getElementById('moveLeft').onclick = function () { move( 0.2); };
document.getElementById('moveRight').onclick = function () { move(-0.2); };
document.getElementById('Recenter').onclick = function () {
var visualization_window_start = new Date(visualization_window.start);
var visualization_window_end = new Date(visualization_window.end);
timeline.setWindow(visualization_window_start, visualization_window_end, { animation: true });
};
</script>

The functionality of each button is explained in the Program Design section above.

It is necessary to obtain data from the Expertiza database to JSON format so that it can be processed by the timeline for visualization. After collecting the data from the database, processing it and storing it into a ruby variable, we use the JSON.parse() function to convert that information into JSON objects. To maintain continuity, the process of obtaining data and preprocessing it is explained later in the wiki. The code to convert the variable contents into a JSON object is as follows:

<script>
// converting @visualization_data array to javascript compatible JSON object
var visualization_JSON = JSON.parse('<%=raw @visualization_data.to_json%>');
var href_JSON = JSON.parse('<%= @href_arr.to_json.html_safe%>')
var temp;
//temp is temporary variable used to generate hyperlinks from content
for(i=0; i<visualization_JSON.length; i++) {
temp=visualization_JSON[i].content.split("<split>");
if(href_JSON[i]==' ')
visualization_JSON[i].content = temp[0]+"<br>"+temp.slice(1);
else
visualization_JSON[i].content = "<a href="+href_JSON[i]+" target='_blank'><b><u>"+temp[0]+"</u></b></a><br>"+temp.slice(1);
}
</script>

The following code is used to display due dates in the timeline. The types of due dates included are Round submission or Round review due date.

<% @href_arr= Array.new %>
<! -- @href_arr is used to store all the hyperlinks for each visualized object -->
<% @duedates = DueDate.where("parent_id = #{@assignment.id}")
@visualization_data = @duedates.map do |due|
@href_arr.push(""); #empty hyperlink as we do not provide hyperlinks for submissions/reviews
if due.deadline_type_id.eql? 1
{ :id => due.id, :start=> due.due_at, :className => "submissionDue", :content => "Round "+(due.round.to_s)+"<split>Submission due by "+'<br>'+due.due_at.strftime("%m/%d/%Y at %I:%M %p") }
else
{ :id => due.id, :start=> due.due_at, :className => "reviewDue", :content => "Round "+(due.round.to_s)+"<split>Review due by "+'<br>'+due.due_at.strftime("%m/%d/%Y at %I:%M %p") }
end
end
%>

Then we need to add submission hyperlinks and files in the timeline. The code for that is

< ! -- display only if submissions are made-->
<% unless @team.nil?
@submissions = SubmissionRecord.find_by_sql"select * from submission_records where assignment_id=#{@assignment.id} and team_id=#{@team.id}
and content NOT IN (select content from submission_records where assignment_id=#{@assignment.id} and team_id=#{@team.id} and UPPER(operation) Like 'REMOVE%')"
@visualization_data += @submissions.map do |submission|
#display_directory_tree(participant, files, true).html_safe
if (submission.operation).eql?('Submit File')
file = submission.content
ret=""
if File.exist?(file) && File.directory?(file)
ret += link_to File.basename(file), :controller => 'submitted_content', :action => 'edit', :id => participant.id, "current_folder[name]" => file
else
ret += "\n "
ret += link_to File.basename(file), :controller => 'submitted_content',
:action => 'download',
:id => @participant.id,
:download => File.basename(file),
"current_folder[name]" => File.dirname(file)
end
@href_arr.push(ret.split('"')[1])
#only file name instead of entire relative path need to be displayed on timeline. Hence we push the same in content, appending created time to it
{ :id => submission.id, :start=> submission.created_at, :className=> "fileUpload", :content => (submission.content).split('/')[-1]+'<split>'+
submission.created_at.strftime("%m/%d/%Y at %I:%M %p") }
else
@href_arr.push(submission.content)
{ :id => submission.id, :start=> submission.created_at, :className=> "hyperlinkUpload" ,:content => submission.content+'<split>'+
submission.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
end
end %>

'''Explanation:''' The following code fetches submission records of a student for a particular assignment from the '''submission_records''' table. Then after checking if the submission exists and when the type is a file, a hyperlink to the file's location path is obtained and pushed into the JSON. The same is done for a submission with the type Hyperlink.

Then to get the peer reviews, self-reviews, feedback and team reviews, the following code is used.

<! -- Reviews not yet started -->
<% unless @review_mappings.nil?
@review_mappings.each do |review_mapping_iterator|
@response_values = Response.where(:map_id => review_mapping_iterator.id)
@visualization_data += @response_values.map do |response_value_iterator|
if review_mapping_iterator.type=="ReviewResponseMap"
review_mapping = ResponseMap.find(review_mapping_iterator.reviewed_object_id)
participant = AssignmentTeam.get_first_member(review_mapping_iterator.reviewee_id)
topic_id = SignedUpTeam.topic_id(participant.parent_id, participant.user_id)
if !topic_id.nil?
if SignUpTopic.find(topic_id).topic_identifier != ''
@topic_name=SignUpTopic.find(topic_id).topic_identifier+": "+SignUpTopic.find(topic_id).topic_name
else
@topic_name=SignUpTopic.find(topic_id).topic_name
end
end
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "review", :content => "Peer Review -
Round "+response_value_iterator.round.to_s+"<split> Review for: #{@topic_name}"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
elsif review_mapping_iterator.type=="SelfReviewResponseMap"
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "selfReview", :content => "Self Feedback -
Round "+response_value_iterator.round.to_s+"<split>Self Feedback"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
elsif review_mapping_iterator.type=="TeammateReviewResponseMap"
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
reviewee = ResponseMap.where(:reviewer_id => "#{review_mapping_iterator.reviewer_id}", :id =>"#{review_mapping_iterator.id}").pluck(:reviewee_id)
puts reviewee.to_s+" "+review_mapping_iterator.reviewer_id.to_s+" "+review_mapping_iterator.id.to_s
user_id = Participant.where(:id=> "#{reviewee[0]}").pluck(:user_id)
reviewee_name = User.where(:id=>"#{user_id[0]}").pluck(:name)
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "teamReview", :content => "Team Review -
Round "+response_value_iterator.round.to_s+"<split>Team review for #{reviewee_name[0]}"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
else
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "feedback", :content => "Feedback -
Round "+response_value_iterator.round.to_s+"<split>Feedback"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
end
end
end
end %>

==Test Plan==
===Automated test using RSpec===

Resources -
* [http://rspec.info/ RSpec]
* [https://github.com/thoughtbot/factory_girl Factory Girl ruby gem]

A new file with the name <b>timestamps_for_students_submissions_spec.rb</b> file was created in <b>spec/features</b> folder with various test cases to test the changes.

===Testing from UI===
Testing the project using the User Interface.
*Login as an instructor, go to manage assignments-> select an assignment-> add students to assignment->update duedates.
*Impersonate as one of student -> navigate to the particular assignment edited in above step.
*You shall see a timeline with duedates
*Click on your work, submit hyperlink/files, same will be displayed in that particular assignment home page(navigate to previous page)
*Review teammates work/ give a peer review/ submit a self review/ submit feedback to review received, same will be reflected in respective assignment home page along with a hyperlink to the particular review given.
*The submission along with the timestamps for each submission along with hyperlinks to each of student's work is displayed in timeline.
*One can test for the Edge cases mentioned above too.

We have written tests for 3 scenarios
* '''Scenario 1: Testing whether deadlines are visible on the graph:'''
We created a dummy assignment with associated deadline in “before” statement. The code for that is:

before(:each) do
create(:assignment, name: "E1797-Test", directory_path: 'test_assignment')
create_list(:participant, 3)
create(:assignment_node)
create(:deadline_type, name: "submission")
create(:deadline_type, name: "review")
create(:deadline_type, name: "metareview")
create(:deadline_type, name: "drop_topic")
create(:deadline_type, name: "team_formation")
create(:deadline_right)
create(:deadline_right, name: 'Late')
create(:deadline_right, name: 'OK')
create(:assignment_due_date, deadline_type: DeadlineType.where(name: 'review').first, due_at: '2200-12-23 03:33:23')
login_as("student2065")
visit '/student_task/list'
end

Then, in the test case we tested whether the deadline is present on the graph.
The RSpec Feature testing code is :

it 'displays review due dates along with its timestamps' do
#checks whether the UI has above given deadline
page.html.should include('2200-12-23 03:33:23')
end

* '''Scenario 2:Testing whether submitted linked is visible on the graph:'''
Since we already created a assignment in the “before” statement In this particular test case, we submitted the work for an assignment in “Your Work” tab and checked whether this link is present in the graph. The RSpec code is as follows:

it 'displays submitted hyperlink along with timestamp' do
#submit a generic link for this assignment
click_link "E1797-Test"
click_link "Your work"
fill_in "submission", with: "http: //www.google.com"
click_button "Upload link"
#expect the same link to be present in our graph
page.all('a', :text => 'Assignments')[1].click
click_link "E1797-Test"
page.html.should include('https: //www.google.com')
end

* '''Scenario 3:Testing whether submitted file is visible on the graph:'''
In this particular test case a file as submission for an assignment was uploaded. After this. it is checked whether this file is present in the graph.

it 'displays submitted file along with timestamp' do
#submit a generic file for this assignment
click_link "E1797-Test"
click_link "Your work"
file_path = Rails.root + "spec/features/timestamp_students_submissions_spec.rb"
attach_file('uploaded_file', file_path)
click_on 'Upload file'
#expect the same file to be present in our graph
page.all('a', :text => 'Assignments')[1].click
click_link "E1797-Test"
page.html.should include('timestamp_students_submissions_spec.rb')
end

==Edge Cases==

'''Timeline behavior when the student opens the view page of a newly created assignment'''

* When the user has not made any submissions, reviews or feedbacks to reviews to the assignment, the timeline must only display the due dates of the assignment.

'''Timeline behavior when student has not joined any team and makes submissions'''

* When a student who is not part of any team makes a submission, he is assigned a team_ID by Expertiza and all submissions made by him are linked to that ID. So only those submissions will be displayed on the timeline.

'''Timeline behavior when the student joins a team, what happens to the submissions he made before joining the team'''

* When he joins a team and he receives a new team_ID, any submissions made hereafter will be made under the new team_ID and all previous submissions made by the student will not be shown on the timeline(this is how Expertiza assigns team_IDs and submissions- the same is reflected in 'your work' section of a user's profile). Only the user submissions made after he joins the team is shown on the timeline.

'''Timeline behavior when there is no name for a given assignment'''

* Sometimes assignments are not named. In the peer review submission rectangular box displayed on the timeline after the student submits a peer review, instead of showing the label "Review for [assignment name]", the label says "Review".

'''Timeline behavior when a submitted hyperlink is removed'''

* When a submitted hyperlink is removed, the submission must not be displayed on the timeline any more.

'''A submission must be made before a peer review can be given'''

* This condition holds even if the deadline has already passed.

==Future modifications==

We can also include icons that are embedded into the rectangles. They act as visual aids to help the user quickly recognize the category of the box. We propose a design that would look something like this:

[[File:S3.png]]

===References===

#[https://github.com/expertiza/expertiza Expertiza on GitHub]
#[http://expertiza.ncsu.edu/ The live Expertiza website]
#[http://wiki.expertiza.ncsu.edu/index.php/Expertiza_documentation Expertiza project documentation wiki]
#[https://relishapp.com/rspec Rspec Documentation]
#[http://visjs.org/docs/timeline/ Vis.js Documentation for Timeline]
#[ Github pull request submitted]
#[https://github.com/ShyamKatta/expertiza/tree/E1797/ Github - expertiza forked repository]

CSC/ECE 517 Fall 2017/E1797 Timestamps for students submission

2017-12-06T10:18:45Z

Skatta3: /* Implementation */

==Introduction==

Expertiza is an open source project created using Ruby on Rails. Students can upload and submit their assignments and related work online for grading purposes. Through this project, we aim to provide an interactive and refreshing visual timeline for all the student submissions for each assignment. We provided dynamic functions such as zoom in/zoom out to move left/right and recenter to provide smooth user experience.

===Existing System===

Currently, there exist various types of submissions that a student can make for an assignment for which timestamps are generated.
*When a student submits links or uploads files as submissions to an assignment in Expertiza, a timestamp is created for the date and time at which each of the submissions was done.
*The student may also be able to give reviews to other works for a particular assignment. These reviews when submitted also have an associated timestamp.
*There also exist timestamps for deadlines that have passed and that are upcoming for an assignment submission or a review to be done.
*For the reviews that a student receives for his work, the student can give feedback to each of the reviews. The submitted feedbacks also get timestamps.

Currently there exists no functionality to view all these submissions and their timestamps in a single, aggregated way.

===Proposed System===

Our project was to solve this issue by creating a Visualization that helps the student view all the timestamps for his submissions. The goal is to create a Timeline that shows all the timestamps of submitted records and links to the submitted content wherever necessary. The default state of the timeline is a point on the x-axis set to the current date and time. The timeline is interactive and allows the user to zoom in and out to change the viewing scale of the timeline. The user can also scroll in the timeline to move the timeline forward or backward from the current time. After all of this is done, the user can reset the timeline to change his view to the default state.

With this, the student is able to view his entire submission history for an assignment in a convenient way.

==Problem Statement==

In Expertiza, it is possible for the instructor to view the submission records of a particular student. However, there is no way for students to check the history of their submission records. In this project, we are required to keep track of students’ activities and visualize them on their end by using a timeline chart.

<b>What needs to be visualized on the timeline:</b>

* Hyperlink submission record with timestamps
* File upload record with timestamps
* Due dates
*Visualization of Peer review of others works, which includes:
** A Review hyperlink that redirects to the review by clicking on it
** The Round number (To be displayed only if the assignment has multiple rounds)
** Timestamps
*Visualization of Author feedback on others review, which includes:
** A Feedback hyperlink that redirects to the feedback by clicking on it
** Timestamps

===Understanding Problem Statement===

The problem statement states the following issues that had to be resolved.

'''Issue-1:'''
Submission records with timestamps:

A student can submit their work for an assignment using "Your work" button in the respective assignment page. Students have two options to submit their work :
* Giving a hyperlink.
* Uploading a file.
As soon as the user submits any one of these, we needed to show hyperlink or file with the time-stamp on our visualization graph. Also, we needed to provide the submitted '''hyperlink or a link''' to the file on the visualization so that it will be easy for the user to navigate from a single page.

'''Issue-2:'''
Due dates:

There are different due dates for every assignment like Round-1 submission, Round-2 submission, Round-1 review and Round-2 review Due Dates. These are different from submission time stamps because a submission's timestamp depends upon the time at which the user had submitted the work whereas a due date is the deadline date fixed by an instructor. Visualizing them by adding them into the timeline, helps the student to track all due dates in a single graph.

'''Issue-3:'''
Peer Review other's work:

A student needs to review work of different teams during the course of the assignment. As of now in order to view the review, Expertiza requires the user to go to the "other's work" page in the assignment. Instead of this, we want this data to be viewed in our visualization graph. This issue includes a timestamp, link to view review, review round number to be shown in the graph.
'''Note:''' this review is the peer review '''given by this particular student''' to different teams as part of the assignment, '''not the reviews the student received.'''

'''Issue-4:'''
Author's feedback on other's Review
:
A student can give feedback for the review he/she received for a specific assignment. So this information also needs to be included in the graph. We need to show the timestamp and hyperlink to the feedback. It must be noted that the feedback here is not the feedback he got for review given by him/her but the feedback he/she gave for the reviews the had received.

==Program Design==

To visualize the timeline graphically we decided to use the vis.js JavaScript library. This library provides various interactive visualization charts (like graphs, networks, timelines, etc) to visualize data in real time. We chose to work on this library because when compared to other popular visualization libraries, vis.js provides the best possible representation of a timeline, one that meets the requirements of our project. To know more about how to make a timeline using vis.js, click [http://visjs.org/docs/timeline/ here].

The timeline contains a single horizontal axis that is divided into time intervals equally separated from each other.

Let us consider an example where a student makes several submissions to an assignment. The student uploads a hyperlink "https ://www.facebook.com" and an HTML file as submissions. The assignment has several deadlines or due dates. There are due dates for Round 1 and Round 2 submissions for this particular assignment. There are also review deadlines for each of the rounds for the assignment. The student can give a peer review to other students' work on the assignment. The student is able to give feedback to the peer reviews that he received. We have used color coding to differentiate between different kinds of things visualized on the timeline. We have used '''Orange''' color for a round's submission and review deadline and '''Green''' color for all hyperlink submissions, file submissions and '''Cream''' color for feedback, peer review, team review and self review submissions.

So in summary, the following things have to be present on the timeline that are visualized as rectangular boxes on the timeline:
* The submission hyperlink box with the hyperlink
* The file upload box with a link to the uploaded file
* The Round 1 peer review deadline
* The Round 1 submission due date
* The Round 2 peer review deadline
* The Round 2 submission due date
* The Peer Review that the student gave to other students
* The feedback that the student gave to received reviews
* A self-feedback that the student gave to himself
* A team review that the student can give to his teammates
* Additionally, all the rectangular boxed have timestamps that display when the submission was made or the due date of that task

Apart from this, various buttons were also added to better interact with the timeline. These include:
* ''Zoom in'' - To zoom in by magnifying the viewing scale of the timeline
* ''Zoom out'' - To zoom out of the timeline
* ''Move Left'' - To move along the timeline's x-axis. The user can move forward by pressing the button
* ''Move Right'' - To move backward along the x-axis
* '''Recenter''' - Pressing this button helps the user to '''reset the zoom scale''' and the position of the x-axis in a way that all the items appear '''sorted in a single window.'''
A single '''vertical red line''' set to the '''current time''' on the x-axis indicates the current time at which the timeline is being viewed.

The '''percentage of zoom, percentage of window to move right/left''' can be modified as per convenience as mentioned in <script> of zoom buttons mentioned in later section of wiki.

We have added '''hyperlinks to enable quick access to all of the student submitted content'''. For example, the rectangular box that shows the submitted file has a hyperlink that links to the contents of the file. Similarly, the reviews submitted by the student is linked by the hyperlink in the Peer review rectangular box on the timeline.

Finally, after obtaining all the data from the database and the inclusion of all the stated information above to visualizing it in the timeline, the result would be something like this:

[[File:Img1.png]]

When the user selects a particular rectangular box on the timeline by clicking on it, then the line that connects the box to the timeline's x-axis becomes thicker and the color of the box also changes to '''White''' to indicate to the user the current box that is selected. If the user selects the file submission rectangular box (sample.html file), then the timeline would look like this:

[[File:Img2.png]]

==Files Involved==

*app/controllers/submission_records_controller.rb
*app/models/submission_record.rb
*app/views/student_task/list.html.erb

==Database Tables Involved==

*submission_records
*response_map
*due_dates
*participants
*assignments
*users
*teams
*teams_users
*signed_up_teams
*sign_up_topics

==Implementation==

The code to embed the timeline into the webpage is as follows

< div id="visualization">
< div class="menu">
<input id="zoomIn" value="Zoom in" type="button">
<input id="zoomOut" value="Zoom out" type="button">
<input id="moveLeft" value="Move left" type="button">
<input id="moveRight" value="Move right" type="button">
<input id="Recenter" value="Recenter" type="button">
< /div>
< /div>
<script type="text/javascript">
// DOM element where the Timeline will be attached
var container = document.getElementById('visualization');
// Create a DataSet (allows two way data-binding)
var items = new vis.DataSet(visualization_JSON);
// Configuration for the Timeline
var options = {
zoomMin: 1000 * 60 * 60 * 24, // one day in milliseconds
zoomMax: 1000 * 60 * 60 * 24 * 31 * 12 // about 1 year in milliseconds
};
// Create a Timeline
var timeline = new vis.Timeline(container, items, options);
</script>

There are several buttons that were inserted into the timeline to allow the user to interact with the timeline. The code for that is

<script>
var visualization_window=timeline.range.getRange();
function move (percentage) {
var range = timeline.getWindow();
var interval = range.end - range.start;
timeline.setWindow({
start: range.start.valueOf() - interval * percentage,
end: range.end.valueOf() - interval * percentage
});
}
// attach events to the navigation buttons
// zoom percentage in zoomin/zoomout can be adjusted below by passing paramenter. Similar is the case for move left/right along the x-axis
document.getElementById('zoomIn').onclick = function () { timeline.zoomIn( 0.2); };
document.getElementById('zoomOut').onclick = function () { timeline.zoomOut( 0.2); };
document.getElementById('moveLeft').onclick = function () { move( 0.2); };
document.getElementById('moveRight').onclick = function () { move(-0.2); };
document.getElementById('Recenter').onclick = function () {
var visualization_window_start = new Date(visualization_window.start);
var visualization_window_end = new Date(visualization_window.end);
timeline.setWindow(visualization_window_start, visualization_window_end, { animation: true });
};
</script>

The functionality of each button is explained in the Program Design section above.

It is necessary to obtain data from the Expertiza database to JSON format so that it can be processed by the timeline for visualization. After collecting the data from the database, processing it and storing it into a ruby variable, we use the JSON.parse() function to convert that information into JSON objects. To maintain continuity, the process of obtaining data and preprocessing it is explained later in the wiki. The code to convert the variable contents into a JSON object is as follows:

<script>
// converting @visualization_data array to javascript compatible JSON object
var visualization_JSON = JSON.parse('<%=raw @visualization_data.to_json%>');
var href_JSON = JSON.parse('<%= @href_arr.to_json.html_safe%>')
var temp;
//temp is temporary variable used to generate hyperlinks from content
for(i=0; i<visualization_JSON.length; i++) {
temp=visualization_JSON[i].content.split("<split>");
if(href_JSON[i]==' ')
visualization_JSON[i].content = temp[0]+"<br>"+temp.slice(1);
else
visualization_JSON[i].content = "<a href="+href_JSON[i]+" target='_blank'><b><u>"+temp[0]+"</u></b></a><br>"+temp.slice(1);
}
</script>

The following code is used to display due dates in the timeline. The types of due dates included are Round submission or Round review due date.

<% @href_arr= Array.new %>
<! -- @href_arr is used to store all the hyperlinks for each visualized object -->
<% @duedates = DueDate.where("parent_id = #{@assignment.id}")
@visualization_data = @duedates.map do |due|
@href_arr.push(""); #empty hyperlink as we do not provide hyperlinks for submissions/reviews
if due.deadline_type_id.eql? 1
{ :id => due.id, :start=> due.due_at, :className => "submissionDue", :content => "Round "+(due.round.to_s)+"<split>Submission due by "+'<br>'+due.due_at.strftime("%m/%d/%Y at %I:%M %p") }
else
{ :id => due.id, :start=> due.due_at, :className => "reviewDue", :content => "Round "+(due.round.to_s)+"<split>Review due by "+'<br>'+due.due_at.strftime("%m/%d/%Y at %I:%M %p") }
end
end
%>

Then we need to add submission hyperlinks and files in the timeline. The code for that is

< ! -- display only if submissions are made-->
<% unless @team.nil?
@submissions = SubmissionRecord.find_by_sql"select * from submission_records where assignment_id=#{@assignment.id} and team_id=#{@team.id}
and content NOT IN (select content from submission_records where assignment_id=#{@assignment.id} and team_id=#{@team.id} and UPPER(operation) Like 'REMOVE%')"
@visualization_data += @submissions.map do |submission|
#display_directory_tree(participant, files, true).html_safe
if (submission.operation).eql?('Submit File')
file = submission.content
ret=""
if File.exist?(file) && File.directory?(file)
ret += link_to File.basename(file), :controller => 'submitted_content', :action => 'edit', :id => participant.id, "current_folder[name]" => file
else
ret += "\n "
ret += link_to File.basename(file), :controller => 'submitted_content',
:action => 'download',
:id => @participant.id,
:download => File.basename(file),
"current_folder[name]" => File.dirname(file)
end
@href_arr.push(ret.split('"')[1])
#only file name instead of entire relative path need to be displayed on timeline. Hence we push the same in content, appending created time to it
{ :id => submission.id, :start=> submission.created_at, :className=> "fileUpload", :content => (submission.content).split('/')[-1]+'<split>'+
submission.created_at.strftime("%m/%d/%Y at %I:%M %p") }
else
@href_arr.push(submission.content)
{ :id => submission.id, :start=> submission.created_at, :className=> "hyperlinkUpload" ,:content => submission.content+'<split>'+
submission.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
end
end %>

'''Explanation:''' The following code fetches submission records of a student for a particular assignment from the '''submission_records''' table. Then after checking if the submission exists and when the type is a file, a hyperlink to the file's location path is obtained and pushed into the JSON. The same is done for a submission with the type Hyperlink.

Then to get the peer reviews, self-reviews, feedback and team reviews, the following code is used.

<! -- Reviews not yet started -->
<% unless @review_mappings.nil?
@review_mappings.each do |review_mapping_iterator|
@response_values = Response.where(:map_id => review_mapping_iterator.id)
@visualization_data += @response_values.map do |response_value_iterator|
if review_mapping_iterator.type=="ReviewResponseMap"
review_mapping = ResponseMap.find(review_mapping_iterator.reviewed_object_id)
participant = AssignmentTeam.get_first_member(review_mapping_iterator.reviewee_id)
topic_id = SignedUpTeam.topic_id(participant.parent_id, participant.user_id)
if !topic_id.nil?
if SignUpTopic.find(topic_id).topic_identifier != ''
@topic_name=SignUpTopic.find(topic_id).topic_identifier+": "+SignUpTopic.find(topic_id).topic_name
else
@topic_name=SignUpTopic.find(topic_id).topic_name
end
end
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "review", :content => "Peer Review -
Round "+response_value_iterator.round.to_s+"<split> Review for: #{@topic_name}"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
elsif review_mapping_iterator.type=="SelfReviewResponseMap"
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "selfReview", :content => "Self Feedback -
Round "+response_value_iterator.round.to_s+"<split>Self Feedback"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
elsif review_mapping_iterator.type=="TeammateReviewResponseMap"
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
reviewee = ResponseMap.where(:reviewer_id => "#{review_mapping_iterator.reviewer_id}", :id =>"#{review_mapping_iterator.id}").pluck(:reviewee_id)
puts reviewee.to_s+" "+review_mapping_iterator.reviewer_id.to_s+" "+review_mapping_iterator.id.to_s
user_id = Participant.where(:id=> "#{reviewee[0]}").pluck(:user_id)
reviewee_name = User.where(:id=>"#{user_id[0]}").pluck(:name)
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "teamReview", :content => "Team Review -
Round "+response_value_iterator.round.to_s+"<split>Team review for #{reviewee_name[0]}"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
else
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "feedback", :content => "Feedback -
Round "+response_value_iterator.round.to_s+"<split>Feedback"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
end
end
end
end %>

==Test Plan==
===Automated test using RSpec===

Resources -
* [http://rspec.info/ RSpec]
* [https://github.com/thoughtbot/factory_girl Factory Girl ruby gem]

A new file with the name <b>timestamps_for_students_submissions_spec.rb</b> file was created in <b>spec/features</b> folder with various test cases to test the changes.

===Testing from UI===
Testing the project using the User Interface.
*Login as an instructor, go to manage assignments-> select an assignment-> add students to assignment->update duedates.
*Impersonate as one of student -> navigate to the particular assignment edited in above step.
*You shall see a timeline with duedates
*Click on your work, submit hyperlink/files, same will be displayed in that particular assignment home page(navigate to previous page)
*Review teammates work/ give a peer review/ submit a self review/ submit feedback to review received, same will be reflected in respective assignment home page along with a hyperlink to the particular review given.
*The submission along with the timestamps for each submission along with hyperlinks to each of student's work is displayed in timeline.
*One can test for the Edge cases mentioned above too.

We have written tests for 3 scenarios
* '''Testing whether deadlines are visible on the graph:'''
We created a dummy assignment with associated deadline in “before” statement. The code for that is:

before(:each) do
create(:assignment, name: "E1797-Test", directory_path: 'test_assignment')
create_list(:participant, 3)
create(:assignment_node)
create(:deadline_type, name: "submission")
create(:deadline_type, name: "review")
create(:deadline_type, name: "metareview")
create(:deadline_type, name: "drop_topic")
create(:deadline_type, name: "team_formation")
create(:deadline_right)
create(:deadline_right, name: 'Late')
create(:deadline_right, name: 'OK')
create(:assignment_due_date, deadline_type: DeadlineType.where(name: 'review').first, due_at: '2200-12-23 03:33:23')
login_as("student2065")
visit '/student_task/list'
end

Then, in the test case we tested whether the deadline is present on the graph.
The RSpec Feature testing code is :

it 'displays review due dates along with its timestamps' do
#checks whether the UI has above given deadline
page.html.should include('2200-12-23 03:33:23')
end

* '''Testing whether submitted linked is visible on the graph:'''
Since we already created a assignment in the “before” statement In this particular test case, we submitted the work for an assignment in “Your Work” tab and checked whether this link is present in the graph. The RSpec code is as follows:

it 'displays submitted hyperlink along with timestamp' do
#submit a generic link for this assignment
click_link "E1797-Test"
click_link "Your work"
fill_in "submission", with: "http: //www.google.com"
click_button "Upload link"
#expect the same link to be present in our graph
page.all('a', :text => 'Assignments')[1].click
click_link "E1797-Test"
page.html.should include('https: //www.google.com')
end

* '''Testing whether submitted file is visible on the graph:'''
In this particular test case a file as submission for an assignment was uploaded. After this. it is checked whether this file is present in the graph.

it 'displays submitted file along with timestamp' do
#submit a generic file for this assignment
click_link "E1797-Test"
click_link "Your work"
file_path = Rails.root + "spec/features/timestamp_students_submissions_spec.rb"
attach_file('uploaded_file', file_path)
click_on 'Upload file'
#expect the same file to be present in our graph
page.all('a', :text => 'Assignments')[1].click
click_link "E1797-Test"
page.html.should include('timestamp_students_submissions_spec.rb')
end

==Edge Cases==

'''Timeline behavior when the student opens the view page of a newly created assignment'''

* When the user has not made any submissions, reviews or feedbacks to reviews to the assignment, the timeline must only display the due dates of the assignment.

'''Timeline behavior when student has not joined any team and makes submissions'''

* When a student who is not part of any team makes a submission, he is assigned a team_ID by Expertiza and all submissions made by him are linked to that ID. So only those submissions will be displayed on the timeline.

'''Timeline behavior when the student joins a team, what happens to the submissions he made before joining the team'''

* When he joins a team and he receives a new team_ID, any submissions made hereafter will be made under the new team_ID and all previous submissions made by the student will not be shown on the timeline(this is how Expertiza assigns team_IDs and submissions- the same is reflected in 'your work' section of a user's profile). Only the user submissions made after he joins the team is shown on the timeline.

'''Timeline behavior when there is no name for a given assignment'''

* Sometimes assignments are not named. In the peer review submission rectangular box displayed on the timeline after the student submits a peer review, instead of showing the label "Review for [assignment name]", the label says "Review".

'''Timeline behavior when a submitted hyperlink is removed'''

* When a submitted hyperlink is removed, the submission must not be displayed on the timeline any more.

'''A submission must be made before a peer review can be given'''

* This condition holds even if the deadline has already passed.

==Future modifications==

We can also include icons that are embedded into the rectangles. They act as visual aids to help the user quickly recognize the category of the box. We propose a design that would look something like this:

[[File:S3.png]]

===References===

#[https://github.com/expertiza/expertiza Expertiza on GitHub]
#[http://expertiza.ncsu.edu/ The live Expertiza website]
#[http://wiki.expertiza.ncsu.edu/index.php/Expertiza_documentation Expertiza project documentation wiki]
#[https://relishapp.com/rspec Rspec Documentation]
#[http://visjs.org/docs/timeline/ Vis.js Documentation for Timeline]
#[ Github pull request submitted]
#[https://github.com/ShyamKatta/expertiza/tree/E1797/ Github - expertiza forked repository]

File:S1.png

2017-12-02T08:27:31Z

Skatta3: uploaded a new version of "File:S1.png": Reverted to version as of 04:09, 2 December 2017

File:S1.png

2017-12-02T08:24:41Z

Skatta3: uploaded a new version of "File:S1.png"

File:S1.png

2017-12-02T08:23:45Z

Skatta3: uploaded a new version of "File:S1.png"

CSC/ECE 517 Fall 2017/E1797 Timestamps for students submission

2017-12-02T08:10:29Z

Skatta3: /* Implementation */

==Introduction==

Expertiza is an open source project created using Ruby on Rails. Students can upload and submit their assignments and related work online for grading purposes. Through this project, we aim to provide an interactive and refreshing visual timeline for all the student submissions for each assignment. We provided dynamic functions such as zoom in/zoom out to move left/right and recenter to provide smooth user experience.

===Existing System===

Currently, there exist various types of submissions that a student can make for an assignment for which timestamps are generated.
*When a student submits links or uploads files as submissions to an assignment in Expertiza, a timestamp is created for the date and time at which each of the submissions was done.
*The student may also be able to give reviews to other works for a particular assignment. These reviews when submitted also have an associated timestamp.
*There also exist timestamps for deadlines that have passed and that are upcoming for an assignment submission or a review to be done.
*For the reviews that a student receives for his work, the student can give feedback to each of the reviews. The submitted feedbacks also get timestamps.

Currenty there exists no functionality to view all these submissions and their timestamps in a single, aggregated way.

===Proposed System===

Our project was to solve this issue by creating a Visualization that helps the student view all the timestamps for his submissions. The goal is to create a Timeline that shows all the timestamps of submitted records and links to the submitted content wherever necessary. The default state of the timeline is a point on the x-axis set to the current date and time. The timeline is interactive and allows the user to zoom in and out to change the viewing scale of the timeline. The user can also scroll in the timeline to move the timeline forward or backward from the current time. After all of this is done, the user can reset the timeline to change his view to the default state.

With this, the student is able to view his entire submission history for an assignment in a convenient way.

==Problem Statement==

In Expertiza, it is possible for the instructor to view the submission records of a particular student. However, there is no way for students to check the history of their submission records. In this project, we are required to keep track of students’ activities and visualize them on their end by using a timeline chart.

<b>What needs to be visualized on the timeline:</b>

* Hyperlink submission record with timestamps
* File upload record with timestamps
* Due dates
*Visualization of Peer review of others works, which includes:
** A Review hyperlink that redirects to the review by clicking on it
** The Round number (To be displayed only if the assignment has multiple rounds)
** Timestamps
*Visualization of Author feedback on others review, which includes:
** A Feedback hyperlink that redirects to the feedback by clicking on it
** Timestamps

===Understanding Problem Statement===

The problem statement states the following issues that had to be resolved.

'''Issue-1:'''
Submission records with timestamps:

A student can submit their work for an assignment using "Your work" button in the respective assignment page. Students have two options to submit their work :
* Giving a hyperlink.
* Uploading a file.
As soon as the user submits any one of these, we needed to show hyperlink or file with the time-stamp on our visualization graph. Also, we needed to provide the submitted '''hyperlink or a link''' to the file on the visualization so that it will be easy for the user to navigate from a single page.

'''Issue-2:'''
Due dates:

There are different due dates for every assignment like Round-1 submission, Round-2 submission, Round-1 review and Round-2 review Due Dates. These are different from submission time stamps because a submission's timestamp depends upon the time at which the user had submitted the work whereas a due date is the deadline date fixed by an instructor. Visualizing them by adding them into the timeline, helps the student to track all due dates in a single graph.

'''Issue-3:'''
Peer Review other's work:

A student needs to review work of different teams during the course of the assignment. As of now in order to view the review, Expertiza requires the user to go to the "other's work" page in the assignment. Instead of this, we want this data to be viewed in our visualization graph. This issue includes a timestamp, link to view review, review round number to be shown in the graph.
'''Note:''' this review is the peer review '''given by this particular student''' to different teams as part of the assignment, '''not the reviews the student received.'''

'''Issue-4:'''
Author's feedback on other's Review
:
A student can give feedback for the review he/she received for a specific assignment. So this information also needs to be included in the graph. We need to show the timestamp and hyperlink to the feedback. It must be noted that the feedback here is not the feedback he got for review given by him/her but the feedback he/she gave for the reviews the had received.

==Program Design==

To visualize the timeline graphically we decided to use the vis.js JavaScript library. This library provides various interactive visualization charts (like graphs, networks, timelines, etc) to visualize data in real time. We chose to work on this library because when compared to other popular visualization libraries, vis.js provides the best possible representation of a timeline, one that meets the requirements of our project. To know more about how to make a timeline using vis.js, click [http://visjs.org/docs/timeline/ here].

The timeline contains a single horizontal axis that is divided into time intervals equally separated from each other.

Let us consider an example where a student makes several submissions to an assignment. The student uploads a hyperlink "https ://www.facebook.com" and an HTML file as submissions. The assignment has several deadlines or due dates. There are due dates for Round 1 and Round 2 submissions for this particular assignment. There are also review deadlines for each of the rounds for the assignment. The student can give a peer review to other students' work on the assignment. The student is able to give feedback to the peer reviews that he received. We have used color coding to differentiate between different kinds of things visualized on the timeline. We have used '''Orange''' color for a round's submission and review deadline and '''Green''' color for all hyperlink submissions, file submissions and '''Cream''' color for feedback, peer review, team review and self review submissions.

So in summary, the following things have to be present on the timeline that are visualized as rectangular boxes on the timeline:
* The submission hyperlink box with the hyperlink
* The file upload box with a link to the uploaded file
* The Round 1 peer review deadline
* The Round 1 submission due date
* The Round 2 peer review deadline
* The Round 2 submission due date
* The Peer Review that the student gave to other students
* The feedback that the student gave to received reviews
* A self-feedback that the student gave to himself
* A team review that the student can give to his teammates
* Additionally, all the rectangular boxed have timestamps that display when the submission was made or the due date of that task

Apart from this, various buttons were also added to better interact with the timeline. These include:
* ''Zoom in'' - To zoom in by magnifying the viewing scale of the timeline
* ''Zoom out'' - To zoom out of the timeline
* ''Move Left'' - To move along the timeline's x-axis. The user can move forward by pressing the button
* ''Move Right'' - To move backward along the x-axis
* '''Recenter''' - Pressing this button helps the user to '''reset the zoom scale''' and the position of the x-axis in a way that all the items appear '''sorted in a single window.'''
A single '''vertical red line''' set to the '''current time''' on the x-axis indicates the current time at which the timeline is being viewed.

The '''percentage of zoom, percentage of window to move right/left''' can be modified as per convenience as mentioned in <script> of zoom buttons mentioned in later section of wiki.

We have added '''hyperlinks to enable quick access to all of the student submitted content'''. For example, the rectangular box that shows the submitted file has a hyperlink that links to the contents of the file. Similarly, the reviews submitted by the student is linked by the hyperlink in the Peer review rectangular box on the timeline.

Finally, after obtaining all the data from the database and the inclusion of all the stated information above to visualizing it in the timeline, the result would be something like this:

[[File:S1.png]]

When the user selects a particular rectangular box on the timeline by clicking on it, then the line that connects the box to the timeline's x-axis becomes thicker and the color of the box also changes to '''White''' to indicate to the user the current box that is selected. If the user selects the file submission rectangular box (sample.html file), then the timeline would look like this:

[[File:S2.png]]

==Files Involved==

*app/controllers/submission_records_controller.rb
*app/models/submission_record.rb
*app/views/student_task/list.html.erb

==Database Tables Involved==

*submission_records
*response_map
*due_dates
*participants
*assignments
*users
*teams
*teams_users
*signed_up_teams
*sign_up_topics

==Implementation==

The code to embed the timeline into the webpage is as follows

< div id="visualization">
< div class="menu">
<input id="zoomIn" value="Zoom in" type="button">
<input id="zoomOut" value="Zoom out" type="button">
<input id="moveLeft" value="Move left" type="button">
<input id="moveRight" value="Move right" type="button">
<input id="Recenter" value="Recenter" type="button">
< /div>
< /div>
<script type="text/javascript">
// DOM element where the Timeline will be attached
var container = document.getElementById('visualization');
// Create a DataSet (allows two way data-binding)
var items = new vis.DataSet(visualization_JSON);
// Configuration for the Timeline
var options = {
zoomMin: 1000 * 60 * 60 * 24, // one day in milliseconds
zoomMax: 1000 * 60 * 60 * 24 * 31 * 12 // about three months in milliseconds
};
// Create a Timeline
var timeline = new vis.Timeline(container, items, options);
</script>

There are several buttons that were inserted into the timeline to allow the user to interact with the timeline. The code for that is

<script>
var visualization_window=timeline.range.getRange();
function move (percentage) {
var range = timeline.getWindow();
var interval = range.end - range.start;
timeline.setWindow({
start: range.start.valueOf() - interval * percentage,
end: range.end.valueOf() - interval * percentage
});
}
// attach events to the navigation buttons
// zoom percentage in zoomin/zoomout can be adjusted below by passing paramenter. Similar is the case for move left/right along the x-axis
document.getElementById('zoomIn').onclick = function () { timeline.zoomIn( 0.2); };
document.getElementById('zoomOut').onclick = function () { timeline.zoomOut( 0.2); };
document.getElementById('moveLeft').onclick = function () { move( 0.2); };
document.getElementById('moveRight').onclick = function () { move(-0.2); };
document.getElementById('Recenter').onclick = function () {
var visualization_window_start = new Date(visualization_window.start);
var visualization_window_end = new Date(visualization_window.end);
timeline.setWindow(visualization_window_start, visualization_window_end, { animation: true });
};
</script>

The functionality of each button is explained in the Program Design section above.

It is necessary to obtain data from the Expertiza database to JSON format so that it can be processed by the timeline for visualization. After collecting the data from the database, processing it and storing it into a ruby variable, we use the JSON.parse() function to convert that information into JSON objects. To maintain continuity, the process of obtaining data and preprocessing it is explained later in the wiki. The code to convert the variable contents into a JSON object is as follows:

<script>
// converting @visualization_data array to javascript compatible JSON object
var visualization_JSON = JSON.parse('<%=raw @visualization_data.to_json%>');
var href_JSON = JSON.parse('<%= @href_arr.to_json.html_safe%>')
var temp;
//temp is temporary variable used to generate hyperlinks from content
for(i=0; i<visualization_JSON.length; i++) {
temp=visualization_JSON[i].content.split("<split>");
if(href_JSON[i]=='')
visualization_JSON[i].content = temp[0]+"<br>"+temp.slice(1);
else
visualization_JSON[i].content = "<a href="+href_JSON[i]+" target='_blank'><b><u>"+temp[0]+"</u></b></a><br>"+temp.slice(1);
}
</script>

The following code is used to display due dates in the timeline. The types of due dates included are Round submission or Round review due date.

<% @href_arr= Array.new %>
<! -- @href_arr is used to store all the hyperlinks for each visualized object -->
<% @duedates = DueDate.where("parent_id = #{@assignment.id}")
@visualization_data = @duedates.map do |due|
@href_arr.push(""); #empty hyperlink as we do not provide hyperlinks for submissions/reviews
if due.deadline_type_id.eql? 1
{ :id => due.id, :start=> due.due_at, :className => "submissionDue", :content => "Round "+(due.round.to_s)+"<split>Submission due by "+'<br>'+due.due_at.strftime("%m/%d/%Y at %I:%M %p") }
else
{ :id => due.id, :start=> due.due_at, :className => "reviewDue", :content => "Round "+(due.round.to_s)+"<split>Review due by "+'<br>'+due.due_at.strftime("%m/%d/%Y at %I:%M %p") }
end
end
%>

Then we need to add submission hyperlinks and files in the timeline. The code for that is

< ! -- display only if submissions are made-->
<% unless @team.nil?
@submissions = SubmissionRecord.find_by_sql"select * from submission_records where assignment_id=#{@assignment.id} and team_id=#{@team.id}
and content NOT IN (select content from submission_records where assignment_id=#{@assignment.id} and team_id=#{@team.id} and UPPER(operation) Like 'REMOVE%')"
@visualization_data += @submissions.map do |submission|
#display_directory_tree(participant, files, true).html_safe
if (submission.operation).eql?('Submit File')
file = submission.content
ret=""
if File.exist?(file) && File.directory?(file)
ret += link_to File.basename(file), :controller => 'submitted_content', :action => 'edit', :id => participant.id, "current_folder[name]" => file
else
ret += "\n "
ret += link_to File.basename(file), :controller => 'submitted_content',
:action => 'download',
:id => @participant.id,
:download => File.basename(file),
"current_folder[name]" => File.dirname(file)
end
@href_arr.push(ret.split('"')[1])
#only file name instead of entire relative path need to be displayed on timeline. Hence we push the same in content, appending created time to it
{ :id => submission.id, :start=> submission.created_at, :className=> "fileUpload", :content => (submission.content).split('/')[-1]+'<split>'+
submission.created_at.strftime("%m/%d/%Y at %I:%M %p") }
else
@href_arr.push(submission.content)
{ :id => submission.id, :start=> submission.created_at, :className=> "hyperlinkUpload" ,:content => submission.content+'<split>'+
submission.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
end
end %>

'''Explanation:''' The following code fetches submission records of a student for a particular assignment from the '''submission_records''' table. Then after checking if the submission exists and when the type is a file, a hyperlink to the file's location path is obtained and pushed into the JSON. The same is done for a submission with the type Hyperlink.

Then to get the peer reviews, self-reviews, feedback and team reviews, the following code is used.

<! -- Reviews not yet started -->
<% unless @review_mappings.nil?
@review_mappings.each do |review_mapping_iterator|
@response_values = Response.where(:map_id => review_mapping_iterator.id)
@visualization_data += @response_values.map do |response_value_iterator|
if review_mapping_iterator.type=="ReviewResponseMap"
review_mapping = ResponseMap.find(review_mapping_iterator.reviewed_object_id)
participant = AssignmentTeam.get_first_member(review_mapping_iterator.reviewee_id)
topic_id = SignedUpTeam.topic_id(participant.parent_id, participant.user_id)
if !topic_id.nil?
if SignUpTopic.find(topic_id).topic_identifier != ''
@topic_name=SignUpTopic.find(topic_id).topic_identifier+": "+SignUpTopic.find(topic_id).topic_name
else
@topic_name=SignUpTopic.find(topic_id).topic_name
end
end
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "review", :content => "Peer Review -
Round "+response_value_iterator.round.to_s+"<split> Review for: #{@topic_name}"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
elsif review_mapping_iterator.type=="SelfReviewResponseMap"
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "selfReview", :content => "Self Feedback -
Round "+response_value_iterator.round.to_s+"<split>Self Feedback"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
elsif review_mapping_iterator.type=="TeammateReviewResponseMap"
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
reviewee = ResponseMap.where(:reviewer_id => "#{review_mapping_iterator.reviewer_id}", :id =>"#{review_mapping_iterator.id}").pluck(:reviewee_id)
puts reviewee.to_s+" "+review_mapping_iterator.reviewer_id.to_s+" "+review_mapping_iterator.id.to_s
user_id = Participant.where(:id=> "#{reviewee[0]}").pluck(:user_id)
reviewee_name = User.where(:id=>"#{user_id[0]}").pluck(:name)
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "teamReview", :content => "Team Review -
Round "+response_value_iterator.round.to_s+"<split>Team review for #{reviewee_name[0]}"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
else
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "feedback", :content => "Feedback -
Round "+response_value_iterator.round.to_s+"<split>Feedback"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
end
end
end
end %>

==Test Plan==
===Automated test using RSpec===

Resources -
* [http://rspec.info/ RSpec]
* [https://github.com/thoughtbot/factory_girl Factory Girl ruby gem]

A new file with the name <b>timestamps_for_students_submissions_spec.rb</b> file will be created in <b>spec/features</b> folder with various test cases to test the changes.

===Testing from UI===
Testing the project using the User Interface.
*Login as an instructor, go to manage assignments-> select an assignment-> add students to assignment->update duedates.
*Impersonate as one of student -> navigate to the particular assignment edited in above step.
*You shall see a timeline with duedates
*Click on your work, submit hyperlink/files, same will be displayed in that particular assignment home page(navigate to previous page)
*Review teammates work/ give a peer review/ submit a self review/ submit feedback to review received, same will be reflected in respective assignment home page along with a hyperlink to the particular review given.
*The submission along with the timestamps for each submission along with hyperlinks to each of student's work is displayed in timeline.
*One can test for the Edge cases mentioned above too.

*[https://youtu.be/cGXu1YPG0Ec Interactive Video Demo link]

==Edge Cases==

'''Timeline behavior when the student opens the view page of a newly created assignment'''

* When the user has not made any submissions, reviews or feedbacks to reviews to the assignment, the timeline must only display the due dates of the assignment.

'''Timeline behavior when student has not joined any team and makes submissions'''

* When a student who is not part of any team makes a submission, he is assigned a team_ID by Expertiza and all submissions made by him are linked to that ID. So only those submissions will be displayed on the timeline.

'''Timeline behavior when the student joins a team, what happens to the submissions he made before joining the team'''

* When he joins a team and he receives a new team_ID, any submissions made hereafter will be made under the new team_ID and all previous submissions made by the student will not be shown on the timeline(this is how Expertiza assigns team_IDs and submissions- the same is reflected in 'your work' section of a user's profile). Only the user submissions made after he joins the team is shown on the timeline.

'''Timeline behavior when there is no name for a given assignment'''

* Sometimes assignments are not named. In the peer review submission rectangular box displayed on the timeline after the student submits a peer review, instead of showing the label "Review for [assignment name]", the label says "Review".

'''Timeline behavior when a submitted hyperlink is removed'''

* When a submitted hyperlink is removed, the submission must not be displayed on the timeline any more.

'''A submission must be made before a peer review can be given'''

* This condition holds even if the deadline has already passed.

==Future modifications==

We can also include icons that are embedded into the rectangles. They act as visual aids to help the user quickly recognize the category of the box. We propose a design that would look something like this:

[[File:S3.png]]

===References===

#[https://github.com/expertiza/expertiza Expertiza on GitHub]
#[http://expertiza.ncsu.edu/ The live Expertiza website]
#[http://wiki.expertiza.ncsu.edu/index.php/Expertiza_documentation Expertiza project documentation wiki]
#[https://relishapp.com/rspec Rspec Documentation]
#[http://visjs.org/docs/timeline/ Vis.js Documentation for Timeline]
#[ Github pull request submitted]
#[https://github.com/ShyamKatta/expertiza/tree/E1797/ Github - expertiza forked repository]

CSC/ECE 517 Fall 2017/E1797 Timestamps for students submission

2017-12-02T08:00:55Z

Skatta3: /* Introduction */

==Introduction==

Expertiza is an open source project created using Ruby on Rails. Students can upload and submit their assignments and related work online for grading purposes. Through this project, we aim to provide an interactive and refreshing visual timeline for all the student submissions for each assignment. We provided dynamic functions such as zoom in/zoom out to move left/right and recenter to provide smooth user experience.

===Existing System===

Currently, there exist various types of submissions that a student can make for an assignment for which timestamps are generated.
*When a student submits links or uploads files as submissions to an assignment in Expertiza, a timestamp is created for the date and time at which each of the submissions was done.
*The student may also be able to give reviews to other works for a particular assignment. These reviews when submitted also have an associated timestamp.
*There also exist timestamps for deadlines that have passed and that are upcoming for an assignment submission or a review to be done.
*For the reviews that a student receives for his work, the student can give feedback to each of the reviews. The submitted feedbacks also get timestamps.

Currenty there exists no functionality to view all these submissions and their timestamps in a single, aggregated way.

===Proposed System===

Our project was to solve this issue by creating a Visualization that helps the student view all the timestamps for his submissions. The goal is to create a Timeline that shows all the timestamps of submitted records and links to the submitted content wherever necessary. The default state of the timeline is a point on the x-axis set to the current date and time. The timeline is interactive and allows the user to zoom in and out to change the viewing scale of the timeline. The user can also scroll in the timeline to move the timeline forward or backward from the current time. After all of this is done, the user can reset the timeline to change his view to the default state.

With this, the student is able to view his entire submission history for an assignment in a convenient way.

==Problem Statement==

In Expertiza, it is possible for the instructor to view the submission records of a particular student. However, there is no way for students to check the history of their submission records. In this project, we are required to keep track of students’ activities and visualize them on their end by using a timeline chart.

<b>What needs to be visualized on the timeline:</b>

* Hyperlink submission record with timestamps
* File upload record with timestamps
* Due dates
*Visualization of Peer review of others works, which includes:
** A Review hyperlink that redirects to the review by clicking on it
** The Round number (To be displayed only if the assignment has multiple rounds)
** Timestamps
*Visualization of Author feedback on others review, which includes:
** A Feedback hyperlink that redirects to the feedback by clicking on it
** Timestamps

===Understanding Problem Statement===

The problem statement states the following issues that had to be resolved.

'''Issue-1:'''
Submission records with timestamps:

A student can submit their work for an assignment using "Your work" button in the respective assignment page. Students have two options to submit their work :
* Giving a hyperlink.
* Uploading a file.
As soon as the user submits any one of these, we needed to show hyperlink or file with the time-stamp on our visualization graph. Also, we needed to provide the submitted '''hyperlink or a link''' to the file on the visualization so that it will be easy for the user to navigate from a single page.

'''Issue-2:'''
Due dates:

There are different due dates for every assignment like Round-1 submission, Round-2 submission, Round-1 review and Round-2 review Due Dates. These are different from submission time stamps because a submission's timestamp depends upon the time at which the user had submitted the work whereas a due date is the deadline date fixed by an instructor. Visualizing them by adding them into the timeline, helps the student to track all due dates in a single graph.

'''Issue-3:'''
Peer Review other's work:

A student needs to review work of different teams during the course of the assignment. As of now in order to view the review, Expertiza requires the user to go to the "other's work" page in the assignment. Instead of this, we want this data to be viewed in our visualization graph. This issue includes a timestamp, link to view review, review round number to be shown in the graph.
'''Note:''' this review is the peer review '''given by this particular student''' to different teams as part of the assignment, '''not the reviews the student received.'''

'''Issue-4:'''
Author's feedback on other's Review
:
A student can give feedback for the review he/she received for a specific assignment. So this information also needs to be included in the graph. We need to show the timestamp and hyperlink to the feedback. It must be noted that the feedback here is not the feedback he got for review given by him/her but the feedback he/she gave for the reviews the had received.

==Program Design==

To visualize the timeline graphically we decided to use the vis.js JavaScript library. This library provides various interactive visualization charts (like graphs, networks, timelines, etc) to visualize data in real time. We chose to work on this library because when compared to other popular visualization libraries, vis.js provides the best possible representation of a timeline, one that meets the requirements of our project. To know more about how to make a timeline using vis.js, click [http://visjs.org/docs/timeline/ here].

The timeline contains a single horizontal axis that is divided into time intervals equally separated from each other.

Let us consider an example where a student makes several submissions to an assignment. The student uploads a hyperlink "https ://www.facebook.com" and an HTML file as submissions. The assignment has several deadlines or due dates. There are due dates for Round 1 and Round 2 submissions for this particular assignment. There are also review deadlines for each of the rounds for the assignment. The student can give a peer review to other students' work on the assignment. The student is able to give feedback to the peer reviews that he received. We have used color coding to differentiate between different kinds of things visualized on the timeline. We have used '''Orange''' color for a round's submission and review deadline and '''Green''' color for all hyperlink submissions, file submissions and '''Cream''' color for feedback, peer review, team review and self review submissions.

So in summary, the following things have to be present on the timeline that are visualized as rectangular boxes on the timeline:
* The submission hyperlink box with the hyperlink
* The file upload box with a link to the uploaded file
* The Round 1 peer review deadline
* The Round 1 submission due date
* The Round 2 peer review deadline
* The Round 2 submission due date
* The Peer Review that the student gave to other students
* The feedback that the student gave to received reviews
* A self-feedback that the student gave to himself
* A team review that the student can give to his teammates
* Additionally, all the rectangular boxed have timestamps that display when the submission was made or the due date of that task

Apart from this, various buttons were also added to better interact with the timeline. These include:
* ''Zoom in'' - To zoom in by magnifying the viewing scale of the timeline
* ''Zoom out'' - To zoom out of the timeline
* ''Move Left'' - To move along the timeline's x-axis. The user can move forward by pressing the button
* ''Move Right'' - To move backward along the x-axis
* '''Recenter''' - Pressing this button helps the user to '''reset the zoom scale''' and the position of the x-axis in a way that all the items appear '''sorted in a single window.'''
A single '''vertical red line''' set to the '''current time''' on the x-axis indicates the current time at which the timeline is being viewed.

The '''percentage of zoom, percentage of window to move right/left''' can be modified as per convenience as mentioned in <script> of zoom buttons mentioned in later section of wiki.

We have added '''hyperlinks to enable quick access to all of the student submitted content'''. For example, the rectangular box that shows the submitted file has a hyperlink that links to the contents of the file. Similarly, the reviews submitted by the student is linked by the hyperlink in the Peer review rectangular box on the timeline.

Finally, after obtaining all the data from the database and the inclusion of all the stated information above to visualizing it in the timeline, the result would be something like this:

[[File:S1.png]]

When the user selects a particular rectangular box on the timeline by clicking on it, then the line that connects the box to the timeline's x-axis becomes thicker and the color of the box also changes to '''White''' to indicate to the user the current box that is selected. If the user selects the file submission rectangular box (sample.html file), then the timeline would look like this:

[[File:S2.png]]

==Files Involved==

*app/controllers/submission_records_controller.rb
*app/models/submission_record.rb
*app/views/student_task/list.html.erb

==Database Tables Involved==

*submission_records
*response_map
*due_dates
*participants
*assignments
*users
*teams
*teams_users
*signed_up_teams
*sign_up_topics

==Implementation==

The code to embed the timeline into the webpage is as follows

< div id="visualization">
< div class="menu">
<input id="zoomIn" value="Zoom in" type="button">
<input id="zoomOut" value="Zoom out" type="button">
<input id="moveLeft" value="Move left" type="button">
<input id="moveRight" value="Move right" type="button">
<input id="Recenter" value="Recenter" type="button">
< /div>
< /div>
<script type="text/javascript">
// DOM element where the Timeline will be attached
var container = document.getElementById('visualization');
// Create a DataSet (allows two way data-binding)
var items = new vis.DataSet(visualization_JSON);
// Configuration for the Timeline
var options = {
zoomMin: 1000 * 60 * 60 * 24, // one day in milliseconds
zoomMax: 1000 * 60 * 60 * 24 * 31 * 12 // about three months in milliseconds
};
// Create a Timeline
var timeline = new vis.Timeline(container, items, options);
</script>

There are several buttons that were inserted into the timeline to allow the user to interact with the timeline. The code for that is

<script>
var visualization_window=timeline.range.getRange();
function move (percentage) {
var range = timeline.getWindow();
var interval = range.end - range.start;
timeline.setWindow({
start: range.start.valueOf() - interval * percentage,
end: range.end.valueOf() - interval * percentage
});
}
// attach events to the navigation buttons
// zoom percentage in zoomin/zoomout can be adjusted below by passing paramenter. Similar is the case for move left/right along the x-axis
document.getElementById('zoomIn').onclick = function () { timeline.zoomIn( 0.2); };
document.getElementById('zoomOut').onclick = function () { timeline.zoomOut( 0.2); };
document.getElementById('moveLeft').onclick = function () { move( 0.2); };
document.getElementById('moveRight').onclick = function () { move(-0.2); };
document.getElementById('Recenter').onclick = function () {
var visualization_window_start = new Date(visualization_window.start);
var visualization_window_end = new Date(visualization_window.end);
timeline.setWindow(visualization_window_start, visualization_window_end, { animation: true });
};
</script>

The functionality of each button is explained in the Program Design section above.

It is necessary to obtain data from the Expertiza database to JSON format so that it can be processed by the timeline for visualization. After collecting the data from the database, processing it and storing it into a ruby variable, we use the JSON.parse() function to convert that information into JSON objects. To maintain continuity, the process of obtaining data and preprocessing it is explained later in the wiki. The code to convert the variable contents into a JSON object is as follows:

<script>
// converting @visualization_data array to javascript compatible JSON object
var visualization_JSON = JSON.parse('<%=raw @visualization_data.to_json%>');
var href_JSON = JSON.parse('<%= @href_arr.to_json.html_safe%>')
var temp;
//temp is temporary variable used to generate hyperlinks from content
for(i=0; i<visualization_JSON.length; i++) {
temp=visualization_JSON[i].content.split("<split>");
if(href_JSON[i]=='')
visualization_JSON[i].content = temp[0]+"<br>"+temp.slice(1);
else
visualization_JSON[i].content = "<a href="+href_JSON[i]+" target='_blank'><b><u>"+temp[0]+"</u></b></a><br>"+temp.slice(1);
}
</script>

The following code is used to display due dates in the timeline. The types of due dates included are Round submission or Round review due date.

<% @href_arr= Array.new %>
<! -- @href_arr is used to store all the hyperlinks for each visualized object -->
<% @duedates = DueDate.where("parent_id = #{@assignment.id}")
@visualization_data = @duedates.map do |due|
@href_arr.push("");
if due.deadline_type_id.eql? 1
{ :id => due.id, :start=> due.due_at, :className => "submissionDue", :content => "Round "+(due.round.to_s)+"<split>Submission due by "+'<br>'+due.due_at.strftime("%m/%d/%Y at %I:%M %p") }
else
{ :id => due.id, :start=> due.due_at, :className => "reviewDue", :content => "Round "+(due.round.to_s)+"<split>Review due by "+'<br>'+due.due_at.strftime("%m/%d/%Y at %I:%M %p") }
end
end
%>

Then we need to add submission hyperlinks and files in the timeline. The code for that is

< ! -- display only if submissions are made-->
<% unless @team.nil?
@submissions = SubmissionRecord.find_by_sql"select * from submission_records where assignment_id=#{@assignment.id} and team_id=#{@team.id}
and content NOT IN (select content from submission_records where assignment_id=#{@assignment.id} and team_id=#{@team.id} and UPPER(operation) Like 'REMOVE%')"
@visualization_data += @submissions.map do |submission|
#display_directory_tree(participant, files, true).html_safe
if (submission.operation).eql?('Submit File')
file = submission.content
ret=""
if File.exist?(file) && File.directory?(file)
ret += link_to File.basename(file), :controller => 'submitted_content', :action => 'edit', :id => participant.id, "current_folder[name]" => file
else
ret += "\n "
ret += link_to File.basename(file), :controller => 'submitted_content',
:action => 'download',
:id => @participant.id,
:download => File.basename(file),
"current_folder[name]" => File.dirname(file)
end
@href_arr.push(ret.split('"')[1])
{ :id => submission.id, :start=> submission.created_at, :className=> "fileUpload", :content => (submission.content).split('/')[-1]+'<split>'+
submission.created_at.strftime("%m/%d/%Y at %I:%M %p") }
else
@href_arr.push(submission.content)
{ :id => submission.id, :start=> submission.created_at, :className=> "hyperlinkUpload" ,:content => submission.content+'<split>'+
submission.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
end
end %>

'''Explanation:''' The following code fetches submission records of a student for a particular assignment from the '''submission_records''' table. Then after checking if the submission exists and when the type is a file, a hyperlink to the file's location path is obtained and pushed into the JSON. The same is done for a submission with the type Hyperlink.

Then to get the peer reviews, self-reviews, feedback and team reviews, the following code is used.

<! -- Reviews not yet started -->
<% unless @review_mappings.nil?
@review_mappings.each do |review_mapping_iterator|
@response_values = Response.where(:map_id => review_mapping_iterator.id)
@visualization_data += @response_values.map do |response_value_iterator|
if review_mapping_iterator.type=="ReviewResponseMap"
review_mapping = ResponseMap.find(review_mapping_iterator.reviewed_object_id)
participant = AssignmentTeam.get_first_member(review_mapping_iterator.reviewee_id)
topic_id = SignedUpTeam.topic_id(participant.parent_id, participant.user_id)
if !topic_id.nil?
if SignUpTopic.find(topic_id).topic_identifier != ''
@topic_name=SignUpTopic.find(topic_id).topic_identifier+": "+SignUpTopic.find(topic_id).topic_name
else
@topic_name=SignUpTopic.find(topic_id).topic_name
end
end
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "review", :content => "Peer Review -
Round "+response_value_iterator.round.to_s+"<split> Review for: #{@topic_name}"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
elsif review_mapping_iterator.type=="SelfReviewResponseMap"
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "selfReview", :content => "Self Feedback -
Round "+response_value_iterator.round.to_s+"<split>Self Feedback"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
elsif review_mapping_iterator.type=="TeammateReviewResponseMap"
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
reviewee = ResponseMap.where(:reviewer_id => "#{review_mapping_iterator.reviewer_id}", :id =>"#{review_mapping_iterator.id}").pluck(:reviewee_id)
puts reviewee.to_s+" "+review_mapping_iterator.reviewer_id.to_s+" "+review_mapping_iterator.id.to_s
user_id = Participant.where(:id=> "#{reviewee[0]}").pluck(:user_id)
reviewee_name = User.where(:id=>"#{user_id[0]}").pluck(:name)
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "teamReview", :content => "Team Review -
Round "+response_value_iterator.round.to_s+"<split>Team review for #{reviewee_name[0]}"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
else
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "feedback", :content => "Feedback -
Round "+response_value_iterator.round.to_s+"<split>Feedback"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
end
end
end
end %>

==Test Plan==
===Automated test using RSpec===

Resources -
* [http://rspec.info/ RSpec]
* [https://github.com/thoughtbot/factory_girl Factory Girl ruby gem]

A new file with the name <b>timestamps_for_students_submissions_spec.rb</b> file will be created in <b>spec/features</b> folder with various test cases to test the changes.

===Testing from UI===
Testing the project using the User Interface.
*Login as an instructor, go to manage assignments-> select an assignment-> add students to assignment->update duedates.
*Impersonate as one of student -> navigate to the particular assignment edited in above step.
*You shall see a timeline with duedates
*Click on your work, submit hyperlink/files, same will be displayed in that particular assignment home page(navigate to previous page)
*Review teammates work/ give a peer review/ submit a self review/ submit feedback to review received, same will be reflected in respective assignment home page along with a hyperlink to the particular review given.
*The submission along with the timestamps for each submission along with hyperlinks to each of student's work is displayed in timeline.
*One can test for the Edge cases mentioned above too.

*[https://youtu.be/cGXu1YPG0Ec Interactive Video Demo link]

==Edge Cases==

'''Timeline behavior when the student opens the view page of a newly created assignment'''

* When the user has not made any submissions, reviews or feedbacks to reviews to the assignment, the timeline must only display the due dates of the assignment.

'''Timeline behavior when student has not joined any team and makes submissions'''

* When a student who is not part of any team makes a submission, he is assigned a team_ID by Expertiza and all submissions made by him are linked to that ID. So only those submissions will be displayed on the timeline.

'''Timeline behavior when the student joins a team, what happens to the submissions he made before joining the team'''

* When he joins a team and he receives a new team_ID, any submissions made hereafter will be made under the new team_ID and all previous submissions made by the student will not be shown on the timeline(this is how Expertiza assigns team_IDs and submissions- the same is reflected in 'your work' section of a user's profile). Only the user submissions made after he joins the team is shown on the timeline.

'''Timeline behavior when there is no name for a given assignment'''

* Sometimes assignments are not named. In the peer review submission rectangular box displayed on the timeline after the student submits a peer review, instead of showing the label "Review for [assignment name]", the label says "Review".

'''Timeline behavior when a submitted hyperlink is removed'''

* When a submitted hyperlink is removed, the submission must not be displayed on the timeline any more.

'''A submission must be made before a peer review can be given'''

* This condition holds even if the deadline has already passed.

==Future modifications==

We can also include icons that are embedded into the rectangles. They act as visual aids to help the user quickly recognize the category of the box. We propose a design that would look something like this:

[[File:S3.png]]

===References===

#[https://github.com/expertiza/expertiza Expertiza on GitHub]
#[http://expertiza.ncsu.edu/ The live Expertiza website]
#[http://wiki.expertiza.ncsu.edu/index.php/Expertiza_documentation Expertiza project documentation wiki]
#[https://relishapp.com/rspec Rspec Documentation]
#[http://visjs.org/docs/timeline/ Vis.js Documentation for Timeline]
#[ Github pull request submitted]
#[https://github.com/ShyamKatta/expertiza/tree/E1797/ Github - expertiza forked repository]

CSC/ECE 517 Fall 2017/E1797 Timestamps for students submission

2017-12-02T07:55:47Z

Skatta3: /* Introduction */

==Introduction==

Expertiza is an open source project created using Ruby on Rails. Students can upload and submit their assignments and related work online for grading purposes. Through this project we aim to provide an interactive and refreshing visual timeline for all the student submissions for each assignment.

===Existing System===

Currently, there exist various types of submissions that a student can make for an assignment for which timestamps are generated.
*When a student submits links or uploads files as submissions to an assignment in Expertiza, a timestamp is created for the date and time at which each of the submissions was done.
*The student may also be able to give reviews to other works for a particular assignment. These reviews when submitted also have an associated timestamp.
*There also exist timestamps for deadlines that have passed and that are upcoming for an assignment submission or a review to be done.
*For the reviews that a student receives for his work, the student can give feedback to each of the reviews. The submitted feedbacks also get timestamps.

Currenty there exists no functionality to view all these submissions and their timestamps in a single, aggregated way.

===Proposed System===

Our project was to solve this issue by creating a Visualization that helps the student view all the timestamps for his submissions. The goal is to create a Timeline that shows all the timestamps of submitted records and links to the submitted content wherever necessary. The default state of the timeline is a point on the x-axis set to the current date and time. The timeline is interactive and allows the user to zoom in and out to change the viewing scale of the timeline. The user can also scroll in the timeline to move the timeline forward or backward from the current time. After all of this is done, the user can reset the timeline to change his view to the default state.

With this, the student is able to view his entire submission history for an assignment in a convenient way.

==Problem Statement==

In Expertiza, it is possible for the instructor to view the submission records of a particular student. However, there is no way for students to check the history of their submission records. In this project, we are required to keep track of students’ activities and visualize them on their end by using a timeline chart.

<b>What needs to be visualized on the timeline:</b>

* Hyperlink submission record with timestamps
* File upload record with timestamps
* Due dates
*Visualization of Peer review of others works, which includes:
** A Review hyperlink that redirects to the review by clicking on it
** The Round number (To be displayed only if the assignment has multiple rounds)
** Timestamps
*Visualization of Author feedback on others review, which includes:
** A Feedback hyperlink that redirects to the feedback by clicking on it
** Timestamps

===Understanding Problem Statement===

The problem statement states the following issues that had to be resolved.

'''Issue-1:'''
Submission records with timestamps:

A student can submit their work for an assignment using "Your work" button in the respective assignment page. Students have two options to submit their work :
* Giving a hyperlink.
* Uploading a file.
As soon as the user submits any one of these, we needed to show hyperlink or file with the time-stamp on our visualization graph. Also, we needed to provide the submitted '''hyperlink or a link''' to the file on the visualization so that it will be easy for the user to navigate from a single page.

'''Issue-2:'''
Due dates:

There are different due dates for every assignment like Round-1 submission, Round-2 submission, Round-1 review and Round-2 review Due Dates. These are different from submission time stamps because a submission's timestamp depends upon the time at which the user had submitted the work whereas a due date is the deadline date fixed by an instructor. Visualizing them by adding them into the timeline, helps the student to track all due dates in a single graph.

'''Issue-3:'''
Peer Review other's work:

A student needs to review work of different teams during the course of the assignment. As of now in order to view the review, Expertiza requires the user to go to the "other's work" page in the assignment. Instead of this, we want this data to be viewed in our visualization graph. This issue includes a timestamp, link to view review, review round number to be shown in the graph.
'''Note:''' this review is the peer review '''given by this particular student''' to different teams as part of the assignment, '''not the reviews the student received.'''

'''Issue-4:'''
Author's feedback on other's Review
:
A student can give feedback for the review he/she received for a specific assignment. So this information also needs to be included in the graph. We need to show the timestamp and hyperlink to the feedback. It must be noted that the feedback here is not the feedback he got for review given by him/her but the feedback he/she gave for the reviews the had received.

==Program Design==

To visualize the timeline graphically we decided to use the vis.js JavaScript library. This library provides various interactive visualization charts (like graphs, networks, timelines, etc) to visualize data in real time. We chose to work on this library because when compared to other popular visualization libraries, vis.js provides the best possible representation of a timeline, one that meets the requirements of our project. To know more about how to make a timeline using vis.js, click [http://visjs.org/docs/timeline/ here].

The timeline contains a single horizontal axis that is divided into time intervals equally separated from each other.

Let us consider an example where a student makes several submissions to an assignment. The student uploads a hyperlink "https ://www.facebook.com" and an HTML file as submissions. The assignment has several deadlines or due dates. There are due dates for Round 1 and Round 2 submissions for this particular assignment. There are also review deadlines for each of the rounds for the assignment. The student can give a peer review to other students' work on the assignment. The student is able to give feedback to the peer reviews that he received. We have used color coding to differentiate between different kinds of things visualized on the timeline. We have used '''Orange''' color for a round's submission and review deadline and '''Green''' color for all hyperlink submissions, file submissions and '''Cream''' color for feedback, peer review, team review and self review submissions.

So in summary, the following things have to be present on the timeline that are visualized as rectangular boxes on the timeline:
* The submission hyperlink box with the hyperlink
* The file upload box with a link to the uploaded file
* The Round 1 peer review deadline
* The Round 1 submission due date
* The Round 2 peer review deadline
* The Round 2 submission due date
* The Peer Review that the student gave to other students
* The feedback that the student gave to received reviews
* A self-feedback that the student gave to himself
* A team review that the student can give to his teammates
* Additionally, all the rectangular boxed have timestamps that display when the submission was made or the due date of that task

Apart from this, various buttons were also added to better interact with the timeline. These include:
* ''Zoom in'' - To zoom in by magnifying the viewing scale of the timeline
* ''Zoom out'' - To zoom out of the timeline
* ''Move Left'' - To move along the timeline's x-axis. The user can move forward by pressing the button
* ''Move Right'' - To move backward along the x-axis
* '''Recenter''' - Pressing this button helps the user to '''reset the zoom scale''' and the position of the x-axis in a way that all the items appear '''sorted in a single window.'''
A single '''vertical red line''' set to the '''current time''' on the x-axis indicates the current time at which the timeline is being viewed.

The '''percentage of zoom, percentage of window to move right/left''' can be modified as per convenience as mentioned in <script> of zoom buttons mentioned in later section of wiki.

We have added '''hyperlinks to enable quick access to all of the student submitted content'''. For example, the rectangular box that shows the submitted file has a hyperlink that links to the contents of the file. Similarly, the reviews submitted by the student is linked by the hyperlink in the Peer review rectangular box on the timeline.

Finally, after obtaining all the data from the database and the inclusion of all the stated information above to visualizing it in the timeline, the result would be something like this:

[[File:S1.png]]

When the user selects a particular rectangular box on the timeline by clicking on it, then the line that connects the box to the timeline's x-axis becomes thicker and the color of the box also changes to '''White''' to indicate to the user the current box that is selected. If the user selects the file submission rectangular box (sample.html file), then the timeline would look like this:

[[File:S2.png]]

==Files Involved==

*app/controllers/submission_records_controller.rb
*app/models/submission_record.rb
*app/views/student_task/list.html.erb

==Database Tables Involved==

*submission_records
*response_map
*due_dates
*participants
*assignments
*users
*teams
*teams_users
*signed_up_teams
*sign_up_topics

==Implementation==

The code to embed the timeline into the webpage is as follows

< div id="visualization">
< div class="menu">
<input id="zoomIn" value="Zoom in" type="button">
<input id="zoomOut" value="Zoom out" type="button">
<input id="moveLeft" value="Move left" type="button">
<input id="moveRight" value="Move right" type="button">
<input id="Recenter" value="Recenter" type="button">
< /div>
< /div>
<script type="text/javascript">
// DOM element where the Timeline will be attached
var container = document.getElementById('visualization');
// Create a DataSet (allows two way data-binding)
var items = new vis.DataSet(visualization_JSON);
// Configuration for the Timeline
var options = {
zoomMin: 1000 * 60 * 60 * 24, // one day in milliseconds
zoomMax: 1000 * 60 * 60 * 24 * 31 * 12 // about three months in milliseconds
};
// Create a Timeline
var timeline = new vis.Timeline(container, items, options);
</script>

There are several buttons that were inserted into the timeline to allow the user to interact with the timeline. The code for that is

<script>
var visualization_window=timeline.range.getRange();
function move (percentage) {
var range = timeline.getWindow();
var interval = range.end - range.start;
timeline.setWindow({
start: range.start.valueOf() - interval * percentage,
end: range.end.valueOf() - interval * percentage
});
}
// attach events to the navigation buttons
// zoom percentage in zoomin/zoomout can be adjusted below by passing paramenter. Similar is the case for move left/right along the x-axis
document.getElementById('zoomIn').onclick = function () { timeline.zoomIn( 0.2); };
document.getElementById('zoomOut').onclick = function () { timeline.zoomOut( 0.2); };
document.getElementById('moveLeft').onclick = function () { move( 0.2); };
document.getElementById('moveRight').onclick = function () { move(-0.2); };
document.getElementById('Recenter').onclick = function () {
var visualization_window_start = new Date(visualization_window.start);
var visualization_window_end = new Date(visualization_window.end);
timeline.setWindow(visualization_window_start, visualization_window_end, { animation: true });
};
</script>

The functionality of each button is explained in the Program Design section above.

It is necessary to obtain data from the Expertiza database to JSON format so that it can be processed by the timeline for visualization. After collecting the data from the database, processing it and storing it into a ruby variable, we use the JSON.parse() function to convert that information into JSON objects. To maintain continuity, the process of obtaining data and preprocessing it is explained later in the wiki. The code to convert the variable contents into a JSON object is as follows:

<script>
// converting @visualization_data array to javascript compatible JSON object
var visualization_JSON = JSON.parse('<%=raw @visualization_data.to_json%>');
var href_JSON = JSON.parse('<%= @href_arr.to_json.html_safe%>')
var temp;
//temp is temporary variable used to generate hyperlinks from content
for(i=0; i<visualization_JSON.length; i++) {
temp=visualization_JSON[i].content.split("<split>");
if(href_JSON[i]=='')
visualization_JSON[i].content = temp[0]+"<br>"+temp.slice(1);
else
visualization_JSON[i].content = "<a href="+href_JSON[i]+" target='_blank'><b><u>"+temp[0]+"</u></b></a><br>"+temp.slice(1);
}
</script>

The following code is used to display due dates in the timeline. The types of due dates included are Round submission or Round review due date.

<% @href_arr= Array.new %>
<! -- @href_arr is used to store all the hyperlinks for each visualized object -->
<% @duedates = DueDate.where("parent_id = #{@assignment.id}")
@visualization_data = @duedates.map do |due|
@href_arr.push("");
if due.deadline_type_id.eql? 1
{ :id => due.id, :start=> due.due_at, :className => "submissionDue", :content => "Round "+(due.round.to_s)+"<split>Submission due by "+'<br>'+due.due_at.strftime("%m/%d/%Y at %I:%M %p") }
else
{ :id => due.id, :start=> due.due_at, :className => "reviewDue", :content => "Round "+(due.round.to_s)+"<split>Review due by "+'<br>'+due.due_at.strftime("%m/%d/%Y at %I:%M %p") }
end
end
%>

Then we need to add submission hyperlinks and files in the timeline. The code for that is

< ! -- display only if submissions are made-->
<% unless @team.nil?
@submissions = SubmissionRecord.find_by_sql"select * from submission_records where assignment_id=#{@assignment.id} and team_id=#{@team.id}
and content NOT IN (select content from submission_records where assignment_id=#{@assignment.id} and team_id=#{@team.id} and UPPER(operation) Like 'REMOVE%')"
@visualization_data += @submissions.map do |submission|
#display_directory_tree(participant, files, true).html_safe
if (submission.operation).eql?('Submit File')
file = submission.content
ret=""
if File.exist?(file) && File.directory?(file)
ret += link_to File.basename(file), :controller => 'submitted_content', :action => 'edit', :id => participant.id, "current_folder[name]" => file
else
ret += "\n "
ret += link_to File.basename(file), :controller => 'submitted_content',
:action => 'download',
:id => @participant.id,
:download => File.basename(file),
"current_folder[name]" => File.dirname(file)
end
@href_arr.push(ret.split('"')[1])
{ :id => submission.id, :start=> submission.created_at, :className=> "fileUpload", :content => (submission.content).split('/')[-1]+'<split>'+
submission.created_at.strftime("%m/%d/%Y at %I:%M %p") }
else
@href_arr.push(submission.content)
{ :id => submission.id, :start=> submission.created_at, :className=> "hyperlinkUpload" ,:content => submission.content+'<split>'+
submission.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
end
end %>

'''Explanation:''' The following code fetches submission records of a student for a particular assignment from the '''submission_records''' table. Then after checking if the submission exists and when the type is a file, a hyperlink to the file's location path is obtained and pushed into the JSON. The same is done for a submission with the type Hyperlink.

Then to get the peer reviews, self-reviews, feedback and team reviews, the following code is used.

<! -- Reviews not yet started -->
<% unless @review_mappings.nil?
@review_mappings.each do |review_mapping_iterator|
@response_values = Response.where(:map_id => review_mapping_iterator.id)
@visualization_data += @response_values.map do |response_value_iterator|
if review_mapping_iterator.type=="ReviewResponseMap"
review_mapping = ResponseMap.find(review_mapping_iterator.reviewed_object_id)
participant = AssignmentTeam.get_first_member(review_mapping_iterator.reviewee_id)
topic_id = SignedUpTeam.topic_id(participant.parent_id, participant.user_id)
if !topic_id.nil?
if SignUpTopic.find(topic_id).topic_identifier != ''
@topic_name=SignUpTopic.find(topic_id).topic_identifier+": "+SignUpTopic.find(topic_id).topic_name
else
@topic_name=SignUpTopic.find(topic_id).topic_name
end
end
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "review", :content => "Peer Review -
Round "+response_value_iterator.round.to_s+"<split> Review for: #{@topic_name}"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
elsif review_mapping_iterator.type=="SelfReviewResponseMap"
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "selfReview", :content => "Self Feedback -
Round "+response_value_iterator.round.to_s+"<split>Self Feedback"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
elsif review_mapping_iterator.type=="TeammateReviewResponseMap"
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
reviewee = ResponseMap.where(:reviewer_id => "#{review_mapping_iterator.reviewer_id}", :id =>"#{review_mapping_iterator.id}").pluck(:reviewee_id)
puts reviewee.to_s+" "+review_mapping_iterator.reviewer_id.to_s+" "+review_mapping_iterator.id.to_s
user_id = Participant.where(:id=> "#{reviewee[0]}").pluck(:user_id)
reviewee_name = User.where(:id=>"#{user_id[0]}").pluck(:name)
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "teamReview", :content => "Team Review -
Round "+response_value_iterator.round.to_s+"<split>Team review for #{reviewee_name[0]}"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
else
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "feedback", :content => "Feedback -
Round "+response_value_iterator.round.to_s+"<split>Feedback"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
end
end
end
end %>

==Test Plan==
===Automated test using RSpec===

Resources -
* [http://rspec.info/ RSpec]
* [https://github.com/thoughtbot/factory_girl Factory Girl ruby gem]

A new file with the name <b>timestamps_for_students_submissions_spec.rb</b> file will be created in <b>spec/features</b> folder with various test cases to test the changes.

===Testing from UI===
Testing the project using the User Interface.
*Login as an instructor, go to manage assignments-> select an assignment-> add students to assignment->update duedates.
*Impersonate as one of student -> navigate to the particular assignment edited in above step.
*You shall see a timeline with duedates
*Click on your work, submit hyperlink/files, same will be displayed in that particular assignment home page(navigate to previous page)
*Review teammates work/ give a peer review/ submit a self review/ submit feedback to review received, same will be reflected in respective assignment home page along with a hyperlink to the particular review given.
*The submission along with the timestamps for each submission along with hyperlinks to each of student's work is displayed in timeline.
*One can test for the Edge cases mentioned above too.

*[https://youtu.be/cGXu1YPG0Ec Interactive Video Demo link]

==Edge Cases==

'''Timeline behavior when the student opens the view page of a newly created assignment'''

* When the user has not made any submissions, reviews or feedbacks to reviews to the assignment, the timeline must only display the due dates of the assignment.

'''Timeline behavior when student has not joined any team and makes submissions'''

* When a student who is not part of any team makes a submission, he is assigned a team_ID by Expertiza and all submissions made by him are linked to that ID. So only those submissions will be displayed on the timeline.

'''Timeline behavior when the student joins a team, what happens to the submissions he made before joining the team'''

* When he joins a team and he receives a new team_ID, any submissions made hereafter will be made under the new team_ID and all previous submissions made by the student will not be shown on the timeline(this is how Expertiza assigns team_IDs and submissions- the same is reflected in 'your work' section of a user's profile). Only the user submissions made after he joins the team is shown on the timeline.

'''Timeline behavior when there is no name for a given assignment'''

* Sometimes assignments are not named. In the peer review submission rectangular box displayed on the timeline after the student submits a peer review, instead of showing the label "Review for [assignment name]", the label says "Review".

'''Timeline behavior when a submitted hyperlink is removed'''

* When a submitted hyperlink is removed, the submission must not be displayed on the timeline any more.

'''A submission must be made before a peer review can be given'''

* This condition holds even if the deadline has already passed.

==Future modifications==

We can also include icons that are embedded into the rectangles. They act as visual aids to help the user quickly recognize the category of the box. We propose a design that would look something like this:

[[File:S3.png]]

===References===

#[https://github.com/expertiza/expertiza Expertiza on GitHub]
#[http://expertiza.ncsu.edu/ The live Expertiza website]
#[http://wiki.expertiza.ncsu.edu/index.php/Expertiza_documentation Expertiza project documentation wiki]
#[https://relishapp.com/rspec Rspec Documentation]
#[http://visjs.org/docs/timeline/ Vis.js Documentation for Timeline]
#[ Github pull request submitted]
#[https://github.com/ShyamKatta/expertiza/tree/E1797/ Github - expertiza forked repository]

CSC/ECE 517 Fall 2017/E1797 Timestamps for students submission

2017-12-02T07:53:46Z

Skatta3:

==Introduction==

Expertiza is an open source project created using Ruby on Rails. Students can upload and submit their assignments and related work online for grading purposes.

===Existing System===

Currently, there exist various types of submissions that a student can make for an assignment for which timestamps are generated.
*When a student submits links or uploads files as submissions to an assignment in Expertiza, a timestamp is created for the date and time at which each of the submissions was done.
*The student may also be able to give reviews to other works for a particular assignment. These reviews when submitted also have an associated timestamp.
*There also exist timestamps for deadlines that have passed and that are upcoming for an assignment submission or a review to be done.
*For the reviews that a student receives for his work, the student can give feedback to each of the reviews. The submitted feedbacks also get timestamps.

Currenty there exists no functionality to view all these submissions and their timestamps in a single, aggregated way.

===Proposed System===

Our project was to solve this issue by creating a Visualization that helps the student view all the timestamps for his submissions. The goal is to create a Timeline that shows all the timestamps of submitted records and links to the submitted content wherever necessary. The default state of the timeline is a point on the x-axis set to the current date and time. The timeline is interactive and allows the user to zoom in and out to change the viewing scale of the timeline. The user can also scroll in the timeline to move the timeline forward or backward from the current time. After all of this is done, the user can reset the timeline to change his view to the default state.

With this, the student is able to view his entire submission history for an assignment in a convenient way.

==Problem Statement==

In Expertiza, it is possible for the instructor to view the submission records of a particular student. However, there is no way for students to check the history of their submission records. In this project, we are required to keep track of students’ activities and visualize them on their end by using a timeline chart.

<b>What needs to be visualized on the timeline:</b>

* Hyperlink submission record with timestamps
* File upload record with timestamps
* Due dates
*Visualization of Peer review of others works, which includes:
** A Review hyperlink that redirects to the review by clicking on it
** The Round number (To be displayed only if the assignment has multiple rounds)
** Timestamps
*Visualization of Author feedback on others review, which includes:
** A Feedback hyperlink that redirects to the feedback by clicking on it
** Timestamps

===Understanding Problem Statement===

The problem statement states the following issues that had to be resolved.

'''Issue-1:'''
Submission records with timestamps:

A student can submit their work for an assignment using "Your work" button in the respective assignment page. Students have two options to submit their work :
* Giving a hyperlink.
* Uploading a file.
As soon as the user submits any one of these, we needed to show hyperlink or file with the time-stamp on our visualization graph. Also, we needed to provide the submitted '''hyperlink or a link''' to the file on the visualization so that it will be easy for the user to navigate from a single page.

'''Issue-2:'''
Due dates:

There are different due dates for every assignment like Round-1 submission, Round-2 submission, Round-1 review and Round-2 review Due Dates. These are different from submission time stamps because a submission's timestamp depends upon the time at which the user had submitted the work whereas a due date is the deadline date fixed by an instructor. Visualizing them by adding them into the timeline, helps the student to track all due dates in a single graph.

'''Issue-3:'''
Peer Review other's work:

A student needs to review work of different teams during the course of the assignment. As of now in order to view the review, Expertiza requires the user to go to the "other's work" page in the assignment. Instead of this, we want this data to be viewed in our visualization graph. This issue includes a timestamp, link to view review, review round number to be shown in the graph.
'''Note:''' this review is the peer review '''given by this particular student''' to different teams as part of the assignment, '''not the reviews the student received.'''

'''Issue-4:'''
Author's feedback on other's Review
:
A student can give feedback for the review he/she received for a specific assignment. So this information also needs to be included in the graph. We need to show the timestamp and hyperlink to the feedback. It must be noted that the feedback here is not the feedback he got for review given by him/her but the feedback he/she gave for the reviews the had received.

==Program Design==

To visualize the timeline graphically we decided to use the vis.js JavaScript library. This library provides various interactive visualization charts (like graphs, networks, timelines, etc) to visualize data in real time. We chose to work on this library because when compared to other popular visualization libraries, vis.js provides the best possible representation of a timeline, one that meets the requirements of our project. To know more about how to make a timeline using vis.js, click [http://visjs.org/docs/timeline/ here].

The timeline contains a single horizontal axis that is divided into time intervals equally separated from each other.

Let us consider an example where a student makes several submissions to an assignment. The student uploads a hyperlink "https ://www.facebook.com" and an HTML file as submissions. The assignment has several deadlines or due dates. There are due dates for Round 1 and Round 2 submissions for this particular assignment. There are also review deadlines for each of the rounds for the assignment. The student can give a peer review to other students' work on the assignment. The student is able to give feedback to the peer reviews that he received. We have used color coding to differentiate between different kinds of things visualized on the timeline. We have used '''Orange''' color for a round's submission and review deadline and '''Green''' color for all hyperlink submissions, file submissions and '''Cream''' color for feedback, peer review, team review and self review submissions.

So in summary, the following things have to be present on the timeline that are visualized as rectangular boxes on the timeline:
* The submission hyperlink box with the hyperlink
* The file upload box with a link to the uploaded file
* The Round 1 peer review deadline
* The Round 1 submission due date
* The Round 2 peer review deadline
* The Round 2 submission due date
* The Peer Review that the student gave to other students
* The feedback that the student gave to received reviews
* A self-feedback that the student gave to himself
* A team review that the student can give to his teammates
* Additionally, all the rectangular boxed have timestamps that display when the submission was made or the due date of that task

Apart from this, various buttons were also added to better interact with the timeline. These include:
* ''Zoom in'' - To zoom in by magnifying the viewing scale of the timeline
* ''Zoom out'' - To zoom out of the timeline
* ''Move Left'' - To move along the timeline's x-axis. The user can move forward by pressing the button
* ''Move Right'' - To move backward along the x-axis
* '''Recenter''' - Pressing this button helps the user to '''reset the zoom scale''' and the position of the x-axis in a way that all the items appear '''sorted in a single window.'''
A single '''vertical red line''' set to the '''current time''' on the x-axis indicates the current time at which the timeline is being viewed.

The '''percentage of zoom, percentage of window to move right/left''' can be modified as per convenience as mentioned in <script> of zoom buttons mentioned in later section of wiki.

We have added '''hyperlinks to enable quick access to all of the student submitted content'''. For example, the rectangular box that shows the submitted file has a hyperlink that links to the contents of the file. Similarly, the reviews submitted by the student is linked by the hyperlink in the Peer review rectangular box on the timeline.

Finally, after obtaining all the data from the database and the inclusion of all the stated information above to visualizing it in the timeline, the result would be something like this:

[[File:S1.png]]

When the user selects a particular rectangular box on the timeline by clicking on it, then the line that connects the box to the timeline's x-axis becomes thicker and the color of the box also changes to '''White''' to indicate to the user the current box that is selected. If the user selects the file submission rectangular box (sample.html file), then the timeline would look like this:

[[File:S2.png]]

==Files Involved==

*app/controllers/submission_records_controller.rb
*app/models/submission_record.rb
*app/views/student_task/list.html.erb

==Database Tables Involved==

*submission_records
*response_map
*due_dates
*participants
*assignments
*users
*teams
*teams_users
*signed_up_teams
*sign_up_topics

==Implementation==

The code to embed the timeline into the webpage is as follows

< div id="visualization">
< div class="menu">
<input id="zoomIn" value="Zoom in" type="button">
<input id="zoomOut" value="Zoom out" type="button">
<input id="moveLeft" value="Move left" type="button">
<input id="moveRight" value="Move right" type="button">
<input id="Recenter" value="Recenter" type="button">
< /div>
< /div>
<script type="text/javascript">
// DOM element where the Timeline will be attached
var container = document.getElementById('visualization');
// Create a DataSet (allows two way data-binding)
var items = new vis.DataSet(visualization_JSON);
// Configuration for the Timeline
var options = {
zoomMin: 1000 * 60 * 60 * 24, // one day in milliseconds
zoomMax: 1000 * 60 * 60 * 24 * 31 * 12 // about three months in milliseconds
};
// Create a Timeline
var timeline = new vis.Timeline(container, items, options);
</script>

There are several buttons that were inserted into the timeline to allow the user to interact with the timeline. The code for that is

<script>
var visualization_window=timeline.range.getRange();
function move (percentage) {
var range = timeline.getWindow();
var interval = range.end - range.start;
timeline.setWindow({
start: range.start.valueOf() - interval * percentage,
end: range.end.valueOf() - interval * percentage
});
}
// attach events to the navigation buttons
// zoom percentage in zoomin/zoomout can be adjusted below by passing paramenter. Similar is the case for move left/right along the x-axis
document.getElementById('zoomIn').onclick = function () { timeline.zoomIn( 0.2); };
document.getElementById('zoomOut').onclick = function () { timeline.zoomOut( 0.2); };
document.getElementById('moveLeft').onclick = function () { move( 0.2); };
document.getElementById('moveRight').onclick = function () { move(-0.2); };
document.getElementById('Recenter').onclick = function () {
var visualization_window_start = new Date(visualization_window.start);
var visualization_window_end = new Date(visualization_window.end);
timeline.setWindow(visualization_window_start, visualization_window_end, { animation: true });
};
</script>

The functionality of each button is explained in the Program Design section above.

It is necessary to obtain data from the Expertiza database to JSON format so that it can be processed by the timeline for visualization. After collecting the data from the database, processing it and storing it into a ruby variable, we use the JSON.parse() function to convert that information into JSON objects. To maintain continuity, the process of obtaining data and preprocessing it is explained later in the wiki. The code to convert the variable contents into a JSON object is as follows:

<script>
// converting @visualization_data array to javascript compatible JSON object
var visualization_JSON = JSON.parse('<%=raw @visualization_data.to_json%>');
var href_JSON = JSON.parse('<%= @href_arr.to_json.html_safe%>')
var temp;
//temp is temporary variable used to generate hyperlinks from content
for(i=0; i<visualization_JSON.length; i++) {
temp=visualization_JSON[i].content.split("<split>");
if(href_JSON[i]=='')
visualization_JSON[i].content = temp[0]+"<br>"+temp.slice(1);
else
visualization_JSON[i].content = "<a href="+href_JSON[i]+" target='_blank'><b><u>"+temp[0]+"</u></b></a><br>"+temp.slice(1);
}
</script>

The following code is used to display due dates in the timeline. The types of due dates included are Round submission or Round review due date.

<% @href_arr= Array.new %>
<! -- @href_arr is used to store all the hyperlinks for each visualized object -->
<% @duedates = DueDate.where("parent_id = #{@assignment.id}")
@visualization_data = @duedates.map do |due|
@href_arr.push("");
if due.deadline_type_id.eql? 1
{ :id => due.id, :start=> due.due_at, :className => "submissionDue", :content => "Round "+(due.round.to_s)+"<split>Submission due by "+'<br>'+due.due_at.strftime("%m/%d/%Y at %I:%M %p") }
else
{ :id => due.id, :start=> due.due_at, :className => "reviewDue", :content => "Round "+(due.round.to_s)+"<split>Review due by "+'<br>'+due.due_at.strftime("%m/%d/%Y at %I:%M %p") }
end
end
%>

Then we need to add submission hyperlinks and files in the timeline. The code for that is

< ! -- display only if submissions are made-->
<% unless @team.nil?
@submissions = SubmissionRecord.find_by_sql"select * from submission_records where assignment_id=#{@assignment.id} and team_id=#{@team.id}
and content NOT IN (select content from submission_records where assignment_id=#{@assignment.id} and team_id=#{@team.id} and UPPER(operation) Like 'REMOVE%')"
@visualization_data += @submissions.map do |submission|
#display_directory_tree(participant, files, true).html_safe
if (submission.operation).eql?('Submit File')
file = submission.content
ret=""
if File.exist?(file) && File.directory?(file)
ret += link_to File.basename(file), :controller => 'submitted_content', :action => 'edit', :id => participant.id, "current_folder[name]" => file
else
ret += "\n "
ret += link_to File.basename(file), :controller => 'submitted_content',
:action => 'download',
:id => @participant.id,
:download => File.basename(file),
"current_folder[name]" => File.dirname(file)
end
@href_arr.push(ret.split('"')[1])
{ :id => submission.id, :start=> submission.created_at, :className=> "fileUpload", :content => (submission.content).split('/')[-1]+'<split>'+
submission.created_at.strftime("%m/%d/%Y at %I:%M %p") }
else
@href_arr.push(submission.content)
{ :id => submission.id, :start=> submission.created_at, :className=> "hyperlinkUpload" ,:content => submission.content+'<split>'+
submission.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
end
end %>

'''Explanation:''' The following code fetches submission records of a student for a particular assignment from the '''submission_records''' table. Then after checking if the submission exists and when the type is a file, a hyperlink to the file's location path is obtained and pushed into the JSON. The same is done for a submission with the type Hyperlink.

Then to get the peer reviews, self-reviews, feedback and team reviews, the following code is used.

<! -- Reviews not yet started -->
<% unless @review_mappings.nil?
@review_mappings.each do |review_mapping_iterator|
@response_values = Response.where(:map_id => review_mapping_iterator.id)
@visualization_data += @response_values.map do |response_value_iterator|
if review_mapping_iterator.type=="ReviewResponseMap"
review_mapping = ResponseMap.find(review_mapping_iterator.reviewed_object_id)
participant = AssignmentTeam.get_first_member(review_mapping_iterator.reviewee_id)
topic_id = SignedUpTeam.topic_id(participant.parent_id, participant.user_id)
if !topic_id.nil?
if SignUpTopic.find(topic_id).topic_identifier != ''
@topic_name=SignUpTopic.find(topic_id).topic_identifier+": "+SignUpTopic.find(topic_id).topic_name
else
@topic_name=SignUpTopic.find(topic_id).topic_name
end
end
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "review", :content => "Peer Review -
Round "+response_value_iterator.round.to_s+"<split> Review for: #{@topic_name}"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
elsif review_mapping_iterator.type=="SelfReviewResponseMap"
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "selfReview", :content => "Self Feedback -
Round "+response_value_iterator.round.to_s+"<split>Self Feedback"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
elsif review_mapping_iterator.type=="TeammateReviewResponseMap"
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
reviewee = ResponseMap.where(:reviewer_id => "#{review_mapping_iterator.reviewer_id}", :id =>"#{review_mapping_iterator.id}").pluck(:reviewee_id)
puts reviewee.to_s+" "+review_mapping_iterator.reviewer_id.to_s+" "+review_mapping_iterator.id.to_s
user_id = Participant.where(:id=> "#{reviewee[0]}").pluck(:user_id)
reviewee_name = User.where(:id=>"#{user_id[0]}").pluck(:name)
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "teamReview", :content => "Team Review -
Round "+response_value_iterator.round.to_s+"<split>Team review for #{reviewee_name[0]}"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
else
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "feedback", :content => "Feedback -
Round "+response_value_iterator.round.to_s+"<split>Feedback"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
end
end
end
end %>

==Test Plan==
===Automated test using RSpec===

Resources -
* [http://rspec.info/ RSpec]
* [https://github.com/thoughtbot/factory_girl Factory Girl ruby gem]

A new file with the name <b>timestamps_for_students_submissions_spec.rb</b> file will be created in <b>spec/features</b> folder with various test cases to test the changes.

===Testing from UI===
Testing the project using the User Interface.
*Login as an instructor, go to manage assignments-> select an assignment-> add students to assignment->update duedates.
*Impersonate as one of student -> navigate to the particular assignment edited in above step.
*You shall see a timeline with duedates
*Click on your work, submit hyperlink/files, same will be displayed in that particular assignment home page(navigate to previous page)
*Review teammates work/ give a peer review/ submit a self review/ submit feedback to review received, same will be reflected in respective assignment home page along with a hyperlink to the particular review given.
*The submission along with the timestamps for each submission along with hyperlinks to each of student's work is displayed in timeline.
*One can test for the Edge cases mentioned above too.

*[https://youtu.be/cGXu1YPG0Ec Interactive Video Demo link]

==Edge Cases==

'''Timeline behavior when the student opens the view page of a newly created assignment'''

* When the user has not made any submissions, reviews or feedbacks to reviews to the assignment, the timeline must only display the due dates of the assignment.

'''Timeline behavior when student has not joined any team and makes submissions'''

* When a student who is not part of any team makes a submission, he is assigned a team_ID by Expertiza and all submissions made by him are linked to that ID. So only those submissions will be displayed on the timeline.

'''Timeline behavior when the student joins a team, what happens to the submissions he made before joining the team'''

* When he joins a team and he receives a new team_ID, any submissions made hereafter will be made under the new team_ID and all previous submissions made by the student will not be shown on the timeline(this is how Expertiza assigns team_IDs and submissions- the same is reflected in 'your work' section of a user's profile). Only the user submissions made after he joins the team is shown on the timeline.

'''Timeline behavior when there is no name for a given assignment'''

* Sometimes assignments are not named. In the peer review submission rectangular box displayed on the timeline after the student submits a peer review, instead of showing the label "Review for [assignment name]", the label says "Review".

'''Timeline behavior when a submitted hyperlink is removed'''

* When a submitted hyperlink is removed, the submission must not be displayed on the timeline any more.

'''A submission must be made before a peer review can be given'''

* This condition holds even if the deadline has already passed.

==Future modifications==

We can also include icons that are embedded into the rectangles. They act as visual aids to help the user quickly recognize the category of the box. We propose a design that would look something like this:

[[File:S3.png]]

===References===

#[https://github.com/expertiza/expertiza Expertiza on GitHub]
#[http://expertiza.ncsu.edu/ The live Expertiza website]
#[http://wiki.expertiza.ncsu.edu/index.php/Expertiza_documentation Expertiza project documentation wiki]
#[https://relishapp.com/rspec Rspec Documentation]
#[http://visjs.org/docs/timeline/ Vis.js Documentation for Timeline]
#[ Github pull request submitted]
#[https://github.com/ShyamKatta/expertiza/tree/E1797/ Github - expertiza forked repository]

CSC/ECE 517 Fall 2016/E1675. Timestamp for student file & hyperlink submissions

2017-12-02T07:51:27Z

Skatta3:

==E1675.Timestamp for student file & hyperlink submissions ==

This page provides a description of the Expertiza based OSS project.

__TOC__

===About Expertiza===

[http://expertiza.ncsu.edu/ Expertiza] is an open source project based on [http://rubyonrails.org/ Ruby on Rails] framework. Expertiza is a software to create reusable learning objects through peer review. It also supports team projects, and the submission of almost any document type, including URLs and wiki pages.

===Problem Statement===
In Expertiza we accept hyperlinks as well as files submitted by students, which makes it harder to track the updates for student's submission. In this project we were required to keep track of timestamp records for student's submissions and updates of artifacts (submitted files or hyperlinks). Authors can delete or re-submit files and hyperlinks, those activities were also recorded.

===Task Goals ===
What needs to be done:

* Record the timestamps for file/hyperlink submissions.
* Add code to keep all those time stamps tracked and updated.
* Change the view of 0.0.0.0:3000/assignments/list_submissions view (by clicking the “View submissions icon”) to display the submition histories of each team.
* Make the available submissions clickable (some submitted items maight be deleted, so they are displayed but not clickable).
* After this project, the ResubmissionTime model (and related code) will not be used anymore. Please remove related code and db table.
* Create tests to make sure the test coverage increase.

===Program Design ===

We created a set of new controller, model and views to implement the functionality of timestamps.
We added a model named SubmissionRecord that contains the following attributes.

* Hyperlink - hyperlink that could be uploaded - String.
* Upload File - file that could be uploaded - File.
* Team id - id that links the model to the team that created it. - Integer.
* Created at - timestamp for time of creation.
* Operation - Description of operation performed. - create, update and delete.
* User - User who change the status of current table Get this from current user id.
* Content - String, the file name or the hyperlink.

===Implementation===

=====Action_allowed=====
* In present code, the application has the control to decide which kind of user could have access to the specific page. In order to let the instructor see the submission_record, we need to add action_allowed method in submission_record_controller. Below is reference code :
<pre>
def action_allowed?
if params[:action] == 'edit' || params[:action] == 'update'
assignment = Assignment.find(params[:id])
return true if ['Super-Administrator', 'Administrator'].include? current_role_name
return true if assignment.instructor_id == current_user.id
return true if TaMapping.exists?(ta_id: current_user.id, course_id: assignment.course_id) &&
(TaMapping.where(course_id: assignment.course_id).include?TaMapping.where(ta_id: current_user.id, course_id: assignment.course_id).first)
return true if assignment.course_id && Course.find(assignment.course_id).instructor_id == current_user.id
return false
else
['Super-Administrator',
'Administrator',
'Instructor',
'Teaching Assistant'].include? current_role_name
end
end
</pre>

=====Submit Hyperlink & File =====
* After we created the table, there isn't a specific page for us to fill in the submission_record database table. So we implemented this feature using the previous functionality already existent in the submitted_content controller/model. This page had information about the hyperlinks and files which were previously submitted by the student. We add functionality to fill in submission_record table once a hyperlink or file is submitted. Below is a code snippet for reference :

<pre>
def submit_hyperlink

@participant = AssignmentParticipant.find(params[:id])
return unless current_user_id?(@participant.user_id)

team = @participant.team
team_hyperlinks = team.hyperlinks
if team_hyperlinks.include?(params['submission'])
flash[:error] = "You or your teammate(s) have already submitted the same hyperlink."
else
begin
team.submit_hyperlink(params['submission'])
@participant.update_resubmit_times

#create a submission record
@submission_record = SubmissionRecord.new(team_id: team, user: @participant.name, assignment_id: params[:id], operation: "Submit Hyperlink")
@submission_record.save
rescue
flash[:error] = "The URL or URI is not valid. Reason: #{$ERROR_INFO}"
end
undo_link("The link has been successfully submitted.")
end
redirect_to action: 'edit', id: @participant.id
end
</pre>

<pre>
#create a submission record
assignment = Assignment.find(participant.parent_id)
team = participant.team
@submission_record = SubmissionRecord.new(team_id: team.id, user: participant.name , assignment_id: assignment.id, operation: "Submit File")
@submission_record.save
</pre>

===== Remove Hyperlink or File=====
* When students want to delete their hyperlinks or files which they had submitted before, the data in submission_record table should not disappear. We wanted to save all the operations made by the team. As a result, we added specific functionality in the existing delete function to reserve the data in submission_record table.
<pre>
#create a submission record
@submission_record = SubmissionRecord.new(team_id: team.id, user:@participant.name , assignment_id: assignment.id, operation: "Remove Hyperlink")
@submission_record.save
</pre>

<pre>
def delete_selected_files
#create a submission record
assignment = Assignment.find(participant.parent_id)
team = participant.team
@submission_record = SubmissionRecord.new(team_id: team.id, user: participant.name , assignment_id: assignment.id, operation: "Remove File")
@submission_record.save
filename = params[:directories][params[:chk_files]] + "/" + params[:filenames][params[:chk_files]]
FileUtils.rm_r(filename)
end
</pre>

=====View Submission Record =====
* In order to make the student submitted hyperlinks clickable, we check if the operation performed is 'Submit Hyperlink' in database.
<pre>
<% if record.operation == "Submit Hyperlink" %>
<td><a href="<%= record.content %>" target="_blank"><%= record.content %></a><br/></td>

<% else %>
<td><%= record.content %></td>
<% end %>
<td><%= record.created_at %></td>
</pre>

====Parameter Passing====
We utilize the params hash from the previous view called List_submissions. We then use a WHERE SQL query that matches the team_id from the submissions record table.
<pre>

<%= link_to "Show Submission Records", submission_records_path(team_id: team.id) %>(View:list_submission)
@submission_records = SubmissionRecord.where(team_id: params[:team_id])(submission_record_controller)

</pre>

===Automated Testing using RSPEC===
The testing for this project has been done using several advanced ruby features. Below are a few of the features which were used :
* [http://rspec.info/ RSpec]
* [https://github.com/thoughtbot/factory_girl Factory Girl ruby gem]
* [https://github.com/thoughtbot/factory_girl FFaker ruby gem]

Using these techniques, the project was thoroughly tested.

Models were tested for their validation. We had to verify each of the parameters which we received in our model. This was done by developing a Ruby Factory which had sample data. This sample data was fed into the models. Using RSpec, we then checked for validity for each of the parameters received in the models. This validity check is important since this information is prerequisite for having a perfectly working controller and view.

Below is a code snippet which describes the testing methodology.
<pre>
require 'rails_helper'
describe SubmissionRecord do
it 'is invalid without a team id' do
expect(build(:submission_record, team_id: nil)).to_not be_valid
end
it 'is invalid without an operation' do
expect(build(:submission_record, operation: nil)).to_not be_valid
end
it 'is invalid without a user' do
expect(build(:submission_record, user: nil)).to_not be_valid
end
it 'is invalid without an assignment id' do
expect(build(:submission_record, assignment_id: nil)).to_not be_valid
end
it 'is invalid without an operation' do
expect(build(:submission_record, operation: nil)).to_not be_valid
end
end
</pre>

Controllers were tested to make sure the rendering, redirection and views are proper.

===Testing from UI===
Steps for testing the project using the User Interface.
*As an instructor, go to manage assignments.
*Click on submissions view of an assignment.
*You will see all the items submissions.
*Click on "Show Submission Records".
*You will see a history of the submission along with the timestamps for each submission.
*You can also see when the submission was added, updated and removed.
*Visit below video link to see an interactive demo.

*[https://youtu.be/cGXu1YPG0Ec Demo link]

===References===

#[https://github.com/expertiza/expertiza Expertiza on GitHub]
#[https://github.com/rsndates/expertiza GitHub Project Repository Fork]
#[http://expertiza.ncsu.edu/ The live Expertiza website]
#[http://wiki.expertiza.ncsu.edu/index.php/Expertiza_documentation Expertiza project documentation wiki]
#[https://relishapp.com/rspec Rspec Documentation]
#Clean Code: A Handbook of Agile Software Craftsmanship. Author: Robert C Martin

CSC/ECE 517 Fall 2016/E1675. Timestamp for student file & hyperlink submissions

2017-12-02T07:46:30Z

Skatta3: Undo revision 104194 by Agoel4 (talk)

==E1675.Timestamp for student file & hyperlink submissions ==

This page provides a description of the Expertiza based OSS project.

__TOC__

===About Expertiza===

[http://expertiza.ncsu.edu/ Expertiza] is an open source project based on [http://rubyonrails.org/ Ruby on Rails] framework. Expertiza is a software to create reusable learning objects through peer review. It also supports team projects, and the submission of almost any document type, including URLs and wiki pages.

===Problem Statement===
In Expertiza we accept hyperlinks as well as files submitted by students, which makes it harder to track the updates for student's submission. In this project we were required to keep track of timestamp records for student's submissions and updates of artifacts (submitted files or hyperlinks). Authors can delete or re-submit files and hyperlinks, those activities were also recorded.

===Task Goals ===
What needs to be done:

* Record the timestamps for file/hyperlink submissions.
* Add code to keep all those time stamps tracked and updated.
* Change the view of 0.0.0.0:3000/assignments/list_submissions view (by clicking the “View submissions icon”) to display the submition histories of each team.
* Make the available submissions clickable (some submitted items maight be deleted, so they are displayed but not clickable).
* After this project, the ResubmissionTime model (and related code) will not be used anymore. Please remove related code and db table.
* Create tests to make sure the test coverage increase.

===Program Design ===

We created a set of new controller, model and views to implement the functionality of timestamps.
We added a model named SubmissionRecord that contains the following attributes.

* Hyperlink - hyperlink that could be uploaded - String.
* Upload File - file that could be uploaded - File.
* Team id - id that links the model to the team that created it. - Integer.
* Created at - timestamp for time of creation.
* Operation - Description of operation performed. - create, update and delete.
* User - User who change the status of current table Get this from current user id.
* Content - String, the file name or the hyperlink.

===Implementation===

=====Action_allowed=====
* In present code, the application has the control to decide which kind of user could have access to the specific page. In order to let the instructor see the submission_record, we need to add action_allowed method in submission_record_controller. Below is reference code :
<pre>
def action_allowed?
if params[:action] == 'edit' || params[:action] == 'update'
assignment = Assignment.find(params[:id])
return true if ['Super-Administrator', 'Administrator'].include? current_role_name
return true if assignment.instructor_id == current_user.id
return true if TaMapping.exists?(ta_id: current_user.id, course_id: assignment.course_id) &&
(TaMapping.where(course_id: assignment.course_id).include?TaMapping.where(ta_id: current_user.id, course_id: assignment.course_id).first)
return true if assignment.course_id && Course.find(assignment.course_id).instructor_id == current_user.id
return false
else
['Super-Administrator',
'Administrator',
'Instructor',
'Teaching Assistant'].include? current_role_name
end
end
</pre>

=====Submit Hyperlink & File =====
* After we created the table, there isn't a specific page for us to fill in the submission_record database table. So we implemented this feature using the previous functionality already existent in the submitted_content controller/model. This page had information about the hyperlinks and files which were previously submitted by the student. We add functionality to fill in submission_record table once a hyperlink or file is submitted. Below is a code snippet for reference :

<pre>
def submit_hyperlink

@participant = AssignmentParticipant.find(params[:id])
return unless current_user_id?(@participant.user_id)

team = @participant.team
team_hyperlinks = team.hyperlinks
if team_hyperlinks.include?(params['submission'])
flash[:error] = "You or your teammate(s) have already submitted the same hyperlink."
else
begin
team.submit_hyperlink(params['submission'])
@participant.update_resubmit_times

#create a submission record
@submission_record = SubmissionRecord.new(team_id: team, user: @participant.name, assignment_id: params[:id], operation: "Submit Hyperlink")
@submission_record.save
rescue
flash[:error] = "The URL or URI is not valid. Reason: #{$ERROR_INFO}"
end
undo_link("The link has been successfully submitted.")
end
redirect_to action: 'edit', id: @participant.id
end
</pre>

<pre>
#create a submission record
assignment = Assignment.find(participant.parent_id)
team = participant.team
@submission_record = SubmissionRecord.new(team_id: team.id, user: participant.name , assignment_id: assignment.id, operation: "Submit File")
@submission_record.save
</pre>

===== Remove Hyperlink or File=====
* When students want to delete their hyperlinks or files which they had submitted before, the data in submission_record table should not disappear. We wanted to save all the operations made by the team. As a result, we added specific functionality in the existing delete function to reserve the data in submission_record table.
<pre>
#create a submission record
@submission_record = SubmissionRecord.new(team_id: team.id, user:@participant.name , assignment_id: assignment.id, operation: "Remove Hyperlink")
@submission_record.save
</pre>

<pre>
def delete_selected_files
#create a submission record
assignment = Assignment.find(participant.parent_id)
team = participant.team
@submission_record = SubmissionRecord.new(team_id: team.id, user: participant.name , assignment_id: assignment.id, operation: "Remove File")
@submission_record.save
filename = params[:directories][params[:chk_files]] + "/" + params[:filenames][params[:chk_files]]
FileUtils.rm_r(filename)
end
</pre>

=====View Submission Record =====
* In order to make the student submitted hyperlinks clickable, we check if the operation performed is 'Submit Hyperlink' in database.
<pre>
<% if record.operation == "Submit Hyperlink" %>
<td><a href="<%= record.content %>" target="_blank"><%= record.content %></a><br/></td>

<% else %>
<td><%= record.content %></td>
<% end %>
<td><%= record.created_at %></td>
</pre>

====Parameter Passing====
We utilize the params hash from the previous view called List_submissions. We then use a WHERE SQL query that matches the team_id from the submissions record table.
<pre>

<%= link_to "Show Submission Records", submission_records_path(team_id: team.id) %>(View:list_submission)
@submission_records = SubmissionRecord.where(team_id: params[:team_id])(submission_record_controller)

</pre>

===Automated Testing using RSPEC===
The testing for this project has been done using several advanced ruby features. Below are a few of the features which were used :
* [http://rspec.info/ RSpec]
* [https://github.com/thoughtbot/factory_girl Factory Girl ruby gem]
* [https://github.com/thoughtbot/factory_girl FFaker ruby gem]

Using these techniques, the project was thoroughly tested.

Models were tested for their validation. We had to verify each of the parameters which we received in our model. This was done by developing a Ruby Factory which had sample data. This sample data was fed into the models. Using RSpec, we then checked for validity for each of the parameters received in the models. This validity check is important since this information is prerequisite for having a perfectly working controller and view.

Below is a code snippet which describes the testing methodology.
<pre>
require 'rails_helper'
describe SubmissionRecord do
it 'is invalid without a team id' do
expect(build(:submission_record, team_id: nil)).to_not be_valid
end
it 'is invalid without an operation' do
expect(build(:submission_record, operation: nil)).to_not be_valid
end
it 'is invalid without a user' do
expect(build(:submission_record, user: nil)).to_not be_valid
end
it 'is invalid without an assignment id' do
expect(build(:submission_record, assignment_id: nil)).to_not be_valid
end
it 'is invalid without an operation' do
expect(build(:submission_record, operation: nil)).to_not be_valid
end
end
</pre>

Controllers were tested to make sure the rendering, redirection and views are proper.

===Testing from UI===
Testing the project using the User Interface.
*Login as an instructor, go to manage assignments-> select an assignment-> add students to assignment->update duedates.
*Impersonate as one of student -> navigate to the particular assignment edited in above step.
*You shall see a timeline with duedates
*Click on your work, submit hyperlink/files, same will be displayed in that particular assignment home page(navigate to previous page)
*Review teammates work/ give a peer review/ submit a self review/ submit feedback to review received, same will be reflected in respective assignment home page along with a hyperlink to the particular review given.
*The submission along with the timestamps for each submission along with hyperlinks to each of student's work is displayed in timeline.
*One can '''test''' for the '''Edge cases''' mentioned above too.
*Video link for an interactive demo.

*[https://youtu.be/cGXu1YPG0Ec Interactive Video Demo]

===References===

#[https://github.com/expertiza/expertiza Expertiza on GitHub]
#[https://github.com/rsndates/expertiza GitHub Project Repository Fork]
#[http://expertiza.ncsu.edu/ The live Expertiza website]
#[http://wiki.expertiza.ncsu.edu/index.php/Expertiza_documentation Expertiza project documentation wiki]
#[https://relishapp.com/rspec Rspec Documentation]
#Clean Code: A Handbook of Agile Software Craftsmanship. Author: Robert C Martin

CSC/ECE 517 Fall 2017/E1797 Timestamps for students submission

2017-12-02T07:40:18Z

Skatta3: /* Testing from UI */

==Introduction==

Expertiza is an open source project created using Ruby on Rails. Students can upload and submit their assignments and related work online for grading purposes.

===Existing System===

Currently, there exist various types of submissions that a student can make for an assignment for which timestamps are generated.
*When a student submits links or uploads files as submissions to an assignment in Expertiza, a timestamp is created for the date and time at which each of the submissions was done.
*The student may also be able to give reviews to other works for a particular assignment. These reviews when submitted also have an associated timestamp.
*There also exist timestamps for deadlines that have passed and that are upcoming for an assignment submission or a review to be done.
*For the reviews that a student receives for his work, the student can give feedback to each of the reviews. The submitted feedbacks also get timestamps.

Currenty there exists no functionality to view all these submissions and their timestamps in a single, aggregated way.

===Proposed System===

Our project was to solve this issue by creating a Visualization that helps the student view all the timestamps for his submissions. The goal is to create a Timeline that shows all the timestamps of submitted records and links to the submitted content wherever necessary. The default state of the timeline is a point on the x-axis set to the current date and time. The timeline is interactive and allows the user to zoom in and out to change the viewing scale of the timeline. The user can also scroll in the timeline to move the timeline forward or backward from the current time. After all of this is done, the user can reset the timeline to change his view to the default state.

With this, the student is able to view his entire submission history for an assignment in a convenient way.

==Problem Statement==

In Expertiza, it is possible for the instructor to view the submission records of a particular student. However, there is no way for students to check the history of their submission records. In this project, we are required to keep track of students’ activities and visualize them on their end by using a timeline chart.

<b>What needs to be visualized on the timeline:</b>

* Hyperlink submission record with timestamps
* File upload record with timestamps
* Due dates
*Visualization of Peer review of others works, which includes:
** A Review hyperlink that redirects to the review by clicking on it
** The Round number (To be displayed only if the assignment has multiple rounds)
** Timestamps
*Visualization of Author feedback on others review, which includes:
** A Feedback hyperlink that redirects to the feedback by clicking on it
** Timestamps

===Understanding Problem Statement===

The problem statement states the following issues that had to be resolved.

'''Issue-1:'''
Submission records with timestamps:

A student can submit their work for an assignment using "Your work" button in the respective assignment page. Students have two options to submit their work :
* Giving a hyperlink.
* Uploading a file.
As soon as the user submits any one of these, we needed to show hyperlink or file with the time-stamp on our visualization graph. Also, we needed to provide the submitted '''hyperlink or a link''' to the file on the visualization so that it will be easy for the user to navigate from a single page.

'''Issue-2:'''
Due dates:

There are different due dates for every assignment like Round-1 submission, Round-2 submission, Round-1 review and Round-2 review Due Dates. These are different from submission time stamps because a submission's timestamp depends upon the time at which the user had submitted the work whereas a due date is the deadline date fixed by an instructor. Visualizing them by adding them into the timeline, helps the student to track all due dates in a single graph.

'''Issue-3:'''
Peer Review other's work:

A student needs to review work of different teams during the course of the assignment. As of now in order to view the review, Expertiza requires the user to go to the "other's work" page in the assignment. Instead of this, we want this data to be viewed in our visualization graph. This issue includes a timestamp, link to view review, review round number to be shown in the graph.
'''Note:''' this review is the peer review '''given by this particular student''' to different teams as part of the assignment, '''not the reviews the student received.'''

'''Issue-4:'''
Author's feedback on other's Review
:
A student can give feedback for the review he/she received for a specific assignment. So this information also needs to be included in the graph. We need to show the timestamp and hyperlink to the feedback. It must be noted that the feedback here is not the feedback he got for review given by him/her but the feedback he/she gave for the reviews the had received.

==Program Design==

To visualize the timeline graphically we decided to use the vis.js JavaScript library. This library provides various interactive visualization charts (like graphs, networks, timelines, etc) to visualize data in real time. We chose to work on this library because when compared to other popular visualization libraries, vis.js provides the best possible representation of a timeline, one that meets the requirements of our project. To know more about how to make a timeline using vis.js, click [http://visjs.org/docs/timeline/ here].

The timeline contains a single horizontal axis that is divided into time intervals equally separated from each other.

Let us consider an example where a student makes several submissions to an assignment. The student uploads a hyperlink "https ://www.facebook.com" and an HTML file as submissions. The assignment has several deadlines or due dates. There are due dates for Round 1 and Round 2 submissions for this particular assignment. There are also review deadlines for each of the rounds for the assignment. The student can give a peer review to other students' work on the assignment. The student is able to give feedback to the peer reviews that he received. We have used color coding to differentiate between different kinds of things visualized on the timeline. We have used '''Orange''' color for a round's submission and review deadline and '''Green''' color for all hyperlink submissions, file submissions and '''Cream''' color for feedback, peer review, team review and self review submissions.

So in summary, the following things have to be present on the timeline that are visualized as rectangular boxes on the timeline:
* The submission hyperlink box with the hyperlink
* The file upload box with a link to the uploaded file
* The Round 1 peer review deadline
* The Round 1 submission due date
* The Round 2 peer review deadline
* The Round 2 submission due date
* The Peer Review that the student gave to other students
* The feedback that the student gave to received reviews
* A self-feedback that the student gave to himself
* A team review that the student can give to his teammates
* Additionally, all the rectangular boxed have timestamps that display when the submission was made or the due date of that task

Apart from this, various buttons were also added to better interact with the timeline. These include:
* ''Zoom in'' - To zoom in by magnifying the viewing scale of the timeline
* ''Zoom out'' - To zoom out of the timeline
* ''Move Left'' - To move along the timeline's x-axis. The user can move forward by pressing the button
* ''Move Right'' - To move backward along the x-axis
* '''Recenter''' - Pressing this button helps the user to '''reset the zoom scale''' and the position of the x-axis in a way that all the items appear '''sorted in a single window.'''
A single '''vertical red line''' set to the '''current time''' on the x-axis indicates the current time at which the timeline is being viewed.

The '''percentage of zoom, percentage of window to move right/left''' can be modified as per convenience as mentioned in <script> of zoom buttons mentioned in later section of wiki.

We have added '''hyperlinks to enable quick access to all of the student submitted content'''. For example, the rectangular box that shows the submitted file has a hyperlink that links to the contents of the file. Similarly, the reviews submitted by the student is linked by the hyperlink in the Peer review rectangular box on the timeline.

Finally, after obtaining all the data from the database and the inclusion of all the stated information above to visualizing it in the timeline, the result would be something like this:

[[File:S1.png]]

When the user selects a particular rectangular box on the timeline by clicking on it, then the line that connects the box to the timeline's x-axis becomes thicker and the color of the box also changes to '''White''' to indicate to the user the current box that is selected. If the user selects the file submission rectangular box (sample.html file), then the timeline would look like this:

[[File:S2.png]]

==Files Involved==

*app/controllers/submission_records_controller.rb
*app/models/submission_record.rb
*app/views/student_task/list.html.erb

==Database Tables Involved==

*submission_records
*response_map
*due_dates
*participants
*assignments
*users
*teams
*teams_users
*signed_up_teams
*sign_up_topics

==Implementation==

The code to embed the timeline into the webpage is as follows

< div id="visualization">
< div class="menu">
<input id="zoomIn" value="Zoom in" type="button">
<input id="zoomOut" value="Zoom out" type="button">
<input id="moveLeft" value="Move left" type="button">
<input id="moveRight" value="Move right" type="button">
<input id="Recenter" value="Recenter" type="button">
< /div>
< /div>
<script type="text/javascript">
// DOM element where the Timeline will be attached
var container = document.getElementById('visualization');
// Create a DataSet (allows two way data-binding)
var items = new vis.DataSet(visualization_JSON);
// Configuration for the Timeline
var options = {
zoomMin: 1000 * 60 * 60 * 24, // one day in milliseconds
zoomMax: 1000 * 60 * 60 * 24 * 31 * 12 // about three months in milliseconds
};
// Create a Timeline
var timeline = new vis.Timeline(container, items, options);
</script>

There are several buttons that were inserted into the timeline to allow the user to interact with the timeline. The code for that is

<script>
var visualization_window=timeline.range.getRange();
function move (percentage) {
var range = timeline.getWindow();
var interval = range.end - range.start;
timeline.setWindow({
start: range.start.valueOf() - interval * percentage,
end: range.end.valueOf() - interval * percentage
});
}
// attach events to the navigation buttons
// zoom percentage in zoomin/zoomout can be adjusted below by passing paramenter. Similar is the case for move left/right along the x-axis
document.getElementById('zoomIn').onclick = function () { timeline.zoomIn( 0.2); };
document.getElementById('zoomOut').onclick = function () { timeline.zoomOut( 0.2); };
document.getElementById('moveLeft').onclick = function () { move( 0.2); };
document.getElementById('moveRight').onclick = function () { move(-0.2); };
document.getElementById('Recenter').onclick = function () {
var visualization_window_start = new Date(visualization_window.start);
var visualization_window_end = new Date(visualization_window.end);
timeline.setWindow(visualization_window_start, visualization_window_end, { animation: true });
};
</script>

The functionality of each button is explained in the Program Design section above.

It is necessary to obtain data from the Expertiza database to JSON format so that it can be processed by the timeline for visualization. After collecting the data from the database, processing it and storing it into a ruby variable, we use the JSON.parse() function to convert that information into JSON objects. To maintain continuity, the process of obtaining data and preprocessing it is explained later in the wiki. The code to convert the variable contents into a JSON object is as follows:

<script>
// converting @visualization_data array to javascript compatible JSON object
var visualization_JSON = JSON.parse('<%=raw @visualization_data.to_json%>');
var href_JSON = JSON.parse('<%= @href_arr.to_json.html_safe%>')
var temp;
//temp is temporary variable used to generate hyperlinks from content
for(i=0; i<visualization_JSON.length; i++) {
temp=visualization_JSON[i].content.split("<split>");
if(href_JSON[i]=='')
visualization_JSON[i].content = temp[0]+"<br>"+temp.slice(1);
else
visualization_JSON[i].content = "<a href="+href_JSON[i]+" target='_blank'><b><u>"+temp[0]+"</u></b></a><br>"+temp.slice(1);
}
</script>

The following code is used to display due dates in the timeline. The types of due dates included are Round submission or Round review due date.

<% @href_arr= Array.new %>
<! -- @href_arr is used to store all the hyperlinks for each visualized object -->
<% @duedates = DueDate.where("parent_id = #{@assignment.id}")
@visualization_data = @duedates.map do |due|
@href_arr.push("");
if due.deadline_type_id.eql? 1
{ :id => due.id, :start=> due.due_at, :className => "submissionDue", :content => "Round "+(due.round.to_s)+"<split>Submission due by "+'<br>'+due.due_at.strftime("%m/%d/%Y at %I:%M %p") }
else
{ :id => due.id, :start=> due.due_at, :className => "reviewDue", :content => "Round "+(due.round.to_s)+"<split>Review due by "+'<br>'+due.due_at.strftime("%m/%d/%Y at %I:%M %p") }
end
end
%>

Then we need to add submission hyperlinks and files in the timeline. The code for that is

< ! -- display only if submissions are made-->
<% unless @team.nil?
@submissions = SubmissionRecord.find_by_sql"select * from submission_records where assignment_id=#{@assignment.id} and team_id=#{@team.id}
and content NOT IN (select content from submission_records where assignment_id=#{@assignment.id} and team_id=#{@team.id} and UPPER(operation) Like 'REMOVE%')"
@visualization_data += @submissions.map do |submission|
#display_directory_tree(participant, files, true).html_safe
if (submission.operation).eql?('Submit File')
file = submission.content
ret=""
if File.exist?(file) && File.directory?(file)
ret += link_to File.basename(file), :controller => 'submitted_content', :action => 'edit', :id => participant.id, "current_folder[name]" => file
else
ret += "\n "
ret += link_to File.basename(file), :controller => 'submitted_content',
:action => 'download',
:id => @participant.id,
:download => File.basename(file),
"current_folder[name]" => File.dirname(file)
end
@href_arr.push(ret.split('"')[1])
{ :id => submission.id, :start=> submission.created_at, :className=> "fileUpload", :content => (submission.content).split('/')[-1]+'<split>'+
submission.created_at.strftime("%m/%d/%Y at %I:%M %p") }
else
@href_arr.push(submission.content)
{ :id => submission.id, :start=> submission.created_at, :className=> "hyperlinkUpload" ,:content => submission.content+'<split>'+
submission.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
end
end %>

'''Explanation:''' The following code fetches submission records of a student for a particular assignment from the '''submission_records''' table. Then after checking if the submission exists and when the type is a file, a hyperlink to the file's location path is obtained and pushed into the JSON. The same is done for a submission with the type Hyperlink.

Then to get the peer reviews, self-reviews, feedback and team reviews, the following code is used.

<! -- Reviews not yet started -->
<% unless @review_mappings.nil?
@review_mappings.each do |review_mapping_iterator|
@response_values = Response.where(:map_id => review_mapping_iterator.id)
@visualization_data += @response_values.map do |response_value_iterator|
if review_mapping_iterator.type=="ReviewResponseMap"
review_mapping = ResponseMap.find(review_mapping_iterator.reviewed_object_id)
participant = AssignmentTeam.get_first_member(review_mapping_iterator.reviewee_id)
topic_id = SignedUpTeam.topic_id(participant.parent_id, participant.user_id)
if !topic_id.nil?
if SignUpTopic.find(topic_id).topic_identifier != ''
@topic_name=SignUpTopic.find(topic_id).topic_identifier+": "+SignUpTopic.find(topic_id).topic_name
else
@topic_name=SignUpTopic.find(topic_id).topic_name
end
end
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "review", :content => "Peer Review -
Round "+response_value_iterator.round.to_s+"<split> Review for: #{@topic_name}"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
elsif review_mapping_iterator.type=="SelfReviewResponseMap"
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "selfReview", :content => "Self Feedback -
Round "+response_value_iterator.round.to_s+"<split>Self Feedback"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
elsif review_mapping_iterator.type=="TeammateReviewResponseMap"
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
reviewee = ResponseMap.where(:reviewer_id => "#{review_mapping_iterator.reviewer_id}", :id =>"#{review_mapping_iterator.id}").pluck(:reviewee_id)
puts reviewee.to_s+" "+review_mapping_iterator.reviewer_id.to_s+" "+review_mapping_iterator.id.to_s
user_id = Participant.where(:id=> "#{reviewee[0]}").pluck(:user_id)
reviewee_name = User.where(:id=>"#{user_id[0]}").pluck(:name)
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "teamReview", :content => "Team Review -
Round "+response_value_iterator.round.to_s+"<split>Team review for #{reviewee_name[0]}"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
else
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "feedback", :content => "Feedback -
Round "+response_value_iterator.round.to_s+"<split>Feedback"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
end
end
end
end %>

==Test Plan==
===Automated test using RSpec===

Resources -
* [http://rspec.info/ RSpec]
* [https://github.com/thoughtbot/factory_girl Factory Girl ruby gem]

A new file with the name <b>timestamps_for_students_submissions_spec.rb</b> file will be created in <b>spec/features</b> folder with various test cases to test the changes.

===Testing from UI===
Steps for testing the project using the User Interface.
*As an instructor, go to manage assignments.
*Click on submissions view of an assignment.
*You will see all the items submissions.
*Click on "Show Submission Records".
*You will see a history of the submission along with the timestamps for each submission.
*You can also see when the submission was added, updated and removed.

*[ Interactive Video Demo link]

==Edge Cases==

'''Timeline behavior when the student opens the view page of a newly created assignment'''

* When the user has not made any submissions, reviews or feedbacks to reviews to the assignment, the timeline must only display the due dates of the assignment.

'''Timeline behavior when student has not joined any team and makes submissions'''

* When a student who is not part of any team makes a submission, he is assigned a team_ID by Expertiza and all submissions made by him are linked to that ID. So only those submissions will be displayed on the timeline.

'''Timeline behavior when the student joins a team, what happens to the submissions he made before joining the team'''

* When he joins a team and he receives a new team_ID, any submissions made hereafter will be made under the new team_ID and all previous submissions made by the student will not be shown on the timeline(this is how Expertiza assigns team_IDs and submissions- the same is reflected in 'your work' section of a user's profile). Only the user submissions made after he joins the team is shown on the timeline.

'''Timeline behavior when there is no name for a given assignment'''

* Sometimes assignments are not named. In the peer review submission rectangular box displayed on the timeline after the student submits a peer review, instead of showing the label "Review for [assignment name]", the label says "Review".

'''Timeline behavior when a submitted hyperlink is removed'''

* When a submitted hyperlink is removed, the submission must not be displayed on the timeline any more.

'''A submission must be made before a peer review can be given'''

* This condition holds even if the deadline has already passed.

==Future modifications==

We can also include icons that are embedded into the rectangles. They act as visual aids to help the user quickly recognize the category of the box. We propose a design that would look something like this:

[[File:S3.png]]

===References===

#[https://github.com/expertiza/expertiza Expertiza on GitHub]
#[http://expertiza.ncsu.edu/ The live Expertiza website]
#[http://wiki.expertiza.ncsu.edu/index.php/Expertiza_documentation Expertiza project documentation wiki]
#[https://relishapp.com/rspec Rspec Documentation]
#[http://visjs.org/docs/timeline/ Vis.js Documentation for Timeline]
#[ Github pull request submitted]
#[https://github.com/ShyamKatta/expertiza/tree/E1797/ Github - expertiza forked repository]

CSC/ECE 517 Fall 2017/E1797 Timestamps for students submission

2017-12-02T07:40:01Z

Skatta3: /* Testing from UI */

==Introduction==

Expertiza is an open source project created using Ruby on Rails. Students can upload and submit their assignments and related work online for grading purposes.

===Existing System===

Currently, there exist various types of submissions that a student can make for an assignment for which timestamps are generated.
*When a student submits links or uploads files as submissions to an assignment in Expertiza, a timestamp is created for the date and time at which each of the submissions was done.
*The student may also be able to give reviews to other works for a particular assignment. These reviews when submitted also have an associated timestamp.
*There also exist timestamps for deadlines that have passed and that are upcoming for an assignment submission or a review to be done.
*For the reviews that a student receives for his work, the student can give feedback to each of the reviews. The submitted feedbacks also get timestamps.

Currenty there exists no functionality to view all these submissions and their timestamps in a single, aggregated way.

===Proposed System===

Our project was to solve this issue by creating a Visualization that helps the student view all the timestamps for his submissions. The goal is to create a Timeline that shows all the timestamps of submitted records and links to the submitted content wherever necessary. The default state of the timeline is a point on the x-axis set to the current date and time. The timeline is interactive and allows the user to zoom in and out to change the viewing scale of the timeline. The user can also scroll in the timeline to move the timeline forward or backward from the current time. After all of this is done, the user can reset the timeline to change his view to the default state.

With this, the student is able to view his entire submission history for an assignment in a convenient way.

==Problem Statement==

In Expertiza, it is possible for the instructor to view the submission records of a particular student. However, there is no way for students to check the history of their submission records. In this project, we are required to keep track of students’ activities and visualize them on their end by using a timeline chart.

<b>What needs to be visualized on the timeline:</b>

* Hyperlink submission record with timestamps
* File upload record with timestamps
* Due dates
*Visualization of Peer review of others works, which includes:
** A Review hyperlink that redirects to the review by clicking on it
** The Round number (To be displayed only if the assignment has multiple rounds)
** Timestamps
*Visualization of Author feedback on others review, which includes:
** A Feedback hyperlink that redirects to the feedback by clicking on it
** Timestamps

===Understanding Problem Statement===

The problem statement states the following issues that had to be resolved.

'''Issue-1:'''
Submission records with timestamps:

A student can submit their work for an assignment using "Your work" button in the respective assignment page. Students have two options to submit their work :
* Giving a hyperlink.
* Uploading a file.
As soon as the user submits any one of these, we needed to show hyperlink or file with the time-stamp on our visualization graph. Also, we needed to provide the submitted '''hyperlink or a link''' to the file on the visualization so that it will be easy for the user to navigate from a single page.

'''Issue-2:'''
Due dates:

There are different due dates for every assignment like Round-1 submission, Round-2 submission, Round-1 review and Round-2 review Due Dates. These are different from submission time stamps because a submission's timestamp depends upon the time at which the user had submitted the work whereas a due date is the deadline date fixed by an instructor. Visualizing them by adding them into the timeline, helps the student to track all due dates in a single graph.

'''Issue-3:'''
Peer Review other's work:

A student needs to review work of different teams during the course of the assignment. As of now in order to view the review, Expertiza requires the user to go to the "other's work" page in the assignment. Instead of this, we want this data to be viewed in our visualization graph. This issue includes a timestamp, link to view review, review round number to be shown in the graph.
'''Note:''' this review is the peer review '''given by this particular student''' to different teams as part of the assignment, '''not the reviews the student received.'''

'''Issue-4:'''
Author's feedback on other's Review
:
A student can give feedback for the review he/she received for a specific assignment. So this information also needs to be included in the graph. We need to show the timestamp and hyperlink to the feedback. It must be noted that the feedback here is not the feedback he got for review given by him/her but the feedback he/she gave for the reviews the had received.

==Program Design==

To visualize the timeline graphically we decided to use the vis.js JavaScript library. This library provides various interactive visualization charts (like graphs, networks, timelines, etc) to visualize data in real time. We chose to work on this library because when compared to other popular visualization libraries, vis.js provides the best possible representation of a timeline, one that meets the requirements of our project. To know more about how to make a timeline using vis.js, click [http://visjs.org/docs/timeline/ here].

The timeline contains a single horizontal axis that is divided into time intervals equally separated from each other.

Let us consider an example where a student makes several submissions to an assignment. The student uploads a hyperlink "https ://www.facebook.com" and an HTML file as submissions. The assignment has several deadlines or due dates. There are due dates for Round 1 and Round 2 submissions for this particular assignment. There are also review deadlines for each of the rounds for the assignment. The student can give a peer review to other students' work on the assignment. The student is able to give feedback to the peer reviews that he received. We have used color coding to differentiate between different kinds of things visualized on the timeline. We have used '''Orange''' color for a round's submission and review deadline and '''Green''' color for all hyperlink submissions, file submissions and '''Cream''' color for feedback, peer review, team review and self review submissions.

So in summary, the following things have to be present on the timeline that are visualized as rectangular boxes on the timeline:
* The submission hyperlink box with the hyperlink
* The file upload box with a link to the uploaded file
* The Round 1 peer review deadline
* The Round 1 submission due date
* The Round 2 peer review deadline
* The Round 2 submission due date
* The Peer Review that the student gave to other students
* The feedback that the student gave to received reviews
* A self-feedback that the student gave to himself
* A team review that the student can give to his teammates
* Additionally, all the rectangular boxed have timestamps that display when the submission was made or the due date of that task

Apart from this, various buttons were also added to better interact with the timeline. These include:
* ''Zoom in'' - To zoom in by magnifying the viewing scale of the timeline
* ''Zoom out'' - To zoom out of the timeline
* ''Move Left'' - To move along the timeline's x-axis. The user can move forward by pressing the button
* ''Move Right'' - To move backward along the x-axis
* '''Recenter''' - Pressing this button helps the user to '''reset the zoom scale''' and the position of the x-axis in a way that all the items appear '''sorted in a single window.'''
A single '''vertical red line''' set to the '''current time''' on the x-axis indicates the current time at which the timeline is being viewed.

The '''percentage of zoom, percentage of window to move right/left''' can be modified as per convenience as mentioned in <script> of zoom buttons mentioned in later section of wiki.

We have added '''hyperlinks to enable quick access to all of the student submitted content'''. For example, the rectangular box that shows the submitted file has a hyperlink that links to the contents of the file. Similarly, the reviews submitted by the student is linked by the hyperlink in the Peer review rectangular box on the timeline.

Finally, after obtaining all the data from the database and the inclusion of all the stated information above to visualizing it in the timeline, the result would be something like this:

[[File:S1.png]]

When the user selects a particular rectangular box on the timeline by clicking on it, then the line that connects the box to the timeline's x-axis becomes thicker and the color of the box also changes to '''White''' to indicate to the user the current box that is selected. If the user selects the file submission rectangular box (sample.html file), then the timeline would look like this:

[[File:S2.png]]

==Files Involved==

*app/controllers/submission_records_controller.rb
*app/models/submission_record.rb
*app/views/student_task/list.html.erb

==Database Tables Involved==

*submission_records
*response_map
*due_dates
*participants
*assignments
*users
*teams
*teams_users
*signed_up_teams
*sign_up_topics

==Implementation==

The code to embed the timeline into the webpage is as follows

< div id="visualization">
< div class="menu">
<input id="zoomIn" value="Zoom in" type="button">
<input id="zoomOut" value="Zoom out" type="button">
<input id="moveLeft" value="Move left" type="button">
<input id="moveRight" value="Move right" type="button">
<input id="Recenter" value="Recenter" type="button">
< /div>
< /div>
<script type="text/javascript">
// DOM element where the Timeline will be attached
var container = document.getElementById('visualization');
// Create a DataSet (allows two way data-binding)
var items = new vis.DataSet(visualization_JSON);
// Configuration for the Timeline
var options = {
zoomMin: 1000 * 60 * 60 * 24, // one day in milliseconds
zoomMax: 1000 * 60 * 60 * 24 * 31 * 12 // about three months in milliseconds
};
// Create a Timeline
var timeline = new vis.Timeline(container, items, options);
</script>

There are several buttons that were inserted into the timeline to allow the user to interact with the timeline. The code for that is

<script>
var visualization_window=timeline.range.getRange();
function move (percentage) {
var range = timeline.getWindow();
var interval = range.end - range.start;
timeline.setWindow({
start: range.start.valueOf() - interval * percentage,
end: range.end.valueOf() - interval * percentage
});
}
// attach events to the navigation buttons
// zoom percentage in zoomin/zoomout can be adjusted below by passing paramenter. Similar is the case for move left/right along the x-axis
document.getElementById('zoomIn').onclick = function () { timeline.zoomIn( 0.2); };
document.getElementById('zoomOut').onclick = function () { timeline.zoomOut( 0.2); };
document.getElementById('moveLeft').onclick = function () { move( 0.2); };
document.getElementById('moveRight').onclick = function () { move(-0.2); };
document.getElementById('Recenter').onclick = function () {
var visualization_window_start = new Date(visualization_window.start);
var visualization_window_end = new Date(visualization_window.end);
timeline.setWindow(visualization_window_start, visualization_window_end, { animation: true });
};
</script>

The functionality of each button is explained in the Program Design section above.

It is necessary to obtain data from the Expertiza database to JSON format so that it can be processed by the timeline for visualization. After collecting the data from the database, processing it and storing it into a ruby variable, we use the JSON.parse() function to convert that information into JSON objects. To maintain continuity, the process of obtaining data and preprocessing it is explained later in the wiki. The code to convert the variable contents into a JSON object is as follows:

<script>
// converting @visualization_data array to javascript compatible JSON object
var visualization_JSON = JSON.parse('<%=raw @visualization_data.to_json%>');
var href_JSON = JSON.parse('<%= @href_arr.to_json.html_safe%>')
var temp;
//temp is temporary variable used to generate hyperlinks from content
for(i=0; i<visualization_JSON.length; i++) {
temp=visualization_JSON[i].content.split("<split>");
if(href_JSON[i]=='')
visualization_JSON[i].content = temp[0]+"<br>"+temp.slice(1);
else
visualization_JSON[i].content = "<a href="+href_JSON[i]+" target='_blank'><b><u>"+temp[0]+"</u></b></a><br>"+temp.slice(1);
}
</script>

The following code is used to display due dates in the timeline. The types of due dates included are Round submission or Round review due date.

<% @href_arr= Array.new %>
<! -- @href_arr is used to store all the hyperlinks for each visualized object -->
<% @duedates = DueDate.where("parent_id = #{@assignment.id}")
@visualization_data = @duedates.map do |due|
@href_arr.push("");
if due.deadline_type_id.eql? 1
{ :id => due.id, :start=> due.due_at, :className => "submissionDue", :content => "Round "+(due.round.to_s)+"<split>Submission due by "+'<br>'+due.due_at.strftime("%m/%d/%Y at %I:%M %p") }
else
{ :id => due.id, :start=> due.due_at, :className => "reviewDue", :content => "Round "+(due.round.to_s)+"<split>Review due by "+'<br>'+due.due_at.strftime("%m/%d/%Y at %I:%M %p") }
end
end
%>

Then we need to add submission hyperlinks and files in the timeline. The code for that is

< ! -- display only if submissions are made-->
<% unless @team.nil?
@submissions = SubmissionRecord.find_by_sql"select * from submission_records where assignment_id=#{@assignment.id} and team_id=#{@team.id}
and content NOT IN (select content from submission_records where assignment_id=#{@assignment.id} and team_id=#{@team.id} and UPPER(operation) Like 'REMOVE%')"
@visualization_data += @submissions.map do |submission|
#display_directory_tree(participant, files, true).html_safe
if (submission.operation).eql?('Submit File')
file = submission.content
ret=""
if File.exist?(file) && File.directory?(file)
ret += link_to File.basename(file), :controller => 'submitted_content', :action => 'edit', :id => participant.id, "current_folder[name]" => file
else
ret += "\n "
ret += link_to File.basename(file), :controller => 'submitted_content',
:action => 'download',
:id => @participant.id,
:download => File.basename(file),
"current_folder[name]" => File.dirname(file)
end
@href_arr.push(ret.split('"')[1])
{ :id => submission.id, :start=> submission.created_at, :className=> "fileUpload", :content => (submission.content).split('/')[-1]+'<split>'+
submission.created_at.strftime("%m/%d/%Y at %I:%M %p") }
else
@href_arr.push(submission.content)
{ :id => submission.id, :start=> submission.created_at, :className=> "hyperlinkUpload" ,:content => submission.content+'<split>'+
submission.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
end
end %>

'''Explanation:''' The following code fetches submission records of a student for a particular assignment from the '''submission_records''' table. Then after checking if the submission exists and when the type is a file, a hyperlink to the file's location path is obtained and pushed into the JSON. The same is done for a submission with the type Hyperlink.

Then to get the peer reviews, self-reviews, feedback and team reviews, the following code is used.

<! -- Reviews not yet started -->
<% unless @review_mappings.nil?
@review_mappings.each do |review_mapping_iterator|
@response_values = Response.where(:map_id => review_mapping_iterator.id)
@visualization_data += @response_values.map do |response_value_iterator|
if review_mapping_iterator.type=="ReviewResponseMap"
review_mapping = ResponseMap.find(review_mapping_iterator.reviewed_object_id)
participant = AssignmentTeam.get_first_member(review_mapping_iterator.reviewee_id)
topic_id = SignedUpTeam.topic_id(participant.parent_id, participant.user_id)
if !topic_id.nil?
if SignUpTopic.find(topic_id).topic_identifier != ''
@topic_name=SignUpTopic.find(topic_id).topic_identifier+": "+SignUpTopic.find(topic_id).topic_name
else
@topic_name=SignUpTopic.find(topic_id).topic_name
end
end
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "review", :content => "Peer Review -
Round "+response_value_iterator.round.to_s+"<split> Review for: #{@topic_name}"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
elsif review_mapping_iterator.type=="SelfReviewResponseMap"
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "selfReview", :content => "Self Feedback -
Round "+response_value_iterator.round.to_s+"<split>Self Feedback"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
elsif review_mapping_iterator.type=="TeammateReviewResponseMap"
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
reviewee = ResponseMap.where(:reviewer_id => "#{review_mapping_iterator.reviewer_id}", :id =>"#{review_mapping_iterator.id}").pluck(:reviewee_id)
puts reviewee.to_s+" "+review_mapping_iterator.reviewer_id.to_s+" "+review_mapping_iterator.id.to_s
user_id = Participant.where(:id=> "#{reviewee[0]}").pluck(:user_id)
reviewee_name = User.where(:id=>"#{user_id[0]}").pluck(:name)
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "teamReview", :content => "Team Review -
Round "+response_value_iterator.round.to_s+"<split>Team review for #{reviewee_name[0]}"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
else
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "feedback", :content => "Feedback -
Round "+response_value_iterator.round.to_s+"<split>Feedback"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
end
end
end
end %>

==Test Plan==
===Automated test using RSpec===

Resources -
* [http://rspec.info/ RSpec]
* [https://github.com/thoughtbot/factory_girl Factory Girl ruby gem]

A new file with the name <b>timestamps_for_students_submissions_spec.rb</b> file will be created in <b>spec/features</b> folder with various test cases to test the changes.

===Testing from UI===
Steps for testing the project using the User Interface.
*As an instructor, go to manage assignments.
*Click on submissions view of an assignment.
*You will see all the items submissions.
*Click on "Show Submission Records".
*You will see a history of the submission along with the timestamps for each submission.
*You can also see when the submission was added, updated and removed.
*Visit below video link to see an interactive demo.

*[ Interactive Video Demo link]

==Edge Cases==

'''Timeline behavior when the student opens the view page of a newly created assignment'''

* When the user has not made any submissions, reviews or feedbacks to reviews to the assignment, the timeline must only display the due dates of the assignment.

'''Timeline behavior when student has not joined any team and makes submissions'''

* When a student who is not part of any team makes a submission, he is assigned a team_ID by Expertiza and all submissions made by him are linked to that ID. So only those submissions will be displayed on the timeline.

'''Timeline behavior when the student joins a team, what happens to the submissions he made before joining the team'''

* When he joins a team and he receives a new team_ID, any submissions made hereafter will be made under the new team_ID and all previous submissions made by the student will not be shown on the timeline(this is how Expertiza assigns team_IDs and submissions- the same is reflected in 'your work' section of a user's profile). Only the user submissions made after he joins the team is shown on the timeline.

'''Timeline behavior when there is no name for a given assignment'''

* Sometimes assignments are not named. In the peer review submission rectangular box displayed on the timeline after the student submits a peer review, instead of showing the label "Review for [assignment name]", the label says "Review".

'''Timeline behavior when a submitted hyperlink is removed'''

* When a submitted hyperlink is removed, the submission must not be displayed on the timeline any more.

'''A submission must be made before a peer review can be given'''

* This condition holds even if the deadline has already passed.

==Future modifications==

We can also include icons that are embedded into the rectangles. They act as visual aids to help the user quickly recognize the category of the box. We propose a design that would look something like this:

[[File:S3.png]]

===References===

#[https://github.com/expertiza/expertiza Expertiza on GitHub]
#[http://expertiza.ncsu.edu/ The live Expertiza website]
#[http://wiki.expertiza.ncsu.edu/index.php/Expertiza_documentation Expertiza project documentation wiki]
#[https://relishapp.com/rspec Rspec Documentation]
#[http://visjs.org/docs/timeline/ Vis.js Documentation for Timeline]
#[ Github pull request submitted]
#[https://github.com/ShyamKatta/expertiza/tree/E1797/ Github - expertiza forked repository]

CSC/ECE 517 Fall 2017/E1797 Timestamps for students submission

2017-12-02T07:39:36Z

Skatta3: /* Test Plan */

==Introduction==

Expertiza is an open source project created using Ruby on Rails. Students can upload and submit their assignments and related work online for grading purposes.

===Existing System===

Currently, there exist various types of submissions that a student can make for an assignment for which timestamps are generated.
*When a student submits links or uploads files as submissions to an assignment in Expertiza, a timestamp is created for the date and time at which each of the submissions was done.
*The student may also be able to give reviews to other works for a particular assignment. These reviews when submitted also have an associated timestamp.
*There also exist timestamps for deadlines that have passed and that are upcoming for an assignment submission or a review to be done.
*For the reviews that a student receives for his work, the student can give feedback to each of the reviews. The submitted feedbacks also get timestamps.

Currenty there exists no functionality to view all these submissions and their timestamps in a single, aggregated way.

===Proposed System===

Our project was to solve this issue by creating a Visualization that helps the student view all the timestamps for his submissions. The goal is to create a Timeline that shows all the timestamps of submitted records and links to the submitted content wherever necessary. The default state of the timeline is a point on the x-axis set to the current date and time. The timeline is interactive and allows the user to zoom in and out to change the viewing scale of the timeline. The user can also scroll in the timeline to move the timeline forward or backward from the current time. After all of this is done, the user can reset the timeline to change his view to the default state.

With this, the student is able to view his entire submission history for an assignment in a convenient way.

==Problem Statement==

In Expertiza, it is possible for the instructor to view the submission records of a particular student. However, there is no way for students to check the history of their submission records. In this project, we are required to keep track of students’ activities and visualize them on their end by using a timeline chart.

<b>What needs to be visualized on the timeline:</b>

* Hyperlink submission record with timestamps
* File upload record with timestamps
* Due dates
*Visualization of Peer review of others works, which includes:
** A Review hyperlink that redirects to the review by clicking on it
** The Round number (To be displayed only if the assignment has multiple rounds)
** Timestamps
*Visualization of Author feedback on others review, which includes:
** A Feedback hyperlink that redirects to the feedback by clicking on it
** Timestamps

===Understanding Problem Statement===

The problem statement states the following issues that had to be resolved.

'''Issue-1:'''
Submission records with timestamps:

A student can submit their work for an assignment using "Your work" button in the respective assignment page. Students have two options to submit their work :
* Giving a hyperlink.
* Uploading a file.
As soon as the user submits any one of these, we needed to show hyperlink or file with the time-stamp on our visualization graph. Also, we needed to provide the submitted '''hyperlink or a link''' to the file on the visualization so that it will be easy for the user to navigate from a single page.

'''Issue-2:'''
Due dates:

There are different due dates for every assignment like Round-1 submission, Round-2 submission, Round-1 review and Round-2 review Due Dates. These are different from submission time stamps because a submission's timestamp depends upon the time at which the user had submitted the work whereas a due date is the deadline date fixed by an instructor. Visualizing them by adding them into the timeline, helps the student to track all due dates in a single graph.

'''Issue-3:'''
Peer Review other's work:

A student needs to review work of different teams during the course of the assignment. As of now in order to view the review, Expertiza requires the user to go to the "other's work" page in the assignment. Instead of this, we want this data to be viewed in our visualization graph. This issue includes a timestamp, link to view review, review round number to be shown in the graph.
'''Note:''' this review is the peer review '''given by this particular student''' to different teams as part of the assignment, '''not the reviews the student received.'''

'''Issue-4:'''
Author's feedback on other's Review
:
A student can give feedback for the review he/she received for a specific assignment. So this information also needs to be included in the graph. We need to show the timestamp and hyperlink to the feedback. It must be noted that the feedback here is not the feedback he got for review given by him/her but the feedback he/she gave for the reviews the had received.

==Program Design==

To visualize the timeline graphically we decided to use the vis.js JavaScript library. This library provides various interactive visualization charts (like graphs, networks, timelines, etc) to visualize data in real time. We chose to work on this library because when compared to other popular visualization libraries, vis.js provides the best possible representation of a timeline, one that meets the requirements of our project. To know more about how to make a timeline using vis.js, click [http://visjs.org/docs/timeline/ here].

The timeline contains a single horizontal axis that is divided into time intervals equally separated from each other.

Let us consider an example where a student makes several submissions to an assignment. The student uploads a hyperlink "https ://www.facebook.com" and an HTML file as submissions. The assignment has several deadlines or due dates. There are due dates for Round 1 and Round 2 submissions for this particular assignment. There are also review deadlines for each of the rounds for the assignment. The student can give a peer review to other students' work on the assignment. The student is able to give feedback to the peer reviews that he received. We have used color coding to differentiate between different kinds of things visualized on the timeline. We have used '''Orange''' color for a round's submission and review deadline and '''Green''' color for all hyperlink submissions, file submissions and '''Cream''' color for feedback, peer review, team review and self review submissions.

So in summary, the following things have to be present on the timeline that are visualized as rectangular boxes on the timeline:
* The submission hyperlink box with the hyperlink
* The file upload box with a link to the uploaded file
* The Round 1 peer review deadline
* The Round 1 submission due date
* The Round 2 peer review deadline
* The Round 2 submission due date
* The Peer Review that the student gave to other students
* The feedback that the student gave to received reviews
* A self-feedback that the student gave to himself
* A team review that the student can give to his teammates
* Additionally, all the rectangular boxed have timestamps that display when the submission was made or the due date of that task

Apart from this, various buttons were also added to better interact with the timeline. These include:
* ''Zoom in'' - To zoom in by magnifying the viewing scale of the timeline
* ''Zoom out'' - To zoom out of the timeline
* ''Move Left'' - To move along the timeline's x-axis. The user can move forward by pressing the button
* ''Move Right'' - To move backward along the x-axis
* '''Recenter''' - Pressing this button helps the user to '''reset the zoom scale''' and the position of the x-axis in a way that all the items appear '''sorted in a single window.'''
A single '''vertical red line''' set to the '''current time''' on the x-axis indicates the current time at which the timeline is being viewed.

The '''percentage of zoom, percentage of window to move right/left''' can be modified as per convenience as mentioned in <script> of zoom buttons mentioned in later section of wiki.

We have added '''hyperlinks to enable quick access to all of the student submitted content'''. For example, the rectangular box that shows the submitted file has a hyperlink that links to the contents of the file. Similarly, the reviews submitted by the student is linked by the hyperlink in the Peer review rectangular box on the timeline.

Finally, after obtaining all the data from the database and the inclusion of all the stated information above to visualizing it in the timeline, the result would be something like this:

[[File:S1.png]]

When the user selects a particular rectangular box on the timeline by clicking on it, then the line that connects the box to the timeline's x-axis becomes thicker and the color of the box also changes to '''White''' to indicate to the user the current box that is selected. If the user selects the file submission rectangular box (sample.html file), then the timeline would look like this:

[[File:S2.png]]

==Files Involved==

*app/controllers/submission_records_controller.rb
*app/models/submission_record.rb
*app/views/student_task/list.html.erb

==Database Tables Involved==

*submission_records
*response_map
*due_dates
*participants
*assignments
*users
*teams
*teams_users
*signed_up_teams
*sign_up_topics

==Implementation==

The code to embed the timeline into the webpage is as follows

< div id="visualization">
< div class="menu">
<input id="zoomIn" value="Zoom in" type="button">
<input id="zoomOut" value="Zoom out" type="button">
<input id="moveLeft" value="Move left" type="button">
<input id="moveRight" value="Move right" type="button">
<input id="Recenter" value="Recenter" type="button">
< /div>
< /div>
<script type="text/javascript">
// DOM element where the Timeline will be attached
var container = document.getElementById('visualization');
// Create a DataSet (allows two way data-binding)
var items = new vis.DataSet(visualization_JSON);
// Configuration for the Timeline
var options = {
zoomMin: 1000 * 60 * 60 * 24, // one day in milliseconds
zoomMax: 1000 * 60 * 60 * 24 * 31 * 12 // about three months in milliseconds
};
// Create a Timeline
var timeline = new vis.Timeline(container, items, options);
</script>

There are several buttons that were inserted into the timeline to allow the user to interact with the timeline. The code for that is

<script>
var visualization_window=timeline.range.getRange();
function move (percentage) {
var range = timeline.getWindow();
var interval = range.end - range.start;
timeline.setWindow({
start: range.start.valueOf() - interval * percentage,
end: range.end.valueOf() - interval * percentage
});
}
// attach events to the navigation buttons
// zoom percentage in zoomin/zoomout can be adjusted below by passing paramenter. Similar is the case for move left/right along the x-axis
document.getElementById('zoomIn').onclick = function () { timeline.zoomIn( 0.2); };
document.getElementById('zoomOut').onclick = function () { timeline.zoomOut( 0.2); };
document.getElementById('moveLeft').onclick = function () { move( 0.2); };
document.getElementById('moveRight').onclick = function () { move(-0.2); };
document.getElementById('Recenter').onclick = function () {
var visualization_window_start = new Date(visualization_window.start);
var visualization_window_end = new Date(visualization_window.end);
timeline.setWindow(visualization_window_start, visualization_window_end, { animation: true });
};
</script>

The functionality of each button is explained in the Program Design section above.

It is necessary to obtain data from the Expertiza database to JSON format so that it can be processed by the timeline for visualization. After collecting the data from the database, processing it and storing it into a ruby variable, we use the JSON.parse() function to convert that information into JSON objects. To maintain continuity, the process of obtaining data and preprocessing it is explained later in the wiki. The code to convert the variable contents into a JSON object is as follows:

<script>
// converting @visualization_data array to javascript compatible JSON object
var visualization_JSON = JSON.parse('<%=raw @visualization_data.to_json%>');
var href_JSON = JSON.parse('<%= @href_arr.to_json.html_safe%>')
var temp;
//temp is temporary variable used to generate hyperlinks from content
for(i=0; i<visualization_JSON.length; i++) {
temp=visualization_JSON[i].content.split("<split>");
if(href_JSON[i]=='')
visualization_JSON[i].content = temp[0]+"<br>"+temp.slice(1);
else
visualization_JSON[i].content = "<a href="+href_JSON[i]+" target='_blank'><b><u>"+temp[0]+"</u></b></a><br>"+temp.slice(1);
}
</script>

The following code is used to display due dates in the timeline. The types of due dates included are Round submission or Round review due date.

<% @href_arr= Array.new %>
<! -- @href_arr is used to store all the hyperlinks for each visualized object -->
<% @duedates = DueDate.where("parent_id = #{@assignment.id}")
@visualization_data = @duedates.map do |due|
@href_arr.push("");
if due.deadline_type_id.eql? 1
{ :id => due.id, :start=> due.due_at, :className => "submissionDue", :content => "Round "+(due.round.to_s)+"<split>Submission due by "+'<br>'+due.due_at.strftime("%m/%d/%Y at %I:%M %p") }
else
{ :id => due.id, :start=> due.due_at, :className => "reviewDue", :content => "Round "+(due.round.to_s)+"<split>Review due by "+'<br>'+due.due_at.strftime("%m/%d/%Y at %I:%M %p") }
end
end
%>

Then we need to add submission hyperlinks and files in the timeline. The code for that is

< ! -- display only if submissions are made-->
<% unless @team.nil?
@submissions = SubmissionRecord.find_by_sql"select * from submission_records where assignment_id=#{@assignment.id} and team_id=#{@team.id}
and content NOT IN (select content from submission_records where assignment_id=#{@assignment.id} and team_id=#{@team.id} and UPPER(operation) Like 'REMOVE%')"
@visualization_data += @submissions.map do |submission|
#display_directory_tree(participant, files, true).html_safe
if (submission.operation).eql?('Submit File')
file = submission.content
ret=""
if File.exist?(file) && File.directory?(file)
ret += link_to File.basename(file), :controller => 'submitted_content', :action => 'edit', :id => participant.id, "current_folder[name]" => file
else
ret += "\n "
ret += link_to File.basename(file), :controller => 'submitted_content',
:action => 'download',
:id => @participant.id,
:download => File.basename(file),
"current_folder[name]" => File.dirname(file)
end
@href_arr.push(ret.split('"')[1])
{ :id => submission.id, :start=> submission.created_at, :className=> "fileUpload", :content => (submission.content).split('/')[-1]+'<split>'+
submission.created_at.strftime("%m/%d/%Y at %I:%M %p") }
else
@href_arr.push(submission.content)
{ :id => submission.id, :start=> submission.created_at, :className=> "hyperlinkUpload" ,:content => submission.content+'<split>'+
submission.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
end
end %>

'''Explanation:''' The following code fetches submission records of a student for a particular assignment from the '''submission_records''' table. Then after checking if the submission exists and when the type is a file, a hyperlink to the file's location path is obtained and pushed into the JSON. The same is done for a submission with the type Hyperlink.

Then to get the peer reviews, self-reviews, feedback and team reviews, the following code is used.

<! -- Reviews not yet started -->
<% unless @review_mappings.nil?
@review_mappings.each do |review_mapping_iterator|
@response_values = Response.where(:map_id => review_mapping_iterator.id)
@visualization_data += @response_values.map do |response_value_iterator|
if review_mapping_iterator.type=="ReviewResponseMap"
review_mapping = ResponseMap.find(review_mapping_iterator.reviewed_object_id)
participant = AssignmentTeam.get_first_member(review_mapping_iterator.reviewee_id)
topic_id = SignedUpTeam.topic_id(participant.parent_id, participant.user_id)
if !topic_id.nil?
if SignUpTopic.find(topic_id).topic_identifier != ''
@topic_name=SignUpTopic.find(topic_id).topic_identifier+": "+SignUpTopic.find(topic_id).topic_name
else
@topic_name=SignUpTopic.find(topic_id).topic_name
end
end
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "review", :content => "Peer Review -
Round "+response_value_iterator.round.to_s+"<split> Review for: #{@topic_name}"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
elsif review_mapping_iterator.type=="SelfReviewResponseMap"
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "selfReview", :content => "Self Feedback -
Round "+response_value_iterator.round.to_s+"<split>Self Feedback"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
elsif review_mapping_iterator.type=="TeammateReviewResponseMap"
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
reviewee = ResponseMap.where(:reviewer_id => "#{review_mapping_iterator.reviewer_id}", :id =>"#{review_mapping_iterator.id}").pluck(:reviewee_id)
puts reviewee.to_s+" "+review_mapping_iterator.reviewer_id.to_s+" "+review_mapping_iterator.id.to_s
user_id = Participant.where(:id=> "#{reviewee[0]}").pluck(:user_id)
reviewee_name = User.where(:id=>"#{user_id[0]}").pluck(:name)
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "teamReview", :content => "Team Review -
Round "+response_value_iterator.round.to_s+"<split>Team review for #{reviewee_name[0]}"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
else
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "feedback", :content => "Feedback -
Round "+response_value_iterator.round.to_s+"<split>Feedback"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
end
end
end
end %>

==Test Plan==
===Automated test using RSpec===

Resources -
* [http://rspec.info/ RSpec]
* [https://github.com/thoughtbot/factory_girl Factory Girl ruby gem]

A new file with the name <b>timestamps_for_students_submissions_spec.rb</b> file will be created in <b>spec/features</b> folder with various test cases to test the changes.

===Testing from UI===
Steps for testing the project using the User Interface.
*As an instructor, go to manage assignments.
*Click on submissions view of an assignment.
*You will see all the items submissions.
*Click on "Show Submission Records".
*You will see a history of the submission along with the timestamps for each submission.
*You can also see when the submission was added, updated and removed.
*Visit below video link to see an interactive demo.

*[https://youtu.be/cGXu1YPG0Ec Interactive Video Demo link]

==Edge Cases==

'''Timeline behavior when the student opens the view page of a newly created assignment'''

* When the user has not made any submissions, reviews or feedbacks to reviews to the assignment, the timeline must only display the due dates of the assignment.

'''Timeline behavior when student has not joined any team and makes submissions'''

* When a student who is not part of any team makes a submission, he is assigned a team_ID by Expertiza and all submissions made by him are linked to that ID. So only those submissions will be displayed on the timeline.

'''Timeline behavior when the student joins a team, what happens to the submissions he made before joining the team'''

* When he joins a team and he receives a new team_ID, any submissions made hereafter will be made under the new team_ID and all previous submissions made by the student will not be shown on the timeline(this is how Expertiza assigns team_IDs and submissions- the same is reflected in 'your work' section of a user's profile). Only the user submissions made after he joins the team is shown on the timeline.

'''Timeline behavior when there is no name for a given assignment'''

* Sometimes assignments are not named. In the peer review submission rectangular box displayed on the timeline after the student submits a peer review, instead of showing the label "Review for [assignment name]", the label says "Review".

'''Timeline behavior when a submitted hyperlink is removed'''

* When a submitted hyperlink is removed, the submission must not be displayed on the timeline any more.

'''A submission must be made before a peer review can be given'''

* This condition holds even if the deadline has already passed.

==Future modifications==

We can also include icons that are embedded into the rectangles. They act as visual aids to help the user quickly recognize the category of the box. We propose a design that would look something like this:

[[File:S3.png]]

===References===

#[https://github.com/expertiza/expertiza Expertiza on GitHub]
#[http://expertiza.ncsu.edu/ The live Expertiza website]
#[http://wiki.expertiza.ncsu.edu/index.php/Expertiza_documentation Expertiza project documentation wiki]
#[https://relishapp.com/rspec Rspec Documentation]
#[http://visjs.org/docs/timeline/ Vis.js Documentation for Timeline]
#[ Github pull request submitted]
#[https://github.com/ShyamKatta/expertiza/tree/E1797/ Github - expertiza forked repository]

CSC/ECE 517 Fall 2016/E1675. Timestamp for student file & hyperlink submissions

2017-12-02T07:36:11Z

Skatta3: /* Testing from UI */

==E1675.Timestamp for student file & hyperlink submissions ==

This page provides a description of the Expertiza based OSS project.

__TOC__

===About Expertiza===

[http://expertiza.ncsu.edu/ Expertiza] is an open source project based on [http://rubyonrails.org/ Ruby on Rails] framework. Expertiza is a software to create reusable learning objects through peer review. It also supports team projects, and the submission of almost any document type, including URLs and wiki pages.

===Problem Statement===
In Expertiza we accept hyperlinks as well as files submitted by students, which makes it harder to track the updates for student's submission. In this project we were required to keep track of timestamp records for student's submissions and updates of artifacts (submitted files or hyperlinks). Authors can delete or re-submit files and hyperlinks, those activities were also recorded.

===Task Goals ===
What needs to be done:

* Record the timestamps for file/hyperlink submissions.
* Add code to keep all those time stamps tracked and updated.
* Change the view of 0.0.0.0:3000/assignments/list_submissions view (by clicking the “View submissions icon”) to display the submission histories of each team.
* Make the available submissions clickable (some submitted items might be deleted, so they are displayed but not clickable).
* After this project, the ResubmissionTime model (and related code) will not be used anymore. Please remove related code and db table.
* Create tests to make sure the test coverage increase.

===Program Design ===

We created a set of new controller, model and views to implement the functionality of timestamps.
We added a model named SubmissionRecord that contains the following attributes.

* Hyperlink - hyperlink that could be uploaded - String.
* Upload File - file that could be uploaded - File.
* Team id - id that links the model to the team that created it. - Integer.
* Created at - timestamp for time of creation.
* Operation - Description of operation performed. - create, update and delete.
* User - User who change the status of current table Get this from current user id.
* Content - String, the file name or the hyperlink.

===Implementation===

=====Action_allowed=====
* In present code, the application has the control to decide which kind of user could have access to the specific page. In order to let the instructor see the submission_record, we need to add action_allowed method in submission_record_controller. Below is reference code :
<pre>
def action_allowed?
if params[:action] == 'edit' || params[:action] == 'update'
assignment = Assignment.find(params[:id])
return true if ['Super-Administrator', 'Administrator'].include? current_role_name
return true if assignment.instructor_id == current_user.id
return true if TaMapping.exists?(ta_id: current_user.id, course_id: assignment.course_id) &&
(TaMapping.where(course_id: assignment.course_id).include?TaMapping.where(ta_id: current_user.id, course_id: assignment.course_id).first)
return true if assignment.course_id && Course.find(assignment.course_id).instructor_id == current_user.id
return false
else
['Super-Administrator',
'Administrator',
'Instructor',
'Teaching Assistant'].include? current_role_name
end
end
</pre>

=====Submit Hyperlink & File =====
* After we created the table, there isn't a specific page for us to fill in the submission_record database table. So we implemented this feature using the previous functionality already existent in the submitted_content controller/model. This page had information about the hyperlinks and files which were previously submitted by the student. We add functionality to fill in submission_record table once a hyperlink or file is submitted. Below is a code snippet for reference :

<pre>
def submit_hyperlink

@participant = AssignmentParticipant.find(params[:id])
return unless current_user_id?(@participant.user_id)

team = @participant.team
team_hyperlinks = team.hyperlinks
if team_hyperlinks.include?(params['submission'])
flash[:error] = "You or your teammate(s) have already submitted the same hyperlink."
else
begin
team.submit_hyperlink(params['submission'])
@participant.update_resubmit_times

#create a submission record
@submission_record = SubmissionRecord.new(team_id: team, user: @participant.name, assignment_id: params[:id], operation: "Submit Hyperlink")
@submission_record.save
rescue
flash[:error] = "The URL or URI is not valid. Reason: #{$ERROR_INFO}"
end
undo_link("The link has been successfully submitted.")
end
redirect_to action: 'edit', id: @participant.id
end
</pre>

<pre>
#create a submission record
assignment = Assignment.find(participant.parent_id)
team = participant.team
@submission_record = SubmissionRecord.new(team_id: team.id, user: participant.name , assignment_id: assignment.id, operation: "Submit File")
@submission_record.save
</pre>

===== Remove Hyperlink or File=====
* When students want to delete their hyperlinks or files which they had submitted before, the data in submission_record table should not disappear. We wanted to save all the operations made by the team. As a result, we added specific functionality in the existing delete function to reserve the data in submission_record table.
<pre>
#create a submission record
@submission_record = SubmissionRecord.new(team_id: team.id, user:@participant.name , assignment_id: assignment.id, operation: "Remove Hyperlink")
@submission_record.save
</pre>

<pre>
def delete_selected_files
#create a submission record
assignment = Assignment.find(participant.parent_id)
team = participant.team
@submission_record = SubmissionRecord.new(team_id: team.id, user: participant.name , assignment_id: assignment.id, operation: "Remove File")
@submission_record.save
filename = params[:directories][params[:chk_files]] + "/" + params[:filenames][params[:chk_files]]
FileUtils.rm_r(filename)
end
</pre>

=====View Submission Record =====
* In order to make the student submitted hyperlinks clickable, we check if the operation performed is 'Submit Hyperlink' in database.
<pre>
<% if record.operation == "Submit Hyperlink" %>
<td><a href="<%= record.content %>" target="_blank"><%= record.content %></a><br/></td>

<% else %>
<td><%= record.content %></td>
<% end %>
<td><%= record.created_at %></td>
</pre>

====Parameter Passing====
We utilize the params hash from the previous view called List_submissions. We then use a WHERE SQL query that matches the team_id from the submissions record table.
<pre>

<%= link_to "Show Submission Records", submission_records_path(team_id: team.id) %>(View:list_submission)
@submission_records = SubmissionRecord.where(team_id: params[:team_id])(submission_record_controller)

</pre>

===Automated Testing using RSPEC===
The testing for this project has been done using several advanced ruby features. Below are a few of the features which were used :
* [http://rspec.info/ RSpec]
* [https://github.com/thoughtbot/factory_girl Factory Girl ruby gem]
* [https://github.com/thoughtbot/factory_girl FFaker ruby gem]

Using these techniques, the project was thoroughly tested.

Models were tested for their validation. We had to verify each of the parameters which we received in our model. This was done by developing a Ruby Factory which had sample data. This sample data was fed into the models. Using RSpec, we then checked for validity for each of the parameters received in the models. This validity check is important since this information is prerequisite for having a perfectly working controller and view.

Below is a code snippet which describes the testing methodology.
<pre>
require 'rails_helper'
describe SubmissionRecord do
it 'is invalid without a team id' do
expect(build(:submission_record, team_id: nil)).to_not be_valid
end
it 'is invalid without an operation' do
expect(build(:submission_record, operation: nil)).to_not be_valid
end
it 'is invalid without a user' do
expect(build(:submission_record, user: nil)).to_not be_valid
end
it 'is invalid without an assignment id' do
expect(build(:submission_record, assignment_id: nil)).to_not be_valid
end
it 'is invalid without an operation' do
expect(build(:submission_record, operation: nil)).to_not be_valid
end
end
</pre>

Controllers were tested to make sure the rendering, redirection and views are proper.

===Testing from UI===
Testing the project using the User Interface.
*Login as an instructor, go to manage assignments-> select an assignment-> add students to assignment->update duedates.
*Impersonate as one of student -> navigate to the particular assignment edited in above step.
*You shall see a timeline with duedates
*Click on your work, submit hyperlink/files, same will be displayed in that particular assignment home page(navigate to previous page)
*Review teammates work/ give a peer review/ submit a self review/ submit feedback to review received, same will be reflected in respective assignment home page along with a hyperlink to the particular review given.
*The submission along with the timestamps for each submission along with hyperlinks to each of student's work is displayed in timeline.
*One can '''test''' for the '''Edge cases''' mentioned above too.
*Video link for an interactive demo.

*[https://youtu.be/cGXu1YPG0Ec Interactive Video Demo]

===References===

#[https://github.com/expertiza/expertiza Expertiza on GitHub]
#[https://github.com/rsndates/expertiza GitHub Project Repository Fork]
#[http://expertiza.ncsu.edu/ The live Expertiza website]
#[http://wiki.expertiza.ncsu.edu/index.php/Expertiza_documentation Expertiza project documentation wiki]
#[https://relishapp.com/rspec Rspec Documentation]
#Clean Code: A Handbook of Agile Software Craftsmanship. Author: Robert C Martin

CSC/ECE 517 Fall 2017/E1797 Timestamps for students submission

2017-12-02T07:23:56Z

Skatta3: /* References */

==Introduction==

Expertiza is an open source project created using Ruby on Rails. Students can upload and submit their assignments and related work online for grading purposes.

===Existing System===

Currently, there exist various types of submissions that a student can make for an assignment for which timestamps are generated.
*When a student submits links or uploads files as submissions to an assignment in Expertiza, a timestamp is created for the date and time at which each of the submissions was done.
*The student may also be able to give reviews to other works for a particular assignment. These reviews when submitted also have an associated timestamp.
*There also exist timestamps for deadlines that have passed and that are upcoming for an assignment submission or a review to be done.
*For the reviews that a student receives for his work, the student can give feedback to each of the reviews. The submitted feedbacks also get timestamps.

Currenty there exists no functionality to view all these submissions and their timestamps in a single, aggregated way.

===Proposed System===

Our project was to solve this issue by creating a Visualization that helps the student view all the timestamps for his submissions. The goal is to create a Timeline that shows all the timestamps of submitted records and links to the submitted content wherever necessary. The default state of the timeline is a point on the x-axis set to the current date and time. The timeline is interactive and allows the user to zoom in and out to change the viewing scale of the timeline. The user can also scroll in the timeline to move the timeline forward or backward from the current time. After all of this is done, the user can reset the timeline to change his view to the default state.

With this, the student is able to view his entire submission history for an assignment in a convenient way.

==Problem Statement==

In Expertiza, it is possible for the instructor to view the submission records of a particular student. However, there is no way for students to check the history of their submission records. In this project, we are required to keep track of students’ activities and visualize them on their end by using a timeline chart.

<b>What needs to be visualized on the timeline:</b>

* Hyperlink submission record with timestamps
* File upload record with timestamps
* Due dates
*Visualization of Peer review of others works, which includes:
** A Review hyperlink that redirects to the review by clicking on it
** The Round number (To be displayed only if the assignment has multiple rounds)
** Timestamps
*Visualization of Author feedback on others review, which includes:
** A Feedback hyperlink that redirects to the feedback by clicking on it
** Timestamps

===Understanding Problem Statement===

The problem statement states the following issues that had to be resolved.

'''Issue-1:'''
Submission records with timestamps:

A student can submit their work for an assignment using "Your work" button in the respective assignment page. Students have two options to submit their work :
* Giving a hyperlink.
* Uploading a file.
As soon as the user submits any one of these, we needed to show hyperlink or file with the time-stamp on our visualization graph. Also, we needed to provide the submitted '''hyperlink or a link''' to the file on the visualization so that it will be easy for the user to navigate from a single page.

'''Issue-2:'''
Due dates:

There are different due dates for every assignment like Round-1 submission, Round-2 submission, Round-1 review and Round-2 review Due Dates. These are different from submission time stamps because a submission's timestamp depends upon the time at which the user had submitted the work whereas a due date is the deadline date fixed by an instructor. Visualizing them by adding them into the timeline, helps the student to track all due dates in a single graph.

'''Issue-3:'''
Peer Review other's work:

A student needs to review work of different teams during the course of the assignment. As of now in order to view the review, Expertiza requires the user to go to the "other's work" page in the assignment. Instead of this, we want this data to be viewed in our visualization graph. This issue includes a timestamp, link to view review, review round number to be shown in the graph.
'''Note:''' this review is the peer review '''given by this particular student''' to different teams as part of the assignment, '''not the reviews the student received.'''

'''Issue-4:'''
Author's feedback on other's Review
:
A student can give feedback for the review he/she received for a specific assignment. So this information also needs to be included in the graph. We need to show the timestamp and hyperlink to the feedback. It must be noted that the feedback here is not the feedback he got for review given by him/her but the feedback he/she gave for the reviews the had received.

==Program Design==

To visualize the timeline graphically we decided to use the vis.js JavaScript library. This library provides various interactive visualization charts (like graphs, networks, timelines, etc) to visualize data in real time. We chose to work on this library because when compared to other popular visualization libraries, vis.js provides the best possible representation of a timeline, one that meets the requirements of our project. To know more about how to make a timeline using vis.js, click [http://visjs.org/docs/timeline/ here].

The timeline contains a single horizontal axis that is divided into time intervals equally separated from each other.

Let us consider an example where a student makes several submissions to an assignment. The student uploads a hyperlink "https ://www.facebook.com" and an HTML file as submissions. The assignment has several deadlines or due dates. There are due dates for Round 1 and Round 2 submissions for this particular assignment. There are also review deadlines for each of the rounds for the assignment. The student can give a peer review to other students' work on the assignment. The student is able to give feedback to the peer reviews that he received. We have used color coding to differentiate between different kinds of things visualized on the timeline. We have used '''Orange''' color for a round's submission and review deadline and '''Green''' color for all hyperlink submissions, file submissions and '''Cream''' color for feedback, peer review, team review and self review submissions.

So in summary, the following things have to be present on the timeline that are visualized as rectangular boxes on the timeline:
* The submission hyperlink box with the hyperlink
* The file upload box with a link to the uploaded file
* The Round 1 peer review deadline
* The Round 1 submission due date
* The Round 2 peer review deadline
* The Round 2 submission due date
* The Peer Review that the student gave to other students
* The feedback that the student gave to received reviews
* A self-feedback that the student gave to himself
* A team review that the student can give to his teammates
* Additionally, all the rectangular boxed have timestamps that display when the submission was made or the due date of that task

Apart from this, various buttons were also added to better interact with the timeline. These include:
* ''Zoom in'' - To zoom in by magnifying the viewing scale of the timeline
* ''Zoom out'' - To zoom out of the timeline
* ''Move Left'' - To move along the timeline's x-axis. The user can move forward by pressing the button
* ''Move Right'' - To move backward along the x-axis
* '''Recenter''' - Pressing this button helps the user to '''reset the zoom scale''' and the position of the x-axis in a way that all the items appear '''sorted in a single window.'''
A single '''vertical red line''' set to the '''current time''' on the x-axis indicates the current time at which the timeline is being viewed.

The '''percentage of zoom, percentage of window to move right/left''' can be modified as per convenience as mentioned in <script> of zoom buttons mentioned in later section of wiki.

We have added '''hyperlinks to enable quick access to all of the student submitted content'''. For example, the rectangular box that shows the submitted file has a hyperlink that links to the contents of the file. Similarly, the reviews submitted by the student is linked by the hyperlink in the Peer review rectangular box on the timeline.

Finally, after obtaining all the data from the database and the inclusion of all the stated information above to visualizing it in the timeline, the result would be something like this:

[[File:S1.png]]

When the user selects a particular rectangular box on the timeline by clicking on it, then the line that connects the box to the timeline's x-axis becomes thicker and the color of the box also changes to '''White''' to indicate to the user the current box that is selected. If the user selects the file submission rectangular box (sample.html file), then the timeline would look like this:

[[File:S2.png]]

==Files Involved==

*app/controllers/submission_records_controller.rb
*app/models/submission_record.rb
*app/views/student_task/list.html.erb

==Database Tables Involved==

*submission_records
*response_map
*due_dates
*participants
*assignments
*users
*teams
*teams_users
*signed_up_teams
*sign_up_topics

==Implementation==

The code to embed the timeline into the webpage is as follows

< div id="visualization">
< div class="menu">
<input id="zoomIn" value="Zoom in" type="button">
<input id="zoomOut" value="Zoom out" type="button">
<input id="moveLeft" value="Move left" type="button">
<input id="moveRight" value="Move right" type="button">
<input id="Recenter" value="Recenter" type="button">
< /div>
< /div>
<script type="text/javascript">
// DOM element where the Timeline will be attached
var container = document.getElementById('visualization');
// Create a DataSet (allows two way data-binding)
var items = new vis.DataSet(visualization_JSON);
// Configuration for the Timeline
var options = {
zoomMin: 1000 * 60 * 60 * 24, // one day in milliseconds
zoomMax: 1000 * 60 * 60 * 24 * 31 * 12 // about three months in milliseconds
};
// Create a Timeline
var timeline = new vis.Timeline(container, items, options);
</script>

There are several buttons that were inserted into the timeline to allow the user to interact with the timeline. The code for that is

<script>
var visualization_window=timeline.range.getRange();
function move (percentage) {
var range = timeline.getWindow();
var interval = range.end - range.start;
timeline.setWindow({
start: range.start.valueOf() - interval * percentage,
end: range.end.valueOf() - interval * percentage
});
}
// attach events to the navigation buttons
// zoom percentage in zoomin/zoomout can be adjusted below by passing paramenter. Similar is the case for move left/right along the x-axis
document.getElementById('zoomIn').onclick = function () { timeline.zoomIn( 0.2); };
document.getElementById('zoomOut').onclick = function () { timeline.zoomOut( 0.2); };
document.getElementById('moveLeft').onclick = function () { move( 0.2); };
document.getElementById('moveRight').onclick = function () { move(-0.2); };
document.getElementById('Recenter').onclick = function () {
var visualization_window_start = new Date(visualization_window.start);
var visualization_window_end = new Date(visualization_window.end);
timeline.setWindow(visualization_window_start, visualization_window_end, { animation: true });
};
</script>

The functionality of each button is explained in the Program Design section above.

It is necessary to obtain data from the Expertiza database to JSON format so that it can be processed by the timeline for visualization. After collecting the data from the database, processing it and storing it into a ruby variable, we use the JSON.parse() function to convert that information into JSON objects. To maintain continuity, the process of obtaining data and preprocessing it is explained later in the wiki. The code to convert the variable contents into a JSON object is as follows:

<script>
// converting @visualization_data array to javascript compatible JSON object
var visualization_JSON = JSON.parse('<%=raw @visualization_data.to_json%>');
var href_JSON = JSON.parse('<%= @href_arr.to_json.html_safe%>')
var temp;
//temp is temporary variable used to generate hyperlinks from content
for(i=0; i<visualization_JSON.length; i++) {
temp=visualization_JSON[i].content.split("<split>");
if(href_JSON[i]=='')
visualization_JSON[i].content = temp[0]+"<br>"+temp.slice(1);
else
visualization_JSON[i].content = "<a href="+href_JSON[i]+" target='_blank'><b><u>"+temp[0]+"</u></b></a><br>"+temp.slice(1);
}
</script>

The following code is used to display due dates in the timeline. The types of due dates included are Round submission or Round review due date.

<% @href_arr= Array.new %>
<! -- @href_arr is used to store all the hyperlinks for each visualized object -->
<% @duedates = DueDate.where("parent_id = #{@assignment.id}")
@visualization_data = @duedates.map do |due|
@href_arr.push("");
if due.deadline_type_id.eql? 1
{ :id => due.id, :start=> due.due_at, :className => "submissionDue", :content => "Round "+(due.round.to_s)+"<split>Submission due by "+'<br>'+due.due_at.strftime("%m/%d/%Y at %I:%M %p") }
else
{ :id => due.id, :start=> due.due_at, :className => "reviewDue", :content => "Round "+(due.round.to_s)+"<split>Review due by "+'<br>'+due.due_at.strftime("%m/%d/%Y at %I:%M %p") }
end
end
%>

Then we need to add submission hyperlinks and files in the timeline. The code for that is

< ! -- display only if submissions are made-->
<% unless @team.nil?
@submissions = SubmissionRecord.find_by_sql"select * from submission_records where assignment_id=#{@assignment.id} and team_id=#{@team.id}
and content NOT IN (select content from submission_records where assignment_id=#{@assignment.id} and team_id=#{@team.id} and UPPER(operation) Like 'REMOVE%')"
@visualization_data += @submissions.map do |submission|
#display_directory_tree(participant, files, true).html_safe
if (submission.operation).eql?('Submit File')
file = submission.content
ret=""
if File.exist?(file) && File.directory?(file)
ret += link_to File.basename(file), :controller => 'submitted_content', :action => 'edit', :id => participant.id, "current_folder[name]" => file
else
ret += "\n "
ret += link_to File.basename(file), :controller => 'submitted_content',
:action => 'download',
:id => @participant.id,
:download => File.basename(file),
"current_folder[name]" => File.dirname(file)
end
@href_arr.push(ret.split('"')[1])
{ :id => submission.id, :start=> submission.created_at, :className=> "fileUpload", :content => (submission.content).split('/')[-1]+'<split>'+
submission.created_at.strftime("%m/%d/%Y at %I:%M %p") }
else
@href_arr.push(submission.content)
{ :id => submission.id, :start=> submission.created_at, :className=> "hyperlinkUpload" ,:content => submission.content+'<split>'+
submission.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
end
end %>

'''Explanation:''' The following code fetches submission records of a student for a particular assignment from the '''submission_records''' table. Then after checking if the submission exists and when the type is a file, a hyperlink to the file's location path is obtained and pushed into the JSON. The same is done for a submission with the type Hyperlink.

Then to get the peer reviews, self-reviews, feedback and team reviews, the following code is used.

<! -- Reviews not yet started -->
<% unless @review_mappings.nil?
@review_mappings.each do |review_mapping_iterator|
@response_values = Response.where(:map_id => review_mapping_iterator.id)
@visualization_data += @response_values.map do |response_value_iterator|
if review_mapping_iterator.type=="ReviewResponseMap"
review_mapping = ResponseMap.find(review_mapping_iterator.reviewed_object_id)
participant = AssignmentTeam.get_first_member(review_mapping_iterator.reviewee_id)
topic_id = SignedUpTeam.topic_id(participant.parent_id, participant.user_id)
if !topic_id.nil?
if SignUpTopic.find(topic_id).topic_identifier != ''
@topic_name=SignUpTopic.find(topic_id).topic_identifier+": "+SignUpTopic.find(topic_id).topic_name
else
@topic_name=SignUpTopic.find(topic_id).topic_name
end
end
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "review", :content => "Peer Review -
Round "+response_value_iterator.round.to_s+"<split> Review for: #{@topic_name}"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
elsif review_mapping_iterator.type=="SelfReviewResponseMap"
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "selfReview", :content => "Self Feedback -
Round "+response_value_iterator.round.to_s+"<split>Self Feedback"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
elsif review_mapping_iterator.type=="TeammateReviewResponseMap"
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
reviewee = ResponseMap.where(:reviewer_id => "#{review_mapping_iterator.reviewer_id}", :id =>"#{review_mapping_iterator.id}").pluck(:reviewee_id)
puts reviewee.to_s+" "+review_mapping_iterator.reviewer_id.to_s+" "+review_mapping_iterator.id.to_s
user_id = Participant.where(:id=> "#{reviewee[0]}").pluck(:user_id)
reviewee_name = User.where(:id=>"#{user_id[0]}").pluck(:name)
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "teamReview", :content => "Team Review -
Round "+response_value_iterator.round.to_s+"<split>Team review for #{reviewee_name[0]}"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
else
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "feedback", :content => "Feedback -
Round "+response_value_iterator.round.to_s+"<split>Feedback"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
end
end
end
end %>

==Test Plan==

Feature tests will be written to thoroughly test our modifications. A new file with the name <b>timestamps_for_students_submissions_spec.rb</b> file will be created in <b>spec/features</b> folder with various test cases to test the changes.

==Edge Cases==

'''Timeline behavior when the student opens the view page of a newly created assignment'''

* When the user has not made any submissions, reviews or feedbacks to reviews to the assignment, the timeline must only display the due dates of the assignment.

'''Timeline behavior when student has not joined any team and makes submissions'''

* When a student who is not part of any team makes a submission, he is assigned a team_ID by Expertiza and all submissions made by him are linked to that ID. So only those submissions will be displayed on the timeline.

'''Timeline behavior when the student joins a team, what happens to the submissions he made before joining the team'''

* When he joins a team and he receives a new team_ID, any submissions made hereafter will be made under the new team_ID and all previous submissions made by the student will not be shown on the timeline(this is how Expertiza assigns team_IDs and submissions- the same is reflected in 'your work' section of a user's profile). Only the user submissions made after he joins the team is shown on the timeline.

'''Timeline behavior when there is no name for a given assignment'''

* Sometimes assignments are not named. In the peer review submission rectangular box displayed on the timeline after the student submits a peer review, instead of showing the label "Review for [assignment name]", the label says "Review".

'''Timeline behavior when a submitted hyperlink is removed'''

* When a submitted hyperlink is removed, the submission must not be displayed on the timeline any more.

'''A submission must be made before a peer review can be given'''

* This condition holds even if the deadline has already passed.

==Future modifications==

We can also include icons that are embedded into the rectangles. They act as visual aids to help the user quickly recognize the category of the box. We propose a design that would look something like this:

[[File:S3.png]]

===References===

#[https://github.com/expertiza/expertiza Expertiza on GitHub]
#[http://expertiza.ncsu.edu/ The live Expertiza website]
#[http://wiki.expertiza.ncsu.edu/index.php/Expertiza_documentation Expertiza project documentation wiki]
#[https://relishapp.com/rspec Rspec Documentation]
#[http://visjs.org/docs/timeline/ Vis.js Documentation for Timeline]
#[ Github pull request submitted]
#[https://github.com/ShyamKatta/expertiza/tree/E1797/ Github - expertiza forked repository]

CSC/ECE 517 Fall 2017/E1797 Timestamps for students submission

2017-12-02T07:16:28Z

Skatta3: /* References */

==Introduction==

Expertiza is an open source project created using Ruby on Rails. Students can upload and submit their assignments and related work online for grading purposes.

===Existing System===

Currently, there exist various types of submissions that a student can make for an assignment for which timestamps are generated.
*When a student submits links or uploads files as submissions to an assignment in Expertiza, a timestamp is created for the date and time at which each of the submissions was done.
*The student may also be able to give reviews to other works for a particular assignment. These reviews when submitted also have an associated timestamp.
*There also exist timestamps for deadlines that have passed and that are upcoming for an assignment submission or a review to be done.
*For the reviews that a student receives for his work, the student can give feedback to each of the reviews. The submitted feedbacks also get timestamps.

Currenty there exists no functionality to view all these submissions and their timestamps in a single, aggregated way.

===Proposed System===

Our project was to solve this issue by creating a Visualization that helps the student view all the timestamps for his submissions. The goal is to create a Timeline that shows all the timestamps of submitted records and links to the submitted content wherever necessary. The default state of the timeline is a point on the x-axis set to the current date and time. The timeline is interactive and allows the user to zoom in and out to change the viewing scale of the timeline. The user can also scroll in the timeline to move the timeline forward or backward from the current time. After all of this is done, the user can reset the timeline to change his view to the default state.

With this, the student is able to view his entire submission history for an assignment in a convenient way.

==Problem Statement==

In Expertiza, it is possible for the instructor to view the submission records of a particular student. However, there is no way for students to check the history of their submission records. In this project, we are required to keep track of students’ activities and visualize them on their end by using a timeline chart.

<b>What needs to be visualized on the timeline:</b>

* Hyperlink submission record with timestamps
* File upload record with timestamps
* Due dates
*Visualization of Peer review of others works, which includes:
** A Review hyperlink that redirects to the review by clicking on it
** The Round number (To be displayed only if the assignment has multiple rounds)
** Timestamps
*Visualization of Author feedback on others review, which includes:
** A Feedback hyperlink that redirects to the feedback by clicking on it
** Timestamps

===Understanding Problem Statement===

The problem statement states the following issues that had to be resolved.

'''Issue-1:'''
Submission records with timestamps:

A student can submit their work for an assignment using "Your work" button in the respective assignment page. Students have two options to submit their work :
* Giving a hyperlink.
* Uploading a file.
As soon as the user submits any one of these, we needed to show hyperlink or file with the time-stamp on our visualization graph. Also, we needed to provide the submitted '''hyperlink or a link''' to the file on the visualization so that it will be easy for the user to navigate from a single page.

'''Issue-2:'''
Due dates:

There are different due dates for every assignment like Round-1 submission, Round-2 submission, Round-1 review and Round-2 review Due Dates. These are different from submission time stamps because a submission's timestamp depends upon the time at which the user had submitted the work whereas a due date is the deadline date fixed by an instructor. Visualizing them by adding them into the timeline, helps the student to track all due dates in a single graph.

'''Issue-3:'''
Peer Review other's work:

A student needs to review work of different teams during the course of the assignment. As of now in order to view the review, Expertiza requires the user to go to the "other's work" page in the assignment. Instead of this, we want this data to be viewed in our visualization graph. This issue includes a timestamp, link to view review, review round number to be shown in the graph.
'''Note:''' this review is the peer review '''given by this particular student''' to different teams as part of the assignment, '''not the reviews the student received.'''

'''Issue-4:'''
Author's feedback on other's Review
:
A student can give feedback for the review he/she received for a specific assignment. So this information also needs to be included in the graph. We need to show the timestamp and hyperlink to the feedback. It must be noted that the feedback here is not the feedback he got for review given by him/her but the feedback he/she gave for the reviews the had received.

==Program Design==

To visualize the timeline graphically we decided to use the vis.js JavaScript library. This library provides various interactive visualization charts (like graphs, networks, timelines, etc) to visualize data in real time. We chose to work on this library because when compared to other popular visualization libraries, vis.js provides the best possible representation of a timeline, one that meets the requirements of our project. To know more about how to make a timeline using vis.js, click [http://visjs.org/docs/timeline/ here].

The timeline contains a single horizontal axis that is divided into time intervals equally separated from each other.

Let us consider an example where a student makes several submissions to an assignment. The student uploads a hyperlink "https ://www.facebook.com" and an HTML file as submissions. The assignment has several deadlines or due dates. There are due dates for Round 1 and Round 2 submissions for this particular assignment. There are also review deadlines for each of the rounds for the assignment. The student can give a peer review to other students' work on the assignment. The student is able to give feedback to the peer reviews that he received. We have used color coding to differentiate between different kinds of things visualized on the timeline. We have used '''Orange''' color for a round's submission and review deadline and '''Green''' color for all hyperlink submissions, file submissions and '''Cream''' color for feedback, peer review, team review and self review submissions.

So in summary, the following things have to be present on the timeline that are visualized as rectangular boxes on the timeline:
* The submission hyperlink box with the hyperlink
* The file upload box with a link to the uploaded file
* The Round 1 peer review deadline
* The Round 1 submission due date
* The Round 2 peer review deadline
* The Round 2 submission due date
* The Peer Review that the student gave to other students
* The feedback that the student gave to received reviews
* A self-feedback that the student gave to himself
* A team review that the student can give to his teammates
* Additionally, all the rectangular boxed have timestamps that display when the submission was made or the due date of that task

Apart from this, various buttons were also added to better interact with the timeline. These include:
* ''Zoom in'' - To zoom in by magnifying the viewing scale of the timeline
* ''Zoom out'' - To zoom out of the timeline
* ''Move Left'' - To move along the timeline's x-axis. The user can move forward by pressing the button
* ''Move Right'' - To move backward along the x-axis
* '''Recenter''' - Pressing this button helps the user to '''reset the zoom scale''' and the position of the x-axis in a way that all the items appear '''sorted in a single window.'''
A single '''vertical red line''' set to the '''current time''' on the x-axis indicates the current time at which the timeline is being viewed.

The '''percentage of zoom, percentage of window to move right/left''' can be modified as per convenience as mentioned in <script> of zoom buttons mentioned in later section of wiki.

We have added '''hyperlinks to enable quick access to all of the student submitted content'''. For example, the rectangular box that shows the submitted file has a hyperlink that links to the contents of the file. Similarly, the reviews submitted by the student is linked by the hyperlink in the Peer review rectangular box on the timeline.

Finally, after obtaining all the data from the database and the inclusion of all the stated information above to visualizing it in the timeline, the result would be something like this:

[[File:S1.png]]

When the user selects a particular rectangular box on the timeline by clicking on it, then the line that connects the box to the timeline's x-axis becomes thicker and the color of the box also changes to '''White''' to indicate to the user the current box that is selected. If the user selects the file submission rectangular box (sample.html file), then the timeline would look like this:

[[File:S2.png]]

==Files Involved==

*app/controllers/submission_records_controller.rb
*app/models/submission_record.rb
*app/views/student_task/list.html.erb

==Database Tables Involved==

*submission_records
*response_map
*due_dates
*participants
*assignments
*users
*teams
*teams_users
*signed_up_teams
*sign_up_topics

==Implementation==

The code to embed the timeline into the webpage is as follows

< div id="visualization">
< div class="menu">
<input id="zoomIn" value="Zoom in" type="button">
<input id="zoomOut" value="Zoom out" type="button">
<input id="moveLeft" value="Move left" type="button">
<input id="moveRight" value="Move right" type="button">
<input id="Recenter" value="Recenter" type="button">
< /div>
< /div>
<script type="text/javascript">
// DOM element where the Timeline will be attached
var container = document.getElementById('visualization');
// Create a DataSet (allows two way data-binding)
var items = new vis.DataSet(visualization_JSON);
// Configuration for the Timeline
var options = {
zoomMin: 1000 * 60 * 60 * 24, // one day in milliseconds
zoomMax: 1000 * 60 * 60 * 24 * 31 * 12 // about three months in milliseconds
};
// Create a Timeline
var timeline = new vis.Timeline(container, items, options);
</script>

There are several buttons that were inserted into the timeline to allow the user to interact with the timeline. The code for that is

<script>
var visualization_window=timeline.range.getRange();
function move (percentage) {
var range = timeline.getWindow();
var interval = range.end - range.start;
timeline.setWindow({
start: range.start.valueOf() - interval * percentage,
end: range.end.valueOf() - interval * percentage
});
}
// attach events to the navigation buttons
// zoom percentage in zoomin/zoomout can be adjusted below by passing paramenter. Similar is the case for move left/right along the x-axis
document.getElementById('zoomIn').onclick = function () { timeline.zoomIn( 0.2); };
document.getElementById('zoomOut').onclick = function () { timeline.zoomOut( 0.2); };
document.getElementById('moveLeft').onclick = function () { move( 0.2); };
document.getElementById('moveRight').onclick = function () { move(-0.2); };
document.getElementById('Recenter').onclick = function () {
var visualization_window_start = new Date(visualization_window.start);
var visualization_window_end = new Date(visualization_window.end);
timeline.setWindow(visualization_window_start, visualization_window_end, { animation: true });
};
</script>

The functionality of each button is explained in the Program Design section above.

It is necessary to obtain data from the Expertiza database to JSON format so that it can be processed by the timeline for visualization. After collecting the data from the database, processing it and storing it into a ruby variable, we use the JSON.parse() function to convert that information into JSON objects. To maintain continuity, the process of obtaining data and preprocessing it is explained later in the wiki. The code to convert the variable contents into a JSON object is as follows:

<script>
// converting @visualization_data array to javascript compatible JSON object
var visualization_JSON = JSON.parse('<%=raw @visualization_data.to_json%>');
var href_JSON = JSON.parse('<%= @href_arr.to_json.html_safe%>')
var temp;
//temp is temporary variable used to generate hyperlinks from content
for(i=0; i<visualization_JSON.length; i++) {
temp=visualization_JSON[i].content.split("<split>");
if(href_JSON[i]=='')
visualization_JSON[i].content = temp[0]+"<br>"+temp.slice(1);
else
visualization_JSON[i].content = "<a href="+href_JSON[i]+" target='_blank'><b><u>"+temp[0]+"</u></b></a><br>"+temp.slice(1);
}
</script>

The following code is used to display due dates in the timeline. The types of due dates included are Round submission or Round review due date.

<% @href_arr= Array.new %>
<! -- @href_arr is used to store all the hyperlinks for each visualized object -->
<% @duedates = DueDate.where("parent_id = #{@assignment.id}")
@visualization_data = @duedates.map do |due|
@href_arr.push("");
if due.deadline_type_id.eql? 1
{ :id => due.id, :start=> due.due_at, :className => "submissionDue", :content => "Round "+(due.round.to_s)+"<split>Submission due by "+'<br>'+due.due_at.strftime("%m/%d/%Y at %I:%M %p") }
else
{ :id => due.id, :start=> due.due_at, :className => "reviewDue", :content => "Round "+(due.round.to_s)+"<split>Review due by "+'<br>'+due.due_at.strftime("%m/%d/%Y at %I:%M %p") }
end
end
%>

Then we need to add submission hyperlinks and files in the timeline. The code for that is

< ! -- display only if submissions are made-->
<% unless @team.nil?
@submissions = SubmissionRecord.find_by_sql"select * from submission_records where assignment_id=#{@assignment.id} and team_id=#{@team.id}
and content NOT IN (select content from submission_records where assignment_id=#{@assignment.id} and team_id=#{@team.id} and UPPER(operation) Like 'REMOVE%')"
@visualization_data += @submissions.map do |submission|
#display_directory_tree(participant, files, true).html_safe
if (submission.operation).eql?('Submit File')
file = submission.content
ret=""
if File.exist?(file) && File.directory?(file)
ret += link_to File.basename(file), :controller => 'submitted_content', :action => 'edit', :id => participant.id, "current_folder[name]" => file
else
ret += "\n "
ret += link_to File.basename(file), :controller => 'submitted_content',
:action => 'download',
:id => @participant.id,
:download => File.basename(file),
"current_folder[name]" => File.dirname(file)
end
@href_arr.push(ret.split('"')[1])
{ :id => submission.id, :start=> submission.created_at, :className=> "fileUpload", :content => (submission.content).split('/')[-1]+'<split>'+
submission.created_at.strftime("%m/%d/%Y at %I:%M %p") }
else
@href_arr.push(submission.content)
{ :id => submission.id, :start=> submission.created_at, :className=> "hyperlinkUpload" ,:content => submission.content+'<split>'+
submission.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
end
end %>

'''Explanation:''' The following code fetches submission records of a student for a particular assignment from the '''submission_records''' table. Then after checking if the submission exists and when the type is a file, a hyperlink to the file's location path is obtained and pushed into the JSON. The same is done for a submission with the type Hyperlink.

Then to get the peer reviews, self-reviews, feedback and team reviews, the following code is used.

<! -- Reviews not yet started -->
<% unless @review_mappings.nil?
@review_mappings.each do |review_mapping_iterator|
@response_values = Response.where(:map_id => review_mapping_iterator.id)
@visualization_data += @response_values.map do |response_value_iterator|
if review_mapping_iterator.type=="ReviewResponseMap"
review_mapping = ResponseMap.find(review_mapping_iterator.reviewed_object_id)
participant = AssignmentTeam.get_first_member(review_mapping_iterator.reviewee_id)
topic_id = SignedUpTeam.topic_id(participant.parent_id, participant.user_id)
if !topic_id.nil?
if SignUpTopic.find(topic_id).topic_identifier != ''
@topic_name=SignUpTopic.find(topic_id).topic_identifier+": "+SignUpTopic.find(topic_id).topic_name
else
@topic_name=SignUpTopic.find(topic_id).topic_name
end
end
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "review", :content => "Peer Review -
Round "+response_value_iterator.round.to_s+"<split> Review for: #{@topic_name}"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
elsif review_mapping_iterator.type=="SelfReviewResponseMap"
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "selfReview", :content => "Self Feedback -
Round "+response_value_iterator.round.to_s+"<split>Self Feedback"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
elsif review_mapping_iterator.type=="TeammateReviewResponseMap"
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
reviewee = ResponseMap.where(:reviewer_id => "#{review_mapping_iterator.reviewer_id}", :id =>"#{review_mapping_iterator.id}").pluck(:reviewee_id)
puts reviewee.to_s+" "+review_mapping_iterator.reviewer_id.to_s+" "+review_mapping_iterator.id.to_s
user_id = Participant.where(:id=> "#{reviewee[0]}").pluck(:user_id)
reviewee_name = User.where(:id=>"#{user_id[0]}").pluck(:name)
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "teamReview", :content => "Team Review -
Round "+response_value_iterator.round.to_s+"<split>Team review for #{reviewee_name[0]}"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
else
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "feedback", :content => "Feedback -
Round "+response_value_iterator.round.to_s+"<split>Feedback"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
end
end
end
end %>

==Test Plan==

Feature tests will be written to thoroughly test our modifications. A new file with the name <b>timestamps_for_students_submissions_spec.rb</b> file will be created in <b>spec/features</b> folder with various test cases to test the changes.

==Edge Cases==

'''Timeline behavior when the student opens the view page of a newly created assignment'''

* When the user has not made any submissions, reviews or feedbacks to reviews to the assignment, the timeline must only display the due dates of the assignment.

'''Timeline behavior when student has not joined any team and makes submissions'''

* When a student who is not part of any team makes a submission, he is assigned a team_ID by Expertiza and all submissions made by him are linked to that ID. So only those submissions will be displayed on the timeline.

'''Timeline behavior when the student joins a team, what happens to the submissions he made before joining the team'''

* When he joins a team and he receives a new team_ID, any submissions made hereafter will be made under the new team_ID and all previous submissions made by the student will not be shown on the timeline(this is how Expertiza assigns team_IDs and submissions- the same is reflected in 'your work' section of a user's profile). Only the user submissions made after he joins the team is shown on the timeline.

'''Timeline behavior when there is no name for a given assignment'''

* Sometimes assignments are not named. In the peer review submission rectangular box displayed on the timeline after the student submits a peer review, instead of showing the label "Review for [assignment name]", the label says "Review".

'''Timeline behavior when a submitted hyperlink is removed'''

* When a submitted hyperlink is removed, the submission must not be displayed on the timeline any more.

'''A submission must be made before a peer review can be given'''

* This condition holds even if the deadline has already passed.

==Future modifications==

We can also include icons that are embedded into the rectangles. They act as visual aids to help the user quickly recognize the category of the box. We propose a design that would look something like this:

[[File:S3.png]]

===References===

#[https://github.com/expertiza/expertiza Expertiza on GitHub]
#[http://expertiza.ncsu.edu/ The live Expertiza website]
#[http://wiki.expertiza.ncsu.edu/index.php/Expertiza_documentation Expertiza project documentation wiki]
#[https://relishapp.com/rspec Rspec Documentation]
#[http://visjs.org/docs/timeline/ Vis.js Documentation for Timeline]
#[ Github pull request submitted]

CSC/ECE 517 Fall 2017/E1797 Timestamps for students submission

2017-12-02T07:14:20Z

Skatta3: /* Program Design */

==Introduction==

Expertiza is an open source project created using Ruby on Rails. Students can upload and submit their assignments and related work online for grading purposes.

===Existing System===

Currently, there exist various types of submissions that a student can make for an assignment for which timestamps are generated.
*When a student submits links or uploads files as submissions to an assignment in Expertiza, a timestamp is created for the date and time at which each of the submissions was done.
*The student may also be able to give reviews to other works for a particular assignment. These reviews when submitted also have an associated timestamp.
*There also exist timestamps for deadlines that have passed and that are upcoming for an assignment submission or a review to be done.
*For the reviews that a student receives for his work, the student can give feedback to each of the reviews. The submitted feedbacks also get timestamps.

Currenty there exists no functionality to view all these submissions and their timestamps in a single, aggregated way.

===Proposed System===

Our project was to solve this issue by creating a Visualization that helps the student view all the timestamps for his submissions. The goal is to create a Timeline that shows all the timestamps of submitted records and links to the submitted content wherever necessary. The default state of the timeline is a point on the x-axis set to the current date and time. The timeline is interactive and allows the user to zoom in and out to change the viewing scale of the timeline. The user can also scroll in the timeline to move the timeline forward or backward from the current time. After all of this is done, the user can reset the timeline to change his view to the default state.

With this, the student is able to view his entire submission history for an assignment in a convenient way.

==Problem Statement==

In Expertiza, it is possible for the instructor to view the submission records of a particular student. However, there is no way for students to check the history of their submission records. In this project, we are required to keep track of students’ activities and visualize them on their end by using a timeline chart.

<b>What needs to be visualized on the timeline:</b>

* Hyperlink submission record with timestamps
* File upload record with timestamps
* Due dates
*Visualization of Peer review of others works, which includes:
** A Review hyperlink that redirects to the review by clicking on it
** The Round number (To be displayed only if the assignment has multiple rounds)
** Timestamps
*Visualization of Author feedback on others review, which includes:
** A Feedback hyperlink that redirects to the feedback by clicking on it
** Timestamps

===Understanding Problem Statement===

The problem statement states the following issues that had to be resolved.

'''Issue-1:'''
Submission records with timestamps:

A student can submit their work for an assignment using "Your work" button in the respective assignment page. Students have two options to submit their work :
* Giving a hyperlink.
* Uploading a file.
As soon as the user submits any one of these, we needed to show hyperlink or file with the time-stamp on our visualization graph. Also, we needed to provide the submitted '''hyperlink or a link''' to the file on the visualization so that it will be easy for the user to navigate from a single page.

'''Issue-2:'''
Due dates:

There are different due dates for every assignment like Round-1 submission, Round-2 submission, Round-1 review and Round-2 review Due Dates. These are different from submission time stamps because a submission's timestamp depends upon the time at which the user had submitted the work whereas a due date is the deadline date fixed by an instructor. Visualizing them by adding them into the timeline, helps the student to track all due dates in a single graph.

'''Issue-3:'''
Peer Review other's work:

A student needs to review work of different teams during the course of the assignment. As of now in order to view the review, Expertiza requires the user to go to the "other's work" page in the assignment. Instead of this, we want this data to be viewed in our visualization graph. This issue includes a timestamp, link to view review, review round number to be shown in the graph.
'''Note:''' this review is the peer review '''given by this particular student''' to different teams as part of the assignment, '''not the reviews the student received.'''

'''Issue-4:'''
Author's feedback on other's Review
:
A student can give feedback for the review he/she received for a specific assignment. So this information also needs to be included in the graph. We need to show the timestamp and hyperlink to the feedback. It must be noted that the feedback here is not the feedback he got for review given by him/her but the feedback he/she gave for the reviews the had received.

==Program Design==

To visualize the timeline graphically we decided to use the vis.js JavaScript library. This library provides various interactive visualization charts (like graphs, networks, timelines, etc) to visualize data in real time. We chose to work on this library because when compared to other popular visualization libraries, vis.js provides the best possible representation of a timeline, one that meets the requirements of our project. To know more about how to make a timeline using vis.js, click [http://visjs.org/docs/timeline/ here].

The timeline contains a single horizontal axis that is divided into time intervals equally separated from each other.

Let us consider an example where a student makes several submissions to an assignment. The student uploads a hyperlink "https ://www.facebook.com" and an HTML file as submissions. The assignment has several deadlines or due dates. There are due dates for Round 1 and Round 2 submissions for this particular assignment. There are also review deadlines for each of the rounds for the assignment. The student can give a peer review to other students' work on the assignment. The student is able to give feedback to the peer reviews that he received. We have used color coding to differentiate between different kinds of things visualized on the timeline. We have used '''Orange''' color for a round's submission and review deadline and '''Green''' color for all hyperlink submissions, file submissions and '''Cream''' color for feedback, peer review, team review and self review submissions.

So in summary, the following things have to be present on the timeline that are visualized as rectangular boxes on the timeline:
* The submission hyperlink box with the hyperlink
* The file upload box with a link to the uploaded file
* The Round 1 peer review deadline
* The Round 1 submission due date
* The Round 2 peer review deadline
* The Round 2 submission due date
* The Peer Review that the student gave to other students
* The feedback that the student gave to received reviews
* A self-feedback that the student gave to himself
* A team review that the student can give to his teammates
* Additionally, all the rectangular boxed have timestamps that display when the submission was made or the due date of that task

Apart from this, various buttons were also added to better interact with the timeline. These include:
* ''Zoom in'' - To zoom in by magnifying the viewing scale of the timeline
* ''Zoom out'' - To zoom out of the timeline
* ''Move Left'' - To move along the timeline's x-axis. The user can move forward by pressing the button
* ''Move Right'' - To move backward along the x-axis
* '''Recenter''' - Pressing this button helps the user to '''reset the zoom scale''' and the position of the x-axis in a way that all the items appear '''sorted in a single window.'''
A single '''vertical red line''' set to the '''current time''' on the x-axis indicates the current time at which the timeline is being viewed.

The '''percentage of zoom, percentage of window to move right/left''' can be modified as per convenience as mentioned in <script> of zoom buttons mentioned in later section of wiki.

We have added '''hyperlinks to enable quick access to all of the student submitted content'''. For example, the rectangular box that shows the submitted file has a hyperlink that links to the contents of the file. Similarly, the reviews submitted by the student is linked by the hyperlink in the Peer review rectangular box on the timeline.

Finally, after obtaining all the data from the database and the inclusion of all the stated information above to visualizing it in the timeline, the result would be something like this:

[[File:S1.png]]

When the user selects a particular rectangular box on the timeline by clicking on it, then the line that connects the box to the timeline's x-axis becomes thicker and the color of the box also changes to '''White''' to indicate to the user the current box that is selected. If the user selects the file submission rectangular box (sample.html file), then the timeline would look like this:

[[File:S2.png]]

==Files Involved==

*app/controllers/submission_records_controller.rb
*app/models/submission_record.rb
*app/views/student_task/list.html.erb

==Database Tables Involved==

*submission_records
*response_map
*due_dates
*participants
*assignments
*users
*teams
*teams_users
*signed_up_teams
*sign_up_topics

==Implementation==

The code to embed the timeline into the webpage is as follows

< div id="visualization">
< div class="menu">
<input id="zoomIn" value="Zoom in" type="button">
<input id="zoomOut" value="Zoom out" type="button">
<input id="moveLeft" value="Move left" type="button">
<input id="moveRight" value="Move right" type="button">
<input id="Recenter" value="Recenter" type="button">
< /div>
< /div>
<script type="text/javascript">
// DOM element where the Timeline will be attached
var container = document.getElementById('visualization');
// Create a DataSet (allows two way data-binding)
var items = new vis.DataSet(visualization_JSON);
// Configuration for the Timeline
var options = {
zoomMin: 1000 * 60 * 60 * 24, // one day in milliseconds
zoomMax: 1000 * 60 * 60 * 24 * 31 * 12 // about three months in milliseconds
};
// Create a Timeline
var timeline = new vis.Timeline(container, items, options);
</script>

There are several buttons that were inserted into the timeline to allow the user to interact with the timeline. The code for that is

<script>
var visualization_window=timeline.range.getRange();
function move (percentage) {
var range = timeline.getWindow();
var interval = range.end - range.start;
timeline.setWindow({
start: range.start.valueOf() - interval * percentage,
end: range.end.valueOf() - interval * percentage
});
}
// attach events to the navigation buttons
// zoom percentage in zoomin/zoomout can be adjusted below by passing paramenter. Similar is the case for move left/right along the x-axis
document.getElementById('zoomIn').onclick = function () { timeline.zoomIn( 0.2); };
document.getElementById('zoomOut').onclick = function () { timeline.zoomOut( 0.2); };
document.getElementById('moveLeft').onclick = function () { move( 0.2); };
document.getElementById('moveRight').onclick = function () { move(-0.2); };
document.getElementById('Recenter').onclick = function () {
var visualization_window_start = new Date(visualization_window.start);
var visualization_window_end = new Date(visualization_window.end);
timeline.setWindow(visualization_window_start, visualization_window_end, { animation: true });
};
</script>

The functionality of each button is explained in the Program Design section above.

It is necessary to obtain data from the Expertiza database to JSON format so that it can be processed by the timeline for visualization. After collecting the data from the database, processing it and storing it into a ruby variable, we use the JSON.parse() function to convert that information into JSON objects. To maintain continuity, the process of obtaining data and preprocessing it is explained later in the wiki. The code to convert the variable contents into a JSON object is as follows:

<script>
// converting @visualization_data array to javascript compatible JSON object
var visualization_JSON = JSON.parse('<%=raw @visualization_data.to_json%>');
var href_JSON = JSON.parse('<%= @href_arr.to_json.html_safe%>')
var temp;
//temp is temporary variable used to generate hyperlinks from content
for(i=0; i<visualization_JSON.length; i++) {
temp=visualization_JSON[i].content.split("<split>");
if(href_JSON[i]=='')
visualization_JSON[i].content = temp[0]+"<br>"+temp.slice(1);
else
visualization_JSON[i].content = "<a href="+href_JSON[i]+" target='_blank'><b><u>"+temp[0]+"</u></b></a><br>"+temp.slice(1);
}
</script>

The following code is used to display due dates in the timeline. The types of due dates included are Round submission or Round review due date.

<% @href_arr= Array.new %>
<! -- @href_arr is used to store all the hyperlinks for each visualized object -->
<% @duedates = DueDate.where("parent_id = #{@assignment.id}")
@visualization_data = @duedates.map do |due|
@href_arr.push("");
if due.deadline_type_id.eql? 1
{ :id => due.id, :start=> due.due_at, :className => "submissionDue", :content => "Round "+(due.round.to_s)+"<split>Submission due by "+'<br>'+due.due_at.strftime("%m/%d/%Y at %I:%M %p") }
else
{ :id => due.id, :start=> due.due_at, :className => "reviewDue", :content => "Round "+(due.round.to_s)+"<split>Review due by "+'<br>'+due.due_at.strftime("%m/%d/%Y at %I:%M %p") }
end
end
%>

Then we need to add submission hyperlinks and files in the timeline. The code for that is

< ! -- display only if submissions are made-->
<% unless @team.nil?
@submissions = SubmissionRecord.find_by_sql"select * from submission_records where assignment_id=#{@assignment.id} and team_id=#{@team.id}
and content NOT IN (select content from submission_records where assignment_id=#{@assignment.id} and team_id=#{@team.id} and UPPER(operation) Like 'REMOVE%')"
@visualization_data += @submissions.map do |submission|
#display_directory_tree(participant, files, true).html_safe
if (submission.operation).eql?('Submit File')
file = submission.content
ret=""
if File.exist?(file) && File.directory?(file)
ret += link_to File.basename(file), :controller => 'submitted_content', :action => 'edit', :id => participant.id, "current_folder[name]" => file
else
ret += "\n "
ret += link_to File.basename(file), :controller => 'submitted_content',
:action => 'download',
:id => @participant.id,
:download => File.basename(file),
"current_folder[name]" => File.dirname(file)
end
@href_arr.push(ret.split('"')[1])
{ :id => submission.id, :start=> submission.created_at, :className=> "fileUpload", :content => (submission.content).split('/')[-1]+'<split>'+
submission.created_at.strftime("%m/%d/%Y at %I:%M %p") }
else
@href_arr.push(submission.content)
{ :id => submission.id, :start=> submission.created_at, :className=> "hyperlinkUpload" ,:content => submission.content+'<split>'+
submission.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
end
end %>

'''Explanation:''' The following code fetches submission records of a student for a particular assignment from the '''submission_records''' table. Then after checking if the submission exists and when the type is a file, a hyperlink to the file's location path is obtained and pushed into the JSON. The same is done for a submission with the type Hyperlink.

Then to get the peer reviews, self-reviews, feedback and team reviews, the following code is used.

<! -- Reviews not yet started -->
<% unless @review_mappings.nil?
@review_mappings.each do |review_mapping_iterator|
@response_values = Response.where(:map_id => review_mapping_iterator.id)
@visualization_data += @response_values.map do |response_value_iterator|
if review_mapping_iterator.type=="ReviewResponseMap"
review_mapping = ResponseMap.find(review_mapping_iterator.reviewed_object_id)
participant = AssignmentTeam.get_first_member(review_mapping_iterator.reviewee_id)
topic_id = SignedUpTeam.topic_id(participant.parent_id, participant.user_id)
if !topic_id.nil?
if SignUpTopic.find(topic_id).topic_identifier != ''
@topic_name=SignUpTopic.find(topic_id).topic_identifier+": "+SignUpTopic.find(topic_id).topic_name
else
@topic_name=SignUpTopic.find(topic_id).topic_name
end
end
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "review", :content => "Peer Review -
Round "+response_value_iterator.round.to_s+"<split> Review for: #{@topic_name}"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
elsif review_mapping_iterator.type=="SelfReviewResponseMap"
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "selfReview", :content => "Self Feedback -
Round "+response_value_iterator.round.to_s+"<split>Self Feedback"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
elsif review_mapping_iterator.type=="TeammateReviewResponseMap"
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
reviewee = ResponseMap.where(:reviewer_id => "#{review_mapping_iterator.reviewer_id}", :id =>"#{review_mapping_iterator.id}").pluck(:reviewee_id)
puts reviewee.to_s+" "+review_mapping_iterator.reviewer_id.to_s+" "+review_mapping_iterator.id.to_s
user_id = Participant.where(:id=> "#{reviewee[0]}").pluck(:user_id)
reviewee_name = User.where(:id=>"#{user_id[0]}").pluck(:name)
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "teamReview", :content => "Team Review -
Round "+response_value_iterator.round.to_s+"<split>Team review for #{reviewee_name[0]}"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
else
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "feedback", :content => "Feedback -
Round "+response_value_iterator.round.to_s+"<split>Feedback"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
end
end
end
end %>

==Test Plan==

Feature tests will be written to thoroughly test our modifications. A new file with the name <b>timestamps_for_students_submissions_spec.rb</b> file will be created in <b>spec/features</b> folder with various test cases to test the changes.

==Edge Cases==

'''Timeline behavior when the student opens the view page of a newly created assignment'''

* When the user has not made any submissions, reviews or feedbacks to reviews to the assignment, the timeline must only display the due dates of the assignment.

'''Timeline behavior when student has not joined any team and makes submissions'''

* When a student who is not part of any team makes a submission, he is assigned a team_ID by Expertiza and all submissions made by him are linked to that ID. So only those submissions will be displayed on the timeline.

'''Timeline behavior when the student joins a team, what happens to the submissions he made before joining the team'''

* When he joins a team and he receives a new team_ID, any submissions made hereafter will be made under the new team_ID and all previous submissions made by the student will not be shown on the timeline(this is how Expertiza assigns team_IDs and submissions- the same is reflected in 'your work' section of a user's profile). Only the user submissions made after he joins the team is shown on the timeline.

'''Timeline behavior when there is no name for a given assignment'''

* Sometimes assignments are not named. In the peer review submission rectangular box displayed on the timeline after the student submits a peer review, instead of showing the label "Review for [assignment name]", the label says "Review".

'''Timeline behavior when a submitted hyperlink is removed'''

* When a submitted hyperlink is removed, the submission must not be displayed on the timeline any more.

'''A submission must be made before a peer review can be given'''

* This condition holds even if the deadline has already passed.

==Future modifications==

We can also include icons that are embedded into the rectangles. They act as visual aids to help the user quickly recognize the category of the box. We propose a design that would look something like this:

[[File:S3.png]]

===References===

#[https://github.com/expertiza/expertiza Expertiza on GitHub]
#[http://expertiza.ncsu.edu/ The live Expertiza website]
#[http://wiki.expertiza.ncsu.edu/index.php/Expertiza_documentation Expertiza project documentation wiki]
#[https://relishapp.com/rspec Rspec Documentation]
#[http://visjs.org/docs/timeline/ Vis.js Documentation for Timeline]

CSC/ECE 517 Fall 2017/E1797 Timestamps for students submission

2017-12-02T07:11:10Z

Skatta3: /* Program Design */

==Introduction==

Expertiza is an open source project created using Ruby on Rails. Students can upload and submit their assignments and related work online for grading purposes.

===Existing System===

Currently, there exist various types of submissions that a student can make for an assignment for which timestamps are generated.
*When a student submits links or uploads files as submissions to an assignment in Expertiza, a timestamp is created for the date and time at which each of the submissions was done.
*The student may also be able to give reviews to other works for a particular assignment. These reviews when submitted also have an associated timestamp.
*There also exist timestamps for deadlines that have passed and that are upcoming for an assignment submission or a review to be done.
*For the reviews that a student receives for his work, the student can give feedback to each of the reviews. The submitted feedbacks also get timestamps.

Currenty there exists no functionality to view all these submissions and their timestamps in a single, aggregated way.

===Proposed System===

Our project was to solve this issue by creating a Visualization that helps the student view all the timestamps for his submissions. The goal is to create a Timeline that shows all the timestamps of submitted records and links to the submitted content wherever necessary. The default state of the timeline is a point on the x-axis set to the current date and time. The timeline is interactive and allows the user to zoom in and out to change the viewing scale of the timeline. The user can also scroll in the timeline to move the timeline forward or backward from the current time. After all of this is done, the user can reset the timeline to change his view to the default state.

With this, the student is able to view his entire submission history for an assignment in a convenient way.

==Problem Statement==

In Expertiza, it is possible for the instructor to view the submission records of a particular student. However, there is no way for students to check the history of their submission records. In this project, we are required to keep track of students’ activities and visualize them on their end by using a timeline chart.

<b>What needs to be visualized on the timeline:</b>

* Hyperlink submission record with timestamps
* File upload record with timestamps
* Due dates
*Visualization of Peer review of others works, which includes:
** A Review hyperlink that redirects to the review by clicking on it
** The Round number (To be displayed only if the assignment has multiple rounds)
** Timestamps
*Visualization of Author feedback on others review, which includes:
** A Feedback hyperlink that redirects to the feedback by clicking on it
** Timestamps

===Understanding Problem Statement===

The problem statement states the following issues that had to be resolved.

'''Issue-1:'''
Submission records with timestamps:

A student can submit their work for an assignment using "Your work" button in the respective assignment page. Students have two options to submit their work :
* Giving a hyperlink.
* Uploading a file.
As soon as the user submits any one of these, we needed to show hyperlink or file with the time-stamp on our visualization graph. Also, we needed to provide the submitted '''hyperlink or a link''' to the file on the visualization so that it will be easy for the user to navigate from a single page.

'''Issue-2:'''
Due dates:

There are different due dates for every assignment like Round-1 submission, Round-2 submission, Round-1 review and Round-2 review Due Dates. These are different from submission time stamps because a submission's timestamp depends upon the time at which the user had submitted the work whereas a due date is the deadline date fixed by an instructor. Visualizing them by adding them into the timeline, helps the student to track all due dates in a single graph.

'''Issue-3:'''
Peer Review other's work:

A student needs to review work of different teams during the course of the assignment. As of now in order to view the review, Expertiza requires the user to go to the "other's work" page in the assignment. Instead of this, we want this data to be viewed in our visualization graph. This issue includes a timestamp, link to view review, review round number to be shown in the graph.
'''Note:''' this review is the peer review '''given by this particular student''' to different teams as part of the assignment, '''not the reviews the student received.'''

'''Issue-4:'''
Author's feedback on other's Review
:
A student can give feedback for the review he/she received for a specific assignment. So this information also needs to be included in the graph. We need to show the timestamp and hyperlink to the feedback. It must be noted that the feedback here is not the feedback he got for review given by him/her but the feedback he/she gave for the reviews the had received.

==Program Design==

To visualize the timeline graphically we decided to use the vis.js JavaScript library. This library provides various interactive visualization charts (like graphs, networks, timelines, etc) to visualize data in real time. We chose to work on this library because when compared to other popular visualization libraries, vis.js provides the best possible representation of a timeline, one that meets the requirements of our project. To know more about how to make a timeline using vis.js, click [http://visjs.org/docs/timeline/ here].

The timeline contains a single horizontal axis that is divided into time intervals equally separated from each other.

Let us consider an example where a student makes several submissions to an assignment. The student uploads a hyperlink "https ://www.facebook.com" and an HTML file as submissions. The assignment has several deadlines or due dates. There are due dates for Round 1 and Round 2 submissions for this particular assignment. There are also review deadlines for each of the rounds for the assignment. The student can give a peer review to other students' work on the assignment. The student is able to give feedback to the peer reviews that he received. We have used color coding to differentiate between different kinds of things visualized on the timeline. We have used '''Orange''' color for a round's submission and review deadline and '''Green''' color for all hyperlink submissions, file submissions and '''Cream''' color for feedback, peer review, team review and self review submissions.

So in summary, the following things have to be present on the timeline that are visualized as rectangular boxes on the timeline:
* The submission hyperlink box with the hyperlink
* The file upload box with a link to the uploaded file
* The Round 1 peer review deadline
* The Round 1 submission due date
* The Round 2 peer review deadline
* The Round 2 submission due date
* The Peer Review that the student gave to other students
* The feedback that the student gave to received reviews
* A self-feedback that the student gave to himself
* A team review that the student can give to his teammates
* Additionally, all the rectangular boxed have timestamps that display when the submission was made or the due date of that task

Apart from this, various buttons were also added to better interact with the timeline. These include:
* ''Zoom in'' - To zoom in by magnifying the viewing scale of the timeline
* ''Zoom out'' - To zoom out of the timeline
* ''Move Left'' - To move along the timeline's x-axis. The user can move forward by pressing the button
* ''Move Right'' - To move backward along the x-axis
* '''Recenter''' - Pressing this button helps the user to '''reset the zoom scale''' and the position of the x-axis in a way that all the items appear '''sorted in a single window.'''
A single '''vertical red line''' set to the '''current time''' on the x-axis indicates the current time at which the timeline is being viewed.
The percentage of zoom, percentage of window to move right/left can be modified as per convenience as mentioned in <script> of zoom buttons

We have added hyperlinks to enable quick access to the submitted content. For example, the rectangular box that shows the submitted file has a hyperlink that links to the contents of the file. Similarly, the reviews submitted by the student is linked by the hyperlink in the Peer review rectangular box on the timeline.

Finally, after obtaining all the data from the database and the inclusion of all the stated information above to visualizing it in the timeline, the result would be something like this:

[[File:S1.png]]

When the user selects a particular rectangular box on the timeline by clicking on it, then the line that connects the box to the timeline's x-axis becomes thicker and the color of the box also changes to '''White''' to indicate to the user the current box that is selected. If the user selects the file submission rectangular box (sample.html file), then the timeline would look like this:

[[File:S2.png]]

==Files Involved==

*app/controllers/submission_records_controller.rb
*app/models/submission_record.rb
*app/views/student_task/list.html.erb

==Database Tables Involved==

*submission_records
*response_map
*due_dates
*participants
*assignments
*users
*teams
*teams_users
*signed_up_teams
*sign_up_topics

==Implementation==

The code to embed the timeline into the webpage is as follows

< div id="visualization">
< div class="menu">
<input id="zoomIn" value="Zoom in" type="button">
<input id="zoomOut" value="Zoom out" type="button">
<input id="moveLeft" value="Move left" type="button">
<input id="moveRight" value="Move right" type="button">
<input id="Recenter" value="Recenter" type="button">
< /div>
< /div>
<script type="text/javascript">
// DOM element where the Timeline will be attached
var container = document.getElementById('visualization');
// Create a DataSet (allows two way data-binding)
var items = new vis.DataSet(visualization_JSON);
// Configuration for the Timeline
var options = {
zoomMin: 1000 * 60 * 60 * 24, // one day in milliseconds
zoomMax: 1000 * 60 * 60 * 24 * 31 * 12 // about three months in milliseconds
};
// Create a Timeline
var timeline = new vis.Timeline(container, items, options);
</script>

There are several buttons that were inserted into the timeline to allow the user to interact with the timeline. The code for that is

<script>
var visualization_window=timeline.range.getRange();
function move (percentage) {
var range = timeline.getWindow();
var interval = range.end - range.start;
timeline.setWindow({
start: range.start.valueOf() - interval * percentage,
end: range.end.valueOf() - interval * percentage
});
}
// attach events to the navigation buttons
// zoom percentage in zoomin/zoomout can be adjusted below by passing paramenter. Similar is the case for move left/right along the x-axis
document.getElementById('zoomIn').onclick = function () { timeline.zoomIn( 0.2); };
document.getElementById('zoomOut').onclick = function () { timeline.zoomOut( 0.2); };
document.getElementById('moveLeft').onclick = function () { move( 0.2); };
document.getElementById('moveRight').onclick = function () { move(-0.2); };
document.getElementById('Recenter').onclick = function () {
var visualization_window_start = new Date(visualization_window.start);
var visualization_window_end = new Date(visualization_window.end);
timeline.setWindow(visualization_window_start, visualization_window_end, { animation: true });
};
</script>

The functionality of each button is explained in the Program Design section above.

It is necessary to obtain data from the Expertiza database to JSON format so that it can be processed by the timeline for visualization. After collecting the data from the database, processing it and storing it into a ruby variable, we use the JSON.parse() function to convert that information into JSON objects. To maintain continuity, the process of obtaining data and preprocessing it is explained later in the wiki. The code to convert the variable contents into a JSON object is as follows:

<script>
// converting @visualization_data array to javascript compatible JSON object
var visualization_JSON = JSON.parse('<%=raw @visualization_data.to_json%>');
var href_JSON = JSON.parse('<%= @href_arr.to_json.html_safe%>')
var temp;
//temp is temporary variable used to generate hyperlinks from content
for(i=0; i<visualization_JSON.length; i++) {
temp=visualization_JSON[i].content.split("<split>");
if(href_JSON[i]=='')
visualization_JSON[i].content = temp[0]+"<br>"+temp.slice(1);
else
visualization_JSON[i].content = "<a href="+href_JSON[i]+" target='_blank'><b><u>"+temp[0]+"</u></b></a><br>"+temp.slice(1);
}
</script>

The following code is used to display due dates in the timeline. The types of due dates included are Round submission or Round review due date.

<% @href_arr= Array.new %>
<! -- @href_arr is used to store all the hyperlinks for each visualized object -->
<% @duedates = DueDate.where("parent_id = #{@assignment.id}")
@visualization_data = @duedates.map do |due|
@href_arr.push("");
if due.deadline_type_id.eql? 1
{ :id => due.id, :start=> due.due_at, :className => "submissionDue", :content => "Round "+(due.round.to_s)+"<split>Submission due by "+'<br>'+due.due_at.strftime("%m/%d/%Y at %I:%M %p") }
else
{ :id => due.id, :start=> due.due_at, :className => "reviewDue", :content => "Round "+(due.round.to_s)+"<split>Review due by "+'<br>'+due.due_at.strftime("%m/%d/%Y at %I:%M %p") }
end
end
%>

Then we need to add submission hyperlinks and files in the timeline. The code for that is

< ! -- display only if submissions are made-->
<% unless @team.nil?
@submissions = SubmissionRecord.find_by_sql"select * from submission_records where assignment_id=#{@assignment.id} and team_id=#{@team.id}
and content NOT IN (select content from submission_records where assignment_id=#{@assignment.id} and team_id=#{@team.id} and UPPER(operation) Like 'REMOVE%')"
@visualization_data += @submissions.map do |submission|
#display_directory_tree(participant, files, true).html_safe
if (submission.operation).eql?('Submit File')
file = submission.content
ret=""
if File.exist?(file) && File.directory?(file)
ret += link_to File.basename(file), :controller => 'submitted_content', :action => 'edit', :id => participant.id, "current_folder[name]" => file
else
ret += "\n "
ret += link_to File.basename(file), :controller => 'submitted_content',
:action => 'download',
:id => @participant.id,
:download => File.basename(file),
"current_folder[name]" => File.dirname(file)
end
@href_arr.push(ret.split('"')[1])
{ :id => submission.id, :start=> submission.created_at, :className=> "fileUpload", :content => (submission.content).split('/')[-1]+'<split>'+
submission.created_at.strftime("%m/%d/%Y at %I:%M %p") }
else
@href_arr.push(submission.content)
{ :id => submission.id, :start=> submission.created_at, :className=> "hyperlinkUpload" ,:content => submission.content+'<split>'+
submission.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
end
end %>

'''Explanation:''' The following code fetches submission records of a student for a particular assignment from the '''submission_records''' table. Then after checking if the submission exists and when the type is a file, a hyperlink to the file's location path is obtained and pushed into the JSON. The same is done for a submission with the type Hyperlink.

Then to get the peer reviews, self-reviews, feedback and team reviews, the following code is used.

<! -- Reviews not yet started -->
<% unless @review_mappings.nil?
@review_mappings.each do |review_mapping_iterator|
@response_values = Response.where(:map_id => review_mapping_iterator.id)
@visualization_data += @response_values.map do |response_value_iterator|
if review_mapping_iterator.type=="ReviewResponseMap"
review_mapping = ResponseMap.find(review_mapping_iterator.reviewed_object_id)
participant = AssignmentTeam.get_first_member(review_mapping_iterator.reviewee_id)
topic_id = SignedUpTeam.topic_id(participant.parent_id, participant.user_id)
if !topic_id.nil?
if SignUpTopic.find(topic_id).topic_identifier != ''
@topic_name=SignUpTopic.find(topic_id).topic_identifier+": "+SignUpTopic.find(topic_id).topic_name
else
@topic_name=SignUpTopic.find(topic_id).topic_name
end
end
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "review", :content => "Peer Review -
Round "+response_value_iterator.round.to_s+"<split> Review for: #{@topic_name}"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
elsif review_mapping_iterator.type=="SelfReviewResponseMap"
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "selfReview", :content => "Self Feedback -
Round "+response_value_iterator.round.to_s+"<split>Self Feedback"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
elsif review_mapping_iterator.type=="TeammateReviewResponseMap"
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
reviewee = ResponseMap.where(:reviewer_id => "#{review_mapping_iterator.reviewer_id}", :id =>"#{review_mapping_iterator.id}").pluck(:reviewee_id)
puts reviewee.to_s+" "+review_mapping_iterator.reviewer_id.to_s+" "+review_mapping_iterator.id.to_s
user_id = Participant.where(:id=> "#{reviewee[0]}").pluck(:user_id)
reviewee_name = User.where(:id=>"#{user_id[0]}").pluck(:name)
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "teamReview", :content => "Team Review -
Round "+response_value_iterator.round.to_s+"<split>Team review for #{reviewee_name[0]}"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
else
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "feedback", :content => "Feedback -
Round "+response_value_iterator.round.to_s+"<split>Feedback"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
end
end
end
end %>

==Test Plan==

Feature tests will be written to thoroughly test our modifications. A new file with the name <b>timestamps_for_students_submissions_spec.rb</b> file will be created in <b>spec/features</b> folder with various test cases to test the changes.

==Edge Cases==

'''Timeline behavior when the student opens the view page of a newly created assignment'''

* When the user has not made any submissions, reviews or feedbacks to reviews to the assignment, the timeline must only display the due dates of the assignment.

'''Timeline behavior when student has not joined any team and makes submissions'''

* When a student who is not part of any team makes a submission, he is assigned a team_ID by Expertiza and all submissions made by him are linked to that ID. So only those submissions will be displayed on the timeline.

'''Timeline behavior when the student joins a team, what happens to the submissions he made before joining the team'''

* When he joins a team and he receives a new team_ID, any submissions made hereafter will be made under the new team_ID and all previous submissions made by the student will not be shown on the timeline(this is how Expertiza assigns team_IDs and submissions- the same is reflected in 'your work' section of a user's profile). Only the user submissions made after he joins the team is shown on the timeline.

'''Timeline behavior when there is no name for a given assignment'''

* Sometimes assignments are not named. In the peer review submission rectangular box displayed on the timeline after the student submits a peer review, instead of showing the label "Review for [assignment name]", the label says "Review".

'''Timeline behavior when a submitted hyperlink is removed'''

* When a submitted hyperlink is removed, the submission must not be displayed on the timeline any more.

'''A submission must be made before a peer review can be given'''

* This condition holds even if the deadline has already passed.

==Future modifications==

We can also include icons that are embedded into the rectangles. They act as visual aids to help the user quickly recognize the category of the box. We propose a design that would look something like this:

[[File:S3.png]]

===References===

#[https://github.com/expertiza/expertiza Expertiza on GitHub]
#[http://expertiza.ncsu.edu/ The live Expertiza website]
#[http://wiki.expertiza.ncsu.edu/index.php/Expertiza_documentation Expertiza project documentation wiki]
#[https://relishapp.com/rspec Rspec Documentation]
#[http://visjs.org/docs/timeline/ Vis.js Documentation for Timeline]

CSC/ECE 517 Fall 2017/E1797 Timestamps for students submission

2017-12-02T06:51:59Z

Skatta3: /* Database Tables Involved */

==Introduction==

Expertiza is an open source project created using Ruby on Rails. Students can upload and submit their assignments and related work online for grading purposes.

===Existing System===

Currently, there exist various types of submissions that a student can make for an assignment for which timestamps are generated.
*When a student submits links or uploads files as submissions to an assignment in Expertiza, a timestamp is created for the date and time at which each of the submissions was done.
*The student may also be able to give reviews to other works for a particular assignment. These reviews when submitted also have an associated timestamp.
*There also exist timestamps for deadlines that have passed and that are upcoming for an assignment submission or a review to be done.
*For the reviews that a student receives for his work, the student can give feedback to each of the reviews. The submitted feedbacks also get timestamps.

Currenty there exists no functionality to view all these submissions and their timestamps in a single, aggregated way.

===Proposed System===

Our project was to solve this issue by creating a Visualization that helps the student view all the timestamps for his submissions. The goal is to create a Timeline that shows all the timestamps of submitted records and links to the submitted content wherever necessary. The default state of the timeline is a point on the x-axis set to the current date and time. The timeline is interactive and allows the user to zoom in and out to change the viewing scale of the timeline. The user can also scroll in the timeline to move the timeline forward or backward from the current time. After all of this is done, the user can reset the timeline to change his view to the default state.

With this, the student is able to view his entire submission history for an assignment in a convenient way.

==Problem Statement==

In Expertiza, it is possible for the instructor to view the submission records of a particular student. However, there is no way for students to check the history of their submission records. In this project, we are required to keep track of students’ activities and visualize them on their end by using a timeline chart.

<b>What needs to be visualized on the timeline:</b>

* Hyperlink submission record with timestamps
* File upload record with timestamps
* Due dates
*Visualization of Peer review of others works, which includes:
** A Review hyperlink that redirects to the review by clicking on it
** The Round number (To be displayed only if the assignment has multiple rounds)
** Timestamps
*Visualization of Author feedback on others review, which includes:
** A Feedback hyperlink that redirects to the feedback by clicking on it
** Timestamps

===Understanding Problem Statement===

The problem statement states the following issues that had to be resolved.

'''Issue-1:'''
Submission records with timestamps:

A student can submit their work for an assignment using "Your work" button in the respective assignment page. Students have two options to submit their work :
* Giving a hyperlink.
* Uploading a file.
As soon as the user submits any one of these, we needed to show hyperlink or file with the time-stamp on our visualization graph. Also, we needed to provide the submitted '''hyperlink or a link''' to the file on the visualization so that it will be easy for the user to navigate from a single page.

'''Issue-2:'''
Due dates:

There are different due dates for every assignment like Round-1 submission, Round-2 submission, Round-1 review and Round-2 review Due Dates. These are different from submission time stamps because a submission's timestamp depends upon the time at which the user had submitted the work whereas a due date is the deadline date fixed by an instructor. Visualizing them by adding them into the timeline, helps the student to track all due dates in a single graph.

'''Issue-3:'''
Peer Review other's work:

A student needs to review work of different teams during the course of the assignment. As of now in order to view the review, Expertiza requires the user to go to the "other's work" page in the assignment. Instead of this, we want this data to be viewed in our visualization graph. This issue includes a timestamp, link to view review, review round number to be shown in the graph.
'''Note:''' this review is the peer review '''given by this particular student''' to different teams as part of the assignment, '''not the reviews the student received.'''

'''Issue-4:'''
Author's feedback on other's Review
:
A student can give feedback for the review he/she received for a specific assignment. So this information also needs to be included in the graph. We need to show the timestamp and hyperlink to the feedback. It must be noted that the feedback here is not the feedback he got for review given by him/her but the feedback he/she gave for the reviews the had received.

==Program Design==

To visualize the timeline graphically we decided to use the vis.js JavaScript library. This library provides various interactive visualization charts (like graphs, networks, timelines, etc) to visualize data in real time. We chose to work on this library because when compared to other popular visualization libraries, vis.js provides the best possible representation of a timeline, one that meets the requirements of our project. To know more about how to make a timeline using vis.js, click [http://visjs.org/docs/timeline/ here].

The timeline contains a single horizontal axis that is divided into time intervals equally separated from each other.

Let us consider an example where a student makes several submissions to an assignment. The student uploads a hyperlink "https ://www.facebook.com" and an HTML file as submissions. The assignment has several deadlines or due dates. There are due dates for Round 1 and Round 2 submissions for this particular assignment. There are also review deadlines for each of the rounds for the assignment. The student can give a peer review to other students' work on the assignment. The student is able to give feedback to the peer reviews that he received. We have used color coding to differentiate between different kinds of things visualized on the timeline. We have used '''Orange''' color for a round's submission and review deadline and '''Green''' color for all hyperlink submissions, file submissions and '''Cream''' color for feedback, peer review, team review and self review submissions.

So in summary, the following things have to be present on the timeline that are visualized as rectangular boxes on the timeline:
* The submission hyperlink box with the hyperlink
* The file upload box with a link to the uploaded file
* The Round 1 peer review deadline
* The Round 1 submission due date
* The Round 2 peer review deadline
* The Round 2 submission due date
* The Peer Review that the student gave to other students
* The feedback that the student gave to received reviews
* A self-feedback that the student gave to himself
* A team review that the student can give to his teammates
* Additionally, all the rectangular boxed have timestamps that display when the submission was made or the due date of that task

Apart from this, various buttons were also added to better interact with the timeline. These include:
* Zoom in - To zoom in by magnifying the viewing scale of the timeline
* Zoom out - To zoom out of the timeline
* Move Left - To move along the timeline's x-axis. The user can move forward by pressing the button
* Move Right - To move backward along the x-axis
* Recenter - A single vertical red line set to the current time on the x-axis indicates the current time at which the timeline is being viewed. Pressing this button helps the user to reset the zoom scale and the position of the x-axis in a way that the red line is at the center of the timeline.

We have added hyperlinks to enable quick access to the submitted content. For example, the rectangular box that shows the submitted file has a hyperlink that links to the contents of the file. Similarly, the reviews submitted by the student is linked by the hyperlink in the Peer review rectangular box on the timeline.

Finally, after obtaining all the data from the database and the inclusion of all the stated information above to visualizing it in the timeline, the result would be something like this:

[[File:S1.png]]

When the user selects a particular rectangular box on the timeline by clicking on it, then the line that connects the box to the timeline's x-axis becomes thicker and the color of the box also changes to '''White''' to indicate to the user the current box that is selected. If the user selects the file submission rectangular box (sample.html file), then the timeline would look like this:

[[File:S2.png]]

==Files Involved==

*app/controllers/submission_records_controller.rb
*app/models/submission_record.rb
*app/views/student_task/list.html.erb

==Database Tables Involved==

*submission_records
*response_map
*due_dates
*participants
*assignments
*users
*teams
*teams_users
*signed_up_teams
*sign_up_topics

==Implementation==

The code to embed the timeline into the webpage is as follows

< div id="visualization">
< div class="menu">
<input id="zoomIn" value="Zoom in" type="button">
<input id="zoomOut" value="Zoom out" type="button">
<input id="moveLeft" value="Move left" type="button">
<input id="moveRight" value="Move right" type="button">
<input id="Recenter" value="Recenter" type="button">
< /div>
< /div>
<script type="text/javascript">
// DOM element where the Timeline will be attached
var container = document.getElementById('visualization');
// Create a DataSet (allows two way data-binding)
var items = new vis.DataSet(visualization_JSON);
// Configuration for the Timeline
var options = {
zoomMin: 1000 * 60 * 60 * 24, // one day in milliseconds
zoomMax: 1000 * 60 * 60 * 24 * 31 * 12 // about three months in milliseconds
};
// Create a Timeline
var timeline = new vis.Timeline(container, items, options);
</script>

There are several buttons that were inserted into the timeline to allow the user to interact with the timeline. The code for that is

<script>
var visualization_window=timeline.range.getRange();
function move (percentage) {
var range = timeline.getWindow();
var interval = range.end - range.start;
timeline.setWindow({
start: range.start.valueOf() - interval * percentage,
end: range.end.valueOf() - interval * percentage
});
}
// attach events to the navigation buttons
// zoom percentage in zoomin/zoomout can be adjusted below by passing paramenter. Similar is the case for move left/right along the x-axis
document.getElementById('zoomIn').onclick = function () { timeline.zoomIn( 0.2); };
document.getElementById('zoomOut').onclick = function () { timeline.zoomOut( 0.2); };
document.getElementById('moveLeft').onclick = function () { move( 0.2); };
document.getElementById('moveRight').onclick = function () { move(-0.2); };
document.getElementById('Recenter').onclick = function () {
var visualization_window_start = new Date(visualization_window.start);
var visualization_window_end = new Date(visualization_window.end);
timeline.setWindow(visualization_window_start, visualization_window_end, { animation: true });
};
</script>

The functionality of each button is explained in the Program Design section above.

It is necessary to obtain data from the Expertiza database to JSON format so that it can be processed by the timeline for visualization. After collecting the data from the database, processing it and storing it into a ruby variable, we use the JSON.parse() function to convert that information into JSON objects. To maintain continuity, the process of obtaining data and preprocessing it is explained later in the wiki. The code to convert the variable contents into a JSON object is as follows:

<script>
// converting @visualization_data array to javascript compatible JSON object
var visualization_JSON = JSON.parse('<%=raw @visualization_data.to_json%>');
var href_JSON = JSON.parse('<%= @href_arr.to_json.html_safe%>')
var temp;
//temp is temporary variable used to generate hyperlinks from content
for(i=0; i<visualization_JSON.length; i++) {
temp=visualization_JSON[i].content.split("<split>");
if(href_JSON[i]=='')
visualization_JSON[i].content = temp[0]+"<br>"+temp.slice(1);
else
visualization_JSON[i].content = "<a href="+href_JSON[i]+" target='_blank'><b><u>"+temp[0]+"</u></b></a><br>"+temp.slice(1);
}
</script>

The following code is used to display due dates in the timeline. The types of due dates included are Round submission or Round review due date.

<% @href_arr= Array.new %>
<! -- @href_arr is used to store all the hyperlinks for each visualized object -->
<% @duedates = DueDate.where("parent_id = #{@assignment.id}")
@visualization_data = @duedates.map do |due|
@href_arr.push("");
if due.deadline_type_id.eql? 1
{ :id => due.id, :start=> due.due_at, :className => "submissionDue", :content => "Round "+(due.round.to_s)+"<split>Submission due by "+'<br>'+due.due_at.strftime("%m/%d/%Y at %I:%M %p") }
else
{ :id => due.id, :start=> due.due_at, :className => "reviewDue", :content => "Round "+(due.round.to_s)+"<split>Review due by "+'<br>'+due.due_at.strftime("%m/%d/%Y at %I:%M %p") }
end
end
%>

Then we need to add submission hyperlinks and files in the timeline. The code for that is

< ! -- display only if submissions are made-->
<% unless @team.nil?
@submissions = SubmissionRecord.find_by_sql"select * from submission_records where assignment_id=#{@assignment.id} and team_id=#{@team.id}
and content NOT IN (select content from submission_records where assignment_id=#{@assignment.id} and team_id=#{@team.id} and UPPER(operation) Like 'REMOVE%')"
@visualization_data += @submissions.map do |submission|
#display_directory_tree(participant, files, true).html_safe
if (submission.operation).eql?('Submit File')
file = submission.content
ret=""
if File.exist?(file) && File.directory?(file)
ret += link_to File.basename(file), :controller => 'submitted_content', :action => 'edit', :id => participant.id, "current_folder[name]" => file
else
ret += "\n "
ret += link_to File.basename(file), :controller => 'submitted_content',
:action => 'download',
:id => @participant.id,
:download => File.basename(file),
"current_folder[name]" => File.dirname(file)
end
@href_arr.push(ret.split('"')[1])
{ :id => submission.id, :start=> submission.created_at, :className=> "fileUpload", :content => (submission.content).split('/')[-1]+'<split>'+
submission.created_at.strftime("%m/%d/%Y at %I:%M %p") }
else
@href_arr.push(submission.content)
{ :id => submission.id, :start=> submission.created_at, :className=> "hyperlinkUpload" ,:content => submission.content+'<split>'+
submission.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
end
end %>

'''Explanation:''' The following code fetches submission records of a student for a particular assignment from the '''submission_records''' table. Then after checking if the submission exists and when the type is a file, a hyperlink to the file's location path is obtained and pushed into the JSON. The same is done for a submission with the type Hyperlink.

Then to get the peer reviews, self-reviews, feedback and team reviews, the following code is used.

<! -- Reviews not yet started -->
<% unless @review_mappings.nil?
@review_mappings.each do |review_mapping_iterator|
@response_values = Response.where(:map_id => review_mapping_iterator.id)
@visualization_data += @response_values.map do |response_value_iterator|
if review_mapping_iterator.type=="ReviewResponseMap"
review_mapping = ResponseMap.find(review_mapping_iterator.reviewed_object_id)
participant = AssignmentTeam.get_first_member(review_mapping_iterator.reviewee_id)
topic_id = SignedUpTeam.topic_id(participant.parent_id, participant.user_id)
if !topic_id.nil?
if SignUpTopic.find(topic_id).topic_identifier != ''
@topic_name=SignUpTopic.find(topic_id).topic_identifier+": "+SignUpTopic.find(topic_id).topic_name
else
@topic_name=SignUpTopic.find(topic_id).topic_name
end
end
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "review", :content => "Peer Review -
Round "+response_value_iterator.round.to_s+"<split> Review for: #{@topic_name}"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
elsif review_mapping_iterator.type=="SelfReviewResponseMap"
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "selfReview", :content => "Self Feedback -
Round "+response_value_iterator.round.to_s+"<split>Self Feedback"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
elsif review_mapping_iterator.type=="TeammateReviewResponseMap"
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
reviewee = ResponseMap.where(:reviewer_id => "#{review_mapping_iterator.reviewer_id}", :id =>"#{review_mapping_iterator.id}").pluck(:reviewee_id)
puts reviewee.to_s+" "+review_mapping_iterator.reviewer_id.to_s+" "+review_mapping_iterator.id.to_s
user_id = Participant.where(:id=> "#{reviewee[0]}").pluck(:user_id)
reviewee_name = User.where(:id=>"#{user_id[0]}").pluck(:name)
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "teamReview", :content => "Team Review -
Round "+response_value_iterator.round.to_s+"<split>Team review for #{reviewee_name[0]}"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
else
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "feedback", :content => "Feedback -
Round "+response_value_iterator.round.to_s+"<split>Feedback"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
end
end
end
end %>

==Test Plan==

Feature tests will be written to thoroughly test our modifications. A new file with the name <b>timestamps_for_students_submissions_spec.rb</b> file will be created in <b>spec/features</b> folder with various test cases to test the changes.

==Edge Cases==

'''Timeline behavior when the student opens the view page of a newly created assignment'''

* When the user has not made any submissions, reviews or feedbacks to reviews to the assignment, the timeline must only display the due dates of the assignment.

'''Timeline behavior when student has not joined any team and makes submissions'''

* When a student who is not part of any team makes a submission, he is assigned a team_ID by Expertiza and all submissions made by him are linked to that ID. So only those submissions will be displayed on the timeline.

'''Timeline behavior when the student joins a team, what happens to the submissions he made before joining the team'''

* When he joins a team and he receives a new team_ID, any submissions made hereafter will be made under the new team_ID and all previous submissions made by the student will not be shown on the timeline(this is how Expertiza assigns team_IDs and submissions- the same is reflected in 'your work' section of a user's profile). Only the user submissions made after he joins the team is shown on the timeline.

'''Timeline behavior when there is no name for a given assignment'''

* Sometimes assignments are not named. In the peer review submission rectangular box displayed on the timeline after the student submits a peer review, instead of showing the label "Review for [assignment name]", the label says "Review".

'''Timeline behavior when a submitted hyperlink is removed'''

* When a submitted hyperlink is removed, the submission must not be displayed on the timeline any more.

'''A submission must be made before a peer review can be given'''

* This condition holds even if the deadline has already passed.

==Future modifications==

We can also include icons that are embedded into the rectangles. They act as visual aids to help the user quickly recognize the category of the box. We propose a design that would look something like this:

[[File:S3.png]]

===References===

#[https://github.com/expertiza/expertiza Expertiza on GitHub]
#[http://expertiza.ncsu.edu/ The live Expertiza website]
#[http://wiki.expertiza.ncsu.edu/index.php/Expertiza_documentation Expertiza project documentation wiki]
#[https://relishapp.com/rspec Rspec Documentation]
#[http://visjs.org/docs/timeline/ Vis.js Documentation for Timeline]

CSC/ECE 517 Fall 2017/E1797 Timestamps for students submission

2017-12-02T06:47:51Z

Skatta3: /* Program Design */

==Introduction==

Expertiza is an open source project created using Ruby on Rails. Students can upload and submit their assignments and related work online for grading purposes.

===Existing System===

Currently, there exist various types of submissions that a student can make for an assignment for which timestamps are generated.
*When a student submits links or uploads files as submissions to an assignment in Expertiza, a timestamp is created for the date and time at which each of the submissions was done.
*The student may also be able to give reviews to other works for a particular assignment. These reviews when submitted also have an associated timestamp.
*There also exist timestamps for deadlines that have passed and that are upcoming for an assignment submission or a review to be done.
*For the reviews that a student receives for his work, the student can give feedback to each of the reviews. The submitted feedbacks also get timestamps.

Currenty there exists no functionality to view all these submissions and their timestamps in a single, aggregated way.

===Proposed System===

Our project was to solve this issue by creating a Visualization that helps the student view all the timestamps for his submissions. The goal is to create a Timeline that shows all the timestamps of submitted records and links to the submitted content wherever necessary. The default state of the timeline is a point on the x-axis set to the current date and time. The timeline is interactive and allows the user to zoom in and out to change the viewing scale of the timeline. The user can also scroll in the timeline to move the timeline forward or backward from the current time. After all of this is done, the user can reset the timeline to change his view to the default state.

With this, the student is able to view his entire submission history for an assignment in a convenient way.

==Problem Statement==

In Expertiza, it is possible for the instructor to view the submission records of a particular student. However, there is no way for students to check the history of their submission records. In this project, we are required to keep track of students’ activities and visualize them on their end by using a timeline chart.

<b>What needs to be visualized on the timeline:</b>

* Hyperlink submission record with timestamps
* File upload record with timestamps
* Due dates
*Visualization of Peer review of others works, which includes:
** A Review hyperlink that redirects to the review by clicking on it
** The Round number (To be displayed only if the assignment has multiple rounds)
** Timestamps
*Visualization of Author feedback on others review, which includes:
** A Feedback hyperlink that redirects to the feedback by clicking on it
** Timestamps

===Understanding Problem Statement===

The problem statement states the following issues that had to be resolved.

'''Issue-1:'''
Submission records with timestamps:

A student can submit their work for an assignment using "Your work" button in the respective assignment page. Students have two options to submit their work :
* Giving a hyperlink.
* Uploading a file.
As soon as the user submits any one of these, we needed to show hyperlink or file with the time-stamp on our visualization graph. Also, we needed to provide the submitted '''hyperlink or a link''' to the file on the visualization so that it will be easy for the user to navigate from a single page.

'''Issue-2:'''
Due dates:

There are different due dates for every assignment like Round-1 submission, Round-2 submission, Round-1 review and Round-2 review Due Dates. These are different from submission time stamps because a submission's timestamp depends upon the time at which the user had submitted the work whereas a due date is the deadline date fixed by an instructor. Visualizing them by adding them into the timeline, helps the student to track all due dates in a single graph.

'''Issue-3:'''
Peer Review other's work:

A student needs to review work of different teams during the course of the assignment. As of now in order to view the review, Expertiza requires the user to go to the "other's work" page in the assignment. Instead of this, we want this data to be viewed in our visualization graph. This issue includes a timestamp, link to view review, review round number to be shown in the graph.
'''Note:''' this review is the peer review '''given by this particular student''' to different teams as part of the assignment, '''not the reviews the student received.'''

'''Issue-4:'''
Author's feedback on other's Review
:
A student can give feedback for the review he/she received for a specific assignment. So this information also needs to be included in the graph. We need to show the timestamp and hyperlink to the feedback. It must be noted that the feedback here is not the feedback he got for review given by him/her but the feedback he/she gave for the reviews the had received.

==Program Design==

To visualize the timeline graphically we decided to use the vis.js JavaScript library. This library provides various interactive visualization charts (like graphs, networks, timelines, etc) to visualize data in real time. We chose to work on this library because when compared to other popular visualization libraries, vis.js provides the best possible representation of a timeline, one that meets the requirements of our project. To know more about how to make a timeline using vis.js, click [http://visjs.org/docs/timeline/ here].

The timeline contains a single horizontal axis that is divided into time intervals equally separated from each other.

Let us consider an example where a student makes several submissions to an assignment. The student uploads a hyperlink "https ://www.facebook.com" and an HTML file as submissions. The assignment has several deadlines or due dates. There are due dates for Round 1 and Round 2 submissions for this particular assignment. There are also review deadlines for each of the rounds for the assignment. The student can give a peer review to other students' work on the assignment. The student is able to give feedback to the peer reviews that he received. We have used color coding to differentiate between different kinds of things visualized on the timeline. We have used '''Orange''' color for a round's submission and review deadline and '''Green''' color for all hyperlink submissions, file submissions and '''Cream''' color for feedback, peer review, team review and self review submissions.

So in summary, the following things have to be present on the timeline that are visualized as rectangular boxes on the timeline:
* The submission hyperlink box with the hyperlink
* The file upload box with a link to the uploaded file
* The Round 1 peer review deadline
* The Round 1 submission due date
* The Round 2 peer review deadline
* The Round 2 submission due date
* The Peer Review that the student gave to other students
* The feedback that the student gave to received reviews
* A self-feedback that the student gave to himself
* A team review that the student can give to his teammates
* Additionally, all the rectangular boxed have timestamps that display when the submission was made or the due date of that task

Apart from this, various buttons were also added to better interact with the timeline. These include:
* Zoom in - To zoom in by magnifying the viewing scale of the timeline
* Zoom out - To zoom out of the timeline
* Move Left - To move along the timeline's x-axis. The user can move forward by pressing the button
* Move Right - To move backward along the x-axis
* Recenter - A single vertical red line set to the current time on the x-axis indicates the current time at which the timeline is being viewed. Pressing this button helps the user to reset the zoom scale and the position of the x-axis in a way that the red line is at the center of the timeline.

We have added hyperlinks to enable quick access to the submitted content. For example, the rectangular box that shows the submitted file has a hyperlink that links to the contents of the file. Similarly, the reviews submitted by the student is linked by the hyperlink in the Peer review rectangular box on the timeline.

Finally, after obtaining all the data from the database and the inclusion of all the stated information above to visualizing it in the timeline, the result would be something like this:

[[File:S1.png]]

When the user selects a particular rectangular box on the timeline by clicking on it, then the line that connects the box to the timeline's x-axis becomes thicker and the color of the box also changes to '''White''' to indicate to the user the current box that is selected. If the user selects the file submission rectangular box (sample.html file), then the timeline would look like this:

[[File:S2.png]]

==Files Involved==

*app/controllers/submission_records_controller.rb
*app/models/submission_record.rb
*app/views/student_task/list.html.erb

==Database Tables Involved==

*submission_records
*response_map
*due_dates

==Implementation==

The code to embed the timeline into the webpage is as follows

< div id="visualization">
< div class="menu">
<input id="zoomIn" value="Zoom in" type="button">
<input id="zoomOut" value="Zoom out" type="button">
<input id="moveLeft" value="Move left" type="button">
<input id="moveRight" value="Move right" type="button">
<input id="Recenter" value="Recenter" type="button">
< /div>
< /div>
<script type="text/javascript">
// DOM element where the Timeline will be attached
var container = document.getElementById('visualization');
// Create a DataSet (allows two way data-binding)
var items = new vis.DataSet(visualization_JSON);
// Configuration for the Timeline
var options = {
zoomMin: 1000 * 60 * 60 * 24, // one day in milliseconds
zoomMax: 1000 * 60 * 60 * 24 * 31 * 12 // about three months in milliseconds
};
// Create a Timeline
var timeline = new vis.Timeline(container, items, options);
</script>

There are several buttons that were inserted into the timeline to allow the user to interact with the timeline. The code for that is

<script>
var visualization_window=timeline.range.getRange();
function move (percentage) {
var range = timeline.getWindow();
var interval = range.end - range.start;
timeline.setWindow({
start: range.start.valueOf() - interval * percentage,
end: range.end.valueOf() - interval * percentage
});
}
// attach events to the navigation buttons
// zoom percentage in zoomin/zoomout can be adjusted below by passing paramenter. Similar is the case for move left/right along the x-axis
document.getElementById('zoomIn').onclick = function () { timeline.zoomIn( 0.2); };
document.getElementById('zoomOut').onclick = function () { timeline.zoomOut( 0.2); };
document.getElementById('moveLeft').onclick = function () { move( 0.2); };
document.getElementById('moveRight').onclick = function () { move(-0.2); };
document.getElementById('Recenter').onclick = function () {
var visualization_window_start = new Date(visualization_window.start);
var visualization_window_end = new Date(visualization_window.end);
timeline.setWindow(visualization_window_start, visualization_window_end, { animation: true });
};
</script>

The functionality of each button is explained in the Program Design section above.

It is necessary to obtain data from the Expertiza database to JSON format so that it can be processed by the timeline for visualization. After collecting the data from the database, processing it and storing it into a ruby variable, we use the JSON.parse() function to convert that information into JSON objects. To maintain continuity, the process of obtaining data and preprocessing it is explained later in the wiki. The code to convert the variable contents into a JSON object is as follows:

<script>
// converting @visualization_data array to javascript compatible JSON object
var visualization_JSON = JSON.parse('<%=raw @visualization_data.to_json%>');
var href_JSON = JSON.parse('<%= @href_arr.to_json.html_safe%>')
var temp;
//temp is temporary variable used to generate hyperlinks from content
for(i=0; i<visualization_JSON.length; i++) {
temp=visualization_JSON[i].content.split("<split>");
if(href_JSON[i]=='')
visualization_JSON[i].content = temp[0]+"<br>"+temp.slice(1);
else
visualization_JSON[i].content = "<a href="+href_JSON[i]+" target='_blank'><b><u>"+temp[0]+"</u></b></a><br>"+temp.slice(1);
}
</script>

The following code is used to display due dates in the timeline. The types of due dates included are Round submission or Round review due date.

<% @href_arr= Array.new %>
<! -- @href_arr is used to store all the hyperlinks for each visualized object -->
<% @duedates = DueDate.where("parent_id = #{@assignment.id}")
@visualization_data = @duedates.map do |due|
@href_arr.push("");
if due.deadline_type_id.eql? 1
{ :id => due.id, :start=> due.due_at, :className => "submissionDue", :content => "Round "+(due.round.to_s)+"<split>Submission due by "+'<br>'+due.due_at.strftime("%m/%d/%Y at %I:%M %p") }
else
{ :id => due.id, :start=> due.due_at, :className => "reviewDue", :content => "Round "+(due.round.to_s)+"<split>Review due by "+'<br>'+due.due_at.strftime("%m/%d/%Y at %I:%M %p") }
end
end
%>

Then we need to add submission hyperlinks and files in the timeline. The code for that is

< ! -- display only if submissions are made-->
<% unless @team.nil?
@submissions = SubmissionRecord.find_by_sql"select * from submission_records where assignment_id=#{@assignment.id} and team_id=#{@team.id}
and content NOT IN (select content from submission_records where assignment_id=#{@assignment.id} and team_id=#{@team.id} and UPPER(operation) Like 'REMOVE%')"
@visualization_data += @submissions.map do |submission|
#display_directory_tree(participant, files, true).html_safe
if (submission.operation).eql?('Submit File')
file = submission.content
ret=""
if File.exist?(file) && File.directory?(file)
ret += link_to File.basename(file), :controller => 'submitted_content', :action => 'edit', :id => participant.id, "current_folder[name]" => file
else
ret += "\n "
ret += link_to File.basename(file), :controller => 'submitted_content',
:action => 'download',
:id => @participant.id,
:download => File.basename(file),
"current_folder[name]" => File.dirname(file)
end
@href_arr.push(ret.split('"')[1])
{ :id => submission.id, :start=> submission.created_at, :className=> "fileUpload", :content => (submission.content).split('/')[-1]+'<split>'+
submission.created_at.strftime("%m/%d/%Y at %I:%M %p") }
else
@href_arr.push(submission.content)
{ :id => submission.id, :start=> submission.created_at, :className=> "hyperlinkUpload" ,:content => submission.content+'<split>'+
submission.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
end
end %>

'''Explanation:''' The following code fetches submission records of a student for a particular assignment from the '''submission_records''' table. Then after checking if the submission exists and when the type is a file, a hyperlink to the file's location path is obtained and pushed into the JSON. The same is done for a submission with the type Hyperlink.

Then to get the peer reviews, self-reviews, feedback and team reviews, the following code is used.

<! -- Reviews not yet started -->
<% unless @review_mappings.nil?
@review_mappings.each do |review_mapping_iterator|
@response_values = Response.where(:map_id => review_mapping_iterator.id)
@visualization_data += @response_values.map do |response_value_iterator|
if review_mapping_iterator.type=="ReviewResponseMap"
review_mapping = ResponseMap.find(review_mapping_iterator.reviewed_object_id)
participant = AssignmentTeam.get_first_member(review_mapping_iterator.reviewee_id)
topic_id = SignedUpTeam.topic_id(participant.parent_id, participant.user_id)
if !topic_id.nil?
if SignUpTopic.find(topic_id).topic_identifier != ''
@topic_name=SignUpTopic.find(topic_id).topic_identifier+": "+SignUpTopic.find(topic_id).topic_name
else
@topic_name=SignUpTopic.find(topic_id).topic_name
end
end
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "review", :content => "Peer Review -
Round "+response_value_iterator.round.to_s+"<split> Review for: #{@topic_name}"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
elsif review_mapping_iterator.type=="SelfReviewResponseMap"
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "selfReview", :content => "Self Feedback -
Round "+response_value_iterator.round.to_s+"<split>Self Feedback"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
elsif review_mapping_iterator.type=="TeammateReviewResponseMap"
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
reviewee = ResponseMap.where(:reviewer_id => "#{review_mapping_iterator.reviewer_id}", :id =>"#{review_mapping_iterator.id}").pluck(:reviewee_id)
puts reviewee.to_s+" "+review_mapping_iterator.reviewer_id.to_s+" "+review_mapping_iterator.id.to_s
user_id = Participant.where(:id=> "#{reviewee[0]}").pluck(:user_id)
reviewee_name = User.where(:id=>"#{user_id[0]}").pluck(:name)
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "teamReview", :content => "Team Review -
Round "+response_value_iterator.round.to_s+"<split>Team review for #{reviewee_name[0]}"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
else
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "feedback", :content => "Feedback -
Round "+response_value_iterator.round.to_s+"<split>Feedback"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
end
end
end
end %>

==Test Plan==

Feature tests will be written to thoroughly test our modifications. A new file with the name <b>timestamps_for_students_submissions_spec.rb</b> file will be created in <b>spec/features</b> folder with various test cases to test the changes.

==Edge Cases==

'''Timeline behavior when the student opens the view page of a newly created assignment'''

* When the user has not made any submissions, reviews or feedbacks to reviews to the assignment, the timeline must only display the due dates of the assignment.

'''Timeline behavior when student has not joined any team and makes submissions'''

* When a student who is not part of any team makes a submission, he is assigned a team_ID by Expertiza and all submissions made by him are linked to that ID. So only those submissions will be displayed on the timeline.

'''Timeline behavior when the student joins a team, what happens to the submissions he made before joining the team'''

* When he joins a team and he receives a new team_ID, any submissions made hereafter will be made under the new team_ID and all previous submissions made by the student will not be shown on the timeline(this is how Expertiza assigns team_IDs and submissions- the same is reflected in 'your work' section of a user's profile). Only the user submissions made after he joins the team is shown on the timeline.

'''Timeline behavior when there is no name for a given assignment'''

* Sometimes assignments are not named. In the peer review submission rectangular box displayed on the timeline after the student submits a peer review, instead of showing the label "Review for [assignment name]", the label says "Review".

'''Timeline behavior when a submitted hyperlink is removed'''

* When a submitted hyperlink is removed, the submission must not be displayed on the timeline any more.

'''A submission must be made before a peer review can be given'''

* This condition holds even if the deadline has already passed.

==Future modifications==

We can also include icons that are embedded into the rectangles. They act as visual aids to help the user quickly recognize the category of the box. We propose a design that would look something like this:

[[File:S3.png]]

===References===

#[https://github.com/expertiza/expertiza Expertiza on GitHub]
#[http://expertiza.ncsu.edu/ The live Expertiza website]
#[http://wiki.expertiza.ncsu.edu/index.php/Expertiza_documentation Expertiza project documentation wiki]
#[https://relishapp.com/rspec Rspec Documentation]
#[http://visjs.org/docs/timeline/ Vis.js Documentation for Timeline]

CSC/ECE 517 Fall 2017/E1797 Timestamps for students submission

2017-12-02T06:47:38Z

Skatta3: /* Program Design */

==Introduction==

Expertiza is an open source project created using Ruby on Rails. Students can upload and submit their assignments and related work online for grading purposes.

===Existing System===

Currently, there exist various types of submissions that a student can make for an assignment for which timestamps are generated.
*When a student submits links or uploads files as submissions to an assignment in Expertiza, a timestamp is created for the date and time at which each of the submissions was done.
*The student may also be able to give reviews to other works for a particular assignment. These reviews when submitted also have an associated timestamp.
*There also exist timestamps for deadlines that have passed and that are upcoming for an assignment submission or a review to be done.
*For the reviews that a student receives for his work, the student can give feedback to each of the reviews. The submitted feedbacks also get timestamps.

Currenty there exists no functionality to view all these submissions and their timestamps in a single, aggregated way.

===Proposed System===

Our project was to solve this issue by creating a Visualization that helps the student view all the timestamps for his submissions. The goal is to create a Timeline that shows all the timestamps of submitted records and links to the submitted content wherever necessary. The default state of the timeline is a point on the x-axis set to the current date and time. The timeline is interactive and allows the user to zoom in and out to change the viewing scale of the timeline. The user can also scroll in the timeline to move the timeline forward or backward from the current time. After all of this is done, the user can reset the timeline to change his view to the default state.

With this, the student is able to view his entire submission history for an assignment in a convenient way.

==Problem Statement==

In Expertiza, it is possible for the instructor to view the submission records of a particular student. However, there is no way for students to check the history of their submission records. In this project, we are required to keep track of students’ activities and visualize them on their end by using a timeline chart.

<b>What needs to be visualized on the timeline:</b>

* Hyperlink submission record with timestamps
* File upload record with timestamps
* Due dates
*Visualization of Peer review of others works, which includes:
** A Review hyperlink that redirects to the review by clicking on it
** The Round number (To be displayed only if the assignment has multiple rounds)
** Timestamps
*Visualization of Author feedback on others review, which includes:
** A Feedback hyperlink that redirects to the feedback by clicking on it
** Timestamps

===Understanding Problem Statement===

The problem statement states the following issues that had to be resolved.

'''Issue-1:'''
Submission records with timestamps:

A student can submit their work for an assignment using "Your work" button in the respective assignment page. Students have two options to submit their work :
* Giving a hyperlink.
* Uploading a file.
As soon as the user submits any one of these, we needed to show hyperlink or file with the time-stamp on our visualization graph. Also, we needed to provide the submitted '''hyperlink or a link''' to the file on the visualization so that it will be easy for the user to navigate from a single page.

'''Issue-2:'''
Due dates:

There are different due dates for every assignment like Round-1 submission, Round-2 submission, Round-1 review and Round-2 review Due Dates. These are different from submission time stamps because a submission's timestamp depends upon the time at which the user had submitted the work whereas a due date is the deadline date fixed by an instructor. Visualizing them by adding them into the timeline, helps the student to track all due dates in a single graph.

'''Issue-3:'''
Peer Review other's work:

A student needs to review work of different teams during the course of the assignment. As of now in order to view the review, Expertiza requires the user to go to the "other's work" page in the assignment. Instead of this, we want this data to be viewed in our visualization graph. This issue includes a timestamp, link to view review, review round number to be shown in the graph.
'''Note:''' this review is the peer review '''given by this particular student''' to different teams as part of the assignment, '''not the reviews the student received.'''

'''Issue-4:'''
Author's feedback on other's Review
:
A student can give feedback for the review he/she received for a specific assignment. So this information also needs to be included in the graph. We need to show the timestamp and hyperlink to the feedback. It must be noted that the feedback here is not the feedback he got for review given by him/her but the feedback he/she gave for the reviews the had received.

==Program Design==

To visualize the timeline graphically we decided to use the vis.js JavaScript library. This library provides various interactive visualization charts (like graphs, networks, timelines, etc) to visualize data in real time. We chose to work on this library because when compared to other popular visualization libraries, vis.js provides the best possible representation of a timeline, one that meets the requirements of our project. To know more about how to make a timeline using vis.js, click [http://visjs.org/docs/timeline/ here].

The timeline contains a single horizontal axis that is divided into time intervals equally separated from each other.

Let us consider an example where a student makes several submissions to an assignment. The student uploads a hyperlink "https ://www.facebook.com" and an HTML file as submissions. The assignment has several deadlines or due dates. There are due dates for Round 1 and Round 2 submissions for this particular assignment. There are also review deadlines for each of the rounds for the assignment. The student can give a peer review to other students' work on the assignment. The student is able to give feedback to the peer reviews that he received. We have used color coding to differentiate between different kinds of things visualized on the timeline. We have used '''Orange''' color for a round's submission and review deadline and '''Green''' color for all hyperlink submissions, file submissions and '''cream''' color for feedback, peer review, team review and self review submissions.

So in summary, the following things have to be present on the timeline that are visualized as rectangular boxes on the timeline:
* The submission hyperlink box with the hyperlink
* The file upload box with a link to the uploaded file
* The Round 1 peer review deadline
* The Round 1 submission due date
* The Round 2 peer review deadline
* The Round 2 submission due date
* The Peer Review that the student gave to other students
* The feedback that the student gave to received reviews
* A self-feedback that the student gave to himself
* A team review that the student can give to his teammates
* Additionally, all the rectangular boxed have timestamps that display when the submission was made or the due date of that task

Apart from this, various buttons were also added to better interact with the timeline. These include:
* Zoom in - To zoom in by magnifying the viewing scale of the timeline
* Zoom out - To zoom out of the timeline
* Move Left - To move along the timeline's x-axis. The user can move forward by pressing the button
* Move Right - To move backward along the x-axis
* Recenter - A single vertical red line set to the current time on the x-axis indicates the current time at which the timeline is being viewed. Pressing this button helps the user to reset the zoom scale and the position of the x-axis in a way that the red line is at the center of the timeline.

We have added hyperlinks to enable quick access to the submitted content. For example, the rectangular box that shows the submitted file has a hyperlink that links to the contents of the file. Similarly, the reviews submitted by the student is linked by the hyperlink in the Peer review rectangular box on the timeline.

Finally, after obtaining all the data from the database and the inclusion of all the stated information above to visualizing it in the timeline, the result would be something like this:

[[File:S1.png]]

When the user selects a particular rectangular box on the timeline by clicking on it, then the line that connects the box to the timeline's x-axis becomes thicker and the color of the box also changes to '''White''' to indicate to the user the current box that is selected. If the user selects the file submission rectangular box (sample.html file), then the timeline would look like this:

[[File:S2.png]]

==Files Involved==

*app/controllers/submission_records_controller.rb
*app/models/submission_record.rb
*app/views/student_task/list.html.erb

==Database Tables Involved==

*submission_records
*response_map
*due_dates

==Implementation==

The code to embed the timeline into the webpage is as follows

< div id="visualization">
< div class="menu">
<input id="zoomIn" value="Zoom in" type="button">
<input id="zoomOut" value="Zoom out" type="button">
<input id="moveLeft" value="Move left" type="button">
<input id="moveRight" value="Move right" type="button">
<input id="Recenter" value="Recenter" type="button">
< /div>
< /div>
<script type="text/javascript">
// DOM element where the Timeline will be attached
var container = document.getElementById('visualization');
// Create a DataSet (allows two way data-binding)
var items = new vis.DataSet(visualization_JSON);
// Configuration for the Timeline
var options = {
zoomMin: 1000 * 60 * 60 * 24, // one day in milliseconds
zoomMax: 1000 * 60 * 60 * 24 * 31 * 12 // about three months in milliseconds
};
// Create a Timeline
var timeline = new vis.Timeline(container, items, options);
</script>

There are several buttons that were inserted into the timeline to allow the user to interact with the timeline. The code for that is

<script>
var visualization_window=timeline.range.getRange();
function move (percentage) {
var range = timeline.getWindow();
var interval = range.end - range.start;
timeline.setWindow({
start: range.start.valueOf() - interval * percentage,
end: range.end.valueOf() - interval * percentage
});
}
// attach events to the navigation buttons
// zoom percentage in zoomin/zoomout can be adjusted below by passing paramenter. Similar is the case for move left/right along the x-axis
document.getElementById('zoomIn').onclick = function () { timeline.zoomIn( 0.2); };
document.getElementById('zoomOut').onclick = function () { timeline.zoomOut( 0.2); };
document.getElementById('moveLeft').onclick = function () { move( 0.2); };
document.getElementById('moveRight').onclick = function () { move(-0.2); };
document.getElementById('Recenter').onclick = function () {
var visualization_window_start = new Date(visualization_window.start);
var visualization_window_end = new Date(visualization_window.end);
timeline.setWindow(visualization_window_start, visualization_window_end, { animation: true });
};
</script>

The functionality of each button is explained in the Program Design section above.

It is necessary to obtain data from the Expertiza database to JSON format so that it can be processed by the timeline for visualization. After collecting the data from the database, processing it and storing it into a ruby variable, we use the JSON.parse() function to convert that information into JSON objects. To maintain continuity, the process of obtaining data and preprocessing it is explained later in the wiki. The code to convert the variable contents into a JSON object is as follows:

<script>
// converting @visualization_data array to javascript compatible JSON object
var visualization_JSON = JSON.parse('<%=raw @visualization_data.to_json%>');
var href_JSON = JSON.parse('<%= @href_arr.to_json.html_safe%>')
var temp;
//temp is temporary variable used to generate hyperlinks from content
for(i=0; i<visualization_JSON.length; i++) {
temp=visualization_JSON[i].content.split("<split>");
if(href_JSON[i]=='')
visualization_JSON[i].content = temp[0]+"<br>"+temp.slice(1);
else
visualization_JSON[i].content = "<a href="+href_JSON[i]+" target='_blank'><b><u>"+temp[0]+"</u></b></a><br>"+temp.slice(1);
}
</script>

The following code is used to display due dates in the timeline. The types of due dates included are Round submission or Round review due date.

<% @href_arr= Array.new %>
<! -- @href_arr is used to store all the hyperlinks for each visualized object -->
<% @duedates = DueDate.where("parent_id = #{@assignment.id}")
@visualization_data = @duedates.map do |due|
@href_arr.push("");
if due.deadline_type_id.eql? 1
{ :id => due.id, :start=> due.due_at, :className => "submissionDue", :content => "Round "+(due.round.to_s)+"<split>Submission due by "+'<br>'+due.due_at.strftime("%m/%d/%Y at %I:%M %p") }
else
{ :id => due.id, :start=> due.due_at, :className => "reviewDue", :content => "Round "+(due.round.to_s)+"<split>Review due by "+'<br>'+due.due_at.strftime("%m/%d/%Y at %I:%M %p") }
end
end
%>

Then we need to add submission hyperlinks and files in the timeline. The code for that is

< ! -- display only if submissions are made-->
<% unless @team.nil?
@submissions = SubmissionRecord.find_by_sql"select * from submission_records where assignment_id=#{@assignment.id} and team_id=#{@team.id}
and content NOT IN (select content from submission_records where assignment_id=#{@assignment.id} and team_id=#{@team.id} and UPPER(operation) Like 'REMOVE%')"
@visualization_data += @submissions.map do |submission|
#display_directory_tree(participant, files, true).html_safe
if (submission.operation).eql?('Submit File')
file = submission.content
ret=""
if File.exist?(file) && File.directory?(file)
ret += link_to File.basename(file), :controller => 'submitted_content', :action => 'edit', :id => participant.id, "current_folder[name]" => file
else
ret += "\n "
ret += link_to File.basename(file), :controller => 'submitted_content',
:action => 'download',
:id => @participant.id,
:download => File.basename(file),
"current_folder[name]" => File.dirname(file)
end
@href_arr.push(ret.split('"')[1])
{ :id => submission.id, :start=> submission.created_at, :className=> "fileUpload", :content => (submission.content).split('/')[-1]+'<split>'+
submission.created_at.strftime("%m/%d/%Y at %I:%M %p") }
else
@href_arr.push(submission.content)
{ :id => submission.id, :start=> submission.created_at, :className=> "hyperlinkUpload" ,:content => submission.content+'<split>'+
submission.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
end
end %>

'''Explanation:''' The following code fetches submission records of a student for a particular assignment from the '''submission_records''' table. Then after checking if the submission exists and when the type is a file, a hyperlink to the file's location path is obtained and pushed into the JSON. The same is done for a submission with the type Hyperlink.

Then to get the peer reviews, self-reviews, feedback and team reviews, the following code is used.

<! -- Reviews not yet started -->
<% unless @review_mappings.nil?
@review_mappings.each do |review_mapping_iterator|
@response_values = Response.where(:map_id => review_mapping_iterator.id)
@visualization_data += @response_values.map do |response_value_iterator|
if review_mapping_iterator.type=="ReviewResponseMap"
review_mapping = ResponseMap.find(review_mapping_iterator.reviewed_object_id)
participant = AssignmentTeam.get_first_member(review_mapping_iterator.reviewee_id)
topic_id = SignedUpTeam.topic_id(participant.parent_id, participant.user_id)
if !topic_id.nil?
if SignUpTopic.find(topic_id).topic_identifier != ''
@topic_name=SignUpTopic.find(topic_id).topic_identifier+": "+SignUpTopic.find(topic_id).topic_name
else
@topic_name=SignUpTopic.find(topic_id).topic_name
end
end
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "review", :content => "Peer Review -
Round "+response_value_iterator.round.to_s+"<split> Review for: #{@topic_name}"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
elsif review_mapping_iterator.type=="SelfReviewResponseMap"
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "selfReview", :content => "Self Feedback -
Round "+response_value_iterator.round.to_s+"<split>Self Feedback"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
elsif review_mapping_iterator.type=="TeammateReviewResponseMap"
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
reviewee = ResponseMap.where(:reviewer_id => "#{review_mapping_iterator.reviewer_id}", :id =>"#{review_mapping_iterator.id}").pluck(:reviewee_id)
puts reviewee.to_s+" "+review_mapping_iterator.reviewer_id.to_s+" "+review_mapping_iterator.id.to_s
user_id = Participant.where(:id=> "#{reviewee[0]}").pluck(:user_id)
reviewee_name = User.where(:id=>"#{user_id[0]}").pluck(:name)
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "teamReview", :content => "Team Review -
Round "+response_value_iterator.round.to_s+"<split>Team review for #{reviewee_name[0]}"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
else
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "feedback", :content => "Feedback -
Round "+response_value_iterator.round.to_s+"<split>Feedback"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
end
end
end
end %>

==Test Plan==

Feature tests will be written to thoroughly test our modifications. A new file with the name <b>timestamps_for_students_submissions_spec.rb</b> file will be created in <b>spec/features</b> folder with various test cases to test the changes.

==Edge Cases==

'''Timeline behavior when the student opens the view page of a newly created assignment'''

* When the user has not made any submissions, reviews or feedbacks to reviews to the assignment, the timeline must only display the due dates of the assignment.

'''Timeline behavior when student has not joined any team and makes submissions'''

* When a student who is not part of any team makes a submission, he is assigned a team_ID by Expertiza and all submissions made by him are linked to that ID. So only those submissions will be displayed on the timeline.

'''Timeline behavior when the student joins a team, what happens to the submissions he made before joining the team'''

* When he joins a team and he receives a new team_ID, any submissions made hereafter will be made under the new team_ID and all previous submissions made by the student will not be shown on the timeline(this is how Expertiza assigns team_IDs and submissions- the same is reflected in 'your work' section of a user's profile). Only the user submissions made after he joins the team is shown on the timeline.

'''Timeline behavior when there is no name for a given assignment'''

* Sometimes assignments are not named. In the peer review submission rectangular box displayed on the timeline after the student submits a peer review, instead of showing the label "Review for [assignment name]", the label says "Review".

'''Timeline behavior when a submitted hyperlink is removed'''

* When a submitted hyperlink is removed, the submission must not be displayed on the timeline any more.

'''A submission must be made before a peer review can be given'''

* This condition holds even if the deadline has already passed.

==Future modifications==

We can also include icons that are embedded into the rectangles. They act as visual aids to help the user quickly recognize the category of the box. We propose a design that would look something like this:

[[File:S3.png]]

===References===

#[https://github.com/expertiza/expertiza Expertiza on GitHub]
#[http://expertiza.ncsu.edu/ The live Expertiza website]
#[http://wiki.expertiza.ncsu.edu/index.php/Expertiza_documentation Expertiza project documentation wiki]
#[https://relishapp.com/rspec Rspec Documentation]
#[http://visjs.org/docs/timeline/ Vis.js Documentation for Timeline]

CSC/ECE 517 Fall 2017/E1797 Timestamps for students submission

2017-12-02T06:46:14Z

Skatta3: /* Understanding Problem Statement */

==Introduction==

Expertiza is an open source project created using Ruby on Rails. Students can upload and submit their assignments and related work online for grading purposes.

===Existing System===

Currently, there exist various types of submissions that a student can make for an assignment for which timestamps are generated.
*When a student submits links or uploads files as submissions to an assignment in Expertiza, a timestamp is created for the date and time at which each of the submissions was done.
*The student may also be able to give reviews to other works for a particular assignment. These reviews when submitted also have an associated timestamp.
*There also exist timestamps for deadlines that have passed and that are upcoming for an assignment submission or a review to be done.
*For the reviews that a student receives for his work, the student can give feedback to each of the reviews. The submitted feedbacks also get timestamps.

Currenty there exists no functionality to view all these submissions and their timestamps in a single, aggregated way.

===Proposed System===

Our project was to solve this issue by creating a Visualization that helps the student view all the timestamps for his submissions. The goal is to create a Timeline that shows all the timestamps of submitted records and links to the submitted content wherever necessary. The default state of the timeline is a point on the x-axis set to the current date and time. The timeline is interactive and allows the user to zoom in and out to change the viewing scale of the timeline. The user can also scroll in the timeline to move the timeline forward or backward from the current time. After all of this is done, the user can reset the timeline to change his view to the default state.

With this, the student is able to view his entire submission history for an assignment in a convenient way.

==Problem Statement==

In Expertiza, it is possible for the instructor to view the submission records of a particular student. However, there is no way for students to check the history of their submission records. In this project, we are required to keep track of students’ activities and visualize them on their end by using a timeline chart.

<b>What needs to be visualized on the timeline:</b>

* Hyperlink submission record with timestamps
* File upload record with timestamps
* Due dates
*Visualization of Peer review of others works, which includes:
** A Review hyperlink that redirects to the review by clicking on it
** The Round number (To be displayed only if the assignment has multiple rounds)
** Timestamps
*Visualization of Author feedback on others review, which includes:
** A Feedback hyperlink that redirects to the feedback by clicking on it
** Timestamps

===Understanding Problem Statement===

The problem statement states the following issues that had to be resolved.

'''Issue-1:'''
Submission records with timestamps:

A student can submit their work for an assignment using "Your work" button in the respective assignment page. Students have two options to submit their work :
* Giving a hyperlink.
* Uploading a file.
As soon as the user submits any one of these, we needed to show hyperlink or file with the time-stamp on our visualization graph. Also, we needed to provide the submitted '''hyperlink or a link''' to the file on the visualization so that it will be easy for the user to navigate from a single page.

'''Issue-2:'''
Due dates:

There are different due dates for every assignment like Round-1 submission, Round-2 submission, Round-1 review and Round-2 review Due Dates. These are different from submission time stamps because a submission's timestamp depends upon the time at which the user had submitted the work whereas a due date is the deadline date fixed by an instructor. Visualizing them by adding them into the timeline, helps the student to track all due dates in a single graph.

'''Issue-3:'''
Peer Review other's work:

A student needs to review work of different teams during the course of the assignment. As of now in order to view the review, Expertiza requires the user to go to the "other's work" page in the assignment. Instead of this, we want this data to be viewed in our visualization graph. This issue includes a timestamp, link to view review, review round number to be shown in the graph.
'''Note:''' this review is the peer review '''given by this particular student''' to different teams as part of the assignment, '''not the reviews the student received.'''

'''Issue-4:'''
Author's feedback on other's Review
:
A student can give feedback for the review he/she received for a specific assignment. So this information also needs to be included in the graph. We need to show the timestamp and hyperlink to the feedback. It must be noted that the feedback here is not the feedback he got for review given by him/her but the feedback he/she gave for the reviews the had received.

==Program Design==

To visualize the timeline graphically we decided to use the vis.js JavaScript library. This library provides various interactive visualization charts (like graphs, networks, timelines, etc) to visualize data in real time. We chose to work on this library because when compared to other popular visualization libraries, vis.js provides the best possible representation of a timeline, one that meets the requirements of our project. To know more about how to make a timeline using vis.js, click [http://visjs.org/docs/timeline/ here].

The timeline contains a single horizontal axis that is divided into time intervals equally separated from each other.

Let us consider an example where a student makes several submissions to an assignment. The student uploads a hyperlink "https ://www.facebook.com" and an HTML file as submissions. The assignment has several deadlines or due dates. There are due dates for Round 1 and Round 2 submissions for this particular assignment. There are also review deadlines for each of the rounds for the assignment. The student can give a peer review to other students' work on the assignment. The student is able to give feedback to the peer reviews that he received. We have used color coding to differentiate between different kinds of things visualized on the timeline. We have used '''Orange''' color for a round's submission and review deadline and '''Green''' color for all hyperlink submissions, file submissions, feedback and peer review submissions.

So in summary, the following things have to be present on the timeline that are visualized as rectangular boxes on the timeline:
* The submission hyperlink box with the hyperlink
* The file upload box with a link to the uploaded file
* The Round 1 peer review deadline
* The Round 1 submission due date
* The Round 2 peer review deadline
* The Round 2 submission due date
* The Peer Review that the student gave to other students
* The feedback that the student gave to received reviews
* A self-feedback that the student gave to himself
* A team review that the student can give to his teammates
* Additionally, all the rectangular boxed have timestamps that display when the submission was made or the due date of that task

Apart from this, various buttons were also added to better interact with the timeline. These include:
* Zoom in - To zoom in by magnifying the viewing scale of the timeline
* Zoom out - To zoom out of the timeline
* Move Left - To move along the timeline's x-axis. The user can move forward by pressing the button
* Move Right - To move backward along the x-axis
* Recenter - A single vertical red line set to the current time on the x-axis indicates the current time at which the timeline is being viewed. Pressing this button helps the user to reset the zoom scale and the position of the x-axis in a way that the red line is at the center of the timeline.

We have added hyperlinks to enable quick access to the submitted content. For example, the rectangular box that shows the submitted file has a hyperlink that links to the contents of the file. Similarly, the reviews submitted by the student is linked by the hyperlink in the Peer review rectangular box on the timeline.

Finally, after obtaining all the data from the database and the inclusion of all the stated information above to visualizing it in the timeline, the result would be something like this:

[[File:S1.png]]

When the user selects a particular rectangular box on the timeline by clicking on it, then the line that connects the box to the timeline's x-axis becomes thicker and the color of the box also changes to '''White''' to indicate to the user the current box that is selected. If the user selects the file submission rectangular box (sample.html file), then the timeline would look like this:

[[File:S2.png]]

==Files Involved==

*app/controllers/submission_records_controller.rb
*app/models/submission_record.rb
*app/views/student_task/list.html.erb

==Database Tables Involved==

*submission_records
*response_map
*due_dates

==Implementation==

The code to embed the timeline into the webpage is as follows

< div id="visualization">
< div class="menu">
<input id="zoomIn" value="Zoom in" type="button">
<input id="zoomOut" value="Zoom out" type="button">
<input id="moveLeft" value="Move left" type="button">
<input id="moveRight" value="Move right" type="button">
<input id="Recenter" value="Recenter" type="button">
< /div>
< /div>
<script type="text/javascript">
// DOM element where the Timeline will be attached
var container = document.getElementById('visualization');
// Create a DataSet (allows two way data-binding)
var items = new vis.DataSet(visualization_JSON);
// Configuration for the Timeline
var options = {
zoomMin: 1000 * 60 * 60 * 24, // one day in milliseconds
zoomMax: 1000 * 60 * 60 * 24 * 31 * 12 // about three months in milliseconds
};
// Create a Timeline
var timeline = new vis.Timeline(container, items, options);
</script>

There are several buttons that were inserted into the timeline to allow the user to interact with the timeline. The code for that is

<script>
var visualization_window=timeline.range.getRange();
function move (percentage) {
var range = timeline.getWindow();
var interval = range.end - range.start;
timeline.setWindow({
start: range.start.valueOf() - interval * percentage,
end: range.end.valueOf() - interval * percentage
});
}
// attach events to the navigation buttons
// zoom percentage in zoomin/zoomout can be adjusted below by passing paramenter. Similar is the case for move left/right along the x-axis
document.getElementById('zoomIn').onclick = function () { timeline.zoomIn( 0.2); };
document.getElementById('zoomOut').onclick = function () { timeline.zoomOut( 0.2); };
document.getElementById('moveLeft').onclick = function () { move( 0.2); };
document.getElementById('moveRight').onclick = function () { move(-0.2); };
document.getElementById('Recenter').onclick = function () {
var visualization_window_start = new Date(visualization_window.start);
var visualization_window_end = new Date(visualization_window.end);
timeline.setWindow(visualization_window_start, visualization_window_end, { animation: true });
};
</script>

The functionality of each button is explained in the Program Design section above.

It is necessary to obtain data from the Expertiza database to JSON format so that it can be processed by the timeline for visualization. After collecting the data from the database, processing it and storing it into a ruby variable, we use the JSON.parse() function to convert that information into JSON objects. To maintain continuity, the process of obtaining data and preprocessing it is explained later in the wiki. The code to convert the variable contents into a JSON object is as follows:

<script>
// converting @visualization_data array to javascript compatible JSON object
var visualization_JSON = JSON.parse('<%=raw @visualization_data.to_json%>');
var href_JSON = JSON.parse('<%= @href_arr.to_json.html_safe%>')
var temp;
//temp is temporary variable used to generate hyperlinks from content
for(i=0; i<visualization_JSON.length; i++) {
temp=visualization_JSON[i].content.split("<split>");
if(href_JSON[i]=='')
visualization_JSON[i].content = temp[0]+"<br>"+temp.slice(1);
else
visualization_JSON[i].content = "<a href="+href_JSON[i]+" target='_blank'><b><u>"+temp[0]+"</u></b></a><br>"+temp.slice(1);
}
</script>

The following code is used to display due dates in the timeline. The types of due dates included are Round submission or Round review due date.

<% @href_arr= Array.new %>
<! -- @href_arr is used to store all the hyperlinks for each visualized object -->
<% @duedates = DueDate.where("parent_id = #{@assignment.id}")
@visualization_data = @duedates.map do |due|
@href_arr.push("");
if due.deadline_type_id.eql? 1
{ :id => due.id, :start=> due.due_at, :className => "submissionDue", :content => "Round "+(due.round.to_s)+"<split>Submission due by "+'<br>'+due.due_at.strftime("%m/%d/%Y at %I:%M %p") }
else
{ :id => due.id, :start=> due.due_at, :className => "reviewDue", :content => "Round "+(due.round.to_s)+"<split>Review due by "+'<br>'+due.due_at.strftime("%m/%d/%Y at %I:%M %p") }
end
end
%>

Then we need to add submission hyperlinks and files in the timeline. The code for that is

< ! -- display only if submissions are made-->
<% unless @team.nil?
@submissions = SubmissionRecord.find_by_sql"select * from submission_records where assignment_id=#{@assignment.id} and team_id=#{@team.id}
and content NOT IN (select content from submission_records where assignment_id=#{@assignment.id} and team_id=#{@team.id} and UPPER(operation) Like 'REMOVE%')"
@visualization_data += @submissions.map do |submission|
#display_directory_tree(participant, files, true).html_safe
if (submission.operation).eql?('Submit File')
file = submission.content
ret=""
if File.exist?(file) && File.directory?(file)
ret += link_to File.basename(file), :controller => 'submitted_content', :action => 'edit', :id => participant.id, "current_folder[name]" => file
else
ret += "\n "
ret += link_to File.basename(file), :controller => 'submitted_content',
:action => 'download',
:id => @participant.id,
:download => File.basename(file),
"current_folder[name]" => File.dirname(file)
end
@href_arr.push(ret.split('"')[1])
{ :id => submission.id, :start=> submission.created_at, :className=> "fileUpload", :content => (submission.content).split('/')[-1]+'<split>'+
submission.created_at.strftime("%m/%d/%Y at %I:%M %p") }
else
@href_arr.push(submission.content)
{ :id => submission.id, :start=> submission.created_at, :className=> "hyperlinkUpload" ,:content => submission.content+'<split>'+
submission.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
end
end %>

'''Explanation:''' The following code fetches submission records of a student for a particular assignment from the '''submission_records''' table. Then after checking if the submission exists and when the type is a file, a hyperlink to the file's location path is obtained and pushed into the JSON. The same is done for a submission with the type Hyperlink.

Then to get the peer reviews, self-reviews, feedback and team reviews, the following code is used.

<! -- Reviews not yet started -->
<% unless @review_mappings.nil?
@review_mappings.each do |review_mapping_iterator|
@response_values = Response.where(:map_id => review_mapping_iterator.id)
@visualization_data += @response_values.map do |response_value_iterator|
if review_mapping_iterator.type=="ReviewResponseMap"
review_mapping = ResponseMap.find(review_mapping_iterator.reviewed_object_id)
participant = AssignmentTeam.get_first_member(review_mapping_iterator.reviewee_id)
topic_id = SignedUpTeam.topic_id(participant.parent_id, participant.user_id)
if !topic_id.nil?
if SignUpTopic.find(topic_id).topic_identifier != ''
@topic_name=SignUpTopic.find(topic_id).topic_identifier+": "+SignUpTopic.find(topic_id).topic_name
else
@topic_name=SignUpTopic.find(topic_id).topic_name
end
end
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "review", :content => "Peer Review -
Round "+response_value_iterator.round.to_s+"<split> Review for: #{@topic_name}"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
elsif review_mapping_iterator.type=="SelfReviewResponseMap"
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "selfReview", :content => "Self Feedback -
Round "+response_value_iterator.round.to_s+"<split>Self Feedback"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
elsif review_mapping_iterator.type=="TeammateReviewResponseMap"
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
reviewee = ResponseMap.where(:reviewer_id => "#{review_mapping_iterator.reviewer_id}", :id =>"#{review_mapping_iterator.id}").pluck(:reviewee_id)
puts reviewee.to_s+" "+review_mapping_iterator.reviewer_id.to_s+" "+review_mapping_iterator.id.to_s
user_id = Participant.where(:id=> "#{reviewee[0]}").pluck(:user_id)
reviewee_name = User.where(:id=>"#{user_id[0]}").pluck(:name)
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "teamReview", :content => "Team Review -
Round "+response_value_iterator.round.to_s+"<split>Team review for #{reviewee_name[0]}"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
else
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "feedback", :content => "Feedback -
Round "+response_value_iterator.round.to_s+"<split>Feedback"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
end
end
end
end %>

==Test Plan==

Feature tests will be written to thoroughly test our modifications. A new file with the name <b>timestamps_for_students_submissions_spec.rb</b> file will be created in <b>spec/features</b> folder with various test cases to test the changes.

==Edge Cases==

'''Timeline behavior when the student opens the view page of a newly created assignment'''

* When the user has not made any submissions, reviews or feedbacks to reviews to the assignment, the timeline must only display the due dates of the assignment.

'''Timeline behavior when student has not joined any team and makes submissions'''

* When a student who is not part of any team makes a submission, he is assigned a team_ID by Expertiza and all submissions made by him are linked to that ID. So only those submissions will be displayed on the timeline.

'''Timeline behavior when the student joins a team, what happens to the submissions he made before joining the team'''

* When he joins a team and he receives a new team_ID, any submissions made hereafter will be made under the new team_ID and all previous submissions made by the student will not be shown on the timeline(this is how Expertiza assigns team_IDs and submissions- the same is reflected in 'your work' section of a user's profile). Only the user submissions made after he joins the team is shown on the timeline.

'''Timeline behavior when there is no name for a given assignment'''

* Sometimes assignments are not named. In the peer review submission rectangular box displayed on the timeline after the student submits a peer review, instead of showing the label "Review for [assignment name]", the label says "Review".

'''Timeline behavior when a submitted hyperlink is removed'''

* When a submitted hyperlink is removed, the submission must not be displayed on the timeline any more.

'''A submission must be made before a peer review can be given'''

* This condition holds even if the deadline has already passed.

==Future modifications==

We can also include icons that are embedded into the rectangles. They act as visual aids to help the user quickly recognize the category of the box. We propose a design that would look something like this:

[[File:S3.png]]

===References===

#[https://github.com/expertiza/expertiza Expertiza on GitHub]
#[http://expertiza.ncsu.edu/ The live Expertiza website]
#[http://wiki.expertiza.ncsu.edu/index.php/Expertiza_documentation Expertiza project documentation wiki]
#[https://relishapp.com/rspec Rspec Documentation]
#[http://visjs.org/docs/timeline/ Vis.js Documentation for Timeline]

CSC/ECE 517 Fall 2017/E1797 Timestamps for students submission

2017-12-02T06:35:10Z

Skatta3:

==Introduction==

Expertiza is an open source project created using Ruby on Rails. Students can upload and submit their assignments and related work online for grading purposes.

===Existing System===

Currently, there exist various types of submissions that a student can make for an assignment for which timestamps are generated.
*When a student submits links or uploads files as submissions to an assignment in Expertiza, a timestamp is created for the date and time at which each of the submissions was done.
*The student may also be able to give reviews to other works for a particular assignment. These reviews when submitted also have an associated timestamp.
*There also exist timestamps for deadlines that have passed and that are upcoming for an assignment submission or a review to be done.
*For the reviews that a student receives for his work, the student can give feedback to each of the reviews. The submitted feedbacks also get timestamps.

Currenty there exists no functionality to view all these submissions and their timestamps in a single, aggregated way.

===Proposed System===

Our project was to solve this issue by creating a Visualization that helps the student view all the timestamps for his submissions. The goal is to create a Timeline that shows all the timestamps of submitted records and links to the submitted content wherever necessary. The default state of the timeline is a point on the x-axis set to the current date and time. The timeline is interactive and allows the user to zoom in and out to change the viewing scale of the timeline. The user can also scroll in the timeline to move the timeline forward or backward from the current time. After all of this is done, the user can reset the timeline to change his view to the default state.

With this, the student is able to view his entire submission history for an assignment in a convenient way.

==Problem Statement==

In Expertiza, it is possible for the instructor to view the submission records of a particular student. However, there is no way for students to check the history of their submission records. In this project, we are required to keep track of students’ activities and visualize them on their end by using a timeline chart.

<b>What needs to be visualized on the timeline:</b>

* Hyperlink submission record with timestamps
* File upload record with timestamps
* Due dates
*Visualization of Peer review of others works, which includes:
** A Review hyperlink that redirects to the review by clicking on it
** The Round number (To be displayed only if the assignment has multiple rounds)
** Timestamps
*Visualization of Author feedback on others review, which includes:
** A Feedback hyperlink that redirects to the feedback by clicking on it
** Timestamps

===Understanding Problem Statement===

The problem statement states the following issues that had to be resolved.

'''Issue-1:'''
Submission records with timestamps:

A student can submit their work for an assignment using "Your work" button in the respective assignment page. Students have two options to submit their work :
* Giving a hyperlink.
* Uploading a file.
As soon as the user submits any one of these, we needed to show hyperlink or file with the time-stamp on our visualization graph. Also, we needed to show the submitted hyperlink or a link to the file on the visualization so that it will be easy for the user to navigate from a single page.

'''Issue-2:'''
Due dates:

There are different due dates for every assignment like Round-1 submission, Round-2 submission, Round-1 review and Round-2 review Due Dates. These are different from submission time stamps because a submission's timestamp depends upon the time at which the user had submitted the work whereas a due date is the deadline date fixed by an instructor. Visualizing them by adding them into the timeline, helps the student to track all due dates in a single graph.

'''Issue-3:'''
Peer Review other's work:

A student needs to review work of different teams during the course of the assignment. As of now in order to view the review, Expertiza requires the user to go to the "other's work" page in the assignment. Instead of this, we want this data to be viewed in our visualization graph. This issue includes a timestamp, link to view review, review round number to be shown in the graph. One important point to note is that this review is the review given by this particular student to different teams as part of the assignment, not the review that the student got.

'''Issue-4:'''
Author's feedback on other's Review
:
A student can give feedback for the review he/she received for a specific assignment. So this information also needs to be included in the graph. We need to show the timestamp and hyperlink to the feedback. It must be noted that the feedback here is not the feedback he got for review given by him/her but the feedback he/she gave for the reviews the had received.

==Program Design==

To visualize the timeline graphically we decided to use the vis.js JavaScript library. This library provides various interactive visualization charts (like graphs, networks, timelines, etc) to visualize data in real time. We chose to work on this library because when compared to other popular visualization libraries, vis.js provides the best possible representation of a timeline, one that meets the requirements of our project. To know more about how to make a timeline using vis.js, click [http://visjs.org/docs/timeline/ here].

The timeline contains a single horizontal axis that is divided into time intervals equally separated from each other.

Let us consider an example where a student makes several submissions to an assignment. The student uploads a hyperlink "https ://www.facebook.com" and an HTML file as submissions. The assignment has several deadlines or due dates. There are due dates for Round 1 and Round 2 submissions for this particular assignment. There are also review deadlines for each of the rounds for the assignment. The student can give a peer review to other students' work on the assignment. The student is able to give feedback to the peer reviews that he received. We have used color coding to differentiate between different kinds of things visualized on the timeline. We have used '''Orange''' color for a round's submission and review deadline and '''Green''' color for all hyperlink submissions, file submissions, feedback and peer review submissions.

So in summary, the following things have to be present on the timeline that are visualized as rectangular boxes on the timeline:
* The submission hyperlink box with the hyperlink
* The file upload box with a link to the uploaded file
* The Round 1 peer review deadline
* The Round 1 submission due date
* The Round 2 peer review deadline
* The Round 2 submission due date
* The Peer Review that the student gave to other students
* The feedback that the student gave to received reviews
* A self-feedback that the student gave to himself
* A team review that the student can give to his teammates
* Additionally, all the rectangular boxed have timestamps that display when the submission was made or the due date of that task

Apart from this, various buttons were also added to better interact with the timeline. These include:
* Zoom in - To zoom in by magnifying the viewing scale of the timeline
* Zoom out - To zoom out of the timeline
* Move Left - To move along the timeline's x-axis. The user can move forward by pressing the button
* Move Right - To move backward along the x-axis
* Recenter - A single vertical red line set to the current time on the x-axis indicates the current time at which the timeline is being viewed. Pressing this button helps the user to reset the zoom scale and the position of the x-axis in a way that the red line is at the center of the timeline.

We have added hyperlinks to enable quick access to the submitted content. For example, the rectangular box that shows the submitted file has a hyperlink that links to the contents of the file. Similarly, the reviews submitted by the student is linked by the hyperlink in the Peer review rectangular box on the timeline.

Finally, after obtaining all the data from the database and the inclusion of all the stated information above to visualizing it in the timeline, the result would be something like this:

[[File:S1.png]]

When the user selects a particular rectangular box on the timeline by clicking on it, then the line that connects the box to the timeline's x-axis becomes thicker and the color of the box also changes to '''White''' to indicate to the user the current box that is selected. If the user selects the file submission rectangular box (sample.html file), then the timeline would look like this:

[[File:S2.png]]

==Files Involved==

*app/controllers/submission_records_controller.rb
*app/models/submission_record.rb
*app/views/student_task/list.html.erb

==Database Tables Involved==

*submission_records
*response_map
*due_dates

==Implementation==

The code to embed the timeline into the webpage is as follows

< div id="visualization">
< div class="menu">
<input id="zoomIn" value="Zoom in" type="button">
<input id="zoomOut" value="Zoom out" type="button">
<input id="moveLeft" value="Move left" type="button">
<input id="moveRight" value="Move right" type="button">
<input id="Recenter" value="Recenter" type="button">
< /div>
< /div>
<script type="text/javascript">
// DOM element where the Timeline will be attached
var container = document.getElementById('visualization');
// Create a DataSet (allows two way data-binding)
var items = new vis.DataSet(visualization_JSON);
// Configuration for the Timeline
var options = {
zoomMin: 1000 * 60 * 60 * 24, // one day in milliseconds
zoomMax: 1000 * 60 * 60 * 24 * 31 * 12 // about three months in milliseconds
};
// Create a Timeline
var timeline = new vis.Timeline(container, items, options);
</script>

There are several buttons that were inserted into the timeline to allow the user to interact with the timeline. The code for that is

<script>
var visualization_window=timeline.range.getRange();
function move (percentage) {
var range = timeline.getWindow();
var interval = range.end - range.start;
timeline.setWindow({
start: range.start.valueOf() - interval * percentage,
end: range.end.valueOf() - interval * percentage
});
}
// attach events to the navigation buttons
// zoom percentage in zoomin/zoomout can be adjusted below by passing paramenter. Similar is the case for move left/right along the x-axis
document.getElementById('zoomIn').onclick = function () { timeline.zoomIn( 0.2); };
document.getElementById('zoomOut').onclick = function () { timeline.zoomOut( 0.2); };
document.getElementById('moveLeft').onclick = function () { move( 0.2); };
document.getElementById('moveRight').onclick = function () { move(-0.2); };
document.getElementById('Recenter').onclick = function () {
var visualization_window_start = new Date(visualization_window.start);
var visualization_window_end = new Date(visualization_window.end);
timeline.setWindow(visualization_window_start, visualization_window_end, { animation: true });
};
</script>

The functionality of each button is explained in the Program Design section above.

It is necessary to obtain data from the Expertiza database to JSON format so that it can be processed by the timeline for visualization. After collecting the data from the database, processing it and storing it into a ruby variable, we use the JSON.parse() function to convert that information into JSON objects. To maintain continuity, the process of obtaining data and preprocessing it is explained later in the wiki. The code to convert the variable contents into a JSON object is as follows:

<script>
// converting @visualization_data array to javascript compatible JSON object
var visualization_JSON = JSON.parse('<%=raw @visualization_data.to_json%>');
var href_JSON = JSON.parse('<%= @href_arr.to_json.html_safe%>')
var temp;
//temp is temporary variable used to generate hyperlinks from content
for(i=0; i<visualization_JSON.length; i++) {
temp=visualization_JSON[i].content.split("<split>");
if(href_JSON[i]=='')
visualization_JSON[i].content = temp[0]+"<br>"+temp.slice(1);
else
visualization_JSON[i].content = "<a href="+href_JSON[i]+" target='_blank'><b><u>"+temp[0]+"</u></b></a><br>"+temp.slice(1);
}
</script>

The following code is used to display due dates in the timeline. The types of due dates included are Round submission or Round review due date.

<% @href_arr= Array.new %>
<! -- @href_arr is used to store all the hyperlinks for each visualized object -->
<% @duedates = DueDate.where("parent_id = #{@assignment.id}")
@visualization_data = @duedates.map do |due|
@href_arr.push("");
if due.deadline_type_id.eql? 1
{ :id => due.id, :start=> due.due_at, :className => "submissionDue", :content => "Round "+(due.round.to_s)+"<split>Submission due by "+'<br>'+due.due_at.strftime("%m/%d/%Y at %I:%M %p") }
else
{ :id => due.id, :start=> due.due_at, :className => "reviewDue", :content => "Round "+(due.round.to_s)+"<split>Review due by "+'<br>'+due.due_at.strftime("%m/%d/%Y at %I:%M %p") }
end
end
%>

Then we need to add submission hyperlinks and files in the timeline. The code for that is

< ! -- display only if submissions are made-->
<% unless @team.nil?
@submissions = SubmissionRecord.find_by_sql"select * from submission_records where assignment_id=#{@assignment.id} and team_id=#{@team.id}
and content NOT IN (select content from submission_records where assignment_id=#{@assignment.id} and team_id=#{@team.id} and UPPER(operation) Like 'REMOVE%')"
@visualization_data += @submissions.map do |submission|
#display_directory_tree(participant, files, true).html_safe
if (submission.operation).eql?('Submit File')
file = submission.content
ret=""
if File.exist?(file) && File.directory?(file)
ret += link_to File.basename(file), :controller => 'submitted_content', :action => 'edit', :id => participant.id, "current_folder[name]" => file
else
ret += "\n "
ret += link_to File.basename(file), :controller => 'submitted_content',
:action => 'download',
:id => @participant.id,
:download => File.basename(file),
"current_folder[name]" => File.dirname(file)
end
@href_arr.push(ret.split('"')[1])
{ :id => submission.id, :start=> submission.created_at, :className=> "fileUpload", :content => (submission.content).split('/')[-1]+'<split>'+
submission.created_at.strftime("%m/%d/%Y at %I:%M %p") }
else
@href_arr.push(submission.content)
{ :id => submission.id, :start=> submission.created_at, :className=> "hyperlinkUpload" ,:content => submission.content+'<split>'+
submission.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
end
end %>

'''Explanation:''' The following code fetches submission records of a student for a particular assignment from the '''submission_records''' table. Then after checking if the submission exists and when the type is a file, a hyperlink to the file's location path is obtained and pushed into the JSON. The same is done for a submission with the type Hyperlink.

Then to get the peer reviews, self-reviews, feedback and team reviews, the following code is used.

<! -- Reviews not yet started -->
<% unless @review_mappings.nil?
@review_mappings.each do |review_mapping_iterator|
@response_values = Response.where(:map_id => review_mapping_iterator.id)
@visualization_data += @response_values.map do |response_value_iterator|
if review_mapping_iterator.type=="ReviewResponseMap"
review_mapping = ResponseMap.find(review_mapping_iterator.reviewed_object_id)
participant = AssignmentTeam.get_first_member(review_mapping_iterator.reviewee_id)
topic_id = SignedUpTeam.topic_id(participant.parent_id, participant.user_id)
if !topic_id.nil?
if SignUpTopic.find(topic_id).topic_identifier != ''
@topic_name=SignUpTopic.find(topic_id).topic_identifier+": "+SignUpTopic.find(topic_id).topic_name
else
@topic_name=SignUpTopic.find(topic_id).topic_name
end
end
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "review", :content => "Peer Review -
Round "+response_value_iterator.round.to_s+"<split> Review for: #{@topic_name}"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
elsif review_mapping_iterator.type=="SelfReviewResponseMap"
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "selfReview", :content => "Self Feedback -
Round "+response_value_iterator.round.to_s+"<split>Self Feedback"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
elsif review_mapping_iterator.type=="TeammateReviewResponseMap"
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
reviewee = ResponseMap.where(:reviewer_id => "#{review_mapping_iterator.reviewer_id}", :id =>"#{review_mapping_iterator.id}").pluck(:reviewee_id)
puts reviewee.to_s+" "+review_mapping_iterator.reviewer_id.to_s+" "+review_mapping_iterator.id.to_s
user_id = Participant.where(:id=> "#{reviewee[0]}").pluck(:user_id)
reviewee_name = User.where(:id=>"#{user_id[0]}").pluck(:name)
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "teamReview", :content => "Team Review -
Round "+response_value_iterator.round.to_s+"<split>Team review for #{reviewee_name[0]}"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
else
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "feedback", :content => "Feedback -
Round "+response_value_iterator.round.to_s+"<split>Feedback"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
end
end
end
end %>

==Test Plan==

Feature tests will be written to thoroughly test our modifications. A new file with the name <b>timestamps_for_students_submissions_spec.rb</b> file will be created in <b>spec/features</b> folder with various test cases to test the changes.

==Edge Cases==

'''Timeline behavior when the student opens the view page of a newly created assignment'''

* When the user has not made any submissions, reviews or feedbacks to reviews to the assignment, the timeline must only display the due dates of the assignment.

'''Timeline behavior when student has not joined any team and makes submissions'''

* When a student who is not part of any team makes a submission, he is assigned a team_ID by Expertiza and all submissions made by him are linked to that ID. So only those submissions will be displayed on the timeline.

'''Timeline behavior when the student joins a team, what happens to the submissions he made before joining the team'''

* When he joins a team and he receives a new team_ID, any submissions made hereafter will be made under the new team_ID and all previous submissions made by the student will not be shown on the timeline(this is how Expertiza assigns team_IDs and submissions- the same is reflected in 'your work' section of a user's profile). Only the user submissions made after he joins the team is shown on the timeline.

'''Timeline behavior when there is no name for a given assignment'''

* Sometimes assignments are not named. In the peer review submission rectangular box displayed on the timeline after the student submits a peer review, instead of showing the label "Review for [assignment name]", the label says "Review".

'''Timeline behavior when a submitted hyperlink is removed'''

* When a submitted hyperlink is removed, the submission must not be displayed on the timeline any more.

'''A submission must be made before a peer review can be given'''

* This condition holds even if the deadline has already passed.

==Future modifications==

We can also include icons that are embedded into the rectangles. They act as visual aids to help the user quickly recognize the category of the box. We propose a design that would look something like this:

[[File:S3.png]]

===References===

#[https://github.com/expertiza/expertiza Expertiza on GitHub]
#[http://expertiza.ncsu.edu/ The live Expertiza website]
#[http://wiki.expertiza.ncsu.edu/index.php/Expertiza_documentation Expertiza project documentation wiki]
#[https://relishapp.com/rspec Rspec Documentation]
#[http://visjs.org/docs/timeline/ Vis.js Documentation for Timeline]

CSC/ECE 517 Fall 2017/E1797 Timestamps for students submission

2017-12-02T06:34:13Z

Skatta3: /* Future modifications */

==Introduction==

Expertiza is an open source project created using Ruby on Rails. Students can upload and submit their assignments and related work online for grading purposes.

===Existing System===

Currently, there exist various types of submissions that a student can make for an assignment for which timestamps are generated.
*When a student submits links or uploads files as submissions to an assignment in Expertiza, a timestamp is created for the date and time at which each of the submissions was done.
*The student may also be able to give reviews to other works for a particular assignment. These reviews when submitted also have an associated timestamp.
*There also exist timestamps for deadlines that have passed and that are upcoming for an assignment submission or a review to be done.
*For the reviews that a student receives for his work, the student can give feedback to each of the reviews. The submitted feedbacks also get timestamps.

Currenty there exists no functionality to view all these submissions and their timestamps in a single, aggregated way.

===Proposed System===

Our project was to solve this issue by creating a Visualization that helps the student view all the timestamps for his submissions. The goal is to create a Timeline that shows all the timestamps of submitted records and links to the submitted content wherever necessary. The default state of the timeline is a point on the x-axis set to the current date and time. The timeline is interactive and allows the user to zoom in and out to change the viewing scale of the timeline. The user can also scroll in the timeline to move the timeline forward or backward from the current time. After all of this is done, the user can reset the timeline to change his view to the default state.

With this, the student is able to view his entire submission history for an assignment in a convenient way.

==Problem Statement==

In Expertiza, it is possible for the instructor to view the submission records of a particular student. However, there is no way for students to check the history of their submission records. In this project, we are required to keep track of students’ activities and visualize them on their end by using a timeline chart.

<b>What needs to be visualized on the timeline:</b>

* Hyperlink submission record with timestamps
* File upload record with timestamps
* Due dates
*Visualization of Peer review of others works, which includes:
** A Review hyperlink that redirects to the review by clicking on it
** The Round number (To be displayed only if the assignment has multiple rounds)
** Timestamps
*Visualization of Author feedback on others review, which includes:
** A Feedback hyperlink that redirects to the feedback by clicking on it
** Timestamps

===Understanding Problem Statement===

The problem statement states the following issues that had to be resolved.

'''Issue-1:'''
Submission records with timestamps:

A student can submit their work for an assignment using "Your work" button in the respective assignment page. Students have two options to submit their work :
* Giving a hyperlink.
* Uploading a file.
As soon as the user submits any one of these, we needed to show hyperlink or file with the time-stamp on our visualization graph. Also, we needed to show the submitted hyperlink or a link to the file on the visualization so that it will be easy for the user to navigate from a single page.

'''Issue-2:'''
Due dates:

There are different due dates for every assignment like Round-1 submission, Round-2 submission, Round-1 review and Round-2 review Due Dates. These are different from submission time stamps because a submission's timestamp depends upon the time at which the user had submitted the work whereas a due date is the deadline date fixed by an instructor. Visualizing them by adding them into the timeline, helps the student to track all due dates in a single graph.

'''Issue-3:'''
Peer Review other's work:

A student needs to review work of different teams during the course of the assignment. As of now in order to view the review, Expertiza requires the user to go to the "other's work" page in the assignment. Instead of this, we want this data to be viewed in our visualization graph. This issue includes a timestamp, link to view review, review round number to be shown in the graph. One important point to note is that this review is the review given by this particular student to different teams as part of the assignment, not the review that the student got.

'''Issue-4:'''
Author's feedback on other's Review
:
A student can give feedback for the review he/she received for a specific assignment. So this information also needs to be included in the graph. We need to show the timestamp and hyperlink to the feedback. It must be noted that the feedback here is not the feedback he got for review given by him/her but the feedback he/she gave for the reviews the had received.

==Program Design==

To visualize the timeline graphically we decided to use the vis.js JavaScript library. This library provides various interactive visualization charts (like graphs, networks, timelines, etc) to visualize data in real time. We chose to work on this library because when compared to other popular visualization libraries, vis.js provides the best possible representation of a timeline, one that meets the requirements of our project. To know more about how to make a timeline using vis.js, click [http://visjs.org/docs/timeline/ here].

The timeline contains a single horizontal axis that is divided into time intervals equally separated from each other.

Let us consider an example where a student makes several submissions to an assignment. The student uploads a hyperlink "https ://www.facebook.com" and an HTML file as submissions. The assignment has several deadlines or due dates. There are due dates for Round 1 and Round 2 submissions for this particular assignment. There are also review deadlines for each of the rounds for the assignment. The student can give a peer review to other students' work on the assignment. The student is able to give feedback to the peer reviews that he received. We have used color coding to differentiate between different kinds of things visualized on the timeline. We have used '''Orange''' color for a round's submission and review deadline and '''Green''' color for all hyperlink submissions, file submissions, feedback and peer review submissions.

So in summary, the following things have to be present on the timeline that are visualized as rectangular boxes on the timeline:
* The submission hyperlink box with the hyperlink
* The file upload box with a link to the uploaded file
* The Round 1 peer review deadline
* The Round 1 submission due date
* The Round 2 peer review deadline
* The Round 2 submission due date
* The Peer Review that the student gave to other students
* The feedback that the student gave to received reviews
* A self-feedback that the student gave to himself
* A team review that the student can give to his teammates
* Additionally, all the rectangular boxed have timestamps that display when the submission was made or the due date of that task

Apart from this, various buttons were also added to better interact with the timeline. These include:
* Zoom in - To zoom in by magnifying the viewing scale of the timeline
* Zoom out - To zoom out of the timeline
* Move Left - To move along the timeline's x-axis. The user can move forward by pressing the button
* Move Right - To move backward along the x-axis
* Recenter - A single vertical red line set to the current time on the x-axis indicates the current time at which the timeline is being viewed. Pressing this button helps the user to reset the zoom scale and the position of the x-axis in a way that the red line is at the center of the timeline.

We have added hyperlinks to enable quick access to the submitted content. For example, the rectangular box that shows the submitted file has a hyperlink that links to the contents of the file. Similarly, the reviews submitted by the student is linked by the hyperlink in the Peer review rectangular box on the timeline.

Finally, after obtaining all the data from the database and the inclusion of all the stated information above to visualizing it in the timeline, the result would be something like this:

[[File:S1.png]]

When the user selects a particular rectangular box on the timeline by clicking on it, then the line that connects the box to the timeline's x-axis becomes thicker and the color of the box also changes to '''White''' to indicate to the user the current box that is selected. If the user selects the file submission rectangular box (sample.html file), then the timeline would look like this:

[[File:S2.png]]

==Files Involved==

*app/controllers/submission_records_controller.rb
*app/models/submission_record.rb
*app/views/student_task/list.html.erb

==Database Tables Involved==

*submission_records
*response_map
*due_dates

==Implementation==

The code to embed the timeline into the webpage is as follows

< div id="visualization">
< div class="menu">
<input id="zoomIn" value="Zoom in" type="button">
<input id="zoomOut" value="Zoom out" type="button">
<input id="moveLeft" value="Move left" type="button">
<input id="moveRight" value="Move right" type="button">
<input id="Recenter" value="Recenter" type="button">
< /div>
< /div>
<script type="text/javascript">
// DOM element where the Timeline will be attached
var container = document.getElementById('visualization');
// Create a DataSet (allows two way data-binding)
var items = new vis.DataSet(visualization_JSON);
// Configuration for the Timeline
var options = {
zoomMin: 1000 * 60 * 60 * 24, // one day in milliseconds
zoomMax: 1000 * 60 * 60 * 24 * 31 * 12 // about three months in milliseconds
};
// Create a Timeline
var timeline = new vis.Timeline(container, items, options);
</script>

There are several buttons that were inserted into the timeline to allow the user to interact with the timeline. The code for that is

<script>
var visualization_window=timeline.range.getRange();
function move (percentage) {
var range = timeline.getWindow();
var interval = range.end - range.start;
timeline.setWindow({
start: range.start.valueOf() - interval * percentage,
end: range.end.valueOf() - interval * percentage
});
}
// attach events to the navigation buttons
// zoom percentage in zoomin/zoomout can be adjusted below by passing paramenter. Similar is the case for move left/right along the x-axis
document.getElementById('zoomIn').onclick = function () { timeline.zoomIn( 0.2); };
document.getElementById('zoomOut').onclick = function () { timeline.zoomOut( 0.2); };
document.getElementById('moveLeft').onclick = function () { move( 0.2); };
document.getElementById('moveRight').onclick = function () { move(-0.2); };
document.getElementById('Recenter').onclick = function () {
var visualization_window_start = new Date(visualization_window.start);
var visualization_window_end = new Date(visualization_window.end);
timeline.setWindow(visualization_window_start, visualization_window_end, { animation: true });
};
</script>

The functionality of each button is explained in the Program Design section above.

It is necessary to obtain data from the Expertiza database to JSON format so that it can be processed by the timeline for visualization. After collecting the data from the database, processing it and storing it into a ruby variable, we use the JSON.parse() function to convert that information into JSON objects. To maintain continuity, the process of obtaining data and preprocessing it is explained later in the wiki. The code to convert the variable contents into a JSON object is as follows:

<script>
// converting @visualization_data array to javascript compatible JSON object
var visualization_JSON = JSON.parse('<%=raw @visualization_data.to_json%>');
var href_JSON = JSON.parse('<%= @href_arr.to_json.html_safe%>')
var temp;
//temp is temporary variable used to generate hyperlinks from content
for(i=0; i<visualization_JSON.length; i++) {
temp=visualization_JSON[i].content.split("<split>");
if(href_JSON[i]=='')
visualization_JSON[i].content = temp[0]+"<br>"+temp.slice(1);
else
visualization_JSON[i].content = "<a href="+href_JSON[i]+" target='_blank'><b><u>"+temp[0]+"</u></b></a><br>"+temp.slice(1);
}
</script>

The following code is used to display due dates in the timeline. The types of due dates included are Round submission or Round review due date.

<% @href_arr= Array.new %>
<! -- @href_arr is used to store all the hyperlinks for each visualized object -->
<% @duedates = DueDate.where("parent_id = #{@assignment.id}")
@visualization_data = @duedates.map do |due|
@href_arr.push("");
if due.deadline_type_id.eql? 1
{ :id => due.id, :start=> due.due_at, :className => "submissionDue", :content => "Round "+(due.round.to_s)+"<split>Submission due by "+'<br>'+due.due_at.strftime("%m/%d/%Y at %I:%M %p") }
else
{ :id => due.id, :start=> due.due_at, :className => "reviewDue", :content => "Round "+(due.round.to_s)+"<split>Review due by "+'<br>'+due.due_at.strftime("%m/%d/%Y at %I:%M %p") }
end
end
%>

Then we need to add submission hyperlinks and files in the timeline. The code for that is

< ! -- display only if submissions are made-->
<% unless @team.nil?
@submissions = SubmissionRecord.find_by_sql"select * from submission_records where assignment_id=#{@assignment.id} and team_id=#{@team.id}
and content NOT IN (select content from submission_records where assignment_id=#{@assignment.id} and team_id=#{@team.id} and UPPER(operation) Like 'REMOVE%')"
@visualization_data += @submissions.map do |submission|
#display_directory_tree(participant, files, true).html_safe
if (submission.operation).eql?('Submit File')
file = submission.content
ret=""
if File.exist?(file) && File.directory?(file)
ret += link_to File.basename(file), :controller => 'submitted_content', :action => 'edit', :id => participant.id, "current_folder[name]" => file
else
ret += "\n "
ret += link_to File.basename(file), :controller => 'submitted_content',
:action => 'download',
:id => @participant.id,
:download => File.basename(file),
"current_folder[name]" => File.dirname(file)
end
@href_arr.push(ret.split('"')[1])
{ :id => submission.id, :start=> submission.created_at, :className=> "fileUpload", :content => (submission.content).split('/')[-1]+'<split>'+
submission.created_at.strftime("%m/%d/%Y at %I:%M %p") }
else
@href_arr.push(submission.content)
{ :id => submission.id, :start=> submission.created_at, :className=> "hyperlinkUpload" ,:content => submission.content+'<split>'+
submission.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
end
end %>

'''Explanation:''' The following code fetches submission records of a student for a particular assignment from the '''submission_records''' table. Then after checking if the submission exists and when the type is a file, a hyperlink to the file's location path is obtained and pushed into the JSON. The same is done for a submission with the type Hyperlink.

Then to get the peer reviews, self-reviews, feedback and team reviews, the following code is used.

<! -- Reviews not yet started -->
<% unless @review_mappings.nil?
@review_mappings.each do |review_mapping_iterator|
@response_values = Response.where(:map_id => review_mapping_iterator.id)
@visualization_data += @response_values.map do |response_value_iterator|
if review_mapping_iterator.type=="ReviewResponseMap"
review_mapping = ResponseMap.find(review_mapping_iterator.reviewed_object_id)
participant = AssignmentTeam.get_first_member(review_mapping_iterator.reviewee_id)
topic_id = SignedUpTeam.topic_id(participant.parent_id, participant.user_id)
if !topic_id.nil?
if SignUpTopic.find(topic_id).topic_identifier != ''
@topic_name=SignUpTopic.find(topic_id).topic_identifier+": "+SignUpTopic.find(topic_id).topic_name
else
@topic_name=SignUpTopic.find(topic_id).topic_name
end
end
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "review", :content => "Peer Review -
Round "+response_value_iterator.round.to_s+"<split> Review for: #{@topic_name}"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
elsif review_mapping_iterator.type=="SelfReviewResponseMap"
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "selfReview", :content => "Self Feedback -
Round "+response_value_iterator.round.to_s+"<split>Self Feedback"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
elsif review_mapping_iterator.type=="TeammateReviewResponseMap"
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
reviewee = ResponseMap.where(:reviewer_id => "#{review_mapping_iterator.reviewer_id}", :id =>"#{review_mapping_iterator.id}").pluck(:reviewee_id)
puts reviewee.to_s+" "+review_mapping_iterator.reviewer_id.to_s+" "+review_mapping_iterator.id.to_s
user_id = Participant.where(:id=> "#{reviewee[0]}").pluck(:user_id)
reviewee_name = User.where(:id=>"#{user_id[0]}").pluck(:name)
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "teamReview", :content => "Team Review -
Round "+response_value_iterator.round.to_s+"<split>Team review for #{reviewee_name[0]}"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
else
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "feedback", :content => "Feedback -
Round "+response_value_iterator.round.to_s+"<split>Feedback"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
end
end
end
end %>

==Test Plan==

Feature tests will be written to thoroughly test our modifications. A new file with the name <b>timestamps_for_students_submissions_spec.rb</b> file will be created in <b>spec/features</b> folder with various test cases to test the changes.

==Edge Cases==

'''Timeline behavior when the student opens the view page of a newly created assignment'''

* When the user has not made any submissions, reviews or feedbacks to reviews to the assignment, the timeline must only display the due dates of the assignment.

'''Timeline behavior when student has not joined any team and makes submissions'''

* When a student who is not part of any team makes a submission, he is assigned a team_ID by Expertiza and all submissions made by him are linked to that ID. So only those submissions will be displayed on the timeline.

'''Timeline behavior when the student joins a team, what happens to the submissions he made before joining the team'''

* When he joins a team and he receives a new team_ID, any submissions made hereafter will be made under the new team_ID and all previous submissions made by the student will not be shown on the timeline(this is how Expertiza assigns team_IDs and submissions- the same is reflected in 'your work' section of a user's profile). Only the user submissions made after he joins the team is shown on the timeline.

'''Timeline behavior when there is no name for a given assignment'''

* Sometimes assignments are not named. In the peer review submission rectangular box displayed on the timeline after the student submits a peer review, instead of showing the label "Review for [assignment name]", the label says "Review".

'''Timeline behavior when a submitted hyperlink is removed'''

* When a submitted hyperlink is removed, the submission must not be displayed on the timeline any more.

'''A submission must be made before a peer review can be given'''

* This condition holds even if the deadline has already passed.

==Future modifications==

We can also include icons that are embedded into the rectangles. They act as visual aids to help the user quickly recognize the category of the box. We propose a design that would look something like this:

[[File:S3.png]]

===References===

#[https://github.com/expertiza/expertiza Expertiza on GitHub]
#[http://expertiza.ncsu.edu/ The live Expertiza website]
#[http://wiki.expertiza.ncsu.edu/index.php/Expertiza_documentation Expertiza project documentation wiki]
#[https://relishapp.com/rspec Rspec Documentation]
#[http://visjs.org/docs/timeline/ Vis.js Documentation for Timeline]

CSC/ECE 517 Fall 2017/E1797 Timestamps for students submission

2017-12-02T06:33:24Z

Skatta3: /* Program Design */

==Introduction==

Expertiza is an open source project created using Ruby on Rails. Students can upload and submit their assignments and related work online for grading purposes.

===Existing System===

Currently, there exist various types of submissions that a student can make for an assignment for which timestamps are generated.
*When a student submits links or uploads files as submissions to an assignment in Expertiza, a timestamp is created for the date and time at which each of the submissions was done.
*The student may also be able to give reviews to other works for a particular assignment. These reviews when submitted also have an associated timestamp.
*There also exist timestamps for deadlines that have passed and that are upcoming for an assignment submission or a review to be done.
*For the reviews that a student receives for his work, the student can give feedback to each of the reviews. The submitted feedbacks also get timestamps.

Currenty there exists no functionality to view all these submissions and their timestamps in a single, aggregated way.

===Proposed System===

Our project was to solve this issue by creating a Visualization that helps the student view all the timestamps for his submissions. The goal is to create a Timeline that shows all the timestamps of submitted records and links to the submitted content wherever necessary. The default state of the timeline is a point on the x-axis set to the current date and time. The timeline is interactive and allows the user to zoom in and out to change the viewing scale of the timeline. The user can also scroll in the timeline to move the timeline forward or backward from the current time. After all of this is done, the user can reset the timeline to change his view to the default state.

With this, the student is able to view his entire submission history for an assignment in a convenient way.

==Problem Statement==

In Expertiza, it is possible for the instructor to view the submission records of a particular student. However, there is no way for students to check the history of their submission records. In this project, we are required to keep track of students’ activities and visualize them on their end by using a timeline chart.

<b>What needs to be visualized on the timeline:</b>

* Hyperlink submission record with timestamps
* File upload record with timestamps
* Due dates
*Visualization of Peer review of others works, which includes:
** A Review hyperlink that redirects to the review by clicking on it
** The Round number (To be displayed only if the assignment has multiple rounds)
** Timestamps
*Visualization of Author feedback on others review, which includes:
** A Feedback hyperlink that redirects to the feedback by clicking on it
** Timestamps

===Understanding Problem Statement===

The problem statement states the following issues that had to be resolved.

'''Issue-1:'''
Submission records with timestamps:

A student can submit their work for an assignment using "Your work" button in the respective assignment page. Students have two options to submit their work :
* Giving a hyperlink.
* Uploading a file.
As soon as the user submits any one of these, we needed to show hyperlink or file with the time-stamp on our visualization graph. Also, we needed to show the submitted hyperlink or a link to the file on the visualization so that it will be easy for the user to navigate from a single page.

'''Issue-2:'''
Due dates:

There are different due dates for every assignment like Round-1 submission, Round-2 submission, Round-1 review and Round-2 review Due Dates. These are different from submission time stamps because a submission's timestamp depends upon the time at which the user had submitted the work whereas a due date is the deadline date fixed by an instructor. Visualizing them by adding them into the timeline, helps the student to track all due dates in a single graph.

'''Issue-3:'''
Peer Review other's work:

A student needs to review work of different teams during the course of the assignment. As of now in order to view the review, Expertiza requires the user to go to the "other's work" page in the assignment. Instead of this, we want this data to be viewed in our visualization graph. This issue includes a timestamp, link to view review, review round number to be shown in the graph. One important point to note is that this review is the review given by this particular student to different teams as part of the assignment, not the review that the student got.

'''Issue-4:'''
Author's feedback on other's Review
:
A student can give feedback for the review he/she received for a specific assignment. So this information also needs to be included in the graph. We need to show the timestamp and hyperlink to the feedback. It must be noted that the feedback here is not the feedback he got for review given by him/her but the feedback he/she gave for the reviews the had received.

==Program Design==

To visualize the timeline graphically we decided to use the vis.js JavaScript library. This library provides various interactive visualization charts (like graphs, networks, timelines, etc) to visualize data in real time. We chose to work on this library because when compared to other popular visualization libraries, vis.js provides the best possible representation of a timeline, one that meets the requirements of our project. To know more about how to make a timeline using vis.js, click [http://visjs.org/docs/timeline/ here].

The timeline contains a single horizontal axis that is divided into time intervals equally separated from each other.

Let us consider an example where a student makes several submissions to an assignment. The student uploads a hyperlink "https ://www.facebook.com" and an HTML file as submissions. The assignment has several deadlines or due dates. There are due dates for Round 1 and Round 2 submissions for this particular assignment. There are also review deadlines for each of the rounds for the assignment. The student can give a peer review to other students' work on the assignment. The student is able to give feedback to the peer reviews that he received. We have used color coding to differentiate between different kinds of things visualized on the timeline. We have used '''Orange''' color for a round's submission and review deadline and '''Green''' color for all hyperlink submissions, file submissions, feedback and peer review submissions.

So in summary, the following things have to be present on the timeline that are visualized as rectangular boxes on the timeline:
* The submission hyperlink box with the hyperlink
* The file upload box with a link to the uploaded file
* The Round 1 peer review deadline
* The Round 1 submission due date
* The Round 2 peer review deadline
* The Round 2 submission due date
* The Peer Review that the student gave to other students
* The feedback that the student gave to received reviews
* A self-feedback that the student gave to himself
* A team review that the student can give to his teammates
* Additionally, all the rectangular boxed have timestamps that display when the submission was made or the due date of that task

Apart from this, various buttons were also added to better interact with the timeline. These include:
* Zoom in - To zoom in by magnifying the viewing scale of the timeline
* Zoom out - To zoom out of the timeline
* Move Left - To move along the timeline's x-axis. The user can move forward by pressing the button
* Move Right - To move backward along the x-axis
* Recenter - A single vertical red line set to the current time on the x-axis indicates the current time at which the timeline is being viewed. Pressing this button helps the user to reset the zoom scale and the position of the x-axis in a way that the red line is at the center of the timeline.

We have added hyperlinks to enable quick access to the submitted content. For example, the rectangular box that shows the submitted file has a hyperlink that links to the contents of the file. Similarly, the reviews submitted by the student is linked by the hyperlink in the Peer review rectangular box on the timeline.

Finally, after obtaining all the data from the database and the inclusion of all the stated information above to visualizing it in the timeline, the result would be something like this:

[[File:S1.png]]

When the user selects a particular rectangular box on the timeline by clicking on it, then the line that connects the box to the timeline's x-axis becomes thicker and the color of the box also changes to '''White''' to indicate to the user the current box that is selected. If the user selects the file submission rectangular box (sample.html file), then the timeline would look like this:

[[File:S2.png]]

==Files Involved==

*app/controllers/submission_records_controller.rb
*app/models/submission_record.rb
*app/views/student_task/list.html.erb

==Database Tables Involved==

*submission_records
*response_map
*due_dates

==Implementation==

The code to embed the timeline into the webpage is as follows

< div id="visualization">
< div class="menu">
<input id="zoomIn" value="Zoom in" type="button">
<input id="zoomOut" value="Zoom out" type="button">
<input id="moveLeft" value="Move left" type="button">
<input id="moveRight" value="Move right" type="button">
<input id="Recenter" value="Recenter" type="button">
< /div>
< /div>
<script type="text/javascript">
// DOM element where the Timeline will be attached
var container = document.getElementById('visualization');
// Create a DataSet (allows two way data-binding)
var items = new vis.DataSet(visualization_JSON);
// Configuration for the Timeline
var options = {
zoomMin: 1000 * 60 * 60 * 24, // one day in milliseconds
zoomMax: 1000 * 60 * 60 * 24 * 31 * 12 // about three months in milliseconds
};
// Create a Timeline
var timeline = new vis.Timeline(container, items, options);
</script>

There are several buttons that were inserted into the timeline to allow the user to interact with the timeline. The code for that is

<script>
var visualization_window=timeline.range.getRange();
function move (percentage) {
var range = timeline.getWindow();
var interval = range.end - range.start;
timeline.setWindow({
start: range.start.valueOf() - interval * percentage,
end: range.end.valueOf() - interval * percentage
});
}
// attach events to the navigation buttons
// zoom percentage in zoomin/zoomout can be adjusted below by passing paramenter. Similar is the case for move left/right along the x-axis
document.getElementById('zoomIn').onclick = function () { timeline.zoomIn( 0.2); };
document.getElementById('zoomOut').onclick = function () { timeline.zoomOut( 0.2); };
document.getElementById('moveLeft').onclick = function () { move( 0.2); };
document.getElementById('moveRight').onclick = function () { move(-0.2); };
document.getElementById('Recenter').onclick = function () {
var visualization_window_start = new Date(visualization_window.start);
var visualization_window_end = new Date(visualization_window.end);
timeline.setWindow(visualization_window_start, visualization_window_end, { animation: true });
};
</script>

The functionality of each button is explained in the Program Design section above.

It is necessary to obtain data from the Expertiza database to JSON format so that it can be processed by the timeline for visualization. After collecting the data from the database, processing it and storing it into a ruby variable, we use the JSON.parse() function to convert that information into JSON objects. To maintain continuity, the process of obtaining data and preprocessing it is explained later in the wiki. The code to convert the variable contents into a JSON object is as follows:

<script>
// converting @visualization_data array to javascript compatible JSON object
var visualization_JSON = JSON.parse('<%=raw @visualization_data.to_json%>');
var href_JSON = JSON.parse('<%= @href_arr.to_json.html_safe%>')
var temp;
//temp is temporary variable used to generate hyperlinks from content
for(i=0; i<visualization_JSON.length; i++) {
temp=visualization_JSON[i].content.split("<split>");
if(href_JSON[i]=='')
visualization_JSON[i].content = temp[0]+"<br>"+temp.slice(1);
else
visualization_JSON[i].content = "<a href="+href_JSON[i]+" target='_blank'><b><u>"+temp[0]+"</u></b></a><br>"+temp.slice(1);
}
</script>

The following code is used to display due dates in the timeline. The types of due dates included are Round submission or Round review due date.

<% @href_arr= Array.new %>
<! -- @href_arr is used to store all the hyperlinks for each visualized object -->
<% @duedates = DueDate.where("parent_id = #{@assignment.id}")
@visualization_data = @duedates.map do |due|
@href_arr.push("");
if due.deadline_type_id.eql? 1
{ :id => due.id, :start=> due.due_at, :className => "submissionDue", :content => "Round "+(due.round.to_s)+"<split>Submission due by "+'<br>'+due.due_at.strftime("%m/%d/%Y at %I:%M %p") }
else
{ :id => due.id, :start=> due.due_at, :className => "reviewDue", :content => "Round "+(due.round.to_s)+"<split>Review due by "+'<br>'+due.due_at.strftime("%m/%d/%Y at %I:%M %p") }
end
end
%>

Then we need to add submission hyperlinks and files in the timeline. The code for that is

< ! -- display only if submissions are made-->
<% unless @team.nil?
@submissions = SubmissionRecord.find_by_sql"select * from submission_records where assignment_id=#{@assignment.id} and team_id=#{@team.id}
and content NOT IN (select content from submission_records where assignment_id=#{@assignment.id} and team_id=#{@team.id} and UPPER(operation) Like 'REMOVE%')"
@visualization_data += @submissions.map do |submission|
#display_directory_tree(participant, files, true).html_safe
if (submission.operation).eql?('Submit File')
file = submission.content
ret=""
if File.exist?(file) && File.directory?(file)
ret += link_to File.basename(file), :controller => 'submitted_content', :action => 'edit', :id => participant.id, "current_folder[name]" => file
else
ret += "\n "
ret += link_to File.basename(file), :controller => 'submitted_content',
:action => 'download',
:id => @participant.id,
:download => File.basename(file),
"current_folder[name]" => File.dirname(file)
end
@href_arr.push(ret.split('"')[1])
{ :id => submission.id, :start=> submission.created_at, :className=> "fileUpload", :content => (submission.content).split('/')[-1]+'<split>'+
submission.created_at.strftime("%m/%d/%Y at %I:%M %p") }
else
@href_arr.push(submission.content)
{ :id => submission.id, :start=> submission.created_at, :className=> "hyperlinkUpload" ,:content => submission.content+'<split>'+
submission.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
end
end %>

'''Explanation:''' The following code fetches submission records of a student for a particular assignment from the '''submission_records''' table. Then after checking if the submission exists and when the type is a file, a hyperlink to the file's location path is obtained and pushed into the JSON. The same is done for a submission with the type Hyperlink.

Then to get the peer reviews, self-reviews, feedback and team reviews, the following code is used.

<! -- Reviews not yet started -->
<% unless @review_mappings.nil?
@review_mappings.each do |review_mapping_iterator|
@response_values = Response.where(:map_id => review_mapping_iterator.id)
@visualization_data += @response_values.map do |response_value_iterator|
if review_mapping_iterator.type=="ReviewResponseMap"
review_mapping = ResponseMap.find(review_mapping_iterator.reviewed_object_id)
participant = AssignmentTeam.get_first_member(review_mapping_iterator.reviewee_id)
topic_id = SignedUpTeam.topic_id(participant.parent_id, participant.user_id)
if !topic_id.nil?
if SignUpTopic.find(topic_id).topic_identifier != ''
@topic_name=SignUpTopic.find(topic_id).topic_identifier+": "+SignUpTopic.find(topic_id).topic_name
else
@topic_name=SignUpTopic.find(topic_id).topic_name
end
end
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "review", :content => "Peer Review -
Round "+response_value_iterator.round.to_s+"<split> Review for: #{@topic_name}"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
elsif review_mapping_iterator.type=="SelfReviewResponseMap"
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "selfReview", :content => "Self Feedback -
Round "+response_value_iterator.round.to_s+"<split>Self Feedback"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
elsif review_mapping_iterator.type=="TeammateReviewResponseMap"
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
reviewee = ResponseMap.where(:reviewer_id => "#{review_mapping_iterator.reviewer_id}", :id =>"#{review_mapping_iterator.id}").pluck(:reviewee_id)
puts reviewee.to_s+" "+review_mapping_iterator.reviewer_id.to_s+" "+review_mapping_iterator.id.to_s
user_id = Participant.where(:id=> "#{reviewee[0]}").pluck(:user_id)
reviewee_name = User.where(:id=>"#{user_id[0]}").pluck(:name)
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "teamReview", :content => "Team Review -
Round "+response_value_iterator.round.to_s+"<split>Team review for #{reviewee_name[0]}"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
else
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "feedback", :content => "Feedback -
Round "+response_value_iterator.round.to_s+"<split>Feedback"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
end
end
end
end %>

==Test Plan==

Feature tests will be written to thoroughly test our modifications. A new file with the name <b>timestamps_for_students_submissions_spec.rb</b> file will be created in <b>spec/features</b> folder with various test cases to test the changes.

==Edge Cases==

'''Timeline behavior when the student opens the view page of a newly created assignment'''

* When the user has not made any submissions, reviews or feedbacks to reviews to the assignment, the timeline must only display the due dates of the assignment.

'''Timeline behavior when student has not joined any team and makes submissions'''

* When a student who is not part of any team makes a submission, he is assigned a team_ID by Expertiza and all submissions made by him are linked to that ID. So only those submissions will be displayed on the timeline.

'''Timeline behavior when the student joins a team, what happens to the submissions he made before joining the team'''

* When he joins a team and he receives a new team_ID, any submissions made hereafter will be made under the new team_ID and all previous submissions made by the student will not be shown on the timeline(this is how Expertiza assigns team_IDs and submissions- the same is reflected in 'your work' section of a user's profile). Only the user submissions made after he joins the team is shown on the timeline.

'''Timeline behavior when there is no name for a given assignment'''

* Sometimes assignments are not named. In the peer review submission rectangular box displayed on the timeline after the student submits a peer review, instead of showing the label "Review for [assignment name]", the label says "Review".

'''Timeline behavior when a submitted hyperlink is removed'''

* When a submitted hyperlink is removed, the submission must not be displayed on the timeline any more.

'''A submission must be made before a peer review can be given'''

* This condition holds even if the deadline has already passed.

==Future modifications==

We can also include icons that are embedded into the rectangles. They act as visual aids to help the user quickly recognize the category of the box. We propose a design that would look something like this:

[[File:S3.png]]

CSC/ECE 517 Fall 2017/E1797 Timestamps for students submission

2017-12-02T06:29:54Z

Skatta3: /* Edge Cases */

==Introduction==

Expertiza is an open source project created using Ruby on Rails. Students can upload and submit their assignments and related work online for grading purposes.

===Existing System===

Currently, there exist various types of submissions that a student can make for an assignment for which timestamps are generated.
*When a student submits links or uploads files as submissions to an assignment in Expertiza, a timestamp is created for the date and time at which each of the submissions was done.
*The student may also be able to give reviews to other works for a particular assignment. These reviews when submitted also have an associated timestamp.
*There also exist timestamps for deadlines that have passed and that are upcoming for an assignment submission or a review to be done.
*For the reviews that a student receives for his work, the student can give feedback to each of the reviews. The submitted feedbacks also get timestamps.

Currenty there exists no functionality to view all these submissions and their timestamps in a single, aggregated way.

===Proposed System===

Our project was to solve this issue by creating a Visualization that helps the student view all the timestamps for his submissions. The goal is to create a Timeline that shows all the timestamps of submitted records and links to the submitted content wherever necessary. The default state of the timeline is a point on the x-axis set to the current date and time. The timeline is interactive and allows the user to zoom in and out to change the viewing scale of the timeline. The user can also scroll in the timeline to move the timeline forward or backward from the current time. After all of this is done, the user can reset the timeline to change his view to the default state.

With this, the student is able to view his entire submission history for an assignment in a convenient way.

==Problem Statement==

In Expertiza, it is possible for the instructor to view the submission records of a particular student. However, there is no way for students to check the history of their submission records. In this project, we are required to keep track of students’ activities and visualize them on their end by using a timeline chart.

<b>What needs to be visualized on the timeline:</b>

* Hyperlink submission record with timestamps
* File upload record with timestamps
* Due dates
*Visualization of Peer review of others works, which includes:
** A Review hyperlink that redirects to the review by clicking on it
** The Round number (To be displayed only if the assignment has multiple rounds)
** Timestamps
*Visualization of Author feedback on others review, which includes:
** A Feedback hyperlink that redirects to the feedback by clicking on it
** Timestamps

===Understanding Problem Statement===

The problem statement states the following issues that had to be resolved.

'''Issue-1:'''
Submission records with timestamps:

A student can submit their work for an assignment using "Your work" button in the respective assignment page. Students have two options to submit their work :
* Giving a hyperlink.
* Uploading a file.
As soon as the user submits any one of these, we needed to show hyperlink or file with the time-stamp on our visualization graph. Also, we needed to show the submitted hyperlink or a link to the file on the visualization so that it will be easy for the user to navigate from a single page.

'''Issue-2:'''
Due dates:

There are different due dates for every assignment like Round-1 submission, Round-2 submission, Round-1 review and Round-2 review Due Dates. These are different from submission time stamps because a submission's timestamp depends upon the time at which the user had submitted the work whereas a due date is the deadline date fixed by an instructor. Visualizing them by adding them into the timeline, helps the student to track all due dates in a single graph.

'''Issue-3:'''
Peer Review other's work:

A student needs to review work of different teams during the course of the assignment. As of now in order to view the review, Expertiza requires the user to go to the "other's work" page in the assignment. Instead of this, we want this data to be viewed in our visualization graph. This issue includes a timestamp, link to view review, review round number to be shown in the graph. One important point to note is that this review is the review given by this particular student to different teams as part of the assignment, not the review that the student got.

'''Issue-4:'''
Author's feedback on other's Review
:
A student can give feedback for the review he/she received for a specific assignment. So this information also needs to be included in the graph. We need to show the timestamp and hyperlink to the feedback. It must be noted that the feedback here is not the feedback he got for review given by him/her but the feedback he/she gave for the reviews the had received.

==Program Design==

To visualize the timeline graphically we decided to use the vis.js JavaScript library. This library provides various interactive visualization charts (like graphs, networks, timelines, etc) to visualize data in real time. We chose to work on this library because when compared to other popular visualization libraries, vis.js provides the best possible representation of a timeline, one that meets the requirements of our project. To know more about how to make a timeline using vis.js, click [http://visjs.org/docs/timeline/ here].

The timeline contains a single horizontal axis that is divided into time intervals equally separated from each other.

Let us consider an example where a student makes several submissions to an assignment. The student uploads a hyperlink "https://www.facebook.com" and an HTML file as submissions. The assignment has several deadlines or due dates. There are due dates for Round 1 and Round 2 submissions for this particular assignment. There are also review deadlines for each of the rounds for the assignment. The student can give a peer review to other students' work on the assignment. The student is able to give feedback to the peer reviews that he received. We have used color coding to differentiate between different kinds of things visualized on the timeline. We have used '''Orange''' color for a round's submission and review deadline and '''Green''' color for all hyperlink submissions, file submissions, feedback and peer review submissions.

So in summary, the following things have to be present on the timeline that are visualized as rectangular boxes on the timeline:
* The submission hyperlink box with the hyperlink
* The file upload box with a link to the uploaded file
* The Round 1 peer review deadline
* The Round 1 submission due date
* The Round 2 peer review deadline
* The Round 2 submission due date
* The Peer Review that the student gave to other students
* The feedback that the student gave to received reviews
* A self-feedback that the student gave to himself
* A team review that the student can give to his teammates
* Additionally, all the rectangular boxed have timestamps that display when the submission was made or the due date of that task

Apart from this, various buttons were also added to better interact with the timeline. These include:
* Zoom in - To zoom in by magnifying the viewing scale of the timeline
* Zoom out - To zoom out of the timeline
* Move Left - To move along the timeline's x-axis. The user can move forward by pressing the button
* Move Right - To move backward along the x-axis
* Recenter - A single vertical red line set to the current time on the x-axis indicates the current time at which the timeline is being viewed. Pressing this button helps the user to reset the zoom scale and the position of the x-axis in a way that the red line is at the center of the timeline.

We have added hyperlinks to enable quick access to the submitted content. For example, the rectangular box that shows the submitted file has a hyperlink that links to the contents of the file. Similarly, the reviews submitted by the student is linked by the hyperlink in the Peer review rectangular box on the timeline.

Finally, after obtaining all the data from the database and the inclusion of all the stated information above to visualizing it in the timeline, the result would be something like this:

[[File:S1.png]]

When the user selects a particular rectangular box on the timeline by clicking on it, then the line that connects the box to the timeline's x-axis becomes thicker and the color of the box also changes to '''White''' to indicate to the user the current box that is selected. If the user selects the file submission rectangular box (sample.html file), then the timeline would look like this:

[[File:S2.png]]

==Files Involved==

*app/controllers/submission_records_controller.rb
*app/models/submission_record.rb
*app/views/student_task/list.html.erb

==Database Tables Involved==

*submission_records
*response_map
*due_dates

==Implementation==

The code to embed the timeline into the webpage is as follows

< div id="visualization">
< div class="menu">
<input id="zoomIn" value="Zoom in" type="button">
<input id="zoomOut" value="Zoom out" type="button">
<input id="moveLeft" value="Move left" type="button">
<input id="moveRight" value="Move right" type="button">
<input id="Recenter" value="Recenter" type="button">
< /div>
< /div>
<script type="text/javascript">
// DOM element where the Timeline will be attached
var container = document.getElementById('visualization');
// Create a DataSet (allows two way data-binding)
var items = new vis.DataSet(visualization_JSON);
// Configuration for the Timeline
var options = {
zoomMin: 1000 * 60 * 60 * 24, // one day in milliseconds
zoomMax: 1000 * 60 * 60 * 24 * 31 * 12 // about three months in milliseconds
};
// Create a Timeline
var timeline = new vis.Timeline(container, items, options);
</script>

There are several buttons that were inserted into the timeline to allow the user to interact with the timeline. The code for that is

<script>
var visualization_window=timeline.range.getRange();
function move (percentage) {
var range = timeline.getWindow();
var interval = range.end - range.start;
timeline.setWindow({
start: range.start.valueOf() - interval * percentage,
end: range.end.valueOf() - interval * percentage
});
}
// attach events to the navigation buttons
// zoom percentage in zoomin/zoomout can be adjusted below by passing paramenter. Similar is the case for move left/right along the x-axis
document.getElementById('zoomIn').onclick = function () { timeline.zoomIn( 0.2); };
document.getElementById('zoomOut').onclick = function () { timeline.zoomOut( 0.2); };
document.getElementById('moveLeft').onclick = function () { move( 0.2); };
document.getElementById('moveRight').onclick = function () { move(-0.2); };
document.getElementById('Recenter').onclick = function () {
var visualization_window_start = new Date(visualization_window.start);
var visualization_window_end = new Date(visualization_window.end);
timeline.setWindow(visualization_window_start, visualization_window_end, { animation: true });
};
</script>

The functionality of each button is explained in the Program Design section above.

It is necessary to obtain data from the Expertiza database to JSON format so that it can be processed by the timeline for visualization. After collecting the data from the database, processing it and storing it into a ruby variable, we use the JSON.parse() function to convert that information into JSON objects. To maintain continuity, the process of obtaining data and preprocessing it is explained later in the wiki. The code to convert the variable contents into a JSON object is as follows:

<script>
// converting @visualization_data array to javascript compatible JSON object
var visualization_JSON = JSON.parse('<%=raw @visualization_data.to_json%>');
var href_JSON = JSON.parse('<%= @href_arr.to_json.html_safe%>')
var temp;
//temp is temporary variable used to generate hyperlinks from content
for(i=0; i<visualization_JSON.length; i++) {
temp=visualization_JSON[i].content.split("<split>");
if(href_JSON[i]=='')
visualization_JSON[i].content = temp[0]+"<br>"+temp.slice(1);
else
visualization_JSON[i].content = "<a href="+href_JSON[i]+" target='_blank'><b><u>"+temp[0]+"</u></b></a><br>"+temp.slice(1);
}
</script>

The following code is used to display due dates in the timeline. The types of due dates included are Round submission or Round review due date.

<% @href_arr= Array.new %>
<! -- @href_arr is used to store all the hyperlinks for each visualized object -->
<% @duedates = DueDate.where("parent_id = #{@assignment.id}")
@visualization_data = @duedates.map do |due|
@href_arr.push("");
if due.deadline_type_id.eql? 1
{ :id => due.id, :start=> due.due_at, :className => "submissionDue", :content => "Round "+(due.round.to_s)+"<split>Submission due by "+'<br>'+due.due_at.strftime("%m/%d/%Y at %I:%M %p") }
else
{ :id => due.id, :start=> due.due_at, :className => "reviewDue", :content => "Round "+(due.round.to_s)+"<split>Review due by "+'<br>'+due.due_at.strftime("%m/%d/%Y at %I:%M %p") }
end
end
%>

Then we need to add submission hyperlinks and files in the timeline. The code for that is

< ! -- display only if submissions are made-->
<% unless @team.nil?
@submissions = SubmissionRecord.find_by_sql"select * from submission_records where assignment_id=#{@assignment.id} and team_id=#{@team.id}
and content NOT IN (select content from submission_records where assignment_id=#{@assignment.id} and team_id=#{@team.id} and UPPER(operation) Like 'REMOVE%')"
@visualization_data += @submissions.map do |submission|
#display_directory_tree(participant, files, true).html_safe
if (submission.operation).eql?('Submit File')
file = submission.content
ret=""
if File.exist?(file) && File.directory?(file)
ret += link_to File.basename(file), :controller => 'submitted_content', :action => 'edit', :id => participant.id, "current_folder[name]" => file
else
ret += "\n "
ret += link_to File.basename(file), :controller => 'submitted_content',
:action => 'download',
:id => @participant.id,
:download => File.basename(file),
"current_folder[name]" => File.dirname(file)
end
@href_arr.push(ret.split('"')[1])
{ :id => submission.id, :start=> submission.created_at, :className=> "fileUpload", :content => (submission.content).split('/')[-1]+'<split>'+
submission.created_at.strftime("%m/%d/%Y at %I:%M %p") }
else
@href_arr.push(submission.content)
{ :id => submission.id, :start=> submission.created_at, :className=> "hyperlinkUpload" ,:content => submission.content+'<split>'+
submission.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
end
end %>

'''Explanation:''' The following code fetches submission records of a student for a particular assignment from the '''submission_records''' table. Then after checking if the submission exists and when the type is a file, a hyperlink to the file's location path is obtained and pushed into the JSON. The same is done for a submission with the type Hyperlink.

Then to get the peer reviews, self-reviews, feedback and team reviews, the following code is used.

<! -- Reviews not yet started -->
<% unless @review_mappings.nil?
@review_mappings.each do |review_mapping_iterator|
@response_values = Response.where(:map_id => review_mapping_iterator.id)
@visualization_data += @response_values.map do |response_value_iterator|
if review_mapping_iterator.type=="ReviewResponseMap"
review_mapping = ResponseMap.find(review_mapping_iterator.reviewed_object_id)
participant = AssignmentTeam.get_first_member(review_mapping_iterator.reviewee_id)
topic_id = SignedUpTeam.topic_id(participant.parent_id, participant.user_id)
if !topic_id.nil?
if SignUpTopic.find(topic_id).topic_identifier != ''
@topic_name=SignUpTopic.find(topic_id).topic_identifier+": "+SignUpTopic.find(topic_id).topic_name
else
@topic_name=SignUpTopic.find(topic_id).topic_name
end
end
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "review", :content => "Peer Review -
Round "+response_value_iterator.round.to_s+"<split> Review for: #{@topic_name}"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
elsif review_mapping_iterator.type=="SelfReviewResponseMap"
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "selfReview", :content => "Self Feedback -
Round "+response_value_iterator.round.to_s+"<split>Self Feedback"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
elsif review_mapping_iterator.type=="TeammateReviewResponseMap"
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
reviewee = ResponseMap.where(:reviewer_id => "#{review_mapping_iterator.reviewer_id}", :id =>"#{review_mapping_iterator.id}").pluck(:reviewee_id)
puts reviewee.to_s+" "+review_mapping_iterator.reviewer_id.to_s+" "+review_mapping_iterator.id.to_s
user_id = Participant.where(:id=> "#{reviewee[0]}").pluck(:user_id)
reviewee_name = User.where(:id=>"#{user_id[0]}").pluck(:name)
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "teamReview", :content => "Team Review -
Round "+response_value_iterator.round.to_s+"<split>Team review for #{reviewee_name[0]}"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
else
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "feedback", :content => "Feedback -
Round "+response_value_iterator.round.to_s+"<split>Feedback"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
end
end
end
end %>

==Test Plan==

Feature tests will be written to thoroughly test our modifications. A new file with the name <b>timestamps_for_students_submissions_spec.rb</b> file will be created in <b>spec/features</b> folder with various test cases to test the changes.

==Edge Cases==

'''Timeline behavior when the student opens the view page of a newly created assignment'''

* When the user has not made any submissions, reviews or feedbacks to reviews to the assignment, the timeline must only display the due dates of the assignment.

'''Timeline behavior when student has not joined any team and makes submissions'''

* When a student who is not part of any team makes a submission, he is assigned a team_ID by Expertiza and all submissions made by him are linked to that ID. So only those submissions will be displayed on the timeline.

'''Timeline behavior when the student joins a team, what happens to the submissions he made before joining the team'''

* When he joins a team and he receives a new team_ID, any submissions made hereafter will be made under the new team_ID and all previous submissions made by the student will not be shown on the timeline(this is how Expertiza assigns team_IDs and submissions- the same is reflected in 'your work' section of a user's profile). Only the user submissions made after he joins the team is shown on the timeline.

'''Timeline behavior when there is no name for a given assignment'''

* Sometimes assignments are not named. In the peer review submission rectangular box displayed on the timeline after the student submits a peer review, instead of showing the label "Review for [assignment name]", the label says "Review".

'''Timeline behavior when a submitted hyperlink is removed'''

* When a submitted hyperlink is removed, the submission must not be displayed on the timeline any more.

'''A submission must be made before a peer review can be given'''

* This condition holds even if the deadline has already passed.

==Future modifications==

We can also include icons that are embedded into the rectangles. They act as visual aids to help the user quickly recognize the category of the box. We propose a design that would look something like this:

[[File:S3.png]]

CSC/ECE 517 Fall 2017/E1797 Timestamps for students submission

2017-12-02T06:27:00Z

Skatta3: /* Implementation */

==Introduction==

Expertiza is an open source project created using Ruby on Rails. Students can upload and submit their assignments and related work online for grading purposes.

===Existing System===

Currently, there exist various types of submissions that a student can make for an assignment for which timestamps are generated.
*When a student submits links or uploads files as submissions to an assignment in Expertiza, a timestamp is created for the date and time at which each of the submissions was done.
*The student may also be able to give reviews to other works for a particular assignment. These reviews when submitted also have an associated timestamp.
*There also exist timestamps for deadlines that have passed and that are upcoming for an assignment submission or a review to be done.
*For the reviews that a student receives for his work, the student can give feedback to each of the reviews. The submitted feedbacks also get timestamps.

Currenty there exists no functionality to view all these submissions and their timestamps in a single, aggregated way.

===Proposed System===

Our project was to solve this issue by creating a Visualization that helps the student view all the timestamps for his submissions. The goal is to create a Timeline that shows all the timestamps of submitted records and links to the submitted content wherever necessary. The default state of the timeline is a point on the x-axis set to the current date and time. The timeline is interactive and allows the user to zoom in and out to change the viewing scale of the timeline. The user can also scroll in the timeline to move the timeline forward or backward from the current time. After all of this is done, the user can reset the timeline to change his view to the default state.

With this, the student is able to view his entire submission history for an assignment in a convenient way.

==Problem Statement==

In Expertiza, it is possible for the instructor to view the submission records of a particular student. However, there is no way for students to check the history of their submission records. In this project, we are required to keep track of students’ activities and visualize them on their end by using a timeline chart.

<b>What needs to be visualized on the timeline:</b>

* Hyperlink submission record with timestamps
* File upload record with timestamps
* Due dates
*Visualization of Peer review of others works, which includes:
** A Review hyperlink that redirects to the review by clicking on it
** The Round number (To be displayed only if the assignment has multiple rounds)
** Timestamps
*Visualization of Author feedback on others review, which includes:
** A Feedback hyperlink that redirects to the feedback by clicking on it
** Timestamps

===Understanding Problem Statement===

The problem statement states the following issues that had to be resolved.

'''Issue-1:'''
Submission records with timestamps:

A student can submit their work for an assignment using "Your work" button in the respective assignment page. Students have two options to submit their work :
* Giving a hyperlink.
* Uploading a file.
As soon as the user submits any one of these, we needed to show hyperlink or file with the time-stamp on our visualization graph. Also, we needed to show the submitted hyperlink or a link to the file on the visualization so that it will be easy for the user to navigate from a single page.

'''Issue-2:'''
Due dates:

There are different due dates for every assignment like Round-1 submission, Round-2 submission, Round-1 review and Round-2 review Due Dates. These are different from submission time stamps because a submission's timestamp depends upon the time at which the user had submitted the work whereas a due date is the deadline date fixed by an instructor. Visualizing them by adding them into the timeline, helps the student to track all due dates in a single graph.

'''Issue-3:'''
Peer Review other's work:

A student needs to review work of different teams during the course of the assignment. As of now in order to view the review, Expertiza requires the user to go to the "other's work" page in the assignment. Instead of this, we want this data to be viewed in our visualization graph. This issue includes a timestamp, link to view review, review round number to be shown in the graph. One important point to note is that this review is the review given by this particular student to different teams as part of the assignment, not the review that the student got.

'''Issue-4:'''
Author's feedback on other's Review
:
A student can give feedback for the review he/she received for a specific assignment. So this information also needs to be included in the graph. We need to show the timestamp and hyperlink to the feedback. It must be noted that the feedback here is not the feedback he got for review given by him/her but the feedback he/she gave for the reviews the had received.

==Program Design==

To visualize the timeline graphically we decided to use the vis.js JavaScript library. This library provides various interactive visualization charts (like graphs, networks, timelines, etc) to visualize data in real time. We chose to work on this library because when compared to other popular visualization libraries, vis.js provides the best possible representation of a timeline, one that meets the requirements of our project. To know more about how to make a timeline using vis.js, click [http://visjs.org/docs/timeline/ here].

The timeline contains a single horizontal axis that is divided into time intervals equally separated from each other.

Let us consider an example where a student makes several submissions to an assignment. The student uploads a hyperlink "https://www.facebook.com" and an HTML file as submissions. The assignment has several deadlines or due dates. There are due dates for Round 1 and Round 2 submissions for this particular assignment. There are also review deadlines for each of the rounds for the assignment. The student can give a peer review to other students' work on the assignment. The student is able to give feedback to the peer reviews that he received. We have used color coding to differentiate between different kinds of things visualized on the timeline. We have used '''Orange''' color for a round's submission and review deadline and '''Green''' color for all hyperlink submissions, file submissions, feedback and peer review submissions.

So in summary, the following things have to be present on the timeline that are visualized as rectangular boxes on the timeline:
* The submission hyperlink box with the hyperlink
* The file upload box with a link to the uploaded file
* The Round 1 peer review deadline
* The Round 1 submission due date
* The Round 2 peer review deadline
* The Round 2 submission due date
* The Peer Review that the student gave to other students
* The feedback that the student gave to received reviews
* A self-feedback that the student gave to himself
* A team review that the student can give to his teammates
* Additionally, all the rectangular boxed have timestamps that display when the submission was made or the due date of that task

Apart from this, various buttons were also added to better interact with the timeline. These include:
* Zoom in - To zoom in by magnifying the viewing scale of the timeline
* Zoom out - To zoom out of the timeline
* Move Left - To move along the timeline's x-axis. The user can move forward by pressing the button
* Move Right - To move backward along the x-axis
* Recenter - A single vertical red line set to the current time on the x-axis indicates the current time at which the timeline is being viewed. Pressing this button helps the user to reset the zoom scale and the position of the x-axis in a way that the red line is at the center of the timeline.

We have added hyperlinks to enable quick access to the submitted content. For example, the rectangular box that shows the submitted file has a hyperlink that links to the contents of the file. Similarly, the reviews submitted by the student is linked by the hyperlink in the Peer review rectangular box on the timeline.

Finally, after obtaining all the data from the database and the inclusion of all the stated information above to visualizing it in the timeline, the result would be something like this:

[[File:S1.png]]

When the user selects a particular rectangular box on the timeline by clicking on it, then the line that connects the box to the timeline's x-axis becomes thicker and the color of the box also changes to '''White''' to indicate to the user the current box that is selected. If the user selects the file submission rectangular box (sample.html file), then the timeline would look like this:

[[File:S2.png]]

==Files Involved==

*app/controllers/submission_records_controller.rb
*app/models/submission_record.rb
*app/views/student_task/list.html.erb

==Database Tables Involved==

*submission_records
*response_map
*due_dates

==Implementation==

The code to embed the timeline into the webpage is as follows

< div id="visualization">
< div class="menu">
<input id="zoomIn" value="Zoom in" type="button">
<input id="zoomOut" value="Zoom out" type="button">
<input id="moveLeft" value="Move left" type="button">
<input id="moveRight" value="Move right" type="button">
<input id="Recenter" value="Recenter" type="button">
< /div>
< /div>
<script type="text/javascript">
// DOM element where the Timeline will be attached
var container = document.getElementById('visualization');
// Create a DataSet (allows two way data-binding)
var items = new vis.DataSet(visualization_JSON);
// Configuration for the Timeline
var options = {
zoomMin: 1000 * 60 * 60 * 24, // one day in milliseconds
zoomMax: 1000 * 60 * 60 * 24 * 31 * 12 // about three months in milliseconds
};
// Create a Timeline
var timeline = new vis.Timeline(container, items, options);
</script>

There are several buttons that were inserted into the timeline to allow the user to interact with the timeline. The code for that is

<script>
var visualization_window=timeline.range.getRange();
function move (percentage) {
var range = timeline.getWindow();
var interval = range.end - range.start;
timeline.setWindow({
start: range.start.valueOf() - interval * percentage,
end: range.end.valueOf() - interval * percentage
});
}
// attach events to the navigation buttons
// zoom percentage in zoomin/zoomout can be adjusted below by passing paramenter. Similar is the case for move left/right along the x-axis
document.getElementById('zoomIn').onclick = function () { timeline.zoomIn( 0.2); };
document.getElementById('zoomOut').onclick = function () { timeline.zoomOut( 0.2); };
document.getElementById('moveLeft').onclick = function () { move( 0.2); };
document.getElementById('moveRight').onclick = function () { move(-0.2); };
document.getElementById('Recenter').onclick = function () {
var visualization_window_start = new Date(visualization_window.start);
var visualization_window_end = new Date(visualization_window.end);
timeline.setWindow(visualization_window_start, visualization_window_end, { animation: true });
};
</script>

The functionality of each button is explained in the Program Design section above.

It is necessary to obtain data from the Expertiza database to JSON format so that it can be processed by the timeline for visualization. After collecting the data from the database, processing it and storing it into a ruby variable, we use the JSON.parse() function to convert that information into JSON objects. To maintain continuity, the process of obtaining data and preprocessing it is explained later in the wiki. The code to convert the variable contents into a JSON object is as follows:

<script>
// converting @visualization_data array to javascript compatible JSON object
var visualization_JSON = JSON.parse('<%=raw @visualization_data.to_json%>');
var href_JSON = JSON.parse('<%= @href_arr.to_json.html_safe%>')
var temp;
//temp is temporary variable used to generate hyperlinks from content
for(i=0; i<visualization_JSON.length; i++) {
temp=visualization_JSON[i].content.split("<split>");
if(href_JSON[i]=='')
visualization_JSON[i].content = temp[0]+"<br>"+temp.slice(1);
else
visualization_JSON[i].content = "<a href="+href_JSON[i]+" target='_blank'><b><u>"+temp[0]+"</u></b></a><br>"+temp.slice(1);
}
</script>

The following code is used to display due dates in the timeline. The types of due dates included are Round submission or Round review due date.

<% @href_arr= Array.new %>
<! -- @href_arr is used to store all the hyperlinks for each visualized object -->
<% @duedates = DueDate.where("parent_id = #{@assignment.id}")
@visualization_data = @duedates.map do |due|
@href_arr.push("");
if due.deadline_type_id.eql? 1
{ :id => due.id, :start=> due.due_at, :className => "submissionDue", :content => "Round "+(due.round.to_s)+"<split>Submission due by "+'<br>'+due.due_at.strftime("%m/%d/%Y at %I:%M %p") }
else
{ :id => due.id, :start=> due.due_at, :className => "reviewDue", :content => "Round "+(due.round.to_s)+"<split>Review due by "+'<br>'+due.due_at.strftime("%m/%d/%Y at %I:%M %p") }
end
end
%>

Then we need to add submission hyperlinks and files in the timeline. The code for that is

< ! -- display only if submissions are made-->
<% unless @team.nil?
@submissions = SubmissionRecord.find_by_sql"select * from submission_records where assignment_id=#{@assignment.id} and team_id=#{@team.id}
and content NOT IN (select content from submission_records where assignment_id=#{@assignment.id} and team_id=#{@team.id} and UPPER(operation) Like 'REMOVE%')"
@visualization_data += @submissions.map do |submission|
#display_directory_tree(participant, files, true).html_safe
if (submission.operation).eql?('Submit File')
file = submission.content
ret=""
if File.exist?(file) && File.directory?(file)
ret += link_to File.basename(file), :controller => 'submitted_content', :action => 'edit', :id => participant.id, "current_folder[name]" => file
else
ret += "\n "
ret += link_to File.basename(file), :controller => 'submitted_content',
:action => 'download',
:id => @participant.id,
:download => File.basename(file),
"current_folder[name]" => File.dirname(file)
end
@href_arr.push(ret.split('"')[1])
{ :id => submission.id, :start=> submission.created_at, :className=> "fileUpload", :content => (submission.content).split('/')[-1]+'<split>'+
submission.created_at.strftime("%m/%d/%Y at %I:%M %p") }
else
@href_arr.push(submission.content)
{ :id => submission.id, :start=> submission.created_at, :className=> "hyperlinkUpload" ,:content => submission.content+'<split>'+
submission.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
end
end %>

'''Explanation:''' The following code fetches submission records of a student for a particular assignment from the '''submission_records''' table. Then after checking if the submission exists and when the type is a file, a hyperlink to the file's location path is obtained and pushed into the JSON. The same is done for a submission with the type Hyperlink.

Then to get the peer reviews, self-reviews, feedback and team reviews, the following code is used.

<! -- Reviews not yet started -->
<% unless @review_mappings.nil?
@review_mappings.each do |review_mapping_iterator|
@response_values = Response.where(:map_id => review_mapping_iterator.id)
@visualization_data += @response_values.map do |response_value_iterator|
if review_mapping_iterator.type=="ReviewResponseMap"
review_mapping = ResponseMap.find(review_mapping_iterator.reviewed_object_id)
participant = AssignmentTeam.get_first_member(review_mapping_iterator.reviewee_id)
topic_id = SignedUpTeam.topic_id(participant.parent_id, participant.user_id)
if !topic_id.nil?
if SignUpTopic.find(topic_id).topic_identifier != ''
@topic_name=SignUpTopic.find(topic_id).topic_identifier+": "+SignUpTopic.find(topic_id).topic_name
else
@topic_name=SignUpTopic.find(topic_id).topic_name
end
end
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "review", :content => "Peer Review -
Round "+response_value_iterator.round.to_s+"<split> Review for: #{@topic_name}"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
elsif review_mapping_iterator.type=="SelfReviewResponseMap"
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "selfReview", :content => "Self Feedback -
Round "+response_value_iterator.round.to_s+"<split>Self Feedback"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
elsif review_mapping_iterator.type=="TeammateReviewResponseMap"
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
reviewee = ResponseMap.where(:reviewer_id => "#{review_mapping_iterator.reviewer_id}", :id =>"#{review_mapping_iterator.id}").pluck(:reviewee_id)
puts reviewee.to_s+" "+review_mapping_iterator.reviewer_id.to_s+" "+review_mapping_iterator.id.to_s
user_id = Participant.where(:id=> "#{reviewee[0]}").pluck(:user_id)
reviewee_name = User.where(:id=>"#{user_id[0]}").pluck(:name)
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "teamReview", :content => "Team Review -
Round "+response_value_iterator.round.to_s+"<split>Team review for #{reviewee_name[0]}"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
else
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "feedback", :content => "Feedback -
Round "+response_value_iterator.round.to_s+"<split>Feedback"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
end
end
end
end %>

==Test Plan==

Feature tests will be written to thoroughly test our modifications. A new file with the name <b>timestamps_for_students_submissions_spec.rb</b> file will be created in <b>spec/features</b> folder with various test cases to test the changes.

==Edge Cases==

'''Timeline behavior when the student opens the view page of a newly created assignment'''

* When the user has not made any submissions, reviews or feedbacks to reviews to the assignment, the timeline must only display the due dates of the assignment.

'''Timeline behavior when student has not joined any team and makes submissions'''

* When a student who is not part of any team makes a submission, he is assigned a team_ID by Expertiza and all submissions made by him are linked to that ID. So only those submissions will be displayed on the timeline.

'''Timeline behavior when the student joins a team, what happens to the submissions he made before joining the team'''

* When he joins a team and he receives a new team_ID, any submissions made hereafter will be made under the new team_ID and all previous submissions made by the student will not be shown on the timeline(this is how Expertiza assigns team_IDs and submissions- the same is reflected in 'your work' section of a user's profile). Only the user submissions made after he joins the team is shown on the timeline.

'''Timeline behavior when there is no name for a given assignment'''

* Sometimes assignments are not named. In the peer review submission rectangular box displayed on the timeline after the student submits a peer review, instead of showing the label "Review for [assignment name]", the label says "Review".

'''Timeline behavior when a submitted hyperlink is removed'''

* When a submitted hyperlink is removed, the submission must not be displayed on the timeline any more.

==Future modifications==

We can also include icons that are embedded into the rectangles. They act as visual aids to help the user quickly recognize the category of the box. We propose a design that would look something like this:

[[File:S3.png]]

CSC/ECE 517 Fall 2017/E1797 Timestamps for students submission

2017-12-02T06:25:44Z

Skatta3: /* Implementation */

==Introduction==

Expertiza is an open source project created using Ruby on Rails. Students can upload and submit their assignments and related work online for grading purposes.

===Existing System===

Currently, there exist various types of submissions that a student can make for an assignment for which timestamps are generated.
*When a student submits links or uploads files as submissions to an assignment in Expertiza, a timestamp is created for the date and time at which each of the submissions was done.
*The student may also be able to give reviews to other works for a particular assignment. These reviews when submitted also have an associated timestamp.
*There also exist timestamps for deadlines that have passed and that are upcoming for an assignment submission or a review to be done.
*For the reviews that a student receives for his work, the student can give feedback to each of the reviews. The submitted feedbacks also get timestamps.

Currenty there exists no functionality to view all these submissions and their timestamps in a single, aggregated way.

===Proposed System===

Our project was to solve this issue by creating a Visualization that helps the student view all the timestamps for his submissions. The goal is to create a Timeline that shows all the timestamps of submitted records and links to the submitted content wherever necessary. The default state of the timeline is a point on the x-axis set to the current date and time. The timeline is interactive and allows the user to zoom in and out to change the viewing scale of the timeline. The user can also scroll in the timeline to move the timeline forward or backward from the current time. After all of this is done, the user can reset the timeline to change his view to the default state.

With this, the student is able to view his entire submission history for an assignment in a convenient way.

==Problem Statement==

In Expertiza, it is possible for the instructor to view the submission records of a particular student. However, there is no way for students to check the history of their submission records. In this project, we are required to keep track of students’ activities and visualize them on their end by using a timeline chart.

<b>What needs to be visualized on the timeline:</b>

* Hyperlink submission record with timestamps
* File upload record with timestamps
* Due dates
*Visualization of Peer review of others works, which includes:
** A Review hyperlink that redirects to the review by clicking on it
** The Round number (To be displayed only if the assignment has multiple rounds)
** Timestamps
*Visualization of Author feedback on others review, which includes:
** A Feedback hyperlink that redirects to the feedback by clicking on it
** Timestamps

===Understanding Problem Statement===

The problem statement states the following issues that had to be resolved.

'''Issue-1:'''
Submission records with timestamps:

A student can submit their work for an assignment using "Your work" button in the respective assignment page. Students have two options to submit their work :
* Giving a hyperlink.
* Uploading a file.
As soon as the user submits any one of these, we needed to show hyperlink or file with the time-stamp on our visualization graph. Also, we needed to show the submitted hyperlink or a link to the file on the visualization so that it will be easy for the user to navigate from a single page.

'''Issue-2:'''
Due dates:

There are different due dates for every assignment like Round-1 submission, Round-2 submission, Round-1 review and Round-2 review Due Dates. These are different from submission time stamps because a submission's timestamp depends upon the time at which the user had submitted the work whereas a due date is the deadline date fixed by an instructor. Visualizing them by adding them into the timeline, helps the student to track all due dates in a single graph.

'''Issue-3:'''
Peer Review other's work:

A student needs to review work of different teams during the course of the assignment. As of now in order to view the review, Expertiza requires the user to go to the "other's work" page in the assignment. Instead of this, we want this data to be viewed in our visualization graph. This issue includes a timestamp, link to view review, review round number to be shown in the graph. One important point to note is that this review is the review given by this particular student to different teams as part of the assignment, not the review that the student got.

'''Issue-4:'''
Author's feedback on other's Review
:
A student can give feedback for the review he/she received for a specific assignment. So this information also needs to be included in the graph. We need to show the timestamp and hyperlink to the feedback. It must be noted that the feedback here is not the feedback he got for review given by him/her but the feedback he/she gave for the reviews the had received.

==Program Design==

To visualize the timeline graphically we decided to use the vis.js JavaScript library. This library provides various interactive visualization charts (like graphs, networks, timelines, etc) to visualize data in real time. We chose to work on this library because when compared to other popular visualization libraries, vis.js provides the best possible representation of a timeline, one that meets the requirements of our project. To know more about how to make a timeline using vis.js, click [http://visjs.org/docs/timeline/ here].

The timeline contains a single horizontal axis that is divided into time intervals equally separated from each other.

Let us consider an example where a student makes several submissions to an assignment. The student uploads a hyperlink "https://www.facebook.com" and an HTML file as submissions. The assignment has several deadlines or due dates. There are due dates for Round 1 and Round 2 submissions for this particular assignment. There are also review deadlines for each of the rounds for the assignment. The student can give a peer review to other students' work on the assignment. The student is able to give feedback to the peer reviews that he received. We have used color coding to differentiate between different kinds of things visualized on the timeline. We have used '''Orange''' color for a round's submission and review deadline and '''Green''' color for all hyperlink submissions, file submissions, feedback and peer review submissions.

So in summary, the following things have to be present on the timeline that are visualized as rectangular boxes on the timeline:
* The submission hyperlink box with the hyperlink
* The file upload box with a link to the uploaded file
* The Round 1 peer review deadline
* The Round 1 submission due date
* The Round 2 peer review deadline
* The Round 2 submission due date
* The Peer Review that the student gave to other students
* The feedback that the student gave to received reviews
* A self-feedback that the student gave to himself
* A team review that the student can give to his teammates
* Additionally, all the rectangular boxed have timestamps that display when the submission was made or the due date of that task

Apart from this, various buttons were also added to better interact with the timeline. These include:
* Zoom in - To zoom in by magnifying the viewing scale of the timeline
* Zoom out - To zoom out of the timeline
* Move Left - To move along the timeline's x-axis. The user can move forward by pressing the button
* Move Right - To move backward along the x-axis
* Recenter - A single vertical red line set to the current time on the x-axis indicates the current time at which the timeline is being viewed. Pressing this button helps the user to reset the zoom scale and the position of the x-axis in a way that the red line is at the center of the timeline.

We have added hyperlinks to enable quick access to the submitted content. For example, the rectangular box that shows the submitted file has a hyperlink that links to the contents of the file. Similarly, the reviews submitted by the student is linked by the hyperlink in the Peer review rectangular box on the timeline.

Finally, after obtaining all the data from the database and the inclusion of all the stated information above to visualizing it in the timeline, the result would be something like this:

[[File:S1.png]]

When the user selects a particular rectangular box on the timeline by clicking on it, then the line that connects the box to the timeline's x-axis becomes thicker and the color of the box also changes to '''White''' to indicate to the user the current box that is selected. If the user selects the file submission rectangular box (sample.html file), then the timeline would look like this:

[[File:S2.png]]

==Files Involved==

*app/controllers/submission_records_controller.rb
*app/models/submission_record.rb
*app/views/student_task/list.html.erb

==Database Tables Involved==

*submission_records
*response_map
*due_dates

==Implementation==

The code to embed the timeline into the webpage is as follows

< div id="visualization">
< div class="menu">
<input id="zoomIn" value="Zoom in" type="button">
<input id="zoomOut" value="Zoom out" type="button">
<input id="moveLeft" value="Move left" type="button">
<input id="moveRight" value="Move right" type="button">
<input id="Recenter" value="Recenter" type="button">
< /div>
< /div>
<script type="text/javascript">
// DOM element where the Timeline will be attached
var container = document.getElementById('visualization');
// Create a DataSet (allows two way data-binding)
var items = new vis.DataSet(visualization_JSON);
// Configuration for the Timeline
var options = {
zoomMin: 1000 * 60 * 60 * 24, // one day in milliseconds
zoomMax: 1000 * 60 * 60 * 24 * 31 * 12 // about three months in milliseconds
};
// Create a Timeline
var timeline = new vis.Timeline(container, items, options);
</script>

There are several buttons that were inserted into the timeline to allow the user to interact with the timeline. The code for that is

<script>
var visualization_window=timeline.range.getRange();
function move (percentage) {
var range = timeline.getWindow();
var interval = range.end - range.start;
timeline.setWindow({
start: range.start.valueOf() - interval * percentage,
end: range.end.valueOf() - interval * percentage
});
}
// attach events to the navigation buttons
// zoom percentage in zoomin/zoomout can be adjusted below by passing paramenter. Similar is the case for move left/right along the x-axis
document.getElementById('zoomIn').onclick = function () { timeline.zoomIn( 0.2); };
document.getElementById('zoomOut').onclick = function () { timeline.zoomOut( 0.2); };
document.getElementById('moveLeft').onclick = function () { move( 0.2); };
document.getElementById('moveRight').onclick = function () { move(-0.2); };
document.getElementById('Recenter').onclick = function () {
var visualization_window_start = new Date(visualization_window.start);
var visualization_window_end = new Date(visualization_window.end);
timeline.setWindow(visualization_window_start, visualization_window_end, { animation: true });
};
</script>

The functionality of each button is explained in the Program Design section above.

It is necessary to obtain data from the Expertiza database to JSON format so that it can be processed by the timeline for visualization. After collecting the data from the database, processing it and storing it into a ruby variable, we use the JSON.parse() function to convert that information into JSON objects. To maintain continuity, the process of obtaining data and preprocessing it is explained later in the wiki. The code to convert the variable contents into a JSON object is as follows:

<script>
// converting @visualization_data array to javascript compatible JSON object
var visualization_JSON = JSON.parse('<%=raw @visualization_data.to_json%>');
var href_JSON = JSON.parse('<%= @href_arr.to_json.html_safe%>')
var temp;
//temp is temporary variable used to generate hyperlinks from content
for(i=0; i<visualization_JSON.length; i++) {
temp=visualization_JSON[i].content.split("<split>");
if(href_JSON[i]=='')
visualization_JSON[i].content = temp[0]+"<br>"+temp.slice(1);
else
visualization_JSON[i].content = "<a href="+href_JSON[i]+" target='_blank'><b><u>"+temp[0]+"</u></b></a><br>"+temp.slice(1);
}
</script>

The following code is used to display due dates in the timeline. The types of due dates included are Round submission or Round review due date.

<% @href_arr= Array.new %>
<! -- @href_arr is used to store all the hyperlinks for each visualized object -->
<% @duedates = DueDate.where("parent_id = #{@assignment.id}")
@visualization_data = @duedates.map do |due|
@href_arr.push("");
if due.deadline_type_id.eql? 1
{ :id => due.id, :start=> due.due_at, :className => "submissionDue", :content => "Round "+(due.round.to_s)+"<split>Submission due by "+'<br>'+due.due_at.strftime("%m/%d/%Y at %I:%M %p") }
else
{ :id => due.id, :start=> due.due_at, :className => "reviewDue", :content => "Round "+(due.round.to_s)+"<split>Review due by "+'<br>'+due.due_at.strftime("%m/%d/%Y at %I:%M %p") }
end
end
%>

Then we need to add submission hyperlinks and files in the timeline. The code for that is

< ! -- display only if submissions are made-->
<% unless @team.nil?
@submissions = SubmissionRecord.find_by_sql"select * from submission_records where assignment_id=#{@assignment.id} and team_id=#{@team.id} and content NOT IN (select content from submission_records where assignment_id=#{@assignment.id} and team_id=#{@team.id} and UPPER(operation) Like 'REMOVE%')"
@visualization_data += @submissions.map do |submission|
#display_directory_tree(participant, files, true).html_safe
if (submission.operation).eql?('Submit File')
file = submission.content
ret=""
if File.exist?(file) && File.directory?(file)
ret += link_to File.basename(file), :controller => 'submitted_content', :action => 'edit', :id => participant.id, "current_folder[name]" => file
else
ret += "\n "
ret += link_to File.basename(file), :controller => 'submitted_content',
:action => 'download',
:id => @participant.id,
:download => File.basename(file),
"current_folder[name]" => File.dirname(file)
end
@href_arr.push(ret.split('"')[1])
{ :id => submission.id, :start=> submission.created_at, :className=> "fileUpload", :content => (submission.content).split('/')[-1]+'<split>'+submission.created_at.strftime("%m/%d/%Y at %I:%M %p") }
else
@href_arr.push(submission.content)
{ :id => submission.id, :start=> submission.created_at, :className=> "hyperlinkUpload" ,:content => submission.content+'<split>'+submission.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
end
end %>

'''Explanation:''' The following code fetches submission records of a student for a particular assignment from the '''submission_records''' table. Then after checking if the submission exists and when the type is a file, a hyperlink to the file's location path is obtained and pushed into the JSON. The same is done for a submission with the type Hyperlink.

Then to get the peer reviews, self-reviews, feedback and team reviews, the following code is used.

<! -- Reviews not yet started -->
<% unless @review_mappings.nil?
@review_mappings.each do |review_mapping_iterator|
@response_values = Response.where(:map_id => review_mapping_iterator.id)
@visualization_data += @response_values.map do |response_value_iterator|
if review_mapping_iterator.type=="ReviewResponseMap"
review_mapping = ResponseMap.find(review_mapping_iterator.reviewed_object_id)
participant = AssignmentTeam.get_first_member(review_mapping_iterator.reviewee_id)
topic_id = SignedUpTeam.topic_id(participant.parent_id, participant.user_id)
if !topic_id.nil?
if SignUpTopic.find(topic_id).topic_identifier != ''
@topic_name=SignUpTopic.find(topic_id).topic_identifier+": "+SignUpTopic.find(topic_id).topic_name
else
@topic_name=SignUpTopic.find(topic_id).topic_name
end
end
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "review", :content => "Peer Review -
Round "+response_value_iterator.round.to_s+"<split> Review for: #{@topic_name}"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
elsif review_mapping_iterator.type=="SelfReviewResponseMap"
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "selfReview", :content => "Self Feedback -
Round "+response_value_iterator.round.to_s+"<split>Self Feedback"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
elsif review_mapping_iterator.type=="TeammateReviewResponseMap"
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
reviewee = ResponseMap.where(:reviewer_id => "#{review_mapping_iterator.reviewer_id}", :id =>"#{review_mapping_iterator.id}").pluck(:reviewee_id)
puts reviewee.to_s+" "+review_mapping_iterator.reviewer_id.to_s+" "+review_mapping_iterator.id.to_s
user_id = Participant.where(:id=> "#{reviewee[0]}").pluck(:user_id)
reviewee_name = User.where(:id=>"#{user_id[0]}").pluck(:name)
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "teamReview", :content => "Team Review -
Round "+response_value_iterator.round.to_s+"<split>Team review for #{reviewee_name[0]}"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
else
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "feedback", :content => "Feedback -
Round "+response_value_iterator.round.to_s+"<split>Feedback"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
end
end
end
end %>

==Test Plan==

Feature tests will be written to thoroughly test our modifications. A new file with the name <b>timestamps_for_students_submissions_spec.rb</b> file will be created in <b>spec/features</b> folder with various test cases to test the changes.

==Edge Cases==

'''Timeline behavior when the student opens the view page of a newly created assignment'''

* When the user has not made any submissions, reviews or feedbacks to reviews to the assignment, the timeline must only display the due dates of the assignment.

'''Timeline behavior when student has not joined any team and makes submissions'''

* When a student who is not part of any team makes a submission, he is assigned a team_ID by Expertiza and all submissions made by him are linked to that ID. So only those submissions will be displayed on the timeline.

'''Timeline behavior when the student joins a team, what happens to the submissions he made before joining the team'''

* When he joins a team and he receives a new team_ID, any submissions made hereafter will be made under the new team_ID and all previous submissions made by the student will not be shown on the timeline(this is how Expertiza assigns team_IDs and submissions- the same is reflected in 'your work' section of a user's profile). Only the user submissions made after he joins the team is shown on the timeline.

'''Timeline behavior when there is no name for a given assignment'''

* Sometimes assignments are not named. In the peer review submission rectangular box displayed on the timeline after the student submits a peer review, instead of showing the label "Review for [assignment name]", the label says "Review".

'''Timeline behavior when a submitted hyperlink is removed'''

* When a submitted hyperlink is removed, the submission must not be displayed on the timeline any more.

==Future modifications==

We can also include icons that are embedded into the rectangles. They act as visual aids to help the user quickly recognize the category of the box. We propose a design that would look something like this:

[[File:S3.png]]

CSC/ECE 517 Fall 2017/E1797 Timestamps for students submission

2017-12-02T06:24:46Z

Skatta3: /* Implementation */

==Introduction==

Expertiza is an open source project created using Ruby on Rails. Students can upload and submit their assignments and related work online for grading purposes.

===Existing System===

Currently, there exist various types of submissions that a student can make for an assignment for which timestamps are generated.
*When a student submits links or uploads files as submissions to an assignment in Expertiza, a timestamp is created for the date and time at which each of the submissions was done.
*The student may also be able to give reviews to other works for a particular assignment. These reviews when submitted also have an associated timestamp.
*There also exist timestamps for deadlines that have passed and that are upcoming for an assignment submission or a review to be done.
*For the reviews that a student receives for his work, the student can give feedback to each of the reviews. The submitted feedbacks also get timestamps.

Currenty there exists no functionality to view all these submissions and their timestamps in a single, aggregated way.

===Proposed System===

Our project was to solve this issue by creating a Visualization that helps the student view all the timestamps for his submissions. The goal is to create a Timeline that shows all the timestamps of submitted records and links to the submitted content wherever necessary. The default state of the timeline is a point on the x-axis set to the current date and time. The timeline is interactive and allows the user to zoom in and out to change the viewing scale of the timeline. The user can also scroll in the timeline to move the timeline forward or backward from the current time. After all of this is done, the user can reset the timeline to change his view to the default state.

With this, the student is able to view his entire submission history for an assignment in a convenient way.

==Problem Statement==

In Expertiza, it is possible for the instructor to view the submission records of a particular student. However, there is no way for students to check the history of their submission records. In this project, we are required to keep track of students’ activities and visualize them on their end by using a timeline chart.

<b>What needs to be visualized on the timeline:</b>

* Hyperlink submission record with timestamps
* File upload record with timestamps
* Due dates
*Visualization of Peer review of others works, which includes:
** A Review hyperlink that redirects to the review by clicking on it
** The Round number (To be displayed only if the assignment has multiple rounds)
** Timestamps
*Visualization of Author feedback on others review, which includes:
** A Feedback hyperlink that redirects to the feedback by clicking on it
** Timestamps

===Understanding Problem Statement===

The problem statement states the following issues that had to be resolved.

'''Issue-1:'''
Submission records with timestamps:

A student can submit their work for an assignment using "Your work" button in the respective assignment page. Students have two options to submit their work :
* Giving a hyperlink.
* Uploading a file.
As soon as the user submits any one of these, we needed to show hyperlink or file with the time-stamp on our visualization graph. Also, we needed to show the submitted hyperlink or a link to the file on the visualization so that it will be easy for the user to navigate from a single page.

'''Issue-2:'''
Due dates:

There are different due dates for every assignment like Round-1 submission, Round-2 submission, Round-1 review and Round-2 review Due Dates. These are different from submission time stamps because a submission's timestamp depends upon the time at which the user had submitted the work whereas a due date is the deadline date fixed by an instructor. Visualizing them by adding them into the timeline, helps the student to track all due dates in a single graph.

'''Issue-3:'''
Peer Review other's work:

A student needs to review work of different teams during the course of the assignment. As of now in order to view the review, Expertiza requires the user to go to the "other's work" page in the assignment. Instead of this, we want this data to be viewed in our visualization graph. This issue includes a timestamp, link to view review, review round number to be shown in the graph. One important point to note is that this review is the review given by this particular student to different teams as part of the assignment, not the review that the student got.

'''Issue-4:'''
Author's feedback on other's Review
:
A student can give feedback for the review he/she received for a specific assignment. So this information also needs to be included in the graph. We need to show the timestamp and hyperlink to the feedback. It must be noted that the feedback here is not the feedback he got for review given by him/her but the feedback he/she gave for the reviews the had received.

==Program Design==

To visualize the timeline graphically we decided to use the vis.js JavaScript library. This library provides various interactive visualization charts (like graphs, networks, timelines, etc) to visualize data in real time. We chose to work on this library because when compared to other popular visualization libraries, vis.js provides the best possible representation of a timeline, one that meets the requirements of our project. To know more about how to make a timeline using vis.js, click [http://visjs.org/docs/timeline/ here].

The timeline contains a single horizontal axis that is divided into time intervals equally separated from each other.

Let us consider an example where a student makes several submissions to an assignment. The student uploads a hyperlink "https://www.facebook.com" and an HTML file as submissions. The assignment has several deadlines or due dates. There are due dates for Round 1 and Round 2 submissions for this particular assignment. There are also review deadlines for each of the rounds for the assignment. The student can give a peer review to other students' work on the assignment. The student is able to give feedback to the peer reviews that he received. We have used color coding to differentiate between different kinds of things visualized on the timeline. We have used '''Orange''' color for a round's submission and review deadline and '''Green''' color for all hyperlink submissions, file submissions, feedback and peer review submissions.

So in summary, the following things have to be present on the timeline that are visualized as rectangular boxes on the timeline:
* The submission hyperlink box with the hyperlink
* The file upload box with a link to the uploaded file
* The Round 1 peer review deadline
* The Round 1 submission due date
* The Round 2 peer review deadline
* The Round 2 submission due date
* The Peer Review that the student gave to other students
* The feedback that the student gave to received reviews
* A self-feedback that the student gave to himself
* A team review that the student can give to his teammates
* Additionally, all the rectangular boxed have timestamps that display when the submission was made or the due date of that task

Apart from this, various buttons were also added to better interact with the timeline. These include:
* Zoom in - To zoom in by magnifying the viewing scale of the timeline
* Zoom out - To zoom out of the timeline
* Move Left - To move along the timeline's x-axis. The user can move forward by pressing the button
* Move Right - To move backward along the x-axis
* Recenter - A single vertical red line set to the current time on the x-axis indicates the current time at which the timeline is being viewed. Pressing this button helps the user to reset the zoom scale and the position of the x-axis in a way that the red line is at the center of the timeline.

We have added hyperlinks to enable quick access to the submitted content. For example, the rectangular box that shows the submitted file has a hyperlink that links to the contents of the file. Similarly, the reviews submitted by the student is linked by the hyperlink in the Peer review rectangular box on the timeline.

Finally, after obtaining all the data from the database and the inclusion of all the stated information above to visualizing it in the timeline, the result would be something like this:

[[File:S1.png]]

When the user selects a particular rectangular box on the timeline by clicking on it, then the line that connects the box to the timeline's x-axis becomes thicker and the color of the box also changes to '''White''' to indicate to the user the current box that is selected. If the user selects the file submission rectangular box (sample.html file), then the timeline would look like this:

[[File:S2.png]]

==Files Involved==

*app/controllers/submission_records_controller.rb
*app/models/submission_record.rb
*app/views/student_task/list.html.erb

==Database Tables Involved==

*submission_records
*response_map
*due_dates

==Implementation==

The code to embed the timeline into the webpage is as follows

< div id="visualization">
< div class="menu">
<input id="zoomIn" value="Zoom in" type="button">
<input id="zoomOut" value="Zoom out" type="button">
<input id="moveLeft" value="Move left" type="button">
<input id="moveRight" value="Move right" type="button">
<input id="Recenter" value="Recenter" type="button">
< /div>
< /div>
<script type="text/javascript">
// DOM element where the Timeline will be attached
var container = document.getElementById('visualization');
// Create a DataSet (allows two way data-binding)
var items = new vis.DataSet(visualization_JSON);
// Configuration for the Timeline
var options = {
zoomMin: 1000 * 60 * 60 * 24, // one day in milliseconds
zoomMax: 1000 * 60 * 60 * 24 * 31 * 12 // about three months in milliseconds
};
// Create a Timeline
var timeline = new vis.Timeline(container, items, options);
</script>

There are several buttons that were inserted into the timeline to allow the user to interact with the timeline. The code for that is

<script>
var visualization_window=timeline.range.getRange();
function move (percentage) {
var range = timeline.getWindow();
var interval = range.end - range.start;
timeline.setWindow({
start: range.start.valueOf() - interval * percentage,
end: range.end.valueOf() - interval * percentage
});
}
// attach events to the navigation buttons
// zoom percentage in zoomin/zoomout can be adjusted below by passing paramenter. Similar is the case for move left/right along the x-axis
document.getElementById('zoomIn').onclick = function () { timeline.zoomIn( 0.2); };
document.getElementById('zoomOut').onclick = function () { timeline.zoomOut( 0.2); };
document.getElementById('moveLeft').onclick = function () { move( 0.2); };
document.getElementById('moveRight').onclick = function () { move(-0.2); };
document.getElementById('Recenter').onclick = function () {
var visualization_window_start = new Date(visualization_window.start);
var visualization_window_end = new Date(visualization_window.end);
timeline.setWindow(visualization_window_start, visualization_window_end, { animation: true });
};
</script>

The functionality of each button is explained in the Program Design section above.

It is necessary to obtain data from the Expertiza database to JSON format so that it can be processed by the timeline for visualization. After collecting the data from the database, processing it and storing it into a ruby variable, we use the JSON.parse() function to convert that information into JSON objects. To maintain continuity, the process of obtaining data and preprocessing it is explained later in the wiki. The code to convert the variable contents into a JSON object is as follows:

<script>
// converting @visualization_data array to javascript compatible JSON object
var visualization_JSON = JSON.parse('<%=raw @visualization_data.to_json%>');
var href_JSON = JSON.parse('<%= @href_arr.to_json.html_safe%>')
var temp;
//temp is temporary variable used to generate hyperlinks from content
for(i=0; i<visualization_JSON.length; i++) {
temp=visualization_JSON[i].content.split("<split>");
if(href_JSON[i]=='')
visualization_JSON[i].content = temp[0]+"<br>"+temp.slice(1);
else
visualization_JSON[i].content = "<a href="+href_JSON[i]+" target='_blank'><b><u>"+temp[0]+"</u></b></a><br>"+temp.slice(1);
}
</script>

The following code is used to display due dates in the timeline. The types of due dates included are Round submission or Round review due date.

<% @href_arr= Array.new %>
<! -- @href_arr is used to store all the hyperlinks for each visualized object -->
<% @duedates = DueDate.where("parent_id = #{@assignment.id}")
@visualization_data = @duedates.map do |due|
@href_arr.push("");
if due.deadline_type_id.eql? 1
{ :id => due.id, :start=> due.due_at, :className => "submissionDue", :content => "Round "+(due.round.to_s)+"<split>Submission due by "+'<br>'+due.due_at.strftime("%m/%d/%Y at %I:%M %p") }
else
{ :id => due.id, :start=> due.due_at, :className => "reviewDue", :content => "Round "+(due.round.to_s)+"<split>Review due by "+'<br>'+due.due_at.strftime("%m/%d/%Y at %I:%M %p") }
end
end
%>

Then we need to add submission hyperlinks and files in the timeline. The code for that is

< ! -- display only if submissions are made-->
<% unless @team.nil?
@submissions = SubmissionRecord.find_by_sql"select * from submission_records where assignment_id=#{@assignment.id} and team_id=#{@team.id} and content NOT IN (select content from submission_records where assignment_id=#{@assignment.id} and team_id=#{@team.id} and UPPER(operation) Like 'REMOVE%')"
@visualization_data += @submissions.map do |submission|
#display_directory_tree(participant, files, true).html_safe
if (submission.operation).eql?('Submit File')
file = submission.content
ret=""
if File.exist?(file) && File.directory?(file)
ret += link_to File.basename(file), :controller => 'submitted_content', :action => 'edit', :id => participant.id, "current_folder[name]" => file
else
ret += "\n "
ret += link_to File.basename(file), :controller => 'submitted_content',
:action => 'download',
:id => @participant.id,
:download => File.basename(file),
"current_folder[name]" => File.dirname(file)
end
@href_arr.push(ret.split('"')[1])
{ :id => submission.id, :start=> submission.created_at, :className=> "fileUpload", :content => (submission.content).split('/')[-1]+'<split>'+submission.created_at.strftime("%m/%d/%Y at %I:%M %p") }
else
@href_arr.push(submission.content)
{ :id => submission.id, :start=> submission.created_at, :className=> "hyperlinkUpload" ,:content => submission.content+'<split>'+submission.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
end
end %>

'''Explanation:''' The following code fetches submission records of a student for a particular assignment from the '''submission_records''' table. Then after checking if the submission exists and when the type is a file, a hyperlink to the file's location path is obtained and pushed into the JSON. The same is done for a submission with the type Hyperlink.

Then to get the peer reviews, self-reviews, feedback and team reviews, the following code is used.

<! -- Reviews not yet started -->
<% unless @review_mappings.nil?
@review_mappings.each do |review_mapping_iterator|
@response_values = Response.where(:map_id => review_mapping_iterator.id)
@visualization_data += @response_values.map do |response_value_iterator|
if review_mapping_iterator.type=="ReviewResponseMap"
review_mapping = ResponseMap.find(review_mapping_iterator.reviewed_object_id)
participant = AssignmentTeam.get_first_member(review_mapping_iterator.reviewee_id)
topic_id = SignedUpTeam.topic_id(participant.parent_id, participant.user_id)
if !topic_id.nil?
if SignUpTopic.find(topic_id).topic_identifier != ''
@topic_name=SignUpTopic.find(topic_id).topic_identifier+": "+SignUpTopic.find(topic_id).topic_name
else
@topic_name=SignUpTopic.find(topic_id).topic_name
end
end
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "review", :content => "Peer Review -
Round "+response_value_iterator.round.to_s+"<split> Review for: #{@topic_name}"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
elsif review_mapping_iterator.type=="SelfReviewResponseMap"
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "selfReview", :content => "Self Feedback -
Round "+response_value_iterator.round.to_s+"<split>Self Feedback"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
elsif review_mapping_iterator.type=="TeammateReviewResponseMap"
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
reviewee = ResponseMap.where(:reviewer_id => "#{review_mapping_iterator.reviewer_id}", :id =>"#{review_mapping_iterator.id}").pluck(:reviewee_id)
puts reviewee.to_s+" "+review_mapping_iterator.reviewer_id.to_s+" "+review_mapping_iterator.id.to_s
user_id = Participant.where(:id=> "#{reviewee[0]}").pluck(:user_id)
reviewee_name = User.where(:id=>"#{user_id[0]}").pluck(:name)
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "teamReview", :content => "Team Review -
Round "+response_value_iterator.round.to_s+"<split>Team review for #{reviewee_name[0]}"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
else
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "feedback", :content => "Feedback -
Round "+response_value_iterator.round.to_s+"<split>Feedback"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
end
end
end
end %>

==Test Plan==

Feature tests will be written to thoroughly test our modifications. A new file with the name <b>timestamps_for_students_submissions_spec.rb</b> file will be created in <b>spec/features</b> folder with various test cases to test the changes.

==Edge Cases==

'''Timeline behavior when the student opens the view page of a newly created assignment'''

* When the user has not made any submissions, reviews or feedbacks to reviews to the assignment, the timeline must only display the due dates of the assignment.

'''Timeline behavior when student has not joined any team and makes submissions'''

* When a student who is not part of any team makes a submission, he is assigned a team_ID by Expertiza and all submissions made by him are linked to that ID. So only those submissions will be displayed on the timeline.

'''Timeline behavior when the student joins a team, what happens to the submissions he made before joining the team'''

* When he joins a team and he receives a new team_ID, any submissions made hereafter will be made under the new team_ID and all previous submissions made by the student will not be shown on the timeline(this is how Expertiza assigns team_IDs and submissions- the same is reflected in 'your work' section of a user's profile). Only the user submissions made after he joins the team is shown on the timeline.

'''Timeline behavior when there is no name for a given assignment'''

* Sometimes assignments are not named. In the peer review submission rectangular box displayed on the timeline after the student submits a peer review, instead of showing the label "Review for [assignment name]", the label says "Review".

'''Timeline behavior when a submitted hyperlink is removed'''

* When a submitted hyperlink is removed, the submission must not be displayed on the timeline any more.

==Future modifications==

We can also include icons that are embedded into the rectangles. They act as visual aids to help the user quickly recognize the category of the box. We propose a design that would look something like this:

[[File:S3.png]]

CSC/ECE 517 Fall 2017/E1797 Timestamps for students submission

2017-12-02T06:23:56Z

Skatta3: /* Edge Cases */

==Introduction==

Expertiza is an open source project created using Ruby on Rails. Students can upload and submit their assignments and related work online for grading purposes.

===Existing System===

Currently, there exist various types of submissions that a student can make for an assignment for which timestamps are generated.
*When a student submits links or uploads files as submissions to an assignment in Expertiza, a timestamp is created for the date and time at which each of the submissions was done.
*The student may also be able to give reviews to other works for a particular assignment. These reviews when submitted also have an associated timestamp.
*There also exist timestamps for deadlines that have passed and that are upcoming for an assignment submission or a review to be done.
*For the reviews that a student receives for his work, the student can give feedback to each of the reviews. The submitted feedbacks also get timestamps.

Currenty there exists no functionality to view all these submissions and their timestamps in a single, aggregated way.

===Proposed System===

Our project was to solve this issue by creating a Visualization that helps the student view all the timestamps for his submissions. The goal is to create a Timeline that shows all the timestamps of submitted records and links to the submitted content wherever necessary. The default state of the timeline is a point on the x-axis set to the current date and time. The timeline is interactive and allows the user to zoom in and out to change the viewing scale of the timeline. The user can also scroll in the timeline to move the timeline forward or backward from the current time. After all of this is done, the user can reset the timeline to change his view to the default state.

With this, the student is able to view his entire submission history for an assignment in a convenient way.

==Problem Statement==

In Expertiza, it is possible for the instructor to view the submission records of a particular student. However, there is no way for students to check the history of their submission records. In this project, we are required to keep track of students’ activities and visualize them on their end by using a timeline chart.

<b>What needs to be visualized on the timeline:</b>

* Hyperlink submission record with timestamps
* File upload record with timestamps
* Due dates
*Visualization of Peer review of others works, which includes:
** A Review hyperlink that redirects to the review by clicking on it
** The Round number (To be displayed only if the assignment has multiple rounds)
** Timestamps
*Visualization of Author feedback on others review, which includes:
** A Feedback hyperlink that redirects to the feedback by clicking on it
** Timestamps

===Understanding Problem Statement===

The problem statement states the following issues that had to be resolved.

'''Issue-1:'''
Submission records with timestamps:

A student can submit their work for an assignment using "Your work" button in the respective assignment page. Students have two options to submit their work :
* Giving a hyperlink.
* Uploading a file.
As soon as the user submits any one of these, we needed to show hyperlink or file with the time-stamp on our visualization graph. Also, we needed to show the submitted hyperlink or a link to the file on the visualization so that it will be easy for the user to navigate from a single page.

'''Issue-2:'''
Due dates:

There are different due dates for every assignment like Round-1 submission, Round-2 submission, Round-1 review and Round-2 review Due Dates. These are different from submission time stamps because a submission's timestamp depends upon the time at which the user had submitted the work whereas a due date is the deadline date fixed by an instructor. Visualizing them by adding them into the timeline, helps the student to track all due dates in a single graph.

'''Issue-3:'''
Peer Review other's work:

A student needs to review work of different teams during the course of the assignment. As of now in order to view the review, Expertiza requires the user to go to the "other's work" page in the assignment. Instead of this, we want this data to be viewed in our visualization graph. This issue includes a timestamp, link to view review, review round number to be shown in the graph. One important point to note is that this review is the review given by this particular student to different teams as part of the assignment, not the review that the student got.

'''Issue-4:'''
Author's feedback on other's Review
:
A student can give feedback for the review he/she received for a specific assignment. So this information also needs to be included in the graph. We need to show the timestamp and hyperlink to the feedback. It must be noted that the feedback here is not the feedback he got for review given by him/her but the feedback he/she gave for the reviews the had received.

==Program Design==

To visualize the timeline graphically we decided to use the vis.js JavaScript library. This library provides various interactive visualization charts (like graphs, networks, timelines, etc) to visualize data in real time. We chose to work on this library because when compared to other popular visualization libraries, vis.js provides the best possible representation of a timeline, one that meets the requirements of our project. To know more about how to make a timeline using vis.js, click [http://visjs.org/docs/timeline/ here].

The timeline contains a single horizontal axis that is divided into time intervals equally separated from each other.

Let us consider an example where a student makes several submissions to an assignment. The student uploads a hyperlink "https://www.facebook.com" and an HTML file as submissions. The assignment has several deadlines or due dates. There are due dates for Round 1 and Round 2 submissions for this particular assignment. There are also review deadlines for each of the rounds for the assignment. The student can give a peer review to other students' work on the assignment. The student is able to give feedback to the peer reviews that he received. We have used color coding to differentiate between different kinds of things visualized on the timeline. We have used '''Orange''' color for a round's submission and review deadline and '''Green''' color for all hyperlink submissions, file submissions, feedback and peer review submissions.

So in summary, the following things have to be present on the timeline that are visualized as rectangular boxes on the timeline:
* The submission hyperlink box with the hyperlink
* The file upload box with a link to the uploaded file
* The Round 1 peer review deadline
* The Round 1 submission due date
* The Round 2 peer review deadline
* The Round 2 submission due date
* The Peer Review that the student gave to other students
* The feedback that the student gave to received reviews
* A self-feedback that the student gave to himself
* A team review that the student can give to his teammates
* Additionally, all the rectangular boxed have timestamps that display when the submission was made or the due date of that task

Apart from this, various buttons were also added to better interact with the timeline. These include:
* Zoom in - To zoom in by magnifying the viewing scale of the timeline
* Zoom out - To zoom out of the timeline
* Move Left - To move along the timeline's x-axis. The user can move forward by pressing the button
* Move Right - To move backward along the x-axis
* Recenter - A single vertical red line set to the current time on the x-axis indicates the current time at which the timeline is being viewed. Pressing this button helps the user to reset the zoom scale and the position of the x-axis in a way that the red line is at the center of the timeline.

We have added hyperlinks to enable quick access to the submitted content. For example, the rectangular box that shows the submitted file has a hyperlink that links to the contents of the file. Similarly, the reviews submitted by the student is linked by the hyperlink in the Peer review rectangular box on the timeline.

Finally, after obtaining all the data from the database and the inclusion of all the stated information above to visualizing it in the timeline, the result would be something like this:

[[File:S1.png]]

When the user selects a particular rectangular box on the timeline by clicking on it, then the line that connects the box to the timeline's x-axis becomes thicker and the color of the box also changes to '''White''' to indicate to the user the current box that is selected. If the user selects the file submission rectangular box (sample.html file), then the timeline would look like this:

[[File:S2.png]]

==Files Involved==

*app/controllers/submission_records_controller.rb
*app/models/submission_record.rb
*app/views/student_task/list.html.erb

==Database Tables Involved==

*submission_records
*response_map
*due_dates

==Implementation==

The code to embed the timeline into the webpage is as follows

< div id="visualization">
< div class="menu">
<input id="zoomIn" value="Zoom in" type="button">
<input id="zoomOut" value="Zoom out" type="button">
<input id="moveLeft" value="Move left" type="button">
<input id="moveRight" value="Move right" type="button">
<input id="Recenter" value="Recenter" type="button">
< /div>
< /div>
<script type="text/javascript">
// DOM element where the Timeline will be attached
var container = document.getElementById('visualization');
// Create a DataSet (allows two way data-binding)
var items = new vis.DataSet(visualization_JSON);
// Configuration for the Timeline
var options = {
zoomMin: 1000 * 60 * 60 * 24, // one day in milliseconds
zoomMax: 1000 * 60 * 60 * 24 * 31 * 12 // about three months in milliseconds
};
// Create a Timeline
var timeline = new vis.Timeline(container, items, options);
</script>

There are several buttons that were inserted into the timeline to allow the user to interact with the timeline. The code for that is

<script>
var visualization_window=timeline.range.getRange();
function move (percentage) {
var range = timeline.getWindow();
var interval = range.end - range.start;
timeline.setWindow({
start: range.start.valueOf() - interval * percentage,
end: range.end.valueOf() - interval * percentage
});
}
// attach events to the navigation buttons
// zoom percentage in zoomin/zoomout can be adjusted below by passing paramenter. Similar is the case for move left/right along the x-axis
document.getElementById('zoomIn').onclick = function () { timeline.zoomIn( 0.2); };
document.getElementById('zoomOut').onclick = function () { timeline.zoomOut( 0.2); };
document.getElementById('moveLeft').onclick = function () { move( 0.2); };
document.getElementById('moveRight').onclick = function () { move(-0.2); };
document.getElementById('Recenter').onclick = function () {
var visualization_window_start = new Date(visualization_window.start);
var visualization_window_end = new Date(visualization_window.end);
timeline.setWindow(visualization_window_start, visualization_window_end, { animation: true });
};
</script>

The functionality of each button is explained in the Program Design section above.

It is necessary to obtain data from the Expertiza database to JSON format so that it can be processed by the timeline for visualization. After collecting the data from the database, processing it and storing it into a ruby variable, we use the JSON.parse() function to convert that information into JSON objects. To maintain continuity, the process of obtaining data and preprocessing it is explained later in the wiki. The code to convert the variable contents into a JSON object is as follows:

<script>
// converting @visualization_data array to javascript compatible JSON object
var visualization_JSON = JSON.parse('<%=raw @visualization_data.to_json%>');
var href_JSON = JSON.parse('<%= @href_arr.to_json.html_safe%>')
var temp;
//temp is temporary variable used to generate hyperlinks from content
for(i=0; i<visualization_JSON.length; i++) {
temp=visualization_JSON[i].content.split("<split>");
if(href_JSON[i]=='')
visualization_JSON[i].content = temp[0]+"<br>"+temp.slice(1);
else
visualization_JSON[i].content = "<a href="+href_JSON[i]+" target='_blank'><b><u>"+temp[0]+"</u></b></a><br>"+temp.slice(1);
}
</script>

The following code is used to display due dates in the timeline. The types of due dates included are Round submission or Round review due date.

<% @href_arr= Array.new %>
<! -- @href_arr is used to store all the hyperlinks for each visualized object -->
<% @duedates = DueDate.where("parent_id = #{@assignment.id}")
@visualization_data = @duedates.map do |due|
@href_arr.push("");
if due.deadline_type_id.eql? 1
{ :id => due.id, :start=> due.due_at, :className => "submissionDue", :content => "Round "+(due.round.to_s)+"<split>Submission due by "+'<br>'+due.due_at.strftime("%m/%d/%Y at %I:%M %p") }
else
{ :id => due.id, :start=> due.due_at, :className => "reviewDue", :content => "Round "+(due.round.to_s)+"<split>Review due by "+'<br>'+due.due_at.strftime("%m/%d/%Y at %I:%M %p") }
end
end
%>

Then we need to add submission hyperlinks and files in the timeline. The code for that is

< ! -- display only if submissions are made-->
<% unless @team.nil?
@submissions = SubmissionRecord.find_by_sql"select * from submission_records where assignment_id=#{@assignment.id} and team_id=#{@team.id} and content NOT IN (select content from submission_records where assignment_id=#{@assignment.id} and team_id=#{@team.id} and UPPER(operation) Like 'REMOVE%')"
@visualization_data += @submissions.map do |submission|
#display_directory_tree(participant, files, true).html_safe
if (submission.operation).eql?('Submit File')
file = submission.content
ret=""
if File.exist?(file) && File.directory?(file)
ret += link_to File.basename(file), :controller => 'submitted_content', :action => 'edit', :id => participant.id, "current_folder[name]" => file
else
ret += "\n "
ret += link_to File.basename(file), :controller => 'submitted_content',
:action => 'download',
:id => @participant.id,
:download => File.basename(file),
"current_folder[name]" => File.dirname(file)
end
@href_arr.push(ret.split('"')[1])
{ :id => submission.id, :start=> submission.created_at, :className=> "fileUpload", :content => (submission.content).split('/')[-1]+'<split>'+submission.created_at.strftime("%m/%d/%Y at %I:%M %p") }
else
@href_arr.push(submission.content)
{ :id => submission.id, :start=> submission.created_at, :className=> "hyperlinkUpload" ,:content => submission.content+'<split>'+submission.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
end
end %>

'''Explanation:''' The following code fetches submission records of a student for a particular assignment from the '''submission_records''' table. Then after checking if the submission exists and when the type is a file, a hyperlink to the file's location path is obtained and pushed into the JSON. The same is done for a submission with the type Hyperlink.

Then to get the peer reviews, self-reviews, feedback and team reviews, the following code is used.

<! -- Reviews not yet started -->
<% unless @review_mappings.nil?
@review_mappings.each do |review_mapping_iterator|
@response_values = Response.where(:map_id => review_mapping_iterator.id)
@visualization_data += @response_values.map do |response_value_iterator|
if review_mapping_iterator.type=="ReviewResponseMap"
review_mapping = ResponseMap.find(review_mapping_iterator.reviewed_object_id)
participant = AssignmentTeam.get_first_member(review_mapping_iterator.reviewee_id)
topic_id = SignedUpTeam.topic_id(participant.parent_id, participant.user_id)
if !topic_id.nil?
if SignUpTopic.find(topic_id).topic_identifier != ''
@topic_name=SignUpTopic.find(topic_id).topic_identifier+": "+SignUpTopic.find(topic_id).topic_name
else
@topic_name=SignUpTopic.find(topic_id).topic_name
end
end
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "review", :content => "Peer Review - Round "+response_value_iterator.round.to_s+"<split> Review for: #{@topic_name}"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
elsif review_mapping_iterator.type=="SelfReviewResponseMap"
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "selfReview", :content => "Self Feedback - Round "+response_value_iterator.round.to_s+"<split>Self Feedback"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
elsif review_mapping_iterator.type=="TeammateReviewResponseMap"
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
reviewee = ResponseMap.where(:reviewer_id => "#{review_mapping_iterator.reviewer_id}", :id =>"#{review_mapping_iterator.id}").pluck(:reviewee_id)
puts reviewee.to_s+" "+review_mapping_iterator.reviewer_id.to_s+" "+review_mapping_iterator.id.to_s
user_id = Participant.where(:id=> "#{reviewee[0]}").pluck(:user_id)
reviewee_name = User.where(:id=>"#{user_id[0]}").pluck(:name)
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "teamReview", :content => "Team Review - Round "+response_value_iterator.round.to_s+"<split>Team review for #{reviewee_name[0]}"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
else
unless response_value_iterator.nil? and response_value_iterator.is_submitted.zero?
@href_arr.push("../response/view?id="+response_value_iterator.id.to_s)
{ :id => response_value_iterator.id, :start=> response_value_iterator.created_at, :className => "feedback", :content => "Feedback - Round "+response_value_iterator.round.to_s+"<split>Feedback"+'<br>'+response_value_iterator.created_at.strftime("%m/%d/%Y at %I:%M %p") }
end
end
end
end
end %>

==Test Plan==

Feature tests will be written to thoroughly test our modifications. A new file with the name <b>timestamps_for_students_submissions_spec.rb</b> file will be created in <b>spec/features</b> folder with various test cases to test the changes.

==Edge Cases==

'''Timeline behavior when the student opens the view page of a newly created assignment'''

* When the user has not made any submissions, reviews or feedbacks to reviews to the assignment, the timeline must only display the due dates of the assignment.

'''Timeline behavior when student has not joined any team and makes submissions'''

* When a student who is not part of any team makes a submission, he is assigned a team_ID by Expertiza and all submissions made by him are linked to that ID. So only those submissions will be displayed on the timeline.

'''Timeline behavior when the student joins a team, what happens to the submissions he made before joining the team'''

* When he joins a team and he receives a new team_ID, any submissions made hereafter will be made under the new team_ID and all previous submissions made by the student will not be shown on the timeline(this is how Expertiza assigns team_IDs and submissions- the same is reflected in 'your work' section of a user's profile). Only the user submissions made after he joins the team is shown on the timeline.

'''Timeline behavior when there is no name for a given assignment'''

* Sometimes assignments are not named. In the peer review submission rectangular box displayed on the timeline after the student submits a peer review, instead of showing the label "Review for [assignment name]", the label says "Review".

'''Timeline behavior when a submitted hyperlink is removed'''

* When a submitted hyperlink is removed, the submission must not be displayed on the timeline any more.

==Future modifications==

We can also include icons that are embedded into the rectangles. They act as visual aids to help the user quickly recognize the category of the box. We propose a design that would look something like this:

[[File:S3.png]]

CSC/ECE 517 Fall 2017/E1787 OSS project Bronze Score calculations

2017-11-06T05:29:16Z

Skatta3: /* Our Work */

==Introduction==
This project involves revision of score calculation bug of Expertiza homework reviewing mechanism.

==Scenario==

Sometimes when a reviewee of a project or homework fills out the review form, he or she may leave certain review question blank. When taken into score calculation for the project or homework, the application instead fills in 0 on blank answers. This behavior is incorrect as the blank review answers should never be used when used to calculate final score.

Issue -

[[File:error_1787.png|center]]

==Solution==

Solution -

[[File:Grades.png|center]]

===Github Link===
Git Original link
*https://github.com/saiharsha1994/expertiza

Pull request link
*https://github.com/expertiza/expertiza/pull/1058

Git Revised link
*https://github.com/saiharsha1994/expertiza/tree/Bronzeproject

===Explanation===
====Average Calculation====
The scores are not calculated on dividing with total reviews given, instead calculated using total non null reviews given.

== Design Pattern Usage ==
We implemented using the MVC (Model View Controller) pattern. We felt it was the pattern used in expertiza , usage of same pattern would be much easier.

====Testing====
We have run unit test using RSpec and Carpybara. The test file path is spec/models/vm_question_response_row_spec.rb.

For the test, we have identified 2 scenarios. First one is regarding correctness on average score calculation, where we will create a VmQuestionResponseRow object with sample test scores inside and call its average_score_for_row method, then we match returned average to the expected average;

Second one is regarding whether average score calculation includes nil values, where we will create a VmQuestionResponseRow object with one or more nil sample test scores inside and call its average_score_for_row method, then we match returned average to the expected average to check if nil is redefined and used in score calculation.

In addition, we have also tested the initialization of VmQuestionResponseRow object with 5 parameters and 6 parameters to ensure the initialization process works as intended (see code).

==Our Work==

For the OSS project, the topic is fixing and modification on Expertize team score calculation mechanism. For this project, a meeting once every week for 2 weeks with TA was proceeded. The main focus for the first one and half week involves setting up the environment on the machine. Some of notable issues on setting up include theRubyRacer dependency problem on project, Node packages not recognized by rails (Windows), Font-Awesome-Rails path issues, etc, which were solved through file tracing, problem identifying, and debugging. For the rest of these a little over 2 weeks period, several issues were identified with the project. The main issue for program include the false score calculation mechanism by expertiza where empty scores are assumed automatically to 0 and included in calculation; this would in turn give a false score calculation result as empty scores are not supposed to be set to 0 and then included in for calculation. Through debugging and defining the problem, it was identified that the reason for such issue involves average_score_for_row method in vm_question_response_row.rb in model as shown below in red - where the row_average_score dividend was not been used correctly.

Comparison of code changes can be seen in Pull request.

The issue can be solved by modify the calculation for dividend using a counter to exclude nil values and modified the constructor for VmQuestionResponseRow classs that it can dynamically accept 5 or 6 parameters, as shown below (note: not_null_reviews.zero? check are used two times in order to pass the github check on coding, as combining these two lines into one (row_average_score = (row_average_score / not_null_reviews).round(2) unless not_null_reviews.zero?) would resulting in failing on github check, while the other solution which is putting both line into an unless block would not have any benefit execution efficiency wise).

Code after first modification -

[[File:code.png|1047px|thumb|center]]

Code after second modification -

[[File:code_2.png|1047px|thumb|center]]

The first modification was done as it fix the issue while keep code at its most simplicity; (As shown in screen shot)

The second modification was done to accommodate the scenario where if specific score given is over certain upper-limit x or lower-limit y, the score will be automatically reset to x or y accordingly so that the score will alway be in between x and y.

== Test implementation ==

Afterward, several tests were performed for the model class modifications using RSpec, with some of the code as shown below:

[[File:Rspec123.png|center]]

For this project, techniques such as Unit testing, constructor overloading, and technologies such as bower, carpybara, RSpec, etc, were used.

CSC/ECE 517 Fall 2017/E1787 OSS project Bronze Score calculations

2017-11-06T05:26:46Z

Skatta3: /* Explanation */

==Introduction==
This project involves revision of score calculation bug of Expertiza homework reviewing mechanism.

==Scenario==

Sometimes when a reviewee of a project or homework fills out the review form, he or she may leave certain review question blank. When taken into score calculation for the project or homework, the application instead fills in 0 on blank answers. This behavior is incorrect as the blank review answers should never be used when used to calculate final score.

Issue -

[[File:error_1787.png|center]]

==Solution==

Solution -

[[File:Grades.png|center]]

===Github Link===
Git Original link
*https://github.com/saiharsha1994/expertiza

Pull request link
*https://github.com/expertiza/expertiza/pull/1058

Git Revised link
*https://github.com/saiharsha1994/expertiza/tree/Bronzeproject

===Explanation===
====Average Calculation====
The scores are not calculated on dividing with total reviews given, instead calculated using total non null reviews given.

== Design Pattern Usage ==
We implemented using the MVC (Model View Controller) pattern. We felt it was the pattern used in expertiza , usage of same pattern would be much easier.

====Testing====
We have run unit test using RSpec and Carpybara. The test file path is spec/models/vm_question_response_row_spec.rb.

For the test, we have identified 2 scenarios. First one is regarding correctness on average score calculation, where we will create a VmQuestionResponseRow object with sample test scores inside and call its average_score_for_row method, then we match returned average to the expected average;

Second one is regarding whether average score calculation includes nil values, where we will create a VmQuestionResponseRow object with one or more nil sample test scores inside and call its average_score_for_row method, then we match returned average to the expected average to check if nil is redefined and used in score calculation.

In addition, we have also tested the initialization of VmQuestionResponseRow object with 5 parameters and 6 parameters to ensure the initialization process works as intended (see code).

==Our Work==

For the OSS project, the topic is fixing and modification on Expertize team score calculation mechanism. For this project, a meeting once every week for 2 weeks with TA was proceeded. The main focus for the first one and half week involves setting up the environment on the machine. Some of notable issues on setting up include theRubyRacer dependency problem on project, Node packages not recognized by rails (Windows), Font-Awesome-Rails path issues, etc, which were solved through file tracing, problem identifying, and debugging. For the rest of these a little over 2 weeks period, several issues were identified with the project. The main issue for program include the false score calculation mechanism by expertiza where empty scores are assumed automatically to 0 and included in calculation; this would in turn give a false score calculation result as empty scores are not supposed to be set to 0 and then included in for calculation. Through debugging and defining the problem, it was identified that the reason for such issue involves average_score_for_row method in vm_question_response_row.rb in model as shown below in red - where the row_average_score dividend was not been used correctly.

Comparison of code changes can be seen in Pull request.

The issue can be solved by modify the calculation for dividend using a counter to exclude nil values and modified the constructor for VmQuestionResponseRow classs that it can dynamically accept 5 or 6 parameters, as shown below (note: not_null_reviews.zero? check are used two times in order to pass the github check on coding, as combining these two lines into one (row_average_score = (row_average_score / not_null_reviews).round(2) unless not_null_reviews.zero?) would resulting in failing on github check, while the other solution which is putting both line into an unless block would not have any benefit execution efficiency wise).

Code after first modification -

[[File:code.png|1047px|thumb|center]]

Code after second modification -

[[File:code_2.png|1047px|thumb|center]]

The first modification was done as it fix the issue while keep code at its most simplicity; (As shown in screen shot)

The second modification was done to accommodate the scenario where if specific score given is over certain upper-limit x or lower-limit y, the score will be automatically reset to x or y accordingly so that the score will alway be in between x and y.

Afterward, several tests were performed for the model class modifications using RSpec, with some of the code as shown below:

[[File:Rspec123.png|center]]

For this project, techniques such as Unit testing, constructor overloading, and technologies such as bower, carpybara, RSpec, etc, were used.

CSC/ECE 517 Fall 2017/E1787 OSS project Bronze Score calculations

2017-11-04T21:40:49Z

Skatta3: /* Scenario */

==Introduction==
This project involves revision of score calculation bug of Expertiza homework reviewing mechanism.

==Scenario==

Sometimes when a reviewee of a project or homework fills out the review form, he or she may leave certain review question blank. When taken into score calculation for the project or homework, the application instead fills in 0 on blank answers. This behavior is incorrect as the blank review answers should never be used when used to calculate final score.

Issue -

[[File:error_1787.png|center]]

==Solution==

Solution -

[[File:Grades.png|center]]

===Github Link===
*https://github.com/saiharsha1994/expertiza

Pull request link
*https://github.com/expertiza/expertiza/pull/1058

===Explanation===
====Average Calculation====
The scores are not calculated on dividing with total reviews given, instead calculated using total non null reviews given.

====Testing====
We have run unit test using RSpec and Carpybara. The test file path is spec/models/vm_question_response_row_spec.rb.

For the test, we have identified 2 scenarios. First one is regarding correctness on average score calculation, where we will create a VmQuestionResponseRow object with sample test scores inside and call its average_score_for_row method, then we match returned average to the expected average;

Second one is regarding whether average score calculation includes nil values, where we will create a VmQuestionResponseRow object with one or more nil sample test scores inside and call its average_score_for_row method, then we match returned average to the expected average to check if nil is redefined and used in score calculation.

==Our Work==

For the OSS project, our topic is fixing and modification on Expertize team score calculation mechanism. For this project, we have meet once every week for 2 weeks either with TA. For the first one and half week, each of us has set up the environment on our machine. Some of notable issues on setting up include theRubyRacer dependency problem on project, Node packages not recognized by rails (Windows), Font-Awesome-Rails path issues, etc, and we worked together to identify the issues and finding ways to get around them. For the rest of these a little over 2 weeks period, we have identified several issues with our project. The main issue for our part include the false score calculation mechanism by expertiza where empty scores are assumed automatically to 0 and included in calculation; this would in turn give a false score calculation result as empty scores are not supposed to be set to 0 and then included in for calculation. Through debugging and defining the problem, we found that the reason for such issue involves average_score_for_row method in vm_question_response_row.rb in model as shown below in red - where the row_average_score dividend was not been used correctly.

Comparison of code changes can be seen in Pull request.

We proceeded to solve the issue by modify the calculation for dividend using a counter to exclude nil values and modified the constructor for VmQuestionResponseRow classs that it can dynamically accept 5 or 6 parameters, as shown below:

Code after first modification -

[[File:code.png|1047px|thumb|center]]

Code after second modification -

[[File:code_2.png|1047px|thumb|center]]

The first modification was done as it fix the issue while keep code at its most simplicity; (As shown in screen shot)

The second modification was done to accommodate the scenario where if specific score given is over certain upper-limit x or lower-limit y, the score will be automatically reset to x or y accordingly so that the score will alway be in between x and y.

Afterward, we have testing the model class modifications using RSpec, with code as shown below:

[[File:Rspec123.png|center]]

For this project, we have used techniques such as Unit testing, constructor overloading, and technologies such as bower, carpybara, RSpec, etc.

File:Error 1787.png

2017-11-04T21:40:30Z

Skatta3:

CSC/ECE 517 Fall 2017/E1787 OSS project Bronze Score calculations

2017-11-04T21:38:39Z

Skatta3: /* Explanation */

==Introduction==
This project involves revision of score calculation bug of Expertiza homework reviewing mechanism.

==Scenario==

Sometimes when a reviewee of a project or homework fills out the review form, he or she may leave certain review question blank. When taken into score calculation for the project or homework, the application instead fills in 0 on blank answers. This behavior is incorrect as the blank review answers should never be used when used to calculate final score.

Issue -

[[File:error.png|center]]

==Solution==

Solution -

[[File:Grades.png|center]]

===Github Link===
*https://github.com/saiharsha1994/expertiza

Pull request link
*https://github.com/expertiza/expertiza/pull/1058

===Explanation===
====Average Calculation====
The scores are not calculated on dividing with total reviews given, instead calculated using total non null reviews given.

====Testing====
We have run unit test using RSpec and Carpybara. The test file path is spec/models/vm_question_response_row_spec.rb.

For the test, we have identified 2 scenarios. First one is regarding correctness on average score calculation, where we will create a VmQuestionResponseRow object with sample test scores inside and call its average_score_for_row method, then we match returned average to the expected average;

Second one is regarding whether average score calculation includes nil values, where we will create a VmQuestionResponseRow object with one or more nil sample test scores inside and call its average_score_for_row method, then we match returned average to the expected average to check if nil is redefined and used in score calculation.

==Our Work==

For the OSS project, our topic is fixing and modification on Expertize team score calculation mechanism. For this project, we have meet once every week for 2 weeks either with TA. For the first one and half week, each of us has set up the environment on our machine. Some of notable issues on setting up include theRubyRacer dependency problem on project, Node packages not recognized by rails (Windows), Font-Awesome-Rails path issues, etc, and we worked together to identify the issues and finding ways to get around them. For the rest of these a little over 2 weeks period, we have identified several issues with our project. The main issue for our part include the false score calculation mechanism by expertiza where empty scores are assumed automatically to 0 and included in calculation; this would in turn give a false score calculation result as empty scores are not supposed to be set to 0 and then included in for calculation. Through debugging and defining the problem, we found that the reason for such issue involves average_score_for_row method in vm_question_response_row.rb in model as shown below in red - where the row_average_score dividend was not been used correctly.

Comparison of code changes can be seen in Pull request.

We proceeded to solve the issue by modify the calculation for dividend using a counter to exclude nil values and modified the constructor for VmQuestionResponseRow classs that it can dynamically accept 5 or 6 parameters, as shown below:

Code after first modification -

[[File:code.png|1047px|thumb|center]]

Code after second modification -

[[File:code_2.png|1047px|thumb|center]]

The first modification was done as it fix the issue while keep code at its most simplicity; (As shown in screen shot)

The second modification was done to accommodate the scenario where if specific score given is over certain upper-limit x or lower-limit y, the score will be automatically reset to x or y accordingly so that the score will alway be in between x and y.

Afterward, we have testing the model class modifications using RSpec, with code as shown below:

[[File:Rspec123.png|center]]

For this project, we have used techniques such as Unit testing, constructor overloading, and technologies such as bower, carpybara, RSpec, etc.

CSC/ECE 517 Fall 2017/E1787 OSS project Bronze Score calculations

2017-10-27T23:35:30Z

Skatta3: /* Our Work */

==Introduction==
This project involves revision of score calculation bug of Expertiza homework reviewing mechanism.

==Scenario==

Sometimes when a reviewee of a project or homework fills out the review form, he or she may leave certain review question blank. When taken into score calculation for the project or homework, the application instead fills in 0 on blank answers. This behavior is incorrect as the blank review answers should never be used when used to calculate final score.

Issue -

[[File:error.png|center]]

==Solution==

Solution -

[[File:Grades.png|center]]

===Github Link===
*https://github.com/saiharsha1994/expertiza

Pull request link
*https://github.com/expertiza/expertiza/pull/1058

===Explanation===
====Average Calculation====
The scores

====Testing====
We have run unit test using RSpec and Carpybara. The test file path is spec/models/vm_question_response_row_spec.rb.

For the test, we have identified 2 scenarios. First one is regarding correctness on average score calculation, where we will create a VmQuestionResponseRow object with sample test scores inside and call its average_score_for_row method, then we match returned average to the expected average;

Second one is regarding whether average score calculation includes nil values, where we will create a VmQuestionResponseRow object with one or more nil sample test scores inside and call its average_score_for_row method, then we match returned average to the expected average to check if nil is redefined and used in score calculation.

==Our Work==

For the OSS project, our topic is fixing and modification on Expertize team score calculation mechanism. For this project, we have meet once every week for 2 weeks either with TA. For the first one and half week, each of us has set up the environment on our machine. Some of notable issues on setting up include theRubyRacer dependency problem on project, Node packages not recognized by rails (Windows), Font-Awesome-Rails path issues, etc, and we worked together to identify the issues and finding ways to get around them. For the rest of these a little over 2 weeks period, we have identified several issues with our project. The main issue for our part include the false score calculation mechanism by expertiza where empty scores are assumed automatically to 0 and included in calculation; this would in turn give a false score calculation result as empty scores are not supposed to be set to 0 and then included in for calculation. Through debugging and defining the problem, we found that the reason for such issue involves average_score_for_row method in vm_question_response_row.rb in model as shown below in red - where the row_average_score dividend was not been used correctly.

Comparison of code changes can be seen in Pull request.

We proceeded to solve the issue by modify the calculation for dividend using a counter to exclude nil values and modified the constructor for VmQuestionResponseRow classs that it can dynamically accept 5 or 6 parameters, as shown below:

Code after first modification -

[[File:code.png|1047px|thumb|center]]

Code after second modification -

[[File:code_2.png|1047px|thumb|center]]

The first modification was done as it fix the issue while keep code at its most simplicity; (As shown in screen shot)

The second modification was done to accommodate the scenario where if specific score given is over certain upper-limit x or lower-limit y, the score will be automatically reset to x or y accordingly so that the score will alway be in between x and y.

Afterward, we have testing the model class modifications using RSpec, with code as shown below:

[[File:Rspec123.png|center]]

For this project, we have used techniques such as Unit testing, constructor overloading, and technologies such as bower, carpybara, RSpec, etc.

CSC/ECE 517 Fall 2017/E1787 OSS project Bronze Score calculations

2017-10-27T23:35:10Z

Skatta3: /* Our Work */

==Introduction==
This project involves revision of score calculation bug of Expertiza homework reviewing mechanism.

==Scenario==

Sometimes when a reviewee of a project or homework fills out the review form, he or she may leave certain review question blank. When taken into score calculation for the project or homework, the application instead fills in 0 on blank answers. This behavior is incorrect as the blank review answers should never be used when used to calculate final score.

Issue -

[[File:error.png|center]]

==Solution==

Solution -

[[File:Grades.png|center]]

===Github Link===
*https://github.com/saiharsha1994/expertiza

Pull request link
*https://github.com/expertiza/expertiza/pull/1058

===Explanation===
====Average Calculation====
The scores

====Testing====
We have run unit test using RSpec and Carpybara. The test file path is spec/models/vm_question_response_row_spec.rb.

For the test, we have identified 2 scenarios. First one is regarding correctness on average score calculation, where we will create a VmQuestionResponseRow object with sample test scores inside and call its average_score_for_row method, then we match returned average to the expected average;

Second one is regarding whether average score calculation includes nil values, where we will create a VmQuestionResponseRow object with one or more nil sample test scores inside and call its average_score_for_row method, then we match returned average to the expected average to check if nil is redefined and used in score calculation.

==Our Work==

For the OSS project, our topic is fixing and modification on Expertize team score calculation mechanism. For this project, we have meet once every week for 2 weeks either with TA. For the first one and half week, each of us has set up the environment on our machine. Some of notable issues on setting up include theRubyRacer dependency problem on project, Node packages not recognized by rails (Windows), Font-Awesome-Rails path issues, etc, and we worked together to identify the issues and finding ways to get around them. For the rest of these a little over 2 weeks period, we have identified several issues with our project. The main issue for our part include the false score calculation mechanism by expertiza where empty scores are assumed automatically to 0 and included in calculation; this would in turn give a false score calculation result as empty scores are not supposed to be set to 0 and then included in for calculation. Through debugging and defining the problem, we found that the reason for such issue involves average_score_for_row method in vm_question_response_row.rb in model as shown below in red - where the row_average_score dividend was not been used correctly.

Snap of changes in code

Comparison of code changes can be seen in Pull request.

We proceeded to solve the issue by modify the calculation for dividend using a counter to exclude nil values and modified the constructor for VmQuestionResponseRow classs that it can dynamically accept 5 or 6 parameters, as shown below:

Code after first modification -

[[File:code.png|1047px|thumb|center]]

Code after second modification -

[[File:code_2.png|1047px|thumb|center]]

The first modification was done as it fix the issue while keep code at its most simplicity; (As shown in screen shot)

The second modification was done to accommodate the scenario where if specific score given is over certain upper-limit x or lower-limit y, the score will be automatically reset to x or y accordingly so that the score will alway be in between x and y.

Afterward, we have testing the model class modifications using RSpec, with code as shown below:

[[File:Rspec123.png|center]]

For this project, we have used techniques such as Unit testing, constructor overloading, and technologies such as bower, carpybara, RSpec, etc.

CSC/ECE 517 Fall 2017/E1787 OSS project Bronze Score calculations

2017-10-27T23:28:27Z

Skatta3: /* Our Work */

==Introduction==
This project involves revision of score calculation bug of Expertiza homework reviewing mechanism.

==Scenario==

Sometimes when a reviewee of a project or homework fills out the review form, he or she may leave certain review question blank. When taken into score calculation for the project or homework, the application instead fills in 0 on blank answers. This behavior is incorrect as the blank review answers should never be used when used to calculate final score.

Issue -

[[File:error.png|center]]

==Solution==

Solution -

[[File:Grades.png|center]]

===Github Link===
*https://github.com/saiharsha1994/expertiza

Pull request link
*https://github.com/expertiza/expertiza/pull/1058

===Explanation===
====Average Calculation====
The scores

====Testing====
We have run unit test using RSpec and Carpybara. The test file path is spec/models/vm_question_response_row_spec.rb.

For the test, we have identified 2 scenarios. First one is regarding correctness on average score calculation, where we will create a VmQuestionResponseRow object with sample test scores inside and call its average_score_for_row method, then we match returned average to the expected average;

Second one is regarding whether average score calculation includes nil values, where we will create a VmQuestionResponseRow object with one or more nil sample test scores inside and call its average_score_for_row method, then we match returned average to the expected average to check if nil is redefined and used in score calculation.

==Our Work==

For the OSS project, our topic is fixing and modification on Expertize team score calculation mechanism. For this project, we have meet once every week for 2 weeks either with TA. For the first one and half week, each of us has set up the environment on our machine. Some of notable issues on setting up include theRubyRacer dependency problem on project, Node packages not recognized by rails (Windows), Font-Awesome-Rails path issues, etc, and we worked together to identify the issues and finding ways to get around them. For the rest of these a little over 2 weeks period, we have identified several issues with our project. The main issue for our part include the false score calculation mechanism by expertiza where empty scores are assumed automatically to 0 and included in calculation; this would in turn give a false score calculation result as empty scores are not supposed to be set to 0 and then included in for calculation. Through debugging and defining the problem, we found that the reason for such issue involves average_score_for_row method in vm_question_response_row.rb in model as shown below in red - where the row_average_score dividend was not been used correctly.

Snap of changes in code

Code after first modification -

[[File:GIT_change_snap.png|1047px|thumb|center]]

We proceeded to solve the issue by modify the calculation for dividend using a counter to exclude nil values and modified the constructor for VmQuestionResponseRow classs that it can dynamically accept 5 or 6 parameters, as shown below:

Code after first modification -

[[File:code.png|1047px|thumb|center]]

Code after second modification -

[[File:code_2.png|1047px|thumb|center]]

The first modification was done as it fix the issue while keep code at its most simplicity; (As shown in screen shot)

The second modification was done to accommodate the scenario where if specific score given is over certain upper-limit x or lower-limit y, the score will be automatically reset to x or y accordingly so that the score will alway be in between x and y.

Afterward, we have testing the model class modifications using RSpec, with code as shown below:

[[File:Rspec123.png|center]]

For this project, we have used techniques such as Unit testing, constructor overloading, and technologies such as bower, carpybara, RSpec, etc.

File:Code 2.png

2017-10-27T23:27:33Z

Skatta3:

CSC/ECE 517 Fall 2017/E1787 OSS project Bronze Score calculations

2017-10-27T23:25:45Z

Skatta3: /* Our Work */

==Introduction==
This project involves revision of score calculation bug of Expertiza homework reviewing mechanism.

==Scenario==

Sometimes when a reviewee of a project or homework fills out the review form, he or she may leave certain review question blank. When taken into score calculation for the project or homework, the application instead fills in 0 on blank answers. This behavior is incorrect as the blank review answers should never be used when used to calculate final score.

Issue -

[[File:error.png|center]]

==Solution==

Solution -

[[File:Grades.png|center]]

===Github Link===
*https://github.com/saiharsha1994/expertiza

Pull request link
*https://github.com/expertiza/expertiza/pull/1058

===Explanation===
====Average Calculation====
The scores

====Testing====
We have run unit test using RSpec and Carpybara. The test file path is spec/models/vm_question_response_row_spec.rb.

For the test, we have identified 2 scenarios. First one is regarding correctness on average score calculation, where we will create a VmQuestionResponseRow object with sample test scores inside and call its average_score_for_row method, then we match returned average to the expected average;

Second one is regarding whether average score calculation includes nil values, where we will create a VmQuestionResponseRow object with one or more nil sample test scores inside and call its average_score_for_row method, then we match returned average to the expected average to check if nil is redefined and used in score calculation.

==Our Work==

For the OSS project, our topic is fixing and modification on Expertize team score calculation mechanism. For this project, we have meet once every week for 2 weeks either with TA. For the first one and half week, each of us has set up the environment on our machine. Some of notable issues on setting up include theRubyRacer dependency problem on project, Node packages not recognized by rails (Windows), Font-Awesome-Rails path issues, etc, and we worked together to identify the issues and finding ways to get around them. For the rest of these a little over 2 weeks period, we have identified several issues with our project. The main issue for our part include the false score calculation mechanism by expertiza where empty scores are assumed automatically to 0 and included in calculation; this would in turn give a false score calculation result as empty scores are not supposed to be set to 0 and then included in for calculation. Through debugging and defining the problem, we found that the reason for such issue involves average_score_for_row method in vm_question_response_row.rb in model as shown below in red - where the row_average_score dividend was not been used correctly.

Snap of changes in code

Code after first modification -

[[File:GIT_change_snap.png|1047px|thumb|center]]

We proceeded to solve the issue by modify the calculation for dividend using a counter to exclude nil values and modified the constructor for VmQuestionResponseRow classs that it can dynamically accept 5 or 6 parameters, as shown below:

Code -

[[File:code.png|1047px|thumb|center]]

The first modification was done as it fix the issue while keep code at its most simplicity; (As shown in screen shot)

The second modification was done to accommodate the scenario where if specific score given is over certain upper-limit x or lower-limit y, the score will be automatically reset to x or y accordingly so that the score will alway be in between x and y.

Afterward, we have testing the model class modifications using RSpec, with code as shown below:

[[File:Rspec123.png|center]]

For this project, we have used techniques such as Unit testing, constructor overloading, and technologies such as bower, carpybara, RSpec, etc.

File:Rspec123.png

2017-10-27T23:24:50Z

Skatta3: uploaded a new version of "File:Rspec123.png"

File:Rspec123.png

2017-10-27T23:20:38Z

Skatta3:

CSC/ECE 517 Fall 2017/E1787 OSS project Bronze Score calculations

2017-10-27T23:19:01Z

Skatta3: /* Our Work */

==Introduction==
This project involves revision of score calculation bug of Expertiza homework reviewing mechanism.

==Scenario==

Sometimes when a reviewee of a project or homework fills out the review form, he or she may leave certain review question blank. When taken into score calculation for the project or homework, the application instead fills in 0 on blank answers. This behavior is incorrect as the blank review answers should never be used when used to calculate final score.

Issue -

[[File:error.png|center]]

==Solution==

Solution -

[[File:Grades.png|center]]

===Github Link===
*https://github.com/saiharsha1994/expertiza

Pull request link
*https://github.com/expertiza/expertiza/pull/1058

===Explanation===
====Average Calculation====
The scores

====Testing====
We have run unit test using RSpec and Carpybara. The test file path is spec/models/vm_question_response_row_spec.rb.

For the test, we have identified 2 scenarios. First one is regarding correctness on average score calculation, where we will create a VmQuestionResponseRow object with sample test scores inside and call its average_score_for_row method, then we match returned average to the expected average;

Second one is regarding whether average score calculation includes nil values, where we will create a VmQuestionResponseRow object with one or more nil sample test scores inside and call its average_score_for_row method, then we match returned average to the expected average to check if nil is redefined and used in score calculation.

==Our Work==

For the OSS project, our topic is fixing and modification on Expertize team score calculation mechanism. For this project, we have meet once every week for 2 weeks either with TA. For the first one and half week, each of us has set up the environment on our machine. Some of notable issues on setting up include theRubyRacer dependency problem on project, Node packages not recognized by rails (Windows), Font-Awesome-Rails path issues, etc, and we worked together to identify the issues and finding ways to get around them. For the rest of these a little over 2 weeks period, we have identified several issues with our project. The main issue for our part include the false score calculation mechanism by expertiza where empty scores are assumed automatically to 0 and included in calculation; this would in turn give a false score calculation result as empty scores are not supposed to be set to 0 and then included in for calculation. Through debugging and defining the problem, we found that the reason for such issue involves average_score_for_row method in vm_question_response_row.rb in model as shown below in red - where the row_average_score dividend was not been used correctly.

Snap of changes in code

Code after first modification -

[[File:GIT_change_snap.png|1047px|thumb|center]]

We proceeded to solve the issue by modify the calculation for dividend using a counter to exclude nil values and modified the constructor for VmQuestionResponseRow classs that it can dynamically accept 5 or 6 parameters, as shown below:

Code -

[[File:code.png|1047px|thumb|center]]

The first modification was done as it fix the issue while keep code at its most simplicity; (As shown in screen shot)

The second modification was done to accommodate the scenario where if specific score given is over certain upper-limit x or lower-limit y, the score will be automatically reset to x or y accordingly so that the score will alway be in between x and y.

Afterward, we have testing the model class modifications using RSpec, with code as shown below:

[[File:Rspec.png|center]]

For this project, we have used techniques such as Unit testing, constructor overloading, and technologies such as bower, carpybara, RSpec, etc.

CSC/ECE 517 Fall 2017/E1787 OSS project Bronze Score calculations

2017-10-27T23:13:53Z

Skatta3: /* Solution */

==Introduction==
This project involves revision of score calculation bug of Expertiza homework reviewing mechanism.

==Scenario==

Sometimes when a reviewee of a project or homework fills out the review form, he or she may leave certain review question blank. When taken into score calculation for the project or homework, the application instead fills in 0 on blank answers. This behavior is incorrect as the blank review answers should never be used when used to calculate final score.

Issue -

[[File:error.png|center]]

==Solution==

Solution -

[[File:Grades.png|center]]

===Github Link===
*https://github.com/saiharsha1994/expertiza

Pull request link
*https://github.com/expertiza/expertiza/pull/1058

===Explanation===
====Average Calculation====
The scores

====Testing====
We have run unit test using RSpec and Carpybara. The test file path is spec/models/vm_question_response_row_spec.rb.

For the test, we have identified 2 scenarios. First one is regarding correctness on average score calculation, where we will create a VmQuestionResponseRow object with sample test scores inside and call its average_score_for_row method, then we match returned average to the expected average;

Second one is regarding whether average score calculation includes nil values, where we will create a VmQuestionResponseRow object with one or more nil sample test scores inside and call its average_score_for_row method, then we match returned average to the expected average to check if nil is redefined and used in score calculation.

==Our Work==

For the OSS project, our topic is fixing and modification on Expertize team score calculation mechanism. For this project, we have meet once every week for 2 weeks either with TA. For the first one and half week, each of us has set up the environment on our machine. Some of notable issues on setting up include theRubyRacer dependency problem on project, Node packages not recognized by rails (Windows), Font-Awesome-Rails path issues, etc, and we worked together to identify the issues and finding ways to get around them. For the rest of these a little over 2 weeks period, we have identified several issues with our project. The main issue for our part include the false score calculation mechanism by expertiza where empty scores are assumed automatically to 0 and included in calculation; this would in turn give a false score calculation result as empty scores are not supposed to be set to 0 and then included in for calculation. Through debugging and defining the problem, we found that the reason for such issue involves average_score_for_row method in vm_question_response_row.rb in model as shown below in red - where the row_average_score dividend was not been used correctly.

Snap of changes in code

Code after first modification -

[[File:GIT_change_snap.png|1047px|thumb|center]]

We proceeded to solve the issue by modify the calculation for dividend using a counter to exclude nil values and modified the constructor for VmQuestionResponseRow classs that it can dynamically accept 5 or 6 parameters, as shown below:

Code -

[[File:code.png|1047px|thumb|center]]

The first modification was done as it fix the issue while keep code at its most simplicity; (As shown in screen shot)

The second modification was done to accommodate the scenario where if specific score given is over certain upper-limit x or lower-limit y, the score will be automatically reset to x or y accordingly so that the score will alway be in between x and y.

Afterward, we have testing the model class modifications using RSpec, with code as shown below:

(post code)

For this project, we have used techniques such as Unit testing, constructor overloading, and technologies such as bower, carpybara, RSpec, etc.

CSC/ECE 517 Fall 2017/E1787 OSS project Bronze Score calculations

2017-10-27T23:10:54Z

Skatta3: /* Solution */

==Introduction==
This project involves revision of score calculation bug of Expertiza homework reviewing mechanism.

==Scenario==

Sometimes when a reviewee of a project or homework fills out the review form, he or she may leave certain review question blank. When taken into score calculation for the project or homework, the application instead fills in 0 on blank answers. This behavior is incorrect as the blank review answers should never be used when used to calculate final score.

Issue -

[[File:error.png|center]]

==Solution==

Solution -

[[File:Grades.png|center]]

===Github Link===
*https://github.com/saiharsha1994/expertiza

===Pull request Link===
*https://github.com/expertiza/expertiza/pull/1058

===Explanation===
====Average Calculation====
The scores

====Testing====
We have run unit test using RSpec and Carpybara. The test file path is spec/models/vm_question_response_row_spec.rb.

For the test, we have identified 2 scenarios. First one is regarding correctness on average score calculation, where we will create a VmQuestionResponseRow object with sample test scores inside and call its average_score_for_row method, then we match returned average to the expected average;

Second one is regarding whether average score calculation includes nil values, where we will create a VmQuestionResponseRow object with one or more nil sample test scores inside and call its average_score_for_row method, then we match returned average to the expected average to check if nil is redefined and used in score calculation.

==Our Work==

For the OSS project, our topic is fixing and modification on Expertize team score calculation mechanism. For this project, we have meet once every week for 2 weeks either with TA. For the first one and half week, each of us has set up the environment on our machine. Some of notable issues on setting up include theRubyRacer dependency problem on project, Node packages not recognized by rails (Windows), Font-Awesome-Rails path issues, etc, and we worked together to identify the issues and finding ways to get around them. For the rest of these a little over 2 weeks period, we have identified several issues with our project. The main issue for our part include the false score calculation mechanism by expertiza where empty scores are assumed automatically to 0 and included in calculation; this would in turn give a false score calculation result as empty scores are not supposed to be set to 0 and then included in for calculation. Through debugging and defining the problem, we found that the reason for such issue involves average_score_for_row method in vm_question_response_row.rb in model as shown below in red - where the row_average_score dividend was not been used correctly.

Snap of changes in code

Code after first modification -

[[File:GIT_change_snap.png|1047px|thumb|center]]

We proceeded to solve the issue by modify the calculation for dividend using a counter to exclude nil values and modified the constructor for VmQuestionResponseRow classs that it can dynamically accept 5 or 6 parameters, as shown below:

Code -

[[File:code.png|1047px|thumb|center]]

The first modification was done as it fix the issue while keep code at its most simplicity; (As shown in screen shot)

The second modification was done to accommodate the scenario where if specific score given is over certain upper-limit x or lower-limit y, the score will be automatically reset to x or y accordingly so that the score will alway be in between x and y.

Afterward, we have testing the model class modifications using RSpec, with code as shown below:

(post code)

For this project, we have used techniques such as Unit testing, constructor overloading, and technologies such as bower, carpybara, RSpec, etc.