Expertiza_Wiki - User contributions [en]

CSC/ECE 517 Fall 2014/OSS E1450 cxm

2014-11-12T23:04:19Z

Xshao2: /* Exampls */

==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 [http://en.wikipedia.org/wiki/Semantics_(computer_science) semantics]. The syntax of JavaScript is actually derived from [http://en.wikipedia.org/wiki/C_(programming_language) C], while the semantics and design are influenced by [http://en.wikipedia.org/wiki/Self_(programming_language) Self] and [http://en.wikipedia.org/wiki/Scheme_(programming_language) Scheme] programming languages<ref>http://en.wikipedia.org/wiki/JavaScript</ref>. This mix of features makes it a multi-paradigm language, supporting [http://en.wikipedia.org/wiki/Object-oriented_programming object-oriented], [http://en.wikipedia.org/wiki/Imperative_programming imperative], and [http://en.wikipedia.org/wiki/Functional_programming 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 “Rubric” 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

* 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)

* The "deadline_name" and "description URL" could be hidden when you change the status of the checkbox in Due_Date tab

* 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.

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

def edit
...
@reviewvarycheck = nil
@assignment_questionnaires.each do |aq|
if(!(aq.used_in_round.nil?))
@reviewvarycheck = 1
@q_id = aq.questionnaire_id
@qn = Questionnaire.find(@q_id)
if(@qn.display_type.eql?"Review")
@review_check = 1
elsif(@qn.display_type.eql?"Metareview")
@metareview_check=1
elsif(@qn.display_type.eql?"Author Feedback")
@author_check = 1
elsif(@qn.display_type.eql?"Teammate Review")
@teammate_check = 1
end
end
end
...
end

In the _rubrics.html.erb, we added a javascript function to handle the click action:

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.

==== Codes ====
In the assignment_controller.rb, we added a method to check if the name and url are NULL in database to make a decision in the initial display (or after webpage refreshes). If there are contents in the DB, which means someone has typed in some texts, it will display the two columns; on the contrary, it won't display to make the table simpler.:

def edit
...
@due_date_nameurl_notempty = "null"
@due_date_nameurl_notempty_checkbox = false
...
# Add by Xiaoqiang Shao, check if name and url in database is empty before webpage displays
@due_date_all.each do |dd|
if(!(dd.deadline_name.nil?))
if(dd.deadline_name.length>=1)
@due_date_nameurl_notempty = 1
@due_date_nameurl_notempty_checkbox = true
end
end
if(!(dd.description_url.nil?))
if(dd.description_url.length>=1)
@due_date_nameurl_notempty = 1
@due_date_nameurl_notempty_checkbox = true
end
end
end
...
end

And at any time, users can hide/show the two columns by checking the checkbox. Here are the main changes in _due_dates.html.erb:

function handleChangenameurl(checkvalue,due_date_name_column,due_date_url_column) {
var state = checkvalue;
var round_count = <%= @assignment.rounds_of_reviews%>;
if (!document.getElementById) {
return;
}
if (state == false && round_count >1){
//hide name and url colomns
for (i =1; i <= round_count; i++) {
removeDueDateTableElement('submission', i);
removeDueDateTableElement('review', i);
}
removeDueDateTableElement('metareview', 0);
for (i =1; i <= round_count; i++) {
addDueDateTableElement(null,'submission',i, <%= due_date(@assignment, 'submission', 0).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>); // or use questionnaire_options(@assignment, nil).to_json
addDueDateTableElement(null,'review', i, <%= due_date(@assignment, 'review', 0).to_json %>, <%= questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= assignment_questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>);
}
addDueDateTableElement(null,'metareview',0,<%= due_date(@assignment,'metareview', 0).to_json%>);
due_date_name_column.style.display="none";
due_date_url_column.style.display="none";
}
if (state == true && round_count >1){
//display name and url colomns
for (i =1; i <= round_count; i++) {
removeDueDateTableElement('submission', i);
removeDueDateTableElement('review', i);
}
removeDueDateTableElement('metareview', 0);
for (i =1; i <= round_count; i++) {
addDueDateTableElement(1,'submission', i, <%= due_date(@assignment, 'submission', 0).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>); // or use questionnaire_options(@assignment, nil).to_json
addDueDateTableElement(1,'review',i, <%= due_date(@assignment, 'review', 0).to_json %>, <%= questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= assignment_questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>);
}
addDueDateTableElement(1,'metareview',0,<%= due_date(@assignment,'metareview', 0).to_json%>);
due_date_name_column.removeAttribute("style");
due_date_url_column.removeAttribute("style");
}
else{
return;
}
}

<input name="changenameurl" type="hidden" value="false" />
<%= check_box_tag('changenameurl', 'true', @due_date_nameurl_notempty_checkbox,:onclick=>"handleChangenameurl(this.checked,due_date_name_column,due_date_url_column)" ) %>
<%= label_tag('changenameurl', 'Change name and description url?') %>

In the end corresponding changes should be made in the end of _due_dates.html.erb, after which the webpage will display corresponding contents (hide or display name and url columns according to whether they are empty):

<pre>
<table class='exp' id='due_dates_table' style='padding:10px;min-width: 990px;overflow: hidden;'>
<tr id='due_date_heading'>
...
</tr>
...
<script>
jQuery(document).ready(function () {
<% for i in 1..@assignment.rounds_of_reviews %>
addDueDateTableElement(<%= @due_date_nameurl_notempty %>,'submission', <%=i%>, <%= due_date(@assignment, 'submission', i-1).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>); // or use questionnaire_options(@assignment, nil).to_json
addDueDateTableElement(<%= @due_date_nameurl_notempty %>,'review', <%=i%>, <%= due_date(@assignment, 'review', i-1).to_json %>, <%= questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= assignment_questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>);
<% end %>
addDueDateTableElement(<%= @due_date_nameurl_notempty %>,'metareview', 0, <%= due_date(@assignment, 'metareview').to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>);
//after webpage refreshes, hide or display name and url according to whether names and urls are empty in DB
var due_date_name_column=document.getElementById("due_date_name_column");
var due_date_url_column=document.getElementById("due_date_url_column");
<% if @due_date_nameurl_notempty =="null" %>
due_date_name_column.style.visibility="hidden";
due_date_url_column.style.visibility="hidden";
<% end %>
}());
</script>
</table>
</pre>

=== Case 3: Make slight changes to existing methods/codes ===
==== Current Scenario ====

Existing methods have no enough parameters we want, or they are not returning out results we want.
==== After Changes ====

* Make small changes to them to fit the new methods we write without interfering the previous methods.

==== Exampls ====
The slight changes of functions are small, trivial and less important to readers to understand what we have done. So only examples are shown to convey the ideas, and all the detailed modification can be found at our [https://github.com/shaoxq1205/expertiza Github] (on branch production). <ref>https://github.com/shaoxq1205/expertiza</ref>

Here's the example:
We need to add a round_number for the questionnaire() method in order to make it return different values (actually from different rows of the assignment_questionnaire table) because there're more than 1 rounds now and each round may have different values.
previous method of questionnaire():
<pre>
def questionnaire(assignment, type)
questionnaire = assignment.questionnaires.find_by_type(type)
if questionnaire.nil?
questionnaire = Object.const_get(type).new
questionnaire
else
questionnaire
end
end
</pre>

current method of questionnaire():
<pre>
def questionnaire(assignment, type, round_number)
if round_number.nil?
questionnaire=assignment.questionnaires.find_by_type(type)
else
ass_ques=assignment.assignment_questionnaires.find_by_used_in_round(round_number)
# make sure the assignment_questionnaire record is not empty
if !ass_ques.nil?
temp_num=ass_ques.questionnaire_id
questionnaire = assignment.questionnaires.find_by_id(temp_num)
end
end
if questionnaire.nil?
questionnaire = Object.const_get(type).new
questionnaire
else
questionnaire
end
end
</pre>

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

Scenario 1: An instructor can set the "Review Rubric Varies by Round" for an assignment, and set due dates for all of submissions and reviews, as well as different rubrics would be used

Scenario 2: A student should see the review rubric for 1st round in the other's work link

Scenario 3: The instructor change the due date to start the 2nd round of review

Scenario 4: A student should see the review rubric for 2nd round in the other's work link

=== Codes ===
In app/features/instructor/Vary_Rubrics_by_Round_Test.feature:
<pre>
Scenario1: Instructor can set the review rubric varies by round
Given an instructor named "user6"
And I am logged in as "user6"
@instructor
@manage_assignments
When I move to the "Assignments" page
And I click the "edit" link for "Week 4 wiki"
And I check "Review rubric varies by round?"
And I fill in "2014,11,10" for "Round1 Submission"
And I fill in "2014,11,30" for "Round1 Review"
And I fill in "2014,12,20" for "Round2 Submission"
And I fill in "2014,12,22" for "Round2:Review"
And I use Review Round1 named "update_wiki"
And I use Review Round2"named "rubric1"
Then I press "Save"
@wip
Scenario2: Student should see the review rubric for 1st round
Given I am logged in as a user13
And I move to the "Assignments" page
And I click the "Week 4 wiki" link
When I click the "Others' work" link
Then I should see "update_wiki"
Scenario3: Instructor then change the due date of Round 2, so that the student would see a different review rubric
Given an instructor named "user6"
And I am logged in as "user6"
@instructor
@manage_assignments
When I move to the "Assignments" page
And I click the "edit" link for "Week 4 wiki"
And I fill in "2014,10,10" for "Round1 Submission"
And I fill in "2014,10,22" for "Round1 Review"
And I fill in "2014,11,10" for "Round2 Submission"
And I fill in "2014,12,23" for "Round2:Review"
Then I press "Save"
@wip
Scenario4: Student should see the review rubric for 2st round, which is different from the 1st one
Given I am logged in as a user13
And I move to the "Assignments" page
And I click the "Week 4 wiki" link
When I click the "Others' work" link
Then I should see "rubric1"
</pre>

In app/features/step_definitions/review_rubric_varies_by_round.rb:
<pre>
And /^I click the "edit" link for "Week 4 wiki"$/ do
visit('/assignment/edit/18')
end
And /^I fill in "([^"]*)" for "([^"]*)" $/ do |due_date, deadline|
step "I fill in \"#{due_date}\" for \"due_date\""
step "I fill in \"#{deadline}\" for \"deadline\""
end
And /^I use Review Round1 named "update_wiki" $/ do
step "I select \"update_wiki\" from \"questionnaires[review1]\""
end
And /^I use Review Round1 named "rubric1" $/ do
step "I select \"rubric1\" from \"questionnaires[review2]\""
end
</pre>

== Final Layout ==
Here are the screen shots of the final layouts.
=== Rubrics Tab ===
[[File:Unchecked.png]]
[[File:Checked.png]]

As you can see, a Review rubric varies by round checkbox will make a difference, which makes sense.
=== Due Dates Tab ===
[[File:Due_unchecked.jpg]]
[[File:Due_checked.png]]

As you can see, a Change name and description url checkbox will make a difference, which makes sense.

== References ==
<references/>

CSC/ECE 517 Fall 2014/OSS E1450 cxm

2014-11-12T23:03:15Z

Xshao2: /* Exampls */

==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 [http://en.wikipedia.org/wiki/Semantics_(computer_science) semantics]. The syntax of JavaScript is actually derived from [http://en.wikipedia.org/wiki/C_(programming_language) C], while the semantics and design are influenced by [http://en.wikipedia.org/wiki/Self_(programming_language) Self] and [http://en.wikipedia.org/wiki/Scheme_(programming_language) Scheme] programming languages<ref>http://en.wikipedia.org/wiki/JavaScript</ref>. This mix of features makes it a multi-paradigm language, supporting [http://en.wikipedia.org/wiki/Object-oriented_programming object-oriented], [http://en.wikipedia.org/wiki/Imperative_programming imperative], and [http://en.wikipedia.org/wiki/Functional_programming 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 “Rubric” 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

* 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)

* The "deadline_name" and "description URL" could be hidden when you change the status of the checkbox in Due_Date tab

* 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.

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

def edit
...
@reviewvarycheck = nil
@assignment_questionnaires.each do |aq|
if(!(aq.used_in_round.nil?))
@reviewvarycheck = 1
@q_id = aq.questionnaire_id
@qn = Questionnaire.find(@q_id)
if(@qn.display_type.eql?"Review")
@review_check = 1
elsif(@qn.display_type.eql?"Metareview")
@metareview_check=1
elsif(@qn.display_type.eql?"Author Feedback")
@author_check = 1
elsif(@qn.display_type.eql?"Teammate Review")
@teammate_check = 1
end
end
end
...
end

In the _rubrics.html.erb, we added a javascript function to handle the click action:

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.

==== Codes ====
In the assignment_controller.rb, we added a method to check if the name and url are NULL in database to make a decision in the initial display (or after webpage refreshes). If there are contents in the DB, which means someone has typed in some texts, it will display the two columns; on the contrary, it won't display to make the table simpler.:

def edit
...
@due_date_nameurl_notempty = "null"
@due_date_nameurl_notempty_checkbox = false
...
# Add by Xiaoqiang Shao, check if name and url in database is empty before webpage displays
@due_date_all.each do |dd|
if(!(dd.deadline_name.nil?))
if(dd.deadline_name.length>=1)
@due_date_nameurl_notempty = 1
@due_date_nameurl_notempty_checkbox = true
end
end
if(!(dd.description_url.nil?))
if(dd.description_url.length>=1)
@due_date_nameurl_notempty = 1
@due_date_nameurl_notempty_checkbox = true
end
end
end
...
end

And at any time, users can hide/show the two columns by checking the checkbox. Here are the main changes in _due_dates.html.erb:

function handleChangenameurl(checkvalue,due_date_name_column,due_date_url_column) {
var state = checkvalue;
var round_count = <%= @assignment.rounds_of_reviews%>;
if (!document.getElementById) {
return;
}
if (state == false && round_count >1){
//hide name and url colomns
for (i =1; i <= round_count; i++) {
removeDueDateTableElement('submission', i);
removeDueDateTableElement('review', i);
}
removeDueDateTableElement('metareview', 0);
for (i =1; i <= round_count; i++) {
addDueDateTableElement(null,'submission',i, <%= due_date(@assignment, 'submission', 0).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>); // or use questionnaire_options(@assignment, nil).to_json
addDueDateTableElement(null,'review', i, <%= due_date(@assignment, 'review', 0).to_json %>, <%= questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= assignment_questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>);
}
addDueDateTableElement(null,'metareview',0,<%= due_date(@assignment,'metareview', 0).to_json%>);
due_date_name_column.style.display="none";
due_date_url_column.style.display="none";
}
if (state == true && round_count >1){
//display name and url colomns
for (i =1; i <= round_count; i++) {
removeDueDateTableElement('submission', i);
removeDueDateTableElement('review', i);
}
removeDueDateTableElement('metareview', 0);
for (i =1; i <= round_count; i++) {
addDueDateTableElement(1,'submission', i, <%= due_date(@assignment, 'submission', 0).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>); // or use questionnaire_options(@assignment, nil).to_json
addDueDateTableElement(1,'review',i, <%= due_date(@assignment, 'review', 0).to_json %>, <%= questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= assignment_questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>);
}
addDueDateTableElement(1,'metareview',0,<%= due_date(@assignment,'metareview', 0).to_json%>);
due_date_name_column.removeAttribute("style");
due_date_url_column.removeAttribute("style");
}
else{
return;
}
}

<input name="changenameurl" type="hidden" value="false" />
<%= check_box_tag('changenameurl', 'true', @due_date_nameurl_notempty_checkbox,:onclick=>"handleChangenameurl(this.checked,due_date_name_column,due_date_url_column)" ) %>
<%= label_tag('changenameurl', 'Change name and description url?') %>

In the end corresponding changes should be made in the end of _due_dates.html.erb, after which the webpage will display corresponding contents (hide or display name and url columns according to whether they are empty):

<pre>
<table class='exp' id='due_dates_table' style='padding:10px;min-width: 990px;overflow: hidden;'>
<tr id='due_date_heading'>
...
</tr>
...
<script>
jQuery(document).ready(function () {
<% for i in 1..@assignment.rounds_of_reviews %>
addDueDateTableElement(<%= @due_date_nameurl_notempty %>,'submission', <%=i%>, <%= due_date(@assignment, 'submission', i-1).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>); // or use questionnaire_options(@assignment, nil).to_json
addDueDateTableElement(<%= @due_date_nameurl_notempty %>,'review', <%=i%>, <%= due_date(@assignment, 'review', i-1).to_json %>, <%= questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= assignment_questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>);
<% end %>
addDueDateTableElement(<%= @due_date_nameurl_notempty %>,'metareview', 0, <%= due_date(@assignment, 'metareview').to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>);
//after webpage refreshes, hide or display name and url according to whether names and urls are empty in DB
var due_date_name_column=document.getElementById("due_date_name_column");
var due_date_url_column=document.getElementById("due_date_url_column");
<% if @due_date_nameurl_notempty =="null" %>
due_date_name_column.style.visibility="hidden";
due_date_url_column.style.visibility="hidden";
<% end %>
}());
</script>
</table>
</pre>

=== Case 3: Make slight changes to existing methods/codes ===
==== Current Scenario ====

Existing methods have no enough parameters we want, or they are not returning out results we want.
==== After Changes ====

* Make small changes to them to fit the new methods we write without interfering the previous methods.

==== Exampls ====
The slight changes of functions are small, trivial and less important to readers to understand what we have done. So only examples are shown to convey the ideas, and all the detailed modification can be found at our[[Github https://github.com/shaoxq1205/expertiza]] (on branch production). <ref>https://github.com/shaoxq1205/expertiza</ref>

Here's the example:
We need to add a round_number for the questionnaire() method in order to make it return different values (actually from different rows of the assignment_questionnaire table) because there're more than 1 rounds now and each round may have different values.
previous method of questionnaire():
<pre>
def questionnaire(assignment, type)
questionnaire = assignment.questionnaires.find_by_type(type)
if questionnaire.nil?
questionnaire = Object.const_get(type).new
questionnaire
else
questionnaire
end
end
</pre>

current method of questionnaire():
<pre>
def questionnaire(assignment, type, round_number)
if round_number.nil?
questionnaire=assignment.questionnaires.find_by_type(type)
else
ass_ques=assignment.assignment_questionnaires.find_by_used_in_round(round_number)
# make sure the assignment_questionnaire record is not empty
if !ass_ques.nil?
temp_num=ass_ques.questionnaire_id
questionnaire = assignment.questionnaires.find_by_id(temp_num)
end
end
if questionnaire.nil?
questionnaire = Object.const_get(type).new
questionnaire
else
questionnaire
end
end
</pre>

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

Scenario 1: An instructor can set the "Review Rubric Varies by Round" for an assignment, and set due dates for all of submissions and reviews, as well as different rubrics would be used

Scenario 2: A student should see the review rubric for 1st round in the other's work link

Scenario 3: The instructor change the due date to start the 2nd round of review

Scenario 4: A student should see the review rubric for 2nd round in the other's work link

=== Codes ===
In app/features/instructor/Vary_Rubrics_by_Round_Test.feature:
<pre>
Scenario1: Instructor can set the review rubric varies by round
Given an instructor named "user6"
And I am logged in as "user6"
@instructor
@manage_assignments
When I move to the "Assignments" page
And I click the "edit" link for "Week 4 wiki"
And I check "Review rubric varies by round?"
And I fill in "2014,11,10" for "Round1 Submission"
And I fill in "2014,11,30" for "Round1 Review"
And I fill in "2014,12,20" for "Round2 Submission"
And I fill in "2014,12,22" for "Round2:Review"
And I use Review Round1 named "update_wiki"
And I use Review Round2"named "rubric1"
Then I press "Save"
@wip
Scenario2: Student should see the review rubric for 1st round
Given I am logged in as a user13
And I move to the "Assignments" page
And I click the "Week 4 wiki" link
When I click the "Others' work" link
Then I should see "update_wiki"
Scenario3: Instructor then change the due date of Round 2, so that the student would see a different review rubric
Given an instructor named "user6"
And I am logged in as "user6"
@instructor
@manage_assignments
When I move to the "Assignments" page
And I click the "edit" link for "Week 4 wiki"
And I fill in "2014,10,10" for "Round1 Submission"
And I fill in "2014,10,22" for "Round1 Review"
And I fill in "2014,11,10" for "Round2 Submission"
And I fill in "2014,12,23" for "Round2:Review"
Then I press "Save"
@wip
Scenario4: Student should see the review rubric for 2st round, which is different from the 1st one
Given I am logged in as a user13
And I move to the "Assignments" page
And I click the "Week 4 wiki" link
When I click the "Others' work" link
Then I should see "rubric1"
</pre>

In app/features/step_definitions/review_rubric_varies_by_round.rb:
<pre>
And /^I click the "edit" link for "Week 4 wiki"$/ do
visit('/assignment/edit/18')
end
And /^I fill in "([^"]*)" for "([^"]*)" $/ do |due_date, deadline|
step "I fill in \"#{due_date}\" for \"due_date\""
step "I fill in \"#{deadline}\" for \"deadline\""
end
And /^I use Review Round1 named "update_wiki" $/ do
step "I select \"update_wiki\" from \"questionnaires[review1]\""
end
And /^I use Review Round1 named "rubric1" $/ do
step "I select \"rubric1\" from \"questionnaires[review2]\""
end
</pre>

== Final Layout ==
Here are the screen shots of the final layouts.
=== Rubrics Tab ===
[[File:Unchecked.png]]
[[File:Checked.png]]

As you can see, a Review rubric varies by round checkbox will make a difference, which makes sense.
=== Due Dates Tab ===
[[File:Due_unchecked.jpg]]
[[File:Due_checked.png]]

As you can see, a Change name and description url checkbox will make a difference, which makes sense.

== References ==
<references/>

CSC/ECE 517 Fall 2014/OSS E1450 cxm

2014-11-12T23:02:56Z

Xshao2: /* Exampls */

==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 [http://en.wikipedia.org/wiki/Semantics_(computer_science) semantics]. The syntax of JavaScript is actually derived from [http://en.wikipedia.org/wiki/C_(programming_language) C], while the semantics and design are influenced by [http://en.wikipedia.org/wiki/Self_(programming_language) Self] and [http://en.wikipedia.org/wiki/Scheme_(programming_language) Scheme] programming languages<ref>http://en.wikipedia.org/wiki/JavaScript</ref>. This mix of features makes it a multi-paradigm language, supporting [http://en.wikipedia.org/wiki/Object-oriented_programming object-oriented], [http://en.wikipedia.org/wiki/Imperative_programming imperative], and [http://en.wikipedia.org/wiki/Functional_programming 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 “Rubric” 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

* 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)

* The "deadline_name" and "description URL" could be hidden when you change the status of the checkbox in Due_Date tab

* 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.

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

def edit
...
@reviewvarycheck = nil
@assignment_questionnaires.each do |aq|
if(!(aq.used_in_round.nil?))
@reviewvarycheck = 1
@q_id = aq.questionnaire_id
@qn = Questionnaire.find(@q_id)
if(@qn.display_type.eql?"Review")
@review_check = 1
elsif(@qn.display_type.eql?"Metareview")
@metareview_check=1
elsif(@qn.display_type.eql?"Author Feedback")
@author_check = 1
elsif(@qn.display_type.eql?"Teammate Review")
@teammate_check = 1
end
end
end
...
end

In the _rubrics.html.erb, we added a javascript function to handle the click action:

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.

==== Codes ====
In the assignment_controller.rb, we added a method to check if the name and url are NULL in database to make a decision in the initial display (or after webpage refreshes). If there are contents in the DB, which means someone has typed in some texts, it will display the two columns; on the contrary, it won't display to make the table simpler.:

def edit
...
@due_date_nameurl_notempty = "null"
@due_date_nameurl_notempty_checkbox = false
...
# Add by Xiaoqiang Shao, check if name and url in database is empty before webpage displays
@due_date_all.each do |dd|
if(!(dd.deadline_name.nil?))
if(dd.deadline_name.length>=1)
@due_date_nameurl_notempty = 1
@due_date_nameurl_notempty_checkbox = true
end
end
if(!(dd.description_url.nil?))
if(dd.description_url.length>=1)
@due_date_nameurl_notempty = 1
@due_date_nameurl_notempty_checkbox = true
end
end
end
...
end

And at any time, users can hide/show the two columns by checking the checkbox. Here are the main changes in _due_dates.html.erb:

function handleChangenameurl(checkvalue,due_date_name_column,due_date_url_column) {
var state = checkvalue;
var round_count = <%= @assignment.rounds_of_reviews%>;
if (!document.getElementById) {
return;
}
if (state == false && round_count >1){
//hide name and url colomns
for (i =1; i <= round_count; i++) {
removeDueDateTableElement('submission', i);
removeDueDateTableElement('review', i);
}
removeDueDateTableElement('metareview', 0);
for (i =1; i <= round_count; i++) {
addDueDateTableElement(null,'submission',i, <%= due_date(@assignment, 'submission', 0).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>); // or use questionnaire_options(@assignment, nil).to_json
addDueDateTableElement(null,'review', i, <%= due_date(@assignment, 'review', 0).to_json %>, <%= questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= assignment_questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>);
}
addDueDateTableElement(null,'metareview',0,<%= due_date(@assignment,'metareview', 0).to_json%>);
due_date_name_column.style.display="none";
due_date_url_column.style.display="none";
}
if (state == true && round_count >1){
//display name and url colomns
for (i =1; i <= round_count; i++) {
removeDueDateTableElement('submission', i);
removeDueDateTableElement('review', i);
}
removeDueDateTableElement('metareview', 0);
for (i =1; i <= round_count; i++) {
addDueDateTableElement(1,'submission', i, <%= due_date(@assignment, 'submission', 0).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>); // or use questionnaire_options(@assignment, nil).to_json
addDueDateTableElement(1,'review',i, <%= due_date(@assignment, 'review', 0).to_json %>, <%= questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= assignment_questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>);
}
addDueDateTableElement(1,'metareview',0,<%= due_date(@assignment,'metareview', 0).to_json%>);
due_date_name_column.removeAttribute("style");
due_date_url_column.removeAttribute("style");
}
else{
return;
}
}

<input name="changenameurl" type="hidden" value="false" />
<%= check_box_tag('changenameurl', 'true', @due_date_nameurl_notempty_checkbox,:onclick=>"handleChangenameurl(this.checked,due_date_name_column,due_date_url_column)" ) %>
<%= label_tag('changenameurl', 'Change name and description url?') %>

In the end corresponding changes should be made in the end of _due_dates.html.erb, after which the webpage will display corresponding contents (hide or display name and url columns according to whether they are empty):

<pre>
<table class='exp' id='due_dates_table' style='padding:10px;min-width: 990px;overflow: hidden;'>
<tr id='due_date_heading'>
...
</tr>
...
<script>
jQuery(document).ready(function () {
<% for i in 1..@assignment.rounds_of_reviews %>
addDueDateTableElement(<%= @due_date_nameurl_notempty %>,'submission', <%=i%>, <%= due_date(@assignment, 'submission', i-1).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>); // or use questionnaire_options(@assignment, nil).to_json
addDueDateTableElement(<%= @due_date_nameurl_notempty %>,'review', <%=i%>, <%= due_date(@assignment, 'review', i-1).to_json %>, <%= questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= assignment_questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>);
<% end %>
addDueDateTableElement(<%= @due_date_nameurl_notempty %>,'metareview', 0, <%= due_date(@assignment, 'metareview').to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>);
//after webpage refreshes, hide or display name and url according to whether names and urls are empty in DB
var due_date_name_column=document.getElementById("due_date_name_column");
var due_date_url_column=document.getElementById("due_date_url_column");
<% if @due_date_nameurl_notempty =="null" %>
due_date_name_column.style.visibility="hidden";
due_date_url_column.style.visibility="hidden";
<% end %>
}());
</script>
</table>
</pre>

=== Case 3: Make slight changes to existing methods/codes ===
==== Current Scenario ====

Existing methods have no enough parameters we want, or they are not returning out results we want.
==== After Changes ====

* Make small changes to them to fit the new methods we write without interfering the previous methods.

==== Exampls ====
The slight changes of functions are small, trivial and less important to readers to understand what we have done. So only examples are shown to convey the ideas, and all the detailed modification can be found at our[Github https://github.com/shaoxq1205/expertiza] (on branch production). <ref>https://github.com/shaoxq1205/expertiza</ref>

Here's the example:
We need to add a round_number for the questionnaire() method in order to make it return different values (actually from different rows of the assignment_questionnaire table) because there're more than 1 rounds now and each round may have different values.
previous method of questionnaire():
<pre>
def questionnaire(assignment, type)
questionnaire = assignment.questionnaires.find_by_type(type)
if questionnaire.nil?
questionnaire = Object.const_get(type).new
questionnaire
else
questionnaire
end
end
</pre>

current method of questionnaire():
<pre>
def questionnaire(assignment, type, round_number)
if round_number.nil?
questionnaire=assignment.questionnaires.find_by_type(type)
else
ass_ques=assignment.assignment_questionnaires.find_by_used_in_round(round_number)
# make sure the assignment_questionnaire record is not empty
if !ass_ques.nil?
temp_num=ass_ques.questionnaire_id
questionnaire = assignment.questionnaires.find_by_id(temp_num)
end
end
if questionnaire.nil?
questionnaire = Object.const_get(type).new
questionnaire
else
questionnaire
end
end
</pre>

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

Scenario 1: An instructor can set the "Review Rubric Varies by Round" for an assignment, and set due dates for all of submissions and reviews, as well as different rubrics would be used

Scenario 2: A student should see the review rubric for 1st round in the other's work link

Scenario 3: The instructor change the due date to start the 2nd round of review

Scenario 4: A student should see the review rubric for 2nd round in the other's work link

=== Codes ===
In app/features/instructor/Vary_Rubrics_by_Round_Test.feature:
<pre>
Scenario1: Instructor can set the review rubric varies by round
Given an instructor named "user6"
And I am logged in as "user6"
@instructor
@manage_assignments
When I move to the "Assignments" page
And I click the "edit" link for "Week 4 wiki"
And I check "Review rubric varies by round?"
And I fill in "2014,11,10" for "Round1 Submission"
And I fill in "2014,11,30" for "Round1 Review"
And I fill in "2014,12,20" for "Round2 Submission"
And I fill in "2014,12,22" for "Round2:Review"
And I use Review Round1 named "update_wiki"
And I use Review Round2"named "rubric1"
Then I press "Save"
@wip
Scenario2: Student should see the review rubric for 1st round
Given I am logged in as a user13
And I move to the "Assignments" page
And I click the "Week 4 wiki" link
When I click the "Others' work" link
Then I should see "update_wiki"
Scenario3: Instructor then change the due date of Round 2, so that the student would see a different review rubric
Given an instructor named "user6"
And I am logged in as "user6"
@instructor
@manage_assignments
When I move to the "Assignments" page
And I click the "edit" link for "Week 4 wiki"
And I fill in "2014,10,10" for "Round1 Submission"
And I fill in "2014,10,22" for "Round1 Review"
And I fill in "2014,11,10" for "Round2 Submission"
And I fill in "2014,12,23" for "Round2:Review"
Then I press "Save"
@wip
Scenario4: Student should see the review rubric for 2st round, which is different from the 1st one
Given I am logged in as a user13
And I move to the "Assignments" page
And I click the "Week 4 wiki" link
When I click the "Others' work" link
Then I should see "rubric1"
</pre>

In app/features/step_definitions/review_rubric_varies_by_round.rb:
<pre>
And /^I click the "edit" link for "Week 4 wiki"$/ do
visit('/assignment/edit/18')
end
And /^I fill in "([^"]*)" for "([^"]*)" $/ do |due_date, deadline|
step "I fill in \"#{due_date}\" for \"due_date\""
step "I fill in \"#{deadline}\" for \"deadline\""
end
And /^I use Review Round1 named "update_wiki" $/ do
step "I select \"update_wiki\" from \"questionnaires[review1]\""
end
And /^I use Review Round1 named "rubric1" $/ do
step "I select \"rubric1\" from \"questionnaires[review2]\""
end
</pre>

== Final Layout ==
Here are the screen shots of the final layouts.
=== Rubrics Tab ===
[[File:Unchecked.png]]
[[File:Checked.png]]

As you can see, a Review rubric varies by round checkbox will make a difference, which makes sense.
=== Due Dates Tab ===
[[File:Due_unchecked.jpg]]
[[File:Due_checked.png]]

As you can see, a Change name and description url checkbox will make a difference, which makes sense.

== References ==
<references/>

CSC/ECE 517 Fall 2014/OSS E1450 cxm

2014-11-12T23:02:31Z

Xshao2: /* Exampls */

==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 [http://en.wikipedia.org/wiki/Semantics_(computer_science) semantics]. The syntax of JavaScript is actually derived from [http://en.wikipedia.org/wiki/C_(programming_language) C], while the semantics and design are influenced by [http://en.wikipedia.org/wiki/Self_(programming_language) Self] and [http://en.wikipedia.org/wiki/Scheme_(programming_language) Scheme] programming languages<ref>http://en.wikipedia.org/wiki/JavaScript</ref>. This mix of features makes it a multi-paradigm language, supporting [http://en.wikipedia.org/wiki/Object-oriented_programming object-oriented], [http://en.wikipedia.org/wiki/Imperative_programming imperative], and [http://en.wikipedia.org/wiki/Functional_programming 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 “Rubric” 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

* 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)

* The "deadline_name" and "description URL" could be hidden when you change the status of the checkbox in Due_Date tab

* 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.

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

def edit
...
@reviewvarycheck = nil
@assignment_questionnaires.each do |aq|
if(!(aq.used_in_round.nil?))
@reviewvarycheck = 1
@q_id = aq.questionnaire_id
@qn = Questionnaire.find(@q_id)
if(@qn.display_type.eql?"Review")
@review_check = 1
elsif(@qn.display_type.eql?"Metareview")
@metareview_check=1
elsif(@qn.display_type.eql?"Author Feedback")
@author_check = 1
elsif(@qn.display_type.eql?"Teammate Review")
@teammate_check = 1
end
end
end
...
end

In the _rubrics.html.erb, we added a javascript function to handle the click action:

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.

==== Codes ====
In the assignment_controller.rb, we added a method to check if the name and url are NULL in database to make a decision in the initial display (or after webpage refreshes). If there are contents in the DB, which means someone has typed in some texts, it will display the two columns; on the contrary, it won't display to make the table simpler.:

def edit
...
@due_date_nameurl_notempty = "null"
@due_date_nameurl_notempty_checkbox = false
...
# Add by Xiaoqiang Shao, check if name and url in database is empty before webpage displays
@due_date_all.each do |dd|
if(!(dd.deadline_name.nil?))
if(dd.deadline_name.length>=1)
@due_date_nameurl_notempty = 1
@due_date_nameurl_notempty_checkbox = true
end
end
if(!(dd.description_url.nil?))
if(dd.description_url.length>=1)
@due_date_nameurl_notempty = 1
@due_date_nameurl_notempty_checkbox = true
end
end
end
...
end

And at any time, users can hide/show the two columns by checking the checkbox. Here are the main changes in _due_dates.html.erb:

function handleChangenameurl(checkvalue,due_date_name_column,due_date_url_column) {
var state = checkvalue;
var round_count = <%= @assignment.rounds_of_reviews%>;
if (!document.getElementById) {
return;
}
if (state == false && round_count >1){
//hide name and url colomns
for (i =1; i <= round_count; i++) {
removeDueDateTableElement('submission', i);
removeDueDateTableElement('review', i);
}
removeDueDateTableElement('metareview', 0);
for (i =1; i <= round_count; i++) {
addDueDateTableElement(null,'submission',i, <%= due_date(@assignment, 'submission', 0).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>); // or use questionnaire_options(@assignment, nil).to_json
addDueDateTableElement(null,'review', i, <%= due_date(@assignment, 'review', 0).to_json %>, <%= questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= assignment_questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>);
}
addDueDateTableElement(null,'metareview',0,<%= due_date(@assignment,'metareview', 0).to_json%>);
due_date_name_column.style.display="none";
due_date_url_column.style.display="none";
}
if (state == true && round_count >1){
//display name and url colomns
for (i =1; i <= round_count; i++) {
removeDueDateTableElement('submission', i);
removeDueDateTableElement('review', i);
}
removeDueDateTableElement('metareview', 0);
for (i =1; i <= round_count; i++) {
addDueDateTableElement(1,'submission', i, <%= due_date(@assignment, 'submission', 0).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>); // or use questionnaire_options(@assignment, nil).to_json
addDueDateTableElement(1,'review',i, <%= due_date(@assignment, 'review', 0).to_json %>, <%= questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= assignment_questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>);
}
addDueDateTableElement(1,'metareview',0,<%= due_date(@assignment,'metareview', 0).to_json%>);
due_date_name_column.removeAttribute("style");
due_date_url_column.removeAttribute("style");
}
else{
return;
}
}

<input name="changenameurl" type="hidden" value="false" />
<%= check_box_tag('changenameurl', 'true', @due_date_nameurl_notempty_checkbox,:onclick=>"handleChangenameurl(this.checked,due_date_name_column,due_date_url_column)" ) %>
<%= label_tag('changenameurl', 'Change name and description url?') %>

In the end corresponding changes should be made in the end of _due_dates.html.erb, after which the webpage will display corresponding contents (hide or display name and url columns according to whether they are empty):

<pre>
<table class='exp' id='due_dates_table' style='padding:10px;min-width: 990px;overflow: hidden;'>
<tr id='due_date_heading'>
...
</tr>
...
<script>
jQuery(document).ready(function () {
<% for i in 1..@assignment.rounds_of_reviews %>
addDueDateTableElement(<%= @due_date_nameurl_notempty %>,'submission', <%=i%>, <%= due_date(@assignment, 'submission', i-1).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>); // or use questionnaire_options(@assignment, nil).to_json
addDueDateTableElement(<%= @due_date_nameurl_notempty %>,'review', <%=i%>, <%= due_date(@assignment, 'review', i-1).to_json %>, <%= questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= assignment_questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>);
<% end %>
addDueDateTableElement(<%= @due_date_nameurl_notempty %>,'metareview', 0, <%= due_date(@assignment, 'metareview').to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>);
//after webpage refreshes, hide or display name and url according to whether names and urls are empty in DB
var due_date_name_column=document.getElementById("due_date_name_column");
var due_date_url_column=document.getElementById("due_date_url_column");
<% if @due_date_nameurl_notempty =="null" %>
due_date_name_column.style.visibility="hidden";
due_date_url_column.style.visibility="hidden";
<% end %>
}());
</script>
</table>
</pre>

=== Case 3: Make slight changes to existing methods/codes ===
==== Current Scenario ====

Existing methods have no enough parameters we want, or they are not returning out results we want.
==== After Changes ====

* Make small changes to them to fit the new methods we write without interfering the previous methods.

==== Exampls ====
The slight changes of functions are small, trivial and less important to readers to understand what we have done. So only examples are shown to convey the ideas, and all the detailed modification can be found at our Github [[https://github.com/shaoxq1205/expertiza]] (on branch production). <ref>https://github.com/shaoxq1205/expertiza</ref>

Here's the example:
We need to add a round_number for the questionnaire() method in order to make it return different values (actually from different rows of the assignment_questionnaire table) because there're more than 1 rounds now and each round may have different values.
previous method of questionnaire():
<pre>
def questionnaire(assignment, type)
questionnaire = assignment.questionnaires.find_by_type(type)
if questionnaire.nil?
questionnaire = Object.const_get(type).new
questionnaire
else
questionnaire
end
end
</pre>

current method of questionnaire():
<pre>
def questionnaire(assignment, type, round_number)
if round_number.nil?
questionnaire=assignment.questionnaires.find_by_type(type)
else
ass_ques=assignment.assignment_questionnaires.find_by_used_in_round(round_number)
# make sure the assignment_questionnaire record is not empty
if !ass_ques.nil?
temp_num=ass_ques.questionnaire_id
questionnaire = assignment.questionnaires.find_by_id(temp_num)
end
end
if questionnaire.nil?
questionnaire = Object.const_get(type).new
questionnaire
else
questionnaire
end
end
</pre>

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

Scenario 1: An instructor can set the "Review Rubric Varies by Round" for an assignment, and set due dates for all of submissions and reviews, as well as different rubrics would be used

Scenario 2: A student should see the review rubric for 1st round in the other's work link

Scenario 3: The instructor change the due date to start the 2nd round of review

Scenario 4: A student should see the review rubric for 2nd round in the other's work link

=== Codes ===
In app/features/instructor/Vary_Rubrics_by_Round_Test.feature:
<pre>
Scenario1: Instructor can set the review rubric varies by round
Given an instructor named "user6"
And I am logged in as "user6"
@instructor
@manage_assignments
When I move to the "Assignments" page
And I click the "edit" link for "Week 4 wiki"
And I check "Review rubric varies by round?"
And I fill in "2014,11,10" for "Round1 Submission"
And I fill in "2014,11,30" for "Round1 Review"
And I fill in "2014,12,20" for "Round2 Submission"
And I fill in "2014,12,22" for "Round2:Review"
And I use Review Round1 named "update_wiki"
And I use Review Round2"named "rubric1"
Then I press "Save"
@wip
Scenario2: Student should see the review rubric for 1st round
Given I am logged in as a user13
And I move to the "Assignments" page
And I click the "Week 4 wiki" link
When I click the "Others' work" link
Then I should see "update_wiki"
Scenario3: Instructor then change the due date of Round 2, so that the student would see a different review rubric
Given an instructor named "user6"
And I am logged in as "user6"
@instructor
@manage_assignments
When I move to the "Assignments" page
And I click the "edit" link for "Week 4 wiki"
And I fill in "2014,10,10" for "Round1 Submission"
And I fill in "2014,10,22" for "Round1 Review"
And I fill in "2014,11,10" for "Round2 Submission"
And I fill in "2014,12,23" for "Round2:Review"
Then I press "Save"
@wip
Scenario4: Student should see the review rubric for 2st round, which is different from the 1st one
Given I am logged in as a user13
And I move to the "Assignments" page
And I click the "Week 4 wiki" link
When I click the "Others' work" link
Then I should see "rubric1"
</pre>

In app/features/step_definitions/review_rubric_varies_by_round.rb:
<pre>
And /^I click the "edit" link for "Week 4 wiki"$/ do
visit('/assignment/edit/18')
end
And /^I fill in "([^"]*)" for "([^"]*)" $/ do |due_date, deadline|
step "I fill in \"#{due_date}\" for \"due_date\""
step "I fill in \"#{deadline}\" for \"deadline\""
end
And /^I use Review Round1 named "update_wiki" $/ do
step "I select \"update_wiki\" from \"questionnaires[review1]\""
end
And /^I use Review Round1 named "rubric1" $/ do
step "I select \"rubric1\" from \"questionnaires[review2]\""
end
</pre>

== Final Layout ==
Here are the screen shots of the final layouts.
=== Rubrics Tab ===
[[File:Unchecked.png]]
[[File:Checked.png]]

As you can see, a Review rubric varies by round checkbox will make a difference, which makes sense.
=== Due Dates Tab ===
[[File:Due_unchecked.jpg]]
[[File:Due_checked.png]]

As you can see, a Change name and description url checkbox will make a difference, which makes sense.

== References ==
<references/>

CSC/ECE 517 Fall 2014/OSS E1450 cxm

2014-11-12T23:01:11Z

Xshao2: /* Exampls */

==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 [http://en.wikipedia.org/wiki/Semantics_(computer_science) semantics]. The syntax of JavaScript is actually derived from [http://en.wikipedia.org/wiki/C_(programming_language) C], while the semantics and design are influenced by [http://en.wikipedia.org/wiki/Self_(programming_language) Self] and [http://en.wikipedia.org/wiki/Scheme_(programming_language) Scheme] programming languages<ref>http://en.wikipedia.org/wiki/JavaScript</ref>. This mix of features makes it a multi-paradigm language, supporting [http://en.wikipedia.org/wiki/Object-oriented_programming object-oriented], [http://en.wikipedia.org/wiki/Imperative_programming imperative], and [http://en.wikipedia.org/wiki/Functional_programming 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 “Rubric” 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

* 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)

* The "deadline_name" and "description URL" could be hidden when you change the status of the checkbox in Due_Date tab

* 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.

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

def edit
...
@reviewvarycheck = nil
@assignment_questionnaires.each do |aq|
if(!(aq.used_in_round.nil?))
@reviewvarycheck = 1
@q_id = aq.questionnaire_id
@qn = Questionnaire.find(@q_id)
if(@qn.display_type.eql?"Review")
@review_check = 1
elsif(@qn.display_type.eql?"Metareview")
@metareview_check=1
elsif(@qn.display_type.eql?"Author Feedback")
@author_check = 1
elsif(@qn.display_type.eql?"Teammate Review")
@teammate_check = 1
end
end
end
...
end

In the _rubrics.html.erb, we added a javascript function to handle the click action:

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.

==== Codes ====
In the assignment_controller.rb, we added a method to check if the name and url are NULL in database to make a decision in the initial display (or after webpage refreshes). If there are contents in the DB, which means someone has typed in some texts, it will display the two columns; on the contrary, it won't display to make the table simpler.:

def edit
...
@due_date_nameurl_notempty = "null"
@due_date_nameurl_notempty_checkbox = false
...
# Add by Xiaoqiang Shao, check if name and url in database is empty before webpage displays
@due_date_all.each do |dd|
if(!(dd.deadline_name.nil?))
if(dd.deadline_name.length>=1)
@due_date_nameurl_notempty = 1
@due_date_nameurl_notempty_checkbox = true
end
end
if(!(dd.description_url.nil?))
if(dd.description_url.length>=1)
@due_date_nameurl_notempty = 1
@due_date_nameurl_notempty_checkbox = true
end
end
end
...
end

And at any time, users can hide/show the two columns by checking the checkbox. Here are the main changes in _due_dates.html.erb:

function handleChangenameurl(checkvalue,due_date_name_column,due_date_url_column) {
var state = checkvalue;
var round_count = <%= @assignment.rounds_of_reviews%>;
if (!document.getElementById) {
return;
}
if (state == false && round_count >1){
//hide name and url colomns
for (i =1; i <= round_count; i++) {
removeDueDateTableElement('submission', i);
removeDueDateTableElement('review', i);
}
removeDueDateTableElement('metareview', 0);
for (i =1; i <= round_count; i++) {
addDueDateTableElement(null,'submission',i, <%= due_date(@assignment, 'submission', 0).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>); // or use questionnaire_options(@assignment, nil).to_json
addDueDateTableElement(null,'review', i, <%= due_date(@assignment, 'review', 0).to_json %>, <%= questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= assignment_questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>);
}
addDueDateTableElement(null,'metareview',0,<%= due_date(@assignment,'metareview', 0).to_json%>);
due_date_name_column.style.display="none";
due_date_url_column.style.display="none";
}
if (state == true && round_count >1){
//display name and url colomns
for (i =1; i <= round_count; i++) {
removeDueDateTableElement('submission', i);
removeDueDateTableElement('review', i);
}
removeDueDateTableElement('metareview', 0);
for (i =1; i <= round_count; i++) {
addDueDateTableElement(1,'submission', i, <%= due_date(@assignment, 'submission', 0).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>); // or use questionnaire_options(@assignment, nil).to_json
addDueDateTableElement(1,'review',i, <%= due_date(@assignment, 'review', 0).to_json %>, <%= questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= assignment_questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>);
}
addDueDateTableElement(1,'metareview',0,<%= due_date(@assignment,'metareview', 0).to_json%>);
due_date_name_column.removeAttribute("style");
due_date_url_column.removeAttribute("style");
}
else{
return;
}
}

<input name="changenameurl" type="hidden" value="false" />
<%= check_box_tag('changenameurl', 'true', @due_date_nameurl_notempty_checkbox,:onclick=>"handleChangenameurl(this.checked,due_date_name_column,due_date_url_column)" ) %>
<%= label_tag('changenameurl', 'Change name and description url?') %>

In the end corresponding changes should be made in the end of _due_dates.html.erb, after which the webpage will display corresponding contents (hide or display name and url columns according to whether they are empty):

<pre>
<table class='exp' id='due_dates_table' style='padding:10px;min-width: 990px;overflow: hidden;'>
<tr id='due_date_heading'>
...
</tr>
...
<script>
jQuery(document).ready(function () {
<% for i in 1..@assignment.rounds_of_reviews %>
addDueDateTableElement(<%= @due_date_nameurl_notempty %>,'submission', <%=i%>, <%= due_date(@assignment, 'submission', i-1).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>); // or use questionnaire_options(@assignment, nil).to_json
addDueDateTableElement(<%= @due_date_nameurl_notempty %>,'review', <%=i%>, <%= due_date(@assignment, 'review', i-1).to_json %>, <%= questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= assignment_questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>);
<% end %>
addDueDateTableElement(<%= @due_date_nameurl_notempty %>,'metareview', 0, <%= due_date(@assignment, 'metareview').to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>);
//after webpage refreshes, hide or display name and url according to whether names and urls are empty in DB
var due_date_name_column=document.getElementById("due_date_name_column");
var due_date_url_column=document.getElementById("due_date_url_column");
<% if @due_date_nameurl_notempty =="null" %>
due_date_name_column.style.visibility="hidden";
due_date_url_column.style.visibility="hidden";
<% end %>
}());
</script>
</table>
</pre>

=== Case 3: Make slight changes to existing methods/codes ===
==== Current Scenario ====

Existing methods have no enough parameters we want, or they are not returning out results we want.
==== After Changes ====

* Make small changes to them to fit the new methods we write without interfering the previous methods.

==== Exampls ====
The slight changes of functions are small, trivial and less important to readers to understand what we have done. So only examples are shown to convey the ideas, and all the detailed modification can be found at our Github (on branch production). <ref>https://github.com/shaoxq1205/expertiza</ref>

Here's the example:
We need to add a round_number for the questionnaire() method in order to make it return different values (actually from different rows of the assignment_questionnaire table) because there're more than 1 rounds now and each round may have different values.
previous method of questionnaire():
<pre>
def questionnaire(assignment, type)
questionnaire = assignment.questionnaires.find_by_type(type)
if questionnaire.nil?
questionnaire = Object.const_get(type).new
questionnaire
else
questionnaire
end
end
</pre>

current method of questionnaire():
<pre>
def questionnaire(assignment, type, round_number)
if round_number.nil?
questionnaire=assignment.questionnaires.find_by_type(type)
else
ass_ques=assignment.assignment_questionnaires.find_by_used_in_round(round_number)
# make sure the assignment_questionnaire record is not empty
if !ass_ques.nil?
temp_num=ass_ques.questionnaire_id
questionnaire = assignment.questionnaires.find_by_id(temp_num)
end
end
if questionnaire.nil?
questionnaire = Object.const_get(type).new
questionnaire
else
questionnaire
end
end
</pre>

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

Scenario 1: An instructor can set the "Review Rubric Varies by Round" for an assignment, and set due dates for all of submissions and reviews, as well as different rubrics would be used

Scenario 2: A student should see the review rubric for 1st round in the other's work link

Scenario 3: The instructor change the due date to start the 2nd round of review

Scenario 4: A student should see the review rubric for 2nd round in the other's work link

=== Codes ===
In app/features/instructor/Vary_Rubrics_by_Round_Test.feature:
<pre>
Scenario1: Instructor can set the review rubric varies by round
Given an instructor named "user6"
And I am logged in as "user6"
@instructor
@manage_assignments
When I move to the "Assignments" page
And I click the "edit" link for "Week 4 wiki"
And I check "Review rubric varies by round?"
And I fill in "2014,11,10" for "Round1 Submission"
And I fill in "2014,11,30" for "Round1 Review"
And I fill in "2014,12,20" for "Round2 Submission"
And I fill in "2014,12,22" for "Round2:Review"
And I use Review Round1 named "update_wiki"
And I use Review Round2"named "rubric1"
Then I press "Save"
@wip
Scenario2: Student should see the review rubric for 1st round
Given I am logged in as a user13
And I move to the "Assignments" page
And I click the "Week 4 wiki" link
When I click the "Others' work" link
Then I should see "update_wiki"
Scenario3: Instructor then change the due date of Round 2, so that the student would see a different review rubric
Given an instructor named "user6"
And I am logged in as "user6"
@instructor
@manage_assignments
When I move to the "Assignments" page
And I click the "edit" link for "Week 4 wiki"
And I fill in "2014,10,10" for "Round1 Submission"
And I fill in "2014,10,22" for "Round1 Review"
And I fill in "2014,11,10" for "Round2 Submission"
And I fill in "2014,12,23" for "Round2:Review"
Then I press "Save"
@wip
Scenario4: Student should see the review rubric for 2st round, which is different from the 1st one
Given I am logged in as a user13
And I move to the "Assignments" page
And I click the "Week 4 wiki" link
When I click the "Others' work" link
Then I should see "rubric1"
</pre>

In app/features/step_definitions/review_rubric_varies_by_round.rb:
<pre>
And /^I click the "edit" link for "Week 4 wiki"$/ do
visit('/assignment/edit/18')
end
And /^I fill in "([^"]*)" for "([^"]*)" $/ do |due_date, deadline|
step "I fill in \"#{due_date}\" for \"due_date\""
step "I fill in \"#{deadline}\" for \"deadline\""
end
And /^I use Review Round1 named "update_wiki" $/ do
step "I select \"update_wiki\" from \"questionnaires[review1]\""
end
And /^I use Review Round1 named "rubric1" $/ do
step "I select \"rubric1\" from \"questionnaires[review2]\""
end
</pre>

== Final Layout ==
Here are the screen shots of the final layouts.
=== Rubrics Tab ===
[[File:Unchecked.png]]
[[File:Checked.png]]

As you can see, a Review rubric varies by round checkbox will make a difference, which makes sense.
=== Due Dates Tab ===
[[File:Due_unchecked.jpg]]
[[File:Due_checked.png]]

As you can see, a Change name and description url checkbox will make a difference, which makes sense.

== References ==
<references/>

CSC/ECE 517 Fall 2014/OSS E1450 cxm

2014-11-12T23:00:36Z

Xshao2: /* Exampls */

==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 [http://en.wikipedia.org/wiki/Semantics_(computer_science) semantics]. The syntax of JavaScript is actually derived from [http://en.wikipedia.org/wiki/C_(programming_language) C], while the semantics and design are influenced by [http://en.wikipedia.org/wiki/Self_(programming_language) Self] and [http://en.wikipedia.org/wiki/Scheme_(programming_language) Scheme] programming languages<ref>http://en.wikipedia.org/wiki/JavaScript</ref>. This mix of features makes it a multi-paradigm language, supporting [http://en.wikipedia.org/wiki/Object-oriented_programming object-oriented], [http://en.wikipedia.org/wiki/Imperative_programming imperative], and [http://en.wikipedia.org/wiki/Functional_programming 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 “Rubric” 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

* 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)

* The "deadline_name" and "description URL" could be hidden when you change the status of the checkbox in Due_Date tab

* 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.

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

def edit
...
@reviewvarycheck = nil
@assignment_questionnaires.each do |aq|
if(!(aq.used_in_round.nil?))
@reviewvarycheck = 1
@q_id = aq.questionnaire_id
@qn = Questionnaire.find(@q_id)
if(@qn.display_type.eql?"Review")
@review_check = 1
elsif(@qn.display_type.eql?"Metareview")
@metareview_check=1
elsif(@qn.display_type.eql?"Author Feedback")
@author_check = 1
elsif(@qn.display_type.eql?"Teammate Review")
@teammate_check = 1
end
end
end
...
end

In the _rubrics.html.erb, we added a javascript function to handle the click action:

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.

==== Codes ====
In the assignment_controller.rb, we added a method to check if the name and url are NULL in database to make a decision in the initial display (or after webpage refreshes). If there are contents in the DB, which means someone has typed in some texts, it will display the two columns; on the contrary, it won't display to make the table simpler.:

def edit
...
@due_date_nameurl_notempty = "null"
@due_date_nameurl_notempty_checkbox = false
...
# Add by Xiaoqiang Shao, check if name and url in database is empty before webpage displays
@due_date_all.each do |dd|
if(!(dd.deadline_name.nil?))
if(dd.deadline_name.length>=1)
@due_date_nameurl_notempty = 1
@due_date_nameurl_notempty_checkbox = true
end
end
if(!(dd.description_url.nil?))
if(dd.description_url.length>=1)
@due_date_nameurl_notempty = 1
@due_date_nameurl_notempty_checkbox = true
end
end
end
...
end

And at any time, users can hide/show the two columns by checking the checkbox. Here are the main changes in _due_dates.html.erb:

function handleChangenameurl(checkvalue,due_date_name_column,due_date_url_column) {
var state = checkvalue;
var round_count = <%= @assignment.rounds_of_reviews%>;
if (!document.getElementById) {
return;
}
if (state == false && round_count >1){
//hide name and url colomns
for (i =1; i <= round_count; i++) {
removeDueDateTableElement('submission', i);
removeDueDateTableElement('review', i);
}
removeDueDateTableElement('metareview', 0);
for (i =1; i <= round_count; i++) {
addDueDateTableElement(null,'submission',i, <%= due_date(@assignment, 'submission', 0).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>); // or use questionnaire_options(@assignment, nil).to_json
addDueDateTableElement(null,'review', i, <%= due_date(@assignment, 'review', 0).to_json %>, <%= questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= assignment_questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>);
}
addDueDateTableElement(null,'metareview',0,<%= due_date(@assignment,'metareview', 0).to_json%>);
due_date_name_column.style.display="none";
due_date_url_column.style.display="none";
}
if (state == true && round_count >1){
//display name and url colomns
for (i =1; i <= round_count; i++) {
removeDueDateTableElement('submission', i);
removeDueDateTableElement('review', i);
}
removeDueDateTableElement('metareview', 0);
for (i =1; i <= round_count; i++) {
addDueDateTableElement(1,'submission', i, <%= due_date(@assignment, 'submission', 0).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>); // or use questionnaire_options(@assignment, nil).to_json
addDueDateTableElement(1,'review',i, <%= due_date(@assignment, 'review', 0).to_json %>, <%= questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= assignment_questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>);
}
addDueDateTableElement(1,'metareview',0,<%= due_date(@assignment,'metareview', 0).to_json%>);
due_date_name_column.removeAttribute("style");
due_date_url_column.removeAttribute("style");
}
else{
return;
}
}

<input name="changenameurl" type="hidden" value="false" />
<%= check_box_tag('changenameurl', 'true', @due_date_nameurl_notempty_checkbox,:onclick=>"handleChangenameurl(this.checked,due_date_name_column,due_date_url_column)" ) %>
<%= label_tag('changenameurl', 'Change name and description url?') %>

In the end corresponding changes should be made in the end of _due_dates.html.erb, after which the webpage will display corresponding contents (hide or display name and url columns according to whether they are empty):

<pre>
<table class='exp' id='due_dates_table' style='padding:10px;min-width: 990px;overflow: hidden;'>
<tr id='due_date_heading'>
...
</tr>
...
<script>
jQuery(document).ready(function () {
<% for i in 1..@assignment.rounds_of_reviews %>
addDueDateTableElement(<%= @due_date_nameurl_notempty %>,'submission', <%=i%>, <%= due_date(@assignment, 'submission', i-1).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>); // or use questionnaire_options(@assignment, nil).to_json
addDueDateTableElement(<%= @due_date_nameurl_notempty %>,'review', <%=i%>, <%= due_date(@assignment, 'review', i-1).to_json %>, <%= questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= assignment_questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>);
<% end %>
addDueDateTableElement(<%= @due_date_nameurl_notempty %>,'metareview', 0, <%= due_date(@assignment, 'metareview').to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>);
//after webpage refreshes, hide or display name and url according to whether names and urls are empty in DB
var due_date_name_column=document.getElementById("due_date_name_column");
var due_date_url_column=document.getElementById("due_date_url_column");
<% if @due_date_nameurl_notempty =="null" %>
due_date_name_column.style.visibility="hidden";
due_date_url_column.style.visibility="hidden";
<% end %>
}());
</script>
</table>
</pre>

=== Case 3: Make slight changes to existing methods/codes ===
==== Current Scenario ====

Existing methods have no enough parameters we want, or they are not returning out results we want.
==== After Changes ====

* Make small changes to them to fit the new methods we write without interfering the previous methods.

==== Exampls ====
The slight changes of functions are small, trivial and less important to readers to understand what we have done. So only examples are shown to convey the ideas, and all the detailed modification can be found at our Github (on branch production). <ref>https:github.com/shaoxq1205/expertiza</ref>

Here's the example:
We need to add a round_number for the questionnaire() method in order to make it return different values (actually from different rows of the assignment_questionnaire table) because there're more than 1 rounds now and each round may have different values.
previous method of questionnaire():
<pre>
def questionnaire(assignment, type)
questionnaire = assignment.questionnaires.find_by_type(type)
if questionnaire.nil?
questionnaire = Object.const_get(type).new
questionnaire
else
questionnaire
end
end
</pre>

current method of questionnaire():
<pre>
def questionnaire(assignment, type, round_number)
if round_number.nil?
questionnaire=assignment.questionnaires.find_by_type(type)
else
ass_ques=assignment.assignment_questionnaires.find_by_used_in_round(round_number)
# make sure the assignment_questionnaire record is not empty
if !ass_ques.nil?
temp_num=ass_ques.questionnaire_id
questionnaire = assignment.questionnaires.find_by_id(temp_num)
end
end
if questionnaire.nil?
questionnaire = Object.const_get(type).new
questionnaire
else
questionnaire
end
end
</pre>

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

Scenario 1: An instructor can set the "Review Rubric Varies by Round" for an assignment, and set due dates for all of submissions and reviews, as well as different rubrics would be used

Scenario 2: A student should see the review rubric for 1st round in the other's work link

Scenario 3: The instructor change the due date to start the 2nd round of review

Scenario 4: A student should see the review rubric for 2nd round in the other's work link

=== Codes ===
In app/features/instructor/Vary_Rubrics_by_Round_Test.feature:
<pre>
Scenario1: Instructor can set the review rubric varies by round
Given an instructor named "user6"
And I am logged in as "user6"
@instructor
@manage_assignments
When I move to the "Assignments" page
And I click the "edit" link for "Week 4 wiki"
And I check "Review rubric varies by round?"
And I fill in "2014,11,10" for "Round1 Submission"
And I fill in "2014,11,30" for "Round1 Review"
And I fill in "2014,12,20" for "Round2 Submission"
And I fill in "2014,12,22" for "Round2:Review"
And I use Review Round1 named "update_wiki"
And I use Review Round2"named "rubric1"
Then I press "Save"
@wip
Scenario2: Student should see the review rubric for 1st round
Given I am logged in as a user13
And I move to the "Assignments" page
And I click the "Week 4 wiki" link
When I click the "Others' work" link
Then I should see "update_wiki"
Scenario3: Instructor then change the due date of Round 2, so that the student would see a different review rubric
Given an instructor named "user6"
And I am logged in as "user6"
@instructor
@manage_assignments
When I move to the "Assignments" page
And I click the "edit" link for "Week 4 wiki"
And I fill in "2014,10,10" for "Round1 Submission"
And I fill in "2014,10,22" for "Round1 Review"
And I fill in "2014,11,10" for "Round2 Submission"
And I fill in "2014,12,23" for "Round2:Review"
Then I press "Save"
@wip
Scenario4: Student should see the review rubric for 2st round, which is different from the 1st one
Given I am logged in as a user13
And I move to the "Assignments" page
And I click the "Week 4 wiki" link
When I click the "Others' work" link
Then I should see "rubric1"
</pre>

In app/features/step_definitions/review_rubric_varies_by_round.rb:
<pre>
And /^I click the "edit" link for "Week 4 wiki"$/ do
visit('/assignment/edit/18')
end
And /^I fill in "([^"]*)" for "([^"]*)" $/ do |due_date, deadline|
step "I fill in \"#{due_date}\" for \"due_date\""
step "I fill in \"#{deadline}\" for \"deadline\""
end
And /^I use Review Round1 named "update_wiki" $/ do
step "I select \"update_wiki\" from \"questionnaires[review1]\""
end
And /^I use Review Round1 named "rubric1" $/ do
step "I select \"rubric1\" from \"questionnaires[review2]\""
end
</pre>

== Final Layout ==
Here are the screen shots of the final layouts.
=== Rubrics Tab ===
[[File:Unchecked.png]]
[[File:Checked.png]]

As you can see, a Review rubric varies by round checkbox will make a difference, which makes sense.
=== Due Dates Tab ===
[[File:Due_unchecked.jpg]]
[[File:Due_checked.png]]

As you can see, a Change name and description url checkbox will make a difference, which makes sense.

== References ==
<references/>

CSC/ECE 517 Fall 2014/OSS E1450 cxm

2014-11-12T22:58:14Z

Xshao2: /* Due Dates Tab */

==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 [http://en.wikipedia.org/wiki/Semantics_(computer_science) semantics]. The syntax of JavaScript is actually derived from [http://en.wikipedia.org/wiki/C_(programming_language) C], while the semantics and design are influenced by [http://en.wikipedia.org/wiki/Self_(programming_language) Self] and [http://en.wikipedia.org/wiki/Scheme_(programming_language) Scheme] programming languages<ref>http://en.wikipedia.org/wiki/JavaScript</ref>. This mix of features makes it a multi-paradigm language, supporting [http://en.wikipedia.org/wiki/Object-oriented_programming object-oriented], [http://en.wikipedia.org/wiki/Imperative_programming imperative], and [http://en.wikipedia.org/wiki/Functional_programming 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 “Rubric” 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

* 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)

* The "deadline_name" and "description URL" could be hidden when you change the status of the checkbox in Due_Date tab

* 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.

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

def edit
...
@reviewvarycheck = nil
@assignment_questionnaires.each do |aq|
if(!(aq.used_in_round.nil?))
@reviewvarycheck = 1
@q_id = aq.questionnaire_id
@qn = Questionnaire.find(@q_id)
if(@qn.display_type.eql?"Review")
@review_check = 1
elsif(@qn.display_type.eql?"Metareview")
@metareview_check=1
elsif(@qn.display_type.eql?"Author Feedback")
@author_check = 1
elsif(@qn.display_type.eql?"Teammate Review")
@teammate_check = 1
end
end
end
...
end

In the _rubrics.html.erb, we added a javascript function to handle the click action:

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.

==== Codes ====
In the assignment_controller.rb, we added a method to check if the name and url are NULL in database to make a decision in the initial display (or after webpage refreshes). If there are contents in the DB, which means someone has typed in some texts, it will display the two columns; on the contrary, it won't display to make the table simpler.:

def edit
...
@due_date_nameurl_notempty = "null"
@due_date_nameurl_notempty_checkbox = false
...
# Add by Xiaoqiang Shao, check if name and url in database is empty before webpage displays
@due_date_all.each do |dd|
if(!(dd.deadline_name.nil?))
if(dd.deadline_name.length>=1)
@due_date_nameurl_notempty = 1
@due_date_nameurl_notempty_checkbox = true
end
end
if(!(dd.description_url.nil?))
if(dd.description_url.length>=1)
@due_date_nameurl_notempty = 1
@due_date_nameurl_notempty_checkbox = true
end
end
end
...
end

And at any time, users can hide/show the two columns by checking the checkbox. Here are the main changes in _due_dates.html.erb:

function handleChangenameurl(checkvalue,due_date_name_column,due_date_url_column) {
var state = checkvalue;
var round_count = <%= @assignment.rounds_of_reviews%>;
if (!document.getElementById) {
return;
}
if (state == false && round_count >1){
//hide name and url colomns
for (i =1; i <= round_count; i++) {
removeDueDateTableElement('submission', i);
removeDueDateTableElement('review', i);
}
removeDueDateTableElement('metareview', 0);
for (i =1; i <= round_count; i++) {
addDueDateTableElement(null,'submission',i, <%= due_date(@assignment, 'submission', 0).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>); // or use questionnaire_options(@assignment, nil).to_json
addDueDateTableElement(null,'review', i, <%= due_date(@assignment, 'review', 0).to_json %>, <%= questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= assignment_questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>);
}
addDueDateTableElement(null,'metareview',0,<%= due_date(@assignment,'metareview', 0).to_json%>);
due_date_name_column.style.display="none";
due_date_url_column.style.display="none";
}
if (state == true && round_count >1){
//display name and url colomns
for (i =1; i <= round_count; i++) {
removeDueDateTableElement('submission', i);
removeDueDateTableElement('review', i);
}
removeDueDateTableElement('metareview', 0);
for (i =1; i <= round_count; i++) {
addDueDateTableElement(1,'submission', i, <%= due_date(@assignment, 'submission', 0).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>); // or use questionnaire_options(@assignment, nil).to_json
addDueDateTableElement(1,'review',i, <%= due_date(@assignment, 'review', 0).to_json %>, <%= questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= assignment_questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>);
}
addDueDateTableElement(1,'metareview',0,<%= due_date(@assignment,'metareview', 0).to_json%>);
due_date_name_column.removeAttribute("style");
due_date_url_column.removeAttribute("style");
}
else{
return;
}
}

<input name="changenameurl" type="hidden" value="false" />
<%= check_box_tag('changenameurl', 'true', @due_date_nameurl_notempty_checkbox,:onclick=>"handleChangenameurl(this.checked,due_date_name_column,due_date_url_column)" ) %>
<%= label_tag('changenameurl', 'Change name and description url?') %>

In the end corresponding changes should be made in the end of _due_dates.html.erb, after which the webpage will display corresponding contents (hide or display name and url columns according to whether they are empty):

<pre>
<table class='exp' id='due_dates_table' style='padding:10px;min-width: 990px;overflow: hidden;'>
<tr id='due_date_heading'>
...
</tr>
...
<script>
jQuery(document).ready(function () {
<% for i in 1..@assignment.rounds_of_reviews %>
addDueDateTableElement(<%= @due_date_nameurl_notempty %>,'submission', <%=i%>, <%= due_date(@assignment, 'submission', i-1).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>); // or use questionnaire_options(@assignment, nil).to_json
addDueDateTableElement(<%= @due_date_nameurl_notempty %>,'review', <%=i%>, <%= due_date(@assignment, 'review', i-1).to_json %>, <%= questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= assignment_questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>);
<% end %>
addDueDateTableElement(<%= @due_date_nameurl_notempty %>,'metareview', 0, <%= due_date(@assignment, 'metareview').to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>);
//after webpage refreshes, hide or display name and url according to whether names and urls are empty in DB
var due_date_name_column=document.getElementById("due_date_name_column");
var due_date_url_column=document.getElementById("due_date_url_column");
<% if @due_date_nameurl_notempty =="null" %>
due_date_name_column.style.visibility="hidden";
due_date_url_column.style.visibility="hidden";
<% end %>
}());
</script>
</table>
</pre>

=== Case 3: Make slight changes to existing methods/codes ===
==== Current Scenario ====

Existing methods have no enough parameters we want, or they are not returning out results we want.
==== After Changes ====

* Make small changes to them to fit the new methods we write without interfering the previous methods.

==== Exampls ====
The slight changes of functions are small, trivial and less important to readers to understand what we have done. So only examples are shown to convey the ideas, and all the detailed modification can be found at our Github: https:github.com/shaoxq1205/expertiza (on branch production).

Here's the example:
We need to add a round_number for the questionnaire() method in order to make it return different values (actually from different rows of the assignment_questionnaire table) because there're more than 1 rounds now and each round may have different values.
previous method of questionnaire():
<pre>
def questionnaire(assignment, type)
questionnaire = assignment.questionnaires.find_by_type(type)
if questionnaire.nil?
questionnaire = Object.const_get(type).new
questionnaire
else
questionnaire
end
end
</pre>

current method of questionnaire():
<pre>
def questionnaire(assignment, type, round_number)
if round_number.nil?
questionnaire=assignment.questionnaires.find_by_type(type)
else
ass_ques=assignment.assignment_questionnaires.find_by_used_in_round(round_number)
# make sure the assignment_questionnaire record is not empty
if !ass_ques.nil?
temp_num=ass_ques.questionnaire_id
questionnaire = assignment.questionnaires.find_by_id(temp_num)
end
end
if questionnaire.nil?
questionnaire = Object.const_get(type).new
questionnaire
else
questionnaire
end
end
</pre>

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

Scenario 1: An instructor can set the "Review Rubric Varies by Round" for an assignment, and set due dates for all of submissions and reviews, as well as different rubrics would be used

Scenario 2: A student should see the review rubric for 1st round in the other's work link

Scenario 3: The instructor change the due date to start the 2nd round of review

Scenario 4: A student should see the review rubric for 2nd round in the other's work link

=== Codes ===
In app/features/instructor/Vary_Rubrics_by_Round_Test.feature:
<pre>
Scenario1: Instructor can set the review rubric varies by round
Given an instructor named "user6"
And I am logged in as "user6"
@instructor
@manage_assignments
When I move to the "Assignments" page
And I click the "edit" link for "Week 4 wiki"
And I check "Review rubric varies by round?"
And I fill in "2014,11,10" for "Round1 Submission"
And I fill in "2014,11,30" for "Round1 Review"
And I fill in "2014,12,20" for "Round2 Submission"
And I fill in "2014,12,22" for "Round2:Review"
And I use Review Round1 named "update_wiki"
And I use Review Round2"named "rubric1"
Then I press "Save"
@wip
Scenario2: Student should see the review rubric for 1st round
Given I am logged in as a user13
And I move to the "Assignments" page
And I click the "Week 4 wiki" link
When I click the "Others' work" link
Then I should see "update_wiki"
Scenario3: Instructor then change the due date of Round 2, so that the student would see a different review rubric
Given an instructor named "user6"
And I am logged in as "user6"
@instructor
@manage_assignments
When I move to the "Assignments" page
And I click the "edit" link for "Week 4 wiki"
And I fill in "2014,10,10" for "Round1 Submission"
And I fill in "2014,10,22" for "Round1 Review"
And I fill in "2014,11,10" for "Round2 Submission"
And I fill in "2014,12,23" for "Round2:Review"
Then I press "Save"
@wip
Scenario4: Student should see the review rubric for 2st round, which is different from the 1st one
Given I am logged in as a user13
And I move to the "Assignments" page
And I click the "Week 4 wiki" link
When I click the "Others' work" link
Then I should see "rubric1"
</pre>

In app/features/step_definitions/review_rubric_varies_by_round.rb:
<pre>
And /^I click the "edit" link for "Week 4 wiki"$/ do
visit('/assignment/edit/18')
end
And /^I fill in "([^"]*)" for "([^"]*)" $/ do |due_date, deadline|
step "I fill in \"#{due_date}\" for \"due_date\""
step "I fill in \"#{deadline}\" for \"deadline\""
end
And /^I use Review Round1 named "update_wiki" $/ do
step "I select \"update_wiki\" from \"questionnaires[review1]\""
end
And /^I use Review Round1 named "rubric1" $/ do
step "I select \"rubric1\" from \"questionnaires[review2]\""
end
</pre>

== Final Layout ==
Here are the screen shots of the final layouts.
=== Rubrics Tab ===
[[File:Unchecked.png]]
[[File:Checked.png]]

As you can see, a Review rubric varies by round checkbox will make a difference, which makes sense.
=== Due Dates Tab ===
[[File:Due_unchecked.jpg]]
[[File:Due_checked.png]]

As you can see, a Change name and description url checkbox will make a difference, which makes sense.

== References ==
<references/>

CSC/ECE 517 Fall 2014/OSS E1450 cxm

2014-11-12T22:57:32Z

Xshao2: /* Final Layout */

==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 [http://en.wikipedia.org/wiki/Semantics_(computer_science) semantics]. The syntax of JavaScript is actually derived from [http://en.wikipedia.org/wiki/C_(programming_language) C], while the semantics and design are influenced by [http://en.wikipedia.org/wiki/Self_(programming_language) Self] and [http://en.wikipedia.org/wiki/Scheme_(programming_language) Scheme] programming languages<ref>http://en.wikipedia.org/wiki/JavaScript</ref>. This mix of features makes it a multi-paradigm language, supporting [http://en.wikipedia.org/wiki/Object-oriented_programming object-oriented], [http://en.wikipedia.org/wiki/Imperative_programming imperative], and [http://en.wikipedia.org/wiki/Functional_programming 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 “Rubric” 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

* 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)

* The "deadline_name" and "description URL" could be hidden when you change the status of the checkbox in Due_Date tab

* 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.

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

def edit
...
@reviewvarycheck = nil
@assignment_questionnaires.each do |aq|
if(!(aq.used_in_round.nil?))
@reviewvarycheck = 1
@q_id = aq.questionnaire_id
@qn = Questionnaire.find(@q_id)
if(@qn.display_type.eql?"Review")
@review_check = 1
elsif(@qn.display_type.eql?"Metareview")
@metareview_check=1
elsif(@qn.display_type.eql?"Author Feedback")
@author_check = 1
elsif(@qn.display_type.eql?"Teammate Review")
@teammate_check = 1
end
end
end
...
end

In the _rubrics.html.erb, we added a javascript function to handle the click action:

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.

==== Codes ====
In the assignment_controller.rb, we added a method to check if the name and url are NULL in database to make a decision in the initial display (or after webpage refreshes). If there are contents in the DB, which means someone has typed in some texts, it will display the two columns; on the contrary, it won't display to make the table simpler.:

def edit
...
@due_date_nameurl_notempty = "null"
@due_date_nameurl_notempty_checkbox = false
...
# Add by Xiaoqiang Shao, check if name and url in database is empty before webpage displays
@due_date_all.each do |dd|
if(!(dd.deadline_name.nil?))
if(dd.deadline_name.length>=1)
@due_date_nameurl_notempty = 1
@due_date_nameurl_notempty_checkbox = true
end
end
if(!(dd.description_url.nil?))
if(dd.description_url.length>=1)
@due_date_nameurl_notempty = 1
@due_date_nameurl_notempty_checkbox = true
end
end
end
...
end

And at any time, users can hide/show the two columns by checking the checkbox. Here are the main changes in _due_dates.html.erb:

function handleChangenameurl(checkvalue,due_date_name_column,due_date_url_column) {
var state = checkvalue;
var round_count = <%= @assignment.rounds_of_reviews%>;
if (!document.getElementById) {
return;
}
if (state == false && round_count >1){
//hide name and url colomns
for (i =1; i <= round_count; i++) {
removeDueDateTableElement('submission', i);
removeDueDateTableElement('review', i);
}
removeDueDateTableElement('metareview', 0);
for (i =1; i <= round_count; i++) {
addDueDateTableElement(null,'submission',i, <%= due_date(@assignment, 'submission', 0).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>); // or use questionnaire_options(@assignment, nil).to_json
addDueDateTableElement(null,'review', i, <%= due_date(@assignment, 'review', 0).to_json %>, <%= questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= assignment_questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>);
}
addDueDateTableElement(null,'metareview',0,<%= due_date(@assignment,'metareview', 0).to_json%>);
due_date_name_column.style.display="none";
due_date_url_column.style.display="none";
}
if (state == true && round_count >1){
//display name and url colomns
for (i =1; i <= round_count; i++) {
removeDueDateTableElement('submission', i);
removeDueDateTableElement('review', i);
}
removeDueDateTableElement('metareview', 0);
for (i =1; i <= round_count; i++) {
addDueDateTableElement(1,'submission', i, <%= due_date(@assignment, 'submission', 0).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>); // or use questionnaire_options(@assignment, nil).to_json
addDueDateTableElement(1,'review',i, <%= due_date(@assignment, 'review', 0).to_json %>, <%= questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= assignment_questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>);
}
addDueDateTableElement(1,'metareview',0,<%= due_date(@assignment,'metareview', 0).to_json%>);
due_date_name_column.removeAttribute("style");
due_date_url_column.removeAttribute("style");
}
else{
return;
}
}

<input name="changenameurl" type="hidden" value="false" />
<%= check_box_tag('changenameurl', 'true', @due_date_nameurl_notempty_checkbox,:onclick=>"handleChangenameurl(this.checked,due_date_name_column,due_date_url_column)" ) %>
<%= label_tag('changenameurl', 'Change name and description url?') %>

In the end corresponding changes should be made in the end of _due_dates.html.erb, after which the webpage will display corresponding contents (hide or display name and url columns according to whether they are empty):

<pre>
<table class='exp' id='due_dates_table' style='padding:10px;min-width: 990px;overflow: hidden;'>
<tr id='due_date_heading'>
...
</tr>
...
<script>
jQuery(document).ready(function () {
<% for i in 1..@assignment.rounds_of_reviews %>
addDueDateTableElement(<%= @due_date_nameurl_notempty %>,'submission', <%=i%>, <%= due_date(@assignment, 'submission', i-1).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>); // or use questionnaire_options(@assignment, nil).to_json
addDueDateTableElement(<%= @due_date_nameurl_notempty %>,'review', <%=i%>, <%= due_date(@assignment, 'review', i-1).to_json %>, <%= questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= assignment_questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>);
<% end %>
addDueDateTableElement(<%= @due_date_nameurl_notempty %>,'metareview', 0, <%= due_date(@assignment, 'metareview').to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>);
//after webpage refreshes, hide or display name and url according to whether names and urls are empty in DB
var due_date_name_column=document.getElementById("due_date_name_column");
var due_date_url_column=document.getElementById("due_date_url_column");
<% if @due_date_nameurl_notempty =="null" %>
due_date_name_column.style.visibility="hidden";
due_date_url_column.style.visibility="hidden";
<% end %>
}());
</script>
</table>
</pre>

=== Case 3: Make slight changes to existing methods/codes ===
==== Current Scenario ====

Existing methods have no enough parameters we want, or they are not returning out results we want.
==== After Changes ====

* Make small changes to them to fit the new methods we write without interfering the previous methods.

==== Exampls ====
The slight changes of functions are small, trivial and less important to readers to understand what we have done. So only examples are shown to convey the ideas, and all the detailed modification can be found at our Github: https:github.com/shaoxq1205/expertiza (on branch production).

Here's the example:
We need to add a round_number for the questionnaire() method in order to make it return different values (actually from different rows of the assignment_questionnaire table) because there're more than 1 rounds now and each round may have different values.
previous method of questionnaire():
<pre>
def questionnaire(assignment, type)
questionnaire = assignment.questionnaires.find_by_type(type)
if questionnaire.nil?
questionnaire = Object.const_get(type).new
questionnaire
else
questionnaire
end
end
</pre>

current method of questionnaire():
<pre>
def questionnaire(assignment, type, round_number)
if round_number.nil?
questionnaire=assignment.questionnaires.find_by_type(type)
else
ass_ques=assignment.assignment_questionnaires.find_by_used_in_round(round_number)
# make sure the assignment_questionnaire record is not empty
if !ass_ques.nil?
temp_num=ass_ques.questionnaire_id
questionnaire = assignment.questionnaires.find_by_id(temp_num)
end
end
if questionnaire.nil?
questionnaire = Object.const_get(type).new
questionnaire
else
questionnaire
end
end
</pre>

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

Scenario 1: An instructor can set the "Review Rubric Varies by Round" for an assignment, and set due dates for all of submissions and reviews, as well as different rubrics would be used

Scenario 2: A student should see the review rubric for 1st round in the other's work link

Scenario 3: The instructor change the due date to start the 2nd round of review

Scenario 4: A student should see the review rubric for 2nd round in the other's work link

=== Codes ===
In app/features/instructor/Vary_Rubrics_by_Round_Test.feature:
<pre>
Scenario1: Instructor can set the review rubric varies by round
Given an instructor named "user6"
And I am logged in as "user6"
@instructor
@manage_assignments
When I move to the "Assignments" page
And I click the "edit" link for "Week 4 wiki"
And I check "Review rubric varies by round?"
And I fill in "2014,11,10" for "Round1 Submission"
And I fill in "2014,11,30" for "Round1 Review"
And I fill in "2014,12,20" for "Round2 Submission"
And I fill in "2014,12,22" for "Round2:Review"
And I use Review Round1 named "update_wiki"
And I use Review Round2"named "rubric1"
Then I press "Save"
@wip
Scenario2: Student should see the review rubric for 1st round
Given I am logged in as a user13
And I move to the "Assignments" page
And I click the "Week 4 wiki" link
When I click the "Others' work" link
Then I should see "update_wiki"
Scenario3: Instructor then change the due date of Round 2, so that the student would see a different review rubric
Given an instructor named "user6"
And I am logged in as "user6"
@instructor
@manage_assignments
When I move to the "Assignments" page
And I click the "edit" link for "Week 4 wiki"
And I fill in "2014,10,10" for "Round1 Submission"
And I fill in "2014,10,22" for "Round1 Review"
And I fill in "2014,11,10" for "Round2 Submission"
And I fill in "2014,12,23" for "Round2:Review"
Then I press "Save"
@wip
Scenario4: Student should see the review rubric for 2st round, which is different from the 1st one
Given I am logged in as a user13
And I move to the "Assignments" page
And I click the "Week 4 wiki" link
When I click the "Others' work" link
Then I should see "rubric1"
</pre>

In app/features/step_definitions/review_rubric_varies_by_round.rb:
<pre>
And /^I click the "edit" link for "Week 4 wiki"$/ do
visit('/assignment/edit/18')
end
And /^I fill in "([^"]*)" for "([^"]*)" $/ do |due_date, deadline|
step "I fill in \"#{due_date}\" for \"due_date\""
step "I fill in \"#{deadline}\" for \"deadline\""
end
And /^I use Review Round1 named "update_wiki" $/ do
step "I select \"update_wiki\" from \"questionnaires[review1]\""
end
And /^I use Review Round1 named "rubric1" $/ do
step "I select \"rubric1\" from \"questionnaires[review2]\""
end
</pre>

== Final Layout ==
Here are the screen shots of the final layouts.
=== Rubrics Tab ===
[[File:Unchecked.png]]
[[File:Checked.png]]

As you can see, a Review rubric varies by round checkbox will make a difference, which makes sense.
=== Due Dates Tab ===
[[File:Due_unchecked.jpg]]
[[File:Due_checked.png]]

As you can see, a Display due_date_names and urls checkbox will make a difference, which makes sense.

== References ==
<references/>

CSC/ECE 517 Fall 2014/OSS E1450 cxm

2014-11-12T22:56:53Z

Xshao2: /* Due Dates Tab */

==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 [http://en.wikipedia.org/wiki/Semantics_(computer_science) semantics]. The syntax of JavaScript is actually derived from [http://en.wikipedia.org/wiki/C_(programming_language) C], while the semantics and design are influenced by [http://en.wikipedia.org/wiki/Self_(programming_language) Self] and [http://en.wikipedia.org/wiki/Scheme_(programming_language) Scheme] programming languages<ref>http://en.wikipedia.org/wiki/JavaScript</ref>. This mix of features makes it a multi-paradigm language, supporting [http://en.wikipedia.org/wiki/Object-oriented_programming object-oriented], [http://en.wikipedia.org/wiki/Imperative_programming imperative], and [http://en.wikipedia.org/wiki/Functional_programming 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 “Rubric” 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

* 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)

* The "deadline_name" and "description URL" could be hidden when you change the status of the checkbox in Due_Date tab

* 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.

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

def edit
...
@reviewvarycheck = nil
@assignment_questionnaires.each do |aq|
if(!(aq.used_in_round.nil?))
@reviewvarycheck = 1
@q_id = aq.questionnaire_id
@qn = Questionnaire.find(@q_id)
if(@qn.display_type.eql?"Review")
@review_check = 1
elsif(@qn.display_type.eql?"Metareview")
@metareview_check=1
elsif(@qn.display_type.eql?"Author Feedback")
@author_check = 1
elsif(@qn.display_type.eql?"Teammate Review")
@teammate_check = 1
end
end
end
...
end

In the _rubrics.html.erb, we added a javascript function to handle the click action:

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.

==== Codes ====
In the assignment_controller.rb, we added a method to check if the name and url are NULL in database to make a decision in the initial display (or after webpage refreshes). If there are contents in the DB, which means someone has typed in some texts, it will display the two columns; on the contrary, it won't display to make the table simpler.:

def edit
...
@due_date_nameurl_notempty = "null"
@due_date_nameurl_notempty_checkbox = false
...
# Add by Xiaoqiang Shao, check if name and url in database is empty before webpage displays
@due_date_all.each do |dd|
if(!(dd.deadline_name.nil?))
if(dd.deadline_name.length>=1)
@due_date_nameurl_notempty = 1
@due_date_nameurl_notempty_checkbox = true
end
end
if(!(dd.description_url.nil?))
if(dd.description_url.length>=1)
@due_date_nameurl_notempty = 1
@due_date_nameurl_notempty_checkbox = true
end
end
end
...
end

And at any time, users can hide/show the two columns by checking the checkbox. Here are the main changes in _due_dates.html.erb:

function handleChangenameurl(checkvalue,due_date_name_column,due_date_url_column) {
var state = checkvalue;
var round_count = <%= @assignment.rounds_of_reviews%>;
if (!document.getElementById) {
return;
}
if (state == false && round_count >1){
//hide name and url colomns
for (i =1; i <= round_count; i++) {
removeDueDateTableElement('submission', i);
removeDueDateTableElement('review', i);
}
removeDueDateTableElement('metareview', 0);
for (i =1; i <= round_count; i++) {
addDueDateTableElement(null,'submission',i, <%= due_date(@assignment, 'submission', 0).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>); // or use questionnaire_options(@assignment, nil).to_json
addDueDateTableElement(null,'review', i, <%= due_date(@assignment, 'review', 0).to_json %>, <%= questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= assignment_questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>);
}
addDueDateTableElement(null,'metareview',0,<%= due_date(@assignment,'metareview', 0).to_json%>);
due_date_name_column.style.display="none";
due_date_url_column.style.display="none";
}
if (state == true && round_count >1){
//display name and url colomns
for (i =1; i <= round_count; i++) {
removeDueDateTableElement('submission', i);
removeDueDateTableElement('review', i);
}
removeDueDateTableElement('metareview', 0);
for (i =1; i <= round_count; i++) {
addDueDateTableElement(1,'submission', i, <%= due_date(@assignment, 'submission', 0).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>); // or use questionnaire_options(@assignment, nil).to_json
addDueDateTableElement(1,'review',i, <%= due_date(@assignment, 'review', 0).to_json %>, <%= questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= assignment_questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>);
}
addDueDateTableElement(1,'metareview',0,<%= due_date(@assignment,'metareview', 0).to_json%>);
due_date_name_column.removeAttribute("style");
due_date_url_column.removeAttribute("style");
}
else{
return;
}
}

<input name="changenameurl" type="hidden" value="false" />
<%= check_box_tag('changenameurl', 'true', @due_date_nameurl_notempty_checkbox,:onclick=>"handleChangenameurl(this.checked,due_date_name_column,due_date_url_column)" ) %>
<%= label_tag('changenameurl', 'Change name and description url?') %>

In the end corresponding changes should be made in the end of _due_dates.html.erb, after which the webpage will display corresponding contents (hide or display name and url columns according to whether they are empty):

<pre>
<table class='exp' id='due_dates_table' style='padding:10px;min-width: 990px;overflow: hidden;'>
<tr id='due_date_heading'>
...
</tr>
...
<script>
jQuery(document).ready(function () {
<% for i in 1..@assignment.rounds_of_reviews %>
addDueDateTableElement(<%= @due_date_nameurl_notempty %>,'submission', <%=i%>, <%= due_date(@assignment, 'submission', i-1).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>); // or use questionnaire_options(@assignment, nil).to_json
addDueDateTableElement(<%= @due_date_nameurl_notempty %>,'review', <%=i%>, <%= due_date(@assignment, 'review', i-1).to_json %>, <%= questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= assignment_questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>);
<% end %>
addDueDateTableElement(<%= @due_date_nameurl_notempty %>,'metareview', 0, <%= due_date(@assignment, 'metareview').to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>);
//after webpage refreshes, hide or display name and url according to whether names and urls are empty in DB
var due_date_name_column=document.getElementById("due_date_name_column");
var due_date_url_column=document.getElementById("due_date_url_column");
<% if @due_date_nameurl_notempty =="null" %>
due_date_name_column.style.visibility="hidden";
due_date_url_column.style.visibility="hidden";
<% end %>
}());
</script>
</table>
</pre>

=== Case 3: Make slight changes to existing methods/codes ===
==== Current Scenario ====

Existing methods have no enough parameters we want, or they are not returning out results we want.
==== After Changes ====

* Make small changes to them to fit the new methods we write without interfering the previous methods.

==== Exampls ====
The slight changes of functions are small, trivial and less important to readers to understand what we have done. So only examples are shown to convey the ideas, and all the detailed modification can be found at our Github: https:github.com/shaoxq1205/expertiza (on branch production).

Here's the example:
We need to add a round_number for the questionnaire() method in order to make it return different values (actually from different rows of the assignment_questionnaire table) because there're more than 1 rounds now and each round may have different values.
previous method of questionnaire():
<pre>
def questionnaire(assignment, type)
questionnaire = assignment.questionnaires.find_by_type(type)
if questionnaire.nil?
questionnaire = Object.const_get(type).new
questionnaire
else
questionnaire
end
end
</pre>

current method of questionnaire():
<pre>
def questionnaire(assignment, type, round_number)
if round_number.nil?
questionnaire=assignment.questionnaires.find_by_type(type)
else
ass_ques=assignment.assignment_questionnaires.find_by_used_in_round(round_number)
# make sure the assignment_questionnaire record is not empty
if !ass_ques.nil?
temp_num=ass_ques.questionnaire_id
questionnaire = assignment.questionnaires.find_by_id(temp_num)
end
end
if questionnaire.nil?
questionnaire = Object.const_get(type).new
questionnaire
else
questionnaire
end
end
</pre>

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

Scenario 1: An instructor can set the "Review Rubric Varies by Round" for an assignment, and set due dates for all of submissions and reviews, as well as different rubrics would be used

Scenario 2: A student should see the review rubric for 1st round in the other's work link

Scenario 3: The instructor change the due date to start the 2nd round of review

Scenario 4: A student should see the review rubric for 2nd round in the other's work link

=== Codes ===
In app/features/instructor/Vary_Rubrics_by_Round_Test.feature:
<pre>
Scenario1: Instructor can set the review rubric varies by round
Given an instructor named "user6"
And I am logged in as "user6"
@instructor
@manage_assignments
When I move to the "Assignments" page
And I click the "edit" link for "Week 4 wiki"
And I check "Review rubric varies by round?"
And I fill in "2014,11,10" for "Round1 Submission"
And I fill in "2014,11,30" for "Round1 Review"
And I fill in "2014,12,20" for "Round2 Submission"
And I fill in "2014,12,22" for "Round2:Review"
And I use Review Round1 named "update_wiki"
And I use Review Round2"named "rubric1"
Then I press "Save"
@wip
Scenario2: Student should see the review rubric for 1st round
Given I am logged in as a user13
And I move to the "Assignments" page
And I click the "Week 4 wiki" link
When I click the "Others' work" link
Then I should see "update_wiki"
Scenario3: Instructor then change the due date of Round 2, so that the student would see a different review rubric
Given an instructor named "user6"
And I am logged in as "user6"
@instructor
@manage_assignments
When I move to the "Assignments" page
And I click the "edit" link for "Week 4 wiki"
And I fill in "2014,10,10" for "Round1 Submission"
And I fill in "2014,10,22" for "Round1 Review"
And I fill in "2014,11,10" for "Round2 Submission"
And I fill in "2014,12,23" for "Round2:Review"
Then I press "Save"
@wip
Scenario4: Student should see the review rubric for 2st round, which is different from the 1st one
Given I am logged in as a user13
And I move to the "Assignments" page
And I click the "Week 4 wiki" link
When I click the "Others' work" link
Then I should see "rubric1"
</pre>

In app/features/step_definitions/review_rubric_varies_by_round.rb:
<pre>
And /^I click the "edit" link for "Week 4 wiki"$/ do
visit('/assignment/edit/18')
end
And /^I fill in "([^"]*)" for "([^"]*)" $/ do |due_date, deadline|
step "I fill in \"#{due_date}\" for \"due_date\""
step "I fill in \"#{deadline}\" for \"deadline\""
end
And /^I use Review Round1 named "update_wiki" $/ do
step "I select \"update_wiki\" from \"questionnaires[review1]\""
end
And /^I use Review Round1 named "rubric1" $/ do
step "I select \"rubric1\" from \"questionnaires[review2]\""
end
</pre>

== Final Layout ==
Here are the screen shots of the final layouts.
=== Rubrics Tab ===
[[File:Checked.png]]
[[File:Unchecked.png]]
As you can see, a Review rubric varies by round checkbox will make a difference, which makes sense.
=== Due Dates Tab ===
[[File:Due_checked.png]]
[[File:Due_unchecked.jpg]]
As you can see, a Display due_date_names and urls checkbox will make a difference, which makes sense.

== References ==
<references/>

CSC/ECE 517 Fall 2014/OSS E1450 cxm

2014-11-12T22:56:04Z

Xshao2: /* Final Layout */

==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 [http://en.wikipedia.org/wiki/Semantics_(computer_science) semantics]. The syntax of JavaScript is actually derived from [http://en.wikipedia.org/wiki/C_(programming_language) C], while the semantics and design are influenced by [http://en.wikipedia.org/wiki/Self_(programming_language) Self] and [http://en.wikipedia.org/wiki/Scheme_(programming_language) Scheme] programming languages<ref>http://en.wikipedia.org/wiki/JavaScript</ref>. This mix of features makes it a multi-paradigm language, supporting [http://en.wikipedia.org/wiki/Object-oriented_programming object-oriented], [http://en.wikipedia.org/wiki/Imperative_programming imperative], and [http://en.wikipedia.org/wiki/Functional_programming 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 “Rubric” 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

* 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)

* The "deadline_name" and "description URL" could be hidden when you change the status of the checkbox in Due_Date tab

* 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.

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

def edit
...
@reviewvarycheck = nil
@assignment_questionnaires.each do |aq|
if(!(aq.used_in_round.nil?))
@reviewvarycheck = 1
@q_id = aq.questionnaire_id
@qn = Questionnaire.find(@q_id)
if(@qn.display_type.eql?"Review")
@review_check = 1
elsif(@qn.display_type.eql?"Metareview")
@metareview_check=1
elsif(@qn.display_type.eql?"Author Feedback")
@author_check = 1
elsif(@qn.display_type.eql?"Teammate Review")
@teammate_check = 1
end
end
end
...
end

In the _rubrics.html.erb, we added a javascript function to handle the click action:

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.

==== Codes ====
In the assignment_controller.rb, we added a method to check if the name and url are NULL in database to make a decision in the initial display (or after webpage refreshes). If there are contents in the DB, which means someone has typed in some texts, it will display the two columns; on the contrary, it won't display to make the table simpler.:

def edit
...
@due_date_nameurl_notempty = "null"
@due_date_nameurl_notempty_checkbox = false
...
# Add by Xiaoqiang Shao, check if name and url in database is empty before webpage displays
@due_date_all.each do |dd|
if(!(dd.deadline_name.nil?))
if(dd.deadline_name.length>=1)
@due_date_nameurl_notempty = 1
@due_date_nameurl_notempty_checkbox = true
end
end
if(!(dd.description_url.nil?))
if(dd.description_url.length>=1)
@due_date_nameurl_notempty = 1
@due_date_nameurl_notempty_checkbox = true
end
end
end
...
end

And at any time, users can hide/show the two columns by checking the checkbox. Here are the main changes in _due_dates.html.erb:

function handleChangenameurl(checkvalue,due_date_name_column,due_date_url_column) {
var state = checkvalue;
var round_count = <%= @assignment.rounds_of_reviews%>;
if (!document.getElementById) {
return;
}
if (state == false && round_count >1){
//hide name and url colomns
for (i =1; i <= round_count; i++) {
removeDueDateTableElement('submission', i);
removeDueDateTableElement('review', i);
}
removeDueDateTableElement('metareview', 0);
for (i =1; i <= round_count; i++) {
addDueDateTableElement(null,'submission',i, <%= due_date(@assignment, 'submission', 0).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>); // or use questionnaire_options(@assignment, nil).to_json
addDueDateTableElement(null,'review', i, <%= due_date(@assignment, 'review', 0).to_json %>, <%= questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= assignment_questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>);
}
addDueDateTableElement(null,'metareview',0,<%= due_date(@assignment,'metareview', 0).to_json%>);
due_date_name_column.style.display="none";
due_date_url_column.style.display="none";
}
if (state == true && round_count >1){
//display name and url colomns
for (i =1; i <= round_count; i++) {
removeDueDateTableElement('submission', i);
removeDueDateTableElement('review', i);
}
removeDueDateTableElement('metareview', 0);
for (i =1; i <= round_count; i++) {
addDueDateTableElement(1,'submission', i, <%= due_date(@assignment, 'submission', 0).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>); // or use questionnaire_options(@assignment, nil).to_json
addDueDateTableElement(1,'review',i, <%= due_date(@assignment, 'review', 0).to_json %>, <%= questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= assignment_questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>);
}
addDueDateTableElement(1,'metareview',0,<%= due_date(@assignment,'metareview', 0).to_json%>);
due_date_name_column.removeAttribute("style");
due_date_url_column.removeAttribute("style");
}
else{
return;
}
}

<input name="changenameurl" type="hidden" value="false" />
<%= check_box_tag('changenameurl', 'true', @due_date_nameurl_notempty_checkbox,:onclick=>"handleChangenameurl(this.checked,due_date_name_column,due_date_url_column)" ) %>
<%= label_tag('changenameurl', 'Change name and description url?') %>

In the end corresponding changes should be made in the end of _due_dates.html.erb, after which the webpage will display corresponding contents (hide or display name and url columns according to whether they are empty):

<pre>
<table class='exp' id='due_dates_table' style='padding:10px;min-width: 990px;overflow: hidden;'>
<tr id='due_date_heading'>
...
</tr>
...
<script>
jQuery(document).ready(function () {
<% for i in 1..@assignment.rounds_of_reviews %>
addDueDateTableElement(<%= @due_date_nameurl_notempty %>,'submission', <%=i%>, <%= due_date(@assignment, 'submission', i-1).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>); // or use questionnaire_options(@assignment, nil).to_json
addDueDateTableElement(<%= @due_date_nameurl_notempty %>,'review', <%=i%>, <%= due_date(@assignment, 'review', i-1).to_json %>, <%= questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= assignment_questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>);
<% end %>
addDueDateTableElement(<%= @due_date_nameurl_notempty %>,'metareview', 0, <%= due_date(@assignment, 'metareview').to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>);
//after webpage refreshes, hide or display name and url according to whether names and urls are empty in DB
var due_date_name_column=document.getElementById("due_date_name_column");
var due_date_url_column=document.getElementById("due_date_url_column");
<% if @due_date_nameurl_notempty =="null" %>
due_date_name_column.style.visibility="hidden";
due_date_url_column.style.visibility="hidden";
<% end %>
}());
</script>
</table>
</pre>

=== Case 3: Make slight changes to existing methods/codes ===
==== Current Scenario ====

Existing methods have no enough parameters we want, or they are not returning out results we want.
==== After Changes ====

* Make small changes to them to fit the new methods we write without interfering the previous methods.

==== Exampls ====
The slight changes of functions are small, trivial and less important to readers to understand what we have done. So only examples are shown to convey the ideas, and all the detailed modification can be found at our Github: https:github.com/shaoxq1205/expertiza (on branch production).

Here's the example:
We need to add a round_number for the questionnaire() method in order to make it return different values (actually from different rows of the assignment_questionnaire table) because there're more than 1 rounds now and each round may have different values.
previous method of questionnaire():
<pre>
def questionnaire(assignment, type)
questionnaire = assignment.questionnaires.find_by_type(type)
if questionnaire.nil?
questionnaire = Object.const_get(type).new
questionnaire
else
questionnaire
end
end
</pre>

current method of questionnaire():
<pre>
def questionnaire(assignment, type, round_number)
if round_number.nil?
questionnaire=assignment.questionnaires.find_by_type(type)
else
ass_ques=assignment.assignment_questionnaires.find_by_used_in_round(round_number)
# make sure the assignment_questionnaire record is not empty
if !ass_ques.nil?
temp_num=ass_ques.questionnaire_id
questionnaire = assignment.questionnaires.find_by_id(temp_num)
end
end
if questionnaire.nil?
questionnaire = Object.const_get(type).new
questionnaire
else
questionnaire
end
end
</pre>

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

Scenario 1: An instructor can set the "Review Rubric Varies by Round" for an assignment, and set due dates for all of submissions and reviews, as well as different rubrics would be used

Scenario 2: A student should see the review rubric for 1st round in the other's work link

Scenario 3: The instructor change the due date to start the 2nd round of review

Scenario 4: A student should see the review rubric for 2nd round in the other's work link

=== Codes ===
In app/features/instructor/Vary_Rubrics_by_Round_Test.feature:
<pre>
Scenario1: Instructor can set the review rubric varies by round
Given an instructor named "user6"
And I am logged in as "user6"
@instructor
@manage_assignments
When I move to the "Assignments" page
And I click the "edit" link for "Week 4 wiki"
And I check "Review rubric varies by round?"
And I fill in "2014,11,10" for "Round1 Submission"
And I fill in "2014,11,30" for "Round1 Review"
And I fill in "2014,12,20" for "Round2 Submission"
And I fill in "2014,12,22" for "Round2:Review"
And I use Review Round1 named "update_wiki"
And I use Review Round2"named "rubric1"
Then I press "Save"
@wip
Scenario2: Student should see the review rubric for 1st round
Given I am logged in as a user13
And I move to the "Assignments" page
And I click the "Week 4 wiki" link
When I click the "Others' work" link
Then I should see "update_wiki"
Scenario3: Instructor then change the due date of Round 2, so that the student would see a different review rubric
Given an instructor named "user6"
And I am logged in as "user6"
@instructor
@manage_assignments
When I move to the "Assignments" page
And I click the "edit" link for "Week 4 wiki"
And I fill in "2014,10,10" for "Round1 Submission"
And I fill in "2014,10,22" for "Round1 Review"
And I fill in "2014,11,10" for "Round2 Submission"
And I fill in "2014,12,23" for "Round2:Review"
Then I press "Save"
@wip
Scenario4: Student should see the review rubric for 2st round, which is different from the 1st one
Given I am logged in as a user13
And I move to the "Assignments" page
And I click the "Week 4 wiki" link
When I click the "Others' work" link
Then I should see "rubric1"
</pre>

In app/features/step_definitions/review_rubric_varies_by_round.rb:
<pre>
And /^I click the "edit" link for "Week 4 wiki"$/ do
visit('/assignment/edit/18')
end
And /^I fill in "([^"]*)" for "([^"]*)" $/ do |due_date, deadline|
step "I fill in \"#{due_date}\" for \"due_date\""
step "I fill in \"#{deadline}\" for \"deadline\""
end
And /^I use Review Round1 named "update_wiki" $/ do
step "I select \"update_wiki\" from \"questionnaires[review1]\""
end
And /^I use Review Round1 named "rubric1" $/ do
step "I select \"rubric1\" from \"questionnaires[review2]\""
end
</pre>

== Final Layout ==
Here are the screen shots of the final layouts.
=== Rubrics Tab ===
[[File:Checked.png]]
[[File:Unchecked.png]]
As you can see, a Review rubric varies by round checkbox will make a difference, which makes sense.
=== Due Dates Tab ===
[[File:Due_checked.png]]
[[File:Due_unchecked.png]]
As you can see, a Display due_date_names and urls checkbox will make a difference, which makes sense.

== References ==
<references/>

File:Unchecked.png

2014-11-12T22:55:00Z

Xshao2:

File:Due unchecked.jpg

2014-11-12T22:54:50Z

Xshao2:

File:Due checked.png

2014-11-12T22:54:39Z

Xshao2:

File:Checked.png

2014-11-12T22:54:20Z

Xshao2:

CSC/ECE 517 Fall 2014/OSS E1450 cxm

2014-11-12T22:50:59Z

Xshao2: /* Cucumber Tests */

==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 [http://en.wikipedia.org/wiki/Semantics_(computer_science) semantics]. The syntax of JavaScript is actually derived from [http://en.wikipedia.org/wiki/C_(programming_language) C], while the semantics and design are influenced by [http://en.wikipedia.org/wiki/Self_(programming_language) Self] and [http://en.wikipedia.org/wiki/Scheme_(programming_language) Scheme] programming languages<ref>http://en.wikipedia.org/wiki/JavaScript</ref>. This mix of features makes it a multi-paradigm language, supporting [http://en.wikipedia.org/wiki/Object-oriented_programming object-oriented], [http://en.wikipedia.org/wiki/Imperative_programming imperative], and [http://en.wikipedia.org/wiki/Functional_programming 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 “Rubric” 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

* 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)

* The "deadline_name" and "description URL" could be hidden when you change the status of the checkbox in Due_Date tab

* 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.

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

def edit
...
@reviewvarycheck = nil
@assignment_questionnaires.each do |aq|
if(!(aq.used_in_round.nil?))
@reviewvarycheck = 1
@q_id = aq.questionnaire_id
@qn = Questionnaire.find(@q_id)
if(@qn.display_type.eql?"Review")
@review_check = 1
elsif(@qn.display_type.eql?"Metareview")
@metareview_check=1
elsif(@qn.display_type.eql?"Author Feedback")
@author_check = 1
elsif(@qn.display_type.eql?"Teammate Review")
@teammate_check = 1
end
end
end
...
end

In the _rubrics.html.erb, we added a javascript function to handle the click action:

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.

==== Codes ====
In the assignment_controller.rb, we added a method to check if the name and url are NULL in database to make a decision in the initial display (or after webpage refreshes). If there are contents in the DB, which means someone has typed in some texts, it will display the two columns; on the contrary, it won't display to make the table simpler.:

def edit
...
@due_date_nameurl_notempty = "null"
@due_date_nameurl_notempty_checkbox = false
...
# Add by Xiaoqiang Shao, check if name and url in database is empty before webpage displays
@due_date_all.each do |dd|
if(!(dd.deadline_name.nil?))
if(dd.deadline_name.length>=1)
@due_date_nameurl_notempty = 1
@due_date_nameurl_notempty_checkbox = true
end
end
if(!(dd.description_url.nil?))
if(dd.description_url.length>=1)
@due_date_nameurl_notempty = 1
@due_date_nameurl_notempty_checkbox = true
end
end
end
...
end

And at any time, users can hide/show the two columns by checking the checkbox. Here are the main changes in _due_dates.html.erb:

function handleChangenameurl(checkvalue,due_date_name_column,due_date_url_column) {
var state = checkvalue;
var round_count = <%= @assignment.rounds_of_reviews%>;
if (!document.getElementById) {
return;
}
if (state == false && round_count >1){
//hide name and url colomns
for (i =1; i <= round_count; i++) {
removeDueDateTableElement('submission', i);
removeDueDateTableElement('review', i);
}
removeDueDateTableElement('metareview', 0);
for (i =1; i <= round_count; i++) {
addDueDateTableElement(null,'submission',i, <%= due_date(@assignment, 'submission', 0).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>); // or use questionnaire_options(@assignment, nil).to_json
addDueDateTableElement(null,'review', i, <%= due_date(@assignment, 'review', 0).to_json %>, <%= questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= assignment_questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>);
}
addDueDateTableElement(null,'metareview',0,<%= due_date(@assignment,'metareview', 0).to_json%>);
due_date_name_column.style.display="none";
due_date_url_column.style.display="none";
}
if (state == true && round_count >1){
//display name and url colomns
for (i =1; i <= round_count; i++) {
removeDueDateTableElement('submission', i);
removeDueDateTableElement('review', i);
}
removeDueDateTableElement('metareview', 0);
for (i =1; i <= round_count; i++) {
addDueDateTableElement(1,'submission', i, <%= due_date(@assignment, 'submission', 0).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>); // or use questionnaire_options(@assignment, nil).to_json
addDueDateTableElement(1,'review',i, <%= due_date(@assignment, 'review', 0).to_json %>, <%= questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= assignment_questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>);
}
addDueDateTableElement(1,'metareview',0,<%= due_date(@assignment,'metareview', 0).to_json%>);
due_date_name_column.removeAttribute("style");
due_date_url_column.removeAttribute("style");
}
else{
return;
}
}

<input name="changenameurl" type="hidden" value="false" />
<%= check_box_tag('changenameurl', 'true', @due_date_nameurl_notempty_checkbox,:onclick=>"handleChangenameurl(this.checked,due_date_name_column,due_date_url_column)" ) %>
<%= label_tag('changenameurl', 'Change name and description url?') %>

In the end corresponding changes should be made in the end of _due_dates.html.erb, after which the webpage will display corresponding contents (hide or display name and url columns according to whether they are empty):

<pre>
<table class='exp' id='due_dates_table' style='padding:10px;min-width: 990px;overflow: hidden;'>
<tr id='due_date_heading'>
...
</tr>
...
<script>
jQuery(document).ready(function () {
<% for i in 1..@assignment.rounds_of_reviews %>
addDueDateTableElement(<%= @due_date_nameurl_notempty %>,'submission', <%=i%>, <%= due_date(@assignment, 'submission', i-1).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>); // or use questionnaire_options(@assignment, nil).to_json
addDueDateTableElement(<%= @due_date_nameurl_notempty %>,'review', <%=i%>, <%= due_date(@assignment, 'review', i-1).to_json %>, <%= questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= assignment_questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>);
<% end %>
addDueDateTableElement(<%= @due_date_nameurl_notempty %>,'metareview', 0, <%= due_date(@assignment, 'metareview').to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>);
//after webpage refreshes, hide or display name and url according to whether names and urls are empty in DB
var due_date_name_column=document.getElementById("due_date_name_column");
var due_date_url_column=document.getElementById("due_date_url_column");
<% if @due_date_nameurl_notempty =="null" %>
due_date_name_column.style.visibility="hidden";
due_date_url_column.style.visibility="hidden";
<% end %>
}());
</script>
</table>
</pre>

=== Case 3: Make slight changes to existing methods/codes ===
==== Current Scenario ====

Existing methods have no enough parameters we want, or they are not returning out results we want.
==== After Changes ====

* Make small changes to them to fit the new methods we write without interfering the previous methods.

==== Exampls ====
The slight changes of functions are small, trivial and less important to readers to understand what we have done. So only examples are shown to convey the ideas, and all the detailed modification can be found at our Github: https:github.com/shaoxq1205/expertiza (on branch production).

Here's the example:
We need to add a round_number for the questionnaire() method in order to make it return different values (actually from different rows of the assignment_questionnaire table) because there're more than 1 rounds now and each round may have different values.
previous method of questionnaire():
<pre>
def questionnaire(assignment, type)
questionnaire = assignment.questionnaires.find_by_type(type)
if questionnaire.nil?
questionnaire = Object.const_get(type).new
questionnaire
else
questionnaire
end
end
</pre>

current method of questionnaire():
<pre>
def questionnaire(assignment, type, round_number)
if round_number.nil?
questionnaire=assignment.questionnaires.find_by_type(type)
else
ass_ques=assignment.assignment_questionnaires.find_by_used_in_round(round_number)
# make sure the assignment_questionnaire record is not empty
if !ass_ques.nil?
temp_num=ass_ques.questionnaire_id
questionnaire = assignment.questionnaires.find_by_id(temp_num)
end
end
if questionnaire.nil?
questionnaire = Object.const_get(type).new
questionnaire
else
questionnaire
end
end
</pre>

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

Scenario 1: An instructor can set the "Review Rubric Varies by Round" for an assignment, and set due dates for all of submissions and reviews, as well as different rubrics would be used

Scenario 2: A student should see the review rubric for 1st round in the other's work link

Scenario 3: The instructor change the due date to start the 2nd round of review

Scenario 4: A student should see the review rubric for 2nd round in the other's work link

=== Codes ===
In app/features/instructor/Vary_Rubrics_by_Round_Test.feature:
<pre>
Scenario1: Instructor can set the review rubric varies by round
Given an instructor named "user6"
And I am logged in as "user6"
@instructor
@manage_assignments
When I move to the "Assignments" page
And I click the "edit" link for "Week 4 wiki"
And I check "Review rubric varies by round?"
And I fill in "2014,11,10" for "Round1 Submission"
And I fill in "2014,11,30" for "Round1 Review"
And I fill in "2014,12,20" for "Round2 Submission"
And I fill in "2014,12,22" for "Round2:Review"
And I use Review Round1 named "update_wiki"
And I use Review Round2"named "rubric1"
Then I press "Save"
@wip
Scenario2: Student should see the review rubric for 1st round
Given I am logged in as a user13
And I move to the "Assignments" page
And I click the "Week 4 wiki" link
When I click the "Others' work" link
Then I should see "update_wiki"
Scenario3: Instructor then change the due date of Round 2, so that the student would see a different review rubric
Given an instructor named "user6"
And I am logged in as "user6"
@instructor
@manage_assignments
When I move to the "Assignments" page
And I click the "edit" link for "Week 4 wiki"
And I fill in "2014,10,10" for "Round1 Submission"
And I fill in "2014,10,22" for "Round1 Review"
And I fill in "2014,11,10" for "Round2 Submission"
And I fill in "2014,12,23" for "Round2:Review"
Then I press "Save"
@wip
Scenario4: Student should see the review rubric for 2st round, which is different from the 1st one
Given I am logged in as a user13
And I move to the "Assignments" page
And I click the "Week 4 wiki" link
When I click the "Others' work" link
Then I should see "rubric1"
</pre>

In app/features/step_definitions/review_rubric_varies_by_round.rb:
<pre>
And /^I click the "edit" link for "Week 4 wiki"$/ do
visit('/assignment/edit/18')
end
And /^I fill in "([^"]*)" for "([^"]*)" $/ do |due_date, deadline|
step "I fill in \"#{due_date}\" for \"due_date\""
step "I fill in \"#{deadline}\" for \"deadline\""
end
And /^I use Review Round1 named "update_wiki" $/ do
step "I select \"update_wiki\" from \"questionnaires[review1]\""
end
And /^I use Review Round1 named "rubric1" $/ do
step "I select \"rubric1\" from \"questionnaires[review2]\""
end
</pre>

== Final Layout ==
Here are the screen shots of the final layouts.
=== Rubrics Tab ===
As you can see, a Review rubric varies by round checkbox will make a difference, which makes sense.
=== Due Dates Tab ===
As you can see, a Display due_date_names and urls checkbox will make a difference, which makes sense.

== References ==
<references/>

CSC/ECE 517 Fall 2014/OSS E1450 cxm

2014-11-12T22:46:58Z

Xshao2: /* Cucumber Tests */

==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 [http://en.wikipedia.org/wiki/Semantics_(computer_science) semantics]. The syntax of JavaScript is actually derived from [http://en.wikipedia.org/wiki/C_(programming_language) C], while the semantics and design are influenced by [http://en.wikipedia.org/wiki/Self_(programming_language) Self] and [http://en.wikipedia.org/wiki/Scheme_(programming_language) Scheme] programming languages<ref>http://en.wikipedia.org/wiki/JavaScript</ref>. This mix of features makes it a multi-paradigm language, supporting [http://en.wikipedia.org/wiki/Object-oriented_programming object-oriented], [http://en.wikipedia.org/wiki/Imperative_programming imperative], and [http://en.wikipedia.org/wiki/Functional_programming 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 “Rubric” 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

* 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)

* The "deadline_name" and "description URL" could be hidden when you change the status of the checkbox in Due_Date tab

* 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.

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

def edit
...
@reviewvarycheck = nil
@assignment_questionnaires.each do |aq|
if(!(aq.used_in_round.nil?))
@reviewvarycheck = 1
@q_id = aq.questionnaire_id
@qn = Questionnaire.find(@q_id)
if(@qn.display_type.eql?"Review")
@review_check = 1
elsif(@qn.display_type.eql?"Metareview")
@metareview_check=1
elsif(@qn.display_type.eql?"Author Feedback")
@author_check = 1
elsif(@qn.display_type.eql?"Teammate Review")
@teammate_check = 1
end
end
end
...
end

In the _rubrics.html.erb, we added a javascript function to handle the click action:

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.

==== Codes ====
In the assignment_controller.rb, we added a method to check if the name and url are NULL in database to make a decision in the initial display (or after webpage refreshes). If there are contents in the DB, which means someone has typed in some texts, it will display the two columns; on the contrary, it won't display to make the table simpler.:

def edit
...
@due_date_nameurl_notempty = "null"
@due_date_nameurl_notempty_checkbox = false
...
# Add by Xiaoqiang Shao, check if name and url in database is empty before webpage displays
@due_date_all.each do |dd|
if(!(dd.deadline_name.nil?))
if(dd.deadline_name.length>=1)
@due_date_nameurl_notempty = 1
@due_date_nameurl_notempty_checkbox = true
end
end
if(!(dd.description_url.nil?))
if(dd.description_url.length>=1)
@due_date_nameurl_notempty = 1
@due_date_nameurl_notempty_checkbox = true
end
end
end
...
end

And at any time, users can hide/show the two columns by checking the checkbox. Here are the main changes in _due_dates.html.erb:

function handleChangenameurl(checkvalue,due_date_name_column,due_date_url_column) {
var state = checkvalue;
var round_count = <%= @assignment.rounds_of_reviews%>;
if (!document.getElementById) {
return;
}
if (state == false && round_count >1){
//hide name and url colomns
for (i =1; i <= round_count; i++) {
removeDueDateTableElement('submission', i);
removeDueDateTableElement('review', i);
}
removeDueDateTableElement('metareview', 0);
for (i =1; i <= round_count; i++) {
addDueDateTableElement(null,'submission',i, <%= due_date(@assignment, 'submission', 0).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>); // or use questionnaire_options(@assignment, nil).to_json
addDueDateTableElement(null,'review', i, <%= due_date(@assignment, 'review', 0).to_json %>, <%= questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= assignment_questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>);
}
addDueDateTableElement(null,'metareview',0,<%= due_date(@assignment,'metareview', 0).to_json%>);
due_date_name_column.style.display="none";
due_date_url_column.style.display="none";
}
if (state == true && round_count >1){
//display name and url colomns
for (i =1; i <= round_count; i++) {
removeDueDateTableElement('submission', i);
removeDueDateTableElement('review', i);
}
removeDueDateTableElement('metareview', 0);
for (i =1; i <= round_count; i++) {
addDueDateTableElement(1,'submission', i, <%= due_date(@assignment, 'submission', 0).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>); // or use questionnaire_options(@assignment, nil).to_json
addDueDateTableElement(1,'review',i, <%= due_date(@assignment, 'review', 0).to_json %>, <%= questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= assignment_questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>);
}
addDueDateTableElement(1,'metareview',0,<%= due_date(@assignment,'metareview', 0).to_json%>);
due_date_name_column.removeAttribute("style");
due_date_url_column.removeAttribute("style");
}
else{
return;
}
}

<input name="changenameurl" type="hidden" value="false" />
<%= check_box_tag('changenameurl', 'true', @due_date_nameurl_notempty_checkbox,:onclick=>"handleChangenameurl(this.checked,due_date_name_column,due_date_url_column)" ) %>
<%= label_tag('changenameurl', 'Change name and description url?') %>

In the end corresponding changes should be made in the end of _due_dates.html.erb, after which the webpage will display corresponding contents (hide or display name and url columns according to whether they are empty):

<pre>
<table class='exp' id='due_dates_table' style='padding:10px;min-width: 990px;overflow: hidden;'>
<tr id='due_date_heading'>
...
</tr>
...
<script>
jQuery(document).ready(function () {
<% for i in 1..@assignment.rounds_of_reviews %>
addDueDateTableElement(<%= @due_date_nameurl_notempty %>,'submission', <%=i%>, <%= due_date(@assignment, 'submission', i-1).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>); // or use questionnaire_options(@assignment, nil).to_json
addDueDateTableElement(<%= @due_date_nameurl_notempty %>,'review', <%=i%>, <%= due_date(@assignment, 'review', i-1).to_json %>, <%= questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= assignment_questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>);
<% end %>
addDueDateTableElement(<%= @due_date_nameurl_notempty %>,'metareview', 0, <%= due_date(@assignment, 'metareview').to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>);
//after webpage refreshes, hide or display name and url according to whether names and urls are empty in DB
var due_date_name_column=document.getElementById("due_date_name_column");
var due_date_url_column=document.getElementById("due_date_url_column");
<% if @due_date_nameurl_notempty =="null" %>
due_date_name_column.style.visibility="hidden";
due_date_url_column.style.visibility="hidden";
<% end %>
}());
</script>
</table>
</pre>

=== Case 3: Make slight changes to existing methods/codes ===
==== Current Scenario ====

Existing methods have no enough parameters we want, or they are not returning out results we want.
==== After Changes ====

* Make small changes to them to fit the new methods we write without interfering the previous methods.

==== Exampls ====
The slight changes of functions are small, trivial and less important to readers to understand what we have done. So only examples are shown to convey the ideas, and all the detailed modification can be found at our Github: https:github.com/shaoxq1205/expertiza (on branch production).

Here's the example:
We need to add a round_number for the questionnaire() method in order to make it return different values (actually from different rows of the assignment_questionnaire table) because there're more than 1 rounds now and each round may have different values.
previous method of questionnaire():
<pre>
def questionnaire(assignment, type)
questionnaire = assignment.questionnaires.find_by_type(type)
if questionnaire.nil?
questionnaire = Object.const_get(type).new
questionnaire
else
questionnaire
end
end
</pre>

current method of questionnaire():
<pre>
def questionnaire(assignment, type, round_number)
if round_number.nil?
questionnaire=assignment.questionnaires.find_by_type(type)
else
ass_ques=assignment.assignment_questionnaires.find_by_used_in_round(round_number)
# make sure the assignment_questionnaire record is not empty
if !ass_ques.nil?
temp_num=ass_ques.questionnaire_id
questionnaire = assignment.questionnaires.find_by_id(temp_num)
end
end
if questionnaire.nil?
questionnaire = Object.const_get(type).new
questionnaire
else
questionnaire
end
end
</pre>

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

Scenario 1: An instructor can set the "Review Rubric Varies by Round" for an assignment, and set due dates for all of submissions and reviews, as well as different rubrics would be used

Scenario 2: A student should see the review rubric for 1st round in the other's work link

Scenario 3: The instructor change the due date to start the 2nd round of review

Scenario 4: A student should see the review rubric for 2nd round in the other's work link

=== Codes ===
In app/features/instructor/Vary_Rubrics_by_Round_Test.feature:
<pre>
Scenario1: Instructor can set the review rubric varies by round
Given an instructor named "user6"
And I am logged in as "user6"
@instructor
@manage_assignments
When I move to the "Assignments" page
And I click the "edit" link for "Week 4 wiki"
And I check "Review rubric varies by round?"
And I fill in "2014,11,10" for "Round1 Submission"
And I fill in "2014,11,30" for "Round1 Review"
And I fill in "2014,12,20" for "Round2 Submission"
And I fill in "2014,12,22" for "Round2:Review"
And I use Review Round1 named "update_wiki"
And I use Review Round2"named "rubric1"
Then I press "Save"
@wip
Scenario2: Student should see the review rubric for 1st round
Given I am logged in as a user13
And I move to the "Assignments" page
And I click the "Week 4 wiki" link
When I click the "Others' work" link
Then I should see "update_wiki"
Scenario3: Instructor then change the due date of Round 2, so that the student would see a different review rubric
Given an instructor named "user6"
And I am logged in as "user6"
@instructor
@manage_assignments
When I move to the "Assignments" page
And I click the "edit" link for "Week 4 wiki"
And I fill in "2014,10,10" for "Round1 Submission"
And I fill in "2014,10,22" for "Round1 Review"
And I fill in "2014,11,10" for "Round2 Submission"
And I fill in "2014,12,23" for "Round2:Review"
Then I press "Save"
@wip
Scenario4: Student should see the review rubric for 2st round, which is different from the 1st one
Given I am logged in as a user13
And I move to the "Assignments" page
And I click the "Week 4 wiki" link
When I click the "Others' work" link
Then I should see "rubric1"
</pre>

In app/features/step_definitions/review_rubric_varies_by_round.rb:
<pre>
And /^I click the "edit" link for "Week 4 wiki"$/ do
visit('/assignment/edit/18')
end
And /^I fill in "([^"]*)" for "([^"]*)" $/ do |due_date, deadline|
step "I fill in \"#{due_date}\" for \"due_date\""
step "I fill in \"#{deadline}\" for \"deadline\""
end
And /^I use Review Round1 named "update_wiki" $/ do
step "I select \"update_wiki\" from \"questionnaires[review1]\""
end
And /^I use Review Round1 named "rubric1" $/ do
step "I select \"rubric1\" from \"questionnaires[review2]\""
end
</pre>

== References ==
<references/>

CSC/ECE 517 Fall 2014/OSS E1450 cxm

2014-11-12T22:42:48Z

Xshao2: /* Case 3: Make slight changes to existing functions/codes */

==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 [http://en.wikipedia.org/wiki/Semantics_(computer_science) semantics]. The syntax of JavaScript is actually derived from [http://en.wikipedia.org/wiki/C_(programming_language) C], while the semantics and design are influenced by [http://en.wikipedia.org/wiki/Self_(programming_language) Self] and [http://en.wikipedia.org/wiki/Scheme_(programming_language) Scheme] programming languages<ref>http://en.wikipedia.org/wiki/JavaScript</ref>. This mix of features makes it a multi-paradigm language, supporting [http://en.wikipedia.org/wiki/Object-oriented_programming object-oriented], [http://en.wikipedia.org/wiki/Imperative_programming imperative], and [http://en.wikipedia.org/wiki/Functional_programming 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 “Rubric” 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

* 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)

* The "deadline_name" and "description URL" could be hidden when you change the status of the checkbox in Due_Date tab

* 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.

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

def edit
...
@reviewvarycheck = nil
@assignment_questionnaires.each do |aq|
if(!(aq.used_in_round.nil?))
@reviewvarycheck = 1
@q_id = aq.questionnaire_id
@qn = Questionnaire.find(@q_id)
if(@qn.display_type.eql?"Review")
@review_check = 1
elsif(@qn.display_type.eql?"Metareview")
@metareview_check=1
elsif(@qn.display_type.eql?"Author Feedback")
@author_check = 1
elsif(@qn.display_type.eql?"Teammate Review")
@teammate_check = 1
end
end
end
...
end

In the _rubrics.html.erb, we added a javascript function to handle the click action:

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.

==== Codes ====
In the assignment_controller.rb, we added a method to check if the name and url are NULL in database to make a decision in the initial display (or after webpage refreshes). If there are contents in the DB, which means someone has typed in some texts, it will display the two columns; on the contrary, it won't display to make the table simpler.:

def edit
...
@due_date_nameurl_notempty = "null"
@due_date_nameurl_notempty_checkbox = false
...
# Add by Xiaoqiang Shao, check if name and url in database is empty before webpage displays
@due_date_all.each do |dd|
if(!(dd.deadline_name.nil?))
if(dd.deadline_name.length>=1)
@due_date_nameurl_notempty = 1
@due_date_nameurl_notempty_checkbox = true
end
end
if(!(dd.description_url.nil?))
if(dd.description_url.length>=1)
@due_date_nameurl_notempty = 1
@due_date_nameurl_notempty_checkbox = true
end
end
end
...
end

And at any time, users can hide/show the two columns by checking the checkbox. Here are the main changes in _due_dates.html.erb:

function handleChangenameurl(checkvalue,due_date_name_column,due_date_url_column) {
var state = checkvalue;
var round_count = <%= @assignment.rounds_of_reviews%>;
if (!document.getElementById) {
return;
}
if (state == false && round_count >1){
//hide name and url colomns
for (i =1; i <= round_count; i++) {
removeDueDateTableElement('submission', i);
removeDueDateTableElement('review', i);
}
removeDueDateTableElement('metareview', 0);
for (i =1; i <= round_count; i++) {
addDueDateTableElement(null,'submission',i, <%= due_date(@assignment, 'submission', 0).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>); // or use questionnaire_options(@assignment, nil).to_json
addDueDateTableElement(null,'review', i, <%= due_date(@assignment, 'review', 0).to_json %>, <%= questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= assignment_questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>);
}
addDueDateTableElement(null,'metareview',0,<%= due_date(@assignment,'metareview', 0).to_json%>);
due_date_name_column.style.display="none";
due_date_url_column.style.display="none";
}
if (state == true && round_count >1){
//display name and url colomns
for (i =1; i <= round_count; i++) {
removeDueDateTableElement('submission', i);
removeDueDateTableElement('review', i);
}
removeDueDateTableElement('metareview', 0);
for (i =1; i <= round_count; i++) {
addDueDateTableElement(1,'submission', i, <%= due_date(@assignment, 'submission', 0).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>); // or use questionnaire_options(@assignment, nil).to_json
addDueDateTableElement(1,'review',i, <%= due_date(@assignment, 'review', 0).to_json %>, <%= questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= assignment_questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>);
}
addDueDateTableElement(1,'metareview',0,<%= due_date(@assignment,'metareview', 0).to_json%>);
due_date_name_column.removeAttribute("style");
due_date_url_column.removeAttribute("style");
}
else{
return;
}
}

<input name="changenameurl" type="hidden" value="false" />
<%= check_box_tag('changenameurl', 'true', @due_date_nameurl_notempty_checkbox,:onclick=>"handleChangenameurl(this.checked,due_date_name_column,due_date_url_column)" ) %>
<%= label_tag('changenameurl', 'Change name and description url?') %>

In the end corresponding changes should be made in the end of _due_dates.html.erb, after which the webpage will display corresponding contents (hide or display name and url columns according to whether they are empty):

<pre>
<table class='exp' id='due_dates_table' style='padding:10px;min-width: 990px;overflow: hidden;'>
<tr id='due_date_heading'>
...
</tr>
...
<script>
jQuery(document).ready(function () {
<% for i in 1..@assignment.rounds_of_reviews %>
addDueDateTableElement(<%= @due_date_nameurl_notempty %>,'submission', <%=i%>, <%= due_date(@assignment, 'submission', i-1).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>); // or use questionnaire_options(@assignment, nil).to_json
addDueDateTableElement(<%= @due_date_nameurl_notempty %>,'review', <%=i%>, <%= due_date(@assignment, 'review', i-1).to_json %>, <%= questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= assignment_questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>);
<% end %>
addDueDateTableElement(<%= @due_date_nameurl_notempty %>,'metareview', 0, <%= due_date(@assignment, 'metareview').to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>);
//after webpage refreshes, hide or display name and url according to whether names and urls are empty in DB
var due_date_name_column=document.getElementById("due_date_name_column");
var due_date_url_column=document.getElementById("due_date_url_column");
<% if @due_date_nameurl_notempty =="null" %>
due_date_name_column.style.visibility="hidden";
due_date_url_column.style.visibility="hidden";
<% end %>
}());
</script>
</table>
</pre>

=== Case 3: Make slight changes to existing methods/codes ===
==== Current Scenario ====

Existing methods have no enough parameters we want, or they are not returning out results we want.
==== After Changes ====

* Make small changes to them to fit the new methods we write without interfering the previous methods.

==== Exampls ====
The slight changes of functions are small, trivial and less important to readers to understand what we have done. So only examples are shown to convey the ideas, and all the detailed modification can be found at our Github: https:github.com/shaoxq1205/expertiza (on branch production).

Here's the example:
We need to add a round_number for the questionnaire() method in order to make it return different values (actually from different rows of the assignment_questionnaire table) because there're more than 1 rounds now and each round may have different values.
previous method of questionnaire():
<pre>
def questionnaire(assignment, type)
questionnaire = assignment.questionnaires.find_by_type(type)
if questionnaire.nil?
questionnaire = Object.const_get(type).new
questionnaire
else
questionnaire
end
end
</pre>

current method of questionnaire():
<pre>
def questionnaire(assignment, type, round_number)
if round_number.nil?
questionnaire=assignment.questionnaires.find_by_type(type)
else
ass_ques=assignment.assignment_questionnaires.find_by_used_in_round(round_number)
# make sure the assignment_questionnaire record is not empty
if !ass_ques.nil?
temp_num=ass_ques.questionnaire_id
questionnaire = assignment.questionnaires.find_by_id(temp_num)
end
end
if questionnaire.nil?
questionnaire = Object.const_get(type).new
questionnaire
else
questionnaire
end
end
</pre>

== Cucumber Tests ==

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

Scenario 1: An instructor can set the "Review Rubric Varies by Round" for an assignment, and set due dates for all of submissions and reviews, as well as different rubrics would be used

Scenario 2: A student should see the review rubric for 1st round in the other's work link

Scenario 3: The instructor change the due date to start the 2nd round of review

Scenario 4: A student should see the review rubric for 2nd round in the other's work link

== References ==
<references/>

CSC/ECE 517 Fall 2014/OSS E1450 cxm

2014-11-12T22:42:30Z

Xshao2: /* Case 2: Add "Deadline_name" and "Description_url" on "Due_date" Tab */

==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 [http://en.wikipedia.org/wiki/Semantics_(computer_science) semantics]. The syntax of JavaScript is actually derived from [http://en.wikipedia.org/wiki/C_(programming_language) C], while the semantics and design are influenced by [http://en.wikipedia.org/wiki/Self_(programming_language) Self] and [http://en.wikipedia.org/wiki/Scheme_(programming_language) Scheme] programming languages<ref>http://en.wikipedia.org/wiki/JavaScript</ref>. This mix of features makes it a multi-paradigm language, supporting [http://en.wikipedia.org/wiki/Object-oriented_programming object-oriented], [http://en.wikipedia.org/wiki/Imperative_programming imperative], and [http://en.wikipedia.org/wiki/Functional_programming 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 “Rubric” 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

* 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)

* The "deadline_name" and "description URL" could be hidden when you change the status of the checkbox in Due_Date tab

* 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.

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

def edit
...
@reviewvarycheck = nil
@assignment_questionnaires.each do |aq|
if(!(aq.used_in_round.nil?))
@reviewvarycheck = 1
@q_id = aq.questionnaire_id
@qn = Questionnaire.find(@q_id)
if(@qn.display_type.eql?"Review")
@review_check = 1
elsif(@qn.display_type.eql?"Metareview")
@metareview_check=1
elsif(@qn.display_type.eql?"Author Feedback")
@author_check = 1
elsif(@qn.display_type.eql?"Teammate Review")
@teammate_check = 1
end
end
end
...
end

In the _rubrics.html.erb, we added a javascript function to handle the click action:

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.

==== Codes ====
In the assignment_controller.rb, we added a method to check if the name and url are NULL in database to make a decision in the initial display (or after webpage refreshes). If there are contents in the DB, which means someone has typed in some texts, it will display the two columns; on the contrary, it won't display to make the table simpler.:

def edit
...
@due_date_nameurl_notempty = "null"
@due_date_nameurl_notempty_checkbox = false
...
# Add by Xiaoqiang Shao, check if name and url in database is empty before webpage displays
@due_date_all.each do |dd|
if(!(dd.deadline_name.nil?))
if(dd.deadline_name.length>=1)
@due_date_nameurl_notempty = 1
@due_date_nameurl_notempty_checkbox = true
end
end
if(!(dd.description_url.nil?))
if(dd.description_url.length>=1)
@due_date_nameurl_notempty = 1
@due_date_nameurl_notempty_checkbox = true
end
end
end
...
end

And at any time, users can hide/show the two columns by checking the checkbox. Here are the main changes in _due_dates.html.erb:

function handleChangenameurl(checkvalue,due_date_name_column,due_date_url_column) {
var state = checkvalue;
var round_count = <%= @assignment.rounds_of_reviews%>;
if (!document.getElementById) {
return;
}
if (state == false && round_count >1){
//hide name and url colomns
for (i =1; i <= round_count; i++) {
removeDueDateTableElement('submission', i);
removeDueDateTableElement('review', i);
}
removeDueDateTableElement('metareview', 0);
for (i =1; i <= round_count; i++) {
addDueDateTableElement(null,'submission',i, <%= due_date(@assignment, 'submission', 0).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>); // or use questionnaire_options(@assignment, nil).to_json
addDueDateTableElement(null,'review', i, <%= due_date(@assignment, 'review', 0).to_json %>, <%= questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= assignment_questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>);
}
addDueDateTableElement(null,'metareview',0,<%= due_date(@assignment,'metareview', 0).to_json%>);
due_date_name_column.style.display="none";
due_date_url_column.style.display="none";
}
if (state == true && round_count >1){
//display name and url colomns
for (i =1; i <= round_count; i++) {
removeDueDateTableElement('submission', i);
removeDueDateTableElement('review', i);
}
removeDueDateTableElement('metareview', 0);
for (i =1; i <= round_count; i++) {
addDueDateTableElement(1,'submission', i, <%= due_date(@assignment, 'submission', 0).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>); // or use questionnaire_options(@assignment, nil).to_json
addDueDateTableElement(1,'review',i, <%= due_date(@assignment, 'review', 0).to_json %>, <%= questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= assignment_questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>);
}
addDueDateTableElement(1,'metareview',0,<%= due_date(@assignment,'metareview', 0).to_json%>);
due_date_name_column.removeAttribute("style");
due_date_url_column.removeAttribute("style");
}
else{
return;
}
}

<input name="changenameurl" type="hidden" value="false" />
<%= check_box_tag('changenameurl', 'true', @due_date_nameurl_notempty_checkbox,:onclick=>"handleChangenameurl(this.checked,due_date_name_column,due_date_url_column)" ) %>
<%= label_tag('changenameurl', 'Change name and description url?') %>

In the end corresponding changes should be made in the end of _due_dates.html.erb, after which the webpage will display corresponding contents (hide or display name and url columns according to whether they are empty):

<pre>
<table class='exp' id='due_dates_table' style='padding:10px;min-width: 990px;overflow: hidden;'>
<tr id='due_date_heading'>
...
</tr>
...
<script>
jQuery(document).ready(function () {
<% for i in 1..@assignment.rounds_of_reviews %>
addDueDateTableElement(<%= @due_date_nameurl_notempty %>,'submission', <%=i%>, <%= due_date(@assignment, 'submission', i-1).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>); // or use questionnaire_options(@assignment, nil).to_json
addDueDateTableElement(<%= @due_date_nameurl_notempty %>,'review', <%=i%>, <%= due_date(@assignment, 'review', i-1).to_json %>, <%= questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= assignment_questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>);
<% end %>
addDueDateTableElement(<%= @due_date_nameurl_notempty %>,'metareview', 0, <%= due_date(@assignment, 'metareview').to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>);
//after webpage refreshes, hide or display name and url according to whether names and urls are empty in DB
var due_date_name_column=document.getElementById("due_date_name_column");
var due_date_url_column=document.getElementById("due_date_url_column");
<% if @due_date_nameurl_notempty =="null" %>
due_date_name_column.style.visibility="hidden";
due_date_url_column.style.visibility="hidden";
<% end %>
}());
</script>
</table>
</pre>

=== Case 3: Make slight changes to existing functions/codes ===
==== Current Scenario ====

Existing methods have no enough parameters we want, or they are not returning out results we want.
==== After Changes ====

* Make small changes to them to fit the new methods we write without interfering the previous methods.

==== Exampls ====
The slight changes of functions are small, trivial and less important to readers to understand what we have done. So only examples are shown to convey the ideas, and all the detailed modification can be found at our Github: https:github.com/shaoxq1205/expertiza (on branch production).

Here's the example:
We need to add a round_number for the questionnaire() method in order to make it return different values (actually from different rows of the assignment_questionnaire table) because there're more than 1 rounds now and each round may have different values.
previous method of questionnaire():
<pre>
def questionnaire(assignment, type)
questionnaire = assignment.questionnaires.find_by_type(type)
if questionnaire.nil?
questionnaire = Object.const_get(type).new
questionnaire
else
questionnaire
end
end
</pre>

current method of questionnaire():
<pre>
def questionnaire(assignment, type, round_number)
if round_number.nil?
questionnaire=assignment.questionnaires.find_by_type(type)
else
ass_ques=assignment.assignment_questionnaires.find_by_used_in_round(round_number)
# make sure the assignment_questionnaire record is not empty
if !ass_ques.nil?
temp_num=ass_ques.questionnaire_id
questionnaire = assignment.questionnaires.find_by_id(temp_num)
end
end
if questionnaire.nil?
questionnaire = Object.const_get(type).new
questionnaire
else
questionnaire
end
end
</pre>

== Cucumber Tests ==

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

Scenario 1: An instructor can set the "Review Rubric Varies by Round" for an assignment, and set due dates for all of submissions and reviews, as well as different rubrics would be used

Scenario 2: A student should see the review rubric for 1st round in the other's work link

Scenario 3: The instructor change the due date to start the 2nd round of review

Scenario 4: A student should see the review rubric for 2nd round in the other's work link

== References ==
<references/>

CSC/ECE 517 Fall 2014/OSS E1450 cxm

2014-11-12T22:28:27Z

Xshao2: /* Case 2: Add "Deadline_name" and "Description_url" on "Due_date" Tab */

==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 [http://en.wikipedia.org/wiki/Semantics_(computer_science) semantics]. The syntax of JavaScript is actually derived from [http://en.wikipedia.org/wiki/C_(programming_language) C], while the semantics and design are influenced by [http://en.wikipedia.org/wiki/Self_(programming_language) Self] and [http://en.wikipedia.org/wiki/Scheme_(programming_language) Scheme] programming languages<ref>http://en.wikipedia.org/wiki/JavaScript</ref>. This mix of features makes it a multi-paradigm language, supporting [http://en.wikipedia.org/wiki/Object-oriented_programming object-oriented], [http://en.wikipedia.org/wiki/Imperative_programming imperative], and [http://en.wikipedia.org/wiki/Functional_programming 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 “Rubric” 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

* 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)

* The "deadline_name" and "description URL" could be hidden when you change the status of the checkbox in Due_Date tab

* 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.

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

def edit
...
@reviewvarycheck = nil
@assignment_questionnaires.each do |aq|
if(!(aq.used_in_round.nil?))
@reviewvarycheck = 1
@q_id = aq.questionnaire_id
@qn = Questionnaire.find(@q_id)
if(@qn.display_type.eql?"Review")
@review_check = 1
elsif(@qn.display_type.eql?"Metareview")
@metareview_check=1
elsif(@qn.display_type.eql?"Author Feedback")
@author_check = 1
elsif(@qn.display_type.eql?"Teammate Review")
@teammate_check = 1
end
end
end
...
end

In the _rubrics.html.erb, we added a javascript function to handle the click action:

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.

==== Codes ====
In the assignment_controller.rb, we added a method to check if the name and url are NULL in database to make a decision in the initial display (or after webpage refreshes). If there are contents in the DB, which means someone has typed in some texts, it will display the two columns; on the contrary, it won't display to make the table simpler.:

def edit
...
@due_date_nameurl_notempty = "null"
@due_date_nameurl_notempty_checkbox = false
...
# Add by Xiaoqiang Shao, check if name and url in database is empty before webpage displays
@due_date_all.each do |dd|
if(!(dd.deadline_name.nil?))
if(dd.deadline_name.length>=1)
@due_date_nameurl_notempty = 1
@due_date_nameurl_notempty_checkbox = true
end
end
if(!(dd.description_url.nil?))
if(dd.description_url.length>=1)
@due_date_nameurl_notempty = 1
@due_date_nameurl_notempty_checkbox = true
end
end
end
...
end

And at any time, users can hide/show the two columns by checking the checkbox. Here are the main changes in _due_dates.html.erb:

function handleChangenameurl(checkvalue,due_date_name_column,due_date_url_column) {
var state = checkvalue;
var round_count = <%= @assignment.rounds_of_reviews%>;
if (!document.getElementById) {
return;
}
if (state == false && round_count >1){
//hide name and url colomns
for (i =1; i <= round_count; i++) {
removeDueDateTableElement('submission', i);
removeDueDateTableElement('review', i);
}
removeDueDateTableElement('metareview', 0);
for (i =1; i <= round_count; i++) {
addDueDateTableElement(null,'submission',i, <%= due_date(@assignment, 'submission', 0).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>); // or use questionnaire_options(@assignment, nil).to_json
addDueDateTableElement(null,'review', i, <%= due_date(@assignment, 'review', 0).to_json %>, <%= questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= assignment_questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>);
}
addDueDateTableElement(null,'metareview',0,<%= due_date(@assignment,'metareview', 0).to_json%>);
due_date_name_column.style.display="none";
due_date_url_column.style.display="none";
}
if (state == true && round_count >1){
//display name and url colomns
for (i =1; i <= round_count; i++) {
removeDueDateTableElement('submission', i);
removeDueDateTableElement('review', i);
}
removeDueDateTableElement('metareview', 0);
for (i =1; i <= round_count; i++) {
addDueDateTableElement(1,'submission', i, <%= due_date(@assignment, 'submission', 0).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>); // or use questionnaire_options(@assignment, nil).to_json
addDueDateTableElement(1,'review',i, <%= due_date(@assignment, 'review', 0).to_json %>, <%= questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= assignment_questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>);
}
addDueDateTableElement(1,'metareview',0,<%= due_date(@assignment,'metareview', 0).to_json%>);
due_date_name_column.removeAttribute("style");
due_date_url_column.removeAttribute("style");
}
else{
return;
}
}

<input name="changenameurl" type="hidden" value="false" />
<%= check_box_tag('changenameurl', 'true', @due_date_nameurl_notempty_checkbox,:onclick=>"handleChangenameurl(this.checked,due_date_name_column,due_date_url_column)" ) %>
<%= label_tag('changenameurl', 'Change name and description url?') %>

In the end corresponding changes should be made in the end of _due_dates.html.erb, after which the webpage will display corresponding contents (hide or display name and url columns according to whether they are empty):

<pre>
<table class='exp' id='due_dates_table' style='padding:10px;min-width: 990px;overflow: hidden;'>
<tr id='due_date_heading'>
...
</tr>
...
<script>
jQuery(document).ready(function () {
<% for i in 1..@assignment.rounds_of_reviews %>
addDueDateTableElement(<%= @due_date_nameurl_notempty %>,'submission', <%=i%>, <%= due_date(@assignment, 'submission', i-1).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>); // or use questionnaire_options(@assignment, nil).to_json
addDueDateTableElement(<%= @due_date_nameurl_notempty %>,'review', <%=i%>, <%= due_date(@assignment, 'review', i-1).to_json %>, <%= questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= assignment_questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>);
<% end %>
addDueDateTableElement(<%= @due_date_nameurl_notempty %>,'metareview', 0, <%= due_date(@assignment, 'metareview').to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>);
//after webpage refreshes, hide or display name and url according to whether names and urls are empty in DB
var due_date_name_column=document.getElementById("due_date_name_column");
var due_date_url_column=document.getElementById("due_date_url_column");
<% if @due_date_nameurl_notempty =="null" %>
due_date_name_column.style.visibility="hidden";
due_date_url_column.style.visibility="hidden";
<% end %>
}());
</script>
</table>
</pre>

== Cucumber Tests ==

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

Scenario 1: An instructor can set the "Review Rubric Varies by Round" for an assignment, and set due dates for all of submissions and reviews, as well as different rubrics would be used

Scenario 2: A student should see the review rubric for 1st round in the other's work link

Scenario 3: The instructor change the due date to start the 2nd round of review

Scenario 4: A student should see the review rubric for 2nd round in the other's work link

== References ==
<references/>

CSC/ECE 517 Fall 2014/OSS E1450 cxm

2014-11-12T22:28:12Z

Xshao2: /* Code Modifications */

==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 [http://en.wikipedia.org/wiki/Semantics_(computer_science) semantics]. The syntax of JavaScript is actually derived from [http://en.wikipedia.org/wiki/C_(programming_language) C], while the semantics and design are influenced by [http://en.wikipedia.org/wiki/Self_(programming_language) Self] and [http://en.wikipedia.org/wiki/Scheme_(programming_language) Scheme] programming languages<ref>http://en.wikipedia.org/wiki/JavaScript</ref>. This mix of features makes it a multi-paradigm language, supporting [http://en.wikipedia.org/wiki/Object-oriented_programming object-oriented], [http://en.wikipedia.org/wiki/Imperative_programming imperative], and [http://en.wikipedia.org/wiki/Functional_programming 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 “Rubric” 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

* 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)

* The "deadline_name" and "description URL" could be hidden when you change the status of the checkbox in Due_Date tab

* 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.

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

def edit
...
@reviewvarycheck = nil
@assignment_questionnaires.each do |aq|
if(!(aq.used_in_round.nil?))
@reviewvarycheck = 1
@q_id = aq.questionnaire_id
@qn = Questionnaire.find(@q_id)
if(@qn.display_type.eql?"Review")
@review_check = 1
elsif(@qn.display_type.eql?"Metareview")
@metareview_check=1
elsif(@qn.display_type.eql?"Author Feedback")
@author_check = 1
elsif(@qn.display_type.eql?"Teammate Review")
@teammate_check = 1
end
end
end
...
end

In the _rubrics.html.erb, we added a javascript function to handle the click action:

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.

In the assignment_controller.rb, we added a method to check if the name and url are NULL in database to make a decision in the initial display (or after webpage refreshes). If there are contents in the DB, which means someone has typed in some texts, it will display the two columns; on the contrary, it won't display to make the table simpler.:

def edit
...
@due_date_nameurl_notempty = "null"
@due_date_nameurl_notempty_checkbox = false
...
# Add by Xiaoqiang Shao, check if name and url in database is empty before webpage displays
@due_date_all.each do |dd|
if(!(dd.deadline_name.nil?))
if(dd.deadline_name.length>=1)
@due_date_nameurl_notempty = 1
@due_date_nameurl_notempty_checkbox = true
end
end
if(!(dd.description_url.nil?))
if(dd.description_url.length>=1)
@due_date_nameurl_notempty = 1
@due_date_nameurl_notempty_checkbox = true
end
end
end
...
end

And at any time, users can hide/show the two columns by checking the checkbox. Here are the main changes in _due_dates.html.erb:

function handleChangenameurl(checkvalue,due_date_name_column,due_date_url_column) {
var state = checkvalue;
var round_count = <%= @assignment.rounds_of_reviews%>;
if (!document.getElementById) {
return;
}
if (state == false && round_count >1){
//hide name and url colomns
for (i =1; i <= round_count; i++) {
removeDueDateTableElement('submission', i);
removeDueDateTableElement('review', i);
}
removeDueDateTableElement('metareview', 0);
for (i =1; i <= round_count; i++) {
addDueDateTableElement(null,'submission',i, <%= due_date(@assignment, 'submission', 0).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>); // or use questionnaire_options(@assignment, nil).to_json
addDueDateTableElement(null,'review', i, <%= due_date(@assignment, 'review', 0).to_json %>, <%= questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= assignment_questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>);
}
addDueDateTableElement(null,'metareview',0,<%= due_date(@assignment,'metareview', 0).to_json%>);
due_date_name_column.style.display="none";
due_date_url_column.style.display="none";
}
if (state == true && round_count >1){
//display name and url colomns
for (i =1; i <= round_count; i++) {
removeDueDateTableElement('submission', i);
removeDueDateTableElement('review', i);
}
removeDueDateTableElement('metareview', 0);
for (i =1; i <= round_count; i++) {
addDueDateTableElement(1,'submission', i, <%= due_date(@assignment, 'submission', 0).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>); // or use questionnaire_options(@assignment, nil).to_json
addDueDateTableElement(1,'review',i, <%= due_date(@assignment, 'review', 0).to_json %>, <%= questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= assignment_questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>);
}
addDueDateTableElement(1,'metareview',0,<%= due_date(@assignment,'metareview', 0).to_json%>);
due_date_name_column.removeAttribute("style");
due_date_url_column.removeAttribute("style");
}
else{
return;
}
}

<input name="changenameurl" type="hidden" value="false" />
<%= check_box_tag('changenameurl', 'true', @due_date_nameurl_notempty_checkbox,:onclick=>"handleChangenameurl(this.checked,due_date_name_column,due_date_url_column)" ) %>
<%= label_tag('changenameurl', 'Change name and description url?') %>

In the end corresponding changes should be made in the end of _due_dates.html.erb, after which the webpage will display corresponding contents (hide or display name and url columns according to whether they are empty):

<pre>
<table class='exp' id='due_dates_table' style='padding:10px;min-width: 990px;overflow: hidden;'>
<tr id='due_date_heading'>
...
</tr>
...
<script>
jQuery(document).ready(function () {
<% for i in 1..@assignment.rounds_of_reviews %>
addDueDateTableElement(<%= @due_date_nameurl_notempty %>,'submission', <%=i%>, <%= due_date(@assignment, 'submission', i-1).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>); // or use questionnaire_options(@assignment, nil).to_json
addDueDateTableElement(<%= @due_date_nameurl_notempty %>,'review', <%=i%>, <%= due_date(@assignment, 'review', i-1).to_json %>, <%= questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= assignment_questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>);
<% end %>
addDueDateTableElement(<%= @due_date_nameurl_notempty %>,'metareview', 0, <%= due_date(@assignment, 'metareview').to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>);
//after webpage refreshes, hide or display name and url according to whether names and urls are empty in DB
var due_date_name_column=document.getElementById("due_date_name_column");
var due_date_url_column=document.getElementById("due_date_url_column");
<% if @due_date_nameurl_notempty =="null" %>
due_date_name_column.style.visibility="hidden";
due_date_url_column.style.visibility="hidden";
<% end %>
}());
</script>
</table>
</pre>

== Cucumber Tests ==

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

Scenario 1: An instructor can set the "Review Rubric Varies by Round" for an assignment, and set due dates for all of submissions and reviews, as well as different rubrics would be used

Scenario 2: A student should see the review rubric for 1st round in the other's work link

Scenario 3: The instructor change the due date to start the 2nd round of review

Scenario 4: A student should see the review rubric for 2nd round in the other's work link

== References ==
<references/>

CSC/ECE 517 Fall 2014/OSS E1450 cxm

2014-11-12T22:27:23Z

Xshao2: /* After Changes */

==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 [http://en.wikipedia.org/wiki/Semantics_(computer_science) semantics]. The syntax of JavaScript is actually derived from [http://en.wikipedia.org/wiki/C_(programming_language) C], while the semantics and design are influenced by [http://en.wikipedia.org/wiki/Self_(programming_language) Self] and [http://en.wikipedia.org/wiki/Scheme_(programming_language) Scheme] programming languages<ref>http://en.wikipedia.org/wiki/JavaScript</ref>. This mix of features makes it a multi-paradigm language, supporting [http://en.wikipedia.org/wiki/Object-oriented_programming object-oriented], [http://en.wikipedia.org/wiki/Imperative_programming imperative], and [http://en.wikipedia.org/wiki/Functional_programming 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 “Rubric” 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

* 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)

* The "deadline_name" and "description URL" could be hidden when you change the status of the checkbox in Due_Date tab

* 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
...
@reviewvarycheck = nil
@assignment_questionnaires.each do |aq|
if(!(aq.used_in_round.nil?))
@reviewvarycheck = 1
@q_id = aq.questionnaire_id
@qn = Questionnaire.find(@q_id)
if(@qn.display_type.eql?"Review")
@review_check = 1
elsif(@qn.display_type.eql?"Metareview")
@metareview_check=1
elsif(@qn.display_type.eql?"Author Feedback")
@author_check = 1
elsif(@qn.display_type.eql?"Teammate Review")
@teammate_check = 1
end
end
end
...
end

In the _rubrics.html.erb, we added a javascript function to handle the click action:

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.

In the assignment_controller.rb, we added a method to check if the name and url are NULL in database to make a decision in the initial display (or after webpage refreshes). If there are contents in the DB, which means someone has typed in some texts, it will display the two columns; on the contrary, it won't display to make the table simpler.:

def edit
...
@due_date_nameurl_notempty = "null"
@due_date_nameurl_notempty_checkbox = false
...
# Add by Xiaoqiang Shao, check if name and url in database is empty before webpage displays
@due_date_all.each do |dd|
if(!(dd.deadline_name.nil?))
if(dd.deadline_name.length>=1)
@due_date_nameurl_notempty = 1
@due_date_nameurl_notempty_checkbox = true
end
end
if(!(dd.description_url.nil?))
if(dd.description_url.length>=1)
@due_date_nameurl_notempty = 1
@due_date_nameurl_notempty_checkbox = true
end
end
end
...
end

And at any time, users can hide/show the two columns by checking the checkbox. Here are the main changes in _due_dates.html.erb:

function handleChangenameurl(checkvalue,due_date_name_column,due_date_url_column) {
var state = checkvalue;
var round_count = <%= @assignment.rounds_of_reviews%>;
if (!document.getElementById) {
return;
}
if (state == false && round_count >1){
//hide name and url colomns
for (i =1; i <= round_count; i++) {
removeDueDateTableElement('submission', i);
removeDueDateTableElement('review', i);
}
removeDueDateTableElement('metareview', 0);
for (i =1; i <= round_count; i++) {
addDueDateTableElement(null,'submission',i, <%= due_date(@assignment, 'submission', 0).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>); // or use questionnaire_options(@assignment, nil).to_json
addDueDateTableElement(null,'review', i, <%= due_date(@assignment, 'review', 0).to_json %>, <%= questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= assignment_questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>);
}
addDueDateTableElement(null,'metareview',0,<%= due_date(@assignment,'metareview', 0).to_json%>);
due_date_name_column.style.display="none";
due_date_url_column.style.display="none";
}
if (state == true && round_count >1){
//display name and url colomns
for (i =1; i <= round_count; i++) {
removeDueDateTableElement('submission', i);
removeDueDateTableElement('review', i);
}
removeDueDateTableElement('metareview', 0);
for (i =1; i <= round_count; i++) {
addDueDateTableElement(1,'submission', i, <%= due_date(@assignment, 'submission', 0).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>); // or use questionnaire_options(@assignment, nil).to_json
addDueDateTableElement(1,'review',i, <%= due_date(@assignment, 'review', 0).to_json %>, <%= questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= assignment_questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>);
}
addDueDateTableElement(1,'metareview',0,<%= due_date(@assignment,'metareview', 0).to_json%>);
due_date_name_column.removeAttribute("style");
due_date_url_column.removeAttribute("style");
}
else{
return;
}
}

<input name="changenameurl" type="hidden" value="false" />
<%= check_box_tag('changenameurl', 'true', @due_date_nameurl_notempty_checkbox,:onclick=>"handleChangenameurl(this.checked,due_date_name_column,due_date_url_column)" ) %>
<%= label_tag('changenameurl', 'Change name and description url?') %>

In the end corresponding changes should be made in the end of _due_dates.html.erb, after which the webpage will display corresponding contents (hide or display name and url columns according to whether they are empty):

<pre>
<table class='exp' id='due_dates_table' style='padding:10px;min-width: 990px;overflow: hidden;'>
<tr id='due_date_heading'>
...
</tr>
...
<script>
jQuery(document).ready(function () {
<% for i in 1..@assignment.rounds_of_reviews %>
addDueDateTableElement(<%= @due_date_nameurl_notempty %>,'submission', <%=i%>, <%= due_date(@assignment, 'submission', i-1).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>); // or use questionnaire_options(@assignment, nil).to_json
addDueDateTableElement(<%= @due_date_nameurl_notempty %>,'review', <%=i%>, <%= due_date(@assignment, 'review', i-1).to_json %>, <%= questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= assignment_questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>);
<% end %>
addDueDateTableElement(<%= @due_date_nameurl_notempty %>,'metareview', 0, <%= due_date(@assignment, 'metareview').to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>);
//after webpage refreshes, hide or display name and url according to whether names and urls are empty in DB
var due_date_name_column=document.getElementById("due_date_name_column");
var due_date_url_column=document.getElementById("due_date_url_column");
<% if @due_date_nameurl_notempty =="null" %>
due_date_name_column.style.visibility="hidden";
due_date_url_column.style.visibility="hidden";
<% end %>
}());
</script>
</table>
</pre>

== Cucumber Tests ==

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

Scenario 1: An instructor can set the "Review Rubric Varies by Round" for an assignment, and set due dates for all of submissions and reviews, as well as different rubrics would be used

Scenario 2: A student should see the review rubric for 1st round in the other's work link

Scenario 3: The instructor change the due date to start the 2nd round of review

Scenario 4: A student should see the review rubric for 2nd round in the other's work link

== References ==
<references/>

CSC/ECE 517 Fall 2014/OSS E1450 cxm

2014-11-12T22:26:26Z

Xshao2: /* After Changes */

==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 [http://en.wikipedia.org/wiki/Semantics_(computer_science) semantics]. The syntax of JavaScript is actually derived from [http://en.wikipedia.org/wiki/C_(programming_language) C], while the semantics and design are influenced by [http://en.wikipedia.org/wiki/Self_(programming_language) Self] and [http://en.wikipedia.org/wiki/Scheme_(programming_language) Scheme] programming languages<ref>http://en.wikipedia.org/wiki/JavaScript</ref>. This mix of features makes it a multi-paradigm language, supporting [http://en.wikipedia.org/wiki/Object-oriented_programming object-oriented], [http://en.wikipedia.org/wiki/Imperative_programming imperative], and [http://en.wikipedia.org/wiki/Functional_programming 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 “Rubric” 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

* 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)

* The "deadline_name" and "description URL" could be hidden when you change the status of the checkbox in Due_Date tab

* 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
...
@reviewvarycheck = nil
@assignment_questionnaires.each do |aq|
if(!(aq.used_in_round.nil?))
@reviewvarycheck = 1
@q_id = aq.questionnaire_id
@qn = Questionnaire.find(@q_id)
if(@qn.display_type.eql?"Review")
@review_check = 1
elsif(@qn.display_type.eql?"Metareview")
@metareview_check=1
elsif(@qn.display_type.eql?"Author Feedback")
@author_check = 1
elsif(@qn.display_type.eql?"Teammate Review")
@teammate_check = 1
end
end
end
...
end

In the _rubrics.html.erb, we added a javascript function to handle the click action:

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.

In the assignment_controller.rb, we added a method to check if the name and url are NULL in database to make a decision in the initial display (or after webpage refreshes). If there are contents in the DB, which means someone has typed in some texts, it will display the two columns; on the contrary, it won't display to make the table simpler.:

def edit
...
@due_date_nameurl_notempty = "null"
@due_date_nameurl_notempty_checkbox = false
...
# Add by Xiaoqiang Shao, check if name and url in database is empty before webpage displays
@due_date_all.each do |dd|
if(!(dd.deadline_name.nil?))
if(dd.deadline_name.length>=1)
@due_date_nameurl_notempty = 1
@due_date_nameurl_notempty_checkbox = true
end
end
if(!(dd.description_url.nil?))
if(dd.description_url.length>=1)
@due_date_nameurl_notempty = 1
@due_date_nameurl_notempty_checkbox = true
end
end
end
...
end

And at any time, users can hide/show the two columns by checking the checkbox. Here are the main changes in _due_dates.html.erb:

function handleChangenameurl(checkvalue,due_date_name_column,due_date_url_column) {
var state = checkvalue;
var round_count = <%= @assignment.rounds_of_reviews%>;
if (!document.getElementById) {
return;
}
if (state == false && round_count >1){
//hide name and url colomns
for (i =1; i <= round_count; i++) {
removeDueDateTableElement('submission', i);
removeDueDateTableElement('review', i);
}
removeDueDateTableElement('metareview', 0);
for (i =1; i <= round_count; i++) {
addDueDateTableElement(null,'submission',i, <%= due_date(@assignment, 'submission', 0).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>); // or use questionnaire_options(@assignment, nil).to_json
addDueDateTableElement(null,'review', i, <%= due_date(@assignment, 'review', 0).to_json %>, <%= questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= assignment_questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>);
}
addDueDateTableElement(null,'metareview',0,<%= due_date(@assignment,'metareview', 0).to_json%>);
due_date_name_column.style.display="none";
due_date_url_column.style.display="none";
}
if (state == true && round_count >1){
//display name and url colomns
for (i =1; i <= round_count; i++) {
removeDueDateTableElement('submission', i);
removeDueDateTableElement('review', i);
}
removeDueDateTableElement('metareview', 0);
for (i =1; i <= round_count; i++) {
addDueDateTableElement(1,'submission', i, <%= due_date(@assignment, 'submission', 0).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>); // or use questionnaire_options(@assignment, nil).to_json
addDueDateTableElement(1,'review',i, <%= due_date(@assignment, 'review', 0).to_json %>, <%= questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= assignment_questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>);
}
addDueDateTableElement(1,'metareview',0,<%= due_date(@assignment,'metareview', 0).to_json%>);
due_date_name_column.removeAttribute("style");
due_date_url_column.removeAttribute("style");
}
else{
return;
}
}

<input name="changenameurl" type="hidden" value="false" />
<%= check_box_tag('changenameurl', 'true', @due_date_nameurl_notempty_checkbox,:onclick=>"handleChangenameurl(this.checked,due_date_name_column,due_date_url_column)" ) %>
<%= label_tag('changenameurl', 'Change name and description url?') %>

In the end corresponding changes should be made in the end of _due_dates.html.erb, after which the webpage will display corresponding contents (hide or display name and url columns according to whether they are empty):

<code>
<table class='exp' id='due_dates_table' style='padding:10px;min-width: 990px;overflow: hidden;'>
<tr id='due_date_heading'>
...
</tr>
...
<script>
jQuery(document).ready(function () {
<% for i in 1..@assignment.rounds_of_reviews %>
addDueDateTableElement(<%= @due_date_nameurl_notempty %>,'submission', <%=i%>, <%= due_date(@assignment, 'submission', i-1).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>); // or use questionnaire_options(@assignment, nil).to_json
addDueDateTableElement(<%= @due_date_nameurl_notempty %>,'review', <%=i%>, <%= due_date(@assignment, 'review', i-1).to_json %>, <%= questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= assignment_questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>);
<% end %>
addDueDateTableElement(<%= @due_date_nameurl_notempty %>,'metareview', 0, <%= due_date(@assignment, 'metareview').to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>);
//after webpage refreshes, hide or display name and url according to whether names and urls are empty in DB
var due_date_name_column=document.getElementById("due_date_name_column");
var due_date_url_column=document.getElementById("due_date_url_column");
<% if @due_date_nameurl_notempty =="null" %>
due_date_name_column.style.visibility="hidden";
due_date_url_column.style.visibility="hidden";
<% end %>
}());
</script>
</table>
</code>

== Cucumber Tests ==

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

Scenario 1: An instructor can set the "Review Rubric Varies by Round" for an assignment, and set due dates for all of submissions and reviews, as well as different rubrics would be used

Scenario 2: A student should see the review rubric for 1st round in the other's work link

Scenario 3: The instructor change the due date to start the 2nd round of review

Scenario 4: A student should see the review rubric for 2nd round in the other's work link

== References ==
<references/>

CSC/ECE 517 Fall 2014/OSS E1450 cxm

2014-11-12T22:24:52Z

Xshao2: /* After Changes */

==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 [http://en.wikipedia.org/wiki/Semantics_(computer_science) semantics]. The syntax of JavaScript is actually derived from [http://en.wikipedia.org/wiki/C_(programming_language) C], while the semantics and design are influenced by [http://en.wikipedia.org/wiki/Self_(programming_language) Self] and [http://en.wikipedia.org/wiki/Scheme_(programming_language) Scheme] programming languages<ref>http://en.wikipedia.org/wiki/JavaScript</ref>. This mix of features makes it a multi-paradigm language, supporting [http://en.wikipedia.org/wiki/Object-oriented_programming object-oriented], [http://en.wikipedia.org/wiki/Imperative_programming imperative], and [http://en.wikipedia.org/wiki/Functional_programming 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 “Rubric” 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

* 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)

* The "deadline_name" and "description URL" could be hidden when you change the status of the checkbox in Due_Date tab

* 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
...
@reviewvarycheck = nil
@assignment_questionnaires.each do |aq|
if(!(aq.used_in_round.nil?))
@reviewvarycheck = 1
@q_id = aq.questionnaire_id
@qn = Questionnaire.find(@q_id)
if(@qn.display_type.eql?"Review")
@review_check = 1
elsif(@qn.display_type.eql?"Metareview")
@metareview_check=1
elsif(@qn.display_type.eql?"Author Feedback")
@author_check = 1
elsif(@qn.display_type.eql?"Teammate Review")
@teammate_check = 1
end
end
end
...
end

In the _rubrics.html.erb, we added a javascript function to handle the click action:

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.

In the assignment_controller.rb, we added a method to check if the name and url are NULL in database to make a decision in the initial display (or after webpage refreshes). If there are contents in the DB, which means someone has typed in some texts, it will display the two columns; on the contrary, it won't display to make the table simpler.:

def edit
...
@due_date_nameurl_notempty = "null"
@due_date_nameurl_notempty_checkbox = false
...
# Add by Xiaoqiang Shao, check if name and url in database is empty before webpage displays
@due_date_all.each do |dd|
if(!(dd.deadline_name.nil?))
if(dd.deadline_name.length>=1)
@due_date_nameurl_notempty = 1
@due_date_nameurl_notempty_checkbox = true
end
end
if(!(dd.description_url.nil?))
if(dd.description_url.length>=1)
@due_date_nameurl_notempty = 1
@due_date_nameurl_notempty_checkbox = true
end
end
end
...
end

And at any time, users can hide/show the two columns by checking the checkbox. Here are the main changes in _due_dates.html.erb:

function handleChangenameurl(checkvalue,due_date_name_column,due_date_url_column) {
var state = checkvalue;
var round_count = <%= @assignment.rounds_of_reviews%>;
if (!document.getElementById) {
return;
}
if (state == false && round_count >1){
//hide name and url colomns
for (i =1; i <= round_count; i++) {
removeDueDateTableElement('submission', i);
removeDueDateTableElement('review', i);
}
removeDueDateTableElement('metareview', 0);
for (i =1; i <= round_count; i++) {
addDueDateTableElement(null,'submission',i, <%= due_date(@assignment, 'submission', 0).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>); // or use questionnaire_options(@assignment, nil).to_json
addDueDateTableElement(null,'review', i, <%= due_date(@assignment, 'review', 0).to_json %>, <%= questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= assignment_questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>);
}
addDueDateTableElement(null,'metareview',0,<%= due_date(@assignment,'metareview', 0).to_json%>);
due_date_name_column.style.display="none";
due_date_url_column.style.display="none";
}
if (state == true && round_count >1){
//display name and url colomns
for (i =1; i <= round_count; i++) {
removeDueDateTableElement('submission', i);
removeDueDateTableElement('review', i);
}
removeDueDateTableElement('metareview', 0);
for (i =1; i <= round_count; i++) {
addDueDateTableElement(1,'submission', i, <%= due_date(@assignment, 'submission', 0).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>); // or use questionnaire_options(@assignment, nil).to_json
addDueDateTableElement(1,'review',i, <%= due_date(@assignment, 'review', 0).to_json %>, <%= questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= assignment_questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>);
}
addDueDateTableElement(1,'metareview',0,<%= due_date(@assignment,'metareview', 0).to_json%>);
due_date_name_column.removeAttribute("style");
due_date_url_column.removeAttribute("style");
}
else{
return;
}
}

<input name="changenameurl" type="hidden" value="false" />
<%= check_box_tag('changenameurl', 'true', @due_date_nameurl_notempty_checkbox,:onclick=>"handleChangenameurl(this.checked,due_date_name_column,due_date_url_column)" ) %>
<%= label_tag('changenameurl', 'Change name and description url?') %>

In the end corresponding changes should be made in the end of _due_dates.html.erb, after which the webpage will display corresponding contents (hide or display name and url columns according to whether they are empty):

function handleChangenameurl(checkvalue,due_date_name_column,due_date_url_column) {
<table class='exp' id='due_dates_table' style='padding:10px;min-width: 990px;overflow: hidden;'>
<tr id='due_date_heading'>
...
</tr>
...
<script>
jQuery(document).ready(function () {
<% for i in 1..@assignment.rounds_of_reviews %>
addDueDateTableElement(<%= @due_date_nameurl_notempty %>,'submission', <%=i%>, <%= due_date(@assignment, 'submission', i-1).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>); // or use questionnaire_options(@assignment, nil).to_json
addDueDateTableElement(<%= @due_date_nameurl_notempty %>,'review', <%=i%>, <%= due_date(@assignment, 'review', i-1).to_json %>, <%= questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= assignment_questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>);
<% end %>
addDueDateTableElement(<%= @due_date_nameurl_notempty %>,'metareview', 0, <%= due_date(@assignment, 'metareview').to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>);
//after webpage refreshes, hide or display name and url according to whether names and urls are empty in DB
var due_date_name_column=document.getElementById("due_date_name_column");
var due_date_url_column=document.getElementById("due_date_url_column");
<% if @due_date_nameurl_notempty =="null" %>
due_date_name_column.style.visibility="hidden";
due_date_url_column.style.visibility="hidden";
<% end %>
}());
</script>
</table>

== Cucumber Tests ==

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

Scenario 1: An instructor can set the "Review Rubric Varies by Round" for an assignment, and set due dates for all of submissions and reviews, as well as different rubrics would be used

Scenario 2: A student should see the review rubric for 1st round in the other's work link

Scenario 3: The instructor change the due date to start the 2nd round of review

Scenario 4: A student should see the review rubric for 2nd round in the other's work link

== References ==
<references/>

CSC/ECE 517 Fall 2014/OSS E1450 cxm

2014-11-12T22:24:12Z

Xshao2: /* Code Modifications */

==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 [http://en.wikipedia.org/wiki/Semantics_(computer_science) semantics]. The syntax of JavaScript is actually derived from [http://en.wikipedia.org/wiki/C_(programming_language) C], while the semantics and design are influenced by [http://en.wikipedia.org/wiki/Self_(programming_language) Self] and [http://en.wikipedia.org/wiki/Scheme_(programming_language) Scheme] programming languages<ref>http://en.wikipedia.org/wiki/JavaScript</ref>. This mix of features makes it a multi-paradigm language, supporting [http://en.wikipedia.org/wiki/Object-oriented_programming object-oriented], [http://en.wikipedia.org/wiki/Imperative_programming imperative], and [http://en.wikipedia.org/wiki/Functional_programming 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 “Rubric” 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

* 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)

* The "deadline_name" and "description URL" could be hidden when you change the status of the checkbox in Due_Date tab

* 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
...
@reviewvarycheck = nil
@assignment_questionnaires.each do |aq|
if(!(aq.used_in_round.nil?))
@reviewvarycheck = 1
@q_id = aq.questionnaire_id
@qn = Questionnaire.find(@q_id)
if(@qn.display_type.eql?"Review")
@review_check = 1
elsif(@qn.display_type.eql?"Metareview")
@metareview_check=1
elsif(@qn.display_type.eql?"Author Feedback")
@author_check = 1
elsif(@qn.display_type.eql?"Teammate Review")
@teammate_check = 1
end
end
end
...
end

In the _rubrics.html.erb, we added a javascript function to handle the click action:

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.

In the assignment_controller.rb, we added a method to check if the name and url are NULL in database to make a decision in the initial display (or after webpage refreshes). If there are contents in the DB, which means someone has typed in some texts, it will display the two columns; on the contrary, it won't display to make the table simpler.:

def edit
...
@due_date_nameurl_notempty = "null"
@due_date_nameurl_notempty_checkbox = false
...
# Add by Xiaoqiang Shao, check if name and url in database is empty before webpage displays
@due_date_all.each do |dd|
if(!(dd.deadline_name.nil?))
if(dd.deadline_name.length>=1)
@due_date_nameurl_notempty = 1
@due_date_nameurl_notempty_checkbox = true
end
end
if(!(dd.description_url.nil?))
if(dd.description_url.length>=1)
@due_date_nameurl_notempty = 1
@due_date_nameurl_notempty_checkbox = true
end
end
end
...
end

And at any time, users can hide/show the two columns by checking the checkbox. Here are the main changes in _due_dates.html.erb:

function handleChangenameurl(checkvalue,due_date_name_column,due_date_url_column) {
var state = checkvalue;
var round_count = <%= @assignment.rounds_of_reviews%>;
if (!document.getElementById) {
return;
}
if (state == false && round_count >1){
//hide name and url colomns
for (i =1; i <= round_count; i++) {
removeDueDateTableElement('submission', i);
removeDueDateTableElement('review', i);
}
removeDueDateTableElement('metareview', 0);
for (i =1; i <= round_count; i++) {
addDueDateTableElement(null,'submission',i, <%= due_date(@assignment, 'submission', 0).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>); // or use questionnaire_options(@assignment, nil).to_json
addDueDateTableElement(null,'review', i, <%= due_date(@assignment, 'review', 0).to_json %>, <%= questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= assignment_questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>);
}
addDueDateTableElement(null,'metareview',0,<%= due_date(@assignment,'metareview', 0).to_json%>);
due_date_name_column.style.display="none";
due_date_url_column.style.display="none";
}
if (state == true && round_count >1){
//display name and url colomns
for (i =1; i <= round_count; i++) {
removeDueDateTableElement('submission', i);
removeDueDateTableElement('review', i);
}
removeDueDateTableElement('metareview', 0);
for (i =1; i <= round_count; i++) {
addDueDateTableElement(1,'submission', i, <%= due_date(@assignment, 'submission', 0).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>); // or use questionnaire_options(@assignment, nil).to_json
addDueDateTableElement(1,'review',i, <%= due_date(@assignment, 'review', 0).to_json %>, <%= questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= assignment_questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>);
}
addDueDateTableElement(1,'metareview',0,<%= due_date(@assignment,'metareview', 0).to_json%>);
due_date_name_column.removeAttribute("style");
due_date_url_column.removeAttribute("style");
}
else{
return;
}
}

<input name="changenameurl" type="hidden" value="false" />
<%= check_box_tag('changenameurl', 'true', @due_date_nameurl_notempty_checkbox,:onclick=>"handleChangenameurl(this.checked,due_date_name_column,due_date_url_column)" ) %>
<%= label_tag('changenameurl', 'Change name and description url?') %>

In the end corresponding changes should be made in the end of _due_dates.html.erb, after which the webpage will display corresponding contents (hide or display name and url columns according to whether they are empty):

<table class='exp' id='due_dates_table' style='padding:10px;min-width: 990px;overflow: hidden;'>
<tr id='due_date_heading'>
...
</tr>
...
<script>
jQuery(document).ready(function () {
<% for i in 1..@assignment.rounds_of_reviews %>
addDueDateTableElement(<%= @due_date_nameurl_notempty %>,'submission', <%=i%>, <%= due_date(@assignment, 'submission', i-1).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>); // or use questionnaire_options(@assignment, nil).to_json
addDueDateTableElement(<%= @due_date_nameurl_notempty %>,'review', <%=i%>, <%= due_date(@assignment, 'review', i-1).to_json %>, <%= questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= assignment_questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>);
<% end %>
addDueDateTableElement(<%= @due_date_nameurl_notempty %>,'metareview', 0, <%= due_date(@assignment, 'metareview').to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>);
//after webpage refreshes, hide or display name and url according to whether names and urls are empty in DB
var due_date_name_column=document.getElementById("due_date_name_column");
var due_date_url_column=document.getElementById("due_date_url_column");
<% if @due_date_nameurl_notempty =="null" %>
due_date_name_column.style.visibility="hidden";
due_date_url_column.style.visibility="hidden";
<% end %>
}());
</script>
</table>

== Cucumber Tests ==

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

Scenario 1: An instructor can set the "Review Rubric Varies by Round" for an assignment, and set due dates for all of submissions and reviews, as well as different rubrics would be used

Scenario 2: A student should see the review rubric for 1st round in the other's work link

Scenario 3: The instructor change the due date to start the 2nd round of review

Scenario 4: A student should see the review rubric for 2nd round in the other's work link

== References ==
<references/>

CSC/ECE 517 Fall 2014/OSS E1450 cxm

2014-11-12T22:20:06Z

Xshao2: /* After Changes */

==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 [http://en.wikipedia.org/wiki/Semantics_(computer_science) semantics]. The syntax of JavaScript is actually derived from [http://en.wikipedia.org/wiki/C_(programming_language) C], while the semantics and design are influenced by [http://en.wikipedia.org/wiki/Self_(programming_language) Self] and [http://en.wikipedia.org/wiki/Scheme_(programming_language) Scheme] programming languages<ref>http://en.wikipedia.org/wiki/JavaScript</ref>. This mix of features makes it a multi-paradigm language, supporting [http://en.wikipedia.org/wiki/Object-oriented_programming object-oriented], [http://en.wikipedia.org/wiki/Imperative_programming imperative], and [http://en.wikipedia.org/wiki/Functional_programming 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 “Rubric” 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

* 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)

* The "deadline_name" and "description URL" could be hidden when you change the status of the checkbox in Due_Date tab

* 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
...
@reviewvarycheck = nil
@assignment_questionnaires.each do |aq|
if(!(aq.used_in_round.nil?))
@reviewvarycheck = 1
@q_id = aq.questionnaire_id
@qn = Questionnaire.find(@q_id)
if(@qn.display_type.eql?"Review")
@review_check = 1
elsif(@qn.display_type.eql?"Metareview")
@metareview_check=1
elsif(@qn.display_type.eql?"Author Feedback")
@author_check = 1
elsif(@qn.display_type.eql?"Teammate Review")
@teammate_check = 1
end
end
end
...
end

In the _rubrics.html.erb, we added a javascript function to handle the click action:

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.

In the assignment_controller.rb, we added a method to check if the name and url are NULL in database to make a decision in the initial display (or after webpage refreshes). If there are contents in the DB, which means someone has typed in some texts, it will display the two columns; on the contrary, it won't display to make the table simpler.:

def edit
...
@due_date_nameurl_notempty = "null"
@due_date_nameurl_notempty_checkbox = false
...
# Add by Xiaoqiang Shao, check if name and url in database is empty before webpage displays
@due_date_all.each do |dd|
if(!(dd.deadline_name.nil?))
if(dd.deadline_name.length>=1)
@due_date_nameurl_notempty = 1
@due_date_nameurl_notempty_checkbox = true
end
end
if(!(dd.description_url.nil?))
if(dd.description_url.length>=1)
@due_date_nameurl_notempty = 1
@due_date_nameurl_notempty_checkbox = true
end
end
end
...
end

And at any time, users can hide/show the two columns by checking the checkbox. Here are the main changes in _due_dates.html.erb:

function handleChangenameurl(checkvalue,due_date_name_column,due_date_url_column) {
var state = checkvalue;
var round_count = <%= @assignment.rounds_of_reviews%>;
if (!document.getElementById) {
return;
}
if (state == false && round_count >1){
//hide name and url colomns
for (i =1; i <= round_count; i++) {
removeDueDateTableElement('submission', i);
removeDueDateTableElement('review', i);
}
removeDueDateTableElement('metareview', 0);
for (i =1; i <= round_count; i++) {
addDueDateTableElement(null,'submission',i, <%= due_date(@assignment, 'submission', 0).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>); // or use questionnaire_options(@assignment, nil).to_json
addDueDateTableElement(null,'review', i, <%= due_date(@assignment, 'review', 0).to_json %>, <%= questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= assignment_questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>);
}
addDueDateTableElement(null,'metareview',0,<%= due_date(@assignment,'metareview', 0).to_json%>);
due_date_name_column.style.display="none";
due_date_url_column.style.display="none";
}
if (state == true && round_count >1){
//display name and url colomns
for (i =1; i <= round_count; i++) {
removeDueDateTableElement('submission', i);
removeDueDateTableElement('review', i);
}
removeDueDateTableElement('metareview', 0);
for (i =1; i <= round_count; i++) {
addDueDateTableElement(1,'submission', i, <%= due_date(@assignment, 'submission', 0).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>); // or use questionnaire_options(@assignment, nil).to_json
addDueDateTableElement(1,'review',i, <%= due_date(@assignment, 'review', 0).to_json %>, <%= questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= assignment_questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>);
}
addDueDateTableElement(1,'metareview',0,<%= due_date(@assignment,'metareview', 0).to_json%>);
due_date_name_column.removeAttribute("style");
due_date_url_column.removeAttribute("style");
}
else{
return;
}
}

<input name="changenameurl" type="hidden" value="false" />
<%= check_box_tag('changenameurl', 'true', @due_date_nameurl_notempty_checkbox,:onclick=>"handleChangenameurl(this.checked,due_date_name_column,due_date_url_column)" ) %>
<%= label_tag('changenameurl', 'Change name and description url?') %>

== Cucumber Tests ==

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

Scenario 1: An instructor can set the "Review Rubric Varies by Round" for an assignment, and set due dates for all of submissions and reviews, as well as different rubrics would be used

Scenario 2: A student should see the review rubric for 1st round in the other's work link

Scenario 3: The instructor change the due date to start the 2nd round of review

Scenario 4: A student should see the review rubric for 2nd round in the other's work link

== References ==
<references/>

CSC/ECE 517 Fall 2014/OSS E1450 cxm

2014-11-12T22:18:50Z

Xshao2: /* After Changes */

CSC/ECE 517 Fall 2014/OSS E1450 cxm

2014-11-12T22:18:32Z

Xshao2: /* After Changes */

CSC/ECE 517 Fall 2014/OSS E1450 cxm

2014-11-12T22:18:10Z

Xshao2: /* After Changes */

CSC/ECE 517 Fall 2014/OSS E1450 cxm

2014-11-12T22:17:39Z

Xshao2: /* After Changes */

==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 [http://en.wikipedia.org/wiki/Semantics_(computer_science) semantics]. The syntax of JavaScript is actually derived from [http://en.wikipedia.org/wiki/C_(programming_language) C], while the semantics and design are influenced by [http://en.wikipedia.org/wiki/Self_(programming_language) Self] and [http://en.wikipedia.org/wiki/Scheme_(programming_language) Scheme] programming languages<ref>http://en.wikipedia.org/wiki/JavaScript</ref>. This mix of features makes it a multi-paradigm language, supporting [http://en.wikipedia.org/wiki/Object-oriented_programming object-oriented], [http://en.wikipedia.org/wiki/Imperative_programming imperative], and [http://en.wikipedia.org/wiki/Functional_programming 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 “Rubric” 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

* 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)

* The "deadline_name" and "description URL" could be hidden when you change the status of the checkbox in Due_Date tab

* 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
...
@reviewvarycheck = nil
@assignment_questionnaires.each do |aq|
if(!(aq.used_in_round.nil?))
@reviewvarycheck = 1
@q_id = aq.questionnaire_id
@qn = Questionnaire.find(@q_id)
if(@qn.display_type.eql?"Review")
@review_check = 1
elsif(@qn.display_type.eql?"Metareview")
@metareview_check=1
elsif(@qn.display_type.eql?"Author Feedback")
@author_check = 1
elsif(@qn.display_type.eql?"Teammate Review")
@teammate_check = 1
end
end
end
...
end

In the _rubrics.html.erb, we added a javascript function to handle the click action:

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.

In the assignment_controller.rb, we added a method to check if the name and url are NULL in database to make a decision in the initial display (or after webpage refreshes). If there are contents in the DB, which means someone has typed in some texts, it will display the two columns; on the contrary, it won't display to make the table simpler.:

def edit
...
@due_date_nameurl_notempty = "null"
@due_date_nameurl_notempty_checkbox = false
...
# Add by Xiaoqiang Shao, check if name and url in database is empty before webpage displays
@due_date_all.each do |dd|
if(!(dd.deadline_name.nil?))
if(dd.deadline_name.length>=1)
@due_date_nameurl_notempty = 1
@due_date_nameurl_notempty_checkbox = true
end
end
if(!(dd.description_url.nil?))
if(dd.description_url.length>=1)
@due_date_nameurl_notempty = 1
@due_date_nameurl_notempty_checkbox = true
end
end
end
...
end

And at any time, users can hide/show the two columns by checking the checkbox.

function handleChangenameurl(checkvalue,due_date_name_column,due_date_url_column) {
var state = checkvalue;
var round_count = <%= @assignment.rounds_of_reviews%>;
if (!document.getElementById) {
return;
}
if (state == false && round_count >1){
//hide name and url colomns
for (i =1; i <= round_count; i++) {
removeDueDateTableElement('submission', i);
removeDueDateTableElement('review', i);
}
removeDueDateTableElement('metareview', 0);
for (i =1; i <= round_count; i++) {
addDueDateTableElement(null,'submission',i, <%= due_date(@assignment, 'submission', 0).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>); // or use questionnaire_options(@assignment, nil).to_json
addDueDateTableElement(null,'review', i, <%= due_date(@assignment, 'review', 0).to_json %>, <%= questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= assignment_questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>);
}
addDueDateTableElement(null,'metareview',0,<%= due_date(@assignment,'metareview', 0).to_json%>);
due_date_name_column.style.display="none";
due_date_url_column.style.display="none";
}
if (state == true && round_count >1){
//display name and url colomns
for (i =1; i <= round_count; i++) {
removeDueDateTableElement('submission', i);
removeDueDateTableElement('review', i);
}
removeDueDateTableElement('metareview', 0);
for (i =1; i <= round_count; i++) {
addDueDateTableElement(1,'submission', i, <%= due_date(@assignment, 'submission', 0).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>); // or use questionnaire_options(@assignment, nil).to_json
addDueDateTableElement(1,'review',i, <%= due_date(@assignment, 'review', 0).to_json %>, <%= questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= assignment_questionnaire(@assignment, 'ReviewQuestionnaire',nil).to_json %>,<%= questionnaire_options(@assignment, 'ReviewQuestionnaire').to_json %>);
}
addDueDateTableElement(1,'metareview',0,<%= due_date(@assignment,'metareview', 0).to_json%>);
due_date_name_column.removeAttribute("style");
due_date_url_column.removeAttribute("style");
}
else{
return;
}
}

<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?') %>

== Cucumber Tests ==

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

Scenario 1: An instructor can set the "Review Rubric Varies by Round" for an assignment, and set due dates for all of submissions and reviews, as well as different rubrics would be used

Scenario 2: A student should see the review rubric for 1st round in the other's work link

Scenario 3: The instructor change the due date to start the 2nd round of review

Scenario 4: A student should see the review rubric for 2nd round in the other's work link

== References ==
<references/>

CSC/ECE 517 Fall 2014/OSS E1450 cxm

2014-11-12T22:15:49Z

Xshao2: /* After Changes */

CSC/ECE 517 Fall 2014/OSS E1450 cxm

2014-11-12T22:15:27Z

Xshao2: /* After Changes */

CSC/ECE 517 Fall 2014/OSS E1450 cxm

2014-11-12T22:14:36Z

Xshao2: /* After Changes */

CSC/ECE 517 Fall 2014/OSS E1450 cxm

2014-11-12T22:13:48Z

Xshao2: /* After Changes */

CSC/ECE 517 Fall 2014/OSS E1450 cxm

2014-11-12T22:13:15Z

Xshao2: /* After Changes */

CSC/ECE 517 Fall 2014/OSS E1450 cxm

2014-11-12T22:12:18Z

Xshao2: /* After Changes */

CSC/ECE 517 Fall 2014/OSS E1450 cxm

2014-11-12T22:11:53Z

Xshao2: /* After Changes */

CSC/ECE 517 Fall 2014/OSS E1450 cxm

2014-11-12T22:11:25Z

Xshao2: /* After Changes */

CSC/ECE 517 Fall 2014/OSS E1450 cxm

2014-11-12T22:10:56Z

Xshao2: /* After Changes */

CSC/ECE 517 Fall 2014/OSS E1450 cxm

2014-11-12T22:06:38Z

Xshao2: /* After Changes */

CSC/ECE 517 Fall 2014/OSS E1450 cxm

2014-11-12T22:05:28Z

Xshao2: /* After Changes */

CSC/ECE 517 Fall 2014/OSS E1450 cxm

2014-11-12T22:05:16Z

Xshao2: /* After Changes */

CSC/ECE 517 Fall 2014/OSS E1450 cxm

2014-11-12T22:05:04Z

Xshao2: /* After Changes */

CSC/ECE 517 Fall 2014/OSS E1450 cxm

2014-11-12T20:50:56Z

Xshao2: /* Project Description */

CSC/ECE 517 Fall 2014/ch1a 19 mx

2014-09-26T03:44:06Z

Xshao2: /* Run in Cucumber */

'''Watir'''
----

= Introduction=
Watir('''W'''eb '''A'''pplication '''T'''est '''i'''n '''R'''uby), pronounced as 'water', is an automated test toolkit which uses the Ruby scripting language for automated tests to be developed and run against a web browser. <ref>http://www.httpwatch.com/rubywatir/</ref>It allows users to write tests that are easy to read and maintain, also simple and flexible. Watir was first developed by Bret Pettichord and Paul Rogers. It drives [http://en.wikipedia.org/wiki/Internet_Explorer Internet Explorer], [http://en.wikipedia.org/wiki/FirefoxMozilla Firefox|Firefox], [http://en.wikipedia.org/wiki/Chrome Google Chrome|Chrome], [http://en.wikipedia.org/wiki/Opera Opera (web browser)|Opera] and [http://en.wikipedia.org/wiki/Safari Safari (web browser)|Safari], and is available as a [http://en.wikipedia.org/wiki/RubyGems RubyGems] gem, <ref>http://en.wikipedia.org/wiki/Watir</ref> which is a free, open source Ruby library that can test web applications written in any language<ref>https://rubygems.org/gems/watir-classic</ref> and drive a web browser the same way an end user would. It clicks links, fills in forms, presses buttons. Watir can also check results, such as whether expected text appears on the page or not, or whether a control is enabled. <ref>http://watir.com/</ref>

Watir project consists of several smaller projects, including watir-classic, watir-webdriver and watirspec.

== Watir-classic ==
Watir-classic is a Watir driver for automating only Internet Explorer on Windows.<ref>https://github.com/watir/watir-classic</ref>

Watir-classic is able to work on Internet Explorer 8, 9 and 10<ref>http://rubydoc.info/gems/watir-classic/3.7.0/frames</ref>, and is supported by Ruby 1.8.7, 1.9.3 and 2.0.0.

== Watir-webdriver==
Watie-webdriver is an implementation built on WebDriver's Ruby bindings. It supports not only the Internet Explorer, but also namely Firefox, Chrome and Safari,<ref>https://github.com/watir/watir-webdriver</ref>which is a main difference compared with watir-classic.

== Watirspec ==
Watirspec combines best features of Watir [http://en.wikipedia.org/wiki/RSpec RSpec] and Ruby for browser-based functional testing.<ref>https://rubygems.org/gems/watirspec</ref>

Just like RubySpec is for Ruby, Watirspec is the executable specification of the Watir API.

= Overview =

== Web Application Testing ==
[http://en.wikipedia.org/wiki/Web_testing Web testing] is a software testing that focuses on web applications. Complete testing of a web-based system before going live can help address issues before the system is revealed to the public. Issues such as the basic functionality of the site, the security of the web application, its accessibility to handicapped users and fully able users, as well as readiness for expected traffic and number of users and the ability to survive a massive spike in user traffic, both of which are related to load testing.<ref>http://en.wikipedia.org/wiki/Web_testing</ref>

'''Web Testing Checklist:'''<ref>http://www.softwaretestinghelp.com/web-application-testing/</ref>

*Functionality Testing： Test for all the links in web pages, database connection, forms used in the web pages for submitting or getting information from user, as well as Cookie testing.

*Usability Testing: Test for navigation, contents and other user information for user help.

*Interface Testing: Test for main interfaces, such as Web server, application server interface and Database server interface. Check whether all the interactions between these servers are executed properly or not.

*Compatibility Testing: Test for the compatibility of your web site, which is a very critical testing aspect, including Browser compatibility, Operating system compatibility, Mobile browsing and Printing options compatibility.

*Performance Testing: Test for web application performance, which should include both Web Load Testing and Web Stress Testing.

== Ruby ==
Ruby is a dynamic, designed and developed in the mid-1990s by Yukihiro "Matz" Matsumoto in Japan, is a reflective, object-oriented, general-purpose programming language. Like other programming languages, Ruby gives you the power to connect to databases, read data files and spreadsheets, export XML, and structure your code as reusable libraries. Unlike other programming languages, Ruby is concise and often a joy to read.

According to its authors, Ruby was influenced by [http://en.wikipedia.org/wiki/Perl Perl], [http://en.wikipedia.org/wiki/Smalltalk Smalltalk], [http://en.wikipedia.org/wiki/Eiffel Eiffel], [http://en.wikipedia.org/wiki/Ada Ada], and [http://en.wikipedia.org/wiki/Lisp Lisp]. It supports multiple programming paradigms, including functional, object-oriented, and imperative. It also has a dynamic type system and automatic memory management.<ref>http://en.wikipedia.org/wiki/Ruby_(programming_language)</ref>

'''Several Features：'''<ref>http://www.starkdigital.net/ruby-programming</ref>
*Thoroughly object-oriented with inheritance, mixins and metaclasses
*Dynamic typing and duck typing
*Large standard library, including modules for [http://en.wikipedia.org/wiki/YAML YAML], [http://en.wikipedia.org/wiki/JSON JSON], [http://en.wikipedia.org/wiki/XML XML], [http://en.wikipedia.org/wiki/CGI CGI], [http://en.wikipedia.org/wiki/OpenSSL OpenSSL], [http://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol HTTP], [http://en.wikipedia.org/wiki/File_Transfer_Protocol FTP], [http://en.wikipedia.org/wiki/RSS RSS], [http://en.wikipedia.org/wiki/Curse_(disambiguation) curses], [http://en.wikipedia.org/wiki/Zlib zlib], and [http://en.wikipedia.org/wiki/Tk_(software) Tk]
*Dynamic reflection and alteration of objects to facilitate [http://en.wikipedia.org/wiki/Metaprogramming metaprogramming]
[http://www.starkdigital.net/ruby-programming See More Features.]

= Installation =
== Install Ruby on Linux ==
Use your relevant package manager to update or install Ruby with the following at a terminal window:

sudo apt-get install ruby # for Ubuntu / Debian users
sudo yum install ruby # for Red Hat / Fedora users
== Update RubyGems on Linux ==
Make sure you have the latest rubygems version 1.3.7 or above installed. Use your relevant package manager to install the latest version with the following at a terminal window:

sudo apt-get install rubygems # for Ubuntu / Debian users
sudo yum install rubygems # for Red Hat / Fedora users

== Install a HTML Inspector ==
To use Watir effectively, you’ll need to be able to browse through the structure of your application’s HTML pages. These tools help you do that.

*On Firefox, use Firebug
*On Internet Explorer, use the IE Developer Toolbar

== Installing or Updating RubyGems ==
While updating RubyGems, or installing any of the gems, you can use the following additional flags:

--no-rdoc --no-ri

For example:

gem update --system --no-rdoc --no-ri
gem install watir --no-rdoc --no-ri

= Make It Run =
After everything required installed, we can run the watir tests in several ways. Below three ways are listed, and each of them is designed to work on the live Watir demo form: http://bit.ly/watir-example.

== Run in .rb ==
First of all, let's see how to conduct the test in ruby on rails. The example was based on the example listed on a google form, it demonstrated watir's functionality such as entering text into a text field, clicking a button like a user does, checking to see if a page contains text and so on. Below is the step-by-step command to finish the test in .rb file, which means you can simply save these commands in a .rb file and run it with ruby.

''Example 1: <ref>http://watir.com/examples/</ref>''

*Require Ruby Watir gem first via the -rubygems command line option, or by using the RUBYOPT environment variable. You can also require it manually in your script:
<pre>
require 'rubygems'
</pre>

*Including Watir gem to drive Internet Explorer on Windows
<pre>
require 'watir'
</pre>

*Including Watir-WebDriver gem to drive Firefox/Chrome on Windows/Mac/Linux
<pre>
require 'watir-webdriver'
</pre>

*Starting a new browser & and going to our site
<pre>
browser = Watir::Browser.new
browser.goto 'http://bit.ly/watir-example'
</pre>

*Setting a text field

[[File:Text-field.png]]

<pre>
browser.text_field(:name => 'entry.0.single').set 'Watir'
</pre>

*Setting a multi-line text box

[[File:text-box1.png|text-box1.png]]
<pre>
browser.text_field(:name => 'entry.1.single').set "I come here from Australia. \n The weather is great here."
</pre>

*Setting and clearing a radio button

[[File:3.radio-buttons1.png]]
<pre>
browser.radio(:value => 'Watir').set
browser.radio(:value => 'Watir').clear
</pre>

*Setting and clearing check boxes

[[File:4.checkboxes.png]]
<pre>
browser.checkbox(:value => 'Ruby').set
browser.checkbox(:value => 'Python').set
browser.checkbox(:value => 'Python').clear
</pre>

*Clearing, getting and selecting selection list values

[[File:5.selection-list.png]]

<pre>
browser.select_list(:name => 'entry.6.single').clear
puts browser.select_list(:name => 'entry.6.single').options
browser.select_list(:name => 'entry.6.single').select 'Chrome'
</pre>

*Clicking a button

[[File:6.button.png]]
<pre>
browser.button(:name => 'submit').click
</pre>

*Checking for text in a page
<pre>
puts browser.text.include? 'Your response has been recorded.'
</pre>

*Checking the title of a page
<pre>
puts browser.title == 'Thanks!'
</pre>

== Run in Rspec ==
RSpec is a Behaviour-Driven Development tool for Ruby programmers. BDD is an approach to software development that combines Test-Driven Development, Domain Driven Design, and Acceptance Test-Driven Planning. RSpec helps you do the TDD part of that equation, focusing on the documentation and design aspects of TDD. The following code demonstrates using Watir and a basic RSpec example.[http://rspec.info/ More Info.]

''Example 2: <ref>http://watir.com/frameworks/</ref> ''

1. Install
 
<pre>
gem install rspec
</pre>

2. Example
 
<pre>
rspec test_spec.rb
</pre>
will execute the following rspec example:

'''test_spec.rb'''
 
<pre>
require "rubygems"
require "rspec"
require "watir-webdriver"

describe "google.com" do
let(:browser) { @browser ||= Watir::Browser.new :firefox }
before { browser.goto "http://google.com" }
after { browser.close }

it "should search for watir" do
browser.text_field(:name => "q").set "watir"
browser.button.click
browser.div(:id => "resultStats").wait_until_present
browser.title.should == "watir - Google Search"
end
end
</pre>

== Run in Cucumber ==
Cucumber lets software development teams describe how software should behave in plain text. The text is written in a business-readable domain-specific language and serves as documentation, automated tests and development-aid – all rolled into one format.[http://cukes.info/ More Info.]

''Example 3: <ref>http://watir.com/frameworks/</ref>''

1. Install
 
<pre>
gem install cucumber
</pre>

2. Example

<pre>
cucumber features
</pre>
will execute the following cucumber feature:
'''features/example.feature'''
 
<pre>
Feature: Search In order to use Google users must be able to search for content
Scenario: Search for a term
Given I have entered "watir" into the query
When I click "search"
Then I should see some results
</pre>

'''features/step_definitions/example_steps.rb'''
 
<pre>
require "watir-webdriver"
require "rspec/expectations"

Given /^I have entered "([^"]*)" into the query$/ do |term|
@browser ||= Watir::Browser.new :firefox
@browser.goto "google.com"
@browser.text_field(:name => "q").set term
end

When /^I click "([^"]*)"$/ do |button_name|
@browser.button.click
end

Then /^I should see some results$/ do
@browser.div(:id => "resultStats").wait_until_present
@browser.div(:id => "resultStats").should exist
@browser.close
end
</pre>

= Comparison with Other Tools =

There are some other framworks will do similar work as watir does, for example, [http://en.wikipedia.org/wiki/Cucumber_(software) Cucmber], [http://en.wikipedia.org/wiki/Capybara Capybara] and RSpec[http://en.wikipedia.org/wiki/RSpec RSpec]. But in comparison, they have different features and are usually used in conjecture.

In software engineering, behavior-driven development (abbreviated BDD) is a software development process based on test-driven development (TDD). <ref>http://en.wikipedia.org/wiki/Behavior-driven_development</ref> It's very important in software testing. The relationship between Watir and Cucmmber is usually designing a framework to test cucumber scenarios using Watir tool. [http://qastrategies.blogspot.com/2012/06/bdd-framework-to-test-web-application.html See Example]

The detailed characteristics and relationships are:

*Watir 
Put simply, Watir is a browser driver. Lightweight and simple to use, Watir excels at automating modern browsers. Built in Ruby, it does not have an IDE of it's own, but it works well with other testing frameworks and solutions in the Ruby ecosystem.

*Cucumber 
Cucumber lets software development teams describe how software should behave in plain english, it is designed to allow you to execute automated integration tests. It is a tool for implementing Behavior Driven Development.It can work nicely in conjecture with Capybara and RSpec.

*Capybara 
Capybara is a library written in the Ruby programming language which makes it easy to simulate how a user interacts with your application. It can talk with many different drivers which execute tests through the same clean and simple interface, including Selenium, Webkit or pure Ruby drivers.<ref>http://jnicklas.github.io/capybara/</ref>

*RSpec 
RSpec helps you do the TDD(Test-Driven Development) part of the whole development (combines Test-Driven Development, Domain Driven Design, and Acceptance Test-Driven Planning), focusing on the documentation and design aspects of TDD. A combination of RSpec and Watir makes really readable test scripts.<ref>http://www.ibmwcs.com/2010/08/testing-with-rspec-cucumber-selenium.html</ref>

:''Here's an video tutorial from Youtube introducing how to test with Ruby Cucumber RSpec Capybara Watir WebDriver Testing.[https://www.youtube.com/watch?v=jPH5Eiz32N0 More Info]''

= Pros and Cons =
== Pros ==
* No external server needed to run a test. Just run "ruby test.rb" and it goes, this simplifies any scripts used to execute the tests through continuous integration servers like [http://en.wikipedia.org/wiki/Hudson_%28software%29 Hudson] or [http://en.wikipedia.org/wiki/Bamboo_%28software%29 Bamboo] or whatever.<ref>http://www.quora.com/What-are-the-pros-and-cons-of-different-front-end-web-testing-frameworks-such-as-Selenium-or-Watir</ref>

* Rich API, which is pretty easy and once the users get the basics they can just guess how to write the code without needed alot of documentation.

* Tests can often be run through alternative tools, such as watir-webdriver, [http://watirmelon.com/2009/08/31/celerity-first-impressions/ celerity] and more, which are all more-or-less support the watir API. This means that if the users write their framework carefully, they would not be locked into watir.

* Watir-webdriver does work in both ruby and [http://en.wikipedia.org/wiki/JRuby jruby].

* Don't have much issue dealing with [http://en.wikipedia.org/wiki/Ajax_%28programming%29 AJAX], watir autumatically knows when the page finished loading.

* Typically runs faster than a comparable selenium test.

* Better support for headless browsers, like Celerity.

* Multi browser (& OS) support

*Provides an "attach" method which lets users programmatic access both the original domain window and the linked domain window from the same test.<ref>http://onestopqa.blogspot.com/2012/09/pros-cons-of-watir-selenium-or-sahi.html</ref>

== Cons ==
* Each browser's implementation is a little bit different, and the driver for each browser is written independently. This means inconsistent test results between browsers, which could be an issue sometime.

* API is ruby only, users have to learn Ruby first.

* Doesn't seem to be as widely used as selenium, a lil bit harder to find pretty good engineers.

* The task of porting Watir to a new browser isn’t an easy one, and the task of keeping every port of Watir in sync, with the same API, is difficult. <ref>http://watirmelon.com/2010/04/10/watir-selenium-webdriver/</ref>

= Reference =
<references></references>

= Further Reading =
1. An virtual experience on Watir, see how watir works in your eyes. https://www.youtube.com/watch?v=FxQXQGpImAo

2. Get started with watir in one minute. https://testwisely.com/testwise/docs/tutorials/watir

3. Tutorial on Ruby Cucumber RSpec Capybara Watir WebDriver Testing, know how they work here: https://www.youtube.com/watch?v=jPH5Eiz32N0

CSC/ECE 517 Fall 2014/ch1a 19 mx

2014-09-26T03:43:56Z

Xshao2: /* Run in Rspec */

'''Watir'''
----

= Introduction=
Watir('''W'''eb '''A'''pplication '''T'''est '''i'''n '''R'''uby), pronounced as 'water', is an automated test toolkit which uses the Ruby scripting language for automated tests to be developed and run against a web browser. <ref>http://www.httpwatch.com/rubywatir/</ref>It allows users to write tests that are easy to read and maintain, also simple and flexible. Watir was first developed by Bret Pettichord and Paul Rogers. It drives [http://en.wikipedia.org/wiki/Internet_Explorer Internet Explorer], [http://en.wikipedia.org/wiki/FirefoxMozilla Firefox|Firefox], [http://en.wikipedia.org/wiki/Chrome Google Chrome|Chrome], [http://en.wikipedia.org/wiki/Opera Opera (web browser)|Opera] and [http://en.wikipedia.org/wiki/Safari Safari (web browser)|Safari], and is available as a [http://en.wikipedia.org/wiki/RubyGems RubyGems] gem, <ref>http://en.wikipedia.org/wiki/Watir</ref> which is a free, open source Ruby library that can test web applications written in any language<ref>https://rubygems.org/gems/watir-classic</ref> and drive a web browser the same way an end user would. It clicks links, fills in forms, presses buttons. Watir can also check results, such as whether expected text appears on the page or not, or whether a control is enabled. <ref>http://watir.com/</ref>

Watir project consists of several smaller projects, including watir-classic, watir-webdriver and watirspec.

== Watir-classic ==
Watir-classic is a Watir driver for automating only Internet Explorer on Windows.<ref>https://github.com/watir/watir-classic</ref>

Watir-classic is able to work on Internet Explorer 8, 9 and 10<ref>http://rubydoc.info/gems/watir-classic/3.7.0/frames</ref>, and is supported by Ruby 1.8.7, 1.9.3 and 2.0.0.

== Watir-webdriver==
Watie-webdriver is an implementation built on WebDriver's Ruby bindings. It supports not only the Internet Explorer, but also namely Firefox, Chrome and Safari,<ref>https://github.com/watir/watir-webdriver</ref>which is a main difference compared with watir-classic.

== Watirspec ==
Watirspec combines best features of Watir [http://en.wikipedia.org/wiki/RSpec RSpec] and Ruby for browser-based functional testing.<ref>https://rubygems.org/gems/watirspec</ref>

Just like RubySpec is for Ruby, Watirspec is the executable specification of the Watir API.

= Overview =

== Web Application Testing ==
[http://en.wikipedia.org/wiki/Web_testing Web testing] is a software testing that focuses on web applications. Complete testing of a web-based system before going live can help address issues before the system is revealed to the public. Issues such as the basic functionality of the site, the security of the web application, its accessibility to handicapped users and fully able users, as well as readiness for expected traffic and number of users and the ability to survive a massive spike in user traffic, both of which are related to load testing.<ref>http://en.wikipedia.org/wiki/Web_testing</ref>

'''Web Testing Checklist:'''<ref>http://www.softwaretestinghelp.com/web-application-testing/</ref>

*Functionality Testing： Test for all the links in web pages, database connection, forms used in the web pages for submitting or getting information from user, as well as Cookie testing.

*Usability Testing: Test for navigation, contents and other user information for user help.

*Interface Testing: Test for main interfaces, such as Web server, application server interface and Database server interface. Check whether all the interactions between these servers are executed properly or not.

*Compatibility Testing: Test for the compatibility of your web site, which is a very critical testing aspect, including Browser compatibility, Operating system compatibility, Mobile browsing and Printing options compatibility.

*Performance Testing: Test for web application performance, which should include both Web Load Testing and Web Stress Testing.

== Ruby ==
Ruby is a dynamic, designed and developed in the mid-1990s by Yukihiro "Matz" Matsumoto in Japan, is a reflective, object-oriented, general-purpose programming language. Like other programming languages, Ruby gives you the power to connect to databases, read data files and spreadsheets, export XML, and structure your code as reusable libraries. Unlike other programming languages, Ruby is concise and often a joy to read.

According to its authors, Ruby was influenced by [http://en.wikipedia.org/wiki/Perl Perl], [http://en.wikipedia.org/wiki/Smalltalk Smalltalk], [http://en.wikipedia.org/wiki/Eiffel Eiffel], [http://en.wikipedia.org/wiki/Ada Ada], and [http://en.wikipedia.org/wiki/Lisp Lisp]. It supports multiple programming paradigms, including functional, object-oriented, and imperative. It also has a dynamic type system and automatic memory management.<ref>http://en.wikipedia.org/wiki/Ruby_(programming_language)</ref>

'''Several Features：'''<ref>http://www.starkdigital.net/ruby-programming</ref>
*Thoroughly object-oriented with inheritance, mixins and metaclasses
*Dynamic typing and duck typing
*Large standard library, including modules for [http://en.wikipedia.org/wiki/YAML YAML], [http://en.wikipedia.org/wiki/JSON JSON], [http://en.wikipedia.org/wiki/XML XML], [http://en.wikipedia.org/wiki/CGI CGI], [http://en.wikipedia.org/wiki/OpenSSL OpenSSL], [http://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol HTTP], [http://en.wikipedia.org/wiki/File_Transfer_Protocol FTP], [http://en.wikipedia.org/wiki/RSS RSS], [http://en.wikipedia.org/wiki/Curse_(disambiguation) curses], [http://en.wikipedia.org/wiki/Zlib zlib], and [http://en.wikipedia.org/wiki/Tk_(software) Tk]
*Dynamic reflection and alteration of objects to facilitate [http://en.wikipedia.org/wiki/Metaprogramming metaprogramming]
[http://www.starkdigital.net/ruby-programming See More Features.]

= Installation =
== Install Ruby on Linux ==
Use your relevant package manager to update or install Ruby with the following at a terminal window:

sudo apt-get install ruby # for Ubuntu / Debian users
sudo yum install ruby # for Red Hat / Fedora users
== Update RubyGems on Linux ==
Make sure you have the latest rubygems version 1.3.7 or above installed. Use your relevant package manager to install the latest version with the following at a terminal window:

sudo apt-get install rubygems # for Ubuntu / Debian users
sudo yum install rubygems # for Red Hat / Fedora users

== Install a HTML Inspector ==
To use Watir effectively, you’ll need to be able to browse through the structure of your application’s HTML pages. These tools help you do that.

*On Firefox, use Firebug
*On Internet Explorer, use the IE Developer Toolbar

== Installing or Updating RubyGems ==
While updating RubyGems, or installing any of the gems, you can use the following additional flags:

--no-rdoc --no-ri

For example:

gem update --system --no-rdoc --no-ri
gem install watir --no-rdoc --no-ri

= Make It Run =
After everything required installed, we can run the watir tests in several ways. Below three ways are listed, and each of them is designed to work on the live Watir demo form: http://bit.ly/watir-example.

== Run in .rb ==
First of all, let's see how to conduct the test in ruby on rails. The example was based on the example listed on a google form, it demonstrated watir's functionality such as entering text into a text field, clicking a button like a user does, checking to see if a page contains text and so on. Below is the step-by-step command to finish the test in .rb file, which means you can simply save these commands in a .rb file and run it with ruby.

''Example 1: <ref>http://watir.com/examples/</ref>''

*Require Ruby Watir gem first via the -rubygems command line option, or by using the RUBYOPT environment variable. You can also require it manually in your script:
<pre>
require 'rubygems'
</pre>

*Including Watir gem to drive Internet Explorer on Windows
<pre>
require 'watir'
</pre>

*Including Watir-WebDriver gem to drive Firefox/Chrome on Windows/Mac/Linux
<pre>
require 'watir-webdriver'
</pre>

*Starting a new browser & and going to our site
<pre>
browser = Watir::Browser.new
browser.goto 'http://bit.ly/watir-example'
</pre>

*Setting a text field

[[File:Text-field.png]]

<pre>
browser.text_field(:name => 'entry.0.single').set 'Watir'
</pre>

*Setting a multi-line text box

[[File:text-box1.png|text-box1.png]]
<pre>
browser.text_field(:name => 'entry.1.single').set "I come here from Australia. \n The weather is great here."
</pre>

*Setting and clearing a radio button

[[File:3.radio-buttons1.png]]
<pre>
browser.radio(:value => 'Watir').set
browser.radio(:value => 'Watir').clear
</pre>

*Setting and clearing check boxes

[[File:4.checkboxes.png]]
<pre>
browser.checkbox(:value => 'Ruby').set
browser.checkbox(:value => 'Python').set
browser.checkbox(:value => 'Python').clear
</pre>

*Clearing, getting and selecting selection list values

[[File:5.selection-list.png]]

<pre>
browser.select_list(:name => 'entry.6.single').clear
puts browser.select_list(:name => 'entry.6.single').options
browser.select_list(:name => 'entry.6.single').select 'Chrome'
</pre>

*Clicking a button

[[File:6.button.png]]
<pre>
browser.button(:name => 'submit').click
</pre>

*Checking for text in a page
<pre>
puts browser.text.include? 'Your response has been recorded.'
</pre>

*Checking the title of a page
<pre>
puts browser.title == 'Thanks!'
</pre>

== Run in Rspec ==
RSpec is a Behaviour-Driven Development tool for Ruby programmers. BDD is an approach to software development that combines Test-Driven Development, Domain Driven Design, and Acceptance Test-Driven Planning. RSpec helps you do the TDD part of that equation, focusing on the documentation and design aspects of TDD. The following code demonstrates using Watir and a basic RSpec example.[http://rspec.info/ More Info.]

''Example 2: <ref>http://watir.com/frameworks/</ref> ''

1. Install
 
<pre>
gem install rspec
</pre>

2. Example
 
<pre>
rspec test_spec.rb
</pre>
will execute the following rspec example:

'''test_spec.rb'''
 
<pre>
require "rubygems"
require "rspec"
require "watir-webdriver"

describe "google.com" do
let(:browser) { @browser ||= Watir::Browser.new :firefox }
before { browser.goto "http://google.com" }
after { browser.close }

it "should search for watir" do
browser.text_field(:name => "q").set "watir"
browser.button.click
browser.div(:id => "resultStats").wait_until_present
browser.title.should == "watir - Google Search"
end
end
</pre>

== Run in Cucumber ==
Cucumber lets software development teams describe how software should behave in plain text. The text is written in a business-readable domain-specific language and serves as documentation, automated tests and development-aid – all rolled into one format.[http://cukes.info/ More Info.]

Example 3: <ref>http://watir.com/frameworks/</ref>

1. Install
 
<pre>
gem install cucumber
</pre>

2. Example

<pre>
cucumber features
</pre>
will execute the following cucumber feature:
'''features/example.feature'''
 
<pre>
Feature: Search In order to use Google users must be able to search for content
Scenario: Search for a term
Given I have entered "watir" into the query
When I click "search"
Then I should see some results
</pre>

'''features/step_definitions/example_steps.rb'''
 
<pre>
require "watir-webdriver"
require "rspec/expectations"

Given /^I have entered "([^"]*)" into the query$/ do |term|
@browser ||= Watir::Browser.new :firefox
@browser.goto "google.com"
@browser.text_field(:name => "q").set term
end

When /^I click "([^"]*)"$/ do |button_name|
@browser.button.click
end

Then /^I should see some results$/ do
@browser.div(:id => "resultStats").wait_until_present
@browser.div(:id => "resultStats").should exist
@browser.close
end
</pre>

= Comparison with Other Tools =

There are some other framworks will do similar work as watir does, for example, [http://en.wikipedia.org/wiki/Cucumber_(software) Cucmber], [http://en.wikipedia.org/wiki/Capybara Capybara] and RSpec[http://en.wikipedia.org/wiki/RSpec RSpec]. But in comparison, they have different features and are usually used in conjecture.

In software engineering, behavior-driven development (abbreviated BDD) is a software development process based on test-driven development (TDD). <ref>http://en.wikipedia.org/wiki/Behavior-driven_development</ref> It's very important in software testing. The relationship between Watir and Cucmmber is usually designing a framework to test cucumber scenarios using Watir tool. [http://qastrategies.blogspot.com/2012/06/bdd-framework-to-test-web-application.html See Example]

The detailed characteristics and relationships are:

*Watir 
Put simply, Watir is a browser driver. Lightweight and simple to use, Watir excels at automating modern browsers. Built in Ruby, it does not have an IDE of it's own, but it works well with other testing frameworks and solutions in the Ruby ecosystem.

*Cucumber 
Cucumber lets software development teams describe how software should behave in plain english, it is designed to allow you to execute automated integration tests. It is a tool for implementing Behavior Driven Development.It can work nicely in conjecture with Capybara and RSpec.

*Capybara 
Capybara is a library written in the Ruby programming language which makes it easy to simulate how a user interacts with your application. It can talk with many different drivers which execute tests through the same clean and simple interface, including Selenium, Webkit or pure Ruby drivers.<ref>http://jnicklas.github.io/capybara/</ref>

*RSpec 
RSpec helps you do the TDD(Test-Driven Development) part of the whole development (combines Test-Driven Development, Domain Driven Design, and Acceptance Test-Driven Planning), focusing on the documentation and design aspects of TDD. A combination of RSpec and Watir makes really readable test scripts.<ref>http://www.ibmwcs.com/2010/08/testing-with-rspec-cucumber-selenium.html</ref>

:''Here's an video tutorial from Youtube introducing how to test with Ruby Cucumber RSpec Capybara Watir WebDriver Testing.[https://www.youtube.com/watch?v=jPH5Eiz32N0 More Info]''

= Pros and Cons =
== Pros ==
* No external server needed to run a test. Just run "ruby test.rb" and it goes, this simplifies any scripts used to execute the tests through continuous integration servers like [http://en.wikipedia.org/wiki/Hudson_%28software%29 Hudson] or [http://en.wikipedia.org/wiki/Bamboo_%28software%29 Bamboo] or whatever.<ref>http://www.quora.com/What-are-the-pros-and-cons-of-different-front-end-web-testing-frameworks-such-as-Selenium-or-Watir</ref>

* Rich API, which is pretty easy and once the users get the basics they can just guess how to write the code without needed alot of documentation.

* Tests can often be run through alternative tools, such as watir-webdriver, [http://watirmelon.com/2009/08/31/celerity-first-impressions/ celerity] and more, which are all more-or-less support the watir API. This means that if the users write their framework carefully, they would not be locked into watir.

* Watir-webdriver does work in both ruby and [http://en.wikipedia.org/wiki/JRuby jruby].

* Don't have much issue dealing with [http://en.wikipedia.org/wiki/Ajax_%28programming%29 AJAX], watir autumatically knows when the page finished loading.

* Typically runs faster than a comparable selenium test.

* Better support for headless browsers, like Celerity.

* Multi browser (& OS) support

*Provides an "attach" method which lets users programmatic access both the original domain window and the linked domain window from the same test.<ref>http://onestopqa.blogspot.com/2012/09/pros-cons-of-watir-selenium-or-sahi.html</ref>

== Cons ==
* Each browser's implementation is a little bit different, and the driver for each browser is written independently. This means inconsistent test results between browsers, which could be an issue sometime.

* API is ruby only, users have to learn Ruby first.

* Doesn't seem to be as widely used as selenium, a lil bit harder to find pretty good engineers.

* The task of porting Watir to a new browser isn’t an easy one, and the task of keeping every port of Watir in sync, with the same API, is difficult. <ref>http://watirmelon.com/2010/04/10/watir-selenium-webdriver/</ref>

= Reference =
<references></references>

= Further Reading =
1. An virtual experience on Watir, see how watir works in your eyes. https://www.youtube.com/watch?v=FxQXQGpImAo

2. Get started with watir in one minute. https://testwisely.com/testwise/docs/tutorials/watir

3. Tutorial on Ruby Cucumber RSpec Capybara Watir WebDriver Testing, know how they work here: https://www.youtube.com/watch?v=jPH5Eiz32N0

CSC/ECE 517 Fall 2014/ch1a 19 mx

2014-09-26T03:43:41Z

Xshao2: /* Run in .rb */

'''Watir'''
----

= Introduction=
Watir('''W'''eb '''A'''pplication '''T'''est '''i'''n '''R'''uby), pronounced as 'water', is an automated test toolkit which uses the Ruby scripting language for automated tests to be developed and run against a web browser. <ref>http://www.httpwatch.com/rubywatir/</ref>It allows users to write tests that are easy to read and maintain, also simple and flexible. Watir was first developed by Bret Pettichord and Paul Rogers. It drives [http://en.wikipedia.org/wiki/Internet_Explorer Internet Explorer], [http://en.wikipedia.org/wiki/FirefoxMozilla Firefox|Firefox], [http://en.wikipedia.org/wiki/Chrome Google Chrome|Chrome], [http://en.wikipedia.org/wiki/Opera Opera (web browser)|Opera] and [http://en.wikipedia.org/wiki/Safari Safari (web browser)|Safari], and is available as a [http://en.wikipedia.org/wiki/RubyGems RubyGems] gem, <ref>http://en.wikipedia.org/wiki/Watir</ref> which is a free, open source Ruby library that can test web applications written in any language<ref>https://rubygems.org/gems/watir-classic</ref> and drive a web browser the same way an end user would. It clicks links, fills in forms, presses buttons. Watir can also check results, such as whether expected text appears on the page or not, or whether a control is enabled. <ref>http://watir.com/</ref>

Watir project consists of several smaller projects, including watir-classic, watir-webdriver and watirspec.

== Watir-classic ==
Watir-classic is a Watir driver for automating only Internet Explorer on Windows.<ref>https://github.com/watir/watir-classic</ref>

Watir-classic is able to work on Internet Explorer 8, 9 and 10<ref>http://rubydoc.info/gems/watir-classic/3.7.0/frames</ref>, and is supported by Ruby 1.8.7, 1.9.3 and 2.0.0.

== Watir-webdriver==
Watie-webdriver is an implementation built on WebDriver's Ruby bindings. It supports not only the Internet Explorer, but also namely Firefox, Chrome and Safari,<ref>https://github.com/watir/watir-webdriver</ref>which is a main difference compared with watir-classic.

== Watirspec ==
Watirspec combines best features of Watir [http://en.wikipedia.org/wiki/RSpec RSpec] and Ruby for browser-based functional testing.<ref>https://rubygems.org/gems/watirspec</ref>

Just like RubySpec is for Ruby, Watirspec is the executable specification of the Watir API.

= Overview =

== Web Application Testing ==
[http://en.wikipedia.org/wiki/Web_testing Web testing] is a software testing that focuses on web applications. Complete testing of a web-based system before going live can help address issues before the system is revealed to the public. Issues such as the basic functionality of the site, the security of the web application, its accessibility to handicapped users and fully able users, as well as readiness for expected traffic and number of users and the ability to survive a massive spike in user traffic, both of which are related to load testing.<ref>http://en.wikipedia.org/wiki/Web_testing</ref>

'''Web Testing Checklist:'''<ref>http://www.softwaretestinghelp.com/web-application-testing/</ref>

*Functionality Testing： Test for all the links in web pages, database connection, forms used in the web pages for submitting or getting information from user, as well as Cookie testing.

*Usability Testing: Test for navigation, contents and other user information for user help.

*Interface Testing: Test for main interfaces, such as Web server, application server interface and Database server interface. Check whether all the interactions between these servers are executed properly or not.

*Compatibility Testing: Test for the compatibility of your web site, which is a very critical testing aspect, including Browser compatibility, Operating system compatibility, Mobile browsing and Printing options compatibility.

*Performance Testing: Test for web application performance, which should include both Web Load Testing and Web Stress Testing.

== Ruby ==
Ruby is a dynamic, designed and developed in the mid-1990s by Yukihiro "Matz" Matsumoto in Japan, is a reflective, object-oriented, general-purpose programming language. Like other programming languages, Ruby gives you the power to connect to databases, read data files and spreadsheets, export XML, and structure your code as reusable libraries. Unlike other programming languages, Ruby is concise and often a joy to read.

According to its authors, Ruby was influenced by [http://en.wikipedia.org/wiki/Perl Perl], [http://en.wikipedia.org/wiki/Smalltalk Smalltalk], [http://en.wikipedia.org/wiki/Eiffel Eiffel], [http://en.wikipedia.org/wiki/Ada Ada], and [http://en.wikipedia.org/wiki/Lisp Lisp]. It supports multiple programming paradigms, including functional, object-oriented, and imperative. It also has a dynamic type system and automatic memory management.<ref>http://en.wikipedia.org/wiki/Ruby_(programming_language)</ref>

'''Several Features：'''<ref>http://www.starkdigital.net/ruby-programming</ref>
*Thoroughly object-oriented with inheritance, mixins and metaclasses
*Dynamic typing and duck typing
*Large standard library, including modules for [http://en.wikipedia.org/wiki/YAML YAML], [http://en.wikipedia.org/wiki/JSON JSON], [http://en.wikipedia.org/wiki/XML XML], [http://en.wikipedia.org/wiki/CGI CGI], [http://en.wikipedia.org/wiki/OpenSSL OpenSSL], [http://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol HTTP], [http://en.wikipedia.org/wiki/File_Transfer_Protocol FTP], [http://en.wikipedia.org/wiki/RSS RSS], [http://en.wikipedia.org/wiki/Curse_(disambiguation) curses], [http://en.wikipedia.org/wiki/Zlib zlib], and [http://en.wikipedia.org/wiki/Tk_(software) Tk]
*Dynamic reflection and alteration of objects to facilitate [http://en.wikipedia.org/wiki/Metaprogramming metaprogramming]
[http://www.starkdigital.net/ruby-programming See More Features.]

= Installation =
== Install Ruby on Linux ==
Use your relevant package manager to update or install Ruby with the following at a terminal window:

sudo apt-get install ruby # for Ubuntu / Debian users
sudo yum install ruby # for Red Hat / Fedora users
== Update RubyGems on Linux ==
Make sure you have the latest rubygems version 1.3.7 or above installed. Use your relevant package manager to install the latest version with the following at a terminal window:

sudo apt-get install rubygems # for Ubuntu / Debian users
sudo yum install rubygems # for Red Hat / Fedora users

== Install a HTML Inspector ==
To use Watir effectively, you’ll need to be able to browse through the structure of your application’s HTML pages. These tools help you do that.

*On Firefox, use Firebug
*On Internet Explorer, use the IE Developer Toolbar

== Installing or Updating RubyGems ==
While updating RubyGems, or installing any of the gems, you can use the following additional flags:

--no-rdoc --no-ri

For example:

gem update --system --no-rdoc --no-ri
gem install watir --no-rdoc --no-ri

= Make It Run =
After everything required installed, we can run the watir tests in several ways. Below three ways are listed, and each of them is designed to work on the live Watir demo form: http://bit.ly/watir-example.

== Run in .rb ==
First of all, let's see how to conduct the test in ruby on rails. The example was based on the example listed on a google form, it demonstrated watir's functionality such as entering text into a text field, clicking a button like a user does, checking to see if a page contains text and so on. Below is the step-by-step command to finish the test in .rb file, which means you can simply save these commands in a .rb file and run it with ruby.

''Example 1: <ref>http://watir.com/examples/</ref>''

*Require Ruby Watir gem first via the -rubygems command line option, or by using the RUBYOPT environment variable. You can also require it manually in your script:
<pre>
require 'rubygems'
</pre>

*Including Watir gem to drive Internet Explorer on Windows
<pre>
require 'watir'
</pre>

*Including Watir-WebDriver gem to drive Firefox/Chrome on Windows/Mac/Linux
<pre>
require 'watir-webdriver'
</pre>

*Starting a new browser & and going to our site
<pre>
browser = Watir::Browser.new
browser.goto 'http://bit.ly/watir-example'
</pre>

*Setting a text field

[[File:Text-field.png]]

<pre>
browser.text_field(:name => 'entry.0.single').set 'Watir'
</pre>

*Setting a multi-line text box

[[File:text-box1.png|text-box1.png]]
<pre>
browser.text_field(:name => 'entry.1.single').set "I come here from Australia. \n The weather is great here."
</pre>

*Setting and clearing a radio button

[[File:3.radio-buttons1.png]]
<pre>
browser.radio(:value => 'Watir').set
browser.radio(:value => 'Watir').clear
</pre>

*Setting and clearing check boxes

[[File:4.checkboxes.png]]
<pre>
browser.checkbox(:value => 'Ruby').set
browser.checkbox(:value => 'Python').set
browser.checkbox(:value => 'Python').clear
</pre>

*Clearing, getting and selecting selection list values

[[File:5.selection-list.png]]

<pre>
browser.select_list(:name => 'entry.6.single').clear
puts browser.select_list(:name => 'entry.6.single').options
browser.select_list(:name => 'entry.6.single').select 'Chrome'
</pre>

*Clicking a button

[[File:6.button.png]]
<pre>
browser.button(:name => 'submit').click
</pre>

*Checking for text in a page
<pre>
puts browser.text.include? 'Your response has been recorded.'
</pre>

*Checking the title of a page
<pre>
puts browser.title == 'Thanks!'
</pre>

== Run in Rspec ==
RSpec is a Behaviour-Driven Development tool for Ruby programmers. BDD is an approach to software development that combines Test-Driven Development, Domain Driven Design, and Acceptance Test-Driven Planning. RSpec helps you do the TDD part of that equation, focusing on the documentation and design aspects of TDD. The following code demonstrates using Watir and a basic RSpec example.[http://rspec.info/ More Info.]

Example 2: <ref>http://watir.com/frameworks/</ref>

1. Install
 
<pre>
gem install rspec
</pre>

2. Example
 
<pre>
rspec test_spec.rb
</pre>
will execute the following rspec example:

'''test_spec.rb'''
 
<pre>
require "rubygems"
require "rspec"
require "watir-webdriver"

describe "google.com" do
let(:browser) { @browser ||= Watir::Browser.new :firefox }
before { browser.goto "http://google.com" }
after { browser.close }

it "should search for watir" do
browser.text_field(:name => "q").set "watir"
browser.button.click
browser.div(:id => "resultStats").wait_until_present
browser.title.should == "watir - Google Search"
end
end
</pre>

== Run in Cucumber ==
Cucumber lets software development teams describe how software should behave in plain text. The text is written in a business-readable domain-specific language and serves as documentation, automated tests and development-aid – all rolled into one format.[http://cukes.info/ More Info.]

Example 3: <ref>http://watir.com/frameworks/</ref>

1. Install
 
<pre>
gem install cucumber
</pre>

2. Example

<pre>
cucumber features
</pre>
will execute the following cucumber feature:
'''features/example.feature'''
 
<pre>
Feature: Search In order to use Google users must be able to search for content
Scenario: Search for a term
Given I have entered "watir" into the query
When I click "search"
Then I should see some results
</pre>

'''features/step_definitions/example_steps.rb'''
 
<pre>
require "watir-webdriver"
require "rspec/expectations"

Given /^I have entered "([^"]*)" into the query$/ do |term|
@browser ||= Watir::Browser.new :firefox
@browser.goto "google.com"
@browser.text_field(:name => "q").set term
end

When /^I click "([^"]*)"$/ do |button_name|
@browser.button.click
end

Then /^I should see some results$/ do
@browser.div(:id => "resultStats").wait_until_present
@browser.div(:id => "resultStats").should exist
@browser.close
end
</pre>

= Comparison with Other Tools =

There are some other framworks will do similar work as watir does, for example, [http://en.wikipedia.org/wiki/Cucumber_(software) Cucmber], [http://en.wikipedia.org/wiki/Capybara Capybara] and RSpec[http://en.wikipedia.org/wiki/RSpec RSpec]. But in comparison, they have different features and are usually used in conjecture.

In software engineering, behavior-driven development (abbreviated BDD) is a software development process based on test-driven development (TDD). <ref>http://en.wikipedia.org/wiki/Behavior-driven_development</ref> It's very important in software testing. The relationship between Watir and Cucmmber is usually designing a framework to test cucumber scenarios using Watir tool. [http://qastrategies.blogspot.com/2012/06/bdd-framework-to-test-web-application.html See Example]

The detailed characteristics and relationships are:

*Watir 
Put simply, Watir is a browser driver. Lightweight and simple to use, Watir excels at automating modern browsers. Built in Ruby, it does not have an IDE of it's own, but it works well with other testing frameworks and solutions in the Ruby ecosystem.

*Cucumber 
Cucumber lets software development teams describe how software should behave in plain english, it is designed to allow you to execute automated integration tests. It is a tool for implementing Behavior Driven Development.It can work nicely in conjecture with Capybara and RSpec.

*Capybara 
Capybara is a library written in the Ruby programming language which makes it easy to simulate how a user interacts with your application. It can talk with many different drivers which execute tests through the same clean and simple interface, including Selenium, Webkit or pure Ruby drivers.<ref>http://jnicklas.github.io/capybara/</ref>

*RSpec 
RSpec helps you do the TDD(Test-Driven Development) part of the whole development (combines Test-Driven Development, Domain Driven Design, and Acceptance Test-Driven Planning), focusing on the documentation and design aspects of TDD. A combination of RSpec and Watir makes really readable test scripts.<ref>http://www.ibmwcs.com/2010/08/testing-with-rspec-cucumber-selenium.html</ref>

:''Here's an video tutorial from Youtube introducing how to test with Ruby Cucumber RSpec Capybara Watir WebDriver Testing.[https://www.youtube.com/watch?v=jPH5Eiz32N0 More Info]''

= Pros and Cons =
== Pros ==
* No external server needed to run a test. Just run "ruby test.rb" and it goes, this simplifies any scripts used to execute the tests through continuous integration servers like [http://en.wikipedia.org/wiki/Hudson_%28software%29 Hudson] or [http://en.wikipedia.org/wiki/Bamboo_%28software%29 Bamboo] or whatever.<ref>http://www.quora.com/What-are-the-pros-and-cons-of-different-front-end-web-testing-frameworks-such-as-Selenium-or-Watir</ref>

* Rich API, which is pretty easy and once the users get the basics they can just guess how to write the code without needed alot of documentation.

* Tests can often be run through alternative tools, such as watir-webdriver, [http://watirmelon.com/2009/08/31/celerity-first-impressions/ celerity] and more, which are all more-or-less support the watir API. This means that if the users write their framework carefully, they would not be locked into watir.

* Watir-webdriver does work in both ruby and [http://en.wikipedia.org/wiki/JRuby jruby].

* Don't have much issue dealing with [http://en.wikipedia.org/wiki/Ajax_%28programming%29 AJAX], watir autumatically knows when the page finished loading.

* Typically runs faster than a comparable selenium test.

* Better support for headless browsers, like Celerity.

* Multi browser (& OS) support

*Provides an "attach" method which lets users programmatic access both the original domain window and the linked domain window from the same test.<ref>http://onestopqa.blogspot.com/2012/09/pros-cons-of-watir-selenium-or-sahi.html</ref>

== Cons ==
* Each browser's implementation is a little bit different, and the driver for each browser is written independently. This means inconsistent test results between browsers, which could be an issue sometime.

* API is ruby only, users have to learn Ruby first.

* Doesn't seem to be as widely used as selenium, a lil bit harder to find pretty good engineers.

* The task of porting Watir to a new browser isn’t an easy one, and the task of keeping every port of Watir in sync, with the same API, is difficult. <ref>http://watirmelon.com/2010/04/10/watir-selenium-webdriver/</ref>

= Reference =
<references></references>

= Further Reading =
1. An virtual experience on Watir, see how watir works in your eyes. https://www.youtube.com/watch?v=FxQXQGpImAo

2. Get started with watir in one minute. https://testwisely.com/testwise/docs/tutorials/watir

3. Tutorial on Ruby Cucumber RSpec Capybara Watir WebDriver Testing, know how they work here: https://www.youtube.com/watch?v=jPH5Eiz32N0

CSC/ECE 517 Fall 2014/ch1a 19 mx

2014-09-26T03:41:41Z

Xshao2: /* Comparison with Other Tools */

'''Watir'''
----

= Introduction=
Watir('''W'''eb '''A'''pplication '''T'''est '''i'''n '''R'''uby), pronounced as 'water', is an automated test toolkit which uses the Ruby scripting language for automated tests to be developed and run against a web browser. <ref>http://www.httpwatch.com/rubywatir/</ref>It allows users to write tests that are easy to read and maintain, also simple and flexible. Watir was first developed by Bret Pettichord and Paul Rogers. It drives [http://en.wikipedia.org/wiki/Internet_Explorer Internet Explorer], [http://en.wikipedia.org/wiki/FirefoxMozilla Firefox|Firefox], [http://en.wikipedia.org/wiki/Chrome Google Chrome|Chrome], [http://en.wikipedia.org/wiki/Opera Opera (web browser)|Opera] and [http://en.wikipedia.org/wiki/Safari Safari (web browser)|Safari], and is available as a [http://en.wikipedia.org/wiki/RubyGems RubyGems] gem, <ref>http://en.wikipedia.org/wiki/Watir</ref> which is a free, open source Ruby library that can test web applications written in any language<ref>https://rubygems.org/gems/watir-classic</ref> and drive a web browser the same way an end user would. It clicks links, fills in forms, presses buttons. Watir can also check results, such as whether expected text appears on the page or not, or whether a control is enabled. <ref>http://watir.com/</ref>

Watir project consists of several smaller projects, including watir-classic, watir-webdriver and watirspec.

== Watir-classic ==
Watir-classic is a Watir driver for automating only Internet Explorer on Windows.<ref>https://github.com/watir/watir-classic</ref>

Watir-classic is able to work on Internet Explorer 8, 9 and 10<ref>http://rubydoc.info/gems/watir-classic/3.7.0/frames</ref>, and is supported by Ruby 1.8.7, 1.9.3 and 2.0.0.

== Watir-webdriver==
Watie-webdriver is an implementation built on WebDriver's Ruby bindings. It supports not only the Internet Explorer, but also namely Firefox, Chrome and Safari,<ref>https://github.com/watir/watir-webdriver</ref>which is a main difference compared with watir-classic.

== Watirspec ==
Watirspec combines best features of Watir [http://en.wikipedia.org/wiki/RSpec RSpec] and Ruby for browser-based functional testing.<ref>https://rubygems.org/gems/watirspec</ref>

Just like RubySpec is for Ruby, Watirspec is the executable specification of the Watir API.

= Overview =

== Web Application Testing ==
[http://en.wikipedia.org/wiki/Web_testing Web testing] is a software testing that focuses on web applications. Complete testing of a web-based system before going live can help address issues before the system is revealed to the public. Issues such as the basic functionality of the site, the security of the web application, its accessibility to handicapped users and fully able users, as well as readiness for expected traffic and number of users and the ability to survive a massive spike in user traffic, both of which are related to load testing.<ref>http://en.wikipedia.org/wiki/Web_testing</ref>

'''Web Testing Checklist:'''<ref>http://www.softwaretestinghelp.com/web-application-testing/</ref>

*Functionality Testing： Test for all the links in web pages, database connection, forms used in the web pages for submitting or getting information from user, as well as Cookie testing.

*Usability Testing: Test for navigation, contents and other user information for user help.

*Interface Testing: Test for main interfaces, such as Web server, application server interface and Database server interface. Check whether all the interactions between these servers are executed properly or not.

*Compatibility Testing: Test for the compatibility of your web site, which is a very critical testing aspect, including Browser compatibility, Operating system compatibility, Mobile browsing and Printing options compatibility.

*Performance Testing: Test for web application performance, which should include both Web Load Testing and Web Stress Testing.

== Ruby ==
Ruby is a dynamic, designed and developed in the mid-1990s by Yukihiro "Matz" Matsumoto in Japan, is a reflective, object-oriented, general-purpose programming language. Like other programming languages, Ruby gives you the power to connect to databases, read data files and spreadsheets, export XML, and structure your code as reusable libraries. Unlike other programming languages, Ruby is concise and often a joy to read.

According to its authors, Ruby was influenced by [http://en.wikipedia.org/wiki/Perl Perl], [http://en.wikipedia.org/wiki/Smalltalk Smalltalk], [http://en.wikipedia.org/wiki/Eiffel Eiffel], [http://en.wikipedia.org/wiki/Ada Ada], and [http://en.wikipedia.org/wiki/Lisp Lisp]. It supports multiple programming paradigms, including functional, object-oriented, and imperative. It also has a dynamic type system and automatic memory management.<ref>http://en.wikipedia.org/wiki/Ruby_(programming_language)</ref>

'''Several Features：'''<ref>http://www.starkdigital.net/ruby-programming</ref>
*Thoroughly object-oriented with inheritance, mixins and metaclasses
*Dynamic typing and duck typing
*Large standard library, including modules for [http://en.wikipedia.org/wiki/YAML YAML], [http://en.wikipedia.org/wiki/JSON JSON], [http://en.wikipedia.org/wiki/XML XML], [http://en.wikipedia.org/wiki/CGI CGI], [http://en.wikipedia.org/wiki/OpenSSL OpenSSL], [http://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol HTTP], [http://en.wikipedia.org/wiki/File_Transfer_Protocol FTP], [http://en.wikipedia.org/wiki/RSS RSS], [http://en.wikipedia.org/wiki/Curse_(disambiguation) curses], [http://en.wikipedia.org/wiki/Zlib zlib], and [http://en.wikipedia.org/wiki/Tk_(software) Tk]
*Dynamic reflection and alteration of objects to facilitate [http://en.wikipedia.org/wiki/Metaprogramming metaprogramming]
[http://www.starkdigital.net/ruby-programming See More Features.]

= Installation =
== Install Ruby on Linux ==
Use your relevant package manager to update or install Ruby with the following at a terminal window:

sudo apt-get install ruby # for Ubuntu / Debian users
sudo yum install ruby # for Red Hat / Fedora users
== Update RubyGems on Linux ==
Make sure you have the latest rubygems version 1.3.7 or above installed. Use your relevant package manager to install the latest version with the following at a terminal window:

sudo apt-get install rubygems # for Ubuntu / Debian users
sudo yum install rubygems # for Red Hat / Fedora users

== Install a HTML Inspector ==
To use Watir effectively, you’ll need to be able to browse through the structure of your application’s HTML pages. These tools help you do that.

*On Firefox, use Firebug
*On Internet Explorer, use the IE Developer Toolbar

== Installing or Updating RubyGems ==
While updating RubyGems, or installing any of the gems, you can use the following additional flags:

--no-rdoc --no-ri

For example:

gem update --system --no-rdoc --no-ri
gem install watir --no-rdoc --no-ri

= Make It Run =
After everything required installed, we can run the watir tests in several ways. Below three ways are listed, and each of them is designed to work on the live Watir demo form: http://bit.ly/watir-example.

== Run in .rb ==
First of all, let's see how to conduct the test in ruby on rails. The example was based on the example listed on a google form, it demonstrated watir's functionality such as entering text into a text field, clicking a button like a user does, checking to see if a page contains text and so on. Below is the step-by-step command to finish the test in .rb file, which means you can simply save these commands in a .rb file and run it with ruby.

Example 1: <ref>http://watir.com/examples/</ref>

*Require Ruby Watir gem first via the -rubygems command line option, or by using the RUBYOPT environment variable. You can also require it manually in your script:
<pre>
require 'rubygems'
</pre>

*Including Watir gem to drive Internet Explorer on Windows
<pre>
require 'watir'
</pre>

*Including Watir-WebDriver gem to drive Firefox/Chrome on Windows/Mac/Linux
<pre>
require 'watir-webdriver'
</pre>

*Starting a new browser & and going to our site
<pre>
browser = Watir::Browser.new
browser.goto 'http://bit.ly/watir-example'
</pre>

*Setting a text field

[[File:Text-field.png]]

<pre>
browser.text_field(:name => 'entry.0.single').set 'Watir'
</pre>

*Setting a multi-line text box

[[File:text-box1.png|text-box1.png]]
<pre>
browser.text_field(:name => 'entry.1.single').set "I come here from Australia. \n The weather is great here."
</pre>

*Setting and clearing a radio button

[[File:3.radio-buttons1.png]]
<pre>
browser.radio(:value => 'Watir').set
browser.radio(:value => 'Watir').clear
</pre>

*Setting and clearing check boxes

[[File:4.checkboxes.png]]
<pre>
browser.checkbox(:value => 'Ruby').set
browser.checkbox(:value => 'Python').set
browser.checkbox(:value => 'Python').clear
</pre>

*Clearing, getting and selecting selection list values

[[File:5.selection-list.png]]

<pre>
browser.select_list(:name => 'entry.6.single').clear
puts browser.select_list(:name => 'entry.6.single').options
browser.select_list(:name => 'entry.6.single').select 'Chrome'
</pre>

*Clicking a button

[[File:6.button.png]]
<pre>
browser.button(:name => 'submit').click
</pre>

*Checking for text in a page
<pre>
puts browser.text.include? 'Your response has been recorded.'
</pre>

*Checking the title of a page
<pre>
puts browser.title == 'Thanks!'
</pre>

== Run in Rspec ==
RSpec is a Behaviour-Driven Development tool for Ruby programmers. BDD is an approach to software development that combines Test-Driven Development, Domain Driven Design, and Acceptance Test-Driven Planning. RSpec helps you do the TDD part of that equation, focusing on the documentation and design aspects of TDD. The following code demonstrates using Watir and a basic RSpec example.[http://rspec.info/ More Info.]

Example 2: <ref>http://watir.com/frameworks/</ref>

1. Install
 
<pre>
gem install rspec
</pre>

2. Example
 
<pre>
rspec test_spec.rb
</pre>
will execute the following rspec example:

'''test_spec.rb'''
 
<pre>
require "rubygems"
require "rspec"
require "watir-webdriver"

describe "google.com" do
let(:browser) { @browser ||= Watir::Browser.new :firefox }
before { browser.goto "http://google.com" }
after { browser.close }

it "should search for watir" do
browser.text_field(:name => "q").set "watir"
browser.button.click
browser.div(:id => "resultStats").wait_until_present
browser.title.should == "watir - Google Search"
end
end
</pre>

== Run in Cucumber ==
Cucumber lets software development teams describe how software should behave in plain text. The text is written in a business-readable domain-specific language and serves as documentation, automated tests and development-aid – all rolled into one format.[http://cukes.info/ More Info.]

Example 3: <ref>http://watir.com/frameworks/</ref>

1. Install
 
<pre>
gem install cucumber
</pre>

2. Example

<pre>
cucumber features
</pre>
will execute the following cucumber feature:
'''features/example.feature'''
 
<pre>
Feature: Search In order to use Google users must be able to search for content
Scenario: Search for a term
Given I have entered "watir" into the query
When I click "search"
Then I should see some results
</pre>

'''features/step_definitions/example_steps.rb'''
 
<pre>
require "watir-webdriver"
require "rspec/expectations"

Given /^I have entered "([^"]*)" into the query$/ do |term|
@browser ||= Watir::Browser.new :firefox
@browser.goto "google.com"
@browser.text_field(:name => "q").set term
end

When /^I click "([^"]*)"$/ do |button_name|
@browser.button.click
end

Then /^I should see some results$/ do
@browser.div(:id => "resultStats").wait_until_present
@browser.div(:id => "resultStats").should exist
@browser.close
end
</pre>

= Comparison with Other Tools =

There are some other framworks will do similar work as watir does, for example, [http://en.wikipedia.org/wiki/Cucumber_(software) Cucmber], [http://en.wikipedia.org/wiki/Capybara Capybara] and RSpec[http://en.wikipedia.org/wiki/RSpec RSpec]. But in comparison, they have different features and are usually used in conjecture.

In software engineering, behavior-driven development (abbreviated BDD) is a software development process based on test-driven development (TDD). <ref>http://en.wikipedia.org/wiki/Behavior-driven_development</ref> It's very important in software testing. The relationship between Watir and Cucmmber is usually designing a framework to test cucumber scenarios using Watir tool. [http://qastrategies.blogspot.com/2012/06/bdd-framework-to-test-web-application.html See Example]

The detailed characteristics and relationships are:

*Watir 
Put simply, Watir is a browser driver. Lightweight and simple to use, Watir excels at automating modern browsers. Built in Ruby, it does not have an IDE of it's own, but it works well with other testing frameworks and solutions in the Ruby ecosystem.

*Cucumber 
Cucumber lets software development teams describe how software should behave in plain english, it is designed to allow you to execute automated integration tests. It is a tool for implementing Behavior Driven Development.It can work nicely in conjecture with Capybara and RSpec.

*Capybara 
Capybara is a library written in the Ruby programming language which makes it easy to simulate how a user interacts with your application. It can talk with many different drivers which execute tests through the same clean and simple interface, including Selenium, Webkit or pure Ruby drivers.<ref>http://jnicklas.github.io/capybara/</ref>

*RSpec 
RSpec helps you do the TDD(Test-Driven Development) part of the whole development (combines Test-Driven Development, Domain Driven Design, and Acceptance Test-Driven Planning), focusing on the documentation and design aspects of TDD. A combination of RSpec and Watir makes really readable test scripts.<ref>http://www.ibmwcs.com/2010/08/testing-with-rspec-cucumber-selenium.html</ref>

:''Here's an video tutorial from Youtube introducing how to test with Ruby Cucumber RSpec Capybara Watir WebDriver Testing.[https://www.youtube.com/watch?v=jPH5Eiz32N0 More Info]''

= Pros and Cons =
== Pros ==
* No external server needed to run a test. Just run "ruby test.rb" and it goes, this simplifies any scripts used to execute the tests through continuous integration servers like [http://en.wikipedia.org/wiki/Hudson_%28software%29 Hudson] or [http://en.wikipedia.org/wiki/Bamboo_%28software%29 Bamboo] or whatever.<ref>http://www.quora.com/What-are-the-pros-and-cons-of-different-front-end-web-testing-frameworks-such-as-Selenium-or-Watir</ref>

* Rich API, which is pretty easy and once the users get the basics they can just guess how to write the code without needed alot of documentation.

* Tests can often be run through alternative tools, such as watir-webdriver, [http://watirmelon.com/2009/08/31/celerity-first-impressions/ celerity] and more, which are all more-or-less support the watir API. This means that if the users write their framework carefully, they would not be locked into watir.

* Watir-webdriver does work in both ruby and [http://en.wikipedia.org/wiki/JRuby jruby].

* Don't have much issue dealing with [http://en.wikipedia.org/wiki/Ajax_%28programming%29 AJAX], watir autumatically knows when the page finished loading.

* Typically runs faster than a comparable selenium test.

* Better support for headless browsers, like Celerity.

* Multi browser (& OS) support

*Provides an "attach" method which lets users programmatic access both the original domain window and the linked domain window from the same test.<ref>http://onestopqa.blogspot.com/2012/09/pros-cons-of-watir-selenium-or-sahi.html</ref>

== Cons ==
* Each browser's implementation is a little bit different, and the driver for each browser is written independently. This means inconsistent test results between browsers, which could be an issue sometime.

* API is ruby only, users have to learn Ruby first.

* Doesn't seem to be as widely used as selenium, a lil bit harder to find pretty good engineers.

* The task of porting Watir to a new browser isn’t an easy one, and the task of keeping every port of Watir in sync, with the same API, is difficult. <ref>http://watirmelon.com/2010/04/10/watir-selenium-webdriver/</ref>

= Reference =
<references></references>

= Further Reading =
1. An virtual experience on Watir, see how watir works in your eyes. https://www.youtube.com/watch?v=FxQXQGpImAo

2. Get started with watir in one minute. https://testwisely.com/testwise/docs/tutorials/watir

3. Tutorial on Ruby Cucumber RSpec Capybara Watir WebDriver Testing, know how they work here: https://www.youtube.com/watch?v=jPH5Eiz32N0

CSC/ECE 517 Fall 2014/ch1a 19 mx

2014-09-26T03:41:24Z

Xshao2: /* Comparison with Other Tools */

'''Watir'''
----

= Introduction=
Watir('''W'''eb '''A'''pplication '''T'''est '''i'''n '''R'''uby), pronounced as 'water', is an automated test toolkit which uses the Ruby scripting language for automated tests to be developed and run against a web browser. <ref>http://www.httpwatch.com/rubywatir/</ref>It allows users to write tests that are easy to read and maintain, also simple and flexible. Watir was first developed by Bret Pettichord and Paul Rogers. It drives [http://en.wikipedia.org/wiki/Internet_Explorer Internet Explorer], [http://en.wikipedia.org/wiki/FirefoxMozilla Firefox|Firefox], [http://en.wikipedia.org/wiki/Chrome Google Chrome|Chrome], [http://en.wikipedia.org/wiki/Opera Opera (web browser)|Opera] and [http://en.wikipedia.org/wiki/Safari Safari (web browser)|Safari], and is available as a [http://en.wikipedia.org/wiki/RubyGems RubyGems] gem, <ref>http://en.wikipedia.org/wiki/Watir</ref> which is a free, open source Ruby library that can test web applications written in any language<ref>https://rubygems.org/gems/watir-classic</ref> and drive a web browser the same way an end user would. It clicks links, fills in forms, presses buttons. Watir can also check results, such as whether expected text appears on the page or not, or whether a control is enabled. <ref>http://watir.com/</ref>

Watir project consists of several smaller projects, including watir-classic, watir-webdriver and watirspec.

== Watir-classic ==
Watir-classic is a Watir driver for automating only Internet Explorer on Windows.<ref>https://github.com/watir/watir-classic</ref>

Watir-classic is able to work on Internet Explorer 8, 9 and 10<ref>http://rubydoc.info/gems/watir-classic/3.7.0/frames</ref>, and is supported by Ruby 1.8.7, 1.9.3 and 2.0.0.

== Watir-webdriver==
Watie-webdriver is an implementation built on WebDriver's Ruby bindings. It supports not only the Internet Explorer, but also namely Firefox, Chrome and Safari,<ref>https://github.com/watir/watir-webdriver</ref>which is a main difference compared with watir-classic.

== Watirspec ==
Watirspec combines best features of Watir [http://en.wikipedia.org/wiki/RSpec RSpec] and Ruby for browser-based functional testing.<ref>https://rubygems.org/gems/watirspec</ref>

Just like RubySpec is for Ruby, Watirspec is the executable specification of the Watir API.

= Overview =

== Web Application Testing ==
[http://en.wikipedia.org/wiki/Web_testing Web testing] is a software testing that focuses on web applications. Complete testing of a web-based system before going live can help address issues before the system is revealed to the public. Issues such as the basic functionality of the site, the security of the web application, its accessibility to handicapped users and fully able users, as well as readiness for expected traffic and number of users and the ability to survive a massive spike in user traffic, both of which are related to load testing.<ref>http://en.wikipedia.org/wiki/Web_testing</ref>

'''Web Testing Checklist:'''<ref>http://www.softwaretestinghelp.com/web-application-testing/</ref>

*Functionality Testing： Test for all the links in web pages, database connection, forms used in the web pages for submitting or getting information from user, as well as Cookie testing.

*Usability Testing: Test for navigation, contents and other user information for user help.

*Interface Testing: Test for main interfaces, such as Web server, application server interface and Database server interface. Check whether all the interactions between these servers are executed properly or not.

*Compatibility Testing: Test for the compatibility of your web site, which is a very critical testing aspect, including Browser compatibility, Operating system compatibility, Mobile browsing and Printing options compatibility.

*Performance Testing: Test for web application performance, which should include both Web Load Testing and Web Stress Testing.

== Ruby ==
Ruby is a dynamic, designed and developed in the mid-1990s by Yukihiro "Matz" Matsumoto in Japan, is a reflective, object-oriented, general-purpose programming language. Like other programming languages, Ruby gives you the power to connect to databases, read data files and spreadsheets, export XML, and structure your code as reusable libraries. Unlike other programming languages, Ruby is concise and often a joy to read.

According to its authors, Ruby was influenced by [http://en.wikipedia.org/wiki/Perl Perl], [http://en.wikipedia.org/wiki/Smalltalk Smalltalk], [http://en.wikipedia.org/wiki/Eiffel Eiffel], [http://en.wikipedia.org/wiki/Ada Ada], and [http://en.wikipedia.org/wiki/Lisp Lisp]. It supports multiple programming paradigms, including functional, object-oriented, and imperative. It also has a dynamic type system and automatic memory management.<ref>http://en.wikipedia.org/wiki/Ruby_(programming_language)</ref>

'''Several Features：'''<ref>http://www.starkdigital.net/ruby-programming</ref>
*Thoroughly object-oriented with inheritance, mixins and metaclasses
*Dynamic typing and duck typing
*Large standard library, including modules for [http://en.wikipedia.org/wiki/YAML YAML], [http://en.wikipedia.org/wiki/JSON JSON], [http://en.wikipedia.org/wiki/XML XML], [http://en.wikipedia.org/wiki/CGI CGI], [http://en.wikipedia.org/wiki/OpenSSL OpenSSL], [http://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol HTTP], [http://en.wikipedia.org/wiki/File_Transfer_Protocol FTP], [http://en.wikipedia.org/wiki/RSS RSS], [http://en.wikipedia.org/wiki/Curse_(disambiguation) curses], [http://en.wikipedia.org/wiki/Zlib zlib], and [http://en.wikipedia.org/wiki/Tk_(software) Tk]
*Dynamic reflection and alteration of objects to facilitate [http://en.wikipedia.org/wiki/Metaprogramming metaprogramming]
[http://www.starkdigital.net/ruby-programming See More Features.]

= Installation =
== Install Ruby on Linux ==
Use your relevant package manager to update or install Ruby with the following at a terminal window:

sudo apt-get install ruby # for Ubuntu / Debian users
sudo yum install ruby # for Red Hat / Fedora users
== Update RubyGems on Linux ==
Make sure you have the latest rubygems version 1.3.7 or above installed. Use your relevant package manager to install the latest version with the following at a terminal window:

sudo apt-get install rubygems # for Ubuntu / Debian users
sudo yum install rubygems # for Red Hat / Fedora users

== Install a HTML Inspector ==
To use Watir effectively, you’ll need to be able to browse through the structure of your application’s HTML pages. These tools help you do that.

*On Firefox, use Firebug
*On Internet Explorer, use the IE Developer Toolbar

== Installing or Updating RubyGems ==
While updating RubyGems, or installing any of the gems, you can use the following additional flags:

--no-rdoc --no-ri

For example:

gem update --system --no-rdoc --no-ri
gem install watir --no-rdoc --no-ri

= Make It Run =
After everything required installed, we can run the watir tests in several ways. Below three ways are listed, and each of them is designed to work on the live Watir demo form: http://bit.ly/watir-example.

== Run in .rb ==
First of all, let's see how to conduct the test in ruby on rails. The example was based on the example listed on a google form, it demonstrated watir's functionality such as entering text into a text field, clicking a button like a user does, checking to see if a page contains text and so on. Below is the step-by-step command to finish the test in .rb file, which means you can simply save these commands in a .rb file and run it with ruby.

Example 1: <ref>http://watir.com/examples/</ref>

*Require Ruby Watir gem first via the -rubygems command line option, or by using the RUBYOPT environment variable. You can also require it manually in your script:
<pre>
require 'rubygems'
</pre>

*Including Watir gem to drive Internet Explorer on Windows
<pre>
require 'watir'
</pre>

*Including Watir-WebDriver gem to drive Firefox/Chrome on Windows/Mac/Linux
<pre>
require 'watir-webdriver'
</pre>

*Starting a new browser & and going to our site
<pre>
browser = Watir::Browser.new
browser.goto 'http://bit.ly/watir-example'
</pre>

*Setting a text field

[[File:Text-field.png]]

<pre>
browser.text_field(:name => 'entry.0.single').set 'Watir'
</pre>

*Setting a multi-line text box

[[File:text-box1.png|text-box1.png]]
<pre>
browser.text_field(:name => 'entry.1.single').set "I come here from Australia. \n The weather is great here."
</pre>

*Setting and clearing a radio button

[[File:3.radio-buttons1.png]]
<pre>
browser.radio(:value => 'Watir').set
browser.radio(:value => 'Watir').clear
</pre>

*Setting and clearing check boxes

[[File:4.checkboxes.png]]
<pre>
browser.checkbox(:value => 'Ruby').set
browser.checkbox(:value => 'Python').set
browser.checkbox(:value => 'Python').clear
</pre>

*Clearing, getting and selecting selection list values

[[File:5.selection-list.png]]

<pre>
browser.select_list(:name => 'entry.6.single').clear
puts browser.select_list(:name => 'entry.6.single').options
browser.select_list(:name => 'entry.6.single').select 'Chrome'
</pre>

*Clicking a button

[[File:6.button.png]]
<pre>
browser.button(:name => 'submit').click
</pre>

*Checking for text in a page
<pre>
puts browser.text.include? 'Your response has been recorded.'
</pre>

*Checking the title of a page
<pre>
puts browser.title == 'Thanks!'
</pre>

== Run in Rspec ==
RSpec is a Behaviour-Driven Development tool for Ruby programmers. BDD is an approach to software development that combines Test-Driven Development, Domain Driven Design, and Acceptance Test-Driven Planning. RSpec helps you do the TDD part of that equation, focusing on the documentation and design aspects of TDD. The following code demonstrates using Watir and a basic RSpec example.[http://rspec.info/ More Info.]

Example 2: <ref>http://watir.com/frameworks/</ref>

1. Install
 
<pre>
gem install rspec
</pre>

2. Example
 
<pre>
rspec test_spec.rb
</pre>
will execute the following rspec example:

'''test_spec.rb'''
 
<pre>
require "rubygems"
require "rspec"
require "watir-webdriver"

describe "google.com" do
let(:browser) { @browser ||= Watir::Browser.new :firefox }
before { browser.goto "http://google.com" }
after { browser.close }

it "should search for watir" do
browser.text_field(:name => "q").set "watir"
browser.button.click
browser.div(:id => "resultStats").wait_until_present
browser.title.should == "watir - Google Search"
end
end
</pre>

== Run in Cucumber ==
Cucumber lets software development teams describe how software should behave in plain text. The text is written in a business-readable domain-specific language and serves as documentation, automated tests and development-aid – all rolled into one format.[http://cukes.info/ More Info.]

Example 3: <ref>http://watir.com/frameworks/</ref>

1. Install
 
<pre>
gem install cucumber
</pre>

2. Example

<pre>
cucumber features
</pre>
will execute the following cucumber feature:
'''features/example.feature'''
 
<pre>
Feature: Search In order to use Google users must be able to search for content
Scenario: Search for a term
Given I have entered "watir" into the query
When I click "search"
Then I should see some results
</pre>

'''features/step_definitions/example_steps.rb'''
 
<pre>
require "watir-webdriver"
require "rspec/expectations"

Given /^I have entered "([^"]*)" into the query$/ do |term|
@browser ||= Watir::Browser.new :firefox
@browser.goto "google.com"
@browser.text_field(:name => "q").set term
end

When /^I click "([^"]*)"$/ do |button_name|
@browser.button.click
end

Then /^I should see some results$/ do
@browser.div(:id => "resultStats").wait_until_present
@browser.div(:id => "resultStats").should exist
@browser.close
end
</pre>

= Comparison with Other Tools =

There are some other framworks will do similar work as watir does, for example, [http://en.wikipedia.org/wiki/Cucumber_(software) Cucmber], [http://en.wikipedia.org/wiki/Capybara Capybara] and RSpec[http://en.wikipedia.org/wiki/RSpec RSpec]. But in comparison, they have different features and are usually used in conjecture.

In software engineering, behavior-driven development (abbreviated BDD) is a software development process based on test-driven development (TDD). <ref>http://en.wikipedia.org/wiki/Behavior-driven_development</ref> It's very important in software testing. The relationship between Watir and Cucmmber is usually designing a framework to test cucumber scenarios using Watir tool. [http://qastrategies.blogspot.com/2012/06/bdd-framework-to-test-web-application.html See Example]

The detailed charateristics and relationships are:

*Watir 
Put simply, Watir is a browser driver. Lightweight and simple to use, Watir excels at automating modern browsers. Built in Ruby, it does not have an IDE of it's own, but it works well with other testing frameworks and solutions in the Ruby ecosystem.

*Cucumber 
Cucumber lets software development teams describe how software should behave in plain english, it is designed to allow you to execute automated integration tests. It is a tool for implementing Behavior Driven Development.It can work nicely in conjecture with Capybara and RSpec.

*Capybara 
Capybara is a library written in the Ruby programming language which makes it easy to simulate how a user interacts with your application. It can talk with many different drivers which execute tests through the same clean and simple interface, including Selenium, Webkit or pure Ruby drivers.<ref>http://jnicklas.github.io/capybara/</ref>

*RSpec 
RSpec helps you do the TDD(Test-Driven Development) part of the whole development (combines Test-Driven Development, Domain Driven Design, and Acceptance Test-Driven Planning), focusing on the documentation and design aspects of TDD. A combination of RSpec and Watir makes really readable test scripts.<ref>http://www.ibmwcs.com/2010/08/testing-with-rspec-cucumber-selenium.html</ref>

:''Here's an video tutorial from Youtube introducing how to test with Ruby Cucumber RSpec Capybara Watir WebDriver Testing.[https://www.youtube.com/watch?v=jPH5Eiz32N0 More Info]''

= Pros and Cons =
== Pros ==
* No external server needed to run a test. Just run "ruby test.rb" and it goes, this simplifies any scripts used to execute the tests through continuous integration servers like [http://en.wikipedia.org/wiki/Hudson_%28software%29 Hudson] or [http://en.wikipedia.org/wiki/Bamboo_%28software%29 Bamboo] or whatever.<ref>http://www.quora.com/What-are-the-pros-and-cons-of-different-front-end-web-testing-frameworks-such-as-Selenium-or-Watir</ref>

* Rich API, which is pretty easy and once the users get the basics they can just guess how to write the code without needed alot of documentation.

* Tests can often be run through alternative tools, such as watir-webdriver, [http://watirmelon.com/2009/08/31/celerity-first-impressions/ celerity] and more, which are all more-or-less support the watir API. This means that if the users write their framework carefully, they would not be locked into watir.

* Watir-webdriver does work in both ruby and [http://en.wikipedia.org/wiki/JRuby jruby].

* Don't have much issue dealing with [http://en.wikipedia.org/wiki/Ajax_%28programming%29 AJAX], watir autumatically knows when the page finished loading.

* Typically runs faster than a comparable selenium test.

* Better support for headless browsers, like Celerity.

* Multi browser (& OS) support

*Provides an "attach" method which lets users programmatic access both the original domain window and the linked domain window from the same test.<ref>http://onestopqa.blogspot.com/2012/09/pros-cons-of-watir-selenium-or-sahi.html</ref>

== Cons ==
* Each browser's implementation is a little bit different, and the driver for each browser is written independently. This means inconsistent test results between browsers, which could be an issue sometime.

* API is ruby only, users have to learn Ruby first.

* Doesn't seem to be as widely used as selenium, a lil bit harder to find pretty good engineers.

* The task of porting Watir to a new browser isn’t an easy one, and the task of keeping every port of Watir in sync, with the same API, is difficult. <ref>http://watirmelon.com/2010/04/10/watir-selenium-webdriver/</ref>

= Reference =
<references></references>

= Further Reading =
1. An virtual experience on Watir, see how watir works in your eyes. https://www.youtube.com/watch?v=FxQXQGpImAo

2. Get started with watir in one minute. https://testwisely.com/testwise/docs/tutorials/watir

3. Tutorial on Ruby Cucumber RSpec Capybara Watir WebDriver Testing, know how they work here: https://www.youtube.com/watch?v=jPH5Eiz32N0

CSC/ECE 517 Fall 2014/ch1a 19 mx

2014-09-26T03:40:57Z

Xshao2: /* Comparison with Other Tools */

'''Watir'''
----

= Introduction=
Watir('''W'''eb '''A'''pplication '''T'''est '''i'''n '''R'''uby), pronounced as 'water', is an automated test toolkit which uses the Ruby scripting language for automated tests to be developed and run against a web browser. <ref>http://www.httpwatch.com/rubywatir/</ref>It allows users to write tests that are easy to read and maintain, also simple and flexible. Watir was first developed by Bret Pettichord and Paul Rogers. It drives [http://en.wikipedia.org/wiki/Internet_Explorer Internet Explorer], [http://en.wikipedia.org/wiki/FirefoxMozilla Firefox|Firefox], [http://en.wikipedia.org/wiki/Chrome Google Chrome|Chrome], [http://en.wikipedia.org/wiki/Opera Opera (web browser)|Opera] and [http://en.wikipedia.org/wiki/Safari Safari (web browser)|Safari], and is available as a [http://en.wikipedia.org/wiki/RubyGems RubyGems] gem, <ref>http://en.wikipedia.org/wiki/Watir</ref> which is a free, open source Ruby library that can test web applications written in any language<ref>https://rubygems.org/gems/watir-classic</ref> and drive a web browser the same way an end user would. It clicks links, fills in forms, presses buttons. Watir can also check results, such as whether expected text appears on the page or not, or whether a control is enabled. <ref>http://watir.com/</ref>

Watir project consists of several smaller projects, including watir-classic, watir-webdriver and watirspec.

== Watir-classic ==
Watir-classic is a Watir driver for automating only Internet Explorer on Windows.<ref>https://github.com/watir/watir-classic</ref>

Watir-classic is able to work on Internet Explorer 8, 9 and 10<ref>http://rubydoc.info/gems/watir-classic/3.7.0/frames</ref>, and is supported by Ruby 1.8.7, 1.9.3 and 2.0.0.

== Watir-webdriver==
Watie-webdriver is an implementation built on WebDriver's Ruby bindings. It supports not only the Internet Explorer, but also namely Firefox, Chrome and Safari,<ref>https://github.com/watir/watir-webdriver</ref>which is a main difference compared with watir-classic.

== Watirspec ==
Watirspec combines best features of Watir [http://en.wikipedia.org/wiki/RSpec RSpec] and Ruby for browser-based functional testing.<ref>https://rubygems.org/gems/watirspec</ref>

Just like RubySpec is for Ruby, Watirspec is the executable specification of the Watir API.

= Overview =

== Web Application Testing ==
[http://en.wikipedia.org/wiki/Web_testing Web testing] is a software testing that focuses on web applications. Complete testing of a web-based system before going live can help address issues before the system is revealed to the public. Issues such as the basic functionality of the site, the security of the web application, its accessibility to handicapped users and fully able users, as well as readiness for expected traffic and number of users and the ability to survive a massive spike in user traffic, both of which are related to load testing.<ref>http://en.wikipedia.org/wiki/Web_testing</ref>

'''Web Testing Checklist:'''<ref>http://www.softwaretestinghelp.com/web-application-testing/</ref>

*Functionality Testing： Test for all the links in web pages, database connection, forms used in the web pages for submitting or getting information from user, as well as Cookie testing.

*Usability Testing: Test for navigation, contents and other user information for user help.

*Interface Testing: Test for main interfaces, such as Web server, application server interface and Database server interface. Check whether all the interactions between these servers are executed properly or not.

*Compatibility Testing: Test for the compatibility of your web site, which is a very critical testing aspect, including Browser compatibility, Operating system compatibility, Mobile browsing and Printing options compatibility.

*Performance Testing: Test for web application performance, which should include both Web Load Testing and Web Stress Testing.

== Ruby ==
Ruby is a dynamic, designed and developed in the mid-1990s by Yukihiro "Matz" Matsumoto in Japan, is a reflective, object-oriented, general-purpose programming language. Like other programming languages, Ruby gives you the power to connect to databases, read data files and spreadsheets, export XML, and structure your code as reusable libraries. Unlike other programming languages, Ruby is concise and often a joy to read.

According to its authors, Ruby was influenced by [http://en.wikipedia.org/wiki/Perl Perl], [http://en.wikipedia.org/wiki/Smalltalk Smalltalk], [http://en.wikipedia.org/wiki/Eiffel Eiffel], [http://en.wikipedia.org/wiki/Ada Ada], and [http://en.wikipedia.org/wiki/Lisp Lisp]. It supports multiple programming paradigms, including functional, object-oriented, and imperative. It also has a dynamic type system and automatic memory management.<ref>http://en.wikipedia.org/wiki/Ruby_(programming_language)</ref>

'''Several Features：'''<ref>http://www.starkdigital.net/ruby-programming</ref>
*Thoroughly object-oriented with inheritance, mixins and metaclasses
*Dynamic typing and duck typing
*Large standard library, including modules for [http://en.wikipedia.org/wiki/YAML YAML], [http://en.wikipedia.org/wiki/JSON JSON], [http://en.wikipedia.org/wiki/XML XML], [http://en.wikipedia.org/wiki/CGI CGI], [http://en.wikipedia.org/wiki/OpenSSL OpenSSL], [http://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol HTTP], [http://en.wikipedia.org/wiki/File_Transfer_Protocol FTP], [http://en.wikipedia.org/wiki/RSS RSS], [http://en.wikipedia.org/wiki/Curse_(disambiguation) curses], [http://en.wikipedia.org/wiki/Zlib zlib], and [http://en.wikipedia.org/wiki/Tk_(software) Tk]
*Dynamic reflection and alteration of objects to facilitate [http://en.wikipedia.org/wiki/Metaprogramming metaprogramming]
[http://www.starkdigital.net/ruby-programming See More Features.]

= Installation =
== Install Ruby on Linux ==
Use your relevant package manager to update or install Ruby with the following at a terminal window:

sudo apt-get install ruby # for Ubuntu / Debian users
sudo yum install ruby # for Red Hat / Fedora users
== Update RubyGems on Linux ==
Make sure you have the latest rubygems version 1.3.7 or above installed. Use your relevant package manager to install the latest version with the following at a terminal window:

sudo apt-get install rubygems # for Ubuntu / Debian users
sudo yum install rubygems # for Red Hat / Fedora users

== Install a HTML Inspector ==
To use Watir effectively, you’ll need to be able to browse through the structure of your application’s HTML pages. These tools help you do that.

*On Firefox, use Firebug
*On Internet Explorer, use the IE Developer Toolbar

== Installing or Updating RubyGems ==
While updating RubyGems, or installing any of the gems, you can use the following additional flags:

--no-rdoc --no-ri

For example:

gem update --system --no-rdoc --no-ri
gem install watir --no-rdoc --no-ri

= Make It Run =
After everything required installed, we can run the watir tests in several ways. Below three ways are listed, and each of them is designed to work on the live Watir demo form: http://bit.ly/watir-example.

== Run in .rb ==
First of all, let's see how to conduct the test in ruby on rails. The example was based on the example listed on a google form, it demonstrated watir's functionality such as entering text into a text field, clicking a button like a user does, checking to see if a page contains text and so on. Below is the step-by-step command to finish the test in .rb file, which means you can simply save these commands in a .rb file and run it with ruby.

Example 1: <ref>http://watir.com/examples/</ref>

*Require Ruby Watir gem first via the -rubygems command line option, or by using the RUBYOPT environment variable. You can also require it manually in your script:
<pre>
require 'rubygems'
</pre>

*Including Watir gem to drive Internet Explorer on Windows
<pre>
require 'watir'
</pre>

*Including Watir-WebDriver gem to drive Firefox/Chrome on Windows/Mac/Linux
<pre>
require 'watir-webdriver'
</pre>

*Starting a new browser & and going to our site
<pre>
browser = Watir::Browser.new
browser.goto 'http://bit.ly/watir-example'
</pre>

*Setting a text field

[[File:Text-field.png]]

<pre>
browser.text_field(:name => 'entry.0.single').set 'Watir'
</pre>

*Setting a multi-line text box

[[File:text-box1.png|text-box1.png]]
<pre>
browser.text_field(:name => 'entry.1.single').set "I come here from Australia. \n The weather is great here."
</pre>

*Setting and clearing a radio button

[[File:3.radio-buttons1.png]]
<pre>
browser.radio(:value => 'Watir').set
browser.radio(:value => 'Watir').clear
</pre>

*Setting and clearing check boxes

[[File:4.checkboxes.png]]
<pre>
browser.checkbox(:value => 'Ruby').set
browser.checkbox(:value => 'Python').set
browser.checkbox(:value => 'Python').clear
</pre>

*Clearing, getting and selecting selection list values

[[File:5.selection-list.png]]

<pre>
browser.select_list(:name => 'entry.6.single').clear
puts browser.select_list(:name => 'entry.6.single').options
browser.select_list(:name => 'entry.6.single').select 'Chrome'
</pre>

*Clicking a button

[[File:6.button.png]]
<pre>
browser.button(:name => 'submit').click
</pre>

*Checking for text in a page
<pre>
puts browser.text.include? 'Your response has been recorded.'
</pre>

*Checking the title of a page
<pre>
puts browser.title == 'Thanks!'
</pre>

== Run in Rspec ==
RSpec is a Behaviour-Driven Development tool for Ruby programmers. BDD is an approach to software development that combines Test-Driven Development, Domain Driven Design, and Acceptance Test-Driven Planning. RSpec helps you do the TDD part of that equation, focusing on the documentation and design aspects of TDD. The following code demonstrates using Watir and a basic RSpec example.[http://rspec.info/ More Info.]

Example 2: <ref>http://watir.com/frameworks/</ref>

1. Install
 
<pre>
gem install rspec
</pre>

2. Example
 
<pre>
rspec test_spec.rb
</pre>
will execute the following rspec example:

'''test_spec.rb'''
 
<pre>
require "rubygems"
require "rspec"
require "watir-webdriver"

describe "google.com" do
let(:browser) { @browser ||= Watir::Browser.new :firefox }
before { browser.goto "http://google.com" }
after { browser.close }

it "should search for watir" do
browser.text_field(:name => "q").set "watir"
browser.button.click
browser.div(:id => "resultStats").wait_until_present
browser.title.should == "watir - Google Search"
end
end
</pre>

== Run in Cucumber ==
Cucumber lets software development teams describe how software should behave in plain text. The text is written in a business-readable domain-specific language and serves as documentation, automated tests and development-aid – all rolled into one format.[http://cukes.info/ More Info.]

Example 3: <ref>http://watir.com/frameworks/</ref>

1. Install
 
<pre>
gem install cucumber
</pre>

2. Example

<pre>
cucumber features
</pre>
will execute the following cucumber feature:
'''features/example.feature'''
 
<pre>
Feature: Search In order to use Google users must be able to search for content
Scenario: Search for a term
Given I have entered "watir" into the query
When I click "search"
Then I should see some results
</pre>

'''features/step_definitions/example_steps.rb'''
 
<pre>
require "watir-webdriver"
require "rspec/expectations"

Given /^I have entered "([^"]*)" into the query$/ do |term|
@browser ||= Watir::Browser.new :firefox
@browser.goto "google.com"
@browser.text_field(:name => "q").set term
end

When /^I click "([^"]*)"$/ do |button_name|
@browser.button.click
end

Then /^I should see some results$/ do
@browser.div(:id => "resultStats").wait_until_present
@browser.div(:id => "resultStats").should exist
@browser.close
end
</pre>

= Comparison with Other Tools =

There are some other framworks will do similar work as watir does, for example, [http://en.wikipedia.org/wiki/Cucumber_(software) Cucmber], [http://en.wikipedia.org/wiki/Capybara Capybara] and RSpec[http://en.wikipedia.org/wiki/RSpec RSpec]. But in comparison, they have different features and are usually used in conjecture.

In software engineering, behavior-driven development (abbreviated BDD) is a software development process based on test-driven development (TDD). <ref>http://en.wikipedia.org/wiki/Behavior-driven_development</ref> It's very important in software testing. The relationship between Watir and Cucmmber is usually designing a framework to test cucumber scenarios using Watir tool. [http://qastrategies.blogspot.com/2012/06/bdd-framework-to-test-web-application.html See Example]

The detailed difference and relationships are:

*Watir 
Put simply, Watir is a browser driver. Lightweight and simple to use, Watir excels at automating modern browsers. Built in Ruby, it does not have an IDE of it's own, but it works well with other testing frameworks and solutions in the Ruby ecosystem.

*Cucumber 
Cucumber lets software development teams describe how software should behave in plain english, it is designed to allow you to execute automated integration tests. It is a tool for implementing Behavior Driven Development.It can work nicely in conjecture with Capybara and RSpec.

*Capybara 
Capybara is a library written in the Ruby programming language which makes it easy to simulate how a user interacts with your application. It can talk with many different drivers which execute tests through the same clean and simple interface, including Selenium, Webkit or pure Ruby drivers.<ref>http://jnicklas.github.io/capybara/</ref>

*RSpec 
RSpec helps you do the TDD(Test-Driven Development) part of the whole development (combines Test-Driven Development, Domain Driven Design, and Acceptance Test-Driven Planning), focusing on the documentation and design aspects of TDD. A combination of RSpec and Watir makes really readable test scripts.<ref>http://www.ibmwcs.com/2010/08/testing-with-rspec-cucumber-selenium.html</ref>

:''Here's an video tutorial from Youtube introducing how to test with Ruby Cucumber RSpec Capybara Watir WebDriver Testing.[https://www.youtube.com/watch?v=jPH5Eiz32N0 More Info]''

= Pros and Cons =
== Pros ==
* No external server needed to run a test. Just run "ruby test.rb" and it goes, this simplifies any scripts used to execute the tests through continuous integration servers like [http://en.wikipedia.org/wiki/Hudson_%28software%29 Hudson] or [http://en.wikipedia.org/wiki/Bamboo_%28software%29 Bamboo] or whatever.<ref>http://www.quora.com/What-are-the-pros-and-cons-of-different-front-end-web-testing-frameworks-such-as-Selenium-or-Watir</ref>

* Rich API, which is pretty easy and once the users get the basics they can just guess how to write the code without needed alot of documentation.

* Tests can often be run through alternative tools, such as watir-webdriver, [http://watirmelon.com/2009/08/31/celerity-first-impressions/ celerity] and more, which are all more-or-less support the watir API. This means that if the users write their framework carefully, they would not be locked into watir.

* Watir-webdriver does work in both ruby and [http://en.wikipedia.org/wiki/JRuby jruby].

* Don't have much issue dealing with [http://en.wikipedia.org/wiki/Ajax_%28programming%29 AJAX], watir autumatically knows when the page finished loading.

* Typically runs faster than a comparable selenium test.

* Better support for headless browsers, like Celerity.

* Multi browser (& OS) support

*Provides an "attach" method which lets users programmatic access both the original domain window and the linked domain window from the same test.<ref>http://onestopqa.blogspot.com/2012/09/pros-cons-of-watir-selenium-or-sahi.html</ref>

== Cons ==
* Each browser's implementation is a little bit different, and the driver for each browser is written independently. This means inconsistent test results between browsers, which could be an issue sometime.

* API is ruby only, users have to learn Ruby first.

* Doesn't seem to be as widely used as selenium, a lil bit harder to find pretty good engineers.

* The task of porting Watir to a new browser isn’t an easy one, and the task of keeping every port of Watir in sync, with the same API, is difficult. <ref>http://watirmelon.com/2010/04/10/watir-selenium-webdriver/</ref>

= Reference =
<references></references>

= Further Reading =
1. An virtual experience on Watir, see how watir works in your eyes. https://www.youtube.com/watch?v=FxQXQGpImAo

2. Get started with watir in one minute. https://testwisely.com/testwise/docs/tutorials/watir

3. Tutorial on Ruby Cucumber RSpec Capybara Watir WebDriver Testing, know how they work here: https://www.youtube.com/watch?v=jPH5Eiz32N0

CSC/ECE 517 Fall 2014/ch1a 19 mx

2014-09-26T03:40:22Z

Xshao2: /* Comparison with Other Tools */

'''Watir'''
----

= Introduction=
Watir('''W'''eb '''A'''pplication '''T'''est '''i'''n '''R'''uby), pronounced as 'water', is an automated test toolkit which uses the Ruby scripting language for automated tests to be developed and run against a web browser. <ref>http://www.httpwatch.com/rubywatir/</ref>It allows users to write tests that are easy to read and maintain, also simple and flexible. Watir was first developed by Bret Pettichord and Paul Rogers. It drives [http://en.wikipedia.org/wiki/Internet_Explorer Internet Explorer], [http://en.wikipedia.org/wiki/FirefoxMozilla Firefox|Firefox], [http://en.wikipedia.org/wiki/Chrome Google Chrome|Chrome], [http://en.wikipedia.org/wiki/Opera Opera (web browser)|Opera] and [http://en.wikipedia.org/wiki/Safari Safari (web browser)|Safari], and is available as a [http://en.wikipedia.org/wiki/RubyGems RubyGems] gem, <ref>http://en.wikipedia.org/wiki/Watir</ref> which is a free, open source Ruby library that can test web applications written in any language<ref>https://rubygems.org/gems/watir-classic</ref> and drive a web browser the same way an end user would. It clicks links, fills in forms, presses buttons. Watir can also check results, such as whether expected text appears on the page or not, or whether a control is enabled. <ref>http://watir.com/</ref>

Watir project consists of several smaller projects, including watir-classic, watir-webdriver and watirspec.

== Watir-classic ==
Watir-classic is a Watir driver for automating only Internet Explorer on Windows.<ref>https://github.com/watir/watir-classic</ref>

Watir-classic is able to work on Internet Explorer 8, 9 and 10<ref>http://rubydoc.info/gems/watir-classic/3.7.0/frames</ref>, and is supported by Ruby 1.8.7, 1.9.3 and 2.0.0.

== Watir-webdriver==
Watie-webdriver is an implementation built on WebDriver's Ruby bindings. It supports not only the Internet Explorer, but also namely Firefox, Chrome and Safari,<ref>https://github.com/watir/watir-webdriver</ref>which is a main difference compared with watir-classic.

== Watirspec ==
Watirspec combines best features of Watir [http://en.wikipedia.org/wiki/RSpec RSpec] and Ruby for browser-based functional testing.<ref>https://rubygems.org/gems/watirspec</ref>

Just like RubySpec is for Ruby, Watirspec is the executable specification of the Watir API.

= Overview =

== Web Application Testing ==
[http://en.wikipedia.org/wiki/Web_testing Web testing] is a software testing that focuses on web applications. Complete testing of a web-based system before going live can help address issues before the system is revealed to the public. Issues such as the basic functionality of the site, the security of the web application, its accessibility to handicapped users and fully able users, as well as readiness for expected traffic and number of users and the ability to survive a massive spike in user traffic, both of which are related to load testing.<ref>http://en.wikipedia.org/wiki/Web_testing</ref>

'''Web Testing Checklist:'''<ref>http://www.softwaretestinghelp.com/web-application-testing/</ref>

*Functionality Testing： Test for all the links in web pages, database connection, forms used in the web pages for submitting or getting information from user, as well as Cookie testing.

*Usability Testing: Test for navigation, contents and other user information for user help.

*Interface Testing: Test for main interfaces, such as Web server, application server interface and Database server interface. Check whether all the interactions between these servers are executed properly or not.

*Compatibility Testing: Test for the compatibility of your web site, which is a very critical testing aspect, including Browser compatibility, Operating system compatibility, Mobile browsing and Printing options compatibility.

*Performance Testing: Test for web application performance, which should include both Web Load Testing and Web Stress Testing.

== Ruby ==
Ruby is a dynamic, designed and developed in the mid-1990s by Yukihiro "Matz" Matsumoto in Japan, is a reflective, object-oriented, general-purpose programming language. Like other programming languages, Ruby gives you the power to connect to databases, read data files and spreadsheets, export XML, and structure your code as reusable libraries. Unlike other programming languages, Ruby is concise and often a joy to read.

According to its authors, Ruby was influenced by [http://en.wikipedia.org/wiki/Perl Perl], [http://en.wikipedia.org/wiki/Smalltalk Smalltalk], [http://en.wikipedia.org/wiki/Eiffel Eiffel], [http://en.wikipedia.org/wiki/Ada Ada], and [http://en.wikipedia.org/wiki/Lisp Lisp]. It supports multiple programming paradigms, including functional, object-oriented, and imperative. It also has a dynamic type system and automatic memory management.<ref>http://en.wikipedia.org/wiki/Ruby_(programming_language)</ref>

'''Several Features：'''<ref>http://www.starkdigital.net/ruby-programming</ref>
*Thoroughly object-oriented with inheritance, mixins and metaclasses
*Dynamic typing and duck typing
*Large standard library, including modules for [http://en.wikipedia.org/wiki/YAML YAML], [http://en.wikipedia.org/wiki/JSON JSON], [http://en.wikipedia.org/wiki/XML XML], [http://en.wikipedia.org/wiki/CGI CGI], [http://en.wikipedia.org/wiki/OpenSSL OpenSSL], [http://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol HTTP], [http://en.wikipedia.org/wiki/File_Transfer_Protocol FTP], [http://en.wikipedia.org/wiki/RSS RSS], [http://en.wikipedia.org/wiki/Curse_(disambiguation) curses], [http://en.wikipedia.org/wiki/Zlib zlib], and [http://en.wikipedia.org/wiki/Tk_(software) Tk]
*Dynamic reflection and alteration of objects to facilitate [http://en.wikipedia.org/wiki/Metaprogramming metaprogramming]
[http://www.starkdigital.net/ruby-programming See More Features.]

= Installation =
== Install Ruby on Linux ==
Use your relevant package manager to update or install Ruby with the following at a terminal window:

sudo apt-get install ruby # for Ubuntu / Debian users
sudo yum install ruby # for Red Hat / Fedora users
== Update RubyGems on Linux ==
Make sure you have the latest rubygems version 1.3.7 or above installed. Use your relevant package manager to install the latest version with the following at a terminal window:

sudo apt-get install rubygems # for Ubuntu / Debian users
sudo yum install rubygems # for Red Hat / Fedora users

== Install a HTML Inspector ==
To use Watir effectively, you’ll need to be able to browse through the structure of your application’s HTML pages. These tools help you do that.

*On Firefox, use Firebug
*On Internet Explorer, use the IE Developer Toolbar

== Installing or Updating RubyGems ==
While updating RubyGems, or installing any of the gems, you can use the following additional flags:

--no-rdoc --no-ri

For example:

gem update --system --no-rdoc --no-ri
gem install watir --no-rdoc --no-ri

= Make It Run =
After everything required installed, we can run the watir tests in several ways. Below three ways are listed, and each of them is designed to work on the live Watir demo form: http://bit.ly/watir-example.

== Run in .rb ==
First of all, let's see how to conduct the test in ruby on rails. The example was based on the example listed on a google form, it demonstrated watir's functionality such as entering text into a text field, clicking a button like a user does, checking to see if a page contains text and so on. Below is the step-by-step command to finish the test in .rb file, which means you can simply save these commands in a .rb file and run it with ruby.

Example 1: <ref>http://watir.com/examples/</ref>

*Require Ruby Watir gem first via the -rubygems command line option, or by using the RUBYOPT environment variable. You can also require it manually in your script:
<pre>
require 'rubygems'
</pre>

*Including Watir gem to drive Internet Explorer on Windows
<pre>
require 'watir'
</pre>

*Including Watir-WebDriver gem to drive Firefox/Chrome on Windows/Mac/Linux
<pre>
require 'watir-webdriver'
</pre>

*Starting a new browser & and going to our site
<pre>
browser = Watir::Browser.new
browser.goto 'http://bit.ly/watir-example'
</pre>

*Setting a text field

[[File:Text-field.png]]

<pre>
browser.text_field(:name => 'entry.0.single').set 'Watir'
</pre>

*Setting a multi-line text box

[[File:text-box1.png|text-box1.png]]
<pre>
browser.text_field(:name => 'entry.1.single').set "I come here from Australia. \n The weather is great here."
</pre>

*Setting and clearing a radio button

[[File:3.radio-buttons1.png]]
<pre>
browser.radio(:value => 'Watir').set
browser.radio(:value => 'Watir').clear
</pre>

*Setting and clearing check boxes

[[File:4.checkboxes.png]]
<pre>
browser.checkbox(:value => 'Ruby').set
browser.checkbox(:value => 'Python').set
browser.checkbox(:value => 'Python').clear
</pre>

*Clearing, getting and selecting selection list values

[[File:5.selection-list.png]]

<pre>
browser.select_list(:name => 'entry.6.single').clear
puts browser.select_list(:name => 'entry.6.single').options
browser.select_list(:name => 'entry.6.single').select 'Chrome'
</pre>

*Clicking a button

[[File:6.button.png]]
<pre>
browser.button(:name => 'submit').click
</pre>

*Checking for text in a page
<pre>
puts browser.text.include? 'Your response has been recorded.'
</pre>

*Checking the title of a page
<pre>
puts browser.title == 'Thanks!'
</pre>

== Run in Rspec ==
RSpec is a Behaviour-Driven Development tool for Ruby programmers. BDD is an approach to software development that combines Test-Driven Development, Domain Driven Design, and Acceptance Test-Driven Planning. RSpec helps you do the TDD part of that equation, focusing on the documentation and design aspects of TDD. The following code demonstrates using Watir and a basic RSpec example.[http://rspec.info/ More Info.]

Example 2: <ref>http://watir.com/frameworks/</ref>

1. Install
 
<pre>
gem install rspec
</pre>

2. Example
 
<pre>
rspec test_spec.rb
</pre>
will execute the following rspec example:

'''test_spec.rb'''
 
<pre>
require "rubygems"
require "rspec"
require "watir-webdriver"

describe "google.com" do
let(:browser) { @browser ||= Watir::Browser.new :firefox }
before { browser.goto "http://google.com" }
after { browser.close }

it "should search for watir" do
browser.text_field(:name => "q").set "watir"
browser.button.click
browser.div(:id => "resultStats").wait_until_present
browser.title.should == "watir - Google Search"
end
end
</pre>

== Run in Cucumber ==
Cucumber lets software development teams describe how software should behave in plain text. The text is written in a business-readable domain-specific language and serves as documentation, automated tests and development-aid – all rolled into one format.[http://cukes.info/ More Info.]

Example 3: <ref>http://watir.com/frameworks/</ref>

1. Install
 
<pre>
gem install cucumber
</pre>

2. Example

<pre>
cucumber features
</pre>
will execute the following cucumber feature:
'''features/example.feature'''
 
<pre>
Feature: Search In order to use Google users must be able to search for content
Scenario: Search for a term
Given I have entered "watir" into the query
When I click "search"
Then I should see some results
</pre>

'''features/step_definitions/example_steps.rb'''
 
<pre>
require "watir-webdriver"
require "rspec/expectations"

Given /^I have entered "([^"]*)" into the query$/ do |term|
@browser ||= Watir::Browser.new :firefox
@browser.goto "google.com"
@browser.text_field(:name => "q").set term
end

When /^I click "([^"]*)"$/ do |button_name|
@browser.button.click
end

Then /^I should see some results$/ do
@browser.div(:id => "resultStats").wait_until_present
@browser.div(:id => "resultStats").should exist
@browser.close
end
</pre>

= Comparison with Other Tools =

There are some other framworks will do similar work as watir does, for example, [http://en.wikipedia.org/wiki/Cucumber_(software) Cucmber], [http://en.wikipedia.org/wiki/Capybara Capybara] and RSpec[http://en.wikipedia.org/wiki/RSpec RSpec]. But in comparison, they have different features and are usually used in conjecture.

In software engineering, behavior-driven development (abbreviated BDD) is a software development process based on test-driven development (TDD). <ref>http://en.wikipedia.org/wiki/Behavior-driven_development</ref> It's very important in software testing. The relationship between Watir and Cucmmber is usually designing a framework to test cucumber scenarios using Watir tool. [http://qastrategies.blogspot.com/2012/06/bdd-framework-to-test-web-application.html See Example]

The detailed difference and relationships are:

*Watir 
Put simply, Watir is a browser driver. Lightweight and simple to use, Watir excels at automating modern browsers. Built in Ruby, it does not have an IDE of it's own, but it works well with other testing frameworks and solutions in the Ruby ecosystem.

*Cucumber 
Cucumber lets software development teams describe how software should behave in plain english, it is designed to allow you to execute automated integration tests. It is a tool for implementing Behavior Driven Development.It can work nicely in conjecture with Capybara and RSpec.

*Capybara 
Capybara is a library written in the Ruby programming language which makes it easy to simulate how a user interacts with your application. It can talk with many different drivers which execute tests through the same clean and simple interface, including Selenium, Webkit or pure Ruby drivers.<ref>http://jnicklas.github.io/capybara/</ref>

*RSpec 
RSpec helps you do the TDD(Test-Driven Development) part of the whole development (combines Test-Driven Development, Domain Driven Design, and Acceptance Test-Driven Planning), focusing on the documentation and design aspects of TDD. A combination of RSpec and Watir makes really readable test scripts.<ref>http://www.ibmwcs.com/2010/08/testing-with-rspec-cucumber-selenium.html</ref>

''Here's an video tutorial from Youtube introducing how to test with Ruby Cucumber RSpec Capybara Watir WebDriver Testing.[https://www.youtube.com/watch?v=jPH5Eiz32N0 More Info]''

= Pros and Cons =
== Pros ==
* No external server needed to run a test. Just run "ruby test.rb" and it goes, this simplifies any scripts used to execute the tests through continuous integration servers like [http://en.wikipedia.org/wiki/Hudson_%28software%29 Hudson] or [http://en.wikipedia.org/wiki/Bamboo_%28software%29 Bamboo] or whatever.<ref>http://www.quora.com/What-are-the-pros-and-cons-of-different-front-end-web-testing-frameworks-such-as-Selenium-or-Watir</ref>

* Rich API, which is pretty easy and once the users get the basics they can just guess how to write the code without needed alot of documentation.

* Tests can often be run through alternative tools, such as watir-webdriver, [http://watirmelon.com/2009/08/31/celerity-first-impressions/ celerity] and more, which are all more-or-less support the watir API. This means that if the users write their framework carefully, they would not be locked into watir.

* Watir-webdriver does work in both ruby and [http://en.wikipedia.org/wiki/JRuby jruby].

* Don't have much issue dealing with [http://en.wikipedia.org/wiki/Ajax_%28programming%29 AJAX], watir autumatically knows when the page finished loading.

* Typically runs faster than a comparable selenium test.

* Better support for headless browsers, like Celerity.

* Multi browser (& OS) support

*Provides an "attach" method which lets users programmatic access both the original domain window and the linked domain window from the same test.<ref>http://onestopqa.blogspot.com/2012/09/pros-cons-of-watir-selenium-or-sahi.html</ref>

== Cons ==
* Each browser's implementation is a little bit different, and the driver for each browser is written independently. This means inconsistent test results between browsers, which could be an issue sometime.

* API is ruby only, users have to learn Ruby first.

* Doesn't seem to be as widely used as selenium, a lil bit harder to find pretty good engineers.

* The task of porting Watir to a new browser isn’t an easy one, and the task of keeping every port of Watir in sync, with the same API, is difficult. <ref>http://watirmelon.com/2010/04/10/watir-selenium-webdriver/</ref>

= Reference =
<references></references>

= Further Reading =
1. An virtual experience on Watir, see how watir works in your eyes. https://www.youtube.com/watch?v=FxQXQGpImAo

2. Get started with watir in one minute. https://testwisely.com/testwise/docs/tutorials/watir

3. Tutorial on Ruby Cucumber RSpec Capybara Watir WebDriver Testing, know how they work here: https://www.youtube.com/watch?v=jPH5Eiz32N0