CSC/ECE 517 Fall 2014/OSS E1450 cxm

E1450: UI change for assignment view

What it does: Change UI of Expertiza to support varying rubric feature (allow instructors to specify different review rubrics for different review rounds)

Background Information

What is Expertiza?

Expertiza is a web application where students can submit and peer-review learning objects (articles, code, web sites, etc). The Expertiza project is supported by the National Science Foundation<ref>https://github.com/expertiza/expertiza</ref>. The Expertiza project is software to create reusable learning objects through peer review. It also supports team projects, and the submission of almost any document type, including URLs and wiki pages<ref>http://wikis.lib.ncsu.edu/index.php/Expertiza</ref>.

JavaScript

JavaScript is a dynamic programming language of the Web browsers. Despite some naming, syntactic, and standard library similarities, JavaScript and Java are otherwise unrelated and have very different semantics. The syntax of JavaScript is actually derived from C, while the semantics and design are influenced by Self and Scheme programming languages<ref>http://en.wikipedia.org/wiki/JavaScript</ref>. This mix of features makes it a multi-paradigm language, supporting object-oriented, imperative, and functional programming styles.

Project Description

Classes involved:controllers/assignment_controller.rb (488 lines)
views/assignment/edit.html.erb (55 lines) in production branch (not in master branch)

What needs to be done:

This project requires JavaScript knowledge.

• A checkbox “Review rubrics vary by round” should be added to the “General” tab in the view of creating/editing assignment. No corresponding field in “assignments” table is necessary. We can tell if this checkbox should be checked by checking “assignments_questionnaires” table by current assignment_id. If there is no record with a non-null value in “used_in_round” field, this assignment is not using this feature and the checkbox should not be checked. (if one assignment has 2 rounds but they are using the same set of rubrics, for each type of rubric there should be only one entry with “used_in_round” field null)R

• 4 checkboxes “Review rubrics vary by round” should be added on the “rubrics” tab. each one denotes for each type of rubric (review, metareview, author feedback and teammate review) for which the instructor wants to use different rubrics. Again, no corresponding DB field is necessary. If the checkbox on the “General” tab is selected, on the “rubrics” tab, the “Review rubrics vary by round” checkbox for “review” will be selected automatically

• There should be a editable “deadline name” for each due date on “due date” panel if this type of review is specified to be “varying by rounds” in the “rubrics” tab (the input should be recorded in deadline_name field in due_dates table)

• Another “description URL” text box should be editable when this type of review is specified to be “varying by rounds” in the “rubrics” tab (the input should be recorded in description_url field in due_dates table)

• A drop-down box which help instructor to select review rubric should be added for a review round when this type of review is specified to be “varying by rounds” in the “rubrics” tab (the input should be recorded in assignments_questionnaires table)

• There are no tests for the code. Create appropriate functional and integration tests.

Environment Setup

Since we are developing on the Production branch, in stead of the Rails4 branch, the environment for us would be different from the majority of the class. Here is the list:

Ruby: 1.8.7

Rails: 2.3.15

Java: 1.6

Openjdk: 6.0

Database: expertiza_scrubbed_2014_03_14.sql

Code Modifications

Case 1: Add Checkbox on "Rubric" Tab

Current Scenario

No checkbox for "Varying Rubric by Round" on the general tab for Instructors.

After Changes

In the views / assignment / edit / _rubric.html.erb, we added a checkbox, which can read the value of used_in_round_flag. In Rubrics Tab, add a Review rubric varies by round checkbox, when checked, it displays corresponding number of rounds of Review round 1 to Review round n; when unchecked, it displays as usual. At the same time, it will store new data in the table into database, in assignment_questionnaires table, it will add 1,2,3...n to used_in_round column if the review rubric varies by round; if not, it will store NULL. Everytime webpage refreshes, the checkbox is checked or not according to the value of used_in_round column in the assignment_questionnaires table.

In the assignment_controller.rb, we added a method to load the value from database to used_in_round_flag:

def edit
   @assignment = Assignment.find(params[:id])
   @assignment_questionnaires = AssignmentQuestionnaire.find_all_by_assignment_id(params[:id])
   @used_in_round_flag= nil
   @assignment_questionnaires.each do  |aq|
     if(!(aq.used_in_round.nil?))
       @used_in_round_flag= 1
     end
   end
end

function handleCheckReviewVary(checkvalue) {
       var state = checkvalue.checked;
       var round_count = <%= @assignment.rounds_of_reviews%>;
       if (state == true && round_count >1){
           //Make it display by rounds
           var element_id;
           element_id = 'questionnaire_table_' + 'ReviewQuestionnaire';
           jQuery('#' + element_id).remove();
           element_id = 'questionnaire_table_' + 'MetareviewQuestionnaire';
           jQuery('#' + element_id).remove();
           element_id = 'questionnaire_table_' + 'AuthorFeedbackQuestionnaire';
           jQuery('#' + element_id).remove();
           element_id = 'questionnaire_table_' + 'TeammateReviewQuestionnaire';
           jQuery('#' + element_id).remove();
               for (i = 1; i <= round_count; i++) {
                   addQuestionnaireTableRow('ReviewQuestionnaire', i, <%= questionnaire(@assignment, 
  'ReviewQuestionnaire',nil).to_json %>, <%= assignment_questionnaire(@assignment, 'ReviewQuestionnaire',nil).
to_json %>, <%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>);
               }
           addQuestionnaireTableRow('MetareviewQuestionnaire', null, <%= questionnaire(@assignment, 
'MetareviewQuestionnaire',nil).to_json %>, <%= assignment_questionnaire(@assignment, 
'MetareviewQuestionnaire',nil).to_json %>, <%= questionnaire_options(@assignment, 
'MetareviewQuestionnaire').to_json %>);
           addQuestionnaireTableRow('AuthorFeedbackQuestionnaire', null,<%= questionnaire(@assignment, 
'AuthorFeedbackQuestionnaire',nil).to_json %>, <%= assignment_questionnaire(@assignment, 
'AuthorFeedbackQuestionnaire',nil).to_json %>, <%= questionnaire_options(@assignment,
 'AuthorFeedbackQuestionnaire').to_json %>);
           addQuestionnaireTableRow('TeammateReviewQuestionnaire',null, <%= questionnaire(@assignment, 
'TeammateReviewQuestionnaire',nil).to_json %>, <%= assignment_questionnaire(@assignment, 
'TeammateReviewQuestionnaire',nil).to_json %>, <%= questionnaire_options(@assignment, 
'TeammateReviewQuestionnaire').to_json %>);
           <%@avoidrepeatsign=1%>;
       }
       if (state == false && round_count>1){
           //Make it display as usual
           var element_id;
           for (i=1;i<=round_count+1;i++) {
               element_id = 'questionnaire_table_' + 'ReviewQuestionnaire';
               jQuery('#' + element_id).remove();
           }
           element_id = 'questionnaire_table_' + 'MetareviewQuestionnaire';
           jQuery('#' + element_id).remove();
           element_id = 'questionnaire_table_' + 'AuthorFeedbackQuestionnaire';
           jQuery('#' + element_id).remove();
           element_id = 'questionnaire_table_' + 'TeammateReviewQuestionnaire';
           jQuery('#' + element_id).remove();
           //And display original ones
           addQuestionnaireTableRow('ReviewQuestionnaire',null, <%= questionnaire(@assignment,
 'ReviewQuestionnaire',1).to_json %>, <%= assignment_questionnaire(@assignment, 
'ReviewQuestionnaire', 1).to_json %>, <%= questionnaire_options(@assignment, 'ReviewQuestionnaire')
.to_json %>);
           addQuestionnaireTableRow('MetareviewQuestionnaire', null, <%= questionnaire(@assignment, 
'MetareviewQuestionnaire',nil).to_json %>, <%= assignment_questionnaire(@assignment, 
'MetareviewQuestionnaire',nil).to_json %>, <%= questionnaire_options(@assignment, 
'MetareviewQuestionnaire').to_json %>);
           addQuestionnaireTableRow('AuthorFeedbackQuestionnaire', null,<%= questionnaire(@assignment, 
'AuthorFeedbackQuestionnaire',nil).to_json %>, <%= assignment_questionnaire(@assignment, 
'AuthorFeedbackQuestionnaire',nil).to_json %>, <%= questionnaire_options(@assignment, 
'AuthorFeedbackQuestionnaire').to_json %>);
           addQuestionnaireTableRow('TeammateReviewQuestionnaire',null, <%= questionnaire(@assignment, 
'TeammateReviewQuestionnaire',nil).to_json %>, <%= assignment_questionnaire(@assignment, 
'TeammateReviewQuestionnaire',nil).to_json %>, <%= questionnaire_options(@assignment, 
'TeammateReviewQuestionnaire').to_json %>);
       }
   }
<input name="assignment_questionnaire[used_in_round]" type="hidden" value="false" />
<%= check_box_tag('assignment_questionnaire[used_in_round]', 'true', 
 @reviewvarycheck,:onclick=>"handleCheckReviewVary(this)" ) %>
<%= label_tag('assignment_questionnaire[used_in_round]', 'Review rubric varies by round?') %>

Case 2: Add "Deadline_name" and "Description_url" on "Due_date" Tab

Current Scenario

No test_box for "deadline_name" and "description_url" on due_date tab.

After Changes

• Add Due Date Name and Description_url to the table, users can fill in blanks and store them in DB
• Rewrite set button function calling, everytime the button is pressed, it calls submit_form() and update in assignment_controller, then change the @assignment.rounds_of_review value in order to make changes in the DB instantly, which will help Rubrics tab display correctly
• Add a Change name and description url checkbox. If checked, the Due Date Name and Descripton_url will whow up; if unchecked, the two columns will hide.
• Everytime when webpage refreshes, the checkbox value will be set according to whether there’s value that is not empty in the deadline_name or description_url columns in due_dates table in DB.

Case 4: Add Dropdown-box to Select Review Rubric

Current Scenario

On the Rubric tab, the dropdown box of review rubric is always enabled, but on the due_date tab, there is no dropdown box to select the review rubric of corresponding round:

html += '<label for="questionnaire_id">' + questionnaire.display_type + ':</label>' + '' +

               '<select id="questionnaire_id" name="assignment_questionnaire[questionnaire_id]" style="width:300px">' +
               '<option value="">--None--</option>';
       for (i = 0; i < questionnaire_options.length; i++) {
           html += '<option value="' + questionnaire_options[i][1] + '">' + questionnaire_options[i][0] + '</option>'
       }

html += '</select>';

After Changes

The dropdown box of review on the rubric tab is disabled if the "Vary by round" checkbox we added in case 1 is checked, instead, a dropdown box is added to corresponding review round on the due_date tab.

In the views / assignment / edit / _rubrics.html.erb:

html += '<label for="questionnaire_id">' + questionnaire.display_type + ':</label>' +
'';

        if(!<%=@used_in_round_flag.nil? %>) {
           if(questionnaire_type=="ReviewQuestionnaire") {
              html += '<select id="questionnaire_id" name="assignment_questionnaire[questionnaire_id]"
         style="width:300px" disabled>';
           }
           else {html+='<select id="questionnaire_id" name="assignment_questionnaire[questionnaire_id]" 
style="width:300px">';}
        }else {html+='<select id="questionnaire_id" name="assignment_questionnaire[questionnaire_id]"
 style="width:300px">';}
       '<option value="">--None--</option>';
        for (i = 0; i < questionnaire_options.length; i++) {
           html += '<option value="' + questionnaire_options[i][1] + '" >' + questionnaire_options[i][0] + 
'</option>'
        }

In the views / assignment / edit / _due_date.html.erb:

In the assignment_controller.rb:

Cucumber Tests

A few cucumber tests are added to perform the functional and integrated test for our project, such as:

Scenario 1: A instructor created a new assignment which has 2 rounds of review, and the review rubric is varying by round

Scenario 2: A student submitted the assignment

Scenario 3: The instructor set the date to start the 1st round of review

Scenario 4: The student goes into the other's work, and can see the review rubric of round 1

Scenario 5: The instructor then change the date to start the 2nd round of review

Scenario 6: The student logs in again, and can see the review rubric of round 2, which should be different from round 1

References

<references/>