Expertiza_Wiki - User contributions [en]

CSC/ECE 517 Spring 2016 E1628 Visualization

2016-04-26T18:31:34Z

Jesankar: Added UI tests

= Purpose =
The main goal of the project is to present the data in more convenient way and also improve the existing visualization present in expertiza. We plan to improve /grades/view_my_scores and grades/view_team pages.Presently /grades/view_my_scores has got many line breaks between the reviews and score is displayed in text.In grades/view_team originally there was no option to sort the data.We plan to provide an option to sort the data by avg score and also display high scored reviews on left of the table so it would be easy to analyze at simple glance.

= Task Description =
#When a review is shown, use different background colors for adjacent responses or adjacent reviews, instead of so much whitespace.
#In the “alternate view,”
<ol style="list-style-type:lower-alpha;padding-left:20px">
<li>Clicking on “Avg.” should sort the rows by average score, from highest to lowest. Clicking again should change the sort order to from lowest to highest. Clicking a 3rd time should change it back to highest to lowest, etc.</li>
<li>Clicking on some other button or icon should sort the columns in terms of total review scores. Clicking once should bring the highest-scored review to the right; clicking again should bring the lowest-scored review to the left, etc.</li>
<li>Hovering over a box that has a text comment associated with it should show the comment in a “tool tip” format.</li>
<li>Hovering over a number in the “Question id” column should bring up a “tool tip” that shows the text of the criterion (question).
<li>The “Question ID” label should be changed to “Criterion”.</li>
</ol>

= Overview of approach =
In the view that displays the reviews for the given assignment, each of the reviews are individuals '''div''' elements. To make use of existing Bootstrap CSS for displaying individual reviews with different background color, the reviews need to be part of a table. After changing this to a table, the bootstrap's table table-striped class can be added to the table to get alternate grey and white rows. The extra white space tags, horizontal rules, are removed since the table will take care of separating individuals rows.
 
 
To achieve task 2.a we intend to use tablesorter jQuery plugin. Tablesorter auto-detects the data types in the table and sort the rows either in ascending or descending order when a column header is clicked.

'''Install''' 
Add the following line in Gemfile
<pre>
gem 'jquery-tablesorter'
</pre>
'''Usage''' 
In the table add table sorter class as shown below
<pre>
<table id="myTable" class="tablesorter">
</pre>

 
To achieve task 2.c and 2.d we will be including "tooltip" offered by Bootstrap to all the cells in the table with title attribute set to contain comment or criterion based on the data cell. The following attributes should be added to the respective cells in the table to get the tooltip text on hover
<pre>
data-toggle="tooltip" title="The tooltip text goes here"
</pre>

 
To achieve task 2.e we will be renaming "Question Id" table header to "Criterion"

= Mock-ups =
The UI mock-ups for the tasks of the project are shown below. 
 
'''Colored background for different reviews'''
 
[[File:Striped-table.PNG]]
 

 
'''Individual reviews before modification'''
 
[[File:View myscore table original.png]]
 

 
'''Individual reviews after modification'''
 
[[File:View myscore table modified.png]]
 

 
'''Alternate view before modification'''
 
[[File:Grades alternate view criteria old.png ]]
 

 

'''Alternate view after modification'''
 
[[File:Grades alternate view criteria modified.png ]]
 

 
'''Tooltip for individual cells''' (Note: The screenshot utility doesn't capture the mouse pointer)
 
[[File:View scores alternate tooltip.PNG]]
 
[[File:View scores alternate tooltip criterion.PNG]]

= Files =
These are the files we will be modifying
* views/grades/_reviews.html.erb
* views/grades/view_team.html.erb

=UI Testing=
Here are the steps necessary to perform UI testing on the project. Note that the accounts refer to the Expertiza VCL image.
==Background Colors and Reduced Whitespace on Reviews==
# Login as ''student1864'', password is ''password''.
# Select the ''Final project'' assignment.
# Select ''Your scores''.
# Select ''show reviews''.
#* You'll see that reviews alternate in color between light gray and white. Some extra whitespace has been removed between reviews, so they appear more compact.
# Select ''show review'' next to Review 1 in Round 2.
#* Here you'll see that the questions alternate in color between light yellow and light blue. The point value for the question is displayed in a colored circle. The colors are the same as in the heat table in the alternate view. The maximum point value is not located to the right of the question text. Extra whitespace has been removed.

==Alternate View Changes==
# Login as ''student1864'', password is ''password''.
# Select the ''Final project'' assignment.
# Select ''Alternate view''.
#* The ''Question Id'' column has been renamed to ''Criterion''.
#* Hovering over a cell in the ''Criterion'' column will display a tooltip that shows the question text for that row.
#* Hovering over any cell in a review column will show the response text for the corresponding question and review.
#* The ''Avg'' column is sortable. Clicking it will sort in ascending order, then descending order, then back to ascending order.
#* The ''Criterion'' column is also sortable. This is so that the original ordering of the rows can be restored.
#* There are two links, ''ASC'' and ''DESC'' underneath the table. Clicking them will sort the review columns in the table in ascending/descending order of total review score.

CSC/ECE 517 Spring 2016 E1628 Visualization

2016-04-26T18:23:54Z

Jesankar: Added UI Testing section

= Purpose =
The main goal of the project is to present the data in more convenient way and also improve the existing visualization present in expertiza. We plan to improve /grades/view_my_scores and grades/view_team pages.Presently /grades/view_my_scores has got many line breaks between the reviews and score is displayed in text.In grades/view_team originally there was no option to sort the data.We plan to provide an option to sort the data by avg score and also display high scored reviews on left of the table so it would be easy to analyze at simple glance.

= Task Description =
#When a review is shown, use different background colors for adjacent responses or adjacent reviews, instead of so much whitespace.
#In the “alternate view,”
<ol style="list-style-type:lower-alpha;padding-left:20px">
<li>Clicking on “Avg.” should sort the rows by average score, from highest to lowest. Clicking again should change the sort order to from lowest to highest. Clicking a 3rd time should change it back to highest to lowest, etc.</li>
<li>Clicking on some other button or icon should sort the columns in terms of total review scores. Clicking once should bring the highest-scored review to the right; clicking again should bring the lowest-scored review to the left, etc.</li>
<li>Hovering over a box that has a text comment associated with it should show the comment in a “tool tip” format.</li>
<li>Hovering over a number in the “Question id” column should bring up a “tool tip” that shows the text of the criterion (question).
<li>The “Question ID” label should be changed to “Criterion”.</li>
</ol>

= Overview of approach =
In the view that displays the reviews for the given assignment, each of the reviews are individuals '''div''' elements. To make use of existing Bootstrap CSS for displaying individual reviews with different background color, the reviews need to be part of a table. After changing this to a table, the bootstrap's table table-striped class can be added to the table to get alternate grey and white rows. The extra white space tags, horizontal rules, are removed since the table will take care of separating individuals rows.
 
 
To achieve task 2.a we intend to use tablesorter jQuery plugin. Tablesorter auto-detects the data types in the table and sort the rows either in ascending or descending order when a column header is clicked.

'''Install''' 
Add the following line in Gemfile
<pre>
gem 'jquery-tablesorter'
</pre>
'''Usage''' 
In the table add table sorter class as shown below
<pre>
<table id="myTable" class="tablesorter">
</pre>

 
To achieve task 2.c and 2.d we will be including "tooltip" offered by Bootstrap to all the cells in the table with title attribute set to contain comment or criterion based on the data cell. The following attributes should be added to the respective cells in the table to get the tooltip text on hover
<pre>
data-toggle="tooltip" title="The tooltip text goes here"
</pre>

 
To achieve task 2.e we will be renaming "Question Id" table header to "Criterion"

= Mock-ups =
The UI mock-ups for the tasks of the project are shown below. 
 
'''Colored background for different reviews'''
 
[[File:Striped-table.PNG]]
 

 
'''Individual reviews before modification'''
 
[[File:View myscore table original.png]]
 

 
'''Individual reviews after modification'''
 
[[File:View myscore table modified.png]]
 

 
'''Alternate view before modification'''
 
[[File:Grades alternate view criteria old.png ]]
 

 

'''Alternate view after modification'''
 
[[File:Grades alternate view criteria modified.png ]]
 

 
'''Tooltip for individual cells''' (Note: The screenshot utility doesn't capture the mouse pointer)
 
[[File:View scores alternate tooltip.PNG]]
 
[[File:View scores alternate tooltip criterion.PNG]]

= Files =
These are the files we will be modifying
* views/grades/_reviews.html.erb
* views/grades/view_team.html.erb

=UI Testing=
Here are the steps necessary to perform UI testing on the project. Note that the accounts refer to the Expertiza VCL image.
==Background Colors and Reduced Whitespace on Reviews==
# Login as ''student1864'', password is ''password''.
# Select the ''Final project'' assignment.
# Select ''Your scores''.
# Select ''show reviews''. You'll see that reviews alternate in color between light gray and white. Some extra whitespace has been removed between reviews, so they appear more compact.
# Select ''show review'' next to Review 1 in Round 2. Here you'll see that the questions alternate in color between light yellow and light blue. The point value for the question is displayed in a colored circle. The colors are the same as in the heat table in the alternate view. The maximum point value is not located to the right of the question text. Extra whitespace has been removed.

CSC/ECE 517 Spring 2016 E1628 Visualization

2016-04-09T16:21:54Z

Jesankar: /* Files Modified */

= Purpose =
This project is intended to enhance the visualizations currently provided by Expertiza

= Task Description =
#When a review is shown, use different background colors for adjacent responses or adjacent reviews, instead of so much whitespace.
#In the “alternate view,”
<ol style="list-style-type:lower-alpha;padding-left:20px">
<li>Clicking on “Avg.” should sort the rows by average score, from highest to lowest. Clicking again should change the sort order to from lowest to highest. Clicking a 3rd time should change it back to highest to lowest, etc.</li>
<li>Clicking on some other button or icon should sort the columns in terms of total review scores. Clicking once should bring the highest-scored review to the right; clicking again should bring the lowest-scored review to the left, etc.</li>
<li>Hovering over a box that has a text comment associated with it should show the comment in a “tool tip” format.</li>
<li>Hovering over a number in the “Question id” column should bring up a “tool tip” that shows the text of the criterion (question).
<li>The “Question ID” label should be changed to “Criterion”.</li>
</ol>

= Overview of approach =
In the view that displays the reviews for the given assignment, each of the reviews are individuals '''div''' elements. To make use of existing Bootstrap CSS for displaying individual reviews with different background color, the reviews need to be part of a table. After changing this to a table, the bootstrap's table table-striped class can be added to the table to get alternate grey and white rows. The extra white space tags, horizontal rules, are removed since the table will take care of separating individuals rows.
 
 
To achieve task 2.a we intend to use tablesorter jQuery plugin. Tablesorter auto-detects the data types in the table and sort the rows either in ascending or descending order when a column header is clicked.

'''Install''' 
Add the following line in Gemfile
<pre>
gem 'jquery-tablesorter'
</pre>
'''Usage''' 
In the table add table sorter class as shown below
<pre>
<table id="myTable" class="tablesorter">
</pre>

 
To achieve task 2.c and 2.d we will be including "tooltip" offered by Bootstrap to all the cells in the table with title attribute set to contain comment or criterion based on the data cell. The following attributes should be added to the respective cells in the table to get the tooltip text on hover
<pre>
data-toggle="tooltip" title="The tooltip text goes here"
</pre>

 
To achieve task 2.e we will be renaming "Question Id" table header to "Criterion"

= Mock-ups =
The UI mock-ups for the tasks of the project are shown below. 
 
'''Colored background for different review'''
 
[[File:Striped-table.PNG]]
 
 
'''Sortable AVG column in the alternate view'''
 
[[File:Avg-sorted.PNG]]
 
and
 
[[File:Avg-rev-sorted.PNG]]
 

= Files Modified =

* views/grades/_reviews.html.erb
* views/grades/view_team.html.erb

CSC/ECE 517 Spring 2016 E1628 Visualization

2016-04-09T16:19:59Z

Jesankar: Added to files modified

CSC/ECE 517 Spring 2016 E1628 Visualization

2016-04-09T15:46:53Z

Jesankar: Added files modified section

CSC/ECE 517 Spring 2016

2016-04-03T16:53:09Z

Jesankar: Added visualization link

==Writing Assignment 1==
*[[CSC/ECE 517 Spring 2016/Active Job]]

==Calibration Assignment Submissions==
*[[Calibration Assignment Submission (OmniAuth)]]
*[[Calibration Assignment Submission (Patch_verb)]]

==Writing Assignment 2==
*[[CSC/ECE 517 Spring 2016/Mozilla Implement HTML5 form validation]]

*[[CSC/ECE 517 Spring 2016/Functional Tests for Questionnaire Controller]]

*[[CSC/ECE 517 Spring 2016 / Expertiza Self-Review Feature]]

*[[CSC/ECE 517 Spring 2016/Refactor different question types from quiz feature]]

*[[CSC/ECE 517 Spring 2016/Implement private browsing]]

*[[CSC/ECE 517 Spring 2016/Write automated tests for WebDriver]]

*[[CSC/ECE 517 Spring 2016/Refactor sign_up_sheet_controller.rb and sign_up_topic.rb]]

*[[CSC/ECE 517 Spring 2016/Implement Common Parts of the CSSOM API]]

*[[CSC/ECE 517 Spring 2016/Functional tests for assignment creation function]]

*[[CSC/ECE 517 Spring 2016/E1604. Functional tests for Calibration function]]

*[[CSC/ECE 517 Spring 2016/Refactor and write unit tests for question type.rb]]

*[[CSC/ECE 517 Spring 2016/Refactor response controller]]

*[[CSC/ECE_517_Spring_2016_OSS_M1606]]

*[[CSC/ECE_517_Spring_2016/OSS_E1601]]

==Final Project Design Document==
*[[CSC/ECE 517 Spring 2016 M1601 Implement HTML5 form validation]]
*[[CSC/ECE 517 Spring 2016 E1624 Compose functional tests for Suggest topics of student functionality ]]
*[[CSC/ECE 517 Spring 2016 E1631 Team-based reviewing]]
*[[CSC/ECE 517 Spring 2016 E1628 Visualization]]

CSC/ECE 517 Spring 2016/Refactor different question types from quiz feature

2016-03-31T03:31:58Z

Jesankar: Added more steps for testing view_question_text and edit methods

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

== Introduction ==
====Background====

Expertiza is an open source project based on Ruby on Rails framework. Expertiza has a quizzing feature which allow student authors to create quiz questions and test the peer reviewers. The idea behind this is, if a reviewer can answer the quiz questions which were created by the author correctly, we assume that the reviewer has read the artifact carefully enough and thereby we trust the peer-review.

====Current Implementation and Problems====
* Following three different types of questions are supported in quizzing feature of Expertiza
# Multiple Choice Radio
# Multiple Choice Checkbox
# True/False
* The current implementation of Quizzing feature is not consistent with the current questions and questionnaires. Since Quiz questionnaire is one sub type of questionnaire, so it should follow the design of other type of questionnaires. But, the current implementation is inconsistent with other questionnaires.
* In order to create a quiz, the existing code is written in the views which has a series of if-then structures to implement the functionality of each different question type. This kind of implementation makes the code slower and violates the principles of MVC architecture.
* Current HTML code doesn't looks like source code.
* Code is repeated for different question types.
* Proper Ruby naming conventions are not followed
====Changes Implemented====
* All logic moved to model. Four separate methods - <tt>edit</tt>, <tt>view_question_text</tt>, <tt>complete</tt> and <tt>view_completed_question</tt> in order to generate the same HTML for each of the question types. We used polymorphism by declaring all these methods in <tt>QuizQuestion</tt> which inherits from <tt>Question</tt> and has sub-types <tt>MultipleChoiceRadio</tt>, <tt>MultipleChoiceCheckbox</tt>, and <tt>TrueFalse</tt>.
* When questionnaire author creates a quiz, <tt>edit</tt> is called. To call this on UI, you can login as a student, click 'create quiz' / 'edit quiz' on 'Your Works' page. The <tt>edit</tt> method is now called from <tt>/view/questionnaires/_quiz_question.html.erb</tt>
* When questions are viewed by the author or the instructor, <tt>view_question_text</tt> method is called. To call this on UI, you can either login as a student, click 'view quiz' on 'Your works' page or login as an instructor, find an assignment with quizzing feature and click the icon 'view quiz questions'. The 'view_question_text' calls <tt>view/questionnaires/view.html.erb</tt>

* When the quiz takers tries to take the quiz, <tt>complete</tt> is called. To call this on UI, you can login as a quiz taker, request a quiz to take on “Take quizzes” page, then click “begin”. This method is now called on <tt>view/student_quizzes/take_quiz</tt>.
* When the quiz taker finished taking a quiz and wants to view the quiz result again, <tt>view_completed_question</tt> is called. To call this on UI, you can login as a quiz taker, find a finished quiz and click “view”. This method is called on <tt>view/student_quizzes/finished_quiz</tt>.
* Using polymorphism and DRY principles, code repetition has been virtually eliminated.

== Refactoring <tt>view_question_text</tt> ==

The <tt>view_question_text</tt> method is called when the author of the quiz or the instructor views the quiz. The method is responsible for generating the HTML to display the question along with each of its choices. The correct choice(s) should be bolded. Prior to refactoring, this functionality was located in <tt>app/views/student_quizzes/review_questions.html.erb</tt>:
<pre>
<%questions = questionnaire.questions%>
<% questions.each do |question| %>
 <%= question.txt %> 
<% question_type = question.get_formatted_question_type%>
Question Type: <%= question_type %> 

<% if question_type == 'True/False' %>
Correct Answer: <%= (QuizQuestionChoice.where(question_id: question.id, iscorrect:1).first.txt) %> 
<% elsif question_type == 'Multiple Choice - Radio' %>
<% correct_answer = '' %>
Answer Options: 
<% QuizQuestionChoice.where(question_id: question.id).each do |choice| %>
<% if choice.iscorrect == true %>
  <%= choice.txt %> 
<%else%>
  <%= choice.txt %> 
<% end %>

<% end %>
 
<% elsif question_type == 'Multiple Choice - Checked' %>
Answer Options: 
<% QuizQuestionChoice.where(question_id: question.id).each do |choice| %>
<% if choice.iscorrect == true %>
  <%= choice.txt %> 
<%else%>
  <%= choice.txt %> 
<% end %>
<% end %>
 
<% end %>
<% end %><hr>
</pre>

This logic has been moved to <tt>app/models/quiz_question.rb</tt>, so now the view simply needs to call the method:
<pre>
<%questions = questionnaire.questions%>
<%questions.each do |question| %>

<%if question.is_a? Question%>
<%=question.view_question_text.html_safe%>
<%end%>

<% end %><hr>
</pre>

Unit tests were added to <tt>spec/models/quiz_question_spec.rb</tt> covering all three types of questions to ensure that the correct HTML is generated.

== Refactoring <tt>edit</tt> ==

The <tt>edit</tt> method is called when the author creates or edits a quiz. It makes every element of the quiz editable. Prior to refactoring, the HTML was in <tt>app/views/questionnaires/_quiz_questionnaire.html.erb</tt>:

<pre>
<% if @questionnaire.type == 'QuizQuestionnaire' %>

<table id="questions_table">
<% if $disp_flag != 1 %>
<tr>
<td align=left width=300>Questions:</td>
<% if @questionnaire.type != 'QuizQuestionnaire' %><td align=left>weight</td><%end%>

</tr>
<% end %>

<% for @question in @questionnaire.questions %>
<% questionnum=@question.id %>
<tr>
<% if $disp_flag != 1 %>
<td > <%= text_area "question[]", 'txt', :cols=>100 %></td>
<% end %>
<% @quiz_question_choices = QuizQuestionChoice.where(question_id: @question.id) %>

</tr>
<% i=1 %>

<% for @quiz_question_choice in @quiz_question_choices %>
<tr>
<td>
   
<% if @question.type=="MultipleChoiceCheckbox" %>
<%= hidden_field_tag("quiz_question_choices[#{questionnum}][MultipleChoiceCheckbox][#{i}][iscorrect]",'0') %>
<%= check_box_tag("quiz_question_choices[#{questionnum}][MultipleChoiceCheckbox][#{i}][iscorrect]",'1', @quiz_question_choice.iscorrect) %>
 <%= text_field_tag "quiz_question_choices[#{questionnum}][MultipleChoiceCheckbox][#{i}][txt]", @quiz_question_choice.txt, :size=>40 %>

<% end %>

<%if @question.type=="MultipleChoiceRadio" %>
<%= radio_button_tag("quiz_question_choices[#{questionnum}][MultipleChoiceRadio][correctindex]", "#{i}", @quiz_question_choice.iscorrect)%>
 <%= text_field_tag "quiz_question_choices[#{questionnum}][MultipleChoiceRadio][#{i}][txt]", @quiz_question_choice.txt, :size=>40 %>
<% end %>

<%if @question.type=="TrueFalse" %>
<% if @quiz_question_choice.txt=="True"%>
<%= radio_button_tag("quiz_question_choices[#{questionnum}][TrueFalse][1][iscorrect]", 'True', @quiz_question_choice.iscorrect) %> True
<%end%>

<% if @quiz_question_choice.txt=="False"%>
<%= radio_button_tag("quiz_question_choices[#{questionnum}][TrueFalse][1][iscorrect]", 'False', @quiz_question_choice.iscorrect) %> False
<%end%>
<% end %>
</td>
</tr>
<% i+=1 %>
<%end %>

<% end %>
</table>
<% end %>
</pre>

After refactoring, the same file looked like:

<pre>
<% if @questionnaire.type == 'QuizQuestionnaire' %>

<table id="questions_table">
<% if $disp_flag != 1 %>
<tr>
<td align=left width=300>Questions:</td>
<% if @questionnaire.type != 'QuizQuestionnaire' %><td align=left>weight</td><%end%>

</tr>
<% end %>

<% for @question in @questionnaire.questions %>
<% i=1 %>
<%= @question.edit(i) %>
<% end %>
</table>
<% end %>
</pre>
== Refactoring <tt>complete</tt> ==
Logic is written in multiple_choice_checkbox model for multiple choice checkbox question type. Similarly, same process is followed for remaining question types. To begin a quiz, <tt>complete</tt> is called from the model.
@question = self
html = ""
html += label_tag("#{question.id}", question.txt) +" "
quiz_question_choices = QuizQuestionChoice.where(question_id: @question.id)
quiz_question_choices.each do |choice|
if answer=="view"
html += check_box_tag ("#{question.id}[]", "#{choice.txt}", choice.iscorrect)
html += label_tag("#{choice.txt}", choice.txt) + " "
end
if answer=="take"
html += check_box_tag ("#{question.id}[]", "#{choice.txt}")
html += label_tag("#{choice.txt}", choice.txt) + " "
end
html.html_safe
end
end

== Refactoring <tt>view_completed_question</tt> ==
The logic for viewing completed question and their answers is written in <tt>app/views/student_quizzes/finished_quiz.html.erb</tt> using a redundant if-elsif structure as shown below.
<% if question_type.eql? 'MultipleChoiceRadio' %>
<% QuizQuestionChoice.where(question_id: question.id).each do |answer| %>
<% if(answer.iscorrect) %>
<%= p answer.txt %> -- Correct 
<%else%>
<%= p answer.txt %> 
<% end %>
<% end %>
 
<%user_answer=Answer.where(response_id: @response.id, question_id: question.id).first%>
Your answer is: <%= user_answer.comments %>
<%if user_answer.answer==1%>
<img src="/assets/Check-icon.png"/>
<%else%>
<img src="/assets/delete_icon.png"/>
<%end%>
 
<% elsif question_type.eql? 'MultipleChoiceCheckbox' %>
...
<% elsif(question_type == 'TrueFalse') %>
...
The <tt>app/views/student_quizzes/finished_quiz.html.erb</tt> was refactored by removing the logic from the view and making it clean. We used a single construct which determines question type and answer type by calling view_completed_question method declared in quiz class as shown below.
<%user_answer=Answer.where(response_id: @response.id, question_id: question.id)%>
Question <%= i %>: <%= label_tag "#{question.id}", question.txt %> 
<%= question.view_completed_question(i,user_answer) %>
<% i += 1 %>
Similarly, logic was written in models for each of the question types. Following code snippet shows <tt>view_completed_question</tt> for true/false question type.
def view_completed_question(count, answer)
@question = self
html=""
html+= "Correct Answer is: "
html+= QuizQuestionChoice.where(question_id: @question.id,iscorrect: 1).first.txt
html+= " "
html+= "Your answer is: "
html+= answer.first.coments + ""
if(answer.first.answer == 1)
html+= "<img src=/assets/Check-icon.png/>"
else
html+= "<img src=/assets/delete_icon.png/>"
end
html+= " "
end

'''Remove irrelevant comments from the student_quizzes_controller'''
The <tt>student_quizzes_controller</tt> has a few comments which are irrelevant and make the method bulky. These could be safely removed from the code.

== Unit Testing ==
We added unit tests in <tt>spec/models/quiz_question_spec.rb</tt> which check the generated HTML for each of the refactored methods. by We used <tt>context</tt> blocks to incorporate tests for each type of question. Here is an example of the tests for <tt>view_question_text</tt>:

<pre>
describe "view_question_text" do
context "when the question is a multiple-choice radio" do
it "contains the text of the question" do
expect(@radio_question.view_question_text.html_safe).to include("In which city is NCSU located?")
end

it "contains each of the choices" do
expect(@radio_question.view_question_text.html_safe).to include("Raleigh")
expect(@radio_question.view_question_text.html_safe).to include("Atlanta")
expect(@radio_question.view_question_text.html_safe).to include("Charlotte")
expect(@radio_question.view_question_text.html_safe).to include("North Carolina")
end

it "bolds the correct answer" do
expect(@radio_question.view_question_text.html_safe).to include("Raleigh")
end

it "does not bold incorrect answers" do
expect(@radio_question.view_question_text.html_safe).not_to include("Atlanta")
expect(@radio_question.view_question_text.html_safe).not_to include("Charlotte")
expect(@radio_question.view_question_text.html_safe).not_to include("North Carolina")
end
end

context "when the question is a multiple-choice checkbox" do
it "contains the text of the question" do
expect(@checkbox_question.view_question_text.html_safe).to include("Which of the following are colors?")
end

it "contains each of the choices" do
expect(@checkbox_question.view_question_text.html_safe).to include("Paint")
expect(@checkbox_question.view_question_text.html_safe).to include("Blue")
expect(@checkbox_question.view_question_text.html_safe).to include("Car")
expect(@checkbox_question.view_question_text.html_safe).to include("Red")
end

it "bolds the correct answers" do
expect(@checkbox_question.view_question_text.html_safe).to include("Blue")
expect(@checkbox_question.view_question_text.html_safe).to include("Red")
end

it "does not bold incorrect answers" do
expect(@checkbox_question.view_question_text.html_safe).not_to include("Paint")
expect(@checkbox_question.view_question_text.html_safe).not_to include("Car")
end
end

context "when the question is true/false" do
it "contains the text of the question" do
expect(@true_false_question.view_question_text.html_safe).to include("2+2=4")
end

it "contains each of the choices" do
expect(@true_false_question.view_question_text.html_safe).to include("True")
expect(@true_false_question.view_question_text.html_safe).to include("False")
end

it "bolds the correct answer" do
expect(@true_false_question.view_question_text.html_safe).to include("True")
end

it "does not bold the incorrect answer" do
expect(@true_false_question.view_question_text.html_safe).not_to include("False")
end
end
end
</pre>

== UI Testing ==
You may want to use the following information to make UI testing easier if you are using the link in the Expertiza submission:

'''Assignment''': Quiz Assignment 
'''Instructor''': super_administrator2 
'''Students''': student15, student16, student17, student18, student19, student20 

If you are using the link in the Expertiza submission, you do not need a password. We made this change to facilitate testing. The committed code ''does not'' make any change for authenticating users.

Since this project involved code refactoring, no new functionality was added. But here are tests for each method to verify they are working correctly.

=== <tt>view_question_text</tt> ===
# Login as a student.
# Select an assignment that has quizzing enabled (e.g. Quiz Assignment).
# Select "Your Work"
# If you haven't created a quiz yet, go ahead and create one by clicking the "Create Quiz" link.
# Select "View quiz".
# You should see each question, followed by the choices. The correct choice(s) will be bolded.

=== <tt>edit</tt> ===
# Login as a student.
# Select an assignment that has quizzing enabled (e.g. Quiz Assignment).
# Select "Your Work"
# If you haven't created a quiz yet, go ahead and create one by clicking the "Create Quiz" link.
# Select "Edit quiz".
# You should see each question, followed by the choices, each in an editable text field. The correct choice(s) will be checked.

CSC/ECE 517 Spring 2016/Refactor different question types from quiz feature

2016-03-31T03:27:37Z

Jesankar: Added UI testing steps for view_question_text and edit methods

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

== Introduction ==
====Background====

Expertiza is an open source project based on Ruby on Rails framework. Expertiza has a quizzing feature which allow student authors to create quiz questions and test the peer reviewers. The idea behind this is, if a reviewer can answer the quiz questions which were created by the author correctly, we assume that the reviewer has read the artifact carefully enough and thereby we trust the peer-review.

====Current Implementation and Problems====
* Following three different types of questions are supported in quizzing feature of Expertiza
# Multiple Choice Radio
# Multiple Choice Checkbox
# True/False
* The current implementation of Quizzing feature is not consistent with the current questions and questionnaires. Since Quiz questionnaire is one sub type of questionnaire, so it should follow the design of other type of questionnaires. But, the current implementation is inconsistent with other questionnaires.
* In order to create a quiz, the existing code is written in the views which has a series of if-then structures to implement the functionality of each different question type. This kind of implementation makes the code slower and violates the principles of MVC architecture.
* Current HTML code doesn't looks like source code.
* Code is repeated for different question types.
* Proper Ruby naming conventions are not followed
====Changes Implemented====
* All logic moved to model. Four separate methods - <tt>edit</tt>, <tt>view_question_text</tt>, <tt>complete</tt> and <tt>view_completed_question</tt> in order to generate the same HTML for each of the question types. We used polymorphism by declaring all these methods in <tt>QuizQuestion</tt> which inherits from <tt>Question</tt> and has sub-types <tt>MultipleChoiceRadio</tt>, <tt>MultipleChoiceCheckbox</tt>, and <tt>TrueFalse</tt>.
* When questionnaire author creates a quiz, <tt>edit</tt> is called. To call this on UI, you can login as a student, click 'create quiz' / 'edit quiz' on 'Your Works' page. The <tt>edit</tt> method is now called from <tt>/view/questionnaires/_quiz_question.html.erb</tt>
* When questions are viewed by the author or the instructor, <tt>view_question_text</tt> method is called. To call this on UI, you can either login as a student, click 'view quiz' on 'Your works' page or login as an instructor, find an assignment with quizzing feature and click the icon 'view quiz questions'. The 'view_question_text' calls <tt>view/questionnaires/view.html.erb</tt>

* When the quiz takers tries to take the quiz, <tt>complete</tt> is called. To call this on UI, you can login as a quiz taker, request a quiz to take on “Take quizzes” page, then click “begin”. This method is now called on <tt>view/student_quizzes/take_quiz</tt>.
* When the quiz taker finished taking a quiz and wants to view the quiz result again, <tt>view_completed_question</tt> is called. To call this on UI, you can login as a quiz taker, find a finished quiz and click “view”. This method is called on <tt>view/student_quizzes/finished_quiz</tt>.
* Using polymorphism and DRY principles, code repetition has been virtually eliminated.

== Refactoring <tt>view_question_text</tt> ==

The <tt>view_question_text</tt> method is called when the author of the quiz or the instructor views the quiz. The method is responsible for generating the HTML to display the question along with each of its choices. The correct choice(s) should be bolded. Prior to refactoring, this functionality was located in <tt>app/views/student_quizzes/review_questions.html.erb</tt>:
<pre>
<%questions = questionnaire.questions%>
<% questions.each do |question| %>
 <%= question.txt %> 
<% question_type = question.get_formatted_question_type%>
Question Type: <%= question_type %> 

<% if question_type == 'True/False' %>
Correct Answer: <%= (QuizQuestionChoice.where(question_id: question.id, iscorrect:1).first.txt) %> 
<% elsif question_type == 'Multiple Choice - Radio' %>
<% correct_answer = '' %>
Answer Options: 
<% QuizQuestionChoice.where(question_id: question.id).each do |choice| %>
<% if choice.iscorrect == true %>
  <%= choice.txt %> 
<%else%>
  <%= choice.txt %> 
<% end %>

<% end %>
 
<% elsif question_type == 'Multiple Choice - Checked' %>
Answer Options: 
<% QuizQuestionChoice.where(question_id: question.id).each do |choice| %>
<% if choice.iscorrect == true %>
  <%= choice.txt %> 
<%else%>
  <%= choice.txt %> 
<% end %>
<% end %>
 
<% end %>
<% end %><hr>
</pre>

This logic has been moved to <tt>app/models/quiz_question.rb</tt>, so now the view simply needs to call the method:
<pre>
<%questions = questionnaire.questions%>
<%questions.each do |question| %>

<%if question.is_a? Question%>
<%=question.view_question_text.html_safe%>
<%end%>

<% end %><hr>
</pre>

Unit tests were added to <tt>spec/models/quiz_question_spec.rb</tt> covering all three types of questions to ensure that the correct HTML is generated.

== Refactoring <tt>edit</tt> ==

The <tt>edit</tt> method is called when the author creates or edits a quiz. It makes every element of the quiz editable. Prior to refactoring, the HTML was in <tt>app/views/questionnaires/_quiz_questionnaire.html.erb</tt>:

<pre>
<% if @questionnaire.type == 'QuizQuestionnaire' %>

<table id="questions_table">
<% if $disp_flag != 1 %>
<tr>
<td align=left width=300>Questions:</td>
<% if @questionnaire.type != 'QuizQuestionnaire' %><td align=left>weight</td><%end%>

</tr>
<% end %>

<% for @question in @questionnaire.questions %>
<% questionnum=@question.id %>
<tr>
<% if $disp_flag != 1 %>
<td > <%= text_area "question[]", 'txt', :cols=>100 %></td>
<% end %>
<% @quiz_question_choices = QuizQuestionChoice.where(question_id: @question.id) %>

</tr>
<% i=1 %>

<% for @quiz_question_choice in @quiz_question_choices %>
<tr>
<td>
   
<% if @question.type=="MultipleChoiceCheckbox" %>
<%= hidden_field_tag("quiz_question_choices[#{questionnum}][MultipleChoiceCheckbox][#{i}][iscorrect]",'0') %>
<%= check_box_tag("quiz_question_choices[#{questionnum}][MultipleChoiceCheckbox][#{i}][iscorrect]",'1', @quiz_question_choice.iscorrect) %>
 <%= text_field_tag "quiz_question_choices[#{questionnum}][MultipleChoiceCheckbox][#{i}][txt]", @quiz_question_choice.txt, :size=>40 %>

<% end %>

<%if @question.type=="MultipleChoiceRadio" %>
<%= radio_button_tag("quiz_question_choices[#{questionnum}][MultipleChoiceRadio][correctindex]", "#{i}", @quiz_question_choice.iscorrect)%>
 <%= text_field_tag "quiz_question_choices[#{questionnum}][MultipleChoiceRadio][#{i}][txt]", @quiz_question_choice.txt, :size=>40 %>
<% end %>

<%if @question.type=="TrueFalse" %>
<% if @quiz_question_choice.txt=="True"%>
<%= radio_button_tag("quiz_question_choices[#{questionnum}][TrueFalse][1][iscorrect]", 'True', @quiz_question_choice.iscorrect) %> True
<%end%>

<% if @quiz_question_choice.txt=="False"%>
<%= radio_button_tag("quiz_question_choices[#{questionnum}][TrueFalse][1][iscorrect]", 'False', @quiz_question_choice.iscorrect) %> False
<%end%>
<% end %>
</td>
</tr>
<% i+=1 %>
<%end %>

<% end %>
</table>
<% end %>
</pre>

After refactoring, the same file looked like:

<pre>
<% if @questionnaire.type == 'QuizQuestionnaire' %>

<table id="questions_table">
<% if $disp_flag != 1 %>
<tr>
<td align=left width=300>Questions:</td>
<% if @questionnaire.type != 'QuizQuestionnaire' %><td align=left>weight</td><%end%>

</tr>
<% end %>

<% for @question in @questionnaire.questions %>
<% i=1 %>
<%= @question.edit(i) %>
<% end %>
</table>
<% end %>
</pre>
== Refactoring <tt>complete</tt> ==
Logic is written in multiple_choice_checkbox model for multiple choice checkbox question type. Similarly, same process is followed for remaining question types. To begin a quiz, <tt>complete</tt> is called from the model.
@question = self
html = ""
html += label_tag("#{question.id}", question.txt) +" "
quiz_question_choices = QuizQuestionChoice.where(question_id: @question.id)
quiz_question_choices.each do |choice|
if answer=="view"
html += check_box_tag ("#{question.id}[]", "#{choice.txt}", choice.iscorrect)
html += label_tag("#{choice.txt}", choice.txt) + " "
end
if answer=="take"
html += check_box_tag ("#{question.id}[]", "#{choice.txt}")
html += label_tag("#{choice.txt}", choice.txt) + " "
end
html.html_safe
end
end

== Refactoring <tt>view_completed_question</tt> ==
The logic for viewing completed question and their answers is written in <tt>app/views/student_quizzes/finished_quiz.html.erb</tt> using a redundant if-elsif structure as shown below.
<% if question_type.eql? 'MultipleChoiceRadio' %>
<% QuizQuestionChoice.where(question_id: question.id).each do |answer| %>
<% if(answer.iscorrect) %>
<%= p answer.txt %> -- Correct 
<%else%>
<%= p answer.txt %> 
<% end %>
<% end %>
 
<%user_answer=Answer.where(response_id: @response.id, question_id: question.id).first%>
Your answer is: <%= user_answer.comments %>
<%if user_answer.answer==1%>
<img src="/assets/Check-icon.png"/>
<%else%>
<img src="/assets/delete_icon.png"/>
<%end%>
 
<% elsif question_type.eql? 'MultipleChoiceCheckbox' %>
...
<% elsif(question_type == 'TrueFalse') %>
...
The <tt>app/views/student_quizzes/finished_quiz.html.erb</tt> was refactored by removing the logic from the view and making it clean. We used a single construct which determines question type and answer type by calling view_completed_question method declared in quiz class as shown below.
<%user_answer=Answer.where(response_id: @response.id, question_id: question.id)%>
Question <%= i %>: <%= label_tag "#{question.id}", question.txt %> 
<%= question.view_completed_question(i,user_answer) %>
<% i += 1 %>
Similarly, logic was written in models for each of the question types. Following code snippet shows <tt>view_completed_question</tt> for true/false question type.
def view_completed_question(count, answer)
@question = self
html=""
html+= "Correct Answer is: "
html+= QuizQuestionChoice.where(question_id: @question.id,iscorrect: 1).first.txt
html+= " "
html+= "Your answer is: "
html+= answer.first.coments + ""
if(answer.first.answer == 1)
html+= "<img src=/assets/Check-icon.png/>"
else
html+= "<img src=/assets/delete_icon.png/>"
end
html+= " "
end

'''Remove irrelevant comments from the student_quizzes_controller'''
The <tt>student_quizzes_controller</tt> has a few comments which are irrelevant and make the method bulky. These could be safely removed from the code.

== Unit Testing ==
We added unit tests in <tt>spec/models/quiz_question_spec.rb</tt> which check the generated HTML for each of the refactored methods. by We used <tt>context</tt> blocks to incorporate tests for each type of question. Here is an example of the tests for <tt>view_question_text</tt>:

<pre>
describe "view_question_text" do
context "when the question is a multiple-choice radio" do
it "contains the text of the question" do
expect(@radio_question.view_question_text.html_safe).to include("In which city is NCSU located?")
end

it "contains each of the choices" do
expect(@radio_question.view_question_text.html_safe).to include("Raleigh")
expect(@radio_question.view_question_text.html_safe).to include("Atlanta")
expect(@radio_question.view_question_text.html_safe).to include("Charlotte")
expect(@radio_question.view_question_text.html_safe).to include("North Carolina")
end

it "bolds the correct answer" do
expect(@radio_question.view_question_text.html_safe).to include("Raleigh")
end

it "does not bold incorrect answers" do
expect(@radio_question.view_question_text.html_safe).not_to include("Atlanta")
expect(@radio_question.view_question_text.html_safe).not_to include("Charlotte")
expect(@radio_question.view_question_text.html_safe).not_to include("North Carolina")
end
end

context "when the question is a multiple-choice checkbox" do
it "contains the text of the question" do
expect(@checkbox_question.view_question_text.html_safe).to include("Which of the following are colors?")
end

it "contains each of the choices" do
expect(@checkbox_question.view_question_text.html_safe).to include("Paint")
expect(@checkbox_question.view_question_text.html_safe).to include("Blue")
expect(@checkbox_question.view_question_text.html_safe).to include("Car")
expect(@checkbox_question.view_question_text.html_safe).to include("Red")
end

it "bolds the correct answers" do
expect(@checkbox_question.view_question_text.html_safe).to include("Blue")
expect(@checkbox_question.view_question_text.html_safe).to include("Red")
end

it "does not bold incorrect answers" do
expect(@checkbox_question.view_question_text.html_safe).not_to include("Paint")
expect(@checkbox_question.view_question_text.html_safe).not_to include("Car")
end
end

context "when the question is true/false" do
it "contains the text of the question" do
expect(@true_false_question.view_question_text.html_safe).to include("2+2=4")
end

it "contains each of the choices" do
expect(@true_false_question.view_question_text.html_safe).to include("True")
expect(@true_false_question.view_question_text.html_safe).to include("False")
end

it "bolds the correct answer" do
expect(@true_false_question.view_question_text.html_safe).to include("True")
end

it "does not bold the incorrect answer" do
expect(@true_false_question.view_question_text.html_safe).not_to include("False")
end
end
end
</pre>

== UI Testing ==
You may want to use the following information to make UI testing easier if you are using the link in the Expertiza submission:

'''Assignment''': Quiz Assignment 
'''Instructor''': super_administrator2 
'''Students''': student15, student16, student17, student18, student19, student20 

If you are using the link in the Expertiza submission, you do not need a password. We made this change to facilitate testing. The committed code ''does not'' make any change for authenticating users.

=== <tt>view_question_text</tt> ===
# Login as a student.
# Select an assignment that has quizzing enabled (e.g. Quiz Assignment).
# Select "Your Work"
# Select "View quiz".
# You should see each question, followed by the choices. The correct choice(s) will be bolded.

=== <tt>edit</tt> ===
# Login as a student.
# Select an assignment that has quizzing enabled (e.g. Quiz Assignment).
# Select "Your Work"
# Select "Edit quiz".
# You should see each question, followed by the choices, each in an editable text field. The correct choice(s) will be checked.

CSC/ECE 517 Spring 2016/Refactor different question types from quiz feature

2016-03-31T03:17:58Z

Jesankar: Added login info

CSC/ECE 517 Spring 2016/Refactor different question types from quiz feature

2016-03-24T01:56:52Z

Jesankar: Added section on testing

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

== Introduction ==
====Background====

Expertiza is an open source project based on Ruby on Rails framework. Expertiza has a quizzing feature which allow student authors to create quiz questions and test the peer reviewers. The idea behind this is, if a reviewer can answer the quiz questions which were created by the author correctly, we assume that the reviewer has read the artifact carefully enough and thereby we trust the peer-review.

====Current Implementation and Problems====
* Following three different types of questions are supported in quizzing feature of Expertiza
# Multiple Choice Radio
# Multiple Choice Checkbox
# True/False
* The current implementation of Quizzing feature is not consistent with the current questions and questionnaires. Since Quiz questionnaire is one sub type of questionnaire, so it should follow the design of other type of questionnaires. But, the current implementation is inconsistent with other questionnaires.
* In order to create a quiz, the existing code is written in the views which has a series of if-then structures to implement the functionality of each different question type. This kind of implementation makes the code slower and violates the principles of MVC architecture.
* Current HTML code doesn't looks like source code.
* Code is repeated for different question types.
* Proper Ruby naming conventions are not followed
====Changes Implemented====
* All logic moved to model. Four separate methods - <tt>edit</tt>, <tt>view_question_text</tt>, <tt>complete</tt> and <tt>view_completed_question</tt> in order to generate the same HTML for each of the question types. We used polymorphism by declaring all these methods in <tt>QuizQuestion</tt> which inherits from <tt>Question</tt> and has sub-types <tt>MultipleChoiceRadio</tt>, <tt>MultipleChoiceCheckbox</tt>, and <tt>TrueFalse</tt>.
* When questionnaire author creates a quiz, <tt>edit</tt> is called. To call this on UI, you can login as a student, click 'create quiz' / 'edit quiz' on 'Your Works' page. The <tt>edit</tt> method is now called from <tt>/view/questionnaires/_quiz_question.html.erb</tt>
* When questions are viewed by the author or the instructor, <tt>view_question_text</tt> method is called. To call this on UI, you can either login as a student, click 'view quiz' on 'Your works' page or login as an instructor, find an assignment with quizzing feature and click the icon 'view quiz questions'. The 'view_question_text' calls <tt>view/questionnaires/view.html.erb</tt>

* When the quiz takers tries to take the quiz, <tt>complete</tt> is called. To call this on UI, you can login as a quiz taker, request a quiz to take on “Take quizzes” page, then click “begin”. This method is now called on <tt>view/student_quizzes/take_quiz</tt>.
* When the quiz taker finished taking a quiz and wants to view the quiz result again, <tt>view_completed_question</tt> is called. To call this on UI, you can login as a quiz taker, find a finished quiz and click “view”. This method is called on <tt>view/student_quizzes/finished_quiz</tt>.
* Using polymorphism and DRY principles, code repetition has been virtually eliminated.

== Refactoring <tt>view_question_text</tt> ==

The <tt>view_question_text</tt> method is called when the author of the quiz or the instructor views the quiz. The method is responsible for generating the HTML to display the question along with each of its choices. The correct choice(s) should be bolded. Prior to refactoring, this functionality was located in <tt>app/views/student_quizzes/review_questions.html.erb</tt>:
<pre>
<%questions = questionnaire.questions%>
<% questions.each do |question| %>
 <%= question.txt %> 
<% question_type = question.get_formatted_question_type%>
Question Type: <%= question_type %> 

<% if question_type == 'True/False' %>
Correct Answer: <%= (QuizQuestionChoice.where(question_id: question.id, iscorrect:1).first.txt) %> 
<% elsif question_type == 'Multiple Choice - Radio' %>
<% correct_answer = '' %>
Answer Options: 
<% QuizQuestionChoice.where(question_id: question.id).each do |choice| %>
<% if choice.iscorrect == true %>
  <%= choice.txt %> 
<%else%>
  <%= choice.txt %> 
<% end %>

<% end %>
 
<% elsif question_type == 'Multiple Choice - Checked' %>
Answer Options: 
<% QuizQuestionChoice.where(question_id: question.id).each do |choice| %>
<% if choice.iscorrect == true %>
  <%= choice.txt %> 
<%else%>
  <%= choice.txt %> 
<% end %>
<% end %>
 
<% end %>
<% end %><hr>
</pre>

This logic has been moved to <tt>app/models/quiz_question.rb</tt>, so now the view simply needs to call the method:
<pre>
<%questions = questionnaire.questions%>
<%questions.each do |question| %>

<%if question.is_a? Question%>
<%=question.view_question_text.html_safe%>
<%end%>

<% end %><hr>
</pre>

Unit tests were added to <tt>spec/models/quiz_question_spec.rb</tt> covering all three types of questions to ensure that the correct HTML is generated.

== Refactoring <tt>edit</tt> ==

The <tt>edit</tt> method is called when the author creates or edits a quiz. It makes every element of the quiz editable. Prior to refactoring, the HTML was in <tt>app/views/questionnaires/_quiz_questionnaire.html.erb</tt>:

<pre>
<% if @questionnaire.type == 'QuizQuestionnaire' %>

<table id="questions_table">
<% if $disp_flag != 1 %>
<tr>
<td align=left width=300>Questions:</td>
<% if @questionnaire.type != 'QuizQuestionnaire' %><td align=left>weight</td><%end%>

</tr>
<% end %>

<% for @question in @questionnaire.questions %>
<% questionnum=@question.id %>
<tr>
<% if $disp_flag != 1 %>
<td > <%= text_area "question[]", 'txt', :cols=>100 %></td>
<% end %>
<% @quiz_question_choices = QuizQuestionChoice.where(question_id: @question.id) %>

</tr>
<% i=1 %>

<% for @quiz_question_choice in @quiz_question_choices %>
<tr>
<td>
   
<% if @question.type=="MultipleChoiceCheckbox" %>
<%= hidden_field_tag("quiz_question_choices[#{questionnum}][MultipleChoiceCheckbox][#{i}][iscorrect]",'0') %>
<%= check_box_tag("quiz_question_choices[#{questionnum}][MultipleChoiceCheckbox][#{i}][iscorrect]",'1', @quiz_question_choice.iscorrect) %>
 <%= text_field_tag "quiz_question_choices[#{questionnum}][MultipleChoiceCheckbox][#{i}][txt]", @quiz_question_choice.txt, :size=>40 %>

<% end %>

<%if @question.type=="MultipleChoiceRadio" %>
<%= radio_button_tag("quiz_question_choices[#{questionnum}][MultipleChoiceRadio][correctindex]", "#{i}", @quiz_question_choice.iscorrect)%>
 <%= text_field_tag "quiz_question_choices[#{questionnum}][MultipleChoiceRadio][#{i}][txt]", @quiz_question_choice.txt, :size=>40 %>
<% end %>

<%if @question.type=="TrueFalse" %>
<% if @quiz_question_choice.txt=="True"%>
<%= radio_button_tag("quiz_question_choices[#{questionnum}][TrueFalse][1][iscorrect]", 'True', @quiz_question_choice.iscorrect) %> True
<%end%>

<% if @quiz_question_choice.txt=="False"%>
<%= radio_button_tag("quiz_question_choices[#{questionnum}][TrueFalse][1][iscorrect]", 'False', @quiz_question_choice.iscorrect) %> False
<%end%>
<% end %>
</td>
</tr>
<% i+=1 %>
<%end %>

<% end %>
</table>
<% end %>
</pre>

After refactoring, the same file looked like:

<pre>
<% if @questionnaire.type == 'QuizQuestionnaire' %>

<table id="questions_table">
<% if $disp_flag != 1 %>
<tr>
<td align=left width=300>Questions:</td>
<% if @questionnaire.type != 'QuizQuestionnaire' %><td align=left>weight</td><%end%>

</tr>
<% end %>

<% for @question in @questionnaire.questions %>
<% i=1 %>
<%= @question.edit(i) %>
<% end %>
</table>
<% end %>
</pre>
== Refactoring <tt>complete</tt> ==
Logic is written in multiple_choice_checkbox model for multiple choice checkbox question type. Similarly, same process is followed for remaining question types. To begin a quiz, <tt>complete</tt> is called from the model.
@question = self
html = ""
html += label_tag("#{question.id}", question.txt) +" "
quiz_question_choices = QuizQuestionChoice.where(question_id: @question.id)
quiz_question_choices.each do |choice|
if answer=="view"
html += check_box_tag ("#{question.id}[]", "#{choice.txt}", choice.iscorrect)
html += label_tag("#{choice.txt}", choice.txt) + " "
end
if answer=="take"
html += check_box_tag ("#{question.id}[]", "#{choice.txt}")
html += label_tag("#{choice.txt}", choice.txt) + " "
end
html.html_safe
end
end

== Refactoring <tt>view_completed_question</tt> ==
The logic for viewing completed question and their answers is written in <tt>app/views/student_quizzes/finished_quiz.html.erb</tt> using a redundant if-elsif structure as shown below.
<% if question_type.eql? 'MultipleChoiceRadio' %>
<% QuizQuestionChoice.where(question_id: question.id).each do |answer| %>
<% if(answer.iscorrect) %>
<%= p answer.txt %> -- Correct 
<%else%>
<%= p answer.txt %> 
<% end %>
<% end %>
 
<%user_answer=Answer.where(response_id: @response.id, question_id: question.id).first%>
Your answer is: <%= user_answer.comments %>
<%if user_answer.answer==1%>
<img src="/assets/Check-icon.png"/>
<%else%>
<img src="/assets/delete_icon.png"/>
<%end%>
 
<% elsif question_type.eql? 'MultipleChoiceCheckbox' %>
...
<% elsif(question_type == 'TrueFalse') %>
...
The <tt>app/views/student_quizzes/finished_quiz.html.erb</tt> was refactored by removing the logic from the view and making it clean. We used a single construct which determines question type and answer type by calling view_completed_question method declared in quiz class as shown below.
<%user_answer=Answer.where(response_id: @response.id, question_id: question.id)%>
Question <%= i %>: <%= label_tag "#{question.id}", question.txt %> 
<%= question.view_completed_question(i,user_answer) %>
<% i += 1 %>
Similarly, logic was written in models for each of the question types. Following code snippet shows <tt>view_completed_question</tt> for true/false question type.
def view_completed_question(count, answer)
@question = self
html=""
html+= "Correct Answer is: "
html+= QuizQuestionChoice.where(question_id: @question.id,iscorrect: 1).first.txt
html+= " "
html+= "Your answer is: "
html+= answer.first.coments + ""
if(answer.first.answer == 1)
html+= "<img src=/assets/Check-icon.png/>"
else
html+= "<img src=/assets/delete_icon.png/>"
end
html+= " "
end

==== Remove irrelevant comments from the <tt>student_quizzes_controller</tt> ====
The <tt>student_quizzes_controller</tt> has a few comments which are irrelevant and make the method bulky. These could be safely removed from the code.

== Unit Testing ==
We added unit tests in <tt>spec/models/quiz_question_spec.rb</tt> which check the generated HTML for each of the refactored methods. by We used <tt>context</tt> blocks to incorporate tests for each type of question. Here is an example of the tests for <tt>view_question_text</tt>:

<pre>
describe "view_question_text" do
context "when the question is a multiple-choice radio" do
it "contains the text of the question" do
expect(@radio_question.view_question_text.html_safe).to include("In which city is NCSU located?")
end

it "contains each of the choices" do
expect(@radio_question.view_question_text.html_safe).to include("Raleigh")
expect(@radio_question.view_question_text.html_safe).to include("Atlanta")
expect(@radio_question.view_question_text.html_safe).to include("Charlotte")
expect(@radio_question.view_question_text.html_safe).to include("North Carolina")
end

it "bolds the correct answer" do
expect(@radio_question.view_question_text.html_safe).to include("Raleigh")
end

it "does not bold incorrect answers" do
expect(@radio_question.view_question_text.html_safe).not_to include("Atlanta")
expect(@radio_question.view_question_text.html_safe).not_to include("Charlotte")
expect(@radio_question.view_question_text.html_safe).not_to include("North Carolina")
end
end

context "when the question is a multiple-choice checkbox" do
it "contains the text of the question" do
expect(@checkbox_question.view_question_text.html_safe).to include("Which of the following are colors?")
end

it "contains each of the choices" do
expect(@checkbox_question.view_question_text.html_safe).to include("Paint")
expect(@checkbox_question.view_question_text.html_safe).to include("Blue")
expect(@checkbox_question.view_question_text.html_safe).to include("Car")
expect(@checkbox_question.view_question_text.html_safe).to include("Red")
end

it "bolds the correct answers" do
expect(@checkbox_question.view_question_text.html_safe).to include("Blue")
expect(@checkbox_question.view_question_text.html_safe).to include("Red")
end

it "does not bold incorrect answers" do
expect(@checkbox_question.view_question_text.html_safe).not_to include("Paint")
expect(@checkbox_question.view_question_text.html_safe).not_to include("Car")
end
end

context "when the question is true/false" do
it "contains the text of the question" do
expect(@true_false_question.view_question_text.html_safe).to include("2+2=4")
end

it "contains each of the choices" do
expect(@true_false_question.view_question_text.html_safe).to include("True")
expect(@true_false_question.view_question_text.html_safe).to include("False")
end

it "bolds the correct answer" do
expect(@true_false_question.view_question_text.html_safe).to include("True")
end

it "does not bold the incorrect answer" do
expect(@true_false_question.view_question_text.html_safe).not_to include("False")
end
end
end
</pre>

CSC/ECE 517 Spring 2016/Refactor different question types from quiz feature

2016-03-24T00:36:44Z

Jesankar: Improved formatting of method names

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

== Introduction ==
====Background====

Expertiza is an open source project based on Ruby on Rails framework. Expertiza has a quizzing feature which allow student authors to create quiz questions and test the peer reviewers. The idea behind this is, if a reviewer can answer the quiz questions which were created by the author correctly, we assume that the reviewer has read the artifact carefully enough and thereby we trust the peer-review.

====Current Implementation and Problems====
* Following three different types of questions are supported in quizzing feature of Expertiza
# Multiple Choice Radio
# Multiple Choice Checkbox
# True/False
* The current implementation of Quizzing feature is not consistent with the current questions and questionnaires. Since Quiz questionnaire is one sub type of questionnaire, so it should follow the design of other type of questionnaires. But, the current implementation is inconsistent with other questionnaires.
* In order to create a quiz, the existing code is written in the views which has a series of if-then structures to implement the functionality of each different question type. This kind of implementation makes the code slower and violates the principles of MVC architecture.
* Current HTML code doesn't looks like source code.
* Code is repeated for different question types.
* Proper Ruby naming conventions are not followed
====Changes Implemented====
* All logic moved to model. Four separate methods - <tt>edit</tt>, <tt>view_question_text</tt>, <tt>complete</tt> and <tt>view_completed_question</tt> in order to generate the same HTML for each of the question types. We used polymorphism by declaring all these methods in <tt>QuizQuestion</tt> which inherits from <tt>Question</tt> and has sub-types <tt>MultipleChoiceRadio</tt>, <tt>MultipleChoiceCheckbox</tt>, and <tt>TrueFalse</tt>.
* When questionnaire author creates a quiz, <tt>edit</tt> is called. To call this on UI, you can login as a student, click 'create quiz' / 'edit quiz' on 'Your Works' page. The <tt>edit</tt> method is now called from <tt>/view/questionnaires/_quiz_question.html.erb</tt>
* When questions are viewed by the author or the instructor, <tt>view_question_text</tt> method is called. To call this on UI, you can either login as a student, click 'view quiz' on 'Your works' page or login as an instructor, find an assignment with quizzing feature and click the icon 'view quiz questions'. The 'view_question_text' calls <tt>view/questionnaires/view.html.erb</tt>

* When the quiz takers tries to take the quiz, <tt>complete</tt> is called. To call this on UI, you can login as a quiz taker, request a quiz to take on “Take quizzes” page, then click “begin”. This method is now called on <tt>view/student_quizzes/take_quiz</tt>.
* When the quiz taker finished taking a quiz and wants to view the quiz result again, <tt>view_completed_question</tt> is called. To call this on UI, you can login as a quiz taker, find a finished quiz and click “view”. This method is called on <tt>view/student_quizzes/finished_quiz</tt>.
* Using polymorphism and DRY principles, code repetition has been virtually eliminated.

== Refactoring <tt>view_question_text</tt> ==

The <tt>view_question_text</tt> method is called when the author of the quiz or the instructor views the quiz. The method is responsible for generating the HTML to display the question along with each of its choices. The correct choice(s) should be bolded. Prior to refactoring, this functionality was located in <tt>app/views/student_quizzes/review_questions.html.erb</tt>:
<pre>
<%questions = questionnaire.questions%>
<% questions.each do |question| %>
 <%= question.txt %> 
<% question_type = question.get_formatted_question_type%>
Question Type: <%= question_type %> 

<% if question_type == 'True/False' %>
Correct Answer: <%= (QuizQuestionChoice.where(question_id: question.id, iscorrect:1).first.txt) %> 
<% elsif question_type == 'Multiple Choice - Radio' %>
<% correct_answer = '' %>
Answer Options: 
<% QuizQuestionChoice.where(question_id: question.id).each do |choice| %>
<% if choice.iscorrect == true %>
  <%= choice.txt %> 
<%else%>
  <%= choice.txt %> 
<% end %>

<% end %>
 
<% elsif question_type == 'Multiple Choice - Checked' %>
Answer Options: 
<% QuizQuestionChoice.where(question_id: question.id).each do |choice| %>
<% if choice.iscorrect == true %>
  <%= choice.txt %> 
<%else%>
  <%= choice.txt %> 
<% end %>
<% end %>
 
<% end %>
<% end %><hr>
</pre>

This logic has been moved to <tt>app/models/quiz_question.rb</tt>, so now the view simply needs to call the method:
<pre>
<%questions = questionnaire.questions%>
<%questions.each do |question| %>

<%if question.is_a? Question%>
<%=question.view_question_text.html_safe%>
<%end%>

<% end %><hr>
</pre>

Unit tests were added to <tt>spec/models/quiz_question_spec.rb</tt> covering all three types of questions to ensure that the correct HTML is generated.

== Refactoring <tt>edit</tt> ==

The <tt>edit</tt> method is called when the author creates or edits a quiz. It makes every element of the quiz editable. Prior to refactoring, the HTML was in <tt>app/views/questionnaires/_quiz_questionnaire.html.erb</tt>:

<pre>
<% if @questionnaire.type == 'QuizQuestionnaire' %>

<table id="questions_table">
<% if $disp_flag != 1 %>
<tr>
<td align=left width=300>Questions:</td>
<% if @questionnaire.type != 'QuizQuestionnaire' %><td align=left>weight</td><%end%>

</tr>
<% end %>

<% for @question in @questionnaire.questions %>
<% questionnum=@question.id %>
<tr>
<% if $disp_flag != 1 %>
<td > <%= text_area "question[]", 'txt', :cols=>100 %></td>
<% end %>
<% @quiz_question_choices = QuizQuestionChoice.where(question_id: @question.id) %>

</tr>
<% i=1 %>

<% for @quiz_question_choice in @quiz_question_choices %>
<tr>
<td>
   
<% if @question.type=="MultipleChoiceCheckbox" %>
<%= hidden_field_tag("quiz_question_choices[#{questionnum}][MultipleChoiceCheckbox][#{i}][iscorrect]",'0') %>
<%= check_box_tag("quiz_question_choices[#{questionnum}][MultipleChoiceCheckbox][#{i}][iscorrect]",'1', @quiz_question_choice.iscorrect) %>
 <%= text_field_tag "quiz_question_choices[#{questionnum}][MultipleChoiceCheckbox][#{i}][txt]", @quiz_question_choice.txt, :size=>40 %>

<% end %>

<%if @question.type=="MultipleChoiceRadio" %>
<%= radio_button_tag("quiz_question_choices[#{questionnum}][MultipleChoiceRadio][correctindex]", "#{i}", @quiz_question_choice.iscorrect)%>
 <%= text_field_tag "quiz_question_choices[#{questionnum}][MultipleChoiceRadio][#{i}][txt]", @quiz_question_choice.txt, :size=>40 %>
<% end %>

<%if @question.type=="TrueFalse" %>
<% if @quiz_question_choice.txt=="True"%>
<%= radio_button_tag("quiz_question_choices[#{questionnum}][TrueFalse][1][iscorrect]", 'True', @quiz_question_choice.iscorrect) %> True
<%end%>

<% if @quiz_question_choice.txt=="False"%>
<%= radio_button_tag("quiz_question_choices[#{questionnum}][TrueFalse][1][iscorrect]", 'False', @quiz_question_choice.iscorrect) %> False
<%end%>
<% end %>
</td>
</tr>
<% i+=1 %>
<%end %>

<% end %>
</table>
<% end %>
</pre>

After refactoring, the same file looked like:

<pre>
<% if @questionnaire.type == 'QuizQuestionnaire' %>

<table id="questions_table">
<% if $disp_flag != 1 %>
<tr>
<td align=left width=300>Questions:</td>
<% if @questionnaire.type != 'QuizQuestionnaire' %><td align=left>weight</td><%end%>

</tr>
<% end %>

<% for @question in @questionnaire.questions %>
<% i=1 %>
<%= @question.edit(i) %>
<% end %>
</table>
<% end %>
</pre>
== Refactoring <tt>complete</tt> ==
Logic is written in multiple_choice_checkbox model for multiple choice checkbox question type. Similarly, same process is followed for remaining question types. To begin a quiz, <tt>complete</tt> is called from the model.
@question = self
html = ""
html += label_tag("#{question.id}", question.txt) +" "
quiz_question_choices = QuizQuestionChoice.where(question_id: @question.id)
quiz_question_choices.each do |choice|
if answer=="view"
html += check_box_tag ("#{question.id}[]", "#{choice.txt}", choice.iscorrect)
html += label_tag("#{choice.txt}", choice.txt) + " "
end
if answer=="take"
html += check_box_tag ("#{question.id}[]", "#{choice.txt}")
html += label_tag("#{choice.txt}", choice.txt) + " "
end
html.html_safe
end
end

== Refactoring <tt>view_completed_question</tt> ==
The logic for viewing completed question and their answers is written in <tt>app/views/student_quizzes/finished_quiz.html.erb</tt> using a redundant if-elsif structure as shown below.
<% if question_type.eql? 'MultipleChoiceRadio' %>
<% QuizQuestionChoice.where(question_id: question.id).each do |answer| %>
<% if(answer.iscorrect) %>
<%= p answer.txt %> -- Correct 
<%else%>
<%= p answer.txt %> 
<% end %>
<% end %>
 
<%user_answer=Answer.where(response_id: @response.id, question_id: question.id).first%>
Your answer is: <%= user_answer.comments %>
<%if user_answer.answer==1%>
<img src="/assets/Check-icon.png"/>
<%else%>
<img src="/assets/delete_icon.png"/>
<%end%>
 
<% elsif question_type.eql? 'MultipleChoiceCheckbox' %>
...
<% elsif(question_type == 'TrueFalse') %>
...
The <tt>app/views/student_quizzes/finished_quiz.html.erb</tt> was refactored by removing the logic from the view and making it clean. We used a single construct which determines question type and answer type by calling view_completed_question method declared in quiz class as shown below.
<%user_answer=Answer.where(response_id: @response.id, question_id: question.id)%>
Question <%= i %>: <%= label_tag "#{question.id}", question.txt %> 
<%= question.view_completed_question(i,user_answer) %>
<% i += 1 %>
Similarly, logic was written in models for each of the question types. Following code snippet shows <tt>view_completed_question</tt> for true/false question type.
def view_completed_question(count, answer)
@question = self
html=""
html+= "Correct Answer is: "
html+= QuizQuestionChoice.where(question_id: @question.id,iscorrect: 1).first.txt
html+= " "
html+= "Your answer is: "
html+= answer.first.coments + ""
if(answer.first.answer == 1)
html+= "<img src=/assets/Check-icon.png/>"
else
html+= "<img src=/assets/delete_icon.png/>"
end
html+= " "
end

==== Remove irrelevant comments from the <tt>student_quizzes_controller</tt> ====
The <tt>student_quizzes_controller</tt> has a few comments which are irrelevant and make the method bulky. These could be safely removed from the code.

CSC/ECE 517 Spring 2016/Refactor different question types from quiz feature

2016-03-24T00:28:43Z

Jesankar:

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

== Introduction ==
====Background====

Expertiza is an open source project based on Ruby on Rails framework. Expertiza has a quizzing feature which allow student authors to create quiz questions and test the peer reviewers. The idea behind this is, if a reviewer can answer the quiz questions which were created by the author correctly, we assume that the reviewer has read the artifact carefully enough and thereby we trust the peer-review.

====Current Implementation and Problems====
* Following three different types of questions are supported in quizzing feature of Expertiza
# Multiple Choice Radio
# Multiple Choice Checkbox
# True/False
* The current implementation of Quizzing feature is not consistent with the current questions and questionnaires. Since Quiz questionnaire is one sub type of questionnaire, so it should follow the design of other type of questionnaires. But, the current implementation is inconsistent with other questionnaires.
* In order to create a quiz, the existing code is written in the views which has a series of if-then structures to implement the functionality of each different question type. This kind of implementation makes the code slower and violates the principles of MVC architecture.
* Current HTML code doesn't looks like source code.
* Code is repeated for different question types.
* Proper Ruby naming conventions are not followed
====Changes Implemented====
* All logic moved to model. Four separate methods - 'edit', 'view_question_text', 'complete' and 'view_completed_question' in order to generate the same html code for each of the question types. We used polymorphism by declaring all these methods in QuizQuestion class which inherits from Questions class and has sub-types MultipleChoiceRadio, MultipleChoiceCheckbox, and TrueFalse.
* When questionnaire author creates a quiz, 'edit' method is called. To call this on UI, you can login as a student, click 'create quiz' / 'edit quiz' on 'Your Works' page. The 'edit' method is now called from /view/questionnaires/_quiz_question.html.erb
* When questions are viewed by the author or the instructor, 'view_question_text' method is called. To call this on UI, you can either login as a student, click 'view quiz' on 'Ypur works' page or login as an instructor, find an assignment with quizzing feature and click the icon 'view quiz questions'. The 'view_question_text' calls view/questionnaires/view.html.erb

* When the quiz takers tries to take the quiz, “complete” is called. To call this on UI, you can login as a quiz taker, request a quiz to take on “Take quizzes” page, then click “begin”. This method is now called on “view/student_quizzes/take_quiz”.
* When the quiz taker finished taking a quiz and wants to view the quiz result again, “view_completed_question” is called. To call this on UI, you can login as a quiz taker, find a finished quiz and click “view”. This method is called on “view/student_quizzes/finished_quiz”.
* Using polymorphism and DRY principles, code repetition has been eliminated.

== Refactoring <tt>view_question_text</tt> ==

The <tt>view_question_text</tt> method is called when the author of the quiz or the instructor views the quiz. The method is responsible for generating the HTML to display the question along with each of its choices. The correct choice(s) should be bolded. Prior to refactoring, this functionality was located in <tt>app/views/student_quizzes/review_questions.html.erb</tt>:
<pre>
<%questions = questionnaire.questions%>
<% questions.each do |question| %>
 <%= question.txt %> 
<% question_type = question.get_formatted_question_type%>
Question Type: <%= question_type %> 

<% if question_type == 'True/False' %>
Correct Answer: <%= (QuizQuestionChoice.where(question_id: question.id, iscorrect:1).first.txt) %> 
<% elsif question_type == 'Multiple Choice - Radio' %>
<% correct_answer = '' %>
Answer Options: 
<% QuizQuestionChoice.where(question_id: question.id).each do |choice| %>
<% if choice.iscorrect == true %>
  <%= choice.txt %> 
<%else%>
  <%= choice.txt %> 
<% end %>

<% end %>
 
<% elsif question_type == 'Multiple Choice - Checked' %>
Answer Options: 
<% QuizQuestionChoice.where(question_id: question.id).each do |choice| %>
<% if choice.iscorrect == true %>
  <%= choice.txt %> 
<%else%>
  <%= choice.txt %> 
<% end %>
<% end %>
 
<% end %>
<% end %><hr>
</pre>

This logic has been moved to <tt>app/models/quiz_question.rb</tt>, so now the view simply needs to call the method:
<pre>
<%questions = questionnaire.questions%>
<%questions.each do |question| %>

<%if question.is_a? Question%>
<%=question.view_question_text.html_safe%>
<%end%>

<% end %><hr>
</pre>

Unit tests were added to <tt>spec/models/quiz_question_spec.rb</tt> covering all three types of questions to ensure that the correct HTML is generated.

== Refactoring <tt>edit</tt> ==

The <tt>edit</tt> method is called when the author creates or edits a quiz. It makes every element of the quiz editable. Prior to refactoring, the HTML was in <tt>app/views/questionnaires/_quiz_questionnaire.html.erb</tt>:

<pre>
<% if @questionnaire.type == 'QuizQuestionnaire' %>

<table id="questions_table">
<% if $disp_flag != 1 %>
<tr>
<td align=left width=300>Questions:</td>
<% if @questionnaire.type != 'QuizQuestionnaire' %><td align=left>weight</td><%end%>

</tr>
<% end %>

<% for @question in @questionnaire.questions %>
<% questionnum=@question.id %>
<tr>
<% if $disp_flag != 1 %>
<td > <%= text_area "question[]", 'txt', :cols=>100 %></td>
<% end %>
<% @quiz_question_choices = QuizQuestionChoice.where(question_id: @question.id) %>

</tr>
<% i=1 %>

<% for @quiz_question_choice in @quiz_question_choices %>
<tr>
<td>
   
<% if @question.type=="MultipleChoiceCheckbox" %>
<%= hidden_field_tag("quiz_question_choices[#{questionnum}][MultipleChoiceCheckbox][#{i}][iscorrect]",'0') %>
<%= check_box_tag("quiz_question_choices[#{questionnum}][MultipleChoiceCheckbox][#{i}][iscorrect]",'1', @quiz_question_choice.iscorrect) %>
 <%= text_field_tag "quiz_question_choices[#{questionnum}][MultipleChoiceCheckbox][#{i}][txt]", @quiz_question_choice.txt, :size=>40 %>

<% end %>

<%if @question.type=="MultipleChoiceRadio" %>
<%= radio_button_tag("quiz_question_choices[#{questionnum}][MultipleChoiceRadio][correctindex]", "#{i}", @quiz_question_choice.iscorrect)%>
 <%= text_field_tag "quiz_question_choices[#{questionnum}][MultipleChoiceRadio][#{i}][txt]", @quiz_question_choice.txt, :size=>40 %>
<% end %>

<%if @question.type=="TrueFalse" %>
<% if @quiz_question_choice.txt=="True"%>
<%= radio_button_tag("quiz_question_choices[#{questionnum}][TrueFalse][1][iscorrect]", 'True', @quiz_question_choice.iscorrect) %> True
<%end%>

<% if @quiz_question_choice.txt=="False"%>
<%= radio_button_tag("quiz_question_choices[#{questionnum}][TrueFalse][1][iscorrect]", 'False', @quiz_question_choice.iscorrect) %> False
<%end%>
<% end %>
</td>
</tr>
<% i+=1 %>
<%end %>

<% end %>
</table>
<% end %>
</pre>

After refactoring, the same file looked like:

<pre>
<% if @questionnaire.type == 'QuizQuestionnaire' %>

<table id="questions_table">
<% if $disp_flag != 1 %>
<tr>
<td align=left width=300>Questions:</td>
<% if @questionnaire.type != 'QuizQuestionnaire' %><td align=left>weight</td><%end%>

</tr>
<% end %>

<% for @question in @questionnaire.questions %>
<% i=1 %>
<%= @question.edit(i) %>
<% end %>
</table>
<% end %>
</pre>
== Refactoring complete ==
Logic is written in multiple_choice_checkbox model for multiple choice checkbox question type. Similarly, same process is followed for remaining question types. Now, to begin a quiz, complete method is called from the model.
@question = self
html = ""
html += label_tag("#{question.id}", question.txt) +" "
quiz_question_choices = QuizQuestionChoice.where(question_id: @question.id)
quiz_question_choices.each do |choice|
if answer=="view"
html += check_box_tag ("#{question.id}[]", "#{choice.txt}", choice.iscorrect)
html += label_tag("#{choice.txt}", choice.txt) + " "
end
if answer=="take"
html += check_box_tag ("#{question.id}[]", "#{choice.txt}")
html += label_tag("#{choice.txt}", choice.txt) + " "
end
html.html_safe
end
end

== Refactoring view_completed_question ==
The logic for viewing completed question and their answers is written in app/views/student_quizzes/finished_quiz.html.erb using a redundant if-elsif structure as shown below. <syntaxhighlight lang="ruby">
<% if question_type.eql? 'MultipleChoiceRadio' %>
<% QuizQuestionChoice.where(question_id: question.id).each do |answer| %>
<% if(answer.iscorrect) %>
<%= p answer.txt %> -- Correct 
<%else%>
<%= p answer.txt %> 
<% end %>
<% end %>
 
<%user_answer=Answer.where(response_id: @response.id, question_id: question.id).first%>
Your answer is: <%= user_answer.comments %>
<%if user_answer.answer==1%>
<img src="/assets/Check-icon.png"/>
<%else%>
<img src="/assets/delete_icon.png"/>
<%end%>
 
<% elsif question_type.eql? 'MultipleChoiceCheckbox' %>
...
<% elsif(question_type == 'TrueFalse') %>
...
The app/views/student_quizzes/finished_quiz.html.erb was refactored by removing the logic from the view and making it clean. We used a single construct which determines question type and answer type by calling view_completed_question method declared in quiz class as shown below.
<%user_answer=Answer.where(response_id: @response.id, question_id: question.id)%>
Question <%= i %>: <%= label_tag "#{question.id}", question.txt %> 
<%= question.view_completed_question(i,user_answer) %>
<% i += 1 %>
Similarly, logic was written in models for each of the question types. Following code snippet shows view_completed_question for true/false question type.
def view_completed_question(count, answer)
@question = self
html=""
html+= "Correct Answer is: "
html+= QuizQuestionChoice.where(question_id: @question.id,iscorrect: 1).first.txt
html+= " "
html+= "Your answer is: "
html+= answer.first.coments + ""
if(answer.first.answer == 1)
html+= "<img src=/assets/Check-icon.png/>"
else
html+= "<img src=/assets/delete_icon.png/>"
end
html+= " "
end

==== Remove irrelevant comments from the student_quizzes_controller ====
The student_quizzes_controller has a few comments which are irrelevant and make the method bulky. These could be safely removed from the code.

CSC/ECE 517 Spring 2016/Refactor different question types from quiz feature

2016-03-24T00:22:26Z

Jesankar: Added section for 'view_question_text'

CSC/ECE 517 Spring 2016

2016-03-23T23:05:23Z

Jesankar: Added link for the "Refactor different question types from quiz feature" project

==Calibration Assignment Submissions==
*[[Calibration Assignment Submission (OmniAuth)]]
*[[Calibration Assignment Submission (Patch_verb)]]

==Writing Assignment 2==
[[CSC/ECE 517 Spring 2016/Mozilla Implement HTML5 form validation]]

[[CSC/ECE 517 Spring 2016/Functional Tests for Questionnaire Controller]]

[[CSC/ECE 517 Spring 2016 / Expertiza Self-Review Feature]]

[[CSC/ECE 517 Spring 2016/Refactor different question types from quiz feature]]