CSC/ECE 517 Fall 2019 - E1972. OSS project J. Skellington: Accessing Assignment Rubrics
About Expertiza
Expertiza is an open source project based on Ruby on Rails framework. Expertiza allows the instructor to create new assignments and customize new or existing assignments. It also allows the instructor to create a list of topics the students can sign up for. Students can form teams in Expertiza to work on various projects and assignments. Students can also peer review other students' submissions. Expertiza supports submission across various document types, including the URLs and wiki pages.
Problem Statement
Task 1 : Inappropriate redirection when Managing Questionnaire types
Description
Each of the options for Manage>Questionnaires> does not appropriately link you to the Questionnaires tab with that section of Questionnaires expanded. Currently, the homepage shows 3 tabs: Courses, Assignments and Questionnaires. Suppose a user clicks on the "courses" tab and then from the "Manage Content Tab" -> "Questionnaires", clicks on any of the options, then it will redirect to the same page and not the one which was selected. This needs to be fixed such that upon click, it opens up the corresponding rubric page with that particular rubric section expanded and also the respective tab (courses/assignments/questionnaires) must be highlighted.
Problem Cause (The grubby details)
The Manage Content page has three tabs in it namely: "Courses","Assignments" and "Questionnaires". And the application has a feature of storing the 'Last open tab' in its session. Suppose a user was in 'Assignments' tab under 'Manage Content' Section, and when the user switches to some other tab (By clicking on Home for instance), and comes back on 'Manage Content' section (by clicking on 'Manage...' menu button), he is directed back on the 'Assignments' tab only (the tab that was opened before leaving the 'Manage Content' section).
The problem however, with this feature is that it dominates the natural flow of the application in the following scenario: Lets say after leaving the 'Manage Content' section as mentioned above, the user clicks 'Manage...>Questionnaires', but even at this point, the user is directed again directed to 'Assignments' tab under 'Manage Content'
How to reproduce
If you are on the assignment tab and select to Manage…>Questionnaires> [some option], this will send you to the assignment tab. It is believed that the redirect will always send you to the view that was previously displayed. Change the tab to course or questionnaire and then it just sends you to that tab instead.
Flowchart for correct behavior
Major Fixes Done
app/assets/javascripts/tree_display.jsx - Created "ComponentDidMount" method under this script file which is a react lifecycle function and this is invoked immediately after a component is inserted into the tree. The setState method sets the expanded attribute to true for expanding the relative grid of the rubric. This method will trigger an extra rendering but it will happen before the browser updates the screen. This function will help determine which sub-menu item is selected and expands the corresponding rubric by updating the state of the table row.
componentDidMount: function() {
rubBuffer = ["Review", "Metareview", "Author Feedback", "Teammate Review", "Assignment Survey", "Global Survey", "Course Survey"];
selMenuItem = document.getElementById("tree_display").getAttribute("data-menu-item");
selMenuItemInd = rubBuffer.indexOf(selMenuItem);
if(rubBuffer[selMenuItemInd] === this.props.name) {
if (selMenuItemInd !== -1) {
this.setState({
expanded: true
}, function () {
this.props.rowClicked(this.props.id, true, this.props.newParams)
})
}
}
},
app/controllers/tree_display_controller.rb
- This is the main controller which calls the respective tab upon selection. The 'last_open_tab' holds on the tab clicked under 'Questionnaire'. For every goto_controller call, the tab number sent along in the parameter refers to the respective order of tabs that appear on the homepage.
The changes in the goto_controller will allow the function to keep a track of which tab was last opened by using a new argument i.e. last_open_tab and setting its values to the integer value corresponding to the relative ordering of the tabs on the page . For e.g., if the Questionnaires tab is clicked then a value of 3 will be passed as a parameter since the position of the Questionnaires tab is 3 on the page.
def goto_controller(name_parameter, prevTab)
node_object = TreeFolder.find_by(name: name_parameter)
session[:root] = FolderNode.find_by(node_object_id: node_object.id).id
if(prevTab!=nil)
session[:last_open_tab] = prevTab
end
redirect_to controller: 'tree_display', action: 'list', currCtlr: name_parameter
end
def goto_questionnaires
goto_controller('Questionnaires','3')
end
ScreenCast
Here is a screencast of the tested functionality after the fix: Fixed Issue #1186
Task 2: Instructors can make changes to each others’ rubrics
Description
Currently, rubric lists show all public rubrics and there is no option to restrict the view as in assignments and courses. This should be fixed by only displaying the option to edit (pencil) when the rubric belongs to the user. This clearly indicates that the user has the ability or not to edit this rubric.
Problem Cause (The grubby details)
The problem which we are trying to resolve arises because of the fact that all the rubrics, questionnaires, surveys, etc have been made available for all the instructors to view. Because there was no limitation the code uses the same to code to render lists across the different users. This raises an issue that one instructor can if they want to edit other instructor's surveys when they were only supposed to view them Currently, if a non-authorized user clicks on edit he is redirected to the same page with an error. A better approach would be to not show the edit button at all and thus we have fixed this user experience.
How to reproduce
Log in and Manage…>Questionnaires>Rubrics. Then click on one of the rubric types to show a list of rubrics and click through the edit options to reveal the flash error when you try and edit a rubric that is not yours.
Flowchart for correct behavior:
Major Fixes Done
app/assets/javascripts/tree_display.jsx: - This code wait for the page to load and then try to find the user id embedded in the HTML sent from the backend. It then sets this id in a variable available across the app using javascript.
let app_variables = {
currentUserId: null
};
window.addEventListener('load', e => {
let treeDisplayDiv = document.querySelector('#tree_display');
if (treeDisplayDiv) {
app_variables.currentUserId = document.querySelector('#tree_display').dataset.userId;
}
});
We then pass the instructor's id coming from the API into the Component as props so that it is accessible inside out component for validation.
instructor_id={entry.instructor_id}
The check which is helping us achieve this is
instructor_id={entry.instructor_id}
app/controllers/controller2:
(app_variables.currentUserId == null || this.props.instructor_id == app_variables.currentUserId)
For API changes
app/controllers/tree_display_controller.rb
"instructor_id" => child.get_instructor_id,
app/models/questionnaire_node.rb
This function added to the model which simply returns instructor_id associated with that particular questionnaire or survey.
def get_instructor_id
Questionnaire.find_by(id: self.node_object_id).try(:instructor_id)
end
Deployment
This application with the mentioned changes have been deployed to the following URL: http://152.46.19.166:8080
- We have used VCL for deployment.
- Username: instructor6
- Password: password
Test Plan
Since both of the issues under this project were UI related, and none of the business related code was put in/ changed in the back-end, no new Unit-Tests were required for Testing the fixes. Following are the individual Test Plans for verifying the changes done in this project.
Issue 1: Inappropriate redirection when Managing Questionnaire types
Follow the below steps to Verify the fix for this issue:
Test Case 1
1.1 Open the Expertiza application.
1.2 Login as an instructor(username:instructor6, password:password)
1.3 In the Menu Items Goto: 'Manage...>Questionnaires>Team Review Rubrics' (Goto here means pointing your mouse to that particular option and the following the sub-options, the click only takes place at the last option, here at "Team Review Rubrics")
Expectation: The 'Manage Content' page should be loaded with 'Questionnaires' tab active and 'Teammate Review' rubric expanded.
Test Case 2 (Regression)
2.1 In continuation with the Test Case 1, when you are on 'Manage Content' section's 'Questionnaire' tab, click on the 'Assignments' tab.
2.2 Move away from 'Manage Content' section by clicking on any of the menu Items, lets click on 'Profile' Menu Item here.
2.2 After 'Profile' section is loaded, Go back to the 'Manage Content' section by clicking on the 'Manage...' menu item.
Expectation: The 'Manage Content' page should be loaded with 'Assignments' tab active since this was the last active tab before leaving this section.
Issue 2: Instructors can make changes to each others’ rubrics
Follow the below steps to Verify the fix for this issue:
1.1 Open the Expertiza application.
1.2 Login as an instructor(username:instructor6, password:password)
1.3 In the Menu Items Goto: 'Manage...>Questionnaires>Team Review Rubrics' (Goto here means pointing your mouse to that particular option and the following the sub-options, the click only takes place at the last option, here at "Team Review Rubrics")
1.4 Scan through the list in the rubric.
Expectation: Each individual item should have Action icons (representing 'Edit','Delete','Copy','View'). But the 'Edit' action item should not be visible for all the items, only the items belonging to 'instructor6' should have the 'Edit' Option under them.
Team Members
Ankit Manendra (amanend@ncsu.edu)
Bharat Sinha (bsinha2@ncsu.edu)
Gurman Singh (gsingh23@ncsu.edu )
Mentor: Carmen Bentley (cnaiken@ncsu.edu)