CSC/ECE 517 Fall 2016/oss E1663

This wiki page is for the description of changes made under E1663 OSS assignment for Fall 2016, CSC/ECE 517.

Peer Review Information

For users intending to view the deployed Expertiza associated with this assignment, the credentials are below:

• Instructor login: username -> instructor6, password -> password

Expertiza Background

Expertiza is an educational web application created and maintained by the joint efforts of the students and the faculty at NCSU. It’s an open source project developed on Ruby on Rails platform and its code is available on Github. It allows students to review each other’s work and improve their work upon this feedback.

Description of the current project

The current project deals with addition of AJAX whenever we add a new record or modify an existing record. In the current scenario, we submit the entire page to save a record and reload the entire page back again. Using Ajax, we should only submit the newly added record information to server instead of submitting the entire page. This project takes care of below scenarios:

• Add Participants: Once an assignment has been created, an instructor can Add Participants to the assignment.
• Add TA (Teaching Assistants): Once a course has been created, an instructor can Add TAs to the course.
• Edit Questionnaire: Modify the Edit Questionnaire screen to use ajax while adding new questions to the questionnaires.
• Un-submit reviews: Instructor should be able to un-submit a review.

Files Created/Changed in the project

• Controllers
  • participants_controller.rb
  • course_controller.rb
  • questionnaires_controller.rb

• Views
  • course
    • _add_individual.html.erb
    • _ta_list.html.erb
    • add_ta.js.erb
    • remove_ta.js.erb
    • view_teaching_assistants.html.erb
  • participants
    • add.js.erb
  • shared_scripts
    • add_individual.html.erb
  • questionnaires
    • _ajax_partial.html.erb
    • add_new_questions.js.erb
    • edit.js.erb

Participants Controller/ Course Controller

We have added respond_to method in add method of participants controller and add_ta/remove_ta methods of course controller, which will allow us to render both javascript and html requests from these methods.

Questionnaire Controller

The same methods added in participants were added in questionnaire controller, the difference being in the action the controller takes after receiving a JS request.

In the partial _questionnaire.html.erb, the attribute remote was set to true. This is rendered as the attribute "data-remote" being set to true in HTML, which allows the rails UJS (unobtrusive JS) to make AJAX calls without needing any jQuery statements.

To implement the functionality, the controller renders a JavaScript file in place of the usual .html.erb. The JavaScript file then takes action on the webpage it is called on. In the case of adding new questions, the page is updated with the new questions by the JavaScript file that is called. This is achieved by rendering a partial in the JavaScript file and then using jQuery to update the page with the rendered HTML. This seemed like a good approach as we are reusing the render method. Although new partials had to be created, the JavaScript functionality is easy to understand. Additional divs were added in the HTML to serve as hooks for the jQuery statements to update HTML on the page.

Additionally, saving questions in the edit questionnaire section also works on AJAX, and flashes the standard rails success message without refreshing the page.

Testing Details

UI Testing

Following steps needs to be performed to test this code from UI:

• Login as an instructor.
• You will land on Manage Content page with list of courses and related actions to it.
• Under action column try to Add TA for any course.
• It will take you to Teaching Assistants page.
• Try to add a valid TA for eg. teaching_assistant5549. As soon as you press Add TA button, list will get updated with the newly added TA without refreshing the page.
• If you try to delete any TA, a popup will open to confirm your action, press ok and you will see that particular TA is deleted in the background.
• Similarly, for perform these actions for Add participant action for any course. Table will be updated with newly added participant without refreshing the page.