Expertiza_Wiki - User contributions [en]

CSC/ECE 517 Spring 2017/Convert Assignment Creation Form to ReactJS

2017-05-03T16:35:57Z

Vhegde: Final Edit

== Introduction ==
This page is a part of CSC/ECE 517 Final Project for Spring 2017 to describe the changes made by us to the open source software project Expertiza. We are converting the assignment creation form to ReactJS. Following contains a brief introduction to Expertiza, ReactJS followed by the problems we are tackling, our strategy for the implementation and the test plan.

==Expertiza==
Expertiza is a Ruby on Rails based web application where students can submit and peer review learning objects such as codes, articles, websites etc., It is an open source software project funded by National Science Foundation(NSF). The instructor has the capability to create assignments with varied specifications such as topics, courses, team size, level of reviews etc., later review the submitted work and provide feedback. Students can enter their submissions and also review others' work.

==ReactJS==
[https://en.wikipedia.org/wiki/React_(JavaScript_library) ReactJS] is the javascript framework developed by Facebook to solve the specific problem, ''UI rendering''. It is developed to solve the problem with complex binding in MVC framework using only one-way data binding. It is used for dynamic reloading of the page. It helps in reloading only the particular component required using Virtual DOM, which makes it fast by temporarily storing DOM

'''Reasons for using ReactJS'''
* It has every functionality that an user interface required
* Easy data binding.
* Only single component changes are stored/changed without reloading the complete page.
* Fast and efficient
* Easy to scale

==Problem Statement==
The Assignment Create and Edit Form are multi level forms. It consists of multiple inputs and user interactions. Many input types have dependency on interactions by the user. For example, on check for a particular checkbox, remaining form is displayed. Also, edit page is reloaded whenever a topic is added. The task is to convert this pages into ReactJS components.

'''Tasks to be done'''
*Organize the form layout, create several mockups and validate them to your users
*Make the table in topics tab sortable by its header
*Allow users to edit / add topics in the table instead of loading a new page
*Implement the new layout and convert the javascript to a ReactJS component
*Validate user entries
*Fix tooltips - Needed to increase the proximity of the tool tips in the assignments tab.

==Current Implementation==
===Assignment Creation===
The assignment creation form consists of multiple inputs and requires interactions from the user. The current implementation is mostly in HTML with data validations being done by JQuery. When a user wants to create a new assignment by clicking the new assignment button, a server request is generated and new view is rendered. Again, another server request to make database entry is generated once the user fills in the data and clicks on 'save' button and again a new view is rendered. This kind of implementation doesn't support dynamic view rendering hence lacks the fluidity in overall user experience that one would expect.

[[File:Create1.JPG]]
 
 
 

[[File:Create2.JPG]]

===Assignment Edition===
Similar to assignment creation page, edit page lacks the dynamic view rendering which makes the user experience cumbersome. Every time user wants to make changes to the assignment, a server request is generated and new view is rendered. The save button hit on completion will again generate another server request and render a new view.

[[File:Edit.jpg]]

=== Add/Edit topics in Assignment ===
In current implementation whenever a topic is added to the assignment, a request is sent to the server and user is redirected to a form in another page. Upon creation of topic user is rendered back to edit assignment page. This process involves lot of redirection. Now, the task is to avoid this redirection of pages and create a interactive ReactJS form for adding and editing topic.

Currently this logic is implemented in new method in sign_up_controller.rb file and is invoked in the _add_topics.rb ruby injection file. With this action new.html.erb page is rendered. This should be avoided.

'''Add topic:'''

[[File:Add_topic_form.PNG]]

Similar is the case for editing a topic. For editing a topic user is rendered to a form in edit page and again redirected to edit assignment page.

'''Edit Topic:'''

[[File:Edit_topic_form.PNG]]

===Make the table in topics tab sortable by its header===
Currently after creating an assignment, we can add topics related to the assignment. The "Topics" tab in the edit assignment form shows the list of topics that are added to the assignment. The picture below shows the current page for displaying the list of topics of an assignment. The list is not sortable. The task is to make it sortable using ReactJS by topic id, topic name, Num. of slots, Available slots, Num. on waitlist columns as sorting on remaining columns doesn't give any meaningful display.

[[File:topics_tab_assignment.png]]

===Validating user entries===
The entries for the assignment creation are not according to any restrictions, that can add problem to database maintenance like sorting the entries, comparing them, retrieving. There are many such problem causing situations in the new assignment form, such as

This is essential in both new assignment or editing assignment page.

* User can add the number as new assignment name or he can give only special characters for it like "$$$$".
* Though mentioned a mandatory no special characters, it was not properly implemented. System is accepting the special characters.
* Neglecting check boxes may lead to confusion with deadlines.

[[File:Vaidatinguser.PNG]]

'''UML Diagram'''

The following diagram depicts the flow of events leading to validations.

[[File:Uml for validation.png]]

==Proposed Solution==
=== Assignment Creation ===
The new implementation uses ReactJS to generate a drop-down window on clicking on the New Assignment button (private/public) , providing same features as before. Database entry is made on submitting the form and the form is closed.

Below is the view of the new implementation:

[[File:Newassgn_RJS.png]]

==== Files modified ====
*apps/assets/javascripts/tree_display.jsx.erb
*apps/controllers/assignments_controller.rb
*apps/controllers/tree_display_controller.rb

====Code change details====
We created a new React class 'NewAssignmentForm' which dynamically creates and displays the form for New assignment. This class has the following methods:
getInitialState function(){} - Initial method to identify the form parameters that will be sent to the database when a new assignment is created.
handleNameChange function(e){} - The following methods get triggered on change of the form fields and capture/update the state variables
handleCourseChange: function(e){} -//-
handleSubChange: function(e){} -//-
handleDescChange: function(e){} -//-
handleTeamChange: function(e){} -//-
handleQuizChange: function(e){} -//-
handleDeadlineChange: function(e){} -//-
handleReviewsChange: function(e){} -//-
handleCalibrationChange: function(e){} -//-
handleAvailabilityChange: function(e){} -//-
handleReputationChange: function(e){} -//-

directoryValidate: function(e){} - this method validates that there is valid directory entered
nameValidate: function(e){} - this method validates that a valid project name is entered

handleCreateAssignment: function(e) {} - this method sends ajax request with the parameters from the filled form.

handleGetCourses: function() {} - this method is triggered when a course selection drop down is clicked. It sends a jQuery request and gets all the courses based on the instructor role

render: function(){} - this method renders the form components

In assignment_controller.rb we changed the create method to:

@assignment_form = AssignmentForm.new(assignment_form_params)
@assignment_form.assignment.instructor_id = current_user.id -- We now pass current instructor to the assignment form.
if @assignment_form.save
@assignment_form.create_assignment_node
flash[:success] = "Assignment Successfully created"
render 'tree_display/list'
else
flash[:error] = "Failed to Create Assignment"
render 'tree_display/list'
end
end

In tree_display_controller.rb we added new method get_courses_node_ng. This method returns the course list array of hashes based on the instructor chosen. This logic is similar to the helper method course_options:

def get_courses_node_ng
respond_to do |format|
courses = []
if session[:user].role.name == 'Teaching Assistant'
ta = Ta.find(session[:user].id)
ta.ta_mappings.each {|mapping| courses << Course.find(mapping.course_id) }
# If a TA created some courses before, s/he can still add new assignments to these courses.
courses << Course.where(instructor_id: session[:user].id)
courses.flatten!
# Administrator and Super-Administrator can see all courses
elsif session[:user].role.name == 'Administrator' or session[:user].role.name == 'Super-Administrator'
courses = Course.all
elsif session[:user].role.name == 'Instructor'
courses = Course.where(instructor_id: session[:user].id)
# instructor can see courses his/her TAs created
ta_ids = []
ta_ids << Instructor.get_my_tas(session[:user].id)
ta_ids.flatten!
ta_ids.each do |ta_id|
ta = Ta.find(ta_id)
ta.ta_mappings.each {|mapping| courses << Course.find(mapping.course_id) }
end
end
format.html { render json:courses}
end
end

=== Assignment Edition ===
Similar to assignment creation, in the new implementation, using ReactJS, when the edit assignment button is clicked, instead of making a server request and rendering a new view, a drop down window appears and saving the details will make the database entry.Since all the processing is done on the client side there will be decrease in the number of server requests.

However, the edit form is a multilevel form with different tabs. We managed to implement only the general view as React JS form, hence we added a new action item "Quick Edit" which renders the ReactJS form and the "Edit" action item works as before.

Below is the view of the new implementation:

[[File:New editassignment.png]]

==== Files modified ====
*apps/assets/javascripts/tree_display.jsx.erb
*apps/controllers/assignments_controller.rb
*apps/controllers/tree_display_controller.rb

==== Code change details ====
In tree_display.jsx we created a new React class EditAssignmentForm which dynamically creates and displays the form for Editing assignment. This class has the following methods:
componentWillReceiveProps(nextProps) - To handle edit
getInitialState function(){} - Here we identify the form parameters.
handleNameChange function(e){} - The following methods get triggered on change of the form fields and capture/update the state variables
handleCourseChange: function(e){} -//-
handleSubChange: function(e){} -//-
handleDescChange: function(e){} -//-
handleTeamChange: function(e){} -//-
handleQuizChange: function(e){} -//-
handleDeadlineChange: function(e){} -//-
handleReviewsChange: function(e){} -//-
handleCalibrationChange: function(e){} -//-
handleAvailabilityChange: function(e){} -//-
handleReputationChange: function(e){} -//-

directoryValidate: function(e){} - this method validates that there is valid directory entered
nameValidate: function(e){} - this method validates that a valid project name isentered

handleEditAssignment: function(e) {} - this method sends ajax request with the parameters from the filled form.

handleGetCourses: function() {} - this method is triggered when a course selection drop down is clicked. It sends a jQuery request and gets all the courses based on the instructor role

render: function(){} - this method renders the form components

We also added the following in the class RowAction to display the form fields when clicked on Quick Edit.
if (this.props.dataType === 'assignment') {
moreContent.push(

<a title="Quick Edit" onClick ={this.onClick} ><img src="/assets/tree_view/edit-icon-24.png" /></a>{this.state.showForm ? <EditAssignmentForm
assignmentId={this.props.id} name={this.props.parent_name} directory_path={this.props.directory} spec_location={this.props.spec_location} course_id=
{this.props.course_id} require_quiz={this.props.require_quiz} is_available={this.props.availability} max_team_size={this.props.max_team_size}
staggered_deadline={this.props.staggered_deadline} microtask={this.props.microtask} review_visible={this.props.review_visible} calibration=
{this.props.calibration} reputation={this.props.reputation} quiz_questions={this.props.quiz_questions} teammate_review={this.props.teammate_review} />
:null}
)
}

In assignment_controller.rb we edited update method:

if @assignment_form.update_attributes(assignment_form_params, current_user)
flash[:note] = 'The assignment was successfully saved.'
render 'tree_display/list'
else
flash[:error] = "Failed to save the assignment: #{@assignment_form.errors}"
render 'tree_display/list'
end

In tree_display_controller.rb we edited assignments_method to fetch all the parameters we need to display fields with appropriate values when Quick edit is clicked:

def assignments_method(node, tmp_object)
tmp_object.merge!(
"course_id" => node.get_course_id,
"max_team_size" => node.get_max_team_size,
"is_intelligent" => node.get_is_intelligent,
"require_quiz" => node.get_require_quiz,
"quiz_questions" => node.get_quiz_questions,
"allow_suggestions" => node.get_allow_suggestions,
"spec_location" => node.get_spec_location,
"staggered_deadline" =>node.get_staggered_deadline,
"microtask" => node.get_microtask,
"review_visible" => node.get_review_visible,
"calibration" => node.get_calibration,
"reputation" => node.get_reputation_algorithm,
"teammate_review" => node.get_teammate_review,
"availability" => node.get_availability,
"has_topic" => SignUpTopic.where(['assignment_id = ?', node.node_object_id]).first ? true : false
)
end

=== Adding/Editing of topics ===
* An interactive React JS component should be created and should be called by the ruby injection page ''sign_up_sheet/_add_topics.html.erb'' when New Topic link is clicked. This should show a form in that page to create topic.
* Delete/avoid usage of ''sign_up_sheet/new.html.erb'' page.
* Implement an React JS functional component to handle creation of topic and saving it to database.

====Code change details====
Tried to add topics using react js code in the file * app/views/sign_up_sheet/_add_topics.html.erb

Modified files code:

[[File:T1.PNG]]

[[File:T2.PNG]]

[[File:T3.PNG]]

[[File:T4.PNG]]

=== Make the table in topics tab sortable by its header ===
Following sub-tasks are implemented for sortable feature for topics table.
* Modify sign_up_sheet/_table_header.html.erb partial to change the table header fields to sortable type.
* Add sort functionality using ReactJS for each column that is meaningful to be sorted.
* Below is how output will look like

====Code change details====
Below are the files modified.

* app/views/sign_up_sheet/_add_signup_topics.html.erb

[[File:Signup_topics.PNG]]

* app/views/sign_up_sheet/_table_header.html.erb

[[File:Table_header.PNG]]

[[File:Js.PNG]]

[[File:css.PNG]]

=== Validating user entries ===
The following tasks are implemented to achieve users validation,
* Add the regular expression validation to avoid special characters in the names of assignment or directories.
* Correcting the code in edit assignment page too.
* Create validation for edge cases like giving empty values.

Here is the display of the implementation:
[[File:Validate_create.JPG]]

[[File:Validate_edit.JPG]]

==== Files modified ====
* app/assets/javascripts/tree_display.jsx.erb

==== Code change details ====
These methods are added inside Create/Edit ReactJS class and called whenever Create/Update buttons are clicked:
nameValidate: function(e){
var regex_valid = /^[a-zA-Z0-9]*$/;
var regex=/^(?=\s*\S).*$/;
if(regex.test(e) && regex_valid.test(e))
return true;
else{
document.getElementById("name_span").innerHTML = " &#x2716 Name cannot be empty! and no special characters are allowed. Please check the format";
return false;
}
},

directoryValidate: function(e){
var regex=/^[a-zA-Z0-9]*$/;
var regex_empty=/^(?=\s*\S).*$/;
if(regex.test(e) && regex_empty.test(e))
return true;
else {
document.getElementById("directory_span").innerHTML = "&#x2716 Submission Directory cannot have special characters or spaces. It cannot be empty!";
return false;
}
},

=== Fixing Tooltips ===
On exploring, it was noticed that all the existing tooltips work. However, we have increased the proximity of the tooltips in the assignment tab by increasing the size of the images.

==Test Plan==
Rails development is the Test Driven development, which helps in ensuring the implementation of all proposed implementations. We will be writing all the implementations proposed as tests that will eventually be red in rspec and try to make them green by adding to the development part.

===Manual Testing===
Steps to manually test the feature are as follows:

====Assignment Creation====
*Log in as an instructor ''(user-name:instructor6 password:password)''
*Go to Manage->Assignments and click on the Assignments tab.
*Click on the 'New public assignment' or 'New private assignment' button
*Verify if drop-down window is displayed.
*Make valid entries for the available fields and click on 'create'.
*Verify if new assignment is successfully created.

====Assignment Creation====
*Log in as an instructor ''(user-name:instructor6 password:password)''
*Go to Manage->Assignments and click on the Assignments tab.
*Click on the Edit button for any of the available assignment.
*Verify if drop-down window is displayed.
*Make changes and click on 'save'.
*Verify if the changes made are successfully updated.

====Topic Creation/Editing====
* Login as an instructor ''(user-name:instructor6 password:password)''
* Create an assignment
* Click 'New Topic' link or 'edit' action in topics table for a particular topic
* A pop window or form should be displayed in the same page
* Add topic details in that window/ form
* Save it
* Created or modified topic should be seen in topics table

====Make the table in topics tab sortable by its header====
* Login as an instructor ''(user-name:instructor6 password:password)''
* Create an assignment
* Add 2 topics to the assignment
* Click sort on Topic ID and check if they are sorted
* Click sort on Topic title and check if they are sorted
* Similarly test using other columns

====Validating user entries====
*Log in as an instructor ''(user-name:instructor6 password:password)''
*Go to Manage->Assignments and click on the Assignments tab.
*Click on the 'New public assignment' or 'New private assignment' button
*Try adding the assignment using the weird names, with special symbols, ignoring check boxes
*Verify if the assignment is shown in the table.

Another way to check is from editing page too.
*Log in as an instructor ''(user-name:instructor6 password:password)''
*Go to Manage->Assignments and click on the Assignments tab.
*Click on the Edit icon page.
*Try adding the assignment using the weird names, with special symbols, ignoring check boxes
*Verify if the assignment which is updated with special characters is shown in the table.

==Future Work==

*Covert the multi-level edit assignment form to ReactJS
*Convert add/edit topics to ReactJS

==References==

#''http://railscasts.com/episodes/228-sortable-table-columns sortable-columns''
#''https://www.airpair.com/reactjs/posts/reactjs-a-guide-for-rails-developers adding-reactjs''
#''https://github.com/expertiza/expertiza/pull/855

File:Validate edit.JPG

2017-05-03T16:28:52Z

Vhegde:

File:Validate create.JPG

2017-05-03T16:28:09Z

Vhegde:

CSC/ECE 517 Spring 2017/Convert Assignment Creation Form to ReactJS

2017-05-03T16:16:20Z

Vhegde: added code for new implementation

== Introduction ==
This page is a part of CSC/ECE 517 Final Project for Spring 2017 to describe the changes made by us to the open source software project Expertiza. We are converting the assignment creation form to ReactJS. Following contains a brief introduction to Expertiza, ReactJS followed by the problems we are tackling, our strategy for the implementation and the test plan.

==Expertiza==
Expertiza is a Ruby on Rails based web application where students can submit and peer review learning objects such as codes, articles, websites etc., It is an open source software project funded by National Science Foundation(NSF). The instructor has the capability to create assignments with varied specifications such as topics, courses, team size, level of reviews etc., later review the submitted work and provide feedback. Students can enter their submissions and also review others' work.

==ReactJS==
[https://en.wikipedia.org/wiki/React_(JavaScript_library) ReactJS] is the javascript framework developed by Facebook to solve the specific problem, ''UI rendering''. It is developed to solve the problem with complex binding in MVC framework using only one-way data binding. It is used for dynamic reloading of the page. It helps in reloading only the particular component required using Virtual DOM, which makes it fast by temporarily storing DOM

'''Reasons for using ReactJS'''
* It has every functionality that an user interface required
* Easy data binding.
* Only single component changes are stored/changed without reloading the complete page.
* Fast and efficient
* Easy to scale

==Problem Statement==
The Assignment Create and Edit Form are multi level forms. It consists of multiple inputs and user interactions. Many input types have dependency on interactions by the user. For example, on check for a particular checkbox, remaining form is displayed. Also, edit page is reloaded whenever a topic is added. The task is to convert this pages into ReactJS components.

'''Tasks to be done'''
*Organize the form layout, create several mockups and validate them to your users
*Make the table in topics tab sortable by its header
*Allow users to edit / add topics in the table instead of loading a new page
*Implement the new layout and convert the javascript to a ReactJS component
*Validate user entries
*Fix tooltips - Needed to increase the proximity of the tool tips in the assignments tab.

==Current Implementation==
===Assignment Creation===
The assignment creation form consists of multiple inputs and requires interactions from the user. The current implementation is mostly in HTML with data validations being done by JQuery. When a user wants to create a new assignment by clicking the new assignment button, a server request is generated and new view is rendered. Again, another server request to make database entry is generated once the user fills in the data and clicks on 'save' button and again a new view is rendered. This kind of implementation doesn't support dynamic view rendering hence lacks the fluidity in overall user experience that one would expect.

[[File:Create1.JPG]]
 
 
 

[[File:Create2.JPG]]

===Assignment Edition===
Similar to assignment creation page, edit page lacks the dynamic view rendering which makes the user experience cumbersome. Every time user wants to make changes to the assignment, a server request is generated and new view is rendered. The save button hit on completion will again generate another server request and render a new view.

[[File:Edit.jpg]]

=== Add/Edit topics in Assignment ===
In current implementation whenever a topic is added to the assignment, a request is sent to the server and user is redirected to a form in another page. Upon creation of topic user is rendered back to edit assignment page. This process involves lot of redirection. Now, the task is to avoid this redirection of pages and create a interactive ReactJS form for adding and editing topic.

Currently this logic is implemented in new method in sign_up_controller.rb file and is invoked in the _add_topics.rb ruby injection file. With this action new.html.erb page is rendered. This should be avoided.

'''Add topic:'''

[[File:Add_topic_form.PNG]]

Similar is the case for editing a topic. For editing a topic user is rendered to a form in edit page and again redirected to edit assignment page.

'''Edit Topic:'''

[[File:Edit_topic_form.PNG]]

===Make the table in topics tab sortable by its header===
Currently after creating an assignment, we can add topics related to the assignment. The "Topics" tab in the edit assignment form shows the list of topics that are added to the assignment. The picture below shows the current page for displaying the list of topics of an assignment. The list is not sortable. The task is to make it sortable using ReactJS by topic id, topic name, Num. of slots, Available slots, Num. on waitlist columns as sorting on remaining columns doesn't give any meaningful display.

[[File:topics_tab_assignment.png]]

===Validating user entries===
The entries for the assignment creation are not according to any restrictions, that can add problem to database maintenance like sorting the entries, comparing them, retrieving. There are many such problem causing situations in the new assignment form, such as

This is essential in both new assignment or editing assignment page.

* User can add the number as new assignment name or he can give only special characters for it like "$$$$".
* Though mentioned a mandatory no special characters, it was not properly implemented. System is accepting the special characters.
* Neglecting check boxes may lead to confusion with deadlines.

[[File:Vaidatinguser.PNG]]

'''UML Diagram'''

The following diagram depicts the flow of events leading to validations.

[[File:Uml for validation.png]]

==Implementation==

Here is the main code for the regular expression check in Name of assignment and sub directory fields. Now, each time when a create button is clicked, the page is not checked with the model constraints but the reactjs component only. So, without reloading each time the checks are shown on the page as shown in the figure below.

[[File:Validate.PNG]]

==== Making topics table sortable on columns ====

Below are the files modified.

* app/views/sign_up_sheet/_add_signup_topics.html.erb

[[File:Signup_topics.PNG]]

* app/views/sign_up_sheet/_table_header.html.erb

[[File:Table_header.PNG]]

[[File:Js.PNG]]

[[File:css.PNG]]

==== Adding topics ====

Tried to add topics using react js code in the file * app/views/sign_up_sheet/_add_topics.html.erb

Modified files code:

[[File:T1.PNG]]

[[File:T2.PNG]]

[[File:T3.PNG]]

[[File:T4.PNG]]

==Proposed Solution==
=== Assignment Creation ===
The new implementation uses ReactJS to generate a drop-down window on clicking on the New Assignment button (private/public) , providing same features as before. Database entry is made on submitting the form and the form is closed.

Below is the view of the new implementation:

[[File:Newassgn_RJS.png]]

==== Files to be modified ====
*apps/assets/javascripts/tree_display.jsx.erb
*apps/controllers/assignments_controller.rb
*apps/controllers/tree_display_controller.rb

====Code change details====
We created a new React class 'NewAssignmentForm' which dynamically creates and displays the form for New assignment. This class has the following methods:
getInitialState function(){} - Initial method to identify the form parameters that will be sent to the database when a new assignment is created.
handleNameChange function(e){} - The following methods get triggered on change of the form fields and capture/update the state variables
handleCourseChange: function(e){} -//-
handleSubChange: function(e){} -//-
handleDescChange: function(e){} -//-
handleTeamChange: function(e){} -//-
handleQuizChange: function(e){} -//-
handleDeadlineChange: function(e){} -//-
handleReviewsChange: function(e){} -//-
handleCalibrationChange: function(e){} -//-
handleAvailabilityChange: function(e){} -//-
handleReputationChange: function(e){} -//-

directoryValidate: function(e){} - this method validates that there is valid directory entered
nameValidate: function(e){} - this method validates that a valid project name is entered

handleCreateAssignment: function(e) {} - this method sends ajax request with the parameters from the filled form.

handleGetCourses: function() {} - this method is triggered when a course selection drop down is clicked. It sends a jQuery request and gets all the courses based on the instructor role

render: function(){} - this method renders the form components

In assignment_controller.rb we changed the create method to:

@assignment_form = AssignmentForm.new(assignment_form_params)
@assignment_form.assignment.instructor_id = current_user.id -- We now pass current instructor to the assignment form.
if @assignment_form.save
@assignment_form.create_assignment_node
flash[:success] = "Assignment Successfully created"
render 'tree_display/list'
else
flash[:error] = "Failed to Create Assignment"
render 'tree_display/list'
end
end

In tree_display_controller.rb we added new method get_courses_node_ng. This method returns the course list array of hashes based on the instructor chosen. This logic is similar to the helper method course_options:

def get_courses_node_ng
respond_to do |format|
courses = []
if session[:user].role.name == 'Teaching Assistant'
ta = Ta.find(session[:user].id)
ta.ta_mappings.each {|mapping| courses << Course.find(mapping.course_id) }
# If a TA created some courses before, s/he can still add new assignments to these courses.
courses << Course.where(instructor_id: session[:user].id)
courses.flatten!
# Administrator and Super-Administrator can see all courses
elsif session[:user].role.name == 'Administrator' or session[:user].role.name == 'Super-Administrator'
courses = Course.all
elsif session[:user].role.name == 'Instructor'
courses = Course.where(instructor_id: session[:user].id)
# instructor can see courses his/her TAs created
ta_ids = []
ta_ids << Instructor.get_my_tas(session[:user].id)
ta_ids.flatten!
ta_ids.each do |ta_id|
ta = Ta.find(ta_id)
ta.ta_mappings.each {|mapping| courses << Course.find(mapping.course_id) }
end
end
format.html { render json:courses}
end
end

=== Assignment Edition ===
Similar to assignment creation, in the new implementation, using ReactJS, when the edit assignment button is clicked, instead of making a server request and rendering a new view, a drop down window appears and saving the details will make the database entry.Since all the processing is done on the client side there will be decrease in the number of server requests.

However, the edit form is a multilevel form with different tabs. We managed to implement only the general view as React JS form, hence we added a new action item "Quick Edit" which renders the ReactJS form and the "Edit" action item works as before.

Below is the view of the new implementation:

[[File:New editassignment.png]]

==== Files modified ====
*apps/assest/tree_display/list.html.erb
*apps/views/assignments/edit.html.erb
*apps/views/assignments/edit/_general.html.erb

==== Code change details ====
=====Details=====
In tree_display.jsx we created a new React class EditAssignmentForm which dynamically creates and displays the form for Editing assignment. This class has the following methods:
componentWillReceiveProps(nextProps) - To handle edit
getInitialState function(){} - Here we identify the form parameters.
handleNameChange function(e){} - The following methods get triggered on change of the form fields and capture/update the state variables
handleCourseChange: function(e){} -//-
handleSubChange: function(e){} -//-
handleDescChange: function(e){} -//-
handleTeamChange: function(e){} -//-
handleQuizChange: function(e){} -//-
handleDeadlineChange: function(e){} -//-
handleReviewsChange: function(e){} -//-
handleCalibrationChange: function(e){} -//-
handleAvailabilityChange: function(e){} -//-
handleReputationChange: function(e){} -//-

directoryValidate: function(e){} - this method validates that there is valid directory entered
nameValidate: function(e){} - this method validates that a valid project name isentered

handleEditAssignment: function(e) {} - this method sends ajax request with the parameters from the filled form.

handleGetCourses: function() {} - this method is triggered when a course selection drop down is clicked. It sends a jQuery request and gets all the courses based on the instructor role

render: function(){} - this method renders the form components

We also added the following in the class RowAction to display the form fields when clicked on Quick Edit.
if (this.props.dataType === 'assignment') {
moreContent.push(

<a title="Quick Edit" onClick ={this.onClick} ><img src="/assets/tree_view/edit-icon-24.png" /></a>{this.state.showForm ? <EditAssignmentForm
assignmentId={this.props.id} name={this.props.parent_name} directory_path={this.props.directory} spec_location={this.props.spec_location} course_id=
{this.props.course_id} require_quiz={this.props.require_quiz} is_available={this.props.availability} max_team_size={this.props.max_team_size}
staggered_deadline={this.props.staggered_deadline} microtask={this.props.microtask} review_visible={this.props.review_visible} calibration=
{this.props.calibration} reputation={this.props.reputation} quiz_questions={this.props.quiz_questions} teammate_review={this.props.teammate_review} />
:null}
)
}

In assignment_controller.rb we edited update method:

if @assignment_form.update_attributes(assignment_form_params, current_user)
flash[:note] = 'The assignment was successfully saved.'
render 'tree_display/list'
else
flash[:error] = "Failed to save the assignment: #{@assignment_form.errors}"
render 'tree_display/list'
end

In tree_display_controller.rb we edited assignments_method to fetch all the parameters we need to display fields with appropriate values when Quick edit is clicked:

def assignments_method(node, tmp_object)
tmp_object.merge!(
"course_id" => node.get_course_id,
"max_team_size" => node.get_max_team_size,
"is_intelligent" => node.get_is_intelligent,
"require_quiz" => node.get_require_quiz,
"quiz_questions" => node.get_quiz_questions,
"allow_suggestions" => node.get_allow_suggestions,
"spec_location" => node.get_spec_location,
"staggered_deadline" =>node.get_staggered_deadline,
"microtask" => node.get_microtask,
"review_visible" => node.get_review_visible,
"calibration" => node.get_calibration,
"reputation" => node.get_reputation_algorithm,
"teammate_review" => node.get_teammate_review,
"availability" => node.get_availability,
"has_topic" => SignUpTopic.where(['assignment_id = ?', node.node_object_id]).first ? true : false
)
end

=== Addition of topics ===
* An interactive React JS component should be created and should be called by the ruby injection page ''sign_up_sheet/_add_topics.html.erb'' when New Topic link is clicked. This should show a form in that page to create topic.
* Delete/avoid usage of ''sign_up_sheet/new.html.erb'' page.
* Implement an React JS functional component to handle creation of topic and saving it to database.

=== Editing topic ===
* An interactive React JS component should be created and should be called by the ruby injection page ''sign_up_sheet/_all_actions.html.erb'' when edit action is clicked. This should show a form in that page to edit topic.
* Delete/avoid usage of ''sign_up_sheet/edit.html.erb'' page.
* Implement an React JS functional component to handle editing of topic and updating it to database.

=== Make the table in topics tab sortable by its header ===
Following sub-tasks identified to implement sortable feature for topics table.
* Modify sign_up_sheet/_table_header.html.erb partial to change the table header fields to sortable type.
* Add sort functionality using ReactJS for each column that is meaningful to be sorted.
* Below is how output will look like
[[File:Topics_new.PNG]]

=== Validating user entries ===
The following tasks are to be implemented to achieve users validation,
* Add the regular expression validation to avoid special characters in the names of assignment or directories.
* Correcting the code in edit assignment page too.
* Create validation for edge cases like giving empty values.

==== Files to be modified ====
As, the project needs to be implemented in reactJS, which helps in reducing the complexing binding in MVC framework, only changing the javascript file can help to achieve this without changing model,
* app/assets/javascripts/tree_display.jsx.erb

=== Fixing Tooltips ===
On exploring, it was noticed that all the existing tooltips work. However, we intend to increase the proximity of the tooltips in the assignment tab by increasing the size of the images.

==Test Plan==
Rails development is the Test Driven development, which helps in ensuring the implementation of all proposed implementations. We will be writing all the implementations proposed as tests that will eventually be red in rspec and try to make them green by adding to the development part.

For now the manual testing of these current implementations can help in testing the functionality from UI.
===Manual Testing===
Steps to manually test the feature are as follows:

====Assignment Creation====
*Log in as an instructor ''(user-name:instructor6 password:password)''
*Go to Manage->Assignments and click on the Assignments tab.
*Click on the 'New public assignment' or 'New private assignment' button
*Verify if drop-down window is displayed.
*Make valid entries for the available fields and click on 'create'.
*Verify if new assignment is successfully created.

====Assignment Creation====
*Log in as an instructor ''(user-name:instructor6 password:password)''
*Go to Manage->Assignments and click on the Assignments tab.
*Click on the Edit button for any of the available assignment.
*Verify if drop-down window is displayed.
*Make changes and click on 'save'.
*Verify if the changes made are successfully updated.

====Topic Creation/Editing====
* Login as an instructor ''(user-name:instructor6 password:password)''
* Create an assignment
* Click 'New Topic' link or 'edit' action in topics table for a particular topic
* A pop window or form should be displayed in the same page
* Add topic details in that window/ form
* Save it
* Created or modified topic should be seen in topics table

====Make the table in topics tab sortable by its header====
* Login as an instructor ''(user-name:instructor6 password:password)''
* Create an assignment
* Add 2 topics to the assignment
* Click sort on Topic ID and check if they are sorted
* Click sort on Topic title and check if they are sorted
* Similarly test using other columns

====Validating user entries====
*Log in as an instructor ''(user-name:instructor6 password:password)''
*Go to Manage->Assignments and click on the Assignments tab.
*Click on the 'New public assignment' or 'New private assignment' button
*Try adding the assignment using the weird names, with special symbols, ignoring check boxes
*Verify if the assignment is shown in the table.

Another way to check is from editing page too.
*Log in as an instructor ''(user-name:instructor6 password:password)''
*Go to Manage->Assignments and click on the Assignments tab.
*Click on the Edit icon page.
*Try adding the assignment using the weird names, with special symbols, ignoring check boxes
*Verify if the assignment which is updated with special characters is shown in the table.

===Automation testing===
The above tests all will be automated using rspec. Rspec Mock-ups will be created for checking the navigation flow of newly created React JS components.

==Future Work==

We will try to convert edit assignment page in to React JS. Design pages more clearly.

==References==

#''http://railscasts.com/episodes/228-sortable-table-columns sortable-columns''
#''https://www.airpair.com/reactjs/posts/reactjs-a-guide-for-rails-developers adding-reactjs''
#''https://github.com/expertiza/expertiza/pull/855

File:New editassignment.png

2017-05-03T16:14:51Z

Vhegde:

File:Edit-new imp.png

2017-05-03T16:14:40Z

Vhegde: uploaded a new version of "File:Edit-new imp.png": Reverted to version as of 01:32, 13 April 2017

new implementation for edit form

CSC/ECE 517 Spring 2017/Convert Assignment Creation Form to ReactJS

2017-05-03T15:55:34Z

Vhegde: /* Code change details */

== Introduction ==
This page is a part of CSC/ECE 517 Final Project for Spring 2017 to describe the changes made by us to the open source software project Expertiza. We are converting the assignment creation form to ReactJS. Following contains a brief introduction to Expertiza, ReactJS followed by the problems we are tackling, our strategy for the implementation and the test plan.

==Expertiza==
Expertiza is a Ruby on Rails based web application where students can submit and peer review learning objects such as codes, articles, websites etc., It is an open source software project funded by National Science Foundation(NSF). The instructor has the capability to create assignments with varied specifications such as topics, courses, team size, level of reviews etc., later review the submitted work and provide feedback. Students can enter their submissions and also review others' work.

==ReactJS==
[https://en.wikipedia.org/wiki/React_(JavaScript_library) ReactJS] is the javascript framework developed by Facebook to solve the specific problem, ''UI rendering''. It is developed to solve the problem with complex binding in MVC framework using only one-way data binding. It is used for dynamic reloading of the page. It helps in reloading only the particular component required using Virtual DOM, which makes it fast by temporarily storing DOM

'''Reasons for using ReactJS'''
* It has every functionality that an user interface required
* Easy data binding.
* Only single component changes are stored/changed without reloading the complete page.
* Fast and efficient
* Easy to scale

==Problem Statement==
The Assignment Create and Edit Form are multi level forms. It consists of multiple inputs and user interactions. Many input types have dependency on interactions by the user. For example, on check for a particular checkbox, remaining form is displayed. Also, edit page is reloaded whenever a topic is added. The task is to convert this pages into ReactJS components.

'''Tasks to be done'''
*Organize the form layout, create several mockups and validate them to your users
*Make the table in topics tab sortable by its header
*Allow users to edit / add topics in the table instead of loading a new page
*Implement the new layout and convert the javascript to a ReactJS component
*Validate user entries
*Fix tooltips - Needed to increase the proximity of the tool tips in the assignments tab.

==Current Implementation==
===Assignment Creation===
The assignment creation form consists of multiple inputs and requires interactions from the user. The current implementation is mostly in HTML with data validations being done by JQuery. When a user wants to create a new assignment by clicking the new assignment button, a server request is generated and new view is rendered. Again, another server request to make database entry is generated once the user fills in the data and clicks on 'save' button and again a new view is rendered. This kind of implementation doesn't support dynamic view rendering hence lacks the fluidity in overall user experience that one would expect.

[[File:Create1.JPG]]
 
 
 

[[File:Create2.JPG]]

===Assignment Edition===
Similar to assignment creation page, edit page lacks the dynamic view rendering which makes the user experience cumbersome. Every time user wants to make changes to the assignment, a server request is generated and new view is rendered. The save button hit on completion will again generate another server request and render a new view.

[[File:Edit.jpg]]

=== Add/Edit topics in Assignment ===
In current implementation whenever a topic is added to the assignment, a request is sent to the server and user is redirected to a form in another page. Upon creation of topic user is rendered back to edit assignment page. This process involves lot of redirection. Now, the task is to avoid this redirection of pages and create a interactive ReactJS form for adding and editing topic.

Currently this logic is implemented in new method in sign_up_controller.rb file and is invoked in the _add_topics.rb ruby injection file. With this action new.html.erb page is rendered. This should be avoided.

'''Add topic:'''

[[File:Add_topic_form.PNG]]

Similar is the case for editing a topic. For editing a topic user is rendered to a form in edit page and again redirected to edit assignment page.

'''Edit Topic:'''

[[File:Edit_topic_form.PNG]]

===Make the table in topics tab sortable by its header===
Currently after creating an assignment, we can add topics related to the assignment. The "Topics" tab in the edit assignment form shows the list of topics that are added to the assignment. The picture below shows the current page for displaying the list of topics of an assignment. The list is not sortable. The task is to make it sortable using ReactJS by topic id, topic name, Num. of slots, Available slots, Num. on waitlist columns as sorting on remaining columns doesn't give any meaningful display.

[[File:topics_tab_assignment.png]]

===Validating user entries===
The entries for the assignment creation are not according to any restrictions, that can add problem to database maintenance like sorting the entries, comparing them, retrieving. There are many such problem causing situations in the new assignment form, such as

This is essential in both new assignment or editing assignment page.

* User can add the number as new assignment name or he can give only special characters for it like "$$$$".
* Though mentioned a mandatory no special characters, it was not properly implemented. System is accepting the special characters.
* Neglecting check boxes may lead to confusion with deadlines.

[[File:Vaidatinguser.PNG]]

'''UML Diagram'''

The following diagram depicts the flow of events leading to validations.

[[File:Uml for validation.png]]

==Implementation==

Here is the main code for the regular expression check in Name of assignment and sub directory fields. Now, each time when a create button is clicked, the page is not checked with the model constraints but the reactjs component only. So, without reloading each time the checks are shown on the page as shown in the figure below.

[[File:Validate.PNG]]

==== Making topics table sortable on columns ====

Below are the files modified.

* app/views/sign_up_sheet/_add_signup_topics.html.erb

[[File:Signup_topics.PNG]]

* app/views/sign_up_sheet/_table_header.html.erb

[[File:Table_header.PNG]]

[[File:Js.PNG]]

[[File:css.PNG]]

==== Adding topics ====

Tried to add topics using react js code in the file * app/views/sign_up_sheet/_add_topics.html.erb

Modified files code:

[[File:T1.PNG]]

[[File:T2.PNG]]

[[File:T3.PNG]]

[[File:T4.PNG]]

==Proposed Solution==
=== Assignment Creation ===
The new implementation uses ReactJS to generate a drop-down window on clicking on the New Assignment button (private/public) , providing same features as before. Database entry is made on submitting the form and the form is closed.

Below is the view of the new implementation:

[[File:Newassgn_RJS.png]]

==== Files to be modified ====
*apps/assets/javascripts/tree_display.jsx.erb
*apps/controllers/assignments_controller.rb
*apps/controllers/tree_display_controller.rb

====Code change details====
We created a new React class 'NewAssignmentForm' which dynamically creates and displays the form for New assignment. This class has the following methods:
getInitialState function(){} - Initial method to identify the form parameters that will be sent to the database when a new assignment is created.
handleNameChange function(e){} - The following methods get triggered on change of the form fields and capture/update the state variables
handleCourseChange: function(e){} -//-
handleSubChange: function(e){} -//-
handleDescChange: function(e){} -//-
handleTeamChange: function(e){} -//-
handleQuizChange: function(e){} -//-
handleDeadlineChange: function(e){} -//-
handleReviewsChange: function(e){} -//-
handleCalibrationChange: function(e){} -//-
handleAvailabilityChange: function(e){} -//-
handleReputationChange: function(e){} -//-

directoryValidate: function(e){} - this method validates that there is valid directory entered
nameValidate: function(e){} - this method validates that a valid project name is entered

handleCreateAssignment: function(e) {} - this method sends ajax request with the parameters from the filled form.

handleGetCourses: function() {} - this method is triggered when a course selection drop down is clicked. It sends a jQuery request and gets all the courses based on the instructor role

render: function(){} - this method renders the form components

In assignment_controller.rb we changed the create method to:

@assignment_form = AssignmentForm.new(assignment_form_params)
@assignment_form.assignment.instructor_id = current_user.id -- We now pass current instructor to the assignment form.
if @assignment_form.save
@assignment_form.create_assignment_node
flash[:success] = "Assignment Successfully created"
render 'tree_display/list'
else
flash[:error] = "Failed to Create Assignment"
render 'tree_display/list'
end
end

In tree_display_controller.rb we added new method get_courses_node_ng. This method returns the course list array of hashes based on the instructor chosen. This logic is similar to the helper method course_options:

def get_courses_node_ng
respond_to do |format|
courses = []
if session[:user].role.name == 'Teaching Assistant'
ta = Ta.find(session[:user].id)
ta.ta_mappings.each {|mapping| courses << Course.find(mapping.course_id) }
# If a TA created some courses before, s/he can still add new assignments to these courses.
courses << Course.where(instructor_id: session[:user].id)
courses.flatten!
# Administrator and Super-Administrator can see all courses
elsif session[:user].role.name == 'Administrator' or session[:user].role.name == 'Super-Administrator'
courses = Course.all
elsif session[:user].role.name == 'Instructor'
courses = Course.where(instructor_id: session[:user].id)
# instructor can see courses his/her TAs created
ta_ids = []
ta_ids << Instructor.get_my_tas(session[:user].id)
ta_ids.flatten!
ta_ids.each do |ta_id|
ta = Ta.find(ta_id)
ta.ta_mappings.each {|mapping| courses << Course.find(mapping.course_id) }
end
end
format.html { render json:courses}
end
end

=== Assignment Edition ===
Similar to assignment creation, in the new implementation, using ReactJS, when the edit assignment button is clicked, instead of making a server request and rendering a new view, a drop down window appears and saving the details will make the database entry.Since all the processing is done on the client side there will be decrease in the number of server requests.

Below is the mock display of what our implementation is going to look like:

[[File:Edit-new_imp.png]]

==== Files to be modified ====
*apps/views/tree_display/list.html.erb
*apps/views/assignments/edit.html.erb
*apps/views/assignments/edit/_general.html.erb

=== Addition of topics ===
* An interactive React JS component should be created and should be called by the ruby injection page ''sign_up_sheet/_add_topics.html.erb'' when New Topic link is clicked. This should show a form in that page to create topic.
* Delete/avoid usage of ''sign_up_sheet/new.html.erb'' page.
* Implement an React JS functional component to handle creation of topic and saving it to database.

=== Editing topic ===
* An interactive React JS component should be created and should be called by the ruby injection page ''sign_up_sheet/_all_actions.html.erb'' when edit action is clicked. This should show a form in that page to edit topic.
* Delete/avoid usage of ''sign_up_sheet/edit.html.erb'' page.
* Implement an React JS functional component to handle editing of topic and updating it to database.

=== Make the table in topics tab sortable by its header ===
Following sub-tasks identified to implement sortable feature for topics table.
* Modify sign_up_sheet/_table_header.html.erb partial to change the table header fields to sortable type.
* Add sort functionality using ReactJS for each column that is meaningful to be sorted.
* Below is how output will look like
[[File:Topics_new.PNG]]

=== Validating user entries ===
The following tasks are to be implemented to achieve users validation,
* Add the regular expression validation to avoid special characters in the names of assignment or directories.
* Correcting the code in edit assignment page too.
* Create validation for edge cases like giving empty values.

==== Files to be modified ====
As, the project needs to be implemented in reactJS, which helps in reducing the complexing binding in MVC framework, only changing the javascript file can help to achieve this without changing model,
* app/assets/javascripts/tree_display.jsx.erb

=== Fixing Tooltips ===
On exploring, it was noticed that all the existing tooltips work. However, we intend to increase the proximity of the tooltips in the assignment tab by increasing the size of the images.

==Test Plan==
Rails development is the Test Driven development, which helps in ensuring the implementation of all proposed implementations. We will be writing all the implementations proposed as tests that will eventually be red in rspec and try to make them green by adding to the development part.

For now the manual testing of these current implementations can help in testing the functionality from UI.
===Manual Testing===
Steps to manually test the feature are as follows:

====Assignment Creation====
*Log in as an instructor ''(user-name:instructor6 password:password)''
*Go to Manage->Assignments and click on the Assignments tab.
*Click on the 'New public assignment' or 'New private assignment' button
*Verify if drop-down window is displayed.
*Make valid entries for the available fields and click on 'create'.
*Verify if new assignment is successfully created.

====Assignment Creation====
*Log in as an instructor ''(user-name:instructor6 password:password)''
*Go to Manage->Assignments and click on the Assignments tab.
*Click on the Edit button for any of the available assignment.
*Verify if drop-down window is displayed.
*Make changes and click on 'save'.
*Verify if the changes made are successfully updated.

====Topic Creation/Editing====
* Login as an instructor ''(user-name:instructor6 password:password)''
* Create an assignment
* Click 'New Topic' link or 'edit' action in topics table for a particular topic
* A pop window or form should be displayed in the same page
* Add topic details in that window/ form
* Save it
* Created or modified topic should be seen in topics table

====Make the table in topics tab sortable by its header====
* Login as an instructor ''(user-name:instructor6 password:password)''
* Create an assignment
* Add 2 topics to the assignment
* Click sort on Topic ID and check if they are sorted
* Click sort on Topic title and check if they are sorted
* Similarly test using other columns

====Validating user entries====
*Log in as an instructor ''(user-name:instructor6 password:password)''
*Go to Manage->Assignments and click on the Assignments tab.
*Click on the 'New public assignment' or 'New private assignment' button
*Try adding the assignment using the weird names, with special symbols, ignoring check boxes
*Verify if the assignment is shown in the table.

Another way to check is from editing page too.
*Log in as an instructor ''(user-name:instructor6 password:password)''
*Go to Manage->Assignments and click on the Assignments tab.
*Click on the Edit icon page.
*Try adding the assignment using the weird names, with special symbols, ignoring check boxes
*Verify if the assignment which is updated with special characters is shown in the table.

===Automation testing===
The above tests all will be automated using rspec. Rspec Mock-ups will be created for checking the navigation flow of newly created React JS components.

==Future Work==

We will try to convert edit assignment page in to React JS. Design pages more clearly.

==References==

#''http://railscasts.com/episodes/228-sortable-table-columns sortable-columns''
#''https://www.airpair.com/reactjs/posts/reactjs-a-guide-for-rails-developers adding-reactjs''
#''https://github.com/expertiza/expertiza/pull/855

CSC/ECE 517 Spring 2017/Convert Assignment Creation Form to ReactJS

2017-05-03T15:54:34Z

Vhegde: new image uploaded

== Introduction ==
This page is a part of CSC/ECE 517 Final Project for Spring 2017 to describe the changes made by us to the open source software project Expertiza. We are converting the assignment creation form to ReactJS. Following contains a brief introduction to Expertiza, ReactJS followed by the problems we are tackling, our strategy for the implementation and the test plan.

==Expertiza==
Expertiza is a Ruby on Rails based web application where students can submit and peer review learning objects such as codes, articles, websites etc., It is an open source software project funded by National Science Foundation(NSF). The instructor has the capability to create assignments with varied specifications such as topics, courses, team size, level of reviews etc., later review the submitted work and provide feedback. Students can enter their submissions and also review others' work.

==ReactJS==
[https://en.wikipedia.org/wiki/React_(JavaScript_library) ReactJS] is the javascript framework developed by Facebook to solve the specific problem, ''UI rendering''. It is developed to solve the problem with complex binding in MVC framework using only one-way data binding. It is used for dynamic reloading of the page. It helps in reloading only the particular component required using Virtual DOM, which makes it fast by temporarily storing DOM

'''Reasons for using ReactJS'''
* It has every functionality that an user interface required
* Easy data binding.
* Only single component changes are stored/changed without reloading the complete page.
* Fast and efficient
* Easy to scale

==Problem Statement==
The Assignment Create and Edit Form are multi level forms. It consists of multiple inputs and user interactions. Many input types have dependency on interactions by the user. For example, on check for a particular checkbox, remaining form is displayed. Also, edit page is reloaded whenever a topic is added. The task is to convert this pages into ReactJS components.

'''Tasks to be done'''
*Organize the form layout, create several mockups and validate them to your users
*Make the table in topics tab sortable by its header
*Allow users to edit / add topics in the table instead of loading a new page
*Implement the new layout and convert the javascript to a ReactJS component
*Validate user entries
*Fix tooltips - Needed to increase the proximity of the tool tips in the assignments tab.

==Current Implementation==
===Assignment Creation===
The assignment creation form consists of multiple inputs and requires interactions from the user. The current implementation is mostly in HTML with data validations being done by JQuery. When a user wants to create a new assignment by clicking the new assignment button, a server request is generated and new view is rendered. Again, another server request to make database entry is generated once the user fills in the data and clicks on 'save' button and again a new view is rendered. This kind of implementation doesn't support dynamic view rendering hence lacks the fluidity in overall user experience that one would expect.

[[File:Create1.JPG]]
 
 
 

[[File:Create2.JPG]]

===Assignment Edition===
Similar to assignment creation page, edit page lacks the dynamic view rendering which makes the user experience cumbersome. Every time user wants to make changes to the assignment, a server request is generated and new view is rendered. The save button hit on completion will again generate another server request and render a new view.

[[File:Edit.jpg]]

=== Add/Edit topics in Assignment ===
In current implementation whenever a topic is added to the assignment, a request is sent to the server and user is redirected to a form in another page. Upon creation of topic user is rendered back to edit assignment page. This process involves lot of redirection. Now, the task is to avoid this redirection of pages and create a interactive ReactJS form for adding and editing topic.

Currently this logic is implemented in new method in sign_up_controller.rb file and is invoked in the _add_topics.rb ruby injection file. With this action new.html.erb page is rendered. This should be avoided.

'''Add topic:'''

[[File:Add_topic_form.PNG]]

Similar is the case for editing a topic. For editing a topic user is rendered to a form in edit page and again redirected to edit assignment page.

'''Edit Topic:'''

[[File:Edit_topic_form.PNG]]

===Make the table in topics tab sortable by its header===
Currently after creating an assignment, we can add topics related to the assignment. The "Topics" tab in the edit assignment form shows the list of topics that are added to the assignment. The picture below shows the current page for displaying the list of topics of an assignment. The list is not sortable. The task is to make it sortable using ReactJS by topic id, topic name, Num. of slots, Available slots, Num. on waitlist columns as sorting on remaining columns doesn't give any meaningful display.

[[File:topics_tab_assignment.png]]

===Validating user entries===
The entries for the assignment creation are not according to any restrictions, that can add problem to database maintenance like sorting the entries, comparing them, retrieving. There are many such problem causing situations in the new assignment form, such as

This is essential in both new assignment or editing assignment page.

* User can add the number as new assignment name or he can give only special characters for it like "$$$$".
* Though mentioned a mandatory no special characters, it was not properly implemented. System is accepting the special characters.
* Neglecting check boxes may lead to confusion with deadlines.

[[File:Vaidatinguser.PNG]]

'''UML Diagram'''

The following diagram depicts the flow of events leading to validations.

[[File:Uml for validation.png]]

==Implementation==

Here is the main code for the regular expression check in Name of assignment and sub directory fields. Now, each time when a create button is clicked, the page is not checked with the model constraints but the reactjs component only. So, without reloading each time the checks are shown on the page as shown in the figure below.

[[File:Validate.PNG]]

==== Making topics table sortable on columns ====

Below are the files modified.

* app/views/sign_up_sheet/_add_signup_topics.html.erb

[[File:Signup_topics.PNG]]

* app/views/sign_up_sheet/_table_header.html.erb

[[File:Table_header.PNG]]

[[File:Js.PNG]]

[[File:css.PNG]]

==== Adding topics ====

Tried to add topics using react js code in the file * app/views/sign_up_sheet/_add_topics.html.erb

Modified files code:

[[File:T1.PNG]]

[[File:T2.PNG]]

[[File:T3.PNG]]

[[File:T4.PNG]]

==Proposed Solution==
=== Assignment Creation ===
The new implementation uses ReactJS to generate a drop-down window on clicking on the New Assignment button (private/public) , providing same features as before. Database entry is made on submitting the form and the form is closed.

Below is the view of the new implementation:

[[File:Newassgn_RJS.png]]

==== Files to be modified ====
*apps/assets/javascripts/tree_display.jsx.erb
*apps/controllers/assignments_controller.rb
*apps/controllers/tree_display_controller.rb

===Code change details===
We created a new React class 'NewAssignmentForm' which dynamically creates and displays the form for New assignment. This class has the following methods:
getInitialState function(){} - Initial method to identify the form parameters that will be sent to the database when a new assignment is created.
handleNameChange function(e){} - The following methods get triggered on change of the form fields and capture/update the state variables
handleCourseChange: function(e){} -//-
handleSubChange: function(e){} -//-
handleDescChange: function(e){} -//-
handleTeamChange: function(e){} -//-
handleQuizChange: function(e){} -//-
handleDeadlineChange: function(e){} -//-
handleReviewsChange: function(e){} -//-
handleCalibrationChange: function(e){} -//-
handleAvailabilityChange: function(e){} -//-
handleReputationChange: function(e){} -//-

directoryValidate: function(e){} - this method validates that there is valid directory entered
nameValidate: function(e){} - this method validates that a valid project name is entered

handleCreateAssignment: function(e) {} - this method sends ajax request with the parameters from the filled form.

handleGetCourses: function() {} - this method is triggered when a course selection drop down is clicked. It sends a jQuery request and gets all the courses based on the instructor role

render: function(){} - this method renders the form components

In assignment_controller.rb we changed the create method to:

@assignment_form = AssignmentForm.new(assignment_form_params)
@assignment_form.assignment.instructor_id = current_user.id -- We now pass current instructor to the assignment form.
if @assignment_form.save
@assignment_form.create_assignment_node
flash[:success] = "Assignment Successfully created"
render 'tree_display/list'
else
flash[:error] = "Failed to Create Assignment"
render 'tree_display/list'
end
end

In tree_display_controller.rb we added new method get_courses_node_ng. This method returns the course list array of hashes based on the instructor chosen. This logic is similar to the helper method course_options:

def get_courses_node_ng
respond_to do |format|
courses = []
if session[:user].role.name == 'Teaching Assistant'
ta = Ta.find(session[:user].id)
ta.ta_mappings.each {|mapping| courses << Course.find(mapping.course_id) }
# If a TA created some courses before, s/he can still add new assignments to these courses.
courses << Course.where(instructor_id: session[:user].id)
courses.flatten!
# Administrator and Super-Administrator can see all courses
elsif session[:user].role.name == 'Administrator' or session[:user].role.name == 'Super-Administrator'
courses = Course.all
elsif session[:user].role.name == 'Instructor'
courses = Course.where(instructor_id: session[:user].id)
# instructor can see courses his/her TAs created
ta_ids = []
ta_ids << Instructor.get_my_tas(session[:user].id)
ta_ids.flatten!
ta_ids.each do |ta_id|
ta = Ta.find(ta_id)
ta.ta_mappings.each {|mapping| courses << Course.find(mapping.course_id) }
end
end
format.html { render json:courses}
end
end

=== Assignment Edition ===
Similar to assignment creation, in the new implementation, using ReactJS, when the edit assignment button is clicked, instead of making a server request and rendering a new view, a drop down window appears and saving the details will make the database entry.Since all the processing is done on the client side there will be decrease in the number of server requests.

Below is the mock display of what our implementation is going to look like:

[[File:Edit-new_imp.png]]

==== Files to be modified ====
*apps/views/tree_display/list.html.erb
*apps/views/assignments/edit.html.erb
*apps/views/assignments/edit/_general.html.erb

=== Addition of topics ===
* An interactive React JS component should be created and should be called by the ruby injection page ''sign_up_sheet/_add_topics.html.erb'' when New Topic link is clicked. This should show a form in that page to create topic.
* Delete/avoid usage of ''sign_up_sheet/new.html.erb'' page.
* Implement an React JS functional component to handle creation of topic and saving it to database.

=== Editing topic ===
* An interactive React JS component should be created and should be called by the ruby injection page ''sign_up_sheet/_all_actions.html.erb'' when edit action is clicked. This should show a form in that page to edit topic.
* Delete/avoid usage of ''sign_up_sheet/edit.html.erb'' page.
* Implement an React JS functional component to handle editing of topic and updating it to database.

=== Make the table in topics tab sortable by its header ===
Following sub-tasks identified to implement sortable feature for topics table.
* Modify sign_up_sheet/_table_header.html.erb partial to change the table header fields to sortable type.
* Add sort functionality using ReactJS for each column that is meaningful to be sorted.
* Below is how output will look like
[[File:Topics_new.PNG]]

=== Validating user entries ===
The following tasks are to be implemented to achieve users validation,
* Add the regular expression validation to avoid special characters in the names of assignment or directories.
* Correcting the code in edit assignment page too.
* Create validation for edge cases like giving empty values.

==== Files to be modified ====
As, the project needs to be implemented in reactJS, which helps in reducing the complexing binding in MVC framework, only changing the javascript file can help to achieve this without changing model,
* app/assets/javascripts/tree_display.jsx.erb

=== Fixing Tooltips ===
On exploring, it was noticed that all the existing tooltips work. However, we intend to increase the proximity of the tooltips in the assignment tab by increasing the size of the images.

==Test Plan==
Rails development is the Test Driven development, which helps in ensuring the implementation of all proposed implementations. We will be writing all the implementations proposed as tests that will eventually be red in rspec and try to make them green by adding to the development part.

For now the manual testing of these current implementations can help in testing the functionality from UI.
===Manual Testing===
Steps to manually test the feature are as follows:

====Assignment Creation====
*Log in as an instructor ''(user-name:instructor6 password:password)''
*Go to Manage->Assignments and click on the Assignments tab.
*Click on the 'New public assignment' or 'New private assignment' button
*Verify if drop-down window is displayed.
*Make valid entries for the available fields and click on 'create'.
*Verify if new assignment is successfully created.

====Assignment Creation====
*Log in as an instructor ''(user-name:instructor6 password:password)''
*Go to Manage->Assignments and click on the Assignments tab.
*Click on the Edit button for any of the available assignment.
*Verify if drop-down window is displayed.
*Make changes and click on 'save'.
*Verify if the changes made are successfully updated.

====Topic Creation/Editing====
* Login as an instructor ''(user-name:instructor6 password:password)''
* Create an assignment
* Click 'New Topic' link or 'edit' action in topics table for a particular topic
* A pop window or form should be displayed in the same page
* Add topic details in that window/ form
* Save it
* Created or modified topic should be seen in topics table

====Make the table in topics tab sortable by its header====
* Login as an instructor ''(user-name:instructor6 password:password)''
* Create an assignment
* Add 2 topics to the assignment
* Click sort on Topic ID and check if they are sorted
* Click sort on Topic title and check if they are sorted
* Similarly test using other columns

====Validating user entries====
*Log in as an instructor ''(user-name:instructor6 password:password)''
*Go to Manage->Assignments and click on the Assignments tab.
*Click on the 'New public assignment' or 'New private assignment' button
*Try adding the assignment using the weird names, with special symbols, ignoring check boxes
*Verify if the assignment is shown in the table.

Another way to check is from editing page too.
*Log in as an instructor ''(user-name:instructor6 password:password)''
*Go to Manage->Assignments and click on the Assignments tab.
*Click on the Edit icon page.
*Try adding the assignment using the weird names, with special symbols, ignoring check boxes
*Verify if the assignment which is updated with special characters is shown in the table.

===Automation testing===
The above tests all will be automated using rspec. Rspec Mock-ups will be created for checking the navigation flow of newly created React JS components.

==Future Work==

We will try to convert edit assignment page in to React JS. Design pages more clearly.

==References==

#''http://railscasts.com/episodes/228-sortable-table-columns sortable-columns''
#''https://www.airpair.com/reactjs/posts/reactjs-a-guide-for-rails-developers adding-reactjs''
#''https://github.com/expertiza/expertiza/pull/855

File:Newassgn RJS.png

2017-05-03T15:52:46Z

Vhegde:

File:New imp.png

2017-05-03T15:52:23Z

Vhegde: uploaded a new version of "File:New imp.png": Reverted to version as of 01:00, 13 April 2017

New implementation for create

File:New imp.png

2017-05-03T15:51:24Z

Vhegde: uploaded a new version of "File:New imp.png"

New implementation for create

CSC/ECE 517 Spring 2017/Convert Assignment Creation Form to ReactJS

2017-05-03T15:48:29Z

Vhegde: adding new implementation details for Create assignment

== Introduction ==
This page is a part of CSC/ECE 517 Final Project for Spring 2017 to describe the changes made by us to the open source software project Expertiza. We are converting the assignment creation form to ReactJS. Following contains a brief introduction to Expertiza, ReactJS followed by the problems we are tackling, our strategy for the implementation and the test plan.

==Expertiza==
Expertiza is a Ruby on Rails based web application where students can submit and peer review learning objects such as codes, articles, websites etc., It is an open source software project funded by National Science Foundation(NSF). The instructor has the capability to create assignments with varied specifications such as topics, courses, team size, level of reviews etc., later review the submitted work and provide feedback. Students can enter their submissions and also review others' work.

==ReactJS==
[https://en.wikipedia.org/wiki/React_(JavaScript_library) ReactJS] is the javascript framework developed by Facebook to solve the specific problem, ''UI rendering''. It is developed to solve the problem with complex binding in MVC framework using only one-way data binding. It is used for dynamic reloading of the page. It helps in reloading only the particular component required using Virtual DOM, which makes it fast by temporarily storing DOM

'''Reasons for using ReactJS'''
* It has every functionality that an user interface required
* Easy data binding.
* Only single component changes are stored/changed without reloading the complete page.
* Fast and efficient
* Easy to scale

==Problem Statement==
The Assignment Create and Edit Form are multi level forms. It consists of multiple inputs and user interactions. Many input types have dependency on interactions by the user. For example, on check for a particular checkbox, remaining form is displayed. Also, edit page is reloaded whenever a topic is added. The task is to convert this pages into ReactJS components.

'''Tasks to be done'''
*Organize the form layout, create several mockups and validate them to your users
*Make the table in topics tab sortable by its header
*Allow users to edit / add topics in the table instead of loading a new page
*Implement the new layout and convert the javascript to a ReactJS component
*Validate user entries
*Fix tooltips - Needed to increase the proximity of the tool tips in the assignments tab.

==Current Implementation==
===Assignment Creation===
The assignment creation form consists of multiple inputs and requires interactions from the user. The current implementation is mostly in HTML with data validations being done by JQuery. When a user wants to create a new assignment by clicking the new assignment button, a server request is generated and new view is rendered. Again, another server request to make database entry is generated once the user fills in the data and clicks on 'save' button and again a new view is rendered. This kind of implementation doesn't support dynamic view rendering hence lacks the fluidity in overall user experience that one would expect.

[[File:Create1.JPG]]
 
 
 

[[File:Create2.JPG]]

===Assignment Edition===
Similar to assignment creation page, edit page lacks the dynamic view rendering which makes the user experience cumbersome. Every time user wants to make changes to the assignment, a server request is generated and new view is rendered. The save button hit on completion will again generate another server request and render a new view.

[[File:Edit.jpg]]

=== Add/Edit topics in Assignment ===
In current implementation whenever a topic is added to the assignment, a request is sent to the server and user is redirected to a form in another page. Upon creation of topic user is rendered back to edit assignment page. This process involves lot of redirection. Now, the task is to avoid this redirection of pages and create a interactive ReactJS form for adding and editing topic.

Currently this logic is implemented in new method in sign_up_controller.rb file and is invoked in the _add_topics.rb ruby injection file. With this action new.html.erb page is rendered. This should be avoided.

'''Add topic:'''

[[File:Add_topic_form.PNG]]

Similar is the case for editing a topic. For editing a topic user is rendered to a form in edit page and again redirected to edit assignment page.

'''Edit Topic:'''

[[File:Edit_topic_form.PNG]]

===Make the table in topics tab sortable by its header===
Currently after creating an assignment, we can add topics related to the assignment. The "Topics" tab in the edit assignment form shows the list of topics that are added to the assignment. The picture below shows the current page for displaying the list of topics of an assignment. The list is not sortable. The task is to make it sortable using ReactJS by topic id, topic name, Num. of slots, Available slots, Num. on waitlist columns as sorting on remaining columns doesn't give any meaningful display.

[[File:topics_tab_assignment.png]]

===Validating user entries===
The entries for the assignment creation are not according to any restrictions, that can add problem to database maintenance like sorting the entries, comparing them, retrieving. There are many such problem causing situations in the new assignment form, such as

This is essential in both new assignment or editing assignment page.

* User can add the number as new assignment name or he can give only special characters for it like "$$$$".
* Though mentioned a mandatory no special characters, it was not properly implemented. System is accepting the special characters.
* Neglecting check boxes may lead to confusion with deadlines.

[[File:Vaidatinguser.PNG]]

'''UML Diagram'''

The following diagram depicts the flow of events leading to validations.

[[File:Uml for validation.png]]

==Implementation==

Here is the main code for the regular expression check in Name of assignment and sub directory fields. Now, each time when a create button is clicked, the page is not checked with the model constraints but the reactjs component only. So, without reloading each time the checks are shown on the page as shown in the figure below.

[[File:Validate.PNG]]

==== Making topics table sortable on columns ====

Below are the files modified.

* app/views/sign_up_sheet/_add_signup_topics.html.erb

[[File:Signup_topics.PNG]]

* app/views/sign_up_sheet/_table_header.html.erb

[[File:Table_header.PNG]]

[[File:Js.PNG]]

[[File:css.PNG]]

==== Adding topics ====

Tried to add topics using react js code in the file * app/views/sign_up_sheet/_add_topics.html.erb

Modified files code:

[[File:T1.PNG]]

[[File:T2.PNG]]

[[File:T3.PNG]]

[[File:T4.PNG]]

==Proposed Solution==
=== Assignment Creation ===
The new implementation uses ReactJS to generate a drop-down window on clicking on the New Assignment button (private/public) , providing same features as before. Database entry is made on submitting the form and the form is closed.

Below is the view of the new implementation:

[[File:new_imp.png]]

==== Files to be modified ====
*apps/assets/javascripts/tree_display.jsx.erb
*apps/controllers/assignments_controller.rb
*apps/controllers/tree_display_controller.rb

===Code change details===
We created a new React class 'NewAssignmentForm' which dynamically creates and displays the form for New assignment. This class has the following methods:
getInitialState function(){} - Initial method to identify the form parameters that will be sent to the database when a new assignment is created.
handleNameChange function(e){} - The following methods get triggered on change of the form fields and capture/update the state variables
handleCourseChange: function(e){} -//-
handleSubChange: function(e){} -//-
handleDescChange: function(e){} -//-
handleTeamChange: function(e){} -//-
handleQuizChange: function(e){} -//-
handleDeadlineChange: function(e){} -//-
handleReviewsChange: function(e){} -//-
handleCalibrationChange: function(e){} -//-
handleAvailabilityChange: function(e){} -//-
handleReputationChange: function(e){} -//-

directoryValidate: function(e){} - this method validates that there is valid directory entered
nameValidate: function(e){} - this method validates that a valid project name is entered

handleCreateAssignment: function(e) {} - this method sends ajax request with the parameters from the filled form.

handleGetCourses: function() {} - this method is triggered when a course selection drop down is clicked. It sends a jQuery request and gets all the courses based on the instructor role

render: function(){} - this method renders the form components

In assignment_controller.rb we changed the create method to:

@assignment_form = AssignmentForm.new(assignment_form_params)
@assignment_form.assignment.instructor_id = current_user.id -- We now pass current instructor to the assignment form.
if @assignment_form.save
@assignment_form.create_assignment_node
flash[:success] = "Assignment Successfully created"
render 'tree_display/list'
else
flash[:error] = "Failed to Create Assignment"
render 'tree_display/list'
end
end

In tree_display_controller.rb we added new method get_courses_node_ng. This method returns the course list array of hashes based on the instructor chosen. This logic is similar to the helper method course_options:

def get_courses_node_ng
respond_to do |format|
courses = []
if session[:user].role.name == 'Teaching Assistant'
ta = Ta.find(session[:user].id)
ta.ta_mappings.each {|mapping| courses << Course.find(mapping.course_id) }
# If a TA created some courses before, s/he can still add new assignments to these courses.
courses << Course.where(instructor_id: session[:user].id)
courses.flatten!
# Administrator and Super-Administrator can see all courses
elsif session[:user].role.name == 'Administrator' or session[:user].role.name == 'Super-Administrator'
courses = Course.all
elsif session[:user].role.name == 'Instructor'
courses = Course.where(instructor_id: session[:user].id)
# instructor can see courses his/her TAs created
ta_ids = []
ta_ids << Instructor.get_my_tas(session[:user].id)
ta_ids.flatten!
ta_ids.each do |ta_id|
ta = Ta.find(ta_id)
ta.ta_mappings.each {|mapping| courses << Course.find(mapping.course_id) }
end
end
format.html { render json:courses}
end
end

=== Assignment Edition ===
Similar to assignment creation, in the new implementation, using ReactJS, when the edit assignment button is clicked, instead of making a server request and rendering a new view, a drop down window appears and saving the details will make the database entry.Since all the processing is done on the client side there will be decrease in the number of server requests.

Below is the mock display of what our implementation is going to look like:

[[File:Edit-new_imp.png]]

==== Files to be modified ====
*apps/views/tree_display/list.html.erb
*apps/views/assignments/edit.html.erb
*apps/views/assignments/edit/_general.html.erb

=== Addition of topics ===
* An interactive React JS component should be created and should be called by the ruby injection page ''sign_up_sheet/_add_topics.html.erb'' when New Topic link is clicked. This should show a form in that page to create topic.
* Delete/avoid usage of ''sign_up_sheet/new.html.erb'' page.
* Implement an React JS functional component to handle creation of topic and saving it to database.

=== Editing topic ===
* An interactive React JS component should be created and should be called by the ruby injection page ''sign_up_sheet/_all_actions.html.erb'' when edit action is clicked. This should show a form in that page to edit topic.
* Delete/avoid usage of ''sign_up_sheet/edit.html.erb'' page.
* Implement an React JS functional component to handle editing of topic and updating it to database.

=== Make the table in topics tab sortable by its header ===
Following sub-tasks identified to implement sortable feature for topics table.
* Modify sign_up_sheet/_table_header.html.erb partial to change the table header fields to sortable type.
* Add sort functionality using ReactJS for each column that is meaningful to be sorted.
* Below is how output will look like
[[File:Topics_new.PNG]]

=== Validating user entries ===
The following tasks are to be implemented to achieve users validation,
* Add the regular expression validation to avoid special characters in the names of assignment or directories.
* Correcting the code in edit assignment page too.
* Create validation for edge cases like giving empty values.

==== Files to be modified ====
As, the project needs to be implemented in reactJS, which helps in reducing the complexing binding in MVC framework, only changing the javascript file can help to achieve this without changing model,
* app/assets/javascripts/tree_display.jsx.erb

=== Fixing Tooltips ===
On exploring, it was noticed that all the existing tooltips work. However, we intend to increase the proximity of the tooltips in the assignment tab by increasing the size of the images.

==Test Plan==
Rails development is the Test Driven development, which helps in ensuring the implementation of all proposed implementations. We will be writing all the implementations proposed as tests that will eventually be red in rspec and try to make them green by adding to the development part.

For now the manual testing of these current implementations can help in testing the functionality from UI.
===Manual Testing===
Steps to manually test the feature are as follows:

====Assignment Creation====
*Log in as an instructor ''(user-name:instructor6 password:password)''
*Go to Manage->Assignments and click on the Assignments tab.
*Click on the 'New public assignment' or 'New private assignment' button
*Verify if drop-down window is displayed.
*Make valid entries for the available fields and click on 'create'.
*Verify if new assignment is successfully created.

====Assignment Creation====
*Log in as an instructor ''(user-name:instructor6 password:password)''
*Go to Manage->Assignments and click on the Assignments tab.
*Click on the Edit button for any of the available assignment.
*Verify if drop-down window is displayed.
*Make changes and click on 'save'.
*Verify if the changes made are successfully updated.

====Topic Creation/Editing====
* Login as an instructor ''(user-name:instructor6 password:password)''
* Create an assignment
* Click 'New Topic' link or 'edit' action in topics table for a particular topic
* A pop window or form should be displayed in the same page
* Add topic details in that window/ form
* Save it
* Created or modified topic should be seen in topics table

====Make the table in topics tab sortable by its header====
* Login as an instructor ''(user-name:instructor6 password:password)''
* Create an assignment
* Add 2 topics to the assignment
* Click sort on Topic ID and check if they are sorted
* Click sort on Topic title and check if they are sorted
* Similarly test using other columns

====Validating user entries====
*Log in as an instructor ''(user-name:instructor6 password:password)''
*Go to Manage->Assignments and click on the Assignments tab.
*Click on the 'New public assignment' or 'New private assignment' button
*Try adding the assignment using the weird names, with special symbols, ignoring check boxes
*Verify if the assignment is shown in the table.

Another way to check is from editing page too.
*Log in as an instructor ''(user-name:instructor6 password:password)''
*Go to Manage->Assignments and click on the Assignments tab.
*Click on the Edit icon page.
*Try adding the assignment using the weird names, with special symbols, ignoring check boxes
*Verify if the assignment which is updated with special characters is shown in the table.

===Automation testing===
The above tests all will be automated using rspec. Rspec Mock-ups will be created for checking the navigation flow of newly created React JS components.

==Future Work==

We will try to convert edit assignment page in to React JS. Design pages more clearly.

==References==

#''http://railscasts.com/episodes/228-sortable-table-columns sortable-columns''
#''https://www.airpair.com/reactjs/posts/reactjs-a-guide-for-rails-developers adding-reactjs''
#''https://github.com/expertiza/expertiza/pull/855

File:Edit-new imp.png

2017-05-03T15:33:35Z

Vhegde: uploaded a new version of "File:Edit-new imp.png"

new implementation for edit form

File:New imp.png

2017-05-03T15:32:33Z

Vhegde: uploaded a new version of "File:New imp.png"

New implementation for create

CSC/ECE 517 Spring 2017/Convert Assignment Creation Form to ReactJS

2017-04-13T01:44:27Z

Vhegde: formatting change

CSC/ECE 517 Spring 2017/Convert Assignment Creation Form to ReactJS

2017-04-13T01:41:39Z

Vhegde: add fixing tooltips to proposed solution

CSC/ECE 517 Spring 2017/Convert Assignment Creation Form to ReactJS

2017-04-13T01:33:15Z

Vhegde: add image

File:Edit-new imp.png

2017-04-13T01:32:17Z

Vhegde: new implementation for edit form

new implementation for edit form

CSC/ECE 517 Spring 2017/Convert Assignment Creation Form to ReactJS

2017-04-13T01:18:58Z

Vhegde: /* Assignment Creation */

CSC/ECE 517 Spring 2017/Convert Assignment Creation Form to ReactJS

2017-04-13T01:18:04Z

Vhegde: /* Assignment Creation */

CSC/ECE 517 Spring 2017/Convert Assignment Creation Form to ReactJS

2017-04-13T01:10:25Z

Vhegde: /* Assignment Creation */

File:New imp.png

2017-04-13T01:00:36Z

Vhegde: New implementation for create

New implementation for create

File:New.png

2017-04-13T00:59:58Z

Vhegde: uploaded a new version of "File:New.png": Reverted to version as of 02:27, 23 February 2010

File:New.png

2017-04-13T00:58:53Z

Vhegde: uploaded a new version of "File:New.png": new implementation for create

CSC/ECE 517 Spring 2017/Convert Assignment Creation Form to ReactJS

2017-04-13T00:41:18Z

Vhegde:

CSC/ECE 517 Spring 2017/Convert Assignment Creation Form to ReactJS

2017-04-13T00:36:50Z

Vhegde: formatting change

CSC/ECE 517 Spring 2017/Convert Assignment Creation Form to ReactJS

2017-04-13T00:36:07Z

Vhegde: external link for reactjs

CSC/ECE 517 Spring 2017/Convert Assignment Creation Form to ReactJS

2017-04-13T00:31:03Z

Vhegde: formatting change

File:Create1.JPG

2017-04-13T00:20:20Z

Vhegde: uploaded a new version of "File:Create1.JPG"

image of creating assignment

CSC/ECE 517 Spring 2017/Convert Assignment Creation Form to ReactJS

2017-04-13T00:18:51Z

Vhegde: image alignment

File:Edit2.jpg

2017-04-13T00:13:29Z

Vhegde: image for opening edit form

image for opening edit form

File:Edit.jpg

2017-04-13T00:11:02Z

Vhegde: uploaded a new version of "File:Edit.jpg": reduced size

image for editing assignment

File:Create2.JPG

2017-04-13T00:10:27Z

Vhegde: uploaded a new version of "File:Create2.JPG": Reduced size

another image for creating assignment

File:Create1.JPG

2017-04-13T00:09:45Z

Vhegde: uploaded a new version of "File:Create1.JPG": reduced size image

image of creating assignment

CSC/ECE 517 Spring 2017/Convert Assignment Creation Form to ReactJS

2017-04-07T05:18:04Z

Vhegde: adding images

File:Edit.jpg

2017-04-07T04:54:05Z

Vhegde: image for editing assignment

image for editing assignment

File:Create2.JPG

2017-04-07T04:53:04Z

Vhegde: another image for creating assignment

another image for creating assignment

File:Create1.JPG

2017-04-07T04:52:01Z

Vhegde: image of creating assignment

image of creating assignment

CSC/ECE 517 Spring 2017/Convert Assignment Creation Form to ReactJS

2017-04-07T04:50:17Z

Vhegde: proposed solution and test plan added for creating and editing assignments

CSC/ECE 517 Spring 2017/Convert Assignment Creation Form to ReactJS

2017-04-07T02:29:09Z

Vhegde: Current implementation for assignment creation & edition added

CSC/ECE 517 Spring 2017/Convert Assignment Creation Form to ReactJS

2017-04-07T02:14:49Z

Vhegde: Problem statement updated

CSC/ECE 517 Spring 2017/Convert Assignment Creation Form to ReactJS

2017-04-07T02:09:08Z

Vhegde: Introduction to expertiza added

CSC/CSC 517 Spring 2017/oss E1718

2017-03-23T23:05:51Z

Vhegde: formatting change

E1718 was the project code for an Expertiza OSS assignment. It largely dealt with the handling of how peer reviews are assigned to students.

'''
== About Expertiza ==
'''

The Expertiza project is a collaborative open source project that allows courses to create assignments for students. One of the main functions of Expertiza is to allow students to peer review the submitted assignments by their fellow classmates.

'''
== E1718 ==
'''

This page covers the E1718 project. E1718 covers the system behind assigning peer reviews to students. The main focus of this topic is the thresholds that guide which submissions a student can review as well as how many they need to review, and can review. A review can either be assigned to a student by the instructor, or it can be requested directly by the student. When the student handles it they can choose to be assigned a random submission, or they can choose the topic which they wish to review. Assignments can be set up so that each student must review a minimum number of submissions, with the choice of extra credit for completing up to a maximum number of reviews. When review topics are chosen, Expertiza sets it up so that the student can only choose a topic that has a low enough number of other reviews. At times this can constrain the choices a student has, so to fix this the instructor can set the threshold to allow for more choices. The threshold itself is the acceptable range for the number of reviews a topic has compared to the least reviewed topic. For instance, lets say there are three topics: Blue, Red and Green. Blue has had 1 review, Red has had 2 reviews, and Green has had 3 reviews. If the threshold is set to 0, then the only topic that can be chosen for review is Blue. If the threshold is 1, then both Blue and Red can be chosen. If it is 3, then all 3 topics can be chosen.

By solving the issues raised by E1718 this system will be improved in several ways. As currently set up, if a student has already reviewed all assignments within the minimum threshold, they will be unable to request another review. To solve this, when a student has reviewed all submissions within threshold k, the system should increase the threshold by m so that the student can review all submissions within threshold k+m. The current version of Expertiza also fails to show a student what the minimum number of reviews they must complete is, as well as the upper limit of reviews allowed. This will be fixed in this project so that an instructor can set the minimum and maximum number of reviews from the Review Strategy tab, and those limits show up on the student's end when viewing Others' Work. A previous issue that has since been solved was that a student was allowed to review their own submission. While this did not need further work, it did need automated testing to be written for it. Those tests were completed, as well as tests for the issues described above.

'''
== Issues ==
'''

'''228:''' Increase the threshold for a student who has already completed reviews for all submissions with the minimum number.

'''402:''' Write automated tests to check if a student can review a topic only they have submitted on.

'''417:''' Implement a num_reviews_required (and num_reviews_allowed) field in the assignments table to say how many reviews per reviewer are required, and how many are allowed (default should be # allowed = # req’d.). Make it settable from the Review Strategy tab (see Issue 417) and viewable when a student clicks on “Others’ work”.

'''
== Solutions ==
'''

'''Project Files (new or changed)'''

*expertiza/spec/features/review_assignment.rb
*expertiza/db/migrate/20170322074046_add_num_metareviews_required_to_assignments.rb
*expertiza/db/migrate/20170322074238_add_num_metareviews_allowed_to_assignments.rb
*expertiza/db/migrate/schema.rb
*expertiza/app/models/assignment_form.rb
*expertiza/app/models/review_assignment.rb
*expertiza/app/views/assignments/edit/_review_strategy.html.erb
*expertiza/app/views/student_review/list.html.erb
*expertiza/spec/features/review_assignement_spec.rb

'''Issue 228'''

According to this issue, the reviewers, having reviewed the submission with the fewest outstanding reviews, can't review any other submission until the submission they've just reviewed catches up to other submissions in number of reviews. Reviewers who have already reviewed the submission with the fewest reviews should be able to review the submission with the next fewest reviews, regardless of what the threshold is. Solution to this would be, every time a student requests for review, setup a proper filtering process with appropriate thresholds.

If topic x and topic y has two reviews each and topic z has no reviews, the reviewer is allowed to review topic z, as it has the least number of reviews. He is not allowed anymore reviews until topic z catches up with x and y. To rectify this, changes were made to review_assignment.rb file where when review is requested, initially the responses with no entries, self submitted topic are filtered out from the review pool. Then, if the reviewer has done any other reviews before, such reviews are filtered out. Then the review pool is combed for submissions with least reviews and the minimum reviews count is obtained. This, added to review_topic_threshold becomes the benchmarch against which number of reviews for a topic is measured, and if it’s less than the benchmark, the review is assigned to the requestee. This way, the reviewer is provided with more flexible review policy than before.

<pre>
def filter_least_reviewed(contributor_set)
contributor = contributor_set.min_by {|contributor| contributor.review_mappings.reject {|review_mapping| review_mapping.response.nil? }.count }
minimum_reviews = contributor.review_mappings.reject {|review_mapping| review_mapping.response.nil? }.count rescue 0
allowed_reviews = minimum_reviews + review_topic_threshold
contributor_set.reject! {|contributor| contributor.review_mappings.reject {|review_mapping| review_mapping.response.nil? }.count > allowed_reviews }

contributor_set
end
</pre>

'''Issue 402'''

This solution required the creation of the review_assignment_spec.rb file. It conducts tests to ensure that a student may not review a topic in which their submission is the only one. This tests the review_assignment.rb module, which is heavily used by assignment.rb and review_mapping_controller.rb.

The specific tests that examined this potential error are as follows:
<pre>
it "is not able to be assigned to review a topic only they have submitted on" do
submit_to_topic
visit '/student_task/list'
click_link "TestAssignment"
click_link "Others' work"
find(:css, "#i_dont_care").set(true)
click_button "Request a new submission to review"
expect(page).to have_content "No topics are available to review at this time. Please try later."
end

it "is not able to select topic for review only they have submitted to" do
submit_to_topic
visit '/student_task/list'
click_link "TestAssignment"
click_link "Others' work"
expect(page).to have_content 'Reviews for "TestAssignment"'
expect(page).not_to have_button("topic_id_#{SignUpTopic.find_by_topic_name("TestTopic").id}")
end
</pre>

The first test checks to see if a student can be assigned their own submission if they request a review via the "I don't care" checkbox, which allows them to be assigned a submission from any topic. Doing so correctly triggered the warning message "No topics are available to review at this time. Please try later." This was further backed up by a test in which another student submitted an assignment and the same path was followed. This case did not trigger a warning and the student was correctly assigned the submission. This shows the check is working as intended.

The second test checks to see if a student can choose a topic in which their assignment is the only submission. This was the main focus of issue 402. When choosing a topic the student must select a radio button for that topic and then request a review. This was no longer possible after the 402 fix as the student was unable to select the radio button for the topic if they were the only one who had submitted to it. Consequentially, this prevented the student from reaching the error message described in issue 402 "There are no more submissions to review on that topic." This test passed as expected showing the issue had been resolved. It was also tested whether they could select a topic in which they weren't the only submission, and this test passed as expected as well.

'''Issue 417'''

The 4 variables - num_reviews, num_reviews_required, num_metareviews_required and num_metareviews_allowed - are added to the assignment table using rails migration. The default of these variables are set to 3.

<pre>
class AddNumReviewsRequiredToAssignments < ActiveRecord::Migration
def change
add_column :assignments, :num_reviews_required, :integer, :default => 3
end
end

class AddNumReviewsToAssignments < ActiveRecord::Migration
def change
change_column :assignments, :num_reviews, :integer, :default => 3
end
end

class AddNumMetareviewsRequiredToAssignments < ActiveRecord::Migration
def change
add_column :assignments, :num_metareviews_required, :integer, :default => 3
end
end

class AddNumMetareviewsAllowedToAssignments < ActiveRecord::Migration
def change
add_column :assignments, :num_metareviews_allowed, :integer, :default => 3
end
end

</pre>
These variables are viewable at "others" page for each assignment in students account, and settable at "edit assignment" page, "review_strategy" tab in instructor's account. The instructor are allowed to choose whether they want upper bound on number of reviews (num_reviews && num_metareviews_allowed) by clicking check box. By this way, the instructor can allow students to review as many submission as possible but grading only required number of reviews.

Validations are done by checking whether the number of reviews required is less than number of reviews allowed. i.e.) num_reviews_required <= num_reviews_allowed. Similarly for condition follows for meta reviews. These validation are done in assignment.rb file and are executed before an update is saved into database.
<pre>
class Assignment < ActiveRecord::Base
validate :valid_num_review
def valid_num_review
if(self.num_reviews && self.num_reviews != -1 && self.num_reviews < self.num_reviews_required)
self.errors.add(:message, "Num of reviews required cannot be greater than number of reviews allowed")
elsif(self.num_metareviews_allowed && self.num_metareviews_allowed != -1 && self.num_metareviews_allowed < self.num_metareviews_required)
self.errors.add(:message, "Number of Meta-Reviews required cannot be greater than number of meta-reviews allowed")
end
end
end
</pre>
Here num_reviews and num_metareviews_allowed are negative when the upper bound for reivews are infinity.

The corresponding tests are written in assignment_spec.rb
<pre>
it "check whether assignment doesnot accept required value greater than allowed value - Review" do
@assignment.num_reviews = 1
@assignment.num_reviews_required = 3
expect(@assignment).not_to be_valid
end

it "check whether assignment doesnot accept required value greater than allowed value - Meta-Review" do
@assignment.num_metareviews_allowed = 1
@assignment.num_metareviews_required = 3
expect(@assignment).not_to be_valid
end
</pre>
The first test checks whether num_reviews accepts values less than num_reviews_required for which the validation should fail.
The Second test checks whether num_metareviews_allowed accepts values less than num_metareviews_required for which the validation should fail too.

'''

== Manual Testing ==
'''
*Please follow these instructions for testing these solutions manually.

'''228'''
* Log in as instructor(user:instructor6) and create a new assignment and add four students to the assignment(user:student360,student361,student362,student364).
* Log in as student, submit an artifact. (e.g:a test link)
* Log in as second student and submit an artifact.
* Log in as first student and review an artifact, since there is only one other submission at this point, second student's submission is up for review.
* Log in as second student and review an artifact.
* Now, log in as third student, submit an artifact and also do two reviews, naturally you would be reviewing first and second student's submissions.
* At this point, first and second students' submission has two reviews and third student's submission has zero review.
* Now, log in as the fourth student and review, you should be allowed to review all three artifacts instead of just the one with least reviews.

'''402'''
*Log in with an instructor.
*Create an assignment with topics to choose from.
*Log in with a student.
*Sign up for one of the topics from the previously created assignment.
*Submit an assignment for that topic.
*Go to the Others' Work tab.
*Attempt to select that topic for review -OR- Check the box for "I Don't Care"
*Attempt to request review

'''417'''
*Log in as an instructor
*go to edit page of an assignment and navigate to Review Strategy tab.
*Change the allowed and required field of reviews and meta-reviews.
*Try giving greater value for required field than allowed field. It should throw an error stating the relevant message.
*Give the correct value and save it.
*Sign in as a student who has enrolled for that particular assignment.
*go to "others" page.
*The allowed and required field are displayed saying that the assignment requires atleast k reviews.
*If meta-review is enabled for that topic then the meta-review information is also displayed.
'''

== References ==
'''
#[https://github.com/expertiza/expertiza Expertiza GitHub]
#[http://expertiza.ncsu.edu/ Expertiza Website]
#[https://github.com/crajase/expertiza Expertiza GitHub Fork]
#[https://github.com/expertiza/expertiza/issues/228 Issue 228]
#[https://github.com/expertiza/expertiza/issues/402 Issue 402]
#[https://github.com/expertiza/expertiza/issues/417 Issue 417]

CSC/CSC 517 Spring 2017/oss E1718

2017-03-23T23:05:16Z

Vhegde: Manual testing for 228

CSC/CSC 517 Spring 2017/oss E1718

2017-03-23T22:59:27Z

Vhegde: formatting change

E1718 was the project code for an Expertiza OSS assignment. It largely dealt with the handling of how peer reviews are assigned to students.

'''
== About Expertiza ==
'''

The Expertiza project is a collaborative open source project that allows courses to create assignments for students. One of the main functions of Expertiza is to allow students to peer review the submitted assignments by their fellow classmates.

'''
== E1718 ==
'''

This page covers the E1718 project. E1718 covers the system behind assigning peer reviews to students. The main focus of this topic is the thresholds that guide which submissions a student can review as well as how many they need to review, and can review. A review can either be assigned to a student by the instructor, or it can be requested directly by the student. When the student handles it they can choose to be assigned a random submission, or they can choose the topic which they wish to review. Assignments can be set up so that each student must review a minimum number of submissions, with the choice of extra credit for completing up to a maximum number of reviews. When review topics are chosen, Expertiza sets it up so that the student can only choose a topic that has a low enough number of other reviews. At times this can constrain the choices a student has, so to fix this the instructor can set the threshold to allow for more choices. The threshold itself is the acceptable range for the number of reviews a topic has compared to the least reviewed topic. For instance, lets say there are three topics: Blue, Red and Green. Blue has had 1 review, Red has had 2 reviews, and Green has had 3 reviews. If the threshold is set to 0, then the only topic that can be chosen for review is Blue. If the threshold is 1, then both Blue and Red can be chosen. If it is 3, then all 3 topics can be chosen.

By solving the issues raised by E1718 this system will be improved in several ways. As currently set up, if a student has already reviewed all assignments within the minimum threshold, they will be unable to request another review. To solve this, when a student has reviewed all submissions within threshold k, the system should increase the threshold by m so that the student can review all submissions within threshold k+m. The current version of Expertiza also fails to show a student what the minimum number of reviews they must complete is, as well as the upper limit of reviews allowed. This will be fixed in this project so that an instructor can set the minimum and maximum number of reviews from the Review Strategy tab, and those limits show up on the student's end when viewing Others' Work. A previous issue that has since been solved was that a student was allowed to review their own submission. While this did not need further work, it did need automated testing to be written for it. Those tests were completed, as well as tests for the issues described above.

'''
== Issues ==
'''

'''228:''' Increase the threshold for a student who has already completed reviews for all submissions with the minimum number.

'''402:''' Write automated tests to check if a student can review a topic only they have submitted on.

'''417:''' Implement a num_reviews_required (and num_reviews_allowed) field in the assignments table to say how many reviews per reviewer are required, and how many are allowed (default should be # allowed = # req’d.). Make it settable from the Review Strategy tab (see Issue 417) and viewable when a student clicks on “Others’ work”.

'''
== Solutions ==
'''

'''Project Files (new or changed)'''

*expertiza/spec/features/review_assignment.rb
*expertiza/db/migrate/20170322074046_add_num_metareviews_required_to_assignments.rb
*expertiza/db/migrate/20170322074238_add_num_metareviews_allowed_to_assignments.rb
*expertiza/db/migrate/schema.rb
*expertiza/app/models/assignment_form.rb
*expertiza/app/models/review_assignment.rb
*expertiza/app/views/assignments/edit/_review_strategy.html.erb
*expertiza/app/views/student_review/list.html.erb
*expertiza/spec/features/review_assignement_spec.rb

'''Issue 228'''

According to this issue, the reviewers, having reviewed the submission with the fewest outstanding reviews, can't review any other submission until the submission they've just reviewed catches up to other submissions in number of reviews. Reviewers who have already reviewed the submission with the fewest reviews should be able to review the submission with the next fewest reviews, regardless of what the threshold is. Solution to this would be, every time a student requests for review, setup a proper filtering process with appropriate thresholds.

If topic x and topic y has two reviews each and topic z has no reviews, the reviewer is allowed to review topic z, as it has the least number of reviews. He is not allowed anymore reviews until topic z catches up with x and y. To rectify this, changes were made to review_assignment.rb file where when review is requested, initially the responses with no entries, self submitted topic are filtered out from the review pool. Then, if the reviewer has done any other reviews before, such reviews are filtered out. Then the review pool is combed for submissions with least reviews and the minimum reviews count is obtained. This, added to review_topic_threshold becomes the benchmarch against which number of reviews for a topic is measured, and if it’s less than the benchmark, the review is assigned to the requestee. This way, the reviewer is provided with more flexible review policy than before.

<pre>
def filter_least_reviewed(contributor_set)
contributor = contributor_set.min_by {|contributor| contributor.review_mappings.reject {|review_mapping| review_mapping.response.nil? }.count }
minimum_reviews = contributor.review_mappings.reject {|review_mapping| review_mapping.response.nil? }.count rescue 0
allowed_reviews = minimum_reviews + review_topic_threshold
contributor_set.reject! {|contributor| contributor.review_mappings.reject {|review_mapping| review_mapping.response.nil? }.count > allowed_reviews }

contributor_set
end
</pre>

'''Issue 402'''

This solution required the creation of the review_assignment_spec.rb file. It conducts tests to ensure that a student may not review a topic in which their submission is the only one. This tests the review_assignment.rb module, which is heavily used by assignment.rb and review_mapping_controller.rb.

The specific tests that examined this potential error are as follows:
<pre>
it "is not able to be assigned to review a topic only they have submitted on" do
submit_to_topic
visit '/student_task/list'
click_link "TestAssignment"
click_link "Others' work"
find(:css, "#i_dont_care").set(true)
click_button "Request a new submission to review"
expect(page).to have_content "No topics are available to review at this time. Please try later."
end

it "is not able to select topic for review only they have submitted to" do
submit_to_topic
visit '/student_task/list'
click_link "TestAssignment"
click_link "Others' work"
expect(page).to have_content 'Reviews for "TestAssignment"'
expect(page).not_to have_button("topic_id_#{SignUpTopic.find_by_topic_name("TestTopic").id}")
end
</pre>

The first test checks to see if a student can be assigned their own submission if they request a review via the "I don't care" checkbox, which allows them to be assigned a submission from any topic. Doing so correctly triggered the warning message "No topics are available to review at this time. Please try later." This was further backed up by a test in which another student submitted an assignment and the same path was followed. This case did not trigger a warning and the student was correctly assigned the submission. This shows the check is working as intended.

The second test checks to see if a student can choose a topic in which their assignment is the only submission. This was the main focus of issue 402. When choosing a topic the student must select a radio button for that topic and then request a review. This was no longer possible after the 402 fix as the student was unable to select the radio button for the topic if they were the only one who had submitted to it. Consequentially, this prevented the student from reaching the error message described in issue 402 "There are no more submissions to review on that topic." This test passed as expected showing the issue had been resolved. It was also tested whether they could select a topic in which they weren't the only submission, and this test passed as expected as well.

'''Issue 417'''

The 4 variables - num_reviews, num_reviews_required, num_metareviews_required and num_metareviews_allowed - are added to the assignment table using rails migration. The default of these variables are set to 3.

<pre>
class AddNumReviewsRequiredToAssignments < ActiveRecord::Migration
def change
add_column :assignments, :num_reviews_required, :integer, :default => 3
end
end

class AddNumReviewsToAssignments < ActiveRecord::Migration
def change
change_column :assignments, :num_reviews, :integer, :default => 3
end
end

class AddNumMetareviewsRequiredToAssignments < ActiveRecord::Migration
def change
add_column :assignments, :num_metareviews_required, :integer, :default => 3
end
end

class AddNumMetareviewsAllowedToAssignments < ActiveRecord::Migration
def change
add_column :assignments, :num_metareviews_allowed, :integer, :default => 3
end
end

</pre>
These variables are viewable at "others" page for each assignment in students account, and settable at "edit assignment" page, "review_strategy" tab in instructor's account. The instructor are allowed to choose whether they want upper bound on number of reviews (num_reviews && num_metareviews_allowed) by clicking check box. By this way, the instructor can allow students to review as many submission as possible but grading only required number of reviews.

Validations are done by checking whether the number of reviews required is less than number of reviews allowed. i.e.) num_reviews_required <= num_reviews_allowed. Similarly for condition follows for meta reviews. These validation are done in assignment.rb file and are executed before an update is saved into database.
<pre>
class Assignment < ActiveRecord::Base
validate :valid_num_review
def valid_num_review
if(self.num_reviews && self.num_reviews != -1 && self.num_reviews < self.num_reviews_required)
self.errors.add(:message, "Num of reviews required cannot be greater than number of reviews allowed")
elsif(self.num_metareviews_allowed && self.num_metareviews_allowed != -1 && self.num_metareviews_allowed < self.num_metareviews_required)
self.errors.add(:message, "Number of Meta-Reviews required cannot be greater than number of meta-reviews allowed")
end
end
end
</pre>
Here num_reviews and num_metareviews_allowed are negative when the upper bound for reivews are infinity.

The corresponding tests are written in assignment_spec.rb
<pre>
it "check whether assignment doesnot accept required value greater than allowed value - Review" do
@assignment.num_reviews = 1
@assignment.num_reviews_required = 3
expect(@assignment).not_to be_valid
end

it "check whether assignment doesnot accept required value greater than allowed value - Meta-Review" do
@assignment.num_metareviews_allowed = 1
@assignment.num_metareviews_required = 3
expect(@assignment).not_to be_valid
end
</pre>
The first test checks whether num_reviews accepts values less than num_reviews_required for which the validation should fail.
The Second test checks whether num_metareviews_allowed accepts values less than num_metareviews_required for which the validation should fail too.

'''

== Manual Testing ==
'''
*Please follow these instructions for testing these solutions manually.

'''228'''

'''402'''
*Log in with an instructor.
*Create an assignment with topics to choose from.
*Log in with a student.
*Sign up for one of the topics from the previously created assignment.
*Submit an assignment for that topic.
*Go to the Others' Work tab.
*Attempt to select that topic for review -OR- Check the box for "I Don't Care"
*Attempt to request review

'''417'''
*Log in as an instructor
*go to edit page of an assignment and navigate to Review Strategy tab.
*Change the allowed and required field of reviews and meta-reviews.
*Try giving greater value for required field than allowed field. It should throw an error stating the relevant message.
*Give the correct value and save it.
*Sign in as a student who has enrolled for that particular assignment.
*go to "others" page.
*The allowed and required field are displayed saying that the assignment requires atleast k reviews.
*If meta-review is enabled for that topic then the meta-review information is also displayed.
'''

== References ==
'''
#[https://github.com/expertiza/expertiza Expertiza GitHub]
#[http://expertiza.ncsu.edu/ Expertiza Website]
#[https://github.com/crajase/expertiza Expertiza GitHub Fork]
#[https://github.com/expertiza/expertiza/issues/228 Issue 228]
#[https://github.com/expertiza/expertiza/issues/402 Issue 402]
#[https://github.com/expertiza/expertiza/issues/417 Issue 417]

CSC/CSC 517 Spring 2017/oss E1718

2017-03-23T22:58:52Z

Vhegde: Editing for issue 228

E1718 was the project code for an Expertiza OSS assignment. It largely dealt with the handling of how peer reviews are assigned to students.

'''
== About Expertiza ==
'''

The Expertiza project is a collaborative open source project that allows courses to create assignments for students. One of the main functions of Expertiza is to allow students to peer review the submitted assignments by their fellow classmates.

'''
== E1718 ==
'''

This page covers the E1718 project. E1718 covers the system behind assigning peer reviews to students. The main focus of this topic is the thresholds that guide which submissions a student can review as well as how many they need to review, and can review. A review can either be assigned to a student by the instructor, or it can be requested directly by the student. When the student handles it they can choose to be assigned a random submission, or they can choose the topic which they wish to review. Assignments can be set up so that each student must review a minimum number of submissions, with the choice of extra credit for completing up to a maximum number of reviews. When review topics are chosen, Expertiza sets it up so that the student can only choose a topic that has a low enough number of other reviews. At times this can constrain the choices a student has, so to fix this the instructor can set the threshold to allow for more choices. The threshold itself is the acceptable range for the number of reviews a topic has compared to the least reviewed topic. For instance, lets say there are three topics: Blue, Red and Green. Blue has had 1 review, Red has had 2 reviews, and Green has had 3 reviews. If the threshold is set to 0, then the only topic that can be chosen for review is Blue. If the threshold is 1, then both Blue and Red can be chosen. If it is 3, then all 3 topics can be chosen.

By solving the issues raised by E1718 this system will be improved in several ways. As currently set up, if a student has already reviewed all assignments within the minimum threshold, they will be unable to request another review. To solve this, when a student has reviewed all submissions within threshold k, the system should increase the threshold by m so that the student can review all submissions within threshold k+m. The current version of Expertiza also fails to show a student what the minimum number of reviews they must complete is, as well as the upper limit of reviews allowed. This will be fixed in this project so that an instructor can set the minimum and maximum number of reviews from the Review Strategy tab, and those limits show up on the student's end when viewing Others' Work. A previous issue that has since been solved was that a student was allowed to review their own submission. While this did not need further work, it did need automated testing to be written for it. Those tests were completed, as well as tests for the issues described above.

'''
== Issues ==
'''

'''228:''' Increase the threshold for a student who has already completed reviews for all submissions with the minimum number.

'''402:''' Write automated tests to check if a student can review a topic only they have submitted on.

'''417:''' Implement a num_reviews_required (and num_reviews_allowed) field in the assignments table to say how many reviews per reviewer are required, and how many are allowed (default should be # allowed = # req’d.). Make it settable from the Review Strategy tab (see Issue 417) and viewable when a student clicks on “Others’ work”.

'''
== Solutions ==
'''

'''Project Files (new or changed)'''

*expertiza/spec/features/review_assignment.rb
*expertiza/db/migrate/20170322074046_add_num_metareviews_required_to_assignments.rb
*expertiza/db/migrate/20170322074238_add_num_metareviews_allowed_to_assignments.rb
*expertiza/db/migrate/schema.rb
*expertiza/app/models/assignment_form.rb
*expertiza/app/models/review_assignment.rb
*expertiza/app/views/assignments/edit/_review_strategy.html.erb
*expertiza/app/views/student_review/list.html.erb
*expertiza/spec/features/review_assignement_spec.rb

'''Issue 228'''
According to this issue, the reviewers, having reviewed the submission with the fewest outstanding reviews, can't review any other submission until the submission they've just reviewed catches up to other submissions in number of reviews. Reviewers who have already reviewed the submission with the fewest reviews should be able to review the submission with the next fewest reviews, regardless of what the threshold is. Solution to this would be, every time a student requests for review, setup a proper filtering process with appropriate thresholds.

If topic x and topic y has two reviews each and topic z has no reviews, the reviewer is allowed to review topic z, as it has the least number of reviews. He is not allowed anymore reviews until topic z catches up with x and y. To rectify this, changes were made to review_assignment.rb file where when review is requested, initially the responses with no entries, self submitted topic are filtered out from the review pool. Then, if the reviewer has done any other reviews before, such reviews are filtered out. Then the review pool is combed for submissions with least reviews and the minimum reviews count is obtained. This, added to review_topic_threshold becomes the benchmarch against which number of reviews for a topic is measured, and if it’s less than the benchmark, the review is assigned to the requestee. This way, the reviewer is provided with more flexible review policy than before.

<pre>
def filter_least_reviewed(contributor_set)
contributor = contributor_set.min_by {|contributor| contributor.review_mappings.reject {|review_mapping| review_mapping.response.nil? }.count }
minimum_reviews = contributor.review_mappings.reject {|review_mapping| review_mapping.response.nil? }.count rescue 0
allowed_reviews = minimum_reviews + review_topic_threshold
contributor_set.reject! {|contributor| contributor.review_mappings.reject {|review_mapping| review_mapping.response.nil? }.count > allowed_reviews }

contributor_set
end
</pre>

'''Issue 402'''

This solution required the creation of the review_assignment_spec.rb file. It conducts tests to ensure that a student may not review a topic in which their submission is the only one. This tests the review_assignment.rb module, which is heavily used by assignment.rb and review_mapping_controller.rb.

The specific tests that examined this potential error are as follows:
<pre>
it "is not able to be assigned to review a topic only they have submitted on" do
submit_to_topic
visit '/student_task/list'
click_link "TestAssignment"
click_link "Others' work"
find(:css, "#i_dont_care").set(true)
click_button "Request a new submission to review"
expect(page).to have_content "No topics are available to review at this time. Please try later."
end

it "is not able to select topic for review only they have submitted to" do
submit_to_topic
visit '/student_task/list'
click_link "TestAssignment"
click_link "Others' work"
expect(page).to have_content 'Reviews for "TestAssignment"'
expect(page).not_to have_button("topic_id_#{SignUpTopic.find_by_topic_name("TestTopic").id}")
end
</pre>

The first test checks to see if a student can be assigned their own submission if they request a review via the "I don't care" checkbox, which allows them to be assigned a submission from any topic. Doing so correctly triggered the warning message "No topics are available to review at this time. Please try later." This was further backed up by a test in which another student submitted an assignment and the same path was followed. This case did not trigger a warning and the student was correctly assigned the submission. This shows the check is working as intended.

The second test checks to see if a student can choose a topic in which their assignment is the only submission. This was the main focus of issue 402. When choosing a topic the student must select a radio button for that topic and then request a review. This was no longer possible after the 402 fix as the student was unable to select the radio button for the topic if they were the only one who had submitted to it. Consequentially, this prevented the student from reaching the error message described in issue 402 "There are no more submissions to review on that topic." This test passed as expected showing the issue had been resolved. It was also tested whether they could select a topic in which they weren't the only submission, and this test passed as expected as well.

'''Issue 417'''

The 4 variables - num_reviews, num_reviews_required, num_metareviews_required and num_metareviews_allowed - are added to the assignment table using rails migration. The default of these variables are set to 3.

<pre>
class AddNumReviewsRequiredToAssignments < ActiveRecord::Migration
def change
add_column :assignments, :num_reviews_required, :integer, :default => 3
end
end

class AddNumReviewsToAssignments < ActiveRecord::Migration
def change
change_column :assignments, :num_reviews, :integer, :default => 3
end
end

class AddNumMetareviewsRequiredToAssignments < ActiveRecord::Migration
def change
add_column :assignments, :num_metareviews_required, :integer, :default => 3
end
end

class AddNumMetareviewsAllowedToAssignments < ActiveRecord::Migration
def change
add_column :assignments, :num_metareviews_allowed, :integer, :default => 3
end
end

</pre>
These variables are viewable at "others" page for each assignment in students account, and settable at "edit assignment" page, "review_strategy" tab in instructor's account. The instructor are allowed to choose whether they want upper bound on number of reviews (num_reviews && num_metareviews_allowed) by clicking check box. By this way, the instructor can allow students to review as many submission as possible but grading only required number of reviews.

Validations are done by checking whether the number of reviews required is less than number of reviews allowed. i.e.) num_reviews_required <= num_reviews_allowed. Similarly for condition follows for meta reviews. These validation are done in assignment.rb file and are executed before an update is saved into database.
<pre>
class Assignment < ActiveRecord::Base
validate :valid_num_review
def valid_num_review
if(self.num_reviews && self.num_reviews != -1 && self.num_reviews < self.num_reviews_required)
self.errors.add(:message, "Num of reviews required cannot be greater than number of reviews allowed")
elsif(self.num_metareviews_allowed && self.num_metareviews_allowed != -1 && self.num_metareviews_allowed < self.num_metareviews_required)
self.errors.add(:message, "Number of Meta-Reviews required cannot be greater than number of meta-reviews allowed")
end
end
end
</pre>
Here num_reviews and num_metareviews_allowed are negative when the upper bound for reivews are infinity.

The corresponding tests are written in assignment_spec.rb
<pre>
it "check whether assignment doesnot accept required value greater than allowed value - Review" do
@assignment.num_reviews = 1
@assignment.num_reviews_required = 3
expect(@assignment).not_to be_valid
end

it "check whether assignment doesnot accept required value greater than allowed value - Meta-Review" do
@assignment.num_metareviews_allowed = 1
@assignment.num_metareviews_required = 3
expect(@assignment).not_to be_valid
end
</pre>
The first test checks whether num_reviews accepts values less than num_reviews_required for which the validation should fail.
The Second test checks whether num_metareviews_allowed accepts values less than num_metareviews_required for which the validation should fail too.

'''

== Manual Testing ==
'''
*Please follow these instructions for testing these solutions manually.

'''228'''

'''402'''
*Log in with an instructor.
*Create an assignment with topics to choose from.
*Log in with a student.
*Sign up for one of the topics from the previously created assignment.
*Submit an assignment for that topic.
*Go to the Others' Work tab.
*Attempt to select that topic for review -OR- Check the box for "I Don't Care"
*Attempt to request review

'''417'''
*Log in as an instructor
*go to edit page of an assignment and navigate to Review Strategy tab.
*Change the allowed and required field of reviews and meta-reviews.
*Try giving greater value for required field than allowed field. It should throw an error stating the relevant message.
*Give the correct value and save it.
*Sign in as a student who has enrolled for that particular assignment.
*go to "others" page.
*The allowed and required field are displayed saying that the assignment requires atleast k reviews.
*If meta-review is enabled for that topic then the meta-review information is also displayed.
'''

== References ==
'''
#[https://github.com/expertiza/expertiza Expertiza GitHub]
#[http://expertiza.ncsu.edu/ Expertiza Website]
#[https://github.com/crajase/expertiza Expertiza GitHub Fork]
#[https://github.com/expertiza/expertiza/issues/228 Issue 228]
#[https://github.com/expertiza/expertiza/issues/402 Issue 402]
#[https://github.com/expertiza/expertiza/issues/417 Issue 417]