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/Delete TA (Teaching Assistants): Once a course has been created, an instructor can Add/Delete TAs to the course.
• Edit Questionnaire: Modify the Edit Questionnaire screen to use ajax while adding new questions to the questionnaires.

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
    • list.html.erb
  • shared_scripts
    • add_individual.html.erb
    • _user_list.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.

In course controller the function looked something like this:

 respond_to do |format|
     format.html { redirect_to action: 'view_teaching_assistants', id: @course.id }
     format.js 
 end

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.

_add_individual.html.erb/_ta_list.html.erb

We have put the :remote => true flag on the link or form tag in our .html.erb files (view) for the element where we wanted to trigger the AJAX call, like,

<%= form_tag("/course/add_ta", :method => 'post', :remote => true) do %>

<%= link_to "Delete", { :action => 'remove_ta', :controller =>'course', :id => ta.id, :course_id => ta.course_id }, method: :post,
    :remote => true, :class => 'delete_ta' %>

With :remote => true, rails will not automatically switch views, which allows the JQuery to be run instead. This can be used with a form_tag, a link_tag, or other types of tags.

Testing Details

RSpec Testing

There were no existing test cases for the course controller. We have added some related to the functionality which we have worked on. The following test verifies mapping between TA and course:

it "is able to create mapping between TA and the course" do
     ta = build(User)
     ta.save
     course = build(Course)
     course.save
     taMapping = TaMapping.create(ta.id,course.id)
     expect(taMapping).to be_kind_of(TaMapping)
end

Below test verifies whether error message is displayed or not when TA does not exist:

it "displays error message if TA does not exist" do
   ta = build(User)
   ta.ta_id=nil
   ta.save
   expect(ta.nil?).to be true
end

The test below verifies whether TA is removed from the course or not:

it "is able to delete TA from the course" do
     ta = build(User)
     taMapping = TaMapping.find(ta.id)
     taMapping.destroy
     expect(response).to redirect_to action: 'view_teaching_assistants'
end

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.
• To test add questionnaire, switch to questionnaire tab from courses tab and click on add questionnaire.
• As you add questions, page would not refresh and questions would be added as expected.
• If you try to delete any question, delete action would also not refresh the page and perform the required action.