<?xml version="1.0"?>
<feed xmlns="http://www.w3.org/2005/Atom" xml:lang="en">
	<id>https://wiki.expertiza.ncsu.edu/api.php?action=feedcontributions&amp;feedformat=atom&amp;user=Anbhatta</id>
	<title>Expertiza_Wiki - User contributions [en]</title>
	<link rel="self" type="application/atom+xml" href="https://wiki.expertiza.ncsu.edu/api.php?action=feedcontributions&amp;feedformat=atom&amp;user=Anbhatta"/>
	<link rel="alternate" type="text/html" href="https://wiki.expertiza.ncsu.edu/index.php?title=Special:Contributions/Anbhatta"/>
	<updated>2026-05-16T01:00:02Z</updated>
	<subtitle>User contributions</subtitle>
	<generator>MediaWiki 1.41.0</generator>
	<entry>
		<id>https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Spring_2020/E2022_Allow_reviewer_to_say_review_can_be_shown_to_class_as_an_example&amp;diff=133036</id>
		<title>CSC/ECE 517 Spring 2020/E2022 Allow reviewer to say review can be shown to class as an example</title>
		<link rel="alternate" type="text/html" href="https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Spring_2020/E2022_Allow_reviewer_to_say_review_can_be_shown_to_class_as_an_example&amp;diff=133036"/>
		<updated>2020-04-08T20:10:19Z</updated>

		<summary type="html">&lt;p&gt;Anbhatta: /* Test Plan */&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&lt;br /&gt;
== Introduction ==&lt;br /&gt;
&lt;br /&gt;
[http://wiki.expertiza.ncsu.edu/index.php/Expertiza_documentation Expertiza] is an open source web application project based on Ruby on rails framework. Expertiza allows instructors to add assignments and students to upload their submissions. Students can form teams through expertiza for group projects. Students can also peer review the assignments after the submission deadline.&lt;br /&gt;
&lt;br /&gt;
== Problem Statement ==&lt;br /&gt;
&lt;br /&gt;
It is about adding a new feature in Expertiza which enable students to learn from seeing examples of good reviews, something like the one from Eli Review. However, the desired feature is expected to differ in the following ways:&lt;br /&gt;
&lt;br /&gt;
1. Students should be able to see an entire review, both text and ratings, not just a single comment.&lt;br /&gt;
&lt;br /&gt;
2. The student view should not show the name of the reviewer or the reviewee. The views of power users such as TA, instructor, admin should show these names. Note that this functionality is the same as in the current views that show reviews. So we can just use response/view&lt;br /&gt;
&lt;br /&gt;
== Design ==&lt;br /&gt;
&lt;br /&gt;
=== Approach ===&lt;br /&gt;
&lt;br /&gt;
1. We append a column to the response representing their respective status. The following table explains the significance of each value:&lt;br /&gt;
&lt;br /&gt;
{| class=&amp;quot;wikitable&amp;quot;&lt;br /&gt;
! Status &lt;br /&gt;
! Explanation of the value &lt;br /&gt;
|-&lt;br /&gt;
| PRIVATE || Default, private&lt;br /&gt;
|-&lt;br /&gt;
| PUBLIC || Public (selected by the student but has not been selected as a sample review by the instructors.&lt;br /&gt;
|-&lt;br /&gt;
| PUBLISH || Selected as a sample by the instructors.&lt;br /&gt;
|-&lt;br /&gt;
|}&lt;br /&gt;
&lt;br /&gt;
=== Features === &lt;br /&gt;
&lt;br /&gt;
'''1. Student's Consent:'''  &lt;br /&gt;
In each review assignment, there will be a checkbox that says &amp;quot;I agree to share this review anonymously as an example to the entire class&amp;quot; then students can decide to check this box or not just before they submit reviews. Similarly, the student can revert it back to 'private' anytime. This could be implemented by the simple addition of a checkbox in '''response.html.erb''' and set a &amp;quot;status&amp;quot; field to “public”of the Response object via a controller method, preferably &amp;quot;create&amp;quot;.&lt;br /&gt;
&lt;br /&gt;
'''2. Schema:''' Update the schema with the above column changes via migrations&lt;br /&gt;
&lt;br /&gt;
'''3. Instructor's Selection:''' The instructor can select from among the &amp;quot;public&amp;quot; reviews and decides which to make visible to other students doing a particular assignment, i.e. all participants in that assignment. And this will set the “status” field to “selected”. &lt;br /&gt;
Specifically, the instructor first goes to “View review report” and clicks on one team name (in the “Team reviewed” column). Then in the popup/team_users_popup page we need to add a button (better put it at top right) named “make this review an example”. If this review has already been shown as an example, the button should be “remove this review from examples” instead.&lt;br /&gt;
&lt;br /&gt;
'''4. List of Sample Reviews: ''' A participant can see these &amp;quot;exemplary&amp;quot; reviews by going to &amp;quot;Others' work&amp;quot; for the assignment in question, and clicking on one or more links that say, e.g., &amp;quot;Sample review&amp;quot;. And it should be shown just below the title “Review for ...”. It could be implemented on the '''student_reviews/list.html.erb'''.&lt;br /&gt;
&lt;br /&gt;
'''5. Mapping of Reviews and Assignment:'''' Note that although only participants in that assignment of the current course can see those reviews, the assignment that the reviews are taken from doesn't need to be an assignment for the current course. It could be an assignment from a previous course. This would enable students working on OSS Project to see OSS Project reviews from a previous semester. One idea is that when clicking to “make this review an example”, it will link to a page where you can select an assignment to which you have access (the same as the list of “Assignment” in the tree_display),  then the example review will be shown to all participants of that specific assignment. We also need to do the same thing for “remove this review from examples”&lt;br /&gt;
Since we already have a '''response_maps''' table, we can add a column to map it with a specific assignment. This may/may not need a change in key constraints for the table. We plan to resolve them accordingly.&lt;br /&gt;
&lt;br /&gt;
'''6. MVC Setup:''' We would need to create new partials in various views, and possibly a helper for response_controller.rb. We could achieve that by creating a MVC setup for the entire flow.&lt;br /&gt;
&lt;br /&gt;
=== UML Diagram ===&lt;br /&gt;
* Use Case -&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
[[Image:UseCase.png]]&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
'''Power Users:''' Instructors, TAs, Admins and Super Admins&lt;br /&gt;
&lt;br /&gt;
=== Proposed code changes ===&lt;br /&gt;
&lt;br /&gt;
1. Adding two columns 'status' and 'selected' in responses table. Changes will happen in db/schema.rb&lt;br /&gt;
&lt;br /&gt;
2. Adding a checkbox to select whether reviews could be shown as an example in the response views. (/app/views/response/response.html.erb)&lt;br /&gt;
&lt;br /&gt;
3. On selecting the checkbox, update the status field in responses table in response controller. (/app/controllers/response_controller.rb) &lt;br /&gt;
&lt;br /&gt;
4. To allow instructor to select among the public reviews make changes in /app/views/popup/team_users_popup.html.haml&lt;br /&gt;
&lt;br /&gt;
5. To enable students to see the example reviews, make changes in the views of student_review. (/app/views/student_review/list.html.erb)&lt;br /&gt;
&lt;br /&gt;
== Test Plan ==&lt;br /&gt;
&lt;br /&gt;
Our test plan includes testing through rspec tests and through GUI.&lt;br /&gt;
&lt;br /&gt;
'''As a Power User (TA/Instructor/Admin/Super Admin)'''&lt;br /&gt;
# Log in&lt;br /&gt;
# Click on Manage-&amp;gt;Assignments&lt;br /&gt;
# Displays a list of Assignments&lt;br /&gt;
# Click View Report/Review for a particular assignment.&lt;br /&gt;
# Displays a list of reviews submitted by students.&lt;br /&gt;
# Click on any review in &amp;quot;team reviewed&amp;quot; column for a particular student.&lt;br /&gt;
# Displays the summary of reviews submitted by that student, with a &amp;quot;Make as sample&amp;quot; button on the right of every review.&lt;br /&gt;
# Click on &amp;quot;Make as sample&amp;quot; for the intended reviews, which opens a popup that displays a list of all assignments that are a part of the instructor's courses.&lt;br /&gt;
# From this list select all assignments for which the review has to be shown as a sample.&lt;br /&gt;
# Click on 'Submit' after selection (this closes the popup).&lt;br /&gt;
# Navigate to view reviews of that particular assignment and click on &amp;quot;Sample Reviews&amp;quot;.&lt;br /&gt;
# A new page is opened that lists out all the sample reviews of the assignment.&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
'''As a Student'''&lt;br /&gt;
# Log in.&lt;br /&gt;
# Click on Assignments&lt;br /&gt;
# List of assignments is displayed.&lt;br /&gt;
# Click on any assignment for which the review has to be submitted.&lt;br /&gt;
# Assignment task page is displayed.&lt;br /&gt;
# Click on &amp;quot;Other's work&amp;quot; to open the reviews summary page (at /student_review).&lt;br /&gt;
# Below the heading &amp;quot;Reviews for ...&amp;quot;, click on the &amp;quot;Show sample reviews&amp;quot; link.&lt;br /&gt;
# This opens a page where the student can view all sample reviews for that assignment.&lt;br /&gt;
&lt;br /&gt;
== Resources ==&lt;br /&gt;
Repository link: https://github.com/SujalAhrodia/expertiza&lt;br /&gt;
&lt;br /&gt;
== Team ==&lt;br /&gt;
&lt;br /&gt;
Mentor: Dr. Ed Gehringer (efg@ncsu.edu)&lt;br /&gt;
&lt;br /&gt;
Ayush Khot (akhot@ncsu.edu) &amp;lt;br&amp;gt; &lt;br /&gt;
Akanksha Bhattacharya (anbhatta@ncsu.edu) &amp;lt;br&amp;gt; &lt;br /&gt;
Jasmine Madonna Sabarimuthu (jsabari@ncsu.edu) &amp;lt;br&amp;gt; &lt;br /&gt;
Sujal (ssujal@ncsu.edu)&lt;/div&gt;</summary>
		<author><name>Anbhatta</name></author>
	</entry>
	<entry>
		<id>https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Spring_2020/E2022_Allow_reviewer_to_say_review_can_be_shown_to_class_as_an_example&amp;diff=133035</id>
		<title>CSC/ECE 517 Spring 2020/E2022 Allow reviewer to say review can be shown to class as an example</title>
		<link rel="alternate" type="text/html" href="https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Spring_2020/E2022_Allow_reviewer_to_say_review_can_be_shown_to_class_as_an_example&amp;diff=133035"/>
		<updated>2020-04-08T20:10:01Z</updated>

		<summary type="html">&lt;p&gt;Anbhatta: /* Test Plan */&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&lt;br /&gt;
== Introduction ==&lt;br /&gt;
&lt;br /&gt;
[http://wiki.expertiza.ncsu.edu/index.php/Expertiza_documentation Expertiza] is an open source web application project based on Ruby on rails framework. Expertiza allows instructors to add assignments and students to upload their submissions. Students can form teams through expertiza for group projects. Students can also peer review the assignments after the submission deadline.&lt;br /&gt;
&lt;br /&gt;
== Problem Statement ==&lt;br /&gt;
&lt;br /&gt;
It is about adding a new feature in Expertiza which enable students to learn from seeing examples of good reviews, something like the one from Eli Review. However, the desired feature is expected to differ in the following ways:&lt;br /&gt;
&lt;br /&gt;
1. Students should be able to see an entire review, both text and ratings, not just a single comment.&lt;br /&gt;
&lt;br /&gt;
2. The student view should not show the name of the reviewer or the reviewee. The views of power users such as TA, instructor, admin should show these names. Note that this functionality is the same as in the current views that show reviews. So we can just use response/view&lt;br /&gt;
&lt;br /&gt;
== Design ==&lt;br /&gt;
&lt;br /&gt;
=== Approach ===&lt;br /&gt;
&lt;br /&gt;
1. We append a column to the response representing their respective status. The following table explains the significance of each value:&lt;br /&gt;
&lt;br /&gt;
{| class=&amp;quot;wikitable&amp;quot;&lt;br /&gt;
! Status &lt;br /&gt;
! Explanation of the value &lt;br /&gt;
|-&lt;br /&gt;
| PRIVATE || Default, private&lt;br /&gt;
|-&lt;br /&gt;
| PUBLIC || Public (selected by the student but has not been selected as a sample review by the instructors.&lt;br /&gt;
|-&lt;br /&gt;
| PUBLISH || Selected as a sample by the instructors.&lt;br /&gt;
|-&lt;br /&gt;
|}&lt;br /&gt;
&lt;br /&gt;
=== Features === &lt;br /&gt;
&lt;br /&gt;
'''1. Student's Consent:'''  &lt;br /&gt;
In each review assignment, there will be a checkbox that says &amp;quot;I agree to share this review anonymously as an example to the entire class&amp;quot; then students can decide to check this box or not just before they submit reviews. Similarly, the student can revert it back to 'private' anytime. This could be implemented by the simple addition of a checkbox in '''response.html.erb''' and set a &amp;quot;status&amp;quot; field to “public”of the Response object via a controller method, preferably &amp;quot;create&amp;quot;.&lt;br /&gt;
&lt;br /&gt;
'''2. Schema:''' Update the schema with the above column changes via migrations&lt;br /&gt;
&lt;br /&gt;
'''3. Instructor's Selection:''' The instructor can select from among the &amp;quot;public&amp;quot; reviews and decides which to make visible to other students doing a particular assignment, i.e. all participants in that assignment. And this will set the “status” field to “selected”. &lt;br /&gt;
Specifically, the instructor first goes to “View review report” and clicks on one team name (in the “Team reviewed” column). Then in the popup/team_users_popup page we need to add a button (better put it at top right) named “make this review an example”. If this review has already been shown as an example, the button should be “remove this review from examples” instead.&lt;br /&gt;
&lt;br /&gt;
'''4. List of Sample Reviews: ''' A participant can see these &amp;quot;exemplary&amp;quot; reviews by going to &amp;quot;Others' work&amp;quot; for the assignment in question, and clicking on one or more links that say, e.g., &amp;quot;Sample review&amp;quot;. And it should be shown just below the title “Review for ...”. It could be implemented on the '''student_reviews/list.html.erb'''.&lt;br /&gt;
&lt;br /&gt;
'''5. Mapping of Reviews and Assignment:'''' Note that although only participants in that assignment of the current course can see those reviews, the assignment that the reviews are taken from doesn't need to be an assignment for the current course. It could be an assignment from a previous course. This would enable students working on OSS Project to see OSS Project reviews from a previous semester. One idea is that when clicking to “make this review an example”, it will link to a page where you can select an assignment to which you have access (the same as the list of “Assignment” in the tree_display),  then the example review will be shown to all participants of that specific assignment. We also need to do the same thing for “remove this review from examples”&lt;br /&gt;
Since we already have a '''response_maps''' table, we can add a column to map it with a specific assignment. This may/may not need a change in key constraints for the table. We plan to resolve them accordingly.&lt;br /&gt;
&lt;br /&gt;
'''6. MVC Setup:''' We would need to create new partials in various views, and possibly a helper for response_controller.rb. We could achieve that by creating a MVC setup for the entire flow.&lt;br /&gt;
&lt;br /&gt;
=== UML Diagram ===&lt;br /&gt;
* Use Case -&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
[[Image:UseCase.png]]&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
'''Power Users:''' Instructors, TAs, Admins and Super Admins&lt;br /&gt;
&lt;br /&gt;
=== Proposed code changes ===&lt;br /&gt;
&lt;br /&gt;
1. Adding two columns 'status' and 'selected' in responses table. Changes will happen in db/schema.rb&lt;br /&gt;
&lt;br /&gt;
2. Adding a checkbox to select whether reviews could be shown as an example in the response views. (/app/views/response/response.html.erb)&lt;br /&gt;
&lt;br /&gt;
3. On selecting the checkbox, update the status field in responses table in response controller. (/app/controllers/response_controller.rb) &lt;br /&gt;
&lt;br /&gt;
4. To allow instructor to select among the public reviews make changes in /app/views/popup/team_users_popup.html.haml&lt;br /&gt;
&lt;br /&gt;
5. To enable students to see the example reviews, make changes in the views of student_review. (/app/views/student_review/list.html.erb)&lt;br /&gt;
&lt;br /&gt;
== Test Plan ==&lt;br /&gt;
&lt;br /&gt;
Our test plan includes testing through rspec tests and through GUI.&lt;br /&gt;
&lt;br /&gt;
'''As a Power User (TA/Instructor/Admin/Super Admin)''' (Scenario 1)&lt;br /&gt;
# Log in&lt;br /&gt;
# Click on Manage-&amp;gt;Assignments&lt;br /&gt;
# Displays a list of Assignments&lt;br /&gt;
# Click View Report/Review for a particular assignment.&lt;br /&gt;
# Displays a list of reviews submitted by students.&lt;br /&gt;
# Click on any review in &amp;quot;team reviewed&amp;quot; column for a particular student.&lt;br /&gt;
# Displays the summary of reviews submitted by that student, with a &amp;quot;Make as sample&amp;quot; button on the right of every review.&lt;br /&gt;
# Click on &amp;quot;Make as sample&amp;quot; for the intended reviews, which opens a popup that displays a list of all assignments that are a part of the instructor's courses.&lt;br /&gt;
# From this list select all assignments for which the review has to be shown as a sample.&lt;br /&gt;
# Click on 'Submit' after selection (this closes the popup).&lt;br /&gt;
# Navigate to view reviews of that particular assignment and click on &amp;quot;Sample Reviews&amp;quot;.&lt;br /&gt;
# A new page is opened that lists out all the sample reviews of the assignment.&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
'''As a Student (Scenario 1)'''&lt;br /&gt;
# Log in.&lt;br /&gt;
# Click on Assignments&lt;br /&gt;
# List of assignments is displayed.&lt;br /&gt;
# Click on any assignment for which the review has to be submitted.&lt;br /&gt;
# Assignment task page is displayed.&lt;br /&gt;
# Click on &amp;quot;Other's work&amp;quot; to open the reviews summary page (at /student_review).&lt;br /&gt;
# Below the heading &amp;quot;Reviews for ...&amp;quot;, click on the &amp;quot;Show sample reviews&amp;quot; link.&lt;br /&gt;
# This opens a page where the student can view all sample reviews for that assignment.&lt;br /&gt;
&lt;br /&gt;
== Resources ==&lt;br /&gt;
Repository link: https://github.com/SujalAhrodia/expertiza&lt;br /&gt;
&lt;br /&gt;
== Team ==&lt;br /&gt;
&lt;br /&gt;
Mentor: Dr. Ed Gehringer (efg@ncsu.edu)&lt;br /&gt;
&lt;br /&gt;
Ayush Khot (akhot@ncsu.edu) &amp;lt;br&amp;gt; &lt;br /&gt;
Akanksha Bhattacharya (anbhatta@ncsu.edu) &amp;lt;br&amp;gt; &lt;br /&gt;
Jasmine Madonna Sabarimuthu (jsabari@ncsu.edu) &amp;lt;br&amp;gt; &lt;br /&gt;
Sujal (ssujal@ncsu.edu)&lt;/div&gt;</summary>
		<author><name>Anbhatta</name></author>
	</entry>
	<entry>
		<id>https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Spring_2020/E2022_Allow_reviewer_to_say_review_can_be_shown_to_class_as_an_example&amp;diff=133028</id>
		<title>CSC/ECE 517 Spring 2020/E2022 Allow reviewer to say review can be shown to class as an example</title>
		<link rel="alternate" type="text/html" href="https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Spring_2020/E2022_Allow_reviewer_to_say_review_can_be_shown_to_class_as_an_example&amp;diff=133028"/>
		<updated>2020-04-08T19:57:44Z</updated>

		<summary type="html">&lt;p&gt;Anbhatta: /* Test Plan */&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&lt;br /&gt;
== Introduction ==&lt;br /&gt;
&lt;br /&gt;
[http://wiki.expertiza.ncsu.edu/index.php/Expertiza_documentation Expertiza] is an open source web application project based on Ruby on rails framework. Expertiza allows instructors to add assignments and students to upload their submissions. Students can form teams through expertiza for group projects. Students can also peer review the assignments after the submission deadline.&lt;br /&gt;
&lt;br /&gt;
== Problem Statement ==&lt;br /&gt;
&lt;br /&gt;
It is about adding a new feature in Expertiza which enable students to learn from seeing examples of good reviews, something like the one from Eli Review. However, the desired feature is expected to differ in the following ways:&lt;br /&gt;
&lt;br /&gt;
1. Students should be able to see an entire review, both text and ratings, not just a single comment.&lt;br /&gt;
&lt;br /&gt;
2. The student view should not show the name of the reviewer or the reviewee. The views of power users such as TA, instructor, admin should show these names. Note that this functionality is the same as in the current views that show reviews. So we can just use response/view&lt;br /&gt;
&lt;br /&gt;
== Design ==&lt;br /&gt;
&lt;br /&gt;
=== Approach ===&lt;br /&gt;
&lt;br /&gt;
1. We append a column to the response representing their respective status. The following table explains the significance of each value:&lt;br /&gt;
&lt;br /&gt;
{| class=&amp;quot;wikitable&amp;quot;&lt;br /&gt;
! Status &lt;br /&gt;
! Explanation of the value &lt;br /&gt;
|-&lt;br /&gt;
| PRIVATE || Default, private&lt;br /&gt;
|-&lt;br /&gt;
| PUBLIC || Public (selected by the student but has not been selected as a sample review by the instructors.&lt;br /&gt;
|-&lt;br /&gt;
| PUBLISH || Selected as a sample by the instructors.&lt;br /&gt;
|-&lt;br /&gt;
|}&lt;br /&gt;
&lt;br /&gt;
=== Features === &lt;br /&gt;
&lt;br /&gt;
'''1. Student's Consent:'''  &lt;br /&gt;
In each review assignment, there will be a checkbox that says &amp;quot;I agree to share this review anonymously as an example to the entire class&amp;quot; then students can decide to check this box or not just before they submit reviews. Similarly, the student can revert it back to 'private' anytime. This could be implemented by the simple addition of a checkbox in '''response.html.erb''' and set a &amp;quot;status&amp;quot; field to “public”of the Response object via a controller method, preferably &amp;quot;create&amp;quot;.&lt;br /&gt;
&lt;br /&gt;
'''2. Schema:''' Update the schema with the above column changes via migrations&lt;br /&gt;
&lt;br /&gt;
'''3. Instructor's Selection:''' The instructor can select from among the &amp;quot;public&amp;quot; reviews and decides which to make visible to other students doing a particular assignment, i.e. all participants in that assignment. And this will set the “status” field to “selected”. &lt;br /&gt;
Specifically, the instructor first goes to “View review report” and clicks on one team name (in the “Team reviewed” column). Then in the popup/team_users_popup page we need to add a button (better put it at top right) named “make this review an example”. If this review has already been shown as an example, the button should be “remove this review from examples” instead.&lt;br /&gt;
&lt;br /&gt;
'''4. List of Sample Reviews: ''' A participant can see these &amp;quot;exemplary&amp;quot; reviews by going to &amp;quot;Others' work&amp;quot; for the assignment in question, and clicking on one or more links that say, e.g., &amp;quot;Sample review&amp;quot;. And it should be shown just below the title “Review for ...”. It could be implemented on the '''student_reviews/list.html.erb'''.&lt;br /&gt;
&lt;br /&gt;
'''5. Mapping of Reviews and Assignment:'''' Note that although only participants in that assignment of the current course can see those reviews, the assignment that the reviews are taken from doesn't need to be an assignment for the current course. It could be an assignment from a previous course. This would enable students working on OSS Project to see OSS Project reviews from a previous semester. One idea is that when clicking to “make this review an example”, it will link to a page where you can select an assignment to which you have access (the same as the list of “Assignment” in the tree_display),  then the example review will be shown to all participants of that specific assignment. We also need to do the same thing for “remove this review from examples”&lt;br /&gt;
Since we already have a '''response_maps''' table, we can add a column to map it with a specific assignment. This may/may not need a change in key constraints for the table. We plan to resolve them accordingly.&lt;br /&gt;
&lt;br /&gt;
'''6. MVC Setup:''' We would need to create new partials in various views, and possibly a helper for response_controller.rb. We could achieve that by creating a MVC setup for the entire flow.&lt;br /&gt;
&lt;br /&gt;
=== UML Diagram ===&lt;br /&gt;
* Use Case -&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
[[Image:UseCase.png]]&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
'''Power Users:''' Instructors, TAs, Admins and Super Admins&lt;br /&gt;
&lt;br /&gt;
=== Proposed code changes ===&lt;br /&gt;
&lt;br /&gt;
1. Adding two columns 'status' and 'selected' in responses table. Changes will happen in db/schema.rb&lt;br /&gt;
&lt;br /&gt;
2. Adding a checkbox to select whether reviews could be shown as an example in the response views. (/app/views/response/response.html.erb)&lt;br /&gt;
&lt;br /&gt;
3. On selecting the checkbox, update the status field in responses table in response controller. (/app/controllers/response_controller.rb) &lt;br /&gt;
&lt;br /&gt;
4. To allow instructor to select among the public reviews make changes in /app/views/popup/team_users_popup.html.haml&lt;br /&gt;
&lt;br /&gt;
5. To enable students to see the example reviews, make changes in the views of student_review. (/app/views/student_review/list.html.erb)&lt;br /&gt;
&lt;br /&gt;
== Test Plan ==&lt;br /&gt;
&lt;br /&gt;
Our test plan includes testing through rspec tests and through GUI.&lt;br /&gt;
&lt;br /&gt;
'''As a Power User (TA/Instructor/Admin/Super Admin)''' (Scenario 1)&lt;br /&gt;
# Log in&lt;br /&gt;
# Click on Manage-&amp;gt;Assignments&lt;br /&gt;
# Displays a list of Assignments&lt;br /&gt;
# Click View Report/Review for a particular assignment.&lt;br /&gt;
# Displays a list of reviews submitted by students.&lt;br /&gt;
# Click on any review in &amp;quot;team reviewed&amp;quot; column for a particular student.&lt;br /&gt;
# Displays the summary of reviews submitted by that student, with a &amp;quot;Make as sample&amp;quot; button on the right of every review.&lt;br /&gt;
# Click on &amp;quot;Make as sample&amp;quot; for the intended reviews, which opens a popup that displays a list of all assignments that are a part of the instructor's courses.&lt;br /&gt;
# From this list select all assignments for which the review has to be shown as a sample.&lt;br /&gt;
# Click on 'Submit' after selection (this closes the popup).&lt;br /&gt;
# Navigate to view reviews of that particular assignment and click on &amp;quot;Sample Reviews&amp;quot;.&lt;br /&gt;
# A new page is opened that lists out all the sample reviews of the assignment.&lt;br /&gt;
&lt;br /&gt;
'''As a Power User (TA/Instructor/Admin/Super Admin)''' (Scenario 2)&lt;br /&gt;
# Log in&lt;br /&gt;
# Click on Manage-&amp;gt;Assignments&lt;br /&gt;
# Displays a list of Assignments&lt;br /&gt;
# Click Edit for a particular assignment.&lt;br /&gt;
# Click on the review tab.&lt;br /&gt;
# Select an assignment from the dropdown&lt;br /&gt;
# Select a reviewer from the second dropdown.&lt;br /&gt;
# Select a reviewee from the third dropdown.&lt;br /&gt;
# Click 'Add' button to add the selected review to be shown as a sample for this assignment.&lt;br /&gt;
# Add as many sample reviews as you want in the same way.&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
'''As a Student (Scenario 1)'''&lt;br /&gt;
# Log in.&lt;br /&gt;
# Click on Assignments&lt;br /&gt;
# List of assignments is displayed.&lt;br /&gt;
# Click on any assignment for which the review has to be submitted.&lt;br /&gt;
# Assignment task page is displayed.&lt;br /&gt;
# Click on &amp;quot;Other's work&amp;quot; to open the reviews summary page (at /student_review).&lt;br /&gt;
# Below the heading &amp;quot;Reviews for ...&amp;quot;, click on the &amp;quot;Show sample reviews&amp;quot; link.&lt;br /&gt;
# This opens a page where the student can view all sample reviews for that assignment.&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
'''As a Student (Scenario 2)'''&lt;br /&gt;
# Log in.&lt;br /&gt;
# Click on Assignments&lt;br /&gt;
# List of assignments is displayed.&lt;br /&gt;
# Click on any assignment for which the review has to be submitted.&lt;br /&gt;
# Assignment task page is displayed.&lt;br /&gt;
# Click on &amp;quot;Other's work&amp;quot; to open the reviews summary page (at /student_review).&lt;br /&gt;
# Chose to review any of the teams' assignments that are displayed.&lt;br /&gt;
# Select a team for review and fill in the review.&lt;br /&gt;
# Before submitting the review, select the checkbox that says &amp;quot;I agree to share this review anonymously as an example to the entire class&amp;quot;.&lt;br /&gt;
# After clicking on the submit button, the review submitted has been made public.&lt;br /&gt;
&lt;br /&gt;
== Resources ==&lt;br /&gt;
Repository link: https://github.com/SujalAhrodia/expertiza&lt;br /&gt;
&lt;br /&gt;
== Team ==&lt;br /&gt;
&lt;br /&gt;
Mentor: Dr. Ed Gehringer (efg@ncsu.edu)&lt;br /&gt;
&lt;br /&gt;
Ayush Khot (akhot@ncsu.edu) &amp;lt;br&amp;gt; &lt;br /&gt;
Akanksha Bhattacharya (anbhatta@ncsu.edu) &amp;lt;br&amp;gt; &lt;br /&gt;
Jasmine Madonna Sabarimuthu (jsabari@ncsu.edu) &amp;lt;br&amp;gt; &lt;br /&gt;
Sujal (ssujal@ncsu.edu)&lt;/div&gt;</summary>
		<author><name>Anbhatta</name></author>
	</entry>
	<entry>
		<id>https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Spring_2020_-_E2014._Refactor_datetimepicker.js&amp;diff=132285</id>
		<title>CSC/ECE 517 Spring 2020 - E2014. Refactor datetimepicker.js</title>
		<link rel="alternate" type="text/html" href="https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Spring_2020_-_E2014._Refactor_datetimepicker.js&amp;diff=132285"/>
		<updated>2020-03-31T00:59:06Z</updated>

		<summary type="html">&lt;p&gt;Anbhatta: /* RSpec Testing */&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;__TOC__&lt;br /&gt;
&lt;br /&gt;
== '''Abstract''' ==&lt;br /&gt;
Expertiza uses the jquery’s date-time picker widget for setting dates and times on various views. This is absolutely required so that all users select the date and/or time in a specified and fixed format. Instructors need to use it often while setting or modifying deadlines for various assignments in a course. Over the years, different developers used different version and formats of the date-time picker due to which there are inconsistencies across the expertiza project.&lt;br /&gt;
&lt;br /&gt;
== '''Problem Statement''' ==&lt;br /&gt;
The main problem with the date-time picker is that the widget and the date-time formats used across the expertiza project are not consistent. Moreover, the JQuery based date-time UI widget itself is on version 0.8 which is extremely old and no longer consistent with expertiza's looks and feel. The primary task of the refactor was to find, refactor and make the date-time picker consistent at all places while exploring the possibility of updating the date-time picker to a newer version or completely replacing it by another better widget which works in conjunction with modern javascript libraries.&lt;br /&gt;
&lt;br /&gt;
== '''Problem Solution''' ==&lt;br /&gt;
The first step in the approach was to explore the current functionality of existing date time picker. We explored the code base to understand the how 'datetimepicker.js' library was used and its respective compatibility. Simultaneously, we also studied other libraries and gems which could provide a consistent and easy alternative.&lt;br /&gt;
Since the existing library was no longer being maintained (inactive since mid 2015) ([https://github.com/Envek/jquery-datetimepicker-rails]), and the new gem 'bootstrap-datetimepicker' provided a relatively recent and easier implementation. So we decided to pick the latter one and replace the older one.&lt;br /&gt;
&lt;br /&gt;
== '''Process''' ==&lt;br /&gt;
According to our solution, the existing library needed to be replaced by the new gem. The initial exploration phase helped us to extract the files where datetimepicker has been used in the codebase. The gem was included in the GemFile to make it available throughout the project. Further, necessary syntactical changes were made respective to the new gem. Another key point was to realise the use of a specific format at a specific place. For instance, a shorter format was used in pages to make efficient use of space. The following section includes specific files and the changes made in each of them.&lt;br /&gt;
&lt;br /&gt;
== '''Refactors''' ==&lt;br /&gt;
This section discusses the changes implemented as a part of this refactor&lt;br /&gt;
&lt;br /&gt;
==== Installing the required gems ====&lt;br /&gt;
Following gems and its dependencies have been added to the GemFile for bundled installation:&lt;br /&gt;
*[https://rubygems.org/gems/bootstrap3-datetimepicker-rails/versions/4.17.47 Bootstrap3-datetimepicker]&lt;br /&gt;
This gem packages the [https://github.com/Eonasdan/bootstrap-datetimepicker bootstrap-datetime-picker] for the Rails 3.1+ asset pipeline. It is based on bootstrap3 and requires momentjs as a dependency.&lt;br /&gt;
&lt;br /&gt;
*[https://rubygems.org/gems/momentjs-rails/versions/2.9.0 MomentJS-Rails]&lt;br /&gt;
Moment.js is a lightweight javascript date library for parsing, manipulating, and formatting dates. This gems adds the required javascript files to the project which are used by the new Bootstrap3-datetimepicker gem.&lt;br /&gt;
&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt;&lt;br /&gt;
Next, the CSS and javascript file provided by the gems need to be included the asset pipeline by including the following in ''application.js'' and ''application.scss'' file. The screenshots below depict the additions to the respective files:&lt;br /&gt;
&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt;&lt;br /&gt;
[[File: Expertiza1.PNG]]&lt;br /&gt;
&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt;&lt;br /&gt;
[[File: Expertiza2.PNG]]&lt;br /&gt;
&lt;br /&gt;
==== Refactoring Date-Time Picker widget ====&lt;br /&gt;
The existing date-time picker widget was replaced by the new date-time picker in the following views:&lt;br /&gt;
&amp;lt;br /&amp;gt;&amp;lt;br /&amp;gt;&lt;br /&gt;
'''1. Edit and create assignments - ''app/views/assignments/edit/_due_dates.html.erb''''' &amp;lt;br /&amp;gt;&lt;br /&gt;
This contains fields to set the submission and review deadlines for different rounds. The existing JQuery call to the date time picker was replaced by the call to the new widget. Following changes were made to the file:&lt;br /&gt;
&amp;lt;br /&amp;gt;&lt;br /&gt;
'''Before:'''  &lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
jQuery('#datetimepicker_' + element_id).datetimepicker({&lt;br /&gt;
            dateFormat: 'yy/mm/dd',&lt;br /&gt;
            timeFormat: 'HH:mm:ss z',&lt;br /&gt;
            controlType: 'select',&lt;br /&gt;
            timezoneList: [&lt;br /&gt;
                { value: -000, label: 'GMT'},&lt;br /&gt;
                { value: -300, label: 'Eastern'},&lt;br /&gt;
                { value: -360, label: 'Central' },&lt;br /&gt;
                { value: -420, label: 'Mountain' },&lt;br /&gt;
                { value: -480, label: 'Pacific' }&lt;br /&gt;
            ]&lt;br /&gt;
        });&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
'''After:'''  &lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
jQuery('#datetimepicker_' + element_id).datetimepicker({&lt;br /&gt;
            format: 'YYYY/MM/DD hh:mm z',&lt;br /&gt;
            sideBySide: true&lt;br /&gt;
        });&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
'''2. Topic sign up sheet - ''app/views/sign_up_sheet/_due_dates.html.erb''''' &amp;lt;br /&amp;gt;&lt;br /&gt;
This page is used by the instructor to set up the topic sign up page for projects. The form includes a selection of start date and end date for signup. Following changes were made to the file:&lt;br /&gt;
&amp;lt;br /&amp;gt;&lt;br /&gt;
'''Before:''' &lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
$('.datetimepicker').datetimepicker({&lt;br /&gt;
    dateFormat: 'yy/mm/dd',&lt;br /&gt;
    timeFormat: 'HH:mm:ss'&lt;br /&gt;
});&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
'''After:'''  &lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
$('.datetimepicker').datetimepicker({&lt;br /&gt;
    format: 'YYYY/MM/DD HH:mm',&lt;br /&gt;
    sideBySide: true&lt;br /&gt;
});&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&amp;lt;br /&amp;gt;&lt;br /&gt;
'''3. New survey creation - ''app/views/survey_deployment/new.html.erb''''' &amp;lt;br /&amp;gt;&lt;br /&gt;
The page contains the form to allow the creation of new surveys. The survey start and end dates can be set using the form. The old code used two separate inline ''onClick'' event to call the same DateTime picker. Both the calls were replaced by a single jquery call.&lt;br /&gt;
   &lt;br /&gt;
'''Before:'''  &lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
     &amp;lt;tr&amp;gt;&lt;br /&gt;
          &amp;lt;td&amp;gt;&amp;lt;label for=&amp;quot;start_date&amp;quot;&amp;gt;Start Date:&amp;lt;/label&amp;gt;&amp;lt;/td&amp;gt;&lt;br /&gt;
          &amp;lt;td class=&amp;quot;form-inline&amp;quot;&amp;gt;&lt;br /&gt;
               &amp;lt;input type=&amp;quot;text&amp;quot; id=&amp;quot;survey_deployment_start_date&amp;quot; name =&amp;quot;survey_deployment[start_date]&amp;quot; class=&amp;quot;form-control width-250&amp;quot; onClick=&amp;quot;$('#survey_deployment_start_date').datetimepicker()&amp;quot;/&amp;gt;&lt;br /&gt;
          &amp;lt;/td&amp;gt;&lt;br /&gt;
     &amp;lt;/tr&amp;gt;&lt;br /&gt;
&lt;br /&gt;
     &amp;lt;tr&amp;gt;&lt;br /&gt;
          &amp;lt;td&amp;gt;&amp;lt;label for=&amp;quot;end_date&amp;quot;&amp;gt;End Date:&amp;lt;/label&amp;gt;&amp;lt;/td&amp;gt;&lt;br /&gt;
          &amp;lt;td class=&amp;quot;form-inline&amp;quot;&amp;gt;&lt;br /&gt;
               &amp;lt;input type=&amp;quot;text&amp;quot; id=&amp;quot;survey_deployment_end_date&amp;quot; name =&amp;quot;survey_deployment[end_date]&amp;quot; class=&amp;quot;form-control width-250&amp;quot; &lt;br /&gt;
onClick=&amp;quot;$('#survey_deployment_end_date').datetimepicker()&amp;quot;/&amp;gt;&lt;br /&gt;
          &amp;lt;/td&amp;gt;&lt;br /&gt;
     &amp;lt;/tr&amp;gt;&lt;br /&gt;
&amp;lt;/table&amp;gt;&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
'''After:'''  &lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
     &amp;lt;tr&amp;gt;&lt;br /&gt;
          &amp;lt;td&amp;gt;&amp;lt;label for=&amp;quot;start_date&amp;quot;&amp;gt;Start Date:&amp;lt;/label&amp;gt;&amp;lt;/td&amp;gt;&lt;br /&gt;
          &amp;lt;td class=&amp;quot;form-inline&amp;quot;&amp;gt;&lt;br /&gt;
               &amp;lt;input type=&amp;quot;text&amp;quot; id=&amp;quot;survey_deployment_start_date&amp;quot; name =&amp;quot;survey_deployment[start_date]&amp;quot; class=&amp;quot;form-control width-250&amp;quot; /&amp;gt;&lt;br /&gt;
          &amp;lt;/td&amp;gt;&lt;br /&gt;
     &amp;lt;/tr&amp;gt;&lt;br /&gt;
&lt;br /&gt;
     &amp;lt;tr&amp;gt;&lt;br /&gt;
          &amp;lt;td&amp;gt;&amp;lt;label for=&amp;quot;end_date&amp;quot;&amp;gt;End Date:&amp;lt;/label&amp;gt;&amp;lt;/td&amp;gt;&lt;br /&gt;
          &amp;lt;td class=&amp;quot;form-inline&amp;quot;&amp;gt;&lt;br /&gt;
               &amp;lt;input type=&amp;quot;text&amp;quot; id=&amp;quot;survey_deployment_end_date&amp;quot; name =&amp;quot;survey_deployment[end_date]&amp;quot; class=&amp;quot;form-control width-250&amp;quot; /&amp;gt;&lt;br /&gt;
          &amp;lt;/td&amp;gt;&lt;br /&gt;
     &amp;lt;/tr&amp;gt;&lt;br /&gt;
&amp;lt;/table&amp;gt;&lt;br /&gt;
  &amp;lt;script type=&amp;quot;text/javascript&amp;quot;&amp;gt;&lt;br /&gt;
      jQuery('#survey_deployment_start_date, #survey_deployment_end_date').datetimepicker({&lt;br /&gt;
          format: 'YYYY/MM/DD HH:mm',&lt;br /&gt;
          sideBySide: true&lt;br /&gt;
      });&lt;br /&gt;
  &amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&amp;lt;br /&amp;gt;&lt;br /&gt;
'''4. Version logs - ''app/views/sign_up_sheet/_due_dates.html.erb''''' &amp;lt;br /&amp;gt;&lt;br /&gt;
The version logs file which is only accessible to the admins uses the date tie picker to filter the search results using the start and the end date. Following changes were made to the file: &amp;lt;br /&amp;gt;&lt;br /&gt;
&lt;br /&gt;
'''Before:'''  &lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
jQuery('.datetimeklass').datetimepicker({&lt;br /&gt;
            dateFormat: 'yy/mm/dd',&lt;br /&gt;
            timeFormat: 'HH:mm:ss z',&lt;br /&gt;
            controlType: 'select',&lt;br /&gt;
            timezoneList: [&lt;br /&gt;
                { value: -000, label: 'GMT'},&lt;br /&gt;
                { value: -300, label: 'Eastern'},&lt;br /&gt;
                { value: -360, label: 'Central' },&lt;br /&gt;
                { value: -420, label: 'Mountain' },&lt;br /&gt;
                { value: -480, label: 'Pacific' }&lt;br /&gt;
            ]&lt;br /&gt;
        });&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
'''After:'''  &lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
jQuery('.datetimeklass').datetimepicker({&lt;br /&gt;
        format: 'YYYY/MM/DD HH:mm z',&lt;br /&gt;
        sideBySide: true&lt;br /&gt;
    });&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Output ===&lt;br /&gt;
The old jquery based date-time picker was replaced by a new modern bootstrap based date-time picker as shown in the pictures below. The new bootstrap date-time picker widget also has different styles which can be implemented by changing the code as per the documentation [http://eonasdan.github.io/bootstrap-datetimepicker/ here].&lt;br /&gt;
&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt;&lt;br /&gt;
'''Old Date-Time Picker''' &amp;lt;br /&amp;gt;&lt;br /&gt;
[[File: Expertiza3.PNG]]&lt;br /&gt;
&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt;&lt;br /&gt;
'''New Date-Time Picker''' &amp;lt;br /&amp;gt;&lt;br /&gt;
[[File: Expertiza4.PNG]]&lt;br /&gt;
&lt;br /&gt;
== '''Testing''' ==&lt;br /&gt;
=== Test Plan ===&lt;br /&gt;
This refactor was mainly concerned with the date-time picker widget UI. Thus most of the testing was done manually as automated testing cannot be used to test the widget. After refactoring each of the pages using the date-time widget, rigorous testing was done to check if the date-time picker selected the right date in appropriate formats. Automated testing was performed to test the models and controllers which relied on the date-time picker for its correct functioning. Code climate was used to maintain the code quality and Travis CI build checks were properly monitored for each commit.     &lt;br /&gt;
&lt;br /&gt;
=== Manual Testing ===&lt;br /&gt;
The new date-time picker widget was manually tested for correctness using the following manual steps: &amp;lt;br/&amp;gt;&lt;br /&gt;
1. Create and edit assignments &amp;lt;br /&amp;gt;&lt;br /&gt;
Login into instructor account -&amp;gt; Select Manage Assignments -&amp;gt; Click on the plus sign to the right -&amp;gt; Fill in the relevant details -&amp;gt; In the 'due dates' enter the submission and review deadline using the new date time picker widget -&amp;gt; Save -&amp;gt; Check if assignment with proper deadline is being created.&lt;br /&gt;
&amp;lt;br /&amp;gt;&amp;lt;br /&amp;gt;&lt;br /&gt;
2. New survey creation &amp;lt;br /&amp;gt;&lt;br /&gt;
Login into instructor account -&amp;gt; Select Manage assignments -&amp;gt; From the list of assignments select an assignment and select the 'assign survey' action-&amp;gt; Fill in the relevant details -&amp;gt; Enter the survey start and end date using the new date time picker widget -&amp;gt; Save -&amp;gt; Check if the survey is created with proper deadline.&lt;br /&gt;
&amp;lt;br /&amp;gt;&amp;lt;br /&amp;gt;&lt;br /&gt;
3. Version logs &amp;lt;br /&amp;gt;&lt;br /&gt;
Login to the Admin/Super admin account -&amp;gt; Open the version logs page -&amp;gt; Select the proper date range to filter the results -&amp;gt; Click 'search' -&amp;gt; Check if results are getting filtered according to the dates selected.&lt;br /&gt;
&lt;br /&gt;
=== RSpec Testing ===&lt;br /&gt;
To the test the datetimepicker.js functionality, Rspec testing on an untested controller using this gem was performed. &lt;br /&gt;
In versions controller, search functionality uses the new datetimepicker.js gem. This controller is being given access to only admins and super-admins. &lt;br /&gt;
&lt;br /&gt;
The tests check if the datetimepicker.js is correctly used and on the button click the relevant data is returned from database. Also the datetimepicker feature with start date and end date detection should work for both admins and super-admins.&lt;br /&gt;
&amp;lt;br /&amp;gt;&lt;br /&gt;
[[File: Expertiza8.PNG|upright=0.02]] &lt;br /&gt;
&amp;lt;br /&amp;gt;&lt;br /&gt;
[[File: Expertiza12.PNG|upright=0.1]] &lt;br /&gt;
&amp;lt;br/&amp;gt;&lt;br /&gt;
[[File: Expertiza11.PNG|upright=0.05]] &lt;br /&gt;
&amp;lt;br/&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Travis CI Build Testing ===&lt;br /&gt;
Travis-CI Build Test of the beta branch after a refactored function is merged in the beta branch.&lt;br /&gt;
[[File: Expertiza9.PNG]]&lt;br /&gt;
&amp;lt;br /&amp;gt;&amp;lt;br /&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== '''Files changed''' ==&lt;br /&gt;
&lt;br /&gt;
1. GemFile. (https://github.com/expertiza/expertiza/pull/1694/files#diff-8b7db4d5cc4b8f6dc8feb7030baa2478) &amp;lt;br&amp;gt;&lt;br /&gt;
2. GemFile.lock (https://github.com/expertiza/expertiza/pull/1694/files#diff-e79a60dc6b85309ae70a6ea8261eaf95)  &amp;lt;br&amp;gt;&lt;br /&gt;
3. application.js (https://github.com/expertiza/expertiza/pull/1694/files#diff-a9c3bd311eab80c9ebe6a69830f9ad02) &amp;lt;br&amp;gt;&lt;br /&gt;
4. application.scss (https://github.com/expertiza/expertiza/pull/1694/files#diff-f859e2848b07324f808ce1a5ccd9fcba) &amp;lt;br&amp;gt;&lt;br /&gt;
5. assignments/edit/_due_dates.html.erb (https://github.com/expertiza/expertiza/pull/1694/files#diff-540fd2bd6c34b48213716b1dd713733a) &amp;lt;br&amp;gt;&lt;br /&gt;
6. sign_up_sheet/_due_dates.html.erb (https://github.com/expertiza/expertiza/pull/1694/files#diff-7a2dff6c7ee5e0f3f4af03fc13a51a7a) &amp;lt;br&amp;gt;&lt;br /&gt;
7. survey_deployments (https://github.com/expertiza/expertiza/pull/1694/files#diff-d44102ee049545f5ad9a297b7a922e34) &amp;lt;br&amp;gt;&lt;br /&gt;
8. _row_header.html.erb (https://github.com/expertiza/expertiza/pull/1694/files#diff-0defadd3dbc65f90ba975eb0ec963ca0) &amp;lt;br&amp;gt;&lt;br /&gt;
9. search.html.erb (https://github.com/expertiza/expertiza/pull/1694/files#diff-325adffe6f7b1a0ac7400e12a5d99f3d) &amp;lt;br&amp;gt;&lt;br /&gt;
10. factories.rb (https://github.com/expertiza/expertiza/pull/1694/files#diff-3a17ddf9d828caa60f11423f20fb88a9) &amp;lt;br&amp;gt;&lt;br /&gt;
11. versions_search_spec.rb (https://github.com/expertiza/expertiza/pull/1694/files#diff-72f04cc00e26505c570aaecbbe103314) &amp;lt;br&amp;gt;&lt;br /&gt;
12. list.html.erb (https://github.com/expertiza/expertiza/pull/1694/files#diff-0256edc752068f64fd59dc0c260659db) &amp;lt;br&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== '''Useful Links''' ==&lt;br /&gt;
&lt;br /&gt;
'''Github Repo:''' https://github.com/SujalAhrodia/expertiza/tree/beta&lt;br /&gt;
&amp;lt;br&amp;gt;&lt;br /&gt;
'''Pull Request:''' https://github.com/expertiza/expertiza/pull/1694&lt;br /&gt;
&lt;br /&gt;
== '''Team Information''' ==&lt;br /&gt;
&lt;br /&gt;
'''Project Mentor:'''&lt;br /&gt;
&amp;lt;br&amp;gt;Pratik Abhyankar&lt;br /&gt;
&lt;br /&gt;
'''Project Members:'''&amp;lt;br&amp;gt;&lt;br /&gt;
Akanksha Bhattacharyya&amp;lt;br&amp;gt;&lt;br /&gt;
Sahil Papalkar&amp;lt;br&amp;gt;&lt;br /&gt;
Sujal &amp;lt;br&amp;gt;&lt;/div&gt;</summary>
		<author><name>Anbhatta</name></author>
	</entry>
	<entry>
		<id>https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Spring_2020_-_E2014._Refactor_datetimepicker.js&amp;diff=132284</id>
		<title>CSC/ECE 517 Spring 2020 - E2014. Refactor datetimepicker.js</title>
		<link rel="alternate" type="text/html" href="https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Spring_2020_-_E2014._Refactor_datetimepicker.js&amp;diff=132284"/>
		<updated>2020-03-31T00:52:11Z</updated>

		<summary type="html">&lt;p&gt;Anbhatta: /* RSpec Testing */&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;__TOC__&lt;br /&gt;
&lt;br /&gt;
== '''Abstract''' ==&lt;br /&gt;
Expertiza uses the jquery’s date-time picker widget for setting dates and times on various views. This is absolutely required so that all users select the date and/or time in a specified and fixed format. Instructors need to use it often while setting or modifying deadlines for various assignments in a course. Over the years, different developers used different version and formats of the date-time picker due to which there are inconsistencies across the expertiza project.&lt;br /&gt;
&lt;br /&gt;
== '''Problem Statement''' ==&lt;br /&gt;
The main problem with the date-time picker is that the widget and the date-time formats used across the expertiza project are not consistent. Moreover, the JQuery based date-time UI widget itself is on version 0.8 which is extremely old and no longer consistent with expertiza's looks and feel. The primary task of the refactor was to find, refactor and make the date-time picker consistent at all places while exploring the possibility of updating the date-time picker to a newer version or completely replacing it by another better widget which works in conjunction with modern javascript libraries.&lt;br /&gt;
&lt;br /&gt;
== '''Problem Solution''' ==&lt;br /&gt;
The first step in the approach was to explore the current functionality of existing date time picker. We explored the code base to understand the how 'datetimepicker.js' library was used and its respective compatibility. Simultaneously, we also studied other libraries and gems which could provide a consistent and easy alternative.&lt;br /&gt;
Since the existing library was no longer being maintained (inactive since mid 2015) ([https://github.com/Envek/jquery-datetimepicker-rails]), and the new gem 'bootstrap-datetimepicker' provided a relatively recent and easier implementation. So we decided to pick the latter one and replace the older one.&lt;br /&gt;
&lt;br /&gt;
== '''Process''' ==&lt;br /&gt;
According to our solution, the existing library needed to be replaced by the new gem. The initial exploration phase helped us to extract the files where datetimepicker has been used in the codebase. The gem was included in the GemFile to make it available throughout the project. Further, necessary syntactical changes were made respective to the new gem. Another key point was to realise the use of a specific format at a specific place. For instance, a shorter format was used in pages to make efficient use of space. The following section includes specific files and the changes made in each of them.&lt;br /&gt;
&lt;br /&gt;
== '''Refactors''' ==&lt;br /&gt;
This section discusses the changes implemented as a part of this refactor&lt;br /&gt;
&lt;br /&gt;
==== Installing the required gems ====&lt;br /&gt;
Following gems and its dependencies have been added to the GemFile for bundled installation:&lt;br /&gt;
*[https://rubygems.org/gems/bootstrap3-datetimepicker-rails/versions/4.17.47 Bootstrap3-datetimepicker]&lt;br /&gt;
This gem packages the [https://github.com/Eonasdan/bootstrap-datetimepicker bootstrap-datetime-picker] for the Rails 3.1+ asset pipeline. It is based on bootstrap3 and requires momentjs as a dependency.&lt;br /&gt;
&lt;br /&gt;
*[https://rubygems.org/gems/momentjs-rails/versions/2.9.0 MomentJS-Rails]&lt;br /&gt;
Moment.js is a lightweight javascript date library for parsing, manipulating, and formatting dates. This gems adds the required javascript files to the project which are used by the new Bootstrap3-datetimepicker gem.&lt;br /&gt;
&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt;&lt;br /&gt;
Next, the CSS and javascript file provided by the gems need to be included the asset pipeline by including the following in ''application.js'' and ''application.scss'' file. The screenshots below depict the additions to the respective files:&lt;br /&gt;
&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt;&lt;br /&gt;
[[File: Expertiza1.PNG]]&lt;br /&gt;
&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt;&lt;br /&gt;
[[File: Expertiza2.PNG]]&lt;br /&gt;
&lt;br /&gt;
==== Refactoring Date-Time Picker widget ====&lt;br /&gt;
The existing date-time picker widget was replaced by the new date-time picker in the following views:&lt;br /&gt;
&amp;lt;br /&amp;gt;&amp;lt;br /&amp;gt;&lt;br /&gt;
'''1. Edit and create assignments - ''app/views/assignments/edit/_due_dates.html.erb''''' &amp;lt;br /&amp;gt;&lt;br /&gt;
This contains fields to set the submission and review deadlines for different rounds. The existing JQuery call to the date time picker was replaced by the call to the new widget. Following changes were made to the file:&lt;br /&gt;
&amp;lt;br /&amp;gt;&lt;br /&gt;
'''Before:'''  &lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
jQuery('#datetimepicker_' + element_id).datetimepicker({&lt;br /&gt;
            dateFormat: 'yy/mm/dd',&lt;br /&gt;
            timeFormat: 'HH:mm:ss z',&lt;br /&gt;
            controlType: 'select',&lt;br /&gt;
            timezoneList: [&lt;br /&gt;
                { value: -000, label: 'GMT'},&lt;br /&gt;
                { value: -300, label: 'Eastern'},&lt;br /&gt;
                { value: -360, label: 'Central' },&lt;br /&gt;
                { value: -420, label: 'Mountain' },&lt;br /&gt;
                { value: -480, label: 'Pacific' }&lt;br /&gt;
            ]&lt;br /&gt;
        });&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
'''After:'''  &lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
jQuery('#datetimepicker_' + element_id).datetimepicker({&lt;br /&gt;
            format: 'YYYY/MM/DD hh:mm z',&lt;br /&gt;
            sideBySide: true&lt;br /&gt;
        });&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
'''2. Topic sign up sheet - ''app/views/sign_up_sheet/_due_dates.html.erb''''' &amp;lt;br /&amp;gt;&lt;br /&gt;
This page is used by the instructor to set up the topic sign up page for projects. The form includes a selection of start date and end date for signup. Following changes were made to the file:&lt;br /&gt;
&amp;lt;br /&amp;gt;&lt;br /&gt;
'''Before:''' &lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
$('.datetimepicker').datetimepicker({&lt;br /&gt;
    dateFormat: 'yy/mm/dd',&lt;br /&gt;
    timeFormat: 'HH:mm:ss'&lt;br /&gt;
});&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
'''After:'''  &lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
$('.datetimepicker').datetimepicker({&lt;br /&gt;
    format: 'YYYY/MM/DD HH:mm',&lt;br /&gt;
    sideBySide: true&lt;br /&gt;
});&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&amp;lt;br /&amp;gt;&lt;br /&gt;
'''3. New survey creation - ''app/views/survey_deployment/new.html.erb''''' &amp;lt;br /&amp;gt;&lt;br /&gt;
The page contains the form to allow the creation of new surveys. The survey start and end dates can be set using the form. The old code used two separate inline ''onClick'' event to call the same DateTime picker. Both the calls were replaced by a single jquery call.&lt;br /&gt;
   &lt;br /&gt;
'''Before:'''  &lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
     &amp;lt;tr&amp;gt;&lt;br /&gt;
          &amp;lt;td&amp;gt;&amp;lt;label for=&amp;quot;start_date&amp;quot;&amp;gt;Start Date:&amp;lt;/label&amp;gt;&amp;lt;/td&amp;gt;&lt;br /&gt;
          &amp;lt;td class=&amp;quot;form-inline&amp;quot;&amp;gt;&lt;br /&gt;
               &amp;lt;input type=&amp;quot;text&amp;quot; id=&amp;quot;survey_deployment_start_date&amp;quot; name =&amp;quot;survey_deployment[start_date]&amp;quot; class=&amp;quot;form-control width-250&amp;quot; onClick=&amp;quot;$('#survey_deployment_start_date').datetimepicker()&amp;quot;/&amp;gt;&lt;br /&gt;
          &amp;lt;/td&amp;gt;&lt;br /&gt;
     &amp;lt;/tr&amp;gt;&lt;br /&gt;
&lt;br /&gt;
     &amp;lt;tr&amp;gt;&lt;br /&gt;
          &amp;lt;td&amp;gt;&amp;lt;label for=&amp;quot;end_date&amp;quot;&amp;gt;End Date:&amp;lt;/label&amp;gt;&amp;lt;/td&amp;gt;&lt;br /&gt;
          &amp;lt;td class=&amp;quot;form-inline&amp;quot;&amp;gt;&lt;br /&gt;
               &amp;lt;input type=&amp;quot;text&amp;quot; id=&amp;quot;survey_deployment_end_date&amp;quot; name =&amp;quot;survey_deployment[end_date]&amp;quot; class=&amp;quot;form-control width-250&amp;quot; &lt;br /&gt;
onClick=&amp;quot;$('#survey_deployment_end_date').datetimepicker()&amp;quot;/&amp;gt;&lt;br /&gt;
          &amp;lt;/td&amp;gt;&lt;br /&gt;
     &amp;lt;/tr&amp;gt;&lt;br /&gt;
&amp;lt;/table&amp;gt;&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
'''After:'''  &lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
     &amp;lt;tr&amp;gt;&lt;br /&gt;
          &amp;lt;td&amp;gt;&amp;lt;label for=&amp;quot;start_date&amp;quot;&amp;gt;Start Date:&amp;lt;/label&amp;gt;&amp;lt;/td&amp;gt;&lt;br /&gt;
          &amp;lt;td class=&amp;quot;form-inline&amp;quot;&amp;gt;&lt;br /&gt;
               &amp;lt;input type=&amp;quot;text&amp;quot; id=&amp;quot;survey_deployment_start_date&amp;quot; name =&amp;quot;survey_deployment[start_date]&amp;quot; class=&amp;quot;form-control width-250&amp;quot; /&amp;gt;&lt;br /&gt;
          &amp;lt;/td&amp;gt;&lt;br /&gt;
     &amp;lt;/tr&amp;gt;&lt;br /&gt;
&lt;br /&gt;
     &amp;lt;tr&amp;gt;&lt;br /&gt;
          &amp;lt;td&amp;gt;&amp;lt;label for=&amp;quot;end_date&amp;quot;&amp;gt;End Date:&amp;lt;/label&amp;gt;&amp;lt;/td&amp;gt;&lt;br /&gt;
          &amp;lt;td class=&amp;quot;form-inline&amp;quot;&amp;gt;&lt;br /&gt;
               &amp;lt;input type=&amp;quot;text&amp;quot; id=&amp;quot;survey_deployment_end_date&amp;quot; name =&amp;quot;survey_deployment[end_date]&amp;quot; class=&amp;quot;form-control width-250&amp;quot; /&amp;gt;&lt;br /&gt;
          &amp;lt;/td&amp;gt;&lt;br /&gt;
     &amp;lt;/tr&amp;gt;&lt;br /&gt;
&amp;lt;/table&amp;gt;&lt;br /&gt;
  &amp;lt;script type=&amp;quot;text/javascript&amp;quot;&amp;gt;&lt;br /&gt;
      jQuery('#survey_deployment_start_date, #survey_deployment_end_date').datetimepicker({&lt;br /&gt;
          format: 'YYYY/MM/DD HH:mm',&lt;br /&gt;
          sideBySide: true&lt;br /&gt;
      });&lt;br /&gt;
  &amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&amp;lt;br /&amp;gt;&lt;br /&gt;
'''4. Version logs - ''app/views/sign_up_sheet/_due_dates.html.erb''''' &amp;lt;br /&amp;gt;&lt;br /&gt;
The version logs file which is only accessible to the admins uses the date tie picker to filter the search results using the start and the end date. Following changes were made to the file: &amp;lt;br /&amp;gt;&lt;br /&gt;
&lt;br /&gt;
'''Before:'''  &lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
jQuery('.datetimeklass').datetimepicker({&lt;br /&gt;
            dateFormat: 'yy/mm/dd',&lt;br /&gt;
            timeFormat: 'HH:mm:ss z',&lt;br /&gt;
            controlType: 'select',&lt;br /&gt;
            timezoneList: [&lt;br /&gt;
                { value: -000, label: 'GMT'},&lt;br /&gt;
                { value: -300, label: 'Eastern'},&lt;br /&gt;
                { value: -360, label: 'Central' },&lt;br /&gt;
                { value: -420, label: 'Mountain' },&lt;br /&gt;
                { value: -480, label: 'Pacific' }&lt;br /&gt;
            ]&lt;br /&gt;
        });&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
'''After:'''  &lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
jQuery('.datetimeklass').datetimepicker({&lt;br /&gt;
        format: 'YYYY/MM/DD HH:mm z',&lt;br /&gt;
        sideBySide: true&lt;br /&gt;
    });&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Output ===&lt;br /&gt;
The old jquery based date-time picker was replaced by a new modern bootstrap based date-time picker as shown in the pictures below. The new bootstrap date-time picker widget also has different styles which can be implemented by changing the code as per the documentation [http://eonasdan.github.io/bootstrap-datetimepicker/ here].&lt;br /&gt;
&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt;&lt;br /&gt;
'''Old Date-Time Picker''' &amp;lt;br /&amp;gt;&lt;br /&gt;
[[File: Expertiza3.PNG]]&lt;br /&gt;
&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt;&lt;br /&gt;
'''New Date-Time Picker''' &amp;lt;br /&amp;gt;&lt;br /&gt;
[[File: Expertiza4.PNG]]&lt;br /&gt;
&lt;br /&gt;
== '''Testing''' ==&lt;br /&gt;
=== Test Plan ===&lt;br /&gt;
This refactor was mainly concerned with the date-time picker widget UI. Thus most of the testing was done manually as automated testing cannot be used to test the widget. After refactoring each of the pages using the date-time widget, rigorous testing was done to check if the date-time picker selected the right date in appropriate formats. Automated testing was performed to test the models and controllers which relied on the date-time picker for its correct functioning. Code climate was used to maintain the code quality and Travis CI build checks were properly monitored for each commit.     &lt;br /&gt;
&lt;br /&gt;
=== Manual Testing ===&lt;br /&gt;
The new date-time picker widget was manually tested for correctness using the following manual steps: &amp;lt;br/&amp;gt;&lt;br /&gt;
1. Create and edit assignments &amp;lt;br /&amp;gt;&lt;br /&gt;
Login into instructor account -&amp;gt; Select Manage Assignments -&amp;gt; Click on the plus sign to the right -&amp;gt; Fill in the relevant details -&amp;gt; In the 'due dates' enter the submission and review deadline using the new date time picker widget -&amp;gt; Save -&amp;gt; Check if assignment with proper deadline is being created.&lt;br /&gt;
&amp;lt;br /&amp;gt;&amp;lt;br /&amp;gt;&lt;br /&gt;
2. New survey creation &amp;lt;br /&amp;gt;&lt;br /&gt;
Login into instructor account -&amp;gt; Select Manage assignments -&amp;gt; From the list of assignments select an assignment and select the 'assign survey' action-&amp;gt; Fill in the relevant details -&amp;gt; Enter the survey start and end date using the new date time picker widget -&amp;gt; Save -&amp;gt; Check if the survey is created with proper deadline.&lt;br /&gt;
&amp;lt;br /&amp;gt;&amp;lt;br /&amp;gt;&lt;br /&gt;
3. Version logs &amp;lt;br /&amp;gt;&lt;br /&gt;
Login to the Admin/Super admin account -&amp;gt; Open the version logs page -&amp;gt; Select the proper date range to filter the results -&amp;gt; Click 'search' -&amp;gt; Check if results are getting filtered according to the dates selected.&lt;br /&gt;
&lt;br /&gt;
=== RSpec Testing ===&lt;br /&gt;
To the test the datetimepicker.js functionality, Rspec testing on an untested controller using this gem was performed. &lt;br /&gt;
In versions controller, search functionality uses the new datetimepicker.js gem. This controller is being given access to only admins and super-admins. &lt;br /&gt;
&lt;br /&gt;
The tests check if the datetimepicker.js is correctly used and on the button click the relevant data is returned from database. Also the datetimepicker feature with start date and end date detection should work for both admins and super-admins.&lt;br /&gt;
&amp;lt;br /&amp;gt;&lt;br /&gt;
[[File: Expertiza8.PNG]] &lt;br /&gt;
&amp;lt;br /&amp;gt;&lt;br /&gt;
[[File: Expertiza12.PNG]] &lt;br /&gt;
&amp;lt;br/&amp;gt;&lt;br /&gt;
[[File: Expertiza11.PNG]] &lt;br /&gt;
&amp;lt;br/&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Travis CI Build Testing ===&lt;br /&gt;
Travis-CI Build Test of the beta branch after a refactored function is merged in the beta branch.&lt;br /&gt;
[[File: Expertiza9.PNG]]&lt;br /&gt;
&amp;lt;br /&amp;gt;&amp;lt;br /&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== '''Files changed''' ==&lt;br /&gt;
&lt;br /&gt;
1. GemFile. (https://github.com/expertiza/expertiza/pull/1694/files#diff-8b7db4d5cc4b8f6dc8feb7030baa2478) &amp;lt;br&amp;gt;&lt;br /&gt;
2. GemFile.lock (https://github.com/expertiza/expertiza/pull/1694/files#diff-e79a60dc6b85309ae70a6ea8261eaf95)  &amp;lt;br&amp;gt;&lt;br /&gt;
3. application.js (https://github.com/expertiza/expertiza/pull/1694/files#diff-a9c3bd311eab80c9ebe6a69830f9ad02) &amp;lt;br&amp;gt;&lt;br /&gt;
4. application.scss (https://github.com/expertiza/expertiza/pull/1694/files#diff-f859e2848b07324f808ce1a5ccd9fcba) &amp;lt;br&amp;gt;&lt;br /&gt;
5. assignments/edit/_due_dates.html.erb (https://github.com/expertiza/expertiza/pull/1694/files#diff-540fd2bd6c34b48213716b1dd713733a) &amp;lt;br&amp;gt;&lt;br /&gt;
6. sign_up_sheet/_due_dates.html.erb (https://github.com/expertiza/expertiza/pull/1694/files#diff-7a2dff6c7ee5e0f3f4af03fc13a51a7a) &amp;lt;br&amp;gt;&lt;br /&gt;
7. survey_deployments (https://github.com/expertiza/expertiza/pull/1694/files#diff-d44102ee049545f5ad9a297b7a922e34) &amp;lt;br&amp;gt;&lt;br /&gt;
8. _row_header.html.erb (https://github.com/expertiza/expertiza/pull/1694/files#diff-0defadd3dbc65f90ba975eb0ec963ca0) &amp;lt;br&amp;gt;&lt;br /&gt;
9. search.html.erb (https://github.com/expertiza/expertiza/pull/1694/files#diff-325adffe6f7b1a0ac7400e12a5d99f3d) &amp;lt;br&amp;gt;&lt;br /&gt;
10. factories.rb (https://github.com/expertiza/expertiza/pull/1694/files#diff-3a17ddf9d828caa60f11423f20fb88a9) &amp;lt;br&amp;gt;&lt;br /&gt;
11. versions_search_spec.rb (https://github.com/expertiza/expertiza/pull/1694/files#diff-72f04cc00e26505c570aaecbbe103314) &amp;lt;br&amp;gt;&lt;br /&gt;
12. list.html.erb (https://github.com/expertiza/expertiza/pull/1694/files#diff-0256edc752068f64fd59dc0c260659db) &amp;lt;br&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== '''Useful Links''' ==&lt;br /&gt;
&lt;br /&gt;
'''Github Repo:''' https://github.com/SujalAhrodia/expertiza/tree/beta&lt;br /&gt;
&amp;lt;br&amp;gt;&lt;br /&gt;
'''Pull Request:''' https://github.com/expertiza/expertiza/pull/1694&lt;br /&gt;
&lt;br /&gt;
== '''Team Information''' ==&lt;br /&gt;
&lt;br /&gt;
'''Project Mentor:'''&lt;br /&gt;
&amp;lt;br&amp;gt;Pratik Abhyankar&lt;br /&gt;
&lt;br /&gt;
'''Project Members:'''&amp;lt;br&amp;gt;&lt;br /&gt;
Akanksha Bhattacharyya&amp;lt;br&amp;gt;&lt;br /&gt;
Sahil Papalkar&amp;lt;br&amp;gt;&lt;br /&gt;
Sujal &amp;lt;br&amp;gt;&lt;/div&gt;</summary>
		<author><name>Anbhatta</name></author>
	</entry>
	<entry>
		<id>https://wiki.expertiza.ncsu.edu/index.php?title=File:Expertiza12.PNG&amp;diff=132283</id>
		<title>File:Expertiza12.PNG</title>
		<link rel="alternate" type="text/html" href="https://wiki.expertiza.ncsu.edu/index.php?title=File:Expertiza12.PNG&amp;diff=132283"/>
		<updated>2020-03-31T00:50:38Z</updated>

		<summary type="html">&lt;p&gt;Anbhatta: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&lt;/div&gt;</summary>
		<author><name>Anbhatta</name></author>
	</entry>
	<entry>
		<id>https://wiki.expertiza.ncsu.edu/index.php?title=File:Expertiza11.PNG&amp;diff=132282</id>
		<title>File:Expertiza11.PNG</title>
		<link rel="alternate" type="text/html" href="https://wiki.expertiza.ncsu.edu/index.php?title=File:Expertiza11.PNG&amp;diff=132282"/>
		<updated>2020-03-31T00:50:19Z</updated>

		<summary type="html">&lt;p&gt;Anbhatta: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&lt;/div&gt;</summary>
		<author><name>Anbhatta</name></author>
	</entry>
	<entry>
		<id>https://wiki.expertiza.ncsu.edu/index.php?title=File:Testing1.png&amp;diff=132051</id>
		<title>File:Testing1.png</title>
		<link rel="alternate" type="text/html" href="https://wiki.expertiza.ncsu.edu/index.php?title=File:Testing1.png&amp;diff=132051"/>
		<updated>2020-03-24T01:46:42Z</updated>

		<summary type="html">&lt;p&gt;Anbhatta: Anbhatta uploaded a new version of File:Testing1.png&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;testcase code1&lt;/div&gt;</summary>
		<author><name>Anbhatta</name></author>
	</entry>
	<entry>
		<id>https://wiki.expertiza.ncsu.edu/index.php?title=File:Rspec_test.png&amp;diff=132049</id>
		<title>File:Rspec test.png</title>
		<link rel="alternate" type="text/html" href="https://wiki.expertiza.ncsu.edu/index.php?title=File:Rspec_test.png&amp;diff=132049"/>
		<updated>2020-03-24T01:41:17Z</updated>

		<summary type="html">&lt;p&gt;Anbhatta: Anbhatta uploaded a new version of File:Rspec test.png&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&lt;/div&gt;</summary>
		<author><name>Anbhatta</name></author>
	</entry>
	<entry>
		<id>https://wiki.expertiza.ncsu.edu/index.php?title=File:Rspec_test.png&amp;diff=132048</id>
		<title>File:Rspec test.png</title>
		<link rel="alternate" type="text/html" href="https://wiki.expertiza.ncsu.edu/index.php?title=File:Rspec_test.png&amp;diff=132048"/>
		<updated>2020-03-24T01:39:49Z</updated>

		<summary type="html">&lt;p&gt;Anbhatta: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&lt;/div&gt;</summary>
		<author><name>Anbhatta</name></author>
	</entry>
	<entry>
		<id>https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Spring_2020_-_E2014._Refactor_datetimepicker.js&amp;diff=132029</id>
		<title>CSC/ECE 517 Spring 2020 - E2014. Refactor datetimepicker.js</title>
		<link rel="alternate" type="text/html" href="https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Spring_2020_-_E2014._Refactor_datetimepicker.js&amp;diff=132029"/>
		<updated>2020-03-24T01:07:29Z</updated>

		<summary type="html">&lt;p&gt;Anbhatta: /* RSpec Testing */&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;__TOC__&lt;br /&gt;
&lt;br /&gt;
== '''About Expertiza''' ==&lt;br /&gt;
Expertiza is an open-source project based on Ruby on Rails framework. It allows the instructor to create new assignments and customize new or existing assignments. The instructor is allowed to create a list of topics for the students to which they can sign up for. For working on different projects and assignments the students can form teams in Expertiza. Peer review is another feature where students can review other students' submissions. This feature is available in Expertiza. Furthermore, Expertiza supports submission across various document types, including URLs and wiki pages. It is supported by the National Science Foundation.&lt;br /&gt;
&lt;br /&gt;
== '''Abstract''' ==&lt;br /&gt;
Expertiza uses the jquery’s date-time picker widget for setting dates and times on various views. This is absolutely required so that all users select the date and/or time in a specified and fixed format. Instructors need to use it often while setting or modifying deadlines for various assignments in a course. Over the years, different developers used different version and formats of the date-time picker due to which there are inconsistencies across the expertiza project.&lt;br /&gt;
&lt;br /&gt;
== '''Problem Statement''' ==&lt;br /&gt;
The main problem with the date-time picker is that the widget and the date-time formats used across the expertiza project are not consistent. Moreover, the JQuery based date-time UI widget itself is on version 0.8 which is extremely old and no longer consistent with expertiza's looks and feel. The primary task of the refactor was to find, refactor and make the date-time picker consistent at all places while exploring the possibility of updating the date-time picker to a newer version or completely replacing it by another better widget which works in conjunction with modern javascript libraries.&lt;br /&gt;
&lt;br /&gt;
== '''Problem Solution''' ==&lt;br /&gt;
The first step in the approach was to explore the current functionality of existing date time picker. We explored the code base to understand the how 'datetimepicker.js' library was used and its respective compatibility. Simultaneously, we also studied other libraries and gems which could provide a consistent and easy alternative.&lt;br /&gt;
Since the existing library was no longer being maintained (inactive since mid 2015) ([https://github.com/Envek/jquery-datetimepicker-rails]), and the new gem 'bootstrap-datetimepicker' provided a relatively recent and easier implementation. So we decided to pick the latter one and replace the older one.&lt;br /&gt;
&lt;br /&gt;
== '''Process''' ==&lt;br /&gt;
According to our solution, the existing library needed to be replaced by the new gem. The initial exploration phase helped us to extract the files where datetimepicker has been used in the codebase. The gem was included in the GemFile to make it available throughout the project. Further, necessary syntactical changes were made respective to the new gem. Another key point was to realise the use of a specific format at a specific place. For instance, a shorter format was used in pages to make efficient use of space. The following section includes specific files and the changes made in each of them.&lt;br /&gt;
&lt;br /&gt;
== '''Refactors''' ==&lt;br /&gt;
This section discusses the changes implemented as a part of this refactor&lt;br /&gt;
&lt;br /&gt;
==== Installing the required gems ====&lt;br /&gt;
Following gems and its dependencies have been added to the GemFile for bundled installation:&lt;br /&gt;
*[https://rubygems.org/gems/bootstrap3-datetimepicker-rails/versions/4.17.47 Bootstrap3-datetimepicker]&lt;br /&gt;
This gem packages the [https://github.com/Eonasdan/bootstrap-datetimepicker bootstrap-datetime-picker] for the Rails 3.1+ asset pipeline. It is based on bootstrap3 and requires momentjs as a dependency.&lt;br /&gt;
&lt;br /&gt;
*[https://rubygems.org/gems/momentjs-rails/versions/2.9.0 MomentJS-Rails]&lt;br /&gt;
Moment.js is a lightweight javascript date library for parsing, manipulating, and formatting dates. This gems adds the required javascript files to the project which are used by the new Bootstrap3-datetimepicker gem.&lt;br /&gt;
&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt;&lt;br /&gt;
Next, the CSS and javascript file provided by the gems need to be included the asset pipeline by including the following in ''application.js'' and ''application.scss'' file. The screenshots below depict the additions to the respective files:&lt;br /&gt;
&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt;&lt;br /&gt;
[[File: Expertiza1.PNG]]&lt;br /&gt;
&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt;&lt;br /&gt;
[[File: Expertiza2.PNG]]&lt;br /&gt;
&lt;br /&gt;
==== Refactoring Date-Time Picker widget ====&lt;br /&gt;
The existing date-time picker widget was replaced by the new date-time picker in the following views:&lt;br /&gt;
&amp;lt;br /&amp;gt;&amp;lt;br /&amp;gt;&lt;br /&gt;
'''1. Edit and create assignments - ''app/views/assignments/edit/_due_dates.html.erb''''' &amp;lt;br /&amp;gt;&lt;br /&gt;
This contains fields to set the submission and review deadlines for different rounds. The existing JQuery call to the date time picker was replaced by the call to the new widget. Following changes were made to the file:&lt;br /&gt;
&amp;lt;br /&amp;gt;&lt;br /&gt;
'''Before:'''  &lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
jQuery('#datetimepicker_' + element_id).datetimepicker({&lt;br /&gt;
            dateFormat: 'yy/mm/dd',&lt;br /&gt;
            timeFormat: 'HH:mm:ss z',&lt;br /&gt;
            controlType: 'select',&lt;br /&gt;
            timezoneList: [&lt;br /&gt;
                { value: -000, label: 'GMT'},&lt;br /&gt;
                { value: -300, label: 'Eastern'},&lt;br /&gt;
                { value: -360, label: 'Central' },&lt;br /&gt;
                { value: -420, label: 'Mountain' },&lt;br /&gt;
                { value: -480, label: 'Pacific' }&lt;br /&gt;
            ]&lt;br /&gt;
        });&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
'''After:'''  &lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
jQuery('#datetimepicker_' + element_id).datetimepicker({&lt;br /&gt;
            format: 'YYYY/MM/DD hh:mm z',&lt;br /&gt;
            sideBySide: true&lt;br /&gt;
        });&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
'''2. Topic sign up sheet - ''app/views/sign_up_sheet/_due_dates.html.erb''''' &amp;lt;br /&amp;gt;&lt;br /&gt;
This page is used by the instructor to set up the topic sign up page for projects. The form includes a selection of start date and end date for signup. Following changes were made to the file:&lt;br /&gt;
&amp;lt;br /&amp;gt;&lt;br /&gt;
'''Before:''' &lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
$('.datetimepicker').datetimepicker({&lt;br /&gt;
    dateFormat: 'yy/mm/dd',&lt;br /&gt;
    timeFormat: 'HH:mm:ss'&lt;br /&gt;
});&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
'''After:'''  &lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
$('.datetimepicker').datetimepicker({&lt;br /&gt;
    format: 'YYYY/MM/DD HH:mm',&lt;br /&gt;
    sideBySide: true&lt;br /&gt;
});&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&amp;lt;br /&amp;gt;&lt;br /&gt;
'''3. New survey creation - ''app/views/survey_deployment/new.html.erb''''' &amp;lt;br /&amp;gt;&lt;br /&gt;
The page contains the form to allow the creation of new surveys. The survey start and end dates can be set using the form. The old code used two separate inline ''onClick'' event to call the same DateTime picker. Both the calls were replaced by a single jquery call.&lt;br /&gt;
   &lt;br /&gt;
'''Before:'''  &lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
     &amp;lt;tr&amp;gt;&lt;br /&gt;
          &amp;lt;td&amp;gt;&amp;lt;label for=&amp;quot;start_date&amp;quot;&amp;gt;Start Date:&amp;lt;/label&amp;gt;&amp;lt;/td&amp;gt;&lt;br /&gt;
          &amp;lt;td class=&amp;quot;form-inline&amp;quot;&amp;gt;&lt;br /&gt;
               &amp;lt;input type=&amp;quot;text&amp;quot; id=&amp;quot;survey_deployment_start_date&amp;quot; name =&amp;quot;survey_deployment[start_date]&amp;quot; class=&amp;quot;form-control width-250&amp;quot; onClick=&amp;quot;$('#survey_deployment_start_date').datetimepicker()&amp;quot;/&amp;gt;&lt;br /&gt;
          &amp;lt;/td&amp;gt;&lt;br /&gt;
     &amp;lt;/tr&amp;gt;&lt;br /&gt;
&lt;br /&gt;
     &amp;lt;tr&amp;gt;&lt;br /&gt;
          &amp;lt;td&amp;gt;&amp;lt;label for=&amp;quot;end_date&amp;quot;&amp;gt;End Date:&amp;lt;/label&amp;gt;&amp;lt;/td&amp;gt;&lt;br /&gt;
          &amp;lt;td class=&amp;quot;form-inline&amp;quot;&amp;gt;&lt;br /&gt;
               &amp;lt;input type=&amp;quot;text&amp;quot; id=&amp;quot;survey_deployment_end_date&amp;quot; name =&amp;quot;survey_deployment[end_date]&amp;quot; class=&amp;quot;form-control width-250&amp;quot; &lt;br /&gt;
onClick=&amp;quot;$('#survey_deployment_end_date').datetimepicker()&amp;quot;/&amp;gt;&lt;br /&gt;
          &amp;lt;/td&amp;gt;&lt;br /&gt;
     &amp;lt;/tr&amp;gt;&lt;br /&gt;
&amp;lt;/table&amp;gt;&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
'''After:'''  &lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
     &amp;lt;tr&amp;gt;&lt;br /&gt;
          &amp;lt;td&amp;gt;&amp;lt;label for=&amp;quot;start_date&amp;quot;&amp;gt;Start Date:&amp;lt;/label&amp;gt;&amp;lt;/td&amp;gt;&lt;br /&gt;
          &amp;lt;td class=&amp;quot;form-inline&amp;quot;&amp;gt;&lt;br /&gt;
               &amp;lt;input type=&amp;quot;text&amp;quot; id=&amp;quot;survey_deployment_start_date&amp;quot; name =&amp;quot;survey_deployment[start_date]&amp;quot; class=&amp;quot;form-control width-250&amp;quot; /&amp;gt;&lt;br /&gt;
          &amp;lt;/td&amp;gt;&lt;br /&gt;
     &amp;lt;/tr&amp;gt;&lt;br /&gt;
&lt;br /&gt;
     &amp;lt;tr&amp;gt;&lt;br /&gt;
          &amp;lt;td&amp;gt;&amp;lt;label for=&amp;quot;end_date&amp;quot;&amp;gt;End Date:&amp;lt;/label&amp;gt;&amp;lt;/td&amp;gt;&lt;br /&gt;
          &amp;lt;td class=&amp;quot;form-inline&amp;quot;&amp;gt;&lt;br /&gt;
               &amp;lt;input type=&amp;quot;text&amp;quot; id=&amp;quot;survey_deployment_end_date&amp;quot; name =&amp;quot;survey_deployment[end_date]&amp;quot; class=&amp;quot;form-control width-250&amp;quot; /&amp;gt;&lt;br /&gt;
          &amp;lt;/td&amp;gt;&lt;br /&gt;
     &amp;lt;/tr&amp;gt;&lt;br /&gt;
&amp;lt;/table&amp;gt;&lt;br /&gt;
  &amp;lt;script type=&amp;quot;text/javascript&amp;quot;&amp;gt;&lt;br /&gt;
      jQuery('#survey_deployment_start_date, #survey_deployment_end_date').datetimepicker({&lt;br /&gt;
          format: 'YYYY/MM/DD HH:mm',&lt;br /&gt;
          sideBySide: true&lt;br /&gt;
      });&lt;br /&gt;
  &amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&amp;lt;br /&amp;gt;&lt;br /&gt;
'''4. Version logs - ''app/views/sign_up_sheet/_due_dates.html.erb''''' &amp;lt;br /&amp;gt;&lt;br /&gt;
The version logs file which is only accessible to the admins uses the date tie picker to filter the search results using the start and the end date. Following changes were made to the file: &amp;lt;br /&amp;gt;&lt;br /&gt;
&lt;br /&gt;
'''Before:'''  &lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
jQuery('.datetimeklass').datetimepicker({&lt;br /&gt;
            dateFormat: 'yy/mm/dd',&lt;br /&gt;
            timeFormat: 'HH:mm:ss z',&lt;br /&gt;
            controlType: 'select',&lt;br /&gt;
            timezoneList: [&lt;br /&gt;
                { value: -000, label: 'GMT'},&lt;br /&gt;
                { value: -300, label: 'Eastern'},&lt;br /&gt;
                { value: -360, label: 'Central' },&lt;br /&gt;
                { value: -420, label: 'Mountain' },&lt;br /&gt;
                { value: -480, label: 'Pacific' }&lt;br /&gt;
            ]&lt;br /&gt;
        });&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
'''After:'''  &lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
jQuery('.datetimeklass').datetimepicker({&lt;br /&gt;
        format: 'YYYY/MM/DD HH:mm z',&lt;br /&gt;
        sideBySide: true&lt;br /&gt;
    });&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Output ===&lt;br /&gt;
The old jquery based date-time picker was replaced by a new modern bootstrap based date-time picker as shown in the pictures below. The new bootstrap date-time picker widget also has different styles which can be implemented by changing the code as per the documentation [http://eonasdan.github.io/bootstrap-datetimepicker/ here].&lt;br /&gt;
&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt;&lt;br /&gt;
'''Old Date-Time Picker''' &amp;lt;br /&amp;gt;&lt;br /&gt;
[[File: Expertiza3.PNG]]&lt;br /&gt;
&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt;&lt;br /&gt;
'''New Date-Time Picker''' &amp;lt;br /&amp;gt;&lt;br /&gt;
[[File: Expertiza4.PNG]]&lt;br /&gt;
&lt;br /&gt;
== '''Testing''' ==&lt;br /&gt;
=== Test Plan ===&lt;br /&gt;
=== RSpec Testing ===&lt;br /&gt;
To the test the datetimepicker.js functionality, Rspec testing on an untested controller using this gem was performed. &lt;br /&gt;
In versions controller, search functionality uses the new datetimepicker.js gem. This controller is being given access to only admins and super-admins. &lt;br /&gt;
&lt;br /&gt;
The tests check if the datetimepicker.js is correctly used and on the button click the relevant data is returned from database. Also the datetimepicker feature with start date and end date detection should work for both admins and super-admins.&lt;br /&gt;
&lt;br /&gt;
=== Travis CI Build Testing ===&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
== '''Useful Links''' ==&lt;br /&gt;
&lt;br /&gt;
'''Github Repo:''' https://github.com/SujalAhrodia/expertiza/tree/beta&lt;br /&gt;
&amp;lt;br&amp;gt;&lt;br /&gt;
'''Pull Request:''' https://github.com/expertiza/expertiza/pull/1694&lt;br /&gt;
&lt;br /&gt;
== '''Team Information''' ==&lt;br /&gt;
&lt;br /&gt;
'''Project Mentor:'''&lt;br /&gt;
&amp;lt;br&amp;gt;Pratik Abhyankar&lt;br /&gt;
&lt;br /&gt;
'''Project Members:'''&amp;lt;br&amp;gt;&lt;br /&gt;
Akanksha Bhattacharyya&amp;lt;br&amp;gt;&lt;br /&gt;
Sahil Papalkar&amp;lt;br&amp;gt;&lt;br /&gt;
Sujal &amp;lt;br&amp;gt;&lt;/div&gt;</summary>
		<author><name>Anbhatta</name></author>
	</entry>
</feed>