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 instructor. Few of them are assignments,courses and 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 it self. It can be achieved by calling corresponding controller method , adding/saving the record and rendering it back to java script 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 TA in the courses section using ajax
• Edit Questionnaire by using ajax for adding questions in the Questionnaire section.

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

• questionnaires_controller.rb