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)[https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller] 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
Adding participant
Adding TA
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.
Un-submit reviews
Earlier scenario: When an instructor/TA goes to "Manage Assignments -> Assign Reviewers" page, he/she can see a list of all the topics, the contributors and the reviewers for each topic. This page did not show the status of each review which can be in Assigned state or Saved state or Submitted state. Also, there was no way for the instructor/TA to un-submit an already submitted review.
New Additions:
- Updated the review_mappings/_list_review_mappings.html.erb file in views to display the status of each review by the reviewer. For each review_mapping, the code checks if there is a response in Response table with the same map_id used in the review_mappings on this page.
- If there is no such response, it means that the reviewer has not saved/submitted the review and it is currently in Assigned State. So, "Response Status: Saved" is shown for that review.
- If there is a response, the last (latest) response is checked as per requirement and the is_submitted attribute of this response is checked in the Response table.
- If the attribute is false, the review has been saved but not submitted. So, "Response Status: Saved" is shown for that review.
- If the attribute is true, the review has been submitted. So, "Response Status: Submitted" is shown for that review. Next to this, a link is created to un-submit the review. Clicking on this link changes the is_submitted attribute to false and updates the Response Status to Saved on the page by using ajax call, without reloading the page
- Added a new method "unsubmit_review" to the review_mapping_controller.rb file. In this, we first find the latest response and then update the is_submitted attribute to false. The flash message is created based on whether the response was updated correctly. After this, unsubmit_review.js.rb file is rendered which updates the response status for the corresponding review on the page to Saved, without reloading the page
- Added a new file review_mappings/unsubmit_review.js.erb to views. This file just changes the response status for the corresponding review displayed on the page to Saved from Submit after the review has been un-submitted and also prints the corresponding success or error flash message.
- Added a new line to routes.rb page for unsubmit_review action
UI Testing
Log in details
Username: instructor6 password: password
Steps to test adding participant:
Steps to test adding TA:
Steps to test adding question in questionnaire:
- Login as instructor
- Go to Manage -> Questionnaires. Create a new Review Questionnaire by clicking on the ‘New public item’ button for ‘Review’.
- Name the Questionnaire and click on create button
- Click on Edit for newly created questionnaire. You will now be navigated to page where you can add new questions to the questionnaire.
- Click on add button in "Questions" section.
Expected output: When add button is clicked, question should be created and the questionnaire page should not get reloaded
Steps to test un-submit reviews
Project Deployment
Future work
In future, we will try to implement the edit questionnaire part using alternative approach. We will try to implement testing using rspec framework and improve the UI design of the pages.