CSC/ECE 517 Fall 2016 E1685: UI changes for review and score reports

Introduction

Expertiza<ref>https://expertiza.ncsu.edu/</ref> is an open-source web application to create re-usable learning objects through peer-reviews to facilitate incremental learning. Students can submit learning objects such as articles, wiki pages, repository links and with the help of peer reviews, improve them. The project has been developed using the Ruby on Rails<ref>https://en.wikipedia.org/wiki/Ruby_on_Rails</ref> framework and is supported by the National Science Foundation.

Project Description

Purpose and Scope

Expertiza assignments are based on a peer review system where the instructor creates rubrics for an assignment through questionnaires which students use to review other students' submissions. The author of the submission is given an opportunity to provide feedback about these reviews. Expertiza displays reviews (i) to the team who was reviewed, and (ii) to the reviewer. A student user can see all the reviews of his/her team’s project. The instructor can see all the reviews of everyone’s project. The instructor also has access to a Review report, which shows, for each reviewer, all the reviews that (s)he wrote. Both score report and review report use different code so UI is non-orthogonal, it would be great if we can follow same UI structure for both score and review report which also reduce the DRY problems. There is no functionality for user to search between reviews of particular project, such a functionality will help user to search through all reviews for specific problem they are trying to focus on.

Task Description

The project requires completion of the following tasks:

Task-1

• A single way of displaying reviews that would be visible to students (reviews that they did, and reviews that their team received), and instructors (reviews that each team received, sorted by team; and reviews that each student did, sorted by student)

For student view the UI is consistent in displaying reviews they have done and reviews they have received but for instructor's view the review report follows different UI and have different code. To make the UI consistent we have decided to choose the UI design of student view as the base and modify the UI design for review report in instructor's view. This will allow us to use the same code in both views, thereby following DRY principle.

Task-2

• Add button/link to hide and expand all the reviews.

Below is the mock-up image of how functionality will look after implementations

Task-3

• Create a tabbed view for each review view type : Heat map, Overall statistics, Individual reviews

This task will require the use of TabsOnRails to create the tabs needed. The review report will need to be modified to have the addition of the Statistics, Heatmap, and GridView tabs at the top of the page. It will default to the Statistics tab which should look something like:

The heatmap tab should produce a view like:

And the grid view tab should produce a view like:

Note: for this view we can move the [Max points: 5] to the statistics page since this will be the same for every question. We can also add "view score", view question" and "view comments" in place of the show review link to see what we want to see per question. This will be modified in the response model.

To handle being able to switch between reviews you could add sub tabs underneath the main 3 tabs for each of the reviewers (The student would see a tab with the reviewers number while the instructor will see tabs with the reviewers name).

Test

To test this feature go to the view_my_scores page for the student where you should see the 3 tabs. Make sure that each tab gives you a similar view as described above.

To test the tabs for each reviewer's review: Make sure that you only see that reviewer's review when their tab is selected. Make sure that when you select another reviewer's tab that the review you are seeing changes. Make sure reviewers tabs only appears when the Individual reviewers tab is selected.

Task-4

• Make review feedback more readable by changing UI or background color.

This task is fairly easy we are supposed to make feedback response more readable or more focused for user to read. As instructor suggested this can be done by graying out the question or we can change the background of the response text.

Task-5

• Add search box to search between reviews for particular string for a specific project(Student's view) or for specific user(Instructor's view).

This functionality will help user to readily access the required content within the reviews.
Below is the mock-up image of how functionality will look after implementations

UI Testing

• To Test UI for student View
  • Log-in as Student.
  • Go to Assignment
  • Click Your scores
  • Click show reviews

• To Test UI for instructor View
  • Log-in as Instructor.
  • Go to Manage Assignments
  • Click on review report of a particular assignment
  • Click on any item in team reviewed tab, to see reviews.

References

<references/>