Expertiza_Wiki - User contributions [en]

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

2017-05-03T14:07:08Z

Dguttik: /* Adding topics */

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

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

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

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

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

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

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

[[File:Create1.JPG]]
<br>
<br>
<br>

[[File:Create2.JPG]]

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

[[File:Edit.jpg]]

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

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

'''Add topic:'''

[[File:Add_topic_form.PNG]]

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

'''Edit Topic:'''

[[File:Edit_topic_form.PNG]]

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

[[File:topics_tab_assignment.png]]

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

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

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

[[File:Vaidatinguser.PNG]]

'''UML Diagram'''

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

[[File:Uml for validation.png]]

==Implementation==

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

[[File:Validate.PNG]]

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

Below are the files modified.

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

[[File:Signup_topics.PNG]]

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

[[File:Table_header.PNG]]

[[File:Js.PNG]]

[[File:css.PNG]]

==== Adding topics ====

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

Modified files code:

[[File:T1.PNG]]

[[File:T2.PNG]]

[[File:T3.PNG]]

[[File:T4.PNG]]

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

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

[[File:new_imp.png]]

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

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

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

[[File:Edit-new_imp.png]]

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

==Future Work==

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

==References==

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

File:T4.PNG

2017-05-03T14:06:41Z

Dguttik:

File:T3.PNG

2017-05-03T14:06:03Z

Dguttik:

File:T2.PNG

2017-05-03T14:05:14Z

Dguttik:

File:T1.PNG

2017-05-03T14:03:49Z

Dguttik:

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

2017-05-03T14:02:12Z

Dguttik: /* Implementation */

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

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

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

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

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

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

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

[[File:Create1.JPG]]
<br>
<br>
<br>

[[File:Create2.JPG]]

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

[[File:Edit.jpg]]

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

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

'''Add topic:'''

[[File:Add_topic_form.PNG]]

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

'''Edit Topic:'''

[[File:Edit_topic_form.PNG]]

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

[[File:topics_tab_assignment.png]]

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

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

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

[[File:Vaidatinguser.PNG]]

'''UML Diagram'''

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

[[File:Uml for validation.png]]

==Implementation==

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

[[File:Validate.PNG]]

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

Below are the files modified.

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

[[File:Signup_topics.PNG]]

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

[[File:Table_header.PNG]]

[[File:Js.PNG]]

[[File:css.PNG]]

==== Adding topics ====

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

Modified files code:

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

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

[[File:new_imp.png]]

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

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

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

[[File:Edit-new_imp.png]]

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

==Future Work==

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

==References==

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

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

2017-04-08T02:24:43Z

Dguttik: /* References */

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

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

==ReactJS==
ReactJS is the javascript framework developed by Facebook to solve the specific problem, ''UI rendering''. It is developed to solve the problem with complex binding in MVC framework using only one-way data binding. It is used for dynamic reloading of the page. It helps in reloading only the particular component required using Virtual DOM, which makes it fast by temporarily storing DOM

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

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

'''Tasks to be done'''
*Organize the form layout, create several mockups and validate them to your users
*Make the table in topics tab sortable by its header
*Allow users to edit / add topics in the table instead of loading a new page
*Implement the new layout and convert the javascript to a ReactJS component
*Validate user entries
*Fix tooltips that don’t work

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

[[File:Create1.JPG]]

[[File:Create2.JPG]]

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

[[File:Edit.jpg]]

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

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

'''Add topic:'''

[[File:Add_topic_form.PNG]]

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

'''Edit Topic:'''

[[File:Edit_topic_form.PNG]]

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

[[File:topics_tab_assignment.png]]

===Validating user entries===
The entries for the assignment creation are not according to any restrictions, that can add problem to database maintainence like sorting the entries, comparing them, retrieving. There are many such problem causing situations in the new assignment form, such as
* User can add the number as new assignment name or he can give only special characters for it like "$$$$".
* Neglecting check boxes may lead to confusion with deadlines.

[[File:Userentries.png]]

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

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

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

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

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

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

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

===Validating user entries===
The following tasks are to be implemented to achieve users validation,
* Add the regular expression validation to avoid special characters in the names of assignment or directories.
* Create alert messages to notify user if any important check boxes are missed.
* Create validation for edge cases like giving empty values.

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

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

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

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

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

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

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

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

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

==Future Work==

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

==References==

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

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

2017-04-08T02:23:57Z

Dguttik: /* Future Work */

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

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

==ReactJS==
ReactJS is the javascript framework developed by Facebook to solve the specific problem, ''UI rendering''. It is developed to solve the problem with complex binding in MVC framework using only one-way data binding. It is used for dynamic reloading of the page. It helps in reloading only the particular component required using Virtual DOM, which makes it fast by temporarily storing DOM

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

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

'''Tasks to be done'''
*Organize the form layout, create several mockups and validate them to your users
*Make the table in topics tab sortable by its header
*Allow users to edit / add topics in the table instead of loading a new page
*Implement the new layout and convert the javascript to a ReactJS component
*Validate user entries
*Fix tooltips that don’t work

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

[[File:Create1.JPG]]

[[File:Create2.JPG]]

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

[[File:Edit.jpg]]

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

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

'''Add topic:'''

[[File:Add_topic_form.PNG]]

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

'''Edit Topic:'''

[[File:Edit_topic_form.PNG]]

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

[[File:topics_tab_assignment.png]]

===Validating user entries===
The entries for the assignment creation are not according to any restrictions, that can add problem to database maintainence like sorting the entries, comparing them, retrieving. There are many such problem causing situations in the new assignment form, such as
* User can add the number as new assignment name or he can give only special characters for it like "$$$$".
* Neglecting check boxes may lead to confusion with deadlines.

[[File:Userentries.png]]

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

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

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

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

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

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

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

===Validating user entries===
The following tasks are to be implemented to achieve users validation,
* Add the regular expression validation to avoid special characters in the names of assignment or directories.
* Create alert messages to notify user if any important check boxes are missed.
* Create validation for edge cases like giving empty values.

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

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

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

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

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

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

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

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

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

==Future Work==

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

==References==

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

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

2017-04-08T02:20:12Z

Dguttik: /* Automation testing */

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

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

==ReactJS==
ReactJS is the javascript framework developed by Facebook to solve the specific problem, ''UI rendering''. It is developed to solve the problem with complex binding in MVC framework using only one-way data binding. It is used for dynamic reloading of the page. It helps in reloading only the particular component required using Virtual DOM, which makes it fast by temporarily storing DOM

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

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

'''Tasks to be done'''
*Organize the form layout, create several mockups and validate them to your users
*Make the table in topics tab sortable by its header
*Allow users to edit / add topics in the table instead of loading a new page
*Implement the new layout and convert the javascript to a ReactJS component
*Validate user entries
*Fix tooltips that don’t work

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

[[File:Create1.JPG]]

[[File:Create2.JPG]]

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

[[File:Edit.jpg]]

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

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

'''Add topic:'''

[[File:Add_topic_form.PNG]]

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

'''Edit Topic:'''

[[File:Edit_topic_form.PNG]]

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

[[File:topics_tab_assignment.png]]

===Validating user entries===
The entries for the assignment creation are not according to any restrictions, that can add problem to database maintainence like sorting the entries, comparing them, retrieving. There are many such problem causing situations in the new assignment form, such as
* User can add the number as new assignment name or he can give only special characters for it like "$$$$".
* Neglecting check boxes may lead to confusion with deadlines.

[[File:Userentries.png]]

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

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

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

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

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

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

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

===Validating user entries===
The following tasks are to be implemented to achieve users validation,
* Add the regular expression validation to avoid special characters in the names of assignment or directories.
* Create alert messages to notify user if any important check boxes are missed.
* Create validation for edge cases like giving empty values.

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

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

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

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

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

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

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

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

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

==Future Work==
==References==

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

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

2017-04-08T02:06:11Z

Dguttik: /* Test Plan */

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

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

==ReactJS==
ReactJS is the javascript framework developed by Facebook to solve the specific problem, ''UI rendering''. It is developed to solve the problem with complex binding in MVC framework using only one-way data binding. It is used for dynamic reloading of the page. It helps in reloading only the particular component required using Virtual DOM, which makes it fast by temporarily storing DOM

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

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

'''Tasks to be done'''
*Organize the form layout, create several mockups and validate them to your users
*Make the table in topics tab sortable by its header
*Allow users to edit / add topics in the table instead of loading a new page
*Implement the new layout and convert the javascript to a ReactJS component
*Validate user entries
*Fix tooltips that don’t work

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

[[File:Create1.JPG]]

[[File:Create2.JPG]]

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

[[File:Edit.jpg]]

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

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

'''Add topic:'''

[[File:Add_topic_form.PNG]]

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

'''Edit Topic:'''

[[File:Edit_topic_form.PNG]]

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

[[File:topics_tab_assignment.png]]

===Validating user entries===
The entries for the assignment creation are not according to any restrictions, that can add problem to database maintainence like sorting the entries, comparing them, retrieving. There are many such problem causing situations in the new assignment form, such as
* User can add the number as new assignment name or he can give only special characters for it like "$$$$".
* Neglecting check boxes may lead to confusion with deadlines.

[[File:Userentries.png]]

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

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

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

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

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

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

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

===Validating user entries===
The following tasks are to be implemented to achieve users validation,
* Add the regular expression validation to avoid special characters in the names of assignment or directories.
* Create alert messages to notify user if any important check boxes are missed.
* Create validation for edge cases like giving empty values.

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

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

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

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

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

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

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

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

===Automation testing===
The above tests all will be automated using rspec.

==Future Work==
==References==

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

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

2017-04-08T02:02:57Z

Dguttik: /* Editing topic */

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

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

==ReactJS==
ReactJS is the javascript framework developed by Facebook to solve the specific problem, ''UI rendering''. It is developed to solve the problem with complex binding in MVC framework using only one-way data binding. It is used for dynamic reloading of the page. It helps in reloading only the particular component required using Virtual DOM, which makes it fast by temporarily storing DOM

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

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

'''Tasks to be done'''
*Organize the form layout, create several mockups and validate them to your users
*Make the table in topics tab sortable by its header
*Allow users to edit / add topics in the table instead of loading a new page
*Implement the new layout and convert the javascript to a ReactJS component
*Validate user entries
*Fix tooltips that don’t work

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

[[File:Create1.JPG]]

[[File:Create2.JPG]]

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

[[File:Edit.jpg]]

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

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

'''Add topic:'''

[[File:Add_topic_form.PNG]]

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

'''Edit Topic:'''

[[File:Edit_topic_form.PNG]]

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

[[File:topics_tab_assignment.png]]

===Validating user entries===
The entries for the assignment creation are not according to any restrictions, that can add problem to database maintainence like sorting the entries, comparing them, retrieving. There are many such problem causing situations in the new assignment form, such as
* User can add the number as new assignment name or he can give only special characters for it like "$$$$".
* Neglecting check boxes may lead to confusion with deadlines.

[[File:Userentries.png]]

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

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

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

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

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

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

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

===Validating user entries===
The following tasks are to be implemented to achieve users validation,
* Add the regular expression validation to avoid special characters in the names of assignment or directories.
* Create alert messages to notify user if any important check boxes are missed.
* Create validation for edge cases like giving empty values.

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

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

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

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

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

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

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

===Automation testing===
The above tests all will be automated using rspec.

==Future Work==
==References==

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

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

2017-04-08T02:01:15Z

Dguttik: /* Addition of topics */

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

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

==ReactJS==
ReactJS is the javascript framework developed by Facebook to solve the specific problem, ''UI rendering''. It is developed to solve the problem with complex binding in MVC framework using only one-way data binding. It is used for dynamic reloading of the page. It helps in reloading only the particular component required using Virtual DOM, which makes it fast by temporarily storing DOM

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

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

'''Tasks to be done'''
*Organize the form layout, create several mockups and validate them to your users
*Make the table in topics tab sortable by its header
*Allow users to edit / add topics in the table instead of loading a new page
*Implement the new layout and convert the javascript to a ReactJS component
*Validate user entries
*Fix tooltips that don’t work

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

[[File:Create1.JPG]]

[[File:Create2.JPG]]

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

[[File:Edit.jpg]]

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

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

'''Add topic:'''

[[File:Add_topic_form.PNG]]

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

'''Edit Topic:'''

[[File:Edit_topic_form.PNG]]

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

[[File:topics_tab_assignment.png]]

===Validating user entries===
The entries for the assignment creation are not according to any restrictions, that can add problem to database maintainence like sorting the entries, comparing them, retrieving. There are many such problem causing situations in the new assignment form, such as
* User can add the number as new assignment name or he can give only special characters for it like "$$$$".
* Neglecting check boxes may lead to confusion with deadlines.

[[File:Userentries.png]]

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

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

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

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

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

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

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

===Validating user entries===
The following tasks are to be implemented to achieve users validation,
* Add the regular expression validation to avoid special characters in the names of assignment or directories.
* Create alert messages to notify user if any important check boxes are missed.
* Create validation for edge cases like giving empty values.

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

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

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

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

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

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

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

===Automation testing===
The above tests all will be automated using rspec.

==Future Work==
==References==

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

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

2017-04-08T02:00:03Z

Dguttik: /* Editing topic */

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

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

==ReactJS==
ReactJS is the javascript framework developed by Facebook to solve the specific problem, ''UI rendering''. It is developed to solve the problem with complex binding in MVC framework using only one-way data binding. It is used for dynamic reloading of the page. It helps in reloading only the particular component required using Virtual DOM, which makes it fast by temporarily storing DOM

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

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

'''Tasks to be done'''
*Organize the form layout, create several mockups and validate them to your users
*Make the table in topics tab sortable by its header
*Allow users to edit / add topics in the table instead of loading a new page
*Implement the new layout and convert the javascript to a ReactJS component
*Validate user entries
*Fix tooltips that don’t work

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

[[File:Create1.JPG]]

[[File:Create2.JPG]]

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

[[File:Edit.jpg]]

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

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

'''Add topic:'''

[[File:Add_topic_form.PNG]]

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

'''Edit Topic:'''

[[File:Edit_topic_form.PNG]]

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

[[File:topics_tab_assignment.png]]

===Validating user entries===
The entries for the assignment creation are not according to any restrictions, that can add problem to database maintainence like sorting the entries, comparing them, retrieving. There are many such problem causing situations in the new assignment form, such as
* User can add the number as new assignment name or he can give only special characters for it like "$$$$".
* Neglecting check boxes may lead to confusion with deadlines.

[[File:Userentries.png]]

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

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

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

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

=== Addition of topics ===
* An interactive React JS component should be created in ''/assignments/edit.html.erb'' page and should show a form in that page itself when New Topic is clicked.
* Delete/avoid usage of ''sign_up_sheet/new.html.erb'' page.
* Implement an React JS functional component to handle creation of topic and saving it to database.

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

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

===Validating user entries===
The following tasks are to be implemented to achieve users validation,
* Add the regular expression validation to avoid special characters in the names of assignment or directories.
* Create alert messages to notify user if any important check boxes are missed.
* Create validation for edge cases like giving empty values.

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

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

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

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

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

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

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

===Automation testing===
The above tests all will be automated using rspec.

==Future Work==
==References==

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

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

2017-04-08T01:46:14Z

Dguttik: /* Add/Delete topics in Assignment */

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

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

==ReactJS==
ReactJS is the javascript framework developed by Facebook to solve the specific problem, ''UI rendering''. It is developed to solve the problem with complex binding in MVC framework using only one-way data binding. It is used for dynamic reloading of the page. It helps in reloading only the particular component required using Virtual DOM, which makes it fast by temporarily storing DOM

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

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

'''Tasks to be done'''
*Organize the form layout, create several mockups and validate them to your users
*Make the table in topics tab sortable by its header
*Allow users to edit / add topics in the table instead of loading a new page
*Implement the new layout and convert the javascript to a ReactJS component
*Validate user entries
*Fix tooltips that don’t work

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

[[File:Create1.JPG]]

[[File:Create2.JPG]]

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

[[File:Edit.jpg]]

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

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

'''Add topic:'''

[[File:Add_topic_form.PNG]]

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

'''Edit Topic:'''

[[File:Edit_topic_form.PNG]]

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

[[File:topics_tab_assignment.png]]

===Validating user entries===
The entries for the assignment creation are not according to any restrictions, that can add problem to database maintainence like sorting the entries, comparing them, retrieving. There are many such problem causing situations in the new assignment form, such as
* User can add the number as new assignment name or he can give only special characters for it like "$$$$".
* Neglecting check boxes may lead to confusion with deadlines.

[[File:Userentries.png]]

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

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

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

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

=== Addition of topics ===
* An interactive React JS component should be created in ''/assignments/edit.html.erb'' page and should show a form in that page itself when New Topic is clicked.
* Delete/avoid usage of ''sign_up_sheet/new.html.erb'' page.
* Implement an React JS functional component to handle creation of topic and saving it to database.

=== Editing topic ===
*
* Delete/avoid usage of ''sign_up_sheet/edit.html.erb'' page.
* Implement an React JS functional component to handle editing of topic and updating it to database.

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

===Validating user entries===
The following tasks are to be implemented to achieve users validation,
* Add the regular expression validation to avoid special characters in the names of assignment or directories.
* Create alert messages to notify user if any important check boxes are missed.
* Create validation for edge cases like giving empty values.

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

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

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

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

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

====Make the table in topics tab sortable by its header====
* Create an assignment
* Add 2 topics to the assignment
* Click sort on Topic ID and check if they are sorted
* Click sort on Topic title and check if they are sorted
* Similarly test using other columns

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

===Automation testing===
The above tests all will be automated using rspec.

==Future Work==
==References==

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

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

2017-04-08T01:44:48Z

Dguttik: /* Editing topic */

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

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

==ReactJS==
ReactJS is the javascript framework developed by Facebook to solve the specific problem, ''UI rendering''. It is developed to solve the problem with complex binding in MVC framework using only one-way data binding. It is used for dynamic reloading of the page. It helps in reloading only the particular component required using Virtual DOM, which makes it fast by temporarily storing DOM

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

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

'''Tasks to be done'''
*Organize the form layout, create several mockups and validate them to your users
*Make the table in topics tab sortable by its header
*Allow users to edit / add topics in the table instead of loading a new page
*Implement the new layout and convert the javascript to a ReactJS component
*Validate user entries
*Fix tooltips that don’t work

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

[[File:Create1.JPG]]

[[File:Create2.JPG]]

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

[[File:Edit.jpg]]

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

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

'''Add topic:'''

[[File:Add_topic_form.PNG]]

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

'''Edit Topic:'''

[[File:Edit_topic_form.PNG]]

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

[[File:topics_tab_assignment.png]]

===Validating user entries===
The entries for the assignment creation are not according to any restrictions, that can add problem to database maintainence like sorting the entries, comparing them, retrieving. There are many such problem causing situations in the new assignment form, such as
* User can add the number as new assignment name or he can give only special characters for it like "$$$$".
* Neglecting check boxes may lead to confusion with deadlines.

[[File:Userentries.png]]

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

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

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

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

=== Addition of topics ===
* An interactive React JS component should be created in ''/assignments/edit.html.erb'' page and should show a form in that page itself when New Topic is clicked.
* Delete/avoid usage of ''sign_up_sheet/new.html.erb'' page.
* Implement an React JS functional component to handle creation of topic and saving it to database.

=== Editing topic ===
*
* Delete/avoid usage of ''sign_up_sheet/edit.html.erb'' page.
* Implement an React JS functional component to handle editing of topic and updating it to database.

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

===Validating user entries===
The following tasks are to be implemented to achieve users validation,
* Add the regular expression validation to avoid special characters in the names of assignment or directories.
* Create alert messages to notify user if any important check boxes are missed.
* Create validation for edge cases like giving empty values.

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

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

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

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

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

====Make the table in topics tab sortable by its header====
* Create an assignment
* Add 2 topics to the assignment
* Click sort on Topic ID and check if they are sorted
* Click sort on Topic title and check if they are sorted
* Similarly test using other columns

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

===Automation testing===
The above tests all will be automated using rspec.

==Future Work==
==References==

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

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

2017-04-08T01:44:08Z

Dguttik: /* Addition of topics */

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

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

==ReactJS==
ReactJS is the javascript framework developed by Facebook to solve the specific problem, ''UI rendering''. It is developed to solve the problem with complex binding in MVC framework using only one-way data binding. It is used for dynamic reloading of the page. It helps in reloading only the particular component required using Virtual DOM, which makes it fast by temporarily storing DOM

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

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

'''Tasks to be done'''
*Organize the form layout, create several mockups and validate them to your users
*Make the table in topics tab sortable by its header
*Allow users to edit / add topics in the table instead of loading a new page
*Implement the new layout and convert the javascript to a ReactJS component
*Validate user entries
*Fix tooltips that don’t work

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

[[File:Create1.JPG]]

[[File:Create2.JPG]]

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

[[File:Edit.jpg]]

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

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

'''Add topic:'''

[[File:Add_topic_form.PNG]]

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

'''Edit Topic:'''

[[File:Edit_topic_form.PNG]]

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

[[File:topics_tab_assignment.png]]

===Validating user entries===
The entries for the assignment creation are not according to any restrictions, that can add problem to database maintainence like sorting the entries, comparing them, retrieving. There are many such problem causing situations in the new assignment form, such as
* User can add the number as new assignment name or he can give only special characters for it like "$$$$".
* Neglecting check boxes may lead to confusion with deadlines.

[[File:Userentries.png]]

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

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

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

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

=== Addition of topics ===
* An interactive React JS component should be created in ''/assignments/edit.html.erb'' page and should show a form in that page itself when New Topic is clicked.
* Delete/avoid usage of ''sign_up_sheet/new.html.erb'' page.
* Implement an React JS functional component to handle creation of topic and saving it to database.

=== Editing topic ===
*

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

===Validating user entries===
The following tasks are to be implemented to achieve users validation,
* Add the regular expression validation to avoid special characters in the names of assignment or directories.
* Create alert messages to notify user if any important check boxes are missed.
* Create validation for edge cases like giving empty values.

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

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

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

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

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

====Make the table in topics tab sortable by its header====
* Create an assignment
* Add 2 topics to the assignment
* Click sort on Topic ID and check if they are sorted
* Click sort on Topic title and check if they are sorted
* Similarly test using other columns

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

===Automation testing===
The above tests all will be automated using rspec.

==Future Work==
==References==

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

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

2017-04-08T01:42:55Z

Dguttik: /* Addition of topics */

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

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

==ReactJS==
ReactJS is the javascript framework developed by Facebook to solve the specific problem, ''UI rendering''. It is developed to solve the problem with complex binding in MVC framework using only one-way data binding. It is used for dynamic reloading of the page. It helps in reloading only the particular component required using Virtual DOM, which makes it fast by temporarily storing DOM

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

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

'''Tasks to be done'''
*Organize the form layout, create several mockups and validate them to your users
*Make the table in topics tab sortable by its header
*Allow users to edit / add topics in the table instead of loading a new page
*Implement the new layout and convert the javascript to a ReactJS component
*Validate user entries
*Fix tooltips that don’t work

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

[[File:Create1.JPG]]

[[File:Create2.JPG]]

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

[[File:Edit.jpg]]

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

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

'''Add topic:'''

[[File:Add_topic_form.PNG]]

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

'''Edit Topic:'''

[[File:Edit_topic_form.PNG]]

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

[[File:topics_tab_assignment.png]]

===Validating user entries===
The entries for the assignment creation are not according to any restrictions, that can add problem to database maintainence like sorting the entries, comparing them, retrieving. There are many such problem causing situations in the new assignment form, such as
* User can add the number as new assignment name or he can give only special characters for it like "$$$$".
* Neglecting check boxes may lead to confusion with deadlines.

[[File:Userentries.png]]

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

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

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

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

=== Addition of topics ===
* An interactive React JS component should be created in /assignments/edit page and should show a form in that page itself when New Topic is clicked.
* Delete/avoid usage of sign_up_sheet/new page.
* Implement an React JS functional component to handle creation of topic and saving it to database.

=== Editing topic ===
*

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

===Validating user entries===
The following tasks are to be implemented to achieve users validation,
* Add the regular expression validation to avoid special characters in the names of assignment or directories.
* Create alert messages to notify user if any important check boxes are missed.
* Create validation for edge cases like giving empty values.

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

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

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

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

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

====Make the table in topics tab sortable by its header====
* Create an assignment
* Add 2 topics to the assignment
* Click sort on Topic ID and check if they are sorted
* Click sort on Topic title and check if they are sorted
* Similarly test using other columns

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

===Automation testing===
The above tests all will be automated using rspec.

==Future Work==
==References==

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

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

2017-04-08T01:42:20Z

Dguttik: /* Proposed Solution */

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

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

==ReactJS==
ReactJS is the javascript framework developed by Facebook to solve the specific problem, ''UI rendering''. It is developed to solve the problem with complex binding in MVC framework using only one-way data binding. It is used for dynamic reloading of the page. It helps in reloading only the particular component required using Virtual DOM, which makes it fast by temporarily storing DOM

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

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

'''Tasks to be done'''
*Organize the form layout, create several mockups and validate them to your users
*Make the table in topics tab sortable by its header
*Allow users to edit / add topics in the table instead of loading a new page
*Implement the new layout and convert the javascript to a ReactJS component
*Validate user entries
*Fix tooltips that don’t work

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

[[File:Create1.JPG]]

[[File:Create2.JPG]]

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

[[File:Edit.jpg]]

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

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

'''Add topic:'''

[[File:Add_topic_form.PNG]]

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

'''Edit Topic:'''

[[File:Edit_topic_form.PNG]]

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

[[File:topics_tab_assignment.png]]

===Validating user entries===
The entries for the assignment creation are not according to any restrictions, that can add problem to database maintainence like sorting the entries, comparing them, retrieving. There are many such problem causing situations in the new assignment form, such as
* User can add the number as new assignment name or he can give only special characters for it like "$$$$".
* Neglecting check boxes may lead to confusion with deadlines.

[[File:Userentries.png]]

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

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

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

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

=== Addition of topics ===
* An interactive React JS component should be created in /assignments/edit page and should show a form in that page itself when New Topic is
clicked.
* Delete/avoid usage of sign_up_sheet/new page.
* Implement an React JS functional component to handle creation of topic and saving it to database.

=== Editing topic ===
*

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

===Validating user entries===
The following tasks are to be implemented to achieve users validation,
* Add the regular expression validation to avoid special characters in the names of assignment or directories.
* Create alert messages to notify user if any important check boxes are missed.
* Create validation for edge cases like giving empty values.

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

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

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

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

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

====Make the table in topics tab sortable by its header====
* Create an assignment
* Add 2 topics to the assignment
* Click sort on Topic ID and check if they are sorted
* Click sort on Topic title and check if they are sorted
* Similarly test using other columns

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

===Automation testing===
The above tests all will be automated using rspec.

==Future Work==
==References==

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

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

2017-04-08T01:34:54Z

Dguttik: /* Add/Delete topics in Assignment */

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

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

==ReactJS==
ReactJS is the javascript framework developed by Facebook to solve the specific problem, ''UI rendering''. It is developed to solve the problem with complex binding in MVC framework using only one-way data binding. It is used for dynamic reloading of the page. It helps in reloading only the particular component required using Virtual DOM, which makes it fast by temporarily storing DOM

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

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

'''Tasks to be done'''
*Organize the form layout, create several mockups and validate them to your users
*Make the table in topics tab sortable by its header
*Allow users to edit / add topics in the table instead of loading a new page
*Implement the new layout and convert the javascript to a ReactJS component
*Validate user entries
*Fix tooltips that don’t work

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

[[File:Create1.JPG]]

[[File:Create2.JPG]]

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

[[File:Edit.jpg]]

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

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

'''Add topic:'''

[[File:Add_topic_form.PNG]]

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

'''Edit Topic:'''

[[File:Edit_topic_form.PNG]]

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

[[File:topics_tab_assignment.png]]

===Validating user entries===
The entries for the assignment creation are not according to any restrictions, that can add problem to database maintainence like sorting the entries, comparing them, retrieving. There are many such problem causing situations in the new assignment form, such as
* User can add the number as new assignment name or he can give only special characters for it like "$$$$".
* Neglecting check boxes may lead to confusion with deadlines.

[[File:Userentries.png]]

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

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

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

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

=== Addition of topics ===

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

===Validating user entries===
The following tasks are to be implemented to achieve users validation,
* Add the regular expression validation to avoid special characters in the names of assignment or directories.
* Create alert messages to notify user if any important check boxes are missed.
* Create validation for edge cases like giving empty values.

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

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

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

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

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

====Make the table in topics tab sortable by its header====
* Create an assignment
* Add 2 topics to the assignment
* Click sort on Topic ID and check if they are sorted
* Click sort on Topic title and check if they are sorted
* Similarly test using other columns

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

===Automation testing===
The above tests all will be automated using rspec.

==Future Work==
==References==

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

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

2017-04-07T19:36:17Z

Dguttik: /* Proposed Solution */

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

2017-04-07T19:32:06Z

Dguttik: /* Add/Delete topics in Assignment */

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

2017-04-07T19:29:58Z

Dguttik: /* Add/Delete topics in Assignment */

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

2017-04-07T19:27:50Z

Dguttik: /* Add/Delete topics in Assignment */

File:Edit topic form.PNG

2017-04-07T19:25:07Z

Dguttik:

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

2017-04-07T19:23:31Z

Dguttik: /* Add/Delete topics in Assignment */

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

2017-04-07T19:12:30Z

Dguttik: /* Add/Delete topics in Assignment */

File:Add topic form.PNG

2017-04-07T19:09:54Z

Dguttik:

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

2017-04-07T19:08:12Z

Dguttik: /* Current Implementation */

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

2017-04-07T18:11:41Z

Dguttik: /* Problem Statement */

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

2017-04-05T23:34:37Z

Dguttik:

== Introduction ==

==Expertiza==

==React JS==
===Pros===
==Problem Statement==
==Current Implementation==
==Proposed Solution==
==Test Plan==
==Future Work==
==References==

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

2017-04-05T23:34:16Z

Dguttik: Created page with "= Introduction = ==Expertiza== ==React JS== ===Pros=== ==Problem Statement== ==Current Implementation== ==Proposed Solution== ==Test Plan== ==Future Work== ==References=="

= Introduction =

==Expertiza==

==React JS==
===Pros===
==Problem Statement==
==Current Implementation==
==Proposed Solution==
==Test Plan==
==Future Work==
==References==

File:Wait ajax.png

2017-04-01T04:44:40Z

Dguttik:

File:Assignment create.png

2017-04-01T04:43:31Z

Dguttik:

CSC/ECE 517 Spring 2017/Use Ajax to add Participants,TA and Edit Questionnaire

2017-04-01T04:36:39Z

Dguttik: /* Automated Testing */

==Introduction==

<nowiki> Expertiza is an opensource software developed to assist people in education institutions to perform peer reviews and group projects. It is exceptionally helpful to the students and instructors. The software is designed in MVC (Model-View-Controller) architecture using ruby on rails.
</nowiki>

==Problem Statement==
Expertiza provides many categories to manage for an instructor. Few of these categories are assignments, courses and questionnaires. Currently, to add/remove/update records, the entire page is submitted to save the record and the entire page is re-loaded back again to reflect the changes on the page. The task is to improve this functionality such that some of the records, specifically adding participants to courses or assignments, adding/removing teaching assistants to/from courses and adding questions to questionnaires, can be saved remotely and the page updated without submitting and reloading the entire page.
Additionally, on assign reviewers page for an assignment, there is no way to see the current status of reviews and there is no way for an instructor to unsubmit a submitted review. So, another task is to add this functionality such that review status is seen for each review and to unsubmit a submitted review without reloading the page.

==Proposed Solution==
This project proposes use of AJAX for the required pages to avoid page reloading at the time of adding and saving records. This solution will make sure that adding or saving of record is done remotely and the page is updated without reloading. It can be achieved by calling corresponding controller method, adding/saving the record remotely and rendering it back to JavaScript pages in the view instead of redirecting it to the same page. JavaScript pages in the view will update the page without reloading it, for example by appending the newly added record to the list of records. Thus, records are saved remotely and page refresh is avoided.
For the review status part, responses to the corresponding reviews on the page can be checked in the Response table and the review status shown as the status of the latest response. Unsubmitting a review can be done using AJAX without reloading the page.

==Tasks==
* Add Participant in the assignments section using AJAX
* Add/Remove TA in the courses section using AJAX
* Edit Questionnaire by using AJAX for adding questions in the Questionnaire section
* Show Review Status on assign reviewers page and allow to un-submit a review using AJAX

==Implementation==

===Adding participant===
'''Earlier scenario:''' When an instructor goes to "Manage Assignments -> Add Participants" page, he/she can add/remove new Participant to the assignment. The add page also displays list of participants above the form for new participant. Every time a new Participant is added, the page reloads to reflect the changes and render the updated list of participants, even in case of non-existing userid.

'''Updates/Changes:'''
This page has been updated such that an instructor can add a new Participant using [https://en.wikipedia.org/wiki/Ajax_(programming) AJAX]. After adding AJAX changes, the list gets updated without reloading the entire page. The changes made are below.

* Updated the ''shared_scripts/_user_list.html.erb'' file in views so that the Participants are listed by rendering another partial ''_participant.html.erb'' in participants controller. This change is to make it feasible to add AJAX to just append to the list without any extra formatting.
[[File:User_list.PNG]]

* Created a new file ''participants/add.js.erb'' for adding AJAX to render newly added participant in case of successful addition and display error in case of any error.
[[File:Javascript changes.PNG]]

* Updated the ''shared_scripts/_add_individual.html.erb'' form such that request should be through AJAX by setting remote flag to true.
[[File:Add_individual.PNG]]

* Updated the participants controller ''participant_controller.rb'' in controllers to render JavaScript when add method is invoked by the form submit action instead of redirect to list page.
[[File:Controller_changes.PNG]]

===Adding/Removing TA===
'''Earlier scenario:''' When an instructor goes to "Manage Courses -> Add TA" page, he/she can add/remove new TA to the course. Every time a new TA is added or removed, the page reloads to reflect the changes, even if the userid used does not exist.

'''Updates/Changes:''' This page has been updated such that an instructor can add a new TA or remove a new TA using AJAX. With these updates, the changes are reflected on the page without reloading the page, thus saving time.
* Updated the ''course/view_teaching_assistants.html.erb'' file in views so that the TAs are listed by rendering another partial ''_ta.html.erb''. This is done so that when a new TA has been added, AJAX call can be used to render the format required for the new TA in the list append to the already existing list without reloading the page.
[[File:View_teaching_assistants_html_erb.png]]

* Created a new file ''course/_ta.html.erb'' in views which is a partial as described above and contains the code to list the TAs. The link_to "Delete" line in this file is updated to use :remote=>:true, so that AJAX call can be made to remove the TA remotely without reloading the page.
<pre>
<%= link_to "Delete", { :action => 'remove_ta', :controller =>'course', :id => ta.id, :course_id => ta.course_id }, method: :post, :remote => true, :class => 'remove_ta' %>
</pre>
[[File:Ta.png]]

* Updated the ''course/_add_individual.html.erb'' file in views to perform the form_tag action to Add a TA remotely using :remote=>:true. In the below code, ''form_action'' and ''remote'' are local variables passed to this partial from ''course/view_teaching_assistants.html.erb'' with the values "add_ta" and "true" respectively
[[File:Add_individual_html_erb.png]]

* Updated the ''course_controller.rb" file and replaced the redirect option in ''add_ta'' and ''remove_ta'' to render ''add_ta.js.erb'' and ''remove_ta.js.erb''. Also changed ''flash[:error]'' to ''flash.now[:error]'' so that the flash message is displayed now instead of after page reload.
[[File:Course_controller_rb1.png]]

* Added a new file ''course/add.js.erb'' and ''course/remove_ta.js.erb'' to views. The ''add_ta.js.erb'' file renders the newly added TA and appends it to the list of TAs. It also shows flash error message if the userid used to add TA does not exist. Similarly, ''remote_ta.js.erb'' file removes the deleted TA from the list.
[[File:add_remove_js_erb.png]]

===Edit Questionnaire===

'''Current scenario :''' page consists of different subsections for creating questionnaire,adding questions to the questionnaire and saving the questionnaire i.e.
*_questionnaire.html.erb

Adding questions feature is performed in the following method of ''questionnaires_controller.rb'' class

def add_new_questions
questionnaire_id = params[:id] unless params[:id].nil?
num_of_existed_questions = Questionnaire.find(questionnaire_id).questions.size
((num_of_existed_questions + 1)..(num_of_existed_questions + params[:question][:total_num].to_i)).each do |i|
question = Object.const_get(params[:question][:type]).create(txt: '', questionnaire_id: questionnaire_id, seq: i, type: params[:question][:type], break_before: true)
if question.is_a? ScoredQuestion
question.weight = 1
question.max_label = 'Strongly agree'
question.min_label = 'Strongly disagree'
end
question.size = '50, 3' if question.is_a? Criterion
question.alternatives = '0|1|2|3|4|5' if question.is_a? Dropdown
question.size = '60, 5' if question.is_a? TextArea
question.size = '30' if question.is_a? TextField
begin
question.save
rescue
flash[:error] = $ERROR_INFO
end
end
redirect_to edit_questionnaire_path(questionnaire_id.to_sym)
end

This method invokes ''question.create'' method in ''questions_cotroller.rb'' and saves the created question to the database. Then it redirects to the ''edit.html.erb'' page which causes page refresh while adding questions.

'''Solution:''' This problem was tried to solve using AJAX by changing or adding the following classes and pages
* _question.html.erb (added) - displays added question

<td align="center"><a rel="nofollow" data-method="delete" href="/questions/' <%= @question.id%> '">Remove</a></td>'
<td><input size="6" value="' <%= @question.seq%> '" name="question[' question.id %>'][seq]" id="question_' +<%=@question.id %> '_seq" type="text"></td>
<td><textarea cols="50" rows="1" name="question[' <%= @question.id%> '][txt]" id="question_' <%= @question.id%> '_txt" placeholder="Edit question content here">' <%= @question.txt%> '</textarea></td>
<td><input size="10" disabled="disabled" value="' <%= @question.type%> '" name="question[' <%= @question.id%>'][type]" id="question_' <%= @question.id%> '_type" type="text"></td>
<td></td>

* add_new_questions.js.erb (added) - appends the html content with added question in ''_question.html.erb'' to questions_table in ''_questionnaire.html.erb''

$("#questions_table").append("<%= j render :partial => 'question',
:locals => {question: @question, :id => @question.id, :controller => 'questions'} %>");

* edit.html.erb (modified : code removed) - following code is removed as it internally calls respective question header models and appends html string to questions_table internally.

<% for @question in @questionnaire.questions do%>
<%-# The following line call certain method of the object, which returns html string-%>
<%= @question.edit %>
<% end %>

@question.edit invokes ''QuestionHeader.rb'' model which adds html content
def edit(_count)
html = '<tr>'
html += '<td align="center"><a rel="nofollow" data-method="delete" href="/questions/' + self.id.to_s + '">Remove</a></td>'
html += '<td><input size="6" value="' + self.seq.to_s + '" name="question[' + self.id.to_s + '][seq]" id="question_' + self.id.to_s + '_seq" type="text"></td>'
html += '<td><textarea cols="50" rows="1" name="question[' + self.id.to_s + '][txt]" id="question_' + self.id.to_s + '_txt" placeholder="Edit question content here">' + self.txt + '</textarea></td>'
html += '<td><input size="10" disabled="disabled" value="' + self.type + '" name="question[' + self.id.to_s + '][type]" id="question_' + self.id.to_s + '_type" type="text">''</td>'
html += '<td></td>'
html += '</tr>'
html.html_safe
end

* questionnaires_controller.rb (modified) - add_new_questions method is modified by replacing redire rendering ''add_new_questions.js.erb'' file

render :action=> 'add_new_questions.js.erb', :layout=>false, :question=> question
#redirect_to edit_questionnaire_path(questionnaire_id.to_sym)

'''Issue :''' But this solution is not working as AJAX can be applied to the browser side processing if the controller method is redirecting to the same page, which is not in this case as page gets redirected from question.html.erb to edit.html.erb. Another problem faced is the creation of questions which is called through ''_questionnaire.html.erb'' but not through ''_question.html.erb'' which makes it difficult to pass correct questionnaire id to the AJAX call.

'''Alternative Approach to Edit Questionnaire:''' Another approach to solve this issue is to create a seperate java-script function which handles the entire process of adding,saving,deleting questions and appending them. Call this function from ''_questionnaire.html.erb'' instead of invoking add_new_questions method. Questions can be saved and retrived from data using JavaScript Rest API calls. But, this approach not only needs to restructure entire questionnaire structure and many components in the Expertiza project but also violates the MVC design of the project.

===Un-submit reviews===
'''Earlier scenario:''' When an instructor/TA goes to "Manage Assignments -> Assign Reviewers" page, he/she can see a list of all the topics, the contributors and the reviewers for each topic. This page did not show the status of each review which can be in Assigned state or Saved state or Submitted state. Also, there was no way for the instructor/TA to un-submit an already submitted review.

'''New Additions:'''
* Updated the ''review_mappings/_list_review_mappings.html.erb'' file in views to display the status of each review by the reviewer. For each review_mapping, the code checks if there is a response in ''Response'' table with the same ''map_id'' used in the review_mappings on this page.
** If there is no such response, it means that the reviewer has not saved/submitted the review and it is currently in Assigned State. So, "Response Status: Saved" is shown for that review.
** If there is a response, the last (latest) response is checked as per requirement and the ''is_submitted'' attribute of this response is checked in the ''Response'' table.
*** If the attribute is false, the review has been saved but not submitted. So, "Response Status: Saved" is shown for that review.
*** If the attribute is true, the review has been submitted. So, "Response Status: Submitted" is shown for that review. Next to this, a link is created to un-submit the review. Clicking on this link changes the ''is_submitted'' attribute to false and updates the Response Status to Saved on the page by using AJAX call, without reloading the page
[[File:List_review_mappings_html_erb.png]]
* Added a new method "unsubmit_review" to the ''review_mapping_controller.rb'' file. In this, we first find the latest response and then update the ''is_submitted'' attribute to false. The flash message is created based on whether the response was updated correctly. After this, ''unsubmit_review.js.rb'' file is rendered which updates the response status for the corresponding review on the page to Saved, without reloading the page
[[File:Review_mapping_controller_rb.png]]
* Added a new file ''review_mappings/unsubmit_review.js.erb'' to views. This file just changes the response status for the corresponding review displayed on the page to Saved from Submit after the review has been un-submitted and also prints the corresponding success or error flash message.
[[File:Unsubmit_review_js_erb.png]]
* Added a new line to ''routes.rb'' page for unsubmit_review action
[[File:Routes_rb.png]]

==Test Plan==

===Log in details===

'''Username:''' instructor6
'''password:''' password

Some valid user id's are student5000, student5001, student5002 etc. These can be used while adding new Participant or TA as described below.

===Automated Testing===
* Created a helper module ''wait_for_ajax.rb'' with methods to wait for ajax requests to finish
* Updated the test "check to see if participants can be added" in ''assignment_creation_spec.rb'' to wait for AJAX calls to finish after adding a participant by using the helper module created
* Added a new test named "can unsubmit a review" in ''review_mapping_spec.rb''
** In this test, a new reviewer is added to review mapping, a new review is created and submitted, and then checked if unsubmit functionality is working correctly
[[File:Unsubmit_review.png]]
* Added a new file ''course_creation_spec.rb'' to test adding and remove TA's
Initially the test was failing as test.db does not contain role for Teaching Assistant. So, added that role to test database.
[[File:Add_ta_role.png]]
Created test cases for adding/removing TA after visiting course page.
[[File:Add_ta.png]]

===UI Testing===

'''Steps to test adding participant: '''

* Login as instructor
* Go to Manage -> Assignments.
* Switch to Assignments tab incase you are on some other tab
* For any assignment, click on the 'Add Participant' icon to go on add new participant page
* Enter userid of the participant and click on Add to add the participant

'' Expected Output: '' When add button is clicked with valid userid, new participant should be added to the list without the page getting reloaded. In case of an attempt to add invalid user, the error should be displayed on top without page getting reloaded.

''' Steps to test adding/removing TA:'''

* Login as instructor
* Go to Manage -> Courses.
* Switch to Courses tab incase you are on some other tab
* For any course, click on the 'Add TA' icon to go on add new TA page
* Enter userid of the TA and click on Add to add the TA
* Click on 'remove_ta' link for any TA in the list to remove the TA

'' Expected Output: '' When add button is clicked with valid userid, new TA should be added to the list without the page getting reloaded. In case of an attempt to add invalid user, the error should be displayed on top without page getting reloaded. When remove_ta link is clicked for any TA in the list, that corresponding TA should be removed from the list without the page getting reloaded.
Note: A duplicate TA is currently allowed. This was a part of original (earlier) functionality, and as this project involved changes to use AJAX and not changes to the actual functionality, this original functionality is not changed

''' Steps to test adding question in questionnaire:'''

* Login as instructor
* Go to Manage -> Questionnaires. Create a new Review Questionnaire by clicking on the ‘New public item’ button for ‘Review’.
* Name the Questionnaire and click on create button
* Click on Edit for newly created questionnaire. You will now be navigated to page where you can add new questions to the questionnaire.
* Click on add button in "Questions" section.

''Expected output:'' When add button is clicked, question should be created and the questionnaire page should not get reloaded

''' Steps to test un-submit reviews'''

* Login as instructor
* Go to Manage -> Assignments.
* Switch to Assignments tab incase you are on some other tab
* For any assignment, click on the 'Assign reviewers' icon to go to the review mappings page
** Note: Some assignments might not have reviewers. So, try this for assignments with many reviewers
* For any review with Review Status = Submitted, click on 'unsubmit' button

''Expected output:'' For every review, the review status should be seen as either Assigned or Saved or Submitted. For submitted reviews, when unsubmit button is clicked, that review should be unsubmitted and status should change to Saved without page getting reloaded.

==Project Deployment==

Expertiza setup is done in VCL which is reserved for 30 days with Ubuntu 14.04 base. Started expertiza server publicly and link to access the server is:
http://152.7.99.101:3000

==Future work==

In future, we will try to implement the edit questionnaire part using alternative approach. We will try to implement testing using rspec framework and improve the UI design of the pages.

==References==

* https://www.youtube.com/channel/UCdKXzox7hrWjfOMML6FzTWg
* https://github.com/expertiza/expertiza
* http://wiki.expertiza.ncsu.edu/index.php/Expertiza_documentation
* http://guides.rubyonrails.org/working_with_javascript_in_rails.html
* http://wiki.expertiza.ncsu.edu/index.php/Development:Setup:Linux:Debian

CSC/ECE 517 Spring 2017/Use Ajax to add Participants,TA and Edit Questionnaire

2017-04-01T04:35:24Z

Dguttik: /* Automated Testing */

==Introduction==

<nowiki> Expertiza is an opensource software developed to assist people in education institutions to perform peer reviews and group projects. It is exceptionally helpful to the students and instructors. The software is designed in MVC (Model-View-Controller) architecture using ruby on rails.
</nowiki>

==Problem Statement==
Expertiza provides many categories to manage for an instructor. Few of these categories are assignments, courses and questionnaires. Currently, to add/remove/update records, the entire page is submitted to save the record and the entire page is re-loaded back again to reflect the changes on the page. The task is to improve this functionality such that some of the records, specifically adding participants to courses or assignments, adding/removing teaching assistants to/from courses and adding questions to questionnaires, can be saved remotely and the page updated without submitting and reloading the entire page.
Additionally, on assign reviewers page for an assignment, there is no way to see the current status of reviews and there is no way for an instructor to unsubmit a submitted review. So, another task is to add this functionality such that review status is seen for each review and to unsubmit a submitted review without reloading the page.

==Proposed Solution==
This project proposes use of AJAX for the required pages to avoid page reloading at the time of adding and saving records. This solution will make sure that adding or saving of record is done remotely and the page is updated without reloading. It can be achieved by calling corresponding controller method, adding/saving the record remotely and rendering it back to JavaScript pages in the view instead of redirecting it to the same page. JavaScript pages in the view will update the page without reloading it, for example by appending the newly added record to the list of records. Thus, records are saved remotely and page refresh is avoided.
For the review status part, responses to the corresponding reviews on the page can be checked in the Response table and the review status shown as the status of the latest response. Unsubmitting a review can be done using AJAX without reloading the page.

==Tasks==
* Add Participant in the assignments section using AJAX
* Add/Remove TA in the courses section using AJAX
* Edit Questionnaire by using AJAX for adding questions in the Questionnaire section
* Show Review Status on assign reviewers page and allow to un-submit a review using AJAX

==Implementation==

===Adding participant===
'''Earlier scenario:''' When an instructor goes to "Manage Assignments -> Add Participants" page, he/she can add/remove new Participant to the assignment. The add page also displays list of participants above the form for new participant. Every time a new Participant is added, the page reloads to reflect the changes and render the updated list of participants, even in case of non-existing userid.

'''Updates/Changes:'''
This page has been updated such that an instructor can add a new Participant using [https://en.wikipedia.org/wiki/Ajax_(programming) AJAX]. After adding AJAX changes, the list gets updated without reloading the entire page. The changes made are below.

* Updated the ''shared_scripts/_user_list.html.erb'' file in views so that the Participants are listed by rendering another partial ''_participant.html.erb'' in participants controller. This change is to make it feasible to add AJAX to just append to the list without any extra formatting.
[[File:User_list.PNG]]

* Created a new file ''participants/add.js.erb'' for adding AJAX to render newly added participant in case of successful addition and display error in case of any error.
[[File:Javascript changes.PNG]]

* Updated the ''shared_scripts/_add_individual.html.erb'' form such that request should be through AJAX by setting remote flag to true.
[[File:Add_individual.PNG]]

* Updated the participants controller ''participant_controller.rb'' in controllers to render JavaScript when add method is invoked by the form submit action instead of redirect to list page.
[[File:Controller_changes.PNG]]

===Adding/Removing TA===
'''Earlier scenario:''' When an instructor goes to "Manage Courses -> Add TA" page, he/she can add/remove new TA to the course. Every time a new TA is added or removed, the page reloads to reflect the changes, even if the userid used does not exist.

'''Updates/Changes:''' This page has been updated such that an instructor can add a new TA or remove a new TA using AJAX. With these updates, the changes are reflected on the page without reloading the page, thus saving time.
* Updated the ''course/view_teaching_assistants.html.erb'' file in views so that the TAs are listed by rendering another partial ''_ta.html.erb''. This is done so that when a new TA has been added, AJAX call can be used to render the format required for the new TA in the list append to the already existing list without reloading the page.
[[File:View_teaching_assistants_html_erb.png]]

* Created a new file ''course/_ta.html.erb'' in views which is a partial as described above and contains the code to list the TAs. The link_to "Delete" line in this file is updated to use :remote=>:true, so that AJAX call can be made to remove the TA remotely without reloading the page.
<pre>
<%= link_to "Delete", { :action => 'remove_ta', :controller =>'course', :id => ta.id, :course_id => ta.course_id }, method: :post, :remote => true, :class => 'remove_ta' %>
</pre>
[[File:Ta.png]]

* Updated the ''course/_add_individual.html.erb'' file in views to perform the form_tag action to Add a TA remotely using :remote=>:true. In the below code, ''form_action'' and ''remote'' are local variables passed to this partial from ''course/view_teaching_assistants.html.erb'' with the values "add_ta" and "true" respectively
[[File:Add_individual_html_erb.png]]

* Updated the ''course_controller.rb" file and replaced the redirect option in ''add_ta'' and ''remove_ta'' to render ''add_ta.js.erb'' and ''remove_ta.js.erb''. Also changed ''flash[:error]'' to ''flash.now[:error]'' so that the flash message is displayed now instead of after page reload.
[[File:Course_controller_rb1.png]]

* Added a new file ''course/add.js.erb'' and ''course/remove_ta.js.erb'' to views. The ''add_ta.js.erb'' file renders the newly added TA and appends it to the list of TAs. It also shows flash error message if the userid used to add TA does not exist. Similarly, ''remote_ta.js.erb'' file removes the deleted TA from the list.
[[File:add_remove_js_erb.png]]

===Edit Questionnaire===

'''Current scenario :''' page consists of different subsections for creating questionnaire,adding questions to the questionnaire and saving the questionnaire i.e.
*_questionnaire.html.erb

Adding questions feature is performed in the following method of ''questionnaires_controller.rb'' class

def add_new_questions
questionnaire_id = params[:id] unless params[:id].nil?
num_of_existed_questions = Questionnaire.find(questionnaire_id).questions.size
((num_of_existed_questions + 1)..(num_of_existed_questions + params[:question][:total_num].to_i)).each do |i|
question = Object.const_get(params[:question][:type]).create(txt: '', questionnaire_id: questionnaire_id, seq: i, type: params[:question][:type], break_before: true)
if question.is_a? ScoredQuestion
question.weight = 1
question.max_label = 'Strongly agree'
question.min_label = 'Strongly disagree'
end
question.size = '50, 3' if question.is_a? Criterion
question.alternatives = '0|1|2|3|4|5' if question.is_a? Dropdown
question.size = '60, 5' if question.is_a? TextArea
question.size = '30' if question.is_a? TextField
begin
question.save
rescue
flash[:error] = $ERROR_INFO
end
end
redirect_to edit_questionnaire_path(questionnaire_id.to_sym)
end

This method invokes ''question.create'' method in ''questions_cotroller.rb'' and saves the created question to the database. Then it redirects to the ''edit.html.erb'' page which causes page refresh while adding questions.

'''Solution:''' This problem was tried to solve using AJAX by changing or adding the following classes and pages
* _question.html.erb (added) - displays added question

<td align="center"><a rel="nofollow" data-method="delete" href="/questions/' <%= @question.id%> '">Remove</a></td>'
<td><input size="6" value="' <%= @question.seq%> '" name="question[' question.id %>'][seq]" id="question_' +<%=@question.id %> '_seq" type="text"></td>
<td><textarea cols="50" rows="1" name="question[' <%= @question.id%> '][txt]" id="question_' <%= @question.id%> '_txt" placeholder="Edit question content here">' <%= @question.txt%> '</textarea></td>
<td><input size="10" disabled="disabled" value="' <%= @question.type%> '" name="question[' <%= @question.id%>'][type]" id="question_' <%= @question.id%> '_type" type="text"></td>
<td></td>

* add_new_questions.js.erb (added) - appends the html content with added question in ''_question.html.erb'' to questions_table in ''_questionnaire.html.erb''

$("#questions_table").append("<%= j render :partial => 'question',
:locals => {question: @question, :id => @question.id, :controller => 'questions'} %>");

* edit.html.erb (modified : code removed) - following code is removed as it internally calls respective question header models and appends html string to questions_table internally.

<% for @question in @questionnaire.questions do%>
<%-# The following line call certain method of the object, which returns html string-%>
<%= @question.edit %>
<% end %>

@question.edit invokes ''QuestionHeader.rb'' model which adds html content
def edit(_count)
html = '<tr>'
html += '<td align="center"><a rel="nofollow" data-method="delete" href="/questions/' + self.id.to_s + '">Remove</a></td>'
html += '<td><input size="6" value="' + self.seq.to_s + '" name="question[' + self.id.to_s + '][seq]" id="question_' + self.id.to_s + '_seq" type="text"></td>'
html += '<td><textarea cols="50" rows="1" name="question[' + self.id.to_s + '][txt]" id="question_' + self.id.to_s + '_txt" placeholder="Edit question content here">' + self.txt + '</textarea></td>'
html += '<td><input size="10" disabled="disabled" value="' + self.type + '" name="question[' + self.id.to_s + '][type]" id="question_' + self.id.to_s + '_type" type="text">''</td>'
html += '<td></td>'
html += '</tr>'
html.html_safe
end

* questionnaires_controller.rb (modified) - add_new_questions method is modified by replacing redire rendering ''add_new_questions.js.erb'' file

render :action=> 'add_new_questions.js.erb', :layout=>false, :question=> question
#redirect_to edit_questionnaire_path(questionnaire_id.to_sym)

'''Issue :''' But this solution is not working as AJAX can be applied to the browser side processing if the controller method is redirecting to the same page, which is not in this case as page gets redirected from question.html.erb to edit.html.erb. Another problem faced is the creation of questions which is called through ''_questionnaire.html.erb'' but not through ''_question.html.erb'' which makes it difficult to pass correct questionnaire id to the AJAX call.

'''Alternative Approach to Edit Questionnaire:''' Another approach to solve this issue is to create a seperate java-script function which handles the entire process of adding,saving,deleting questions and appending them. Call this function from ''_questionnaire.html.erb'' instead of invoking add_new_questions method. Questions can be saved and retrived from data using JavaScript Rest API calls. But, this approach not only needs to restructure entire questionnaire structure and many components in the Expertiza project but also violates the MVC design of the project.

===Un-submit reviews===
'''Earlier scenario:''' When an instructor/TA goes to "Manage Assignments -> Assign Reviewers" page, he/she can see a list of all the topics, the contributors and the reviewers for each topic. This page did not show the status of each review which can be in Assigned state or Saved state or Submitted state. Also, there was no way for the instructor/TA to un-submit an already submitted review.

'''New Additions:'''
* Updated the ''review_mappings/_list_review_mappings.html.erb'' file in views to display the status of each review by the reviewer. For each review_mapping, the code checks if there is a response in ''Response'' table with the same ''map_id'' used in the review_mappings on this page.
** If there is no such response, it means that the reviewer has not saved/submitted the review and it is currently in Assigned State. So, "Response Status: Saved" is shown for that review.
** If there is a response, the last (latest) response is checked as per requirement and the ''is_submitted'' attribute of this response is checked in the ''Response'' table.
*** If the attribute is false, the review has been saved but not submitted. So, "Response Status: Saved" is shown for that review.
*** If the attribute is true, the review has been submitted. So, "Response Status: Submitted" is shown for that review. Next to this, a link is created to un-submit the review. Clicking on this link changes the ''is_submitted'' attribute to false and updates the Response Status to Saved on the page by using AJAX call, without reloading the page
[[File:List_review_mappings_html_erb.png]]
* Added a new method "unsubmit_review" to the ''review_mapping_controller.rb'' file. In this, we first find the latest response and then update the ''is_submitted'' attribute to false. The flash message is created based on whether the response was updated correctly. After this, ''unsubmit_review.js.rb'' file is rendered which updates the response status for the corresponding review on the page to Saved, without reloading the page
[[File:Review_mapping_controller_rb.png]]
* Added a new file ''review_mappings/unsubmit_review.js.erb'' to views. This file just changes the response status for the corresponding review displayed on the page to Saved from Submit after the review has been un-submitted and also prints the corresponding success or error flash message.
[[File:Unsubmit_review_js_erb.png]]
* Added a new line to ''routes.rb'' page for unsubmit_review action
[[File:Routes_rb.png]]

==Test Plan==

===Log in details===

'''Username:''' instructor6
'''password:''' password

Some valid user id's are student5000, student5001, student5002 etc. These can be used while adding new Participant or TA as described below.

===Automated Testing===
* Created a helper module ''wait_for_ajax.rb'' with methods to wait for ajax requests to finish
* Updated the test "check to see if participants can be added" in ''assignment_creation_spec.rb'' to wait for AJAX calls to finish after adding a participant by using the helper module created
* Added a new test named "can unsubmit a review" in ''review_mapping_spec.rb''
[[File:Unsubmit_review.png]]
** In this test, a new reviewer is added to review mapping, a new review is created and submitted, and then checked if unsubmit functionality is working correctly
* Added a new file ''course_creation_spec.rb'' to test adding and remove TA's
Initially the test was failing as test.db does not contain role for Teaching Assistant. So, added that role to test database.
[[File:Add_ta_role.png]]
Created test cases for adding/removing TA after visiting course page.
[[File:Add_ta.png]]

===UI Testing===

'''Steps to test adding participant: '''

* Login as instructor
* Go to Manage -> Assignments.
* Switch to Assignments tab incase you are on some other tab
* For any assignment, click on the 'Add Participant' icon to go on add new participant page
* Enter userid of the participant and click on Add to add the participant

'' Expected Output: '' When add button is clicked with valid userid, new participant should be added to the list without the page getting reloaded. In case of an attempt to add invalid user, the error should be displayed on top without page getting reloaded.

''' Steps to test adding/removing TA:'''

* Login as instructor
* Go to Manage -> Courses.
* Switch to Courses tab incase you are on some other tab
* For any course, click on the 'Add TA' icon to go on add new TA page
* Enter userid of the TA and click on Add to add the TA
* Click on 'remove_ta' link for any TA in the list to remove the TA

'' Expected Output: '' When add button is clicked with valid userid, new TA should be added to the list without the page getting reloaded. In case of an attempt to add invalid user, the error should be displayed on top without page getting reloaded. When remove_ta link is clicked for any TA in the list, that corresponding TA should be removed from the list without the page getting reloaded.
Note: A duplicate TA is currently allowed. This was a part of original (earlier) functionality, and as this project involved changes to use AJAX and not changes to the actual functionality, this original functionality is not changed

''' Steps to test adding question in questionnaire:'''

* Login as instructor
* Go to Manage -> Questionnaires. Create a new Review Questionnaire by clicking on the ‘New public item’ button for ‘Review’.
* Name the Questionnaire and click on create button
* Click on Edit for newly created questionnaire. You will now be navigated to page where you can add new questions to the questionnaire.
* Click on add button in "Questions" section.

''Expected output:'' When add button is clicked, question should be created and the questionnaire page should not get reloaded

''' Steps to test un-submit reviews'''

* Login as instructor
* Go to Manage -> Assignments.
* Switch to Assignments tab incase you are on some other tab
* For any assignment, click on the 'Assign reviewers' icon to go to the review mappings page
** Note: Some assignments might not have reviewers. So, try this for assignments with many reviewers
* For any review with Review Status = Submitted, click on 'unsubmit' button

''Expected output:'' For every review, the review status should be seen as either Assigned or Saved or Submitted. For submitted reviews, when unsubmit button is clicked, that review should be unsubmitted and status should change to Saved without page getting reloaded.

==Project Deployment==

Expertiza setup is done in VCL which is reserved for 30 days with Ubuntu 14.04 base. Started expertiza server publicly and link to access the server is:
http://152.7.99.101:3000

==Future work==

In future, we will try to implement the edit questionnaire part using alternative approach. We will try to implement testing using rspec framework and improve the UI design of the pages.

==References==

* https://www.youtube.com/channel/UCdKXzox7hrWjfOMML6FzTWg
* https://github.com/expertiza/expertiza
* http://wiki.expertiza.ncsu.edu/index.php/Expertiza_documentation
* http://guides.rubyonrails.org/working_with_javascript_in_rails.html
* http://wiki.expertiza.ncsu.edu/index.php/Development:Setup:Linux:Debian

File:Unsubmit review.png

2017-04-01T04:34:13Z

Dguttik:

CSC/ECE 517 Spring 2017/Use Ajax to add Participants,TA and Edit Questionnaire

2017-04-01T04:31:09Z

Dguttik: /* Automated Testing */

==Introduction==

<nowiki> Expertiza is an opensource software developed to assist people in education institutions to perform peer reviews and group projects. It is exceptionally helpful to the students and instructors. The software is designed in MVC (Model-View-Controller) architecture using ruby on rails.
</nowiki>

==Problem Statement==
Expertiza provides many categories to manage for an instructor. Few of these categories are assignments, courses and questionnaires. Currently, to add/remove/update records, the entire page is submitted to save the record and the entire page is re-loaded back again to reflect the changes on the page. The task is to improve this functionality such that some of the records, specifically adding participants to courses or assignments, adding/removing teaching assistants to/from courses and adding questions to questionnaires, can be saved remotely and the page updated without submitting and reloading the entire page.
Additionally, on assign reviewers page for an assignment, there is no way to see the current status of reviews and there is no way for an instructor to unsubmit a submitted review. So, another task is to add this functionality such that review status is seen for each review and to unsubmit a submitted review without reloading the page.

==Proposed Solution==
This project proposes use of AJAX for the required pages to avoid page reloading at the time of adding and saving records. This solution will make sure that adding or saving of record is done remotely and the page is updated without reloading. It can be achieved by calling corresponding controller method, adding/saving the record remotely and rendering it back to JavaScript pages in the view instead of redirecting it to the same page. JavaScript pages in the view will update the page without reloading it, for example by appending the newly added record to the list of records. Thus, records are saved remotely and page refresh is avoided.
For the review status part, responses to the corresponding reviews on the page can be checked in the Response table and the review status shown as the status of the latest response. Unsubmitting a review can be done using AJAX without reloading the page.

==Tasks==
* Add Participant in the assignments section using AJAX
* Add/Remove TA in the courses section using AJAX
* Edit Questionnaire by using AJAX for adding questions in the Questionnaire section
* Show Review Status on assign reviewers page and allow to un-submit a review using AJAX

==Implementation==

===Adding participant===
'''Earlier scenario:''' When an instructor goes to "Manage Assignments -> Add Participants" page, he/she can add/remove new Participant to the assignment. The add page also displays list of participants above the form for new participant. Every time a new Participant is added, the page reloads to reflect the changes and render the updated list of participants, even in case of non-existing userid.

'''Updates/Changes:'''
This page has been updated such that an instructor can add a new Participant using [https://en.wikipedia.org/wiki/Ajax_(programming) AJAX]. After adding AJAX changes, the list gets updated without reloading the entire page. The changes made are below.

* Updated the ''shared_scripts/_user_list.html.erb'' file in views so that the Participants are listed by rendering another partial ''_participant.html.erb'' in participants controller. This change is to make it feasible to add AJAX to just append to the list without any extra formatting.
[[File:User_list.PNG]]

* Created a new file ''participants/add.js.erb'' for adding AJAX to render newly added participant in case of successful addition and display error in case of any error.
[[File:Javascript changes.PNG]]

* Updated the ''shared_scripts/_add_individual.html.erb'' form such that request should be through AJAX by setting remote flag to true.
[[File:Add_individual.PNG]]

* Updated the participants controller ''participant_controller.rb'' in controllers to render JavaScript when add method is invoked by the form submit action instead of redirect to list page.
[[File:Controller_changes.PNG]]

===Adding/Removing TA===
'''Earlier scenario:''' When an instructor goes to "Manage Courses -> Add TA" page, he/she can add/remove new TA to the course. Every time a new TA is added or removed, the page reloads to reflect the changes, even if the userid used does not exist.

'''Updates/Changes:''' This page has been updated such that an instructor can add a new TA or remove a new TA using AJAX. With these updates, the changes are reflected on the page without reloading the page, thus saving time.
* Updated the ''course/view_teaching_assistants.html.erb'' file in views so that the TAs are listed by rendering another partial ''_ta.html.erb''. This is done so that when a new TA has been added, AJAX call can be used to render the format required for the new TA in the list append to the already existing list without reloading the page.
[[File:View_teaching_assistants_html_erb.png]]

* Created a new file ''course/_ta.html.erb'' in views which is a partial as described above and contains the code to list the TAs. The link_to "Delete" line in this file is updated to use :remote=>:true, so that AJAX call can be made to remove the TA remotely without reloading the page.
<pre>
<%= link_to "Delete", { :action => 'remove_ta', :controller =>'course', :id => ta.id, :course_id => ta.course_id }, method: :post, :remote => true, :class => 'remove_ta' %>
</pre>
[[File:Ta.png]]

* Updated the ''course/_add_individual.html.erb'' file in views to perform the form_tag action to Add a TA remotely using :remote=>:true. In the below code, ''form_action'' and ''remote'' are local variables passed to this partial from ''course/view_teaching_assistants.html.erb'' with the values "add_ta" and "true" respectively
[[File:Add_individual_html_erb.png]]

* Updated the ''course_controller.rb" file and replaced the redirect option in ''add_ta'' and ''remove_ta'' to render ''add_ta.js.erb'' and ''remove_ta.js.erb''. Also changed ''flash[:error]'' to ''flash.now[:error]'' so that the flash message is displayed now instead of after page reload.
[[File:Course_controller_rb1.png]]

* Added a new file ''course/add.js.erb'' and ''course/remove_ta.js.erb'' to views. The ''add_ta.js.erb'' file renders the newly added TA and appends it to the list of TAs. It also shows flash error message if the userid used to add TA does not exist. Similarly, ''remote_ta.js.erb'' file removes the deleted TA from the list.
[[File:add_remove_js_erb.png]]

===Edit Questionnaire===

'''Current scenario :''' page consists of different subsections for creating questionnaire,adding questions to the questionnaire and saving the questionnaire i.e.
*_questionnaire.html.erb

Adding questions feature is performed in the following method of ''questionnaires_controller.rb'' class

def add_new_questions
questionnaire_id = params[:id] unless params[:id].nil?
num_of_existed_questions = Questionnaire.find(questionnaire_id).questions.size
((num_of_existed_questions + 1)..(num_of_existed_questions + params[:question][:total_num].to_i)).each do |i|
question = Object.const_get(params[:question][:type]).create(txt: '', questionnaire_id: questionnaire_id, seq: i, type: params[:question][:type], break_before: true)
if question.is_a? ScoredQuestion
question.weight = 1
question.max_label = 'Strongly agree'
question.min_label = 'Strongly disagree'
end
question.size = '50, 3' if question.is_a? Criterion
question.alternatives = '0|1|2|3|4|5' if question.is_a? Dropdown
question.size = '60, 5' if question.is_a? TextArea
question.size = '30' if question.is_a? TextField
begin
question.save
rescue
flash[:error] = $ERROR_INFO
end
end
redirect_to edit_questionnaire_path(questionnaire_id.to_sym)
end

This method invokes ''question.create'' method in ''questions_cotroller.rb'' and saves the created question to the database. Then it redirects to the ''edit.html.erb'' page which causes page refresh while adding questions.

'''Solution:''' This problem was tried to solve using AJAX by changing or adding the following classes and pages
* _question.html.erb (added) - displays added question

<td align="center"><a rel="nofollow" data-method="delete" href="/questions/' <%= @question.id%> '">Remove</a></td>'
<td><input size="6" value="' <%= @question.seq%> '" name="question[' question.id %>'][seq]" id="question_' +<%=@question.id %> '_seq" type="text"></td>
<td><textarea cols="50" rows="1" name="question[' <%= @question.id%> '][txt]" id="question_' <%= @question.id%> '_txt" placeholder="Edit question content here">' <%= @question.txt%> '</textarea></td>
<td><input size="10" disabled="disabled" value="' <%= @question.type%> '" name="question[' <%= @question.id%>'][type]" id="question_' <%= @question.id%> '_type" type="text"></td>
<td></td>

* add_new_questions.js.erb (added) - appends the html content with added question in ''_question.html.erb'' to questions_table in ''_questionnaire.html.erb''

$("#questions_table").append("<%= j render :partial => 'question',
:locals => {question: @question, :id => @question.id, :controller => 'questions'} %>");

* edit.html.erb (modified : code removed) - following code is removed as it internally calls respective question header models and appends html string to questions_table internally.

<% for @question in @questionnaire.questions do%>
<%-# The following line call certain method of the object, which returns html string-%>
<%= @question.edit %>
<% end %>

@question.edit invokes ''QuestionHeader.rb'' model which adds html content
def edit(_count)
html = '<tr>'
html += '<td align="center"><a rel="nofollow" data-method="delete" href="/questions/' + self.id.to_s + '">Remove</a></td>'
html += '<td><input size="6" value="' + self.seq.to_s + '" name="question[' + self.id.to_s + '][seq]" id="question_' + self.id.to_s + '_seq" type="text"></td>'
html += '<td><textarea cols="50" rows="1" name="question[' + self.id.to_s + '][txt]" id="question_' + self.id.to_s + '_txt" placeholder="Edit question content here">' + self.txt + '</textarea></td>'
html += '<td><input size="10" disabled="disabled" value="' + self.type + '" name="question[' + self.id.to_s + '][type]" id="question_' + self.id.to_s + '_type" type="text">''</td>'
html += '<td></td>'
html += '</tr>'
html.html_safe
end

* questionnaires_controller.rb (modified) - add_new_questions method is modified by replacing redire rendering ''add_new_questions.js.erb'' file

render :action=> 'add_new_questions.js.erb', :layout=>false, :question=> question
#redirect_to edit_questionnaire_path(questionnaire_id.to_sym)

'''Issue :''' But this solution is not working as AJAX can be applied to the browser side processing if the controller method is redirecting to the same page, which is not in this case as page gets redirected from question.html.erb to edit.html.erb. Another problem faced is the creation of questions which is called through ''_questionnaire.html.erb'' but not through ''_question.html.erb'' which makes it difficult to pass correct questionnaire id to the AJAX call.

'''Alternative Approach to Edit Questionnaire:''' Another approach to solve this issue is to create a seperate java-script function which handles the entire process of adding,saving,deleting questions and appending them. Call this function from ''_questionnaire.html.erb'' instead of invoking add_new_questions method. Questions can be saved and retrived from data using JavaScript Rest API calls. But, this approach not only needs to restructure entire questionnaire structure and many components in the Expertiza project but also violates the MVC design of the project.

===Un-submit reviews===
'''Earlier scenario:''' When an instructor/TA goes to "Manage Assignments -> Assign Reviewers" page, he/she can see a list of all the topics, the contributors and the reviewers for each topic. This page did not show the status of each review which can be in Assigned state or Saved state or Submitted state. Also, there was no way for the instructor/TA to un-submit an already submitted review.

'''New Additions:'''
* Updated the ''review_mappings/_list_review_mappings.html.erb'' file in views to display the status of each review by the reviewer. For each review_mapping, the code checks if there is a response in ''Response'' table with the same ''map_id'' used in the review_mappings on this page.
** If there is no such response, it means that the reviewer has not saved/submitted the review and it is currently in Assigned State. So, "Response Status: Saved" is shown for that review.
** If there is a response, the last (latest) response is checked as per requirement and the ''is_submitted'' attribute of this response is checked in the ''Response'' table.
*** If the attribute is false, the review has been saved but not submitted. So, "Response Status: Saved" is shown for that review.
*** If the attribute is true, the review has been submitted. So, "Response Status: Submitted" is shown for that review. Next to this, a link is created to un-submit the review. Clicking on this link changes the ''is_submitted'' attribute to false and updates the Response Status to Saved on the page by using AJAX call, without reloading the page
[[File:List_review_mappings_html_erb.png]]
* Added a new method "unsubmit_review" to the ''review_mapping_controller.rb'' file. In this, we first find the latest response and then update the ''is_submitted'' attribute to false. The flash message is created based on whether the response was updated correctly. After this, ''unsubmit_review.js.rb'' file is rendered which updates the response status for the corresponding review on the page to Saved, without reloading the page
[[File:Review_mapping_controller_rb.png]]
* Added a new file ''review_mappings/unsubmit_review.js.erb'' to views. This file just changes the response status for the corresponding review displayed on the page to Saved from Submit after the review has been un-submitted and also prints the corresponding success or error flash message.
[[File:Unsubmit_review_js_erb.png]]
* Added a new line to ''routes.rb'' page for unsubmit_review action
[[File:Routes_rb.png]]

==Test Plan==

===Log in details===

'''Username:''' instructor6
'''password:''' password

Some valid user id's are student5000, student5001, student5002 etc. These can be used while adding new Participant or TA as described below.

===Automated Testing===
* Created a helper module ''wait_for_ajax.rb'' with methods to wait for ajax requests to finish
* Updated the test "check to see if participants can be added" in ''assignment_creation_spec.rb'' to wait for AJAX calls to finish after adding a participant by using the helper module created
* Added a new test named "can unsubmit a review" in ''review_mapping_spec.rb''
** In this test, a new reviewer is added to review mapping, a new review is created and submitted, and then checked if unsubmit functionality is working correctly
* Added a new file ''course_creation_spec.rb'' to test adding and remove TA's
Initially the test was failing as test.db does not contain role for Teaching Assistant. So, added that role to test database.
[[File:Add_ta_role.png]]
Created test cases for adding/removing TA after visiting course page.
[[File:Add_ta.png]]

===UI Testing===

'''Steps to test adding participant: '''

* Login as instructor
* Go to Manage -> Assignments.
* Switch to Assignments tab incase you are on some other tab
* For any assignment, click on the 'Add Participant' icon to go on add new participant page
* Enter userid of the participant and click on Add to add the participant

'' Expected Output: '' When add button is clicked with valid userid, new participant should be added to the list without the page getting reloaded. In case of an attempt to add invalid user, the error should be displayed on top without page getting reloaded.

''' Steps to test adding/removing TA:'''

* Login as instructor
* Go to Manage -> Courses.
* Switch to Courses tab incase you are on some other tab
* For any course, click on the 'Add TA' icon to go on add new TA page
* Enter userid of the TA and click on Add to add the TA
* Click on 'remove_ta' link for any TA in the list to remove the TA

'' Expected Output: '' When add button is clicked with valid userid, new TA should be added to the list without the page getting reloaded. In case of an attempt to add invalid user, the error should be displayed on top without page getting reloaded. When remove_ta link is clicked for any TA in the list, that corresponding TA should be removed from the list without the page getting reloaded.
Note: A duplicate TA is currently allowed. This was a part of original (earlier) functionality, and as this project involved changes to use AJAX and not changes to the actual functionality, this original functionality is not changed

''' Steps to test adding question in questionnaire:'''

* Login as instructor
* Go to Manage -> Questionnaires. Create a new Review Questionnaire by clicking on the ‘New public item’ button for ‘Review’.
* Name the Questionnaire and click on create button
* Click on Edit for newly created questionnaire. You will now be navigated to page where you can add new questions to the questionnaire.
* Click on add button in "Questions" section.

''Expected output:'' When add button is clicked, question should be created and the questionnaire page should not get reloaded

''' Steps to test un-submit reviews'''

* Login as instructor
* Go to Manage -> Assignments.
* Switch to Assignments tab incase you are on some other tab
* For any assignment, click on the 'Assign reviewers' icon to go to the review mappings page
** Note: Some assignments might not have reviewers. So, try this for assignments with many reviewers
* For any review with Review Status = Submitted, click on 'unsubmit' button

''Expected output:'' For every review, the review status should be seen as either Assigned or Saved or Submitted. For submitted reviews, when unsubmit button is clicked, that review should be unsubmitted and status should change to Saved without page getting reloaded.

==Project Deployment==

Expertiza setup is done in VCL which is reserved for 30 days with Ubuntu 14.04 base. Started expertiza server publicly and link to access the server is:
http://152.7.99.101:3000

==Future work==

In future, we will try to implement the edit questionnaire part using alternative approach. We will try to implement testing using rspec framework and improve the UI design of the pages.

==References==

* https://www.youtube.com/channel/UCdKXzox7hrWjfOMML6FzTWg
* https://github.com/expertiza/expertiza
* http://wiki.expertiza.ncsu.edu/index.php/Expertiza_documentation
* http://guides.rubyonrails.org/working_with_javascript_in_rails.html
* http://wiki.expertiza.ncsu.edu/index.php/Development:Setup:Linux:Debian

File:Add ta role.png

2017-04-01T04:30:45Z

Dguttik: uploaded a new version of "File:Add ta role.png"

CSC/ECE 517 Spring 2017/Use Ajax to add Participants,TA and Edit Questionnaire

2017-04-01T04:25:29Z

Dguttik: /* Automated Testing */

==Introduction==

<nowiki> Expertiza is an opensource software developed to assist people in education institutions to perform peer reviews and group projects. It is exceptionally helpful to the students and instructors. The software is designed in MVC (Model-View-Controller) architecture using ruby on rails.
</nowiki>

==Problem Statement==
Expertiza provides many categories to manage for an instructor. Few of these categories are assignments, courses and questionnaires. Currently, to add/remove/update records, the entire page is submitted to save the record and the entire page is re-loaded back again to reflect the changes on the page. The task is to improve this functionality such that some of the records, specifically adding participants to courses or assignments, adding/removing teaching assistants to/from courses and adding questions to questionnaires, can be saved remotely and the page updated without submitting and reloading the entire page.
Additionally, on assign reviewers page for an assignment, there is no way to see the current status of reviews and there is no way for an instructor to unsubmit a submitted review. So, another task is to add this functionality such that review status is seen for each review and to unsubmit a submitted review without reloading the page.

==Proposed Solution==
This project proposes use of AJAX for the required pages to avoid page reloading at the time of adding and saving records. This solution will make sure that adding or saving of record is done remotely and the page is updated without reloading. It can be achieved by calling corresponding controller method, adding/saving the record remotely and rendering it back to JavaScript pages in the view instead of redirecting it to the same page. JavaScript pages in the view will update the page without reloading it, for example by appending the newly added record to the list of records. Thus, records are saved remotely and page refresh is avoided.
For the review status part, responses to the corresponding reviews on the page can be checked in the Response table and the review status shown as the status of the latest response. Unsubmitting a review can be done using AJAX without reloading the page.

==Tasks==
* Add Participant in the assignments section using AJAX
* Add/Remove TA in the courses section using AJAX
* Edit Questionnaire by using AJAX for adding questions in the Questionnaire section
* Show Review Status on assign reviewers page and allow to un-submit a review using AJAX

==Implementation==

===Adding participant===
'''Earlier scenario:''' When an instructor goes to "Manage Assignments -> Add Participants" page, he/she can add/remove new Participant to the assignment. The add page also displays list of participants above the form for new participant. Every time a new Participant is added, the page reloads to reflect the changes and render the updated list of participants, even in case of non-existing userid.

'''Updates/Changes:'''
This page has been updated such that an instructor can add a new Participant using [https://en.wikipedia.org/wiki/Ajax_(programming) AJAX]. After adding AJAX changes, the list gets updated without reloading the entire page. The changes made are below.

* Updated the ''shared_scripts/_user_list.html.erb'' file in views so that the Participants are listed by rendering another partial ''_participant.html.erb'' in participants controller. This change is to make it feasible to add AJAX to just append to the list without any extra formatting.
[[File:User_list.PNG]]

* Created a new file ''participants/add.js.erb'' for adding AJAX to render newly added participant in case of successful addition and display error in case of any error.
[[File:Javascript changes.PNG]]

* Updated the ''shared_scripts/_add_individual.html.erb'' form such that request should be through AJAX by setting remote flag to true.
[[File:Add_individual.PNG]]

* Updated the participants controller ''participant_controller.rb'' in controllers to render JavaScript when add method is invoked by the form submit action instead of redirect to list page.
[[File:Controller_changes.PNG]]

===Adding/Removing TA===
'''Earlier scenario:''' When an instructor goes to "Manage Courses -> Add TA" page, he/she can add/remove new TA to the course. Every time a new TA is added or removed, the page reloads to reflect the changes, even if the userid used does not exist.

'''Updates/Changes:''' This page has been updated such that an instructor can add a new TA or remove a new TA using AJAX. With these updates, the changes are reflected on the page without reloading the page, thus saving time.
* Updated the ''course/view_teaching_assistants.html.erb'' file in views so that the TAs are listed by rendering another partial ''_ta.html.erb''. This is done so that when a new TA has been added, AJAX call can be used to render the format required for the new TA in the list append to the already existing list without reloading the page.
[[File:View_teaching_assistants_html_erb.png]]

* Created a new file ''course/_ta.html.erb'' in views which is a partial as described above and contains the code to list the TAs. The link_to "Delete" line in this file is updated to use :remote=>:true, so that AJAX call can be made to remove the TA remotely without reloading the page.
<pre>
<%= link_to "Delete", { :action => 'remove_ta', :controller =>'course', :id => ta.id, :course_id => ta.course_id }, method: :post, :remote => true, :class => 'remove_ta' %>
</pre>
[[File:Ta.png]]

* Updated the ''course/_add_individual.html.erb'' file in views to perform the form_tag action to Add a TA remotely using :remote=>:true. In the below code, ''form_action'' and ''remote'' are local variables passed to this partial from ''course/view_teaching_assistants.html.erb'' with the values "add_ta" and "true" respectively
[[File:Add_individual_html_erb.png]]

* Updated the ''course_controller.rb" file and replaced the redirect option in ''add_ta'' and ''remove_ta'' to render ''add_ta.js.erb'' and ''remove_ta.js.erb''. Also changed ''flash[:error]'' to ''flash.now[:error]'' so that the flash message is displayed now instead of after page reload.
[[File:Course_controller_rb1.png]]

* Added a new file ''course/add.js.erb'' and ''course/remove_ta.js.erb'' to views. The ''add_ta.js.erb'' file renders the newly added TA and appends it to the list of TAs. It also shows flash error message if the userid used to add TA does not exist. Similarly, ''remote_ta.js.erb'' file removes the deleted TA from the list.
[[File:add_remove_js_erb.png]]

===Edit Questionnaire===

'''Current scenario :''' page consists of different subsections for creating questionnaire,adding questions to the questionnaire and saving the questionnaire i.e.
*_questionnaire.html.erb

Adding questions feature is performed in the following method of ''questionnaires_controller.rb'' class

def add_new_questions
questionnaire_id = params[:id] unless params[:id].nil?
num_of_existed_questions = Questionnaire.find(questionnaire_id).questions.size
((num_of_existed_questions + 1)..(num_of_existed_questions + params[:question][:total_num].to_i)).each do |i|
question = Object.const_get(params[:question][:type]).create(txt: '', questionnaire_id: questionnaire_id, seq: i, type: params[:question][:type], break_before: true)
if question.is_a? ScoredQuestion
question.weight = 1
question.max_label = 'Strongly agree'
question.min_label = 'Strongly disagree'
end
question.size = '50, 3' if question.is_a? Criterion
question.alternatives = '0|1|2|3|4|5' if question.is_a? Dropdown
question.size = '60, 5' if question.is_a? TextArea
question.size = '30' if question.is_a? TextField
begin
question.save
rescue
flash[:error] = $ERROR_INFO
end
end
redirect_to edit_questionnaire_path(questionnaire_id.to_sym)
end

This method invokes ''question.create'' method in ''questions_cotroller.rb'' and saves the created question to the database. Then it redirects to the ''edit.html.erb'' page which causes page refresh while adding questions.

'''Solution:''' This problem was tried to solve using AJAX by changing or adding the following classes and pages
* _question.html.erb (added) - displays added question

<td align="center"><a rel="nofollow" data-method="delete" href="/questions/' <%= @question.id%> '">Remove</a></td>'
<td><input size="6" value="' <%= @question.seq%> '" name="question[' question.id %>'][seq]" id="question_' +<%=@question.id %> '_seq" type="text"></td>
<td><textarea cols="50" rows="1" name="question[' <%= @question.id%> '][txt]" id="question_' <%= @question.id%> '_txt" placeholder="Edit question content here">' <%= @question.txt%> '</textarea></td>
<td><input size="10" disabled="disabled" value="' <%= @question.type%> '" name="question[' <%= @question.id%>'][type]" id="question_' <%= @question.id%> '_type" type="text"></td>
<td></td>

* add_new_questions.js.erb (added) - appends the html content with added question in ''_question.html.erb'' to questions_table in ''_questionnaire.html.erb''

$("#questions_table").append("<%= j render :partial => 'question',
:locals => {question: @question, :id => @question.id, :controller => 'questions'} %>");

* edit.html.erb (modified : code removed) - following code is removed as it internally calls respective question header models and appends html string to questions_table internally.

<% for @question in @questionnaire.questions do%>
<%-# The following line call certain method of the object, which returns html string-%>
<%= @question.edit %>
<% end %>

@question.edit invokes ''QuestionHeader.rb'' model which adds html content
def edit(_count)
html = '<tr>'
html += '<td align="center"><a rel="nofollow" data-method="delete" href="/questions/' + self.id.to_s + '">Remove</a></td>'
html += '<td><input size="6" value="' + self.seq.to_s + '" name="question[' + self.id.to_s + '][seq]" id="question_' + self.id.to_s + '_seq" type="text"></td>'
html += '<td><textarea cols="50" rows="1" name="question[' + self.id.to_s + '][txt]" id="question_' + self.id.to_s + '_txt" placeholder="Edit question content here">' + self.txt + '</textarea></td>'
html += '<td><input size="10" disabled="disabled" value="' + self.type + '" name="question[' + self.id.to_s + '][type]" id="question_' + self.id.to_s + '_type" type="text">''</td>'
html += '<td></td>'
html += '</tr>'
html.html_safe
end

* questionnaires_controller.rb (modified) - add_new_questions method is modified by replacing redire rendering ''add_new_questions.js.erb'' file

render :action=> 'add_new_questions.js.erb', :layout=>false, :question=> question
#redirect_to edit_questionnaire_path(questionnaire_id.to_sym)

'''Issue :''' But this solution is not working as AJAX can be applied to the browser side processing if the controller method is redirecting to the same page, which is not in this case as page gets redirected from question.html.erb to edit.html.erb. Another problem faced is the creation of questions which is called through ''_questionnaire.html.erb'' but not through ''_question.html.erb'' which makes it difficult to pass correct questionnaire id to the AJAX call.

'''Alternative Approach to Edit Questionnaire:''' Another approach to solve this issue is to create a seperate java-script function which handles the entire process of adding,saving,deleting questions and appending them. Call this function from ''_questionnaire.html.erb'' instead of invoking add_new_questions method. Questions can be saved and retrived from data using JavaScript Rest API calls. But, this approach not only needs to restructure entire questionnaire structure and many components in the Expertiza project but also violates the MVC design of the project.

===Un-submit reviews===
'''Earlier scenario:''' When an instructor/TA goes to "Manage Assignments -> Assign Reviewers" page, he/she can see a list of all the topics, the contributors and the reviewers for each topic. This page did not show the status of each review which can be in Assigned state or Saved state or Submitted state. Also, there was no way for the instructor/TA to un-submit an already submitted review.

'''New Additions:'''
* Updated the ''review_mappings/_list_review_mappings.html.erb'' file in views to display the status of each review by the reviewer. For each review_mapping, the code checks if there is a response in ''Response'' table with the same ''map_id'' used in the review_mappings on this page.
** If there is no such response, it means that the reviewer has not saved/submitted the review and it is currently in Assigned State. So, "Response Status: Saved" is shown for that review.
** If there is a response, the last (latest) response is checked as per requirement and the ''is_submitted'' attribute of this response is checked in the ''Response'' table.
*** If the attribute is false, the review has been saved but not submitted. So, "Response Status: Saved" is shown for that review.
*** If the attribute is true, the review has been submitted. So, "Response Status: Submitted" is shown for that review. Next to this, a link is created to un-submit the review. Clicking on this link changes the ''is_submitted'' attribute to false and updates the Response Status to Saved on the page by using AJAX call, without reloading the page
[[File:List_review_mappings_html_erb.png]]
* Added a new method "unsubmit_review" to the ''review_mapping_controller.rb'' file. In this, we first find the latest response and then update the ''is_submitted'' attribute to false. The flash message is created based on whether the response was updated correctly. After this, ''unsubmit_review.js.rb'' file is rendered which updates the response status for the corresponding review on the page to Saved, without reloading the page
[[File:Review_mapping_controller_rb.png]]
* Added a new file ''review_mappings/unsubmit_review.js.erb'' to views. This file just changes the response status for the corresponding review displayed on the page to Saved from Submit after the review has been un-submitted and also prints the corresponding success or error flash message.
[[File:Unsubmit_review_js_erb.png]]
* Added a new line to ''routes.rb'' page for unsubmit_review action
[[File:Routes_rb.png]]

==Test Plan==

===Log in details===

'''Username:''' instructor6
'''password:''' password

Some valid user id's are student5000, student5001, student5002 etc. These can be used while adding new Participant or TA as described below.

===Automated Testing===
* Created a helper module ''wait_for_ajax.rb'' with methods to wait for ajax requests to finish
* Updated the test "check to see if participants can be added" in ''assignment_creation_spec.rb'' to wait for AJAX calls to finish after adding a participant by using the helper module created
* Added a new test named "can unsubmit a review" in ''review_mapping_spec.rb''
** In this test, a new reviewer is added to review mapping, a new review is created and submitted, and then checked if unsubmit functionality is working correctly
* Added a new file ''course_creation_spec.rb'' to test adding and remove TA's
Initially the test was failing as test.db does not contain role for Teaching Assistant. So, added that role to test database.[[File:Add_ta_role.png]]
Created test cases for adding/removing TA after visiting course page.
[[File:Add_ta.png]]

===UI Testing===

'''Steps to test adding participant: '''

* Login as instructor
* Go to Manage -> Assignments.
* Switch to Assignments tab incase you are on some other tab
* For any assignment, click on the 'Add Participant' icon to go on add new participant page
* Enter userid of the participant and click on Add to add the participant

'' Expected Output: '' When add button is clicked with valid userid, new participant should be added to the list without the page getting reloaded. In case of an attempt to add invalid user, the error should be displayed on top without page getting reloaded.

''' Steps to test adding/removing TA:'''

* Login as instructor
* Go to Manage -> Courses.
* Switch to Courses tab incase you are on some other tab
* For any course, click on the 'Add TA' icon to go on add new TA page
* Enter userid of the TA and click on Add to add the TA
* Click on 'remove_ta' link for any TA in the list to remove the TA

'' Expected Output: '' When add button is clicked with valid userid, new TA should be added to the list without the page getting reloaded. In case of an attempt to add invalid user, the error should be displayed on top without page getting reloaded. When remove_ta link is clicked for any TA in the list, that corresponding TA should be removed from the list without the page getting reloaded.
Note: A duplicate TA is currently allowed. This was a part of original (earlier) functionality, and as this project involved changes to use AJAX and not changes to the actual functionality, this original functionality is not changed

''' Steps to test adding question in questionnaire:'''

* Login as instructor
* Go to Manage -> Questionnaires. Create a new Review Questionnaire by clicking on the ‘New public item’ button for ‘Review’.
* Name the Questionnaire and click on create button
* Click on Edit for newly created questionnaire. You will now be navigated to page where you can add new questions to the questionnaire.
* Click on add button in "Questions" section.

''Expected output:'' When add button is clicked, question should be created and the questionnaire page should not get reloaded

''' Steps to test un-submit reviews'''

* Login as instructor
* Go to Manage -> Assignments.
* Switch to Assignments tab incase you are on some other tab
* For any assignment, click on the 'Assign reviewers' icon to go to the review mappings page
** Note: Some assignments might not have reviewers. So, try this for assignments with many reviewers
* For any review with Review Status = Submitted, click on 'unsubmit' button

''Expected output:'' For every review, the review status should be seen as either Assigned or Saved or Submitted. For submitted reviews, when unsubmit button is clicked, that review should be unsubmitted and status should change to Saved without page getting reloaded.

==Project Deployment==

Expertiza setup is done in VCL which is reserved for 30 days with Ubuntu 14.04 base. Started expertiza server publicly and link to access the server is:
http://152.7.99.101:3000

==Future work==

In future, we will try to implement the edit questionnaire part using alternative approach. We will try to implement testing using rspec framework and improve the UI design of the pages.

==References==

* https://www.youtube.com/channel/UCdKXzox7hrWjfOMML6FzTWg
* https://github.com/expertiza/expertiza
* http://wiki.expertiza.ncsu.edu/index.php/Expertiza_documentation
* http://guides.rubyonrails.org/working_with_javascript_in_rails.html
* http://wiki.expertiza.ncsu.edu/index.php/Development:Setup:Linux:Debian

File:Add ta role.png

2017-04-01T04:21:02Z

Dguttik:

File:Add ta.png

2017-04-01T04:15:21Z

Dguttik: uploaded a new version of "File:Add ta.png"

CSC/ECE 517 Spring 2017/Use Ajax to add Participants,TA and Edit Questionnaire

2017-04-01T04:12:58Z

Dguttik: test code

==Introduction==

<nowiki> Expertiza is an opensource software developed to assist people in education institutions to perform peer reviews and group projects. It is exceptionally helpful to the students and instructors. The software is designed in MVC (Model-View-Controller) architecture using ruby on rails.
</nowiki>

==Problem Statement==
Expertiza provides many categories to manage for an instructor. Few of these categories are assignments, courses and questionnaires. Currently, to add/remove/update records, the entire page is submitted to save the record and the entire page is re-loaded back again to reflect the changes on the page. The task is to improve this functionality such that some of the records, specifically adding participants to courses or assignments, adding/removing teaching assistants to/from courses and adding questions to questionnaires, can be saved remotely and the page updated without submitting and reloading the entire page.
Additionally, on assign reviewers page for an assignment, there is no way to see the current status of reviews and there is no way for an instructor to unsubmit a submitted review. So, another task is to add this functionality such that review status is seen for each review and to unsubmit a submitted review without reloading the page.

==Proposed Solution==
This project proposes use of AJAX for the required pages to avoid page reloading at the time of adding and saving records. This solution will make sure that adding or saving of record is done remotely and the page is updated without reloading. It can be achieved by calling corresponding controller method, adding/saving the record remotely and rendering it back to JavaScript pages in the view instead of redirecting it to the same page. JavaScript pages in the view will update the page without reloading it, for example by appending the newly added record to the list of records. Thus, records are saved remotely and page refresh is avoided.
For the review status part, responses to the corresponding reviews on the page can be checked in the Response table and the review status shown as the status of the latest response. Unsubmitting a review can be done using AJAX without reloading the page.

==Tasks==
* Add Participant in the assignments section using AJAX
* Add/Remove TA in the courses section using AJAX
* Edit Questionnaire by using AJAX for adding questions in the Questionnaire section
* Show Review Status on assign reviewers page and allow to un-submit a review using AJAX

==Implementation==

===Adding participant===
'''Earlier scenario:''' When an instructor goes to "Manage Assignments -> Add Participants" page, he/she can add/remove new Participant to the assignment. The add page also displays list of participants above the form for new participant. Every time a new Participant is added, the page reloads to reflect the changes and render the updated list of participants, even in case of non-existing userid.

'''Updates/Changes:'''
This page has been updated such that an instructor can add a new Participant using [https://en.wikipedia.org/wiki/Ajax_(programming) AJAX]. After adding AJAX changes, the list gets updated without reloading the entire page. The changes made are below.

* Updated the ''shared_scripts/_user_list.html.erb'' file in views so that the Participants are listed by rendering another partial ''_participant.html.erb'' in participants controller. This change is to make it feasible to add AJAX to just append to the list without any extra formatting.
[[File:User_list.PNG]]

* Created a new file ''participants/add.js.erb'' for adding AJAX to render newly added participant in case of successful addition and display error in case of any error.
[[File:Javascript changes.PNG]]

* Updated the ''shared_scripts/_add_individual.html.erb'' form such that request should be through AJAX by setting remote flag to true.
[[File:Add_individual.PNG]]

* Updated the participants controller ''participant_controller.rb'' in controllers to render JavaScript when add method is invoked by the form submit action instead of redirect to list page.
[[File:Controller_changes.PNG]]

===Adding/Removing TA===
'''Earlier scenario:''' When an instructor goes to "Manage Courses -> Add TA" page, he/she can add/remove new TA to the course. Every time a new TA is added or removed, the page reloads to reflect the changes, even if the userid used does not exist.

'''Updates/Changes:''' This page has been updated such that an instructor can add a new TA or remove a new TA using AJAX. With these updates, the changes are reflected on the page without reloading the page, thus saving time.
* Updated the ''course/view_teaching_assistants.html.erb'' file in views so that the TAs are listed by rendering another partial ''_ta.html.erb''. This is done so that when a new TA has been added, AJAX call can be used to render the format required for the new TA in the list append to the already existing list without reloading the page.
[[File:View_teaching_assistants_html_erb.png]]

* Created a new file ''course/_ta.html.erb'' in views which is a partial as described above and contains the code to list the TAs. The link_to "Delete" line in this file is updated to use :remote=>:true, so that AJAX call can be made to remove the TA remotely without reloading the page.
<pre>
<%= link_to "Delete", { :action => 'remove_ta', :controller =>'course', :id => ta.id, :course_id => ta.course_id }, method: :post, :remote => true, :class => 'remove_ta' %>
</pre>
[[File:Ta.png]]

* Updated the ''course/_add_individual.html.erb'' file in views to perform the form_tag action to Add a TA remotely using :remote=>:true. In the below code, ''form_action'' and ''remote'' are local variables passed to this partial from ''course/view_teaching_assistants.html.erb'' with the values "add_ta" and "true" respectively
[[File:Add_individual_html_erb.png]]

* Updated the ''course_controller.rb" file and replaced the redirect option in ''add_ta'' and ''remove_ta'' to render ''add_ta.js.erb'' and ''remove_ta.js.erb''. Also changed ''flash[:error]'' to ''flash.now[:error]'' so that the flash message is displayed now instead of after page reload.
[[File:Course_controller_rb1.png]]

* Added a new file ''course/add.js.erb'' and ''course/remove_ta.js.erb'' to views. The ''add_ta.js.erb'' file renders the newly added TA and appends it to the list of TAs. It also shows flash error message if the userid used to add TA does not exist. Similarly, ''remote_ta.js.erb'' file removes the deleted TA from the list.
[[File:add_remove_js_erb.png]]

===Edit Questionnaire===

'''Current scenario :''' page consists of different subsections for creating questionnaire,adding questions to the questionnaire and saving the questionnaire i.e.
*_questionnaire.html.erb

Adding questions feature is performed in the following method of ''questionnaires_controller.rb'' class

def add_new_questions
questionnaire_id = params[:id] unless params[:id].nil?
num_of_existed_questions = Questionnaire.find(questionnaire_id).questions.size
((num_of_existed_questions + 1)..(num_of_existed_questions + params[:question][:total_num].to_i)).each do |i|
question = Object.const_get(params[:question][:type]).create(txt: '', questionnaire_id: questionnaire_id, seq: i, type: params[:question][:type], break_before: true)
if question.is_a? ScoredQuestion
question.weight = 1
question.max_label = 'Strongly agree'
question.min_label = 'Strongly disagree'
end
question.size = '50, 3' if question.is_a? Criterion
question.alternatives = '0|1|2|3|4|5' if question.is_a? Dropdown
question.size = '60, 5' if question.is_a? TextArea
question.size = '30' if question.is_a? TextField
begin
question.save
rescue
flash[:error] = $ERROR_INFO
end
end
redirect_to edit_questionnaire_path(questionnaire_id.to_sym)
end

This method invokes ''question.create'' method in ''questions_cotroller.rb'' and saves the created question to the database. Then it redirects to the ''edit.html.erb'' page which causes page refresh while adding questions.

'''Solution:''' This problem was tried to solve using AJAX by changing or adding the following classes and pages
* _question.html.erb (added) - displays added question

<td align="center"><a rel="nofollow" data-method="delete" href="/questions/' <%= @question.id%> '">Remove</a></td>'
<td><input size="6" value="' <%= @question.seq%> '" name="question[' question.id %>'][seq]" id="question_' +<%=@question.id %> '_seq" type="text"></td>
<td><textarea cols="50" rows="1" name="question[' <%= @question.id%> '][txt]" id="question_' <%= @question.id%> '_txt" placeholder="Edit question content here">' <%= @question.txt%> '</textarea></td>
<td><input size="10" disabled="disabled" value="' <%= @question.type%> '" name="question[' <%= @question.id%>'][type]" id="question_' <%= @question.id%> '_type" type="text"></td>
<td></td>

* add_new_questions.js.erb (added) - appends the html content with added question in ''_question.html.erb'' to questions_table in ''_questionnaire.html.erb''

$("#questions_table").append("<%= j render :partial => 'question',
:locals => {question: @question, :id => @question.id, :controller => 'questions'} %>");

* edit.html.erb (modified : code removed) - following code is removed as it internally calls respective question header models and appends html string to questions_table internally.

<% for @question in @questionnaire.questions do%>
<%-# The following line call certain method of the object, which returns html string-%>
<%= @question.edit %>
<% end %>

@question.edit invokes ''QuestionHeader.rb'' model which adds html content
def edit(_count)
html = '<tr>'
html += '<td align="center"><a rel="nofollow" data-method="delete" href="/questions/' + self.id.to_s + '">Remove</a></td>'
html += '<td><input size="6" value="' + self.seq.to_s + '" name="question[' + self.id.to_s + '][seq]" id="question_' + self.id.to_s + '_seq" type="text"></td>'
html += '<td><textarea cols="50" rows="1" name="question[' + self.id.to_s + '][txt]" id="question_' + self.id.to_s + '_txt" placeholder="Edit question content here">' + self.txt + '</textarea></td>'
html += '<td><input size="10" disabled="disabled" value="' + self.type + '" name="question[' + self.id.to_s + '][type]" id="question_' + self.id.to_s + '_type" type="text">''</td>'
html += '<td></td>'
html += '</tr>'
html.html_safe
end

* questionnaires_controller.rb (modified) - add_new_questions method is modified by replacing redire rendering ''add_new_questions.js.erb'' file

render :action=> 'add_new_questions.js.erb', :layout=>false, :question=> question
#redirect_to edit_questionnaire_path(questionnaire_id.to_sym)

'''Issue :''' But this solution is not working as AJAX can be applied to the browser side processing if the controller method is redirecting to the same page, which is not in this case as page gets redirected from question.html.erb to edit.html.erb. Another problem faced is the creation of questions which is called through ''_questionnaire.html.erb'' but not through ''_question.html.erb'' which makes it difficult to pass correct questionnaire id to the AJAX call.

'''Alternative Approach to Edit Questionnaire:''' Another approach to solve this issue is to create a seperate java-script function which handles the entire process of adding,saving,deleting questions and appending them. Call this function from ''_questionnaire.html.erb'' instead of invoking add_new_questions method. Questions can be saved and retrived from data using JavaScript Rest API calls. But, this approach not only needs to restructure entire questionnaire structure and many components in the Expertiza project but also violates the MVC design of the project.

===Un-submit reviews===
'''Earlier scenario:''' When an instructor/TA goes to "Manage Assignments -> Assign Reviewers" page, he/she can see a list of all the topics, the contributors and the reviewers for each topic. This page did not show the status of each review which can be in Assigned state or Saved state or Submitted state. Also, there was no way for the instructor/TA to un-submit an already submitted review.

'''New Additions:'''
* Updated the ''review_mappings/_list_review_mappings.html.erb'' file in views to display the status of each review by the reviewer. For each review_mapping, the code checks if there is a response in ''Response'' table with the same ''map_id'' used in the review_mappings on this page.
** If there is no such response, it means that the reviewer has not saved/submitted the review and it is currently in Assigned State. So, "Response Status: Saved" is shown for that review.
** If there is a response, the last (latest) response is checked as per requirement and the ''is_submitted'' attribute of this response is checked in the ''Response'' table.
*** If the attribute is false, the review has been saved but not submitted. So, "Response Status: Saved" is shown for that review.
*** If the attribute is true, the review has been submitted. So, "Response Status: Submitted" is shown for that review. Next to this, a link is created to un-submit the review. Clicking on this link changes the ''is_submitted'' attribute to false and updates the Response Status to Saved on the page by using AJAX call, without reloading the page
[[File:List_review_mappings_html_erb.png]]
* Added a new method "unsubmit_review" to the ''review_mapping_controller.rb'' file. In this, we first find the latest response and then update the ''is_submitted'' attribute to false. The flash message is created based on whether the response was updated correctly. After this, ''unsubmit_review.js.rb'' file is rendered which updates the response status for the corresponding review on the page to Saved, without reloading the page
[[File:Review_mapping_controller_rb.png]]
* Added a new file ''review_mappings/unsubmit_review.js.erb'' to views. This file just changes the response status for the corresponding review displayed on the page to Saved from Submit after the review has been un-submitted and also prints the corresponding success or error flash message.
[[File:Unsubmit_review_js_erb.png]]
* Added a new line to ''routes.rb'' page for unsubmit_review action
[[File:Routes_rb.png]]

==Test Plan==

===Log in details===

'''Username:''' instructor6
'''password:''' password

Some valid user id's are student5000, student5001, student5002 etc. These can be used while adding new Participant or TA as described below.

===Automated Testing===
* Created a helper module ''wait_for_ajax.rb'' with methods to wait for ajax requests to finish
* Updated the test "check to see if participants can be added" in ''assignment_creation_spec.rb'' to wait for AJAX calls to finish after adding a participant by using the helper module created
* Added a new test named "can unsubmit a review" in ''review_mapping_spec.rb''
** In this test, a new reviewer is added to review mapping, a new review is created and submitted, and then checked if unsubmit functionality is working correctly
* Added a new file ''course_creation_spec.rb'' to test adding and remove TA's
[[File:Add_ta.png]]
===UI Testing===

'''Steps to test adding participant: '''

* Login as instructor
* Go to Manage -> Assignments.
* Switch to Assignments tab incase you are on some other tab
* For any assignment, click on the 'Add Participant' icon to go on add new participant page
* Enter userid of the participant and click on Add to add the participant

'' Expected Output: '' When add button is clicked with valid userid, new participant should be added to the list without the page getting reloaded. In case of an attempt to add invalid user, the error should be displayed on top without page getting reloaded.

''' Steps to test adding/removing TA:'''

* Login as instructor
* Go to Manage -> Courses.
* Switch to Courses tab incase you are on some other tab
* For any course, click on the 'Add TA' icon to go on add new TA page
* Enter userid of the TA and click on Add to add the TA
* Click on 'remove_ta' link for any TA in the list to remove the TA

'' Expected Output: '' When add button is clicked with valid userid, new TA should be added to the list without the page getting reloaded. In case of an attempt to add invalid user, the error should be displayed on top without page getting reloaded. When remove_ta link is clicked for any TA in the list, that corresponding TA should be removed from the list without the page getting reloaded.
Note: A duplicate TA is currently allowed. This was a part of original (earlier) functionality, and as this project involved changes to use AJAX and not changes to the actual functionality, this original functionality is not changed

''' Steps to test adding question in questionnaire:'''

* Login as instructor
* Go to Manage -> Questionnaires. Create a new Review Questionnaire by clicking on the ‘New public item’ button for ‘Review’.
* Name the Questionnaire and click on create button
* Click on Edit for newly created questionnaire. You will now be navigated to page where you can add new questions to the questionnaire.
* Click on add button in "Questions" section.

''Expected output:'' When add button is clicked, question should be created and the questionnaire page should not get reloaded

''' Steps to test un-submit reviews'''

* Login as instructor
* Go to Manage -> Assignments.
* Switch to Assignments tab incase you are on some other tab
* For any assignment, click on the 'Assign reviewers' icon to go to the review mappings page
** Note: Some assignments might not have reviewers. So, try this for assignments with many reviewers
* For any review with Review Status = Submitted, click on 'unsubmit' button

''Expected output:'' For every review, the review status should be seen as either Assigned or Saved or Submitted. For submitted reviews, when unsubmit button is clicked, that review should be unsubmitted and status should change to Saved without page getting reloaded.

==Project Deployment==

Expertiza setup is done in VCL which is reserved for 30 days with Ubuntu 14.04 base. Started expertiza server publicly and link to access the server is:
http://152.7.99.101:3000

==Future work==

In future, we will try to implement the edit questionnaire part using alternative approach. We will try to implement testing using rspec framework and improve the UI design of the pages.

==References==

* https://www.youtube.com/channel/UCdKXzox7hrWjfOMML6FzTWg
* https://github.com/expertiza/expertiza
* http://wiki.expertiza.ncsu.edu/index.php/Expertiza_documentation
* http://guides.rubyonrails.org/working_with_javascript_in_rails.html
* http://wiki.expertiza.ncsu.edu/index.php/Development:Setup:Linux:Debian

File:Add ta.png

2017-04-01T04:10:36Z

Dguttik:

CSC/ECE 517 Spring 2017/Use Ajax to add Participants,TA and Edit Questionnaire

2017-04-01T04:01:00Z

Dguttik: test plan

==Introduction==

<nowiki> Expertiza is an opensource software developed to assist people in education institutions to perform peer reviews and group projects. It is exceptionally helpful to the students and instructors. The software is designed in MVC (Model-View-Controller) architecture using ruby on rails.
</nowiki>

==Problem Statement==
Expertiza provides many categories to manage for an instructor. Few of these categories are assignments, courses and questionnaires. Currently, to add/remove/update records, the entire page is submitted to save the record and the entire page is re-loaded back again to reflect the changes on the page. The task is to improve this functionality such that some of the records, specifically adding participants to courses or assignments, adding/removing teaching assistants to/from courses and adding questions to questionnaires, can be saved remotely and the page updated without submitting and reloading the entire page.
Additionally, on assign reviewers page for an assignment, there is no way to see the current status of reviews and there is no way for an instructor to unsubmit a submitted review. So, another task is to add this functionality such that review status is seen for each review and to unsubmit a submitted review without reloading the page.

==Proposed Solution==
This project proposes use of AJAX for the required pages to avoid page reloading at the time of adding and saving records. This solution will make sure that adding or saving of record is done remotely and the page is updated without reloading. It can be achieved by calling corresponding controller method, adding/saving the record remotely and rendering it back to JavaScript pages in the view instead of redirecting it to the same page. JavaScript pages in the view will update the page without reloading it, for example by appending the newly added record to the list of records. Thus, records are saved remotely and page refresh is avoided.
For the review status part, responses to the corresponding reviews on the page can be checked in the Response table and the review status shown as the status of the latest response. Unsubmitting a review can be done using AJAX without reloading the page.

==Tasks==
* Add Participant in the assignments section using AJAX
* Add/Remove TA in the courses section using AJAX
* Edit Questionnaire by using AJAX for adding questions in the Questionnaire section
* Show Review Status on assign reviewers page and allow to un-submit a review using AJAX

==Implementation==

===Adding participant===
'''Earlier scenario:''' When an instructor goes to "Manage Assignments -> Add Participants" page, he/she can add/remove new Participant to the assignment. The add page also displays list of participants above the form for new participant. Every time a new Participant is added, the page reloads to reflect the changes and render the updated list of participants, even in case of non-existing userid.

'''Updates/Changes:'''
This page has been updated such that an instructor can add a new Participant using [https://en.wikipedia.org/wiki/Ajax_(programming) AJAX]. After adding AJAX changes, the list gets updated without reloading the entire page. The changes made are below.

* Updated the ''shared_scripts/_user_list.html.erb'' file in views so that the Participants are listed by rendering another partial ''_participant.html.erb'' in participants controller. This change is to make it feasible to add AJAX to just append to the list without any extra formatting.
[[File:User_list.PNG]]

* Created a new file ''participants/add.js.erb'' for adding AJAX to render newly added participant in case of successful addition and display error in case of any error.
[[File:Javascript changes.PNG]]

* Updated the ''shared_scripts/_add_individual.html.erb'' form such that request should be through AJAX by setting remote flag to true.
[[File:Add_individual.PNG]]

* Updated the participants controller ''participant_controller.rb'' in controllers to render JavaScript when add method is invoked by the form submit action instead of redirect to list page.
[[File:Controller_changes.PNG]]

===Adding/Removing TA===
'''Earlier scenario:''' When an instructor goes to "Manage Courses -> Add TA" page, he/she can add/remove new TA to the course. Every time a new TA is added or removed, the page reloads to reflect the changes, even if the userid used does not exist.

'''Updates/Changes:''' This page has been updated such that an instructor can add a new TA or remove a new TA using AJAX. With these updates, the changes are reflected on the page without reloading the page, thus saving time.
* Updated the ''course/view_teaching_assistants.html.erb'' file in views so that the TAs are listed by rendering another partial ''_ta.html.erb''. This is done so that when a new TA has been added, AJAX call can be used to render the format required for the new TA in the list append to the already existing list without reloading the page.
[[File:View_teaching_assistants_html_erb.png]]

* Created a new file ''course/_ta.html.erb'' in views which is a partial as described above and contains the code to list the TAs. The link_to "Delete" line in this file is updated to use :remote=>:true, so that AJAX call can be made to remove the TA remotely without reloading the page.
<pre>
<%= link_to "Delete", { :action => 'remove_ta', :controller =>'course', :id => ta.id, :course_id => ta.course_id }, method: :post, :remote => true, :class => 'remove_ta' %>
</pre>
[[File:Ta.png]]

* Updated the ''course/_add_individual.html.erb'' file in views to perform the form_tag action to Add a TA remotely using :remote=>:true. In the below code, ''form_action'' and ''remote'' are local variables passed to this partial from ''course/view_teaching_assistants.html.erb'' with the values "add_ta" and "true" respectively
[[File:Add_individual_html_erb.png]]

* Updated the ''course_controller.rb" file and replaced the redirect option in ''add_ta'' and ''remove_ta'' to render ''add_ta.js.erb'' and ''remove_ta.js.erb''. Also changed ''flash[:error]'' to ''flash.now[:error]'' so that the flash message is displayed now instead of after page reload.
[[File:Course_controller_rb1.png]]

* Added a new file ''course/add.js.erb'' and ''course/remove_ta.js.erb'' to views. The ''add_ta.js.erb'' file renders the newly added TA and appends it to the list of TAs. It also shows flash error message if the userid used to add TA does not exist. Similarly, ''remote_ta.js.erb'' file removes the deleted TA from the list.
[[File:add_remove_js_erb.png]]

===Edit Questionnaire===

'''Current scenario :''' page consists of different subsections for creating questionnaire,adding questions to the questionnaire and saving the questionnaire i.e.
*_questionnaire.html.erb

Adding questions feature is performed in the following method of ''questionnaires_controller.rb'' class

def add_new_questions
questionnaire_id = params[:id] unless params[:id].nil?
num_of_existed_questions = Questionnaire.find(questionnaire_id).questions.size
((num_of_existed_questions + 1)..(num_of_existed_questions + params[:question][:total_num].to_i)).each do |i|
question = Object.const_get(params[:question][:type]).create(txt: '', questionnaire_id: questionnaire_id, seq: i, type: params[:question][:type], break_before: true)
if question.is_a? ScoredQuestion
question.weight = 1
question.max_label = 'Strongly agree'
question.min_label = 'Strongly disagree'
end
question.size = '50, 3' if question.is_a? Criterion
question.alternatives = '0|1|2|3|4|5' if question.is_a? Dropdown
question.size = '60, 5' if question.is_a? TextArea
question.size = '30' if question.is_a? TextField
begin
question.save
rescue
flash[:error] = $ERROR_INFO
end
end
redirect_to edit_questionnaire_path(questionnaire_id.to_sym)
end

This method invokes ''question.create'' method in ''questions_cotroller.rb'' and saves the created question to the database. Then it redirects to the ''edit.html.erb'' page which causes page refresh while adding questions.

'''Solution:''' This problem was tried to solve using AJAX by changing or adding the following classes and pages
* _question.html.erb (added) - displays added question

<td align="center"><a rel="nofollow" data-method="delete" href="/questions/' <%= @question.id%> '">Remove</a></td>'
<td><input size="6" value="' <%= @question.seq%> '" name="question[' question.id %>'][seq]" id="question_' +<%=@question.id %> '_seq" type="text"></td>
<td><textarea cols="50" rows="1" name="question[' <%= @question.id%> '][txt]" id="question_' <%= @question.id%> '_txt" placeholder="Edit question content here">' <%= @question.txt%> '</textarea></td>
<td><input size="10" disabled="disabled" value="' <%= @question.type%> '" name="question[' <%= @question.id%>'][type]" id="question_' <%= @question.id%> '_type" type="text"></td>
<td></td>

* add_new_questions.js.erb (added) - appends the html content with added question in ''_question.html.erb'' to questions_table in ''_questionnaire.html.erb''

$("#questions_table").append("<%= j render :partial => 'question',
:locals => {question: @question, :id => @question.id, :controller => 'questions'} %>");

* edit.html.erb (modified : code removed) - following code is removed as it internally calls respective question header models and appends html string to questions_table internally.

<% for @question in @questionnaire.questions do%>
<%-# The following line call certain method of the object, which returns html string-%>
<%= @question.edit %>
<% end %>

@question.edit invokes ''QuestionHeader.rb'' model which adds html content
def edit(_count)
html = '<tr>'
html += '<td align="center"><a rel="nofollow" data-method="delete" href="/questions/' + self.id.to_s + '">Remove</a></td>'
html += '<td><input size="6" value="' + self.seq.to_s + '" name="question[' + self.id.to_s + '][seq]" id="question_' + self.id.to_s + '_seq" type="text"></td>'
html += '<td><textarea cols="50" rows="1" name="question[' + self.id.to_s + '][txt]" id="question_' + self.id.to_s + '_txt" placeholder="Edit question content here">' + self.txt + '</textarea></td>'
html += '<td><input size="10" disabled="disabled" value="' + self.type + '" name="question[' + self.id.to_s + '][type]" id="question_' + self.id.to_s + '_type" type="text">''</td>'
html += '<td></td>'
html += '</tr>'
html.html_safe
end

* questionnaires_controller.rb (modified) - add_new_questions method is modified by replacing redire rendering ''add_new_questions.js.erb'' file

render :action=> 'add_new_questions.js.erb', :layout=>false, :question=> question
#redirect_to edit_questionnaire_path(questionnaire_id.to_sym)

'''Issue :''' But this solution is not working as AJAX can be applied to the browser side processing if the controller method is redirecting to the same page, which is not in this case as page gets redirected from question.html.erb to edit.html.erb. Another problem faced is the creation of questions which is called through ''_questionnaire.html.erb'' but not through ''_question.html.erb'' which makes it difficult to pass correct questionnaire id to the AJAX call.

'''Alternative Approach to Edit Questionnaire:''' Another approach to solve this issue is to create a seperate java-script function which handles the entire process of adding,saving,deleting questions and appending them. Call this function from ''_questionnaire.html.erb'' instead of invoking add_new_questions method. Questions can be saved and retrived from data using JavaScript Rest API calls. But, this approach not only needs to restructure entire questionnaire structure and many components in the Expertiza project but also violates the MVC design of the project.

===Un-submit reviews===
'''Earlier scenario:''' When an instructor/TA goes to "Manage Assignments -> Assign Reviewers" page, he/she can see a list of all the topics, the contributors and the reviewers for each topic. This page did not show the status of each review which can be in Assigned state or Saved state or Submitted state. Also, there was no way for the instructor/TA to un-submit an already submitted review.

'''New Additions:'''
* Updated the ''review_mappings/_list_review_mappings.html.erb'' file in views to display the status of each review by the reviewer. For each review_mapping, the code checks if there is a response in ''Response'' table with the same ''map_id'' used in the review_mappings on this page.
** If there is no such response, it means that the reviewer has not saved/submitted the review and it is currently in Assigned State. So, "Response Status: Saved" is shown for that review.
** If there is a response, the last (latest) response is checked as per requirement and the ''is_submitted'' attribute of this response is checked in the ''Response'' table.
*** If the attribute is false, the review has been saved but not submitted. So, "Response Status: Saved" is shown for that review.
*** If the attribute is true, the review has been submitted. So, "Response Status: Submitted" is shown for that review. Next to this, a link is created to un-submit the review. Clicking on this link changes the ''is_submitted'' attribute to false and updates the Response Status to Saved on the page by using AJAX call, without reloading the page
[[File:List_review_mappings_html_erb.png]]
* Added a new method "unsubmit_review" to the ''review_mapping_controller.rb'' file. In this, we first find the latest response and then update the ''is_submitted'' attribute to false. The flash message is created based on whether the response was updated correctly. After this, ''unsubmit_review.js.rb'' file is rendered which updates the response status for the corresponding review on the page to Saved, without reloading the page
[[File:Review_mapping_controller_rb.png]]
* Added a new file ''review_mappings/unsubmit_review.js.erb'' to views. This file just changes the response status for the corresponding review displayed on the page to Saved from Submit after the review has been un-submitted and also prints the corresponding success or error flash message.
[[File:Unsubmit_review_js_erb.png]]
* Added a new line to ''routes.rb'' page for unsubmit_review action
[[File:Routes_rb.png]]

==Test Plan==

===Log in details===

'''Username:''' instructor6
'''password:''' password

Some valid user id's are student5000, student5001, student5002 etc. These can be used while adding new Participant or TA as described below.

===Automated Testing===
* Created a helper module ''wait_for_ajax.rb'' with methods to wait for ajax requests to finish
* Updated the test "check to see if participants can be added" in ''assignment_creation_spec.rb'' to wait for AJAX calls to finish after adding a participant by using the helper module created
* Added a new test named "can unsubmit a review" in ''review_mapping_spec.rb''
** In this test, a new reviewer is added to review mapping, a new review is created and submitted, and then checked if unsubmit functionality is working correctly
* Added a new file ''course_creation_spec.rb'' to test adding and remove TA's

===UI Testing===

'''Steps to test adding participant: '''

* Login as instructor
* Go to Manage -> Assignments.
* Switch to Assignments tab incase you are on some other tab
* For any assignment, click on the 'Add Participant' icon to go on add new participant page
* Enter userid of the participant and click on Add to add the participant

'' Expected Output: '' When add button is clicked with valid userid, new participant should be added to the list without the page getting reloaded. In case of an attempt to add invalid user, the error should be displayed on top without page getting reloaded.

''' Steps to test adding/removing TA:'''

* Login as instructor
* Go to Manage -> Courses.
* Switch to Courses tab incase you are on some other tab
* For any course, click on the 'Add TA' icon to go on add new TA page
* Enter userid of the TA and click on Add to add the TA
* Click on 'remove_ta' link for any TA in the list to remove the TA

'' Expected Output: '' When add button is clicked with valid userid, new TA should be added to the list without the page getting reloaded. In case of an attempt to add invalid user, the error should be displayed on top without page getting reloaded. When remove_ta link is clicked for any TA in the list, that corresponding TA should be removed from the list without the page getting reloaded.
Note: A duplicate TA is currently allowed. This was a part of original (earlier) functionality, and as this project involved changes to use AJAX and not changes to the actual functionality, this original functionality is not changed

''' Steps to test adding question in questionnaire:'''

* Login as instructor
* Go to Manage -> Questionnaires. Create a new Review Questionnaire by clicking on the ‘New public item’ button for ‘Review’.
* Name the Questionnaire and click on create button
* Click on Edit for newly created questionnaire. You will now be navigated to page where you can add new questions to the questionnaire.
* Click on add button in "Questions" section.

''Expected output:'' When add button is clicked, question should be created and the questionnaire page should not get reloaded

''' Steps to test un-submit reviews'''

* Login as instructor
* Go to Manage -> Assignments.
* Switch to Assignments tab incase you are on some other tab
* For any assignment, click on the 'Assign reviewers' icon to go to the review mappings page
** Note: Some assignments might not have reviewers. So, try this for assignments with many reviewers
* For any review with Review Status = Submitted, click on 'unsubmit' button

''Expected output:'' For every review, the review status should be seen as either Assigned or Saved or Submitted. For submitted reviews, when unsubmit button is clicked, that review should be unsubmitted and status should change to Saved without page getting reloaded.

==Project Deployment==

Expertiza setup is done in VCL which is reserved for 30 days with Ubuntu 14.04 base. Started expertiza server publicly and link to access the server is:
http://152.7.99.101:3000

==Future work==

In future, we will try to implement the edit questionnaire part using alternative approach. We will try to implement testing using rspec framework and improve the UI design of the pages.

==References==

* https://www.youtube.com/channel/UCdKXzox7hrWjfOMML6FzTWg
* https://github.com/expertiza/expertiza
* http://wiki.expertiza.ncsu.edu/index.php/Expertiza_documentation
* http://guides.rubyonrails.org/working_with_javascript_in_rails.html
* http://wiki.expertiza.ncsu.edu/index.php/Development:Setup:Linux:Debian

CSC/ECE 517 Spring 2017/Use Ajax to add Participants,TA and Edit Questionnaire

2017-03-24T03:29:25Z

Dguttik: /* Project Deployment */

==Introduction==

<nowiki> Expertiza is an opensource software developed to assist people in education institutions to perform peer reviews and group projects. It is exceptionally helpful to the students and instructors. The software is designed in MVC (Model-View-Controller) architecture using ruby on rails.
</nowiki>

==Problem Statement==
Expertiza provides many categories to manage by an instructor. Few of them are assignments, courses, questionnaires. Adding of records like participants, Teaching assistants and questions in these pages is done by submitting the entire page. This requires loading of entire page to add a record and loading of entire page again to save it.

==Proposed Solution==
This project proposes use of ajax for the required pages to avoid page reloading at the time of adding and saving records. This solution will make sure that adding or saving of record is taken care in the browser itself. It can be achieved by calling corresponding controller method, adding/saving the record and rendering it back to javascript pages instead of redirecting it to the same page. Javascript pages will append the added record functionality to the initial page. Thus, page refresh is avoided.

==Tasks==
* Add Participant in the assignments section using ajax
* Add/Remove TA in the courses section using ajax
* Edit Questionnaire by using ajax for adding questions in the Questionnaire section
* Show Review Status on assign reviewers page and allow to un-submit a review using ajax

==Implementation==

===Adding participant===
'''Earlier scenario:''' When an instructor goes to "Manage Assignments -> Add Participants" page, he/she can add/remove new Participant to the assignment. The add page also displays list of participants above the form for new participant. Every time a new Participant is added, the page reloads to reflect the changes and render the updated list of participants, even in case of non-existing userid.

'''Updates/Changes:'''
This page has been updated such that an instructor can add a new Participant using AJAX [https://en.wikipedia.org/wiki/Ajax_(programming) link AJAX]. After adding AJAX changes, the list gets updated without reloading the entire page. The changes made are below.

* Updated the ''shared_scripts/_user_list.html.erb'' file in views so that the Participants are listed by rendering another partial ''_participant.html.erb'' in participants controller. This change is to make it feasible to add AJAX to just append to the list without any extra formatting.
[[File:User_list.PNG]]

* Created a new file ''participants/add.js.erb'' for adding AJAX to render newly added participant in case of successful addition and display error in case of any error.
[[File:Javascript changes.PNG]]

* Updated the ''shared_scripts/_add_individual.html.erb'' form such that request should be through AJAX by setting remote flag to true.
[[File:Add_individual.PNG]]

* Updated the participants controller ''participant_controller.rb'' in controllers to render javascript when add method is invoked by the form submit action instead of redirect to list page.
[[File:Controller_changes.PNG]]

===Adding/Removing TA===
'''Earlier scenario:''' When an instructor goes to "Manage Courses -> Add TA" page, he/she can add/remove new TA to the course. Every time a new TA is added or removed, the page reloads to reflect the changes, even if the userid used does not exist.

'''Updates/Changes:'''
This page has been updated such that an instructor can add a new TA or remove a new TA using ajax. With these updates, the changes are reflected on the page without reloading the page, thus saving time.
* Updated the ''course/view_teaching_assistants.html.erb'' file in views so that the TAs are listed by rendering another partial ''_ta.html.erb''. This is done so that when a new TA has been added, ajax call can be used to render the format required for the new TA in the list append to the already existing list without reloading the page.
[[File:View_teaching_assistants_html_erb.png]]
* Created a new file ''course/_ta.html.erb'' in views which is a partial as described above and contains the code to list the TAs. The link_to "Delete" line in this file is updated to use :remote=>:true, so that ajax call can be made to remove the TA remotely without reloading the page.
<code>
<%= link_to "Delete", { :action => 'remove_ta', :controller =>'course', :id => ta.id, :course_id => ta.course_id }, method: :post, :remote => true, :class => 'remove_ta' %>
</code>
* Updated the ''course/_add_individual.html.erb'' file in views to perform the form_tag action to Add a TA remotely using :remote=>:true. In the below code, ''form_action'' and ''remote'' are local variables passed to this partial from ''course/view_teaching_assistants.html.erb'' with the values "add_ta" and "true" respectively
<code>
<%= form_tag form_action, :method => 'post', :remote => remote do %>
</code>
* Updated the ''course_controller.rb" file and replaced the redirect option in ''add_ta'' and ''remove_ta'' to render ''add_ta.js.erb'' and ''remove_ta.js.erb''. Also changed ''flash[:error]'' to ''flash.now[:error]'' so that the flash message is displayed now instead of after page reload.
[[File:Course_controller_rb1.png]]
* Added a new file ''course/add.js.erb'' and ''course/remove_ta.js.erb'' to views. The ''add_ta.js.erb'' file renders the newly added TA and appends it to the list of TAs. It also shows flash error message if the userid used to add TA does not exist. Similarly, ''remote_ta.js.erb'' file removes the deleted TA from the list.
[[File:add_remove_js_erb.png]]

===Edit Questionnaire===

'''Current scenario :''' page consists of different subsections for creating questionnaire,adding questions to the questionnaire and saving the questionnaire i.e.
*_questionnaire.html.erb

Adding questions feature is performed in the following method of ''questionnaires_controller.rb'' class

def add_new_questions
questionnaire_id = params[:id] unless params[:id].nil?
num_of_existed_questions = Questionnaire.find(questionnaire_id).questions.size
((num_of_existed_questions + 1)..(num_of_existed_questions + params[:question][:total_num].to_i)).each do |i|
question = Object.const_get(params[:question][:type]).create(txt: '', questionnaire_id: questionnaire_id, seq: i, type: params[:question][:type], break_before: true)
if question.is_a? ScoredQuestion
question.weight = 1
question.max_label = 'Strongly agree'
question.min_label = 'Strongly disagree'
end
question.size = '50, 3' if question.is_a? Criterion
question.alternatives = '0|1|2|3|4|5' if question.is_a? Dropdown
question.size = '60, 5' if question.is_a? TextArea
question.size = '30' if question.is_a? TextField
begin
question.save
rescue
flash[:error] = $ERROR_INFO
end
end
redirect_to edit_questionnaire_path(questionnaire_id.to_sym)
end

This method invokes ''question.create'' method in ''questions_cotroller.rb'' and saves the created question to the database. Then it redirects to the ''edit.html.erb'' page which causes page refresh while adding questions.

'''Solution:''' This problem was tried to solve using ajax by changing or adding the following classes and pages
* _question.html.erb (added) - displays added question

<td align="center"><a rel="nofollow" data-method="delete" href="/questions/' <%= @question.id%> '">Remove</a></td>'
<td><input size="6" value="' <%= @question.seq%> '" name="question[' question.id %>'][seq]" id="question_' +<%=@question.id %> '_seq" type="text"></td>
<td><textarea cols="50" rows="1" name="question[' <%= @question.id%> '][txt]" id="question_' <%= @question.id%> '_txt" placeholder="Edit question content here">' <%= @question.txt%> '</textarea></td>
<td><input size="10" disabled="disabled" value="' <%= @question.type%> '" name="question[' <%= @question.id%>'][type]" id="question_' <%= @question.id%> '_type" type="text"></td>
<td></td>

* add_new_questions.js.erb (added) - appends the html content with added question in ''_question.html.erb'' to questions_table in ''_questionnaire.html.erb''

$("#questions_table").append("<%= j render :partial => 'question',
:locals => {question: @question, :id => @question.id, :controller => 'questions'} %>");

* edit.html.erb (modified : code removed) - following code is removed as it internally calls respective question header models and appends html string to questions_table internally.

<% for @question in @questionnaire.questions do%>
<%-# The following line call certain method of the object, which returns html string-%>
<%= @question.edit %>
<% end %>

@question.edit invokes ''QuestionHeader.rb'' model which adds html content
def edit(_count)
html = '<tr>'
html += '<td align="center"><a rel="nofollow" data-method="delete" href="/questions/' + self.id.to_s + '">Remove</a></td>'
html += '<td><input size="6" value="' + self.seq.to_s + '" name="question[' + self.id.to_s + '][seq]" id="question_' + self.id.to_s + '_seq" type="text"></td>'
html += '<td><textarea cols="50" rows="1" name="question[' + self.id.to_s + '][txt]" id="question_' + self.id.to_s + '_txt" placeholder="Edit question content here">' + self.txt + '</textarea></td>'
html += '<td><input size="10" disabled="disabled" value="' + self.type + '" name="question[' + self.id.to_s + '][type]" id="question_' + self.id.to_s + '_type" type="text">''</td>'
html += '<td></td>'
html += '</tr>'
html.html_safe
end

* questionnaires_controller.rb (modified) - add_new_questions method is modified by replacing redire rendering ''add_new_questions.js.erb'' file

render :action=> 'add_new_questions.js.erb', :layout=>false, :question=> question
#redirect_to edit_questionnaire_path(questionnaire_id.to_sym)

'''Issue :''' But this solution is not working as Ajax can be applied to the browser side processing if the controller method is redirecting to the same page, which is not in this case as page gets redirected from question.html.erb to edit.html.erb. Another problem faced is the creation of questions which is called through ''_questionnaire.html.erb'' but not through ''_question.html.erb'' which makes it difficult to pass correct questionnaire id to the ajax call.

'''Alternative Approach to Edit Questionnaire:''' Another approach to solve this issue is to create a seperate java-script function which handles the entire process of adding,saving,deleting questions and appending them. Call this function from ''_questionnaire.html.erb'' instead of invoking add_new_questions method. Questions can be saved and retrived from data using Javascript Rest API calls. But, this approach not only needs to restructure entire questionnaire structure and many components in the Expertiza project but also violates the MVC design of the project.

===Un-submit reviews===
'''Earlier scenario:''' When an instructor/TA goes to "Manage Assignments -> Assign Reviewers" page, he/she can see a list of all the topics, the contributors and the reviewers for each topic. This page did not show the status of each review which can be in Assigned state or Saved state or Submitted state. Also, there was no way for the instructor/TA to un-submit an already submitted review.

'''New Additions:'''
* Updated the ''review_mappings/_list_review_mappings.html.erb'' file in views to display the status of each review by the reviewer. For each review_mapping, the code checks if there is a response in ''Response'' table with the same ''map_id'' used in the review_mappings on this page.
** If there is no such response, it means that the reviewer has not saved/submitted the review and it is currently in Assigned State. So, "Response Status: Saved" is shown for that review.
** If there is a response, the last (latest) response is checked as per requirement and the ''is_submitted'' attribute of this response is checked in the ''Response'' table.
*** If the attribute is false, the review has been saved but not submitted. So, "Response Status: Saved" is shown for that review.
*** If the attribute is true, the review has been submitted. So, "Response Status: Submitted" is shown for that review. Next to this, a link is created to un-submit the review. Clicking on this link changes the ''is_submitted'' attribute to false and updates the Response Status to Saved on the page by using ajax call, without reloading the page
[[File:List_review_mappings_html_erb.png]]
* Added a new method "unsubmit_review" to the ''review_mapping_controller.rb'' file. In this, we first find the latest response and then update the ''is_submitted'' attribute to false. The flash message is created based on whether the response was updated correctly. After this, ''unsubmit_review.js.rb'' file is rendered which updates the response status for the corresponding review on the page to Saved, without reloading the page
[[File:Review_mapping_controller_rb.png]]
* Added a new file ''review_mappings/unsubmit_review.js.erb'' to views. This file just changes the response status for the corresponding review displayed on the page to Saved from Submit after the review has been un-submitted and also prints the corresponding success or error flash message.
[[File:Unsubmit_review_js_erb.png]]
* Added a new line to ''routes.rb'' page for unsubmit_review action
[[File:Routes_rb.png]]

==UI Testing==

Log in details

'''Username:''' instructor6
'''password:''' password

'''Steps to test adding participant: '''

* Login as instructor
* Go to Manage -> Assignments. Add new participant by clicking on the 'Add Participant' icon.
* Enter Userid of the participant and click on Add

'' Expected Output: '' when add button is clicked with valid userid, new participant should be added to the list without the page getting reloaded. In case of attempt to add invalid user, the error should be displayed on top without page getting reloaded.

''' Steps to test adding TA:'''

* Login as instructor
* Go to Manage -> Courses. Add new participant by clicking on the 'Add TA' icon.
* Enter Userid of the TA and click on Add

'' Expected Output: '' when add button is clicked with valid userid, new TA should be added to the list without the page getting reloaded. In case of attempt to add invalid ID, the error should be displayed on top without page getting reloaded.

''' Steps to test adding question in questionnaire:'''

* Login as instructor
* Go to Manage -> Questionnaires. Create a new Review Questionnaire by clicking on the ‘New public item’ button for ‘Review’.
* Name the Questionnaire and click on create button
* Click on Edit for newly created questionnaire. You will now be navigated to page where you can add new questions to the questionnaire.
* Click on add button in "Questions" section.

''Expected output:'' When add button is clicked, question should be created and the questionnaire page should not get reloaded

''' Steps to test un-submit reviews'''

==Project Deployment==

Expertiza setup is done in VCL which is reserved for 30 days with Ubuntu 14.04 base. Started expertiza server publicly and link to access the server is.
https://152.7.99.101:3000

==Future work==

In future, we will try to implement the edit questionnaire part using alternative approach. We will try to implement testing using rspec framework and improve the UI design of the pages.

==References==

* https://www.youtube.com/channel/UCdKXzox7hrWjfOMML6FzTWg
* https://github.com/expertiza/expertiza
* http://wiki.expertiza.ncsu.edu/index.php/Expertiza_documentation
* http://guides.rubyonrails.org/working_with_javascript_in_rails.html
* http://wiki.expertiza.ncsu.edu/index.php/Development:Setup:Linux:Debian

CSC/ECE 517 Spring 2017/Use Ajax to add Participants,TA and Edit Questionnaire

2017-03-24T03:23:18Z

Dguttik: /* Project Deployment */

==Introduction==

<nowiki> Expertiza is an opensource software developed to assist people in education institutions to perform peer reviews and group projects. It is exceptionally helpful to the students and instructors. The software is designed in MVC (Model-View-Controller) architecture using ruby on rails.
</nowiki>

==Problem Statement==
Expertiza provides many categories to manage by an instructor. Few of them are assignments, courses, questionnaires. Adding of records like participants, Teaching assistants and questions in these pages is done by submitting the entire page. This requires loading of entire page to add a record and loading of entire page again to save it.

==Proposed Solution==
This project proposes use of ajax for the required pages to avoid page reloading at the time of adding and saving records. This solution will make sure that adding or saving of record is taken care in the browser itself. It can be achieved by calling corresponding controller method, adding/saving the record and rendering it back to javascript pages instead of redirecting it to the same page. Javascript pages will append the added record functionality to the initial page. Thus, page refresh is avoided.

==Tasks==
* Add Participant in the assignments section using ajax
* Add/Remove TA in the courses section using ajax
* Edit Questionnaire by using ajax for adding questions in the Questionnaire section
* Show Review Status on assign reviewers page and allow to un-submit a review using ajax

==Implementation==

===Adding participant===
'''Earlier scenario:''' When an instructor goes to "Manage Assignments -> Add Participants" page, he/she can add/remove new Participant to the assignment. The add page also displays list of participants above the form for new participant. Every time a new Participant is added, the page reloads to reflect the changes and render the updated list of participants, even in case of non-existing userid.

'''Updates/Changes:'''
This page has been updated such that an instructor can add a new Participant using AJAX [[Ajax_(programming)]]. After adding AJAX changes, the list gets updated without reloading the entire page. The changes made are below.
* Updated the ''shared_scripts/_user_list.html.erb'' file in views so that the Participants are listed by rendering another partial ''_participant.html.erb'' in participants controller. This change is to make it feasible to add AJAX to just append to the list without any extra formatting.
[[File:User_list.PNG]]
* Created a new file ''participants/add.js.erb'' for adding AJAX to render newly added participant in case of successful addition and display error in case of any error.
[[File:Javascript changes.PNG]]
* Updated the ''shared_scripts/_add_individual.html.erb'' form such that request should be through AJAX by setting remote flag to true.
[[File:Add_individual.PNG]]
* Updated the participants controller ''participant_controller.rb'' in controllers to render javascript when add method is invoked by the form submit action instead of redirect to list page.
[[File:Controller_changes.PNG]]

===Adding/Removing TA===
'''Earlier scenario:''' When an instructor goes to "Manage Courses -> Add TA" page, he/she can add/remove new TA to the course. Every time a new TA is added or removed, the page reloads to reflect the changes, even if the userid used does not exist.

'''Updates/Changes:'''
This page has been updated such that an instructor can add a new TA or remove a new TA using ajax. With these updates, the changes are reflected on the page without reloading the page, thus saving time.
* Updated the ''course/view_teaching_assistants.html.erb'' file in views so that the TAs are listed by rendering another partial ''_ta.html.erb''. This is done so that when a new TA has been added, ajax call can be used to render the format required for the new TA in the list append to the already existing list without reloading the page.
[[File:View_teaching_assistants_html_erb.png]]
* Created a new file ''course/_ta.html.erb'' in views which is a partial as described above and contains the code to list the TAs. The link_to "Delete" line in this file is updated to use :remote=>:true, so that ajax call can be made to remove the TA remotely without reloading the page.
<code>
<%= link_to "Delete", { :action => 'remove_ta', :controller =>'course', :id => ta.id, :course_id => ta.course_id }, method: :post, :remote => true, :class => 'remove_ta' %>
</code>
* Updated the ''course/_add_individual.html.erb'' file in views to perform the form_tag action to Add a TA remotely using :remote=>:true. In the below code, ''form_action'' and ''remote'' are local variables passed to this partial from ''course/view_teaching_assistants.html.erb'' with the values "add_ta" and "true" respectively
<code>
<%= form_tag form_action, :method => 'post', :remote => remote do %>
</code>
* Updated the ''course_controller.rb" file and replaced the redirect option in ''add_ta'' and ''remove_ta'' to render ''add_ta.js.erb'' and ''remove_ta.js.erb''. Also changed ''flash[:error]'' to ''flash.now[:error]'' so that the flash message is displayed now instead of after page reload.
[[File:Course_controller_rb1.png]]
* Added a new file ''course/add.js.erb'' and ''course/remove_ta.js.erb'' to views. The ''add_ta.js.erb'' file renders the newly added TA and appends it to the list of TAs. It also shows flash error message if the userid used to add TA does not exist. Similarly, ''remote_ta.js.erb'' file removes the deleted TA from the list.
[[File:add_remove_js_erb.png]]

===Edit Questionnaire===

'''Current scenario :''' page consists of different subsections for creating questionnaire,adding questions to the questionnaire and saving the questionnaire i.e.
*_questionnaire.html.erb

Adding questions feature is performed in the following method of ''questionnaires_controller.rb'' class

def add_new_questions
questionnaire_id = params[:id] unless params[:id].nil?
num_of_existed_questions = Questionnaire.find(questionnaire_id).questions.size
((num_of_existed_questions + 1)..(num_of_existed_questions + params[:question][:total_num].to_i)).each do |i|
question = Object.const_get(params[:question][:type]).create(txt: '', questionnaire_id: questionnaire_id, seq: i, type: params[:question][:type], break_before: true)
if question.is_a? ScoredQuestion
question.weight = 1
question.max_label = 'Strongly agree'
question.min_label = 'Strongly disagree'
end
question.size = '50, 3' if question.is_a? Criterion
question.alternatives = '0|1|2|3|4|5' if question.is_a? Dropdown
question.size = '60, 5' if question.is_a? TextArea
question.size = '30' if question.is_a? TextField
begin
question.save
rescue
flash[:error] = $ERROR_INFO
end
end
redirect_to edit_questionnaire_path(questionnaire_id.to_sym)
end

This method invokes ''question.create'' method in ''questions_cotroller.rb'' and saves the created question to the database. Then it redirects to the ''edit.html.erb'' page which causes page refresh while adding questions.

'''Solution:''' This problem was tried to solve using ajax by changing or adding the following classes and pages
* _question.html.erb (added) - displays added question

<td align="center"><a rel="nofollow" data-method="delete" href="/questions/' <%= @question.id%> '">Remove</a></td>'
<td><input size="6" value="' <%= @question.seq%> '" name="question[' question.id %>'][seq]" id="question_' +<%=@question.id %> '_seq" type="text"></td>
<td><textarea cols="50" rows="1" name="question[' <%= @question.id%> '][txt]" id="question_' <%= @question.id%> '_txt" placeholder="Edit question content here">' <%= @question.txt%> '</textarea></td>
<td><input size="10" disabled="disabled" value="' <%= @question.type%> '" name="question[' <%= @question.id%>'][type]" id="question_' <%= @question.id%> '_type" type="text"></td>
<td></td>

* add_new_questions.js.erb (added) - appends the html content with added question in ''_question.html.erb'' to questions_table in ''_questionnaire.html.erb''

$("#questions_table").append("<%= j render :partial => 'question',
:locals => {question: @question, :id => @question.id, :controller => 'questions'} %>");

* edit.html.erb (modified : code removed) - following code is removed as it internally calls respective question header models and appends html string to questions_table internally.

<% for @question in @questionnaire.questions do%>
<%-# The following line call certain method of the object, which returns html string-%>
<%= @question.edit %>
<% end %>

@question.edit invokes ''QuestionHeader.rb'' model which adds html content
def edit(_count)
html = '<tr>'
html += '<td align="center"><a rel="nofollow" data-method="delete" href="/questions/' + self.id.to_s + '">Remove</a></td>'
html += '<td><input size="6" value="' + self.seq.to_s + '" name="question[' + self.id.to_s + '][seq]" id="question_' + self.id.to_s + '_seq" type="text"></td>'
html += '<td><textarea cols="50" rows="1" name="question[' + self.id.to_s + '][txt]" id="question_' + self.id.to_s + '_txt" placeholder="Edit question content here">' + self.txt + '</textarea></td>'
html += '<td><input size="10" disabled="disabled" value="' + self.type + '" name="question[' + self.id.to_s + '][type]" id="question_' + self.id.to_s + '_type" type="text">''</td>'
html += '<td></td>'
html += '</tr>'
html.html_safe
end

* questionnaires_controller.rb (modified) - add_new_questions method is modified by replacing redire rendering ''add_new_questions.js.erb'' file

render :action=> 'add_new_questions.js.erb', :layout=>false, :question=> question
#redirect_to edit_questionnaire_path(questionnaire_id.to_sym)

'''Issue :''' But this solution is not working as Ajax can be applied to the browser side processing if the controller method is redirecting to the same page, which is not in this case as page gets redirected from question.html.erb to edit.html.erb. Another problem faced is the creation of questions which is called through ''_questionnaire.html.erb'' but not through ''_question.html.erb'' which makes it difficult to pass correct questionnaire id to the ajax call.

'''Alternative Approach to Edit Questionnaire:''' Another approach to solve this issue is to create a seperate java-script function which handles the entire process of adding,saving,deleting questions and appending them. Call this function from ''_questionnaire.html.erb'' instead of invoking add_new_questions method. Questions can be saved and retrived from data using Javascript Rest API calls. But, this approach not only needs to restructure entire questionnaire structure and many components in the Expertiza project but also violates the MVC design of the project.

===Un-submit reviews===
'''Earlier scenario:''' When an instructor/TA goes to "Manage Assignments -> Assign Reviewers" page, he/she can see a list of all the topics, the contributors and the reviewers for each topic. This page did not show the status of each review which can be in Assigned state or Saved state or Submitted state. Also, there was no way for the instructor/TA to un-submit an already submitted review.

'''New Additions:'''
* Updated the ''review_mappings/_list_review_mappings.html.erb'' file in views to display the status of each review by the reviewer. For each review_mapping, the code checks if there is a response in ''Response'' table with the same ''map_id'' used in the review_mappings on this page.
** If there is no such response, it means that the reviewer has not saved/submitted the review and it is currently in Assigned State. So, "Response Status: Saved" is shown for that review.
** If there is a response, the last (latest) response is checked as per requirement and the ''is_submitted'' attribute of this response is checked in the ''Response'' table.
*** If the attribute is false, the review has been saved but not submitted. So, "Response Status: Saved" is shown for that review.
*** If the attribute is true, the review has been submitted. So, "Response Status: Submitted" is shown for that review. Next to this, a link is created to un-submit the review. Clicking on this link changes the ''is_submitted'' attribute to false and updates the Response Status to Saved on the page by using ajax call, without reloading the page
[[File:List_review_mappings_html_erb.png]]
* Added a new method "unsubmit_review" to the ''review_mapping_controller.rb'' file. In this, we first find the latest response and then update the ''is_submitted'' attribute to false. The flash message is created based on whether the response was updated correctly. After this, ''unsubmit_review.js.rb'' file is rendered which updates the response status for the corresponding review on the page to Saved, without reloading the page
[[File:Review_mapping_controller_rb.png]]
* Added a new file ''review_mappings/unsubmit_review.js.erb'' to views. This file just changes the response status for the corresponding review displayed on the page to Saved from Submit after the review has been un-submitted and also prints the corresponding success or error flash message.
[[File:Unsubmit_review_js_erb.png]]
* Added a new line to ''routes.rb'' page for unsubmit_review action
[[File:Routes_rb.png]]

==UI Testing==

Log in details

'''Username:''' instructor6
'''password:''' password

'''Steps to test adding participant: '''

''' Steps to test adding TA:'''

''' Steps to test adding question in questionnaire:'''

* Login as instructor
* Go to Manage -> Questionnaires. Create a new Review Questionnaire by clicking on the ‘New public item’ button for ‘Review’.
* Name the Questionnaire and click on create button
* Click on Edit for newly created questionnaire. You will now be navigated to page where you can add new questions to the questionnaire.
* Click on add button in "Questions" section.

''Expected output:'' When add button is clicked, question should be created and the questionnaire page should not get reloaded

''' Steps to test un-submit reviews'''

==Project Deployment==

Expertiza setup is done in VCL with is reserved for 30 days with Ubuntu 14.04 base. Started expertiza server publicly and link to access the server is.
https://152.7.99.101:3000

==Future work==

In future, we will try to implement the edit questionnaire part using alternative approach. We will try to implement testing using rspec framework and improve the UI design of the pages.

==References==

* https://www.youtube.com/channel/UCdKXzox7hrWjfOMML6FzTWg
* https://github.com/expertiza/expertiza
* http://wiki.expertiza.ncsu.edu/index.php/Expertiza_documentation
* http://guides.rubyonrails.org/working_with_javascript_in_rails.html
* http://wiki.expertiza.ncsu.edu/index.php/Development:Setup:Linux:Debian

CSC/ECE 517 Spring 2017/Use Ajax to add Participants,TA and Edit Questionnaire

2017-03-24T02:56:48Z

Dguttik: /* Proposed Solution */

CSC/ECE 517 Spring 2017/Use Ajax to add Participants,TA and Edit Questionnaire

2017-03-24T01:40:17Z

Dguttik: /* Introduction */

CSC/ECE 517 Spring 2017/Use Ajax to add Participants,TA and Edit Questionnaire

2017-03-24T01:39:32Z

Dguttik: /* Introduction */

==Introduction==

Expertiza is an opensource software developed to assist people in education institutions to perform peer reviews and group projects. It is exceptionally helpful to the students and instructors. The software is designed in MVC (Model-View-Controller)[https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller] architecture using ruby on rails.

==Problem Statement==
Expertiza provides many categories to manage by an instructor. Few of them are assignments, courses, questionnaires. Adding of records like participants, Teaching assistants and questions in these pages is done by submitting the entire page. This requires loading of entire page to add a record and loading of entire page again to save it.

==Proposed Solution==
This project proposes use of ajax for the required pages to avoid page reloading at the time of adding and saving records. This solution will make sure that adding or saving of record is taken care in the browser itself. It can be achieved by calling corresponding controller method, adding/saving the record and rendering it back to javascript pages instead of redirecting it to the same page. Javascript pages will append the added record functionality to the initial page. Thus page refresh is avoided.

==Tasks==
* Add Participant in the assignments section using ajax
* Add/Remove TA in the courses section using ajax
* Edit Questionnaire by using ajax for adding questions in the Questionnaire section
* Show Review Status on assign reviewers page and allow to un-submit a review using ajax

==Implementation==
===Adding participant===
===Adding TA===
===Edit Questionnaire===

'''Current scenario :''' page consists of different subsections for creating questionnaire,adding questions to the questionnaire and saving the questionnaire i.e.
*_questionnaire.html.erb

Adding questions feature is performed in the following method of ''questionnaires_controller.rb'' class

def add_new_questions
questionnaire_id = params[:id] unless params[:id].nil?
num_of_existed_questions = Questionnaire.find(questionnaire_id).questions.size
((num_of_existed_questions + 1)..(num_of_existed_questions + params[:question][:total_num].to_i)).each do |i|
question = Object.const_get(params[:question][:type]).create(txt: '', questionnaire_id: questionnaire_id, seq: i, type: params[:question][:type], break_before: true)
if question.is_a? ScoredQuestion
question.weight = 1
question.max_label = 'Strongly agree'
question.min_label = 'Strongly disagree'
end
question.size = '50, 3' if question.is_a? Criterion
question.alternatives = '0|1|2|3|4|5' if question.is_a? Dropdown
question.size = '60, 5' if question.is_a? TextArea
question.size = '30' if question.is_a? TextField
begin
question.save
rescue
flash[:error] = $ERROR_INFO
end
end
redirect_to edit_questionnaire_path(questionnaire_id.to_sym)
end

This method invokes ''question.create'' method in ''questions_cotroller.rb'' and saves the created question to the database. Then it redirects to the ''edit.html.erb'' page which causes page refresh while adding questions.

'''Solution:''' This problem was tried to solve using ajax by changing or adding the following classes and pages
* _question.html.erb (added) - displays added question

<td align="center"><a rel="nofollow" data-method="delete" href="/questions/' <%= @question.id%> '">Remove</a></td>'
<td><input size="6" value="' <%= @question.seq%> '" name="question[' question.id %>'][seq]" id="question_' +<%=@question.id %> '_seq" type="text"></td>
<td><textarea cols="50" rows="1" name="question[' <%= @question.id%> '][txt]" id="question_' <%= @question.id%> '_txt" placeholder="Edit question content here">' <%= @question.txt%> '</textarea></td>
<td><input size="10" disabled="disabled" value="' <%= @question.type%> '" name="question[' <%= @question.id%>'][type]" id="question_' <%= @question.id%> '_type" type="text"></td>
<td></td>

* add_new_questions.js.erb (added) - appends the html content with added question in ''_question.html.erb'' to questions_table in ''_questionnaire.html.erb''

$("#questions_table").append("<%= j render :partial => 'question',
:locals => {question: @question, :id => @question.id, :controller => 'questions'} %>");

* edit.html.erb (modified : code removed) - following code is removed as it internally calls respective question header models and appends html string to questions_table internally.

<% for @question in @questionnaire.questions do%>
<%-# The following line call certain method of the object, which returns html string-%>
<%= @question.edit %>
<% end %>

@question.edit invokes ''QuestionHeader.rb'' model which adds html content
def edit(_count)
html = '<tr>'
html += '<td align="center"><a rel="nofollow" data-method="delete" href="/questions/' + self.id.to_s + '">Remove</a></td>'
html += '<td><input size="6" value="' + self.seq.to_s + '" name="question[' + self.id.to_s + '][seq]" id="question_' + self.id.to_s + '_seq" type="text"></td>'
html += '<td><textarea cols="50" rows="1" name="question[' + self.id.to_s + '][txt]" id="question_' + self.id.to_s + '_txt" placeholder="Edit question content here">' + self.txt + '</textarea></td>'
html += '<td><input size="10" disabled="disabled" value="' + self.type + '" name="question[' + self.id.to_s + '][type]" id="question_' + self.id.to_s + '_type" type="text">''</td>'
html += '<td></td>'
html += '</tr>'
html.html_safe
end

* questionnaires_controller.rb (modified) - add_new_questions method is modified by replacing redire rendering ''add_new_questions.js.erb'' file

render :action=> 'add_new_questions.js.erb', :layout=>false, :question=> question
#redirect_to edit_questionnaire_path(questionnaire_id.to_sym)

'''Issue :''' But this solution is not working as Ajax can be applied to the browser side processing if the controller method is redirecting to the same page, which is not in this case as page gets redirected from question.html.erb to edit.html.erb. Another problem faced is the creation of questions which is called through ''_questionnaire.html.erb'' but not through ''_question.html.erb'' which makes it difficult to pass correct questionnaire id to the ajax call.

'''Alternative Approach to Edit Questionnaire:''' Another approach to solve this issue is to create a seperate java-script function which handles the entire process of adding,saving,deleting questions and appending them. Call this function from ''_questionnaire.html.erb'' instead of invoking add_new_questions method. Questions can be saved and retrived from data using Javascript Rest API calls. But, this approach not only needs to restructure entire questionnaire structure and many components in the Expertiza project but also violates the MVC design of the project.

===Un-submit reviews===
'''Earlier scenario:''' When an instructor/TA goes to "Manage Assignments -> Assign Reviewers" page, he/she can see a list of all the topics, the contributors and the reviewers for each topic. This page did not show the status of each review which can be in Assigned state or Saved state or Submitted state. Also, there was no way for the instructor/TA to un-submit an already submitted review.

'''New Additions:'''
* Updated the ''review_mappings/_list_review_mappings.html.erb'' file in views to display the status of each review by the reviewer. For each review_mapping, the code checks if there is a response in ''Response'' table with the same ''map_id'' used in the review_mappings on this page.
** If there is no such response, it means that the reviewer has not saved/submitted the review and it is currently in Assigned State. So, "Response Status: Saved" is shown for that review.
** If there is a response, the last (latest) response is checked as per requirement and the ''is_submitted'' attribute of this response is checked in the ''Response'' table.
*** If the attribute is false, the review has been saved but not submitted. So, "Response Status: Saved" is shown for that review.
*** If the attribute is true, the review has been submitted. So, "Response Status: Submitted" is shown for that review. Next to this, a link is created to un-submit the review. Clicking on this link changes the ''is_submitted'' attribute to false and updates the Response Status to Saved on the page by using ajax call, without reloading the page
[[File:List_review_mappings_html_erb.png]]
* Added a new method "unsubmit_review" to the ''review_mapping_controller.rb'' file. In this, we first find the latest response and then update the ''is_submitted'' attribute to false. The flash message is created based on whether the response was updated correctly. After this, ''unsubmit_review.js.rb'' file is rendered which updates the response status for the corresponding review on the page to Saved, without reloading the page
[[File:Review_mapping_controller_rb.png]]
* Added a new file ''review_mappings/unsubmit_review.js.erb'' to views. This file just changes the response status for the corresponding review displayed on the page to Saved from Submit after the review has been un-submitted and also prints the corresponding success or error flash message.
[[File:Unsubmit_review_js_erb.png]]
* Added a new line to ''routes.rb'' page for unsubmit_review action
[[File:Routes_rb.png]]

==UI Testing==

Log in details

'''Username:''' instructor6
'''password:''' password

'''Steps to test adding participant: '''

''' Steps to test adding TA:'''

''' Steps to test adding question in questionnaire:'''

* Login as instructor
* Go to Manage -> Questionnaires. Create a new Review Questionnaire by clicking on the ‘New public item’ button for ‘Review’.
* Name the Questionnaire and click on create button
* Click on Edit for newly created questionnaire. You will now be navigated to page where you can add new questions to the questionnaire.
* Click on add button in "Questions" section.

''Expected output:'' When add button is clicked, question should be created and the questionnaire page should not get reloaded

''' Steps to test un-submit reviews'''

==Project Deployment==
==Future work==

In future, we will try to implement the edit questionnaire part using alternative approach. We will try to implement testing using rspec framework and improve the UI design of the pages.

==References==

* https://www.youtube.com/channel/UCdKXzox7hrWjfOMML6FzTWg
* https://github.com/expertiza/expertiza
* http://wiki.expertiza.ncsu.edu/index.php/Expertiza_documentation
* http://guides.rubyonrails.org/working_with_javascript_in_rails.html

CSC/ECE 517 Spring 2017/Use Ajax to add Participants,TA and Edit Questionnaire

2017-03-24T01:39:09Z

Dguttik: /* Introduction */