Expertiza_Wiki - User contributions [en]

CSC/ECE 517 Fall 2016 E1691 ConvertAssignmentCreationFormtoReactJS

2016-12-06T05:13:20Z

Onam:

= E1691 Convert Assignment Creation Form to ReactJS =

This a page to describe a final project for ECE517. In this project we will be converting Assignment creation form to ReactJS.

==Expertiza==
Expertiza is an Open Source Software project developed by NC State University, funded by the National Science Foundation. It allows the instructor to create assignments as well as modify existing assignments. Students can signup for topics in an assignment and can submit articles, codes, web-sites etc. It is a web application built on Ruby on Rails framework. It also allows students to review the submissions that have been made other students.

== React JS ==
ReactJS is an open source JavaScript library, used to provide a view for data rendered as HTML.It is maintained by Facebook, Instagram and a community of individual developers and corporations. React was created by Jordan Walke, a software engineer at Facebook. He was influenced by XHP, an HTML component framework for PHP. It was first deployed on Facebook's newsfeed in 2011 and later on Instagram.com in 2012. It was open-sourced at JSConf US in May 2013.

=== Advantages of ReactJS ===
<ul>
<li> It is easy to know how a component is rendered, you just look at the render function. This render function basically implements html <i>divs</i>.</li>
<li> JSX is a faster, safer and easer JavaScript which makes it easy to read the code of your components. It is also really easy to see the layout, or how components are plugged or combined with each other.</li>
<li> React can be rendered on the server-side. So you can easily use it in the Ruby on Rails too. </li>
<li> It is easy to test (easier than the traditional JavaScript or JQuery where you have to test the code in the Developer Tools) and it can easily be integrated with tools like jest which can make testing painless.</li>
<li> It ensures readability and makes maintainability easier.</li>
<li> It can be used with any framework such as Backbone.js, Angular.js, as it is only a view layer.</li>
</ul>

=== Dynamic Rendering ===
A client-side dynamic web page processes the web page using HTML scripting running in the browser as it loads. JavaScript and other scripting languages determine the way the HTML in the received page is parsed into the Document Object Model, or DOM, that represents the loaded web page. The same client-side techniques can then dynamically update or change the DOM in the same way.

Shown below is an example of a dynamically rendered webpage. The user is able to enter values, which are reflected in the view immediately after submission, without any redirection or reloading of the webpage. You can also see the timer running on the page, which demonstrates the ability to dynamically update variable values inside the view.

[[File:Giphy.gif|centre]]

== Assignment Creation ==
=== Current Implementation ===
The assignment creation view is currently implemented mostly in HTML and some data validations are done using JQuery. This implementation does not support dynamic view rendering which is essential to improving the user interface and contributing to the fluidity of the overall experience. For example, If the user wants to create a new assignment, clicking the new assignment link will generate a server request and the new view is rendered (url is changed). After filling up all the details required for the assignment creation, save link will again generate a server request which will make the database entry and again render a new view.

<div style="width:100%;float:left;">
<div style="width:45%;float:left;margin: 5px 5px 5px 5px;">
[[image:FinalProj pic222.png]]<br><br>
</div>
<div style="width:45%;float:left;margin: 5px 5px 5px 5px;">
[[image:FinalProj pic1.png]]
</div>
</div>

=== Proposed Solution ===

In the revised implementation, clicking on the <i>New Assignment</i> link generates a drop-down window, which contains the form for creating a new assignment. This form contains the same fields as the original form.<br/>
In addition, we have added data validations for two fields. The name of the assignment cannot be left blank, and the 'submission directory' field cannot be left blank or contain any special characters. If either of these conditions is violated, an error message is displayed to the user. Furthermore, these validations are done in the client-side itself, removing the need for a server request to validate the data.
Submitting the form will create a database entry and close the form.

[[image:FinalProj pic88.png|center]]

====Changed files====
*apps/assets/javascripts/tree_display.jsx.erb
*apps/controllers/assignments_controller.rb
*apps/controllers/tree_display_controller.rb

=====Details=====
We created a new React class NewAssignmentForm which dynamically creates and displays the form for New assignment. This class the following methods:
getInitialState function(){} - Here we identify the form parameters that will be sent to the database when a new assignment is created.
handleNameChange function(e){} - The following methods get triggered on change of the form fields and capture/update the state variables
handleCourseChange: function(e){} -//-
handleSubChange: function(e){} -//-
handleDescChange: function(e){} -//-
handleTeamChange: function(e){} -//-
handleQuizChange: function(e){} -//-
handleDeadlineChange: function(e){} -//-
handleReviewsChange: function(e){} -//-
handleCalibrationChange: function(e){} -//-
handleAvailabilityChange: function(e){} -//-
handleReputationChange: function(e){} -//-

directoryValidate: function(e){} - this method validates that there is valid directory entered
nameValidate: function(e){} - this method validates that a valid project name isentered

handleCreateAssignment: function(e) {} - this method sends ajax request with the parameters from the filled form.

handleGetCourses: function() {} - this method is triggered when a course selection drop down is clicked. It sends a jQuery request and gets all the courses based on the instructor role

render: function(){} - this method renders the form components

In assignment_controller.rb we edited create method:

@assignment_form.assignment.instructor_id = current_user.id -- We now pass current instructor to the assignment form.

In tree_display_controller.rb we added new method:

def get_courses_node_ng -- This method returns the course list array of hashes based on the instructor chosen. This logic is similar to the helper method course_options

====Testing plan====

1. Log in as an instructor and check that creating a new assignment works as expected<br>
2. Log in as an instructor and check that the assignment could be created successfully and all the entered options have been preserved

== Editing Assignment ==
=== Current Implementation ===
Similar to New assignment creation page Edit page does not support dynamic view rendering which is essential to improving the user interface and contributing to the fluidity of the overall experience. For example, If the user wants to edit the name of the assignment or change number of slots they have to click edit button. It will generate a server request and the new view is rendered (url is changed). After filling out all the details that changed, save link will again generate a server request which will make the database entry and again render a new view.

<div style="width:100%;float:left;">
<div style="width:45%;float:left;margin-right:2%;">
[[image:FinalProj pic55.png]]
</div>
<div style="width:45%;float:left;margin-left:2%;">
[[image:FinalProj pic66.png]]
</div>
</div>
</br>

=== Proposed Solution ===
In the revised implementation, as the edit button is clicked a dynamic drop down form will be displayed. Saving the details will make the database entry. Except for the database update, all the processing is done on the client side itself, leading to a decrease in the number of server requests.<br>

[[image:FinalProj pic99.png|center]]

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

====Testing plan====
1. Log in as an instructor and check that editing an assignment works as expected<br>
2. Log in as an instructor and check that an assignment could be successfully edited and all the existing functionality is preserved<br>
==References==
#[https://facebook.github.io/react/ ReactJS by Facebook Code]
#[https://www.airpair.com/reactjs/posts/reactjs-a-guide-for-rails-developers ReactJS for Ruby on Rails]
#[https://github.com/expertiza/expertiza Expertiza on GitHub]
#[http://expertiza.ncsu.edu/ The live Expertiza website]
#[http://wiki.expertiza.ncsu.edu/index.php/Main_Page Expertiza wiki]

CSC/ECE 517 Fall 2016 E1691 ConvertAssignmentCreationFormtoReactJS

2016-12-06T05:12:59Z

Onam:

= E1691 Convert Assignment Creation Form to ReactJS =

This a page to describe a final project for ECE517. In this project we will be converting Assignment creation form to ReactJS.

==Expertiza==
Expertiza is an Open Source Software project developed by NC State University, funded by the National Science Foundation. It allows the instructor to create assignments as well as modify existing assignments. Students can signup for topics in an assignment and can submit articles, codes, web-sites etc. It is a web application built on Ruby on Rails framework. It also allows students to review the submissions that have been made other students.

== React JS ==
ReactJS is an open source JavaScript library, used to provide a view for data rendered as HTML.It is maintained by Facebook, Instagram and a community of individual developers and corporations. React was created by Jordan Walke, a software engineer at Facebook. He was influenced by XHP, an HTML component framework for PHP. It was first deployed on Facebook's newsfeed in 2011 and later on Instagram.com in 2012. It was open-sourced at JSConf US in May 2013.

=== Advantages of ReactJS ===
<ul>
<li> It is easy to know how a component is rendered, you just look at the render function. This render function basically implements html <i>divs</i>.</li>
<li> JSX is a faster, safer and easer JavaScript which makes it easy to read the code of your components. It is also really easy to see the layout, or how components are plugged or combined with each other.</li>
<li> React can be rendered on the server-side. So you can easily use it in the Ruby on Rails too. </li>
<li> It is easy to test (easier than the traditional JavaScript or JQuery where you have to test the code in the Developer Tools) and it can easily be integrated with tools like jest which can make testing painless.</li>
<li> It ensures readability and makes maintainability easier.</li>
<li> It can be used with any framework such as Backbone.js, Angular.js, as it is only a view layer.</li>
</ul>

=== Dynamic Rendering ===
A client-side dynamic web page processes the web page using HTML scripting running in the browser as it loads. JavaScript and other scripting languages determine the way the HTML in the received page is parsed into the Document Object Model, or DOM, that represents the loaded web page. The same client-side techniques can then dynamically update or change the DOM in the same way.

Shown below is an example of a dynamically rendered webpage. The user is able to enter values, which are reflected in the view immediately after submission, without any redirection or reloading of the webpage. You can also see the timer running on the page, which demonstrates the ability to dynamically update variable values inside the view.

[[File:Giphy.gif|centre]]

== Assignment Creation ==
=== Current Implementation ===
The assignment creation view is currently implemented mostly in HTML and some data validations are done using JQuery. This implementation does not support dynamic view rendering which is essential to improving the user interface and contributing to the fluidity of the overall experience. For example, If the user wants to create a new assignment, clicking the new assignment link will generate a server request and the new view is rendered (url is changed). After filling up all the details required for the assignment creation, save link will again generate a server request which will make the database entry and again render a new view.

<div style="width:100%;float:left;">
<div style="width:45%;float:left;margin: 5px 5px 5px 5px;">
[[image:FinalProj pic222.png]]<br><br>
</div>
<div style="width:45%;float:left;margin: 5px 5px 5px 5px;">
[[image:FinalProj pic1.png]]
</div>
</div>

=== Proposed Solution ===

In the revised implementation, clicking on the <i>New Assignment</i> link generates a drop-down window, which contains the form for creating a new assignment. This form contains the same fields as the original form.<br/>
In addition, we have added data validations for two fields. The name of the assignment cannot be left blank, and the 'submission directory' field cannot be left blank or contain any special characters. If either of these conditions is violated, an error message is displayed to the user. Furthermore, these validations are done in the client-side itself, removing the need for a server request to validate the data.
Submitting the form will create a database entry and close the form.

[[image:FinalProj pic88.png|center]]

====Changed files====
*apps/assets/javascripts/tree_display.jsx.erb
*apps/controllers/assignments_controller.rb
*apps/controllers/tree_display_controller.rb

=====Details=====
We created a new React class NewAssignmentForm which dynamically creates and displays the form for New assignment. This class the following methods:
getInitialState function(){} - Here we identify the form parameters that will be sent to the database when a new assignment is created.
handleNameChange function(e){} - The following methods get triggered on change of the form fields and capture/update the state variables
handleCourseChange: function(e){} -//-
handleSubChange: function(e){} -//-
handleDescChange: function(e){} -//-
handleTeamChange: function(e){} -//-
handleQuizChange: function(e){} -//-
handleDeadlineChange: function(e){} -//-
handleReviewsChange: function(e){} -//-
handleCalibrationChange: function(e){} -//-
handleAvailabilityChange: function(e){} -//-
handleReputationChange: function(e){} -//-

directoryValidate: function(e){} - this method validates that there is valid directory entered
nameValidate: function(e){} - this method validates that a valid project name isentered

handleCreateAssignment: function(e) {} - this method sends ajax request with the parameters from the filled form.

handleGetCourses: function() {} - this method is triggered when a course selection drop down is clicked. It sends a jQuery request and gets all the courses based on the instructor role

render: function(){} - this method renders the form components

In assignment_controller.rb we edited create method:

@assignment_form.assignment.instructor_id = current_user.id -- We now pass current instructor to the assignment form.

In tree_display_controller.rb we added new method:

def get_courses_node_ng -- This method returns the course list array of hashes based on the instructor chosen. This logic is similar to the helper method course_options

====Testing plan====

1. Log in as an instructor and check that creating a new assignment works as expected<br>
2. Log in as an instructor and check that the assignment could be created successfully and all the entered options have been preserved

== Editing Assignment ==
=== Current Implementation ===
Similar to New assignment creation page Edit page does not support dynamic view rendering which is essential to improving the user interface and contributing to the fluidity of the overall experience. For example, If the user wants to edit the name of the assignment or change number of slots they have to click edit button. It will generate a server request and the new view is rendered (url is changed). After filling out all the details that changed, save link will again generate a server request which will make the database entry and again render a new view.

<div style="width:100%;float:left;">
<div style="width:45%;float:left;margin-right:2%;">
[[image:FinalProj pic55.png]]
</div>
<div style="width:45%;float:left;margin-left:2%;">
[[image:FinalProj pic66.png]]
</div>
</div>
<br>

=== Proposed Solution ===
In the revised implementation, as the edit button is clicked a dynamic drop down form will be displayed. Saving the details will make the database entry. Except for the database update, all the processing is done on the client side itself, leading to a decrease in the number of server requests.<br>

[[image:FinalProj pic99.png|center]]

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

====Testing plan====
1. Log in as an instructor and check that editing an assignment works as expected<br>
2. Log in as an instructor and check that an assignment could be successfully edited and all the existing functionality is preserved<br>
==References==
#[https://facebook.github.io/react/ ReactJS by Facebook Code]
#[https://www.airpair.com/reactjs/posts/reactjs-a-guide-for-rails-developers ReactJS for Ruby on Rails]
#[https://github.com/expertiza/expertiza Expertiza on GitHub]
#[http://expertiza.ncsu.edu/ The live Expertiza website]
#[http://wiki.expertiza.ncsu.edu/index.php/Main_Page Expertiza wiki]

CSC/ECE 517 Fall 2016 E1691 ConvertAssignmentCreationFormtoReactJS

2016-12-06T05:01:59Z

Onam:

= E1691 Convert Assignment Creation Form to ReactJS =

This a page to describe a final project for ECE517. In this project we will be converting Assignment creation form to ReactJS.

==Expertiza==
Expertiza is an Open Source Software project developed by NC State University, funded by the National Science Foundation. It allows the instructor to create assignments as well as modify existing assignments. Students can signup for topics in an assignment and can submit articles, codes, web-sites etc. It is a web application built on Ruby on Rails framework. It also allows students to review the submissions that have been made other students.

== React JS ==
ReactJS is an open source JavaScript library, used to provide a view for data rendered as HTML.It is maintained by Facebook, Instagram and a community of individual developers and corporations. React was created by Jordan Walke, a software engineer at Facebook. He was influenced by XHP, an HTML component framework for PHP. It was first deployed on Facebook's newsfeed in 2011 and later on Instagram.com in 2012. It was open-sourced at JSConf US in May 2013.

=== Advantages of ReactJS ===
<ul>
<li> It is easy to know how a component is rendered, you just look at the render function. This render function basically implements html <i>divs</i>.</li>
<li> JSX is a faster, safer and easer JavaScript which makes it easy to read the code of your components. It is also really easy to see the layout, or how components are plugged or combined with each other.</li>
<li> React can be rendered on the server-side. So you can easily use it in the Ruby on Rails too. </li>
<li> It is easy to test (easier than the traditional JavaScript or JQuery where you have to test the code in the Developer Tools) and it can easily be integrated with tools like jest which can make testing painless.</li>
<li> It ensures readability and makes maintainability easier.</li>
<li> It can be used with any framework such as Backbone.js, Angular.js, as it is only a view layer.</li>
</ul>

=== Dynamic Rendering ===
A client-side dynamic web page processes the web page using HTML scripting running in the browser as it loads. JavaScript and other scripting languages determine the way the HTML in the received page is parsed into the Document Object Model, or DOM, that represents the loaded web page. The same client-side techniques can then dynamically update or change the DOM in the same way.

Shown below is an example of a dynamically rendered webpage. The user is able to enter values, which are reflected in the view immediately after submission, without any redirection or reloading of the webpage. You can also see the timer running on the page, which demonstrates the ability to dynamically update variable values inside the view.

[[File:Giphy.gif|centre]]

== Assignment Creation ==
=== Current Implementation ===
The assignment creation view is currently implemented mostly in HTML and some data validations are done using JQuery. This implementation does not support dynamic view rendering which is essential to improving the user interface and contributing to the fluidity of the overall experience. For example, If the user wants to create a new assignment, clicking the new assignment link will generate a server request and the new view is rendered (url is changed). After filling up all the details required for the assignment creation, save link will again generate a server request which will make the database entry and again render a new view.

<div style="width:100%;float:left;">
<div style="width:45%;float:left;margin: 5px 5px 5px 5px;">
[[image:FinalProj pic222.png]]<br><br>
</div>
<div style="width:45%;float:left;margin: 5px 5px 5px 5px;">
[[image:FinalProj pic1.png]]
</div>
</div>

=== Proposed Solution ===

In the revised implementation, clicking on the <i>New Assignment</i> link generates a drop-down window, which contains the form for creating a new assignment. This form contains the same fields as the original form.<br/>
In addition, we have added data validations for two fields. The name of the assignment cannot be left blank, and the 'submission directory' field cannot be left blank or contain any special characters. If either of these conditions is violated, an error message is displayed to the user. Furthermore, these validations are done in the client-side itself, removing the need for a server request to validate the data.
Submitting the form will create a database entry and close the form.

[[image:FinalProj pic88.png|center]]

====Changed files====
*apps/assets/javascripts/tree_display.jsx.erb
*apps/controllers/assignments_controller.rb
*apps/controllers/tree_display_controller.rb

=====Details=====
We created a new React class NewAssignmentForm which dynamically creates and displays the form for New assignment. This class the following methods:
getInitialState function(){} - Here we identify the form parameters that will be sent to the database when a new assignment is created.
handleNameChange function(e){} - The following methods get triggered on change of the form fields and capture/update the state variables
handleCourseChange: function(e){} -//-
handleSubChange: function(e){} -//-
handleDescChange: function(e){} -//-
handleTeamChange: function(e){} -//-
handleQuizChange: function(e){} -//-
handleDeadlineChange: function(e){} -//-
handleReviewsChange: function(e){} -//-
handleCalibrationChange: function(e){} -//-
handleAvailabilityChange: function(e){} -//-
handleReputationChange: function(e){} -//-

directoryValidate: function(e){} - this method validates that there is valid directory entered
nameValidate: function(e){} - this method validates that a valid project name isentered

handleCreateAssignment: function(e) {} - this method sends ajax request with the parameters from the filled form.

handleGetCourses: function() {} - this method is triggered when a course selection drop down is clicked. It sends a jQuery request and gets all the courses based on the instructor role

render: function(){} - this method renders the form components

In assignment_controller.rb we edited create method:

@assignment_form.assignment.instructor_id = current_user.id -- We now pass current instructor to the assignment form.

In tree_display_controller.rb we added new method:

def get_courses_node_ng -- This method returns the course list array of hashes based on the instructor chosen. This logic is similar to the helper method course_options

====Testing plan====

1. Log in as an instructor and check that creating a new assignment works as expected<br>
2. Log in as an instructor and check that the assignment could be created successfully and all the entered options have been preserved

== Editing Assignment ==
=== Current Implementation ===
Similar to New assignment creation page Edit page does not support dynamic view rendering which is essential to improving the user interface and contributing to the fluidity of the overall experience. For example, If the user wants to edit the name of the assignment or change number of slots they have to click edit button. It will generate a server request and the new view is rendered (url is changed). After filling out all the details that changed, save link will again generate a server request which will make the database entry and again render a new view.

<div style="width:100%;float:left;">
<div style="width:45%;float:left;margin-right:2%;">
[[image:FinalProj pic55.png]]
</div>
<div style="width:45%;float:left;margin-left:2%;">
[[image:FinalProj pic66.png]]
</div>
</div>

=== Proposed Solution ===
In the revised implementation, the main edit table will be dynamically updatable. Saving the details will make the database entry. Except for the database update, all the processing is done on the client side itself, leading to a decrease in the number of server requests.<br>

[[image:FinalProj pic99.png|center]]

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

====Testing plan====
1. Log in as an instructor and check that editing an assignment works as expected<br>
2. Log in as an instructor and check that an assignment could be successfully edited and all the existing functionality is preserved<br>
==References==
#[https://facebook.github.io/react/ ReactJS by Facebook Code]
#[https://www.airpair.com/reactjs/posts/reactjs-a-guide-for-rails-developers ReactJS for Ruby on Rails]
#[https://github.com/expertiza/expertiza Expertiza on GitHub]
#[http://expertiza.ncsu.edu/ The live Expertiza website]
#[http://wiki.expertiza.ncsu.edu/index.php/Main_Page Expertiza wiki]

File:FinalProj pic99.png

2016-12-06T05:01:46Z

Onam:

CSC/ECE 517 Fall 2016 E1691 ConvertAssignmentCreationFormtoReactJS

2016-12-02T22:47:27Z

Onam: /* Details */

= E1691 Convert Assignment Creation Form to ReactJS =

This a page to describe a final project for ECE517. In this project we will be converting Assignment creation form to ReactJS.

==Expertiza==
Expertiza is an Open Source Software project developed by NC State University, funded by the National Science Foundation. It allows the instructor to create assignments as well as modify existing assignments. Students can signup for topics in an assignment and can submit articles, codes, web-sites etc. It is a web application built on Ruby on Rails framework. It also allows students to review the submissions that have been made other students.

== React JS ==
ReactJS is an open source JavaScript library, used to provide a view for data rendered as HTML.It is maintained by Facebook, Instagram and a community of individual developers and corporations. React was created by Jordan Walke, a software engineer at Facebook. He was influenced by XHP, an HTML component framework for PHP. It was first deployed on Facebook's newsfeed in 2011 and later on Instagram.com in 2012. It was open-sourced at JSConf US in May 2013.

=== Advantages of ReactJS ===
<ul>
<li> It is easy to know how a component is rendered, you just look at the render function. This render function basically implements html <i>divs</i>.</li>
<li> JSX is a faster, safer and easer JavaScript which makes it easy to read the code of your components. It is also really easy to see the layout, or how components are plugged or combined with each other.</li>
<li> React can be rendered on the server-side. So you can easily use it in the Ruby on Rails too. </li>
<li> It is easy to test (easier than the traditional JavaScript or JQuery where you have to test the code in the Developer Tools) and it can easily be integrated with tools like jest which can make testing painless.</li>
<li> It ensures readability and makes maintainability easier.</li>
<li> It can be used with any framework such as Backbone.js, Angular.js, as it is only a view layer.</li>
</ul>

=== Dynamic Rendering ===
A client-side dynamic web page processes the web page using HTML scripting running in the browser as it loads. JavaScript and other scripting languages determine the way the HTML in the received page is parsed into the Document Object Model, or DOM, that represents the loaded web page. The same client-side techniques can then dynamically update or change the DOM in the same way.

Shown below is an example of a dynamically rendered webpage. The user is able to enter values, which are reflected in the view immediately after submission, without any redirection or reloading of the webpage. You can also see the timer running on the page, which demonstrates the ability to dynamically update variable values inside the view.

[[File:Giphy.gif|centre]]

== Assignment Creation ==
=== Current Implementation ===
The assignment creation view is currently implemented mostly in HTML and some data validations are done using JQuery. This implementation does not support dynamic view rendering which is essential to improving the user interface and contributing to the fluidity of the overall experience. For example, If the user wants to create a new assignment, clicking the new assignment link will generate a server request and the new view is rendered (url is changed). After filling up all the details required for the assignment creation, save link will again generate a server request which will make the database entry and again render a new view.

<div style="width:100%;float:left;">
<div style="width:45%;float:left;margin: 5px 5px 5px 5px;">
[[image:FinalProj pic222.png]]<br><br>
</div>
<div style="width:45%;float:left;margin: 5px 5px 5px 5px;">
[[image:FinalProj pic1.png]]
</div>
</div>

=== Proposed Solution ===

In the revised implementation, clicking on the <i>New Assignment</i> link generates a drop-down window, which contains the form for creating a new assignment. This form contains the same fields as the original form.<br/>
In addition, we have added data validations for two fields. The name of the assignment cannot be left blank, and the 'submission directory' field cannot be left blank or contain any special characters. If either of these conditions is violated, an error message is displayed to the user. Furthermore, these validations are done in the client-side itself, removing the need for a server request to validate the data.
Submitting the form will create a database entry and close the form.

[[image:FinalProj pic88.png|center]]

====Changed files====
*apps/assets/javascripts/tree_display.jsx.erb
*apps/controllers/assignments_controller.rb
*apps/controllers/tree_display_controller.rb

=====Details=====
We created a new React class NewAssignmentForm which dynamically creates and displays the form for New assignment. This class the following methods:
getInitialState function(){} - Here we identify the form parameters that will be sent to the database when a new assignment is created.
handleNameChange function(e){} - The following methods get triggered on change of the form fields and capture/update the state variables
handleCourseChange: function(e){} -//-
handleSubChange: function(e){} -//-
handleDescChange: function(e){} -//-
handleTeamChange: function(e){} -//-
handleQuizChange: function(e){} -//-
handleDeadlineChange: function(e){} -//-
handleReviewsChange: function(e){} -//-
handleCalibrationChange: function(e){} -//-
handleAvailabilityChange: function(e){} -//-
handleReputationChange: function(e){} -//-

directoryValidate: function(e){} - this method validates that there is valid directory entered
nameValidate: function(e){} - this method validates that a valid project name isentered

handleCreateAssignment: function(e) {} - this method sends ajax request with the parameters from the filled form.

handleGetCourses: function() {} - this method is triggered when a course selection drop down is clicked. It sends a jQuery request and gets all the courses based on the instructor role

render: function(){} - this method renders the form components

In assignment_controller.rb we edited create method:

@assignment_form.assignment.instructor_id = current_user.id -- We now pass current instructor to the assignment form.

In tree_display_controller.rb we added new method:

def get_courses_node_ng -- This method returns the course list array of hashes based on the instructor chosen. This logic is similar to the helper method course_options

====Testing plan====

1. Log in as an instructor and check that creating a new assignment works as expected<br>
2. Log in as an instructor and check that the assignment could be created successfully and all the entered options have been preserved

== Editing Assignment ==
=== Current Implementation ===
Similar to New assignment creation page Edit page does not support dynamic view rendering which is essential to improving the user interface and contributing to the fluidity of the overall experience. For example, If the user wants to edit the name of the assignment or change number of slots they have to click edit button. It will generate a server request and the new view is rendered (url is changed). After filling out all the details that changed, save link will again generate a server request which will make the database entry and again render a new view.

<div style="width:100%;float:left;">
<div style="width:45%;float:left;margin-right:2%;">
[[image:FinalProj pic55.png]]
</div>
<div style="width:45%;float:left;margin-left:2%;">
[[image:FinalProj pic66.png]]
</div>
</div>

=== Proposed Solution ===
In the revised implementation, the main edit table will be dynamically updatable. Saving the details will make the database entry. Except for the database update, all the processing is done on the client side itself, leading to a decrease in the number of server requests.<br>

[[image:FinalProj pic77.png|center]]

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

====Testing plan====
1. Log in as an instructor and check that editing an assignment works as expected<br>
2. Log in as an instructor and check that an assignment could be successfully edited and all the existing functionality is preserved<br>
==References==
#[https://facebook.github.io/react/ ReactJS by Facebook Code]
#[https://www.airpair.com/reactjs/posts/reactjs-a-guide-for-rails-developers ReactJS for Ruby on Rails]
#[https://github.com/expertiza/expertiza Expertiza on GitHub]
#[http://expertiza.ncsu.edu/ The live Expertiza website]
#[http://wiki.expertiza.ncsu.edu/index.php/Main_Page Expertiza wiki]

CSC/ECE 517 Fall 2016 E1691 ConvertAssignmentCreationFormtoReactJS

2016-12-02T18:56:51Z

Onam:

= E1691 Convert Assignment Creation Form to ReactJS =

This a page to describe a final project for ECE517. In this project we will be converting Assignment creation form to ReactJS.

==Expertiza==
Expertiza is an Open Source Software project developed by NC State University, funded by the National Science Foundation. It allows the instructor to create assignments as well as modify existing assignments. Students can signup for topics in an assignment and can submit articles, codes, web-sites etc. It is a web application built on Ruby on Rails framework. It also allows students to review the submissions that have been made other students.

== React JS ==
ReactJS is an open source JavaScript library, used to provide a view for data rendered as HTML.It is maintained by Facebook, Instagram and a community of individual developers and corporations. React was created by Jordan Walke, a software engineer at Facebook. He was influenced by XHP, an HTML component framework for PHP. It was first deployed on Facebook's newsfeed in 2011 and later on Instagram.com in 2012. It was open-sourced at JSConf US in May 2013.

=== Advantages of ReactJS ===
<ul>
<li> It is easy to know how a component is rendered, you just look at the render function. This render function basically implements html <i>divs</i>.</li>
<li> JSX is a faster, safer and easer JavaScript which makes it easy to read the code of your components. It is also really easy to see the layout, or how components are plugged or combined with each other.</li>
<li> React can be rendered on the server-side. So you can easily use it in the Ruby on Rails too. </li>
<li> It is easy to test (easier than the traditional JavaScript or JQuery where you have to test the code in the Developer Tools) and it can easily be integrated with tools like jest which can make testing painless.</li>
<li> It ensures readability and makes maintainability easier.</li>
<li> It can be used with any framework such as Backbone.js, Angular.js, as it is only a view layer.</li>
</ul>

=== Dynamic Rendering ===
A client-side dynamic web page processes the web page using HTML scripting running in the browser as it loads. JavaScript and other scripting languages determine the way the HTML in the received page is parsed into the Document Object Model, or DOM, that represents the loaded web page. The same client-side techniques can then dynamically update or change the DOM in the same way.

Shown below is an example of a dynamically rendered webpage. The user is able to enter values, which are reflected in the view immediately after submission, without any redirection or reloading of the webpage. You can also see the timer running on the page, which demonstrates the ability to dynamically update variable values inside the view.

[[File:Giphy.gif|centre]]

== Assignment Creation ==
=== Current Implementation ===
The assignment creation view is currently implemented mostly in HTML and some data validations are done using JQuery. This implementation does not support dynamic view rendering which is essential to improving the user interface and contributing to the fluidity of the overall experience. For example, If the user wants to create a new assignment, clicking the new assignment link will generate a server request and the new view is rendered (url is changed). After filling up all the details required for the assignment creation, save link will again generate a server request which will make the database entry and again render a new view.

<div style="width:100%;float:left;">
<div style="width:45%;float:left;margin: 5px 5px 5px 5px;">
[[image:FinalProj pic222.png]]<br><br>
</div>
<div style="width:45%;float:left;margin: 5px 5px 5px 5px;">
[[image:FinalProj pic1.png]]
</div>
</div>

=== Proposed Solution ===

In the revised implementation, clicking on the <i>New Assignment</i> link generates a drop-down window, which contains the form for creating a new assignment. This form contains the same fields as the original form.<br/>
In addition, we have added data validations for two fields. The name of the assignment cannot be left blank, and the 'submission directory' field cannot be left blank or contain any special characters. If either of these conditions is violated, an error message is displayed to the user. Furthermore, these validations are done in the client-side itself, removing the need for a server request to validate the data.
Submitting the form will create a database entry and close the form.

[[image:FinalProj pic88.png|center]]

====Changed files====
*apps/assets/javascripts/tree_display.jsx.erb
*apps/controllers/assignments_controller.rb
*apps/controllers/tree_display_controller.rb

=====Details=====
We created a new React class NewAssignmentForm which dynamically creates and displays the form for New assignment. This class the following methods:
getInitialState function(){} - Here we identify the form parameters that will be sent to the database when a new assignment is created.
handleNameChange function(e){} - The following methods get triggered on change of the form fields and capture/update the state variables
handleCourseChange: function(e){} -//-
handleSubChange: function(e){} -//-
handleDescChange: function(e){} -//-
handleTeamChange: function(e){} -//-
handleQuizChange: function(e){} -//-
handleDeadlineChange: function(e){} -//-
handleReviewsChange: function(e){} -//-
handleCalibrationChange: function(e){} -//-
handleAvailabilityChange: function(e){} -//-
handleReputationChange: function(e){} -//-

directoryValidate: function(e){} - this method validates that there is valid directory entered
nameValidate: function(e){} - this method validates that a valid project name isentered

handleCreateAssignment: function(e) {} - this method sends ajax request with the parameters from the filled form.

handleGetCourses: function() {} - this method is triggered when a course selection drop down is clicked. It sends a jQuery request and gets all the courses based on the instructor role

render: function(){} - this method renders the form components

In assignment_controller.rb we edited create method:

@assignment_form.assignment.instructor_id = current_user.id -- We now pass current instructor is to the assignment form.

In tree_display_controller.rb we added new method:

def get_courses_node_ng -- This method returns the course list based on the instructor chosen. This logic is similar to the helper method course_options

====Testing plan====

1. Log in as an instructor and check that creating a new assignment works as expected<br>
2. Log in as an instructor and check that the assignment could be created successfully and all the entered options have been preserved

== Editing Assignment ==
=== Current Implementation ===
Similar to New assignment creation page Edit page does not support dynamic view rendering which is essential to improving the user interface and contributing to the fluidity of the overall experience. For example, If the user wants to edit the name of the assignment or change number of slots they have to click edit button. It will generate a server request and the new view is rendered (url is changed). After filling out all the details that changed, save link will again generate a server request which will make the database entry and again render a new view.

<div style="width:100%;float:left;">
<div style="width:45%;float:left;margin-right:2%;">
[[image:FinalProj pic55.png]]
</div>
<div style="width:45%;float:left;margin-left:2%;">
[[image:FinalProj pic66.png]]
</div>
</div>

=== Proposed Solution ===
In the revised implementation, the main edit table will be dynamically updatable. Saving the details will make the database entry. Except for the database update, all the processing is done on the client side itself, leading to a decrease in the number of server requests.<br>

[[image:FinalProj pic77.png|center]]

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

====Testing plan====
1. Log in as an instructor and check that editing an assignment works as expected<br>
2. Log in as an instructor and check that an assignment could be successfully edited and all the existing functionality is preserved<br>
==References==
#[https://facebook.github.io/react/ ReactJS by Facebook Code]
#[https://www.airpair.com/reactjs/posts/reactjs-a-guide-for-rails-developers ReactJS for Ruby on Rails]
#[https://github.com/expertiza/expertiza Expertiza on GitHub]
#[http://expertiza.ncsu.edu/ The live Expertiza website]
#[http://wiki.expertiza.ncsu.edu/index.php/Main_Page Expertiza wiki]

CSC/ECE 517 Fall 2016 E1691 ConvertAssignmentCreationFormtoReactJS

2016-12-02T18:23:35Z

Onam:

= E1691 Convert Assignment Creation Form to ReactJS =

This a page to describe a final project for ECE517. In this project we will be converting Assignment creation form to ReactJS.

==Expertiza==
Expertiza is an Open Source Software project developed by NC State University, funded by the National Science Foundation. It allows the instructor to create assignments as well as modify existing assignments. Students can signup for topics in an assignment and can submit articles, codes, web-sites etc. It is a web application built on Ruby on Rails framework. It also allows students to review the submissions that have been made other students.

== React JS ==
ReactJS is an open source JavaScript library, used to provide a view for data rendered as HTML.It is maintained by Facebook, Instagram and a community of individual developers and corporations. React was created by Jordan Walke, a software engineer at Facebook. He was influenced by XHP, an HTML component framework for PHP. It was first deployed on Facebook's newsfeed in 2011 and later on Instagram.com in 2012. It was open-sourced at JSConf US in May 2013.

=== Advantages of ReactJS ===
<ul>
<li> It is easy to know how a component is rendered, you just look at the render function. This render function basically implements html <i>divs</i>.</li>
<li> JSX is a faster, safer and easer JavaScript which makes it easy to read the code of your components. It is also really easy to see the layout, or how components are plugged or combined with each other.</li>
<li> React can be rendered on the server-side. So you can easily use it in the Ruby on Rails too. </li>
<li> It is easy to test (easier than the traditional JavaScript or JQuery where you have to test the code in the Developer Tools) and it can easily be integrated with tools like jest which can make testing painless.</li>
<li> It ensures readability and makes maintainability easier.</li>
<li> It can be used with any framework such as Backbone.js, Angular.js, as it is only a view layer.</li>
</ul>

=== Dynamic Rendering ===
A client-side dynamic web page processes the web page using HTML scripting running in the browser as it loads. JavaScript and other scripting languages determine the way the HTML in the received page is parsed into the Document Object Model, or DOM, that represents the loaded web page. The same client-side techniques can then dynamically update or change the DOM in the same way.

Shown below is an example of a dynamically rendered webpage. The user is able to enter values, which are reflected in the view immediately after submission, without any redirection or reloading of the webpage. You can also see the timer running on the page, which demonstrates the ability to dynamically update variable values inside the view.

[[File:Giphy.gif|centre]]

== Assignment Creation ==
=== Current Implementation ===
The assignment creation view is currently implemented mostly in HTML and some data validations are done using JQuery. This implementation does not support dynamic view rendering which is essential to improving the user interface and contributing to the fluidity of the overall experience. For example, If the user wants to create a new assignment, clicking the new assignment link will generate a server request and the new view is rendered (url is changed). After filling up all the details required for the assignment creation, save link will again generate a server request which will make the database entry and again render a new view.

<div style="width:100%;float:left;">
<div style="width:45%;float:left;margin: 5px 5px 5px 5px;">
[[image:FinalProj pic222.png]]<br><br>
</div>
<div style="width:45%;float:left;margin: 5px 5px 5px 5px;">
[[image:FinalProj pic1.png]]
</div>
</div>

=== Proposed Solution ===

In the revised implementation, clicking on the <i>New Assignment</i> link generates a drop-down window, which contains the form for creating a new assignment. This form contains the same fields as the original form.<br/>
In addition, we have added data validations for two fields. The name of the assignment cannot be left blank, and the 'submission directory' field cannot be left blank or contain any special characters. If either of these conditions is violated, an error message is displayed to the user. Furthermore, these validations are done in the client-side itself, removing the need for a server request to validate the data.
Submitting the form will create a database entry and close the form.

[[image:FinalProj pic88.png|center]]

====Changed files====
*apps/assets/javascripts/tree_display.jsx.erb
*apps/controllers/assignments_controller.rb
*apps/controllers/tree_display_controller.rb

=====Details=====
We created a new React class NewAssignmentForm which dynamically creates and displays the form for New assignment. This class the following methods:
getInitialState function(){} - Here we identify the form parameters that will be sent to the database when a new assignment is created.
handleNameChange function(e){} - The following methods get triggered on change of the form fields and capture/update the state variables
handleCourseChange: function(e){} -//-
handleSubChange: function(e){} -//-
handleDescChange: function(e){} -//-
handleTeamChange: function(e){} -//-
handleQuizChange: function(e){} -//-
handleDeadlineChange: function(e){} -//-
handleReviewsChange: function(e){} -//-
handleCalibrationChange: function(e){} -//-
handleAvailabilityChange: function(e){} -//-
handleReputationChange: function(e){} -//-

directoryValidate: function(e){} - this method validates that there is valid directory entered
nameValidate: function(e){} - this method validates that a valid project name isentered

handleCreateAssignment: function(e) {} - this method sends ajax request with the parameters from the filled form.

handleGetCourses: function() {} - this method is triggered when a course selection drop down is clicked. It sends a jQuery request and gets all the courses based on the instructor role

render: function(){} - this method renders the form components

====Testing plan====

1. Log in as an instructor and check that creating a new assignment works as expected<br>
2. Log in as an instructor and check that the assignment could be created successfully and all the entered options have been preserved

== Editing Assignment ==
=== Current Implementation ===
Similar to New assignment creation page Edit page does not support dynamic view rendering which is essential to improving the user interface and contributing to the fluidity of the overall experience. For example, If the user wants to edit the name of the assignment or change number of slots they have to click edit button. It will generate a server request and the new view is rendered (url is changed). After filling out all the details that changed, save link will again generate a server request which will make the database entry and again render a new view.

<div style="width:100%;float:left;">
<div style="width:45%;float:left;margin-right:2%;">
[[image:FinalProj pic55.png]]
</div>
<div style="width:45%;float:left;margin-left:2%;">
[[image:FinalProj pic66.png]]
</div>
</div>

=== Proposed Solution ===
In the revised implementation, the main edit table will be dynamically updatable. Saving the details will make the database entry. Except for the database update, all the processing is done on the client side itself, leading to a decrease in the number of server requests.<br>

[[image:FinalProj pic77.png|center]]

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

====Testing plan====
1. Log in as an instructor and check that editing an assignment works as expected<br>
2. Log in as an instructor and check that an assignment could be successfully edited and all the existing functionality is preserved<br>
==References==
#[https://facebook.github.io/react/ ReactJS by Facebook Code]
#[https://www.airpair.com/reactjs/posts/reactjs-a-guide-for-rails-developers ReactJS for Ruby on Rails]
#[https://github.com/expertiza/expertiza Expertiza on GitHub]
#[http://expertiza.ncsu.edu/ The live Expertiza website]
#[http://wiki.expertiza.ncsu.edu/index.php/Main_Page Expertiza wiki]

File:FinalProj pic88.png

2016-12-02T17:26:40Z

Onam: uploaded a new version of "File:FinalProj pic88.png"

CSC/ECE 517 Fall 2016 E1691 ConvertAssignmentCreationFormtoReactJS

2016-12-02T17:25:19Z

Onam:

= E1691 Convert Assignment Creation Form to ReactJS =

This a page to describe a final project for ECE517. In this project we will be converting Assignment creation form to ReactJS.

==Expertiza==
Expertiza is an Open Source Software project developed by NC State University, funded by the National Science Foundation. It allows the instructor to create assignments as well as modify existing assignments. Students can signup for topics in an assignment and can submit articles, codes, web-sites etc. It is a web application built on Ruby on Rails framework. It also allows students to review the submissions that have been made other students.

== React JS ==
ReactJS is an open source JavaScript library, used to provide a view for data rendered as HTML.It is maintained by Facebook, Instagram and a community of individual developers and corporations. React was created by Jordan Walke, a software engineer at Facebook. He was influenced by XHP, an HTML component framework for PHP. It was first deployed on Facebook's newsfeed in 2011 and later on Instagram.com in 2012. It was open-sourced at JSConf US in May 2013.

=== Advantages of ReactJS ===
<ul>
<li> It is easy to know how a component is rendered, you just look at the render function. This render function basically implements html <i>divs</i>.</li>
<li> JSX is a faster, safer and easer JavaScript which makes it easy to read the code of your components. It is also really easy to see the layout, or how components are plugged or combined with each other.</li>
<li> React can be rendered on the server-side. So you can easily use it in the Ruby on Rails too. </li>
<li> It is easy to test (easier than the traditional JavaScript or JQuery where you have to test the code in the Developer Tools) and it can easily be integrated with tools like jest which can make testing painless.</li>
<li> It ensures readability and makes maintainability easier.</li>
<li> It can be used with any framework such as Backbone.js, Angular.js, as it is only a view layer.</li>
</ul>

=== Dynamic Rendering ===
A client-side dynamic web page processes the web page using HTML scripting running in the browser as it loads. JavaScript and other scripting languages determine the way the HTML in the received page is parsed into the Document Object Model, or DOM, that represents the loaded web page. The same client-side techniques can then dynamically update or change the DOM in the same way.

Shown below is an example of a dynamically rendered webpage. The user is able to enter values, which are reflected in the view immediately after submission, without any redirection or reloading of the webpage. You can also see the timer running on the page, which demonstrates the ability to dynamically update variable values inside the view.

[[File:Giphy.gif|centre]]

== Assignment Creation ==
=== Current Implementation ===
The assignment creation view is currently implemented mostly in HTML and some data validations are done using JQuery. This implementation does not support dynamic view rendering which is essential to improving the user interface and contributing to the fluidity of the overall experience. For example, If the user wants to create a new assignment, clicking the new assignment link will generate a server request and the new view is rendered (url is changed). After filling up all the details required for the assignment creation, save link will again generate a server request which will make the database entry and again render a new view.

<div style="width:100%;float:left;">
<div style="width:45%;float:left;margin: 5px 5px 5px 5px;">
[[image:FinalProj pic222.png]]<br><br>
</div>
<div style="width:45%;float:left;margin: 5px 5px 5px 5px;">
[[image:FinalProj pic1.png]]
</div>
</div>

=== Proposed Solution ===

In the revised implementation, clicking on the <i>New Assignment</i> link generates a drop-down window, which contains the form for creating a new assignment. This form contains the same fields as the original form.<br/>
In addition, we have added data validations for two fields. The name of the assignment cannot be left blank, and the 'submission directory' field cannot be left blank or contain any special characters. If either of these conditions is violated, an error message is displayed to the user. Furthermore, these validations are done in the client-side itself, removing the need for a server request to validate the data.
Submitting the form will create a database entry and close the form.

[[image:FinalProj pic88.png|center]]

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

====Testing plan====

1. Log in as an instructor and check that creating a new assignment works as expected<br>
2. Log in as an instructor and check that the assignment could be created successfully and all the entered options have been preserved

== Editing Assignment ==
=== Current Implementation ===
Similar to New assignment creation page Edit page does not support dynamic view rendering which is essential to improving the user interface and contributing to the fluidity of the overall experience. For example, If the user wants to edit the name of the assignment or change number of slots they have to click edit button. It will generate a server request and the new view is rendered (url is changed). After filling out all the details that changed, save link will again generate a server request which will make the database entry and again render a new view.

<div style="width:100%;float:left;">
<div style="width:45%;float:left;margin-right:2%;">
[[image:FinalProj pic55.png]]
</div>
<div style="width:45%;float:left;margin-left:2%;">
[[image:FinalProj pic66.png]]
</div>
</div>

=== Proposed Solution ===
In the revised implementation, the main edit table will be dynamically updatable. Saving the details will make the database entry. Except for the database update, all the processing is done on the client side itself, leading to a decrease in the number of server requests.<br>

[[image:FinalProj pic77.png|center]]

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

====Testing plan====
1. Log in as an instructor and check that editing an assignment works as expected<br>
2. Log in as an instructor and check that an assignment could be successfully edited and all the existing functionality is preserved<br>
==References==
#[https://facebook.github.io/react/ ReactJS by Facebook Code]
#[https://www.airpair.com/reactjs/posts/reactjs-a-guide-for-rails-developers ReactJS for Ruby on Rails]
#[https://github.com/expertiza/expertiza Expertiza on GitHub]
#[http://expertiza.ncsu.edu/ The live Expertiza website]
#[http://wiki.expertiza.ncsu.edu/index.php/Main_Page Expertiza wiki]

File:FinalProj pic88.png

2016-12-02T17:21:43Z

Onam:

CSC/ECE 517 Fall 2016 E1691 ConvertAssignmentCreationFormtoReactJS

2016-12-02T16:47:57Z

Onam: /* Files to be changed */

= E1691 Convert Assignment Creation Form to ReactJS =

This a page to describe a final project for ECE517. In this project we will be converting Assignment creation form to ReactJS.

==Expertiza==
Expertiza is an Open Source Software project developed by NC State University, funded by the National Science Foundation. It allows the instructor to create assignments as well as modify existing assignments. Students can signup for topics in an assignment and can submit articles, codes, web-sites etc. It is a web application built on Ruby on Rails framework. It also allows students to review the submissions that have been made other students.

== React JS ==
ReactJS is an open source JavaScript library, used to provide a view for data rendered as HTML.It is maintained by Facebook, Instagram and a community of individual developers and corporations. React was created by Jordan Walke, a software engineer at Facebook. He was influenced by XHP, an HTML component framework for PHP. It was first deployed on Facebook's newsfeed in 2011 and later on Instagram.com in 2012. It was open-sourced at JSConf US in May 2013.

=== Advantages of ReactJS ===
<ul>
<li> It is easy to know how a component is rendered, you just look at the render function. This render function basically implements html <i>divs</i>.</li>
<li> JSX is a faster, safer and easer JavaScript which makes it easy to read the code of your components. It is also really easy to see the layout, or how components are plugged or combined with each other.</li>
<li> React can be rendered on the server-side. So you can easily use it in the Ruby on Rails too. </li>
<li> It is easy to test (easier than the traditional JavaScript or JQuery where you have to test the code in the Developer Tools) and it can easily be integrated with tools like jest which can make testing painless.</li>
<li> It ensures readability and makes maintainability easier.</li>
<li> It can be used with any framework such as Backbone.js, Angular.js, as it is only a view layer.</li>
</ul>

=== Dynamic Rendering ===
A client-side dynamic web page processes the web page using HTML scripting running in the browser as it loads. JavaScript and other scripting languages determine the way the HTML in the received page is parsed into the Document Object Model, or DOM, that represents the loaded web page. The same client-side techniques can then dynamically update or change the DOM in the same way.

Shown below is an example of a dynamically rendered webpage. The user is able to enter values, which are reflected in the view immediately after submission, without any redirection or reloading of the webpage. You can also see the timer running on the page, which demonstrates the ability to dynamically update variable values inside the view.

[[File:Giphy.gif|centre]]

== Assignment Creation ==
=== Current Implementation ===
The assignment creation view is currently implemented mostly in HTML and some data validations are done using JQuery. This implementation does not support dynamic view rendering which is essential to improving the user interface and contributing to the fluidity of the overall experience. For example, If the user wants to create a new assignment, clicking the new assignment link will generate a server request and the new view is rendered (url is changed). After filling up all the details required for the assignment creation, save link will again generate a server request which will make the database entry and again render a new view.

<div style="width:100%;float:left;">
<div style="width:45%;float:left;margin: 5px 5px 5px 5px;">
[[image:FinalProj pic222.png]]<br><br>
</div>
<div style="width:45%;float:left;margin: 5px 5px 5px 5px;">
[[image:FinalProj pic1.png]]
</div>
</div>

=== Proposed Solution ===

In the revised implementation, clicking on the <i>New Assignment</i> link will generate a popup window. This window will be generated in the same view (The URL remains unchanged) and will contain the same fields and options as the original form. Saving the details will make the database entry and close the popup window. Except for the database update, all the processing is done on the client side itself, leading to a decrease in the number of server requests.

[[image:FinalProj pic44.png|center]]

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

====Testing plan====

1. Log in as an instructor and check that creating a new assignment works as expected<br>
2. Log in as an instructor and check that the assignment could be created successfully and all the entered options have been preserved

== Editing Assignment ==
=== Current Implementation ===
Similar to New assignment creation page Edit page does not support dynamic view rendering which is essential to improving the user interface and contributing to the fluidity of the overall experience. For example, If the user wants to edit the name of the assignment or change number of slots they have to click edit button. It will generate a server request and the new view is rendered (url is changed). After filling out all the details that changed, save link will again generate a server request which will make the database entry and again render a new view.

<div style="width:100%;float:left;">
<div style="width:45%;float:left;margin-right:2%;">
[[image:FinalProj pic55.png]]
</div>
<div style="width:45%;float:left;margin-left:2%;">
[[image:FinalProj pic66.png]]
</div>
</div>

=== Proposed Solution ===
In the revised implementation, the main edit table will be dynamically updatable. Saving the details will make the database entry. Except for the database update, all the processing is done on the client side itself, leading to a decrease in the number of server requests.<br>

[[image:FinalProj pic77.png|center]]

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

====Testing plan====
1. Log in as an instructor and check that editing an assignment works as expected<br>
2. Log in as an instructor and check that an assignment could be successfully edited and all the existing functionality is preserved<br>
==References==
#[https://facebook.github.io/react/ ReactJS by Facebook Code]
#[https://www.airpair.com/reactjs/posts/reactjs-a-guide-for-rails-developers ReactJS for Ruby on Rails]
#[https://github.com/expertiza/expertiza Expertiza on GitHub]
#[http://expertiza.ncsu.edu/ The live Expertiza website]
#[http://wiki.expertiza.ncsu.edu/index.php/Main_Page Expertiza wiki]

CSC/ECE 517 Fall 2016 E1691 ConvertAssignmentCreationFormtoReactJS

2016-11-14T19:17:35Z

Onam:

File:FinalProj pic77.png

2016-11-14T19:16:36Z

Onam:

File:FinalProj pic66.png

2016-11-14T19:11:47Z

Onam: uploaded a new version of "File:FinalProj pic66.png"

File:FinalProj pic55.png

2016-11-14T19:11:31Z

Onam: uploaded a new version of "File:FinalProj pic55.png"

CSC/ECE 517 Fall 2016 E1691 ConvertAssignmentCreationFormtoReactJS

2016-11-14T19:10:25Z

Onam:

CSC/ECE 517 Fall 2016 E1691 ConvertAssignmentCreationFormtoReactJS

2016-11-14T19:09:22Z

Onam: /* Proposed Solution */

CSC/ECE 517 Fall 2016 E1691 ConvertAssignmentCreationFormtoReactJS

2016-11-14T19:06:57Z

Onam:

File:FinalProj pic55.png

2016-11-14T19:06:51Z

Onam: uploaded a new version of "File:FinalProj pic55.png"

File:FinalProj pic55.png

2016-11-14T19:06:10Z

Onam: uploaded a new version of "File:FinalProj pic55.png"

File:FinalProj pic66.png

2016-11-14T19:05:52Z

Onam: uploaded a new version of "File:FinalProj pic66.png"

CSC/ECE 517 Fall 2016 E1691 ConvertAssignmentCreationFormtoReactJS

2016-11-14T19:04:08Z

Onam: /* Current Implementation */

File:FinalProj pic66.png

2016-11-14T19:01:20Z

Onam:

File:FinalProj pic55.png

2016-11-14T19:01:11Z

Onam:

CSC/ECE 517 Fall 2016 E1691 ConvertAssignmentCreationFormtoReactJS

2016-11-14T19:00:12Z

Onam: /* Current Implementation */

File:FinalProj pic222.png

2016-11-14T18:59:36Z

Onam:

CSC/ECE 517 Fall 2016 E1691 ConvertAssignmentCreationFormtoReactJS

2016-11-14T04:40:30Z

Onam:

CSC/ECE 517 Fall 2016 E1691 ConvertAssignmentCreationFormtoReactJS

2016-11-14T04:35:52Z

Onam: Undo revision 105574 by Onam (talk)

CSC/ECE 517 Fall 2016 E1691 ConvertAssignmentCreationFormtoReactJS

2016-11-14T04:35:21Z

Onam:

CSC/ECE 517 Fall 2016 E1691 ConvertAssignmentCreationFormtoReactJS

2016-11-13T05:04:50Z

Onam:

File:FinalProj pic44.png

2016-11-13T05:01:25Z

Onam: uploaded a new version of "File:FinalProj pic44.png"

CSC/ECE 517 Fall 2016 E1691 ConvertAssignmentCreationFormtoReactJS

2016-11-13T05:00:25Z

Onam: /* Proposed Solution */

CSC/ECE 517 Fall 2016 E1691 ConvertAssignmentCreationFormtoReactJS

2016-11-13T04:59:41Z

Onam: /* Current Implementation */

File:FinalProj pic44.png

2016-11-13T04:58:32Z

Onam:

File:FinalProj pic22.png

2016-11-13T04:58:23Z

Onam:

File:FinalProj pic4.png

2016-11-13T04:55:20Z

Onam: uploaded a new version of "File:FinalProj pic4.png"

File:FinalProj pic2.png

2016-11-13T04:55:04Z

Onam: uploaded a new version of "File:FinalProj pic2.png"

File:FinalProj pic2.png

2016-11-13T04:54:46Z

Onam: uploaded a new version of "File:FinalProj pic2.png"

File:FinalProj pic4.png

2016-11-13T04:46:46Z

Onam:

File:FinalProj pic2.png

2016-11-13T04:46:32Z

Onam:

CSC/ECE 517 Fall 2016 E1691 ConvertAssignmentCreationFormtoReactJS

2016-11-04T18:33:51Z

Onam:

== E1691 Convert Assignment Creation Form to ReactJS ==

This a page to describe a final project for ECE517. In this project we will be converting Assignment creation form to ReactJS.

===React JS===
ReactJS is an open source JavaScript library

===Current implementation===
The assignment creating page view is as follows.
[[File:FinalProj pic1.png]]

Currently it is implemented fully in HTML which hard to read and it is not very dynamic.

===Proposed solution===

==References==
*https://facebook.github.io/react/

CSC/ECE 517 Fall 2016 E1691 ConvertAssignmentCreationFormtoReactJS

2016-11-04T18:32:35Z

Onam: /* Current implementation */

CSC/ECE 517 Fall 2016 E1691 ConvertAssignmentCreationFormtoReactJS

2016-11-04T17:50:15Z

Onam:

== E1691 Convert Assignment Creation Form to ReactJS ==

This a page to describe a final project for ECE517. In this project we will be converting Assignment creation form to ReactJS.

===React JS===
ReactJS is an open source JavaScript library

===Current implementation===
The assignment creating page view is as follows.
[[File:FinalProj pic1.png]]

Currently it is implemented fully in HTML.

==References==
*https://facebook.github.io/react/

File:FinalProj pic1.png

2016-11-04T17:46:21Z

Onam:

CSC/ECE 517 Fall 2016 E1691 ConvertAssignmentCreationFormtoReactJS

2016-11-04T17:39:43Z

Onam: Created page with "== E1691 Convert Assignment Creation Form to ReactJS == This a page to describe a final project for ECE517. In this project we will be converting Assignment creation form to Rea..."

CSC/ECE 517 Fall 2016/E1656. Improve imports/screenshots

2016-11-03T22:22:05Z

Onam: /* Test Example */

==Ordering of Imported Fields (Issue 110)==
====Test Example====

1. Log in as instructor6

[[File:OSS1656 picture1.png]]

2. Select Manage Assignments then create teams

[[File:OSS1656 picture2.png]]

3. Create Test team and add two users as shown

[[File:OSS1656 picture3.png]]

4. Create an import file import_team with the Test team and three users, make sure that order of columns is not as default. Team member 3 is first and Team name is last.

[[File:OSS1656 picture4.png]]

5.Set up import page, set the drop down for columns to match what csv and pick the right file to import.

[[File:OSS1656 picture5.png]]

6. Check that the third user was properly added.

[[File:OSS1656 picture6.png]]

File:OSS1656 picture6.png

2016-11-03T22:18:55Z

Onam:

File:OSS1656 picture5.png

2016-11-03T22:18:48Z

Onam:

File:OSS1656 picture4.png

2016-11-03T22:18:39Z

Onam:

File:OSS1656 picture3.png

2016-11-03T22:18:30Z

Onam: