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

Introduction

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

Problem Statement

Expertiza provides many categories to manage by an instructor. Few of them are assignments, courses, questionnaires. Adding of records like participants, Teaching assistants and questions in these pages is done by submitting the entire page. This requires loading of entire page to add a record and loading of entire page again to save it.

Proposed Solution

This project proposes use of ajax for the required pages to avoid page reloading at the time of adding and saving records. This solution will make sure that adding or saving of record is taken care in the browser itself. It can be achieved by calling corresponding controller method, adding/saving the record and rendering it back to javascript pages instead of redirecting it to the same page. Javascript pages will append the added record functionality to the initial page. Thus page refresh is avoided.

Tasks

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

Implementation

Edit Questionnaire

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

• _questionnaire.html.erb

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

def add_new_questions

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

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

Solution: This problem was tried to solve using ajax by changing or adding the following classes and pages

• _question.html.erb (added) - displays added question

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

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

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

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

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

@question.edit invokes QuestionHeader.rb model which adds html content

    def edit(_count)

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

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

render :action=> 'add_new_questions.js.erb', :layout=>false, :question=> question #redirect_to edit_questionnaire_path(questionnaire_id.to_sym) Issue : But this solution is not working as Ajax can be applied to the browser side processing if the controller method is redirecting to the same page, which is not in this case as page gets redirected from question.html.erb to edit.html.erb. Another problem faced is the creation of questions which is called through _questionnaire.html.erb but not through _question.html.erb which makes it difficult to pass correct questionnaire id to the ajax call. Alternative Approach to Edit Questionnaire: Another approach to solve this issue is to create a seperate java-script function which handles the entire process of adding,saving,deleting questions and appending them. Call this function from _questionnaire.html.erb instead of invoking add_new_questions method. Questions can be saved and retrived from data using Javascript Rest API calls. But, this approach not only needs to restructure entire questionnaire structure and many components in the Expertiza project but also violates the MVC design of the project.